/* ==================== СТИЛЬ «SPATIUM OS»: весь сайт как терминал ====================
   Включается атрибутом <html data-style="os"> (настройки сайта). Палитра и шрифты — те же, что в консоли Spatium OS.
   В этом стиле тема всегда тёмная (common.js ставит data-theme="dark"), поэтому светлые правила не мешают. */

/* слои CRT скрыты в обычном стиле */
.os-crt{display:none}
.os-flash{position:fixed;inset:0;z-index:2147483600;pointer-events:none;background:#33ff33;opacity:0;transform:scaleY(.004)}
.os-flash.run{animation:osTurnOn .6s ease-out}
@keyframes osTurnOn{
  0%{opacity:.95;transform:scaleY(.004) scaleX(.2)}
  30%{opacity:.95;transform:scaleY(.004) scaleX(1)}
  70%{opacity:.5;transform:scaleY(1) scaleX(1)}
  100%{opacity:0;transform:scaleY(1) scaleX(1)}
}

html[data-style="os"]{
  --os-c:#33ff33;
  --os-bg:#001100;
  --os-glow:rgba(51,255,51,.6);
  --os-dim:rgba(51,255,51,.14);
  --os-dim2:rgba(51,255,51,.38);
  --os-panel:#011a01;
  --os-font:'IBM Plex Mono','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --os-px:'Press Start 2P','SpatiumFont',monospace;
  color-scheme:dark;
  cursor:crosshair;
  background:radial-gradient(ellipse at 50% 0%,#0b2b0b 0%,var(--os-bg) 65%) fixed var(--os-bg);
}

/* ---------- переменные сайта ---------- */
html[data-style="os"][data-theme]{
  --bg-base:var(--os-bg);
  --bg-surface:rgba(0,20,0,.93);
  --bg-surface-hover:var(--os-panel);
  --bg-sidebar:rgba(0,16,0,.92);
  --border-color:var(--os-dim2);
  --border-focus:var(--os-c);
  --text-primary:#33ff33;
  --text-secondary:#27d127;
  --text-muted:#1a8f1a;
  --accent:#33ff33;
  --accent-gradient:linear-gradient(90deg,#33ff33,#9dff9d);
  --accent-glow:rgba(51,255,51,.22);
  --mc-green:#33ff33;--mc-gold:#d6ff3f;--mc-aqua:#4dffd2;
  --code-bg:#000a00;
  --bevel-hi:rgba(51,255,51,.07);--bevel-lo:rgba(0,0,0,.65);
  --pixel-shadow:rgba(51,255,51,.2);
  --shadow:none;
  --ok:#33ff33;--bad:#ff5555;--off:#1a6b1a;
}

/* ---------- фон: свечение выключено, вместо него сетка и экран ЭЛТ ---------- */
html[data-style="os"] body{background-color:transparent;color:var(--os-c);text-shadow:0 0 4px rgba(51,255,51,.35)}
html[data-style="os"] #glowContainer{display:none}
html[data-style="os"] .os-crt{display:block;position:fixed;inset:0;pointer-events:none;z-index:2147483000}
html[data-style="os"] .os-scan{position:absolute;inset:0;background:linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,.28) 50%);background-size:100% 4px}
html[data-style="os"] .os-vig{position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(0,0,0,.75),inset 0 0 40px rgba(51,255,51,.12)}
html[data-style="os"] .os-grid{position:fixed;left:-50%;right:-50%;bottom:-10%;height:60%;overflow:hidden;z-index:-1;
  transform:perspective(380px) rotateX(62deg);transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 85%);mask-image:linear-gradient(to top,#000,transparent 85%)}
html[data-style="os"] .os-grid::before{content:'';position:absolute;left:0;right:0;top:-48px;bottom:0;
  background-image:linear-gradient(var(--os-dim) 1px,transparent 1px),linear-gradient(90deg,var(--os-dim) 1px,transparent 1px);
  background-size:48px 48px;animation:osGridMove 3s linear infinite;will-change:transform}
@keyframes osGridMove{to{transform:translateY(48px)}}

/* ---------- шрифты: моно для текста, пиксельный для заголовков и меток ---------- */
html[data-style="os"] body :is(h1,h2,h3,h4,h5,h6,p,span,a,div,li,button,input,textarea,select,summary,b,strong,small,label,td,th,em,details,section,article,main,aside,nav,header,footer,code,pre){font-family:var(--os-font)}
html[data-style="os"] .wrap h1,
html[data-style="os"] .wrap h2,
html[data-style="os"] .top .logo-text{font-family:var(--os-px);font-weight:400;letter-spacing:.02em;text-shadow:0 0 8px var(--os-glow)}
html[data-style="os"] .wrap .hero h1{font-size:clamp(1.5rem,5vw,2.8rem);line-height:1.3}
html[data-style="os"] .wrap .hero h1::before{content:'> ';opacity:.7}
html[data-style="os"] .wrap .hero h1::after{content:'_';animation:osBlink 1s steps(2) infinite}
html[data-style="os"] .wrap h2{font-size:clamp(.8rem,2.2vw,1rem);text-transform:uppercase}
html[data-style="os"] .wrap h3{font-weight:700}
@keyframes osBlink{50%{opacity:0}}
/* у заголовка героя в обычном стиле градиент-блик: тут он не нужен */
html[data-style="os"] body .hero h1{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--os-c)!important;animation:none!important}
/* метки, кнопки и бейджи остаются пиксельными, как в консоли */
html[data-style="os"] .acc-tip,
html[data-style="os"] .btn,
html[data-style="os"] .category-count,
html[data-style="os"] .cday,
html[data-style="os"] .console-btn,
html[data-style="os"] .head b,
html[data-style="os"] .lkchk,
html[data-style="os"] .lktab,
html[data-style="os"] .nav-badge,
html[data-style="os"] .news small,
html[data-style="os"] .pill,
html[data-style="os"] .plstatus,
html[data-style="os"] .pltag,
html[data-style="os"] .sh-day,
html[data-style="os"] .sh-head h3,
html[data-style="os"] .sidebar-version,
html[data-style="os"] .sk3-msg,
html[data-style="os"] .sl-bubble,
html[data-style="os"] .sl-text,
html[data-style="os"] .toast,
html[data-style="os"] .toppos,
html[data-style="os"] .who h2,
html[data-style="os"] .wiki-count,
html[data-style="os"] button.acc-row,
html[data-style="os"] .st-h{font-family:var(--os-px)}

/* ---------- скругления и размытие убираем ---------- */
html[data-style="os"] *:not(.dot){border-radius:0!important}
html[data-style="os"] .top{backdrop-filter:none;-webkit-backdrop-filter:none}

/* ---------- шапка ---------- */
html[data-style="os"] .top{background:rgba(0,16,0,.95);border-bottom:1px solid var(--os-dim2);box-shadow:0 0 18px var(--os-dim)}
html[data-style="os"] .top .logo-img{filter:invert(70%) sepia(95%) saturate(1500%) hue-rotate(70deg) brightness(105%) drop-shadow(0 0 6px rgba(51,255,51,.7));image-rendering:auto}
html[data-style="os"] .top a.it{text-transform:uppercase;letter-spacing:.06em;font-size:.78rem}
html[data-style="os"] .top a.it.active::before{content:'>';margin-right:-.15rem}
html[data-style="os"] .top a.it.active::after{height:2px;background:var(--os-c);box-shadow:0 0 8px var(--os-glow)}
html[data-style="os"] .top a.it:hover,
html[data-style="os"] .top a.it.active{background:var(--os-dim)}

/* ---------- карточки ---------- */
html[data-style="os"] .card{background:var(--os-panel);border:1px solid var(--os-dim2);border-left:4px solid var(--os-c);
  box-shadow:inset 0 0 24px var(--os-dim)}
html[data-style="os"] .tile:hover{border-color:var(--os-c);box-shadow:inset 0 0 24px var(--os-dim),0 0 16px var(--os-dim2);transform:none}
html[data-style="os"] .tile i.ic{background:var(--os-dim);border:1px solid var(--os-dim2);color:var(--os-c)}
html[data-style="os"] .wrap .hero{border-bottom:1px solid var(--os-dim2)}
html[data-style="os"] .pill{background:var(--os-dim);border:1px solid var(--os-dim2)}
html[data-style="os"] .ip code{background:#000a00;border:1px solid var(--os-dim2);color:var(--os-c)}
html[data-style="os"] details{border-color:var(--os-dim2)}

/* ---------- кнопки ---------- */
html[data-style="os"] .btn,
html[data-style="os"] .lkchk,
html[data-style="os"] .lktab,
html[data-style="os"] .fbtn{background:transparent;color:var(--os-c);border:1px solid var(--os-c);box-shadow:none;text-shadow:0 0 6px var(--os-glow)}
html[data-style="os"] .btn:hover,
html[data-style="os"] .lkchk:hover,
html[data-style="os"] .lktab:hover,
html[data-style="os"] .fbtn:hover{background:var(--os-c);color:#001100;text-shadow:none;box-shadow:0 0 14px var(--os-glow);transform:none}
html[data-style="os"] .btn.primary,
html[data-style="os"] .lktab.on,
html[data-style="os"] .lkchk.on,
html[data-style="os"] .fbtn.on{background:var(--os-c);color:#001100;text-shadow:none;box-shadow:0 0 12px var(--os-dim2)}
html[data-style="os"] .btn.primary:hover{background:#9dff9d;border-color:#9dff9d}
html[data-style="os"] .theme-toggle{background:transparent;border:1px solid var(--os-c);color:var(--os-c)}
html[data-style="os"] .theme-toggle:hover{background:var(--os-c);color:#001100}

/* ---------- поля ввода ---------- */
html[data-style="os"] input:not([type=range]):not([type=checkbox]):not([type=radio]),
html[data-style="os"] textarea,
html[data-style="os"] select{background:#000a00;color:var(--os-c);border:1px solid var(--os-dim2);caret-color:var(--os-c);box-shadow:inset 0 0 12px var(--os-dim);text-shadow:none}
html[data-style="os"] input:focus,
html[data-style="os"] textarea:focus{border-color:var(--os-c);outline:none;box-shadow:inset 0 0 12px var(--os-dim),0 0 10px var(--os-dim2);transform:none}
html[data-style="os"] ::placeholder{color:rgba(51,255,51,.45)}
html[data-style="os"] input[type=range],
html[data-style="os"] input[type=checkbox]{accent-color:var(--os-c)}

/* ---------- окно настроек ---------- */
html[data-style="os"] .color-picker-overlay{background:rgba(0,8,0,.88)}
html[data-style="os"] .color-picker-modal{background:var(--os-bg);border:1px solid var(--os-c);
  box-shadow:0 0 30px var(--os-dim2),inset 0 0 30px var(--os-dim)}
html[data-style="os"] .color-picker-header h3{font-family:var(--os-px);font-weight:400;font-size:.85rem;text-transform:uppercase}
html[data-style="os"] .st-style{background:var(--os-panel);border:1px solid var(--os-dim2);box-shadow:none}
html[data-style="os"] .st-style.on{border-color:var(--os-c);box-shadow:0 0 14px var(--os-dim2)}
html[data-style="os"] .st-seg{border:1px solid var(--os-dim2);background:#000a00;box-shadow:none}
html[data-style="os"] .st-seg button{font-family:var(--os-font)}
html[data-style="os"] .st-seg button + button{border-left:1px solid var(--os-dim2)}
html[data-style="os"] .st-seg button.on{background:var(--os-c);color:#001100;text-shadow:none}
html[data-style="os"] .st-sec{border-top-color:var(--os-dim2)}
html[data-style="os"] .glow-power-btn,
html[data-style="os"] .reset-color-btn{background:transparent;border:1px solid var(--os-dim2);color:var(--os-c);box-shadow:none}
html[data-style="os"] .glow-power-btn:hover,
html[data-style="os"] .reset-color-btn:hover{background:var(--os-dim);border-color:var(--os-c)}

/* ---------- мелочи ---------- */
html[data-style="os"] ::selection{background:var(--os-c);color:#001100;text-shadow:none}
html[data-style="os"] *{scrollbar-color:var(--os-c) var(--os-bg)}
html[data-style="os"] ::-webkit-scrollbar{width:10px;height:10px;background:var(--os-bg)}
html[data-style="os"] ::-webkit-scrollbar-thumb{background:var(--os-c);border:2px solid var(--os-bg)}
html[data-style="os"] a{text-decoration-color:var(--os-dim2)}
html[data-style="os"] .tabbar{background:rgba(0,16,0,.96);border-top:1px solid var(--os-dim2)}
html[data-style="os"] .tabbar a.active{text-shadow:0 0 8px var(--os-glow)}
html[data-style="os"] .page-loader-fill{background:var(--os-c);box-shadow:0 0 10px var(--os-glow)}

@media (prefers-reduced-motion:reduce){
  html[data-style="os"] .os-grid::before,
  html[data-style="os"] .wrap .hero h1::after,
  .os-flash.run{animation:none}
}