/* 画面内的 dweb：颜色 = apps/web/styles/globals.css @theme（origin/main）。画面固定浅色。 */
.kt-stage {
  --brand-50: #F1F8F4; --brand-100: #E7F7EF; --brand-200: #ADE8DC; --brand-500: #3DCAB1; --brand-600: #26A38C; --brand-700: #0F766E; --brand-800: #115E59;
  --ink-strong: #0A1629; --ink: #1C3E60; --ink-muted: #64748B; --ink-subtle: #94A3B8; --disabled-fill: #CED5E0;
  --line-strong: #D8E0F0; --line: #E5E7EB; --divider: #EDEFF0; --surface-subtle: #F9FAFB;
  --success: #047857; --success-bg: #DEF6F1; --success-solid: #059669;
  --warning: #B45309; --warning-bg: #FEF3C7; --warning-solid: #F59E0B;
  --danger: #DC2626; --danger-bg: #FEECED; --danger-border: #F65160;
  --info: #0369A1; --info-bg: #E0F2FE;
  --status-booked: #0E7490; --status-booked-bg: #E5F8FA; --status-in-progress: #7C6BC9; --status-in-progress-bg: #F4F0FD; --status-auto-confirm: #0284C7;
  --violet-ink: #5B4BB7; --violet-bg: #EEEAFD; --violet-soft: #F3F0FD; --violet-border: #D4CBF9;
  --overlay: rgb(10 22 41 / 0.4);
  --sb-bg: #FAFAFA; --sb-accent: #EDFAF6;
  font-family: Inter, system-ui, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "rlig" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
.kt-stage *, .kt-stage *::before, .kt-stage *::after { box-sizing: border-box; }
.kt-stage button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: default; }
.kt-stage .lu { flex: none; display: block; }

/* 高亮（look）与按下反馈 */
.kt-stage .hl { outline: 3px solid rgba(61, 202, 177, .9); outline-offset: 3px; border-radius: 10px; transition: outline-color .2s; }
.kt-stage .pressed { filter: brightness(.94); }

/* ---------- 工作区 ---------- */
.ws { position: absolute; inset: 0; display: flex; background: #FFFFFF; }
.ws-main { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; }

/* ---------- 侧栏 232px ---------- */
.sb { width: 232px; flex: none; height: 100%; background: var(--sb-bg); border-right: 1px solid var(--divider); display: flex; flex-direction: column; }
.sb-head { padding: 20px 12px 0; }
.sb-store { display: flex; width: 100%; align-items: center; gap: 10px; padding: 0 4px; text-align: left; }
.sb-tile { width: 32px; height: 32px; border-radius: 8px; background: var(--brand-700); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.sb-sname { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sb-sname b { font-size: 15px; font-weight: 600; color: #0A1629; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-sname small { font-size: 12px; color: #8B8FA3; }
.sb-chev { color: #B2B8C2; }
.sb-nav { margin-top: 12px; padding: 0 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.sb-group { display: flex; flex-direction: column; gap: 2px; }
.sb-gh { padding: 0 12px 4px; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ink-subtle); }
.sb-item { position: relative; display: flex; height: 44px; align-items: center; gap: 10px; border-radius: 10px; padding: 0 12px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
.sb-item .lu { color: var(--ink-muted); }
.sb-item.on { background: var(--sb-accent); font-weight: 600; color: var(--brand-700); }
.sb-item.on .lu { color: var(--brand-700); }
.sb-lab { flex: 1; white-space: nowrap; }
.sb-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--danger); }
.sb-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.sb-foot { padding: 0 12px 12px; }
.sb-user { border-top: 1px solid var(--divider); padding: 10px 8px 0; display: flex; align-items: center; gap: 10px; }
.sb-av { width: 32px; height: 32px; border-radius: 999px; background: var(--brand-100); color: var(--brand-700); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sb-uname { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sb-uname b { font-size: 13px; font-weight: 600; color: var(--ink-strong); }
.sb-uname small { font-size: 12px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 页头 64px ---------- */
.ph { height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; }
.ph-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ph-trig { color: #737373; }
.ph-t { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink-strong); white-space: nowrap; }
.ph-r { display: flex; align-items: center; gap: 8px; }

/* ---------- 通用控件（@kit/ui 主按钮 = brand-700 白字，D1-1） ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.btn-primary { background: var(--brand-700); color: #fff; }
.btn-outline { border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-weight: 500; }
.btn-ghost { color: var(--ink); font-weight: 500; }

/* toast：sonner，position="top-center"，richColors（root-shell.tsx:88） */
.toast { position: absolute; left: 50%; top: 32px; z-index: 80; translate: -50% 0; width: 356px; display: flex; align-items: center; gap: 6px; padding: 16px; border-radius: 8px; background: #ECFDF3; border: 1px solid #BFFCD9; color: #008A2E; box-shadow: 0 4px 12px rgba(0, 0, 0, .1); font-size: 13px; font-weight: 500; line-height: 1.5; animation: kt-toast .35s ease; }
.toast .lu { color: #008A2E; }
.toast .t-msg { flex: 1; min-width: 0; }
.toast .t-act { height: 24px; padding: 0 8px; border-radius: 4px; background: #171717; color: #FAFAFA; font-size: 12px; font-weight: 500; flex: none; display: inline-flex; align-items: center; }
@keyframes kt-toast { from { transform: translateY(-16px); opacity: 0; } }

/* 浮层遮罩 */
.overlay { position: absolute; inset: 0; z-index: 40; background: var(--overlay); animation: kt-fade .2s ease; }
@keyframes kt-fade { from { opacity: 0; } }