* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --side:#333b47; --side-h:#3d4754; --red:#e8453c; --green:#00a656; --blue:#2f8eea;
  --dark:#37424e; --bg:#f2f2f2; --card:#fff; --text:#2b323a; --mut:#8a97a5;
}
html,body { height:100%; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--bg); color:var(--text); }
.hidden { display:none !important; }

.shell { display:flex; min-height:100vh; }
.side { width:225px; background:var(--side); color:#cfd6de; position:fixed; top:0; bottom:0; left:0; display:flex; flex-direction:column; }
.brand { background:#2d343f; border-left:6px solid var(--red); padding:16px 18px; font-weight:700; color:#fff; display:flex; align-items:center; gap:10px; }
.bname { font-size:15px; }
.bdot { width:12px; height:12px; border-radius:50%; background:#9aa4ae; margin-left:auto; }
.bdot.on { background:var(--green); box-shadow:0 0 6px var(--green); }
.bdot.off { background:var(--red); }
nav { flex:1; padding:10px 0; overflow-y:auto; }
nav a { display:flex; align-items:center; gap:12px; color:#cfd6de; text-decoration:none; padding:11px 20px; font-size:15px; border-left:4px solid transparent; }
nav a:hover { background:var(--side-h); color:#fff; }
nav a.active { background:var(--side-h); color:#fff; border-left-color:var(--red); }
nav .ic { width:22px; text-align:center; font-size:14px; opacity:.9; }
.side-foot { padding:14px 20px; border-top:1px solid #3d4754; }
.linkbtn { background:none; border:none; color:#8a97a5; cursor:pointer; font-size:13px; }
.linkbtn:hover { color:#fff; }

.main { margin-left:225px; flex:1; padding:26px 34px; max-width:1200px; }
.page h1 { font-size:22px; margin-bottom:18px; }

.card { background:var(--card); border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:18px; margin-bottom:16px; }
.card h3 { font-size:15px; margin-bottom:10px; }

.banner { padding:16px; border-radius:6px; text-align:center; color:#fff; font-size:20px; font-weight:700; margin-bottom:16px; }
.banner.on { background:var(--green); }
.banner.off { background:var(--red); }

.addr { background:var(--dark); color:#fff; border-radius:6px 6px 0 0; padding:22px; text-align:center; }
.addr .host { font-size:26px; font-weight:800; margin-bottom:10px; word-break:break-all; }
.addr .sub { color:#aab6c2; font-size:13px; margin-top:8px; }
.btn { border:none; border-radius:5px; color:#fff; cursor:pointer; font-weight:700; font-size:14px; padding:10px 18px; }
.btn:hover { filter:brightness(1.08); }
.btn.green { background:var(--green); } .btn.red { background:var(--red); }
.btn.blue { background:var(--blue); } .btn.dark { background:var(--dark); }
.btn.grey { background:#8a97a5; }
.btn.big { font-size:18px; padding:16px 42px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.center { text-align:center; }
.mt { margin-top:16px; }

.statgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.stat { background:var(--card); border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:16px; }
.stat .lab { font-size:12px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; }
.stat .val { font-size:20px; font-weight:700; margin-top:4px; }
.stat .sub { font-size:12px; color:var(--mut); margin-top:4px; }
.bar { height:8px; background:#e4e8ec; border-radius:4px; margin-top:10px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--blue); }

/* options */
.props-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.opt { background:var(--card); border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:14px; }
.opt .row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.opt .name { font-weight:700; font-size:14px; }
.opt .key { font-size:11px; color:var(--mut); font-family:Consolas,monospace; background:#eef1f4; padding:3px 6px; border-radius:3px; margin-top:8px; word-break:break-all; }
.switch { position:relative; width:46px; height:24px; background:#c6ccd2; border-radius:12px; cursor:pointer; transition:.15s; flex-shrink:0; }
.switch:after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:.15s; }
.switch.on { background:var(--green); }
.switch.on:after { left:25px; }
.opt select, .opt input[type=text], .opt input[type=number], .opt textarea { width:60%; padding:8px; border:1px solid #d4d9de; border-radius:5px; font-size:13px; }
.stepper { display:flex; align-items:center; gap:0; }
.stepper button { width:26px; height:32px; background:var(--dark); color:#fff; border:none; cursor:pointer; font-weight:800; }
.stepper button.minus { border-radius:5px 0 0 5px; } .stepper button.plus { border-radius:0 5px 5px 0; }
.stepper span { min-width:44px; text-align:center; background:#fff; border:1px solid #d4d9de; height:32px; line-height:32px; font-weight:700; }

/* console */
.console { background:#14171a; color:#dfe6ec; font-family:Consolas,'Courier New',monospace; font-size:13px; border-radius:6px; padding:12px; height:480px; overflow-y:auto; white-space:pre-wrap; word-break:break-all; }
.console .err { color:#ff8f88; }
.conin { display:flex; gap:10px; margin-top:10px; }
.conin input { flex:1; background:#14171a; border:1px solid #37424e; color:#dfe6ec; border-radius:5px; padding:10px 12px; font-family:Consolas,monospace; font-size:13px; }
.conin input:focus { outline:1px solid var(--blue); }

/* players */
.pbtns { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:16px; }
.pbtn { padding:20px; border-radius:6px; color:#fff; font-size:16px; font-weight:700; cursor:pointer; border:none; display:flex; align-items:center; justify-content:center; gap:10px; }
.pbtn.b { background:var(--blue); } .pbtn.r { background:var(--red); }
.plist { list-style:none; }
.plist li { display:flex; align-items:center; justify-content:space-between; padding:10px 4px; border-bottom:1px solid #eef1f4; }
.plist li:last-child { border-bottom:none; }
.tag { font-size:11px; background:#eef1f4; color:var(--mut); border-radius:3px; padding:2px 6px; margin-left:8px; }

/* mods */
.modsearch { display:flex; gap:10px; margin-bottom:16px; }
.modsearch input { flex:1; padding:11px 14px; border:1px solid #d4d9de; border-radius:5px; font-size:14px; }
.mrow { display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid #eef1f4; }
.mrow:last-child { border-bottom:none; }
.micon { width:40px; height:40px; border-radius:6px; background:#e4e8ec; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--mut); }
.micon img { width:40px; height:40px; border-radius:6px; object-fit:cover; }
.mrow .grow { flex:1; min-width:0; }
.mrow .t { font-weight:700; font-size:14px; }
.mrow .d { font-size:12px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mrow .s { font-size:11px; color:var(--mut); }
.dl-sm { font-size:11px; color:var(--mut); }

/* files */
.crumbs { display:flex; align-items:center; gap:4px; background:var(--dark); color:#fff; border-radius:6px; padding:12px 16px; margin-bottom:12px; flex-wrap:wrap; }
.crumbs a { color:#9fc3ff; cursor:pointer; text-decoration:none; font-weight:600; }
.crumbs span.sep { color:#66707c; }
.frow { display:flex; align-items:center; gap:12px; background:var(--card); padding:10px 14px; border-radius:6px; margin-bottom:8px; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.frow .fname { font-weight:600; cursor:pointer; flex:1; min-width:0; word-break:break-all; }
.frow .fname:hover { color:var(--blue); }
.fsize { font-size:12px; color:var(--mut); white-space:nowrap; }
.ibtn { border:none; border-radius:4px; color:#fff; cursor:pointer; padding:6px 9px; font-size:12px; }
.ibtn.dl { background:var(--blue); } .ibtn.del { background:var(--red); } .ibtn.ed { background:var(--green); }
.filebar { display:flex; gap:10px; margin-bottom:12px; }

/* modal */
.overlay { position:fixed; inset:0; background:rgba(20,24,29,.6); z-index:50; display:flex; align-items:center; justify-content:center; }
.login-card { background:#fff; border-radius:8px; padding:34px; width:340px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.3); }
.login-title { font-size:22px; font-weight:800; }
.login-sub { color:var(--mut); font-size:13px; margin:4px 0 18px; }
.login-card input { width:100%; padding:12px; border:1px solid #d4d9de; border-radius:5px; font-size:14px; margin-bottom:12px; }
.login-card .big { width:100%; }
.login-err { color:var(--red); font-size:13px; margin-top:10px; min-height:18px; }
.modal-card { background:#fff; border-radius:8px; padding:24px; width:min(560px,92vw); max-height:80vh; overflow:auto; }
.modal-card h3 { margin-bottom:12px; }
.modal-card textarea { width:100%; height:300px; font-family:Consolas,monospace; font-size:12px; padding:10px; border:1px solid #d4d9de; border-radius:5px; }
.modal-actions { display:flex; gap:10px; margin-top:14px; justify-content:flex-end; }
.addrow { display:flex; gap:8px; margin:12px 0; }
.addrow input { flex:1; padding:9px; border:1px solid #d4d9de; border-radius:5px; }

/* toast */
.toast { position:fixed; bottom:24px; right:24px; background:var(--dark); color:#fff; padding:12px 20px; border-radius:6px; font-size:14px; z-index:99; box-shadow:0 4px 16px rgba(0,0,0,.3); max-width:420px; }
.toast.err { background:var(--red); }
.spin { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sp 1s linear infinite; vertical-align:-2px; }
@keyframes sp { to { transform:rotate(360deg); } }
@media (max-width:760px){ .side{width:64px;} .side .bname{display:none;} nav a{justify-content:center; padding:14px 0;} nav a .ic{font-size:16px;} .main{margin-left:64px; padding:16px;} }