/* Shared visual layer: both languages and themes use the same semantic tokens. */
body {
    background: radial-gradient(ellipse at 85% 0%, var(--color-primary-soft), transparent 42%), var(--color-bg);
    text-rendering: optimizeLegibility;
}

.sidebar {
    padding: var(--space-3);
    background: var(--color-surface);
    border-inline-end-color: color-mix(in srgb, var(--color-border), transparent 35%);
}

.sidebar-brand {
    padding-inline: var(--space-3);
    border-block-end: 0;
    letter-spacing: -.02em;
}

.brand-mark {
    border-radius: var(--radius-md);
    inline-size: 2.5rem;
    block-size: 2.5rem;
    box-shadow: 0 5px 16px var(--color-primary-soft);
}

.nav-item-ui { border-radius: var(--radius-md); margin-block: var(--space-1); }
.nav-section-title { padding-block-start: var(--space-6); }
.topbar {
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    backdrop-filter: blur(16px);
    border-block-end-color: color-mix(in srgb, var(--color-border), transparent 35%);
}
.topbar-title { font-weight: var(--weight-semibold); }
.page-header { align-items: center; margin-block-end: var(--space-8); }
.page-header h1 { letter-spacing: -.035em; font-weight: var(--weight-bold); }
.page-header p { line-height: 1.8; }

.panel, .data-table, .kpi-card {
    border-color: color-mix(in srgb, var(--color-border), transparent 20%);
    box-shadow: var(--shadow-1);
}
.panel { overflow: clip; }
.panel-header { padding: var(--space-5) var(--space-6); }
.panel-body { padding: var(--space-6); }
.kpi-grid { gap: var(--space-5); }
.kpi-card { padding: var(--space-6); min-block-size: 10rem; position: relative; }
.kpi-split { display: flex; gap: var(--space-3); list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.kpi-split li { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); }
.kpi-value { font-size: clamp(1.8rem, 2.8vw, 2.75rem); letter-spacing: -.045em; }
.kpi-head { gap: var(--space-3); }
.kpi-icon { border-radius: var(--radius-md); background: var(--color-primary-soft); }
.component-list { list-style: none; padding: 0; margin: 0; }
.component-list > li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); min-block-size: 5.75rem; border-block-end: 1px solid var(--color-border); }
.component-list > li:last-child { border-block-end: 0; }
.component-main { flex: 1; min-inline-size: 0; }
.component-main > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-semibold); }
.component-main .cell-sub { display: block; color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.component-list .status-badge { flex-shrink: 0; }
.section-counts { list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.section-counts li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); }
.section-counts a { display: flex; gap: var(--space-2); align-items: center; color: var(--color-text-muted); text-decoration: none; font-size: var(--text-xs); }
.component-list a { text-decoration: none; }
.component-list a:hover { color: var(--color-primary-strong); }

.data-table { border-radius: var(--radius-lg); background: var(--color-surface); overflow: clip; }
.dt-toolbar { padding: var(--space-5); gap: var(--space-3); }
.table-ui th {
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-2);
    border-block-end-color: var(--color-border);
    font-size: var(--text-xs);
}
.table-ui td { padding: var(--space-5); border-block-end-color: color-mix(in srgb, var(--color-border), transparent 30%); }
.table-ui tbody tr { transition: background var(--duration-fast); }
.table-ui .cell-sub { margin-block-start: var(--space-1); line-height: 1.7; }
.table-ui .cell-name { text-decoration: none; }
.table-ui .cell-name:hover { color: var(--color-primary-strong); }
.table-ui td .metric-bar { min-inline-size: 7rem; }
.status-badge, .pill { border-radius: var(--radius-pill); }
.btn-ui, .btn-ghost, .btn-danger { min-block-size: 2.65rem; border-radius: var(--radius-md); font-weight: var(--weight-semibold); }
.btn-ui { box-shadow: 0 4px 12px var(--color-primary-soft); }
.input { border-radius: var(--radius-md); min-block-size: 2.85rem; background: var(--color-surface-2); }
.input:focus { background: var(--color-surface); }
.page-tabs { margin-block-end: var(--space-6); }
.page-tabs .tab { border-radius: var(--radius-md); }
.chart-empty { min-block-size: 12rem; }
.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.filter-bar > select { inline-size: auto; min-inline-size: 8rem; }

/* A short, quiet sign-in form; account security setup belongs in the signed-in shell. */
.auth-page { background: var(--color-bg); }
.auth-tools { z-index: 2; inset-block-start: var(--space-6); inset-inline-end: var(--space-6); }
.auth {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-10);
    max-inline-size: 1320px;
    margin-inline: auto;
    padding: clamp(1.5rem, 5vw, 5rem);
    align-items: center;
}
.auth-identity {
    align-self: stretch;
    min-block-size: 38rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: radial-gradient(ellipse at 15% 75%, var(--color-primary-soft), transparent 65%), var(--color-surface);
}
.auth-wordmark { display: flex; gap: var(--space-3); align-items: center; font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text); text-decoration: none; direction: ltr; }
.auth-wordmark .brand-mark { inline-size: 3rem; block-size: 3rem; }
.auth-wordmark-caption { display: block; color: var(--color-text-muted); font-size: .6rem; letter-spacing: .22em; font-weight: var(--weight-medium); margin-block-start: .2rem; }
.auth-identity-copy { position: relative; z-index: 1; margin-block: auto; padding-block: var(--space-10); }
.auth-eyebrow { font-size: var(--text-xs); color: var(--color-primary-strong); font-weight: var(--weight-semibold); }
.auth-identity-copy h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1.3; letter-spacing: -.045em; font-weight: var(--weight-bold); margin-block: var(--space-4) var(--space-5); max-inline-size: 9em; }
.auth-identity-copy p { color: var(--color-text-muted); max-inline-size: 24em; line-height: 1.9; margin: 0; }
.auth-orbit { position: relative; block-size: 8rem; opacity: .7; }
.auth-orbit span { position: absolute; border: 1px solid var(--color-border-strong); border-radius: 50%; inline-size: 17rem; block-size: 17rem; inset-inline-start: 50%; inset-block-start: 0; transform: translateX(-50%); }
[dir="rtl"] .auth-orbit span { transform: translateX(50%); }
.auth-orbit span:nth-child(2) { inline-size: 24rem; block-size: 24rem; inset-block-start: -3.5rem; }
.auth-orbit span:nth-child(3) { inline-size: 31rem; block-size: 31rem; inset-block-start: -7rem; }
.auth-orbit > .icon { position: relative; display: block; margin-inline: auto; margin-block-start: 2rem; inline-size: 3rem; block-size: 3rem; color: var(--color-primary); }
.auth-card { inline-size: min(27rem, 100%); padding: var(--space-8); border: 0; background: transparent; box-shadow: none; }
.auth-brand { font-size: var(--text-sm); margin-block-end: var(--space-8); color: var(--color-text-muted); }
.auth-brand .brand-mark { inline-size: 2rem; block-size: 2rem; }
.auth-heading { margin-block-end: var(--space-8); }
.auth-heading h1 { font-size: 2rem; font-weight: var(--weight-bold); letter-spacing: -.035em; margin-block-end: var(--space-3); }
.auth-heading p { color: var(--color-text-muted); line-height: 1.7; }
.auth-card .field { margin-block-end: var(--space-5); }
.auth-card .input { min-block-size: 3.25rem; background: var(--color-surface); }
.auth-card .btn-block { min-block-size: 3.25rem; margin-block-start: var(--space-3); }
[dir="rtl"] .auth-card .btn-ui .icon { transform: rotate(180deg); }
.security-setup { max-inline-size: 42rem; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.security-setup summary { cursor: pointer; font-weight: var(--weight-semibold); }
.security-setup .setup-steps { margin-block-start: var(--space-5); }

@media (max-width: 991px) {
    .auth { grid-template-columns: 1fr; min-block-size: 100svh; padding: var(--space-6); }
    .auth-identity { display: none; }
    .auth-card { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
    .auth-tools { inset-block-start: var(--space-3); inset-inline-end: var(--space-3); }
    .kpi-grid { gap: var(--space-3); }
    .kpi-card { padding: var(--space-4); min-block-size: 8rem; }
    .panel-header, .panel-body { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
    .table-ui tbody tr { transition: none; }
}

/* A failed refresh keeps the last usable content and an accessible recovery action. */
.live-part-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; color: var(--status-warning); background: var(--status-warning-soft); border-radius: var(--radius-md); grid-column: 1 / -1; width: 100%; }
/* Anchor visually hidden column labels inside horizontally scrolling tables, including RTL. */
.table-ui th { position: relative; }