/* ========== RESET & BASE ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Default = Linear theme (true black OLED dark). See body[data-theme="mercury"] / [data-theme="king"] for overrides. */
:root {
  --bg: #000000;            /* pure black, OLED-friendly */
  --surface: #0c0c0d;       /* neutral near-black */
  --surface2: #141415;
  --surface3: #1c1c1e;
  --border: #26262a;
  --text: #f4f4f5;
  --text2: #a1a1aa;
  --text3: #71717a;
  --accent: #6366f1;
  --accent2: #818cf8;
  --green: #34d399;
  --green-bg: rgba(52,211,153,0.12);
  --yellow: #fbbf24;
  --yellow-bg: rgba(251,191,36,0.12);
  --red: #f87171;
  --red-bg: rgba(248,113,113,0.12);
  --blue: #60a5fa;
  --blue-bg: rgba(96,165,250,0.12);
  --purple: #a78bfa;
  --orange: #fb923c;
  --shadow: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --divider: rgba(255,255,255,0.06);
  --input-bg: #000000;
  --radius: 12px;
  --radius-sm: 8px;
}

/* Mercury theme: premium fintech light cream. Single indigo accent, everything else mono. */
body[data-theme="mercury"] {
  --bg: #fafaf7;
  --surface: #ffffff;
  --surface2: #f5f4ef;
  --surface3: #ececeb;
  --border: #e4e4e7;
  --text: #09090b;
  --text2: #52525b;
  --text3: #a1a1aa;
  --accent: #1e1b4b;         /* deep navy, the ONE accent */
  --accent2: #4338ca;
  /* Decorative colors collapse to accent — for single-accent Mercury look */
  --blue: #1e1b4b;
  --blue-bg: rgba(30,27,75,0.08);
  --purple: #1e1b4b;
  --orange: #1e1b4b;
  /* Semantic colors stay distinct but muted */
  --green: #15803d;
  --green-bg: rgba(21,128,61,0.08);
  --yellow: #b45309;
  --yellow-bg: rgba(180,83,9,0.08);
  --red: #b91c1c;
  --red-bg: rgba(185,28,28,0.08);
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.08);
  --divider: rgba(0,0,0,0.06);
  --input-bg: #fafaf7;
}

/* Mercury: kill the colored top-strip on KPI cards for clean single-accent look */
body[data-theme="mercury"] .kpi-card::before { display: none; }
body[data-theme="mercury"] .kpi-card { padding-top: 12px; }
/* Mercury: remove the gradient-based header logo, use flat accent */
body[data-theme="mercury"] .header-logo { background: var(--accent) !important; }
/* Mercury: softer card hovering */
body[data-theme="mercury"] .card { box-shadow: var(--shadow); }
body[data-theme="mercury"] .card:hover { border-color: var(--text3); }
/* Mercury: scrollbars muted */
body[data-theme="mercury"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15) !important; }

/* ============================================================
   KING theme — luxury gold, for kingmaster only
   "번쩍번쩍" premium: gold palette, gradient text, subtle shimmer
============================================================ */
body[data-theme="king"] {
  --bg: #0c0803;
  --surface: #15100a;
  --surface2: #1d1812;
  --surface3: #2a2014;
  --border: rgba(245,197,24,0.18);
  --text: #F5E6B8;
  --text2: #C9A96E;
  --text3: #8B7355;
  --accent: #F5C518;
  --accent2: #FFD700;
  --green: #FFD700;         /* all good things = gold */
  --green-bg: rgba(255,215,0,0.1);
  --yellow: #FFA500;
  --yellow-bg: rgba(255,165,0,0.12);
  --red: #EF4444;           /* red stays red for warnings */
  --red-bg: rgba(239,68,68,0.12);
  --blue: #FFD700;          /* decorative → gold */
  --blue-bg: rgba(255,215,0,0.08);
  --purple: #DAA520;
  --orange: #FFA500;
  --shadow: 0 2px 12px rgba(245,197,24,0.15);
  --shadow-lg: 0 12px 48px rgba(245,197,24,0.25);
  --divider: rgba(245,197,24,0.1);
  --input-bg: #0c0803;
}
body[data-theme="king"] .header {
  background: linear-gradient(135deg, #14100a 0%, #1d1812 100%);
  border-bottom-color: rgba(245,197,24,0.25);
}
body[data-theme="king"] .header-logo {
  background: linear-gradient(135deg, #FFD700, #DAA520, #B8860B) !important;
  color: #2B2A27 !important;
  box-shadow: 0 2px 8px rgba(245,197,24,0.4);
}
body[data-theme="king"] .header-title {
  background: linear-gradient(135deg, #FFD700, #F5C518, #DAA520);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: king-shimmer 3s ease-in-out infinite;
}
body[data-theme="king"] .kpi-value {
  background: linear-gradient(135deg, #FFD700 0%, #F5C518 50%, #DAA520 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(245,197,24,0.15);
}
body[data-theme="king"] .kpi-card,
body[data-theme="king"] .card {
  background: linear-gradient(180deg, #15100a 0%, #14100a 100%);
  border: 1px solid rgba(245,197,24,0.2);
  box-shadow: 0 1px 8px rgba(245,197,24,0.08);
}
body[data-theme="king"] .kpi-card::before {
  background: linear-gradient(90deg, #FFD700, #F5C518, #DAA520, #F5C518, #FFD700) !important;
  height: 2px;
}
body[data-theme="king"] .kpi-card:hover,
body[data-theme="king"] .card:hover {
  border-color: rgba(245,197,24,0.45);
  box-shadow: 0 4px 20px rgba(245,197,24,0.18);
}
body[data-theme="king"] .card-head:hover { background: rgba(245,197,24,0.04); }
body[data-theme="king"] .badge {
  background: linear-gradient(135deg, #FFD700, #B8860B);
  color: #2B2A27;
  font-weight: 700;
}
body[data-theme="king"] .badge-green,
body[data-theme="king"] .badge-yellow {
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(218,165,32,0.15));
  color: #FFD700;
}
body[data-theme="king"] .gold-bar { display: block !important; }
body[data-theme="king"] ::-webkit-scrollbar-thumb { background: rgba(245,197,24,0.25) !important; }
body[data-theme="king"] ::-webkit-scrollbar-thumb:hover { background: rgba(245,197,24,0.4) !important; }
body[data-theme="king"] .btn-theme,
body[data-theme="king"] .btn-logout,
body[data-theme="king"] .admin-link { border-color: rgba(245,197,24,0.3); color: #F5C518; }
body[data-theme="king"] .btn-theme:hover,
body[data-theme="king"] .btn-logout:hover,
body[data-theme="king"] .admin-link:hover { background: rgba(245,197,24,0.1); }
@keyframes king-shimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

/* ============================================================
   LINEAR refinements — tighter minimal when theme is explicitly linear
============================================================ */
body[data-theme="linear"] .kpi-card::before { height: 2px; opacity: 0.7; }
body[data-theme="linear"] .card,
body[data-theme="linear"] .kpi-card { border-radius: 10px; }
body[data-theme="linear"] .header { border-bottom-color: rgba(255,255,255,0.05); }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Pretendard', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ========== HEADER ========== */
.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
}
.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-logo {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.header-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.date-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.header-date {
  font-size: 13px;
  color: var(--text2);
  background: var(--surface2);
  padding: 5px 12px;
  border-radius: 8px;
  font-weight: 500;
  min-width: 100px;
  text-align: center;
}
.date-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.date-btn:hover { background: var(--surface3); color: var(--text); }
.date-today { font-size: 11px; font-weight: 600; padding: 5px 8px; }
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.conn-pills {
  display: flex;
  gap: 4px;
}
.conn-pill {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text3);
}
.conn-pill.on { background: var(--green); }
.conn-pill.warn { background: var(--yellow); animation: pill-pulse 2s ease-in-out infinite; }
.conn-pill.off { background: var(--red); opacity: 0.5; }
@keyframes pill-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
.conn-pill { cursor: help; position: relative; }
.conn-pill:hover::after {
  content: attr(title);
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
}
.refresh-info {
  font-size: 11px;
  color: var(--text3);
  font-weight: 500;
}
.admin-link {
  color: var(--text2);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  transition: all 0.15s;
}
.admin-link:hover {
  background: var(--surface3);
  color: var(--text);
}

/* ========== KPI CARDS ========== */
.kpi-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 2fr 2fr;
  gap: 8px;
  padding: 12px 14px 4px;
}
.kpi-click { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.kpi-click:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.kpi-lg .kpi-value { font-size: 22px; }

/* Change animation */
@keyframes kpi-flash {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.6); }
  50% { box-shadow: 0 0 20px 4px rgba(52,211,153,0.4); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
@keyframes kpi-flash-red {
  0% { box-shadow: 0 0 0 0 rgba(248,113,113,0.6); }
  50% { box-shadow: 0 0 20px 4px rgba(248,113,113,0.4); }
  100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
}
.kpi-changed { animation: kpi-flash 1.5s ease-out; }
.kpi-changed-down { animation: kpi-flash-red 1.5s ease-out; }
@keyframes value-up {
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.value-anim { animation: value-up 0.4s ease-out; }
.kpi-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 14px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.kpi-card.c-blue::before { background: var(--blue); }
.kpi-card.c-green::before { background: var(--green); }
.kpi-card.c-purple::before { background: var(--purple); }
.kpi-card.c-yellow::before { background: var(--yellow); }
.kpi-card.c-accent::before { background: var(--accent); }
.kpi-card.c-orange::before { background: var(--orange); }
.kpi-label {
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 5px;
}
.kpi-value {
  font-size: 23px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-value.dim { color: var(--text3); font-size: 18px; }
.kpi-sub {
  font-size: 11px;
  color: var(--text2);
  margin-top: 6px;
  font-weight: 500;
}
.kpi-sub .up { color: var(--green); }
.kpi-sub .warn { color: var(--yellow); }
.kpi-sub .bad { color: var(--red); }

/* ========== MAIN LAYOUT ========== */
.main {
  padding: 6px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.row {
  display: grid;
  gap: 8px;
}
.row-2 { grid-template-columns: 1fr 1fr; }
.row-3 { grid-template-columns: 1fr 1fr 1fr; }
.row-full { grid-template-columns: 1fr; }

/* ========== SECTION CARD ========== */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.card-head:hover { background: var(--surface2); }
.card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title .icon { font-size: 15px; }
.badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
}
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge-red { background: var(--red-bg); color: var(--red); }
.card-toggle {
  color: var(--text3);
  font-size: 14px;
  transition: transform 0.2s;
}
.card-toggle.shut { transform: rotate(-90deg); }
.card-body { padding: 10px 14px; }
.card-body.shut { display: none; }
.hpm-list { display: flex; }
.hpm-list.shut, .hpm-detail.shut { display: none !important; }

/* ========== SCHEDULE ========== */
.sch-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sch-item:last-child { border-bottom: none; }
.sch-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent2);
  min-width: 44px;
  flex-shrink: 0;
}
.sch-body { flex: 1; min-width: 0; }
.sch-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sch-route {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
}
.sch-tags {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.tag {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.t-type { background: rgba(99,102,241,0.15); color: var(--accent2); }
.t-pax { background: var(--blue-bg); color: var(--blue); }
.t-driver { background: var(--green-bg); color: var(--green); }
.t-nodriver { background: var(--red-bg); color: var(--red); }

/* ========== SCHEDULE LINE ========== */
.sch-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 12px;
}
.sch-line:last-of-type { border-bottom: none; }
.sch-line .sch-time {
  font-weight: 700;
  color: var(--accent2);
  min-width: 38px;
  flex-shrink: 0;
  font-size: 12px;
}
.sch-vname {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text);
  font-size: 11px;
}

/* ========== STAFF ========== */
.staff-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.staff-item:last-child { border-bottom: none; }
.staff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.staff-dot.on { background: var(--green); box-shadow: 0 0 8px rgba(52,211,153,0.4); }
.staff-dot.off { background: var(--text3); }
.staff-name { font-size: 12px; font-weight: 600; flex: 1; }
.staff-task { font-size: 11px; color: var(--text3); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-badge {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
}
.sb-done { background: var(--green-bg); color: var(--green); }
.sb-wait { background: var(--yellow-bg); color: var(--yellow); }

/* ========== HPM HOTELS ========== */
.hpm-cat { margin-bottom: 10px; }
.hpm-cat:last-child { margin-bottom: 0; }
.hpm-cat-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hpm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.hpm-chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
}
.hpm-ok { background: var(--green-bg); color: var(--green); }
.hpm-warn { background: var(--yellow-bg); color: var(--yellow); }
.hpm-bad { background: var(--red-bg); color: var(--red); }
.hpm-row {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.hpm-row.hpm-ok { background: rgba(34,197,153,0.05); color: var(--green); }
.hpm-row.hpm-warn { background: rgba(251,191,36,0.08); color: var(--yellow); }
.hpm-row.hpm-bad { background: rgba(248,113,113,0.08); color: var(--red); }

/* ========== FINANCE TABLE ========== */
.fin-scroll {
  max-height: 280px;
  overflow-y: auto;
  border-radius: var(--radius-sm);
}
.fin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.fin-table th {
  text-align: left;
  padding: 8px 10px;
  background: var(--surface2);
  color: var(--text2);
  font-weight: 700;
  font-size: 10px;
  position: sticky;
  top: 0;
}
.fin-table td {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: var(--text);
}
.fin-table tr:hover td { background: rgba(255,255,255,0.02); }
.fin-table td[style*="text-align:right"] { font-family: 'SF Mono', 'Menlo', monospace; font-size: 11px; }

/* ========== GPS MAP ========== */
#map-container { height: 380px; border-radius: var(--radius-sm); overflow: hidden; }

/* ========== STATES ========== */
.empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--text3);
  font-size: 13px;
}
.empty .e-icon { font-size: 28px; margin-bottom: 6px; opacity: 0.5; }
.empty a { color: var(--accent2); text-decoration: none; font-weight: 600; }
.empty a:hover { text-decoration: underline; }

/* ========== LOADING ========== */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== RESPONSIVE ========== */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .kpi-lg .kpi-value { font-size: 20px; }
}
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .row-2 { grid-template-columns: 1fr; }
  .row-3 { grid-template-columns: 1fr; }
}

/* ===== MOBILE (≤640px) — 종합 반응형 ===== */
@media (max-width: 640px) {
  /* --- Header: 뭉개짐 방지, 깔끔한 컴팩트 바 --- */
  .header { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .header-left { gap: 8px; flex: 1 1 auto; min-width: 0; }
  .header-logo { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; flex-shrink: 0; }
  .header-title { font-size: 14px; white-space: nowrap; }
  .king-badge { font-size: 8px; padding: 2px 5px; margin-left: 4px; }
  .date-nav { gap: 2px; }
  .header-date { min-width: 0; font-size: 11px; padding: 4px 8px; }
  .date-btn { padding: 3px 7px; font-size: 12px; }
  .date-today { padding: 3px 6px; }
  .header-right { gap: 6px; }
  .conn-pills, .refresh-info { display: none; }        /* 연결점/갱신 텍스트 숨김(공간 확보) */
  .header-user { font-size: 11px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-user .user-avatar { width: 20px; height: 20px; }
  .btn-theme, .btn-logout, .admin-link { padding: 4px 8px; font-size: 11px; }

  /* --- 날씨/환율 바 --- */
  #info-bar { padding: 5px 12px; font-size: 10px; gap: 8px; }
  #fx-bar { margin-left: 0; }

  /* --- KPI: 촘촘한 2열 (스크롤 지옥 해소) --- */
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px 4px; }
  .kpi-card { padding: 10px 12px; }
  .kpi-card::before { height: 2px; }
  .kpi-label { font-size: 10px; margin-bottom: 4px; white-space: nowrap; }
  .kpi-value { font-size: 18px; }
  .kpi-lg .kpi-value, .kpi-value.dim { font-size: 16px; }
  .kpi-sub { font-size: 10px; margin-top: 3px; }
  /* 긴 통화 숫자(보유/지출/융통/매출)는 더 작게 — 카드 밖으로 안 넘치게 */
  #k-avail, #k-expense, #k-funds, #k-sales { font-size: 15px !important; }

  /* --- 메인 카드 --- */
  .main { padding: 6px 10px 24px; gap: 8px; }
  .card-head { padding: 12px 14px; }
  .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* 넓은 표는 가로 스크롤 */
  /* JS 인라인 2단+ 그리드를 모바일에서 1단으로 강제 (POS '전/체/총/매/출' 세로깨짐 등)
     #pos-el 같은 래퍼가 껴서 자손 선택자로 매칭 */
  .card-body div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* 라벨 한 글자씩 세로로 깨지는 것 방지 */
  .card-title, .kpi-label { white-space: nowrap; }
}

/* ===== 아주 작은 폰 (≤380px) ===== */
@media (max-width: 380px) {
  .kpi-value { font-size: 16px; }
  #k-avail, #k-expense, #k-funds, #k-sales { font-size: 14px !important; }
  .header-title { font-size: 13px; }
}

/* ========== DETAIL BUTTON ========== */
.detail-btn {
  font-size: 11px;
  color: var(--accent2);
  cursor: pointer;
  font-weight: 600;
}
.detail-btn:hover { text-decoration: underline; }

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 2px; }