:root{
  --bg:#080a0f;
  --bg2:#0b0e15;
  --panel:#10141c;
  --panel2:#131925;
  --line:#222a38;
  --text:#f5f7fb;
  --muted:#929baa;
  --accent:#7b61ff;
  --accent2:#6b8cff;
  --green:#35dc99;
  --yellow:#ffcc66;
  --red:#ff667d;
  --shadow:0 24px 80px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 10% 0,rgba(123,97,255,.16),transparent 28%),radial-gradient(circle at 95% 18%,rgba(75,110,220,.13),transparent 28%),linear-gradient(180deg,#080a0f,#090c12 48%,#080a0f)}
.topbar{width:min(1320px,calc(100% - 28px));height:74px;margin:14px auto 0;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:10px;z-index:30;background:rgba(10,13,19,.88);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(18px);box-shadow:0 12px 40px rgba(0,0,0,.2)}
.brand{display:flex;align-items:center;gap:11px}.brand img{width:46px;height:46px;border-radius:12px}.brand div{display:flex;flex-direction:column}.brand strong{font-size:14px;letter-spacing:.8px}.brand span{font-size:10px;letter-spacing:1.8px;color:#9ca5b5}
.top-actions{display:flex;align-items:center;gap:9px}.clock{font-size:13px;color:#a8b0bf;padding:0 8px}
.button{border:1px solid transparent;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;padding:10px 14px;font-weight:800;font-size:12px;min-height:39px}
.button:hover{filter:brightness(1.06)}
.button.ghost{background:#151a23;border-color:#27303e;color:#d7dce5}
.button.danger{background:#2a1318;border-color:#5e2531;color:#ff92a4}
.hidden{display:none!important}
main{width:min(1320px,calc(100% - 28px));margin:0 auto 80px}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;padding:76px 6px 45px}
.eyebrow{margin:0 0 10px;color:#ad9aff;font-size:11px;font-weight:900;letter-spacing:2px}
h1{font-size:clamp(46px,6vw,78px);line-height:.98;letter-spacing:-3.6px;margin:0;max-width:850px}h1 span{background:linear-gradient(90deg,#8b70ff,#6d90ff);-webkit-background-clip:text;color:transparent}
.hero-copy{max-width:760px;color:var(--muted);font-size:16px;margin:22px 0 0}
.hero-status{justify-self:end;width:min(430px,100%);background:linear-gradient(145deg,#111620,#0d1118);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.big-status{display:flex;align-items:center;gap:13px;padding:8px 5px 17px;border-bottom:1px solid var(--line)}.big-status div{display:flex;flex-direction:column}.big-status b{font-size:16px}.big-status small{font-size:11px;color:var(--muted);margin-top:2px}
.status-dot{width:12px;height:12px;border-radius:50%;display:inline-block;background:#6b7380;box-shadow:0 0 0 5px rgba(255,255,255,.03)}
.status-dot.online{background:var(--green);box-shadow:0 0 18px rgba(53,220,153,.35)}.status-dot.offline{background:var(--red)}.status-dot.checking{background:var(--yellow)}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding-top:14px}.mini-grid div{padding:10px;border:1px solid #1d2532;border-radius:12px;background:#0d1219}.mini-grid b{display:block;font-size:20px}.mini-grid span{font-size:10px;color:var(--muted)}
.tabs{display:flex;gap:6px;padding:6px;border:1px solid var(--line);border-radius:15px;background:#0d1118;position:sticky;top:94px;z-index:20;overflow:auto}.tab{white-space:nowrap;background:transparent;border:0;color:#8f98a8;padding:10px 14px;border-radius:10px;font-weight:800;font-size:12px}.tab.active{background:#1a1f29;color:white}
.panel{display:none;padding:42px 2px}.panel.active{display:block}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.section-head.compact{margin-top:48px}.section-head h2{font-size:32px;letter-spacing:-1.3px;margin:0}
.alert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.alert{border:1px solid var(--line);border-radius:16px;padding:18px;background:#10151d}.alert.ok{border-color:#1d453a}.alert.warn{border-color:#5a4822}.alert.bad{border-color:#5a2630}.alert-head{display:flex;justify-content:space-between;gap:12px}.alert h3{font-size:14px;margin:0}.badge{font-size:9px;padding:5px 8px;border-radius:99px;font-weight:900;letter-spacing:.7px}.badge.ok{background:#12372c;color:#67efb8}.badge.warn{background:#3c3015;color:#ffd375}.badge.bad{background:#3b171d;color:#ff8195}.alert p{font-size:12px;color:var(--muted);margin:10px 0 0}.alert button{margin-top:12px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.service-card,.service-row{border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#10151e,#0c1017)}.service-card{padding:17px;min-height:150px}.service-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.service-name{display:flex;align-items:center;gap:10px}.service-icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid #253043;border-radius:11px;background:#151a24}.service-name b{font-size:13px}.service-name small{display:block;color:var(--muted);font-size:10px}.service-state{font-size:10px;font-weight:900}.service-state.online{color:var(--green)}.service-state.offline{color:var(--red)}.service-state.checking{color:var(--yellow)}
.service-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.service-meta div{padding:9px;border:1px solid #1e2632;border-radius:10px}.service-meta span{display:block;font-size:9px;color:#798494}.service-meta b{font-size:12px}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick{padding:17px;border:1px solid var(--line);border-radius:16px;background:#10151d;transition:.18s}.quick:hover{transform:translateY(-2px);border-color:#36425a}.quick span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#19182a;color:#b5a6ff;margin-bottom:16px}.quick b{display:block;font-size:13px}.quick small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.service-list{display:grid;gap:9px}.service-row{display:grid;grid-template-columns:54px 1fr 180px 140px;gap:14px;align-items:center;padding:12px}.service-row .service-icon{width:42px;height:42px}.service-row h3{font-size:13px;margin:0}.service-row p{font-size:10px;color:var(--muted);margin:2px 0 0}.service-row .url{font-size:10px;color:#9ea7b5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.service-actions{display:flex;justify-content:flex-end;gap:7px}.service-actions a{font-size:10px;padding:8px 9px;border:1px solid #283142;border-radius:9px;color:#d6dce6}
.dependency-card,.danger-card,.data-card{margin-top:26px;padding:22px;border:1px solid var(--line);border-radius:18px;background:#10151d}.dependency-card h3,.danger-card h3,.data-card h3{margin:0 0 15px;font-size:19px}.dep{display:grid;grid-template-columns:260px 1fr;gap:20px;padding:12px 0;border-top:1px solid #1f2733}.dep span{font-size:12px;color:var(--muted)}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.project{padding:18px;border:1px solid var(--line);border-radius:17px;background:#10151d;position:relative}.project-tag{font-size:9px;color:#ad9aff;letter-spacing:1.2px;font-weight:900}.project h3{font-size:17px;margin:9px 0 4px}.project p{font-size:11px;color:var(--muted);min-height:34px}.project-links{display:flex;gap:7px;margin-top:16px}.project-links a,.project-links button{font-size:10px;padding:8px 10px;border:1px solid #283142;background:#141a23;color:white;border-radius:9px}.project .delete-project{position:absolute;top:12px;right:12px;background:transparent;border:0;color:#687384;font-size:15px}
.maintenance-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.maintenance-card{padding:20px;display:grid;grid-template-columns:54px 1fr;gap:15px;border:1px solid var(--line);border-radius:18px;background:#10151d}.card-icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid #293347;border-radius:14px;background:#171d29;font-size:21px}.maintenance-card h3{margin:0;font-size:16px}.maintenance-card p{font-size:11px;color:var(--muted)}.date-line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #1e2632;font-size:11px}.date-line span{color:#8f99a8}.maintenance-card .button{margin-top:12px}.input-label{display:block;color:#8d97a6;font-size:10px;margin-top:12px}.inline{display:flex;gap:8px;margin-top:5px}.inline input{flex:1}
input,textarea{width:100%;background:#0a0e14;border:1px solid #273143;color:white;border-radius:10px;padding:10px;outline:none}input:focus,textarea:focus{border-color:#5d56ac}
.dont-delete{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dont-delete div{padding:12px;border:1px solid #242e3d;border-radius:11px;background:#0d1219}.dont-delete b{display:block;font-size:12px}.dont-delete span{display:block;font-size:10px;color:var(--muted);margin-top:3px}.warning-row{margin-top:13px;padding:12px;border:1px solid #51431e;background:#201b0e;border-radius:11px;color:#e9cf83;font-size:11px}
.timeline{position:relative;padding-left:20px}.timeline::before{content:"";position:absolute;left:7px;top:5px;bottom:5px;width:1px;background:#283143}.timeline-item{position:relative;padding:0 0 24px 22px}.timeline-item::before{content:"";position:absolute;left:-18px;top:5px;width:10px;height:10px;border-radius:50%;background:#8b73ff;box-shadow:0 0 0 4px #131721}.timeline-item time{font-size:9px;color:#788394}.timeline-item h3{font-size:14px;margin:5px 0 3px}.timeline-item p{font-size:11px;color:var(--muted);margin:0}.timeline-item .remove-history{margin-top:7px;background:transparent;border:0;color:#657080;font-size:9px;padding:0}
.data-card{max-width:850px}.data-card p{color:var(--muted);font-size:12px}.data-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}.file-label input{display:none}.link-button{display:inline-flex;align-items:center}
dialog{border:1px solid #293348;background:#10151e;color:white;border-radius:18px;padding:0;box-shadow:0 35px 120px rgba(0,0,0,.55);width:min(520px,calc(100% - 30px))}dialog::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(5px)}dialog form{padding:22px}dialog h3{margin:0 0 18px}dialog label{display:block;font-size:11px;color:#9aa4b3;margin-top:12px}dialog input,dialog textarea{margin-top:5px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.toast{position:fixed;right:18px;bottom:18px;z-index:99;transform:translateY(20px);opacity:0;pointer-events:none;transition:.22s;background:#171d28;border:1px solid #2d394c;padding:12px 15px;border-radius:11px;font-size:11px;box-shadow:var(--shadow)}.toast.show{transform:translateY(0);opacity:1}
@media(max-width:1000px){.hero{grid-template-columns:1fr}.hero-status{justify-self:start}.alert-grid,.service-grid,.project-grid{grid-template-columns:1fr 1fr}.quick-grid{grid-template-columns:1fr 1fr}.service-row{grid-template-columns:54px 1fr 130px}.service-row .url{display:none}}
@media(max-width:680px){.topbar{height:auto;align-items:flex-start}.brand span{display:none}.top-actions{flex-wrap:wrap;justify-content:flex-end}.clock{display:none}.hero{padding-top:48px}.alert-grid,.service-grid,.project-grid,.maintenance-grid,.quick-grid{grid-template-columns:1fr}.service-row{grid-template-columns:48px 1fr}.service-actions{grid-column:1/-1;justify-content:flex-start}.tabs{top:86px}.dep{grid-template-columns:1fr;gap:3px}.dont-delete{grid-template-columns:1fr}.section-head{align-items:flex-start;flex-direction:column}h1{letter-spacing:-2.5px}}