/* Audit round 1: one transient surface, token-based controls, and small screens. */
:root {
  --audit-ink: var(--n-900);
  --audit-line: var(--n-200);
  --audit-toast-bottom: 52px;
}

/* Consent is a notice layer and must remain above the desktop rail as well as
   the mobile bottom rail, otherwise the first-visit action is unclickable. */
html body #cookieBanner { z-index: var(--layer-stack-100200) !important; }

#creatorToast { bottom: var(--audit-toast-bottom) !important; }
#tierModal > div, #exportModal > div { width: min(640px, calc(100vw - 32px)) !important; max-width: 640px !important; }
#exportModal > div { min-width: min(560px, calc(100vw - 32px)); }
#tierModal .tier-checkout-legacy { display: none !important; }
#tierModal .tier-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
#tierModal .pricing-plan { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--audit-line); border-radius: 16px; background: var(--surface); }
#tierModal .pricing-plan.is-featured { border-color: var(--state-active-border); box-shadow: 0 0 0 2px var(--shadow-ink); }
#tierModal .pricing-plan button { margin-top: auto; min-height: 40px; border: 1px solid var(--btn-primary-border); border-radius: 8px; background: var(--btn-primary-bg); color: var(--btn-primary-fg); font-weight: 700; cursor: pointer; }
#tierModal .pricing-plan button.secondary { background: var(--surface); color: var(--audit-ink); }
#tierModal .pricing-plan .rmb { color: var(--muted); font-size: 12px; }

.workspace-tool-item .tool-description, .as-item-main > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

@media (max-width: 640px) {
  /* One bottom stack: safe area -> pages -> tools -> command input.
     Heights are measured by the existing mobile layout coordinator. */
  :root {
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-page-bottom: calc(3px + var(--mobile-safe-bottom));
    --mobile-tools-bottom: calc(var(--mobile-page-bottom) + var(--mobile-page-height, 71px) + 8px);
    --mobile-stack-bottom: calc(var(--mobile-tools-bottom) + var(--mobile-tools-height, 68px) + 12px);
  }
  html body :is(#ai-assistant-bar, #ai-assistant-reopen) { bottom: var(--mobile-stack-bottom) !important; }
  html body :is(#ai-assistant-hist, #ai-assistant-cards, #ai-assistant-note) { bottom: calc(var(--mobile-stack-bottom) + 62px) !important; }
  html[data-timeline-open] body #leftSidebar { visibility: hidden !important; pointer-events: none !important; }

  html body #leftSidebar { position: fixed !important; display: flex !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: var(--mobile-tools-bottom) !important; width: auto !important; max-width: calc(100vw - 16px) !important; height: 68px !important; min-height: 68px !important; box-sizing: border-box !important; border-radius: 16px !important; flex-direction: row !important; justify-content: flex-start !important; overflow-x: auto !important; overflow-y: hidden !important; padding: var(--space-2) var(--space-2) !important; gap: var(--space-1) !important; z-index: var(--layer-stack-85) !important; }
  html body #leftSidebar > button { display: inline-flex !important; flex: 0 0 38px !important; width: 38px !important; min-width: 38px !important; height: 54px !important; min-height: 54px !important; padding: var(--space-1) var(--space-1) !important; border-radius: 12px !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: var(--space-1) !important; line-height: 1 !important; }
  html body #leftSidebar > button svg, html body #leftSidebar > button > span:not(.brush-studio-caret):not(.pro-tool-label) { flex: 0 0 19px !important; width: 19px !important; height: 19px !important; }
  html body #leftSidebar > button::after, html body #leftSidebar button::after { display: none !important; content: none !important; }
  html body #leftSidebar .pro-tool-label { display: block !important; flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 12px !important; overflow: hidden !important; color: currentColor !important; font-size: 10px !important; line-height: 12px !important; white-space: nowrap !important; text-align: center !important; }
  html body #leftSidebar > .redesign-tool-group { display: contents !important; }
  html body #leftSidebar button { display: inline-flex !important; flex: 0 0 38px !important; width: 38px !important; min-width: 38px !important; height: 54px !important; min-height: 54px !important; padding: var(--space-1) var(--space-1) !important; border-radius: 12px !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: var(--space-1) !important; line-height: 1 !important; }
  html body #leftSidebar button svg { flex: 0 0 19px !important; width: 19px !important; height: 19px !important; }
  html body #leftSidebar button::after { display: none !important; content: none !important; }
  html body #leftSidebar #btnImportPdfDock { display: inline-flex !important; color: var(--state-active-fg) !important; }
  html body #leftSidebar #btnToggleFxPanel { display: none !important; }
  html body #leftSidebar #btnToggleLayers { display: none !important; }
  html body #leftSidebar > .h-px { display: block !important; flex: 0 0 1px !important; width: 1px !important; min-width: 1px !important; height: 24px !important; min-height: 24px !important; margin: 0 var(--space-1) !important; }
  html body #cookieBanner { bottom: 156px !important; flex-direction: column; align-items: stretch; max-height: none; padding: var(--space-1) var(--space-2) !important; gap: var(--space-1) !important; font-size: 12px; line-height: 1.25; }
  html body #cookieBanner > div:first-child { display: flex; flex-direction: column; gap: var(--space-1); flex: none; width: 100%; }
  html body #cookieBanner strong { display: block; line-height: 1.25; }
  html body #cookieBanner p { display: block; margin: 0; overflow: visible; font-size: 12px !important; line-height: 1.25; }
  html body #cookieBanner .privacy-actions { width: 100%; flex-wrap: nowrap; gap: var(--space-2); }
  html body #cookieBanner .privacy-actions button { flex: 1; min-width: 0; min-height: 36px; padding: var(--space-1) var(--space-2) !important; font: inherit !important; }
  html body #leftSidebar > button, html body #leftSidebar > .tb2-slot, html body #leftSidebar #btnTogglePalette { flex: 0 0 58px !important; width: 58px !important; min-width: 58px !important; height: 54px !important; min-height: 54px !important; border-radius: 12px !important; }
  html body #pageManagerDock { bottom: var(--mobile-page-bottom) !important; z-index: var(--layer-stack-80) !important; }
  #canvasCard, #mainCanvas { max-width: none !important; }
  #shapePanel, #fxPanel, #brushStudioFlyout, #paletteFlyout, #formulaModal, #panel3DTools, #mediaMenu, #layersPanel, #moreToolsDrawer, #t1021ToolOpts { top: auto !important; bottom: calc(68px + env(safe-area-inset-bottom)) !important; left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; max-height: min(68vh, 520px) !important; }
  #tierModal .tier-plan-grid { grid-template-columns: 1fr; }
  #tierModal > div { max-height: calc(100vh - 24px) !important; }
}

#exportModal > div { border-radius: 18px !important; }
#exportModal h3, #exportModal .export-title { font-size: 20px !important; font-weight: 700 !important; }
#exportModal .workspace-modal-close { width: 36px; height: 36px; padding: 0; }
#exportModal .workspace-modal-close, .r4-icon-btn, button[id^="btnClose"], #t1021OptsHide { display: inline-grid; place-items: center; }
#exportModal .workspace-modal-close:empty::before, .r4-icon-btn:empty::before, button[id^="btnClose"]:empty::before, #t1021OptsHide:empty::before { content: "×"; font-size: 20px; line-height: 1; }
#exportModal #btnExecuteExport { width: fit-content !important; max-width: 100%; min-width: 168px; }
#exportModal #btnExecuteExport, #exportModal .btn-export-primary, #exportModal #btnExportConfirm { background: var(--btn-primary-bg) !important; color: var(--btn-primary-fg) !important; border-color: var(--btn-primary-border) !important; }
#exportModal #btnExecuteExport:hover, #exportModal .btn-export-primary:hover, #exportModal #btnExportConfirm:hover { background: var(--state-active-fg) !important; }
#exportModal .export-tier-card { background: var(--btn-secondary-bg) !important; border-color: var(--btn-secondary-border) !important; }
#exportModal .export-tier-card.is-selected, #exportModal .export-tier-card:has(input:checked) { background: var(--state-active-bg) !important; border-color: var(--state-active-border) !important; }
#exportModal .btn-pro-fmt { background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-fg) !important; border: 1px solid var(--btn-secondary-border) !important; }
#exportModal .btn-pro-fmt.is-selected { background: var(--state-active-bg) !important; color: var(--state-active-fg) !important; border-color: var(--state-active-border) !important; }
#exportModal input[type="radio"], #exportModal input[type="checkbox"] { accent-color: var(--state-active-fg) !important; }
#exportModal [class*="text-amber-"], #exportModal [class*="text-emerald-"], #exportModal [class*="text-indigo-"] { color: var(--state-active-fg) !important; }
#exportModal [class*="bg-amber-"], #exportModal [class*="bg-emerald-"], #exportModal [class*="bg-indigo-"] { background: var(--state-active-bg) !important; }
#exportModal [class*="border-amber-"], #exportModal [class*="border-emerald-"], #exportModal [class*="border-indigo-"] { border-color: var(--state-active-border) !important; }
#exportModal #btnOpenRestoreModal, #exportModal #btnOpenRestoreModal * { color: var(--state-active-fg) !important; }
#exportModal .export-close, #exportModal [data-export-close] { background: var(--audit-ink) !important; color: var(--ink) !important; }
.selection-marquee { border-color: var(--selection-border) !important; background: color-mix(in srgb, var(--selection-border) 10%, transparent) !important; }

/* All first-party binary controls use the neutral token system instead of the browser blue. */
input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: 0 0 auto; margin: 0; border: 1.5px solid var(--btn-secondary-border); background: var(--btn-secondary-bg); color: var(--btn-primary-fg); cursor: pointer; }
input[type="checkbox"] { width: 18px; height: 18px; border-radius: 5px; }
input[type="checkbox"]::after { content: ""; width: 8px; height: 4px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg) scale(0); transition: transform 120ms ease; }
input[type="checkbox"]:checked { background: var(--state-active-fg); border-color: var(--state-active-fg); color: var(--btn-primary-fg); }
input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
input[type="radio"] { width: 18px; height: 18px; border-radius: 50%; }
input[type="radio"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform 120ms ease; }
input[type="radio"]:checked { border-color: var(--state-active-fg); color: var(--state-active-fg); }
input[type="radio"]:checked::after { transform: scale(1); }
.audit-choice-control { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; cursor: pointer; }
.audit-choice-control__input { flex: 0 0 auto; }
.sb-choice-control { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); min-height: 32px; cursor: pointer; }
#workspaceCanvas .sb-choice-control, #workspaceCanvas .audit-choice-control { justify-content: flex-start !important; }
.payment-step { display: flex; min-height: 112px; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-2) var(--space-2); border: 1px solid var(--btn-secondary-border); border-radius: 12px; background: var(--btn-secondary-bg); }
.payment-step-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--state-active-border); border-radius: 12px; color: var(--state-active-fg); }
.payment-step-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }
.sb-line-icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sb-panel h4 { display: flex; align-items: center; gap: var(--space-2); }

/* Tool popover headings are labels, never fake input boxes. */
#shapePanel > header, #formulaDrawer > header, #formulaModal > div > header, #panel3DTools > header, #mediaMenu > header, #layersPanel > header { border: 0 !important; background: transparent !important; font-size: 16px !important; font-weight: 600 !important; }