/* UnlockGrid V10 — shared workspace theme; loaded after the legacy layers. */
:root {
    --ui-font:InterV2,system-ui,-apple-system,"Segoe UI",sans-serif;
    --canvas:#f4f6fa; --surface:#fff; --ink:#19253a; --muted:#63728a;
    --line:#dfe5ee; --brand:#3866d9; --brand2:#5887ec; --soft:#edf3ff;
    --success:#168263; --danger:#c43f53;
    --shadow-soft:0 3px 14px rgba(22,39,69,.035);
}
html[data-theme="dark"] {
    --canvas:#101722; --surface:#192333; --ink:#e6edf7; --muted:#a5b4c9;
    --line:#2c3b50; --brand:#85aaff; --brand2:#6091f1; --soft:#223451;
    --success:#54cba3; --danger:#ff889a; --shadow-soft:0 3px 14px rgba(0,0,0,.12);
}
@media(prefers-color-scheme:dark) {
    html[data-theme="system"] {
        --canvas:#101722; --surface:#192333; --ink:#e6edf7; --muted:#a5b4c9;
        --line:#2c3b50; --brand:#85aaff; --brand2:#6091f1; --soft:#223451;
        --success:#54cba3; --danger:#ff889a; --shadow-soft:0 3px 14px rgba(0,0,0,.12);
    }
}
body.app-body,body.auth-body {font-family:var(--ui-font);color:var(--ink);background:var(--canvas);font-size:13px}
:is(.app-body,.auth-body) :is(h1,h2,h3,h4,p,a,label,small,strong,em,b,span,button,input,select,textarea,td,th,dt,dd,summary) {font-family:var(--ui-font)!important}
button,input,select,textarea {font:inherit}
:where(a,button,input,select,textarea,summary):focus-visible {outline:3px solid var(--brand);outline-offset:3px}
.app-body .panel,.app-body .table-panel,.professional-settings-card,.professional-funding-form,.professional-payment-history {
    border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft);background:var(--surface);
}
.app-body .button {min-height:38px;border-radius:9px;font-size:12px;font-weight:650;letter-spacing:0;box-shadow:none}
.app-body .button-primary {background:#3866d9;color:#fff;border-color:#3866d9}
.app-body .button-primary:hover {background:#2955c2;border-color:#2955c2;box-shadow:0 3px 10px rgba(56,102,217,.18)}
.app-body .button-ghost {color:var(--ink);background:var(--surface);border-color:var(--line)}
.app-body .settings-form input:not([type="checkbox"]),.app-body .settings-form select,.app-body .settings-form textarea {
    border:1px solid var(--line);border-radius:9px;color:var(--ink);background:var(--surface);font-size:13px;
}
.app-body .settings-form label>span,.app-body .settings-form label>small {font-size:11px;line-height:1.5}
.app-body .settings-form label>small {color:var(--muted)}
.app-body .status {font-size:10px;line-height:1.4;font-weight:650;letter-spacing:.025em;border-radius:6px}
.app-body th {padding-top:12px;padding-bottom:12px;color:var(--muted);background:var(--canvas);font-size:10px!important;font-weight:700;letter-spacing:.045em}
.app-body td {padding-top:13px;padding-bottom:13px;font-size:12px!important;border-color:var(--line)}
.app-body td small {font-size:10px!important;line-height:1.5}
.app-body tbody tr:hover {background:color-mix(in srgb,var(--brand) 3%,var(--surface))}
.app-body .table-panel {overflow-x:auto!important}
.app-body .empty-state {color:var(--muted);padding:34px 20px}
.app-body .empty-state strong {color:var(--ink);font-size:15px}
.app-body .eyebrow {color:var(--muted);font-size:9px;letter-spacing:.12em}
.app-body .workspace-heading,.app-body .page-heading {margin-bottom:20px}
.app-body .workspace-heading h1,.app-body .page-heading h1,.premium-dashboard-titlebar h1 {color:var(--ink);font-size:28px!important;line-height:1.2;letter-spacing:-.035em}
.app-body .workspace-heading p:last-child,.app-body .page-heading p:last-child {color:var(--muted);font-size:12px;line-height:1.6}
.app-body .toast {border-radius:10px;font-size:12px;line-height:1.5}

/* Customer shell */
.customer-body {--customer-max:1380px}
.customer-content {max-width:var(--customer-max);margin-inline:auto;padding:26px 24px 48px}
.customer-header {background:#13233c!important;box-shadow:0 2px 10px rgba(12,29,53,.12)!important}
.customer-header:after {height:1px;background:rgba(255,255,255,.12)}
.premium-command-bar {height:72px!important}
.premium-customer-nav {background:transparent!important;border-color:transparent!important;gap:3px!important}
.premium-customer-nav .customer-nav-link {font-size:11px!important;border-radius:8px!important}
.premium-customer-nav .customer-nav-link.active {background:#294367!important;box-shadow:none!important}
.premium-customer-nav .customer-nav-link.nav-order-link:not(.active) {background:rgba(98,145,231,.14)!important;color:#e4edff!important}
.customer-profile-trigger {box-shadow:none!important;border-radius:9px!important}
.customer-profile-menu {border-radius:12px!important;box-shadow:0 12px 38px rgba(15,30,50,.16)!important}
.operations-command-card {padding:12px;border-radius:14px;box-shadow:var(--shadow-soft);background:var(--surface)}
.premium-control-deck .dashboard-kpi {background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:11px!important;box-shadow:none!important}
.premium-control-deck .dashboard-kpi strong {font-size:26px!important;color:var(--ink)!important}
.premium-control-deck .dashboard-kpi>span {color:var(--muted)!important}
.operations-command-card>header {color:var(--muted)!important}
.operations-command-card>header>div,.operations-command-card>header span {color:var(--muted)!important}
.premium-control-deck .dashboard-kpi small {font-size:10px!important}
.premium-control-deck .dashboard-kpi em {font-size:9px!important}
.premium-control-deck .compact-wallet-card {border-radius:11px!important;background:linear-gradient(120deg,#213959,#315884)!important;box-shadow:none!important}
.premium-channel-dock {margin-top:12px;border-radius:12px;background:var(--surface)}
.premium-channel-dock .dashboard-channel-list a {border-radius:10px!important;box-shadow:none!important}
.premium-channel-dock .dashboard-channel-list strong {font-size:12px}
.premium-channel-dock .dashboard-channel-list small {font-size:10px}
.customer-security-alert {border-radius:11px;box-shadow:none}
.catalogue-control-deck {gap:10px;padding:9px;border-radius:12px;box-shadow:var(--shadow-soft)}
.compact-type-tabs {padding:3px;border-radius:9px;background:var(--canvas)}
.compact-type-tabs a {min-width:72px;min-height:39px;padding:6px 9px;font-size:11px;border-radius:7px}
.compact-type-tabs a.active {color:var(--brand);background:var(--surface);box-shadow:0 1px 5px rgba(20,40,70,.08)}
.compact-type-tabs a.active i {color:var(--brand);background:var(--soft)}
.compact-catalog-toolbar input,.compact-catalog-toolbar select,.compact-catalog-toolbar .search-control {height:44px!important;font-size:12px!important;border-radius:8px!important}
.compact-catalogue-group {margin:20px 0!important;padding:0!important;border:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important}
.compact-catalogue-group>header {min-height:42px!important;margin-bottom:10px!important;padding:0 0 9px!important;border-bottom:1px solid var(--line)!important;background:transparent!important}
.compact-catalogue-group>header h2 {font-size:14px;letter-spacing:-.015em}
.compact-catalogue-group>header span {font-size:9px;color:var(--muted)}
.compact-catalogue-group>header .catalogue-group-mark {width:32px;height:32px;border:1px solid var(--line);border-radius:9px;color:var(--brand);background:var(--surface);font-size:12px}
.compact-service-grid {grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:start;gap:10px!important;padding:0!important;background:transparent!important}
/* Reset the legacy outer card padding as well as the inner button dimensions. */
.customer-body .compact-service-card {display:block;min-width:0;min-height:0!important;padding:0!important;grid-column:auto;border:1px solid var(--line)!important;border-radius:12px!important;background:var(--surface)!important;box-shadow:var(--shadow-soft)!important}
.customer-body .compact-service-card:hover {transform:none;border-color:color-mix(in srgb,var(--brand) 45%,var(--line))!important;box-shadow:0 4px 14px rgba(32,63,110,.08)!important}
.customer-body .compact-service-card-open {grid-template-columns:48px minmax(0,1fr) 18px!important;gap:10px;width:100%;min-height:94px!important;padding:12px!important;background:var(--surface)!important}
.customer-body .compact-service-card-open:hover {background:color-mix(in srgb,var(--brand) 3%,var(--surface))!important}
.customer-body .compact-service-media {width:48px!important;height:48px!important;border:1px solid var(--line);border-radius:10px!important;box-shadow:none}
.compact-service-media .service-media-fallback {position:relative;font-size:18px;background:linear-gradient(140deg,var(--soft),var(--surface));color:var(--brand)}
.compact-service-media .service-media-fallback small {display:none}
.customer-body .compact-service-card .service-card-content>strong {min-height:0;font-size:12px!important;line-height:1.4;overflow-wrap:anywhere;-webkit-line-clamp:2;color:var(--ink)}
.compact-service-card .service-card-kicker {gap:6px;margin-bottom:4px!important}
.compact-service-card .service-card-kicker>b {font-size:9px;color:var(--muted)}
.compact-service-card .service-card-kicker em {font-size:8px;padding:2px 4px}
.compact-service-card .service-card-bottom {gap:7px;flex-wrap:wrap;margin-top:6px!important}
.compact-service-card .service-card-bottom>b {padding:0;background:transparent;color:var(--success);font-size:12px;font-weight:750;white-space:nowrap}
.compact-service-card .service-card-bottom>small {font-size:9px;color:var(--muted);max-width:100%}
.compact-service-card-open>i {color:var(--muted);font-size:14px}
.group-price-badge {margin-left:4px;padding:2px 5px;border:0;border-radius:4px;color:var(--brand);background:var(--soft);font-size:8px}
.record-avatar[data-group-color] {background:var(--group-color,var(--brand))}

/* Short checkout: a single scrolling body with persistent header and actions. */
.customer-body .compact-order-dialog {width:min(740px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line)!important;border-radius:16px;box-shadow:0 24px 80px rgba(8,20,37,.3);color:var(--ink);background:var(--surface)!important}
.compact-order-dialog>form {display:flex;flex-direction:column;max-height:calc(100dvh - 34px);min-height:0}
.compact-order-header {flex:none;min-height:68px!important;gap:12px;padding:12px 16px!important;background:#1d3453!important}
.compact-order-header>div:nth-child(2) {min-width:0;flex:1}
.compact-order-header h2 {font-size:15px!important;line-height:1.4;overflow-wrap:anywhere;margin:3px 0!important}
.order-dialog-title-media {width:40px;height:40px;flex:0 0 40px;border-radius:9px}
.compact-order-header button {flex:0 0 34px;min-width:34px;height:34px}
.compact-order-body {min-height:0;max-height:none;overflow-y:auto;padding:14px 16px;display:grid;gap:12px;overscroll-behavior:contain}
.compact-order-facts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:9px;background:var(--canvas)}
.compact-order-facts>div {padding:9px 11px;min-width:0}
.compact-order-facts>div span {font-size:10px}
.compact-order-facts>div strong {font-size:12px;overflow-wrap:anywhere}
.compact-required-section {margin:0!important;padding:0!important;border:0!important;background:transparent!important}
.compact-required-section .order-section-heading {padding:0 0 8px!important;margin-bottom:10px;gap:8px;border-bottom:1px solid var(--line)}
.order-section-heading h3 {font-size:12px}
.order-section-heading p {font-size:10px;line-height:1.4}
.compact-field-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.compact-field-grid .field-wide {grid-column:1/-1}
.order-field-label {font-size:11px;font-weight:650}
.order-field input:not([type="checkbox"]),.order-field select,.order-field textarea {min-height:40px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:13px}
.order-field textarea {min-height:64px;max-height:140px}
.critical-info-control {border-radius:8px;background:var(--canvas)}
.critical-file-button {font-size:11px!important}
.critical-file-status,.field-help {font-size:10px!important;line-height:1.45}
.compact-checkout-row {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0!important;padding:10px 0 0!important}
.compact-quantity-section,.compact-order-summary {margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--canvas)!important}
.compact-quantity-section strong,.compact-order-summary strong {font-size:12px}
.compact-quantity-section span,.compact-order-summary span {font-size:10px}
.compact-secure-note {gap:6px;margin:0;border:0!important;background:transparent!important}
.compact-secure-note span {font-size:10px;line-height:1.5;background:transparent!important;color:var(--muted)}
.compact-service-details {padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--canvas)}
.compact-service-details summary {cursor:pointer;font-size:11px;font-weight:650}
.compact-service-description {font-size:11px;line-height:1.6;max-height:150px;overflow:auto;margin:8px 0 0;white-space:pre-line}
.compact-order-dialog>form>footer {flex:none;align-items:center;gap:8px;margin:0;padding:11px 16px;background:var(--surface)!important;border-top:1px solid var(--line);box-shadow:none}
.compact-footer-total {font-size:10px;margin-right:auto}
.compact-footer-total strong {font-size:15px;color:var(--ink)}
.compact-order-dialog footer .button {min-height:40px;font-size:12px}
.history-status-hero {background:#213959!important;box-shadow:none!important;border-radius:12px!important}
.history-detail-card,.order-detail-card {border-radius:12px!important}
.order-result-block pre {font-size:12px!important;line-height:1.6!important}
.automatic-bank-card {background:var(--surface)!important;border-color:var(--line)!important}
.bank-mail-security-banner {align-items:flex-start;line-height:1.5;background:var(--soft);border-color:var(--line);color:var(--ink)}
.bank-mail-security-banner span {font-size:11px;color:var(--muted)}
.bank-mail-tools>div span,.bank-mail-tools>div small,.bank-mail-log>div:not(.empty-inline) {font-size:11px}

/* Administration and sign-in use the same type, surfaces and spacing. */
.premium-admin-sidebar {background:#14243c!important;border-right:1px solid #243750;box-shadow:none!important}
.premium-admin-sidebar .side-nav a {font-size:12px!important;border-radius:8px!important}
.premium-admin-sidebar .side-nav>a.active,.premium-admin-sidebar .side-nav-group>a.active {background:#2a4468!important;box-shadow:none!important}
.premium-admin-sidebar .side-nav p {color:#91a4bd;font-size:9px;letter-spacing:.12em}
.premium-admin-topbar {background:var(--surface)!important;border-bottom:1px solid var(--line);box-shadow:none!important}
.admin-body .content {padding:24px;max-width:1600px;margin:0 auto}
.admin-body .topbar-context strong {font-size:16px}
.admin-body .metric-card,.admin-body .kpi-card,.admin-body .stat-card {border-radius:12px!important;box-shadow:var(--shadow-soft)!important}
.admin-body .panel>header {background:var(--surface);border-bottom:1px solid var(--line)}
.admin-body .panel>header h2 {font-size:15px}
.admin-body .panel>header p {font-size:11px;line-height:1.5;color:var(--muted)}
.admin-body .editor-drawer {border-radius:16px 0 0 16px;background:var(--surface)}
.admin-body .editor-drawer input,.admin-body .editor-drawer select,.admin-body .editor-drawer textarea {font-size:13px}
.auth-story {background:linear-gradient(145deg,#14243c,#294669)!important}
.auth-panel {background:var(--surface)!important;color:var(--ink)}
.auth-panel h1 {font-size:30px;letter-spacing:-.04em}
.auth-panel input {min-height:46px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:14px}
.auth-panel .button-primary {background:#3866d9;border-color:#3866d9;border-radius:9px;color:#fff}
.error-page {display:grid;place-items:center;min-height:100dvh;margin:0;padding:24px}
.error-card {width:min(480px,100%);padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-soft)}
.error-card h1 {margin:12px 0 20px;font-size:24px}
.error-card>strong {color:var(--brand);font-size:13px;letter-spacing:.08em}
@media(max-width:1040px) {.compact-service-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:820px) {
    .customer-content,.admin-body .content {padding:20px 16px 36px}
    .premium-command-bar {height:64px!important;padding-inline:16px!important}
    .premium-customer-nav {background:#13233c!important;border-color:#334965!important}
    .compact-field-grid {grid-template-columns:1fr}
    .compact-catalog-toolbar {grid-template-columns:minmax(0,1fr)}
    .app-body .workspace-heading h1,.premium-dashboard-titlebar h1 {font-size:25px!important}
}
@media(max-width:560px) {
    .compact-service-grid {grid-template-columns:minmax(0,1fr)!important}
    .customer-content,.admin-body .content {padding-inline:12px}
    .customer-body .compact-service-card-open {min-height:90px!important}
    .compact-type-tabs {grid-template-columns:repeat(4,minmax(0,1fr))}
    .compact-type-tabs a {min-width:0;padding-inline:5px;font-size:10px}
    .customer-body .compact-order-dialog {width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:12px}
    .compact-order-dialog>form {max-height:calc(100dvh - 18px)}
    .compact-order-header {padding:11px 12px!important}
    .compact-order-body {padding:12px;gap:10px}
    .compact-order-facts>div {padding:8px}
    .compact-order-facts>div span {font-size:9px}
    .compact-order-facts>div strong {font-size:11px}
    .compact-checkout-row {grid-template-columns:1fr}
    .compact-order-dialog>form>footer {padding:10px 12px;flex-wrap:wrap}
    .compact-footer-total {flex:1 0 100%;display:flex;justify-content:space-between;align-items:center}
    .compact-order-dialog footer .button {flex:1}
    .bank-mail-tools form {flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* V11: full-wordmark branding and a legible shared visual system. */
html {color-scheme:light}
html[data-theme="dark"] {color-scheme:dark}
@media(prefers-color-scheme:dark) {html[data-theme="system"] {color-scheme:dark}}
html body .premium-command-bar {background:#13233c!important}
.app-body .nav-badge {background:#ba2943!important;color:#fff!important}
.app-body .status-pending,.app-body .status-processing {color:#835008;background:#fff2d7}
.app-body .customer-profile-menu,.app-body .customer-profile-menu:before {color:var(--ink);background:var(--surface);border-color:var(--line)}
.app-body .customer-profile-menu>a,.app-body .customer-profile-menu form button {color:var(--ink)}
.app-body .customer-profile-menu :is(small,header small) {color:var(--muted);font-size:11px}
.app-body .customer-profile-menu>a:hover,.app-body .customer-profile-menu form button:hover {background:var(--canvas)}
.app-body .customer-profile-menu>header {background:var(--canvas)}
.app-body .customer-profile-trigger small,.app-body .header-wallet small {color:#b7c6da;font-size:10px}
.premium-admin-sidebar :is(.admin-workspace-label small,.side-subnav a,.sidebar-user small,.brand small) {color:#afbdd0;font-size:11px}
.app-body .dashboard-channel-list a>em {color:var(--muted);font-size:11px}
.app-body .automatic-bank-card>footer {background:var(--soft);color:var(--muted);font-size:11px;line-height:1.6}
.app-body .automatic-bank-card>footer b {color:var(--ink)}
.app-body .automatic-bank-grid :is(span,small) {font-size:11px;line-height:1.5}
.app-body .customer-security-alert {background:color-mix(in srgb,var(--danger) 9%,var(--surface));border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
.app-body .customer-security-alert strong {color:var(--danger);font-size:12px}
.app-body .customer-security-alert p {color:var(--muted);font-size:12px}
.app-body .settings-section-nav a {background:transparent;box-shadow:none;color:var(--muted)}
.app-body .settings-section-nav a.active {background:var(--soft);color:var(--brand)}
.app-body :is(.bank-mail-tools,.inline-test-form) input {background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.app-body input::file-selector-button {padding:7px 10px;margin-right:10px;border:1px solid var(--line);border-radius:6px;background:var(--soft);color:var(--ink);font:inherit;cursor:pointer}
.app-body .record-danger-row {background:color-mix(in srgb,var(--danger) 8%,var(--surface));border-color:color-mix(in srgb,var(--danger) 30%,var(--line))}
.app-body .compact-service-card:focus-within {outline:2px solid var(--brand);outline-offset:2px}
.app-body .settings-form .check-row {display:flex!important;align-items:center;gap:10px;grid-template-columns:none}
.app-body .settings-form .check-row input[type="checkbox"] {width:17px;height:17px;min-height:0;flex:0 0 17px;margin:0;accent-color:#3866d9}
html {--logo-slot-width:208px;--logo-slot-height:56px}
html body .customer-brand.brand-has-image {
    display:flex!important;align-items:center!important;width:var(--logo-slot-width)!important;
    min-width:0!important;max-width:var(--logo-slot-width)!important;flex:0 0 var(--logo-slot-width)!important;
    height:var(--logo-slot-height)!important;padding:0!important;margin-right:16px;border:0!important;
}
html body .brand .brand-symbol.has-image,
html body .customer-brand.brand-has-image .brand-symbol.has-image,
html body .premium-admin-sidebar .brand-symbol.has-image,
html body .auth-panel-brand .brand-symbol.has-image {
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;min-width:0!important;max-width:var(--logo-slot-width)!important;
    height:var(--logo-slot-height)!important;flex:0 1 var(--logo-slot-width)!important;
    padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;
}
html body .brand .brand-symbol.has-image img,
html body .customer-brand.brand-has-image .brand-symbol.has-image img,
html body .premium-admin-sidebar .brand-symbol.has-image img {
    display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
    object-fit:contain!important;object-position:center!important;filter:none!important;border-radius:0!important;
}
html body .brand .brand-symbol.has-image{overflow:hidden!important;padding:4px 6px!important}
html body .brand .brand-symbol.has-image img{transform:none!important;clip-path:none!important}
html body .brand .brand-symbol.has-image.brand-logo-mark {width:46px!important;max-width:46px!important;height:46px!important;flex:0 0 46px!important}
html body .customer-brand.brand-has-image:has(.brand-logo-mark) {gap:10px!important}
html body .customer-brand.brand-has-image:has(.brand-logo-mark) .brand-copy {display:block!important}
.premium-admin-sidebar>.brand:has(.has-image) {height:76px!important;padding:8px 0!important;justify-content:center}
.premium-admin-sidebar .brand-symbol.has-image {--logo-slot-width:182px;--logo-slot-height:56px}
.auth-story .brand:has(.has-image),.auth-panel-brand:has(.has-image) {max-width:260px;width:100%;--logo-slot-width:260px;--logo-slot-height:76px}
html body .auth-story .brand:has(.has-image) {max-width:260px!important;flex:0 1 260px!important}
html body .brand .brand-symbol.has-image[data-logo-tone="light"],.brand-upload-mark[data-logo-tone="light"] {background:#fff!important;border-radius:6px!important}
html body .brand .brand-symbol.has-image[data-logo-tone="dark"],.brand-upload-mark[data-logo-tone="dark"] {background:#13233c!important}
html body :is(.auth-story,.premium-admin-sidebar) .brand .brand-symbol.has-image[data-logo-tone="dark"] {background:transparent!important}
.brand-upload-preview {align-items:center;gap:18px;flex-wrap:wrap}
.brand-upload-preview .brand-upload-mark {display:flex;align-items:center;justify-content:center;width:260px!important;max-width:100%!important;height:84px!important;flex:0 1 260px!important;padding:0!important;border:0!important;border-radius:8px;background:#13233c}
.brand-upload-preview .brand-upload-mark img {width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center}
.brand-upload-mark[data-logo-tone="transparent"] {background:var(--canvas)!important}
.app-body .settings-section-nav {border:1px solid var(--line);border-radius:11px;background:var(--surface);box-shadow:none}
.app-body .settings-section-nav a {font-size:12px;line-height:1.5}
.app-body .settings-section-nav a.active {color:var(--brand);background:var(--soft);border-radius:8px}
.app-body .panel>header a,.app-body .table-link {font-size:11px;line-height:1.5}
.app-body :is(.field-help,.settings-form label>small,.empty-inline) {font-size:11px!important;line-height:1.6}
.app-body :is(.form-grid,.settings-form) label>span {font-size:12px!important;line-height:1.45}
.customer-body .compact-service-card .service-card-content>strong {font-size:13px!important;line-height:1.45}
.compact-service-card .service-card-kicker>b,.compact-service-card .service-card-bottom>small {font-size:10px!important}
.compact-service-card .service-card-bottom>b {font-size:13px!important}
.compact-catalogue-group>header span {font-size:10px}
.compact-catalogue-group>header h2 {font-size:15px}
.operations-command-card>header :is(strong,a) {font-size:11px!important;color:var(--muted)!important}
.operations-command-card>header nav .command-new-order {color:#fff!important;background:#3866d9!important;border-color:#3866d9!important}
.customer-body .compact-order-facts>div strong,.customer-body .compact-order-summary strong {font-size:13px}
.customer-body .compact-order-facts>div span,.customer-body .compact-order-summary span {font-size:11px}
.customer-body .compact-order-header h2 {font-size:16px!important}
.app-body :is(.system-settings-card,.professional-settings-card)>header h2 {font-size:16px!important}
.app-body :is(.system-settings-card,.professional-settings-card)>header p {font-size:12px!important;line-height:1.6}
.app-body .table-panel td {font-size:13px!important}
.app-body input::placeholder,.app-body textarea::placeholder {color:var(--muted);opacity:1}
@media(max-width:820px) {
    html {--logo-slot-width:152px;--logo-slot-height:46px}
    html body .customer-profile-trigger {width:46px!important;min-width:46px!important;max-width:46px!important;padding:5px!important}
    .customer-profile-trigger .customer-profile-copy,.customer-profile-trigger .profile-chevron {display:none!important}
    .customer-menu-trigger {flex:0 0 36px;margin-right:7px}
    .customer-account .preference-button {display:grid}
    .customer-account {gap:5px}
    html body .customer-brand.brand-has-image {margin-right:6px}
    .brand-upload-preview .brand-upload-mark {height:74px!important}
    .app-body :is(input,select,textarea) {font-size:16px!important}
}
@media(max-width:380px) {
    html {--logo-slot-width:112px;--logo-slot-height:40px}
    html body .premium-command-bar {padding-inline:12px!important}
    .customer-menu-trigger {flex-basis:32px;width:32px;margin-right:4px}
    .customer-account .icon-button {width:32px}
    .premium-account-cluster {gap:4px!important}
    .customer-body .compact-service-card .service-card-content>strong {font-size:12px!important}
}

/* Semantic states also follow the operating-system dark preference. */

html[data-theme="dark"] .app-body :is(.status-pending,.status-processing,.featured) {color:#ffd28a!important;background:#47351e!important;border-color:#6a512f!important}
html[data-theme="dark"] .app-body :is(.status-completed,.status-paid,.status-active,.status-approved) {color:#83e2bf!important;background:#163d34!important;border-color:#2a5b4d!important}
html[data-theme="dark"] .app-body :is(.status-failed,.status-rejected,.status-cancelled,.status-inactive) {color:#ffacb9!important;background:#482632!important;border-color:#69404b!important}
html[data-theme="dark"] .app-body :is(.status-pending_review,.status-open) {color:#b5caff!important;background:#263b60!important}
html[data-theme="dark"] .app-body :is(.pagination a,.pagination span[aria-current]>span,.order-total,.order-dialog footer) {color:var(--ink);background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .app-body :is(.admin-channel-rail i,.dashboard-channel-list a>i,.metric-icon.revenue) {color:#b4aaff!important;background:#302e51!important}
html[data-theme="dark"] .app-body :is(.admin-channel-rail .channel-server i,.dashboard-channel-list .channel-server>i,.metric-icon.positive) {color:#7ce1bd!important;background:#163d34!important}
html[data-theme="dark"] .app-body :is(.admin-channel-rail .channel-remote i,.dashboard-channel-list .channel-remote>i) {color:#ffd28a!important;background:#47351e!important}
html[data-theme="dark"] .app-body :is(.detail-card dt,.finance-summary span,.payment-summary span) {color:var(--muted)}
html[data-theme="dark"] .app-body .customer-profile-menu form button strong {color:var(--danger)}

@media(prefers-color-scheme:dark) {

html[data-theme="system"] .app-body :is(.status-pending,.status-processing,.featured) {color:#ffd28a!important;background:#47351e!important;border-color:#6a512f!important}
html[data-theme="system"] .app-body :is(.status-completed,.status-paid,.status-active,.status-approved) {color:#83e2bf!important;background:#163d34!important;border-color:#2a5b4d!important}
html[data-theme="system"] .app-body :is(.status-failed,.status-rejected,.status-cancelled,.status-inactive) {color:#ffacb9!important;background:#482632!important;border-color:#69404b!important}
html[data-theme="system"] .app-body :is(.status-pending_review,.status-open) {color:#b5caff!important;background:#263b60!important}
html[data-theme="system"] .app-body :is(.pagination a,.pagination span[aria-current]>span,.order-total,.order-dialog footer) {color:var(--ink);background:var(--surface);border-color:var(--line)}
html[data-theme="system"] .app-body :is(.admin-channel-rail i,.dashboard-channel-list a>i,.metric-icon.revenue) {color:#b4aaff!important;background:#302e51!important}
html[data-theme="system"] .app-body :is(.admin-channel-rail .channel-server i,.dashboard-channel-list .channel-server>i,.metric-icon.positive) {color:#7ce1bd!important;background:#163d34!important}
html[data-theme="system"] .app-body :is(.admin-channel-rail .channel-remote i,.dashboard-channel-list .channel-remote>i) {color:#ffd28a!important;background:#47351e!important}
html[data-theme="system"] .app-body :is(.detail-card dt,.finance-summary span,.payment-summary span) {color:var(--muted)}
html[data-theme="system"] .app-body .customer-profile-menu form button strong {color:var(--danger)}
}

/* V14 mobile authentication refinement: compact brand, trust strip and form. */
@media(max-width:820px){
    html body .auth-panel-v4{min-height:100dvh;padding:54px 14px 22px!important;place-items:start center;align-content:start}
    html body .auth-panel-v4 .auth-panel-inner{width:min(410px,100%);margin:0 auto!important}
    html body .auth-panel-brand.brand-has-image{display:flex!important;width:132px!important;min-width:132px!important;max-width:132px!important;height:38px!important;min-height:38px!important;max-height:38px!important;flex:0 0 132px!important;margin:0 0 10px!important;--logo-slot-width:132px;--logo-slot-height:38px}
    html body .auth-panel-brand.brand-has-image .brand-symbol.has-image{width:132px!important;min-width:132px!important;max-width:132px!important;height:38px!important;min-height:38px!important;max-height:38px!important;flex:0 0 132px!important}
    html body .auth-panel-brand.brand-has-image .brand-symbol.has-image img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:left center!important}
    html body .auth-panel-v4 .auth-trust-line{min-height:44px;margin-bottom:9px;padding:7px 10px;border-radius:10px}
    html body .auth-panel-v4 .auth-trust-line>span{width:30px;height:30px;border-radius:8px}
    html body .auth-panel-v4 .auth-trust-line .ui-icon{width:15px}
    html body .auth-panel-v4 .auth-trust-line strong{font-size:8px}
    html body .auth-panel-v4 .auth-trust-line small{margin-top:2px;font-size:7px}
    html body .auth-panel-v4 .auth-card{padding:18px 16px;border-radius:15px;box-shadow:0 14px 34px rgba(24,36,62,.08)}
    html body .auth-panel-v4 .auth-card-head{margin-bottom:15px}
    html body .auth-panel-v4 .auth-card-head h2{margin-bottom:5px;font-size:23px!important}
    html body .auth-panel-v4 .auth-card-head>p:last-child{font-size:10px;line-height:1.45}
    html body .auth-panel-v4 .form-stack{gap:10px}
    html body .auth-panel-v4 .form-stack label:not(.check-row){gap:5px}
    html body .auth-panel-v4 .form-stack label>span{font-size:10px!important}
    html body .auth-panel-v4 .form-stack input{min-height:43px!important;padding:9px 11px!important;border-radius:9px}
    html body .auth-panel-v4 .auth-card .button{min-height:43px!important}
    html body .auth-panel-v4 .check-row{font-size:10px}
    html body .auth-panel-v4 .auth-switch{margin-top:12px;font-size:9px}
    html body .auth-panel-v4 .auth-privacy-note{margin-top:9px;font-size:7px}
    html body .auth-panel-v4 .auth-locale{right:12px;top:10px}
    html body .auth-panel-v4 .auth-locale button{min-height:34px;padding:0 9px}
}

/* V17: one predictable, uncropped wordmark on the mobile sign-in screen. */
@media(max-width:820px){
    html body .auth-panel-brand:has(.mobile-brand-image-only){width:156px!important;max-width:156px!important;flex-basis:156px!important}
    html body .auth-panel-brand>.mobile-brand-treatment.mobile-brand-image-only{display:flex!important;width:100%!important;height:38px!important;padding:0!important;background:transparent!important}
    html body .auth-panel-brand .mobile-brand-image-only>.mobile-brand-emblem.has-uploaded-logo{display:flex!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;height:38px!important;flex:1 1 100%!important;padding:3px 6px!important;border:0!important;border-radius:8px!important;background:#13233c!important;box-shadow:none!important}
    html body .auth-panel-brand .mobile-brand-image-only>.mobile-brand-emblem.has-uploaded-logo:after{content:none!important}
    html body .auth-panel-brand .mobile-brand-image-only>.mobile-brand-emblem.has-uploaded-logo img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:left center!important}
}
@media(max-width:380px){
    html body .auth-panel-v4{padding-top:49px!important}
    html body .auth-panel-brand.brand-has-image{width:116px!important;min-width:116px!important;max-width:116px!important;height:34px!important;min-height:34px!important;max-height:34px!important;flex-basis:116px!important;--logo-slot-width:116px;--logo-slot-height:34px}
    html body .auth-panel-brand.brand-has-image .brand-symbol.has-image{width:116px!important;min-width:116px!important;max-width:116px!important;height:34px!important;min-height:34px!important;max-height:34px!important;flex-basis:116px!important}
    html body .auth-panel-v4 .auth-card{padding:16px 14px}
    html body .auth-panel-v4 .auth-card-head h2{font-size:21px!important}
}

/* V14 fixed header treatment: the uploaded logo remains available outside the compact header. */
.brand>.mobile-brand-treatment{display:none;align-items:center;min-width:0}
.header-brand-setting-note{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;align-items:center;min-height:64px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;color:var(--ink);background:var(--soft)}
.header-brand-setting-note .mobile-brand-emblem{display:grid;place-items:center;width:40px;height:40px;border:1px solid color-mix(in srgb,var(--brand) 20%,var(--line));border-radius:11px;color:#fff;background:linear-gradient(145deg,#4268d3,#24488f);box-shadow:0 7px 18px rgba(38,73,151,.18)}
.header-brand-setting-note .mobile-brand-emblem .ui-icon{width:18px;height:18px}
.header-brand-setting-note strong,.header-brand-setting-note small{display:block}.header-brand-setting-note strong{font-size:11px}.header-brand-setting-note small{margin-top:3px;color:var(--muted);font-size:8px;line-height:1.45}
@media(max-width:820px){
    html body .auth-panel-brand{width:172px!important;min-width:0!important;max-width:172px!important;height:40px!important;min-height:40px!important;max-height:40px!important;flex:0 1 172px!important;--logo-slot-width:172px;--logo-slot-height:40px}
    html body .auth-panel-brand.auth-panel-brand>.brand-symbol,html body .auth-panel-brand.auth-panel-brand>.brand-copy{display:none!important}
    html body .auth-panel-brand>.mobile-brand-treatment{display:flex!important;gap:8px;width:100%;height:40px;color:#13233c}
    .auth-panel-brand .mobile-brand-emblem{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:9px;color:#fff;background:linear-gradient(145deg,#3866d9,#244baf);box-shadow:0 6px 15px rgba(45,86,190,.2)}
    .auth-panel-brand .mobile-brand-emblem .ui-icon{width:16px;height:16px}
    .auth-panel-brand .mobile-brand-treatment>strong{display:grid;min-width:0;line-height:1.05}
    .auth-panel-brand .mobile-brand-treatment b{overflow:hidden;font-size:13px;letter-spacing:-.02em;text-overflow:ellipsis;white-space:nowrap}
    .auth-panel-brand .mobile-brand-treatment small{overflow:hidden;margin-top:3px;color:#60708a;font-size:7px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
}
