:root {
    color-scheme: dark;
    --bg: #060d14;
    --bg-soft: #0a1520;
    --panel: rgba(12, 26, 39, .88);
    --panel-strong: #0d1b29;
    --line: rgba(247, 212, 23, .16);
    --line-strong: rgba(247, 212, 23, .48);
    --text: #f4f8fb;
    --muted: #93a7b7;
    --cyan: #f7d417;
    --cyan-soft: #ffe96a;
    --orange: #27b6d6;
    --orange-soft: #79dced;
    --danger: #ff657a;
    --warning: #ffc857;
    --radius: 22px;
    --shadow: 0 30px 80px rgba(0, 0, 0, .36);
    --font: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 74% 8%, rgba(39, 182, 214, .13), transparent 31rem),
        radial-gradient(circle at 18% 92%, rgba(247, 212, 23, .08), transparent 32rem),
        var(--bg);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

button,
input,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(247, 212, 23, .58);
    outline-offset: 3px;
}

.company-brand img {
    display: block;
    width: min(340px, 82%);
    height: auto;
    margin-bottom: 13px;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .35));
}

/* Login */

.login-page {
    overflow-x: hidden;
}

.login-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(480px, 1.04fr) minmax(460px, .96fr);
}

.login-hero {
    position: relative;
    display: flex;
    min-height: 100vh;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(34px, 5vw, 76px);
    isolation: isolate;
    background:
        radial-gradient(circle at 54% 45%, rgba(247, 212, 23, .11), transparent 27rem),
        linear-gradient(145deg, #07111a 0%, #0a1822 52%, #071017 100%);
    border-right: 1px solid var(--line);
}

.login-hero::before,
.portal-main::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .34;
    background-image:
        linear-gradient(rgba(247, 212, 23, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(247, 212, 23, .04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom right, black, transparent 76%);
}

.hero-grid {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .62;
    background:
        linear-gradient(125deg, transparent 0 48%, rgba(247, 212, 23, .08) 49%, transparent 50%),
        linear-gradient(32deg, transparent 0 58%, rgba(39, 182, 214, .06) 59%, transparent 60%);
}

.hero-orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.hero-orb-one {
    width: 32rem;
    height: 32rem;
    top: 15%;
    left: 11%;
    border: 1px solid rgba(247, 212, 23, .11);
    box-shadow: 0 0 100px rgba(247, 212, 23, .04) inset;
}

.hero-orb-two {
    width: 18rem;
    height: 18rem;
    right: -5rem;
    bottom: -3rem;
    border: 1px solid rgba(39, 182, 214, .14);
}

.login-brand,
.sidebar-brand > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.login-brand {
    width: 100%;
    align-items: center;
    text-align: center;
}

.brand-kicker,
.section-eyebrow,
.menu-label,
.section-heading span,
.portal-summary span,
.card-content > span {
    color: var(--cyan);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.login-brand strong,
.sidebar-brand strong {
    margin-top: 6px;
    font-size: clamp(1.45rem, 2vw, 2rem);
    letter-spacing: -.05em;
}

.login-brand strong span,
.sidebar-brand strong span,
.login-heading h1 span,
.portal-header h1 span {
    color: var(--cyan);
}

.hero-logo-wrap {
    position: relative;
    display: grid;
    width: min(56vh, 620px);
    max-width: 88%;
    margin: 12px auto;
    place-items: center;
}

.hero-logo-wrap::after {
    content: none;
}

.hero-logo-wrap img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(1.08) contrast(1.04) drop-shadow(0 24px 48px rgba(247, 212, 23, .12));
}

.hero-brand-lockup {
    display: grid;
    width: min(76%, 550px);
    margin: 12px auto;
    justify-items: center;
    gap: clamp(12px, 2.1vh, 22px);
}

.hero-tropical-logo {
    display: block;
    width: 100%;
    max-width: 500px;
    height: auto;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .28));
}

.hero-brand-divider {
    display: flex;
    width: min(82%, 365px);
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffe66b;
}

.hero-brand-divider span {
    display: block;
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, rgba(247, 212, 23, .72));
}

.hero-brand-divider span:last-child {
    background: linear-gradient(90deg, rgba(247, 212, 23, .72), transparent);
}

.hero-brand-divider small {
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .16em;
    white-space: nowrap;
}

.hero-console-brand {
    display: grid;
    justify-items: center;
    color: #ffffff;
}

.hero-console-brand img {
    display: block;
    width: min(28vh, 230px);
    min-width: 136px;
    height: auto;
    margin-bottom: -10px;
    filter: saturate(1.08) contrast(1.04) drop-shadow(0 20px 38px rgba(39, 182, 214, .20));
}

.hero-console-brand strong {
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    letter-spacing: .1em;
}

.hero-console-brand strong span {
    color: #ffd100;
}

.hero-console-brand small {
    margin-top: 2px;
    color: #c7d9f0;
    font-size: .69rem;
    letter-spacing: .08em;
}

.hero-copy {
    max-width: 620px;
}

.hero-line {
    display: block;
    width: 64px;
    height: 3px;
    margin-bottom: 20px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--orange), var(--cyan));
}

.hero-copy p {
    margin: 0 0 7px;
    font-size: clamp(1rem, 1.7vw, 1.3rem);
    font-weight: 700;
}

.hero-copy small {
    color: var(--muted);
    font-size: .91rem;
}

.login-panel {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: clamp(28px, 6vw, 96px);
    place-items: center;
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 212, 23, .07), transparent 24rem),
        linear-gradient(160deg, rgba(9, 20, 30, .98), rgba(6, 13, 20, .98));
}

.login-panel::before {
    position: absolute;
    top: 0;
    right: 11%;
    left: 11%;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--cyan), var(--orange), transparent);
}

.login-card {
    width: min(100%, 550px);
    padding: clamp(26px, 4.5vw, 54px);
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(14, 31, 45, .94), rgba(9, 21, 31, .94));
    box-shadow: var(--shadow), 0 1px 0 rgba(255, 255, 255, .04) inset;
}

.login-heading {
    margin-bottom: 34px;
}

.mini-mark {
    display: flex;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid rgba(33, 212, 229, .32);
    border-radius: 13px;
    background: rgba(33, 212, 229, .07);
}

.mini-mark i {
    display: block;
    width: 4px;
    border-radius: 99px;
    background: var(--cyan);
}

.mini-mark i:nth-child(1) { height: 8px; }
.mini-mark i:nth-child(2) { height: 17px; }
.mini-mark i:nth-child(3) { height: 12px; background: var(--orange); }

.login-heading p {
    margin: 0 0 9px;
    color: var(--cyan);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .17em;
}

.login-heading h1 {
    margin: 0 0 10px;
    font-size: clamp(1.8rem, 3.2vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -.045em;
}

.login-heading small {
    color: var(--muted);
    font-size: .97rem;
}

.login-form {
    display: grid;
    gap: 21px;
}

.login-form label > span {
    display: block;
    margin-bottom: 9px;
    color: #dbe7ed;
    font-size: .82rem;
    font-weight: 750;
}

.input-wrap {
    position: relative;
    display: flex;
    min-height: 58px;
    align-items: center;
    border: 1px solid rgba(132, 199, 217, .24);
    border-radius: 15px;
    background: rgba(4, 13, 20, .72);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.input-wrap:focus-within {
    border-color: var(--cyan);
    box-shadow: 0 0 0 4px rgba(33, 212, 229, .09);
}

.input-icon {
    width: 52px;
    color: var(--cyan);
    text-align: center;
    font-size: .72rem;
}

.input-icon.lock {
    color: var(--orange);
}

.input-wrap input {
    width: 100%;
    height: 56px;
    padding: 0 14px 0 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
}

.input-wrap input::placeholder {
    color: #607788;
}

.password-toggle {
    height: 34px;
    margin-right: 11px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 800;
}

.password-toggle:hover {
    color: var(--cyan-soft);
}

.primary-button {
    display: flex;
    min-height: 58px;
    margin-top: 5px;
    padding: 0 22px;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 15px;
    color: #031116;
    background: linear-gradient(102deg, #22d7e4, #63e9e8 54%, #ff8a42);
    box-shadow: 0 15px 34px rgba(22, 190, 206, .18);
    cursor: pointer;
    font-weight: 850;
    transition: transform .18s, box-shadow .18s;
}

.primary-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 19px 42px rgba(22, 190, 206, .27);
}

.primary-button b {
    font-size: 1.3rem;
}

.primary-button:disabled {
    cursor: not-allowed;
    filter: grayscale(.8);
    opacity: .48;
}

.form-alert {
    margin: -12px 0 22px;
    padding: 13px 15px;
    border: 1px solid;
    border-radius: 12px;
    font-size: .82rem;
    line-height: 1.5;
}

.form-alert.error {
    color: #ffc0ca;
    border-color: rgba(255, 101, 122, .34);
    background: rgba(255, 101, 122, .08);
}

.form-alert.warning {
    color: #ffe5a4;
    border-color: rgba(255, 200, 87, .34);
    background: rgba(255, 200, 87, .08);
}

.form-alert.success {
    color: #a7f7dc;
    border-color: rgba(74, 222, 163, .35);
    background: rgba(74, 222, 163, .08);
}

.login-security {
    display: flex;
    margin-top: 28px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #718696;
    font-size: .72rem;
}

.login-security span,
.status-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #49dca8;
    box-shadow: 0 0 14px rgba(73, 220, 168, .8);
}

.login-help {
    display: grid;
    margin-top: 22px;
    gap: 6px;
    text-align: center;
}

.login-help a {
    color: var(--cyan-soft);
    font-size: .78rem;
    font-weight: 800;
}

.login-help a:hover { text-decoration: underline; }
.login-help small { color: #718696; font-size: .67rem; line-height: 1.45; }

/* Portal */

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

.portal-sidebar {
    position: sticky;
    z-index: 30;
    top: 0;
    display: flex;
    height: 100vh;
    padding: 26px 18px 20px;
    flex-direction: column;
    border-right: 1px solid var(--line);
    background:
        radial-gradient(circle at 30% 17%, rgba(33, 212, 229, .1), transparent 14rem),
        linear-gradient(180deg, rgba(8, 21, 31, .98), rgba(5, 13, 20, .99));
    box-shadow: 16px 0 45px rgba(0, 0, 0, .16);
}

.sidebar-brand {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 13px;
}

.sidebar-brand img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 9px 18px rgba(0, 0, 0, .4));
}

.company-sidebar-brand {
    min-height: 92px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

.company-sidebar-brand > img {
    width: 218px;
    height: auto;
    max-height: 48px;
    object-fit: contain;
    object-position: left center;
}

.company-sidebar-brand > div {
    flex-direction: row;
    align-items: baseline;
    gap: 7px;
}

.company-sidebar-brand strong { font-size: .84rem; letter-spacing: -.02em; }
.company-sidebar-brand small { margin: 0; font-size: .62rem; }

.sidebar-brand strong {
    margin: 0;
    font-size: 1.15rem;
}

.sidebar-brand small {
    margin-top: 4px;
    color: var(--muted);
    font-size: .67rem;
}

.sidebar-divider {
    height: 1px;
    margin: 19px 0 23px;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.menu-label {
    margin: 0 10px 12px;
    color: #60798a;
    font-size: .61rem;
}

.area-menu {
    display: grid;
    gap: 7px;
}

.area-link {
    display: grid;
    min-height: 51px;
    padding: 7px 11px;
    align-items: center;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #9bb0bf;
    transition: background .18s, border-color .18s, color .18s, transform .18s;
}

.area-link > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(132, 199, 217, .16);
    border-radius: 10px;
    color: #bcd1dc;
    background: rgba(255, 255, 255, .035);
    font-size: .68rem;
    font-weight: 850;
}

.area-link strong {
    overflow: hidden;
    font-size: .84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.area-link > b {
    font-size: 1.2rem;
}

.area-link:hover:not(.disabled) {
    color: var(--text);
    border-color: rgba(33, 212, 229, .14);
    background: rgba(33, 212, 229, .05);
    transform: translateX(2px);
}

.area-link.active {
    color: #effdff;
    border-color: rgba(33, 212, 229, .4);
    background: linear-gradient(98deg, rgba(33, 212, 229, .17), rgba(33, 212, 229, .04));
    box-shadow: 0 12px 26px rgba(0, 0, 0, .14), 3px 0 0 var(--cyan) inset;
}

.area-link.active > span {
    color: #031318;
    border-color: transparent;
    background: var(--cyan);
}

.area-link.disabled {
    min-height: 44px;
    opacity: .42;
}

.area-link.disabled small {
    font-size: .54rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.sidebar-admin {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.admin-link {
    color: #ffd5bd;
    border-color: rgba(255, 122, 50, .14);
    background: rgba(255, 122, 50, .035);
}

.admin-link > span {
    color: var(--orange-soft);
    border-color: rgba(255, 122, 50, .24);
}

.sidebar-account {
    display: grid;
    margin-top: auto;
    padding: 13px;
    align-items: center;
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
}

.sidebar-avatar,
.header-avatar {
    display: grid;
    place-items: center;
    border: 1px solid rgba(33, 212, 229, .3);
    border-radius: 50%;
    color: var(--cyan-soft);
    background: rgba(33, 212, 229, .09);
    font-weight: 800;
}

.sidebar-avatar {
    width: 38px;
    height: 38px;
}

.sidebar-account > div:nth-child(2) {
    min-width: 0;
}

.sidebar-account strong,
.sidebar-account small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-account strong {
    font-size: .73rem;
}

.sidebar-account small {
    margin-top: 3px;
    color: var(--muted);
    font-size: .62rem;
}

.sidebar-account form,
.sidebar-account button {
    width: 30px;
    height: 30px;
}

.sidebar-account button {
    border: 0;
    border-radius: 8px;
    color: #ff9ba9;
    background: rgba(255, 101, 122, .08);
    cursor: pointer;
}

.portal-main {
    position: relative;
    z-index: 0;
    min-width: 0;
    overflow: hidden;
    padding: clamp(24px, 3.5vw, 54px);
}

.portal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 34px;
}

.portal-header h1 {
    margin: 8px 0 7px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -.055em;
}

.portal-header p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: .94rem;
}

.header-user {
    display: grid;
    min-width: 285px;
    padding: 11px 13px;
    align-items: center;
    grid-template-columns: 8px 42px minmax(0, 1fr) auto;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(12, 26, 39, .72);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

.header-avatar {
    width: 42px;
    height: 42px;
}

.header-user strong,
.header-user small {
    display: block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-user strong { font-size: .74rem; }
.header-user small { margin-top: 3px; color: var(--muted); font-size: .62rem; }
.header-user a { color: var(--cyan); font-size: .68rem; font-weight: 800; }

.menu-toggle {
    display: none;
}

.portal-summary {
    display: grid;
    margin: clamp(30px, 4vw, 50px) 0;
    padding: 19px 24px;
    align-items: center;
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(100deg, rgba(33, 212, 229, .055), rgba(255, 122, 50, .025));
}

.portal-alert {
    margin: 28px 0 -15px;
}

.portal-summary > div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 13px;
}

.portal-summary strong {
    font-size: 1.05rem;
}

.portal-summary > i {
    height: 32px;
    background: var(--line);
}

.section-heading {
    display: flex;
    margin-bottom: 24px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
}

.section-heading h2 {
    margin: 6px 0 0;
    font-size: clamp(1.35rem, 2.3vw, 2rem);
    letter-spacing: -.035em;
}

.section-heading p {
    max-width: 440px;
    margin: 0;
    color: var(--muted);
    font-size: .79rem;
    text-align: right;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(16px, 2vw, 26px);
}

.dashboard-card {
    position: relative;
    display: flex;
    min-height: 285px;
    overflow: hidden;
    padding: 22px;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(16, 35, 50, .94), rgba(8, 20, 30, .96));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .16), 0 1px 0 rgba(255, 255, 255, .035) inset;
}

.dashboard-card.featured {
    grid-column: span 1;
    border-color: rgba(33, 212, 229, .34);
    transition: transform .22s, border-color .22s, box-shadow .22s;
}

.dashboard-card.featured:hover {
    transform: translateY(-5px);
    border-color: rgba(33, 212, 229, .66);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .28), 0 0 42px rgba(33, 212, 229, .07);
}

.dashboard-card.featured::before {
    position: absolute;
    width: 260px;
    height: 260px;
    top: -110px;
    right: -80px;
    content: "";
    border: 1px solid rgba(33, 212, 229, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(33, 212, 229, .025), 0 0 0 76px rgba(33, 212, 229, .018);
}

.card-glow {
    position: absolute;
    right: -10%;
    bottom: -45%;
    width: 70%;
    height: 80%;
    border-radius: 50%;
    background: rgba(33, 212, 229, .09);
    filter: blur(55px);
}

.card-top,
.card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(33, 212, 229, .37);
    border-radius: 15px;
    color: #031318;
    background: linear-gradient(140deg, var(--cyan), #99f4f7);
    box-shadow: 0 12px 30px rgba(33, 212, 229, .15);
    font-size: 1.55rem;
    font-weight: 800;
}

.card-icon.muted {
    color: var(--muted);
    border-color: var(--line);
    background: rgba(255, 255, 255, .035);
    box-shadow: none;
}

.card-top small {
    color: #78d9b7;
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.card-content {
    position: relative;
    z-index: 1;
    margin: auto 0;
}

.card-content h3 {
    margin: 10px 0 12px;
    font-size: clamp(1.45rem, 2vw, 1.8rem);
    line-height: 1.06;
    letter-spacing: -.045em;
}

.placeholder .card-content h3 {
    font-size: 1.55rem;
}

.card-content p {
    max-width: 590px;
    margin: 0;
    color: var(--muted);
    font-size: .87rem;
    line-height: 1.65;
}

.card-footer {
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--cyan-soft);
    font-size: .78rem;
    font-weight: 800;
}

.card-footer b {
    font-size: 1.35rem;
    transition: transform .2s;
}

.dashboard-card.featured:hover .card-footer b {
    transform: translateX(4px);
}

.dashboard-card.placeholder {
    opacity: .52;
}

.empty-access {
    padding: clamp(30px, 6vw, 70px);
    border: 1px dashed rgba(132, 199, 217, .25);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .018);
    text-align: center;
}

.empty-access > span {
    color: var(--orange-soft);
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .16em;
}

.empty-access h3 { margin: 12px 0 8px; font-size: 1.45rem; }
.empty-access p { margin: 0; color: var(--muted); font-size: .84rem; }

.portal-footer {
    display: flex;
    margin-top: clamp(40px, 7vw, 90px);
    padding-top: 21px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    color: #536b7b;
    font-size: .7rem;
}

.portal-footer span {
    color: #78909f;
    font-weight: 750;
}

.menu-backdrop {
    display: none;
}

/* Change password */

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

.account-shell {
    width: min(100%, 560px);
}

.account-card {
    width: 100%;
    padding: clamp(25px, 5vw, 48px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.back-link {
    display: inline-flex;
    margin-bottom: 26px;
    color: var(--cyan);
    font-size: .75rem;
    font-weight: 800;
}

.account-brand {
    display: flex;
    margin-bottom: 25px;
    align-items: center;
    gap: 12px;
}

.account-brand img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, .35));
}

.account-brand strong {
    font-size: 1.1rem;
    letter-spacing: -.04em;
}

.account-brand strong span {
    color: var(--cyan);
}

.account-company-brand {
    display: flex;
    min-height: 48px;
    margin-bottom: 26px;
    align-items: center;
}

.account-company-brand img {
    display: block;
    width: 230px;
    max-width: 72%;
    height: auto;
}

.password-rule {
    margin-top: -9px;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.45;
}

.denied-card .primary-button {
    margin-top: 24px;
}

/* User administration */

.admin-page {
    min-height: 100vh;
    padding: clamp(22px, 4vw, 58px);
}

.admin-shell {
    width: min(100%, 1380px);
    margin: 0 auto;
}

.admin-header {
    position: relative;
    margin-bottom: 30px;
}

.admin-brand-row {
    display: flex;
    margin-bottom: 26px;
    align-items: center;
    gap: 18px;
}

.admin-brand-row img {
    width: 225px;
    height: auto;
}

.admin-brand-row > span {
    padding-left: 18px;
    border-left: 1px solid var(--line-strong);
    color: #9db3c1;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.admin-brand-row > span strong { color: var(--cyan); }
.admin-header .back-link { position: absolute; top: 11px; right: 0; }
.admin-header h1 { margin: 8px 0 8px; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.055em; }
.admin-header > p { margin: 0; color: var(--muted); }

.admin-alert { margin: 0 0 24px; }

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

.admin-summary > div {
    padding: 19px 21px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(12, 26, 39, .72);
}

.admin-summary span,
.admin-section-heading > div > span {
    display: block;
    color: var(--cyan);
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .14em;
}

.admin-summary strong { display: block; margin-top: 8px; font-size: 1.55rem; }

.admin-panel {
    margin-bottom: 42px;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(14, 31, 45, .9), rgba(9, 21, 31, .94));
    box-shadow: 0 22px 55px rgba(0, 0, 0, .18);
}

.admin-section-heading {
    display: flex;
    margin-bottom: 24px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.admin-section-heading h2 { margin: 7px 0 0; font-size: 1.5rem; letter-spacing: -.035em; }
.admin-section-heading p { max-width: 520px; margin: 0; color: var(--muted); font-size: .77rem; text-align: right; }

.admin-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.admin-field { display: grid; gap: 8px; }
.admin-field > span { color: #dbe7ed; font-size: .76rem; font-weight: 750; }

.admin-field input {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border: 1px solid rgba(132, 199, 217, .22);
    border-radius: 12px;
    outline: 0;
    color: var(--text);
    background: rgba(4, 13, 20, .72);
}

.admin-field input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 4px rgba(33, 212, 229, .08);
}

.permission-fieldset {
    display: grid;
    grid-column: 1 / -1;
    margin: 4px 0 0;
    padding: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    border: 1px solid var(--line);
    border-radius: 15px;
}

.permission-fieldset legend {
    padding: 0 8px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
}

.check-card,
.switch-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
}

.check-card {
    min-height: 74px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

.check-card.role-check { border-color: rgba(255, 122, 50, .23); }
.check-card input,
.switch-row input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--cyan); }
.check-card strong,
.check-card small,
.switch-row strong,
.switch-row small { display: block; }
.check-card strong,
.switch-row strong { font-size: .76rem; }
.check-card small,
.switch-row small { margin-top: 4px; color: var(--muted); font-size: .65rem; line-height: 1.4; }

.admin-submit { grid-column: 1 / -1; width: min(100%, 380px); }

.user-list { display: grid; gap: 16px; }

.user-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: rgba(12, 26, 39, .82);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .13);
}

.user-card.inactive { opacity: .68; }

.user-card-head {
    display: grid;
    padding: 17px 20px;
    align-items: center;
    grid-template-columns: 44px minmax(160px, 1fr) auto;
    gap: 13px;
    border-bottom: 1px solid var(--line);
}

.user-avatar {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(33, 212, 229, .3);
    border-radius: 50%;
    color: var(--cyan-soft);
    background: rgba(33, 212, 229, .08);
    font-weight: 850;
}

.user-card-head > div:nth-child(2) strong,
.user-card-head > div:nth-child(2) small { display: block; }
.user-card-head > div:nth-child(2) strong { font-size: .88rem; }
.user-card-head > div:nth-child(2) small { margin-top: 4px; color: var(--muted); font-size: .68rem; }

.user-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.badge { padding: 5px 8px; border: 1px solid; border-radius: 99px; font-size: .58rem; font-weight: 850; letter-spacing: .04em; }
.badge.admin { color: #ffd0b5; border-color: rgba(255,122,50,.3); background: rgba(255,122,50,.08); }
.badge.active { color: #a7f7dc; border-color: rgba(74,222,163,.3); background: rgba(74,222,163,.07); }
.badge.inactive { color: #ffc0ca; border-color: rgba(255,101,122,.3); background: rgba(255,101,122,.07); }
.badge.pending { color: #ffe5a4; border-color: rgba(255,200,87,.3); background: rgba(255,200,87,.07); }

.user-card-body {
    display: grid;
    padding: 19px 20px;
    grid-template-columns: minmax(230px, .75fr) minmax(0, 2fr);
    gap: 25px;
}

.user-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 11px;
}

.switch-row {
    min-height: 65px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .02);
}

.switch-row.locked { cursor: not-allowed; opacity: .68; }
.switch-row.reset-row { border-color: rgba(255, 200, 87, .2); }

.user-card-footer {
    display: flex;
    padding: 13px 20px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, .08);
}

.user-card-footer small { color: #6f8595; font-size: .64rem; }
.user-card-footer button {
    min-height: 39px;
    padding: 0 16px;
    border: 1px solid rgba(33, 212, 229, .32);
    border-radius: 10px;
    color: var(--cyan-soft);
    background: rgba(33, 212, 229, .08);
    cursor: pointer;
    font-size: .7rem;
    font-weight: 850;
}

.user-card-footer button:hover { border-color: var(--cyan); background: rgba(33, 212, 229, .13); }

.account-card .input-wrap input {
    padding-left: 16px;
}

.account-card h1 {
    margin: 7px 0 8px;
    font-size: 2rem;
    letter-spacing: -.04em;
}

.account-card > p {
    margin: 0 0 30px;
    color: var(--muted);
    font-size: .86rem;
}

@media (max-width: 1120px) {
    .login-shell {
        grid-template-columns: .9fr 1.1fr;
    }

    .login-hero,
    .login-panel {
        padding: 38px;
    }

    .portal-shell {
        grid-template-columns: 250px minmax(0, 1fr);
    }

    .portal-header {
        flex-wrap: wrap;
    }

    .header-user {
        width: 100%;
    }

    .dashboard-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

    .dashboard-card.featured {
        grid-column: span 1;
    }

    .admin-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-card-body { grid-template-columns: 1fr; }
    .user-controls { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

@media (max-width: 820px) {
    .login-shell {
        display: block;
    }

    .login-hero {
        min-height: 390px;
        padding: 28px;
    }

    .hero-logo-wrap {
        width: 250px;
        margin: 18px auto;
    }

    .hero-copy {
        display: none;
    }

    .login-panel {
        min-height: auto;
        padding: 32px 20px 50px;
    }

    .portal-shell {
        display: block;
    }

    .portal-sidebar {
        position: fixed;
        width: min(86vw, 310px);
        left: 0;
        transform: translateX(-105%);
        transition: transform .24s ease;
    }

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

    .menu-backdrop {
        position: fixed;
        z-index: 20;
        inset: 0;
        background: rgba(2, 8, 12, .72);
        backdrop-filter: blur(4px);
    }

    .menu-backdrop.open {
        display: block;
    }

    .menu-toggle {
        display: grid;
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 12px;
        color: var(--cyan);
        background: var(--panel);
        cursor: pointer;
        font-size: 1.25rem;
    }

    .portal-main {
        padding: 24px 20px 35px;
    }

    .portal-header {
        align-items: flex-start;
        justify-content: flex-start;
        gap: 15px;
    }

    .portal-header > div:nth-child(2) {
        width: calc(100% - 60px);
    }

    .header-user {
        width: 100%;
        min-width: 0;
    }

    .portal-summary {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .portal-summary > i {
        width: 100%;
        height: 1px;
    }

    .portal-summary > div {
        justify-content: space-between;
    }

    .section-heading {
        display: block;
    }

    .section-heading p {
        margin-top: 10px;
        text-align: left;
    }

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

    .dashboard-card {
        min-height: 310px;
    }

    .admin-page { padding: 22px 18px 38px; }
    .admin-header .back-link { display: flex; width: max-content; position: static; margin-bottom: 24px; }
    .admin-header .section-eyebrow { display: block; }
    .admin-brand-row { margin-bottom: 20px; }
    .admin-form { grid-template-columns: 1fr; }
    .permission-fieldset { grid-template-columns: 1fr; }
    .admin-section-heading { display: block; }
    .admin-section-heading p { margin-top: 9px; text-align: left; }
    .user-card-head { grid-template-columns: 44px minmax(0, 1fr); }
    .user-badges { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 520px) {
    .login-hero {
        min-height: 310px;
    }

    .login-brand strong {
        font-size: 1.35rem;
    }

    .hero-logo-wrap {
        width: 195px;
    }

    .login-card {
        padding: 24px 20px;
        border-radius: 21px;
    }

    .login-heading {
        margin-bottom: 27px;
    }

    .portal-header h1 {
        font-size: 1.9rem;
    }

    .portal-header p {
        font-size: .8rem;
    }

    .header-user {
        grid-template-columns: 7px 38px minmax(0, 1fr) auto;
        padding: 9px;
    }

    .header-avatar {
        width: 38px;
        height: 38px;
    }

    .portal-summary {
        margin: 25px 0 33px;
        padding: 16px;
    }

    .dashboard-card {
        min-height: 330px;
        padding: 21px;
    }

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

    .company-brand img { width: 255px; }
    .admin-brand-row { align-items: flex-start; flex-direction: column; gap: 9px; }
    .admin-brand-row img { width: 205px; }
    .admin-brand-row > span { padding: 0; border: 0; }
    .admin-summary { grid-template-columns: 1fr 1fr; gap: 9px; }
    .admin-summary > div { padding: 14px; }
    .user-controls { grid-template-columns: 1fr; }
    .user-card-footer { align-items: stretch; flex-direction: column; }
    .user-card-footer button { width: 100%; }
}

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

/* Identidade Distribuidora Ebano — paleta dos dashboards Cortes/Compras. */
:root {
    color-scheme: light;
    --bg: #f4f6f9;
    --bg-soft: #eef1f6;
    --panel: #ffffff;
    --panel-strong: #ffffff;
    --line: #e5e7eb;
    --line-strong: #d7dce5;
    --text: #172033;
    --muted: #6b7280;
    --cyan: #002f6c;
    --cyan-soft: #1f4fd8;
    --orange: #ffd100;
    --orange-soft: #ffe66b;
    --shadow: 0 18px 48px rgba(0, 47, 108, .12);
}

html,
body {
    background:
        radial-gradient(circle at 82% 8%, rgba(45, 156, 219, .08), transparent 30rem),
        var(--bg);
}

.login-hero,
.portal-sidebar {
    color: #ffffff;
    background:
        radial-gradient(circle at 65% 28%, rgba(45, 156, 219, .18), transparent 24rem),
        linear-gradient(150deg, #0b1220 0%, #002f6c 100%);
}

.login-hero::before,
.portal-main::before {
    background-image:
        linear-gradient(rgba(255, 209, 0, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 209, 0, .045) 1px, transparent 1px);
}

.brand-kicker,
.login-hero .brand-kicker { color: #ffd100; }
.hero-logo-wrap { width: min(70vh, 820px); max-width: 98%; }
.hero-logo-wrap img { filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .34)); }
.hero-line { background: linear-gradient(90deg, #ffd100, #2d9cdb); }
.hero-copy small,
.company-sidebar-brand small,
.sidebar-account small { color: #cbd5e1; }

.login-panel {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 209, 0, .13), transparent 24rem),
        #f4f6f9;
}

.login-panel::before { background: linear-gradient(90deg, transparent, #002f6c, #ffd100, transparent); }

.login-card,
.account-card,
.admin-panel,
.admin-summary > div,
.user-card,
.header-user,
.portal-summary,
.dashboard-card {
    color: #172033;
    border-color: #e5e7eb;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.login-card,
.admin-panel,
.account-card { border-top: 4px solid #ffd100; }
.mini-mark { border-color: rgba(0, 47, 108, .18); background: rgba(0, 47, 108, .06); }
.mini-mark i { background: #002f6c; }
.mini-mark i:nth-child(3) { background: #ffd100; }
.login-heading p,
.section-eyebrow,
.section-heading span,
.portal-summary span,
.card-content > span,
.admin-summary span,
.admin-section-heading > div > span,
.back-link { color: #002f6c; }
.login-heading h1 span,
.portal-header h1 span { color: #1f4fd8; }

.login-form label > span,
.admin-field > span { color: #172033; }
.input-wrap,
.admin-field input { color: #172033; border-color: #d7dce5; background: #ffffff; }
.input-wrap input,
.admin-field input { color: #172033; }
.input-wrap input::placeholder { color: #94a3b8; }
.input-wrap:focus-within,
.admin-field input:focus { border-color: #1f4fd8; box-shadow: 0 0 0 4px rgba(31, 79, 216, .10); }
.input-icon { color: #002f6c; }
.input-icon.lock { color: #d5ad00; }
.password-toggle { color: #475569; background: #eef1f6; }
.password-toggle:hover { color: #002f6c; }

.primary-button {
    color: #ffffff;
    background: linear-gradient(135deg, #002f6c, #1f4fd8);
    box-shadow: 0 15px 34px rgba(0, 47, 108, .22);
}
.primary-button b { color: #ffd100; }
.primary-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #00265a, #1943bd);
    box-shadow: 0 19px 42px rgba(0, 47, 108, .26);
}
.login-help a { color: #002f6c; }
.login-help small,
.login-security { color: #64748b; }

.portal-main { background: #f4f6f9; }
.portal-sidebar { border-right-color: rgba(255, 255, 255, .12); }
.company-sidebar-brand > img { width: 238px; max-height: 54px; }
.company-sidebar-brand strong { color: #ffffff; }
.menu-label { color: #93c5fd; }
.area-link { color: #cbd5e1; }
.area-link > span { color: #dbeafe; border-color: rgba(255,255,255,.13); }
.area-link:hover:not(.disabled) { color: #ffffff; border-color: rgba(255, 209, 0, .25); background: rgba(255, 209, 0, .08); }
.area-link.active {
    color: #ffffff;
    border-color: rgba(255, 209, 0, .52);
    background: linear-gradient(98deg, rgba(255, 209, 0, .20), rgba(255, 209, 0, .04));
    box-shadow: 3px 0 0 #ffd100 inset;
}
.area-link.active > span { color: #002f6c; background: #ffd100; }
.admin-link { color: #ffffff; border-color: rgba(45, 156, 219, .24); background: rgba(45, 156, 219, .08); }
.admin-link > span { color: #93c5fd; border-color: rgba(147, 197, 253, .25); }
.sidebar-account { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.055); }
.sidebar-avatar { color: #002f6c; border-color: #ffd100; background: #ffd100; }

.header-user,
.portal-summary { background: #ffffff; }
.portal-summary { border-left: 4px solid #ffd100; }
.status-pulse { background: #16a34a; }

.dashboard-card { min-height: 270px; border-top: 4px solid #ffd100; }
.dashboard-card.featured { border-color: #e5e7eb; border-top-color: #ffd100; }
.dashboard-card.featured:hover {
    border-color: #7c9aee;
    border-top-color: #ffd100;
    box-shadow: 0 24px 58px rgba(0, 47, 108, .18);
}
.dashboard-card.featured::before { border-color: rgba(0,47,108,.09); box-shadow: 0 0 0 38px rgba(0,47,108,.025), 0 0 0 76px rgba(255,209,0,.025); }
.card-glow { background: rgba(255, 209, 0, .10); }
.card-icon {
    color: #ffffff;
    border-color: #002f6c;
    background: linear-gradient(135deg, #002f6c, #1f4fd8);
    box-shadow: 0 12px 26px rgba(0, 47, 108, .20);
}
.card-top small { color: #15803d; }
.card-footer { color: #002f6c; }
.empty-access { border-color: #d7dce5; background: #ffffff; }
.empty-access > span { color: #002f6c; }
.portal-footer,
.portal-footer span { color: #6b7280; }

/* Portal compacto: leitura mais próxima do Portal Evo e ações sempre visíveis. */
.portal-page .portal-shell {
    grid-template-columns: 238px minmax(0, 1fr);
}

.portal-page .portal-sidebar {
    overflow-y: auto;
    padding: 18px 14px 14px;
}

.portal-page .company-sidebar-brand {
    min-height: 72px;
    gap: 5px;
}

.portal-page .company-sidebar-brand > img {
    width: 188px;
    max-height: 43px;
}

.portal-page .console360-sidebar-brand {
    min-height: 108px;
    align-items: center;
    flex-direction: row;
    gap: 10px;
}

.portal-page .console360-sidebar-brand > img {
    width: 96px;
    height: 96px;
    max-height: none;
    border-radius: 18px;
    object-fit: cover;
}

.portal-page .console360-sidebar-brand > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
}

.portal-page .console360-sidebar-brand strong {
    font-size: .88rem;
    letter-spacing: .04em;
}

.portal-page .console360-sidebar-brand strong span { color: #22d3ee; }
.portal-page .console360-sidebar-brand small { font-size: .58rem; }

.portal-page .company-sidebar-brand strong { font-size: .72rem; }
.portal-page .company-sidebar-brand small { font-size: .56rem; }
.portal-page .sidebar-divider { margin: 12px 0 15px; }
.portal-page .menu-label { margin: 0 8px 8px; font-size: .55rem; }
.portal-page .area-menu { gap: 5px; }

.portal-page .area-link {
    min-height: 42px;
    padding: 5px 8px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
    border-radius: 11px;
}

.portal-page .area-link > span {
    width: 29px;
    height: 29px;
    border-radius: 8px;
    font-size: .59rem;
}

.portal-page .area-link strong { font-size: .72rem; }
.portal-page .area-link > b { font-size: 1rem; }
.portal-page .area-link.disabled { min-height: 38px; }
.portal-page .area-link.disabled small { font-size: .48rem; }
.portal-page .sidebar-admin { margin-top: 15px; padding-top: 13px; }

.portal-page .sidebar-account {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 9px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 7px;
    border-radius: 12px;
    background: rgba(3, 27, 63, .96);
    box-shadow: 0 -10px 24px rgba(0, 20, 52, .25);
}

.portal-page .sidebar-avatar { width: 32px; height: 32px; font-size: .72rem; }
.portal-page .sidebar-account strong { font-size: .64rem; }
.portal-page .sidebar-account small { font-size: .55rem; }
.portal-page .sidebar-account form,
.portal-page .sidebar-account button { width: auto; height: 30px; }

.portal-page .sidebar-account button {
    display: inline-flex;
    padding: 0 9px;
    align-items: center;
    gap: 5px;
    color: #ffffff;
    border: 1px solid rgba(255, 101, 122, .32);
    background: rgba(255, 101, 122, .16);
    font-size: .6rem;
    font-weight: 800;
}

.portal-page .sidebar-account button strong { font-size: inherit; }
.portal-page .portal-main { padding: clamp(22px, 2.5vw, 38px); }
.portal-page .portal-header { gap: 24px; }

.portal-page .portal-header h1 {
    margin: 6px 0 5px;
    font-size: clamp(1.7rem, 2.65vw, 2.45rem);
    line-height: 1.08;
}

.portal-page .portal-header p { max-width: 620px; font-size: .8rem; }
.portal-page .section-eyebrow { font-size: .58rem; }

.portal-page .header-user {
    min-width: 265px;
    padding: 8px 10px;
    grid-template-columns: 7px 34px minmax(0, 1fr) auto auto;
    gap: 8px;
    border-radius: 13px;
}

.portal-page .header-avatar { width: 34px; height: 34px; font-size: .72rem; }
.portal-page .header-user strong { max-width: 130px; font-size: .64rem; }
.portal-page .header-user small { font-size: .55rem; }
.portal-page .header-user a { font-size: .6rem; }
.portal-page .header-logout { margin: 0; }

.portal-page .header-logout button {
    padding: 6px 8px;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    color: #b42335;
    background: #fff1f2;
    cursor: pointer;
    font-size: .6rem;
    font-weight: 800;
}

.portal-page .portal-summary {
    margin: clamp(20px, 2.6vw, 30px) 0;
    padding: 13px 18px;
    border-radius: 14px;
}

.portal-page .portal-summary > div { gap: 9px; }
.portal-page .portal-summary span { font-size: .55rem; }
.portal-page .portal-summary strong { font-size: .82rem; }
.portal-page .portal-summary > i { height: 25px; }
.portal-page .section-heading { margin-bottom: 17px; }
.portal-page .section-heading span { font-size: .57rem; }
.portal-page .section-heading h2 { margin-top: 4px; font-size: clamp(1.2rem, 1.7vw, 1.55rem); }
.portal-page .section-heading p { max-width: 390px; font-size: .7rem; }

.portal-page .dashboard-grid {
    grid-template-columns: repeat(auto-fill, minmax(215px, 280px));
    gap: 18px;
    align-items: stretch;
}

.portal-page .dashboard-card,
.portal-page .dashboard-card.featured {
    min-height: 245px;
    padding: 18px;
    border-radius: 18px;
}

.portal-page .card-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 1.25rem;
}

.portal-page .card-top small,
.portal-page .card-content > span { font-size: .53rem; }
.portal-page .card-content h3 { margin: 8px 0 9px; font-size: clamp(1.16rem, 1.45vw, 1.35rem); }
.portal-page .card-content p { font-size: .72rem; line-height: 1.55; }
.portal-page .card-footer { padding-top: 13px; font-size: .67rem; }
.portal-page .card-footer b { font-size: 1.1rem; }
.portal-page .portal-footer { margin-top: clamp(30px, 4vw, 55px); padding-top: 16px; font-size: .62rem; }

@media (max-width: 1120px) and (min-width: 821px) {
    .portal-page .portal-shell { grid-template-columns: 220px minmax(0, 1fr); }
    .portal-page .dashboard-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }
}

@media (max-width: 820px) {
    .portal-page .portal-shell { display: block; }
    .portal-page .portal-sidebar { width: min(84vw, 275px); }
    .portal-page .dashboard-grid { grid-template-columns: 1fr; }
    .portal-page .dashboard-card,
    .portal-page .dashboard-card.featured { min-height: 225px; }
    .portal-page .header-user { grid-template-columns: 7px 34px minmax(0, 1fr) auto auto; }
}

@media (max-width: 520px) {
    .portal-page .portal-main { padding: 18px 14px 28px; }
    .portal-page .portal-header h1 { font-size: 1.55rem; }
    .portal-page .portal-header p { font-size: .72rem; }
    .portal-page .header-user { grid-template-columns: 6px 32px minmax(0, 1fr) auto; }
    .portal-page .header-user > a { display: none; }
    .portal-page .dashboard-card,
    .portal-page .dashboard-card.featured { min-height: 215px; padding: 16px; }
}

.account-page,
.admin-page { background: #f4f6f9; }
.account-company-brand {
    display: inline-flex;
    width: fit-content;
    padding: 13px 20px;
    border: 1px solid rgba(255, 209, 0, .32);
    border-radius: 16px;
    background: linear-gradient(135deg, #0b1220, #002f6c);
    box-shadow: 0 14px 32px rgba(0, 47, 108, .18);
}
.account-company-brand img {
    width: 96px;
    max-width: 100%;
    max-height: 96px;
    object-fit: contain;
}
.admin-brand-row {
    width: fit-content;
    padding: 13px 18px;
    border: 1px solid rgba(255, 209, 0, .32);
    border-radius: 16px;
    background: linear-gradient(135deg, #0b1220, #002f6c);
    box-shadow: 0 14px 32px rgba(0, 47, 108, .18);
}
.admin-brand-row img {
    width: 104px;
    max-height: 104px;
    object-fit: contain;
}
.admin-brand-row > span { color: #ffffff; border-left-color: #ffd100; }
.check-card,
.switch-row { background: #f8fafc; }
.check-card.role-check { border-color: rgba(0,47,108,.22); }
.user-card-footer { background: #f8fafc; }
.user-avatar { color: #ffffff; border-color: #002f6c; background: #002f6c; }
.user-card-footer button { color: #ffffff; border-color: #002f6c; background: #002f6c; }
.user-card-footer button:hover { border-color: #1f4fd8; background: #1f4fd8; }
.badge.admin { color: #002f6c; border-color: rgba(0,47,108,.2); background: rgba(0,47,108,.07); }
.badge.active { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.badge.inactive { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
.badge.pending { color: #854d0e; border-color: #fde68a; background: #fffbeb; }

@media (max-width: 900px) {
    .hero-logo-wrap { width: min(76vw, 500px); }
    .company-sidebar-brand > img { width: 218px; }
}

@media (max-width: 520px) {
    .hero-logo-wrap { width: min(78vw, 310px); }
    .account-company-brand,
    .admin-brand-row { padding: 11px 14px; }
    .account-company-brand img,
    .admin-brand-row img { width: 88px; max-width: 100%; }
    .dashboard-card { min-height: 260px; }
}