:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #f0eee8;
  --surface-3: #e9e5dc;
  --text: #171714;
  --muted: #6c6a62;
  --line: rgba(23,23,20,.11);
  --accent: #545f3a;
  --accent-contrast: #fff;
  --accent-soft: #e7eadf;
  --danger: #b33b37;
  --shadow: 0 10px 35px rgba(34,31,23,.08);
  --radius: 22px;
  --radius-sm: 15px;
  --topbar-h: 68px;
  --nav-h: 64px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}
html[data-theme="night"] { --bg:#171a1f;--surface:#22262c;--surface-2:#292e35;--surface-3:#323841;--text:#f3f4f6;--muted:#adb3bd;--line:rgba(255,255,255,.10);--accent:#9db4d1;--accent-contrast:#111820;--accent-soft:#2d3b49;--shadow:0 14px 38px rgba(0,0,0,.28); }
html[data-theme="oled"] { --bg:#000;--surface:#080808;--surface-2:#101010;--surface-3:#181818;--text:#f5f5f5;--muted:#a1a1a1;--line:rgba(255,255,255,.12);--accent:#d0d0d0;--accent-contrast:#000;--accent-soft:#202020;--shadow:none; }
html[data-theme="ocean"] { --bg:#edf4f6;--surface:#f9fcfd;--surface-2:#e0ecef;--surface-3:#d2e2e6;--text:#14262a;--muted:#61767b;--line:rgba(20,38,42,.11);--accent:#276b78;--accent-contrast:#fff;--accent-soft:#d7eaee; }
html[data-theme="forest"] { --bg:#edf1ea;--surface:#f9fbf7;--surface-2:#e1e9dc;--surface-3:#d4dfce;--text:#172117;--muted:#667362;--line:rgba(23,33,23,.11);--accent:#3d6b45;--accent-contrast:#fff;--accent-soft:#dce9dc; }
html[data-theme="plum"] { --bg:#f4eef4;--surface:#fcf9fc;--surface-2:#eadfea;--surface-3:#dfd0df;--text:#2a1829;--muted:#806b7e;--line:rgba(42,24,41,.11);--accent:#7a4976;--accent-contrast:#fff;--accent-soft:#eedfee; }
html[data-theme="ember"] { --bg:#f6efe9;--surface:#fffaf6;--surface-2:#efe0d5;--surface-3:#e7d3c4;--text:#2c1b14;--muted:#7d6b62;--line:rgba(44,27,20,.11);--accent:#98563a;--accent-contrast:#fff;--accent-soft:#f2dfd5; }
html[data-theme="sand"] { --bg:#f3efe3;--surface:#fbf8ef;--surface-2:#e9e2cf;--surface-3:#dfd5bd;--text:#29251b;--muted:#77705e;--line:rgba(41,37,27,.11);--accent:#786b3f;--accent-contrast:#fff;--accent-soft:#ebe4cd; }
html[data-theme="slate"] { --bg:#eef0f2;--surface:#fafbfc;--surface-2:#e1e5e8;--surface-3:#d5dbe0;--text:#1c242a;--muted:#697780;--line:rgba(28,36,42,.11);--accent:#4c6575;--accent-contrast:#fff;--accent-soft:#dce5ea; }
* { box-sizing:border-box; }
html, body { margin:0; width:100%; height:100%; min-height:100%; background:var(--bg); color:var(--text); font-family:var(--font); -webkit-text-size-adjust:100%; overscroll-behavior:none; overflow:hidden; }
body { min-height:100svh; }
button, input, textarea, select { font:inherit; }
button, .file-label { -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
input, textarea, .thought-body, .person-note, .selectable { user-select:text; -webkit-user-select:text; }
button { color:inherit; }
.app-shell { width:100%; height:100%; min-height:100svh; display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; background:var(--bg); }
.topbar { padding:calc(var(--safe-top) + 25px) 16px 10px; min-height:calc(var(--safe-top) + var(--topbar-h)); display:flex; align-items:flex-end; justify-content:space-between; gap:12px; background:color-mix(in srgb, var(--bg) 92%, transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); z-index:10; }
.brand-lockup { display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark { width:32px; height:32px; display:grid; gap:4px; padding:6px; border-radius:10px; background:var(--text); flex:none; }
.brand-mark span { display:block; height:3px; border-radius:999px; background:var(--bg); }
.brand-mark span:nth-child(2){ width:74%; }
.brand-mark span:nth-child(3){ width:48%; }
.brand-name { font-weight:780; letter-spacing:-.02em; font-size:18px; line-height:1.1; }
.brand-subtitle { margin-top:2px; color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70vw; }
.main-scroller { min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; touch-action:pan-y; padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + 18px); }
.view { display:none; width:min(920px, 100%); margin:0 auto; padding:22px 16px 34px; }
.view.active { display:block; }
.hero-card { padding:24px; border-radius:28px; background:linear-gradient(145deg, var(--surface), var(--surface-2)); box-shadow:var(--shadow); border:1px solid var(--line); }
.eyebrow { font-size:11px; font-weight:760; letter-spacing:.12em; color:var(--accent); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(28px,7vw,42px); line-height:1.02; letter-spacing:-.045em; margin:7px 0 10px; }
h2 { font-size:21px; line-height:1.15; letter-spacing:-.025em; margin:4px 0 0; }
h3 { font-size:16px; margin:0; letter-spacing:-.015em; }
p { color:var(--muted); line-height:1.48; }
.hero-card p { max-width:560px; font-size:15px; }
.primary-btn,.secondary-btn,.danger-btn,.text-btn,.back-btn,.icon-btn { border:0; cursor:pointer; }
.primary-btn { background:var(--accent); color:var(--accent-contrast); padding:12px 16px; border-radius:14px; font-weight:720; }
.primary-btn.large { padding:14px 18px; border-radius:16px; }
.secondary-btn { background:var(--surface-2); color:var(--text); border:1px solid var(--line); padding:11px 14px; border-radius:13px; font-weight:680; }
.danger-btn { background:color-mix(in srgb, var(--danger) 14%, var(--surface)); color:var(--danger); border:1px solid color-mix(in srgb, var(--danger) 34%, transparent); padding:11px 14px; border-radius:13px; font-weight:720; }
.text-btn,.back-btn { background:transparent; color:var(--accent); font-weight:700; padding:8px 0; }
.back-btn { margin:-8px 0 8px; }
.icon-btn { width:40px; height:40px; display:grid; place-items:center; background:var(--accent); color:var(--accent-contrast); border-radius:14px; font-size:24px; line-height:1; flex:none; }
.icon-btn.subtle { background:var(--surface-2); color:var(--text); }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0 28px; }
.stat-card { padding:15px; background:var(--surface); border:1px solid var(--line); border-radius:18px; }
.stat-num { font-size:24px; font-weight:790; letter-spacing:-.035em; }
.stat-label { color:var(--muted); font-size:11px; margin-top:3px; }
.section-block { margin:26px 0 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:10px; }
.card-list { display:grid; gap:10px; }
.card-list.spacious { margin-top:14px; }
.thought-card { position:relative; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 1px 0 rgba(0,0,0,.015); cursor:pointer; }
.thought-card:active { transform:scale(.997); }
.thought-top { display:flex; justify-content:space-between; align-items:start; gap:10px; }
.thought-person { color:var(--accent); font-size:12px; font-weight:720; }
.thought-title { margin:4px 0 5px; font-size:16px; font-weight:760; line-height:1.22; }
.thought-preview { color:var(--muted); font-size:13px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.thought-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:11px; color:var(--muted); font-size:11px; }
.badge { display:inline-flex; align-items:center; min-height:24px; padding:4px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:10px; font-weight:760; letter-spacing:.02em; }
.badge.neutral { background:var(--surface-2); color:var(--muted); }
.badge.told { background:var(--surface-2); color:var(--muted); }
.empty-state { padding:26px 18px; text-align:center; border:1px dashed var(--line); border-radius:18px; color:var(--muted); background:color-mix(in srgb, var(--surface) 55%, transparent); }
.empty-state strong { color:var(--text); display:block; margin-bottom:4px; }
.page-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:18px; }
.page-heading p { margin:7px 0 0; max-width:560px; }
.people-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:11px; }
.person-card { padding:18px; border-radius:20px; background:var(--surface); border:1px solid var(--line); cursor:pointer; }
.person-card-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.person-avatar { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-weight:800; font-size:17px; flex:none; }
.person-card h3 { margin-top:2px; }
.person-relation { color:var(--muted); font-size:12px; margin-top:3px; }
.person-counts { display:flex; gap:12px; margin-top:17px; color:var(--muted); font-size:11px; }
.person-counts strong { color:var(--text); font-size:15px; display:block; }
.person-head-card { padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:22px; margin-bottom:12px; }
.person-head-row { display:flex; justify-content:space-between; gap:14px; align-items:start; }
.person-note { color:var(--muted); line-height:1.45; margin:9px 0 0; white-space:pre-wrap; }
.digest-card { padding:18px; border-radius:20px; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 18%, transparent); margin:12px 0 16px; }
.digest-card p { margin:6px 0 12px; color:color-mix(in srgb, var(--text) 68%, var(--muted)); font-size:12px; }
.digest-row { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:16px; }
.topic-cloud { display:flex; flex-wrap:wrap; gap:6px; }
.key-list { margin:0; padding-left:18px; color:var(--text); font-size:13px; line-height:1.45; }
.segmented { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:3px; gap:3px; }
.seg { border:0; background:transparent; color:var(--muted); border-radius:10px; padding:9px 10px; font-weight:700; font-size:12px; }
.seg.active { background:var(--surface); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.06); }
.search-box { display:flex; align-items:center; gap:9px; padding:12px 13px; margin-bottom:12px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.search-box input { flex:1; border:0; outline:0; background:transparent; color:var(--text); min-width:0; font-size:15px; }
.search-clear { border:0; background:transparent; color:var(--muted); font-size:20px; width:26px; height:26px; padding:0; }
.filter-row { display:flex; gap:7px; overflow-x:auto; padding:11px 0 4px; scrollbar-width:none; }
.filter-row::-webkit-scrollbar { display:none; }
.filter-chip { flex:none; border:1px solid var(--line); background:var(--surface); color:var(--muted); padding:7px 10px; border-radius:999px; font-size:11px; font-weight:690; }
.filter-chip.active { background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 22%, transparent); }
.results-meta { color:var(--muted); font-size:11px; margin:7px 1px 0; }
.settings-card { padding:19px; background:var(--surface); border:1px solid var(--line); border-radius:21px; margin-bottom:12px; }
.settings-card > p { font-size:13px; }
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:13px; }
.theme-option { padding:10px; border:1px solid var(--line); background:var(--surface-2); border-radius:14px; text-align:left; }
.theme-option.active { outline:2px solid var(--accent); outline-offset:1px; }
.theme-swatch { height:24px; border-radius:8px; margin-bottom:7px; border:1px solid rgba(127,127,127,.2); }
.theme-name { font-size:11px; font-weight:720; }
.privacy-banner { padding:14px; border-radius:15px; background:var(--accent-soft); color:var(--text); display:grid; gap:5px; font-size:12px; line-height:1.45; }
.privacy-banner span { color:var(--muted); }
.settings-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.file-label { display:inline-flex; cursor:pointer; align-items:center; }
.file-label input { display:none; }
.danger-zone { border-color:color-mix(in srgb,var(--danger) 23%, var(--line)); }
.maker-footer { text-align:center; color:var(--muted); font-size:10px; line-height:1.6; padding:22px 8px calc(12px + var(--safe-bottom)); }
.maker { font-weight:760; color:var(--text); margin-bottom:3px; }
.bottom-nav { position:fixed; left:0; right:0; bottom:0; width:100%; min-height:calc(var(--nav-h) + var(--safe-bottom)); padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + var(--safe-bottom)) max(8px,env(safe-area-inset-left,0px)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; background:color-mix(in srgb, var(--surface) 92%, transparent); border-top:1px solid var(--line); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); z-index:110; }
.nav-item { border:0; background:transparent; color:var(--muted); display:grid; place-items:center; gap:1px; border-radius:12px; padding:4px; font-size:19px; min-width:0; }
.nav-item small { font-size:9px; font-weight:680; }
.nav-item.active { color:var(--accent); }
.nav-add { position:relative; color:var(--accent); }
.nav-add > span { width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:var(--accent); color:var(--accent-contrast); font-size:23px; margin-top:-13px; box-shadow:0 5px 18px color-mix(in srgb,var(--accent) 24%, transparent); }
.modal-backdrop,.confirm-backdrop { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.42); display:flex; align-items:flex-end; justify-content:center; padding:0; }
.modal-backdrop[hidden], .confirm-backdrop[hidden] { display:none; }
.sheet { width:min(760px,100%); max-height:calc(100dvh - var(--safe-top) - 16px); overflow-y:auto; background:var(--bg); border-radius:26px 26px 0 0; padding:9px 16px calc(18px + var(--safe-bottom)); box-shadow:0 -12px 45px rgba(0,0,0,.22); }
.sheet-grabber { width:42px; height:4px; border-radius:99px; background:var(--surface-3); margin:2px auto 12px; }
.sheet-head { display:flex; justify-content:space-between; align-items:start; gap:12px; margin-bottom:15px; position:sticky; top:-9px; padding:8px 0 10px; background:linear-gradient(var(--bg) 78%, transparent); z-index:3; }
.sheet-head h2 { font-size:24px; }
.form-grid { display:grid; gap:12px; }
.field { display:grid; gap:6px; }
.field > span { font-size:11px; font-weight:720; color:var(--muted); }
.field input,.field textarea,.field select { width:100%; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--text); outline:0; padding:12px 13px; }
.field textarea { min-height:180px; resize:vertical; line-height:1.48; font-size:15px; }
.field textarea:focus,.field input:focus,.field select:focus { border-color:color-mix(in srgb,var(--accent) 58%, var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%, transparent); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.check-row { display:flex; align-items:center; gap:9px; padding:11px 12px; background:var(--surface); border:1px solid var(--line); border-radius:13px; }
.check-row input { width:18px; height:18px; accent-color:var(--accent); }
.form-actions { display:flex; justify-content:space-between; gap:8px; margin-top:3px; }
.form-actions-right { display:flex; gap:8px; margin-left:auto; }
.thought-detail { display:grid; gap:13px; }
.thought-detail-head { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.thought-detail-title { font-size:25px; letter-spacing:-.035em; margin:2px 0 5px; }
.thought-body { white-space:pre-wrap; font-size:15px; line-height:1.56; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:17px; }
.detail-meta { display:flex; flex-wrap:wrap; gap:7px; }
.detail-actions { display:flex; flex-wrap:wrap; gap:8px; }
.confirm-backdrop { align-items:center; padding:20px; }
.confirm-card { width:min(420px,100%); padding:20px; border-radius:20px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }
.confirm-card p { margin:8px 0 18px; }
.confirm-actions { display:flex; justify-content:flex-end; gap:8px; }
.toast { position:fixed; left:50%; bottom:calc(var(--nav-h) + var(--safe-bottom) + 16px); transform:translate(-50%,15px); max-width:calc(100vw - 32px); background:var(--text); color:var(--bg); border-radius:12px; padding:10px 13px; font-size:11px; font-weight:680; opacity:0; pointer-events:none; transition:.18s ease; z-index:200; text-align:center; box-shadow:var(--shadow); }
.toast.show { opacity:1; transform:translate(-50%,0); }
.muted { color:var(--muted); }
@media (min-width:760px) {
  .view { padding:30px 24px 44px; }
  .topbar { padding-left:24px; padding-right:24px; }
  .bottom-nav { left:50%; right:auto; width:min(600px,calc(100% - 32px)); transform:translateX(-50%); bottom:10px; margin:0; border:1px solid var(--line); border-radius:20px; padding-bottom:6px; min-height:70px; box-shadow:var(--shadow); }
  .sheet { border-radius:26px; margin-bottom:20px; max-height:calc(100dvh - 40px); }
  .modal-backdrop { align-items:center; padding:20px; }
}
@media (max-width:520px) {
  .stats-grid { grid-template-columns:repeat(3,1fr); }
  .stat-card { padding:13px 10px; }
  .stat-num { font-size:21px; }
  .page-heading { align-items:flex-start; }
  .page-heading.stacked-mobile { display:block; }
  .digest-row { grid-template-columns:1fr; }
  .field-row { grid-template-columns:1fr; }
  .theme-grid { grid-template-columns:repeat(3,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}