/* Approved PosterForge component reference. Visual contract shared by React and
   controller-rendered markup. Workflow classes, hidden states and IDs stay intact. */
:root {
  --page-section-gap: 16px;
  color-scheme: dark;
  --bg: #07131d; --bg-elevated: #0b1a26; --panel: #0b1a26;
  --panel-2: #102330; --panel-3: #16303e;
  --text: #f2f7fb; --muted: #a7bdcd; --border: #284454; --border-strong: #577689;
  --accent: #00c2db; --accent-strong: #14dcee; --accent-soft: #003d4b;
  --pf-cyan-500: #00c2db; --pf-cyan-400: #14dcee; --pf-cyan-hover: #14dcee;
  --pf-teal-soft: #00323f; --pf-teal-glow: #00d7ed33;
  --pf-text: #f2f7fb; --pf-text-muted: #a7bdcd; --pf-text-subtle: #90a9ba;
  --pf-border: #284454; --pf-border-strong: #577689;
  --pf-navy-950: #07131d; --pf-navy-900: #0b1a26; --pf-navy-850: #102330;
  --pf-gold-500: #83dfeb; --pf-gold-400: #b7f2f8; --pf-gold-muted: #9ec4d1;
  --pf-gold-soft: #123340; --pf-gold-border: #315563;
  --pf-gold-chip-bg: #102d38; --pf-gold-chip-border: #315563;
  --danger: #ff6c68; --warning: #ffc775; --success: #72ebba;
  --radius-sm: 7px; --radius-md: 12px; --radius-lg: 16px;
  --focus-ring: 0 0 0 3px #00d9ee40;
  --shadow: 0 16px 48px #00000030;
}
html { scrollbar-color: #416174 #08151f; scroll-padding-top: 90px; }
body { background: var(--bg); color: var(--text); font-family: Inter, 'Segoe UI', sans-serif; }
body #appView.pfu-app { background: radial-gradient(ellipse at 95% 0, #10324370, transparent 45%), #07131d; }
body .topbar.m5-topbar { min-height: 76px; padding: 14px 28px; background: #081722f5; border-bottom: 1px solid #284454; }
body .m5-topbar .brand strong { font-size: 23px; letter-spacing: -.8px; color: #f2f7fb; }
body .m5-topbar .brand strong em { color: #159afa; font-style: normal; }
body .m5-topbar .brand span { color: #a7bdcd; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; }
body .app-shell.m5-shell > .shell { grid-template-columns: 236px minmax(0, 1fr); }
body .sidebar.app-rail { background: #091823; border-right: 1px solid #284454; padding: 22px 14px; }
body .sidebar .nav-section { color: #7e9eb3; font-size: 10px; letter-spacing: 1.7px; font-weight: 700; margin: 23px 12px 9px; }
body .sidebar .nav-section:first-child { margin-top: 0; }
body .sidebar .nav { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 10px 12px; border: 1px solid transparent; border-radius: 7px; color: #adc2d0; background: transparent; font-size: 12px; font-weight: 500; box-shadow: none; text-align: left; }
body .sidebar .nav:hover { background: #132c3a; color: #e9faff; border-color: #315563; }
body .sidebar .nav.active { background: #003645; color: #5ae6f4; border-color: #007c91; box-shadow: inset 3px 0 #00cce2; }
body .sidebar .nav::before { display: none; }
.pf-nav-icon { width: 17px; height: 17px; flex: 0 0 17px; opacity: .85; }
body .sidebar .sidebar-help { border: 1px solid #284454; background: #10232f; padding: 14px; border-radius: 10px; margin-top: 24px; }
body .sidebar .sidebar-help span, body .sidebar .sidebar-help b { color: #a7bdcd !important; }
body .sidebar-bottom { border-top: 1px solid #284454; margin-top: 24px; padding-top: 16px; }
body .workspace.main { padding: 22px 36px 48px; max-width: 1760px; }
body .context-bar { padding-bottom: 16px; margin-bottom: 28px; border-bottom: 1px solid #203b4a; color: #a7bdcd; }
body .context-bar b { color: #d9edf6; font-weight: 500; }
body .context-bar > div > span { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
body .context-bar > div > span::after { content: '/'; padding-left: 14px; color: #527487; }
body .page-head { align-items: center; gap: 24px; margin-bottom: 26px; }
body .page-head h1 { color: #f2f7fb; font-size: clamp(25px, 2.4vw, 36px); line-height: 1.2; letter-spacing: -1.1px; max-width: 850px; }
body .page-head p { color: #a7bdcd; max-width: 740px; line-height: 1.65; }
body :is(.eyebrow,.guidance-kicker,.clarity-kicker) { color: #65dbea; letter-spacing: 1.7px; font-size: 10px; }
body :is(.card,.guidance-card,.context-help,.form-card,.clarity-card) { border-color: #284454; background-color: #0c1d29; border-radius: 12px; box-shadow: none; }
body .card h2, body .card h3 { color: #edf8fc; }
body :is(.muted,.card small,.inline-explain) { color: #a7bdcd; }

/* Buttons: action semantics, not the page that happened to render them. */
body :is(button,.button) { font-family: inherit; transition: background-color .14s, border-color .14s, box-shadow .14s, color .14s; }
body :is(.primary-button,.discord-button,.btn-primary,.btn.primary) {
  color: #00131c !important; background: #00bdd5 !important; border: 1px solid #00e0f3 !important;
  border-radius: 7px; min-height: 39px; padding: 10px 17px; font-weight: 650; font-size: 12px;
  box-shadow: inset 0 1px #a4f5ff38 !important; text-shadow: none;
}
body :is(.primary-button,.discord-button,.btn-primary,.btn.primary):hover:not(:disabled):not([aria-disabled=true]) { background: #09d4e7 !important; box-shadow: 0 0 18px #00cce23d !important; }
body :is(.primary-button,.discord-button,.btn-primary,.btn.primary):active:not(:disabled):not([aria-disabled=true]) { background: #00889e !important; box-shadow: inset 0 2px 6px #003849 !important; }
body :is(.secondary-button,.ghost-button,.help-btn,.btn-secondary,.btn.subtle,.btn.secondary,.tool-btn,.icon-btn,.icon-button) {
  color: #d9e9f3 !important; background: #0a1a25 !important; border: 1px solid #577689 !important;
  border-radius: 7px; min-height: 37px; padding: 9px 14px; font-size: 12px; box-shadow: none !important;
}
body :is(.secondary-button,.ghost-button,.help-btn,.btn-secondary,.btn.subtle,.btn.secondary,.tool-btn,.icon-btn,.icon-button):hover:not(:disabled):not([aria-disabled=true]) { color: #fff !important; border-color: #00d9ed !important; box-shadow: 0 0 12px #00cce226 !important; }
body :is(.secondary-button,.ghost-button,.help-btn,.btn-secondary,.btn.subtle,.btn.secondary,.tool-btn,.icon-btn,.icon-button):active:not(:disabled):not([aria-disabled=true]) { background: #102d3a !important; box-shadow: inset 0 2px 5px #0007 !important; }
body :is(.danger-button,.danger,.btn-danger,.btn.danger,.queue-delete-poster,.schedule-delete,.danger-action,button[data-action='delete']) { color: #ff8b84 !important; background: #291d25 !important; border: 1px solid #ff554e !important; border-radius: 7px; padding: 9px 14px; box-shadow: none !important; }
body :is(.danger-button,.danger,.btn-danger,.btn.danger,.queue-delete-poster,.schedule-delete,.danger-action,button[data-action='delete']):hover:not(:disabled):not([aria-disabled=true]) { color: #ffcbc6 !important; background: #512025 !important; border-color:#ff746d !important; box-shadow: 0 0 15px #ff493b30 !important; }
body :is(.danger-button,.danger,.btn-danger,.btn.danger,.queue-delete-poster,.schedule-delete,.danger-action,button[data-action='delete']):active:not(:disabled):not([aria-disabled=true]) { background: #321018 !important; border-color:#ff554e !important; box-shadow:inset 0 2px 5px #0007 !important; }
body :is(.text-button,.link-button,.text-btn,#pageHelpBtn) { color: #15d9ed; background: transparent; border: 0; box-shadow: none; padding: 5px 0; font-size: 12px; }
body :is(.text-button,.link-button,.text-btn,#pageHelpBtn):hover:not(:disabled):not([aria-disabled=true]) { color: #7aedfa; text-decoration: underline; text-underline-offset: 4px; }
body button:disabled:disabled, body button[aria-disabled=true][aria-disabled=true] { color: #869caa !important; background: #22313e !important; border-color: #415665 !important; box-shadow: none !important; cursor: not-allowed; opacity: .72; transform: none !important; }
body :is(button,a,input,textarea,select,[tabindex]):focus-visible { outline: 2px solid #5becfa; outline-offset: 3px; }
body a[aria-disabled=true] { color:#869caa !important; border-color:#415665 !important; box-shadow:none !important; cursor:not-allowed; opacity:.72; text-decoration:none; }
body :is(.text-button,.link-button,.text-btn)[aria-disabled=true], body :is(.text-button,.link-button,.text-btn):disabled { background:transparent !important; border-color:transparent !important; text-decoration:none; }

/* Native form controls retain their behaviour, labels and browser keyboard support. */
body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea,select) {
  background-color: #0a1b27; color: #e9f5fb; border: 1px solid #476577; border-radius: 7px;
  min-height: 38px; box-shadow: none; font-family: inherit; font-size: 12px;
}
body :is(input,textarea)::placeholder { color: #8ca6b8; opacity: 1; }
body :is(input,textarea,select):hover:not(:disabled) { border-color: #00b9d0; }
body :is(input,textarea,select):focus { border-color: #00d9ed; box-shadow: 0 0 0 2px #00d9ed20; }
body :is(input,textarea,select)[aria-invalid=true], body :is(input,textarea,select).is-invalid { border-color: #ff554e !important; box-shadow: 0 0 0 2px #ff554e18; }
body :is(input,textarea,select):disabled { background: #1d2d39; color: #8198a8; border-color: #334c5c; cursor: not-allowed; }
body select option { color: #e9f5fb; background: #102532; }
body select option:checked { color: #00131c; background: #00c2db; }
body input[type=checkbox], body input[type=radio] { accent-color: #00c2db !important; width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
body input[type=checkbox] { appearance: none; background: #081a26; border: 1.5px solid #8caec3; border-radius: 4px; position: relative; vertical-align: middle; }
body input[type=checkbox]:checked { background: #00c2db; border-color: #00d9ed; }
body input[type=checkbox]:checked::before { content: ''; position: absolute; width: 5px; height: 9px; border: solid #00212d; border-width: 0 2px 2px 0; left: 5px; top: 1px; transform: rotate(45deg); }
body .toggle-row input[type=checkbox]::before, body input[role=switch]::before { display: none; }
body input[type=checkbox]:disabled, body input[type=radio]:disabled { cursor: not-allowed; opacity: .5; }
body .toggle-row input[type=checkbox], body input[role=switch] {
  appearance: none; width: 43px; height: 25px; border: 1.5px solid #577689; border-radius: 99px;
  background: #0b1c28; position: relative; display: inline-block; vertical-align: middle; margin: 0;
}
body .toggle-row input[type=checkbox]::after, body input[role=switch]::after { content: ''; position: absolute; width: 17px; height: 17px; left: 3px; top: 2.5px; border-radius: 50%; background: #d9f3ff; transition: transform .14s; }
body .toggle-row input[type=checkbox]:checked, body input[role=switch]:checked { background: #00c2db; border-color: #00e2f2; }
body .toggle-row input[type=checkbox]:checked::after, body input[role=switch]:checked::after { transform: translateX(17px); background: #fff; }
body .toggle-row input[type=checkbox]:hover:not(:disabled) { border-color: #00e2f2; box-shadow: 0 0 12px #00d9ed25; }
body :is(.field-label,label) { color: #c5dce8; }

/* Selection and tabs use the reference's cyan border / underline, never gold. */
body :is(.choice-card,.option-card,.select-card,.source-type-card,.template-select-card,.source-method,.schedule-design-option,.pick-card) { background: #0b1e2b; border: 1px solid #496778; border-radius: 8px; }
body :is(.choice-card,.option-card,.select-card,.source-type-card,.template-select-card,.source-method,.schedule-design-option,.pick-card):hover { border-color: #00d9ed; box-shadow: 0 0 15px #00d9ed24; }
body :is(.choice-card,.option-card,.select-card,.source-type-card,.template-select-card,.source-method,.schedule-design-option,.pick-card):is(.selected,.active,[aria-pressed=true],[aria-selected=true]) { border-color: #00e4f4 !important; background: #003744 !important; box-shadow: inset 0 0 0 1px #00c2db !important; }
body :is([role=tab],.inspector-tabs button,.studio-tabs button) { color: #a7bdcd; border-radius: 5px 5px 0 0; border: 0; border-bottom: 2px solid transparent; background: #10232f; box-shadow: none; }
body :is([role=tab],.inspector-tabs button,.studio-tabs button):hover { color: #5becfa; }
body :is([role=tab],.inspector-tabs button,.studio-tabs button):is(.active,[aria-selected=true]) { color: #f2fcff !important; border-bottom-color: #00d9ed !important; background: #102b38 !important; box-shadow: none !important; }
body :is(.status-chip,.badge,.pill) { border-radius: 6px; }
body :is(.notice,.info-banner,.context-help) { border-color: #235877; background: #0b2435; }
body :is(.notice.success,.status-success,.success-message) { color: #91f2c7; background: #0b392b; border: 1px solid #27d594; }
body :is(.notice.error,.error-message,.status-error) { color: #ffaea4; background: #351e24; border: 1px solid #ff625a; }
body :is(.notice.warning,.warning-banner,.status-warning) { color: #ffdc9f; background: #39291d; border: 1px solid #e5a138; }
body .toast { background: #103344; border: 1px solid #04c3db; color: #e8fbff; border-radius: 9px; box-shadow: 0 10px 30px #0007; }
body button[aria-busy=true]::before { content: ''; display: inline-block; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; margin-right: 8px; vertical-align: middle; animation: pf-spin .8s linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* Explicit selectors retire the old demo theme's highly-specific page overrides. */
body #appView .sidebar { background: #091823; }
body #appView #navTabs .nav { display: flex; gap: 11px; font-weight: 500; background: transparent; color: #adc2d0; border-color: transparent; }
body #appView #navTabs .nav:hover { background: #132c3a; border-color: #315563; color: #ecfaff; }
body #appView #navTabs .nav.active { background: #003645; color: #5ae6f4; border-color: #007c91; box-shadow: inset 3px 0 #00cce2; }
body #appView #navTabs .nav-recommended::after { display: none; }
body #appView :is(.step-card,.source-method,.context-help,.empty-state,.schedule-item,.queue-batch,.queue-item,.policy-strip,.source-choice-feedback) { background-color: #0c1e2b; border-color: #315061; }
body #appView .source-method { position: relative; border-radius: 8px; padding: 20px 38px 20px 18px; }
body #appView .source-method.selected { background: #003744; border-color: #00e4f4; box-shadow: inset 0 0 0 1px #00c2db; }
body #appView .source-method.selected::after { content: '\2713'; position: absolute; right: 13px; top: 13px; width: 20px; height: 20px; border-radius: 50%; color: #00212d; background: #00d3e5; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
body #appView .source-method:hover { border-color: #00d9ed; }
body #appView .source-method span { color: #a7bdcd; font-size: 12px; line-height: 1.55; }
body #appView .source-method strong { color: #edfaff; font-size: 13px; }
body #appView :is(.step-card,.form-card) > :is(.card-head,.step-head) { border-bottom-color: #315061; }
body #appView .page-head .eyebrow { color: #65dbea; }
body #appView .screen p { line-height: 1.65; }
body #appView :is(.clarity-grid,.context-help) { margin-bottom: 22px; }
body #templateStudioDialog :is(.designer-head,.studio-toolbar-row,.studio-chrome-compact,.inspector,.studio-left-panel,.studio-properties-panel) { background-color: #0b1e2b; border-color: #315061; }
body #templateStudioDialog .designer-head { padding-bottom: 20px; border-bottom: 1px solid #284454; }
body #templateStudioDialog .designer-head h1 { color: #edfaff; letter-spacing: -.8px; }
body #templateStudioDialog :is(.inspector-tabs,.component-inspector-tabs) button.active { color: #eefcff; border-bottom: 2px solid #00d9ed; background: #12303e; }
body #templateStudioDialog :is(.property-group,.inspector-section,.studio-panel) { border-color: #284454; border-radius: 9px; }
body #templateStudioDialog :is(.btn,.tool-btn,.icon-button) { border-radius: 7px; }
body #appView #templateStudioDialog { background: #071722; }
body #appView #templateStudioDialog :is(.tool-panel,.properties-panel,.canvas-stage,.canvas-toolbar) { background: #0b1e2b; border-color: #315061; }
body #appView #templateStudioDialog :is(.text-btn,.eyebrow,.add-elements-group-label) { color: #75dce9; }
body #appView .toggle-row input[type=checkbox], body input[role=switch] { min-width: 43px; max-width: 43px; width: 43px; min-height: 25px; max-height: 25px; height: 25px; flex: 0 0 43px; align-self: center; padding: 0; }
body #toast.success { background: #0b392b; color: #91f2c7; border: 1px solid #27d594; }
body #toast.error { background: #351e24; color: #ffaea4; border: 1px solid #ff625a; }
body #toast.warning { background:#39291d; color:#ffdc9f; border:1px solid #e5a138; }
body #toast.info { background:#0b2435; color:#a5ddff; border:1px solid #258bd0; }

/* Interaction states shared by every choice/menu card, including guided actions.
   State rules follow the legacy page overrides so selection cannot suppress hover. */
body #appView :is(.choice-card,.option-card,.select-card,.source-type-card,.template-select-card,.source-method,.schedule-design-option,.pick-card,.guided-action) {
  background: #0b1e2b;
  border: 1px solid #496778;
  border-radius: 8px;
  box-shadow: none;
  transform: none;
  transition: background-color .14s, border-color .14s, box-shadow .14s, color .14s;
}
body #appView :is(.choice-card,.option-card,.select-card,.source-type-card,.template-select-card,.source-method,.schedule-design-option,.pick-card,.guided-action):is(.selected,.active,[aria-pressed=true],[aria-selected=true]) {
  background: #003744 !important;
  border-color: #00e4f4 !important;
  box-shadow: inset 0 0 0 1px #00c2db !important;
}
body #appView :is(.choice-card,.option-card,.select-card,.source-type-card,.template-select-card,.source-method,.schedule-design-option,.pick-card,.guided-action):hover:not(:disabled):not([aria-disabled=true]) {
  background: #0b2937;
  border-color: #00e4f4 !important;
  box-shadow: 0 0 0 1px #00c2db, 0 0 18px #00d9ed40 !important;
  transform: none;
}
body #appView :is(.choice-card,.option-card,.select-card,.source-type-card,.template-select-card,.source-method,.schedule-design-option,.pick-card,.guided-action):active:not(:disabled):not([aria-disabled=true]) {
  background: #00303c !important;
  box-shadow: inset 0 2px 6px #00151f !important;
}
body #appView :is(.choice-card,.option-card,.select-card,.source-type-card,.template-select-card,.source-method,.schedule-design-option,.pick-card,.guided-action):is(:disabled,[aria-disabled=true]) {
  background: #22313e !important; color: #869caa !important;
  border-color: #415665 !important; box-shadow: none !important;
  cursor: not-allowed; transform: none; opacity: .72;
}
body :is(.primary-button,.discord-button,.btn-primary,.btn.primary,.secondary-button,.ghost-button,.help-btn,.btn-secondary,.btn.subtle,.btn.secondary,.tool-btn,.tool-button,.icon-btn,.icon-button,.danger-button,.btn-danger):is(:hover,:active) { transform: none; }
body .tool-button { background: #0a1a25; color: #d9e9f3; border: 1px solid #577689; border-radius: 7px; }
body .tool-button:hover:not(:disabled):not([aria-disabled=true]) { border-color: #00d9ed; box-shadow: 0 0 12px #00cce240; }
body .tool-button:active:not(:disabled):not([aria-disabled=true]) { background: #102d3a; box-shadow: inset 0 2px 5px #0007; }
body :is(.text-button,.link-button,.text-btn,#pageHelpBtn):active:not(:disabled):not([aria-disabled=true]) { color: #00b5ce; text-decoration: underline; }
body input[type=checkbox]:hover:not(:disabled) { border-color: #00e4f4; box-shadow: 0 0 12px #00d9ed30; }
body :is([role=tab],.inspector-tabs button,.studio-tabs button):hover:not(:disabled):not([aria-disabled=true]) { border-bottom-color: #00d9ed; }

/* Page rhythm: shared panel surfaces and optional guidance across workflows. */
body #appView .screen > .page-head { margin: 0 0 24px; padding: 0; }
body #appView .screen > .page-head h1 { font-size: clamp(25px,2.4vw,34px); font-weight: 650; line-height: 1.22; letter-spacing: -.8px; }
body #appView .screen > .page-head p:not(.eyebrow) { font-size: 13px; max-width: 680px; margin-top: 9px; color: #a7bdcd; }
body #appView :is(.step-card,.form-card,.schedule-item,.queue-batch,.mapping-concept,.data-workbook-hero,.list-grid > .card) { background: #0c1e2b; border: 1px solid #315061; border-radius: 12px; box-shadow: none; }
body #appView .step-card { margin-bottom: 24px; overflow: hidden; }
body #appView .step-head { background: #102633; border-bottom: 1px solid #315061; padding: 20px 24px; }
body #appView .step-head > span { color: #75dce9; font-size: 10px; letter-spacing: 1.2px; }
body #appView .step-head h2 { font-size: 19px; line-height: 1.4; font-weight: 600; margin-top: 7px; }
body #appView .step-body { padding: 24px; }
body #appView .guided-subsection { margin-bottom: 24px; }
body #appView .guided-subhead { margin-bottom: 16px; }
body #appView .guided-subhead strong { color: #edf8fc; font-size: 14px; }
body #appView .guided-subhead span { color: #a7bdcd; font-size: 12px; line-height: 1.55; }
body #appView .source-method-grid { gap: 12px; }
body #appView .guided-action { padding: 20px; text-align: left; }
body #appView .guided-action strong { color: #edf8fc; font-size: 14px; }
body #appView .guided-action span { color: #a7bdcd; font-size: 12px; line-height: 1.55; }
body #appView .pf-help-disclosure { background: #0c1e2b; border: 1px solid #315061; border-radius: 10px; padding: 0; margin: 0 0 16px; }
body #appView .pf-help-disclosure::before, body #appView .pf-help-disclosure::after { display: none; }
body #appView .pf-help-disclosure > summary { padding: 14px 18px; color: #b7dae8; font-size: 12px; font-weight: 600; cursor: pointer; list-style-position: inside; border-radius: 10px; }
body #appView .pf-help-disclosure > summary::marker { color: #00c2db; }
body #appView .pf-help-disclosure > summary:hover { background: #102d3a; color: #5becfa; }
body #appView .pf-help-disclosure > summary:focus-visible { outline: 2px solid #5becfa; outline-offset: 3px; }
body #appView .pf-help-disclosure[open] > summary { border-bottom: 1px solid #284454; border-radius: 10px 10px 0 0; margin-bottom: 16px; }
body #appView .pf-help-disclosure > :not(summary) { margin-left: 18px; margin-right: 18px; }
body #appView .pf-help-disclosure > :last-child { margin-bottom: 18px; }
body #appView .pf-help-disclosure .clarity-grid { margin: 0; border: 0; border-radius: 0 0 10px 10px; background: transparent; }
body #appView .clarity-card p, body #appView .clarity-bullets div { color: #a7bdcd; font-size: 12px; line-height: 1.6; }
body #appView.compact-help .pf-help-disclosure { display: none; }
body #appView .wizard-progress { margin: 0 0 24px; }
body #appView .wizard-progress button { background: #0c1e2b; border: 1px solid #315061; color: #a7bdcd; box-shadow: none; }
body #appView .wizard-progress button:hover { border-color: #00d9ed; color: #ecfaff; }
body #appView .wizard-progress button.current { border-color: #00c2db; background: #003744; color: #ecfaff; }
@media(max-width:760px) {
  body #appView .step-head, body #appView .step-body { padding: 18px; }
  body #appView .source-method-grid { grid-template-columns: minmax(0,1fr); }
  body #appView .screen > .page-head .row { gap: 8px; }
  body #appView .pf-help-disclosure .clarity-grid { grid-template-columns: minmax(0,1fr); }
}

/* Studio keeps mode, source selection and canvas tools in separate compact rows. */
body #appView #templateStudioDialog :is(.studio-chrome-compact,.studio-toolbar-row,.studio-context-bar,.studio-commandbar,.properties.card,.tool-panel.card) { background: #0c1e2b; border-color: #315061; border-radius: 10px; box-shadow: none; }
body #appView #templateStudioDialog .studio-toolbar-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; padding: 12px; }
body #appView #templateStudioDialog .studio-context-bar { padding: 0; border: 0; }
body #appView #templateStudioDialog .studio-source-controls { display: grid; grid-template-columns: minmax(140px,1fr) minmax(200px,2fr) auto; gap: 12px; align-items: end; width: 100%; }
body #appView #templateStudioDialog .studio-source-controls label { display: grid; gap: 6px; min-width: 0; }
body #appView #templateStudioDialog .studio-source-controls label > span { color: #a7bdcd; font-size: 10px; letter-spacing: .6px; }
body #appView #templateStudioDialog .studio-source-controls select { width: 100%; max-width: 100%; min-width: 0; background: #0a1b27; border-color: #476577; }
body #appView #templateStudioDialog .studio-commandbar { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 8px; align-items: center; padding: 12px 0 0; border: 0; border-top: 1px solid #284454; border-radius: 0; }
body #appView #templateStudioDialog .studio-commandbar > .row { margin-right: auto; }
body #appView #templateStudioDialog .studio-menu > summary { border: 1px solid #577689; border-radius: 7px; padding: 9px 12px; color: #d9e9f3; background: #0a1a25; cursor: pointer; }
body #appView #templateStudioDialog .studio-menu > summary:hover { border-color: #00d9ed; box-shadow: 0 0 12px #00cce240; }
body #appView #templateStudioDialog .studio-menu[open] > summary { border-color: #00d9ed; background: #003744; }
body #appView #templateStudioDialog .studio-menu-panel { background: #0c1e2b; border: 1px solid #476577; box-shadow: 0 12px 30px #0008; border-radius: 10px; }
body #appView #templateStudioDialog .studio-menu-panel button { background: transparent; color: #d9e9f3; border: 0; text-align: left; border-radius: 5px; }
body #appView #templateStudioDialog .studio-menu-panel button:hover { background: #003744; color: #5becfa; }
body #appView #templateStudioDialog .studio-stepbar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; background: #0c1e2b; border: 1px solid #315061; border-radius: 10px; overflow: hidden; padding: 0; }
body #appView #templateStudioDialog .studio-stepbar button { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 12px 16px; box-shadow: none; min-width: 0; }
body #appView #templateStudioDialog .studio-stepbar button:hover { background: #102d3a; border-bottom-color: #00d9ed; }
body #appView #templateStudioDialog .studio-stepbar button b { color: #edf8fc; font-size: 12px; }
body #appView #templateStudioDialog .studio-stepbar button small { color: #a7bdcd; }
body #appView #templateStudioDialog[data-studio-mode=setup] [data-studio-step=setup],
body #appView #templateStudioDialog[data-studio-mode=preview] [data-studio-step=preview],
body #appView #templateStudioDialog[data-studio-mode=generate] [data-studio-step=generate] { background: #003744; border-bottom-color: #00d9ed; box-shadow: none; }
@media(max-width:900px) {
  body #appView #templateStudioDialog .studio-source-controls { grid-template-columns: minmax(0,1fr); }
  body #appView #templateStudioDialog .studio-source-controls button { justify-self: start; }
  body #appView #templateStudioDialog .studio-stepbar button { padding: 12px 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
  body #appView #templateStudioDialog .studio-stepbar button small { display: none; }
  body #appView #templateStudioDialog .studio-commandbar > .row { flex-basis: 100%; }
}

/* Element dialogs and the inspector use the same readable control groups. */
body #fieldBuilderDialog { width: min(620px,calc(100vw - 32px)); max-height: 88dvh; padding: 0; overflow: auto; background: #0b1d29; border: 1px solid #476577; border-radius: 14px; }
body #fieldBuilderForm { padding: 24px; background: transparent; border: 0; }
body #fieldBuilderForm .dialog-heading { margin-bottom: 20px; align-items: flex-start; }
body #fieldBuilderForm .dialog-heading h3 { font-size: 24px; line-height: 1.25; color: #f2f7fb; margin-top: 5px; }
body #fieldBuilderForm .field-kind-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; background: #0a1a25; border: 1px solid #315061; border-radius: 8px; padding: 0; overflow: hidden; margin-bottom: 18px; }
body #fieldBuilderForm .field-kind-tabs button { padding: 12px 8px; font-size: 12px; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: #a7bdcd; box-shadow: none; }
body #fieldBuilderForm .field-kind-tabs button:hover { border-bottom-color: #00d9ed; color: #5becfa; }
body #fieldBuilderForm .field-kind-tabs button.active { background: #003744; color: #f2f7fb; border-bottom-color: #00d9ed; }
body #fieldBuilderForm :is(.shared-artwork-notice,.important-guidance) { padding: 12px 14px; border: 1px solid #315061; border-radius: 8px; background: #102b38; color: #b7dae8; font-size: 12px; line-height: 1.6; margin: 14px 0; }
body #fieldBuilderForm label { display: grid; gap: 7px; font-size: 12px; color: #c5dce8; margin: 14px 0; }
body #fieldBuilderForm :is(input,select) { min-width: 0; width: 100%; }
body #appView #templateStudioDialog #propertiesPanel { padding: 18px; }
body #appView #templateStudioDialog .component-inspector-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; border-bottom: 1px solid #315061; margin: 16px 0; padding: 0; }
body #appView #templateStudioDialog .component-inspector-tabs button { padding: 11px 8px; color: #a7bdcd; border: 0; border-bottom: 2px solid transparent; background: transparent; box-shadow: none; border-radius: 0; font-size: 12px; }
body #appView #templateStudioDialog .component-inspector-tabs button:hover { color: #5becfa; border-bottom-color: #00d9ed; }
body #appView #templateStudioDialog .component-inspector-tabs button.active { background: #003744; color: #f2f7fb; border-bottom-color: #00d9ed; }
body #appView #templateStudioDialog .style-control-section { background: #0b1e2b; border: 1px solid #315061; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
body #appView #templateStudioDialog .style-control-section > summary { padding: 12px 14px; color: #c5dce8; font-size: 12px; cursor: pointer; background: #102633; }
body #appView #templateStudioDialog .style-control-section > summary:hover { color: #5becfa; }
body #appView #templateStudioDialog .style-section-body { padding: 14px; }
body #appView #templateStudioDialog #staticTextOptionsPanel { background: #0b1e2b; border: 1px solid #315061; border-radius: 8px; padding: 14px; }
body #appView #templateStudioDialog :is(.style-panel-heading h5,.inspector-header h4) { color: #edf8fc; font-size: 14px; }
body #appView #templateStudioDialog :is(.tiny.muted,.compact-field) { font-size: 12px; line-height: 1.5; }

/* Dashboard: a clear production path instead of repeated explanatory panels. */
body #homeView .page-head { margin-top: 6px; margin-bottom: 30px; }
body #homeView .stats-grid { margin: 0 0 24px; gap: 16px; }
body #homeView .stat { border: 1px solid #284454; padding: 20px 22px; background: #0b1e2b; position: relative; }
body #homeView .stat > span { font-size: 11px; color: #a7bdcd; text-transform: uppercase; letter-spacing: .9px; }
body #homeView .stat strong { font-size: 32px; color: #f1fbff; font-weight: 600; letter-spacing: -1px; margin: 10px 0 6px; }
body #homeView .stat small { font-size: 11px; color: #94aebf; }
body #homeView .guidance-card { padding: 27px; background: linear-gradient(120deg,#102d3c,#0b1c29 70%); border-color: #2b5264; }
body #homeView .guidance-card h2 { font-size: 24px; letter-spacing: -.7px; }
body #homeView .setup-track { gap: 12px; margin-top: 23px; }
body #homeView .setup-step { background: #091b28; border: 1px solid #315061; border-radius: 9px; padding: 16px; }
body #homeView .setup-step.current { border-color: #00bcd3; background: #0a2936; }
body #homeView .setup-step .num { background: #123e4c; color: #6fe7f4; border: 1px solid #276073; }
body #homeView .setup-step strong { color: #ecf8fc; }
body #homeView .setup-step small { color: #a7bdcd; line-height: 1.55; }
body #homeView .setup-step button { color: #5becfa; background: transparent; border: 0; padding: 7px 0; text-align: left; }
body #homeView .setup-step button:hover { text-decoration: underline; }
body #homeView .guidance-side { background: #081b27; border: 1px solid #315061; border-radius: 10px; padding: 22px; }
body #homeView .hero-card { margin-top: 22px; background: #0b1c28; }
body :is(dialog,.modal-card,.dialog-card) { background-color: #0b1d29; color: #f2f7fb; border-color: #3c6073; border-radius: 12px; }
.schedule-capacity-dialog { max-height: 90dvh; overflow: auto; }
body dialog.private-file-dialog { width: min(680px, calc(100vw - 32px)); padding: 24px; box-sizing: border-box; border: 1px solid var(--border-strong); }
.private-file-dialog h2 { margin: 0 0 12px; }
.private-file-dialog p { margin: 0 0 18px; line-height: 1.55; color: var(--muted); }
.private-file-dialog label { display: grid; gap: 8px; margin: 16px 0; }
.private-file-dialog :is(input,select) { margin: 0; width: 100%; box-sizing: border-box; }
.private-file-dialog fieldset { margin: 18px 0; padding: 16px; border: 1px solid var(--border); border-radius: 8px; }
.private-file-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.private-file-dialog .dialog-actions button { min-height: 40px; padding: 10px 18px; }
.private-file-dialog [role=status]:empty { display: none; }
.schedule-capacity-choices { display: grid; gap: 10px; max-height: 45dvh; overflow: auto; }
body dialog::backdrop { background: #010910bd; backdrop-filter: blur(4px); }
body table th { background: #102b3a; color: #bcd5e4; }
body table td { border-color: #223e4e; }
body tbody tr:hover { background: #112d3b; }
body .login-card { border-color: #34586d; background: #0b1c28; box-shadow: 0 24px 80px #0005; }
body .login-shell { background: radial-gradient(ellipse at 50% 15%,#123d51,#07131d 65%); }
.pf-skip-link { position: fixed; top: -60px; left: 20px; z-index: 10000; background: #00c2db; color: #00131c; padding: 12px 18px; border-radius: 7px; }
.pf-skip-link:focus { top: 12px; }
.pf-menu-button { display: none; }
@media(max-width: 1050px) {
  body .workspace.main { padding: 20px 22px 40px; }
  body .app-shell.m5-shell > .shell { grid-template-columns: 205px minmax(0,1fr); }
  body .top-actions { gap: 8px; }
  body .topbar .status-chip { display: none; }
}
@media(max-width: 760px) {
  body .app-shell.m5-shell > .shell { grid-template-columns: minmax(0,1fr); }
  body .sidebar.app-rail { display: none; }
  body.pf-navigation-open .sidebar.app-rail { display: block; position: fixed; left: 0; top: 76px; bottom: 0; z-index: 60; width: min(285px,90vw); overflow-y: auto; box-shadow: 20px 0 70px #0009; }
  .pf-menu-button { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; }
  body .topbar.m5-topbar { padding: 12px 16px; min-height: 76px; flex-wrap: nowrap; }
  body .m5-topbar .brand { gap: 8px; }
  body .m5-topbar .brand strong { font-size: 19px; }
  body .m5-topbar .brand span, body .topbar #globalHelpBtn, body .topbar #workspaceNameTop { display: none; }
  body .m5-topbar .brand img { width: 31px; height: 31px; }
  body .topbar #guidedHelpToggle { font-size: 10px; padding: 8px; }
  body .workspace.main { padding: 16px 16px 35px; }
  body .page-head { align-items: flex-start; flex-direction: column; gap: 16px; }
  body #homeView .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  body #homeView .stat { padding: 15px; }
  body #homeView .guidance-card { padding: 20px; grid-template-columns: 1fr; }
  body #homeView .setup-track { grid-template-columns: 1fr; }
  body .context-bar { margin-bottom: 20px; gap: 14px; }
  body .context-bar #pageHelpBtn { font-size: 10px; }
  body :is(.page-head .row,.card-head) { flex-wrap: wrap; }
}
@media(prefers-reduced-motion:reduce) {
  body *, body *::before, body *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* Compact Studio inspector: one selection heading, essential controls first. */
body #appView #templateStudioDialog #propertiesPanel { padding: 12px; }
body #appView #templateStudioDialog #propertiesPanel > h3 { font-size: 12px; margin: 0 0 10px; color: #9eb5c6; }
body #appView #templateStudioDialog .inspector-selection-header { padding: 0 0 10px; margin: 0 0 10px; }
body #appView #templateStudioDialog .inspector-selection-title-row .eyebrow,
body #appView #templateStudioDialog #componentStylePanel .style-panel-heading,
body #appView #templateStudioDialog #componentDataPanel > .style-panel-heading,
body #appView #templateStudioDialog #componentLayoutPanel > .style-panel-heading,
body #appView #templateStudioDialog #staticTextOptionsPanel > .style-panel-heading { display: none; }
body #appView #templateStudioDialog #selectedElementName { font-size: 15px; line-height: 1.4; }
body #appView #templateStudioDialog .element-mapping-summary { padding: 6px 0 0; border: 0; background: transparent; }
body #appView #templateStudioDialog .element-mapping-kicker { display: none; }
body #appView #templateStudioDialog #selectedElementMappingValue { font-size: 11px; font-weight: 400; color: #9eb5c6; }
body #appView #templateStudioDialog .style-control-section { margin: 8px 0 0; border: 1px solid #294554; border-radius: 8px; }
body #appView #templateStudioDialog .style-control-section > summary,
body #appView #templateStudioDialog .static-text-sheet-mapping > summary { padding: 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
body #appView #templateStudioDialog .style-section-body { padding: 10px; gap: 10px; }
body #appView #templateStudioDialog .compact-control-grid.two-column { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
body #appView #templateStudioDialog .compact-field { margin: 0; gap: 5px; font-size: 11px; }
body #appView #templateStudioDialog #propertiesPanel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,button) { min-height: 32px; font-size: 12px; }
body #appView #templateStudioDialog #propertiesPanel .compact-toggle-grid { display: flex; flex-wrap: wrap; gap: 8px 12px; }
body #appView #templateStudioDialog #propertiesPanel :is(.toggle-chip,.template-visible-toggle) { display: flex; flex-direction: row; align-items: center; gap: 7px; padding: 5px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; width: auto; min-height: 28px; font-size: 12px; }
body #appView #templateStudioDialog #propertiesPanel :is(.toggle-chip,.template-visible-toggle) input { width: 18px; height: 18px; min-width: 18px; max-width: 18px; min-height: 18px; padding: 0; margin: 0; flex: 0 0 18px; }
body #appView #templateStudioDialog .template-artwork-card { display: grid; gap: 10px; padding: 10px; }
body #appView #templateStudioDialog #replaceTemplateArtworkBtn { display: grid; place-items: center; cursor: pointer; min-height: 34px; padding: 8px; font-size: 12px; }
body #appView #templateStudioDialog #staticTextOptionsPanel { padding: 0; border: 0; background: transparent; }
body #appView #templateStudioDialog .static-text-sheet-mapping { margin: 10px 0; border: 1px solid #294554; border-radius: 8px; padding: 0; }
body #appView #templateStudioDialog .static-text-sheet-mapping > :not(summary) { margin: 8px 10px 10px; }
body #appView #templateStudioDialog #propertiesPanel .layer-panel { margin-top: 14px; padding-top: 12px; }
body #appView #templateStudioDialog #propertiesPanel .layer-panel .card-head p { display: none; }
body #appView #templateStudioDialog #propertiesPanel .layer-panel h3 { font-size: 12px; }
body #appView #templateStudioDialog #studioMappingContext { font-size: 11px; line-height: 1.4; color: #9eb5c6; }

body #appView #templateStudioDialog #propertiesPanel :is(.toggle-chip,.template-visible-toggle) input { opacity: 1; clip: auto; clip-path: none; }
body #appView #templateStudioDialog #propertiesPanel :is(.toggle-chip,.template-visible-toggle) > span { background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0; height: auto; display: inline; color: #e4edf3; }
body #appView #templateStudioDialog .studio-fitting-options { border-top: 1px solid #294554; }
body #appView #templateStudioDialog .studio-fitting-options > summary { padding: 9px 10px; cursor: pointer; font-size: 12px; color: #a6bdcc; }
body #appView #templateStudioDialog #propertiesPanel :is(details,section,.inspector-card) { outline: none; }
body #appView #templateStudioDialog .studio-source-controls { align-items: start; }
body #appView #templateStudioDialog .studio-source-controls > button { margin-top: 23px; }

body #appView #templateStudioDialog #propertiesPanel :is(.glow-effect-card,.temporary-preview-notice,.asset-choice-simple-intro,.asset-choice-position-simple,.asset-choice-properties,.generation-asset-choices,#propSelectedTemplateAssetControl) { background: #0b202c; border-color: #294554; }
body #appView #templateStudioDialog #propertiesPanel :is(.segmented-control,.shape-preset-grid) button.active { color: #dffaff; background: #003c4b; border-color: #00d9ed; box-shadow: inset 0 -2px #00c2db; }
body #appView #templateStudioDialog #propertiesPanel :is(.segmented-control,.shape-preset-grid) button:hover:not(:disabled) { border-color: #00e4f4; box-shadow: 0 0 12px #00d9ed40; }
body #appView #templateStudioDialog #propertiesPanel :is(.segmented-control,.shape-preset-grid) button:active:not(:disabled) { background: #002d38; box-shadow: inset 0 2px 4px #0007; }
body #appView #templateStudioDialog #propertiesPanel .text-option-row { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: #0b202c; }
body #appView #templateStudioDialog #propertiesPanel .text-option-row.active { border-color: #00c2db; }
body #appView #templateStudioDialog #propertiesPanel .text-option-row > .ghost-button { grid-column: auto; }
body #appView #templateStudioDialog #propertiesPanel .text-option-row:only-child { grid-template-columns: minmax(0,1fr); padding: 0; border: 0; }
body #appView #templateStudioDialog #propertiesPanel .text-option-row:only-child :is(input[type=radio],button:disabled) { display: none; }
body #appView #templateStudioDialog #propertiesPanel .text-option-row textarea { min-height: 70px; padding: 10px; font-size: 13px; }
body #appView #templateStudioDialog #propertiesPanel .technical-details { margin-top: 10px; }

/* Matching compact rows inside all text-setting disclosures. */
body #appView #templateStudioDialog #propertiesPanel .studio-colour-rows { display: grid; gap: 8px; }
body #appView #templateStudioDialog #propertiesPanel .colour-control { display: grid; grid-template-columns: minmax(0,1fr) 28px 62px; align-items: center; gap: 8px; padding: 0; min-height: 30px; border: 0; background: transparent; }
body #appView #templateStudioDialog #propertiesPanel .colour-control > span { font-size: 12px; }
body #appView #templateStudioDialog #propertiesPanel .colour-control input[type=color] { width: 28px; height: 28px; min-height: 28px; padding: 2px; border: 1px solid #527083; border-radius: 5px; cursor: pointer; }
body #appView #templateStudioDialog #propertiesPanel .colour-control strong { color: #a6bdcc; font-size: 10px; font-weight: 500; }
body #appView #templateStudioDialog #propertiesPanel .range-control { display: grid; gap: 5px; margin: 0; }
body #appView #templateStudioDialog #propertiesPanel .range-control > span { display: flex; align-items: center; justify-content: space-between; font-size: 12px; gap: 8px; }
body #appView #templateStudioDialog #propertiesPanel .range-control strong { font-size: 11px; font-weight: 500; color: #a6bdcc; }
body #appView #templateStudioDialog #propertiesPanel input[type=range] { width: 100%; min-width: 0; height: 18px; min-height: 18px; margin: 0; padding: 0; accent-color: #00c2db; }
body #appView #templateStudioDialog #propertiesPanel .glow-effect-card { border: 0; border-top: 1px solid #294554; border-radius: 0; padding: 9px 0 0; background: transparent; box-shadow: none; }
body #appView #templateStudioDialog #propertiesPanel .effect-enable-control { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 0; background: transparent; border: 0; }
body #appView #templateStudioDialog #propertiesPanel .effect-enable-control input { width: 18px; height: 18px; min-height: 18px; opacity: 1; position: relative; }
body #appView #templateStudioDialog #propertiesPanel .effect-enable-control > span { padding: 0; background: transparent; border: 0; color: #e4edf3; }
body #appView #templateStudioDialog #propertiesPanel .effect-controls { display: grid; gap: 10px; padding-top: 10px; }
body #appView #templateStudioDialog .glow-effect-card:not(:has(#propGlowEnabled:checked)) #glowControls { display: none; }
body #appView #templateStudioDialog #propertiesPanel .segmented-control { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
body #appView #templateStudioDialog #propertiesPanel .segmented-control button { padding: 5px 3px; font-size: 11px; min-width: 0; }
body #appView #templateStudioDialog #sharedTextStyleDetails p { margin: 0; line-height: 1.5; }

body #appView #templateStudioDialog #propertiesPanel .colour-control > * { grid-area: auto; }
body #appView #templateStudioDialog #propertiesPanel .colour-control > span { font-weight: 500; }
body #appView #templateStudioDialog #propertiesPanel .range-control { padding: 0; border: 0; background: transparent; border-radius: 0; }

body #appView #templateStudioDialog #componentLayoutPanel { gap: 12px; }
body #appView #templateStudioDialog :is(.studio-layout-size,.studio-layout-order) { display: grid; gap: 9px; padding: 0; background: transparent; border: 0; }
body #appView #templateStudioDialog .studio-layout-order { border-top: 1px solid #294554; padding-top: 10px; }
body #appView #templateStudioDialog #componentLayoutPanel p { margin: 0; font-size: 11px; }
body #appView #templateStudioDialog #componentLayoutPanel .component-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid #294554; padding-top: 12px; }
body #appView #templateStudioDialog #componentLayoutPanel .field-label { font-size: 12px; color: #a6bdcc; }

/* One compact rhythm across selectable content, image controls and creation dialogs. */
body #appView #templateStudioDialog #propertiesPanel :is(.asset-choice-mapping-simple,.asset-choice-position-simple,.asset-choice-advanced-body,.style-section-body) { display:grid; gap:9px; min-width:0; }
body #appView #templateStudioDialog #propertiesPanel .asset-choice-step-heading { gap:8px; margin:0 0 4px; }
body #appView #templateStudioDialog #propertiesPanel .asset-choice-step-heading strong { font-size:12px; }
body #appView #templateStudioDialog #propertiesPanel .asset-choice-step-heading small { font-size:11px; line-height:1.45; }
body #appView #templateStudioDialog #propertiesPanel .asset-choice-position-simple { border-top:1px solid #294554; padding-top:10px; }
body #appView #templateStudioDialog #propertiesPanel .asset-choice-advanced-settings { margin:10px 0; }
body #appView #templateStudioDialog #propertiesPanel .studio-image-precision { border-top:1px solid #294554; padding-top:9px; }
body #appView #templateStudioDialog #propertiesPanel .studio-image-precision > summary { cursor:pointer; color:#a6bdcc; font-size:12px; }
body #appView #templateStudioDialog #propertiesPanel .studio-image-precision[open] > summary { margin-bottom:9px; }
body #appView #templateStudioDialog #propertiesPanel .shape-preset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
body #appView #templateStudioDialog #propertiesPanel .shape-preset { min-height:34px; padding:6px 8px; font-size:12px; }
body #fieldBuilderDialog :is(label,.compact-field) { min-width:0; }
body #fieldBuilderDialog .m5-help { font-size:12px; line-height:1.5; }
body #fieldBuilderDialog :is(input,select) { width:100%; min-width:0; }
body #fieldBuilderDialog :is(input[type=radio],input[type=checkbox]) { width:auto; }
body #fieldBuilderDialog .form-grid { gap:12px; }
@media (max-width:760px) {
  body #fieldBuilderDialog { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; }
  body #fieldBuilderDialog .form-grid { grid-template-columns:1fr; }
}

body dialog.studio-name-dialog { width:min(430px,calc(100vw - 32px)); padding:22px; color:#f2f7fb; background:#0b1a26; border:1px solid #577689; border-radius:12px; }
body dialog.studio-name-dialog::backdrop { background:#020a13b8; }
body dialog.studio-name-dialog form { display:grid; gap:14px; }
body dialog.studio-name-dialog h2 { font-size:18px; margin:0; }
body dialog.studio-name-dialog label { display:grid; gap:7px; font-size:12px; }
body dialog.studio-name-dialog p { margin:0; }
body dialog.studio-name-dialog .button-row { display:flex; justify-content:flex-end; gap:8px; }

/* Stored-image selection: readable thumbnails and genuine checkbox states. */
body #appView #templateStudioDialog #assetChoiceAllowedList { display:grid; gap:7px; max-height:350px; overflow:auto; padding:2px; overscroll-behavior:contain; }
body #appView #templateStudioDialog #assetChoiceAllowedList .asset-choice-option { display:grid !important; grid-template-columns:18px 60px minmax(0,1fr); gap:8px; align-items:center; min-height:78px; padding:8px !important; border:1px solid #496778; background:#0b1e2b; border-radius:7px; cursor:pointer; }
body #appView #templateStudioDialog #assetChoiceAllowedList .asset-choice-option[hidden] { display:none !important; }
body #appView #templateStudioDialog #assetChoiceAllowedList .asset-choice-option img { width:60px !important; height:60px !important; object-fit:contain; border:1px solid #294554; border-radius:5px; background:repeating-conic-gradient(#162b37 0% 25%,#0a1924 0% 50%) 0 0 / 12px 12px; }
body #appView #templateStudioDialog #assetChoiceAllowedList .asset-choice-option > span { font-size:12px; line-height:1.4; overflow-wrap:anywhere; padding:0; border:0; background:none; color:#e7f5fb; }
body #appView #templateStudioDialog #assetChoiceAllowedList .asset-choice-option input[type=checkbox] { appearance:none; display:grid; place-content:center; position:static; opacity:1; width:18px !important; height:18px !important; min-width:18px !important; min-height:18px !important; max-width:18px !important; max-height:18px !important; padding:0 !important; margin:0; border:1px solid #96b4c6; border-radius:4px; background:#091a25; cursor:pointer; transform:none; }
body #appView #templateStudioDialog #assetChoiceAllowedList input[type=checkbox]::after { display:none; }
body #appView #templateStudioDialog #assetChoiceAllowedList input[type=checkbox]::before { content:""; display:block; border:0; position:static; transform:none; width:auto; height:auto; }
body #appView #templateStudioDialog #assetChoiceAllowedList input[type=checkbox]:checked { background:#00c2db; border-color:#00e1f3; }
body #appView #templateStudioDialog #assetChoiceAllowedList input[type=checkbox]:checked::before { content:"✓"; color:#00202b; font-size:14px; font-weight:800; }
body #appView #templateStudioDialog #assetChoiceAllowedList .asset-choice-option:has(input:checked) { border-color:#00d9ed; background:#003441; }
body #appView #templateStudioDialog #assetChoiceAllowedList .asset-choice-option:hover:not(.read-only) { border-color:#14dcee; box-shadow:0 0 0 1px #00c2db55,0 0 12px #00c2db24; }
body #appView #templateStudioDialog #assetChoiceAllowedList .asset-choice-option:has(input:focus-visible) { outline:2px solid #5becfa; outline-offset:1px; }
body #appView #templateStudioDialog #assetChoiceAllowedCount { white-space:nowrap; font-size:10px; font-weight:500; padding:3px 5px; border-radius:4px; }
body #appView #templateStudioDialog .studio-asset-search { padding:8px 0 0; }
body #appView #uploadAnalysisStatus { margin:12px 0; font-size:13px; line-height:1.5; }
body #appView .upload-analysis-preview { overflow:auto; max-height:360px; margin:12px 0; border:1px solid #284553; border-radius:8px; padding:12px; }
body #appView .upload-analysis-preview table { border-collapse:collapse; width:100%; }
body #appView .upload-analysis-preview td { border:1px solid #284553; padding:7px 10px; min-width:90px; max-width:260px; overflow-wrap:anywhere; vertical-align:top; }
body #appView .upload-analysis-preview p { font-size:12px; color:#a9bec9; }
body #appView #templateStudioDialog .asset-choice-step-heading > span,
body #appView #templateStudioDialog .asset-choice-compact-section summary b { color:#5fe6f1; background:#003441; border-color:#007a8c; }
/* Source families share a full-width, responsive card rhythm as providers change. */
body #appView #sourceMethods .data-source-intro { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
body #appView #sourceMethods .source-family { padding: 0; border: 0; background: transparent; box-shadow: none; min-width: 0; }
body #appView #sourceMethods .source-family h2 { font-size: 17px; margin: 4px 0 6px; }
body #appView #sourceMethods .source-family > p { max-width: none; margin: 0 0 12px; }
body #appView #sourceMethods .source-method-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,290px),1fr)); gap: 12px; }
body #appView #sourceMethods .source-method { min-height: 0; padding: 16px; gap: 5px; }
body #appView #sourceMethods .source-method[hidden] { display: none !important; }
body #appView #sourceMethods .source-method .source-icon { margin: 0 0 4px; }
body #appView #sourceMethods .source-method strong { margin: 0; }
body #appView [data-source-provider][hidden] { display: none !important; }
/* Guided creation is a compact navigation hub, not a simulated completion tracker. */
body #appView #createView { max-width: none; width: 100%; min-width: 0; }
body #appView #createView .wizard-progress { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 0 0 20px; }
body #appView #createView .wizard-progress i { display: none; }
body #appView #createView .wizard-progress button { width: 100%; min-width: 0; justify-content: center; padding: 12px 8px; border: 1px solid #496778; border-radius: 8px; background: #0b1e2b; color: #edfaff; }
body #appView #createView .wizard-progress button.current { background: #003744; border-color: #00e4f4; box-shadow: inset 0 0 0 1px #00c2db; }
body #appView #createView .wizard-progress button:hover { border-color: #00e4f4; box-shadow: 0 0 12px #00d9ed40; }
body #appView #createView .wizard-progress button:active { background: #00303c; }
body #appView #createView .step-card[hidden] { display: none !important; }
body #appView #createView :is(.source-method-grid,.guided-action-grid) { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,250px),1fr)); gap: 12px; }
body #appView #createView :is(.source-method,.guided-action) { min-height: 0; padding: 16px; text-align: left; overflow-wrap: anywhere; }
body #appView #createView .guided-subhead { display: block; }
body #appView #createView .guided-subhead span { display: block; margin-top: 6px; }
body #appView #createView .guided-inline-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
body #appView #createView .row { flex-wrap: wrap; gap: 10px; }
@media (max-width: 600px) {
  body #appView #createView :is(.step-head,.step-body) { padding: 16px; }
  body #appView #createView .wizard-progress button { flex-direction: column; gap: 6px; font-size: 12px; }
  body #appView #createView .wizard-progress button span { display: block; white-space: normal; line-height: 1.3; }
  body #appView #createView .row > button { width: 100%; }
}
body #appView #createView [hidden] { display: none !important; }
body #appView #createView .pf-flow-feedback { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin: 0 0 16px; font-size: 13px; font-weight: 400; line-height: 1.5; border: 1px solid #149ced; border-radius: 8px; color: #8bd8ff; background: #082b43; }
body #appView #createView .pf-flow-feedback::before { content: 'i'; display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: #149ced; color: #001b29; font-weight: 700; }
body #appView #createView .pf-flow-feedback[data-feedback=warning] { border-color: #e5a138; background: #39291d; color: #ffdc9f; }
body #appView #createView .pf-flow-feedback[data-feedback=warning]::before { content: '!'; background: #e5a138; }
body #appView #createView .pf-flow-feedback[data-feedback=error] { border-color: #ff625a; background: #351e24; color: #ffaea4; }
body #appView #createView .pf-flow-feedback[data-feedback=error]::before { content: '!'; background: #ff625a; }
body #appView #createView .pf-flow-hint { border: 0; background: transparent; padding: 0; margin: 12px 0; color: #a7bdcd; font-size: 13px; line-height: 1.5; }
body #appView #createView #wizardProgress { gap: 2px; padding: 0; border-bottom: 1px solid #315061; margin: 0 0 20px; }
body #appView #createView #wizardProgress button[role=tab] { min-height: 44px; border: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; background: #10212d; box-shadow: none; color: #b6c8d6; }
body #appView #createView #wizardProgress button[role=tab][aria-selected=true] { border-bottom-color: #00e4f4; background: #10212d; color: #eefaff; box-shadow: none; }
body #appView #createView #wizardProgress button[role=tab]:hover { color: #00e4f4; border-bottom-color: #00e4f4; box-shadow: none; }
body #appView #createView #wizardProgress button[role=tab]:active { background: #0c2b39; }
body #appView #createView #wizardProgress button[role=tab] b { background: transparent; color: inherit; border: 0; box-shadow: none; }
/* Keep form labels, help and action choices on separate, predictable rows. */
body #appView #createView .step-body label { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin: 16px 0 20px; min-width: 0; }
body #appView #createView .step-body label select { width: 100%; margin: 0; min-width: 0; }
body #appView #createView .step-body label + p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; font-weight: 400; color: #a7bdcd; }
body #appView #createView #step3 .guided-action-grid { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 20px; align-items: start; }
body #appView #createView #step3 .guided-action { display: flex; flex-direction: column; justify-content: flex-start; gap: 5px; min-height: 88px; height: auto; padding: 14px 16px; }
body #appView #createView #step3 .guided-action strong { font-size: 13px; line-height: 1.4; margin: 0; }
body #appView #createView #step3 .guided-action span { font-size: 12px; line-height: 1.5; }
@media (max-width: 750px) {
  body #appView #createView #step3 .guided-action-grid { grid-template-columns: minmax(0,1fr); }
  body #appView #createView #step3 .guided-action { min-height: 0; }
}
dialog.pf-native-import { width: min(900px, calc(100vw - 32px)); max-height: 90vh; overflow: auto; padding: 24px; background: var(--panel, #141a23); color: var(--text, #eef3f8); border: 1px solid #354350; border-radius: 12px; }
.pf-native-import::backdrop { background: #0009; }
.pf-native-import-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 20px 0; }
.pf-native-import-fields label { display: grid; gap: 8px; min-width: 0; }
.pf-native-import-fields input, .pf-native-import-fields select { width: 100%; min-width: 0; }
.pf-native-import .native-table-wrap { max-height: 38vh; overflow: auto; margin-bottom: 20px; }
.pf-native-import form { display: flex; justify-content: flex-end; }
#tablesView .native-workbook-card { padding: 10px 14px; margin-bottom: 0; border-radius: 10px 10px 0 0; }
#tablesView .native-workbook-head { display: flex; align-items: center; gap: 16px; margin: 0; }
#tablesView .native-tabs-wrap { flex: 1; min-width: 0; margin: 0; }
#tablesView .native-table-manage { margin-top: 8px; gap: 6px; }
#tablesView .native-table-editor-card { padding: 14px; border-radius: 0 0 10px 10px; margin-top: -1px; }
#tablesView .native-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
#tablesView .native-table-toolbar .row { flex: 1; gap: 8px; }
#tablesView .native-table-status { font-size: 13px; text-align: left; flex-basis: 100%; order: 3; margin: 4px 0; }
#tablesView .native-field-disclosure { margin: 8px 0 12px; font-size: 13px; }
#tablesView .native-field-disclosure summary { cursor: pointer; color: #8edfeb; }
#tablesView .native-table-editor-card > .native-table-wrap { height: clamp(360px, 55vh, 800px); max-height: none; overflow: auto; background: #0c1720; }
#tablesView .native-table { width: max-content; min-width: 100%; table-layout: fixed; }
#tablesView .native-table th, #tablesView .native-table td { min-width: 180px; font-size: 14px; line-height: 1.5; padding: 10px 12px; }
#tablesView .native-table th { position: sticky; top: 0; z-index: 2; background: #132530; }
#tablesView .native-table th:first-child, #tablesView .native-table td:first-child { min-width: 48px; width: 48px; position: sticky; left: 0; background: #132530; }
#tablesView .native-table th:first-child { z-index: 3; }
#tablesView .native-table td[contenteditable="true"]:focus { outline: 2px solid #13d8ef; outline-offset: -2px; background: #102c37; }
#tablesView .native-table-help { margin-top: 12px; }
#tablesView [hidden] { display: none !important; }
@media (max-width: 750px) {
  #tablesView .native-workbook-head { flex-wrap: wrap; }
  #tablesView .native-table th, #tablesView .native-table td { min-width: 150px; }
  #tablesView .native-table-editor-card { padding: 8px; }
}
#tablesView #nativeMigrationDialog p, #tablesView #nativeMigrationDialog li { font-size: 13px; font-weight: 400; line-height: 1.6; }
#nativeMigrationDialog #nativeMigrationPreview { margin: 16px 0; }
#nativeMigrationDialog .native-import-data { overflow: auto; max-height: 260px; border: 1px solid #334653; border-radius: 6px; }
#nativeMigrationDialog .native-import-data table { border-collapse: collapse; width: 100%; table-layout: auto; }
#nativeMigrationDialog .native-import-data th, #nativeMigrationDialog .native-import-data td { min-width: 150px; padding: 10px 12px; text-align: left; border: 1px solid #283b48; font-size: 13px; font-weight: 400; white-space: nowrap; }
#nativeMigrationDialog .native-import-data th { background: #18313e; font-weight: 600; position: sticky; top: 0; }
#nativeMigrationDialog .native-import-data tbody tr:nth-child(even) { background: #12232e; }
#nativeMigrationDialog .native-import-caption { color: #9fb2bf; margin: 8px 0 12px; }
#nativeMigrationDialog .native-import-notes, #nativeMigrationDialog .native-import-types { border-top: 1px solid #304450; padding: 12px 0; }
#nativeMigrationDialog summary { cursor: pointer; font-size: 13px; color: #b2e7ee; }
#nativeMigrationDialog ul { padding-left: 20px; margin: 8px 0; }
.native-coordinate { display: block; color: #91aebb; font-size: 11px; font-weight: 500; margin-bottom: 3px; }
#nativeMigrationDialog .native-import-data th:first-child { min-width: 52px; width: 52px; position: sticky; left: 0; z-index: 2; text-align: center; }
#nativeMigrationDialog .native-import-data .native-source-header th, #nativeMigrationDialog .native-import-data .native-source-header td { color: #a9c3cf; font-style: italic; }
.sheet-preview-legend .header-key { background: #123e4b; border-color: #12d7ed; }
.sheet-preview-legend .data-key { background: #163e33; border-color: #4ed39a; }
.sheet-preview-legend .column-key { background: #493820; border-color: #ffb84d; }
#sheetPreviewTable .detected-header-row td, #nativeMigrationDialog .native-import-data .detected-header-row td, #nativeMigrationDialog .native-import-data .detected-header-row th { background: #123e4b; box-shadow: inset 0 2px #12d7ed, inset 0 -1px #12d7ed; }
#sheetPreviewTable .detected-first-row td, #nativeMigrationDialog .native-import-data .detected-first-row td, #nativeMigrationDialog .native-import-data .detected-first-row th { background: #163e33; box-shadow: inset 0 -2px #4ed39a; }
#sheetPreviewTable .detected-first-column, #nativeMigrationDialog .native-import-data .detected-first-column { border-left: 3px solid #ffb84d; border-right: 2px solid #ffb84d; }
#sheetPreviewTable thead .detected-first-column, #nativeMigrationDialog .native-import-data thead .detected-first-column { color: #ffd28e; }
#nativeMigrationDialog .native-import-data { overflow-x: scroll; scrollbar-gutter: stable; scrollbar-color: #718c9c #10232f; scrollbar-width: auto; }
#nativeMigrationDialog .native-import-data::-webkit-scrollbar { height: 13px; width: 13px; }
#nativeMigrationDialog .native-import-data::-webkit-scrollbar-thumb { background: #718c9c; border: 3px solid #10232f; border-radius: 8px; }
#nativeMigrationDialog .native-import-data .native-import-excluded { color: #7d919d; background: #101b24; opacity: .65; }
#tablesView .native-table-empty { padding: 24px 8px 12px; }
#tablesView .native-table-empty h2 { margin-bottom: 8px; font-size: 19px; }
#tablesView .native-table-empty p { color: #a5b7c3; font-size: 14px; }
#tablesView .native-table-editor-card:has(.native-table-empty:not([hidden])) { border-radius: 10px; margin-top: 0; }

/* Native date setup stays compact so the grid remains the main workspace. */
#tablesView #nativeDateSettings { margin: 8px 0; padding: 12px 14px; border: 1px solid #294653; border-radius: 8px; background: #0b1c27; }
#tablesView #nativeDateSettings summary { font-size: 13px; font-weight: 600; color: #d9e8ef; cursor: pointer; }
#tablesView .native-date-state { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 500; color: #82dcea; }
#tablesView #nativeDateSettings .native-date-hint { margin: 8px 0 12px; font-size: 12px; font-weight: 400; line-height: 1.5; color: #a5b7c3; }
#tablesView .native-date-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; max-width: 760px; }
#tablesView .native-date-fields label { display: flex; flex-direction: column; gap: 7px; margin: 0; font-size: 12px; font-weight: 500; }
#tablesView .native-date-fields select { margin: 0; width: 100%; min-height: 38px; }
#tablesView #nativeDateSettings .native-date-example { margin: 10px 0 0; font-size: 11px; line-height: 1.5; font-weight: 400; color: #91a8b6; }
#tablesView .native-table-toolbar { gap: 8px; }
#tablesView .native-table-toolbar .row { gap: 8px; flex-wrap: wrap; }
#tablesView .native-table-toolbar button { min-height: 34px; padding: 7px 11px; font-size: 12px; }
#tablesView .native-table-status { font-size: 12px; line-height: 1.5; }
@media (max-width: 650px) { #tablesView .native-date-fields { grid-template-columns: 1fr; } }
#tablesView #nativeTableGrid { table-layout: fixed; width: max-content; min-width: 100%; }
#tablesView #nativeTableGrid th:not(:first-child), #tablesView #nativeTableGrid td:not(:first-child) { width: 220px; min-width: 160px; }
#tablesView #nativeTableGrid .native-letter-row th { height: 26px; padding: 4px 10px; text-align: center; font-size: 11px; font-weight: 500; color: #91a8b6; background: #102530; top: 0; }
#tablesView #nativeTableGrid .native-field-row th { top: 26px; height: 36px; padding: 7px 10px; }
#tablesView #nativeTableGrid .native-col { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#tablesView #nativeTableGrid .native-col strong { font-size: 12px; }
#tablesView #nativeTableGrid .native-col small { font-size: 10px; opacity: .7; }
#tablesView #nativeTableGrid tbody td { height: 30px; padding: 5px 10px; font-size: 13px; border-bottom: 1px solid #1b3441; }
#tablesView #nativeTableGrid tbody td:first-child { font-size: 11px; text-align: center; color: #7895a5; }
/* Generate: one design, a bounded record workspace, and one clear action panel. */
body #generateView .generate-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }
body #generateView .generate-design-panel { grid-column:1 / -1; display:grid; grid-template-columns:minmax(240px,1fr) minmax(280px,1.3fr); gap:12px 24px; padding:20px; }
body #generateView .generate-design-panel h2 { grid-column:1 / -1; margin:0; font-size:17px; }
body #generateView .generate-design-field { margin:0; min-width:0; }
body #generateView .generate-template-confirmation { grid-column:2; grid-row:2 / 5; margin:0; background:var(--panel-2); border:1px solid var(--border); padding:14px; }
body #generateView .generate-source-summary { margin:0; font-size:12px; line-height:1.6; background:transparent; padding:0; border:0; }
body #generateView #loadGenerateRowsBtn { width:auto; justify-self:start; }
body #generateView .generate-records-panel, body #generateView .generate-review-panel { min-width:0; padding:20px; }
body #generateView .generate-records-panel h2, body #generateView .generate-review-panel h2 { font-size:17px; margin:0 0 16px; }
body #generateView .generate-review-panel { position:sticky; top:20px; }
body #generateView .bulk-mode-grid { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 16px; }
body #generateView .bulk-mode { min-height:40px; padding:10px 12px; width:auto; flex:1 1 auto; border:1px solid var(--border-strong); border-radius:7px; color:var(--text); background:var(--panel); box-shadow:none; }
body #generateView .bulk-mode b { font-size:12px; color:inherit; }
body #generateView .bulk-mode small { display:none; }
body #generateView .bulk-mode:hover:not(:disabled) { border-color:var(--accent); box-shadow:0 0 12px #00c2db30; }
body #generateView .bulk-mode.active { border-color:var(--accent); background:var(--accent-soft); color:#bdf8ff; }
body #generateView .bulk-mode:active:not(:disabled) { background:#005165; }
body #generateView .bulk-row-list { max-height:480px; overflow:auto; overscroll-behavior:contain; border:1px solid var(--border); border-radius:8px; padding:0; }
body #generateView .bulk-row-list .row-option { margin:0; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:12px; min-height:44px; background:var(--panel); gap:12px; }
body #generateView .bulk-row-list .row-option:hover { background:var(--panel-2); }
body #generateView .bulk-row-list .row-option:has(input:checked) { background:var(--accent-soft); box-shadow:inset 3px 0 var(--accent); }
body #generateView .selection-tools { display:flex; gap:14px; align-items:center; margin:12px 0; }
body #generateView #selectedRowCount { margin-left:auto; color:var(--text); }
body #generateView .generate-actions { display:grid; grid-template-columns:1fr; gap:10px; margin-top:18px; }
body #generateView .generate-actions button { width:100%; }
body #generateView .bulk-filter { margin:12px 0; padding:14px; border:1px solid var(--border); background:var(--panel-2); border-radius:8px; }
body #generateView .generate-workbench-progress:not(.hidden) { background:#092d46; border:1px solid #169dff; border-radius:7px; padding:12px; margin:12px 0; color:#a9dcff; }
@media(max-width:1100px) { body #generateView .generate-grid { grid-template-columns:minmax(0,1fr); } body #generateView .generate-review-panel { position:static; } }
@media(max-width:700px) { body #generateView .generate-design-panel { grid-template-columns:minmax(0,1fr); } body #generateView .generate-template-confirmation { grid-column:auto; grid-row:auto; } body #generateView .bulk-row-list { max-height:55vh; } body #generateView .generate-design-panel, body #generateView .generate-records-panel, body #generateView .generate-review-panel { padding:14px; } }
body #generateView .bulk-row-list .row-option input[type=checkbox] { width:18px; min-width:18px; max-width:18px; height:18px; padding:0; margin:2px 0 0; }
body #generateView .bulk-row-list .row-option strong { font-size:12px; }
body #generateView .bulk-row-list .row-option small { font-size:12px; color:var(--muted); line-height:1.5; }
body #generateView .temp-adjust-banner { color:#b4dfff; border:1px solid #176c9d; background:#092b40; font-size:12px; line-height:1.5; }
body #generateView .generate-review-panel { background:var(--panel); border-color:var(--border); }
body #generateView .generate-design-select-trigger { background:var(--panel); border:1px solid var(--border-strong); }
body #generateView .generate-design-select-trigger:hover, body #generateView .generate-design-select-trigger[aria-expanded=true] { border-color:var(--accent); }
body #generateView #renderGenerateBtn.is-generating:disabled { background:var(--accent) !important; border-color:#00e0f5 !important; color:#001923 !important; opacity:1; display:flex; align-items:center; justify-content:center; gap:10px; }
body #generateView #renderGenerateBtn.is-generating::before { content:''; width:15px; height:15px; border:2px solid #006777; border-top-color:#001923; border-radius:50%; animation:pf-generate-spin .8s linear infinite; }
@keyframes pf-generate-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { body #generateView #renderGenerateBtn.is-generating::before { animation:none; } }
body #generateView .bulk-row-list .row-option input[type=checkbox] { min-height:18px; max-height:18px; align-self:start; }
body .sidebar.app-rail { display:flex; flex-direction:column; height:calc(100vh - 76px); position:sticky; top:76px; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; }
body .sidebar.app-rail > .nav { overflow:auto; min-height:0; flex:1; }
body .sidebar.app-rail > nav { overflow:visible; min-height:auto; flex:0 0 auto; }
body .sidebar.app-rail .sidebar-bottom { flex-shrink:0; margin-top:12px; padding-top:12px; }
body #workspaceGenerationQueue { position:static; margin:12px 0; padding:12px; max-height:230px; overflow:auto; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); font-size:12px; }
body #workspaceGenerationQueue .generation-queue-heading { display:flex; flex-direction:column; gap:4px; }
body #workspaceGenerationQueue .active-job-row { display:flex; flex-direction:column; gap:8px; padding:10px 0; border-bottom:1px solid var(--border); }
body #workspaceGenerationQueue .workspace-quota-status { margin-top:10px; color:var(--muted); font-size:11px; }
body #generateView .generation-result-summary { border:1px solid #268964; border-radius:8px; padding:14px; background:#0c2d24; }
body #generateView .generation-result-summary.has-failures { border-color:#d6973a; background:#332713; }
body #generateView #generatedOutput { display:block; margin-top:18px; }
@media(max-width:900px) { body .sidebar.app-rail { height:auto; position:static; overflow:visible; } }
/* Fixed activity footprint: status updates cannot resize the sidebar. */
body #workspaceGenerationQueue { box-sizing:border-box; height:300px; min-height:300px; max-height:300px; flex:0 0 300px; padding:12px; overflow:hidden; display:grid; grid-template-rows:24px 60px 100px 24px minmax(0,1fr); gap:4px; }
body #workspaceGenerationQueue.hidden, body #workspaceGenerationQueue[hidden] { display:none; }
body #workspaceGenerationQueue .generation-queue-heading { flex-direction:row; align-items:center; justify-content:space-between; font-size:11px; gap:6px; white-space:nowrap; }
body #workspaceGenerationQueue .generation-queue-heading > span { font-size:10px; color:var(--muted); }
body #workspaceGenerationQueue .workspace-current-job { min-height:0; overflow:hidden; padding:8px 0; display:flex; flex-direction:column; justify-content:center; gap:6px; }
body #workspaceGenerationQueue .workspace-current-job > span, body #workspaceGenerationQueue .workspace-job-status { font-size:11px; color:var(--muted); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; display:block; }
body #workspaceGenerationQueue .workspace-job { padding:6px 0; min-width:0; }
body #workspaceGenerationQueue .workspace-job-title { display:flex; align-items:center; justify-content:space-between; gap:8px; }
body #workspaceGenerationQueue .workspace-job-title strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px; }
body #workspaceGenerationQueue .workspace-job-title button { flex-shrink:0; font-size:11px; min-height:24px; padding:2px; }
body #workspaceGenerationQueue .job-progress { margin:8px 0 0; height:5px; }
body #workspaceGenerationQueue .workspace-quota-status { margin:0; padding:7px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:4px; font-size:10px; }
body #workspaceGenerationQueue .workspace-quota-status > div { display:flex; justify-content:space-between; }
body #workspaceGenerationQueue .workspace-quota-status small { font-size:9px; }
body #workspaceGenerationQueue .workspace-queued-heading { display:flex; justify-content:space-between; align-items:center; font-size:10px; color:var(--muted); }
body #workspaceGenerationQueue .workspace-queued-list { overflow-y:auto; overflow-x:hidden; min-height:0; overscroll-behavior:contain; scrollbar-gutter:stable; }
body #workspaceGenerationQueue .workspace-queued-list .workspace-job { border-bottom:1px solid var(--border); }
body #workspaceGenerationQueue .workspace-idle { color:var(--muted); font-size:10px; }
body .sidebar .user-summary { padding:8px; font-size:11px; line-height:1.4; }

/* Keep queue navigation outside generation feedback, with a clear gap. */
body #generateView #generatedOutput .generation-queue-link { display:block; position:static; margin:12px 0 0; max-width:100%; }
body #generateView .generation-result-summary strong { display:block; }
body #generateView .generation-result-summary p { margin:8px 0 0; }
/* Native disclosure controls keep navigation compact and keyboard accessible. */
body .sidebar .nav-category { margin:0 0 6px; border:0; padding:0; background:transparent; }
body .sidebar .nav-category > summary { cursor:pointer; padding:8px 10px; color:#9bb3c3; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:6px; }
body .sidebar .nav-category > summary:hover { color:#58d6ed; background:#102c3c; }
body .sidebar .nav-category > summary:focus-visible { outline:2px solid #58d6ed; outline-offset:-2px; }
body .sidebar .nav-category:not([open]) > .nav { display:none!important; }
body .sidebar .nav-category > .nav { width:100%; }
body .sidebar #workspaceSwitcher { display:flex; align-items:flex-end; gap:8px; }
body .sidebar #workspaceSwitcher[hidden] { display:none!important; }
body .sidebar #workspaceSelectWrap { flex:1; min-width:0; }
body .sidebar #workspaceSelect { width:100%; min-width:0; margin:0; height:38px; }
body .sidebar #createAnotherWorkspace { flex:0 0 38px; width:38px; height:38px; min-height:38px; margin:0; padding:0; font-size:24px; line-height:1; border:1px solid #315365; border-radius:7px; }
body .sidebar #createAnotherWorkspace:hover { border-color:#58d6ed; color:#58d6ed; background:#102c3c; }
body .topbar #workspaceSwitcher { display:flex; align-items:flex-end; gap:8px; margin:0; min-width:0; }
body .topbar #workspaceSwitcher[hidden] { display:none!important; }
body .topbar #workspaceSelectWrap { min-width:0; }
body .topbar #workspaceSelectWrap label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
body .topbar #workspaceSelect { margin:0; width:clamp(140px,20vw,260px); min-width:0; height:38px; }
body .topbar #createAnotherWorkspace { flex:0 0 38px; width:38px; height:38px; min-height:38px; margin:0; padding:0; font-size:24px; line-height:1; border:1px solid #315365; border-radius:7px; }
body .topbar #createAnotherWorkspace:hover { border-color:#58d6ed; color:#58d6ed; background:#102c3c; }
@media(max-width:700px) { body .topbar #workspaceSelect { width:140px; } body .topbar .top-actions { flex-wrap:wrap; } }
body #guidedHelpToggle { display:inline-flex; align-items:center; gap:8px; opacity:1!important; }
body #guidedHelpToggle::before { content:''; flex:0 0 28px; width:28px; height:16px; border-radius:12px; background:radial-gradient(circle at 8px 8px,#adc2d0 5px,transparent 6px),#304554; border:1px solid #5a7180; }
body #guidedHelpToggle[aria-pressed="true"] { color:#69e2f1; background:#073c48; border:1px solid #21c3da; }
body #guidedHelpToggle[aria-pressed="true"]::before { background:radial-gradient(circle at 20px 8px,#062a34 5px,transparent 6px),#55dbea; border-color:#55dbea; }
body #guidedHelpToggle[aria-pressed="false"] { color:#adc2d0; background:#132330; border:1px solid #536775; }
body #appView.compact-help .pf-help-disclosure { display:none!important; }
body .signed-in-profile { display:flex; align-items:center; gap:8px; min-width:0; }
body .signed-in-profile .profile-avatar { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border-radius:50%; overflow:hidden; background:#163b49; color:#6cdeeb; font-size:11px; font-weight:700; }
body .profile-avatar img { width:100%; height:100%; object-fit:cover; }
body #signedInName { max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
@media(max-width:700px) { body #signedInName { max-width:100px; } }
/* Use the approved horizontal artwork, including its original lettering. */
body .m5-topbar .brand .brand-wordmark { display:block; width:280px; height:64px; object-fit:cover; object-position:center; border-radius:6px; flex-shrink:0; }
@media(max-width:1100px) { body .m5-topbar .brand .brand-wordmark { width:220px; height:51px; } }
@media(max-width:700px) { body .m5-topbar .brand .brand-wordmark { width:190px; height:44px; } }

/* Billing catalogue: consistent cards, honest unavailable controls. */
body .billing-page.active { display: flex; flex-direction: column; gap: 18px; }
body .billing-page .customer-plan-grid, body .billing-page .topup-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body .billing-page .customer-plan-card, body .billing-page .topup-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; min-width: 0; }
body .billing-page .customer-plan-card ul { flex: 1; padding-left: 18px; line-height: 1.7; }
body .billing-page .customer-plan-card button, body .billing-page .topup-card button { margin-top: auto; }
body .billing-page progress { width: 100%; height: 8px; accent-color: #16c9d4; }
body .billing-page .billing-guidance { padding: 14px 18px; border: 1px solid var(--border, #334155); border-radius: 10px; }
body .billing-page .billing-guidance summary { cursor: pointer; font-weight: 600; }
body .billing-page .billing-guidance p { margin: 12px 0 0; }
@media (max-width: 1200px) { body .billing-page .customer-plan-grid, body .billing-page .topup-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 650px) { body .billing-page .customer-plan-grid, body .billing-page .topup-grid { grid-template-columns: 1fr; } }

/* Plan comparison hierarchy, using the established navy/cyan palette. */
body .billing-page .customer-plan-card {
  position: relative; overflow: hidden; gap: 16px; padding: 24px 20px;
  border: 1px solid #304354; border-radius: 16px;
  background: linear-gradient(155deg, rgba(22,201,212,.07), transparent 46%), #111f30;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
body .billing-page .customer-plan-card::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 3px; background: #16c9d4; border-radius: 0 0 4px 4px; }
body .billing-page .plan-tier-free::before { background: #6f879b; }
body .billing-page .plan-tier-heading { display: flex; align-items: center; gap: 10px; }
body .billing-page .plan-tier-heading h3 { margin: 0; font-size: 21px; color: #f4f8fc; }
body .billing-page .plan-tier-mark { display: grid; grid-template-columns: repeat(2,5px); gap: 3px; padding: 9px; background: rgba(22,201,212,.1); border-radius: 9px; }
body .billing-page .plan-tier-mark i { width: 5px; height: 5px; border-radius: 1px; background: #16c9d4; }
body .billing-page .plan-introduction { margin: -7px 0 0; font-size: 13px; color: #a9bacb; }
body .billing-page .plan-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 7px; text-align: left; }
body .billing-page .plan-price b { font-size: clamp(28px,2.3vw,36px); line-height: 1.15; letter-spacing: -1px; color: #f4f8fc; }
body .billing-page .plan-price span { font-size: 12px; color: #a9bacb; }
body .billing-page .plan-highlight { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid rgba(22,201,212,.16); border-radius: 10px; background: rgba(22,201,212,.06); }
body .billing-page .plan-highlight strong { font-size: 26px; line-height: 1.1; color: #56dbe3; }
body .billing-page .plan-highlight span { font-size: 12px; color: #b5c7d8; }
body .billing-page .plan-capacity { margin: 0; display: grid; gap: 9px; }
body .billing-page .plan-capacity div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
body .billing-page .plan-capacity dt { color: #a9bacb; }
body .billing-page .plan-capacity dd { margin: 0; color: #edf5fb; font-weight: 600; text-align: right; }
body .billing-page .customer-plan-card .plan-inclusions { margin: 0; padding: 14px 0 0; border-top: 1px solid #2b3c4e; list-style: none; display: grid; gap: 9px; align-content: start; font-size: 12px; line-height: 1.5; color: #c7d3df; }
body .billing-page .plan-inclusions li { position: relative; padding-left: 13px; }
body .billing-page .plan-inclusions li::before { content: ''; position: absolute; left: 0; top: .55em; width: 4px; height: 4px; border-radius: 50%; background: #6d92a6; }
body .billing-page .plan-eligibility { color: #a9bacb; font-size: 11px; line-height: 1.5; }

body .billing-page .plan-tier-pro { border-color: #16c9d4; background: linear-gradient(150deg, rgba(22,201,212,.13), transparent 60%), #111f30; }
body .billing-page .plan-recommendation { margin-left: auto; color: #66e2e8; border: 1px solid rgba(22,201,212,.35); background: rgba(22,201,212,.1); border-radius: 20px; padding: 4px 7px; font-size: 10px; font-weight: 600; white-space: nowrap; }
body .billing-page .plan-tier-heading { flex-wrap: wrap; }
body .billing-page .plan-current-strip { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border: 1px solid #304354; border-radius: 12px; background: #111f30; }
body .billing-page .plan-current-strip div { display: grid; gap: 5px; }
body .billing-page .plan-current-strip span { color: #a9bacb; font-size: 12px; }
body .billing-page .plan-usage-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
body .billing-page h2 { margin: 10px 0 0; font-size: 20px; }
body .billing-page .topup-card { border: 1px solid #304354; border-radius: 12px; background: #111f30; }
body .billing-page .topup-card h3 { margin: 0; color: #56dbe3; font-size: 20px; }
body .billing-page .topup-card small { line-height: 1.6; color: #a9bacb; }
@media (max-width:650px) { body .billing-page .plan-usage-grid { grid-template-columns: 1fr; } }

body .billing-page .addon-badge-slot { min-height: 23px; display: flex; justify-content: flex-end; }

body .billing-page .plan-unit-cost { color: #8ae3e8; font-size: 12px; line-height: 1.6; }
body .billing-page .plan-unit-cost span { display: block; color: #a9bacb; font-size: 11px; }

/* Billing section rhythm; descriptive copy is not an extra help card. */
body .billing-page { gap: 20px; }
body .billing-page .billing-section-heading { margin-top: 24px; display: grid; gap: 6px; }
body .billing-page .billing-section-heading h2 { margin: 0; }
body .billing-page .billing-section-heading p, body .billing-page .billing-section-description { margin: 0; color: #a9bacb; font-size: 13px; line-height: 1.65; max-width: 80ch; }
body .billing-page .billing-section-description { margin-top: -8px; }
body #planView .plan-recommendation { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; line-height: 18px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; height: 24px; box-sizing: border-box; }
body .billing-page .addon-badge-slot { height: 24px; flex: 0 0 24px; }
body .billing-page .plan-tier-pro { border-color: #304354; background: linear-gradient(155deg, rgba(22,201,212,.07), transparent 46%), #111f30; }
body .billing-page :is(.customer-plan-card,.topup-card):hover { border-color: #00d9ed; box-shadow: 0 0 15px #00d9ed24; }
body .billing-page :is(.customer-plan-card,.topup-card) { transition: border-color .15s, box-shadow .15s; }
body .billing-page .billing-guidance { border: 0; border-top: 1px solid #304354; border-radius: 0; padding: 16px 0; }
body .billing-page .billing-guidance summary:hover { color: #5becfa; }
body .billing-page .billing-guidance summary:focus-visible { outline: 2px solid #00d9ed; outline-offset: 4px; }
@media (prefers-reduced-motion:reduce) { body .billing-page :is(.customer-plan-card,.topup-card) { transition: none; } }
/* Preserve the navigation drawer at narrow widths after sidebar sizing rules. */
@media (max-width: 760px) {
  body:not(.pf-navigation-open) .sidebar.app-rail { display: none; }
  body.pf-navigation-open .sidebar.app-rail {
    display: flex; position: fixed; top: 76px; bottom: 0; left: 0;
    height: calc(100dvh - 76px); width: min(285px,90vw);
    overflow-y: auto; overflow-x: hidden; z-index: 60;
  }
}

/* Reference-inspired plan columns. Scoped to billing so hidden views stay hidden. */
body .billing-page .customer-plan-grid { gap: 18px; padding-top: 16px; align-items: stretch; }
body .billing-page .customer-plan-card { --plan-accent: #51d9e5; overflow: visible; padding: 30px 18px 20px; gap: 16px; }
body .billing-page .plan-tier-free { --plan-accent: #a6b7c9; }
body .billing-page .plan-tier-pro { --plan-accent: #89e9ef; border-color: #45c9d4; background: linear-gradient(160deg, #173b48, #111f30 55%); }
body .billing-page .customer-plan-card::before { background: var(--plan-accent); }
body .billing-page .customer-plan-card > .addon-badge-slot { position: absolute; top: -13px; left: 12px; right: 12px; justify-content: center; }
body .billing-page .customer-plan-card .plan-recommendation { margin: 0; background: #126575; color: #eaffff; border-color: #51d9e5; padding-inline: 16px; box-shadow: 0 3px 12px #0003; }
body .billing-page .plan-tier-heading { flex-direction: column; justify-content: center; gap: 12px; }
body .billing-page .plan-tier-heading h3 { font-size: 23px; letter-spacing: .04em; text-transform: uppercase; color: var(--plan-accent); }
body .billing-page .plan-tier-mark { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; color: var(--plan-accent); background: #ffffff0a; }
body .billing-page .plan-tier-mark svg { width: 29px; height: 29px; }
body .billing-page .plan-introduction { text-align: center; margin: -4px 0 0; min-height: 20px; }
body .billing-page .plan-price { justify-content: center; text-align: center; min-height: 45px; }
body .billing-page .plan-price b { color: var(--plan-accent); }
body .billing-page .plan-unit-cost { text-align: center; min-height: 44px; }
body .billing-page .plan-tier-free .plan-price { margin-bottom: 60px; }
body .billing-page .plan-highlight { flex-direction: row; align-items: baseline; gap: 7px; padding: 16px 0 0; border: 0; border-top: 1px solid #304354; border-radius: 0; background: none; flex-wrap: wrap; }
body .billing-page .plan-highlight strong { font-size: 20px; color: var(--plan-accent); }
body .billing-page .plan-capacity { gap: 12px; }
body .billing-page .customer-plan-card .plan-inclusions { gap: 12px; }
body .billing-page .plan-inclusions li { padding-left: 22px; }
body .billing-page .plan-inclusions li::before { content: '•'; width: 14px; height: 14px; top: 2px; display: grid; place-items: center; background: #ffffff0a; color: var(--plan-accent); font-size: 16px; line-height: 14px; }
@media (max-width:650px) {
 body .billing-page .customer-plan-grid { gap: 28px; }
 body .billing-page .plan-tier-free .plan-price { margin-bottom: 0; }
}

/* Add-ons share the plan card's centred comparison layout and raised badge. */
body .billing-page .topup-grid { padding-top: 16px; gap: 18px; align-items: stretch; }
body .billing-page .topup-card { position: relative; overflow: visible; padding: 30px 18px 20px; gap: 16px; text-align: center; background: linear-gradient(155deg, #16c9d412, transparent 46%), #111f30; border-radius: 16px; }
body .billing-page .topup-card > .addon-badge-slot { position: absolute; top: -13px; left: 12px; right: 12px; justify-content: center; }
body .billing-page .topup-card .plan-recommendation { margin: 0; background: #126575; color: #eaffff; border-color: #51d9e5; padding-inline: 16px; box-shadow: 0 3px 12px #0003; }
body .billing-page .topup-card h3 { font-size: 23px; }
body .billing-page .topup-card > b { font-size: 26px; line-height: 1.3; color: #edf5fb; }
body .billing-page .topup-card > small { padding-top: 14px; border-top: 1px solid #304354; }
body .billing-page .topup-card button { width: 100%; }
@media (max-width:650px) { body .billing-page .topup-grid { gap: 28px; } }

/* Explicit, accessible inclusion states for each catalogue capability. */
body .billing-page .plan-inclusions .plan-feature { display: flex; align-items: flex-start; gap: 8px; padding-left: 0; }
body .billing-page .plan-inclusions .plan-feature::before { content: none; }
body .billing-page .plan-feature-symbol { flex: 0 0 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1; background: #ffffff0a; color: #a9bacb; }
body .billing-page .is-included .plan-feature-symbol { color: #68e2ce; background: #68e2ce18; }
body .billing-page .is-excluded .plan-feature-symbol { color: #f7aaa9; background: #f7aaa918; }
body .billing-page .is-excluded { color: #a9bacb; }
body .billing-page .plan-feature .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

body .billing-page .plan-queue-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body .billing-page .plan-queue-badge { display: inline-flex; padding: 2px 8px; border-radius: 20px; border: 1px solid currentColor; font-size: 11px; line-height: 1.5; }
body .billing-page .queue-free { color: #b7c2cf; background: #b7c2cf12; }
body .billing-page .queue-starter { color: #8bc7ff; background: #8bc7ff12; }
body .billing-page .queue-pro { color: #d5b1ff; background: #d5b1ff12; }
body .billing-page .queue-agency { color: #80e3af; background: #80e3af12; }

/* Never paint a previous/default workspace while startup routing is pending. */
body #appView[hidden], body #workspaceStartup[hidden] { display: none !important; }
body #workspaceStartup:not([hidden]) { min-height: 60vh; display: grid; place-items: center; padding: 24px; color: #a9bacb; font-size: 15px; }

/* Workspace overview and persistent production activity. */
body #workspaceGenerationQueue { position:fixed; left:10px; bottom:10px; width:216px; margin:0; z-index:45; background:#0c202d; border:1px solid #008fa3; box-shadow:0 0 0 1px #008fa330,0 8px 28px #0008; }
body .sidebar.app-rail { height:calc(100dvh - 396px); min-height:80px; position:sticky; top:76px; overflow-y:auto; }
body #homeView .page-head { padding:30px 0 34px; margin:0; border-bottom:1px solid var(--border); }
body #homeView .page-head h1 { font-size:clamp(32px,4vw,56px); letter-spacing:-2px; max-width:650px; }
body #homeView .stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0 0 40px; border-bottom:1px solid var(--border); }
body #homeView .stat { border:0; border-radius:0; background:transparent; padding:24px 20px; box-shadow:none; }
body #homeView .stat + .stat { border-left:1px solid var(--border); }
body #homeView .stat strong { font-size:32px; color:var(--text); }
body #homeView .guidance-card { display:block; background:transparent; border:0; padding:0; margin:0 0 36px; }
body #homeView .guidance-card[hidden] { display:none; }
body #homeView .setup-track { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; }
body #homeView .setup-step { display:flex; align-items:flex-start; flex-direction:column; gap:16px; border:0; border-top:2px solid #355261; border-radius:0; padding:22px 0 0; background:transparent; box-shadow:none; }
body #homeView .setup-step.current { border-top-color:var(--accent); background:transparent; }
body #homeView .setup-step .num { border-radius:50%; background:#123441; color:#70e5ef; width:34px; height:34px; }
body #homeView .setup-step strong { font-size:18px; }
body #homeView .setup-step small { display:block; margin-top:10px; min-height:64px; line-height:1.65; color:var(--muted); }
body #homeView .setup-step button { margin-top:auto; }
body #homeView .home-production-links { display:flex; align-items:center; gap:16px; padding:28px 0; border-top:1px solid var(--border); }
body #homeView .home-production-links > div { flex:1; }
body #homeView .home-production-links p { color:var(--muted); }
body #createView .page-head { padding:14px 0 20px; }
body #createView .step-card { border:0; border-top:1px solid var(--border); border-radius:0; box-shadow:none; background:transparent; }
body #createView .step-head { background:transparent; padding:26px 0 16px; }
body #createView .step-body { padding:0; }
body #createView .guided-subsection { background:transparent; border:0; border-radius:0; padding:16px 0; }
body #appView #createView .source-method { border-radius:8px; box-shadow:none; padding:18px; min-height:110px; background:#0b1d29; }
body #appView #createView .source-method:hover:not(:disabled) { background:#12303d; border-color:var(--accent); }
body #appView #createView .source-method.selected { background:#073542; border-color:var(--accent); box-shadow:inset 3px 0 var(--accent); }
@media (max-width:1100px) and (min-width:761px) { body #workspaceGenerationQueue { width:185px; } }
@media (max-width:760px) {
  body #workspaceGenerationQueue { width:calc(100% - 20px); }
  body .workspace.main { padding-bottom:330px; }
  body.pf-navigation-open .sidebar.app-rail { bottom:320px; height:calc(100dvh - 396px); }
  body #homeView .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body #homeView .setup-track { grid-template-columns:1fr; }
  body #homeView .setup-step small { min-height:0; }
  body #homeView .home-production-links { align-items:stretch; flex-direction:column; }
}

@media (max-width:760px) {
  body #workspaceGenerationQueue { height:240px; min-height:240px; max-height:240px; grid-template-rows:20px 60px 60px 20px minmax(0,1fr); padding:10px; gap:3px; }
  body .workspace.main { padding-bottom:270px; }
  body.pf-navigation-open .sidebar.app-rail { bottom:260px; height:calc(100dvh - 336px); }
}

/* Reserve a separate viewport region for navigation above activity. */
@media (min-width:761px) {
  body #appView .sidebar.app-rail.m5-rail { position:fixed; top:76px; bottom:320px; left:0; width:236px; height:auto; min-height:0; max-height:none; box-sizing:border-box; overflow-y:auto; overflow-x:hidden; z-index:40; }
  body #appView > .shell > .workspace.main { grid-column:2; }
}
@media (min-width:761px) and (max-width:1100px) {
  body #appView .sidebar.app-rail.m5-rail { width:205px; }
}
@media (max-width:760px) {
  body.pf-navigation-open #appView .sidebar.app-rail.m5-rail { position:fixed; top:76px; bottom:260px; height:auto; min-height:0; max-height:none; box-sizing:border-box; overflow-y:auto; overflow-x:hidden; }
}
/* Guided creation keeps distinct, comfortably spaced sections. */
body #appView #createView .step-card { border:1px solid var(--border); border-radius:12px; background:#0b1d29; overflow:hidden; }
body #appView #createView .step-head { padding:22px 24px 18px; border-bottom:1px solid var(--border); }
body #appView #createView .step-body { padding:24px; }
body #appView #createView .guided-subsection { padding:0 0 24px; margin:0 0 24px; border-bottom:1px solid var(--border); }
body #appView #createView .guided-subhead { margin-bottom:20px; }
body #appView #createView .guided-subhead span { display:block; margin-top:8px; line-height:1.65; }
body #appView #createView .guided-subsection > label { display:flex; flex-direction:column; gap:8px; }
body #appView #createView .guided-subsection > p { margin:16px 0 20px; line-height:1.65; }
body #appView #createView :is(.source-method-grid,.guided-action-grid) { gap:16px; margin:20px 0; }
body #appView #createView :is(.source-method,.guided-action-card) { border:1px solid #3c5a6b; padding:18px; }
body #appView #createView .source-method span { margin-top:10px; line-height:1.6; }
body #appView #createView .guided-subsection > .row { margin-top:24px!important; }
@media (max-width:760px) {
  body #appView #createView .step-head { padding:18px; }
  body #appView #createView .step-body { padding:18px; }
}

/* Header: workspace context stays visible; help and account tools are grouped. */
body #appView .topbar.m5-topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:10px 24px; box-sizing:border-box; min-height:76px; }
body #appView .topbar .brand { flex:0 1 auto; min-width:0; }
body #appView .topbar .brand-wordmark { width:220px; height:50px; }
body #appView .topbar .top-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:nowrap; min-width:0; }
body #appView .topbar-disclosure { position:relative; border:0; padding:0; margin:0; background:transparent; }
body #appView .topbar-disclosure > summary { display:flex; align-items:center; gap:8px; list-style:none; padding:6px 10px; min-height:38px; box-sizing:border-box; border:1px solid transparent; border-radius:8px; color:var(--text); cursor:pointer; font-size:12px; }
body #appView .topbar-disclosure > summary::-webkit-details-marker { display:none; }
body #appView .topbar-disclosure > summary::after { content:'⌄'; color:var(--muted); }
body #appView .topbar-disclosure > summary:hover, body #appView .topbar-disclosure[open] > summary { background:#12303d; border-color:#3c6273; }
body #appView .topbar-disclosure > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
body #appView .topbar-popover { position:absolute; top:calc(100% + 10px); right:0; z-index:100; width:230px; display:flex; flex-direction:column; align-items:stretch; gap:14px; padding:18px; border:1px solid #3c6273; border-radius:10px; background:#0c202d; box-shadow:0 12px 36px #0009; }
body #appView .topbar-disclosure:not([open]) > .topbar-popover { display:none; }
body #appView .topbar #globalHelpBtn { display:block; }
body #appView .topbar #signedInName { max-width:none; white-space:normal; overflow-wrap:anywhere; }
body #appView .topbar #accessRoleChip { align-self:flex-start; }
body #appView .topbar #logoutButton { width:100%; }
@media(max-width:760px) {
  body #appView .topbar.m5-topbar { display:grid; grid-template-columns:1fr; gap:10px; padding:10px 16px; }
  body #appView .topbar .top-actions { justify-content:space-between; gap:8px; width:100%; }
  body #appView .topbar #workspaceSwitcher { flex:1; }
  body #appView .topbar #workspaceSelectWrap { flex:1; }
  body #appView .topbar #workspaceSelect { width:100%; }
  body #appView .topbar .topbar-account-label { display:none; }
  body #appView .topbar-disclosure > summary { padding:4px 6px; }
  body #appView .topbar-help .topbar-popover { right:-50px; }
}

body #workspaceGenerationQueue .activity-mobile-toggle { display:none; }
@media(max-width:760px) {
  body #workspaceGenerationQueue { height:48px; min-height:48px; max-height:48px; display:block; padding:0 10px; }
  body #workspaceGenerationQueue:not(.mobile-activity-expanded) > :not(.generation-queue-heading) { display:none; }
  body #workspaceGenerationQueue .generation-queue-heading { height:46px; }
  body #workspaceGenerationQueue .activity-desktop-heading { display:none; }
  body #workspaceGenerationQueue .activity-mobile-toggle { display:flex; align-items:center; gap:12px; width:100%; height:44px; margin:0; padding:4px 0; border:0; box-shadow:none; background:transparent; color:var(--text); text-align:left; }
  body #workspaceGenerationQueue .activity-mobile-toggle span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--muted); }
  body #workspaceGenerationQueue .activity-mobile-toggle b { color:var(--accent); font-size:11px; }
  body #workspaceGenerationQueue.mobile-activity-expanded { height:min(340px,65dvh); min-height:0; max-height:65dvh; display:grid; grid-template-rows:46px 60px 100px 24px minmax(0,1fr); gap:4px; padding:0 12px 12px; }
  body #appView .workspace.main { padding-bottom:78px; }
  body.pf-navigation-open #appView .sidebar.app-rail.m5-rail { bottom:68px; }
  body:has(#workspaceGenerationQueue.mobile-activity-expanded).pf-navigation-open #appView .sidebar.app-rail.m5-rail { bottom:calc(min(340px,65dvh) + 20px); }
}

@media(max-width:760px) { body #appView #templateStudioDialog { padding-bottom:78px; } }

/* Compact billing comparison: retain all copy and accessible controls. */
body #planView.billing-page { gap:16px; }
body #planView .page-head { margin-bottom:8px; }
body #planView .billing-section-heading { margin-top:12px; gap:4px; }
body #planView .customer-plan-card { padding:22px 14px 16px; gap:10px; border-radius:12px; }
body #planView .plan-tier-heading { flex-direction:row; flex-wrap:nowrap; gap:9px; }
body #planView .plan-tier-heading h3 { font-size:19px; }
body #planView .plan-tier-mark { width:32px; height:32px; flex:0 0 32px; }
body #planView .plan-tier-mark svg { width:20px; height:20px; }
body #planView .plan-introduction { margin:0; min-height:0; }
body #planView .plan-price { min-height:34px; gap:5px; }
body #planView .plan-price b { font-size:28px; }
body #planView .plan-unit-cost { min-height:36px; line-height:1.45; }
body #planView .plan-tier-free .plan-price { margin-bottom:46px; }
body #planView .plan-highlight { padding-top:10px; gap:5px; }
body #planView .plan-highlight strong { font-size:18px; }
body #planView .plan-capacity { gap:6px; }
body #planView .customer-plan-card .plan-inclusions { padding-top:10px; gap:6px; line-height:1.45; }
body #planView .plan-feature-symbol { flex-basis:15px; height:15px; font-size:11px; }
body #planView .plan-current-strip { padding:12px 16px; }
body #planView .topup-grid { gap:14px; padding-top:14px; }
body #planView .topup-card { padding:22px 14px 14px; gap:9px; border-radius:12px; }
body #planView .topup-card h3 { font-size:18px; }
body #planView .topup-card > b { font-size:22px; }
body #planView .topup-card > small { padding-top:8px; line-height:1.45; }
body #planView .billing-guidance { padding:12px 0; }
body #planView .billing-payment-list { list-style:none; margin:12px 0 0; padding:0; }
body #planView .billing-payment-list li { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border, #334155); }
body #planView .billing-payment-list li > div { min-width:0; overflow-wrap:anywhere; }
body #planView .billing-payment-list li > strong { flex-shrink:0; font-variant-numeric:tabular-nums; }
body #planView .billing-payment-list small { display:block; margin-top:4px; color:var(--muted, #94a3b8); }
@media(max-width:650px) {
 body #planView .plan-tier-free .plan-price { margin-bottom:0; }
 body #planView .customer-plan-card .plan-inclusions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px; }
 body #planView .customer-plan-grid, body #planView .topup-grid { gap:26px; }
}
@media(max-width:380px) { body #planView .customer-plan-card .plan-inclusions { grid-template-columns:1fr; } }

/* Denser comparison cards without removing feature information. */
body #planView.billing-page { gap:12px; }
body #planView .customer-plan-card { padding:18px 12px 12px; gap:7px; }
body #planView .plan-tier-heading { gap:7px; }
body #planView .plan-tier-heading h3 { font-size:17px; }
body #planView .plan-tier-mark { width:26px; height:26px; flex-basis:26px; }
body #planView .plan-tier-mark svg { width:17px; height:17px; }
body #planView .plan-introduction { font-size:12px; line-height:1.4; }
body #planView .plan-price { min-height:29px; }
body #planView .plan-price b { font-size:25px; }
body #planView .plan-unit-cost { min-height:32px; line-height:1.35; }
body #planView .plan-tier-free .plan-price { margin-bottom:39px; }
body #planView .plan-highlight { padding-top:7px; }
body #planView .plan-capacity { gap:4px; }
body #planView .customer-plan-card .plan-inclusions { padding-top:7px; gap:4px; line-height:1.35; }
body #planView .plan-eligibility { margin:0; }
body #planView .topup-card { padding:19px 12px 12px; gap:6px; }
body #planView .topup-card h3 { font-size:16px; }
body #planView .topup-card > b { font-size:20px; }
body #planView .topup-card > small { padding-top:6px; line-height:1.35; }
body #planView .billing-section-heading { margin-top:8px; }
body #planView .plan-current-strip { padding:10px 12px; }
@media(max-width:650px) { body #planView .plan-tier-free .plan-price { margin-bottom:0; } }

/* Campaign sets: one introduction, a compact library, four explicit layouts. */
body #setsView .campaign-intro { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:32px; padding:24px 0 32px; margin-bottom:28px; border-bottom:1px solid var(--border); }
body #setsView .campaign-intro h2 { font-size:25px; margin:10px 0; }
body #setsView .campaign-intro p { color:var(--muted); line-height:1.65; max-width:48ch; }
body #setsView .campaign-format-key { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
body #setsView .campaign-format-key > span { display:flex; flex-direction:column; align-items:center; gap:7px; font-size:12px; }
body #setsView .campaign-example-stage { height:128px; width:100%; display:flex; align-items:center; justify-content:center; padding:10px 3px; background:radial-gradient(ellipse at center,#20424c66,transparent 72%); }
body #setsView .campaign-example-art { display:block; width:auto; height:auto; max-width:100%; max-height:108px; border-radius:3px; box-shadow:0 7px 18px #0005; outline:1px solid #ffffff1c; }
body #setsView .campaign-format-key small { color:var(--muted); font-size:10px; }
body #setsView .campaign-list-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 18px; }
body #setsView .campaign-list-heading span { color:var(--muted); font-size:12px; }
body #setsView #setList { display:grid; grid-template-columns:1fr; gap:20px; }
body #setsView .campaign-empty-state { display:flex; flex-direction:column; align-items:center; gap:12px; padding:28px 20px; }
body #setsView .campaign-empty-state span { color:var(--muted); line-height:1.6; }
body #setsView .set-item-card { padding:22px; border:1px solid var(--border); border-radius:12px; background:#0b1d29; }
body #setsView .set-item-card .title-row p { color:var(--muted); margin:7px 0; }
body #setsView .set-format-picker, body #appView #variantBar .set-format-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:12px; padding:12px 0; }
body #setsView .set-format-picker .demo-thumb, body #appView #variantBar .set-format-picker .demo-thumb { width:auto; height:auto; min-height:94px; aspect-ratio:auto; padding:14px 10px; display:flex; align-items:center; gap:12px; justify-content:flex-start; border:1px solid #355264; border-radius:8px; background:#102633; text-align:left; }
body #setsView .campaign-shape, body #appView #variantBar .campaign-shape { display:block; height:36px; max-width:52px; flex-shrink:0; border:1px solid #5cbcc9; background:#174251; border-radius:2px; }
body #setsView .demo-thumb small, body #appView #variantBar .demo-thumb small { display:block; margin:5px 0; font-size:10px; color:var(--muted); }
body .campaign-layout-state { display:block; color:#71d6e1; font-size:10px; }
body #setsView .set-format-picker .demo-thumb:hover, body #appView #variantBar .demo-thumb:hover, body #appView #variantBar .demo-thumb.active { border-color:var(--accent); background:#123946; }
body #setsView .item-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; padding-top:18px; border-top:1px solid var(--border); }
@media(max-width:1000px) { body #setsView .campaign-intro { grid-template-columns:1fr; } }
@media(max-width:650px) { body #setsView .set-format-picker, body #appView #variantBar .set-format-picker { grid-template-columns:repeat(2,minmax(0,1fr)); } body #setsView .campaign-list-heading { align-items:flex-start; flex-direction:column; gap:6px; } }
.generation-history-report {
  margin: 12px 0;
  border: 1px solid rgba(0, 143, 163, .3);
  border-radius: 10px;
  padding: 10px 14px;
}
.generation-history-report > summary { cursor: pointer; font-weight: 600; }
.generation-history-content { max-height: 28rem; overflow-y: auto; }
.generation-history-output { padding: 12px 0; border-bottom: 1px solid rgba(128, 150, 160, .2); }
.generation-history-output:last-child { border-bottom: 0; }
.generation-history-output p { margin: 8px 0; line-height: 1.55; }

/* Schedule record confirmation keeps selection controls distinct from switches. */
body dialog.schedule-run-dialog { width:min(720px,90vw); max-height:85vh; overflow:auto; padding:24px; border:1px solid #287082; border-radius:14px; background:#0d202b; color:#e9f5fb; }
body .schedule-run-dialog section { border-top:1px solid #28434f; margin-top:18px; padding-top:14px; }
body .schedule-run-dialog .schedule-record-choice { display:flex; align-items:flex-start; gap:12px; padding:12px; margin:8px 0; border:1px solid #345464; border-radius:8px; cursor:pointer; }
body .schedule-run-dialog .schedule-record-choice:has(input:checked) { border-color:#00b9d0; background:#123641; }
body .schedule-run-dialog input[type=checkbox] { min-width:18px; max-width:18px; min-height:18px; max-height:18px; padding:0; margin:3px 0 0; }
body .schedule-run-dialog .row { margin-top:18px; justify-content:flex-end; gap:10px; }
/* Account recovery stays focused and readable on small screens. */
.account-recovery-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 1.5rem;
  border: 1px solid #168b88;
  border-radius: 16px;
}
.account-recovery-dialog > * + * { margin-top: 1rem; }
.account-recovery-dialog label { display: grid; gap: .5rem; }
.account-recovery-dialog input:not([type="checkbox"]),
.account-recovery-dialog textarea { width: 100%; box-sizing: border-box; }
.account-recovery-dialog textarea { font-family: monospace; overflow-wrap: anywhere; resize: none; }
.account-recovery-dialog .recovery-acknowledgement { display: flex; gap: .65rem; align-items: flex-start; }
.account-recovery-dialog [hidden] { display: none !important; }
.account-recovery-dialog::backdrop { background: rgb(3 18 28 / 65%); }
.account-recovery-dialog .dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.account-recovery-dialog [role="status"] { color: var(--muted, #aac0cb); line-height: 1.5; }
.login-card > button { width: 100%; margin-top: 12px; }
body [data-view="queue"][hidden] { display: none !important; }
body .temporary-poster-result [data-temp-images] { display: grid; gap: 16px; }
body .temporary-poster-result img { display: block; max-width: 100%; max-height: 55vh; margin: auto; object-fit: contain; }
body .temporary-poster-result a { justify-self: center; }
body [data-free-disabled] { opacity: .55; cursor: not-allowed !important; filter: saturate(.4); }
body [data-free-disabled]:focus-visible { outline: 2px solid #61cbd0; outline-offset: 3px; }
body .free-plan-notice { padding: 12px 16px; margin: 0 0 20px; border: 1px solid #35646c; border-radius: 8px; background: #102b33; color: #d5e6e9; font-size: 14px; line-height: 1.5; }
body .free-plan-notice[hidden] { display: none !important; }
body #sheetsView .private-source-start { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px; margin: 16px 0 22px; background: #102a33; border: 1px solid #367b83; border-radius: 12px; }
body #sheetsView .private-source-start h2 { margin: 0 0 8px; font-size: 19px; }
body #sheetsView .private-source-start p { margin: 0 0 8px; max-width: 640px; line-height: 1.5; }
body #sheetsView .private-source-start span { color: #9bc5cb; font-size: 13px; }
body #sheetsView .private-source-start button { flex-shrink: 0; }
body #sheetsView .saved-sources-section { border: 1px solid #315061; border-radius: 10px; padding: 16px; margin: 0 0 20px; }
body #sheetsView .saved-sources-section > summary { cursor: pointer; font-weight: 600; padding: 4px; }
body #sheetsView .saved-sources-section > summary span { margin-left: 14px; font-weight: 400; color: #a3bac5; font-size: 13px; }
body #sheetsView .data-workbook-hero { margin: 16px 0; padding: 16px; }
body #appView #sourceMethods .data-source-intro { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
body #sheetsView .source-method-grid { gap: 12px; }
body #sheetsView .source-method { padding: 14px; }
@media(max-width:800px) {
  body #appView #sourceMethods .data-source-intro { grid-template-columns: 1fr; }
  body #sheetsView .private-source-start { align-items: stretch; flex-direction: column; gap: 16px; }
  body #sheetsView .saved-sources-section > summary span { display: block; margin: 8px 0 0; }
}
body .free-feature-tooltip { position: fixed; z-index: 100000; max-width: 300px; padding: 12px 14px; background: #14313a; color: #f0f7fa; border: 1px solid #54818b; border-radius: 8px; box-shadow: 0 6px 24px #0006; font-size: 13px; line-height: 1.5; pointer-events: none; }
body .free-feature-tooltip[hidden] { display: none !important; }
body #appView #sheetsView #sourceMethods .data-source-intro { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
@media(max-width:800px) { body #appView #sheetsView #sourceMethods .data-source-intro { grid-template-columns: 1fr; } }
/* Compact source picker: consistent rows and inline availability. */
body #appView #sheetsView #sourceMethods { padding: 22px; background: #0c1e2b; border-color: #315061; }
body #appView #sheetsView #sourceMethods .source-connect-head { margin-bottom: 22px; }
body #appView #sheetsView #sourceMethods .source-family h3 { font-size: 14px; margin: 0 0 12px; color: #b2c9d3; }
body #appView #sheetsView #sourceMethods .source-method-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
body #appView #sheetsView #sourceMethods .source-method { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 90px; padding: 14px; border: 1px solid #365666; border-radius: 9px; background: #102633; box-shadow: none; text-align: left; }
body #appView #sheetsView #sourceMethods .source-method[hidden] { display: none !important; }
body #appView #sheetsView #sourceMethods .source-icon { margin: 0; width: 32px; height: 32px; display: grid; place-items: center; }
body #appView #sheetsView #sourceMethods .source-option-copy { display: grid; gap: 6px; }
body #appView #sheetsView #sourceMethods .source-option-copy strong { font-size: 14px; color: #e2edf2; }
body #appView #sheetsView #sourceMethods .source-option-copy > span { font-size: 12px; line-height: 1.45; color: #a7bec9; }
body #appView #sheetsView #sourceMethods .source-availability { font-size: 11px; white-space: nowrap; padding: 4px 7px; border: 1px solid #41616e; border-radius: 5px; color: #b8cbd3; }
body #appView #sheetsView #sourceMethods .source-availability.available { background: #123b40; border-color: #34777c; color: #86dedc; }
body #appView #sheetsView #sourceMethods .source-method[data-free-disabled] { opacity: 1; filter: none; background: #0e202b; border-color: #2d4552; transform: none; }
body #appView #sheetsView #sourceMethods .source-method:not([data-free-disabled]):hover { border-color: #47bac5; background: #13323f; }
body #appView #sheetsView #sourceMethods .source-method:focus-visible { outline: 2px solid #47bac5; outline-offset: 2px; }
body #sourceMethods .source-free-explanation { display: none; }
body.free-workspace #sourceMethods .source-free-explanation { display: block; font-size: 12px; line-height: 1.5; color: #b6cbd4; padding: 14px 0 0; margin: 16px 0 0; border-top: 1px solid #294552; }
body #appView #sheetsView #sourceMethods .connector-more { margin-top: 18px; padding: 10px 12px; background: transparent; }
@media(max-width:1100px) { body #appView #sheetsView #sourceMethods .source-method { grid-template-columns: 32px minmax(0,1fr); } body #appView #sheetsView #sourceMethods .source-availability { grid-column: 2; justify-self: start; } }

/* Compact Studio workspace: natural poster proportions and a grouped tool palette. */
body #appView #templateStudioDialog .designer-grid { min-height: 0; gap: 16px; }
body #appView #templateStudioDialog .designer-grid > .canvas-stage { min-height: 0; height: auto; width: 100%; max-width: 660px; justify-self: center; padding: 10px; border-radius: 10px; box-sizing: border-box; }
body #appView #templateStudioDialog .canvas-stage .canvas-toolbar { padding: 0 0 8px; margin: 0; gap: 8px; flex-wrap: wrap; }
body #appView #templateStudioDialog .canvas-stage .v15-canvas { max-width: 100%; max-height: 82dvh; overflow: auto; border: 1px solid #345868; border-radius: 6px; }
body #appView #templateStudioDialog #studioSetupTools { padding: 14px; border: 1px solid #285469; border-radius: 10px; background: linear-gradient(145deg,#0d2532,#081b26); }
body #appView #templateStudioDialog #studioSetupTools h3 { margin: 0 0 12px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: #bed4df; }
body #appView #templateStudioDialog .add-elements-group { display: grid; gap: 6px; margin: 0; padding: 12px 0; border-top: 1px solid #244350; }
body #appView #templateStudioDialog .add-elements-group-label { margin: 0 0 3px; color: #54cfdd; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body #appView #templateStudioDialog #studioSetupTools .tool-btn { display: flex; flex-direction: row; align-items: center; gap: 9px; width: 100%; min-height: 36px; margin: 0; padding: 7px 9px; text-align: left; font-size: 11px; line-height: 1.35; background: #0b2330; border: 1px solid #335b6d; box-shadow: none; }
body #appView #templateStudioDialog #studioSetupTools .tool-btn[hidden] { display: none !important; }
body #appView #templateStudioDialog #studioSetupTools .tool-btn::before { content: ''; display: block; flex: 0 0 19px; height: 19px; background: center / contain no-repeat var(--element-icon); }
body #appView #templateStudioDialog #studioSetupTools .tool-btn:is(.active,:focus-visible) { border-color: #00d9ed; outline: 1px solid #00d9ed; outline-offset: 1px; background-color: #103443; }
body #appView #templateStudioDialog :is(#addMappedFieldMenuBtn,#addTextBtn) { --element-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b4d5e3%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16M12%205v15M8%2020h8%22/%3E%3C/svg%3E"); }
body #appView #templateStudioDialog :is(#addCustomFieldBtn) { --element-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b4d5e3%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2015%206-6M8%2016l-1%201a4%204%200%200%201-6-6l4-4a4%204%200%200%201%206%200m2%2010a4%204%200%200%200%206%200l4-4a4%204%200%200%200-6-6l-1%201%22/%3E%3C/svg%3E"); }
body #appView #templateStudioDialog :is(#addSelectableTextBtn) { --element-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b4d5e3%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h6v6H3zM15%2015h6v6h-6zM15%203h6v6h-6zM6%209v9h9M9%206h6%22/%3E%3C/svg%3E"); }
body #appView #templateStudioDialog :is(#addSelectableAssetBtn,#addAssetElementBtn,#addTikTokAvatarBtn) { --element-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b4d5e3%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221%22/%3E%3Cpath%20d%3D%22m4%2018%205-5%203%203%204-7%205%209%22/%3E%3C/svg%3E"); }
body #appView #templateStudioDialog :is(#addStaticBackgroundBtn,#addSelectableBackground) { --element-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b4d5e3%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%2015h18M9%203v12M15%203v12M3%209h18%22/%3E%3C/svg%3E"); }

body #appView #templateStudioDialog .element-config-dialog { position: fixed; inset: 0; margin: auto; width: min(620px,calc(100vw - 32px)); max-height: 86dvh; padding: 20px; box-sizing: border-box; overflow: auto; background: #0b2230; color: #dcecf3; border: 2px solid #1698af; border-radius: 12px; box-shadow: 0 20px 70px #0009; }
body #appView #templateStudioDialog .element-config-dialog::backdrop { background: #03121b99; }
body #appView #templateStudioDialog .element-config-dialog h3 { padding-right: 40px; margin: 0 0 8px; font-size: 17px; }
body #appView #templateStudioDialog .element-config-close { position: absolute; right: 12px; top: 12px; }
body #appView #templateStudioDialog .element-config-body { padding: 12px 0; }
body #appView #templateStudioDialog .element-config-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding-top: 12px; border-top: 1px solid #315364; position: sticky; bottom: -20px; background: #0b2230; padding-bottom: 12px; }
body #appView #templateStudioDialog .element-config-error { color: #ffb4b4; font-size: 12px; margin: 10px 0; }
body #appView #templateStudioDialog .element-config-dialog .inspector-selection-header { display: none; }

body #appView #templateStudioDialog .element-config-simplified #studioDesignInspector { display: none !important; }
body #appView #templateStudioDialog .element-config-simple { display: grid; gap: 14px; }
body #appView #templateStudioDialog .element-config-simple h4 { margin: 0; font-size: 13px; }
body #appView #templateStudioDialog .element-config-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
body #appView #templateStudioDialog .element-config-simple label { margin: 0; display: grid; gap: 6px; font-size: 12px; }
body #appView #templateStudioDialog .element-config-simple [hidden] { display: none !important; }
body #appView #templateStudioDialog .element-config-simple :is(input,select) { min-width: 0; width: 100%; box-sizing: border-box; }
body #appView #templateStudioDialog .element-config-picker { padding: 10px; border: 1px solid #315364; border-radius: 7px; }
body #appView #templateStudioDialog .element-config-picker summary { padding: 2px 0 8px; color: #65d8e6; font-size: 12px; cursor: pointer; }
body #appView #templateStudioDialog .element-config-picker .asset-choice-allowed-list { max-height: 180px; overflow: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
body #appView #templateStudioDialog .element-config-picker .asset-choice-allowed-list img { width: 36px; height: 36px; object-fit: contain; }
body #appView #templateStudioDialog .element-config-simple .simple-asset-rule-row { display: grid; grid-template-columns: 32px minmax(70px,1fr) minmax(100px,1.2fr); align-items: center; gap: 8px; padding: 8px 0; background: transparent; border: 0; border-bottom: 1px solid #294552; }
body #appView #templateStudioDialog .element-config-simple .simple-asset-rule-row > img { width: 32px; height: 32px; object-fit: contain; }
body #appView #templateStudioDialog .element-config-simple .simple-asset-rule-name span { display: none; }
body #appView #templateStudioDialog .element-config-simple .simple-asset-rule-name strong { font-size: 12px; }

/* Element inspector: compact header, clear editing target and quieter sections. */
body #appView #templateStudioDialog #propertiesPanel { padding: 14px; border: 1px solid #285469; border-radius: 10px; background: #0b2230; }
body #appView #templateStudioDialog #propertiesPanel > h3 { margin: 0 0 12px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #a9c6d4; }
body #appView #templateStudioDialog .inspector-selection-header { background: transparent; box-shadow: none; border: 0; padding: 0 0 12px; margin: 0; }
body #appView #templateStudioDialog .inspector-selection-header .eyebrow { display: none; }
body #appView #templateStudioDialog .inspector-selection-title-row h4 { font-size: 15px; margin: 0; }
body #appView #templateStudioDialog .element-mapping-summary { background: transparent; border: 0; padding: 6px 0 0; }
body #appView #templateStudioDialog .option-editing-targets { display: grid; gap: 8px; margin-bottom: 12px; }
body #appView #templateStudioDialog .option-editing-targets:has(> [hidden]):not(:has(> :not([hidden]))) { display: none; }
body #appView #templateStudioDialog .option-editing-targets > [hidden] { display: none !important; }
body #appView #templateStudioDialog .option-editing-targets label { margin: 0; font-size: 12px; }
body #appView #templateStudioDialog .option-editing-targets .tiny { font-size: 11px; line-height: 1.4; margin-top: 6px; }
body #appView #templateStudioDialog .component-inspector-tabs { margin: 0 0 14px; background: #071923; border: 1px solid #234352; border-radius: 6px; overflow: hidden; }
body #appView #templateStudioDialog .component-inspector-tabs button { min-height: 36px; padding: 8px; font-size: 12px; }
body #appView #templateStudioDialog #componentStylePanel .style-panel-heading { display: none; }
body #appView #templateStudioDialog #componentStylePanel .style-control-section { margin: 0 0 10px; background: transparent; border: 1px solid #294956; border-radius: 7px; }
body #appView #templateStudioDialog #componentStylePanel .style-section-body { padding: 10px; display: grid; gap: 12px; }
body #appView #templateStudioDialog #componentStylePanel label { margin: 0; }
body #appView #templateStudioDialog .asset-choice-position-simple { display: none; }

/* Studio chrome fits its content; inspector scrolling leaves room for controls. */
body #appView #templateStudioDialog .designer-head { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 10px 12px; min-height: 0; }
body #appView #templateStudioDialog .designer-head > div:first-child { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; flex: 1 1 260px; }
body #appView #templateStudioDialog .designer-head :is(.eyebrow,#designerSub) { display: none; }
body #appView #templateStudioDialog .designer-head h1 { font-size: 18px; margin: 0; line-height: 1.3; }
body #appView #templateStudioDialog .designer-head:has(#studioTemplateSwitcherWrap:not([hidden])) #designerTitle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body #appView #templateStudioDialog #studioTemplateSwitcherWrap:not([hidden]) { display: flex; align-items: center; gap: 8px; margin: 0; }
body #appView #templateStudioDialog #studioTemplateSwitcherWrap > span { display: inline; font-size: 12px; color: #b8cdd8; }
body #appView #templateStudioDialog #studioTemplateSwitcher { width: auto; max-width: min(340px,60vw); min-height: 34px; margin: 0; }
body #appView #templateStudioDialog .designer-head > .row { margin: 0; gap: 8px; flex: 0 1 auto; flex-wrap: wrap; }
body #appView #templateStudioDialog .designer-head .text-btn { margin: 0; padding: 6px 0; white-space: nowrap; }
body #appView #templateStudioDialog .studio-chrome-compact { margin: 8px 0; gap: 8px; }
body #appView #templateStudioDialog .studio-stepbar { margin: 0; }
body #appView #templateStudioDialog .studio-stepbar button { min-height: 36px; padding: 7px 10px; }
body #appView #templateStudioDialog #propertiesPanel { box-sizing: border-box; scrollbar-gutter: stable; padding: 12px 16px 12px 12px; overflow-x: hidden; overflow-y: auto; }
body #appView #templateStudioDialog #propertiesPanel :is(#propertiesBody,#studioDesignInspector,#componentProperties,.component-tab-panel) { min-width: 0; max-width: 100%; box-sizing: border-box; }
body #appView #templateStudioDialog .component-inspector-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; min-width: 0; box-sizing: border-box; gap: 0; }
body #appView #templateStudioDialog .component-inspector-tabs button { min-width: 0; width: 100%; padding: 8px 3px; font-size: 11px; white-space: normal; overflow-wrap: anywhere; box-sizing: border-box; }
body #appView #templateStudioDialog #propertiesPanel select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }

body #appView #templateStudioDialog .element-config-simple .element-config-picker { display: none; }
body #appView #templateStudioDialog .simple-asset-rule-row.value-asset-option { display: grid; grid-template-columns: 32px minmax(0,1fr) minmax(0,1fr) 30px; gap: 8px; align-items: end; padding: 10px 0; }
body #appView #templateStudioDialog .value-asset-option > img { width: 32px; height: 32px; object-fit: contain; align-self: end; }
body #appView #templateStudioDialog .value-asset-option label { display: grid; gap: 6px; min-width: 0; font-size: 11px; }
body #appView #templateStudioDialog .value-asset-option :is(input,select) { min-width: 0; width: 100%; box-sizing: border-box; }
body #appView #templateStudioDialog .value-asset-option button { min-width: 0; padding: 6px; }
body #appView #templateStudioDialog #addAnotherAssetOption { margin-top: 10px; }
@media(max-width:600px) { body #appView #templateStudioDialog #propertiesPanel .value-asset-option { grid-template-columns: 24px minmax(0,1fr) 30px; } body #appView #templateStudioDialog #propertiesPanel .value-asset-option label:nth-of-type(2) { grid-column: 2; } body #appView #templateStudioDialog #propertiesPanel .value-asset-option button { grid-column: 3; grid-row: 1; } }

/* The sidebar is narrow even on a wide screen: give each field a full row. */
body #appView #templateStudioDialog #propertiesPanel .simple-asset-rule-row.value-asset-option {
  display: grid; grid-template-columns: minmax(0,1fr) 30px; gap: 9px;
  padding: 10px; align-items: end; min-width: 0;
}
body #appView #templateStudioDialog #propertiesPanel .value-asset-option > :is(img,span) { grid-column: 1; grid-row: 1; }
body #appView #templateStudioDialog #propertiesPanel .value-asset-option > label:first-of-type { grid-column: 1 / -1; grid-row: 2; }
body #appView #templateStudioDialog #propertiesPanel .value-asset-option > label:nth-of-type(2) { grid-column: 1 / -1; grid-row: 3; }
body #appView #templateStudioDialog #propertiesPanel .value-asset-option > label { width: 100%; min-width: 0; }
body #appView #templateStudioDialog #propertiesPanel .value-asset-option select { width: 100%; min-width: 0; max-width: 100%; height: 36px; }
body #appView #templateStudioDialog #propertiesPanel .value-asset-option > button { grid-column: 2; grid-row: 1; width: 30px; height: 30px; min-height: 30px; padding: 0; justify-self: end; }

/* Group linking is a compact checkbox, not a full-width input. */
body #appView #templateStudioDialog #propertiesPanel .grouped-style-toggle { display: flex; flex-direction: row; align-items: flex-start; gap: 9px; }
body #appView #templateStudioDialog #propertiesPanel .grouped-style-toggle input[type=checkbox] { appearance: auto; width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; min-height: 18px !important; max-height: 18px !important; flex: 0 0 18px; padding: 0 !important; margin: 2px 0 0; accent-color: #00bfd4; }
body #appView #templateStudioDialog #propertiesPanel .grouped-style-toggle input[type=checkbox]::before,
body #appView #templateStudioDialog #propertiesPanel .grouped-style-toggle input[type=checkbox]::after { display: none; }
body #appView #templateStudioDialog #propertiesPanel .grouped-style-copy { flex: 1; min-width: 0; }

/* Credit balance hierarchy stays within the fixed activity panel. */
body #workspaceGenerationQueue .workspace-quota-status { --credit-tone:#5adbd0; gap:4px; }
body #workspaceGenerationQueue .credit-health-low { --credit-tone:#f5c46b; }
body #workspaceGenerationQueue .credit-health-critical { --credit-tone:#ff929b; }
body #workspaceGenerationQueue .credit-health-unknown { --credit-tone:#a8bfcc; }
body #workspaceGenerationQueue .workspace-quota-status strong,
body #workspaceGenerationQueue .workspace-quota-status b,
body #workspaceGenerationQueue .activity-count,
body #workspaceGenerationQueue .workspace-queued-heading strong { font-variant-numeric:tabular-nums; }
body #workspaceGenerationQueue .workspace-credit-balance { align-items:center; }
body #workspaceGenerationQueue .workspace-credit-balance strong { color:var(--credit-tone); font-size:19px; line-height:22px; letter-spacing:-.4px; }
body #workspaceGenerationQueue .workspace-reserved-credits { color:#b4acfa; font-size:12px; }
body #workspaceGenerationQueue .workspace-quota-status small b { color:#d5e7f1; }
body #workspaceGenerationQueue .workspace-quota-status progress { display:block; flex:0 0 4px; height:4px; width:100%; margin:0; border:0; border-radius:4px; overflow:hidden; appearance:none; background:#203d4b; accent-color:var(--credit-tone); }
body #workspaceGenerationQueue .workspace-quota-status progress::-webkit-progress-bar { background:#203d4b; }
body #workspaceGenerationQueue .workspace-quota-status progress::-webkit-progress-value { background:var(--credit-tone); border-radius:4px; }
body #workspaceGenerationQueue .workspace-quota-status progress::-moz-progress-bar { background:var(--credit-tone); }
body #workspaceGenerationQueue .workspace-credit-footer { align-items:center; gap:6px; font-size:9px; line-height:14px; }
body #workspaceGenerationQueue .workspace-credit-footer > span { color:var(--credit-tone); }
body #workspaceGenerationQueue .workspace-buy-credits { color:#65dce9; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; border-radius:3px; font-weight:700; }
body #workspaceGenerationQueue .workspace-buy-credits:hover { color:#c4f8ff; }
body #workspaceGenerationQueue .workspace-buy-credits:focus-visible { outline:2px solid #65dce9; outline-offset:3px; }
body #workspaceGenerationQueue .activity-count,
body #workspaceGenerationQueue .workspace-queued-heading strong { color:#65dce9; background:#123a47; border-radius:5px; padding:2px 5px; font-size:11px; }

/* Sidebar hierarchy: section disclosures above indented navigation options. */
body .sidebar.app-rail .nav-category { margin:0 0 14px; padding:0; }
body .sidebar.app-rail .nav-category > summary {
  display:flex; align-items:center; gap:8px; list-style:none;
  padding:8px 10px; margin:0 0 5px; border-radius:5px;
  color:#69c7ce; background:linear-gradient(90deg,#10303b,transparent);
  font-size:10px; font-weight:750; letter-spacing:1.35px; line-height:16px;
}
body .sidebar.app-rail .nav-category > summary::-webkit-details-marker { display:none; }
body .sidebar.app-rail .nav-category > summary::after {
  content:''; margin-left:auto; width:6px; height:6px; flex:0 0 6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); opacity:.7;
}
body .sidebar.app-rail .nav-category[open] > summary::after { transform:rotate(45deg); }
body .sidebar.app-rail .nav-category > summary:hover { color:#b5f4f1; background:#143744; }
body .sidebar.app-rail .nav-category > .nav {
  box-sizing:border-box; width:calc(100% - 9px); margin:2px 0 2px 9px;
  min-height:37px; padding:8px 10px; gap:10px; line-height:18px;
  border:1px solid transparent; border-radius:6px;
  color:#b6c8d3; font-size:12px; font-weight:500; letter-spacing:0;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}
body .sidebar.app-rail .nav-category > .nav .pf-nav-icon { width:17px; height:17px; flex:0 0 17px; color:#789fac; }
body .sidebar.app-rail .nav-category > .nav:hover { background:#122e3b; border-color:#2b5261; color:#effcff; }
body .sidebar.app-rail .nav-category > .nav.active { background:#073d49; border-color:#168a99; color:#83f0ed; font-weight:650; box-shadow:inset 3px 0 #37d4d5; }
body .sidebar.app-rail .nav-category > .nav.active .pf-nav-icon { color:#62e1df; }
body .sidebar.app-rail .nav-category > :is(summary,.nav):focus-visible { outline:2px solid #65dce9; outline-offset:-2px; }
@media(prefers-reduced-motion:reduce) { body .sidebar.app-rail .nav-category > .nav { transition:none; } }

/* Compact design library, queue and history. */
body #designList .design-with-thumbnail { display:grid; grid-template-columns:76px minmax(0,1fr); column-gap:16px; row-gap:7px; padding:14px; }
body #designList .design-card-thumbnail { grid-column:1; grid-row:1 / span 3; width:76px; height:96px; object-fit:contain; border:1px solid #315260; border-radius:6px; background:#071923; align-self:center; }
body #designList .design-with-thumbnail > :not(img) { grid-column:2; min-width:0; margin:0; }
body :is(#queueView,#reportsView) .page-head { margin-bottom:14px; gap:14px; align-items:center; }
body :is(#queueView,#reportsView) .page-head h1 { font-size:24px; line-height:1.25; margin:3px 0 6px; }
body :is(#queueView,#reportsView) .page-head p { font-size:12px; margin:4px 0; }
body :is(#queueView,#reportsView) .page-head .eyebrow { display:none; }
body :is(#queueView,#reportsView) :is(button,.secondary-button,.ghost-button,.primary-button,.danger-button) { min-height:32px; padding:6px 10px; font-size:11px; }
body :is(#queueView,#reportsView) :is(.queue-summary-grid,.report-summary) { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:10px 0; }
body :is(#queueView,#reportsView) .summary-pill { padding:10px 12px; min-height:0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
body :is(#queueView,#reportsView) .summary-pill strong { font-size:21px; line-height:1.2; color:#65dce9; }
body :is(#queueView,#reportsView) .summary-pill small { font-size:11px; }
body :is(#queueView,#reportsView) :is(.queue-list,.report-list) { display:grid; gap:10px; }
body #queueView .queue-batch { padding:12px; margin:0; border-radius:9px; }
body #queueView :is(.queue-batch-head,.queue-item-head) { gap:12px; }
body #queueView .queue-item { padding:10px; margin:7px 0 0; border-radius:7px; }
body #queueView .queue-main { gap:12px; min-width:0; }
body #queueView .queue-main > div { min-width:0; }
body #queueView .queue-preview { width:48px; height:60px; min-width:48px; flex:0 0 48px; border-radius:5px; }
body #queueView .queue-preview img { width:100%; height:100%; object-fit:contain; }
body :is(#queueView,#reportsView) h3 { font-size:14px; line-height:1.35; margin:0 0 4px; overflow-wrap:anywhere; }
body :is(#queueView,#reportsView) :is(.queue-batch-head h2,.queue-batch-head strong) { font-size:14px; }
body :is(#queueView,#reportsView) :is(.queue-item p,.queue-batch p,.report-item p) { font-size:11px; line-height:1.5; margin:4px 0; }
body :is(#queueView,#reportsView) :is(.chip,.status-dot,.queue-item-expiry) { font-size:10px; }
body #queueView :is(.queue-meta,.queue-actions,.queue-batch-actions) { gap:6px; flex-wrap:wrap; }
body #queueView .queue-timezone-note { padding:8px 10px; margin:8px 0; font-size:11px; }
body #reportsView .report-item { padding:12px 14px; border-radius:8px; }
body :is(#queueView,#reportsView) :is(.generation-history-report,.report-details) { padding:8px 10px; margin-top:8px; font-size:11px; }
body :is(#queueView,#reportsView) :is(.generation-history-report,.report-details) summary { font-size:11px; }
body #reportsView pre { font-size:11px; line-height:1.5; max-height:260px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:760px) {
 body :is(#queueView,#reportsView) :is(.queue-summary-grid,.report-summary) { grid-template-columns:repeat(2,minmax(0,1fr)); }
 body #queueView .queue-item-head { flex-wrap:wrap; }
 body #queueView .queue-actions { margin-left:60px; }
 body #designList .design-with-thumbnail { grid-template-columns:58px minmax(0,1fr); gap:10px; }
 body #designList .design-card-thumbnail { width:58px; height:76px; }
}
body #queueView .queue-filmstrip { display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; padding:4px 2px 12px; max-width:100%; min-width:0; scroll-snap-type:x proximity; overscroll-behavior-x:contain; scrollbar-color:#347588 #102632; }
body #queueView .queue-filmstrip-item { flex:0 0 146px; display:flex; flex-direction:column; align-items:center; gap:7px; padding:8px; border:1px solid #284855; border-radius:8px; background:#0b202c; scroll-snap-align:start; }
body #queueView .queue-filmstrip-preview { display:block; width:128px; height:166px; border-radius:5px; overflow:hidden; background:#06131c; }
body #queueView .queue-filmstrip-preview img { width:100%; height:100%; object-fit:contain; }
body #queueView .queue-filmstrip-preview:hover { outline:2px solid #37cbd5; }
body #queueView .queue-filmstrip-actions { display:flex; gap:4px; }
body #queueView .queue-filmstrip-actions :is(a,button) { padding:5px 7px; min-height:29px; font-size:10px; }
body #queueView .queue-filmstrip-hint { color:var(--muted); font-size:10px; margin:10px 0 4px; }
body #queueView .queue-filmstrip:focus-visible,body #queueView .queue-filmstrip-preview:focus-visible { outline:2px solid #65dce9; outline-offset:2px; }
body #queueView .queue-batch { min-width:0; max-width:100%; }
body #queuePreviewMeta { font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
/* Clean high-resolution wordmark, with readable ink on the dark header. */
body #appView .m5-topbar .brand .brand-wordmark { width:260px; height:56px; object-fit:cover; object-position:center; border-radius:0; image-rendering:auto; }
@media(max-width:760px) { body #appView .m5-topbar .brand .brand-wordmark { width:220px; height:48px; } }
/* Poster viewer: clear labelled metadata and a stable close control. */
body #queuePreviewDialog { padding:0; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; }
body #queuePreviewDialog .freelancer-dialog { box-sizing:border-box; width:min(780px,calc(100vw - 26px)); padding:18px; margin:0; }
body #queuePreviewDialog .queue-preview-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:0 0 12px; }
body #queuePreviewDialog .queue-preview-heading > div { min-width:0; }
body #queuePreviewDialog #queuePreviewTitle { font-size:18px; line-height:1.35; margin:5px 0 0; overflow-wrap:anywhere; }
body #queuePreviewDialog .queue-preview-close { appearance:none; display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; min-width:32px; min-height:32px; padding:0; margin:0; border:1px solid #426372; border-radius:6px; font:24px/1 Arial,sans-serif; color:#d9eef4; background:#102b38; box-shadow:none; }
body #queuePreviewDialog .queue-preview-close::before,body #queuePreviewDialog .queue-preview-close::after { display:none; }
body #queuePreviewDialog .queue-preview-close:hover { background:#194252; border-color:#63dce6; }
body #queuePreviewDialog .queue-preview-close:focus-visible { outline:2px solid #63dce6; outline-offset:2px; }
body #queuePreviewDialog .queue-preview-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 16px; margin:0; padding:12px; background:#0a202c; border:1px solid #284753; border-radius:7px; }
body #queuePreviewDialog .queue-preview-facts div { min-width:0; }
body #queuePreviewDialog .queue-preview-facts dt { font-size:10px; color:#8cabb9; margin:0 0 3px; }
body #queuePreviewDialog .queue-preview-facts dd { font-size:11px; color:#dcebf2; line-height:1.4; margin:0; overflow-wrap:anywhere; }
body #queuePreviewDialog .queue-preview-retention { font-size:10px; color:#9cb7c5; margin:8px 0 12px; }
body #queuePreviewDialog .poster-large-preview { min-height:0; padding:8px; }
body #queuePreviewDialog .poster-large-preview img { max-height:52dvh; width:auto; max-width:100%; object-fit:contain; }
@media(max-width:600px) { body #queuePreviewDialog .queue-preview-facts { grid-template-columns:repeat(2,minmax(0,1fr)); } body #queuePreviewDialog .freelancer-dialog { padding:12px; } }
body #queuePreviewDialog .freelancer-dialog { display:flex; flex-direction:column; gap:10px; }
body #queuePreviewDialog .queue-preview-heading { margin-bottom:0; }
body #queuePreviewDialog .queue-preview-retention { margin-bottom:0; }
body #queuePreviewDialog .dialog-actions { margin-top:0; }
body #templateStudioDialog #studioCanvasSize { width:auto; max-width:220px; min-width:140px; height:32px; min-height:32px; margin:0; padding:5px 26px 5px 9px; font-size:11px; color:#b6e9ee; background-color:#102b39; border:1px solid #38616f; border-radius:6px; }
body #templateStudioDialog #studioCanvasSize:disabled { opacity:.65; cursor:not-allowed; }

/* Keep the complete inspector reachable inside the Studio viewport. */
body #appView #templateStudioDialog #propertiesPanel { max-height:calc(100dvh - 190px); padding-bottom:24px; display:block; }
body #appView #templateStudioDialog #propertiesPanel > * { flex-shrink:0; }
body #appView #templateStudioDialog #designerLayerList { overflow:visible; max-height:none; padding-bottom:12px; }
body #fieldBuilderDialog .builder-mapped-toggle { display:flex; align-items:center; gap:8px; font-size:12px; }
body #fieldBuilderDialog .builder-mapped-toggle[hidden] { display:none; }
body #fieldBuilderDialog #builderShowMapped { width:16px; height:16px; min-height:16px; margin:0; }

body #appView #templateStudioDialog .studio-alignment-bar { width:100%;box-sizing:border-box;padding:8px 10px;margin:0 0 8px;border:1px solid #315261;border-radius:7px;background:#0a202c; }
body #appView #templateStudioDialog .studio-alignment-bar[hidden] {display:none;}
body #appView #templateStudioDialog .studio-alignment-bar p {margin:0 0 7px;font-size:11px;line-height:1.45;color:#aac3ce;}
body #appView #templateStudioDialog .studio-alignment-bar [role=group] {display:flex;flex-wrap:wrap;gap:6px;}
body #appView #templateStudioDialog .studio-alignment-bar button {min-height:30px;padding:5px 9px;font-size:11px;border:1px solid #386574;border-radius:5px;background:#123441;color:#d1f5f8;}
body #appView #templateStudioDialog .studio-alignment-bar button:hover:not(:disabled) {border-color:#00c4db;background:#195060;}
body #appView #templateStudioDialog .studio-alignment-bar button:disabled {opacity:.45;cursor:not-allowed;}

body #appView #templateStudioDialog .studio-fitting-options {padding:10px;margin-top:10px;border:1px solid #326273;border-radius:6px;background:#102e3c;}
body #appView #templateStudioDialog .studio-fitting-options h4 {margin:0 0 7px;color:#77dce7;font-size:12px;}
body #appView #templateStudioDialog #studioTextFitStatus {font-size:11px;line-height:1.5;color:#b9e7eb;padding:7px 0;}

body #appView #templateStudioDialog #studioMultiSelect {margin-bottom:7px;}
body #appView #templateStudioDialog #studioMultiSelect[aria-pressed="true"] {background:#006878;border-color:#32dce7;color:white;}

body #appView #templateStudioDialog .studio-alignment-bar {display:flex;flex-wrap:wrap;gap:5px;padding:6px 8px;margin-bottom:6px;}
body #appView #templateStudioDialog .studio-alignment-bar p {flex-basis:100%;margin:0;font-size:10px;line-height:1.35;}
body #appView #templateStudioDialog .studio-alignment-bar [role=group] {gap:4px;}
body #appView #templateStudioDialog .studio-alignment-bar button {min-height:27px;padding:4px 7px;font-size:10px;}
body #appView #templateStudioDialog #studioMultiSelect {margin:0;}
.generated-image-dimensions {display:block;margin:5px 0;color:#a8cbd6;font-size:11px;text-align:center;font-variant-numeric:tabular-nums;}
/* Studio editing scope, preview context and discoverable controls. */
body #appView #templateStudioDialog :is(#textStyleGroupStatus,#avatarSizeGroupStatus) { display:none; }
body #appView #templateStudioDialog .studio-edit-scope { display:grid; gap:7px; padding:10px; margin-top:10px; border:1px solid #28727d; border-radius:8px; background:#07313b; }
body #appView #templateStudioDialog .studio-edit-scope[hidden] { display:none; }
body #appView #templateStudioDialog .studio-edit-scope strong { font-size:12px; color:#6be5ee; }
body #appView #templateStudioDialog .studio-edit-scope small,
body #appView #templateStudioDialog #studioSampleTextWrap small { font-size:11px; line-height:1.4; color:#a7bdc8; }
body #appView #templateStudioDialog .studio-edit-scope button { min-height:30px; padding:5px 9px; font-size:11px; }
body #appView #templateStudioDialog #studioSampleTextWrap { display:grid; gap:6px; margin-top:10px; font-size:12px; }
body #appView #templateStudioDialog #studioSampleTextWrap[hidden] { display:none; }
body #appView #templateStudioDialog .studio-preview-guidance { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:7px 0; font-size:11px; color:#adc5ce; }
body #appView #templateStudioDialog .studio-preview-guidance label { display:flex; align-items:center; gap:6px; margin:0; }
body #appView #templateStudioDialog .studio-preview-guidance select { width:auto; min-height:28px; padding:4px 24px 4px 7px; font-size:11px; }
body #appView #templateStudioDialog #studioSnapToggle { appearance:auto; width:16px !important; height:16px !important; min-width:16px !important; min-height:16px !important; max-width:16px !important; max-height:16px !important; flex:0 0 16px; padding:0 !important; margin:0; accent-color:#00bfd4; box-shadow:none; }
body #appView #templateStudioDialog #studioSnapToggle::before,
body #appView #templateStudioDialog #studioSnapToggle::after { display:none; content:none; }
body #appView #templateStudioDialog .studio-snap-control { display:grid; gap:4px; flex-basis:100%; }
body #appView #templateStudioDialog .studio-snap-control small { font-size:11px; line-height:1.4; color:#9fb8c5; }
body #appView #templateStudioDialog .studio-preview-guidance details { flex-basis:100%; }
body #appView #templateStudioDialog .studio-preview-guidance p { margin:6px 0; line-height:1.5; }
body #appView #templateStudioDialog .studio-save-summary { font-size:11px; color:#a5ddd2; border:1px solid #315964; padding:6px 8px; border-radius:6px; }
body #appView #templateStudioDialog .studio-save-summary[data-status=dirty] { color:#f6cf80; border-color:#7c643e; }
body #appView #templateStudioDialog .studio-save-summary[data-status=error] { color:#ff9393; }
body #appView #templateStudioDialog .temp-adjust-banner { display:none; }

body #appView #templateStudioDialog .studio-font-fit-summary { margin:8px 0 10px; padding:9px; border:1px solid #316574; border-radius:6px; background:#0b2b35; }
body #appView #templateStudioDialog .studio-font-fit-numbers { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11px; color:#afc5cf; }
body #appView #templateStudioDialog .studio-font-fit-numbers strong { color:#70e0d4; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
body #appView #templateStudioDialog .studio-font-fit-summary[data-fit="reduced"] { border-color:#846334; background:#2a251c; }
body #appView #templateStudioDialog .studio-font-fit-summary[data-fit="reduced"] #studioFontActual { color:#ffd080; }
body #appView #templateStudioDialog .studio-font-fit-summary #studioTextFitStatus { margin:6px 0 0; padding:0; font-size:11px; line-height:1.4; color:#bdd0d8; }
body #appView #templateStudioDialog .studio-overlap-status { position:absolute; bottom:5px; left:5px; right:5px; z-index:5; pointer-events:none; padding:6px 8px; border:1px solid #bd8d42; border-radius:5px; background:rgba(42,32,15,.96); color:#ffdb9e; font-size:11px; line-height:1.35; }
body #appView #templateStudioDialog .studio-overlap-status[hidden] { display:none; }
body #appView #templateStudioDialog .studio-text-loading { position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px; background:#0b202b; color:#bce4eb; font-size:13px; text-align:center; }
body #appView #templateStudioDialog .studio-text-loading[hidden] { display:none; }

/* Source wording gets the full inspector width; its action belongs below. */
body #appView #templateStudioDialog #textChoiceRuleList .text-choice-rule-row { display:flex; flex-direction:column; align-items:stretch; gap:7px; min-width:0; padding:10px; }
body #appView #templateStudioDialog #textChoiceRuleList .text-choice-rule-value { display:block; width:100%; min-width:0; max-width:none; white-space:normal; word-break:normal; overflow-wrap:break-word; font-size:12px; line-height:1.4; }
body #appView #templateStudioDialog #textChoiceRuleList .text-choice-rule-row select { width:100%; min-width:0; max-width:100%; box-sizing:border-box; margin:0; font-size:11px; padding:7px 22px 7px 8px; }
body #appView #templateStudioDialog .text-choice-manual-label { font-size:10px; font-weight:400; color:#91b5c1; }

/* Keep record selection compact, with detail only for the chosen method. */
body #generateView .bulk-mode-grid { gap:6px; margin:8px 0 12px; }
body #generateView .bulk-mode { flex:0 1 auto; min-height:34px; padding:7px 10px; text-align:center; }
body #generateView .bulk-mode b { font-size:12px; }
body #generateView .bulk-mode small { display:none; }
body #generateView .bulk-mode[hidden] { display:none; }
body #generateView .bulk-filter { padding:12px; gap:10px; margin-bottom:12px; }
body #generateView #bulkCreatorControls small { flex-basis:100%; font-size:11px; line-height:1.45; color:var(--muted); }
body #generateView #bulkCreatorControls label { flex:1 1 220px; }
body #generateView .generate-records-panel, body #generateView .generate-review-panel { padding:16px; }
body #generateView .bulk-row-list .row-option { padding:8px 10px; gap:8px; }
body #generateView .selection-tools { gap:8px; padding:8px 0; }
body #generateView #bulkCreatorControls { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; }
body #generateView #bulkCreatorControls[hidden] { display:none; }
body #generateView #bulkCreatorControls datalist { display:none; }
body #generateView #bulkCreatorControls label { display:grid; gap:6px; width:100%; min-width:0; margin:0; }
body #generateView #bulkCreatorControls input { width:100%; min-width:0; box-sizing:border-box; }
body #generateView #bulkCreatorControls button { width:auto; min-width:0; justify-self:start; white-space:normal; }
body #generateView #bulkCreatorControls small { grid-column:1 / -1; }
body #appView #templateStudioDialog #studioLayerSearch { width:100%; box-sizing:border-box; min-height:30px; padding:6px 8px; margin:0 0 8px; font-size:11px; }
body #appView #templateStudioDialog #designerLayerList .layer-row { grid-template-columns:18px minmax(0,1fr) auto 24px; gap:3px; }
body #appView #templateStudioDialog #designerLayerList [data-layer-lock] { font-size:12px; padding:0; opacity:.65; }
body #appView #templateStudioDialog #designerLayerList [data-layer-lock][aria-pressed="true"] { opacity:1; background:#493b24; }
body #generateView .generate-one-off-help { display:grid; gap:5px; padding:10px 12px; border:1px solid #326371; border-radius:7px; background:#102b37; font-size:12px; line-height:1.45; }
body #generateView .generate-one-off-help strong { color:#7fdce6; }
body #generateView .generate-one-off-help span { color:#b3cbd7; }
body #generateView .generate-credit-help { font-size:11px; line-height:1.5; color:#b3cbd7; margin:12px 0; }
body .credit-summary { display:grid !important; gap:7px; width:100%; }
body .credit-summary > div { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
body .credit-summary .credit-summary-title { font-size:11px; color:#91b7c5; }
body .credit-summary > small { font-size:10px; line-height:1.45; color:#a4bfcb; }
body .credit-summary strong { font-size:13px; font-variant-numeric:tabular-nums; }
body .credit-summary .workspace-credit-balance strong { font-size:18px; color:#70e0d4; }
body .credit-summary progress { width:100%; }
body #workspaceGenerationQueue .credit-summary { gap:3px; }
body #workspaceGenerationQueue .credit-summary .credit-summary-title { font-size:10px; }
body #workspaceGenerationQueue .credit-summary .workspace-credit-balance strong { color:var(--credit-tone); }
@media(min-width:901px) {
  body #workspaceGenerationQueue { height:340px; min-height:340px; max-height:340px; flex-basis:340px; grid-template-rows:24px 60px 126px 20px minmax(0,1fr); }
}
@media(max-width:900px) {
  body #workspaceGenerationQueue.mobile-activity-expanded { grid-template-rows:46px 60px auto 24px minmax(76px,1fr); overflow-y:auto; }
}
body #workspaceGenerationQueue .workspace-activity-spinner { display:inline-block; width:9px; height:9px; margin-right:5px; border:2px solid #295563; border-top-color:#52e4ef; border-radius:50%; vertical-align:-2px; animation:workspace-activity-spin .85s linear infinite; }
body #workspaceGenerationQueue .job-progress.is-active { animation:workspace-activity-pulse 1.7s ease-in-out infinite; }
body #workspaceGenerationQueue .workspace-job-compact { display:flex; align-items:center; gap:5px; height:21px; padding:0; font-size:10px; }
body #workspaceGenerationQueue .workspace-job-compact strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
body #workspaceGenerationQueue .workspace-queue-position { flex-shrink:0; color:#65dce9; font-variant-numeric:tabular-nums; }
body #workspaceGenerationQueue .workspace-queue-state { max-width:65px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:9px; }
body #workspaceGenerationQueue .workspace-job-compact button { padding:0 3px; min-height:20px; height:20px; }
body #workspaceGenerationQueue .workspace-queue-more { display:block; color:#65dce9; font-size:10px; padding-top:3px; }
@keyframes workspace-activity-spin { to { transform:rotate(360deg); } }
@keyframes workspace-activity-pulse { 50% { opacity:.55; } }
@media(prefers-reduced-motion:reduce) {
  body #workspaceGenerationQueue .workspace-activity-spinner,
  body #workspaceGenerationQueue .job-progress.is-active,
  body #workspaceGenerationQueue .job-progress.is-indeterminate i { animation:none; }
}

/* Activity hierarchy: reserve space for content rather than overlapping fixed rows. */
@media(min-width:901px) {
  body .app-shell.m5-shell > .shell { grid-template-columns:280px minmax(0,1fr); }
  body #appView .sidebar.app-rail.m5-rail { width:280px; bottom:380px; }
  body #workspaceGenerationQueue { width:260px; height:360px; min-height:360px; max-height:360px; flex-basis:360px; grid-template-rows:22px 54px auto 20px minmax(76px,1fr); padding:12px; gap:4px; }
}
body #workspaceGenerationQueue .generation-queue-heading { font-size:13px; }
body #workspaceGenerationQueue .workspace-current-job { padding:0; gap:0; }
body #workspaceGenerationQueue .workspace-current-job > strong,
body #workspaceGenerationQueue .workspace-job-title strong { font-size:14px; font-weight:700; color:#ecf7fc; }
body #workspaceGenerationQueue .workspace-current-job > span { font-size:11px; line-height:16px; }
body #workspaceGenerationQueue .workspace-job.current { position:relative; padding:0; width:100%; }
body #workspaceGenerationQueue .workspace-current-resume { position:absolute; right:0; top:24px; min-height:16px; padding:0 3px; font-size:10px; line-height:16px; }
body #workspaceGenerationQueue .workspace-job.current:has(.workspace-current-resume) .workspace-job-status { padding-right:108px; }
body #workspaceGenerationQueue .workspace-job.current .workspace-job-title { height:24px; min-height:24px; }
body #workspaceGenerationQueue .workspace-job.current .workspace-job-status { height:16px; line-height:16px; }
body #workspaceGenerationQueue .workspace-job.current .job-progress { margin-top:5px; }
body #workspaceGenerationQueue .workspace-job.current .idle-progress { visibility:hidden; }
body #workspaceGenerationQueue .workspace-job.current .workspace-job-status { position:relative; padding-left:18px; }
body #workspaceGenerationQueue .workspace-job.current .workspace-activity-spinner { position:absolute; left:0; top:1px; margin:0; }
body #workspaceGenerationQueue .workspace-job-compact [data-cancel-generation-job] { flex-shrink:0; color:#ffb9bf; font-size:10px; min-width:40px; }
body #workspaceGenerationQueue .workspace-job-compact [data-cancel-generation-job]:disabled { color:var(--muted); }
body #workspaceGenerationQueue .workspace-quota-status { padding:8px 0; gap:6px; }
body #workspaceGenerationQueue .credit-summary { grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; }
body #workspaceGenerationQueue .credit-summary > * { grid-column:1 / -1; }
body #workspaceGenerationQueue .credit-summary > div:nth-of-type(2),
body #workspaceGenerationQueue .credit-summary > div:nth-of-type(3) { grid-column:auto; justify-content:flex-start; gap:6px; font-size:10px; }
body #workspaceGenerationQueue .credit-summary > div:nth-of-type(2) strong { color:#c5baff; font-size:13px; }
body #workspaceGenerationQueue .credit-summary > div:nth-of-type(3) strong { color:#d4e5ee; font-size:13px; }
body #workspaceGenerationQueue .credit-summary .workspace-credit-balance { align-items:center; }
body #workspaceGenerationQueue .credit-summary .workspace-credit-balance > span { font-size:12px; font-weight:600; color:#d4e5ee; }
body #workspaceGenerationQueue .credit-summary .workspace-credit-balance strong { font-size:22px; line-height:26px; letter-spacing:-.3px; }
body #workspaceGenerationQueue .credit-summary > .credit-summary-explanation { display:none; }
body #workspaceGenerationQueue .workspace-credit-footer { font-size:10px; line-height:16px; }
body #workspaceGenerationQueue .workspace-buy-credits { font-size:11px; }
body #workspaceGenerationQueue .workspace-queued-heading { font-size:11px; font-weight:600; color:#c5dbe6; }
body #workspaceGenerationQueue .workspace-queued-list { scrollbar-gutter:auto; }
body #workspaceGenerationQueue .workspace-job-compact strong { font-size:11px; }
/* Raised billing surfaces; colour identifies tiers, shared buttons retain action states. */
body .background-asset-dialog { width:min(700px,calc(100vw - 32px)); max-height:85dvh; overflow:auto; padding:24px; background:var(--panel); color:var(--text); border:1px solid var(--border-strong); border-radius:14px; }
body .background-asset-dialog::backdrop { background:#0009; }
body .background-asset-dialog[open] { display:flex; flex-direction:column; overflow:hidden; }
body .background-asset-dialog h2 { margin:0; }
body .background-asset-dialog > label { display:grid; gap:6px; }
body .background-asset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin:18px 0; min-height:0; overflow:auto; flex:1; }
body .background-asset-option { display:grid; grid-template-columns:20px 1fr; gap:8px; padding:12px; cursor:pointer; }
body .background-asset-option img { width:100%; height:110px; object-fit:contain; grid-column:1 / -1; grid-row:1; background:#07131d; border-radius:6px; }
body .background-asset-option span { overflow-wrap:anywhere; font-size:12px; }
body .background-asset-option:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
body .background-asset-option[hidden] { display:none; }
body .background-asset-dialog .dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; flex-shrink:0; }
body #planView .customer-plan-grid { gap:20px; padding:20px 0 12px; }
body #planView .plan-tier-free { --plan-accent:#b6c7d8; --plan-tint:32,47,64; }
body #planView .plan-tier-starter { --plan-accent:#65bbff; --plan-tint:15,68,108; }
body #planView .plan-tier-pro { --plan-accent:#c09aff; --plan-tint:64,38,104; }
body #planView .plan-tier-agency { --plan-accent:#6ee1ad; --plan-tint:19,78,63; }
body #planView .customer-plan-card {
  padding:25px 16px 16px; gap:9px; border-radius:16px;
  border:1px solid color-mix(in srgb,var(--plan-accent) 42%,#243d4b);
  background:radial-gradient(ellipse at 50% 0,rgba(var(--plan-tint),.85),transparent 52%),linear-gradient(155deg,#142b3a,#0a1825 80%);
  box-shadow:0 14px 26px -12px #000b,0 3px 5px #0004,inset 0 1px 0 #ffffff14;
  transition:box-shadow .18s,border-color .18s;
}
body #planView .customer-plan-card::before { left:25%; right:25%; height:3px; background:var(--plan-accent); box-shadow:0 2px 18px var(--plan-accent); }
body #planView .customer-plan-card:hover, body #planView .customer-plan-card:focus-within {
  border-color:var(--plan-accent); box-shadow:0 18px 32px -12px #000d,0 0 20px rgba(var(--plan-tint),.45),inset 0 1px #ffffff20;
}
body #planView .plan-tier-pro { box-shadow:0 16px 30px -12px #000d,0 0 0 1px #ac80f63b,0 0 26px #8d55ee14,inset 0 1px #ffffff22; }
body #planView .plan-tier-heading { gap:10px; }
body #planView .plan-tier-heading h3 { font-size:20px; letter-spacing:.03em; }
body #planView .plan-tier-mark { width:42px; height:42px; flex-basis:42px; background:linear-gradient(145deg,#ffffff16,#00000020); border:1px solid color-mix(in srgb,var(--plan-accent) 40%,transparent); box-shadow:inset 0 1px #ffffff24,0 5px 12px #0004; }
body #planView .plan-tier-mark svg { width:25px; height:25px; }
body #planView .plan-price b { font-size:30px; color:#f6fbff; font-variant-numeric:tabular-nums; }
body #planView .plan-price { min-height:56px; height:56px; align-content:center; }
body #planView .plan-tier-free .plan-price { margin-bottom:0; }
body #planView .plan-unit-cost { min-height:60px; }
body #planView .plan-highlight { padding:10px 12px; border:1px solid color-mix(in srgb,var(--plan-accent) 25%,transparent); background:linear-gradient(115deg,rgba(var(--plan-tint),.6),#07151f70); box-shadow:inset 0 1px 3px #0003; }
body #planView .plan-highlight strong { color:var(--plan-accent); font-size:24px; }
body #planView .plan-unit-cost { color:var(--plan-accent); }
body #planView .plan-inclusions .is-included .plan-feature-symbol { color:var(--plan-accent); background:rgba(var(--plan-tint),.65); }
body #planView .customer-plan-card .plan-recommendation { background:linear-gradient(135deg,color-mix(in srgb,var(--plan-accent) 45%,#10232f),color-mix(in srgb,var(--plan-accent) 25%,#10232f)); border-color:var(--plan-accent); box-shadow:0 4px 14px #0008,inset 0 1px #ffffff35; color:#fff; }
body #planView .plan-current-strip, body #planView .usage-card { background:linear-gradient(135deg,#152e3d,#0c1e2b); box-shadow:0 6px 14px -7px #0009,inset 0 1px #ffffff0d; border-color:#365669; }
body #planView .billing-section-heading { margin-top:20px; padding-left:12px; border-left:3px solid #32cfdd; }
body #planView .topup-grid { gap:18px; padding:18px 0 10px; }
body #planView .topup-card { --addon-accent:#68deea; padding:24px 16px 16px; gap:9px; border-radius:14px; border-color:#376677; background:radial-gradient(ellipse at 0 0,#15546860,transparent 75%),linear-gradient(145deg,#142b3b,#0b1926); box-shadow:0 10px 20px -10px #000c,inset 0 1px #ffffff18; }
body #planView :where(#storagePackGrid) .topup-card { --addon-accent:#c2a3fa; border-color:#5a477a; background:radial-gradient(ellipse at 0 0,#64449d55,transparent 75%),linear-gradient(145deg,#19283b,#101a2b); }
body #planView .topup-card h3 { color:var(--addon-accent); font-size:19px; }
body #planView .topup-card > b { font-size:24px; }
body #planView .topup-card:is(:hover,:focus-within) { border-color:var(--addon-accent); box-shadow:0 14px 24px -10px #000d,inset 0 1px #ffffff24; }
body #planView #storagePackGrid .plan-recommendation { background:#513780; border-color:#b38fea; }
@media(max-width:650px) {
  body #planView .customer-plan-grid, body #planView .topup-grid { gap:26px; }
  body #planView .customer-plan-card { padding:25px 18px 18px; }
  body #planView .plan-unit-cost { min-height:0; }
  body #planView .plan-unit-cost[aria-hidden=true] { display:none; }
}
@media(max-width:900px) {
  body #workspaceGenerationQueue.mobile-activity-expanded { grid-template-rows:46px 54px auto 20px minmax(76px,1fr); }
}
/* Getting started: readable steps with navigation that never changes the app route. */
body #appView :is(#helpView,#queue-helpView) .getting-started-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:20px; align-items:start; max-width:1120px; }
body #appView :is(#helpView,#queue-helpView) .guide-contents { padding:18px; display:grid; gap:5px; }
body #appView :is(#helpView,#queue-helpView) .guide-contents button { text-align:left; white-space:normal; line-height:1.5; padding:7px 5px; }
body #appView :is(#helpView,#queue-helpView) .guide-sections { min-width:0; display:grid; gap:16px; }
body #appView :is(#helpView,#queue-helpView) .guide-section { padding:24px; scroll-margin-top:24px; min-width:0; }
body #appView :is(#helpView,#queue-helpView) .guide-section h2 { font-size:20px; margin:0 0 16px; }
body #appView :is(#helpView,#queue-helpView) .guide-section :is(p,li) { line-height:1.75; font-size:14px; }
body #appView :is(#helpView,#queue-helpView) .guide-section p { margin:0 0 14px; }
body #appView :is(#helpView,#queue-helpView) .guide-section ul { padding-left:22px; margin:0 0 16px; }
body #appView :is(#helpView,#queue-helpView) .guide-section li { margin:7px 0; }
body #appView :is(#helpView,#queue-helpView) .guide-section strong { color:#dcf6fa; }
body #appView :is(#helpView,#queue-helpView) .guide-table { overflow-x:auto; margin:0 0 16px; }
body #appView :is(#helpView,#queue-helpView) table { width:100%; border-collapse:collapse; font-size:13px; }
body #appView :is(#helpView,#queue-helpView) :is(th,td) { text-align:left; padding:10px; border-bottom:1px solid #294552; line-height:1.6; }
@media(max-width:900px) {
  body #appView :is(#helpView,#queue-helpView) .getting-started-layout { grid-template-columns:minmax(0,1fr); }
  body #appView :is(#helpView,#queue-helpView) .guide-section { padding:18px; }
}
body #workspaceGenerationQueue .workspace-queue-policy { padding:8px 0; border-top:1px solid #294552; }
body #workspaceGenerationQueue .workspace-queue-policy > div { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11px; }
body #workspaceGenerationQueue .workspace-priority-badge { padding:3px 6px; border:1px solid currentColor; border-radius:5px; font-size:10px; }
body #workspaceGenerationQueue .priority-free { color:#b6c7d8; }
body #workspaceGenerationQueue .priority-starter { color:#65bbff; }
body #workspaceGenerationQueue :is(.priority-pro,.priority-trial) { color:#c09aff; }
body #workspaceGenerationQueue .priority-agency { color:#6ee1ad; }
body #workspaceGenerationQueue .priority-unknown { color:#b6c7d8; }
body #workspaceGenerationQueue .workspace-queue-policy p { margin:5px 0; font-size:11px; line-height:1.4; }
body #workspaceGenerationQueue .workspace-queue-policy small { display:block; color:#a7bdc9; font-size:10px; line-height:1.4; }
body #workspaceGenerationQueue .workspace-current-position { font-size:10px; color:#65dce9; }
@media(min-width:901px) {
  body #appView .sidebar.app-rail.m5-rail { bottom:460px; }
  body #workspaceGenerationQueue { height:440px; min-height:440px; max-height:440px; flex-basis:440px; grid-template-rows:22px 68px auto auto 20px minmax(76px,1fr); }
}
@media(max-width:900px) {
  body #workspaceGenerationQueue.mobile-activity-expanded { grid-template-rows:46px 68px auto auto 24px minmax(76px,1fr); }
  body #workspaceGenerationQueue:not(.mobile-activity-expanded) .workspace-queue-policy { display:none; }
}
body #workspaceGenerationQueue a.workspace-priority-badge { text-decoration:none; cursor:pointer; }
body #workspaceGenerationQueue a.workspace-priority-badge:is(:hover,:focus-visible) { text-decoration:underline; background:#ffffff10; }
body #queue-helpView strong.queue-help-free { color:#b6c7d8; }
body #queue-helpView strong.queue-help-starter { color:#65bbff; }
body #queue-helpView strong.queue-help-pro { color:#c09aff; }
body #queue-helpView strong.queue-help-agency { color:#6ee1ad; }
/* Package selections are checkboxes, not the toggle-row switch variant. */
body :is(#exportTemplateDialog,#importTemplateDialog) input[type=checkbox] {
 appearance:auto !important; width:18px !important; min-width:18px !important; max-width:18px !important;
 height:18px !important; min-height:18px !important; max-height:18px !important;
 flex:0 0 18px !important; padding:0 !important; margin:2px 0 0 !important;
 border-radius:3px !important; transform:none !important; accent-color:#00c2db; align-self:start;
}
body :is(#exportTemplateDialog,#importTemplateDialog) input[type=checkbox]::before,
body :is(#exportTemplateDialog,#importTemplateDialog) input[type=checkbox]::after {display:none !important;content:none !important;}
.admin-host-card {padding:12px;border:1px solid #315061;border-radius:9px;margin-bottom:12px;}
.admin-resource-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:12px 0;}
.admin-resource-grid > div {display:flex;flex-direction:column;gap:5px;}
.admin-resource-grid span {font-size:13px;font-variant-numeric:tabular-nums;}
.admin-resource-grid progress {width:100%;height:8px;accent-color:#00c2db;}
/* Compact operational dashboard: consistent spacing and bounded detail lists. */
body #appView #adminView {max-width:1500px;margin-inline:auto;}
body #appView #adminView .page-head {margin-bottom:12px;padding-bottom:0;gap:12px;}
body #appView #adminView .page-head h1 {font-size:26px;margin:0 0 4px;}
body #appView #adminView .page-head p {margin:0;font-size:13px;line-height:1.45;}
body #appView #adminView .notice {padding:9px 12px;margin-bottom:10px;font-size:12px;}
body #appView #adminView :is(.admin-two-col,.admin-three-col,.admin-kpi-grid) {gap:12px;margin:0 0 12px;align-items:start;}
body #appView #adminView .admin-card {padding:14px;margin:0 0 12px;min-height:0;}
body #appView #adminView :is(.admin-two-col,.admin-three-col)>.admin-card {margin:0;}
body #appView #adminView :is(h2,h3) {margin:0 0 8px;font-size:16px;line-height:1.3;}
body #appView #adminView .card-head {margin:0 0 8px;padding:0 0 8px;}
body #appView #adminView .admin-list {gap:5px;margin-top:8px;}
body #appView #adminView .admin-list-row {padding:7px 9px;margin-bottom:5px;gap:10px;}
body #appView #adminView .admin-list-row small {font-size:12px;line-height:1.4;overflow-wrap:anywhere;}
body #appView #adminView :is(#adminRecentActivity,#adminAttentionList) {max-height:220px;overflow:auto;}
body #appView #adminView #adminFleetHealth {margin:12px 0 8px;}
body #appView #adminView .admin-host-card {margin:0;padding:10px;}
body #appView #adminView #adminOperationsSearch {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;}
body #appView #adminView #adminOperationsSearch label {grid-column:1/-1;margin:0;}
body #appView #adminView #adminOperationsSearch input {margin:0;}
body #appView #adminView #adminSearchResults {grid-template-columns:repeat(2,minmax(0,1fr));}
body #appView #adminView .admin-record-group summary {cursor:pointer;font-size:14px;font-weight:700;}
body #appView #adminView .admin-record-group summary span {float:right;color:#69dbe8;font-variant-numeric:tabular-nums;}
body #appView #adminView .admin-record-group .admin-list {max-height:320px;overflow:auto;}
@media(max-width:800px) {
 body #appView #adminView :is(.admin-two-col,.admin-three-col,#adminSearchResults) {grid-template-columns:minmax(0,1fr);}
 body #appView #adminView #adminOperationsSearch {grid-template-columns:minmax(0,1fr);}
}
body #appView #adminView .admin-quota-list {display:grid;gap:10px;margin-top:10px;}
body #appView #adminView .admin-quota-list>div {display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:12px;}
body #appView #adminView .admin-quota-list span {text-align:right;font-variant-numeric:tabular-nums;}
body #appView #adminView .admin-quota-list :is(progress,small) {grid-column:1/-1;width:100%;}
body #appView #adminView .admin-quota-list progress {height:7px;accent-color:#00c2db;}
body #appView #adminView .admin-quota-list small {color:#a7bdcd;}
/* Platform operations dashboard: a single spacing and type scale. */
body #appView #adminView {max-width:1440px;padding-top:8px;--admin-line:#284351;}
body #appView #adminView [data-admin-panel][hidden] {display:none!important;}
body #appView #adminView .admin-dashboard-head {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;}
body #appView #adminView .admin-dashboard-head h1 {font-size:26px;letter-spacing:-.5px;margin:3px 0 5px;}
body #appView #adminView .admin-dashboard-head p {margin:0;font-size:13px;color:#9eb5c3;}
body #appView #adminView .admin-section-nav {display:flex;gap:4px;border-bottom:1px solid var(--admin-line);margin-bottom:10px;}
body #appView #adminView .admin-section-nav button {padding:10px 16px;border:0;border-bottom:2px solid transparent;border-radius:5px 5px 0 0;background:transparent;color:#a9bdcb;box-shadow:none;font-size:13px;}
body #appView #adminView .admin-section-nav button[aria-current=page] {color:#6ee8ef;border-bottom-color:#00c2db;background:#10303c;}
body #appView #adminView .admin-data-note {font-size:11px;color:#8fa7b7;line-height:1.4;margin:10px 0 14px;}
body #appView #adminView .admin-kpi-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid var(--admin-line);border-radius:9px;overflow:hidden;background:var(--admin-line);}
body #appView #adminView .admin-kpi {padding:12px 16px;background:#0b202d;border:0;border-radius:0;}
body #appView #adminView .admin-kpi strong {font-size:23px;line-height:1.2;margin-top:5px;}
body #appView #adminView .admin-kpi span {font-size:10px;letter-spacing:.05em;}
body #appView #adminView .admin-alert-strip {margin:0 0 14px;}
body #appView #adminView .admin-alert {padding:0;border:0;background:none;font-size:12px;color:#a7bdc9;}
body #appView #adminView .admin-section-heading {display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px;flex-wrap:wrap;}
body #appView #adminView .admin-section-heading h2 {margin:0;font-size:16px;}
body #appView #adminView #adminFleetStatus {font-size:11px;color:#9eb8c8;}
body #appView #adminView #adminFleetHealth {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:0;align-items:start;}
body #appView #adminView #adminFleetHealth>div>h3 {font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#9eb5c3;margin:0 0 8px;}
body #appView #adminView .admin-host-card {padding:12px;border:1px solid var(--admin-line);background:#0b202d;border-radius:8px;margin:0 0 10px;}
body #appView #adminView .admin-host-card h3 {font-size:14px;margin:0 0 4px;}
body #appView #adminView .admin-host-card p {font-size:11px;margin:0;color:#9eb5c3;}
body #appView #adminView .admin-host-card .admin-list-row {background:transparent;border:0;border-bottom:1px solid var(--admin-line);border-radius:0;padding:8px 0;margin:0;}
body #appView #adminView .admin-host-card .admin-list-row:last-child {border-bottom:0;}
body #appView #adminView .admin-list-row b {font-size:12px;line-height:1.4;}
body #appView #adminView .admin-list-row small {font-size:11px;line-height:1.4;color:#9eb5c3;}
body #appView #adminView .status-chip {font-size:10px;padding:3px 7px;white-space:nowrap;}
body #appView #adminView .admin-resource-grid {gap:12px;margin:14px 0 8px;}
body #appView #adminView .admin-resource-grid b {font-size:11px;color:#9eb5c3;}
body #appView #adminView .admin-resource-grid span {font-size:13px;}
body #appView #adminView .admin-quota-list {gap:0;margin:5px 0 0;}
body #appView #adminView .admin-quota-list>div {padding:8px 0;border-bottom:1px solid var(--admin-line);gap:3px 8px;font-size:11px;}
body #appView #adminView .admin-quota-list>div:last-child {border-bottom:0;padding-bottom:0;}
body #appView #adminView .admin-quota-list small {font-size:10px;line-height:1.35;}
body #appView #adminView .admin-monitoring-note {margin:0 0 18px;font-size:11px;color:#93aebd;}
body #appView #adminView .admin-monitoring-note summary {cursor:pointer;}
body #appView #adminView .admin-monitoring-note p {margin:6px 0;font-size:11px;}
body #appView #adminView .admin-policy-list>div {padding:6px 0;min-height:0;font-size:12px;}
body #appView #adminView .admin-card {border-color:var(--admin-line);background:#0b202d;border-radius:8px;padding:12px;}
body #appView #adminView .admin-card h2 {font-size:14px;margin-bottom:8px;}
body #appView #adminView :is(#adminRecentActivity,#adminAttentionList) {max-height:60vh;overflow:auto;}
body #appView #adminView .admin-record-search {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;}
body #appView #adminView .admin-record-search label {grid-column:1/-1;font-size:13px;}
body #appView #adminView .admin-record-group summary {font-size:13px;}
@media(max-width:1050px){body #appView #adminView #adminFleetHealth {grid-template-columns:minmax(0,1fr);} }
@media(max-width:600px){
 body #appView #adminView .admin-kpi-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 body #appView #adminView .admin-dashboard-head {align-items:start;}
 body #appView #adminView .admin-dashboard-head h1 {font-size:22px;}
 body #appView #adminView .admin-security-chip {display:none;}
 body #appView #adminView .admin-section-nav button {padding:10px 9px;font-size:12px;}
 body #appView #adminView .admin-record-search {grid-template-columns:minmax(0,1fr);}
}
body #appView #adminView .status-chip {display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:0;min-height:0;height:auto;max-height:none;line-height:1.2;padding:4px 8px;border-radius:20px;flex:none;}
body #appView #adminView .admin-resource-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
body #appView #adminView .admin-resource-grid span {font-size:12px;overflow-wrap:anywhere;}
body #appView #adminView .admin-demand-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:12px 0 18px;}
body #appView #adminView .admin-demand-grid>div{padding:10px 12px;background:var(--surface-2,#102b38);border:1px solid #294653;border-radius:8px;min-width:0;}
body #appView #adminView .admin-demand-grid span{display:block;font-size:11px;color:#9eb7c4;}
body #appView #adminView .admin-demand-grid strong{display:block;font-size:20px;line-height:1.25;margin-top:5px;color:#64d9d0;overflow-wrap:anywhere;}
body #appView #adminView .admin-demand-grid>div:first-child strong{font-size:15px;}
body #appView #adminView .admin-due-time{text-align:right;flex:none;font-size:12px;}
body #appView #adminView .admin-operations h3 small{font-weight:400;color:#9eb7c4;margin-left:6px;}
/* Shared page density; editor and plan artwork keep their dedicated sizing. */
body #appView .view:not(#planView):not(#adminView) .page-head {margin-bottom:16px;gap:16px;align-items:flex-start;}
body #appView .view:not(#planView):not(#adminView) .page-head h1 {font-size:24px;line-height:1.2;letter-spacing:-.5px;margin:0 0 6px;}
body #appView .view .page-head p {margin:0;line-height:1.45;max-width:70ch;}
body #appView .view:not(#planView):not(#adminView) :is(.card,.form-card,.clarity-card,.guidance-card) {padding:16px;min-height:0;border-radius:10px;}
body #appView .view:not(#planView):not(#adminView) :is(.card h2,.form-card h2) {font-size:18px;line-height:1.3;margin:0 0 8px;}
body #appView .view:not(#planView):not(#adminView) :is(.card h3,.form-card h3) {font-size:15px;line-height:1.35;margin:0 0 6px;}
body #appView .view:not(#planView):not(#adminView) .card-head {margin-bottom:12px;gap:12px;}
body #appView .view:not(#planView):not(#adminView) .card p {line-height:1.5;margin:6px 0 12px;}
body #appView .view :is(.two-col,.three-col,.clarity-grid) {gap:16px;align-items:start;}
body #appView .view:not(#planView):not(#adminView) > :is(.card,.two-col,.three-col,.clarity-grid) {margin-bottom:16px;}
body #appView .view .clarity-card {font-size:13px;}
body #appView .view .clarity-bullets {gap:7px;line-height:1.45;}
body #appView .view :is(input,select,textarea) {max-width:100%;min-width:0;}
body #appView #discordView .integration-identity {padding:12px;margin-bottom:14px;}
body #appView #discordView .toggle-row {padding:10px 0;gap:10px;}
body #appView #discordView #discordDiscoveryStatus {font-size:13px;color:var(--muted);}
@media(max-width:700px){body #appView .view .two-col{grid-template-columns:minmax(0,1fr);}body #appView .view:not(#planView):not(#adminView) .page-head h1{font-size:24px;}body #appView .view:not(#planView):not(#adminView) :is(.card,.form-card){padding:14px;}}
@media(max-width:1100px){body #appView #adminView .admin-demand-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:600px){body #appView #adminView .admin-demand-grid{grid-template-columns:repeat(2,minmax(0,1fr));}body #appView #adminView .admin-operations .admin-list-row{flex-wrap:wrap;}body #appView #adminView .admin-due-time{text-align:left;}}

body #appView #adminView .admin-quota-window{min-height:91px;grid-template-rows:18px 7px 16px 16px;}
body #appView #adminView .admin-quota-window>span{white-space:nowrap;}

body #appView #adminView .admin-quota-window{min-height:91px;grid-template-rows:18px 7px 16px 16px;}
body #appView #adminView .admin-quota-window>span{white-space:nowrap;}

body #appView #adminView .admin-quota-window{min-height:91px;grid-template-rows:18px 7px 16px 16px;}
body #appView #adminView .admin-quota-window>span{white-space:nowrap;}

body #appView #adminView .admin-resolver-card>.admin-list-row small{min-height:2.6em;}

/* Compact billing notice review controls. */
body #appView #adminView #adminNoticeFilters {grid-template-columns:minmax(140px,200px) minmax(160px,240px) auto;justify-content:start;gap:10px;}
body #appView #adminView #adminNoticeFilters label {grid-column:auto;display:flex;flex-direction:column;gap:5px;margin:0;}
body #appView #adminView #adminNoticeFilters select {margin:0;}
body #appView #adminView #adminNoticeFilters button {width:auto;min-width:88px;}
body #appView #adminView #adminNoticeDetail .admin-policy-list b {overflow-wrap:anywhere;}
@media(max-width:600px){
 body #appView #adminView #adminNoticeFilters {grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
 body #appView #adminView #adminNoticeFilters button {grid-column:1/-1;justify-self:start;}
 body #appView #adminView .admin-section-nav {flex-wrap:wrap;}
}

/* Billing navigation and fixed-size cookie checkboxes. */
.billing-tabs { display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid #294c5b; margin:12px 0 18px; }
.billing-tabs [role=tab] { background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0; padding:10px 14px; color:#adc6d4; }
.billing-tabs [aria-selected=true] { color:#00dbef; border-bottom-color:#00d4ea; background:#10313e; }
.billing-page [role=tabpanel][hidden] { display:none !important; }
body #cookiePrefsDialog input[type=checkbox] { width:18px; min-width:18px; max-width:18px; height:18px; min-height:18px; max-height:18px; flex:0 0 18px; padding:0; margin:2px 0 0; border-radius:4px; box-sizing:border-box; }
body #cookiePrefsDialog .cookie-pref-row > div { min-width:0; flex:1; }

/* Order review: fixed action area, compact facts, scrollable policy content. */
body dialog.billing-review { width:min(680px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:calc(100dvh - 32px); padding:0; border:1px solid #315362; border-radius:12px; background:#0b202b; color:#e5f1f5; font-size:14px; overflow:hidden; box-shadow:0 20px 70px #0008; }
body dialog.billing-review[open] { display:flex; flex-direction:column; }
.billing-review::backdrop { background:#020e17b8; backdrop-filter:blur(3px); }
.billing-review-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid #294452; flex-shrink:0; }
.billing-review-header h2 { margin:0; font-size:20px; line-height:1.3; }
.billing-review-badge { color:#8adce4; font-size:11px; white-space:nowrap; }
.billing-review-body { padding:18px 22px; overflow-y:auto; min-height:0; overscroll-behavior:contain; }
.billing-review-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; padding-bottom:16px; }
.billing-review-summary h3 { margin:0; font-size:17px; align-self:center; }
.billing-review-price { font-size:25px; line-height:1.3; }
.billing-review-renewal { grid-column:1/-1; margin:0; font-size:13px; color:#b6cbd6; line-height:1.5; }
.billing-review-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 20px; margin:0 0 18px; padding:14px; background:#102c38; border-radius:8px; }
.billing-review-facts dt { font-size:11px; color:#9cb9c9; margin-bottom:4px; }
.billing-review-facts dd { margin:0; font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.billing-review-terms { border-top:1px solid #294452; margin-bottom:10px; }
.billing-review-terms details { border-bottom:1px solid #294452; padding:0; }
.billing-review-terms summary { padding:10px 0; font-size:13px; cursor:pointer; color:#c6e1ed; }
.billing-review-policy { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; font-size:13px; padding:0 0 14px; color:#bed0da; }
.billing-review-note,.billing-review-expiry { font-size:12px; line-height:1.5; color:#c1d5df; }
.billing-review-body > .text-btn { font-size:12px; padding:5px 0; }
.billing-review-footer { flex-shrink:0; border-top:1px solid #294452; background:#0b202b; padding:16px 22px; margin:0; }
.billing-review-consent { display:flex; align-items:flex-start; gap:10px; font-size:12px; line-height:1.5; margin:0 0 12px; color:#d8e8f0; }
body .billing-review-consent input[type=checkbox] { flex:0 0 18px; width:18px; height:18px; min-width:18px; min-height:18px; max-width:18px; max-height:18px; margin:0; padding:0; }
.billing-review-actions { display:flex; justify-content:flex-end; gap:10px; }
.billing-review-actions button { min-height:38px; font-size:13px; }
@media(max-width:480px) {
 .billing-review-header { align-items:flex-start; flex-direction:column; gap:5px; }
 .billing-review-header,.billing-review-body,.billing-review-footer { padding:14px 16px; }
 .billing-review-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .billing-review-actions { flex-wrap:wrap; }
 .billing-review-actions button { flex:1 1 auto; white-space:normal; }
}
/* Checkout status remains in place while background verification runs. */
#planBillingNotice p { margin: 0; }
.billing-checkout-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Failure cards must shrink within narrow poster lists. */
body #queueView .queue-main { width:100%; }
body #queueView .queue-main > div:not(.queue-preview) { flex:1; overflow-wrap:anywhere; }
@media(max-width:760px) {
 body #queueView .queue-actions { width:calc(100% - 60px); max-width:calc(100% - 60px); overflow-wrap:anywhere; }
}

/* Keep subscription controls together, clear of the storage/credit cards. */
body #planView .plan-current-strip > div { padding:0; border:0; border-radius:0; background:transparent; }
body #planView .plan-current-strip > div:first-child { flex:1 1 320px; min-width:0; }
body #planView .plan-current-strip .plan-current-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
body #planView .plan-current-strip .plan-current-actions button { max-width:100%; white-space:normal; }
.pf-starter-example { width:min(680px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; box-sizing:border-box; padding:24px; color:#e6f5fa; background:#0b202c; border:1px solid #397084; border-radius:12px; }
.pf-starter-example::backdrop { background:#001019cc; }
.pf-starter-example h2 { margin:0 0 12px; font-size:22px; }
.pf-starter-example h3 { margin:22px 0 10px; font-size:16px; }
.pf-starter-example p,.pf-starter-example li { font-size:14px; line-height:1.6; }
.pf-starter-example li { margin-bottom:12px; }
.pf-starter-example ol { padding-left:22px; }
.starter-table-wrap { overflow:auto; }
.pf-starter-example table { width:100%; border-collapse:collapse; font-size:13px; }
.pf-starter-example caption { text-align:left; padding:8px 0; color:#a7c3d1; }
.pf-starter-example th,.pf-starter-example td { padding:10px; text-align:left; border:1px solid #315061; }
.starter-example-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.starter-example-actions a { display:inline-block; padding:10px 14px; border-radius:7px; background:#00c2db; color:#001a22; font-weight:700; text-decoration:none; }
@media(max-width:500px) { .pf-starter-example { padding:16px; } }
.starter-example-actions button { padding:10px 14px; border:1px solid #628595; border-radius:7px; color:#e6f5fa; background:#0b202c; font:inherit; cursor:pointer; }
.starter-example-actions button:hover { border-color:#00d9ed; }
/* Compact contextual guidance: one contained body, predictable spacing. */
body #appView .pf-field-guide > summary { padding:10px 12px; line-height:1.4; }
body #appView .pf-field-guide[open] > summary { margin-bottom:0; }
body #appView .pf-field-guide > .pf-field-guide-body { margin:0; padding:12px; }
body #appView .pf-field-guide-body p { margin:0 0 10px; font-size:12px; line-height:1.5; color:#b7cbd6; }
body #appView .pf-field-guide-body p:last-child { margin-bottom:0; }
body #appView .pf-field-guide-body dl { margin:0; display:grid; gap:10px; }
body #appView .pf-field-guide-body dl > div { display:block; padding:0 0 10px; border-bottom:1px solid #284454; }
body #appView .pf-field-guide-body dt { margin:0 0 3px; font-size:12px; font-weight:600; color:#e5f3f8; }
body #appView .pf-field-guide-body dd { margin:0; font-size:12px; line-height:1.5; color:#b7cbd6; }
body #appView .pf-field-guide-body .pf-field-guide-next { margin-top:12px; color:#8edce6; }

/* Compact signup availability and spreadsheet entry point. */
body .beta-admission-notice { display:flex; flex-direction:column; gap:6px; padding:16px; margin-bottom:12px; border:1px solid #315767; border-radius:10px; text-align:left; background:#0b202b; }
body .beta-admission-notice .beta-admission-label { color:#91b8c7; font-size:12px; font-weight:600; }
body .beta-admission-notice strong { font-size:21px; line-height:1.3; color:#eff8fc; }
body .beta-admission-notice p { margin:2px 0 4px; font-size:13px; line-height:1.5; color:#c3d6df; }
body #sheetsView .private-source-start { padding:18px 20px; background:#0c222d; border-color:#315767; }
body #sheetsView .private-source-start h2 { font-size:17px; margin-bottom:6px; }
body #sheetsView .private-source-start p { font-size:14px; font-weight:400; max-width:720px; margin-bottom:6px; }
body #sheetsView .private-source-start span { display:block; font-size:12px; line-height:1.5; font-weight:400; }
/* Guided step 1 on Free: lead with the upload card and show plan limits on the card itself, not only in a tooltip. */
body #appView #createView .guided-plan-badge { display:none; }
body.free-workspace #appView #createView .guided-plan-badge { display:inline-block; margin-top:6px; padding:3px 7px; border:1px solid #41616e; border-radius:5px; font-size:11px; font-style:normal; font-weight:600; color:#c8d8df; }
body.free-workspace #appView #createView .guided-plan-badge.recommended { background:#123b40; border-color:#34777c; color:#86dedc; }
body.free-workspace #appView #createView .source-method:not([data-free-disabled]) .guided-plan-badge.paid { display:none; }
body.free-workspace #appView #createView .source-method[data-free-disabled] .guided-plan-badge.recommended { display:none; }
body.free-workspace #appView #createView .source-method[data-guided-source="upload-private"] { order:-1; }