:root { color-scheme: dark; --bg:#101216; --panel:#191c22; --line:#303640; --fg:#f1f3f5; --muted:#aab2bd; --accent:#5b9cff; --ok:#43c778; }
* { box-sizing:border-box; }
body { margin:0; min-width:280px; font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:52px; padding:.75rem 1.25rem; background:var(--panel); border-bottom:1px solid var(--line); }
.brand { font-size:1rem; font-weight:650; }
.signout { margin:0; }
.link-button { padding:0; border:0; background:transparent; color:var(--muted); cursor:pointer; font:inherit; }
.link-button:hover { color:var(--accent); }
main { width:min(880px,100%); margin:2rem auto; padding:0 1.25rem; }
h1 { margin:0 0 .25rem; font-size:1.5rem; }
h2 { margin:0 0 .6rem; color:var(--muted); font-size:.9rem; text-transform:uppercase; }
.muted { color:var(--muted); }
.small { font-size:.86rem; }
.card { margin:1.25rem 0; padding:1rem 1.25rem; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.center-card { max-width:440px; margin:4rem auto; text-align:center; }
.primary, .import-link { display:inline-block; border-radius:6px; text-decoration:none; }
.primary { margin-top:.5rem; padding:.55rem 1.1rem; background:var(--accent); color:#fff; }
.plan { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.badge { padding:.1rem .5rem; border-radius:999px; background:rgb(67 199 120 / 15%); color:var(--ok); font-size:.75rem; }
.url-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:1rem; margin:1.25rem 0; }
.url-card { display:flex; flex-direction:column; margin:0; min-width:0; }
.url-row { display:flex; align-items:flex-start; gap:.5rem; }
.url-text { flex:1; min-width:0; padding:.4rem .5rem; border-radius:5px; background:#0b0d10; overflow-wrap:anywhere; font-size:.78rem; }
.copy-button { flex:0 0 auto; min-height:32px; padding:.35rem .65rem; border:0; border-radius:5px; background:var(--accent); color:#fff; cursor:pointer; }
.qr-wrap { display:flex; justify-content:center; margin-top:auto; padding:1rem 0 .25rem; }
.qr-img { width:160px; height:160px; border-radius:8px; background:#fff; }
.import-row { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:1rem 0 0; }
.import-link { padding:.3rem .7rem; border:1px solid var(--accent); }
footer { width:min(880px,100%); margin:2rem auto; padding:1rem 1.25rem; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
@media (max-width:480px) { main { margin-top:1.25rem; } .center-card { margin-top:2rem; } .url-row { flex-direction:column; } .copy-button { align-self:flex-end; } }