/* 事齐 SHIQI 视觉定调 v2 —— 拟物「象牙纸 + 深靛蓝 + 淡金」主方案
 * 规格来源：docs/design/handoff-20260805/README.md「Design Tokens」。
 * 本次只做象牙纸单主题（交接包没给暗色规格），旧的 prefers-color-scheme 暗色分支已移除。
 * 字体本地 woff2（GFW + PWA 要求禁外链）。
 */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --paper: #faf7f1;
  --surface: #fffefb;
  --surface-grad: linear-gradient(180deg, #fffefb 0%, #f8f5ee 100%);
  --sunken: #f2eee5;
  --line: #e6e1d6;
  --hair: #ece7dd;
  --ink: #22201d;
  --mist: #5c574f;
  --faint: #726c62;

  --blue: #1f3a5f;
  --blue-lit: #2e5a8a;
  --blue-soft: #e3eaf2;

  --berry: #b02b24;
  --berry-lit: #bd3229;
  --berry-soft: #f7e2df;

  --brush: #a8511f;
  --brush-lit: #b45c22;
  --brush-soft: #f7e5d6;

  --tan: #c8ab6d;
  --tan-lit: #e8d9ae;
  --tan-soft: #f9f2e0;

  --matcha: #2f6b58;
  --matcha-lit: #47907a;
  --matcha-soft: #e0ebe5;

  /* 小字可读性修正：同色相但更深，专给文字/11px 以下用（4.5:1 对比度） */
  --matcha-text: #2b6151;
  --tan-text: #8a6f2c;
  --brush-text: var(--brush);
  --berry-text: var(--berry);

  --sidebar-gradient: linear-gradient(178deg, #22344a 0%, #1a2939 52%, #14202d 100%);
  --gold-gradient: linear-gradient(160deg, #f2e6c4 0%, #e0cd9c 30%, #c8ab6d 52%, #d9c48f 68%, #ac8f52 100%);

  --r-card: 12px;
  --r-chip: 7px;
  --gap: 12px;
  --pad: 16px;

  /* 手机底栏的两段高度分开记：真实安全区由设备给，测试可覆写前者。 */
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-tab-height: 64px;
  --mobile-sheet-bottom: 0px;
  --mobile-sheet-max-height: 86vh;

  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* 拟物材质片段（README「材质片段」逐值照抄） */
  --sh-raised: inset 0 1px 0 rgba(255,255,255,0.72), 0 1px 1px rgba(43,38,36,0.1), 0 8px 18px -10px rgba(43,38,36,0.28);
  --sh-raised-hi: inset 0 1px 0 rgba(255,255,255,0.72), 0 2px 3px rgba(43,38,36,0.12), 0 16px 28px -12px rgba(43,38,36,0.38);
  --sh-carved: inset 0 2px 4px rgba(60,58,52,0.18), 0 1px 0 rgba(255,255,255,0.85);
  --carved-grad: linear-gradient(180deg, #f2efe6 0%, #fffefb 22%);
  --sh-btn-primary: inset 0 1px 0 rgba(255,255,255,0.32), 0 2px 0 #16293f, 0 6px 14px rgba(20,32,45,0.28);
  --text-emboss: 0 1px 0 rgba(255,255,255,0.65);
  --text-emboss-dark: 0 -1px 0 rgba(0,0,0,0.3);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

time, .num, .cal-daynum, .count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

a { color: var(--blue-lit); }

h1, h2, h3 { font-family: var(--sans); }

/* ---------- 严重度阶梯（signature 元素）：data-sev 0-4，见 README「严重度阶梯」 ---------- */

[data-sev="0"] { --sev: var(--faint); --sev-lit: #9d968c; --sev-text: var(--faint); --sev-soft: var(--sunken); --sev-fill: 0%; }
[data-sev="1"] { --sev: var(--matcha); --sev-lit: var(--matcha-lit); --sev-text: var(--matcha-text); --sev-soft: var(--matcha-soft); --sev-fill: 20%; }
[data-sev="2"] { --sev: var(--tan); --sev-lit: var(--tan-lit); --sev-text: var(--tan-text); --sev-soft: var(--tan-soft); --sev-fill: 50%; }
[data-sev="3"] { --sev: var(--brush); --sev-lit: var(--brush-lit); --sev-text: var(--brush-text); --sev-soft: var(--brush-soft); --sev-fill: 78%; }
[data-sev="4"] { --sev: var(--berry); --sev-lit: var(--berry-lit); --sev-text: var(--berry-text); --sev-soft: var(--berry-soft); --sev-fill: 100%; }

/* ---------- 基础控件：按钮 / 输入框（拟物材质，login/register 也复用这套） ---------- */

button { font: inherit; }

button.primary {
  padding: 11px 18px;
  font-weight: 600;
  color: #fff;
  text-shadow: var(--text-emboss-dark);
  background: linear-gradient(180deg, var(--blue-lit), var(--blue));
  border: none;
  border-radius: var(--r-chip);
  box-shadow: var(--sh-btn-primary);
  cursor: pointer;
  transition: transform 0.1s ease;
}
button.primary:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.32);
}
button.primary:disabled { opacity: 0.55; cursor: default; }

button.ghost {
  padding: 8px 13px;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface-grad);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  box-shadow: var(--sh-raised);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
button.ghost:hover { box-shadow: var(--sh-raised-hi); transform: translateY(-1px); }
button.ghost[aria-pressed="true"] {
  color: var(--blue);
  border-color: var(--blue-soft);
  background: var(--blue-soft);
  box-shadow: var(--sh-carved);
}

input[type="text"], input[type="email"], input[type="password"], select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--carved-grad);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  box-shadow: var(--sh-carved);
}

.capture input:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--blue-lit);
  outline-offset: 1px;
}

/* ---------- 骨架（1.11.0 工作台）----------
 * 桌面：侧栏 252 / 主区弹性 / 详情 356 三栏；设置页收成两栏。
 * 手机：主区占满，侧栏变左侧抽屉（☰ 打开），底部四个 tab。
 * 纪律：手机兜底写在前、桌面 @media 写在后；两套互斥的定位各自进各自的媒体查询。 */

[hidden] { display: none !important; }

.app {
  min-height: 100vh;
  padding-bottom: calc(var(--mobile-tab-height) + var(--mobile-safe-bottom) + 16px);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

main { min-width: 0; }

@media (min-width: 900px) {
  .app {
    display: grid;
    grid-template-columns: 252px minmax(430px, 1fr) 356px;
    padding-bottom: 0;
    height: 100vh;
    overflow: hidden;
    box-shadow: inset 0 0 90px rgba(122, 96, 70, 0.13);
  }
  .app.settings-mode { grid-template-columns: 252px minmax(430px, 1fr); }
  main {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--paper);
    position: relative;
  }
  /* 主区纸张细横纹 + 左缘内阴影 */
  main::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    background: repeating-linear-gradient(0deg, rgba(60,58,52,0.035) 0 1px, transparent 1px 5px);
  }
  main::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 14px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(90deg, rgba(60,58,52,0.09), transparent);
  }
  main > * { position: relative; z-index: 1; }
  .detail {
    grid-column: 3;
    grid-row: 1 / -1;
    min-height: 0;
  }
}

/* ---------- 侧栏：皮面 + 烫金品牌 + 搜索 + 智能清单 + 我的清单 + 案件 + 负荷 + 连接 ----------
 * 材质（皮面纹理、右缘虚线、凹陷选中态）是品牌语言，桌面和手机抽屉共用一份；
 * 只有「怎么摆」分两套。纹理画在背景层上（不再用绝对定位的子节点），侧栏能滚。 */

.side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 12px 14px;
  color: #d6dbe2;
  background:
    repeating-linear-gradient(180deg, rgba(247,242,231,0.2) 0 3px, transparent 3px 6px) right 6px top 10px / 1px calc(100% - 20px) no-repeat,
    repeating-linear-gradient(96deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(4deg, rgba(0,0,0,0.025) 0 1px, transparent 1px 4px),
    var(--sidebar-gradient);
  box-shadow: inset -9px 0 14px -10px rgba(0,0,0,0.55), 2px 0 0 rgba(0,0,0,0.18);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.16) transparent;
}
.side-texture, .side-edge { display: none; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.35);
  box-shadow: 0 1px 0 rgba(255,255,255,0.07);
}
.brand .logo {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 5px rgba(0,0,0,0.32);
}
.brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #e6d6a8;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-date { margin-left: auto; font-size: 11px; color: #8a97a6; }

/* 侧栏里的键帽：暗底版 */
.side kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  font-family: var(--mono);
  font-size: 10px;
  color: #aab4c0;
  line-height: 1;
}

.side-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(0,0,0,0.4);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(0,0,0,0.26), rgba(0,0,0,0.14));
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.07);
  color: #8a97a6;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: text;
  transition: color 120ms ease;
}
.side-search:hover { color: #d6dbe2; }
.side-search .label { flex: 1; }

.ic { display: inline-grid; place-items: center; flex: 0 0 auto; }
.ic svg { display: block; }

.side-group, .sec-body { display: flex; flex-direction: column; gap: 1px; }

.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #c9d0d9;
  font-size: 13.5px;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0,0,0,0.45);
  transition: background 120ms ease, color 120ms ease;
}
.side-item .ic { width: 20px; color: #8a97a6; }
.side-item .label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item .n {
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: #8a97a6;
}
.side-item .n.hot:not(:empty) { color: #f2a59e; font-weight: 700; }
.side-item:hover { background: rgba(255,255,255,0.06); color: #eef1f5; }
.side-item[aria-current="page"] {
  color: #faf7f1;
  font-weight: 600;
  border-color: rgba(0,0,0,0.4);
  background: linear-gradient(180deg, rgba(0,0,0,0.34), rgba(0,0,0,0.2));
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.09);
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
.side-item[aria-current="page"] .ic { color: var(--tan-lit); }
.side-item[aria-current="page"] .n { color: #d6dbe2; }

/* 小节：我的清单 / 案件（可折叠，折叠态记在本机） */
.side-sec { display: flex; flex-direction: column; gap: 2px; }
.sec-head { display: flex; align-items: center; gap: 4px; padding: 0 2px 0 4px; }
.sec-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: #8a97a6;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  cursor: pointer;
}
.sec-toggle:hover { color: #d6dbe2; }
.chev svg { width: 12px; height: 12px; transition: transform 150ms ease; transform: rotate(90deg); }
.side-sec.collapsed .chev svg { transform: none; }
.side-sec.collapsed > :not(.sec-head) { display: none; }
.sec-extra { font-family: var(--mono); font-size: 11px; color: #6f7d8d; }
.side-add {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #8a97a6;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.side-add svg { width: 15px; height: 15px; }
.side-add:hover { color: var(--tan-lit); background: rgba(255,255,255,0.06); }

.swatch {
  display: block;
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  margin: 0 5px;
  border-radius: 3px;
  background: var(--c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 1px rgba(0,0,0,0.3);
}
.case-bar {
  display: block;
  width: 4px;
  height: 16px;
  flex: 0 0 4px;
  margin: 0 7px 0 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sev-lit), var(--sev));
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.side-item.case[data-sev="0"] .case-bar { background: rgba(255,255,255,0.18); }
.side-more {
  padding: 4px 10px 4px 40px;
  border: 0;
  background: none;
  color: #8a97a6;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.side-more:hover { color: #d6dbe2; }
.sec-empty { padding: 2px 10px 6px 12px; font-size: 12px; line-height: 1.55; color: #6f7d8d; }

.side-new { display: flex; flex-direction: column; gap: 4px; padding: 2px 4px 4px; }
.side input.side-new-input {
  width: 100%;
  padding: 7px 9px;
  font-size: 13px;
  color: #eef1f5;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(0,0,0,0.45);
  border-radius: 7px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
.side input.side-new-input::placeholder { color: #6f7d8d; }
.side-new-msg { font-size: 11.5px; color: #f2a59e; }
.side-new-msg:empty { display: none; }

.side-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 -6px;
  padding: 0 6px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.16) transparent;
}

/* 未完成负荷：5 级堆叠条 + 图例 */
.side-load {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 12px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.26), rgba(0,0,0,0.15));
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.07);
}
.load-head { display: flex; align-items: baseline; gap: 7px; }
.load-head .k { font-size: 11.5px; letter-spacing: 0.06em; color: #8a97a6; }
.load-head .total { font-size: 18px; font-weight: 700; color: #faf7f1; text-shadow: 0 1px 1px rgba(0,0,0,0.5); }
.load-bar {
  display: flex;
  gap: 2px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.08);
}
.load-bar span { min-width: 4px; background: linear-gradient(180deg, var(--sev-lit), var(--sev)); }
.load-bar span[data-sev="0"] { background: rgba(255,255,255,0.16); }
.load-legend { display: flex; flex-wrap: wrap; gap: 4px 11px; font-size: 11px; color: #aab4c0; }
.load-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.load-legend .lg i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sev-lit), var(--sev));
}
.load-legend .lg.none { color: #6f7d8d; }

/* 连接状态：正常一盏绿灯，断了红灯 + 红字，点进设置 */
.side-conns { display: flex; flex-direction: column; gap: 4px; }
.side-conns:empty { display: none; }
.conn-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #c9d0d9;
  font-size: 12.5px;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 1px 3px rgba(0,0,0,0.3);
}
.conn-status img {
  display: block;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.4);
}
.conn-status .label { flex: 1; min-width: 0; }
.conn-status .light {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8fdcbf, #2f8a6c);
  box-shadow: 0 0 6px rgba(71,144,122,0.8);
}
.conn-status.down { color: #f2a59e; }
.conn-status.down .light {
  background: radial-gradient(circle at 35% 30%, #f29a92, var(--berry));
  box-shadow: 0 0 6px rgba(176,43,36,0.85);
}
.conn-status:hover { color: #eef1f5; }

.side-backdrop, .tabbar { display: none; }

@media (max-width: 899px) {
  /* 抽屉：关着时 visibility:hidden，键盘 Tab 不会走进看不见的侧栏 */
  .side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 81;
    width: min(300px, 86vw);
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(14px + var(--mobile-safe-bottom));
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform 220ms ease, visibility 0s linear 220ms;
  }
  .side.open {
    transform: none;
    visibility: visible;
    transition: transform 220ms ease, visibility 0s;
  }
  .side-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(20,18,15,0.46);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .side-backdrop.open { opacity: 1; pointer-events: auto; }
  body.drawer-open { overflow: hidden; }
  /* 抽屉里整栏一起滚（底栏已有设置），不再套一层内滚动 */
  .side-scroll { flex: 0 0 auto; overflow: visible; }
  .side-item { min-height: 44px; }
  .side-search { min-height: 44px; }
  .sec-toggle, .conn-status { min-height: 40px; }
  .side-search kbd { display: none; }
  .side-add { width: 40px; height: 40px; }

  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    padding-bottom: var(--mobile-safe-bottom);
    background: rgba(255,254,251,0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -1px 0 rgba(255,255,255,0.8);
  }
  .tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--mobile-tab-height);
    font-size: 10.5px;
    color: var(--mist);
    text-decoration: none;
  }
  .tabbar a .ic svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--blue); font-weight: 600; }
}

@media (min-width: 900px) {
  .side {
    grid-column: 1;
    grid-row: 1 / -1;
    height: 100%;
    min-height: 0;
  }
}

/* ---------- 主区：页头一条 + 滚动体 + 快捷键条 ---------- */

.view-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px 6px;
  background: rgba(250,247,241,0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.view-body { padding: 14px 14px 24px; }

@media (min-width: 900px) {
  .view-header {
    position: relative;
    flex: 0 0 auto;
    padding: 18px 28px 15px;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(255,255,255,0.8);
  }
  .view-body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 28px 40px;
  }
  .settings-mode .view-body { max-width: 720px; padding: 22px 26px 40px; }
}

.view-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}
.head-titles { display: flex; flex-direction: column; min-width: 0; }
.view-head h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.view-head .sub {
  font-size: 11.5px;
  color: var(--mist);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.view-head .spacer { flex: 1; }

.head-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--mist);
  cursor: pointer;
}
.head-btn:active { background: var(--sunken); }
.head-btn .ic svg { width: 22px; height: 22px; }

.head-link {
  flex: 0 0 auto;
  padding: 6px 11px;
  border: 1px solid #d3cdc0;
  border-radius: 9px;
  background: linear-gradient(180deg, #fffefb, #f0ece2);
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: var(--text-emboss);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 0 #d3cdc0, 0 2px 4px rgba(43,38,36,0.14);
}

/* 今日概况：一条凹槽里三格（待办 / 逾期 / 完成度），以前是三张大卡 + 进度条 */
.head-stats {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: linear-gradient(180deg, #eeeae1, #f5f2e9);
  box-shadow: inset 0 2px 4px rgba(60,58,52,0.22), 0 1px 0 rgba(255,255,255,0.85);
}
.hs { display: flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 8px; white-space: nowrap; }
.hs .n { font-size: 15px; font-weight: 700; color: var(--ink); }
.hs .k { font-size: 11.5px; color: var(--mist); }
.hs.hot .n, .hs.hot .k { color: var(--berry); }
.hs[data-stat="done"] { align-items: center; }
.mini-track {
  display: block;
  width: 44px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(180deg, #e2ddd1, #ece8de);
  box-shadow: inset 0 1px 2px rgba(60,58,52,0.3);
}
.mini-track .fill { display: block; height: 100%; background: linear-gradient(180deg, var(--matcha-lit), var(--matcha)); }

@media (max-width: 899px) {
  /* 手机页头只留「逾期 N」这一格（有逾期才出现），别的进侧栏 */
  .head-stats { background: none; box-shadow: none; padding: 0; }
  .hs:not(.hot) { display: none; }
  .hs { padding: 4px 6px; }
}
@media (min-width: 900px) {
  .view-head { gap: 12px; }
  .head-btn { display: none; }
  .head-titles { flex-direction: row; align-items: baseline; gap: 12px; }
  .view-head h1 { font-size: 24px; text-shadow: 0 1px 0 rgba(255,255,255,0.9); }
  .view-head .sub { font-size: 12.5px; }
}

/* 分段控件（日历的月 / 周切换还在用） */
.scope-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  background: linear-gradient(180deg, #eeeae1, #f5f2e9);
  box-shadow: inset 0 2px 4px rgba(60,58,52,0.32), 0 1px 0 rgba(255,255,255,0.85);
}

/* 键帽（快捷键条 / 搜索 / 快捷键表） */
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid #dcd6c9;
  border-radius: 5px;
  background: linear-gradient(180deg, #fffefb, #f0ece2);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1;
  color: var(--mist);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 0 #d3cdc0;
}

/* ---------- 快录条：平时一行，聚焦或有字时露出 chip 与解析预览 ---------- */

.capture-wrap { margin: 0 0 18px; }
.capture { display: flex; gap: 8px; }
.capture input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  font: inherit;
  color: var(--ink);
  background: linear-gradient(180deg, #f8f5ed 0%, #fffefb 22%);
  border: 1px solid #dcd6c9;
  border-radius: 10px;
  outline: none;
  box-shadow: inset 0 2px 5px rgba(60,58,52,0.26), 0 1px 0 rgba(255,255,255,0.9);
  transition: box-shadow 140ms ease, border-color 140ms ease;
}
.capture input:focus,
.capture input:focus-visible {
  border-color: var(--blue);
  outline: none;
  box-shadow: inset 0 2px 5px rgba(60,58,52,0.2), 0 0 0 3px rgba(31,58,95,0.24);
}
.capture button.primary {
  padding: 11px 20px;
  font: inherit;
  font-weight: 700;
  color: #fbfaf6;
  background: linear-gradient(180deg, #2e5a8a 0%, #1f3a5f 100%);
  border: 1px solid #17304f;
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 0 #16293f, 0 5px 12px rgba(43,38,36,0.24);
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.capture button.primary:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.32), 0 0 0 #16293f;
}
.capture-chips {
  display: none;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  flex-wrap: wrap;
}
.capture-wrap.active .capture-chips { display: flex; }
.capture-chips .chip {
  padding: 5px 11px;
  border: 1px solid #d3cdc0;
  border-radius: 9px;
  background: linear-gradient(180deg, #fffefb, #f0ece2);
  font: inherit;
  font-size: 11.5px;
  color: var(--mist);
  cursor: pointer;
  text-shadow: var(--text-emboss);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 0 #d3cdc0, 0 2px 4px rgba(43,38,36,0.14);
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.capture-chips .chip:active { transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(60,58,52,0.3); }
.capture-chips .spacer { flex: 1; }
.hint-text { font-size: 11.5px; color: var(--faint); text-shadow: var(--text-emboss); }
.hint-text.on { color: var(--blue); }

/* 1.12.0 快录高亮：输入框上盖一层逐字对齐的镜像（同字体 / 内边距 / 描边宽度），
   镜像的字是透明的，只有命中段的底色透出来；点击穿透给下面的输入框。 */
.capture-field { position: relative; display: flex; flex: 1; min-width: 0; }
.capture-mirror {
  position: absolute;
  inset: 0;
  padding: 11px 14px;
  border: 1px solid transparent;
  font: inherit;
  color: transparent;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
}
.capture-mirror mark {
  color: transparent;
  border-radius: 3px;
  background: rgba(46,90,138,0.17);
}
.capture-mirror mark[data-kind="list"] { background: rgba(47,107,88,0.18); }
.capture-mirror mark[data-kind="important"] { background: rgba(176,43,36,0.15); }
/* 行尾余量：Safari 的输入框在行尾多留 2px 光标位，能比镜像多滚 2px，长句打到行尾底色就右偏。
   镜像多留几 px，滚动始终由输入框说了算（字透明，余量看不见）。 */
.capture-mirror-text { padding-right: 6px; }

/* ---------- 分组：可折叠的组头 ---------- */

.groups { display: flex; flex-direction: column; gap: 18px; }

.group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 9px;
  font-size: 12.5px;
  font-weight: 400;
}
.group-head .line {
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(60,58,52,0.16), rgba(255,255,255,0.9));
}
.group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: -6px;
  padding: 3px 7px 3px 4px;
  border: 0;
  border-radius: 7px;
  background: none;
  font: inherit;
  color: var(--mist);
  cursor: pointer;
}
.group-toggle:hover { background: rgba(60,58,52,0.06); }
.group-toggle .chev { color: var(--faint); }
.group.collapsed .chev svg { transform: none; }
.group-toggle .dot {
  display: block;
  width: 6px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sev), var(--sev-lit) 55%, var(--sev));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 2px rgba(43,38,36,0.28);
}
.glabel { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--sev-text); text-shadow: var(--text-emboss); }
.group:is([data-sev="0"], [data-sev="1"]) .glabel { color: var(--mist); }
.gsub { font-size: 11.5px; color: var(--faint); }
.group-toggle .count { font-size: 12px; color: var(--faint); }
.group.collapsed .tasklist { display: none; }
.group.collapsed .group-head { margin-bottom: 0; }
/* 逾期 / 搁置组头右侧的「全挪到今天」（1.12.0）：只挪本地条目，可撤销 */
.group-bulk {
  flex: 0 0 auto;
  /* 负外边距：胶囊比组头文字行高一点，不让它把这个组头撑得比别的组头高（下面整列会跟着错位） */
  margin: -2px 0;
  padding: 3px 10px;
  border: 1px solid #d3cdc0;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffefb, #f0ece2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--blue);
  cursor: pointer;
  text-shadow: var(--text-emboss);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 0 #d3cdc0, 0 2px 4px rgba(43,38,36,0.14);
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.group-bulk:active { transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(60,58,52,0.3); }
.group-bulk:disabled { opacity: 0.55; cursor: default; }

.empty {
  padding: 34px 14px;
  color: var(--faint);
  font-size: 13px;
  text-align: center;
  text-shadow: var(--text-emboss);
}
.empty p { margin: 0 0 10px; }
.empty-link { color: var(--blue-lit); }

/* ---------- 任务行：左缘严重度色条 + 底部填充下划线（两路信号，品牌签名元素）----------
 * 1.11.0 起全走类：:hover / .selected 交给 CSS，不再 JS 重算整串行内样式。
 * 桌面一行（标题 · 右侧元信息），手机两行（标题 / 元信息）。 */

.tasklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px 10px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fffefb 0%, #fdfaf4 100%);
  box-shadow: var(--sh-raised);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease, opacity 200ms ease;
}
.task.overdue { border-color: rgba(176,43,36,0.4); }
.task.selected {
  border-color: var(--blue);
  outline: 2px solid rgba(31,58,95,0.3);
  outline-offset: -1px;
}
.task.done {
  opacity: 0.6;
  background: linear-gradient(180deg, #f5f2e9, #faf7f1);
  box-shadow: inset 0 1px 3px rgba(60,58,52,0.24);
}
.task.done .task-title { text-decoration: line-through; }
.task.dragging { opacity: 0.4; }

.sev-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(90deg, var(--sev) 0%, var(--sev-lit) 55%, var(--sev) 100%);
  box-shadow: inset -1px 0 2px rgba(0,0,0,0.22);
}
.sev-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: var(--sev-fill);
  background: linear-gradient(180deg, var(--sev-lit), var(--sev));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

.task .check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #dcd6c9;
  border-radius: 50%;
  background: linear-gradient(180deg, #f2efe6, #fffefb);
  color: transparent;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 2px 3px rgba(60,58,52,0.2), 0 1px 0 rgba(255,255,255,0.85);
  transition: all 150ms ease;
}
.task .check[aria-pressed="true"] {
  border-color: #23543f;
  background: linear-gradient(180deg, var(--matcha-lit), var(--matcha));
  color: #fbfaf6;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(43,38,36,0.3);
}
.task .check:disabled { cursor: default; opacity: 0.5; }

.task-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.task-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  word-break: break-word;
  text-shadow: var(--text-emboss);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.task.emph .task-title { font-weight: 600; }
.task-meta { flex: 0 1 auto; min-width: 0; max-width: 46%; display: flex; align-items: center; gap: 8px; }
.badge {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--sev-lit), var(--sev));
  color: #fbfaf6;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(43,38,36,0.24);
}
.task-time {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  white-space: nowrap;
  color: var(--mist);
}
:is(.task, .mark):is([data-sev="2"], [data-sev="3"], [data-sev="4"]) .task-time { color: var(--sev-text); }
.task.emph .task-time { font-weight: 500; }

.tag {
  min-width: 0;
  max-width: 140px;
  font-size: 11.5px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag.ro { color: var(--faint); }
/* 挂了案件的本地任务：行尾一枚浅底小签（案名去掉案号、截短） */
.tag.case-tag {
  padding: 0 6px;
  border-radius: 5px;
  background: rgba(60,58,52,0.07);
  box-shadow: inset 0 1px 1px rgba(60,58,52,0.12);
  font-size: 11px;
  line-height: 18px;
  color: var(--mist);
}

.task-actions { display: flex; gap: 6px; align-items: center; }
.task-actions button {
  padding: 5px 10px;
  border: 1px solid #d3cdc0;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffefb, #f0ece2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--mist);
  cursor: pointer;
  text-shadow: var(--text-emboss);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 0 #d3cdc0, 0 2px 4px rgba(43,38,36,0.14);
}
.task-actions button:hover { color: var(--blue); }

.src-icon { width: 15px; height: 15px; border-radius: 4px; vertical-align: -3px; }
.task .src-icon {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  cursor: help;
  box-shadow: 0 1px 2px rgba(43,38,36,0.26);
}
.task .star {
  flex: 0 0 auto;
  padding: 1px 3px;
  border: none;
  background: none;
  font-size: 16px;
  line-height: 1;
  color: #98907e;
  cursor: pointer;
  transition: color 140ms ease;
}
.task .star[aria-pressed="true"] { color: #b08c39; text-shadow: 0 1px 1px rgba(43,38,36,0.28); }
.task .star:disabled { cursor: default; }
.task-grip { flex: 0 0 10px; font-size: 11px; line-height: 1; color: transparent; cursor: grab; transition: color 130ms ease; }

/* 紧凑行（四象限格子里）：标题与元信息上下两行 */
.task.compact { align-items: flex-start; gap: 9px; padding: 9px 10px 9px 15px; border-radius: 10px; }
.task.compact .check { flex-basis: 18px; width: 18px; height: 18px; margin-top: 1px; }
.task.compact .task-main { flex-direction: column; align-items: stretch; gap: 2px; }
.task.compact .task-title { font-size: 13px; }
.task.compact .task-meta { max-width: none; }
.task.compact .task-time { font-size: 10.5px; }
.task.compact .star { margin-top: 1px; }

/* 期限 · 开庭：只读，虚线框，整行是去日历那天的链接 */
.mark { list-style: none; }
.mark-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 18px;
  border: 1px dashed rgba(60,58,52,0.24);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,254,251,0.7), rgba(242,238,229,0.5));
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: background 140ms ease, border-color 140ms ease;
}
.mark-row:hover { background: var(--surface); border-color: rgba(60,58,52,0.36); }
.mark .sev-bar { width: 4px; }
.mark-kind {
  flex: 0 0 auto;
  padding: 1px 7px;
  border: 1px solid rgba(60,58,52,0.12);
  border-radius: 5px;
  background: var(--sev-soft);
  color: var(--sev-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.mark .task-title { font-size: 13.5px; color: var(--mist); text-shadow: none; }
.mark-go { color: var(--faint); }
.mark-go svg { width: 14px; height: 14px; }

@media (hover: hover) and (min-width: 900px) {
  .task:not(.done):hover { box-shadow: var(--sh-raised-hi); transform: translateY(-1px); }
  .task .check:hover { border-color: var(--matcha-lit); }
  .task:hover .task-grip { color: var(--faint); }
  /* 悬停快捷钮浮在右端、盖住元信息，不占行宽（以前它隐形但占位，把标题挤窄） */
  .task-actions {
    position: absolute;
    right: 40px;
    top: 50%;
    padding-left: 26px;
    background: linear-gradient(90deg, rgba(253,250,244,0), #fdfaf4 22px);
    opacity: 0;
    pointer-events: none;
    transform: translate(8px, -50%);
    transition: opacity 150ms ease, transform 150ms ease;
  }
  .task:hover .task-actions { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
}
@media (hover: none), (max-width: 899px) {
  .task-actions { display: none; }
}

@media (max-width: 899px) {
  .task { align-items: flex-start; padding: 11px 12px 11px 17px; }
  .task .check { margin-top: 1px; }
  .task-main { flex-direction: column; align-items: stretch; gap: 3px; }
  .task-title { font-size: 15px; }
  .task-meta { max-width: none; flex-wrap: wrap; row-gap: 2px; }
  .mark .task-main { gap: 1px; }
}

/* 四象限格内的紧凑任务列表间距（原型 grp.items 容器 gap: 6px） */
.quad-cell .tasklist { gap: 6px; }
.quad-cell .empty { border: none; background: none; }

/* ---------- 四象限（格子本体/表头/编号徽章的视觉由 quadrant.js 内联给出，原型逐值） ---------- */

/* 四象限视图在原型里是「撑满主区剩余高度的 2×2」，不是随内容长高的普通网格：
   两行等分，格内各自滚动。所以这一层要吃掉 view-body 的全部高度。 */
.quad-wrap { display: flex; flex-direction: column; min-height: 0; }
.quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 900px) {
  .quad-wrap { flex: 1; }
  .quad {
    grid-template-rows: 1fr 1fr;
    gap: 18px;
    height: 100%;
  }
  /* 四象限页的滚动交给每个格子内部，view-body 本身不滚 */
  .quad-page .view-body { overflow: hidden; display: flex; flex-direction: column; padding: 22px 26px 16px; }
}

.quad-cell { min-height: 0; }
.quad-body { flex: 1; min-height: 0; padding: 8px; overflow-y: auto; }

.case-group { margin-bottom: 6px; }
.case-group:last-child { margin-bottom: 0; }
.case-group-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 7px;
}
.case-group-head img {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(43,38,36,0.28);
}
.case-group-head .case-name {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--mist);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 四象限底部那行拖拽提示 */
.quad-hint {
  display: none;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  color: var(--faint);
}
@media (min-width: 900px) {
  .quad-hint { display: flex; padding: 0 26px 14px; position: relative; flex: 0 0 auto; }
  .quad-hint .rule {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(180deg, rgba(60,58,52,0.2), rgba(255,255,255,0.9));
  }
}

/* 移动端：2×2 缩略贴片选择器，桌面不用（桌面直接四格并排） */
.quad-tiles { display: none; }
@media (max-width: 899px) {
  .quad-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }
  .quad-tile {
    text-align: left;
    padding: 10px 12px;
    border-radius: var(--r-chip);
    background: var(--surface-grad);
    box-shadow: var(--sh-raised);
    border: 2px solid transparent;
    cursor: pointer;
    min-height: 52px;
  }
  .quad-tile.selected { border-color: var(--blue-lit); box-shadow: var(--sh-carved); }
  .quad-tile[data-q="q1"] .tile-n { color: var(--berry); }
  .tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
  .tile-title { font-size: 12.5px; font-weight: 700; }
  .tile-n { font-size: 17px; font-weight: 700; }
  .tile-hint { font-size: 10.5px; color: var(--mist); margin-top: 1px; }
}

/* ---------- 日历（格子/芯片/表头的视觉由 calendar.js 内联给出，原型逐值） ---------- */

.cal-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cal-bar .now { font-weight: 700; font-size: 15px; }
.cal-bar .spacer { display: none; }
.cal-steps { display: flex; gap: 5px; }
.cal-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-size: 11px;
  color: var(--mist);
}
.cal-legend > span { display: flex; align-items: center; gap: 6px; }

/* 移动端兜底排版（桌面段在下面的媒体查询里整体覆盖） */
.cal-scroll {
  max-height: 74vh;
  overflow-y: auto;
  border-radius: var(--r-card);
  box-shadow: var(--sh-raised);
}

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(88px, auto);
  background: var(--line);
  gap: 1px;
}

.dow-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.dow-row .dow, .grid .dow {
  background: var(--sidebar-gradient);
  padding: 8px 2px;
  text-align: center;
  font-size: 11px;
  color: #b7c3d3;
}

.cell {
  background: var(--surface);
  min-height: 88px;
  padding: 5px 5px 6px;
  font-size: 11px;
}
.cell.out { background: var(--sunken); color: var(--faint); box-shadow: inset 0 1px 3px rgba(60,58,52,0.1); }
.cell.today { box-shadow: inset 0 0 0 2px var(--blue-lit); }
.cell.selected { background: var(--blue-soft); }
.cell.today.selected { box-shadow: inset 0 0 0 2px var(--blue-lit); }

.cal-daynum { display: block; font-size: 12px; color: var(--mist); margin-bottom: 2px; }
.cell.today .cal-daynum { color: var(--blue); font-weight: 700; }

@media (min-width: 900px) {
  .cal-bar { gap: 12px; margin-bottom: 15px; flex-wrap: nowrap; }
  .cal-bar .spacer { display: block; flex: 1; }
  .cal-legend { margin-left: 0; margin-right: 6px; gap: 13px; font-size: 11.5px; }
  /* 日历页：网格吃满剩余高度，滚动发生在网格内部 */
  .cal-page .view-body { display: flex; flex-direction: column; overflow: hidden; padding: 22px 26px 24px; }
  /* 整块日历是一个「凹陷托盘」，格子浮在里面 */
  .cal-scroll {
    flex: 1;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(180deg, #e2ddd0, #ece8dc);
    box-shadow: inset 0 2px 6px rgba(60,58,52,0.4), 0 1px 0 rgba(255,255,255,0.9);
  }
  .dow-row {
    background: linear-gradient(180deg, #2b4159 0%, #22344a 48%, #182634 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.4);
  }
  .dow-row .dow {
    padding: 8px 0 7px;
    font-weight: 600;
    color: #d6dbe2;
    background: none;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    box-shadow: inset -1px 0 0 rgba(0,0,0,0.22), inset 1px 0 0 rgba(255,255,255,0.05);
  }
  .cal-scroll .grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: none;
    gap: 2px;
    padding: 2px;
    align-content: stretch;
  }
  .cal-scroll.week .grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  /* 格子自己不定字号（原型是从外壳继承 14px），格内芯片/日期各自显式定 */
  .cal-scroll .cell { background: none; min-height: 0; box-shadow: none; font-size: inherit; }
}

/* 移动端：色点代替文字芯片（390px 下 7 列文字芯片会溢出） */
.day-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.day-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sev); flex: 0 0 6px; }
.day-dots .dot.mark { background: none; border: 1.4px solid var(--berry); box-sizing: border-box; }
.day-dots .dot.mark.hearing { border-color: var(--blue-lit); }
.day-dots .more { font-size: 9px; color: var(--faint); line-height: 6px; }

.day-detail { display: none; }
@media (max-width: 899px) {
  .day-detail { display: block; margin-top: 16px; }
  /* 这几行是移动端日历「选中日期清单」的只读行，不走 taskRow()（里面还混了
     期限/开庭镜像条目），所以自带一套最小排版。 */
  .day-detail .task {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: linear-gradient(180deg, #fffefb 0%, #fdfaf4 100%);
    overflow: hidden;
    box-shadow: var(--sh-raised);
  }
  .day-detail .task.done { opacity: 0.6; }
  .day-detail .task.done .task-title { text-decoration: line-through; }
  .day-detail .task-body { flex: 1; min-width: 0; }
  .day-detail .task-title { font-size: 14px; line-height: 1.45; color: var(--ink); }
  .day-detail .task-meta { display: flex; gap: 8px; margin-top: 3px; font-size: 11.5px; color: var(--mist); }
  .day-detail .task-time { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .day-detail .check {
    background: var(--carved-grad);
    box-shadow: var(--sh-carved);
    border: 1px solid #dcd6c9;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-block;
  }
  .cell { cursor: pointer; }
}

/* ── 月视图跑道（runway）──────────────────────────────────────────────
   机制照抄案齐（见 calendar.js 的长注释）：周行是 7 列网格，行模板
   「日期数字 · 若干车道 · chip 堆」；日期格 grid-row:1/-1 占满整行当背景与
   拖拽命中面，长条 grid-column 横跨若干列浮在格子上面。
   一条 = 一个元素，所以连贯是布局保证的，不是逐格拼出来的。

   ⚠ 只在桌面渲染（calendar.js 里 mobile 走色点那一支），所以这里不套媒体查询。
   ⚠ .cell 的圆角/底色/阴影仍由 JS 内联逐值给出（原型口径），这里不许再定，
     否则两处打架。 */
.cal-weeks {
  --cal-lane-h: 21px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px;
  overflow-y: auto;
}
.cal-week {
  position: relative;
  flex: 1 0 auto;
  min-height: 86px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 2px;
}
/* 日期数字：车道的对齐锚。它是格子的兄弟节点（不再是后代），所以自己留出内边距。 */
.cal-weeks .cal-daynum { z-index: 1; margin: 0; padding: 6px 7px 3px; pointer-events: none; }

.cal-span {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0 3px 1px;
  padding: 2px 7px;
  font-size: 11px;
  line-height: 1.35;
  /* 拟物：一道内高光把长条从纸面上抬起来，外投影极浅——它是纸上的贴条，不是卡片 */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 1px -1px rgba(43,38,36,0.35);
  user-select: none;
  touch-action: none;
}
.cal-span:hover { z-index: 5; box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 2px 5px -2px rgba(43,38,36,0.45); }
.cal-span.dragging { opacity: 0.55; cursor: grabbing; }
.cal-span-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 左缘 2px 严重度细条（只在真起点那一段有，见 spanNode） */
.cal-span .sev-edge { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; pointer-events: none; }
/* 把手：热区 9px，静态刻痕常显——不显的话没人知道两端能拉。
   hover 只加长刻痕，不改宽度，免得推布局。 */
.cal-span .edge-handle {
  position: absolute; top: 0; bottom: 0; z-index: 3; width: 9px;
  cursor: ew-resize; touch-action: none;
}
.cal-span .edge-handle.left { left: 0; }
.cal-span .edge-handle.right { right: 0; }
.cal-span .edge-handle::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 2px; height: 9px; transform: translate(-50%, -50%);
  border-radius: 2px;
  background: rgba(43,38,36,0.34);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.55);
}
/* 左把手压在严重度细条上会打架——起点那头的刻痕往右让 2px */
.cal-span .edge-handle.left::before { left: calc(50% + 2px); }
.cal-span .edge-handle:hover::before { height: 13px; background: rgba(43,38,36,0.55); }
.cal-span.done .edge-handle { display: none; }

.cal-more {
  z-index: 2;
  margin: 0 3px;
  padding: 1px 4px;
  border: none;
  border-radius: 4px;
  background: rgba(43,38,36,0.06);
  color: var(--mist);
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
}
.cal-more:hover { background: rgba(43,38,36,0.12); color: var(--ink); }
.cal-day-chips { z-index: 2; min-width: 0; padding: 1px 4px 3px; align-self: end; }

/* 拖动进行中：全局掐掉文本选中，否则光标扫过标题会拉出蓝选区盖住落点提示。 */
body.cal-dragging { user-select: none; cursor: grabbing; }
/* 落点提示。此前 clearDropTargets() 一直在加这个 class 却没人给它样式——
   拖的时候看不出会落到哪一格，这次一并补上。
   !important 是必需的：格子的阴影是 JS 内联逐值给的（原型口径），不加压不住。 */
.cell.drop-target { box-shadow: inset 0 0 0 2px var(--blue-lit) !important; }

/* 芯片的配色/圆角/字号全部由 calendar.js 的 taskChipEl()/markChipEl() 内联给出
   （原型逐值）；这里只留一个兜底的块级排版。 */
.chip {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 周视图：单列，每行左侧日期 + 右侧芯片横排 */
.week .grid { grid-template-columns: 1fr; grid-auto-rows: auto; background: var(--surface); }
.week .cell { min-height: 54px; display: flex; gap: 10px; align-items: flex-start; padding: 9px; border-bottom: 1px solid var(--hair); }
.week .cell:last-child { border-bottom: none; }
.week .cell .cal-daynum { flex: 0 0 78px; margin: 0; font-family: var(--mono); }
.week .cell.today .cal-daynum { color: var(--blue); font-weight: 700; }
.week .cell .items { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; }
.week .cell .items .chip { width: auto; margin-bottom: 0; }
@media (min-width: 900px) {
  .cal-scroll.week .cell { border-bottom: none; padding: 11px 13px; }
  .cal-scroll.week .cell .cal-daynum { flex-basis: 86px; }
}

/* ---------- 设置（卡片外壳/按钮由 settings.js 内联给出，原型逐值） ---------- */

.settings-wrap { display: flex; flex-direction: column; gap: 16px; }

.settings-card h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.settings-card p.desc { margin: 0 0 14px; font-size: 12.5px; color: var(--mist); line-height: 1.7; }
.settings-card .spacer { flex: 1; }

/* 账号卡 */
.account-row { display: flex; align-items: center; gap: 12px; }
.avatar-tile {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--gold-gradient);
  color: #14202d;
  font-size: 15px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 5px rgba(34,32,29,0.22);
}
.account-info { flex: 1; min-width: 0; }
.account-info .name { font-size: 15px; font-weight: 600; color: var(--ink); }
.account-info .account { font-family: var(--mono); font-size: 12px; color: var(--faint); }

/* 连接器卡 */
.connector-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.connector-head img {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(34,32,29,0.22);
}
.connector-head .status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  background: linear-gradient(180deg, #e0ebe5, #d3e3da);
  font-size: 11px;
  font-weight: 600;
  color: var(--matcha-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.connector-head .status-pill .light {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #5fae94, #2f6b58);
}
.connector-head .status-pill.down { background: linear-gradient(180deg, #f7e2df, #f2d3cf); color: var(--berry-text); }
.connector-head .status-pill.down .light { background: radial-gradient(circle at 34% 28%, #cf6a60, #b02b24); }
.connector-head .synced { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

/* 地址/token 两行：88px 标签列 + 弹性字段列 */
.conn-grid {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px 12px;
  align-items: center;
}
.conn-grid .k { font-size: 12px; color: var(--faint); }
/* 选择器要压过上面那条 input[type="text"]（属性选择器特异度 0-1-1），
   所以写成 input.conn-field 而不是光 .conn-field —— 否则 font:inherit 会把
   等宽字体和 12.5px 字号一起冲掉。 */
input.conn-field, .conn-field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcd6c9;
  border-radius: 9px;
  background: linear-gradient(180deg, #f2efe6 0%, #fffefb 22%);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--mist);
  box-shadow: var(--sh-carved);
  outline: none;
}
input.conn-field:focus { border-color: var(--blue); }

.conn-actions { display: flex; gap: 9px; margin-top: 16px; align-items: center; }
.conn-msg { align-self: center; font-size: 12px; color: var(--matcha-text); }
.conn-msg.bad { color: var(--berry-text); }

@media (max-width: 899px) {
  .account-row.has-pw {
    display: grid;
    grid-template-columns: 38px max-content max-content minmax(0, 1fr);
    align-items: center;
    gap: 10px 8px;
  }
  .account-row.has-pw .avatar-tile { grid-column: 1; grid-row: 1; }
  .account-row.has-pw .account-info {
    grid-column: 2 / -1;
    grid-row: 1;
    min-width: 0;
    margin-left: 4px;
  }
  .account-info .name,
  .account-info .account { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-row.has-pw > .pw-toggle { grid-column: 2; grid-row: 2; }
  .account-row.has-pw > .tok-toggle { grid-column: 3; grid-row: 2; }
  .account-row.has-pw > .spacer { display: none; }
  .account-row.has-pw > .logout-btn {
    grid-column: 2 / -1;
    grid-row: 3;
    justify-self: start;
  }

  .connector-head { flex-wrap: wrap; align-items: center; }
  .connector-head h2 { min-width: 0; }
  .connector-head .spacer { display: none; }
  .connector-head .synced {
    flex: 1 1 100%;
    min-width: 0;
    margin-left: 42px;
    overflow-wrap: anywhere;
  }
  .conn-actions { flex-wrap: wrap; }
  .conn-actions > .spacer { display: none; }
  .conn-actions > button { min-height: 40px; }
  .conn-actions > .conn-msg {
    flex: 1 1 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 359px) {
  .conn-grid { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .conn-grid .k:not(:first-child) { margin-top: 5px; }
}

/* 邀请码卡 */
.invites-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }

.codes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.codes li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: linear-gradient(180deg, #fffefb, #f8f5ee);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(34,32,29,0.07);
}
.codes li .spacer { flex: 1; }
.codes li .code-value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.codes li.used {
  background: linear-gradient(180deg, #f2eee5, #f6f2ea);
  box-shadow: inset 0 1px 2px rgba(60,58,52,0.14);
}
.codes li.used .code-value { color: #6a645a; text-decoration: line-through; }
.codes .status-pill {
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: linear-gradient(180deg, #f9f2e0, #f2e8cf);
  color: #7a6224;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.codes li.used .status-pill { background: #f2eee5; color: #6a645a; box-shadow: none; }

/* ---------- 应用下载卡（设置页末尾）---------- */
/* 复用邀请码那套「凹凸纸片」行样式，不另起一套材质——设置页里同层级的列表
   长得该一样，否则一眼就能看出是后补的。 */
.dl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: linear-gradient(180deg, #fffefb, #f8f5ee);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(34,32,29,0.07);
}
.dl-item .spacer { flex: 1; }
.dl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.dl-note { font-size: 11px; color: var(--mist); }
.dl-btn { text-decoration: none; white-space: nowrap; }
.dl-none { font-size: 11px; color: var(--faint); white-space: nowrap; }

/* ---------- 详情面板：「已手动归位 · 恢复自动」---------- */
/* 判断权归人（2026-08-07 产品原则）的退路行。压在象限信息卡里，
   只在这条被人动过时出现，所以不占默认版面——像素闸门的对比场景没有覆盖态。 */
.ovr-note { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ovr-tag {
  font-size: 10.5px;
  color: var(--brush);
  background: var(--brush-soft, #f7e5d6);
  border-radius: 20px;
  padding: 2px 7px;
  white-space: nowrap;
}
.ovr-reset { font-size: 10.5px; padding: 2px 7px; }

/* ---------- 改期浮层：起 / 止 / 时 三字段 ---------- */
/* 挤在紧急度框那一条里，所以字号压到 11px、允许换行；不改框本身的高度与边框，
   对既有版面扰动最小（像素闸门的对比场景不含展开态）。 */
.resched-form { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; width: 100%; }
.resched-form input { font-size: 11px; padding: 2px 4px; }
.resched-form .resched-msg { flex-basis: 100%; }

/* ---------- 日历图例（1.6.0 起要列清单/连接器，会变长）---------- */
/* 溢出换行而不是省略——被省掉的那几项恰恰是人要查的。 */
.cal-legend { flex-wrap: wrap; row-gap: 4px; }
.cal-legend .lg-list, .cal-legend .lg-notion, .cal-legend .lg-anjian {
  display: inline-flex; align-items: center; gap: 4px;
}
/* 左缘严重度细条：底色管归属、它管「多急」，两个信号各占各的位置。 */
.chip .sev-edge { pointer-events: none; }

/* ---------- 右侧详情面板（桌面数值逐条照抄原型 <aside> panelShellStyle 及其内部） ---------- */

.detail {
  display: none;
  overflow-y: auto;
}
@media (min-width: 900px) {
  .detail {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #f6f2ea 0%, #faf7f1 30%);
    box-shadow: inset 9px 0 14px -10px rgba(60,58,52,0.5);
  }
}
.app.settings-mode .detail { display: none; }

.detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 100%;
  padding: 40px 32px;
  text-align: center;
}
.detail-empty .lines { display: flex; gap: 5px; align-items: flex-end; }
.detail-empty-text {
  font-size: 13px;
  color: var(--mist);
  line-height: 1.8;
  text-shadow: 0 1px 0 rgba(255,255,255,0.85);
}

.detail-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.85);
  flex: 0 0 auto;
}
.detail-more[disabled] { opacity: 0.45; cursor: default; }

.detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-title-row { display: flex; gap: 12px; align-items: flex-start; }
.detail-title-row .title {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
  text-shadow: 0 1px 0 rgba(255,255,255,0.85);
}

.info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- 1.12.0 详情：就地改标题 / 换清单 / 挂案件 / 改期快捷 ---------- */

.detail-title-row .title.editable {
  margin: -2px -6px;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: text;
  transition: background 130ms ease;
}
.detail-title-row .title.editable:hover { background: rgba(60,58,52,0.06); }
.detail-title-row .title-edit {
  flex: 1;
  min-width: 0;
  margin: -3px -7px;
  padding: 2px 6px;
  border: 1px solid var(--blue);
  border-radius: 6px;
  background: #fffefb;
  box-shadow: 0 0 0 3px rgba(31,58,95,0.18);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  resize: none;
  overflow: hidden;
  outline: none;
}

.urgency-stack { display: flex; flex-direction: column; gap: 8px; }
.shift-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.shift-k { margin-right: 2px; font-size: 11px; color: var(--faint); text-shadow: var(--text-emboss); }
.shift-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border: 1px solid #d3cdc0;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffefb, #f0ece2);
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  text-shadow: var(--text-emboss);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 0 #d3cdc0, 0 2px 4px rgba(43,38,36,0.14);
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.shift-btn kbd { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
.shift-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(60,58,52,0.3); }
.shift-btn[aria-pressed="true"] {
  color: var(--blue);
  border-color: #c9d5e3;
  background: var(--blue-soft);
  box-shadow: var(--sh-carved);
}

/* 清单 / 案件卡里的选择框：外观是一行字 + 右侧小三角，整行都能点 */
.pick { position: relative; display: flex; flex: 1; min-width: 0; }
.pick::after {
  content: '▾';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--faint);
  pointer-events: none;
}
.pick-select {
  width: 100%;
  min-width: 0;
  padding: 0 14px 0 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-overflow: ellipsis;
  cursor: pointer;
}
.info-card.case-card { grid-column: 1 / -1; }
.case-icon {
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(43,38,36,0.25);
}
.case-note { font-size: 11px; color: var(--brush-text); }

/* 备注：原型是只读 div，事齐要能改，用 textarea 顶上去——尺寸/内边距/描边/内阴影
   /字号/行高全部对齐原型那个 div，另外关掉 resize 手柄（div 本来就没有）。 */
.note-box {
  display: block;
  width: 100%;
  min-height: 78px;
  padding: 13px 14px;
  border: 1px solid #dcd6c9;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8f5ed 0%, #fffefb 18%);
  box-shadow: inset 0 2px 5px rgba(60,58,52,0.24), 0 1px 0 rgba(255,255,255,0.9);
  font-family: inherit;
  font-size: 13px;
  color: var(--mist);
  line-height: 1.75;
  resize: none;
  outline: none;
}
.note-box:focus { border-color: var(--blue); }

.subtasks-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.subtasks-progress {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, #eae6dc, #f2eee5);
  box-shadow: inset 0 2px 4px rgba(60,58,52,0.34), 0 1px 0 rgba(255,255,255,0.9);
  overflow: hidden;
}

.subtask-list { display: flex; flex-direction: column; gap: 3px; }
.subtask-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 130ms ease;
}
.subtask-row:hover { background: rgba(60,58,52,0.07); }
.subtask-row .sub-del {
  background: none;
  border: none;
  color: var(--faint);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 130ms ease;
}
.subtask-row:hover .sub-del { opacity: 1; }

.subtask-add {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 6px;
  color: var(--faint);
  font-size: 13px;
  cursor: pointer;
}
.subtask-add:hover { color: var(--blue); }

.subtask-form { display: flex; gap: 8px; padding: 4px 0; }
.subtask-form input {
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  border: 1px solid #dcd6c9;
  border-radius: 8px;
  background: var(--carved-grad);
  box-shadow: var(--sh-carved);
  outline: none;
}

.from-anjian {
  display: flex;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid #dcd6c9;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffefb, #f6f2ea);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 3px rgba(43,38,36,0.12);
}
.from-anjian img {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(43,38,36,0.28);
}

/* ---------- 移动端：底部抽屉（详情/快录共用背板；.capture-sheet 桌面下是普通容器） ---------- */

.sheet-backdrop {
  display: none;
}

.sheet-handle, .sheet-head { display: none; }

@media (max-width: 899px) {
  .sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(20, 18, 15, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .sheet-backdrop.open { opacity: 1; pointer-events: auto; }

  .detail-sheet, .capture-sheet.sheet-active {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--mobile-sheet-bottom);
    z-index: 71;
    max-height: var(--mobile-sheet-max-height);
    overflow-y: auto;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -14px 40px rgba(20, 16, 10, 0.28);
    transform: translateY(100%);
    transition: transform 0.24s ease;
    padding: 10px 20px calc(22px + var(--mobile-safe-bottom));
  }
  .detail-sheet.open, .capture-sheet.sheet-active.open { transform: translateY(0); }

  .sheet-handle {
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--line);
    margin: 6px auto 14px;
  }

  .sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .sheet-head h2 { margin: 0; font-size: 15px; }
  .sheet-head button {
    background: none;
    border: none;
    color: var(--blue-lit);
    font-size: 14px;
    padding: 6px 4px;
    cursor: pointer;
  }
}

.fab-capture { display: none; }

/* ---------- 移动端触屏命中区：一律 ≥44px ---------- */
@media (max-width: 899px) {
  .task .check, .detail-title-row .check, .subtask-row .check {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
  }
  .task .check, .task .star,
  .detail-title-row .check, .detail-title-row .star,
  .subtask-row .check, .subtask-row .del, .subtask-row .sub-del {
    position: relative;
  }
  .task .check::after, .task .star::after,
  .detail-title-row .check::after, .detail-title-row .star::after,
  .subtask-row .check::after, .subtask-row .del::after,
  .subtask-row .sub-del::after {
    content: '';
    position: absolute;
    inset: -12px;
  }

  /* 这一组是主操作，实际盒子至少 44px；次级 chip / 小按钮守 40px。 */
  .scope-toggle button,
  .cal-step,
  .cal-today,
  .sheet-head button,
  .detail-close,
  button.primary,
  .capture input,
  .capture button.primary { min-height: 44px; }
  .cal-step { min-width: 44px; }
  .sheet-head button, .detail-close { min-width: 44px; }
  .capture-chips button,
  .reschedule,
  .subtask-add,
  button.ghost,
  .mini-btn,
  .dl-btn,
  .logout-btn,
  .add-conn-row button,
  .invites-head > button,
  .map-details > summary,
  .toast button { min-height: 40px; }
  .subtask-row { min-height: 40px; }
  .subtask-row .sub-del { min-width: 16px; }
  /* 1.12.0 详情与改期 */
  .shift-btn { min-height: 40px; }
  /* 选择框热区 40px，上下负外边距抵掉多出来的高度：不然它把这一行撑高，
     「清单」卡里的字比并排「象限」卡里的字低一截（真 Safari 截图里看出来的） */
  .pick-select { min-height: 40px; margin: -11px 0; }
  .shift-btn kbd { display: none; }
  /* 「全挪到今天」看着仍是小胶囊，热区靠 ::after 上下各撑 9px 到 40px 以上，不把组头撑粗 */
  .group-bulk { position: relative; margin: -4px 0; padding: 4px 11px; font-size: 12px; }
  .group-bulk::after { content: ''; position: absolute; inset: -9px 0; }
  .detail-title-row .title.editable { position: relative; }
  .detail-title-row .title.editable::after { content: ''; position: absolute; inset: -9px 0; }
  /* 分组头的折叠钮：热区撑到 40px，上下负边距吃回来，组间节奏不变 */
  .group-toggle { min-height: 40px; margin-top: -8px; margin-bottom: -8px; }
  .dl-btn,
  .auth-card footer a { display: inline-flex; align-items: center; }
  .auth-card footer a {
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
  }

  .fab-capture {
    display: flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    right: 16px;
    bottom: calc(var(--mobile-tab-height) + var(--mobile-safe-bottom) + 14px);
    z-index: 40;
    min-height: 48px;
    padding: 12px 20px 12px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--blue-lit), var(--blue));
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    text-shadow: var(--text-emboss-dark);
    border: none;
    box-shadow: var(--sh-btn-primary);
    cursor: pointer;
  }
  .fab-capture .ic svg { width: 18px; height: 18px; }
  body.overlay-open .fab-capture, body.drawer-open .fab-capture { display: none; }
  /* 抽屉自带「关闭」，面板里那颗 ✕ 在手机上是重复的 */
  .detail-sheet .detail-close { display: none; }

  /* 移动端主列表页不显示常驻快录条，改走悬浮按钮 + 抽屉；.capture-sheet.sheet-active 时才现身 */
  .capture-sheet:not(.sheet-active) { display: none; }
  /* 抽屉里的快录：chip 常显（手机上没有「聚焦才出现」的余地，键盘一弹就没地方了） */
  .capture-sheet .capture-chips { display: flex; }
  .capture-sheet .capture-wrap { margin: 0; }
}

/* ---------- 底部快捷键提示条（桌面） ---------- */

.kbd-bar { display: none; }
@media (min-width: 900px) {
  .kbd-bar {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 9px 28px 10px;
    border-top: 1px solid var(--line);
    box-shadow: 0 -1px 0 rgba(255,255,255,0.75);
    font-size: 11px;
    color: var(--faint);
  }
  .kbd-bar .kb { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
  .kbd-bar .spacer { flex: 1; }
  .kbd-help {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border: 0;
    border-radius: 6px;
    background: none;
    font: inherit;
    color: var(--mist);
    cursor: pointer;
  }
  .kbd-help:hover { color: var(--blue); }
}
@media (min-width: 900px) and (max-width: 1180px) {
  /* 窄桌面：只留搜索、记一件和「全部快捷键」 */
  .kbd-bar .kb:nth-child(n+3) { display: none; }
}

/* ---------- 浮层：搜索（⌘K / /）与快捷键表（?） ----------
 * 一套底板两种面板。手机上搜索铺满全屏（键盘会顶上来），快捷键表是长条单列。 */

body.overlay-open { overflow: hidden; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
  background: rgba(24, 22, 19, 0.38);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: overlay-in 140ms ease;
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.search-panel, .help-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #d8d1c3;
  border-radius: 16px;
  background: linear-gradient(180deg, #fffefb, #faf7f1);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 24px 60px rgba(20,16,10,0.32), 0 3px 10px rgba(20,16,10,0.16);
  overflow: hidden;
  animation: panel-in 160ms ease;
}
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px) scale(0.99); } to { opacity: 1; transform: none; } }
.search-panel { max-width: 640px; max-height: min(560px, 76vh); }

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--mist);
}
.search-box > .ic svg { width: 19px; height: 19px; }
.search-box input.search-input {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: none;
  box-shadow: none;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
}
.search-box input.search-input:focus,
.search-box input.search-input:focus-visible { outline: none; box-shadow: none; }
.search-box input.search-input::-webkit-search-cancel-button { display: none; }
.search-box input.search-input::placeholder { color: var(--faint); }
.search-close {
  display: none;
  padding: 8px 4px 8px 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--blue-lit);
  cursor: pointer;
}

.search-note {
  padding: 7px 16px;
  font-size: 12px;
  color: var(--tan-text);
  background: var(--tan-soft);
  border-bottom: 1px solid var(--line);
}
.search-results { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 8px; overscroll-behavior: contain; }
.search-results:empty { display: none; }
.search-group + .search-group { margin-top: 6px; }
.search-ghead .num { margin-left: 6px; }
.search-ghead {
  padding: 8px 10px 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--faint);
}
.search-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
}
.search-item[aria-selected="true"] { background: var(--blue-soft); }
.si-dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sev-lit), var(--sev));
}
.search-item[data-sev="0"] .si-dot { background: #d6d0c3; }
.si-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.si-title {
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.si-kind {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--sev-soft);
  color: var(--sev-text);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}
.si-hit {
  font-size: 12px;
  color: var(--mist);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.si-field { margin-right: 6px; color: var(--faint); }
.si-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--faint); min-width: 0; }
.si-when { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.search-item:is([data-sev="2"], [data-sev="3"], [data-sev="4"]) .si-when { color: var(--sev-text); }
.si-tag { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-src { color: var(--blue-lit); white-space: nowrap; }
.si-star { color: #b08c39; font-size: 13px; }
.si-go { color: var(--faint); opacity: 0; }
.si-go svg { width: 14px; height: 14px; }
.search-item[aria-selected="true"] .si-go { opacity: 1; }
.search-results mark {
  padding: 0 1px;
  border-radius: 3px;
  background: rgba(204,160,92,0.34);
  color: inherit;
}

.search-state {
  padding: 26px 18px 30px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--faint);
  text-align: center;
}
.search-state:empty { display: none; }
.search-state.error { color: var(--berry-text); }
.search-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--faint);
  background: rgba(242,238,229,0.5);
}
.search-keys { display: flex; align-items: center; gap: 12px; }
.search-keys > span { display: inline-flex; align-items: center; gap: 5px; }
.search-more { margin-left: auto; }

/* 快捷键表 */
.help-panel { max-width: 720px; max-height: 80vh; }
.help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.help-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.help-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--mist);
  cursor: pointer;
}
.help-close:hover { background: var(--sunken); }
.help-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  padding: 16px 20px 20px;
  overflow-y: auto;
}
.help-sec h3 {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.help-sec dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 7px 14px;
  margin: 0;
}
.help-sec dt { display: flex; align-items: center; gap: 4px; }
.help-sec dd { margin: 0; font-size: 13px; color: var(--ink); }
.help-sec .then { font-size: 11px; color: var(--faint); }

@media (max-width: 899px) {
  .overlay { padding: 0; background: rgba(24,22,19,0.46); }
  .search-panel {
    max-width: none;
    max-height: none;
    height: 100%;
    border: 0;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .search-close { display: block; min-height: 44px; }
  .search-esc, .search-keys { display: none; }
  .search-item { min-height: 52px; }
  .help-overlay { padding: calc(24px + env(safe-area-inset-top, 0px)) 12px 12px; }
  .help-panel { max-height: 100%; }
  .help-body { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .overlay, .search-panel, .help-panel { animation: none; }
}

/* ---------- 案齐降级横幅 ---------- */

.banner {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: var(--r-chip);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--mist);
}
.banner img { width: 19px; height: 19px; border-radius: 5px; flex: 0 0 19px; }
.banner .msg-text { flex: 1; }
.banner .ts { font-family: var(--mono); font-size: 11px; color: var(--faint); }

.banner.degraded {
  border-color: var(--berry);
  background: var(--berry-soft);
  color: var(--berry-text);
}
.banner.degraded .ts { color: var(--berry-text); opacity: 0.75; }

/* ---------- 完成撤销便签 ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  z-index: 60;
  transform: translateX(-50%) rotate(-1.2deg);
  padding: 10px 16px;
  border-radius: 6px;
  background: #2a2621;
  color: #f3ede0;
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toast-in 0.22s ease;
}
@media (min-width: 900px) { .toast { bottom: 56px; } }
.toast button {
  background: none;
  border: none;
  color: var(--tan-lit);
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) rotate(-1.2deg) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) rotate(-1.2deg) translateY(0); }
}

/* ---------- 登录 / 注册：深色舞台 + 浮起象牙纸卡片 ---------- */

label {
  display: block;
  margin: 12px 0 5px;
  font-size: 12px;
  color: var(--mist);
}

.auth-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,0.05), transparent),
    var(--sidebar-gradient);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 26px 26px 22px;
  border-radius: 18px;
  background: var(--surface-grad);
  box-shadow: 0 30px 60px -20px rgba(10,16,24,0.55), var(--sh-raised-hi);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
/* 登录/注册页的品牌 tile：同上，几何不动，内容换成产品图标。 */
.auth-brand .logo {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  object-fit: cover;
  display: block;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.auth-brand h1 { margin: 0; font-size: 19px; letter-spacing: 0.1em; }
.auth-brand .tagline { margin: 2px 0 0; font-size: 12px; color: var(--mist); }

.auth-card label:first-of-type { margin-top: 0; }

.auth-card .field-valid {
  position: relative;
}
.auth-card .field-valid input { padding-right: 30px; }
.auth-card .field-valid .dot {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--matcha);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.auth-card .field-valid.ok .dot { opacity: 1; }
.auth-card .field-valid.ok input { border-color: var(--matcha); }

.auth-card button.primary { width: 100%; margin-top: 20px; }
.auth-card button.primary:disabled {
  background: var(--sunken);
  color: var(--faint);
  box-shadow: none;
  cursor: default;
}

.auth-error {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--berry-text);
}
.auth-error:not(:empty)::before {
  content: '!';
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--berry);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.auth-card.error input { border-color: var(--berry); box-shadow: var(--sh-carved), 0 0 0 1px var(--berry); }

.auth-divider {
  margin: 18px 0 14px;
  border: none;
  border-top: 1px solid var(--hair);
}

.auth-card footer {
  font-size: 12.5px;
  color: var(--mist);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── 连接器：类型瓦片（Notion 等没有现成图标的来源）与「还可以连接」──────────
   案齐有自己的图标资源；其它来源用等宽字母瓦片，尺寸与案齐图标一致（19/22px），
   免得每加一个连接器就得往仓里塞一张图。 */
.kind-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1;
  color: #f6f2e9; background: linear-gradient(180deg, #4a4640, #2f2c28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 1px 2px rgba(43,38,36,0.3);
}
.conn-status .kind-tile { width: 19px; height: 19px; flex: 0 0 19px; border-radius: 6px; font-size: 11px; }
.banner .kind-tile { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 6px; font-size: 10.5px; }

.add-conns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.add-conns.lean { margin: 2px 0 0; gap: 6px; }
.add-conn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 案齐的来源图标是张 256px 的位图，不显式限尺寸就会把整行撑爆（390px 下溢出 13px，
   由 test-password-http 的「不许横向溢出」断言抓到）。类型瓦片同款尺寸。 */
.add-conn-row img { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; object-fit: cover; }
.add-conn-lead { font-size: 12px; color: var(--faint); }
.add-conn-name { font-size: 13px; font-weight: 600; color: var(--ink); flex: 0 0 auto; }
.add-conn-hint { font-size: 12px; color: var(--mist); flex: 1 1 120px; min-width: 0; }
.add-conn-row .spacer { flex: 1; }
@media (max-width: 720px) {
  .add-conn-hint { display: none; }
}

/* ── 账号卡里的改密码：入口在账号行中段，表单默认折起 ───────────────────
   .has-pw 让 .account-info 退回自然宽、由 spacer 吃掉剩余空间——这样右侧
   「退出登录」的位置与卡片高度都不变，不会把下面的卡片整体推下去。 */
.account-row.has-pw .account-info { flex: 0 1 auto; }
.account-row.has-pw .spacer { flex: 1; }
.pw-form { border-top: 1px solid rgba(60,58,52,0.1); padding-top: 14px; }
.mini-btn {
  padding: 5px 11px; border: 1px solid #d3cdc0; border-radius: 8px;
  background: linear-gradient(180deg, #fffefb, #f0ece2);
  font: inherit; font-size: 12px; color: var(--mist); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 0 #d3cdc0;
}
.pw-form { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.pw-form[hidden] { display: none; }
.pw-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pw-actions .conn-msg { flex: 1 1 100%; }
@media (min-width: 721px) {
  .pw-actions .conn-msg { flex: 1 1 auto; }
}

/* ── Notion 卡的属性映射折叠区 ─────────────────────────────────────────── */
.map-details { margin-top: 12px; }
.map-details > summary {
  cursor: pointer; font-size: 12px; color: var(--faint); list-style: none;
  padding: 4px 0;
}
.map-details > summary::-webkit-details-marker { display: none; }
.map-details > summary::before { content: '▸ '; }
.map-details[open] > summary::before { content: '▾ '; }
.map-details .conn-grid { margin-top: 10px; }
.map-details p.desc { margin-top: 10px; margin-bottom: 0; }

/* Notion 来源标：原型没画这个元素，按拍板走文本 chip，沿案齐 tag 的字号与色 */
.src-chip {
  flex: 0 0 auto; align-self: flex-start; margin-top: 2px;
  padding: 2px 7px; border-radius: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em;
  color: #6a645a; background: linear-gradient(180deg, #fffefb, #efeade);
  border: 1px solid #ddd6c8; white-space: nowrap;
}

/* ── 小组件令牌区（折在账号卡里）─────────────────────────────────────────
   注意别复用 .pw-form/.pw-actions：改密回归里的 `.pw-form input` 会把这里的
   备注输入框也数进去（踩过，断言从 3 个框变成 4 个）。两块各用各的类名。 */
.tok-form { display: flex; flex-direction: column; gap: 9px; margin-top: 12px;
  border-top: 1px solid rgba(60,58,52,0.1); padding-top: 14px; }
.tok-form[hidden] { display: none; }
.tok-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tok-form .desc { margin: 0 0 10px; }
.tok-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tok-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tok-row .spacer { flex: 1; }
.tok-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.tok-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.tok-empty { font-size: 12.5px; color: var(--mist); }
/* 明文只显示一次：等宽、可选中、窄屏能折行——抄错一个字符小组件就连不上 */
.tok-plain {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink);
  padding: 4px 8px; border-radius: 7px; background: #efeade; border: 1px solid #ddd6c8;
  user-select: all; word-break: break-all; max-width: 100%;
}
.tok-actions .conn-msg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 100%; }

/* ── 系统日历订阅卡（设置页最末）──────────────────────────────────────────
   一律用自己的类名（feed-*；cal-* 是日历页的地盘，.cal-more 撞过一次）：下载卡回归按 .dl-item 计数、小组件令牌回归按 .tok-row
   计数，借用别人的类名会让那两边的断言漂掉（下载卡这条踩过）。
   平台行的纸片材质照抄 .dl-item，同层级的行长得该一样。 */
.feed-plat {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: linear-gradient(180deg, #fffefb, #f8f5ee);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(34,32,29,0.07);
}
/* 说明撑满、按钮不许被挤：窄屏时按钮整颗换到下一行，而不是被压成逐字竖排 */
.feed-plat-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 240px; }
.feed-plat-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.feed-plat-note { font-size: 11px; color: var(--mist); line-height: 1.6; }
.feed-mint { flex: 0 0 auto; white-space: nowrap; }
.feed-result { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.feed-result[hidden], .feed-list[hidden] { display: none; }
.feed-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feed-actions a.mini-btn { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
/* 地址只显示一次：等宽、可整段选中、窄屏能折行 */
.feed-url {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink);
  padding: 4px 8px; border-radius: 7px; background: #efeade; border: 1px solid #ddd6c8;
  user-select: all; word-break: break-all; max-width: 100%;
}
.feed-warn { margin: 0; font-size: 11.5px; color: var(--mist); line-height: 1.6; }
.feed-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; }
.feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; align-self: stretch; }
.feed-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feed-row .spacer { flex: 1; }
/* 窄屏换行时「吊销」仍靠右，跟没换行的那几行对齐 */
.feed-revoke { margin-left: auto; }
.feed-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.feed-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.feed-empty { font-size: 12.5px; color: var(--mist); }
.feed-more > summary {
  cursor: pointer; font-size: 12px; color: var(--faint); list-style: none; padding: 4px 0;
}
.feed-more > summary::-webkit-details-marker { display: none; }
.feed-more > summary::before { content: '▸ '; }
.feed-more[open] > summary::before { content: '▾ '; }
.feed-more ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--mist); line-height: 1.7; }
@media (max-width: 899px) {
  .feed-more > summary { min-height: 40px; display: flex; align-items: center; }
}

/* ---------- 外观卡（设置页，账号卡下面）---------- */
/* 两张选项卡片 + 纯 CSS 缩略图。缩略图的颜色是写死的「那套皮的样子」，
   不跟当前主题变量走——它要展示的恰恰是另一套长什么样。 */
.theme-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* 存不进偏好时的就地提示（只在失败时才生成，平常不占地方） */
.appearance-card p.theme-fail { margin: 10px 0 0; }
.theme-opt {
  display: flex; flex-direction: column; align-items: stretch; gap: 9px;
  padding: 10px; border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.theme-opt[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); cursor: default; }
.theme-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.theme-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.theme-desc { font-size: 11px; color: var(--mist); line-height: 1.5; }
.theme-mini {
  display: flex; height: 64px; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}
.theme-mini i { display: block; font-style: normal; }
.theme-mini .m-main { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 9px; }
.theme-mini .m-main b { display: block; height: 7px; border-radius: 2px; }
.theme-mini .m-main b:nth-child(2) { width: 82%; }
.theme-mini .m-main b:nth-child(3) { width: 64%; }
.theme-opt[data-theme-key="ticktick"] .m-rail { flex: 0 0 9px; background: #f5f5f5; }
.theme-opt[data-theme-key="ticktick"] .m-side { flex: 0 0 26%; background: #fbfbfb; border-right: 1px solid #f0f0f0; }
.theme-opt[data-theme-key="ticktick"] .m-main { background: #fff; }
.theme-opt[data-theme-key="ticktick"] .m-main b { background: #f2f2f2; border-left: 7px solid #4772fa; }
.theme-opt[data-theme-key="classic"] .m-rail { display: none; }
.theme-opt[data-theme-key="classic"] .m-side { flex: 0 0 30%; background: linear-gradient(178deg, #22344a 0%, #1a2939 52%, #14202d 100%); }
.theme-opt[data-theme-key="classic"] .m-main { background: #faf7f1; }
.theme-opt[data-theme-key="classic"] .m-main b { background: #fffefb; box-shadow: 0 1px 1px rgba(43,38,36,0.16); border-left: 3px solid #a8511f; }
@media (max-width: 899px) {
  .theme-opt { min-height: 44px; }
}