/* Shared, accessible calm-tech palette. Load after page-specific styles. */
:root {
  --ink:#243345; --text:#243345; --muted:#596c80; --paper:#f2f6fa;
  --surface:#fff; --line:#d4e0e9; --primary:#08766c; --primary-dark:#065c55;
  --accent:#725bb5; --danger:#b52e4a; --shadow:0 12px 36px #3554730d;
  --glow:0 0 22px #54b9bb18; --radius:22px;
}
html { color-scheme:light; }
/* Finish the calm-tech theme on dialogs and old, more-specific form rules. */
dialog.received-qr-dialog, dialog.qr-scanner-dialog { color:var(--ink); background:var(--surface); border-color:var(--line); max-height:calc(100dvh - 24px); overflow-y:auto; }
dialog.received-qr-dialog::backdrop, dialog.qr-scanner-dialog::backdrop { background:#24334577; backdrop-filter:blur(5px); }
.received-qr-actions { display:grid; gap:10px; }.received-qr-actions>p { margin:0; }
.friend-message-form textarea, .friend-code-share-form select { color:var(--ink); background:#fff; border-color:#bed0df; }
.friend-thread-panel { grid-template-rows:auto minmax(120px,1fr) auto auto auto; }
.friend-list-item.is-active { background:#e6f4ef; border-color:#88bca9; }
.friend-message.is-mine { color:#245c4d; background:#e4f3eb; border-color:#b5d5c6; }
.friend-shared-inputs { padding:0 18px; }
.friend-shared-inputs>p { color:var(--muted); font-size:.85rem; }
.friend-shared-input { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px; margin:10px 0; border:1px solid var(--line); border-radius:16px; background:linear-gradient(125deg,#eff9f4,#f5f2fb); }
.friend-shared-input>div { flex:1; min-width:100px; overflow-wrap:anywhere; }
.friend-shared-input time { display:block; color:var(--muted); font-size:.8rem; margin-top:4px; }
.received-qr-actions .share-privacy-note { font-size:.85rem; color:var(--muted); line-height:1.7; }
.received-qr-actions small { display:block; color:var(--muted); font-size:.8rem; line-height:1.7; margin-top:10px; }
body { background:radial-gradient(ellipse at 85% 0,#e7e1f6,transparent 34rem),radial-gradient(ellipse at 0 40%,#e2f4ed,transparent 40rem),var(--paper); }
body::before { opacity:.07; background-image:linear-gradient(#557c9e33 1px,transparent 1px),linear-gradient(90deg,#557c9e33 1px,transparent 1px); }
.site-header { background:#f8fbfded; border-color:var(--line); box-shadow:0 2px 18px #35547305; }
.brand { color:var(--ink); gap:12px; white-space:nowrap; text-transform:none; }
.brand-logo { flex:none; display:block; border-radius:11px; box-shadow:0 2px 9px #08766c12; }
.policy-notice { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; padding:12px 18px; border:1px solid #cddfd9; border-radius:16px; background:#edf7f2; font-size:.875rem; }
.policy-notice a { color:var(--primary-dark); font-weight:700; }
.brand > span:last-child { line-height:1.15; font-size:1.05rem; }
.brand small { display:block; color:var(--muted); font-size:.63rem; letter-spacing:.15em; font-weight:600; }
.brand-mark { position:relative; width:40px; height:40px; background:linear-gradient(145deg,#177f7a,#6576ae); color:#fff; box-shadow:0 3px 14px #177f7a25; font-size:1.2rem; border-radius:14px; }
.brand-spark { position:absolute; top:4px; right:5px; font-size:.65rem; color:#d6fff1; }
.main-nav > a:not(.button), .utility-link { color:var(--muted); }
.main-nav > a[aria-current=page], .mobile-navigation-links > a[aria-current=page] { color:var(--primary-dark); background:#e1f2ee; box-shadow:none; }
.language-form { border-color:var(--line); background:#fff; }
.language-form select, .language-form button { color:var(--muted); min-height:36px; }
.language-form option { color:var(--ink); background:#fff; }
.mobile-navigation > summary { background:#fff; border-color:var(--line); }
.mobile-navigation-panel { background:#f9fcff; border-color:var(--line); }
.mobile-navigation-links > a { color:var(--ink); }
.page-shell { padding-top:38px; }
h1 { font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.25; letter-spacing:-.035em; }
.eyebrow { color:var(--muted); }
.button { color:#fff; background:var(--primary); border-color:var(--primary); border-radius:14px; box-shadow:0 4px 12px #08766c14; min-height:44px; }
.button:hover { color:#fff; background:var(--primary-dark); box-shadow:none; }
.button-quiet, .icon-button, .panel-menu { background:#fff; color:var(--primary-dark); border-color:var(--line); box-shadow:none; }
.button-quiet:hover, .icon-button:hover, .panel-menu:hover { color:var(--primary-dark); background:#eaf6f2; border-color:#82bcb0; }
.button-danger, .danger { color:var(--danger); background:#fff4f5; border-color:#edc5cc; }
:is(button,a,input,textarea,select,summary):focus-visible { outline:3px solid #5689c2; outline-offset:3px; }
input:not([type=checkbox]):not([type=radio]), textarea, select { color:var(--ink); border-color:#bed0df; background:#fff; box-shadow:none; }
input::placeholder, textarea::placeholder { color:#63788c; }
input[type=checkbox], input[type=radio] { accent-color:var(--primary); }
.form-card, .auth-tool-card, .auth-login-card, .received-code-panel, .home-ai-workspace,
.home-ai-card, .ai-card, .guide-starter, .feature-note, .guide-check,
.friend-panel, .friend-chat-panel, .friend-sidebar, .settings-panel, .settings-nav,
.qr-scanner-shell, .qr-code-shell, .partner-auth-shell, .legal-hero, .consent-field,
.text-input-form, .form-page-heading { background:#ffffffed; border-color:var(--line); color:var(--ink); box-shadow:var(--shadow); }
.home-ai-card:has(input:checked) { background:#eaf6f2; border-color:#399b8c; }
.ai-monogram { color:#327286; background:#e7f1f7; border-color:#cfdee9; }
.ai-tags span, .ai-theme-filter a, .input-mode-picker a, .builder-mode-picker a { color:var(--muted); border-color:var(--line); background:#fff; }
.ai-theme-filter a[aria-current], .input-mode-picker a[aria-current], .builder-mode-picker a[aria-current] { color:#075c53; background:#e0f3eb; border-color:#4c9b86; }
.ai-source, .feature-note a { color:var(--primary-dark); }
.ai-stats a, .ai-rating span, .ai-review header > span { color:#7d5818; }
.ai-rating input:checked + span { color:#654309; background:#fff2d7; border-color:#aa7828; }
.received-code-item { background:#fff; border-color:var(--line); }
.received-code-item:has(input:checked) { background:#eef7f4; border-color:#419d8d; }
.received-code-actions .home-copy-button { color:var(--primary-dark); border-color:#9fc9c0; background:#e5f3ee; }
.received-code-select strong, .received-code-select span, .received-code-main, .received-code-actions button { color:var(--ink); }
.home-ai-empty { background:#f8fbfd; border-color:#a9c2d2; }
.home-journey { padding:16px 20px; background:#ffffffa6; border:1px solid var(--line); border-radius:18px; }
.message { color:#205848; background:#e9f7f1; border-color:#a1cdbb; }
.message-error, .form-alert { color:#892c40; background:#fff0f3; border-color:#efc2cc; }
.field-error, .errorlist { color:var(--danger); }
.legal-document, .legal-section { color:var(--ink); }
.legal-toc a, .public-page-navigation a, .legal-related-links a { color:var(--primary-dark); background:#f4f9fa; border-color:var(--line); }
.legal-index { color:var(--primary); background:#e8f3f0; }
.legal-operator { background:#f5f8fb; border-color:var(--line); }
.legal-draft-notice { background:#fff8e7; color:#6d5828; border-color:#e3d5b2; }
.consent-field { box-shadow:none; background:#f8fbfd; }
.site-footer { background:transparent; border-color:var(--line); }.site-footer a { color:var(--muted); }
.google-consent { max-width:520px; margin:0 auto; }
.google-button { background:#fff; color:#1f1f1f; border:1px solid #747775; font-size:1rem; font-weight:500; box-shadow:none; }
.google-button:hover { background:#f3f5f8; color:#1f1f1f; border-color:#747775; }
.auth-divider { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:.8rem; margin:22px 0; }
.auth-divider::before, .auth-divider::after { content:''; height:1px; background:var(--line); flex:1; }
.welcome-orbit { position:relative; width:160px; height:160px; margin:0 auto 26px; display:grid; place-items:center; }
.welcome-orbit > span { width:88px; height:88px; display:grid; place-items:center; border-radius:28px; font-size:2.7rem; color:#358a86; background:linear-gradient(145deg,#e0f4ef,#e7e1f6); box-shadow:0 0 40px #79c5b030; }
.welcome-orbit::before { content:''; position:absolute; inset:0; border:1px solid #c1d8df; border-radius:50%; }
.welcome-orbit i { width:14px; height:14px; border-radius:5px; background:#9eb0d6; position:absolute; top:0; left:74px; }
.welcome-orbit i:nth-of-type(2) { top:114px; left:0; background:#87bda4; }.welcome-orbit i:nth-of-type(3) { top:114px; left:148px; background:#d8b983; }
.auth-tool-card h2 { font-size:1.55rem; }
.code-check-disclosure { margin-top:30px; padding-top:20px; border-top:1px solid var(--line); }
.code-check-disclosure summary { cursor:pointer; color:var(--muted); padding-bottom:16px; }
.code-format-result[data-state=valid] { color:#076955; }.code-format-result[data-state=empty] { color:var(--danger); }
/* Color AND shape distinguish parts, actions, notes and connecting arrows. */
.visual-builder { gap:18px; }
.visual-workspace { display:grid; grid-template-columns:minmax(0,1fr); }
.visual-workspace:has(.visual-inspector:not([hidden])) { grid-template-columns:minmax(0,1fr) 310px; }
.visual-composer { padding:12px; background:#ffffff9c; border:1px solid var(--line); border-radius:26px; }
.genre-option { color:var(--muted); background:#fff; border-color:var(--line); border-radius:18px; }
.genre-option:hover { color:#28596d; background:#f0f6fb; border-color:#99bccf; }
.genre-option[aria-pressed=true] { color:#087168; background:#e8f5ef; border-color:#4e9d8a; box-shadow:inset 0 -3px #4e9d8a; }
.genre-mini { color:#548495; }.genre-mini-plan i { background:#e8f5ef; }
.visual-task-panel, .visual-stage, .visual-inspector { background:#fff; border-color:var(--line); box-shadow:none; border-radius:20px; }
.visual-task-panel { background:#f3eefc; border-color:#d4c8e9; }
.visual-task-panel h2, .visual-stage-title { color:var(--ink); font-weight:650; }
.visual-task-panel > header { padding:12px 16px; }
.visual-toolbar button, .visual-canvas-footer button { color:var(--primary-dark); border-color:var(--line); background:#fff; }
.visual-viewport { background:#f8fbfe; border-color:#ccdae6; }
.visual-plane { background-color:#f8fbfe; background-image:radial-gradient(#b5c8d7 1px,transparent 1px); background-size:24px 24px; }
.scene-image { opacity:.4; }.scene-compare i { background:#d4e9f430; }.scene-compare i:nth-child(2) { background:#ded4f230; }
.visual-palette { padding:4px 6px 14px; gap:16px; }.visual-palette-group > span { color:var(--muted); }
.visual-preset { color:#214b70; background:#e8f2ff; border-color:#a2c1e4; border-radius:16px; min-height:48px; }
.visual-preset[data-role=task] { color:#5b3d85; background:#eee6fa; border-color:#b9a4d8; border-radius:10px; }
.visual-preset[data-role=detail] { color:#73521a; background:#fff3cf; border-color:#dec28a; border-radius:6px 18px 18px 6px; }
.visual-preset:hover, .visual-preset[aria-pressed=true] { box-shadow:0 0 0 3px #08766c25; }
.visual-node { background:#f0e8fb; border-color:#ab92cf; color:#4c3275; border-radius:16px; box-shadow:0 6px 18px #33497312; }
.visual-node[data-type=info] { background:#e7f1fe; border-color:#8cb4dd; color:#24496b; border-radius:32px; }
.visual-node-main small { color:#5e7191; }
.visual-node-actions button { color:#3c5772; background:#ffffffa6; min-width:32px; min-height:32px; }.visual-node-actions button:hover { color:var(--ink); background:#fff; }
.visual-task-node::before { color:#674a95; background:#eee6fa; }
.visual-port { border-color:#fff; background:#1b897b; width:32px; height:32px; right:-18px; top:31px; }
.visual-node[data-drop-target=true], .visual-group[data-drop-target=true] { background:#d7f1e8; box-shadow:0 0 0 5px #399b8c55; }
.visual-node[data-invalid=true], .visual-builder [aria-invalid=true] { border-color:var(--danger); }
.visual-group { color:#527076; border-color:#82a5ab; background:#e1f0ef45; }
.visual-edge-label, .visual-cross-link { color:#096a5d; border-color:#a3c5b7; background:#f0faf5; }
.visual-output-presets button { color:#67501e; background:#fff7df; border-color:#decf9d; min-height:40px; }
.visual-output-presets button[aria-pressed=true] { color:#0b6252; background:#dff2e8; border-color:#419d83; }
.visual-goal-options > summary, .visual-advanced > summary { color:var(--muted); min-height:44px; }
.visual-detail-choices > small { color:#73521a; }
.visual-inspector input:not([type=checkbox]), .visual-inspector textarea, .visual-inspector select, .visual-goal input, .visual-goal select { background:#f9fcff; color:var(--ink); border-color:#becfde; }
.visual-detail, .visual-attached-note { color:#644911; background:#fff3cf; border-color:#dec28a; }
.visual-inspector-header { position:sticky; top:-18px; margin:-4px -4px 12px; padding:12px 4px; background:#fff; z-index:2; }
.visual-inspector { position:sticky; inset-inline-end:auto; bottom:auto; width:auto; top:90px; z-index:5; max-height:calc(100vh - 110px); }
.visual-gesture-legend { color:#526b81; }.visual-field-error, .visual-save-bar [data-kind=error] { color:var(--danger); }
.visual-save-bar [data-kind=success] { color:#086e55; }
.visual-save-bar { position:sticky; bottom:12px; z-index:22; background:#ffffffed; border:1px solid var(--line); border-radius:20px; padding:14px 20px; backdrop-filter:blur(12px); box-shadow:var(--shadow); }
.visual-empty-start { border:2px dashed #9bbbc9; border-radius:22px; padding:18px 28px; color:#376c7a; background:#ffffffd9; cursor:pointer; position:absolute; top:140px; left:350px; min-width:190px; font:inherit; }
.visual-empty-start b { display:block; font-size:2.8rem; line-height:1.2; font-weight:400; }.visual-empty-start span { font-size:.85rem; }
.builder-gesture-help { display:flex; gap:14px; flex-wrap:wrap; margin:8px 0 18px; }
.builder-gesture-help > span { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.75rem; }
.builder-gesture-help i { font-style:normal; padding:5px 10px; background:#e8f1fc; color:#34658d; border-radius:12px; }
.builder-gesture-help > span:nth-child(2) i { background:#e5f4ec; color:#226857; }.builder-gesture-help > span:nth-child(3) i { background:#f0e8fb; color:#7256a0; }
@media(max-width:1000px) {
  .visual-workspace:has(.visual-inspector:not([hidden])) { grid-template-columns:minmax(0,1fr); }
  .visual-inspector { position:relative; inset:auto; top:auto; max-height:none; }.visual-inspector-header { position:static; }
}
@media(max-width:600px) {
  .header-inner { padding-inline:16px; }.page-shell { width:calc(100% - 28px); padding-top:24px; }
  body:has(.visual-builder) .page-shell { width:calc(100% - 20px); }
  .visual-composer { padding:6px; border-radius:20px; }.visual-save-bar { padding:12px; gap:8px; flex-wrap:wrap; bottom:6px; }
  .visual-save-bar > div { flex:1; justify-content:flex-end; }.visual-empty-start { left:32px; top:80px; }
  .home-journey { padding:12px; gap:8px; font-size:.75rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button { transition:none; }.button:hover { transform:none; } }

/* Contrast fixes for legacy cards that used light text on dark surfaces. */
.panel-home-header h1 { font-size:clamp(1.7rem,4vw,2.6rem); }
.received-code-select span, .received-code-select small, .received-code-date,
.received-code-item time, .received-code-meta { color:var(--muted); }
.received-code-actions button, .received-code-title-form button { color:var(--primary-dark); background:#f1f7fa; border-color:var(--line); }
.home-use-grid .received-code-actions .home-copy-button { color:var(--primary-dark); background:#e5f3ee; border-color:#9fc9c0; }
.legal-identity dd { color:var(--ink); }.legal-pending { color:var(--muted); }
.friends-layout, .friend-list-panel, .friend-chat-panel, .friend-chat-header,
.friend-message-form, .friend-code-share-form, .friend-invite-shell { color:var(--ink); background:#fff; border-color:var(--line); }
.friend-list-item { color:var(--ink); background:#f7fafc; border-color:var(--line); }
.friend-list-item.active { background:#e6f4ef; border-color:#88bca9; }
.friend-message { color:var(--ink); background:#f0f5fa; border-color:#cfdee9; }
.friend-message.is-own { color:#245c4d; background:#e4f3eb; border-color:#b5d5c6; }
.share-mode-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; border:0; margin:14px 0; padding:0; }
.share-mode-picker label { display:grid; grid-template-columns:auto 1fr; gap:5px 7px; align-items:center; padding:12px 9px; border:1px solid #cbdce5; border-radius:14px; cursor:pointer; background:#fff; color:var(--ink, #213247); }
.share-mode-picker label:has(input:checked) { background:#e3f4ef; border-color:#168c83; }
.share-mode-picker input { width:16px; height:16px; accent-color:#087f79; }
.share-mode-picker small { grid-column:1 / -1; font-size:11px; line-height:1.5; }
.share-mode-picker span { font-size:13px; font-weight:700; }
.share-publish-confirm { border-radius:14px; padding:12px; background:#f0f7f9; margin-bottom:12px; }
.share-publish-confirm p { font-size:13px; line-height:1.7; margin:0 0 12px; }