:root {
    --red: #d71920;
    --blue: #0759b6;
    --bright-blue: #1687ff;
    --background: #030811;
    --panel: #08182f;
    --white: #ffffff;
    --muted: #aebdd0;
    --border: rgba(255, 255, 255, 0.12);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    color: var(--white);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(215, 25, 32, 0.3),
            transparent 35rem
        ),
        radial-gradient(
            circle at 92% 90%,
            rgba(7, 89, 182, 0.4),
            transparent 40rem
        ),
        linear-gradient(135deg, #02050b, #07162b);
}

button,
input {
    font: inherit;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: min(100%, 470px);
    padding: 42px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 26px;
    background: rgba(8, 24, 47, 0.94);
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
}

.login-card::before {
    content: "";
    display: block;
    height: 5px;
    margin: -42px -42px 34px;
    background: linear-gradient(90deg, var(--red), var(--blue));
}

.brand-mark,
.portal-logo,
.card-icon {
    display: grid;
    place-items: center;
    color: var(--white);
    background: linear-gradient(135deg, var(--red), var(--blue));
}

.brand-mark {
    width: 70px;
    height: 70px;
    margin-bottom: 26px;
    border-radius: 19px;
    font-size: 22px;
    font-weight: 900;
}

.eyebrow {
    margin: 0 0 8px;
    color: #76b5ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

h1 {
    margin: 0;
    font-size: clamp(31px, 6vw, 48px);
    letter-spacing: -0.045em;
}

.intro,
.fine-print,
.welcome-text {
    color: var(--muted);
    line-height: 1.6;
}

.intro {
    margin: 16px 0 28px;
}

.fine-print {
    margin: 20px 0 0;
    font-size: 13px;
}

label {
    display: block;
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 700;
}

input {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    color: var(--white);
    border: 1px solid var(--border);
    border-radius: 13px;
    outline: none;
    background: rgba(255, 255, 255, 0.07);
}

input:focus {
    border-color: var(--bright-blue);
    box-shadow: 0 0 0 4px rgba(22, 135, 255, 0.18);
}

.code-input {
    text-align: center;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: 0.25em;
}

button {
    width: 100%;
    min-height: 52px;
    margin-top: 18px;
    padding: 0 20px;
    color: var(--white);
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    font-weight: 800;
    background: linear-gradient(135deg, var(--red), var(--blue));
}

button:hover {
    filter: brightness(1.1);
}

.alert,
.notice {
    padding: 13px 15px;
    margin: 20px 0;
    border-radius: 11px;
    font-size: 14px;
    line-height: 1.5;
}

.alert {
    color: #ffd7d9;
    border: 1px solid rgba(215, 25, 32, 0.4);
    background: rgba(215, 25, 32, 0.15);
}

.notice {
    color: #d8ebff;
    border: 1px solid rgba(22, 135, 255, 0.35);
    background: rgba(22, 135, 255, 0.14);
}

.back-link {
    display: inline-block;
    margin-top: 22px;
    color: #78b7ff;
    font-weight: 700;
    text-decoration: none;
}

.dashboard-body {
    min-height: 100vh;
}

.portal-header {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4vw;
    border-bottom: 1px solid var(--border);
    background: rgba(3, 10, 21, 0.9);
    backdrop-filter: blur(20px);
}

.portal-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--white);
    text-decoration: none;
}

.portal-brand strong,
.portal-brand span,
.customer-summary span,
.customer-summary strong {
    display: block;
}

.portal-brand span,
.customer-summary span {
    color: #8fa0b6;
    font-size: 12px;
}

.portal-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-weight: 900;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.customer-summary {
    text-align: right;
}

.customer-summary strong {
    max-width: 260px;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signout-button {
    width: auto;
    min-height: 42px;
    margin: 0;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.07);
}

.dashboard {
    width: min(1280px, 92%);
    margin: 0 auto;
    padding: 54px 0 80px;
}

.welcome-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 38px;
    margin-bottom: 52px;
    border: 1px solid var(--border);
    border-radius: 26px;
    background:
        linear-gradient(
            120deg,
            rgba(215, 25, 32, 0.13),
            rgba(7, 89, 182, 0.16)
        ),
        rgba(7, 21, 41, 0.9);
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.3);
}

.welcome-text {
    max-width: 680px;
    margin: 16px 0 0;
}

.account-badge {
    min-width: 190px;
    padding: 18px 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.22);
}

.account-badge span,
.account-badge strong {
    display: block;
}

.account-badge span {
    color: #90a2b9;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.account-badge strong {
    margin-top: 7px;
    overflow-wrap: anywhere;
}

.dashboard-section {
    margin-top: 56px;
}

.section-heading {
    margin-bottom: 22px;
}

.section-heading h2 {
    margin: 0;
    font-size: clamp(24px, 3vw, 32px);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.portal-card {
    position: relative;
    min-height: 255px;
    display: flex;
    flex-direction: column;
    padding: 26px;
    overflow: hidden;
    color: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    background: linear-gradient(
        145deg,
        rgba(12, 32, 59, 0.97),
        rgba(6, 20, 39, 0.97)
    );
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.portal-link-card {
    text-decoration: none;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.portal-link-card:hover {
    transform: translateY(-7px);
    border-color: rgba(22, 135, 255, 0.62);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.35);
}

.card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.card-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 16px;
    font-size: 28px;
}

.portal-card h3 {
    margin: 0 0 12px;
    font-size: 20px;
}

.portal-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.live-badge,
.tool-badge,
.coming-soon-badge,
.secure-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.live-badge,
.tool-badge {
    color: #d7ebff;
    border: 1px solid rgba(22, 135, 255, 0.36);
    background: rgba(22, 135, 255, 0.14);
}

.coming-soon-badge {
    color: #c6cfdb;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.06);
}

.secure-badge {
    color: #d9ffe9;
    border: 1px solid rgba(47, 196, 112, 0.35);
    background: rgba(47, 196, 112, 0.12);
}

.card-action {
    margin-top: auto;
    padding-top: 24px;
    color: #76b5ff;
    font-size: 13px;
    font-weight: 800;
}

.coming-soon-card {
    opacity: 0.72;
}

.account-details {
    margin: 0;
}

.account-details div {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.account-details dt {
    color: #8496ad;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.account-details dd {
    margin: 6px 0 0;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 700;
}

.portal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 34px 4vw;
    border-top: 1px solid var(--border);
    background: rgba(2, 7, 15, 0.82);
}

.portal-footer p {
    margin: 7px 0 0;
    color: #8293a8;
    font-size: 12px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.footer-links a {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 1000px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .customer-summary {
        display: none;
    }

    .welcome-panel {
        align-items: flex-start;
        flex-direction: column;
        padding: 28px;
    }

    .account-badge {
        width: 100%;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .portal-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .login-card {
        padding: 28px;
    }

    .login-card::before {
        margin: -28px -28px 28px;
    }

    .portal-brand span {
        display: none;
    }

    .dashboard {
        width: calc(100% - 28px);
        padding-top: 32px;
    }

    .welcome-panel,
    .portal-card {
        padding: 22px;
    }
}


/* =========================================================
   CUSTOMER PORTAL APPLICATION LAYOUT
   ========================================================= */

html {
    scroll-behavior: smooth;
}

.portal-app-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(22, 135, 255, 0.11),
            transparent 28%
        ),
        #030a15;
}

.portal-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 300;
    width: 280px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background:
        linear-gradient(
            180deg,
            rgba(8, 23, 43, 0.99),
            rgba(3, 10, 21, 0.99)
        );
    box-shadow: 18px 0 50px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease;
}

.sidebar-brand {
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.sidebar-brand strong,
.sidebar-brand span {
    display: block;
}

.sidebar-brand strong {
    font-size: 14px;
}

.sidebar-brand span {
    margin-top: 3px;
    color: #8496ad;
    font-size: 11px;
}

.sidebar-navigation {
    flex: 1;
    padding: 20px 14px;
    overflow-y: auto;
}

.sidebar-heading {
    margin: 22px 12px 9px;
    color: #61758e;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.sidebar-heading:first-child {
    margin-top: 0;
}

.sidebar-link {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 3px 0;
    padding: 8px 12px;
    color: #b1bfd0;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.sidebar-link:hover {
    color: var(--white);
    border-color: rgba(22, 135, 255, 0.22);
    background: rgba(22, 135, 255, 0.09);
    transform: translateX(3px);
}

.sidebar-link.active {
    color: #ffffff;
    border-color: rgba(22, 135, 255, 0.32);
    background:
        linear-gradient(
            90deg,
            rgba(22, 135, 255, 0.2),
            rgba(22, 135, 255, 0.07)
        );
}

.sidebar-payment-link {
    color: #ffffff;
    background: rgba(215, 25, 32, 0.13);
}

.sidebar-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 14px;
}

.sidebar-account {
    padding: 18px;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.15);
}

.sidebar-account span,
.sidebar-account strong {
    display: block;
}

.sidebar-account span {
    color: #7589a2;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.sidebar-account strong {
    margin: 5px 0 14px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-signout {
    min-height: 40px;
    margin: 0;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.06);
}

.portal-app {
    min-height: 100vh;
    margin-left: 280px;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 200;
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 30px;
    border-bottom: 1px solid var(--border);
    background: rgba(3, 10, 21, 0.88);
    backdrop-filter: blur(20px);
}

.app-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hamburger-button {
    width: 44px;
    height: 44px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.06);
}

.hamburger-button span {
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
}

.mobile-brand strong,
.mobile-brand span {
    display: block;
}

.mobile-brand strong {
    font-size: 14px;
}

.mobile-brand span {
    margin-top: 2px;
    color: #8293a8;
    font-size: 11px;
}

.header-account {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: right;
}

.header-account span,
.header-account strong {
    display: block;
}

.header-account span {
    color: #7589a2;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.header-account strong {
    max-width: 210px;
    margin-top: 3px;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-avatar {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(22, 135, 255, 0.35);
    border-radius: 50%;
    background: rgba(22, 135, 255, 0.15);
    font-size: 16px;
    font-weight: 900;
}

.app-content {
    width: min(1280px, calc(100% - 52px));
    margin: 0 auto;
    padding: 36px 0 52px;
}

.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 30px 32px;
    margin-bottom: 24px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background:
        linear-gradient(
            120deg,
            rgba(215, 25, 32, 0.11),
            rgba(22, 135, 255, 0.15)
        ),
        rgba(7, 21, 41, 0.92);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.dashboard-welcome h1 {
    margin: 5px 0 9px;
    font-size: clamp(28px, 4vw, 42px);
}

.dashboard-welcome p:last-child {
    max-width: 690px;
    margin: 0;
    color: var(--muted);
}

.customer-number-box {
    min-width: 190px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.2);
}

.customer-number-box span,
.customer-number-box strong {
    display: block;
}

.customer-number-box span {
    color: #8496ad;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.customer-number-box strong {
    margin-top: 7px;
    overflow-wrap: anywhere;
}

.dashboard-alert {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 20px;
    margin-bottom: 22px;
    color: #ffddb0;
    border: 1px solid rgba(255, 170, 60, 0.32);
    border-radius: 13px;
    background: rgba(255, 153, 31, 0.09);
    font-size: 13px;
}

.summary-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
    margin-bottom: 22px;
}

.summary-card {
    min-height: 175px;
    padding: 21px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(12, 32, 59, 0.97),
            rgba(6, 20, 39, 0.97)
        );
    box-shadow: 0 15px 36px rgba(0, 0, 0, 0.19);
}

.amount-due-card {
    border-color: rgba(22, 135, 255, 0.32);
}

.summary-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #91a4ba;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.summary-card-icon {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #dceeff;
    background: rgba(22, 135, 255, 0.13);
    font-weight: 900;
}

.summary-value {
    display: block;
    margin-top: 25px;
    font-size: clamp(24px, 3vw, 33px);
    line-height: 1.05;
}

.summary-date,
.plan-value {
    font-size: clamp(18px, 2.2vw, 25px);
}

.summary-caption {
    display: block;
    margin-top: 13px;
    color: #73869d;
    font-size: 11px;
    line-height: 1.4;
}

.account-status {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    margin-top: 25px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.account-status-active {
    color: #d9ffe9;
    border: 1px solid rgba(47, 196, 112, 0.36);
    background: rgba(47, 196, 112, 0.12);
}

.account-status-past-due,
.account-status-suspended {
    color: #ffd6d6;
    border: 1px solid rgba(226, 55, 67, 0.42);
    background: rgba(226, 55, 67, 0.13);
}

.account-status-unknown {
    color: #d7e0eb;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.06);
}

.dashboard-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
    gap: 18px;
    margin-bottom: 18px;
}

.dashboard-panel {
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 19px;
    background:
        linear-gradient(
            145deg,
            rgba(10, 29, 53, 0.96),
            rgba(5, 17, 34, 0.96)
        );
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.19);
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 23px;
}

.panel-heading h2 {
    margin: 2px 0 0;
    font-size: 23px;
}

.primary-action-button,
.secondary-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 17px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.primary-action-button {
    color: #ffffff;
    background: linear-gradient(135deg, #167fff, #0759b6);
    box-shadow: 0 10px 24px rgba(22, 127, 255, 0.2);
}

.secondary-action-button {
    color: #dceeff;
    border: 1px solid rgba(22, 135, 255, 0.32);
    background: rgba(22, 135, 255, 0.1);
}

.billing-information-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 25px;
}

.information-item {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.information-item span,
.information-item strong {
    display: block;
}

.information-item span {
    color: #7589a2;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.information-item strong {
    margin-top: 7px;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.last-payment-display {
    padding: 22px;
    border: 1px solid rgba(22, 135, 255, 0.19);
    border-radius: 15px;
    background: rgba(22, 135, 255, 0.07);
}

.last-payment-display > span,
.payment-date span {
    display: block;
    color: #7589a2;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.last-payment-display > strong {
    display: block;
    margin-top: 8px;
    font-size: 30px;
}

.payment-date {
    padding-top: 17px;
    margin-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.payment-date strong {
    display: block;
    margin-top: 6px;
    font-size: 13px;
}

.payment-note {
    margin-top: 15px;
    color: #71849b;
    font-size: 11px;
    line-height: 1.55;
}

.service-overview {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 18px;
}

.service-status-indicator,
.service-detail {
    min-height: 78px;
    display: flex;
    align-items: center;
    padding: 15px 17px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.025);
}

.service-status-indicator {
    gap: 13px;
}

.status-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
    background: #2fc470;
    box-shadow: 0 0 17px rgba(47, 196, 112, 0.8);
}

.service-status-indicator span,
.service-status-indicator strong,
.service-detail span,
.service-detail strong {
    display: block;
}

.service-status-indicator div > span,
.service-detail span {
    color: #7589a2;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.service-status-indicator strong,
.service-detail strong {
    margin-top: 6px;
    font-size: 13px;
}

.service-detail {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.quick-actions-section {
    margin-top: 18px;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: rgba(6, 20, 39, 0.83);
}

.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.quick-action-card {
    min-height: 85px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.025);
    text-decoration: none;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.quick-action-card:hover {
    transform: translateY(-3px);
    border-color: rgba(22, 135, 255, 0.37);
    background: rgba(22, 135, 255, 0.07);
}

.quick-action-icon {
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    border-radius: 11px;
    background: rgba(22, 135, 255, 0.12);
    font-weight: 900;
}

.quick-action-card div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.quick-action-card strong,
.quick-action-card span {
    display: block;
}

.quick-action-card strong {
    font-size: 13px;
}

.quick-action-card span {
    margin-top: 5px;
    color: #71849b;
    font-size: 10px;
}

.quick-action-card b {
    color: #65aaff;
    font-size: 17px;
}

.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 25px 3px 0;
    margin-top: 28px;
    color: #667b94;
    font-size: 11px;
}

.app-footer strong,
.app-footer span {
    display: block;
}

.app-footer span {
    margin-top: 4px;
}

.app-footer div:last-child {
    display: flex;
    gap: 17px;
}

.app-footer a {
    color: #8298b2;
    font-weight: 700;
    text-decoration: none;
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 290;
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 0, 0, 0.62);
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.overlay-visible {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 1180px) {
    .summary-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .portal-sidebar {
        transform: translateX(-100%);
    }

    .portal-sidebar.sidebar-open {
        transform: translateX(0);
    }

    .portal-app {
        margin-left: 0;
    }

    .hamburger-button {
        display: flex;
    }
}

@media (max-width: 780px) {
    .app-header {
        padding: 11px 16px;
    }

    .app-content {
        width: calc(100% - 28px);
        padding-top: 22px;
    }

    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px;
    }

    .customer-number-box {
        width: 100%;
    }

    .summary-card-grid,
    .dashboard-two-column,
    .service-overview,
    .quick-action-grid {
        grid-template-columns: 1fr;
    }

    .billing-information-grid {
        grid-template-columns: 1fr;
    }

    .panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .primary-action-button,
    .secondary-action-button {
        width: 100%;
    }

    .header-account > div:first-child {
        display: none;
    }
}

@media (max-width: 480px) {
    .mobile-brand strong {
        max-width: 185px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-brand span {
        display: none;
    }

    .dashboard-panel,
    .quick-actions-section {
        padding: 20px;
    }

    .summary-card {
        min-height: 155px;
    }

    .app-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

.account-status-past-due-suspended {
    color: #ffe1b8;
    border: 1px solid rgba(255, 116, 48, 0.5);
    background: rgba(226, 55, 67, 0.18);
}

.account-status-past-due-suspended {
    color: #ffe0b5;
    border: 1px solid rgba(255, 132, 51, 0.52);
    background: rgba(220, 53, 69, 0.18);
}

.dish-health-card {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.dish-health-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.dish-health-heading h2 {
    margin: 2px 0 0;
}

.dish-health-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.dish-health-badge.healthy {
    color: #bbf7d0;
    border: 1px solid rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.15);
}

.dish-health-badge.warning {
    color: #fde68a;
    border: 1px solid rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.15);
}

.dish-health-badge.offline {
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.15);
}

.dish-health-badge.unknown {
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.12);
}

.dish-health-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.55);
}

.dish-health-summary strong {
    display: block;
    margin-bottom: 3px;
    font-size: 1.05rem;
}

.dish-health-summary p {
    margin: 0;
    color: var(--muted, #94a3b8);
}

.dish-status-indicator {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: 50%;
}

.dish-status-indicator.healthy {
    background: #22c55e;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.8);
}

.dish-status-indicator.warning {
    background: #f59e0b;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.8);
}

.dish-status-indicator.offline {
    background: #ef4444;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.8);
}

.dish-status-indicator.unknown {
    background: #64748b;
}

.dish-health-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.dish-health-stat {
    padding: 15px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 15px;
    background: rgba(30, 41, 59, 0.45);
}

.dish-health-stat span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted, #94a3b8);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dish-health-stat strong {
    display: block;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .dish-health-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .dish-health-card {
        padding: 18px;
    }

    .dish-health-grid {
        grid-template-columns: 1fr;
    }
}

.network-status-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.network-status-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    background: rgba(30, 41, 59, 0.45);
}

.network-status-box > span {
    color: var(--muted, #94a3b8);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 560px) {
    .network-status-grid {
        grid-template-columns: 1fr;
    }
}

/* Billing center */
.billing-page{max-width:1180px;margin:0 auto;padding:28px}.billing-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:36px}.billing-header a{color:#1769aa;font-weight:700;text-decoration:none}.billing-header nav{display:flex;gap:22px}.billing-title{margin-bottom:24px}.billing-title h1{margin:4px 0 8px}.billing-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:24px;box-shadow:0 8px 24px rgba(15,23,42,.05)}.billing-table-wrap{overflow-x:auto}.billing-table{width:100%;border-collapse:collapse}.billing-table th,.billing-table td{padding:15px 12px;text-align:left;border-bottom:1px solid #e8edf3;white-space:nowrap}.billing-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b}.invoice-badge{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:.8rem;font-weight:800}.invoice-badge.paid{background:#dcfce7;color:#166534}.invoice-badge.partial{background:#fef3c7;color:#92400e}.invoice-badge.due{background:#dbeafe;color:#1d4ed8}.invoice-badge.overdue{background:#fee2e2;color:#991b1b}.small-action,.primary-billing-button,.secondary-billing-button,.danger-billing-button{display:inline-block;border:0;border-radius:9px;padding:11px 17px;font-weight:800;text-decoration:none;cursor:pointer}.small-action,.primary-billing-button{background:#1769aa;color:#fff}.secondary-billing-button{background:#e8eef5;color:#17324d}.danger-billing-button{background:#fee2e2;color:#991b1b}.invoice-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px}.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.detail-grid div{padding:14px;background:#f8fafc;border-radius:10px}.detail-grid span,.invoice-total span{display:block;color:#64748b;font-size:.85rem;margin-bottom:6px}.invoice-total strong{display:block;font-size:2rem;margin-bottom:20px}.invoice-total form,.invoice-total a{display:block;width:100%;margin-top:10px;text-align:center;box-sizing:border-box}.autopay-card{max-width:760px}.autopay-actions{display:flex;gap:12px;flex-wrap:wrap}.consent-box{display:flex;gap:12px;align-items:flex-start;padding:16px;background:#f8fafc;border-radius:10px;margin:20px 0}.billing-notice{padding:14px 18px;border-radius:10px;background:#fff7ed;color:#9a3412;margin-bottom:18px}.billing-notice.success{background:#dcfce7;color:#166534}@media(max-width:760px){.billing-header{align-items:flex-start;flex-direction:column}.billing-header nav{gap:14px;flex-wrap:wrap}.invoice-grid{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr 1fr}.billing-page{padding:18px}}

/* Shared portal billing pages */
.billing-app-content { padding-bottom: 48px; }
.billing-page-heading { margin-bottom: 24px; }
.billing-page-heading .secondary-action-button { align-self: center; }
.portal-table-panel { overflow: hidden; }
.panel-count { color: #94a3b8; font-size: .85rem; font-weight: 700; }
.portal-table-wrap { width: 100%; overflow-x: auto; }
.portal-table { width: 100%; border-collapse: collapse; color: #e2e8f0; }
.portal-table th, .portal-table td { padding: 16px 14px; border-bottom: 1px solid rgba(148,163,184,.14); text-align: left; vertical-align: middle; }
.portal-table th { color: #94a3b8; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.portal-table tbody tr:last-child td { border-bottom: 0; }
.portal-table tbody tr:hover { background: rgba(30,41,59,.38); }
.reference-cell { max-width: 320px; overflow-wrap: anywhere; color: #cbd5e1; }
.table-action { text-align: right !important; }
.empty-state { padding: 34px !important; text-align: center !important; color: #94a3b8; }
.invoice-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 11px; border-radius: 999px; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.invoice-badge.paid { color: #bbf7d0; border: 1px solid rgba(34,197,94,.42); background: rgba(34,197,94,.14); }
.invoice-badge.partial { color: #fde68a; border: 1px solid rgba(245,158,11,.45); background: rgba(245,158,11,.14); }
.invoice-badge.due { color: #bfdbfe; border: 1px solid rgba(59,130,246,.45); background: rgba(59,130,246,.14); }
.invoice-badge.overdue { color: #fecaca; border: 1px solid rgba(239,68,68,.45); background: rgba(239,68,68,.14); }
.small-action { display: inline-flex; align-items: center; justify-content: center; padding: 9px 13px; border: 1px solid rgba(96,165,250,.35); border-radius: 10px; color: #bfdbfe; background: rgba(37,99,235,.14); font-size: .82rem; font-weight: 800; text-decoration: none; }
.small-action:hover { background: rgba(37,99,235,.26); }
.invoice-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 22px; align-items: start; }
.detail-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 28px; }
.detail-grid > div, .autopay-info-grid > div { padding: 16px; border: 1px solid rgba(148,163,184,.14); border-radius: 15px; background: rgba(30,41,59,.45); }
.detail-grid span, .autopay-info-grid span { display: block; margin-bottom: 7px; color: #94a3b8; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.invoice-summary-card { position: sticky; top: 96px; }
.invoice-balance { display: block; margin: 10px 0 12px; color: #f8fafc; font-size: 2.3rem; line-height: 1; }
.invoice-summary-copy, .autopay-disclosure { color: #94a3b8; line-height: 1.6; }
.full-width-button { width: 100%; box-sizing: border-box; margin-top: 12px; text-align: center; }
.text-back-link { display: block; margin-top: 18px; color: #93c5fd; font-weight: 700; text-align: center; text-decoration: none; }
.portal-notice { display: flex; gap: 9px; align-items: center; margin-bottom: 20px; padding: 15px 18px; border-radius: 14px; }
.portal-notice.success { color: #bbf7d0; border: 1px solid rgba(34,197,94,.36); background: rgba(34,197,94,.12); }
.portal-notice.warning { color: #fde68a; border: 1px solid rgba(245,158,11,.36); background: rgba(245,158,11,.12); }
.autopay-portal-card { max-width: 860px; }
.saved-card-row, .autopay-empty { display: flex; align-items: center; gap: 18px; }
.saved-card-row h2, .autopay-empty h2 { margin: 3px 0 6px; }
.saved-card-row p, .autopay-empty p { margin: 0; color: #94a3b8; }
.saved-card-icon, .autopay-empty-icon { display: flex; align-items: center; justify-content: center; width: 74px; height: 48px; flex: 0 0 auto; border: 1px solid rgba(96,165,250,.34); border-radius: 13px; color: #dbeafe; background: linear-gradient(135deg,rgba(37,99,235,.3),rgba(14,165,233,.18)); font-size: .8rem; font-weight: 900; letter-spacing: .06em; }
.autopay-empty-icon { width: 56px; height: 56px; border-radius: 50%; font-size: 1.4rem; }
.autopay-info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 24px 0; }
.autopay-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.danger-action-button { min-height: 44px; padding: 11px 18px; border: 1px solid rgba(239,68,68,.35); border-radius: 12px; color: #fecaca; background: rgba(239,68,68,.13); font-weight: 800; cursor: pointer; }
.consent-box { display: flex; gap: 13px; align-items: flex-start; margin: 24px 0; padding: 17px; border: 1px solid rgba(148,163,184,.15); border-radius: 15px; color: #cbd5e1; background: rgba(30,41,59,.42); line-height: 1.55; }
.consent-box input { margin-top: 4px; }
@media (max-width: 900px) { .invoice-detail-layout { grid-template-columns: 1fr; } .invoice-summary-card { position: static; } .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) {
  .billing-page-heading .secondary-action-button { width: 100%; }
  .portal-table thead { display: none; }
  .portal-table, .portal-table tbody, .portal-table tr, .portal-table td { display: block; width: 100%; }
  .portal-table tr { padding: 12px 0; border-bottom: 1px solid rgba(148,163,184,.15); }
  .portal-table td { display: flex; justify-content: space-between; gap: 18px; padding: 9px 4px; border: 0; white-space: normal; text-align: right; }
  .portal-table td::before { content: attr(data-label); color: #94a3b8; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; text-align: left; }
  .portal-table .table-action { justify-content: flex-end; }
  .portal-table .table-action::before { content: ""; }
  .reference-cell { max-width: none; }
  .autopay-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .detail-grid { grid-template-columns: 1fr; } .saved-card-row, .autopay-empty { align-items: flex-start; } }

/* Customer portal phase 2 */
.service-card-grid,.support-option-grid,.network-health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:24px}.portal-detail-card,.network-health-card,.support-option-card,.portal-empty-state{border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.72);box-shadow:0 18px 50px rgba(2,6,23,.18);border-radius:20px;padding:24px}.portal-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.portal-card-heading h2,.support-option-card h2{margin:4px 0 0}.portal-detail-list{display:grid;gap:0;margin:0}.portal-detail-list>div{display:flex;justify-content:space-between;gap:24px;padding:15px 0;border-bottom:1px solid rgba(148,163,184,.12)}.portal-detail-list>div:last-child{border-bottom:0}.portal-detail-list dt{color:#94a3b8}.portal-detail-list dd{margin:0;text-align:right;font-weight:700;color:#f8fafc}.portal-card-actions{display:flex;gap:12px;margin-top:22px}.network-health-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.network-health-card span,.network-health-card small{display:block;color:#94a3b8}.network-health-card strong{display:block;font-size:1.55rem;margin:10px 0;color:#f8fafc}.support-option-card{display:flex;align-items:center;gap:18px;color:inherit;text-decoration:none;transition:transform .18s ease,border-color .18s ease}.support-option-card:hover{transform:translateY(-2px);border-color:rgba(59,130,246,.5)}.support-option-card p{margin:7px 0 0;color:#94a3b8}.support-option-icon{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:15px;background:rgba(59,130,246,.14);font-size:1.35rem;color:#93c5fd}.support-step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.support-step-grid>div{padding:18px;border-radius:16px;background:rgba(30,41,59,.58)}.support-step-grid strong{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(59,130,246,.18);color:#93c5fd;margin-bottom:12px}.support-step-grid p{margin:0;color:#cbd5e1;line-height:1.55}.portal-empty-state{text-align:center;padding:48px 24px}.portal-empty-state p{color:#94a3b8;max-width:620px;margin:10px auto 22px}.profile-card{max-width:900px}
@media(max-width:1000px){.network-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.support-step-grid{grid-template-columns:1fr}}
@media(max-width:700px){.service-card-grid,.support-option-grid,.network-health-grid{grid-template-columns:1fr}.portal-detail-list>div{display:block}.portal-detail-list dd{text-align:left;margin-top:6px}.portal-card-heading{display:block}.portal-card-heading .billing-status{display:inline-flex;margin-top:12px}}

/* Phase 3: support tickets and customer preferences */
.portal-success-banner{margin:0 0 20px;padding:14px 18px;border:1px solid rgba(34,197,94,.35);border-radius:14px;background:rgba(34,197,94,.12);color:#bbf7d0;font-weight:800}.ticket-list{display:flex;flex-direction:column}.ticket-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 4px;border-bottom:1px solid rgba(148,163,184,.14);color:inherit;text-decoration:none}.ticket-row:last-child{border-bottom:0}.ticket-row:hover strong{color:#7dd3fc}.ticket-row div{min-width:0}.ticket-row strong,.ticket-row span{display:block}.ticket-row div span{margin-top:5px;color:var(--muted,#94a3b8);font-size:.88rem}.portal-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.portal-form label{display:flex;flex-direction:column;gap:8px;color:#cbd5e1;font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.portal-form input,.portal-form select,.portal-form textarea{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid rgba(148,163,184,.25);border-radius:11px;background:rgba(15,23,42,.75);color:#f8fafc;font:inherit;text-transform:none;letter-spacing:normal}.portal-form textarea{resize:vertical}.form-span-two{grid-column:1/-1}.form-actions{display:flex;gap:12px;align-items:center}.ticket-meta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}.ticket-meta-grid div{padding:15px;border:1px solid rgba(148,163,184,.15);border-radius:14px;background:rgba(30,41,59,.4)}.ticket-meta-grid span{display:block;margin-bottom:6px;color:var(--muted,#94a3b8);font-size:.75rem;font-weight:800;text-transform:uppercase}.ticket-message{padding:20px;border-radius:14px;background:rgba(15,23,42,.58);white-space:pre-wrap;line-height:1.65}.portal-muted-note{color:var(--muted,#94a3b8);font-size:.88rem}.profile-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.profile-detail-list>div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid rgba(148,163,184,.13)}.profile-detail-list>div:last-child{border-bottom:0}.profile-detail-list span{color:var(--muted,#94a3b8)}.profile-detail-list strong{text-align:right}.preference-form{display:flex;flex-direction:column;gap:0}.preference-form label{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid rgba(148,163,184,.13);cursor:pointer}.preference-form label span{display:block}.preference-form strong,.preference-form small{display:block}.preference-form small{margin-top:4px;color:var(--muted,#94a3b8);font-weight:400}.preference-form input[type=checkbox]{width:22px;height:22px;accent-color:#0ea5e9}.preference-form button{margin-top:18px;align-self:flex-start}
@media(max-width:760px){.portal-form,.profile-layout{grid-template-columns:1fr}.form-span-two{grid-column:auto}.ticket-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ticket-row{align-items:flex-start}.billing-page-heading{align-items:flex-start;flex-direction:column}}@media(max-width:480px){.ticket-meta-grid{grid-template-columns:1fr}.form-actions{align-items:stretch;flex-direction:column}.form-actions a,.form-actions button{text-align:center;width:100%}}

/* Unified portal visual system — dashboard and all customer pages */
:root{--portal-bg:#020b18;--portal-panel:rgba(10,25,45,.92);--portal-panel-soft:rgba(17,34,57,.76);--portal-border:rgba(148,163,184,.16);--portal-text:#f8fafc;--portal-muted:#94a3b8;--portal-accent:#38bdf8;--portal-accent-strong:#0284c7}
.portal-app-body{min-height:100vh;background:radial-gradient(circle at 85% 85%,rgba(2,132,199,.30),transparent 38%),radial-gradient(circle at 4% 5%,rgba(127,29,29,.40),transparent 30%),linear-gradient(135deg,#020817 0%,#031225 58%,#062a52 100%);color:var(--portal-text)}
.billing-app-content{width:100%;max-width:none;box-sizing:border-box;padding:34px clamp(20px,3vw,46px) 56px}
.billing-page-heading,.dashboard-welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 24px;padding:0;background:none;border:0;box-shadow:none}
.billing-page-heading h1,.dashboard-welcome h1{margin:4px 0 7px;color:#fff;font-size:clamp(2rem,3vw,3rem);line-height:1.04;letter-spacing:-.035em}
.billing-page-heading p:last-child,.dashboard-welcome p:last-child{max-width:760px;margin:0;color:#b4c4d8;line-height:1.6}
.dashboard-panel,.portal-detail-card,.network-health-card,.support-option-card,.dish-health-card{border:1px solid var(--portal-border);background:linear-gradient(145deg,rgba(15,31,53,.94),rgba(5,18,35,.94));box-shadow:0 22px 55px rgba(0,0,0,.20);border-radius:18px}
.portal-detail-card,.network-health-card{padding:24px}.dashboard-panel{padding:24px}.support-option-card{padding:22px}
.portal-card-heading,.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}
.portal-card-heading h2,.panel-heading h2,.support-option-card h2{margin:3px 0 0;color:#fff}
.eyebrow,.dashboard-eyebrow{color:#67d3ff;font-size:.74rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.primary-action-button,.primary-billing-button,.portal-button.primary,.small-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid rgba(56,189,248,.35);border-radius:11px;background:linear-gradient(135deg,#0284c7,#0369a1);color:#fff!important;font-weight:850;text-decoration:none;cursor:pointer;box-shadow:0 10px 24px rgba(2,132,199,.20)}
.secondary-action-button,.secondary-billing-button,.portal-button.secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid rgba(148,163,184,.22);border-radius:11px;background:rgba(30,50,75,.75);color:#e7f1fc!important;font-weight:800;text-decoration:none;cursor:pointer}
.primary-action-button:hover,.primary-billing-button:hover,.small-action:hover{filter:brightness(1.10);transform:translateY(-1px)}
.secondary-action-button:hover,.secondary-billing-button:hover{background:rgba(42,66,96,.9)}
.portal-payment-action{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px}
.portal-table{color:#e9f1fa}.portal-table th{color:#91a7bd}.portal-table td{border-color:rgba(148,163,184,.13)}
.portal-table tbody tr:hover{background:rgba(56,189,248,.055)}
.portal-table a{color:#7dd3fc}.reference-cell{max-width:380px;overflow:hidden;text-overflow:ellipsis}
.portal-form input,.portal-form select,.portal-form textarea{background:rgba(2,12,25,.70);border-color:rgba(148,163,184,.22);color:#fff}.portal-form input:focus,.portal-form select:focus,.portal-form textarea:focus{outline:2px solid rgba(56,189,248,.42);border-color:#38bdf8}
.profile-detail-list strong,.ticket-meta-grid strong,.portal-detail-list dd{color:#f8fafc}.portal-detail-list dt,.profile-detail-list span{color:#9fb0c4}
.support-option-card{color:inherit;text-decoration:none}.support-option-card:hover{border-color:rgba(56,189,248,.45);transform:translateY(-2px)}
.service-card-grid,.support-option-grid,.network-health-grid{gap:20px}.portal-empty-state,.empty-portal-state{padding:42px;border:1px dashed rgba(148,163,184,.26);border-radius:18px;background:rgba(8,24,43,.62);text-align:center}
.sidebar-link{transition:background .16s ease,color .16s ease,border-color .16s ease}.sidebar-link.active{background:linear-gradient(90deg,rgba(14,165,233,.22),rgba(14,165,233,.07));border-left-color:#38bdf8;color:#fff}.sidebar-link:hover{background:rgba(56,189,248,.09);color:#fff}
@media(max-width:900px){.billing-app-content{padding:24px 16px 42px}.billing-page-heading,.dashboard-welcome{align-items:flex-start;flex-direction:column}.billing-page-heading>a,.billing-page-heading>.billing-heading-actions{width:100%}.billing-heading-actions{display:flex;gap:10px;flex-wrap:wrap}.profile-layout{grid-template-columns:1fr}.ticket-meta-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.dashboard-panel,.portal-detail-card,.network-health-card{padding:18px}.portal-form{grid-template-columns:1fr}.form-span-two{grid-column:auto}.ticket-meta-grid,.detail-grid{grid-template-columns:1fr}.portal-table thead{display:none}.portal-table,.portal-table tbody,.portal-table tr,.portal-table td{display:block;width:100%;box-sizing:border-box}.portal-table tr{padding:12px 0;border-bottom:1px solid rgba(148,163,184,.16)}.portal-table td{display:flex;justify-content:space-between;gap:18px;padding:8px 4px;border:0;text-align:right;white-space:normal}.portal-table td:before{content:attr(data-label);color:#8fa4ba;font-size:.75rem;font-weight:800;text-transform:uppercase;text-align:left}.table-action{justify-content:flex-end!important}.table-action:before{display:none}.portal-payment-action>a{width:100%;box-sizing:border-box}}

/* Phase 5: notifications and plan management */
.header-notification-button{position:relative;display:grid;place-items:center;width:42px;height:42px;margin-left:auto;margin-right:14px;border:1px solid rgba(148,163,184,.18);border-radius:12px;background:rgba(15,31,53,.75);color:#cbd5e1;text-decoration:none}.header-notification-button:hover,.header-notification-button.active{border-color:rgba(56,189,248,.5);color:#7dd3fc;background:rgba(14,165,233,.1)}.header-notification-button>b{position:absolute;top:-6px;right:-7px;min-width:19px;height:19px;padding:0 4px;border:2px solid #061427;border-radius:999px;background:#dc2626;color:#fff;font-size:.68rem;line-height:15px;text-align:center}.notification-list{display:flex;flex-direction:column}.notification-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 4px;border-bottom:1px solid rgba(148,163,184,.13)}.notification-item:last-child{border-bottom:0}.notification-item.unread{background:linear-gradient(90deg,rgba(14,165,233,.08),transparent);border-radius:12px;padding-left:14px;padding-right:14px}.notification-symbol{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(56,189,248,.12);color:#7dd3fc;font-weight:900}.notification-copy p{margin:6px 0;color:#cbd5e1;line-height:1.5}.notification-copy>span{color:#7f94aa;font-size:.8rem}.notification-title-row{display:flex;align-items:center;gap:9px}.unread-pill{padding:3px 7px;border-radius:999px;background:rgba(14,165,233,.17);color:#7dd3fc;font-size:.68rem;font-weight:900;text-transform:uppercase}.plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:22px}.plan-card{position:relative;display:flex;flex-direction:column;min-height:315px;padding:24px;border:1px solid var(--portal-border);border-radius:18px;background:linear-gradient(145deg,rgba(15,31,53,.94),rgba(5,18,35,.94));box-shadow:0 18px 45px rgba(0,0,0,.16)}.plan-card.current{border-color:rgba(56,189,248,.55);box-shadow:0 18px 45px rgba(2,132,199,.13)}.plan-card h2{margin:8px 0 18px;color:#fff;font-size:1.35rem}.plan-speed{color:#7dd3fc;font-size:1.12rem}.plan-price{display:block;margin-top:5px;color:#fff;font-size:1.2rem;font-weight:850}.plan-card p{flex:1;color:#aebed0;line-height:1.55}.plan-card .primary-action-button{width:100%;box-sizing:border-box}.plan-badge{position:absolute;top:14px;right:14px;padding:4px 8px;border-radius:999px;background:rgba(34,197,94,.14);color:#86efac;font-size:.67rem;font-weight:900;text-transform:uppercase}.current-plan-chip{padding:13px 17px;border:1px solid rgba(56,189,248,.25);border-radius:14px;background:rgba(14,165,233,.08)}.current-plan-chip span,.current-plan-chip strong{display:block}.current-plan-chip span{color:#94a3b8;font-size:.72rem;font-weight:800;text-transform:uppercase}.current-plan-chip strong{margin-top:3px;color:#fff}.plan-request-panel{margin-bottom:22px}
@media(max-width:1150px){.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.plan-grid{grid-template-columns:1fr}.notification-item{grid-template-columns:auto 1fr}.notification-item form{grid-column:2}.header-notification-button{margin-right:8px}.current-plan-chip{width:100%;box-sizing:border-box}}


/* Phase 6: application shell, devices, theme support */
.theme-toggle{display:grid;place-items:center;width:42px;height:42px;margin-right:10px;border:1px solid rgba(148,163,184,.18);border-radius:12px;background:rgba(15,31,53,.75);color:#e2e8f0;font-size:1rem;cursor:pointer}.theme-toggle:hover{border-color:rgba(56,189,248,.5);background:rgba(14,165,233,.1)}
.device-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:22px}.device-card{display:flex;flex-direction:column}.device-card-top{display:flex;align-items:center;justify-content:space-between}.device-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(56,189,248,.12);color:#7dd3fc;font-size:1.3rem}.device-card h2{margin:18px 0 4px}.device-card>p{margin:0 0 18px;color:#94a3b8}.device-detail-list{margin:0 0 20px}.device-detail-list>div{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid rgba(148,163,184,.13)}.device-detail-list dt{color:#94a3b8}.device-detail-list dd{margin:0;color:#f8fafc;font-weight:750;text-align:right}.device-card .full-width-button{margin-top:auto}.portal-info-panel{margin-top:22px}.portal-info-panel p{margin:0;color:#b4c4d8;line-height:1.65}
.light-theme{--portal-bg:#edf3f9;--portal-panel:rgba(255,255,255,.96);--portal-panel-soft:rgba(248,250,252,.96);--portal-border:rgba(15,23,42,.12);--portal-text:#0f172a;--portal-muted:#64748b;background:radial-gradient(circle at 90% 80%,rgba(56,189,248,.18),transparent 38%),linear-gradient(135deg,#eef4fa,#f8fafc)!important;color:#0f172a}.light-theme .portal-sidebar{background:linear-gradient(180deg,#fff,#eef5fb);border-color:rgba(15,23,42,.1)}.light-theme .portal-app,.light-theme .app-header{background:transparent}.light-theme .app-header{border-color:rgba(15,23,42,.1);background:rgba(255,255,255,.88)}.light-theme .dashboard-panel,.light-theme .portal-detail-card,.light-theme .network-health-card,.light-theme .support-option-card,.light-theme .plan-card,.light-theme .device-card{background:rgba(255,255,255,.94);border-color:rgba(15,23,42,.11);box-shadow:0 15px 40px rgba(15,23,42,.08)}.light-theme h1,.light-theme h2,.light-theme h3,.light-theme strong,.light-theme .summary-value,.light-theme .device-detail-list dd{color:#0f172a}.light-theme p,.light-theme .summary-caption,.light-theme .device-card>p,.light-theme .portal-info-panel p{color:#52647a}.light-theme .sidebar-link{color:#334155}.light-theme .sidebar-heading,.light-theme .sidebar-account span{color:#64748b}.light-theme .header-account span{color:#64748b}.light-theme .header-account strong{color:#0f172a}.light-theme .theme-toggle,.light-theme .header-notification-button{background:#fff;color:#334155;border-color:rgba(15,23,42,.12)}.light-theme .portal-form input,.light-theme .portal-form select,.light-theme .portal-form textarea{background:#fff;color:#0f172a;border-color:rgba(15,23,42,.18)}
@media(max-width:1100px){.device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.device-grid{grid-template-columns:1fr}.theme-toggle{margin-right:5px}.header-account{display:none}}

/* Portal 2.0 modular foundation */
.portal-admin-grid { margin-bottom: 1.5rem; }
.portal-admin-grid .summary-card strong { font-size: clamp(1.8rem, 4vw, 2.6rem); }