* {
    box-sizing: border-box;
}

:root {
    --app-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    --page-bg: #030712;
    --glass: rgba(255, 255, 255, 0.08);
    --glass-strong: rgba(255, 255, 255, 0.14);
    --line: rgba(255, 255, 255, 0.18);
    --text: #f8fbff;
    --muted: rgba(226, 232, 240, 0.72);
    --laser-blue: #30c9ff;
    --laser-red: #ff315f;
}

@property --chart-value {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

.router-history-card{display:flex;flex-direction:column;min-height:158px;padding-bottom:8px!important}.router-history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:0 2px}.router-history-head>small{max-width:48%;color:var(--muted);font-size:9px;line-height:1.3;text-align:right}.router-history-chart{display:block;width:100%;height:92px!important;margin-top:5px}
.router-uptime-card{display:flex;flex-direction:column;min-height:158px;background:linear-gradient(145deg,rgba(21,126,181,.13),rgba(255,255,255,.025))}.router-uptime-head{display:flex;align-items:center;justify-content:space-between}.router-uptime-head>i{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;color:#6dd8ff;background:rgba(57,198,255,.1)}.router-uptime-card>strong{margin-top:8px;color:#dff8ff;font-size:20px;letter-spacing:-.02em}.router-uptime-card>small{margin-top:2px;color:var(--muted);font-size:9px}.router-uptime-since{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:9px;border-top:1px solid rgba(100,210,255,.1)}.router-uptime-since span{color:var(--muted);font-size:9px}.router-uptime-since b{color:var(--text);font-size:10px;text-align:right}html[data-app-theme="light"] .router-uptime-card{background:linear-gradient(145deg,#edf9fe,#f8fcfe)}html[data-app-theme="light"] .router-uptime-card>strong{color:#12618e}

body {
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at 15% 12%, rgba(48, 201, 255, 0.30), transparent 28rem),
        radial-gradient(circle at 86% 5%, rgba(134, 92, 255, 0.24), transparent 26rem),
        radial-gradient(circle at 50% 95%, rgba(255, 49, 95, 0.16), transparent 24rem),
        linear-gradient(135deg, #020617 0%, #0b1020 48%, #020617 100%);
    font-family: var(--app-font);
}

body,
html {
    width: 100%;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.58), transparent);
}

.container {
    position: relative;
    z-index: 1;
}

.app-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-content {
    flex: 1 0 auto;
    width: 100%;
}

.app-content > .container,
.app-content main.container {
    width: min(100%, 1680px);
    max-width: none;
    padding: 14px 18px 22px;
}

.app-topbar {
    position: relative;
    z-index: 5;
    width: min(calc(100% - 28px), 1680px);
    margin-inline: auto;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
}

.app-topbar {
    position: sticky;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 18px;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
}

.app-brand:hover {
    color: var(--text);
}

.app-brand img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.app-brand span {
    display: grid;
    min-width: 0;
    line-height: 1.15;
}

.app-brand strong {
    font-size: 14px;
    letter-spacing: 0;
}

.app-brand small {
    color: var(--muted);
    font-size: 11px;
}

.app-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.app-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    color: rgba(248, 251, 255, 0.76);
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.app-nav a:hover {
    color: var(--text);
    border-color: rgba(48, 201, 255, 0.3);
    background: rgba(48, 201, 255, 0.1);
}

.glass-card,
.glass-panel,
.splitter-card,
.rx-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg, var(--glass-strong), rgba(255, 255, 255, 0.055));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.card {
    color: var(--text);
    border: 0;
    overflow: hidden;
}

.card-body.table-responsive {
    max-height: calc(100vh - 290px);
    overflow: auto;
}

.glass-header {
    color: var(--text);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(48, 201, 255, 0.20), rgba(255, 255, 255, 0.06));
}

.card-body {
    background: transparent;
}

.form-label {
    color: rgba(248, 251, 255, 0.88);
    font-weight: 600;
    font-size: 14px;
}

.form-control,
.form-select {
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background-color: rgba(2, 6, 23, 0.52);
}

.form-control:focus,
.form-select:focus {
    color: var(--text);
    border-color: rgba(48, 201, 255, 0.78);
    background-color: rgba(2, 6, 23, 0.68);
    box-shadow: 0 0 0 0.18rem rgba(48, 201, 255, 0.16);
}

.form-control::placeholder {
    color: rgba(226, 232, 240, 0.42);
}

.form-select option {
    color: #0f172a;
}

.text-muted {
    color: var(--muted) !important;
}

.text-primary {
    color: var(--laser-blue) !important;
}

hr {
    border-color: rgba(255, 255, 255, 0.18);
}

.splitter-card {
    min-height: 100%;
}

.splitter-loss-info,
.splitter-output-info {
    color: var(--muted);
}

.splitter-output-info strong {
    color: var(--laser-blue);
    text-shadow: 0 0 14px rgba(48, 201, 255, 0.55);
}

.result-box {
    min-height: 126px;
    padding: 22px;
}

.result-box h3 {
    margin-top: 6px;
    margin-bottom: 0;
    font-weight: 760;
    letter-spacing: 0;
}

.rx-card {
    position: relative;
    overflow: hidden;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.rx-card::after {
    content: "";
    position: absolute;
    inset: auto -18% -45% -18%;
    height: 90%;
    opacity: 0.52;
    filter: blur(18px);
    pointer-events: none;
}

.rx-strong {
    color: #e9fbff;
    border-color: rgba(48, 201, 255, 0.72);
    background: linear-gradient(145deg, rgba(48, 201, 255, 0.36), rgba(14, 116, 144, 0.18));
    box-shadow: 0 0 36px rgba(48, 201, 255, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.rx-strong::after {
    background: var(--laser-blue);
}

.rx-ideal {
    color: #0f172a;
    border-color: rgba(255, 255, 255, 0.86);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(226, 232, 240, 0.82));
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.24), inset 0 1px 0 #ffffff;
}

.rx-ideal .text-muted,
.rx-ideal div {
    color: rgba(15, 23, 42, 0.72) !important;
}

.rx-ideal::after {
    background: rgba(255, 255, 255, 0.72);
}

.rx-weak {
    color: #fff5f7;
    border-color: rgba(255, 49, 95, 0.76);
    background: linear-gradient(145deg, rgba(255, 49, 95, 0.42), rgba(127, 29, 29, 0.24));
    box-shadow: 0 0 38px rgba(255, 49, 95, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.rx-weak::after {
    background: var(--laser-red);
}

.table {
    color: var(--text);
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.045);
    --bs-table-striped-color: var(--text);
    --bs-table-border-color: rgba(255, 255, 255, 0.13);
}

.table thead th {
    color: rgba(248, 251, 255, 0.78);
    background: rgba(255, 255, 255, 0.08);
}

.table td,
.table th {
    vertical-align: middle;
    padding: 8px 10px;
    font-size: 13px;
}

@media (max-width: 767.98px) {
    .container {
        padding-inline: 14px;
    }

    .result-box {
        min-height: 112px;
    }
}

.menu-shell {
    max-width: 1080px;
    margin: 0 auto;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055));
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.menu-eyebrow {
    display: inline-flex;
    align-items: center;
    color: var(--laser-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-heading {
    margin-top: 18px;
}

.menu-heading h1 {
    margin: 0;
    font-size: clamp(34px, 6vw, 68px);
    font-weight: 800;
    letter-spacing: 0;
}

.menu-heading p {
    margin: 10px 0 0;
    max-width: 540px;
    color: var(--muted);
    font-size: 17px;
}

.tool-card {
    display: grid;
    grid-template-columns: 52px 1fr 18px;
    gap: 16px;
    align-items: center;
    min-height: 132px;
    padding: 20px;
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(48, 201, 255, 0.14), rgba(255, 255, 255, 0.06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.tool-card:hover {
    color: var(--text);
    transform: translateY(-2px);
    border-color: rgba(48, 201, 255, 0.62);
    box-shadow: 0 0 32px rgba(48, 201, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: #e9fbff;
    border-radius: 16px;
    background: rgba(48, 201, 255, 0.20);
    box-shadow: 0 0 24px rgba(48, 201, 255, 0.22);
}

.tool-copy strong,
.tool-copy small {
    display: block;
}

.tool-copy strong {
    font-size: 18px;
}

.tool-copy small {
    margin-top: 5px;
    color: var(--muted);
    line-height: 1.45;
}

.tool-arrow {
    color: var(--laser-blue);
}

@media (max-width: 767.98px) {
    .menu-shell {
        padding: 22px;
    }

    .tool-card {
        grid-template-columns: 46px 1fr 16px;
        padding: 16px;
    }

    .tool-icon {
        width: 46px;
        height: 46px;
    }
}

.page-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.back-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    color: var(--text);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055));
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.back-button:hover {
    color: #e9fbff;
    transform: translateX(-2px);
    border-color: rgba(48, 201, 255, 0.68);
    box-shadow: 0 0 30px rgba(48, 201, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.toolbar-orbit {
    width: 128px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(48, 201, 255, 0.82), transparent);
    box-shadow: 0 0 20px rgba(48, 201, 255, 0.34);
    animation: laserDrift 3.6s ease-in-out infinite;
}

.calculator-shell {
    position: relative;
}

.calculator-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.08) 34%, transparent 62%);
    transform: translateX(-120%);
    animation: glassSweep 7s ease-in-out infinite;
}

.calculator-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.header-kicker {
    margin-bottom: 4px;
    color: var(--laser-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.header-pulse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.header-pulse span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--laser-blue);
    box-shadow: 0 0 18px rgba(48, 201, 255, 0.72);
    animation: pulseDot 1.8s ease-in-out infinite;
}

.header-pulse span:nth-child(2) {
    animation-delay: 0.22s;
}

.header-pulse span:nth-child(3) {
    animation-delay: 0.44s;
}

.glass-panel,
.splitter-card,
.result-box,
.tool-card {
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.glass-panel:hover,
.splitter-card:hover,
.result-box:hover {
    transform: translateY(-2px);
    border-color: rgba(48, 201, 255, 0.38);
    box-shadow: 0 22px 64px rgba(0, 0, 0, 0.34), 0 0 28px rgba(48, 201, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.form-control:hover,
.form-select:hover {
    border-color: rgba(48, 201, 255, 0.42);
}

@keyframes glassSweep {
    0%, 38% {
        transform: translateX(-120%);
    }

    58%, 100% {
        transform: translateX(120%);
    }
}

@keyframes pulseDot {
    0%, 100% {
        opacity: 0.38;
        transform: scale(0.72);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes laserDrift {
    0%, 100% {
        opacity: 0.35;
        transform: translateX(0) scaleX(0.86);
    }

    50% {
        opacity: 1;
        transform: translateX(-18px) scaleX(1);
    }
}

@media (max-width: 767.98px) {
    .calculator-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .toolbar-orbit {
        width: 84px;
    }
}

.brand-bar {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-logo {
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 28px rgba(48, 201, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.brand-logo-sm {
    width: 52px;
    height: 52px;
    border-radius: 16px;
}

.brand-subtitle {
    margin-top: 3px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.compact-brand {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .brand-logo {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .brand-logo-sm {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }
}

.primary-inputs-panel {
    position: relative;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.045));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.primary-inputs-panel:hover,
.primary-inputs-panel:focus-within {
    border-color: rgba(48, 201, 255, 0.50);
    background: linear-gradient(145deg, rgba(48, 201, 255, 0.13), rgba(255, 255, 255, 0.06));
    box-shadow: 0 0 28px rgba(48, 201, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.primary-inputs-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--text);
    font-weight: 700;
}

.primary-inputs-summary span {
    display: inline-flex;
    align-items: center;
}

.primary-inputs-summary small {
    color: var(--muted);
    font-weight: 600;
    text-align: right;
}

.primary-inputs-grid {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    transform: translateY(-8px);
    overflow: hidden;
    transition: max-height 260ms ease, opacity 180ms ease, transform 220ms ease, margin-top 220ms ease;
}

.primary-inputs-panel:hover .primary-inputs-grid,
.primary-inputs-panel:focus-within .primary-inputs-grid {
    max-height: 900px;
    margin-top: 14px;
    opacity: 1;
    transform: translateY(0);
}

@media (hover: none) {
    .primary-inputs-grid {
        max-height: none;
        margin-top: 14px;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .primary-inputs-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .primary-inputs-summary small {
        text-align: left;
    }
}

.calculator-page .container {
    max-width: 1360px;
    padding-top: 28px !important;
    padding-bottom: 12px !important;
}

.calculator-page .page-toolbar {
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}

@media (max-width: 767.98px) {
    .calculator-page .container {
        padding-top: 20px !important;
    }

    .calculator-page .page-toolbar {
        margin-top: 18px !important;
    }
}

/* Global light/dark theme system. Dark remains the visual baseline. */
.theme-switch {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #f9d66d;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background: rgba(255,255,255,.055);
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, color .16s ease;
}
.theme-switch:hover { color: #fff0a6; background: rgba(255,255,255,.11); transform: translateY(-1px); }
.theme-switch .theme-icon-dark { display: none; }
.auth-appearance-switch { position: fixed; z-index: 10; top: 18px; right: 18px; display: flex; align-items: center; gap: 8px; }
.auth-appearance-switch .auth-language-switch { position: static; }
html[data-app-theme="light"] .theme-switch .theme-icon-light { display: none; }
html[data-app-theme="light"] .theme-switch .theme-icon-dark { display: inline-block; }

html[data-app-theme="light"] {
    color-scheme: light;
    --page-bg: #edf3fa;
    --glass: rgba(255,255,255,.72);
    --glass-strong: rgba(255,255,255,.88);
    --line: rgba(71,91,119,.17);
    --text: #16243a;
    --muted: #66758a;
    --laser-blue: #087fc1;
    --laser-red: #d72f57;
    --bs-body-color: #16243a;
    --bs-body-bg: #edf3fa;
}
html[data-app-theme="light"] body {
    color: #16243a;
    background:
        radial-gradient(circle at 12% 8%, rgba(66,171,232,.18), transparent 30rem),
        radial-gradient(circle at 88% 2%, rgba(132,111,223,.13), transparent 28rem),
        linear-gradient(145deg, #f7faff 0%, #eaf1f8 52%, #f3f7fb 100%) !important;
}
html[data-app-theme="light"] body::before {
    display: block;
    background: linear-gradient(rgba(45,75,110,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(45,75,110,.04) 1px, transparent 1px);
}
html[data-app-theme="light"] body::after { background: linear-gradient(135deg, rgba(66,153,225,.08), rgba(124,92,205,.05)); }

html[data-app-theme="light"] .app-topbar,
html[data-app-theme="light"] .menu-shell,
html[data-app-theme="light"] .glass-card,
html[data-app-theme="light"] .glass-panel,
html[data-app-theme="light"] .splitter-card,
html[data-app-theme="light"] .rx-card,
html[data-app-theme="light"] .auth-card,
html[data-app-theme="light"] .launcher-panel {
    color: #16243a;
    border-color: rgba(71,91,119,.16);
    background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(244,248,253,.78));
    box-shadow: 0 18px 48px rgba(49,72,102,.13), inset 0 1px rgba(255,255,255,.9);
}
html[data-app-theme="light"] .app-topbar::before,
html[data-app-theme="light"] .menu-shell::before,
html[data-app-theme="light"] .glass-card::before,
html[data-app-theme="light"] .auth-card::before { background: linear-gradient(120deg, rgba(255,255,255,.65), transparent 45%); }

html[data-app-theme="light"] .app-brand,
html[data-app-theme="light"] .app-brand:hover,
html[data-app-theme="light"] .menu-heading h1,
html[data-app-theme="light"] h1,
html[data-app-theme="light"] h2,
html[data-app-theme="light"] h3,
html[data-app-theme="light"] h4,
html[data-app-theme="light"] h5,
html[data-app-theme="light"] h6,
html[data-app-theme="light"] strong { color: #14233a; }
html[data-app-theme="light"] .app-brand small,
html[data-app-theme="light"] .text-muted,
html[data-app-theme="light"] .menu-heading p,
html[data-app-theme="light"] .form-text { color: #68788e !important; }

html[data-app-theme="light"] .app-nav { border-color: rgba(61,84,115,.14); background: rgba(255,255,255,.68); }
html[data-app-theme="light"] .app-nav a,
html[data-app-theme="light"] .app-menu-dropdown summary { color: #40536d; }
html[data-app-theme="light"] .app-nav a:hover,
html[data-app-theme="light"] .app-menu-dropdown summary:hover { color: #0b65a0; background: rgba(28,138,204,.09); }
html[data-app-theme="light"] .app-menu-dropdown summary { border-color: rgba(61,84,115,.14); background: rgba(255,255,255,.7); }
html[data-app-theme="light"] .app-menu-panel,
html[data-app-theme="light"] .topbar-sync-panel {
    color: #263850;
    border-color: rgba(61,84,115,.16);
    background: #f9fbfe;
    box-shadow: 0 20px 50px rgba(40,61,87,.2);
}
html[data-app-theme="light"] .app-menu-panel a { color: #31455f; }
html[data-app-theme="light"] .app-menu-panel a small { color: #718096; }
html[data-app-theme="light"] .app-menu-panel a:hover { color: #075e98; background: #e9f5fc; }
html[data-app-theme="light"] .app-menu-panel a.is-active { color: #075b93; border-color: rgba(10,132,255,.2); background: #e5f3fc; }
html[data-app-theme="light"] .app-menu-section,
html[data-app-theme="light"] .app-menu-divider { border-color: rgba(61,84,115,.12); color: #75849a; }
html[data-app-theme="light"] .language-switch { border-color: rgba(61,84,115,.14); background: rgba(255,255,255,.7); }
html[data-app-theme="light"] .language-switch a { color: #65758a; }
html[data-app-theme="light"] .theme-switch { color: #536a88; border-color: rgba(61,84,115,.16); background: rgba(255,255,255,.72); }
html[data-app-theme="light"] .theme-switch:hover { color: #263f62; background: #fff; }

html[data-app-theme="light"] .glass-header,
html[data-app-theme="light"] .card-header {
    color: #24415f;
    border-color: rgba(61,84,115,.13);
    background: linear-gradient(90deg, rgba(33,150,213,.11), rgba(255,255,255,.55));
}
html[data-app-theme="light"] .card-body { color: #24364e; background: transparent; }
html[data-app-theme="light"] .result-box { color: #263a53; }

html[data-app-theme="light"] body .form-control,
html[data-app-theme="light"] body .form-select,
html[data-app-theme="light"] body textarea.form-control,
html[data-app-theme="light"] body input.form-control,
html[data-app-theme="light"] body select.form-select {
    color: #1e3048 !important;
    border-color: rgba(70,91,119,.22) !important;
    background-color: rgba(255,255,255,.9) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.9), 0 5px 14px rgba(54,76,104,.07) !important;
    color-scheme: light;
}
html[data-app-theme="light"] body .form-control:focus,
html[data-app-theme="light"] body .form-select:focus { color: #13243a !important; border-color: #268ec7 !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(23,137,198,.12) !important; }
html[data-app-theme="light"] body .form-control::placeholder { color: #8b98a9 !important; }
html[data-app-theme="light"] body .form-select option { color: #1e3048 !important; background: #fff !important; }
html[data-app-theme="light"] .form-label { color: #31445e; }
html[data-app-theme="light"] body input[type="date"].form-control::-webkit-calendar-picker-indicator { filter: none; }

html[data-app-theme="light"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #263950;
    --bs-table-striped-color: #263950;
    --bs-table-striped-bg: rgba(56,86,118,.035);
    --bs-table-hover-color: #10263e;
    --bs-table-hover-bg: rgba(34,139,199,.07);
    --bs-table-border-color: rgba(67,88,115,.15);
    color: #263950;
}
html[data-app-theme="light"] .table thead th { color: #28435f; background: #edf4fa !important; }
html[data-app-theme="light"] .customer-table-search.table-responsive,
html[data-app-theme="light"] .customer-table-search.table-responsive > table,
html[data-app-theme="light"] .customer-table-search.table-responsive table > tbody { background: #f8fbfe !important; }
html[data-app-theme="light"] .customer-table-search.table-responsive > table > thead,
html[data-app-theme="light"] .customer-table-search.table-responsive > table > thead > tr,
html[data-app-theme="light"] .customer-table-search.table-responsive > table > thead > tr > th {
    --bs-table-bg: #eaf2f8;
    --bs-table-accent-bg: #eaf2f8;
    --bs-table-bg-state: #eaf2f8;
    --bs-table-bg-type: #eaf2f8;
    color: #28435f !important;
    background: #eaf2f8 !important;
    background-color: #eaf2f8 !important;
    box-shadow: inset 0 0 0 9999px #eaf2f8, inset 0 -1px rgba(35,111,155,.2) !important;
}
html[data-app-theme="light"] .customer-table-search.table-responsive > table > thead > tr.customer-search-row,
html[data-app-theme="light"] .customer-table-search.table-responsive > table > thead > tr.customer-search-row > th { background: #f3f7fb !important; background-color: #f3f7fb !important; box-shadow: inset 0 0 0 9999px #f3f7fb !important; }

html[data-app-theme="light"] .back-button,
html[data-app-theme="light"] .monitoring-action { color: #1f5679; border-color: rgba(29,109,153,.2); background: rgba(255,255,255,.72); }
html[data-app-theme="light"] .back-button:hover,
html[data-app-theme="light"] .monitoring-action:hover { color: #084f7d; background: #e8f5fc; }
html[data-app-theme="light"] .monitoring-badge.is-online { color: #08763f; background: rgba(31,174,94,.11); }
html[data-app-theme="light"] .monitoring-badge.is-offline { color: #b42849; background: rgba(220,54,91,.1); }

html[data-app-theme="light"] .pppoe-user-card { color: #23364e; border-color: rgba(59,84,115,.16); background: linear-gradient(145deg, #fff, #f1f6fb); box-shadow: 0 12px 30px rgba(51,74,103,.12); }
html[data-app-theme="light"] .pppoe-user-card.is-on { border-color: rgba(25,157,91,.3); background: linear-gradient(145deg, #f9fffc, #edf8f2); }
html[data-app-theme="light"] .pppoe-user-card.is-off { border-color: rgba(206,61,91,.22); background: linear-gradient(145deg, #fffafb, #f9eff2); }
html[data-app-theme="light"] .pppoe-customer-name,
html[data-app-theme="light"] .pppoe-router,
html[data-app-theme="light"] .pppoe-traffic span { color: #66788e; }
html[data-app-theme="light"] .pppoe-hover-detail,
html[data-app-theme="light"] .ktp-modal-panel,
html[data-app-theme="light"] .payment-modal-panel { color: #20344d; border-color: rgba(55,82,115,.18); background: #f9fbfe; }
html[data-app-theme="light"] .pppoe-modal-backdrop,
html[data-app-theme="light"] .ktp-modal-backdrop { background: rgba(44,61,82,.34); }

html[data-app-theme="light"] .alert-success { color: #08763f; background: #e8f8ef; }
html[data-app-theme="light"] .alert-danger { color: #b42849; background: #fff0f3; }
html[data-app-theme="light"] .app-footer { color: #718096; }
html[data-app-theme="light"] .app-loader { background: rgba(225,233,242,.72) !important; }
html[data-app-theme="light"] .app-loader-panel { color: #20344d; border-color: rgba(71,91,119,.16); background: #fff; box-shadow: 0 18px 48px rgba(42,62,88,.18); }
html[data-app-theme="light"] .app-swal-popup { color: #263950 !important; border-color: rgba(61,84,115,.16) !important; background: #f9fbfe !important; box-shadow: 0 24px 60px rgba(39,59,84,.24) !important; }
html[data-app-theme="light"] .app-swal-title { color: #172b44 !important; }
html[data-app-theme="light"] .app-swal-text { color: #607086 !important; }
html[data-app-theme="light"] .app-swal-cancel { color: #53657b; border-color: rgba(61,84,115,.17); background: #edf2f7; }

@media (max-width: 767.98px), (pointer: coarse) {
    html[data-app-theme="light"] body { background: #edf3fa !important; }
    html[data-app-theme="light"] .app-topbar,
    html[data-app-theme="light"] .menu-shell,
    html[data-app-theme="light"] .glass-card,
    html[data-app-theme="light"] .glass-panel,
    html[data-app-theme="light"] .pppoe-user-card { box-shadow: 0 5px 16px rgba(42,61,84,.12) !important; }
}

/* Unified filter actions shared by all modules. */
.filter-submit-button,
.filter-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.filter-submit-button {
    color: #fff;
    border-color: rgba(92,205,255,.34);
    background: linear-gradient(135deg,#078bd2,#1268b8);
    box-shadow: 0 8px 20px rgba(0,132,220,.22), inset 0 1px rgba(255,255,255,.2);
}
.filter-reset-button {
    color: #b9eaff;
    border-color: rgba(148,163,184,.22);
    background: rgba(30,48,73,.7);
    box-shadow: inset 0 1px rgba(255,255,255,.09);
}
.filter-submit-button:hover,
.filter-submit-button:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    border-color: rgba(120,220,255,.58);
    background: linear-gradient(135deg,#0a9be8,#1675c9);
    box-shadow: 0 11px 25px rgba(0,145,235,.3), inset 0 1px rgba(255,255,255,.24);
}
.filter-reset-button:hover,
.filter-reset-button:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    border-color: rgba(100,210,255,.3);
    background: rgba(43,76,112,.82);
}
.filter-submit-button:focus-visible,
.filter-reset-button:focus-visible { outline: 3px solid rgba(66,191,255,.2); outline-offset: 2px; }
.filter-submit-button:disabled,
.filter-reset-button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
html[data-app-theme="light"] .filter-reset-button {
    color: #245b7e;
    border-color: rgba(35,116,165,.18);
    background: rgba(241,248,253,.92);
    box-shadow: 0 5px 14px rgba(48,87,116,.08), inset 0 1px #fff;
}
html[data-app-theme="light"] .filter-reset-button:hover,
html[data-app-theme="light"] .filter-reset-button:focus-visible {
    color: #064f7e;
    border-color: rgba(23,127,186,.3);
    background: #fff;
}
@media (max-width: 575.98px) {
    .filter-submit-button,
    .filter-reset-button { min-height: 38px; }
}

/* Consistent edit and delete controls inside module tables. */
.table-action-group{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.table-action-group form{display:inline-flex;margin:0}
.table-action-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:0 10px;border:1px solid transparent;border-radius:9px;font-size:11px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .14s ease,border-color .14s ease,background-color .14s ease,box-shadow .14s ease}
.table-action-button.is-edit{color:#bdeaff;border-color:rgba(66,191,255,.28);background:rgba(14,130,196,.18)}
.table-action-button.is-view{color:#baf8e5;border-color:rgba(52,211,153,.28);background:rgba(16,160,112,.16)}
.table-action-button.is-delete{color:#ffbdc6;border-color:rgba(255,91,112,.28);background:rgba(211,42,68,.16)}
.table-action-button.is-edit:hover,.table-action-button.is-edit:focus-visible{color:#fff;transform:translateY(-1px);border-color:rgba(80,205,255,.5);background:rgba(15,145,215,.32);box-shadow:0 7px 18px rgba(0,139,220,.18)}
.table-action-button.is-view:hover,.table-action-button.is-view:focus-visible{color:#fff;transform:translateY(-1px);border-color:rgba(77,225,174,.48);background:rgba(20,170,119,.3);box-shadow:0 7px 18px rgba(16,160,112,.17)}
.table-action-button.is-delete:hover,.table-action-button.is-delete:focus-visible{color:#fff;transform:translateY(-1px);border-color:rgba(255,105,125,.52);background:rgba(220,48,74,.3);box-shadow:0 7px 18px rgba(220,48,74,.16)}
.table-action-button:focus-visible{outline:3px solid rgba(66,191,255,.17);outline-offset:2px}.table-action-button:disabled{cursor:not-allowed;opacity:.42;transform:none;box-shadow:none}
html[data-app-theme="light"] .table-action-button.is-edit{color:#086897;border-color:rgba(16,126,181,.2);background:#e8f6fd}
html[data-app-theme="light"] .table-action-button.is-view{color:#087957;border-color:rgba(16,140,98,.2);background:#e9faf4}
html[data-app-theme="light"] .table-action-button.is-delete{color:#b92d43;border-color:rgba(196,49,71,.18);background:#fff0f2}
html[data-app-theme="light"] .table-action-button.is-edit:hover{color:#07577f;background:#d9f1fc}html[data-app-theme="light"] .table-action-button.is-delete:hover{color:#9f2136;background:#ffe3e7}
html[data-app-theme="light"] .table-action-button.is-view:hover{color:#056246;background:#d9f5eb}
@media(max-width:575.98px){.table-action-button{min-width:32px;min-height:32px;padding:0 9px}}

/* PPP Profile table: keep rows fully behind an opaque sticky header. */
.profile-table-scroll{position:relative;padding:0!important;isolation:isolate;background:#081120;clip-path:inset(0 round 18px)}
.profile-table-scroll>table{border-collapse:separate;border-spacing:0;margin:0}
.card-body.table-responsive.profile-table-scroll>table>thead>tr>th{
    --bs-table-bg:#0b5f91;
    --bs-table-accent-bg:#0b5f91;
    --bs-table-bg-state:#0b5f91;
    --bs-table-bg-type:#0b5f91;
    position:sticky!important;
    top:0;
    z-index:120!important;
    color:#f4fbff;
    background:#0b5f91!important;
    background-color:#0b5f91!important;
    background-image:none!important;
    box-shadow:inset 0 0 0 9999px #0b5f91,inset 0 -1px rgba(255,255,255,.18),0 6px 14px rgba(0,0,0,.3)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
}
.profile-table-scroll>table>tbody>tr>td{position:relative;z-index:0!important}
html[data-app-theme="light"] .profile-table-scroll{background:#f8fbfe}
html[data-app-theme="light"] .card-body.table-responsive.profile-table-scroll>table>thead>tr>th{
    --bs-table-bg:#1677ad;
    --bs-table-accent-bg:#1677ad;
    --bs-table-bg-state:#1677ad;
    --bs-table-bg-type:#1677ad;
    color:#fff;
    background:#1677ad!important;
    background-color:#1677ad!important;
    box-shadow:inset 0 0 0 9999px #1677ad,inset 0 -1px rgba(255,255,255,.22),0 5px 12px rgba(44,88,120,.2)!important;
}

.ktp-upload-preview{position:relative;display:grid;place-items:center;min-height:210px;padding:10px;overflow:hidden;border:1px solid rgba(111,211,255,.25);border-radius:18px;background:rgba(5,15,28,.55)}
.ktp-upload-preview img{display:block;width:100%;max-height:330px;object-fit:contain;border-radius:12px}
.ktp-ocr-state{position:absolute;left:18px;right:18px;bottom:18px;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(255,255,255,.16);border-radius:12px;color:#e8f7ff;font-size:.76rem;background:rgba(5,14,27,.78);box-shadow:0 7px 22px rgba(0,0,0,.28);backdrop-filter:blur(12px)}
.ktp-ocr-state i{color:#69d4ff}
.ktp-identification-status{display:flex;align-items:center;justify-content:space-between;gap:8px;height:38px;min-height:38px;padding:4px 7px;border:1px solid rgba(111,211,255,.2);border-radius:10px;background:rgba(5,15,28,.45)}
.ktp-input-row{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(360px,1.2fr);align-items:center;gap:10px}.ktp-input-row>.form-control{height:38px;min-height:38px;padding-top:5px;padding-bottom:5px}
.ktp-identification-status .ktp-ocr-state{position:static;flex:1;min-width:0;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none;white-space:nowrap;overflow:hidden}.ktp-identification-status .ktp-ocr-state span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ktp-identification-status .monitoring-action{min-height:28px;padding:3px 9px;white-space:nowrap}
.ktp-identification-status .monitoring-action:disabled{cursor:not-allowed;opacity:.45}
.ktp-first-guide{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(105,212,255,.2);border-radius:11px;color:#bcd5e8;font-size:.78rem;background:rgba(34,133,190,.09)}.ktp-first-guide i{color:#69d4ff;font-size:1rem}
.ktp-ocr-blocker{position:fixed;z-index:100000;inset:0;display:grid;place-items:center;padding:20px;background:rgba(2,7,15,.84);backdrop-filter:blur(14px);touch-action:none}.ktp-ocr-blocker[hidden]{display:none}.ktp-ocr-blocker-card{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(390px,100%);padding:28px;border:1px solid rgba(105,212,255,.25);border-radius:24px;color:#edf8ff;text-align:center;background:rgba(8,20,37,.95);box-shadow:0 24px 80px rgba(0,0,0,.55)}.ktp-ocr-blocker-card strong{font-size:1rem}.ktp-ocr-blocker-card span{color:#9eb6ca;font-size:.8rem}
@media(max-width:767.98px){.ktp-input-row{grid-template-columns:1fr}.ktp-identification-status{align-items:flex-start}.ktp-identification-status .ktp-ocr-state{min-width:0}}
.form-text{margin-top:6px;color:#a9bed2!important;font-size:.78rem;line-height:1.5}
.form-text i{color:#69d4ff}

/* Keep every native form control consistent with the dark Liquid Glass theme. */
body .form-control,
body .form-select,
body textarea.form-control,
body input.form-control,
body select.form-select {
    color: #eef6ff !important;
    border-color: rgba(255,255,255,.15) !important;
    background-color: rgba(5,13,27,.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 7px 20px rgba(0,0,0,.13) !important;
    color-scheme: dark;
}
body .form-control:hover,
body .form-select:hover { background-color: rgba(10,22,41,.82) !important; }
body .form-control:focus,
body .form-select:focus {
    color: #fff !important;
    border-color: rgba(100,210,255,.55) !important;
    background-color: rgba(8,19,37,.94) !important;
    box-shadow: 0 0 0 4px rgba(10,132,255,.14), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
body .form-control:disabled,
body .form-select:disabled,
body .form-control[readonly] {
    color: rgba(220,234,247,.68) !important;
    background-color: rgba(3,9,19,.62) !important;
    opacity: .78;
}
body .form-select option { color: #eef6ff !important; background: #0c1728 !important; }
body .form-control::placeholder { color: rgba(166,187,207,.7) !important; }
body input[type="file"].form-control::file-selector-button {
    color: #dff5ff;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.14);
    background: rgba(31,91,137,.48);
}
body input[type="date"].form-control::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.3); opacity: .8; }
body input.form-control:-webkit-autofill,
body input.form-control:-webkit-autofill:hover,
body input.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #eef6ff !important;
    -webkit-box-shadow: 0 0 0 1000px #0a1627 inset !important;
    caret-color: #fff;
    transition: background-color 9999s ease-out 0s;
}

.calculator-page .back-button {
    min-height: 38px;
    padding-inline: 13px;
    font-size: 14px;
}

.calculator-page .toolbar-orbit {
    width: 104px;
}

.calculator-page .glass-card {
    margin-bottom: 10px !important;
}

.calculator-page .glass-header {
    padding: 9px 14px;
}

.calculator-page .card-body {
    padding: 12px;
}

.calculator-page .brand-logo-sm {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.calculator-page .header-kicker {
    margin-bottom: 2px;
    font-size: 10px;
}

.calculator-page h4 {
    font-size: 19px;
}

.calculator-page h5 {
    margin-bottom: 8px !important;
    font-size: 16px;
}

.calculator-page hr {
    margin: 10px 0 !important;
}

.calculator-page .primary-inputs-panel {
    padding: 10px 12px;
    border-radius: 14px;
}

.calculator-page .primary-inputs-summary {
    font-size: 14px;
}

.calculator-page .primary-inputs-summary small {
    font-size: 12px;
}

.calculator-page .primary-inputs-panel:hover .primary-inputs-grid,
.calculator-page .primary-inputs-panel:focus-within .primary-inputs-grid {
    margin-top: 10px;
}

.calculator-page .form-label {
    margin-bottom: 4px;
    font-size: 12px;
}

.calculator-page .form-control,
.calculator-page .form-select {
    min-height: 34px;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 13px;
}

.calculator-page .splitter-card {
    padding: 10px !important;
    border-radius: 14px;
}

.calculator-page .splitter-card .mb-2 {
    margin-bottom: 6px !important;
}

.calculator-page .splitter-loss-info,
.calculator-page .splitter-output-info,
.calculator-page .small {
    font-size: 12px;
}

.calculator-page #liveResultCards {
    margin-bottom: 10px !important;
}

.calculator-page .result-box {
    min-height: 82px;
    padding: 12px 14px;
    border-radius: 14px;
}

.calculator-page .result-box h3 {
    margin-top: 2px;
    font-size: 24px;
}

.calculator-page .table {
    font-size: 12px;
}

.calculator-page .table td,
.calculator-page .table th {
    padding: 5px 8px;
}

@media (max-height: 760px) and (min-width: 992px) {
    .calculator-page .page-toolbar {
        margin-bottom: 6px !important;
    }

    .calculator-page .glass-header {
        padding: 7px 12px;
    }

    .calculator-page .card-body {
        padding: 10px;
    }

    .calculator-page .result-box {
        min-height: 74px;
        padding: 10px 12px;
    }

    .calculator-page .result-box h3 {
        font-size: 22px;
    }

    .calculator-page .table td,
    .calculator-page .table th {
        padding: 4px 7px;
    }
}

.monitoring-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.monitoring-badge.is-online {
    color: #e9fbff;
    border: 1px solid rgba(48, 201, 255, 0.42);
    background: rgba(48, 201, 255, 0.16);
    box-shadow: 0 0 18px rgba(48, 201, 255, 0.14);
}

.monitoring-badge.is-offline {
    color: #fff5f7;
    border: 1px solid rgba(255, 49, 95, 0.48);
    background: rgba(255, 49, 95, 0.16);
    box-shadow: 0 0 18px rgba(255, 49, 95, 0.14);
}

.monitoring-action {
    min-height: 30px;
    padding: 0 10px;
    color: #fff5f7;
    border: 1px solid rgba(255, 49, 95, 0.54);
    border-radius: 10px;
    background: rgba(255, 49, 95, 0.18);
    box-shadow: 0 0 18px rgba(255, 49, 95, 0.12);
    font-size: 12px;
    font-weight: 700;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.monitoring-action:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 49, 95, 0.82);
    box-shadow: 0 0 24px rgba(255, 49, 95, 0.22);
}

.monitoring-action:disabled {
    cursor: wait;
    opacity: 0.62;
    transform: none;
}

.pppoe-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
    overflow: visible;
}

.pppoe-empty { grid-column: 1 / -1; padding: 2rem; text-align: center; }

.pppoe-user-card {
    position: relative;
    min-height: 185px;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    outline: none;
}

.pppoe-user-card.is-on { border-top: 4px solid #22c55e; }
.pppoe-user-card.is-off { border-top: 4px solid #ef4444; }
.pppoe-user-card:hover, .pppoe-user-card:focus { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(15, 23, 42, .18); z-index: 20; }
.pppoe-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.pppoe-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(59, 130, 246, .12); color: #2563eb; }
.pppoe-username { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; }
.pppoe-router { display: block; margin-top: .35rem; color: #64748b; font-size: .82rem; }
.pppoe-uptime { display: flex; flex-direction: column; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid rgba(148, 163, 184, .2); }
.pppoe-uptime small { color: #64748b; }
.pppoe-hover-detail {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    width: min(330px, 88vw);
    padding: 1rem;
    transform: translateX(-50%);
    border-radius: 14px;
    background: #0f172a;
    color: #f8fafc;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .35);
    z-index: 50;
}
.pppoe-user-card:hover .pppoe-hover-detail, .pppoe-user-card:focus .pppoe-hover-detail, .pppoe-user-card:focus-within .pppoe-hover-detail { display: block; }
.pppoe-hover-detail::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #0f172a; }
.pppoe-hover-detail h6 { margin-bottom: .65rem; color: #93c5fd; }
.pppoe-hover-detail > div { display: grid; grid-template-columns: 105px 1fr; gap: .5rem; padding: .28rem 0; font-size: .78rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.pppoe-hover-detail span { color: #94a3b8; }
.pppoe-hover-detail strong { overflow-wrap: anywhere; font-weight: 600; }
.pppoe-disconnect { width: 100%; margin-top: .75rem; padding: .5rem; border: 0; border-radius: 8px; background: #dc2626; color: white; }
.pppoe-disconnect:disabled { opacity: .55; }

/* iOS-inspired Liquid Glass theme */
:root {
    --page-bg: #eaf4ff;
    --glass: rgba(255, 255, 255, .38);
    --glass-strong: rgba(255, 255, 255, .58);
    --line: rgba(255, 255, 255, .72);
    --text: #14213d;
    --muted: rgba(51, 65, 85, .7);
    --laser-blue: #0a84ff;
    --laser-red: #ff375f;
    --liquid-shadow: 0 18px 55px rgba(42, 70, 120, .17), inset 0 1px 0 rgba(255, 255, 255, .92), inset 0 -1px 0 rgba(255, 255, 255, .25);
}

html { background: #dbeafe; }

body {
    color: var(--text);
    background:
        radial-gradient(circle at 8% 12%, rgba(75, 211, 255, .72), transparent 30rem),
        radial-gradient(circle at 91% 8%, rgba(191, 126, 255, .55), transparent 29rem),
        radial-gradient(circle at 82% 88%, rgba(255, 129, 168, .48), transparent 30rem),
        radial-gradient(circle at 18% 92%, rgba(111, 255, 193, .48), transparent 28rem),
        linear-gradient(145deg, #eff8ff 0%, #f5f0ff 48%, #eaf8ff 100%);
    background-attachment: fixed;
}

body::before {
    opacity: .72;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 2px, transparent 3px),
        linear-gradient(120deg, rgba(255,255,255,.2), transparent 45%);
    background-size: 90px 90px, 100% 100%;
    mask-image: none;
}

body::after {
    content: "";
    position: fixed;
    inset: auto -8vw -20vh auto;
    width: 52vw;
    height: 52vw;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(126,181,255,.16));
    filter: blur(12px);
    pointer-events: none;
}

.app-topbar,
.menu-shell,
.glass-card,
.glass-panel,
.splitter-card,
.rx-card,
.auth-card {
    position: relative;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.28));
    box-shadow: var(--liquid-shadow);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
}

.app-topbar::before,
.menu-shell::before,
.glass-card::before,
.auth-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255,255,255,.68), transparent 28%, transparent 72%, rgba(255,255,255,.2));
    pointer-events: none;
    z-index: 0;
}

.app-topbar > *, .menu-shell > *, .glass-card > *, .auth-card > * { position: relative; z-index: 1; }

.app-topbar {
    top: 12px;
    min-height: 66px;
    padding: 10px 14px;
    border-radius: 24px;
    background: linear-gradient(120deg, rgba(255,255,255,.72), rgba(255,255,255,.34));
}

.app-brand { color: #13213c; }
.app-brand:hover { color: #0a84ff; }
.app-brand img { border-color: rgba(255,255,255,.9); box-shadow: 0 6px 18px rgba(10,132,255,.18); }
.app-brand small { color: #64748b; }

.app-nav { padding: 4px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(255,255,255,.25); }
.app-nav a { color: #475569; transition: .22s ease; }
.app-nav a:hover {
    color: #075fbd;
    border-color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.72);
    box-shadow: 0 5px 16px rgba(10,132,255,.14), inset 0 1px 0 white;
    transform: translateY(-1px);
}

.menu-shell { border-radius: 30px; overflow: visible; }
.glass-card, .glass-panel, .splitter-card, .rx-card { border-radius: 22px; }
.glass-header { color: #14213d; background: rgba(255,255,255,.32); border-bottom: 1px solid rgba(255,255,255,.7); }
.menu-heading h1, .auth-card h1 { color: #111d35; letter-spacing: -.035em; }
.menu-heading p, .brand-subtitle, .text-muted { color: #64748b !important; }
.menu-eyebrow { color: #0878e8; }

.back-button,
.monitoring-action {
    color: #075fbd;
    border: 1px solid rgba(255,255,255,.8);
    background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.42));
    box-shadow: 0 8px 22px rgba(45, 92, 150, .12), inset 0 1px 0 white;
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
}
.back-button:hover, .monitoring-action:hover { color: #034b98; background: rgba(255,255,255,.88); transform: translateY(-2px) scale(1.015); box-shadow: 0 12px 28px rgba(10,132,255,.2); }

.form-control,
.form-select,
textarea.form-control {
    color: #17233b;
    border: 1px solid rgba(255,255,255,.84);
    background-color: rgba(255,255,255,.48);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 5px 16px rgba(51,65,85,.07);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.form-control:focus, .form-select:focus {
    color: #111827;
    border-color: rgba(10,132,255,.55);
    background-color: rgba(255,255,255,.75);
    box-shadow: 0 0 0 4px rgba(10,132,255,.12), inset 0 1px 0 white;
}
.form-control::placeholder { color: #94a3b8; }
.form-label { color: #334155; }

.table { --bs-table-bg: transparent; --bs-table-color: #25324a; --bs-table-striped-bg: rgba(255,255,255,.25); --bs-table-border-color: rgba(100,116,139,.16); }
.table thead th { color: #334155; background: rgba(255,255,255,.4); }
.table tbody tr:hover { background: rgba(255,255,255,.5); }

.result-box { overflow: hidden; }
.result-box::after { content: ""; position: absolute; width: 90px; height: 90px; right: -28px; top: -35px; border-radius: 50%; background: rgba(10,132,255,.14); filter: blur(2px); }

.monitoring-badge { border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 5px 12px rgba(15,23,42,.1); }
.monitoring-badge.is-online { color: #087c3d; background: rgba(48,209,88,.2); }
.monitoring-badge.is-offline { color: #c62244; background: rgba(255,55,95,.18); }

.pppoe-user-card {
    border: 1px solid rgba(255,255,255,.78);
    background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(255,255,255,.3));
    box-shadow: 0 12px 32px rgba(45,75,120,.13), inset 0 1px 0 white;
    -webkit-backdrop-filter: blur(22px) saturate(175%);
    backdrop-filter: blur(22px) saturate(175%);
}
.pppoe-user-card.is-on { border-top-color: rgba(48,209,88,.75); }
.pppoe-user-card.is-off { border-top-color: rgba(255,55,95,.68); }
.pppoe-user-card:hover, .pppoe-user-card:focus { border-color: white; box-shadow: 0 22px 52px rgba(42,70,120,.24), inset 0 1px 0 white; }
.pppoe-avatar { color: #0878e8; border: 1px solid rgba(255,255,255,.75); background: rgba(255,255,255,.45); box-shadow: inset 0 1px 0 white; }
.pppoe-username { color: #14213d; }
.pppoe-hover-detail { border: 1px solid rgba(255,255,255,.7); background: linear-gradient(145deg, rgba(30,41,59,.88), rgba(15,23,42,.76)); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); }

.alert { border: 1px solid rgba(255,255,255,.75); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.alert-success { color: #08783c; background: rgba(48,209,88,.16); }
.alert-danger { color: #b42342; background: rgba(255,55,95,.15); }

.app-loader { background: rgba(219,234,254,.42); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.app-loader-panel { color: #14213d; border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.62); box-shadow: var(--liquid-shadow); }

@media (max-width: 900px) {
    .app-topbar { align-items: flex-start; border-radius: 22px; }
    .app-nav { max-width: 100%; overflow-x: auto; justify-content: flex-start; }
    .app-nav a { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: no-preference) {
    .menu-shell, .glass-card, .glass-panel { animation: liquid-arrive .45s ease both; }
    @keyframes liquid-arrive { from { opacity: 0; transform: translateY(8px) scale(.995); } to { opacity: 1; transform: none; } }
}

.table-nowrap th,
.table-nowrap td {
    white-space: nowrap;
}

.customer-table-search .form-control,
.customer-page-size {
    min-height: 34px;
    padding: 5px 10px;
    font-size: 12px;
}

.customer-search-row th {
    background: rgba(255, 255, 255, 0.045) !important;
}

.customer-search-row .form-control {
    min-width: 128px;
}

.customer-search-actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.customer-page-size {
    width: 88px;
}

.customer-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.customer-page-indicator {
    color: rgba(248, 251, 255, 0.72);
    font-size: 13px;
    font-weight: 700;
}

.back-button.is-disabled {
    pointer-events: none;
    opacity: 0.45;
}

.ktp-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ktp-modal.is-open {
    display: flex;
}

.ktp-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.74);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.ktp-modal-panel {
    position: relative;
    width: min(760px, 94vw);
    max-height: 90vh;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    background: rgba(10, 18, 34, 0.9);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5), 0 0 34px rgba(48, 201, 255, 0.16);
}

.ktp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ktp-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.ktp-modal img {
    display: block;
    width: 100%;
    max-height: calc(90vh - 82px);
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
}

.payment-modal-panel {
    width: min(640px, 94vw);
    pointer-events: auto;
}
.payment-modal-panel form,.payment-modal-panel button,.payment-modal-panel input,.payment-modal-panel select{pointer-events:auto}

.payment-customer-summary {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(48, 201, 255, 0.22);
    border-radius: 12px;
    background: rgba(48, 201, 255, 0.1);
}

.payment-customer-summary span {
    color: rgba(248, 251, 255, 0.72);
    font-size: 13px;
}

.app-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 20px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: rgba(2, 6, 23, 0.56);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
    transition: opacity 160ms ease, visibility 160ms ease;
}

.app-loader.is-active {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.app-loader-panel {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 178px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    color: var(--text);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
    box-shadow: 0 24px 74px rgba(0, 0, 0, 0.42), 0 0 34px rgba(48, 201, 255, 0.14);
}

.app-loader-panel strong {
    font-size: 13px;
}

.app-loader-panel span {
    color: var(--muted);
    font-size: 11px;
}

.app-loader-ring {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--laser-blue);
    border-radius: 999px;
    animation: loaderSpin 720ms linear infinite;
    box-shadow: 0 0 18px rgba(48, 201, 255, 0.24);
}

.auth-shell {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 20px;
}

.auth-card {
    width: min(420px, 100%);
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(145deg, var(--glass-strong), rgba(255, 255, 255, 0.055));
    box-shadow: 0 28px 82px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
}

.auth-card h1 {
    margin: 16px 0;
    font-size: 28px;
}

@keyframes loaderSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Compact card titles */
.card-header,
.glass-header {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 760;
    letter-spacing: 0;
}

.glass-header i {
    font-size: 12px;
}

.menu-heading {
    margin-top: 10px;
}

.menu-heading h1 {
    font-size: clamp(24px, 3vw, 40px);
    line-height: 1.05;
}

.menu-heading p {
    margin-top: 6px;
    font-size: 13px;
}

.brand-subtitle {
    margin-top: 1px;
    font-size: 12px;
}

.result-box {
    min-height: 92px;
    padding: 14px 16px;
}

.result-box > .text-muted,
.result-box > div:first-child {
    font-size: 12px;
    font-weight: 700;
}

.result-box h3 {
    margin-top: 3px;
    font-size: clamp(22px, 2.2vw, 30px);
}

.calculator-header h4,
.calculator-page h4 {
    font-size: 16px;
}

.calculator-page h5 {
    margin-bottom: 6px !important;
    font-size: 14px;
}

/* App layout refinements */
.menu-shell {
    width: 100%;
    max-width: none;
    padding: 22px;
    border-radius: 20px;
}

.monitoring-shell {
    min-height: calc(100vh - 154px);
}

.menu-heading {
    margin-top: 14px;
}

.menu-heading h1 {
    font-size: clamp(28px, 4vw, 52px);
}

.menu-heading p {
    max-width: 720px;
}

.page-toolbar {
    gap: 8px;
    margin-bottom: 10px !important;
}

.back-button {
    min-height: 32px;
    gap: 7px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 12px;
}

.back-button:hover {
    transform: translateY(-1px);
}

.monitoring-action {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
}

.card {
    border-radius: 18px;
}

.card-body {
    padding: 14px;
}

.card-body.table-responsive,
.table-responsive {
    scrollbar-color: rgba(48, 201, 255, 0.42) rgba(255, 255, 255, 0.05);
}

.customer-table-search thead {
    position: sticky;
    top: 0;
    z-index: 20;
    isolation: isolate;
}

.customer-table-search thead::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: rgba(48, 201, 255, 0.34);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
}

.customer-table-search thead th {
    position: static;
    z-index: auto;
    background: rgba(13, 24, 43, 0.98) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
}

.customer-table-search .customer-search-row th {
    height: 44px;
    background: rgba(8, 17, 32, 0.99) !important;
    border-bottom-color: rgba(48, 201, 255, 0.24);
}

.customer-table-search tbody {
    position: relative;
    z-index: 1;
}

.customer-search-row .form-control {
    min-width: 112px;
    height: 31px;
    border-radius: 999px;
}

.customer-search-actions {
    min-width: 156px;
}

.brand-bar {
    gap: 10px;
}

.brand-logo {
    width: 54px;
    height: 54px;
    border-radius: 16px;
}

.tool-card {
    min-height: 104px;
}

@media (max-width: 991.98px) {
    .app-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-nav {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .app-nav a {
        flex: 0 0 auto;
    }

    .app-content > .container,
    .app-content main.container {
        padding-inline: 12px;
    }

    .menu-shell {
        padding: 16px;
        border-radius: 18px;
    }

    .card-body.table-responsive {
        max-height: none;
    }
}

@media (max-width: 575.98px) {
    .app-topbar {
        width: calc(100% - 16px);
    }

    .app-topbar {
        top: 6px;
        margin-top: 6px;
        padding: 8px;
        border-radius: 16px;
    }

    .app-brand img {
        width: 34px;
        height: 34px;
    }

    .app-brand small {
        display: none;
    }

    .app-content > .container,
    .app-content main.container {
        padding: 10px 8px 14px;
    }

    .menu-shell {
        padding: 12px;
        border-radius: 16px;
    }

    .menu-heading h1 {
        font-size: 26px;
    }

    .menu-heading p {
        font-size: 13px;
    }

    .page-toolbar {
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .back-button {
        min-height: 30px;
        padding-inline: 9px;
        font-size: 11px;
    }

    .card-body {
        padding: 10px;
    }

    .table td,
    .table th {
        padding: 7px 8px;
        font-size: 12px;
    }

    .customer-pagination {
        justify-content: center;
        flex-wrap: wrap;
    }

    .customer-search-actions {
        min-width: 138px;
    }
}

/* Liquid Glass final cascade: keep legacy compact rules from repainting the theme. */
body { color: var(--text); }
.app-topbar,
.menu-shell,
.glass-card,
.glass-panel,
.splitter-card,
.rx-card,
.auth-card {
    border-color: var(--line);
    background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.28));
    box-shadow: var(--liquid-shadow);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
}
.app-topbar { border-radius: 22px; }
.menu-shell { border-radius: 30px; }
.glass-card, .glass-panel { border-radius: 22px; }
.customer-table-search thead th,
.customer-table-search .customer-search-row th {
    color: #334155;
    background: rgba(244,249,255,.88) !important;
    border-color: rgba(100,116,139,.14);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
}
.customer-table-search thead::after { background: rgba(10,132,255,.2); box-shadow: 0 8px 18px rgba(42,70,120,.12); }
.card, .card-body, .card-header { color: var(--text); }

@media (max-width: 575.98px) {
    .app-topbar { border-radius: 18px; }
    .menu-shell { border-radius: 22px; }
}

/* Final compact title pass */
.card-header,
.glass-header {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 760;
}

.menu-heading {
    margin-top: 9px;
}

.menu-heading h1 {
    font-size: clamp(24px, 2.8vw, 38px);
    line-height: 1.05;
}

.menu-heading p {
    margin-top: 5px;
    font-size: 13px;
}

.result-box {
    min-height: 88px;
    padding: 13px 15px;
}

.result-box h3 {
    margin-top: 2px;
    font-size: clamp(21px, 2vw, 28px);
}

.calculator-page .glass-header {
    padding: 7px 12px;
}

.calculator-page h4 {
    font-size: 16px;
}

.calculator-page h5 {
    font-size: 14px;
}

/* Denser dashboard pass */
.app-topbar {
    min-height: 48px;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 15px;
}

.app-brand img {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.app-brand strong {
    font-size: 13px;
}

.app-brand small {
    font-size: 10px;
}

.app-nav a {
    min-height: 28px;
    padding-inline: 9px;
    font-size: 11px;
}

.app-content {
    flex: 0 0 auto;
}

.app-content > .container,
.app-content main.container {
    padding: 8px 14px 8px;
}

.menu-shell {
    min-height: 0;
    padding: 14px;
    border-radius: 16px;
}

.monitoring-shell {
    min-height: 0;
}

.page-toolbar {
    margin-bottom: 6px !important;
}

/* Global module toolbar: back navigation on the left, actions in one block on the right. */
.page-toolbar > .back-button:first-child {
    flex: 0 0 auto;
}

.toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-left: auto;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(10, 24, 42, 0.48);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
}

.toolbar-actions .back-button {
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .page-toolbar {
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .toolbar-actions {
        max-width: calc(100% - 44px);
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }

.toolbar-actions::-webkit-scrollbar {
        display: none;
    }

    .page-toolbar > .back-button:first-child span {
        display: none;
    }
}

.android-launcher{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:20px}.launcher-app{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;color:var(--text);border:0;background:transparent;text-align:center;cursor:pointer}.launcher-icon{display:grid;place-items:center;width:76px;height:76px;border:1px solid #ffffff2b;border-radius:23px;color:#fff;font-size:29px;background:linear-gradient(145deg,#168cca,#0d4f8e);box-shadow:0 13px 28px #0005,inset 0 1px 1px #ffffff55;transition:.2s}.launcher-icon.is-violet{background:linear-gradient(145deg,#9868e8,#553099)}.launcher-icon.is-blue{background:linear-gradient(145deg,#378cff,#17468f)}.launcher-icon.is-orange{background:linear-gradient(145deg,#f2a33c,#a14a18)}.launcher-icon.is-green{background:linear-gradient(145deg,#2bc792,#137454)}.launcher-app strong{font-size:14px}.launcher-app small{max-width:150px;color:var(--muted);font-size:11px}.launcher-app:hover .launcher-icon,.launcher-app[aria-expanded=true] .launcher-icon{transform:translateY(-5px) scale(1.04);box-shadow:0 17px 34px #0007,0 0 22px #38bdf855}.launcher-panel{padding:18px;border:1px solid #ffffff1f;border-radius:24px;background:#09182bb8;box-shadow:0 18px 50px #0004;backdrop-filter:blur(18px)}.launcher-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.launcher-panel-head small{color:var(--muted);letter-spacing:.12em}.launcher-panel-head h2{margin:2px 0 0;font-size:22px}.launcher-close{width:36px;height:36px;border:1px solid #ffffff26;border-radius:50%;color:var(--text);background:#ffffff0d}.launcher-subgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.launcher-subapp{display:grid;grid-template-columns:42px 1fr 16px;align-items:center;gap:11px;padding:12px;color:var(--text);text-decoration:none;border:1px solid #ffffff17;border-radius:17px;background:#ffffff0a}.launcher-subapp>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:#7ddcff;background:#1383b82e}.launcher-subapp strong,.launcher-subapp small{display:block}.launcher-subapp small{margin-top:2px;color:var(--muted);font-size:11px}.launcher-subapp:hover{color:var(--text);border-color:#58cfff65;background:#58cfff10;transform:translateY(-2px)}
@media(max-width:767.98px){.android-launcher{grid-template-columns:repeat(3,1fr);gap:13px 8px}.launcher-icon{width:62px;height:62px;border-radius:19px;font-size:23px}.launcher-app{padding:8px 3px}.launcher-app strong{font-size:12px}.launcher-app small{display:none}.launcher-subgrid{grid-template-columns:1fr}.launcher-panel{padding:14px;border-radius:20px}}

.brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 13px;
}

.brand-bar {
    gap: 8px;
}

.menu-eyebrow {
    font-size: 10px;
}

.brand-subtitle {
    font-size: 11px;
}

.menu-heading {
    margin-top: 6px;
}

.menu-heading h1 {
    font-size: clamp(20px, 2.2vw, 30px);
}

.menu-heading p {
    margin-top: 3px;
    font-size: 12px;
}

.card-header,
.glass-header {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 12px;
}

.glass-header i {
    font-size: 11px;
}

.card-body {
    padding: 10px;
}

.result-box {
    min-height: 72px;
    padding: 10px 12px;
}

.result-box > .text-muted,
.result-box > div:first-child {
    font-size: 11px;
}

.result-box h3 {
    font-size: clamp(18px, 1.7vw, 24px);
}

.calculator-page .container {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.calculator-page .glass-header {
    padding: 5px 10px;
}

.calculator-page h4 {
    font-size: 14px;
}

.calculator-page h5 {
    font-size: 13px;
}

@media (max-width: 575.98px) {
    .app-content > .container,
    .app-content main.container {
        padding: 8px 7px;
    }

    .menu-shell {
        padding: 10px;
    }

    .menu-heading h1 {
        font-size: 20px;
    }

}

/* Ensure Liquid Glass wins the complete legacy cascade. */
.app-topbar, .menu-shell, .glass-card, .glass-panel, .splitter-card, .rx-card, .auth-card {
    border-color: var(--line);
    background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.28));
    box-shadow: var(--liquid-shadow);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
}
.app-topbar { border-radius: 22px; }
.menu-shell { border-radius: 30px; }
.customer-table-search thead th, .customer-table-search .customer-search-row th {
    color: #334155;
    background: rgba(244,249,255,.88) !important;
    border-color: rgba(100,116,139,.14);
}

/* Dark Liquid Glass palette */
:root {
    --page-bg: #050914;
    --glass: rgba(14, 23, 42, .46);
    --glass-strong: rgba(20, 31, 54, .68);
    --line: rgba(255, 255, 255, .14);
    --text: #f3f7ff;
    --muted: rgba(203, 213, 225, .68);
    --laser-blue: #64d2ff;
    --laser-red: #ff6482;
    --liquid-shadow: 0 22px 65px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .035);
}

html { background: #030712; }
body {
    color: var(--text);
    background:
        radial-gradient(circle at 9% 10%, rgba(0, 153, 255, .32), transparent 31rem),
        radial-gradient(circle at 91% 6%, rgba(129, 70, 255, .28), transparent 30rem),
        radial-gradient(circle at 84% 88%, rgba(255, 49, 112, .17), transparent 31rem),
        radial-gradient(circle at 14% 92%, rgba(0, 224, 190, .14), transparent 29rem),
        linear-gradient(145deg, #02050c 0%, #091224 48%, #030712 100%);
    background-attachment: fixed;
}
body::before {
    opacity: .48;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.32) 0 1px, transparent 2px),
        linear-gradient(120deg, rgba(100,210,255,.08), transparent 44%);
    background-size: 90px 90px, 100% 100%;
}
body::after { background: linear-gradient(135deg, rgba(70,130,255,.13), rgba(139,92,246,.07)); }

.app-topbar, .menu-shell, .glass-card, .glass-panel, .splitter-card, .rx-card, .auth-card {
    color: var(--text);
    border-color: rgba(255,255,255,.14);
    background: linear-gradient(135deg, rgba(23,35,58,.76), rgba(7,14,28,.42));
    box-shadow: var(--liquid-shadow);
    -webkit-backdrop-filter: blur(30px) saturate(170%);
    backdrop-filter: blur(30px) saturate(170%);
}
.app-topbar::before, .menu-shell::before, .glass-card::before, .auth-card::before {
    background: linear-gradient(120deg, rgba(255,255,255,.14), transparent 27%, transparent 73%, rgba(100,210,255,.045));
}
.app-brand, .app-brand:hover { color: #f5f8ff; }
.app-brand img { border-color: rgba(255,255,255,.22); box-shadow: 0 8px 22px rgba(0,145,255,.24); }
.app-brand small, .brand-subtitle, .menu-heading p, .text-muted { color: var(--muted) !important; }
.app-nav { border-color: rgba(255,255,255,.1); background: rgba(3,9,20,.28); }
.app-nav a { color: rgba(226,232,240,.76); }
.app-nav a:hover { color: #eaf8ff; border-color: rgba(100,210,255,.24); background: rgba(64,156,255,.15); box-shadow: 0 7px 20px rgba(0,130,255,.16), inset 0 1px 0 rgba(255,255,255,.12); }

.menu-heading h1, .auth-card h1, .pppoe-username, .card, .card-body, .card-header { color: var(--text); }
.menu-eyebrow, .glass-header i { color: #64d2ff; }
.glass-header { color: #edf7ff; border-bottom-color: rgba(255,255,255,.1); background: rgba(8,16,31,.24); }

.back-button, .monitoring-action {
    color: #b9eaff;
    border-color: rgba(255,255,255,.16);
    background: linear-gradient(135deg, rgba(38,57,87,.72), rgba(12,23,42,.48));
    box-shadow: 0 9px 25px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.14);
}
.back-button:hover, .monitoring-action:hover { color: white; border-color: rgba(100,210,255,.32); background: rgba(36,112,175,.35); box-shadow: 0 13px 30px rgba(0,130,255,.2); }

.form-control, .form-select, textarea.form-control {
    color: #eef5ff;
    border-color: rgba(255,255,255,.13);
    background-color: rgba(5,13,27,.52);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 7px 20px rgba(0,0,0,.13);
}
.form-control:hover, .form-select:hover { background-color: rgba(10,22,41,.68); }
.form-control:focus, .form-select:focus { color: white; border-color: rgba(100,210,255,.48); background-color: rgba(8,19,37,.82); box-shadow: 0 0 0 4px rgba(10,132,255,.14), inset 0 1px 0 rgba(255,255,255,.1); }
.form-control::placeholder { color: rgba(148,163,184,.72); }
.form-label { color: #cbd5e1; }
.form-select option { color: #eaf2ff; background: #111b2d; }

.table { --bs-table-bg: transparent; --bs-table-color: #dce7f7; --bs-table-striped-color: #e8f1ff; --bs-table-striped-bg: rgba(255,255,255,.025); --bs-table-hover-color: white; --bs-table-hover-bg: rgba(100,210,255,.055); --bs-table-border-color: rgba(148,163,184,.12); }
.table thead th { color: #c9d8eb; background: rgba(5,13,27,.38); }
.customer-table-search thead th, .customer-table-search .customer-search-row th {
    color: #dce9f8;
    background: rgba(7,16,31,.92) !important;
    border-color: rgba(100,210,255,.1);
}
.customer-table-search thead::after { background: rgba(100,210,255,.2); box-shadow: 0 8px 20px rgba(0,0,0,.28); }

.pppoe-user-card {
    color: var(--text);
    border-color: rgba(255,255,255,.14);
    background: linear-gradient(145deg, rgba(27,42,67,.76), rgba(7,15,29,.5));
    box-shadow: 0 15px 38px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.13);
}
.pppoe-user-card:hover, .pppoe-user-card:focus { border-color: rgba(100,210,255,.32); box-shadow: 0 24px 58px rgba(0,0,0,.48), 0 0 25px rgba(0,132,255,.09), inset 0 1px 0 rgba(255,255,255,.17); }
.pppoe-avatar { color: #64d2ff; border-color: rgba(255,255,255,.15); background: rgba(100,210,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.11); }
.pppoe-router, .pppoe-uptime small { color: #94a3b8; }
.pppoe-uptime { border-top-color: rgba(255,255,255,.08); }
.pppoe-hover-detail { border-color: rgba(255,255,255,.16); background: linear-gradient(145deg, rgba(22,34,55,.94), rgba(3,9,20,.9)); }

.monitoring-badge.is-online { color: #7bf1a8; border-color: rgba(48,209,88,.25); background: rgba(48,209,88,.13); }
.monitoring-badge.is-offline { color: #ff8ca3; border-color: rgba(255,55,95,.24); background: rgba(255,55,95,.12); }
.result-box::after { background: rgba(100,210,255,.09); }
.alert-success { color: #83efad; background: rgba(48,209,88,.1); }
.alert-danger { color: #ff94aa; background: rgba(255,55,95,.1); }
.alert { border-color: rgba(255,255,255,.12); }
.app-loader { background: rgba(1,5,13,.58); }
.app-loader-panel { color: #f2f7ff; border-color: rgba(255,255,255,.15); background: rgba(12,22,39,.78); }
.app-footer { position: relative; z-index: 1; padding: 10px 18px 18px; color: rgba(203,213,225,.58); text-align: center; font-size: .72rem; }
.app-menu-dropdown { position: relative; }
.app-menu-dropdown summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    color: #dcecff;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    cursor: pointer;
    list-style: none;
    font-size: .76rem;
    font-weight: 750;
    user-select: none;
}
.app-menu-dropdown summary::-webkit-details-marker { display: none; }
.app-menu-dropdown summary:hover { border-color: rgba(100,210,255,.28); background: rgba(10,132,255,.14); }
.app-menu-dropdown .menu-chevron { font-size: .62rem; transition: transform .2s ease; }
.app-menu-dropdown[open] .menu-chevron { transform: rotate(180deg); }
.app-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1000;
    display: grid;
    width: min(340px, calc(100vw - 28px));
    max-height: min(72vh, 560px);
    padding: 8px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(22,35,58,.96), rgba(3,9,20,.93));
    box-shadow: 0 22px 65px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.13), 0 0 28px rgba(43,162,255,.08);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
    scrollbar-width: thin;
    scrollbar-color: rgba(100,210,255,.45) transparent;
}
.app-menu-panel a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    min-height: 48px;
    padding: 7px 9px;
    color: #d7e5f7;
    border: 1px solid transparent;
    border-radius: 11px;
    text-decoration: none;
    font-size: .78rem;
}
.app-menu-panel a i { color: #69d4ff; text-align: center; }
.app-menu-panel a > span { display: grid; gap: 1px; min-width: 0; }
.app-menu-panel a strong { color: inherit; font-size: .78rem; font-weight: 720; }
.app-menu-panel a small { color: rgba(174,191,210,.62); font-size: .61rem; line-height: 1.25; }
.app-menu-panel a:hover { color: white; border-color: rgba(100,210,255,.16); background: rgba(100,210,255,.09); transform: none; }
.app-menu-panel a.is-active { color: #f3fbff; border-color: rgba(100,210,255,.22); background: linear-gradient(135deg, rgba(34,139,214,.22), rgba(77,71,181,.12)); box-shadow: inset 3px 0 0 #64d2ff, inset 0 1px 0 rgba(255,255,255,.07); }
.app-menu-panel a.is-active i { color: #8ce3ff; filter: drop-shadow(0 0 7px rgba(100,210,255,.42)); }
.app-menu-section { display: flex; align-items: center; gap: 8px; margin: 8px 8px 3px; color: rgba(142,167,194,.64); font-size: .57rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.app-menu-section:first-child { margin-top: 3px; }
.app-menu-section::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(100,210,255,.16), transparent); }
.language-switch { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(3,9,20,.34); }
.language-switch a { display: grid; place-items: center; min-width: 30px; height: 27px; padding: 0 7px; border-radius: 999px; color: rgba(203,213,225,.62); font-size: .61rem; font-weight: 800; letter-spacing: .05em; text-decoration: none; transition: .2s ease; }
.language-switch a:hover { color: #effaff; background: rgba(100,210,255,.1); }
.language-switch a.is-active { color: #fff; background: linear-gradient(135deg, #168bd1, #695ee8); box-shadow: 0 5px 15px rgba(34,139,214,.3), inset 0 1px rgba(255,255,255,.22); }
.menu-shell > .brand-bar { display: none !important; }
.chart-report-card { overflow: hidden; }
.report-chart-wrap { position: relative; width: 100%; height: 340px; }
.report-dashboard-container { width: min(100%, 1540px); margin-inline: auto; padding-inline: clamp(10px, 2vw, 28px); }
@media (max-width: 991.98px) { .report-chart-wrap { height: clamp(280px, 70vw, 390px); } }
.auth-language-switch { position: fixed; top: 18px; right: 18px; z-index: 10; }
.app-menu-panel a.is-logout, .app-menu-panel a.is-logout i { color: #ff91a7; }
.app-menu-divider { height: 1px; margin: 6px 8px; background: rgba(255,255,255,.09); }
.app-home-link { gap: 6px; }
.app-home-link i { color: #69d4ff; }

/* Global responsive tables: keep table content inside its glass card. */
.card,
.glass-card { max-width: 100%; }
.card-body.table-responsive,
.table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,210,255,.48) rgba(255,255,255,.04);
}
.table-responsive > .table,
.card-body.table-responsive > .table {
    width: max-content;
    min-width: 100%;
    margin-bottom: 0;
}
.table-responsive::-webkit-scrollbar,
.card-body.table-responsive::-webkit-scrollbar { width: 8px; height: 8px; }
.table-responsive::-webkit-scrollbar-track,
.card-body.table-responsive::-webkit-scrollbar-track { border-radius: 999px; background: rgba(255,255,255,.035); }
.table-responsive::-webkit-scrollbar-thumb,
.card-body.table-responsive::-webkit-scrollbar-thumb {
    border: 2px solid rgba(8,17,32,.88);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(100,210,255,.7), rgba(10,132,255,.45));
}
.monitoring-shell .card { overflow: hidden !important; }
.monitoring-shell .card-body.table-responsive,
.monitoring-shell .table-responsive { overflow-x: auto !important; overflow-y: auto !important; }
.monitoring-shell .pppoe-card-grid { overflow: visible !important; }

/* Keep scrolled rows behind a solid, reusable sticky table header. */
.table-responsive table > thead,
.card-body.table-responsive table > thead {
    position: sticky;
    top: 0;
    z-index: 30;
    isolation: isolate;
}
.table-responsive table > thead th,
.card-body.table-responsive table > thead th {
    background-color: rgba(8, 17, 32, .99) !important;
    background-clip: padding-box;
    box-shadow: inset 0 -1px rgba(100, 210, 255, .22);
}
.table-responsive table > tbody,
.card-body.table-responsive table > tbody {
    position: relative;
    z-index: 0;
}

/* Reusable date-range search control for date columns. */
.table-date-range {
    display: grid;
    grid-template-columns: minmax(132px, 1fr) auto minmax(132px, 1fr);
    align-items: center;
    gap: 6px;
    min-width: 286px;
}
.table-date-range > span { color: var(--muted); text-align: center; }
.customer-search-row .table-date-range .form-control {
    min-width: 132px;
    padding-inline: 9px;
    color-scheme: dark;
}

@media (max-width: 767.98px) {
    .table-responsive > .table,
    .card-body.table-responsive > .table { min-width: 720px; }
    .app-home-link span { display: none; }
    .app-home-link { min-width: 34px; justify-content: center; padding-inline: 9px !important; }
}

/* Monitoring: horizontal neon glass cards and unclipped fixed details. */
.monitoring-shell,
.monitoring-shell .card,
.monitoring-shell .card-body,
.pppoe-card-grid {
    overflow: visible !important;
}
.pppoe-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
}
.pppoe-user-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    align-items: center;
    min-height: 122px;
    padding: 15px 17px;
    border-radius: 18px;
    background: linear-gradient(110deg, rgba(27,43,69,.62), rgba(5,14,29,.36));
    box-shadow: 0 12px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.13), 0 0 18px rgba(43,162,255,.055);
}
.pppoe-user-card.is-on { border: 1px solid rgba(56,226,132,.25); box-shadow: 0 12px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.13), 0 0 20px rgba(48,209,88,.1); }
.pppoe-user-card.is-off { border: 1px solid rgba(255,79,118,.2); box-shadow: 0 12px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.11), 0 0 18px rgba(255,55,95,.07); }
.pppoe-card-head { grid-column: 1; grid-row: 1 / 4; display: flex; flex-direction: column; justify-content: center; gap: 10px; margin: 0; }
.pppoe-avatar { width: 46px; height: 46px; border-radius: 15px; font-size: 1.05rem; }
.pppoe-card-head .monitoring-badge { align-self: center; min-width: 42px; text-align: center; }
.pppoe-username { grid-column: 2; grid-row: 1; font-size: 1rem; }
.pppoe-customer-name { grid-column: 2; grid-row: 2; overflow: hidden; color: #cbd9ec; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.pppoe-router { grid-column: 2; grid-row: 3; margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pppoe-uptime { grid-column: 3; grid-row: 1 / 4; min-width: 92px; margin: 0; padding: 0 0 0 15px; border-top: 0; border-left: 1px solid rgba(255,255,255,.09); text-align: right; }
.pppoe-uptime strong { color: #eef8ff; font-size: .9rem; }
.pppoe-hover-detail {
    position: fixed;
    inset: 50% auto auto 50%;
    bottom: auto;
    display: none;
    width: min(520px, calc(100vw - 28px));
    max-height: min(80vh, 680px);
    padding: 18px;
    overflow-y: auto;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(22,35,58,.96), rgba(3,9,20,.92));
    box-shadow: 0 28px 90px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.16), 0 0 35px rgba(43,162,255,.12);
    z-index: 10000;
}
.pppoe-hover-detail::after { display: none; }
.pppoe-hover-detail h6 { position: sticky; top: -18px; z-index: 1; margin: -18px -18px 10px; padding: 16px 18px 12px; background: rgba(13,25,44,.88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.pppoe-hover-detail > div { grid-template-columns: 125px minmax(0, 1fr); padding: .38rem 0; font-size: .81rem; }

@media (max-width: 575.98px) {
    .pppoe-card-grid { grid-template-columns: 1fr; }
    .pppoe-user-card { grid-template-columns: 44px minmax(0, 1fr); min-height: 132px; padding: 13px; }
    .pppoe-avatar { width: 40px; height: 40px; }
    .pppoe-uptime { grid-column: 2; grid-row: 4; align-items: center; flex-direction: row; justify-content: space-between; margin-top: 8px; padding: 7px 0 0; border-top: 1px solid rgba(255,255,255,.08); border-left: 0; text-align: left; }
    .pppoe-hover-detail > div { grid-template-columns: 105px minmax(0, 1fr); }
}

/* Monitoring details open by button, not by hover. */
.pppoe-user-card:hover .pppoe-hover-detail,
.pppoe-user-card:focus .pppoe-hover-detail,
.pppoe-user-card:focus-within .pppoe-hover-detail { display: none; }
.pppoe-user-card.is-detail-open .pppoe-hover-detail { display: block; }
.pppoe-hover-detail {
    width: min(410px, calc(100vw - 28px));
    max-height: min(66vh, 520px);
    padding: 14px 16px 16px;
}
.pppoe-detail-title {
    position: sticky;
    top: -14px;
    z-index: 2;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    justify-content: space-between;
    margin: -14px -16px 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
    background: rgba(13,25,44,.92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.pppoe-detail-title h6 { position: static; margin: 0; padding: 0; background: none; }
.pppoe-detail-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #dce9f8;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    background: rgba(255,255,255,.07);
}
.pppoe-detail-close:hover { color: white; background: rgba(255,255,255,.14); }
.pppoe-detail-button {
    margin-top: 8px;
    padding: 5px 9px;
    color: #b9eaff;
    border: 1px solid rgba(100,210,255,.22);
    border-radius: 999px;
    background: rgba(10,132,255,.1);
    font-size: .72rem;
    white-space: nowrap;
}
.pppoe-detail-button:hover { color: white; background: rgba(10,132,255,.22); box-shadow: 0 0 14px rgba(10,132,255,.16); }
.optical-signal { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 7px; font-size: .72rem; font-weight: 750; white-space: nowrap; }
.optical-signal.is-normal { color: #78efa7; }
.optical-signal.is-warning { color: #ffd166; }
.optical-signal.is-critical { color: #ff7894; text-shadow: 0 0 10px rgba(255,55,95,.35); }
.optical-signal.is-offline, .optical-signal.is-unknown { color: #94a3b8; }
.pppoe-card-disconnect {
    margin-top: 8px;
    padding: 5px 9px;
    color: #ff9caf;
    border: 1px solid rgba(255,55,95,.28);
    border-radius: 999px;
    background: rgba(255,55,95,.1);
    font-size: .7rem;
    white-space: nowrap;
}
.pppoe-card-disconnect:hover { color: white; background: rgba(255,55,95,.24); box-shadow: 0 0 15px rgba(255,55,95,.2); }
.pppoe-card-disconnect:disabled { cursor: wait; opacity: .55; }
.pppoe-card-connect {
    margin-top: 8px;
    padding: 5px 9px;
    color: #7bf1a8;
    border: 1px solid rgba(48,209,88,.28);
    border-radius: 999px;
    background: rgba(48,209,88,.1);
    font-size: .7rem;
    white-space: nowrap;
}
.pppoe-card-connect:hover { color: white; background: rgba(48,209,88,.22); box-shadow: 0 0 15px rgba(48,209,88,.18); }
.pppoe-card-connect:disabled { cursor: wait; opacity: .55; }
.pppoe-disconnect.is-connect { background: #16854a; }
.pppoe-disconnect.is-connect:hover { background: #1ea95f; box-shadow: 0 0 16px rgba(48,209,88,.2); }

/* Monitoring search, sorting, symmetric cards, and top-level detail layer. */
.monitoring-filter-bar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(210px, 280px) auto;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: linear-gradient(120deg, rgba(24,39,63,.58), rgba(5,14,29,.34));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 28px rgba(0,0,0,.2);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
}
.monitoring-search-box { position: relative; }
.monitoring-search-box > i { position: absolute; top: 50%; left: 14px; z-index: 2; color: #7dd3fc; transform: translateY(-50%); pointer-events: none; }
.monitoring-search-box .form-control { padding-left: 40px; }
.monitoring-sort { min-width: 210px; }
.monitoring-result-count { color: #a9bdd5; font-size: .78rem; white-space: nowrap; }
.pppoe-user-card,
.pppoe-user-card.is-on,
.pppoe-user-card.is-off {
    overflow: visible;
    border-radius: 18px !important;
    clip-path: none;
}
.pppoe-user-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 17px;
    background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 28%);
    pointer-events: none;
}
.pppoe-hover-detail.is-open {
    display: block !important;
    position: fixed !important;
    inset: 50% auto auto 50% !important;
    z-index: 2147483000 !important;
    transform: translate(-50%, -50%) !important;
    width: min(470px, calc(100vw - 28px));
    max-height: min(74vh, 620px);
}
body > .pppoe-hover-detail { isolation: isolate; }
.pppoe-modal-open { overflow: hidden !important; }
.pppoe-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    cursor: default;
    background: rgba(1, 5, 13, .56);
    -webkit-backdrop-filter: blur(7px) saturate(80%);
    backdrop-filter: blur(7px) saturate(80%);
    touch-action: none;
    overscroll-behavior: contain;
}
.pppoe-hover-detail {
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,210,255,.55) rgba(255,255,255,.045);
}
.pppoe-hover-detail::-webkit-scrollbar { width: 8px; }
.pppoe-hover-detail::-webkit-scrollbar-track {
    margin-block: 54px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.035);
}
.pppoe-hover-detail::-webkit-scrollbar-thumb {
    border: 2px solid rgba(9,18,33,.82);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(100,210,255,.82), rgba(10,132,255,.46));
    box-shadow: 0 0 10px rgba(43,162,255,.28);
}
.pppoe-hover-detail::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8de3ff, rgba(31,145,255,.72));
}
.pppoe-hover-detail > div:not(.pppoe-detail-title) {
    grid-template-columns: 142px minmax(0, 1fr);
    padding: .42rem 10px .42rem 14px;
}
.pppoe-hover-detail > div:not(.pppoe-detail-title) > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.pppoe-hover-detail > div:not(.pppoe-detail-title) > span i {
    width: 16px;
    color: #69d4ff;
    text-align: center;
    filter: drop-shadow(0 0 5px rgba(43,162,255,.22));
}
.pppoe-detail-title {
    margin: -6px 6px 10px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
}
.pppoe-detail-title h6 { display: inline-flex; align-items: center; gap: 9px; }
.pppoe-detail-title h6 i { color: #69d4ff; filter: drop-shadow(0 0 7px rgba(43,162,255,.3)); }

@media (max-width: 767.98px) {
    .monitoring-filter-bar { grid-template-columns: 1fr; }
    .monitoring-sort { width: 100%; }
    .monitoring-result-count { padding-inline: 3px; }
    .pppoe-hover-detail > div:not(.pppoe-detail-title) { grid-template-columns: 125px minmax(0, 1fr); padding-left: 9px; }
}

/* Compact, informative customer cards. */
.pppoe-card-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.pppoe-user-card {
    grid-template-columns: 42px minmax(0, 1fr) 118px;
    column-gap: 11px;
    min-height: 118px;
    padding: 11px 13px 9px;
    border-radius: 15px !important;
}
.pppoe-user-card::before { border-radius: 14px; }
.pppoe-card-head { gap: 7px; }
.pppoe-avatar { width: 38px; height: 38px; border-radius: 12px; font-size: .9rem; }
.pppoe-card-head .monitoring-badge { min-width: 38px; padding: 3px 7px; font-size: .65rem; }
.pppoe-username { font-size: .88rem; }
.pppoe-customer-name { font-size: .79rem; }
.pppoe-router { font-size: .7rem; }
.pppoe-uptime { min-width: 0; padding-left: 11px; }
.pppoe-metric { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.pppoe-metric small { color: #8495ab; font-size: .65rem; }
.pppoe-metric strong { font-size: .73rem; }
.optical-signal { margin-top: 4px; font-size: .65rem; }
.pppoe-traffic { display: flex; justify-content: flex-end; gap: 8px; margin-top: 5px; }
.pppoe-traffic span { display: inline-flex; align-items: center; gap: 3px; color: #a9bdd5; font-size: .61rem; white-space: nowrap; }
.pppoe-traffic b { font-weight: 700; }
.pppoe-traffic span:first-child i { color: #64d2ff; }
.pppoe-traffic span:last-child i { color: #8af0ad; }
.pppoe-card-disconnect, .pppoe-card-connect, .pppoe-remote-ont, .pppoe-detail-button { margin-top: 5px; padding: 3px 7px; font-size: .62rem; }
.pppoe-remote-ont { border: 1px solid rgba(66,191,255,.28); border-radius: 8px; color: #8bd8ff; background: rgba(10,132,255,.1); transition: background .18s ease,box-shadow .18s ease; }
.pppoe-remote-ont:hover { color: #fff; background: rgba(10,132,255,.24); box-shadow: 0 0 15px rgba(10,132,255,.18); }
.pppoe-remote-ont:disabled { cursor: wait; opacity: .55; }
.pppoe-card-actions {
    grid-column: 1 / -1;
    grid-row: 4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(255,255,255,.065);
}
.pppoe-card-actions .pppoe-card-disconnect,
.pppoe-card-actions .pppoe-card-connect,
.pppoe-card-actions .pppoe-remote-ont,
.pppoe-card-actions .pppoe-detail-button { margin-top: 0; min-width: 72px; }

@media (max-width: 575.98px) {
    .pppoe-card-grid { grid-template-columns: 1fr; }
    .pppoe-user-card { grid-template-columns: 40px minmax(0, 1fr); }
    .pppoe-uptime { grid-column: 2; grid-row: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; }
    .pppoe-card-actions { grid-column: 1 / -1; grid-row: 5; }
    .pppoe-metric, .pppoe-traffic { justify-content: flex-start; }
}

/* Final table containment override after monitoring-specific legacy rules. */
.monitoring-shell .card { overflow: hidden !important; }
.monitoring-shell .card-body.table-responsive,
.monitoring-shell .table-responsive {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}
.monitoring-shell .card-body.table-responsive > table,
.monitoring-shell .table-responsive > table { width: max-content; min-width: 100%; }

@media (max-width: 991.98px) {
    .app-nav { overflow: visible !important; padding-bottom: 0; }
    .app-menu-panel { right: 0; }
}

/* SweetAlert2 — Liquid Glass Dark */
.swal2-container { z-index: 20000 !important; backdrop-filter: blur(10px); }
.swal2-container.swal2-backdrop-show { background: rgba(1, 6, 15, .68) !important; }
.app-swal-popup {
    width: min(430px, calc(100vw - 28px)) !important;
    padding: 24px !important;
    border: 1px solid rgba(105, 212, 255, .22) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(20, 37, 59, .94), rgba(5, 13, 25, .96)) !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1), 0 0 35px rgba(37,166,255,.12) !important;
    backdrop-filter: blur(26px) saturate(145%);
}
.app-swal-title { color: #f1f9ff !important; font-size: 1.35rem !important; font-weight: 750 !important; }
.app-swal-text { color: #aebfd2 !important; font-size: .92rem !important; line-height: 1.6 !important; }
.app-swal-actions { gap: 10px; margin-top: 22px !important; }
.app-swal-confirm, .app-swal-cancel {
    min-width: 105px; padding: 10px 18px; border: 1px solid transparent; border-radius: 13px;
    color: #f4fbff; font-size: .86rem; font-weight: 700; transition: .2s ease;
}
.app-swal-confirm { background: linear-gradient(135deg, #168bd1, #35c4e8); box-shadow: 0 8px 24px rgba(22,139,209,.3); }
.app-swal-cancel { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.06); color: #b9c8d8; }
.app-swal-confirm:hover, .app-swal-cancel:hover { transform: translateY(-1px); filter: brightness(1.1); }
.app-swal-confirm:focus-visible, .app-swal-cancel:focus-visible { outline: 2px solid #69d4ff; outline-offset: 3px; }
.app-swal-popup .swal2-icon { filter: drop-shadow(0 0 12px rgba(86,202,255,.25)); }

.topbar-sync-status {
    display: inline-flex; align-items: center; gap: 7px; max-width: min(390px, 34vw);
    margin-left: auto; padding: 6px 11px; border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px; background: rgba(255,255,255,.045); color: #aebfd2;
    font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-sync-dropdown { position: relative; margin-left: auto; }
.topbar-module-slot { display: flex; align-items: center; gap: 7px; min-width: 0; }
.topbar-module-slot:empty { display: none; }
.topbar-module-slot .topbar-sync-dropdown { margin-left: 0; }
.topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; margin-left: auto; }
.app-topbar.is-menu-open > .app-nav {
    z-index: 6000 !important;
}
.app-topbar.is-menu-open > .topbar-right,
.app-topbar.is-menu-open > .app-brand {
    z-index: 1 !important;
}
.app-topbar.is-menu-open .language-switch {
    pointer-events: none;
}

@media (min-width: 992px) {
    .app-topbar > .app-nav {
        position: absolute !important;
        z-index: 4;
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate(-50%, -50%);
    }
    .app-topbar > .app-brand,
    .app-topbar > .topbar-right { position: relative; z-index: 5; }
    .app-topbar > .topbar-right { max-width: calc(50% - 120px); }
}
@media (max-width: 991.98px) {
    .topbar-right { width: 100%; }
}
.topbar-sync-dropdown > summary { margin-left: 0; cursor: pointer; list-style: none; }
.topbar-sync-dropdown > summary::-webkit-details-marker { display: none; }
.topbar-sync-dropdown[open] > summary { border-color: rgba(105,212,255,.25); background: rgba(105,212,255,.08); }
.topbar-sync-dropdown[open] > summary .fa-chevron-down { transform: rotate(180deg); }
.topbar-sync-status .fa-chevron-down { margin-left: 2px; font-size: .58rem; transition: transform .2s ease; }
.topbar-sync-panel {
    position: absolute; z-index: 1200; top: calc(100% + 10px); right: 0; width: min(430px, calc(100vw - 28px));
    max-height: min(520px, 70vh); padding: 12px; overflow-y: auto; border: 1px solid rgba(105,212,255,.18);
    border-radius: 18px; background: linear-gradient(145deg, rgba(18,34,54,.97), rgba(5,13,25,.98));
    box-shadow: 0 24px 65px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(24px);
    scrollbar-width: thin; scrollbar-color: rgba(105,212,255,.45) rgba(255,255,255,.04);
}
.sync-result-group + .sync-result-group { margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.07); }
.sync-panel-note { display: flex; gap: 8px; margin-bottom: 11px; padding: 9px 10px; border: 1px solid rgba(105,212,255,.12); border-radius: 11px; background: rgba(105,212,255,.055); color: #91a9c0; font-size: .67rem; line-height: 1.45; }
.sync-panel-note i { margin-top: 2px; color: #69d4ff; }
.sync-result-group h6 { display: flex; align-items: center; gap: 8px; margin: 0 3px 8px; color: #eaf7ff; font-size: .78rem; }
.sync-result-group h6 i { color: #69d4ff; }
.sync-result-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 7px; border-radius: 9px; color: #b9c9da; font-size: .7rem; line-height: 1.4; }
.sync-result-item:hover { background: rgba(255,255,255,.04); }
.sync-result-item.is-success i { color: #55e89b; }
.sync-result-item.is-failed i { color: #ff7187; }
.sync-result-empty { margin: 0; padding: 5px 7px; color: #72869d; font-size: .69rem; }
.topbar-sync-status span:last-child { overflow: hidden; text-overflow: ellipsis; }
.topbar-sync-status strong { color: #e8f7ff; font-weight: 750; }
.topbar-sync-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
.topbar-sync-status.is-success .topbar-sync-dot { background: #55e89b; box-shadow: 0 0 10px rgba(85,232,155,.8); }
.topbar-sync-status.is-warning .topbar-sync-dot { background: #ffbd59; box-shadow: 0 0 10px rgba(255,189,89,.8); }

@media (max-width: 767.98px) {
    .topbar-right { order: 3; width: 100%; flex-wrap: wrap; }
    .topbar-module-slot { order: 3; width: 100%; }
    .topbar-sync-dropdown { order: 3; width: 100%; margin: 7px 0 0; }
    .topbar-sync-status { width: 100%; max-width: 100%; margin: 0; justify-content: center; }
    .topbar-sync-panel { left: 0; right: auto; width: 100%; }
    .topbar-right .language-switch { order: 4; margin-left: auto; }
}

/* Final sticky-header fix: sticky cells create a reliable layer in every browser. */
.card-body.table-responsive table > thead,
.table-responsive table > thead,
.card-body.table-responsive table > tbody,
.table-responsive table > tbody {
    position: static;
}
.card-body.table-responsive table > thead > tr > th,
.table-responsive table > thead > tr > th {
    position: sticky !important;
    top: 0;
    z-index: 100 !important;
    overflow: hidden;
    background: #081120 !important;
    background-clip: padding-box !important;
    box-shadow: inset 0 -1px rgba(100, 210, 255, .28), 0 5px 12px rgba(0, 0, 0, .32);
    transform: translateZ(0);
}
.customer-table-search table > thead > tr.customer-search-row > th {
    top: 0;
    height: 48px;
    padding-block: 6px;
    z-index: 102 !important;
    background: #06101e !important;
}
.customer-table-search table > thead > tr.customer-search-row + tr > th {
    top: 48px;
    z-index: 101 !important;
    background: #0a1728 !important;
}
.card-body.table-responsive table > tbody > tr > td,
.table-responsive table > tbody > tr > td {
    position: relative;
    z-index: 0 !important;
}

/* Searchable tables own their scroll area; surrounding toolbar stays outside it. */
.customer-table-search.table-responsive {
    position: relative;
    max-height: calc(100vh - 350px);
    min-height: 180px;
    overflow: auto !important;
    isolation: isolate;
    border: 1px solid rgba(100, 210, 255, .12);
    border-radius: 13px;
    background: #081120;
    clip-path: inset(0 round 13px);
}
.customer-table-search.table-responsive > table {
    border-collapse: separate;
    border-spacing: 0;
}
.customer-table-search.table-responsive table > thead > tr > th {
    --bs-table-bg: #081120;
    --bs-table-accent-bg: #081120;
    --bs-table-striped-bg: #081120;
    --bs-table-hover-bg: #081120;
    --bs-table-bg-state: #081120;
    --bs-table-bg-type: #081120;
    background-color: #081120 !important;
    background-image: none !important;
    opacity: 1 !important;
    box-shadow: inset 0 0 0 9999px #081120, inset 0 -1px rgba(100, 210, 255, .28) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.customer-table-search.table-responsive table > thead > tr.customer-search-row > th {
    --bs-table-bg: #06101e;
    --bs-table-accent-bg: #06101e;
    --bs-table-bg-state: #06101e;
    --bs-table-bg-type: #06101e;
    background-color: #06101e !important;
    box-shadow: inset 0 0 0 9999px #06101e, inset 0 -1px rgba(100, 210, 255, .24) !important;
}
.customer-table-search.table-responsive > table > thead::after {
    display: none !important;
}

/* Opaque header plane: covers cells and border gaps while rows scroll below it. */
.customer-table-search.table-responsive > table {
    position: relative;
    isolation: isolate;
    background: #081120 !important;
}
.customer-table-search.table-responsive > table > thead {
    position: sticky !important;
    top: 0;
    z-index: 500 !important;
    isolation: isolate;
    background: #081120 !important;
    opacity: 1 !important;
}
.customer-table-search.table-responsive > table > thead > tr {
    position: relative;
    z-index: 2;
    background: #081120 !important;
    opacity: 1 !important;
}
.customer-table-search.table-responsive > table > thead > tr.customer-search-row {
    background: #06101e !important;
}
.customer-table-search.table-responsive > table > thead > tr > th {
    position: relative !important;
    top: auto !important;
    z-index: 501 !important;
    overflow: visible;
    background: #081120 !important;
    background-color: #081120 !important;
    opacity: 1 !important;
    transform: none !important;
}
.customer-table-search.table-responsive > table > thead > tr.customer-search-row > th {
    z-index: 503 !important;
    background: #06101e !important;
    background-color: #06101e !important;
}
.customer-table-search.table-responsive > table > thead > tr.customer-search-row + tr > th {
    z-index: 502 !important;
    background: #081120 !important;
    background-color: #081120 !important;
}
.customer-table-search.table-responsive > table > tbody {
    position: relative;
    z-index: 0 !important;
}

/* Mobile performance: avoid costly real-time glass recomposition while scrolling. */
@media (max-width: 767.98px), (pointer: coarse) {
    html { scroll-behavior: auto !important; }
    body {
        background: #050b16 !important;
        -webkit-tap-highlight-color: transparent;
    }
    body::before,
    body::after,
    .app-topbar::before,
    .menu-shell::before,
    .glass-card::before,
    .auth-card::before { display: none !important; }

    .app-topbar,
    .menu-shell,
    .glass-card,
    .glass-panel,
    .card,
    .card-body,
    .auth-card,
    .app-loader,
    .app-loader-panel,
    .swal2-container,
    .app-swal-popup,
    .app-menu-panel,
    .topbar-sync-panel,
    .pppoe-user-card,
    .pppoe-hover-detail,
    .pppoe-modal-backdrop {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        filter: none !important;
    }
    .app-topbar,
    .menu-shell,
    .glass-card,
    .glass-panel,
    .pppoe-user-card {
        box-shadow: 0 5px 16px rgba(0, 0, 0, .2) !important;
    }
    .menu-shell,
    .glass-card,
    .glass-panel { animation: none !important; }

    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"] {
        touch-action: manipulation;
    }
    a,
    button,
    summary,
    .monitoring-action,
    .back-button { transition-duration: .08s !important; }

    .table-responsive,
    .card-body.table-responsive,
    .customer-table-search.table-responsive {
        contain: paint;
        overscroll-behavior: contain;
        scroll-snap-type: none !important;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive table > thead,
    .card-body.table-responsive table > thead {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .app-loader { background: rgba(2, 7, 15, .82) !important; }
    .pppoe-user-card {
        content-visibility: auto;
        contain: layout paint style;
        contain-intrinsic-size: 128px;
    }

}

@media (max-width: 767.98px) {
    .app-menu-dropdown .app-menu-panel {
        position: fixed !important;
        top: var(--mobile-menu-top, 104px) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom: max(8px, env(safe-area-inset-bottom));
        left: max(8px, env(safe-area-inset-left)) !important;
        z-index: 5000 !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--mobile-menu-top, 104px) - 8px) !important;
        margin: 0 !important;
        transform: none !important;
        overscroll-behavior: contain;
    }
}
.customer-table-search.table-responsive table > tbody {
    background: #081120;
}
@media (max-width: 767.98px) {
    .customer-table-search.table-responsive { max-height: calc(100vh - 310px); }
}

/* Final dark-theme surfaces: consistent blue headers and readable monitoring filters. */
html[data-app-theme="dark"] .monitoring-filter-bar {
    color: #e7f5ff;
    border: 1px solid rgba(100,210,255,.2);
    border-radius: 15px;
    background: linear-gradient(135deg, #0b3154, #102847) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.07), 0 10px 26px rgba(0,12,31,.25);
}
html[data-app-theme="dark"] .monitoring-filter-bar .monitoring-result-count,
html[data-app-theme="dark"] .monitoring-filter-bar .text-muted {
    color: #d6efff !important;
    font-weight: 650;
}
html[data-app-theme="dark"] .monitoring-filter-bar .form-control,
html[data-app-theme="dark"] .monitoring-filter-bar .form-select {
    color: #f2f9ff !important;
    border-color: rgba(132,211,255,.23) !important;
    background-color: rgba(4,22,42,.68) !important;
}
html[data-app-theme="dark"] .monitoring-filter-bar .form-control::placeholder { color: #a8c8de !important; }

html[data-app-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #dce8f6;
    --bs-table-striped-color: #e7f1fc;
    --bs-table-striped-bg: rgba(75,125,174,.045);
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: rgba(64,156,220,.08);
    --bs-table-border-color: rgba(119,161,202,.105);
}
html[data-app-theme="dark"] .table > thead,
html[data-app-theme="dark"] .table > thead > tr {
    color: #eff9ff !important;
    background: #0b3a63 !important;
}
html[data-app-theme="dark"] .table > thead > tr > th {
    --bs-table-bg: #0b3a63;
    --bs-table-accent-bg: #0b3a63;
    --bs-table-striped-bg: #0b3a63;
    --bs-table-hover-bg: #0b3a63;
    --bs-table-bg-state: #0b3a63;
    --bs-table-bg-type: #0b3a63;
    color: #eff9ff !important;
    border-color: rgba(139,201,239,.14) !important;
    background: #0b3a63 !important;
    background-color: #0b3a63 !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 9999px #0b3a63, inset 0 -1px rgba(119,211,255,.24) !important;
}
html[data-app-theme="dark"] .table > tbody > tr > td {
    color: #d8e5f4;
    border-color: rgba(119,161,202,.095) !important;
    background-clip: padding-box;
}

html[data-app-theme="dark"] .customer-table-search.table-responsive,
html[data-app-theme="dark"] .customer-table-search.table-responsive > table,
html[data-app-theme="dark"] .customer-table-search.table-responsive table > tbody {
    background: #071425 !important;
}
html[data-app-theme="dark"] .customer-table-search.table-responsive > table > thead,
html[data-app-theme="dark"] .customer-table-search.table-responsive > table > thead > tr {
    color: #f2faff !important;
    background: #0b3a63 !important;
    opacity: 1 !important;
}
html[data-app-theme="dark"] .customer-table-search.table-responsive > table > thead > tr > th {
    --bs-table-bg: #0b3a63;
    --bs-table-accent-bg: #0b3a63;
    --bs-table-striped-bg: #0b3a63;
    --bs-table-hover-bg: #0b3a63;
    --bs-table-bg-state: #0b3a63;
    --bs-table-bg-type: #0b3a63;
    color: #eff9ff !important;
    border-color: rgba(140,203,240,.13) !important;
    background: #0b3a63 !important;
    background-color: #0b3a63 !important;
    box-shadow: inset 0 0 0 9999px #0b3a63, inset 0 -1px rgba(117,209,255,.25) !important;
}
html[data-app-theme="dark"] .customer-table-search.table-responsive > table > thead > tr.customer-search-row,
html[data-app-theme="dark"] .customer-table-search.table-responsive > table > thead > tr.customer-search-row > th {
    --bs-table-bg: #102a49;
    --bs-table-accent-bg: #102a49;
    --bs-table-bg-state: #102a49;
    --bs-table-bg-type: #102a49;
    border-color: rgba(136,198,236,.1) !important;
    background: #102a49 !important;
    background-color: #102a49 !important;
    box-shadow: inset 0 0 0 9999px #102a49, inset 0 -1px rgba(101,195,243,.2) !important;
}
html[data-app-theme="dark"] .customer-table-search.table-responsive > table > tbody > tr > td {
    border-color: rgba(115,156,197,.085) !important;
    background-color: #071425;
}
html[data-app-theme="dark"] .customer-table-search.table-responsive > table > tbody > tr:nth-child(odd) > td { background-color: #09192b; }
html[data-app-theme="dark"] .customer-table-search.table-responsive > table > tbody > tr:hover > td { background-color: #0c2238; }

/* Final light-theme surfaces: blue-tinted filters and table headers. */
html[data-app-theme="light"] .monitoring-filter-bar {
    color: #173b59;
    border: 1px solid rgba(24,123,180,.18);
    border-radius: 15px;
    background: linear-gradient(135deg, #dff1fc, #edf7fd) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.85), 0 10px 24px rgba(45,91,126,.1);
}
html[data-app-theme="light"] .monitoring-filter-bar .monitoring-result-count,
html[data-app-theme="light"] .monitoring-filter-bar .text-muted {
    color: #285b7d !important;
    font-weight: 650;
}
html[data-app-theme="light"] .monitoring-filter-bar .form-control,
html[data-app-theme="light"] .monitoring-filter-bar .form-select {
    color: #173650 !important;
    border-color: rgba(37,126,178,.2) !important;
    background-color: rgba(255,255,255,.88) !important;
}
html[data-app-theme="light"] .monitoring-filter-bar .form-control::placeholder { color: #6e8ba0 !important; }

html[data-app-theme="light"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #263d53;
    --bs-table-striped-color: #263d53;
    --bs-table-striped-bg: rgba(47,113,155,.035);
    --bs-table-hover-color: #173249;
    --bs-table-hover-bg: rgba(30,134,193,.065);
    --bs-table-border-color: rgba(55,105,139,.12);
}
html[data-app-theme="light"] .table > thead,
html[data-app-theme="light"] .table > thead > tr {
    color: #153b59 !important;
    background: #cfe9f8 !important;
}
html[data-app-theme="light"] .table > thead > tr > th {
    --bs-table-bg: #cfe9f8;
    --bs-table-accent-bg: #cfe9f8;
    --bs-table-striped-bg: #cfe9f8;
    --bs-table-hover-bg: #cfe9f8;
    --bs-table-bg-state: #cfe9f8;
    --bs-table-bg-type: #cfe9f8;
    color: #153b59 !important;
    border-color: rgba(41,116,161,.13) !important;
    background: #cfe9f8 !important;
    background-color: #cfe9f8 !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 9999px #cfe9f8, inset 0 -1px rgba(29,111,158,.18) !important;
}
html[data-app-theme="light"] .table > tbody > tr > td {
    color: #294057;
    border-color: rgba(61,104,136,.105) !important;
    background-clip: padding-box;
}

html[data-app-theme="light"] .customer-table-search.table-responsive,
html[data-app-theme="light"] .customer-table-search.table-responsive > table,
html[data-app-theme="light"] .customer-table-search.table-responsive table > tbody {
    background: #f8fbfe !important;
}
html[data-app-theme="light"] .customer-table-search.table-responsive > table > thead,
html[data-app-theme="light"] .customer-table-search.table-responsive > table > thead > tr {
    color: #153b59 !important;
    background: #cfe9f8 !important;
    opacity: 1 !important;
}
html[data-app-theme="light"] .customer-table-search.table-responsive > table > thead > tr > th {
    --bs-table-bg: #cfe9f8;
    --bs-table-accent-bg: #cfe9f8;
    --bs-table-striped-bg: #cfe9f8;
    --bs-table-hover-bg: #cfe9f8;
    --bs-table-bg-state: #cfe9f8;
    --bs-table-bg-type: #cfe9f8;
    color: #153b59 !important;
    border-color: rgba(41,116,161,.12) !important;
    background: #cfe9f8 !important;
    background-color: #cfe9f8 !important;
    box-shadow: inset 0 0 0 9999px #cfe9f8, inset 0 -1px rgba(29,111,158,.18) !important;
}
html[data-app-theme="light"] .customer-table-search.table-responsive > table > thead > tr.customer-search-row,
html[data-app-theme="light"] .customer-table-search.table-responsive > table > thead > tr.customer-search-row > th {
    --bs-table-bg: #e9f4fb;
    --bs-table-accent-bg: #e9f4fb;
    --bs-table-bg-state: #e9f4fb;
    --bs-table-bg-type: #e9f4fb;
    border-color: rgba(48,119,160,.1) !important;
    background: #e9f4fb !important;
    background-color: #e9f4fb !important;
    box-shadow: inset 0 0 0 9999px #e9f4fb, inset 0 -1px rgba(33,117,164,.14) !important;
}
html[data-app-theme="light"] .customer-table-search.table-responsive > table > tbody > tr > td {
    border-color: rgba(64,104,135,.09) !important;
    background-color: #fbfdff;
}
html[data-app-theme="light"] .customer-table-search.table-responsive > table > tbody > tr:nth-child(odd) > td { background-color: #f5f9fc; }
html[data-app-theme="light"] .customer-table-search.table-responsive > table > tbody > tr:hover > td { background-color: #eaf5fb; }

/* Light mode module action tray below the topbar. */
html[data-app-theme="light"] .page-toolbar .toolbar-actions {
    border-color: rgba(35,122,174,.18);
    background: linear-gradient(135deg, rgba(220,240,251,.94), rgba(239,248,253,.96));
    box-shadow: 0 8px 24px rgba(44,88,120,.1), inset 0 1px rgba(255,255,255,.9);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
}
html[data-app-theme="light"] .page-toolbar .toolbar-actions .back-button,
html[data-app-theme="light"] .page-toolbar .toolbar-actions button {
    color: #1d587e;
    border-color: rgba(35,116,165,.17);
    background: rgba(255,255,255,.78);
    box-shadow: inset 0 1px rgba(255,255,255,.9), 0 3px 10px rgba(48,89,119,.07);
}
html[data-app-theme="light"] .page-toolbar .toolbar-actions .back-button:hover,
html[data-app-theme="light"] .page-toolbar .toolbar-actions button:hover {
    color: #064f7e;
    border-color: rgba(23,127,186,.3);
    background: #fff;
    box-shadow: 0 7px 18px rgba(34,111,157,.13);
}
html[data-app-theme="light"] .page-toolbar > .back-button:first-child {
    color: #245b7e;
    border-color: rgba(35,116,165,.17);
    background: rgba(241,248,253,.9);
    box-shadow: 0 7px 20px rgba(48,87,116,.09), inset 0 1px rgba(255,255,255,.9);
}

@media (max-width: 767.98px), (pointer: coarse) {
    html[data-app-theme="light"] .page-toolbar .toolbar-actions {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: 0 4px 12px rgba(44,88,120,.09);
    }
}

/* Final global table header: fully opaque gradient in every module. */
html body .table > thead,
html body .table > thead > tr {
    opacity: 1 !important;
    background: #0a5688 !important;
    background-color: #0a5688 !important;
    background-image: linear-gradient(135deg,#0b72aa 0%,#0a5688 52%,#123d70 100%) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html body .table > thead > tr > th,
html body .table-responsive > .table > thead > tr > th,
html body .card-body.table-responsive > .table > thead > tr > th {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-bg-state: transparent;
    --bs-table-bg-type: transparent;
    position: sticky !important;
    top: 0;
    z-index: 150 !important;
    opacity: 1 !important;
    color: #f5fbff !important;
    border-color: rgba(205,238,255,.18) !important;
    background: #0a5688 !important;
    background-color: #0a5688 !important;
    background-image: linear-gradient(135deg,#0b72aa 0%,#0a5688 52%,#123d70 100%) !important;
    background-clip: padding-box !important;
    box-shadow: inset 0 -1px rgba(210,240,255,.2),0 6px 14px rgba(0,0,0,.3) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html body .customer-table-search.table-responsive > .table > thead > tr.customer-search-row > th {
    top: 0;
    z-index: 152 !important;
    background: #0b5f91 !important;
    background-color: #0b5f91 !important;
    background-image: linear-gradient(135deg,#0c78ad,#0b5f91 55%,#134879) !important;
}
html body .customer-table-search.table-responsive > .table > thead > tr.customer-search-row + tr > th {
    top: 48px;
    z-index: 151 !important;
}
html[data-app-theme="light"] body .table > thead,
html[data-app-theme="light"] body .table > thead > tr {
    background: #1978aa !important;
    background-color: #1978aa !important;
    background-image: linear-gradient(135deg,#2196c9 0%,#1978aa 52%,#165b91 100%) !important;
}
html[data-app-theme="light"] body .table > thead > tr > th,
html[data-app-theme="light"] body .table-responsive > .table > thead > tr > th,
html[data-app-theme="light"] body .card-body.table-responsive > .table > thead > tr > th {
    color: #fff !important;
    border-color: rgba(255,255,255,.2) !important;
    background: #1978aa !important;
    background-color: #1978aa !important;
    background-image: linear-gradient(135deg,#2196c9 0%,#1978aa 52%,#165b91 100%) !important;
    box-shadow: inset 0 -1px rgba(255,255,255,.22),0 5px 12px rgba(44,88,120,.22) !important;
}
html[data-app-theme="light"] body .customer-table-search.table-responsive > .table > thead > tr.customer-search-row > th {
    background: #2188b8 !important;
    background-color: #2188b8 !important;
    background-image: linear-gradient(135deg,#2aa1d0,#2188b8 55%,#18699e) !important;
}

/* Seamless opaque header plane: no row bleed and no vertical column seams. */
html body .table-responsive > .table > thead,
html body .card-body.table-responsive > .table > thead {
    position: sticky !important;
    top: 0;
    z-index: 200 !important;
    isolation: isolate;
    overflow: hidden;
    background: #095789 !important;
    background-color: #095789 !important;
    background-image: linear-gradient(100deg,#0b78ae 0%,#095789 52%,#123d70 100%) !important;
    box-shadow: 0 7px 15px rgba(0,0,0,.32) !important;
}
html body .table-responsive > .table > thead::before,
html body .card-body.table-responsive > .table > thead::before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:-2px;
    pointer-events:none;
    background:#095789;
    background-image:linear-gradient(100deg,#0b78ae 0%,#095789 52%,#123d70 100%);
}
html body .table-responsive > .table > thead > tr,
html body .card-body.table-responsive > .table > thead > tr {
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
}
html body .table-responsive > .table > thead > tr > th,
html body .card-body.table-responsive > .table > thead > tr > th {
    --bs-table-bg:transparent;
    --bs-table-accent-bg:transparent;
    --bs-table-striped-bg:transparent;
    --bs-table-hover-bg:transparent;
    --bs-table-bg-state:transparent;
    --bs-table-bg-type:transparent;
    position:static !important;
    z-index:auto !important;
    border-top:0 !important;
    border-right:0 !important;
    border-left:0 !important;
    border-bottom:1px solid rgba(210,240,255,.2) !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
}
html body .table-responsive > .table > tbody,
html body .card-body.table-responsive > .table > tbody {
    position:relative;
    z-index:0 !important;
}
html[data-app-theme="light"] body .table-responsive > .table > thead,
html[data-app-theme="light"] body .card-body.table-responsive > .table > thead {
    background:#1978aa !important;
    background-color:#1978aa !important;
    background-image:linear-gradient(100deg,#269dce 0%,#1978aa 52%,#165b91 100%) !important;
    box-shadow:0 6px 14px rgba(44,88,120,.24) !important;
}
html[data-app-theme="light"] body .table-responsive > .table > thead::before,
html[data-app-theme="light"] body .card-body.table-responsive > .table > thead::before {
    background:#1978aa;
    background-image:linear-gradient(100deg,#269dce 0%,#1978aa 52%,#165b91 100%);
}

/* Global elegant rounded table shape, based on the PPP Profile table. */
html body .table-responsive,
html body .card-body.table-responsive {
    position:relative;
    border:1px solid rgba(100,210,255,.12);
    border-radius:16px !important;
    background:#081120;
    clip-path:inset(0 round 16px);
    isolation:isolate;
}
html body .table-responsive > .table,
html body .card-body.table-responsive > .table {
    margin-bottom:0;
    border-collapse:separate !important;
    border-spacing:0 !important;
    border-radius:16px;
}
html body .table-responsive > .table > thead,
html body .card-body.table-responsive > .table > thead,
html body .table-responsive > .table > thead::before,
html body .card-body.table-responsive > .table > thead::before {
    border-radius:15px 15px 0 0;
}
html body .table-responsive > .table > thead > tr:first-child > th:first-child,
html body .card-body.table-responsive > .table > thead > tr:first-child > th:first-child { border-top-left-radius:15px; }
html body .table-responsive > .table > thead > tr:first-child > th:last-child,
html body .card-body.table-responsive > .table > thead > tr:first-child > th:last-child { border-top-right-radius:15px; }
html body .table-responsive > .table > tbody > tr:last-child > td:first-child,
html body .card-body.table-responsive > .table > tbody > tr:last-child > td:first-child { border-bottom-left-radius:15px; }
html body .table-responsive > .table > tbody > tr:last-child > td:last-child,
html body .card-body.table-responsive > .table > tbody > tr:last-child > td:last-child { border-bottom-right-radius:15px; }
html[data-app-theme="light"] body .table-responsive,
html[data-app-theme="light"] body .card-body.table-responsive {
    border-color:rgba(35,116,165,.14);
    background:#f8fbfe;
}
@media(max-width:575.98px){
    html body .table-responsive,
    html body .card-body.table-responsive{border-radius:14px!important;clip-path:inset(0 round 14px)}
}

/* Use the former PPP Profile scroll structure consistently on every table. */
html body .card > .card-body.table-responsive,
html body .glass-card > .card-body.table-responsive,
html body .table-responsive {
    padding:0 !important;
    overflow:auto !important;
    border-radius:16px !important;
    clip-path:inset(0 round 16px) !important;
}
html body .card > .card-body.table-responsive > .table,
html body .glass-card > .card-body.table-responsive > .table,
html body .table-responsive > .table {
    margin:0 !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
}
html body .card > .card-body.table-responsive > .table > thead,
html body .glass-card > .card-body.table-responsive > .table > thead,
html body .table-responsive > .table > thead {
    top:0 !important;
    margin:0 !important;
}
@media(max-width:575.98px){
    html body .card > .card-body.table-responsive,
    html body .glass-card > .card-body.table-responsive,
    html body .table-responsive{border-radius:14px!important;clip-path:inset(0 round 14px)!important}
}

/* Apple-inspired system typography. Uses SF Pro natively on Apple devices. */
html,body{font-family:var(--app-font)!important;font-synthesis:none;font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea,.form-control,.form-select,.btn,.table,.swal2-container{font-family:var(--app-font)!important}
h1,h2,h3,h4,h5,h6,.menu-heading h1,.auth-card h1,.brand-title,.launcher-panel-head h2{font-family:var(--app-font)!important;font-weight:700;letter-spacing:-.025em}
p,.menu-heading p,.form-text,.text-muted,small{letter-spacing:-.005em}
.table>thead>tr>th{font-size:.72rem;font-weight:650;letter-spacing:.01em}
.table>tbody>tr>td{font-size:.78rem;font-weight:400;letter-spacing:-.006em}
.back-button,.monitoring-action,.filter-submit-button,.filter-reset-button,.table-action-button,.customer-action-item{font-family:var(--app-font)!important;font-weight:600;letter-spacing:-.008em}
.form-control,.form-select,textarea.form-control{font-weight:400;letter-spacing:-.006em}
.router-status-sync{margin-left:4px;opacity:.58}.router-status-sync.fa-spin{opacity:1}
.pppoe-detail-value-action{display:flex;align-items:center;justify-content:space-between;gap:8px}.pppoe-detail-value-action strong{min-width:0;overflow-wrap:anywhere}.pppoe-whatsapp-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;min-height:27px;padding:0 8px;color:#9af1c8;border:1px solid rgba(37,211,102,.27);border-radius:8px;background:rgba(37,211,102,.1);font-size:9px;font-weight:650;text-decoration:none;transition:.18s ease}.pppoe-whatsapp-button i{color:#25d366;font-size:12px}.pppoe-whatsapp-button:hover{color:#fff;border-color:rgba(37,211,102,.5);background:rgba(37,211,102,.23);box-shadow:0 6px 14px rgba(37,211,102,.13)}.pppoe-whatsapp-button.is-disabled{cursor:not-allowed;opacity:.4}html[data-app-theme="light"] .pppoe-whatsapp-button{color:#087744;background:#e7f9ee}html[data-app-theme="light"] .pppoe-whatsapp-button:hover{color:#056138;background:#d8f4e3}
.pppoe-detail-group-title{display:flex;align-items:center;gap:7px;margin-bottom:8px;color:#78d7ff;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.pppoe-detail-group-title i{width:16px}
.pppoe-hover-detail.is-open>.pppoe-detail-title{position:sticky!important;top:-14px!important;z-index:100!important;margin:-14px -16px 10px!important;padding:13px 16px!important;border-bottom:1px solid rgba(100,210,255,.14)!important;background:#0d192c!important;background-image:linear-gradient(110deg,#122d4a,#0d192c 62%,#0a1322)!important;box-shadow:0 8px 18px rgba(0,0,0,.28);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.pppoe-hover-detail.is-open>.pppoe-detail-title h6{color:#dff5ff}
.pppoe-hover-detail.is-open>.pppoe-detail-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px;min-height:56px;margin:12px 0 0!important;padding:10px 2px!important;border-top:1px solid rgba(100,210,255,.14)!important;border-bottom:1px solid rgba(100,210,255,.14)!important}.pppoe-detail-actions>.pppoe-disconnect,.pppoe-detail-actions>.pppoe-remote-ont{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px;width:auto!important;height:34px!important;min-height:34px;margin:0!important;padding:0 13px!important;line-height:1!important;vertical-align:middle}.pppoe-detail-actions>.pppoe-disconnect i,.pppoe-detail-actions>.pppoe-remote-ont i{line-height:1}
html[data-app-theme="light"] .pppoe-hover-detail.is-open>.pppoe-detail-title{border-bottom-color:rgba(35,116,165,.16)!important;background:#e4f3fb!important;background-image:linear-gradient(110deg,#d6eef9,#e8f5fb 62%,#f4faff)!important;box-shadow:0 7px 16px rgba(44,88,120,.16)}html[data-app-theme="light"] .pppoe-hover-detail.is-open>.pppoe-detail-title h6{color:#174d70}@media(max-width:575.98px){.pppoe-hover-detail.is-open>.pppoe-detail-actions{justify-content:stretch!important}.pppoe-detail-actions>.pppoe-disconnect,.pppoe-detail-actions>.pppoe-remote-ont{flex:1}}
.pppoe-detail-map-action{grid-column:1/-1;display:flex;justify-content:flex-end}.pppoe-map-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;padding:0 12px;color:#bdeaff;border:1px solid rgba(66,191,255,.26);border-radius:10px;background:rgba(10,132,255,.11);font-size:10px;font-weight:600;text-decoration:none;transition:.18s ease}.pppoe-map-button:hover{color:#fff;border-color:rgba(66,191,255,.46);background:rgba(10,132,255,.25);box-shadow:0 7px 16px rgba(10,132,255,.15)}.pppoe-map-button.is-disabled{cursor:not-allowed;opacity:.42}.pppoe-map-button i{color:#5ed0ff}html[data-app-theme="light"] .pppoe-map-button{color:#12678f;background:#e5f5fc}html[data-app-theme="light"] .pppoe-map-button:hover{color:#075276;background:#d5eef9}@media(max-width:575.98px){.pppoe-detail-map-action,.pppoe-map-button{width:100%}}
.pppoe-map-modal{position:fixed;inset:0;z-index:2147483500;display:grid;place-items:center;padding:18px;opacity:0;transition:opacity .18s ease}.pppoe-map-modal.is-open{opacity:1}.pppoe-map-modal-backdrop{position:absolute;inset:0;background:rgba(1,6,15,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pppoe-map-modal-panel{position:relative;display:grid;grid-template-rows:auto minmax(280px,58vh) auto;width:min(760px,96vw);overflow:hidden;border:1px solid rgba(100,210,255,.2);border-radius:20px;background:#0c1829;box-shadow:0 28px 85px rgba(0,0,0,.7)}.pppoe-map-modal-panel header,.pppoe-map-modal-panel footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px}.pppoe-map-modal-panel header{border-bottom:1px solid rgba(100,210,255,.12)}.pppoe-map-modal-panel header small,.pppoe-map-modal-panel header strong{display:block}.pppoe-map-modal-panel header small{color:var(--muted);font-size:9px}.pppoe-map-modal-panel header strong{margin-top:2px;font-size:13px}.pppoe-map-modal-panel header button{display:grid;place-items:center;width:31px;height:31px;color:var(--text);border:1px solid rgba(148,163,184,.18);border-radius:50%;background:rgba(255,255,255,.06)}.pppoe-map-modal-panel iframe{width:100%;height:100%;border:0;background:#dce8ef}.pppoe-map-modal-panel footer{border-top:1px solid rgba(100,210,255,.12)}.pppoe-map-modal-panel footer span{color:var(--muted);font-size:10px}.pppoe-map-modal-panel footer span i{margin-right:6px;color:#5ed0ff}.pppoe-map-modal-panel footer a{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;color:#fff;border-radius:10px;background:linear-gradient(135deg,#118bc7,#1562a8);font-size:11px;font-weight:600;text-decoration:none}html[data-app-theme="light"] .pppoe-map-modal-panel{color:#203d55;background:#f7fbfe}@media(max-width:575.98px){.pppoe-map-modal{padding:10px}.pppoe-map-modal-panel{grid-template-rows:auto minmax(260px,55vh) auto;border-radius:16px}.pppoe-map-modal-panel footer{align-items:stretch;flex-direction:column}.pppoe-map-modal-panel footer a{justify-content:center}}
.router-metric strong{transform-origin:left center;will-change:transform,opacity}.router-metric strong.is-value-updated{animation:routerValueUpdate .42s cubic-bezier(.22,.8,.3,1)}
.router-progress i{transition:width .65s cubic-bezier(.22,.8,.3,1),background-color .25s ease}
.router-status-state.is-value-updated{animation:routerStatusPulse .55s ease}
@keyframes routerValueUpdate{0%{opacity:.35;transform:translateY(5px) scale(.985)}55%{opacity:1;transform:translateY(-1px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes routerStatusPulse{0%,100%{transform:scale(1)}45%{transform:scale(1.045);box-shadow:0 0 0 6px rgba(52,211,153,.09)}}
@media(prefers-reduced-motion:reduce){.router-metric strong.is-value-updated,.router-status-state.is-value-updated{animation:none}.router-progress i{transition:none}}
.pppoe-hover-detail.is-open{width:min(590px,calc(100vw - 28px))!important;max-height:min(82vh,720px)!important}.pppoe-detail-group{display:block!important;margin:9px 0!important;padding:10px!important;border:1px solid rgba(100,210,255,.11)!important;border-radius:14px;background:rgba(255,255,255,.025)}.pppoe-detail-group>h7{display:flex;align-items:center;gap:7px;margin-bottom:8px;color:#78d7ff;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.pppoe-detail-group>h7 i{width:16px}.pppoe-detail-group-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.pppoe-detail-group-body>.pppoe-detail-item{display:block!important;min-width:0;padding:8px!important;border:1px solid rgba(148,163,184,.1)!important;border-radius:10px;background:rgba(255,255,255,.02)}.pppoe-detail-group-body>.pppoe-detail-item.is-wide{grid-column:1/-1}.pppoe-detail-item span,.pppoe-detail-item strong{display:block}.pppoe-detail-item span{margin-bottom:4px;color:#8fa6bd!important;font-size:9px}.pppoe-detail-item span i{width:16px;color:#62ceff}.pppoe-detail-item strong{color:#e8f3ff;font-size:11px}.pppoe-detail-actions{display:flex!important;align-items:center;justify-content:flex-end;gap:7px;margin-top:11px;padding:10px 0 0!important;border-top:1px solid rgba(100,210,255,.1)!important}.pppoe-detail-actions .pppoe-disconnect,.pppoe-detail-actions .pppoe-remote-ont{width:auto;margin:0;min-height:32px;padding:0 12px;border-radius:10px;font-size:11px}.pppoe-remote-ont{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px!important;font-weight:600}html[data-app-theme="light"] .pppoe-detail-group{border-color:rgba(35,116,165,.12)!important;background:#f2f8fc}html[data-app-theme="light"] .pppoe-detail-group-body>.pppoe-detail-item{background:#fff}html[data-app-theme="light"] .pppoe-detail-item strong{color:#203d55}@media(max-width:575.98px){.pppoe-detail-group-body{grid-template-columns:1fr}.pppoe-detail-group-body>.pppoe-detail-item.is-wide{grid-column:auto}.pppoe-detail-actions{flex-wrap:wrap}.pppoe-detail-actions>*{flex:1}}
.router-metric-chart-card{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:104px}.router-metric-chart-card>div:first-child{min-width:0}.router-metric-chart-card small{display:block;margin-top:5px;color:var(--muted);font-size:9px;line-height:1.35}.router-mini-chart{--chart-value:0;position:relative;display:grid;place-items:center;flex:0 0 68px;width:68px;height:68px;border-radius:50%;background:conic-gradient(#39c6ff calc(var(--chart-value)*1%),rgba(100,210,255,.1) 0);box-shadow:0 0 20px rgba(32,170,230,.1);transition:--chart-value .65s cubic-bezier(.22,.8,.3,1),transform .25s ease}.router-mini-chart::before{content:"";position:absolute;inset:7px;border:1px solid rgba(100,210,255,.12);border-radius:inherit;background:#0b1728;box-shadow:inset 0 4px 12px rgba(0,0,0,.2)}.router-mini-chart i{position:relative;color:#dff7ff;font-size:11px;font-style:normal;font-weight:700}.router-mini-chart.is-value-updated{animation:routerChartPulse .42s ease}@keyframes routerChartPulse{50%{transform:scale(1.06)}}html[data-app-theme="light"] .router-mini-chart::before{background:#f4f9fc}html[data-app-theme="light"] .router-mini-chart i{color:#12618e}@media(max-width:575.98px){.router-mini-chart{flex-basis:62px;width:62px;height:62px}}

/* Database migration action: aligned, compact, and mobile friendly. */
.migration-run-form{padding-top:2px}.migration-run-controls{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,1fr);gap:12px;align-items:stretch}.migration-run-controls>.form-control,.migration-run-button{width:100%;min-height:48px;margin:0!important}.migration-run-button{border-radius:14px}.migration-run-help{display:flex;align-items:center;gap:7px;margin-top:9px;padding-left:2px;line-height:1.45}.migration-run-help i{flex:0 0 auto;color:#55c7ff}.migration-run-button:disabled{cursor:not-allowed;transform:none!important;opacity:.55}@media(max-width:767.98px){.migration-run-controls{grid-template-columns:1fr;gap:9px}.migration-run-controls>.form-control,.migration-run-button{min-height:46px}.migration-run-help{align-items:flex-start;margin-top:10px}}
.pwa-install-recommendation{position:fixed;z-index:12000;right:18px;bottom:18px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:min(430px,calc(100vw - 28px));padding:14px;border:1px solid rgba(76,184,255,.35);border-radius:18px;color:#eaf6ff;background:rgba(7,20,38,.94);box-shadow:0 20px 55px rgba(0,0,0,.42),0 0 28px rgba(27,148,255,.12);opacity:0;transform:translateY(18px);backdrop-filter:blur(18px);transition:opacity .22s ease,transform .22s ease}.pwa-install-recommendation.is-visible{opacity:1;transform:none}.pwa-install-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:#fff;background:linear-gradient(145deg,#168cff,#0c5c9e);font-size:18px}.pwa-install-recommendation strong,.pwa-install-recommendation span{display:block}.pwa-install-recommendation strong{font-size:13px}.pwa-install-recommendation span{margin-top:3px;color:#9fb5ca;font-size:11px;line-height:1.4}.pwa-install-actions{display:flex;align-items:center;gap:6px}.pwa-install-actions button{min-height:34px;padding:0 12px;border:1px solid rgba(88,192,255,.35);border-radius:10px;color:#dff5ff;background:rgba(28,129,207,.2);font-size:11px;font-weight:800}.pwa-install-actions [data-pwa-dismiss]{width:34px;padding:0;color:#9fb5ca;background:transparent}@media(max-width:575.98px){.pwa-install-recommendation{right:14px;bottom:14px;grid-template-columns:auto 1fr}.pwa-install-actions{grid-column:1/-1;justify-content:flex-end}}
[data-app-theme="light"] .pwa-install-recommendation{color:#112a43;background:rgba(248,252,255,.96);box-shadow:0 18px 48px rgba(36,70,104,.22)}[data-app-theme="light"] .pwa-install-recommendation span{color:#62788e}[data-app-theme="light"] .pwa-install-actions button{color:#07598f;background:#e3f3ff}