@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

:root {
    color-scheme: light;
    --color-bg: #f7f7f8;
    --color-surface: #ffffff;
    --color-surface-muted: #f0f1f3;
    --color-text: #171717;
    --color-text-muted: #707070;
    --color-border: #e9ecef;
    --color-primary: #ff6500;
    --color-primary-hover: #e65b00;
    --color-primary-text: #ffffff;
    --color-danger: #dc2626;
    --color-focus: #ff8a3d;
    --shadow-card: 14px 17px 40px 4px rgb(20 20 20 / 8%);
    --shadow-card-hover: 14px 19px 44px 5px rgb(20 20 20 / 12%);
    --radius-sm: 0.75rem;
    --radius-md: 0.9rem;
    --radius-lg: 1.25rem;
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-muted);
    --text: var(--color-text);
    --text-muted: var(--color-text-muted);
    --border: var(--color-border);
    --accent: var(--color-primary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --color-bg: #09090b;
        --color-surface: #121318;
        --color-surface-muted: #1a1c24;
        --color-text: #f8fafc;
        --color-text-muted: #94a3b8;
        --color-border: #272a37;
        --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
        --shadow-card-hover: 0 8px 30px -4px rgba(255, 90, 0, 0.15);
    }
}

:root[data-theme='dark'] {
    color-scheme: dark;
    --color-bg: #09090b;
    --color-surface: #121318;
    --color-surface-muted: #1a1c24;
    --color-text: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-border: #272a37;
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 8px 30px -4px rgba(255, 90, 0, 0.15);
}

:root[data-theme='light'] {
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[lang^='ar'] body,
:lang(ar) {
    font-family: "IBM Plex Sans Arabic", "Inter", ui-sans-serif, system-ui, sans-serif;
}

a {
    color: var(--color-primary);
    text-underline-offset: 0.2em;
}

button,
input,
select,
textarea {
    font: inherit;
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 15% 15%, rgb(249 115 22 / 12%), transparent 30rem),
        var(--color-bg);
}

.auth-card {
    width: min(100%, 30rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.auth-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-mark {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    object-fit: contain;
}

.brand-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle,
.button-secondary,
.button-danger {
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.theme-toggle {
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 999px;
    cursor: pointer;
}

.locale-switch {
    margin: 0;
}

.language-control {
    display: inline-flex;
    width: auto;
    min-width: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding-inline: 0.7rem;
    white-space: nowrap;
}

.language-mark {
    display: inline-grid;
    min-width: 1.4rem;
    height: 1.4rem;
    place-items: center;
    border-radius: 0.4rem;
    background: var(--color-primary);
    color: var(--color-primary-text);
    font-size: 0.72rem;
    font-weight: 800;
}

.language-label {
    font-size: 0.82rem;
    font-weight: 700;
}

h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.6rem, 4vw, 2rem);
}

.muted {
    color: var(--color-text-muted);
}

.stack {
    display: grid;
    gap: 1rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    align-self: start;
    width: 100%;
    min-width: 0;
}

.field label {
    font-weight: 650;
}

.field input,
.field select {
    width: 100%;
    height: 3rem;
    min-height: 3rem;
    max-height: 3rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    background: var(--color-bg);
    color: var(--color-text);
    box-sizing: border-box;
}

.field textarea {
    width: 100%;
    min-height: 5.5rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    background: var(--color-bg);
    color: var(--color-text);
    resize: vertical;
    box-sizing: border-box;
}

.field-error,
.alert-danger {
    color: var(--color-danger);
}

.alert,
.security-panel {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface-muted);
}

.button {
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    background: var(--color-primary);
    color: var(--color-primary-text);
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: var(--color-primary-hover);
}

.button-secondary,
.button-danger {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Glassmorphism Light-Orange Custom Checkbox Styling (Global Across Entire Web App) */
input[type="checkbox"],
.toggle-control input[type="checkbox"],
.choice input[type="checkbox"],
.auth-checkbox input[type="checkbox"],
.checkbox input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 0.85rem !important;
    height: 0.85rem !important;
    min-width: 0.85rem !important;
    min-height: 0.85rem !important;
    max-width: 0.85rem !important;
    max-height: 0.85rem !important;
    border-radius: 4px !important;
    background: rgba(255, 138, 61, 0.18) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1.5px solid rgba(255, 138, 61, 0.5) !important;
    accent-color: #ff8a3d !important;
    cursor: pointer !important;
    position: relative !important;
    display: inline-grid !important;
    place-content: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

input[type="checkbox"]:hover,
.toggle-control input[type="checkbox"]:hover,
.choice input[type="checkbox"]:hover,
.auth-checkbox input[type="checkbox"]:hover,
.checkbox input[type="checkbox"]:hover {
    background: rgba(255, 138, 61, 0.3) !important;
    border-color: rgba(255, 138, 61, 0.85) !important;
    box-shadow: 0 0 10px rgba(255, 138, 61, 0.4) !important;
}

input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-focus, #ff8a3d) !important;
    outline-offset: 2px !important;
}

input[type="checkbox"]:checked,
.toggle-control input[type="checkbox"]:checked,
.choice input[type="checkbox"]:checked,
.auth-checkbox input[type="checkbox"]:checked,
.checkbox input[type="checkbox"]:checked {
    background: linear-gradient(135deg, rgba(255, 138, 61, 0.9) 0%, rgba(249, 115, 22, 0.95) 100%) !important;
    border-color: rgba(255, 190, 140, 0.95) !important;
    box-shadow: 0 3px 10px rgba(255, 120, 32, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

input[type="checkbox"]:checked::before,
.toggle-control input[type="checkbox"]:checked::before,
.choice input[type="checkbox"]:checked::before,
.auth-checkbox input[type="checkbox"]:checked::before,
.checkbox input[type="checkbox"]:checked::before {
    content: "" !important;
    width: 0.3rem !important;
    height: 0.5rem !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) translate(-0.5px, -0.5px) !important;
}

.security-page {
    width: min(100%, 52rem);
}

.recovery-codes {
    padding: 1rem 1rem 1rem 2.2rem;
    border-radius: 0.75rem;
    background: var(--color-bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.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;
}

.skip-link {
    position: fixed;
    z-index: 100;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    padding: 0.7rem 1rem;
    border-radius: 0.6rem;
    background: var(--color-primary);
    color: var(--color-primary-text);
    font-weight: 750;
    transform: translateY(-180%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.icon-button {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.icon-button:hover,
.icon-button:focus-visible {
    background: var(--color-surface-muted);
}

.admin-shell {
    --sidebar-width: 17.5rem;
    min-height: 100vh;
    background:
        radial-gradient(circle at 100% 0, rgb(249 115 22 / 7%), transparent 32rem),
        var(--color-bg);
}

.admin-sidebar {
    position: fixed;
    z-index: 40;
    inset-block: 0;
    inset-inline-start: 0;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    padding: 1rem;
    border-inline-end: 1px solid var(--color-border);
    background: var(--color-surface);
}

.sidebar-brand-row,
.sidebar-brand,
.sidebar-footer,
.topbar-leading,
.topbar-actions,
.page-heading,
.page-heading-actions {
    display: flex;
    align-items: center;
}

.filter-panel,
.section-block {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    background: var(--color-surface);
}

.executive-section {
    display: grid;
    gap: 1rem;
    margin-block-start: 2rem;
}

.section-heading,
.analytics-card__heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.section-heading h2 {
    margin-block: 0.15rem 0.35rem;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.analytics-card {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    background: var(--color-surface);
}

.analytics-card__heading {
    align-items: baseline;
}

.analytics-card__heading span {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.analytics-card__heading strong {
    color: var(--color-primary);
    font-size: 1.65rem;
}

.analytics-card p,
.analytics-card small {
    color: var(--color-text-muted);
}

.sparkline {
    width: 100%;
    height: 5rem;
    overflow: visible;
}

.sparkline path {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1;
}

.sparkline polyline {
    fill: none;
    stroke: var(--color-primary);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
}

.empty-state {
    grid-column: 1 / -1;
    padding: 1rem;
    border: 1px dashed var(--color-border);
    border-radius: 0.9rem;
    color: var(--color-text-muted);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: end;
}

.filter-grid > .grow {
    grid-column: span 2;
}

.filter-grid .field,
.filter-grid input,
.filter-grid select {
    min-width: 0;
}

.filter-actions {
    display: flex;
    justify-content: end;
    gap: 0.75rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.stat-card {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    background: var(--color-surface);
}

.stat-card span,
.record-meta dt {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.stat-card strong {
    font-size: 1.45rem;
}

.detail-row td {
    padding-block-start: 0;
    background: color-mix(in srgb, var(--color-surface-muted) 45%, transparent);
}

.record-details summary {
    width: fit-content;
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 700;
}

.record-details[open] summary {
    margin-block-end: 1rem;
}

.record-meta,
.snapshot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.record-meta {
    margin-block-end: 1rem;
}

.record-meta div {
    min-width: 0;
}

.record-meta dd {
    margin: 0.25rem 0 0;
}

.snapshot-values,
.snapshot-empty {
    max-height: 24rem;
    overflow: auto;
    margin: 0;
    padding: 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    background: var(--color-bg);
}

.snapshot-values {
    display: grid;
    gap: 0;
}

.snapshot-value {
    display: grid;
    grid-template-columns: minmax(7rem, 0.42fr) minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    padding-block: 0.65rem;
    border-block-end: 1px solid var(--color-border);
}

.snapshot-value:first-child {
    padding-block-start: 0;
}

.snapshot-value:last-child {
    padding-block-end: 0;
    border-block-end: 0;
}

.snapshot-value dt {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.snapshot-value dd {
    min-width: 0;
    margin: 0;
    color: var(--color-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.snapshot-values--nested {
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
}

.snapshot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.snapshot-list > li {
    padding: 0.28rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: 0.78rem;
    font-weight: 600;
}

@media (max-width: 40rem) {
    .snapshot-value {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

.section-block {
    margin-block-start: 1.5rem;
}

.archive-create-grid {
    align-items: start;
}

.archive-description {
    max-width: 56ch;
    margin: 0.45rem 0 0;
    color: var(--color-text-muted);
    line-height: 1.7;
    white-space: pre-line;
}

.archive-file-meta {
    display: grid;
    justify-items: start;
    gap: 0.35rem;
    min-width: 11rem;
}

.archive-file-meta .button {
    min-height: 2.35rem;
    margin-block-start: 0.25rem;
    padding-block: 0.35rem;
    font-size: 0.78rem;
}

.badge-warning {
    background: rgb(234 179 8 / 12%);
    color: #a16207;
}

.badge-neutral {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.text-danger {
    color: var(--color-danger);
}

.publication-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.section-editor {
    display: grid;
    gap: 1rem;
}

.section-editor legend {
    padding-inline: 0.5rem;
    font-size: 1.05rem;
    font-weight: 750;
}

.compact-choice {
    width: fit-content;
}

.publication-panel,
.publication-form {
    display: grid;
    gap: 1rem;
}

.publication-form {
    grid-template-columns: minmax(10rem, 0.7fr) minmax(15rem, 1fr) auto;
    align-items: end;
}

.settings-list {
    display: grid;
}

.setting-row {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(15rem, 1fr);
    gap: 1rem;
    align-items: center;
    padding-block: 1rem;
    border-block-end: 1px solid var(--color-border);
}

.setting-row:last-child {
    border-block-end: 0;
}

.setting-row h2 {
    margin-block-end: 0.2rem;
    font-size: 1rem;
}

.public-site {
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
}

.public-header,
.public-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(100% - 2rem, 74rem);
    margin-inline: auto;
    padding-block: 1rem;
}

.public-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}

.public-section {
    padding: clamp(3rem, 9vw, 8rem) 1rem;
    border-block-start: 1px solid var(--color-border);
}

.public-section__inner {
    display: grid;
    gap: 1rem;
    width: min(100%, 64rem);
    margin-inline: auto;
}

.public-section__inner h1 {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(2.25rem, 7vw, 5.5rem);
    line-height: 0.98;
}

.public-section__inner p:not(.eyebrow) {
    max-width: 64ch;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.public-section__inner .button {
    width: fit-content;
}

.public-section--hero {
    background: radial-gradient(circle at 80% 10%, rgb(249 115 22 / 14%), transparent 30%);
}

.public-section--call_to_action {
    background: var(--color-surface);
}

.public-footer {
    border-block-start: 1px solid var(--color-border);
}

.sidebar-brand-row {
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3.5rem;
}

.sidebar-brand {
    gap: 0.75rem;
    color: var(--color-text);
    text-decoration: none;
}

.sidebar-brand > span:last-child,
.sidebar-footer > span:last-child,
.account-summary-copy,
.account-popover-header {
    display: grid;
    min-width: 0;
}

.sidebar-brand small,
.sidebar-footer small,
.account-summary-copy small,
.account-popover-header span {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-close {
    display: none;
}

.sidebar-navigation {
    flex: 1;
    margin-block: 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-group + .nav-group {
    margin-block-start: 1.5rem;
}

.nav-group h2 {
    margin: 0 0 0.45rem;
    padding-inline: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-group ul,
.breadcrumbs ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-link {
    position: relative;
    display: flex;
    min-height: 2.85rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.7rem;
    color: var(--color-text-muted);
    font-weight: 650;
    text-decoration: none;
}

.nav-link:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.nav-link.is-active {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
    color: var(--color-text);
}

.nav-link.is-active::before {
    position: absolute;
    inset-block: 0.65rem;
    inset-inline-start: -0.25rem;
    width: 0.2rem;
    border-radius: 999px;
    background: var(--color-primary);
    content: '';
}

.sidebar-footer {
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface-muted);
}

.environment-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0.25rem rgb(34 197 94 / 14%);
}

.admin-workspace {
    min-width: 0;
    min-height: 100vh;
    margin-inline-start: var(--sidebar-width);
}

.admin-topbar {
    position: sticky;
    z-index: 30;
    inset-block-start: 0;
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem clamp(1rem, 3vw, 2rem);
    border-block-end: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    backdrop-filter: blur(18px);
}

.topbar-leading,
.topbar-actions {
    min-width: 0;
    gap: 0.75rem;
}

.menu-button {
    display: none;
}

.breadcrumbs {
    min-width: 0;
}

.breadcrumbs ol,
.breadcrumbs li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.35rem;
}

.breadcrumbs li {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.breadcrumbs li:last-child {
    overflow: hidden;
    color: var(--color-text);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumbs .icon {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--color-text-muted);
}

.breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.theme-control {
    display: inline-flex;
    width: auto;
    gap: 0.5rem;
    padding-inline: 0.75rem;
}

[dir='rtl'] .breadcrumbs .icon {
    transform: rotate(180deg);
}

.theme-label {
    font-size: 0.82rem;
    font-weight: 700;
}

.account-menu {
    position: relative;
}

.account-menu summary {
    display: flex;
    min-height: 2.85rem;
    max-width: 16rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.3rem 0.65rem 0.3rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
    background: var(--color-surface);
    cursor: pointer;
    list-style: none;
}

.account-menu summary::-webkit-details-marker {
    display: none;
}

.account-avatar {
    display: inline-grid;
    width: 2.1rem;
    height: 2.1rem;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    background: var(--color-surface);
    color: var(--color-primary-hover);
    font-weight: 800;
}

.account-avatar .brand-mark {
    width: 65%;
    height: 65%;
    border-radius: 0;
    object-fit: contain;
}

.account-summary-copy strong {
    overflow: hidden;
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-popover {
    position: absolute;
    z-index: 50;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-end: 0;
    width: min(19rem, calc(100vw - 2rem));
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.account-popover-header {
    padding: 0.65rem;
    border-block-end: 1px solid var(--color-border);
    margin-block-end: 0.35rem;
}

.account-popover a,
.account-popover button {
    display: flex;
    width: 100%;
    min-height: 2.6rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    text-align: start;
    text-decoration: none;
}

.account-popover a:hover,
.account-popover button:hover {
    background: var(--color-surface-muted);
}

.admin-main {
    width: min(100% - 2rem, 80rem);
    margin: 0 auto;
    padding-block: clamp(1.5rem, 4vw, 3rem) 5rem;
}

.admin-main > * + * {
    margin-block-start: 1.25rem;
}

.page-heading {
    min-height: 4.5rem;
    justify-content: space-between;
    gap: 1rem;
}

.page-heading-copy {
    min-width: 0;
}

.page-heading h1 {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    letter-spacing: -0.035em;
}

.page-heading p {
    max-width: 47rem;
    margin: 0.4rem 0 0;
}

.page-heading-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.eyebrow {
    color: var(--color-primary-hover);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.panel,
.metric-card,
.table-wrap,
.filter-bar {
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / 3%);
}

.panel h2 {
    margin: 0;
    font-size: 1.08rem;
}

.metric-grid,
.content-grid,
.form-grid,
.choice-grid {
    display: grid;
    gap: 1rem;
}

.metric-grid,
.content-grid,
.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.form-grid > .full,
.form-grid > .field.full,
.form-grid > .field-full,
.form-grid > .form-actions.full,
.field.full,
.field-full,
.full {
    grid-column: 1 / -1;
}

.metric-card {
    position: relative;
    display: grid;
    min-height: 9rem;
    align-content: end;
    gap: 0.45rem;
    overflow: hidden;
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.metric-card::after {
    position: absolute;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: rgb(249 115 22 / 10%);
    content: '';
    inset-block-start: -3.5rem;
    inset-inline-end: -2rem;
}

.metric-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
    box-shadow: 0 12px 28px rgb(0 0 0 / 7%);
    transform: translateY(-2px);
}

.metric-card span,
.choice small {
    color: var(--color-text-muted);
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.filter-bar > .field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    margin: 0;
    align-self: flex-end;
}

.filter-bar > .field.grow {
    flex: 1 1 280px;
    width: auto;
    max-width: 100%;
}

.filter-bar > .field:not(.grow) {
    flex: 0 0 220px;
    width: 220px;
    max-width: 100%;
}

.filter-bar > .field input,
.filter-bar > .field select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.filter-bar > .button,
.filter-bar > button {
    flex: 0 0 auto;
    align-self: flex-end;
    height: 3rem;
    min-height: 3rem;
    padding: 0 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
}

.grow {
    flex: 1;
}

.table-wrap {
    overflow-x: auto;
    padding: 0;
}

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

th,
td {
    padding: 1rem;
    border-block-end: 1px solid var(--color-border);
    text-align: start;
    vertical-align: middle;
}

th {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

tbody tr:hover {
    background: color-mix(in srgb, var(--color-surface-muted) 60%, transparent);
}

tbody tr:last-child td {
    border-block-end: 0;
}

.table-action {
    text-align: end;
}

.badge {
    display: inline-flex;
    padding: 0.28rem 0.58rem;
    border-radius: 999px;
    background: var(--color-surface-muted);
    font-size: 0.75rem;
    font-weight: 750;
}

.badge-success {
    background: rgb(34 197 94 / 10%);
    color: #15803d;
}

.badge-danger {
    background: rgb(220 38 38 / 9%);
    color: var(--color-danger);
}

.choice-grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.choice {
    display: flex;
    align-items: start;
    gap: 0.65rem;
    padding: 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-bg);
}

.choice:has(input:checked) {
    border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}

.choice span {
    display: grid;
    gap: 0.2rem;
}

.permission-group {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
}

.permission-group legend {
    padding-inline: 0.45rem;
    font-weight: 750;
}

.danger-zone {
    border-color: color-mix(in srgb, var(--color-danger) 42%, var(--color-border));
}

.alert {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    border-inline-start: 0.25rem solid var(--color-primary);
}

.alert ul {
    margin-block-end: 0;
}

.alert > button {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1.35rem;
}

.alert-success {
    border-inline-start-color: #22c55e;
}

.alert-warning {
    border-inline-start-color: #eab308;
}

.sidebar-overlay {
    position: fixed;
    z-index: 35;
    inset: 0;
    border: 0;
    background: rgb(0 0 0 / 48%);
    cursor: pointer;
}

.catalog-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.catalog-shortcuts a {
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-weight: 700;
    padding: 0.55rem 0.85rem;
}

.catalog-shortcuts a:hover {
    border-color: var(--accent);
    color: var(--text);
}

.table-subtitle {
    display: block;
    color: var(--text-muted);
    margin-block-start: 0.2rem;
}

.taxonomy-list,
.media-grid {
    display: grid;
    gap: 1rem;
}

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

.taxonomy-card,
.media-card {
    align-content: start;
    display: grid;
    gap: 1rem;
}

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

.media-card__meta {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.media-card__meta strong,
.media-card__meta small {
    overflow-wrap: anywhere;
}

.pricing-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

.duo-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    width: 100%;
}

@media (max-width: 840px) {
    .duo-grid {
        grid-template-columns: 1fr;
    }
}

.pricing-card {
    align-self: start;
    align-content: start;
    background: rgba(18, 18, 22, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.pricing-card:hover {
    border-color: rgba(249, 115, 22, 0.4);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.pricing-card__heading {
    align-items: start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.form-grid.compact {
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricing-result {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: var(--radius-md);
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 1rem;
}

.pricing-result div {
    display: grid;
    gap: 0.25rem;
}

.pricing-result span,
.pricing-result small {
    color: var(--text-muted);
}

.pricing-result small {
    grid-column: 1 / -1;
}

.package-item-list {
    display: grid;
    gap: 0.75rem;
}

.package-item-row {
    align-items: end;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 3fr) minmax(8rem, 1fr);
    padding: 0.85rem;
}

@media (max-width: 74.9375rem) {
    .pricing-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .analytics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-sidebar {
        width: min(var(--sidebar-width), calc(100vw - 3rem));
        box-shadow: var(--shadow-card);
        transform: translateX(calc(-100% - 1rem));
        transition: transform 200ms ease;
    }

    [dir='rtl'] .admin-sidebar {
        transform: translateX(calc(100% + 1rem));
    }

    .admin-shell.is-navigation-open .admin-sidebar {
        transform: translateX(0);
    }

    .sidebar-close,
    .menu-button {
        display: inline-grid;
    }

    .sidebar-close {
        position: absolute;
        z-index: 2;
        inset-block-start: 1rem;
        inset-inline-end: 1rem;
    }

    .admin-workspace {
        margin-inline-start: 0;
    }

    body.has-navigation-open {
        overflow: hidden;
    }
}

/* Keep the route title clean: the action pill has its own surface. */
.admin-topbar {
    background: transparent;
    backdrop-filter: none;
}

.topbar-route-title {
    background: transparent;
    box-shadow: none;
    filter: none;
    text-shadow: none;
}

@media (max-width: 48rem) {
    .taxonomy-list,
    .media-grid,
    .pricing-card-grid,
    .pricing-result,
    .package-item-row,
    .form-grid.compact {
        grid-template-columns: 1fr;
    }
    .filter-grid,
    .stat-grid,
    .record-meta,
    .snapshot-grid,
    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .publication-summary,
    .publication-form,
    .setting-row {
        grid-template-columns: 1fr;
    }

    .filter-grid > .grow {
        grid-column: auto;
    }

    .admin-topbar {
        min-height: 4rem;
        padding-inline: 0.75rem;
    }

    .account-summary-copy,
    .theme-label {
        display: none;
    }

    .account-menu summary {
        padding: 0.3rem;
    }

    .page-heading,
    .filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .page-heading-actions {
        justify-content: stretch;
    }

    .page-heading-actions > * {
        flex: 1;
    }

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

    th,
    td {
        padding: 0.8rem;
    }
}

@media (max-width: 34rem) {
    .breadcrumbs li:not(:last-child) {
        display: none;
    }

    .admin-main {
        width: min(100% - 1rem, 80rem);
    }

    .topbar-actions .language-label,
    .topbar-actions .theme-label,
    .account-summary-copy {
        display: none;
    }
}

/* Authentication experience */
.auth-body {
    --auth-glass-bg: rgb(255 101 0 / 5%);
    --auth-glass-bg-hover: rgb(255 101 0 / 9%);
    --auth-glass-bg-focus: rgb(255 101 0 / 12%);
    --auth-glass-autofill: #fff6ee;
    --auth-button-text: #ffffff;
    --auth-frame-bg: #ffffff;
    --auth-frame-border: rgba(0, 0, 0, 0.08);
    --auth-frame-shadow: 0 35px 120px -20px rgba(100, 40, 10, 0.15), 0 0 60px -15px rgba(255, 101, 0, 0.1);
    --auth-input-bg: #fbfbfc;
    --auth-input-border: rgba(0, 0, 0, 0.1);
    --auth-input-focus-border: #ff6500;
    --auth-input-focus-glow: rgba(255, 101, 0, 0.16);
    --auth-showcase-bg: linear-gradient(155deg, #181412 0%, #0d0c0b 60%, #050505 100%);
    --auth-showcase-color: #ffffff;
    --auth-showcase-grid-line: rgba(255, 255, 255, 0.05);
    --auth-showcase-grid-dot: rgba(255, 101, 0, 0.4);
    min-width: 20rem;
    background: var(--color-bg);
}

:root[data-theme='dark'] .auth-body {
    --auth-glass-bg: rgb(255 101 0 / 6%);
    --auth-glass-bg-hover: rgb(255 101 0 / 10%);
    --auth-glass-bg-focus: rgb(255 101 0 / 14%);
    --auth-glass-autofill: #191411;
    --auth-button-text: #ffffff;
    --auth-frame-bg: #0e1017;
    --auth-frame-border: rgba(255, 255, 255, 0.08);
    --auth-frame-shadow: 0 40px 140px -20px rgba(0, 0, 0, 0.85), 0 0 90px -20px rgba(255, 101, 0, 0.22);
    --auth-input-bg: rgba(255, 255, 255, 0.03);
    --auth-input-border: rgba(255, 255, 255, 0.09);
    --auth-input-focus-border: #ff6500;
    --auth-input-focus-glow: rgba(255, 101, 0, 0.22);
    --auth-showcase-bg: linear-gradient(160deg, #13141c 0%, #090a0f 65%, #040406 100%);
    --auth-showcase-color: #ffffff;
    --auth-showcase-grid-line: rgba(255, 255, 255, 0.035);
    --auth-showcase-grid-dot: rgba(255, 101, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .auth-body {
        --auth-glass-bg: rgb(255 101 0 / 6%);
        --auth-glass-bg-hover: rgb(255 101 0 / 10%);
        --auth-glass-bg-focus: rgb(255 101 0 / 14%);
        --auth-glass-autofill: #191411;
        --auth-button-text: #ffffff;
        --auth-frame-bg: #0e1017;
        --auth-frame-border: rgba(255, 255, 255, 0.08);
        --auth-frame-shadow: 0 40px 140px -20px rgba(0, 0, 0, 0.85), 0 0 90px -20px rgba(255, 101, 0, 0.22);
        --auth-input-bg: rgba(255, 255, 255, 0.03);
        --auth-input-border: rgba(255, 255, 255, 0.09);
        --auth-input-focus-border: #ff6500;
        --auth-input-focus-glow: rgba(255, 101, 0, 0.22);
        --auth-showcase-bg: linear-gradient(160deg, #13141c 0%, #090a0f 65%, #040406 100%);
        --auth-showcase-color: #ffffff;
        --auth-showcase-grid-line: rgba(255, 255, 255, 0.035);
        --auth-showcase-grid-dot: rgba(255, 101, 0, 0.6);
    }
}

/* Base Auth Shell & Background Atmosphere */
.auth-body .auth-shell {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 3.5vw, 3rem);
    background:
        radial-gradient(ellipse 60% 50% at 15% 10%, rgb(255 101 0 / 16%), transparent 70%),
        radial-gradient(ellipse 55% 45% at 85% 90%, rgb(255 77 0 / 10%), transparent 65%),
        var(--color-bg);
    overflow: hidden;
}

.auth-body .auth-shell::before,
.auth-body .auth-shell::after {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    content: '';
}

.auth-body .auth-shell::before {
    width: 28rem;
    height: 28rem;
    background: rgb(255 101 0 / 12%);
    inset-block-start: -10rem;
    inset-inline-start: -8rem;
    animation: auth-orb-drift 22s infinite alternate ease-in-out;
}

.auth-body .auth-shell::after {
    width: 24rem;
    height: 24rem;
    background: rgb(255 130 40 / 8%);
    inset-block-end: -8rem;
    inset-inline-end: -6rem;
    animation: auth-orb-drift 18s infinite alternate-reverse ease-in-out;
}

@keyframes auth-orb-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, 30px) scale(1.15); }
}

/* Master Auth Frame */
.auth-frame {
    direction: ltr;
    width: min(100%, 76rem);
    min-height: min(48rem, calc(100svh - clamp(2.5rem, 6vw, 5rem)));
    display: grid;
    grid-template-columns: minmax(28rem, 1fr) minmax(30rem, 1.15fr);
    border: 1px solid var(--auth-frame-border);
    border-radius: 2rem;
    background: var(--auth-frame-bg);
    box-shadow: var(--auth-frame-shadow);
    overflow: hidden;
    transition: box-shadow 300ms ease, border-color 300ms ease;
}

[dir='rtl'] .auth-card,
[dir='rtl'] .auth-showcase {
    direction: rtl;
}

/* Left Column: The Auth Card */
.auth-body .auth-card {
    width: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 4.5vw, 3.75rem);
    border: 0;
    border-radius: 0;
    background: var(--auth-frame-bg);
    box-shadow: none;
}

.auth-body .auth-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.25rem;
    margin: 0;
}

.auth-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--color-text);
    text-decoration: none;
    transition: transform 180ms ease;
}

.auth-brand-link:hover {
    transform: translateY(-1px);
}

.auth-brand-mark {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    background: transparent;
    filter: drop-shadow(0 4px 12px rgba(255, 101, 0, 0.25));
}

.auth-brand-mark .brand-mark {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.auth-brand-copy {
    display: grid;
    gap: 0.15rem;
    line-height: 1.15;
}

.auth-brand-name {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.auth-brand-name strong {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.auth-badge-tag {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6500, #ff8c38);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(255, 101, 0, 0.35);
}

.auth-brand-copy small {
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Header Actions Pill (Theme & Language) */
.auth-body .auth-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--auth-input-border);
    border-radius: 999px;
    background: var(--auth-glass-bg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(14px);
}

.auth-body .auth-card-actions .locale-switch {
    display: flex;
    margin: 0;
    padding-inline-end: 0.2rem;
    border-inline-end: 1px solid var(--auth-input-border);
}

.auth-body .theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    transition: all 180ms ease;
    cursor: pointer;
}

.auth-body .theme-toggle:hover {
    background: var(--auth-glass-bg-hover);
    color: var(--color-primary);
    transform: scale(1.06);
}

.auth-body .language-control {
    min-width: 2.35rem;
    gap: 0;
    padding-inline: 0.2rem;
}

.auth-body .language-mark {
    min-width: 1.85rem;
    height: 1.85rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: all 180ms ease;
}

.auth-body .language-label {
    display: none;
}

.auth-body .language-control:hover .language-mark {
    background: var(--auth-glass-bg-hover);
    color: var(--color-primary);
}

/* Card Content Area */
.auth-card-content {
    width: min(100%, 28.5rem);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    margin: clamp(2rem, 5vh, 4rem) auto 2rem;
}

.auth-card-content > .alert {
    margin: 0 0 1.5rem;
    padding: 0.85rem 1.15rem;
    border-radius: 0.85rem;
    border-inline-start: 4px solid var(--color-primary);
    background: var(--auth-glass-bg);
    font-size: 0.88rem;
}

/* Heading & Eyebrow Badge */
.auth-heading {
    margin-block-end: 2.25rem;
}

.auth-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 0.85rem;
    padding: 0.32rem 0.85rem 0.32rem 0.65rem;
    border: 1px solid rgba(255, 101, 0, 0.22);
    border-radius: 999px;
    background: rgba(255, 101, 0, 0.08);
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-pill-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
    animation: auth-pulse 2s infinite ease-in-out;
}

.auth-heading h1 {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(2.1rem, 3.8vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.auth-heading .muted {
    max-width: 34rem;
    margin: 0.65rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* Form & Input Fields */
.auth-body .auth-form {
    gap: 1.35rem;
}

.auth-field {
    gap: 0.5rem;
}

.auth-field > label {
    color: var(--color-text);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.auth-input-control {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 1rem;
    transition: all 200ms ease;
}

.auth-input-control .auth-input-icon {
    display: none !important;
}

.auth-body .auth-input-control input {
    width: 100%;
    font-size: 0.96rem;
    padding: 0.85rem 1.15rem;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.auth-body .auth-input-control.auth-password-control input {
    padding-inline-end: 3.4rem;
}

.auth-body .auth-input-control input:hover {
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    background:
        linear-gradient(135deg, rgb(255 255 255 / 9%), transparent 58%),
        var(--auth-glass-bg-hover);
}

.auth-body .auth-input-control input:focus {
    border-color: var(--color-primary);
    outline: 0;
    background:
        linear-gradient(135deg, rgb(255 255 255 / 10%), transparent 58%),
        var(--auth-glass-bg-focus);
    box-shadow:
        0 0 0 4px rgb(255 101 0 / 11%),
        0 14px 34px rgb(0 0 0 / 7%);
}

.auth-body .auth-input-control input:-webkit-autofill,
.auth-body .auth-input-control input:-webkit-autofill:hover,
.auth-body .auth-input-control input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text);
    caret-color: var(--color-text);
    -webkit-box-shadow:
        0 0 0 1000px var(--auth-glass-autofill) inset,
        0 10px 28px rgb(0 0 0 / 5%);
    transition: background-color 9999s ease-out 0s;
}

.auth-body .auth-input-control input[aria-invalid='true'] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 4px rgb(220 38 38 / 8%);
}

.auth-password-toggle {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0.65rem;
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transform: translateY(-50%);
}

.auth-password-toggle:hover,
.auth-password-toggle.is-visible {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
}

.password-field-control {
    position: relative;
}

.password-field-control > input {
    width: 100%;
    padding-inline-end: 3.6rem;
}

.password-field-toggle {
    position: absolute;
    inset-block-start: calc(50% - 2px);
    inset-inline-end: .8rem;
    display: grid;
    place-items: center;
    min-width: 2rem;
    width: 2rem;
    min-height: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.password-field-toggle .icon {
    width: 1.15rem;
    height: 1.15rem;
}

.password-field-toggle [data-eye-show],
.password-field-toggle [data-eye-hide] {
    display: grid;
    place-items: center;
}

.password-field-toggle [data-eye-hide],
.password-field-toggle.is-visible [data-eye-show] {
    display: none;
}

.password-field-toggle.is-visible [data-eye-hide] {
    display: grid;
}

.password-field-toggle:hover,
.password-field-toggle:focus-visible,
.password-field-toggle.is-visible {
    border-color: color-mix(in srgb, var(--color-primary) 52%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.auth-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block: 0.1rem 0.25rem;
}

.auth-checkbox {
    gap: 0.65rem;
    color: var(--color-text-muted);
    font-size: 0.86rem;
    cursor: pointer;
}

.auth-checkbox input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: 0.35rem;
    accent-color: var(--color-primary);
}

.auth-forgot-link {
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.auth-forgot-link:hover {
    text-decoration: underline;
}

.auth-body .auth-submit {
    position: relative;
    width: 100%;
    min-height: 2.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-start: 0.85rem;
    padding: 0.65rem 2rem;
    border: 1px solid rgba(234, 88, 12, 0.65);
    border-radius: 9999px !important;
    background: linear-gradient(180deg, #3a1a0d 0%, #261108 100%);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    transition: all 200ms ease;
    text-align: center;
}

.auth-body .auth-submit > span {
    position: relative;
    z-index: 2;
    text-align: center;
    flex-grow: 1;
}

.auth-body .auth-submit > span::before {
    display: none;
}

.auth-body .auth-submit .icon {
    display: none !important;
}

.auth-body .auth-submit::after {
    display: none !important;
}

.auth-body .auth-submit:hover {
    transform: translateY(-1px);
    border-color: rgba(249, 115, 22, 0.9);
    background: linear-gradient(180deg, #452011 0%, #2e140a 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 14px rgba(249, 115, 22, 0.25) inset;
}

.auth-body .auth-submit:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.auth-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    text-align: center;
}

.auth-security-icon {
    width: 1.65rem;
    height: 1.65rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgb(255 101 0 / 10%);
    color: var(--color-primary);
}

.auth-security-icon .icon {
    width: 0.9rem;
    height: 0.9rem;
}

/* ==========================================================================
   Right Column: The High-Tech Cybernetic Showcase
   ========================================================================== */
.auth-showcase {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: clamp(2.5rem, 5vw, 4.5rem);
    background: var(--auth-showcase-bg);
    color: var(--auth-showcase-color);
    overflow: hidden;
}

/* Atmospheric Glowing Orbs */
.auth-showcase-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    overflow: hidden;
}

.auth-ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(75px);
    opacity: 0.65;
    animation: auth-orb-pulse 10s infinite alternate ease-in-out;
}

.auth-ambient-orb--1 {
    width: 22rem;
    height: 22rem;
    background: radial-gradient(circle, #ff6500 0%, transparent 70%);
    inset-block-start: 15%;
    inset-inline-start: 10%;
}

.auth-ambient-orb--2 {
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle, #ff3d00 0%, transparent 70%);
    inset-block-end: 15%;
    inset-inline-end: 10%;
    animation-delay: -5s;
}

.auth-ambient-orb--3 {
    width: 14rem;
    height: 14rem;
    background: radial-gradient(circle, #ff9500 0%, transparent 70%);
    inset-block-start: 50%;
    inset-inline-start: 45%;
    animation-delay: -2.5s;
    opacity: 0.35;
}

@keyframes auth-orb-pulse {
    0% { transform: scale(0.85) translate(0, 0); opacity: 0.45; }
    100% { transform: scale(1.15) translate(20px, -15px); opacity: 0.75; }
}

/* Perspective Grid Matrix */
.auth-showcase-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.55;
    background-image:
        radial-gradient(circle, var(--auth-showcase-grid-dot) 1.2px, transparent 1.6px),
        linear-gradient(var(--auth-showcase-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--auth-showcase-grid-line) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem, 3.5rem 3.5rem, 3.5rem 3.5rem;
    background-position: 0 0, 1.75rem 1.75rem, 1.75rem 1.75rem;
    mask-image: radial-gradient(ellipse 70% 70% at center, black 25%, transparent 80%);
}

.auth-showcase-center {
    position: relative;
    width: 100%;
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(2rem, 4vh, 3rem);
}

/* Hero Brand 3D Visual Stage */
.auth-hero-visual {
    position: relative;
    width: min(20rem, 80%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.auth-hero-glow {
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 101, 0, 0.38) 0%, rgba(255, 77, 0, 0.12) 45%, transparent 75%);
    filter: blur(28px);
    pointer-events: none;
    animation: auth-glow-breathe 4s infinite alternate ease-in-out;
}

@keyframes auth-glow-breathe {
    0% { transform: scale(0.88); opacity: 0.6; }
    100% { transform: scale(1.15); opacity: 1; filter: blur(34px); }
}

/* Cosmic Orbit Rings */
.auth-hero-orbit-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.auth-hero-orbit-ring--outer {
    inset: 0;
    border: 1.5px dashed rgba(255, 101, 0, 0.22);
    animation: auth-spin-slow 40s linear infinite;
}

.auth-hero-orbit-ring--inner {
    inset: 12%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 101, 0, 0.45);
    border-bottom-color: rgba(255, 101, 0, 0.3);
    animation: auth-spin-reverse 26s linear infinite;
}

@keyframes auth-spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes auth-spin-reverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

/* The Floating Hero Logo */
.auth-hero-logo-box {
    position: relative;
    z-index: 3;
    width: 6.25rem;
    height: 6.25rem;
    display: grid;
    place-items: center;
    animation: auth-float 5s infinite ease-in-out;
}

.auth-hero-logo-box .brand-mark {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        drop-shadow(0 0 30px rgba(255, 101, 0, 0.6))
        drop-shadow(0 12px 20px rgba(0, 0, 0, 0.65));
}

@keyframes auth-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Floating Glass Hologram Chips */
.auth-floating-chip {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.35),
        0 0 16px rgba(255, 101, 0, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.25) inset;
    backdrop-filter: blur(16px) saturate(140%);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
}

.auth-chip-top {
    inset-block-start: -0.5rem;
    inset-inline-start: -1rem;
    animation: auth-chip-float-1 6s infinite ease-in-out;
}

.auth-chip-bottom-right {
    inset-block-end: 1rem;
    inset-inline-end: -1.5rem;
    animation: auth-chip-float-2 7s infinite ease-in-out;
}

.auth-chip-bottom-left {
    inset-block-end: -1rem;
    inset-inline-start: 1rem;
    animation: auth-chip-float-3 6.5s infinite ease-in-out;
}

@keyframes auth-chip-float-1 {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes auth-chip-float-2 {
    0%, 100% { transform: translateY(0) rotate(1deg); }
    50% { transform: translateY(-8px) rotate(-1deg); }
}

@keyframes auth-chip-float-3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.auth-chip-icon {
    display: grid;
    place-items: center;
    color: #ff8c38;
}

.auth-chip-icon .icon {
    width: 0.85rem;
    height: 0.85rem;
}

.auth-chip-pulse {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981, 0 0 14px rgba(16, 185, 129, 0.8);
    animation: auth-pulse 1.8s infinite ease-in-out;
}

/* Showcase Typography & Headline */
.auth-showcase-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

.auth-showcase-headline {
    margin: 0;
    font-size: clamp(1.4rem, 2.3vw, 1.85rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.025em;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.auth-showcase-headline span {
    color: rgba(255, 255, 255, 0.88);
}

.auth-gradient-text {
    background: linear-gradient(135deg, #ff8c38 0%, #ff5100 60%, #ff3700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 35px rgba(255, 101, 0, 0.4);
    font-weight: 800;
}

.auth-showcase-desc {
    max-width: 24rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Metrics Stats Strip */
.auth-metrics-bar {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    margin-block-start: 0.75rem;
    padding: 0.75rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.auth-metric {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: center;
}

.auth-metric strong {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.auth-metric span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.auth-metric-separator {
    width: 1px;
    height: 1.75rem;
    background: rgba(255, 255, 255, 0.1);
}

/* Responsive Rules */
@media (max-width: 66rem) {
    .auth-frame {
        width: min(100%, 36rem);
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .auth-showcase {
        display: none;
    }

    .auth-body .auth-card {
        min-height: min(46rem, calc(100svh - 2.5rem));
        border-radius: inherit;
    }
}

@media (max-width: 36rem) {
    .auth-body .auth-shell {
        place-items: stretch;
        padding: 0;
    }

    .auth-frame {
        width: 100%;
        min-height: 100svh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-body .auth-card {
        min-height: 100svh;
        padding: 1.25rem;
        border-radius: 0;
    }

    .auth-brand-copy small,
    .auth-body .language-label {
        display: none;
    }

    .auth-card-content {
        margin-block: 2.5rem 1.75rem;
    }

    .auth-heading {
        margin-block-end: 1.65rem;
    }

    .auth-heading h1 {
        font-size: 2rem;
    }

    .auth-form-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* Collapsible sidebar navigation groups */
.admin-sidebar .nav-group + .nav-group {
    margin-block-start: 1rem;
}

.admin-sidebar .nav-group h2 {
    margin: 0;
    font-size: inherit;
    letter-spacing: 0;
}

.admin-sidebar .nav-group-toggle {
    width: 100%;
    min-height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    color: color-mix(in srgb, var(--color-text) 82%, var(--color-text-muted));
    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0;
    text-align: start;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.admin-sidebar .nav-group-toggle:hover,
.admin-sidebar .nav-group-toggle:focus-visible,
.admin-sidebar .nav-group.is-expanded .nav-group-toggle {
    background: color-mix(in srgb, var(--color-primary) 4%, transparent);
    color: color-mix(in srgb, var(--color-primary) 68%, var(--color-text));
}

.admin-sidebar .nav-group-toggle .icon {
    width: 0.85rem;
    height: 0.85rem;
    flex: 0 0 auto;
    transition: transform 180ms ease;
}

html[lang^='ar'] .admin-sidebar .nav-group-toggle {
    font-family: "IBM Plex Sans Arabic", "Inter", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0;
}

.admin-sidebar .nav-group.is-expanded .nav-group-toggle .icon {
    transform: rotate(90deg);
}

[dir='rtl'] .admin-sidebar .nav-group.is-expanded .nav-group-toggle .icon {
    transform: rotate(-90deg);
}

.admin-sidebar .nav-group-items {
    margin-block-start: 0.35rem;
}

.admin-sidebar .nav-group.is-expanded .nav-group-items {
    animation: nav-group-reveal 180ms ease both;
}

@keyframes nav-group-reveal {
    from {
        opacity: 0;
        transform: translateY(-0.35rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 75rem) {
    .admin-shell.is-sidebar-collapsed .nav-group-toggle {
        display: none;
    }

    .admin-shell.is-sidebar-collapsed .nav-group-items[hidden] {
        display: block;
    }

    .admin-shell.is-sidebar-collapsed .nav-group-items {
        margin-block-start: 0;
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-sidebar .nav-group.is-expanded .nav-group-items {
        animation: none;
    }

    .admin-sidebar .nav-group-toggle .icon {
        transition: none;
    }
}

/* Compact vertical sidebar identity */
.admin-sidebar .sidebar-brand {
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
}

.admin-sidebar .sidebar-brand > span:last-child {
    display: block;
    line-height: 1;
}

.admin-sidebar .sidebar-brand strong {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
}

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

/* Business intelligence overview */
.admin-main:has(.overview-dashboard) {
    width: min(100% - 2rem, 96rem);
    padding-block-start: 1.25rem;
}

.overview-dashboard {
    --overview-surface: var(--color-surface);
    --overview-elevated: color-mix(in srgb, var(--color-surface) 90%, var(--color-surface-muted));
    --overview-border: var(--color-border);
    --overview-orange: #ff6500;
    --overview-success: #35b87a;
    --overview-warning: #d9a441;
    --overview-danger: #e55353;
    display: grid;
    gap: 1rem;
}

:root[data-theme='dark'] .overview-dashboard,
:root:not([data-theme]) .overview-dashboard {
    --overview-surface: #111315;
    --overview-elevated: #16181b;
    --overview-border: #292b2f;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .overview-dashboard {
        --overview-surface: #fff;
        --overview-elevated: #f6f7f8;
        --overview-border: #e6e8eb;
    }
}

/* Overview dashboard — reference-aligned conversion and analytics layout. */
.overview-dashboard {
    --overview-orange: #ff5a00;
    --overview-orange-2: #ff8516;
    --overview-orange-3: #ffad63;
    --overview-orange-4: #ffd4b2;
    --overview-ink: #171717;
    --overview-muted: #737373;
    --overview-surface: #fff;
    --overview-elevated: #f7f7f7;
    --overview-border: #e8e8e8;
    --overview-shadow: 0 10px 34px rgb(24 24 24 / 4%);
    width: 100%;
    max-width: 100rem;
    margin-inline: auto;
    gap: clamp(1rem, 1.6vw, 1.5rem);
    color: var(--overview-ink);
}

:root[data-theme='dark'] .overview-dashboard {
    --overview-ink: #f6f6f6;
    --overview-muted: #a8a8aa;
    --overview-surface: #151515;
    --overview-elevated: #202020;
    --overview-border: #2d2d2d;
    --overview-shadow: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .overview-dashboard {
        --overview-ink: #f6f6f6;
        --overview-muted: #a8a8aa;
        --overview-surface: #151515;
        --overview-elevated: #202020;
        --overview-border: #2d2d2d;
        --overview-shadow: none;
    }
}

.overview-dashboard .overview-heading,
.overview-dashboard .overview-toolbar,
.overview-dashboard .overview-error,
.overview-dashboard .overview-freshness {
    max-width: none;
}

.overview-dashboard .overview-heading {
    align-items: center;
    gap: 1rem;
    padding-inline: 0.25rem;
}

.overview-dashboard .overview-heading__meta,
.overview-dashboard .overview-period-chip {
    flex-wrap: wrap;
}

.overview-dashboard .overview-toolbar {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) auto auto;
    align-items: end;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--overview-border);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--overview-surface) 92%, transparent);
    box-shadow: var(--overview-shadow);
}

.overview-dashboard .overview-search,
.overview-dashboard .overview-date-range {
    min-height: 2.75rem;
    border-color: var(--overview-border);
    border-radius: 0.9rem;
    background: var(--overview-elevated);
}

.overview-dashboard .overview-date-range label input {
    min-height: 2.25rem;
}

.overview-dashboard .overview-filter-button {
    min-height: 2.75rem;
}

.overview-dashboard .overview-toolbar-status {
    grid-column: 1 / -1;
}

.overview-dashboard .overview-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: clamp(1.1rem, 2vw, 1.75rem);
    border: 1px solid var(--overview-border);
    border-radius: 1.5rem;
    background: var(--overview-surface);
    box-shadow: var(--overview-shadow);
    color: var(--overview-ink);
}

.overview-dashboard .overview-card:hover {
    box-shadow: 0 14px 38px rgb(24 24 24 / 6%);
    transform: translateY(-2px);
}

:root[data-theme='dark'] .overview-dashboard .overview-card:hover {
    box-shadow: none;
}

.overview-dashboard .overview-card__heading {
    position: relative;
    z-index: 3;
    margin-block-end: 1rem;
}

.overview-dashboard .overview-card__heading > div {
    gap: 0.7rem;
}

.overview-dashboard .overview-card__heading h2 {
    color: var(--overview-ink);
    font-size: clamp(1rem, 1.35vw, 1.3rem);
    line-height: 1.25;
}

.overview-dashboard .overview-card__heading p {
    margin-block-start: 0.2rem;
    color: var(--overview-muted);
    font-size: 0.78rem;
}

.overview-dashboard .overview-section-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--overview-orange) 9%, var(--overview-surface));
    color: var(--overview-orange);
}

.conversion-overview {
    min-height: 31rem;
}

.conversion-hub {
    position: relative;
    display: grid;
    min-height: 24.375rem;
    grid-template-columns: minmax(12rem, 1fr) minmax(15rem, 18rem) minmax(12rem, 1fr);
    grid-template-rows: repeat(2, minmax(10rem, 1fr));
    align-items: center;
    gap: 1.2rem clamp(1.5rem, 4vw, 4.5rem);
    isolation: isolate;
}

.conversion-connectors {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.conversion-connectors__lines path {
    fill: none;
    stroke: color-mix(in srgb, var(--overview-muted) 62%, transparent);
    stroke-linecap: round;
    stroke-width: 1.8;
    vector-effect: non-scaling-stroke;
}

.conversion-connectors__dots circle {
    fill: color-mix(in srgb, var(--overview-muted) 75%, var(--overview-surface));
}

.conversion-metric {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 9.5rem;
    align-items: center;
    gap: clamp(0.8rem, 1.7vw, 1.3rem);
    padding: 1.25rem clamp(1rem, 2vw, 1.6rem);
    border: 1px solid var(--overview-border);
    border-radius: 1.35rem;
    outline: 0;
    background: var(--overview-surface);
    box-shadow: 0 5px 22px rgb(22 22 22 / 3%);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.conversion-metric:hover,
.conversion-metric:focus-visible {
    border-color: color-mix(in srgb, var(--overview-orange) 45%, var(--overview-border));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--overview-orange) 9%, transparent);
    transform: translateY(-2px);
}

.conversion-metric--service-view { grid-column: 1; grid-row: 1; }
.conversion-metric--order-completed { grid-column: 1; grid-row: 2; }
.conversion-metric--visit { grid-column: 3; grid-row: 1; }
.conversion-metric--order-started { grid-column: 3; grid-row: 2; }

.conversion-metric__icon {
    display: grid;
    width: clamp(3.7rem, 4.5vw, 4.6rem);
    height: clamp(3.7rem, 4.5vw, 4.6rem);
    flex: 0 0 auto;
    place-items: center;
    border: 1.5px solid var(--overview-orange);
    border-radius: 50%;
    color: var(--overview-orange);
}

.conversion-metric__icon .icon {
    width: 1.85rem;
    height: 1.85rem;
    stroke-width: 2;
}

.conversion-metric__copy {
    display: grid;
    min-width: 0;
    gap: 0.28rem;
}

.conversion-metric__copy > span {
    color: var(--overview-ink);
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    font-weight: 700;
}

.conversion-metric__copy > strong {
    color: var(--overview-ink);
    font-size: clamp(1.65rem, 2.5vw, 2.2rem);
    letter-spacing: -0.035em;
    line-height: 1;
}

.conversion-metric__copy small {
    color: var(--overview-muted);
    font-size: 0.92rem;
}

.conversion-metric__copy small b {
    color: inherit;
    font-weight: 500;
}

.conversion-gauge {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(100%, 21rem);
    aspect-ratio: 1;
    grid-column: 2;
    grid-row: 1 / 3;
    place-items: center;
    justify-self: center;
    filter: drop-shadow(0 12px 24px rgb(23 23 23 / 5%));
}

.conversion-gauge::before,
.conversion-gauge::after {
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--overview-border) 80%, transparent);
    border-radius: 50%;
    content: '';
    pointer-events: none;
}

.conversion-gauge::before { inset: 5%; }
.conversion-gauge::after { inset: 10%; }

.conversion-gauge svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
}

.conversion-gauge circle {
    fill: none;
    transform-origin: center;
}

.conversion-gauge__outer {
    stroke: color-mix(in srgb, var(--overview-border) 68%, transparent);
    stroke-width: 1;
}

.conversion-gauge__track,
.conversion-gauge__progress {
    stroke-linecap: round;
    stroke-width: 13;
}

.conversion-gauge__track { stroke: var(--overview-elevated); }

.conversion-gauge__progress {
    stroke: url('#overview-conversion-gradient');
    stroke: var(--overview-orange);
    stroke-dasharray: var(--conversion-progress) 100;
    transition: stroke-dasharray 520ms ease;
}

.conversion-gauge__value {
    position: absolute;
    z-index: 2;
    display: grid;
    max-width: 70%;
    gap: 0.45rem;
    place-items: center;
    text-align: center;
}

.conversion-gauge__value strong {
    color: var(--overview-ink);
    font-size: clamp(2.45rem, 5vw, 4.35rem);
    letter-spacing: -0.055em;
    line-height: 0.95;
}

.conversion-gauge__value span {
    color: var(--overview-ink);
    font-size: clamp(0.88rem, 1.2vw, 1.1rem);
    font-weight: 700;
}

.overview-dashboard .overview-tooltip {
    z-index: 10;
    border-color: var(--overview-border);
    border-radius: 0.85rem;
    background: var(--overview-surface);
    color: var(--overview-muted);
    box-shadow: 0 12px 30px rgb(24 24 24 / 12%);
}

.overview-analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 1.6vw, 1.5rem);
}

.overview-analytics-grid .overview-card {
    min-height: clamp(22rem, 34vw, 28rem);
}

.overview-chart-wrap {
    height: clamp(16rem, 25vw, 21rem);
    padding-block-start: 0.5rem;
}

.overview-range-label {
    border: 1px solid var(--overview-border);
    border-radius: 0.75rem;
    background: var(--overview-elevated);
    color: var(--overview-muted);
}

.traffic-radial-layout {
    display: grid;
    min-height: 20rem;
    grid-template-columns: minmax(14rem, 1fr) minmax(13rem, 0.8fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 3.5rem);
}

.traffic-radial {
    display: grid;
    width: min(100%, 20rem);
    aspect-ratio: 1;
    place-items: center;
    justify-self: center;
}

.traffic-radial svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
}

.traffic-radial circle {
    fill: none;
    stroke-linecap: round;
    transform-origin: center;
}

.traffic-radial__track {
    stroke: var(--overview-elevated);
    stroke-width: 11;
}

.traffic-radial__ring {
    stroke: var(--overview-orange);
    stroke-width: 11;
    stroke-dasharray: var(--ring-progress) 100;
    transition: stroke-dasharray 520ms ease;
}

.traffic-radial__ring--2 { stroke: var(--overview-orange-2); }
.traffic-radial__ring--3 { stroke: var(--overview-orange-3); }
.traffic-radial__ring--4 { stroke: var(--overview-orange-4); }
.traffic-radial__ring--5 { stroke: color-mix(in srgb, var(--overview-orange) 50%, #ffd7bb); }

.traffic-legend {
    display: grid;
    gap: 0.85rem;
}

.traffic-legend__row {
    position: relative;
    display: grid;
    grid-template-columns: 0.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding-block: 0.35rem;
    outline: 0;
}

.traffic-legend__dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--overview-orange);
}

.traffic-legend__row--2 .traffic-legend__dot { background: var(--overview-orange-2); }
.traffic-legend__row--3 .traffic-legend__dot { background: var(--overview-orange-3); }
.traffic-legend__row--4 .traffic-legend__dot { background: var(--overview-orange-4); }
.traffic-legend__row--5 .traffic-legend__dot { background: color-mix(in srgb, var(--overview-orange) 50%, #ffd7bb); }

.traffic-legend__row > span:nth-of-type(2) {
    color: var(--overview-muted);
    font-weight: 600;
}

.traffic-legend__row > strong {
    color: var(--overview-ink);
    font-size: 1rem;
}

.traffic-legend__row > small {
    grid-column: 2 / 4;
    color: var(--overview-muted);
    font-size: 0.72rem;
}

.activity-mini-grid {
    display: grid;
    min-height: 18.5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.75rem;
}

.activity-mini-card {
    display: grid;
    min-width: 0;
    grid-template-rows: 6.5rem auto auto;
    overflow: hidden;
    border: 1px solid var(--overview-border);
    border-radius: 1.2rem;
    background: var(--overview-surface);
}

.activity-mini-card__icon {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--overview-orange) 9%, var(--overview-surface));
    color: var(--overview-orange);
}

.activity-mini-card__icon .icon {
    width: 2rem;
    height: 2rem;
}

.activity-mini-card__icon [data-activity-icon] {
    display: grid;
    place-items: center;
}

.activity-mini-card__icon [data-activity-icon][hidden] { display: none; }

.activity-mini-card > div {
    display: grid;
    gap: 0.3rem;
    padding: 1rem 0.85rem 0.5rem;
}

.activity-mini-card strong {
    color: var(--overview-ink);
    font-size: 0.9rem;
}

.activity-mini-card div span,
.activity-mini-card time {
    color: var(--overview-muted);
    font-size: 0.75rem;
}

.activity-mini-card time {
    align-self: end;
    padding: 0 0.85rem 1rem;
}

.project-status-summary {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1rem;
    margin-block: clamp(1rem, 3vw, 2.5rem);
}

.project-status-summary span {
    color: var(--overview-muted);
    font-size: 1rem;
}

.project-status-summary strong {
    color: var(--overview-ink);
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.04em;
}

.project-segmented-bar {
    display: flex;
    width: 100%;
    height: 1.15rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--overview-elevated);
    direction: rtl;
}

.project-segment {
    display: block;
    min-width: 0;
    height: 100%;
    border-inline-end: 2px solid var(--overview-surface);
    background: var(--overview-orange);
    transition: width 520ms ease;
}

.project-segment:first-child { border-start-start-radius: 999px; border-end-start-radius: 999px; }
.project-segment:last-child { border-inline-end: 0; border-start-end-radius: 999px; border-end-end-radius: 999px; }
.project-segment--in-progress { background: var(--overview-orange-2); }
.project-segment--requested { background: var(--overview-orange-3); }
.project-segment--paused { background: #d8d8d8; }

.project-status-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block-start: 1.4rem;
}

.project-status-legend > div {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
    place-items: center;
    padding-inline: 0.75rem;
    text-align: center;
}

.project-status-legend > div + div {
    border-inline-start: 1px solid var(--overview-border);
}

.project-status-legend strong {
    color: var(--overview-ink);
    font-size: 1.25rem;
}

.project-status-legend span,
.project-status-legend small {
    color: var(--overview-muted);
    font-size: 0.78rem;
}

.overview-dashboard .overview-empty {
    z-index: 5;
    border-color: var(--overview-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--overview-surface) 92%, transparent);
}

.overview-dashboard.is-loading .overview-card {
    opacity: 0.55;
    pointer-events: none;
}

@media (max-width: 75rem) {
    .conversion-hub {
        min-height: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
        gap: 1rem;
    }

    .conversion-connectors { display: none; }
    .conversion-gauge { width: min(19rem, 70vw); grid-column: 1 / -1; grid-row: 1; }
    .conversion-metric--service-view { grid-column: 1; grid-row: 2; }
    .conversion-metric--visit { grid-column: 2; grid-row: 2; }
    .conversion-metric--order-completed { grid-column: 1; grid-row: 3; }
    .conversion-metric--order-started { grid-column: 2; grid-row: 3; }
    .activity-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 64rem) {
    .overview-dashboard .overview-toolbar { grid-template-columns: minmax(12rem, 1fr) auto; }
    .overview-dashboard .overview-filter-button { grid-column: 2; }
    .overview-analytics-grid { grid-template-columns: 1fr; }
    .overview-analytics-grid .overview-card { min-height: 22rem; }
    .overview-chart-wrap { height: 18rem; }
}

/* Careers page: scoped so the administration UI and other public pages keep their layout. */
.careers-hero {
    padding: clamp(5rem, 9vw, 8rem) 1.25rem 2rem;
    text-align: center;
    background: radial-gradient(circle at 50% 0%, rgba(255, 101, 0, .13), transparent 48%);
}
.careers-hero h1 { margin: .4rem 0; font-size: clamp(2.2rem, 6vw, 4.5rem); }
.careers-hero__subtitle { max-width: 52rem; margin: 0 auto 2rem; color: var(--muted, #aaa); font-size: 1.08rem; line-height: 1.9; }
.career-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; max-width: 52rem; margin: 1.5rem auto; }
.career-search input { min-height: 3.35rem; border-radius: 1rem; }
.career-categories { display: flex; justify-content: center; flex-wrap: wrap; gap: .65rem; margin: 1.5rem auto; }
.career-category { color: inherit; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .7rem 1.2rem; text-decoration: none; transition: .2s ease; }
.career-category:hover, .career-category.is-active { color: #fff; background: #ff6500; border-color: #ff6500; box-shadow: 0 8px 28px rgba(255,101,0,.22); }
.career-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.career-card { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid rgba(255,255,255,.12); border-radius: 1.35rem; background: rgba(20,18,17,.82); box-shadow: 0 20px 60px rgba(0,0,0,.18); }
.career-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.career-card__head h2 { margin: .25rem 0; font-size: clamp(1.35rem, 2.5vw, 2rem); }
.career-card__code { margin: 0; color: #ff6500; font-weight: 800; }
.career-card__type { padding: .45rem .75rem; border-radius: 999px; background: rgba(255,101,0,.1); color: #ff7a22; white-space: nowrap; }
.career-card__meta { color: var(--muted, #aaa); }
.career-disclosure { margin-top: .8rem; border-top: 1px solid rgba(255,255,255,.09); padding-top: .8rem; }
.career-disclosure summary { color: #ff7a22; cursor: pointer; font-weight: 800; list-style: none; }
.career-disclosure summary::-webkit-details-marker { display: none; }
.career-disclosure__body { padding: 1rem 0; line-height: 1.9; }
.career-apply > summary.button { display: inline-flex; color: #fff; }
.career-application-form { margin-top: 1rem; padding: 1rem; border-radius: 1rem; background: rgba(255,255,255,.035); }
.career-application-form output { display: block; margin-top: .35rem; color: var(--muted, #aaa); font-size: .82rem; direction: ltr; text-align: start; }
.career-application-form small { color: var(--muted, #aaa); }
@media (max-width: 52rem) {
    .career-card-grid { grid-template-columns: 1fr; }
    .career-search { grid-template-columns: 1fr; }
    .career-card__head { flex-direction: column; }
}
html[data-theme="light"] .career-card, body.theme-light .career-card { background: rgba(255,255,255,.9); border-color: rgba(30,30,30,.1); }

.section-save-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.section-save-button {
    min-width: 10.5rem;
    justify-content: center;
    gap: 0.55rem;
    font-weight: 750;
}

[dir="rtl"] .section-save-actions {
    justify-content: flex-start;
}

@media (max-width: 40rem) {
    .section-save-button {
        width: 100%;
    }
}

/* Partner logo cards: the logo is the interface; controls stay hidden until needed. */
.partner-logo-only-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.partner-logo-only-card {
    position: relative;
    min-width: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.media-picker-image-only,
.media-picker-image-only__surface {
    display: block;
    width: 100%;
    height: 100%;
}

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

.media-picker-image-only__surface {
    position: relative;
    min-height: 150px;
    padding: 1.25rem;
    cursor: pointer;
    background: #fff;
    color: #8a8a8a;
    margin: 0;
}

.media-picker-image-only__image {
    width: 100%;
    height: 110px;
    object-fit: contain;
    object-position: center;
}

.media-picker-image-only__placeholder {
    min-height: 110px;
    align-items: center;
    justify-content: center;
}

.media-picker-image-only__edit,
.partner-logo-only-card__delete {
    position: absolute;
    z-index: 3;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.media-picker-image-only__edit {
    inset-inline-start: 0.75rem;
    inset-block-end: 0.75rem;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 90, 0, 0.92);
    box-shadow: 0 8px 24px rgba(255, 90, 0, 0.28);
}

.partner-logo-only-card__delete {
    inset-inline-end: 0.75rem;
    inset-block-end: 0.75rem;
    margin: 0;
}

.partner-logo-only-card__delete button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #dc2626;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.partner-logo-only-card:hover .media-picker-image-only__edit,
.partner-logo-only-card:focus-within .media-picker-image-only__edit,
.partner-logo-only-card:hover .partner-logo-only-card__delete,
.partner-logo-only-card:focus-within .partner-logo-only-card__delete {
    opacity: 1;
    transform: translateY(0);
}

.media-picker-image-only__spinner {
    position: absolute;
    inset: 0;
    z-index: 4;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(10, 10, 12, 0.72);
    font-size: 0.82rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

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

@media (hover: none) {
    .media-picker-image-only__edit,
    .partner-logo-only-card__delete {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 48rem) {
    .overview-dashboard .overview-heading { align-items: flex-start; }
    .overview-dashboard .overview-toolbar { grid-template-columns: 1fr; }
    .overview-dashboard .overview-date-range { width: 100%; }
    .overview-dashboard .overview-filter-button { width: 100%; grid-column: 1; }
    .conversion-metric { min-height: 8.75rem; }
    .traffic-radial-layout { grid-template-columns: 1fr; }
    .traffic-radial { width: min(17rem, 80vw); }
    .project-status-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0; }
    .project-status-legend > div:nth-child(3) { border-inline-start: 0; }
}

@media (max-width: 35rem) {
    .overview-dashboard .overview-card { padding: 1rem; border-radius: 1.2rem; }
    .conversion-hub { grid-template-columns: 1fr; }
    .conversion-gauge { width: min(15.5rem, 82vw); grid-column: 1; }
    .conversion-metric--service-view,
    .conversion-metric--visit,
    .conversion-metric--order-completed,
    .conversion-metric--order-started { grid-column: 1; }
    .conversion-metric--service-view { grid-row: 2; }
    .conversion-metric--visit { grid-row: 3; }
    .conversion-metric--order-started { grid-row: 4; }
    .conversion-metric--order-completed { grid-row: 5; }
    .activity-mini-grid { grid-template-columns: 1fr; }
    .activity-mini-card { grid-template-columns: 5rem minmax(0, 1fr); grid-template-rows: auto auto; }
    .activity-mini-card__icon { grid-row: 1 / 3; }
    .activity-mini-card > div { padding-block-end: 0.25rem; }
    .activity-mini-card time { padding-block-end: 0.8rem; }
    .project-status-legend { grid-template-columns: 1fr; }
    .project-status-legend > div + div { border-inline-start: 0; border-block-start: 1px solid var(--overview-border); padding-block-start: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .overview-dashboard .overview-card,
    .conversion-metric,
    .conversion-gauge__progress,
    .traffic-radial__ring,
    .project-segment {
        transition: none;
    }
}

.overview-toolbar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(20rem, 1.55fr) minmax(22rem, 1fr) minmax(9.5rem, 0.42fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--overview-border);
    border-radius: 0.95rem;
    background: var(--overview-surface);
}

.overview-search,
.overview-date-range,
.overview-period-chip,
.overview-range-label {
    border: 1px solid var(--overview-border);
    background: var(--overview-elevated);
}

.overview-search {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
    padding-inline: 0.75rem;
    border-radius: 0.7rem;
}

.overview-search .icon {
    width: 1rem;
    color: var(--color-text-muted);
}

.overview-search input {
    width: 100%;
    min-height: 2.65rem;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text);
}

.overview-date-range {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.7rem;
}

.overview-date-range label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.overview-date-range label span {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.overview-date-range input {
    width: 8.4rem;
    min-height: 1.95rem;
    padding: 0.2rem;
    border: 0;
    background: transparent;
    color: var(--color-text);
    color-scheme: inherit;
}

.overview-filter-button {
    display: inline-flex;
    width: 100%;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.overview-filter-button .icon {
    width: 1rem;
}

.overview-toolbar-status {
    position: absolute;
    inset-block-start: calc(100% + 0.3rem);
    inset-inline-end: 0.75rem;
    z-index: 2;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: 0.25rem 0.5rem;
    border-radius: 0.4rem;
    background: var(--overview-surface);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    text-align: end;
}

.overview-toolbar-status:empty {
    display: none;
}

.overview-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.35rem;
}

.overview-heading h1 {
    margin: 0.15rem 0 0.35rem;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    letter-spacing: -0.035em;
}

.overview-heading p:not(.eyebrow) {
    margin: 0;
    color: var(--color-text-muted);
}

.overview-period-chip,
.overview-range-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.65rem;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.overview-period-chip .icon {
    width: 1rem;
    color: var(--overview-orange);
}

.overview-error {
    padding: 0.8rem 1rem;
    border: 1px solid color-mix(in srgb, var(--overview-danger) 45%, var(--overview-border));
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--overview-danger) 9%, var(--overview-surface));
    color: var(--overview-danger);
}

.overview-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.overview-kpi,
.overview-card {
    border: 1px solid var(--overview-border);
    border-radius: 1rem;
    background: var(--overview-surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

.overview-kpi {
    display: grid;
    min-height: 8.8rem;
    gap: 0.45rem;
    padding: 1.05rem;
    animation: overview-rise 360ms ease both;
}

.overview-kpi:nth-child(2) { animation-delay: 45ms; }
.overview-kpi:nth-child(3) { animation-delay: 90ms; }
.overview-kpi:nth-child(4) { animation-delay: 135ms; }

.overview-kpi__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.overview-icon,
.overview-section-icon,
.activity-icon,
.journey-stage__icon {
    display: inline-grid;
    place-items: center;
    color: var(--overview-orange);
}

.overview-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--overview-orange) 10%, transparent);
}

.overview-icon .icon {
    width: 1.35rem;
}

.overview-kpi > strong {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.overview-change {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.overview-change b {
    margin-inline-end: 0.25rem;
    font-weight: 800;
}

.overview-change.is-positive b { color: var(--overview-success); }
.overview-change.is-negative b { color: var(--overview-danger); }
.overview-change.is-neutral b { color: var(--color-text-muted); }

.overview-card {
    position: relative;
    min-width: 0;
    padding: 1rem;
}

.overview-card__heading,
.overview-card__heading > div {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.overview-card__heading {
    justify-content: space-between;
    min-height: 3rem;
}

.overview-card__heading h2 {
    margin: 0;
    font-size: 1rem;
}

.overview-card__heading p {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.overview-section-icon {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--overview-orange) 9%, transparent);
}

.overview-section-icon .icon {
    width: 1rem;
}

.overview-journey {
    padding: 1.25rem;
}

.journey-orbit {
    display: grid;
    grid-template-columns: minmax(17rem, 0.78fr) minmax(22rem, 1.45fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    margin-block-start: 0.65rem;
    padding: 0.5rem clamp(0.5rem, 3vw, 2.5rem) 0.25rem;
}

.journey-orbit__visual {
    position: relative;
    width: min(100%, 18rem);
    aspect-ratio: 1;
    justify-self: center;
}

.journey-orbit__visual svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
}

.journey-orbit__track,
.journey-orbit__ring {
    fill: none;
    stroke-width: 9;
}

.journey-orbit__track {
    stroke: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
}

.journey-orbit__ring {
    stroke: var(--overview-orange);
    stroke-linecap: round;
    transition: stroke-dasharray 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.journey-orbit__ring--2 { opacity: 0.82; }
.journey-orbit__ring--3 { opacity: 0.66; }
.journey-orbit__ring--4 { opacity: 0.5; }

.journey-orbit__center {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    width: 7.8rem;
    gap: 0.08rem;
    text-align: center;
    transform: translate(-50%, -50%);
}

.journey-orbit__center span,
.journey-orbit__center small {
    color: var(--color-text-muted);
    font-size: 0.65rem;
    font-weight: 700;
}

.journey-orbit__center strong {
    color: var(--color-text);
    font-size: clamp(1.9rem, 3vw, 2.55rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05em;
    line-height: 1.05;
}

.journey-orbit__legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem clamp(1.2rem, 3vw, 2.5rem);
}

.journey-orbit__stage {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
        'index icon copy'
        '. . meta';
    align-items: center;
    gap: 0.15rem 0.55rem;
    min-width: 0;
    min-height: 6.8rem;
    padding-block: 0.85rem;
}

.journey-orbit__stage:nth-child(n + 3) {
    border-block-start: 1px solid color-mix(in srgb, var(--overview-border) 78%, transparent);
}

.journey-orbit__stage:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 0.2rem;
}

.journey-orbit__index {
    grid-area: index;
    align-self: start;
    padding-block-start: 0.1rem;
    color: var(--color-text-muted);
    font-size: 0.58rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.journey-orbit__icon {
    grid-area: icon;
    align-self: start;
    color: var(--overview-orange);
}

.journey-orbit__icon .icon { width: 1rem; }

.journey-orbit__copy {
    grid-area: copy;
    display: grid;
    min-width: 0;
}

.journey-orbit__copy span {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.73rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.journey-orbit__copy strong {
    color: var(--color-text);
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.journey-orbit__meta {
    grid-area: meta;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2rem 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.61rem;
}

.journey-orbit__meta > b {
    color: var(--overview-orange);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

.journey-orbit__meta small {
    display: block;
    width: 100%;
    color: var(--color-text-muted);
    font-size: 0.59rem;
}

.journey-orbit__meta small b {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.journey-wave {
    margin-block-start: 0.75rem;
    margin-inline: -0.65rem;
    padding: 0.5rem 0 0;
}

.journey-wave__labels {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.45rem, 2vw, 1.5rem);
    padding-inline: 1.5%;
}

.journey-wave__stage {
    position: relative;
    min-width: 0;
    text-align: center;
}

.journey-wave__stage:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 0.3rem;
}

.journey-wave__stage header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.journey-wave__index {
    display: none;
}

.journey-wave__icon {
    display: inline-grid;
    color: var(--overview-orange);
    place-items: center;
}

.journey-wave__icon .icon { width: 0.9rem; }

.journey-wave__stage > strong {
    display: block;
    margin-block-start: 0.2rem;
    color: var(--color-text);
    font-size: clamp(1.4rem, 2.2vw, 1.95rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.045em;
    line-height: 1.1;
}

.journey-wave__meta {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.12rem 0.32rem;
    margin-block-start: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.6rem;
}

.journey-wave__meta > b {
    color: var(--overview-orange);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.journey-wave__meta small {
    display: block;
    width: 100%;
    color: var(--color-text-muted);
    font-size: 0.58rem;
}

.journey-wave__meta small b {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.journey-wave__plot {
    position: relative;
    height: clamp(13rem, 20vw, 16rem);
    margin-block-start: 0.35rem;
}

.journey-wave__plot svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

[dir='ltr'] .journey-wave__plot svg {
    transform: scaleX(-1);
    transform-origin: center;
}

.journey-wave__baseline,
.journey-wave__guide,
.journey-wave__grid line {
    vector-effect: non-scaling-stroke;
}

.journey-wave__grid line {
    stroke: color-mix(in srgb, var(--color-text-muted) 8%, transparent);
    stroke-width: 1;
}

.journey-wave__baseline {
    stroke: color-mix(in srgb, var(--color-text-muted) 17%, transparent);
    stroke-width: 1;
}

.journey-wave__guide {
    stroke: color-mix(in srgb, var(--overview-orange) 18%, transparent);
    stroke-width: 1;
    stroke-dasharray: 2 6;
}

.journey-wave__area {
    fill: url('#journey-wave-fill');
}

.journey-wave__fill-start {
    stop-color: var(--overview-orange);
    stop-opacity: 0.44;
}

.journey-wave__fill-middle {
    stop-color: var(--overview-orange);
    stop-opacity: 0.15;
}

.journey-wave__fill-end {
    stop-color: var(--overview-orange);
    stop-opacity: 0;
}

:root[data-theme='dark'] .journey-wave__fill-start { stop-opacity: 0.62; }
:root[data-theme='dark'] .journey-wave__fill-middle { stop-opacity: 0.22; }

.journey-wave__axis {
    position: absolute;
    inset-inline: 10%;
    inset-block-end: 0.05rem;
    display: flex;
    justify-content: space-between;
    color: color-mix(in srgb, var(--color-text-muted) 82%, transparent);
    font-size: 0.55rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.journey-wave__curve {
    fill: none;
    stroke: var(--overview-orange);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    vector-effect: non-scaling-stroke;
    filter: url('#journey-wave-glow');
}

.journey-wave__halo {
    fill: color-mix(in srgb, var(--overview-orange) 23%, transparent);
    stroke: none;
    filter: url('#journey-wave-glow');
}

.journey-wave__point {
    fill: var(--overview-orange);
    stroke: var(--overview-surface);
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
    filter: url('#journey-wave-glow');
}

/* ==========================================================================
   Interactive User Conversion Journey Pipeline
   ========================================================================== */
.overview-card.overview-journey {
    padding: 1rem 1.35rem 1.15rem;
    border-radius: 14px;
    background: rgba(18, 18, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.overview-card.overview-journey .overview-card__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: 0.5rem;
}

.journey-header-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.journey-funnel-summary {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
}

.funnel-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 101, 0, 0.12);
    border: 1px solid rgba(255, 101, 0, 0.3);
    color: #ff6500;
}

.funnel-summary-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.funnel-summary-value {
    font-size: 0.88rem;
    font-weight: 800;
    color: #ff6500;
    font-variant-numeric: tabular-nums;
}

.journey-pipeline {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    width: 100%;
    margin-block-start: 0.4rem;
    padding: 0;
}

.journey-pipeline__stage {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
}

:root[data-theme='dark'] .journey-pipeline__stage {
    background: rgba(22, 22, 26, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.journey-pipeline__stage:hover,
.journey-pipeline__stage:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--overview-orange) 50%, var(--color-border));
    box-shadow:
        0 6px 16px -2px rgba(0, 0, 0, 0.25),
        0 0 0 1px color-mix(in srgb, var(--overview-orange) 25%, transparent);
    outline: none;
}

:root[data-theme='dark'] .journey-pipeline__stage:hover,
:root[data-theme='dark'] .journey-pipeline__stage:focus-visible {
    box-shadow:
        0 8px 20px -4px rgba(0, 0, 0, 0.45),
        0 0 14px rgba(255, 101, 0, 0.2);
}

/* Stage Card Header */
.stage-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
}

.stage-step-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--overview-orange) 12%, transparent);
    color: var(--overview-orange);
    border: 1px solid color-mix(in srgb, var(--overview-orange) 22%, transparent);
}

.stage-card-icon {
    width: 1.45rem;
    height: 1.45rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-text-muted) 8%, transparent);
    color: var(--overview-orange);
    transition: transform 200ms ease, background-color 200ms ease;
}

.stage-card-icon .icon {
    width: 0.75rem;
    height: 0.75rem;
}

.journey-pipeline__stage:hover .stage-card-icon {
    transform: scale(1.08);
    background: color-mix(in srgb, var(--overview-orange) 16%, transparent);
}

/* Stage Card Body */
.stage-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.stage-card-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}

.stage-card-desc {
    margin: 0;
    font-size: 0.65rem;
    color: var(--color-text-muted);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stage-card-metric {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-block-start: 0.15rem;
}

.stage-card-number {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.stage-card-unit {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* Stage Card Footer */
.stage-card-footer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-block-start: auto;
}

.stage-volume-bar {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.stage-volume-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff6500, #ff8c38);
    box-shadow: 0 0 6px rgba(255, 101, 0, 0.4);
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.stage-conversion-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.stage-conversion-tag.is-converted b {
    color: #10b981;
    font-weight: 800;
}

:root[data-theme='dark'] .stage-conversion-tag.is-converted b {
    color: #34d399;
}

.tag-status-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--overview-orange);
}

.stage-conversion-tag.is-converted .tag-status-dot {
    background: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

/* Inter-Stage Transition Bridge */
.journey-pipeline__bridge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 2.5rem;
    flex-shrink: 0;
}

.bridge-flow-line {
    position: relative;
    width: 100%;
    height: 2px;
    background: color-mix(in srgb, var(--overview-orange) 25%, transparent);
    overflow: hidden;
}

.bridge-pulse {
    position: absolute;
    inset: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--overview-orange), transparent);
    animation: bridge-flow-pulse 2.2s infinite ease-in-out;
}

@keyframes bridge-flow-pulse {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

[dir='rtl'] .bridge-pulse {
    animation-direction: reverse;
}

.bridge-drop-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.15rem 0.35rem;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

:root[data-theme='dark'] .bridge-drop-pill {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.4);
}

.bridge-drop-arrow {
    font-size: 0.65rem;
    line-height: 1;
}

.bridge-arrow-icon {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--overview-orange) 10%, transparent);
    color: var(--overview-orange);
}

[dir='rtl'] .bridge-arrow-icon {
    transform: rotate(180deg);
}

.bridge-arrow-icon .icon {
    width: 0.7rem;
    height: 0.7rem;
}

/* Tooltip Enhancements */
.overview-tooltip {
    position: absolute;
    z-index: 20;
    inset-block-end: calc(100% + 0.55rem);
    inset-inline-start: 50%;
    display: grid;
    width: max-content;
    max-width: 15rem;
    gap: 0.3rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--overview-border);
    border-radius: 0.85rem;
    background: var(--overview-elevated);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.35rem);
    transition: opacity 140ms ease, transform 140ms ease;
}

[dir='rtl'] .overview-tooltip {
    transform: translate(50%, 0.35rem);
}

.overview-tooltip b { color: var(--color-text); }
.overview-tooltip .tooltip-drop { color: #ef4444; font-weight: 600; }
.overview-tooltip .tooltip-share { color: var(--overview-orange); font-weight: 600; }

.journey-pipeline__stage:hover .overview-tooltip,
.journey-pipeline__stage:focus .overview-tooltip,
.traffic-row:hover .overview-tooltip,
.traffic-row:focus .overview-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

[dir='rtl'] .journey-pipeline__stage:hover .overview-tooltip,
[dir='rtl'] .journey-pipeline__stage:focus .overview-tooltip,
[dir='rtl'] .traffic-row:hover .overview-tooltip,
[dir='rtl'] .traffic-row:focus .overview-tooltip {
    opacity: 1;
    transform: translate(50%, 0);
}

.overview-analytics-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.15fr 1fr 1.1fr;
    gap: 0.9rem;
    align-items: stretch;
}

.overview-analytics-grid .overview-card {
    min-height: 20rem;
}

.traffic-list,
.activity-list,
.project-legend {
    display: grid;
    gap: 0.7rem;
    margin-block-start: 1rem;
}

.traffic-row {
    position: relative;
    display: grid;
    gap: 0.35rem;
}

.traffic-row > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.76rem;
}

.traffic-row > div:first-child > span { color: var(--color-text-muted); }
.traffic-row strong { display: inline-flex; gap: 0.45rem; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.traffic-row strong small { color: var(--color-text-muted); font-weight: 600; }
.traffic-track { height: 0.24rem; overflow: hidden; border-radius: 999px; background: var(--overview-elevated); }
.traffic-track span { display: block; height: 100%; border-radius: inherit; background: var(--overview-orange); transition: width 260ms ease; }
.traffic-row .overview-tooltip { inset-block-end: calc(100% + 0.2rem); }

.overview-chart-wrap {
    position: relative;
    height: 14rem;
    margin-block-start: 0.8rem;
}

.overview-chart-wrap canvas,
.project-waffle {
    max-width: 100%;
    max-height: 100%;
}

.project-status-layout {
    display: grid;
    grid-template-columns: minmax(10rem, 1.35fr) minmax(9rem, 1fr);
    gap: 1rem;
    align-items: center;
    margin-block-start: 0.8rem;
}

.project-tech-chart {
    position: relative;
    display: grid;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--overview-border);
    border-radius: 0.85rem;
    background:
        radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--overview-orange) 4%, transparent), transparent 68%),
        color-mix(in srgb, var(--overview-elevated) 34%, transparent);
}

.project-tech-chart__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0.2rem 0.45rem;
    border-block-end: 1px solid var(--overview-border);
}

.project-tech-chart__summary span { color: var(--color-text-muted); font-size: 0.65rem; font-weight: 700; }
.project-tech-chart__summary strong { color: var(--color-text); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.project-tech-chart__canvas { position: relative; display: grid; min-height: 9rem; place-items: center; }
.project-waffle { display: grid; width: min(100%, 10.5rem); grid-template-columns: repeat(10, 1fr); gap: 0.27rem; padding: 0.4rem; }
.project-waffle > span {
    aspect-ratio: 1;
    border-radius: 0.22rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--cell-color) 84%, white), var(--cell-color) 62%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--cell-color) 78%, white),
        0 1px 2px rgb(0 0 0 / 16%);
    opacity: 0;
    transition: opacity 140ms ease, transform 140ms ease, filter 140ms ease;
    animation: project-waffle-enter 220ms ease-out forwards;
    animation-delay: calc(var(--cell-index) * 4ms);
}
.project-waffle > span.is-empty {
    background: color-mix(in srgb, var(--overview-border) 72%, var(--overview-elevated));
    box-shadow: inset 0 0 0 1px var(--overview-border);
    opacity: 0.45;
    animation: none;
}
.project-waffle:hover > span:not(.is-empty) { opacity: 0.78; transition: opacity 140ms ease; }
.project-waffle > span:not(.is-empty):hover { z-index: 1; opacity: 1; filter: brightness(1.08); transform: scale(1.12); }

@keyframes project-waffle-enter {
    to { opacity: 0.96; }
}

@media (prefers-reduced-motion: reduce) {
    .project-waffle > span { opacity: 0.96; animation: none; }
    .project-waffle > span.is-empty { opacity: 0.45; }
}
.project-legend { margin: 0; }
.project-legend > div { display: grid; grid-template-columns: auto 1fr auto auto; gap: 0.45rem; align-items: center; padding: 0.45rem 0; border-block-end: 1px solid var(--overview-border); font-size: 0.7rem; }
.project-legend > div:last-child { border-block-end: 0; }
.project-legend > div > span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--status-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-color) 14%, transparent);
}
.project-legend b { color: var(--color-text-muted); font-weight: 650; }
.project-legend strong { font-variant-numeric: tabular-nums; }
.project-legend small { color: var(--color-text-muted); }

.activity-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    padding-block-end: 0.65rem;
    border-block-end: 1px solid var(--overview-border);
}

.activity-row:last-child { padding-block-end: 0; border-block-end: 0; }
.activity-row[hidden] { display: none; }
.activity-icon { width: 2rem; height: 2rem; border: 1px solid color-mix(in srgb, var(--overview-orange) 30%, var(--overview-border)); border-radius: 0.55rem; background: color-mix(in srgb, var(--overview-orange) 7%, transparent); }
.activity-icon .icon { width: 1rem; }
.activity-row > div { display: grid; min-width: 0; gap: 0.12rem; }
.activity-row strong { overflow: hidden; font-size: 0.73rem; text-overflow: ellipsis; white-space: nowrap; }
.activity-row > div span { overflow: hidden; color: var(--color-text-muted); font-size: 0.67rem; text-overflow: ellipsis; white-space: nowrap; }
.activity-row time { color: var(--color-text-muted); font-size: 0.6rem; white-space: nowrap; }

.overview-empty {
    position: absolute;
    inset: 4.3rem 1rem 1rem;
    display: grid;
    place-items: center;
    padding: 1rem;
    border: 1px dashed var(--overview-border);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--overview-surface) 94%, transparent);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    text-align: center;
}

.overview-empty[hidden] { display: none; }
.overview-journey .overview-empty { inset-block-start: 4.7rem; }
.overview-freshness { display: flex; justify-content: space-between; gap: 1rem; color: var(--color-text-muted); font-size: 0.68rem; }

.overview-dashboard.is-loading .overview-kpi,
.overview-dashboard.is-loading .overview-card {
    opacity: 0.55;
    pointer-events: none;
}

.overview-dashboard.is-loading .overview-filter-button .icon {
    animation: overview-spin 700ms linear infinite;
}

@keyframes overview-rise {
    from { opacity: 0; transform: translateY(0.45rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes overview-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 80rem) {
    .overview-toolbar { grid-template-columns: minmax(15rem, 1.35fr) minmax(20rem, 0.9fr) minmax(9rem, 0.4fr); }
    .overview-toolbar-status { display: none; }
    .overview-analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 74.9375rem) {
    .overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overview-toolbar { grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.32fr); }
    .overview-search { grid-column: 1 / -1; }
    .journey-wave__plot { height: 11.5rem; }
}

@media (max-width: 64rem) {
    .journey-pipeline {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .journey-pipeline__stage {
        flex: 1 1 calc(50% - 1rem);
        min-width: 14rem;
    }
    .journey-pipeline__bridge {
        display: none;
    }
}

@media (max-width: 48rem) {
    .admin-main:has(.overview-dashboard) { width: min(100% - 1rem, 96rem); }
    .overview-heading { align-items: flex-start; flex-direction: column; }
    .overview-toolbar { grid-template-columns: 1fr; }
    .overview-search { grid-column: auto; }
    .overview-date-range { justify-content: space-between; }
    .overview-date-range label { min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; }
    .overview-date-range input { width: 100%; }
    .overview-kpis,
    .overview-analytics-grid { grid-template-columns: 1fr; }
    .project-status-layout { grid-template-columns: 1fr; }
    .project-tech-chart__canvas { min-height: 9.5rem; }
    .overview-freshness { flex-direction: column; }
}

@media (max-width: 36rem) {
    .journey-pipeline {
        flex-direction: column;
        gap: 0.75rem;
    }
    .journey-pipeline__stage {
        flex: 1 1 100%;
        width: 100%;
    }
}

@media (max-width: 30rem) {
    .overview-kpis { grid-template-columns: 1fr; }
    .overview-date-range { align-items: stretch; flex-direction: column; }
    .overview-date-range > span { display: none; }
    .journey-wave__index { display: none; }
    .journey-wave__icon { display: none; }
    .journey-wave__stage header { font-size: 0.57rem; }
    .journey-wave__stage > strong { font-size: 1.12rem; }
    .journey-wave__meta > span { display: none; }
    .activity-row { grid-template-columns: auto minmax(0, 1fr); }
    .activity-row time { grid-column: 2; }
}

/* Inline page image management */
.inline-images { margin-top: 1rem; }
.inline-images__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.inline-image-upload { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); gap: 1rem; padding: 1rem; border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-muted); }
.inline-image-upload > .form-grid, .inline-image-upload > .form-actions { grid-column: 2; }
.inline-image-upload__preview { grid-row: 1 / span 2; min-height: 9rem; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.inline-image-upload__preview img { width: 100%; height: 100%; min-height: 9rem; object-fit: cover; }
.inline-image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.inline-image-card { display: flex; flex-direction: column; gap: .85rem; padding: .85rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-muted); }
.inline-image-card > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-md); background: var(--color-surface); }
.inline-image-card > form { min-width: 0; }
.inline-image-fields { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: .75rem; }
.inline-images .field-hint { color: var(--color-text-muted); font-size: .78rem; line-height: 1.55; }
.inline-images .field-error { display: block; margin-top: .2rem; }
.inline-images .field-error[hidden] { display: none; }
.inline-images [data-image-submit]:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.inline-images__empty { min-height: 6rem; }
.pricing-card > .inline-images, .taxonomy-card > .inline-images { padding: 1rem; box-shadow: none; }
.pricing-card > .inline-images .inline-image-upload, .taxonomy-card > .inline-images .inline-image-upload { grid-template-columns: 1fr; }
.pricing-card > .inline-images .inline-image-upload > *, .taxonomy-card > .inline-images .inline-image-upload > * { grid-column: 1; }
.pricing-card > .inline-images .inline-image-upload__preview, .taxonomy-card > .inline-images .inline-image-upload__preview { grid-row: auto; }

@media (max-width: 42rem) {
    .inline-image-upload { grid-template-columns: 1fr; }
    .inline-image-upload > .form-grid, .inline-image-upload > .form-actions { grid-column: 1; }
    .inline-image-upload__preview { grid-row: auto; max-height: 14rem; }
    .inline-image-fields { grid-template-columns: 1fr; }
}

/* Horizon UI geometry adapted to 7 Tech's existing content and brand palette. */
.admin-body {
    min-height: 100vh;
    background: var(--color-bg);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-feature-settings: "kern";
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.5px;
}

html[lang^='ar'] .admin-body {
    font-family: "IBM Plex Sans Arabic", "Inter", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0;
}

.admin-body :where(button, a, input, select, textarea) {
    -webkit-tap-highlight-color: transparent;
}

.admin-shell {
    --sidebar-width: 17rem;
    background: var(--color-bg);
}

.admin-sidebar {
    padding: 0 1.25rem 1.25rem;
    border-inline-end: 0;
    background: var(--color-surface);
    box-shadow: 1rem 0 3rem rgb(20 20 20 / 5%);
}

[dir='rtl'] .admin-sidebar {
    box-shadow: -1rem 0 3rem rgb(20 20 20 / 5%);
}

.sidebar-brand-row {
    min-height: 7.5rem;
    padding-inline: 0.75rem;
    border-block-end: 1px solid var(--color-border);
}

.sidebar-brand {
    flex: 1;
    justify-content: center;
    gap: 0.9rem;
}

.sidebar-brand .brand-mark {
    width: 3.15rem;
    height: 3.15rem;
    filter: drop-shadow(0 10px 11px rgb(255 101 0 / 18%));
}

.sidebar-brand strong {
    color: var(--color-text);
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.1rem;
    letter-spacing: -0.025em;
}

.sidebar-navigation {
    margin-block: 1.35rem;
    padding-inline: 0.25rem;
    scrollbar-color: color-mix(in srgb, var(--color-text-muted) 28%, transparent) transparent;
    scrollbar-width: thin;
}

.nav-group + .nav-group {
    margin-block-start: 1.75rem;
}

.nav-group h2 {
    margin-block-end: 0.6rem;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}

.nav-link {
    min-height: 3rem;
    gap: 0.9rem;
    padding-inline: 0.8rem;
    border-radius: 0.85rem;
    color: var(--color-text-muted);
    font-size: 0.94rem;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-link .icon {
    width: 1.35rem;
    height: 1.35rem;
}

.nav-link:hover {
    background: transparent;
    color: var(--color-text);
}

.nav-link.is-active {
    background: transparent;
    color: var(--color-text);
    font-weight: 700;
}

.nav-link.is-active .icon {
    color: var(--color-primary);
}

.nav-link.is-active::before {
    inset-block: 0.4rem;
    inset-inline-start: auto;
    inset-inline-end: -1.5rem;
    width: 0.25rem;
    border-radius: 999px 0 0 999px;
    box-shadow: 0 0 1rem rgb(255 101 0 / 32%);
}

[dir='rtl'] .nav-link.is-active::before {
    border-radius: 0 999px 999px 0;
}

.admin-workspace {
    background: var(--color-bg);
}

#about,
#contact-us,
#portfolio,
#publishing,
#recruitment,
#quotations,
.section-anchor {
    scroll-margin-block-start: 7rem;
}

.section-anchor {
    display: block;
    height: 0;
    grid-column: 1 / -1;
}

.sidebar-collapse-toggle {
    display: none;
}

@media (min-width: 75rem) {
    .sidebar-collapse-toggle {
        position: absolute;
        z-index: 3;
        inset-block-start: 5.4rem;
        inset-inline-end: -0.875rem;
        display: inline-grid;
        width: 1.75rem;
        height: 1.75rem;
        border: 1px solid var(--color-border);
        border-radius: 50%;
        background: var(--color-surface);
        box-shadow: 0 0.35rem 1rem rgb(20 20 20 / 12%);
        color: var(--color-primary);
    }

    .sidebar-collapse-toggle .icon {
        width: 0.9rem;
        height: 0.9rem;
        transform: rotate(180deg);
        transition: transform 180ms ease;
    }

    [dir='rtl'] .sidebar-collapse-toggle .icon,
    .admin-shell.is-sidebar-collapsed .sidebar-collapse-toggle .icon {
        transform: rotate(0deg);
    }

    [dir='rtl'] .admin-shell.is-sidebar-collapsed .sidebar-collapse-toggle .icon {
        transform: rotate(180deg);
    }

    .admin-sidebar,
    .admin-workspace {
        transition: width 240ms ease, margin-inline-start 240ms ease, padding 240ms ease;
    }

    .sidebar-brand > span:last-child,
    .nav-group h2,
    .nav-link span {
        max-width: 15rem;
        opacity: 1;
        overflow: hidden;
        white-space: nowrap;
        transition: max-width 180ms ease, opacity 140ms ease, margin 180ms ease, padding 180ms ease;
    }

    .admin-shell.is-sidebar-collapsed {
        --sidebar-width: 0rem;
    }

    .admin-shell.is-sidebar-collapsed .admin-sidebar {
        width: 0;
        padding: 0;
        border-inline-end: 0;
        background: transparent;
        box-shadow: none;
    }

    .admin-shell.is-sidebar-collapsed .sidebar-collapse-toggle {
        inset-inline-end: -2.25rem;
    }

    .admin-shell.is-sidebar-collapsed .sidebar-brand-row,
    .admin-shell.is-sidebar-collapsed .sidebar-navigation {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 120ms ease, visibility 0s linear 120ms;
    }
}

.admin-topbar {
    inset-block-start: 1rem;
    min-height: 4.8125rem;
    flex-wrap: wrap;
    margin: 1rem 0.75rem 0;
    padding: 0.5rem;
    border: 0;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--color-surface) 10%, transparent);
    box-shadow: none;
    backdrop-filter: blur(20px);
}

.topbar-leading {
    flex: 1 1 14rem;
    padding-inline: 0.375rem;
}

.topbar-page-copy {
    display: grid;
    min-width: 0;
    gap: 0.05rem;
}

.topbar-route-title {
    overflow: hidden;
    margin: 0;
    color: var(--color-text);
    font-size: 2.0625rem;
    font-weight: 700;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumbs li {
    font-size: 0.875rem;
}

.breadcrumbs li:last-child {
    font-size: 0.875rem;
    font-weight: 400;
}

.topbar-actions {
    width: clamp(30rem, 40vw, 42rem);
    min-height: 3.8125rem;
    flex: 0 1 auto;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.topbar-search {
    position: relative;
    width: auto;
    height: 2.8125rem;
    flex: 1 1 18rem;
    min-width: 12rem;
}

.topbar-search > label {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 0.8rem;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text-muted);
}

.topbar-search .icon {
    width: 1rem;
    height: 1rem;
}

.topbar-search input {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.topbar-search input::placeholder {
    color: var(--color-text-muted);
}

.topbar-search-results {
    position: absolute;
    z-index: 60;
    inset-block-start: calc(100% + 0.7rem);
    inset-inline: 0;
    display: grid;
    width: min(21rem, calc(100vw - 2rem));
    max-height: min(28rem, 65vh);
    gap: 0.2rem;
    padding: 0.65rem;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.topbar-search-results[hidden] {
    display: none;
}

.topbar-search-results a {
    display: flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.75rem;
    color: var(--color-text);
    text-decoration: none;
}

.topbar-search-results a:hover,
.topbar-search-results a:focus-visible {
    background: var(--color-surface-muted);
}

.topbar-search-results a > span {
    display: grid;
    min-width: 0;
}

.topbar-search-results a strong,
.topbar-search-results a small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-search-results a small,
.topbar-search-empty {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.topbar-search-empty {
    margin: 0;
    padding: 0.8rem;
    text-align: center;
}

.topbar-actions .icon-button,
.topbar-actions .language-control {
    width: 1.75rem;
    min-width: 1.75rem;
    height: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    border-color: transparent;
    border-radius: 999px;
    background: transparent;
}

.topbar-actions .icon-button:hover,
.topbar-actions .language-control:hover {
    background: var(--color-surface-muted);
}

.language-mark {
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
}

.topbar-actions .language-label,
.topbar-actions .theme-label,
.topbar-actions .account-summary-copy {
    display: none;
}

.account-menu summary {
    min-height: 2.5rem;
    padding: 0;
    border-color: transparent;
    border-radius: 999px;
    background: transparent;
}

.account-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.account-popover {
    inset-block-start: calc(100% + 0.8rem);
    padding: 0.75rem;
    border-color: transparent;
    border-radius: 1.25rem;
}

.account-popover a,
.account-popover button {
    border-radius: 0.8rem;
}

.admin-main,
.admin-main:has(.overview-dashboard) {
    width: calc(100% - 1.5rem);
    max-width: none;
    padding-inline: 0.5rem;
    padding-block: 1.25rem 5rem;
}

.admin-main > * + * {
    margin-block-start: 1.25rem;
}

.page-heading {
    min-height: 0;
    padding-inline: 0.35rem;
}

.page-heading .page-heading-title,
.overview-heading .overview-page-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.page-heading p,
.overview-heading p:not(.eyebrow) {
    line-height: 1.65;
}

.eyebrow {
    color: var(--color-primary);
}

.panel,
.metric-card,
.table-wrap,
.filter-bar,
.filter-panel,
.section-block,
.stat-card,
.analytics-card,
.taxonomy-card,
.media-card,
.pricing-card,
.permission-group,
.security-panel,
.inline-images,
.overview-toolbar,
.overview-kpi,
.overview-card {
    border-color: transparent;
    border-radius: 1.25rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.panel .panel,
.panel .table-wrap,
.panel .filter-panel,
.panel .section-block,
.section-block .panel,
.section-block .table-wrap,
.taxonomy-card .inline-images,
.pricing-card .panel {
    border-color: var(--color-border);
    box-shadow: none;
}

.panel,
.metric-card,
.filter-bar,
.filter-panel,
.section-block,
.stat-card,
.analytics-card,
.taxonomy-card,
.media-card,
.pricing-card,
.permission-group,
.security-panel,
.inline-images {
    padding: clamp(1rem, 2vw, 1.35rem);
}

.metric-grid,
.content-grid,
.form-grid,
.choice-grid,
.stat-grid,
.analytics-grid,
.taxonomy-list,
.media-grid,
.pricing-card-grid,
.overview-kpis,
.overview-analytics-grid {
    gap: 1.25rem;
}

.metric-card,
.stat-card,
.analytics-card,
.overview-kpi,
.overview-card,
.taxonomy-card,
.media-card,
.pricing-card {
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.metric-card:hover,
.stat-card:hover,
.analytics-card:hover,
.overview-kpi:hover,
.overview-card:hover {
    box-shadow: var(--shadow-card);
    transform: none;
}

.stat-card {
    min-height: 6.5rem;
    align-content: center;
    padding-inline: 1.35rem;
}

.stat-card strong {
    color: var(--color-text);
    font-size: 1.65rem;
}

.metric-card {
    min-height: 8.5rem;
}

.metric-card::after {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.admin-main .field label,
.admin-main .section-editor legend {
    color: var(--color-text);
    font-size: 0.88rem;
    font-weight: 700;
}

.admin-main :where(
    input:not([type]),
    input[type='text'],
    input[type='email'],
    input[type='password'],
    input[type='url'],
    input[type='search'],
    input[type='number'],
    input[type='date'],
    input[type='datetime-local'],
    input[type='time'],
    input[type='tel'],
    select,
    textarea
) {
    min-height: 3rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.admin-main :where(
    input:not([type]),
    input[type='text'],
    input[type='email'],
    input[type='password'],
    input[type='url'],
    input[type='search'],
    input[type='number'],
    input[type='date'],
    input[type='datetime-local'],
    input[type='time'],
    input[type='tel'],
    select,
    textarea
):focus {
    border-color: color-mix(in srgb, var(--color-primary) 65%, var(--color-border));
    background: var(--color-surface);
    box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--color-primary) 14%, transparent);
    outline: 0;
}

/* Keep the dashboard search focus glow on the complete search bar. */
.admin-main .overview-search {
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.admin-main .overview-search:focus-within {
    border-color: color-mix(in srgb, var(--overview-orange) 68%, var(--overview-border));
    box-shadow:
        0 0 0 0.2rem color-mix(in srgb, var(--overview-orange) 14%, transparent),
        0 0 1rem color-mix(in srgb, var(--overview-orange) 9%, transparent);
}

.admin-main .overview-search input[type='search'],
.admin-main .overview-search input[type='search']:focus {
    min-height: 2.65rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.admin-main input[type='file'] {
    width: 100%;
    padding: 0.35rem;
    border: 1px dashed var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.admin-main input[type='file']::file-selector-button {
    min-height: 2.3rem;
    margin-inline-end: 0.7rem;
    padding-inline: 0.85rem;
    border: 0;
    border-radius: 0.65rem;
    background: var(--color-primary);
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.button {
    min-height: 3rem;
    padding-inline: 1.15rem;
    border-radius: 0.75rem;
    box-shadow: 0 8px 18px rgb(255 101 0 / 18%);
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.button:hover {
    box-shadow: 0 10px 22px rgb(255 101 0 / 26%);
    transform: translateY(-0.08rem);
}

.button-secondary,
.button-danger {
    border-color: transparent;
    background: var(--color-surface-muted);
    box-shadow: none;
}

.button-secondary:hover,
.button-danger:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-muted));
    box-shadow: none;
}

.table-wrap {
    overflow: hidden;
    overflow-x: auto;
}

table {
    min-width: 42rem;
}

th,
td {
    padding-inline: 1rem;
}

tbody td {
    border-block-end-color: transparent;
}

th {
    padding-block: 1rem 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 700;
}

td {
    padding-block: 0.75rem;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 700;
}

tbody tr {
    transition: background-color 140ms ease;
}

.badge {
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
}

.choice {
    border-color: transparent;
    border-radius: 0.9rem;
    background: var(--color-surface-muted);
}

.alert {
    border-color: transparent;
    border-radius: 1rem;
    box-shadow: 0 10px 24px rgb(20 20 20 / 8%);
}

.inline-image-upload,
.inline-image-card,
.inline-image-upload__preview,
.inline-image-card > img {
    border-radius: 1rem;
}

.inline-image-upload,
.inline-image-card {
    background: var(--color-surface-muted);
}

.overview-dashboard {
    --overview-surface: var(--color-surface);
    --overview-elevated: var(--color-surface-muted);
    --overview-border: var(--color-border);
    gap: 1.25rem;
}

:root[data-theme='dark'] .overview-dashboard,
:root:not([data-theme]) .overview-dashboard {
    --overview-surface: var(--color-surface);
    --overview-elevated: var(--color-surface-muted);
    --overview-border: var(--color-border);
}

.overview-toolbar,
.overview-kpi,
.overview-card {
    border-color: transparent;
    border-radius: 1.25rem;
    background: var(--overview-surface);
    box-shadow: var(--shadow-card);
}

.overview-kpi {
    display: grid;
    min-height: 5.625rem;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value"
        "icon change";
    grid-template-rows: auto auto auto;
    align-content: center;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.1rem;
    padding: 0.75rem 1rem;
}

.overview-kpi__top {
    display: contents;
}

.overview-kpi__top > span:first-child {
    grid-area: label;
    align-self: end;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.15;
}

.overview-kpi > strong {
    grid-area: value;
    align-self: start;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.overview-kpi .overview-change {
    grid-area: change;
    margin-block-start: 0;
    line-height: 1.1;
}

.overview-icon {
    width: 3.25rem;
    height: 3.25rem;
    grid-area: icon;
    border-radius: 50%;
    background: var(--color-bg);
}

.overview-card {
    padding: 1.25rem;
}

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

.overview-analytics-grid .overview-card {
    min-height: 19rem;
}

:root[data-theme='dark'] .panel,
:root[data-theme='dark'] .metric-card,
:root[data-theme='dark'] .table-wrap,
:root[data-theme='dark'] .filter-bar,
:root[data-theme='dark'] .filter-panel,
:root[data-theme='dark'] .section-block,
:root[data-theme='dark'] .stat-card,
:root[data-theme='dark'] .analytics-card,
:root[data-theme='dark'] .taxonomy-card,
:root[data-theme='dark'] .media-card,
:root[data-theme='dark'] .pricing-card,
:root[data-theme='dark'] .inline-images,
:root[data-theme='dark'] .overview-toolbar,
:root[data-theme='dark'] .overview-kpi,
:root[data-theme='dark'] .overview-card,
:root[data-theme='dark'] .admin-topbar,
:root[data-theme='dark'] .topbar-actions {
    box-shadow: none;
}

:root[data-theme='dark'] .admin-sidebar {
    box-shadow: none;
}

:root[data-theme='dark'] .admin-topbar {
    background: rgb(9 9 9 / 30%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .panel,
    :root:not([data-theme]) .metric-card,
    :root:not([data-theme]) .table-wrap,
    :root:not([data-theme]) .filter-bar,
    :root:not([data-theme]) .filter-panel,
    :root:not([data-theme]) .section-block,
    :root:not([data-theme]) .stat-card,
    :root:not([data-theme]) .analytics-card,
    :root:not([data-theme]) .taxonomy-card,
    :root:not([data-theme]) .media-card,
    :root:not([data-theme]) .pricing-card,
    :root:not([data-theme]) .inline-images,
    :root:not([data-theme]) .overview-toolbar,
    :root:not([data-theme]) .overview-kpi,
    :root:not([data-theme]) .overview-card,
    :root:not([data-theme]) .admin-topbar,
    :root:not([data-theme]) .topbar-actions {
        box-shadow: none;
    }

    :root:not([data-theme]) .admin-sidebar {
        box-shadow: none;
    }

    :root:not([data-theme]) .admin-topbar {
        background: rgb(9 9 9 / 30%);
    }
}

@media (max-width: 74.9375rem) {
    .admin-topbar {
        inset-block-start: 1rem;
    }
}

@media (max-width: 48rem) {
    .admin-topbar {
        min-height: 0;
        margin-inline: 0.75rem;
        gap: 0.5rem;
        padding: 0.35rem;
        border-radius: 0.75rem;
    }

    .topbar-route-title {
        font-size: 1.7rem;
    }

    .topbar-actions {
        min-height: 3.5rem;
        gap: 0.25rem;
        padding: 0.35rem;
    }

    .topbar-actions .icon-button,
    .topbar-actions .language-control {
        width: 2.25rem;
        min-width: 2.25rem;
        min-height: 2.5rem;
        padding-inline: 0;
    }

    .admin-main,
    .admin-main:has(.overview-dashboard) {
        width: calc(100% - 1.5rem);
        padding-block-start: 1.4rem;
    }

    .overview-analytics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 36rem) {
    .topbar-leading {
        flex-basis: 100%;
    }

    .topbar-actions {
        width: 100%;
        flex: 1 1 100%;
    }

    .topbar-search {
        width: auto;
        flex: 1 1 auto;
    }
}

@media (max-width: 34rem) {
    .topbar-actions .language-label,
    .topbar-actions .theme-label,
    .account-summary-copy {
        display: none;
    }

    .page-heading {
        padding-inline: 0.15rem;
    }
}

/* Sidebar scrollbar placement and horizontal overflow guard */
.admin-sidebar .sidebar-navigation {
    overflow-x: hidden;
    overflow-y: auto;
}

html[dir='rtl'] .admin-sidebar .sidebar-navigation {
    direction: ltr;
}

html[dir='rtl'] .admin-sidebar .sidebar-navigation .nav-group {
    direction: rtl;
}

html[dir='ltr'] .admin-sidebar .sidebar-navigation {
    direction: rtl;
}

html[dir='ltr'] .admin-sidebar .sidebar-navigation .nav-group {
    direction: ltr;
}

/* Unified action buttons — dark copper treatment used across public, auth, and admin pages. */
.button,
.auth-body .auth-submit {
    position: relative;
    min-height: 2.75rem;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.48rem 0.9rem;
    border: 1px solid rgb(196 91 38 / 82%);
    border-radius: 0.85rem;
    background:
        linear-gradient(100deg, rgb(255 255 255 / 4%), transparent 42%),
        linear-gradient(90deg, #3a1d10 0%, #55250f 100%);
    color: #fff7f2;
    box-shadow:
        0 10px 24px rgb(62 23 4 / 18%),
        inset 0 1px 0 rgb(255 255 255 / 8%);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: start;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button::after {
    content: '\203A';
    display: inline-grid;
    min-width: 1rem;
    flex: 0 0 auto;
    margin-inline-start: auto;
    color: #fff7f2;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    place-items: center;
    transition: transform 160ms ease;
}

[dir='rtl'] .button::after {
    content: '\2039';
}

.auth-body .auth-submit::after {
    display: none;
}

.auth-body .auth-submit .icon {
    margin-inline-start: auto;
    color: #fff7f2;
}

[dir='rtl'] .auth-body .auth-submit .icon {
    transform: scaleX(-1);
}

.button:hover,
.auth-body .auth-submit:hover,
.button-secondary:hover,
.button-danger:hover {
    border-color: rgb(255 112 39 / 92%);
    background:
        linear-gradient(100deg, rgb(255 255 255 / 7%), transparent 42%),
        linear-gradient(90deg, #472112 0%, #652b10 100%);
    color: #fff;
    box-shadow:
        0 13px 28px rgb(78 28 3 / 24%),
        0 0 0 0.18rem rgb(255 101 0 / 8%),
        inset 0 1px 0 rgb(255 255 255 / 11%);
    transform: translateY(-0.08rem);
}

.button:hover::after {
    transform: translateX(0.16rem);
}

[dir='rtl'] .button:hover::after {
    transform: translateX(-0.16rem);
}

.button:active,
.auth-body .auth-submit:active {
    box-shadow:
        0 6px 14px rgb(62 23 4 / 18%),
        inset 0 1px 0 rgb(255 255 255 / 8%);
    transform: translateY(0) scale(0.99);
}

.button-secondary,
.button-danger {
    border-color: rgb(196 91 38 / 68%);
    background:
        linear-gradient(100deg, rgb(255 255 255 / 3%), transparent 42%),
        linear-gradient(90deg, #281711 0%, #3d1d10 100%);
    color: #fff7f2;
    box-shadow:
        0 8px 20px rgb(36 15 5 / 14%),
        inset 0 1px 0 rgb(255 255 255 / 6%);
}

.button-danger {
    border-color: rgb(210 82 64 / 72%);
}

.button:disabled,
.button[aria-disabled='true'] {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.admin-main input[type='file']::file-selector-button {
    min-height: 2.25rem;
    padding-inline: 0.85rem;
    border: 1px solid rgb(196 91 38 / 82%);
    border-radius: 0.75rem;
    background: linear-gradient(90deg, #3a1d10 0%, #55250f 100%);
    color: #fff7f2;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
    font-weight: 700;
}

.admin-main input[type='file']::file-selector-button:hover {
    border-color: rgb(255 112 39 / 92%);
    background: linear-gradient(90deg, #472112 0%, #652b10 100%);
}

@media (max-width: 30rem) {
    .button,
    .auth-body .auth-submit {
        min-height: 2.7rem;
        padding-inline: 0.82rem;
    }
}

/* Unified light-theme glass treatment for every labelled action button. */
:root[data-theme='light'] .button,
:root[data-theme='light'] .auth-body .auth-submit,
:root[data-theme='light'] .admin-main input[type='file']::file-selector-button {
    border-color: rgb(255 134 55 / 38%);
    background:
        linear-gradient(135deg, rgb(255 255 255 / 58%), rgb(255 255 255 / 16%)),
        linear-gradient(135deg, rgb(255 173 117 / 30%), rgb(255 120 34 / 18%));
    color: #c44e00;
    box-shadow:
        0 5px 14px rgb(56 35 22 / 6%),
        inset 0 1px 0 rgb(255 255 255 / 88%),
        inset 0 -1px 0 rgb(255 112 30 / 5%);
    backdrop-filter: blur(14px) saturate(125%);
}

:root[data-theme='light'] .button::after,
:root[data-theme='light'] .auth-body .auth-submit .icon {
    color: #c44e00;
}

:root[data-theme='light'] .button:hover,
:root[data-theme='light'] .auth-body .auth-submit:hover,
:root[data-theme='light'] .admin-main input[type='file']::file-selector-button:hover {
    border-color: rgb(255 120 34 / 52%);
    background:
        linear-gradient(135deg, rgb(255 255 255 / 66%), rgb(255 255 255 / 20%)),
        linear-gradient(135deg, rgb(255 164 105 / 38%), rgb(255 112 25 / 24%));
    color: #ad4300;
    box-shadow:
        0 7px 18px rgb(56 35 22 / 8%),
        inset 0 1px 0 rgb(255 255 255 / 94%);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .button,
    :root:not([data-theme]) .auth-body .auth-submit,
    :root:not([data-theme]) .admin-main input[type='file']::file-selector-button {
        border-color: rgb(255 134 55 / 38%);
        background:
            linear-gradient(135deg, rgb(255 255 255 / 58%), rgb(255 255 255 / 16%)),
            linear-gradient(135deg, rgb(255 173 117 / 30%), rgb(255 120 34 / 18%));
        color: #c44e00;
        box-shadow:
            0 5px 14px rgb(56 35 22 / 6%),
            inset 0 1px 0 rgb(255 255 255 / 88%),
            inset 0 -1px 0 rgb(255 112 30 / 5%);
        backdrop-filter: blur(14px) saturate(125%);
    }

    :root:not([data-theme]) .button::after,
    :root:not([data-theme]) .auth-body .auth-submit .icon {
        color: #c44e00;
    }

    :root:not([data-theme]) .button:hover,
    :root:not([data-theme]) .auth-body .auth-submit:hover,
    :root:not([data-theme]) .admin-main input[type='file']::file-selector-button:hover {
        border-color: rgb(255 120 34 / 52%);
        background:
            linear-gradient(135deg, rgb(255 255 255 / 66%), rgb(255 255 255 / 20%)),
            linear-gradient(135deg, rgb(255 164 105 / 38%), rgb(255 112 25 / 24%));
        color: #ad4300;
        box-shadow:
            0 7px 18px rgb(56 35 22 / 8%),
            inset 0 1px 0 rgb(255 255 255 / 94%);
    }
}

/* Final overview cascade guard: keep the reference composition above legacy dashboard rules. */
.admin-main:has(.overview-dashboard) {
    max-width: none;
}

.overview-dashboard {
    --overview-orange: #ff5a00;
    --overview-orange-2: #ff8516;
    --overview-orange-3: #ffad63;
    --overview-orange-4: #ffd4b2;
    --overview-ink: #171717;
    --overview-muted: #737373;
    --overview-surface: #fff;
    --overview-elevated: #f7f7f7;
    --overview-border: #e8e8e8;
    --overview-shadow: 0 10px 34px rgb(24 24 24 / 4%);
    width: 100%;
    max-width: 100rem;
    margin-inline: auto;
    gap: clamp(1rem, 1.6vw, 1.5rem);
    color: var(--overview-ink);
}

.overview-dashboard .overview-toolbar,
.overview-dashboard .overview-card {
    border: 1px solid var(--overview-border);
    border-radius: 1.5rem;
    background: var(--overview-surface);
    box-shadow: var(--overview-shadow);
}

.overview-dashboard .overview-toolbar {
    padding: 0.75rem;
    border-radius: 1.25rem;
}

.overview-dashboard .overview-card {
    padding: clamp(1.1rem, 2vw, 1.75rem);
}

.overview-dashboard .overview-card:hover {
    border-color: var(--overview-border);
    box-shadow: 0 14px 38px rgb(24 24 24 / 6%);
    transform: translateY(-2px);
}

.overview-dashboard .overview-analytics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 1.6vw, 1.5rem);
}

.overview-dashboard .overview-analytics-grid .overview-card {
    min-height: clamp(22rem, 34vw, 28rem);
}

:root[data-theme='dark'] .overview-dashboard {
    --overview-ink: #f6f6f6;
    --overview-muted: #a8a8aa;
    --overview-surface: #151515;
    --overview-elevated: #202020;
    --overview-border: #2d2d2d;
    --overview-shadow: none;
}

:root[data-theme='dark'] .overview-dashboard .overview-card:hover {
    box-shadow: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .overview-dashboard {
        --overview-ink: #f6f6f6;
        --overview-muted: #a8a8aa;
        --overview-surface: #151515;
        --overview-elevated: #202020;
        --overview-border: #2d2d2d;
        --overview-shadow: none;
    }
}

@media (max-width: 64rem) {
    .overview-dashboard .overview-analytics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 35rem) {
    .overview-dashboard .overview-card { padding: 1rem; border-radius: 1.2rem; }
}

/* Overview dashboard reference v2 — exact composition from the supplied design. */
.overview-dashboard--reference {
    gap: 0.8rem;
    padding-block-end: 1rem;
}

.overview-dashboard--reference .overview-card {
    padding: 1rem;
    border-color: #ececec;
    border-radius: 1rem;
    box-shadow: 0 5px 22px rgb(37 42 51 / 4%);
    transform: none;
}

.overview-dashboard--reference .overview-card:hover {
    border-color: #ececec;
    box-shadow: 0 7px 26px rgb(37 42 51 / 5%);
    transform: none;
}

.reference-card-heading {
    position: relative;
    z-index: 4;
    display: flex;
    min-height: 1.75rem;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-block-end: 0.45rem;
}

.reference-card-heading h2 {
    margin: 0;
    color: var(--overview-ink);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
}

.reference-card-heading--hero {
    justify-content: flex-start;
    padding-inline: 0.35rem;
}

.reference-card-heading--hero .reference-period-chip { order: -1; }

.reference-more {
    display: grid;
    width: 1.4rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    place-items: center;
    background: transparent;
    color: var(--overview-muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: default;
}

.reference-more--start { margin-inline-start: auto; }

.reference-period-chip,
.overview-period-filter select {
    min-height: 2.15rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--overview-border);
    border-radius: 0.65rem;
    background: var(--overview-surface);
    color: var(--overview-ink);
    font-size: 0.72rem;
    font-weight: 600;
    box-shadow: 0 3px 10px rgb(38 40 46 / 3%);
}

.reference-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.reference-period-chip .icon { width: 0.8rem; height: 0.8rem; }

.conversion-flow-card {
    min-height: 22.5rem;
    padding: 0.75rem 1.25rem 1rem !important;
}

.conversion-flow {
    position: relative;
    display: grid;
    min-height: 18.8rem;
    grid-template-columns: minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(13.5rem, 1.35fr) minmax(7rem, 1fr) minmax(7rem, 1fr);
    grid-template-areas: "complete started gauge service visit";
    align-items: center;
    gap: clamp(0.35rem, 1.5vw, 1.25rem);
    direction: ltr;
    isolation: isolate;
}

.conversion-flow__connectors {
    position: absolute;
    z-index: 0;
    inset: 0.5rem 0 0;
    width: 100%;
    height: calc(100% - 0.5rem);
    pointer-events: none;
}

.conversion-flow__connectors path {
    fill: none;
    marker-end: url('#conversion-arrow');
    stroke: var(--overview-orange);
    stroke-dasharray: 2 9;
    stroke-linecap: round;
    stroke-width: 1.45;
    vector-effect: non-scaling-stroke;
}

.conversion-flow__connectors marker path {
    fill: var(--overview-orange);
    stroke: none;
}

.flow-stage {
    position: relative;
    z-index: 2;
    display: grid;
    min-width: 0;
    grid-template-rows: auto 7.25rem auto auto;
    place-items: center;
    align-self: center;
    gap: 0.2rem;
    outline: 0;
    direction: rtl;
    text-align: center;
}

.flow-stage--order-completed { grid-area: complete; }
.flow-stage--order-started { grid-area: started; }
.flow-stage--service-view { grid-area: service; }
.flow-stage--visit { grid-area: visit; }

.flow-stage__label {
    color: var(--overview-ink);
    font-size: clamp(0.72rem, 1vw, 0.9rem);
    font-weight: 700;
    white-space: nowrap;
}

.flow-stage__visual {
    position: relative;
    display: grid;
    width: 7rem;
    height: 7.25rem;
    place-items: start center;
}

.flow-stage__ring {
    position: relative;
    z-index: 3;
    display: grid;
    width: 4.8rem;
    height: 4.8rem;
    margin-block-start: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--overview-orange) 24%, var(--overview-border));
    border-radius: 50%;
    place-items: center;
    background: var(--overview-surface);
    color: var(--overview-orange);
    box-shadow:
        0 0 0 0.35rem color-mix(in srgb, var(--overview-orange) 5%, transparent),
        0 9px 24px color-mix(in srgb, var(--overview-orange) 14%, transparent);
}

.flow-stage__ring .icon {
    width: 2rem;
    height: 2rem;
    stroke-width: 2.15;
}

.flow-stage__platform {
    position: absolute;
    z-index: 1;
    inset-block-start: 4.4rem;
    width: 5.9rem;
    height: 2rem;
    border: 1px solid color-mix(in srgb, var(--overview-orange) 30%, var(--overview-border));
    border-radius: 50%;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 92%), color-mix(in srgb, var(--overview-orange) 11%, var(--overview-surface)));
    box-shadow:
        0 0.45rem 0 -0.1rem color-mix(in srgb, var(--overview-orange) 12%, var(--overview-surface)),
        0 1rem 1.35rem color-mix(in srgb, var(--overview-orange) 18%, transparent);
    transform: perspective(5rem) rotateX(58deg);
}

.flow-stage__platform::after {
    position: absolute;
    inset: 0.35rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--overview-orange) 32%, transparent);
    border-radius: 50%;
    content: '';
}

svg.flow-stage__platform {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
    transform: none;
}

svg.flow-stage__platform::after { content: none; }

svg.flow-stage__platform .flow-stage__platform-glow {
    fill: color-mix(in srgb, var(--overview-orange) 16%, transparent);
    filter: blur(3.4px);
}

svg.flow-stage__platform .flow-stage__platform-lip {
    fill: color-mix(in srgb, var(--overview-orange) 16%, var(--overview-surface));
    stroke: color-mix(in srgb, var(--overview-orange) 35%, transparent);
    stroke-width: 1;
}

svg.flow-stage__platform .flow-stage__platform-top {
    fill: color-mix(in srgb, var(--overview-surface) 96%, var(--overview-orange));
    stroke: color-mix(in srgb, var(--overview-orange) 29%, var(--overview-border));
    stroke-width: 1;
}

svg.flow-stage__platform .flow-stage__platform-highlight {
    fill: none;
    stroke: color-mix(in srgb, white 74%, var(--overview-orange));
    stroke-linecap: round;
    stroke-width: 1.15;
}

.flow-stage > strong {
    color: var(--overview-ink);
    font-size: clamp(1.35rem, 2.1vw, 2rem);
    letter-spacing: -0.035em;
    line-height: 1;
}

.flow-stage > small {
    color: var(--overview-muted);
    font-size: 0.88rem;
}

.flow-stage:hover .overview-tooltip,
.flow-stage:focus-visible .overview-tooltip {
    opacity: 1;
    transform: translate(-50%, -0.35rem);
    visibility: visible;
}

.flow-stage .overview-tooltip {
    inset-block-end: 92%;
    inset-inline-start: 50%;
    transform: translate(-50%, 0);
}

[dir='rtl'] .flow-stage .overview-tooltip {
    transform: translate(50%, 0);
}

[dir='rtl'] .flow-stage:hover .overview-tooltip,
[dir='rtl'] .flow-stage:focus-visible .overview-tooltip {
    transform: translate(50%, -0.35rem);
}

.conversion-gauge--flow {
    width: min(100%, 14.25rem);
    grid-area: gauge;
    align-self: center;
    filter: drop-shadow(0 0.9rem 1rem color-mix(in srgb, var(--overview-orange) 16%, transparent));
}

.conversion-gauge--flow::before {
    inset: 2%;
    border-color: color-mix(in srgb, var(--overview-orange) 22%, transparent);
}

.conversion-gauge--flow::after {
    inset: 7%;
    border-color: color-mix(in srgb, var(--overview-orange) 9%, var(--overview-border));
}

.conversion-gauge--flow .conversion-gauge__track,
.conversion-gauge--flow .conversion-gauge__progress {
    stroke-width: 11;
}

.conversion-gauge--flow .conversion-gauge__value strong {
    font-size: clamp(2.2rem, 3.7vw, 3rem);
}

.conversion-gauge--flow .conversion-gauge__value span {
    max-width: 7rem;
    font-size: 0.82rem;
    line-height: 1.5;
}

.flow-conversion-badge {
    position: absolute;
    z-index: 4;
    inset-block-start: 5.15rem;
    display: grid;
    min-width: 2.9rem;
    min-height: 1.55rem;
    padding-inline: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--overview-orange) 24%, var(--overview-border));
    border-radius: 999px;
    place-items: center;
    background: var(--overview-surface);
    color: var(--overview-ink);
    box-shadow: 0 3px 10px rgb(30 30 30 / 5%);
    font-size: 0.7rem;
    font-weight: 700;
    direction: ltr;
}

.flow-conversion-badge--one { right: 16.2%; }
.flow-conversion-badge--two { right: 37.4%; }
.flow-conversion-badge--three { left: 37.4%; }
.flow-conversion-badge--four { left: 16.2%; }

.overview-primary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(14rem, 0.72fr);
    grid-template-areas: "meetings traffic performance";
    gap: 0.8rem;
    direction: ltr;
}

.overview-primary-grid > * { direction: rtl; }
.reference-meetings-card { grid-area: meetings; }
.reference-traffic-card { grid-area: traffic; }
.quick-performance-card { grid-area: performance; }

.overview-primary-grid .overview-card {
    min-height: 22rem;
}

.reference-meetings-card .reference-card-heading {
    display: grid;
    grid-template-columns: auto 1fr auto;
}

.reference-meetings-card .reference-card-heading h2 {
    justify-self: end;
}

.overview-period-filter {
    grid-column: 1;
    grid-row: 1;
}

.overview-period-filter select {
    min-height: 2.2rem;
    padding-inline: 0.65rem 1.8rem;
}

.reference-chart-wrap {
    height: 13.5rem;
    padding: 0.25rem 0.25rem 0;
}

.meeting-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0.6rem -1rem -1rem;
    border-block-start: 1px solid var(--overview-border);
    direction: ltr;
}

.meeting-summary-strip > div {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
    place-items: center;
    padding: 0.8rem 0.55rem;
    direction: rtl;
    text-align: center;
}

.meeting-summary-strip > div + div { border-inline-start: 1px solid var(--overview-border); }
.meeting-summary-strip strong { color: var(--overview-ink); font-size: 1.1rem; }
.meeting-summary-strip strong.is-positive { color: #13a258; }
.meeting-summary-strip span { color: var(--overview-muted); font-size: 0.68rem; }

.reference-traffic-layout {
    display: grid;
    min-height: 16.8rem;
    grid-template-columns: minmax(7.5rem, 1fr) minmax(6rem, 0.8fr);
    align-items: center;
    gap: 0.8rem;
    direction: ltr;
}

.reference-traffic-radial {
    position: relative;
    display: grid;
    width: min(100%, 15rem);
    aspect-ratio: 1;
    place-items: center;
    justify-self: center;
}

.reference-traffic-radial svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
}

.reference-traffic-radial circle {
    fill: none;
    stroke-linecap: round;
    transform-origin: center;
}

.reference-traffic-radial__center {
    position: absolute;
    display: grid;
    width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    color: var(--overview-muted);
}

.reference-traffic-radial__center .icon { width: 1.8rem; height: 1.8rem; }

.reference-traffic-legend {
    display: grid;
    gap: 0.75rem;
    direction: rtl;
}

.reference-traffic-row {
    position: relative;
    display: grid;
    grid-template-columns: 0.65rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    outline: 0;
}

.reference-traffic-row > span:nth-of-type(2) {
    color: var(--overview-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.reference-traffic-row > strong { color: var(--overview-ink); font-size: 0.82rem; }
.reference-traffic-row--2 .traffic-legend__dot { background: var(--overview-orange-2); }
.reference-traffic-row--3 .traffic-legend__dot { background: var(--overview-orange-3); }
.reference-traffic-row--4 .traffic-legend__dot { background: var(--overview-orange-4); }
.reference-traffic-row--5 .traffic-legend__dot { background: color-mix(in srgb, var(--overview-orange) 45%, #ffd6b7); }

.reference-details-link {
    display: inline-flex;
    margin-block-start: 0.2rem;
    color: var(--overview-orange);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.quick-performance-list {
    display: grid;
    gap: 0.75rem;
    padding-block-start: 0.35rem;
}

.quick-performance-item {
    display: grid;
    min-height: 5.35rem;
    grid-template-columns: 3.1rem minmax(0, 1fr) 4.5rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem;
    border: 1px solid var(--overview-border);
    border-radius: 0.8rem;
    background: var(--overview-surface);
    box-shadow: 0 3px 12px rgb(34 36 41 / 4%);
    direction: ltr;
}

.quick-performance-icon {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    border: 1px solid color-mix(in srgb, var(--overview-orange) 22%, var(--overview-border));
    border-radius: 50%;
    place-items: center;
    color: var(--overview-orange);
    box-shadow: 0 5px 12px color-mix(in srgb, var(--overview-orange) 8%, transparent);
}

.quick-performance-icon .icon { width: 1.35rem; height: 1.35rem; }

.quick-performance-item > div {
    display: grid;
    gap: 0.08rem;
    direction: rtl;
    text-align: start;
}

.quick-performance-item small { color: var(--overview-muted); font-size: 0.6rem; }
.quick-performance-item strong { color: var(--overview-ink); font-size: 1.1rem; line-height: 1; }
.quick-performance-item div span { color: #13a258; font-size: 0.65rem; font-weight: 700; }

.performance-sparkline { width: 100%; height: 2rem; }
.performance-sparkline path { fill: none; stroke: var(--overview-orange); stroke-linecap: round; stroke-width: 1.7; vector-effect: non-scaling-stroke; }

.overview-secondary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "activities projects";
    gap: 0.8rem;
    direction: ltr;
}

.overview-secondary-grid > * { direction: rtl; }
.reference-activities-card { grid-area: activities; min-height: 14.5rem; }
.reference-projects-card { grid-area: projects; min-height: 14.5rem; }

.activity-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.25rem 1rem 0;
    direction: ltr;
}

.activity-timeline-item[data-activity-key='customer'] { order: 1; }
.activity-timeline-item[data-activity-key='meeting'] { order: 2; }
.activity-timeline-item[data-activity-key='project'] { order: 3; }
.activity-timeline-item[data-activity-key='order'] { order: 4; }

.activity-timeline::before {
    position: absolute;
    z-index: 0;
    inset-block-start: 2.3rem;
    inset-inline: 3rem;
    border-block-start: 1.5px dashed var(--overview-orange);
    content: '';
}

.activity-timeline-item {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    grid-template-rows: 4.35rem auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.activity-timeline-item__icon {
    display: grid;
    width: 3.7rem;
    height: 3.7rem;
    align-self: start;
    justify-self: center;
    border: 1px solid color-mix(in srgb, var(--overview-orange) 24%, var(--overview-border));
    border-radius: 50%;
    place-items: center;
    background: var(--overview-surface);
    color: var(--overview-orange);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--overview-orange) 9%, transparent);
}

.activity-timeline-item__icon .icon { width: 1.65rem; height: 1.65rem; }
.activity-timeline-item__icon [data-activity-icon] { display: grid; place-items: center; }
.activity-timeline-item__icon [data-activity-icon][hidden] { display: none; }

.activity-timeline-item > div {
    display: grid;
    min-height: 6.2rem;
    gap: 0.25rem;
    padding: 0.8rem 0.55rem;
    border: 1px solid var(--overview-border);
    border-radius: 0.65rem;
    align-content: start;
    background: var(--overview-surface);
    box-shadow: 0 3px 10px rgb(38 40 46 / 3%);
    text-align: center;
    direction: rtl;
}

.activity-timeline-item strong { color: var(--overview-ink); font-size: 0.74rem; }
.activity-timeline-item div span,
.activity-timeline-item time { color: var(--overview-muted); font-size: 0.6rem; line-height: 1.55; }

.reference-project-layout {
    display: grid;
    min-height: 10.4rem;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: center;
    gap: 1.4rem;
    direction: ltr;
}

.project-total-orb {
    position: relative;
    display: grid;
    width: 7.5rem;
    aspect-ratio: 1;
    place-items: center;
    align-content: center;
    gap: 0.2rem;
    border: 1px solid var(--overview-border);
    border-radius: 50%;
    background: var(--overview-surface);
    box-shadow: 0 8px 20px rgb(35 37 43 / 5%);
    direction: rtl;
}

.project-total-orb strong { color: var(--overview-ink); font-size: 2.4rem; line-height: 1; }
.project-total-orb span { color: var(--overview-muted); font-size: 0.68rem; }
.project-total-orb small { position: absolute; inset-block-end: -0.8rem; display: grid; width: 2rem; height: 2rem; border: 1px solid var(--overview-border); border-radius: 50%; place-items: center; background: var(--overview-surface); color: var(--overview-muted); }
.project-total-orb small .icon { width: 0.9rem; height: 0.9rem; }

.reference-project-breakdown { min-width: 0; direction: rtl; }
.reference-project-breakdown .project-segmented-bar { height: 1.25rem; direction: ltr; }
.reference-project-breakdown .project-status-legend { margin-block-start: 1rem; direction: ltr; }
.reference-project-breakdown .project-status-legend > div { direction: rtl; }
.reference-project-breakdown .project-status-legend strong { font-size: 1.05rem; }
.reference-project-breakdown .project-status-legend span { color: var(--overview-ink); font-size: 0.7rem; font-weight: 600; }
.reference-project-breakdown .project-status-legend small { font-size: 0.65rem; }

.overview-dashboard--reference .overview-freshness {
    padding-inline: 0.4rem;
    color: var(--overview-muted);
    font-size: 0.65rem;
}

@media (max-width: 78rem) {
    .conversion-flow {
        min-height: 31rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
            "gauge gauge gauge gauge"
            "complete started service visit";
        grid-template-rows: 14rem 16rem;
    }

    .conversion-flow__connectors,
    .flow-conversion-badge { display: none; }
    .conversion-gauge--flow { width: 13rem; }

    .overview-primary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "meetings traffic"
            "performance performance";
    }

    .quick-performance-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 64rem) {
    .overview-primary-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "meetings" "traffic" "performance";
    }

    .overview-secondary-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "projects" "activities";
    }
}

@media (max-width: 48rem) {
    .conversion-flow-card { padding-inline: 0.75rem !important; }
    .conversion-flow {
        min-height: 49rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "gauge gauge"
            "service visit"
            "complete started";
        grid-template-rows: 14rem repeat(2, 16rem);
    }

    .flow-stage__label { white-space: normal; }
    .quick-performance-list { grid-template-columns: 1fr; }
    .overview-primary-grid .quick-performance-card { min-height: auto; }
    .activity-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.65rem; }
    .activity-timeline::before { display: none; }
}

@media (max-width: 35rem) {
    .reference-card-heading--hero { flex-wrap: wrap; }
    .conversion-flow {
        min-height: 78rem;
        grid-template-columns: 1fr;
        grid-template-areas: "gauge" "visit" "service" "started" "complete";
        grid-template-rows: 14rem repeat(4, 15rem);
    }

    .reference-meetings-card .reference-card-heading { grid-template-columns: auto 1fr; }
    .reference-meetings-card .reference-more { display: none; }
    .reference-chart-wrap { height: 12rem; }
    .meeting-summary-strip { grid-template-columns: 1fr; }
    .meeting-summary-strip > div + div { border-inline-start: 0; border-block-start: 1px solid var(--overview-border); }
    .reference-traffic-layout { grid-template-columns: 1fr; }
    .reference-traffic-radial { width: min(14rem, 75vw); }
    .activity-timeline { grid-template-columns: 1fr; }
    .reference-project-layout { grid-template-columns: 1fr; justify-items: center; }
    .reference-project-breakdown { width: 100%; }
    .reference-project-breakdown .project-status-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .conversion-flow__connectors path,
    .performance-sparkline path { animation: none; }
}

/* Restore the dashboard version that preceded the latest redesign. */
.overview-dashboard:not(.overview-dashboard--reference) .overview-toolbar,
.overview-dashboard:not(.overview-dashboard--reference) .overview-card {
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}
.overview-dashboard:not(.overview-dashboard--reference) .overview-card { padding: 1rem; }
.overview-dashboard:not(.overview-dashboard--reference) .overview-card:hover { border-color: var(--overview-border); box-shadow: 0 1px 2px rgb(0 0 0 / 4%); transform: none; }
.overview-dashboard:not(.overview-dashboard--reference) .overview-analytics-grid { grid-template-columns: 0.9fr 1.15fr 1fr 1.1fr; gap: 0.9rem; }
.overview-dashboard:not(.overview-dashboard--reference) .overview-analytics-grid .overview-card { min-height: 20rem; }
@media (max-width: 80rem) { .overview-dashboard:not(.overview-dashboard--reference) .overview-analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) { .overview-dashboard:not(.overview-dashboard--reference) .overview-analytics-grid { grid-template-columns: 1fr; } }

/* Pixel-tuned conversion overview matching the supplied compact reference. */
@media (min-width: 78.01rem) {
    .conversion-flow-card--reference-compact {
        min-height: 15.25rem;
        padding: 0.55rem 1rem 0.7rem !important;
    }

    .conversion-flow-card--reference-compact .reference-card-heading {
        position: relative;
        display: block;
        min-height: 1.45rem;
        margin-block-end: 0.1rem;
        padding-inline: 0.2rem;
    }

    .conversion-flow-card--reference-compact .reference-card-heading h2 {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0.2rem;
        font-size: 0.86rem;
        white-space: nowrap;
    }

    .conversion-flow-card--reference-compact .reference-period-chip {
        position: absolute;
        z-index: 6;
        inset-block-start: 1.7rem;
        inset-inline-start: 0.2rem;
        min-height: 1.7rem;
        padding-inline: 0.55rem;
        border-radius: 0.55rem;
        font-size: 0.6rem;
    }

    .conversion-flow-card--reference-compact .conversion-flow {
        min-height: 12.4rem;
        grid-template-columns: minmax(6.2rem, 1fr) minmax(6.2rem, 1fr) minmax(10.5rem, 1.3fr) minmax(6.2rem, 1fr) minmax(6.2rem, 1fr);
        gap: clamp(0.25rem, 1.2vw, 0.9rem);
    }

    .conversion-flow-card--reference-compact .conversion-flow__connectors {
        inset-block-start: 0.1rem;
        height: calc(100% - 0.1rem);
        transform: translateY(-0.8rem);
    }

    .conversion-flow-card--reference-compact .conversion-flow__connectors > path {
        stroke-dasharray: none;
        stroke-width: 1.2;
        opacity: 0.62;
        filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--overview-orange) 24%, transparent));
    }

    .conversion-flow-card--reference-compact .conversion-flow__arrow-head {
        marker-end: none;
        fill: none;
        stroke: var(--overview-orange);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.85;
        vector-effect: non-scaling-stroke;
    }

    .conversion-flow-card--reference-compact .conversion-flow__direction-arrows path {
        marker-end: none;
        fill: none;
        stroke: var(--overview-orange);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.7;
        filter: drop-shadow(0 0 2px color-mix(in srgb, var(--overview-orange) 24%, transparent));
        vector-effect: non-scaling-stroke;
    }

    .conversion-flow-card--reference-compact .conversion-flow__particles {
        fill: var(--overview-orange);
        opacity: 0.8;
    }

    .conversion-flow-card--reference-compact .flow-stage {
        grid-template-rows: auto 6.55rem auto auto;
        gap: 0.08rem;
        transform: translateY(0);
    }

    .conversion-flow-card--reference-compact .flow-stage--order-completed { transform: translate(0.85rem, 0.3rem); }
    .conversion-flow-card--reference-compact .flow-stage--order-started { transform: translate(-0.85rem, 0.3rem); }
    .conversion-flow-card--reference-compact .flow-stage--service-view { transform: translate(-2.55rem, 0.3rem); }
    .conversion-flow-card--reference-compact .flow-stage--visit { transform: translate(-3.25rem, 0.3rem); }

    .conversion-flow-card--reference-compact .flow-stage__label {
        font-size: clamp(0.68rem, 0.82vw, 0.78rem);
    }

    .conversion-flow-card--reference-compact .flow-stage__visual {
        width: 6.4rem;
        height: 6.75rem;
    }

    .conversion-flow-card--reference-compact .flow-stage__ring {
        z-index: 5;
        width: 4.35rem;
        height: 4.35rem;
        margin-block-start: 0.2rem;
        border-color: color-mix(in srgb, var(--overview-orange) 26%, var(--overview-border));
        background:
            radial-gradient(circle at 50% 38%, color-mix(in srgb, white 92%, var(--overview-surface)) 0 42%, var(--overview-surface) 76%);
        box-shadow:
            0 0 0 0.27rem color-mix(in srgb, var(--overview-orange) 4.5%, transparent),
            0 0 0 0.52rem color-mix(in srgb, var(--overview-orange) 3%, transparent),
            0 0.5rem 1.1rem color-mix(in srgb, var(--overview-orange) 16%, transparent);
    }

    .conversion-flow-card--reference-compact .flow-stage__ring::before,
    .conversion-flow-card--reference-compact .flow-stage__ring::after {
        position: absolute;
        border: 1px solid color-mix(in srgb, var(--overview-orange) 11%, transparent);
        border-radius: 50%;
        content: '';
        pointer-events: none;
    }

    .conversion-flow-card--reference-compact .flow-stage__ring::before {
        inset: -0.29rem;
    }

    .conversion-flow-card--reference-compact .flow-stage__ring::after {
        inset: -0.56rem;
        border-color: color-mix(in srgb, var(--overview-orange) 6%, transparent);
    }

    .conversion-flow-card--reference-compact .flow-stage__ring .icon {
        width: 1.85rem;
        height: 1.85rem;
        stroke-width: 2.35;
        filter: drop-shadow(0 0.15rem 0.22rem color-mix(in srgb, var(--overview-orange) 16%, transparent));
    }

    .conversion-flow-card--reference-compact .flow-stage__platform {
        z-index: 2;
        inset-block-start: 3.45rem;
        width: 7.25rem;
        height: 3.6rem;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        transform: none;
        overflow: visible;
        pointer-events: none;
    }

    .conversion-flow-card--reference-compact .flow-stage__platform::after {
        content: none;
    }

    .conversion-flow-card--reference-compact .flow-stage__platform-glow {
        fill: color-mix(in srgb, var(--overview-orange) 16%, transparent);
        filter: blur(3.4px);
    }

    .conversion-flow-card--reference-compact .flow-stage__platform-lip {
        fill: color-mix(in srgb, var(--overview-orange) 16%, var(--overview-surface));
        stroke: color-mix(in srgb, var(--overview-orange) 35%, transparent);
        stroke-width: 1;
        filter: drop-shadow(0 5px 5px color-mix(in srgb, var(--overview-orange) 16%, transparent));
    }

    .conversion-flow-card--reference-compact .flow-stage__platform-top {
        fill: color-mix(in srgb, var(--overview-surface) 96%, var(--overview-orange));
        stroke: color-mix(in srgb, var(--overview-orange) 29%, var(--overview-border));
        stroke-width: 1;
        filter: drop-shadow(0 2px 2px rgb(25 25 25 / 4%));
    }

    .conversion-flow-card--reference-compact .flow-stage__platform-highlight {
        fill: none;
        stroke: color-mix(in srgb, white 74%, var(--overview-orange));
        stroke-linecap: round;
        stroke-width: 1.15;
    }

    .conversion-flow-card--reference-compact .flow-stage > strong {
        font-size: clamp(1.25rem, 1.65vw, 1.65rem);
    }

    .conversion-flow-card--reference-compact .flow-stage > small {
        font-size: 0.72rem;
    }

    .conversion-flow-card--reference-compact .conversion-gauge--flow {
        width: min(100%, 12.35rem);
        filter: drop-shadow(0 0.7rem 0.9rem color-mix(in srgb, var(--overview-orange) 18%, transparent));
        transform: translate(-1.9rem, -0.55rem);
    }

    .conversion-flow-card--reference-compact .conversion-gauge--flow .conversion-gauge__track,
    .conversion-flow-card--reference-compact .conversion-gauge--flow .conversion-gauge__progress {
        stroke-width: 9.75;
    }

    .conversion-flow-card--reference-compact .conversion-gauge--flow .conversion-gauge__value strong {
        font-size: clamp(2rem, 2.8vw, 2.45rem);
    }

    .conversion-flow-card--reference-compact .conversion-gauge--flow .conversion-gauge__value span {
        max-width: 5.8rem;
        font-size: 0.68rem;
    }

    .conversion-flow-card--reference-compact .flow-conversion-badge {
        inset-block-start: 2.95rem;
        min-width: 2.65rem;
        min-height: 1.35rem;
        padding-inline: 0.38rem;
        border-color: color-mix(in srgb, var(--overview-orange) 30%, var(--overview-border));
        background: color-mix(in srgb, var(--overview-surface) 94%, var(--overview-orange));
        box-shadow:
            0 0 0 0.18rem color-mix(in srgb, var(--overview-orange) 3%, transparent),
            0 0.25rem 0.65rem color-mix(in srgb, var(--overview-orange) 9%, transparent);
        font-size: 0.62rem;
    }

    .conversion-flow-card--reference-compact .flow-conversion-badge--one { right: 22.7%; }
    .conversion-flow-card--reference-compact .flow-conversion-badge--two { right: 39.9%; }
    .conversion-flow-card--reference-compact .flow-conversion-badge--three { left: 31.5%; }
    .conversion-flow-card--reference-compact .flow-conversion-badge--four { left: 15.1%; }
}

/* Stable overview layout restored after the experimental dashboard concepts. */
.overview-dashboard.overview-dashboard--restored .overview-analytics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 1.6vw, 1.5rem);
    align-items: stretch;
}

.overview-dashboard.overview-dashboard--restored .overview-analytics-grid .overview-card {
    min-height: 0;
    height: auto;
    align-self: stretch;
    padding: 1rem;
}

.overview-dashboard.overview-dashboard--restored .overview-journey {
    padding-block: 1rem;
}

@media (min-width: 48.0625rem) {
    .overview-dashboard.overview-dashboard--restored .overview-journey .journey-path {
        min-height: 10.8rem;
        margin-block-start: 0.35rem;
        padding-block: 0.35rem 0.05rem;
    }

    .overview-dashboard.overview-dashboard--restored .overview-journey .journey-path__icon {
        margin-block: 0.65rem 0.35rem;
    }

    .overview-dashboard.overview-dashboard--restored .overview-journey .journey-path__stage > small {
        margin-block-start: 0.5rem;
    }
}

.overview-dashboard.overview-dashboard--restored .overview-chart-wrap {
    height: clamp(11.5rem, 15vw, 13rem);
    margin-block-start: 0.65rem;
}

.overview-dashboard.overview-dashboard--restored .overview-traffic .traffic-list {
    gap: 0.6rem;
    margin-block-start: 0.75rem;
}

.overview-dashboard.overview-dashboard--restored .overview-traffic .traffic-row {
    gap: 0.3rem;
}

/* Keep the recent-activity visualization compact and sized to its content. */
.overview-dashboard.overview-dashboard--restored .overview-activities {
    padding: 1rem;
}

.overview-dashboard.overview-dashboard--restored .overview-activities .activity-list {
    gap: 0.45rem;
    margin-block-start: 0.75rem;
}

.overview-dashboard.overview-dashboard--restored .overview-activities .activity-mini-card {
    min-height: 3.75rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--overview-border);
    border-radius: 0.9rem;
}

.overview-dashboard.overview-dashboard--restored .overview-activities .activity-mini-card > div,
.overview-dashboard.overview-dashboard--restored .overview-activities .activity-mini-card time {
    padding: 0;
}

.overview-dashboard.overview-dashboard--restored .overview-activities .activity-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.overview-dashboard.overview-dashboard--restored .overview-projects .project-status-layout {
    gap: 0.8rem;
    margin-block-start: 0.65rem;
}

.overview-dashboard.overview-dashboard--restored .overview-projects .project-tech-chart {
    gap: 0.45rem;
    padding: 0.55rem;
}

.overview-dashboard.overview-dashboard--restored .overview-projects .project-tech-chart__canvas {
    min-height: 7.75rem;
}

.overview-dashboard.overview-dashboard--restored .overview-projects .project-waffle {
    width: min(100%, 9.5rem);
    gap: 0.22rem;
    padding: 0.3rem;
}

.overview-dashboard.overview-dashboard--restored .overview-projects .project-legend {
    gap: 0.35rem;
}

.overview-dashboard.overview-dashboard--restored .overview-projects .project-legend > div {
    padding-block: 0.35rem;
}

/* Production polish: preserve the composition while refining hierarchy and finish. */
.overview-dashboard.overview-dashboard--restored {
    --overview-border: #e4e4e7;
    --overview-elevated: #f6f6f7;
    --overview-shadow:
        0 1px 2px rgb(17 24 39 / 3%),
        0 12px 32px rgb(17 24 39 / 4%);
}

.overview-dashboard.overview-dashboard--restored .overview-toolbar,
.overview-dashboard.overview-dashboard--restored .overview-kpi,
.overview-dashboard.overview-dashboard--restored .overview-card {
    border-color: var(--overview-border);
    box-shadow: var(--overview-shadow);
}

.overview-dashboard.overview-dashboard--restored .overview-card {
    background:
        linear-gradient(180deg, color-mix(in srgb, white 3%, transparent), transparent 34%),
        var(--overview-surface);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.overview-dashboard.overview-dashboard--restored .overview-card:hover {
    border-color: color-mix(in srgb, var(--overview-orange) 18%, var(--overview-border));
    box-shadow:
        0 1px 2px rgb(17 24 39 / 3%),
        0 16px 38px rgb(17 24 39 / 5%);
    transform: none;
}

.overview-dashboard.overview-dashboard--restored .overview-card__heading h2 {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.25;
}

.overview-dashboard.overview-dashboard--restored .overview-card__heading p {
    max-width: 42rem;
    margin-block-start: 0.22rem;
    font-size: 0.71rem;
    line-height: 1.55;
}

.overview-dashboard.overview-dashboard--restored .overview-section-icon {
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid color-mix(in srgb, var(--overview-orange) 12%, var(--overview-border));
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--overview-orange) 8%, var(--overview-surface));
}

.overview-dashboard.overview-dashboard--restored .overview-kpi {
    min-height: 5.8rem;
    gap: 0.22rem;
    padding: 0.85rem 0.95rem;
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--overview-orange) 5%, transparent), transparent 42%),
        var(--overview-surface);
}

.overview-dashboard.overview-dashboard--restored .overview-kpi__top {
    font-size: 0.76rem;
    line-height: 1.3;
}

.overview-dashboard.overview-dashboard--restored .overview-kpi > strong {
    font-size: clamp(1.5rem, 2.15vw, 1.85rem);
    line-height: 1.05;
}

.overview-dashboard.overview-dashboard--restored .overview-change {
    font-size: 0.69rem;
    line-height: 1.35;
}

.overview-dashboard.overview-dashboard--restored .overview-icon {
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid color-mix(in srgb, var(--overview-orange) 14%, var(--overview-border));
    border-radius: 0.75rem;
}

.overview-dashboard.overview-dashboard--restored .overview-traffic,
.overview-dashboard.overview-dashboard--restored .overview-meetings,
.overview-dashboard.overview-dashboard--restored .overview-projects,
.overview-dashboard.overview-dashboard--restored .overview-activities {
    display: flex;
    flex-direction: column;
}

.overview-dashboard.overview-dashboard--restored .overview-traffic .traffic-list {
    flex: 1;
    align-content: space-evenly;
}

.overview-dashboard.overview-dashboard--restored .traffic-track {
    height: 0.27rem;
    background: color-mix(in srgb, var(--overview-border) 68%, var(--overview-elevated));
}

.overview-dashboard.overview-dashboard--restored .traffic-track span {
    box-shadow: 0 0 0.45rem color-mix(in srgb, var(--overview-orange) 18%, transparent);
}

.overview-dashboard.overview-dashboard--restored .activity-mini-card,
.overview-dashboard.overview-dashboard--restored .project-tech-chart {
    background: color-mix(in srgb, var(--overview-elevated) 58%, transparent);
    transition: border-color 150ms ease, background-color 150ms ease;
}

.overview-dashboard.overview-dashboard--restored .activity-mini-card:hover {
    border-color: color-mix(in srgb, var(--overview-orange) 20%, var(--overview-border));
    background: color-mix(in srgb, var(--overview-orange) 3.5%, var(--overview-elevated));
}

:root[data-theme='dark'] .overview-dashboard.overview-dashboard--restored {
    --overview-surface: #151516;
    --overview-elevated: #202022;
    --overview-border: #303034;
    --overview-shadow:
        inset 0 1px 0 rgb(255 255 255 / 2.5%),
        0 14px 34px rgb(0 0 0 / 18%);
}

:root[data-theme='dark'] .overview-dashboard.overview-dashboard--restored .overview-card:hover {
    border-color: color-mix(in srgb, var(--overview-orange) 22%, var(--overview-border));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 3%),
        0 16px 38px rgb(0 0 0 / 22%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .overview-dashboard.overview-dashboard--restored {
        --overview-surface: #151516;
        --overview-elevated: #202022;
        --overview-border: #303034;
        --overview-shadow:
            inset 0 1px 0 rgb(255 255 255 / 2.5%),
            0 14px 34px rgb(0 0 0 / 18%);
    }
}

/* Calm, staged motion that supports scanning without distracting from the data. */
.overview-dashboard.overview-dashboard--restored .overview-toolbar,
.overview-dashboard.overview-dashboard--restored .overview-heading,
.overview-dashboard.overview-dashboard--restored .overview-kpi,
.overview-dashboard.overview-dashboard--restored .overview-journey,
.overview-dashboard.overview-dashboard--restored .overview-analytics-grid > .overview-card,
.overview-dashboard.overview-dashboard--restored .overview-freshness {
    animation: dashboard-reveal 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.overview-dashboard.overview-dashboard--restored .overview-heading { animation-delay: 55ms; }
.overview-dashboard.overview-dashboard--restored .overview-kpi:nth-child(1) { animation-delay: 100ms; }
.overview-dashboard.overview-dashboard--restored .overview-kpi:nth-child(2) { animation-delay: 145ms; }
.overview-dashboard.overview-dashboard--restored .overview-kpi:nth-child(3) { animation-delay: 190ms; }
.overview-dashboard.overview-dashboard--restored .overview-kpi:nth-child(4) { animation-delay: 235ms; }
.overview-dashboard.overview-dashboard--restored .overview-journey { animation-delay: 280ms; }
.overview-dashboard.overview-dashboard--restored .overview-analytics-grid > .overview-card:nth-child(1) { animation-delay: 325ms; }
.overview-dashboard.overview-dashboard--restored .overview-analytics-grid > .overview-card:nth-child(2) { animation-delay: 370ms; }
.overview-dashboard.overview-dashboard--restored .overview-analytics-grid > .overview-card:nth-child(3) { animation-delay: 415ms; }
.overview-dashboard.overview-dashboard--restored .overview-analytics-grid > .overview-card:nth-child(4) { animation-delay: 460ms; }
.overview-dashboard.overview-dashboard--restored .overview-freshness { animation-delay: 505ms; }

.overview-dashboard.overview-dashboard--restored .journey-path__arrow line {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: dashboard-arrow-draw 680ms cubic-bezier(0.22, 1, 0.36, 1) 560ms forwards;
}

.overview-dashboard.overview-dashboard--restored .journey-path__arrow polyline,
.overview-dashboard.overview-dashboard--restored .journey-path__arrow circle {
    opacity: 0;
    animation: dashboard-arrow-detail 260ms ease-out 1.08s forwards;
}

.overview-dashboard.overview-dashboard--restored .traffic-track span {
    transform: scaleX(0);
    transform-origin: right center;
    animation: dashboard-bar-grow 620ms cubic-bezier(0.22, 1, 0.36, 1) 520ms forwards;
}

[dir='ltr'] .overview-dashboard.overview-dashboard--restored .traffic-track span {
    transform-origin: left center;
}

.overview-dashboard.overview-dashboard--restored .activity-mini-card {
    animation: dashboard-item-reveal 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.overview-dashboard.overview-dashboard--restored .activity-mini-card:nth-child(1) { animation-delay: 520ms; }
.overview-dashboard.overview-dashboard--restored .activity-mini-card:nth-child(2) { animation-delay: 565ms; }
.overview-dashboard.overview-dashboard--restored .activity-mini-card:nth-child(3) { animation-delay: 610ms; }
.overview-dashboard.overview-dashboard--restored .activity-mini-card:nth-child(4) { animation-delay: 655ms; }

.overview-dashboard.overview-dashboard--restored .overview-section-icon,
.overview-dashboard.overview-dashboard--restored .overview-icon,
.overview-dashboard.overview-dashboard--restored .activity-icon,
.overview-dashboard.overview-dashboard--restored .journey-path__icon {
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.overview-dashboard.overview-dashboard--restored .overview-card:hover .overview-section-icon,
.overview-dashboard.overview-dashboard--restored .overview-kpi:hover .overview-icon,
.overview-dashboard.overview-dashboard--restored .activity-mini-card:hover .activity-icon,
.overview-dashboard.overview-dashboard--restored .journey-path__stage:hover .journey-path__icon {
    border-color: color-mix(in srgb, var(--overview-orange) 34%, var(--overview-border));
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--overview-orange) 6%, transparent);
    transform: translateY(-2px);
}

@keyframes dashboard-reveal {
    from {
        opacity: 0;
        filter: blur(2px);
        transform: translateY(0.7rem) scale(0.995);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes dashboard-item-reveal {
    from { opacity: 0; transform: translateY(0.35rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes dashboard-arrow-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes dashboard-arrow-detail {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dashboard-bar-grow {
    to { transform: scaleX(1); }
}

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

@media (max-width: 48rem) {
    .overview-dashboard.overview-dashboard--restored .overview-analytics-grid {
        grid-template-columns: 1fr;
    }

    .overview-dashboard.overview-dashboard--restored .overview-activities .activity-mini-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .overview-dashboard.overview-dashboard--restored .overview-activities .activity-mini-card time {
        grid-column: 2;
    }
}

/* Per-entity ability rows in the role permission editor. */
.ability-row {
    display: grid;
    gap: 0.5rem;
    padding-block: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.ability-row:first-of-type {
    border-top: 0;
}

.ability-row .eyebrow {
    margin: 0;
}

/* Permanent deletion is the one ability with nothing behind it, so it reads
   differently from the rest even before it is ticked. */
.choice--danger {
    border-color: color-mix(in srgb, var(--color-danger, #b42318) 35%, var(--color-border));
}

.choice--danger:has(input:checked) {
    border-color: var(--color-danger, #b42318);
    background: color-mix(in srgb, var(--color-danger, #b42318) 8%, var(--color-surface));
}

/* Combobox: a styled replacement for <datalist>, whose native dropdown ignores
   page direction, spacing and theme entirely. */
.combobox {
    position: relative;
}

.combobox__list {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 0.35rem);
    z-index: 30;
    max-height: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: 0 12px 28px rgb(0 0 0 / 18%);
}

.combobox__option {
    display: grid;
    gap: 0.1rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.5rem;
    cursor: pointer;
    text-align: start;
}

.combobox__option strong {
    font-weight: 600;
    /* Module keys are lowercase ASCII identifiers: keep them left-to-right even
       inside an RTL page, or the dots and dashes jump to the wrong end. */
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

.combobox__option small {
    color: var(--color-muted, inherit);
    opacity: 0.75;
}

.combobox__option:hover,
.combobox__option.is-active {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
}

.combobox__option.is-active {
    outline: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .combobox.is-open .combobox__list {
        animation: combobox-in 120ms ease-out;
    }
}

@keyframes combobox-in {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to { opacity: 1; transform: none; }
}

/* Public site footer: brand block plus grouped link columns. */
.public-footer {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    align-items: start;
}

.public-footer__group ul {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.3rem;
}

.public-footer__copyright {
    grid-column: 1 / -1;
    margin: 0;
    opacity: 0.7;
}

/* Permission Cards & Compact Layout */
.permission-card-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    align-items: start;
}

.permission-card {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    padding: 0.65rem 0.85rem;
    min-width: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.permission-card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.25);
}

.permission-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.permission-card-title {
    font-size: 0.825rem;
    font-weight: 700;
    color: var(--text);
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.permission-card-meta {
    font-size: 0.735rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.permission-edit-details {
    margin-top: 0.2rem;
    border-top: 1px solid var(--border);
    padding-top: 0.4rem;
}

.permission-edit-details summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--accent);
    user-select: none;
    transition: opacity 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.permission-edit-details summary:hover {
    opacity: 0.85;
}

.permission-edit-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.45rem;
}

.permission-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.permission-field-row {
    display: grid;
    grid-template-columns: 85px 1fr;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
}

.permission-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    margin: 0;
}

.permission-field-input {
    width: 100%;
    min-width: 0;
    padding: 0.3rem 0.55rem;
    font-size: 0.78rem;
    height: 1.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    color: var(--text);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.permission-field-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.permission-field-input:read-only {
    opacity: 0.8;
    cursor: not-allowed;
    background: var(--surface-soft);
}

.permission-system-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: -0.15rem 0 0;
    grid-column: 1 / -1;
}

.permission-actions-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

.permission-actions-bar .button {
    font-size: 0.75rem;
    padding: 0.3rem 0.65rem;
    height: auto;
    border-radius: 0.4rem;
}

@media (max-width: 640px) {
    .permission-field-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        align-items: start;
    }
}

/* Role Form Permission Toolbar & Toggles */
.permission-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
}

.permission-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.permission-toolbar-actions .button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    padding: 0.45rem 0.85rem;
}

/* Role Form Permission Groups & Ability Grids */
.permission-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 0.75rem);
    background: var(--surface);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 0.15s ease;
}

.permission-group:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.permission-group > legend {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    padding: 0 0.5rem;
    letter-spacing: -0.01em;
    width: auto;
}

.permission-mini-toggle,
.permission-row-toggle {
    font-size: 0.725rem;
    font-weight: 600;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 9999px;
    padding: 0.2rem 0.65rem;
    cursor: pointer;
    line-height: 1.2;
    transition: all 0.15s ease;
    user-select: none;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.permission-mini-toggle:hover,
.permission-row-toggle:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.permission-mini-toggle *,
.permission-row-toggle *,
.js-toggle-all-permissions * {
    pointer-events: none;
}

.ability-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
}

.ability-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ability-row:first-of-type {
    border-top: none;
    padding-top: 0;
}

.ability-row > .eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.choice {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 0.4rem);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

.choice:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 5%, var(--surface-soft));
}

.choice:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.choice input[type="checkbox"] {
    accent-color: var(--accent);
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.choice span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.choice span strong {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.choice span small {
    font-size: 0.725rem;
    color: var(--text-muted);
    font-family: ui-monospace, monospace;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.choice--danger:hover {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, var(--border));
    background: color-mix(in srgb, var(--danger, #ef4444) 5%, var(--surface-soft));
}

.choice--danger:has(input:checked) {
    border-color: var(--danger, #ef4444);
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, var(--surface));
}

.choice--danger input[type="checkbox"]:checked {
    accent-color: var(--danger, #ef4444);
}

@media (max-width: 900px) {
    .choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .choice-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Glassy Light-Orange Dropdowns, Selection & List Styles
   ========================================================================== */

/* Universal text selection with glassy orange hue */
::selection {
    background: rgba(255, 115, 0, 0.4) !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 115, 0, 0.65);
}

::-moz-selection {
    background: rgba(255, 115, 0, 0.4) !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 115, 0, 0.65);
}

/* Native Select Inputs across the entire platform */
select,
.field select,
.filter-grid select,
.overview-period-filter select,
.permission-card select,
.table-wrap select {
    accent-color: #ff6500;
    color-scheme: dark;
    background-color: var(--surface-soft, #151515);
    border: 1px solid var(--border, #333336);
    border-radius: var(--radius-sm, 0.5rem);
    color: var(--text, #ffffff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

select:focus,
.field select:focus,
.filter-grid select:focus {
    outline: none;
    border-color: #ff7700 !important;
    box-shadow: 0 0 0 3px rgba(255, 101, 0, 0.28), 0 0 15px rgba(255, 101, 0, 0.18) !important;
}

/* Dropdown Options with Glassy Light-Orange Highlight */
select option {
    background-color: #161619;
    color: #f3f4f6;
    padding: 0.65rem 0.95rem;
}

select option:checked,
select option:hover,
select option:focus,
select option:active {
    background: linear-gradient(135deg, rgba(255, 115, 0, 0.45) 0%, rgba(255, 145, 45, 0.3) 100%), #1f1a16 !important;
    background-color: rgba(255, 115, 0, 0.45) !important;
    color: #ffffff !important;
}

/* Combobox & Autocomplete Glassy Highlight */
.combobox__list {
    background: color-mix(in srgb, var(--surface, #151515) 85%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid color-mix(in srgb, var(--accent, #ff6500) 35%, var(--border, #333336));
    border-radius: var(--radius-sm, 0.5rem);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 101, 0, 0.15);
}

.combobox__option {
    padding: 0.65rem 0.95rem;
    transition: all 0.15s ease;
}

.combobox__option.is-active,
.combobox__option:hover {
    background: linear-gradient(135deg, rgba(255, 115, 0, 0.35) 0%, rgba(255, 145, 45, 0.2) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
}

/* Topbar search & Dropdown menus */
.topbar-search-results {
    background: color-mix(in srgb, var(--surface, #151515) 90%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid color-mix(in srgb, var(--accent, #ff6500) 35%, var(--border, #333336));
    border-radius: var(--radius-md, 0.75rem);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 101, 0, 0.2);
}

.topbar-search-results a:hover,
.topbar-search-results a:focus {
    background: linear-gradient(135deg, rgba(255, 115, 0, 0.35) 0%, rgba(255, 145, 45, 0.2) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.menu-preview-link:hover {
    color: #ff6500 !important;
}

/* Frontend navbar preview inside the Menu Bar editor. Keep this scoped so the
   admin shell remains independent from the public Angular application. */
.frontend-navbar-preview-panel {
    container: frontend-navbar / inline-size;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 1.25rem;
    background: var(--surface);
    box-shadow: 0 14px 34px rgb(17 24 39 / 8%);
}

.frontend-navbar-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.1rem 0.25rem 0.85rem;
}

.frontend-navbar-preview-heading > div {
    display: grid;
    gap: 0.2rem;
}

.frontend-navbar-preview-heading strong {
    color: var(--text);
    font-size: 0.9rem;
}

.frontend-navbar-preview-heading div span {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.frontend-navbar-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    padding: 0.38rem 0.62rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--surface-soft);
    font-size: 0.72rem;
    font-weight: 700;
}

.frontend-navbar-status > span {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: #8b8b8b;
}

.frontend-navbar-status.is-active > span {
    background: #22c55e;
    box-shadow: 0 0 0 0.2rem rgb(34 197 94 / 12%);
}

.frontend-navbar-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 5rem;
    padding: 1rem 1.5rem;
    border: 1px solid rgb(255 255 255 / 5%);
    border-radius: 1rem;
    color: #f5f3ef;
    background: rgb(7 7 7 / 96%);
    box-shadow: 0 16px 38px rgb(0 0 0 / 24%);
    backdrop-filter: blur(12px);
}

.frontend-navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    color: inherit;
    text-decoration: none;
    transition: transform 180ms ease;
}

.frontend-navbar-brand:hover {
    transform: scale(1.02);
}

.frontend-navbar-mark {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    overflow: hidden;
    border: 1px solid rgb(255 104 31 / 40%);
    border-radius: 0.75rem;
    color: #ff681f;
    background: rgb(255 104 31 / 15%);
    box-shadow: 0 0 15px rgb(255 104 31 / 25%);
}

.frontend-navbar-mark svg {
    width: 1.4rem;
    height: 1.4rem;
}

.frontend-navbar-mark img {
    width: 100%;
    height: 100%;
    padding: 0.3rem;
    object-fit: contain;
}

.frontend-navbar-brand-copy {
    display: grid;
    gap: 0.15rem;
    text-align: start;
}

.frontend-navbar-brand-copy strong {
    color: #fff;
    font-size: 1.14rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.02em;
}

.frontend-navbar-brand-copy small {
    color: #8f8983;
    font-size: 0.64rem;
    font-weight: 500;
    line-height: 1;
}

.frontend-navbar-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 1.7vw, 2rem);
    min-width: 0;
}

.frontend-navbar-link {
    position: relative;
    padding-block: 0.25rem;
    color: #b7b0aa;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms ease;
}

.frontend-navbar-link:hover,
.frontend-navbar-link.is-current {
    color: #ff681f;
}

.frontend-navbar-link.is-current::after {
    position: absolute;
    inset-inline: 0;
    bottom: -0.4rem;
    height: 2px;
    border-radius: 999px;
    background: #ff681f;
    box-shadow: 0 0 8px #ff681f;
    content: '';
}

.frontend-navbar-link small {
    position: absolute;
    inset-inline-start: 50%;
    bottom: calc(100% + 0.25rem);
    translate: 50% 0;
    padding: 0.08rem 0.3rem;
    border-radius: 999px;
    color: #fff;
    background: #ff681f;
    font-size: 0.55rem;
}

.frontend-navbar-empty {
    color: #8f8983;
    font-size: 0.8rem;
}

.frontend-navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.frontend-navbar-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.55rem 1rem;
    border: 1px solid rgb(255 104 31 / 35%);
    border-radius: 0.75rem;
    color: #f5f3ef;
    background: rgb(18 19 21 / 85%);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.frontend-navbar-cta:hover {
    border-color: #ff681f;
    color: #f5f3ef;
    background: rgb(255 104 31 / 10%);
    box-shadow: 0 0 15px rgb(255 104 31 / 20%);
}

.frontend-navbar-cta svg,
.frontend-navbar-icon-button svg {
    width: 1.05rem;
    height: 1.05rem;
}

.frontend-navbar-cta svg {
    color: #ff681f;
}

.frontend-navbar-icon-button {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 0.75rem;
    color: #b7b0aa;
    background: rgb(18 19 21 / 85%);
    cursor: default;
}

.frontend-navbar-menu-button {
    display: none;
}

.brand-logo-field-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem;
    align-items: stretch;
    gap: 0.85rem;
}

.brand-logo-field-controls {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    min-width: 0;
}

.brand-logo-upload-button {
    justify-self: start;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
}

.brand-logo-upload-button input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.brand-logo-field-preview {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface-soft);
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.2);
}

.brand-logo-field-preview-screen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 7.5rem;
    height: 7.5rem;
    padding: 0.65rem;
    overflow: hidden;
    background:
        linear-gradient(45deg, rgb(120 120 120 / 6%) 25%, transparent 25%, transparent 75%, rgb(120 120 120 / 6%) 75%),
        linear-gradient(45deg, rgb(120 120 120 / 6%) 25%, transparent 25%, transparent 75%, rgb(120 120 120 / 6%) 75%);
    background-position: 0 0, 0.45rem 0.45rem;
    background-size: 0.9rem 0.9rem;
}

.brand-logo-field-preview-screen img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: auto;
    border-radius: 0.35rem;
}

.brand-logo-field-preview-screen > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--text-muted);
    text-align: center;
    margin: auto;
}

.brand-logo-field-preview-screen > span svg {
    width: 2rem;
    height: 2rem;
}

.brand-logo-field-preview-screen > span small {
    font-size: 0.68rem;
}

.brand-logo-field-preview figcaption {
    display: grid;
    gap: 0.08rem;
    padding: 0.55rem 0.7rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.brand-logo-field-preview figcaption strong {
    color: var(--text);
    font-size: 0.73rem;
}

.brand-logo-field-preview figcaption small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-image-preview-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface-soft);
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.2);
}

.content-image-preview-screen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 8rem;
    height: 8rem;
    padding: 0.65rem;
    overflow: hidden;
    background:
        linear-gradient(45deg, rgb(120 120 120 / 6%) 25%, transparent 25%, transparent 75%, rgb(120 120 120 / 6%) 75%),
        linear-gradient(45deg, rgb(120 120 120 / 6%) 25%, transparent 25%, transparent 75%, rgb(120 120 120 / 6%) 75%);
    background-position: 0 0, 0.45rem 0.45rem;
    background-size: 0.9rem 0.9rem;
}

.content-image-preview-screen img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: auto;
    border-radius: 0.35rem;
}

.content-image-preview-screen > span {
    display: grid;
    place-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
}

.content-image-preview-screen > span svg {
    width: 2rem;
    height: 2rem;
}

.content-image-preview-card figcaption {
    overflow: hidden;
    padding: 0.55rem 0.7rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--surface);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@container frontend-navbar (max-width: 70rem) {
    .frontend-navbar-links {
        display: none;
    }

    .frontend-navbar-menu-button {
        display: inline-grid;
    }
}

@container frontend-navbar (max-width: 35rem) {
    .frontend-navbar-preview {
        padding-inline: 1rem;
    }

    .frontend-navbar-cta {
        display: none;
    }

    .frontend-navbar-brand-copy small {
        display: none;
    }
}

@media (max-width: 42rem) {
    .brand-logo-field-layout {
        grid-template-columns: 1fr;
    }

    .brand-logo-field-preview {
        grid-template-columns: 8rem 1fr;
        grid-template-rows: 6rem;
    }

    .brand-logo-field-preview figcaption {
        align-content: center;
        border-top: 0;
        border-inline-start: 1px solid var(--border);
    }
}

/* ==========================================================================
   Public Site Header (Dynamic Menu Bar Component)
   ========================================================================== */
.public-site-header {
    background: rgba(10, 10, 12, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.public-site-header.is-sticky {
    position: sticky;
    top: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.public-site-header__container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

/* Brand */
.public-site-header__brand {
    flex-shrink: 0;
}

.public-site-brand-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #ffffff;
}

.public-site-brand-logo {
    max-height: 32px;
    object-fit: contain;
}

.public-site-brand-text {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.public-site-brand-text .brand-accent {
    color: #ff6500;
}

/* Navigation Links */
.public-site-header__nav {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    flex-wrap: wrap;
    justify-content: center;
}

.public-nav-link {
    color: #d1d5db;
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    padding: 0.5rem 0.2rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    transition: color 0.18s ease;
}

.public-nav-link:hover {
    color: #ffffff;
}

.public-nav-link.is-active {
    color: #ff6500;
    font-weight: 700;
}

.public-nav-link.is-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2.5px;
    background: #ff6500;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255, 101, 0, 0.7);
}

.public-nav-badge {
    background: #ff6500;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    margin-inline-start: 0.35rem;
}

/* Header Actions */
.public-site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
}

.public-header-action-item {
    display: inline-flex;
    align-items: center;
}

.public-header-theme-toggle {
    background: transparent;
    border: none;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0.35rem;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, color 0.15s ease;
}

.public-header-theme-toggle:hover {
    color: #ff6500;
    transform: scale(1.1);
}

.public-header-cta-btn {
    background: linear-gradient(135deg, #ff6500 0%, #ff8a3d 100%);
    color: #ffffff !important;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    box-shadow: 0 4px 15px rgba(255, 101, 0, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}

.public-header-cta-btn:hover {
    box-shadow: 0 6px 22px rgba(255, 101, 0, 0.55);
    transform: translateY(-1px);
}

/* Mobile Menu Button & Drawer */
.public-mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 19px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.public-mobile-menu-toggle .hamburger-bar {
    width: 100%;
    height: 2.5px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.25s ease;
}

.overview-tooltip {
    display: none !important;
}

.public-mobile-drawer {
    display: none;
    background: rgba(15, 15, 18, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1rem 1.5rem;
}

.public-mobile-drawer.is-open {
    display: block;
}

.public-mobile-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.public-mobile-link {
    color: #d1d5db;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.5rem 0;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.public-mobile-link.is-active {
    color: #ff6500;
    font-weight: 700;
}

@media (max-width: 64rem) {
    .public-site-header__nav {
        display: none;
    }
    .public-mobile-menu-toggle {
        display: flex;
    }
}