/* =============================================================
   finance.css — Kiddo (儿童画风) theme
   -------------------------------------------------------------
   • Flat, playful, crayon-like colors
   • No harsh lines; no neon blue bars; gentle dashed outlines
   • Big rounded corners, hand‑drawn vibes (uses common system cursive fallbacks)
   ============================================================= */

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
:root {
  --paper: #FFFDF7;
  --ink: #2b2b2b;
  --muted: #6b7280;
  --border: #e6e2d9;
  --header: #FFF7D6;   /* warm header */
  --row-alt: #FFF9E8;  /* zebra */
  --focus: #5aa9e6;    /* soft sky (not neon) */
  --danger: #ef4444;

  /* Pastel crayons per currency */
  --USD: #74b9ff;  --USD-bg: #e9f5ff;
  --EUR: #a29bfe;  --EUR-bg: #f2efff;
  --GBP: #f6b93b;  --GBP-bg: #fff4d6;
  --CHF: #ff9fcd;  --CHF-bg: #ffe6f2;
  --JPY: #55efc4;  --JPY-bg: #e9fff7;
  --AUD: #ffbe76;  --AUD-bg: #fff0e0;
  --CAD: #81a1ff;  --CAD-bg: #eef2ff;
  --HKD: #95a5a6;  --HKD-bg: #f0f4f6;
  --NZD: #00cec9;  --NZD-bg: #e0f7f6;
  --RUB: #fab1a0;  --RUB-bg: #fff1ee;
  --SEK: #ffeaa7;  --SEK-bg: #fffbea;
  --KRW: #fd79a8;  --KRW-bg: #fff0f6;
  --SGD: #55acee;  --SGD-bg: #e8f5fe;
  --THB: #e17055;  --THB-bg: #fff0ec;

}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1216;
    --ink: #e5e7eb;
    --muted: #94a3b8;
    --border: #20262d;
    --header: #171c21;
    --row-alt: #14181e;
    --focus: #7cc0f1;
  }
}

body {
  margin: 0;
  font: 16px/1.5 "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Segoe Print", cursive, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  color: var(--ink);
  background: var(--paper);
  padding: 16px;
}

h1, h2 { margin: 0 0 12px; letter-spacing: .2px; text-shadow: 0 1px 0 rgba(0,0,0,.04); }
#topSection {
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),
              url("FrozenWallpaper.jpg") center/cover no-repeat;
  padding: 20px;
}
/* ---- Top row layout ---- */
#topRow {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Buy left / Sell right */
  gap: 16px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto; /* center top row */
}
@media (max-width: 900px) { #topRow { grid-template-columns: 1fr; } }

/* ---- Cards (fieldset) ---- */
fieldset {
  border: 2.5px dashed #d5d0c7;   /* doodle border */
  background: #fff;
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 3px 3px 0 #e5e1d8;  /* offset shadow = hand‑drawn feel */
}
legend { padding: 0 10px; color: var(--muted); font-weight: 700; }
label { display: block; margin: 10px 0; }

/* ---- Controls ---- */
input, select, button { font: inherit; }
input, select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e9e5dd;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  outline: none;
  box-shadow: 2px 2px 0 #e9e5dd inset;
}
@media (prefers-color-scheme: dark) { input, select { background: #0e1216; border-color: #242a31; box-shadow: 2px 2px 0 #242a31 inset; } }
input:focus, select:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(90,169,230,.25); }
input[readonly] { background: #fdfbf4; }
@media (prefers-color-scheme: dark) { input[readonly] { background: #0e141a; } }

#toolbar { text-align: center; margin: 10px 0 14px; }
#toggleReadonly {
  appearance: none; border: 2px solid #e9e5dd; background: #fff; color: var(--ink);
  padding: 10px 16px; border-radius: 999px; cursor: pointer; font-weight: 800;
  box-shadow: 2px 2px 0 #e9e5dd; transition: transform .05s ease;
}
#toggleReadonly:hover { transform: translateY(1px); }

button {
  appearance: none;
  border: 2px solid #e9e5dd;
  background: #fff;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #e9e5dd;
}
button:hover { transform: translateY(1px); }
button:focus-visible { outline: 3px dashed var(--focus); outline-offset: 2px; }

/* ---- Timeline ---- */
#timelineWrap { max-width: 1100px; margin: 22px auto 0; }
#timeline { width: 100%; border-collapse: separate; border-spacing: 0; border: 2px dashed #d5d0c7; border-radius: 18px; overflow: hidden; background: #fff; }
#timeline thead th {
  position: sticky; top: 0; z-index: 1; background: var(--header); color: #7a5d00;
  text-align: left; padding: 10px 12px; border-bottom: 2px dashed #e8dfc6; font-weight: 800;
}
#timeline tbody td { border-bottom: 1px dashed #efe9db; padding: 10px 12px; background: #fff; }
#timeline tbody tr:nth-child(odd) td { background: var(--row-alt); }

/* Softer hover (no harsh blue lines) */
#timeline tbody tr:hover td { background: #FFF4D9; } /* warm banana hover */
@media (prefers-color-scheme: dark) { #timeline tbody tr:hover td { background: #171b20; } }

/* Currency-aware highlight: pastel fill + dashed outline (no left blue bar) */
#timeline tbody tr.hl td { outline: 3px dashed #f2d59c; outline-offset: -3px; }
[data-ccy="USD"].hl td { background: var(--USD-bg) !important; outline-color: var(--USD); }
[data-ccy="EUR"].hl td { background: var(--EUR-bg) !important; outline-color: var(--EUR); }
[data-ccy="GBP"].hl td { background: var(--GBP-bg) !important; outline-color: var(--GBP); }
[data-ccy="CHF"].hl td { background: var(--CHF-bg) !important; outline-color: var(--CHF); }
[data-ccy="JPY"].hl td { background: var(--JPY-bg) !important; outline-color: var(--JPY); }
[data-ccy="AUD"].hl td { background: var(--AUD-bg) !important; outline-color: var(--AUD); }
[data-ccy="CAD"].hl td { background: var(--CAD-bg) !important; outline-color: var(--CAD); }
[data-ccy="HKD"].hl td { background: var(--HKD-bg) !important; outline-color: var(--HKD); }
[data-ccy="NZD"].hl td { background: var(--NZD-bg) !important; outline-color: var(--NZD); }
[data-ccy="RUB"].hl td { background: var(--RUB-bg) !important; outline-color: var(--RUB); }
[data-ccy="SEK"].hl td { background: var(--SEK-bg) !important; outline-color: var(--SEK); }
[data-ccy="KRW"].hl td { background: var(--KRW-bg) !important; outline-color: var(--KRW); }
[data-ccy="SGD"].hl td { background: var(--SGD-bg) !important; outline-color: var(--SGD); }
[data-ccy="THB"].hl td { background: var(--THB-bg) !important; outline-color: var(--THB); }

/* Little badge vibe on currency column */
#timeline td:nth-child(4) { font-weight: 800; }

/* Utilities */
.table-actions button { padding: 6px 10px; }

/* Print */
@media print { body { background: #fff; color: #111; } #toggleReadonly { display: none; } }