/* Sabai design system ------------------------------------------------------ */
:root {
  --font: "Plus Jakarta Sans", "Noto Sans Thai", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-num: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --r-xs: 8px; --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 24px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --sidebar-w: 252px; --topbar-h: 64px;

  --bg: #F4F5FB;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, #E6E7FF 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, #FFEBDD 0%, transparent 55%);
  --surface: #FFFFFF;
  --surface-2: #F8F8FD;
  --surface-3: #EEEFF8;
  --glass: rgba(255,255,255,.72);
  --text: #16163A;
  --text-2: #4D5072;
  --text-3: #8D90AE;
  --border: #E4E5F1;
  --border-strong: #D0D2E6;

  --primary: #4F46E5;
  --primary-2: #4338CA;
  --primary-soft: #ECEBFF;
  --primary-ink: #312E81;
  --accent: #F97316;
  --accent-soft: #FFEDE0;
  --danger: #E11D48; --danger-soft: #FFE4EA;
  --warn: #D97706; --warn-soft: #FFF4DB;
  --ok: #059669; --ok-soft: #DDF7EC;
  --info: #0284C7; --info-soft: #E0F2FE;

  --t-hero: #D97706; --t-hero-soft: #FFF3D6;
  --t-new: #7C3AED; --t-new-soft: #EFE7FF;
  --t-clear: #E11D48; --t-clear-soft: #FFE6EC;
  --t-reg: #475569; --t-reg-soft: #EDF1F5;

  --shadow-1: 0 1px 2px rgba(22,22,58,.05), 0 1px 1px rgba(22,22,58,.03);
  --shadow-2: 0 1px 2px rgba(22,22,58,.04), 0 6px 18px -6px rgba(22,22,58,.13);
  --shadow-3: 0 2px 6px rgba(22,22,58,.06), 0 18px 40px -12px rgba(22,22,58,.24);
  --shadow-win: 0 2px 8px rgba(22,22,58,.08), 0 30px 70px -20px rgba(22,22,58,.4);
  --ring: 0 0 0 3px rgba(79,70,229,.22);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0D0D1A;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, #1C1A45 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, #2A1A0C 0%, transparent 55%);
  --surface: #15152A; --surface-2: #1A1A32; --surface-3: #22223D;
  --glass: rgba(21,21,42,.8);
  --text: #ECECFA; --text-2: #A9ABCB; --text-3: #6E7096;
  --border: #262646; --border-strong: #34345A;
  --primary: #8B85FF; --primary-2: #6D66F7; --primary-soft: #26245A; --primary-ink: #D6D3FF;
  --accent: #FB923C; --accent-soft: #3A220E;
  --danger: #FB7185; --danger-soft: #3B1520; --warn: #FBBF24; --warn-soft: #3A2C0E;
  --ok: #34D399; --ok-soft: #0F3428; --info: #38BDF8; --info-soft: #0C2D3D;
  --t-hero: #FBBF24; --t-hero-soft: #3A2C0E; --t-new: #A78BFA; --t-new-soft: #2A1F4A;
  --t-clear: #FB7185; --t-clear-soft: #3B1520; --t-reg: #94A3B8; --t-reg-soft: #1F2A33;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 8px 22px -8px rgba(0,0,0,.6);
  --shadow-3: 0 20px 44px -12px rgba(0,0,0,.7); --shadow-win: 0 30px 80px -20px rgba(0,0,0,.85);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text);
  background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
:lang(th) body, html[lang="th"] body { line-height: 1.6; }
/* Thai typography (docs/i18n/style-guide.md §5): no tracking on Thai — it breaks tone marks and vowels; Latin-only numerals keep theirs.
   Tight line-heights get room so ่ ้ ๊ ๋ above and ุ ู below are never clipped. */
html[lang="th"] body *:not(.num):not(.num-big):not(.k-val):not(.b-name):not(.pv):not(.pm):not(svg *) { letter-spacing: normal !important; }
html[lang="th"] :is(.page-title, .win-head .w-title, .spu-name, .ge-title, .hello h2, .login-art h1, .login-card h2) { line-height: 1.4; }
html[lang="th"] :is(.badge, .ack-pend, .role-pill, .plat-badge) { line-height: 1.6; }
a { color: var(--primary); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(79,70,229,.2); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); } .faint { color: var(--text-3); }
.hidden { display: none !important; }
.btn[hidden], .icon-btn[hidden] { display: none !important; } /* .btn sets display:flex, which otherwise beats the hidden attribute */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.row { display: flex; align-items: center; gap: 8px; } .col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; min-width: 0; } .wrap { flex-wrap: wrap; } .between { justify-content: space-between; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 15px; height: 15px; } svg.i.lg { width: 22px; height: 22px; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --b-bg: var(--surface); --b-fg: var(--text); --b-bd: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px;
  border-radius: 11px; border: 1px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg);
  font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; user-select: none;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .12s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s;
}
.btn:hover { border-color: var(--primary); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.primary { --b-bg: linear-gradient(180deg, #6366F1, var(--primary) 60%, #4338CA); --b-fg: #fff; --b-bd: #4338CA; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 14px -6px rgba(79,70,229,.55); }
:root[data-theme="dark"] .btn.primary { --b-bg: linear-gradient(180deg, #8B85FF, #6D66F7); --b-bd: #6D66F7; --b-fg: #fff; }
.btn.primary:hover { filter: brightness(1.05); }
.btn.accent { --b-bg: linear-gradient(180deg, #FBBF24, #F59E0B); --b-fg: #3B2503; --b-bd: #E8930A; }
.btn.danger { --b-bg: var(--danger); --b-fg: #fff; --b-bd: var(--danger); }
.btn.danger-ghost { --b-bg: transparent; --b-fg: var(--danger); --b-bd: transparent; box-shadow: none; }
.btn.ghost { --b-bg: transparent; --b-bd: transparent; box-shadow: none; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); border-color: transparent; box-shadow: none; }
.btn.sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 9px; }
.btn.lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 13px; }
.btn.icon { width: 38px; padding: 0; } .btn.icon.sm { width: 32px; }
.btn .kbd { font-size: 11px; color: var(--text-3); border: 1px solid var(--border); border-radius: 6px; padding: 0 5px; line-height: 18px; }

/* ---------------------------------------------------------------- inputs */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.field .hint { font-size: 12px; color: var(--text-3); }
.input, .select, .textarea {
  height: 40px; width: 100%; padding: 0 12px; border-radius: 11px; border: 1px solid var(--border-strong);
  background: var(--surface); outline: none; transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: var(--ring); }
.input.sm { height: 32px; border-radius: 9px; font-size: 13px; }
.input.num { text-align: right; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > svg.i { position: absolute; left: 11px; color: var(--text-3); pointer-events: none; }
.input-wrap > .input { padding-left: 36px; }
.input-wrap > .suffix { position: absolute; right: 10px; color: var(--text-3); font-size: 12.5px; pointer-events: none; }
.select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A9C97' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.check input { width: 17px; height: 17px; accent-color: var(--primary); }
.switch { position: relative; width: 40px; height: 23px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--border-strong); transition: .2s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .22s var(--ease); }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(17px); }
input[type="range"] { accent-color: var(--primary); }

/* ---------------------------------------------------------------- segmented, tabs, chips, badges */
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: 12px; border: 1px solid var(--border); }
.seg button { border: 0; background: transparent; height: 32px; padding: 0 13px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); }
.seg button .count { font-size: 11px; color: var(--text-3); font-weight: 600; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tabs button.on { color: var(--primary); border-color: var(--primary); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.chip.on { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
:root[data-theme="dark"] .chip.on { color: var(--primary); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; background: var(--surface-3); color: var(--text-2); }
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); } .badge.info { background: var(--info-soft); color: var(--info); }
.badge.primary { background: var(--primary-soft); color: var(--primary); }
.tier { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tier svg.i { width: 13px; height: 13px; stroke-width: 2.3; }
.tier.hero { background: var(--t-hero-soft); color: var(--t-hero); } .tier.new_hero { background: var(--t-new-soft); color: var(--t-new); }
.tier.clearance { background: var(--t-clear-soft); color: var(--t-clear); } .tier.regular { background: var(--t-reg-soft); color: var(--t-reg); }
.pill-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------- cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.card.pad { padding: 18px; } .card.hover { transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .card.hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.card-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; }
.card-head h3 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-head h3 svg.i { color: var(--primary); }
.card-head .more { margin-left: auto; }
.card-body { padding: 4px 18px 18px; }
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; }
.kpi .k-label { font-size: 12.5px; color: var(--text-2); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kpi .k-val { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-num); }
.kpi .k-sub { font-size: 12px; color: var(--text-3); }
.kpi .k-icon { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.empty { padding: 36px 18px; text-align: center; color: var(--text-3); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty .e-art { width: 64px; height: 64px; border-radius: 20px; background: var(--surface-3); display: grid; place-items: center; color: var(--text-3); }
.empty .e-art svg.i { width: 28px; height: 28px; }
.empty b { color: var(--text); font-size: 14.5px; }
.skeleton { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 10px; }
@keyframes sk { to { background-position: -200% 0; } }
.divider { height: 1px; background: var(--border); margin: 12px 0; }

/* ---------------------------------------------------------------- app shell */
#app { min-height: 100%; }
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .25s var(--ease); }
.shell.collapsed { --sidebar-w: 76px; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px;
  background: var(--glass); backdrop-filter: blur(18px) saturate(1.3); border-right: 1px solid var(--border); z-index: 30;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; }
.brand img { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 6px 14px -6px rgba(79,70,229,.6); }
.brand .b-name { font-weight: 800; font-size: 19px; letter-spacing: -.02em; line-height: 1; }
.brand .b-th { font-size: 11px; color: var(--text-3); font-weight: 600; letter-spacing: .02em; }
.ver { cursor: pointer; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: var(--primary-soft); color: var(--primary); border: 0; margin-left: auto; font-family: var(--font-num); }
.ver:hover { filter: brightness(.96); }
.ver.new { background: var(--accent); color: #3B2503; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(245,158,11,.2); } }
.nav { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 0 4px; }
.nav-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 12px 10px 4px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 11px; border-radius: 11px;
  color: var(--text-2); font-weight: 600; cursor: pointer; user-select: none; transition: background .15s, color .15s, transform .2s var(--ease);
  touch-action: pan-y;
}
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item.on { background: var(--surface); color: var(--primary-ink); box-shadow: var(--shadow-2); }
:root[data-theme="dark"] .nav-item.on { color: var(--primary); }
.nav-item.on::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--primary); }
.nav-item .n-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.nav-item.on .n-ico { background: var(--primary-soft); color: var(--primary); }
.nav-item .n-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .n-soon { font-size: 10px; font-weight: 700; color: var(--text-3); border: 1px solid var(--border); padding: 0 5px; border-radius: 6px; }
.nav-item.dragging { opacity: .35; }
.nav-item.drag-ghost { position: fixed; z-index: 9999; pointer-events: none; background: var(--surface); box-shadow: var(--shadow-3); transform: scale(1.03) rotate(-1deg); }
.nav-item.press { transform: scale(.97); background: var(--primary-soft); }
.nav-drop-line { height: 2px; background: var(--primary); border-radius: 2px; margin: -1px 8px; }
.nav-hint { font-size: 11.5px; color: var(--text-3); padding: 6px 10px; }
.shell.collapsed .n-label, .shell.collapsed .nav-sec, .shell.collapsed .n-soon, .shell.collapsed .brand .b-text, .shell.collapsed .nav-hint, .shell.collapsed .side-foot .sf-text { display: none; }
.shell.collapsed .nav-item { justify-content: center; padding: 0; }
.shell.collapsed .brand { justify-content: center; flex-direction: column; gap: 6px; }
.shell.collapsed .ver { margin: 0; }
.side-foot { border-top: 1px solid var(--border); padding-top: 10px; display: flex; align-items: center; gap: 8px; }

.main { min-width: 0; display: flex; flex-direction: column; overflow-x: clip; }
.topbar {
  position: sticky; top: 0; z-index: 25; height: var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 22px;
  background: var(--glass); backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--border);
}
.search-btn { display: flex; align-items: center; gap: 10px; height: 40px; width: min(420px, 40vw); padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); cursor: pointer; box-shadow: var(--shadow-1); }
.search-btn .kbd { margin-left: auto; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; transition: background .15s; }
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn .pill-count { position: absolute; top: 4px; right: 3px; border: 2px solid var(--surface); }
.icon-btn.ring svg.i { animation: ring .9s var(--ease); transform-origin: 50% 10%; }
@keyframes ring { 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
.lang-btn { height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); white-space: nowrap; flex: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; flex: none; background-size: cover; background-position: center; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
.avatar.sm { width: 26px; height: 26px; font-size: 11px; } .avatar.lg { width: 64px; height: 64px; font-size: 24px; }
.me-btn { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border-radius: 99px; border: 0; background: transparent; cursor: pointer; }
.me-btn:hover { background: var(--surface-3); }
.content { padding: 26px 28px 60px; max-width: 1480px; width: 100%; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; display: flex; align-items: center; gap: 12px; }
.page-title .pt-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary-soft), var(--surface)); color: var(--primary); box-shadow: var(--shadow-2); }
.page-sub { margin: 6px 0 0; color: var(--text-2); font-size: 13.5px; }
.page-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-enter { animation: enter .35s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- windows (modals) */
.win-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1000; overflow: hidden; }
.win-backdrop { position: fixed; inset: 0; background: rgba(14,14,40,.34); backdrop-filter: blur(3px); pointer-events: auto; animation: fade .2s both; }
@keyframes fade { from { opacity: 0; } }
.win {
  position: fixed; display: flex; flex-direction: column; pointer-events: auto; min-width: 300px; min-height: 160px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-win); overflow: hidden;
  animation: winIn .26s var(--ease) both;
}
.win.closing { animation: winOut .16s ease-in both; }
@keyframes winIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes winOut { to { opacity: 0; transform: translateY(8px) scale(.98); } }
.win.inactive { box-shadow: var(--shadow-3); }
.win.inactive .win-head { opacity: .85; }
.win.dragging { transition: none; cursor: grabbing; user-select: none; box-shadow: 0 40px 90px -20px rgba(22,22,58,.5); }
.win.maximized { border-radius: 0; }
.win-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 18px; border-bottom: 1px solid var(--border); cursor: grab; user-select: none; flex: none; background: linear-gradient(180deg, var(--surface-2), var(--surface)); touch-action: none; }
.win-head .w-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.win-head .grow { min-width: 0; }
.win-head .w-title, .win-head .w-sub { overflow-wrap: anywhere; }
.win-head .w-title { font-weight: 800; font-size: 16px; line-height: 1.25; }
.win-head .w-sub { font-size: 12.5px; color: var(--text-2); }
.win-head .w-tools { margin-left: auto; display: flex; gap: 2px; }
.win-head .w-tools .icon-btn { width: 34px; height: 34px; border-radius: 10px; }
.win-body { flex: 1; overflow: auto; padding: 18px; min-height: 0; }
.win-foot { flex: none; display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.win-foot .wf-left { margin-right: auto; display: flex; gap: 8px; align-items: center; color: var(--text-2); font-size: 12.5px; }
.win .rz { position: absolute; z-index: 2; }
.rz.n, .rz.s { left: 12px; right: 12px; height: 8px; cursor: ns-resize; } .rz.n { top: -3px; } .rz.s { bottom: -3px; }
.rz.e, .rz.w { top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; } .rz.e { right: -3px; } .rz.w { left: -3px; }
.rz.ne, .rz.nw, .rz.se, .rz.sw { width: 16px; height: 16px; } .rz.ne { top: -3px; right: -3px; cursor: nesw-resize; } .rz.sw { bottom: -3px; left: -3px; cursor: nesw-resize; }
.rz.nw { top: -3px; left: -3px; cursor: nwse-resize; } .rz.se { bottom: -3px; right: -3px; cursor: nwse-resize; }
.win .grip { position: absolute; right: 5px; bottom: 5px; width: 10px; height: 10px; border-right: 2px solid var(--border-strong); border-bottom: 2px solid var(--border-strong); border-radius: 0 0 3px 0; pointer-events: none; }

/* ---------------------------------------------------------------- app windows (modeless) + minimise tray */
.win-layer.app-layer { z-index: 800; }
.win.modeless { box-shadow: var(--shadow-win); }
.win.modeless.inactive { box-shadow: var(--shadow-2); }
.win.minimized { display: none !important; }
.win.resizing { user-select: none; }
.win.app-win .win-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.app-root { --topbar-h: 0px; flex: 1; min-height: 0; overflow: auto; background: var(--bg); padding: 20px 22px 28px; overscroll-behavior: contain; }
.app-root > .app-page { min-height: 100%; }
.app-root[data-page="chat"], .app-root[data-page="mail"] { padding: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); }
.app-root[data-page="chat"] > .app-page, .app-root[data-page="mail"] > .app-page { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: none; }
.app-root .chat-app, .app-root .mail-app { margin: 0 !important; height: 100% !important; flex: 1; min-height: 0; border-left: 0; }
.app-root .p-toolbar { background: linear-gradient(var(--bg) 70%, transparent); }
.app-tray { position: fixed; right: 18px; bottom: 18px; z-index: 850; display: flex; align-items: center; gap: 6px; padding: 6px; max-width: calc(100vw - 36px); overflow-x: auto;
  background: var(--glass); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-3); animation: pop .16s var(--ease) both; }
.tray-item { position: relative; flex: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: transform .12s var(--ease), background .12s; }
.tray-item:hover { background: var(--primary-soft); transform: translateY(-1px); }
.tray-item.chip { width: auto; max-width: 240px; padding: 0 12px; font-weight: 700; font-size: 13px; color: var(--text); }
.tray-item.chip svg.i { color: var(--ok); }
.tray-item .tray-label { min-width: 0; }
.tray-item .pill-count { position: absolute; top: -5px; right: -5px; border: 2px solid var(--surface); }
body.has-tray .toasts { bottom: 86px; }
body.has-tray .mc-tray { bottom: 74px; }

/* ---------------------------------------------------------------- menus, popovers, toasts */
.menu { position: fixed; z-index: 3000; min-width: 210px; max-width: 320px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-3); animation: pop .14s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.menu .m-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left; font-weight: 500; color: var(--text); }
.menu .m-item:hover, .menu .m-item.kb { background: var(--surface-3); }
.menu .m-item.danger { color: var(--danger); }
.menu .m-item .m-kbd { margin-left: auto; color: var(--text-3); font-size: 11.5px; }
.menu .m-item svg.i { color: var(--text-2); } .menu .m-item.danger svg.i { color: var(--danger); }
.menu .m-sep { height: 1px; background: var(--border); margin: 5px 4px; }
.menu .m-head { padding: 6px 10px 4px; font-size: 11.5px; color: var(--text-3); font-weight: 700; }
.popover { max-width: min(400px, calc(100vw - 20px)); }
.popover > [class$="pop-text"], .popover > [class$="-tip"], .popover > .info-tip { padding: 12px 14px; font-size: 13px; line-height: 1.6; color: var(--text-2); white-space: normal; overflow-wrap: anywhere; }
/* the small (i) button (Data Center, LINE, data tasks): global so it is never a default browser button when Settings CSS is not loaded */
button.info-tip { border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 0 3px; vertical-align: middle; display: inline-flex; }
button.info-tip:hover { color: var(--primary); }
.popover { position: fixed; z-index: 2500; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-3); animation: pop .16s var(--ease) both; overflow: hidden; display: flex; flex-direction: column; }
.toasts { position: fixed; z-index: 4000; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; min-width: 280px; max-width: 380px; padding: 13px 14px; border-radius: 15px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-3); animation: toastIn .3s var(--ease) both; cursor: pointer; }
.toast.out { animation: toastOut .2s ease-in both; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }
.toast .t-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.toast .t-title { font-weight: 700; } .toast .t-body { color: var(--text-2); font-size: 13px; }
[data-tip] { position: relative; }
.tip { position: fixed; z-index: 5000; padding: 6px 9px; border-radius: 8px; background: #16163A; color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; max-width: 260px; animation: fade .12s both; box-shadow: var(--shadow-2); }

/* ---------------------------------------------------------------- notification panel */
.np { width: min(420px, calc(100vw - 20px)); max-height: min(620px, calc(100vh - 90px)); }
.np-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px 16px; }
.np-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.np-list { overflow: auto; flex: 1; padding: 4px 8px 8px; }
.np-item { display: flex; gap: 11px; padding: 11px 10px; border-radius: 13px; cursor: pointer; position: relative; }
.np-item:hover { background: var(--surface-2); }
.np-item.unread::after { content: ""; position: absolute; right: 12px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.np-item .np-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.np-item .np-title { font-weight: 700; padding-right: 16px; }
.np-item .np-body { color: var(--text-2); font-size: 13px; }
.np-item .np-time { color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
.np-foot { border-top: 1px solid var(--border); padding: 8px; display: flex; gap: 6px; }

/* ---------------------------------------------------------------- command palette */
.cmdk-input { height: 54px; border: 0; border-bottom: 1px solid var(--border); padding: 0 18px 0 48px; font-size: 16px; width: 100%; outline: none; background: transparent; }
.cmdk-list { max-height: 420px; overflow: auto; padding: 8px; }
.cmdk-item { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 11px; cursor: pointer; }
.cmdk-item.kb, .cmdk-item:hover { background: var(--surface-3); }
.cmdk-item .ci-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-3); display: grid; place-items: center; color: var(--text-2); flex: none; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow: auto; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
table.t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.t th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); text-align: left; font-size: 11.5px; font-weight: 700; color: var(--text-2); padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.t td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr { transition: background .12s; } table.t tbody tr:hover { background: var(--surface-2); }
table.t .r { text-align: right; } table.t .c { text-align: center; }
table.t td.changed { background: var(--accent-soft); }

/* margin bar */
.mbar { display: flex; align-items: center; gap: 7px; min-width: 96px; }
.mbar .track { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; position: relative; }
.mbar .fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; }
.mbar .guard { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text-3); opacity: .5; }
.mbar .v { font-weight: 700; font-size: 12.5px; min-width: 42px; text-align: right; font-family: var(--font-num); }
.good { color: var(--ok); } .meh { color: var(--warn); } .bad { color: var(--danger); }

/* ---------------------------------------------------------------- login */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-art { position: relative; overflow: hidden; background: linear-gradient(150deg, #6366F1, #4F46E5 50%, #2E1F8F); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.login-art .blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .9; }
.login-art h1 { font-size: 40px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -.02em; max-width: 520px; position: relative; }
.login-art p { opacity: .85; max-width: 460px; position: relative; font-size: 15px; }
.login-form { display: grid; place-items: center; padding: 32px; }
.login-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: 16px; }
.login-card h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
/* phones / small tablets: the purple panel becomes a compact brand strip above the form */
@media (max-width: 720px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-art { padding: 14px 18px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 0; }
  .login-art .blob, .login-art > div:last-child { display: none; }
  .login-art img { width: 34px !important; }
  .login-art h1 { font-size: 16px; margin: 0; } .login-art p { display: none; }
  .login-form { place-items: start center; padding: 20px 16px 28px; }
}

/* ---------------------------------------------------------------- workbench */
.hello { position: relative; overflow: hidden; padding: 24px 26px; border-radius: 22px; color: #fff; background: linear-gradient(125deg, #6366F1 0%, #4F46E5 45%, #312E81 100%); box-shadow: 0 20px 40px -18px rgba(79,70,229,.55); display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.hello.night { background: linear-gradient(125deg, #1E1B4B 0%, #312E81 55%, #4338CA 100%); }
.hello.evening { background: linear-gradient(125deg, #F59E0B 0%, #E1306C 55%, #7C3AED 110%); }
.hello h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.hello .h-sub { opacity: .88; margin-top: 4px; }
.hello .h-stats { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.hello .h-stat { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); border-radius: 13px; padding: 8px 12px; backdrop-filter: blur(6px); cursor: pointer; transition: background .15s; }
.hello .h-stat:hover { background: rgba(255,255,255,.22); }
.hello .h-stat b { font-size: 18px; font-family: var(--font-num); display: block; line-height: 1.2; }
.hello .h-stat span { font-size: 12px; opacity: .85; }
.weather { display: flex; align-items: center; gap: 14px; min-width: 250px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; padding: 12px 16px; backdrop-filter: blur(8px); }
.weather .w-temp { font-size: 38px; font-weight: 800; line-height: 1; font-family: var(--font-num); }
.weather .w-place { font-size: 12.5px; opacity: .9; display: flex; gap: 4px; align-items: center; }
.weather .w-days { display: flex; gap: 10px; margin-top: 8px; font-size: 11.5px; opacity: .92; }
.weather .w-days div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wx { width: 64px; height: 64px; flex: none; }
.wx .sun { transform-origin: 32px 32px; animation: spin 18s linear infinite; }
.wx .cloud { animation: drift 5s ease-in-out infinite alternate; }
.wx .drop { animation: drop 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translateX(4px); } }
@keyframes drop { from { transform: translateY(-4px); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(10px); opacity: 0; } }
.hello .deco { position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); pointer-events: none; }
.wb-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.todo { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 11px; transition: background .15s; }
.todo:hover { background: var(--surface-2); }
.todo .t-check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border-strong); background: var(--surface); cursor: pointer; display: grid; place-items: center; flex: none; transition: .2s var(--ease); padding: 0; }
.todo .t-check:hover { border-color: var(--primary); }
.todo.done .t-check { background: var(--primary); border-color: var(--primary); color: #fff; animation: popcheck .35s var(--ease); }
@keyframes popcheck { 40% { transform: scale(1.25); } }
.todo.done .t-title { text-decoration: line-through; color: var(--text-3); }
.todo .t-title { flex: 1; min-width: 0; }
.todo .t-due { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.todo .t-due.over { color: var(--danger); font-weight: 700; }
.prio { width: 4px; align-self: stretch; border-radius: 4px; flex: none; }
.prio.high { background: var(--danger); } .prio.normal { background: var(--info); opacity: .5; } .prio.low { background: var(--border-strong); }
.agenda-item { display: flex; gap: 12px; padding: 9px 4px; }
.agenda-item .a-time { width: 56px; flex: none; font-weight: 700; font-family: var(--font-num); font-size: 13px; }
.agenda-item .a-bar { width: 4px; border-radius: 4px; flex: none; }
.mini-list > * + * { border-top: 1px dashed var(--border); }
.alert-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; }
.cover { min-width: 46px; text-align: center; font-weight: 800; font-size: 12px; padding: 3px 6px; border-radius: 8px; font-family: var(--font-num); }
.camp { display: flex; gap: 10px; align-items: center; padding: 8px 2px; }
.camp .c-date { width: 46px; height: 46px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; color: #fff; font-weight: 800; line-height: 1.05; }
.camp .c-date small { font-size: 10px; font-weight: 700; opacity: .9; text-transform: uppercase; }

/* ---------------------------------------------------------------- pricing */
.p-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 14px; position: sticky; top: calc(var(--topbar-h) + 0px); z-index: 6; padding: 10px 0; background: linear-gradient(var(--bg) 70%, transparent); }
.camp-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; }
.camp-card { flex: none; display: flex; gap: 10px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); min-width: 210px; cursor: default; }
.camp-card .live { font-size: 10.5px; font-weight: 800; color: #fff; background: var(--danger); padding: 1px 6px; border-radius: 6px; animation: pulse 1.6s infinite; }
.tier-section { margin-top: 22px; }
.tier-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tier-head h2 { margin: 0; font-size: 18px; font-weight: 800; }
.tier-head .th-rule { color: var(--text-2); font-size: 13px; }
.tier-head .th-line { flex: 1; height: 1px; background: var(--border); }
.spu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.spu { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-2); overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.spu:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.spu.open { grid-column: 1 / -1; transform: none; }
.spu::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--tier-c, var(--border)); }
.spu.hero { --tier-c: var(--t-hero); } .spu.new_hero { --tier-c: var(--t-new); } .spu.clearance { --tier-c: var(--t-clear); } .spu.regular { --tier-c: var(--t-reg); }
.spu-top { display: flex; gap: 14px; padding: 16px 16px 12px; cursor: pointer; }
.spu-img { width: 84px; height: 84px; border-radius: 16px; flex: none; overflow: hidden; position: relative; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 22px; letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.spu-img img { width: 100%; height: 100%; object-fit: cover; }
.spu-img svg.i { width: 34px; height: 34px; stroke-width: 1.6; opacity: .95; }
.spu-img .ph-brand { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; opacity: .9; text-transform: uppercase; }
.spu-name { font-weight: 800; font-size: 15.5px; line-height: 1.3; }
.spu-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--text-2); }
.spu-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.spu-prices > div { background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.spu-prices .pl { font-size: 11px; color: var(--text-3); font-weight: 700; display: flex; align-items: center; gap: 5px; }
.spu-prices .pv { font-size: 17px; font-weight: 800; font-family: var(--font-num); letter-spacing: -.01em; }
.spu-prices .pv.strike { text-decoration: line-through; color: var(--text-3); font-size: 13px; font-weight: 600; }
.spu-prices .pm { font-size: 11.5px; font-weight: 700; font-family: var(--font-num); }
.plat-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.spu-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; color: var(--text-2); }
.spu-foot .sf-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.spu-skus { border-top: 1px solid var(--border); padding: 12px; background: var(--surface-2); animation: enter .25s var(--ease) both; }
.sku-var { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.sku-code { font-size: 11.5px; color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.stock-pill { font-weight: 700; font-family: var(--font-num); }
.regular-table td:first-child { max-width: 360px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.legend span { display: inline-flex; gap: 6px; align-items: center; }

/* waterfall */
.wf { display: flex; flex-direction: column; gap: 6px; }
.wf-row { display: grid; grid-template-columns: 110px 1fr 82px; gap: 10px; align-items: center; font-size: 13px; }
.wf-row .wf-track { height: 22px; position: relative; background: var(--surface-3); border-radius: 7px; overflow: hidden; }
.wf-row .wf-seg { position: absolute; top: 0; bottom: 0; border-radius: 7px; }
.wf-row .wf-val { text-align: right; font-weight: 700; font-family: var(--font-num); }
.wf-row.total { font-weight: 800; }

/* approvals */
.ap-layout { display: grid; grid-template-columns: 380px 1fr; gap: 16px; align-items: start; }
.ap-list { display: flex; flex-direction: column; gap: 8px; }
.ap-item { padding: 13px 14px; border-radius: 15px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; display: flex; gap: 12px; transition: border-color .15s, box-shadow .15s; }
.ap-item:hover { box-shadow: var(--shadow-2); }
.ap-item.on { border-color: var(--primary); box-shadow: var(--ring); }
.ap-item .ap-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.ap-detail { position: sticky; top: calc(var(--topbar-h) + 16px); }
.timeline { display: flex; flex-direction: column; gap: 14px; padding-left: 4px; }
.tl-item { display: flex; gap: 12px; position: relative; }
.tl-item:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: -14px; width: 2px; background: var(--border); }
.tl-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--text-2); z-index: 1; }
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; padding: 3px 9px; border-radius: 99px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.pending { background: var(--warn-soft); color: var(--warn); } .status.approved { background: var(--ok-soft); color: var(--ok); }
.status.rejected { background: var(--danger-soft); color: var(--danger); } .status.withdrawn { background: var(--surface-3); color: var(--text-3); }

/* settings */
.set-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.set-layout > .card { min-width: 0; }
.set-nav { display: flex; flex-direction: column; gap: 1px; position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; margin: -2px; }
.set-nav button { flex: none; white-space: nowrap; display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: none; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--text-2); text-align: left; min-width: 0; }
.set-nav button:hover { background: var(--surface-3); } .set-nav button.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-2); }
.set-sec { padding: 20px 22px; } .set-sec + .set-sec { border-top: 1px solid var(--border); }
.set-sec h3 { margin: 0 0 4px; font-size: 16px; } .set-sec > p { margin: 0 0 16px; color: var(--text-2); font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.sound-row { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; }
.sound-row + .sound-row { border-top: 1px dashed var(--border); }
.color-dots { display: flex; gap: 8px; flex-wrap: wrap; }
.color-dots button { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.color-dots button.on { box-shadow: 0 0 0 2px var(--primary); }
.secret-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: center; padding: 10px 0; }
.secret-row + .secret-row { border-top: 1px dashed var(--border); }
.api-group { border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; background: var(--surface-2); }
.api-group .ag-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.api-logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; flex: none; }

/* coming soon module */
.soon { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: stretch; }
.soon-hero { padding: 28px; border-radius: 22px; background: linear-gradient(140deg, var(--surface), var(--primary-soft)); border: 1px solid var(--border); box-shadow: var(--shadow-2); }
.soon-hero h2 { margin: 10px 0 8px; font-size: 22px; }
.soon-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.soon-list div { display: flex; gap: 10px; align-items: flex-start; }
.soon-list svg.i { color: var(--primary); margin-top: 2px; }

/* mobile tab bar */
.tabbar { display: none; }
.scrim { position: fixed; inset: 0; background: rgba(14,14,40,.35); z-index: 40; animation: fade .2s both; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1280px) {
  .span-3 { grid-column: span 6; } .span-4 { grid-column: span 6; } .span-5, .span-7 { grid-column: span 12; } .span-8 { grid-column: span 12; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {  /* iPad portrait */
  .shell { grid-template-columns: 76px minmax(0, 1fr); }
  .shell:not(.drawer-open) .n-label, .shell:not(.drawer-open) .nav-sec, .shell:not(.drawer-open) .n-soon, .shell:not(.drawer-open) .brand .b-text, .shell:not(.drawer-open) .nav-hint, .shell:not(.drawer-open) .side-foot .sf-text { display: none; }
  .shell:not(.drawer-open) .nav-item { justify-content: center; padding: 0; }
  .shell:not(.drawer-open) .brand { justify-content: center; flex-direction: column; gap: 6px; } .shell:not(.drawer-open) .ver { margin: 0; }
  .shell.drawer-open .sidebar { position: fixed; left: 0; width: 270px; z-index: 50; box-shadow: var(--shadow-3); background: var(--surface); }
  .ap-layout { grid-template-columns: 1fr; } .ap-detail { position: static; }
  .set-layout { grid-template-columns: 176px minmax(0, 1fr); gap: 12px; }
  .soon { grid-template-columns: 1fr; }
  .content { padding: 20px 18px 60px; }
  .search-btn { width: 260px; }
}
@media (max-width: 900px) {  /* iPad portrait / small laptops: keep bell and avatar on screen */
  .search-btn { width: 40px; flex: none; justify-content: center; padding: 0; } .search-btn .kbd, .search-btn .sb-text { display: none; }
  .lang-btn .lb-text, .me-btn .me-name { display: none; }
  .tb-right { gap: 4px; min-width: 0; } .dock .icon-btn { width: 34px; }
}
@media (max-width: 860px) {  /* settings nav becomes a sticky horizontal strip */
  .set-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .set-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; top: var(--topbar-h); z-index: 5; margin: 0; padding: 6px 0; background: var(--bg); scrollbar-width: none; }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav .set-nav-grp { display: none; }
  .set-nav button { height: 34px; }
}
@media (max-width: 720px) {  /* phone */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .shell.drawer-open .sidebar { display: flex; position: fixed; inset: 0 auto 0 0; width: 82vw; max-width: 320px; z-index: 50; background: var(--surface); }
  .shell.drawer-open .n-label, .shell.drawer-open .nav-sec { display: initial; }
  .topbar { padding: 0 12px; gap: 4px; padding-top: env(safe-area-inset-top); }
  .search-btn { width: auto; flex: 1; } .search-btn .kbd, .search-btn .sb-text { display: none; }
  .lang-btn .lb-text, .me-btn .me-name { display: none; }
  .content { padding: 16px 14px 96px; }
  .page-title { font-size: 21px; } .page-title .pt-ico { width: 36px; height: 36px; }
  .page-actions { margin-left: 0; width: 100%; }
  .g-4, .g-3, .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .wb-grid { grid-template-columns: minmax(0, 1fr); }
  .camp-grid { grid-template-columns: minmax(0, 1fr) !important; } .wb-grid > * { grid-column: auto !important; }
  .hello { grid-template-columns: 1fr; padding: 20px; } .weather { min-width: 0; }
  .spu-grid { grid-template-columns: minmax(0, 1fr); }
  .ap-layout, .set-layout, .soon { grid-template-columns: minmax(0, 1fr); }
  .search-btn { min-width: 0; }
  .win { border-radius: 22px 22px 0 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; top: auto !important; bottom: 0 !important; max-height: 92vh; height: auto !important; animation: sheetIn .3s var(--ease) both; }
  .win .rz, .win .grip { display: none; }
  .win-head { cursor: default; }
  .win-head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--border-strong); }
  @keyframes sheetIn { from { transform: translateY(40%); opacity: 0; } }
  .win-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--glass); backdrop-filter: blur(18px); border-top: 1px solid var(--border); }
  .tabbar button { flex: 1; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--text-3); cursor: pointer; position: relative; }
  .tabbar button.on { color: var(--primary); }
  .tabbar .pill-count { position: absolute; top: 6px; left: calc(50% + 6px); }
  .toasts { left: 12px; right: 12px; bottom: 76px; align-items: stretch; } .toast { max-width: none; }
  /* app windows become full-screen sheets; the tray sits above the tab bar */
  .win.app-win { inset: 0 !important; top: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; border: 0; padding-top: env(safe-area-inset-top); }
  .win.app-win .win-head::before { display: none; }
  .win.app-win .w-max { display: none; }
  .win.app-win .win-head { padding: 10px 10px 10px 14px; }
  .app-root { padding: 14px 14px calc(24px + env(safe-area-inset-bottom)); }
  .app-root .chat-app, .app-root .mail-app { margin: 0 !important; height: 100% !important; }
  .app-tray { right: 12px; bottom: calc(62px + env(safe-area-inset-bottom) + 10px); }
  body.app-sheet-open { overflow: hidden; }
  body.app-sheet-open .app-tray { display: none; }
  body.has-tray .toasts { bottom: 136px; }
  .secret-row { grid-template-columns: 1fr; }
  .wf-row { grid-template-columns: 86px 1fr 70px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ======================================================================= v0.2 shared components */
/* personal dock (top right): my workbench, tasks, calendar, approvals, mail, chat */
.dock { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 14px; background: var(--surface-3); border: 1px solid var(--border); }
.dock .icon-btn { width: 38px; height: 36px; border-radius: 11px; }
.dock .icon-btn.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-2); }
.dock-sep { width: 1px; height: 22px; background: var(--border-strong); margin: 0 4px; }
.topbar .page-crumb { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }

/* avatars */
.avatar { position: relative; }
.avatar .presence { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #22C55E; border: 2px solid var(--surface); }
.avatar.xs { width: 20px; height: 20px; font-size: 9.5px; box-shadow: 0 0 0 1.5px var(--surface); }
.avatar-stack { display: flex; }
.avatar-stack .avatar + .avatar { margin-left: -8px; }
.avatar.more { background: var(--surface-3) !important; color: var(--text-2); font-size: 10px; }

/* entity chip */
.entity-chip { height: 28px; font-weight: 600; background: var(--surface); max-width: 100%; }
.entity-chip:hover { border-color: var(--primary); color: var(--primary); }
.entity-chip svg.i { color: var(--primary); }
.entity-chip .ec-img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }

/* pickers */
.pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow: auto; margin: 0 -6px; }
.pick-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 11px; cursor: pointer; }
.pick-row:hover, .pick-row.on { background: var(--surface-3); }
.pick-row .ci-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-3); display: grid; place-items: center; flex: none; overflow: hidden; color: var(--text-2); }
.pick-row .ci-ico img { width: 100%; height: 100%; object-fit: cover; }

/* mention box */
.mention-box { position: relative; display: flex; flex-direction: column; gap: 6px; }
.mention-pop { position: absolute; left: 8px; bottom: calc(100% - 40px); z-index: 20; min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-3); padding: 4px; }
.mp-row { display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 9px; cursor: pointer; }
.mp-row.kb, .mp-row:hover { background: var(--surface-3); }
.mention { color: var(--primary); font-weight: 700; background: var(--primary-soft); border-radius: 5px; padding: 0 3px; }
.comment { display: flex; gap: 10px; }
.comment-body { white-space: pre-wrap; margin-top: 2px; line-height: 1.55; }

/* asset links */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.asset-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; background: var(--surface); color: var(--text); transition: box-shadow .15s, transform .15s; }
.asset-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.asset-thumb { height: 96px; display: grid; place-items: center; background: var(--surface-3); overflow: hidden; }
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-meta { padding: 8px 10px; min-width: 0; }
.asset-title { font-weight: 700; font-size: 12.5px; }
.asset-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; background: var(--glass); backdrop-filter: blur(6px); }

/* entity panel */
.entity-panel { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.entity-panel .tabs { padding: 0 8px; background: var(--surface-2); align-items: center; }
.entity-panel .tabs .count { font-size: 11px; color: var(--text-3); }
.ep-body { padding: 14px; }
.ep-watch.on { color: var(--primary); }
.tabs .count { font-size: 11px; color: var(--text-3); font-weight: 700; }

/* AI */
.ai-btn { --b-bg: linear-gradient(135deg, var(--primary-soft), var(--accent-soft)); --b-bd: transparent; color: var(--primary-ink); }
:root[data-theme="dark"] .ai-btn { color: var(--primary); }
.ai-out { min-height: 80px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, var(--primary-soft), transparent 70%); border: 1px solid var(--border); }
.ai-text { white-space: pre-wrap; line-height: 1.65; }
.ai-thinking { display: flex; gap: 6px; align-items: center; color: var(--text-2); }
.ai-thinking .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: bounce 1s infinite; }
.ai-thinking .dot:nth-child(2) { animation-delay: .15s; } .ai-thinking .dot:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
@keyframes bounce { 50% { transform: translateY(-5px); opacity: .5; } }

/* charts */
.chart-wrap { width: 100%; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart .grid { stroke: var(--border); stroke-width: 1; }
svg.chart .axis { fill: var(--text-3); font-size: 11px; font-family: var(--font-num); }
svg.chart .pt { opacity: 0; transition: opacity .15s; } svg.chart:hover .pt { opacity: 1; }
.pbar { width: 100%; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.pbar-fill { height: 100%; border-radius: 99px; transition: width .4s var(--ease); }

/* stat list */
.stat-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.stat-row + .stat-row { border-top: 1px dashed var(--border); }
.kv > * { min-width: 0; overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: 13px; }
.kv > :nth-child(odd) { color: var(--text-3); font-weight: 600; }

/* kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kb-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 10px; min-height: 120px; display: flex; flex-direction: column; gap: 8px; }
.kb-col.drop { border-color: var(--primary); box-shadow: var(--ring); }
.kb-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; font-weight: 800; }
.kb-card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 11px 12px; box-shadow: var(--shadow-1); cursor: grab; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .15s, transform .15s; }
.kb-card:hover { box-shadow: var(--shadow-2); }
.kb-card.dragging { opacity: .4; }

/* calendar */
.cal-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cal-title { font-size: 20px; font-weight: 800; min-width: 180px; }
.cal-layers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--border); gap: 1px; }
.cal-dow { background: var(--surface-2); padding: 8px; font-size: 12px; font-weight: 700; color: var(--text-2); text-align: center; }
.cal-cell { background: var(--surface); min-height: 118px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; cursor: default; }
.cal-cell.other { background: var(--surface-2); } .cal-cell.other .cal-num { color: var(--text-3); }
.cal-cell.today .cal-num { background: var(--primary); color: #fff; }
.cal-cell.holiday { background: color-mix(in srgb, #64748B 7%, var(--surface)); }
.cal-cell.weekend .cal-num { color: var(--danger); }
.cal-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; font-family: var(--font-num); }
.cal-ev { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 6px; border-radius: 6px; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--text); }
.cal-ev.allday { background: var(--c); color: #fff; border: 0; }
.cal-ev.done { opacity: .5; text-decoration: line-through; }
.cal-more { font-size: 11px; color: var(--text-2); font-weight: 700; padding: 0 6px; cursor: pointer; }
.week-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); }
.agenda-day { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); }
.agenda-day:first-child { border-top: 0; }
.agenda-date b { font-size: 22px; font-family: var(--font-num); display: block; line-height: 1; }

/* timeline (gantt-ish) */
.tl-row { display: grid; grid-template-columns: 220px 1fr; align-items: center; min-height: 40px; border-top: 1px solid var(--border); }
.tl-track { position: relative; height: 100%; min-height: 40px; }
.tl-bar { position: absolute; top: 8px; height: 24px; border-radius: 8px; color: #fff; font-size: 11.5px; font-weight: 700; padding: 0 8px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; cursor: pointer; }

/* leaderboard */
.lb-row { display: grid; grid-template-columns: 40px 1fr 90px 90px 90px 80px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 13px; }
.lb-row:nth-child(odd) { background: var(--surface-2); }
.lb-rank { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface-3); }
.lb-rank.r1 { background: linear-gradient(135deg, #FDE68A, #F59E0B); color: #7C2D12; } .lb-rank.r2 { background: linear-gradient(135deg, #E5E7EB, #9CA3AF); color: #1F2937; } .lb-rank.r3 { background: linear-gradient(135deg, #FED7AA, #C2410C); color: #fff; }
.delta-up { color: var(--ok); font-weight: 700; font-size: 12px; } .delta-down { color: var(--danger); font-weight: 700; font-size: 12px; }

/* announcement */
.ann { position: relative; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.ann.urgent { border-color: var(--danger); background: linear-gradient(135deg, var(--danger-soft), var(--surface) 60%); }
.ann.important { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), var(--surface) 60%); }
.ann-body { white-space: pre-wrap; line-height: 1.65; }
.ann-banner { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 16px; background: linear-gradient(120deg, var(--accent-soft), var(--primary-soft)); border: 1px solid var(--border); cursor: pointer; margin-bottom: 14px; }

/* generic list rows */
.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--border); cursor: pointer; transition: background .12s; }
.list-row:first-child { border-top: 0; }
.list-row:hover { background: var(--surface-2); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.sticky-side { position: sticky; top: calc(var(--topbar-h) + 16px); }
.section-title { font-size: 15px; font-weight: 800; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.dot-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; }
.dot-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--text-3)); }
.num-big { font-size: 22px; font-weight: 800; font-family: var(--font-num); letter-spacing: -.02em; }

@media (max-width: 1024px) { .split { grid-template-columns: minmax(0, 1fr); } .sticky-side { position: static; } .lb-row { grid-template-columns: 34px 1fr 70px 70px; } .lb-row .lb-hide { display: none; } }
@media (max-width: 720px) {
  .dock { display: none; }
  .cal-cell { min-height: 70px; } .cal-ev span.t { display: none; }
  .agenda-day { grid-template-columns: 70px 1fr; }
  .tl-row { grid-template-columns: 120px 1fr; }
}
.brand-link { color: inherit; display: block; }
.org-pill { display: flex; align-items: center; gap: 7px; margin: -4px 6px 6px; padding: 5px 10px; border-radius: 10px; background: var(--surface-3); font-size: 12px; font-weight: 700; color: var(--text-2); }
.shell.collapsed .org-pill { justify-content: center; padding: 6px; } .shell.collapsed .org-pill .sf-text { display: none; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-top: 4px; }
.shell.collapsed .nav-group + .nav-group { border-top: 1px solid var(--border); padding-top: 6px; }
:root[data-theme="dark"] .login-logo { content: url(/brand/logo-dark.svg?v=n1); }
@media (max-width: 1024px) { .shell:not(.drawer-open) .org-pill .sf-text { display: none; } .shell:not(.drawer-open) .nav-group + .nav-group { border-top: 1px solid var(--border); padding-top: 6px; } }
button.org-pill { border: 0; cursor: pointer; width: calc(100% - 12px); text-align: left; }
button.org-pill:hover { background: var(--primary-soft); color: var(--primary-ink); }
.icon-btn.ai-top { color: var(--primary); background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft)); }
.md { line-height: 1.6; } .md code { background: var(--surface-3); padding: 1px 5px; border-radius: 5px; font-size: .92em; } .md ul, .md ol { margin: 4px 0; } .md h3, .md h4 { font-size: 14.5px; }

/* ---------------------------------------------------------------- one window desk: information windows, window list, pop-in */
.win-layer > .app-tray { pointer-events: auto; }
.win.entity-win { box-shadow: var(--shadow-win); }
.win.entity-win.inactive { box-shadow: var(--shadow-3); }
.win.entity-win .win-head .w-ico { background: var(--info-soft); color: var(--info); }
.tray-item.tray-winlist { color: var(--text-2); }
.tray-item.tray-winlist .pill-count { background: var(--surface-3); color: var(--text); }
.ge-head { display: flex; gap: 14px; align-items: flex-start; }
.ge-img { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; flex: none; background: var(--surface-2); border: 1px solid var(--border); }
.ge-ico { display: grid; place-items: center; color: var(--text-3); }
.ge-title { font-weight: 800; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.topbar .popin-btn { flex: none; white-space: nowrap; }
@media (max-width: 1024px) { .topbar .popin-btn .pi-label { display: none; } }
@media (max-width: 720px) { .topbar .popin-btn { display: none; } .ge-img { width: 72px; height: 72px; } }
/* 待阅: a member's hand-typed number that does not count yet (dataack) */
.ack-pend { display: inline-flex; align-items: center; margin-left: 5px; padding: 0 6px; height: 18px; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 1; background: var(--warn-soft); color: var(--warn); white-space: nowrap; vertical-align: middle; }

/* role badges (core/badges.js): SellerTiger platform operators + the workspace founder */
.plat-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 7px; border-radius: 99px; font-size: 11.5px; font-weight: 700; line-height: 1.6; color: #fff; white-space: nowrap; vertical-align: middle; letter-spacing: .01em; }
.plat-badge.super { background: linear-gradient(120deg, #7C3AED, #DB2777 55%, #F59E0B); box-shadow: 0 1px 6px rgba(219, 39, 119, .35); }
.plat-badge.staff { background: linear-gradient(120deg, #0EA5E9, #4F46E5); box-shadow: 0 1px 6px rgba(79, 70, 229, .3); }
.plat-badge.sm { font-size: 10.5px; padding: 1px 7px 1px 5px; }
.plat-badge svg { width: 12px; height: 12px; }
.role-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; line-height: 1.6; white-space: nowrap; vertical-align: middle;
  background: var(--surface-3, var(--border)); color: var(--text-2, var(--text)); }
.role-pill.owner { background: linear-gradient(120deg, #F59E0B, #F97316); color: #fff; box-shadow: 0 1px 5px rgba(249, 115, 22, .35); }
.role-pill.leader { background: var(--primary-soft); color: var(--primary); }
.role-pill svg { width: 12px; height: 12px; }
.menu .m-head:has(.me-head) { padding: 8px 10px; color: var(--text); font-weight: 400; }
.me-head { display: flex; flex-direction: column; gap: 5px; min-width: 200px; }
.me-head-name { font-size: 14px; font-weight: 800; color: var(--text); line-height: 1.3; }
.me-head-org { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.me-head-badges { display: flex; flex-wrap: wrap; gap: 4px; }