/* UG-UI-20261015-02 · Blue dream theme.
 * Final shared visual layer: tokens, surfaces and interaction states only.
 * Keep scene illustrations, routing, header geometry and feature layouts intact. */
body {
  background: radial-gradient(ellipse at 12% 10%, #dcecff, transparent 55%),
    radial-gradient(ellipse at 90% 85%, #d9e1fb, transparent 50%), #eaf2ff;
}
.phone {
  --ink: #253c62;
  --muted: #617594;
  --blue: #c4defb;
  --blue-deep: #547ee0;
  --cream: #f3f7ff;
  --paper: #fff;
  --line: #d9e5f6;
  --dream-surface: rgba(255,255,255,.88);
  --dream-soft: #edf4ff;
  --dream-selected: #dfeaff;
  --dream-border: #91adee;
  --dream-gradient: linear-gradient(135deg, #edf4ff, #e4f3ff 60%, #eeedff);
  --dream-shadow: 0 10px 30px rgba(63,101,169,.065);
  --button-blue: #426bd4;
  --button-blue-hover: #325ac2;
  --button-blue-soft: #edf3ff;
  --button-blue-border: #d2dff8;
  --button-blue-text: #365db5;
  color: var(--ink);
  background: radial-gradient(ellipse at 100% 5%, #e2edff, transparent 55%),
    linear-gradient(170deg, #eff7ff, #f5f6ff 70%, #ebf4ff);
}
.phone.theme-dark {
  --ink: #e4ecff;
  --muted: #a4b6d4;
  --blue: #29456d;
  --blue-deep: #9abaff;
  --cream: #17263f;
  --paper: #1c2f4b;
  --line: #364c70;
  --dream-surface: #1e314f;
  --dream-soft: #233c60;
  --dream-selected: #304d7c;
  --dream-border: #8daef2;
  --dream-gradient: linear-gradient(135deg, #243e63, #1f3a58 60%, #2b365a);
  --dream-shadow: 0 10px 30px rgba(4,13,31,.15);
  --button-blue: #426bd4;
  --button-blue-hover: #325ac2;
  --button-blue-soft: #263e65;
  --button-blue-border: #405b85;
  --button-blue-text: #c2d5ff;
  background: linear-gradient(155deg, #172b46, #152138 70%, #1c2c4b);
}
.phone.theme-dark #appMain { background: transparent; }
.phone.theme-dark::before { opacity: .15; }
.phone .subpage-header {
  background: rgba(242,247,255,.92);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 18px rgba(63,101,169,.035);
}
.phone.theme-dark .subpage-header { background: rgba(23,38,63,.94); }
.phone .subpage-header h1 { color: var(--ink); font-weight: 700; }
.phone .subpage-header .subpage-back { color: var(--button-blue-text); }
.phone .navigation-drawer { background: var(--cream); }
.phone :is(.soft-card, .record-card, .settings-list, .feedback-panel, .profile-shortcut),
.phone .settings-shortcuts > .setting-detail {
  background: var(--dream-surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--dream-shadow);
}
.phone .primary { border-radius: 16px; box-shadow: 0 8px 20px rgba(66,107,212,.16); }
.phone .secondary { border-radius: 16px; box-shadow: none; }
.phone .secondary:hover:not(:disabled), .phone .chip:hover:not(:disabled) {
  background: var(--dream-selected);
  color: var(--button-blue-text);
}
.phone .content-heading small { font-size: 12px; color: var(--muted); line-height: 1.5; }
.phone .conversation-composer { border-color: var(--line); box-shadow: var(--dream-shadow); }
.phone .chip.selected,
.phone .chip.selected:hover:not(:disabled),
.phone .chip[aria-pressed="true"],
.phone .chip[aria-pressed="true"]:hover:not(:disabled),
.phone .mentalmodel-screen :is(.mm-choice.selected, .mm-likert-opt.selected, .mm-choose-btn.chosen) {
  color: var(--button-blue-text);
  background: var(--dream-selected);
  border-color: var(--dream-border);
  box-shadow: inset 0 0 0 1px var(--dream-border);
}
.phone button:focus-visible,
.phone :is(input, textarea, select):focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
}

/* Unify the imported mental-model module without changing its semantics or grids. */
.phone .mentalmodel-screen :is(.mm-method-card, .mm-rec-card, .mm-arch-banner, .mm-radar-wrap) {
  background: var(--dream-surface);
  border-color: var(--line);
  box-shadow: var(--dream-shadow);
}
.phone .mentalmodel-screen :is(.mm-profile-banner, .mm-ai-card, .mm-entry) {
  background: var(--dream-gradient);
  border-color: var(--line);
  color: var(--ink);
}
.phone .mentalmodel-screen :is(.mm-progress-bar i, .mm-bar i, .mm-pct-fill) {
  background: linear-gradient(90deg, #688ce5, #84c8ec);
}
.phone .mentalmodel-screen .mm-tab.on {
  background: var(--dream-surface);
  color: var(--button-blue-text);
  box-shadow: var(--dream-shadow);
}
.phone .mentalmodel-screen .mm-info-list li { display: grid; gap: 4px; }
.phone .mentalmodel-screen .plan-label { color: var(--muted); }
.phone .mentalmodel-screen .quiet-note { background: var(--dream-soft); color: var(--muted); border-left-color: var(--dream-border); }
.phone .mentalmodel-screen .mm-info-list li + li { padding-top: 10px; border-top: 1px solid var(--line); }
.phone .mentalmodel-screen .mm-choice { border-radius: 16px; }
.phone .mentalmodel-screen .mm-choice-letter { background: var(--dream-soft); color: var(--button-blue-text); }
.phone .mentalmodel-screen .mm-rec-add.chosen {
  background: var(--button-blue);
  border-color: var(--button-blue);
  color: #fff;
}
@media print {
  body, .phone, .phone.theme-dark { background: white; color: #253c62; }
}