:root {
    --brand-primary: #233946;
    --brand-accent: #FFB018;
    --primary-action-bg: #FFB018;
    --primary-action-hover: #F47D30;
    --primary-action-text: #233946;
    --focus-ring: #FFB018;
    --shell-bg: #f1f1f1;
    --shell-bg-soft: #f8f8f8;
    --panel-bg: #ffffff;
    --border: #dedede;
    --text: #333333;
    --heading: var(--brand-primary);
    --muted: #64717a;
    --nav-bg: #233946;
    --nav-text: #eef3f5;
    --nav-muted: #d4dde1;
    --nav-active-bg: #FFB018;
    --nav-active-text: #233946;
    --topbar-bg: #ffffff;
    --topbar-accent: #FFB018;
    --input-bg: #ffffff;
    --input-border: #cfcfcf;
    --input-text: #333333;
    --deep-slate: var(--brand-primary);
    --primary: var(--brand-accent);
    --primary-hover: var(--primary-action-hover);
    --header-orange: var(--topbar-accent);
    --link: var(--brand-primary);
    --status-success: #2f6f4e;
    --status-success-bg: #edf7f1;
    --status-warning: #8a5a0a;
    --status-warning-bg: #fffbeb;
    --status-danger: #a83232;
    --status-danger-bg: #fef2f2;
    --status-info: #335e70;
    --status-info-bg: #eef5f7;
    --success: var(--status-success);
    --success-bg: var(--status-success-bg);
    --warning: var(--status-warning);
    --warning-bg: var(--status-warning-bg);
    --danger: var(--status-danger);
    --danger-bg: var(--status-danger-bg);
    --info: var(--status-info);
    --info-bg: var(--status-info-bg);
}

[data-theme-mode="dark"] {
    color-scheme: dark;
}

[data-theme-mode="system"] {
    color-scheme: light;
    --system-shell-bg: #f1f1f1;
    --system-shell-bg-soft: #f8f8f8;
    --system-panel-bg: #ffffff;
    --system-border: #dedede;
    --system-text: #333333;
    --system-heading: var(--brand-primary);
    --system-muted: #64717a;
    --system-link: var(--brand-primary);
    --system-nav-text: #eef3f5;
    --system-nav-muted: #d4dde1;
    --system-topbar-bg: #ffffff;
    --system-input-bg: #ffffff;
    --system-input-border: #cfcfcf;
    --system-input-text: #333333;
}

@media (prefers-color-scheme: dark) {
    [data-theme-mode="system"] {
        color-scheme: dark;
        --system-shell-bg: #111820;
        --system-shell-bg-soft: #141d26;
        --system-panel-bg: #17212b;
        --system-border: #2b3a46;
        --system-text: #e5edf2;
        --system-heading: #e5edf2;
        --system-muted: #9fb0bc;
        --system-link: var(--brand-accent);
        --system-nav-text: #eef3f5;
        --system-nav-muted: #c4d1d8;
        --system-topbar-bg: #17212b;
        --system-input-bg: #101820;
        --system-input-border: #344653;
        --system-input-text: #e5edf2;
    }
}

html,
body {
    font-family: "Open Sans", Poppins, "Segoe UI", Arial, sans-serif;
    background: var(--shell-bg);
    color: var(--text);
}

a,
.btn-link {
    color: var(--link);
}

.btn-primary,
.primary-action {
    color: var(--primary-action-text);
    background-color: var(--primary-action-bg);
    border-color: var(--primary-action-bg);
}

.btn-primary:hover,
.btn-primary:focus,
.primary-action:hover,
.primary-action:focus {
    color: var(--primary-action-text);
    background-color: var(--primary-action-hover);
    border-color: var(--primary-action-hover);
}

.primary-action {
    min-height: 2.35rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--primary-action-bg);
    border-radius: 0.4rem;
    font-weight: 600;
}

.secondary-action {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: var(--panel-bg);
    color: var(--heading);
    font-weight: 700;
    text-decoration: none;
}

.secondary-action:hover,
.secondary-action:focus {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    color: var(--heading);
}

.view-switch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-bg);
    overflow: hidden;
}

.view-switch-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0 0.85rem;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
    border-right: 1px solid var(--border);
}

.view-switch-link:last-child {
    border-right: 0;
}

.view-switch-link:hover,
.view-switch-link:focus {
    background: color-mix(in srgb, var(--primary) 8%, var(--panel-bg));
    color: var(--heading);
}

.view-switch-link.active {
    background: var(--primary-action-bg);
    color: var(--primary-action-text);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.shell-input:focus {
    outline: 2px solid color-mix(in srgb, var(--focus-ring) 35%, transparent);
    outline-offset: 1px;
    box-shadow: none;
}

h1:focus {
    outline: none;
}

.page-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.page-header h1 {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--heading);
}

.eyebrow {
    margin: 0 0 0.25rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.page-subtitle {
    margin: 0.25rem 0 0;
    color: var(--muted);
}

.metric-grid,
.dashboard-grid,
.module-grid {
    display: grid;
    gap: 1rem;
}

.metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin-bottom: 1rem;
}

.metric-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

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

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

.metric-card,
.panel,
.module-card {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    box-shadow: 0 1px 2px rgba(35, 57, 70, 0.06);
}

.metric-card {
    padding: 1rem;
}

.metric-card strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.7rem;
    line-height: 1;
}

.metric-label,
.metric-note {
    display: block;
    color: var(--muted);
    font-size: 0.84rem;
}

.metric-note {
    margin-top: 0.45rem;
}

.metric-card-warning {
    border-color: color-mix(in srgb, var(--status-warning) 35%, transparent);
}

.metric-card-danger {
    border-color: color-mix(in srgb, var(--status-danger) 35%, transparent);
}

.panel,
.module-card {
    padding: 1rem;
}

.panel-wide {
    min-width: 0;
}

.panel-header,
.panel-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.panel-header h2,
.module-card h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--heading);
}

.panel-header p,
.module-card p {
    margin: 0.2rem 0 0;
    color: var(--muted);
}

.text-link {
    font-weight: 600;
    text-decoration: none;
}

.text-link:hover,
.text-link:focus {
    color: var(--primary-hover);
    text-decoration: underline;
}

.account-panel {
    max-width: 42rem;
}

.account-panel h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.account-panel p:last-child {
    margin-bottom: 0;
}

.account-action {
    display: inline-flex;
    align-items: center;
    margin-top: 0.75rem;
    text-decoration: none;
}

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 7rem);
    padding: clamp(1rem, 4vw, 3rem) 0;
}

.login-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: min(100%, 44rem);
    margin: 0 auto;
}

.login-brand {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0.25rem 0;
}

.login-brand-logo {
    display: block;
    width: min(100%, 44rem);
    max-height: 14rem;
    object-fit: contain;
}

.brand-logo-frame {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.brand-logo {
    display: block;
    width: auto;
    max-width: 2.35rem;
    max-height: 2.35rem;
    object-fit: contain;
}

.login-panel {
    width: min(100%, 26rem);
}

.login-form {
    width: 100%;
}

.login-panel h2 {
    margin: 0 0 1.25rem;
    color: var(--heading);
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
}

.login-panel .form-control {
    width: 100%;
}

.login-panel .checkbox {
    font-size: 0.95rem;
}

.login-submit {
    width: 100%;
    min-height: 2.65rem;
    font-weight: 700;
}

.login-panel hr {
    margin: 1rem 0;
}

.login-panel p {
    margin-bottom: 0.55rem;
    text-align: center;
}

.data-table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    white-space: nowrap;
}

.data-table th,
.data-table td {
    padding: 0.75rem 0.6rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-chip-success {
    color: var(--status-success);
    background: var(--status-success-bg);
}

.status-chip-warning {
    color: var(--status-warning);
    background: var(--status-warning-bg);
}

.status-chip-danger {
    color: var(--status-danger);
    background: var(--status-danger-bg);
}

.status-chip-info {
    color: var(--status-info);
    background: var(--status-info-bg);
}

.status-dot {
    display: inline-flex;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
}

.status-dot-success {
    background: var(--status-success);
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-left: 1.2rem;
    margin: 0;
}

.activity-list li strong,
.activity-list li span {
    display: block;
}

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

.shell-input {
    min-height: 2.35rem;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--input-border);
    border-radius: 0.4rem;
    background: var(--input-bg);
    color: var(--input-text);
}

.branding-form-grid {
    gap: 1rem;
}

.theme-mode-fieldset {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.theme-mode-fieldset legend {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.theme-mode-control label {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.35rem;
    color: var(--text);
    cursor: pointer;
}

.theme-mode-control label.active,
.theme-mode-control label:has(input:checked) {
    background: var(--panel-bg);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(35, 57, 70, 0.08);
}

.theme-mode-control input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.colour-control {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
}

.colour-picker {
    width: 3.25rem;
    min-height: 2.35rem;
    padding: 0.2rem;
    border: 1px solid var(--input-border);
    border-radius: 0.4rem;
    background: var(--input-bg);
}

.colour-hex-input {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    text-transform: uppercase;
}

.segmented-control {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.2rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: var(--shell-bg-soft);
}

.segmented-control button {
    min-height: 2rem;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: var(--text);
    padding: 0.35rem 0.65rem;
}

.segmented-control button.active {
    background: var(--panel-bg);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(35, 57, 70, 0.08);
}

.theme-preview {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.theme-preview span {
    display: block;
    color: var(--muted);
}

.theme-logo {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: var(--deep-slate);
    color: var(--primary);
    font-weight: 800;
}

.theme-logo-with-image {
    background: var(--deep-slate);
    overflow: hidden;
}

.theme-logo-image {
    display: block;
    max-width: 2.5rem;
    max-height: 2.5rem;
    object-fit: contain;
}

.status-message {
    margin-bottom: 1rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--status-success) 28%, transparent);
    border-radius: 0.4rem;
    background: var(--status-success-bg);
    color: var(--status-success);
    font-size: 0.92rem;
}

.pairing-key-callout {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 176, 24, 0.48);
    border-radius: 0.45rem;
    background: #fff8e8;
}

.pairing-key-callout span,
.pairing-key-callout small {
    color: var(--muted);
}

.pairing-key-callout strong {
    color: var(--deep-slate);
    font-size: 1.15rem;
    letter-spacing: 0;
}

.pairing-key-callout pre {
    max-width: 100%;
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid rgba(26, 32, 44, 0.12);
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.72);
    color: var(--deep-slate);
    font: 0.86rem/1.45 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.store-detail-list {
    display: grid;
    gap: 1rem;
}

.store-detail {
    display: grid;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.store-detail:first-child {
    padding-top: 0;
    border-top: 0;
}

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

.store-detail-header h3,
.section-subtitle {
    margin: 0;
    color: var(--heading);
    font-size: 0.95rem;
    font-weight: 700;
}

.store-detail-header span {
    color: var(--muted);
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.profile-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.registered-profile-section {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.profile-grid div {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: var(--shell-bg-soft);
}

.profile-grid dt {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-grid dd {
    margin: 0.15rem 0 0;
    overflow-wrap: anywhere;
}

.form-grid {
    display: grid;
    gap: 0.75rem;
}

.form-grid label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

@media (min-width: 980px) {
    .page-header,
    .panel-header,
    .panel-toolbar,
    .workspace-section-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 1180px) {
    .dashboard-grid {
        grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.8fr);
    }
}

@media (min-width: 1100px) {
    .data-table {
        display: table;
        white-space: normal;
    }
}

.branding-preview-panel {
    min-width: 0;
}

.branding-preview-panel .branding-preview-shell {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.8fr);
    min-height: 16rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: var(--shell-bg);
    color: var(--text);
}

.branding-preview-panel .branding-preview-sidebar {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    padding: 0.85rem;
    background: var(--brand-primary);
    color: var(--preview-sidebar-text);
}

.branding-preview-panel .branding-preview-sidebar > span {
    min-height: 2rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.35rem;
}

.branding-preview-panel .preview-nav-active {
    background: var(--brand-accent);
    color: var(--preview-action-text);
    font-weight: 700;
}

.branding-preview-panel .preview-brand {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 0.6rem;
}

.branding-preview-panel .preview-brand span {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    background: var(--brand-accent);
    color: var(--preview-action-text);
    font-weight: 800;
}

.branding-preview-panel .preview-brand .theme-logo-image {
    max-width: 1.55rem;
    max-height: 1.55rem;
}

.branding-preview-panel .branding-preview-main {
    display: grid;
    grid-template-rows: 2.8rem 1fr;
}

.branding-preview-panel .branding-preview-topbar {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--panel-bg);
    box-shadow: inset 0 3px 0 var(--brand-accent);
    font-weight: 700;
}

.branding-preview-panel .branding-preview-content {
    display: grid;
    align-content: start;
    gap: 0.65rem;
    margin: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: var(--panel-bg);
}

.branding-preview-panel .branding-preview-content h3,
.branding-preview-panel .branding-preview-content p {
    margin: 0;
}

.branding-preview-panel .preview-link {
    color: var(--preview-link);
    font-weight: 700;
    text-decoration: underline;
}

.branding-preview-panel .preview-primary-action {
    justify-self: start;
    min-height: 2.35rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--brand-accent);
    border-radius: 0.4rem;
    background: var(--brand-accent);
    color: var(--preview-action-text);
    font-weight: 600;
}

.branding-preview-panel .login-preview,
.branding-preview-panel .contrast-warning-list {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.85rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: var(--panel-bg);
    color: var(--text);
}

.branding-preview-panel .login-preview {
    box-shadow: inset 0 3px 0 var(--brand-accent);
}

.branding-preview-panel .login-preview strong {
    color: var(--preview-link);
}

.branding-preview-panel .contrast-warning-list {
    border-color: color-mix(in srgb, var(--status-warning) 35%, transparent);
    background: var(--status-warning-bg);
    color: var(--status-warning);
}

.branding-preview-panel .contrast-warning-list p {
    margin: 0;
}

.compact-filter-form {
    margin: 0;
}

.active-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.active-filter-row > div {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.active-filter-row strong {
    color: var(--text);
}

.active-filter-row span:last-child {
    color: var(--muted);
}

.compact-filter-bar {
    display: grid;
    grid-template-columns: minmax(12rem, 1.2fr) minmax(8rem, 0.8fr) minmax(8rem, 0.7fr) minmax(8rem, 0.7fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.compact-filter-bar-wide {
    grid-template-columns: minmax(10rem, 1fr) minmax(8rem, 0.7fr) minmax(10rem, 1fr) minmax(8rem, 0.7fr) minmax(8rem, 0.7fr) auto;
}

.compact-filter-bar-dated {
    grid-template-columns: minmax(11rem, 1fr) minmax(8rem, 0.7fr) minmax(8rem, 0.7fr) minmax(10rem, 1fr) minmax(8rem, 0.7fr) auto;
}

.compact-filter-bar-wide.compact-filter-bar-dated {
    grid-template-columns: minmax(11rem, 0.9fr) minmax(8rem, 0.65fr) minmax(8rem, 0.65fr) minmax(10rem, 0.9fr) minmax(8rem, 0.65fr) minmax(10rem, 0.9fr) auto;
}

.compact-filter-bar label,
.page-size-form label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.filter-help {
    color: var(--muted);
    font-size: 0.78rem;
}

.sales-hierarchy-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

.sales-multiselect-field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.sales-multiselect-label {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.sales-multiselect {
    position: relative;
    min-width: 0;
}

.sales-multiselect[open] {
    z-index: 20;
}

.sales-multiselect-trigger {
    display: flex;
    min-height: 2.45rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--input-border);
    border-radius: 0.4rem;
    background: var(--input-bg);
    color: var(--input-text);
    cursor: pointer;
    list-style: none;
}

.sales-multiselect-trigger::-webkit-details-marker {
    display: none;
}

.sales-multiselect-trigger:hover,
.sales-multiselect[open] .sales-multiselect-trigger {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--input-border));
}

.sales-multiselect-summary {
    overflow: hidden;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-multiselect-chevron {
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.15s ease;
}

.sales-multiselect[open] .sales-multiselect-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

.sales-multiselect-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    left: 0;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--input-border);
    border-radius: 0.45rem;
    background: var(--panel-bg);
    box-shadow: 0 0.65rem 1.5rem color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

.sales-multiselect-search {
    position: sticky;
    top: -0.35rem;
    z-index: 1;
    padding: 0.25rem 0.25rem 0.5rem;
    background: var(--panel-bg);
}

.sales-multiselect-search-input {
    width: 100%;
    min-height: 2.1rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--input-border);
    border-radius: 0.35rem;
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 0.86rem;
}

.sales-multiselect-search-input:focus {
    outline: 2px solid color-mix(in srgb, var(--focus-ring) 35%, transparent);
    outline-offset: 1px;
}

.sales-multiselect-options {
    display: grid;
    gap: 0.1rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--border);
}

.sales-multiselect-option[hidden],
.sales-multiselect-no-results[hidden] {
    display: none;
}

.sales-multiselect-no-results {
    margin: 0.65rem 0.5rem 0.45rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.sales-multiselect-option {
    display: flex;
    min-height: 2.1rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.3rem;
    color: var(--text);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
}

.sales-multiselect-option:hover {
    background: color-mix(in srgb, var(--primary) 10%, var(--panel-bg));
}

.sales-multiselect-option input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary);
}

.sales-multiselect-all {
    font-weight: 700;
}

.sales-multiselect-loading {
    opacity: 0.6;
    pointer-events: none;
}

.sales-filter-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.8rem;
}

.sales-dashboard {
    margin-bottom: 1.25rem;
}

.sales-dashboard-heading,
.sales-dashboard-box-header,
.sales-dashboard-card-header,
.sales-dashboard-card-title {
    display: flex;
    align-items: flex-start;
}

.sales-dashboard-heading {
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
}

.sales-dashboard-heading h2 {
    margin: 0;
    color: var(--heading);
    font-size: 1.2rem;
}

.sales-dashboard-heading .eyebrow {
    margin-bottom: 0.2rem;
}

.sales-dashboard-box-grid {
    display: grid;
    grid-template-columns: minmax(15rem, 1.15fr) repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 0.6rem;
    min-width: 0;
}

.sales-dashboard-box {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--panel-bg);
    box-shadow: 0 1px 2px rgba(35, 57, 70, 0.06);
}

.sales-current-box {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    background: color-mix(in srgb, var(--primary) 3%, var(--panel-bg));
}

.sales-dashboard-card-active {
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
    box-shadow: inset 4px 0 0 var(--primary), 0 1px 2px rgba(35, 57, 70, 0.08);
}

.sales-dashboard-box-header {
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
    padding: 0.62rem 0.7rem 0.25rem;
}

.sales-dashboard-box-header h3 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--heading);
    font-size: 0.9rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-dashboard-box-chip {
    flex: 0 0 auto;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--panel-bg));
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sales-dashboard-box-metrics {
    gap: 0.35rem;
    padding: 0.25rem 0.7rem 0.7rem;
}

.sales-dashboard-box-metrics .metric-card {
    min-width: 0;
    padding: 0.45rem 0.5rem;
}

.sales-dashboard-box-metrics .metric-card strong {
    font-size: 1rem;
}

.sales-dashboard-card-header {
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.62rem 0.7rem 0.2rem;
}

.sales-dashboard-card-title {
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.sales-dashboard-card-title h3 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--heading);
    font-size: 1rem;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.sales-dashboard-active-chip {
    display: inline-flex;
    min-height: 1.45rem;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--panel-bg));
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.sales-dashboard-delete {
    display: inline-flex;
    min-height: 2.25rem;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.4rem;
    border: 0;
    border-radius: 0.35rem;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
}

.sales-dashboard-delete:hover,
.sales-dashboard-delete:focus-visible {
    color: var(--status-danger);
    background: color-mix(in srgb, var(--status-danger) 9%, var(--panel-bg));
}

.sales-dashboard-delete span:first-child {
    font-size: 1.2rem;
    line-height: 1;
}

.sales-dashboard-description {
    min-height: 1.9rem;
    margin: 0;
    padding: 0 0.7rem 0.4rem;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.sales-dashboard-apply {
    display: block;
    position: relative;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.sales-dashboard-apply-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sales-dashboard-apply:hover,
.sales-dashboard-apply:focus-visible {
    background: color-mix(in srgb, var(--primary) 5%, var(--panel-bg));
}

.sales-dashboard-metrics {
    display: grid;
    gap: 0.25rem;
    padding: 0 0.7rem 0.65rem;
}

.sales-dashboard-metric-row {
    display: grid;
    min-height: 2.25rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-content: center;
    align-items: baseline;
    column-gap: 0.4rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
}

.sales-dashboard-metric-label {
    color: var(--muted);
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-dashboard-metric-row strong {
    color: var(--heading);
    font-size: 0.88rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.sales-dashboard-metric-row small {
    color: var(--muted);
    font-size: 0.66rem;
    text-align: right;
    white-space: nowrap;
}

.sales-dashboard-unavailable {
    display: grid;
    min-height: 3.3rem;
    align-content: center;
    gap: 0.3rem;
    margin: 0 0.7rem 0.65rem;
    padding: 0.55rem 0.65rem;
    border: 1px dashed var(--border);
    border-radius: 0.4rem;
    color: var(--muted);
    font-size: 0.72rem;
}

.sales-dashboard-unavailable strong {
    color: var(--heading);
}

.sales-dashboard-trend {
    display: grid;
    gap: 0.2rem;
    margin-top: auto;
    padding: 0.35rem 0.7rem 0.55rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.sales-dashboard-trend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
}

.sales-dashboard-trend-header small {
    font-size: 0.62rem;
    font-weight: 600;
}

.sales-dashboard-trend svg {
    display: block;
    width: 100%;
    height: 2.35rem;
    overflow: visible;
}

.sales-dashboard-trend polyline {
    fill: none;
    stroke: var(--primary);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.sales-dashboard-trend-empty {
    display: grid;
    height: 2.35rem;
    place-items: center;
    color: var(--muted);
    font-size: 0.68rem;
}

.sales-dashboard-applying-status {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
    font-size: 0.78rem;
    font-weight: 800;
}

.sales-dashboard-applying-status[hidden] {
    display: none;
}

.sales-dashboard-applying-spinner {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid color-mix(in srgb, var(--primary) 28%, transparent);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: sales-dashboard-spin 0.7s linear infinite;
}

.sales-dashboard-card-applying {
    pointer-events: none;
}

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

.sales-dashboard-dialog {
    width: min(30rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    color: var(--text);
    background: var(--panel-bg);
    box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.3);
}

.sales-dashboard-dialog::backdrop {
    background: rgba(15, 23, 42, 0.46);
}

.sales-dashboard-dialog-panel {
    display: grid;
    gap: 0.75rem;
    padding: 1.15rem;
}

.sales-dashboard-dialog-panel h2 {
    margin: 0;
    color: var(--heading);
    font-size: 1.15rem;
}

.sales-dashboard-dialog-panel p {
    margin: 0;
}

.sales-dashboard-dialog-form {
    display: grid;
    gap: 0.8rem;
}

.sales-dashboard-dialog-form label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.sales-dashboard-form-status:empty {
    display: none;
}

.sales-dashboard-form-status-loading {
    display: flex;
    min-height: 1.5rem;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.sales-dashboard-form-status-loading[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .sales-dashboard-card,
    .sales-dashboard-apply,
    .sales-dashboard-delete {
        transition: none;
    }

    .sales-dashboard-applying-spinner {
        animation: none;
    }
}

@media (max-width: 900px) {
    .sales-dashboard-box-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-current-box {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .sales-dashboard-box-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-dashboard-heading {
        flex-direction: column;
    }

    .sales-current-box {
        grid-column: auto;
    }
}

@media (max-width: 420px) {
    .sales-dashboard-metric-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sales-dashboard-metric-row small {
        grid-column: 2;
        grid-row: 1;
    }
}

.accounts-native-workbench {
    display: grid;
    gap: 1rem;
}

.accounts-native-header {
    align-items: flex-start;
}

.accounts-native-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-end;
}

.accounts-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.accounts-summary-strip span {
    display: inline-flex;
    gap: 0.35rem;
    align-items: baseline;
    color: var(--muted);
    font-size: 0.85rem;
}

.accounts-summary-strip strong {
    color: var(--text);
    font-size: 0.98rem;
}

.accounts-split-workbench {
    min-width: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.accounts-list-pane {
    overflow-x: auto;
}

.accounts-list-table {
    display: block;
    min-width: 52rem;
    white-space: nowrap;
}

.account-transactions-list-pane {
    overflow-x: auto;
}

.account-transactions-table {
    display: block;
    width: max-content;
    min-width: 72rem;
    white-space: nowrap;
}

.account-transaction-identity-column {
    min-width: 9.5rem;
}

.account-transaction-identity-heading,
.account-transaction-identity-cell {
    display: grid;
    gap: 0.16rem;
    align-items: start;
}

.account-transaction-identity-heading {
    line-height: 1.1;
}

.account-transaction-identity-cell {
    line-height: 1.2;
}

.account-transaction-account-link {
    font-weight: 700;
}

.account-transaction-subaccount {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.account-transaction-store-column {
    min-width: 14rem;
    white-space: nowrap;
}

.account-transaction-type-cell {
    min-width: 7rem;
}

.account-transaction-type-stack {
    display: grid;
    gap: 0.2rem;
    align-items: start;
}

.folded-companion-note {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.workbench-detail-table {
    font-size: 0.86rem;
}

.selected-account-row {
    background: var(--status-info-bg);
    box-shadow: inset 3px 0 0 var(--status-info);
}

.account-workspace {
    display: grid;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    box-shadow: 0 1px 2px rgba(35, 57, 70, 0.06);
}

.account-profile-rail,
.account-workspace-main {
    min-width: 0;
}

.account-profile-rail {
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--shell-bg-soft);
}

.account-profile-summary {
    display: grid;
    gap: 0.55rem;
    justify-items: start;
}

.account-profile-summary h2,
.workspace-section-header h2 {
    margin: 0;
    color: var(--heading);
    font-size: 1rem;
    line-height: 1.2;
}

.account-profile-facts,
.account-profile-measures {
    display: grid;
    gap: 0.7rem;
}

.account-profile-facts {
    margin: 0;
}

.account-profile-facts div,
.account-profile-measures div {
    min-width: 0;
}

.account-profile-facts dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.account-profile-facts dd {
    margin: 0.18rem 0 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.account-profile-measures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.account-profile-measures strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.2rem;
    line-height: 1.1;
}

.account-workspace-main {
    display: grid;
}

.workspace-section {
    min-width: 0;
    padding: 1rem;
    border-top: 1px solid var(--border);
}

.workspace-section:first-child {
    border-top: 0;
}

.workspace-section-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.workspace-section-primary {
    background: var(--panel-bg);
}

.split-detail-layout {
    display: grid;
    gap: 1rem;
}

.list-pane,
.detail-drawer {
    min-width: 0;
}

.detail-drawer {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.detail-stack {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.detail-stack > * {
    min-width: 0;
}

.detail-table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.register-table-scroll {
    width: 100%;
    min-width: 0;
}

.detail-table-scroll .data-table {
    display: block;
    width: max-content;
    min-width: 100%;
    white-space: nowrap;
}

.detail-heading h2 {
    margin: 0;
    color: var(--heading);
    font-size: 1rem;
}

.detail-heading p {
    margin: 0.2rem 0 0;
    color: var(--muted);
}

.product-detail-stack {
    gap: 0.8rem;
}

.product-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: var(--shell-bg-soft);
}

.product-detail-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0.55rem 0.8rem;
    border-right: 1px solid var(--border);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.product-detail-tab:last-child {
    border-right: 0;
}

.product-detail-tab:hover,
.product-detail-tab:focus {
    background: color-mix(in srgb, var(--primary) 8%, var(--panel-bg));
    color: var(--heading);
}

.product-detail-tab.active {
    background: var(--panel-bg);
    color: var(--heading);
    box-shadow: inset 0 3px 0 var(--primary);
}

.product-detail-tab-panel {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.hierarchy-browser {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    min-width: 0;
}

.hierarchy-pane {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: var(--panel-bg);
}

.hierarchy-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border);
    background: var(--shell-bg-soft);
}

.hierarchy-pane-header h2 {
    margin: 0;
    color: var(--heading);
    font-size: 0.95rem;
}

.hierarchy-pane-header span {
    color: var(--muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.hierarchy-pane-list {
    display: grid;
    max-height: 34rem;
    overflow-y: auto;
}

.hierarchy-pane-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.1rem;
    padding: 0.62rem 0.85rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.hierarchy-pane-row:last-child {
    border-bottom: 0;
}

.hierarchy-pane-row:hover,
.hierarchy-pane-row:focus {
    background: color-mix(in srgb, var(--primary) 7%, var(--panel-bg));
    color: var(--heading);
}

.hierarchy-pane-row.active {
    background: color-mix(in srgb, var(--primary) 12%, var(--panel-bg));
    box-shadow: inset 3px 0 0 var(--primary);
}

.hierarchy-pane-row strong,
.hierarchy-pane-row small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hierarchy-pane-row strong {
    color: var(--heading);
    font-size: 0.88rem;
}

.hierarchy-pane-row small {
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.75rem;
}

.hierarchy-pane-count {
    min-width: 2.25rem;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: var(--shell-bg-soft);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.hierarchy-placeholder {
    display: grid;
    min-height: 8rem;
    place-items: center;
    padding: 1rem;
    color: var(--muted);
    font-weight: 700;
    text-align: center;
}

.selectable-row .row-select-link {
    font-weight: 700;
    text-decoration: none;
}

.sortable-header {
    display: inline-flex;
    gap: 0.28rem;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.sortable-header-active {
    color: var(--heading);
}

.sort-arrow {
    position: relative;
    display: inline-block;
    width: 0.65rem;
    height: 0.75rem;
    flex: 0 0 auto;
    color: var(--status-info);
}

.sort-arrow::before {
    position: absolute;
    top: 0.18rem;
    left: 50%;
    width: 0.12rem;
    height: 0.42rem;
    border-radius: 999px;
    background: currentColor;
    content: "";
    transform: translateX(-50%);
}

.sort-arrow::after {
    position: absolute;
    left: 50%;
    content: "";
    transform: translateX(-50%);
}

.sort-arrow-asc::after {
    top: 0.02rem;
    border-right: 0.26rem solid transparent;
    border-bottom: 0.28rem solid currentColor;
    border-left: 0.26rem solid transparent;
}

.sort-arrow-desc::before {
    top: 0.06rem;
}

.sort-arrow-desc::after {
    bottom: 0.02rem;
    border-top: 0.28rem solid currentColor;
    border-right: 0.26rem solid transparent;
    border-left: 0.26rem solid transparent;
}

.selected-row {
    background: var(--status-info-bg);
    box-shadow: inset 3px 0 0 var(--status-info);
}

.pending-store-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.danger-action {
    display: inline-flex;
    min-height: 2.3rem;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--status-danger) 35%, transparent);
    border-radius: 0.4rem;
    background: var(--status-danger-bg);
    color: var(--status-danger);
    font-weight: 700;
}

.insights-workbench {
    display: grid;
    grid-template-rows: minmax(12rem, 0.35fr) minmax(0, 1fr);
    gap: 1rem;
    height: calc(100vh - 10rem);
    min-height: 42rem;
    padding: 0;
    overflow: hidden;
}

.insights-sidebar,
.insights-chat {
    min-height: 0;
    min-width: 0;
}

.insights-sidebar {
    display: grid;
    align-content: start;
    gap: 1rem;
    overflow-y: auto;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--shell-bg-soft) 72%, var(--panel-bg));
}

.insights-search {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.insights-search label,
.insights-composer {
    display: grid;
    gap: 0.45rem;
}

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

.insights-new-chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.insights-history {
    display: grid;
    gap: 0.45rem;
}

.insights-history-item {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: var(--panel-bg);
    color: var(--text);
}

.insights-history-item:hover,
.insights-history-item:focus-within {
    border-color: color-mix(in srgb, var(--status-info) 45%, var(--border));
    color: var(--text);
}

.insights-history-item.selected {
    border-color: color-mix(in srgb, var(--status-info) 56%, var(--border));
    background: var(--status-info-bg);
    box-shadow: inset 3px 0 0 var(--status-info);
}

.insights-history-link {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
}

.insights-history-link:hover,
.insights-history-link:focus {
    color: var(--text);
    text-decoration: underline;
}

.insights-history-link strong,
.insights-history-link small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.insights-history-link small {
    color: var(--muted);
}

.insights-history-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
}

.insights-rename-input {
    min-height: 2.05rem;
    padding: 0.35rem 0.5rem;
}

.insights-history-action {
    min-height: 2.05rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
}

.insights-chat {
    display: grid;
    grid-template-rows: auto minmax(18rem, 1fr) auto auto;
    gap: 1rem;
    padding: 1rem;
    min-height: 0;
}

.insights-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.insights-suggestion {
    min-height: 2.2rem;
    max-width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--status-info) 30%, var(--border));
    border-radius: 0.4rem;
    background: var(--status-info-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.insights-suggestion:hover,
.insights-suggestion:focus {
    border-color: var(--status-info);
}

.insights-transcript {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.25rem;
}

.insights-transcript-end {
    min-height: 1px;
}

.insights-empty-chat {
    align-self: center;
}

.insights-message {
    display: grid;
    gap: 0.35rem;
    max-width: min(100%, 48rem);
}

.insights-message-user {
    justify-self: end;
}

.insights-message-assistant {
    justify-self: start;
}

.insights-message-role {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.insights-message-content {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: var(--panel-bg);
    overflow-wrap: anywhere;
}

.insights-message-user .insights-message-content {
    background: color-mix(in srgb, var(--status-info-bg) 68%, var(--panel-bg));
}

.insights-message-content h3 {
    margin: 0.65rem 0 0.35rem;
    color: var(--heading);
    font-size: 0.98rem;
}

.insights-message-content h3:first-child {
    margin-top: 0;
}

.insights-message-content ul,
.insights-message-content ol {
    margin: 0 0 0.65rem;
    padding-left: 1.2rem;
}

.insights-message-content li {
    margin: 0.18rem 0;
}

.insights-visual-card {
    display: grid;
    gap: 0.8rem;
    max-width: 100%;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: var(--panel-bg);
}

.insights-visual-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    align-items: baseline;
    justify-content: space-between;
}

.insights-visual-header strong {
    color: var(--heading);
    font-size: 0.98rem;
}

.insights-visual-header span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.insights-scope-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.insights-scope-chip {
    display: inline-flex;
    max-width: 100%;
    min-height: 1.75rem;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--status-info) 34%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--status-info-bg) 72%, var(--panel-bg));
    color: var(--heading);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.insights-chart-bars {
    display: grid;
    gap: 0.55rem;
}

.insights-chart-bars-grouped {
    gap: 0.75rem;
}

.insights-line-chart {
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: var(--shell-bg-soft);
}

.insights-line-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 0.8rem;
}

.insights-line-chart-title {
    color: var(--heading);
    font-size: 0.9rem;
}

.insights-line-chart svg {
    width: 100%;
    min-height: 13rem;
    color: var(--muted);
}

.insights-line-chart-labels,
.insights-line-chart-legend {
    display: flex;
    gap: 0.45rem 0.8rem;
    justify-content: space-between;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.76rem;
}

.insights-line-chart-legend {
    justify-content: flex-start;
    color: var(--heading);
    font-weight: 700;
}

.insights-line-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.insights-line-chart-legend i {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
}

.insights-chart-group {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: var(--shell-bg-soft);
}

.insights-chart-group-label {
    min-width: 0;
    color: var(--heading);
    font-size: 0.88rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.insights-chart-row {
    display: grid;
    grid-template-columns: minmax(7rem, 0.8fr) minmax(8rem, 1fr) minmax(5.75rem, auto);
    gap: 0.65rem;
    align-items: center;
    min-width: 0;
}

.insights-chart-row-grouped {
    grid-template-columns: minmax(5.5rem, 0.62fr) minmax(8rem, 1fr) minmax(5.75rem, auto);
}

.insights-chart-label,
.insights-chart-value {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.86rem;
}

.insights-chart-label {
    font-weight: 700;
}

.insights-chart-value {
    justify-self: end;
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
}

.insights-chart-track {
    display: block;
    min-width: 0;
    height: 0.9rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--shell-bg-soft);
}

.insights-chart-bar {
    display: block;
    min-width: 0.22rem;
    height: 100%;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-accent) 82%, var(--brand-primary));
}

.insights-chart-bar-negative {
    background: var(--status-danger);
}

.insights-visual-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.insights-visual-table {
    min-width: 26rem;
    font-size: 0.86rem;
}

.insights-visual-table .insights-number-cell,
.insights-visual-table .insights-number-heading {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.insights-status {
    margin: 0;
}

.insights-retry-action {
    justify-self: start;
}

.insights-catalog-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    max-width: min(100%, 48rem);
}

.insights-catalog-choice {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.15rem 0.4rem;
    align-items: baseline;
    min-height: 2.5rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--status-info) 40%, var(--border));
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--status-info-bg) 58%, var(--panel-bg));
    color: var(--text);
    font: inherit;
    text-align: left;
}

.insights-catalog-choice:hover,
.insights-catalog-choice:focus {
    border-color: var(--status-info);
    background: var(--status-info-bg);
}

.insights-catalog-choice span,
.insights-catalog-choice small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.insights-catalog-choice strong {
    grid-row: 2;
    font-size: 0.86rem;
}

.insights-catalog-choice small {
    grid-row: 2;
}

.insights-composer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.insights-composer-input {
    min-height: 5rem;
    resize: vertical;
}

.pagination-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.pagination-actions,
.page-size-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: end;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1rem;
}

.pagination-link,
.pagination-current {
    display: inline-flex;
    min-height: 2.2rem;
    align-items: center;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    text-decoration: none;
}

.pagination-link.disabled {
    color: var(--muted);
    pointer-events: none;
    opacity: 0.6;
}

@media (min-width: 960px) {
    .account-workspace {
        grid-template-columns: minmax(14rem, 0.34fr) minmax(0, 1fr);
    }

    .account-profile-rail {
        border-right: 1px solid var(--border);
        border-bottom: 0;
    }

    .insights-workbench {
        grid-template-columns: minmax(16rem, 0.34fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        height: calc(100vh - 10rem);
        min-height: 42rem;
    }

    .insights-sidebar {
        border-right: 1px solid var(--border);
        border-bottom: 0;
    }

    .insights-sidebar,
    .insights-chat {
        min-height: 0;
    }
}

@media (min-width: 1180px) {
    .split-detail-layout {
        grid-template-columns: minmax(0, 1.25fr) minmax(22rem, 0.75fr);
    }

    .detail-drawer {
        border-top: 0;
        border-left: 1px solid var(--border);
        padding-top: 0;
        padding-left: 1rem;
    }
}

@media (max-width: 900px) {
    .compact-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .hierarchy-browser {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .compact-filter-bar {
        grid-template-columns: 1fr;
    }

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

    .insights-history-actions {
        grid-template-columns: 1fr 1fr;
    }

    .insights-rename-input {
        grid-column: 1 / -1;
    }

    .insights-composer {
        grid-template-columns: 1fr;
    }

    .insights-chart-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .insights-chart-value {
        justify-self: start;
    }
}
.insights-save-report-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
    align-items: end;
    max-width: min(100%, 48rem);
}

.insights-save-report-field {
    display: grid;
    min-width: 0;
    gap: 0.28rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}

.insights-save-report-check {
    display: flex;
    min-height: 2.35rem;
    align-items: center;
    gap: 0.45rem;
}

.insights-save-report-check input {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 720px) {
    .insights-save-report-form {
        grid-template-columns: 1fr;
    }
}

.insights-report-library {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.insights-report-library-tile {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: var(--panel-bg);
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(35, 57, 70, 0.06);
}

.insights-report-library-tile:hover,
.insights-report-library-tile:focus {
    border-color: color-mix(in srgb, var(--status-info) 45%, var(--border));
    color: var(--text);
}

.insights-report-library-tile.selected {
    border-color: color-mix(in srgb, var(--status-info) 56%, var(--border));
    background: var(--status-info-bg);
    box-shadow: inset 3px 0 0 var(--status-info);
}

.insights-report-library-tile span {
    color: var(--heading);
    font-size: 0.92rem;
    font-weight: 700;
}

.insights-report-library-tile strong {
    font-size: 1.35rem;
    line-height: 1;
}

.insights-report-library-tile small {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.25;
}

.insights-reports-workbench {
    display: grid;
    grid-template-columns: minmax(16rem, 0.34fr) minmax(0, 1fr);
    gap: 1rem;
    min-height: 36rem;
}

.insights-reports-list,
.insights-report-runner {
    min-width: 0;
}

.insights-reports-list {
    display: grid;
    align-content: start;
    gap: 0.65rem;
    padding-right: 1rem;
    border-right: 1px solid var(--border);
}

.insights-report-list-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.insights-report-list-heading strong {
    color: var(--heading);
    font-size: 0.95rem;
}

.insights-report-list-heading span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.insights-report-list-item {
    display: grid;
    gap: 0.15rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    color: var(--text);
    text-decoration: none;
}

.insights-report-list-item.selected {
    border-color: color-mix(in srgb, var(--status-info) 56%, var(--border));
    background: var(--status-info-bg);
    box-shadow: inset 3px 0 0 var(--status-info);
}

.insights-report-list-meta,
.insights-report-template-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.insights-report-detail,
.insights-report-parameters {
    display: grid;
    gap: 0.75rem;
}

.insights-report-library-controls {
    display: grid;
    gap: 0.5rem;
}

.insights-report-group-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: end;
}

.insights-report-group-form label {
    display: grid;
    gap: 0.35rem;
    min-width: min(100%, 14rem);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.filter-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.75rem;
}

.filter-submit-loading,
.filter-loading-status {
    display: none;
}

.filter-loading-status {
    grid-column: 1 / -1;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.filter-loading-status::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid color-mix(in srgb, var(--muted) 35%, transparent);
    border-top-color: var(--primary-action-bg);
    border-radius: 50%;
    animation: filter-loading-spin 0.75s linear infinite;
}

.filter-loading-form-submitting .filter-submit-button {
    opacity: 0.88;
    pointer-events: none;
}

.filter-loading-form-submitting .filter-submit-text {
    display: none;
}

.filter-loading-form-submitting .filter-submit-loading,
.filter-loading-form-submitting .filter-loading-status {
    display: inline-flex;
}

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

.insights-report-parameters {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    align-items: end;
    margin-bottom: 1rem;
}

.insights-report-parameters label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    .insights-reports-workbench {
        grid-template-columns: 1fr;
    }

    .insights-reports-list {
        padding-right: 0;
        padding-bottom: 1rem;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
}

.label-studio-frame {
    display: grid;
    gap: 0.75rem;
}

.label-studio-workbench {
    --label-palette-width: 280px;
    display: grid;
    grid-template-columns: minmax(180px, var(--label-palette-width)) 0.5rem minmax(360px, 1fr) minmax(220px, 260px);
    column-gap: 0.5rem;
    row-gap: 0.75rem;
    align-items: start;
}

.label-studio-rail,
.label-studio-canvas-panel,
.label-canvas-shell {
    min-width: 0;
}

.label-studio-rail {
    display: grid;
    gap: 1rem;
    padding: 0.85rem;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: #ffffff;
}

.label-template-rail,
.label-products-rail {
    max-height: calc(100vh - 9rem);
    overflow: auto;
}

.label-workbench-resizer {
    align-self: stretch;
    min-height: calc(100vh - 9rem);
    border: 0;
    border-radius: 4px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    touch-action: none;
}

.label-workbench-resizer::before {
    content: "";
    position: absolute;
    inset: 0.35rem 0.18rem;
    border-radius: 999px;
    background: #d0d5dd;
}

.label-workbench-resizer:hover::before,
.label-workbench-resizer:focus-visible::before,
.label-studio-workbench.is-resizing .label-workbench-resizer::before {
    background: #667085;
}

.label-workbench-resizer:focus-visible {
    outline: 2px solid #98a2b3;
    outline-offset: 2px;
}

.label-studio-canvas-panel {
    display: grid;
    gap: 0.75rem;
}

.label-studio-rail h2,
.label-studio-canvas-panel h2 {
    margin: 0;
    color: #182230;
    font-size: 0.95rem;
    font-weight: 800;
}

.label-rail-header,
.label-canvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.label-template-list,
.label-field-inspector,
.label-ai-layout-form,
.label-reference-layout-form,
.label-product-picker {
    display: grid;
    gap: 0.65rem;
}

.label-field-search {
    display: grid;
    gap: 0.25rem;
}

.label-field-palette {
    display: grid;
    gap: 0.85rem;
}

.label-field-group {
    display: grid;
    gap: 0.35rem;
}

.label-field-group[hidden] {
    display: none;
}

.label-field-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 1.35rem;
    padding: 0 0.15rem;
    border-bottom: 1px solid #e4e7ec;
}

.label-field-list-header h3 {
    margin: 0;
    color: #475467;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.label-field-count {
    color: #667085;
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.label-field-group-items {
    display: grid;
    gap: 0;
    border: 1px solid #d7dde5;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}

.label-field-group-items button[hidden] {
    display: none;
}

.label-template-row {
    display: grid;
    gap: 0.15rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid #d7dde5;
    border-radius: 6px;
    background: #f8fafc;
}

.label-template-row:first-child {
    border-color: #344054;
    background: #ffffff;
    box-shadow: inset 3px 0 0 #344054;
}

.label-template-row span {
    color: #667085;
    font-size: 0.85rem;
}

.label-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.35rem auto 1.6rem;
    gap: 0.5rem;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.45rem 0.4rem 0.45rem 0.6rem;
    border: 0;
    border-bottom: 1px solid #eef2f6;
    color: #344054;
    background: #ffffff;
    cursor: grab;
    font-size: 0.82rem;
    text-align: left;
}

.label-field-row:last-child {
    border-bottom: 0;
}

.label-field-row:hover,
.label-field-row:focus-visible {
    background: #f8fafc;
}

.label-field-row[data-label-field-used="true"] {
    background: #fbfefc;
}

.label-field-row[data-label-field-used="true"]:hover,
.label-field-row[data-label-field-used="true"]:focus-visible {
    background: #f6fef9;
}

.label-field-row:focus-visible {
    outline: 2px solid #98a2b3;
    outline-offset: -2px;
}

.label-field-row-main {
    grid-column: 1;
    overflow: hidden;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.label-field-row-used {
    display: inline-grid;
    grid-column: 2;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    border: 1px solid #abefc6;
    border-radius: 50%;
    color: #067647;
    background: #dcfae6;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

.label-field-row-meta {
    grid-column: 3;
    padding: 0.12rem 0.35rem;
    border: 1px solid #d7dde5;
    border-radius: 999px;
    color: #667085;
    background: #f8fafc;
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.label-field-row-action {
    display: inline-grid;
    grid-column: 4;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border: 1px solid #d7dde5;
    border-radius: 50%;
    color: #475467;
    background: #ffffff;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
}

.label-field-palette button:active {
    cursor: grabbing;
}

.label-field-inspector {
    padding-top: 0.85rem;
    border-top: 1px solid #d7dde5;
}

.label-field-inspector label {
    display: grid;
    gap: 0.25rem;
}

.label-field-inspector[data-has-selection="false"] {
    opacity: 0.72;
}

.label-inspector-selection {
    color: #667085;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.label-inspector-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

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

.label-inspector-toggle-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.label-inspector-toggle-row label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #344054;
    font-size: 0.78rem;
    font-weight: 800;
}

.label-field-inspector input[type="color"] {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.15rem;
    border: 1px solid #d7dde5;
    border-radius: 6px;
    background: #ffffff;
}

.label-inspector-subsection {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px dashed #e4e7ec;
}

.label-inspector-subsection:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.label-inspector-subtitle {
    margin: 0;
    color: #475467;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.label-field-inspector textarea.shell-input {
    min-height: 4rem;
    resize: vertical;
    white-space: pre-wrap;
}

.label-text-content,
.label-text-paragraph {
    display: block;
    max-width: 100%;
}

.label-studio-toolbar,
.label-design-assistant,
.label-canvas-shell {
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: #ffffff;
}

.label-studio-toolbar {
    padding: 0.7rem;
}

.label-tool-strip {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 7rem 4rem 4.8rem auto auto auto auto;
    gap: 0.55rem;
    align-items: end;
}

.label-tool-field {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.label-tool-field-name {
    min-width: 0;
}

.label-tool-field:not(.label-tool-field-name) {
    min-width: 0;
}

.label-tool-field span,
.label-ai-layout-form span,
.label-reference-layout-form span,
.label-stock-settings-grid label span,
.label-field-inspector label span,
.label-product-picker span {
    color: #667085;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.label-tool-field-small {
    max-width: 4.2rem;
}

.label-tool-strip button {
    min-height: 2.25rem;
    padding-inline: 0.65rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

.label-stock-settings {
    position: relative;
}

.label-stock-settings summary {
    min-height: 2.25rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d7dde5;
    border-radius: 6px;
    color: #344054;
    background: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
    cursor: pointer;
}

.label-stock-settings-grid {
    position: absolute;
    z-index: 8;
    right: 0;
    top: calc(100% + 0.35rem);
    display: grid;
    width: min(32rem, calc(100vw - 2rem));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 0.8rem;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(31, 41, 55, 0.18);
}

.label-stock-settings-grid label:not(.label-stock-checkbox) {
    display: grid;
    gap: 0.25rem;
}

.label-stock-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #344054;
    font-size: 0.78rem;
    font-weight: 800;
}

.label-design-assistant {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-left: 4px solid #0f766e;
}

.label-ai-layout-form {
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
}

.label-ai-layout-form button {
    white-space: nowrap;
    width: 100%;
}

.label-ai-layout-form label {
    display: grid;
    gap: 0.25rem;
}

.label-ai-layout-form input {
    min-height: 2.15rem;
}

.label-ai-layout-form .metric-note {
    grid-column: 1 / -1;
}

.label-ai-layout-form .metric-note:empty {
    display: none;
}

.label-reference-layout-form {
    grid-template-columns: minmax(0, 1fr);
}

.label-reference-layout-form label:first-of-type {
    display: grid;
    gap: 0.25rem;
}

.label-reference-layout-form button {
    width: 100%;
}

.label-reference-layout-form .metric-note {
    margin: 0;
}

.label-canvas-shell {
    overflow: hidden;
}

.label-canvas-header {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid #d7dde5;
}

.label-canvas-header .eyebrow,
.label-design-assistant .eyebrow {
    margin: 0 0 0.15rem;
}

.label-artboard-meta {
    padding: 0.3rem 0.55rem;
    border: 1px solid #d7dde5;
    border-radius: 999px;
    color: #344054;
    background: #f8fafc;
    font-size: 0.78rem;
    font-weight: 800;
}

.label-artboard-stage {
    display: flex;
    justify-content: center;
    min-height: 28rem;
    padding: 1rem;
    background:
        linear-gradient(#eef2f6 1px, transparent 1px),
        linear-gradient(90deg, #eef2f6 1px, transparent 1px),
        #f8fafc;
    background-size: 24px 24px;
}

.label-canvas {
    position: relative;
    width: min(100%, 360px);
    margin: 0 auto;
    border: 1px solid #c8ced8;
    border-radius: 4px;
    background: var(--label-template-fill, #ffffff);
    box-shadow: 0 18px 42px rgba(31, 41, 55, 0.18);
    overflow: hidden;
}

.label-canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(102, 112, 133, 0.18) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(102, 112, 133, 0.18) 1px, transparent 1px);
    background-size: calc(100% / var(--label-columns, 3)) calc(100% / var(--label-rows, 3));
    pointer-events: none;
}

.label-canvas-field {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0.1rem 0;
    border: 1px solid transparent;
    color: #111827;
    background: transparent;
    cursor: grab;
    line-height: 1.1;
    overflow-wrap: anywhere;
    touch-action: none;
    user-select: none;
}

.label-canvas-field.is-selected {
    border-color: #1f6feb;
    outline: 2px solid rgba(31, 111, 235, 0.2);
    outline-offset: 2px;
    /* Keep selection chrome border-only so Template fill shows through transparent fields. */
    background: transparent;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.12);
}

.label-canvas-field:active {
    cursor: grabbing;
}

.label-canvas-field.is-dragging {
    cursor: grabbing;
    opacity: 0.9;
}

.label-canvas-field.is-resizing {
    cursor: inherit;
    opacity: 0.95;
}

.label-field-resize-handle {
    position: absolute;
    z-index: 5;
    width: 10px;
    height: 10px;
    border: 1.5px solid #1f6feb;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    pointer-events: auto;
    touch-action: none;
}

.label-field-resize-handle-nw { left: -5px; top: -5px; cursor: nwse-resize; }
.label-field-resize-handle-n  { left: calc(50% - 5px); top: -5px; cursor: ns-resize; }
.label-field-resize-handle-ne { right: -5px; top: -5px; cursor: nesw-resize; }
.label-field-resize-handle-e  { right: -5px; top: calc(50% - 5px); cursor: ew-resize; }
.label-field-resize-handle-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.label-field-resize-handle-s  { left: calc(50% - 5px); bottom: -5px; cursor: ns-resize; }
.label-field-resize-handle-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.label-field-resize-handle-w  { left: -5px; top: calc(50% - 5px); cursor: ew-resize; }

.label-canvas.is-drop-target {
    outline: 3px solid var(--studio-selection, #1f6feb);
    outline-offset: 4px;
}

.label-canvas-field-name {
    color: #182230;
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
}

.label-canvas-field-price {
    color: #101828;
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 0.9;
    overflow-wrap: normal;
    white-space: nowrap;
}

.label-price-major {
    display: inline-block;
    line-height: 0.9;
}

.label-price-cents {
    display: inline-block;
    align-self: flex-start;
    margin-left: 0.08em;
    font-size: 0.42em;
    line-height: 1;
}

.label-canvas-field-numeric {
    overflow: hidden;
    white-space: nowrap;
}

.label-numeric-shell {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    max-height: 100%;
    align-items: baseline;
}

.label-numeric-content,
.label-numeric-number {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
}

.label-numeric-segment {
    display: inline-block;
    line-height: 1;
}

.label-numeric-segment-fraction {
    align-self: flex-start;
}

.label-numeric-unit {
    display: block;
    margin-top: 0.1em;
    font-size: 0.55em;
    line-height: 1.1;
}

.label-numeric-strike {
    position: absolute;
    left: var(--label-strike-x, 0);
    top: calc(50% + var(--label-strike-y, 0px));
    width: 100%;
    pointer-events: none;
    transform-origin: center;
}

.label-numeric-strike.is-horizontal {
    transform: translateY(-50%);
}

.label-numeric-strike.is-diagonal-up {
    transform: translateY(-50%) rotate(-18deg);
}

.label-numeric-strike.is-diagonal-down {
    transform: translateY(-50%) rotate(18deg);
}

.label-numeric-strike.is-number-only {
    /* number group bounds are used by compositor; full shell used as fallback */
}

.label-canvas-field-barcode {
    flex-direction: column;
    align-items: stretch;
    min-height: 3.25rem;
    padding: 0.15rem 0.2rem;
    color: #111827;
    font-family: Consolas, monospace;
    font-size: 0.68rem;
    justify-content: center;
}

.label-barcode-svg {
    display: block;
    width: 100%;
    height: 2.25rem;
    color: inherit;
}

.label-barcode-value {
    display: block;
    line-height: 1;
    text-align: center;
}

.label-canvas-field-image {
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    border: 1px dashed #98a2b3;
    color: #344054;
    background: #f8fafc;
    font-size: 0.75rem;
    font-weight: 900;
}

/* Solid-colour region (Band). Sits above template fill; content paints above via z-index. */
.label-canvas-field-band {
    align-items: stretch;
    justify-content: stretch;
    min-height: 0.5rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--label-band-fill, #ffd100) 70%, #000000);
    background: var(--label-band-fill, #ffd100);
    color: transparent;
    box-shadow: none;
    font-size: 0;
    overflow: hidden;
    z-index: 1;
}

.label-canvas-field-band.is-selected {
    color: transparent;
    outline: 2px solid color-mix(in srgb, var(--hos-accent, #2563eb) 80%, transparent);
    outline-offset: 1px;
}

.label-canvas-field-band .label-band-chrome {
    display: none;
    pointer-events: none;
}

.label-canvas-field-band.is-selected .label-band-chrome {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: color-mix(in srgb, #111827 55%, transparent);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.label-band-member-list {
    margin: 0 0 0.5rem;
    padding-left: 1.1rem;
    color: var(--studio-muted, #475467);
    font-size: 0.8rem;
}

.label-band-member-list:empty,
.label-band-members[data-has-members="true"] [data-label-band-member-empty],
.label-band-members:not([data-has-members="true"]) .label-band-member-list:not(:empty) {
    /* empty list relies on empty-state note */
}

.label-canvas-field-generic-image {
    padding: 0;
    overflow: hidden;
}

.label-canvas-field-generic-image[data-label-image-state="empty"],
.label-canvas-field-generic-image[data-label-image-state="unavailable"] {
    cursor: pointer;
}

.label-image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    height: 100%;
    min-height: 2.6rem;
    box-sizing: border-box;
    padding: 0.35rem;
    text-align: center;
    pointer-events: none;
    opacity: var(--label-image-opacity, 1);
    filter: brightness(var(--label-image-brightness, 1));
}

.label-image-frame-empty,
.label-image-frame-loading,
.label-image-frame-unavailable {
    flex-direction: column;
    color: #475467;
    background: repeating-linear-gradient(135deg, #ffffff 0 8px, #f2f4f7 8px 16px);
}

.label-image-frame-icon {
    font-size: 1rem;
    line-height: 1;
}

.label-image-frame-text {
    font-size: 0.72rem;
    font-weight: 700;
}

.label-image-frame-resolved {
    padding: 0;
}

.label-image-content {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
}

/* Background images sit behind other fields and stay selectable for repositioning. */
.label-canvas-field-image-background {
    z-index: 0;
    background: transparent !important;
    box-shadow: none;
    border-color: transparent;
}

.label-canvas-field-image-background.is-selected {
    border-color: color-mix(in srgb, var(--hos-accent, #2563eb) 70%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hos-accent, #2563eb) 45%, transparent);
}

.label-image-fit-modes {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
    border: 0;
    padding: 0;
}

.label-image-fit-modes legend {
    margin-bottom: 0.35rem;
    font-weight: 700;
}

[data-label-image-appearance-controls] label {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.5rem;
    align-items: center;
}

[data-label-image-appearance-controls] label span {
    grid-column: 1 / -1;
}

[data-label-image-appearance-controls] input[type="range"] {
    width: 100%;
}

[data-label-image-appearance-controls] output {
    min-width: 3rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #475467;
    font-size: 0.8rem;
}

.label-image-default-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.label-image-default-row img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border: 1px solid #d0d5dd;
    border-radius: 0.35rem;
    background: #fff;
}

.label-image-picker-dialog {
    width: min(36rem, calc(100vw - 2rem));
    border: 1px solid #d0d5dd;
    border-radius: 0.75rem;
    padding: 1rem;
}

.label-image-picker-form {
    display: grid;
    gap: 0.75rem;
}

.label-image-picker-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.75rem;
    max-height: 20rem;
    overflow: auto;
}

.label-image-picker-item {
    display: grid;
    gap: 0.35rem;
    padding: 0.5rem;
    border: 1px solid #d0d5dd;
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.label-image-picker-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.35rem;
    background: #f2f4f7;
}

.label-image-picker-item span {
    font-size: 0.75rem;
    font-weight: 600;
    color: #344054;
}

.label-canvas-shape {
    min-height: 0;
    padding: 0;
}

.label-brand-logo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.label-cool-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 1.8rem;
    border: 1px solid #98a2b3;
    background: repeating-linear-gradient(135deg, #ffffff 0 6px, #eef2f6 6px 12px);
}

.label-canvas-field.is-mono {
    color: #111827;
    background: #ffffff;
}

.label-canvas-field-description {
    font-size: 0.95rem;
    font-weight: 700;
}

.label-canvas-field-store,
.label-canvas-field-category {
    color: #475467;
    font-size: 0.85rem;
    font-weight: 800;
}

.label-product-results {
    display: grid;
    gap: 0.45rem;
    padding-top: 0.75rem;
    border-top: 1px solid #d7dde5;
}

.label-product-result {
    margin: 0;
}

.label-product-result-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    gap: 0.1rem 0.6rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #d7dde5;
    border-radius: 6px;
    color: #111827;
    background: #ffffff;
    text-align: left;
}

.label-product-result-button strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.85rem;
}

.label-product-result-button span {
    color: #667085;
    font-size: 0.82rem;
}

.label-product-result-button span:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 900;
}

.label-product-result-button.active {
    border-color: #0f766e;
    background: #f0fdfa;
    box-shadow: inset 3px 0 0 #0f766e;
}

.label-product-empty {
    margin: 0.75rem 0 0;
    color: #667085;
}

.label-canvas-field-sale,
.label-canvas-field-saving {
    justify-content: center;
    padding: 0.25rem 0.45rem;
    border-radius: 3px;
    color: #ffffff;
    background: #d92d20;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.label-canvas-field-saving {
    color: #7a2e0e;
    background: #fff1cc;
}

@media (max-width: 1100px) {
    .label-studio-workbench {
        grid-template-columns: 1fr;
    }

    .label-workbench-resizer {
        display: none;
    }

    .label-template-rail,
    .label-products-rail {
        max-height: none;
    }

    .label-tool-strip,
    .label-ai-layout-form,
    .label-design-assistant {
        grid-template-columns: 1fr;
    }
}

/* Label Studio route-backed vertical slice. These aliases retain enterprise theme variables. */
.page.label-studio-shell {
    --studio-bg: var(--shell-bg, #f1f1f1);
    --studio-panel: var(--panel-bg, #fff);
    --studio-stage: #f8fafc;
    --studio-grid: #eef2f6;
    --studio-border: #d7dde5;
    --studio-text: var(--text, #333);
    --studio-heading: var(--heading, #182230);
    --studio-muted: #667085;
    --studio-selection: #1f6feb;
    --studio-selection-soft: rgba(31, 111, 235, .12);
    --studio-focus: var(--focus-ring, #ffb018);
    --studio-danger: var(--status-danger, #b42318);
    --studio-radius: 6px;
    --studio-shadow: 0 12px 32px rgba(31, 41, 55, .18);
    display: block;
    min-height: 100dvh;
    color: var(--studio-text);
    background: var(--studio-bg);
}

.label-studio-shell .main-shell,
.label-studio-content {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
}

.content-shell.label-studio-content { padding: 0; }
.label-studio-screen { min-height: 100dvh; }
.label-studio-screen :focus-visible,
.label-designer :focus-visible { outline: 2px solid var(--studio-focus); outline-offset: 2px; }
.label-studio-screen [hidden],
.label-designer [hidden] { display: none !important; }

/* Area management shell (Templates / Images) */
.label-studio-area {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    min-height: 100dvh;
    background: var(--studio-bg);
}
.label-studio-area-rail {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100dvh;
    padding: 20px 16px;
    border-right: 1px solid var(--studio-border);
    background: var(--studio-panel);
    overflow: auto;
}
.label-studio-area-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.label-studio-area-logo-frame,
.label-studio-area-mark {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--studio-border);
    border-radius: 8px;
    background: var(--studio-stage);
}
.label-studio-area-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.label-studio-area-mark {
    color: var(--studio-heading);
    font-size: 13px;
    font-weight: 800;
}
.label-studio-area-brand-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}
.label-studio-area-brand-copy strong,
.label-studio-area-brand-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.label-studio-area-brand-copy strong {
    color: var(--studio-heading);
    font-size: 14px;
}
.label-studio-area-brand-copy span {
    color: var(--studio-muted);
    font-size: 12px;
    font-weight: 700;
}
.label-studio-area-back {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--studio-muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.label-studio-area-back:hover,
.label-studio-area-back:focus-visible {
    color: var(--studio-heading);
}
.label-studio-area-sections {
    display: grid;
    gap: 4px;
}
.label-studio-area-section-link {
    position: relative;
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 0 12px;
    border-radius: var(--studio-radius);
    color: var(--studio-text);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
}
.label-studio-area-section-link:hover {
    background: var(--studio-stage);
}
.label-studio-area-section-link.is-active {
    color: var(--studio-heading);
    background: var(--studio-selection-soft);
    font-weight: 800;
}
.label-studio-area-section-link.is-active::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    border-radius: 999px;
    background: var(--studio-selection);
}
.label-studio-area-secondary {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--studio-border);
}
.label-studio-area-content {
    min-width: 0;
    min-height: 100dvh;
    padding: 32px clamp(20px, 4vw, 64px);
    overflow: auto;
    background: var(--studio-panel);
}
.label-studio-area-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 1240px;
    margin: 0 auto 28px;
    gap: 24px;
}
.label-studio-area-heading {
    min-width: 0;
}
.label-studio-area-heading h1 {
    margin: 0 0 6px;
    color: var(--studio-heading);
    font-size: 2rem;
}
.label-studio-area-heading p {
    margin: 0;
    color: var(--studio-muted);
}
.label-studio-area-primary-action {
    flex: 0 0 auto;
}
@media (max-width: 899px) {
    .label-studio-area {
        grid-template-columns: minmax(0, 1fr);
    }

    .label-studio-area-rail {
        position: static;
        height: auto;
        padding: 16px clamp(16px, 4vw, 32px) 0;
        border-right: 0;
        border-bottom: 1px solid var(--studio-border);
        overflow: visible;
    }

    .label-studio-area-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }

    .label-studio-area-section-link {
        justify-content: center;
        border: 1px solid var(--studio-border);
        background: var(--studio-stage);
    }

    .label-studio-area-section-link.is-active::before {
        top: auto;
        right: 12px;
        bottom: 0;
        left: 12px;
        width: auto;
        height: 3px;
    }

    .label-studio-area-secondary {
        display: none;
    }

    .label-studio-area-content {
        min-height: 0;
        padding-top: 24px;
    }

    .label-studio-area-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }
}
@media (max-width: 599px) {
    .label-studio-area-sections {
        grid-template-columns: 1fr;
    }

    .label-studio-area-section-link,
    .label-studio-area-back,
    .label-studio-area-primary-action .primary-action {
        min-height: 44px;
    }

    .label-library-controls {
        grid-template-columns: 1fr;
    }

    .label-library-count {
        justify-self: start;
    }
}

/* Library */
.label-library { overflow: auto; background: var(--studio-panel); }
.label-library-controls { display: grid; grid-template-columns: minmax(220px, 320px) 160px 220px 1fr; align-items: end; max-width: 1240px; margin: 0 auto 16px; gap: 12px; }
.label-library-controls label,
.label-wizard-controls label,
.label-page-controls label,
.label-product-picker label,
.label-field-inspector label,
.label-ai-layout-form label,
.label-reference-layout-form label { display: grid; min-width: 0; gap: 4px; }
.label-library-controls label > span,
.label-wizard-controls label > span,
.label-page-controls label > span,
.label-product-picker label > span,
.label-field-inspector label > span,
.label-ai-layout-form label > span,
.label-reference-layout-form label > span { color: var(--studio-muted); font-size: 11px; font-weight: 800; line-height: 16px; text-transform: uppercase; }
.label-library-count { justify-self: end; padding-bottom: 8px; color: var(--studio-muted); font-size: 13px; font-weight: 700; }
.label-library-table { max-width: 1240px; margin: 0 auto; border: 1px solid var(--studio-border); border-radius: var(--studio-radius); overflow: hidden; }
.label-library-table-head,
.label-library-row { display: grid; grid-template-columns: 72px minmax(210px, 1.4fr) minmax(130px, .8fr) minmax(130px, .8fr) 110px 130px; align-items: center; gap: 12px; }
.label-library-table-head { min-height: 42px; padding: 0 16px; color: var(--studio-muted); background: #f8fafc; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.label-library-row { min-height: 80px; padding: 10px 16px; border-top: 1px solid var(--studio-border); color: var(--studio-text); background: var(--studio-panel); text-decoration: none; }
.label-library-row:hover { background: #f8fafc; }
.label-library-row strong,
.label-library-row small { display: block; }
.label-library-row small { max-width: 420px; margin-top: 3px; overflow: hidden; color: var(--studio-muted); text-overflow: ellipsis; white-space: nowrap; }
.label-library-thumb { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid var(--studio-border); border-radius: 4px; background: repeating-conic-gradient(#eef2f6 0 25%, #fff 0 50%) 50% / 12px 12px; }
.label-library-thumb span { width: 34px; height: 45px; border: 1px solid #98a2b3; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.1); }
.label-status-chip { display: inline-block; padding: 3px 8px; border: 1px solid var(--studio-border); border-radius: 999px; font-size: 12px; font-weight: 800; }
.label-status-active { color: #067647; border-color: #abefc6; background: #ecfdf3; }
.label-status-archived { color: #475467; background: #f2f4f7; }
.label-status-draft { color: #b54708; border-color: #fedf89; background: #fffaeb; }
.label-library-empty,
.label-library-filter-empty { max-width: 1240px; margin: 48px auto; padding: 40px; border: 1px dashed var(--studio-border); border-radius: var(--studio-radius); text-align: center; }
.label-library-filter-empty { border: 0; }

/* Wizard */
.label-wizard-screen { display: grid; place-items: center; padding: 48px 20px; background: #e9edf2; }
.label-wizard-card { width: min(760px, 100%); max-height: calc(100dvh - 96px); border: 1px solid var(--studio-border); border-radius: 8px; overflow: auto; background: var(--studio-panel); box-shadow: var(--studio-shadow); }
.label-wizard-header { position: sticky; z-index: 3; top: 0; display: flex; min-height: 48px; align-items: center; justify-content: center; border-bottom: 1px solid var(--studio-border); background: var(--studio-panel); }
.label-wizard-header a { position: absolute; left: 16px; color: var(--studio-muted); font-size: 24px; text-decoration: none; }
.label-wizard-steps { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 16px 24px; border-bottom: 1px solid var(--studio-border); list-style: none; }
.label-wizard-steps li { display: flex; align-items: center; gap: 8px; color: var(--studio-muted); font-weight: 700; }
.label-wizard-steps li span { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--studio-border); border-radius: 50%; }
.label-wizard-steps li.active { color: var(--studio-heading); }
.label-wizard-steps li.active span { color: #fff; border-color: var(--studio-selection); background: var(--studio-selection); }
.label-wizard-form { margin: 0; }
.label-paper-step,
.label-page-step { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; padding: 24px; }
.label-paper-preview,
.label-page-preview-wrap { display: grid; align-content: center; justify-items: center; gap: 12px; color: var(--studio-muted); text-align: center; }
.label-paper-preview [data-label-paper-preview] { display: grid; width: 190px; max-height: 260px; place-items: center; border: 1px solid #98a2b3; border-radius: 2px; background: #fff; box-shadow: var(--studio-shadow); aspect-ratio: 210 / 297; }
.label-paper-preview [data-label-paper-preview] span { color: var(--studio-heading); font-weight: 800; }
.label-wizard-controls,
.label-page-controls { display: grid; align-content: start; gap: 16px; }
.label-orientation-segments { display: grid; grid-template-columns: repeat(2, 1fr); padding: 0; border: 1px solid var(--studio-border); border-radius: var(--studio-radius); overflow: hidden; }
.label-orientation-segments legend,
.label-page-controls legend { margin-bottom: 6px; color: var(--studio-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.label-orientation-segments legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.label-orientation-segments label { display: flex; min-height: 36px; align-items: center; justify-content: center; padding: 8px; cursor: pointer; }
.label-orientation-segments label + label { border-left: 1px solid var(--studio-border); }
.label-orientation-segments label:has(input:checked) { color: var(--studio-selection); background: var(--studio-selection-soft); box-shadow: inset 0 -2px var(--studio-selection); }
.label-orientation-segments input { position: absolute; opacity: 0; }
.label-dimension-pair,
.label-margin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.label-page-controls fieldset { margin: 0; padding: 12px; border: 1px solid var(--studio-border); border-radius: var(--studio-radius); }
.label-page-preview { display: grid; width: min(250px, 100%); padding: 12px; border: 2px solid #98a2b3; background: #fff; aspect-ratio: 210 / 297; box-shadow: var(--studio-shadow); }
.label-page-preview.is-invalid { border-color: var(--studio-danger); background: #fff5f4; }
.label-page-preview [data-label-page-printable],
.label-page-preview [data-label-page-cells] { display: grid; min-width: 0; min-height: 0; }
.label-page-preview [data-label-page-printable] { border: 1px dashed #98a2b3; }
.label-page-preview [data-label-page-cells] span { border: 1px solid var(--studio-selection); background: var(--studio-selection-soft); }
.label-page-calculation { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 12px; border-radius: var(--studio-radius); background: #f8fafc; }
.label-page-calculation div { display: grid; gap: 2px; }
.label-page-calculation dt { color: var(--studio-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.label-page-calculation dd { margin: 0; color: var(--studio-heading); font-weight: 800; }
.label-wizard-error { margin: 8px 0 0; color: var(--studio-danger); font-size: 12px; }
.label-wizard-footer { position: sticky; z-index: 3; bottom: 0; display: flex; min-height: 64px; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--studio-border); background: var(--studio-panel); }

/* Designer */
.label-designer { height: 100dvh; overflow: hidden; background: var(--studio-bg); }
.label-designer-commandbar { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: 40px minmax(220px, 1fr) auto auto; height: 52px; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--studio-border); background: var(--studio-panel); }
.label-command-back { display: grid; width: 36px; height: 36px; place-items: center; border-radius: var(--studio-radius); color: var(--studio-heading); font-size: 20px; text-decoration: none; }
.label-command-title { display: grid; grid-template-columns: auto minmax(0, 240px); align-items: center; column-gap: 6px; line-height: 16px; }
.label-command-title span,
.label-command-title small { color: var(--studio-muted); font-size: 11px; }
.label-command-title small { grid-column: 1 / -1; }
.label-command-title strong { overflow: hidden; color: var(--studio-heading); text-overflow: ellipsis; white-space: nowrap; }
.label-command-controls { display: flex; align-items: center; gap: 4px; }
.label-command-controls button,
.label-pane-tabs button { min-height: 36px; border: 1px solid var(--studio-border); color: var(--studio-text); background: var(--studio-panel); }
.label-command-controls output { min-width: 48px; color: var(--studio-muted); font-size: 12px; text-align: center; }
.label-designer button:disabled { cursor: not-allowed; opacity: .5; }
.label-designer .label-studio-workbench { --label-palette-width: 280px; display: grid; grid-template-columns: var(--label-palette-width) 8px minmax(480px, 1fr) 8px 320px; height: calc(100dvh - 52px); gap: 0; align-items: stretch; overflow: hidden; }
.label-designer .label-studio-rail { display: block; height: 100%; padding: 0; border: 0; border-radius: 0; overflow: auto; background: var(--studio-panel); }
.label-template-rail { border-right: 1px solid var(--studio-border) !important; }
.label-products-rail { border-left: 1px solid var(--studio-border) !important; }
.label-pane-tabs { position: sticky; z-index: 4; top: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 44px; border-bottom: 1px solid var(--studio-border); background: var(--studio-panel); }
.label-pane-tabs button { min-height: 44px; border: 0; border-radius: 0; font-weight: 800; }
.label-pane-tabs button[aria-selected="true"] { color: var(--studio-selection); background: var(--studio-selection-soft); box-shadow: inset 0 -2px var(--studio-selection); }
.label-template-rail [role="tabpanel"],
.label-products-rail [role="tabpanel"] { padding: 12px; }
.label-field-search { position: sticky; z-index: 2; top: 44px; padding-bottom: 10px; background: var(--studio-panel); }
.label-field-palette { gap: 12px; }
.label-field-list-header { height: 32px; }
.label-field-row { min-height: 36px; grid-template-columns: minmax(0, 1fr) auto auto; cursor: pointer; }
.label-field-row small { color: var(--studio-muted); font-size: 10px; text-transform: uppercase; }
.label-assist-shortcut { width: 100%; margin-top: 12px; }
.label-layers-list { display: grid; gap: 2px; }
.label-layer-row { min-height: 36px; padding: 6px 8px; border: 1px solid transparent; border-radius: 4px; color: var(--studio-text); background: transparent; text-align: left; }
.label-layer-row:hover { background: #f8fafc; }
.label-layer-row.is-selected { border-color: var(--studio-selection); background: var(--studio-selection-soft); }
.label-designer .label-workbench-resizer { min-height: 0; border-radius: 0; background: #eef2f6; }
.label-designer .label-workbench-resizer::before { inset: 0 3px; }
.label-designer .label-workbench-resizer-right { cursor: default; }
.label-studio-canvas-panel { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; }
.label-designer .label-artboard-stage { display: grid; width: 100%; height: 100%; min-height: 0; place-items: center; padding: 40px; overflow: auto; background: linear-gradient(var(--studio-grid) 1px, transparent 1px), linear-gradient(90deg, var(--studio-grid) 1px, transparent 1px), var(--studio-stage); background-size: 24px 24px; }
.label-designer .label-canvas { z-index: 1; box-sizing: border-box; width: min(680px, calc(100% - 80px)); min-width: 120px; min-height: 120px; margin: auto; border: 1px solid #98a2b3; border-radius: 2px; background: var(--label-template-fill, #ffffff); box-shadow: var(--studio-shadow); transition: transform .12s ease; }
.label-designer .label-canvas::before { display: none; }
.label-mobile-note { display: none; }
.label-page-properties,
.label-field-inspector,
.label-product-picker,
.label-ai-layout-form,
.label-reference-layout-form { display: grid; gap: 10px; }
.label-page-properties h2,
.label-field-inspector h2,
.label-products-rail h2 { margin: 0 0 10px; color: var(--studio-heading); font-size: 15px; }
.label-page-properties dl { display: grid; gap: 8px; margin: 0 0 14px; }
.label-page-properties dl div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid #eef2f6; }
.label-page-properties dt { color: var(--studio-muted); }
.label-page-properties dd { margin: 0; font-weight: 700; text-align: right; }
.label-template-fill-control { display: grid; gap: 6px; margin: 0 0 10px; }
.label-template-fill-control span { color: var(--studio-muted); font-size: 12px; font-weight: 600; }
.label-template-fill-control input[type="color"] {
    width: 100%;
    min-height: 36px;
    padding: 0;
    border: 1px solid var(--studio-border, #d0d5dd);
    border-radius: var(--studio-radius, 6px);
    background: transparent;
    cursor: pointer;
}
.label-page-properties .metric-note { margin: 0 0 14px; }
.label-ai-layout-panel + .label-ai-layout-panel { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--studio-border); }
.label-ai-layout-form textarea { min-height: 100px; resize: vertical; }

@media (max-width: 1279px) {
    .label-designer .label-studio-workbench { grid-template-columns: 240px 6px minmax(280px, 1fr) 6px 280px; }
    .label-designer .label-studio-rail { position: static; width: auto; box-shadow: none; }
    .label-designer .label-workbench-resizer { display: block; }
    .label-mobile-note { position: absolute; z-index: 3; bottom: 12px; left: 50%; display: block; padding: 6px 10px; border: 1px solid var(--studio-border); border-radius: 999px; color: var(--studio-muted); background: var(--studio-panel); font-size: 11px; transform: translateX(-50%); }
}

@media (max-width: 899px) {
    .label-designer .label-studio-workbench { grid-template-columns: 200px 6px minmax(260px, 1fr); }
    .label-designer .label-products-rail,
    .label-designer .label-workbench-resizer-right { display: none; }
}

@media (max-width: 767px) {
    .label-library { padding: 20px 12px; }
    .label-library-header { align-items: flex-start; }
    .label-library-controls { grid-template-columns: 1fr; }
    .label-library-count { justify-self: start; }
    .label-library-table-head { display: none; }
    .label-library-row { grid-template-columns: 60px 1fr; gap: 8px 12px; padding: 12px; }
    .label-library-row > :nth-child(n+3) { grid-column: 2; }
    .label-paper-step,
    .label-page-step { grid-template-columns: 1fr; }
    .label-wizard-screen { display: block; padding: 0; }
    .label-wizard-card { width: 100%; min-height: 100dvh; max-height: none; border: 0; border-radius: 0; }
    .label-paper-preview { display: none; }
    .label-designer-commandbar { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .label-command-controls { display: none; }
    .label-designer-commandbar > .primary-action { display: none; }
    .label-designer .label-studio-workbench { grid-template-columns: 180px minmax(220px, 1fr); }
    .label-designer .label-workbench-resizer { display: none; }
    .label-designer .label-template-rail { display: block; }
    .label-mobile-note { width: calc(100% - 24px); border-radius: 4px; text-align: center; }
}

/* Label image assets management */
.label-assets-screen { min-height: 100dvh; }
.label-assets-controls {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 180px auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}
.label-assets-controls label { display: grid; gap: 6px; font-size: 13px; font-weight: 650; }
.label-assets-count { color: var(--studio-muted); font-size: 13px; font-weight: 700; }
.label-assets-policy { grid-column: 1 / -1; margin: 0; color: var(--studio-muted); font-size: 12px; }
.label-assets-libraries { display: grid; gap: 6px; }
.label-assets-libraries strong { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--studio-muted); }
.label-assets-library-link {
    display: flex; min-height: 40px; align-items: center; padding: 0 10px;
    border: 0; border-radius: var(--studio-radius); background: transparent; color: var(--studio-text);
    font: inherit; font-weight: 650; text-align: left; cursor: pointer;
}
.label-assets-library-link.is-active { background: var(--studio-selection-soft); color: var(--studio-heading); font-weight: 800; }
.label-assets-create-library { display: grid; gap: 8px; margin-top: 8px; }
.label-assets-selection {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius); background: var(--studio-panel);
}
.label-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.label-assets-card {
    position: relative; display: grid; gap: 8px; padding: 10px;
    border: 1px solid var(--studio-border); border-radius: 10px; background: var(--studio-panel);
}
.label-assets-card img {
    width: 100%; height: 120px; object-fit: contain; border-radius: 6px; background: var(--studio-stage);
}
.label-assets-card strong { font-size: 13px; color: var(--studio-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-assets-card small { color: var(--studio-muted); font-size: 11px; line-height: 1.35; }
.label-assets-card-select { position: absolute; top: 8px; left: 8px; }
.label-assets-empty, .label-assets-error { margin-top: 18px; }
.label-assets-error { color: #b42318; font-weight: 650; }
.label-assets-pager { display: flex; gap: 8px; margin-top: 16px; }
.label-assets-upload-dialog {
    width: min(560px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    border: 1px solid var(--studio-border);
    border-radius: 12px;
    padding: 0;
    background: var(--studio-panel);
    color: var(--studio-text);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
}
.label-assets-upload-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}
.label-assets-upload-form { display: grid; gap: 12px; padding: 16px; }
.label-assets-upload-form header { display: flex; justify-content: space-between; align-items: center; }
.label-assets-dropzone {
    display: grid; place-items: center; min-height: 120px; border: 2px dashed var(--studio-border);
    border-radius: 10px; color: var(--studio-muted); font-weight: 700; cursor: pointer;
}
.label-assets-dropzone.is-dragover { border-color: var(--studio-selection); background: var(--studio-selection-soft); }
.label-assets-upload-list { margin: 0; padding-left: 18px; color: var(--studio-muted); font-size: 13px; }
.label-assets-upload-form footer { display: flex; justify-content: flex-end; gap: 8px; }
.label-assets-upload-form input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 899px) {
    .label-assets-controls { grid-template-columns: 1fr; }
    .label-assets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
    .label-assets-grid { grid-template-columns: 1fr; }
}

/* Label Palette management */
.label-palette-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.label-palette-banner,
.label-palette-overview,
.label-palette-controls,
.label-palette-library,
.label-palette-loading,
.label-palette-empty { width: min(1240px, 100%); margin-right: auto; margin-left: auto; }
.label-palette-banner {
    margin-bottom: 16px; padding: 11px 14px; border: 1px solid var(--studio-border);
    border-radius: 8px; font-size: 13px; font-weight: 650;
}
.label-palette-banner.is-danger { color: var(--status-danger); border-color: #f3b4b4; background: var(--status-danger-bg); }
.label-palette-banner.is-success { color: var(--status-success); border-color: #b7ddc6; background: var(--status-success-bg); }
.label-palette-overview {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px;
    border: 1px solid var(--studio-border); border-radius: 10px; overflow: hidden; background: var(--studio-panel);
}
.label-palette-overview div { display: grid; gap: 3px; min-height: 82px; align-content: center; padding: 14px 20px; }
.label-palette-overview div + div { border-left: 1px solid var(--studio-border); }
.label-palette-overview strong { color: var(--studio-heading); font-size: 24px; line-height: 1; }
.label-palette-overview span { color: var(--studio-muted); font-size: 12px; font-weight: 700; }
.label-palette-overview .has-warning strong { color: var(--status-warning); }
.label-palette-controls {
    display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(140px, .7fr)) auto auto;
    align-items: end; gap: 12px; margin-bottom: 24px; padding: 16px;
    border: 1px solid var(--studio-border); border-radius: 10px; background: var(--studio-stage);
}
.label-palette-controls label,
.label-palette-form label { display: grid; min-width: 0; gap: 6px; }
.label-palette-controls label > span,
.label-palette-form label > span {
    color: var(--studio-muted); font-size: 11px; font-weight: 800; letter-spacing: .025em; text-transform: uppercase;
}
.label-palette-controls .shell-input { width: 100%; min-height: 40px; }
.label-palette-count { align-self: center; color: var(--studio-muted); font-size: 13px; font-weight: 750; white-space: nowrap; }
.label-palette-bulk {
    display: flex; flex-wrap: wrap; align-items: end; gap: 12px; width: min(1240px, 100%);
    margin: -12px auto 24px; padding: 14px 16px; border: 1px solid var(--studio-border);
    border-radius: 10px; background: var(--studio-selection-soft);
}
.label-palette-bulk label { display: grid; gap: 6px; min-width: 240px; }
.label-palette-bulk label > span { color: var(--studio-muted); font-size: 11px; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; }
.label-palette-bulk .shell-input,
.label-palette-bulk .primary-action,
.label-palette-bulk .secondary-action { min-height: 40px; }
.label-palette-bulk-hint { align-self: center; color: var(--studio-muted); font-size: 12px; font-weight: 650; }
.label-palette-selectall {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--studio-border);
    border-radius: 8px; background: var(--studio-stage);
}
.label-palette-selectall label { display: inline-flex; align-items: center; gap: 10px; color: var(--studio-heading); font-size: 13px; font-weight: 750; }
.label-palette-selectall input { width: 18px; height: 18px; }
.label-palette-selectall-count { color: var(--studio-muted); font-size: 12px; font-weight: 700; }
.label-palette-group-select { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; color: var(--studio-muted); font-size: 11px; font-weight: 750; }
.label-palette-group-select input { width: 17px; height: 17px; }
.label-palette-library-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.label-palette-library-heading h2,
.label-palette-library-heading p { margin: 0; }
.label-palette-library-heading h2 { color: var(--studio-heading); font-size: 19px; }
.label-palette-library-heading p,
.label-palette-library-heading > span { margin-top: 4px; color: var(--studio-muted); font-size: 12px; }
.label-palette-library-heading > span { max-width: 400px; padding: 8px 10px; border-radius: 6px; background: var(--studio-selection-soft); }
.label-palette-group { margin-bottom: 16px; border: 1px solid var(--studio-border); border-radius: 10px; overflow: visible; background: var(--studio-panel); }
.label-palette-group-header {
    display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 16px;
    padding: 10px 16px; border-bottom: 1px solid var(--studio-border); border-radius: 10px 10px 0 0; background: var(--studio-stage);
}
.label-palette-group-header h3 { margin: 0; color: var(--studio-heading); font-size: 14px; }
.label-palette-group-header span { color: var(--studio-muted); font-size: 11px; font-weight: 650; }
.label-palette-text-action { min-height: 36px; padding: 0 8px; border: 0; color: var(--studio-selection); background: transparent; font-weight: 750; }
.label-palette-text-action:hover { text-decoration: underline; }
.label-palette-field-list { display: grid; }
.label-palette-row {
    display: grid; grid-template-columns: 42px minmax(220px, 1fr) auto auto; align-items: center; gap: 14px;
    min-height: 108px; padding: 14px 16px; background: var(--studio-panel);
}
.label-palette-row + .label-palette-row { border-top: 1px solid var(--studio-border); }
.label-palette-row:last-child { border-radius: 0 0 10px 10px; }
.label-palette-row:hover { background: color-mix(in srgb, var(--studio-stage) 65%, var(--studio-panel)); }
.label-palette-row.is-managed { grid-template-columns: 78px minmax(200px, 1fr) auto auto; }
.label-palette-row.is-dragging { opacity: .45; }
.label-palette-row.is-drag-over { box-shadow: inset 0 3px 0 0 var(--studio-selection); background: var(--studio-selection-soft); }
.label-palette-lead { display: flex; align-items: center; gap: 8px; }
.label-palette-row-control { display: grid; justify-items: center; align-content: center; gap: 8px; }
.label-palette-select { width: 18px; height: 18px; }
.label-palette-drag-handle {
    display: grid; place-items: center; width: 24px; height: 30px; border-radius: 6px;
    color: var(--studio-muted); cursor: grab; font-size: 15px; line-height: 1; user-select: none;
}
.label-palette-drag-handle:hover { color: var(--studio-heading); background: var(--studio-stage); }
.label-palette-drag-handle:active { cursor: grabbing; }
.label-palette-kind {
    display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #c8d8f0;
    border-radius: 9px; color: #175cd3; background: #eff8ff; font-size: 12px; font-weight: 850;
}
.label-palette-field-copy { min-width: 0; }
.label-palette-field-title { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.label-palette-field-title strong { min-width: 0; overflow: hidden; color: var(--studio-heading); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.label-palette-field-title span {
    padding: 2px 7px; border: 1px solid var(--studio-border); border-radius: 999px;
    color: var(--studio-muted); background: var(--studio-stage); font-size: 10px; font-weight: 800;
}
.label-palette-field-title span.is-custom { color: #6941c6; border-color: #d9d6fe; background: #f4f3ff; }
.label-palette-field-copy > p { margin: 5px 0 7px; overflow: hidden; color: var(--studio-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.label-palette-field-meta { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--studio-muted); font-size: 10px; font-weight: 650; }
.label-palette-field-meta code { max-width: 220px; padding: 2px 6px; overflow: hidden; border-radius: 4px; color: #475467; background: #f2f4f7; text-overflow: ellipsis; }
.label-palette-warning { margin-top: 8px; color: var(--status-warning); font-size: 11px; font-weight: 700; }
.label-palette-field-state { display: grid; justify-items: start; gap: 6px; }
.label-palette-chip { display: inline-flex; padding: 3px 8px; border: 1px solid; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.label-palette-chip.is-ready { color: #067647; border-color: #abefc6; background: #ecfdf3; }
.label-palette-chip.is-warning { color: #b54708; border-color: #fedf89; background: #fffaeb; }
.label-palette-chip.is-visible { color: #175cd3; border-color: #b2ddff; background: #eff8ff; }
.label-palette-chip.is-hidden { color: #475467; border-color: #d0d5dd; background: #f2f4f7; }
.label-palette-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.label-palette-row-actions .secondary-action,
.label-palette-more summary { min-height: 36px; padding: 7px 10px; font-size: 12px; }
.label-palette-more { position: relative; }
.label-palette-more summary {
    display: inline-flex; align-items: center; border: 1px solid var(--studio-border); border-radius: 6px;
    color: var(--studio-heading); background: var(--studio-panel); cursor: pointer; font-weight: 750; list-style: none;
}
.label-palette-more summary::-webkit-details-marker { display: none; }
.label-palette-more summary::after { content: "⋮"; margin-left: 6px; }
.label-palette-more[open] summary { border-color: var(--studio-selection); }
.label-palette-more > div {
    position: absolute; z-index: 20; top: calc(100% + 5px); right: 0; display: grid; width: 158px;
    padding: 5px; border: 1px solid var(--studio-border); border-radius: 8px; background: var(--studio-panel); box-shadow: var(--studio-shadow);
}
.label-palette-more button { min-height: 34px; padding: 6px 9px; border: 0; border-radius: 5px; color: var(--studio-text); background: transparent; font-size: 12px; text-align: left; }
.label-palette-more button:hover { background: var(--studio-stage); }
.label-palette-more button.is-danger { color: var(--status-danger); }
.label-palette-empty { padding: 48px 20px; border: 1px dashed var(--studio-border); border-radius: 10px; color: var(--studio-muted); text-align: center; }
.label-palette-empty strong { color: var(--studio-heading); font-size: 16px; }
.label-palette-empty p { margin: 6px 0 16px; }
.label-palette-loading { position: relative; display: grid; gap: 8px; }
.label-palette-loading span { height: 74px; border-radius: 8px; background: linear-gradient(90deg, #f2f4f7 25%, #e8edf3 50%, #f2f4f7 75%); background-size: 200% 100%; animation: palette-loading 1.4s infinite; }
.label-palette-loading p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@keyframes palette-loading { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.label-palette-modal-layer {
    position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px;
    overflow: auto; background: rgba(15, 23, 42, .48); backdrop-filter: blur(2px);
}
.label-palette-modal {
    width: min(640px, 100%); max-height: calc(100dvh - 40px); overflow: auto;
    border: 1px solid var(--studio-border, var(--border)); border-radius: 14px;
    color: var(--studio-text, var(--text)); background: var(--studio-panel, var(--panel-bg)); box-shadow: 0 24px 64px rgba(15, 23, 42, .3);
}
.label-palette-modal.is-compact { width: min(500px, 100%); }
.label-palette-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; border-bottom: 1px solid var(--studio-border, var(--border)); }
.label-palette-modal > header span { color: var(--studio-selection, var(--link)); font-size: 11px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.label-palette-modal h2 { margin: 3px 0 5px; color: var(--studio-heading, var(--heading)); font-size: 21px; }
.label-palette-modal > header p { margin: 0; color: var(--studio-muted, var(--muted)); font-size: 12px; }
.label-palette-modal-close { width: 36px; height: 36px; flex: 0 0 auto; border: 0; border-radius: 50%; color: var(--studio-muted, var(--muted)); background: var(--studio-stage, var(--shell-bg-soft)); font-size: 22px; line-height: 1; }
.label-palette-form { display: grid; gap: 16px; padding: 20px 24px; }
.label-palette-form textarea.shell-input { min-height: 86px; resize: vertical; }
.label-palette-form small { margin-left: 5px; color: var(--studio-muted, var(--muted)); font-size: 9px; font-weight: 650; text-transform: none; }
.label-palette-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.label-palette-switch { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px !important; padding: 13px; border: 1px solid var(--studio-border, var(--border)); border-radius: 8px; background: var(--studio-stage, var(--shell-bg-soft)); }
.label-palette-switch input { width: 18px; height: 18px; margin-top: 1px; }
.label-palette-switch > span { display: grid; gap: 2px; color: var(--studio-text, var(--text)) !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; }
.label-palette-switch small { margin: 0; color: var(--studio-muted, var(--muted)); font-size: 11px; font-weight: 500; }
.label-palette-modal > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--studio-border, var(--border)); background: var(--studio-stage, var(--shell-bg-soft)); }
.label-palette-modal button:disabled { cursor: not-allowed; opacity: .55; }
.label-palette-modal.is-confirmation { width: min(440px, 100%); padding: 26px; overflow: visible; text-align: center; }
.label-palette-modal.is-confirmation h2 { margin: 12px 0 7px; }
.label-palette-modal.is-confirmation > p { margin: 0; color: var(--studio-muted, var(--muted)); font-size: 13px; line-height: 1.55; }
.label-palette-modal.is-confirmation > footer { justify-content: center; margin-top: 22px; padding: 0; border: 0; background: transparent; }
.label-palette-confirm-icon { display: grid; width: 44px; height: 44px; margin: 0 auto; place-items: center; border-radius: 50%; color: var(--status-warning); background: var(--status-warning-bg); font-size: 24px; font-weight: 850; }
.label-palette-confirm-icon.is-danger { color: var(--status-danger); background: var(--status-danger-bg); }
.label-palette-danger-action { min-height: 38px; padding: 8px 13px; border: 1px solid var(--status-danger); border-radius: 6px; color: #fff; background: var(--status-danger); font-weight: 750; }

@media (max-width: 1099px) {
    .label-palette-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .label-palette-search { grid-column: span 2; }
    .label-palette-count { justify-self: end; }
    .label-palette-row { grid-template-columns: 42px minmax(200px, 1fr) auto; }
    .label-palette-row.is-managed { grid-template-columns: 78px minmax(180px, 1fr) auto; }
    .label-palette-field-state { display: flex; grid-column: 2; }
    .label-palette-row-actions { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 699px) {
    .label-palette-header-actions { justify-content: flex-start; }
    .label-palette-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .label-palette-overview div:nth-child(3) { border-left: 0; border-top: 1px solid var(--studio-border); }
    .label-palette-overview div:nth-child(4) { border-top: 1px solid var(--studio-border); }
    .label-palette-controls { grid-template-columns: 1fr; }
    .label-palette-search { grid-column: auto; }
    .label-palette-count { justify-self: start; }
    .label-palette-library-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
    .label-palette-group-header { align-items: flex-start; }
    .label-palette-row { grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 10px; padding: 14px; }
    .label-palette-row.is-managed { grid-template-columns: 72px minmax(0, 1fr); }
    .label-palette-kind { width: 38px; height: 38px; }
    .label-palette-field-copy > p { white-space: normal; }
    .label-palette-field-state { grid-column: 2; }
    .label-palette-row-actions { grid-column: 1 / -1; grid-row: auto; justify-content: flex-end; }
    .label-palette-form-grid { grid-template-columns: 1fr; }
    .label-palette-modal-layer { align-items: end; padding: 0; }
    .label-palette-modal { width: 100%; max-height: 92dvh; border-radius: 14px 14px 0 0; }
    .label-palette-modal > header,
    .label-palette-form { padding-right: 18px; padding-left: 18px; }
}

/* Label Studio Themes */
.label-themes-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
}
.label-themes-controls label {
    display: grid;
    gap: 0.3rem;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}
.label-themes-count {
    color: var(--muted);
    font-weight: 700;
}
.label-themes-banner {
    margin-bottom: 0.85rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.4rem;
    border: 1px solid var(--border);
}
.label-themes-banner.is-danger {
    background: var(--status-danger-bg);
    border-color: color-mix(in srgb, var(--status-danger) 35%, transparent);
    color: var(--status-danger);
}
.label-themes-banner.is-info {
    background: var(--status-info-bg);
    border-color: color-mix(in srgb, var(--status-info) 35%, transparent);
    color: var(--status-info);
}
.label-themes-table-wrap {
    overflow-x: auto;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 0.45rem;
}
.label-themes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.label-themes-table th,
.label-themes-table td {
    padding: 0.7rem 0.65rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}
.label-themes-table th {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}
.label-themes-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.label-themes-empty {
    padding: 2rem 1rem;
    text-align: center;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 0.45rem;
}
.label-themes-editor {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 0.45rem;
}
.label-themes-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
}
.label-themes-editor-grid label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}
.label-themes-checkbox {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}
.label-themes-meta {
    margin: 0;
    color: var(--muted);
}
.label-themes-advanced {
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.65rem 0.75rem;
    background: var(--shell-bg-soft);
}
.label-themes-advanced summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--heading);
}
.label-themes-advanced textarea {
    margin-top: 0.55rem;
    min-height: 5rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.85rem;
}
.label-themes-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.label-themes-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}
.label-themes-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel-bg);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}
.label-themes-step span {
    display: inline-flex;
    width: 1.35rem;
    height: 1.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--shell-bg-soft);
    font-size: 0.78rem;
}
.label-themes-step.is-active {
    border-color: color-mix(in srgb, var(--status-info) 55%, var(--border));
    background: var(--status-info-bg);
    color: var(--heading);
}
.label-themes-step.is-complete span {
    background: var(--status-success-bg);
    color: var(--status-success);
}
.label-themes-picker-list {
    display: grid;
    gap: 0.45rem;
    max-height: 22rem;
    overflow: auto;
    margin-top: 0.75rem;
}
.label-themes-picker-item {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: var(--panel-bg);
}
.label-themes-picker-item.is-selected {
    border-color: color-mix(in srgb, var(--status-info) 50%, var(--border));
    background: var(--status-info-bg);
    box-shadow: inset 3px 0 0 var(--status-info);
}
.label-themes-picker-item strong,
.label-themes-picker-item small {
    display: block;
}
.label-themes-picker-item small {
    color: var(--muted);
}
.label-themes-swatch {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border);
    flex: 0 0 auto;
}
.label-themes-review ul {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}
.label-theme-preview-panel {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}

/* Insights Agent v2 timeline */
.insights-agent-timeline {
  margin: 0.5rem 0 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--shell-border, #d0d7de) 80%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--shell-surface, #f6f8fa) 92%, white);
  font-size: 0.85rem;
}
.insights-agent-timeline-title {
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--shell-muted, #57606a);
}
.insights-agent-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}
.insights-agent-timeline-step {
  display: grid;
  grid-template-columns: 1.1rem 1fr auto;
  gap: 0.4rem;
  align-items: center;
}
.insights-agent-timeline-icon {
  font-weight: 700;
  text-align: center;
}
.insights-agent-timeline-step--succeeded .insights-agent-timeline-icon { color: #1a7f37; }
.insights-agent-timeline-step--failed .insights-agent-timeline-icon { color: #cf222e; }
.insights-agent-timeline-step--running .insights-agent-timeline-icon { color: #0969da; }
.insights-agent-timeline-step--skipped .insights-agent-timeline-icon { color: #6e7781; }
.insights-agent-timeline-meta {
  color: var(--shell-muted, #57606a);
  font-variant-numeric: tabular-nums;
}
.insights-agent-timeline-primary {
  margin: 0.45rem 0 0;
  color: var(--shell-muted, #57606a);
}