:root {
  --ink: #15231d;
  --muted: #5f6e67;
  --surface: #ffffff;
  --canvas: #f4f7f5;
  --line: #d9e1dc;
  --brand: #136c4b;
  --brand-strong: #0b4f36;
  --brand-soft: #e5f3ec;
  --amber: #8b5700;
  --amber-soft: #fff4d7;
  --blue: #245c93;
  --blue-soft: #eaf2fb;
  --field: #ffffff;
  --field-border: #aebdb5;
  --topbar: rgba(255,255,255,.92);
  --notice-text: #3f5a4e;
  --brand-action: var(--brand-strong);
  --auth-glow: #e3f4eb;
  --shadow: 0 8px 30px rgba(21, 35, 29, .07);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  --ink: #edf5f1;
  --muted: #a9b8b0;
  --surface: #17241f;
  --canvas: #0f1714;
  --line: #34443c;
  --brand: #176d4b;
  --brand-strong: #7adbb0;
  --brand-soft: #203c31;
  --brand-action: #0e5a3d;
  --amber: #f1c46f;
  --amber-soft: #49391d;
  --blue: #90c4f4;
  --blue-soft: #1c344b;
  --field: #192722;
  --field-border: #51645a;
  --topbar: rgba(15,23,20,.94);
  --notice-text: #bdd8cc;
  --auth-glow: #1a3b2e;
  --shadow: 0 8px 30px rgba(0, 0, 0, .28);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --ink: #edf5f1;
    --muted: #a9b8b0;
    --surface: #17241f;
    --canvas: #0f1714;
    --line: #34443c;
    --brand: #176d4b;
    --brand-strong: #7adbb0;
    --brand-soft: #203c31;
    --brand-action: #0e5a3d;
    --amber: #f1c46f;
    --amber-soft: #49391d;
    --blue: #90c4f4;
    --blue-soft: #1c344b;
    --field: #192722;
    --field-border: #51645a;
    --topbar: rgba(15,23,20,.94);
    --notice-text: #bdd8cc;
    --auth-glow: #1a3b2e;
    --shadow: 0 8px 30px rgba(0, 0, 0, .28);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #f0a719; outline-offset: 3px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 20; background: var(--ink); color: white; padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.4rem 1rem; background: #10271e; color: #edf7f1; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: .7rem; padding: 0 .5rem 1.4rem; color: white; text-decoration: none; font-weight: 760; font-size: 1.13rem; letter-spacing: -.01em; }
.brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .65rem; color: #10271e; background: #b7ebcf; font-family: Georgia, serif; font-size: 1.25rem; }
.workspace-switcher { margin-bottom: 1.35rem; padding: .8rem; border: 1px solid #365046; border-radius: .8rem; background: #183429; }
.workspace-switcher label { display: block; margin-bottom: .4rem; color: #c9ddd2; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.workspace-switcher select { width: 100%; border: 0; border-radius: .45rem; padding: .55rem; color: #10271e; background: white; }
.workspace-switcher p { margin: .5rem 0 0; color: #afc8bb; font-size: .7rem; line-height: 1.35; }
.workspace-summary { display: grid; gap: .25rem; margin-bottom: 1.35rem; padding: .8rem; border: 1px solid #365046; border-radius: .8rem; background: #183429; }
.workspace-summary span { color: #a9c2b5; font-size: .67rem; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }
.workspace-summary strong { color: white; font-size: .86rem; }
.workspace-summary small { color: #b7cec2; font-size: .7rem; }
.nav-group { margin-bottom: 1rem; }
.nav-group h2 { margin: 0 .6rem .35rem; color: #86a697; font-size: .67rem; text-transform: uppercase; letter-spacing: .12em; }
.nav-link { width: 100%; display: flex; align-items: center; gap: .7rem; margin: .12rem 0; padding: .68rem .75rem; border: 0; border-radius: .55rem; color: #d8e8df; background: transparent; text-align: left; cursor: pointer; }
.nav-link:hover { background: #1b3b2e; }
.nav-link[aria-current="page"] { color: white; background: #28523f; font-weight: 700; }
.nav-icon { width: 1.35rem; color: #a6c7b6; text-align: center; font-size: .72rem; font-weight: 800; }
.sidebar-footer { margin-top: auto; border-top: 1px solid #365046; padding-top: 1rem; }
.quiet-button { width: 100%; border: 0; padding: .6rem; color: #d8e8df; background: transparent; text-align: left; cursor: pointer; }
.quiet-link { display: block; padding: .6rem; color: #d8e8df; font-size: .8rem; text-decoration: none; }
.identity { display: flex; align-items: center; gap: .7rem; margin-top: .7rem; padding: .6rem; }
.avatar { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: 0 0 auto; border-radius: 50%; color: #10271e; background: #b7ebcf; font-size: .7rem; font-weight: 800; }
.identity strong, .identity small { display: block; }
.identity strong { font-size: .8rem; }
.identity small { margin-top: .1rem; color: #9fb9ac; font-size: .7rem; }
main { min-width: 0; }
.topbar { min-height: 92px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem clamp(1.25rem, 4vw, 3.2rem); border-bottom: 1px solid var(--line); background: var(--topbar); }
.eyebrow { margin: 0 0 .28rem; color: var(--muted); font-size: .71rem; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.65rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.025em; }
h2 { margin: 0; font-size: 1.12rem; letter-spacing: -.01em; }
.topbar-actions { display: flex; align-items: center; gap: .65rem; }
.theme-control { display: inline-flex; align-items: center; gap: .18rem; padding: .22rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface); }
.theme-control button { border: 0; border-radius: .45rem; padding: .42rem .58rem; color: var(--muted); background: transparent; font: inherit; font-size: .7rem; font-weight: 740; cursor: pointer; }
.theme-control button[aria-pressed="true"] { color: white; background: var(--brand-action); }
.release-reference { padding: .42rem .62rem; border: 1px solid var(--line); border-radius: 2rem; color: var(--muted); background: var(--surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; font-weight: 740; text-decoration: none; white-space: nowrap; }
.release-reference:hover { color: var(--brand-strong); border-color: var(--brand); }
.primary-button, .secondary-button, .text-button, .icon-button { border-radius: .6rem; cursor: pointer; }
.primary-button { border: 1px solid var(--brand-strong); padding: .68rem .95rem; color: white; background: var(--brand); font-weight: 720; }
.primary-button:hover { background: var(--brand-action); }
.icon-button { position: relative; width: 2.55rem; height: 2.55rem; border: 1px solid var(--line); color: var(--muted); background: var(--surface); }
.notification-count { position: absolute; right: -.25rem; top: -.35rem; min-width: 1.25rem; padding: .15rem .3rem; border: 2px solid white; border-radius: 1rem; color: white; background: #a33a2c; font-size: .65rem; font-weight: 800; }
.content { max-width: 1240px; margin: 0 auto; padding: 2rem clamp(1.25rem, 4vw, 3.2rem) 4rem; }
.notice { display: flex; gap: .85rem; margin-bottom: 2rem; padding: 1rem 1.15rem; border: 1px solid #b8daca; border-radius: .8rem; background: var(--brand-soft); }
.notice h2 { font-size: .92rem; }
.notice p { margin: .25rem 0 0; color: var(--notice-text); font-size: .85rem; line-height: 1.5; }
.notice-icon { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; flex: 0 0 auto; border-radius: 50%; color: white; background: var(--brand); font-weight: 800; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: .9rem; }
.section-heading > div > p:last-child { margin: .35rem 0 0; color: var(--muted); font-size: .82rem; }
.status-pill { display: inline-flex; width: max-content; padding: .3rem .55rem; border-radius: 2rem; color: var(--blue); background: var(--blue-soft); font-size: .68rem; font-weight: 750; }
.status-pill.ready { color: var(--brand-strong); background: var(--brand-soft); }
.text-button { border: 0; color: var(--brand-strong); background: transparent; font-weight: 720; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.card { min-height: 185px; display: flex; flex-direction: column; padding: 1.15rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); box-shadow: var(--shadow); }
.card-top { display: flex; justify-content: space-between; align-items: start; gap: .75rem; }
.status { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .5rem; border-radius: 2rem; color: var(--amber); background: var(--amber-soft); font-size: .68rem; font-weight: 750; }
.status::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.status.info { color: var(--blue); background: var(--blue-soft); }
.card h3 { margin: 1rem 0 .35rem; font-size: .98rem; }
.card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.card-footer { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto; padding-top: 1rem; }
.card-meta { color: var(--muted); font-size: .72rem; }
.secondary-button { border: 1px solid var(--field-border); padding: .46rem .7rem; color: var(--ink); background: var(--field); font-size: .76rem; font-weight: 700; }
.activity-section { margin-top: 2.1rem; }
.activity-list { border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.activity-item { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .8rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.activity-item:last-child { border-bottom: 0; }
.activity-symbol { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; color: var(--brand-strong); background: var(--brand-soft); font-size: .72rem; font-weight: 800; }
.activity-item strong { display: block; font-size: .84rem; }
.activity-item p, .activity-item time { margin: .2rem 0 0; color: var(--muted); font-size: .74rem; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.metric-grid article { padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); }
.metric-grid strong, .metric-grid span { display: block; }
.metric-grid strong { font-family: Georgia, serif; font-size: 1.7rem; }
.metric-grid span { margin-top: .25rem; color: var(--muted); font-size: .78rem; }
.data-card { margin-top: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.data-card-header, .data-row { display: grid; align-items: center; gap: .8rem; padding: .9rem 1rem; }
.data-card-header { grid-template-columns: 1fr auto; border-bottom: 1px solid var(--line); }
.data-card-header h3 { margin: 0; font-size: .92rem; }
.data-card-header > span { color: var(--muted); font-size: .72rem; }
.data-row { grid-template-columns: 2.2rem minmax(150px, 1fr) minmax(110px, .6fr) auto; border-bottom: 1px solid var(--line); }
.data-row:last-child { border-bottom: 0; }
.data-row strong, .data-row small { display: block; }
.data-row strong { font-size: .8rem; }
.data-row small { margin-top: .2rem; color: var(--muted); font-size: .7rem; }
.empty-state { padding: 2rem; border: 1px dashed var(--field-border); border-radius: .9rem; background: var(--surface); text-align: center; }
.empty-state p { color: var(--muted); }
.two-column { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1rem; }
.two-column .data-card { margin-top: 0; }
.split-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.split-layout .data-card { min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 1rem; }
.form-grid .data-card-header { grid-column: 1 / -1; }
.form-grid > label { min-width: 0; display: grid; gap: .4rem; padding: 1rem 1rem 0; color: var(--muted); font-size: .76rem; font-weight: 700; }
.form-grid .data-card-header, .form-grid .data-list { min-width: 0; }
.form-grid input:not([type="checkbox"]):not([type="radio"]), .form-grid select, .form-grid textarea { width: 100%; min-width: 0; padding: .7rem; border: 1px solid var(--field-border); border-radius: .55rem; color: var(--ink); background: var(--field); }
.form-grid .full-width { grid-column: 1 / -1; }
.form-grid .check-row { grid-template-columns: auto 1fr; align-items: start; color: var(--ink); font-weight: 500; line-height: 1.45; }
.form-grid .check-row input { margin-top: .16rem; }
.form-grid .dialog-note { margin: 1rem 1rem 0; }
.form-grid .form-message { padding: 0 1rem; }
.form-grid .form-actions { gap: .65rem; padding-top: .5rem; }
.form-card { padding-bottom: 1rem; }
.form-card > label { display: grid; gap: .4rem; padding: 1rem; color: var(--muted); font-size: .76rem; font-weight: 700; }
.form-card input { width: 100%; padding: .7rem; border: 1px solid var(--field-border); border-radius: .55rem; color: var(--ink); background: var(--field); }
.form-actions { display: flex; justify-content: flex-end; padding: 0 1rem; }
.form-message { min-height: 1.2rem; margin: .2rem 0 0; color: #8d2f25; font-size: .76rem; line-height: 1.45; }
.form-card .form-message { padding: 0 1rem; }
.profile-card { padding-bottom: 1rem; }
.profile-card > fieldset { min-width: 0; margin: 0; padding: 1rem; border: 0; }
.profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
#profile-proposal-baseline { min-width: 0; margin: 0; padding: 0; border: 0; }
.dynamic-fields { display: contents; }
.contact-field { display: grid; gap: .35rem; align-content: start; }
.contact-field label { min-width: 0; }
.contact-verification-state { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.8rem; color: var(--muted); font-size: .7rem; }
.contact-verification-state button { padding: .35rem .55rem; font-size: .7rem; }
.profile-grid label, .profile-description { display: grid; gap: .4rem; color: var(--muted); font-size: .76rem; font-weight: 700; }
.profile-grid input, .profile-grid select, .profile-description textarea { width: 100%; padding: .7rem; border: 1px solid var(--field-border); border-radius: .55rem; color: var(--ink); background: var(--field); }
.profile-grid input[type="color"] { min-height: 2.65rem; padding: .25rem; }
.language-fieldset { margin: 1rem 0; padding: .8rem; border: 1px solid var(--line); border-radius: .65rem; }
.language-fieldset legend { padding: 0 .3rem; color: var(--muted); font-size: .76rem; font-weight: 700; }
.field-help { margin: .7rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.checkbox-list { display: flex; flex-wrap: wrap; gap: .7rem 1rem; }
.checkbox-option { display: flex; align-items: center; gap: .4rem; color: var(--ink); font-size: .76rem; }
.checkbox-option input { width: auto; }
.profile-support-grid { margin-top: 1rem; }
.profile-support-grid .data-card { min-width: 0; }
.provider-row, .schedule-row { grid-template-columns: 2.2rem minmax(150px, 1fr) auto; }
.hours-periods { display: grid; gap: .6rem; }
.hours-period { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: .5rem; align-items: center; }
.hours-period input, .hours-period select { min-width: 0; }
.data-list .data-row { min-height: 66px; }
.platform-customer-list { display: grid; gap: 1rem; }
.platform-customer-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow); }
.platform-customer-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.platform-customer-heading h3 { margin: .2rem 0; }
.platform-customer-heading small { color: var(--muted); }
.platform-customer-details { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 1rem 0; }
.platform-customer-details dt { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.platform-customer-details dd { margin: 0; overflow-wrap: anywhere; }
.platform-customer-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.compact-row { grid-template-columns: 2.2rem 1fr; }
.capability-row { grid-template-columns: minmax(0, 1fr) auto; }
.design-brief-list { display: grid; gap: 1rem; margin-top: 1rem; }
.design-module-group { display: grid; gap: .55rem; }
.design-module-group h4 { margin: .25rem 0; color: var(--ink); }
.design-module { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: start; padding: .8rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); }
.design-module input { margin-top: .25rem; }
.design-module-copy { display: grid; gap: .2rem; }
.design-module-copy small { color: var(--muted); }
.design-module-copy input[type="url"], .design-module-meta select { min-width: 0; padding: .55rem; border: 1px solid var(--field-border); border-radius: .5rem; color: var(--ink); background: var(--field); }
.design-module-meta { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: end; }
.site-design-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.design-summary-card { padding: .8rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--canvas); }
.design-summary-card strong { display: block; margin-bottom: .4rem; }
.theme-swatches { display: flex; gap: .35rem; margin: .45rem 0; }
.theme-swatch { width: 2rem; height: 2rem; border: 1px solid #6c7972; border-radius: .45rem; }
.site-design-pages { display: grid; gap: .7rem; }
.design-page { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(130px, 1fr) minmax(130px, .8fr) auto; gap: .7rem; align-items: end; padding: .8rem; border: 1px solid var(--line); border-radius: .8rem; }
.design-page label { display: grid; gap: .3rem; color: var(--muted); font-size: .72rem; font-weight: 700; }
.design-page input, .design-page select { min-width: 0; padding: .65rem; border: 1px solid var(--field-border); border-radius: .55rem; color: var(--ink); background: var(--field); }
.design-page-modules { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem; }
.release-addresses { display: grid; gap: .45rem; margin: 1rem 0; }
.release-addresses a { overflow-wrap: anywhere; }
.release-stages { display: grid; margin: 1rem 0 1.25rem; border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; }
.release-stage-row { display: grid; grid-template-columns: minmax(9rem, .7fr) minmax(16rem, 1.6fr) minmax(14rem, 1.4fr); gap: 1rem; align-items: start; padding: .85rem 1rem; background: var(--surface); }
.release-stage-row + .release-stage-row { border-top: 1px solid var(--line); }
.release-stage-row code { white-space: normal; overflow-wrap: anywhere; color: var(--ink); }
.release-stage-row span { color: var(--muted); }
.release-lists { margin: 1rem 0; }
.release-lists h4 { margin: 0 0 .55rem; }
.source-connection-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.source-connection-form label { display: grid; gap: .35rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.source-connection-form input, .source-connection-form select { min-width: 0; padding: .7rem; border: 1px solid var(--field-border); border-radius: .55rem; color: var(--ink); background: var(--field); }
#source-scopes { grid-column: 1 / -1; margin: 0; padding: .8rem; border: 1px solid var(--line); border-radius: .65rem; }
#source-scopes legend { padding: 0 .3rem; color: var(--muted); font-size: .76rem; font-weight: 700; }
.source-connection-form .form-message, .source-connection-form .form-actions { grid-column: 1 / -1; }
.source-scope-copy { display: grid; gap: .1rem; }
.source-scope-copy small { color: var(--muted); font-weight: 500; }
.connection-scopes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
#ingestion-terms-label { display: grid; gap: .35rem; max-width: 34rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
#ingestion-terms { width: 100%; max-width: 100%; padding: .7rem; border: 1px solid var(--field-border); border-radius: .55rem; color: var(--ink); background: var(--field); }
.onboarding-fact { grid-template-columns: minmax(180px, 1fr) auto; align-items: start; }
.fact-value { display: block; margin-top: .35rem; white-space: pre-wrap; color: var(--ink); font-size: .8rem; line-height: 1.45; }
.row-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.domain-readiness { padding: 1rem; border-bottom: 1px solid var(--line); }
.domain-readiness:last-child { border-bottom: 0; }
.domain-readiness > strong { font-size: .84rem; }
.readiness-line { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .65rem; color: var(--muted); font-size: .76rem; }
.member-row, .invitation-row { grid-template-columns: 2.2rem minmax(150px, 1fr) minmax(160px, 1fr) auto; }
.audit-row { grid-template-columns: 2.2rem minmax(160px, 1fr) minmax(130px, auto); }
.audit-row code { color: var(--muted); font-size: .68rem; overflow-wrap: anywhere; }
.grant-list, .grant-line { display: grid; gap: .3rem; }
.grant-line { grid-template-columns: 1fr auto; align-items: center; color: var(--muted); font-size: .74rem; }
.danger { color: #8d2f25; }
.empty-row { margin: 0; padding: 1.2rem; color: var(--muted); font-size: .8rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: .55rem; padding: 1rem; }
.chip { padding: .42rem .65rem; border-radius: 2rem; color: var(--brand-strong); background: var(--brand-soft); font-size: .73rem; font-weight: 700; }
.auth-layout { min-height: 100vh; display: grid; place-items: center; padding: 1.2rem; background: radial-gradient(circle at 20% 15%, var(--auth-glow), transparent 32%), var(--canvas); }
.auth-panel { width: min(100%, 520px); padding: clamp(1.5rem, 5vw, 2.5rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow); }
.auth-preferences { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.auth-brand { width: max-content; padding: 0 0 2rem; color: var(--brand-strong); }
.auth-copy { margin: 1rem 0 1.4rem; color: var(--muted); line-height: 1.6; }
.auth-panel form, .auth-panel label { display: grid; gap: .55rem; }
.auth-panel form { gap: 1rem; }
.auth-panel label { color: var(--ink); font-size: .78rem; font-weight: 720; }
.auth-panel input { width: 100%; padding: .78rem; border: 1px solid var(--field-border); border-radius: .55rem; color: var(--ink); background: var(--field); }
.auth-actions { display: grid; gap: .7rem; }
.google-login-button { width: 100%; padding: .72rem 1rem; border: 1px solid var(--field-border); border-radius: .55rem; color: var(--ink); background: var(--field); font: inherit; font-weight: 650; cursor: pointer; }
.google-login-button:hover { background: var(--canvas); }
.google-login-button:focus-visible { outline: 3px solid #8ab4f8; outline-offset: 2px; }
.auth-handoff { margin: .8rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.growth-loop { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.opportunity-list { display: grid; gap: 1rem; }
.opportunity-card { padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); }
.opportunity-card h4 { margin: .25rem 0 .45rem; font-size: 1rem; }
.opportunity-card p { margin: .3rem 0; color: var(--muted); line-height: 1.5; }
.opportunity-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.opportunity-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; }
.security-note { margin: 1.5rem 0 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
dialog { width: min(92vw, 480px); padding: 0; border: 0; border-radius: 1rem; color: var(--ink); background: var(--surface); box-shadow: 0 24px 80px rgba(0,0,0,.25); }
#hours-dialog { width: min(94vw, 680px); }
dialog::backdrop { background: rgba(6, 20, 14, .55); }
dialog form { display: grid; gap: 1rem; padding: 1.3rem; }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
dialog label { display: grid; gap: .4rem; font-size: .78rem; font-weight: 700; }
dialog input, dialog select { width: 100%; padding: .7rem; border: 1px solid var(--field-border); border-radius: .55rem; color: var(--ink); background: var(--field); }
.dialog-note { margin: 0; padding: .8rem; border-radius: .6rem; color: var(--notice-text); background: var(--brand-soft); font-size: .76rem; line-height: 1.45; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .7rem; }
.toast { position: fixed; right: 1.2rem; bottom: 1.2rem; max-width: 320px; padding: .8rem 1rem; border-radius: .65rem; color: white; background: var(--ink); box-shadow: var(--shadow); opacity: 0; transform: translateY(1rem); transition: .2s ease; pointer-events: none; }
.toast.visible { opacity: 1; transform: none; }
.event-calendar { display: grid; gap: .75rem; padding: 1rem; }
.event-card { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); }
.event-card.cancelled { opacity: .76; background: var(--canvas); }
.event-header-actions, .event-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.event-actions { grid-column: 2 / -1; padding-top: .15rem; }
.event-actions button { padding: .45rem .65rem; }
.event-dialog { width: min(94vw, 680px); }
.event-dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.danger-button { background: #9f2f25; }
.event-date { display: grid; gap: .2rem; padding: .65rem; text-align: center; border-radius: .65rem; color: var(--brand-strong); background: var(--brand-soft); }
.event-date strong { font-size: .95rem; }
.event-date span, .event-kind, .event-copy p, .event-capacity small { color: var(--muted); font-size: .72rem; }
.event-copy { min-width: 0; }
.event-copy h4 { margin: .2rem 0; font-size: 1rem; }
.event-copy p { margin: 0; }
.event-kind { font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.event-capacity { display: grid; gap: .35rem; justify-items: end; text-align: right; }
.event-registration-summary { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.event-registration { display: grid; gap: .1rem; padding: .45rem .6rem; border-radius: .55rem; background: var(--canvas); }
.event-registration small { color: var(--muted); }
.workflow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 1rem; list-style: none; counter-reset: event-step; }
.workflow-steps li { display: grid; gap: .35rem; padding: .85rem; border: 1px solid var(--line); border-radius: .7rem; counter-increment: event-step; }
.workflow-steps li::before { content: counter(event-step); display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; color: white; background: var(--brand-action); font-weight: 800; }
.workflow-steps span { color: var(--muted); font-size: .75rem; line-height: 1.45; }
.feedback-launch { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 20; display: flex; align-items: center; gap: .45rem; padding: .7rem .9rem; border: 0; border-radius: 2rem; color: white; background: var(--brand-action); box-shadow: var(--shadow); font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; }
.feedback-dialog { width: min(94vw, 560px); }
.feedback-type-picker { padding: 0; border: 0; }
.feedback-type-picker > div { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.feedback-type-picker legend { margin-bottom: .55rem; font-size: .78rem; font-weight: 750; }
.feedback-type-picker label { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .8rem; border: 1px solid var(--line); border-radius: .7rem; cursor: pointer; }
.feedback-type-picker label:has(input:checked) { border-color: var(--brand-strong); background: var(--brand-soft); }
.feedback-type-picker input { width: auto; }
.feedback-context { margin: 0; color: var(--muted); font-size: .72rem; }
.feedback-list { display: grid; }
.feedback-row { display: grid; gap: .65rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.feedback-row:last-child { border-bottom: 0; }
.feedback-row-header, .feedback-meta { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.feedback-row-header > div { display: grid; gap: .2rem; }
.feedback-row-header span, .feedback-meta { color: var(--muted); font-size: .72rem; }
.feedback-copy, .feedback-response { margin: 0; line-height: 1.55; }
.feedback-response { padding: .65rem; border-left: 3px solid var(--brand-strong); background: var(--brand-soft); font-size: .78rem; }
.feedback-timeline { display: grid; gap: .55rem; margin: .1rem 0 0; padding: .8rem 0 0 1rem; border-left: 2px solid var(--line); }
.feedback-timeline li { display: grid; grid-template-columns: minmax(100px, auto) 1fr auto; gap: .7rem; align-items: start; font-size: .75rem; }
.feedback-timeline li span { color: var(--muted); }
.feedback-update-state { margin: 0; color: var(--muted); font-size: .7rem; }
.feedback-update-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.feedback-consent { grid-template-columns: auto 1fr !important; align-items: start; }
.feedback-consent input { width: auto; margin-top: .15rem; }
.compact-metrics { margin: 1rem 0; }
.assessment-sources { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.assessment-source { border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; padding: .4rem .65rem; text-decoration: none; }
.assessment-source:hover { border-color: var(--brand-strong); color: var(--brand-strong); }
.assessment-findings { display: grid; gap: .85rem; }
.assessment-finding { border: 1px solid var(--line); border-radius: .8rem; padding: 1rem; }
.assessment-finding-heading, .assessment-finding-footer { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.assessment-finding-heading div { display: grid; gap: .25rem; }
.assessment-finding-heading small, .assessment-evidence { color: var(--muted); }
.assessment-finding p { margin: .75rem 0 0; }
.assessment-recommendation { font-weight: 650; }
.assessment-evidence { display: block; margin-top: .65rem; overflow-wrap: anywhere; }
.assessment-finding-footer { align-items: center; border-top: 1px solid var(--line); margin-top: .9rem; padding-top: .8rem; }
.assessment-review-form { align-items: center; display: flex; flex: 1; gap: .5rem; justify-content: flex-end; }
.assessment-review-form select { max-width: 13rem; }
.assessment-review-form input { max-width: 22rem; }
.severity-critical { background: #fee2e2; color: #991b1b; }
.severity-important { background: #ffedd5; color: #9a3412; }
.severity-improvement { background: #e0f2fe; color: #075985; }
.quality-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quality-metrics strong { text-transform: capitalize; }
.quality-columns { margin: 1rem 0; }
.quality-locales { display: grid; gap: .9rem; margin: 0; padding: 1rem; list-style: none; }
.quality-locale { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1.6fr); gap: 1rem; align-items: center; }
.quality-locale strong, .quality-locale small { display: block; }
.quality-locale small { margin-top: .2rem; color: var(--muted); font-size: .72rem; }
.quality-locale progress { width: 100%; accent-color: var(--brand); }
.quality-runs { display: grid; }
.quality-run { display: grid; grid-template-columns: minmax(12rem, 1fr) auto auto auto; gap: 1rem; align-items: center; padding: 1rem; border-bottom: 1px solid var(--line); }
.quality-run:last-child, .quality-blocked-item:last-child { border-bottom: 0; }
.quality-run strong, .quality-run small { display: block; }
.quality-run small, .quality-run time, .quality-result-counts { color: var(--muted); font-size: .72rem; }
.quality-blocked-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1rem; border-bottom: 1px solid var(--line); }
.quality-blocked-item p { margin: .3rem 0; font-size: .78rem; }
.quality-blocked-item small { color: var(--muted); }
.status-pill.attention { color: var(--amber); background: var(--amber-soft); }
.status-pill.danger { color: #8d2f25; background: #fde8e5; }
.admin-metrics { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.admin-tabs { display: flex; gap: .35rem; margin: 1rem 0; padding: .3rem; width: max-content; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); }
.admin-tabs button { padding: .6rem .85rem; border: 0; border-radius: .5rem; color: var(--muted); background: transparent; font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; white-space: nowrap; }
.admin-tabs button[aria-selected="true"] { color: white; background: var(--brand-action); }
.admin-role-row, .admin-principal-row { display: grid; gap: .7rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.admin-role-row:last-child, .admin-principal-row:last-child { border-bottom: 0; }
.admin-role-row strong, .admin-role-row small, .admin-principal-heading strong, .admin-principal-heading small, .admin-grant-row strong, .admin-grant-row small { display: block; }
.admin-role-row small, .admin-principal-heading small, .admin-grant-row small { margin-top: .2rem; color: var(--muted); font-size: .7rem; }
.admin-permission-list { margin: 0; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; line-height: 1.55; }
.admin-principal-heading, .admin-grant-row { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.admin-grant-list { display: grid; gap: .55rem; }
.admin-grant-row { padding: .7rem; border-radius: .6rem; background: var(--canvas); }
.admin-revoke summary { color: #8d2f25; cursor: pointer; font-size: .72rem; font-weight: 750; }
.admin-revoke-form { display: grid; gap: .5rem; margin-top: .5rem; min-width: min(20rem, 60vw); }
.admin-revoke-form label { display: grid; gap: .25rem; color: var(--muted); font-size: .7rem; }
.admin-revoke-form input, .admin-triage-form input, .admin-triage-form select, .compact-field select { width: 100%; padding: .55rem; border: 1px solid var(--field-border); border-radius: .5rem; color: var(--ink); background: var(--field); }
.admin-feedback-row { background: var(--surface); }
.admin-triage-form { display: grid; grid-template-columns: minmax(8rem, .65fr) minmax(10rem, 1fr) minmax(12rem, 1.6fr) auto; gap: .65rem; align-items: end; padding-top: .7rem; border-top: 1px solid var(--line); }
.admin-triage-form label, .compact-field { display: grid; gap: .3rem; color: var(--muted); font-size: .7rem; font-weight: 700; }
.compact-field { min-width: 11rem; }
.infrastructure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; padding: 1rem; }
.infrastructure-card { display: grid; gap: .7rem; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); }
.infrastructure-card-heading { display: flex; align-items: start; justify-content: space-between; gap: .8rem; }
.infrastructure-card-heading strong, .infrastructure-card-heading small { display: block; }
.infrastructure-card-heading small { margin-top: .2rem; color: var(--muted); font-size: .7rem; }
.infrastructure-card p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.infrastructure-evidence { display: grid; grid-template-columns: auto 1fr; gap: .3rem .7rem; margin: 0; font-size: .7rem; }
.infrastructure-evidence dt { color: var(--muted); }
.infrastructure-evidence dd { margin: 0; overflow-wrap: anywhere; }
.admin-build-queue-card { margin-bottom: 1rem; }
.admin-build-queue, .admin-module-list { display: grid; }
.admin-build-queue-row { display: grid; grid-template-columns: 3.2rem minmax(11rem, .8fr) minmax(14rem, 1.6fr) auto; gap: .8rem; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.admin-build-queue-row:last-child { border-bottom: 0; }
.admin-build-position { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: white; background: var(--brand-action); font-size: .72rem; font-weight: 800; }
.admin-build-queue-row strong, .admin-build-queue-row small { display: block; }
.admin-build-queue-row small { margin-top: .2rem; color: var(--muted); font-size: .7rem; }
.admin-catalog-filters { display: flex; gap: .6rem; flex-wrap: wrap; }
.admin-module-card { border-bottom: 1px solid var(--line); }
.admin-module-card:last-child { border-bottom: 0; }
.admin-module-card > summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; cursor: pointer; list-style: none; }
.admin-module-card > summary::-webkit-details-marker { display: none; }
.admin-module-card > summary strong, .admin-module-card > summary small { display: block; }
.admin-module-card > summary small { margin-top: .2rem; color: var(--muted); font-size: .72rem; }
.admin-module-counts { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.admin-capability-list { display: grid; padding: 0 1rem 1rem; }
.admin-capability-row { display: grid; grid-template-columns: minmax(12rem, .8fr) minmax(16rem, 1.6fr) auto; gap: 1rem; align-items: start; padding: .8rem; border-radius: .6rem; background: var(--canvas); }
.admin-capability-row + .admin-capability-row { margin-top: .45rem; }
.admin-capability-row strong, .admin-capability-row small { display: block; }
.admin-capability-row small { margin-top: .25rem; color: var(--muted); font-size: .68rem; overflow-wrap: anywhere; }
.admin-capability-row p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .card-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr; }
  .quality-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .infrastructure-grid { grid-template-columns: 1fr; }
  .admin-build-queue-row, .admin-capability-row { grid-template-columns: 1fr; }
  .admin-build-position { width: max-content; height: auto; padding: .3rem .55rem; border-radius: 1rem; }
  .admin-triage-form { grid-template-columns: 1fr 1fr; }
  .two-column { grid-template-columns: 1fr; }
  .split-layout { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-design-summary { grid-template-columns: 1fr; }
  .design-page { grid-template-columns: 1fr 1fr; }
  .source-connection-form { grid-template-columns: 1fr; }
  .source-connection-form > *, #source-scopes { grid-column: 1; }
  .release-stage-row { grid-template-columns: 1fr; gap: .35rem; }
  .workflow-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: 1rem; }
  .brand { padding-bottom: .8rem; }
  .workspace-switcher { margin-bottom: .7rem; }
  #navigation { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem; }
  .nav-group { display: contents; }
  .nav-group h2, .sidebar-footer { display: none; }
  .nav-link { width: auto; flex: 0 0 auto; border: 1px solid #365046; }
  .topbar { min-height: auto; align-items: flex-start; flex-wrap: wrap; }
  .content { padding: 1rem .75rem 3rem; }
  .section-heading { flex-direction: column; align-items: flex-start; }
  .data-card-header { grid-template-columns: 1fr; align-items: start; }
  .topbar-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .theme-control button { padding: .38rem .5rem; }
  .primary-button { max-width: 9rem; }
  .activity-item { grid-template-columns: 2.2rem 1fr; }
  .activity-item time { grid-column: 2; }
  .data-row { grid-template-columns: 2.2rem 1fr; }
  .data-row > :nth-child(n+3) { grid-column: 2; }
  .onboarding-fact { grid-template-columns: minmax(0, 1fr); }
  .onboarding-fact > * { min-width: 0; grid-column: 1 !important; }
  .profile-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hours-period { grid-template-columns: 1fr 1fr; }
  .design-page { grid-template-columns: 1fr; }
  .design-page-modules { grid-column: 1; }
  .design-module { grid-template-columns: auto minmax(0, 1fr); }
  .design-module-meta { grid-column: 2; justify-content: flex-start; }
  .event-card { grid-template-columns: 4.8rem 1fr; }
  .event-capacity, .event-registration-summary { grid-column: 2; justify-items: start; text-align: left; }
  .event-header-actions { justify-content: flex-start; }
  .event-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .event-dialog-grid { grid-template-columns: 1fr; }
  .workflow-steps { grid-template-columns: 1fr; }
  .feedback-launch span:last-child { display: none; }
  .feedback-row-header, .feedback-meta { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .feedback-update-grid { grid-template-columns: 1fr; }
  .feedback-timeline li { grid-template-columns: 1fr; gap: .2rem; }
  .assessment-finding-heading, .assessment-finding-footer, .assessment-review-form { align-items: stretch; flex-direction: column; }
  .assessment-review-form select, .assessment-review-form input { max-width: none; width: 100%; }
  .quality-run { grid-template-columns: 1fr; gap: .35rem; }
  .quality-locale { grid-template-columns: 1fr; gap: .4rem; }
  .admin-triage-form { grid-template-columns: 1fr; }
  .admin-principal-heading, .admin-grant-row { align-items: stretch; flex-direction: column; }
  .admin-revoke-form { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Creative Studio */
.creative-intro { padding: 30px 34px; border: 1px solid #dedfd4; border-radius: 18px; background: #f4f2e8; color: #203d35; margin-bottom: 18px; }
.creative-intro > div { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #775236; }
.creative-intro h2 { font-family: Georgia, serif; font-size: clamp(28px, 3vw, 43px); font-weight: 400; letter-spacing: -.035em; margin: 12px 0; }
.creative-intro p { margin: 0; max-width: 590px; line-height: 1.6; }
.creative-message:empty { display: none; }
.creative-message { background: #f0f5f1; padding: 14px 18px; border-left: 3px solid #315e4f; line-height: 1.5; }
.creative-section-heading, .creative-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 22px 0 16px; }
.creative-section-heading h3, .creative-toolbar h3 { margin: 0 auto 0 0; font-size: 17px; }
.creative-kind-tabs, .creative-side-tabs { display: flex; gap: 6px; }
.creative-kind-tabs button[aria-pressed="true"], .creative-side-tabs button[aria-pressed="true"] { background: #294a3d; color: white; border-color: #294a3d; }
.creative-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.creative-template { border: 1px solid #dde3dc; border-radius: 14px; overflow: hidden; background: white; padding: 12px 12px 16px; min-width: 0; }
.creative-template h4 { font-size: 16px; margin: 16px 6px 8px; }
.creative-template p { color: #526057; font-size: 13px; line-height: 1.5; min-height: 40px; margin: 0 6px 14px; }
.creative-template > button { margin: 0 6px; }
.creative-template-art { height: 185px; padding: 28px 22px; background: #e8eae4; border-radius: 7px; display: grid; place-items: center; }
.creative-template-art svg { width: 100%; height: auto; max-height: 150px; filter: drop-shadow(0 5px 6px #1f352e20); }
.creative-template-art.poster { padding: 14px; height: 245px; }
.creative-template-art.poster svg { height: 215px; max-height: 215px; width: auto; max-width: 100%; }
.creative-saved { margin: 28px 0; }
.creative-saved-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border-bottom: 1px solid #e0e5df; padding: 14px 0; }
.creative-open { background: none; border: none; padding: 8px 0; color: #244c3c; font: inherit; font-weight: 700; text-align: left; margin-right: auto; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.creative-editor { border-top: 1px solid #dce2da; padding-top: 12px; scroll-margin-top: 20px; }
.creative-save-status { color: #536257; font-size: 12px; }
.creative-workbench { display: grid; grid-template-columns: minmax(240px, 310px) minmax(0, 1fr); background: white; border: 1px solid #dce2da; border-radius: 14px; overflow: hidden; }
.creative-controls { padding: 22px; display: flex; flex-direction: column; gap: 15px; border-right: 1px solid #dce2da; }
.creative-field { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: #344a3b; font-weight: 650; min-width: 0; }
.creative-field input, .creative-field textarea, .creative-field select { width: 100%; min-width: 0; border: 1px solid #a3b2a4; border-radius: 6px; background: #fff; color: #203729; padding: 10px; font: inherit; font-size: 14px; }
.creative-field textarea { resize: vertical; line-height: 1.5; }
.creative-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.creative-colors input { min-height: 42px; padding: 4px; cursor: pointer; }
.creative-stage { padding: 24px; background: #ebeee8; display: flex; flex-direction: column; align-items: center; gap: 20px; min-width: 0; }
.creative-canvas { width: 100%; min-height: 260px; display: grid; align-content: center; padding: 30px 0; }
.creative-canvas svg { width: 100%; height: auto; max-height: 560px; filter: drop-shadow(0 10px 15px #26342b24); }
.creative-canvas.poster svg { height: 560px; width: 100%; }
.creative-guide-note { font-size: 12px; color: #536257; text-align: center; max-width: 380px; line-height: 1.5; margin: 0; }
.creative-checks { width: 100%; padding: 18px; border: 1px solid #cbd5c9; border-radius: 9px; background: #f8faf6; font-size: 13px; line-height: 1.5; }
.creative-checks small { display: block; color: #536257; margin-top: 8px; }
.creative-review { margin-top: 20px; padding: 24px; background: white; border: 1px solid #dce2da; border-radius: 14px; }
.creative-review h3 { margin-top: 0; }
.creative-review > p { font-size: 14px; color: #526057; line-height: 1.5; }
.creative-confirmation { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 18px 0; }
.creative-confirmation input { width: 18px; height: 18px; flex-shrink: 0; }
.creative-review-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.creative-review > small { display: block; line-height: 1.5; color: #526057; }
#creative-view button { min-height: 44px; }
#creative-view button:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 1000px) { .creative-template-grid { gap: 10px; } .creative-template-art { padding: 15px; } .creative-workbench { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); } .creative-stage { padding: 18px; } }
@media (max-width: 700px) { .creative-intro { padding: 24px; } .creative-template-grid { grid-template-columns: 1fr; } .creative-template-art { height: 210px; } .creative-template-art svg { max-width: 300px; max-height: 180px; } .creative-workbench { display: flex; flex-direction: column; } .creative-stage { order: -1; } .creative-controls { border-right: 0; } .creative-canvas { min-height: 180px; } .creative-canvas.poster svg { height: 400px; } .creative-toolbar h3 { width: 100%; } .creative-review { padding: 20px; } .creative-review-actions > button { flex: 1 1 140px; } }
/* Food and beverage editor: explicit text labels, responsive assessment cards. */
.food-toolbar { display:flex; flex-wrap:wrap; gap:1rem; align-items:end; margin:1rem 0; }
.food-toolbar label { display:grid; gap:.4rem; min-width:0; }
.food-layout { display:grid; grid-template-columns:minmax(200px, 1fr) minmax(0, 2.5fr); gap:1.5rem; align-items:start; }
.food-list,.food-editor { min-width:0; display:grid; gap:1rem; }
.food-item,.food-form,.food-review { padding:1rem; margin-top:0; }
.food-item h3 { margin:0 0 .5rem; overflow-wrap:anywhere; }
.food-item p { color:var(--muted); }
.food-form > fieldset { min-width:0; border:0; padding:0; margin:0 0 1rem; }
.food-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1rem 0; }
.food-fields label,.food-review label { display:grid; gap:.4rem; min-width:0; font-size:.85rem; font-weight:600; }
.food-fields input,.food-fields select,.food-fields textarea,.food-toolbar input,.food-toolbar select,.food-review textarea { width:100%; min-width:0; border:1px solid var(--line); border-radius:.4rem; background:var(--surface); padding:.65rem; color:var(--ink); }
.food-fields input[type=checkbox],.food-review input[type=checkbox] { width:1.15rem; height:1.15rem; }
.food-form details { border-top:1px solid var(--line); padding:1rem 0; }
.food-form summary { font-weight:700; cursor:pointer; }
.food-form p,.food-review p { line-height:1.5; color:var(--muted); font-size:.85rem; }
.food-assessment { min-width:0; border:1px solid var(--line); border-radius:.5rem; margin:1rem 0; padding:.75rem; }
.food-assessment legend { font-weight:700; padding:0 .25rem; }
.food-review { display:grid; gap:1rem; }
@media(max-width:1000px) { .food-layout { grid-template-columns:1fr; } .food-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .food-fields,.food-list { grid-template-columns:1fr; } .food-toolbar { align-items:stretch; } .food-toolbar label { flex:1 1 100%; } }