* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; max-width: 640px; margin: 40px auto; padding: 20px; background: #f4f4f9; color: #333; text-align: center; }
h1 { color: #2c3e50; border-bottom: 2px solid #e67e22; padding-bottom: 10px; font-size: clamp(1.5rem, 5vw, 2rem); }
.btn { display: block; width: 100%; padding: 15px; background: #a94300; color: white; font-weight: bold; border-radius: 8px; border: none; cursor: pointer; font-size: 1.1rem; margin-bottom: 20px; }
.btn:hover { background: #873600; }
.btn:disabled { opacity: .6; cursor: default; }
ul { list-style: none; padding: 0; text-align: left; }
li { margin: 10px 0; background: white; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.05); }
li a { display: block; padding: 12px; overflow-wrap: anywhere; }
a { color: #176397; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid #176397; outline-offset: 4px; }
.status-msg { font-size: 1.05rem; font-weight: bold; margin-top: 20px; }
.status-msg[data-state="success"] { color: #176b36; }
.status-msg[data-state="blocked"] { color: #854000; }
.hint { font-size: .9rem; color: #555; }
@media (max-width: 480px) { body { margin: 12px auto; padding: 16px; } }