:root{--bg:#06122a;--panel:#0b1d3d;--text:#eaf0ff;--muted:#a7b3d1;--primary:#055ab5;--primary2:#0a6fc9;--accent:#f9403c;--accent2:#f58457;--danger:#eb2531;--border:rgba(255,255,255,.09);}
*{box-sizing:border-box;}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:radial-gradient(1200px 600px at 20% 0%, rgba(10,111,201,.20), transparent 50%),radial-gradient(900px 500px at 90% 20%, rgba(249,64,60,.12), transparent 50%),linear-gradient(180deg,var(--bg),#050913);color:var(--text);}
a{color:var(--primary2);text-decoration:none;}a:hover{text-decoration:underline;}
.shell{display:flex;min-height:100vh;}
.sidebar{width:270px;padding:18px;background:rgba(11,29,61,.92);border-right:1px solid var(--border);}
.brand{display:flex;gap:10px;align-items:center;margin-bottom:18px;}
.brand img{width:34px;height:34px;object-fit:contain;}
.brand .name{font-weight:800;letter-spacing:.2px;}
.brand .sub{color:var(--muted);font-size:12px;margin-top:2px;}
.nav a{display:block;padding:10px 12px;border-radius:14px;color:var(--text);margin-bottom:6px;border:1px solid transparent;}
.nav a.active,.nav a:hover{background:rgba(10,111,201,.14);border-color:rgba(10,111,201,.28);text-decoration:none;}
.spacer{height:10px;}
.main{flex:1;padding:22px;}
.card{background:rgba(11,29,61,.72);border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.20);}
.card.small{padding:14px;}
.k{color:var(--muted);font-size:12px;}
.v{font-size:20px;font-weight:800;margin-top:4px;}
.table{width:100%;border-collapse:collapse;}
.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--border);text-align:left;color:var(--text);}
.table th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.6px;}
.badge{padding:4px 10px;border-radius:999px;font-size:12px;display:inline-block;border:1px solid var(--border);}
.badge.ok{background:rgba(0,209,178,.10);border-color:rgba(0,209,178,.22);}
.badge.off{background:rgba(235,37,49,.10);border-color:rgba(235,37,49,.25);}
.btn{display:inline-block;padding:10px 12px;border-radius:14px;background:rgba(10,111,201,.16);border:1px solid rgba(10,111,201,.30);color:var(--text);}
.btn:hover{background:rgba(10,111,201,.24);text-decoration:none;}
.btn.ghost{background:rgba(255,255,255,.04);border-color:var(--border);}
.btn.danger{background:rgba(235,37,49,.12);border-color:rgba(235,37,49,.25);}
.btn.full{width:100%;text-align:center;margin-top:14px;}
.input,textarea,select{width:100%;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:rgba(0,0,0,.18);color:var(--text);}
label{display:block;margin:10px 0 6px;color:var(--muted);font-size:13px;}
textarea{resize:vertical;}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.muted{color:var(--muted);}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px;}
.login-card{width:min(420px,100%);}
.alert{background:rgba(235,37,49,.12);border:1px solid rgba(235,37,49,.25);padding:10px 12px;border-radius:14px;margin:12px 0;}
.hint{color:var(--muted);font-size:12px;margin-top:12px;}


.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
@media(max-width:900px){.grid5{grid-template-columns:1fr;}}

/* Dialog / modal */
dialog{max-width:none;}
dialog::backdrop{background: rgba(0,0,0,.55);}


/* Toasts */
.toast-container{position:fixed;top:18px;right:18px;z-index:999;display:flex;flex-direction:column;gap:10px;width:min(360px, calc(100% - 36px));pointer-events:none;}
.toast{pointer-events:auto;background: rgba(18, 32, 66, .92);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);border:1px solid rgba(255,255,255,.10);border-radius: 14px;box-shadow: 0 18px 40px rgba(0,0,0,.25);padding: 12px 14px;display:flex;align-items:flex-start;gap:10px;color:#fff;}
.toast .dot{width:10px;height:10px;border-radius:999px;flex:0 0 auto;margin-top:4px;background: rgba(245,154,42,.95);box-shadow: 0 0 0 3px rgba(245,154,42,.16);}
.toast.error .dot{background: rgba(255, 92, 92, .95); box-shadow: 0 0 0 3px rgba(255,92,92,.16)}
.toast.success .dot{background: rgba(90, 255, 154, .95); box-shadow: 0 0 0 3px rgba(90,255,154,.16)}
.toast .msg{font-weight:800;font-size:14px;line-height:1.25;}
.toast button{margin-left:auto;border:0;background:transparent;color:rgba(255,255,255,.75);cursor:pointer;font-weight:900;font-size:14px;padding:2px 6px;}
.toast button:hover{color:#fff}

@media(max-width:760px){.toast-container{top:12px;right:12px}}