/* =============================================================
   DaaSFac — FROST skin overlay (mode-adaptive)
   The heavy-blur frosted-glass skin. Colours come from the
   --console-* palette so it works in every colour mode: a bright
   frosted panel in light/beach, a cool dark-frost panel in dark/matt.
   The skin adds the strongest blur, an accent border + glow and
   accent headings so the colour switch is obvious. SCOPED + opt-in:
   inert unless body[data-skin="frost"].
   ============================================================= */

body[data-skin="frost"] .console-container {
  background:
    linear-gradient(180deg, var(--console-accent-dim), transparent 140px),
    color-mix(in srgb, var(--console-bg) 70%, transparent) !important;
  border: 1.5px solid var(--console-accent-1) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(24px) saturate(1.4) !important; -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  box-shadow: 0 0 44px -16px var(--console-accent-1), 0 30px 90px -40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
  color: var(--console-text) !important;
  overflow: hidden !important;
}
body[data-skin="frost"] .console-container:not(.mini-mode)::before,
body[data-skin="frost"] .console-container:not(.mini-mode)::after { content: none !important; display: none !important; }

/* accent-coloured headings/links so the colour switch clearly shows */
body[data-skin="frost"] .brand-logo,
body[data-skin="frost"] h1, body[data-skin="frost"] h2,
body[data-skin="frost"] h3, body[data-skin="frost"] h6,
body[data-skin="frost"] .menu-link:hover { color: var(--console-accent-1) !important; }

body[data-skin="frost"] .console-sidebar {
  background: color-mix(in srgb, var(--console-bg) 58%, transparent) !important;
  border-right: 1px solid var(--console-border) !important;
  backdrop-filter: blur(14px) !important;
}
body[data-skin="frost"] .console-main { background: transparent !important; }

body[data-skin="frost"] .console-window-controls {
  background: color-mix(in srgb, var(--console-bg) 50%, transparent) !important;
  border: 1px solid var(--console-border) !important;
  border-radius: 999px !important;
}
body[data-skin="frost"] .window-control-btn { border-radius: 50% !important; }

body[data-skin="frost"] .console-select,
body[data-skin="frost"] .console-range,
body[data-skin="frost"] input,
body[data-skin="frost"] select,
body[data-skin="frost"] textarea {
  background: var(--console-input-bg) !important;
  border: 1px solid var(--console-border) !important;
  color: var(--console-text) !important;
  border-radius: 11px !important;
}
body[data-skin="frost"] select option { background: var(--console-bg) !important; color: var(--console-text) !important; }
body[data-skin="frost"] .theme-color { border-radius: 50% 50% 12px 12px !important; } /* crystal dome */

body[data-skin="frost"] [class*="panel"],
body[data-skin="frost"] [class*="card"],
body[data-skin="frost"] [class*="tile"],
body[data-skin="frost"] [class*="box"] { border-radius: 16px !important; }

/* === index window (.console-wrapper) — auto-mapped from the console rules above === */
body[data-skin="frost"] .console-wrapper {
  background:
    linear-gradient(180deg, var(--console-accent-dim), transparent 140px),
    color-mix(in srgb, var(--console-bg) 70%, transparent) !important;
  border: 1.5px solid var(--console-accent-1) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(24px) saturate(1.4) !important; -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  box-shadow: 0 0 44px -16px var(--console-accent-1), 0 30px 90px -40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
  color: var(--console-text) !important;
  overflow: hidden !important;
}
body[data-skin="frost"] .console-wrapper::before,
body[data-skin="frost"] .console-wrapper::after {
  content: none !important; display: none !important;
}
body[data-skin="frost"] .panel-left {
  background: color-mix(in srgb, var(--console-bg) 58%, transparent) !important;
  border-right: 1px solid var(--console-border) !important;
  backdrop-filter: blur(14px) !important;
}
body[data-skin="frost"] .panel-right {
  background: transparent !important;
}
body[data-skin="frost"] .color-node {
  border-radius: 50% 50% 12px 12px !important;
}