/* ============================
  root (light)
  --variables
  ============================ */
:root {
  --primary-border-color: rgba(0, 0, 0, 0.1);
  --bg-primary: #e9eaec;
  --bg-secondary: #f6f6f7;
  --bg: #e9eaec;
  --panel: #f6f6f7;
  --ink: #17191e;
  --muted: #6d7481;
  --line: var(--primary-border-color);
  --mint: #44cc77;
  --amber: #ffb800;
  --violet: #6d49ff;
  --red: #ee2c4a;
  --blue: #3f8cff;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-main-screen: 32px;
  --shadow-soft: 0 18px 42px rgba(20, 29, 39, 0.12);
  --shadow-float: 0 10px 24px rgba(20, 29, 39, 0.16);
  --popup-surface: #f4f5f8;
  --popup-border: var(--primary-border-color);
  --popup-overlay: rgba(15, 22, 30, 0.36);
  --popup-overlay-blur: 6px;
  --surface-elevated: #ffffff;
  --surface-hover: #eef2f8;
  --card-bg: #ffffff;
  --glass-bg: rgba(248, 249, 251, 0.9);
  --glass-border: var(--primary-border-color);
  --goal-toolbar-glass-bg: rgba(246, 249, 253, 0.2);
  --goal-toolbar-glass-shadow: 0 16px 30px rgba(14, 20, 32, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  --goal-toolbar-icon: #233247;
  --goal-toolbar-icon-active: #121a2c;
  --popup-trigger-border: var(--primary-border-color);
  --popup-trigger-bg: #ffffff;
  --popup-trigger-text: #2f3a4d;
  --popup-trigger-shadow: 0 10px 22px rgba(20, 29, 39, 0.16);
  --popup-trigger-active-bg: #131723;
  --popup-trigger-active-border: var(--primary-border-color);
  --popup-trigger-active-text: #ffffff;
  --chip-btn-bg: #ffffff;
  --chip-btn-text: #313949;
  --chip-btn-active-bg: #131723;
  --chip-btn-active-border: var(--primary-border-color);
  --chip-btn-active-text: #ffffff;
  --add-toolbar-glass-bg: rgba(246, 249, 253, 0.2);
  --add-toolbar-glass-shadow: 0 16px 30px rgba(14, 20, 32, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  --add-toolbar-icon: #233247;
  --add-option-border: var(--primary-border-color);
  --add-option-bg: #ffffff;
  --add-option-hover-bg: #f1f5fb;
  --section-divider: var(--primary-border-color);
  --section-actions-divider: var(--primary-border-color);
  --section-actions-bg: #f5f6f9;
  --section-title: #202530;
  --goal-header-bg: var(--card-bg);
  --goal-header-title: #121826;
  --goal-header-progress: #12202d;
  --goal-header-status: #3a4556;
  --goal-progress-track-bg: rgba(157, 182, 194, 0.22);
  --view-stack-bg: transparent;
  --journey-board-bg: transparent;
  --journey-board-grid: rgba(112, 125, 142, 0.08);
  --journey-axis-color: #2f7cff;
  --stage-marker-bg: #f4f4f5;
  --stage-marker-border: var(--primary-border-color);
  --ws-card-border: var(--primary-border-color);
  --ws-card-bg: var(--card-bg);
  --ws-card-shadow: 0 10px 24px rgba(10, 14, 22, 0.12);
  --ws-name-color: #202530;
  --ws-dot-ring: 0 0 0 2px rgba(255, 255, 255, 0.95);
  --stream-card-border: var(--primary-border-color);
  --stream-card-bg: var(--card-bg);
  --stream-card-title: var(--ink);
  --stream-card-latest: #2b3341;
  --pill-on-track-bg: var(--mint);
  --pill-on-track-text: #ffffff;
  --pill-waiting-bg: var(--amber);
  --pill-waiting-text: #ffffff;
  --pill-blocked-bg: var(--red);
  --pill-blocked-text: #ffffff;
  --transparent: transparent;
  --brand-dot-gradient: linear-gradient(145deg, #f25d7e, #3f8cff);
  --search-input-bg: #f0f0f0;
  --search-input-focus-border: #76a3ff;
  --stats-strip-border: var(--primary-border-color);
  --stats-strip-bg: #ffffff;
  --stat-title-color: #1e2a2a;
  --stat-label-color: #6e7a7b;
  --stat-bad-color: #d83c5c;
  --section-head-color: #1d2828;
  --count-pill-text: #ffffff;
  --goal-overview-border: var(--primary-border-color);
  --goal-overview-shadow: 0 12px 28px rgba(24, 34, 43, 0.08);
  --goal-overview-shadow-hover: 0 16px 28px rgba(24, 34, 43, 0.12);
  --goal-overview-title: #1f2a2b;
  --goal-overview-progress: #263235;
  --goal-overview-track-bg: #dce2e2;
  --goal-overview-track-fill: linear-gradient(90deg, #36c9b7, #69d8ca);
  --goal-overview-status: #4f5d66;
  --goal-overview-divider: var(--primary-border-color);
  --goal-overview-next: #869092;
  --goal-overview-note: #4d5962;
  --goal-overview-note-strong: #2c363c;
  --goal-overview-footer: #8ea1a4;
  --status-dot-good: var(--mint);
  --status-dot-warn: var(--amber);
  --status-dot-bad: var(--red);
  --attention-title: #202b30;
  --attention-dot-default: #9aa3b2;
  --attention-copy: #5e6971;
  --attention-goal: #93a1a3;
  --attention-eta: #556269;
  --contact-card-border: var(--primary-border-color);
  --contact-name: #202a2f;
  --contact-meta: #637177;
  --contact-link-pill-bg: var(--bg-tertiary);
  /* --contact-link-pill-text: #ffffff; */
  /* --contact-link-pill-subtext: rgba(255, 255, 255, 0.9); */
  --empty-state-border: var(--primary-border-color);
  --empty-state-bg: #fcfdff;
  --empty-state-text: #5e6778;
  --avatar-frost-border: var(--primary-border-color);
  --avatar-frost-bg: #d5ecea;
  --avatar-frost-text: #43c9b9;
  --avatar-ember-border: var(--primary-border-color);
  --avatar-ember-bg: #f3ddd6;
  --avatar-ember-text: #c47259;
  --avatar-sky-border: var(--primary-border-color);
  --avatar-sky-bg: #dcedfb;
  --avatar-sky-text: #548fc7;
  --avatar-night-border: var(--primary-border-color);
  --avatar-night-bg: #d3d8e3;
  --avatar-night-text: #5a647a;
  --avatar-forest-border: var(--primary-border-color);
  --avatar-forest-bg: #ddefdc;
  --avatar-forest-text: #4f8a5b;
  --avatar-rose-border: var(--primary-border-color);
  --avatar-rose-bg: #f7deea;
  --avatar-rose-text: #be5f82;
  --avatar-ocean-border: var(--primary-border-color);
  --avatar-ocean-bg: #d7eef5;
  --avatar-ocean-text: #2f8db8;
  --avatar-sand-border: var(--primary-border-color);
  --avatar-sand-bg: #f4ead2;
  --avatar-sand-text: #b18747;
  --goal-progress-fill: linear-gradient(90deg, #1fb08c, #58d0bb);
  --goal-status-dot-default: #9aa3b2;
  --goal-status-dot-warn: var(--amber);
  --ws-connector-shadow: drop-shadow(0 0 6px rgba(120, 186, 255, 0.2));
  --ws-connector-on-track: var(--mint);
  --ws-connector-waiting: var(--amber);
  --ws-connector-blocked: var(--red);
  --ws-status-dot-default: #9aa3b2;
  --ws-status-on-track: var(--mint);
  --ws-status-waiting: var(--amber);
  --ws-status-blocked: var(--red);
  --ws-status-border-on-track: var(--primary-border-color);
  --ws-status-border-waiting: var(--primary-border-color);
  --ws-status-border-blocked: var(--primary-border-color);
  --status-pill-text: #ffffff;
  --dialog-note-color: #4f5b6d;
  --dialog-empty-note-color: #677386;
  --field-label-color: #616d84;
  --field-input-text: #2c3548;
  --field-input-bg: #f0f0f0;
  --field-input-placeholder: #747d90;
  --field-input-focus-border: #1f2633;
  --field-input-focus-bg: #f8f9fb;
  --field-input-focus-shadow: inset 0 0 0 1px #1f2633;
  --status-switch-border: var(--primary-border-color);
  --status-switch-bg: #ebefee;
  --status-switch-active-bg: #ffffff;
  --status-switch-active-shadow: inset 0 0 0 1px #c7d2d5;
  --action-log-border: var(--primary-border-color);
  --action-entry-border: var(--primary-border-color);
  --action-entry-bg: #f9fbfb;
  --action-entry-title: #556173;
  --btn-border: var(--primary-border-color);
  --btn-bg: #ffffff;
  --btn-text: #41506b;
  --btn-primary-border: var(--primary-border-color);
  --btn-primary-bg: #121a2c;
  --btn-primary-text: #eef3ff;
  --stage-index-bg: #edf2f0;
  --stage-index-text: #637086;
  --stage-remove-border: var(--primary-border-color);
  --stage-remove-bg: #edf1f6;
  --stage-remove-text: #5a667d;
  --toast-bg: #151b28;
  --toast-text: #ffffff;
  --toast-shadow: 0 10px 22px rgba(15, 21, 33, 0.26);
}

:root[data-theme='light'] {
  --bg-primary: #e9eaec;
  --bg-secondary: #f6f6f7;
  --bg-tertiary: rgba(0,0,0,.05);
}

/* ============================
  root (dark)
  --variables
  ============================ */
:root[data-theme='dark'] {
    --mint: #55B17E;
    --mint-bg:rgba(85, 177, 126,.5);
    --amber: #b28400;
    --red: #DC626D;
  --primary-border-color: rgba(255, 255, 255, 0.1);
  --bg-primary: #121314;
  --bg-secondary: #191a1b;
  --bg-tertiary: rgba(255, 255, 255, 0.05);
  --bg: var(--bg-primary);
  --panel: var(--bg-secondary);
  --ink: #e6ebf1;
  --muted: #98a2ad;
  --line: var(--primary-border-color);
  --surface-elevated: #232629;
  --surface-hover: #2b3034;
  --card-bg: #202122;
  --glass-bg: rgba(30, 33, 36, 0.86);
  --glass-border: var(--primary-border-color);
  --popup-surface: #202122;
  --popup-border: var(--primary-border-color);
  --popup-overlay: rgba(3, 5, 7, 0.56);
  --goal-toolbar-glass-bg: rgba(24, 27, 30, 0.42);
  --goal-toolbar-glass-shadow: 0 16px 30px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(74, 80, 87, 0.62);
  --goal-toolbar-icon: #d7e0ea;
  --goal-toolbar-icon-active: #f0f5fb;
  --popup-trigger-border: var(--primary-border-color);
  --popup-trigger-bg: #22272d;
  --popup-trigger-text: #d9e1ea;
  --popup-trigger-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
  --popup-trigger-active-bg: #0f141a;
  --popup-trigger-active-border: var(--primary-border-color);
  --popup-trigger-active-text: #f0f5fb;
  --chip-btn-bg: #262b30;
  --chip-btn-text: #d6dee7;
  --chip-btn-active-bg: #0f141a;
  --chip-btn-active-border: var(--primary-border-color);
  --add-toolbar-glass-bg: rgba(24, 27, 30, 0.42);
  --add-toolbar-glass-shadow: 0 16px 30px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(74, 80, 87, 0.62);
  --add-toolbar-icon: #d7e0ea;
  --add-option-border: var(--primary-border-color);
  --add-option-bg: #262c31;
  --add-option-text: #d7e0ea;
  --add-option-hover-bg: #2d343a;
  --section-divider: var(--primary-border-color);
  --section-actions-divider: var(--primary-border-color);
  --section-actions-bg: #20252b;
  --section-title: #e6edf5;
  --goal-header-bg: var(--card-bg);
  --goal-header-title: #e7ecf2;
  --goal-header-progress: #e7ecf2;
  --goal-header-status: #b7c1cb;
  --goal-progress-track-bg: rgba(81, 94, 108, 0.45);
  --view-stack-bg: #171b1f;
  --journey-board-bg: #171b1f;
  --journey-board-grid: rgba(130, 145, 164, 0.11);
  --journey-axis-color: #5b8dff;
  --stage-marker-bg: #20262d;
  --stage-marker-border: var(--primary-border-color);
  --ws-card-border: var(--primary-border-color);
  --ws-card-bg: var(--card-bg);
  --ws-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  --ws-name-color: #e1e8f0;
  --ws-dot-ring: 0 0 0 2px rgba(24, 28, 33, 0.95);
  --stream-card-border: var(--primary-border-color);
  --stream-card-bg: var(--card-bg);
  --stream-card-title: #e7ecf2;
  --stream-card-latest: #c1cbd6;
  --pill-on-track-bg: var(--mint-bg,--mint);
  --pill-on-track-text: #ffffff;
  --pill-waiting-bg: var(--amber);
  --pill-waiting-text: #ffffff;
  --pill-blocked-bg: var(--red);
  --pill-blocked-text: #ffffff;
  --search-input-bg: #191A1B;
  --search-input-focus-border: #5f7288;
  --stats-strip-border: var(--primary-border-color);
  --stats-strip-bg: var(--card-bg);
  --stat-title-color: #e7ecf2;
  --stat-label-color: #a6b0b8;
  --section-head-color: #e7ecf2;
  --goal-overview-border: var(--primary-border-color);
  --goal-overview-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  --goal-overview-shadow-hover: 0 16px 28px rgba(0, 0, 0, 0.28);
  --goal-overview-title: #e7ecf2;
  --goal-overview-progress: #d7e1ea;
  --goal-overview-track-bg: #2c3339;
  --goal-overview-status: #a8b3bc;
  --goal-overview-divider: var(--primary-border-color);
  --goal-overview-next: #88949e;
  --goal-overview-note: #a8b3bc;
  --goal-overview-note-strong: #d7e1ea;
  --goal-overview-footer: #88949e;
  --attention-title: #e7ecf2;
  --attention-copy: #a8b3bc;
  --attention-goal: #88949e;
  --attention-eta: #a8b3bc;
  --contact-card-border: var(--primary-border-color);
  --contact-name: #e7ecf2;
  --contact-meta: #a8b3bc;
  --empty-state-border: var(--primary-border-color);
  --empty-state-bg: #1b1f24;
  --empty-state-text: #a8b3bc;
  --goal-status-dot-warn: var(--amber);
  --field-label-color: #b6c0cb;
  --field-input-text: #dde5ee;
  --field-input-bg: #191A1B;
  --field-input-placeholder: #8f99a6;
  --field-input-focus-border: #5f7288;
  --field-input-focus-bg: #2b323b;
  --field-input-focus-shadow: inset 0 0 0 1px #5f7288;
  --status-switch-border: var(--primary-border-color);
  --status-switch-bg: #262c31;
  --status-switch-active-bg: #303841;
  --status-switch-active-shadow: inset 0 0 0 1px #475360;
  --action-log-border: var(--primary-border-color);
  --action-entry-border: var(--primary-border-color);
  --action-entry-bg: #252b31;
  --action-entry-title: #9fabb8;
  --btn-border: var(--primary-border-color);
  --btn-bg: #282e35;
  --btn-text: #d7dfe8;
  --btn-primary-border: var(--primary-border-color);
  --btn-primary-bg: #0f141a;
  --btn-primary-text: #f0f5fb;
  --stage-index-bg: #2a3139;
  --stage-index-text: #b9c3ce;
  --stage-remove-border: var(--primary-border-color);
  --stage-remove-bg: #2b3139;
  --stage-remove-text: #c5cfdb;
}

* {
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg-primary);
  color: var(--ink);
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: 500;
}

input,
select,
textarea {
  font-size: 14px;
}

button {
  font-size: 14px;
}

/* ============================
   App Shell
   ============================ */
#app {
  height: 100vh;
}

.canvas-shell {
  max-width: none;
  height: 100vh;
  padding: 14px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.canvas-surface {
  position: relative;
  flex: 1;
  /* border: 1px solid var(--primary-border-color); */
  border-radius: 26px;
  min-height: 0;
  background: var(--transparent);
  box-shadow: none;
  overflow: hidden;
}

.canvas-surface.cards-mode {
  overflow-y: auto;
  overflow-x: hidden;
}

.canvas-header {
  margin: 0;
  padding: 18px 0 8px;
  position: relative;
  z-index: 2;
}

/* ============================
   Toolbars
   ============================ */
.floating-toolbar {
  position: sticky;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(7px);
  box-shadow: var(--shadow-float);
  transform: scale(0.8);
  transform-origin: top center;
  transition: transform 300ms ease;
}

.floating-toolbar.toolbar-expanded,
.floating-toolbar:hover {
  transform: scale(1);
}

#app.form-popup-open .floating-toolbar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#app.form-popup-open .add-toolbar.popup-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.main-toolbar {
  top: 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 18px;
  position: relative;
  justify-content: flex-end;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transform: scale(0.8);
  transform-origin: top center;
  transition: transform 300ms ease;
}

.main-toolbar.toolbar-expanded,
.main-toolbar:hover {
  transform: scale(1);
}

.brand-chip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.brand-chip strong {
  font-weight: 500;
}

.brand-dot {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #0d1117;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-dot img {
  width: 24px;
  height: 24px;
  display: block;
}

.search-wrap {
  flex: 1;
}

.toolbar-actions {
  display: flex;
  gap: 8px;
}

.search-wrap input {
  width: 100%;
  border: 1px solid var(--primary-border-color);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--search-input-bg);
}

.search-wrap input:focus {
  outline: none;
  border-color: var(--search-input-focus-border);
}

.toolbar-icon {
  display: none;
}

.toolbar-label {
  display: inline;
}

.add-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-filter-btn {
  display: none;
}

.composer-launch-btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface-elevated);
  cursor: pointer;
}

.composer-launch-btn:hover {
  background: var(--surface-hover);
}

.theme-toggle-btn {
  min-width: 64px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ============================
   Goal Screen - Glass Bottom Toolbar
   ============================ */
#app.goal-screen .canvas-shell {
  padding-bottom: 10px;
}

#app.goal-screen .main-toolbar {
  position: fixed;
  left: 50%;
  right: auto;
  width: min(92vw, 430px);
  bottom: 16px;
  top: auto;
  transform: translateX(-50%) scale(0.8);
  z-index: 44;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 32px;
  background: var(--goal-toolbar-glass-bg);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: var(--goal-toolbar-glass-shadow);
  transition: transform 300ms ease;
}

#app.goal-screen .main-toolbar.toolbar-expanded {
  transform: translateX(-50%) scale(1);
}

#app.goal-screen .main-toolbar .brand-chip,
#app.goal-screen .main-toolbar .search-wrap {
  display: none;
}

#app.goal-screen .main-toolbar .toolbar-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

#app.goal-screen .main-toolbar .toolbar-actions .composer-launch-btn {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: var(--transparent);
  box-shadow: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  -webkit-tap-highlight-color: transparent;
}

#app.goal-screen .main-toolbar .toolbar-actions .composer-launch-btn:hover {
  background: var(--transparent);
}

#app.goal-screen .main-toolbar .toolbar-actions .composer-launch-btn:active,
#app.goal-screen .main-toolbar .toolbar-actions .composer-launch-btn.active,
#app.goal-screen .main-toolbar .toolbar-actions .composer-launch-btn[aria-expanded="true"],
#app.goal-screen .main-toolbar .toolbar-actions .composer-launch-btn[aria-pressed="true"] {
  border-radius: 999px;
  background: var(--goal-toolbar-glass-bg);
  box-shadow: inset 0 0 0 1px var(--glass-border);
}

#app.goal-screen .mobile-filter-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

#app.goal-screen .main-toolbar .toolbar-actions .toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--goal-toolbar-icon);
}

#app.goal-screen .mobile-filter-btn.active .toolbar-icon {
  color: var(--goal-toolbar-icon-active);
}

#app.goal-screen .main-toolbar .toolbar-actions .toolbar-label {
  display: none;
}

/* ============================
   Filter Toolbar & Popup
   ============================ */
.filter-toolbar {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: auto;
  margin: 0;
  padding: 0;
  display: block;
  background: var(--transparent);
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  z-index: 42;
  pointer-events: none;
}

#app.goal-screen .filter-toolbar {
  position: fixed;
  left: 50%;
  right: auto;
  width: min(92vw, 430px);
  top: auto;
  bottom: 16px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 45;
}

.filter-popup-trigger {
  border: 1px solid var(--popup-trigger-border);
  border-right: 0;
  background: var(--popup-trigger-bg);
  color: var(--popup-trigger-text);
  border-radius: 14px 0 0 14px;
  padding: 12px 10px;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  pointer-events: auto;
  box-shadow: var(--popup-trigger-shadow);
}

.filter-popup-trigger.active {
  background: var(--popup-trigger-active-bg);
  border-color: var(--popup-trigger-active-border);
  color: var(--popup-trigger-active-text);
}

#app.goal-screen .filter-popup-trigger {
  display: none;
}

.filter-popup-panel {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 420px;
  max-width: min(92vw, 520px);
  border: 1px solid var(--popup-border);
  border-radius: var(--radius-lg);
  background: var(--popup-surface);
  box-shadow: var(--shadow-soft);
  padding: 18px 24px;
  display: grid;
  gap: 20px;
  z-index: 35;
  pointer-events: auto;
}

.filter-popup-panel .group {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 8px;
}

.filter-popup-panel .label {
  flex: 0 0 100%;
}

#app.goal-screen .filter-popup-panel {
  left: 0;
  right: 0;
  top: auto;
  bottom: calc(16px + 56px + 10px);
  transform: none;
  min-width: 0;
  max-width: none;
  pointer-events: auto;
}

.group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.label {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-btn {
  border: 1px solid var(--line);
  background: var(--chip-btn-bg);
  color: var(--chip-btn-text);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
}

.filter-btn.active {
  background: var(--chip-btn-active-bg);
  color: var(--chip-btn-active-text);
  border-color: var(--chip-btn-active-border);
}

/* ============================
   Add Toolbar (Cards Screen)
   ============================ */
.add-toolbar {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: auto;
  margin: 0;
  padding: 0;
  display: block;
  background: var(--transparent);
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  z-index: 42;
  pointer-events: none;
}

#app:not(.goal-screen) .canvas-shell {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

#app:not(.goal-screen) .canvas-surface,
#app:not(.goal-screen) .floating-toolbar,
#app:not(.goal-screen) .add-toolbar,
#app:not(.goal-screen) .stats-strip,
#app:not(.goal-screen) .goal-overview-card,
#app:not(.goal-screen) .attention-item,
#app:not(.goal-screen) .contact-overview-card,
#app:not(.goal-screen) .contact-link-pill {
  border-radius: var(--radius-main-screen);
}

#app:not(.goal-screen) .add-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  width: min(92vw, 430px);
  top: auto;
  bottom: 16px;
  transform: scale(0.8);
  transform-origin: bottom center;
  z-index: 44;
  margin: 0 auto;
  padding: 6px 8px;
  border: 0;
  border-radius: 32px;
  background: var(--add-toolbar-glass-bg);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: var(--add-toolbar-glass-shadow);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  transition: transform 300ms ease;
}

#app:not(.goal-screen) .add-toolbar.toolbar-expanded,
#app:not(.goal-screen) .add-toolbar:hover {
  transform: scale(1);
}

#app:not(.goal-screen) .add-popup-trigger {
  width: auto;
  flex: 1 1 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--transparent);
  box-shadow: none;
  writing-mode: initial;
  text-orientation: initial;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

#app:not(.goal-screen) .add-popup-trigger:hover {
  background: var(--transparent);
}

#app:not(.goal-screen) .add-trigger-icon {
  color: var(--add-toolbar-icon);
}

#app:not(.goal-screen) .add-popup-trigger.active {
  background: var(--transparent);
  border-color: var(--primary-border-color);
  color: var(--add-toolbar-icon);
}

#app:not(.goal-screen) .add-trigger-label {
  display: none;
}

#app:not(.goal-screen) .add-toolbar-theme-btn {
  width: auto;
  flex: 1 1 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: var(--transparent);
  box-shadow: none;
  pointer-events: auto;
}

#app:not(.goal-screen) .add-toolbar-theme-btn .toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--add-toolbar-icon);
}

#app:not(.goal-screen) .add-toolbar-theme-btn .toolbar-label {
  display: none;
}

#app:not(.goal-screen) .add-toolbar-theme-btn:hover {
  background: var(--transparent);
}

#app:not(.goal-screen) .add-toolbar-signout-btn {
  width: auto;
  flex: 1 1 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: var(--transparent);
  box-shadow: none;
  pointer-events: auto;
}

#app:not(.goal-screen) .add-toolbar-signout-btn .toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--add-toolbar-icon);
}

#app:not(.goal-screen) .add-toolbar-signout-btn .toolbar-label {
  display: none;
}

#app:not(.goal-screen) .add-toolbar-signout-btn:hover {
  background: var(--transparent);
}

#app:not(.goal-screen) .add-popup-panel {
  position: fixed;
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  z-index: 120;
}

#app:not(.goal-screen) .add-popup-panel.view-goal,
#app:not(.goal-screen) .add-popup-panel.view-contact {
  width: min(92vw, 760px);
  max-height: min(86vh, 820px);
  overflow: auto;
}

.add-popup-trigger {
  border: 1px solid var(--popup-trigger-border);
  border-right: 0;
  background: var(--popup-trigger-bg);
  color: var(--popup-trigger-text);
  border-radius: 14px 0 0 14px;
  padding: 12px 10px;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  pointer-events: auto;
  box-shadow: var(--popup-trigger-shadow);
}

.add-popup-trigger.active {
  background: var(--popup-trigger-active-bg);
  border-color: var(--popup-trigger-active-border);
  color: var(--popup-trigger-active-text);
}

.add-popup-panel {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  width: min(92vw, 360px);
  border: 1px solid var(--popup-border);
  border-radius: var(--radius-lg);
  background: var(--popup-surface);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  display: block;
  z-index: 35;
  pointer-events: auto;
}

.add-popup-panel.view-goal,
.add-popup-panel.view-contact {
  width: min(92vw, 720px);
  padding: 0;
  overflow: hidden;
}

.add-popup-menu {
  display: grid;
  gap: 10px;
}

.add-option-btn {
  width: 100%;
  border: 1px solid var(--add-option-border);
  border-radius: 14px;
  background: var(--add-option-bg);
  color: var(--add-option-text);
  padding: 13px 14px;
  text-align: left;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.add-option-btn:hover {
  background: var(--add-option-hover-bg);
}

.add-popup-section {
  border: 0;
  border-radius: 0;
  background: var(--transparent);
  padding: 0;
}

.add-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 20px;
  /* border-bottom: 1px solid var(--section-divider); */
}

.add-popup-head h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--section-title);
}

.add-popup-form {
  display: grid;
  gap: 10px;
  padding: 18px 20px 0;
}

.add-popup-actions {
  margin: 18px -20px 0;
  padding: 12px 20px;
  justify-content: flex-end;
}

.add-toolbar.popup-open,
#app:not(.goal-screen) .add-toolbar.popup-open,
.filter-toolbar.popup-open,
#app.goal-screen .filter-toolbar.popup-open {
  z-index: 41;
}

#app:not(.goal-screen) .add-toolbar.popup-open {
  background: var(--transparent);
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ============================
   Cards Screen
   ============================ */

.cards-dashboard {
  display: grid;
  gap: 32px;
  padding: 6px 0 18px;
}

.cards-empty-message {
  min-height: min(52vh, 420px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.cards-empty-title {
  margin: 4px 0 0;
  font-size: 1.45rem;
  font-weight: 500;
}

.cards-empty-copy {
  margin: 0;
  max-width: 54ch;
  color: var(--empty-state-text);
  font-size: 1rem;
  line-height: 1.45;
}

.cards-empty-icon {
  display: block;
  margin-bottom: 4px;
}

.cards-empty-icon .icon-shell {
  fill: #0d1117;
}

.cards-empty-icon .icon-panel {
  fill: #151b23;
  stroke: #2c3440;
  stroke-width: 1.5;
}

.cards-empty-icon .bubble-a {
  fill: #4cc9f0;
  animation: cards-bubble-float 2300ms ease-in-out infinite;
}

.cards-empty-icon .bubble-b {
  fill: #80ed99;
  animation: cards-bubble-float 2600ms ease-in-out infinite 200ms;
}

.cards-empty-icon .bubble-c {
  fill: #ffb703;
  animation: cards-bubble-float 2400ms ease-in-out infinite 320ms;
}

.cards-empty-icon .icon-bar {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.cards-empty-icon .icon-bar-a {
  stroke: #4cc9f0;
  animation: cards-bubble-pulse 1600ms ease-in-out infinite;
}

.cards-empty-icon .icon-bar-b {
  stroke: #80ed99;
  animation: cards-bubble-pulse 1600ms ease-in-out infinite 180ms;
}

@keyframes cards-bubble-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
    transform-origin: center;
  }
  50% {
    transform: translateY(-6px) scale(1.05);
    transform-origin: center;
  }
}

@keyframes cards-bubble-pulse {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

#app:not(.goal-screen) .cards-dashboard {
  padding-bottom: 120px;
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* border: 1px solid var(--stats-strip-border); */
  border-radius: 14px;
  overflow: hidden;
  background: var(--stats-strip-bg);
}

.stat-tile {
  padding: 16px 18px;
  border-right: 1px solid var(--stats-strip-border);
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

.stat-tile:last-child {
  border-right: 0;
}

.stat-tile strong {
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.45rem;
  line-height: 1.05;
  font-weight: 500;
  color: var(--stat-title-color);
}

.stat-copy {
  min-width: 0;
  min-height: 100%;
  display: inline-grid;
  align-content: center;
  gap: 2px;
}

.stat-label {
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--stat-label-color);
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.stat-subtext {
  margin: 0;
  font-size: 0.64rem;
  color: var(--stat-label-color);
  font-weight: 500;
  opacity: 0.85;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.stat-tile.bad strong {
  color: var(--stat-bad-color);
}

.cards-section {
  display: grid;
  gap: 20px;
}

.section-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.section-head h2 {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 500;
  color: var(--section-head-color);
  letter-spacing: -0.01em;
}

.count-pill {
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 0;
  color: var(--count-pill-text);
  background: var(--blue);
  display: inline-grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 500;
}

.goals-row {
  display: grid;
  grid-template-columns: minmax(0, 360px);
  row-gap: 32px;
}

@media (min-width: 1100px) {
  .goals-row {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    column-gap: 32px;
    row-gap: 32px;
    align-items: stretch;
  }
}

.goal-overview-card {
  border: none;
  border-radius: 20px;
  background: var(--card-bg);
  padding: 27px;
  cursor: pointer;
  box-shadow: var(--goal-overview-shadow);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.goal-overview-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--goal-overview-shadow-hover);
}

.goal-overview-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.goal-overview-top h3 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--goal-overview-title);
}

.goal-overview-progress {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 500;
  color: var(--goal-overview-progress);
}

.goal-overview-track {
  margin-top: 16px;
  height: 8px;
  border-radius: 999px;
  background: var(--goal-overview-track-bg);
  overflow: hidden;
}

.goal-overview-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--goal-overview-track-fill);
  transform-origin: left center;
  animation: dashboard-progress-fill 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.goal-overview-status-row {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--goal-overview-status);
  font-size: 0.74rem;
  font-weight: 500;
}

.goal-overview-status-row span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot.good { background: var(--status-dot-good); }
.dot.warn { background: var(--status-dot-warn); }
.dot.bad { background: var(--status-dot-bad); }

.goal-overview-divider {
  margin: 16px 0 14px;
  border-top: 1px solid var(--goal-overview-divider);
}

.goal-overview-next {
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--goal-overview-next);
  font-weight: 500;
}

.goal-overview-note {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--goal-overview-note);
  line-height: 1.35;
  /* font-weight: 500; */
  overflow-wrap: anywhere;
}

.goal-overview-note strong {
  color: var(--goal-overview-note-strong);
}

.goal-overview-footer {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--goal-overview-footer);
}

.attention-list {
  display: grid;
  row-gap: 24px;
}

.attention-item {
  border: 0;
  border-radius: 14px;
  background: var(--card-bg);
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.attention-left {
  min-width: 0;
  flex: 1 1 auto;
}

.attention-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.attention-title-row strong {
  font-size: 0.98rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--attention-title);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attention-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--attention-dot-default);
}

.attention-dot.on-track { background: var(--status-dot-good); }
.attention-dot.waiting { background: var(--status-dot-warn); }
.attention-dot.blocked { background: var(--status-dot-bad); }

.attention-left p {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--attention-copy);
  white-space: normal;
  overflow-wrap: anywhere;
}

.attention-right {
  flex: 0 1 42%;
  min-width: 0;
  text-align: right;
  display: grid;
  gap: 4px;
}

.attention-goal {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--attention-goal);
}

.attention-eta {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--attention-eta);
  font-size: 0.78rem;
  font-weight: 500;
}

.contacts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 32px;
}

.contact-overview-card {
  border: none;
  border-radius: 18px;
  background: var(--card-bg);
  padding: 24px;
  display: grid;
  gap: 14px;
}

.contact-overview-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.contact-overview-head > div {
  min-width: 0;
}

.contact-chip-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--avatar-frost-border);
  background: var(--avatar-frost-bg);
  color: var(--avatar-frost-text);
  font-size: 0.96rem;
  font-weight: 500;
  cursor: pointer;
}

.contact-chip-avatar.cover-frost {
  border-color: var(--avatar-frost-border);
  background: var(--avatar-frost-bg);
  color: var(--avatar-frost-text);
}

.contact-chip-avatar.cover-ember {
  border-color: var(--avatar-ember-border);
  background: var(--avatar-ember-bg);
  color: var(--avatar-ember-text);
}

.contact-chip-avatar.cover-sky {
  border-color: var(--avatar-sky-border);
  background: var(--avatar-sky-bg);
  color: var(--avatar-sky-text);
}

.contact-chip-avatar.cover-night {
  border-color: var(--avatar-night-border);
  background: var(--avatar-night-bg);
  color: var(--avatar-night-text);
}

.contact-chip-avatar.cover-forest {
  border-color: var(--avatar-forest-border);
  background: var(--avatar-forest-bg);
  color: var(--avatar-forest-text);
}

.contact-chip-avatar.cover-rose {
  border-color: var(--avatar-rose-border);
  background: var(--avatar-rose-bg);
  color: var(--avatar-rose-text);
}

.contact-chip-avatar.cover-ocean {
  border-color: var(--avatar-ocean-border);
  background: var(--avatar-ocean-bg);
  color: var(--avatar-ocean-text);
}

.contact-chip-avatar.cover-sand {
  border-color: var(--avatar-sand-border);
  background: var(--avatar-sand-bg);
  color: var(--avatar-sand-text);
}

.contact-overview-head h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--contact-name);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-overview-head p {
  margin: 3px 0 0;
  color: var(--contact-meta);
  font-size: 0.78rem;
  font-weight: 500;
}

.contact-link-pill {
  border: 0;
  border-radius: 14px;
  background: var(--contact-link-pill-bg);
  min-height: 34px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.contact-link-pill strong {
  font-size: 0.96rem;
  line-height: 1;
  font-weight: 500;
  color: var(--contact-link-pill-text);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-link-pill span:last-child {
  margin-left: auto;
  min-width: 0;
  max-width: 48%;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.6rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--contact-link-pill-subtext);
  font-weight: 500;
}

.section-empty {
  margin: 0;
  color: var(--empty-state-text);
  font-weight: 500;
}

.empty-state {
  margin-top: 20px;
  border-radius: 18px;
  border: 1px dashed var(--empty-state-border);
  padding: 24px;
  text-align: center;
  background: var(--empty-state-bg);
}

.empty-state h2 {
  margin: 0 0 8px;
  font-weight: 500;
}

.empty-state p {
  margin: 0;
  color: var(--empty-state-text);
}

:root[data-theme='dark'] .stats-strip {
  border-color: var(--stats-strip-border);
  background: var(--stats-strip-bg);
}

:root[data-theme='dark'] .stat-tile {
  border-right-color: var(--stats-strip-border);
}

:root[data-theme='dark'] .stat-tile strong {
  color: var(--stat-title-color);
}

:root[data-theme='dark'] .stat-tile span {
  color: var(--stat-label-color);
}

:root[data-theme='dark'] .section-head h2 {
  color: var(--section-head-color);
}

:root[data-theme='dark'] .count-pill {
  border-color: var(--primary-border-color);
  color: var(--count-pill-text);
  background: var(--blue);
}

:root[data-theme='dark'] .goal-overview-card,
:root[data-theme='dark'] .attention-item,
:root[data-theme='dark'] .contact-overview-card {
  border: none;
  background: var(--card-bg);
  box-shadow: var(--goal-overview-shadow);
}

:root[data-theme='dark'] .goal-overview-top h3,
:root[data-theme='dark'] .attention-title-row strong,
:root[data-theme='dark'] .contact-overview-head h3 {
  color: var(--contact-name);
}

:root[data-theme='dark'] .contact-link-pill strong {
  color: var(--contact-link-pill-text);
}

:root[data-theme='dark'] .goal-overview-progress,
:root[data-theme='dark'] .goal-overview-note strong {
  color: var(--goal-overview-note-strong);
}

:root[data-theme='dark'] .goal-overview-track {
  background: var(--goal-overview-track-bg);
}

:root[data-theme='dark'] .goal-overview-status-row,
:root[data-theme='dark'] .goal-overview-note,
:root[data-theme='dark'] .attention-left p,
:root[data-theme='dark'] .attention-eta,
:root[data-theme='dark'] .contact-overview-head p,
:root[data-theme='dark'] .section-empty,
:root[data-theme='dark'] .empty-state p {
  color: var(--goal-overview-note);
}

:root[data-theme='dark'] .goal-overview-next,
:root[data-theme='dark'] .goal-overview-footer,
:root[data-theme='dark'] .attention-goal {
  color: var(--goal-overview-next);
}

:root[data-theme='dark'] .contact-link-pill span:last-child {
  color: var(--contact-link-pill-subtext);
}

:root[data-theme='dark'] .goal-overview-divider {
  border-top-color: var(--goal-overview-divider);
}

:root[data-theme='dark'] .contact-link-pill {
  border-color: var(--primary-border-color);
  background: var(--contact-link-pill-bg);
}

:root[data-theme='dark'] .empty-state {
  border-color: var(--empty-state-border);
  background: var(--empty-state-bg);
}

:root[data-theme='dark'] .empty-state h2 {
  color: var(--contact-name);
}

/* ============================
   Goal Summary Card
   ============================ */
.goal-summary-mobile {
  display: none;
}

.goal-summary-collapse-handle {
  display: none;
}

.goal-breadcrumb {
  color: var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin-bottom: 6px;
}

.goal-title-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.goal-title-row h1 {
  margin: 0;
}

.goal-header-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--goal-header-bg);
  padding: 16px 18px 14px;
  box-shadow: none;
  display: grid;
  gap: 10px;
}

.goal-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.goal-header-top h1 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 500;
  color: var(--goal-header-title);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.goal-progress-value {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  color: var(--goal-header-progress);
  white-space: nowrap;
  flex-shrink: 0;
}

.goal-progress-value strong {
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 500;
}

.goal-progress-value span {
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.78;
}

.goal-progress-track {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--goal-progress-track-bg);
  overflow: hidden;
}

.goal-progress-track > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--goal-progress-fill);
  transform-origin: left center;
  animation: dashboard-progress-fill 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.goal-status-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.goal-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--goal-header-status);
}

.goal-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--goal-status-dot-default);
  flex-shrink: 0;
}

.goal-status-chip.good .goal-status-dot { background: var(--mint); }
.goal-status-chip.warn .goal-status-dot { background: var(--goal-status-dot-warn); }
.goal-status-chip.bad  .goal-status-dot { background: var(--red); }

.goal-header-next {
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--goal-overview-next);
  font-weight: 500;
}

.goal-header-next-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--goal-overview-note);
  line-height: 1.35;
  /* font-weight: 500; */
  overflow-wrap: anywhere;
}

.goal-header-next-note strong {
  color: var(--goal-overview-note-strong);
}

/* ============================
   Journey Board (Map View)
   ============================ */
.view-stack {
  position: absolute;
  inset: 128px 0 16px;
  border-radius: 18px;
  overflow: hidden;
  /* background: var(--view-stack-bg); */
}

.journey-board {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--journey-board-bg);
  background-image: linear-gradient(var(--journey-board-grid) 1px, var(--transparent) 1px),
    linear-gradient(90deg, var(--journey-board-grid) 1px, var(--transparent) 1px);
  background-size: 36px 36px;
}

.connector-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.ws-connector {
  opacity: 0;
  animation: ws-connector-fade 220ms ease-out forwards;
  animation-delay: var(--pop-delay, 0ms);
}

.ws-connector-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: var(--ws-connector-shadow);
}

.ws-connector.status-on-track { color: var(--ws-connector-on-track); }
.ws-connector.status-waiting  { color: var(--ws-connector-waiting); }
.ws-connector.status-blocked  { color: var(--ws-connector-blocked); }

.journey-axis {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 56%;
  height: 1px;
  border-radius: 999px;
  background: var(--journey-axis-color);
  transform: translateY(-50%);
  z-index: 2;
}

.journey-axis.vertical {
  left: 36%;
  top: 4%;
  bottom: 4%;
  right: auto;
  width: 1px;
  height: auto;
  transform: translateX(-50%);
}

.stage-marker {
  position: absolute;
  top: 56%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--stage-marker-bg);
  border: 2px solid var(--stage-marker-border);
  z-index: 3;
}

.stage-marker.vertical {
  top: auto;
  left: 36%;
  transform: translate(-50%, -50%);
}

.stage-marker.active {
  background: var(--mint);
  border-color: var(--primary-border-color);
}

.stage-label {
  position: absolute;
  top: calc(56% + 18px);
  transform: translateX(-50%);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  font-size: 0.56rem;
  font-weight: 400;
  white-space: nowrap;
  z-index: 3;
}

.stage-label.vertical {
  top: auto;
  left: calc(36% + 18px);
  transform: translateY(-50%);
}

.stage-label.active {
  color: var(--mint);
}

/* ============================
   Workstream Nodes
   ============================ */
.ws-node {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 4;
  touch-action: none;
  user-select: none;
  cursor: grab;
  width: auto;
  max-width: min(40vw, 280px);
}

.ws-node.balloon-pop .ws-card {
  opacity: 0;
  transform-origin: 50% 100%;
  animation: ws-balloon-pop 620ms cubic-bezier(0.18, 0.9, 0.24, 1.2) forwards;
  animation-delay: var(--pop-delay, 0ms);
}

.ws-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 16px;
  border: 1px solid var(--ws-card-border);
  background: var(--ws-card-bg);
  padding: 14px 14px 12px;
  box-shadow: var(--ws-card-shadow);
  text-align: left;
  width: fit-content;
  max-width: 100%;
}

.ws-card-head {
  display: flex;
  align-items: center;
  gap: 0;
}

.ws-card-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ws-status-dot {
  position: static;
  flex: 0 0 auto;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ws-status-dot-default);
  box-shadow: var(--ws-dot-ring);
}

.ws-node.dragging {
  cursor: grabbing;
}

.ws-name {
  margin-top: 0;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ws-name-color);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-on-track .ws-status-dot { background: var(--ws-status-on-track); }
.status-on-track .ws-card        { border-color: var(--ws-status-border-on-track); }
.status-waiting  .ws-status-dot  { background: var(--ws-status-waiting); }
.status-waiting  .ws-card        { border-color: var(--ws-status-border-waiting); }
.status-blocked  .ws-status-dot  { background: var(--ws-status-blocked); }
.status-blocked  .ws-card        { border-color: var(--ws-status-border-blocked); }

@keyframes ws-balloon-pop {
  0% {
    opacity: 0;
    transform: scale(0.22) translateY(18px);
    filter: saturate(0.8);
  }
  62% {
    opacity: 1;
    transform: scale(1.08) translateY(-4px);
    filter: saturate(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: saturate(1);
  }
}

@keyframes ws-connector-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.96;
  }
}

@keyframes dashboard-progress-fill {
  0% {
    transform: scaleX(0);
    opacity: 0.5;
  }
  65% {
    transform: scaleX(1.02);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-node.balloon-pop .ws-card,
  .ws-connector,
  .goal-overview-track span,
  .goal-progress-track > span {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ============================
   Stream View
   ============================ */
.stream-view {
  height: 100%;
  overflow: auto;
  padding: 0;
  background: var(--transparent);
}

.stream-card {
  border: 0;
  background: var(--stream-card-bg);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 24px;
  cursor: pointer;
}

.stream-card h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--stream-card-title);
}

.stream-meta {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

.stream-latest {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--stream-card-latest);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--status-pill-text);
  letter-spacing: 0.02em;
  text-transform: none;
}

.status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill.on-track { background: var(--pill-on-track-bg); color: var(--status-pill-text); }
.status-pill.waiting  { background: var(--pill-waiting-bg); color: var(--status-pill-text); }
.status-pill.blocked  { background: var(--pill-blocked-bg); color: var(--status-pill-text); }

/* ============================
   Dialogs
   ============================ */
.dialog-shell {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
}

.dialog-shell.open {
  display: block;
}

.dialog-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--popup-overlay);
  backdrop-filter: blur(var(--popup-overlay-blur));
  -webkit-backdrop-filter: blur(var(--popup-overlay-blur));
}

.dialog-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 95vw);
  transform: translate(-50%, -50%);
  background: var(--popup-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--popup-border);
  box-shadow: var(--shadow-soft);
  max-height: 88vh;
  overflow: auto;
}

.dialog-panel-compact {
  width: min(620px, 95vw);
}

.dialog-panel-wide {
  width: min(760px, 95vw);
}

.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  /* border-bottom: 1px solid var(--section-divider); */
}

.dialog-head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.mobile-dialog-topbar {
  display: contents;
}

.mobile-circle-btn,
.mobile-save-btn {
  display: none;
}

.details-dialog-head {
  justify-content: center;
}

.dialog-body {
  padding: 18px 20px 0;
}

.details-tab-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--primary-border-color);
  border-radius: 999px;
  padding: 4px;
  background: var(--status-switch-bg);
  width: fit-content;
  max-width: 100%;
}

.details-tab-pill {
  border: 0;
  background: transparent;
  color: var(--btn-text);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.details-tab-pill.active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: 0 6px 14px rgba(18, 26, 44, 0.24);
}

.details-tab-panel {
  display: none;
}

.details-tab-panel.active {
  display: block;
}

.dialog-note {
  margin: 0 0 14px;
  color: var(--dialog-note-color);
  max-width: 54ch;
}

.dialog-section-title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 500;
}

.dialog-empty-note {
  margin: 0;
  color: var(--dialog-empty-note-color);
}

.dialog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dialog-grid-spaced {
  margin-top: 10px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 18px -20px 0;
  padding: 12px 20px;
}

/* ============================
   Form Fields
   ============================ */
.field {
  display: grid;
  gap: 7px;
}

.field-spaced {
  margin-top: 10px;
}

.field label {
  color: var(--field-label-color);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--primary-border-color);
  border-radius: 12px;
  padding: 12px 13px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--field-input-text);
  background: var(--field-input-bg);
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--field-input-placeholder);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--field-input-focus-border);
  box-shadow: var(--field-input-focus-shadow);
  background: var(--field-input-focus-bg);
}

.field textarea {
  resize: vertical;
  min-height: 120px;
}

.status-switch {
  position: relative;
  border: 1px solid var(--status-switch-border);
  border-radius: 14px;
  background: var(--status-switch-bg);
  overflow: hidden;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.status-switch::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc((100% - 16px) / 3);
  height: calc(100% - 8px);
  border-radius: 10px;
  background: var(--blue);
  box-shadow: 0 8px 16px rgba(63, 140, 255, 0.24);
  transform: translateX(calc(var(--status-switch-index, 0) * (100% + 4px)));
  transition: transform 220ms cubic-bezier(0.22, 0.8, 0.2, 1);
  z-index: 0;
}

.status-switch[data-active-index="0"] {
  --status-switch-index: 0;
}

.status-switch[data-active-index="1"] {
  --status-switch-index: 1;
}

.status-switch[data-active-index="2"] {
  --status-switch-index: 2;
}

.status-switch button {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 10px;
  background: var(--transparent);
  padding: 10px 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  color: var(--btn-text);
  transition: color 180ms ease;
}

.status-switch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: var(--ws-dot-ring);
}

.status-switch-dot.status-on-track {
  background: var(--ws-status-on-track);
}

.status-switch-dot.status-waiting {
  background: var(--ws-status-waiting);
}

.status-switch-dot.status-blocked {
  background: var(--ws-status-blocked);
}

.status-switch-label {
  min-width: 0;
}

.status-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.status-switch button.active {
  color: #ffffff;
}

.action-log {
  margin-top: 14px;
  border-top: 1px solid var(--action-log-border);
  padding-top: 10px;
}

.action-entry {
  border: 1px solid var(--action-entry-border);
  border-radius: 12px;
  padding: 10px;
  background: var(--action-entry-bg);
  margin-bottom: 8px;
}

.action-entry strong {
  display: block;
  font-size: 0.78rem;
  color: var(--action-entry-title);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.btn {
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: 999px;
  min-width: 110px;
  padding: 11px 22px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.btn.primary {
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
  background: var(--btn-primary-bg);
}

/* ============================
   Stages Form
   ============================ */
.stage-row {
  display: grid;
  grid-template-columns: 34px 1fr 40px;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.stage-row input,
.inline-row input,
.inline-row select {
  width: 100%;
  border: 1px solid var(--primary-border-color);
  border-radius: 12px;
  padding: 12px 13px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--field-input-text);
  background: var(--field-input-bg);
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.stage-row input::placeholder,
.inline-row input::placeholder {
  color: var(--field-input-placeholder);
}

.stage-row input:focus,
.inline-row input:focus,
.inline-row select:focus {
  outline: none;
  border-color: var(--field-input-focus-border);
  box-shadow: var(--field-input-focus-shadow);
  background: var(--field-input-focus-bg);
}

.stage-index {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--stage-index-bg);
  display: grid;
  place-items: center;
  font-weight: 500;
  color: var(--stage-index-text);
  font-size: 0.9rem;
}

.stage-remove {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--stage-remove-border);
  background: var(--stage-remove-bg);
  font-size: 1.2rem;
  color: var(--stage-remove-text);
  cursor: pointer;
}

.inline-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: 8px;
}

.inline-row-spaced {
  margin-top: 14px;
}

.inline-row .btn {
  min-width: 136px;
}

/* ============================
   Toast
   ============================ */
.saved-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  border-radius: 12px;
  background: var(--toast-bg);
  color: var(--toast-text);
  padding: 10px 14px;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: var(--toast-shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  text-transform: lowercase;
}

.saved-toast.show {
  opacity: 1;
  transform: translateY(0);
}

:root[data-theme='dark'] .dialog-head {
  border-bottom-color: var(--section-divider);
}

:root[data-theme='dark'] .dialog-head h2,
:root[data-theme='dark'] .dialog-section-title {
  color: var(--section-title);
}

:root[data-theme='dark'] .dialog-note,
:root[data-theme='dark'] .dialog-empty-note {
  color: var(--dialog-note-color);
}

:root[data-theme='dark'] .field label {
  color: var(--field-label-color);
}

:root[data-theme='dark'] .search-wrap input {
  border-color: var(--primary-border-color);
  background: var(--search-input-bg);
}

:root[data-theme='dark'] .field input,
:root[data-theme='dark'] .field select,
:root[data-theme='dark'] .field textarea,
:root[data-theme='dark'] .stage-row input,
:root[data-theme='dark'] .inline-row input,
:root[data-theme='dark'] .inline-row select {
  border-color: var(--primary-border-color);
  color: var(--field-input-text);
  background: var(--field-input-bg);
}

:root[data-theme='dark'] .field input::placeholder,
:root[data-theme='dark'] .field textarea::placeholder,
:root[data-theme='dark'] .stage-row input::placeholder,
:root[data-theme='dark'] .inline-row input::placeholder {
  color: var(--field-input-placeholder);
}

:root[data-theme='dark'] .field input:focus,
:root[data-theme='dark'] .field select:focus,
:root[data-theme='dark'] .field textarea:focus,
:root[data-theme='dark'] .stage-row input:focus,
:root[data-theme='dark'] .inline-row input:focus,
:root[data-theme='dark'] .inline-row select:focus {
  border-color: var(--field-input-focus-border);
  box-shadow: var(--field-input-focus-shadow);
  background: var(--field-input-focus-bg);
}

:root[data-theme='dark'] .status-switch {
  border-color: var(--status-switch-border);
  background: var(--status-switch-bg);
}

:root[data-theme='dark'] .status-switch button {
  color: var(--btn-text);
}

:root[data-theme='dark'] .status-switch button.active {
  color: #ffffff;
}

:root[data-theme='dark'] .action-log {
  border-top-color: var(--action-log-border);
}

:root[data-theme='dark'] .action-entry {
  border-color: var(--action-entry-border);
  background: var(--action-entry-bg);
}

:root[data-theme='dark'] .action-entry strong {
  color: var(--action-entry-title);
}

:root[data-theme='dark'] .btn {
  border-color: var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
}

:root[data-theme='dark'] .btn.primary {
  border-color: var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

:root[data-theme='dark'] .stage-index {
  background: var(--stage-index-bg);
  color: var(--stage-index-text);
}

:root[data-theme='dark'] .stage-remove {
  border-color: var(--stage-remove-border);
  background: var(--stage-remove-bg);
  color: var(--stage-remove-text);
}


/* ============================
   Responsive
   ============================ */
@media (max-width: 1320px) {
  .contacts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  body {
    overflow: auto;
  }

  #app,
  .canvas-shell {
    height: auto;
    min-height: 100vh;
  }

  .canvas-shell {
    padding: 32px;
    padding-bottom: 96px;
  }

  #app:not(.goal-screen) .canvas-shell {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  #app:not(.goal-screen) .cards-dashboard {
    padding-bottom: 140px;
  }

  #app.goal-screen .canvas-shell {
    padding-bottom: 10px;
  }

  .brand-chip {
    display: none;
  }

#app:not(.goal-screen) .toolbar-actions {
  display: none;
}

#app:not(.goal-screen) .main-toolbar {
  display: none;
}

#app:not(.goal-screen) .search-wrap {
  flex: 1 1 0;
  min-width: 0;
}

#app:not(.goal-screen) .search-wrap input {
  width: 100%;
}

  .goal-summary-mobile {
    display: block;
    margin: 8px 0 0;
  }

  .goal-summary-collapse-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 16px;
    margin: 8px auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
  }

  .goal-summary-collapse-handle::before {
    content: "";
    width: 36px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 58%, transparent);
  }

  .goal-summary-mobile .goal-header-card.collapsed {
    gap: 8px;
  }

  .goal-summary-mobile .goal-header-card.collapsed .goal-status-row,
  .goal-summary-mobile .goal-header-card.collapsed .goal-overview-divider,
  .goal-summary-mobile .goal-header-card.collapsed .goal-header-next,
  .goal-summary-mobile .goal-header-card.collapsed .goal-header-next-note {
    display: none;
  }

  .goal-summary-mobile[hidden] {
    display: none !important;
  }

  #app.goal-screen .view-stack {
    inset: 176px 0 88px;
  }

  #app.goal-screen .canvas-surface.goal-mobile .view-stack {
    inset: 8px 0 88px;
  }

  #app.goal-screen .canvas-surface.goal-mobile.summary-collapsed .view-stack {
    inset: 0 0 88px;
  }

  #app.goal-screen .stream-view {
    padding-bottom: 88px;
  }

  .filter-toolbar {
    pointer-events: none;
  }

  #app.goal-screen .add-toolbar {
    top: auto;
    bottom: 16px;
    right: 84px;
    transform: none;
    pointer-events: auto;
  }

  #app.goal-screen .add-popup-trigger {
    writing-mode: initial;
    text-orientation: initial;
    border-right: 1px solid var(--popup-trigger-border);
    border-radius: 999px;
    padding: 10px 14px;
    box-shadow: var(--popup-trigger-shadow);
  }

  #app.goal-screen .add-popup-panel {
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(100% + 8px);
    transform: none;
    width: min(96vw, 360px);
  }

  #app.goal-screen .add-popup-panel.view-goal,
  #app.goal-screen .add-popup-panel.view-contact {
    width: min(96vw, 760px);
  }

  .main-toolbar {
    gap: 8px;
  }

  .journey-board.vertical-timeline .ws-node {
    width: auto;
    max-width: min(72vw, 320px);
  }

  .journey-board.vertical-timeline .stage-label.vertical {
    left: calc(36% - 18px);
    transform: translate(-100%, -50%);
    text-align: right;
  }

  .journey-board.vertical-timeline .ws-card {
    padding: 9px 10px;
  }

  .journey-board.vertical-timeline .ws-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
    font-size: 0.84rem;
  }

  .journey-board.vertical-timeline .ws-status {
    font-size: 0.62rem;
  }

  .dialog-grid {
    grid-template-columns: 1fr;
  }

  .inline-row {
    grid-template-columns: 1fr;
  }

  .dialog-panel,
  .dialog-panel-compact,
  .dialog-panel-wide {
    left: 0;
    top: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    transform: none;
    border-radius: 0;
    border: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .add-popup-panel,
  #app.goal-screen .add-popup-panel,
  #app:not(.goal-screen) .add-popup-panel,
  .add-popup-panel.view-goal,
  .add-popup-panel.view-contact,
  #app.goal-screen .add-popup-panel.view-goal,
  #app.goal-screen .add-popup-panel.view-contact,
  #app:not(.goal-screen) .add-popup-panel.view-goal,
  #app:not(.goal-screen) .add-popup-panel.view-contact {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    min-width: 0;
    height: 100dvh;
    max-height: none;
    transform: none;
    border-radius: 0;
    border: 0;
    padding: 0;
    overflow: hidden;
    z-index: 120;
    display: flex;
    flex-direction: column;
  }

  .dialog-shell.open .dialog-panel,
  .dialog-shell.open .dialog-panel-compact,
  .dialog-shell.open .dialog-panel-wide,
  .add-popup-panel.open,
  #app.goal-screen .add-popup-panel.open,
  #app:not(.goal-screen) .add-popup-panel.open {
    animation: fullscreen-popup-slide-up 320ms cubic-bezier(0.22, 0.9, 0.2, 1) both;
  }

  .dialog-head,
  .add-popup-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--popup-surface);
    justify-content: space-between;
  }

  .details-dialog-head {
    justify-content: space-between;
  }

  .dialog-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }

  .add-popup-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: auto;
  }

  .add-popup-form {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
    align-content: start;
    grid-auto-rows: max-content;
  }

  .dialog-actions,
  .add-popup-actions {
    display: none !important;
  }

  .mobile-dialog-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
  }

  .mobile-dialog-topbar .details-tab-title {
    flex: 1;
    min-width: 0;
    justify-content: center;
    margin: 0;
  }

  .mobile-circle-btn,
  .mobile-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    background: var(--goal-toolbar-glass-bg);
    box-shadow: var(--goal-toolbar-glass-shadow);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    color: var(--goal-toolbar-icon-active);
    font: inherit;
  }

  .mobile-circle-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
  }

  .mobile-save-btn {
    border-radius: 999px;
    min-height: 38px;
    padding: 0 14px;
  }

  .dialog-head > h2,
  .add-popup-head > h3,
  .mobile-dialog-topbar > h2 {
    margin: 0;
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stats-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cards-dashboard,
  .cards-section,
  .goals-row,
  .goal-overview-card,
  .attention-list,
  .attention-item,
  .contacts-grid,
  .contact-overview-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  @keyframes fullscreen-popup-slide-up {
    0% {
      opacity: 0.78;
      transform: translateY(100%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }


@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .dialog-shell.open .dialog-panel,
  .dialog-shell.open .dialog-panel-compact,
  .dialog-shell.open .dialog-panel-wide,
  .add-popup-panel.open,
  #app.goal-screen .add-popup-panel.open,
  #app:not(.goal-screen) .add-popup-panel.open {
    animation: none;
  }
}
  .goals-row {
    grid-template-columns: 1fr;
  }

  .attention-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .attention-right {
    width: 100%;
    text-align: left;
  }

  .stat-tile {
    padding: 12px 10px;
  }

  .stat-tile strong {
    font-size: 1rem;
  }

  .stat-tile span {
    font-size: 0.62rem;
  }

  .section-head h2 {
    font-size: 1.6rem;
  }

  .goal-overview-top h3 {
    font-size: 1rem;
  }

  .attention-title-row strong {
    font-size: 0.94rem;
  }

  .contact-overview-head h3 {
    font-size: 1.05rem;
  }

  .contacts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .canvas-shell {
    padding: 24px;
  }

  .saved-toast {
    right: 12px;
    bottom: 12px;
  }

  .stats-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stat-tile {
    padding: 10px 8px;
  }

  .stat-tile strong {
    font-size: 0.9rem;
  }

  .stat-tile span {
    font-size: 0.58rem;
  }

  .goals-row {
    grid-template-columns: 1fr;
  }

  .attention-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .attention-right {
    text-align: left;
  }
}

@media (max-width: 860px) {
  .stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-tile {
    padding: 10px 24px;
    gap: 8px;
  }

  .stat-tile strong {
    min-width: 24px;
    font-size: 1.05rem;
  }

  .stat-label {
    font-size: 0.64rem;
    line-height: 1.12;
  }

  .stat-subtext {
    font-size: 0.56rem;
    line-height: 1.08;
  }
}

button {
  font-size: 14px !important;
}