:root {
  --bg:#05080f; --panel:#0b0f19; --panel2:#0f1521;
  --border:#1e293b; --border2:#263044;
  --cyan:#00f0ff; --cyan-d:rgba(0,240,255,.1); --cyan-g:rgba(0,240,255,.04);
  --green:#00ff9d; --red:#ff4757; --yellow:#ffd32a; --purple:#a78bfa;
  --text:#e2e8f0; --muted:#64748b; --muted2:#94a3b8;
  --font:'Cascadia Code','Fira Code','Consolas',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;height:100vh;display:flex;flex-direction:column;overflow:hidden;user-select:none;}

/* ── TOP BAR ── */
#topbar{display:flex;align-items:center;gap:12px;padding:0 16px;height:44px;background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0;}
.logo{font-size:16px;font-weight:700;color:var(--cyan);letter-spacing:4px;text-shadow:0 0 12px var(--cyan);}
#entity-state{font-size:11px;padding:2px 10px;border-radius:20px;border:1px solid var(--muted);color:var(--muted);transition:all .4s;}
#entity-state.online{border-color:var(--green);color:var(--green);box-shadow:0 0 8px rgba(0,255,157,.2);}
#entity-state.error{border-color:var(--red);color:var(--red);}
.spacer{flex:1;}
#mode-toggle{display:flex;border:1px solid var(--border);border-radius:5px;overflow:hidden;}
.mode-btn{padding:4px 14px;font-family:var(--font);font-size:11px;letter-spacing:1px;cursor:pointer;background:transparent;border:none;color:var(--muted);transition:all .15s;}
.mode-btn.active{background:var(--cyan-d);color:var(--cyan);}

/* ── PAGE NAV ── */
.page-nav{display:flex;gap:2px;border:1px solid var(--border);border-radius:6px;padding:2px;background:var(--bg);}
.page-nav-btn{padding:3px 12px;font-family:var(--font);font-size:10px;letter-spacing:1.5px;border:none;border-radius:4px;background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;}
.page-nav-btn:hover:not(.active){color:var(--text);background:var(--border);}
.page-nav-btn.active{background:var(--cyan-d);color:var(--cyan);cursor:default;}

/* ── SELECTS (theme / font) ── */
#theme-select{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:11px;padding:4px 8px;border-radius:5px;cursor:pointer;max-width:160px;}
#theme-select:focus{outline:none;border-color:var(--cyan);}
#theme-select option{background:var(--panel);color:var(--text);}
#editor-font-select,#editor-font-size{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:11px;padding:4px 8px;border-radius:5px;cursor:pointer;}
#editor-font-select:focus,#editor-font-size:focus{outline:none;border-color:var(--cyan);}

/* ── BODY ── */
#body{flex:1;display:flex;overflow:hidden;}

/* ── MODALS ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:2000;display:flex;align-items:center;justify-content:center;}
.modal{background:var(--panel);border:1px solid var(--border2);border-radius:8px;padding:20px;min-width:300px;max-width:420px;width:100%;}
.modal h3{font-size:14px;color:var(--text);margin-bottom:12px;}
.modal input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:13px;padding:7px 10px;border-radius:5px;margin-bottom:12px;}
.modal input:focus{outline:none;border-color:var(--cyan);}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;}

/* ── BUTTONS ── */
.btn{font-family:var(--font);font-size:12px;padding:5px 13px;border-radius:5px;cursor:pointer;border:1px solid;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;}
.btn-cyan{background:var(--cyan-d);border-color:var(--cyan);color:var(--cyan);}
.btn-cyan:hover{background:rgba(0,240,255,.18);}
.btn-green{background:rgba(0,255,157,.07);border-color:var(--green);color:var(--green);}
.btn-green:hover{background:rgba(0,255,157,.16);}
.btn-red{background:rgba(255,71,87,.07);border-color:var(--red);color:var(--red);}
.btn-red:hover{background:rgba(255,71,87,.16);}
.btn-muted{background:transparent;border-color:var(--border);color:var(--muted);}
.btn-muted:hover{border-color:var(--muted);color:var(--text);}
.btn-sm{padding:3px 10px;font-size:11px;}

.hidden{display:none!important;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}