:root {
  --brand-a:#fb7299; --brand-b:#00aeec; --brand-ab:#b26fd8;
  --grad:linear-gradient(120deg,var(--brand-a),var(--brand-b));
  --grad-soft:linear-gradient(135deg,rgba(251,114,153,.16),rgba(0,174,236,.16));
  --bg:#f4f6fb; --bg-2:#eef1f8; --panel:#ffffff; --panel-2:#f7f9ff; --panel-3:#eef1f7;
  --ink:#18191c; --ink-2:#61666d; --ink-3:#9499a3;
  --line:rgba(24,25,28,.08); --line-2:rgba(24,25,28,.14);
  --accent:var(--brand-a); --on-accent:#fff;
  --ok:#00a1d6; --danger:#fa5a5a;
  --ring:0 0 0 3px rgba(251,114,153,.2);
  --shadow-card:0 2px 10px rgba(24,28,45,.05), 0 10px 30px -16px rgba(24,28,45,.12);
  --shadow-lift:0 22px 44px -22px rgba(24,28,45,.22), 0 8px 20px -12px rgba(24,28,45,.1);
  --shadow-modal:0 30px 80px -32px rgba(24,28,45,.42);
  --toast-bg:#212225; --toast-fg:#fff;
  --container-w:1480px;
}
body.dark {
  --bg:#0f1215; --bg-2:#15191d; --panel:#181c21; --panel-2:#1f242b; --panel-3:#252b33;
  --ink:#e9edf2; --ink-2:#b0b7c1; --ink-3:#6d7580;
  --line:rgba(233,237,242,.09); --line-2:rgba(233,237,242,.18);
  --accent:var(--brand-a);
  --ring:0 0 0 3px rgba(251,114,153,.36);
  --shadow-card:0 2px 10px rgba(0,0,0,.32); --shadow-lift:0 22px 44px -20px rgba(0,0,0,.8);
  --shadow-modal:0 30px 80px -28px rgba(0,0,0,.95);
  --toast-bg:#eef1f5; --toast-fg:#18191c;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; scrollbar-gutter:stable; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","HarmonyOS Sans SC","Noto Sans SC",sans-serif;
  font-kerning:normal; text-rendering:optimizeLegibility;
  background:var(--bg); color:var(--ink); min-height:100vh; font-size:15px; line-height:1.6;
  transition:background .3s,color .3s; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body, .app-header, .search-box, .card-title, .modal, .more-menu, .footer, .toolbar, .state-box, .bm-toolbar { transition:background-color .3s ease, color .3s ease, border-color .3s ease; }
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 520px at 8% -16%, rgba(251,114,153,.22), transparent 56%),
    radial-gradient(1100px 560px at 94% -12%, rgba(0,174,236,.24), transparent 56%),
    radial-gradient(900px 620px at 50% 112%, rgba(178,111,216,.16), transparent 58%);
}
body.dark::before {
  background:
    radial-gradient(1100px 520px at 8% -16%, rgba(251,114,153,.18), transparent 56%),
    radial-gradient(1100px 560px at 94% -12%, rgba(0,174,236,.2), transparent 56%),
    radial-gradient(900px 620px at 50% 112%, rgba(178,111,216,.13), transparent 58%);
}

.app-header { position:sticky; top:0; z-index:100; backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); background:color-mix(in srgb,var(--bg) 82%,transparent); border-bottom:1px solid var(--line); }
.header-inner { max-width:var(--container-w); margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.brand { display:flex; align-items:center; gap:12px; min-width:0; text-decoration:none; color:inherit; }
.brand-logo {
  width:42px; height:42px; border-radius:14px; display:grid; place-items:center; font-size:21px; flex-shrink:0;
  background:var(--grad); color:#fff; transform:rotate(-3deg);
  box-shadow:0 6px 16px -6px rgba(251,114,153,.55);
}
.brand-name { display:flex; flex-direction:column; min-width:0; }
.brand h1 {
  font-size:19px; font-weight:800; letter-spacing:-.01em; line-height:1.2;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-sub { font-size:12px; color:var(--ink-3); margin-top:2px; }
.header-actions { display:flex; gap:4px; flex-shrink:0; }

.icon-btn {
  position:relative; width:40px; height:40px; border-radius:12px; border:1px solid transparent; cursor:pointer;
  background:transparent; color:var(--ink-2); font-size:18px; display:grid; place-items:center; transition:all .18s;
}
.icon-btn:hover { color:var(--brand-a); background:var(--panel); border-color:var(--line); transform:translateY(-1px); }
.icon-btn:focus-visible { outline:none; box-shadow:var(--ring); }
.badge-dot { position:absolute; top:0; right:0; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--grad); color:#fff; font-size:10px; font-weight:800; display:none; place-items:center; }
.badge-dot.show { display:grid; }

.header-search { flex:1; max-width:540px; display:flex; justify-content:center; padding:0 10px; }
.header-search .search-box { width:100%; height:38px; }
.search-box { display:flex; align-items:center; gap:8px; padding:0 8px 0 14px; border-radius:8px; background:color-mix(in srgb,var(--panel-2) 58%,transparent); backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5); border:1px solid var(--line-2); transition:border-color .18s, box-shadow .18s, background .18s; }
.search-box:hover { border-color:var(--line-2); background:color-mix(in srgb,var(--panel) 70%,transparent); }
.search-box:focus-within { border-color:var(--brand-a); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-a) 22%,transparent); }
.search-box .icon { display:flex; flex-shrink:0; color:var(--ink-3); }
.search-box input { flex:1; min-width:0; border:none; outline:none; background:transparent; color:var(--ink); font-size:14px; }
.search-box input::placeholder { color:var(--ink-3); }
.search-kbd { flex-shrink:0; display:inline-flex; align-items:center; height:22px; padding:0 7px; border:1px solid var(--line-2); border-radius:6px; background:var(--panel); color:var(--ink-3); font-size:11px; font-weight:700; font-family:inherit; line-height:1; }
.search-clear { border:none; background:var(--panel-3); cursor:pointer; font-size:12px; color:var(--ink-2); width:22px; height:22px; border-radius:6px; display:none; place-items:center; flex-shrink:0; }
.search-clear:hover { color:var(--ink); }

.tabs { max-width:var(--container-w); margin:16px auto 0; padding:5px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; background:color-mix(in srgb,var(--panel) 58%,transparent); backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-card); cursor:grab; scroll-behavior:smooth; touch-action:pan-x; }
.tabs::-webkit-scrollbar { display:none; }
.tabs.dragging { cursor:grabbing; scroll-behavior:auto; user-select:none; -webkit-user-select:none; }
.tabs.dragging .tab { pointer-events:none; }
.tab { position:relative; flex-shrink:0; padding:8px 16px; border:none; cursor:pointer; background:transparent; border-radius:999px; color:var(--ink-2); font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:7px; white-space:nowrap; transition:all .18s; }
.tab:hover { color:var(--ink); background:var(--panel-3); }
.tab.active { background:var(--grad); color:#fff; box-shadow:0 6px 16px -8px rgba(251,114,153,.6); }
.tab .tab-dot { width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.9; }

.toolbar { max-width:var(--container-w); margin:14px auto 0; padding:0 20px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.stats { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-right:auto; font-size:12px; color:var(--ink-3); }
.stat-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink-2); }
.stat-chip .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(0,161,214,.16); }
.stat-chip:not(:first-child)::before { content:'·'; color:var(--ink-3); margin-right:6px; }

.pill-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 15px; border-radius:999px; cursor:pointer; border:1px solid var(--line-2); background:color-mix(in srgb,var(--panel) 58%,transparent); backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5); color:var(--ink-2); font-size:13px; font-weight:700; box-shadow:var(--shadow-card); transition:all .18s; white-space:nowrap; text-decoration:none; }
.pill-btn:hover { color:#fff; border-color:transparent; background:var(--grad); transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(251,114,153,.6); }
.pill-btn:hover .spinner, .pill-btn:hover .label { color:#fff; }
.pill-btn.active { background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 6px 16px -8px rgba(251,114,153,.6); }
.pill-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.pill-btn:focus-visible { outline:none; box-shadow:var(--ring); }
.pill-btn .spinner { display:none; }
.pill-btn.loading .spinner { display:inline-block; }
.pill-btn.loading .label { opacity:.7; }

.container { max-width:var(--container-w); margin:20px auto 64px; padding:0 20px; }
.list.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; }

.hot-card {
  position:relative; display:flex; gap:14px; padding:16px 16px 16px 18px; border-radius:18px;
  background:
    linear-gradient(135deg, color-mix(in srgb,#fff 9%,transparent), transparent 40%),
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb,var(--pc,#fb7299) 10%,transparent), transparent 55%),
    color-mix(in srgb, var(--panel) 64%, transparent);
  border:1px solid var(--line);
  box-shadow: inset 0 1px 0 color-mix(in srgb,#fff 16%,transparent), inset 0 -1px 0 color-mix(in srgb,#000 4%,transparent), var(--shadow-card);
  overflow:hidden; animation:cardIn .4s cubic-bezier(.2,.7,.3,1) both;
  transition:transform .18s,box-shadow .24s,border-color .2s;
}
.hot-card::before { content:''; position:absolute; left:0; top:14px; bottom:14px; width:3.5px; border-radius:4px; background:var(--pc,#fb7299); box-shadow:0 0 12px -2px color-mix(in srgb,var(--pc,#fb7299) 75%,transparent); opacity:.9; }
.card-accent { position:absolute; top:-40px; right:-40px; width:160px; height:160px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, color-mix(in srgb,var(--pc,#fb7299) 18%,transparent), transparent 70%); opacity:.5; transition:opacity .3s, transform .3s; }
.hot-card::after { content:''; position:absolute; top:0; left:-70%; width:45%; height:100%; transform:skewX(-20deg); pointer-events:none; background:linear-gradient(105deg, transparent, color-mix(in srgb,#fff 14%,transparent), transparent); opacity:0; transition:left .55s, opacity .25s; }
.hot-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--pc,#fb7299) 45%,var(--line)); box-shadow: inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent), 0 8px 22px -8px color-mix(in srgb,var(--pc,#fb7299) 40%,transparent), var(--shadow-lift); }
.hot-card:hover::before { opacity:1; box-shadow:0 0 16px -2px color-mix(in srgb,var(--pc,#fb7299) 90%,transparent); }
.hot-card:hover .card-accent { opacity:1; transform:scale(1.25); }
.hot-card:hover::after { left:120%; opacity:1; transition:left .6s, opacity .3s; }
.hot-card:focus-within { box-shadow:var(--ring); }
@keyframes cardIn { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }

.rank-badge { flex-shrink:0; width:30px; display:grid; place-items:start center; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height:1.5; color:var(--brand-a); }
.rank-badge.top3 { font-size:21px; font-weight:800; background:linear-gradient(180deg,#ff9bb8,var(--brand-a)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--brand-a) 30%,transparent)); }
.rank-badge:not(.top3) { color:var(--ink-3); }

.card-body { flex:1; min-width:0; margin:auto 0; }
.card-title-row { display:flex; align-items:flex-start; gap:8px; }
.platform-tag { flex-shrink:0; font-size:11px; font-weight:700; letter-spacing:.01em; padding:2px 9px; border-radius:999px; margin-top:4px; background:color-mix(in srgb,var(--pc,#fb7299) 10%,transparent); border:1px solid color-mix(in srgb,var(--pc,#fb7299) 24%,transparent); color:var(--pc,#fb7299); display:inline-flex; align-items:center; gap:4px; }
.p-icon { display:inline-block; flex-shrink:0; }
.card-title { position:relative; display:block; font-size:15.5px; font-weight:600; line-height:1.45; letter-spacing:.002em; color:var(--ink); overflow-wrap:break-word; word-break:break-word; text-decoration:none; transition:color .15s; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-title::after { content:''; position:absolute; left:0; bottom:1px; height:1.5px; width:100%; background:var(--grad); transform:scaleX(0); transform-origin:left; opacity:0; transition:transform .3s ease, opacity .3s ease; }
.card-title:hover,.card-title:focus-visible { color:var(--brand-a); }
.card-title:hover::after,.card-title:focus-visible::after { transform:scaleX(1); opacity:1; }
.card-meta { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.hot-score { font-size:12px; font-weight:700; color:var(--pc,var(--brand-a)); background:linear-gradient(180deg, color-mix(in srgb,var(--pc,var(--brand-a)) 15%,transparent), color-mix(in srgb,var(--pc,var(--brand-a)) 7%,transparent)); border:1px solid color-mix(in srgb,var(--pc,var(--brand-a)) 20%,transparent); padding:2px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:4px; }
.card-actions { display:inline-flex; gap:6px; margin-left:auto; flex-shrink:0; }
.icon-btn-sm { display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 10px; border-radius:999px; border:1px solid var(--line); cursor:pointer; background:var(--panel-2); color:var(--ink-2); font-size:12px; font-weight:600; transition:all .15s; }
.icon-btn-sm:hover { color:#fff; border-color:transparent; background:var(--grad); }
.icon-btn-sm:focus-visible { outline:none; box-shadow:var(--ring); }
.icon-btn-sm.booked { color:var(--brand-a); border-color:color-mix(in srgb,var(--brand-a) 45%,transparent); background:color-mix(in srgb,var(--brand-a) 12%,transparent); }

.skeleton-card { display:flex; gap:13px; padding:18px; border-radius:18px; background:color-mix(in srgb,var(--panel) 62%,transparent); border:1px solid var(--line); }
.skeleton-card .sk-rank { width:30px; height:16px; flex-shrink:0; background:var(--panel-3); border-radius:5px; animation:pulse 1.3s infinite; }
.skeleton-card .sk-line { height:13px; border-radius:5px; background:var(--panel-3); animation:pulse 1.3s infinite; }
.skeleton-card .sk-line.w60 { width:60%; }
.skeleton-card .sk-line.w90 { width:90%; }
.skeleton-card .sk-line.w40 { width:40%; margin-top:9px; }
.sk-body { flex:1; min-width:0; }
.sk-line.sk-gap { margin-top:8px; }
@keyframes pulse { 0%,100%{opacity:.5;} 50%{opacity:1;} }

.state-box { text-align:center; padding:80px 20px; color:var(--ink-2); }
.state-box .state-icon { font-size:40px; margin-bottom:16px; display:inline-block; }
.state-box h3 { font-size:18px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.state-box p { font-size:13px; line-height:1.7; color:var(--ink-3); }
.state-box .retry-btn { margin-top:18px; }

.footer { max-width:var(--container-w); margin:0 auto; text-align:center; padding:26px 20px 44px; border-top:1px solid var(--line); color:var(--ink-3); font-size:14px; line-height:1.9; }

.more-mask { position:fixed; inset:0; z-index:140; display:none; background:transparent; }
.more-mask.show { display:block; }
.more-menu { position:fixed; top:64px; right:16px; z-index:150; width:208px; padding:8px; background:color-mix(in srgb,var(--panel) 72%,transparent); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-modal); display:none; flex-direction:column; gap:2px; animation:modalIn .2s cubic-bezier(.2,.7,.3,1); }
.more-menu.show { display:flex; }
.more-menu .pill-btn { width:100%; justify-content:flex-start; padding:10px 12px; border:none; background:transparent; box-shadow:none; border-radius:10px; font-size:13.5px; }
.more-menu .pill-btn:hover { background:color-mix(in srgb,var(--brand-a) 10%,transparent); color:var(--brand-a); box-shadow:none; transform:none; }
.more-menu .more-sep { height:1px; background:var(--line); margin:4px 6px; }

#backTop { position:fixed; right:20px; bottom:22px; width:48px; height:48px; border-radius:16px; border:none; cursor:pointer; background:var(--grad); color:#fff; font-size:19px; box-shadow:0 10px 24px -10px rgba(251,114,153,.6); opacity:0; pointer-events:none; transform:translateY(12px); transition:all .22s; z-index:90; }
#backTop.show { opacity:1; pointer-events:auto; transform:none; }
#backTop:hover { filter:brightness(1.08); }

.modal-mask { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; background:color-mix(in srgb,var(--ink) 52%,transparent); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.modal-mask.show { display:flex; }
.modal { width:100%; max-width:448px; max-height:84vh; overflow-y:auto; border-radius:22px; padding:26px; background:color-mix(in srgb,var(--panel) 78%,transparent); backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5); border:1px solid var(--line); box-shadow:var(--shadow-modal); animation:modalIn .24s cubic-bezier(.2,.7,.3,1); }
@keyframes modalIn { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modal-head h3 { font-size:17px; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.modal-close { border:none; background:none; font-size:19px; cursor:pointer; color:var(--ink-3); width:32px; height:32px; border-radius:9px; }
.modal-close:hover { color:var(--ink); background:var(--panel-2); }
.modal-body { font-size:14px; color:var(--ink-2); line-height:1.8; }
.export-note { margin-bottom:16px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.field input { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line-2); outline:none; background:var(--panel-2); color:var(--ink); font-size:14px; transition:border-color .15s, box-shadow .15s; }
.field input:focus { border-color:var(--brand-a); box-shadow:var(--ring); }
.field input::placeholder { color:var(--ink-3); }
.btn-primary { width:100%; padding:13px; border:none; border-radius:999px; cursor:pointer; font-size:14px; font-weight:800; color:#fff; background:var(--grad); box-shadow:0 8px 20px -10px rgba(251,114,153,.6); transition:all .18s; }
.btn-primary:hover { transform:translateY(-1px); filter:brightness(1.05); }
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; filter:none; }
.btn-primary.danger { background:linear-gradient(120deg,#ff6b6b,#fa5a5a); }
.btn-secondary { width:100%; padding:13px; margin-top:10px; border-radius:999px; cursor:pointer; font-size:14px; font-weight:700; color:var(--ink-2); background:var(--panel-2); border:1px solid var(--line); transition:all .18s; }
.btn-secondary:hover { color:var(--brand-a); border-color:var(--brand-a); }
.modal-note { margin-top:14px; font-size:12.5px; color:var(--ink-3); }
.export-hint { margin-bottom:16px; }

.sub-hero { padding:18px 18px; border-radius:16px; text-align:center; background:var(--grad-soft,linear-gradient(135deg,rgba(251,114,153,.14),rgba(0,174,236,.14))); border:1px solid var(--line); }
.sub-hero-icon { font-size:30px; line-height:1; margin-bottom:8px; }
.sub-hero-title { font-size:15px; font-weight:800; color:var(--ink); margin-bottom:5px; }
.sub-hero-desc { font-size:12.5px; line-height:1.7; color:var(--ink-2); }
.sub-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.sub-tabs { display:flex; gap:4px; margin-top:14px; padding:4px; background:var(--panel-2); border:1px solid var(--line); border-radius:999px; }
.sub-tab { flex:1; border:none; background:transparent; padding:8px 0; border-radius:999px; font-size:13px; font-weight:700; color:var(--ink-2); cursor:pointer; transition:background .18s,color .18s; }
.sub-tab.active { background:linear-gradient(120deg,var(--brand-a),#ff9bb2); color:#fff; }
.sub-tag { font-size:12px; font-weight:700; color:var(--brand-a); background:color-mix(in srgb,var(--brand-a) 10%,transparent); border:1px solid color-mix(in srgb,var(--brand-a) 22%,transparent); padding:4px 10px; border-radius:999px; }
.sub-input-wrap { position:relative; display:flex; align-items:center; }
.sub-input-wrap .sub-input-icon { position:absolute; left:12px; font-size:14px; color:var(--brand-a); font-weight:800; pointer-events:none; }
.sub-input-wrap input { padding-left:34px; }
.sub-actions { display:flex; gap:10px; margin-top:16px; }
.sub-actions .btn-prime, .sub-actions .btn-ghost { flex:1; }
.btn-prime { padding:13px; border:none; border-radius:999px; cursor:pointer; font-size:14px; font-weight:800; color:#fff; background:var(--grad); box-shadow:0 8px 20px -10px rgba(251,114,153,.6); transition:all .18s; }
.btn-prime:hover { transform:translateY(-1px); filter:brightness(1.05); }
.btn-prime:active { transform:translateY(0); }
.btn-prime:disabled { opacity:.5; cursor:not-allowed; transform:none; filter:none; }
.btn-ghost { padding:13px; border-radius:999px; cursor:pointer; font-size:14px; font-weight:700; color:var(--danger); background:transparent; border:1px solid var(--line-2); transition:all .18s; }
.btn-ghost:hover { border-color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,transparent); }
.kbd-grid { display:grid; grid-template-columns:auto 1fr; gap:10px 16px; font-size:13px; }
.kbd-grid kbd { border:1px solid var(--line-2); border-bottom-width:2px; color:var(--brand-a); padding:3px 9px; border-radius:7px; font-size:12px; font-weight:800; font-family:inherit; justify-self:start; background:var(--panel-2); }
.bookmark-item { display:flex; align-items:center; gap:10px; padding:12px 13px; border-radius:12px; margin-bottom:8px; background:var(--panel-2); border:1px solid var(--line); }
.bookmark-item.sel { border-color:var(--brand-a); background:color-mix(in srgb,var(--brand-a) 7%,var(--panel-2)); }
.bookmark-item .bm-chk { width:16px; height:16px; flex:none; accent-color:var(--brand-a); cursor:pointer; }
.bookmark-item .bm-title { flex:1; font-size:14px; font-weight:600; color:var(--ink); word-break:break-all; cursor:pointer; }
.bookmark-item .bm-title:hover { color:var(--brand-a); }
.bookmark-item .bm-rm { border:none; background:none; cursor:pointer; color:var(--ink-3); padding:4px; border-radius:8px; line-height:0; }
.bookmark-item .bm-rm svg { display:block; }
.bookmark-item .bm-rm:hover { color:var(--brand-a); background:var(--panel); }
.bm-hot { color:var(--accent); font-size:12px; }
.bm-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.bm-check-all { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; user-select:none; }
.bm-check-all input { width:15px; height:15px; accent-color:var(--brand-a); cursor:pointer; }
.bm-count { flex:1; font-size:12px; color:var(--ink-3); }
.bm-del-selected { border:none; border-radius:999px; cursor:pointer; font-size:12.5px; font-weight:700; color:#fff; background:var(--danger); padding:7px 15px; transition:filter .18s,opacity .18s; }
.bm-del-selected:hover { filter:brightness(1.1); }
.bm-del-selected:disabled { opacity:.4; cursor:not-allowed; filter:none; }
.empty-tip { text-align:center; color:var(--ink-3); padding:22px 0; font-size:13px; }

body.modal-open { overflow:hidden; }

#toast { position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(20px); z-index:300; background:var(--toast-bg); color:var(--toast-fg); padding:11px 20px; border-radius:999px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-modal); opacity:0; pointer-events:none; transition:all .3s; max-width:90vw; text-align:center; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.error { background:var(--danger); color:#fff; }

@media (max-width:640px) {
  .header-inner { padding:11px 14px; padding-top:calc(11px + env(safe-area-inset-top)); gap:8px; flex-wrap:wrap; row-gap:10px; }
  .brand h1 { font-size:17px; }
  .brand-sub { display:none; }
  .brand-logo { width:37px; height:37px; font-size:19px; border-radius:12px; }
  .header-actions { gap:0; }
  .icon-btn { width:38px; height:38px; font-size:17px; }
  .header-search { order:3; flex:1 1 100%; max-width:none; padding:0; }
  .search-box { height:38px; padding:0 6px 0 12px; }
  .search-box input { font-size:14px; }
  .tabs { margin-top:14px; padding:4px; }
  .tab { padding:7px 13px; font-size:13px; }
  .toolbar { margin-top:12px; padding:0 16px; flex-wrap:wrap; row-gap:8px; }
  .stats { margin-right:0; flex:1 1 100%; flex-wrap:wrap; row-gap:6px; font-size:11px; gap:4px; }
  .stat-chip { font-size:11px; gap:4px; line-height:1.5; }
  .stat-chip .dot { width:6px; height:6px; }
  .stat-chip:not(:first-child)::before { margin-right:4px; }
  .pill-btn { flex-shrink:0; padding:8px 13px; font-size:12px; }
  .container { padding:0 16px; margin-top:16px; }
  .list.grid { grid-template-columns:1fr; gap:12px; }
  .hot-card { padding:12px 12px 12px 14px; gap:10px; border-radius:16px; }
  .rank-badge { font-size:15px; width:24px; }
  .rank-badge.top3 { font-size:18px; }
  .card-title { font-size:15px; }
  .icon-btn-sm { height:24px; padding:0 8px; font-size:12px; }
  .modal { padding:22px 18px; border-radius:18px; }
  #backTop { right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); border-radius:14px; }
  .footer { padding:24px 16px calc(26px + env(safe-area-inset-bottom)); }
  #toast { bottom:calc(24px + env(safe-area-inset-bottom)); }
}
@media (max-width:380px) {
  .brand h1 { font-size:15.5px; }
  .brand-logo { width:34px; height:34px; font-size:17px; }
  .icon-btn { width:35px; height:35px; font-size:16px; }
  .tab { padding:7px 11px; font-size:12.5px; }
  .stats, .stat-chip { font-size:10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html { scroll-behavior:auto; }
}