/* =====================================================================
   SPEC-7 PROFIT CALCULATOR — STYLES (V2.2)
   Compact landscape dashboard · two-group tabs · refined neon · dark theme
   ===================================================================== */

:root{
  --primary:   #0f9562;   /* Zymace green — banner, active tabs, buttons, outlines */
  --secondary: #cfe7dc;   /* light green — outlines, KPI icon badges */
  --bg:        #eaecf1;   /* light grey canvas so white cards pop */

  --accent:    #6fbf3f;
  --good:      #2e9e4f;
  --bad:       #c0392b;
  --neutral:   #3f7fbf;

  /* themeable surfaces / text (overridden by .theme-dark) */
  --ink:       #1f1730;
  --muted:     #6b6477;
  --card:      #ffffff;
  --input-bg:  #ffffff;
  --line:      rgba(31,23,48,0.12);
  --track:     #e7e2ee;            /* slider unfilled */
  --soft:      #f3eff7;            /* seg toggles / presets bg */
  --title:     var(--primary);     /* panel/section titles */
  --pattern-stroke: %230f9562;
  --pattern-op: 0.05;
  --glow-op:   0.16;               /* neon intensity */

  --primary-glow: color-mix(in srgb, var(--primary) 30%, transparent);
  /* refined neon: thin primary ring + soft depth + faint glow */
  --neon:        0 0 0 1px var(--primary),
                 0 6px 18px rgba(20,14,30,0.08),
                 0 0 14px color-mix(in srgb, var(--primary) var(--glow-op), transparent);
  --neon-strong: 0 0 0 1.5px var(--primary),
                 0 0 18px color-mix(in srgb, var(--primary) 45%, transparent);

  --radius:    14px;
  --radius-sm: 10px;
}

/* ====================== DARK THEME (premium charcoal canvas) =========== */
body.theme-dark{
  --ink:   #ece8f4;
  --muted: #a79fbb;
  --bg:    #15121d;
  --card:  #211b2e;
  --input-bg: #2a2338;
  --line:  rgba(255,255,255,0.10);
  --track: rgba(255,255,255,0.14);
  --soft:  rgba(255,255,255,0.06);
  --title: color-mix(in srgb, var(--primary) 45%, #fff);
  --pattern-stroke: %23ffffff;
  --pattern-op: 0.05;
  --glow-op: 0.34;                 /* glow shines brighter on dark */
  --secondary: #4a4060;            /* used as subtle accent on dark */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  font-family:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--ink); background-color:var(--bg);
  background-image:
    radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 60%),
    url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='var(--pattern-stroke)' stroke-opacity='var(--pattern-op)' stroke-width='1.2'%3E%3Cpath d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z'/%3E%3Cpath d='M28 34 L56 50 L56 84 L28 100 L0 84 L0 50 Z'/%3E%3C/g%3E%3C/svg%3E");
  min-height:100vh; line-height:1.4; transition:background-color .25s ease, color .25s ease;
}
/* SVG data-URI can't read CSS vars; set the two pattern variants explicitly */
body{ background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(81,42,115,0.05), transparent 60%),
    url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230f9562' stroke-opacity='0.06' stroke-width='1.2'%3E%3Cpath d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z'/%3E%3Cpath d='M28 34 L56 50 L56 84 L28 100 L0 84 L0 50 Z'/%3E%3C/g%3E%3C/svg%3E"); }
body.theme-dark{ background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(150,110,200,0.10), transparent 60%),
    url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.2'%3E%3Cpath d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z'/%3E%3Cpath d='M28 34 L56 50 L56 84 L28 100 L0 84 L0 50 Z'/%3E%3C/g%3E%3C/svg%3E"); }

h1,h2,h3,.kpi-value{ font-family:"Sora", system-ui, sans-serif; }
em{ font-style:normal; color:var(--muted); font-weight:500; font-size:0.85em; }
a{ color:var(--title); }

/* ============================================================ BANNER */
.banner{
  background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 70%, #000) 0%, color-mix(in srgb, var(--primary) 90%, #000) 100%);
  color:#fff; border-bottom:3px solid var(--accent);
}
.banner-inner{
  max-width:1860px; margin:0 auto; padding:11px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:30px; min-width:0; }
.logo{ height:54px; width:auto; flex:0 0 auto; }
.spec7-badge-img{ height:54px; width:auto; flex:0 0 auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,0.30)); }
.title-text-block{ display:flex; flex-direction:column; justify-content:center; }
.title-text{ font-family:"Sora", sans-serif; font-size:1.55rem; font-weight:800; letter-spacing:-0.01em; color:#fff; line-height:1.04; }
.subtitle{ font-size:0.86rem; opacity:0.85; font-weight:500; margin-top:3px; }

.banner-actions{ flex:0 0 auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.unit-toggle{ display:inline-flex; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); border-radius:999px; padding:3px; gap:2px; }
.unit-btn{ border:0; background:transparent; color:#fff; font-weight:700; padding:5px 14px; border-radius:999px; cursor:pointer; font-size:0.83rem; transition:background .15s ease; }
.unit-btn.active{ background:#fff; color:var(--primary); }
.action-btn{ border:1px solid rgba(255,255,255,0.35); background:rgba(255,255,255,0.1); color:#fff; padding:7px 13px; border-radius:9px; cursor:pointer; font-family:inherit; font-weight:600; font-size:0.82rem; transition:background .15s ease, transform .1s ease, box-shadow .15s ease; }
.action-btn:hover{ background:rgba(255,255,255,0.22); }
.action-btn:active{ transform:translateY(1px); }
.action-btn.primary{ background:var(--accent); border-color:var(--accent); color:#10300a; }
.action-btn.primary:hover{ filter:brightness(1.05); box-shadow:0 0 0 3px rgba(111,191,63,0.35); }
.action-btn.dark{ background:var(--primary); border-color:var(--primary); color:#fff; }
.action-btn.dark:hover{ filter:brightness(1.1); box-shadow:0 0 0 3px var(--primary-glow); }

/* ===================================================== COUNTRY CAROUSEL */
.country-bar{ max-width:1860px; margin:0 auto; padding:12px 30px 2px; display:flex; align-items:center; gap:14px; }
.country-bar-label{ font-weight:700; color:var(--title); font-size:0.8rem; white-space:nowrap; }
.carousel{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; }
/* viewport now grows to fill the row; soft right fade so a partial chip never hard-cuts */
.flag-viewport{ overflow:hidden; flex:1 1 auto;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%); }
.flag-strip{ display:flex; gap:11px; overflow-x:auto; scroll-behavior:smooth; padding:14px 18px; scrollbar-width:none;
  scroll-snap-type:x proximity; }
.flag-strip::-webkit-scrollbar{ display:none; }
.flag-chip{ scroll-snap-align:start; }
.settings-gear{ flex:0 0 auto; margin-left:14px; width:38px; height:38px; border-radius:11px; cursor:pointer;
  border:1.5px solid var(--secondary); background:var(--card); color:var(--title); font-size:1.18rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .2s ease, background .2s ease, color .2s ease, transform .12s ease; }
.settings-gear:hover{ background:var(--primary); color:#fff; box-shadow:var(--neon-strong); transform:translateY(-1px); }
.rate-note{ font-size:0.73rem; color:var(--muted); white-space:nowrap; margin-left:12px; }
.flag-arrow{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1.5px solid var(--primary); background:var(--card); color:var(--title);
  font-size:1.35rem; line-height:1; font-weight:700; display:flex; align-items:center; justify-content:center;
  transition:box-shadow .2s ease, background .2s ease, color .2s ease, transform .12s ease;
}
.flag-arrow:hover{ background:var(--primary); color:#fff; box-shadow:var(--neon-strong); transform:translateY(-1px); }
.flag-chip{
  flex:0 0 auto; width:86px; border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(180deg, var(--card), color-mix(in srgb, var(--secondary) 16%, var(--card)));
  padding:8px 6px 7px; cursor:pointer; text-align:center;
  transition:transform .22s ease, box-shadow .22s ease, border-color .2s ease;
  transform-origin:center; will-change:transform;
}
.flag-chip:hover{ transform:scale(1.13); z-index:5; box-shadow:var(--neon); border-color:color-mix(in srgb, var(--primary) 40%, var(--line)); }
.flag-chip.active{ border-color:var(--primary); box-shadow:var(--neon); }
.flag-chip.active:hover{ box-shadow:var(--neon-strong); }
.flag-chip img{ width:52px; height:35px; object-fit:cover; border-radius:5px; display:block; margin:0 auto 5px; box-shadow:0 1px 4px rgba(0,0,0,0.22); border:1px solid rgba(0,0,0,0.10); }
.flag-name{ display:block; font-size:0.64rem; font-weight:700; color:var(--ink); line-height:1.1; }
.flag-code{ display:block; font-size:0.62rem; font-weight:600; color:var(--muted); }
.flag-chip.active .flag-code{ color:var(--title); }

/* ============================================================ LAYOUT */
.layout{
  max-width:1860px; margin:0 auto; padding:12px 30px 6px;
  display:grid; grid-template-columns:minmax(420px, 0.82fr) 1.55fr; gap:18px;
  grid-template-areas:"kpi kpi" "inputs results"; align-items:start;
}
.kpi-row{ grid-area:kpi; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.panel-area{ grid-area:inputs; display:flex; flex-direction:column; gap:16px; }
.results{ grid-area:results; display:flex; flex-direction:column; gap:14px; }

/* Left input groups: tabs + panel unified inside ONE secondary-outlined card */
.tab-group{
  display:flex; flex-direction:column; border:1.5px solid var(--secondary);
  border-radius:var(--radius); background:var(--card); overflow:hidden;
  box-shadow:0 6px 18px rgba(20,14,30,0.06),
             0 0 12px color-mix(in srgb, var(--secondary) 45%, transparent);
}

/* ============================================================== CARDS
   Refined neon: thin primary ring + soft depth + faint glow. */
.card{ background:var(--card); border-radius:var(--radius); padding:16px 18px; border:1px solid transparent; box-shadow:var(--neon); }

.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.panel-title{ font-size:0.98rem; font-weight:700; color:var(--title); display:flex; align-items:center; gap:9px; margin:0; }
.chart-card .panel-title, .matrix-card .panel-title{ margin-bottom:8px; }
.opt-tag{ font-size:0.6rem; letter-spacing:0.05em; text-transform:uppercase; background:color-mix(in srgb, var(--primary) 16%, var(--card)); color:var(--title); padding:2px 8px; border-radius:999px; font-weight:700; border:1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.cur-pill{ margin-left:auto; font-size:0.7rem; font-weight:700; background:var(--primary); color:#fff; padding:3px 10px; border-radius:999px; letter-spacing:0.04em; }
.hint{ font-size:0.75rem; color:var(--muted); margin:-2px 0 10px; }
.hint strong{ color:var(--bad); }
.hint-inline{ font-size:0.72rem; color:var(--muted); font-weight:500; }
.divider{ border:0; border-top:1px dashed var(--line); margin:6px 0 12px; }
.panel.is-excluded .fields{ opacity:0.65; }

/* include-in-calculation switch */
.include-switch{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; }
.include-switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch-track{ width:40px; height:22px; border-radius:999px; background:var(--track); position:relative; transition:background .2s ease; flex:0 0 auto; }
.switch-thumb{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.3); transition:transform .2s ease; }
.include-switch input:checked + .switch-track{ background:var(--accent); }
.include-switch input:checked + .switch-track .switch-thumb{ transform:translateX(18px); }
.switch-text{ font-size:0.74rem; font-weight:700; color:var(--muted); }
.include-switch input:checked ~ .switch-text{ color:var(--good); }

/* ===================================================== TWO-GROUP TABS
   Tabs form the header strip of their group's secondary-outlined card;
   the active panel sits flush below them as the card body. */
.tab-group .tabbar{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0; margin:0;
  background:color-mix(in srgb, var(--secondary) 22%, var(--card));
  border-bottom:1.5px solid var(--secondary);
}
.tab-group .tab{
  border:0; border-right:1px solid color-mix(in srgb, var(--secondary) 65%, transparent);
  border-radius:0; background:transparent; color:var(--title);
  padding:11px 8px; cursor:pointer; font-family:inherit; font-weight:600; font-size:0.8rem;
  line-height:1.12; transition:background .15s ease, color .15s ease; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tab-group .tab:last-child{ border-right:0; }
.tab-group .tab:hover{ background:color-mix(in srgb, var(--secondary) 38%, var(--card)); }
.tab-group .tab.active{ background:var(--primary); color:#fff; box-shadow:inset 0 -3px 0 color-mix(in srgb, #000 18%, var(--primary)); }
.tab-group .tab.excluded:not(.active){ opacity:0.5; }
.tab-group .tab.excluded::after{ content:" ○"; font-size:0.68rem; }
/* panel sits flush as the body of the group card (no own border) */
.tab-group .card.panel{ border:0; box-shadow:none; border-radius:0; background:transparent; padding:15px 18px; }

/* primary accent tick before section titles */
.panel-title::before{ content:""; width:4px; height:0.95em; border-radius:2px; background:var(--primary); flex:0 0 auto; }

/* =========================================================== SEG TOGGLE */
.seg-toggle{ display:flex; background:var(--soft); border:1px solid var(--line); border-radius:11px; padding:4px; gap:4px; margin-bottom:12px; }
.seg{ flex:1; border:0; background:transparent; color:var(--title); font-family:inherit; font-weight:700; font-size:0.78rem; padding:7px 6px; border-radius:8px; cursor:pointer; transition:all .15s ease; }
.seg.active{ background:var(--primary); color:#fff; box-shadow:0 2px 8px var(--primary-glow); }
.milk-mode.hidden{ display:none; }

/* ====================================================== FIELDS (2-col) */
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
/* Health panel: flow DOWN then ACROSS so each column is one group
   (left = treatable trio, right = non-treatable trio) */
.fields-grouped{ grid-template-rows:repeat(3, auto); grid-auto-flow:column; }
.field{ margin:0; min-width:0; }
.field.wide{ grid-column:1 / -1; }       /* full-width rows (sliders w/ presets, lead inputs) */
.field label{ display:block; font-weight:600; font-size:0.82rem; margin-bottom:6px; color:var(--ink); }
.unit-label, .suffix-static{ color:var(--muted); font-weight:500; font-size:0.78rem; }
.control-row{ display:flex; align-items:center; gap:10px; }
.slider{
  flex:1; min-width:0; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; cursor:pointer;
  background:linear-gradient(90deg, var(--primary) 0%, var(--primary) var(--fill,50%), var(--track) var(--fill,50%), var(--track) 100%);
}
.slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:17px; height:17px; border-radius:50%; background:#fff; border:3px solid var(--primary); cursor:pointer; box-shadow:0 0 0 3px var(--primary-glow); transition:box-shadow .15s ease; }
.slider::-webkit-slider-thumb:hover{ box-shadow:0 0 0 5px var(--primary-glow); }
.slider::-moz-range-thumb{ width:17px; height:17px; border-radius:50%; background:#fff; border:3px solid var(--primary); cursor:pointer; box-shadow:0 0 0 3px var(--primary-glow); }
.num, .text-input{
  width:88px; padding:7px 9px; border-radius:var(--radius-sm); border:1px solid var(--line);
  font-family:inherit; font-size:0.88rem; font-weight:600; text-align:right; color:var(--ink); background:var(--input-bg);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.text-input{ width:100%; text-align:left; font-weight:500; }
.num:focus, .text-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.field.two .num{ width:78px; }

/* ---- research dataset select ---- */
.select-input{
  width:100%; padding:9px 34px 9px 11px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--input-bg); color:var(--ink);
  font-family:inherit; font-size:0.86rem; font-weight:600; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f9562' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  transition:border-color .15s ease, box-shadow .15s ease; margin-bottom:8px;
}
.select-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }

/* ---- derived (read-only) Zymace cost ---- */
.derived-field .derived-stat{
  display:flex; align-items:baseline; padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--soft); border:1px dashed color-mix(in srgb, var(--primary) 35%, transparent);
}
.derived-value{ font-size:1.15rem; font-weight:800; color:var(--primary); letter-spacing:0.2px; }
body.theme-dark .derived-value{ color:color-mix(in srgb, var(--primary) 55%, #fff); }

.rate-editor{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:0.9rem; margin-bottom:8px; }
.rate-editor .num{ width:120px; }
#ratePrefix{ color:var(--muted); }
#rateCode{ color:var(--title); font-weight:700; }

.preset-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px; }
.preset{ border:1px solid color-mix(in srgb, var(--primary) 25%, var(--card)); background:var(--soft); color:var(--title); padding:4px 9px; border-radius:8px; cursor:pointer; font-family:inherit; font-weight:600; font-size:0.72rem; transition:all .12s ease; }
.preset:hover{ background:var(--primary); color:#fff; }

.color-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:6px 0 12px; }
.color-field{ text-align:center; }
.color-field label{ font-size:0.78rem; margin-bottom:6px; color:var(--ink); }
.color-field input[type=color]{ width:100%; height:40px; border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; background:var(--card); padding:3px; }

/* =============================================================== KPIs */
.kpi{ padding:14px 16px; display:flex; align-items:center; gap:14px; box-shadow:var(--neon); }
.kpi-icon{ width:46px; height:46px; flex:0 0 auto; border-radius:13px; display:flex; align-items:center; justify-content:center;
  color:var(--title); background:color-mix(in srgb, var(--primary) 12%, var(--card));
  border:1px solid color-mix(in srgb, var(--primary) 22%, transparent); }
.kpi-icon svg{ width:25px; height:25px; }
.kpi-icon img{ width:27px; height:27px; object-fit:contain; }   /* used if you swap in an <img> icon */
.kpi-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.kpi-label{ font-size:0.8rem; color:var(--title); font-weight:700; }
.kpi-value{ font-size:1.7rem; font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1.04; color:var(--ink); }
.kpi-sub{ font-size:0.76rem; color:var(--muted); font-weight:600; }
.kpi-value.pos{ color:var(--good); } .kpi-value.neg{ color:var(--bad); }

/* ============================================================== CHART */
.chart{ display:flex; align-items:flex-end; justify-content:space-around; gap:8px; height:238px; padding:36px 18px 0;
  border-bottom:2px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  background-image:linear-gradient(var(--line) 1px, transparent 1px); background-size:100% 25%; }
.bar-group{ flex:1 1 0; max-width:162px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:7px; }
.bar-wrap{ flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; }
.bar{ width:80%; max-width:94px; position:relative; transition:height .45s cubic-bezier(.22,1,.36,1); }
.bar-surface{ position:absolute; inset:0; border-radius:11px 11px 4px 4px; overflow:hidden; box-shadow:0 10px 22px rgba(20,14,30,0.20), inset 0 -10px 18px rgba(0,0,0,0.12); }
.bar-pos .bar-surface{ background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent) 45%, color-mix(in srgb, var(--accent) 70%, #000)); }
.bar-net .bar-surface{ background:linear-gradient(180deg, color-mix(in srgb, var(--good) 78%, #fff), var(--good) 45%, color-mix(in srgb, var(--good) 68%, #000)); }
.bar-neg .bar-surface{ background:linear-gradient(180deg, color-mix(in srgb, var(--bad) 75%, #fff), var(--bad) 45%, color-mix(in srgb, var(--bad) 70%, #000)); }
.bar-neu .bar-surface{ background:linear-gradient(180deg, color-mix(in srgb, var(--neutral) 78%, #fff), var(--neutral) 45%, color-mix(in srgb, var(--neutral) 68%, #000)); }
.bar-gloss{ position:absolute; top:0; left:8%; width:34%; height:100%; background:linear-gradient(90deg, rgba(255,255,255,0.55), rgba(255,255,255,0.05)); border-radius:11px; pointer-events:none; }
.bar-cap{ position:absolute; top:0; left:0; right:0; height:11px; background:linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0)); border-radius:11px 11px 0 0; pointer-events:none; }
.bar .val{ position:absolute; top:-24px; left:50%; transform:translateX(-50%); font-family:"Sora", sans-serif; font-size:0.76rem; font-weight:800; white-space:nowrap; color:var(--ink); font-variant-numeric:tabular-nums; }
.bar-label{ font-size:0.74rem; font-weight:600; color:var(--muted); text-align:center; }

/* Waterfall toggle (tickmark in the chart header) */
.wf-toggle{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
  font-family:"Manrope",sans-serif; font-size:0.76rem; font-weight:700; color:var(--title);
  padding:4px 10px 4px 8px; border:1px solid var(--secondary); border-radius:999px; background:var(--card); }
.wf-toggle input{ width:15px; height:15px; accent-color:var(--primary); cursor:pointer; margin:0; }

/* ---- WATERFALL view (shares the glassy bar surfaces) ---- */
.chart-wf{ display:block; padding:0; background:none; border-bottom:0; }
.wf{ position:relative; width:100%; height:100%; }
.wf-bars{ position:absolute; left:8px; right:8px; top:30px; bottom:38px; }
.wf-baseline{ position:absolute; left:0; right:0; height:0; border-top:2px solid color-mix(in srgb, var(--primary) 32%, var(--line)); }
.wf-link{ position:absolute; height:0; border-top:2px dashed color-mix(in srgb, var(--primary) 38%, transparent); }
.wf .bar.wf-bar{ position:absolute; width:auto; max-width:none; min-height:6px; }
.wf-val{ position:absolute; left:50%; bottom:100%; transform:translate(-50%,-4px); font-family:"Sora",sans-serif;
  font-weight:800; font-size:0.74rem; white-space:nowrap; color:var(--ink); font-variant-numeric:tabular-nums; }
.wf-cats{ position:absolute; left:8px; right:8px; bottom:6px; display:flex; }
.wf-cat{ flex:1; text-align:center; font-size:0.73rem; font-weight:600; color:var(--muted); line-height:1.12; }

/* ============================================================= MATRIX */
.matrix-scroll{ overflow-x:auto; }
.matrix{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; min-width:560px; }
.matrix th, .matrix td{ padding:9px 12px; text-align:right; font-size:0.88rem; }
.matrix th:first-child, .matrix td:first-child{ text-align:left; font-weight:600; }
.matrix thead th{ color:#fff; background:var(--primary); font-weight:700; font-size:0.8rem; }
.matrix thead th:first-child{ border-radius:9px 0 0 0; }
.matrix thead th:last-child{ border-radius:0 9px 0 0; }
.matrix tbody tr{ border-bottom:1px solid var(--line); }
.matrix tbody tr.total{ font-weight:800; background:color-mix(in srgb, var(--primary) 10%, var(--card)); }
.matrix tbody tr.total td{ font-size:0.95rem; border-top:2px solid var(--primary); color:var(--ink); }
.matrix tbody td{ color:var(--ink); }
.money.pos{ color:var(--good); } .money.neg{ color:var(--bad); }
.breakeven{ margin-top:12px; font-size:0.84rem; color:var(--muted); font-weight:600; }
.breakeven b{ color:var(--title); }

/* ============================================================= FOOTER */
.footer{ max-width:1860px; margin:10px auto 0; padding:12px 30px 16px; border-top:1px solid var(--line); }
.footer-text{ text-align:left; }
.credit{ font-size:0.82rem; color:var(--ink); font-weight:600; margin:0 0 3px; }
.credit a{ color:var(--title); font-weight:700; text-decoration:none; }
.credit a:hover{ text-decoration:underline; }
.disclaimer{ font-size:0.69rem; color:var(--muted); line-height:1.45; max-width:none; margin:0; }
.footer-tools{ flex:0 0 auto; }

/* ============================================================= MODAL */
.modal{ position:fixed; inset:0; background:rgba(10,7,16,0.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:80; padding:20px; }
.modal.open{ display:flex; }
.modal-card{ background:var(--card); border-radius:var(--radius); width:100%; max-width:460px; box-shadow:var(--neon-strong); overflow:hidden; animation:modalIn .2s ease; border:1px solid var(--primary); }
@keyframes modalIn{ from{ transform:translateY(12px); opacity:0; } to{ transform:none; opacity:1; } }
.modal-head{ display:flex; align-items:center; justify-content:space-between; background:var(--primary); color:#fff; padding:13px 18px; }
.modal-head h3{ font-size:1.02rem; font-weight:700; }
.modal-close{ background:transparent; border:0; color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; padding:0 4px; }
.modal-body{ padding:18px; }
.modal-body .field{ margin-bottom:14px; }
.modal-body label{ display:block; font-weight:600; font-size:0.84rem; margin-bottom:6px; color:var(--ink); }

/* =============================================================== TOAST */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--primary); color:#fff; padding:11px 22px; border-radius:11px; font-weight:600; font-size:0.9rem; box-shadow:var(--neon-strong); opacity:0; pointer-events:none; transition:all .25s ease; z-index:90; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.panel.hidden{ display:none; }

/* ====================================================== RESPONSIVE */
@media (max-width:1120px){
  .layout{ grid-template-columns:1fr; grid-template-areas:"kpi" "inputs" "results"; }
  .kpi-row{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:900px){
  .brand{ gap:20px; } .logo, .spec7-badge-img{ height:48px; } .title-text{ font-size:1.35rem; }
  .kpi-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .banner-inner{ justify-content:center; gap:12px; padding:11px 16px; }
  .brand{ flex:1 1 100%; justify-content:center; }
  .banner-actions{ flex:1 1 100%; justify-content:center; }
}
@media (max-width:680px){
  .country-bar, .layout, .footer{ padding-left:14px; padding-right:14px; }
  .country-bar{ flex-wrap:wrap; }
  .kpi-row{ grid-template-columns:1fr 1fr; gap:10px; }
  .kpi-value{ font-size:1.35rem; }
  .fields{ grid-template-columns:1fr; }     /* stack fields on phones */
  .fields-grouped{ grid-auto-flow:row; grid-template-rows:none; }
  .field.two .num{ width:88px; }
  .chart{ gap:10px; height:200px; padding-top:36px; }
  .rate-note{ display:none; }
  .footer{ flex-direction:column; }
  .tab{ font-size:0.72rem; padding:8px 5px; }
}
@media (max-width:460px){
  .kpi-row{ grid-template-columns:1fr; }
  .brand{ gap:14px; } .logo, .spec7-badge-img{ height:42px; } .title-text{ font-size:1.15rem; }
  .action-btn{ padding:6px 10px; font-size:0.77rem; }
}

/* ========================================================== PRINT / PDF */
@media print{
  @page{ size:landscape; margin:12mm; }
  body, body.theme-dark{ background:#fff !important; color:#1f1730 !important;
    --ink:#1f1730; --card:#fff; --muted:#555; --line:#ddd; }
  .banner{ box-shadow:none; }
  .banner-actions, .preset-row, .seg-toggle, .rate-editor, .flag-arrow,
  .footer-tools, .include-switch, .slider, .toast, .modal, .settings-gear, .wf-toggle,
  #btnResetColors, #btnRefreshRates{ display:none !important; }
  .country-bar{ padding-bottom:0; } .flag-strip{ flex-wrap:wrap; }
  .tabbar{ display:none !important; }
  .panel.tab-panel.hidden{ display:block !important; }
  .card{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; margin-bottom:10px; }
  .layout{ display:block; } .panel-area, .results, .kpi-row{ display:block; }
  .num{ border:0; padding:0; width:auto; }
  .bar .bar-surface{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}