/* SubHub — 液态玻璃风格 */
:root {
  --ink: #16203a;
  --ink-2: #54607c;
  --ink-3: #8b95ad;
  --accent: #3f7dff;
  --accent-2: #8b6cff;
  --ok: #17a673;
  --warn: #d98613;
  --danger: #e5484d;
  --glass: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.28));
  --glass-strong: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  --edge: rgba(255,255,255,.75);
  --edge-soft: rgba(255,255,255,.38);
  --field: rgba(255,255,255,.5);
  --shadow: 0 10px 40px rgba(40,60,130,.14), 0 2px 8px rgba(40,60,130,.06);
  --page: #e6edfb;
  --r-xl: 30px; --r-lg: 22px; --r-md: 16px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ink: #eef2ff; --ink-2: #b3bdd6; --ink-3: #7f8aa8;
  --accent: #6c9bff; --accent-2: #a58bff;
  --ok: #3ddc9c; --warn: #ffb347; --danger: #ff6b70;
  --glass: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  --glass-strong: linear-gradient(135deg, rgba(38,46,78,.92), rgba(24,30,54,.88));
  --edge: rgba(255,255,255,.22); --edge-soft: rgba(255,255,255,.08);
  --field: rgba(255,255,255,.07);
  --shadow: 0 12px 44px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
  --page: #0c1022;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* 流动的彩色光斑背景 */
.bg { position: fixed; inset: 0; overflow: hidden; z-index: -1; background: var(--page); }
.bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; animation: drift 26s ease-in-out infinite alternate; }
.bg i:nth-child(1) { width: 52vmax; height: 52vmax; left: -14vmax; top: -18vmax; background: #8ec5ff; }
.bg i:nth-child(2) { width: 44vmax; height: 44vmax; right: -12vmax; top: 4vmax; background: #c9b3ff; animation-duration: 32s; animation-delay: -8s; }
.bg i:nth-child(3) { width: 46vmax; height: 46vmax; left: 14vmax; bottom: -22vmax; background: #9ff0dc; animation-duration: 36s; animation-delay: -14s; }
.bg i:nth-child(4) { width: 30vmax; height: 30vmax; right: 8vmax; bottom: -6vmax; background: #ffc9de; animation-duration: 30s; animation-delay: -4s; }
[data-theme="dark"] .bg i { opacity: .34; }
[data-theme="dark"] .bg i:nth-child(1) { background: #2d6cff; }
[data-theme="dark"] .bg i:nth-child(2) { background: #7a4dff; }
[data-theme="dark"] .bg i:nth-child(3) { background: #12b89a; }
[data-theme="dark"] .bg i:nth-child(4) { background: #d94f8a; }
@keyframes drift { to { transform: translate3d(6vmax, 5vmax, 0) scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .bg i { animation: none; } * { transition: none !important; } }

/* 玻璃材质 */
.glass {
  position: relative; background: var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(185%); backdrop-filter: blur(26px) saturate(185%);
  border: 1px solid var(--edge-soft); border-radius: var(--r-xl);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge), inset 0 -1px 0 var(--edge-soft), inset 1px 0 0 var(--edge-soft);
}
.glass::before { /* 顶部高光,模拟液态折射 */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 12% 0%, rgba(255,255,255,.42), transparent 60%);
  opacity: .6;
}
[data-theme="dark"] .glass::before { opacity: .16; }
.glass > * { position: relative; }

/* 布局 */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; max-width: 1240px; margin: 0 auto; padding: 22px; min-height: 100vh; }
.side { position: sticky; top: 22px; height: calc(100vh - 44px); padding: 22px 14px; display: flex; flex-direction: column; gap: 6px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 10px 18px; }
.logo { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #62a8ff, #8b6cff); box-shadow: 0 6px 18px rgba(80,110,255,.4), inset 0 1px 0 rgba(255,255,255,.6); flex: none; }
.logo svg { width: 22px; height: 22px; }
.brand b { font-size: 19px; letter-spacing: .2px; }
.brand small { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: -2px; }
.nav { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 18px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--ink-2); font-weight: 550; text-align: left; transition: .2s; }
.nav svg { width: 20px; height: 20px; flex: none; }
.nav:hover { background: var(--field); color: var(--ink); }
.nav.on { color: var(--ink); background: var(--glass-strong); border-color: var(--edge-soft); box-shadow: 0 6px 18px rgba(40,60,130,.12), inset 0 1px 0 var(--edge); }
.nav.on svg { color: var(--accent); }
.side .grow { flex: 1; }
.side .ver { color: var(--ink-3); font-size: 12px; padding: 0 14px; }
.main { padding: 8px 0 60px; min-width: 0; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 6px 4px 20px; flex-wrap: wrap; }
.head h1 { font-size: 27px; letter-spacing: -.3px; }
.head p { color: var(--ink-2); margin-top: 3px; }
.tabbar { display: none; }

/* 卡片与网格 */
.grid { display: grid; gap: 16px; }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.stat { padding: 18px 20px; border-radius: var(--r-lg); }
.stat .n { font-size: 30px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat .l { color: var(--ink-2); font-size: 13px; }
.cards { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.card { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.card h3 { font-size: 17px; overflow-wrap: anywhere; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.between { justify-content: space-between; flex-wrap: nowrap; }
.muted { color: var(--ink-2); font-size: 13px; }
.tiny { color: var(--ink-3); font-size: 12px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--field); border: 1px solid var(--edge-soft); color: var(--ink-2); white-space: nowrap; }
.pill.ok { color: var(--ok); } .pill.warn { color: var(--warn); } .pill.bad { color: var(--danger); } .pill.acc { color: var(--accent); }
.bar { height: 7px; border-radius: 99px; background: var(--field); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.empty { padding: 46px 24px; text-align: center; color: var(--ink-2); }
.empty b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.err { color: var(--danger); font-size: 13px; overflow-wrap: anywhere; }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 17px;
  border-radius: 99px; border: 1px solid var(--edge-soft); background: var(--glass-strong); cursor: pointer; font-weight: 600; font-size: 14px;
  box-shadow: 0 3px 10px rgba(40,60,130,.09), inset 0 1px 0 var(--edge); transition: transform .15s, box-shadow .2s, filter .2s; white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(40,60,130,.16), inset 0 1px 0 var(--edge); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, #4f8dff, #8068ff); box-shadow: 0 8px 22px rgba(80,110,255,.36), inset 0 1px 0 rgba(255,255,255,.45); }
.btn.danger { color: var(--danger); }
.btn.sm { min-height: 34px; padding: 0 13px; font-size: 13px; }
.btn.icon { width: 36px; min-height: 36px; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 表单 */
label.f { display: block; }
label.f > span, .lbl { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 4px 6px; }
.in, select.in, textarea.in {
  width: 100%; min-height: 44px; padding: 10px 15px; border-radius: var(--r-md); border: 1px solid var(--edge-soft); background: var(--field);
  box-shadow: inset 0 1px 3px rgba(20,30,70,.08), 0 1px 0 var(--edge-soft); outline: none; transition: border-color .2s, box-shadow .2s;
}
textarea.in { min-height: 120px; resize: vertical; font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.in:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.in::placeholder { color: var(--ink-3); }
select.in { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238b95ad' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
select.in option { color: #16203a; background: #fff; }
.form { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.form > *, .cols > * { min-width: 0; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--field); border: 1px solid var(--edge-soft); gap: 2px; }
.seg button { border: 0; background: none; padding: 7px 16px; border-radius: 99px; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.seg button.on { background: var(--glass-strong); color: var(--ink); box-shadow: 0 3px 10px rgba(40,60,130,.14), inset 0 1px 0 var(--edge); }
.oprow { display: grid; grid-template-columns: 132px 1fr 1fr 36px; gap: 8px; align-items: center; }
.sw { position: relative; width: 50px; height: 30px; flex: none; border-radius: 99px; border: 1px solid var(--edge-soft); background: var(--field); cursor: pointer; padding: 0; box-shadow: inset 0 1px 3px rgba(20,30,70,.16); transition: background .25s; }
.sw i { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(20,30,70,.3), inset 0 1px 0 #fff; transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.sw.on { background: linear-gradient(135deg, #4f8dff, #8068ff); border-color: transparent; }
.sw.on i { transform: translateX(20px); }
.swrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: var(--r-md); background: var(--field); border: 1px solid var(--edge-soft); }
.strow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); background: var(--field); border: 1px solid var(--edge-soft); }
.rule { padding: 13px; border-radius: var(--r-md); background: var(--field); border: 1px solid var(--edge-soft); display: grid; gap: 9px; }
.rule.review { border-color: var(--warn); }
.checks { display: grid; gap: 8px; }
.check { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); background: var(--field); border: 1px solid var(--edge-soft); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.drop { border: 1.5px dashed var(--ink-3); border-radius: var(--r-lg); padding: 22px; text-align: center; cursor: pointer; color: var(--ink-2); transition: .2s; }
.drop:hover, .drop.over { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
pre.out { margin: 0; padding: 14px; border-radius: var(--r-md); background: var(--field); border: 1px solid var(--edge-soft); font: 12px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; max-height: 46vh; overflow: auto; white-space: pre; }
details summary { cursor: pointer; font-weight: 600; color: var(--ink-2); font-size: 13.5px; padding: 4px; }

/* 弹层 */
.mask { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(20,28,60,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .2s; }
.sheet { width: min(660px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; background: var(--glass-strong); animation: pop .28s cubic-bezier(.2,.9,.3,1.15); }
.sheet > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 8px; }
.sheet > header h2 { font-size: 20px; }
.sheet > .body { padding: 10px 22px 6px; overflow: auto; min-width: 0; }
.sheet > footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }

#toast { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; pointer-events: none; width: max-content; max-width: 92vw; }
.toast { padding: 11px 20px; border-radius: 99px; background: var(--glass-strong); border: 1px solid var(--edge-soft); box-shadow: var(--shadow), inset 0 1px 0 var(--edge); font-weight: 600; font-size: 14px; animation: pop .25s; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); text-align: center; }
.toast.bad { color: var(--danger); }

/* 登录 */
.login { min-height: 100vh; display: grid; place-items: center; padding: 22px; }
.login .box { width: min(400px, 100%); padding: 34px 28px 28px; text-align: center; }
.login .logo { width: 62px; height: 62px; border-radius: 21px; margin: 0 auto 16px; }
.login .logo svg { width: 34px; height: 34px; }
.login h1 { font-size: 26px; }
.login p { color: var(--ink-2); margin: 4px 0 22px; }

/* 手机 */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; padding: 14px 14px 110px; gap: 10px; }
  .side { display: none; }
  .mtop { display: flex !important; }
  .tabbar { display: flex; position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; padding: 6px; gap: 2px; border-radius: 99px; background: var(--glass-strong); }
  .tabbar .nav { flex-direction: column; gap: 1px; padding: 7px 13px; font-size: 11px; border-radius: 99px; min-width: 58px; align-items: center; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: 1fr; }
  .head h1 { font-size: 24px; }
  .cols { grid-template-columns: 1fr; }
  .oprow { grid-template-columns: 1fr 36px; }
  .oprow select { grid-column: 1; } .oprow .del { grid-column: 2; grid-row: 1; }
  .oprow input { grid-column: 1 / -1; }
  .strow { grid-template-columns: minmax(0, 1fr) 36px; }
  .strow select { grid-column: 1 / -1; grid-row: 2; }
  .mask { padding: 0; place-items: end center; grid-template-columns: minmax(0, 1fr); }
  .btn.sm { padding: 0 11px; }
  .card { padding: 18px; }
  .sheet { border-radius: 30px 30px 0 0; max-height: 92vh; padding-bottom: env(safe-area-inset-bottom); }
  #toast { bottom: 104px; }
}
.mtop { display: none; align-items: center; justify-content: space-between; padding: 4px 4px 0; }
.mtop .brand { padding: 0; }