/* Light visual system adapted from the selected Stitch concept. Product copy and
   interaction rules remain in the existing pages and scripts. */
:root {
  --st-paper: #f8fafc;
  --st-surface: #ffffff;
  --st-mint: #e9f7f2;
  --st-line: #e2e8f0;
  --st-ink: #0f172a;
  --st-muted: #64748b;
  --st-accent: #0d9488;
  --st-accent-dark: #0b766d;
  --st-danger: #a64554;
  --st-shadow: 0 12px 36px #173c3420;
}
body.design-landing, body.design-work, body.design-cabinet, body.design-document {
  color: var(--st-ink);
  background: var(--st-paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.design-landing :is(button,a,summary,input,textarea,select):focus-visible,
body.design-work :is(button,a,summary,input,textarea,select):focus-visible,
body.design-cabinet :is(button,a,summary,input,textarea,select):focus-visible,
body.design-document :is(button,a,summary,input,textarea,select):focus-visible {
  outline: 3px solid #16a991;
  outline-offset: 3px;
}

/* Public first screen: the six prompts are one visible vertical guide. */
html:has(body.design-landing) { height: auto; min-height: 100%; overflow: auto; }
body.design-landing { position: static; height: auto; min-height: 100dvh; overflow: auto; }
body.design-landing .studio { display: block; max-width: 690px; height: auto; min-height: 100dvh; padding: 22px; }
body.design-landing .phone { width: 100%; height: auto; min-height: calc(100dvh - 44px); overflow: visible; border: 1px solid var(--st-line); border-radius: 24px; background: var(--st-surface); color: var(--st-ink); box-shadow: var(--st-shadow); }
body.design-landing .top { min-height: 68px; height: auto; padding: 14px 24px; border-color: var(--st-line); border-radius: 24px 24px 0 0; background: var(--st-surface); }
body.design-landing .brand { color: var(--st-ink); font-size: 19px; }
body.design-landing .mark, body.design-landing .emblem { background: #153c3a; box-shadow: none; }
body.design-landing .wave i { background: #83e0b5; }
body.design-landing .how-link { color: var(--st-accent); }
body.design-landing .login { border-color: var(--st-line); border-radius: 10px; color: var(--st-accent); background: var(--st-surface); }
body.design-landing .scene { overflow: visible; min-height: 0; background: var(--st-surface); scrollbar-color: #a9c7bd transparent; }
body.design-landing .stage { padding: 30px 29px 38px; }
body.design-landing .landing-intro .identity, body.design-landing .landing-approach-prompt .identity { gap: 12px; }
body.design-landing .identity-copy, body.design-landing .bubble, body.design-landing .try-message,
body.design-landing .record-followup-copy { border: 1px solid var(--st-line); border-radius: 15px; background: var(--st-mint); color: var(--st-ink); box-shadow: none; animation: none; }
body.design-landing .identity-copy strong, body.design-landing .bubble strong, body.design-landing .try-message strong,
body.design-landing .record-followup-copy strong { color: var(--st-accent); }
body.design-landing .identity-copy p, body.design-landing .record-followup-copy p { color: var(--st-ink); }
body.design-landing .landing-concept { margin: 26px 0 0; }
body.design-landing .landing-concept h1 { color: var(--st-ink); font-size: clamp(31px, 6vw, 48px); line-height: 1.09; letter-spacing: -.055em; }
body.design-landing .landing-concept .landing-subtitle { margin: 9px 0 18px; color: var(--st-muted); font-size: 16px; }
body.design-landing .landing-guide-note { margin: 0 0 14px; color: var(--st-muted); font-size: 14px; line-height: 1.5; }
body.design-landing .landing-signal { color: var(--st-accent); }
body.design-landing .landing-signal i { background: var(--st-accent); }
body.design-landing .meeting-thread { position: static; display: grid; gap: 0; width: 100%; height: auto; margin: 0; padding: 4px 17px; border: 1px solid var(--st-line); border-radius: 18px; background: var(--st-surface); text-align: left; transform: none; box-shadow: 0 7px 24px #183f3610; }
body.design-landing .meeting-thread svg, body.design-landing .meeting-thread-center { display: none; }
body.design-landing .meeting-thread-node, body.design-landing .meeting-thread-node:nth-of-type(4),
body.design-landing .meeting-thread-node:nth-of-type(5) { position: static; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 58px; padding: 9px 0; border-bottom: 1px solid var(--st-line); color: var(--st-ink); }
body.design-landing .meeting-thread-node:last-child { border-bottom: 0; }
body.design-landing .meeting-thread-node .thread-number,
body.design-landing .meeting-thread-node:last-child .thread-number { width: 29px; height: 29px; flex: none; border: 0; border-radius: 9px; background: var(--st-mint); color: var(--st-accent); font-size: 14px; }
body.design-landing .meeting-thread-node .thread-label,
body.design-landing .meeting-thread-node:last-child .thread-label { padding: 0; background: transparent; color: var(--st-ink); font-size: 14px; font-weight: 700; }
body.design-landing .landing-approach-prompt { padding-top: 26px; }
body.design-landing .footer { padding: 17px 29px max(23px, env(safe-area-inset-bottom)); border-color: var(--st-line); border-radius: 0 0 24px 24px; background: var(--st-surface); }
body.design-landing .approach-picker > p { display: block; margin-bottom: 12px; color: var(--st-ink); font-size: 16px; }
body.design-landing .approach-picker > div { gap: 9px; }
body.design-landing .approach-picker button { border-color: var(--st-line); background: var(--st-surface); color: var(--st-ink); font-size: 14px; }
body.design-landing .approach-picker button:hover { border-color: var(--st-accent); background: var(--st-mint); }
body.design-landing .record-action-panel { padding: 0; border: 0; background: transparent; }
body.design-landing .record-action { min-height: 65px; border: 0; border-radius: 12px; background: var(--st-accent); color: white; }
body.design-landing .record-action:hover { background: var(--st-accent-dark); }
body.design-landing .record-action-icon { color: #d3fae8; }
body.design-landing .record-action-copy small { color: #d5f4e9; }
body.design-landing .flow-stage > .prompt-route, body.design-landing .prompt-list,
body.design-landing .flow-result, body.design-landing .audio-done,
body.design-landing .recording-live, body.design-landing .home-alert,
body.design-landing .processing-footer { border-color: var(--st-line); border-radius: 15px; background: var(--st-surface); color: var(--st-ink); box-shadow: 0 6px 20px #183f360d; }
body.design-landing .flow-stage > .prompt-route .prompt { border-color: var(--st-line); }
body.design-landing .flow-stage > .prompt-route .prompt .num { background: var(--st-mint); color: var(--st-accent); }
body.design-landing .flow-stage > .prompt-route .prompt b,
body.design-landing .flow-stage > .guide-heading, body.design-landing .flow-result h2,
body.design-landing .recording-live strong { color: var(--st-ink); }
body.design-landing .flow-stage > .prompt-route .prompt small,
body.design-landing .flow-result p, body.design-landing .flow-result .picture-count,
body.design-landing .recording-live p, body.design-landing .recording-live small { color: var(--st-muted); }
body.design-landing .audio-done { border-color: var(--st-line); }
body.design-landing .audio-copy, body.design-landing .audio-done b { color: var(--st-ink); }
body.design-landing .audio-icon { background: var(--st-mint); color: var(--st-accent); }
body.design-landing .flow-result .picture-steps { border-color: var(--st-line); }
body.design-landing .flow-result .picture-steps li { border-color: var(--st-line); }
body.design-landing .flow-result .picture-steps li b { color: var(--st-ink); }
body.design-landing .flow-result .picture-steps li b:before { background: var(--st-accent); }
body.design-landing .flow-result .picture-steps li p { color: var(--st-muted); }
body.design-landing .flow-result .picture-supervision { border-color: #bbe0d1; background: var(--st-mint); }
body.design-landing .flow-result .picture-supervision b { color: var(--st-accent); }
body.design-landing .flow-result .picture-supervision p { color: var(--st-ink); }
body.design-landing .login-overlay { background: #153c3a80; }
body.design-landing .login-dialog, body.design-landing .trial-text-dialog { border-color: var(--st-line); background: var(--st-surface); color: var(--st-ink); box-shadow: var(--st-shadow); }
body.design-landing .login-dialog h2, body.design-landing .login-dialog p { color: var(--st-ink); }
body.design-landing .login-dialog input, body.design-landing .trial-text-dialog textarea { border-color: var(--st-line); background: var(--st-paper); color: var(--st-ink); }
body.design-landing .login-dialog button[type=submit], body.design-landing .trial-text-actions button:first-of-type { border-color: var(--st-accent); background: var(--st-accent); color: white; }
body.design-landing .login-dialog a, body.design-landing .trial-text-dialog label { color: var(--st-accent); }
body.design-landing .login-warning { color: var(--st-muted) !important; }
body.design-landing .login-invitation { border: 1px solid var(--st-accent); background: var(--st-mint); color: var(--st-ink); animation: none; }
body.design-landing .login-invitation small { color: var(--st-muted); }
body.design-landing .inline-trial-bar { background: var(--st-paper); color: var(--st-ink); }
body.design-landing .inline-trial-bar button { color: var(--st-accent); }
body.design-landing .phone.is-trying { height: 100dvh; min-height: 0; overflow: hidden; }
body.design-landing .inline-trial iframe { background: var(--st-surface); }

/* The selected Stitch landing uses one audio card under a compact hero. */
body.design-landing .studio { max-width: 520px; }
body.design-landing .phone, body.design-landing .scene { background: var(--st-paper); }
body.design-landing .top { min-height: 58px; padding: 11px 16px; }
body.design-landing .stage { display: block; min-height: 0; padding: 19px 16px 25px; }
body.design-landing .landing-concept { margin: 0; text-align: left; }
body.design-landing .stitch-hero { padding: 1px 8px 16px; text-align: center; }
body.design-landing .stitch-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid #b6e9dd; border-radius: 100px; background: #f0fdfa; color: var(--st-accent); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
body.design-landing .stitch-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--st-accent); }
body.design-landing .landing-concept .stitch-hero h1 { margin: 12px auto 6px; max-width: 390px; color: var(--st-ink); font-family: "Plus Jakarta Sans",Inter,ui-sans-serif,sans-serif; font-size: clamp(22px,4vw,28px); line-height: 1.17; letter-spacing: -.035em; }
body.design-landing .stitch-hero > p { margin: 0 auto; max-width: 390px; color: #475569; font-size: 13px; line-height: 1.52; }
body.design-landing .stitch-story-art { position: relative; width: min(100%, 320px); aspect-ratio: 1; margin: 0 auto 13px; }
body.design-landing .stitch-story-art svg { display: block; width: 100%; height: 100%; fill: none; }
body.design-landing .stitch-story-center { position: absolute; z-index: 1; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 112px; height: 112px; border: 2px solid #99e2d6; border-radius: 50%; background: linear-gradient(#f0fdfa, white); box-shadow: 0 4px 12px #0f172a10; color: var(--st-accent); font-size: 18px; transform: translate(-50%,-50%); }
body.design-landing .stitch-story-icon { display: flex; align-items: center; justify-content: center; gap: 2px; width: 27px; height: 27px; margin-bottom: 2px; border-radius: 50%; background: #ccfbf1; }
body.design-landing .stitch-story-icon i { width: 2px; height: 7px; border-radius: 2px; background: var(--st-accent); }
body.design-landing .stitch-story-icon i:nth-child(2), body.design-landing .stitch-story-icon i:nth-child(4) { height: 12px; }
body.design-landing .stitch-story-icon i:nth-child(3) { height: 16px; }
body.design-landing .stitch-story-center strong { margin-top: 3px; color: var(--st-ink); font-size: 13px; line-height: 1.15; }
body.design-landing .stitch-story-center small { color: var(--st-muted); font-size: 11px; }
body.design-landing .stitch-story-pill { position: absolute; z-index: 2; display: flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid var(--st-line); border-radius: 100px; background: #fffffff2; box-shadow: 0 2px 7px #0f172a12; color: var(--st-ink); font-size: 11px; font-weight: 650; white-space: nowrap; }
body.design-landing .stitch-story-pill b { display: grid; place-items: center; flex: none; width: 19px; height: 19px; border-radius: 50%; background: #e2e8f0; color: #475569; font-size: 10px; }
body.design-landing .stitch-story-pill.p1 { top: 8px; left: 16px; border-color: #99e2d6; }
body.design-landing .stitch-story-pill.p1 b { background: var(--st-accent); color: white; }
body.design-landing .stitch-story-pill.p2 { top: 8px; right: 16px; }
body.design-landing .stitch-story-pill.p3 { top: 50%; right: 0; transform: translateY(-50%); }
body.design-landing .stitch-story-pill.p4 { bottom: 8px; right: 24px; }
body.design-landing .stitch-story-pill.p5 { bottom: 8px; left: 24px; }
body.design-landing .stitch-story-pill.p6 { top: 50%; left: 0; transform: translateY(-50%); }
body.design-landing .stitch-audio-card { display: grid; gap: 15px; padding: 17px; border: 1px solid #99e2d6; border-radius: 23px; background: var(--st-surface); box-shadow: 0 10px 28px #0f172a0d; }
body.design-landing .stitch-privacy { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px; border: 1px solid #b6e9dd; border-radius: 14px; background: #f0fdfa; color: #334155; font-size: 12px; line-height: 1.4; }
body.design-landing .stitch-privacy > span:first-child { display: grid; place-items: center; flex: none; width: 19px; height: 19px; border-radius: 50%; background: var(--st-accent); color: white; font-size: 13px; font-weight: 800; }
body.design-landing .stitch-privacy strong { color: var(--st-ink); }
body.design-landing .stitch-approach-slot { min-height: 0; }
body.design-landing .stitch-approach-slot .approach-picker { padding: 0; }
body.design-landing .stitch-approach-slot .approach-picker p { display: block; margin: 0 0 8px; color: var(--st-ink); font-size: 12px; font-weight: 750; text-align: left; }
body.design-landing .stitch-approach-slot .approach-picker p:before { content: none; }
body.design-landing .stitch-approach-slot .approach-picker > div { gap: 4px; padding: 4px; border-radius: 13px; background: #f1f5f9; }
body.design-landing .stitch-approach-slot .approach-picker button { min-height: 41px; padding: 5px 2px; border: 0; border-radius: 9px; background: transparent; color: #334155; font-size: 12px; font-weight: 700; }
body.design-landing .stitch-approach-slot .approach-picker button:hover { background: white; color: var(--st-accent); box-shadow: 0 2px 5px #0f172a12; }
body.design-landing .stitch-approach-slot .approach-picker button[aria-pressed="true"] { background: white; color: var(--st-accent); box-shadow: 0 2px 5px #0f172a12; }
body.design-landing .stitch-topics-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; }
body.design-landing .stitch-topics-head strong { color: var(--st-ink); }
body.design-landing .stitch-topics-head span { color: var(--st-accent); font-size: 11px; }
body.design-landing .stitch-audio-card .meeting-thread { gap: 5px; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
body.design-landing .stitch-audio-card .meeting-thread-node { min-height: 38px; padding: 7px 10px; border: 1px solid var(--st-line); border-radius: 10px; background: #f8fafc; }
body.design-landing .stitch-audio-card .meeting-thread-node:last-child { border-bottom: 1px solid var(--st-line); }
body.design-landing .stitch-audio-card .meeting-thread-node .thread-number { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }
body.design-landing .stitch-audio-card .meeting-thread-node .thread-label { font-size: 12px; font-weight: 650; }
body.design-landing .stitch-audio-card .landing-guide-note { margin: -7px 0 0; color: var(--st-muted); font-size: 11px; line-height: 1.4; }
body.design-landing .stitch-wave { display: flex; align-items: center; justify-content: center; gap: 5px; height: 34px; margin-top: 1px; }
body.design-landing .stitch-wave i { width: 5px; height: 15px; border-radius: 5px; background: var(--st-accent); }
body.design-landing .stitch-wave i:nth-child(2),body.design-landing .stitch-wave i:nth-child(6) { height: 24px; }
body.design-landing .stitch-wave i:nth-child(3),body.design-landing .stitch-wave i:nth-child(5) { height: 31px; }
body.design-landing .stitch-wave i:nth-child(4) { height: 19px; }
body.design-landing .stitch-cta-hint { width: 100%; margin: -9px 0 0; padding: 13px; border: 0; border-radius: 14px; background: var(--st-accent); color: white; font-size: 14px; font-weight: 760; text-align: center; }
body.design-landing .stitch-cta-hint:hover { background: var(--st-accent-dark); }
body.design-landing .stitch-trial-limit { margin: -6px 0 0; color: var(--st-muted); font-size: 11px; text-align: center; }
body.design-landing .stitch-trial-limit strong { color: var(--st-ink); }
body.design-landing .stitch-route { margin-top: 14px; padding: 14px; border: 1px solid var(--st-line); border-radius: 18px; background: white; box-shadow: 0 4px 20px #0f172a08; }
body.design-landing .stitch-route > strong { color: var(--st-muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
body.design-landing .stitch-route ol { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 11px 0 0; padding: 0; list-style: none; counter-reset: step; }
body.design-landing .stitch-route li { display: flex; align-items: center; gap: 7px; min-height: 35px; padding: 7px; border: 1px solid var(--st-line); border-radius: 9px; background: #f8fafc; color: #334155; font-size: 11px; font-weight: 650; counter-increment: step; }
body.design-landing .stitch-route li:before { content: counter(step); display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--st-accent); color: white; font-size: 10px; }
body.design-landing .flow-stage[data-mode="ready"] .landing-concept { display: block; }
body.design-landing .flow-stage[data-mode="ready"] > .guide-heading,
body.design-landing .flow-stage[data-mode="ready"] > .prompt-route { display: none; }
body.design-landing:has(.flow-stage[data-mode="landing"]) .footer,
body.design-landing:has(.flow-stage[data-mode="ready"]) .footer { display: none; }
body.design-landing .stitch-cta-hint[hidden] { display: none; }
body.design-landing .stitch-audio-card .ready-to-record { margin: -9px 0 0; }

/* Authenticated work area and trial recorder use the same material system. */
body.design-work { background: var(--st-paper); color: var(--st-ink); }
body.design-work .shell { background: var(--st-surface); box-shadow: var(--st-shadow); }
body.design-work header { border-color: var(--st-line); background: var(--st-surface); }
body.design-work header .brand, body.design-work header a { color: var(--st-accent); }
body.design-work .logo-signal { border-color: #194a43; background: #153c3a; }
body.design-work .logo-signal i { background: #83e0b5; }
body.design-work header .balance, body.design-work .clients-nav { border-color: var(--st-line); background: var(--st-paper); color: var(--st-ink); }
body.design-work main { color: var(--st-ink); scrollbar-color: #abc9bf transparent; }
body.design-work :is(h1,h2,h3,.lead,.analysis-heading) { color: var(--st-ink); }
body.design-work :is(.stage-guide-intro,.recording-screen-hint,.client-page .client-heading .lead,
  .client-approach,.client-meetings,.client-last-recording,.client-summary p) { color: var(--st-muted); }
body.design-work .stage-guide-list { border-color: var(--st-line); background: var(--st-surface); }
body.design-work .stage-guide-list li { border-color: var(--st-line); }
body.design-work .client-page .stage-guide-list { border-color: var(--st-line) !important; background: var(--st-surface) !important; }
body.design-work .client-page .stage-guide-list li { border-color: var(--st-line) !important; }
body.design-work .stage-guide-number,
body.design-work:not(.is-recording) .client-page .stage-guide-number { background: var(--st-mint); color: var(--st-accent); }
body.design-work .client-page .stage-guide-number { background: var(--st-mint) !important; color: var(--st-accent) !important; }
body.design-work .stage-guide-list b, body.design-work .stage-guide-list small,
body.design-work .client-page .stage-guide-list b, body.design-work .client-page .stage-guide-list small { color: var(--st-ink) !important; }
body.design-work .stage-guide-list small, body.design-work .client-page .stage-guide-list small { color: var(--st-muted) !important; }
body.design-work .client-page .stage-guide-list:before { background: var(--st-line); }
body.design-work :is(.bubble,.result,.notice,.processing-footer,.record-review,.client-summary,
  .client-recording,.client-history details,.client-assistant-copy,.guide-context,.trial-signal-message,
  .trial-recording,.recording-session,.microphone-help) { border-color: var(--st-line); background: var(--st-surface); color: var(--st-ink); box-shadow: none; }
body.design-work :is(.bubble,.result,.notice,.processing-footer,.record-review,.client-summary,
  .client-recording,.client-history details,.client-assistant-copy,.guide-context,.trial-signal-message,
  .trial-recording) :is(p,span,small) { color: var(--st-muted); }
body.design-work :is(.bubble,.result,.notice,.processing-footer,.client-assistant-copy,
  .client-summary,.client-recording,.trial-signal-message,.trial-recording) :is(b,strong,h2,h3) { color: var(--st-ink); }
body.design-work .client-assistant-copy, body.design-work .trial-signal-message { background: var(--st-mint); }
body.design-work .client-assistant-copy strong, body.design-work .notice strong,
body.design-work .result b, body.design-work .client-history summary,
body.design-work .recording-edit-link { color: var(--st-accent); }
body.design-work .client-assistant-icon, body.design-work .client-recording-icon { background: var(--st-mint); color: var(--st-accent); }
body.design-work .client-assistant-icon i { background: var(--st-accent); }
body.design-work .client-card { border-color: var(--st-line); background: var(--st-surface); color: var(--st-ink); }
body.design-work .client-card:hover { border-color: var(--st-accent); background: var(--st-mint); }
body.design-work .client-card { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 4px 11px; }
body.design-work .client-number { color: var(--st-accent); }
body.design-work .client-card-meta { grid-column: 2; width: 100%; max-width: none; margin: 0; color: var(--st-muted); text-align: left; }
body.design-work .client-card-meta small { color: var(--st-muted); }
body.design-work :is(.client-alias,.client-recording-select,.client-recording-select strong) { color: var(--st-ink); }
body.design-work .client-recording-meta span { color: var(--st-muted); }
body.design-work :is(.client-tool-action,.client-tool-toggle,.client-recordings-expand,.inline-actions button,
  .secondary,.microphone-platforms button,.recording-sheet-secondary) { border-color: var(--st-line); background: var(--st-paper); color: var(--st-ink); }
body.design-work :is(.client-tool-danger,.danger,.recording-sheet-danger,.delete-client-confirm .confirm-delete) { border-color: #e8b6bd !important; background: #fff1f2 !important; color: var(--st-danger) !important; }
body.design-work .search, body.design-work :is(input,textarea,select) { border-color: var(--st-line); background: var(--st-surface); color: var(--st-ink); }
body.design-work :is(input,textarea)::placeholder { color: #829995; }
body.design-work .search-icon { border-color: var(--st-accent); }
body.design-work .search-icon:after { background: var(--st-accent); }
body.design-work footer { border-color: var(--st-line); background: var(--st-surface); }
body.design-work footer button.primary, body.design-work .record-review .inline-actions button:first-child,
body.design-work .recording-sheet-primary, body.design-work .rename-client-form button { border-color: var(--st-accent); background: var(--st-accent); color: white; }
body.design-work footer button.primary:hover { background: var(--st-accent-dark); }
body.design-work .record-action-panel { padding: 0; border: 0; background: transparent; }
body.design-work .record-action { border-color: var(--st-accent); background: var(--st-accent); color: white; }
body.design-work .record-action::before { display: none; }
body.design-work .record-action-icon { color: #ddfff0; }
body.design-work .record-action-copy small { color: #d8f2e9; }
body.design-work .record-action.stopping { border-color: #c35a6b; background: #b9475a; }
body.design-work .recording { border-color: #f0bec4; background: #fff5f5; color: var(--st-danger); }
body.design-work .recording span { color: var(--st-danger); }
body.design-work .recording-live { border-color: var(--st-line); background: var(--st-surface); box-shadow: 0 6px 20px #183f360d; }
body.design-work .recording-live .live-pulse { color: var(--st-accent); }
body.design-work .recording-live > strong { color: var(--st-ink); }
body.design-work .recording-live .live-time { color: var(--st-accent); }
body.design-work .recording-live > p, body.design-work .recording-live > small { color: var(--st-muted); }
body.design-work .recording-live .recording-level { border-color: #b7ddcb; background: var(--st-mint); color: var(--st-accent); }
body.design-work .recording-live .recording-level.is-quiet { border-color: #e8c49a; background: #fff7ed; color: #95611b; }
body.design-work .recording-level { color: var(--st-accent); }
body.design-work .event { background: var(--st-mint); color: var(--st-muted); }
body.design-work .picture-steps li, body.design-work .client-result-row { border-color: var(--st-line); }
body.design-work .picture-steps { border-color: var(--st-line); }
body.design-work .picture-steps li { grid-template-columns: 1fr; gap: 6px; }
body.design-work .picture-steps li b, body.design-work .client-result-row b { color: var(--st-ink); }
body.design-work .picture-steps li p, body.design-work .client-result-row span { color: var(--st-muted); }
body.design-work .picture-supervision { border-color: #b7ddcb; background: var(--st-mint); }
body.design-work .picture-supervision :is(b,p) { color: var(--st-ink); }
body.design-work .recording-text-dialog { border-color: var(--st-line); background: var(--st-surface); color: var(--st-ink); box-shadow: 0 -15px 40px #173c342e; }
body.design-work .recording-text-dialog::backdrop { background: #143c3a80; }
body.design-work .recording-sheet-head, body.design-work .recording-sheet-actions { border-color: var(--st-line); background: var(--st-surface); }
body.design-work .recording-sheet-body label { color: var(--st-accent); }
body.design-work .recording-sheet-body textarea { border-color: var(--st-line); background: var(--st-paper); color: var(--st-ink); }
body.design-work .recording-sheet-note { background: var(--st-mint); color: var(--st-ink); }
body.design-work .recording-sheet-head small, body.design-work .recording-sheet-unsaved { color: var(--st-muted); }
body.design-work .recording-sheet-status { color: var(--st-accent); }
body.design-work .new-client-form > label, body.design-work .new-client-form legend { color: var(--st-ink); }
body.design-work .new-client-approaches span { border-color: var(--st-line); background: var(--st-surface); color: var(--st-ink); }
body.design-work .new-client-approaches input:checked + span { border-color: var(--st-accent); background: var(--st-mint); color: var(--st-accent); }
body.design-work .new-client-hint { color: var(--st-muted); }
body.design-work .new-client-hint a { color: var(--st-accent); }
body.design-work .new-client-form > button { border-color: var(--st-accent); background: var(--st-accent); color: white; }

/* Personal account. */
body.design-cabinet { font-size: 16px; }
body.design-cabinet .shell { background: var(--st-paper); box-shadow: var(--st-shadow); }
body.design-cabinet header { border-color: var(--st-line); background: var(--st-surface); }
body.design-cabinet header a, body.design-cabinet .cabinet-links a { color: var(--st-accent); }
body.design-cabinet header .clients-nav { border-color: var(--st-line); background: var(--st-paper); color: var(--st-ink); }
body.design-cabinet header strong { border-color: var(--st-line); background: var(--st-mint); color: var(--st-accent); }
body.design-cabinet .logo-signal { border-color: #194a43; background: #153c3a; }
body.design-cabinet .logo-signal i { background: #83e0b5; }
body.design-cabinet :is(h1,h2,section>strong,.balance-row strong) { color: var(--st-ink); }
body.design-cabinet section, body.design-cabinet .ledger-item { border-color: var(--st-line); background: var(--st-surface); box-shadow: 0 4px 18px #183f360b; }
body.design-cabinet section>span, body.design-cabinet .ledger-cost { color: var(--st-accent); }
body.design-cabinet p, body.design-cabinet .subtle, body.design-cabinet .ledger-meta { color: var(--st-muted); }
body.design-cabinet label { color: var(--st-ink); }
body.design-cabinet input, body.design-cabinet select { border-color: var(--st-line); background: var(--st-paper); color: var(--st-ink); }
body.design-cabinet button { border-color: var(--st-line); background: var(--st-paper); color: var(--st-ink); }
body.design-cabinet button.primary { border-color: var(--st-accent); background: var(--st-accent); color: white; }
body.design-cabinet .topup:disabled { border-color: var(--st-line); background: var(--st-paper); color: var(--st-muted); }
body.design-cabinet .status { color: var(--st-accent); }
body.design-cabinet .error { color: var(--st-danger); }

/* Long form public pages keep their full content, with the new shared visual tone. */
body.design-document { --page: var(--st-paper); --card: var(--st-surface); --line: var(--st-line); --text: var(--st-ink); --muted: var(--st-muted); --accent: var(--st-accent); color-scheme: light; }
body.design-document .page { background: var(--st-paper); box-shadow: var(--st-shadow); }
body.design-document .top { border-color: var(--st-line); background: var(--st-surface); }
body.design-document .hero { background: linear-gradient(145deg,#e6f5ee 0%,#f6f9f7 64%); }
body.design-document .hero > p:last-child, body.design-document .hero-copy,
body.design-document :is(p,li,.contents a) { color: var(--st-muted); }
body.design-document :is(h1,h2,h3,strong) { color: var(--st-ink); }
body.design-document .eyebrow, body.design-document a { color: var(--st-accent); }
body.design-document :is(.postulates li,.flow li,.callout,.contact,.path span,.research-points>div) { border-color: var(--st-line); background: var(--st-surface); color: var(--st-ink); }
body.design-document .callout { background: var(--st-mint); }
body.design-document .callout p { color: var(--st-ink); }
body.design-document .callout.warm { background: #fff5e8; border-color: #ead9b9; }
body.design-document .path { color: var(--st-muted); }
body.design-document .footer { color: var(--st-muted); }
body.design-document .logo-signal { border-color: #194a43; background: #153c3a; }
body.design-document .logo-signal i { background: #83e0b5; }

@media (max-width: 760px) {
  body.design-landing html, body.design-landing { position: static; height: auto; overflow: auto; }
  body.design-landing .studio { display: block; padding: 0; }
  body.design-landing .phone { min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  body.design-landing .top, body.design-landing .footer { border-radius: 0; }
  body.design-landing .top { padding: 13px 17px; }
  body.design-landing .stage { padding: 22px 17px 30px; }
  body.design-landing .footer { padding: 16px 17px max(20px,env(safe-area-inset-bottom)); }
  body.design-landing .landing-concept { margin-top: 22px; }
  body.design-work .shell, body.design-cabinet .shell { box-shadow: none; }
}
@media (max-width: 390px) {
  body.design-landing .approach-picker button { padding: 6px 2px; font-size: 12px; }
  body.design-landing .meeting-thread { padding: 2px 12px; }
  body.design-landing .meeting-thread-node { min-height: 54px; }
}