/* Glass finish. Static reflections are cheap; blur is reserved for a few top layers.
   Keep this after appearance.css. No animated filters or per-card compositing. */
:root {
  --glass-canvas: #eef6f3;
  --glass-ambient-a: #94e2c05c;
  --glass-ambient-b: #a8dce650;
  --glass-ambient-c: #c6e7b54d;
  --glass-fill: #ffffff9c;
  --glass-tint: #e4f5ed8c;
  --glass-sheen: #ffffffed;
  --glass-reflection: #ffffff80;
  --glass-edge: #ffffffed;
  --glass-rim: #1b75542b;
  --glass-highlight: #ffffff;
  --glass-shade: #387f6412;
  --glass-shadow: 0 12px 32px -16px #144a3d42;
  --glass-shadow-raised: 0 24px 56px -24px #144a3d55;
  --glass-header: #f6fcf9b8;
  --glass-popover: #f7fcf9e6;
  --glass-inset: #ffffff6b;
  --glass-input: #ffffffc9;
  --glass-hover: #effcf5c9;
  --glass-accent: #39c78f24;
  --glass-solid: #f6fbf8;
}
html[data-theme="dark"] {
  --glass-canvas: #0c1716;
  --glass-ambient-a: #16765755;
  --glass-ambient-b: #1c576d4d;
  --glass-ambient-c: #416c3438;
  --glass-fill: #172b269c;
  --glass-tint: #0f2723a8;
  --glass-sheen: #d4fff51f;
  --glass-reflection: #b5ffea09;
  --glass-edge: #bcfce330;
  --glass-rim: #07161180;
  --glass-highlight: #c9ffec24;
  --glass-shade: #00000033;
  --glass-shadow: 0 14px 36px -18px #00000085;
  --glass-shadow-raised: 0 26px 60px -22px #000000a3;
  --glass-header: #10231fbd;
  --glass-popover: #172e27ed;
  --glass-inset: #071c1738;
  --glass-input: #0c201ab8;
  --glass-hover: #2453408c;
  --glass-accent: #62f3b824;
  --glass-solid: #182c25;
}

/* Gradients are painted once, in normal page flow. Nothing follows the pointer. */
html[data-theme] body {
  background: radial-gradient(ellipse 850px 600px at 85% 120px, var(--glass-ambient-a), transparent 75%),
    radial-gradient(ellipse 700px 600px at 0 780px, var(--glass-ambient-b), transparent 74%),
    radial-gradient(ellipse 900px 700px at 90% 1900px, var(--glass-ambient-c), transparent 76%),
    var(--glass-canvas);
}
html[data-theme] body:is(.prep-home,.site-body,.panel-body,.player-body) {
  background: radial-gradient(ellipse 850px 600px at 85% 120px, var(--glass-ambient-a), transparent 75%),
    radial-gradient(ellipse 700px 600px at 0 780px, var(--glass-ambient-b), transparent 74%),
    radial-gradient(ellipse 900px 700px at 90% 1900px, var(--glass-ambient-c), transparent 76%),
    var(--glass-canvas);
}
html[data-theme] :is(.site-body>main,.panel-content,.prep-home main) { background: transparent; }
html[data-theme] .prep-hero:before {
  background: radial-gradient(ellipse at 65% 35%, var(--glass-ambient-a), transparent 72%),
    radial-gradient(ellipse at 90% 85%, var(--glass-ambient-b), transparent 70%);
}
html[data-theme] .auth-wrap:before {
  background: radial-gradient(ellipse at 15% 45%, var(--glass-ambient-a), transparent 74%);
}

/* No backdrop-filter on repeated cards: the reflection and rim carry the effect. */
html[data-theme] body :is(.card,.sidebar,.panel-body .sidebar,.question-card,.palette-card,
  .prep-plan,.prep-program,.about-steps li,.mk-stat,.mk-feature,.mk-type,.mk-faq-item,
  .mk-steps-list .mk-step>div,.glass-surface,.module) {
  background: linear-gradient(135deg, var(--glass-sheen), transparent 42%),
    linear-gradient(155deg, var(--glass-reflection), transparent 48%, var(--glass-tint)),
    var(--glass-fill);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--glass-shade),
    0 0 0 1px var(--glass-rim), var(--glass-shadow);
}
html[data-theme] body :is(.card.auth-card,.prep-plan) {
  box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--glass-shade),
    0 0 0 1px var(--glass-rim), var(--glass-shadow-raised);
}
html[data-theme] :is(.mk-band,.mk-checklist,.mk-footer,.site-footer,.prep-footer) {
  background: linear-gradient(120deg, var(--glass-sheen), transparent 60%), var(--glass-inset);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
html[data-theme] body :is(.stat-accent,.profile-hero,.mock-hero,.about-cta) {
  background: linear-gradient(130deg, var(--glass-sheen), transparent 48%),
    linear-gradient(120deg, var(--glass-accent), transparent), var(--glass-fill);
}
html[data-theme] :is(.prep-steps li,.cert-stat,.live-card .nums div,.about-cert-stat) {
  background: linear-gradient(135deg, var(--glass-reflection), transparent), var(--glass-inset);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
html[data-theme] :is(.card-footer,.modal-actions) {
  background: var(--glass-inset);
  border-color: var(--glass-rim);
}

/* Sticky and floating layers have enough tint for text passing underneath. */
html[data-theme] :is(.site-header,.panel-top,.player-top) {
  background: linear-gradient(115deg, var(--glass-reflection), transparent 65%), var(--glass-header);
  border-color: var(--glass-edge);
  box-shadow: inset 0 -1px 0 var(--glass-highlight), 0 5px 24px -16px var(--glass-rim);
}
html[data-theme] body :is(.site-header__menu,.dropdown-menu,.appearance__panel,dialog.modal) {
  background: linear-gradient(135deg, var(--glass-sheen), transparent 55%), var(--glass-popover);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 1px var(--glass-rim), var(--glass-shadow-raised);
}
html[data-theme] :is(.appearance__toggle,.site-header__toggle,.user-trigger,.cert-tab,.cert-arrow) {
  background: linear-gradient(135deg, var(--glass-sheen), transparent), var(--glass-fill);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 1px var(--glass-rim), var(--glass-shadow);
}
html[data-theme] .cert-tab.is-active {
  background: linear-gradient(135deg, var(--glass-reflection), transparent), var(--color-brand-soft);
  border-color: var(--color-brand);
}
html[data-theme] :is(.auth-intro>p,.auth-intro li,.cert-desc,.cert-index,.cert-tab:not(.is-active),.prep-program small) {
  color: var(--color-text-2);
}
html[data-theme] .cert-tab.is-active { color: var(--color-brand); }
html[data-theme] .cert-tab:hover { color: var(--color-brand); border-color: var(--color-brand); }
html[data-theme] .cert-arrow:hover { background: var(--color-action); color: #fff; border-color: var(--color-action); }
/* Inputs stay quieter and more opaque than their surrounding glass. */
html[data-theme] :is(input[type=text],input[type=email],input[type=password],input[type=number],
  input[type=search],input[type=date],input[type=tel],input[type=url],select,textarea) {
  background-color: var(--glass-input);
}
html[data-theme] body :is(.prep-program:hover,.prep-program.selected,.card-link:hover) {
  border-color: var(--color-brand);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 1px var(--glass-rim), var(--glass-shadow-raised);
}
html[data-theme] :is(.appearance__toggle:hover,.site-header__toggle:hover,.user-trigger:hover) {
  background: linear-gradient(135deg, var(--glass-sheen), transparent), var(--glass-hover);
}
/* A fixed reflection gives green actions a polished edge without animation. */
html[data-theme] :is(.btn-primary,.prep-cta,.mk-cta,.site-header__mark) {
  box-shadow: inset 0 1px 0 #ffffff40, inset 0 -1px 0 #003b3526, 0 7px 18px -12px #006b4773;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme] :is(.site-header,.panel-top,.player-top) {
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
  }
  html[data-theme] :is(.auth-card,.prep-plan,.appearance__panel,dialog.modal) {
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
  }
  /* Dropdowns are already inside the blurred header; avoid nested filters. */
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme] body :is(.site-header,.panel-top,.player-top,.auth-card,.prep-plan,
    .site-header__menu,.dropdown-menu,.appearance__panel,dialog.modal) {
    background-color: var(--glass-solid);
  }
}
@media (max-width:1199px) {
  html[data-theme] .site-header__nav {
    background: linear-gradient(135deg, var(--glass-sheen), transparent 55%), var(--glass-popover);
    border-color: var(--glass-edge);
    box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  }
  html[data-theme] body .site-header__menu {
    border: 0; box-shadow: none; background: var(--glass-inset);
  }
}
@media (max-width:760px) {
  html[data-theme] :is(.site-header,.panel-top,.player-top,.appearance__panel,dialog.modal) {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  /* Keep large mobile cards out of the blur compositor. */
  html[data-theme] body :is(.auth-card,.prep-plan) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-transparency:reduce) {
  html[data-theme] {
    --glass-fill: var(--glass-solid); --glass-inset: var(--glass-solid);
    --glass-header: var(--glass-solid); --glass-popover: var(--glass-solid);
    --glass-input: var(--glass-solid); --glass-hover: var(--glass-solid);
    --glass-sheen: transparent; --glass-reflection: transparent; --glass-tint: transparent;
  }
  html[data-theme] body :is(.card,.sidebar,.panel-body .sidebar,.question-card,.palette-card,
    .prep-plan,.prep-program,.about-steps li,.mk-stat,.mk-feature,.mk-type,.mk-faq-item,
    .mk-steps-list .mk-step>div,.glass-surface,.module,.mk-band,.mk-checklist,.mk-footer,
    .site-footer,.prep-footer,.site-header,.panel-top,.player-top,.site-header__nav,
    .site-header__menu,.dropdown-menu,.appearance__panel,.appearance__toggle,dialog.modal) {
    background: var(--glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-theme] body { background: var(--glass-canvas); }
  html[data-theme] body:is(.prep-home,.site-body,.panel-body,.player-body) { background: var(--glass-canvas); }
  html[data-theme] :is(.prep-hero,.auth-wrap):before { background: none; }
}
@media (forced-colors:active) {
  html[data-theme] body :is(.card,.sidebar,.panel-body .sidebar,.question-card,.palette-card,
    .prep-plan,.prep-program,.about-steps li,.mk-stat,.mk-feature,.mk-type,.mk-faq-item,
    .mk-steps-list .mk-step>div,.glass-surface,.module,.site-header,.panel-top,.player-top,
    .site-header__nav,.site-header__menu,.dropdown-menu,.appearance__panel,.appearance__toggle,dialog.modal) {
    background: Canvas; color: CanvasText; border-color: CanvasText;
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media print {
  html[data-theme] {
    --color-text: #111; --color-text-2: #333; --color-muted: #444;
    --color-brand: #006b43; --color-surface: #fff; --color-surface-2: #fff;
    --glass-inset: #fff; --glass-input: #fff;
  }
  html[data-theme] body,html[data-theme] body:is(.prep-home,.site-body,.panel-body,.player-body) { background: #fff; }
  html[data-theme] body :is(.card,.sidebar,.panel-body .sidebar,.question-card,.palette-card,
    .prep-plan,.prep-program,.about-steps li,.mk-stat,.mk-feature,.mk-type,.mk-faq-item,
    .mk-steps-list .mk-step>div,.glass-surface,.module,.site-header,.panel-top,.player-top,
    .site-header__menu,.dropdown-menu,dialog.modal) {
    background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}