/* ============ Member Radar — theme tokens ============ */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0a0e17; --page2: #0e1320;
  --surface: #141a28; --surface2: #1a2133; --surface3: #222b40;
  --border: rgba(255,255,255,.08); --border2: rgba(255,255,255,.14);
  --ink: #f4f6fb; --ink2: #c3c9d6; --muted: #8a93a6; --faint: #5d667a;
  --grid: #232b3d; --axis: #384158;
  --accent: #7c6cff; --accent2: #3f8cff; --accent-ink: #fff;
  --accent-soft: rgba(124,108,255,.14); --accent-glow: rgba(124,108,255,.35);
  --good: #22c55e; --good-soft: rgba(34,197,94,.14);
  --warn: #fab219; --warn-soft: rgba(250,178,25,.13);
  --serious: #ec835a; --bad: #f05252; --bad-soft: rgba(240,82,82,.14);
  /* categorical (validated for dark surface) */
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.35);
  --side: #0b1020; --side-ink: #aeb6c8; --side-hover: rgba(255,255,255,.05);
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f3f5fa; --page2: #eef1f7;
  --surface: #ffffff; --surface2: #f7f8fc; --surface3: #eef1f7;
  --border: rgba(15,23,42,.08); --border2: rgba(15,23,42,.16);
  --ink: #0f172a; --ink2: #3b4458; --muted: #6b7489; --faint: #9aa3b5;
  --grid: #e6e9f0; --axis: #c9cfdb;
  --accent: #5b4bff; --accent2: #2a78d6; --accent-soft: rgba(91,75,255,.10); --accent-glow: rgba(91,75,255,.25);
  --good: #16a34a; --good-soft: rgba(22,163,74,.10); --warn: #b7791f; --warn-soft: rgba(250,178,25,.16);
  --serious: #d9622f; --bad: #d03b3b; --bad-soft: rgba(208,59,59,.10);
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
  --side: #0f1528; --side-ink: #aeb6c8; --side-hover: rgba(255,255,255,.06);
}

* { box-sizing: border-box }
html { font-size: 14px }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
  background: var(--page); color: var(--ink); -webkit-font-smoothing: antialiased }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(900px 500px at 85% -10%, var(--accent-soft), transparent 60%),
              radial-gradient(700px 400px at 10% 110%, rgba(63,140,255,.07), transparent 60%) }
a { color: var(--accent2); text-decoration: none }
a:hover { text-decoration: underline }
code { background: var(--surface3); padding: 1px 6px; border-radius: 5px; font-size: 12px; color: var(--ink2) }
.ico { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px }
.ico.sm { width: 14px; height: 14px; vertical-align: -2px }
.ico.lg { width: 22px; height: 22px }

/* ============ layout ============ */
.shell { display: flex; min-height: 100vh; position: relative; z-index: 1 }
.side { width: 236px; background: var(--side); color: var(--side-ink); flex-shrink: 0; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid rgba(255,255,255,.06) }
.brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px 14px; color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .2px }
.logo { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 6px 18px var(--accent-glow) }
.logo .ico { stroke: #fff; width: 18px; height: 18px }
.brand small { display: block; font-size: 11px; font-weight: 500; color: #7d879c; letter-spacing: 0 }
.side nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; flex: 1 }
.navh { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: #5f6980; padding: 16px 10px 6px; font-weight: 700 }
.side nav a { display: flex; align-items: center; gap: 10px; color: var(--side-ink); padding: 8px 10px; border-radius: 9px; font-size: 13.5px;
  transition: background .15s, color .15s; position: relative }
.side nav a:hover { background: var(--side-hover); color: #fff; text-decoration: none }
.side nav a.on { background: linear-gradient(90deg, rgba(124,108,255,.22), rgba(124,108,255,.06)); color: #fff }
.side nav a.on::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--accent) }
.side nav a .cnt { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; background: rgba(255,255,255,.07); color: #cfd5e3 }
.side nav a.on .cnt { background: var(--accent); color: #fff }
.dotc { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0 }
.me { padding: 14px 14px 16px; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 10px; font-size: 12.5px }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #f59e0b, #ef4444); flex-shrink: 0 }
.me .who { flex: 1; min-width: 0; color: #e5e9f2; line-height: 1.35 }
.me .who span { color: #7d879c; font-size: 11.5px }
.iconbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink2); cursor: pointer; transition: .15s }
.iconbtn:hover { color: var(--ink); border-color: var(--border2); transform: translateY(-1px) }
.side .iconbtn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); color: #aeb6c8 }

main { flex: 1; min-width: 0; padding: 0 28px 48px }
.top { display: flex; align-items: center; gap: 14px; padding: 20px 0 16px; position: sticky; top: 0; z-index: 20;
  background: linear-gradient(var(--page) 70%, transparent) }
.top .ttl { flex: 1; min-width: 0 }
.top h1 { font-size: 21px; margin: 0; font-weight: 800; letter-spacing: .2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.top .desc { color: var(--muted); font-size: 12.5px; margin-top: 3px }
.chip-date { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: 20px }
.menu { display: none }
.datenav { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px }
.datenav select { border: 0; background: transparent; font-weight: 700; padding: 5px 4px; cursor: pointer }
.datenav a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--ink2) }
.datenav a:hover { background: var(--surface3); text-decoration: none }
.datenav a.dis { opacity: .3; pointer-events: none }

/* ============ controls ============ */
select, input, textarea { font: inherit; border: 1px solid var(--border2); border-radius: 10px; padding: 8px 11px; background: var(--surface2); color: var(--ink); transition: .15s }
select:hover, input:hover, textarea:hover { border-color: var(--accent) }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
textarea { width: 100%; resize: vertical }
.btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border2); background: var(--surface2); border-radius: 10px;
  padding: 8px 14px; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink); white-space: nowrap; transition: .15s }
.btn:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px) }
.btn:active { transform: translateY(0) }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; color: #fff; box-shadow: 0 6px 18px var(--accent-glow) }
.btn.primary:hover { box-shadow: 0 8px 24px var(--accent-glow) }
.btn.ghost { background: transparent }
.btn.wide { width: 100%; justify-content: center; padding: 11px }
.btn.tiny { padding: 4px 9px; font-size: 12px; border-radius: 8px }
.btn[disabled] { opacity: .5; pointer-events: none }

/* ============ cards ============ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow); overflow-x: auto }
.card h2 { font-size: 15px; margin: 0 0 4px; font-weight: 800; display: flex; align-items: center; gap: 8px }
.card .sub { color: var(--muted); font-size: 12.5px; margin: 0 0 14px }
.card h3 { font-size: 12px; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em }
.card.narrow { max-width: 440px }
.grid2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.grid2 > *, .grid3 > * { min-width: 0 }
.muted { color: var(--muted) } .small { font-size: 12px } .nowrap { white-space: nowrap } .neg { color: var(--bad) } .pos { color: var(--good) }
.hint { color: var(--muted); font-size: 12px; margin: 10px 0 0 }

/* ============ KPI tiles ============ */
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 18px }
.kpi { position: relative; display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px 12px;
  color: var(--ink); overflow: hidden; transition: .2s; box-shadow: var(--shadow) }
.kpi:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; box-shadow: 0 12px 30px var(--accent-glow) }
.kpi .l { color: var(--muted); font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px }
.kpi .v { font-size: 26px; font-weight: 800; margin: 6px 0 2px; letter-spacing: -.3px }
.kpi .v.neg { color: var(--bad) }
.kpi .spark { display: block; width: 100%; height: 30px; margin-top: 8px; opacity: .95 }
.kpi.hero { background: linear-gradient(135deg, rgba(124,108,255,.28), rgba(63,140,255,.12)), var(--surface); border-color: rgba(124,108,255,.35) }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px }
.delta.up { color: var(--good); background: var(--good-soft) } .delta.down { color: var(--bad); background: var(--bad-soft) }
.delta .vs { font-weight: 500; color: var(--muted); margin-left: 3px }

/* ============ task cards ============ */
.tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px }
.task { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px 16px; border-radius: 14px; background: var(--surface2);
  border: 1px solid var(--border); color: var(--ink); transition: .2s; overflow: hidden }
.task::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--accent)) }
.task:hover { transform: translateY(-3px); border-color: var(--c, var(--accent)); text-decoration: none; box-shadow: 0 10px 26px rgba(0,0,0,.25) }
.task .row1 { display: flex; align-items: center; gap: 10px }
.task .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c) }
.task .nm { font-weight: 800; font-size: 13.5px; line-height: 1.25 }
.task .nm small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px }
.task .num { margin-left: auto; text-align: right; font-size: 24px; font-weight: 800; line-height: 1 }
.task .num small { font-size: 11px; color: var(--muted); font-weight: 600 }
.task .why { font-size: 12px; color: var(--ink2); line-height: 1.45 }
.task .foot { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted) }
.task .go { margin-left: auto; color: var(--c); font-weight: 700; font-size: 12px; display: flex; align-items: center; gap: 3px; white-space: nowrap }
.task .pills { display: flex; gap: 6px; flex-wrap: wrap }
.task .pills .pill { margin: 0 }
.ring { width: 38px; height: 38px; flex-shrink: 0 }
.ring circle { fill: none; stroke-width: 4 }
.ring .bg { stroke: var(--surface3) } .ring .fg { stroke: var(--good); stroke-linecap: round; transition: stroke-dasharray .8s ease }
.ring text { font-size: 10px; font-weight: 800; fill: var(--ink); text-anchor: middle; dominant-baseline: central }

/* ============ badges / pills ============ */
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 8px; background: var(--surface3); color: var(--ink2) }
.pill.vip, .tier.t-VIP { background: linear-gradient(135deg, #f7d774, #d49b1d); color: #2a1d00 }
.pill.high, .tier.t-High { background: rgba(63,140,255,.18); color: #7fb2ff }
.tier.t-Mid { background: rgba(25,158,112,.18); color: #3fcf97 }
.tier.t-Low { background: var(--surface3); color: var(--muted) }
:root[data-theme="light"] .pill.high, :root[data-theme="light"] .tier.t-High { color: #1c5cab }
:root[data-theme="light"] .tier.t-Mid { color: #0c7a52 }
.tier { display: inline-block; font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 2px 7px; letter-spacing: .3px }
.pill.ok { background: var(--good-soft); color: var(--good) } .pill.mid { background: var(--warn-soft); color: var(--warn) } .pill.no { background: var(--bad-soft); color: var(--bad) }
.warn { color: var(--warn); font-size: 11px; font-weight: 700; margin-left: 5px; white-space: nowrap; background: var(--warn-soft); padding: 1px 6px; border-radius: 5px }

/* ============ tables ============ */
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
.tbl th { font-size: 11.5px; color: var(--muted); font-weight: 700; text-align: left; padding: 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap; background: var(--surface2); position: sticky; top: 0; z-index: 2; text-transform: none }
.tbl th[title] { cursor: help; text-decoration: underline dotted var(--faint); text-underline-offset: 3px }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle }
.tbl .r { text-align: right }
.tbl tr.tot td { font-weight: 800; border-top: 1px solid var(--border2) }
.tbl .empty { text-align: center; color: var(--muted); padding: 40px }
.tbl tbody tr { transition: background .12s }
.tbl tbody tr:hover td { background: var(--surface2) }
.tblwrap { overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; max-height: calc(100vh - 250px); box-shadow: var(--shadow) }
.tbl.list td { font-size: 13px }
.tbl.list tr td:first-child { box-shadow: inset 3px 0 var(--pc, transparent) }
.tbl.list select.progress { padding: 5px 26px 5px 10px; font-size: 12px; font-weight: 700; border-radius: 20px; border: 0;
  background-color: var(--pbg, var(--surface3)); color: var(--pfg, var(--ink2)); appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%; background-size: 4px 4px; background-repeat: no-repeat; cursor: pointer }
.p-未联系 { --pc: transparent; --pbg: var(--surface3); --pfg: var(--ink2) }
.p-已联系 { --pc: var(--s1); --pbg: rgba(57,135,229,.18); --pfg: #6aa6ef }
.p-已回复 { --pc: var(--s7); --pbg: rgba(144,133,233,.2); --pfg: #b3aaf5 }
.p-完成 { --pc: var(--good); --pbg: var(--good-soft); --pfg: var(--good) }
.p-无回应 { --pc: var(--serious); --pbg: rgba(236,131,90,.16); --pfg: var(--serious) }
:root[data-theme="light"] .p-已联系 { --pfg: #1c5cab } :root[data-theme="light"] .p-已回复 { --pfg: #4a3aa7 }
.tbl.list select.cs { padding: 5px 8px; font-size: 12px; max-width: 110px }
.tbl.list td.remark, .tbl.list th.remark { min-width: 200px; width: 200px }
.tbl.list .stick1, .tbl.list .stick2 { position: sticky; background: var(--surface); z-index: 1 }
.tbl.list th.stick1, .tbl.list th.stick2 { background: var(--surface2); z-index: 3 }
.tbl.list .stick2 { right: 0 }
.tbl.list .stick1 { right: 200px; box-shadow: -8px 0 12px -8px rgba(0,0,0,.45) }
.tbl.list tbody tr:hover td.stick1, .tbl.list tbody tr:hover td.stick2 { background: var(--surface2) }
.tbl.list input.rm { width: 100%; padding: 6px 9px; font-size: 12.5px; background: transparent; border-color: transparent }
.tbl.list input.rm:hover { border-color: var(--border2) }
.tbl.list input.rm:focus { background: var(--surface2); border-color: var(--accent) }
.saved { box-shadow: 0 0 0 2px var(--good) !important }
.uname { font-weight: 700; cursor: pointer; color: var(--ink) }
.uname:hover { color: var(--accent2) }
.nm { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 11.5px }
.wa { display: inline-flex; align-items: center; gap: 5px; color: var(--ink2); font-size: 12.5px; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--border) }
.wa:hover { color: #25d366; border-color: #25d366; text-decoration: none }
.tagic { display: inline-block; font-size: 14px; margin-right: 1px; cursor: help }

/* ============ list page ============ */
.guide { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--border)); border-radius: 16px; padding: 16px 18px; margin-bottom: 16px }
.guide .what { font-size: 13.5px; line-height: 1.6 }
.guide .what b { color: var(--c) }
.guide .pb { display: grid; gap: 8px }
.guide .pb div { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; line-height: 1.5 }
.guide .pb b { display: block; font-size: 12px; color: var(--c); margin-bottom: 1px }
.guide.closed .pb, .guide.closed .why { display: none }
.guide.closed { grid-template-columns: 1fr }
.guide .tog { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; padding: 0; margin-top: 6px }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.chips .lab { font-size: 11.5px; color: var(--muted); font-weight: 700; margin-right: 2px }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border2); color: var(--ink2); background: var(--surface); transition: .15s; cursor: pointer }
.chip:hover { border-color: var(--accent); color: var(--ink); text-decoration: none }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff }
.chip .n { font-size: 11px; opacity: .8 }
.filterbar { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px }
.filterbar .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.search { position: relative; flex: 1; min-width: 220px; max-width: 360px }
.search input { width: 100%; padding-left: 34px }
.search .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted) }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); cursor: pointer }
.chk input { accent-color: var(--accent); width: 15px; height: 15px }
.progbar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--surface3); gap: 2px; min-width: 200px; flex: 1; max-width: 420px }
.progbar div { height: 100%; transition: width .6s ease }
.listhead { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin: 2px 0 12px }
.listhead .stat { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 1 }
.listhead .big { font-size: 22px; font-weight: 800 }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted) }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; vertical-align: -1px }
.bulk { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); padding: 6px 8px 6px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); transition: .2s }
.bulk.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.bulk select { padding: 6px 8px; font-size: 12.5px }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 16px; color: var(--muted) }

/* ============ dashboard charts ============ */
.stack { display: flex; height: 34px; border-radius: 10px; overflow: hidden; gap: 2px; margin: 6px 0 14px; background: var(--surface) }
.stack .seg { height: 100%; position: relative; cursor: pointer; transition: filter .15s, transform .15s; min-width: 3px }
.stack .seg:hover { filter: brightness(1.2) }
.stack .seg span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); white-space: nowrap; overflow: hidden }
.donutwrap { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: center; margin: 10px 0 16px }
.donut { position: relative; width: 240px; height: 240px }
.donut svg { width: 100%; height: 100% }
.donut .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; padding: 0 60px }
.donut .cl { font-size: 12px; color: var(--muted); font-weight: 700 }
.donut .center b { font-size: 26px; font-weight: 800; letter-spacing: -.3px; margin: 2px 0 }
.donut .cs { font-size: 11.5px; color: var(--muted) }
.dlegend { display: flex; flex-direction: column; gap: 4px }
.dl { display: grid; grid-template-columns: 18px 1fr auto 90px; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 10px; color: var(--ink); transition: .15s; border: 1px solid transparent }
.dl:hover, .dl.hl { background: var(--surface2); border-color: var(--border2); text-decoration: none }
.dl .nm2 { font-weight: 700; font-size: 13px }
.dl .nm2 small { display: block; font-weight: 500; font-size: 11.5px; color: var(--muted); margin-top: 1px }
.dl .pv { font-size: 15px } .dl .vv { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums }
@media (max-width: 780px) { .donutwrap { grid-template-columns: 1fr; justify-items: center } .dlegend { width: 100% } }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px }
.c0 { background: var(--s1) } .c1 { background: var(--s2) } .c2 { background: var(--s3) } .c3 { background: var(--s4) } .c4 { background: var(--s5) } .c5 { background: var(--s6) }
.hbar { display: grid; grid-template-columns: 120px 1fr 64px; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 8px; color: var(--ink); cursor: pointer; transition: .15s }
.hbar:hover { background: var(--surface2); text-decoration: none }
.hbar .track { height: 10px; background: var(--surface3); border-radius: 5px; overflow: hidden }
.hbar .fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--s1); width: 0; transition: width 1s cubic-bezier(.2,.8,.2,1) }
.hbar .v { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums }
.hbar .v small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600 }
.tagcard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
.tagbox { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); color: var(--ink); transition: .15s }
.tagbox:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none }
.tagbox .e { font-size: 20px } .tagbox b { font-size: 22px } .tagbox span { font-size: 12px; color: var(--muted) }
.funnel { display: flex; flex-direction: column; gap: 8px }
.fstep { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); color: var(--ink); transition: .15s }
.fstep:hover { border-color: var(--accent); text-decoration: none }
.fstep .bar2 { grid-column: 1/-1; height: 8px; border-radius: 4px; background: var(--surface3); overflow: hidden }
.fstep .bar2 div { height: 100%; width: 0; transition: width 1s ease; border-radius: 4px }
.tabs { display: inline-flex; gap: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 4px }
.tabs button { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 700; font-size: 12.5px; padding: 6px 12px; border-radius: 8px; cursor: pointer }
.tabs button.on { background: var(--accent); color: #fff }
.chartbox { height: 290px; position: relative }
.cardhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px }
.vtip { position: fixed; pointer-events: none; z-index: 100; background: var(--surface3); color: var(--ink); border: 1px solid var(--border2);
  border-radius: 10px; padding: 8px 11px; font-size: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; transition: opacity .1s; line-height: 1.5 }
.vtip b { font-size: 13px }

/* ============ flashes / helpers ============ */
.flash { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 12px; margin-bottom: 14px; background: var(--good-soft); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); font-weight: 600 }
.flash.err { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent) }
.flash.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent) }
.helpbox { display: none; gap: 10px; align-items: flex-start; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--ink2); padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 13px; line-height: 1.6 }
.helpbox.show { display: flex }
.helpbox .ico { color: var(--accent); margin-top: 2px }
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface3); color: var(--ink); border: 1px solid var(--border2); padding: 11px 16px;
  border-radius: 12px; opacity: 0; transform: translateY(10px); transition: .25s; z-index: 200; display: flex; gap: 8px; align-items: center; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.35) }
.toast.show { opacity: 1; transform: none }
.toast .ico { color: var(--good) }

/* ============ drawer ============ */
.drawer-bg { position: fixed; inset: 0; background: rgba(3,6,14,.55); backdrop-filter: blur(2px); z-index: 90; opacity: 0; pointer-events: none; transition: .25s }
.drawer-bg.show { opacity: 1; pointer-events: auto }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 96vw); background: var(--page2); border-left: 1px solid var(--border2); z-index: 95;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); overflow-y: auto; padding: 20px }
.drawer.show { transform: none }
.drawer .x { position: absolute; top: 16px; right: 16px }
.mhead { display: flex; gap: 14px; align-items: center; margin-bottom: 16px }
.mhead .avatar { width: 48px; height: 48px; font-size: 18px; background: linear-gradient(135deg, var(--accent), var(--accent2)) }
.mhead h2 { margin: 0; font-size: 19px }
.kv { width: 100%; border-collapse: collapse } .kv th { text-align: left; color: var(--muted); font-weight: 600; width: 130px; padding: 7px 0; font-size: 12.5px } .kv td { padding: 7px 0 }
.minibars { display: flex; align-items: flex-end; gap: 3px; height: 70px; padding-top: 6px }
.minibars div { flex: 1; background: var(--s1); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; opacity: .9 }
.minibars div.off { background: var(--surface3) }
.minibars div:hover { opacity: 1; filter: brightness(1.2) }

/* ============ forms ============ */
.upform { display: flex; flex-direction: column; gap: 9px }
.upform label { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 4px }
.drop { border: 2px dashed var(--border2); border-radius: 14px; padding: 22px; text-align: center; cursor: pointer; transition: .2s; background: var(--surface2); color: var(--muted) }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--ink) }
.drop .ico { width: 30px; height: 30px; color: var(--accent); margin-bottom: 6px }
.drop b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 2px }
.drop input { display: none }
.drop .files { margin-top: 8px; font-size: 12px; color: var(--accent) }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px }
.step { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border) }
.step .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--accent-soft); color: var(--accent); flex-shrink: 0 }
.step b { display: block; margin-bottom: 2px } .step span { font-size: 12px; color: var(--muted); line-height: 1.5 }
.uplog div { padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12.5px }
.lookupform { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px }
.lookupform label { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 0 0 6px }
.lookupform .side2 { display: flex; flex-direction: column; gap: 8px }
.bigstats { display: flex; gap: 12px; flex-wrap: wrap }
.bigstat { flex: 1; min-width: 150px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface2) }
.bigstat b { display: block; font-size: 26px; font-weight: 800 } .bigstat span { font-size: 12.5px; color: var(--muted); font-weight: 600 }
.bigstat.ok b { color: var(--good) } .bigstat.mid b { color: var(--warn) } .bigstat.no b { color: var(--bad) }
.settings label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border) }
.settings input { width: 110px; text-align: right }
.adduser { display: flex; flex-wrap: wrap; gap: 8px }
form.inline { display: flex; gap: 4px } form.inline input { width: 110px; padding: 5px 8px }
tr.conv td { background: var(--good-soft) }

/* ============ login ============ */
.loginbg { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px;
  background: radial-gradient(800px 500px at 20% 10%, rgba(124,108,255,.35), transparent 60%), radial-gradient(700px 500px at 90% 90%, rgba(63,140,255,.25), transparent 60%), #070a12 }
.loginbox { background: rgba(20,26,40,.85); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); padding: 34px; border-radius: 20px; width: 370px;
  display: flex; flex-direction: column; gap: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.5); color: #f4f6fb }
.loginbox .brand { padding: 0 0 6px; font-size: 22px }
.loginbox label { font-size: 12.5px; color: #8a93a6; margin-top: 10px; font-weight: 600 }
.loginbox input { background: #0e1320; border-color: rgba(255,255,255,.12); color: #fff; padding: 11px 13px }

/* ============ animations ============ */
@keyframes rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.anim > * { animation: rise .45s ease both }
.anim > *:nth-child(2) { animation-delay: .04s } .anim > *:nth-child(3) { animation-delay: .08s } .anim > *:nth-child(4) { animation-delay: .12s }
.anim > *:nth-child(5) { animation-delay: .16s } .anim > *:nth-child(6) { animation-delay: .2s } .anim > *:nth-child(7) { animation-delay: .24s }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important } }

/* ============ responsive ============ */
@media (max-width: 1200px) { .kpis { grid-template-columns: repeat(3, 1fr) } .grid2, .grid3, .lookupform, .guide { grid-template-columns: 1fr } .steps { grid-template-columns: 1fr } }
@media (max-width: 780px) {
  .side { position: fixed; left: -250px; z-index: 60; transition: left .25s } .side.open { left: 0; box-shadow: 20px 0 60px rgba(0,0,0,.5) }
  .menu { display: inline-grid; order: -2 } .top .ttl { order: -1; flex: 1 1 calc(100% - 60px) } .top h1 { font-size: 18px } main { padding: 0 14px 30px } .kpis { grid-template-columns: repeat(2, 1fr) } .kpi .spark { display: none }
  .search { max-width: none; flex: 1 1 100% } .top { flex-wrap: wrap } .top .desc { display: none } .tagcard { grid-template-columns: 1fr 1fr }
  .hbar { grid-template-columns: 96px 1fr 56px }
}

/* sortable headers + selection */
.tbl th.sortable a { color: inherit; display: inline-flex; align-items: center; gap: 4px; text-decoration: none }
.tbl th.sortable a:hover { color: var(--ink) }
.tbl th.sortable .arr { font-size: 10px; opacity: .35 }
.tbl th.sortable.on { color: var(--accent) } .tbl th.sortable.on .arr { opacity: 1 }
.tbl th.sortable.r a { justify-content: flex-end; width: 100% }
.selcol { width: 54px }
.selmenu { display: flex; align-items: center; gap: 2px; position: relative }
.selmenu details { position: relative }
.selmenu summary { list-style: none; cursor: pointer; padding: 2px 6px; border-radius: 6px; color: var(--muted); font-size: 12px }
.selmenu summary::-webkit-details-marker { display: none }
.selmenu summary:hover, .selmenu details[open] summary { background: var(--surface3); color: var(--ink) }
.selmenu .menu { position: absolute; top: 26px; left: -8px; z-index: 30; background: var(--surface3); border: 1px solid var(--border2); border-radius: 12px;
  padding: 6px; min-width: 190px; box-shadow: 0 16px 40px rgba(0,0,0,.4); display: flex; flex-direction: column }
.selmenu .menu button { text-align: left; background: none; border: 0; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 8px; cursor: pointer }
.selmenu .menu button:hover { background: var(--accent); color: #fff }
.selmenu .menu p { margin: 6px 4px 2px; font-size: 11.5px; color: var(--muted); font-weight: 500; white-space: normal; line-height: 1.5 }
td.selcell { cursor: pointer; user-select: none; -webkit-user-select: none }
td.selcell input { pointer-events: none; width: 16px; height: 16px; accent-color: var(--accent) }
tr.selected td { background: color-mix(in srgb, var(--accent) 14%, var(--surface)) !important }
body.dragsel, body.dragsel * { cursor: ns-resize !important; user-select: none }