:root { --bg:#eef1f5; --card:#fff; --fg:#1d2330; --muted:#6a7385; --line:#e1e5ec;
        --accent:#e32b33; --link:#0b5cad; --shadow:0 10px 40px rgba(20,30,60,.10); }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1218; --card:#1a1f29; --fg:#eceff4; --muted:#98a1b3; --line:#2a313e;
          --link:#7bb8ff; --shadow:0 10px 40px rgba(0,0,0,.5); }
}
* { box-sizing:border-box; }
body { margin:0; padding:16px;
       background:var(--bg); color:var(--fg); font:17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width:30rem; margin:6vh auto 0; background:var(--card); border-radius:16px;
       box-shadow:var(--shadow); border-top:4px solid var(--accent); padding:2.2rem 1.6rem 1.6rem; }
.logo { display:block; margin:0 auto 1.6rem; background:#fff; border-radius:8px; padding:.3rem .8rem; }
.l { position:absolute; left:-9999px; }
p { margin:0 0 1.4rem; text-align:center; }
ul { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.c { display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; border:1px solid var(--line);
     border-radius:12px; color:var(--fg); text-decoration:none; transition:border-color .15s, transform .15s; }
a.c:hover, a.c:focus-visible { border-color:var(--accent); transform:translateY(-1px); }
.c span { line-height:1.3; min-width:0; overflow-wrap:anywhere; }
.i { width:1.5rem; height:1.5rem; flex:none; color:var(--accent); }
@media (max-width:600px) { body { padding:8px; } main { margin-top:0; padding:1.4rem 1rem 1.2rem; } }
footer { margin-top:1.6rem; text-align:center; color:var(--muted); font-size:.85rem; }