/* ============ 设计 token（与设计交付件逐行对齐：4pt 空间、暖调中性、靛蓝强调） ============ */
:root{
  /* 空间 4pt 系统 */
  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;

  /* 色彩：暖调中性（带一丝琥珀）避免死灰；单一靛蓝强调色 */
  --bg:        oklch(97.5% 0.006 82);
  --bg-soft:   oklch(96% 0.008 82);
  --surface:   oklch(100% 0 0);
  --surface-2: oklch(98% 0.008 82);
  --ink:       oklch(26% 0.02 75);
  --ink-soft:  oklch(42% 0.02 75);
  --muted:     oklch(56% 0.018 75);
  --faint:     oklch(70% 0.015 75);
  --line:      oklch(91% 0.01 82);
  --line-soft: oklch(94% 0.008 82);

  --brand:     oklch(56% 0.15 258);
  --brand-ink: oklch(45% 0.14 258);
  --brand-soft:oklch(95% 0.025 258);
  --brand-line:oklch(88% 0.04 258);

  --ok:    oklch(52% 0.13 152);
  --ok-bg: oklch(95% 0.03 152);
  --doing: oklch(65% 0.13 78);
  --doing-bg: oklch(96% 0.035 82);
  --todo:  oklch(62% 0.02 75);
  --todo-bg: oklch(95% 0.006 82);
  --danger: oklch(55% 0.17 25);
  --danger-bg: oklch(95% 0.025 25);

  --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px;

  /* 阴影：克制（能看到阴影多半太强） */
  --shadow-sm: 0 1px 2px oklch(30% 0.02 82 / .06);
  --shadow-md: 0 1px 2px oklch(30% 0.02 82 / .05), 0 6px 20px oklch(30% 0.02 82 / .06);
  --shadow-lg: 0 2px 4px oklch(30% 0.02 82 / .06), 0 14px 36px oklch(30% 0.02 82 / .09);

  /* 动效 token（100/300/500 规则 + 指数缓动） */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms; --t-base: 240ms; --t-slow: 420ms;
}

*{box-sizing:border-box; margin:0; padding:0}
/* hidden 必须始终生效：auth/admin 视图等 fixed 全屏层自身的 display 规则会盖过 UA 样式，
   若不加此规则，隐藏的视图仍会以不透明层罩住全屏并拦截点击 */
[hidden]{display:none !important}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Source Han Sans SC","Microsoft YaHei",system-ui,sans-serif;
  line-height:1.55; font-size:14px; -webkit-font-smoothing:antialiased;
  letter-spacing:.01em;
  height:100vh; height:100dvh;
  display:flex; flex-direction:column; overflow:hidden;
}
::selection{background:var(--brand-soft); color:var(--brand-ink)}
button{font-family:inherit}

.app{flex:1; min-height:0; display:flex; flex-direction:column}

/* ============ 工具栏 ============ */
.demo-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  flex-wrap:wrap;
}
.demo-toolbar .win{display:flex; align-items:center; gap:7px}
.demo-toolbar .dot{width:11px; height:11px; border-radius:50%; display:inline-block}
.demo-toolbar .dot.r{background:oklch(62% 0.16 22)} .demo-toolbar .dot.y{background:oklch(78% 0.15 88)} .demo-toolbar .dot.g{background:oklch(62% 0.14 152)}
.demo-toolbar .win span.title{font-size:12.5px; color:var(--muted); margin-left:6px; font-weight:600; letter-spacing:.02em}
.demo-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.proj-count{
  font-size:12px; color:var(--muted); font-weight:600;
  background:var(--surface-2); border:1px solid var(--line);
  padding:5px 11px; border-radius:999px; letter-spacing:.02em;
}
.legend{display:flex; gap:14px; font-size:12px; color:var(--muted); flex-wrap:wrap}
.legend i{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:-1px}

/* ============ 矩阵区：整页垂直滚动 + 隐藏滚动条 ============ */
.demo-view{
  flex:1; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  background:var(--bg-soft);
  overscroll-behavior:contain;
  scrollbar-width:none; -ms-overflow-style:none;
}
.demo-view::-webkit-scrollbar{display:none; width:0; height:0}

.demo-colhead{
  position:sticky; top:0; z-index:40; display:flex;
  background:oklch(30% 0.02 258 / .94); color:#fff; font-size:12px;
  backdrop-filter:blur(6px);
}
.demo-colhead .demo-title{width:172px; flex:none; padding:10px 16px; font-weight:600; letter-spacing:.05em; font-size:11.5px}
.demo-colhead .demo-cols{flex:1; overflow:hidden; padding:10px 14px; white-space:nowrap; text-overflow:ellipsis; opacity:.82; font-size:11.5px}

.demo-row{display:flex; border-bottom:1px solid var(--line); background:var(--surface); transition:background var(--t-fast)}
.demo-row:hover{background:var(--surface-2)}
/* 首列：横向滚动时悬浮固定 */
.demo-title{
  width:172px; flex:none; position:sticky; left:0; z-index:20;
  background:var(--surface); padding:14px 14px 12px;
  display:flex; flex-direction:column; gap:10px;
  border-right:1px solid var(--line);
  box-shadow:6px 0 14px -10px oklch(30% 0.02 82 / .35);
  transition:background var(--t-fast);
}
.demo-row:hover .demo-title{background:var(--surface-2)}
.demo-title .trow{display:flex; align-items:flex-start; gap:10px; min-width:0}
.demo-title .bar{width:4px; align-self:stretch; border-radius:3px; margin:3px 0; flex:none}
.demo-title .ttx{flex:1; min-width:0}
.demo-title .t{font-size:14px; font-weight:700; line-height:1.35; letter-spacing:-.01em; color:var(--ink)}
.demo-title .c{font-size:11.5px; color:var(--muted); margin-top:3px; font-variant-numeric:tabular-nums}
/* 首列操作：悬停浮现 */
.title-ops{
  display:flex; align-items:center; gap:6px;
  opacity:0; transform:translateY(-3px);
  transition:opacity var(--t-fast), transform var(--t-base) var(--ease-out-quart);
}
.demo-row:hover .title-ops, .demo-title:hover .title-ops{opacity:1; transform:translateY(0)}
.title-ops .mini{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--line);
  padding:3px 9px; border-radius:7px; cursor:pointer;
  transition:all var(--t-fast);
}
.title-ops .mini:hover{color:var(--brand-ink); border-color:var(--brand-line); background:var(--brand-soft)}
.title-ops .mini.danger:hover{color:var(--danger); border-color:oklch(85% 0.06 25); background:var(--danger-bg)}
.title-ops .mini i{font-style:normal}
/* 任务区：行内横向滚动 + 隐藏滚动条 */
.demo-tasks{
  flex:1; min-width:0; overflow-x:auto; overflow-y:hidden;
  display:flex; gap:9px; padding:12px 14px;
  overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
}
.demo-tasks::-webkit-scrollbar{display:none; width:0; height:0}
.task{
  min-width:150px; flex:none; position:relative;
  border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px;
  font-size:12.5px; background:var(--surface); user-select:none;
  transition:transform var(--t-base) var(--ease-out-quart), box-shadow var(--t-base) var(--ease-out-quart), border-color var(--t-fast), background var(--t-fast);
}
.task:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm); border-color:var(--line)}
.task:active{transform:translateY(0) scale(.99); transition-duration:var(--t-fast)}
/* 状态复选框 */
.task .check-wrap{
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; user-select:none;
}
.task .task-check{position:absolute; opacity:0; width:0; height:0}
.task .check-box{
  width:15px; height:15px; flex:none;
  border:1.5px solid var(--line); border-radius:5px;
  background:var(--surface); position:relative;
  transition:all var(--t-fast) var(--ease-out-quart);
}
.task .check-wrap:hover .check-box{border-color:var(--brand-line)}
.task .task-check:checked + .check-box{
  background:var(--brand); border-color:var(--brand);
}
.task .task-check:checked + .check-box::after{
  content:""; position:absolute; left:4.5px; top:1.5px;
  width:4px; height:8px;
  border:solid #fff; border-width:0 1.8px 1.8px 0;
  transform:rotate(45deg);
}
.task .check-lbl{
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
  color:var(--muted); font-style:normal;
}
.task .tx{line-height:1.45; color:var(--ink); font-weight:500; cursor:text}
.task .tx:hover{color:var(--brand-ink)}
.task .tx:focus{outline:none}
.task.done{background:var(--surface-2); border-color:var(--line-soft)}
.task.done .tx{text-decoration:line-through; text-decoration-color:var(--faint); color:var(--muted)}
.task.done .check-lbl{color:var(--ok)}
.task.pop{animation:task-pop 420ms var(--ease-out-expo)}
@keyframes task-pop{0%{transform:scale(1)}35%{transform:scale(.95)}100%{transform:scale(1)}}
/* 拖拽插入预览 */
.task.insert-before{box-shadow:inset 3px 0 0 var(--brand)}
.task.insert-after{box-shadow:inset -3px 0 0 var(--brand)}
.task.dragging{opacity:.4; transform:scale(.95)}
.demo-row.dragging{opacity:.4}
.demo-row.row-before{box-shadow:inset 0 3px 0 var(--brand)}
.demo-row.row-after{box-shadow:inset 0 -3px 0 var(--brand)}
/* 删除按钮：悬停浮现 */
.task .del-task{
  position:absolute; top:6px; right:6px; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--faint);
  font-size:13px; border-radius:6px; cursor:pointer;
  opacity:0; transition:opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.task:hover .del-task{opacity:1}
.task .del-task:hover{background:var(--danger-bg); color:var(--danger)}

.demo-note{
  font-size:12.5px; color:var(--muted); padding:10px 18px;
  background:var(--surface-2); border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
}
.kbd{
  background:var(--surface); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:6px; padding:1px 7px; font-size:12px; font-family:ui-monospace,Menlo,monospace;
}
.save-state{font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums}
.save-state.err{color:var(--danger); cursor:pointer; font-weight:600}
.save-state.err:hover{text-decoration:underline}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:9px;
  cursor:pointer; font-family:inherit; letter-spacing:.01em;
  transition:all var(--t-fast) var(--ease-out-quart);
}
.btn:hover{border-color:var(--brand-line); color:var(--brand-ink); background:var(--brand-soft)}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:var(--brand); color:#fff; border-color:var(--brand);
}
.btn-primary:hover{background:var(--brand-ink); color:#fff; border-color:var(--brand-ink)}
.btn-sm{padding:4px 9px; font-size:11.5px; border-radius:7px; gap:4px}
.btn-icon{width:24px; height:24px; padding:0; justify-content:center; border-radius:7px; font-size:12px; opacity:.62}
.btn-icon:hover{opacity:1}

.task-head{display:block; margin-bottom:7px; padding-right:20px}

/* ============ 编辑态 ============ */
.editing .editable{
  background:var(--surface); border:1.5px solid var(--brand); color:var(--ink);
  border-radius:5px; padding:1px 6px; font:inherit; font-size:inherit;
  outline:none; width:100%; min-width:0;
}
.task.editing{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft)}
.title-edit{font:inherit; font-weight:500; font-size:12.5px; border:1.5px solid var(--brand); border-radius:6px; padding:2px 7px; background:var(--surface); color:var(--ink); outline:none; width:100%}

/* ============ 时间设置（点击弹日历） ============ */
.due-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; color:var(--faint); margin-top:8px;
  border:1px dashed var(--line); border-radius:6px; padding:2px 8px;
  cursor:pointer; transition:all var(--t-fast);
}
.due-chip:hover{border-color:var(--brand-line); color:var(--brand-ink)}
.due-chip.has{background:var(--brand-soft); border-style:solid; border-color:var(--brand-line); color:var(--brand-ink)}
.due-chip .chip-ic{font-size:10.5px}
.due-chip .chip-txt{white-space:nowrap}

/* ============ 日历弹层 ============ */
.cal-pop{
  position:fixed; z-index:1000; width:248px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-lg);
  padding:14px; font-size:12.5px;
  animation:cal-in 160ms var(--ease-out-quart);
}
@keyframes cal-in{from{opacity:0; transform:translateY(4px) scale(.98)}to{opacity:1; transform:none}}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.cal-head .cal-nav{
  width:26px; height:26px; border:none; background:var(--surface-2);
  border-radius:7px; cursor:pointer; font-size:14px; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t-fast);
}
.cal-head .cal-nav:hover{background:var(--brand-soft); color:var(--brand-ink)}
.cal-head .cal-title{font-weight:700; font-size:13px; color:var(--ink)}
.cal-week{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:6px}
.cal-week span{text-align:center; font-size:10.5px; color:var(--faint); font-weight:600; padding:2px 0}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal-day{
  aspect-ratio:1; border:none; background:transparent; border-radius:8px;
  font-size:12px; color:var(--ink-soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t-fast);
}
.cal-day:hover{background:var(--brand-soft); color:var(--brand-ink)}
.cal-day.out{color:var(--faint); opacity:.5}
.cal-day.today{font-weight:700; color:var(--brand-ink); box-shadow:inset 0 0 0 1.5px var(--brand-line)}
.cal-day.sel{background:var(--brand); color:#fff; font-weight:700}
.cal-day.sel:hover{background:var(--brand-ink); color:#fff}
.cal-foot{display:flex; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft)}
.cal-foot button{
  border:none; background:none; font-size:11.5px; color:var(--muted);
  cursor:pointer; padding:3px 8px; border-radius:6px; font-weight:600;
  transition:all var(--t-fast);
}
.cal-foot button:hover{background:var(--surface-2); color:var(--ink)}

/* ============ 拖拽把手 ============ */
.drag-handle{
  cursor:grab; color:var(--faint); font-size:14px; line-height:1;
  padding:2px 4px; border-radius:4px; user-select:none; flex:none;
  transition:color var(--t-fast);
}
.drag-handle:hover{color:var(--brand)}
.drag-handle:active{cursor:grabbing}

/* ============ 列宽：整列右缘可拖 ============ */
.demo-title .resize-zone{
  position:absolute; top:0; right:-6px; width:7px; height:100%;
  cursor:col-resize; z-index:30; user-select:none;
  transition:background var(--t-fast);
}
.demo-title:hover .resize-zone,
.demo-title .resize-zone:hover{background:oklch(60% 0.1 258 / .35)}
body.resizing-title{cursor:col-resize; user-select:none}
body.resizing-title *{cursor:col-resize!important}

/* ============ 空态 / 加载 / 出错（状态帧 SF-3） ============ */
.state-card{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:64px 24px; color:var(--muted); font-size:13px; text-align:center;
}
.state-card .emoji{font-size:34px; line-height:1}
.state-card .hint{font-size:12px; color:var(--faint)}

/* ============ 轻提示 ============ */
.toast-host{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:1200; display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none;
}
.toast{
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  border-radius:10px; padding:8px 16px; font-size:12.5px;
  box-shadow:var(--shadow-lg); animation:cal-in 160ms var(--ease-out-quart);
  pointer-events:auto;
}
.toast.err{border-color:oklch(85% 0.06 25); background:var(--danger-bg); color:var(--danger)}
.toast .retry{margin-left:10px; font-weight:700; text-decoration:underline; cursor:pointer}

/* ============ 响应式 ============ */
@media (max-width:900px){
  .demo-colhead .demo-title, .demo-row .demo-title{width:124px; padding:10px 10px 8px}
  .demo-colhead .demo-title{width:124px}
  .demo-title{padding:12px 10px 10px}
  .legend{display:none}
}

/* ============ 登录 / 账号（多用户体系） ============ */
body.preauth .app{display:none}
.auth-view{position:fixed; inset:0; z-index:900; display:flex; background:var(--bg); overflow:auto}
.auth-view::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background-image:repeating-linear-gradient(180deg, transparent 0, transparent 27px, var(--line-soft) 27px, var(--line-soft) 28px)}
.ghost-stage{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.ghost-row{position:absolute; width:560px; max-width:70vw; border-radius:var(--radius-lg); opacity:.55; filter:saturate(.9)}
.ghost-row.g1{top:9%; left:7%}
.ghost-row.g2{top:34%; left:56%; width:520px}
.ghost-row.g3{top:64%; left:16%}
.ghost-head{display:flex; align-items:center; gap:8px; padding:10px 12px}
.ghost-bar{width:4px; height:16px; border-radius:2px; flex:none}
.ghost-title{font-weight:600; font-size:13px; color:var(--ink-soft)}
.ghost-meta{font-size:11px; color:var(--faint); margin-left:auto}
.ghost-cards{display:flex; gap:10px; padding:0 12px 12px}
.ghost-card{flex:none; width:150px; padding:9px 11px; border-radius:var(--radius-md); background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow-sm); font-size:12px; color:var(--muted);
  display:flex; align-items:center; gap:7px}
.ghost-card .ghost-box{flex:none; width:13px; height:13px; border-radius:4px; border:1.5px solid var(--faint);
  display:flex; align-items:center; justify-content:center; font-size:9px; color:transparent}
.ghost-card.done{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-ink)}
.ghost-card.done .ghost-box{background:var(--brand); border-color:var(--brand); color:#fff}
.auth-card{position:relative; z-index:2; margin:auto; width:400px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg); padding:30px 30px 22px}
.auth-brand{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--muted);
  letter-spacing:.04em; margin-bottom:18px}
.auth-logo{width:22px; height:22px; border-radius:7px; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800}
.auth-h1{font-size:20px; font-weight:700; letter-spacing:.02em; margin-bottom:6px}
.auth-sub{font-size:12.5px; color:var(--muted); margin-bottom:16px}
.auth-notice{background:var(--danger-bg); color:var(--danger); border:1px solid oklch(85% 0.06 25);
  border-radius:var(--radius-md); padding:9px 12px; font-size:12.5px; margin-bottom:12px}
.auth-notice:not(.err){background:var(--ok-bg); color:var(--ok); border-color:oklch(85% 0.06 152)}
.auth-card [hidden]{display:none!important}
.auth-field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.auth-lbl{font-size:12px; font-weight:600; color:var(--ink-soft)}
.auth-input{font:inherit; color:var(--ink); background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:9px 12px; outline:none; width:100%;
  transition:border-color var(--t-fast), box-shadow var(--t-fast)}
.auth-input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); background:var(--surface)}
.auth-submit{width:100%; margin-top:4px; justify-content:center; font-size:13px; padding:10px 14px;
  border-radius:var(--radius-md); font-weight:700; border:1px solid var(--brand); background:var(--brand);
  color:#fff; cursor:pointer; transition:all var(--t-fast) var(--ease-out-quart)}
.auth-submit:hover{background:var(--brand-ink); border-color:var(--brand-ink)}
.auth-submit:active{transform:scale(.985)}
.auth-submit:disabled{opacity:.62; cursor:default}
.auth-foot{margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); text-align:center}
.auth-link{border:none; background:none; font:inherit; font-size:12.5px; color:var(--brand-ink);
  font-weight:600; cursor:pointer; padding:2px 6px; border-radius:6px}
.auth-link:hover{text-decoration:underline}
.auth-loading{font-size:12.5px; color:var(--muted); padding:26px 0; text-align:center}
.dialog-mask{position:fixed; inset:0; z-index:1100; background:oklch(30% 0.02 258 / .32);
  display:grid; place-items:center; padding:16px}
.dialog-card{width:360px; max-width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:20px 22px;
  animation:cal-in 160ms var(--ease-out-quart)}
.dialog-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.dialog-title{font-size:15px; font-weight:700; color:var(--ink)}
.dialog-close{width:26px; height:26px; border:none; background:var(--surface-2); border-radius:8px;
  color:var(--muted); cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center;
  transition:all var(--t-fast)}
.dialog-close:hover{background:var(--brand-soft); color:var(--brand-ink)}
.dialog-sub{font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.02em; margin:4px 0 10px}
.acct-line{display:flex; align-items:center; gap:10px; padding:8px 0 14px; border-bottom:1px solid var(--line-soft)}
.acct-avatar{width:34px; height:34px; border-radius:10px; flex:none; background:var(--brand-soft);
  color:var(--brand-ink); border:1px solid var(--brand-line); display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:15px}
.acct-name{font-weight:700; font-size:14px}
.role-badge{font-size:10.5px; font-weight:700; letter-spacing:.03em; background:var(--todo-bg); color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:2px 9px}
.role-badge.admin{background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand-line)}
.acct-form{margin-top:14px}
.acct-form .auth-field{margin-bottom:10px}
.auth-submit-sm{width:100%; justify-content:center; margin-top:2px}
.acct-sep{height:1px; background:var(--line-soft); margin:16px 0 12px}
.acct-logout{width:100%; justify-content:center; color:var(--danger); border-color:oklch(85% 0.06 25)}
.acct-logout:hover{background:var(--danger-bg); color:var(--danger); border-color:oklch(85% 0.06 25)}
.dialog-emoji{font-size:26px; line-height:1; margin-bottom:10px}
.dialog-text{font-size:12.5px; color:var(--muted); margin-bottom:16px}
.dialog-btns{display:flex; gap:8px; justify-content:flex-end}
.dialog-btns .btn{padding:8px 16px; font-size:12.5px}
.user-chip{display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:4px 12px 4px 4px; cursor:pointer; transition:all var(--t-fast);
  font-size:12px; font-weight:600; color:var(--ink-soft)}
.user-chip:hover{border-color:var(--brand-line); background:var(--brand-soft); color:var(--brand-ink)}
.user-chip .uc-avatar{width:22px; height:22px; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex:none;
  font-style:normal}
.user-chip .uc-arrow{font-size:9px; color:var(--faint)}
@media (prefers-reduced-motion: no-preference){
  .auth-card{animation:auth-in 300ms var(--ease-out-expo)}
  @keyframes auth-in{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
  .ghost-row{animation:ghost-in 500ms var(--ease-out-expo) both}
  .ghost-row.g2{animation-delay:70ms}
  .ghost-row.g3{animation-delay:140ms}
  @keyframes ghost-in{from{opacity:0; transform:translateY(8px)}to{opacity:.55; transform:none}}
}
@media (max-width:900px){
  .ghost-stage{display:none}
  .auth-view::before{opacity:.6}
  .auth-card{padding:24px 20px 18px}
}

/* ============ 管理员 · 用户管理 ============ */
.admin-view{position:fixed; inset:0; z-index:800; display:flex; flex-direction:column;
  background:var(--bg); overflow:auto}
.admin-top{display:flex; align-items:center; gap:12px; padding:12px 18px;
  border-bottom:1px solid var(--line); background:linear-gradient(180deg, var(--surface-2), var(--surface))}
.admin-title{font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--ink)}
.admin-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:16px 18px; align-items:start}
.admin-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:14px 16px}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.panel-title{font-size:13px; font-weight:700; color:var(--ink)}
.panel-hint{font-size:11.5px; color:var(--faint); margin-bottom:10px}
.admin-form{display:flex; flex-direction:column; gap:10px; margin-bottom:12px; padding:12px;
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--radius-md)}
.admin-form .auth-field{margin-bottom:0}
.form-btns{display:flex; gap:8px; justify-content:flex-end}
.admin-list{display:flex; flex-direction:column}
.admin-row{display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line-soft)}
.admin-row:last-child{border-bottom:none}
.ar-main{flex:1; min-width:0}
.ar-line{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.ar-name{font-weight:700; font-size:13px; color:var(--ink)}
.ar-me{font-size:11px; color:var(--brand-ink); font-weight:600}
.ar-sub{font-size:11px; color:var(--faint); margin-top:2px}
.ar-ops{display:flex; gap:6px; flex:none}
.ar-ops .mini{display:inline-flex; align-items:center; font-size:11px; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); padding:3px 9px; border-radius:7px; cursor:pointer;
  transition:all var(--t-fast)}
.ar-ops .mini:hover{color:var(--brand-ink); border-color:var(--brand-line); background:var(--brand-soft)}
.ar-ops .mini.danger:hover{color:var(--danger); border-color:oklch(85% 0.06 25); background:var(--danger-bg)}
.admin-loading{font-size:12px; color:var(--faint); padding:12px 2px}
.admin-empty{font-size:12.5px; color:var(--faint); padding:18px 2px; text-align:center}
.inv-code{border:none; background:var(--surface-2); font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:12.5px; font-weight:700; letter-spacing:.05em; color:var(--brand-ink); padding:2px 8px;
  border-radius:7px; cursor:pointer; transition:all var(--t-fast)}
.inv-code:hover{background:var(--brand-soft)}
.st-badge{font-size:10.5px; font-weight:700; border-radius:999px; padding:2px 9px; border:1px solid var(--line); flex:none}
.st-active{background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand-line)}
.st-used{background:var(--todo-bg); color:var(--muted)}
.st-expired{background:var(--danger-bg); color:var(--danger); border-color:oklch(85% 0.06 25)}
.admin-row.is-used{opacity:.62}
@media (max-width:900px){
  .admin-grid{grid-template-columns:1fr; padding:12px 14px}
  .admin-top{padding:10px 14px}
}