/* Glossy theme (agreed 2026-10-21): the original colours from app.css with raised, glossy buttons and cards. Screen only; print keeps app.css. Remove its <link> in index.html to go back to the flat look. */
@media screen {
:root {
  --font: 'Noto Sans Thai', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --radius: 16px;
  --gloss: linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.2) 48%, rgba(255,255,255,0) 52%);
  --gloss-on: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.1) 48%, rgba(255,255,255,0) 52%);
  --edge: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 0 rgba(60,40,20,.08);
  --drop: 0 6px 16px rgba(60,40,20,.12), 0 1px 3px rgba(60,40,20,.12);
  --sink: inset 0 2px 4px rgba(60,40,20,.12);
  --shadow: var(--edge), var(--drop);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gloss: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 48%, rgba(255,255,255,0) 52%);
    --gloss-on: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.08) 48%, rgba(255,255,255,0) 52%);
    --edge: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(0,0,0,.3);
    --drop: 0 8px 18px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4);
    --sink: inset 0 2px 5px rgba(0,0,0,.5);
    --shadow: var(--edge), var(--drop);
  }
}
:root[data-theme="dark"] {
  --gloss: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 48%, rgba(255,255,255,0) 52%);
  --gloss-on: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.08) 48%, rgba(255,255,255,0) 52%);
  --edge: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(0,0,0,.3);
  --drop: 0 8px 18px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4);
  --sink: inset 0 2px 5px rgba(0,0,0,.5);
  --shadow: var(--edge), var(--drop);
}

h1, h2, h3, strong, .btn, .value, .v, .name { font-weight: 600; }
h1 { font-size: 1.6rem; }

/* cards and tiles: soft raised panels */
.card, .stat, .row-card, .pkg, .modal, .picked {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 94%, var(--text)) 100%);
  box-shadow: var(--edge), var(--drop);
}
.stat.accent { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 70%, var(--surface)), var(--accent-soft));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--edge), 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent), var(--drop); }
.stat-eq .value { font-size: clamp(1rem, 4.4vw, 1.3rem); }
@media (min-width: 700px) { .stat-eq .value { font-size: 1.6rem; } }
.chip-stat { background: var(--gloss), linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--edge), var(--drop); }
.chip-stat .v { font-size: 1.55rem; }
.row-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }

/* buttons: glossy and raised, sink when pressed */
.btn { border-radius: 14px; background: var(--gloss), linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--edge), var(--drop); transition: transform .08s, box-shadow .08s, filter .15s; }
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(2px); box-shadow: var(--sink); }
.btn.primary { border-color: color-mix(in srgb, var(--accent) 75%, #000);
  background: var(--gloss-on), linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 85%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.18), 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent), var(--drop); }
.btn.primary:active { box-shadow: inset 0 3px 6px rgba(0,0,0,.3); }
.btn.danger-solid { border-color: color-mix(in srgb, var(--bad) 75%, #000);
  background: var(--gloss-on), linear-gradient(180deg, color-mix(in srgb, var(--bad) 80%, #fff), var(--bad) 55%, color-mix(in srgb, var(--bad) 80%, #000)); }
.btn.ghost { background: transparent; box-shadow: none; }
.stepper button { background: var(--gloss), linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: var(--edge), var(--drop); border-radius: 12px; }

/* inputs and tab strips: sunken */
input, select, textarea { box-shadow: var(--sink); }
.seg { box-shadow: var(--sink); }
/* round form: "รายละเอียด รอบที่ x" box raised like the cost card below it */
.loan-calc { border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--edge), var(--drop); }
.seg .on { background: var(--gloss), var(--surface); box-shadow: var(--edge), var(--drop); }
.radio-row label { box-shadow: var(--edge), 0 2px 6px rgba(0,0,0,.08); }

/* badges */
.badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.35); border: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.nav-badge { background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 75%, #fff), var(--bad)); box-shadow: 0 0 6px color-mix(in srgb, var(--bad) 60%, transparent); }

/* PC sidebar: same dark bar as now, items become raised buttons with icons */
@media (min-width: 900px) {
  #app { grid-template-columns: 240px 1fr; }
  .sidebar { background: linear-gradient(180deg, #2f2d2b, #1f1d1b); }
  .nav { gap: 8px; }
  .nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; opacity: 1; font-weight: 500;
    background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 48%, rgba(255,255,255,0) 52%), rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 8px rgba(0,0,0,.35); }
  .nav a .ico { font-size: 1.5rem; width: 34px; text-align: center; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
  .nav a:hover { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 48%, rgba(255,255,255,0) 52%), rgba(255,255,255,.09); }
  .nav a.active { border-color: color-mix(in srgb, var(--accent) 70%, #000);
    background: var(--gloss-on), linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 85%, #000));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent), 0 3px 8px rgba(0,0,0,.35); }
}

/* phone bars */
.topbar { background: linear-gradient(180deg, #353331, #1f1d1b); box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.bottomnav { padding: 6px 4px env(safe-area-inset-bottom); gap: 4px; box-shadow: 0 -4px 14px rgba(0,0,0,.12);
  background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.bottomnav a { border-radius: 14px; padding: 6px 2px; }
.bottomnav a .ico { filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.bottomnav a.active { background: var(--gloss), linear-gradient(180deg, var(--surface), var(--accent-soft));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--edge), var(--drop); }
.more-menu a { background: var(--gloss), linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); box-shadow: var(--edge), var(--drop); }
.more-menu a.active { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }

/* bars */
.duo-bar { box-shadow: var(--sink); height: 18px; }
.duo-bar .l { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%), var(--duo-l); }
.toast { box-shadow: 0 8px 20px rgba(0,0,0,.3); }

/* Buttons and bottom bar (user's picks, 2026-10-26): main buttons charcoal (--accent), the other buttons smoke grey
   (ขี้เถ้า, ข1), every bottom-bar button raised smoke grey with a dark edge and the chosen one charcoal (ม2). */
.btn:where(:not(.primary):not(.danger-solid):not(.danger):not(.ghost)) { background: var(--gloss), linear-gradient(180deg, #e7e2db, #cfc7bd);
  border: 1px solid #b3aa9f; color: #2f2a26; }
.bottomnav a { background: var(--gloss), linear-gradient(180deg, #ece7e0, #d9d2c8); border: 1px solid #b3aa9f;
  box-shadow: var(--edge), 0 2px 5px rgba(60,40,20,.18); color: var(--text); }
.bottomnav a.active { color: #fff; border: 1px solid color-mix(in srgb, var(--accent) 75%, #000);
  background: var(--gloss-on), linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 85%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(0,0,0,.35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:where(:not(.primary):not(.danger-solid):not(.danger):not(.ghost)) { background: var(--gloss), linear-gradient(180deg, #57514b, #3d3833); border-color: #7a726a; color: #fff; }
  :root:not([data-theme="light"]) .bottomnav a:not(.active) { background: var(--gloss), linear-gradient(180deg, #45403b, #322e2a); border-color: #6e665e; box-shadow: var(--edge), 0 2px 6px rgba(0,0,0,.5); }
}
:root[data-theme="dark"] .btn:where(:not(.primary):not(.danger-solid):not(.danger):not(.ghost)) { background: var(--gloss), linear-gradient(180deg, #57514b, #3d3833); border-color: #7a726a; color: #fff; }
:root[data-theme="dark"] .bottomnav a:not(.active) { background: var(--gloss), linear-gradient(180deg, #45403b, #322e2a); border-color: #6e665e; box-shadow: var(--edge), 0 2px 6px rgba(0,0,0,.5); }
}