/* ===== PHOENIX · Liquid Glass skin (AI ULTRA reference) =====
   Активируется атрибутом html[data-skin="glass"].
   Работает поверх базовых токенов портала, светлая и тёмная темы. */

html[data-skin="glass"]{
  --r-lg:26px; --r-md:18px; --r-sm:13px;

  /* LIGHT (по умолчанию data-theme="light") */
  --clay:rgba(255,255,255,.52);
  --clay-2:rgba(255,255,255,.68);
  --glass-b:blur(26px) saturate(185%);
  --glass-sh:0 10px 30px rgba(70,95,140,.16);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.28);
}

html[data-skin="glass"][data-theme="light"]{
  --bg:#e7ecf5;
  --panel:rgba(255,255,255,.52);
  --panel2:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.55);
  --text:#1b1f27; --muted:#5f6672; --faint:#828a97;
  --accent:#0a84ff; --accent-hi:#3aa0ff; --accent-dim:#6f93bd;
  --glow:10,132,255; --field:rgba(255,255,255,.45); --ink:#ffffff;
}

/* DARK — тема по умолчанию портала */
html[data-skin="glass"]:not([data-theme="light"]){
  --bg:#0e1116;
  --clay:rgba(255,255,255,.075);
  --clay-2:rgba(255,255,255,.11);
  --panel:rgba(255,255,255,.075);
  --panel2:rgba(255,255,255,.11);
  --line:rgba(255,255,255,.14);
  --text:#eef1f7; --muted:#9aa2b1; --faint:#78808f;
  --accent:#64d2ff; --accent-hi:#9ce3ff; --accent-dim:#5a7f92;
  --glow:100,210,255; --field:rgba(255,255,255,.06); --ink:#0e1116;
  --glass-sh:0 12px 34px rgba(0,0,0,.45);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.05);
}

/* Аврора — обязательный фон */
html[data-skin="glass"] body{
  background:
    radial-gradient(90vw 60vh at 12% -8%,  color-mix(in oklab, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(80vw 55vh at 105% 12%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 72%),
    radial-gradient(85vw 60vh at 50% 112%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%),
    var(--bg);
  background-attachment:fixed;
  transition:background .35s, color .35s;
}

/* Стеклянные поверхности */
html[data-skin="glass"] header{
  background:color-mix(in oklab, var(--bg) 55%, transparent);
  backdrop-filter:var(--glass-b);
  border-bottom:1px solid var(--line);
}
html[data-skin="glass"] .tool,
html[data-skin="glass"] .picker,
html[data-skin="glass"] .card,
html[data-skin="glass"] .box,
html[data-skin="glass"] .modal,
html[data-skin="glass"] .sup{
  background:var(--clay);
  backdrop-filter:var(--glass-b);
  box-shadow:var(--glass-sh), var(--glass-edge);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
html[data-skin="glass"] .picker{border-radius:var(--r-lg)}

html[data-skin="glass"] .state,
html[data-skin="glass"] .pill,
html[data-skin="glass"] .theme,
html[data-skin="glass"] .skin,
html[data-skin="glass"] .langs button,
html[data-skin="glass"] .found button{
  background:var(--clay-2);
  backdrop-filter:var(--glass-b);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  box-shadow:var(--glass-edge);
}
html[data-skin="glass"] .state[aria-pressed="true"],
html[data-skin="glass"] .langs button[aria-pressed="true"]{
  background:color-mix(in oklab, var(--accent) 16%, var(--clay));
  color:var(--accent);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.14), var(--glass-edge);
}
html[data-skin="glass"] .tool:hover{
  border-color:color-mix(in oklab, var(--accent) 45%, var(--line));
  box-shadow:0 22px 50px -22px color-mix(in oklab, var(--accent) 55%, transparent), var(--glass-edge);
}
html[data-skin="glass"] input,
html[data-skin="glass"] textarea,
html[data-skin="glass"] select{
  background:color-mix(in oklab, var(--clay) 60%, transparent);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.10), var(--glass-edge);
  color:var(--text);
}

/* Hero — стеклянный, вместо плоского чёрного */
html[data-skin="glass"] .hero{
  background:
    radial-gradient(70vw 70vh at 50% -20%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 72%),
    color-mix(in oklab, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--line);
}
html[data-skin="glass"] .hero h1{color:var(--text);text-shadow:0 2px 30px color-mix(in oklab, var(--accent) 35%, transparent)}
html[data-skin="glass"] .hero .lead{color:var(--muted)}
html[data-skin="glass"] .hero .pill{
  background:var(--clay-2);
  border-color:var(--line);
  color:var(--text);
}
html[data-skin="glass"] .hero .pill b{color:var(--accent)}