@import url('/fonts.css');

/* Component role bindings: visual appearance is shared; local sheets own geometry only. */
.daily-limit-badge { border: 1px solid currentColor; opacity: .78; }
.new-research-link { text-decoration: underline; text-underline-offset: 4px; }
.prompt-badge { border: 1px solid rgba(169, 214, 111, .48); }
footer p a { text-decoration: underline; text-underline-offset: .2em; }
.optional-badge { border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: var(--muted); }
.briefing-toggle small { color: var(--ink); text-transform: uppercase; }
.briefing-toggle i { color: var(--lime); }
.task-progress { border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); }
.task-progress-head { color: var(--ink); }
.task-progress-head strong { color: var(--ink); }
.task-progress-track { background: rgba(255, 255, 255, .14); }
.task-progress-track i { background: linear-gradient(90deg, #8fbe59, #c7eb91); box-shadow: 0 0 16px rgba(169, 214, 111, .35); }
.task-progress.failed { border-color: rgba(255, 157, 144, .45); background: rgba(151, 45, 35, .22); }
.task-progress.failed .task-progress-track i { background: #ff9d90; box-shadow: none; }
.task-progress > p { color: var(--ink); }
.task-progress time { color: var(--ink); }
.task-pulse { background: var(--lime); box-shadow: 0 0 0 0 rgba(169, 214, 111, .45); }
.task-progress.failed .task-pulse { background: #ff9d90; }
@keyframes task-scan{
  from { transform: translateX(-115%); }
  to { transform: translateX(275%); }
}
@keyframes task-pulse{
  0% { box-shadow: 0 0 0 0 rgba(169, 214, 111, .45); }
  70% { box-shadow: 0 0 0 7px rgba(169, 214, 111, 0); }
  100% { box-shadow: 0 0 0 0 rgba(169, 214, 111, 0); }
}
.story-optional { border: 1px solid #b9caa6; background: #edf3e3; color: var(--muted); text-transform: uppercase; }
.result-rationale { border-top: 1px solid currentColor; color: inherit; opacity: .78; }
.editable-result:focus { outline: none; }
.result-card .result-rationale-details { border: 0; opacity: 1; }
.result-card .result-rationale-details > summary:focus-visible { outline: 2px solid currentColor; }
.result-edit-status small { border: 1px solid currentColor; text-transform: uppercase; }
.result-edit-status button { text-decoration: underline; text-underline-offset: .2em; }
.result-edit-status button:focus-visible { outline: 2px solid currentColor; }
.result-card .result-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.result-card .result-link:hover,
.result-card .result-link:focus-visible { text-decoration-thickness: 2px; }
.download-all b { color: var(--lime); }
.workshop-actions button span { color: inherit; }
.workshop-action > small[role="tooltip"] { background: var(--ink); color: var(--ink); box-shadow: 0 8px 24px #173d3133; opacity: 0; }
.workshop-action > button:hover + small,
.workshop-action > button:focus-visible + small { opacity: 1; }
.save-all b { color: var(--accent-text); }
.workshop-status { border: 1px solid #d6ddcf; background: #fffef9ee; color: var(--ink); box-shadow: 0 14px 45px #173d3133; backdrop-filter: blur(12px); }
.workshop-status.waiting i { border: 2px solid #d6dfcd; border-top-color: #709b43; }
.workshop-status.success i::before { color: var(--accent-text); }
.workshop-status.cancelled i::before { color: var(--status-error-text); }
@keyframes drag-spin{ to { transform: rotate(360deg); } }
@keyframes drag-status-in{ from { opacity: 0; transform: translate(-50%,-8px) scale(.96); } }
.provider-status { color: var(--muted); }
.provider-status.connected::before { background: #71a747; }
.budget-warning { border: 1px solid #e2aaa5; background: #fff1ef; color: var(--status-error-text); }
.method.budget-exhausted small { color: var(--status-error-text); }
.job-stack { border: 1px solid #d5dbce; background: rgba(255, 254, 249, .72); }
.job-stack > summary small { color: var(--muted); }
.job-stack > summary > b { background: #e1eccf; color: var(--muted); }
.job-stack > summary > i { color: var(--accent-text); }
.job-stack-filter select:focus-visible { outline: 2px solid #6f9f42; }
.job-entry { border: 1px solid #dde1d7; background: var(--card); color: var(--ink); }
.job-entry-preview { border: 1px solid #d8ded1; background: #e8ebe2; }
.job-publication-state { background: #dfeccb; color: var(--muted); }
.job-publication-state.is-dirty { background: #f8dfc9; color: var(--status-error-text); }
.job-entry small { color: var(--muted); }
.job-entry .job-image-input,
.result-input-audit { color: var(--muted); }
.job-entry .job-savings { color: var(--muted); }
.job-entry > b { background: #edf3e4; color: var(--muted); }
.job-entry > .job-selection-indicator { background: transparent; color: var(--ink); }
.job-empty { color: var(--muted); }
.job-stack-pagination span { color: var(--muted); }
.excluded-optimized-images { border-top: 1px solid #cfd8c8; }
.excluded-optimized-images > p { color: var(--muted); text-transform: uppercase; }
.excluded-optimized-image { border: 1px solid #cfd8c8; background: #f5f6ef; color: var(--green); }
.excluded-optimized-image img { opacity: .58; }
.sortable-image-frame { background: #e5e9df; }
.sortable-image-tile { border: 0; background: transparent; box-shadow: none; }
.image-slot-placeholder { background: linear-gradient(110deg, #e2e7dc 18%, #eef1e8 34%, #e2e7dc 50%); }
@keyframes image-slot-loading{ to { background-position-x: -220%; } }
.sortable-image-position { background: #f7f8f2e8; color: var(--green); box-shadow: 0 1px 5px #173d3124; }
.optimized-image-feedback { background: #eef3e4; color: var(--muted); }
.optimized-image-feedback[data-state="saved"] { background: var(--green); color: var(--text-inverse); }
.optimized-image-feedback[data-state="error"] { background: #fff0e8; color: var(--status-error-text); }
@keyframes optimized-save-pulse{
  to { opacity: .5; transform: translate(-50%, -50%) scale(.82); }
}
@keyframes optimized-save-check{
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-18deg); }
  70% { transform: translate(-50%, -50%) scale(1.18) rotate(3deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.sortable-image-card.is-press-selected { opacity: 1; }
.sortable-image-grid.is-drag-active .sortable-image-card:not(.is-dragging):not(.is-drop-target) { opacity: 1; }
.sortable-image-card.is-dragging { opacity: 1; }
.sortable-image-card.is-drop-target { opacity: 1; box-shadow: none; }
.sortable-image-card.is-drop-target::before { background: #659a35; box-shadow: 0 0 0 3px var(--cream), 0 3px 12px #173d3140; }
.sortable-image-position.is-order-preview { background: #dfeeca; box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px #78a94d; }
.feedback-details > summary { color: var(--ink); }
.support-edit-banner { border-bottom: 1px solid #9dbc68; background: #eaf4d6; color: #174d3e; box-shadow: 0 8px 24px rgba(23, 77, 62, .12); }
.support-edit-banner small { color: var(--muted); }
.support-edit-banner a { border: 1px solid #174d3e; color: #174d3e; text-decoration: none; }
.support-edit-banner a:last-child { background: #174d3e; color: var(--text-inverse); }
.nav { border-bottom: 1px solid var(--line); background: #f5f4edeb; backdrop-filter: blur(16px); }
@media(max-width:1049px){.nav-links { border-top: 1px solid var(--line); }}
.brand { text-decoration: none; }
.frontend-admin-badge { border: 1px solid var(--lime); color: var(--ink); text-decoration: none; }
.nav-links > a,
.site-header > nav > .account-greeting,
.site-header > nav > a:not(.sell):not(.account-cta) { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.site-header > nav > .account-greeting { color: var(--muted, #384a3d); text-decoration: none; }
:root { color: var(--ink); background: var(--paper); }
body { background: radial-gradient(circle at 80% 0,#eef3df,transparent 32rem),var(--paper); }
a { color: inherit; text-decoration: none; }
.site-header { border-bottom: 1px solid var(--line); background: #f7f6eef2; backdrop-filter: blur(15px); }
.brand span { color: var(--accent-text); }
.eyebrow { color: var(--muted); }
.result-count { color: var(--muted); }
.filters { border: 1px solid var(--line); background: var(--card); }
.listing-image { background: #e4e8dd; }
.photo-count { background: #173d31d9; color: var(--text-inverse); }
.meta { color: var(--muted); }
.listing-copy p { color: var(--muted); }
.tags span { background: #edf2e6; }
.empty { border: 1px dashed #bfcbbb; background: #ffffff80; }
.empty p { color: var(--muted); }
.breadcrumbs { color: var(--muted); }
.gallery,.detail-card,.seller-card { border: 1px solid var(--line); background: var(--card); }
.gallery-main { background: #eceee7; }
.listing-fact { background: #edf2e7; }
.description { border-top: 1px solid var(--line); }
.seller-card p { color: var(--muted); }
.seller-card a { background: var(--green); color: var(--text-inverse); }
.footer { border-top: 1px solid var(--line); color: var(--muted); }
footer { border-top: 1px solid var(--line); background: var(--cream); color: var(--muted); }
footer p { color: var(--muted); }
footer p a { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 850px){.site-header nav { border: 0; }}
.market-search { border-bottom: 1px solid var(--line); background: #f2f3e9; }
.marketplace-headline-copy { color: var(--muted); }
.market-search .search-form { border: 0; background: transparent; box-shadow: none; }
.market-search label { color: var(--ink); }
.bildanzeigen-page-loader { color: #174d3d; }
.bildanzeigen-page-loader p { color: inherit; }
.bildanzeigen-page-loader--overlay { background: rgba(247, 246, 239, .74); backdrop-filter: blur(5px); }
.messenger-shell { border: 1px solid var(--line); background: var(--card); }
.conversation-sidebar { background: var(--card); }
.conversation-empty { color: var(--muted); }
.conversation-item { border: 1px solid #dde1d7; background: var(--card); color: var(--ink); }
.conversation-open { border: 0; background: transparent; color: inherit; }
.conversation-thumb { border: 1px solid #d8ded1; background: #e8ebe2; }
.conversation-meta time { color: var(--muted); }
.conversation-preview { color: var(--muted); }
.chat-panel { background: #efeee8; }
.chat-empty { color: var(--muted); }
.chat-empty>span { background: var(--pale,#edf2e7); color: var(--deep,var(--green)); }
.chat-header { border-bottom: 1px solid var(--line); background: var(--card); }
.chat-back:focus-visible { outline: 3px solid #dce9c1; }
.chat-listing-image { background: #e5e9df; }
.chat-header p { color: var(--muted); }
.chat-listing-link { color: var(--deep,var(--green)); }
.chat-header a[aria-disabled="true"] { color: var(--muted); }
.conversation-delete:hover,.conversation-delete:focus-visible { outline: none; }
.message-load-older:hover,.message-load-older:focus-visible { outline: none; }
.message-bubble { border: 1px solid #dde2d8; background: var(--card); color: var(--ink); }
.message-row.outgoing .message-bubble { border-color: #c8d5c2; background: var(--card); color: var(--ink); }
.message-row time { color: var(--muted); }
.message-row.system-message .message-bubble { border: 1.5px dashed #789368; background: #f7f9f0; color: #385247; box-shadow: none; }
.message-source { color: var(--muted); }
.message-composer { border: 1px solid var(--line); background: var(--card); }
.message-composer textarea { outline: 0; }
.message-limit { color: var(--muted); }
.conversation-sidebar,.message-thread,.message-composer textarea { scrollbar-color: #9ba99f transparent; }
.conversation-sidebar::-webkit-scrollbar-track,.message-thread::-webkit-scrollbar-track,.message-composer textarea::-webkit-scrollbar-track { background: transparent; }
.conversation-sidebar::-webkit-scrollbar-thumb,.message-thread::-webkit-scrollbar-thumb,.message-composer textarea::-webkit-scrollbar-thumb { background: #9ba99f; }
.analytics-consent { border: 1px solid #cbd2c6; background: var(--card); color: #173f34; box-shadow: 0 18px 60px #142c2540; }
.analytics-consent button:focus-visible { outline: 3px solid #e48743; }
.consent-choice { border-bottom: 1px solid var(--line); }
.connection>i { background: #b1b9ad; box-shadow: 0 0 0 5px #edf0e9; }
.setup-dialog { box-shadow: 0 -20px 80px #142c2540; }
.setup-dialog::backdrop { backdrop-filter: blur(4px); }
.setup-dialog .dialog-head { border-bottom: 1px solid var(--line); }
.setup-dialog .dialog-head span { color: var(--muted); }
.setup-dialog .dialog-intro { color: var(--muted); }
.provider-setup-panel .method small { color: var(--muted); }
.provider-setup-panel .method-panel a { color: var(--ink); text-decoration: underline; }
.provider-setup-panel .method-panel strong { background: var(--card); }
.provider-setup-panel .form-message { color: var(--muted); }
.provider-setup-panel .form-message.error { color: var(--status-error-text); }
.autosave-feedback { background: #eef3e4; color: var(--muted); opacity: 0; }
.autosave-feedback[data-state="saving"] { opacity: 1; }
.autosave-feedback[data-state="saved"] { background: var(--green); color: var(--text-inverse); opacity: 1; }
.autosave-feedback[data-state="error"] { background: #fff0e8; color: var(--status-error-text); opacity: 1; }
.autosave-message { border: 1px solid #d99579; box-shadow: 0 14px 36px #173d3129; background: #fff0e8; color: var(--status-error-text); }
.field-validation-popup { border: 1px solid #d99579; box-shadow: 0 10px 24px #173d3129; background: #fff0e8; color: var(--status-error-text); }
.field-validation-popup::before { border-top: 1px solid #d99579; border-left: 1px solid #d99579; background: #fff0e8; }
@keyframes autosave-pulse{
  to { opacity: .5; transform: translateY(-50%) scale(.82); }
}
@keyframes autosave-check-pop{
  0% { opacity: 0; transform: translateY(-50%) scale(.3) rotate(-18deg); }
  70% { transform: translateY(-50%) scale(1.18) rotate(3deg); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes field-validation-popup-in{
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.horizontal-scroller-track { scrollbar-color: #aab9a3 transparent; }


/* Normative shared foundation. See DESIGN_SYSTEM.md before changing these tokens. */
:root {
  color-scheme: light;
  --font-family: 'Bricolage Grotesque', sans-serif;
  --text-inverse: #ffffff;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 600;
  --weight-heavy: 600;
  --text-xs: .8125rem;
  --text-sm: .875rem;
  --icon-size: 1.25rem;
  --diagram-icon-size: 2rem;
  --text-navigation: .9375rem;
  --navigation-gap: var(--space-8);
  --navigation-peek: 24px;
  --text-body: 1rem;
  --text-lead: 1.125rem;
  --text-subtitle: 1.25rem;
  --text-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --text-h2: clamp(1.5rem, 2.8vw, 2rem);
  --text-h1: clamp(2rem, 4.5vw, 3.5rem);
  --text-h4: 1.25rem;
  --text-h5: 1.125rem;
  --text-h6: 1rem;
  --leading-body: 1.6;
  --leading-h2: 1.25;
  --leading-h3: 1.25;
  --leading-caption: 1.5;
  --leading-control: 1.5;
  --tracking-h3: -.02em;
  --leading-heading: 1.15;
  --tracking-heading: -.025em;
  --tracking-label: .04em;
  --ink: #173d31;
  --green: #214d3e;
  --deep: var(--green);
  --lime: #a9d66f;
  --accent-text: #34511d;
  --heading-accent: #34511d;
  --muted: #384a3d;
  --cream: #f5f4ed;
  --paper: var(--cream);
  --card: #fffef9;
  --brand-surface: #173d31;
  --brand-glow: var(--support-surface);
  --brand-glow-soft: rgba(238, 244, 223, .65);
  --brand-fade-04: rgb(229.64, 239.2, 210.12);
  --brand-fade-16: rgb(231.56, 239.8, 213.48);
  --brand-fade-50: rgb(237, 241.5, 223);
  --brand-fade-84: rgb(242.44, 243.2, 232.52);
  --brand-fade-96: rgb(244.36, 243.8, 235.88);
  --brand-fade-depth: clamp(160px, 18vw, 300px);
  --brand-copy: #ffffff;
  --brand-copy-soft: #e5efd1;
  --media-surface: #ecebe2;
  --surface-soft: #e5efd1;
  --support-surface: #eef4df;
  --support-line: #aac779;
  --support-divider: #cddcad;
  --status-success-bg: #e5efd1;
  --status-success-text: #234d30;
  --status-warning-bg: #fff0d8;
  --status-warning-text: #624000;
  --status-error-bg: #fff0d8;
  --status-error-text: #71380f;
  --pale: var(--surface-soft);
  --line: #d9ddcf;
  --control-border: #778675;
  --orange: #d97746;
  --orange-text: #71380f;
  --orange-action: #e0926a;
  --orange-ink: #24150c;
  --orange-soft: #fff0d8;
  --disabled-bg: #e3e8dc;
  --disabled-text: #173d31;
  --disabled-action-blur: 1px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --control-height: 44px;
  --focus-color: var(--green);
  --focus-separator: var(--card);
  --primary-background: var(--green);
  --primary-foreground: var(--text-inverse);
  --primary-border: var(--green);
  --secondary-background: var(--card);
  --secondary-foreground: var(--ink);
  --secondary-border: var(--control-border);
  --shadow: 0 8px 24px rgb(23 57 46 / .06);
  --row-hover-bg: #f7faef;
  --row-selected-bg: #edf5df;
  --media-selection-border-width: 4px;
  --media-selection-color: var(--heading-accent);
  --media-selection-tilt: -1deg;
  font-family: var(--font-family);
  font-optical-sizing: auto;
  font-stretch: 100%;
  font-synthesis: none;
  color: var(--ink);
  background: var(--cream);
}
/* Shared text roles used by existing components. Layout files cannot override typography. */
.account-cta span,
.briefing-toggle,
.changelog-entry strong,
.chat-listing-link,
.closing > a,
.conversation-meta strong,
.description-card .result-value,
.dialog-intro,
.feedback-details .result-value,
.image-workshop header>p,
.input-row input,
.job-name,
.manifesto-grid p,
.method b,
.optimized-image-feedback,
.result-card details p,
.result-rationale p,
.result-value,
.seo-guide-grid p,
.seo-guide>header>p:last-child,
.setup-dialog .dialog-intro,
.provider-setup-panel .input-row input,
.story-steps p,
.support-edit-banner strong { font-size: var(--text-body); }
.manifesto blockquote,
.quota,
.quota-sequence.paid .quota,
.strikethrough-price { font-size: var(--text-h1); }
.collapsible-summary strong,
.similar-listing-all span:last-child { font-size: var(--text-h3); }
.activity-cost-summary>strong,
.search-query-field::after,
.chat-empty>span,
.checkout-total strong,
.collapsible-summary i,
.metric-grid strong,
.period .cost,
.plus,
.similar-listing-all,
.title-card .result-value { font-size: var(--text-h3); }
.hero-copy > p:last-child,
.marketplace-headline-copy,
.platform-code-row strong,
.save-all b,
.section-heading > p,
.seo-guide > header > p:last-child,
.subline { font-size: var(--text-lead); }
.account-empty-state,
.account-history-event p,
.admin-search-empty,
.admin-search-result-copy strong,
.admin-view-nav a,
.architecture-intro,
.architecture-resource strong,
.autosave-feedback,
.autosave-message,
.breadcrumbs,
.briefing summary,
.briefing-body p,
.changelog-entry p,
.conversation-preview,
.conversation-title,
.cost-actual,
.detail-meta,
.detail-support-actions a,
.download-all,
.editor-history-entry strong,
.listing-fact,
.footer,
.form-message,
.inline-profile-link,
.input-token-actual,
.intro time,
.job-empty,
.job-entry strong,
.job-history summary,
.job-history-entry p,
.job-total-badge,
.marketplace-pagination a,
.meta,
.metric-grid span,
.muted,
.new-research-link,
.optimized-grid:empty:after,
.output-grid article.rationale p,
.owner-action-status,
.owner-statistics strong,
.period dl,
.result-card details summary,
.result-rationale strong,
.save-all,
.provider-setup-panel .budget-warning,
.provider-setup-panel .method b,
.provider-setup-panel .provider-status,
.studio-action>div>span,
.support-edit-banner a,
.task-progress-head,
nav > a,
td { font-size: var(--text-sm); line-height: var(--leading-caption); }
.analyze-button b,
.architecture-card>header>strong,
.brand,
.briefing summary i,
.briefing-toggle i,
.closing > a span,
.detail-metrics strong,
.device-code-copy strong,
.download-all b,
.favorite-toggle > span:first-child,
.filter-toggle > span,
.filter-toggle::after,
.job-stack > summary > i,
.listing-footer .listing-price,
.listing-price,
.marketplace-listing-footer > strong,
.method-panel strong,
.publish-preview>strong,
.result-card .result-rationale-details > summary::after,
.provider-setup-panel .method-panel strong,
.similar-listing-comparison b,
.similar-listing-copy > strong,
.workshop-status.cancelled i::before,
.workshop-status.success i::before { font-size: var(--text-subtitle); }
#promotion-message,
.account-facts dt,
.account-history-event time,
.account-link-source,
.activity-cost-summary>span,
.admin-badge,
.admin-search-result-kind,
.architecture-card-summary,
.architecture-card>header>span,
.architecture-component span,
.architecture-component strong,
.architecture-endpoints summary,
.architecture-panel>header time,
.architecture-resource span,
.architecture-status,
.architecture-storage-path code,
.architecture-storage-path span,
.architecture-values dd,
.architecture-values dt,
.badge,
.bar .bar-cost,
.bar b,
.breadcrumb-action,
.budget-warning,
.bundle-card .flag,
.changelog-diff-row code,
.changelog-diff-value,
.changelog-diff-value::before,
.changelog-entry time,
.changelog-entry-tags span,
.changelog-more,
.changelog-rollback-card p,
.changelog-snapshot,
.changelog-status,
.chart-legend,
.chart-legend b,
.chat-header p,
.checkout-divider,
.checkout-message,
.collection-toolbar,
.conversation-meta time,
.cost-baseline,
.daily-limit-badge,
.detail-metrics span,
.dialog-head span,
.drop-meta,
.editor-history-empty,
.editor-history-entry .editor-history-badge,
.editor-history-preview p,
.endpoint-row,
.excluded-optimized-image span,
.excluded-optimized-images > p,
.favorite-status,
.feedback-details > summary,
.field-validation-popup,
.fineprint,
.frontend-admin-badge,
.health-item>span,
.image-workshop header span,
.input-token-baseline,
.job-entry .job-savings,
.job-entry > b,
.job-history summary span,
.job-history-empty,
.job-history-entry>a,
.job-history-status,
.job-id,
.job-pagination span,
.job-publication-state,
.job-stack > summary > b,
.job-stack-pagination span,
.jobs-panel tbody td::before,
.marketplace-listing-age,
.marketplace-listing-footer .listing-fact,
.marketplace-listing-image span,
.marketplace-result-count,
.message-limit,
.message-load-older,
.message-row time,
.message-source,
.nav .frontend-admin-badge,
.optimized-card a,
.optional-badge,
.output-grid .output-status,
.output-grid article.rationale span,
.output-grid span,
.owner-badge,
.owner-statistics span,
.photo-count,
.preview-facts span,
.profile-tag,
.promise,
.promotion-discount,
.prompt-badge,
.provider-status,
.publish-actions a,
.publish-consent,
.quota-mode,
.quota-rule .quota-help,
.result-card header,
.result-field-label,
.result-input-audit,
.setup-dialog .dialog-head span,
.provider-setup-panel .form-message,
.similar-listing-comparison > span:not(.listing-fact),
.sortable-image-position,
.status-pill,
.story-optional,
.story-steps article>span,
.studio-index,
.support-edit-banner span,
.table-action,
.tags span,
.task-progress > p,
.task-progress time,
.task-progress-head strong,
.test-badge,
.title-card>.result-card-index,
.trust-line span,
.upload-settings-form p,
.workshop-status,
footer p,
header .frontend-admin-badge,
th { font-size: var(--text-xs); line-height: var(--leading-caption); }

/* Shared emphasis weights. */
.account-facts dd,
.account-facts dt,
.account-link-source,
.activity-cost-summary>span,
.admin-badge,
.admin-search-result-kind,
.admin-tools a,
.admin-view-nav a,
.architecture-card>header>span,
.architecture-component strong,
.architecture-endpoints summary,
.architecture-resource span,
.architecture-storage-path span,
.architecture-values dd,
.autosave-feedback,
.autosave-message,
.badge,
.bar .bar-cost,
.brand,
.breadcrumb-action,
.breadcrumbs a,
.budget-warning,
.bundle-card .flag,
.bundle-features,
.changelog-diff-row code,
.changelog-diff-value::before,
.changelog-entry-tags span,
.changelog-filters label,
.changelog-more,
.changelog-snapshot,
.chat-empty-back,
.chat-header p,
.chat-listing-link,
.checkout-divider,
.checkout-product-features,
.closing > a,
.collapsible-summary small,
.collection-toolbar-compact label,
.collection-toolbar>[data-selection-summary],
.conversation-title,
.detail-link,
.detail-meta-link,
.detail-price,
.detail-support-actions a,
.dialog-actions a,
.download-all,
.editor-history-entry .editor-history-badge,
.excluded-optimized-image span,
.excluded-optimized-images > p,
.listing-fact,
.favorite-toggle,
.feedback-details > summary,
.field-validation-popup,
.filter-actions a,
.filter-toggle > span,
.filters--horizontal .result-toolbar label,
.form-links .register-link,
.frontend-admin-badge,
.health-item>span,
.inherited-limit,
.inline-profile-link,
.intro,
.job-entry .job-savings,
.job-history summary,
.job-history-entry>a,
.job-publication-state,
.job-stack > summary small,
.job-stack-pagination span,
.jobs-panel tbody td::before,
.listing-messenger-status,
.listing-price,
.manifesto blockquote,
.market-search label,
.marketplace-ad-label,
.marketplace-listing-footer .listing-fact,
.marketplace-listing-image span,
.marketplace-pagination a,
.marketplace-result-count,
.marketplace-result-toolbar label,
.message-load-older,
.message-source,
.method-panel > label,
.method-panel>label,
.method.budget-exhausted small,
.metric-grid span,
.nav-links > a,
.nav-links a,
.new-research-link,
.notice,
.optimized-image-feedback,
.optional-badge,
.output-grid .output-status,
.output-grid article.rationale span,
.output-grid span,
.owner-actions a,
.owner-badge,
.period dd,
.photo-count,
.plans-loading,
.plans-paused,
.preview-facts span,
.price,
.price-card .result-value,
.profile-cell-tags small,
.profile-directory-card>span,
.profile-link,
.profile-tag,
.promise,
.prompt-badge,
.provider-status,
.publish-actions a,
.publish-fields label,
.publish-panel p.publish-panel-status,
.quota,
.quota-control label,
.quota-mode,
.rerun-controls label,
.result-card .result-link,
.result-card details summary,
.result-card header,
.result-field-label,
.result-count,
.result-edit-status small,
.result-input-audit,
.save-all,
.seller-card #contact-login,
.seller-card a,
.provider-setup-panel .method-panel>label,
.similar-listing-all,
.similar-listing-comparison > span:not(.listing-fact),
.site-header > nav > .account-greeting,
.site-header > nav > a:not(.sell):not(.account-cta),
.site-header nav,
.sortable-image-position,
.status-pill,
.story-optional,
.strikethrough-price,
.stripe-settings-fields label,
.support-edit-banner a,
.support-edit-banner span,
.table-action,
.tag-editor label,
.tags span,
.task-progress-head,
.test-badge,
.title-card .result-value,
.title-card>.result-card-index,
.upload-settings-form label,
.workshop-status,
nav > a { font-weight: var(--weight-bold); }
.filter-toggle::after,
.publish-fields small,
.result-card .result-rationale-details > summary::after,
.workshop-status.cancelled i::before { font-weight: var(--weight-medium); }
.marketplace-listing-age,
.workshop-action > small[role="tooltip"] { font-weight: var(--weight-semibold); }

/* Shared surface/media shapes. Interactive shapes are defined with the controls below. */
.dialog-head .inline-profile-link,
.market-search .search-form { border-radius: 0; }
.detail-meta-link { border-radius: 0!important; }
.thumbnails img { border-radius: calc(var(--thumbnail-radius) - var(--thumbnail-border-width)); }
.architecture-component i::before,
.image-slot-placeholder,
.sortable-image-frame > img,
.studio:before,
.task-progress-track i { border-radius: inherit; }
.activity-cost-summary,
.search-suggestions,
.analytics-consent,
.architecture-card,
.architecture-resources,
.changelog-detail-card,
.changelog-entry,
.changelog-rollback-card,
.changelog-snapshot,
.detail-metrics article,
.detail-section,
.detail-support-actions,
.dropzone,
.editor-history-entry,
.gallery-main,
.global-limit-setting,
.image-workshop,
.job-stack,
.jobs-panel tbody tr,
.listing-card,
.marketplace-listing-card,
.message-composer,
.messenger-shell,
.output-grid article,
.panel,
.period-grid,
.plans-loading,
.plans-paused,
.platform-setup section,
.profile-card,
.profile-directory-card,
.publish-panel,
.publish-preview,
.quota-rule,
.result-card,
.result-version-content { border-radius: var(--radius-lg); }
.message-bubble { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm); }
.message-row.outgoing .message-bubble { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg); }
.admin-search-target,
.architecture-storage-path,
.autosave-message,
.changelog-diff-row,
.chat-listing-image,
.closing > a,
.conversation-item,
.endpoint-row,
.excluded-optimized-image,
.field-validation-popup,
.filter-actions a,
.filter-actions button,
.health-item,
.image-grid img,
.inherited-limit,
.input-row input,
.job-entry,
.job-history-entry,
.listing-image,
.marketplace-listing-image,
.method,
.method-panel,
.notes,
.notice,
.optimized-card,
.platform-code-row strong,
.platform-input input,
.preview,
.profile-job,
.promotion-discount,
.rerun-controls select,
.seller-card a,
.provider-setup-panel .input-row input,
.provider-setup-panel .method,
.provider-setup-panel .method-panel,
.sortable-image-frame,
.sortable-image-tile,
.sortable-image-tile.is-loading .sortable-image-frame,
.tag-suggestions,
.task-progress { border-radius: var(--radius-md); }
.account-history-event>i,
.account-link-source,
.account-profile-unlink,
.admin-badge,
.admin-search-result-kind,
.architecture-component i,
.autosave-feedback,
.badge,
.breadcrumb-action,
.bundle-card .flag,
.changelog-entry-tags span,
.changelog-filters button,
.changelog-more,
.chart-legend b,
.chat-empty-back,
.chat-empty>span,
.collapsible-card-indicator,
.connection i,
.connection>i,
.conversation-sidebar::-webkit-scrollbar-thumb,
.conversation-thumb,
.daily-limit-badge,
.detail-support-actions a,
.dialog-actions a,
.download-all,
.editor-history-entry .editor-history-badge,
.editor-history-head>h3 span,
.listing-fact,
.favorite-toggle,
.frontend-admin-badge,
.health-item>span::before,
.job-entry > b,
.job-entry-preview,
.job-history summary span,
.job-preview,
.job-publication-state,
.job-stack > summary > b,
.job-total-badge,
.marketplace-ad-label,
.marketplace-listing-footer .listing-fact,
.marketplace-listing-image span,
.marketplace-pagination a,
.message-composer textarea::-webkit-scrollbar-thumb,
.message-load-older,
.message-thread::-webkit-scrollbar-thumb,
.optimized-image-feedback,
.optional-badge,
.output-grid .output-status,
.owner-badge,
.owner-statistics span,
.photo-count,
.plus,
.preview-facts span,
.profile-cell-tags small,
.profile-tag,
.promise i,
.prompt-badge,
.provider-status.connected::before,
.publish-actions a,
.publish-actions button,
.result-edit-status small,
.save-all,
.seller-card #contact-login,
.sortable-image-card.is-drop-target::before,
.sortable-image-position,
.status-pill,
.story-optional,
.support-edit-banner a,
.table-action,
.tags span,
.task-progress-track,
.task-pulse,
.test-badge,
.topbar button,
.trust-line span,
.workshop-status,
.workshop-status.waiting i { border-radius: var(--radius-pill); }
.budget-warning,
.collapsible-card>summary:focus-visible,
.device-code-copy strong,
.excluded-optimized-image img,
.method-panel strong,
.optimized-card img,
.provider-setup-panel .method-panel strong,
.workshop-action > small[role="tooltip"] { border-radius: var(--radius-sm); }
.bar i,
.chart-legend i { border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) var(--radius-sm); }
.auth-card,
.bundle-card,
.checkout-summary,
.checkout-view,
.closing,
.detail-card,
.empty,
.filters,
.gallery,
.history-preview-locked .version-mode-content,
.listing-messenger,
.manifesto,
.marketplace-ad-slot img,
.marketplace-empty,
.messenger,
.metric-card,
.metric-grid article,
.payment-panel,
.plan-card,
.publish-dialog,
.seller-card,
.seo-guide,
.settings-card,
.setup-dialog,
.similar-listing-card,
.studio,
.version-mode-content,
dialog { border-radius: var(--radius-xl); }

/* Shared primitives. Component aliases below keep every surface on one contract. */
* { box-sizing: border-box; }
body { overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; margin: 0; background: var(--cream); color: var(--ink); font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-body); letter-spacing: normal; }
button, input, select, textarea, code, pre, kbd, samp { font-family: var(--font-family); }
/* Prose prefers language-aware hyphenation. Exact machine identifiers can wrap
   anywhere; headings also have an emergency fallback below for text resizing. */
code, pre, kbd, samp, .detail-meta-id, .breadcrumb-reference, .result-link, .changelog-diff-value { overflow-wrap: anywhere; word-break: normal; -webkit-hyphens: none; hyphens: none; }
/* Larger directional symbols explain a diagram, while controls retain the 20px icon role. */
.workflow-connector { --icon-size: var(--diagram-icon-size); }
input { font-size: var(--text-body); }
a { color: inherit; text-underline-offset: .2em; }
:where(p, li) > a { text-decoration: underline; }
strong, b { font-weight: var(--weight-bold); }
small, figcaption { font-size: var(--text-xs); line-height: var(--leading-caption); }
.eyebrow, .studio-index, .result-card .result-card-index, .pill-select-label { font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: var(--leading-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; }
label { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-caption); }
/* Heading level is the visual role on every page; children cannot shrink it. */
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); font-weight: var(--weight-heavy); text-transform: none; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: var(--text-h1); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
h2, .section-title, .primary-price, .paper-sheet .primary-price, .price, .detail-price, .price-card .result-value, .output-grid [data-result-field=price] > p { font-size: var(--text-h2); font-weight: var(--weight-heavy); line-height: var(--leading-h2); letter-spacing: var(--tracking-heading); }
.collapsible-summary strong { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
h4 { font-size: var(--text-h4); line-height: var(--leading-caption); letter-spacing: normal; }
h5 { font-size: var(--text-h5); line-height: var(--leading-caption); letter-spacing: normal; }
h6 { font-size: var(--text-h6); line-height: var(--leading-caption); letter-spacing: normal; }
h1 :is(span,em,strong), h2 em, h3 em, h4 em { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; font-style: normal; white-space: normal; }
h1 em, h2 em, h3 em, h4 em { color: inherit; }
.speed-headline > :is(span,em) { display: block; }
.listing-emphasis, .title-card .result-value, .output-grid [data-result-field=title] > p { font-size: var(--text-h3); font-weight: var(--weight-heavy); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
.ai-explanation, .result-rationale p, .feedback-details .result-value, .output-grid article.rationale p, .output-grid [data-result-field=feedback] > p {
  font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-body); letter-spacing: normal;
}
:where(.quota,.strikethrough-price) { font-size: var(--text-h1); font-weight: var(--weight-heavy); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.price > small { font-size: var(--text-lead); font-weight: var(--weight-medium); line-height: var(--leading-control); letter-spacing: normal; color: var(--ink); }
:where(.subtitle,.intro-copy) { font-size: var(--text-subtitle); font-weight: var(--weight-semibold); line-height: var(--leading-h3); }
:where(.lead,.subline) { font-size: var(--text-lead); line-height: var(--leading-body); }

/* Actions: primary, secondary, accent, text and icon are shared semantic roles. */
button, .primary, .outline, .secondary, .sell, .account-cta, .new-button, .save-all, .download-all, .table-action, .new-research-link,
.owner-actions a, .owner-actions button, .publish-actions a, .publish-actions button, .filter-actions a, .dialog-actions a, .closing > a {
  min-height: var(--control-height); min-width: 44px; padding: var(--space-2) var(--space-6);
  border: 1px solid var(--control-border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); font-size: var(--text-sm);
  font-weight: var(--weight-bold); line-height: var(--leading-control); letter-spacing: normal;
  text-decoration: none; cursor: pointer; touch-action: manipulation; overflow-wrap: break-word;
  --action-wrap: words; word-break: normal; -webkit-hyphens: var(--action-hyphens, manual); hyphens: var(--action-hyphens, manual);
}
.needs-action-hyphenation { --action-hyphens: auto; }
/* Main-header actions keep their pill shape across public, account and admin views. */
:is(.nav, .topbar) .nav-actions > :is(a,button),
header.site-header > nav > :is(a,button),
.topbar .admin-tools > :is(a,button) { border-radius: var(--radius-pill); }
.primary, .sell, .account-cta, .method-panel button, .filter-actions button, .promotion-row button, .publish-dialog-actions button:last-child,
.rerun-controls button, .platform-setup button, .quota-control button, .tag-entry button,
.profile-limit-row button, .quota-save-row button, .changelog-filters button, .changelog-more,
.changelog-rollback-card button, .upload-settings-form button, .stripe-settings-fields > button,
.dialog-actions a, .analytics-consent button:last-child, .message-composer button {
  background: var(--primary-background); color: var(--primary-foreground); border-color: var(--primary-border);
}
.analyze-button, .market-search button, .bundle-card button { background: var(--green); color: var(--text-inverse); border-color: var(--green); }
.outline, .secondary, .new-button, .connection, .save-all, .download-all, .sortable-image-controls button, .result-card header button,
.platform-setup .secondary, .changelog-filters .secondary,
.filter-actions a, .owner-actions a, .owner-actions button, .publish-actions > a, .publish-actions > button,
.publish-dialog-actions button, .settings-card button, .plan-actions button, .job-history-entry button,
.editor-history-preview button, .collection-toolbar button, .analytics-consent button {
  background: var(--secondary-background); color: var(--secondary-foreground); border-color: var(--secondary-border);
}
#publish-panel[data-publication-state="update"] #open-publish {
  background: var(--orange-action); color: var(--orange-ink); border-color: var(--orange-text);
}
.text-button, .new-research-link, .method-panel .text-button, .analysis-settings-actions .text-button, .promotion-discount button, .result-edit-status button {
  background: transparent; color: inherit; border-color: transparent; text-decoration: underline;
}
.sort-button { padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-align: inherit; }
.search-suggestions button, .tag-suggestions button { border-color: transparent; border-radius: var(--radius-md); text-align: left; }
/* Text, a count and a status icon share one wrapping action layout. */
.action-with-meta, .analyze-button, .save-all, .download-all, .new-research-link, .briefing-toggle, .bundle-card button,
.owner-actions > a, .owner-actions > button, .publish-actions > a, .publish-actions > button, .closing > a {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-2); max-width: 100%; height: auto; max-height: none; min-height: var(--control-height);
  white-space: normal; overflow-wrap: normal;
}
:is(.action-with-meta,.analyze-button,.save-all,.download-all,.new-research-link,.briefing-toggle,.bundle-card button,.owner-actions > a,.owner-actions > button,.publish-actions > a,.publish-actions > button,.closing > a) > :is(span,small,b,i) {
  min-width: 0; max-width: 100%;
}
:is(.action-with-meta,.analyze-button,.save-all,.download-all,.new-research-link,.briefing-toggle,.bundle-card button,.owner-actions > a,.owner-actions > button,.publish-actions > a,.publish-actions > button,.closing > a) > span { flex: 0 1 auto; }
:is(.action-with-meta,.analyze-button,.save-all,.download-all,.bundle-card button,.owner-actions > a,.owner-actions > button,.publish-actions > a,.publish-actions > button,.closing > a) > small {
  flex: 0 1 auto; margin-inline-start: 0; padding: var(--space-1) var(--space-2);
}
:is(.action-with-meta,.analyze-button,.save-all,.download-all,.new-research-link,.bundle-card button,.owner-actions > a,.owner-actions > button,.publish-actions > a,.publish-actions > button,.closing > a) > :is(b,bildanzeigen-icon,.button-icon,.publish-button-icon) { flex: 0 0 auto; margin: 0; }
.action-with-meta > .action-caption { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--space-2); max-width: none; white-space: nowrap; }
.action-caption > .action-label { white-space: nowrap; hyphens: none; }
.action-with-meta.is-wrapped-action > .action-caption { flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: normal; }
.action-with-meta.is-wrapped-action .action-label { min-width: 0; white-space: normal; -webkit-hyphens: inherit; hyphens: inherit; }
.action-caption > b { display: inline-flex; flex: 0 0 auto; align-items: center; margin: 0; }
.action-with-meta.is-tight-action { padding-inline: var(--space-1); }
.icon-button, .chat-back, .password-toggle, .preview > button, .dialog-head button, .horizontal-scroller-button,
.horizontal-scroller-controls button, .setup-dialog-close, .job-stack-pagination button,
.conversation-delete, .carousel-arrow, .profile-tag button, button.sortable-image-remove, .account-profile-unlink, .message-composer button {
  flex: 0 0 var(--control-height); width: var(--control-height); height: var(--control-height);
  min-width: var(--control-height); max-width: var(--control-height); min-height: var(--control-height); max-height: none;
  aspect-ratio: 1; padding: 0; display: inline-grid; place-items: center;
  border-radius: var(--radius-pill); font-size: var(--text-subtitle); line-height: 1;
}
.automatic-profile-link > .account-profile-unlink { background: var(--green); color: var(--text-inverse); border-color: var(--green); }
.connection-button { border: 0; background: transparent; color: var(--green); box-shadow: none; }
.connection-button--filled { background: var(--green); color: var(--text-inverse); }
.plan-actions button { background: var(--card); color: var(--ink); }
.icon-button, .chat-back, .password-toggle, .preview > button, .dialog-head button, .horizontal-scroller-button, .horizontal-scroller-controls button, .setup-dialog-close, .job-stack-pagination button, .conversation-delete, .carousel-arrow, .profile-tag button, button.sortable-image-remove, .account-profile-unlink, .message-composer button { -webkit-appearance: none; appearance: none; }
.profile-tag button { background: transparent; color: inherit; border: 0; }
.password-toggle, .settings-card .password-toggle { border: 0; border-radius: var(--radius-sm); background: transparent; box-shadow: none; color: var(--ink); }
.conversation-open { padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; box-shadow: none; }
button[class] :is(i,b) { color: inherit; }
.briefing-toggle { border: 0; border-radius: var(--radius-md); background: transparent; color: inherit; padding-inline: 0; font-size: var(--text-body); text-align: left; }
.thumbnails button { --thumbnail-border-width: 2px; --thumbnail-radius: var(--radius-md); border-width: var(--thumbnail-border-width); padding: 0; border-radius: var(--radius-md); background: var(--card); }
input:disabled, select:disabled, textarea:disabled {
  opacity: 1; background: var(--disabled-bg); color: var(--disabled-text);
  border-color: var(--control-border); cursor: not-allowed; filter: none;
}
button:disabled, button[aria-disabled="true"], [role="button"][aria-disabled="true"],
:is(.marketplace-pagination,.pagination) a[aria-disabled="true"] {
  opacity: 1; cursor: not-allowed; filter: blur(var(--disabled-action-blur));
}
@media (hover:hover) {
  :is(button,.primary,.outline,.secondary,.sell,.account-cta):not(:disabled):not([aria-disabled="true"]):not(:where(.conversation-open,.job-entry,.password-toggle,.connection-button)):hover { filter: none; box-shadow: inset 0 0 0 1px currentColor; }
  :is(.job-entry,.conversation-item):not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--green); background: var(--row-hover-bg); box-shadow: inset 0 0 0 1px var(--green); }
  a:not([aria-disabled="true"]):hover { text-decoration: underline; }
}
:is(.job-entry.is-selected,.job-entry[aria-current=true],.conversation-item.active,.conversation-item[aria-current=true],.editor-history-entry[aria-pressed=true]) { border-color: var(--media-selection-color); background: var(--row-selected-bg); }
body :focus-visible, .pill-select:focus-within, .dropzone:focus-within, .search-query-row:focus-within {
  outline: 3px solid var(--focus-color) !important; outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--focus-separator) !important;
}
.pill-select select:focus-visible { outline: 0 !important; box-shadow: none !important; }

.dropzone input { height: 100%; }
#new-analysis { background: var(--card); color: var(--ink); border-color: var(--control-border); }
.thumbnails button:is(.active,[aria-current=true]) {
  --thumbnail-border-width: var(--media-selection-border-width);
  border-color: var(--media-selection-color); transform: rotate(var(--media-selection-tilt)); box-shadow: var(--shadow);
}
.sortable-image-card:is(.is-press-selected,.is-dragging) { box-shadow: 0 0 0 var(--media-selection-border-width) var(--media-selection-color), var(--shadow); }
.sortable-image-card.is-dragging { transform: scale(.96) rotate(var(--media-selection-tilt)); }
.favorite-toggle[aria-pressed=true] { background: var(--surface-soft); color: var(--ink); }
.search-submit, .closing > a { background: var(--primary-background); color: var(--primary-foreground); border-color: var(--primary-border); }
/* Search intent is a shared control role for navigation and listing search. */
.search-hint { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-body); }
.search-intent-chip { border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--surface-soft); color: var(--ink); }
.search-intent-chip > button { border: 0; background: transparent; color: var(--ink); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.search-intent-chip > .search-intent-edit { padding-inline: var(--space-3); }
.search-intent-chip > .search-intent-remove { padding-inline: var(--space-2); }
/* Fields: a single boundary, surface, text style and responsive control size. */
input:not([type=checkbox],[type=radio],[type=file],[type=hidden]), select, textarea {
  min-height: var(--control-height); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--control-border); border-radius: var(--radius-md);
  background: var(--card); color: var(--ink); font-size: var(--text-body);
  font-weight: var(--weight-regular); line-height: var(--leading-control); letter-spacing: normal;
}
textarea { min-height: 8rem; resize: vertical; }
select:not([multiple]) { height: var(--control-height); height: max(var(--control-height), calc(1em * var(--leading-control) + var(--space-4) + 2px)); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--green); }
.checkbox-control { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height); min-height: var(--control-height); cursor: pointer; }
.checkbox-control input, .collection-checkbox { width: 20px; height: 20px; margin: 0; cursor: pointer; }
label:has(> input[type=checkbox]) { min-height: var(--control-height); cursor: pointer; }
.collection-toolbar label, .platform-checkbox { min-height: var(--control-height); cursor: pointer; }
.form-links a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); min-width: 44px; }
.message-composer textarea { min-height: var(--control-height); border: 0; background: transparent; }
.message-send-label { display: none; white-space: nowrap; }
.count-badge {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: max-content; min-width: 1.75rem; min-height: 1.75rem; aspect-ratio: 1; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--ink);
  font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1; letter-spacing: normal; text-align: center;
}
.listing-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.listing-summary > .detail-price { margin: 0; }
.listing-summary > .facts { display: contents; }
/* Inline editing is one shared field role; it inherits the content being edited. */
.price-editor .price-amount, .price-editor .price-amount :is(input,textarea), [contenteditable=true] { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.price-editor .price-amount :is(input,textarea) { padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; caret-color: currentColor; }
.price-editor .price-amount textarea { -webkit-hyphens: none; hyphens: none; height: auto; min-height: max(var(--control-height), calc(1em * var(--leading-h2))); resize: none; overflow-wrap: anywhere; word-break: normal; text-align: center; }

/* Label and select share the same pill shell. The label never overlays its border. */
.pill-select { position: relative; display: grid; grid-template-columns: minmax(0,1fr); width: 100%; min-width: 0; background: var(--card); color: var(--ink); border: 1px solid var(--control-border); border-radius: var(--radius-pill); }
.pill-select--labeled { grid-template-columns: auto minmax(0,1fr); align-items: center; }
.pill-select-label { position: static; display: block; max-width: 7rem; padding: var(--space-2) 0 var(--space-2) var(--space-4); color: var(--accent-text); background: transparent; pointer-events: none; overflow-wrap: normal; }
.pill-select select { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; min-height: var(--control-height); height: auto; margin-block: -1px; padding: var(--space-2) var(--space-8) var(--space-2) var(--space-4); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); font-size: var(--text-body); font-weight: var(--weight-semibold); -webkit-appearance: none; appearance: none; }
.pill-select::after { content: ''; position: absolute; right: var(--space-4); top: 50%; width: 1rem; height: 1rem; background: currentColor; mask: url('/assets/icons/chevron-down.svg?v=20261002') center/contain no-repeat; pointer-events: none; transform: translateY(-50%); }
.autosave-field { --autosave-feedback-right: var(--space-3); }
.pill-select .autosave-feedback { right: var(--space-8); }

/* Shared surfaces and their grid children can shrink within a narrow parent. */
:where(.card,.panel,.result-card,.listing-card,.bundle-card,.auth-card,.settings-card,.plan-card,.checkout-view,.messenger,.detail-card,.seller-card,.seo-guide,.platform-provider-card,.method-panel) { min-width: 0; }
:where(.card,.panel,.result-card,.listing-card,.bundle-card,.auth-card,.settings-card,.plan-card,.checkout-view,.messenger,.detail-card,.seller-card,.seo-guide,.platform-provider-card,.method-panel) > * { min-width: 0; }
:where(.intro,.section-heading,.results-head,.studio-head,.dialog-head,.panel > header) > * { min-width: 0; max-width: 100%; }
.filter-actions, .changelog-filter-actions { min-width: 0; max-width: 100%; flex-wrap: wrap; }

/* Surfaces have one shell; content layout stays with its responsible component. */
.card, .panel, .result-card, .listing-card, .bundle-card, .auth-card, .settings-card,
.plan-card, .checkout-view, .messenger, .detail-card, .seller-card, .seo-guide,
.profile-card, .changelog-detail-card, .changelog-rollback-card, .architecture-card, .closing {
  border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--card); padding: var(--space-6);
  --focus-color: var(--green); --focus-separator: var(--card);
}
.studio { padding: var(--space-6); }
.studio, .plan-card, .feedback-card, .job-stack { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-xl); --focus-color: var(--green); --focus-separator: var(--card); }
.image-workshop { background: var(--cream); color: var(--ink); border-radius: var(--radius-xl); padding: var(--space-6); }
.image-workshop header { color: var(--ink); }
.title-card { background: var(--card); }
.price-card { background: var(--card); color: var(--ink); border-color: var(--line); }
.price-card .pill-select { border-color: var(--green); }
.price-card :is(header,.eyebrow,.result-card-index,.result-value,.price-amount) { color: var(--ink); }
.bundle-card.featured { background: var(--support-surface); color: var(--ink); border-color: var(--green); }
.bundle-card.featured :is(p,small,.strikethrough-price) { color: var(--ink); }
.collapsible-card { padding: 0; }
.collapsible-summary, .messenger-content, .security-content { padding: var(--space-6); }
:where(.setup-dialog,.publish-dialog,.detail-dialog,.platform-dialog) { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--card); color: var(--ink); }
.dialog-head, .dialog-content, .publish-dialog-body { padding: var(--space-6); background: var(--card); }
.method { padding: var(--space-4); border: 1px solid var(--control-border); border-radius: var(--radius-md); }
.method:has(input:checked) { background: var(--surface-soft); border-color: var(--green); }
.method-panel { padding: var(--space-4); border-radius: var(--radius-md); background: var(--cream); }

/* Badges and status semantics are shared across public, account and admin UI. */
.pill, .badge, .status-pill, .status-badge, .tags span, .owner-badge, .test-badge,
.frontend-admin-badge, .admin-badge, .prompt-badge, .optional-badge, .bundle-card .flag,
.editor-history-badge, .job-total-badge, .listing-fact {
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  line-height: var(--leading-caption); letter-spacing: normal; padding: var(--space-1) var(--space-3);
}
.frontend-admin-badge, .admin-badge, .owner-badge, .test-badge { background: var(--orange-soft); color: var(--orange-text); border: 1px solid var(--orange-text); }
body .optional-badge { background: var(--green); color: white; }
body .prompt-badge { background: var(--green); color: var(--surface-soft); }
.notice { padding: var(--space-4); border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--status-warning-bg); color: var(--status-warning-text); }
:is(.status-pill,.status-badge)[data-status=healthy], .status-success, .badge.complete { background: var(--status-success-bg); color: var(--status-success-text); }
:is(.status-pill,.status-badge)[data-status=warning], .status-warning, .badge.running { background: var(--status-warning-bg); color: var(--status-warning-text); }
:is(.status-pill,.status-badge)[data-status=critical], .status-error, .badge.failed, .notice.error, .budget-warning, .method.budget-exhausted { background: var(--status-error-bg); color: var(--status-error-text); border-color: var(--orange-text); }
.error, .form-message.error, .autosave-feedback.error { color: var(--status-error-text); }
.studio .error { background: var(--status-error-bg); color: var(--status-error-text); padding: var(--space-2); border-radius: var(--radius-sm); }
.closing em { color: var(--lime); }
.collapsible-summary i { color: var(--accent-text); }
.result-card details, .daily-limit-badge, .result-rationale, .history-preview-locked .image-workshop { opacity: 1; }
.error-page { width: min(48rem,calc(100% - 2rem)); margin: var(--space-12) auto; padding: var(--space-8); background: var(--card); border-radius: var(--radius-xl); }
.skip-link { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 20000; padding: var(--space-3) var(--space-4); background: var(--card); color: var(--ink); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
@media (max-width:680px) {
  :root { --text-xs: .8125rem; --text-body: 1rem; --control-height: 48px; --header-control-height: 48px; }
  .nav, header.site-header, .topbar { height: auto; max-height: none; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-2); }
  header.site-header > nav { flex-wrap: wrap; gap: var(--space-2); max-width: 100%; }
  .nav-actions .connection, header.site-header > nav > .connection { max-width: none; flex-basis: auto; }
  .nav-actions > :is(a,button), header.site-header > nav > a { max-width: 100%; overflow-wrap: normal; white-space: normal; }
  .nav-actions :is(.account-cta,.sell,.connection), header.site-header nav :is(.account-cta,.sell,.connection) { padding-inline: var(--space-3); font-size: var(--text-xs); height: var(--header-control-height); min-height: var(--header-control-height); max-height: none; }
  .drop-visual, .drop-meta, .promise, .studio-head, .result-card header, .intro, .bundle-card header { flex-wrap: wrap; gap: var(--space-3); }
  .card, .panel, .studio, .result-card, .listing-card, .bundle-card, .auth-card, .settings-card, .plan-card, .checkout-view, .detail-card, .seller-card, .seo-guide, .profile-card, .architecture-card, .closing { padding: var(--space-4); }
  .collapsible-card { padding: 0; }
  .collapsible-summary, .messenger-content, .security-content { padding: var(--space-4); }
  .filter-grid, .changelog-filters, .listing-card { grid-template-columns: minmax(0,1fr); }
  .architecture-card > header > span { grid-column: 1 / -1; overflow-wrap: normal; }
  .architecture-card > header > strong { grid-column: 1; }
  .architecture-card > header > small { grid-column: 2; }
}
@media (max-width:379px) {
  .pill-select--labeled { grid-template-columns: minmax(0,1fr); }
  .pill-select-label { padding-bottom: 0; max-width: none; }
  .pill-select::after { top: auto; bottom: 20px; }
  .market-search .search-actions, .market-search .filter-actions,
  .filter-controls { grid-template-columns: minmax(0,1fr); height: auto; }
}
@media (max-width:560px) {
  .action-full, .message-composer-action button { width: 100%; max-width: none; aspect-ratio: auto; min-width: 44px; display: flex; justify-content: flex-end; padding-inline: var(--space-4); }
  .message-composer-action button { justify-content: center; gap: var(--space-2); }
  .message-send-label { display: inline; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (forced-colors:active) { body :is(button,input,select,textarea,a,summary):focus-visible, .pill-select:focus-within, .dropzone:focus-within { outline-color: Highlight !important; } }

.text-body { font-size: var(--text-body); line-height: var(--leading-body); }
.text-caption { font-size: var(--text-xs); line-height: var(--leading-caption); }
.text-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-caption); }
.text-subtitle { font-size: var(--text-subtitle); font-weight: var(--weight-semibold); line-height: var(--leading-h3); }
.text-lead { font-size: var(--text-lead); line-height: var(--leading-body); }

.account-greeting { font-size: var(--text-sm); color: var(--muted); }

.brand { line-height: var(--leading-control); }
/* Standalone navigation targets share the control height, including logos. */
.brand, nav a, .nav-links > a, .breadcrumbs a {
  display: inline-flex; align-items: center;
  min-height: var(--control-height); min-width: 44px;
}
.nav-links { gap: var(--navigation-gap); }
.nav-links > a, .admin-tools > a, .site-header > nav > a:not(.sell):not(.account-cta) { font-size: var(--text-navigation); }
.footer-links { display: block; flex: 0 1 auto; width: fit-content; max-width: 52rem; min-width: 0; text-align: start; hyphens: none; }
.footer-links a { white-space: nowrap; hyphens: none; }
.support-surface-card { border-color: var(--support-line); background: var(--support-surface); color: var(--ink); border-radius: var(--radius-xl); padding: var(--space-6); }
.autosave-rich-field { --autosave-feedback-top: calc(var(--text-body) * .8); }
.title-card .autosave-rich-field { --autosave-feedback-top: calc(var(--text-h3) * .625); }

.connected-surface-end { border-top: 0; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

.button-icon, .save-all b, .download-all b, .analyze-button b { font-size: var(--text-subtitle); line-height: 1; color: inherit; }
/* A single local SVG source for text-adjacent, icon-only and CSS disclosure icons. */
bildanzeigen-icon { display: inline-flex; width: var(--icon-size); height: var(--icon-size); flex: 0 0 auto; vertical-align: -.22em; color: inherit; pointer-events: none; }
.ui-icon { display: block; width: var(--icon-size); height: var(--icon-size); flex: 0 0 var(--icon-size); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(button,a) > bildanzeigen-icon { vertical-align: middle; }
.sort-button::after, .search-query-field::after,
.result-card .result-rationale-details > summary::after, .filter-toggle::after {
  content: ''; display: inline-block; flex: 0 0 auto; width: var(--icon-size); height: var(--icon-size);
  background: currentColor; mask: var(--disclosure-icon, url('/assets/icons/plus.svg?v=20261002')) center/contain no-repeat;
}
.result-card .result-rationale-details[open] > summary::after, .filters[open] .filter-toggle::after { --disclosure-icon: url('/assets/icons/minus.svg?v=20261002'); }
.sort-button::after { --disclosure-icon: url('/assets/icons/sort.svg?v=20261002'); }
.sort-button[data-direction=asc]::after { --disclosure-icon: url('/assets/icons/arrow-up.svg?v=20261002'); }
.sort-button[data-direction=desc]::after { --disclosure-icon: url('/assets/icons/arrow-down.svg?v=20261002'); }
.search-query-field::after { --disclosure-icon: url('/assets/icons/search.svg?v=20261002'); }
.workshop-status:is(.success,.cancelled) i::before { content: ''; display: block; width: var(--icon-size); height: var(--icon-size); background: currentColor; mask: var(--status-icon) center/contain no-repeat; }
.workshop-status.success i::before { --status-icon: url('/assets/icons/check.svg?v=20261002'); }
.workshop-status.cancelled i::before { --status-icon: url('/assets/icons/close.svg?v=20261002'); }

.sortable-image-controls {display:flex;justify-content:center;gap:var(--space-2);padding:var(--space-2);order:2}
.sortable-image-controls button {display:inline-grid;place-items:center;position:static;min-width:var(--control-height);min-height:var(--control-height);padding:var(--space-2);border-radius:var(--radius-sm)}

.sortable-image-tile {display:flex;flex-direction:column;aspect-ratio:auto}

html {scroll-padding-top:calc(var(--site-header-height,0px) + var(--space-4));scroll-padding-bottom:calc(var(--consent-banner-height,0px) + var(--space-6))}
/* Header targets already occupy the pinned band excluded for document anchors.
   Cancel that inset for native focus scrolling within the visible header. */
:is(.nav,header.site-header,.topbar) :is(a,button,input,select) {
  scroll-margin-block-start: calc(0px - var(--site-header-height,0px) - var(--space-4));
}
body:has([data-analytics-consent]) {padding-bottom:calc(var(--consent-banner-height,0px) + var(--space-6))}

/* Shared reflow and screenreader utilities apply to every HTML surface. */
.visually-hidden, .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
form, form label { min-width:0; }
form { grid-template-columns:minmax(0,1fr); }
input:not([type=checkbox],[type=radio],[type=file],[type=hidden]), select, textarea { min-width:0; max-width:100%; }

.field-validation-host { position:relative; }

/* Role mapping: the photo-to-listing workflow uses paper, ink and one primary action. */
.benefit-list { color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-regular); }
.manifesto blockquote { font-size: var(--text-h2); font-weight: var(--weight-semibold); line-height: var(--leading-h2); letter-spacing: var(--tracking-heading); }
.studio { box-shadow: var(--shadow); }
.studio :is(.studio-index,.studio-head h2,.studio-action > div > span,.studio-action > div > small,.drop-visual small,.briefing-toggle small) { color: var(--ink); }
.studio :is(.briefing-toggle i,.studio-settings span) { color: var(--green); }
.drop-visual strong { font-size: var(--text-body); font-weight: var(--weight-semibold); line-height: var(--leading-control); letter-spacing: normal; }
.briefing { border-color: var(--line); }
body .optional-badge { background: var(--cream); color: var(--muted); border-color: var(--line); }
.dropzone { background: var(--cream); color: var(--ink); border: 1px dashed var(--control-border); }
.dropzone.dragging { background: var(--support-surface); }
.plus { background: var(--surface-soft); color: var(--green); }
.result-field-label, .result-card header, .image-workshop header span { color: var(--muted); }
.price-card header, .feedback-card header { color: var(--ink); }
.promise { color: var(--muted); background: transparent; border-color: var(--line); }
.manifesto, .seo-guide-grid article { background: transparent; color: var(--ink); }
.closing { background: var(--support-surface); color: var(--ink); border: 1px solid var(--line); }
.sortable-image-tile, .preview, .optimized-card { background: var(--card); color: var(--ink); }
.editor-history-entry { background: transparent; color: var(--ink); border-color: var(--control-border); }
.editor-history-entry.is-previewed { border-color: var(--orange-text); }
.editor-history-entry .editor-history-badge.is-published { color: var(--orange-ink); }
.task-progress { background: var(--cream); border-color: var(--line); }
.task-progress :is(.task-progress-head,.task-progress-head strong,p,time) { color: var(--ink); }
.task-progress-track { background: var(--line); }
.task-progress-track i { background: var(--green); box-shadow: none; }
.task-progress.failed { background: var(--status-error-bg); border-color: var(--orange-text); color: var(--status-error-text); }
.task-progress.failed .task-progress-track i, .task-progress.failed .task-pulse { background: var(--orange-text); }
/* Navigation communicates destinations without promoting every link to an action. */
.nav-links > a, .admin-tools > a, .site-header > nav > a:not(.sell):not(.account-cta) { font-weight: var(--weight-medium); color: var(--green); text-decoration: none; text-underline-offset: .2em; }
.nav-links > a[aria-current=page] { text-decoration: underline; }

/* Functional subpanels and charts reuse the paper / inset / status roles. */
.metric-card, .metric-grid article, .detail-metrics article, .detail-section,
.profile-job, .profile-directory-card, .changelog-entry, .architecture-resource,
.detail-support-actions, .platform-setup section, .global-limit-setting {
  border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--radius-lg);
}
.metric-card { padding: var(--space-6); text-decoration: none; }
.period-grid, .architecture-resources { background: var(--line); border: 1px solid var(--line); }
.period { background: var(--card); }
.metric-pairs { display: grid; gap: var(--space-3); margin: 0; }
.metric-pair { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-4); row-gap: var(--space-1); min-width: 0; }
.metric-pair > dt { flex: 1 1 12rem; min-width: min(100%, 12rem); }
.metric-pair > dd { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; }
.quota-rule, .inherited-limit, .health-item, .endpoint-row, .notes, .checkout-summary,
.platform-code-row strong, .changelog-diff-row, .output-grid article {
  background: var(--cream); color: var(--ink); border: 1px solid var(--line);
}
.quota-sequence + .quota-sequence, .checkout-total, .promotion, .dialog-head,
.consent-choice, .story-steps, .story-steps article, .result-rationale, .security-content,
.job-history-entry, .changelog-entry-content, .account-history-event {
  border-color: var(--line);
}
th, td { border-bottom: 1px solid var(--line); }
tbody tr:hover { background: var(--row-hover-bg); }
th, .tile-intro, .account-page-heading > p, .section-heading > p, .bundle-card .description,
.fineprint, .metric-card small, .metric-grid small, .intro time, .period dt,
.bar small, .job-id, .empty, .architecture-card-summary, .architecture-panel > header time,
.quota-control small, .cost-baseline, .input-token-baseline, .detail-meta,
.profile-directory-card > span, .account-link-source, .detail-meta-id { color: var(--muted); }
.topbar, .site-header, .nav { background: var(--cream); border-bottom: 1px solid var(--line); backdrop-filter: none; }
.search-suggestions, .tag-suggestions, .analytics-consent {
  background: var(--card); color: var(--ink); border: 1px solid var(--control-border); box-shadow: var(--shadow);
}
.search-suggestions button { background: transparent; color: var(--ink); }
.search-suggestions button:not(:disabled):not([aria-disabled="true"]):hover { background: var(--row-hover-bg); }
.profile-link, .inline-profile-link, .detail-meta-link { background: transparent; color: var(--green); border: 0; text-decoration: underline; }
.bar i, .chart-legend i, .architecture-component i::before { background: var(--green); }
.architecture-component i { background: var(--line); }
.health-item > span::before { background: currentColor; }
.health-item.healthy > span { color: var(--status-success-text); }
.health-item.warning > span { color: var(--status-warning-text); }
.health-item.critical > span { color: var(--status-error-text); }
.changelog-snapshot { background: var(--status-success-bg); color: var(--status-success-text); }
.changelog-status.error, .changelog-rollback-card.error { background: var(--status-error-bg); color: var(--status-error-text); }
.tags span, .profile-tag, .profile-cell-tags small { background: var(--surface-soft); color: var(--ink); }
.dialog-head button svg { width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: 2; }
dialog { padding: 0; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
dialog::backdrop { background: rgb(23 61 49 / .45); backdrop-filter: blur(3px); }
footer { padding-block: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); border-top: 1px solid var(--line); color: var(--muted); }
footer p { margin: 0; }
.footer-navigation { border-top: 1px solid var(--line); }
.footer-navigation :is(a, .text-button) { color: var(--green); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-control); text-decoration: underline; text-underline-offset: .2em; }
.footer-navigation .text-button { padding-inline: 0; border: 0; background: transparent; }
.workflow-step-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; background: var(--surface-soft); color: var(--green); border-radius: var(--radius-md); }
.workshop-action > small[role=tooltip] { background: var(--green); color: var(--text-inverse); }
.publish-panel, .listing-administration { background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius-xl); padding: var(--space-6); }
.listing-administration[data-publication-state=update] { border-width: 2px; border-color: var(--orange-text); background: var(--orange-soft); }
/* Concentric frames add their inset and border to the enclosed surface radius. */
.inset-surface-frame, .history-preview-locked .version-mode-content {
  --surface-frame-inset: var(--space-2);
  --surface-frame-border-width: 2px;
  border: var(--surface-frame-border-width) solid var(--green);
  border-radius: calc(var(--radius-xl) + var(--surface-frame-inset) + var(--surface-frame-border-width));
  padding: var(--surface-frame-inset);
}
.editor-history-entry.is-current { border-color: var(--green); }
.editor-history-preview { border-top: 1px solid var(--line); }
.editor-history-preview #editor-history-restore { background: var(--orange-action); color: var(--orange-ink); border-color: var(--orange-text); }
.marketplace-pagination a[aria-current=page], .pagination a[aria-current=page] { background: var(--green); color: var(--text-inverse); border-color: var(--green); }
.gentle-tilt { transform: rotate(var(--gentle-angle, 0deg)); transition: transform 420ms ease; }
@media (prefers-reduced-motion: reduce) { .gentle-tilt { transition: none; } }
.photo-count { background: var(--green); color: var(--text-inverse); }
.gallery, .gallery-main, .similar-listing-card { background: var(--card); border: 1px solid var(--line); }
.listing-fact, .owner-statistics span { background: var(--cream); color: var(--ink); border: 1px solid var(--line); }
.seller-card #contact-login { background: var(--green); color: var(--text-inverse); border-color: var(--green); }
.seller-card p, .similar-listing-copy p, .similar-listing-comparison > span:not(.listing-fact) { color: var(--muted); }
.closing .inline-link { color: inherit; text-decoration: underline; }
.briefing-toggle i, .workshop-status i, .job-stack > summary > i, .provider-setup-panel .method i { font-style: normal; }
.dialog-head button svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.support-surface-card, .quota-support-card, #detail-support-actions, .global-limit-setting {
  border-color: var(--support-line); background: var(--support-surface); color: var(--ink); border-radius: var(--radius-xl); padding: var(--space-6);
}
.marketplace-listing-card { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--radius-xl); }
.marketplace-listing-image span { background: var(--green); color: var(--text-inverse); }
.strikethrough-price { font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-body); letter-spacing: normal; color: var(--muted); }
.workflow-example-result { background: var(--card); color: var(--ink); }
.workflow-example :is(figcaption,.text-caption) { color: var(--muted); }

/* Brand, product photography and output are reusable roles, never page skins.
   Light work surfaces reset their own text and focus context inside a brand band. */
.surface-brand {
  background: var(--brand-surface); color: var(--brand-copy);
  border-color: var(--brand-surface);
  --focus-color: var(--card); --focus-separator: var(--brand-surface);
  --primary-background: var(--card); --primary-foreground: var(--ink); --primary-border: var(--card);
  --secondary-background: transparent; --secondary-foreground: var(--brand-copy); --secondary-border: var(--brand-copy);
}
.surface-brand--soft {
  --brand-surface: var(--surface-soft);
  --brand-copy: var(--ink); --brand-copy-soft: var(--muted);
  --focus-color: var(--green); --focus-separator: var(--card);
  --primary-background: var(--green); --primary-foreground: var(--text-inverse); --primary-border: var(--green);
  --secondary-background: transparent; --secondary-foreground: var(--green); --secondary-border: var(--control-border);
  color: var(--brand-copy);
  background-color: var(--cream);
  background-image: radial-gradient(ellipse 50% 50% at 50% 50%,
      var(--brand-glow) 0% 12%,
      var(--brand-glow-soft) 45%,
      transparent 85%),
    linear-gradient(to bottom,
      var(--brand-surface) calc(100% - var(--brand-fade-depth)),
      var(--brand-fade-04) calc(100% - var(--brand-fade-depth) * .85),
      var(--brand-fade-16) calc(100% - var(--brand-fade-depth) * .70),
      var(--brand-fade-50) calc(100% - var(--brand-fade-depth) * .50),
      var(--brand-fade-84) calc(100% - var(--brand-fade-depth) * .30),
      var(--brand-fade-96) calc(100% - var(--brand-fade-depth) * .15),
      var(--cream) calc(100% - 1px), var(--cream) 100%);
  background-size: 100% calc(100% - var(--brand-fade-depth)), 100% 100%;
  background-position: center top, center;
  background-repeat: no-repeat;
}
.inverse-copy { color: var(--brand-copy); }
.inverse-copy :is(h1,h2,h3,h4,h5,h6,p,strong,small) { color: inherit; }
.inverse-copy :is(.eyebrow,.text-caption) { color: var(--brand-copy-soft); }
.surface-editorial {
  background: var(--media-surface); color: var(--ink);
  --focus-color: var(--green); --focus-separator: var(--card);
}
.surface-editorial :is(.eyebrow,.text-caption,.process-number) { color: var(--muted); }
.media-mat {
  position: relative; background: var(--media-surface); color: var(--ink);
  border-radius: var(--radius-xl);
  --focus-color: var(--green); --focus-separator: var(--card);
}
.media-caption {
  position: absolute; z-index: 1; inset-block-start: var(--space-6); inset-inline-start: var(--space-6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  max-width: calc(100% - 2 * var(--space-6)); margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0; overflow-wrap: normal;
}
.media-mat .media-caption, .media-caption .process-number { color: var(--ink); }
.paper-sheet {
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-xl); box-shadow: var(--shadow);
  --focus-color: var(--green); --focus-separator: var(--card);
}
.paper-sheet :is(p,li) { font-size: var(--text-body); line-height: var(--leading-body); }
.paper-sheet :is(.eyebrow,.text-caption) { font-size: var(--text-xs); line-height: var(--leading-caption); }
.process-number {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  line-height: var(--leading-caption); color: inherit;
  background: transparent; border: 0; border-radius: 0; padding: 0;
}

/* A nested work/media surface owns its context; actions never inherit the brand
   band's inverse treatment through an ivory result, form or photograph mat. */
.card, .panel, .result-card, .listing-card, .bundle-card, .auth-card, .settings-card,
.plan-card, .checkout-view, .messenger, .detail-card, .seller-card, .seo-guide,
.profile-card, .changelog-detail-card, .changelog-rollback-card, .architecture-card,
.studio, .feedback-card, .job-stack, .paper-sheet, .media-mat, .surface-editorial {
  --primary-background: var(--green); --primary-foreground: var(--text-inverse); --primary-border: var(--green);
  --secondary-background: var(--card); --secondary-foreground: var(--ink); --secondary-border: var(--control-border);
}
summary { min-height: var(--control-height); } .filter-toggle, .market-filter-disclosure { display: flex; align-items: center; }
.editable-result { min-height: var(--control-height); }
[hidden] { display: none !important; }
.admin-search-target { outline: 3px solid var(--green); outline-offset: 4px; }
@media (max-width: 600px) {
  .publish-panel, .listing-administration { padding: var(--space-4); }
}

/* Shared responsive tiles: galleries configure six columns, listings four. */
.responsive-tile-grid {
  --tile-columns: 4;
  --tile-min: 15rem;
  --tile-gap: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--tile-min), calc((100% - (var(--tile-columns) - 1) * var(--tile-gap)) / var(--tile-columns)))), 1fr));
  gap: var(--tile-gap);
  align-content: start;
}
.sortable-image-grid {
  --tile-columns: var(--image-columns, 6);
  --tile-min: max(6rem, calc(2 * var(--control-height) + 3 * var(--space-2)));
  --tile-gap: var(--space-2);
  --tile-max: 10rem;
  max-width: min(100%, calc(var(--tile-columns) * var(--tile-max) + (var(--tile-columns) - 1) * var(--tile-gap)));
}
.sortable-image-grid > .sortable-image-card { width: 100%; max-width: var(--tile-max); min-width: 0; padding: 0; }
.sortable-image-grid > .sortable-image-card:only-child .sortable-image-position { display: none; }
.sortable-image-drag-preview {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 var(--media-selection-border-width) var(--media-selection-color), var(--shadow);
  opacity: .9;
}

/* Shared model settings reuse the global select, action and status roles. */
.analysis-settings-stage { border: 0; }
.analysis-settings-stage legend { font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-caption); }
.analysis-settings-status { color: var(--muted); }
.analysis-settings-status.error { color: var(--status-error-text); }

/* Shared native-modal geometry: preserve the page; scroll only dialog content. */
html.modal-open, body.modal-open { overflow: hidden; overscroll-behavior: none; }
body.modal-open { position: fixed; right: 0; left: 0; width: 100%; }
dialog:modal { overscroll-behavior: contain; }

/* One single-line query surface serves the marketplace and admin navigation. */
.search-query-row { border: 1px solid var(--control-border); border-radius: var(--radius-xl); background: var(--card); }
.search-query-row .search-query-field > input { border: 0; border-radius: var(--radius-xl); background: transparent; padding-right: calc(2 * var(--control-height)); }
.search-query-row .search-submit { border: 0; border-radius: 0 var(--radius-xl) var(--radius-xl) 0; }
.search-query-row input:focus-visible { outline: none !important; box-shadow: none !important; }
.search-help-toggle { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); list-style: none; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; font-size: var(--text-body); font-weight: var(--weight-regular); }
.search-help-toggle::-webkit-details-marker { display: none; }
.search-help-toggle::after { content: ""; flex: 0 0 .5rem; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.search-hint[open] > .search-help-toggle::after { transform: rotate(225deg); }
.search-hint > p { margin: var(--space-2) 0 0; }

.search-query-row .search-clear { background: transparent; color: var(--ink); border: 0; border-radius: var(--radius-sm); }
.search-query-row input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Per-version usage uses the same caption and muted roles as all result audits. */
.result-input-audit { display: grid; gap: var(--space-1); margin: 0; text-align: left; }