:root{
  --bg1: #0b0b0f;
  --bg2: #08080a;
  --card: rgba(0,0,0,0.35);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --line: rgba(255,255,255,0.08);

  --accent: rgba(120, 209, 255, 0.9);
  --good: rgba(106, 255, 170, 0.95);
  --warn: rgba(255, 207, 106, 0.95);
  --bad:  rgba(255, 120, 120, 0.95);
  --info: rgba(170, 190, 255, 0.95);
  --cardShadow: 0 18px 55px rgba(0,0,0,0.35);
  --panel: rgba(0,0,0,0.40);
  --shadow: 0 18px 55px rgba(0,0,0,0.35);

  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

html, body{
  margin: 0;
  padding: 0;
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% 0%, rgba(120,209,255,0.08), transparent 40%),
              radial-gradient(1000px 500px at 90% 10%, rgba(255,120,120,0.06), transparent 45%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", Arial, sans-serif;
}

.bg{
  position: fixed;
  inset: -30px;
  pointer-events: none;
  background: radial-gradient(900px 500px at 20% 20%, rgba(255,255,255,0.04), transparent 60%);
  filter: blur(18px);
  opacity: 0.7;
}

.wrap{
  max-width: 1150px;
  margin: 0 auto;
  padding: 18px 18px 34px;
}

a{ color: inherit; }

.top{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.brandRow{
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

h1{
  margin: 0;
  font-size: 22px;
  letter-spacing: .2px;
}
.subtitle{
  font-size: 12px;
  opacity: 0.75;
  letter-spacing: .2px;
  margin-top: 3px;
}

.metaChips{
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.chipLive{
  border-color: rgba(106,255,170,0.25);
  background: rgba(106,255,170,0.07);
}

.controls{
  display: grid;
  grid-template-columns: 190px 110px auto auto auto auto;
  gap: 10px 10px;
  justify-content: end;
  align-items: end;
}

.field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label{
  font-size: 12px;
  color: var(--muted);
}

input, select{
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  outline: none;
}
input:focus, select:focus{
  border-color: rgba(120,209,255,0.35);
  box-shadow: 0 0 0 3px rgba(120,209,255,0.08);
}

.btn{
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  cursor: pointer;
}
.btn:hover{ background: rgba(255,255,255,0.06); }
.btnPrimary{
  border-color: rgba(120,209,255,0.22);
  background: rgba(120,209,255,0.10);
}
.btnPrimary:hover{ background: rgba(120,209,255,0.14); }
.btnGhost{
  background: rgba(255,255,255,0.02);
}

/* Nav buttons (Config / OTA) */
.btnNav{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btnIcon{
  opacity: .85;
  font-size: 14px;
  line-height: 1;
}

.hideSm{ display: inline; }

.lastLine{
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: 2px;
}
.muted{ color: var(--muted); }
.small{ font-size: 12px; }

#lastUpdate{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.rangeBar{ margin-top: 10px; }
.pickers{
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}
.field.mini{ width: 170px; }

.pickers .rangeHint{
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.cards{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.card{
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--cardShadow);
  border: 1px solid rgba(255,255,255,0.06);
  background: radial-gradient(1200px 350px at 10% 0%, rgba(255,255,255,0.06), rgba(0,0,0,0.10)), rgba(0,0,0,0.25);
}

.kpiTop{
  display: flex;
  align-items: center;
  gap: 12px;
}
.kpiIcon{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.kpiIcon.kpiMoney{ outline: 1px solid rgba(120,209,255,0.25); }
.kpiIcon.kpiOk{ outline: 1px solid rgba(106,255,170,0.22); }
.kpiIcon.kpiAll{ outline: 1px solid rgba(170,190,255,0.20); }

.label{ font-weight: 700; }
.subLabel{ font-size: 12px; color: var(--muted); margin-top: 3px; }

.value{
  margin-top: 10px;
  font-size: 40px;
  letter-spacing: .2px;
}

.tableWrap{
  margin-top: 12px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--cardShadow);
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.22);
}

.tableHeader{
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}

.tableHeader h2{
  margin: 0;
  font-size: 16px;
}

.tableTools{
  display: flex;
  gap: 10px;
  align-items: center;
}

.searchBox{
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03);
  padding: 0 10px;
  height: 36px;
}
.searchBox input{
  border: none;
  background: transparent;
  height: 32px;
  padding: 0;
  width: 260px;
  outline: none;
}
.searchIcon{ opacity: .8; }

.tableScroller{
  max-height: 520px;
  overflow: auto;
}

table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead th{
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  padding: 12px 12px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(10,10,10,0.80);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
}

tbody tr:hover{ background: rgba(255,255,255,0.03); }
tbody tr:hover td{ border-bottom-color: rgba(255,255,255,0.10); }

.invLink code, td code{
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Status badge colors */
.badge{
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
.badgeDot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06);
}

.badge.stPaid{
  border-color: rgba(106,255,170,0.28);
  background: rgba(106,255,170,0.08);
}
.badge.stPaid .badgeDot{
  background: var(--good);
  box-shadow: 0 0 0 4px rgba(106,255,170,0.14);
}

.badge.stPending{
  border-color: rgba(255,207,106,0.28);
  background: rgba(255,207,106,0.08);
}
.badge.stPending .badgeDot{
  background: var(--warn);
  box-shadow: 0 0 0 4px rgba(255,207,106,0.14);
}

.badge.stExpired{
  border-color: rgba(180,180,180,0.22);
  background: rgba(180,180,180,0.06);
  color: rgba(255,255,255,0.78);
}
.badge.stExpired .badgeDot{
  background: rgba(220,220,220,0.70);
  box-shadow: 0 0 0 4px rgba(220,220,220,0.12);
}

.badge.stCancelled,
.badge.stFailed{
  border-color: rgba(255,120,120,0.28);
  background: rgba(255,120,120,0.08);
}
.badge.stCancelled .badgeDot,
.badge.stFailed .badgeDot{
  background: var(--bad);
  box-shadow: 0 0 0 4px rgba(255,120,120,0.14);
}

.badge.stUnknown{
  border-color: rgba(170,190,255,0.22);
  background: rgba(170,190,255,0.06);
}
.badge.stUnknown .badgeDot{
  background: var(--info);
  box-shadow: 0 0 0 4px rgba(170,190,255,0.12);
}

/* Copy button */
.copyBtn{
  height: 32px;
  width: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  cursor: pointer;
}
.copyBtn:hover{ background: rgba(255,255,255,0.06); }

.pager{
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.pagerBtns{
  display: flex;
  align-items: center;
  gap: 10px;
}

.pageChip{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  font-size: 12px;
  color: var(--muted);
}

.footer{
  margin-top: 12px;
  font-size: 12px;
  opacity: .85;
}

/* ===== Chart Drawer (ยอดเงินสะสม) ===== */
.btnChart.isOn{
  border-color: rgba(0,170,90,.45);
  box-shadow: 0 0 0 3px rgba(0,170,90,.12);
}

.chartDrawer{
  margin: 14px 0 18px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.chartHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 10px;
}

.chartHead h2{
  margin: 0;
  font-size: 16px;
}

.chartBody{
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  padding: 10px;
}

.chartCanvas{
  width: 100%;
  height: 300px;
  display: block;
}

.chartMeta{
  padding: 8px 6px 0;
}

.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  min-width: 240px;
  max-width: 380px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
}
.toast .tTitle{ font-weight: 800; margin-bottom: 2px; }
.toast .tMsg{ color: var(--muted); font-size: 12px; }

@media (max-width: 980px){
  .cards{ grid-template-columns: 1fr; }
  .controls{ grid-template-columns: 1fr 1fr; justify-content: stretch; }
  .lastLine{ justify-self: start; }
  .searchBox input{ width: 160px; }
  .field.mini{ width: 100%; }
  .pickers .rangeHint{ margin-left: 0; width: 100%; }
}

@media (max-width: 640px){
  .hideSm{ display:none; }
}

/* ===== Theme: smooth transition + light palette ===== */

/* ทำให้การเปลี่ยนสีลื่น ๆ */
html, body, .card, .tableWrap, .chip, input, select, .btn, .badge, .searchBox, .pageChip, #lastUpdate {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* เพิ่ม transition ให้พื้นหลังแบบ gradient ลื่นขึ้น (ใช้ filter/fade แทน) */
.bg {
  transition: opacity .25s ease, filter .25s ease;
}

/* โหมด LIGHT: override ตัวแปรสี */
html[data-theme="light"]{
  --bg1: #f5f7fb;
  --bg2: #eef2f8;
  --card: rgba(255,255,255,0.85);
  --text: rgba(10,10,12,0.92);
  --muted: rgba(10,10,12,0.62);
  --line: rgba(10,10,12,0.10);

  --cardShadow: 0 18px 50px rgba(10,10,30,0.12);
  --panel: rgba(255,255,255,0.85);
  --shadow: 0 18px 50px rgba(10,10,30,0.12);

  /* accent/สีสถานะปรับให้อ่านชัดบนพื้นสว่าง */
  --accent: rgba(0, 120, 255, 0.90);
  --good: rgba(0, 170, 90, 0.95);
  --warn: rgba(210, 140, 0, 0.95);
  --bad:  rgba(210, 40, 40, 0.95);
  --info: rgba(90, 110, 220, 0.95);
}

/* พื้นหลังโหมด light (ทับของเดิม) */
html[data-theme="light"] body{
  background: radial-gradient(1200px 600px at 10% 0%, rgba(0,120,255,0.10), transparent 45%),
              radial-gradient(1000px 500px at 90% 10%, rgba(255,70,70,0.06), transparent 55%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* ลดความเข้มของ glow ใน light */
html[data-theme="light"] .bg{
  opacity: 0.45;
  filter: blur(14px);
}

/* การ์ด/ตารางใน light ให้ดูสะอาด */
html[data-theme="light"] .card{
  background: radial-gradient(1200px 350px at 10% 0%, rgba(0,0,0,0.03), rgba(255,255,255,0.90));
  border-color: rgba(10,10,12,0.10);
}
html[data-theme="light"] .tableWrap{
  background: rgba(255,255,255,0.70);
  border-color: rgba(10,10,12,0.10);
}

/* input/select/button ใน light */
html[data-theme="light"] input,
html[data-theme="light"] select{
  background: rgba(255,255,255,0.90);
  border-color: rgba(10,10,12,0.10);
  color: var(--text);
}
html[data-theme="light"] .btn{
  background: rgba(255,255,255,0.75);
  border-color: rgba(10,10,12,0.12);
}
html[data-theme="light"] .btn:hover{
  background: rgba(255,255,255,0.90);
}

/* หัวตาราง sticky ใน light */
html[data-theme="light"] thead th{
  background: rgba(245,247,251,0.90);
  border-bottom-color: rgba(10,10,12,0.10);
  color: rgba(10,10,12,0.55);
}

/* ===== Theme switch animation ===== */
html.theme-switching body{
  animation: themeFade .18s ease;
}

@keyframes themeFade{
  0%   { opacity: .92; }
  100% { opacity: 1; }
}

html.theme-switching .bg{
  animation: glowPulse .18s ease;
}

@keyframes glowPulse{
  0%   { filter: blur(18px); opacity: .65; }
  50%  { filter: blur(22px); opacity: .45; }
  100% { filter: blur(18px); opacity: .65; }
}

/* CSV buttons */
#btnCsvMonth, #btnCsvYear{
  border-color: rgba(255,255,255,0.12);
}
html[data-theme="light"] #btnCsvMonth,
html[data-theme="light"] #btnCsvYear{
  border-color: rgba(10,10,12,0.14);
}

/* ===== CSV Buttons (สีเฉพาะ) ===== */
#btnCsvMonth{
  border-color: rgba(0,180,255,0.35);
  background: rgba(0,180,255,0.10);
}
#btnCsvMonth:hover{
  background: rgba(0,180,255,0.16);
}

#btnCsvYear{
  border-color: rgba(140,120,255,0.35);
  background: rgba(140,120,255,0.10);
}
#btnCsvYear:hover{
  background: rgba(140,120,255,0.16);
}

/* Light theme ให้ยังสวย */
html[data-theme="light"] #btnCsvMonth{
  border-color: rgba(0,120,255,0.35);
  background: rgba(0,120,255,0.12);
}
html[data-theme="light"] #btnCsvYear{
  border-color: rgba(90,70,220,0.35);
  background: rgba(90,70,220,0.12);
}


/* ===== Config form alignment (match OTA row) ===== */
.formRow{
  display: grid;
  grid-template-columns: 170px 170px 170px 170px 1fr;
  gap: 10px;
  align-items: end;
}
.formRow .actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: end;
}
@media (max-width: 980px){
  .formRow{ grid-template-columns: 1fr; }
  .formRow .actions{ justify-content: stretch; }
  .formRow .actions .btn{ width: 100%; }
}


/* ===== Config: Image preview ===== */
.imgPreviewWrap{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 12px;
  align-items: start;
}
.imgPreview{
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}
html[data-theme="light"] .imgPreview{
  background: rgba(255,255,255,0.85);
  border-color: rgba(10,10,12,0.10);
}
@media (max-width: 980px){
  .imgPreviewWrap{ grid-template-columns: 1fr; }
  .imgPreview{ max-height: 320px; }
}


/* ===== GPS Map ===== */
.mapWrap{ margin-top: 14px; }
.mapCard{ overflow: hidden; }
.mapHeader{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.mapTools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.map{ height: 360px; width: 100%; }
.locList{ display:flex; gap:10px; flex-wrap:wrap; padding: 12px 16px 16px; }
.locChip{ display:flex; align-items:center; gap:8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,0.03); cursor:pointer; user-select:none; }
html[data-theme="dark"] .locChip{ background: rgba(255,255,255,0.04); }
.locDot{ width:8px; height:8px; border-radius: 50%; background: var(--good); }
.locChip.noFix .locDot{ background: var(--muted); }
.locMeta{ font-size: 12px; color: var(--muted); }

/* =========================================================
   PayQR Web UI v4 (URGENT FIX)
   - Make ALL controls same height/font
   - Fix header controls (Settings page) so buttons never stretch
   - Style file input button (Choose file) to match theme
   - Keep only Dashboard + Settings navigation (other pages can redirect)
   ========================================================= */
:root{
  --ctrlH: 34px;
  --ctrlRadius: 14px;
  --ctrlPadX: 14px;
  --fontBase: 14px;
  --fontSmall: 12px;
  --easeOut: cubic-bezier(.2,.8,.2,1);
}

/* Make text size consistent everywhere */
button, input, select, textarea{
  font-family: inherit !important;
  font-size: var(--fontBase) !important;
}

/* All buttons: same height/padding */
.btn, .btnGhost, a.btn, button.btn, button.btnGhost{
  height: var(--ctrlH) !important;
  min-height: var(--ctrlH) !important;
  padding: 0 var(--ctrlPadX) !important;
  border-radius: var(--ctrlRadius) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 650 !important;
  letter-spacing: .1px !important;
  white-space: nowrap !important;
}

/* Inputs/select: same height */
input, select{
  height: var(--ctrlH) !important;
  min-height: var(--ctrlH) !important;
  border-radius: 12px !important;
  box-sizing: border-box;
}

/* File input: make button + filename consistent */
input[type="file"]{
  height: var(--ctrlH) !important;
}
input[type="file"]::file-selector-button{
  height: var(--ctrlH) !important;
  padding: 0 12px !important;
  margin-right: 10px;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  font-size: var(--fontBase) !important;
  font-weight: 650 !important;
  cursor: pointer;
}
html[data-theme="light"] input[type="file"]::file-selector-button{
  background: rgba(10,10,12,0.04) !important;
}

/* Theme icon size */
#themeIcon{ font-size: 14px !important; line-height: 1 !important; }

/* Settings header: use flex so buttons don't stretch */
body[data-page="settings"] .controls{
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
}
body[data-page="settings"] .controls .lastLine{
  flex-basis: 100%;
  text-align: right;
}

/* Small badges for status (ONLINE/OFFLINE/FIX) */
.badge.stOnline{ background: rgba(0,200,110,0.14); border-color: rgba(0,200,110,0.25); }
.badge.stOnline .badgeDot{ background: rgba(0,200,110,1); }
.badge.stOffline{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.badge.stOffline .badgeDot{ background: rgba(180,180,190,1); }
.badge.stFix{ background: rgba(120,209,255,0.14); border-color: rgba(120,209,255,0.25); }
.badge.stFix .badgeDot{ background: rgba(120,209,255,1); }
.badge.stNoFix{ background: rgba(255,207,106,0.12); border-color: rgba(255,207,106,0.22); }
.badge.stNoFix .badgeDot{ background: rgba(255,207,106,1); }

/* Reveal animation (slide-up) */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--easeOut), transform .45s var(--easeOut);
}
.reveal.isIn{ opacity: 1; transform: translateY(0); }

/* Toast slide */
.toast{
  transform: translateY(14px);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s var(--easeOut), opacity .22s var(--easeOut);
}
.toast.isShow{ transform: translateY(0); opacity: 1; pointer-events: auto; }

.toast .tRow{ display:flex; gap:10px; align-items:flex-start; }
.toast .tIcon{
  width: 28px; height: 28px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  font-size: 16px;
}
.toast.tSuccess{ border-color: rgba(106,255,170,0.25); }
.toast.tWarn{ border-color: rgba(255,207,106,0.25); }
.toast.tError{ border-color: rgba(255,120,120,0.25); }
.toast.tInfo{ border-color: rgba(170,190,255,0.20); }
.toast.tSuccess .tIcon{ background: rgba(106,255,170,0.10); }
.toast.tWarn .tIcon{ background: rgba(255,207,106,0.10); }
.toast.tError .tIcon{ background: rgba(255,120,120,0.10); }
.toast.tInfo .tIcon{ background: rgba(170,190,255,0.08); }

/* Dropdown theme: keep dark select readable */
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }
html[data-theme="dark"] select{
  background-color: rgba(15, 17, 22, 0.78) !important;
  color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup{
  background: #0f1116;
  color: rgba(255,255,255,0.92);
}
html[data-theme="dark"] select option:checked{
  background: rgba(120, 209, 255, 0.28);
  color: rgba(255,255,255,0.95);
}

@media (prefers-reduced-motion: reduce){
  .toast, .reveal{ transition: none !important; }
}