* {
    font-family:
        "Cascadia Code",
        "JetBrains Mono",
        "Fira Code",
        "SF Mono",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "Courier New",
        monospace !important;
}
.fa, .fas, .far, .fal, .fab, .fa-solid, .fa-regular, .fa-light, .fa-brands,
.fa::before, .fas::before, .far::before, .fal::before, .fab::before,
.fa-solid::before, .fa-regular::before, .fa-light::before, .fa-brands::before,
[class*=" fa-"]::before, [class^="fa-"]::before { font-family:'Font Awesome 6 Free','Font Awesome 5 Free','FontAwesome' !important; }
.fab::before, .fa-brands::before, [class*=" fab-"]::before, [class^="fab-"]::before { font-family:'Font Awesome 6 Brands','Font Awesome 5 Brands','FontAwesome' !important; }
:root {
    --green:#22c55e; --red:#ef4444; --yellow:#eab308;
}
:root:not(.dark) {
    --panel:#ffffff; --border:#e5e7eb; --input:#ffffff; --text:#111827;
    --muted:#6b7280; --accent:#2563eb; --accent-hover:#1d4ed8; --accent-color:#2563eb;
    --badge-bg:#f3f4f6; --badge-text:#6b7280;
    --scrollbar-track:#f3f4f6; --scrollbar-thumb:#d1d5db;
    --neon-cyan:var(--accent); --neon-green:var(--green); --neon-red:var(--red); --neon-yellow:var(--yellow); --neon-magenta:#6366f1;
    --border-default:var(--border); --bg-surface:var(--panel); --bg-elevated:var(--panel);
}
.dark {
    --panel:#020e1f; --border:#0f2a45; --input:#020e1f; --text:#e2e8f0;
    --muted:#64748b; --accent:#0a2540; --accent-hover:#12375d; --accent-color:#38bdf8;
    --badge-bg:#0f2a45; --badge-text:#94a3b8;
    --scrollbar-track:#020617; --scrollbar-thumb:#0f2a45;
    --neon-cyan:var(--accent-color); --neon-green:var(--green); --neon-red:var(--red); --neon-yellow:var(--yellow); --neon-magenta:#6366f1;
    --border-default:var(--border); --bg-surface:var(--panel); --bg-elevated:var(--panel);
}
body {
    background-color:#f3f4f6;
    background-image:
        radial-gradient(rgba(37,99,235,.13) 1.5px, transparent 1.5px),
        radial-gradient(700px 480px at 0% 0%, rgba(37,99,235,.10), transparent 62%),
        radial-gradient(700px 480px at 100% 0%, rgba(37,99,235,.08), transparent 62%),
        radial-gradient(700px 480px at 100% 100%, rgba(37,99,235,.10), transparent 62%),
        radial-gradient(700px 480px at 0% 100%, rgba(37,99,235,.08), transparent 62%);
    background-size:20px 20px, auto, auto, auto, auto;
    background-attachment:fixed;
    color:#111827;
}
.dark body {
    background-color:#020617;
    background-image:
        radial-gradient(rgba(56,189,248,.15) 1.5px, transparent 1.5px),
        radial-gradient(800px 560px at 0% 0%, rgba(37,99,235,.20), transparent 62%),
        radial-gradient(800px 560px at 100% 0%, rgba(56,189,248,.14), transparent 62%),
        radial-gradient(800px 560px at 100% 100%, rgba(99,102,241,.16), transparent 62%),
        radial-gradient(800px 560px at 0% 100%, rgba(56,189,248,.12), transparent 62%);
    background-size:20px 20px, auto, auto, auto, auto;
    background-attachment:fixed;
    color:#e2e8f0;
}

.bg-panel { background:var(--panel); }
.bg-badge { background:var(--badge-bg); }
.border-panel { border-color:var(--border); }
.bg-accent { background:var(--accent); }
.text-muted { color:var(--muted); }

.glass-card {
    background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(249,250,251,.7), rgba(255,255,255,.9));
    border:1px solid var(--border); border-radius:8px;
    box-shadow:0 1px 3px rgba(0,0,0,.08); transition:all .2s;
}
.dark .glass-card {
    background:linear-gradient(135deg, rgba(2,14,31,.85), rgba(3,24,51,.65), rgba(2,14,31,.85));
    box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.glass-card:hover { transform:translateY(-2px); border-color:var(--muted); }

.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

.filter-btn { background:var(--badge-bg); border:1px solid var(--border); color:var(--badge-text); font-family:inherit; transition:all .2s; text-transform:uppercase; font-size:10px; letter-spacing:.08em; }
.filter-btn:hover { background:var(--border); color:var(--text); border-color:var(--accent); }
.filter-active { background:var(--accent) !important; border-color:#38bdf8 !important; color:#38bdf8 !important; box-shadow:0 0 12px rgba(56,189,248,.15); }

.status-badge { padding:4px 12px; border:1px solid var(--border); background:var(--badge-bg); font-size:12px; font-family:inherit; text-transform:uppercase; letter-spacing:.05em; display:inline-flex; align-items:center; gap:6px; border-radius:8px; }

.btn-primary { background:var(--accent); border:1px solid var(--border); color:#38bdf8; font-weight:600; transition:.2s; text-transform:uppercase; font-size:11px; letter-spacing:.08em; }
.btn-primary:hover { background:var(--accent-hover); border-color:#38bdf8; }

.btn-cyber, button[class*="bg-accent"], .bg-accent {
    background:transparent !important; border:1px solid var(--muted) !important; color:var(--muted) !important; text-transform:uppercase; font-size:11px; letter-spacing:.08em; padding:6px 14px;
}
.btn-cyber:hover, button[class*="bg-accent"]:hover, .bg-accent:hover { background:var(--badge-bg) !important; box-shadow:0 0 10px rgba(0,0,0,.1) !important; }
.dark .btn-cyber:hover, .dark button[class*="bg-accent"]:hover, .dark .bg-accent:hover { background:var(--accent-hover) !important; }

.bg-green-600 { background:transparent !important; border:1px solid #22c55e !important; color:#22c55e !important; text-transform:uppercase; font-size:11px; letter-spacing:.08em; }
.bg-green-600:hover { background:rgba(34,197,94,.08) !important; box-shadow:0 0 15px rgba(34,197,94,.15) !important; }
.bg-red-600 { background:transparent !important; border:1px solid #ef4444 !important; color:#ef4444 !important; text-transform:uppercase; font-size:11px; letter-spacing:.08em; }
.bg-red-600:hover { background:rgba(239,68,68,.08) !important; box-shadow:0 0 15px rgba(239,68,68,.15) !important; }

.badge-up { background:rgba(34,197,94,.15); color:#22c55e; border:1px solid #22c55e; padding:3px 10px; border-radius:8px; }
.badge-down { background:rgba(239,68,68,.15); color:#ef4444; border:1px solid #ef4444; padding:3px 10px; border-radius:8px; }
.badge { display:inline-block; padding:2px 8px; font-size:11px; font-weight:600; border-radius:8px; }

.progress { height:4px; background:#eef0f4; overflow:hidden; }
.dark .progress { background:#0f2a45; }
.progress-bar { height:100%; transition:width .3s; }

.sortable { cursor:pointer; user-select:none; }
.sortable:hover { background:var(--badge-bg); }
.sort-icon { font-size:10px; margin-left:3px; }

.status-dot-online { display:inline-block; width:14px; height:14px; background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.6); animation:glow-pulse 2s infinite; }
.status-dot-offline { display:inline-block; width:14px; height:14px; background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,.6); }

@keyframes glow-pulse {
    0%,100% { opacity:1; transform:scale(1); box-shadow:0 0 8px rgba(34,197,94,.6); }
    50% { opacity:.7; transform:scale(1.15); box-shadow:0 0 14px rgba(34,197,94,.9); }
}

.theme-btn { background:none; border:1px solid rgba(255,255,255,.3); color:#fff; width:32px; height:32px; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.theme-btn:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.5); }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.pulse { animation:pulse 2s infinite; }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); }

.swal2-popup-noc { background:var(--panel) !important; border:1px solid var(--border) !important; font-family:inherit; }
.swal2-title-noc { color:var(--text) !important; font-size:16px !important; font-weight:600 !important; }
.swal2-html-noc { color:var(--muted) !important; font-size:13px !important; }
.swal2-confirm-noc { background:linear-gradient(135deg,#0284c7,#0369a1) !important; padding:8px 20px !important; font-size:12px !important; }
.swal2-cancel-noc { background:#1e293b !important; color:var(--muted) !important; border:1px solid #334155 !important; padding:8px 20px !important; font-size:12px !important; }

table { border-collapse:separate; border-spacing:0; }
table th, table td { border-radius:0 !important; }
thead tr { border-bottom:2px solid var(--border) !important; }
thead th {
    background:var(--badge-bg) !important; color:var(--text) !important; font-size:10px !important;
    text-transform:uppercase !important; letter-spacing:.12em !important; font-weight:600 !important;
    border-bottom:1px solid var(--border) !important; padding:14px 16px !important;
}
.dark thead th { background:#020e1f !important; color:var(--muted) !important; }
tbody tr { border-bottom:1px solid var(--border) !important; }
tbody tr:hover { background:var(--badge-bg) !important; }

input,select,textarea { font-family:inherit !important; font-size:12px !important; border-radius:8px !important; }
button { border-radius:8px !important; }
div[style*="border"], th, td { border-radius:8px; }
.rounded-xl,.rounded-lg { border-radius:8px !important; }

nav a { font-size:11px !important; letter-spacing:.08em; }
.tab-active { color:var(--accent-color) !important; border-bottom:1px solid var(--accent-color); }

@media (max-width:640px) {
    header { flex-wrap:nowrap; gap:6px; padding:10px 12px !important; }
    header h1 { font-size:15px !important; white-space:nowrap; flex-shrink:0; }
    nav { flex:1 1 auto; min-width:0; overflow-x:auto; gap:4px !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    nav::-webkit-scrollbar { display:none; }
    nav a, nav button, nav span { white-space:nowrap; font-size:12px !important; padding:6px 10px !important; }
    .hide-mobile { display:none !important; }
    .stat-grid { grid-template-columns:1fr 1fr !important; gap:8px !important; }
    .stat-grid > div { padding:14px !important; }
    .stat-grid > div div:first-child { font-size:18px !important; }
    .stat-grid > div div:nth-child(2) { font-size:12px !important; }
    .stat-grid-3 { grid-template-columns:1fr 1fr 1fr !important; gap:8px !important; }
    .stat-grid-3 > div { padding:10px 12px !important; }
    .stat-grid-3 > div div:first-child { font-size:16px !important; }
    .stat-grid-3 > div div:nth-child(2) { font-size:11px !important; }
    .detail-actions { flex-wrap:wrap; }
    .detail-actions a, .detail-actions button { font-size:12px !important; padding:8px 14px !important; }
    .max-w-\[1300px\] { padding-left:12px !important; padding-right:12px !important; }
    .glass-card:hover { transform:none; }
    .olt-table th, .olt-table td { padding:10px 8px !important; font-size:13px !important; }
    .onu-table th, .onu-table td { padding:8px 6px !important; font-size:12px !important; }
    #onu-filter { width:140px !important; font-size:13px !important; }
    .progress { width:50px !important; }
    .col-brand, .col-last-check, .col-pct-bar, .col-offline { display:none !important; }
    .btn-text-mobile { display:none !important; }
    .detail-info-grid { grid-template-columns:1fr 1fr !important; }
    .olt-list-header { flex-wrap:wrap; gap:8px; }
    .olt-list-header > div:first-child { flex-wrap:wrap; }
    .olt-list-header button, .olt-list-header span { font-size:12px !important; padding:8px 12px !important; }
    .user-table th, .user-table td { padding:10px 8px !important; font-size:13px !important; }
    .pon-table th, .pon-table td { padding:10px 8px !important; font-size:12px !important; }
    .port-grid { grid-template-columns:1fr 1fr !important; gap:8px !important; }
    .port-grid > div { padding:12px 14px !important; }
    .port-grid > div div:first-child { font-size:14px !important; }
    .port-grid > div div { font-size:12px !important; }
    .modal-content { padding:20px !important; margin:12px !important; }
    .modal-content input, .modal-content select { font-size:14px !important; padding:10px 12px !important; }
    .system-grid { grid-template-columns:1fr 1fr !important; gap:8px !important; }
    .system-grid > div { padding:12px !important; }
    .system-grid > div div:first-child { font-size:14px !important; }
    .system-grid > div div:nth-child(2) { font-size:11px !important; }
    .onu-filter-bar { flex-wrap:wrap; gap:8px; }
    .onu-pon-tabs { gap:6px; }
    .onu-pon-tabs a { font-size:12px !important; padding:6px 12px !important; }
    thead th { padding:10px 8px !important; font-size:11px !important; }
    tbody tr td { padding:8px !important; }
    input, select { font-size:13px !important; padding:10px !important; }
    .status-badge { font-size:12px !important; padding:6px 14px !important; }
    .badge { font-size:11px !important; padding:4px 10px !important; }
    .info-panel-text { font-size:13px !important; }
}
@media (max-width:480px) {
    .stat-grid { grid-template-columns:1fr 1fr !important; }
    .stat-grid-3 { grid-template-columns:1fr 1fr !important; }
    .port-grid { grid-template-columns:1fr !important; }
    .detail-info-grid { grid-template-columns:1fr !important; }
}

a { transition:all .2s; border-radius:8px; }
span[style*="border"] { border-radius:8px; }
.border-l-green-500 { border-left-color:#22c55e !important; }
.border-l-red-500 { border-left-color:#ef4444 !important; }
.font-semibold.text-sm { letter-spacing:.08em; }
h1,h2 { letter-spacing:.06em; }
.btn-olt { border:1px solid var(--border) !important; color:var(--muted) !important; background:transparent !important; text-transform:uppercase; letter-spacing:.08em; border-radius:8px; transition:all .2s; }
.btn-olt:hover { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }
.btn-olt-red { border:1px solid var(--border) !important; color:var(--muted) !important; background:transparent !important; text-transform:uppercase; letter-spacing:.08em; border-radius:8px; transition:all .2s; }
.btn-olt-red:hover { border-color:var(--neon-red) !important; color:var(--neon-red) !important; }
.btn-olt-green { border:1px solid var(--border) !important; color:var(--muted) !important; background:transparent !important; text-transform:uppercase; letter-spacing:.08em; border-radius:8px; transition:all .2s; }
.btn-olt-green:hover { border-color:#00ff41 !important; color:#00ff41 !important; }