/* ==========================================================================
   假装上班 v2 — design system (方向 B「便利贴白板」)
   Ported from Fake Office App v2 design. Light theme only.
   Sections:
     1. Tokens            6. Cards & sticky notes   11. Chat & composer
     2. Keyframes         7. Buttons / pills / chips 12. Sheets & overlays
     3. Base              8. Avatars                 13. Tab bar & toast
     4. Stage & phone     9. Progress / checks       14. Misc blocks
     5. Screen layout    10. Task rows / stats / seg 15. Utilities
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --ink: #1b1b1f;
  --paper: #fffdf7;
  --page: #e9e4d8;
  --white: #ffffff;
  --muted: #6a6350;
  --muted-2: #7a7568;
  --faint: #8a8478;
  --line-soft: #cfc9bb;
  --rest: #f1ede4;
  --yellow: #ffd23f;
  --sticky: #fff3a3;
  --pink: #ff5d8f;
  --pink-soft: #ffe0ea;
  --blue: #3a86ff;
  --blue-soft: #e9f0ff;
  --teal: #2ec4b6;
  --orange: #ffb703;
  --green-soft: #e3f6ee;
  --green-ink: #2a8f5a;
  --danger: #d6336c;
  --grid: rgba(58, 134, 255, 0.08);

  --font-hand: "ZCOOL KuaiLe", cursive;
  --font: "Noto Sans SC", -apple-system, "PingFang SC", sans-serif;

  /* Safe areas. Design paddings (60/62/70px) assumed a fake iOS status bar. */
  --safe-top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  --top: calc(var(--safe-top) + 20px);
  --top-lg: calc(var(--safe-top) + 28px);

  --shadow-1: 2px 2px 0 var(--ink);
  --shadow-2: 3px 3px 0 var(--ink);
  --shadow-3: 4px 4px 0 var(--ink);
  --shadow-4: 5px 5px 0 var(--ink);
  --shadow-sticky: 4px 6px 0 rgba(27, 27, 31, 0.12);
}

/* 2. Keyframes -------------------------------------------------------------- */
@keyframes dotb {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}
@keyframes toastin {
  from { transform: translate(-50%, -10px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes popin {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes sheetup {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 3. Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--blue); }
a:hover { color: #1f5fc4; }
button, input, textarea, select { font-family: inherit; color: inherit; }
input:focus, textarea:focus, select:focus { outline: none; }
[hidden] { display: none !important; }

[data-act] { cursor: pointer; touch-action: manipulation; }
[data-act]:focus-visible,
button:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 2px;
}
/* Dialogs take focus programmatically when they open (office/app.js). */
[aria-modal="true"]:focus { outline: none; }

/* 4. Stage & phone frame ---------------------------------------------------- */
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.phone {
  position: relative;
  width: 402px;
  height: 874px;
  border-radius: 48px;
  overflow: hidden;
  background: var(--paper);
  box-shadow:
    0 0 0 10px var(--ink),
    0 0 0 11px rgba(0, 0, 0, 0.12),
    0 40px 80px rgba(0, 0, 0, 0.18);
  /* Keeps fixed-position descendants inside the frame on desktop. */
  transform: translateZ(0);
}
/* Short desktop windows: full height, keep the phone column width.
   874px phone + 2 × 24px stage padding = 922px. */
@media (max-height: 922px) {
  .stage { padding: 0; }
  .phone {
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 40px 80px rgba(0, 0, 0, 0.18);
  }
}
/* Phones: full-bleed. */
@media (max-width: 500px) {
  .stage { padding: 0; display: block; }
  .phone {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}

/* 5. Screen layout ---------------------------------------------------------- */
#app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
#screen {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#tabbar, #overlays, #toast { flex: none; }

/* Legacy pages (login / AI 工作台 / 今日复盘) render into this. */
.legacy-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.scr {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Scrolling body of tab screens (design: padding 62px 20px 120px). */
.scr-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--top) 20px calc(120px + var(--bottom));
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Pushed screens below a .topbar (design: padding 18px 20px 40px). */
.scr-body--sub {
  padding: 18px 20px calc(40px + var(--bottom));
  gap: 18px;
}
/* Full-page flows without tab bar (工牌 / 下班复盘: padding 70px 24px 40px). */
.scr-page {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--top-lg) 24px calc(40px + var(--bottom));
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-18 { gap: 18px; }
/* Hand headline on full-page flows (工牌 L114 30px, 下班复盘 L532 32px) + 13px muted line. */
.flow-title { font-family: var(--font-hand); font-size: 30px; line-height: 1.15; }
.flow-title--lg { font-size: 32px; line-height: 1.1; }
.flow-sub { font-size: 13px; color: var(--muted); }

/* Page header on tab screens (title + sub on the left, action on the right). */
.page-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.page-h--end { align-items: flex-end; }
.page-h__main { display: flex; flex-direction: column; min-width: 0; }
.page-h__title { font-family: var(--font-hand); font-size: 24px; line-height: 1.2; }
.page-h__title--home { font-size: 22px; letter-spacing: 0.04em; }
.page-h__sub { font-size: 11px; color: var(--muted); }

/* Top bar for pushed screens (模块详情 / 会话). */
.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--top) 16px 12px 12px;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}
/* Header variant without back button (入职办理). */
.topbar--split {
  justify-content: space-between;
  padding: var(--top) 20px 12px;
}
.topbar__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.topbar__title {
  font-family: var(--font-hand);
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.back {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.08s;
}
.back:active { transform: translate(1px, 1px); background: var(--rest); }

/* Rotated yellow label (入职第 N 天 / HR 何时休). */
.stamp {
  flex: none;
  background: var(--yellow);
  border: 2px solid var(--ink);
  padding: 4px 10px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  transform: rotate(3deg);
  box-shadow: var(--shadow-2);
}
.stamp--sm { padding: 3px 10px; font-size: 11px; box-shadow: var(--shadow-1); }

/* Section header row: hand title + muted sub (L161, L258). */
.section-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.section-h__l { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.section-h__title { font-family: var(--font-hand); font-size: 20px; white-space: nowrap; }
.section-h__sub { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* 6. Cards & sticky notes --------------------------------------------------- */
.card {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
}
.card--pad { padding: 14px 16px; }
.card--shadow { box-shadow: var(--shadow-2); }
.card--hero {
  border-width: 2.5px;
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow-4);
}
.card--flat { border-radius: 14px; }
.card--rest { background: var(--rest); }
.card--p12 { padding: 12px; }
.card--p14 { padding: 14px; }
/* Hand title / body / big number inside hero cards (项目 L208-219, 模块 L290-296). */
.hero-title { font-family: var(--font-hand); font-size: 22px; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.hero-desc { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.big-pct { flex: none; font-family: var(--font-hand); font-size: 46px; line-height: 1; }

/* 工位 check card (L143-147); background / colour come from the view-model. */
.checkcard {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: var(--shadow-4);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
.checkcard:active { transform: translate(1px, 1px); box-shadow: var(--shadow-3); }
.checkcard[aria-disabled="true"] { cursor: default; }
.checkcard[aria-disabled="true"]:active { transform: none; box-shadow: var(--shadow-4); }
.checkcard__sub { font-size: 12px; font-weight: 700; opacity: 0.9; }
.checkcard__title { font-family: var(--font-hand); font-size: 30px; line-height: 1; }
.checkcard__hint { font-size: 11px; opacity: 0.85; }
/* Side column next to it: salary card + 请假 (L148-156). */
.side-col { flex: none; width: 104px; display: flex; flex-direction: column; gap: 10px; }
.paycard {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  padding: 12px;
}
.paycard__l { font-size: 11px; font-weight: 700; color: var(--muted); }
.paycard__n { font-family: var(--font-hand); font-size: 22px; line-height: 1; }
/* 整活币，不能提现 (L151, L485). */
.note-pink { font-size: 10px; font-weight: 700; color: var(--pink); }
.leave-btn {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.leave-btn:active { transform: translate(1px, 1px); background: var(--rest); }
/* Admin announcement pinned on 工位. */
.announce {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: var(--shadow-1);
  transform: rotate(0.6deg);
}
.announce__text { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }

/* 工牌 (L116-122) and its mini copy on the share card (L591-595). */
.badge-card {
  align-self: center;
  width: 250px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 18px;
  transform: rotate(-2deg);
}
.badge-card--mini {
  width: 200px;
  gap: 10px;
  border-width: 2px;
  border-radius: 16px;
  box-shadow: var(--shadow-3);
  padding: 14px;
}
/* Lanyard slot on the badge. */
.badge-slot { flex: none; width: 34px; height: 12px; border-radius: 999px; background: var(--ink); }
.badge-slot--sm { align-self: center; width: 30px; height: 10px; }
/* 第 N 天 on the daily poster (L600); --long keeps 3+ digit days inside the 3:4 card. */
.poster-day { font-family: var(--font-hand); font-size: 64px; line-height: 1; transform: rotate(-2deg); margin-top: 6px; }
.poster-day--long { font-size: 52px; }

/* 我的 → 分享中心 grid (L517-520); colours come from the view-model. */
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
}
.share-item:active { transform: translate(1px, 1px); }
.share-item__t { font-weight: 700; font-size: 13px; }
.share-item__s { font-size: 11px; opacity: 0.75; }
/* 本月工资条 (L482-487). */
.payslip__title { font-family: var(--font-hand); font-size: 18px; }
.kv-total { border-top: 2px solid var(--ink); padding-top: 8px; }

.sticky {
  position: relative;
  background: var(--sticky);
  padding: 16px 18px 14px;
  transform: rotate(-1.5deg);
  box-shadow: var(--shadow-sticky);
}
.sticky__tape {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 64px;
  height: 18px;
  background: rgba(58, 134, 255, 0.35);
  border: 1px solid rgba(58, 134, 255, 0.5);
}
.sticky__text { font-family: var(--font-hand); font-size: 22px; line-height: 1.3; }
.sticky__by { font-size: 12px; color: var(--muted); margin-top: 8px; text-align: right; }
/* L539: 下班复盘 */
.sticky--md .sticky__text { font-size: 20px; line-height: 1.35; }
/* L233: 项目页 */
.sticky--sm { padding: 14px 16px 12px; transform: rotate(-1deg); }
.sticky--sm .sticky__text { font-size: 18px; line-height: 1.35; }
.sticky--sm .sticky__by { margin-top: 6px; }
/* L608: share-poster quote — body font, 10px signature on its own line */
.sticky--quote {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  transform: rotate(-1deg);
  box-shadow: 3px 3px 0 rgba(27, 27, 31, 0.12);
}
.sticky--quote .sticky__text { font-family: var(--font); font-size: 12px; line-height: 1.45; }
.sticky--quote .sticky__by { font-size: 10px; margin-top: 0; text-align: left; }
/* L510 / L671: small plain notes */
.sticky--plain {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: none;
  transform: rotate(-0.6deg);
}
.sticky--hint {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  box-shadow: none;
  transform: rotate(-0.5deg);
}

/* 7. Buttons / pills / chips ------------------------------------------------ */
.btn {
  display: block;
  width: 100%;
  background: #fff;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  box-shadow: var(--shadow-3);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.btn--blue {
  background: var(--blue);
  color: #fff;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 20px;
}
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--hand { font-family: var(--font-hand); font-weight: 400; font-size: 20px; }
.btn--plain { background: #fff; box-shadow: none; }
.btn--plain:active { box-shadow: none; background: var(--rest); }
.btn--ghost-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: none;
  padding: 12px;
  font-size: 13px;
}
.btn--ghost-light:active { box-shadow: none; background: rgba(255, 255, 255, 0.12); }
.btn--sm {
  border-radius: 14px;
  padding: 12px;
  font-size: 14px;
  box-shadow: var(--shadow-2);
}
.btn--sm:active { box-shadow: 1px 1px 0 var(--ink); }
.btn--sm.btn--hand, .btn--sm.btn--blue { font-size: 18px; }
.btn-row { display: flex; gap: 10px; }
.btn-row > .btn { flex: 1; min-width: 0; }
.btn-stack { display: flex; flex-direction: column; gap: 10px; }
.btn-stack--end { margin-top: auto; }

/* Text-only destructive link (删除这个任务). */
.link-danger {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--danger);
  padding: 6px;
}
/* Text-only light link on dark overlays (关闭). */
.link-light { color: #fff; font-size: 13px; font-weight: 700; padding: 8px 16px; }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: #fff;
  color: var(--ink);
}
.pill--lg { padding: 3px 9px; }
.pill--tag { font-size: 10px; }
.pill--pink { background: var(--pink); color: #fff; }
.pill--yellow { background: var(--yellow); }
.pill--btn { background: #fff; font-size: 12px; padding: 4px 10px; }
.pill--raised {
  border-width: 2px;
  padding: 6px 14px;
  box-shadow: var(--shadow-1);
  transition: transform 0.08s, box-shadow 0.08s;
}
.pill--raised:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.pill[data-act]:active:not(.pill--raised) { transform: translate(1px, 1px); }

/* Answer / reason chips (L96, L566). */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: var(--shadow-1);
  white-space: nowrap;
  transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
}
.chip:hover { background: var(--yellow); }
.chip:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.chip--lg { padding: 9px 14px; }
.chip.is-on { background: var(--yellow); }
/* Flat pill chips in the edit sheet (所属模块 L646, 对接同事 L655). */
.chip--flat { padding: 7px 12px; box-shadow: none; }
.chip--flat:active { box-shadow: none; }
.chip--av { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; }

/* Option buttons (毒舌档位 L507 / 状态 L634). */
.opts { display: flex; gap: 8px; }
.opt {
  flex: 1;
  text-align: center;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 10px 4px;
  font-weight: 700;
  font-size: 13px;
  background: #fff;
  transition: transform 0.08s, box-shadow 0.08s;
}
.opt.is-on { background: var(--yellow); box-shadow: var(--shadow-2); }
.opt:active { transform: translate(1px, 1px); }
/* 状态 options in the edit sheet (L634): taller, colours from the view-model. */
.opt--status { padding: 11px 4px; }

/* Send button beside a .field (L103). */
.send {
  flex: none;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow-1);
  transition: transform 0.08s, box-shadow 0.08s;
}
.send:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

/* 8. Avatars ---------------------------------------------------------------- */
.av {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  background: #fff;
  color: var(--ink);
}
.av--26 { width: 26px; height: 26px; font-size: 11px; border-width: 1.5px; }
.av--30 { width: 30px; height: 30px; font-size: 12px; }
.av--32 { width: 32px; height: 32px; font-size: 13px; }
.av--36 { width: 36px; height: 36px; font-size: 14px; }
.av--40 { width: 40px; height: 40px; font-size: 15px; }
.av--44 { width: 44px; height: 44px; font-size: 16px; }
.av--56 {
  width: 56px; height: 56px;
  font-family: var(--font-hand); font-weight: 400; font-size: 26px;
}
.av--70 {
  width: 70px; height: 70px;
  font-family: var(--font-hand); font-weight: 400; font-size: 32px;
}
.av--88 {
  width: 88px; height: 88px; border-width: 2.5px;
  font-family: var(--font-hand); font-weight: 400; font-size: 40px;
}
/* Group avatar (rounded square, hand font). */
.av--sq {
  border-radius: 12px;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 20px;
}
/* L416: chat header group avatar — rounded square but body font, weight 900. */
.av--sq.av--36 { border-radius: 10px; font-family: var(--font); font-weight: 900; font-size: 14px; }
.av--dashed { border-style: dashed; border-color: var(--faint); color: var(--faint); background: transparent; }

/* 9. Progress / checks ------------------------------------------------------ */
.bar {
  height: 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width 0.4s;
}
.bar--thin { height: 8px; border-width: 1.5px; }
.bar--time { height: 6px; border-width: 1.5px; }
.bar--time .bar__fill { background: var(--ink); transition: none; }
.bar--grow { flex: 1; }

.check {
  flex: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  background: #fff;
  color: #fff;
  transition: transform 0.08s;
}
.check:active { transform: scale(0.9); }

/* 10. Task rows / stats / segmented ---------------------------------------- */
.tlist { display: flex; flex-direction: column; gap: 10px; }
.trow {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
}
.trow__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.trow__text { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.trow__meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.trow__metatext { font-size: 11px; color: var(--muted); }
.trow__min { flex: none; font-size: 11px; font-weight: 700; color: var(--muted-2); white-space: nowrap; }
.trow__go { flex: none; font-size: 18px; font-weight: 900; color: var(--muted); }
.trow__start {
  flex: none;
  background: var(--yellow);
  border: 1.5px solid var(--ink);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.08s;
}
.trow__start:active { transform: translate(1px, 1px); }

.stats { display: flex; gap: 8px; }
.stats--10 { gap: 10px; }
.stat {
  flex: 1;
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
  background: #fff;
}
.stat__n { font-family: var(--font-hand); font-size: 22px; line-height: 1.1; }
.stat__l { font-size: 11px; font-weight: 700; }
.stat--sm { padding: 8px; }
.stat--big { padding: 12px; box-shadow: var(--shadow-2); }
.stat--big .stat__n { font-size: 28px; }
.stat--tiny { border-radius: 10px; padding: 8px; }
.stat--tiny .stat__n { font-size: 18px; }
.stat--tiny .stat__l { font-size: 9px; }

.seg {
  display: flex;
  flex: none;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  padding: 3px;
  box-shadow: var(--shadow-1);
}
.seg__opt {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: transparent;
  white-space: nowrap;
}
.seg__opt.is-on { background: var(--yellow); }

/* 11. Chat & composer ------------------------------------------------------- */
/* Scrolling transcript (L66, L418). */
.chatlog {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bubble-row { display: flex; gap: 10px; align-items: flex-end; flex-direction: row; }
.bubble-row--me { flex-direction: row-reverse; }
.bubble-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 256px;
  min-width: 0;
  align-items: flex-start;
}
.bubble-row--me .bubble-col { align-items: flex-end; }
.bubble-label { font-size: 11px; color: var(--muted); }
.bubble {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  border-radius: 14px 14px 14px 4px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.bubble--me { background: var(--blue); color: #fff; border-radius: 14px 14px 4px 14px; }
.bubble--lead { box-shadow: var(--shadow-2); }

/* Typing indicator (L88, L431). */
.typing {
  padding: 12px 14px;
  border: 2px solid var(--ink);
  background: #fff;
  border-radius: 14px 14px 14px 4px;
  display: flex;
  gap: 5px;
}
.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  animation: dotb 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }

/* Onboarding step list inside a bubble (L75-77). */
.steps { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; white-space: normal; }
.step {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--ink);
}
.step__n { font-weight: 900; font-size: 12px; width: 16px; flex: none; }
.step__text { flex: 1; font-size: 13px; line-height: 1.35; }
.step__min { font-size: 11px; font-weight: 700; color: var(--muted); flex: none; }

/* Bottom input area (L92, L435). */
.composer {
  flex: none;
  border-top: 2px solid var(--ink);
  background: var(--paper);
  padding: 10px 16px max(16px, calc(var(--bottom) + 8px));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.composer--ob { padding-top: 12px; gap: 10px; }
.composer__row { display: flex; gap: 8px; }
.quick {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.quick::-webkit-scrollbar { display: none; }
.quick__say {
  flex: none;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.quick__say:active { transform: translate(1px, 1px); background: var(--yellow); }

/* Inputs. */
.field {
  flex: 1;
  min-width: 0;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0 16px;
  height: 44px;
  font-size: 14px;
  background: #fff;
  color: var(--ink);
}
.input {
  display: block;
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 0 12px;
  height: 44px;
  font-size: 14px;
  background: #fff;
  color: var(--ink);
}
.input--date { padding: 0 10px; }
.input--num { width: 96px; }
.textarea {
  display: block;
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  background: #fff;
  color: var(--ink);
  resize: none;
}
.field:focus, .input:focus, .textarea:focus {
  box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.25);
}
.field::placeholder, .input::placeholder, .textarea::placeholder { color: var(--faint); }

/* Form labels (L500 / L626). */
.label { font-weight: 900; font-size: 13px; }
.field-label { font-size: 12px; font-weight: 900; }
.form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-group--8 { gap: 8px; }

/* 12. Sheets & overlays ----------------------------------------------------- */
.sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 35;
  background: rgba(27, 27, 31, 0.45);
  display: flex;
  align-items: flex-end;
  animation: fadein 0.18s ease-out;
}
.sheet {
  width: 100%;
  max-height: 90%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  border-top: 2.5px solid var(--ink);
  border-radius: 24px 24px 0 0;
  padding: 14px 20px calc(24px + var(--bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: default;
  animation: sheetup 0.22s ease-out;
}
.sheet--roomy { padding-top: 20px; }
.sheet__grab {
  flex: none;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: var(--line-soft);
  align-self: center;
}
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sheet__title { font-family: var(--font-hand); font-size: 22px; }
.sheet__sub { font-size: 11px; color: var(--muted); text-align: right; }

/* Dark overlay for share cards (L587). */
.overlay-dark {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(27, 27, 31, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centered via auto margins (below) rather than justify-content:center, so
     content taller than a short/landscape viewport overflows downward and
     can be scrolled to its close buttons instead of being clipped at both ends. */
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 14px;
  padding: 24px;
  animation: fadein 0.18s ease-out;
}
/* 3:4 share card surface (L588). */
.share-card {
  position: relative;
  width: 282px;
  height: 376px;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(58, 134, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 134, 255, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 8px 8px 0 var(--yellow);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  animation: popin 0.35s ease-out;
}
.qr-fake {
  flex: none;
  width: 40px;
  height: 40px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: repeating-linear-gradient(45deg, var(--ink) 0 3px, #fff 3px 6px);
}

/* 5 分钟启动 timer (L574). */
.timer {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: var(--blue);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* centered via auto margins, see .overlay-dark */
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 18px;
  padding: 40px 28px;
  text-align: center;
}
.timer > *,
.overlay-dark > * { flex-shrink: 0; }
.timer > :first-child,
.overlay-dark > :first-child { margin-top: auto; }
.timer > :last-child,
.overlay-dark > :last-child { margin-bottom: auto; }
.timer__kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; opacity: 0.85; }
.timer__step { font-family: var(--font-hand); font-size: 22px; line-height: 1.35; max-width: 300px; }
.timer__clock {
  font-family: var(--font-hand);
  font-size: 96px;
  line-height: 1;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 28px;
  padding: 12px 26px;
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(-2deg);
  font-variant-numeric: tabular-nums;
}
.timer__note { font-size: 13px; opacity: 0.9; max-width: 280px; line-height: 1.5; }
.timer__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  margin-top: 10px;
}

/* 13. Tab bar & toast ------------------------------------------------------- */
.tabbar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: max(22px, calc(var(--bottom) + 8px));
  z-index: 5;
  display: flex;
  padding: 8px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow-3);
  font-size: 13px;
  font-weight: 700;
}
.tabbar__tab {
  position: relative;
  flex: 1;
  text-align: center;
  border-radius: 12px;
  padding: 10px 0;
  background: transparent;
  color: var(--muted);
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.12s, color 0.12s;
}
.tabbar__tab.is-on { background: var(--yellow); color: var(--ink); }
.tabbar__tab:active { transform: translateY(1px); }
.tabbar__dot {
  position: absolute;
  top: 6px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  border: 1.5px solid var(--ink);
}

.toast-wrap {
  position: absolute;
  top: calc(var(--safe-top) + 14px);
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}
.toast {
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  max-width: 340px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  animation: popin 0.25s ease-out;
}

/* 14. Misc blocks ----------------------------------------------------------- */
/* Conversation row (L353 / L364). */
.convo {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 10px 12px;
  transition: transform 0.08s, box-shadow 0.08s;
}
.convo--group { box-shadow: var(--shadow-2); }
.convo:active { transform: translate(1px, 1px); }
.convo--group:active { box-shadow: 2px 2px 0 var(--ink); }
.convo__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.convo__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.convo__name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo__sub { font-size: 11px; color: var(--muted); font-weight: 400; }
.convo__time { font-size: 11px; color: var(--muted); flex: none; }
.convo__preview {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.1em; }

/* Unread count badge (L359). */
.count {
  flex: none;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  border: 1.5px solid var(--ink);
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Horizontal scroller bleeding to the screen edges (L189). */
.hscroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin: 0 -20px;
  padding: 0 20px 6px;
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }

/* Colleague status card (L191). */
.team-card {
  flex: none;
  width: 118px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  transition: transform 0.08s;
}
.team-card:active { transform: translate(1px, 1px); }

/* 项目 → 时间线 (L237-256): number column + track with positioned bars and a dashed 今天 line.
   Bar left/width/fill and the 今天 position are inline (computed). */
.gantt { display: flex; gap: 8px; align-items: stretch; }
.gantt__nums { flex: none; display: flex; flex-direction: column; gap: 8px; padding-top: 18px; }
.gantt__n { width: 14px; height: 14px; font-size: 11px; font-weight: 900; line-height: 14px; text-align: center; }
.gantt__track { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 18px; }
.gantt__row { position: relative; height: 14px; cursor: pointer; }
.gantt__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.gantt__fill { height: 100%; background: var(--blue); }
.gantt__today {
  position: absolute;
  top: 14px;
  bottom: 0;
  border-left: 2px dashed var(--pink);
  z-index: 2;
  pointer-events: none;
}
.gantt__today-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 900;
  line-height: 14px;
  color: var(--pink);
  white-space: nowrap;
  pointer-events: none;
}
.gantt__axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); padding-left: 22px; }

/* Module number square (L262); colours inline. */
.mod-n {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
}

/* 消息 → 组织架构 (L375-406). */
.org { display: flex; flex-direction: column; }
.org-boss {
  align-self: center;
  min-width: 220px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 4px 4px 0 var(--yellow);
  cursor: pointer;
}
.org-boss__name { font-weight: 700; font-size: 15px; }
.org-boss__sub { font-size: 11px; opacity: 0.8; }
.org-trunk { width: 2px; height: 18px; background: var(--ink); margin: 0 auto; }
.org-bus { height: 2px; background: var(--ink); margin: 0 60px; }
.org-drops { display: flex; justify-content: space-between; margin: 0 60px; }
.org-drops > span { width: 2px; height: 14px; background: var(--ink); }
.org-dept { overflow: hidden; }
.org-dept__head { display: flex; gap: 10px; align-items: center; padding: 12px; border-bottom: 2px solid var(--ink); cursor: pointer; }
.org-dept__body { display: flex; flex-direction: column; padding: 6px 12px 10px 24px; }
.org-member {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0 8px 16px;
  border-left: 2px solid var(--ink);
  cursor: pointer;
}
.org-member::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--ink);
}
.org-member__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.org-member__name { font-weight: 700; font-size: 13px; }

/* Attendance calendar (L463-466). */
.cal-head, .cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-head { font-size: 10px; color: var(--muted); text-align: center; margin-bottom: 6px; }
.cal__cell {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 12px;
  font-weight: 700;
}
.cal__tag { font-size: 8px; font-weight: 700; line-height: 1; }

/* Key-value row (L484, L514). */
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.kv__k { color: var(--muted); }
.kv__v { font-weight: 700; }
.kv--box {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
}
.kv--box .kv__k { color: var(--ink); }
/* Destructive account row (退出登录). */
.kv--danger, .kv--danger .kv__k { color: var(--danger); font-weight: 700; }
/* Armed confirm row (重新入职). */
.kv--armed { background: var(--pink-soft); }
/* Account rows rendered as links keep ink text. */
a.kv, a.kv:hover { color: var(--ink); text-decoration: none; }

/* Dashed empty state (L310). */
.empty {
  border: 2px dashed var(--faint);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.empty__title { font-weight: 700; font-size: 14px; }
.empty__text { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Pink warning strip (L231). */
.warn {
  background: var(--pink-soft);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
}

/* Company rule row (L478). */
.rule {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-bottom: 1.5px dashed var(--line-soft);
  padding-bottom: 8px;
}
.rule__k {
  flex: none;
  background: var(--yellow);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 900;
}
.rule__v { font-size: 13px; line-height: 1.45; }

/* 15. Utilities ------------------------------------------------------------- */
.hand { font-family: var(--font-hand); font-weight: 400; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.tiny { font-size: 11px; }
.small { font-size: 12px; }
.bold { font-weight: 700; }
.black { font-weight: 900; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* --gap is set on the element itself (inline) and reset by every .row/.stack, so a nested
   row never inherits its parent's gap. */
.row { --gap: 10px; display: flex; align-items: center; gap: var(--gap); }
.row--base { align-items: baseline; }
.row--top { align-items: flex-start; }
.row--between { justify-content: space-between; }
.stack { --gap: 10px; display: flex; flex-direction: column; gap: var(--gap); }
.grow { flex: 1; min-width: 0; }
.none { flex: none; }
.mt-auto { margin-top: auto; }
.self-center { align-self: center; }
.pop { animation: popin 0.4s ease-out; }
.dashed-top { border-top: 1.5px dashed var(--ink); padding-top: 10px; }