:root {
  --ink: #17302f;
  --ink-soft: #60716f;
  --forest: #153f3b;
  --forest-2: #1e5851;
  --mint: #b9e6d2;
  --mint-soft: #e7f5ee;
  --cream: #f5f4ee;
  --paper: #fdfdf9;
  --line: #dde3dc;
  --coral: #f39a71;
  --shadow: 0 18px 50px rgba(27, 61, 57, 0.08);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--cream);
  font-family: Inter, "Noto Sans JP", "Yu Gothic UI", "Hiragino Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 250px;
  padding: 30px 22px 24px;
  display: flex;
  flex-direction: column;
  background: var(--forest);
  color: #fff;
  z-index: 20;
}
.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: var(--mint); color: var(--forest); }
.brand-mark svg { width: 27px; height: 27px; }
.brand-mark svg path:first-child { fill: none; }
.brand-mark svg path:last-child { stroke: #2b7461; }
.brand-mark.small { width: 36px; height: 36px; border-radius: 11px; }
.brand strong { display: block; font-size: 15px; letter-spacing: .01em; }
.brand small { display: block; margin-top: 3px; color: rgba(255,255,255,.6); font-size: 10px; }
.side-nav { display: grid; gap: 8px; margin-top: 58px; }
.nav-item {
  border: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 13px;
  color: rgba(255,255,255,.66);
  background: transparent;
  text-align: left;
  transition: .2s ease;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-item.active { color: #fff; background: rgba(185,230,210,.15); box-shadow: inset 3px 0 0 var(--mint); }
.side-note { display: flex; gap: 11px; align-items: flex-start; padding: 16px 14px; margin-top: auto; background: rgba(0,0,0,.13); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; }
.side-note strong, .side-note small { display: block; }
.side-note strong { font-size: 11px; }
.side-note small { color: rgba(255,255,255,.52); font-size: 9px; line-height: 1.5; margin-top: 4px; }
.status-dot { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: #8be5b9; box-shadow: 0 0 0 4px rgba(139,229,185,.12); }

.main-content { margin-left: 250px; padding: 42px clamp(24px, 4vw, 64px) 72px; max-width: 1500px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 30px; }
.date-label { margin: 0 0 6px; color: var(--ink-soft); font-size: 12px; font-weight: 650; letter-spacing: .08em; }
.topbar h1 { margin: 0; font-size: clamp(28px, 3vw, 39px); letter-spacing: -.045em; font-weight: 730; }
.header-progress { display: flex; align-items: center; gap: 14px; }
.header-progress > div:first-child { text-align: right; }
.header-progress span { display: block; font-weight: 750; }
.header-progress small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 10px; }
.mini-ring { --progress: 0deg; width: 54px; height: 54px; display: grid; place-items: center; position: relative; border-radius: 50%; background: conic-gradient(var(--forest-2) var(--progress), #dce5df 0); }
.mini-ring::after { content:""; position: absolute; inset: 5px; background: var(--cream); border-radius: 50%; }
.mini-ring span { position: relative; z-index: 1; font-size: 11px; }

.view { display: none; animation: enter .28s ease both; }
.view.active { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
.goal-card { display: grid; grid-template-columns: minmax(0, 1fr) 270px; overflow: hidden; margin-bottom: 22px; color: #fff; border-radius: var(--radius); background: var(--forest); box-shadow: var(--shadow); }
.goal-card-copy { padding: 28px 30px; }
.eyebrow { margin: 0 0 9px; color: #6b847e; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.goal-card .eyebrow { color: var(--mint); }
.goal-card h2 { margin: 0; max-width: 700px; font-size: clamp(20px, 2.5vw, 29px); letter-spacing: -.025em; line-height: 1.4; }
.goal-card-copy > p:last-child { margin: 10px 0 0; max-width: 680px; color: rgba(255,255,255,.61); font-size: 12px; line-height: 1.6; }
.goal-side { padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.045); }
.goal-side > span { color: var(--mint); font-size: 10px; font-weight: 700; }
.goal-side strong { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.text-button { width: fit-content; padding: 0; margin-top: 13px; color: rgba(255,255,255,.62); border: 0; background: transparent; font-size: 10px; }
.text-button:hover { color: #fff; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); gap: 22px; }
.panel { background: var(--paper); border: 1px solid rgba(23,48,47,.07); border-radius: var(--radius); box-shadow: var(--shadow); }
.task-panel, .focus-panel, .memo-panel, .snapshot-panel, .chart-panel, .category-panel, .history-panel { padding: 25px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.panel-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.subtle-badge { padding: 6px 9px; color: var(--forest-2); background: var(--mint-soft); border-radius: 20px; font-size: 9px; font-weight: 750; }
.task-list { display: grid; gap: 10px; }
.task-row { display: grid; grid-template-columns: 30px 1fr 90px; gap: 10px; align-items: center; padding: 10px 10px 10px 12px; border: 1px solid var(--line); border-radius: 14px; transition: .2s ease; }
.task-row:focus-within { border-color: #93baad; box-shadow: 0 0 0 3px rgba(30,88,81,.07); }
.task-row.done { background: #f4f7f3; opacity: .72; }
.task-check { appearance: none; width: 23px; height: 23px; margin: 0; border: 1.5px solid #9bacaa; border-radius: 7px; background: #fff; cursor: pointer; }
.task-check:checked { border-color: var(--forest-2); background-color: var(--forest-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-9' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.task-text { min-width: 0; padding: 5px 2px; border: 0; outline: 0; background: transparent; font-size: 13px; font-weight: 600; }
.task-row.done .task-text { text-decoration: line-through; color: var(--ink-soft); }
.task-category { min-width: 0; padding: 6px 22px 6px 8px; color: var(--ink-soft); border: 0; border-radius: 8px; background: #f0f3ef; font-size: 9px; }
.microcopy { margin: 14px 0 0; color: #95a09d; font-size: 9px; }

.focus-panel { background: linear-gradient(145deg, #fdfdf9 0%, #f3f8f4 100%); }
.live-indicator { display: flex; align-items: center; gap: 6px; color: #8a9895; font-size: 9px; font-weight: 700; }
.live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #a8b5b2; }
.live-indicator.running { color: var(--forest-2); }
.live-indicator.running i { background: #4eb789; box-shadow: 0 0 0 4px rgba(78,183,137,.13); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(78,183,137,0); } }
.focus-body { display: grid; grid-template-columns: 146px 1fr; gap: 24px; align-items: center; min-height: 170px; }
.timer-ring { --timer-progress: 0deg; position: relative; width: 142px; height: 142px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--forest-2) var(--timer-progress), #dce7e0 0); transition: background .3s linear; }
.timer-ring::before { content:""; position: absolute; inset: 9px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(23,48,47,.03); }
.timer-inner { position: relative; z-index: 1; text-align: center; }
.timer-inner strong { display: block; font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.timer-inner span { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 9px; }
.session-copy > span { color: var(--ink-soft); font-size: 9px; }
.session-copy h3 { margin: 8px 0 5px; font-size: 16px; line-height: 1.4; }
.session-copy p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.session-actions { display: flex; gap: 9px; margin-top: 16px; }
.hidden { display: none !important; }
.primary-button, .secondary-button { min-height: 44px; padding: 11px 18px; border-radius: 12px; border: 1px solid var(--forest); font-weight: 700; font-size: 11px; transition: .2s ease; }
.primary-button { color: #fff; background: var(--forest); box-shadow: 0 8px 20px rgba(21,63,59,.15); }
.primary-button:hover { background: #1c514b; transform: translateY(-1px); }
.secondary-button { color: var(--forest); background: transparent; }
.secondary-button:hover { background: var(--mint-soft); }
.wide { width: 100%; display: flex; justify-content: center; align-items: center; gap: 7px; }
.wide svg { width: 17px; height: 17px; }

.memo-panel textarea { width: 100%; resize: vertical; min-height: 124px; padding: 14px; outline: 0; color: var(--ink); border: 1px solid var(--line); border-radius: 13px; background: #fafbf8; font-size: 12px; line-height: 1.7; }
.memo-panel textarea:focus { border-color: #93baad; box-shadow: 0 0 0 3px rgba(30,88,81,.06); }
.save-status { color: #7e918d; font-size: 9px; }
.snapshot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.big-stat { padding: 16px; border-radius: 14px; background: #f2f5f1; }
.big-stat strong, .big-stat span { display: block; }
.big-stat strong { font-size: 24px; letter-spacing: -.035em; }
.big-stat span { margin-top: 4px; color: var(--ink-soft); font-size: 9px; }
.progress-track { height: 7px; overflow: hidden; margin-top: 17px; border-radius: 9px; background: #e2e8e3; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--coral); transition: width .35s ease; }
.snapshot-panel > p { margin: 12px 0 0; color: var(--ink-soft); font-size: 10px; }

.journey-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.section-lead { margin: 0 0 6px; font-size: 21px; font-weight: 750; letter-spacing: -.025em; }
.section-sub { margin: 0; color: var(--ink-soft); font-size: 11px; }
.segment-control { display: flex; padding: 4px; border-radius: 11px; background: #e5e8e1; }
.segment-control button { min-width: 64px; padding: 7px 15px; color: #6d7c79; border: 0; border-radius: 8px; background: transparent; font-size: 10px; font-weight: 700; }
.segment-control button.active { color: var(--forest); background: #fff; box-shadow: 0 3px 9px rgba(29,55,51,.08); }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.summary-card { padding: 21px 23px; border: 1px solid rgba(23,48,47,.07); border-radius: 17px; background: var(--paper); box-shadow: var(--shadow); }
.summary-card span, .summary-card strong, .summary-card small { display: block; }
.summary-card span { color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.summary-card strong { margin-top: 8px; font-size: 27px; letter-spacing: -.04em; }
.summary-card small { margin-top: 3px; color: #91a09d; font-size: 9px; }
.journey-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 22px; }
.history-panel { grid-column: 1 / -1; }
.bar-chart { height: 238px; padding: 12px 4px 0; display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; border-bottom: 1px solid var(--line); background-image: linear-gradient(to bottom, transparent 24%, rgba(23,48,47,.055) 25%, transparent 26%, transparent 49%, rgba(23,48,47,.055) 50%, transparent 51%, transparent 74%, rgba(23,48,47,.055) 75%, transparent 76%); }
.bar-item { height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; }
.bar-value { font-size: 8px; font-weight: 750; color: var(--forest-2); }
.bar-fill { width: min(32px, 70%); min-height: 3px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #73bda2, var(--forest-2)); transition: height .4s ease; }
.bar-label { height: 18px; color: var(--ink-soft); font-size: 8px; white-space: nowrap; }
.chart-legend { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 13px; color: var(--ink-soft); font-size: 9px; }
.chart-legend span { display: flex; gap: 6px; align-items: center; }
.legend-fill { width: 9px; height: 9px; border-radius: 3px; background: var(--forest-2); }
.chart-legend small { color: #98a4a1; font-size: 8px; }
.category-body { display: grid; grid-template-columns: 135px 1fr; align-items: center; gap: 22px; min-height: 235px; }
.donut { --segments: #dfe6e0 0deg 360deg; position: relative; width: 132px; height: 132px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--segments)); }
.donut::after { content:""; position: absolute; inset: 21px; border-radius: 50%; background: var(--paper); }
.donut > div { position: relative; z-index: 1; text-align: center; }
.donut strong, .donut span { display: block; }
.donut strong { font-size: 24px; letter-spacing: -.04em; }
.donut span { color: var(--ink-soft); font-size: 9px; }
.category-list { display: grid; gap: 10px; }
.category-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 7px; align-items: center; font-size: 9px; }
.category-item i { width: 8px; height: 8px; border-radius: 3px; }
.category-item span { color: var(--ink-soft); }
.category-item strong { font-size: 9px; }
.history-list { display: grid; gap: 2px; }
.history-row { display: grid; grid-template-columns: 86px 1fr 120px 60px; align-items: center; gap: 12px; padding: 13px 8px; border-top: 1px solid #edf0ec; font-size: 10px; }
.history-row:first-child { border-top: 0; }
.history-time { color: var(--ink-soft); }
.history-task { font-weight: 700; }
.history-category { width: fit-content; padding: 5px 8px; border-radius: 8px; background: #eef3ef; color: var(--ink-soft); font-size: 8px; }
.history-duration { text-align: right; font-weight: 750; }
.empty-state { display: grid; place-items: center; min-height: 150px; color: #91a09d; text-align: center; font-size: 10px; line-height: 1.7; }

.settings-wrap { max-width: 900px; margin: 0 auto; }
.settings-intro { max-width: 630px; margin-bottom: 25px; }
.settings-intro h2 { margin: 0 0 9px; font-size: 25px; letter-spacing: -.03em; }
.settings-intro > p:last-child { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.settings-form { display: grid; gap: 19px; padding: 28px; }
label { display: grid; gap: 8px; color: var(--ink); font-size: 10px; font-weight: 750; }
input, textarea, select { width: 100%; color: var(--ink); border: 1px solid var(--line); border-radius: 11px; background: #fafbf8; outline: 0; }
input, select { min-height: 43px; padding: 10px 12px; }
textarea { padding: 11px 12px; resize: vertical; line-height: 1.6; }
input:focus, textarea:focus, select:focus { border-color: #8bb4a8; box-shadow: 0 0 0 3px rgba(30,88,81,.07); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.short-field { max-width: 250px; }
.form-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 5px; }
.form-footer > span { color: var(--ink-soft); font-size: 9px; }
.data-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 16px; padding: 19px 22px; border: 1px solid var(--line); border-radius: 16px; }
.data-card strong, .data-card span { display: block; }
.data-card strong { font-size: 11px; }
.data-card span { margin-top: 4px; color: var(--ink-soft); font-size: 9px; }

.modal { width: min(680px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 0; color: var(--ink); border: 0; border-radius: 24px; background: var(--paper); box-shadow: 0 35px 100px rgba(8,34,31,.24); }
.modal::backdrop { background: rgba(9,29,27,.65); backdrop-filter: blur(5px); }
.modal form { padding: 30px; }
.modal-top { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-size: 12px; font-weight: 800; }
.modal h2 { margin: 0; font-size: clamp(23px, 4vw, 34px); letter-spacing: -.045em; }
.modal-intro { margin: 10px 0 24px; color: var(--ink-soft); font-size: 11px; line-height: 1.65; }
.setup-fields { display: grid; gap: 15px; }
.setup-fields fieldset { display: grid; gap: 8px; padding: 0; border: 0; }
.setup-fields legend { margin-bottom: 7px; font-size: 10px; font-weight: 750; }
.setup-submit { margin-top: 22px; }
.privacy-note { margin: 10px 0 0; color: #8e9b98; text-align: center; font-size: 8px; }
.session-modal { width: min(460px, calc(100vw - 28px)); }
.session-modal form { position: relative; display: grid; gap: 18px; }
.modal-close { position: absolute; top: 17px; right: 19px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink-soft); border: 0; border-radius: 50%; background: #eef2ed; font-size: 20px; }
.duration-picker { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.duration-picker button { padding: 9px 5px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 9px; }
.duration-picker button.active { color: #fff; border-color: var(--forest); background: var(--forest); }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 100; padding: 11px 17px; color: #fff; border-radius: 11px; background: #173b37; box-shadow: 0 12px 30px rgba(0,0,0,.15); font-size: 10px; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.mobile-nav { display: none; }

/* AI onboarding */
.onboarding { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: #f4f5ef; background: radial-gradient(circle at 72% 30%, rgba(84,148,127,.22), transparent 31%), linear-gradient(145deg,#091b1a 0%,#102f2c 58%,#173c36 100%); }
.onboarding::backdrop { background:#091b1a; }
.onboarding-shell { min-height:100%; display:grid; grid-template-rows:auto 2px 1fr; }
.onboarding-head { display:flex; justify-content:space-between; align-items:center; padding:25px clamp(24px,5vw,72px); color:rgba(255,255,255,.55); font-size:10px; letter-spacing:.08em; }
.onboarding-brand { display:flex; align-items:center; gap:11px; color:#fff; font-size:12px; font-weight:800; }
.setup-progress { height:2px; background:rgba(255,255,255,.08); }
.setup-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,#86d2b3,#e4bd72); transition:width .5s ease; }
.onboarding-stage { width:min(760px,calc(100% - 40px)); margin:auto; padding:50px 0 90px; text-align:center; animation:enter .5s ease both; }
.onboarding-stage .eyebrow { color:#8ecab3; }
.onboarding-stage h2 { margin:0; color:#fff; font-size:clamp(38px,6vw,72px); line-height:1.14; letter-spacing:-.055em; }
.onboarding-stage>p:not(.eyebrow) { max-width:590px; margin:22px auto 32px; color:rgba(255,255,255,.6); font-size:13px; line-height:1.9; }
.onboarding-stage>small { display:block; margin-top:15px; color:rgba(255,255,255,.36); font-size:9px; }
.orb { width:118px; height:118px; margin:0 auto 34px; position:relative; display:grid; place-items:center; border:1px solid rgba(145,220,192,.22); border-radius:50%; animation:float 4s ease-in-out infinite; }
.orb::before,.orb::after,.orb span { content:""; position:absolute; border-radius:50%; border:1px solid rgba(145,220,192,.16); }
.orb::before { inset:14px; }.orb::after { inset:28px; }.orb span:first-child { width:8px;height:8px;background:#93d7bb;box-shadow:0 0 30px #93d7bb; }.orb span:nth-child(2){ width:150px;height:48px;border-color:rgba(235,191,112,.2);transform:rotate(-15deg); }
.orb i { width:55px;height:55px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b7e7d2,#4c997f 46%,#123b34 72%);box-shadow:0 0 45px rgba(121,205,173,.45); }
@keyframes float { 50% { transform:translateY(-8px) rotate(3deg); } }
.onboarding-button { margin:0 auto; min-height:56px; padding:15px 26px; display:flex; align-items:center; justify-content:center; gap:32px; color:#10342e; border:0; border-radius:100px; background:#d8eadf; font-size:12px; font-weight:800; box-shadow:0 14px 40px rgba(0,0,0,.18); }
.onboarding-button:hover { background:#fff; transform:translateY(-2px); }.onboarding-button span{font-size:18px}.onboarding-button.compact{margin:0;min-width:135px;min-height:48px;gap:20px}.onboarding-button.launch{margin-top:34px;padding-left:34px;background:#e8c67e;}
#setupForm { text-align:left; width:min(680px,calc(100% - 40px)); }
.ai-message { display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start; margin-bottom:30px; }
.ai-avatar { width:42px;height:42px;display:grid;place-items:center;color:#123b34;background:#a9d9c4;border-radius:14px;font-size:18px;box-shadow:0 0 30px rgba(118,203,168,.2); }
.ai-message small { color:#91cbb4;font-size:9px;font-weight:800;letter-spacing:.08em; }.ai-message p { margin:7px 0 0;color:#fff;font-size:clamp(23px,4vw,35px);line-height:1.4;font-weight:700;letter-spacing:-.025em; }
.answer-field textarea { min-height:120px;padding:20px 22px;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.055);font-size:16px;line-height:1.7;box-shadow:none; }.answer-field textarea:focus{border-color:#85c5ac;box-shadow:0 0 0 4px rgba(121,194,165,.09);}
.answer-field textarea::placeholder{color:rgba(255,255,255,.27)}
.answer-suggestions { display:flex;flex-wrap:wrap;gap:8px;margin-top:14px; }.answer-suggestions button{padding:9px 13px;color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.12);border-radius:100px;background:transparent;font-size:9px}.answer-suggestions button:hover{color:#fff;border-color:#81bea6;background:rgba(255,255,255,.05)}
.setup-actions{display:flex;justify-content:space-between;align-items:center;margin-top:34px}.ghost-button{padding:12px 0;color:rgba(255,255,255,.48);border:0;background:transparent;font-size:10px}.ghost-button:hover{color:#fff}
.thinking-orb { width:90px;height:90px;margin:0 auto 35px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(137,210,181,.2);animation:pulse 1.4s infinite; }.thinking-orb i{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#b8e8d4,#559c83);box-shadow:0 0 40px rgba(119,205,170,.45)}
.thinking-lines{width:280px;margin:35px auto 0;display:grid;gap:8px}.thinking-lines span{height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(148,216,189,.7),transparent);animation:thinking 1.2s ease-in-out infinite}.thinking-lines span:nth-child(2){animation-delay:.2s}.thinking-lines span:nth-child(3){animation-delay:.4s}@keyframes thinking{50%{transform:scaleX(.5);opacity:.35}}
.result-stage { width:min(880px,calc(100% - 40px)); }.result-stage h2{font-size:clamp(28px,4vw,48px)}.result-stage>p:not(.eyebrow){margin-bottom:26px}
.mini-roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:left}.mini-roadmap>div{min-height:104px;padding:16px;display:flex;gap:10px;border:1px solid rgba(255,255,255,.11);border-radius:15px;background:rgba(255,255,255,.045)}.mini-roadmap>div>span{color:#8fcbb3;font-size:9px}.mini-roadmap small,.mini-roadmap strong{display:block}.mini-roadmap small{color:rgba(255,255,255,.4);font-size:8px}.mini-roadmap strong{margin-top:7px;color:#fff;font-size:11px;line-height:1.5}

/* Journey roadmap */
.journey-view-switch{width:fit-content;display:flex;gap:5px;margin-bottom:25px;padding:4px;border-radius:13px;background:#e5e8e1}.journey-view-switch button{padding:9px 17px;color:#73817e;border:0;border-radius:10px;background:transparent;font-size:10px;font-weight:750}.journey-view-switch button.active{color:#fff;background:var(--forest);box-shadow:0 4px 12px rgba(19,60,58,.17)}
.roadmap-hero{display:flex;justify-content:space-between;gap:25px;padding:31px 33px;color:#fff;border-radius:22px;background:radial-gradient(circle at 85% 20%,rgba(139,220,187,.18),transparent 28%),var(--forest);box-shadow:var(--shadow)}.roadmap-hero h2{margin:0;font-size:clamp(23px,3vw,35px);line-height:1.35}.roadmap-hero p:last-child{max-width:700px;margin:10px 0 0;color:rgba(255,255,255,.6);font-size:11px;line-height:1.7}.roadmap-hero .eyebrow{color:var(--mint)}.ai-pill{height:fit-content;padding:7px 10px;white-space:nowrap;border:1px solid rgba(255,255,255,.13);border-radius:99px;color:#aee0cb;font-size:8px;font-weight:800;letter-spacing:.09em}.ai-pill i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#8ad4b6;box-shadow:0 0 8px #8ad4b6}
.roadmap-timeline{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:32px 5px}.roadmap-timeline::before{content:"";position:absolute;top:21px;left:8%;right:8%;height:2px;background:#d7dfd9}.roadmap-stop{position:relative;text-align:center}.roadmap-marker{height:44px;display:grid;place-items:center}.roadmap-marker span{position:relative;z-index:1;width:27px;height:27px;display:grid;place-items:center;border:4px solid var(--cream);border-radius:50%;color:#72827e;background:#d7dfd9;font-size:8px;font-weight:800}.roadmap-stop.current .roadmap-marker span{width:35px;height:35px;color:#fff;background:var(--coral);box-shadow:0 0 0 5px rgba(243,154,113,.16)}.roadmap-copy{padding:8px 8px}.roadmap-copy small{color:#83918e;font-size:8px;font-weight:800}.roadmap-copy h3{margin:7px 0;font-size:12px;line-height:1.45}.roadmap-copy p{margin:0;color:var(--ink-soft);font-size:9px;line-height:1.55}.roadmap-action{display:block;margin-top:9px;color:var(--forest-2);font-size:8px;line-height:1.5;font-weight:700}
.roadmap-bottom{display:grid;grid-template-columns:1fr 1fr;gap:18px}.roadmap-principle,.roadmap-next{padding:24px}.roadmap-bottom h3{margin:0 0 9px;font-size:16px}.roadmap-bottom p:not(.eyebrow){margin:0;color:var(--ink-soft);font-size:10px;line-height:1.7}.roadmap-next .primary-button{margin-top:17px}

@media (max-width: 1050px) {
  .sidebar { width: 210px; }
  .main-content { margin-left: 210px; padding-left: 26px; padding-right: 26px; }
  .dashboard-grid, .journey-grid { grid-template-columns: 1fr; }
  .history-panel { grid-column: auto; }
  .goal-card { grid-template-columns: 1fr 230px; }
}

@media (max-width: 760px) {
  body { background: #f8f7f2; }
  .sidebar { display: none; }
  .main-content { margin-left: 0; padding: 23px 16px 98px; }
  .topbar { align-items: flex-start; margin-bottom: 22px; }
  .header-progress > div:first-child { display: none; }
  .mini-ring { width: 48px; height: 48px; }
  .goal-card { grid-template-columns: 1fr; }
  .goal-card-copy { padding: 24px 22px 20px; }
  .goal-side { padding: 18px 22px 21px; border-top: 1px solid rgba(255,255,255,.1); border-left: 0; }
  .dashboard-grid { gap: 14px; }
  .task-panel, .focus-panel, .memo-panel, .snapshot-panel, .chart-panel, .category-panel, .history-panel { padding: 20px; }
  .focus-body { grid-template-columns: 122px 1fr; gap: 17px; min-height: 150px; }
  .timer-ring { width: 120px; height: 120px; }
  .timer-inner strong { font-size: 22px; }
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .summary-card:last-child { grid-column: 1/-1; }
  .journey-toolbar { align-items: flex-start; }
  .section-sub { max-width: 210px; }
  .category-body { grid-template-columns: 120px 1fr; gap: 14px; }
  .donut { width: 116px; height: 116px; }
  .history-row { grid-template-columns: 72px 1fr 50px; }
  .history-category { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .settings-form { padding: 21px; }
  .data-card { align-items: flex-start; flex-direction: column; }
  .mobile-nav { position: fixed; inset: auto 12px 11px; z-index: 30; display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px; border: 1px solid rgba(23,48,47,.08); border-radius: 18px; background: rgba(21,63,59,.96); box-shadow: 0 16px 40px rgba(9,30,28,.25); backdrop-filter: blur(12px); }
  .mobile-nav .nav-item { min-height: 50px; padding: 6px; justify-content: center; flex-direction: column; gap: 2px; border-radius: 12px; font-size: 8px; }
  .mobile-nav .nav-item svg { width: 18px; height: 18px; }
  .mobile-nav .nav-item.active { box-shadow: none; background: rgba(185,230,210,.17); }
  .modal form { padding: 23px 20px; }
  .onboarding-head{padding:18px 20px}.onboarding-stage{padding:32px 0 70px}.onboarding-stage h2{font-size:40px}.orb{width:92px;height:92px;margin-bottom:28px}.mini-roadmap{grid-template-columns:1fr 1fr}.roadmap-timeline{grid-template-columns:1fr;margin:22px 0}.roadmap-timeline::before{top:20px;bottom:20px;left:21px;right:auto;width:2px;height:auto}.roadmap-stop{display:grid;grid-template-columns:44px 1fr;text-align:left}.roadmap-copy{padding:5px 10px 20px}.roadmap-bottom{grid-template-columns:1fr}.roadmap-hero{padding:25px;flex-direction:column}.ai-pill{width:fit-content}
}

@media (max-width: 430px) {
  .task-row { grid-template-columns: 27px 1fr; }
  .task-category { grid-column: 2; width: fit-content; }
  .focus-body { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .snapshot-row { grid-template-columns: 1fr 1fr; }
  .journey-toolbar { flex-direction: column; }
  .category-body { grid-template-columns: 1fr; justify-items: center; }
  .category-list { width: 100%; }
  .duration-picker { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.daily-north{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:18px;margin-bottom:22px;padding:18px 22px;border:1px solid rgba(23,48,47,.08);border-radius:18px;background:linear-gradient(110deg,#fff 0%,#f4f8f4 100%);box-shadow:var(--shadow)}
.daily-north-index{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:#fff;background:var(--coral);font-size:11px;font-weight:800;box-shadow:0 8px 18px rgba(243,154,113,.23)}
.daily-north-copy .eyebrow{margin-bottom:3px}.daily-north-copy>span{color:var(--ink-soft);font-size:9px}.daily-north-copy h2{margin:4px 0 0;font-size:16px;line-height:1.45}.daily-north.completed{opacity:.65}.daily-north.completed .daily-north-index{background:var(--forest-2)}
.reflection-trigger{width:100%;margin-top:17px;padding:13px 14px;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;text-align:left;color:var(--forest);border:1px solid #d5e3db;border-radius:13px;background:#f0f7f2}.reflection-trigger>span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:#fff;background:var(--forest-2)}.reflection-trigger strong,.reflection-trigger small{display:block}.reflection-trigger strong{font-size:10px}.reflection-trigger small{margin-top:3px;color:var(--ink-soft);font-size:8px}.reflection-trigger b{font-size:16px}.reflection-trigger:hover{border-color:#9ebead;background:#e9f4ed}
.ai-insight{display:grid;grid-template-columns:38px 1fr;gap:14px;margin-top:16px;padding:18px 21px;border:1px solid #d8e7df;border-radius:16px;background:#f2f8f4}.ai-insight>span{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:#fff;background:var(--forest)}.ai-insight small{color:var(--forest-2);font-size:8px;font-weight:800;letter-spacing:.12em}.ai-insight p{margin:5px 0 0;color:#435c57;font-size:11px;line-height:1.7;font-weight:600}
.reflection-modal textarea{min-height:105px}.reflection-modal form{display:grid;gap:16px}
@media (max-width:760px){.daily-north{grid-template-columns:42px 1fr;padding:16px}.daily-north .primary-button{grid-column:1/-1;width:100%}}