:root{--blue:#8ec7fb;--blue2:#2f86dd;--text:#1f2937;--muted:#6b7280;--bg:#f7f8fb;--line:#e8edf3}.app-shell{display:flex;min-height:100vh;background:var(--bg);color:var(--text)}.sidebar{width:250px;background:#fff;border-right:1px solid var(--line);padding:14px 12px;position:fixed;inset:0 auto 0 0;overflow:auto}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#0b84d8,#34d399);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}.brand span{display:block;font-size:11px;letter-spacing:4px;color:#64748b}.sidebar nav{margin-top:18px}.sidebar a{display:flex;gap:10px;align-items:center;text-decoration:none;color:#4b5563;padding:10px 12px;border-radius:8px;margin:3px 0;font-size:14px}.sidebar a.active,.sidebar a:hover{background:#99cffd;color:#111827}.main{margin-left:250px;width:calc(100% - 250px)}.topbar{height:74px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px}.topbar h1{font-size:18px;margin:0}.topbar p{margin:0;color:var(--muted);font-size:13px}.search{width:360px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 10px;display:flex;align-items:center;gap:8px}.search input{border:0;outline:0;flex:1}.search kbd{background:#f3f4f6;color:#6b7280}.content{padding:24px}.dashboard-greeting{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.expiry{background:#fff;border:1px solid var(--line);padding:9px 13px;border-radius:8px;margin-right:8px}.metric-card{background:#95cafa;border-radius:8px;padding:20px;box-shadow:0 6px 12px rgba(47,134,221,.17);position:relative;overflow:hidden}.metric-card:after{content:"";position:absolute;left:0;right:0;bottom:-20px;height:50px;background:rgba(255,255,255,.35);border-radius:50% 50% 0 0}.metric-card span,.metric-card small{display:block}.metric-card strong{font-size:24px}.panel,.card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.02)}.panel{padding:18px}.panel-head{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}.panel h5{margin:0}.panel p{margin:3px 0 0;color:var(--muted);font-size:13px}.mini-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;display:block;text-decoration:none;color:var(--text)}.mini-stat strong{display:block;font-size:22px}.mini-stat span{color:var(--muted)}.module-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.module-head h2{font-size:23px}.module-head p{color:var(--muted);margin:0}.form-card{margin-bottom:18px}.login-body{min-height:100vh;background:linear-gradient(135deg,#e0f2fe,#f8fafc);display:flex;align-items:center;justify-content:center}.login-card{width:420px;background:#fff;border-radius:18px;padding:32px;box-shadow:0 20px 60px rgba(30,64,175,.14)}@media(max-width:900px){.sidebar{position:static;width:100%;height:auto}.app-shell{display:block}.main{margin:0;width:100%}.topbar{height:auto;gap:12px;align-items:start;flex-direction:column}.search{width:100%}}

/* ===== Bravitech dashboard additions (original styling) ===== */
.nav-group-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#9aa6b6;margin:16px 12px 6px;font-weight:700}
.sidebar a span{font-size:14px}
.sidebar a i{font-size:16px;width:20px;text-align:center}

.dash-greeting{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.dash-greeting h2{font-size:20px;margin:0;font-weight:700}
.dash-pills{display:flex;gap:8px}
.pill{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:13px;color:#475569;display:inline-flex;align-items:center;gap:6px}

.stat-card{position:relative;overflow:hidden;border-radius:16px;padding:20px 22px;color:#0b3a63;
    background:linear-gradient(135deg,#bfe0ff,#9cc9fb);border:1px solid #a9d2fb;
    box-shadow:0 10px 24px rgba(47,134,221,.18)}
.stat-card .stat-top{font-size:13px;font-weight:600;opacity:.85;display:flex;align-items:center;gap:8px}
.stat-card .stat-value{font-size:30px;font-weight:800;margin:8px 0 2px;letter-spacing:-.5px}
.stat-card .stat-sub{font-size:12px;opacity:.75}
.stat-card:after{content:"";position:absolute;right:-30px;bottom:-40px;width:120px;height:120px;
    background:rgba(255,255,255,.25);border-radius:50%}

.panel{padding:20px}
.panel-head{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.panel-head h5{margin:0;font-weight:700;font-size:16px}
.panel-head p{margin:3px 0 0;color:var(--muted);font-size:13px}

.mini-stat{transition:transform .12s, box-shadow .12s}
.mini-stat:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.06)}

/* ===== MikroTik onboarding wizard ===== */
.wiz-head{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:20px}
.wiz-head h5{margin:0;font-weight:700}
.stepper{display:flex;align-items:center;margin:6px 0 26px}
.stepper .step{display:flex;align-items:center;gap:10px;opacity:.5;transition:opacity .2s}
.stepper .step.active{opacity:1}
.stepper .dot{width:34px;height:34px;border-radius:50%;background:#cfe3fb;color:#0b3a63;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.stepper .step.active .dot{background:#0b84d8;color:#fff}
.stepper .lbl strong{display:block;font-size:14px}
.stepper .lbl span{font-size:11px;color:var(--muted)}
.stepper .bar{flex:1;height:2px;background:#e2e8f0;margin:0 14px}
.stepper .bar.on{background:#0b84d8}
.wiz-pane{padding-top:6px}
.wiz-actions{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.svc-row{display:flex;gap:12px;flex-wrap:wrap}
.svc-tile{flex:1;min-width:160px;border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;align-items:center;gap:10px;cursor:pointer}
.svc-tile input:checked + span{font-weight:600;color:#0b84d8}
.opt-box{display:flex;gap:12px;align-items:start;border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;cursor:pointer}
.opt-box input{margin-top:3px}
.port-row{display:flex;gap:10px;flex-wrap:wrap}
.port-tile{flex:1;min-width:120px;border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;align-items:center;gap:8px;cursor:pointer}
.port-tile input:checked + span{font-weight:600;color:#0b84d8}
.confirm-box{display:flex;align-items:center;gap:12px;background:#f0f7ff;border:1px solid #cfe3fb;border-radius:10px;padding:16px;font-size:15px}
.confirm-box i{font-size:22px;color:#0b84d8}

/* ===== MikroTik onboarding wizard (3-step, polling) ===== */
.onb-wrap{max-width:1000px}
.onb-title{font-size:30px;font-weight:800;margin:0 0 4px}
.onb-sub{color:var(--muted);max-width:640px;margin-bottom:22px}
.onb-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.onb-card-head{background:#f8fafc;border-bottom:1px solid var(--line);padding:18px 24px}
.onb-card-head h5{margin:0;font-weight:700}
.onb-card-head p{margin:4px 0 0;color:var(--muted);font-size:13px}

.stepper{display:flex;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.stepper .step{display:flex;align-items:center;gap:10px;opacity:.55;transition:opacity .2s}
.stepper .step.active{opacity:1}
.stepper .dot{width:34px;height:34px;border-radius:50%;background:#dbe9fb;color:#0b3a63;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.stepper .step.active .dot{background:#0b84d8;color:#fff}
.stepper .lbl strong{display:block;font-size:14px;line-height:1.1}
.stepper .lbl span{font-size:11px;color:var(--muted)}
.stepper .bar{flex:1;height:2px;background:#e2e8f0;margin:0 16px}
.stepper .bar.on{background:#0b84d8}

.pane{padding:24px}
.pane-actions{display:flex;justify-content:space-between;align-items:center;margin-top:26px}

.cmd-box{background:#0c1322;border-radius:10px;overflow:hidden;margin-bottom:14px}
.cmd-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #1c2638;color:#9fb3c8;font-size:12px;letter-spacing:.5px}
.cmd-copy{background:#1c2638;color:#cfe0f2;border:0;border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer}
.cmd-body{padding:16px;color:#dbe4ee;font-family:monospace;font-size:12.5px;line-height:1.7;word-break:break-all}
.cmd-note{background:#06283b;border:1px solid #0e4767;color:#bcdcee;border-radius:10px;padding:14px 16px;font-size:13px;margin-bottom:14px}
.cmd-note code{background:#0e4767;color:#fff;padding:2px 6px;border-radius:4px}
.wait-bar{background:#0c1322;color:#7ee0a6;border-radius:10px;padding:14px 16px;font-family:monospace;font-size:13px;display:flex;align-items:center}
.wait-bar.done{color:#7ee0a6}
.wait-bar .prompt{color:#5b6b80;margin-right:8px}

.svc-row{display:flex;gap:12px;flex-wrap:wrap}
.svc-tile{flex:0 0 auto;min-width:150px;border:1px solid var(--line);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:10px;cursor:pointer}
.svc-tile input:checked + span{font-weight:600;color:#0b84d8}
.opt-box{display:flex;gap:12px;align-items:start;border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;cursor:pointer}
.opt-box input{margin-top:3px}
.port-row{display:flex;gap:12px;flex-wrap:wrap}
.port-tile{flex:1;min-width:120px;border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:flex;align-items:center;gap:8px;cursor:pointer}
.port-tile input:checked + span{font-weight:600;color:#0b84d8}