:root{--bg:#0f172a;--panel:#111827;--panel2:#0b1220;--sidebar:#020617;--border:#253244;--text:#e5e7eb;--muted:#94a3b8;--blue:#0284c7;--green:#22c55e;--red:#ef4444;--yellow:#f59e0b}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px}.layout{display:flex;min-height:100vh}aside{width:260px;background:var(--sidebar);padding:24px;border-right:1px solid #1e293b;position:sticky;top:0;height:100vh;overflow:auto;transition:.2s}aside h2{margin:0 0 8px;color:#38bdf8}.brand-sub{color:var(--muted);font-size:12px;margin-bottom:22px}nav a{display:flex;gap:10px;align-items:center;color:#cbd5e1;text-decoration:none;padding:12px;border-radius:12px;margin-bottom:7px}nav a:hover,nav a.active{background:#1e293b;color:#fff}main{flex:1;padding:24px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:12px}.topbar h1{margin:0;font-size:26px}.menu-toggle{display:none;background:#1e293b;border:1px solid var(--border);padding:10px 12px;border-radius:10px;color:#fff}.user-pill{background:#111827;border:1px solid var(--border);padding:9px 12px;border-radius:999px;color:#cbd5e1}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}.card,.panel{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:0 10px 25px #0002}.card .label{color:var(--muted);font-size:13px}.num{font-size:32px;font-weight:800;margin-top:6px}.ok{color:var(--green)}.bad{color:var(--red)}.warn{color:var(--yellow)}.info{color:#38bdf8}.table-wrap{width:100%;overflow:auto;border-radius:14px;border:1px solid var(--border)}table{width:100%;border-collapse:collapse;background:var(--panel);min-width:720px}th,td{padding:12px;border-bottom:1px solid #243044;text-align:left;vertical-align:top}th{background:#1f2937;white-space:nowrap}td code{word-break:break-all}.status{font-weight:700;text-transform:capitalize}.badge{display:inline-block;padding:4px 9px;border-radius:999px;background:#1f2937;margin:2px;font-size:12px}.badge-red{background:#7f1d1d;color:#fecaca}.badge-green{background:#14532d;color:#bbf7d0}.badge-yellow{background:#713f12;color:#fde68a}input,button,select,textarea{padding:11px;border-radius:10px;border:1px solid #334155;background:var(--panel2);color:var(--text);max-width:100%}input,select,textarea{width:100%}button,.btn{background:var(--blue);color:white;border:0;text-decoration:none;display:inline-block;cursor:pointer;padding:11px 14px;border-radius:10px}.btn-danger{background:#dc2626}.btn-secondary{background:#334155}.btn-small{padding:7px 10px;font-size:13px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}.login{max-width:430px;margin:80px auto}.alert{padding:12px 14px;border-radius:12px;margin:10px 0}.alert.error{background:#7f1d1d}.alert.ok{background:#14532d}.alert.warn{background:#713f12}.small{color:var(--muted);font-size:13px}.actions{display:flex;gap:8px;flex-wrap:wrap}.mt{margin-top:16px}.mb{margin-bottom:16px}.muted{color:var(--muted)}label{display:block;margin-bottom:7px;color:#cbd5e1}.mobile-backdrop{display:none}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.list{margin:0;padding-left:18px}.nowrap{white-space:nowrap}@media(max-width:900px){.layout{display:block}aside{position:fixed;left:-280px;top:0;z-index:50;height:100%;width:270px}.sidebar-open aside{left:0}.mobile-backdrop{display:block;position:fixed;inset:0;background:#0008;z-index:40;opacity:0;pointer-events:none}.sidebar-open .mobile-backdrop{opacity:1;pointer-events:auto}.menu-toggle{display:inline-block}.topbar{position:sticky;top:0;background:rgba(15,23,42,.95);backdrop-filter:blur(8px);z-index:30;margin:-24px -16px 18px;padding:14px 16px;border-bottom:1px solid var(--border)}main{padding:24px 16px}.topbar h1{font-size:21px}.user-pill{display:none}.form-row,.form-row-3{grid-template-columns:1fr}.card,.panel{padding:16px;border-radius:15px}.num{font-size:27px}table{min-width:650px}th,td{padding:10px}.login{margin:40px 14px}}@media(max-width:520px){.cards{grid-template-columns:1fr 1fr;gap:10px}.card{padding:14px}.card .label{font-size:12px}.num{font-size:24px}.actions .btn,.actions button{width:100%;text-align:center}.panel h2{font-size:18px}}

/* v2.1 paginated IP table */
.form-row-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end}.full-actions{grid-column:1/-1}.table-toolbar,.table-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0 14px}.table-footer{padding:14px 0 0}.data-table thead th{position:sticky;top:0;background:var(--panel,#fff);z-index:2}.data-table tbody tr:hover{background:rgba(99,102,241,.07)}.pagination{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.pagination a,.pagination span{padding:7px 10px;border:1px solid rgba(148,163,184,.35);border-radius:10px;text-decoration:none;color:inherit;background:rgba(255,255,255,.04)}.pagination a.active{background:#2563eb;color:#fff;border-color:#2563eb}.pagination.mini a,.pagination.mini span{padding:5px 8px;font-size:13px}.center{text-align:center}.strong{font-weight:700}.listed-cell{max-width:420px}.listed-cell .badge{margin:2px;display:inline-block}@media(max-width:900px){.form-row-4{grid-template-columns:1fr}.table-toolbar,.table-footer{align-items:flex-start;flex-direction:column}.pagination{width:100%}.pagination a,.pagination span{font-size:13px;padding:6px 8px}.data-table th,.data-table td{font-size:13px;white-space:nowrap}.listed-cell{min-width:240px;white-space:normal}}

/* v2.2 logo + all tables pagination */
.brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}.brand h2{margin:0 0 4px}.brand-logo{width:44px;height:44px;object-fit:contain;border-radius:12px;background:rgba(255,255,255,.06);padding:4px}.brand-mark{width:44px;height:44px;border-radius:12px;background:#0284c7;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff}.mobile-logo{display:none;width:34px;height:34px;object-fit:contain;border-radius:9px;background:rgba(255,255,255,.06);padding:3px}.mobile-title-wrap{align-items:center}.logo-preview{height:74px;border:1px dashed var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03)}.logo-preview img{max-height:58px;max-width:220px;object-fit:contain}.filters-panel{margin-bottom:16px}.filters-panel form{margin:0}.table-meta{font-size:13px;color:var(--muted)}@media(max-width:900px){.mobile-logo{display:inline-block}aside .brand-logo,aside .brand-mark{width:40px;height:40px}.brand{margin-bottom:18px}.topbar .mobile-title-wrap h1{max-width:58vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.login-logo{max-width:180px;max-height:70px;object-fit:contain;margin:0 auto 12px;display:block}


/* v2.3 mobile header fix + clean logo */
.brand-logo,.mobile-logo{background:transparent!important;padding:0!important;border-radius:0!important;box-shadow:none!important}.brand-mark{background:transparent;border:1px solid var(--border);color:#38bdf8}.topbar-right{display:flex;align-items:center;gap:10px}.mobile-left{display:flex;align-items:center;gap:12px;min-width:0}.mobile-brand-text{display:none;font-weight:800;color:#fff;white-space:nowrap}.topbar .mobile-left h1{margin:0}@media(max-width:900px){.topbar{justify-content:space-between}.mobile-logo{display:inline-block;width:auto;max-width:132px;height:34px;object-fit:contain}.mobile-brand-text{display:inline-block}.menu-toggle{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.topbar .mobile-left h1{display:none}.topbar-right{margin-left:auto}.topbar .user-pill{display:none}}@media(min-width:901px){.mobile-logo,.mobile-brand-text{display:none!important}}

/* v2.4 favicon + email fields */
.favicon-preview{height:74px;border:1px dashed var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03)}
.favicon-preview img{max-height:42px;max-width:42px;object-fit:contain}
.otp-boxes{display:flex;gap:8px;justify-content:center;margin:14px 0}.otp-boxes input{width:44px;height:52px;text-align:center;font-size:24px;font-weight:800;border-radius:12px}@media(max-width:480px){.otp-boxes{gap:6px}.otp-boxes input{width:38px;height:48px;font-size:22px}}

/* v2.9 light/dark theme + clean header */
html[data-theme="light"]{--bg:#f3f6fb;--panel:#ffffff;--panel2:#f8fafc;--sidebar:#ffffff;--border:#dbe3ef;--text:#0f172a;--muted:#64748b;--blue:#2563eb;--green:#16a34a;--red:#dc2626;--yellow:#d97706}
html[data-theme="dark"]{--bg:#0f172a;--panel:#111827;--panel2:#0b1220;--sidebar:#020617;--border:#253244;--text:#e5e7eb;--muted:#94a3b8;--blue:#0284c7;--green:#22c55e;--red:#ef4444;--yellow:#f59e0b}
html[data-theme="light"] body{background:var(--bg);color:var(--text)}
html[data-theme="light"] aside{background:var(--sidebar);border-right:1px solid var(--border)}
html[data-theme="light"] aside h2{color:#0f172a}
html[data-theme="light"] nav a{color:#334155}
html[data-theme="light"] nav a:hover,html[data-theme="light"] nav a.active{background:#eef4ff;color:#1d4ed8}
html[data-theme="light"] th{background:#f1f5f9;color:#0f172a}
html[data-theme="light"] th,html[data-theme="light"] td{border-bottom:1px solid #e5eaf3}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{background:#fff;color:#0f172a;border-color:#cbd5e1}
html[data-theme="light"] .user-pill,html[data-theme="light"] .badge{background:#f8fafc;border-color:#dbe3ef;color:#334155}
html[data-theme="light"] .menu-toggle{background:#fff;color:#0f172a;border-color:#cbd5e1}
html[data-theme="light"] label{color:#334155}
html[data-theme="light"] .topbar{background:rgba(243,246,251,.94)}
.theme-pill{background:var(--panel2);border:1px solid var(--border);padding:9px 12px;border-radius:999px;color:var(--muted);font-size:13px}.brand-logo,.mobile-logo,.login-logo{background:transparent!important;padding:0!important;border-radius:0!important}.logo-preview{background:var(--panel2)}
@media(max-width:900px){.menu-toggle{font-size:0;width:42px;height:40px;justify-content:center}.menu-toggle::before{content:'☰';font-size:22px}.theme-pill{display:none}.topbar{border-bottom:1px solid var(--border)}}
nav a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-icon {
    width: 22px;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    opacity: .95;
}

.nav-text {
    display: inline-block;
}