:root {
    --primary: #001842;
    --primary-dark: #00112d;
    --primary-light: #072a66;
    --accent: #00c48c;
    --accent-hover: #00a375;
    --accent-light: #38e7ba;
    --surface-accent: #e6f7f2;
    --surface-accent-soft: #f0f8f6;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-muted: #f1f5f9;
    --ink: #0f172a;
    --muted: #64748b;
    --muted-strong: #475569;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    --danger: #b42318;
    --warning: #b56a00;
    --success: #237632;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm: 0 8px 24px rgba(0, 24, 66, .07);
    --shadow-md: 0 18px 44px rgba(0, 24, 66, .10);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
}

* { box-sizing: border-box; }

html {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--surface-soft);
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    min-width: 320px;
    background:
        linear-gradient(to right, rgba(0, 196, 140, .025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 196, 140, .025) 1px, transparent 1px),
        var(--surface-soft);
    background-size: 32px 32px;
}

button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

h1, h2, h3, h4, h5, h6 {
    font-family: Montserrat, Inter, ui-sans-serif, system-ui, sans-serif;
    color: var(--primary);
    letter-spacing: -.035em;
}

a { color: inherit; }

:focus-visible {
    outline: 3px solid rgba(0, 196, 140, .28);
    outline-offset: 2px;
}

.eyebrow {
    margin: 0 0 .5rem;
    color: var(--accent-hover);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.muted { color: var(--muted); }

.brand-mark {
    display: block;
    width: 68px;
    height: 68px;
    border: 0;
    border-radius: 18px;
    object-fit: cover;
    background: var(--surface);
    box-shadow: 0 16px 38px rgba(0, 17, 45, .24);
}

.brand-mark.small {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 17, 45, .24);
}

.login-wordmark {
    display: block;
    width: min(318px, 100%);
    height: auto;
    margin: 0 0 1.55rem;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    background:
        radial-gradient(circle at 12% 16%, rgba(0, 196, 140, .18), transparent 29%),
        radial-gradient(circle at 40% 70%, rgba(56, 231, 186, .07), transparent 34%),
        linear-gradient(132deg, var(--primary-dark) 0%, var(--primary) 53%, #f4f7fb 53%);
}

.login-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(3rem, 7vw, 7rem);
    color: #fff;
}

.login-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(to right, rgba(0, 196, 140, .18) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 196, 140, .18) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(90deg, #000, transparent 78%);
}

.login-brand > * { position: relative; z-index: 1; }

.login-brand .brand-mark { margin-bottom: 1.9rem; }

.login-brand .eyebrow { color: var(--accent-light); }

.login-brand h1 {
    max-width: 760px;
    margin: .35rem 0 1.35rem;
    color: #fff;
    font-size: clamp(2.7rem, 5vw, 5rem);
    line-height: 1.02;
    letter-spacing: -.055em;
}

.login-brand > p:not(.eyebrow) {
    max-width: 650px;
    margin: 0;
    color: #cfdae8;
    font-size: 1.05rem;
    line-height: 1.75;
}

.brand-promise {
    margin-top: 1rem !important;
    color: #fff !important;
    font-weight: 800;
}

.pillars {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 2rem;
}

.pillars span {
    padding: .58rem .9rem;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.login-card {
    align-self: center;
    justify-self: center;
    width: min(456px, 86%);
    padding: clamp(2rem, 4vw, 3rem);
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, .97);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(18px);
}

.login-card h2 {
    margin: .15rem 0 .45rem;
    font-size: 2rem;
}

.login-card form {
    display: grid;
    gap: 1.15rem;
    margin-top: 1.75rem;
}

.login-card label,
.form-grid label,
.record-form label {
    display: grid;
    gap: .42rem;
    color: var(--muted-strong);
    font-size: .76rem;
    font-weight: 800;
}

input, select, textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

input, select { min-height: 44px; padding: .72rem .82rem; }
textarea { padding: .72rem .82rem; resize: vertical; }

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(0, 196, 140, .11);
}

button,
.small-button,
.secondary-button {
    border: 0;
    border-radius: var(--radius-sm);
    padding: .72rem .95rem;
    background: var(--accent);
    color: var(--primary);
    font-weight: 900;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

button:hover,
.small-button:hover {
    transform: translateY(-1px);
    background: var(--accent-hover);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 196, 140, .16);
}

button:active,
.small-button:active { transform: translateY(0); }

.secondary-button {
    background: var(--primary);
    color: #fff;
}

.secondary-button:hover {
    background: var(--primary-light);
    color: #fff;
}

.login-card button[type="submit"]:not(.link-button) {
    min-height: 48px;
    border-radius: 999px;
}

.security-note {
    margin: 1.25rem 0 0;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.6;
    text-align: center;
}

.login-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: 1rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
}

.login-meta::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(0, 196, 140, .10);
}

.alert {
    margin: 1rem 0;
    padding: .88rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .86rem;
    line-height: 1.5;
}

.alert.error {
    border: 1px solid #ffd0ca;
    background: #fff0ee;
    color: var(--danger);
}

.alert.warning {
    border: 1px solid #f4d79b;
    background: #fff7e7;
    color: #805000;
}

.alert.success {
    border: 1px solid #b9e3c3;
    background: #e9f8ed;
    color: var(--success);
}

.alert.info {
    border: 1px solid #b9d9f4;
    background: #edf7ff;
    color: #145a86;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    overflow-y: auto;
    color: #fff;
    background:
        radial-gradient(circle at 16% 8%, rgba(0, 196, 140, .16), transparent 24%),
        linear-gradient(180deg, var(--primary-dark), var(--primary));
    box-shadow: 12px 0 38px rgba(0, 17, 45, .08);
}

.brand {
    display: flex;
    align-items: center;
    gap: .78rem;
    padding: .25rem .45rem 1.35rem;
}

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

.brand strong,
.brand span,
.brand small { display: block; }

.brand strong {
    color: #fff;
    font-family: Montserrat, Inter, sans-serif;
    font-size: .98rem;
    letter-spacing: .05em;
}

.brand span {
    margin-top: .14rem;
    color: var(--accent-light);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.brand small {
    margin-top: .22rem;
    color: #88a2bc;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .10em;
}

.nav-label {
    margin: .3rem 0 .55rem;
    padding: 0 .8rem;
    color: #6f91ae;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.mobile-menu-button {
    display: none;
}

.sidebar-navigation {
    display: block;
}

.mobile-menu-icon {
    position: relative;
    width: 18px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.mobile-menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    border-top: 2px solid currentColor;
}

.sidebar nav {
    display: grid;
    gap: .28rem;
}

.sidebar nav a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .76rem .9rem;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #c9d6e4;
    font-size: .86rem;
    font-weight: 750;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.sidebar nav a:hover {
    transform: translateX(2px);
    border-color: rgba(0, 196, 140, .16);
    background: rgba(255, 255, 255, .065);
    color: #fff;
}

.sidebar nav a.active {
    border-color: rgba(0, 196, 140, .24);
    background: rgba(0, 196, 140, .13);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-footer {
    display: grid;
    gap: .3rem;
    margin-top: auto;
    padding: 1.2rem .75rem .55rem;
    color: #86a2bd;
    font-size: .62rem;
    letter-spacing: .08em;
}

.sidebar-footer span {
    color: var(--accent-light);
    font-weight: 900;
    letter-spacing: .12em;
}

.content {
    min-width: 0;
    padding: 1.7rem clamp(1.25rem, 3vw, 2.6rem) 2.5rem;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    min-height: 74px;
    margin: 0 0 1.45rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.topbar-title { min-width: 0; }

.topbar h1 {
    margin: 0;
    font-size: clamp(1.65rem, 2.5vw, 2.15rem);
    line-height: 1.08;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--muted);
    font-size: .82rem;
}

.user-identity {
    display: grid;
    justify-items: end;
    gap: .12rem;
}

.user-identity strong {
    color: var(--primary);
    font-size: .82rem;
}

.user-identity span {
    color: var(--muted);
    font-size: .68rem;
}

.user-menu form { margin: 0; }

.link-button {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .55rem .85rem;
    background: #fff;
    color: var(--primary);
    font-size: .78rem;
    font-weight: 850;
    box-shadow: var(--shadow-xs);
}

.link-button:hover {
    border-color: rgba(0, 196, 140, .42);
    background: var(--surface-accent-soft);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.2rem 0 1.55rem;
}

.metrics article {
    position: relative;
    overflow: hidden;
    min-height: 126px;
    padding: 1.2rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-xs);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.metrics article::after {
    content: "";
    position: absolute;
    right: -22px;
    bottom: -24px;
    width: 78px;
    height: 78px;
    border-radius: 999px;
    background: rgba(0, 196, 140, .06);
}

.metrics article:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 196, 140, .28);
    box-shadow: var(--shadow-sm);
}

.metrics span {
    display: block;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 750;
}

.metrics strong {
    display: block;
    margin-top: .48rem;
    color: var(--primary);
    font-family: Montserrat, Inter, sans-serif;
    font-size: 1.9rem;
    letter-spacing: -.04em;
}

.grid-two {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 1.15rem;
}

.panel,
.action-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .97);
    box-shadow: var(--shadow-xs);
}

.panel { overflow: hidden; }

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 76px;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, #fbfdfd);
}

.panel-head h2 {
    margin: 0;
    font-size: 1.04rem;
}

.panel-head a,
.search-bar a {
    color: var(--accent-hover);
    font-size: .79rem;
    font-weight: 850;
    text-decoration: none;
}

.panel-head a:hover,
.search-bar a:hover { text-decoration: underline; }

.tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .32rem .6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 750;
}

.table-wrap { overflow: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

th {
    padding: .74rem 1rem;
    background: #f8fafc;
    color: var(--muted);
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-align: left;
    text-transform: uppercase;
}

td {
    padding: .86rem 1rem;
    border-top: 1px solid #edf2f7;
    vertical-align: middle;
}

tbody tr { transition: background-color .16s ease; }
tbody tr:hover { background: #fbfefd; }

td strong,
td small { display: block; }

td strong { color: var(--primary); }

td small {
    margin-top: .22rem;
    color: var(--muted);
}

.status {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: .25rem .52rem;
    border-radius: 999px;
    background: #edf2f4;
    color: #526675;
    font-size: .66rem;
    font-weight: 850;
    text-transform: capitalize;
}

.status.active,
.status.resolved,
.status.paid {
    background: var(--surface-accent);
    color: #137354;
}

.status.pending,
.status.warning,
.status.in-progress {
    background: #fff4dc;
    color: #966000;
}

.status.suspended,
.status.overdue,
.status.urgent,
.status.critical {
    background: #ffebe8;
    color: #a42a20;
}

.alert-list { padding: .35rem 1.2rem; }

.alert-list article {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .72rem;
    align-items: center;
    padding: .9rem 0;
    border-bottom: 1px solid #edf1f3;
}

.alert-list article:last-child { border: 0; }

.alert-list strong,
.alert-list p { display: block; margin: 0; }

.alert-list strong { color: var(--primary); }

.alert-list p {
    margin-top: .2rem;
    color: var(--muted);
    font-size: .71rem;
}

.severity {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #7d8d97;
}

.severity.warning { background: #e39b16; }
.severity.high,
.severity.critical { background: #d9382a; }

.empty {
    padding: 1rem;
    color: var(--muted);
    text-align: center;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 1rem;
}

.search-bar input {
    flex: 1;
    max-width: 420px;
}

.action-panel { margin: 0 0 1rem; }

.action-panel summary {
    cursor: pointer;
    padding: 1rem 1.2rem;
    color: var(--primary);
    font-family: Montserrat, Inter, sans-serif;
    font-size: .88rem;
    font-weight: 850;
    list-style-position: inside;
}

.action-panel[open] summary {
    border-bottom: 1px solid var(--line);
    background: var(--surface-accent-soft);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.2rem;
}

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

.form-actions {
    display: flex;
    align-items: end;
}

.check {
    display: flex !important;
    grid-template-columns: auto 1fr !important;
    align-items: center;
    align-content: center;
}

.check input { width: auto; min-height: 0; }

.inline-form {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.inline-form select { min-width: 120px; }

.spaced { margin-top: 1rem; }

.cards-list { display: grid; }

.record-card {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(420px, 2fr);
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.2rem;
    border-top: 1px solid #edf1f3;
    transition: background-color .16s ease;
}

.record-card:first-child { border-top: 0; }
.record-card:hover { background: #fbfefd; }

.record-card > div > strong,
.record-card > div > small { display: block; }

.record-card > div > strong { color: var(--primary); }

.record-card small {
    margin-top: .28rem;
    color: var(--muted);
}

.record-form {
    display: grid;
    grid-template-columns: repeat(5, minmax(100px, 1fr)) auto;
    gap: .6rem;
    align-items: end;
}

.ticket-card {
    grid-template-columns: minmax(250px, .8fr) minmax(560px, 2fr);
}

.ticket-form { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
.ticket-form .wide { grid-column: span 2; }
.alert-title { display: flex; align-items: center; gap: .65rem; }
.grid-two > .action-panel { height: max-content; }

@media (max-width: 1200px) {
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .record-card,
    .ticket-card { grid-template-columns: 1fr; }
    .record-form { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
}

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

    .login-shell {
        grid-template-columns: 1fr;
        background:
            radial-gradient(circle at 12% 14%, rgba(0, 196, 140, .18), transparent 29%),
            linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 39%, #f4f7fb 39%);
    }

    .login-brand { padding: 3rem 8vw 6rem; }
    .login-brand h1 { font-size: clamp(2.5rem, 7vw, 3.7rem); }
    .login-card { margin: -3rem auto 3rem; }
}

@media (max-width: 760px) {
    body { font-size: 16px; line-height: 1.6; }

    .app-shell { grid-template-columns: 1fr; }

    .sidebar {
        position: sticky;
        top: 0;
        z-index: 50;
        height: auto;
        padding: .85rem 1rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        box-shadow: 0 12px 30px rgba(0, 17, 45, .16);
    }

    .brand { padding: 0; }

    .mobile-menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        min-height: 44px;
        padding: .58rem .78rem;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 12px;
        background: rgba(255, 255, 255, .06);
        color: #fff;
        box-shadow: none;
    }

    .mobile-menu-button:hover {
        transform: none;
        border-color: rgba(0, 196, 140, .28);
        background: rgba(0, 196, 140, .12);
        color: #fff;
        box-shadow: none;
    }

    .sidebar-navigation {
        display: none;
        grid-column: 1 / -1;
        padding-top: .8rem;
    }

    .sidebar-navigation.is-open {
        display: block;
    }

    .nav-label { margin-top: 0; }

    .sidebar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .42rem;
    }

    .sidebar nav a {
        justify-content: center;
        min-height: 48px;
        text-align: center;
    }

    .sidebar nav a:hover { transform: translateY(-1px); }

    .sidebar-footer { display: none; }

    .content { padding: 1.15rem; }

    .topbar {
        align-items: flex-start;
        gap: 1rem;
        min-height: 0;
    }

    .user-menu {
        display: grid;
        justify-items: end;
        gap: .45rem;
    }

    .user-identity span { display: none; }

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

    .form-grid,
    .form-grid.compact,
    .record-form,
    .ticket-form { grid-template-columns: 1fr; }

    .ticket-form .wide { grid-column: auto; }

    .search-bar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .search-bar input { max-width: none; }
    .inline-form { flex-wrap: wrap; }

    input, select, textarea { font-size: 16px; }
}

@media (max-width: 520px) {
    .metrics { grid-template-columns: 1fr; }
    .sidebar nav { grid-template-columns: 1fr 1fr; }
    .sidebar nav a { padding-inline: .55rem; font-size: .8rem; }

    .topbar { display: grid; }
    .topbar h1 { font-size: 1.55rem; }
    .user-menu { justify-items: start; }
    .user-identity { justify-items: start; }

    .login-card { width: calc(100% - 2rem); padding: 1.6rem; }
    .login-brand { padding: 2.4rem 1.25rem 5.3rem; }
    .login-brand h1 { font-size: 2.25rem; }
    .login-brand > p:not(.eyebrow) { font-size: .98rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}


/* DRAMS Client Portal */
.client-shell .sidebar {
    background:
        radial-gradient(circle at 16% 8%, rgba(0, 196, 140, .18), transparent 24%),
        linear-gradient(180deg, #00112d, #001842 72%, #00245f);
}

.client-org {
    display: grid;
    gap: .2rem;
    margin: 0 .35rem 1.2rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(0, 196, 140, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .055);
}

.client-org small {
    color: #7f9bb5;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.client-org strong {
    color: #fff;
    font-size: .86rem;
}

.client-org span {
    color: var(--accent-light);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.org-switcher {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.org-switcher select {
    min-width: 190px;
    min-height: 38px;
    padding: .45rem .7rem;
    border-radius: 999px;
}

.portal-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    margin-bottom: 1.2rem;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border: 1px solid rgba(0, 196, 140, .18);
    border-radius: var(--radius-lg);
    color: #fff;
    background:
        radial-gradient(circle at 86% 20%, rgba(0, 196, 140, .20), transparent 28%),
        linear-gradient(130deg, var(--primary-dark), var(--primary));
    box-shadow: var(--shadow-sm);
}

.portal-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(0, 196, 140, .08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 196, 140, .08) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(90deg, transparent 35%, #000);
}

.portal-hero > * { position: relative; z-index: 1; }

.portal-hero h2 {
    margin: .15rem 0 .65rem;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.65rem);
}

.portal-hero p:not(.eyebrow) {
    max-width: 720px;
    margin: 0;
    color: #cfdae8;
    line-height: 1.7;
}

.portal-hero .eyebrow { color: var(--accent-light); }

.portal-hero-badge {
    min-width: 190px;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(10px);
}

.portal-hero-badge span,
.portal-hero-badge strong,
.portal-hero-badge small { display: block; }

.portal-hero-badge span {
    color: #8fa9c1;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.portal-hero-badge strong {
    margin: .35rem 0;
    color: var(--accent-light);
    font-family: Montserrat, Inter, sans-serif;
    font-size: 1rem;
}

.portal-hero-badge small { color: #dbe5ee; }

.client-service-list { padding: .35rem 1.2rem; }

.client-service-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid #edf1f3;
}

.client-service-list article:last-child { border-bottom: 0; }

.client-service-list strong,
.client-service-list small { display: block; }

.client-service-list strong { color: var(--primary); }

.client-service-list small {
    margin-top: .2rem;
    color: var(--muted);
}

.service-meta {
    display: grid;
    justify-items: end;
    gap: .25rem;
    text-align: right;
}

.portal-support-callout {
    padding: 1.4rem 1.3rem 1.55rem;
}

.portal-support-callout h3 {
    margin: 0 0 .55rem;
    font-size: 1.22rem;
}

.portal-support-callout p {
    margin: 0 0 1.2rem;
    color: var(--muted);
    line-height: 1.7;
}

.portal-cta {
    display: inline-flex;
    text-decoration: none;
}

.portal-policy-note {
    margin: 1rem 0 0;
    padding: .8rem 1rem;
    border: 1px solid #dce9e5;
    border-radius: var(--radius-sm);
    background: var(--surface-accent-soft);
    color: var(--muted-strong);
    font-size: .78rem;
}

.client-support-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.client-support-form .wide-field { grid-column: span 2; }
.client-support-form .full-field { grid-column: 1 / -1; }

.status.urgent,
.status.high {
    background: #ffebe8;
    color: #a42a20;
}

.status.normal {
    background: var(--surface-accent);
    color: #137354;
}

.status.low {
    background: #edf2f4;
    color: #526675;
}

@media (max-width: 1050px) {
    .portal-hero { grid-template-columns: 1fr; }
    .portal-hero-badge { width: min(100%, 260px); }
    .client-support-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .client-org {
        display: grid;
        margin: 0 0 .8rem;
    }
    .org-switcher { width: 100%; }
    .org-switcher select { flex: 1; min-width: 0; }
    .client-service-list article { align-items: flex-start; }
    .service-meta { justify-items: start; text-align: left; }
    .client-support-form { grid-template-columns: 1fr; }
    .client-support-form .wide-field,
    .client-support-form .full-field { grid-column: auto; }
}

@media (max-width: 520px) {
    .portal-hero { padding: 1.35rem; }
    .client-service-list article { display: grid; }
}


.table-link {
    color: var(--primary);
    text-decoration: none;
}

.table-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.account-details { padding: 1.15rem 1.25rem; }

.account-details dl {
    display: grid;
    gap: .85rem;
    margin: 0;
}

.account-details dl > div {
    display: grid;
    grid-template-columns: minmax(110px, .45fr) 1fr;
    gap: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #edf1f3;
}

.account-details dl > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.account-details dt {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
}

.account-details dd {
    margin: 0;
    color: var(--primary);
    font-weight: 700;
}

.client-team-list { padding: .35rem 1.2rem; }

.client-team-list article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    padding: .85rem 0;
    border-bottom: 1px solid #edf1f3;
}

.client-team-list article:last-child { border-bottom: 0; }

.client-team-list strong,
.client-team-list small { display: block; }

.client-team-list strong { color: var(--primary); }

.client-team-list small {
    margin-top: .18rem;
    color: var(--muted);
}

.team-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--surface-accent);
    color: var(--accent-hover);
    font-family: Montserrat, Inter, sans-serif;
    font-weight: 900;
}

.ticket-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 1rem;
    padding: 1.3rem 1.4rem;
}

.ticket-summary h2 {
    margin: 0 0 .35rem;
    font-size: 1.35rem;
}

.ticket-summary p:not(.eyebrow) {
    margin: 0;
    color: var(--muted);
}

.ticket-summary-meta {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ticket-thread { margin-bottom: 1rem; }

.message-list {
    display: grid;
    gap: .9rem;
    padding: 1.2rem;
}

.message-list article {
    max-width: min(760px, 88%);
    padding: 1rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.message-list article.from-client {
    justify-self: end;
    border-color: rgba(0, 196, 140, .22);
    background: var(--surface-accent-soft);
}

.message-list article.from-drams {
    justify-self: start;
    background: #f8fafc;
}

.message-list header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .55rem;
}

.message-list header strong {
    color: var(--primary);
    font-size: .78rem;
}

.message-list time {
    color: var(--muted);
    font-size: .68rem;
}

.message-list p {
    margin: 0;
    color: var(--ink);
    line-height: 1.7;
    white-space: pre-wrap;
}

.ticket-reply { overflow: hidden; }

.ticket-reply form {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
}

.ticket-reply label {
    display: grid;
    gap: .42rem;
    color: var(--muted-strong);
    font-size: .76rem;
    font-weight: 800;
}

.ticket-reply button {
    justify-self: start;
}

@media (max-width: 760px) {
    .account-details dl > div { grid-template-columns: 1fr; gap: .25rem; }
    .ticket-summary { display: grid; }
    .ticket-summary-meta { justify-content: flex-start; }
    .message-list article { max-width: 100%; }
}

@media (max-width: 520px) {
    .client-team-list article { grid-template-columns: auto 1fr; }
    .client-team-list .service-meta { grid-column: 2; }
}


.inline-reset {
    margin-top: .55rem;
}

.inline-reset summary {
    cursor: pointer;
    color: var(--accent-hover);
    font-size: .72rem;
    font-weight: 850;
}

.reset-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr)) auto;
    gap: .55rem;
    align-items: end;
    margin-top: .65rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}

.reset-form label {
    display: grid;
    gap: .35rem;
    color: var(--muted-strong);
    font-size: .7rem;
    font-weight: 800;
}

@media (max-width: 760px) {
    .reset-form { grid-template-columns: 1fr; }
}