/* Technocracy prototype kit. Every colour lives here as a variable; apps use the variables only. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --raised: #eef3f9;
  --border: #dbe4ee;
  --text: #0a1424;
  --text-2: #3d4a5c;
  --link: #005a94;
  --accent: #0072bc;
  --on-accent: #ffffff;
  --scrim: rgba(10, 20, 36, 0.45);

  --ok: #17703a;      --ok-bg: #e7f4ec;
  --warn: #8a5a00;    --warn-bg: #fdf2dc;
  --danger: #b42318;  --danger-bg: #fdecea;
  --info: #005a94;    --info-bg: #e5f0f8;
  --neutral: #3d4a5c; --neutral-bg: #eef3f9;

  --selected-bg: #e5f0f8;
  /* Chart series: not status colours. */
  --s1: #0072bc; --s2: #5b6878; --s3: #00446f; --s4: #8a6d1f;

  --r-card: 16px; --r-ctl: 12px; --r-chip: 999px;
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --sidebar-w: 248px;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07090d;
  --surface: #11151c;
  --raised: #1a2029;
  --border: #262e39;
  --text: #eef2f7;
  --text-2: #aeb8c4;
  --link: #6cb6ea;
  --scrim: rgba(0, 0, 0, 0.6);

  --ok: #6fcf8e;      --ok-bg: #11291b;
  --warn: #e9b45a;    --warn-bg: #2d2311;
  --danger: #ff9a92;  --danger-bg: #34181a;
  --info: #6cb6ea;    --info-bg: #0f2536;
  --neutral: #aeb8c4; --neutral-bg: #1a2029;

  --selected-bg: #0f2536;
  --s1: #6cb6ea; --s2: #aeb8c4; --s3: #b5d9f2; --s4: #d7c38a;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; background: var(--bg); color: var(--text); }
h1, h2, h3, h4 { margin: 0 0 8px; line-height: 1.25; font-weight: 600; }
h1 { font-size: 26px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
p { margin: 0 0 12px; }
a { color: var(--link); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
[hidden] { display: none !important; }
.k-muted { color: var(--text-2); }
.k-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.k-stack > * + * { margin-top: 16px; }
.k-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.k-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.k-section { margin-bottom: 40px; scroll-margin-top: 88px; }

/* ---------- App shell ---------- */
.k-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
/* The sidebar's column background runs the full page height (a layer behind it); the sidebar itself stays sticky. */
.k-shell::before { content: ""; grid-column: 1; grid-row: 1; background: var(--surface); border-right: 1px solid var(--border); }
.k-sidebar { grid-column: 1; grid-row: 1; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); padding: 20px 12px; display: flex; flex-direction: column; gap: 4px; }
.k-product { display: flex; align-items: center; gap: 10px; padding: 0 10px 18px; font-weight: 700; font-size: 16px; line-height: 1.2; }
.k-product i { width: 36px; height: 36px; border-radius: var(--r-ctl); display: grid; place-items: center; background: var(--accent); color: var(--on-accent); flex: none; }
.k-nav-label { font-size: 12px; font-weight: 600; color: var(--text-2); padding: 14px 12px 4px; }
.k-nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: var(--r-ctl); color: var(--text-2); text-decoration: none; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; font-weight: 500; }
.k-nav-item i { width: 18px; text-align: center; }
.k-nav-item:hover { background: var(--raised); color: var(--text); }
.k-nav-item[aria-current="page"], .k-nav-item[aria-current="true"] { background: var(--selected-bg); color: var(--link); font-weight: 600; }
.k-main { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; }
.k-topbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
.k-topbar .k-search { flex: 1 1 260px; max-width: 420px; }
.k-topbar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.k-content { padding: 24px; width: 100%; max-width: 1280px; }
.k-btn.k-menu-btn { display: none; }
.k-scrim { display: none; }

@media (max-width: 1023px) {
  .k-shell { grid-template-columns: minmax(0, 1fr); }
  .k-shell::before { display: none; }
  .k-main { grid-column: 1; }
  .k-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(280px, 85vw); visibility: hidden; transform: translateX(-100%); transition: transform .2s, visibility .2s; }
  .k-shell.is-nav-open .k-sidebar { visibility: visible; transform: none; }
  .k-shell.is-nav-open .k-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: var(--scrim); }
  .k-btn.k-menu-btn { display: inline-flex; }
  .k-topbar { padding: 10px 16px; }
  .k-topbar .k-search { order: 10; flex-basis: 100%; max-width: none; }
  .k-content { padding: 16px; }
}

/* ---------- Search ---------- */
.k-search { position: relative; }
.k-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.k-search input { padding-left: 40px; }

/* ---------- Sample badge ---------- */
.k-sample { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border-radius: var(--r-chip); background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ---------- Buttons ---------- */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .12s, border-color .12s; }
.k-btn:hover { border-color: var(--link); transform: translateY(-1px); }
.k-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.k-btn--primary:hover { border-color: var(--accent); }
.k-btn--ghost { border-color: transparent; background: transparent; color: var(--link); }
.k-icon-btn { width: 44px; padding: 0; }
.k-btn:disabled, .k-btn[aria-disabled="true"] { background: var(--raised); border-color: var(--border); color: var(--text-2); cursor: not-allowed; transform: none; }

/* Tooltip for disabled controls and icon buttons: <button aria-disabled="true" data-tip="Why"> */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 240px; padding: 6px 10px; border-radius: 8px; background: var(--text); color: var(--bg);
  font-size: 13px; font-weight: 500; line-height: 1.35; white-space: normal; text-align: center; z-index: 60; pointer-events: none;
}

/* ---------- Forms ---------- */
.k-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.k-field > label, .k-label { font-weight: 600; font-size: 14px; }
.k-hint { font-size: 13px; color: var(--text-2); }
.k-input, .k-select, .k-textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--surface); color: var(--text); }
.k-textarea { min-height: 96px; resize: vertical; }
.k-input::placeholder, .k-textarea::placeholder { color: var(--text-2); }
.k-select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.k-input[aria-invalid="true"], .k-select[aria-invalid="true"], .k-textarea[aria-invalid="true"] { border-color: var(--danger); }
.k-error { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--danger); }
.k-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.k-check input:not(.k-switch) { width: 20px; height: 20px; accent-color: var(--accent); }

/* Switch: <input type="checkbox" role="switch" class="k-switch"> */
.k-switch { appearance: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: var(--r-chip); background: var(--border); border: 1px solid var(--text-2); cursor: pointer; flex: none; transition: background .15s; }
.k-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 1px solid var(--text-2); transition: transform .15s; }
.k-switch:checked { background: var(--accent); border-color: var(--accent); }
.k-switch:checked::before { transform: translateX(18px); border-color: var(--accent); }

/* ---------- Cards ---------- */
.k-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 20px; }
.k-card--link { display: block; width: 100%; text-align: left; color: inherit; text-decoration: none; cursor: pointer; transition: transform .12s, border-color .12s; }
.k-card--link:hover { transform: translateY(-2px); border-color: var(--link); }
.k-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.k-card-head h2, .k-card-head h3 { margin: 0; }
.k-metric { font-size: 30px; font-weight: 700; line-height: 1.1; }
.k-metric-label { color: var(--text-2); font-size: 14px; }

/* ---------- Status and filter chips ---------- */
.k-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-chip); font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--neutral-bg); color: var(--neutral); }
.k-status[data-status="ok"] { background: var(--ok-bg); color: var(--ok); }
.k-status[data-status="warn"] { background: var(--warn-bg); color: var(--warn); }
.k-status[data-status="danger"] { background: var(--danger-bg); color: var(--danger); }
.k-status[data-status="info"] { background: var(--info-bg); color: var(--info); }
.k-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px; border-radius: var(--r-chip); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 500; cursor: pointer; }
.k-chip:hover { border-color: var(--link); }
.k-chip[aria-pressed="true"] { background: var(--selected-bg); border-color: var(--link); color: var(--link); font-weight: 600; }

/* ---------- Tables ---------- */
.k-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.k-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.k-table th, .k-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.k-table th { background: var(--raised); font-weight: 600; color: var(--text-2); font-size: 13px; }
.k-table tbody tr:last-child td { border-bottom: 0; }
.k-table tbody tr[data-href], .k-table tbody tr.is-clickable { cursor: pointer; }
.k-table tbody tr:hover td { background: var(--raised); }
.k-sort { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: none; font-weight: 600; color: inherit; cursor: pointer; }
.k-sort i { font-size: 12px; }

/* ---------- Tabs ---------- */
.k-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.k-tab { min-height: 44px; padding: 8px 16px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--text-2); font-weight: 500; cursor: pointer; white-space: nowrap; }
.k-tab:hover { color: var(--text); }
.k-tab[aria-selected="true"] { color: var(--link); border-bottom-color: var(--link); font-weight: 600; }

/* ---------- Menu ---------- */
.k-menu-wrap { position: relative; }
.k-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; padding: 6px; margin: 0; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-ctl); }
.k-menu [role="menuitem"] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; }
.k-menu [role="menuitem"]:hover, .k-menu [role="menuitem"]:focus-visible { background: var(--raised); }
.k-menu [role="menuitem"][aria-disabled="true"] { color: var(--text-2); cursor: not-allowed; }
.k-menu-head { padding: 8px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; font-size: 14px; }
.k-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--selected-bg); color: var(--link); font-weight: 700; font-size: 13px; flex: none; }

/* ---------- Modal (native dialog) ---------- */
.k-modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 8px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); color: var(--text); }
.k-modal::backdrop { background: var(--scrim); }
.k-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.k-modal-head h2 { margin: 0; font-size: 18px; }
.k-modal-body { padding: 12px; }
.k-modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border); }

/* ---------- Toasts ---------- */
.k-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.k-toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--surface); color: var(--text); animation: k-in .2s ease-out; }
.k-toast i { margin-top: 3px; }
.k-toast[data-status="ok"] i { color: var(--ok); }
.k-toast[data-status="warn"] i { color: var(--warn); }
.k-toast[data-status="danger"] i { color: var(--danger); }
.k-toast[data-status="info"] i { color: var(--info); }
.k-toast .k-btn { min-height: 32px; margin-left: auto; padding: 0 8px; }
@keyframes k-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Empty state ---------- */
.k-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px; color: var(--text-2); }
.k-empty > i { font-size: 28px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--raised); color: var(--text-2); }
.k-empty h2, .k-empty h3 { color: var(--text); margin: 4px 0 0; font-size: 16px; }

/* ---------- Timeline ---------- */
.k-timeline { list-style: none; margin: 0; padding: 0; }
.k-timeline li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding-bottom: 20px; }
.k-timeline li::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--border); }
.k-timeline li:last-child::before { display: none; }
.k-timeline-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--neutral-bg); color: var(--neutral); font-size: 14px; }
.k-timeline li[data-status="ok"] .k-timeline-dot { background: var(--ok-bg); color: var(--ok); }
.k-timeline li[data-status="info"] .k-timeline-dot { background: var(--info-bg); color: var(--info); }
.k-timeline li[data-status="warn"] .k-timeline-dot { background: var(--warn-bg); color: var(--warn); }
.k-timeline li[data-status="danger"] .k-timeline-dot { background: var(--danger-bg); color: var(--danger); }
.k-timeline-meta { font-size: 13px; color: var(--text-2); }

/* ---------- Progress ---------- */
.k-progress { height: 8px; border-radius: var(--r-chip); background: var(--raised); overflow: hidden; }
.k-progress > span { display: block; height: 100%; background: var(--accent); }

/* ---------- Charts ---------- */
.k-chart { position: relative; overflow-x: auto; }
.k-chart > svg { display: block; width: 100%; min-width: 440px; height: auto; }
.k-chart .k-grid-line { stroke: var(--border); }
.k-chart text { fill: var(--text-2); font-size: 12px; font-family: var(--font); }
.k-chart .k-s1 { stroke: var(--s1); fill: var(--s1); }
.k-chart .k-s2 { stroke: var(--s2); fill: var(--s2); }
.k-chart .k-s3 { stroke: var(--s3); fill: var(--s3); }
.k-chart .k-s4 { stroke: var(--s4); fill: var(--s4); }
.k-chart polyline[class] { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.k-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.k-legend span { display: inline-flex; align-items: center; gap: 6px; }
.k-legend svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .k-btn:hover, .k-card--link:hover { transform: none; }
}

/* ---------- Page header, nav count, key-value list, item list ---------- */
.k-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.k-page-head h1 { margin: 0; }
.k-page-head p { margin: 4px 0 0; color: var(--text-2); }
.k-nav-count { margin-left: auto; min-width: 24px; padding: 2px 8px; border-radius: var(--r-chip); background: var(--raised); color: var(--text); font-size: 13px; font-weight: 700; text-align: center; }
.k-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
.k-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 16px; }
.k-dl dt { color: var(--text-2); }
.k-dl dd { margin: 0; font-weight: 500; }
.k-list { list-style: none; margin: 0; padding: 0; }
.k-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.k-list > li:last-child { border-bottom: 0; }
.k-link-btn { min-height: 44px; padding: 0; border: 0; background: none; color: var(--link); font-weight: 600; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Split layout and document page preview ---------- */
.k-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1023px) { .k-split { grid-template-columns: minmax(0, 1fr); } }
.k-paper { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 32px; aspect-ratio: 1 / 1.3; overflow: hidden; }
.k-paper-head { text-align: center; border-bottom: 2px solid var(--text); padding-bottom: 12px; margin-bottom: 20px; }
.k-paper-head strong { display: block; font-size: 18px; letter-spacing: .02em; }
.k-paper-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 12px; border-bottom: 1px dashed var(--border); border-radius: 4px; }
.k-paper-row span:first-child { color: var(--text-2); }
.k-paper-row.is-highlight { background: var(--selected-bg); outline: 2px solid var(--link); }
.k-paper-sign { margin-top: 40px; display: flex; justify-content: space-between; gap: 16px; color: var(--text-2); }
.k-paper-sign span { border-top: 1px solid var(--text-2); padding-top: 6px; min-width: 40%; }
@media (max-width: 600px) { .k-paper { padding: 20px; aspect-ratio: auto; } .k-paper-row { grid-template-columns: 1fr; gap: 2px; } }

.k-list > li:has([aria-current="true"]) { background: var(--selected-bg); margin-inline: -12px; padding-inline: 12px; border-radius: var(--r-ctl); }

/* ---------- Choice cards: <label class="k-choice"><input type="radio">…</label> ---------- */
.k-choices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); border: 0; margin: 0 0 16px; padding: 0; }
.k-choice { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); cursor: pointer; transition: transform .12s, border-color .12s; }
.k-choice:hover { border-color: var(--link); transform: translateY(-1px); }
.k-choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.k-choice:has(input:checked) { border-color: var(--link); background: var(--selected-bg); }
.k-choice:has(input:focus-visible) { outline: 3px solid var(--link); outline-offset: 2px; }
.k-choice strong { display: block; margin-bottom: 2px; }
.k-pre { white-space: pre-wrap; margin: 0; padding: 16px; border-radius: var(--r-ctl); background: var(--raised); font: inherit; }

/* Containers that receive focus only from script (screen changes) draw no ring. */
[tabindex="-1"]:focus { outline: none; }

/* ---------- Checkbox chips: <label class="k-chip"><input type="checkbox" class="k-sr">…</label> ---------- */
.k-chip:has(input:checked) { background: var(--selected-bg); border-color: var(--link); color: var(--link); font-weight: 600; }
.k-chip:has(input:focus-visible) { outline: 3px solid var(--link); outline-offset: 2px; }

/* ---------- Banner ---------- */
.k-banner { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--info-bg); color: var(--text); margin-bottom: 16px; }
.k-banner > i { margin-top: 3px; color: var(--info); }
.k-banner[data-status="danger"] { background: var(--danger-bg); } .k-banner[data-status="danger"] > i { color: var(--danger); }
.k-banner[data-status="warn"] { background: var(--warn-bg); } .k-banner[data-status="warn"] > i { color: var(--warn); }

/* ---------- Channel preview card ---------- */
.k-preview { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); padding: 16px; }
.k-preview-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.k-preview-head > i { font-size: 20px; width: 24px; text-align: center; }
.k-preview-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 10px; }
.k-preview-body mark { background: var(--danger-bg); color: var(--danger); text-decoration: line-through; }
.k-preview-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-2); }

/* ---------- Calendar ---------- */
.k-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.k-cal-dow { padding: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--raised); border-bottom: 1px solid var(--border); }
.k-cal-day { min-height: 112px; padding: 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.k-cal-day:nth-child(7n) { border-right: 0; }
.k-cal-day.is-other { background: var(--bg); }
.k-cal-date { font-size: 13px; font-weight: 600; color: var(--text-2); }
.k-cal-day.is-today .k-cal-date { color: var(--on-accent); background: var(--accent); border-radius: var(--r-chip); padding: 0 8px; align-self: flex-start; }
.k-cal-item { display: flex; gap: 6px; align-items: baseline; width: 100%; min-height: 32px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--raised); color: var(--text); font-size: 13px; text-align: left; cursor: pointer; overflow: hidden; }
.k-cal-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-cal-item:hover { border-color: var(--link); }
.k-cal-item[data-status="ok"] i { color: var(--ok); } .k-cal-item[data-status="info"] i { color: var(--info); } .k-cal-item[data-status="danger"] i { color: var(--danger); }
.k-cal--week .k-cal-day { min-height: 240px; }
@media (max-width: 700px) {
  .k-cal, .k-cal--week { grid-template-columns: minmax(0, 1fr); }
  .k-cal-dow, .k-cal-day.is-empty, .k-cal-day.is-other { display: none; }
  .k-cal-day, .k-cal--week .k-cal-day { min-height: 0; border-right: 0; }
  .k-cal-date::after { content: attr(data-long); font-weight: 500; margin-left: 6px; }
}

/* ---------- Motion: screen entrance. Transform and opacity only, ease-out, under 300ms for UI. ---------- */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
.k-content.is-enter .k-page-head, .k-content.is-enter .k-card, .k-content.is-enter .k-table-wrap, .k-content.is-enter .k-split > * { animation: k-rise .26s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes k-rise { from { opacity: 0; transform: translateY(10px); } }
.k-content.is-enter .k-progress > span { transform-origin: left; animation: k-fill .6s var(--ease-out) both; animation-delay: .15s; }
@keyframes k-fill { from { transform: scaleX(0); } }
.k-content.is-enter .k-chart rect { transform-box: fill-box; transform-origin: bottom; animation: k-grow .6s var(--ease-out) both; animation-delay: .15s; }
@keyframes k-grow { from { transform: scaleY(0); } }
.k-content.is-enter .k-chart polyline[class] { stroke-dasharray: 1; animation: k-draw .9s var(--ease-out) both; animation-delay: .15s; }
@keyframes k-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.k-content.is-enter .k-chart circle { animation: k-fade .3s var(--ease-out) both; animation-delay: .7s; }
@keyframes k-fade { from { opacity: 0; } }
.k-sidebar .k-nav-item { transition: background-color .15s ease, color .15s ease; }
.k-card { transition: border-color .15s ease, transform .2s var(--ease-out); }
.k-modal, .k-modal::backdrop { transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), overlay .2s allow-discrete, display .2s allow-discrete; opacity: 0; }
.k-modal { transform: scale(.96); }
.k-modal[open], .k-modal[open]::backdrop { opacity: 1; }
.k-modal[open] { transform: none; }
@starting-style { .k-modal[open], .k-modal[open]::backdrop { opacity: 0; } .k-modal[open] { transform: scale(.96); } }

/* ---------- Product palettes: one per app, chosen with <html data-palette="...">. Light and dark values. ---------- */
:root[data-palette="cmd"] {
    --bg: #f8f5f2; --surface: #ffffff; --raised: #f2ede8; --border: #e1d9d0;
    --text: #231506; --text-2: #635545; --link: #7d4608; --accent: #9e590a; --on-accent: #ffffff;
    --scrim: rgba(0, 0, 0, 0.5);
    --info: #7d4608; --info-bg: #f2e9de; --selected-bg: #f2e9de; --neutral: #635545; --neutral-bg: #f2ede8;
    --s1: #9e590a; --s2: #72675a; --s3: #563106; --s4: #9a6a12;
    --nav-bg: #2f200e; --nav-text: #f7f3ed; --nav-text-2: #d3c3b1; --nav-active: #4e371d; --nav-link: #f0c594;
}
:root[data-palette="cmd"][data-theme="dark"] {
    --bg: #120d08; --surface: #1c150d; --raised: #2d2215; --border: #433423;
    --text: #f6f0ea; --text-2: #b8a794; --link: #da9b52; --scrim: rgba(0, 0, 0, 0.65);
    --info: #da9b52; --info-bg: #302212; --selected-bg: #302212; --neutral: #b8a794; --neutral-bg: #2d2215;
    --s1: #da9b52; --s2: #b8a794; --s3: #efd8be; --s4: #e0b95e;
    --nav-bg: #171008; --nav-active: #3f2d18;
}
:root[data-palette="ordms"] {
    --bg: #f5f8f2; --surface: #ffffff; --raised: #edf2e8; --border: #d9e1d0;
    --text: #152306; --text-2: #505d41; --link: #3a5b15; --accent: #4d781c; --on-accent: #ffffff;
    --scrim: rgba(0, 0, 0, 0.5);
    --info: #3a5b15; --info-bg: #e9f2de; --selected-bg: #e9f2de; --neutral: #505d41; --neutral-bg: #edf2e8;
    --s1: #4d781c; --s2: #67725a; --s3: #304a11; --s4: #9a6a12;
    --nav-bg: #202f0e; --nav-text: #f3f7ed; --nav-text-2: #c3d3b1; --nav-active: #374e1d; --nav-link: #c5f094;
}
:root[data-palette="ordms"][data-theme="dark"] {
    --bg: #0d1208; --surface: #151c0d; --raised: #222d15; --border: #344323;
    --text: #f0f6ea; --text-2: #a2b48e; --link: #91d742; --scrim: rgba(0, 0, 0, 0.65);
    --info: #91d742; --info-bg: #223012; --selected-bg: #223012; --neutral: #a2b48e; --neutral-bg: #222d15;
    --s1: #91d742; --s2: #a2b48e; --s3: #d8efbe; --s4: #e0b95e;
    --nav-bg: #101708; --nav-active: #2d3f18;
}
:root[data-palette="agentic"] {
    --bg: #f2f7f8; --surface: #ffffff; --raised: #e8f0f2; --border: #d0dee1;
    --text: #061d23; --text-2: #455d63; --link: #0c5b6e; --accent: #10758e; --on-accent: #ffffff;
    --scrim: rgba(0, 0, 0, 0.5);
    --info: #0c5b6e; --info-bg: #deeef2; --selected-bg: #deeef2; --neutral: #455d63; --neutral-bg: #e8f0f2;
    --s1: #10758e; --s2: #5a6d72; --s3: #094453; --s4: #9a6a12;
    --nav-bg: #0e292f; --nav-text: #edf5f7; --nav-text-2: #b1ccd3; --nav-active: #1d444e; --nav-link: #94ddf0;
}
:root[data-palette="agentic"][data-theme="dark"] {
    --bg: #081012; --surface: #0d191c; --raised: #15282d; --border: #233d43;
    --text: #eaf3f6; --text-2: #91aeb6; --link: #42b9d7; --scrim: rgba(0, 0, 0, 0.65);
    --info: #42b9d7; --info-bg: #122a30; --selected-bg: #122a30; --neutral: #91aeb6; --neutral-bg: #15282d;
    --s1: #42b9d7; --s2: #91aeb6; --s3: #bee5ef; --s4: #e0b95e;
    --nav-bg: #081417; --nav-active: #18373f;
}
:root[data-palette="media"] {
    --bg: #f8f2f3; --surface: #ffffff; --raised: #f2e8eb; --border: #e1d0d5;
    --text: #23060d; --text-2: #6f4d56; --link: #9f1436; --accent: #cc1946; --on-accent: #ffffff;
    --scrim: rgba(0, 0, 0, 0.5);
    --info: #9f1436; --info-bg: #f2dee3; --selected-bg: #f2dee3; --neutral: #6f4d56; --neutral-bg: #f2e8eb;
    --s1: #cc1946; --s2: #725a60; --s3: #520a1c; --s4: #9a6a12;
    --nav-bg: #2f0e16; --nav-text: #f7edf0; --nav-text-2: #d3b1b9; --nav-active: #4e1d2a; --nav-link: #f094ab;
}
:root[data-palette="media"][data-theme="dark"] {
    --bg: #12080a; --surface: #1c0d11; --raised: #2d151b; --border: #43232b;
    --text: #f6eaed; --text-2: #bc9aa2; --link: #e5859d; --scrim: rgba(0, 0, 0, 0.65);
    --info: #e5859d; --info-bg: #30121a; --selected-bg: #30121a; --neutral: #bc9aa2; --neutral-bg: #2d151b;
    --s1: #e5859d; --s2: #bc9aa2; --s3: #efbeca; --s4: #e0b95e;
    --nav-bg: #17080b; --nav-active: #3f1822;
}
:root[data-palette="video"] {
    --bg: #f8f3f2; --surface: #ffffff; --raised: #f2ebe8; --border: #e1d5d0;
    --text: #230f06; --text-2: #695349; --link: #90350e; --accent: #ba4512; --on-accent: #ffffff;
    --scrim: rgba(0, 0, 0, 0.5);
    --info: #90350e; --info-bg: #f2e4de; --selected-bg: #f2e4de; --neutral: #695349; --neutral-bg: #f2ebe8;
    --s1: #ba4512; --s2: #72615a; --s3: #541f08; --s4: #9a6a12;
    --nav-bg: #2f180e; --nav-text: #f7f0ed; --nav-text-2: #d3bbb1; --nav-active: #4e2c1d; --nav-link: #f0af94;
}
:root[data-palette="video"][data-theme="dark"] {
    --bg: #120b08; --surface: #1c110d; --raised: #2d1c15; --border: #432c23;
    --text: #f6edea; --text-2: #b89f94; --link: #e19270; --scrim: rgba(0, 0, 0, 0.65);
    --info: #e19270; --info-bg: #301b12; --selected-bg: #301b12; --neutral: #b89f94; --neutral-bg: #2d1c15;
    --s1: #e19270; --s2: #b89f94; --s3: #efccbe; --s4: #e0b95e;
    --nav-bg: #170c08; --nav-active: #3f2418;
}
:root[data-palette="sentiment"] {
    --bg: #f2f8f4; --surface: #ffffff; --raised: #e8f2ec; --border: #d0e1d7;
    --text: #062311; --text-2: #43604e; --link: #10602d; --accent: #147b3a; --on-accent: #ffffff;
    --scrim: rgba(0, 0, 0, 0.5);
    --info: #10602d; --info-bg: #def2e5; --selected-bg: #def2e5; --neutral: #43604e; --neutral-bg: #e8f2ec;
    --s1: #147b3a; --s2: #5a7263; --s3: #0d4f25; --s4: #9a6a12;
    --nav-bg: #0e2f1a; --nav-text: #edf7f1; --nav-text-2: #b1d3bd; --nav-active: #1d4e2f; --nav-link: #94f0b6;
}
:root[data-palette="sentiment"][data-theme="dark"] {
    --bg: #08120b; --surface: #0d1c12; --raised: #152d1e; --border: #23432f;
    --text: #eaf6ee; --text-2: #91b69e; --link: #42d778; --scrim: rgba(0, 0, 0, 0.65);
    --info: #42d778; --info-bg: #12301d; --selected-bg: #12301d; --neutral: #91b69e; --neutral-bg: #152d1e;
    --s1: #42d778; --s2: #91b69e; --s3: #beefd0; --s4: #e0b95e;
    --nav-bg: #08170d; --nav-active: #183f26;
}
:root[data-palette="dw"] {
    --bg: #f2f4f8; --surface: #ffffff; --raised: #e8ebf2; --border: #d0d6e1;
    --text: #061023; --text-2: #4b566c; --link: #44526f; --accent: #576a8e; --on-accent: #ffffff;
    --scrim: rgba(0, 0, 0, 0.5);
    --info: #44526f; --info-bg: #dee5f2; --selected-bg: #dee5f2; --neutral: #4b566c; --neutral-bg: #e8ebf2;
    --s1: #576a8e; --s2: #5a6272; --s3: #232a39; --s4: #9a6a12;
    --nav-bg: #0e192f; --nav-text: #edf1f7; --nav-text-2: #b1bcd3; --nav-active: #1d2e4e; --nav-link: #94b2f0;
}
:root[data-palette="dw"][data-theme="dark"] {
    --bg: #080b12; --surface: #0d121c; --raised: #151d2d; --border: #232e43;
    --text: #eaeef6; --text-2: #97a3ba; --link: #81a2e4; --scrim: rgba(0, 0, 0, 0.65);
    --info: #81a2e4; --info-bg: #121c30; --selected-bg: #121c30; --neutral: #97a3ba; --neutral-bg: #151d2d;
    --s1: #81a2e4; --s2: #97a3ba; --s3: #beceef; --s4: #e0b95e;
    --nav-bg: #080d17; --nav-active: #18253f;
}
:root[data-palette="lms"] {
    --bg: #f2f3f8; --surface: #ffffff; --raised: #e8eaf2; --border: #d0d4e1;
    --text: #060d23; --text-2: #4d556f; --link: #1c3a9c; --accent: #2248c3; --on-accent: #ffffff;
    --scrim: rgba(0, 0, 0, 0.5);
    --info: #1c3a9c; --info-bg: #dee3f2; --selected-bg: #dee3f2; --neutral: #4d556f; --neutral-bg: #e8eaf2;
    --s1: #2248c3; --s2: #5a5f72; --s3: #0e1d4e; --s4: #9a6a12;
    --nav-bg: #0e162f; --nav-text: #edf0f7; --nav-text-2: #b1b9d3; --nav-active: #1d294e; --nav-link: #94a9f0;
}
:root[data-palette="lms"][data-theme="dark"] {
    --bg: #080a12; --surface: #0d101c; --raised: #151b2d; --border: #232a43;
    --text: #eaecf6; --text-2: #979fba; --link: #899fe6; --scrim: rgba(0, 0, 0, 0.65);
    --info: #899fe6; --info-bg: #121930; --selected-bg: #121930; --neutral: #979fba; --neutral-bg: #151b2d;
    --s1: #899fe6; --s2: #979fba; --s3: #bec9ef; --s4: #e0b95e;
    --nav-bg: #080b17; --nav-active: #18213f;
}
:root[data-palette="grc"] {
    --bg: #f2f8f7; --surface: #ffffff; --raised: #e8f2f1; --border: #d0e1df;
    --text: #062320; --text-2: #415d5a; --link: #0b6058; --accent: #0d776d; --on-accent: #ffffff;
    --scrim: rgba(0, 0, 0, 0.5);
    --info: #0b6058; --info-bg: #def2f0; --selected-bg: #def2f0; --neutral: #415d5a; --neutral-bg: #e8f2f1;
    --s1: #0d776d; --s2: #5a7270; --s3: #09534b; --s4: #9a6a12;
    --nav-bg: #0e2f2c; --nav-text: #edf7f6; --nav-text-2: #b1d3d0; --nav-active: #1d4e49; --nav-link: #94f0e7;
}
:root[data-palette="grc"][data-theme="dark"] {
    --bg: #081211; --surface: #0d1c1b; --raised: #152d2b; --border: #234340;
    --text: #eaf6f5; --text-2: #91b6b2; --link: #42d7c8; --scrim: rgba(0, 0, 0, 0.65);
    --info: #42d7c8; --info-bg: #12302d; --selected-bg: #12302d; --neutral: #91b6b2; --neutral-bg: #152d2b;
    --s1: #42d7c8; --s2: #91b6b2; --s3: #beefea; --s4: #e0b95e;
    --nav-bg: #081715; --nav-active: #183f3b;
}
:root[data-palette] .k-shell::before, :root[data-palette] .k-sidebar { background: var(--nav-bg); border-color: var(--nav-bg); }
:root[data-palette] .k-sidebar { color: var(--nav-text); --text: var(--nav-text); --text-2: var(--nav-text-2); --link: var(--nav-link); --selected-bg: var(--nav-active); --border: var(--nav-active); --raised: var(--nav-active); }
:root[data-palette] .k-sidebar .k-nav-count { background: var(--nav-active); color: var(--nav-text); }

.k-metric.is-updated { animation: k-flash .7s var(--ease-out); border-radius: 6px; }
@keyframes k-flash { from { background: var(--selected-bg); } }