/* 思文说 · 设计系统
   配色主题 data-theme：dawn / ocean / violet / forest / ember
   明暗模式 data-mode：light / dark
   动效开关 data-motion：on / off
   所有颜色都走 CSS 变量，切换主题只换变量，不动结构。 */

:root{
  --radius: 20px; --radius-s: 13px;
  --ease: cubic-bezier(.22,.9,.28,1);
  --font: "PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

/* ---------- 主题色（品牌色） ---------- */
html[data-theme="dawn"]  { --brand:#4f6bff; --brand-2:#8b5cf6; --accent:#ff9e6d; --brand-ink:#fff; --soft:rgba(79,107,255,.11); --soft-2:rgba(139,92,246,.12); }
html[data-theme="ocean"] { --brand:#38bdf8; --brand-2:#6366f1; --accent:#5eead4; --brand-ink:#04121f; --soft:rgba(56,189,248,.14); --soft-2:rgba(99,102,241,.16); }
html[data-theme="violet"]{ --brand:#c084fc; --brand-2:#f472b6; --accent:#fbbf24; --brand-ink:#1b0d2c; --soft:rgba(192,132,252,.15); --soft-2:rgba(244,114,182,.13); }
html[data-theme="forest"]{ --brand:#16a34a; --brand-2:#0d9488; --accent:#f59e0b; --brand-ink:#fff; --soft:rgba(22,163,74,.12); --soft-2:rgba(13,148,136,.12); }
html[data-theme="ember"] { --brand:#ea580c; --brand-2:#be123c; --accent:#0e7490; --brand-ink:#fff; --soft:rgba(234,88,12,.11); --soft-2:rgba(190,18,60,.10); }

/* ---------- 明暗底色 ---------- */
html[data-mode="light"]{
  --bg:#f4f6fc; --bg-2:#e9edfa; --surface:rgba(255,255,255,.86); --surface-solid:#fff;
  --surface-2:#f4f6fc; --text:#1a2240; --muted:#6d7593; --faint:#9aa2bb;
  --border:rgba(28,38,74,.10); --border-strong:rgba(28,38,74,.18);
  --shadow:0 18px 46px -22px rgba(28,44,96,.42), 0 2px 10px rgba(28,44,96,.05);
  --shadow-lg:0 32px 70px -28px rgba(28,44,96,.45);
  --glass:rgba(255,255,255,.72); --dot:rgba(79,107,255,.22); --line:rgba(79,107,255,.10);
  --ok:#16a34a; --warn:#ea580c;
}
html[data-mode="dark"]{
  --bg:#080d1c; --bg-2:#111a33; --surface:rgba(21,30,54,.82); --surface-solid:#151e36;
  --surface-2:#1b2542; --text:#eef2ff; --muted:#a0abc9; --faint:#707c9e;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.20);
  --shadow:0 18px 48px -20px rgba(0,0,0,.72), 0 2px 12px rgba(0,0,0,.28);
  --shadow-lg:0 34px 78px -26px rgba(0,0,0,.8);
  --glass:rgba(15,23,44,.78); --dot:rgba(150,180,255,.28); --line:rgba(140,170,255,.10);
  --ok:#4ade80; --warn:#fb923c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; font-family:var(--font); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .45s var(--ease),color .45s var(--ease);
}
body::before{
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(900px 620px at 12% -10%, var(--soft), transparent 68%),
    radial-gradient(760px 560px at 92% 8%, var(--soft-2), transparent 70%),
    radial-gradient(700px 500px at 50% 110%, var(--soft), transparent 72%),
    linear-gradient(160deg,var(--bg),var(--bg-2));
  transition:background .45s var(--ease);
}
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:.75}
.grid-floor{
  position:fixed;left:-20%;right:-20%;bottom:-38vh;height:75vh;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;transform:perspective(520px) rotateX(66deg);transform-origin:bottom center;
  mask-image:linear-gradient(to top,rgba(0,0,0,.85),transparent 78%);
  animation:gridDrift 22s linear infinite;opacity:.7;
}
@keyframes gridDrift{to{background-position:0 56px,56px 0}}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:13px clamp(18px,4vw,54px);backdrop-filter:blur(18px) saturate(1.4);
  background:var(--glass);border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand-cube{
  position:relative;width:38px;height:38px;transform-style:preserve-3d;
  transform:rotateX(-22deg) rotateY(32deg);animation:cubeIdle 12s linear infinite;
}
.brand-cube i{
  position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:700;
  color:var(--brand-ink);border:1px solid rgba(255,255,255,.34);border-radius:7px;
  background:linear-gradient(140deg,var(--brand),var(--brand-2));backface-visibility:hidden;
}
.brand-cube i:nth-child(1){transform:translateZ(19px)}
.brand-cube i:nth-child(2){transform:rotateY(180deg) translateZ(19px)}
.brand-cube i:nth-child(3){transform:rotateY(90deg) translateZ(19px)}
.brand-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(19px)}
.brand-cube i:nth-child(5){transform:rotateX(90deg) translateZ(19px)}
.brand-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(19px)}
@keyframes cubeIdle{to{transform:rotateX(338deg) rotateY(392deg)}}
.brand-text{font-weight:800;font-size:19px;letter-spacing:.06em;line-height:1.12}
.brand-text small{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--faint);margin-top:5px}
.topbar-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.clock{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;margin-right:4px}
.who{display:flex;padding:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px}
.who-btn{border:0;background:transparent;padding:6px 13px;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted);transition:.25s var(--ease)}
.who-btn.is-active{background:var(--brand);color:var(--brand-ink);box-shadow:0 4px 14px -5px var(--brand)}
.sync{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);white-space:nowrap}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px var(--soft)}
.sync.is-on .sync-dot{background:var(--ok);box-shadow:0 0 0 3px rgba(74,222,128,.16);animation:blip 2.4s ease-in-out infinite}
@keyframes blip{50%{box-shadow:0 0 0 6px rgba(74,222,128,0)}}
.icon-btn{
  display:flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);
  padding:7px 12px;border-radius:11px;font-size:12px;font-weight:600;transition:.22s var(--ease);
}
.icon-btn:hover{border-color:var(--brand);transform:translateY(-2px)}
.icon-btn>span{font-size:11px}
.icon-btn.is-off{opacity:.5}
.popover{
  position:absolute;right:clamp(18px,4vw,54px);top:calc(100% + 10px);width:min(310px,calc(100vw - 36px));
  background:var(--surface-solid);border:1px solid var(--border);border-radius:16px;padding:16px;
  box-shadow:var(--shadow-lg);z-index:60;animation:pop .22s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.97)}}
.pop-title{font-size:12px;font-weight:800;letter-spacing:.05em;margin-bottom:11px}
.mode-title{margin-top:17px}
.pop-note{font-size:11px;line-height:1.7;color:var(--muted);margin:12px 0 0}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.swatch{border:2px solid transparent;background:none;padding:0;border-radius:12px;display:grid;gap:5px;justify-items:center}
.swatch span{width:100%;height:34px;border-radius:9px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.swatch small{font-size:10px;color:var(--muted)}
.swatch.is-active{border-color:var(--brand)}
.swatch[data-theme="dawn"] span{background:linear-gradient(135deg,#4f6bff,#8b5cf6)}
.swatch[data-theme="ocean"] span{background:linear-gradient(135deg,#38bdf8,#6366f1)}
.swatch[data-theme="violet"] span{background:linear-gradient(135deg,#c084fc,#f472b6)}
.swatch[data-theme="forest"] span{background:linear-gradient(135deg,#16a34a,#0d9488)}
.swatch[data-theme="ember"] span{background:linear-gradient(135deg,#ea580c,#be123c)}
.mode-switch{display:flex;gap:8px}
.mode-switch button{flex:1;border:1px solid var(--border);background:var(--surface-2);padding:9px;border-radius:10px;font-size:12px;font-weight:700}
.mode-switch button.is-active{background:var(--brand);color:var(--brand-ink);border-color:transparent}
.data-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.data-actions button{border:1px solid var(--border);background:var(--surface-2);padding:9px;border-radius:10px;font-size:12px;font-weight:600}
.data-actions button:hover{border-color:var(--brand)}
.data-actions .danger{color:#e11d48}

/* ---------- 通用 ---------- */
main{max-width:1280px;margin:0 auto;padding:0 clamp(18px,4vw,54px) 70px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;padding:11px 20px;
  font-size:13px;font-weight:700;border:1px solid transparent;transition:.25s var(--ease);white-space:nowrap;
}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--brand-ink);box-shadow:0 12px 26px -12px var(--brand)}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 18px 30px -12px var(--brand)}
.btn.ghost{border-color:var(--border-strong);background:var(--surface);color:var(--muted)}
.btn.ghost:hover{color:var(--text);border-color:var(--brand);transform:translateY(-2px)}
.btn.small{padding:8px 14px;font-size:12px;border-radius:10px}
.grad{background:linear-gradient(100deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);padding:5px 10px;border-radius:8px;white-space:nowrap}
.card{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);backdrop-filter:blur(12px);transform-style:preserve-3d;
  animation:cardIn .6s var(--ease) backwards;
}
.row-two>.card:nth-child(2),.bottom-row>.card:nth-child(2){animation-delay:.09s}
.board-card{animation-delay:.16s}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) rotateX(3deg)}}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.card-head h3{margin:0;font-size:16px;font-weight:800;letter-spacing:.02em}
.card-head .sub{margin:5px 0 0;font-size:11.5px;color:var(--muted)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:44px 0 18px}
.section-head h2{margin:0;font-size:20px;font-weight:800;letter-spacing:.03em}
.section-head span{font-size:12px;color:var(--muted)}
.row-two{display:grid;grid-template-columns:1.08fr .92fr;gap:18px;margin-bottom:18px}
.bottom-row{grid-template-columns:1.15fr .85fr;margin-top:18px}
.tilt{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tilt:hover{box-shadow:var(--shadow-lg)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:20px;min-height:min(74vh,660px);padding:36px 0 8px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.eyebrow .sep{opacity:.45}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--soft);animation:blip 2.2s infinite}
.hero h1{margin:20px 0 18px;font-size:clamp(34px,4.6vw,62px);line-height:1.22;font-weight:850;letter-spacing:-.02em}
.lede{margin:0;max-width:520px;font-size:14.5px;line-height:2;color:var(--muted)}
.hero-cta{display:flex;gap:11px;margin-top:28px;flex-wrap:wrap}
.hero-pills{display:flex;gap:10px;margin-top:34px;flex-wrap:wrap}
.hero-pill{
  display:flex;align-items:center;gap:10px;padding:10px 15px;border:1px solid var(--border);
  border-radius:13px;background:var(--surface);box-shadow:var(--shadow);
}
.hero-pill b{font-size:19px;font-weight:850;font-variant-numeric:tabular-nums}
.hero-pill span{font-size:11px;color:var(--muted);line-height:1.35}
.hero-art{position:relative;height:min(480px,52vw);min-height:340px;perspective:1000px;display:grid;place-items:center}
.cube-stage{width:210px;height:210px;transform-style:preserve-3d;transform:rotateX(var(--rx,-18deg)) rotateY(var(--ry,26deg))}
.cube{position:relative;width:210px;height:210px;transform-style:preserve-3d;animation:cubeSpin 22s linear infinite}
.face{
  position:absolute;inset:0;display:grid;place-items:center;font-size:62px;font-weight:850;letter-spacing:.05em;
  color:var(--brand-ink);border:1px solid rgba(255,255,255,.42);border-radius:18px;
  background:linear-gradient(140deg,var(--brand),var(--brand-2));
  box-shadow:inset 0 0 60px rgba(255,255,255,.18),0 0 60px -18px var(--brand);
  backface-visibility:hidden;text-shadow:0 4px 18px rgba(0,0,0,.18);
}
.f-front {transform:translateZ(105px)}
.f-back  {transform:rotateY(180deg) translateZ(105px)}
.f-right {transform:rotateY(90deg) translateZ(105px)}
.f-left  {transform:rotateY(-90deg) translateZ(105px)}
.f-top   {transform:rotateX(90deg) translateZ(105px);font-size:44px}
.f-bottom{transform:rotateX(-90deg) translateZ(105px);font-size:34px}
@keyframes cubeSpin{from{transform:rotateX(-8deg) rotateY(0)}to{transform:rotateX(-8deg) rotateY(360deg)}}
.orbit{position:absolute;border:1px solid var(--border-strong);border-radius:50%;pointer-events:none}
.orbit-1{width:340px;height:340px;transform:rotateX(72deg) rotateZ(18deg);animation:orbitSpin 18s linear infinite}
.orbit-2{width:430px;height:430px;border-style:dashed;opacity:.5;transform:rotateX(64deg) rotateZ(-24deg);animation:orbitSpin 30s linear infinite reverse}
@keyframes orbitSpin{to{transform:rotateX(72deg) rotateZ(378deg)}}
.float-chip{
  position:absolute;padding:10px 14px;border-radius:12px;background:var(--surface-solid);
  border:1px solid var(--border);box-shadow:var(--shadow-lg);font-size:11px;color:var(--muted);
  animation:floaty 5s ease-in-out infinite;transform-style:preserve-3d;
}
.float-chip b{color:var(--text);font-size:13px;margin-left:5px}
.chip-a{top:16%;left:2%}
.chip-b{bottom:16%;right:2%;animation-delay:-2.5s}
@keyframes floaty{50%{transform:translateY(-13px) translateZ(18px)}}

/* ---------- 今日聚焦 ---------- */
.date-input{border:1px solid var(--border);background:var(--surface-2);border-radius:9px;padding:7px 9px;font-size:11.5px;color:var(--muted)}
.focus-list{display:grid;gap:9px;min-height:132px}
.focus-item{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border);animation:slideIn .3s var(--ease);
}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}}
.focus-check{
  flex-shrink:0;width:20px;height:20px;border-radius:7px;border:2px solid var(--border-strong);background:transparent;
  display:grid;place-items:center;font-size:12px;color:transparent;transition:.2s var(--ease);
}
.focus-item.done .focus-check{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.focus-item.done .focus-text{text-decoration:line-through;color:var(--faint)}
.focus-text{flex:1;font-size:13px;line-height:1.5;border:0;background:transparent;outline:none;min-width:0}
.focus-text:focus{border-bottom:1px solid var(--brand)}
.focus-del{border:0;background:transparent;color:var(--faint);font-size:16px;padding:2px 5px;line-height:1}
.focus-del:hover{color:#e11d48}
.empty{font-size:12px;color:var(--faint);padding:18px 4px;line-height:1.8}
.inline-form{display:flex;gap:8px;margin-top:12px}
.inline-form input[type=text],.inline-form input[type=time]{
  flex:1;min-width:0;border:1px solid var(--border);background:var(--surface-2);border-radius:10px;
  padding:10px 12px;font-size:12px;outline:none;transition:.2s var(--ease);
}
.inline-form input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--soft)}
.inline-form input[type=time]{flex:0 0 106px}
.inline-form button{
  flex-shrink:0;width:38px;border-radius:10px;border:0;background:var(--brand);color:var(--brand-ink);
  font-size:19px;line-height:1;font-weight:600;
}
.inline-form button:hover{filter:brightness(1.1)}
.focus-foot{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted)}
.mini-ring{width:34px;height:34px;flex-shrink:0}

/* ---------- 今日安排 ---------- */
.plan-list{display:grid;gap:0;min-height:132px;max-height:236px;overflow:auto;padding-right:3px}
.plan-item{display:flex;gap:12px;align-items:flex-start;position:relative;padding:0 0 15px 0}
.plan-item::before{content:"";position:absolute;left:47px;top:18px;bottom:-2px;width:1px;background:var(--border-strong)}
.plan-item:last-child::before{display:none}
.plan-time{flex:0 0 42px;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--brand);padding-top:3px}
.plan-dot{flex:0 0 11px;width:11px;height:11px;border-radius:50%;border:2px solid var(--brand);background:var(--surface-solid);margin-top:3px;z-index:1}
.plan-body{flex:1;font-size:12.5px;line-height:1.6;padding-right:26px;position:relative;word-break:break-word}
.plan-del{position:absolute;right:0;top:0;border:0;background:transparent;color:var(--faint);font-size:15px}
.plan-del:hover{color:#e11d48}

/* ---------- 看板 ---------- */
.board-card{padding-bottom:24px}
.board-head{align-items:center;margin-bottom:20px}
.board-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter{display:flex;gap:3px;padding:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px}
.filter button{border:0;background:transparent;padding:6px 11px;border-radius:8px;font-size:11.5px;font-weight:700;color:var(--muted)}
.filter button.is-active{background:var(--surface-solid);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.col{background:var(--surface-2);border:1px solid var(--border);border-radius:15px;padding:12px;min-height:210px;transition:.2s var(--ease)}
.col.drag-over{border-color:var(--brand);background:var(--soft)}
.col-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;padding:2px 4px 12px}
.col-head b{margin-left:auto;font-size:11px;color:var(--muted);background:var(--surface-solid);padding:2px 8px;border-radius:7px}
.col-dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.col[data-status="todo"] .col-dot{background:#94a3b8}
.col[data-status="doing"] .col-dot{background:var(--brand);box-shadow:0 0 0 3px var(--soft)}
.col[data-status="done"] .col-dot{background:var(--ok)}
.col-body{display:grid;gap:10px;align-content:start}
.task{
  position:relative;background:var(--surface-solid);border:1px solid var(--border);border-radius:12px;
  padding:13px;box-shadow:0 4px 14px -10px rgba(20,30,60,.5);cursor:grab;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);animation:slideIn .3s var(--ease);
}
.task:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.task.dragging{opacity:.4;cursor:grabbing}
.task.done .task-title{text-decoration:line-through;color:var(--faint)}
.task-top{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.pri{font-size:10px;font-weight:800;padding:3px 7px;border-radius:6px;background:var(--surface-2);color:var(--muted)}
.pri.high{background:rgba(245,158,11,.16);color:#d97706}
.pri.urgent{background:rgba(225,29,72,.14);color:#e11d48}
.task-owner{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--brand);background:var(--soft);padding:3px 8px;border-radius:6px}
.task-title{font-size:13px;font-weight:700;line-height:1.55;word-break:break-word}
.task-desc{font-size:11.5px;color:var(--muted);line-height:1.65;margin-top:6px;word-break:break-word}
.task-foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.task-due{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.task-due.late{color:#e11d48;font-weight:700}
.task-actions{margin-left:auto;display:flex;gap:4px}
.task-actions button{border:1px solid var(--border);background:var(--surface-2);border-radius:7px;width:24px;height:24px;font-size:12px;line-height:1;color:var(--muted)}
.task-actions button:hover{border-color:var(--brand);color:var(--brand)}
.task-actions .del:hover{border-color:#e11d48;color:#e11d48}
.col-empty{font-size:11px;color:var(--faint);text-align:center;padding:22px 4px;line-height:1.7}

/* ---------- 对话 ---------- */
.talk-list{height:222px;overflow:auto;display:flex;flex-direction:column;gap:11px;padding:4px 6px 8px 2px}
.msg{display:flex;gap:10px;align-items:flex-start;animation:slideIn .3s var(--ease)}
.msg-av{flex-shrink:0;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--brand-ink);background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.msg[data-who="潘卫"] .msg-av{background:linear-gradient(135deg,var(--accent),var(--brand-2))}
.msg-main{flex:1;min-width:0}
.msg-meta{font-size:10.5px;color:var(--faint);margin-bottom:4px;display:flex;gap:8px;align-items:center}
.msg-meta b{color:var(--text);font-size:11px}
.msg-bubble{display:inline-block;max-width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:4px 12px 12px 12px;padding:9px 12px;font-size:12.5px;line-height:1.65;word-break:break-word}
.msg-del{border:0;background:transparent;color:var(--faint);font-size:13px;opacity:0;transition:.2s}
.msg:hover .msg-del{opacity:1}
.msg-del:hover{color:#e11d48}
.talk-form{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.talk-avatar{flex-shrink:0;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--brand-ink);background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.talk-form input{flex:1;min-width:0;border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:12px;outline:none}
.talk-form input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--soft)}

/* ---------- 概览 ---------- */
.stats-main{display:flex;align-items:center;gap:22px;margin-bottom:20px}
.big-ring{width:118px;height:118px;flex-shrink:0}
.stat-numbers{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1}
.stat-num{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.stat-num b{display:block;font-size:21px;font-weight:850;font-variant-numeric:tabular-nums;line-height:1.2}
.stat-num span{font-size:10.5px;color:var(--muted)}
.split{display:grid;gap:9px;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.split-row{display:flex;align-items:center;gap:10px;font-size:11.5px}
.split-row .name{flex:0 0 48px;font-weight:700}
.split-track{flex:1;height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.split-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .6s var(--ease)}
.split-row .v{font-variant-numeric:tabular-nums;color:var(--muted);flex:0 0 40px;text-align:right}
.activity{margin-top:14px;display:grid;gap:7px}
.act{font-size:11px;color:var(--muted);display:flex;gap:8px;line-height:1.6}
.act::before{content:"·";color:var(--brand);font-weight:900}
.act time{color:var(--faint);font-variant-numeric:tabular-nums;flex-shrink:0}

/* ---------- 弹窗 / 提示 ---------- */
.task-dialog{
  width:min(460px,calc(100vw - 32px));border:1px solid var(--border);border-radius:20px;padding:0;
  background:var(--surface-solid);color:var(--text);box-shadow:var(--shadow-lg);
}
.task-dialog::backdrop{background:rgba(8,14,32,.56);backdrop-filter:blur(5px)}
.task-dialog form{padding:24px}
.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.dialog-head h3{margin:0;font-size:17px;font-weight:800}
.close{border:0;background:var(--surface-2);width:30px;height:30px;border-radius:9px;font-size:20px;line-height:1;color:var(--muted)}
.task-dialog label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:13px}
.task-dialog input,.task-dialog select,.task-dialog textarea{
  display:block;width:100%;margin-top:6px;border:1px solid var(--border);background:var(--surface-2);
  border-radius:10px;padding:10px 12px;font-size:13px;outline:none;resize:vertical;
}
.task-dialog input:focus,.task-dialog select:focus,.task-dialog textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--soft)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dialog-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:100;
  background:var(--surface-solid);border:1px solid var(--border);border-radius:12px;padding:11px 18px;
  font-size:12.5px;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.3s var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

footer{
  border-top:1px solid var(--border);padding:24px clamp(18px,4vw,54px);display:flex;
  align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);
}
.foot-brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--text)}
.foot-cube{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:12px;color:var(--brand-ink);background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.foot-links{display:flex;gap:22px;align-items:center}
.foot-links a:hover{color:var(--brand)}

/* ---------- 响应式 ---------- */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:42px;text-align:left}
  .hero-art{height:330px;order:-1}
  .cube-stage{transform:scale(.8) rotateX(var(--rx,-18deg)) rotateY(var(--ry,26deg))}
  .row-two,.bottom-row{grid-template-columns:1fr}
  .clock{display:none}
}
@media(max-width:720px){
  .topbar{flex-wrap:wrap;padding:12px 16px}
  .topbar-right{gap:6px}
  .icon-btn>span{display:none}
  .brand-text small{display:none}
  .board{grid-template-columns:1fr}
  .hero h1{font-size:36px}
  .hero-pills{gap:8px}
  .hero-pill{flex:1;min-width:120px}
  .stats-main{flex-direction:column;align-items:flex-start}
  .stat-numbers{width:100%}
  .section-head{margin-top:30px}
}
@media(max-width:420px){ .form-row{grid-template-columns:1fr} .who-btn{padding:6px 9px} }

/* ---------- 动效开关 / 系统偏好 ---------- */
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{
  animation:none !important;transition:none !important;scroll-behavior:auto !important;
}
html[data-motion="off"] .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important} }