:root{
  --pad:12px; --line:#eee; --muted:#6b7280; --radius:14px; --headH:0px; --safeTop:env(safe-area-inset-top,0px);
  --bg:#ffffff; --fg:#111111; --surface:#ffffff; --soft:#fafafa;
}
:root[data-theme="dark"]{
  --bg:#0b0b0f; --fg:#f3f4f6; --surface:#121217; --soft:#16161d; --line:#2a2a34; --muted:#9aa0a6;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:auto}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--fg); background:var(--bg); overscroll-behavior:none;
}
img{max-width:100%; display:block}

/* Splash */
#splash{position:fixed; inset:0; background:var(--surface); display:flex; align-items:center; justify-content:center; z-index:1000; transition:opacity .35s}
#splash .box{display:flex; flex-direction:column; align-items:center; gap:12px}
#splash .logo{width:min(160px,40vw); height:auto}
.spinner{width:38px; height:38px; border:3px solid var(--line); border-top-color:var(--fg); border-radius:50%; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Header */
.header{position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--line); padding:6px var(--pad); display:flex; align-items:center; justify-content:center}
.header img.logo{height:clamp(28px,10vw,120px); width:auto; max-width:90vw}

/* Sticky toolbar */
.topstick{position:sticky; top:var(--headH); z-index:19; background:var(--surface); border-bottom:1px solid var(--line)}
.toolbar{padding:8px var(--pad); display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.search{position:relative; flex:1; display:flex; min-width:180px}
.search input{flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:999px; font-size:15px; outline:none; background:var(--surface); color:var(--fg)}
.clearbtn{position:absolute; right:10px; top:50%; transform:translateY(-50%); border:1px solid var(--line); border-radius:999px; background:var(--surface); width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-weight:900; cursor:pointer}

.toggle{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.toggle button{border:0; background:var(--surface); padding:8px 10px; font-weight:600; cursor:pointer; font-size:14px; color:var(--fg)}
.toggle button.active{background:var(--fg); color:var(--bg)}
select.sort, .chk, .filterbtn, .ai-btn, .sharebtn, #aiSend, #aiMic{
  padding:8px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-weight:700; color:var(--fg); cursor:pointer; font-size:14px
}
#aiSend{background:var(--fg); color:var(--bg); border-color:var(--fg)}

.chips{padding:6px var(--pad); overflow:auto; display:flex; gap:6px}
.chip{white-space:nowrap; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); text-decoration:none; color:var(--fg); font-weight:700; font-size:13px}
.chip.active{background:var(--fg); color:var(--bg); border-color:var(--fg)}

.wrap{padding:8px var(--pad) 64px}
.empty{margin:12px var(--pad); padding:14px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); text-align:center}
.hidden{display:none !important}