/* Kira Dulu — glass theme overlay. ONE DOM, TWO SKINS.
   Loads on every page; everything except .kd-theme-toggle is scoped to html[data-theme="glass"].
   Tokens derived from assets/glass.css (grayscale, blur tiers, gradient borders). */

/* ---- language toggle (both themes) ---- */
.kd-lang-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;margin-left:10px;border-radius:999px;
  border:1px solid var(--line-strong,#e2d6c2);background:var(--card,#fff);color:inherit;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;font-size:13px;letter-spacing:.04em;
  cursor:pointer;transition:transform .15s ease, background .15s ease;flex:0 0 auto;text-decoration:none;
}
.kd-lang-toggle:hover{transform:translateY(-1px);background:var(--coral,#ff6b4a);color:#fff;border-color:var(--coral,#ff6b4a)}
.kd-lang-toggle:focus-visible{outline:2px solid var(--coral,#ff6b4a);outline-offset:2px}
html[data-theme="glass"] .kd-lang-toggle{background:hsl(0 0% 100% / .08);border-color:hsl(0 0% 100% / .22);color:#fff}

/* ---- toggle button (both themes) ---- */
.kd-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-left:10px;border-radius:999px;
  border:1px solid var(--line-strong,#e2d6c2);background:var(--card,#fff);color:inherit;
  cursor:pointer;transition:transform .15s ease, background .15s ease;
  flex:0 0 auto;
}
.kd-theme-toggle:hover{transform:rotate(18deg) scale(1.06)}
.kd-theme-toggle:focus-visible{outline:2px solid var(--coral,#ff6b4a);outline-offset:2px}

/* ---- glass background layers (injected by theme-toggle.js) ---- */
html[data-theme="glass"] .kd-glass-bg{position:fixed;inset:0;z-index:-2;background:hsl(0 0% 4%)}
html[data-theme="glass"] .kd-glass-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html[data-theme="glass"] .kd-glass-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,.62))}
/* no-video fallback (reduced motion/data or <768px): static dark gradient */
html[data-theme="glass"] .kd-glass-bg:not(:has(video)){background:radial-gradient(1200px 700px at 70% -10%,hsl(160 18% 14%),hsl(0 0% 4%) 60%)}

/* ---- token remap: the playful palette becomes glass ---- */
html[data-theme="glass"]{
  --cream:transparent;--paper:hsl(0 0% 6% / .55);--ink:hsl(0 0% 100%);
  --ink-soft:hsl(0 0% 100% / .72);--ink-faint:hsl(0 0% 100% / .55);
  --coral:#ff6b4a;--coral-deep:#e8512f;--mint:#2fd3a5;--mint-deep:#1fb98c;
  --sky:#7fb0ff;--sky-soft:hsl(0 0% 100% / .10);--lemon:#ffd97a;--lemon-soft:hsl(0 0% 100% / .10);
  --grape:#a99bff;--grape-soft:hsl(0 0% 100% / .10);--blush:hsl(0 0% 100% / .10);--mint-soft:hsl(0 0% 100% / .10);
  --line:hsl(0 0% 100% / .14);--line-strong:hsl(0 0% 100% / .22);--card:hsl(0 0% 100% / .06);
  --shadow-sm:0 6px 18px rgba(0,0,0,.35);
  --shadow-md:0 14px 34px rgba(0,0,0,.42);
  --shadow-lg:0 28px 60px rgba(0,0,0,.5);
}
html[data-theme="glass"]{background:hsl(0 0% 4%)}
html[data-theme="glass"] body{background:transparent;color:var(--ink)}
html[data-theme="glass"] .brate b{color:var(--mint)}
html[data-theme="glass"] .res-amt{color:var(--coral)}
html[data-theme="glass"] .gate{background:linear-gradient(180deg,hsl(0 0% 100% / .04),hsl(0 0% 100% / .10))}

/* ---- glass surfaces: blur + gradient border ---- */
html[data-theme="glass"] .nav-shell,
html[data-theme="glass"] .panel,
html[data-theme="glass"] .tool-card,
html[data-theme="glass"] .chart-card,
html[data-theme="glass"] .compare-card,
html[data-theme="glass"] .compare-hub-card,
html[data-theme="glass"] .result,
html[data-theme="glass"] .lead-box,
html[data-theme="glass"] .gcard,
html[data-theme="glass"] .answer-block,
html[data-theme="glass"] .afford-block,
html[data-theme="glass"] .tool-panel,
html[data-theme="glass"] .calc-shell,
html[data-theme="glass"] .metric,
html[data-theme="glass"] .article-grid article{
  position:relative;
  background:hsl(0 0% 100% / .06);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-color:hsl(0 0% 100% / .14);
}
html[data-theme="glass"] .nav-shell::before,
html[data-theme="glass"] .panel::before,
html[data-theme="glass"] .result::before,
html[data-theme="glass"] .gcard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,hsl(0 0% 100% / .35),hsl(0 0% 100% / .06) 45%,hsl(0 0% 100% / .18));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* ---- nav ---- */
html[data-theme="glass"] .nav-links a{color:var(--ink-soft)}
html[data-theme="glass"] .nav-links a:hover,
html[data-theme="glass"] .nav-links a[aria-current="page"]{color:var(--ink);background:hsl(0 0% 100% / .10)}
html[data-theme="glass"] .brand{color:var(--ink)}
html[data-theme="glass"] .kd-theme-toggle{background:hsl(0 0% 100% / .08);border-color:hsl(0 0% 100% / .22);color:#fff}

/* ---- text ---- */
html[data-theme="glass"] h1,html[data-theme="glass"] h2,html[data-theme="glass"] h3,html[data-theme="glass"] h4{color:var(--ink)}
html[data-theme="glass"] .muted,
html[data-theme="glass"] .sec-desc,
html[data-theme="glass"] .panel-note,
html[data-theme="glass"] .hero-sub,
html[data-theme="glass"] .source-line,
html[data-theme="glass"] .compare-disclaimer,
html[data-theme="glass"] .status-line{color:var(--ink-faint)}
html[data-theme="glass"] .eyebrow,html[data-theme="glass"] .kicker{color:var(--ink-soft)}

/* ---- pills / badges / segments ---- */
html[data-theme="glass"] .pill,
html[data-theme="glass"] .badge,
html[data-theme="glass"] .tag{background:hsl(0 0% 100% / .10);color:var(--ink-soft);border-color:hsl(0 0% 100% / .16)}
html[data-theme="glass"] .seg button{background:hsl(0 0% 100% / .05);border-color:hsl(0 0% 100% / .16);color:var(--ink-soft)}
html[data-theme="glass"] .seg button.on{background:hsl(11 100% 64% / .18);border-color:var(--coral);color:var(--ink)}

/* ---- inputs ---- */
html[data-theme="glass"] .text-input,
html[data-theme="glass"] .num-input,
html[data-theme="glass"] .select-input,
html[data-theme="glass"] select,
html[data-theme="glass"] input[type="text"],
html[data-theme="glass"] input[type="number"]{
  background:hsl(0 0% 100% / .07);border-color:hsl(0 0% 100% / .2);color:var(--ink);
}
html[data-theme="glass"] .text-input::placeholder,
html[data-theme="glass"] .num-input::placeholder{color:hsl(0 0% 100% / .4)}
html[data-theme="glass"] input[type="range"]{accent-color:var(--coral)}
html[data-theme="glass"] .consent{color:var(--ink-faint)}

/* ---- buttons ---- */
html[data-theme="glass"] .btn-coral,
html[data-theme="glass"] .button-primary{background:var(--coral);color:#fff}
html[data-theme="glass"] .btn-ghost,
html[data-theme="glass"] .button-secondary,
html[data-theme="glass"] .btn-white{background:hsl(0 0% 100% / .08);color:var(--ink);border-color:hsl(0 0% 100% / .25)}

/* ---- compare tables / rows ---- */
html[data-theme="glass"] table{color:var(--ink)}
html[data-theme="glass"] th{color:var(--ink-soft)}
html[data-theme="glass"] td,html[data-theme="glass"] th{border-color:hsl(0 0% 100% / .12)}
html[data-theme="glass"] .bank-row,
html[data-theme="glass"] .brow{background:hsl(0 0% 100% / .04);border-color:hsl(0 0% 100% / .12)}
html[data-theme="glass"] .blogo,
html[data-theme="glass"] .bank-logo{background:hsl(0 0% 100% / .92);border-radius:8px}

/* ---- footer ---- */
html[data-theme="glass"] footer{background:hsl(0 0% 5% / .7);border-color:hsl(0 0% 100% / .1);color:var(--ink-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---- reduced transparency safety: if backdrop-filter unsupported, solidify ---- */
@supports not (backdrop-filter: blur(1px)){
  html[data-theme="glass"] .nav-shell,
  html[data-theme="glass"] .panel,
  html[data-theme="glass"] .tool-card,
  html[data-theme="glass"] .chart-card,
  html[data-theme="glass"] .compare-card,
  html[data-theme="glass"] .result,
  html[data-theme="glass"] .gcard{background:hsl(0 0% 8% / .92)}
}
/* redesign components — glass theme */
html[data-theme="glass"] .kd-tagline{color:var(--ink-soft)}
html[data-theme="glass"] .kd-tagline em{color:#ff8a5c}
html[data-theme="glass"] .browser-frame{background:hsl(0 0% 100% / .06);border-color:hsl(0 0% 100% / .14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html[data-theme="glass"] .browser-bar{background:hsl(0 0% 100% / .05);border-color:hsl(0 0% 100% / .12)}
html[data-theme="glass"] .browser-bar .browser-url{background:hsl(0 0% 100% / .08);color:var(--ink-faint)}
html[data-theme="glass"] .ti-ic{background:hsl(160 60% 45% / .16);color:#5fe0b6}
html[data-theme="glass"] .trust-item b{color:var(--ink)}
html[data-theme="glass"] .trust-item span{color:var(--ink-soft)}
html[data-theme="glass"] .bankcard{background:hsl(0 0% 100% / .06);border-color:hsl(0 0% 100% / .14)}
html[data-theme="glass"] .partner-list li{color:var(--ink-soft)}
html[data-theme="glass"] .partner-list li strong{color:var(--ink)}