/* ═══════════════════════════════════════════════════════
   ADSLAKE POC2 — Design System
   Extended from poc1 · Orbit2c build
   Font: Prompt (Google Fonts) — Thai + Latin
═══════════════════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root {
  /* Brand */
  --primary:        #184c8f;
  --primary-hover:  #1557a8;
  --primary-light:  #DBEAFE;
  --primary-faint:  #EFF6FF;

  /* Platform brand */
  --shopee:         #ee4d2d;  --shopee-light:   #FEF2F0;
  --lazada:         #0f146d;  --lazada-light:   #EEEFFE;
  --tiktok:         #010101;  --tiktok-light:   #F0F0F0;
  --facebook:       #1877F2;  --facebook-light: #EEF5FF;
  --google:         #4285F4;  --google-light:   #EEF3FF;
  --line:           #06C755;  --line-light:     #EDFFF5;

  /* Status */
  --success:        #059669;  --success-light:  #D1FAE5;
  --warning:        #d97706;  --warning-light:  #FEF3C7;
  --danger:         #dc2626;  --danger-light:   #FEE2E2;
  --syncing:        #2563EB;  --syncing-light:  #DBEAFE;

  /* Surfaces */
  --bg:        #EEF2F9;
  --surface:   #ffffff;
  --surface-2: #F9FAFB;
  --surface-3: #F3F4F6;

  /* Text */
  --text-1: #111827;
  --text-2: #6B7280;
  --text-3: #9CA3AF;
  --text-disabled: #D1D5DB;

  /* Border & Shadow */
  --border:     #E5E7EB;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.07),0 1px 2px rgba(0,0,0,0.04);
  --shadow:     0 4px 16px rgba(24,76,143,0.08),0 1px 4px rgba(0,0,0,0.05);
  --shadow-lg:  0 8px 32px rgba(24,76,143,0.12),0 2px 8px rgba(0,0,0,0.06);
  --shadow-xl:  0 20px 48px rgba(24,76,143,0.16),0 4px 16px rgba(0,0,0,0.08);

  /* Layout */
  --sidebar-w: 280px;
  --topbar-h:  52px;

  /* Radius */
  --r-full: 9999px;
  --r-xl:   16px;
  --r-lg:   12px;
  --r-md:   8px;
  --r-sm:   6px;
  --r-xs:   4px;

  /* Font */
  --font: 'Prompt', sans-serif;
}

/* ─── RESET ─── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button,input,select,textarea { font-family: var(--font); }

/* ─── SORTABLE TABLES (Epic 17a) ───
   Generic affordance for any table.sortable (platform .ad-table tables are
   auto-tagged by sortable.js; system tables carry `sortable` in-template).
   The idle ↕ arrow keys off :not([data-no-sort]) so it also renders on
   JS-built tables whose headers don't exist at DOMContentLoaded. The glyph
   upgrades to ↑ / ↓ via aria-sort, which sortable.js toggles. */
.sortable thead th:not([data-no-sort]) { cursor:pointer; user-select:none; }
.sortable thead th:not([data-no-sort]):hover { color: var(--text-1); }
.sortable thead th:not([data-no-sort])::after {
  content:'↕'; opacity:0.35; margin-left:4px; font-size:9px;
}
.sortable thead th[aria-sort="ascending"]::after  { content:'↑'; opacity:1; }
.sortable thead th[aria-sort="descending"]::after { content:'↓'; opacity:1; }
img { display:block; }
a { text-decoration:none; }

/* ═══════════════════════════════════════════════════════
   ICONS — Heroicons v2 inline SVG helpers
═══════════════════════════════════════════════════════ */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon svg { display: block; }
.icon-sm svg { width:16px; height:16px; }
.icon-md svg { width:20px; height:20px; }
.icon-lg svg { width:24px; height:24px; }
.icon-xl svg { width:30px; height:30px; }
.icon-2xl svg { width:40px; height:40px; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.icon-spin { animation: spin 1s linear infinite; }

/* ═══════════════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════════════ */
.app { display:flex; height:100vh; overflow:hidden; }

/* ═══════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--primary);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 0 12px 20px;
  scrollbar-width: none;
  z-index: 100;
}
.sidebar::-webkit-scrollbar { display:none; }

.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 6px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 20px;
}
.logo-box {
  width:36px; height:36px;
  background: rgba(255,255,255,0.18);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size:13px; font-weight:700; color:#fff;
}
.logo-text { color:#fff; line-height:1.25; }
.logo-text strong { font-size:14px; font-weight:600; display:block; }
.logo-text small {
  font-size:9px; font-weight:300;
  opacity:0.45; letter-spacing:1.4px; text-transform:uppercase;
}

.sidebar-section { margin-bottom: 6px; }
.sidebar-section-label {
  font-size:9px; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase;
  color: rgba(255,255,255,0.35);
  padding: 14px 8px 6px;
}
.sidebar-divider {
  height:1px;
  background: rgba(255,255,255,0.08);
  margin: 8px 0;
}

/* Sync Now button area */
.sync-btn {
  width:100%; padding:10px 14px;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: var(--r-md);
  color:#fff; font-family:var(--font); font-size:13px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; gap:8px;
  transition: all 0.15s;
  text-align:left;
}
.sync-btn:hover:not(:disabled) { background: rgba(255,255,255,0.22); }
.sync-btn:disabled {
  opacity:0.55; cursor:not-allowed;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

.sync-status {
  font-size:11px; color: rgba(255,255,255,0.55);
  padding: 5px 8px 0;
  line-height: 1.4;
}

/* Schedule block */
.schedule-row {
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 8px;
}
.schedule-label { font-size:11px; color: rgba(255,255,255,0.55); }
.schedule-value { font-size:12.5px; font-weight:600; color:#fff; }
.schedule-edit {
  background:none; border:none; cursor:pointer;
  color: rgba(255,255,255,0.45);
  padding:4px; border-radius:var(--r-sm);
  display:flex; align-items:center;
  transition: color 0.15s;
}
.schedule-edit:hover { color:rgba(255,255,255,0.9); }

/* System Check button */
.sys-check-btn {
  width:100%; padding:9px 14px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: var(--r-md);
  color: rgba(255,255,255,0.8); font-family:var(--font); font-size:12.5px; font-weight:500;
  cursor:pointer; display:flex; align-items:center; gap:8px;
  transition: all 0.15s;
}
.sys-check-btn:hover { border-color:rgba(255,255,255,0.45); color:#fff; background:rgba(255,255,255,0.06); }
.sys-check-btn.active { background:rgba(255,255,255,0.16); color:#fff; }

/* Platform nav rows */
.plat-nav-row {
  display:flex; align-items:center; gap:8px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  cursor:pointer; color: rgba(255,255,255,0.6);
  font-size:12px;
  transition: all 0.15s;
  text-decoration:none;
}
.plat-nav-row:hover { background:rgba(255,255,255,0.08); color:#fff; }
.plat-nav-row.active {
  border-left:3px solid rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.12);
  color:#fff; font-weight:600; cursor:default;
}
.plat-nav-row .plat-icon {
  width:22px; height:22px; border-radius:5px;
  background:rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
}
.plat-nav-row .plat-icon img { width:14px; height:14px; object-fit:contain; }
.plat-nav-roas {
  margin-left:auto;
  font-size:10.5px; font-weight:600;
}

/* Stale lock warning */
.lock-warning {
  background: rgba(217,119,6,0.2);
  border: 1px solid rgba(217,119,6,0.4);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-top: 8px;
}
.lock-warning-title {
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; color:#fbbf24;
  margin-bottom:4px;
}
.lock-warning-body { font-size:10.5px; color:rgba(255,255,255,0.65); line-height:1.5; margin-bottom:8px; }
.lock-warning-link {
  font-size:11px; font-weight:600; color:#fbbf24;
  background:none; border:none; cursor:pointer;
  padding:0; text-decoration:underline;
}

.sidebar-spacer { flex:1; min-height:16px; }

.sidebar-footer {
  padding:12px 8px 0;
  border-top:1px solid rgba(255,255,255,0.08);
}
.logout-btn {
  width:100%; padding:8px 10px;
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,0.4); font-family:var(--font); font-size:12px;
  text-align:left; border-radius:var(--r-sm);
  transition: color 0.15s;
}
.logout-btn:hover { color:rgba(255,255,255,0.8); }

/* ═══════════════════════════════════════════════════════
   MOBILE HEADER + SIDEBAR OVERLAY
═══════════════════════════════════════════════════════ */
.mobile-header {
  display:none;
  background: var(--primary);
  padding: 12px 16px;
  align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.mobile-header-title { color:#fff; font-weight:600; font-size:15px; }
.mobile-menu-btn {
  background:none; border:none; cursor:pointer;
  color:#fff; padding:4px; display:flex;
}

.sidebar-overlay-bg {
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,0.4);
  z-index:200;
}
.sidebar-overlay-bg.open { display:block; }

@media (max-width:768px) {
  .mobile-header { display:flex; }
  .sidebar {
    position:fixed; top:0; left:0; bottom:0;
    transform:translateX(-100%);
    transition:transform 0.3s ease;
    z-index:300;
    padding-top:0;
  }
  .sidebar.mobile-open { transform:translateX(0); }
  .sidebar-logo { padding-top:16px; }
}

/* ═══════════════════════════════════════════════════════
   MAIN AREA
═══════════════════════════════════════════════════════ */
.main {
  flex:1; display:flex; flex-direction:column;
  overflow:hidden; min-width:0;
}

.page-wrap {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:24px 28px 40px;
  scrollbar-width:thin;
  scrollbar-color: var(--border) transparent;
}
.page-wrap::-webkit-scrollbar { width:6px; }
.page-wrap::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; }

@media (max-width:768px) {
  .page-wrap { padding:16px 14px 32px; }
}

/* ═══════════════════════════════════════════════════════
   KPI HERO STRIP
═══════════════════════════════════════════════════════ */
.kpi-strip {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
  margin-bottom:24px;
}
@media (max-width:768px) {
  .kpi-strip { grid-template-columns:1fr; gap:10px; margin-bottom:16px; }
}

.kpi-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:18px 20px 16px;
  position:relative; overflow:hidden;
}
.kpi-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
}
.kpi-card.revenue::before { background: var(--primary); }
.kpi-card.spend::before   { background: var(--warning); }
.kpi-card.roas::before    { background: var(--success); }

.kpi-label {
  font-size:11px; font-weight:600; letter-spacing:0.4px;
  text-transform:uppercase; color:var(--text-2);
  margin-bottom:6px;
}
.kpi-value {
  font-size:28px; font-weight:700; color:var(--text-1);
  letter-spacing:-0.8px; line-height:1;
  margin-bottom:6px;
}
.kpi-delta {
  display:flex; align-items:center; gap:4px;
  font-size:11.5px; color:var(--text-2);
}
.kpi-delta.up   { color: var(--success); }
.kpi-delta.down { color: var(--danger); }

/* ═══════════════════════════════════════════════════════
   BENTO GRID
═══════════════════════════════════════════════════════ */
.bento-grid {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:14px;
  margin-bottom:24px;
}
@media (max-width:900px) { .bento-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .bento-grid { grid-template-columns:1fr; } }

.bento-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:16px;
  cursor:pointer;
  position:relative; overflow:hidden;
  transition: box-shadow 0.2s, transform 0.15s;
  display:flex; flex-direction:column; gap:12px;
}
.bento-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
}
.bento-card:hover { box-shadow:var(--shadow); transform:translateY(-1px); }
.bento-card.lazada::before   { background:var(--lazada); }
.bento-card.tiktok::before   { background:var(--tiktok); }
.bento-card.shopee::before   { background:var(--shopee); }
.bento-card.facebook::before { background:var(--facebook); }
.bento-card.google::before   { background:var(--google); }
.bento-card.line::before     { background:var(--line); }

.bento-header {
  display:flex; align-items:center; justify-content:space-between;
}
.bento-plat {
  display:flex; align-items:center; gap:8px;
}
.bento-icon {
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
}
.bento-icon img { width:18px; height:18px; object-fit:contain; }
.bento-name { font-size:13px; font-weight:600; color:var(--text-1); }

.bento-metrics {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.bento-metric { }
.bento-metric-label {
  font-size:9.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.6px; color:var(--text-3); margin-bottom:2px;
}
.bento-metric-value {
  font-size:15px; font-weight:700; color:var(--text-1);
  letter-spacing:-0.3px;
}

.bento-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:8px;
  border-top:1px solid var(--border);
}
.bento-ts { font-size:10.5px; color:var(--text-3); }
.bento-detail-btn {
  font-size:11px; font-weight:600; color:var(--primary);
  background:none; border:none; cursor:pointer; padding:0;
  display:flex; align-items:center; gap:3px;
  transition:opacity 0.15s;
}
.bento-detail-btn:hover { opacity:0.7; }

/* Uninitialized state */
.bento-card.uninit { cursor:default; }
.bento-card.uninit:hover { box-shadow:var(--shadow-sm); transform:none; }
.bento-uninit-body {
  display:flex; align-items:center; justify-content:center;
  padding:12px 0; color:var(--text-3); font-size:12px;
}

/* ═══════════════════════════════════════════════════════
   STATUS CHIPS
═══════════════════════════════════════════════════════ */
.chip {
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:600;
  padding:3px 9px; border-radius:var(--r-full);
  letter-spacing:0.2px; white-space:nowrap;
}
.chip-connected    { background:var(--success-light);  color:var(--success); }
.chip-syncing      { background:var(--syncing-light);  color:var(--syncing); }
.chip-stale        { background:var(--warning-light);  color:var(--warning); }
.chip-error        { background:var(--danger-light);   color:var(--danger);  }
.chip-uninit       { background:var(--surface-3);      color:var(--text-2); border:1px solid var(--border); }

/* ═══════════════════════════════════════════════════════
   ROAS BADGE
═══════════════════════════════════════════════════════ */
.roas-badge {
  display:inline-flex; align-items:center; gap:3px;
  font-size:12.5px; font-weight:700;
}
.roas-good { color:var(--success); }
.roas-mid  { color:var(--warning); }
.roas-low  { color:var(--danger); }

/* ═══════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════ */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-head {
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface-2);
}
.card-body { padding:18px; }
.card-title { font-size:13px; font-weight:600; color:var(--text-1); }

/* Section label */
.section-label {
  font-size:10px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--text-3); margin-bottom:10px;
}

/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font); font-size:13px; font-weight:500;
  padding:10px 20px; border-radius:var(--r-md);
  border:none; cursor:pointer;
  transition:all 0.15s; user-select:none;
  white-space:nowrap;
}
.btn:active { transform:scale(0.98); }

.btn-primary  { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); box-shadow:0 2px 8px rgba(24,76,143,0.25); }

.btn-ghost    { background:var(--surface-2); color:var(--text-2); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--surface-3); color:var(--text-1); }

.btn-outline  { background:transparent; color:var(--primary); border:1.5px solid var(--primary); }
.btn-outline:hover { background:var(--primary-faint); }

.btn-warning  { background:var(--warning); color:#fff; }
.btn-warning:hover { background:#b45309; }

.btn-sm  { font-size:12px; padding:7px 14px; }
.btn-xs  { font-size:11px; padding:5px 10px; border-radius:var(--r-sm); }
.btn-full { width:100%; }

/* ═══════════════════════════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════════════════════════ */
.form-group  { margin-bottom:18px; }
.form-label  {
  display:block; font-size:12px; font-weight:600;
  color:var(--text-2); margin-bottom:6px;
}
.form-input {
  width:100%; padding:11px 14px;
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-2);
  color:var(--text-1); font-family:var(--font); font-size:14px;
  outline:none; transition:border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.form-input:focus {
  border-color:var(--primary);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(24,76,143,0.1);
}
.form-input.error {
  border-color:var(--danger);
  background:#fef2f2;
  box-shadow:0 0 0 3px rgba(220,38,38,0.1);
}

/* Inline error */
.form-error {
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--danger);
  margin-top:6px;
  visibility:hidden;
}
.form-error.visible { visibility:visible; }

/* ═══════════════════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════════════════ */
.progress-bar-wrap {
  height:6px; background:var(--surface-3);
  border-radius:var(--r-full); overflow:hidden;
}
.progress-bar-fill {
  height:100%; background:var(--primary);
  border-radius:var(--r-full);
  transition:width 0.4s ease;
}

/* ═══════════════════════════════════════════════════════
   SHIMMER / SKELETON
═══════════════════════════════════════════════════════ */
.shimmer {
  border-radius:var(--r-xs);
  background:linear-gradient(90deg, var(--surface-3) 25%, var(--border) 50%, var(--surface-3) 75%);
  background-size:200% 100%;
  animation:shimmer-anim 1.3s infinite;
  color:transparent !important; user-select:none;
}
@keyframes shimmer-anim {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* ═══════════════════════════════════════════════════════
   DRAWER
═══════════════════════════════════════════════════════ */
.drawer-backdrop {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(2px);
  z-index:700;
  opacity:0; pointer-events:none;
  transition:opacity 0.25s;
}
.drawer-backdrop.open { opacity:1; pointer-events:auto; }

.drawer {
  position:fixed; top:0; right:0; bottom:0;
  width:480px; max-width:100vw;
  background:var(--surface);
  box-shadow:var(--shadow-xl);
  z-index:710;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform 0.3s cubic-bezier(0.32,0.72,0,1);
}
.drawer.open { transform:translateX(0); }

@media (max-width:600px) { .drawer { width:100vw; } }

.drawer-header {
  padding:18px 20px 14px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.drawer-plat-info { display:flex; align-items:center; gap:12px; }
.drawer-plat-icon {
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
  border:1px solid var(--border);
}
.drawer-plat-icon img { width:26px; height:26px; object-fit:contain; }
.drawer-plat-name { font-size:16px; font-weight:700; color:var(--text-1); }
.drawer-plat-meta { font-size:11px; color:var(--text-2); margin-top:2px; display:flex; align-items:center; gap:6px; }
.drawer-close {
  width:34px; height:34px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-2);
  transition:all 0.15s; flex-shrink:0;
}
.drawer-close:hover { background:var(--danger-light); color:var(--danger); border-color:var(--danger); }

.drawer-body {
  flex:1; overflow-y:auto; padding:18px 20px;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.drawer-body::-webkit-scrollbar { width:4px; }
.drawer-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; }

.drawer-footer {
  padding:14px 20px;
  border-top:1px solid var(--border);
  display:flex; gap:8px; flex-shrink:0;
  background:var(--surface-2);
}

/* Scoreboard */
.scoreboard-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin-bottom:18px;
}
.score-cell {
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:12px 14px;
}
.score-label {
  font-size:9.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.8px; color:var(--text-3); margin-bottom:4px;
}
.score-value {
  font-size:20px; font-weight:700; color:var(--text-1);
  letter-spacing:-0.5px; line-height:1.1;
}

/* Chart placeholder */
.chart-wrap {
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  height:130px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3); font-size:12px;
  margin-bottom:18px;
  overflow:hidden; position:relative;
}
.chart-svg { width:100%; height:100%; }

/* Campaign table */
.campaign-table { width:100%; border-collapse:collapse; }
.campaign-table th {
  font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:0.8px;
  color:var(--text-3); padding:6px 0 8px;
  border-bottom:1px solid var(--border); text-align:left;
}
.campaign-table th:not(:first-child) { text-align:right; }
.campaign-table td {
  font-size:12px; padding:10px 0;
  border-bottom:1px solid var(--border); color:var(--text-1);
}
.campaign-table tr:last-child td { border-bottom:none; }
.campaign-table td:not(:first-child) { text-align:right; }

/* ═══════════════════════════════════════════════════════
   MODAL (st.dialog simulation)
═══════════════════════════════════════════════════════ */
.modal-backdrop {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.45);
  z-index:800;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 0.15s;
}
.modal-backdrop.open { opacity:1; pointer-events:auto; }

.modal {
  background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl);
  padding:24px;
  width:100%; max-width:360px;
  transform:scale(0.96);
  transition:transform 0.15s;
}
.modal-backdrop.open .modal { transform:scale(1); }
.modal-title {
  font-size:16px; font-weight:700; color:var(--text-1);
  margin-bottom:4px;
}
.modal-sub { font-size:12.5px; color:var(--text-2); margin-bottom:20px; line-height:1.5; }
.modal-actions { display:flex; flex-direction:column; gap:8px; margin-top:20px; }

/* Note box */
.note-box {
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:10px 14px;
  font-size:12px; color:var(--text-2); line-height:1.5;
  margin-bottom:4px;
}

/* Warning modal icon */
.modal-warn-icon {
  width:48px; height:48px;
  background:var(--warning-light);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
  color:var(--warning);
}

/* Time picker */
.time-picker-row {
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
}
.time-picker-unit {
  display:flex; flex-direction:column; align-items:center; gap:2px; flex:1;
}
.time-picker-unit label { font-size:10px; color:var(--text-3); font-weight:500; }
.time-spinner {
  display:flex; align-items:center; gap:0;
  border:1.5px solid var(--border); border-radius:var(--r-md);
  overflow:hidden; width:100%;
}
.time-spinner input {
  flex:1; text-align:center;
  border:none; outline:none;
  font-family:var(--font); font-size:20px; font-weight:700;
  color:var(--text-1); padding:8px 0;
  background:var(--surface);
  width:0; min-width:0;
}
.time-spinner-btns {
  display:flex; flex-direction:column;
  border-left:1px solid var(--border);
}
.time-spinner-btns button {
  background:var(--surface-2); border:none; cursor:pointer;
  padding:6px 10px; color:var(--text-2);
  transition:background 0.1s;
  display:flex; align-items:center; justify-content:center;
}
.time-spinner-btns button:hover { background:var(--surface-3); color:var(--text-1); }
.time-spinner-btns button:first-child { border-bottom:1px solid var(--border); }
.time-sep { font-size:22px; font-weight:700; color:var(--text-2); align-self:center; }
.tz-note {
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--text-3); margin-top:8px;
}

/* ═══════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════ */
.toast-wrap {
  position:fixed; top:20px; right:20px;
  z-index:9999; display:flex; flex-direction:column; gap:8px;
  pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:var(--r-md);
  font-size:12.5px; font-weight:500; color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  pointer-events:auto;
  opacity:0; transform:translateX(20px);
  transition:all 0.2s; max-width:320px;
}
.toast.show { opacity:1; transform:translateX(0); }
.toast-success { background:var(--success); }
.toast-error   { background:var(--danger); }
.toast-info    { background:var(--primary); }
.toast-close {
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,0.7); margin-left:auto; padding:0;
  display:flex; flex-shrink:0;
}
.toast-close:hover { color:#fff; }

/* ═══════════════════════════════════════════════════════
   HEALTH CHECK TABLE
═══════════════════════════════════════════════════════ */
.hc-table { width:100%; border-collapse:collapse; }
.hc-table th {
  font-size:9.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.6px; color:var(--text-3);
  padding:8px 12px 10px; border-bottom:1px solid var(--border);
  text-align:left; background:var(--surface-2);
}
.hc-table td {
  padding:12px; border-bottom:1px solid var(--border);
  font-size:12.5px; color:var(--text-1); vertical-align:top;
}
.hc-table tr:last-child td { border-bottom:none; }
.hc-table tr:hover td { background:var(--surface-2); }

.hc-plat-cell { display:flex; align-items:center; gap:8px; }
.hc-plat-icon {
  width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); flex-shrink:0; overflow:hidden;
}
.hc-plat-icon img { width:16px; height:16px; object-fit:contain; }
.hc-status { display:flex; align-items:center; gap:5px; font-weight:600; }
.hc-pass   { color:var(--success); }
.hc-fail   { color:var(--danger); }
.hc-noprof { color:var(--warning); }
.hc-root   { font-size:11.5px; color:var(--text-2); line-height:1.4; }
.hc-thumb  {
  width:56px; height:40px; border-radius:4px;
  background:var(--surface-3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-3);
  overflow:hidden;
}
.hc-scan-header {
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:16px 18px;
  margin-bottom:16px;
  display:flex; flex-direction:column; gap:10px;
}
.hc-scan-status {
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--text-1);
}
.hc-scan-sub { font-size:12px; color:var(--text-2); }

/* ═══════════════════════════════════════════════════════
   UTILITY
═══════════════════════════════════════════════════════ */
.divider  { height:1px; background:var(--border); margin:16px 0; }
.flex     { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.items-center  { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-8  { gap:8px; }
.gap-12 { gap:12px; }
.mb-8   { margin-bottom:8px; }
.mb-12  { margin-bottom:12px; }
.mb-16  { margin-bottom:16px; }
.mb-20  { margin-bottom:20px; }
.mb-24  { margin-bottom:24px; }
.mt-4   { margin-top:4px; }
.mt-8   { margin-top:8px; }
.mt-12  { margin-top:12px; }
.mt-16  { margin-top:16px; }
.w-full { width:100%; }
.text-sm  { font-size:12px; }
.text-xs  { font-size:11px; }
.text-2   { color:var(--text-2); }
.text-3   { color:var(--text-3); }
.font-600 { font-weight:600; }
.font-700 { font-weight:700; }