/* Ginza 2AM skin for every inner page (blog, calories, calculator, partners, support, legal).
   Loaded after each page's own <style>, so it only re-skins: sumi night, a wisteria to dusk sky,
   matte glass panels, and one solid volt surface per screen. The homepages carry their own copy. */

:root {
  --ink: #07080E; --navy: #07080E; --cream: transparent; --paper: rgba(255,255,255,0.05);
  --grey: rgba(237,235,250,0.55); --line-d: rgba(255,255,255,0.10); --line-l: rgba(255,255,255,0.10);
  --indigo: #7E7CF6; --radius: 22px;
  --g-text: #EDEBFA; --g-dim: rgba(237,235,250,0.70); --g-mute: rgba(237,235,250,0.46);
  --g-kon: rgba(30,31,58,0.78); --g-link: #B9B7FF;
}

html { background: #07080E; }
body { background: transparent !important; color: var(--g-text) !important; position: relative; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 85% 0%, rgba(90,74,156,0.50), transparent 70%),
    radial-gradient(50% 40% at 0% 40%, rgba(24,26,53,0.95), transparent 70%),
    radial-gradient(80% 50% at 50% 115%, rgba(201,113,74,0.38), transparent 70%),
    linear-gradient(180deg, #0A0B1A 0%, #14152F 45%, #22193A 80%, #2A1B30 100%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.45;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 68% 9%, #fff, transparent),
    radial-gradient(1px 1px at 84% 34%, rgba(255,255,255,0.8), transparent), radial-gradient(1.5px 1.5px at 52% 22%, #fff, transparent),
    radial-gradient(1px 1px at 7% 63%, rgba(255,255,255,0.7), transparent), radial-gradient(1px 1px at 92% 71%, rgba(255,255,255,0.6), transparent);
}
::selection { background: #FFE600; color: #07080E; }

/* shared glass recipe */
.slate-inner, .topbar, .card, .cta-mid, .answer, .say, .flow, .how-card, .post-links a, .stat, .contact-card, .cta-card,
.short-version, .g-glass, .qa-glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 40px 80px -40px rgba(0,0,0,0.7) !important;
}

/* ── Nav: a floating glass pill ── */
.slate { top: 14px !important; left: 0; right: 0; padding: 0 16px; background: transparent !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.slate-inner { max-width: 1200px; padding: 10px 10px 10px 20px !important; border-radius: 999px; }
.slate-links a.link { color: var(--g-dim) !important; }
.slate-links a.link:hover, .slate-links a.link.on { color: #fff !important; }
.slate .btn-volt { background: rgba(255,255,255,0.08) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.12) !important; }
.slate .btn-volt svg { color: #FFE600; }
.slate .btn-volt:hover { background: rgba(255,255,255,0.14) !important; }
.lang-sw { color: var(--g-mute) !important; }
@media (max-width: 820px) { .slate { top: 10px !important; padding: 0 10px; } .slate-links { gap: 10px !important; } }

/* ── Type ── */
.h1, .h2, .q, .hero-title, .section-title { color: #fff; }
.lede, .hero-desc, .section-sub { color: var(--g-dim) !important; }
.scene-label, .crumbs, .crumbs a, .post-meta, .hero-eyebrow, .section-eyebrow, .legal-eyebrow, .legal-meta { color: var(--g-mute) !important; }
.scene-label::after { background: var(--line-d) !important; }
.crumbs a:hover { color: #fff !important; }
.mono { letter-spacing: 0.16em; }

/* ── Light sections become part of the night ── */
.light, .article { background: transparent !important; color: var(--g-text) !important; }
.light .lede { color: var(--g-dim) !important; }
.light .h2, .light .h1 { color: #fff; }

/* ── Q&A ── */
.qa { border-top: 1px solid var(--line-d) !important; }
.qa details { border-bottom: 1px solid var(--line-d) !important; }
.qa .q { color: #fff; }
.qa .a { color: var(--g-dim) !important; }
.qa .a a { color: var(--g-link); }
.qa .plus { border: 1px solid rgba(255,255,255,0.16) !important; color: var(--g-dim); background: transparent !important; }
.qa details[open] .plus { background: transparent !important; color: #FFE600 !important; border-color: rgba(255,230,0,0.6) !important; }

/* ── Articles ── */
.post-hero { padding-bottom: 30px; }
.post-meta .av, .author .av { background: #FFE600 !important; color: #07080E !important; }
.post-cover { display: block; width: 100%; height: auto; max-width: 1000px; aspect-ratio: 1200 / 630; object-fit: cover; margin: 38px 0 0; border-radius: 26px; border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 60px 120px -50px rgba(0,0,0,0.9), 0 0 80px -30px rgba(110,90,200,0.4); }
.article { padding-top: 40px !important; }
.prose { color: rgba(237,235,250,0.84); }
.prose h2, .prose h3, .prose strong, .prose b { color: #fff; }
.prose a { color: #fff !important; text-decoration-color: #FFE600 !important; }
.prose a:hover { background: #FFE600 !important; color: #07080E !important; }
.prose blockquote { color: var(--g-dim) !important; }
.prose table { background: rgba(255,255,255,0.04) !important; border: 1px solid var(--line-d) !important; color: var(--g-text); }
.prose th { color: var(--g-mute) !important; background: rgba(255,255,255,0.04) !important; }
.prose th, .prose td { border-bottom: 1px solid var(--line-d) !important; }
.prose hr { border-top-color: var(--line-d) !important; }
.prose code, .how-card code { background: rgba(255,255,255,0.08) !important; color: #fff; }
.prose .sources, .sources, .macro-note { color: var(--g-mute) !important; }
.cta-mid { border-radius: 24px !important; }
.cta-mid h3 { color: #fff; }
.author { border-top: 1px solid var(--line-d) !important; }
.author b { color: #fff; }
.author p { color: var(--g-dim) !important; }
.author a { color: #fff !important; }
.cta-bar { border-radius: 18px !important; border-color: rgba(255,230,0,0.35) !important; background: rgba(255,230,0,0.05) !important; }
.cta-bar p { color: var(--g-dim) !important; }

/* ── Cards ── */
.card { border-radius: 24px !important; overflow: hidden; }
.card:hover { border-color: rgba(255,230,0,0.55) !important; }
.card p { color: var(--g-dim) !important; }
.card .mono { color: var(--g-mute) !important; }
.card.feat { background: #FFE600 !important; border-color: #FFE600 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.card.feat p { color: rgba(7,8,14,0.7) !important; } .card.feat .mono { color: rgba(7,8,14,0.55) !important; } .card.feat h3, .card.feat .more { color: #07080E !important; }
.card .cover { display: block; flex: none; margin: -26px -26px 20px; width: calc(100% + 52px); height: auto; max-width: none; aspect-ratio: 1200 / 630; object-fit: cover; border-bottom: 1px solid rgba(255,255,255,0.08); }
.card.feat.has-cover { display: grid !important; grid-template-columns: 1.1fr 1fr; gap: 0 34px; align-items: center; }
.card.feat.has-cover .cover { object-position: 0% 50%; grid-row: 1 / span 4; margin: -26px 0 -24px -26px; width: calc(100% + 26px); height: calc(100% + 50px); aspect-ratio: auto; border: 0; }
@media (max-width: 820px) { .card.feat.has-cover { display: flex !important; } .card.feat.has-cover .cover { margin: -26px -26px 20px; width: calc(100% + 52px); height: auto; aspect-ratio: 1200 / 630; } }

/* ── Volt slabs stay volt (the one bright thing) ── */
.cta-slab { border-radius: 28px !important; box-shadow: 0 50px 100px -50px rgba(255,230,0,0.45); }
.cta-slab, .cta-slab .h2 { color: #07080E !important; }
.cta-slab p { color: rgba(7,8,14,0.7) !important; }
.cta-slab a:not(.btn-volt) { color: #07080E !important; }
.cta-slab .btn-volt { background: #07080E !important; color: #fff !important; }

/* ── Calorie pages ── */
.answer { border-radius: 24px !important; }
.answer .kcal { color: #FFE600; }
.answer .kcal small { color: var(--g-mute); }
.answer .what { color: #fff; }
.answer p { color: var(--g-dim) !important; }
.macro { background: rgba(255,255,255,0.05) !important; border: 1px solid var(--line-d) !important; border-radius: 16px !important; }
.macro b { color: #fff; }
.macro span { color: var(--g-mute) !important; }
.macros .macro:nth-child(1) b { color: #FFE600; }
.say { border-radius: 22px !important; border-left: 3px solid #FFE600 !important; }
.say .res { color: var(--g-dim) !important; }

/* ── Calculator ── */
.flow { border-radius: 28px !important; }
.how-card { border-radius: 24px !important; }
.how-card h3 { color: #fff; }
.how-card p, .how-card li { color: var(--g-dim) !important; }
.how-card a { color: #fff !important; text-decoration-color: #FFE600; }
.tbl th { color: var(--g-mute) !important; }
.tbl th, .tbl td { border-bottom: 1px solid var(--line-d) !important; }
.post-links a { border-radius: 18px !important; }
.post-links a:hover { border-color: rgba(255,230,0,0.55) !important; }
.mbar i { background: #7E7CF6; }
.mbar i.v { background: #FFE600; }
.opt { border-radius: 16px !important; }
.seg { border-radius: 12px !important; }

/* ── Partners ── */
.terms p { color: var(--g-dim) !important; }
.terms b { color: #fff !important; }
.steps li::before { background: rgba(255,255,255,0.10) !important; color: #FFE600 !important; }
.stat { border-radius: 20px !important; }
.pill { border-radius: 999px; }
form.apply input, form.apply select, form.apply textarea { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 14px !important; }
form.apply select option { background: #15163A; color: #fff; }
.linkbox { border-radius: 16px !important; }

/* ── Footer ── */
footer { background: rgba(7,8,14,0.55) !important; border-top: 1px solid var(--line-d) !important; }
.footer-meta a { color: var(--g-dim) !important; }
.footer-meta a:hover { color: #fff !important; }
.footer-inner { color: var(--g-mute) !important; }

/* ── Support, privacy, terms (the older topbar layout) ── */
.blob { display: none !important; }
.topbar { position: sticky; top: 14px !important; margin: 14px auto 0; width: calc(100% - 32px); max-width: 1200px; border-radius: 999px; z-index: 50; }
.topbar .container { padding: 0 !important; max-width: none; }
.topbar-inner { padding: 10px 10px 10px 20px !important; }
.topbar .brand { color: #fff !important; font-size: 19px !important; }
.topbar .brand img { width: 28px !important; height: 28px !important; }
.topbar-link { color: var(--g-dim) !important; }
.topbar-link:hover { color: #fff !important; }
.btn-small { background: rgba(255,255,255,0.08) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.12); }
.btn-small:hover { background: rgba(255,255,255,0.14) !important; }
.hero-title .accent-blue, .section-title .accent-blue { color: #8E8CFF !important; }
.hero-title .accent-mint, .section-title .accent-mint { color: #07080E !important; background: #FFE600 !important; }
.contact-card { border-radius: 26px !important; }
.contact-card-email { color: #fff !important; }
.contact-card-email:hover { color: #FFE600 !important; }
.contact-card-label, .contact-card-meta { color: var(--g-mute) !important; }
.contact-card-icon { background: rgba(126,124,246,0.16) !important; }
.contact-card-icon svg { stroke: #B9B7FF !important; }
.faq { border-top: 1px solid var(--line-d) !important; }
.faq-item { border-bottom: 1px solid var(--line-d) !important; }
.faq-q { color: #fff !important; }
.faq-icon { background: transparent !important; border: 1px solid rgba(255,255,255,0.16) !important; color: var(--g-dim) !important; }
.faq-item[open] .faq-icon { background: transparent !important; color: #FFE600 !important; border-color: rgba(255,230,0,0.6) !important; }
.faq-a { color: var(--g-dim) !important; }
.faq-a strong { color: #fff !important; }
.faq-a a { color: var(--g-link) !important; }
.cta-card { border-radius: 30px !important; }
.cta-card::before { background: radial-gradient(circle, rgba(201,113,74,0.8) 0%, transparent 70%) !important; }
.cta-title { color: #fff; }
.cta-desc { color: var(--g-dim) !important; }
.cta-btn { background: #FFE600 !important; color: #07080E !important; }
.topbar ~ * h1, .topbar ~ * h2, .topbar ~ * h3 { color: #fff !important; }
.topbar ~ * p, .topbar ~ * li { color: var(--g-dim) !important; }
.topbar ~ * li strong, .topbar ~ * p strong { color: #fff !important; }
.topbar ~ * a:not(.cta-btn):not(.footer-brand):not(.contact-card-email) { color: var(--g-link); }
.short-version { border-radius: 22px !important; }
.data-table { background: rgba(255,255,255,0.04) !important; border: 1px solid var(--line-d) !important; color: var(--g-text) !important; }
.data-table th { background: rgba(255,255,255,0.05) !important; color: var(--g-mute) !important; border-bottom: 1px solid var(--line-d) !important; }
.data-table td { color: var(--g-dim) !important; border-bottom: 1px solid var(--line-d) !important; }
.data-table td strong { color: #fff !important; }

/* volt at low opacity turns olive: a disabled volt button goes quiet glass instead */
.btn-next[disabled], .btn-volt[disabled] { opacity: 1 !important; background: rgba(255,255,255,0.08) !important; color: var(--g-mute) !important; box-shadow: none !important; }

/* the older footer rows never wrapped */
.footer-meta { flex-wrap: wrap; }