/* Design styles (1.8.0): the SHAPE of the interface, independent of the colour preset.
   body.style-<key>; 'soft' = the original look (no overrides). Colours still come from
   the preset variables (--accent, --ink, ...), so every colour works with every style.
   Owner 1405/07/18: offered to visitors = soft (default), neu, glass, dark.
   1.9.10 (owner 1405/08/09, from six reference images): mint3d, sand, vivid, neublue, terra, pastel.
   These six carry their OWN palette (the owner asked for the images' colours), so they override
   the preset colours; --on-accent is the text colour on an accent background. */

/* visitor style switcher (footer, every page) */
.style-switch{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:8px 0 2px}
.style-switch span{font-size:11px}
.style-switch a{padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:11.5px}
.style-switch a.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}

/* ---------------- dark: market-terminal look; preset accent kept, lifted for contrast ---------------- */
.style-dark{--bg:#0e1316;--card:#161d21;--ink:#e7eef0;--muted:#8b9aa1;--line:#26323a;
  --accent-ink:color-mix(in srgb,var(--accent) 45%,#ffffff);--accent2:color-mix(in srgb,var(--accent) 22%,#161d21);
  --up:#3fcf95;--down:#ff6b5e;--warn:#e9b04b;--shadow:0 1px 0 rgba(255,255,255,.03) inset;color-scheme:dark}
.style-dark .brand-logo-box,.style-dark .logo-preview-box{background:#fff}
.style-dark .bottom-nav{background:rgba(14,19,22,.94)}
.style-dark .panel input,.style-dark .panel select,.style-dark .panel textarea,.style-dark .color-field,.style-dark .month-form select{background:#0e1316;color:var(--ink)}
.style-dark .badge.stale{background:#3a2e14}.style-dark .badge.warn,.style-dark .badge.err{background:#3d1a17}.style-dark .badge.ok{background:#12352a}
.style-dark .kind-label.report{background:#1d2b4d;color:#9db8ff}.style-dark .kind-label.analysis{background:#33204a;color:#d5a8f2}
.style-dark .kind-tabs a.active{background:var(--ink);color:var(--bg)}
.style-dark .preview-bar{background:#3a2e14}
.style-dark .clickable:hover{box-shadow:0 0 0 1px var(--accent)}
.style-dark .c-price,.style-dark .m-value{font-variant-numeric:tabular-nums}
.style-dark .chart-tip{box-shadow:0 8px 24px rgba(0,0,0,.5)}
.style-dark .feature.no-img{background:linear-gradient(135deg,var(--accent),#0b1a17)}

/* ---------------- glass: translucent cards over a soft colour field ---------------- */
.style-glass{--card:rgba(255,255,255,.5);--line:rgba(255,255,255,.8);--radius:20px;
  --shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 30px rgba(20,35,60,.10)}
body.style-glass{background:
  radial-gradient(700px 520px at 92% 4%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%),
  radial-gradient(760px 560px at 6% 38%,rgba(120,150,255,.45),transparent 70%),
  radial-gradient(680px 520px at 70% 92%,rgba(255,170,120,.35),transparent 70%),
  linear-gradient(180deg,#eef3f7,#e6ecf3);background-attachment:fixed}
:is(.style-glass,.style-pastel) :is(.metric-card,.commodity-card,.panel,.alert,.co-card,.news-search,.vs-card,.chart-tip,.admin-stats div,.admin-menu){backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.style-glass .c-rows>div,.style-glass .m-meta{border-top-color:rgba(20,35,60,.10)}
.style-glass th,.style-glass td{border-bottom-color:rgba(20,35,60,.10)}
.style-glass .vs-card,.style-glass .guide,.style-glass .storage-box,.style-glass .chg,.style-glass .findings li{background:rgba(255,255,255,.45)}
.style-glass .range-tabs{background:rgba(255,255,255,.4)}
.style-glass .bottom-nav{background:rgba(255,255,255,.6);backdrop-filter:blur(16px)}
.style-glass .chart .grid{stroke:rgba(20,35,60,.10)}
.style-glass .kind-tabs{background:transparent}
.style-glass .panel input,.style-glass .panel select,.style-glass .panel textarea{background:rgba(255,255,255,.8)}

/* ---------------- neumorphism (Soft UI): same-colour surfaces shaped by light + shadow ----------------
   Readability fix over the classic look: darker ink and muted text, accent text darkened,
   numbers bold, charts in an inset "well" with visible grid lines. */
.style-neu{--bg:#e4e9ef;--card:#e4e9ef;--line:#cdd4dc;--ink:#14202b;--muted:#4b5763;--radius:22px;
  --accent-ink:color-mix(in srgb,var(--accent) 80%,#000);--accent2:#e4e9ef;
  --neu-out:7px 7px 16px #c2c9d2,-7px -7px 16px #ffffff;--neu-sm:4px 4px 9px #c2c9d2,-4px -4px 9px #ffffff;
  --neu-in:inset 4px 4px 9px #c2c9d2,inset -4px -4px 9px #ffffff;--shadow:var(--neu-out)}
:is(.style-neu,.style-neublue) .metric-card,:is(.style-neu,.style-neublue) .commodity-card,:is(.style-neu,.style-neublue) .panel,:is(.style-neu,.style-neublue) .alert,:is(.style-neu,.style-neublue) .co-card,
:is(.style-neu,.style-neublue) .admin-stats div,:is(.style-neu,.style-neublue) .news-search{border:0;box-shadow:var(--neu-out)}
:is(.style-neu,.style-neublue) .grid{gap:12px}
@media (min-width:640px){:is(.style-neu,.style-neublue) .grid{gap:18px}}
:is(.style-neu,.style-neublue) .brand-mark{background:var(--bg);color:var(--accent-ink);box-shadow:var(--neu-sm);border-radius:16px}
:is(.style-neu,.style-neublue) .brand-logo-box{border:0;box-shadow:var(--neu-sm)}
:is(.style-neu,.style-neublue) .top-nav a{border-radius:12px}
:is(.style-neu,.style-neublue) .top-nav a:hover,:is(.style-neu,.style-neublue) .top-nav a.nav-news{background:var(--bg);box-shadow:var(--neu-sm);color:var(--accent-ink)}
:is(.style-neu,.style-neublue) .home-btn,:is(.style-neu,.style-neublue) .news-chip{background:var(--bg);color:var(--accent-ink);box-shadow:var(--neu-sm)}
:is(.style-neu,.style-neublue) .m-value,:is(.style-neu,.style-neublue) .c-price,:is(.style-neu,.style-neublue) .co-big,:is(.style-neu,.style-neublue) .hero-number{color:#0b141c}
:is(.style-neu,.style-neublue) .c-rows dd:not(.up):not(.down){color:#0b141c}
:is(.style-neu,.style-neublue) .c-rows>div,:is(.style-neu,.style-neublue) .m-meta{border-top:1px solid #cfd6de;box-shadow:0 -1px 0 #f7f9fb inset}
:is(.style-neu,.style-neublue) .pill,:is(.style-neu,.style-neublue) .badge{background:var(--bg);box-shadow:var(--neu-in)}
:is(.style-neu,.style-neublue) .clickable:hover{box-shadow:9px 9px 20px #b9c1cb,-9px -9px 20px #fff}
:is(.style-neu,.style-neublue) .clickable:active{box-shadow:var(--neu-in);transform:none}
:is(.style-neu,.style-neublue) .range-tabs{background:var(--bg);border:0;box-shadow:var(--neu-in);border-radius:14px;padding:4px}
:is(.style-neu,.style-neublue) .range-tabs a.active{background:var(--bg);box-shadow:var(--neu-sm);color:var(--accent-ink)}
:is(.style-neu,.style-neublue) .chart-wrap{padding:10px 8px 6px;border-radius:16px;box-shadow:var(--neu-in)}
:is(.style-neu,.style-neublue) .chart .grid{stroke:#c3cad3}
:is(.style-neu,.style-neublue) .chart .ylab,:is(.style-neu,.style-neublue) .chart .xlab{fill:#3d4853}
:is(.style-neu,.style-neublue) .chart-empty{border:0;box-shadow:var(--neu-in)}
:is(.style-neu,.style-neublue) .vs-card,:is(.style-neu,.style-neublue) .guide,:is(.style-neu,.style-neublue) .storage-box,:is(.style-neu,.style-neublue) .chg,:is(.style-neu,.style-neublue) .findings li,:is(.style-neu,.style-neublue) .vs-verdict{background:var(--bg);border:0;box-shadow:var(--neu-in)}
:is(.style-neu,.style-neublue) .panel input,:is(.style-neu,.style-neublue) .panel select,:is(.style-neu,.style-neublue) .panel textarea,:is(.style-neu,.style-neublue) .color-field,:is(.style-neu,.style-neublue) .month-form select{background:var(--bg);border:0;box-shadow:var(--neu-in)}
:is(.style-neu,.style-neublue) .panel button,:is(.style-neu,.style-neublue) .btn{box-shadow:var(--neu-sm)}
:is(.style-neu,.style-neublue) .tab-arrow,:is(.style-neu,.style-neublue) .co-tabs a,:is(.style-neu,.style-neublue) .chip-row a,:is(.style-neu,.style-neublue) .kind-tabs a,:is(.style-neu,.style-neublue) .tag-row a{background:var(--bg);border:0;box-shadow:var(--neu-sm);color:var(--ink)}
:is(.style-neu,.style-neublue) .co-tabs a.active,:is(.style-neu,.style-neublue) .chip-row a.active,:is(.style-neu,.style-neublue) .kind-tabs a.active,:is(.style-neu,.style-neublue) .tag-row a.active{background:var(--bg);color:var(--accent-ink);box-shadow:var(--neu-in)}
:is(.style-neu,.style-neublue) .kind-tabs{background:transparent}
:is(.style-neu,.style-neublue) .bottom-nav{background:var(--bg);border-top:0;box-shadow:0 -6px 16px #c9d0d8}
:is(.style-neu,.style-neublue) .chart-tip{border:0;background:var(--bg);box-shadow:var(--neu-out)}
:is(.style-neu,.style-neublue) th,:is(.style-neu,.style-neublue) td{border-bottom-color:#cdd4dc}
:is(.style-neu,.style-neublue) th{color:var(--ink)}
:is(.style-neu,.style-neublue) .admin-menu a{background:var(--bg);border:0;box-shadow:var(--neu-sm)}
:is(.style-neu,.style-neublue) .admin-menu a.on{background:var(--bg);color:var(--accent-ink);box-shadow:var(--neu-in)}
@media (min-width:980px){:is(.style-neu,.style-neublue) .admin-menu{border:0;box-shadow:var(--neu-out)}:is(.style-neu,.style-neublue) .admin-menu a{box-shadow:none}:is(.style-neu,.style-neublue) .admin-menu a.on{box-shadow:var(--neu-in)}}

/* ======================= 1.9.10: six styles from the owner's reference images ======================= */
/* text on an accent background: dark where the accent is light (mint, amber), white elsewhere */
:is(.style-mint3d,.style-sand,.style-vivid,.style-neublue,.style-terra,.style-pastel) :is(.brand-mark,.panel button,.news-chip,.news-search button,.tag-row a.active,.btn,.home-btn,.co-tabs a.active,.chip-row a.active,.admin-menu a.on,.style-switch a.active){color:var(--on-accent)}
/* shared pill shape for actions (images 1, 2, 6) */
:is(.style-mint3d,.style-sand,.style-pastel,.style-terra) :is(.panel button,.btn,.news-search button){border-radius:999px}

/* ---------------- mint3d (image 1): off-white clay, mint primary, raised 3D surfaces, mint glow ---------------- */
.style-mint3d{--bg:#ecebe8;--card:#f7f6f3;--ink:#25292b;--muted:#62676a;--line:#dddad4;--radius:22px;
  --accent:#4cc9a0;--accent2:#ddf3ea;--accent-ink:#127556;--on-accent:#0d3a2c;
  --shadow:inset 0 1px 0 #fff,inset 0 -3px 6px rgba(60,55,45,.06),0 2px 2px rgba(60,55,45,.05),0 12px 24px rgba(60,55,45,.13);
  --glow:0 0 0 3px rgba(76,201,160,.28),0 6px 18px rgba(76,201,160,.45)}
.style-mint3d :is(.metric-card,.commodity-card,.panel,.alert,.co-card,.news-search,.admin-stats div){border-color:#fff}
.style-mint3d .brand-mark{border-radius:18px;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 6px 14px rgba(76,201,160,.45)}
.style-mint3d :is(.btn,.panel button,.home-btn,.news-chip){box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 0 #36a582,0 8px 16px rgba(76,201,160,.35)}
.style-mint3d :is(.btn,.panel button):hover{box-shadow:var(--glow)}
.style-mint3d .range-tabs{background:#e0ded9;border:0;border-radius:999px;padding:4px;box-shadow:inset 0 2px 5px rgba(60,55,45,.12)}
.style-mint3d .range-tabs a{border-radius:999px}
.style-mint3d .range-tabs a.active{background:var(--accent);color:var(--on-accent);box-shadow:var(--glow)}
.style-mint3d :is(.co-tabs a,.chip-row a,.tag-row a,.kind-tabs a){border-radius:999px;background:var(--card);box-shadow:0 3px 8px rgba(60,55,45,.12)}
.style-mint3d :is(.co-tabs a.active,.chip-row a.active,.tag-row a.active){box-shadow:var(--glow)}
.style-mint3d :is(.pill,.badge){border-radius:999px}
.style-mint3d .badge.ok{background:#cdf0e2;color:#0f5c44}.style-mint3d .badge.stale{background:#f7ecc2;color:#6b5200}
.style-mint3d :is(.badge.warn,.badge.err){background:#f7d6d4;color:#8a1f19}
.style-mint3d :is(.panel input,.panel select,.panel textarea,.color-field){border-radius:16px;box-shadow:inset 0 2px 5px rgba(60,55,45,.10)}
.style-mint3d :is(.panel input,.panel select,.panel textarea):focus{outline:0;border-color:var(--accent);box-shadow:var(--glow)}
.style-mint3d .clickable:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 16px 30px rgba(60,55,45,.18)}
.style-mint3d .bottom-nav{background:rgba(247,246,243,.95);border-top:0;box-shadow:0 -8px 20px rgba(60,55,45,.10)}

/* ---------------- sand (image 2): warm sand surfaces, orange primary, teal glow for the selected state ---------------- */
.style-sand{--bg:#e9e2d9;--card:#f5f0ea;--ink:#2a2420;--muted:#6e6255;--line:#ddd3c6;--radius:24px;
  --accent:#d9622a;--accent2:#f7e2d3;--accent-ink:#a9481a;--on-accent:#fff;
  --shadow:inset 0 1px 0 #fff,0 3px 0 #d8cdbf,0 16px 28px rgba(90,65,40,.16);
  --teal:#2fd6bf;--teal-glow:0 0 0 2px #2fd6bf,0 0 16px rgba(47,214,191,.6)}
body.style-sand{background:radial-gradient(900px 600px at 15% 0%,#f5efe8,transparent 70%),linear-gradient(160deg,#ece5dc,#ddd2c5);background-attachment:fixed}
.style-sand :is(.btn,.panel button,.home-btn,.news-chip){background:linear-gradient(180deg,#ec8048,#d45a22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px rgba(217,98,42,.38)}
.style-sand .range-tabs{background:#e2d9cd;border:0;border-radius:999px;padding:4px;box-shadow:inset 0 2px 6px rgba(90,65,40,.15)}
.style-sand .range-tabs a{border-radius:999px}
.style-sand .range-tabs a.active{background:#1e3a39;color:#bff6ec;box-shadow:var(--teal-glow)}
.style-sand :is(.co-tabs a,.chip-row a,.tag-row a,.kind-tabs a){border-radius:999px;background:var(--card);border-color:#e4dace;box-shadow:0 3px 0 #d8cdbf}
.style-sand :is(.co-tabs a.active,.chip-row a.active,.tag-row a.active){background:var(--accent)}
.style-sand :is(.panel input,.panel select,.panel textarea):focus{outline:0;border-color:var(--teal);box-shadow:var(--teal-glow)}
.style-sand .brand-mark{background:linear-gradient(180deg,#ec8048,#d45a22);border-radius:16px;box-shadow:0 6px 14px rgba(217,98,42,.38)}
.style-sand .clickable:hover{transform:translateY(-2px)}
.style-sand .bottom-nav{background:rgba(245,240,234,.95);border-top-color:#ddd3c6}

/* ---------------- vivid (image 3): deep navy-violet night, amber + teal accents, gradient highlights ---------------- */
.style-vivid{--bg:#1c2240;--card:#262e50;--ink:#eef1fb;--muted:#a0a8c8;--line:#363f66;--radius:20px;
  --accent:#f6a524;--accent2:#3a3550;--accent-ink:#ffc461;--on-accent:#2a1800;
  --up:#3fdcaf;--down:#ff7f70;--warn:#ffc461;--shadow:0 12px 30px rgba(5,8,25,.45);color-scheme:dark}
body.style-vivid{background:
  radial-gradient(700px 500px at 100% 0%,rgba(47,214,170,.28),transparent 70%),
  radial-gradient(800px 600px at 0% 100%,rgba(140,80,220,.35),transparent 70%),
  linear-gradient(180deg,#232a4c,#1a1f3b);background-attachment:fixed}
.style-vivid :is(.btn,.panel button,.home-btn,.news-chip,.brand-mark){background:linear-gradient(135deg,#ffc94a,#ff8a3d);border-color:transparent}
.style-vivid :is(.co-tabs a.active,.chip-row a.active,.tag-row a.active,.admin-menu a.on){background:linear-gradient(135deg,#ffc94a,#ff8a3d);border-color:transparent}
.style-vivid .range-tabs{background:#1a2140;border-color:#363f66}
.style-vivid .range-tabs a.active{background:linear-gradient(135deg,#2fd6aa,#1aa0b8);color:#05211d}
.style-vivid .commodity-card .c-head{border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#2fd6aa,#f6a524) 1}
.style-vivid .brand-logo-box,.style-vivid .logo-preview-box{background:#fff}
.style-vivid .bottom-nav{background:rgba(28,34,64,.95);border-top-color:#363f66}
.style-vivid :is(.panel input,.panel select,.panel textarea,.color-field,.month-form select){background:#1a2140;color:var(--ink)}
.style-vivid .badge.stale{background:#4a3a16}.style-vivid :is(.badge.warn,.badge.err){background:#4a1f2a}.style-vivid .badge.ok{background:#14403a}
.style-vivid .kind-label.report{background:#1d2b5d;color:#a8c0ff}.style-vivid .kind-label.analysis{background:#3a2160;color:#dcb0ff}
.style-vivid .kind-tabs a.active{background:var(--ink);color:var(--bg)}
.style-vivid .preview-bar{background:#4a3a16}
.style-vivid .clickable:hover{box-shadow:0 0 0 1px #f6a524,0 14px 34px rgba(5,8,25,.55)}
.style-vivid .chart-tip{box-shadow:0 8px 24px rgba(0,0,0,.5)}
.style-vivid .feature.no-img{background:linear-gradient(135deg,#2fd6aa,#5a3fc0)}

/* ---------------- neublue (image 4): grey Soft UI (shares the neu rules above), navy ink + amber highlight ---------------- */
.style-neublue{--bg:#e2e3e8;--card:#e2e3e8;--line:#c9cbd3;--ink:#121735;--muted:#454b66;--radius:24px;
  --accent:#1b2c94;--accent2:#e2e3e8;--accent-ink:#1b2c94;--on-accent:#fff;--amber:#f2b705;
  --neu-out:7px 7px 16px #c1c3cb,-7px -7px 16px #ffffff;--neu-sm:4px 4px 9px #c1c3cb,-4px -4px 9px #ffffff;
  --neu-in:inset 4px 4px 9px #c1c3cb,inset -4px -4px 9px #ffffff;--shadow:var(--neu-out)}
.style-neublue .brand-mark{background:var(--accent);color:#fff}
.style-neublue :is(.btn,.panel button){background:var(--accent);color:#fff}
.style-neublue .range-tabs a.active{background:var(--amber);color:#1c1500;box-shadow:var(--neu-sm)}
.style-neublue :is(.co-tabs a.active,.chip-row a.active,.tag-row a.active,.kind-tabs a.active){background:var(--accent);color:#fff;box-shadow:var(--neu-in)}
.style-neublue :is(.m-value,.c-price,.co-big,.hero-number){color:var(--accent)}
.style-neublue .chart .grid{stroke:#c3c5cd}

/* ---------------- terra (image 5): cream tiles + slate tiles, coral primary, mint secondary ---------------- */
.style-terra{--bg:#e9e3d9;--card:#f8f4ee;--ink:#2a2e31;--muted:#66645f;--line:#ded6c9;--radius:18px;
  --accent:#d95f38;--accent2:#d6efe8;--accent-ink:#b4461f;--on-accent:#fff;
  --shadow:inset 0 1px 0 #fff,0 2px 0 #d9d0c2,0 16px 28px -12px rgba(40,50,55,.35)}
.style-terra .topbar{background:#44545d;border-radius:0 0 22px 22px;--ink:#f3efe8;--muted:#c3ccd0;--accent2:#566872;--accent-ink:#ffb79c;color:var(--ink)}
.style-terra .brand-logo-box{background:#fff;border:0}
.style-terra .metric-card{background:#46565f;border-color:#46565f;--ink:#f4f0e9;--muted:#bcc6ca;--line:#5b6b74;--up:#86e3c2;--down:#ffa98f;--accent-ink:#ffb79c;color:var(--ink)}
.style-terra .metric-card .badge{background:#5b6b74;color:#f4f0e9}
.style-terra .commodity-card{border-top:4px solid var(--accent)}
.style-terra .commodity-card:nth-child(3n+2){border-top-color:#7cc8b4}
.style-terra .commodity-card:nth-child(3n){border-top-color:#f0a55a}
.style-terra .range-tabs{border-radius:999px;padding:3px}
.style-terra .range-tabs a{border-radius:999px}
.style-terra .range-tabs a.active{background:#44545d;color:#fff}
.style-terra :is(.co-tabs a,.chip-row a,.tag-row a,.kind-tabs a){border-radius:999px}
.style-terra .bottom-nav{background:#44545d;border-top:0;--ink:#f3efe8;--muted:#c3ccd0;--accent-ink:#ffb79c}
.style-terra .clickable:hover{transform:translateY(-2px)}

/* ---------------- pastel (image 6): frosted white glass on a pink-blue pastel field, colourful badges ---------------- */
.style-pastel{--card:rgba(255,255,255,.62);--line:rgba(255,255,255,.9);--ink:#161b2c;--muted:#4f5770;--radius:24px;
  --accent:#2f6fed;--accent2:rgba(47,111,237,.12);--accent-ink:#1d55c9;--on-accent:#fff;
  --shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 34px rgba(80,90,140,.18)}
body.style-pastel{background:
  radial-gradient(800px 600px at 0% 0%,#fbd9e2,transparent 70%),
  radial-gradient(900px 700px at 100% 100%,#b5c9ec,transparent 70%),
  linear-gradient(135deg,#f8e3ea,#dfe4f4 55%,#c4d3ee);background-attachment:fixed}
.style-pastel :is(.btn,.panel button,.home-btn,.news-chip,.brand-mark){background:radial-gradient(circle at 35% 30%,#5d93ff,#2f6fed 60%,#2457c4);box-shadow:0 6px 14px rgba(47,111,237,.35)}
.style-pastel .brand-mark{border-radius:50%}
.style-pastel .range-tabs{background:rgba(255,255,255,.45);border-color:rgba(255,255,255,.9);border-radius:999px;padding:3px}
.style-pastel .range-tabs a{border-radius:999px}
.style-pastel .range-tabs a.active{background:#fff;color:var(--accent-ink);box-shadow:0 4px 12px rgba(80,90,140,.18)}
.style-pastel :is(.co-tabs a,.chip-row a,.tag-row a,.kind-tabs a){border-radius:999px;background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.9)}
.style-pastel .badge.ok{background:#22c55e;color:#fff}.style-pastel .badge.stale{background:#f59e0b;color:#2a1800}
.style-pastel :is(.badge.warn,.badge.err){background:#ef4444;color:#fff}
.style-pastel :is(.c-rows>div,.m-meta){border-top-color:rgba(20,30,60,.10)}
.style-pastel :is(th,td){border-bottom-color:rgba(20,30,60,.10)}
.style-pastel :is(.vs-card,.guide,.storage-box,.chg,.findings li){background:rgba(255,255,255,.5)}
.style-pastel .bottom-nav{background:rgba(255,255,255,.65);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.style-pastel .chart .grid{stroke:rgba(20,30,60,.10)}
.style-pastel :is(.panel input,.panel select,.panel textarea){background:rgba(255,255,255,.85)}
.style-pastel .clickable:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 18px 40px rgba(80,90,140,.24)}

/* footer switcher holds ten styles: compact on phones */
@media (max-width:520px){.style-switch{gap:5px}.style-switch a{padding:3px 9px;font-size:11px}}
/* fixes after the first screenshots: raised navy chips in neublue; sign-in chip readable on terra's slate header */
.style-neublue :is(.home-btn,.news-chip){background:var(--accent);color:#fff;box-shadow:var(--neu-sm)}
.style-terra .topbar .member-chip{background:#566872;border-color:#6b7d86;color:#fff}

/* charts in the six image styles (owner 1405/08/09): soft fill under the main line, rounder bars.
   Shape only: values, scales and labels are unchanged. */
:is(.style-mint3d,.style-sand,.style-vivid,.style-neublue,.style-terra,.style-pastel) .chart .area{display:inline;fill-opacity:.14}
:is(.style-vivid) .chart .area{fill-opacity:.22}
:is(.style-mint3d,.style-sand,.style-vivid,.style-neublue,.style-terra,.style-pastel) .chart .bar{rx:5px;ry:5px}
:is(.style-mint3d,.style-sand,.style-vivid,.style-neublue,.style-terra,.style-pastel) .mini-bars rect{rx:2.5px;ry:2.5px}

/* ======================= 1.9.10 b: real volume (owner: "shape, depth and colour of buttons did not change") =======================
   One shared 3D layer for the six image styles, driven by per-style variables:
   --b-bg button face, --b-edge its bottom lip, --b-ink its text, --b-drop its cast shadow,
   --c-edge card lip, --c-drop card cast shadow, --c-hi card top highlight, --well recessed surfaces,
   --chip chip face, --chip-edge chip lip, --glow selected/focus halo. neublue keeps neumorphic light instead of lips. */
.style-mint3d{--b-bg:linear-gradient(180deg,#86e6c6,#4cc9a0);--b-edge:#2e9c79;--b-ink:#0b3528;--b-drop:rgba(46,156,121,.35);
  --c-edge:#dcd9d2;--c-edge2:#d2cec6;--c-drop:rgba(60,55,45,.20);--c-hi:#fff;--well:#e1dfda;--chip:#faf9f7;--chip-edge:#d3d0c9}
.style-sand{--b-bg:linear-gradient(180deg,#f59a63,#d9622a);--b-edge:#a4441a;--b-ink:#fff;--b-drop:rgba(164,68,26,.35);
  --c-edge:#d8ccbc;--c-edge2:#cfc2b0;--c-drop:rgba(90,65,40,.22);--c-hi:#fff;--well:#e0d6c9;--chip:#f8f4ef;--chip-edge:#d3c6b5;
  --glow:0 0 0 2px #2fd6bf,0 0 16px rgba(47,214,191,.6)}
.style-vivid{--b-bg:linear-gradient(135deg,#ffd166,#ff8a3d);--b-edge:#b4581b;--b-ink:#2a1800;--b-drop:rgba(255,138,61,.35);
  --c-edge:#151a33;--c-edge2:#11152a;--c-drop:rgba(3,5,20,.55);--c-hi:rgba(255,255,255,.07);--well:#171c37;--chip:#303a64;--chip-edge:#161b35;
  --glow:0 0 0 2px #2fd6aa,0 0 18px rgba(47,214,170,.55)}
.style-terra{--b-bg:linear-gradient(180deg,#f0845f,#d95f38);--b-edge:#9a3b1d;--b-ink:#fff;--b-drop:rgba(154,59,29,.32);
  --c-edge:#d6ccbd;--c-edge2:#cbc0b0;--c-drop:rgba(40,50,55,.25);--c-hi:#fff;--well:#ddd5c8;--chip:#fbf8f3;--chip-edge:#d2c8b8;
  --glow:0 0 0 3px rgba(124,200,180,.45),0 6px 16px rgba(124,200,180,.5)}
.style-pastel{--b-bg:radial-gradient(circle at 35% 25%,#6a9dff,#2f6fed 60%,#2152bd);--b-edge:#1c47a6;--b-ink:#fff;--b-drop:rgba(47,111,237,.38);
  --c-edge:rgba(255,255,255,.55);--c-edge2:rgba(255,255,255,.35);--c-drop:rgba(80,90,140,.22);--c-hi:rgba(255,255,255,.95);--well:rgba(255,255,255,.38);--chip:rgba(255,255,255,.75);--chip-edge:rgba(170,180,215,.6);
  --glow:0 0 0 3px rgba(47,111,237,.25),0 6px 16px rgba(47,111,237,.35)}

/* cards: thick stacked plates (images 1 and 5) */
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) :is(.metric-card,.commodity-card,.panel,.alert,.co-card,.news-card,.admin-stats div){
  border:0;border-radius:26px;
  box-shadow:inset 0 2px 0 var(--c-hi),inset 0 -3px 6px rgba(0,0,0,.04),0 6px 0 var(--c-edge),0 12px 0 -2px var(--c-edge2),0 22px 34px -6px var(--c-drop)}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) .grid{gap:22px 14px}
.style-terra .metric-card{box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 6px 0 #33424a,0 12px 0 -2px #2b383f,0 22px 34px -6px rgba(30,40,45,.4)}
.style-terra .commodity-card{border-top:5px solid var(--accent)}

/* buttons: chunky pills with a bottom lip that press down */
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) :is(.btn,.panel button,.home-btn,.news-chip,.news-search button,.brand-mark){
  background:var(--b-bg);color:var(--b-ink);border:0;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.10),0 5px 0 var(--b-edge),0 12px 20px var(--b-drop);
  transition:transform .08s,box-shadow .08s}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) :is(.btn,.panel button,.home-btn,.news-chip,.news-search button){border-radius:999px;padding:10px 20px;font-weight:800}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) :is(.btn,.panel button,.home-btn,.news-chip,.news-search button):hover{box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 5px 0 var(--b-edge),var(--glow)}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) :is(.btn,.panel button,.home-btn,.news-chip,.news-search button):active{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 var(--b-edge),0 4px 8px var(--b-drop)}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) .brand-mark{border-radius:18px;width:48px;height:48px}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) .btn.ghost{background:var(--chip);color:var(--accent-ink);box-shadow:inset 0 2px 0 var(--c-hi),0 4px 0 var(--chip-edge),0 10px 16px var(--c-drop)}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) .member-chip{border:0;border-radius:999px;padding:8px 14px;background:var(--chip);
  box-shadow:inset 0 2px 0 var(--c-hi),0 4px 0 var(--chip-edge),0 10px 16px var(--c-drop)}

/* recessed tracks with a raised selected pill: top menu, range tabs (image 1 "Tabs", image 2 glow) */
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) :is(.top-nav,.range-tabs){background:var(--well);border:0;border-radius:999px;padding:5px;
  box-shadow:inset 0 3px 7px rgba(0,0,0,.14),inset 0 -1px 0 rgba(255,255,255,.5)}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) :is(.top-nav a,.range-tabs a){border-radius:999px;padding:7px 14px;font-weight:700;color:var(--muted)}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) :is(.top-nav a:hover,.top-nav a.nav-news){background:var(--chip);color:var(--ink);box-shadow:inset 0 1px 0 var(--c-hi),0 3px 0 var(--chip-edge),0 6px 10px var(--c-drop)}
:is(.style-mint3d,.style-vivid,.style-terra,.style-pastel) .range-tabs a.active{background:var(--b-bg);color:var(--b-ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 var(--b-edge),var(--glow)}
.style-sand .range-tabs a.active{background:linear-gradient(180deg,#24474a,#16302f);color:#c9fff4;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),var(--glow)}
.style-terra .top-nav{background:#3a4850;box-shadow:inset 0 3px 7px rgba(0,0,0,.3)}
.style-terra :is(.top-nav a:hover,.top-nav a.nav-news){background:#566872;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 3px 0 #2c383e}

/* chips: raised pills; selected = button face + halo (image 1 "Chips") */
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) :is(.co-tabs a,.chip-row a,.tag-row a,.kind-tabs a,.style-switch a,.tab-arrow,.admin-menu a){
  border:0;border-radius:999px;background:var(--chip);color:var(--ink);box-shadow:inset 0 2px 0 var(--c-hi),0 3px 0 var(--chip-edge),0 7px 12px var(--c-drop)}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) :is(.co-tabs a.active,.chip-row a.active,.tag-row a.active,.kind-tabs a.active,.style-switch a.active,.admin-menu a.on){
  background:var(--b-bg);color:var(--b-ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 var(--b-edge),var(--glow)}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) .style-switch{gap:10px 8px}

/* status labels: filled 3D pills in the images' alert colours (success mint, warning yellow, error coral) */
:is(.style-mint3d,.style-sand,.style-vivid,.style-neublue,.style-terra,.style-pastel) :is(.badge,.pill){padding:3px 11px;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 0 rgba(0,0,0,.12)}
:is(.style-mint3d,.style-sand,.style-vivid,.style-neublue,.style-terra,.style-pastel) .badge.ok{background:linear-gradient(180deg,#a8ecd3,#6fd6b1);color:#0b3b2c}
:is(.style-mint3d,.style-sand,.style-vivid,.style-neublue,.style-terra,.style-pastel) .badge.stale{background:linear-gradient(180deg,#fbe79a,#f2cf55);color:#4a3600}
:is(.style-mint3d,.style-sand,.style-vivid,.style-neublue,.style-terra,.style-pastel) :is(.badge.warn,.badge.err){background:linear-gradient(180deg,#f8a9a1,#ec6f63);color:#4a0f0a}

/* inputs: deep pill wells with a glowing focus ring (image 1 "Inputs") */
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) :is(.panel input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),.panel select,.news-search input){
  border:0;border-radius:999px;background:var(--well);padding:10px 16px;box-shadow:inset 0 3px 7px rgba(0,0,0,.14),inset 0 -1px 0 rgba(255,255,255,.5)}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) .panel textarea{border:0;border-radius:18px;background:var(--well);box-shadow:inset 0 3px 7px rgba(0,0,0,.14)}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) :is(.panel input,.panel select,.panel textarea,.news-search input):focus{outline:0;box-shadow:inset 0 3px 7px rgba(0,0,0,.10),var(--glow)}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) .news-search{border-radius:999px}

/* charts sit in a recessed well; info boxes recessed too */
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) .chart-wrap{background:var(--well);border-radius:20px;padding:10px 8px 6px;box-shadow:inset 0 3px 8px rgba(0,0,0,.12)}
:is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) :is(.vs-card,.guide,.storage-box,.chg,.vs-verdict){border:0;border-radius:18px;background:var(--well);box-shadow:inset 0 2px 6px rgba(0,0,0,.10)}

/* phone bottom bar: a floating raised capsule */
@media (max-width:900px){
  :is(.style-mint3d,.style-sand,.style-vivid,.style-terra,.style-pastel) .bottom-nav{inset-inline:10px;bottom:10px;border:0;border-radius:28px;
    box-shadow:inset 0 2px 0 var(--c-hi),0 5px 0 var(--c-edge),0 16px 30px var(--c-drop)}
  .style-terra .bottom-nav{box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 5px 0 #2c383e,0 16px 30px rgba(30,40,45,.4)}
}

/* neublue: volume from light, not lips (image 4): convex navy buttons, amber selected chips, deeper wells */
.style-neublue{--neu-out:9px 9px 20px #bfc1c9,-9px -9px 20px #ffffff;--neu-in:inset 5px 5px 11px #bfc1c9,inset -5px -5px 11px #ffffff}
.style-neublue :is(.metric-card,.commodity-card,.panel,.co-card){border-radius:30px}
.style-neublue :is(.btn,.panel button,.home-btn,.news-chip,.news-search button,.brand-mark){border:0;color:#fff;
  background:radial-gradient(circle at 30% 25%,#4157d6,#1b2c94 65%,#141f6e);box-shadow:6px 6px 14px #bfc1c9,-6px -6px 14px #fff,inset 0 2px 0 rgba(255,255,255,.25)}
.style-neublue :is(.btn,.panel button,.home-btn,.news-chip,.news-search button){border-radius:999px;padding:10px 20px;font-weight:800}
.style-neublue :is(.btn,.panel button,.home-btn,.news-chip):active{box-shadow:inset 4px 4px 9px #0f1858,inset -3px -3px 8px #3349c4}
.style-neublue .brand-mark{border-radius:50%;width:48px;height:48px}
.style-neublue .top-nav{background:var(--bg);border-radius:999px;padding:6px;box-shadow:var(--neu-in)}
.style-neublue .top-nav a{border-radius:999px;font-weight:700}
.style-neublue .range-tabs{border-radius:999px;padding:6px}
.style-neublue .range-tabs a{border-radius:999px}
.style-neublue .range-tabs a.active{background:radial-gradient(circle at 30% 25%,#ffd44d,#f2b705 70%);color:#1c1500;box-shadow:4px 4px 9px #bfc1c9,-4px -4px 9px #fff}
.style-neublue :is(.co-tabs a,.chip-row a,.tag-row a,.kind-tabs a,.style-switch a,.member-chip){border:0;border-radius:999px;background:var(--bg);box-shadow:var(--neu-sm)}
.style-neublue :is(.co-tabs a.active,.chip-row a.active,.tag-row a.active,.style-switch a.active){background:radial-gradient(circle at 30% 25%,#ffd44d,#f2b705 70%);color:#1c1500;box-shadow:var(--neu-sm)}
.style-neublue :is(.panel input,.panel select,.news-search input){border-radius:999px}
@media (max-width:900px){.style-neublue .bottom-nav{inset-inline:10px;bottom:10px;border-radius:28px;box-shadow:var(--neu-out)}}
.style-terra .commodity-card{border-top:5px solid var(--accent)}.style-terra .commodity-card:nth-child(3n+2){border-top-color:#7cc8b4}.style-terra .commodity-card:nth-child(3n){border-top-color:#f0a55a}