body {
    min-height: 100vh
}

.brand-logo {
    display: block;
    height: auto
}

.brand-logo-header {
    width: 10.5rem;
    max-height: 2.65rem;
    object-fit: contain;
    object-position: left center
}

.brand-logo-auth {
    width: min(17rem, 100%);
    max-height: 4.25rem;
    object-fit: contain
}

.nav-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: .5rem;
    padding: .55rem .75rem;
    color: #475569;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none
}

.nav-link:hover {
    background: #f8fafc;
    color: #1e293b
}

.nav-link.active {
    background: #eef2ff;
    color: #4f46e5
}

.nav-link svg,
.icon-button svg,
.primary svg,
.secondary svg {
    width: 1rem;
    height: 1rem
}

.icon-button {
    display: grid;
    place-items: center;
    height: 2.25rem;
    width: 2.25rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: #475569
}

.icon-button:hover {
    background: #f1f5f9
}

.badge {
    position: absolute;
    top: .2rem;
    right: .15rem;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .12rem;
    border: 2px solid white;
    border-radius: 9999px;
    background: #e11d48;
    color: white;
    font-size: .55rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap
}

.avatar {
    display: grid;
    place-items: center;
    height: 2rem;
    width: 2rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #d99a77, #5d426d);
    color: white;
    font-size: .65rem;
    font-weight: 700
}

.menu,
.notification-menu {
    position: absolute;
    right: 0;
    top: 2.7rem;
    padding: .35rem;
    border: 1px solid #e2e8f0;
    border-radius: .6rem;
    background: white;
    box-shadow: 0 14px 32px #0f172a18
}

.menu {
    width: 9.5rem
}

.menu a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    border-radius: .35rem;
    color: #475569;
    font-size: .8rem;
    text-decoration: none
}

.menu a:hover {
    background: #f8fafc
}

.menu svg {
    width: 1rem
}

.menu hr {
    border: 0;
    border-top: 1px solid #e2e8f0
}

.notification-menu {
    width: min(22rem, calc(100vw - 2rem));
    padding: .35rem
}

.notification-menu-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .65rem .45rem;
    color: #0f172a;
    font-size: .8rem;
    font-weight: 700
}

.notification-list {
    max-height: 22rem;
    overflow-y: auto
}

.notification-item {
    display: grid;
    grid-template-columns: .5rem minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: start;
    padding: .65rem;
    color: #475569
}

.notification-item.unread {
    background: #f8fafc
}

.notification-empty {
    margin: 0;
    padding: 1rem .65rem;
    color: #64748b;
    font-size: .75rem;
    text-align: center
}

.notification-count {
    color: #4f46e5;
    font-size: .68rem;
    font-weight: 600
}

.notification-menu a,
.notification-item {
    display: grid;
    grid-template-columns: .5rem minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: start;
    padding: .65rem;
    border-radius: .45rem;
    color: #475569;
    text-decoration: none
}

.notification-menu a:hover {
    background: #f8fafc
}

.notification-menu b,
.notification-menu small {
    display: block
}

.notification-menu b {
    color: #334155;
    font-size: .75rem
}

.notification-menu small {
    margin-top: .15rem;
    color: #64748b;
    font-size: .68rem;
    line-height: 1.25
}

.notification-menu time {
    color: #94a3b8;
    font-size: .65rem
}

.notification-dot {
    width: .45rem;
    height: .45rem;
    margin-top: .3rem;
    border-radius: 999px
}

.notification-menu .notification-view-all {
    display: block;
    border-top: 1px solid #e2e8f0;
    padding: .65rem;
    border-radius: 0;
    text-align: center;
    color: #4f46e5;
    font-size: .72rem;
    font-weight: 600
}

.client-otp-modal {
    position: fixed;
    z-index: 50;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: #0f172a99
}

.client-otp-dialog {
    width: min(100%, 27rem);
    border-radius: .9rem;
    padding: 1.5rem;
    background: #fff;
    box-shadow: 0 24px 48px #0f172a40
}

.client-otp-dialog h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.25rem
}

.client-otp-dialog > p {
    margin: .5rem 0 1.25rem;
    color: #64748b;
    font-size: .85rem
}

.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 0;
    border-radius: .5rem;
    background: #4f46e5;
    padding: .65rem .85rem;
    color: white;
    font-size: .82rem;
    font-weight: 600;
    box-shadow: 0 4px 10px #4f46e52b
}

.primary:hover {
    background: #4338ca
}

.secondary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid #e2e8f0;
    border-radius: .45rem;
    background: white;
    padding: .45rem .6rem;
    color: #475569;
    font-size: .75rem;
    font-weight: 600
}

.secondary svg {
    width: .85rem
}

.card {
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    background: white;
    box-shadow: 0 1px 2px #0f172a08
}

.icon-tile {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .6rem
}

.icon-tile svg {
    width: 1.2rem
}

.icon-tile.indigo {
    background: #eef2ff;
    color: #4f46e5
}

.icon-tile.violet {
    background: #f5f3ff;
    color: #7c3aed
}

.icon-tile.sky {
    background: #f0f9ff;
    color: #0284c7
}

.icon-tile.emerald {
    background: #ecfdf5;
    color: #059669
}

.site-footer {
    margin-top: 2rem;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: .75rem
}

.auth-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1.5rem;
    background: radial-gradient(circle at 90% 0, #e0e7ff 0, transparent 35%), #f8fafc
}

.auth-panel {
    width: 100%;
    max-width: 28rem
}

.form-alert,
.form-notice {
    position: relative;
    margin-bottom: 1rem;
    border-radius: .5rem;
    padding: .7rem 2.25rem .7rem .75rem;
    font-size: .75rem;
    line-height: 1.4;
    transition: opacity .2s ease, transform .2s ease
}

.form-alert {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c
}

.form-notice {
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857
}

.alert-close {
    position: absolute;
    top: .35rem;
    right: .45rem;
    border: 0;
    background: transparent;
    color: currentColor;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer
}

.alert-leaving {
    opacity: 0;
    transform: translateY(-.25rem)
}

.field {
    display: grid;
    gap: .4rem;
    color: #334155;
    font-size: .78rem;
    font-weight: 600
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    padding: .7rem .75rem;
    color: #0f172a;
    font-size: .875rem;
    font-weight: 400;
    outline: 0
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px #e0e7ff
}

.check {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    color: #64748b;
    font-size: .75rem
}

.permission-switch {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #475569;
    font-size: .8rem;
    font-weight: 600
}

.permission-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap
}

.permission-switch-track {
    position: relative;
    display: inline-block;
    width: 2.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background .18s ease
}

.permission-switch-track::after {
    position: absolute;
    top: .18rem;
    left: .18rem;
    width: .99rem;
    height: .99rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px #0f172a33;
    content: '';
    transition: transform .18s ease
}

.permission-switch input:checked + .permission-switch-track {
    background: #4f46e5
}

.permission-switch input:checked + .permission-switch-track::after {
    transform: translateX(1rem)
}

.permission-switch input:focus-visible + .permission-switch-track {
    outline: 3px solid #c7d2fe;
    outline-offset: 2px
}

.check input {
    margin-top: .1rem;
    accent-color: #4f46e5
}

.check a {
    color: #4f46e5;
    text-decoration: none
}

.divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0;
    color: #94a3b8;
    font-size: .7rem
}

.divider:before,
.divider:after {
    content: '';
    height: 1px;
    flex: 1;
    background: #e2e8f0
}

.social {
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    background: white;
    padding: .6rem;
    color: #475569;
    font-size: .8rem;
    font-weight: 600
}

.social:hover {
    background: #f8fafc
}

.portal-page {
    min-height: 100vh;
    background: #f8fafc;
    color: #172033;
    font-family: Arial, sans-serif
}

.portal-shell {
    width: min(100% - 2rem, 118rem);
    margin: 0 auto
}

.portal-helpbar {
    background: #414141;
    color: #fff;
    font-size: .75rem
}

.portal-helpbar .portal-shell {
    padding: .5rem 1rem;
    text-align: right
}

.portal-helpbar a {
    margin-left: .45rem;
    color: #ffd354;
    text-decoration: none
}

.portal-helpbar span {
    margin: 0 .45rem;
    color: #a3a3a3
}

.portal-header {
    border-bottom: 1px solid #1198df;
    background: #fff
}

.portal-header-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 4.85rem
}

.portal-logo {
    width: 17rem;
    max-height: 4.15rem;
    object-fit: contain;
    object-position: left center
}

.portal-header h1 {
    margin: 0;
    color: #1f2937;
    font-size: 1.55rem;
    font-weight: 400;
    text-transform: uppercase
}

.portal-contact {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: .35rem;
    color: #1f2937;
    text-decoration: none;
    font-size: 1rem
}

.portal-contact svg {
    width: 1.1rem
}

.portal-content {
    padding: 1.6rem 0 3.25rem
}

.portal-grid {
    display: grid;
    gap: 0.95rem
}

.portal-grid-top {
    grid-template-columns: 1.9fr .9fr .9fr
}

.portal-grid-bottom {
    grid-template-columns: 1.4fr 1fr;
    margin-top: 2.5rem
}

.portal-card {
    min-height: 9rem;
    border: 1px solid #d9dfe5;
    background: #fff;
    box-shadow: 0 1px 2px #0f172a1f
}

.portal-grid-top .portal-card {
    min-height: 25rem
}

.portal-card h2 {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    background: #086aa6;
    padding: .58rem .75rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 700
}

.portal-card h2 svg {
    width: 1.15rem
}

.portal-card-body {
    padding: 1rem .8rem
}

.portal-news {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin: 1rem 0;
    color: #f10c17;
    font-size: 1rem;
    font-weight: 700
}

.portal-news svg {
    width: 1.2rem;
    color: #202939
}

.portal-field {
    display: grid;
    gap: .55rem;
    margin: .1rem 0 2.25rem;
    font-size: 1rem
}

.portal-field input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    padding: .5rem 0;
    color: #172033;
    font-size: 1rem;
    outline: 0
}

.portal-field input:focus {
    border-color: #079ee3
}

.portal-button {
    border: 0;
    border-radius: .25rem;
    background: #079ee3;
    padding: .55rem .95rem;
    color: #fff;
    font-size: .9rem;
    cursor: pointer
}

.portal-button:hover {
    background: #087db5
}

.portal-check {
    display: block;
    margin: -.5rem 0 1rem;
    font-size: .95rem
}

.portal-check input {
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: -.15rem
}

.portal-actions {
    display: flex;
    align-items: center;
    gap: .8rem
}

.portal-actions a,
.portal-links a {
    color: #086aa6;
    font-size: .8rem;
    text-decoration: none
}

.lawfirst-login .form-alert {
    margin-top: -.4rem
}

.portal-instruction {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1.55rem
}

.portal-instruction svg {
    width: 1.15rem
}

.portal-instruction p {
    margin: 0;
    font-size: 1rem
}

.portal-links {
    display: flex;
    gap: 1.3rem;
    padding: 1.4rem
}

.portal-footer {
    background: #0870ac;
    padding: .72rem;
    color: #fff;
    text-align: center;
    font-size: .9rem
}

@media(max-width:900px) {
    .portal-header-content {
        grid-template-columns: 1fr auto
    }

    .portal-header h1 {
        display: none
    }

    .portal-grid-top,
    .portal-grid-bottom {
        grid-template-columns: 1fr;
        gap: 1.25rem
    }

    .portal-grid-top .portal-card {
        min-height: auto
    }

    .portal-content {
        padding: 1.5rem 0
    }

    .portal-logo {
        width: 14rem
    }

    .portal-helpbar .portal-shell {
        text-align: center
    }

    .portal-contact {
        font-size: .8rem
    }
}

@media(max-width:520px) {
    .portal-header-content {
        min-height: 4rem
    }

    .portal-logo {
        width: 11rem
    }

    .portal-contact {
        font-size: 0
    }

    .portal-contact svg {
        width: 1.35rem;
        height: 1.35rem
    }

    .portal-helpbar {
        font-size: .65rem
    }

    .portal-grid-top .welcome-card {
        min-height: 12rem
    }
}

.portal-page {
    background: #f8fafc;
    color: #0f172a;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif
}

.portal-helpbar {
    background: #0f172a;
    color: #cbd5e1;
    font-size: .75rem
}

.portal-helpbar a {
    color: #a5b4fc
}

.portal-helpbar span {
    color: #475569
}

.portal-header {
    border-bottom-color: #e2e8f0
}

.portal-header h1 {
    color: #0f172a;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -.025em;
    text-transform: none
}

.portal-contact {
    color: #475569;
    font-size: .875rem
}

.portal-card {
    border-color: #e2e8f0;
    border-radius: .50rem;
    box-shadow: 0 1px 2px #0f172a08;
    overflow: hidden
}

.portal-card h2 {
    background: #4f46e5;
    padding: .72rem .9rem;
    font-size: .875rem
}

.portal-card-body {
    padding: 1.15rem
}

.portal-news {
    margin: .4rem 0;
    color: #4f46e5;
    font-size: .875rem
}

.portal-news svg {
    color: #4f46e5
}

.portal-field {
    gap: .4rem;
    margin: .1rem 0 1.6rem;
    color: #334155;
    font-size: .78rem;
    font-weight: 600
}

.portal-field input {
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    padding: .7rem .75rem;
    color: #0f172a;
    font-family: inherit;
    font-size: .875rem
}

.portal-field input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px #e0e7ff
}

.portal-button {
    border-radius: .5rem;
    background: #4f46e5;
    padding: .65rem .9rem;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    box-shadow: 0 4px 10px #4f46e52b
}

.portal-button:hover {
    background: #4338ca
}

.portal-check {
    color: #64748b;
    font-size: .75rem
}

.portal-check input {
    accent-color: #4f46e5
}

.portal-actions a,
.portal-links a {
    color: #4f46e5;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 600
}

.portal-instruction {
    padding: 1.25rem
}

.portal-instruction svg {
    color: #4f46e5
}

.portal-instruction p {
    color: #475569;
    font-size: .875rem
}

.portal-links {
    padding: 1.25rem
}

.portal-footer {
    background: #0f172a;
    padding: .9rem;
    color: #cbd5e1;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: .75rem
}

.portal-grid-top .portal-card {
    min-height: 23rem
}

.welcome-card h2 {
    background: #4f46e5
}

.client-card h2 {
    background: #0284c7
}

.lawfirst-login h2 {
    background: #0f766e
}

.instructions-card h2 {
    background: #475569
}

.links-card h2 {
    background: #7c3aed
}

.client-card .portal-button {
    background: #0284c7;
    box-shadow: 0 4px 10px #0284c72b
}

.client-card .portal-button:hover {
    background: #0369a1
}

.lawfirst-login .portal-button {
    background: #0f766e;
    box-shadow: 0 4px 10px #0f766e2b
}

.lawfirst-login .portal-button:hover {
    background: #115e59
}

.lawfirst-login .portal-field input:focus {
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px #ccfbf1
}

.lawfirst-login .portal-check input {
    accent-color: #0f766e
}

.lawfirst-login .portal-actions a {
    color: #0f766e
}

.instructions-card .portal-instruction svg {
    color: #475569
}

.links-card .portal-links a {
    color: #7c3aed
}

.portal-captcha {
    margin: -.3rem 0 1rem;
    border: 1px solid #ccfbf1;
    border-radius: .5rem;
    background: #f0fdfa;
    padding: .65rem
}

.portal-captcha>span {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: #115e59;
    font-size: .72rem
}

.portal-captcha>span svg {
    width: .95rem;
    height: .95rem
}

.portal-captcha .portal-field {
    margin: .6rem 0 0
}

.portal-captcha .portal-field input {
    background: #fff
}