:root {
  color-scheme: light;
  /* surfaces */
  --bg: #F5F7FB;            /* page */
  --surface: #FFFFFF;       /* cards, topbar, panels */
  --surface-2: #F8FAFD;     /* quiet panels, table hover */
  --surface-3: #EEF2F8;     /* hover on quiet panels */
  --line: #E4E8F0;
  --line-soft: #EEF1F6;
  --line-strong: #C4CCDA;
  /* text */
  --ink: #1C2433;
  --ink-2: #475467;
  --muted: #667085;
  --on-ink: #FFFFFF;
  /* brand + status */
  --primary: #2F6BEB;
  --primary-hover: #2457C9;
  --primary-soft: #EAF0FE;
  --primary-line: #BFD1FB;
  --on-primary: #FFFFFF;
  --danger: #DC3A3A;
  --danger-soft: #FDECEC;
  --danger-line: #F6C4C4;
  --danger-ink: #B42323;
  --amber: #F59E0B;
  --amber-soft: #FFF6DF;
  --amber-line: #F6D98F;
  --amber-ink: #8A5300;
  --good: #16A06A;
  --good-soft: #E6F6EE;
  --status-good: #11805A;
  /* chart series: vivid, distinct in hue and lightness */
  --s1: #3B82F6; --s2: #F59E0B; --s3: #10B981; --s4: #8B5CF6; --s5: #EC4899; --s6: #06B6D4; --s7: #F97316;
  --s-other: #8A94A6;
  --q1: #1D4ED8; --q2: #3B82F6; --q3: #60A5FA; --q4: #A5C8FB; --q5: #DCE9FE;
  --series-blue: var(--s1);
  --chart-grid: #EDF0F5;
  --shadow-ink: 16, 24, 40;
  --card-radius: 14px;
  --pill-radius: 999px;
  --white: var(--surface);
  --cream: var(--bg);
  --chili: var(--primary);
  --brass: var(--amber);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0D121B; --surface: #151B27; --surface-2: #19202E; --surface-3: #212A3B;
  --line: #262F40; --line-soft: #1E2635; --line-strong: #334056;
  --ink: #E8ECF4; --ink-2: #B4BDCD; --muted: #8F9AAE; --on-ink: #0D121B;
  --primary: #6B9BFF; --primary-hover: #8AB0FF; --primary-soft: #1B2A4A; --primary-line: #2F4678; --on-primary: #0B1220;
  --danger: #FF7A7A; --danger-soft: #3A1D22; --danger-line: #6B2F36; --danger-ink: #FF9C9C;
  --amber: #FBBF24; --amber-soft: #33290F; --amber-line: #5E4A14; --amber-ink: #F6CF66;
  --good: #34D399; --good-soft: #10332A; --status-good: #4ADE9F;
  --s1: #6B9BFF; --s2: #FBBF24; --s3: #34D399; --s4: #A78BFA; --s5: #F472B6; --s6: #22D3EE; --s7: #FB923C;
  --s-other: #6B7790; --chart-grid: #232C3C; --shadow-ink: 0, 0, 0;
  --q1: #DCE9FE; --q2: #A5C8FB; --q3: #6B9BFF; --q4: #3F6FD6; --q5: #2A4A94;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0D121B; --surface: #151B27; --surface-2: #19202E; --surface-3: #212A3B;
    --line: #262F40; --line-soft: #1E2635; --line-strong: #334056;
    --ink: #E8ECF4; --ink-2: #B4BDCD; --muted: #8F9AAE; --on-ink: #0D121B;
    --primary: #6B9BFF; --primary-hover: #8AB0FF; --primary-soft: #1B2A4A; --primary-line: #2F4678; --on-primary: #0B1220;
    --danger: #FF7A7A; --danger-soft: #3A1D22; --danger-line: #6B2F36; --danger-ink: #FF9C9C;
    --amber: #FBBF24; --amber-soft: #33290F; --amber-line: #5E4A14; --amber-ink: #F6CF66;
    --good: #34D399; --good-soft: #10332A; --status-good: #4ADE9F;
    --s1: #6B9BFF; --s2: #FBBF24; --s3: #34D399; --s4: #A78BFA; --s5: #F472B6; --s6: #22D3EE; --s7: #FB923C;
    --s-other: #6B7790; --chart-grid: #232C3C; --shadow-ink: 0, 0, 0;
    --q1: #DCE9FE; --q2: #A5C8FB; --q3: #6B9BFF; --q4: #3F6FD6; --q5: #2A4A94;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Kanit', sans-serif;
  background: var(--cream);
  color: var(--ink);
}

button, input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: var(--primary); }
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 13px; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Login ---------- */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card {
  background: var(--white); border-radius: var(--card-radius); padding: 40px 32px;
  width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(var(--shadow-ink), 0.12);
}
.login-card h1 { font-size: 22px; margin: 0 0 4px; }
.login-card p.sub { margin: 0 0 24px; color: var(--muted); font-size: 14px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 12px; border: 1.5px solid var(--line-strong); border-radius: 10px;
  background: var(--cream); color: var(--ink);
}
.field textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form input, .inline-form select {
  padding: 7px 12px; border: 1.5px solid var(--line); border-radius: var(--pill-radius);
  background: var(--cream); min-width: 0;
}
.inline-form input { flex: 1 1 200px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.span-2 { grid-column: span 2; }
@media (max-width: 700px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: var(--pill-radius); border: none;
  background: var(--ink); color: var(--on-ink); font-weight: 600; cursor: pointer;
  transition: transform .15s ease, background .15s ease; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.12); }
:root[data-theme="dark"] .btn:hover { filter: brightness(.92); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--primary); }
.btn.primary:hover { background: var(--primary-hover); filter: none; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn.ghost:hover { background: var(--cream); }
.btn.block { width: 100%; }
.btn.small { padding: 6px 14px; font-size: 13px; }
.btn.danger { background: var(--surface); color: var(--danger-ink); border: 1.5px solid var(--danger); }

.error-msg { background: var(--danger-soft); color: var(--danger-ink); padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 12px; }
.ok-msg { background: var(--good-soft); color: var(--status-good); padding: 10px 14px; border-radius: 10px; font-size: 13px; margin: 8px 0 12px; }
.inline-note { font-size: 12px; color: var(--amber-ink); font-weight: 600; }
.helper-text { font-size: 12px; color: var(--muted); margin-top: -8px; margin-bottom: 12px; }
.pill {
  display: inline-block; padding: 1px 9px; border-radius: var(--pill-radius);
  background: var(--cream); color: var(--muted); font-size: 11px; font-weight: 700; vertical-align: middle;
}
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.dot-good { background: var(--status-good); }
.dot-off { background: var(--line-strong); }
.status-line { font-size: 13px; margin: 0 0 10px; }

/* ---------- App shell ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 24px; background: var(--white); border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar .brand { font-weight: 800; font-size: 18px; letter-spacing: .2px; white-space: nowrap; }
.topbar .brand span { color: var(--primary); }
.company-picker-wrap select {
  padding: 7px 12px; border-radius: var(--pill-radius); border: 1.5px solid var(--line);
  background: var(--cream); font-weight: 600; max-width: 260px;
}
.company-name { font-weight: 700; font-size: 14px; color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.user-display-name { font-size: 13px; color: var(--muted); margin-right: 4px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--pill-radius); border: 1.5px solid var(--line);
  background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px;
}
.icon-btn:hover { background: var(--cream); }
.icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 700px) {
  .topbar { padding: 10px 16px; }
  .user-display-name { display: none; }
  .topbar-actions { flex-wrap: wrap; max-width: 100%; }
}

.tabs { display: flex; gap: 4px; padding: 12px 24px 0; overflow-x: auto; }
.tab {
  padding: 10px 18px; border-radius: 14px 14px 0 0; background: transparent; border: none;
  font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.tab.active { background: var(--white); color: var(--ink); }
.tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.tab-panel-wrap { background: var(--white); min-height: calc(100vh - 130px); padding: 24px; }
@media (max-width: 700px) {
  .tabs { padding: 10px 16px 0; }
  .tab-panel-wrap { padding: 16px; }
}

/* ---------- Dashboard ---------- */
.dash-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.dash-title { font-size: 20px; margin: 0; }
.dash-desc { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.range-control { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.range-control input {
  padding: 6px 10px; border-radius: var(--pill-radius); border: 1.5px solid var(--line); background: var(--cream); font-size: 13px;
}
.range-chip {
  padding: 6px 12px; border-radius: var(--pill-radius); border: 1.5px solid var(--line);
  background: var(--white); cursor: pointer; font-weight: 600; font-size: 13px; color: var(--muted);
}
.range-chip.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.fmh-status-bar { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; padding: 10px 14px; background: var(--surface-2); border-radius: 12px; }
.fmh-sync-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.fmh-quota { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.fmh-quota-track { flex: 0 0 120px; height: 6px; background: var(--line); border-radius: var(--pill-radius); overflow: hidden; }
.fmh-quota-fill { display: block; height: 100%; background: var(--status-good); }
.fmh-quota-fill-low { background: var(--primary); }

.widget-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.widget-card { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--card-radius); padding: 18px; min-width: 0; }
.widget-card.size-full { grid-column: span 6; }
.widget-card.size-half { grid-column: span 3; }
.widget-card.size-third { grid-column: span 2; }
.widget-card.widget-kpi { background: transparent; border: none; padding: 0; }
.widget-card.widget-kpi .widget-title { font-size: 13px; color: var(--muted); }
@media (max-width: 1000px) { .widget-card.size-third { grid-column: span 3; } }
@media (max-width: 760px) { .widget-card.size-half, .widget-card.size-third { grid-column: span 6; } }
.widget-title { font-size: 14px; margin: 0 0 14px; }
.widget-help { font-size: 12px; color: var(--muted); margin: -6px 0 12px; }
.widget-foot { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.chart-wrap { position: relative; height: 280px; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi-card { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--card-radius); padding: 16px 18px; }
.kpi-card .kpi-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.kpi-card .kpi-value { font-size: 26px; letter-spacing: -.01em; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

.bar-list { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 42%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 10px; background: var(--cream); border-radius: var(--pill-radius); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.bar-value { font-weight: 700; text-align: right; min-width: 56px; font-variant-numeric: tabular-nums; }
.bar-row:hover .bar-name { color: var(--primary); }

.inline-fields { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.inline-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; margin-bottom: 12px; }
.inline-field input, .inline-field select {
  padding: 7px 10px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--cream); font-weight: 400; max-width: 100%;
}
.inline-field input[type="number"] { width: 110px; }

.table-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.table-tools .widget-foot { margin: 0; }
.table-scroll { overflow-x: auto; max-height: 520px; overflow-y: auto; }
table.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.report-table th {
  text-align: left; padding: 9px 12px; background: var(--surface-2); color: var(--ink-2); font-weight: 600; cursor: pointer; user-select: none;
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
table.report-table th.num { text-align: right; }
table.report-table th:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
table.report-table td { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.report-table tr:hover td { background: var(--surface-2); }
.meta { font-size: 12px; color: var(--muted); }

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(var(--shadow-ink), 0.45); display: flex;
  align-items: center; justify-content: center; padding: 16px; z-index: 50;
}
.modal-card { background: var(--white); border-radius: var(--card-radius); padding: 28px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; }
.modal-card h2 { margin-top: 0; }
.modal-close-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ---------- User manager ---------- */
.user-row-wrap { border-bottom: 1px solid var(--line-soft); }
.user-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; flex-wrap: wrap; }
.user-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.user-role-select { padding: 6px 10px; border-radius: var(--pill-radius); border: 1.5px solid var(--line); background: var(--cream); }
.user-role-select:disabled { opacity: 0.5; cursor: not-allowed; }
.user-subpanel { padding: 0 0 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.user-subpanel input { padding: 6px 12px; border: 1.5px solid var(--line); border-radius: var(--pill-radius); background: var(--cream); }
.access-panel { display: block; }
.user-tabs-checklist { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.user-tab-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.user-tabs-save-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.user-tabs-dirty-note { font-size: 12px; color: var(--amber-ink); font-weight: 600; }
.add-user { margin-top: 14px; }
.add-user > summary { list-style: none; cursor: pointer; }
.add-user > summary::-webkit-details-marker { display: none; }
.add-user[open] > summary { margin-bottom: 14px; }

/* ---------- Admin Console ---------- */
.admin-view { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - 63px); }
.admin-sidebar { background: var(--surface-2); border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.admin-side-title { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); padding: 12px 10px 6px; }
.admin-side-title:first-child { padding-top: 0; }
.admin-nav-item {
  text-align: left; background: transparent; border: none; border-radius: 10px; padding: 9px 10px;
  cursor: pointer; font-weight: 600; color: var(--ink); width: 100%;
}
.admin-nav-item:hover { background: var(--cream); }
.admin-nav-item.active { background: var(--white); box-shadow: 0 1px 0 var(--line), 0 0 0 1.5px var(--line); }
.company-item { display: flex; flex-direction: column; gap: 2px; }
.company-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-item-meta { font-size: 11px; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.admin-add-btn { margin: 6px 10px 0; align-self: flex-start; }
.admin-main { padding: 24px 28px 60px; background: var(--white); min-width: 0; }
.admin-h1 { font-size: 22px; margin: 0 0 4px; }
.admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-head .muted { margin: 0; }
.admin-card { border: 1.5px solid var(--line); border-radius: var(--card-radius); padding: 20px; margin-bottom: 18px; }
.admin-card h2 { font-size: 16px; margin: 0 0 14px; }
.editor-card { border-color: var(--amber-ink); background: var(--surface-2); }
@media (max-width: 900px) {
  .admin-view { grid-template-columns: 1fr; }
  .admin-sidebar { border-right: none; border-bottom: 1px solid var(--line); }
  .admin-main { padding: 18px 16px 40px; }
}

.sync-block { margin-top: 16px; }
.sync-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
table.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mini-table th, table.mini-table td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; }
table.mini-table th.num, table.mini-table td.num { text-align: right; }

.composer-dash { border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 14px; background: var(--surface-2); }
.composer-dash-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dash-meta-form { display: flex; gap: 6px; flex: 1 1 360px; flex-wrap: wrap; }
.dash-meta-form input { padding: 7px 12px; border: 1.5px solid var(--line); border-radius: var(--pill-radius); background: var(--white); flex: 1 1 140px; min-width: 0; }
.dash-meta-form input[name="display_name"] { font-weight: 700; }
.composer-dash-actions { display: flex; gap: 6px; }
.order-btns { display: flex; flex-direction: column; gap: 2px; }
.icon-mini {
  width: 26px; height: 22px; border: 1.5px solid var(--line); background: var(--white); border-radius: 6px;
  cursor: pointer; font-size: 10px; line-height: 1; color: var(--muted);
}
.icon-mini:disabled { opacity: .35; cursor: default; }
.icon-mini:hover:not(:disabled) { background: var(--cream); color: var(--ink); }
.danger-mini { color: var(--primary); height: 26px; font-size: 12px; }
.widget-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.widget-row { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.widget-row-main { display: flex; align-items: center; gap: 10px; }
.widget-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.widget-row-text strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.size-select { padding: 5px 8px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--cream); font-size: 12px; }
.widget-edit { padding: 12px 0 4px 36px; }
@media (max-width: 700px) {
  .widget-row-main { flex-wrap: wrap; }
  .widget-edit { padding-left: 0; }
}

.catalog-table td { font-size: 13px; }
.inactive-row td { opacity: .55; }

/* ---------- FMH Diagnostics ---------- */
.probe-list { display: flex; flex-direction: column; gap: 14px; }
.probe-head { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; }
.probe-head h3 { margin: 0 0 3px; font-size: 15px; }
.probe-head p { margin: 0; font-size: 13px; max-width: 62ch; }
.probe-head .btn { flex: none; }
.probe-out:not(:empty) { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, var(--line)); }
.probe-out pre { font-size: 12px; overflow-x: auto; background: rgba(127,127,127,.08); padding: 10px; border-radius: 6px; }
.probe-good { color: var(--good); font-weight: 600; }
.probe-bad { color: var(--danger-ink); font-weight: 600; }
.probe-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.probe-table th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  opacity: .6; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line, var(--line)); }
.probe-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid rgba(127,127,127,.14); vertical-align: top; }
.probe-table code { font-size: 11.5px; background: rgba(127,127,127,.12); padding: 1px 4px; border-radius: 3px; }
@media (max-width: 640px) {
  .probe-head { flex-direction: column; gap: 10px; }
  .probe-table { display: block; overflow-x: auto; }
}
.probe-pair { padding: 12px 0; border-bottom: 1px solid rgba(127,127,127,.14); }
.probe-pair:last-child { border-bottom: 0; }
.probe-pair > b { font-size: 13.5px; }
.probe-pair > p { margin: 3px 0 0; font-size: 13px; }
.probe-pair .probe-table td:first-child { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }

/* Target marker on a ranked bar: a hairline across the track at the goal. */
.bar-track { position: relative; }
.bar-target { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 1px dashed var(--ink-3, var(--muted)); z-index: 1; pointer-events: none; }
.bar-fill { position: relative; }

/* ---------- treemap ---------- */
.treemap { display: flex; gap: 3px; height: 240px; }
.treemap-col { display: flex; flex-direction: column; gap: 3px; }
.treemap-tile { position: relative; border-radius: 5px; padding: 8px 10px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; color: #fff; min-width: 0; }
.treemap-tile.on-light { color: var(--ink); }
.treemap-name { font-size: 12px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treemap-val { font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .treemap { height: 300px; } }

/* ---------- range plot ---------- */
.range-list { display: flex; flex-direction: column; gap: 10px; }
.range-row { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(120px, 2.4fr) auto; gap: 10px; align-items: center; }
.range-track { position: relative; height: 4px; border-radius: 2px; background: var(--line); }
.range-dot { position: absolute; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.range-dot.range-end { width: 7px; height: 7px; background: var(--line); }
.range-now { width: 12px; height: 12px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.range-now.low { background: var(--s1); }
.range-now.high { background: var(--danger); }

/* composite widget: small charts side by side, a wide one underneath */
.panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.panel { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.panel-wide { grid-column: 1 / -1; }
.panel-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.panel .chart-wrap { height: 240px; }
@media (max-width: 720px) { .panel-grid { grid-template-columns: 1fr; } }
.panel-headline { margin: 2px 0 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 13px; color: var(--ink-2); }
.panel-headline .dot, .donut-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; flex: none; }
.donut-box { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px; align-items: center; }
.donut-box .donut-ring { height: 220px; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; min-width: 0; }
.donut-legend li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.donut-legend .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.donut-legend .vl { font-variant-numeric: tabular-nums; color: var(--ink); }
.donut-legend .sh { width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 520px) { .donut-box { grid-template-columns: 1fr; } }

/* tabs_bar: period tabs with the per-group average, over a ranked list */
.tabs-bar-head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 10px; }
.tabs-bar-caption { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.tabs-bar-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; border-bottom: 1px solid var(--line); width: 100%; }
.tabs-bar-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; color: var(--muted); font: inherit; font-size: 12px; }
.tabs-bar-tab b { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tabs-bar-tab.active { border-bottom-color: var(--good); color: var(--good); }
.tabs-bar-tab.active b { color: var(--good); }
.tabs-bar-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* saved-data fallback (demo safety) */
.sync-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.warn-msg { background: var(--amber-soft); color: var(--amber-ink); padding: 8px 12px; border-radius: 10px; font-size: 13px; margin: 6px 0 0; }
.saved-mode-line { background: var(--surface-2); border-radius: 10px; padding: 8px 12px; }

/* widget picker (step 2 of the dashboard composer) */
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; margin-bottom: 8px; }
.link-btn:hover { color: var(--ink); text-decoration: underline; }
.picker-top { display: flex; flex-direction: column; gap: 10px; }
.picked-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: var(--on-ink); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.picker-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.picker-toolbar .picker-q { flex: 1; min-width: 200px; }
.picker-countline { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.picker-h { font-size: 15px; margin: 18px 0 8px; }
.picker-rows { display: flex; flex-direction: column; gap: 6px; }
.picker-row { background: var(--white, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.picker-row.is-picked { border-color: var(--amber-line); background: var(--amber-soft); }
.picker-row-main { display: flex; align-items: center; gap: 10px; }
.picker-row .pos { width: 22px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.picker-row .desc { font-size: 12px; color: var(--muted); }
.add-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.add-row:hover { border-color: var(--amber-line); }
.ycheck { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--amber); color: var(--ink); font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.ycheck.sm { width: 18px; height: 18px; font-size: 11px; cursor: default; }
.addcheck { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--muted); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.add-row:hover .addcheck { border-color: var(--amber); background: var(--amber-soft); color: var(--ink); }
.picker-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; background: var(--bg); border-top: 1px solid var(--line); padding: 10px 0; margin-top: 16px; }
.picker-bar .picker-msg { flex: 1; font-size: 13px; color: var(--muted); }
@media (max-width: 720px) { .picker-row-main { flex-wrap: wrap; } }
.picker-top .link-btn { align-self: flex-start; }
.composer-dash-actions { align-items: center; }
.cat-group { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); margin-bottom: 8px; }
.cat-group > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-weight: 600; list-style: none; }
.cat-group > summary::-webkit-details-marker { display: none; }
.cat-group > summary::before { content: '▸'; display: inline-block; color: var(--muted); transition: transform .15s; }
.cat-group[open] > summary::before { transform: rotate(90deg); }
.cat-group > summary .add-cat { margin-left: auto; }
.cat-group > .picker-rows { padding: 0 10px 10px; }

/* language switch (per user) */
.lang-toggle { border: 1.5px solid var(--line); background: var(--white, #fff); color: var(--ink); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.lang-toggle:hover { border-color: var(--ink); }
.login-card { position: relative; }
.login-lang { position: absolute; top: 16px; right: 16px; }
/* company admin: same console, no KSS sidebar */
.admin-view.company-mode { grid-template-columns: 1fr; }
.admin-view.company-mode .admin-sidebar { display: none; }
.demo-pill { display: inline-block; background: var(--amber-soft); color: var(--amber-ink); border: 1px solid var(--amber-line); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; margin-right: 6px; }

/* POS sales upload + menu matching */
.pos-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 14px 0; }
.pos-summary > div { background: var(--cream); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pos-summary .muted { font-size: 12px; }
.pos-summary strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.pos-h3 { margin: 20px 0 8px; font-size: 15px; }
.pos-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.pos-map-table td { vertical-align: middle; }
.pos-map-table select { max-width: 260px; width: 100%; }
.pos-map-table .pos-suggest { margin-top: 6px; }
.pos-map-table .pos-via { font-size: 12px; margin-left: 6px; }
.pos-map-table tr.pos-unmatched td:first-child { border-left: 3px solid var(--brass); }
.widget-note { margin-top: 8px; }
.pos-source { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.pos-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.pos-card p { margin: 0; }
.pos-map-form { gap: 10px 16px; }
.pos-map-form .field { min-width: 0; }
.pos-map-form select, .pos-map-form input { width: 100%; }
.pos-sample { display: block; font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-profiles { margin: 10px 0; font-size: 13px; }
.pos-profiles summary { cursor: pointer; font-weight: 600; }
.company-code { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); background: var(--line-soft); border-radius: 6px; padding: 1px 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.company-code.big { font-size: 13px; vertical-align: middle; }
.admin-company-search { width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; }
.company-item[hidden] { display: none !important; }
.company-name-form { align-items: flex-end; }
.company-name-form + .helper-text { margin-top: 10px; }
.company-item-name .company-code { margin-left: 4px; }

/* What's new: bell + panel */
.notif-wrap { position: relative; display: inline-flex; }
.notif-btn { position: relative; }
.notif-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; border: 2px solid var(--white); }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(var(--shadow-ink), 0.16); z-index: 50; padding: 6px 0; text-align: left; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); }
.notif-item { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.notif-item:last-child { border-bottom: 0; }
.notif-item.unread { background: var(--surface-2); }
.notif-item h4 { margin: 4px 0; font-size: 14px; }
.notif-item p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--ink); }
.notif-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.notif-new { background: var(--primary); color: var(--on-primary); border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 700; }
.notif-widgets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.notif-chip { font-size: 11px; background: var(--cream); border-radius: 999px; padding: 2px 8px; }
.notif-empty { padding: 12px 16px; margin: 0; }
.news-row { border-bottom: 1px solid var(--line-soft); padding: 10px 0; }
.news-row p { margin: 4px 0 8px; }
.news-widgets { margin: 8px 0; }
.news-widgets summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.news-widgets fieldset { border: 0; padding: 4px 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.news-widgets legend { font-weight: 700; font-size: 12px; color: var(--muted); padding: 6px 0 2px; }
.news-check { font-size: 13px; display: inline-flex; gap: 4px; align-items: center; }
.news-form textarea { width: 100%; box-sizing: border-box; font: inherit; }

/* Taller widgets (config.rows = 2 | 3) and the heatmap */
.widget-card.rows-2 { min-height: 520px; display: flex; flex-direction: column; }
.widget-card.rows-3 { min-height: 780px; display: flex; flex-direction: column; }
.widget-card.rows-2 .widget-body, .widget-card.rows-3 .widget-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.widget-card.rows-2 .chart-wrap { height: 430px; }
.widget-card.rows-3 .chart-wrap { height: 690px; }
.widget-card.rows-2 .heat-scroll { max-height: 440px; }
.widget-card.rows-3 .heat-scroll { max-height: 700px; }
.heat-scroll { overflow: auto; min-width: 0; }
.heat-table { border-collapse: separate; border-spacing: 2px; font-size: 12px; font-variant-numeric: tabular-nums; }
.heat-table th { font-weight: 600; color: var(--muted); text-align: right; padding: 2px 6px; white-space: nowrap; position: sticky; top: 0; background: var(--white); z-index: 1; }
.heat-table th.heat-row { text-align: left; color: var(--ink); left: 0; z-index: 2; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.heat-table tbody th.heat-row { position: sticky; left: 0; top: auto; }
.heat-table td { text-align: right; padding: 4px 6px; border-radius: 4px; min-width: 46px; white-space: nowrap; }
.heat-table td.heat-empty { color: var(--muted); text-align: center; }
.heat-table td.heat-total, .heat-table tr.heat-sum td { font-weight: 700; background: var(--cream); color: var(--ink); }
.bucket-toggle { display: flex; gap: 6px; margin-bottom: 8px; }
.bucket-toggle .range-chip, .page-filter .range-chip { padding: 3px 10px; font-size: 12px; }
.page-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 14px; }
.page-filter:empty { display: none; }
.page-filter-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.heat-ramp { display: inline-flex; gap: 2px; }
.heat-ramp i { width: 16px; height: 10px; border-radius: 2px; display: inline-block; }
.page-filter { flex-direction: column; align-items: flex-start; gap: 8px; }
.page-filter-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.page-filter select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.widget-card.rows-2 .table-scroll { max-height: 410px; }
.widget-card.rows-3 .table-scroll { max-height: 670px; }
.widget-card.rows-2 .panel .chart-wrap { height: 260px; }
.widget-card.rows-2.widget-scatter .chart-wrap { height: 440px; }

/* ---------- History from FMH export files ---------- */
.fmh-file-rules { margin: 0 0 12px; padding-left: 18px; }
.fmh-file-rules li { margin: 2px 0; }
.fmh-cover { margin: 4px 0 14px; }
.coverage-note { color: var(--amber-ink); }
.history-line { gap: 8px; flex-wrap: wrap; }
.coverage-banner { margin: 0 0 12px; }
.range-control input { flex-shrink: 0; }

/* ---------- Login with illustration (production; html.login-hero-on) ---------- */
.login-hero { display: none; }
html.login-hero-on #login-screen { padding: 0; align-items: stretch; justify-content: flex-start; background: var(--surface-2); }
html.login-hero-on #login-screen .login-hero {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  flex: 1 1 56%; min-width: 0; padding: 40px 48px 36px; color: #EEF3FF; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 10%, #2B4FA8 0%, #14224A 55%, #0C1633 100%);
}
html.login-hero-on #login-screen .login-card { align-self: center; margin: 32px clamp(28px, 5vw, 80px); box-shadow: 0 18px 50px rgba(var(--shadow-ink), .10); }
html.login-hero-on #login-screen > .login-card { flex: 0 0 400px; max-width: 400px; }
.login-hero-brand { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.login-hero-brand span { color: #9DBBFF; }
.login-hero-kicker { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9DBBFF; }
.login-hero-title { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.06; letter-spacing: -.025em; max-width: 13ch; text-wrap: balance; }
.login-hero-sub { margin: 16px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.6; color: rgba(232, 239, 255, .8); }
.login-hero-art { width: 100%; max-width: 620px; height: auto; align-self: center; }
@media (max-width: 900px) {
  html.login-hero-on #login-screen { align-items: center; justify-content: center; padding: 16px; }
  html.login-hero-on #login-screen .login-hero { display: none; }
  html.login-hero-on #login-screen .login-card { margin: 0; }
}

/* KSS admin: the company list stays in view while the page scrolls, so the
   selected company is always visible. Desktop only; phones stack it on top. */
@media (min-width: 901px) {
  .admin-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; box-sizing: border-box; }
}

/* LINE bot panel (Admin) */
.line-form { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.line-form .field-label { font-size: 12px; font-weight: 600; margin-top: 8px; }
.line-form input[type="text"], .line-form input[type="password"] { width: 100%; box-sizing: border-box; }
.line-form .line-webhook { color: var(--muted); }
.line-form .check-row { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-top: 10px; }
.line-form .btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.line-msg:empty { display: none; }
.line-watchers { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 4px; margin-top: 10px; }
.line-watchers legend { font-size: 12px; font-weight: 600; padding: 0 4px; }
.line-watchers .watcher-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 4px 0; }
.line-watchers .watcher-row .check-row { margin-top: 0; }
.line-watchers .w-num { font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }
.line-watchers .w-num input { width: 72px; }

/* ---------- Self-serve: signup, trial banner, plans, lock, KSS review ---------- */
.signup-cta { text-align: center; font-size: 13px; margin: 14px 0 0; color: var(--muted); }
.signup-cta a { color: var(--primary); font-weight: 600; }
#signup-box h2 { font-size: 18px; margin: 6px 0 8px; }
#signup-box .check-row { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; margin: 6px 0 14px; color: var(--muted); }
#signup-box textarea { width: 100%; box-sizing: border-box; font: inherit; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-row .field { min-width: 0; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.login-card:has(#signup-box:not(.hidden)) { max-width: 520px; }

.sub-banner { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 10px 20px; font-size: 13.5px; border-bottom: 1px solid var(--line); background: var(--line-soft); }
.sub-banner.tone-warn { background: var(--danger-soft); border-bottom-color: var(--danger-line); }
.sub-banner .sb-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.plan-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 14px 0; max-width: 640px; }
.plan-option { position: relative; border: 1.5px solid var(--line); border-radius: 14px; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--white); }
.plan-option.best { border-color: var(--primary); }
.plan-flag { position: absolute; top: -10px; right: 14px; background: var(--primary); color: var(--on-primary); font-size: 11.5px; font-weight: 600; padding: 2px 10px; border-radius: var(--pill-radius); }
.plan-name { font-weight: 600; }
.plan-price { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.plan-per { font-size: 12.5px; margin-bottom: 8px; }
.plan-option .btn { margin-top: auto; }
.plan-card { max-width: 680px; }
.plan-card h1 { margin-bottom: 4px; }
.plan-card .lock-logout { margin-top: 16px; }

.nav-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: var(--pill-radius); background: var(--primary); color: var(--on-primary); font-size: 11px; line-height: 18px; text-align: center; }
.ss-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ss-row { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.ss-row .ss-main { min-width: 0; flex: 1 1 320px; line-height: 1.55; }
.ss-note { margin: 6px 0 0; color: var(--ink); font-style: italic; }
.ss-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 1 260px; }
.ss-actions input { width: 100%; box-sizing: border-box; }
.ss-prices + .helper-text, .admin-card .table-scroll + .helper-text { margin-top: 12px; }
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; max-width: 640px; margin: 12px 0 4px; }
.pay-method { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-size: 13.5px; line-height: 1.45; background: var(--white); }
.pay-method.on { border-color: var(--primary); background: var(--danger-soft); }
.pay-method input { margin-top: 3px; }
.plan-auto { display: inline-block; font-size: 11px; font-weight: 600; color: var(--primary); background: var(--danger-soft); border-radius: var(--pill-radius); padding: 1px 8px; margin-left: 4px; vertical-align: middle; }
.plan-was { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.card-on-file { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0; max-width: 640px; font-size: 13.5px; line-height: 1.6; background: var(--white); }
.card-on-file.off { background: var(--line-soft); }
.card-on-file .btn-row, .card-form .btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.card-form { max-width: 420px; margin: 12px 0; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); }
.card-form input:not([type=checkbox]) { width: 100%; box-sizing: border-box; }
.card-form .check-row input { width: auto; flex: 0 0 auto; }
.card-form .check-row { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; margin: 8px 0; }
.error-text { color: var(--primary); }
.sub-banner.tone-quiet { background: var(--white); padding-top: 6px; padding-bottom: 6px; font-size: 13px; color: var(--muted); }

/* ---------- Left menu (app.js renderSideNav) ---------- */
.app-body { display: flex; align-items: stretch; min-height: calc(100vh - 63px); }
.with-side .app-body { background: linear-gradient(to right, var(--surface-2) 248px, var(--cream) 248px); }
/* The left menu exists only in a company admin's settings; dashboards are full width. */
#app-shell:not(.with-side) .side-nav, #app-shell:not(.with-side) .side-scrim, #app-shell:not(.with-side) .side-toggle { display: none !important; }
@media (max-width: 900px) { .app-body { background: var(--cream); } }
.lib-more { align-self: center; margin-top: 8px; }
.app-main { flex: 1 1 auto; min-width: 0; }
.side-nav {
  flex: 0 0 248px; width: 248px; box-sizing: border-box; background: var(--surface-2); border-right: 1px solid var(--line);
  padding: 16px 12px 24px; display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow-y: auto;
}
.admin-mode .side-nav, .admin-mode .side-scrim { display: none; }
.side-company { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid var(--line); }
.side-co-mark { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.side-co-text { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.side-co-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-co-text span { font-size: 12px; color: var(--muted); }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-group + .side-group { border-top: 1px solid var(--line); padding-top: 12px; }
.side-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 10px 6px; }
.side-link {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 7px 10px; box-sizing: border-box;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  transition: background .15s;
}
.side-link svg { flex: 0 0 16px; color: var(--muted); }
.side-link:hover { background: var(--surface-3); }
.side-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.side-link.on { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.side-link.on svg { color: var(--on-primary); }
.side-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-link[data-new-dash] { color: var(--muted); }
.side-new-form[hidden] { display: none; }
.side-new-form { display: flex; gap: 6px; padding: 4px 4px 6px; flex-wrap: wrap; }
.side-new-form input { flex: 1 1 120px; min-width: 0; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--white); }
.side-empty { margin: 0; padding: 4px 10px; font-size: 13px; color: var(--muted); }
.side-toggle { display: none; }
.side-scrim { display: none; }
@media (max-width: 900px) {
  .side-toggle { display: inline-flex; }
  .side-nav {
    position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; max-height: none; width: min(300px, 86vw);
    padding-top: calc(16px + env(safe-area-inset-top, 0px)); transform: translateX(-102%); transition: transform .22s ease;
    box-shadow: 8px 0 30px rgba(var(--shadow-ink), .18);
  }
  .side-open .side-nav { transform: none; }
  .side-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(var(--shadow-ink), .35); }
  .side-scrim[hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .side-nav, .side-link { transition: none; } }

/* dashboard header actions + empty dashboard */
.dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
@media (max-width: 760px) { .dash-controls { align-items: flex-start; } }
.dash-empty { border: 1.5px dashed var(--line-strong); border-radius: 16px; padding: 36px 24px; text-align: center; background: var(--surface-2); }
.dash-empty p { margin: 0 0 8px; }
.dash-empty .btn { margin-top: 8px; }

/* ---------- Settings tabs (company admin) ---------- */
.settings-tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; border-bottom: 1px solid var(--line); margin: 4px 0 20px; }
.settings-tab { border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--muted); padding: 10px 2px; min-height: 44px; border-bottom: 2.5px solid transparent; cursor: pointer; }
.settings-tab:hover { color: var(--ink); }
.settings-tab.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--primary); }
.settings-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.settings-lead { margin: 0 0 16px; max-width: 70ch; line-height: 1.6; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { color: var(--primary); }

/* ---------- Widget library (public/library.js) ---------- */
.library-view { background: var(--white); min-height: calc(100vh - 63px); }
.lib-wrap { max-width: 1240px; margin: 0 auto; padding: 28px 32px 64px; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 700px) { .lib-wrap { padding: 18px 16px 48px; gap: 22px; } }
.lib-loading { padding: 32px; }
.lib-head { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.lib-h1 { margin: 0; font-family: 'Kanit', 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 30px; line-height: 1.3; text-wrap: balance; }
.lib-lead { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 70ch; }
.lib-target { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--amber-line); font-size: 14px; }
.lib-search { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: 14px; background: var(--white); border: 1.5px solid var(--line-strong); color: var(--muted); }
.lib-search:focus-within { border-color: var(--primary); }
.lib-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--ink); padding: 12px 0; }
.lib-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-chip { min-height: 36px; padding: 0 14px; border-radius: var(--pill-radius); border: 1px solid var(--line-strong); background: var(--white); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.lib-chip:hover { background: var(--cream); }
.lib-chip.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.lib-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.lib-sec-head h2 { margin: 0; font-size: 18px; }
.lib-pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
@media (max-width: 700px) {
  .lib-pack-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .lib-pack { scroll-snap-align: start; }
}
.lib-pack { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.lib-pack-role { font-size: 12px; font-weight: 700; color: var(--amber-ink); letter-spacing: .03em; }
.lib-pack-title { font-size: 16px; line-height: 1.35; }
.lib-pack-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.lib-browse { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.lib-cats { flex: 1 1 200px; max-width: 230px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; }
.lib-cats-h { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.lib-cat { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); text-align: left; cursor: pointer; }
.lib-cat span { margin-left: auto; font-size: 12px; color: var(--muted); }
.lib-cat:hover { background: var(--cream); }
.lib-cat.on { background: var(--cream); font-weight: 700; box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 760px) {
  .lib-cats { max-width: none; flex-basis: 100%; flex-direction: row; overflow-x: auto; position: static; padding-bottom: 4px; }
  .lib-cats-h { display: none; }
  .lib-cat { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--line); }
}
.lib-results { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.lib-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.check-inline { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.lib-card {
  display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); border-radius: 16px; background: var(--white); color: var(--ink); font: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.lib-card:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(47, 107, 235, .08); transform: translateY(-1px); }
.lib-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lib-thumb { display: flex; align-items: center; justify-content: center; height: 112px; padding: 14px 18px; box-sizing: border-box; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.lib-thumb svg { width: 100%; height: 100%; }
.lib-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.lib-q { font-size: 15px; font-weight: 700; line-height: 1.4; }
.lib-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; }
.lib-tag { font-size: 11.5px; padding: 3px 8px; border-radius: 6px; background: var(--cream); color: var(--ink-2); }
.lib-tag.line { background: var(--good-soft); color: var(--status-good); }
.lib-in { font-size: 11.5px; font-weight: 600; color: var(--status-good); }
.lib-add-hint { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.lib-empty { padding: 24px 0; }
@media (prefers-reduced-motion: reduce) { .lib-card { transition: none; } .lib-card:hover { transform: none; } }

.lib-crumb { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lib-crumb .link-btn { color: var(--muted); }
.lib-detail-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.lib-detail-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.lib-detail-main header { display: flex; flex-direction: column; gap: 8px; }
.lib-preview { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.lib-preview-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); font-size: 14px; }
.lib-preview-body { padding: 16px; min-height: 160px; }
.lib-preview-body .dash-title, .lib-preview-body .dash-desc { display: none; }
.lib-preview-body .widget-card { box-shadow: none; }
.lib-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.lib-facts div { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.lib-facts dt { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.lib-facts dd { margin: 0; font-size: 14px; line-height: 1.5; }
.lib-related h2 { margin: 0 0 10px; font-size: 15px; }
.lib-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.lib-mini { display: flex; flex-direction: column; gap: 4px; padding: 14px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--white); font: inherit; color: var(--ink); cursor: pointer; }
.lib-mini:hover { border-color: var(--primary); }
.lib-mini b { font-size: 14px; line-height: 1.4; }
.lib-mini span { font-size: 12.5px; }
.lib-add { flex: 1 1 300px; max-width: 380px; position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 16px; border: 1px solid var(--amber-line); background: var(--white); box-sizing: border-box; }
@media (max-width: 900px) { .lib-add { max-width: none; position: static; } }
.lib-add h2 { margin: 0; font-size: 16px; }
.lib-add-form { display: flex; flex-direction: column; gap: 12px; }
.lib-dash-list { display: flex; flex-direction: column; gap: 2px; }
.lib-dash { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 10px; font-size: 14px; cursor: pointer; box-sizing: border-box; }
.lib-dash:hover { background: var(--surface-2); }
.lib-dash input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--primary); }
.lib-dash.had { color: var(--muted); cursor: default; }
.lib-had { margin-left: auto; font-size: 12px; }
.lib-new { border: 1px dashed var(--line-strong); margin-top: 4px; }
.lib-new-name { margin: 6px 0 0; padding: 9px 12px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--cream); }
.lib-size { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.lib-size select { min-height: 40px; padding: 0 10px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); font: inherit; font-weight: 500; }
.lib-add-btn { min-height: 46px; font-size: 15px; }
.lib-done { display: flex; flex-direction: column; gap: 6px; }
.lib-done span { display: flex; flex-wrap: wrap; gap: 14px; }
.lib-add-note { margin: 0; font-size: 12.5px; }

/* KSS Console company page: jump to a section instead of scrolling the stack */
.jump-bar { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; margin: 0 0 8px; background: var(--white); border-bottom: 1px solid var(--line); }
.jump-bar a { flex: 0 0 auto; padding: 6px 12px; border-radius: var(--pill-radius); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13px; white-space: nowrap; }
.jump-bar a:hover { background: var(--cream); }
.admin-card[id] { scroll-margin-top: 64px; }

/* "Start with a basic dashboard?" on an empty dashboard */
.dash-empty.starter { text-align: left; padding: 28px; border-style: solid; border-color: var(--line); background: var(--surface-2); }
.starter-h { margin: 0 0 6px; font-family: 'Kanit', 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 22px; }
.starter-lead { margin: 0 0 18px; max-width: 70ch; }
.starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.starter-opt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--white); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.starter-opt:hover { border-color: var(--line-strong); }
.starter-opt.on { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 107, 235, .12); }
.starter-opt.off { opacity: .55; cursor: not-allowed; }
.starter-opt input { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; accent-color: var(--primary); margin: 0; }
.starter-opt:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.starter-role { font-size: 12px; font-weight: 700; color: var(--amber-ink); padding-right: 26px; }
.starter-title { font-size: 16px; line-height: 1.35; padding-right: 26px; }
.starter-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.starter-count { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 700; color: var(--status-good); }
.starter-opt.off .starter-count { color: var(--muted); }
.starter-skip { font-size: 12px; color: var(--amber-ink); line-height: 1.45; }
.starter-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.starter-actions .btn { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .starter-opt { transition: none; } }

/* ---------- Dashboard switcher: the title is a dropdown (HubSpot-style) ---------- */
.dash-head-left { flex: 1 1 260px; min-width: 0; }
.dash-switch-wrap { position: relative; }
.dash-h1 { margin: 0; font-size: inherit; }
.dash-switch { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px 4px 4px; margin-left: -4px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.dash-switch .dash-title { margin: 0; font-size: 22px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-switch svg { flex: 0 0 18px; color: var(--muted); transition: transform .15s; }
@media (hover: hover) { .dash-switch:hover { background: var(--surface-3); } }
.dash-switch[aria-expanded="true"] svg { transform: rotate(180deg); }
.dash-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dash-pop { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: min(440px, calc(100vw - 32px)); background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(var(--shadow-ink), .16); overflow: hidden; }
.dash-pop[hidden] { display: none; }
.dash-pop-tabs { display: flex; gap: 4px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); }
.dash-pop-tab { flex: 1; min-height: 40px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--muted); border-bottom: 2.5px solid transparent; cursor: pointer; }
.dash-pop-tab.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.dash-pop-search { display: flex; align-items: center; gap: 8px; margin: 10px; padding: 0 12px; min-height: 42px; border: 1.5px solid var(--line-strong); border-radius: 10px; color: var(--muted); }
.dash-pop-search:focus-within { border-color: var(--primary); }
.dash-pop-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); }
.dash-pop-list { list-style: none; margin: 0; padding: 0 6px 6px; max-height: min(52vh, 420px); overflow-y: auto; }
.dash-pop-row { display: flex; align-items: center; gap: 2px; border-radius: 9px; }
.dash-pop-row:hover { background: var(--surface-3); }
.dash-pop-row.on { background: var(--cream); }
.dash-pop-star { flex: 0 0 36px; height: 36px; border: 0; background: none; color: var(--amber); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.dash-pop-star:hover { color: var(--amber-ink); }
.dash-pop-star.faved { color: var(--amber-ink); }
.dash-pop-go { flex: 1; min-width: 0; min-height: 40px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 8px 6px 2px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.dash-pop-go span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-pop-row.on .dash-pop-go span { font-weight: 700; }
.dash-pop-go small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-pop-empty { padding: 16px 12px; font-size: 13px; color: var(--muted); }
.dash-pop-foot { border-top: 1px solid var(--line); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.dash-pop-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.dash-pop-new { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-pop-new[hidden] { display: none; }
.dash-pop-new input { flex: 1 1 160px; min-width: 0; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 9px; }
.lib-home { align-self: flex-start; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .dash-switch svg { transition: none; } }

/* "อธิบาย" on a widget (public/explain.js) */
.widget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.widget-head .widget-title { flex: 1 1 auto; min-width: 0; }
.widget-explain {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: var(--pill-radius); background: var(--white);
  color: var(--amber-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s;
}
.widget-explain:hover { background: var(--surface-3); border-color: var(--amber-line); }
.widget-explain.on { background: var(--surface-3); border-color: var(--amber-ink); color: var(--ink); }
.widget-explain:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.explain-box { margin: 4px 0 14px; padding: 14px 16px; border-radius: 12px; background: var(--amber-soft); border: 1px solid var(--amber-line); font-size: 14px; line-height: 1.6; }
.explain-box[hidden] { display: none; }
.explain-q { margin: 0 0 2px; font-weight: 700; }
.explain-why { margin: 0 0 8px; color: var(--ink-2); font-size: 13px; }
.explain-list { margin: 0 0 8px; padding-left: 20px; }
.explain-list li { margin: 2px 0; }
.explain-tip { margin: 0 0 6px; padding: 8px 10px; border-radius: 8px; background: var(--white); font-size: 13.5px; }
.explain-foot { margin: 0; font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .widget-explain { transition: none; } }

/* ---------- "ถาม AI" (public/aichat.js) ---------- */
.ai-fab {
  position: fixed; z-index: 45; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--pill-radius);
  background: var(--primary); color: var(--on-primary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 26px rgba(var(--shadow-ink), .25); transition: transform .15s, background .15s;
}
.ai-fab[hidden] { display: none; }
.ai-fab:hover { transform: translateY(-1px); background: var(--primary-hover); }
.ai-fab.on { background: var(--primary); }
.ai-fab:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.ai-panel {
  position: fixed; z-index: 46; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - 32px)); height: min(560px, calc(100vh - 140px)); display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 50px rgba(var(--shadow-ink), .22); overflow: hidden;
}
.ai-panel[hidden] { display: none; }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--primary); color: var(--on-primary); }
.ai-head div { display: flex; flex-direction: column; }
.ai-sub { font-size: 12px; opacity: .75; }
.ai-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--on-primary); cursor: pointer; font-size: 15px; }
.ai-close:hover { background: rgba(255, 255, 255, .12); }
.ai-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.ai-empty { margin: 8px 4px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.ai-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.ai-msg p { margin: 0 0 6px; } .ai-msg p:last-child { margin: 0; }
.ai-msg ul { margin: 4px 0; padding-left: 18px; }
.ai-msg.user { align-self: flex-end; background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 4px; }
.ai-msg.model { align-self: flex-start; background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ai-msg.err { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-ink); }
.ai-msg.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.ai-msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--amber-line); animation: ai-dot 1s infinite ease-in-out; }
.ai-msg.typing span:nth-child(2) { animation-delay: .15s; } .ai-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; background: var(--surface-2); }
.ai-chips:not(:empty) { padding-bottom: 10px; }
.ai-chip { min-height: 34px; padding: 0 12px; border: 1px solid var(--amber-line); border-radius: var(--pill-radius); background: var(--white); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.ai-chip:hover { background: var(--surface-3); }
.ai-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.ai-form input { flex: 1; min-width: 0; min-height: 42px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: var(--pill-radius); font: inherit; font-size: 14px; }
.ai-form input:focus { outline: none; border-color: var(--primary); }
.ai-send { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ai-send:disabled { opacity: .5; cursor: wait; }
.ai-note { margin: 0; padding: 0 14px 10px; font-size: 11.5px; color: var(--muted); }
@media (max-width: 520px) {
  /* Phone: the chat is a full-screen sheet, controls are 44px. */
  .ai-panel { inset: 0; width: auto; height: auto; max-height: none; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top, 0px); z-index: 60; }
  .ai-panel .ai-head { padding-top: 12px; }
  body.ai-sheet-open { overflow: hidden; }
  body.ai-sheet-open .ai-fab { display: none; }
  .ai-fab span { display: none; } .ai-fab { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .ai-panel .ai-close { width: 44px; height: 44px; }
  .ai-panel .ai-misses, .ai-panel .ai-go, .ai-panel .ai-chip, .ai-panel .ai-reason { min-height: 44px; }
  .ai-panel .ai-thumb { width: 44px; height: 44px; }
  .ai-panel .ai-send { width: 46px; height: 46px; }
  .ai-form { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .ai-form input { min-height: 46px; font-size: 16px; }
  .ai-msg { max-width: 94%; }
}

.ai-head-act { display: inline-flex; align-items: center; gap: 6px; }
.ai-head-act [hidden] { display: none; }
.ai-misses { min-height: 30px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--pill-radius); background: transparent; color: var(--on-primary); font: inherit; font-size: 12px; cursor: pointer; }
.ai-misses:hover { background: rgba(255, 255, 255, .12); }
.ai-gos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-go { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--pill-radius); background: var(--primary); color: var(--on-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ai-go:hover { filter: brightness(.94); }
.ai-go:focus-visible, .ai-thumb:focus-visible, .ai-misses:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.ai-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--muted); }
.ai-src.ai { color: var(--amber-ink); }
.ai-rate { display: inline-flex; gap: 2px; margin-left: auto; }
.ai-thumb { width: 36px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ai-thumb:hover { background: var(--surface-3); color: var(--ink); }
.ai-thanks { margin-left: auto; }
/* A Gemini answer must look different from a rule / FAQ answer. */
.ai-msg.by-ai { background: var(--amber-soft); border: 1px solid var(--amber-line); border-left: 4px solid var(--brass); }
.ai-tag { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px; padding: 2px 8px; border-radius: var(--pill-radius); background: var(--amber-soft); color: var(--amber-ink); font-size: 11.5px; font-weight: 700; }
.ai-why { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; font-size: 12.5px; color: var(--ink); }
.ai-reason { min-height: 34px; padding: 0 10px; border: 1px solid var(--amber-line); border-radius: var(--pill-radius); background: var(--white); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.ai-reason:hover { background: var(--surface-3); }
.ai-reason.skip { border-color: transparent; background: transparent; color: var(--muted); }
.ai-reason:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.ai-meta { flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .ai-fab { transition: none; } .ai-msg.typing span { animation: none; } }

/* ---------- Light / dark toggle ---------- */
.theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ico-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .ico-moon { display: none; }
}

@media (max-width: 700px) { .icon-btn { width: 44px; height: 44px; } .btn.small { min-height: 40px; } }

/* ---------- Ops UX: triage pills, short tables, skeletons, icons ---------- */
.sev-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: var(--pill-radius); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sev-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: currentColor; }
.sev-high { background: var(--danger-soft); color: var(--danger-ink); }
.sev-mid { background: var(--amber-soft); color: var(--amber-ink); }
.sev-low { background: var(--surface-3); color: var(--ink-2); }
.sev-new { background: var(--primary-soft); color: var(--primary); }
.table-more { display: block; width: 100%; min-height: 40px; margin-top: 6px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface-2); color: var(--primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.table-more:hover { background: var(--primary-soft); border-color: var(--primary-line); }
.table-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.skel { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.skel span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; }
.skel span:nth-child(1) { width: 70%; } .skel span:nth-child(2) { width: 92%; height: 90px; } .skel span:nth-child(3) { width: 55%; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel span { animation: none; } }
.icon-btn svg { display: block; color: var(--ink-2); }
.icon-btn:hover svg { color: var(--ink); }
#open-admin-btn { gap: 6px; }
#open-admin-btn svg { flex: 0 0 auto; }
@media (max-width: 700px) {
  .page-filter { align-items: stretch; }
  .page-filter-group { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; max-width: 100%; }
  .page-filter-group::-webkit-scrollbar { display: none; }
  .page-filter-group .range-chip { flex: 0 0 auto; min-height: 44px; }
  .page-filter-label { flex: 0 0 auto; position: sticky; left: 0; background: var(--surface); padding-right: 6px; }
}
.chart-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
/* Phone: each table row reads as a small card; the long "where it is stuck" text stays, numbers stay visible. */
@media (max-width: 700px) {
  .table-scroll table.report-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-scroll table.report-table, .table-scroll table.report-table tbody { display: block; }
  .table-scroll table.report-table tr { display: grid; grid-auto-flow: row dense; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 2px; border-bottom: 1px solid var(--line-soft); }
  .table-scroll table.report-table td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .table-scroll table.report-table td:not(.num) { grid-column: 1; }
  .table-scroll table.report-table td.num { grid-column: 2; text-align: right; font-weight: 700; }
  .table-scroll table.report-table td.num::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
  .table-scroll table.report-table td:empty { display: none; }
  .table-scroll table.report-table tr:hover td { background: none; }
}

/* ---------- Arrange mode (drag, snap to ⅓ / ½ / full, 1-3 rows) ---------- */
.dash-edit svg { flex: 0 0 auto; }
.arrange-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: var(--primary-soft); border: 1px solid var(--primary-line); box-shadow: 0 8px 24px rgba(var(--shadow-ink), .08); }
.arrange-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: var(--ink-2); }
.arrange-text b { font-size: 14px; color: var(--ink); }
.arrange-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.arrange-msg { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--danger-ink); }
.arrange-msg:empty { display: none; }
.widget-grid.arranging { position: relative; padding: 10px; margin: -10px; border-radius: 18px; outline: 2px dashed var(--primary-line); outline-offset: -2px;
  background-image: repeating-linear-gradient(to right, var(--surface-3) 0 calc((100% - 20px - 80px) / 6), transparent calc((100% - 20px - 80px) / 6) calc((100% - 20px - 80px) / 6 + 16px));
  background-origin: content-box; background-clip: content-box; }
.widget-grid.arranging .widget-card { position: relative; box-shadow: 0 0 0 1.5px var(--primary-line), 0 6px 18px rgba(var(--shadow-ink), .06); transition: box-shadow .15s, opacity .15s; }
.widget-grid.arranging .widget-card .widget-body { pointer-events: none; }
.arr-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--line-strong); }
.arr-grip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 8px; border: 0; border-radius: 10px; background: var(--ink); color: var(--on-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: grab; touch-action: none; user-select: none; }
.arr-grip:active { cursor: grabbing; }
.arr-grip:focus-visible, .arr-size button:focus-visible, .arr-resize:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.arr-size { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-3); gap: 2px; }
.arr-size button { min-width: 40px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.arr-size button[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgba(var(--shadow-ink), .15); }
.arr-resize { position: absolute; right: 4px; bottom: 4px; width: 26px; height: 26px; border: 0; border-radius: 6px; cursor: nwse-resize; touch-action: none; background: transparent;
  background-image: radial-gradient(circle, var(--primary) 1.4px, transparent 1.6px); background-size: 6px 6px; background-position: right bottom; opacity: .8;
  clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.arr-resize:hover { opacity: 1; background-color: var(--primary-soft); }
.widget-card.arr-dragging { opacity: .55; box-shadow: 0 0 0 2px var(--primary), 0 16px 40px rgba(var(--shadow-ink), .18) !important; z-index: 2; }
.widget-card.arr-resizing { box-shadow: 0 0 0 2px var(--primary) !important; }
@media (max-width: 760px) {
  .widget-grid.arranging { background-image: none; }
  .arr-resize { display: none; }
  .arr-grip span { display: none; }
  .arr-grip, .arr-size button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .widget-grid.arranging .widget-card { transition: none; } }
.sev-crit { background: var(--danger); color: var(--on-primary); }
:root[data-theme="dark"] .sev-crit { color: #1a0b0b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sev-crit { color: #1a0b0b; } }

/* ---------- เช้านี้ต้องทำ ---------- */
.today-card { margin: 0 0 16px; padding: 16px 18px; border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--danger); box-shadow: 0 4px 14px rgba(var(--shadow-ink), .05); }
.today-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.today-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.today-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.today-fold { min-width: 36px; min-height: 36px; }
.today-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.today-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.today-item:first-child { border-top: 0; }
.today-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.today-main b { font-weight: 700; overflow-wrap: anywhere; }
.today-main span { color: var(--ink-2); overflow-wrap: anywhere; }
.today-main .today-meta { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.today-main em { font-style: normal; color: var(--primary); font-weight: 600; }
.today-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.today-acts .link-btn { margin: 0; }
.today-assign { grid-column: 2 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.today-assign input { flex: 1 1 200px; min-height: 38px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
.today-more { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.today-empty { padding: 10px 0; color: var(--muted); font-size: 13px; }
.today-taken { margin-top: 8px; font-size: 13px; }
.today-taken summary { cursor: pointer; color: var(--muted); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.today-msg { margin: 6px 0 0; font-size: 13px; color: var(--danger-ink); }
.today-msg:empty { display: none; }
.widget-card.flash { box-shadow: 0 0 0 3px var(--primary) !important; transition: box-shadow .3s; }
@media (max-width: 700px) {
  .today-item { grid-template-columns: auto minmax(0, 1fr); }
  .today-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .today-acts .btn.small { min-height: 44px; }
}
.tab-panel-wrap { padding-bottom: 96px; }
.today-assign[hidden] { display: none; }
body.arranging-on .ai-fab { display: none; }
.arr-hide { display: none !important; }
.arr-warn { margin: -4px 0 10px; padding: 6px 10px; border-radius: 8px; background: var(--amber-soft); color: var(--amber-ink); font-size: 12.5px; }
.today-owner { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--pill-radius); background: var(--surface-3); color: var(--ink-2) !important; font-size: 11.5px; font-weight: 600; }
.today-msg.ok { color: var(--status-good); }


.home-branch { position: relative; }
.home-branch summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; max-width: 220px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--pill-radius); background: var(--surface); color: var(--ink); font-size: 13px; }
.home-branch summary::-webkit-details-marker { display: none; }
.home-branch summary::after { content: '▾'; color: var(--muted); }
.home-branch .hb-label { color: var(--muted); font-size: 12px; }
.home-branch .hb-val { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-branch[open] summary { border-color: var(--primary, #2f6fed); }
.home-branch.saved summary { border-color: var(--good); }
.home-branch.err summary { border-color: var(--bad, #d93025); }
.home-branch[data-empty] summary { opacity: .6; }
.hb-menu { position: absolute; z-index: 20; right: 0; top: calc(100% + 4px); min-width: 220px; max-height: 280px; overflow: auto; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.hb-hint { margin: 2px 6px 6px; font-size: 12px; color: var(--muted); }
.hb-opt { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.hb-opt:hover { background: var(--hover, rgba(0,0,0,.05)); }
.hb-opt input { width: 18px; height: 18px; }
@media (max-width: 700px) { .home-branch summary { min-height: 44px; } .hb-opt { min-height: 44px; } .hb-menu { left: 0; right: auto; } }
.home-branch { display: inline-block; }
.home-branch summary::marker { content: ''; }
.today-main .today-owner { align-self: flex-start; margin: 2px 0 0; }
@media (max-width: 700px) { .today-fold { min-height: 44px; } }
.home-branch .hb-label { white-space: nowrap; }

.pf-use { font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.pf-use summary { cursor: pointer; list-style: none; padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--line); white-space: nowrap; }
.pf-use summary::-webkit-details-marker { display: none; }
.pf-use[open] { flex-basis: 100%; }
.pf-use[open] > span { display: block; margin-top: 4px; line-height: 1.6; }
@media (max-width: 700px) { .pf-use summary { min-height: 32px; display: inline-flex; align-items: center; } }

/* ---------- Phone / tablet fit: no dead space, many-number rows in a tidy grid ---------- */
@media (max-width: 760px) {
  .widget-card.rows-2, .widget-card.rows-3 { min-height: 0; }
  .widget-card.rows-2 .chart-wrap { height: 320px; }
  .widget-card.rows-3 .chart-wrap { height: 380px; }
  .widget-card.rows-2 .heat-scroll, .widget-card.rows-3 .heat-scroll { max-height: 460px; }
  .widget-card.rows-2 .table-scroll, .widget-card.rows-3 .table-scroll { max-height: 520px; }
  .widget-card.rows-2.widget-scatter .chart-wrap { height: 340px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .widget-card.rows-2 .chart-wrap { height: 380px; }
  .widget-card.rows-3 .chart-wrap { height: 520px; }
  .widget-card.rows-2 { min-height: 0; } .widget-card.rows-3 { min-height: 0; }
}
@media (max-width: 700px) {
  .table-scroll table.report-table.nums-many tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 12px 2px; }
  .table-scroll table.report-table.nums-many td:not(.num) { grid-column: 1 / -1; font-weight: 700; }
  .table-scroll table.report-table.nums-many td.num { grid-column: auto; text-align: left; font-weight: 600; }
  .table-scroll table.report-table.nums-many td.num::before { white-space: nowrap; }
}
/* filter note sits on its own line so the chip row can scroll without hiding it */
@media (max-width: 700px) {
  .page-filter-group { flex-wrap: wrap; overflow: visible; }
  .page-filter-group .chip-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; flex: 1 0 100%; }
  .page-filter-label { position: static; }
}

.page-filter-group .chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 700px) { .page-filter-group .chip-row { flex-wrap: nowrap; } .page-filter-group .range-chip { min-height: 44px; } }
/* Tablet: a table squeezed into a ⅓/½ card breaks every word onto its own line — give it the full row. */
@media (min-width: 701px) and (max-width: 1100px) {
  .widget-grid:not(.arranging) .widget-card:has(.report-table) { grid-column: span 6; }
  .report-table td:first-child, .report-table th:first-child { white-space: nowrap; }
}

@media (max-width: 760px) {
  .kpi-row .kpi-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .widget-card.rows-2 .heat-scroll, .widget-card.rows-3 .heat-scroll { max-height: none; }
  .heat-table th.heat-row { max-width: 104px; }
  .heat-table td { padding: 4px 4px; min-width: 42px; }
  .heat-scroll { -webkit-overflow-scrolling: touch; box-shadow: inset -14px 0 10px -12px rgba(var(--shadow-ink), .18); }
}
@media (max-width: 700px) {
  .pf-use summary { min-height: 44px; padding: 0 12px; }
  .widget-grid:not(.arranging) { padding-bottom: 76px; }
  .table-scroll table.report-table.nums-many td.num::before { font-size: 12px; color: var(--ink-2); }
}

.line-quota.warn { color: var(--danger-ink); font-weight: 600; }

.line-summaries .sum-row { align-items: flex-start; }
.line-summaries .sum-row.is-off { opacity: .5; cursor: not-allowed; }
.line-summaries .sum-row.is-off input { cursor: not-allowed; }
.sum-off-note { font-size: 12px; color: var(--muted); }
.line-summaries .helper-text { margin-top: 14px; clear: both; }

.line-summaries .sum-row.is-off { opacity: 1; }
.line-summaries .sum-row.is-off > span { color: var(--muted); }
@media (max-width: 700px) { .line-summaries .sum-row { min-height: 44px; padding: 6px 0; } .line-summaries .sum-row input { width: 22px; height: 22px; } }
.sub-h { font-size: 14px; margin: 18px 0 6px; }

/* ---------- Admin: งานวันนี้, support loop, system status ---------- */
.admin-nav-item[data-view] { display: flex; align-items: center; gap: 9px; min-height: 40px; }
.admin-nav-item svg { flex: 0 0 16px; color: var(--muted); }
.admin-nav-item.active svg { color: var(--primary); }
.admin-nav-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.admin-nav-item .nav-badge { margin-left: auto; }
.nav-badge.hidden { display: none; }
#home-badge { background: var(--danger); color: #fff; }

.ops-chip { display: inline-block; padding: 1px 9px; border-radius: var(--pill-radius); font-size: 12px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.ops-chip.ops-bad { background: var(--danger-soft); color: var(--danger-ink); }
.ops-chip.ops-warn { background: var(--amber-soft); color: var(--amber-ink); }
.ops-chip.ops-ok { background: var(--good-soft); color: var(--status-good); }
.ops-chip.ops-off { background: var(--surface-3); color: var(--muted); }

.ops-inbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ops-inbox-item { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: var(--ink); background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; min-height: 56px; cursor: pointer; }
.ops-inbox-item:hover { background: var(--surface-3); }
.ops-inbox-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ops-inbox-n { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 28px; }
.ops-inbox-item.has .ops-inbox-n { color: var(--primary); }
.ops-new { color: var(--danger-ink); font-size: 12px; margin-left: 4px; }
.ops-sum { margin: 0 0 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.ops-empty { color: var(--muted); margin: 6px 0; }

.ops-queue, .ops-q-issues, .ops-checks, .ops-sup, .ops-mine { list-style: none; margin: 0; padding: 0; }
.ops-queue { display: flex; flex-direction: column; gap: 10px; }
.ops-q { border: 1.5px solid var(--line); border-left-width: 4px; border-radius: 12px; padding: 12px 14px; }
.ops-q.ops-bad { border-left-color: var(--danger); }
.ops-q.ops-warn { border-left-color: var(--amber); }
.ops-q-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ops-q-name { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: 15px; color: var(--ink); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.ops-q-name:hover { text-decoration-color: var(--primary); }
.ops-q-name:focus-visible, .ops-q-go:focus-visible, .ops-q-sup:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.ops-q-sup { background: var(--primary-soft); color: var(--primary); border: 0; border-radius: var(--pill-radius); padding: 2px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ops-q-issues li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13.5px; padding: 3px 0; }
.ops-q-go { margin: 0 0 0 auto; color: var(--primary); font-weight: 600; }

.ops-head-issues { margin: 6px 0 0; display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; font-size: 13px; }

.ops-check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.ops-check:last-child { border-bottom: 0; }
.ops-check-body { flex: 1 1 auto; min-width: 0; }
.ops-check-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ops-detail { margin: 3px 0 0; font-size: 14px; color: var(--ink-2); }
.ops-fix { margin: 4px 0 0; font-size: 13.5px; color: var(--ink); }
.ops-raw { margin: 4px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ops-check .btn { flex: 0 0 auto; align-self: center; }
.ops-dot { flex: 0 0 10px; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--line-strong); }
.ops-ok > .ops-dot, .ops-ok .ops-dot { background: var(--status-good); }
.ops-warn > .ops-dot, .ops-warn .ops-dot { background: var(--amber); }
.ops-bad > .ops-dot, .ops-bad .ops-dot { background: var(--danger); }
.ops-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; margin-bottom: 10px; font-size: 16px; }
.ops-banner .ops-dot { margin-top: 0; }
.ops-banner.ops-ok { background: var(--good-soft); color: var(--status-good); }
.ops-banner.ops-warn { background: var(--amber-soft); color: var(--amber-ink); }
.ops-banner.ops-bad { background: var(--danger-soft); color: var(--danger-ink); }

.ops-sup-item { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.ops-sup-item.ops-s-open { border-left: 4px solid var(--primary); }
.ops-sup-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 13px; }
.ops-kind { background: var(--surface-3); border-radius: 6px; padding: 1px 8px; font-weight: 700; font-size: 12px; }
.ops-status { margin-left: auto; font-size: 12px; font-weight: 700; border-radius: var(--pill-radius); padding: 1px 10px; }
.ops-st-open { background: var(--primary-soft); color: var(--primary); }
.ops-st-doing { background: var(--amber-soft); color: var(--amber-ink); }
.ops-st-done { background: var(--good-soft); color: var(--status-good); }
.ops-msg { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ops-reply { margin: 0 0 4px; padding: 8px 12px; border-radius: 10px; background: var(--primary-soft); font-size: 14px; }
.ops-ctxs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.ops-ctx { font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; overflow-wrap: anywhere; }
.ops-ctx i { font-style: normal; color: var(--muted); margin-right: 4px; }
.ops-sup-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ops-note { flex: 1 1 220px; min-width: 0; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.ops-mine li { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.ops-mine li:last-child { border-bottom: 0; }

.ops-form { max-width: 520px; }
.ops-kinds { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.ops-kind-opt { position: relative; }
.ops-kind-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ops-kind-opt span { display: inline-block; padding: 8px 14px; min-height: 40px; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: var(--pill-radius); font-size: 14px; }
.ops-kind-opt input:checked + span { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.ops-kind-opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.ops-form .field textarea { font-family: inherit; font-size: 15px; }
.ops-attach { margin: 4px 0 4px; font-size: 13px; color: var(--muted); }

@media (max-width: 700px) {
  .ops-check { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 12px; }
  .ops-check .btn { grid-column: 2; justify-self: start; margin-top: 8px; min-height: 44px; }
  .ops-sup-act .btn { min-height: 44px; }
  .ops-q-go { margin-left: 0; min-height: 32px; }
}
@media (max-width: 900px) {
  /* 150+ companies must not push the page itself a screen-length down the phone */
  #admin-company-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
  .admin-sidebar { gap: 2px; }
}
@media (max-width: 700px) {
  .topbar-left { flex-wrap: wrap; max-width: 100%; }
  .company-picker-wrap { min-width: 0; max-width: 100%; }
  .company-picker-wrap select { max-width: 100%; width: 100%; }
}

/* First-run guide (company admin with no dashboard yet) */
.firstrun { max-width: 1040px; margin-inline: auto; }
.fr-steps { list-style: none; margin: 14px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fr-step { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.fr-step.now { color: var(--ink, inherit); font-weight: 700; }
.fr-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong, var(--line)); font-size: 12px; font-weight: 700; }
.fr-step.now .fr-n { background: var(--primary); border-color: var(--primary); color: #fff; }
.fr-step.done .fr-n { background: var(--status-good); border-color: var(--status-good); color: #fff; }
.fr-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; margin-bottom: 16px; border-radius: 12px; background: var(--white); border: 1.5px solid var(--primary); }
.fr-connect .muted { flex: 1 1 260px; font-size: 13px; }
.firstrun-noaccess { text-align: left; padding: 28px; max-width: 640px; margin-inline: auto; }
.fr-actions { position: sticky; bottom: 0; z-index: 2; margin: 18px -28px -28px; padding: 14px 28px; background: var(--surface-2); border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; }
@media (max-width: 700px) { .fr-actions { margin: 18px -16px -16px; padding: 12px 16px; } }

/* Sample-data -> real-data confirm (inside the sync bar) */
.real-confirm { margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: var(--white); border: 1.5px solid var(--primary); display: flex; flex-direction: column; gap: 8px; }
.real-confirm ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.real-confirm p { margin: 0; font-size: 13px; line-height: 1.55; }
.real-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.real-actions .btn { min-height: 40px; }
.real-msg:empty { display: none; }

.real-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; padding: 12px 16px; border-radius: 12px; background: var(--amber-soft); color: var(--amber-ink); border: 1px solid var(--amber-line); font-size: 13px; line-height: 1.55; }
.real-note > span { flex: 1 1 320px; }
@media (max-width: 700px) { .real-actions .btn, .real-note .btn { min-height: 44px; } }