/* KOLOT CRM — design system. RTL, Hebrew-first.
   Themes: html[data-theme="light"|"dim"|"dark"] (auto is resolved in JS before first paint).
   Text scale: html[data-fs="md"|"lg"|"xl"] → root font-size. All font sizes are rem (1rem = 15px at "md"). */

/* ============ tokens: shared */
:root {
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --font: 'Heebo', 'Assistant', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --side-w: 248px; --top-h: 68px;
  --fs-scale: 1;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: .14s; --t: .22s;
  --on-brand: #fff;
  color-scheme: light;
}
html[data-fs="lg"] { --fs-scale: 1.1; }
html[data-fs="xl"] { --fs-scale: 1.22; }

/* ============ light */
:root, html[data-theme="light"] {
  --bg: #f3f4f9; --bg-glow: radial-gradient(1200px 500px at 85% -10%, rgba(139, 92, 246, .07), transparent 60%), radial-gradient(900px 400px at 0% 0%, rgba(14, 165, 233, .05), transparent 60%);
  --surface: #ffffff; --surface-2: #f9fafc; --surface-3: #f0f2f8; --surface-hover: #f6f4ff; --surface-raised: #ffffff;
  --ink: #131726; --ink-2: #363c50; --ink-3: #5f667e; --ink-4: #80879d; --line: #e3e6ef; --line-2: #eceef5; --line-strong: #d3d7e3;
  --brand: #6d3cf0; --brand-2: #8b5cf6; --brand-soft: #f1ebff; --brand-ink: #4c1fd1; --brand-line: #ddd0ff; --focus: rgba(124, 77, 255, .28);
  --ok: #16a34a; --ok-soft: #e7f7ee; --ok-ink: #15803d; --ok-line: #b7e4c7;
  --warn: #d97706; --warn-soft: #fff4e0; --warn-ink: #92560a; --warn-line: #fde3b0;
  --bad: #dc2626; --bad-soft: #fdecec; --bad-ink: #b42318; --bad-line: #f5b5ae;
  --info: #2563eb; --info-soft: #e8f0ff; --info-ink: #1d4ed8;
  --wa: #1fa855; --wa-soft: #e5f7ec; --wa-ink: #157a3d; --wa-bubble: #dcf8c6;
  --side: #11131e; --side-2: #1a1d2c; --side-3: #23273a; --side-ink: #cdd0e3; --side-ink-2: #8a8fa8; --side-line: #262a3e; --side-hi: #ffffff;
  --top-bg: rgba(243, 244, 249, .78); --top-line: rgba(211, 215, 227, .7);
  --chat-bg: #efeae2; --chat-dot: %23d8d2c6; --bubble-in: #ffffff; --bubble-out: #dcf8c6; --bubble-bot: #ece6ff; --bubble-bot-line: #b9a4fb; --bubble-sb: #fff8e1; --bubble-sb-line: #f59e0b; --bubble-sms: #e9f0ff; --bubble-meta: #667085; --bubble-ink: #111b21;
  --sys-bg: rgba(255, 255, 255, .9); --day-bg: #e1f2fb; --day-ink: #45606e; --chat-tag: rgba(0, 0, 0, .06); --chat-link: #0b7a9a;
  --chart-grid: #eceef5; --chart-text: #80879d; --chart-dot: #ffffff;
  --sk-a: #eceef4; --sk-b: #f7f8fb; --scroll: #d0d4e1; --scroll-h: #b5bacd;
  --today-bg: #faf8ff; --closed-bg: #fbfbfd; --half-line: #f5f6fa; --row-hover: #f8f7ff; --switch-off: #d3d7e3; --selection: #d9ccff;
  --badge-bg: 13%; --badge-ink: 62%; --chip-bg: 16%;
  --scrim: rgba(16, 18, 29, .38);
  --sh-1: 0 1px 2px rgba(16, 18, 29, .05), 0 1px 1px rgba(16, 18, 29, .03);
  --sh-2: 0 8px 24px -8px rgba(16, 18, 29, .14), 0 2px 6px rgba(16, 18, 29, .05);
  --sh-3: 0 28px 70px -14px rgba(16, 18, 29, .32), 0 6px 18px -6px rgba(16, 18, 29, .12);
  --sh-brand: 0 8px 20px -8px rgba(109, 60, 240, .65);
  --card-hi: inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* ============ dim — soft graphite/slate for long sessions */
html[data-theme="dim"] {
  color-scheme: dark;
  --bg: #262b36; --bg-glow: radial-gradient(1200px 500px at 85% -10%, rgba(139, 92, 246, .08), transparent 60%);
  --surface: #2f3542; --surface-2: #2b313d; --surface-3: #383f4d; --surface-hover: #363c4d; --surface-raised: #343a48;
  --ink: #eceef4; --ink-2: #ccd0dc; --ink-3: #a7adbe; --ink-4: #8c93a6; --line: #424a5a; --line-2: #3a4150; --line-strong: #4f5869;
  --brand: #8b5cf6; --brand-2: #a78bfa; --brand-soft: rgba(139, 92, 246, .2); --brand-ink: #cbbcff; --brand-line: rgba(167, 139, 250, .42); --focus: rgba(167, 139, 250, .38);
  --ok: #34c06c; --ok-soft: rgba(52, 192, 108, .16); --ok-ink: #7ddca2; --ok-line: rgba(52, 192, 108, .35);
  --warn: #f0a33a; --warn-soft: rgba(240, 163, 58, .16); --warn-ink: #f6c47c; --warn-line: rgba(240, 163, 58, .38);
  --bad: #f2645c; --bad-soft: rgba(242, 100, 92, .16); --bad-ink: #ffa49e; --bad-line: rgba(242, 100, 92, .4);
  --info: #5b8ff9; --info-soft: rgba(91, 143, 249, .17); --info-ink: #a9c4ff;
  --wa: #2cbf68; --wa-soft: rgba(44, 191, 104, .16); --wa-ink: #7fdba5; --wa-bubble: #2f5a48;
  --side: #1f232d; --side-2: #282d39; --side-3: #313746; --side-ink: #ccd0dc; --side-ink-2: #8d94a7; --side-line: #343a48; --side-hi: #ffffff;
  --top-bg: rgba(38, 43, 54, .8); --top-line: rgba(79, 88, 105, .6);
  --chat-bg: #232831; --chat-dot: %23343b47; --bubble-in: #343b48; --bubble-out: #2f5a48; --bubble-bot: #3c3560; --bubble-bot-line: #7c66c9; --bubble-sb: #4a3f26; --bubble-sb-line: #b58325; --bubble-sms: #2f3f5e; --bubble-meta: #a7adbe; --bubble-ink: #eceef4;
  --sys-bg: rgba(52, 59, 72, .92); --day-bg: #2d4250; --day-ink: #b9d3e2; --chat-tag: rgba(255, 255, 255, .1); --chat-link: #7cc8e0;
  --chart-grid: #3b4251; --chart-text: #9aa1b3; --chart-dot: #2f3542;
  --sk-a: #343a47; --sk-b: #3d4452; --scroll: #4a5263; --scroll-h: #5c6578;
  --today-bg: #332f48; --closed-bg: #2b303b; --half-line: #333948; --row-hover: #353b4a; --switch-off: #4f5869; --selection: rgba(139, 92, 246, .45);
  --badge-bg: 22%; --badge-ink: 52%; --chip-bg: 24%;
  --scrim: rgba(10, 12, 18, .5);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .22);
  --sh-2: 0 10px 26px -10px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .2);
  --sh-3: 0 30px 70px -14px rgba(0, 0, 0, .6);
  --sh-brand: 0 8px 22px -8px rgba(139, 92, 246, .7);
  --card-hi: inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* ============ dark */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1016; --bg-glow: radial-gradient(1200px 520px at 85% -10%, rgba(139, 92, 246, .12), transparent 60%), radial-gradient(900px 400px at 0% 0%, rgba(14, 165, 233, .05), transparent 60%);
  --surface: #161922; --surface-2: #1a1e28; --surface-3: #222734; --surface-hover: #1f2331; --surface-raised: #1b1f2a;
  --ink: #eef0f6; --ink-2: #c9cdd9; --ink-3: #9ca3b5; --ink-4: #7d8498; --line: #2a2f3d; --line-2: #222735; --line-strong: #363c4d;
  --brand: #8b5cf6; --brand-2: #a78bfa; --brand-soft: rgba(139, 92, 246, .18); --brand-ink: #c4b5fd; --brand-line: rgba(139, 92, 246, .42); --focus: rgba(167, 139, 250, .4);
  --ok: #22c55e; --ok-soft: rgba(34, 197, 94, .14); --ok-ink: #6ee7a0; --ok-line: rgba(34, 197, 94, .34);
  --warn: #f59e0b; --warn-soft: rgba(245, 158, 11, .14); --warn-ink: #fcc66a; --warn-line: rgba(245, 158, 11, .36);
  --bad: #f05252; --bad-soft: rgba(240, 82, 82, .14); --bad-ink: #ff9b9b; --bad-line: rgba(240, 82, 82, .38);
  --info: #4f86f7; --info-soft: rgba(79, 134, 247, .15); --info-ink: #9dbcff;
  --wa: #25c26a; --wa-soft: rgba(37, 194, 106, .14); --wa-ink: #73e0a3; --wa-bubble: #005c4b;
  --side: #0a0c11; --side-2: #141722; --side-3: #1c2030; --side-ink: #c9cdd9; --side-ink-2: #7d8498; --side-line: #1d2130; --side-hi: #ffffff;
  --top-bg: rgba(14, 16, 22, .78); --top-line: rgba(54, 60, 77, .6);
  --chat-bg: #0b141a; --chat-dot: %231a252c; --bubble-in: #202c33; --bubble-out: #005c4b; --bubble-bot: #2d2550; --bubble-bot-line: #6d55c9; --bubble-sb: #3a2f12; --bubble-sb-line: #a57617; --bubble-sms: #1f2d4a; --bubble-meta: #99a5ad; --bubble-ink: #e9edef;
  --sys-bg: rgba(32, 44, 51, .95); --day-bg: #182229; --day-ink: #a3b5bf; --chat-tag: rgba(255, 255, 255, .1); --chat-link: #53bdeb;
  --chart-grid: #232836; --chart-text: #848ba0; --chart-dot: #161922;
  --sk-a: #1b1f2a; --sk-b: #252a37; --scroll: #2e3343; --scroll-h: #3f4558;
  --today-bg: #1b1830; --closed-bg: #13161e; --half-line: #1c202b; --row-hover: #1d2130; --switch-off: #363c4d; --selection: rgba(139, 92, 246, .45);
  --badge-bg: 20%; --badge-ink: 50%; --chip-bg: 22%;
  --scrim: rgba(0, 0, 0, .6);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 10px 28px -10px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .35);
  --sh-3: 0 30px 80px -14px rgba(0, 0, 0, .8);
  --sh-brand: 0 8px 24px -8px rgba(139, 92, 246, .8);
  --card-hi: inset 0 1px 0 rgba(255, 255, 255, .035);
}

/* ============ base */
* { box-sizing: border-box; }
html { font-size: calc(15px * var(--fs-scale)); -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--font); background: var(--bg-glow), var(--bg); background-attachment: fixed; color: var(--ink); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; direction: rtl; }
html.theme-anim body, html.theme-anim body * { transition: background-color .3s ease, border-color .3s ease, color .2s ease !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--selection); }
::placeholder { color: var(--ink-4); opacity: 1; }
::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-h); }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: 6px; }
select, option { background-color: var(--surface); color: var(--ink); }
input[type="date"], input[type="time"], input[type="datetime-local"] { color-scheme: inherit; }

/* ============ layout */
.app { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; background: linear-gradient(180deg, var(--side), color-mix(in srgb, var(--side) 88%, #000)); color: var(--side-ink); display: flex; flex-direction: column; padding: 16px 12px 12px; overflow-y: auto; border-inline-start: 1px solid var(--side-line); }
.side::-webkit-scrollbar-thumb { background: var(--side-3); }
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 16px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #a78bfa, #6d3cf0 55%, #4c1fd1); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.07rem; box-shadow: 0 8px 22px -6px rgba(109, 60, 240, .85), inset 0 1px 0 rgba(255, 255, 255, .3); }
.brand-name { font-weight: 800; letter-spacing: .3px; color: var(--side-hi); font-size: 1.07rem; line-height: 1.15; } .brand-sub { font-size: .833rem; color: var(--side-ink-2); }
.nav-group { font-size: .833rem; color: var(--side-ink-2); padding: 16px 12px 6px; letter-spacing: .3px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.nav-group::after { content: ''; flex: 1; height: 1px; background: var(--side-line); }
.nav a { position: relative; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 8px 12px; border-radius: 11px; color: var(--side-ink); font-weight: 500; font-size: .967rem; margin-bottom: 2px; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.nav a:hover { background: var(--side-2); color: var(--side-hi); }
.nav a.active { background: linear-gradient(270deg, rgba(139, 92, 246, .32), rgba(139, 92, 246, .1)); color: var(--side-hi); font-weight: 650; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .22), 0 6px 18px -10px rgba(139, 92, 246, .9); }
.nav a.active::before { content: ''; position: absolute; inset-inline-start: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #c4b5fd, #8b5cf6); box-shadow: 0 0 12px rgba(167, 139, 250, .9); }
.nav a svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.nav a.active svg { opacity: 1; color: #c4b5fd; }
.nav .count { margin-inline-start: auto; background: var(--side-3); color: var(--side-ink); font-size: .833rem; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 20px; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.nav .count.hot { background: linear-gradient(180deg, #f87171, #ef4444); color: #fff; box-shadow: 0 4px 10px -4px rgba(239, 68, 68, .8); }
.side-foot { margin-top: auto; padding: 12px 4px 2px; font-size: .833rem; color: var(--side-ink-2); }
.safe-pill { display: flex; align-items: center; gap: 10px; background: var(--side-2); border: 1px solid var(--side-line); border-radius: 12px; padding: 10px 12px; color: var(--side-ink); cursor: pointer; transition: background var(--t-fast); }
.safe-pill:hover { background: var(--side-3); }
.safe-pill .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .18); }
.safe-pill.live .dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }
.safe-pill .t1 { font-weight: 700; font-size: .867rem; color: var(--side-hi); } .safe-pill .t2 { font-size: .833rem; color: var(--side-ink-2); line-height: 1.35; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 30; min-height: var(--top-h); background: var(--top-bg); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); display: flex; align-items: center; gap: 14px; padding: 8px 28px; border-bottom: 1px solid transparent; transition: border-color var(--t), box-shadow var(--t); }
.top.scrolled { border-bottom-color: var(--top-line); box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .35); }
.page-head { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.top h1 { font-size: 1.4rem; margin: 0; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; line-height: 1.25; }
.page-sub { color: var(--ink-3); font-size: .867rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; line-height: 1.35; }
.top .crumbs { color: var(--ink-3); font-size: .867rem; }
.search { position: relative; margin-inline-start: auto; width: min(400px, 34vw); }
.search input { width: 100%; height: 42px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); padding: 0 42px 0 70px; outline: none; transition: border var(--t-fast), box-shadow var(--t-fast); box-shadow: var(--sh-1); }
.search input:focus { border-color: var(--brand-2); box-shadow: 0 0 0 4px var(--focus); }
.search svg { position: absolute; right: 14px; top: 12px; width: 18px; color: var(--ink-4); }
.search kbd { position: absolute; left: 12px; top: 10px; font: .833rem var(--mono); color: var(--ink-4); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; background: var(--surface-2); }
.search-pop { position: absolute; top: 50px; inset-inline: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-3); padding: 8px; max-height: 70vh; overflow: auto; }
.search-pop .grp { font-size: .833rem; color: var(--ink-4); padding: 6px 8px 2px; font-weight: 700; }
.search-pop a { display: flex; gap: 10px; align-items: center; padding: 9px; border-radius: 10px; } .search-pop a:hover, .search-pop a.sel { background: var(--surface-3); }
.top-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.content { padding: 10px 28px 44px; min-width: 0; }
.content > * { animation: rise .28s var(--ease); }

/* theme + text-size switchers */
.pref-seg { display: inline-flex; align-items: center; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.pref-seg button { border: 0; background: transparent; height: 34px; min-width: 34px; padding: 0 9px; border-radius: var(--r-pill); cursor: pointer; color: var(--ink-3); display: inline-grid; place-items: center; font-weight: 700; font-size: .867rem; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.pref-seg button:hover { color: var(--ink); }
.pref-seg button.on { background: var(--surface); color: var(--brand-ink); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.pref-seg button svg { width: 17px; height: 17px; }
.pref-seg .fs-a { line-height: 1; font-family: var(--font); }
.theme-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.theme-card { border: 2px solid var(--line); border-radius: 16px; background: var(--surface); padding: 10px; cursor: pointer; text-align: start; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.theme-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.theme-card.on { border-color: var(--brand); box-shadow: 0 0 0 4px var(--focus); }
.theme-card .pv { height: 82px; border-radius: 10px; overflow: hidden; display: grid; grid-template-columns: 28% 1fr; border: 1px solid rgba(127, 127, 127, .2); }
.theme-card .pv .s { padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; } .theme-card .pv .s i { display: block; height: 6px; border-radius: 4px; opacity: .55; }
.theme-card .pv .m { padding: 8px; display: flex; flex-direction: column; gap: 6px; } .theme-card .pv .m i { display: block; height: 18px; border-radius: 6px; } .theme-card .pv .m b { display: block; height: 7px; width: 60%; border-radius: 4px; }
.theme-card .nm { font-weight: 700; margin-top: 8px; display: flex; align-items: center; gap: 6px; } .theme-card .nm svg { width: 16px; height: 16px; }
.theme-card .ds { font-size: .833rem; color: var(--ink-3); line-height: 1.4; }
.fs-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.fs-cards button { border: 2px solid var(--line); background: var(--surface); border-radius: 14px; padding: 10px 18px; cursor: pointer; font-weight: 700; color: var(--ink-2); min-width: 120px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.fs-cards button.on { border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 4px var(--focus); }

/* ============ primitives */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1), var(--card-hi); }
.card-h { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.card-h h3 { margin: 0; font-size: 1.033rem; font-weight: 750; letter-spacing: -.1px; } .card-h .sub { color: var(--ink-3); font-size: .867rem; }
.card-h .spacer, .spacer { flex: 1; }
.card-b { padding: 18px 20px; } .card-b.tight { padding: 6px 8px; } .card-b.flush { padding: 0; }
.grid { display: grid; gap: 18px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.row { display: flex; align-items: center; gap: 8px; } .row.wrap { flex-wrap: wrap; } .col { display: flex; flex-direction: column; gap: 8px; }
.muted { color: var(--ink-3); } .faint { color: var(--ink-4); } .small { font-size: .9rem; } .tiny { font-size: .833rem; } .bold { font-weight: 700; } .num { font-variant-numeric: tabular-nums; } .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } .nowrap { white-space: nowrap; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mb16 { margin-bottom: 16px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 2.6rem; height: auto; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: .933rem; cursor: pointer; white-space: nowrap; color: var(--ink); box-shadow: var(--sh-1); transition: background var(--t-fast), border-color var(--t-fast), transform .06s, box-shadow var(--t-fast), color var(--t-fast); }
.btn:hover { background: var(--surface-3); border-color: var(--line-strong); } .btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus); border-color: var(--brand-2); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn.primary { background: linear-gradient(180deg, #8458ff, #6d3cf0 60%, #6232ea); border-color: transparent; color: var(--on-brand); box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn.primary:hover { background: linear-gradient(180deg, #7c4dff, #6232ea); box-shadow: 0 10px 24px -8px rgba(109, 60, 240, .8), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn.wa { background: linear-gradient(180deg, #25b960, #1fa855); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -10px rgba(31, 168, 85, .9), inset 0 1px 0 rgba(255, 255, 255, .2); } .btn.wa:hover { background: #1b9a4d; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; } .btn.ghost:hover { background: var(--surface-3); }
.btn.danger { color: var(--bad); } .btn.danger:hover { background: var(--bad-soft); border-color: var(--bad-line); }
.btn.sm { min-height: 2.27rem; padding: 0 12px; font-size: .867rem; } .btn.icon { width: 2.6rem; min-width: 2.6rem; padding: 0; } .btn.sm.icon { width: 2.27rem; min-width: 2.27rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.seg { display: inline-flex; background: var(--surface-3); border-radius: var(--r-pill); padding: 3px; gap: 2px; border: 1px solid var(--line-2); }
.seg button { border: 0; background: transparent; min-height: 2.2rem; padding: 0 14px; border-radius: var(--r-pill); cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink-3); white-space: nowrap; transition: background var(--t-fast), color var(--t-fast); }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }

.input, .select, textarea.input { min-height: 2.6rem; height: 2.6rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); padding: 0 12px; outline: none; min-width: 0; transition: border var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.input:hover, .select:hover { border-color: var(--line-strong); }
textarea.input { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus { border-color: var(--brand-2); box-shadow: 0 0 0 4px var(--focus); }
.field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: .867rem; color: var(--ink-3); font-weight: 600; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .form-grid .full { grid-column: 1 / -1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); width: 17px; height: 17px; }

.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 1.6rem; padding: 1px 10px; border-radius: 20px; font-size: .833rem; font-weight: 600; white-space: nowrap; background: var(--surface-3); color: var(--ink-2); line-height: 1.3; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge svg { width: 13px; height: 13px; }
.badge.st { background: color-mix(in srgb, var(--c) var(--badge-bg), transparent); color: color-mix(in srgb, var(--c) var(--badge-ink), var(--ink)); }
.badge.st .dot { background: var(--c); }
.badge.ok { background: var(--ok-soft); color: var(--ok-ink); } .badge.warn { background: var(--warn-soft); color: var(--warn-ink); } .badge.bad { background: var(--bad-soft); color: var(--bad-ink); } .badge.info { background: var(--info-soft); color: var(--info-ink); } .badge.brand { background: var(--brand-soft); color: var(--brand-ink); } .badge.wa { background: var(--wa-soft); color: var(--wa-ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 2.27rem; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); font-size: .9rem; cursor: pointer; font-weight: 500; color: var(--ink-2); transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.chip:hover { border-color: var(--line-strong); background: var(--surface-2); }
.chip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
html[data-theme="dim"] .chip.on, html[data-theme="dark"] .chip.on { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); } .chip .n { font-size: .833rem; opacity: .75; }
/* tinted helper: style="--c:#hex" */
.tint { background: color-mix(in srgb, var(--c) var(--chip-bg), transparent) !important; color: color-mix(in srgb, var(--c) 78%, var(--ink)) !important; }

.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .867rem; color: #fff; flex: none; letter-spacing: -.3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.avatar.sm { width: 28px; height: 28px; font-size: .833rem; } .avatar.lg { width: 58px; height: 58px; font-size: 1.4rem; }

/* ============ tables */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th { text-align: start; font-size: .833rem; color: var(--ink-3); font-weight: 700; padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); position: sticky; top: 0; z-index: 1; white-space: nowrap; letter-spacing: .1px; }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr.click { cursor: pointer; } .table tr.click td { transition: background var(--t-fast); } .table tr.click:hover td { background: var(--row-hover); }
.table tr:last-child td { border-bottom: 0; }
.table .r { text-align: end; }
.table-wrap { overflow: auto; border-radius: var(--r-lg); }

/* ============ KPI */
.kpi { padding: 18px 20px; position: relative; overflow: hidden; transition: transform var(--t), box-shadow var(--t); }
.kpi::after { content: ''; position: absolute; top: -60px; inset-inline-start: -60px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%); pointer-events: none; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.kpi .label { color: var(--ink-3); font-size: .9rem; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.kpi .value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.6px; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi .delta { font-size: .833rem; font-weight: 700; margin-top: 2px; } .delta.up { color: var(--ok); } .delta.down { color: var(--bad); }
.kpi .spark { position: absolute; left: 14px; bottom: 14px; opacity: .95; }
.kpi .ico, .ico-chip { --c: var(--brand); width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 26%, transparent), color-mix(in srgb, var(--c) 9%, transparent)) !important; color: color-mix(in srgb, var(--c) 80%, var(--ink)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent); }
.kpi .ico svg, .ico-chip svg { width: 18px; height: 18px; }

/* ============ lists */
.list-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; cursor: pointer; transition: background var(--t-fast); } .list-item:hover { background: var(--surface-3); }
.list-item .main-t { font-weight: 600; } .list-item .sub-t { color: var(--ink-3); font-size: .867rem; }
.empty { text-align: center; padding: 44px 20px; color: var(--ink-3); line-height: 1.6; }
.empty .big { font-size: 2.2rem; margin: 0 auto 10px; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, var(--brand-soft), var(--surface-3)); box-shadow: inset 0 0 0 1px var(--line); }

/* ============ kanban */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.lane { background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 10px; min-height: 200px; }
.lane-h { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; font-weight: 700; }
.lane-h .n { color: var(--ink-3); font-weight: 600; font-size: .867rem; } .lane-h .bar { width: 4px; height: 16px; border-radius: 4px; }
.lane.drop { outline: 2px dashed var(--brand-2); outline-offset: -4px; background: var(--brand-soft); }
.kcard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; margin-bottom: 8px; box-shadow: var(--sh-1), var(--card-hi); cursor: pointer; transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast); }
.kcard:hover { box-shadow: var(--sh-2); transform: translateY(-1px); border-color: var(--line-strong); } .kcard.dragging { opacity: .45; }
.kcard .t { font-weight: 650; } .kcard .m { color: var(--ink-3); font-size: .833rem; margin-top: 3px; }

/* ============ drawer / modal / toast */
.scrim { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(2px); z-index: 60; animation: fade .18s; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(780px, 94vw); background: var(--bg); z-index: 61; box-shadow: var(--sh-3); display: flex; flex-direction: column; animation: slide .24s var(--ease); border-inline-start: 1px solid var(--line); }
.drawer-h { display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: var(--surface); border-bottom: 1px solid var(--line); }
.drawer-b { flex: 1; overflow: auto; padding: 20px 22px; }
.modal { position: fixed; z-index: 62; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(580px, 94vw); max-height: 88vh; overflow: auto; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-3); animation: pop .18s var(--ease); }
.modal-h { padding: 20px 24px 6px; font-weight: 800; font-size: 1.15rem; letter-spacing: -.2px; } .modal-b { padding: 12px 24px; } .modal-f { padding: 14px 24px 20px; display: flex; gap: 8px; justify-content: flex-start; }
.toasts { position: fixed; bottom: 22px; left: 22px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #1b1e2b; color: #fff; padding: 12px 18px; border-radius: 14px; box-shadow: var(--sh-3); font-weight: 500; max-width: 440px; border: 1px solid rgba(255, 255, 255, .08); animation: toastin .22s var(--ease); } .toast.err { background: #b91c1c; } .toast.ok { background: #15803d; }
@keyframes fade { from { opacity: 0; } } @keyframes slide { from { transform: translateX(-30px); opacity: 0; } } @keyframes pop { from { transform: translate(-50%, -48%) scale(.98); opacity: 0; } }
@keyframes toastin { from { transform: translateY(8px); opacity: 0; } } @keyframes rise { from { transform: translateY(4px); opacity: 0; } }

/* ============ tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 11px 14px; font-weight: 600; color: var(--ink-3); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color var(--t-fast), border-color var(--t-fast); border-radius: 8px 8px 0 0; }
.tabs button:hover { color: var(--ink); background: var(--surface-2); }
.tabs button.on { color: var(--brand-ink); border-bottom-color: var(--brand); } .tabs button .n { font-size: .833rem; color: var(--ink-4); margin-inline-start: 4px; }

/* ============ timeline / chat */
.timeline { display: flex; flex-direction: column; gap: 2px; }
.tl { display: flex; gap: 12px; padding: 9px 4px; } .tl .ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--ink-3); } .tl .ic svg { width: 15px; height: 15px; }
.tl .body { flex: 1; min-width: 0; } .tl .when { color: var(--ink-4); font-size: .833rem; white-space: nowrap; }
.tl .txt { white-space: pre-wrap; word-break: break-word; color: var(--ink-2); margin-top: 2px; }
.chat-wall, .chat { background-color: var(--chat-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23000' fill-opacity='.08'/%3E%3C/svg%3E"); }
html[data-theme="dim"] .chat-wall, html[data-theme="dim"] .chat, html[data-theme="dark"] .chat-wall, html[data-theme="dark"] .chat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23fff' fill-opacity='.05'/%3E%3C/svg%3E"); }
.chat { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.bubble { max-width: 76%; padding: 8px 12px 6px; border-radius: 12px; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); white-space: pre-wrap; word-break: break-word; font-size: 1rem; position: relative; color: var(--bubble-ink); line-height: 1.55; }
.bubble.in { align-self: flex-start; background: var(--bubble-in); border-top-right-radius: 4px; }
.bubble.out { align-self: flex-end; background: var(--bubble-out); border-top-left-radius: 4px; }
.bubble.bot { align-self: flex-end; background: var(--bubble-bot); border: 1px dashed var(--bubble-bot-line); }
.bubble.sandbox { align-self: flex-end; background: var(--bubble-sb); border: 1px dashed var(--bubble-sb-line); }
.bubble .meta { font-size: .833rem; color: var(--bubble-meta); text-align: left; margin-top: 2px; }
.sysmsg { align-self: center; background: var(--sys-bg); color: var(--ink-3); font-size: .833rem; padding: 4px 12px; border-radius: 9px; }
.day-sep { align-self: center; background: var(--day-bg); color: var(--day-ink); font-size: .833rem; padding: 3px 12px; border-radius: 9px; margin: 6px 0; font-weight: 600; }

/* ============ calendar */
.cal { display: grid; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--sh-1); }
.cal-head { display: grid; background: var(--surface-2); border-bottom: 1px solid var(--line); } .cal-head div { padding: 10px; font-weight: 700; font-size: .9rem; text-align: center; border-inline-start: 1px solid var(--line-2); } .cal-head .today { color: var(--brand); }
.cal-body { display: grid; position: relative; overflow-y: auto; max-height: calc(100vh - 240px); }
.cal-hours { border-inline-end: 1px solid var(--line-2); } .cal-hours div { height: 52px; font-size: .833rem; color: var(--ink-4); text-align: center; padding-top: 2px; }
.cal-col { position: relative; border-inline-start: 1px solid var(--line-2); background-image: linear-gradient(var(--line-2) 1px, transparent 1px); background-size: 100% 52px; }
.cal-col.today { background-color: var(--today-bg); }
.ev { position: absolute; inset-inline: 3px; border-radius: 9px; padding: 4px 7px; font-size: .833rem; overflow: hidden; cursor: pointer; border-inline-start: 3px solid; box-shadow: var(--sh-1); line-height: 1.3; }
.ev:hover { z-index: 5; box-shadow: var(--sh-2); } .ev .t { font-weight: 700; } .ev.off { background: repeating-linear-gradient(45deg, var(--surface-3), var(--surface-3) 6px, var(--surface-2) 6px, var(--surface-2) 12px); border-color: var(--line-strong); color: var(--ink-3); cursor: default; }
.now-line { position: absolute; inset-inline: 0; height: 2px; background: #ef4444; z-index: 4; box-shadow: 0 0 8px rgba(239, 68, 68, .6); } .now-line::before { content: ''; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }

/* ============ charts */
.chart { width: 100%; display: block; } .chart text { font-family: var(--font); font-size: .833rem; fill: var(--chart-text); }
.chart .grid-l { stroke: var(--chart-grid); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .867rem; color: var(--ink-3); } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; vertical-align: -1px; }
.hbar { display: grid; grid-template-columns: 130px 1fr 76px; gap: 10px; align-items: center; padding: 6px 0; font-size: .9rem; }
.hbar .track { height: 10px; background: var(--surface-3); border-radius: 10px; overflow: hidden; } .hbar .fill { height: 100%; border-radius: 10px; background: linear-gradient(90deg, #a78bfa, #6d3cf0); }
.progress { height: 7px; background: var(--surface-3); border-radius: 10px; overflow: hidden; } .progress > div { height: 100%; background: linear-gradient(90deg, #4ade80, var(--ok)); border-radius: 10px; }

/* ============ misc */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pill-steps { display: flex; gap: 4px; flex-wrap: wrap; } .pill-steps span { font-size: .833rem; padding: 2px 9px; border-radius: 20px; background: var(--surface-3); color: var(--ink-3); cursor: pointer; } .pill-steps span.done { background: var(--ok-soft); color: var(--ok-ink); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 9px 12px; font-size: .933rem; } .kv dt { color: var(--ink-3); } .kv dd { margin: 0; min-width: 0; word-break: break-word; }
.code { font-family: var(--mono); font-size: .833rem; background: var(--surface-3); color: var(--ink-2); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; direction: ltr; text-align: left; max-height: 340px; overflow: auto; }
.code-chip { font-family: var(--mono); font-size: .833rem; background: var(--surface); color: var(--ink); padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); }
.banner { display: flex; gap: 12px; align-items: center; padding: 13px 18px; border-radius: 14px; background: linear-gradient(90deg, var(--warn-soft), color-mix(in srgb, var(--warn-soft) 40%, var(--surface))); border: 1px solid var(--warn-line); color: var(--warn-ink); margin-bottom: 16px; }
.banner.brand { background: linear-gradient(90deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 35%, var(--surface))); border-color: var(--brand-line); color: var(--brand-ink); }
.skeleton { background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 37%, var(--sk-a) 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: 8px; } @keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.switch { position: relative; width: 42px; height: 24px; border-radius: 20px; background: var(--switch-off); cursor: pointer; transition: background .18s; flex: none; border: 0; } .switch::after { content: ''; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: right .18s var(--ease); } .switch.on { background: var(--ok); } .switch.on::after { right: 21px; }
.switch:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus); }
.section-title { font-size: .9rem; font-weight: 700; color: var(--ink-3); margin: 20px 0 8px; letter-spacing: .2px; }
.hr { height: 1px; background: var(--line); margin: 14px 0; }
.link { color: var(--brand-ink); font-weight: 600; cursor: pointer; } .link:hover { text-decoration: underline; }
details > summary { cursor: pointer; }
iframe { color-scheme: light; }

.col, .grid > * { min-width: 0; }
.menu-btn { display: none; }
@media (max-width: 1360px) { .top-tools .fs-seg { display: none; } }
@media (max-width: 1100px) { .page-sub { display: none; } .search { width: min(320px, 30vw); } }
@media (max-width: 860px) { .menu-btn { display: inline-flex; } .side.open { display: flex; position: fixed; z-index: 70; right: 0; top: 0; width: 276px; box-shadow: var(--sh-3); } }
@media (max-width: 1200px) { .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-main { grid-template-columns: minmax(0, 1fr); } .theme-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .app { grid-template-columns: minmax(0, 1fr); } .side { display: none; } .g2, .g3 { grid-template-columns: minmax(0, 1fr); } .content { padding: 8px 14px 30px; } .top { padding: 8px 14px; flex-wrap: wrap; } .hbar { grid-template-columns: 90px 1fr 64px; } .search kbd { display: none; } .search input { padding-left: 12px; } .top-tools { order: 5; } }
@media (max-width: 520px) { .g4 { grid-template-columns: minmax(0, 1fr); } .kpi .spark { display: none; } .search { width: 100%; order: 6; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}