:root {
    --bg: #f3f6fb;
    --surface: #ffffff;
    --surface-soft: #f7f9fd;
    --text: #0f172a;
    --muted: #64748b;
    --line: #dbe4f0;
    --navy: #08172f;
    --navy-2: #10284b;
    --blue: #2459f5;
    --blue-soft: #eaf1ff;
    --emerald-soft: #ecfbf1;
    --amber-soft: #fff5e8;
    --danger-soft: #fff0f0;
    --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 18px;
}

html, body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(circle at top left, rgba(36, 89, 245, 0.10), transparent 28%),
        linear-gradient(180deg, #f7f9fd 0%, var(--bg) 100%);
    color: var(--text);
    font-family: "Segoe UI Variable Display", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

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

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

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

.portal-shell-collapsed .portal-sidebar {
    width: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.portal-sidebar {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
    color: white;
    padding: 26px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.portal-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.portal-brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    font-weight: 800;
    letter-spacing: 0.06em;
}

.portal-brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    flex: 0 0 auto;
    object-fit: contain;
}

.portal-brand-title,
.portal-topbar-title,
.surface-card h1,
.surface-card h2,
.hero-panel h1 {
    margin: 0;
}

.portal-brand-title {
    font-size: 1.05rem;
    font-weight: 800;
}

.portal-brand-subtitle,
.portal-topbar-eyebrow,
.portal-profile-role,
.section-kicker,
.metric-label,
.action-detail,
.movement-detail,
.report-detail,
.banner-detail,
.surface-card p {
    color: var(--muted);
}

.portal-brand-subtitle {
    color: rgba(255,255,255,0.68);
    font-size: 0.82rem;
}

.portal-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.portal-nav-section {
    margin-top: 10px;
    padding: 0 10px;
    color: rgba(255,255,255,0.58);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.portal-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: rgba(255,255,255,0.82);
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.portal-nav-group {
    border-radius: 14px;
}

.portal-nav-group[open] {
    background: rgba(255,255,255,0.045);
}

.portal-nav-group-summary {
    cursor: pointer;
    list-style: none;
}

.portal-nav-group-summary::-webkit-details-marker {
    display: none;
}

.portal-nav-group-summary::after {
    content: "+";
    margin-left: auto;
    color: rgba(255,255,255,0.56);
    font-weight: 800;
}

.portal-nav-group[open] .portal-nav-group-summary::after {
    content: "-";
}

.portal-nav-submenu {
    display: grid;
    gap: 4px;
    padding: 0 6px 8px 48px;
}

.portal-nav-sub-link {
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 10px;
    color: rgba(255,255,255,0.68);
    font-size: 0.9rem;
    font-weight: 600;
}

.portal-nav-badge {
    margin-left: auto;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dc2626;
    color: white;
    font-size: 0.76rem;
    font-weight: 800;
}

.portal-nav-link:hover,
.portal-nav-link.active,
.portal-nav-sub-link.active {
    background: rgba(255,255,255,0.12);
    color: white;
}

.portal-nav-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.08);
    font-size: 0.9rem;
}

.portal-sidebar-footer {
    margin-top: auto;
}

.portal-sidebar-card {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
}

.portal-sidebar-label {
    color: rgba(255,255,255,0.58);
    font-size: 0.78rem;
}

.portal-sidebar-value {
    margin-top: 4px;
    font-weight: 700;
}

.portal-main {
    padding: 16px 20px 20px;
}

.portal-sidebar-toggle {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: white;
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
}

.portal-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.portal-topbar-eyebrow {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.portal-topbar-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}

.portal-topbar-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.portal-topbar-subtitle {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
}

.portal-profile-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.portal-profile-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.portal-profile-avatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    font-weight: 800;
}

.portal-profile-name {
    font-weight: 700;
}

.portal-logout {
    padding: 9px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--line);
    font-weight: 700;
}

.portal-content {
    min-width: 0;
}

.page-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hero-panel,
.surface-card,
.summary-card {
    background: rgba(255,255,255,0.88);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.hero-panel {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #09152b 0%, #16345d 58%, #2459f5 100%);
    border: none;
    color: white;
    min-height: 0;
}

.hero-copy h1 {
    font-size: 1.75rem;
    line-height: 1.1;
    max-width: 680px;
}

.hero-copy p {
    margin: 8px 0 0;
    max-width: 620px;
    color: rgba(255,255,255,0.78);
    font-size: 0.96rem;
}

.hero-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 10px;
    min-width: 320px;
    align-self: center;
}

.hero-pill {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.12);
    text-align: left;
}

.hero-pill-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
}

.hero-pill-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: white;
}

.section-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    font-size: 0.78rem;
}

.hero-panel .section-kicker {
    color: rgba(255,255,255,0.62);
}

.action-grid,
.summary-grid,
.content-grid,
.report-grid {
    display: grid;
    gap: 18px;
}

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

.action-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.92);
    box-shadow: var(--shadow);
}

.action-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-weight: 800;
}

.action-title {
    font-weight: 800;
    margin-bottom: 4px;
}

.action-primary .action-icon {
    background: linear-gradient(135deg, #2459f5 0%, #15338f 100%);
    color: white;
}

.action-secondary .action-icon {
    background: var(--blue-soft);
    color: var(--blue);
}

.action-emerald .action-icon {
    background: var(--emerald-soft);
    color: #0f9f6e;
}

.action-slate .action-icon {
    background: #eef2f7;
    color: #334155;
}

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

.summary-card,
.surface-card {
    padding: 18px;
}

.summary-header,
.surface-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.summary-card h2,
.surface-card h2,
.surface-card h1 {
    font-size: 1.4rem;
    font-weight: 800;
}

.readiness-card {
    background:
        linear-gradient(135deg, rgba(36, 89, 245, 0.08), rgba(255, 255, 255, 0.92)),
        rgba(255,255,255,0.9);
}

.readiness-score {
    margin: 8px 0 2px;
    color: var(--text);
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 900;
}

.summary-chip,
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.summary-chip {
    background: var(--blue-soft);
    color: var(--blue);
}

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

.loan-history-grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    margin: 12px 0 14px;
}

.metric-tile {
    padding: 16px;
    border-radius: 18px;
    background: var(--surface-soft);
}

.metric-label {
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text);
}

.metric-positive {
    background: var(--emerald-soft);
}

.metric-primary {
    background: var(--blue-soft);
}

.metric-secondary {
    background: #eef2ff;
}

.metric-warning {
    background: var(--amber-soft);
}

.metric-danger {
    background: var(--danger-soft);
}

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

.profile-detail-section {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.profile-section-title {
    margin-bottom: 12px;
    color: var(--text);
    font-weight: 800;
}

.detail-list {
    display: grid;
    gap: 10px;
}

.detail-list div {
    display: grid;
    grid-template-columns: minmax(110px, 0.72fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.detail-list span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.detail-list strong {
    min-width: 0;
    color: var(--text);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.recent-activity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.recent-activity-panel {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,0.72);
}

.activity-list {
    display: grid;
    gap: 10px;
}

.activity-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: var(--surface-soft);
}

.activity-list-row div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.activity-list-row strong {
    color: var(--text);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.activity-list-row span {
    color: var(--muted);
    font-size: 0.82rem;
}

.compact-empty-state {
    padding: 18px 12px;
}

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

.activity-summary-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: 16px;
    background: var(--surface-soft);
}

.activity-summary-card span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.activity-summary-card strong {
    font-size: 1.4rem;
}

.activity-chart-shell {
    overflow-x: auto;
    padding-bottom: 4px;
}

.activity-chart {
    min-width: 820px;
    height: 250px;
    display: grid;
    grid-template-columns: repeat(31, minmax(18px, 1fr));
    gap: 8px;
    align-items: end;
    padding: 12px 0 0;
    border-top: 1px solid #edf2f8;
}

.activity-day {
    min-width: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 7px;
    height: 100%;
}

.activity-bars {
    display: grid;
    grid-template-columns: repeat(4, minmax(3px, 1fr));
    gap: 2px;
    align-items: end;
}

.activity-bar {
    min-height: 4px;
    border-radius: 999px 999px 4px 4px;
}

.activity-bar.created,
.legend-created {
    background: var(--blue);
}

.activity-bar.registered,
.legend-registered {
    background: #0f9f6e;
}

.activity-bar.consumed,
.legend-consumed {
    background: #dc2626;
}

.activity-bar.allocated,
.legend-allocated {
    background: #9a6700;
}

.activity-day-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.activity-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.activity-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.activity-legend i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.content-grid {
    grid-template-columns: 1.6fr 0.9fr;
}

.team-editor-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.team-form-details {
    display: grid;
    gap: 14px;
}

.team-form-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.team-form-details > summary::-webkit-details-marker {
    display: none;
}

.team-form-details > summary strong {
    color: var(--blue);
    font-size: 0.82rem;
}

.team-form-details[open] > summary {
    margin-bottom: 14px;
}

.banner-list,
.movement-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.banner-slider {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.banner-card {
    position: relative;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, #09152b 0%, #173765 55%, #2459f5 100%);
    color: white;
    overflow: hidden;
}

.banner-card::after {
    content: "";
    position: absolute;
    right: -54px;
    bottom: -70px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(255,255,255,0.09);
}

.banner-card-featured {
    min-height: 244px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.dashboard-banner-preview {
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 18px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid var(--line);
}

.dashboard-banner-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-banner-empty {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,0.72);
    font-weight: 800;
}

.banner-preview-meta {
    margin-top: 12px;
    padding: 14px;
    border-radius: 18px;
    background: #0f172a;
    color: white;
}

.banner-eyebrow {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    font-size: 0.76rem;
    font-weight: 800;
}

.banner-slide-count {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.82);
    font-size: 0.74rem;
    font-weight: 800;
}

.banner-title {
    position: relative;
    z-index: 1;
    font-size: 1.25rem;
    font-weight: 800;
}

.banner-detail {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    color: rgba(255,255,255,0.76);
}

.banner-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.banner-meta span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    font-size: 0.76rem;
    font-weight: 700;
}

.banner-controls {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.banner-control-button {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 12px;
    background: rgba(255,255,255,0.12);
    color: white;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.banner-control-button:hover {
    background: rgba(255,255,255,0.20);
}

.banner-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.banner-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: width 0.15s ease, background-color 0.15s ease;
}

.banner-dot.active {
    width: 28px;
    background: var(--blue);
}

.support-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.portal-button {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    border: none;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}

.portal-button-primary {
    background: var(--blue);
    color: white;
}

.portal-button-subtle {
    background: var(--surface-soft);
    color: var(--text);
    border: 1px solid var(--line);
}

.portal-button-danger {
    background: #dc2626;
    color: white;
}

.portal-button:hover:not([disabled]) {
    transform: translateY(-1px);
}

.portal-button[disabled] {
    opacity: 0.68;
    cursor: not-allowed;
}

.portal-button.busy::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: portal-spin 0.7s linear infinite;
}

.movement-row {
    display: grid;
    grid-template-columns: 1.4fr 0.5fr 0.6fr 0.45fr;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid #edf2f8;
    align-items: center;
}

.movement-row:first-child {
    border-top: none;
    padding-top: 0;
}

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

.frp-settings-grid {
    margin-top: 18px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label {
    font-size: 0.88rem;
    font-weight: 700;
}

.field-hint {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.form-field-wide {
    grid-column: 1 / -1;
}

.portal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.portal-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 800;
}

.form-span-2 {
    grid-column: 1 / -1;
}

.form-section-label {
    grid-column: 1 / -1;
    padding-top: 4px;
    color: var(--blue);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.filter-action-field {
    justify-content: end;
}

.portal-input {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--text);
    font: inherit;
}

.portal-input-invalid {
    border-color: #dc2626;
    background: #fff7f7;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.status-banner {
    padding: 14px 16px;
    border-radius: 16px;
    font-weight: 700;
}

.status-banner .muted-text {
    display: block;
    margin-top: 4px;
    color: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    opacity: 0.78;
}

.toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.toggle-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
}

.status-banner-success {
    background: var(--emerald-soft);
    color: #0f9f6e;
}

.status-banner-error {
    background: var(--danger-soft);
    color: #b42318;
}

.status-banner-info {
    background: var(--blue-soft);
    color: #1d4ed8;
}

.status-banner-warning {
    background: var(--amber-soft);
    color: #9a6700;
}

.validation-summary {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

.empty-state {
    padding: 28px 16px;
    text-align: center;
    color: var(--muted);
}

.empty-state-title {
    color: var(--text);
    font-weight: 800;
    margin-bottom: 6px;
}

.empty-state-copy {
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.5;
}

.movement-title,
.report-title {
    font-weight: 800;
    color: var(--text);
}

.movement-quantity,
.report-value {
    font-size: 1.2rem;
    font-weight: 800;
}

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

.report-card {
    padding: 18px;
    border-radius: 20px;
    background: var(--surface-soft);
}

.report-trend {
    margin: 8px 0 10px;
    color: var(--blue);
    font-weight: 800;
}

.table-shell {
    overflow-x: auto;
}

.portal-table {
    width: 100%;
    border-collapse: collapse;
}

.portal-table th,
.portal-table td {
    padding: 14px 12px;
    text-align: left;
    border-top: 1px solid #edf2f8;
}

.portal-table thead th {
    border-top: none;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.check-detail {
    min-width: 280px;
    max-width: 720px;
    overflow-wrap: anywhere;
}

.compact-table th,
.compact-table td {
    padding: 9px 10px;
    font-size: 0.88rem;
}

.compact-table thead th {
    font-size: 0.74rem;
}

.selected-table-row td {
    background: var(--blue-soft);
    border-top-color: rgba(29, 78, 216, 0.14);
}

.selected-table-row td:first-child {
    box-shadow: inset 4px 0 0 var(--blue);
}

.compact-actions .portal-button {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.78rem;
}

.portal-icon-button {
    min-width: 36px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 12px;
}

.portal-icon-button .icon-glyph {
    font-size: 0.95rem;
    line-height: 1;
}

.portal-icon-button.portal-button-danger .icon-glyph,
.portal-icon-button.portal-button-primary .icon-glyph {
    color: inherit;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.compact-surface {
    padding: 16px;
}

.compact-form-grid {
    gap: 12px;
    margin-bottom: 14px;
}

.compact-form-grid .portal-input {
    min-height: 42px;
}

.compact-history-table .portal-table th,
.compact-history-table .portal-table td {
    padding: 10px 10px;
}

.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.status-success,
.status-positive {
    background: var(--emerald-soft);
    color: #0f9f6e;
}

.status-warning {
    background: var(--amber-soft);
    color: #9a6700;
}

.status-danger {
    background: var(--danger-soft);
    color: #b42318;
}

.status-neutral,
.status-secondary {
    background: var(--blue-soft);
    color: var(--blue);
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at top right, rgba(36, 89, 245, 0.16), transparent 24%),
        linear-gradient(180deg, #f7f9fd 0%, var(--bg) 100%);
}

.login-panel {
    width: min(100%, 480px);
    padding: 32px;
    border-radius: 30px;
    background: rgba(255,255,255,0.94);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.login-brand {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 9px 12px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.login-panel h1 {
    margin: 0 0 10px;
    font-size: 2rem;
    font-weight: 800;
}

.login-panel p {
    margin: 0 0 20px;
    color: var(--muted);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-label {
    font-size: 0.9rem;
    font-weight: 700;
}

.login-input {
    min-height: 50px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    font: inherit;
    color: var(--text);
}

.login-input:focus {
    outline: 2px solid rgba(36, 89, 245, 0.18);
    border-color: rgba(36, 89, 245, 0.45);
}

.login-button {
    margin-top: 10px;
    width: 100%;
}

.login-error {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--danger-soft);
    color: #b42318;
    font-weight: 700;
}

.login-note {
    margin-top: 18px;
    color: var(--muted);
    font-size: 0.84rem;
}

.portal-pre {
    margin: 10px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    font: 0.88rem/1.5 Consolas, "Courier New", monospace;
    color: var(--text);
}

.inline-actions,
.table-actions,
.button-stack {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.compact-input {
    min-width: 220px;
}

.compact-select {
    min-width: 150px;
}

.qr-preview-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
}

.qr-preview-card {
    padding: 18px;
    border-radius: 20px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
}

.qr-preview-image {
    width: 220px;
    height: 220px;
    object-fit: contain;
    display: block;
}

.activation-id {
    font-size: 1.02rem;
    line-height: 1.35;
    word-break: break-word;
}

@keyframes portal-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.portal-navigation-loader {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 4px;
    overflow: hidden;
    background: rgba(226, 232, 240, 0.8);
    border-radius: 999px;
}

.portal-navigation-loader-global {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 5px;
    overflow: hidden;
    background: rgba(226, 232, 240, 0.9);
}

.portal-navigation-bar {
    width: 42%;
    height: 100%;
    background: linear-gradient(90deg, #facc15, #2563eb);
    border-radius: 999px;
    animation: portal-progress 0.9s ease-in-out infinite;
}

.portal-toast-host {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 80;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
}

.portal-toast {
    padding: 14px 16px;
    border: 1px solid #dbeafe;
    border-left: 5px solid #2563eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.portal-toast-success {
    border-left-color: #16a34a;
}

.portal-toast-error {
    border-left-color: #dc2626;
}

.portal-toast-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}

.portal-toast-message {
    color: #475569;
    line-height: 1.35;
}

@keyframes portal-progress {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(260%);
    }
}

#blazor-error-ui {
    display: none;
}

@media (max-width: 1200px) {
    .action-grid,
    .summary-grid,
    .loan-history-grid,
    .activity-summary-grid,
    .content-grid,
    .profile-detail-grid,
    .recent-activity-grid,
    .report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 920px) {
    .portal-shell {
        grid-template-columns: 1fr;
    }

    .portal-sidebar {
        padding-bottom: 16px;
    }

    .portal-main {
        padding-top: 14px;
    }

    .hero-panel,
    .portal-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-aside {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .action-grid,
    .summary-grid,
    .loan-history-grid,
    .activity-summary-grid,
    .content-grid,
    .profile-detail-grid,
    .recent-activity-grid,
    .report-grid {
        grid-template-columns: 1fr;
    }

    .movement-row {
        grid-template-columns: 1fr;
    }

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

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