/* Shared screen primitives. Print documents intentionally retain their own styles.
   Breakpoints: compact <=700, navigation <=980, wide >=1280. */
@media screen {
/* Only uploaded SVG brand images become white; photos and raster logos stay unchanged. */
html[data-surface][data-theme="dark"] :is(.header .brand,.footer .brand,.visual) img[src$=".svg" i] {
    filter:brightness(0) invert(1)!important;
}
/* Branding belongs to the light toolbar, never a separate sidebar box. */
html[data-surface="admin"] .admin-top {
    --ui-surface:#faf9f6; --ui-subtle:#f0f4f3; --ui-ink:#182b25;
    --ui-muted:#52665d; --ui-border:#dce4e0; --ui-primary:#245c43;
    background:#faf9f6!important; color:#182b25!important;
    flex-wrap:wrap; height:auto; min-height:78px; padding-block:12px;
}
html[data-surface="admin"] .admin-top-brand {
    display:flex; align-items:center; gap:8px; flex:0 0 auto;
    padding:2.25px 0; color:#182b25;
}
html[data-surface="admin"] .admin-top-brand img {
    display:block; width:auto; max-width:180px; height:45px;
    object-fit:contain; filter:none!important;
}
html[data-surface="admin"] .admin-top-brand small { display:block; color:#52665d; }
html[data-surface="admin"] .admin-top .admin-user small { color:#52665d; }
@media(max-width:700px) {
    html[data-surface="admin"] .admin-top-brand img { max-width:150px; height:36px; }
    html[data-surface="admin"] .admin-top .quick-search { order:3; flex-basis:100%; max-width:none; }
}
html[data-surface] {
    --ui-bg:#f5f7f8; --ui-surface:#fff; --ui-subtle:#f0f4f3;
    --ui-ink:#182b25; --ui-muted:#52665d; --ui-border:#dce4e0;
    --ui-primary:#245c43; --ui-primary-hover:#194731;
    --ui-success:#17613b; --ui-success-bg:#eaf6ef;
    --ui-danger:#a52736; --ui-danger-bg:#fff0f1;
    --ui-warning:#805214; --ui-warning-bg:#fff6df;
    --ui-info:#245d89; --ui-info-bg:#edf5fc;
    --ui-space-1:4px; --ui-space-2:8px; --ui-space-3:12px;
    --ui-space-4:16px; --ui-space-6:24px; --ui-space-8:32px;
    --ui-radius-sm:8px; --ui-radius:12px; --ui-radius-lg:16px;
    --ui-font-body:14px; --ui-font-caption:13px; --ui-font-title:28px; --ui-leading:1.5;
    --ui-shadow:0 1px 3px #142c2210;
    --ui-focus:0 0 0 3px color-mix(in srgb,var(--ui-primary) 24%,transparent);
    --ui-duration:140ms; --ui-overlay:180;
    --studio-bg:var(--ui-bg); --studio-surface:var(--ui-surface);
    --studio-ink:var(--ui-ink); --studio-muted:var(--ui-muted); --studio-line:var(--ui-border);
}
html[data-surface][data-theme="dark"] {
    --ui-bg:#171e1c; --ui-surface:#202a26; --ui-subtle:#29362f;
    --ui-ink:#edf4ef; --ui-muted:#b1c3b8; --ui-border:#3d5146;
    --ui-primary:#8bd3ac; --ui-primary-hover:#a3e0bf;
    --ui-success:#a0dfb8; --ui-success-bg:#243d2f;
    --ui-danger:#ffb0b8; --ui-danger-bg:#432a30;
    --ui-warning:#f5d295; --ui-warning-bg:#3d3424;
    --ui-info:#acd4f3; --ui-info-bg:#253947;
}
/* Legacy page-local cards must change surface and foreground together.
   Do not lighten --dark: it is also used behind white text in banners. */
html[data-surface][data-theme="dark"] :is(.sale-step,.shareholder-card,.entry-section,.advanced,.order-card,.sales-group-card,.group-nav a,.mobile-about-menu a,.mini-btn,.progress-item) {
    background:var(--ui-surface)!important; color:var(--ui-ink)!important; border-color:var(--ui-border)!important;
}
html[data-surface][data-theme="dark"] :is(.group-hero,.story-art) { background:linear-gradient(135deg,var(--ui-subtle),var(--ui-surface))!important; }
html[data-surface][data-theme="dark"] .story-note { background:var(--ui-surface)!important; color:var(--ui-ink)!important; }
html[data-surface][data-theme="dark"] :is(.step-no,.entry-step,.shareholder-title strong,.use-customer,.holder-card strong,.mini-btn,.logout-link,.sales-group-count,.sales-group-link,.trust-item strong,.story-note strong,.check i,.usage-guide a,.easy-actions span,.details-box summary,.package-count,.required) { color:var(--ui-primary)!important; }
html[data-surface][data-theme="dark"] :is(.animal-stat,.holder-card,.account-share,.order-meta span) { background:var(--ui-subtle); }
html[data-surface][data-theme="dark"] :is(.entry-intro,.choice:has(input:checked),.publish-choice:has(input:checked),.sales-group-card.active,.group-nav a.active,.progress-item.active,.share-slot.sold) { background:var(--ui-success-bg)!important; color:var(--ui-success)!important; border-color:var(--ui-primary)!important; }
html[data-surface][data-theme="dark"] :is(.share-slot.available,.progress-item.done,.payment-state.paid) { background:var(--ui-success-bg)!important; color:var(--ui-success)!important; }
html[data-surface][data-theme="dark"] :is(.duplicate-warning,.payment-state.deposit,.payment-state.partial) { background:var(--ui-warning-bg)!important; color:var(--ui-warning)!important; }
html[data-surface][data-theme="dark"] #supplier-create-errors { color:var(--ui-danger)!important; }
html[data-surface][data-theme="dark"] :is(.media-drop,.media-card,.media-select,.media-action,.filter-link:not(.active)) { background:var(--ui-surface)!important; color:var(--ui-ink)!important; border-color:var(--ui-border)!important; }
html[data-surface][data-theme="dark"] :is(.media-counter,.order-summary-chevron,.sales-group-image,.photo,.animal-placeholder,.step) { color:var(--ui-primary)!important; }
html[data-surface][data-theme="dark"] .media-drop svg { stroke:var(--ui-primary); }
html[data-surface][data-theme="dark"] :is(.media-error,.media-existing-remove,.media-action.remove) { color:var(--ui-danger)!important; }
html[data-surface][data-theme="dark"] [style*="color:#195438"] { color:var(--ui-success)!important; }
html[data-surface][data-theme="dark"] [style*="color:#a33"] { color:var(--ui-danger)!important; }
html[data-surface][data-theme="dark"] [style*="color:var(--red)"] { color:var(--ui-primary)!important; }
html[data-surface][data-theme="dark"] a[style*="color:var(--accent-dark)"],
html[data-surface][data-theme="dark"] strong[style*="color:var(--accent-dark)"] { color:var(--ui-primary)!important; }
html[data-surface] body { color:var(--ui-ink); line-height:var(--ui-leading); }
html[data-surface="admin"] body { background:var(--ui-bg)!important; font-size:var(--ui-font-body); }
html[data-surface="admin"] .main { padding:28px; }
html[data-surface="admin"] .topline { align-items:center; margin-bottom:24px; }
html[data-surface="admin"] .topline h1 { font-size:var(--ui-font-title); line-height:1.2; margin:6px 0; }
html[data-surface="admin"] .topline p { font-size:14px; color:var(--ui-muted)!important; max-width:70ch; }
html[data-surface="admin"] :is(.panel,.card,.overview-chart) {
    background:var(--ui-surface)!important; color:var(--ui-ink)!important;
    border:1px solid var(--ui-border)!important; border-radius:var(--ui-radius)!important;
    box-shadow:var(--ui-shadow)!important;
}
html[data-surface="admin"] .panel-head { border-color:var(--ui-border); }
html[data-surface="admin"] .panel-head h2 { font-size:18px; }
html[data-surface="admin"] :is(.metric,.overview-stat strong,.price) { font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
html[data-surface="admin"] :is(.eyebrow,.nav-group) { letter-spacing:.08em; }
html[data-surface="admin"] .admin-top { background:var(--ui-surface)!important; border-color:var(--ui-border); gap:16px; }
html[data-surface="admin"] .side nav :is(a,button) { font-weight:600!important; }
html[data-surface="admin"] .side .side-main-nav a[aria-current="page"] { font-weight:700!important; }
html[data-surface] :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]):not([type="range"]) {
    background:var(--ui-surface)!important; color:var(--ui-ink)!important;
    border:1px solid var(--ui-border)!important; border-radius:var(--ui-radius-sm)!important;
    box-shadow:none; min-height:44px; font-size:16px; line-height:1.4;
}
html[data-surface] :is(input,textarea)::placeholder { color:var(--ui-muted); opacity:1; }
html[data-surface] label { color:var(--ui-ink); font-size:13px; font-weight:600; }
html[data-surface] :is(input,select,textarea):focus-visible {
    outline:2px solid var(--ui-primary)!important; outline-offset:2px; box-shadow:var(--ui-focus)!important;
}
html[data-surface] :is(a,button,summary,[tabindex]):focus-visible { outline:2px solid var(--ui-primary)!important; outline-offset:3px; }
html[data-surface] :is(input,select,textarea)[aria-invalid="true"] { border-color:var(--ui-danger)!important; }
html[data-surface] .field-error { display:block; color:var(--ui-danger); font-size:13px; margin:6px 0 0; line-height:1.5; }
html[data-surface] .btn {
    min-height:44px; padding:10px 16px; gap:8px; border-radius:var(--ui-radius-sm)!important;
    background:var(--ui-primary)!important; color:#fff!important; font-size:14px; font-weight:600!important;
    box-shadow:none!important; text-align:center; transition:background var(--ui-duration),border-color var(--ui-duration);
}
html[data-surface][data-theme="dark"] .btn { color:#142b20!important; }
html[data-surface] .btn:hover { background:var(--ui-primary-hover)!important; transform:none; filter:none; }
html[data-surface] .btn.light { background:var(--ui-surface)!important; color:var(--ui-primary)!important; border:1px solid var(--ui-border)!important; }
html[data-surface] .btn.light:hover { background:var(--ui-subtle)!important; }
html[data-surface] .btn.outline { background:transparent!important; color:inherit!important; border:1px solid currentColor!important; }
html[data-surface] .btn.red { background:var(--ui-danger-bg)!important; color:var(--ui-danger)!important; border:1px solid var(--ui-danger)!important; }
html[data-surface] :is(button,input,select,textarea):disabled { opacity:.55; cursor:not-allowed; }
html[data-surface] input[readonly] { background:var(--ui-subtle)!important; }
html[data-surface] .alert { background:var(--ui-success-bg)!important; color:var(--ui-success)!important; border:1px solid currentColor!important; border-radius:var(--ui-radius-sm); font-weight:500; }
html[data-surface] :is(.alert.errors,.error) { background:var(--ui-danger-bg)!important; color:var(--ui-danger)!important; }
html[data-surface="admin"] table { font-size:14px; font-variant-numeric:tabular-nums; }
html[data-surface="admin"] th { background:var(--ui-subtle)!important; color:var(--ui-muted)!important; font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; padding:12px; white-space:nowrap; }
html[data-surface="admin"] td { padding:14px 12px; border-color:var(--ui-border)!important; vertical-align:middle; }
html[data-surface="admin"] tbody tr:hover td { background:color-mix(in srgb,var(--ui-subtle) 50%,transparent); }
html[data-surface="admin"] :is(th,td).numeric { text-align:right; white-space:nowrap; }
html[data-surface="admin"] .admin-table-scroll { border:1px solid var(--ui-border); border-radius:var(--ui-radius-sm); max-width:100%; overscroll-behavior-x:contain; }
html[data-surface="admin"] .admin-table-scroll table { margin:0; }
html[data-surface="admin"] .badge { font-size:12px; font-weight:600!important; letter-spacing:0; padding:4px 9px; }
html[data-surface="admin"] :is(.settings-section,.upload,.preview) { background:var(--ui-subtle)!important; border-color:var(--ui-border)!important; color:var(--ui-ink)!important; }
html[data-surface="admin"] .settings-section summary { padding:16px; }
html[data-surface="admin"] .sticky-save { background:#193d2d!important; border:1px solid #476c58; border-radius:var(--ui-radius); }
html[data-surface="admin"] .sticky-save small { color:#cfdfd4!important; }
html[data-surface="admin"] .payment-edit-box { z-index:var(--ui-overlay); max-width:calc(100vw - 24px); max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
html[data-surface="admin"] .dashboard-v2 .overview-stat { border-radius:var(--ui-radius)!important; }
html[data-surface="admin"] .dashboard-v2 :is(.overview-intro p,.overview-note,.overview-stat small,.overview-stat span) { font-size:13px; }
html[data-surface="admin"] .dashboard-v2 .overview-tag { font-size:13px; white-space:normal; }
html[data-surface="admin"] .dashboard-v2 .dashboard-collection .overview-ring { background:conic-gradient(var(--ui-primary) calc(var(--progress)*1%),var(--ui-border) 0)!important; }
html[data-surface="admin"] .order-state-pending { --state-ink:var(--ui-warning); --state-bg:var(--ui-warning-bg); --state-line:var(--ui-warning); }
html[data-surface="admin"] .order-state-confirmed { --state-ink:var(--ui-success); --state-bg:var(--ui-success-bg); --state-line:var(--ui-success); }
html[data-surface="admin"] .order-state-cancelled { --state-ink:var(--ui-danger); --state-bg:var(--ui-danger-bg); --state-line:var(--ui-danger); }
html[data-surface="admin"] .order-state-completed { --state-ink:var(--ui-info); --state-bg:var(--ui-info-bg); --state-line:var(--ui-info); }
html[data-surface="admin"] :is(.order-status,.status-filter) select { background:var(--state-bg,var(--ui-surface))!important; color:var(--state-ink,var(--ui-ink))!important; }
html[data-surface="admin"] .order-status select { border:0!important; }
html[data-surface="admin"] .order-panel { padding:0!important; }
html[data-surface] .submission-status { color:var(--ui-muted); font-size:13px; margin:12px 0 0; }
html[data-surface] button[aria-disabled="true"] { opacity:.65; cursor:wait; }
html[data-surface="auth"] body { background:var(--ui-bg); }
html[data-surface="auth"] .wrap { background:var(--ui-surface); color:var(--ui-ink); border-color:var(--ui-border); border-radius:var(--ui-radius-lg); box-shadow:var(--ui-shadow); }
html[data-surface="auth"] .visual { background:#153e2d; }
html[data-surface="auth"] .form>p { color:var(--ui-muted); }
.skip-link { position:fixed; left:16px; top:-100px; z-index:999; padding:12px 18px; background:var(--ui-surface); color:var(--ui-ink); border:2px solid var(--ui-primary); border-radius:8px; }
.skip-link:focus { top:12px; }
@media(max-width:980px) { html[data-surface="admin"] .admin-top { padding:12px 16px; height:auto; min-height:72px; flex-wrap:wrap; } }
@media(max-width:700px) {
    html[data-surface="admin"] .main { padding:20px 14px; }
    html[data-surface="admin"] .topline { align-items:stretch; gap:16px; }
    html[data-surface="admin"] .topline h1 { font-size:25px; }
    html[data-surface="admin"] :is(.panel,.card) { padding:16px; }
    html[data-surface] .field { min-width:min(100%,220px); }
    html[data-surface="admin"] .quick-search { min-width:160px; }
    html[data-surface="admin"] .admin-top>.btn { font-size:13px; padding:10px; }
    html[data-surface="admin"] .panel-head { flex-wrap:wrap; }
    html[data-surface="admin"] .payment-edit-box { inset:12px 12px auto; width:auto; transform:none; max-height:calc(100dvh - 24px); }
}
/* Keep dialog actions reachable while the fields scroll. */
html[data-surface="admin"] .payment-edit-box .share-tool-title {
    position:sticky; top:-18px; z-index:2; background:var(--ui-surface);
    padding:12px 0; margin-top:-18px; border-bottom:1px solid var(--ui-border);
}
html[data-surface="admin"] .payment-edit-box form > .row:last-child {
    position:sticky; bottom:-18px; background:var(--ui-surface);
    padding:12px 0; margin-bottom:-18px; border-top:1px solid var(--ui-border); z-index:2;
}
html[data-surface="admin"] .payment-edit-box .share-tool-title .btn { width:auto; flex:0 0 auto; }
html[data-surface][data-theme="light"] :is(.animal-stat small,.choice small,.upload small,.dashboard-eyebrow,.section-intro) { color:#52665d!important; }
html[data-surface="public"][data-theme="light"] { --muted:#625e58!important; }
@media(max-width:700px) {
    html[data-surface="admin"] .admin-top { position:relative; padding-block:6px; gap:8px; min-height:0; }
    html[data-surface="admin"] .admin-top-brand { padding-block:0; }
    html[data-surface="admin"] .admin-top .quick-search input { min-height:40px; height:40px; }
    html[data-surface="admin"] .payment-edit-box .share-tool-title { flex-direction:row; align-items:center; gap:8px; }
    html[data-surface="admin"] .payment-edit-box .share-tool-title h3 { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
    html[data-surface] *,html[data-surface] *::before,html[data-surface] *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
}