:root{--bg:#0f1420;--card:#182033;--line:#27324d;--txt:#e8ecf5;--mut:#8b96b3;--acc:#4f8cff}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--txt);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
[hidden]{display:none!important}
#home{max-width:720px;margin:0 auto;padding:12vh 16px 32px;text-align:center}
h1{font-size:clamp(2.2rem,7vw,3.6rem);margin:0;letter-spacing:-1px}
h1 span{color:var(--acc)}
.sub{color:var(--mut);margin:.4rem 0 1.6rem}
#form{display:flex;gap:8px}
#form input,#url{flex:1;background:var(--card);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:14px 16px;font-size:1rem;outline:none;min-width:0}
#form input:focus,#url:focus{border-color:var(--acc)}
button{background:var(--acc);color:#fff;border:0;border-radius:12px;padding:0 20px;font-size:1rem;cursor:pointer}
button:hover{filter:brightness(1.1)}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--mut)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:28px 0}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 8px;color:var(--txt);cursor:pointer;font-size:.95rem}
.tile:hover{border-color:var(--acc)}
.tile b{display:block;font-size:1.5rem;margin-bottom:4px}
.ads{margin:24px 0;min-height:0}
.status{color:var(--mut);font-size:.85rem}
.status.err{color:#ff7a7a}
footer{color:var(--mut);font-size:.75rem;margin-top:32px}
footer a{color:var(--mut)}
#browser{position:fixed;inset:0;display:flex;flex-direction:column;background:#fff}
.bar{display:flex;gap:6px;padding:8px;background:var(--bg);border-bottom:1px solid var(--line)}
.bar button{padding:0 12px;height:38px;background:var(--card);border:1px solid var(--line)}
#bar-form{flex:1;display:flex}
#url{padding:0 14px;height:38px;border-radius:19px}
#frame-host{flex:1;position:relative}
#frame-host iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
#age{position:fixed;inset:0;background:rgba(0,0,0,.75);display:grid;place-items:center;padding:16px;z-index:10}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;max-width:420px;text-align:center}
.card button{height:44px;margin:6px 4px}

.notice{background:#3a2f12;border:1px solid #7a6320;color:#ffe9a8;border-radius:12px;padding:10px 14px;margin:8px 0}
.notice.maint{background:#3a1616;border-color:#7a2e2e;color:#ffc5c5}
.ads iframe,.ad-bar iframe,#interstitial-ad iframe{width:100%;border:0;background:transparent;display:block;margin:0 auto}
.ads .ad{margin:10px auto;max-width:728px}
.ad-bar{background:#0b0f19;border-bottom:1px solid var(--line);padding:4px 8px}
.ad-bar .ad{max-width:970px;margin:0 auto}
.partners{font-size:.8rem;color:var(--mut);margin-bottom:10px}
.partners a{color:var(--mut);text-decoration:none;margin:0 8px;white-space:nowrap}
.partners a:hover{color:var(--txt);text-decoration:underline}
.partners .lbl{opacity:.6}
.bar-partners{background:var(--bg);border-top:1px solid var(--line);padding:6px 8px;margin:0;text-align:center;overflow-x:auto;white-space:nowrap}
#interstitial{position:fixed;inset:0;background:rgba(0,0,0,.85);display:grid;place-items:center;padding:16px;z-index:20}
.card.wide{width:min(760px,100%);max-width:none}
#interstitial-close:disabled{opacity:.5;cursor:default}
#interstitial-ad .ad{background:#fff;border-radius:10px;overflow:hidden;margin:0 0 12px}
