:root { --bg:#07080a; --surface:#0e1117; --surface-2:#151a22; --line:#212834; --text:#eef2f7; --muted:#8b94a3; --blue:#38bdf8; --good:#46d17f; --warn:#f5b642; --danger:#f2555a; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro","Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
#app { max-width:560px; margin:0 auto; padding:max(14px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom)); }
@media (min-width:900px) { #app { max-width:1100px; } }
[hidden] { display:none !important; }
h1 { font-size:23px; line-height:1.2; margin:8px 0 8px; }
h2 { font-size:20px; margin:6px 0 8px; }
h3 { font-size:14px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin:22px 0 4px; }
.lead { color:var(--muted); font-size:15px; margin:0 0 6px; }
label { display:block; font-size:13px; color:var(--muted); margin:12px 0 4px; }
input.masked { -webkit-text-security:disc; text-security:disc; }
input[type=text], input[type=password] { width:100%; font:inherit; font-size:16px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:11px 12px; }
input:focus { outline:2px solid var(--blue); outline-offset:1px; }
button { font:inherit; cursor:pointer; }
button.primary { width:100%; margin-top:14px; padding:13px; border:0; border-radius:12px; background:var(--blue); color:#04121a; font-weight:700; font-size:17px; }
button.secondary { width:100%; margin-top:10px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); }
button.danger { width:100%; margin-top:10px; padding:12px; border:1px solid rgba(242,85,90,.5); border-radius:12px; background:rgba(242,85,90,.1); color:var(--danger); font-weight:700; }
button.link { background:none; border:0; color:var(--blue); padding:6px 0; }
button.icon { background:none; border:0; color:var(--muted); font-size:22px; padding:4px 8px; line-height:1; }
button:disabled { opacity:.55; cursor:default; }
.warn-line { font-size:13px; color:var(--warn); margin:12px 0 4px; line-height:1.4; }
.msg { margin:10px 0 0; font-size:14px; color:var(--danger); }
.msg.ok { color:var(--good); }
details.more { border-top:1px solid var(--line); margin-top:8px; padding:8px 0; font-size:14px; color:var(--muted); }
details.more summary { cursor:pointer; color:var(--text); font-weight:600; }
details.more ul { padding-left:18px; margin:8px 0 0; } details.more li { margin:4px 0; } details.more p { margin:8px 0 0; }
.share-row { text-align:center; margin:4px 0 0; }
.center { text-align:center; padding:22vh 8px 0; }
.spin { width:30px; height:30px; margin:0 auto 14px; border:3px solid var(--line); border-top-color:var(--blue); border-radius:50%; animation:sp 0.9s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
.bar { height:4px; background:var(--line); border-radius:2px; margin:10px auto 0; max-width:220px; overflow:hidden; } .bar i { display:block; height:100%; width:0; background:var(--blue); transition:width .2s; }
.bar-top { display:flex; align-items:center; gap:8px; min-height:34px; margin-bottom:2px; }
.bar-top .note { flex:1; font-size:12px; color:var(--muted); text-align:right; }
.badge { font-size:12px; font-weight:700; border-radius:999px; padding:3px 10px; border:1px solid; }
.badge.ok { color:var(--good); border-color:rgba(70,209,127,.4); background:rgba(70,209,127,.08); }
.badge.amber { color:var(--warn); border-color:rgba(245,182,66,.45); background:rgba(245,182,66,.1); }
.banner { font-size:13.5px; border-radius:10px; padding:9px 12px; margin:4px 0 8px; color:var(--warn); background:rgba(245,182,66,.1); border:1px solid rgba(245,182,66,.35); }
.banner button { margin-left:8px; }
.foot { font-size:12px; color:var(--muted); text-align:center; margin:16px 0 0; }

.keyline { font-size:14px; margin:4px 0 8px; color:var(--muted); }
.keyline a, details.more a { color:var(--blue); text-decoration:underline; }
.keyline a { font-weight:600; }
.hint { display:flex; align-items:center; gap:10px; font-size:13.5px; border-radius:10px; padding:9px 12px; margin:4px 0 8px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); }
.hint span { flex:1; }
.hint button { min-height:44px; min-width:64px; padding:6px 10px; }
/* L-1984 no-op: proves a deploy changes the stamped URL */