:root {
    color-scheme: light;
    --surface: #f5f5f7;
    --card: #ffffff;
    --ink: #1d1d1f;
    --muted: #6e6e73;
    --line: #d2d2d7;
    --accent: #007aff;
    --accent-dark: #0062cc;
    --success: #1b8a4b;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--surface); font-size: 16px; line-height: 1.45; }
button, input { font: inherit; }

.auth-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 10%, rgba(0, 122, 255, .14), transparent 34rem),
        var(--surface);
}

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; }
.auth-card {
    width: min(100%, 460px);
    padding: clamp(28px, 6vw, 52px);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(210, 210, 215, .8);
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(29, 29, 31, .10);
    backdrop-filter: blur(18px);
}

.brand-mark, .portal-brand span, .module-card__icon {
    display: grid;
    place-items: center;
    background: var(--ink);
    color: white;
    font-weight: 700;
}
.brand-mark { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 30px; font-size: 24px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(30px, 6vw, 42px); line-height: 1.05; letter-spacing: -.035em; }
.auth-intro { margin: 18px 0 30px; color: var(--muted); line-height: 1.55; }
.auth-form { display: grid; gap: 10px; }
.auth-form label { margin-top: 8px; font-size: 17px; font-weight: 650; }
.auth-form input {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    outline: none;
}
.auth-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 122, 255, .13); }
.auth-form button {
    min-height: 52px;
    margin-top: 16px;
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    color: white;
    font-weight: 700;
    cursor: pointer;
}
.auth-form button:hover { background: var(--accent-dark); }
.otp-input { text-align: center; font-size: 27px !important; font-weight: 700; letter-spacing: .35em; }
.field-error { margin: 0; color: #c9262e; font-size: 16px; }
.password-help { margin: 2px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.field-success { margin: 0 0 18px; padding: 12px 14px; color: #176d3d; background: #eaf8ef; border-radius: 12px; font-size: 16px; line-height: 1.45; }
.auth-secondary-form { margin-top: 12px; }
.secondary-button {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--accent);
    background: var(--card);
    font-weight: 700;
    cursor: pointer;
}
.secondary-button:hover { border-color: var(--accent); background: #f7fbff; }
.secondary-button--link { display: inline-grid; place-items: center; padding: 0 16px; text-decoration: none; }
.security-note { margin: 24px 0 0; color: var(--muted); font-size: 16px; text-align: center; }
.secondary-link { display: block; margin-top: 24px; color: var(--accent); text-align: center; text-decoration: none; }

.portal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px clamp(20px, 5vw, 72px);
    background: rgba(245, 245, 247, .86);
    border-bottom: 1px solid rgba(210, 210, 215, .8);
    backdrop-filter: blur(18px);
}
.portal-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 750; text-decoration: none; }
.portal-brand span { width: 34px; height: 34px; border-radius: 10px; }
.user-menu { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 17px; }
.user-menu a { color: var(--accent); text-decoration: none; }
.link-button { padding: 0; border: 0; color: var(--accent); background: transparent; cursor: pointer; }
.portal-main { width: min(100%, 1280px); margin: 0 auto; padding: clamp(28px, 5vw, 68px) clamp(20px, 5vw, 56px); }
.dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.dashboard-heading p:not(.eyebrow) { margin: 12px 0 0; color: var(--muted); }
.status-pill { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #eaf8ef; color: #176d3d; border-radius: 999px; font-size: 16px; font-weight: 650; white-space: nowrap; }
.status-pill span { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.module-card, .empty-state { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 12px 34px rgba(29, 29, 31, .05); }
.module-card { display: flex; align-items: center; gap: 16px; min-height: 132px; padding: 24px; transition: transform .2s ease, box-shadow .2s ease; }
.module-card:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(29, 29, 31, .09); }
.module-card__icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; }
.module-card__access { margin: 0 0 5px; color: var(--accent); font-size: 15px; font-weight: 700; text-transform: uppercase; }
.module-card h2, .empty-state h2 { margin: 0; font-size: 22px; }
.empty-state { padding: 36px; }
.empty-state p { max-width: 620px; margin: 10px 0 0; color: var(--muted); line-height: 1.55; }

.primary-action { min-height: 46px; padding: 0 18px; border: 0; border-radius: 13px; color: white; background: var(--accent); font-weight: 700; cursor: pointer; }
.primary-action:hover { background: var(--accent-dark); }
.configuration-note, .form-errors { margin: 0 0 22px; padding: 14px 16px; border-radius: 14px; line-height: 1.5; }
.configuration-note { color: #704c00; background: #fff6d8; border: 1px solid #f0d98d; }
.form-errors { color: #992129; background: #fff0f1; border: 1px solid #efc2c5; }
.form-errors p { margin: 0; }
.form-errors p + p { margin-top: 5px; }
.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.person-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 18px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--card); text-align: left; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.person-card:hover { transform: translateY(-2px); box-shadow: 0 15px 34px rgba(29, 29, 31, .08); }
.person-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: white; background: var(--ink); font-weight: 750; }
.person-summary { min-width: 0; }
.person-summary strong, .person-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-summary small { margin-top: 4px; color: var(--muted); }
.access-state { padding: 7px 10px; border-radius: 999px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.access-state--active { color: #176d3d; background: #eaf8ef; }
.access-state--invited { color: #704c00; background: #fff6d8; }
.access-state--suspended, .access-state--archived { color: #8b252b; background: #fff0f1; }
.portal-dialog { width: min(calc(100% - 28px), 680px); max-height: calc(100vh - 28px); padding: 26px; border: 1px solid var(--line); border-radius: 24px; color: var(--ink); background: var(--card); box-shadow: 0 30px 90px rgba(29, 29, 31, .28); }
.portal-dialog::backdrop { background: rgba(29, 29, 31, .44); backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.dialog-heading h2 { margin: 0; font-size: 26px; letter-spacing: -.025em; }
.dialog-close { width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--muted); background: var(--surface); font-size: 24px; cursor: pointer; }
.settings-form { display: grid; gap: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid label, .settings-form > label { display: grid; gap: 7px; color: var(--muted); font-size: 16px; font-weight: 650; }
.form-grid__wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .settings-form > label select { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--card); }
.dialog-secondary-action { margin-top: 12px; }
.secondary-button:disabled { opacity: .5; cursor: not-allowed; }
.admin-actions { display: flex; align-items: center; gap: 10px; }
.access-back-link { margin: 0; }
.access-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.access-picker__card, .access-matrix-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 12px 34px rgba(29, 29, 31, .05); }
.access-picker__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 260px); align-items: center; gap: 12px 18px; padding: 22px; }
.access-picker__card .secondary-button { grid-column: 2; }
.access-picker__card h2, .access-matrix-heading h2 { margin: 0; font-size: 21px; }
.access-picker__card p:not(.eyebrow), .access-matrix-heading p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); font-size: 17px; line-height: 1.45; }
.access-picker__card label, .access-matrix-footer label, .access-row__select { display: grid; gap: 6px; color: var(--muted); font-size: 15px; font-weight: 700; }
.access-picker select, .access-row select, .access-matrix-footer input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--card); }
.access-matrix-card { overflow: hidden; }
.access-matrix-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 24px; border-bottom: 1px solid var(--line); }
.access-matrix { display: grid; }
.access-row { display: grid; grid-template-columns: minmax(210px, 1fr) auto minmax(180px, 230px); align-items: center; gap: 18px; min-height: 72px; padding: 12px 24px; border-bottom: 1px solid #ececf0; }
.access-row--sector { margin-top: 10px; background: var(--surface); }
.access-row--sector:first-child { margin-top: 0; }
.access-row--sector .access-row__module strong { font-size: 19px; }
.access-row--module .access-row__module { padding-left: 18px; }
.access-row--submodule .access-row__module { padding-left: 38px; }
.access-row__module strong, .access-row__module small { display: block; }
.access-row__module small { margin-top: 3px; color: var(--muted); font-size: 14px; }
.access-effective { padding: 6px 9px; border-radius: 999px; font-size: 14px; font-weight: 750; white-space: nowrap; }
.access-effective--hidden { color: #8b252b; background: #fff0f1; }
.access-effective--view { color: #704c00; background: #fff6d8; }
.access-effective--manage { color: #176d3d; background: #eaf8ef; }
.access-matrix-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px; padding: 24px; background: #fbfbfd; }
.access-matrix-footer + .configuration-note, .access-matrix-card > .configuration-note { margin: 22px; }

@media (max-width: 900px) {
    .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .people-grid { grid-template-columns: 1fr; }
    .access-picker { grid-template-columns: 1fr; }
    .access-picker__card { grid-template-columns: minmax(0, 1fr) minmax(210px, 260px); }
}

@media (max-width: 620px) {
    .auth-shell { align-items: start; padding: 18px 12px; }
    .auth-card { border-radius: 22px; }
    .portal-header { align-items: flex-start; }
    .user-menu { align-items: flex-end; flex-direction: column; gap: 5px; }
    .dashboard-heading { align-items: flex-start; flex-direction: column; }
    .module-grid { grid-template-columns: 1fr; }
    .admin-heading .primary-action { width: 100%; }
    .admin-actions { width: 100%; flex-direction: column; }
    .admin-actions .secondary-button { width: 100%; }
    .person-card { grid-template-columns: auto minmax(0, 1fr); }
    .access-state { grid-column: 2; justify-self: start; }
    .portal-dialog { padding: 20px; border-radius: 20px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid__wide { grid-column: auto; }
    .access-picker__card { grid-template-columns: 1fr; }
    .access-picker__card .secondary-button { grid-column: auto; }
    .access-row { grid-template-columns: 1fr; gap: 10px; padding: 16px 18px; }
    .access-row--module .access-row__module, .access-row--submodule .access-row__module { padding-left: 0; }
    .access-effective { justify-self: start; }
    .access-matrix-heading { align-items: flex-start; flex-direction: column; }
    .access-matrix-footer { grid-template-columns: 1fr; }
    .access-matrix-footer .primary-action { width: 100%; }
}

/* Operational modules */
.module-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.module-heading h1 { font-size:clamp(30px,4vw,44px); }
.module-heading p:last-child { margin:9px 0 0; color:var(--muted); font-size:16px; }
.heading-actions { display:flex; gap:9px; }
.primary-action,.secondary-button,.text-button { width:auto; cursor:pointer; font-weight:750; }
.primary-action,.secondary-button { min-height:42px; padding:0 16px; border-radius:12px; }
.primary-action { border:1px solid var(--accent); color:#fff; background:var(--accent); }
.secondary-button { border:1px solid var(--line); color:var(--ink); background:#fff; }
.text-button { padding:6px 8px; border:0; color:var(--accent); background:transparent; }
.notice { margin:0 0 16px; padding:13px 15px; border-radius:13px; font-size:15px; }
.notice--success { color:#176d3d; background:#eaf8ef; }
.notice--error { color:#8b252b; background:#fff0f1; }
.notice ul { margin:7px 0 0; }
.metric-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.metric-strip article { padding:17px 18px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.metric-strip span,.metric-strip strong { display:block; }
.metric-strip span { color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; }
.metric-strip strong { margin-top:7px; font-size:22px; }
.data-card,.management-card { border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 10px 32px rgba(29,29,31,.045); }
.table-scroll { overflow:auto; }
.portal-table { width:100%; border-collapse:collapse; font-size:14px; }
.portal-table th { color:#75757a; background:#fafafa; font-size:12px; text-align:left; text-transform:uppercase; }
.portal-table th,.portal-table td { padding:14px 15px; border-bottom:1px solid #ececf0; vertical-align:middle; }
.portal-table td small,.portal-table td strong { display:block; }
.portal-table td small { margin-top:4px; color:var(--muted); }
.status-pill,.mini-chip { display:inline-flex; width:max-content; padding:5px 8px; border-radius:999px; color:#52606e; background:#f0f1f3; font-size:12px; font-weight:800; text-transform:capitalize; }
.status-pill--validated,.status-pill--active,.status-pill--approved,.status-pill--signed,.status-pill--closed { color:#176d3d; background:#e8f7f0; }
.status-pill--pending,.status-pill--open,.status-pill--draft,.status-pill--unconfigured,.status-pill--scheduled { color:#795817; background:#fff3dd; }
.status-pill--cancelled,.status-pill--rejected,.status-pill--suspended { color:#8b252b; background:#fff0f1; }
.empty-inline,.empty-state { padding:32px; text-align:center; }
.empty-inline strong,.empty-inline span { display:block; }
.empty-inline span,.empty-state p { margin-top:6px; color:var(--muted); font-size:14px; }
.empty-state { border:1px dashed var(--line); border-radius:18px; background:#fff; }
.empty-state h2 { margin:0; }
.portal-dialog { width:min(92vw,610px); max-height:88vh; padding:26px; overflow:auto; border:1px solid var(--line); border-radius:22px; box-shadow:0 28px 90px rgba(0,0,0,.22); }
.portal-dialog--wide { width:min(94vw,760px); }
.portal-dialog::backdrop { background:rgba(29,29,31,.42); backdrop-filter:blur(4px); }
.portal-dialog form,.portal-dialog > form { display:grid; gap:13px; }
.portal-dialog h2 { margin:0 0 5px; font-size:22px; }
.portal-dialog label,.filter-bar label,.radar-filters label { display:grid; gap:6px; color:var(--muted); font-size:13px; font-weight:750; }
.portal-dialog input,.portal-dialog select,.portal-dialog textarea,.filter-bar input,.filter-bar select,.radar-filters input,.radar-filters select,.stack-list input { width:100%; min-height:42px; padding:9px 11px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:#fff; }
.portal-dialog textarea { min-height:90px; resize:vertical; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.form-grid__wide { grid-column:1/-1; }
.check-label { display:flex!important; align-items:center; flex-direction:row; }
.check-label input { width:auto; min-height:0; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.dialog-actions > button:first-child { border:0; color:var(--muted); background:transparent; }
.filter-bar,.radar-filters { display:flex; align-items:end; gap:12px; padding:14px; border:1px solid var(--line); background:#fff; }
.filter-bar { border-width:0 0 1px; }
.filter-bar.standalone,.radar-filters { margin-bottom:16px; border-width:1px; border-radius:16px; }
.radar-filters .grow { flex:1; }
.two-column { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); gap:16px; }
.section-title { padding:18px; border-bottom:1px solid var(--line); }
.section-title h2 { margin:0; font-size:21px; }
.section-title p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.stack-list { display:grid; }
.stack-list article { display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid #ececf0; }
.stack-list article > div { min-width:0; flex:1; }
.stack-list strong,.stack-list span { display:block; }
.stack-list span,.stack-list p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.connection-banner { display:grid; gap:4px; margin-bottom:16px; padding:14px 16px; border:1px solid #cfe5fb; border-radius:14px; color:#0062cc; background:#f1f8ff; font-size:14px; }
.connection-banner span { color:#52606e; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.management-card { padding:18px; }
.management-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.management-card h2 { margin:10px 0 5px; font-size:20px; }
.management-card p,.management-card small { color:var(--muted); font-size:13px; line-height:1.5; }
.compact-metrics { display:flex; gap:7px; margin:15px 0; }
.compact-metrics span,.policy-list span { padding:7px 8px; border-radius:9px; background:#f5f5f7; font-size:12px; }
.policy-list { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.catalog-control { margin-bottom:16px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 10px 32px rgba(29,29,31,.04); }
.catalog-control > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 18px; cursor:pointer; list-style:none; }
.catalog-control > summary::-webkit-details-marker { display:none; }
.catalog-control > summary span:first-child { display:grid; gap:4px; }
.catalog-control > summary strong { font-size:18px; }
.catalog-control > summary small { color:var(--muted); font-size:12px; }
.summary-action { padding:7px 10px; border-radius:10px; color:var(--accent); background:#eef6ff; font-size:12px; font-weight:800; }
.catalog-control[open] .summary-action { color:#52606e; background:#f0f1f3; }
.catalog-control__body { display:grid; gap:16px; padding:0 18px 18px; border-top:1px solid #ececf0; }
.catalog-selection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding-top:18px; }
.catalog-selection-card { display:grid; align-content:space-between; gap:16px; padding:16px; border:1px solid var(--line); border-radius:16px; background:#fafafa; }
.catalog-selection-card h2,.active-selections h2 { margin:8px 0 5px; font-size:18px; }
.catalog-selection-card p,.active-selections p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.catalog-selection-card form,.catalog-search-form { display:flex; align-items:end; gap:9px; }
.catalog-selection-card label,.catalog-search-form label { display:grid; flex:1; gap:5px; color:var(--muted); font-size:12px; font-weight:750; }
.catalog-selection-card select,.catalog-search-form select,.catalog-search-form input { width:100%; min-height:42px; padding:9px 11px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:#fff; }
.catalog-search-form .grow { min-width:0; flex:1.35; }
.catalog-results { display:grid; gap:8px; }
.catalog-results article { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:13px; }
.catalog-results article > div:first-child { min-width:0; }
.catalog-results strong,.catalog-results small,.catalog-results span { display:block; }
.catalog-results small,.catalog-result-meta span { margin-top:4px; color:var(--muted); font-size:12px; }
.catalog-result-meta { min-width:92px; text-align:right; }
.active-selections { display:grid; gap:12px; padding-top:15px; border-top:1px solid #ececf0; }
.active-selections > header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.selection-chips { display:flex; flex-wrap:wrap; gap:9px; }
.selection-chips article { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; min-width:min(100%,310px); padding:10px; border:1px solid var(--line); border-radius:12px; }
.selection-chips strong,.selection-chips small { display:block; }
.selection-chips small { margin-top:3px; color:var(--muted); font-size:12px; }
.danger-link { border:0; color:#b0252d; background:transparent; cursor:pointer; }
.catalog-empty-copy { width:100%; padding:14px; border:1px dashed var(--line); border-radius:12px; }
.inline-alert { padding:11px 13px; border-radius:11px; font-size:13px; }
.inline-alert--warning { color:#795817; background:#fff3dd; }
.radar-shell { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; }
.radar-scroll { overflow:auto; max-height:68vh; }
.radar-table { min-width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.radar-table th,.radar-table td { min-width:150px; padding:13px; border-right:1px solid #ececf0; border-bottom:1px solid #ececf0; background:#fff; vertical-align:top; }
.radar-table th { position:sticky; z-index:5; top:0; color:#69696e; background:#fafafa; text-align:left; }
.radar-table th small,.radar-table td span,.radar-table td em,.radar-product-col small { display:block; margin-top:5px; color:var(--muted); font-size:12px; font-style:normal; }
.radar-product-col { position:sticky; z-index:4; left:0; min-width:230px!important; }
.radar-own-col { position:sticky; z-index:4; left:230px; min-width:180px!important; box-shadow:5px 0 12px rgba(29,29,31,.06); }
.radar-table thead .radar-product-col,.radar-table thead .radar-own-col { z-index:8; }
.radar-table .is-cheapest { background:#eaf8ef; }
.radar-table .is-cheapest strong { color:#176d3d; }
.sortable-list { display:grid; gap:7px; }
.sortable-row { display:grid; grid-template-columns:auto 1fr auto auto auto auto; align-items:center; gap:8px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fff; transition:transform .15s ease,box-shadow .15s ease; }
.sortable-row.is-dragging { transform:scale(1.015); box-shadow:0 14px 32px rgba(0,122,255,.14); }
.sortable-row strong,.sortable-row small { display:block; }
.sortable-row small { color:var(--muted); font-size:12px; }
.sortable-row button { border:0; border-radius:8px; background:#f5f5f7; cursor:pointer; }
.sortable-row .danger-link { color:#b0252d; background:#fff0f1; }
.drag-dot { color:#aaa; font-size:21px; cursor:grab; }
.form-help { margin:0; color:var(--muted); font-size:13px; }

@media(max-width:1000px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.two-column{grid-template-columns:1fr}.catalog-selection-grid{grid-template-columns:1fr}.radar-product-col{min-width:190px!important}.radar-own-col{left:190px}}
@media(max-width:620px){.module-heading{align-items:stretch;flex-direction:column}.heading-actions,.filter-bar,.radar-filters,.catalog-selection-card form,.catalog-search-form,.active-selections>header{align-items:stretch;flex-direction:column}.heading-actions>*{width:100%}.metric-strip,.card-grid,.form-grid{grid-template-columns:1fr}.form-grid__wide{grid-column:auto}.compact-metrics{flex-wrap:wrap}.catalog-control>summary{align-items:flex-start}.catalog-results article{grid-template-columns:1fr}.catalog-result-meta{text-align:left}.selection-chips{display:grid}.selection-chips article{min-width:0}.radar-product-col{min-width:160px!important}.radar-own-col{left:160px;min-width:145px!important}.sortable-row{grid-template-columns:auto 1fr auto auto}.sortable-row .danger-link{grid-column:2/-1}.portal-dialog{padding:20px}.stack-list article{align-items:flex-start;flex-direction:column}}

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

/* Authenticated portal shell: mirrors the approved visual mockup. */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.portal-page svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.portal-sidebar {
    position: fixed;
    z-index: 30;
    inset: 0 auto 0 0;
    width: 244px;
    display: flex;
    flex-direction: column;
    padding: 26px 18px 18px;
    overflow-y: auto;
    background: #fff;
    border-right: 1px solid var(--line);
}
.portal-sidebar__brand { display: flex; align-items: center; gap: 11px; padding: 0 9px 25px; color: var(--ink); text-decoration: none; }
.portal-sidebar__mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--ink); font-size: 24px; font-weight: 850; }
.portal-sidebar__brand strong, .portal-sidebar__brand small { display: block; }
.portal-sidebar__brand strong { font-size: 22px; letter-spacing: -.05em; }
.portal-sidebar__brand small { margin-top: 2px; color: #8a8a8f; font-size: 13px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.portal-navigation { display: grid; gap: 5px; }
.portal-nav-item { min-height: 42px; display: flex; align-items: center; gap: 11px; padding: 0 12px; border-radius: 12px; color: #6e6e73; font-size: 15px; font-weight: 680; text-decoration: none; transition: color .18s ease, background .18s ease, transform .18s ease; }
.portal-nav-item svg { width: 18px; }
.portal-nav-item:hover, .portal-nav-item.is-active { color: var(--accent); background: #eaf4ff; }
.portal-nav-item:hover { transform: translateX(2px); }
.portal-sidebar__security { display: flex; gap: 10px; margin-top: auto; padding: 13px; border-radius: 14px; background: #f5f5f7; }
.portal-sidebar__security > span { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 2px; border: 2px solid white; border-radius: 50%; background: #2bab72; box-shadow: 0 0 0 3px #ddf5e9; }
.portal-sidebar__security strong, .portal-sidebar__security small { display: block; }
.portal-sidebar__security strong { font-size: 14px; }
.portal-sidebar__security small { margin-top: 4px; color: #8a8a8f; font-size: 12px; line-height: 1.3; }
.portal-sidebar__profile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 5px 0; border-top: 1px solid var(--line); }
.portal-avatar { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: var(--ink); border-radius: 11px; font-size: 13px; font-weight: 800; }
.portal-sidebar__profile > span:nth-child(2) { min-width: 0; }
.portal-sidebar__profile strong, .portal-sidebar__profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-sidebar__profile strong { font-size: 13px; }
.portal-sidebar__profile small { margin-top: 3px; color: #8a8a8f; font-size: 12px; }
.portal-sidebar__profile button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; color: #8a8a8f; background: transparent; cursor: pointer; }
.portal-sidebar__profile button:hover { color: var(--accent); background: #eaf4ff; }
.portal-sidebar__profile button svg { width: 16px; }
.portal-sidebar-backdrop { display: none; }

.portal-workspace { min-height: 100vh; margin-left: 244px; }
.portal-topbar { position: sticky; z-index: 20; top: 0; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 34px; background: rgba(255, 255, 255, .88); border-bottom: 1px solid rgba(170, 170, 170, .32); backdrop-filter: blur(18px); }
.portal-search { width: min(440px, 42vw); height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: #8a8a8f; background: #f5f5f7; border: 1px solid #e8e8ed; border-radius: 12px; }
.portal-search svg { width: 17px; }
.portal-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 15px; }
.portal-search kbd { padding: 3px 6px; border: 1px solid #d2d2d7; border-radius: 5px; color: #8a8a8f; background: #fff; font-size: 12px; }
.portal-mobile-menu { display: none; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.portal-topbar__actions { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 14px; }
.portal-topbar__actions a { color: var(--accent); font-weight: 750; text-decoration: none; }
.portal-environment { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #cfe5fb; border-radius: 999px; color: #0062cc; background: #f1f8ff; font-size: 12px; font-weight: 780; letter-spacing: .05em; text-transform: uppercase; }
.portal-environment i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #dceeff; }
.portal-main { width: auto; max-width: 1440px; margin: 0 auto; padding: 36px 34px 42px; }

.portal-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.portal-welcome h1 { font-size: clamp(29px, 3.1vw, 43px); }
.portal-welcome > div > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 16px; }
.portal-ready-card { min-width: 390px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 10px 34px rgba(29, 29, 31, .05); }
.portal-ready-card__icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: #eaf4ff; }
.portal-ready-card strong, .portal-ready-card small { display: block; }
.portal-ready-card strong { font-size: 14px; }
.portal-ready-card small { margin-top: 4px; color: #8a8a8f; font-size: 12px; }
.portal-ready-card em { padding: 6px 9px; border-radius: 99px; color: #176d3d; background: #eaf8ef; font-size: 12px; font-style: normal; font-weight: 800; }

.executive-dashboard { margin: 0 0 16px; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 14px 44px rgba(29, 29, 31, .055); }
.executive-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.executive-heading h2 { margin: 3px 0 4px; font-size: 22px; letter-spacing: -.04em; }
.executive-heading p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.executive-heading > span { padding: 6px 8px; border-radius: 8px; color: #52606e; background: #f5f5f7; font-size: 12px; font-weight: 800; }
.executive-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.executive-kpis article { padding: 14px; border: 1px solid #e3e3e5; border-radius: 14px; background: #fbfbfc; }
.executive-kpis span, .executive-kpis strong, .executive-kpis small { display: block; }
.executive-kpis span { color: var(--muted); font-size: 12px; font-weight: 800; }
.executive-kpis strong { margin: 7px 0 4px; font-size: 22px; letter-spacing: -.045em; }
.executive-kpis small { min-height: 14px; color: #8a8a8f; font-size: 12px; }
.executive-kpis article > i { display: block; height: 5px; margin-top: 11px; overflow: hidden; border-radius: 99px; background: #e8e8eb; }
.executive-kpis article > i em { display: block; width: var(--metric); height: 100%; border-radius: inherit; background: var(--accent); }
.executive-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.executive-charts > article { min-height: 174px; padding: 15px; border: 1px solid #e3e3e5; border-radius: 14px; background: #fff; }
.executive-charts header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.executive-charts header span, .executive-charts header strong { display: block; }
.executive-charts header span { color: #8a8a8f; font-size: 12px; font-weight: 850; letter-spacing: .09em; }
.executive-charts header strong { margin-top: 4px; font-size: 15px; }
.executive-charts header em { color: var(--accent); font-size: 12px; font-style: normal; font-weight: 850; }
.status-donut-layout { display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 18px; margin-top: 14px; }
.status-donut { width: 104px; height: 104px; display: grid; place-content: center; border-radius: 50%; text-align: center; background: radial-gradient(circle, #fff 0 48%, transparent 49%), conic-gradient(var(--accent) 0 var(--active-users), #e9a842 var(--active-users) 100%); }
.status-donut strong, .status-donut span { display: block; }
.status-donut strong { font-size: 22px; }
.status-donut span { color: #85858b; font-size: 12px; }
.status-donut-layout ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.status-donut-layout li, .portal-next-actions p { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; margin: 0; color: #68686e; font-size: 12px; }
.blue-dot, .amber-dot { width: 7px; height: 7px; border-radius: 50%; }
.blue-dot { background: var(--accent); }
.amber-dot { background: #e9a842; }
.portal-next-actions { display: grid; align-content: start; }
.portal-next-actions p { margin-top: 9px; padding: 9px 10px; border-radius: 9px; background: #f7f7f9; }

.dashboard-personalization { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 20px 0 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.dashboard-personalization strong, .dashboard-personalization span { display: block; }
.dashboard-personalization strong { font-size: 14px; }
.dashboard-personalization span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.dashboard-personalization button { padding: 7px 9px; border: 1px solid #c9def5; border-radius: 8px; color: #0062cc; background: #fff; font-size: 12px; font-weight: 800; }
.portal-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.portal-module-grid .module-card { min-height: 255px; display: flex; flex-direction: column; align-items: stretch; position: relative; padding: 20px; overflow: hidden; border-radius: 20px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.portal-module-grid .module-card::after { content: ""; position: absolute; right: -45px; bottom: -65px; width: 150px; height: 150px; border-radius: 50%; background: #f5f5f7; opacity: .8; pointer-events: none; }
.portal-module-grid .module-card:hover { transform: translateY(-3px); border-color: #9dcbff; box-shadow: 0 18px 48px rgba(29, 29, 31, .09); }
.portal-module-grid .module-card.is-dragging { z-index: 5; opacity: .9; transform: translateY(-7px) scale(1.02); border-color: var(--accent); box-shadow: 0 28px 65px rgba(0, 122, 255, .24); }
.card-drag-handle { position: absolute; z-index: 3; top: 7px; left: 50%; width: 38px; height: 26px; display: grid; place-items: center; margin: 0; padding: 0; transform: translateX(-50%); border: 0; border-radius: 8px; color: #aaa; background: transparent; font-size: 21px; cursor: grab; touch-action: none; }
.card-drag-handle:hover { color: var(--accent); background: #eaf4ff; }
.card-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; }
.card-icon.purple, .card-icon.violet { color: #2071dd; background: #e9f2ff; }
.card-icon.green { color: #168459; background: #e7f7ef; }
.card-icon.blue { color: #2071dd; background: #e9f2ff; }
.card-icon.coral { color: #c6535d; background: #ffedef; }
.card-icon.amber { color: #ad690f; background: #fff2dd; }
.card-icon.cyan { color: #18859a; background: #e4f7fa; }
.card-icon.navy { color: #43536e; background: #edf0f5; }
.module-state { position: absolute; top: 20px; right: 18px; padding: 6px 8px; border-radius: 999px; color: #8a641c; background: #fff3dd; font-size: 12px; font-weight: 800; }
.module-state--ready { color: #176d3d; background: #e8f7f0; }
.portal-module-grid .module-card h2 { margin: 20px 0 7px; font-size: 20px; letter-spacing: -.025em; }
.portal-module-grid .module-card > p { min-height: 50px; margin: 0; color: #7d7c89; font-size: 14px; line-height: 1.55; }
.module-card__meta { display: grid; gap: 5px; margin: 15px 0 12px; color: #8a8a8f; font-size: 12px; }
.module-card__meta span:first-child { width: fit-content; padding: 5px 7px; border-radius: 7px; color: #0062cc; background: #eaf4ff; font-weight: 800; }
.module-card__action { z-index: 1; width: fit-content; display: flex; align-items: center; gap: 5px; margin-top: auto; color: var(--accent); font-size: 13px; font-weight: 780; text-decoration: none; }
.module-card__action.is-disabled { color: #8a8a8f; }
.is-search-hidden { display: none !important; }

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

@media (max-width: 900px) {
    .portal-sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 20px 0 60px rgba(36, 33, 45, .16); }
    .portal-page.sidebar-open .portal-sidebar { transform: translateX(0); }
    .portal-page.sidebar-open .portal-sidebar-backdrop { position: fixed; z-index: 25; inset: 0; display: block; border: 0; background: rgba(29, 29, 31, .35); backdrop-filter: blur(3px); }
    .portal-workspace { margin-left: 0; }
    .portal-mobile-menu { display: grid; }
    .portal-topbar { padding: 0 18px; }
    .portal-main { padding: 26px 18px 36px; }
    .portal-search { width: min(55vw, 420px); }
    .portal-topbar__user { display: none; }
    .portal-welcome { align-items: stretch; flex-direction: column; }
    .portal-ready-card { min-width: 0; }
}

@media (max-width: 620px) {
    .portal-topbar { height: 64px; gap: 8px; padding: 0 12px; }
    .portal-main { padding: 20px 12px 30px; }
    .portal-search { width: auto; flex: 1; }
    .portal-search kbd, .portal-topbar__actions a { display: none; }
    .portal-environment { padding-inline: 8px; font-size: 0; }
    .portal-environment i { margin: 0; }
    .portal-module-grid, .executive-kpis, .executive-charts { grid-template-columns: 1fr; }
    .portal-module-grid .module-card { min-height: 220px; padding: 18px; }
    .dashboard-personalization { align-items: flex-start; flex-direction: column; }
    .access-picker__card { border-radius: 18px; }
}