/* Nature reference: airy mint, forest typography, rounded white surfaces,
   lime actions, and circular icons. Layouts and character illustrations stay. */
:root {
  color-scheme: light;
  --canvas: #e2eee6;
  --surface: #ffffff;
  --surface-raised: #edf3eb;
  --surface-soft: #f3f6f0;
  --ink: #13291d;
  --muted: #657469;
  --line: #e2e9e2;
  --accent: #173e2a;
  --accent-ink: #ffffff;
  --action: #a4e64b;
  --action-ink: #172915;
  --action-hover: #a0dd4b;
  --selected: #edf6e6;
  --selected-line: #89ad6e;
  --radius-card: 28px;
  --radius-control: 20px;
  --radius-hero: 32px;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
html, body { background: var(--canvas); }
button, input, textarea, select { font-family: inherit; }
* { scrollbar-color: #bdcdbd transparent; }
::selection { background: #d5ecbb; color: var(--ink); }

.app-shell { border-color: var(--line); border-radius: 32px; }
.rail { background: #f9fbf7; border-color: var(--line); }
.brand-mark {
  border: 0;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--accent);
  font-weight: 600;
}
.rail-button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--muted);
}
.rail-button.active,
.rail-button.active:hover { background: var(--accent); color: var(--action); }
.rail-button:hover { background: var(--surface-raised); color: var(--accent); }
.rail-profile { width: 48px; height: 48px; border-radius: 50%; }
.rail-profile.active,
.rail-profile.active:hover {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 3px #173e2a0d;
}
.rail-profile.active .rail-avatar { background: var(--action); color: var(--action-ink); }
.ui-icon { width: 23px; height: 23px; }

.assistant-welcome h1,
.route-header h1,
.profile-page-header h1,
.persona-scroll h1,
.empty-state h2 { font-weight: 600; letter-spacing: -.045em; }
.assistant-welcome h1 > span { color: #91a28f; }
.assistant-brand strong,
.sidebar h1,
.chat-heading h2,
.profile-page-card h2,
.persona-feature-copy strong,
.assistant-team-heading strong { font-weight: 600; }
.assistant-route-heading strong,
.assistant-team-card-top strong,
.persona-brand,
.persona-card strong,
.persona-section-heading strong { font-weight: 650; }
.assistant-brand-mark {
  border-radius: 50%;
  background: var(--accent);
  color: var(--action);
  font-weight: 600;
}
.assistant-kicker { color: var(--muted); }
.expedition-visual { border-radius: var(--radius-hero); background: var(--surface-raised); }
.expedition-visual > img { filter: none; }
.expedition-visual figcaption strong { font-weight: 600; }
.expedition-compass { width: 48px; height: 48px; }
.assistant-composer,
.assistant-screen.is-chatting .assistant-composer {
  border-color: #102a1c;
  border-radius: var(--radius-hero);
  background: #102a1c;
  color: #f6fbf3;
}
.assistant-composer:focus-within { border-color: #6c925a; box-shadow: 0 0 0 3px #a4e64b20; }
.composer-caption { color: #c4d8bf; font-weight: 600; }
.assistant-composer textarea { color: #f6fbf3; caret-color: #f6fbf3; }
.assistant-composer textarea::placeholder { color: #becfbb; opacity: 1; }
.assistant-composer-bottom { border-color: #ffffff25; }
.assistant-location-option { color: #d3dfcf; }
.assistant-location-option small { color: #b8ccb2; }
.assistant-location-option input { accent-color: var(--action); }
.assistant-send { border-radius: 999px; background: var(--action); color: var(--action-ink); }
.assistant-send:hover { background: var(--action-hover); }
.assistant-suggestions button { border-radius: 24px; background: var(--surface-soft); }
.assistant-suggestions button:hover { border-color: #b5ccb0; background: var(--surface-raised); }
.assistant-header-action { border-radius: 999px; }
.assistant-header-action:hover,
.assistant-resume:hover { border-color: #b5ccb0; background: var(--surface-raised); }
.assistant-header-action.danger:hover { border-color: #edc5ba; background: #fff1ed; }
.assistant-message-avatar,
.assistant-message.user .assistant-message-avatar { border-radius: 50%; }
.assistant-message.user .assistant-message-bubble {
  border-color: #d8e8cc;
  background: #e7f2dd;
  color: var(--ink);
}
.assistant-message-bubble { border-radius: 4px 24px 24px; }
.assistant-message.user .assistant-message-bubble { border-radius: 24px 4px 24px 24px; }

/* Primary actions use lime with dark text; functional text and focus remain forest. */
.primary-button,
.add-button,
.send-button,
.modal-action,
.profile-screen .modal-action,
.profile-screen #saveAvatar,
.persona-confirm,
.assistant-team-heading button,
.assistant-team-card button,
.assistant-route-followup button,
.route-place-form button,
.route-start,
.route-map-nav {
  border-color: var(--action);
  background: var(--action);
  color: var(--action-ink);
}
.primary-button:hover,
.add-button:hover,
.send-button:hover,
.modal-action:hover,
.profile-screen .modal-action:hover,
.profile-screen #saveAvatar:hover,
.persona-confirm:hover,
.assistant-team-heading button:hover,
.assistant-team-card button:hover,
.assistant-route-followup button:hover,
.route-place-form button:hover,
.route-start:hover,
.route-map-nav:not(.active):hover {
  border-color: var(--action-hover);
  background: var(--action-hover);
  color: var(--action-ink);
}
.primary-button,
.modal-action,
.profile-screen .modal-action,
.profile-screen #saveAvatar,
.persona-confirm,
.assistant-route-followup button,
.assistant-team-heading button,
.assistant-team-card button,
.assistant-team-create,
.route-place-form button,
.route-start,
.route-stop,
.route-map-nav { border-radius: 999px; }
.add-button,
.send-button,
.plain-icon,
.chat-info-button,
.back-button,
.modal-close {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.modal h2 { max-width: calc(100% - 56px); font-weight: 600; }
.modal,
.profile-page-card,
.assistant-team-panel,
.route-control-card,
.route-detail { border-radius: var(--radius-card); }
.modal-tabs { border-radius: 28px; }
.modal-tab { border-radius: 999px; }
.modal-tab.active { border-color: var(--accent); background: var(--accent); color: #ffffff; }
.modal-input,
.profile-screen .modal-input,
.route-place-form input,
.assistant-team-preference select,
.search-wrap,
.composer-inner { border-radius: var(--radius-control); }
.identity-box,
.profile-screen .identity-box { border-radius: 24px; }
.small-button,
.profile-screen .small-button,
.profile-screen .profile-persona button { border-radius: 999px; }
.member-chip { border-radius: 999px; }
.modal-backdrop,
.persona-overlay:not(.persona-inline) { background: rgb(19 41 29 / .22); }
.persona-overlay:not(.persona-inline) .persona-page { border-radius: 32px; }

/* Community selection and conversational surfaces. */
.conversation-item,
.discover-item { border-radius: 24px; }
.conversation-item.selected,
.discover-item:hover,
.member-chip.clickable:hover {
  border-color: #bed3b3;
  background: var(--selected);
  color: var(--ink);
}
.conversation-item:hover { background: var(--surface-soft); }
.message-row.own .message-bubble { border-color: var(--accent); background: var(--accent); color: #ffffff; }
.message-bubble { border-radius: 4px 24px 24px; }
.message-row.own .message-bubble { border-radius: 24px 4px 24px 24px; }
.composer-inner { background: var(--surface-soft); }
.discover-copy small,
.modal-tab:not(.active),
.persona-skip,
.persona-genders button:not(.selected),
.persona-card:not(.selected) small,
.profile-persona-copy small,
.conversation-item:hover .conversation-preview,
.conversation-item:hover .conversation-top time,
.conversation-item.selected .conversation-preview,
.conversation-item.selected .conversation-top time { color: var(--muted); }
.search-wrap input::placeholder,
.composer textarea::placeholder,
.modal-input::placeholder { color: var(--muted); }

/* Route cards and team matching retain warning colors for real risk signals. */
.assistant-route-card { border-radius: 28px; }
.assistant-route-card:hover { border-color: #a9c49a; }
.assistant-route-card.selected { border-color: var(--selected-line); background: var(--selected); }
.assistant-route-scene { background: #e7f1df; color: #7c9d66; }
.assistant-route-scene[data-tone="caution"] { background: #f6ecd5; color: #b88a4b; }
.assistant-route-scene[data-tone="alert"] { background: #f6e5db; color: #b8806f; }
.assistant-route-top span,
.assistant-route-top span:last-child { border-color: var(--line); background: #ffffff; }
.assistant-route-basics span { border-radius: 999px; }
.assistant-route-fact { border-color: var(--line); border-radius: 20px; background: var(--surface-soft); }
.assistant-route-fact-icon { border-radius: 50%; background: #e3eedc; color: var(--accent); }
.assistant-route-fact.tone-muted .assistant-route-fact-icon { background: var(--surface-raised); color: var(--muted); }
.assistant-route-fact.tone-caution { border-color: #f0d6a7; background: #fff7e8; }
.assistant-route-fact.tone-alert { border-color: #f1c9bf; background: #fff0ed; }
.assistant-route-select { border-color: #d3e4c5; background: var(--action); color: var(--action-ink); }
.assistant-route-card.selected .assistant-route-select {
  border-color: #c3d8b3;
  background: #e3efd8;
  color: var(--accent);
}
.assistant-team-card { border-radius: 24px; }
.assistant-team-card-top span { border-color: #d1e1c8; border-radius: 999px; background: #edf5e7; color: #526645; }
.assistant-team-create { border-color: var(--line); background: #ffffff; color: var(--ink); }
.assistant-team-create:hover { border-color: #b5ccb0; background: var(--surface-raised); }
.assistant-team-preference select { background: var(--surface); }

/* Map controls keep independent grid slots and never filter the real map. */
.route-card-icon { border-radius: 50%; }
.route-import { border-color: #b9cdb0; border-radius: 999px; }
.route-import:hover { background: var(--surface-raised); }
.route-stats > div { border-radius: 24px; }
.route-detail-top span:last-child { border-radius: 999px; background: #e8f2e0; color: var(--accent); }
.route-detail-facts > div { border-radius: 18px; background: var(--surface-soft); }
.route-detail-highlights span { background: var(--surface-raised); }
.route-map {
  background:
    repeating-radial-gradient(ellipse at 24% 36%, transparent 0 23px, #a1b59a26 24px 25px, transparent 26px 48px),
    repeating-radial-gradient(ellipse at 94% 100%, transparent 0 31px, #a1b59a1a 32px 33px, transparent 34px 65px),
    #f0f5ec;
}
.route-map-heading > div,
.route-live,
.route-locate,
.route-ip-locate,
.route-status { border-color: var(--line); background: #ffffff; backdrop-filter: none; }
.route-map-heading > div { border-radius: 24px; }
.route-live,
.route-locate,
.route-ip-locate { border-radius: 999px; }
.route-map-empty span { border-color: #c8d9bb; background: #e5efdd; color: var(--accent); }
.route-locate:hover,
.route-ip-locate:hover { border-color: #b5ccb0; background: #eef5e9; }
.route-zoom { width: 50px; border-radius: 999px; }
.route-zoom button { width: 48px; height: 48px; }
.route-map-nav.active,
.route-map-nav.active:hover { border-color: #bd5948; background: #bd5948; color: #ffffff; }
.route-progress progress { accent-color: var(--accent); }
.route-progress progress::-webkit-progress-value { background: var(--accent); }
.route-progress progress::-moz-progress-bar { background: var(--accent); }

/* Preserve the editorial directory and the saturated geometric characters. */
.persona-editorial-feature { border-radius: 28px; background: #edf4e8; }
.persona-feature-copy > span { border-color: #d6e2cf; }
.persona-genders button { border-radius: 999px; }
.persona-genders button.selected {
  border-color: #91af7a;
  background: #eaf4e1;
  color: var(--accent);
}
.persona-genders button:hover { border-color: #9dbb89; }
.persona-card { border-radius: 0; }
.persona-card:hover { border-bottom-color: #9dbb89; background: var(--surface-soft); }
.persona-card.selected { border-bottom-color: var(--accent); border-radius: 4px; background: #edf5e7; }
.persona-card.selected small { color: var(--muted); }
.persona-editorial-feature > img,
.persona-card img { filter: none; }
.profile-screen .profile-persona { border-radius: 24px; }
.profile-screen .profile-persona-art { border-radius: 24px; }
.profile-screen .profile-persona button:hover,
.profile-screen .small-button:hover { border-color: #9dbb89; }
.rail-profile.active { box-shadow: 0 0 0 3px #173e2a0d; }

@media (max-width: 680px) {
  .app-shell { border-radius: 0; }
  .expedition-visual { border-radius: var(--radius-hero); }
  .assistant-suggestions button { border-radius: 22px; }
  .assistant-screen.is-chatting .assistant-composer { border-radius: 28px; }
  .persona-overlay:not(.persona-inline) .persona-page { border-radius: 0; }
  .mobile-tabs {
    inset: auto 16px calc(10px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 32px);
    max-width: 688px;
    height: 62px;
    margin: 0 auto;
    padding: 4px 6px;
    gap: 2px;
    border: 0;
    border-radius: 999px;
    background: #102a1c;
    backdrop-filter: none;
  }
  .mobile-tab {
    min-height: 54px;
    height: 54px;
    gap: 2px;
    border-radius: 999px;
    color: #c4d4bf;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
  }
  .mobile-tab span {
    width: 28px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    color: inherit;
  }
  .mobile-tab .ui-icon { width: 22px; height: 22px; }
  .mobile-tab.active { background: var(--action); color: var(--action-ink); font-weight: 600; }
  .mobile-tab.active span { background: transparent; color: var(--action-ink); }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  body.mobile-editing .toast { bottom: 14px; }
}

@media (prefers-reduced-transparency: reduce) {
  .mobile-tabs { background: #102a1c; backdrop-filter: none; }
}