:root{
  --bg:#F6F8FB; --paper:#fff; --text:#0F172A; --muted:#64748B;
  --border:rgba(15,23,42,.12); --accent:#2563EB; --shadow:0 14px 40px rgba(15,23,42,.10);
  --r:18px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Tahoma,Arial; background:var(--bg); color:var(--text); line-height:1.7}
.container{max-width:1100px;margin:0 auto;padding:14px}
a{color:inherit;text-decoration:none}
.btn{border:1px solid var(--border); background:var(--accent); color:#fff; padding:10px 14px; border-radius:999px; cursor:pointer}
.iconbtn{border:1px solid var(--border); background:var(--paper); width:42px;height:42px;border-radius:999px; cursor:pointer}
.top{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.top-inner{display:flex;align-items:center;gap:10px;justify-content:space-between; padding:10px 12px; max-width:1100px; margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg, rgba(37,99,235,.2), rgba(37,99,235,.05));border:1px solid var(--border)}
.brandtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.brandtext strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brandtext small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Drawer */
.drawer{display:none}
.drawer[aria-hidden="false"]{display:block}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:200}
.panel{position:fixed;top:0;bottom:0;right:0;width:min(86vw,360px);background:var(--paper);z-index:210;box-shadow:var(--shadow);border-left:1px solid var(--border);padding:12px;display:flex;flex-direction:column;gap:10px}
.panel-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:10px}
.panel a{padding:12px;border:1px solid var(--border);border-radius:14px;background:#fff}
.panel a:hover{background:#f3f6ff}

/* Search overlay */
.soverlay{display:none}
.soverlay[aria-hidden="false"]{display:grid;place-items:center;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:300;padding:16px}
.sbox{width:min(560px,100%);background:var(--paper);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.shead{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--border)}
.sform{display:flex;gap:10px;padding:12px}
.sform input{flex:1;border:1px solid var(--border);border-radius:999px;padding:12px 14px;outline:none}

/* Footer */
.foot{border-top:1px solid var(--border);margin-top:18px;background:#fff}
.foot-inner{display:flex;flex-direction:column;gap:8px}
.note{color:var(--muted);font-size:12px}
.copy{color:var(--muted);font-size:12px}