/* 梦境联想 —— 设计变量 + 基础组件。浅色/深色随 html[data-theme]。 */

:root {
  --bg: #f4f5fa;
  --surface: #ffffff;
  --surface-2: #f8f8fc;
  --border: #e4e6f0;
  --text: #20222e;
  --muted: #7b8196;
  --accent: #5b6bf0;
  --accent-strong: #4757e0;
  --accent-soft: #eceefd;
  --on-accent: #ffffff;
  --success: #1a9e5a;
  --success-soft: #e2f6ec;
  --warn: #b45309;
  --warn-bg: #fdf1d8;
  --warn-bd: #ecd9a8;
  --danger: #d74040;
  --danger-soft: #fdeaea;
  --shadow: 0 10px 30px rgba(32, 34, 46, 0.06);
  --ring: rgba(91, 107, 240, 0.22);
  --radius: 12px;
  --radius-sm: 8px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html[data-theme='dark'] {
  --bg: #13151d;
  --surface: #1b1e29;
  --surface-2: #212532;
  --border: #2b3040;
  --text: #e8eaf2;
  --muted: #98a0b5;
  --accent: #8b96ff;
  --accent-strong: #a3acff;
  --accent-soft: rgba(139, 150, 255, 0.14);
  --on-accent: #151827;
  --success: #3fc380;
  --success-soft: rgba(63, 195, 128, 0.14);
  --warn: #f0b35a;
  --warn-bg: rgba(240, 179, 90, 0.13);
  --warn-bd: rgba(240, 179, 90, 0.3);
  --danger: #f07070;
  --danger-soft: rgba(240, 112, 112, 0.14);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  --ring: rgba(139, 150, 255, 0.3);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
}
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 0.5em; }

.app { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }
.app[hidden] { display: none; }
.app > * { min-width: 0; }
.sidebar { min-width: 0; overflow: hidden; }
.main { min-width: 0; }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  /* 移动端：顶栏 = 左边 logo，选项排到右边（图标恢复，全部显示） */
  .sidebar { flex-direction: row; align-items: center; padding: 6px 10px !important; border-right: none !important; border-bottom: 1px solid var(--border); position: static !important; gap: 8px; }
  .brand { margin-right: 0 !important; min-width: 0; flex: none; }
  .brand-mark svg { width: 20px; height: 20px; }
  .brand-name { font-size: 13px; white-space: nowrap; }
  .brand-sub, .sidebar-foot { display: none; }
  .nav { flex-direction: row !important; gap: 2px; margin: 0 0 0 auto !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 1 1 auto; justify-content: flex-end; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item { white-space: nowrap; padding: 5px 8px; font-size: 13px; border-radius: 6px; gap: 5px; }
  .nav-ico { font-size: 13px; width: 16px; }
  .main { padding: 12px 12px 64px; }
  .card { padding: 15px; }
}
@media (max-width: 400px) {
  .nav-item { font-size: 12px; padding: 5px 7px; }
  .an-grid, .settings-grid { grid-template-columns: 1fr; }
}

/* —— 侧栏 —— */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 0 6px 16px; }
.brand-mark { font-size: 26px; color: var(--accent); line-height: 1; }
.brand-name { font-weight: 700; font-size: 16px; }
.brand-sub { color: var(--muted); font-size: 12px; }
.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.nav-item {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text); font-weight: 500;
}
.nav-item:hover { background: var(--accent-soft); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-strong); }
.nav-ico { opacity: 0.7; width: 18px; text-align: center; }
.sidebar-foot { margin-top: auto; display: flex; justify-content: flex-end; padding: 6px; }

/* —— 主体 —— */
.main { padding: 34px 44px 80px; max-width: 980px; min-width: 0; }
@media (max-width: 760px) { .main { padding: 20px 16px 80px; } }
.view { display: flex; flex-direction: column; gap: 18px; }
.view[hidden] { display: none; }

.page-title { font-size: 22px; font-weight: 700; }
.page-desc { color: var(--muted); font-size: 14px; margin-top: 2px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.card + .card { margin-top: 14px; }
.ghost-card { background: transparent; border: 1px dashed var(--border); border-radius: var(--radius); padding: 18px; color: var(--muted); }

/* —— 表单 —— */
textarea, input[type='text'], input[type='password'], input[type='number'], select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  outline: none;
}
textarea:focus, input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
textarea.dream-input {
  min-height: 150px;
  resize: vertical;
  font-size: 16px;
  line-height: 1.8;
}
label.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.form-row { margin-bottom: 16px; }
.hint { font-size: 12px; color: var(--muted); }

/* —— 按钮 —— */
.btn {
  font: inherit; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 9px 18px; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  transition: opacity 0.12s ease, background 0.12s ease;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
.btn:hover { opacity: 0.92; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.sm { padding: 5px 12px; font-size: 13px; }
.btn.lg { padding: 12px 26px; font-size: 16px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.icon-btn {
  background: transparent; border: none; color: var(--muted);
  font-size: 18px; cursor: pointer; padding: 6px 8px; border-radius: 6px;
}
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }

/* —— chips —— */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 12px; line-height: 1;
  padding: 5px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.chip.kw { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); }
.chip.tag { background: var(--surface-2); }
.chip.emo { background: var(--success-soft); color: var(--success); border-color: transparent; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
}
.badge.llm { background: var(--accent-soft); color: var(--accent-strong); }
.badge.template { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.low { background: var(--surface-2); color: var(--muted); }

/* —— 提示条 —— */
.banner {
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 14px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.6;
}
.banner.warn { background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn); }
.banner.info { background: var(--accent-soft); color: var(--accent-strong); }
.banner.success { background: var(--success-soft); color: var(--success); }
.banner .banner-act { margin-left: auto; white-space: nowrap; }

/* —— 解读结果 —— */
.result-title { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.reading-body { font-size: 15.5px; }
.reading-body h3 { font-size: 16px; margin-top: 22px; margin-bottom: 8px; color: var(--accent-strong); }
.reading-body h3:first-child { margin-top: 0; }
.reading-body p { margin: 0 0 12px; }
.reading-body ul { margin: 0 0 12px; padding-left: 20px; }
.reading-body li { margin-bottom: 4px; }

.matched-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.match-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--surface-2); }
.match-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.match-name { font-weight: 700; font-size: 15px; }
.match-sum { color: var(--muted); font-size: 13px; }
.conf-bar-wrap { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.conf-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.conf-fill { height: 100%; background: var(--accent); border-radius: 99px; }
.conf-txt { font-size: 12px; color: var(--muted); width: 58px; text-align: right; }

/* —— 条目卡片 —— */
.entry-card .match-head { cursor: pointer; }
.entry-body { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; display: none; }
.entry-card.open .entry-body { display: block; }
.entry-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* —— 对话 —— */
.dlg { border: none; border-radius: var(--radius); background: var(--surface); color: var(--text); width: min(680px, 94vw); padding: 0; box-shadow: var(--shadow); }
.dlg::backdrop { background: rgba(10, 12, 20, 0.45); }
.dlg-inner { padding: 22px 24px; }
.dlg-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.confirm-layer { position: fixed; inset: 0; background: rgba(10,12,20,0.45); display: grid; place-items: center; z-index: 50; }
.confirm-layer[hidden] { display: none; }
.confirm-box { background: var(--surface); border-radius: var(--radius); padding: 22px; width: min(420px, 92vw); box-shadow: var(--shadow); }
.confirm-text { margin-bottom: 18px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* —— 历史 —— */
.hist-item { }
.hist-sum { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hist-excerpt { flex: 1; min-width: 200px; color: var(--text); }
.hist-sel { width: auto; margin: 0; accent-color: var(--accent); }
.hist-item.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hist-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.hist-detail { display: none; margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 14px; }
.hist-item.open .hist-detail { display: block; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; color: var(--muted); }

/* —— toast —— */
.toast-root { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 99; align-items: center; }
.toast {
  background: var(--text); color: var(--bg);
  padding: 9px 16px; border-radius: 999px; font-size: 14px;
  box-shadow: var(--shadow); animation: toast-in 0.18s ease;
  max-width: 80vw;
}
.toast.err { background: var(--danger); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* —— misc —— */
.muted { color: var(--muted); }
.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; color: var(--muted); padding: 40px 10px; }
.divider { height: 1px; background: var(--border); margin: 14px 0; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .settings-grid { grid-template-columns: 1fr; } }
.kbd { font-family: var(--mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
details.summary { margin-top: 6px; }
details.summary summary { cursor: pointer; color: var(--muted); font-size: 13px; }

/* —— 情绪健康分析页 —— */
:root {
  /* 三档状态色（经 dataviz 调色板校验：滋养/中性/需要关注） */
  --c-nurturing: #1e9e5f;
  --c-neutral: #6689c9;
  --c-concerning: #d97706;
}
html[data-theme='dark'] {
  --c-nurturing: #178a52;
  --c-neutral: #5575bd;
  --c-concerning: #c2841f;
}
.an-grid { display: grid; grid-template-columns: minmax(280px, 1fr) 1.2fr; gap: 14px; align-items: start; }
@media (max-width: 800px) { .an-grid { grid-template-columns: 1fr; } }
.an-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.an-donut { margin: 6px 0 2px; }
.an-band { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 2px; }
.an-legend { display: flex; flex-direction: column; gap: 10px; }
.an-legend-row { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; }
.an-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }
.an-legend-name { font-weight: 600; }
.an-legend-meta { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.an-freq { display: flex; flex-direction: column; }
.an-freq-row { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; padding: 5px 2px; }
.an-freq-name { }
.an-freq-count { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.an-concern { display: flex; flex-direction: column; gap: 10px; }
.an-concern-item { border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 14px; }

/* —— 登录 / 账号 —— */
.auth-root { position: fixed; inset: 0; background: var(--bg); display: grid; place-items: center; z-index: 40; padding: 20px; }
.auth-root[hidden] { display: none; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); width: min(400px, 94vw); padding: 28px 30px; }
.auth-brand { font-weight: 800; font-size: 22px; display: flex; align-items: center; gap: 8px; }
.auth-sub { color: var(--muted); font-size: 13px; margin: 6px 0 18px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-panel { display: flex; flex-direction: column; gap: 12px; }
.auth-panel[hidden] { display: none; }
.auth-input { width: 100%; font-size: 16px; padding: 13px 15px; border-radius: 10px; }
.auth-input::placeholder { font-size: 15px; color: var(--muted); }
.auth-msg { min-height: 20px; margin-top: 10px; font-size: 13px; color: var(--danger); }
.auth-foot { text-align: center; margin-top: 18px; font-size: 13px; }
.auth-foot a { color: var(--muted); cursor: pointer; text-decoration: none; }
.auth-foot a:hover { color: var(--accent-strong); text-decoration: none; }
.brand-mark { display: inline-flex; align-items: center; }
.account { display: flex; align-items: center; gap: 6px; max-width: 150px; }
.account-name { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; cursor: pointer; padding: 4px 10px; border-radius: 8px; transition: background 0.12s ease, color 0.12s ease; }
.account-name:hover { background: var(--accent-soft); color: var(--accent-strong); }
.account-name:active { background: var(--accent); color: var(--on-accent); }
.account-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.owner-badge { font-size: 11px; line-height: 1; padding: 3px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; white-space: nowrap; }
.owner-badge[hidden] { display: none; }

/* ===== 移动端：导航收进左侧抽屉，不占主内容、不分屏 ===== */
.nav-toggle { display: none; }
.nav-scrim { display: none; }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr !important; }
  /* 主内容整屏 */
  .main { padding: 46px 12px 72px !important; width: 100%; }
  /* 菜单按钮（浮在左上） */
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 10px; left: 12px; z-index: 76;
    width: 46px; height: 46px; font-size: 22px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface);
    border-radius: 10px; color: var(--text);
  }
  .nav-scrim.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 66; }
  /* 侧栏变成左侧抽屉 */
  .sidebar {
    position: fixed !important; left: 0; top: 0; bottom: 0;
    width: min(210px, 78vw) !important;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    display: flex !important; flex-direction: column !important;
    padding: 16px 12px !important; margin: 0 !important;
    border-right: 1px solid var(--border); border-bottom: none !important;
    background: var(--surface); z-index: 70; overflow-y: auto;
  }
  .sidebar.open { transform: none; }
  .brand { margin: 0 0 8px !important; }
  .brand-name { display: block; font-size: 14px; }
  .brand-sub { display: block; }
  .brand-mark svg { width: 22px; height: 22px; }
  .nav { flex-direction: column !important; margin: 8px 0 !important; gap: 2px !important; overflow: visible !important; flex: none !important; }
  .nav-item { white-space: nowrap; padding: 9px 10px !important; font-size: 14px !important; gap: 9px !important; border-radius: 8px !important; }
  .brand-name { font-size: 13px; }
  .nav-ico { display: inline-block; font-size: 15px; width: 20px; }
  .sidebar-foot { display: flex !important; margin-top: auto; gap: 6px; align-items: center; justify-content: space-between; }
  .account-name { max-width: 130px; }
}
@media (max-width: 400px) {
  .nav-item { font-size: 13.5px !important; }
}

/* —— 人物页 —— */
.person-card { cursor: default; }
.person-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; cursor: pointer; }
.person-name { font-weight: 700; font-size: 16px; }
.person-meta { color: var(--muted); font-size: 13px; }
.person-body { display: none; margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 12px; }
.person-card.open .person-body { display: block; }
.timeline { display: flex; flex-direction: column; gap: 8px; }
.tl-item { display: flex; gap: 10px; font-size: 13.5px; }
.tl-date { color: var(--muted); flex: none; min-width: 104px; font-size: 12px; padding-top: 2px; }
.tl-kind { flex: none; align-self: flex-start; }
.person-related { display: flex; flex-wrap: wrap; gap: 6px; }

/* —— 高频情绪横向柱状图 —— */
.an-freq { display: flex; flex-direction: column; gap: 9px; }
.an-bar-row { display: grid; grid-template-columns: 88px 1fr 56px; align-items: center; gap: 10px; }
.an-bar-label { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.an-bar-track { height: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.an-bar-fill { height: 100%; border-radius: 6px; min-width: 3px; }
.an-bar-count { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* —— 解梦进度条 —— */
.prog-track { height: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.prog-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width 0.3s ease; }