:root {
  --bg: #0a0e1a;
  --bg-2: #0e1424;
  --card: #121a2e;
  --card-2: #172038;
  --border: rgba(148, 168, 220, 0.14);
  --border-soft: rgba(148, 168, 220, 0.08);
  --text: #e8edf8;
  --text-dim: #9aa7c4;
  --text-faint: #66738f;
  --accent: #2dd4bf;
  --accent-2: #8b7cf6;
  --danger: #f87171;
  --ok: #34d399;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-size: 15px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(139, 124, 246, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(45, 212, 191, 0.07), transparent 60%),
    var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(10, 14, 26, 0.7);
  backdrop-filter: blur(8px);
  flex: 0 0 auto;
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand-mark {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 18px rgba(45, 212, 191, 0.35);
}
.brand-mark svg { width: 30px; height: 30px; display: block; }

.brand-name { margin: 0; font-weight: 800; font-size: 18px; letter-spacing: 0.2px; }
.brand-tag { margin: 1px 0 0; font-size: 12.5px; color: var(--text-dim); }
.topbar-note { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.topbar-note b { color: var(--accent); font-weight: 600; }

.topbar-right { display: flex; align-items: center; gap: 14px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(45, 212, 191, 0.4);
  background: rgba(45, 212, 191, 0.1);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: rgba(45, 212, 191, 0.2); }
.btn.ghost {
  border-color: var(--border);
  background: none;
  color: var(--text-dim);
}
.btn.ghost:hover { color: var(--text); border-color: rgba(148, 168, 220, 0.35); }
.btn.ghost.armed {
  color: var(--danger);
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.08);
}
.btn.ghost.more-btn { gap: 8px; }
.more-btn .mb-ic { font-size: 14px; line-height: 1; opacity: 0.85; }

/* ---------- Layout ---------- */
.layout {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.panel {
  flex: 0 0 340px;
  overflow-y: auto;
  padding: 18px 16px 24px 20px;
  border-right: 1px solid var(--border-soft);
  scrollbar-width: thin;
  scrollbar-color: #2a3550 transparent;
}

.chart-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 12px;
  gap: 14px;
  /* Matalilla ruuduilla (esim. 1366×768) sisältö ei mahdu — rullataan
     sarakkeen sisällä sen sijaan että tase leikkautuisi pois näkyvistä */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2a3550 transparent;
}

/* ---------- Cards & fields ---------- */
.card {
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

.card h2 {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-dim);
}

/* Paneelin kortit taittuvat otsikosta klikkaamalla */
.panel .card[data-card] h2 {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  user-select: none;
}
.panel .card[data-card] h2::after {
  content: '▾';
  font-size: 10px;
  color: var(--text-faint);
  margin-left: auto;
}

.panel .card[data-card] h2:hover { color: var(--text); }
.panel .card.collapsed h2 { margin-bottom: 0; }
.panel .card.collapsed h2::after { content: '▸'; }
.panel .card.collapsed > *:not(h2) { display: none; }

.field { display: block; margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field-label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 5px; }
.field-label small { display: block; color: var(--text-faint); font-size: 11px; font-weight: 400; margin-top: 1px; }
.field.field-sub { margin-top: 10px; }

/* minmax(0,…): kentät saavat kutistua inputin min-content-leveyden alle */
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

.input {
  display: flex;
  align-items: center;
  background: rgba(8, 12, 24, 0.7);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 10px 0 0;
  transition: border-color 0.15s;
}
.input:focus-within { border-color: var(--accent); }
.input input,
.input select {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  padding: 9px 10px;
}
.input select { cursor: pointer; }
.input select option { background: #0d1220; color: var(--text); }
.input em { font-style: normal; font-size: 12px; color: var(--text-faint); }

input[type="number"]::-webkit-inner-spin-button { opacity: 0.4; }

/* ---------- Sliders ---------- */
.slider-field { margin-bottom: 10px; }
.slider-head {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--text-dim); margin-bottom: 4px;
}
.slider-head b { color: var(--text); font-variant-numeric: tabular-nums; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 50%), #232c47 var(--fill, 50%));
  outline: none;
  cursor: pointer;
}
input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.3); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  cursor: grab;
}

.alloc-cash {
  font-size: 13px; color: var(--text-dim);
  display: flex; justify-content: space-between;
  padding: 6px 2px 10px;
  border-bottom: 1px dashed var(--border-soft);
  margin-bottom: 10px;
}
.alloc-cash b { color: var(--text); }

.alloc-summary {
  font-size: 12.5px;
  color: var(--accent);
  background: rgba(45, 212, 191, 0.08);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 9px;
  padding: 8px 10px;
  margin-bottom: 12px;
}

/* ---------- Toggles ---------- */
.toggle {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; margin-top: 10px;
  font-size: 13.5px;
}
.toggle small { display: block; color: var(--text-faint); font-size: 11.5px; margin-top: 1px; }
/* Piilotettu mutta fokusoitava — kytkintä voi käyttää myös näppäimistöllä */
.toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.toggle input:focus-visible + .switch { box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.35); }
.switch {
  flex: 0 0 36px; height: 20px;
  border-radius: 10px;
  background: #232c47;
  position: relative;
  transition: background 0.2s;
  margin-top: 1px;
}
.switch::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #8fa0c4;
  transition: all 0.2s;
}
.toggle input:checked + .switch { background: var(--accent); }
.toggle input:checked + .switch::after { left: 19px; background: #06221d; }

/* ---------- Varallisuusjakauma ---------- */
.dist-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
#distChart { flex: 0 0 118px; width: 118px; height: 118px; }
.dist-list {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
}
.dist-row { display: flex; align-items: center; gap: 7px; }
.dist-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 3px; }
.dist-row .dl { flex: 1; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist-row .dp { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.dist-row .dv { font-weight: 600; font-variant-numeric: tabular-nums; }
.dist-extra { border-top: 1px dashed var(--border-soft); margin-top: 4px; padding-top: 6px; }
.dist-row .dv.dbt { color: var(--danger); }
.dist-row .dv.net { color: #fbbf24; }

/* ---------- Palette ---------- */
.hint { font-size: 12px; color: var(--text-faint); margin: 0 0 10px; }
.hint a { color: var(--accent); font-weight: 600; }

.palette {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}

.chip {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px;
  min-width: 0;
  overflow: hidden;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
}
.chip:hover { border-color: var(--accent); background: #1b2542; transform: translateY(-1px); }
.chip:focus-visible, .event-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip:active { cursor: grabbing; }
.chip .ic { font-size: 15px; flex: 0 0 auto; }
.chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.drag-ghost {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: #1b2542;
  border: 1px solid var(--accent);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -120%);
}

/* ---------- Event list ---------- */
.event-list { display: flex; flex-direction: column; gap: 6px; }
.event-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  background: rgba(8, 12, 24, 0.5);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.event-row:hover { border-color: var(--accent); }
.event-row .ic { font-size: 16px; }
.event-row .nm { flex: 1; font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-row .ag { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.event-row .am { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.event-row .am.pos { color: var(--ok); }
.event-row .am.neg { color: var(--danger); }
.event-row .rm {
  border: none; background: none; color: var(--text-faint);
  font-size: 14px; cursor: pointer; border-radius: 6px;
  /* riittävä kosketusalue ilman että rivi kasvaa */
  padding: 8px 9px; margin: -6px -5px;
}
.event-row .rm:hover { color: var(--danger); background: rgba(248, 113, 113, 0.1); }
.event-empty { font-size: 12.5px; color: var(--text-faint); padding: 4px 2px; }

.disclaimer { font-size: 11px; color: var(--text-faint); line-height: 1.5; margin: 4px 4px 0; }
.disclaimer a { color: var(--text-dim); }
.disclaimer a:hover { color: var(--accent); }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  flex: 0 0 auto;
}
.stat {
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  min-width: 0; /* salli kutistuminen grid-solussa — pitkä otsikko ei saa levittää sivua */
}
.stat .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); margin-bottom: 3px; overflow-wrap: break-word; }
.stat .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.stat .s { font-size: 11px; color: var(--text-faint); margin-top: 2px; line-height: 1.45; }
.stat .v.ok { color: var(--ok); }
.stat .v.bad { color: var(--danger); }
.stat .v.accent { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Vertailuchipit (vertailumodaali) ---------- */
.cmp-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(8, 12, 24, 0.5);
  border: 1px solid var(--border-soft);
  white-space: nowrap;
}
.cmp-chip .ck { color: var(--text-dim); }
.cmp-chip .cv { font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-chip .cv.up { color: var(--ok); }
.cmp-chip .cv.down { color: var(--danger); }
.cmp-chip .cv.flat { color: var(--text-faint); }
.sw-ghost { width: 22px; height: 0; border-top: 2px dashed #9aa7c4; opacity: 0.85; }

/* ---------- Chart ---------- */
.chart-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
  background: linear-gradient(180deg, rgba(18, 26, 46, 0.55), rgba(10, 14, 26, 0.3));
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.chart-wrap.drop-target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15), var(--shadow); }

#chart { display: block; width: 100%; height: 100%; }

.axis-text { font-size: 11.5px; fill: var(--text-dim); font-family: inherit; }
.axis-year { font-size: 10px; fill: var(--text-faint); }
.grid-line { stroke: rgba(148, 168, 220, 0.07); }
.grid-line-x { stroke: rgba(148, 168, 220, 0.045); }

/* touch-action: raahaus toimii myös sormella — ilman tätä selain kaappaa eleen scrolliksi */
.marker { cursor: grab; touch-action: none; }
.marker:active { cursor: grabbing; }
.marker circle.bg { transition: stroke 0.15s; }
.marker:hover circle.bg { stroke: var(--accent); }

.drop-hint {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(45, 212, 191, 0.05);
  pointer-events: none;
}
.drop-hint span {
  font-size: 14px; font-weight: 600;
  color: var(--accent);
  background: rgba(10, 14, 26, 0.85);
  border: 1px dashed var(--accent);
  border-radius: 12px;
  padding: 12px 22px;
}

/* ---------- Tooltip ---------- */
.tooltip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  background: rgba(13, 18, 34, 0.95);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px 13px;
  font-size: 12.5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  min-width: 175px;
  backdrop-filter: blur(6px);
}
.tooltip .tt-age { font-weight: 700; margin-bottom: 6px; font-size: 13px; }
.tooltip .tt-row { display: flex; justify-content: space-between; gap: 14px; color: var(--text-dim); margin-top: 3px; }
.tooltip .tt-row b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.tooltip .tt-row b.hl { color: var(--accent); }

/* ---------- Popover ---------- */
.popover {
  position: absolute;
  z-index: 30;
  width: 250px;
  max-height: calc(100% - 28px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2a3550 transparent;
  background: #141c33;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);
}
.popover h3 {
  margin: 0 0 12px;
  font-size: 14px;
  display: flex; align-items: center; gap: 8px;
}
.popover .close {
  margin-left: auto;
  border: none; background: none;
  color: var(--text-faint); font-size: 16px; cursor: pointer;
  padding: 0 2px; border-radius: 6px;
}
.popover .close:hover { color: var(--text); }
.popover .field { margin-bottom: 10px; }
.popover .actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.popover .del {
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
  color: var(--danger);
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
}
.popover .del:hover { background: rgba(248, 113, 113, 0.18); }
.popover .actions { gap: 8px; }
.popover .dup {
  margin-right: auto;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-dim);
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
}
.popover .dup:hover { color: var(--accent); border-color: rgba(45, 212, 191, 0.4); }
.popover .sale-note {
  margin: 2px 0 10px;
  padding: 8px 10px;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  line-height: 1.6;
}
.popover .sale-note b { color: #fbbf24; font-weight: 600; }
.popover .note { font-size: 11.5px; color: var(--text-faint); margin: -4px 0 10px; }
.popover .loan-note {
  margin: 2px 0 10px;
  padding: 8px 10px;
  background: rgba(248, 113, 113, 0.06);
  border: 1px solid rgba(248, 113, 113, 0.18);
  border-radius: 8px;
  line-height: 1.6;
}
.popover .loan-note b { color: var(--text); font-weight: 600; }

/* Segmenttivalitsin */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  background: rgba(8, 12, 24, 0.7);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.seg button {
  border: none;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 4px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.seg button:hover { color: var(--text); }
.seg button.on {
  background: rgba(45, 212, 191, 0.15);
  color: var(--accent);
}

.loan-badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--danger);
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 5px;
  padding: 1px 5px;
}

.tooltip .tt-row b.dbt { color: var(--danger); }
.tooltip .tt-row b.net { color: #fbbf24; }
.tooltip .tt-row b.ast { color: #60a5fa; }
.tooltip .tt-row b.ok { color: var(--ok); }
.tooltip .tt-net {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
}
.sw-net { width: 22px; height: 2.5px; border-radius: 2px; background: #fbbf24; }
.stat .v.net { color: #fbbf24; }

.zero-badge {
  color: var(--accent);
  background: rgba(45, 212, 191, 0.1);
  border-color: rgba(45, 212, 191, 0.3);
}
.rec-badge {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.3);
}
.share-badge {
  color: var(--accent);
  background: rgba(45, 212, 191, 0.1);
  border-color: rgba(45, 212, 191, 0.3);
  text-transform: none;
}
.sale-badge {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
}

.popover .toggle { font-size: 13px; margin-top: 2px; }
.popover .input input:disabled { color: var(--accent); opacity: 1; }

/* Tavoitevalitsin: 4 nappia 2×2-ruudukossa */
.seg-goal button { font-size: 11.5px; padding: 6px 2px; }
.popover .req-note {
  margin: 2px 0 10px;
  padding: 8px 10px;
  background: rgba(45, 212, 191, 0.06);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 8px;
  line-height: 1.6;
}
.popover .req-note b { color: var(--accent); font-weight: 600; }
.popover .pen-note {
  margin: 2px 0 10px;
  padding: 8px 10px;
  background: rgba(139, 124, 246, 0.07);
  border: 1px solid rgba(139, 124, 246, 0.2);
  border-radius: 8px;
  line-height: 1.6;
}
.popover .pen-note b { color: var(--accent-2); font-weight: 600; }
.sw-debt { width: 22px; height: 0; border-top: 2px dashed var(--danger); }

/* ---------- Tase-paneeli ---------- */
.balance-panel {
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(18, 26, 46, 0.55), rgba(10, 14, 26, 0.3));
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.balance-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-dim);
}
.balance-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-dim);
}
.collapse-btn {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  padding: 8px 12px;
  margin: -6px -4px;
  border-radius: 7px;
}
.collapse-btn:hover { color: var(--text); background: rgba(148, 168, 220, 0.1); }
.balance-body { height: 145px; }
.balance-panel.collapsed .balance-body { display: none; }
#balanceChart { display: block; width: 100%; height: 100%; }

.sw-inv { width: 12px; height: 12px; border-radius: 3px; background: rgba(45, 212, 191, 0.75); }
.sw-asset { width: 12px; height: 12px; border-radius: 3px; background: rgba(96, 165, 250, 0.75); }
.sw-debtbar { width: 12px; height: 12px; border-radius: 3px; background: rgba(248, 113, 113, 0.75); }

/* ---------- Legend ---------- */
.legend {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding: 2px 6px 6px;
  font-size: 12px; color: var(--text-dim);
  flex: 0 0 auto;
}
.lg { display: inline-flex; align-items: center; gap: 7px; }
.sw { display: inline-block; }
.sw-line { width: 22px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.sw-band { width: 22px; height: 10px; border-radius: 3px; background: rgba(45, 212, 191, 0.18); }
.sw-dash { width: 22px; height: 0; border-top: 2px dashed #8fa0c4; }
.sw-marker { font-size: 13px; font-style: normal; }

/* ---------- Yhteenveto ---------- */
.summary {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow-y: auto;
  background: rgba(6, 10, 20, 0.82);
  backdrop-filter: blur(6px);
  padding: 24px 16px 48px;
}
.sum-bar { max-width: 860px; margin: 0 auto 12px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.sum-sheet {
  max-width: 860px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 34px 40px 26px;
}
.sum-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.sum-head h1 { margin: 0; font-size: 22px; letter-spacing: 0.2px; }
.sum-sub { color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.sum-meta { text-align: right; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; white-space: nowrap; }
.sum-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 4px; }
.sum-tile { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.sum-tile .k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); }
.sum-tile .v { font-size: 18px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.sum-tile .v.accent { color: var(--accent); }
.sum-tile .v.ok { color: var(--ok); }
.sum-tile .v.bad { color: var(--danger); }
.sum-tile .s { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.sum-sheet h2 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-dim);
  margin: 24px 0 10px;
}
.sum-chart svg { width: 100%; height: auto; display: block; }
.sum-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
.sum-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sum-lg-line { width: 20px; height: 3px; border-radius: 2px; background: var(--accent); }
.sum-lg-band { width: 20px; height: 9px; border-radius: 3px; background: rgba(45, 212, 191, 0.16); }
.sum-lg-inv { width: 20px; height: 0; border-top: 2px dashed #8fa0c4; }
.sum-points { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.65; }
.sum-points li { margin-bottom: 7px; }
.sum-points b { color: var(--accent); font-weight: 600; }
.sum-points li.warn, .sum-points li.warn b { color: var(--danger); }
.sum-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sum-table th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-faint);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.sum-table td { padding: 7px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.sum-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-assump { font-size: 11.5px; color: var(--text-faint); line-height: 1.6; margin: 10px 0 0; }
.sum-disclaimer {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.6;
}
/* Tietoa-modaali (uudelleenkäyttää yhteenvedon arkkia) */
.info-sheet p { font-size: 13.5px; line-height: 1.7; color: var(--text); margin: 0 0 10px; }
.info-sheet p b { color: var(--accent); }
.info-sheet a { color: var(--accent); }

/* yhteenvedon graafi */
.sum-grid { stroke: var(--border-soft); stroke-width: 1; }
.sum-band { fill: rgba(45, 212, 191, 0.14); }
.sum-line { stroke: var(--accent); stroke-width: 2.2; fill: none; }
.sum-inv { stroke: #8fa0c4; stroke-width: 1.5; stroke-dasharray: 5 5; fill: none; }
.sum-tick { fill: var(--text-faint); font-size: 10.5px; }
.sum-mark-dot { fill: var(--accent); }
.sum-mark-ret { fill: var(--accent-2); }
.sum-ev-ico { font-size: 12px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 200;
  background: #141c33;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Pudotusvalikko (Esimerkit) ---------- */
.menu {
  position: fixed;
  z-index: 120;
  min-width: 250px;
  background: #141c33;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 6px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);
}
.menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 11px;
  border-radius: 9px;
  cursor: pointer;
}
.menu button:hover { background: rgba(45, 212, 191, 0.08); }
.menu .mdesc { font-size: 11.5px; color: var(--text-faint); font-weight: 400; margin-top: 1px; }
.menu button.danger div:first-child { color: var(--danger); }
.menu button.danger:hover { background: rgba(248, 113, 113, 0.08); }
.menu button.armed-item { background: rgba(248, 113, 113, 0.12); }
.menu .mnote {
  font-size: 11px;
  color: var(--text-faint);
  padding: 7px 11px 5px;
  border-top: 1px solid var(--border-soft);
  margin-top: 4px;
}

/* ---------- Ehtymisvyöhykkeen teksti ---------- */
.dry-label { font-size: 11px; fill: rgba(248, 113, 113, 0.85); font-family: inherit; }

/* ---------- Vuositaulukko ---------- */
.legend .btn-mini { padding: 4px 11px; font-size: 11.5px; margin-left: auto; }
.table-scroll { overflow-x: auto; margin-top: 14px; scrollbar-width: thin; scrollbar-color: #2a3550 transparent; }
/* Vieritettävässä taulukossa solu ei rivity kesken luvun ("30 v" yhdellä rivillä) */
.table-scroll .sum-table th, .table-scroll .sum-table td:first-child, .table-scroll .sum-table td.num { white-space: nowrap; }
.table-sheet .sum-table { min-width: 640px; }
.table-sheet .sum-table td.num.dbt { color: var(--danger); }
.table-sheet .sum-table td.num.net { color: #fbbf24; }
.table-sheet .sum-table th.num { text-align: right; }
.table-sheet .sum-table tbody tr:hover td { background: rgba(45, 212, 191, 0.04); }

/* ---------- Anonyymi vertailudata ---------- */
#donateSlot { max-width: 860px; margin: 0 auto 12px; }
.donate-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.08), rgba(139, 124, 246, 0.08));
  border: 1px solid rgba(45, 212, 191, 0.25);
  border-radius: 14px;
}
.donate-card .dc-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.donate-card .dc-text b { font-size: 13.5px; }
.donate-card .dc-text span { color: var(--text-dim); line-height: 1.5; }
.donate-card .dc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.donate-card.slim { font-size: 13px; color: var(--text-dim); padding: 10px 16px; }
.donate-card.slim span { flex: 1 1 auto; }

.donate-sheet .dp-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.donate-sheet .dp-row span { color: var(--text-dim); }
.donate-sheet .dp-row b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.donate-raw { margin-top: 14px; font-size: 12.5px; }
.donate-raw summary { cursor: pointer; color: var(--text-dim); }
.donate-raw summary:hover { color: var(--accent); }
.donate-raw pre {
  margin: 8px 0 0;
  padding: 12px;
  background: rgba(8, 12, 24, 0.7);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.5;
  overflow-x: auto;
  scrollbar-width: thin;
}
.donate-note { font-size: 12px; color: var(--text-faint); line-height: 1.6; margin: 14px 0 0; }
.donate-note a { color: var(--accent); }
.donate-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Vertailunäkymä */
.cmp-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.cmp-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 190px auto auto auto;
  gap: 4px 14px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.cmp-row .cl { color: var(--text-dim); }
.cmp-row .dist-bar { width: 190px; height: 30px; }
.cmp-row .cv { font-weight: 700; font-variant-numeric: tabular-nums; color: #fbbf24; }
.cmp-row .cp { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
.cmp-row .cm { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
.cmp-events { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 700px) {
  .cmp-row { grid-template-columns: 1fr auto; }
  .cmp-row .cm { display: none; }
}

/* ---------- Analytiikkasivu (analytiikka.html) ---------- */
.an-body { display: block; overflow: auto; height: auto; min-height: 100%; }
.an-main { max-width: 1020px; margin: 0 auto; padding: 22px 18px 20px; }
.an-intro { font-size: 14px; line-height: 1.65; color: var(--text-dim); margin: 4px 0 14px; }
.an-intro b { color: var(--text); }
.an-intro #anUpdated { color: var(--text-faint); font-size: 12.5px; }
.an-you-banner {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text);
  background: rgba(251, 191, 36, 0.07);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.an-you-banner .dot { width: 10px; height: 10px; border-radius: 50%; background: #fbbf24; flex: 0 0 auto; }
.an-you-banner.faint { background: none; border-color: var(--border-soft); color: var(--text-dim); }
.an-you-banner a { color: var(--accent); }
.an-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.an-card {
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.an-card h2 { margin: 0 0 14px; font-size: 15px; letter-spacing: 0.2px; }
.an-card h2 small, .an-card h3 small { color: var(--text-faint); font-weight: 400; font-size: 12px; margin-left: 6px; }
.an-card h3 { margin: 0 0 10px; font-size: 13px; color: var(--text-dim); font-weight: 600; }
.an-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.an-grid2 > .an-card { margin-bottom: 0; }
.an-chart svg { display: block; width: 100%; height: auto; }
.an-donut svg { display: block; width: 100%; max-width: 320px; height: auto; }
.an-tick { font-size: 11px; fill: var(--text-faint); font-family: inherit; }
.an-tick-strong { font-size: 11px; fill: var(--text-dim); font-family: inherit; font-weight: 600; }
.an-row-label { font-size: 12.5px; fill: var(--text); font-family: inherit; font-weight: 600; }
.an-you { font-size: 11px; fill: #fbbf24; font-weight: 700; font-family: inherit; }
.an-empty {
  display: grid; place-items: center;
  min-height: 120px;
  font-size: 13px; color: var(--text-faint);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  line-height: 1.6;
}
.an-note { font-size: 12px; color: var(--text-faint); line-height: 1.6; margin: 0; }
.an-note a { color: var(--accent); }
.an-cov { display: flex; flex-direction: column; gap: 7px; }
.an-cov-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; font-size: 12px; }
.an-cov-row .cg { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.an-cov-row .cbar { height: 13px; background: rgba(45, 212, 191, 0.25); border-radius: 7px; overflow: hidden; }
.an-cov-row .cbar i { display: block; height: 100%; background: rgba(139, 124, 246, 0.85); border-radius: 7px 0 0 7px; }
.an-cov-row .cpct { color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-cov-row.mine .cg { color: #fbbf24; font-weight: 700; }
.an-hl-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.an-hl-row .k { flex: 1 1 140px; color: var(--text-dim); }
.an-hl-row b { font-size: 15px; font-variant-numeric: tabular-nums; }
.an-hl-row .rng { font-size: 11.5px; color: var(--text-faint); }
.an-hl-row .you { font-size: 11.5px; color: #fbbf24; font-weight: 600; }
.an-share { display: grid; grid-template-columns: 1fr 120px 44px; gap: 10px; align-items: center; font-size: 12.5px; padding: 6px 0; }
.an-share .k { color: var(--text-dim); }
.an-share .sbar { height: 11px; background: rgba(148, 168, 220, 0.12); border-radius: 6px; overflow: hidden; }
.an-share .sbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 6px; }
.an-share b { font-variant-numeric: tabular-nums; text-align: right; }
.an-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.an-chip {
  font-size: 11.5px; color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
  font-variant-numeric: tabular-nums;
}
.an-chip.ok { color: var(--ok); border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.06); }
.topbar-right a.btn { text-decoration: none; }
@media (max-width: 760px) {
  .an-grid2 { grid-template-columns: 1fr; }
  .an-main { padding: 16px 12px; }
}

/* Lukitus: sisältö sumennettuna houkuttimena, kortti kertoo miten aukeaa */
.an-main.an-locked > *:not(.an-intro) {
  filter: blur(9px) saturate(0.85);
  pointer-events: none;
  user-select: none;
}
.an-lock {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(640px 420px at 50% 42%, rgba(10, 14, 26, 0.25), rgba(10, 14, 26, 0.78));
}
.an-lock-card {
  max-width: 470px;
  text-align: center;
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 30px 30px 24px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.an-lock-card .ic { font-size: 40px; margin-bottom: 8px; }
.an-lock-card h2 { margin: 0 0 10px; font-size: 20px; }
.an-lock-card p { font-size: 13.5px; line-height: 1.65; color: var(--text-dim); margin: 0 0 16px; }
.an-lock-card p b { color: var(--text); }
.an-lock-card a.btn { display: inline-block; text-decoration: none; padding: 10px 22px; font-size: 14px; }
.an-lock-card .small { font-size: 11.5px; color: var(--text-faint); margin: 14px 0 0; }
.an-lock-card .small a { color: var(--accent); }

/* ---------- Tulostus: vain yhteenveto, vaalea paperiasu ---------- */
@media print {
  @page { size: A4; margin: 12mm; }
  body { overflow: visible; background: #fff; display: block; }
  body.summary-open .topbar,
  body.summary-open .layout { display: none !important; }
  .summary { position: static; background: #fff; backdrop-filter: none; padding: 0; overflow: visible; }
  .sum-bar, #donateSlot { display: none !important; }
  .sum-sheet {
    max-width: none;
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    color: #1e293b;
  }
  .sum-head h1 { color: #0f172a; }
  .sum-sub, .sum-meta, .sum-sheet h2, .sum-tile .k, .sum-legend { color: #64748b; }
  .sum-tile { border-color: #e2e8f0; }
  .sum-tile .v { color: #0f172a; }
  .sum-tile .v.accent { color: #0d9488; }
  .sum-tile .v.ok { color: #047857; }
  .sum-tile .v.bad { color: #b91c1c; }
  .sum-tile .s { color: #94a3b8; }
  .sum-points { color: #1e293b; }
  .sum-points b { color: #0d9488; }
  .sum-points li.warn, .sum-points li.warn b { color: #b91c1c; }
  .sum-table th { color: #64748b; border-color: #cbd5e1; }
  .sum-table td { color: #1e293b; border-color: #e2e8f0; }
  .sum-assump, .sum-disclaimer { color: #64748b; }
  .sum-disclaimer { border-color: #e2e8f0; }
  .sum-lg-line { background: #0d9488; }
  .sum-lg-band { background: rgba(13, 148, 136, 0.12); }
  .sum-lg-inv { border-color: #94a3b8; }
  .sum-grid { stroke: #e2e8f0; }
  .sum-band { fill: rgba(13, 148, 136, 0.10); }
  .sum-line { stroke: #0d9488; }
  .sum-inv { stroke: #94a3b8; }
  .sum-tick { fill: #64748b; }
  .sum-mark-dot { fill: #0d9488; }
  .sum-mark-ret { fill: #7c3aed; }
  .sum-tile, .sum-points li, .sum-table tr { break-inside: avoid; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  body { overflow: auto; }
  .layout { flex-direction: column; }
  .panel { flex: none; border-right: none; order: 2; overflow-y: visible; }
  /* flex/overflow takaisin: sarakeasettelussa overflow-y:auto (matalien
     työpöytäruutujen fiksi) romahduttaisi sarakkeen 0-korkuiseksi */
  .chart-col { order: 1; flex: none; overflow-y: visible; }
  .chart-wrap { min-height: 320px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .topbar { flex-wrap: wrap; }
  .topbar-note { display: none; }
  /* minmax(0,1fr): pitkä yksisanainen otsikko ei levitä ruudukkoa arkin yli */
  .sum-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sum-tile { min-width: 0; }
  .sum-tile .k { letter-spacing: 0.4px; overflow-wrap: break-word; }
  .sum-sheet { padding: 22px 18px; }
  .sum-head { flex-direction: column; }
  .sum-meta { text-align: left; white-space: normal; }
}

@media (max-width: 560px) {
  .topbar { padding: 10px 12px; gap: 10px; }
  .brand-tag { display: none; }
  /* Yksi pyyhkäistävä rivi rumien rivitysten sijaan — Yhteenveto ensin */
  .topbar-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
  }
  .topbar-right::-webkit-scrollbar { display: none; }
  /* Sama järjestys kuin työpöydällä: ☰ Valikko vasemmassa laidassa,
     Suunnitelmani (päätoiminto) sen jälkeen */
  .btn { padding: 7px 12px; flex: 0 0 auto; }

  /* Tiiviimmät reunukset — sisältö saa tilan */
  .chart-col { padding: 12px; gap: 10px; }
  .panel { padding: 12px 12px 20px; }

  /* Tunnusluvut: pyyhkäistävä nauha korttiseinän sijaan — graafi heti näkyviin */
  .stats {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
    margin: 0 -12px;
    padding: 0 12px;
  }
  .stats::-webkit-scrollbar { display: none; }
  .stat { flex: 0 0 auto; width: 168px; padding: 9px 12px; }
  .stat .k { font-size: 9.5px; letter-spacing: 0.6px; }
  .stat .v { font-size: 16px; }
  .stat .s { font-size: 10.5px; }
}

/* iOS zoomaa automaattisesti alle 16 px:n lomakekenttiin — estetään kosketuslaitteilla */
@media (pointer: coarse) {
  .input input { font-size: 16px; }
}

/* ---------- Piirtopöytä: kokoruudun piirtotila ---------- */

.fs-open {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 6;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 16px;
  font-family: inherit;
  color: var(--text-dim);
  background: rgba(13, 18, 34, 0.8);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.fs-open:hover { color: var(--accent); border-color: rgba(45, 212, 191, 0.4); }

body.fs { overflow: hidden; }
body.fs .topbar, body.fs .panel, body.fs .stats,
body.fs .legend, body.fs .balance-panel { display: none !important; }
body.fs .layout { display: block; min-height: 0; }
body.fs .chart-col {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  /* 100dvh: iOS-osoitepalkki ei jätä kuollutta kaistaa (100vh varalla) */
  height: 100vh; height: 100dvh;
  padding: calc(8px + env(safe-area-inset-top, 0px))
           calc(10px + env(safe-area-inset-right, 0px))
           calc(10px + env(safe-area-inset-bottom, 0px))
           calc(10px + env(safe-area-inset-left, 0px));
  gap: 8px;
  overflow: hidden;
  background: var(--bg);
}
/* Raahaus kuuluu graafille — selain ei saa kaapata elettä scrolliksi */
body.fs .chart-wrap { min-height: 0; touch-action: none; }
body.fs .fs-open { display: none; }

/* HUD: kolme tunnuslukua + deltat haamua vasten */
.hud { display: flex; align-items: stretch; gap: 10px; flex: 0 0 auto; }
.hud-metrics {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.hud-metrics::-webkit-scrollbar { display: none; }
.hud-m {
  flex: 1 1 0;
  min-width: 128px;
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 7px 13px;
  white-space: nowrap;
}
.hud-m .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); }
.hud-m .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.hud-m .d { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hud-m .d.up { color: var(--ok); }
.hud-m .d.down { color: var(--danger); }
/* Raahauksen aikana stokastiset luvut ovat vanhentuneita — himmennys kertoo sen */
.hud-m.stale .v { opacity: 0.45; }
.hud-actions { display: flex; align-items: flex-start; gap: 8px; flex: 0 0 auto; }

/* Ruudunlukijan live-alue — visuaalisesti piilossa */
.sr-live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Mobiili: HUD yhtenä kompaktina pyyhkäistävänä rivinä — ei rivityksiä */
@media (max-width: 560px) {
  .hud-m { flex: 0 0 auto; min-width: 104px; padding: 5px 10px; }
  .hud-m .v { font-size: 15px; }
  .hud-m .d { font-size: 10.5px; }
}

/* ---------- Piirtopöytä: valinta, osumat, chippi, gripit ---------- */

/* Osumakerrokset: näkymättömät, mutta kursori kertoo tartuttavuuden */
.hit { cursor: grab; }
.hit:active { cursor: grabbing; }

.sel-stroke {
  stroke: rgba(45, 212, 191, 0.35);
  stroke-width: 8;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}
.sel-stroke.sel-wd { stroke: rgba(139, 124, 246, 0.4); }
.sel-line { stroke: var(--accent-2); stroke-width: 2.5; stroke-dasharray: 3 5; pointer-events: none; }

.end-handle { fill: #fbbf24; stroke: #0a0e1a; stroke-width: 2; pointer-events: none; opacity: 0.9; }
.end-handle.on { fill: var(--accent); }

/* Hover-esikatselu: segmentti hehkuu osoittimen alla — koko käyrä on tartuntapintaa */
.hover-stroke {
  stroke: rgba(45, 212, 191, 0.16);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.hover-stroke.wd { stroke: rgba(139, 124, 246, 0.2); }

.marker.sel circle.bg { stroke: var(--accent); }

/* Chippi: muuttuva parametri osoittimen vieressä (vanha → uusi, delta) */
.dchip {
  position: absolute;
  left: 0; top: 0;
  z-index: 25;
  pointer-events: none;
  background: rgba(13, 18, 34, 0.95);
  border: 1px solid rgba(45, 212, 191, 0.4);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 12.5px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}
.dchip.warn { border-color: rgba(248, 113, 113, 0.6); }
.dchip-row { font-variant-numeric: tabular-nums; color: var(--text-dim); }
.dchip-row b { color: var(--text); font-weight: 700; margin-right: 4px; }
.dchip-row em { font-style: normal; font-weight: 700; }
.dchip-row em.up { color: var(--ok); }
.dchip-row em.down { color: var(--danger); }
.dchip-note { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.dchip-constraint { font-size: 11px; color: var(--danger); font-weight: 600; margin-top: 3px; }
.dchip-actions { display: flex; gap: 6px; margin-top: 6px; pointer-events: auto; }
.dchip-actions button {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: 7px;
  padding: 3px 9px;
  cursor: pointer;
}
.dchip-actions button:hover { background: rgba(45, 212, 191, 0.2); }
.dchip-actions button.danger { color: var(--danger); border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.08); }

/* ---------- Tavoitepisteet ---------- */
.goal-ring { fill: none; stroke: #fbbf24; stroke-width: 2; opacity: 0.9; }
.goal-ring2 { fill: none; stroke: #fbbf24; stroke-width: 1.2; opacity: 0.55; }
.goal-dot { fill: #fbbf24; }
.goal-marker.sel .goal-ring, .goal-marker.sel .goal-ring2 { stroke: var(--accent); }
.goal-marker.sel .goal-dot { fill: var(--accent); }
.goal-gap { stroke: rgba(251, 191, 36, 0.55); stroke-width: 1.5; stroke-dasharray: 4 4; pointer-events: none; }
.loan-badge.goal-badge { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.08); }

/* Piirtopöydän fokusrengas (wrap saa tabindexin fs-tilassa) */
body.fs .chart-wrap:focus { outline: 2px solid rgba(45, 212, 191, 0.35); outline-offset: -2px; }
body.fs .chart-wrap:focus:not(:focus-visible) { outline: none; }

/* Aloitusopasteet: kahva + kaksipäinen nuoli kohteen läpi (pelien tutoriaalityyliin) */
.guide { pointer-events: none; }
.guide-handle {
  fill: rgba(10, 14, 26, 0.85);
  stroke: var(--accent);
  stroke-width: 2;
}
.guide-arrow-path {
  stroke: var(--accent);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
}
.guide-label {
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--text);
  stroke: rgba(10, 14, 26, 0.92);
  stroke-width: 4px;
  paint-order: stroke;
  font-family: inherit;
}
.guide-bob-y { animation: guideBobY 1.5s ease-in-out infinite; }
.guide-bob-x { animation: guideBobX 1.5s ease-in-out infinite; }
@keyframes guideBobY {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(4px); }
}
@keyframes guideBobX {
  0%, 100% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
}

/* Valitun kohteen sijainti aikajanalla + tavoitepisteiden virstanpylväsviivat */
.age-line { stroke: rgba(45, 212, 191, 0.45); stroke-width: 1.2; stroke-dasharray: 3 5; pointer-events: none; }
.age-tick {
  font-size: 12px;
  font-weight: 700;
  fill: var(--accent);
  stroke: rgba(10, 14, 26, 0.95);
  stroke-width: 4px;
  paint-order: stroke;
  font-family: inherit;
}
.goal-line { stroke: rgba(251, 191, 36, 0.25); stroke-width: 1.2; stroke-dasharray: 3 5; pointer-events: none; }
.goal-line.on { stroke: rgba(251, 191, 36, 0.6); }

/* Tulostuksessa taulukko levittäytyy kokonaan — ei leikattua vierityslaatikkoa */
@media print {
  .table-scroll { overflow: visible; }
}

/* ---------- Esittelykierros: spotlight + kortti ---------- */
.tour { position: fixed; inset: 0; z-index: 200; }
.tour-hole {
  position: absolute;
  border-radius: 14px;
  /* valokeila: kaikki muu tummenee yhden laatikon varjolla */
  box-shadow: 0 0 0 200vmax rgba(6, 9, 18, 0.74);
  border: 1.5px solid rgba(45, 212, 191, 0.55);
  transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease;
  pointer-events: none;
}
.tour-hole.none { border-color: transparent; }
.tour-card {
  position: absolute;
  width: min(340px, calc(100vw - 24px));
  background: #141c33;
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: 14px;
  padding: 15px 17px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  transition: top 0.3s ease, left 0.3s ease;
}
.tour-card h3 { margin: 0 0 6px; font-size: 15px; }
.tour-card p { margin: 0 0 12px; font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.tour-dots { display: flex; gap: 5px; margin-bottom: 10px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(148, 168, 220, 0.25); }
.tour-dots i.on { background: var(--accent); }
.tour-actions { display: flex; justify-content: space-between; gap: 8px; }
.tour-actions .btn { padding: 6px 13px; font-size: 12.5px; }

/* Napautettavien kohteiden välähdysrenkaat opastustilassa (porrastettu aalto)
   + yhtenäinen hover-kieli: kaikki tartuttava syttyy osoittimen alla */
.tap-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: tapPulse 2.6s ease-out infinite;
}
@keyframes tapPulse {
  0% { opacity: 0; transform: scale(0.85); }
  10% { opacity: 0.65; }
  32% { opacity: 0; transform: scale(1.55); }
  100% { opacity: 0; transform: scale(1.55); }
}
.hover-line {
  stroke: rgba(139, 124, 246, 0.5);
  stroke-width: 4;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.goal-marker:hover .goal-ring { stroke-width: 3; opacity: 1; }
.goal-marker:hover .goal-ring2 { opacity: 0.85; }
.end-handle.hov { transform-box: fill-box; transform-origin: center; transform: scale(1.4); }

/* ＋ Lisää -valikko piirtopöydällä: kompakti kaksipalstainen ruudukko */
.fs-add-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  min-width: 300px;
}
.fs-add-menu button { padding: 8px 10px; font-size: 12.5px; white-space: nowrap; }
.fs-add-menu button .ic { margin-right: 7px; }
.fs-add-menu button.wide { grid-column: 1 / -1; color: #fbbf24; }

/* ---------- Pro-tila ---------- */

.pro-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(139, 124, 246, 0.10), rgba(45, 212, 191, 0.06));
  border: 1px solid rgba(139, 124, 246, 0.3);
  border-radius: 13px;
  font-size: 13px;
}
.pro-switch small { color: var(--text-faint); }
.pro-switch a { color: var(--accent-2); font-size: 12px; white-space: nowrap; text-decoration: none; }
.pro-switch a:hover { text-decoration: underline; }
body.pro .pro-switch { border-color: rgba(139, 124, 246, 0.55); }

.pro-tag {
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--accent-2);
  border: 1px solid rgba(139, 124, 246, 0.5);
  border-radius: 5px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 2px;
}

/* Tiiviit asetusrivit */
.pin {
  width: 100%;
  background: rgba(8, 12, 24, 0.6);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 5px 7px;
}
.pin:focus { outline: none; border-color: rgba(45, 212, 191, 0.5); }
.pgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 62px 58px 22px;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.pgrid.phead { color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px; }
.pgrid .pl, .pgrid .pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgrid .pw { color: var(--text-faint); font-size: 11.5px; text-align: right; }
.pdel {
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 13px;
  padding: 2px;
}
.pdel:hover { color: var(--danger); }
.prow { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 10px 0 6px; font-size: 12.5px; }
.pinline { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }
.pinline .pin { width: 74px; }
.psel { width: auto; }
.ptog { font-size: 13px; margin-top: 10px; }
.phl { min-width: 104px; color: var(--text-dim); }

/* Korrelaatiomatriisi */
.cgrid { display: grid; gap: 4px; align-items: center; margin-top: 8px; overflow-x: auto; padding-bottom: 4px; }
.cgrid .ch { font-size: 10px; color: var(--text-faint); text-align: center; overflow: hidden; }
.cgrid .cd { text-align: center; color: var(--text-faint); font-size: 11px; }
.cgrid .cin { width: 100%; padding: 3px 4px; font-size: 11.5px; text-align: center; }

/* Analyysit */
.ana-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); margin: 14px 0 6px; }
.ana-h small { text-transform: none; letter-spacing: 0; color: var(--text-faint); font-weight: 400; }
#ruinSvg, #susSvg { width: 100%; height: auto; display: block; }
.ana-axis { stroke: rgba(148, 168, 220, 0.25); stroke-width: 1; }
.ana-tick { font-size: 8.5px; fill: var(--text-faint); font-family: inherit; }
.ana-cur { stroke: rgba(139, 124, 246, 0.6); stroke-width: 1; stroke-dasharray: 3 3; }
.tor-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 64px; gap: 8px; align-items: center; font-size: 11.5px; color: var(--text-dim); margin-bottom: 4px; }
.tor-row .tor-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tor-bar { background: rgba(8, 12, 24, 0.6); border-radius: 4px; height: 10px; overflow: hidden; }
.tor-bar i { display: block; height: 100%; border-radius: 4px; }
.tor-bar i.pos { background: rgba(52, 211, 153, 0.7); }
.tor-bar i.neg { background: rgba(248, 113, 113, 0.7); }
.tor-v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tor-v.pos { color: var(--ok); }
.tor-v.neg { color: var(--danger); }

/* Skenaariot */
.scen-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 5px; }
.scen-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.scen-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scen-add { display: flex; gap: 8px; margin-top: 6px; }
.scen-add .pname { flex: 1; }

.stress-label { font-size: 9.5px; font-weight: 600; font-family: inherit; paint-order: stroke; stroke: rgba(10, 14, 26, 0.9); stroke-width: 3px; }

/* ---------- Perhevirta: henkilöchipit ja yhteiskäyrä ---------- */
.fam-chips { display: inline-flex; gap: 5px; margin-left: 10px; vertical-align: 1px; }
.fam-add, .fam-chip, .fam-del {
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(8, 12, 24, 0.5);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
}
.fam-add { padding: 2px 8px; opacity: 0.65; }
.fam-add:hover { opacity: 1; color: var(--accent); border-color: rgba(45, 212, 191, 0.4); }
.fam-chip:hover { color: var(--text); }
.fam-chip.on {
  color: var(--accent);
  border-color: rgba(45, 212, 191, 0.5);
  background: rgba(45, 212, 191, 0.08);
}
.fam-del { padding: 2px 7px; opacity: 0.6; }
.fam-del:hover, .fam-del.armed { color: var(--danger); border-color: rgba(248, 113, 113, 0.5); opacity: 1; }
/* Tietoa ja usein kysyttyä: indeksoitava sisältö paneelin hännillä */
.about-body p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }
.about-body strong { color: var(--text); }
.about-body details {
  margin: 0 0 6px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 7px 10px;
  background: rgba(8, 12, 24, 0.35);
}
.about-body summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  list-style-position: outside;
}
.about-body summary::marker { color: var(--accent); }
.about-body details[open] summary { margin-bottom: 6px; }
.about-body details p { margin: 0; }
.about-links { margin-top: 10px !important; }
.about-links a { color: var(--accent); text-decoration: none; }
.about-links a:hover { text-decoration: underline; }

/* Kierroksen päätös: Perustiedot-kortin hehku ohjaa katseen aloituspisteeseen */
.card.basics-glow {
  animation: basicsGlow 2.4s ease-out;
}
@keyframes basicsGlow {
  0% { box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.7), 0 0 32px rgba(45, 212, 191, 0.25); }
  60% { box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.45), 0 0 20px rgba(45, 212, 191, 0.12); }
  100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); }
}

/* Vertailupilleri: nimetty vertailukohta ja euroero graafin kulmassa */
.cmp-pill {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(10, 14, 26, 0.82);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 5px 4px 12px;
  backdrop-filter: blur(4px);
  max-width: calc(100% - 70px);
}
.cmp-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-pill b { color: var(--text); font-weight: 600; }
.cmp-pill .pos { color: var(--ok); }
.cmp-pill .neg { color: var(--danger); }
.cmp-pill button {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 999px;
}
.cmp-pill button:hover { color: var(--danger); background: rgba(248, 113, 113, 0.12); }
body.fs .cmp-pill { display: none; }
@media (max-width: 560px) {
  .cmp-pill { top: 8px; left: 8px; font-size: 11px; }
}

/* Tunnuslukukorttien delta-rivit vertailua vasten (sama kieli kuin HUDissa) */
.stat .d { margin-top: 3px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .d.up { color: var(--ok); }
.stat .d.down { color: var(--danger); }
.stat .d.flat { color: var(--text-faint); font-weight: 500; }

/* Sijoitustili: tiivis selite ja vertailunappi */
.acct-note {
  margin: 8px 2px 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-faint);
}
#acctCompareLink { margin-top: 12px; }

/* Jakodialogi: puolitetaanko hankinnat puolison lisäyksen yhteydessä */
.share-ask {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(4, 6, 14, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.share-card {
  background: #141c33;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 20px;
  width: 100%;
  max-width: 430px;
  max-height: 82vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.share-card h3 { margin: 0; font-size: 16px; }
.share-card .note { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.share-card .toggle small { display: block; color: var(--text-faint); }
.share-card .actions { display: flex; gap: 8px; margin-top: 6px; }
.share-card .actions .btn { flex: 1; }

/* Lapsichippi kantaa käyränsä värin (--kid asetetaan inline) */
.fam-chip.kid { border-color: color-mix(in srgb, var(--kid) 45%, transparent); }
.fam-chip.kid.on {
  color: var(--kid);
  border-color: color-mix(in srgb, var(--kid) 60%, transparent);
  background: color-mix(in srgb, var(--kid) 10%, transparent);
}
.sw-fam { width: 22px; height: 0; border-top: 2px solid #64748b; }
.sw-tot { width: 22px; height: 0; border-top: 2px solid #e8edf8; margin-left: 8px; }

/* Säästökyky-apuri: huomaamaton linkki, taittuva laatikko */
.saver { margin-top: 10px; font-size: 12px; }
.saver > a { color: var(--text-faint); text-decoration: none; }
.saver > a:hover { color: var(--accent); }
.saver > a small { color: var(--text-faint); }
.saver-box {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(8, 12, 24, 0.4);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.saver-box .note { margin: 2px 0 8px; }
.saver-box .note b { color: var(--accent); }

/* Perhevuoristo */
.mtn-wrap { margin-top: 8px; }
#mountainSvg { width: 100%; height: auto; display: block; }
.mtn-name { font-size: 12px; font-weight: 700; font-family: inherit; }
.mtn-tick { font-size: 10px; fill: var(--text-faint); font-family: inherit; }
#legendFamily .btn-mini { margin-left: 8px; padding: 3px 9px; font-size: 11px; }