:root {
  --ink: #24233b;
  --ink-soft: #5f5d79;
  --muted: #918da9;
  --paper: #f8f7fc;
  --card: rgba(255, 255, 255, .86);
  --line: #e9e6f1;
  --blue: #7d9ee2;
  --blue-deep: #4b69ae;
  --lavender: #a694d7;
  --purple: #8064ad;
  --rose: #dfa0ba;
  --pink: #cf7e9f;
  --green: #80b79d;
  --yellow: #e5be73;
  --red: #d8898d;
  --shadow: 0 22px 60px rgba(85, 74, 128, .08);
  --shadow-small: 0 10px 28px rgba(85, 74, 128, .08);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 85% -5%, #f0e7f5 0, transparent 28rem), radial-gradient(circle at 8% 25%, #eaf2fb 0, transparent 25rem), var(--paper); font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; }
button, input, textarea, select { color: inherit; font: inherit; }
button, a, input, textarea, select, summary { outline-color: var(--purple); outline-offset: 3px; }
button { border: 0; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; z-index: 4; display: flex; flex-direction: column; width: 246px; height: 100vh; padding: 32px 20px 22px; border-right: 1px solid rgba(215, 209, 231, .62); background: rgba(251, 250, 253, .75); backdrop-filter: blur(18px); }
.brand-block { display: flex; align-items: center; gap: 12px; padding: 0 10px; }
.brand-mark { position: relative; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 12px 12px 12px 4px; background: linear-gradient(145deg, #849de0, #9a7cc0); box-shadow: 0 7px 15px rgba(128, 100, 173, .18); }
.brand-mark span { position: absolute; display: block; width: 15px; height: 2px; border-radius: 999px; background: rgba(255,255,255,.9); transform-origin: left center; }
.brand-mark span:nth-child(1) { transform: rotate(-28deg) translate(2px, 8px); }
.brand-mark span:nth-child(2) { transform: rotate(28deg) translate(2px, -8px); }
.brand-mark span:nth-child(3) { width: 10px; transform: rotate(90deg) translate(3px, 0); }
.brand-mark.small { width: 29px; height: 29px; border-radius: 10px 10px 10px 3px; }
.brand-mark.small span { transform: scale(.82); }
.brand-name { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 1.25rem; letter-spacing: -.03em; }
.brand-tagline { margin: 2px 0 0; color: var(--muted); font-size: .68rem; }
.main-nav { display: grid; gap: 7px; margin-top: 56px; }
.nav-item, .settings-button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 13px; border-radius: 12px; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: .85rem; text-align: left; transition: background .18s, color .18s, transform .18s; }
.nav-item:hover, .settings-button:hover { background: rgba(226, 220, 241, .45); color: var(--ink); transform: translateX(2px); }
.nav-item.active { background: #eeeaf8; color: var(--purple); font-weight: 700; }
.nav-icon { display: inline-grid; width: 22px; place-items: center; color: var(--lavender); font-size: 1rem; }
.nav-item.active .nav-icon, .settings-button:hover .nav-icon { color: var(--purple); }
.sidebar-spacer { flex: 1; }
.sync-card { display: flex; align-items: flex-start; gap: 10px; margin: 0 5px 18px; padding: 12px; border: 1px solid #e9e6f1; border-radius: 14px; background: rgba(255,255,255,.54); }
.sync-card strong, .sync-card span:not(.sync-dot) { display: block; }
.sync-card strong { color: var(--ink-soft); font-size: .68rem; font-weight: 700; }
.sync-card span:not(.sync-dot) { margin-top: 3px; color: var(--muted); font-size: .6rem; line-height: 1.35; }
.sync-dot { display: block; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(128, 183, 157, .13); }
.settings-button { margin-top: 4px; }
.sidebar-footnote { margin: 20px 10px 0; color: #b1adc0; font-family: Fraunces, Georgia, serif; font-size: .78rem; font-style: italic; }

.main-content { width: calc(100% - 246px); min-height: 100vh; margin-left: 246px; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 86px; padding: 0 clamp(24px, 5vw, 72px); border-bottom: 1px solid rgba(215, 209, 231, .42); }
.breadcrumb { display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: .76rem; }
.breadcrumb-muted { color: var(--muted); }
.breadcrumb-separator { color: #c8c3d4; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.icon-button { display: inline-grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.65); color: var(--ink-soft); cursor: pointer; font-size: 1.05rem; transition: background .18s, color .18s, transform .18s; }
.icon-button:hover { background: #eeeaf8; color: var(--purple); transform: translateY(-1px); }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #f0d7e3; color: #9d5f7f; font-size: .73rem; font-weight: 700; }
.mobile-brand { display: none; align-items: center; gap: 8px; font-family: Fraunces, Georgia, serif; }
.view-container { width: min(1320px, 100%); margin: 0 auto; padding: clamp(38px, 5vw, 68px) clamp(24px, 5vw, 72px) 80px; }
.view { display: none; animation: view-in .32s ease both; }
.view.active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.eyebrow { margin: 0 0 10px; color: var(--purple); font-size: .67rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Fraunces, Georgia, serif; font-weight: 500; letter-spacing: -.045em; }
h1 { max-width: 710px; margin-bottom: 18px; font-size: clamp(2.7rem, 5vw, 5rem); line-height: .97; }
h2 { margin-bottom: 9px; font-size: clamp(1.45rem, 2.4vw, 2.15rem); line-height: 1.04; }
h3 { margin-bottom: 6px; font-size: 1rem; }
.intro-copy { max-width: 590px; margin-bottom: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.view-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; margin-bottom: 40px; }
.compact-intro { margin-bottom: 34px; }
.date-chip { display: flex; align-items: center; gap: 10px; min-width: 148px; padding: 10px 13px 10px 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.72); box-shadow: var(--shadow-small); }
.date-chip-day { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; background: #eeeaf8; color: var(--purple); font-family: Fraunces, Georgia, serif; font-size: 1.1rem; }
.date-chip strong, .date-chip small { display: block; }
.date-chip strong { color: var(--ink-soft); font-size: .72rem; }
.date-chip small { margin-top: 2px; color: var(--muted); font-size: .62rem; }

/* Life map */
.map-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(220px, .62fr); gap: 20px; align-items: stretch; }
.tree-card, .next-focus-card, .habit-board, .questions-layout, .month-calendar, .day-detail { border: 1px solid rgba(225, 221, 237, .9); background: var(--card); box-shadow: var(--shadow); }
.tree-card { overflow: hidden; min-height: 555px; border-radius: 24px 24px 24px 5px; }
.tree-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 25px 28px 0; }
.tree-card-header h2 { margin-bottom: 0; font-size: 1.47rem; }
.tree-hint, .toolbar-note { color: var(--muted); font-size: .67rem; }
.tree-stage { position: relative; min-height: 494px; overflow: hidden; }
.branch-line { position: absolute; z-index: 0; height: 1px; border-top: 1.5px solid #c8c0e3; opacity: .8; transform-origin: left center; }
.branch-line::after { position: absolute; top: -4px; right: -2px; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; background: #fff; content: ""; }
.line-1 { top: 49%; left: 48%; width: 205px; color: #b8a7dc; transform: rotate(-136deg); }
.line-2 { top: 49%; left: 48%; width: 230px; color: #cf96b5; transform: rotate(-108deg); }
.line-3 { top: 49%; left: 48%; width: 220px; color: #95b5dc; transform: rotate(-72deg); }
.line-4 { top: 49%; left: 48%; width: 188px; color: #8db5a8; transform: rotate(-40deg); }
.line-5 { top: 49%; left: 48%; width: 204px; color: #c4a2d9; transform: rotate(135deg); }
.line-6 { top: 49%; left: 48%; width: 225px; color: #d9a2bc; transform: rotate(106deg); }
.line-7 { top: 49%; left: 48%; width: 223px; color: #9bb2df; transform: rotate(72deg); }
.line-8 { top: 49%; left: 48%; width: 195px; color: #9fc4af; transform: rotate(40deg); }
.tree-hub, .passion-node { position: absolute; z-index: 1; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.tree-hub:hover, .passion-node:hover { transform: translateY(-3px) scale(1.02); }
.tree-hub:focus-visible, .passion-node:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
.tree-hub { top: 39%; left: 39%; display: flex; width: 146px; height: 108px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #b1a3da; border-radius: 50%; background: linear-gradient(145deg, #f1ecfb, #e7effc); box-shadow: 0 12px 28px rgba(120, 96, 171, .16), inset 0 0 0 7px rgba(255,255,255,.64); }
.hub-orbit { position: absolute; width: 172px; height: 130px; border: 1px dashed #d8d0eb; border-radius: 50%; transform: rotate(-16deg); }
.tree-hub strong { position: relative; font-family: Fraunces, Georgia, serif; font-size: 1.05rem; font-weight: 500; }
.tree-hub small { position: relative; margin-top: 4px; color: var(--muted); font-size: .62rem; }
.passion-node { display: flex; min-width: 93px; flex-direction: column; align-items: center; padding: 9px 10px 8px; border: 1px solid #e7e2f0; border-radius: 15px; background: rgba(255,255,255,.9); box-shadow: 0 8px 20px rgba(104, 93, 143, .08); }
.passion-node span:not(.node-emoji) { color: var(--ink-soft); font-size: .73rem; font-weight: 700; }
.passion-node small { margin-top: 3px; color: var(--muted); font-size: .57rem; }
.node-emoji { display: grid; width: 27px; height: 27px; margin-bottom: 5px; place-items: center; border-radius: 9px; background: #f0eafa; color: var(--purple); font-size: .95rem; }
.node-piano { top: 7%; left: 11%; }.node-chess { top: 20%; left: 42%; }.node-body { top: 8%; right: 11%; }.node-languages { top: 36%; right: 2%; }.node-travel { right: 6%; bottom: 12%; }.node-bike { right: 34%; bottom: 3%; }.node-mind { bottom: 11%; left: 9%; }.node-medicine { top: 37%; left: 2%; }
.node-chess .node-emoji, .node-mind .node-emoji { background: #f8e9f0; color: var(--pink); }.node-body .node-emoji, .node-bike .node-emoji { background: #eaf4f4; color: #5e9a91; }.node-languages .node-emoji, .node-medicine .node-emoji { background: #e9effb; color: #6a89c8; }
.next-focus-card { display: flex; min-height: 555px; flex-direction: column; justify-content: center; padding: 30px; border-radius: 22px 22px 22px 5px; background: linear-gradient(155deg, rgba(250,244,252,.95), rgba(241,246,253,.92)); }
.focus-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 68px; }
.focus-card-top .eyebrow { margin: 0; color: var(--purple); }
.mini-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: #eeeaf8; color: var(--purple); font-size: .85rem; }
.focus-kicker { margin-bottom: 14px; color: var(--pink); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.next-focus-card h2 { max-width: 260px; font-size: 1.72rem; line-height: 1.06; }
.next-focus-card > p:not(.focus-kicker) { max-width: 270px; color: var(--ink-soft); font-size: .83rem; line-height: 1.55; }
.focus-meta { display: flex; gap: 7px; margin: 20px 0 30px; color: var(--muted); font-size: .68rem; }.focus-meta span:first-child { color: var(--purple); font-weight: 700; }
.text-button { align-self: flex-start; padding: 0; background: transparent; color: var(--purple); cursor: pointer; font-size: .76rem; font-weight: 700; }.text-button span { display: inline-block; margin-left: 6px; transition: transform .18s; }.text-button:hover span { transform: translateX(4px); }
.overview-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.overview-stat { display: flex; align-items: center; gap: 11px; padding: 16px 17px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.55); }.overview-stat strong, .overview-stat span:last-child { display: block; }.overview-stat strong { margin-bottom: 3px; font-family: Fraunces, Georgia, serif; font-size: 1.1rem; font-weight: 500; }.overview-stat span:last-child { color: var(--muted); font-size: .64rem; }.stat-icon { display: grid; flex: 0 0 auto; width: 31px; height: 31px; place-items: center; border-radius: 10px; font-size: .86rem; }.stat-icon.blue { background: #e9effb; color: var(--blue-deep); }.stat-icon.pink { background: #f8e9f0; color: var(--pink); }.stat-icon.violet { background: #eeeaf8; color: var(--purple); }

/* Habits */
.week-switcher, .month-switcher { display: flex; align-items: center; gap: 11px; color: var(--ink-soft); font-size: .72rem; }.month-switcher { font-size: .82rem; }.month-switcher strong { font-family: Fraunces, Georgia, serif; font-size: 1.08rem; font-weight: 500; }.soft-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 30px; min-height: 30px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.68); color: var(--ink-soft); cursor: pointer; font-size: .72rem; transition: background .18s, transform .18s; }.soft-button:hover { background: #eeeaf8; transform: translateY(-1px); }.soft-button.wide { width: 100%; justify-content: space-between; margin-top: 22px; padding: 12px 14px; }
.habit-toolbar, .calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; }.legend, .calendar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }.legend > span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .65rem; }.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }.legend-dot.empty { border: 1px solid #ccc8d8; background: #fff; }.legend-dot.complete { background: var(--green); }.legend-dot.partial { background: var(--yellow); }.legend-dot.failed { background: var(--red); }
.habit-board { overflow-x: auto; padding: 23px; border-radius: 22px 22px 22px 5px; }.habit-table { width: 100%; min-width: 690px; border-collapse: separate; border-spacing: 0; }.habit-table th, .habit-table td { border-bottom: 1px solid #efedf4; }.habit-table th { height: 42px; color: var(--muted); font-size: .63rem; font-weight: 600; text-align: center; }.habit-table th:first-child { width: 260px; color: var(--ink-soft); font-size: .7rem; text-align: left; }.habit-table td { height: 49px; text-align: center; }.habit-table tbody tr:last-child td { border-bottom: 0; }.habit-table td:first-child { padding: 0 12px 0 4px; color: var(--ink-soft); font-size: .76rem; font-weight: 600; text-align: left; }.habit-table td:not(:first-child) { padding: 6px 7px; }.habit-table .category-row th { height: 35px; padding-top: 11px; border-bottom-color: #e5e1ef; color: var(--purple); font-size: .62rem; letter-spacing: .09em; text-align: left; text-transform: uppercase; }.habit-table .category-row th:not(:first-child) { color: transparent; }.habit-name-button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 4px; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; }.habit-name-button:hover { background: #f2eff9; }.habit-info { display: inline-grid; width: 15px; height: 15px; place-items: center; border: 1px solid #d2cce3; border-radius: 50%; color: var(--purple); font-size: .58rem; font-weight: 700; }.habit-cell { display: inline-grid; width: 27px; height: 27px; place-items: center; border: 1px solid #dcd8e7; border-radius: 7px; background: #fbfafc; cursor: pointer; font-size: .72rem; transition: transform .15s, background .15s, border-color .15s; }.habit-cell:hover { transform: scale(1.1); }.habit-cell.complete { border-color: #72a990; background: var(--green); color: white; }.habit-cell.partial { border-color: #d5aa5d; background: var(--yellow); color: white; }.habit-cell.failed { border-color: #c9747d; background: var(--red); color: white; }.habit-cell.complete::after { content: "✓"; }.habit-cell.partial::after { content: "~"; }.habit-cell.failed::after { content: "×"; }.habit-note { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: rgba(239, 236, 248, .52); color: var(--ink-soft); }.habit-note p { margin: 0; font-size: .68rem; line-height: 1.5; }.note-symbol { display: grid; flex: 0 0 auto; width: 18px; height: 18px; place-items: center; border: 1px solid #c9c1de; border-radius: 50%; color: var(--purple); font-size: .62rem; font-weight: 700; }

/* Questions */
.questions-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .65fr); gap: 18px; padding: 22px; border-radius: 22px 22px 22px 5px; }.question-list { display: grid; gap: 14px; }.question-card { padding: 20px; border: 1px solid #e8e3f0; border-radius: 17px; background: rgba(255,255,255,.75); }.question-card-header { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 13px; }.question-number { color: var(--pink); font-family: Fraunces, Georgia, serif; font-size: 1.2rem; }.question-card h3 { max-width: 580px; margin: 0; font-family: Fraunces, Georgia, serif; font-size: 1.2rem; font-weight: 500; line-height: 1.2; }.question-response { width: 100%; min-height: 110px; padding: 12px 13px; border: 1px solid #e7e3ef; border-radius: 12px; outline: none; background: #fcfbfd; font-size: .8rem; line-height: 1.55; resize: vertical; }.question-response:focus { border-color: var(--lavender); box-shadow: 0 0 0 4px rgba(166, 148, 215, .13); }.question-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }.save-note { color: var(--muted); font-size: .62rem; }.pencil-note-button { padding: 6px 9px; border: 1px solid #e4ddec; border-radius: 8px; background: #f6f2fb; color: var(--purple); cursor: pointer; font-size: .62rem; }.reflection-card { display: flex; flex-direction: column; justify-content: center; padding: 28px; border: 1px solid #e3d7e8; border-radius: 18px; background: linear-gradient(145deg, #fbf1f7, #f3f0fb); }.reflection-icon { display: grid; width: 39px; height: 39px; margin-bottom: 25px; place-items: center; border-radius: 13px; background: #f2dce8; color: var(--pink); font-size: 1.15rem; }.reflection-card h2 { font-size: 1.48rem; }.reflection-card p { color: var(--ink-soft); font-size: .76rem; line-height: 1.55; }

/* Calendar */
.calendar-filters { gap: 7px; }.calendar-filter { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.55); color: var(--muted); cursor: pointer; font-size: .64rem; transition: background .18s, border-color .18s, color .18s; }.calendar-filter:hover, .calendar-filter.active { border-color: var(--calendar-color); background: color-mix(in srgb, var(--calendar-color) 13%, white); color: var(--ink-soft); }.calendar-filter-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--calendar-color); }.calendar-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .65fr); gap: 18px; }.month-calendar { overflow: hidden; border-radius: 22px 22px 22px 5px; }.month-header { display: grid; grid-template-columns: repeat(7, 1fr); padding: 16px 18px 11px; border-bottom: 1px solid var(--line); }.month-header span { color: var(--muted); font-size: .62rem; font-weight: 700; text-align: center; text-transform: uppercase; }.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }.month-day { position: relative; min-height: 103px; padding: 9px 8px; border-right: 1px solid #f0edf5; border-bottom: 1px solid #f0edf5; background: rgba(255,255,255,.33); cursor: pointer; transition: background .15s; }.month-day:nth-child(7n) { border-right: 0; }.month-day:hover, .month-day.selected { background: #f2effa; }.month-day.outside { background: rgba(248,247,252,.44); }.month-day.outside .day-number { color: #c6c1d0; }.day-number { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; color: var(--ink-soft); font-size: .7rem; }.month-day.today .day-number { background: var(--purple); color: white; font-weight: 700; }.day-events { display: grid; gap: 3px; margin-top: 7px; }.day-event { overflow: hidden; padding: 4px 5px; border-left: 2px solid var(--event-color); border-radius: 4px; background: color-mix(in srgb, var(--event-color) 12%, white); color: var(--ink-soft); font-size: .57rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }.day-dots { display: flex; gap: 3px; margin-top: 7px; }.day-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--event-color); }.day-detail { min-height: 500px; padding: 25px; border-radius: 22px 22px 22px 5px; }.day-detail-placeholder { display: flex; height: 100%; min-height: 410px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.placeholder-icon { display: grid; width: 40px; height: 40px; margin-bottom: 18px; place-items: center; border-radius: 13px; background: #eaf1fb; color: var(--blue-deep); font-size: 1.2rem; }.day-detail-placeholder h2 { font-size: 1.42rem; }.day-detail-placeholder p { max-width: 220px; color: var(--muted); font-size: .75rem; line-height: 1.5; }.day-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 20px; }.day-detail-header h2 { margin-bottom: 4px; }.day-detail-date { color: var(--muted); font-size: .68rem; }.day-entries { display: grid; gap: 10px; }.day-entry { padding: 12px; border-left: 3px solid var(--event-color); border-radius: 8px; background: #faf9fc; }.day-entry strong { display: block; color: var(--ink-soft); font-size: .74rem; }.day-entry p { margin: 5px 0 0; color: var(--muted); font-size: .67rem; line-height: 1.4; }.day-editor { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }.day-editor label { display: block; margin-bottom: 6px; color: var(--ink-soft); font-size: .67rem; font-weight: 700; }.day-editor select, .day-editor input { width: 100%; min-height: 38px; margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: .7rem; }.day-editor textarea { width: 100%; min-height: 72px; margin-bottom: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: .7rem; resize: vertical; }.primary-small { padding: 9px 12px; border-radius: 9px; background: var(--purple); color: white; cursor: pointer; font-size: .67rem; font-weight: 700; }.primary-small:hover { background: #6f549d; }

/* Modals and settings */
.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 25px; background: rgba(52, 46, 77, .26); backdrop-filter: blur(6px); }.modal-backdrop[hidden] { display: none; }.settings-modal, .passion-modal { width: min(790px, 100%); max-height: min(720px, calc(100vh - 40px)); overflow: auto; padding: 28px; border: 1px solid rgba(255,255,255,.72); border-radius: 24px 24px 24px 5px; background: #fcfbfe; box-shadow: 0 35px 90px rgba(54, 43, 89, .2); }.passion-modal { width: min(750px, 100%); }.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }.modal-header h2 { margin-bottom: 0; font-size: 2.05rem; }.close-modal { background: transparent; border: 0; font-size: 1.45rem; }.settings-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 20px; padding: 4px; border-radius: 13px; background: #f2eff8; }.settings-tab { padding: 9px 12px; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font-size: .68rem; }.settings-tab.active { background: white; color: var(--purple); font-weight: 700; box-shadow: 0 3px 10px rgba(96, 75, 142, .06); }.settings-panel { display: none; }.settings-panel.active { display: block; animation: view-in .2s ease both; }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }.panel-heading h3 { margin-bottom: 3px; font-family: Fraunces, Georgia, serif; font-size: 1.25rem; font-weight: 500; }.panel-heading p { margin-bottom: 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }.settings-list { display: grid; gap: 8px; }.settings-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.66); }.settings-row-main strong, .settings-row-main span { display: block; }.settings-row-main strong { color: var(--ink-soft); font-size: .76rem; }.settings-row-main span { margin-top: 4px; color: var(--muted); font-size: .63rem; line-height: 1.4; }.settings-row-actions { display: flex; gap: 5px; }.tiny-button { padding: 6px 8px; border-radius: 7px; background: #f1eef8; color: var(--purple); cursor: pointer; font-size: .61rem; }.tiny-button.danger { color: #b36775; }.empty-settings { padding: 24px 8px; color: var(--muted); font-size: .74rem; text-align: center; }.setting-form { display: grid; gap: 9px; margin-top: 14px; padding: 15px; border: 1px dashed #d9d2e8; border-radius: 12px; background: #faf8fd; }.setting-form input, .setting-form textarea, .setting-form select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: .7rem; }.setting-form textarea { min-height: 58px; resize: vertical; }.setting-form-actions { display: flex; justify-content: flex-end; gap: 7px; }.detail-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 15px; background: linear-gradient(140deg, #f4effa, #f0f6fc); }.detail-hero-icon { display: grid; width: 47px; height: 47px; place-items: center; border-radius: 14px; background: #fff; color: var(--purple); font-size: 1.4rem; }.detail-hero h3 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 1.32rem; font-weight: 500; }.detail-hero p { margin: 4px 0 0; color: var(--muted); font-size: .68rem; }.passion-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 15px; }.detail-section { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.72); }.detail-section.full { grid-column: 1 / -1; }.detail-section h3 { margin-bottom: 10px; color: var(--purple); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }.next-step-box { padding: 12px; border-radius: 10px; background: #f6f1fb; }.next-step-box p { margin: 0; color: var(--ink-soft); font-family: Fraunces, Georgia, serif; font-size: 1rem; line-height: 1.25; }.next-step-box small { display: block; margin-top: 7px; color: var(--muted); font-size: .62rem; }.detail-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.detail-list li { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-soft); font-size: .72rem; line-height: 1.4; }.detail-list li::before { content: "·"; color: var(--pink); font-size: 1.15rem; line-height: .8; }.complete-step { margin-top: 13px; }

.toast { position: fixed; z-index: 20; right: 25px; bottom: 25px; max-width: 290px; padding: 12px 15px; border: 1px solid #d8d0e6; border-radius: 12px; background: #fff; box-shadow: var(--shadow-small); color: var(--ink-soft); font-size: .7rem; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s; }.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) { .map-layout, .calendar-layout, .questions-layout { grid-template-columns: 1fr; }.next-focus-card { min-height: auto; padding: 25px; }.focus-card-top { margin-bottom: 28px; }.next-focus-card h2, .next-focus-card > p:not(.focus-kicker) { max-width: 500px; }.tree-card { min-height: 550px; }.day-detail { min-height: 300px; }.day-detail-placeholder { min-height: 230px; } }
@media (max-width: 760px) { .sidebar { position: fixed; top: auto; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; height: 69px; padding: 5px 8px 7px; border-top: 1px solid rgba(215, 209, 231, .8); border-right: 0; background: rgba(251,250,253,.91); }.brand-block, .sidebar-spacer, .sync-card, .settings-button, .sidebar-footnote { display: none; }.main-nav { display: contents; margin: 0; }.nav-item { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 5px 3px; border-radius: 11px; font-size: .58rem; text-align: center; }.nav-item:hover { transform: none; }.nav-icon { height: 22px; font-size: .95rem; }.main-content { width: 100%; margin-left: 0; padding-bottom: 61px; }.topbar { height: 70px; padding: 0 18px; }.mobile-brand { display: flex; }.breadcrumb { display: none; }.view-container { padding: 34px 17px 52px; }.view-intro { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 28px; }.view-intro h1 { font-size: 3rem; }.date-chip { align-self: flex-start; }.tree-card-header { padding: 22px 20px 0; }.tree-hint { display: none; }.tree-card { min-height: 585px; }.tree-stage { min-height: 530px; }.tree-hub { top: 39%; left: calc(50% - 73px); }.branch-line { left: 50%; }.line-1 { width: 155px; }.line-2 { width: 175px; }.line-3 { width: 165px; }.line-4 { width: 155px; }.line-5 { width: 155px; }.line-6 { width: 175px; }.line-7 { width: 165px; }.line-8 { width: 155px; }.passion-node { min-width: 78px; padding: 7px 7px 6px; }.passion-node span:not(.node-emoji) { font-size: .65rem; }.passion-node small { font-size: .5rem; }.node-piano { top: 8%; left: 2%; }.node-chess { top: 19%; left: 38%; }.node-body { top: 8%; right: 2%; }.node-languages { top: 38%; right: -1%; }.node-travel { right: 3%; bottom: 9%; }.node-bike { right: 33%; bottom: 1%; }.node-mind { bottom: 9%; left: 2%; }.node-medicine { top: 38%; left: -1%; }.overview-strip { grid-template-columns: 1fr; }.overview-stat { padding: 13px 15px; }.habit-toolbar, .calendar-toolbar { align-items: flex-start; flex-direction: column; gap: 9px; }.habit-board { padding: 13px; }.questions-layout { padding: 13px; }.reflection-card { min-height: 240px; }.calendar-layout { gap: 13px; }.month-calendar { overflow-x: auto; }.month-calendar, .month-grid, .month-header { min-width: 650px; }.day-detail { min-height: auto; }.settings-modal, .passion-modal { max-height: calc(100vh - 22px); padding: 20px; }.panel-heading { align-items: flex-start; flex-direction: column; gap: 10px; }.passion-detail-grid { grid-template-columns: 1fr; }.detail-section.full { grid-column: auto; } }
@media (max-width: 430px) { h1, .view-intro h1 { font-size: 2.6rem; }.tree-card { min-height: 545px; }.tree-stage { min-height: 490px; }.tree-hub { transform: scale(.88); }.tree-hub:hover { transform: scale(.9) translateY(-3px); }.passion-node { transform: scale(.9); }.passion-node:hover { transform: scale(.92) translateY(-3px); }.node-piano { left: -3%; }.node-body { right: -3%; }.node-medicine { left: -5%; }.node-languages { right: -5%; }.node-travel { right: -2%; }.node-mind { left: -3%; }.month-switcher { gap: 5px; }.month-switcher strong { font-size: .95rem; }.topbar-actions .icon-button { display: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.passion-node.selected { border-color: #b4a5d9; box-shadow: 0 10px 24px rgba(128, 100, 173, .16); }
.ink-pad { margin-top: 13px; padding: 10px; border: 1px dashed #d9d0e7; border-radius: 12px; background: #fbf9fd; }
.ink-canvas { display: block; width: 100%; height: 150px; border-radius: 8px; background-color: #fff; background-image: linear-gradient(#f0edf5 1px, transparent 1px), linear-gradient(90deg, #f0edf5 1px, transparent 1px); background-size: 28px 28px; touch-action: none; cursor: crosshair; }
.ink-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--muted); font-size: .61rem; }
.detail-copy { margin: 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.55; }
.detail-copy strong { color: var(--purple); }
.color-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; color: var(--ink-soft); font-size: .68rem; font-weight: 600; }
.color-field input { width: 42px; height: 30px; padding: 2px; }

/* Prototype improvements */
.sync-card { width: calc(100% - 10px); border: 1px solid #e9e6f1; text-align: left; cursor: pointer; }
.sync-dot.syncing { background: var(--yellow); box-shadow: 0 0 0 4px rgba(229, 190, 115, .16); animation: sync-pulse 1s ease-in-out infinite; }
.sync-dot.connected { background: var(--green); box-shadow: 0 0 0 4px rgba(128, 183, 157, .16); }
@keyframes sync-pulse { 50% { opacity: .45; } }
.tree-actions { display: flex; align-items: center; gap: 10px; }
.tree-list-toggle { white-space: nowrap; }
.branch-svg { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.branch-svg path { fill: none; stroke: #c8c0e3; stroke-width: 1.3; vector-effect: non-scaling-stroke; opacity: .76; transition: stroke .2s, stroke-width .2s, opacity .2s; }
.branch-svg path:nth-child(1) { stroke: #b8a7dc; }.branch-svg path:nth-child(2) { stroke: #cf96b5; }.branch-svg path:nth-child(3) { stroke: #95b5dc; }.branch-svg path:nth-child(4) { stroke: #8db5a8; }.branch-svg path:nth-child(5) { stroke: #c4a2d9; }.branch-svg path:nth-child(6) { stroke: #d9a2bc; }.branch-svg path:nth-child(7) { stroke: #9bb2df; }.branch-svg path:nth-child(8) { stroke: #9fc4af; }
.branch-svg path.selected { stroke: var(--purple); stroke-width: 2.4; opacity: 1; }
.tree-hub { left: calc(50% - 73px); }
.tree-list { display: grid; gap: 8px; padding: 20px 22px 24px; }
.tree-list-item { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.72); color: var(--ink-soft); cursor: pointer; text-align: left; }
.tree-list-item:hover, .tree-list-item.selected { border-color: #b4a5d9; background: #f4f0fb; }
.tree-list-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: #f0eafa; color: var(--purple); }
.tree-list-item strong, .tree-list-item small { display: block; }.tree-list-item strong { font-size: .75rem; }.tree-list-item small { margin-top: 3px; color: var(--muted); font-size: .63rem; }.tree-list-item > span:last-child { color: var(--purple); }
.today-actions { margin-top: 20px; padding: 23px; border: 1px solid var(--line); border-radius: 22px 22px 22px 5px; background: rgba(255,255,255,.55); }
.today-actions-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 15px; }.today-actions-header h2 { margin: 0; font-size: 1.4rem; }.today-count { color: var(--muted); font-size: .68rem; }
.today-action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.today-action-card { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.7); color: var(--ink-soft); cursor: pointer; text-align: left; }.today-action-card:hover { border-color: #b4a5d9; background: #f5f1fb; }.today-action-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: #f0eafa; color: var(--purple); }.today-action-card strong, .today-action-card small { display: block; }.today-action-card strong { font-size: .68rem; line-height: 1.25; }.today-action-card small { margin-top: 4px; color: var(--muted); font-size: .59rem; }.today-arrow { color: var(--purple); }
.habit-toolbar-actions { display: flex; align-items: center; gap: 10px; }.habit-mobile-list { display: none; }.habit-status-popover { position: fixed; z-index: 30; width: 210px; padding: 11px; border: 1px solid #ded7ec; border-radius: 13px; background: #fff; box-shadow: 0 18px 42px rgba(54, 43, 89, .18); }.habit-status-popover > strong { display: block; margin-bottom: 7px; color: var(--ink-soft); font-size: .68rem; }.status-choice-list { display: grid; gap: 3px; }.status-choice-list button { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 7px; border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: .65rem; text-align: left; }.status-choice-list button:hover { background: #f4f0fb; }.status-choice-list .legend-dot { flex: 0 0 auto; }
.calendar-main { min-width: 0; }.calendar-agenda { display: none; margin-top: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 18px 18px 18px 5px; background: rgba(255,255,255,.6); }.agenda-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }.agenda-header h2 { margin: 0; font-size: 1.35rem; }.agenda-header > span { color: var(--muted); font-size: .65rem; }.agenda-list { display: grid; gap: 6px; }.agenda-day { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.7); color: var(--ink-soft); cursor: pointer; text-align: left; }.agenda-day:hover { background: #f4f0fb; }.agenda-day-date { display: flex; align-items: center; gap: 5px; }.agenda-day-date strong { color: var(--muted); font-size: .58rem; text-transform: uppercase; }.agenda-day-date b { font-family: Fraunces, Georgia, serif; font-size: 1rem; font-weight: 500; }.agenda-day-events { display: grid; gap: 3px; }.agenda-day-events span { overflow: hidden; color: var(--ink-soft); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }.agenda-day-events i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--event-color); }
.day-editor .ink-pad { margin-top: 4px; }.calendar-ink-pad .ink-canvas { height: 115px; }.detail-note-text { width: 100%; min-height: 80px; margin-bottom: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: .74rem; line-height: 1.5; resize: vertical; }.passion-ink-pad .ink-canvas { height: 125px; }
.sync-settings-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding: 15px; border: 1px solid #e2dced; border-radius: 14px; background: linear-gradient(145deg, #f7f1fa, #f0f5fc); }.sync-settings-card .eyebrow { margin-bottom: 5px; }.sync-settings-card h3 { margin-bottom: 4px; color: var(--ink-soft); font-family: Fraunces, Georgia, serif; font-size: 1.05rem; font-weight: 500; }.sync-settings-card p:last-child { max-width: 460px; margin: 0; color: var(--muted); font-size: .64rem; line-height: 1.45; }
.sync-account-panel { grid-column: 1 / -1; display: grid; gap: 9px; padding-top: 13px; border-top: 1px solid rgba(211, 202, 229, .7); }.sync-auth-copy { margin: 0; color: var(--muted); font-size: .64rem; line-height: 1.45; }.sync-account-panel form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 9px; }.sync-account-panel label { display: grid; gap: 5px; color: var(--ink-soft); font-size: .62rem; font-weight: 700; }.sync-account-panel input { min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: .68rem; }.sync-auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }.sync-auth-actions .tiny-button { min-height: 34px; }.sync-account-panel [hidden] { display: none; }

@media (max-width: 760px) {
  .sidebar { grid-template-columns: repeat(5, 1fr); }
  .topbar-actions .icon-button { display: inline-grid; }
  .tree-actions { align-items: flex-end; flex-direction: column; gap: 6px; }
  .tree-card { min-height: auto; }
  .tree-stage { min-height: 530px; }
  .passion-node { transform: none; }
  .passion-node:hover { transform: translateY(-3px) scale(1.02); }
  .node-piano { top: 8%; left: 4%; }.node-chess { top: 20%; left: 40%; }.node-body { top: 8%; right: 4%; }.node-languages { top: 39%; right: 3%; }.node-travel { right: 4%; bottom: 10%; }.node-bike { right: 37%; bottom: 2%; }.node-mind { bottom: 10%; left: 4%; }.node-medicine { top: 39%; left: 3%; }
  .today-actions { padding: 18px; }.today-action-grid { grid-template-columns: 1fr; }.today-action-card { min-height: 58px; }
  .habit-table { display: none; }.habit-mobile-list { display: grid; gap: 12px; }.habit-board { overflow: visible; padding: 0; background: transparent; border: 0; box-shadow: none; }.habit-day-card { padding: 15px; border: 1px solid var(--line); border-radius: 18px 18px 18px 4px; background: rgba(255,255,255,.72); box-shadow: var(--shadow-small); }.habit-day-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }.habit-day-heading .eyebrow { margin-bottom: 3px; }.habit-day-heading h3 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 1.2rem; font-weight: 500; }.habit-day-heading > span { color: var(--purple); font-size: .63rem; font-weight: 700; }.mobile-habit-list { display: grid; gap: 3px; }.mobile-habit-row { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 8px; min-height: 45px; border-bottom: 1px solid #f0edf5; }.mobile-habit-row:last-child { border-bottom: 0; }.mobile-habit-row .habit-name-button { min-width: 0; width: 100%; padding: 8px 4px; font-size: .68rem; }.mobile-habit-row .habit-name-button span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.mobile-habit-row .habit-cell { width: 40px; height: 38px; border-radius: 10px; }.habit-toolbar-actions { align-items: flex-start; justify-content: space-between; width: 100%; }.habit-status-popover { position: fixed; width: min(230px, calc(100vw - 20px)); }.status-choice-list button { min-height: 40px; }
  .month-calendar, .month-grid, .month-header { min-width: 0; }.month-header { padding: 12px 6px 8px; }.month-header span { font-size: .5rem; }.month-day { min-height: 62px; padding: 6px 3px; }.day-number { width: 23px; height: 23px; margin: 0 auto; font-size: .62rem; }.day-events { display: flex; justify-content: center; gap: 3px; margin-top: 5px; }.day-event { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; font-size: 0; }.day-dots { justify-content: center; margin-top: 4px; }.day-dot { width: 4px; height: 4px; }.calendar-agenda { display: block; }.calendar-layout { grid-template-columns: 1fr; }.day-detail { padding: 17px; }.day-detail-placeholder { min-height: 180px; }.day-detail-header h2 { font-size: 1.45rem; }
  .sync-settings-card { align-items: flex-start; flex-direction: column; }.sync-account-panel { width: 100%; }.sync-account-panel form { grid-template-columns: 1fr; }.settings-row { grid-template-columns: 1fr; }.settings-row-actions { justify-content: flex-start; }.setting-form { max-height: 54vh; overflow: auto; }
}

@media (max-width: 430px) {
  .topbar-actions .icon-button { display: inline-grid !important; }
  .tree-stage { min-height: 490px; }.tree-hub { transform: scale(.88); }.tree-hub:hover { transform: scale(.9) translateY(-3px); }.passion-node { transform: scale(.9); }.passion-node:hover { transform: scale(.92) translateY(-3px); }
  .node-piano { left: 1%; }.node-body { right: 1%; }.node-medicine { left: 0; }.node-languages { right: 0; }.node-travel { right: 1%; }.node-mind { left: 1%; }
  .view-intro h1 { font-size: 2.6rem; }.today-actions-header { align-items: flex-start; flex-direction: column; gap: 6px; }.today-actions-header h2 { font-size: 1.25rem; }
}