/* =============================================================
   DaaSFac — SYNTHWAVE skin overlay (mode-adaptive)
   Neon-chrome decoration over the retro-grid backdrop. Colours come
   from the --console-* palette so it works in every colour mode; the
   skin only adds sharp neon glass, magenta glow and a faint accent
   tint. SCOPED + opt-in: inert unless body[data-skin="synthwave"].
   ============================================================= */

body[data-skin="synthwave"] .console-container {
  background:
    linear-gradient(160deg, var(--console-accent-dim), transparent 60%),
    color-mix(in srgb, var(--console-bg) 56%, transparent) !important;
  border: 1px solid var(--console-accent-2) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(13px) saturate(1.25) !important; -webkit-backdrop-filter: blur(13px) saturate(1.25) !important;
  box-shadow: 0 0 46px -10px var(--console-accent-2), 0 30px 80px -34px rgba(0, 0, 0, .6) !important;
  color: var(--console-text) !important;
  overflow: hidden !important;
}
body[data-skin="synthwave"] .console-container:not(.mini-mode)::before,
body[data-skin="synthwave"] .console-container:not(.mini-mode)::after { content: none !important; display: none !important; }

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

body[data-skin="synthwave"] .console-window-controls {
  background: color-mix(in srgb, var(--console-bg) 40%, transparent) !important;
  border: 1px solid var(--console-accent-1) !important;
  border-radius: 8px !important;
}

body[data-skin="synthwave"] .console-select,
body[data-skin="synthwave"] .console-range,
body[data-skin="synthwave"] input,
body[data-skin="synthwave"] select,
body[data-skin="synthwave"] textarea {
  background: var(--console-input-bg) !important;
  border: 1px solid var(--console-accent-1) !important;
  color: var(--console-text) !important;
  border-radius: 7px !important;
}
body[data-skin="synthwave"] select option { background: var(--console-bg) !important; color: var(--console-text) !important; }
body[data-skin="synthwave"] .theme-color { border-radius: 0 !important; } /* sharp */

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

/* === index window (.console-wrapper) — auto-mapped from the console rules above === */
body[data-skin="synthwave"] .console-wrapper {
  background:
    linear-gradient(160deg, var(--console-accent-dim), transparent 60%),
    color-mix(in srgb, var(--console-bg) 56%, transparent) !important;
  border: 1px solid var(--console-accent-2) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(13px) saturate(1.25) !important; -webkit-backdrop-filter: blur(13px) saturate(1.25) !important;
  box-shadow: 0 0 46px -10px var(--console-accent-2), 0 30px 80px -34px rgba(0, 0, 0, .6) !important;
  color: var(--console-text) !important;
  overflow: hidden !important;
}
body[data-skin="synthwave"] .console-wrapper::before,
body[data-skin="synthwave"] .console-wrapper::after {
  content: none !important; display: none !important;
}
body[data-skin="synthwave"] .panel-left {
  background: color-mix(in srgb, var(--console-bg) 48%, transparent) !important;
  border-right: 1px solid var(--console-accent-1) !important;
  backdrop-filter: blur(9px) !important;
}
body[data-skin="synthwave"] .panel-right {
  background: transparent !important;
}
body[data-skin="synthwave"] .color-node {
  border-radius: 0 !important;
}