/* Appearance v4: six balanced themes, stable admin state and real focus-style lens controls. */

/* 3 dark themes */
html[data-theme="dark"],html[data-theme="system-dark"]{
  --bg:#0d1217;--surface:#171f26;--soft:#222d36;--text:#f4f7fa;--muted:#aab6c1;--line:#33424e;--hero:#182b39;--bad:#ff6f7d;--shadow:0 14px 36px #0005;color-scheme:dark
}
html[data-theme="amoled"]{
  --bg:#000;--surface:#090d10;--soft:#11181d;--text:#f7fafb;--muted:#a3afb7;--line:#27343d;--hero:#0b1b18;--bad:#ff7180;--shadow:0 14px 38px #0009;color-scheme:dark
}
html[data-theme="emerald"]{
  --bg:#071612;--surface:#0d241d;--soft:#153129;--text:#effbf5;--muted:#a4c4b6;--line:#2b4e40;--hero:#0a3025;--bad:#ff7c86;--shadow:0 14px 36px #00140d88;color-scheme:dark
}
/* 3 bright themes */
html[data-theme="light"],html[data-theme="system"]{
  --bg:#f3f1ec;--surface:#fffefa;--soft:#e8e9e6;--text:#18222d;--muted:#65717d;--line:#d7dcd9;--hero:#33485e;--bad:#a8303c;--shadow:0 12px 30px #34485b18;color-scheme:light
}
html[data-theme="caucasus"]{
  --bg:#f6efe3;--surface:#fffaf1;--soft:#eadfce;--text:#352c24;--muted:#746354;--line:#dccbb5;--hero:#553b2d;--bad:#a43735;--shadow:0 12px 30px #5a38201c;color-scheme:light
}
html[data-theme="blue"]{
  --bg:#edf4fb;--surface:#fafdff;--soft:#dfeaf5;--text:#172a40;--muted:#5b718a;--line:#cbdbea;--hero:#183f69;--bad:#a53549;--shadow:0 12px 30px #183f6918;color-scheme:light
}

/* One always-visible window tone slider; glass-only controls are genuinely hidden when glass is off. */
#window-tone-field{margin-top:14px}
#window-tone-output{float:right;color:var(--text);font-weight:750}
#glass-transparency-field[hidden],#glass-lens-field[hidden]{display:none!important}

/* Inactive admin stays native. Active admin is unmistakable without changing its geometry. */
header .lezgchal-admin-active,.header-actions .lezgchal-admin-active{
  color:var(--accent)!important;
  background:color-mix(in srgb,var(--accent) 18%,var(--surface))!important;
  border-color:color-mix(in srgb,var(--accent) 70%,transparent)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent),0 0 18px color-mix(in srgb,var(--accent) 28%,transparent)!important
}

/* Tone works in ordinary/non-liquid mode too. */
html[data-liquid-glass="off"]:not([data-wallpaper="plain"]) :is(.card,.metric,.tile,.lesson,.list-row,.option,.feedback,.badge,.answer-reviewed,.settings-card,.mode-switch,.segmented,.course-cover){
  background:linear-gradient(var(--window-tone-overlay),var(--window-tone-overlay)),var(--surface)!important
}
html[data-liquid-glass="off"]:not([data-wallpaper="plain"]) .hero{
  background:linear-gradient(var(--window-tone-overlay),var(--window-tone-overlay)),var(--hero)!important
}
html[data-liquid-glass="off"]:not([data-wallpaper="plain"]) :is(input:not([type=checkbox]):not([type=range]),select,textarea,.secondary,.wallpaper-picker-trigger,.wallpaper-row-action){
  background:linear-gradient(var(--window-tone-overlay),var(--window-tone-overlay)),var(--surface)!important
}
html[data-liquid-glass="off"]:not([data-wallpaper="plain"]) #nav{
  background:linear-gradient(var(--window-tone-overlay),var(--window-tone-overlay)),color-mix(in srgb,var(--surface) 92%,transparent)!important
}

/* Liquid glass: transparent material with a calm optical lens, not a bloom/glare filter. */
html[data-liquid-glass="on"]:not([data-wallpaper="plain"]) :is(.card,.metric,.tile,.lesson,.list-row,.option,.feedback,.badge,.answer-reviewed,.settings-card,.mode-switch,.segmented,.course-cover){
  background:
    linear-gradient(var(--window-tone-overlay),var(--window-tone-overlay)),
    radial-gradient(115% 92% at 50% 47%,rgba(255,255,255,var(--lg-lens-center-alpha)) 0%,transparent 58%,rgba(255,255,255,var(--lg-lens-edge-light)) 88%,rgba(0,0,0,var(--lg-lens-edge-dark)) 100%),
    color-mix(in srgb,var(--surface) var(--lg-fill),transparent)!important;
  border-color:var(--lg-edge)!important;
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast))!important;
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast))!important;
  box-shadow:inset 0 0 0 var(--lg-lens-ring-width) rgba(255,255,255,var(--lg-lens-ring-opacity)),0 10px 27px var(--lg-drop)!important
}

html[data-liquid-glass="on"]:not([data-wallpaper="plain"]) .hero{
  background:
    linear-gradient(var(--window-tone-overlay),var(--window-tone-overlay)),
    radial-gradient(118% 94% at 50% 46%,rgba(255,255,255,var(--lg-lens-center-alpha)) 0%,transparent 58%,rgba(255,255,255,var(--lg-lens-edge-light)) 88%,rgba(0,0,0,var(--lg-lens-edge-dark)) 100%),
    color-mix(in srgb,var(--hero) var(--lg-hero-fill),transparent)!important;
  border-color:var(--lg-edge)!important;
  -webkit-backdrop-filter:blur(var(--lg-hero-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast))!important;
  backdrop-filter:blur(var(--lg-hero-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast))!important;
  box-shadow:inset 0 0 0 var(--lg-lens-ring-width) rgba(255,255,255,var(--lg-lens-ring-opacity)),0 14px 32px var(--lg-drop)!important
}
html[data-liquid-glass="on"]:not([data-wallpaper="plain"]) :is(input:not([type=checkbox]):not([type=range]),select,textarea,.secondary,.wallpaper-picker-trigger,.wallpaper-row-action){
  background:linear-gradient(var(--window-tone-overlay),var(--window-tone-overlay)),color-mix(in srgb,var(--surface) var(--lg-control-fill),transparent)!important;
  border-color:var(--lg-edge-soft)!important;
  -webkit-backdrop-filter:blur(var(--lg-control-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast))!important;
  backdrop-filter:blur(var(--lg-control-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,var(--lg-lens-ring-opacity))!important
}
html[data-liquid-glass="on"]:not([data-wallpaper="plain"]) #nav{
  background:linear-gradient(var(--window-tone-overlay),var(--window-tone-overlay)),color-mix(in srgb,var(--surface) var(--lg-nav-fill),transparent)!important;
  border-color:var(--lg-edge)!important;
  -webkit-backdrop-filter:blur(var(--lg-nav-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast))!important;
  backdrop-filter:blur(var(--lg-nav-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast))!important;
  box-shadow:inset 0 0 0 var(--lg-lens-ring-width) rgba(255,255,255,var(--lg-lens-ring-opacity)),0 14px 32px var(--lg-drop)!important
}
html[data-liquid-glass="on"]:not([data-wallpaper="plain"]) .header-actions .icon-button{
  background:linear-gradient(var(--window-tone-overlay),var(--window-tone-overlay)),color-mix(in srgb,var(--surface) var(--lg-control-fill),transparent)!important;
  border-color:var(--lg-edge-soft)!important;
  -webkit-backdrop-filter:blur(var(--lg-control-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast))!important;
  backdrop-filter:blur(var(--lg-control-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,var(--lg-lens-ring-opacity)),0 6px 15px var(--lg-drop)!important
}
html[data-liquid-glass="on"]:not([data-wallpaper="plain"]) .header-actions .lezgchal-admin-active{
  color:var(--accent)!important;
  border-color:color-mix(in srgb,var(--accent) 72%,var(--lg-edge))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent),0 0 18px color-mix(in srgb,var(--accent) 30%,transparent)!important
}

@media (prefers-reduced-motion:reduce){#window-tone-field,#glass-transparency-field,#glass-lens-field{transition:none!important}}