@font-face{font-family:'Exo 2';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/exo2-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/exo2-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Tektur';font-style:normal;font-weight:500 900;font-display:swap;src:url(fonts/tektur-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Tektur';font-style:normal;font-weight:500 900;font-display:swap;src:url(fonts/tektur-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --text:#f1ecff; --muted:#c3b9e6; --dim:#9a96aa;
  --ok:#3dffb0; --warn:#ffd23d; --off:#a59cc9; --bad:#ff5c7a; --accent:#ff2ec4; --stop:#ff9db8;
  --glass:rgba(18,10,44,0.72); --line:rgba(255,255,255,0.10);
  --display:'Tektur','Exo 2',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0b0722;-webkit-text-size-adjust:100%}
body{font-family:'Exo 2',system-ui,sans-serif;color:var(--text);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid var(--ok);outline-offset:2px}

.bg{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,#0b0722 0%,#1a0b3a 55%,#2a0f45 100%);pointer-events:none}
.bg-fibers{position:absolute;inset:0;overflow:hidden}
.bg-fibers canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bg-top{position:absolute;left:0;right:0;top:0;height:180px;background:linear-gradient(180deg,rgba(10,5,30,0.70),rgba(10,5,30,0))}

.app{position:relative;z-index:1;max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;
  padding:20px 14px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.app.server{gap:10px}

.head{padding:0 4px 6px}
h1{margin:0;font-family:var(--display);font-weight:900;font-size:28px;color:#fff;text-shadow:0 0 18px rgba(255,46,196,0.8)}
.sub{font-size:14px;color:var(--muted)}

.card{appearance:none;-webkit-appearance:none;width:100%;text-align:left;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);border-radius:18px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:12px 14px;display:flex;align-items:center;gap:12px;min-height:68px}
.ico{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ico img{width:44px;height:44px;border-radius:10px;display:block}
.ico img.px{width:32px;height:32px;image-rendering:pixelated}
.ico .ph{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:20px}
.body{flex-grow:1;min-width:0}
.name{font-family:var(--display);font-size:17px;font-weight:700}
.det{font-size:13px;color:var(--muted)}
.st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;white-space:nowrap}
.st i{width:8px;height:8px;border-radius:4px;background:currentColor;flex-shrink:0}
.st.s-active{color:var(--ok)} .st.s-active i{box-shadow:0 0 8px var(--ok)}
.st.s-activating{color:var(--warn)} .st.s-activating i{box-shadow:0 0 8px var(--warn)}
.st.s-deactivating{color:var(--warn)} .st.s-deactivating i{box-shadow:0 0 8px var(--warn)}
.st.s-inactive{color:var(--off)}
.st.s-failed{color:var(--bad)} .st.s-failed i{box-shadow:0 0 8px var(--bad)}

/* экран сервера */
.back{appearance:none;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--muted);font-size:15px;height:44px;display:flex;align-items:center;align-self:flex-start}
.hero{display:flex;align-items:center;gap:14px}
.hero .big{width:64px;height:64px;flex-shrink:0;border-radius:14px;box-shadow:0 0 24px rgba(255,46,196,0.5);display:flex;align-items:center;justify-content:center}
.hero .big img{width:64px;height:64px;border-radius:14px;display:block}
.hero .big img.px{width:32px;height:32px;image-rendering:pixelated}
.hero .big .ph{width:64px;height:64px;border-radius:14px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:28px}
.hero h1{font-size:26px;color:var(--text);text-shadow:none}
.field{padding:14px 16px;min-height:44px}
.field .lab{font-size:13px;color:var(--muted)}
.field .val{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:0.5px;overflow-wrap:anywhere}
.field .hint{font-size:13px;color:var(--muted)}
.field .hint.done{color:var(--ok);font-weight:700}
.field .cp{color:var(--accent);display:flex}
.field.static{cursor:default}
.howto{font-size:13px;color:var(--muted);padding:0 4px;margin:0;white-space:pre-line}
.btn{appearance:none;width:100%;height:48px;border:1px solid rgba(255,255,255,0.18);border-radius:14px;background:var(--glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--text);font-family:var(--display);font-size:15px;font-weight:700;cursor:pointer}
.btn.primary{border-color:var(--accent);box-shadow:0 0 18px rgba(255,46,196,0.35)}
.btn:disabled{opacity:.6;cursor:default}
.spacer{height:40px}
.stop{appearance:none;height:44px;border:0;background:transparent;font-size:15px;font-weight:700;color:var(--stop);align-self:center;padding:0 16px;cursor:pointer}
.stop:disabled{opacity:.5;cursor:default}
.note{font-size:12px;color:var(--dim);text-align:center}

/* настройки мира */
.app.server h1{margin:0}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:18px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pre{padding:12px 14px}
.plab{font-size:14px;color:var(--muted)}
.plab.pad{font-size:13px;padding-bottom:8px}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sbtn{appearance:none;min-height:44px;border:1px solid rgba(255,255,255,0.14);border-radius:12px;background:rgba(24,14,58,0.62);color:var(--text);font-family:var(--display);font-size:15px;font-weight:700;cursor:pointer;padding:0 6px}
.sbtn.sel{border-color:var(--accent);background:rgba(255,46,196,0.22);box-shadow:0 0 12px rgba(255,46,196,0.35)}
.chg,.chg2{color:#ff8be0}
.chg{font-size:12px;font-weight:400}
.chg2{font-size:13px;padding-top:8px}
.grp{padding:6px 14px}
.gtitle{font-family:var(--display);font-size:13px;font-weight:700;color:var(--muted);padding:6px 0 2px}
.prm,.erow{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid rgba(255,255,255,0.06)}
.gtitle + .prm{border-top:0}
.pval{font-family:var(--display);font-size:18px;font-weight:700;color:#fff}
.pval.ch{color:#ff8be0}
.step{width:44px;font-size:20px;flex-shrink:0}
.step.dis{opacity:.35}
.enum{border-top:1px solid rgba(255,255,255,0.06)}
.gtitle + .enum{border-top:0}
.erow{appearance:none;width:100%;border:0;background:transparent;text-align:left;cursor:pointer;min-height:56px;color:var(--text)}
.chev{font-size:20px;color:var(--accent);padding:0 4px}
.opts{display:flex;flex-direction:column;gap:6px;padding:0 0 8px}
.opts .opt{width:100%;text-align:left;padding:0 14px}
.sws{padding:4px 14px}
.sw{appearance:none;width:100%;min-height:48px;border:0;background:transparent;color:var(--text);font-family:'Exo 2',system-ui,sans-serif;font-size:15px;display:flex;align-items:center;justify-content:space-between;padding:0;border-top:1px solid rgba(255,255,255,0.06);cursor:pointer;text-align:left}
.gtitle + .sw{border-top:0}
.sw .chg{font-size:12px}
.trk{display:inline-flex;align-items:center;width:46px;height:26px;border-radius:13px;background:rgba(255,255,255,0.12);flex-shrink:0}
.knob{width:22px;height:22px;border-radius:11px;margin-left:2px;background:var(--off)}
.knob.on{margin-left:22px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.apply{appearance:none;height:52px;border:0;border-radius:14px;background:linear-gradient(90deg,#c4128f,#6b2bd6);color:#fff;font-family:var(--display);font-size:16px;font-weight:700;box-shadow:0 0 18px rgba(255,46,196,0.5);cursor:pointer;padding:0 12px}
.apply:disabled{background:var(--glass);box-shadow:none;color:var(--muted);border:1px solid var(--line);cursor:default}
.apply.working:disabled{background:linear-gradient(90deg,#7a1a63,#3f1a80);color:#f1ecff;border:0;box-shadow:0 0 12px rgba(255,46,196,0.3)}
.apply.working::after{content:'';display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.sub.working{color:var(--warn)}
.reset{appearance:none;height:44px;border:0;background:transparent;color:var(--muted);font-size:15px;cursor:pointer}
.reset:disabled{opacity:.4;cursor:default}

/* системные экраны */
.msg{margin:auto;text-align:center;padding:24px 8px;display:flex;flex-direction:column;gap:10px;align-items:center}
.msg h1{font-size:24px}
.msg p{margin:0;font-size:15px;color:var(--muted)}
.toast{position:fixed;z-index:5;left:14px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));max-width:452px;margin:0 auto;
  background:rgba(60,12,34,0.92);border:1px solid rgba(255,92,122,0.5);color:#ffd5de;border-radius:14px;padding:12px 14px;font-size:14px}
.toast.ok{background:rgba(8,48,38,0.92);border-color:rgba(61,255,176,0.5);color:#c9ffe9}
.toast[hidden]{display:none}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}