/* Theme variants. Colors, fonts and radii come from the active theme (variables set in <head>); the html data attributes below switch the look.
   Loaded after every other stylesheet. Without data-tk (before the update runs) nothing here applies. */

/* shapes */
html[data-tk] .glass{border-radius:var(--r-card)}
html[data-tk] .foot .glass{border-radius:var(--r-card)}
html[data-tk] .bar{border-radius:var(--r-bar)}
html[data-tk] .btn{border-radius:var(--r-btn)}
html[data-tk] .field,html[data-tk] .pill,html[data-tk] .qty,html[data-tk] .nav a{border-radius:min(var(--r-btn),999px)}
html[data-tk][data-rad="sharp"] .field,html[data-tk][data-rad="sharp"] .pill,html[data-tk][data-rad="sharp"] .qty,html[data-tk][data-rad="sharp"] .nav a,html[data-tk][data-rad="sharp"] .chip,html[data-tk][data-rad="sharp"] .st{border-radius:4px}
html[data-tk][data-rad="sharp"] .stage,html[data-tk][data-rad="sharp"] .stage3d,html[data-tk][data-rad="sharp"] .ord,html[data-tk][data-rad="sharp"] .line,html[data-tk][data-rad="sharp"] .co .field,html[data-tk][data-rad="sharp"] .acct .field,html[data-tk][data-rad="sharp"] .opt select{border-radius:6px}
html[data-tk][data-rad="soft"] .stage,html[data-tk][data-rad="soft"] .stage3d,html[data-tk][data-rad="soft"] .ord,html[data-tk][data-rad="soft"] .line{border-radius:12px}
html[data-tk][data-rad="sharp"] .ibtn,html[data-tk][data-rad="soft"] .ibtn{border-radius:10px}

/* buttons */
html[data-tk][data-btn="solid"] .btn:not(.ghost){background:var(--accent);box-shadow:none}
html[data-tk][data-btn="solid"] .btn:not(.ghost):hover{background:color-mix(in srgb,var(--accent) 86%,var(--ink))}
html[data-tk][data-btn="outline"] .btn:not(.ghost){background:transparent;color:var(--accent);border:2px solid var(--accent);box-shadow:none}
html[data-tk][data-btn="outline"] .btn:not(.ghost):hover{background:var(--accent);color:var(--on-accent)}

/* cards and panels */
html[data-tk][data-card="flat"] .glass{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-color:transparent;background:var(--glass-hi)}
html[data-tk][data-card="bordered"] .glass{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border:2px solid var(--edge);background:color-mix(in srgb,var(--bg) 92%,var(--ink))}

/* header */
html[data-tk][data-hdr="bar"] .top{padding-block:0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--edge)}
html[data-tk][data-hdr="bar"] .bar{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;padding-block:10px}
html[data-tk][data-hdr="transparent"] .top{position:absolute;inset-inline:0;top:0}
html[data-tk][data-hdr="transparent"] .bar{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

/* spacing */
html[data-tk][data-dens="compact"] .sec{padding-block:14px 4px}
html[data-tk][data-dens="compact"] .hero{padding-block:18px 12px}
html[data-tk][data-dens="spacious"] .sec{padding-block:48px 14px}
html[data-tk][data-dens="spacious"] .hero{padding-block:60px 40px}

/* page background */
html[data-tk][data-bgs="solid"] body::after{background:var(--bg)}
html[data-tk][data-bgs="gradient"] body::after{background:linear-gradient(160deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,var(--accent) 30%) 55%,color-mix(in srgb,var(--bg) 60%,var(--accent2) 40%) 100%)}

/* effects: bubbles (canvas), light rays, glowing orbs */
html[data-tk]:not([data-fx*="b"]) #bub{display:none}
html[data-tk]:not([data-fx*="r"]) .rays{display:none}
html[data-tk]:not([data-fx*="o"]) .orbs{display:none}

/* theme editor preview: no page scroll lock and no overlays that need a click */
html[data-pv] .fab,html[data-pv] .chatw{pointer-events:none}