:root {
  --forest: #0e2724;
  --forest-2: #173b35;
  --sage: #77a995;
  --mint: #d9ebe2;
  --paper: #f3f5ef;
  --card: #fbfcf8;
  --ink: #18231f;
  --muted: #728079;
  --line: #dce2db;
  --sun: #f2c56f;
  --coral: #db7563;
  --blue: #738fa0;
  --shadow: 0 18px 55px rgba(23, 48, 42, .13);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: #dfe5de; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(119, 169, 149, .5); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.app-shell { width: 100%; max-width: 480px; min-height: 100dvh; margin: 0 auto; position: relative; overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.screen { min-height: 100dvh; display: none; padding: max(58px, calc(36px + env(safe-area-inset-top))) 20px calc(104px + env(safe-area-inset-bottom)); }
.screen.active { display: block; animation: screen-in .24s ease both; }
@keyframes screen-in { from { opacity: .4; } }
.demo-banner { width: calc(100% - 28px); min-height: 30px; padding: 0 12px; position: absolute; z-index: 20; top: max(12px, env(safe-area-inset-top)); left: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 99px; color: #dce9e3; background: rgba(14,39,36,.94); box-shadow: 0 6px 20px rgba(14,39,36,.146); font-size: 9px; }
.demo-banner strong { color: var(--sun); font-size: 10px; }

.topbar, .records-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.page-header { min-height: 44px; align-items: center; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.date-line { margin: 0 0 3px; color: var(--sage); font-size: 11px; font-weight: 700; letter-spacing: .07em; }
h1 { margin: 0; color: var(--forest); font: 600 30px/1.12 "Songti SC", "STSong", serif; letter-spacing: -.045em; }
.local-state { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.local-state i { width: 7px; height: 7px; border-radius: 50%; background: #69ad8b; box-shadow: 0 0 0 5px rgba(105,173,139,.1); }
.local-state.warning i { background: var(--sun); box-shadow: 0 0 0 5px rgba(242,197,111,.13); }
.local-state.error i { background: var(--coral); box-shadow: 0 0 0 5px rgba(219,117,99,.11); }
.round-button { width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; background: rgba(251,252,248,.75); cursor: pointer; }
.round-button svg { width: 20px; fill: none; stroke: var(--forest); stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.page-menu-button { width: 44px; height: 44px; }

.now-card { min-height: 185px; margin-bottom: 24px; padding: 22px; position: relative; overflow: hidden; border-radius: 28px 28px 8px 28px; color: white; background: var(--forest); box-shadow: 0 16px 42px rgba(14,39,36,.19); }
.now-orbit { position: absolute; width: 220px; height: 220px; right: -74px; top: -83px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.now-orbit::before, .now-orbit::after { content: ""; position: absolute; inset: 25px; border: 1px solid rgba(255,255,255,.075); border-radius: 50%; }
.now-orbit::after { inset: 55px; }
.now-orbit i { position: absolute; width: 7px; height: 7px; left: 38px; bottom: 31px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 8px rgba(242,197,111,.09); }
.now-copy { position: relative; z-index: 1; }
.now-copy > p { margin: 0 0 14px; display: flex; gap: 8px; align-items: center; color: #a7beb5; font-size: 11px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #72c9a4; box-shadow: 0 0 0 5px rgba(114,201,164,.1); animation: live 2s ease infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 9px rgba(114,201,164,0); } }
.now-card h2 { max-width: 285px; margin: 0 0 18px; font: 500 23px/1.36 "Songti SC", "STSong", serif; text-wrap: pretty; }
.now-meta { display: flex; gap: 12px; align-items: baseline; }
.now-meta strong { font: 500 18px/1 ui-monospace, "SFMono-Regular", monospace; font-variant-numeric: tabular-nums; }
.now-meta span { color: #95aaa2; font-size: 10px; }
.finish-button { position: absolute; right: 18px; bottom: 17px; z-index: 1; min-height: 44px; padding: 0 15px; border: 1px solid rgba(255,255,255,.17); border-radius: 99px; color: #d9e6e0; background: rgba(255,255,255,.07); cursor: pointer; }

.conversation { display: grid; gap: 15px; }
.day-marker { height: 16px; display: flex; align-items: center; gap: 10px; color: #9ba69f; font-size: 9px; }
.day-marker::before, .day-marker::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.message { max-width: 88%; font-size: 13px; line-height: 1.62; }
.message p { margin: 0; }
.message time { display: block; margin-top: 5px; color: #929e97; font-size: 9px; text-align: right; }
.user-message { justify-self: end; padding: 12px 15px; border-radius: 18px 18px 4px 18px; background: #e3ebe3; }
.ai-message { max-width: 94%; display: grid; grid-template-columns: 29px 1fr; gap: 10px; align-items: start; }
.ai-mark { width: 29px; height: 29px; display: flex; gap: 2px; align-items: end; justify-content: center; padding-bottom: 8px; border-radius: 50%; color: white; background: var(--forest); }
.ai-mark span { width: 2px; border-radius: 2px; background: var(--sun); }
.ai-mark span:nth-child(1) { height: 6px; }.ai-mark span:nth-child(2) { height: 11px; }.ai-mark span:nth-child(3) { height: 8px; }
.ai-message > div:last-child { padding: 2px 0; }
.message.fresh { animation: message-in .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes message-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

.composer-space { height: 152px; }
.composer { width: 100%; max-width: 480px; position: fixed; z-index: 12; left: 50%; bottom: calc(69px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 10px 16px 12px; background: linear-gradient(180deg, rgba(243,245,239,0), var(--paper) 16%); }
.suggestions { overflow-x: auto; display: flex; gap: 7px; padding: 9px 2px 10px; scrollbar-width: none; }
.suggestions::-webkit-scrollbar { display: none; }
.suggestions button { min-height: 36px; flex: 0 0 auto; padding: 0 13px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: var(--card); font-size: 10px; cursor: pointer; }
.suggestions button.active { color: white; border-color: var(--forest-2); background: var(--forest-2); box-shadow: 0 5px 15px rgba(23,59,53,.16); }
.input-row { display: grid; grid-template-columns: 42px minmax(0,1fr) 42px 42px; gap: 7px; align-items: center; padding: 7px; border: 1px solid #d7dfd8; border-radius: 28px; background: var(--card); box-shadow: 0 11px 34px rgba(34,58,51,.12); }
.attach-button, .send-button, .mic-button { border: 0; cursor: pointer; }
.attach-button { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: #edf1eb; }
.attach-button svg, .send-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.text-input-wrap { min-width: 0; }
.text-input-wrap input { width: 100%; height: 42px; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.text-input-wrap input::placeholder { color: #9aa59f; }
.send-button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--sage); opacity: .38; pointer-events: none; }
.send-button.ready { opacity: 1; pointer-events: auto; }
.mic-button { width: 42px; height: 42px; padding: 0; position: relative; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--forest); box-shadow: 0 5px 16px rgba(14,39,36,.24); touch-action: manipulation; user-select: none; -webkit-touch-callout: none; }
.mic-rings { position: absolute; pointer-events: none; }
.mic-button svg { width: 19px; position: relative; z-index: 1; transform: translateY(-1px); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.mic-button.listening { background: var(--coral); }
.mic-button.processing { background: var(--sage); cursor: wait; }
.mic-button:disabled { opacity: .56; cursor: not-allowed; }
.mic-button.listening .mic-rings { position: absolute; inset: -7px; border: 1px solid rgba(219,117,99,.44); border-radius: 50%; animation: rings 1.25s ease infinite; }
@keyframes rings { to { transform: scale(1.24); opacity: 0; } }
.listening-copy { height: 14px; margin: 7px 0 0; color: #8a9790; font-size: 9px; text-align: center; }

.records-header { margin-bottom: 18px; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; margin-bottom: 18px; border-radius: 14px; background: #e5eae4; }
.segmented button { min-height: 42px; border: 0; border-radius: 11px; color: var(--muted); background: transparent; font-size: 12px; cursor: pointer; }
.segmented button.active { color: var(--forest); background: var(--card); box-shadow: 0 3px 12px rgba(31,51,45,.08); font-weight: 700; }
.record-panel { display: none; }.record-panel.active { display: block; animation: screen-in .2s ease both; }
.summary-card { padding: 20px; margin-bottom: 24px; border: 1px solid #d9e0d8; border-radius: 8px 26px 26px 26px; background: var(--card); }
.summary-card > div:first-child { display: flex; align-items: baseline; justify-content: space-between; }
.summary-card strong { color: var(--forest); font: 500 29px "Songti SC", serif; }.summary-card span { color: var(--muted); font-size: 10px; }
.day-band { height: 9px; display: flex; gap: 2px; margin: 17px 0 12px; overflow: hidden; border-radius: 99px; background: #e6eae4; }
.day-band i { height: 100%; display: block; }.day-band .sleep { width: 34%; background: var(--blue); }.day-band .life { width: 15%; background: var(--sun); }.day-band .focus { width: 25%; background: var(--forest-2); }.day-band .gap { width: 8%; }.day-band .short { width: 15%; }.day-band .now { width: 3px; background: var(--coral); }
#dayBand i { width: auto; min-width: 3px; }
.summary-card p { margin: 0; display: flex; justify-content: space-between; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.section-heading h2 { margin: 0; font: 600 19px "Songti SC", serif; }.section-heading button { min-height: 40px; padding: 0 8px; border: 0; color: var(--sage); background: transparent; font-size: 11px; cursor: pointer; }
.timeline { position: relative; display: grid; }
.timeline::before { content: ""; position: absolute; left: 47px; top: 20px; bottom: 20px; width: 1px; background: #ccd5cd; }
.time-entry { display: grid; grid-template-columns: 37px 21px 1fr; gap: 0; align-items: start; position: relative; margin-bottom: 13px; }
.time-entry > time { padding-top: 13px; font: 500 10px ui-monospace, monospace; color: var(--muted); }
.entry-dot { width: 9px; height: 9px; margin: 15px auto 0; position: relative; z-index: 1; border: 2px solid var(--paper); border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1px var(--sun); }
.time-entry.focus .entry-dot { background: var(--forest-2); box-shadow: 0 0 0 1px var(--forest-2); }.time-entry.sleep .entry-dot { background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }.time-entry.current .entry-dot { background: #65b590; box-shadow: 0 0 0 5px rgba(101,181,144,.12); }
.entry-card { min-height: 72px; padding: 14px 14px 13px; border: 1px solid #dde3dc; border-radius: 4px 17px 17px 17px; background: var(--card); cursor: pointer; }
.entry-card:active { transform: scale(.99); }.entry-card > div:first-child { display: flex; justify-content: space-between; gap: 10px; }
.entry-card h3 { margin: 0 0 4px; font-size: 12px; line-height: 1.45; }.entry-card strong { font: 500 10px ui-monospace, monospace; color: var(--forest-2); white-space: nowrap; }
.entry-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.entry-card .tag { display: inline-block; margin-top: 7px; color: var(--sage); font-size: 8px; }
.current .entry-card { color: white; border-color: var(--forest); background: var(--forest); }.current .entry-card strong, .current .entry-card .tag { color: var(--sun); }.current .entry-card p { color: #a9bbb4; }
.timeline.editing .entry-card { animation: edit-wiggle .4s ease infinite alternate; }.timeline.editing .entry-card::after { content: "删除"; float: right; margin-top: -14px; color: var(--coral); font-size: 9px; }
.timeline.empty::before { display: none; }
.timeline-empty { padding: 31px 18px; border: 1px dashed #ccd6ce; border-radius: 18px; color: var(--muted); text-align: center; background: rgba(251,252,248,.55); }
.timeline-empty strong, .timeline-empty span { display: block; }.timeline-empty strong { margin-bottom: 7px; color: var(--forest); font: 600 16px "Songti SC", serif; }.timeline-empty span { font-size: 10px; line-height: 1.6; }
.sample-entry .entry-card { background: rgba(251,252,248,.72); }.sample-entry .entry-card::before { content: "样例"; float: right; margin: -5px -4px 4px 8px; padding: 3px 6px; border-radius: 99px; color: var(--sage); background: var(--mint); font-size: 7px; }
@keyframes edit-wiggle { to { transform: rotate(.25deg); } }

.chat-summary { padding: 21px; margin-bottom: 15px; border-radius: 26px 8px 26px 26px; color: white; background: var(--forest); }
.chat-summary strong { font: 500 34px "Songti SC", serif; }.chat-summary span { margin-left: 8px; color: #b6c8c1; font-size: 11px; }.chat-summary p { margin: 9px 0 0; color: #91aaa0; font-size: 10px; }
.chat-log { display: grid; gap: 10px; }
.day-outcome-list { display: grid; gap: 10px; }
.day-outcome-item { min-height: 74px; padding: 14px; display: grid; grid-template-columns: 28px 1fr 24px; gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.day-outcome-item > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--forest); background: var(--mint); font-size: 10px; font-weight: 700; }
.day-outcome-item strong { display: block; margin: 2px 0 5px; font-size: 12px; }.day-outcome-item p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.day-outcome-item > i { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: white; font-style: normal; }.day-outcome-item.completed > i { border-color: var(--sage); background: var(--sage); }
.chat-card { padding: 15px; border: 1px solid var(--line); border-radius: 17px 17px 17px 4px; background: var(--card); cursor: pointer; }
.chat-card header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: var(--muted); font-size: 9px; }
.chat-card .user-line, .chat-card .ai-line { margin: 0; font-size: 11px; line-height: 1.55; }.chat-card .user-line { margin-bottom: 7px; font-weight: 700; }.chat-card .ai-line { color: var(--muted); }
.chat-card footer { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; color: var(--sage); font-size: 9px; }

.today-screen { background: linear-gradient(180deg, #f3f5ef 0%, #edf2ec 100%); }
.today-header { align-items: center; }
.today-header-actions { display: flex; align-items: center; gap: 8px; }
.today-header-actions .round-button { width: 44px; height: 44px; }
.today-hero { padding: 22px 20px 21px; margin-bottom: 25px; position: relative; overflow: hidden; border-radius: 8px 27px 27px 27px; color: white; background: var(--forest); box-shadow: 0 15px 40px rgba(14,39,36,.17); }
.today-hero::after { content: ""; width: 145px; height: 145px; position: absolute; right: -62px; top: -70px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 25px rgba(255,255,255,.035), 0 0 0 50px rgba(255,255,255,.02); }
.today-progress { height: 4px; margin-bottom: 19px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.12); }
.today-progress i { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--sun); transition: width .3s ease; }
.today-hero p { margin: 0 0 8px; color: #99b0a7; font-size: 9px; letter-spacing: .08em; }
.today-hero h2 { max-width: 325px; margin: 0 0 11px; position: relative; z-index: 1; font: 500 20px/1.45 "Songti SC", "STSong", serif; text-wrap: pretty; }
.today-hero > span { color: #a9bbb4; font-size: 9px; line-height: 1.6; }
.today-timeline-entry { width: 100%; min-height: 66px; padding: 10px 13px; margin: -10px 0 24px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 11px; align-items: center; border: 1px solid var(--line); border-radius: 17px; text-align: left; background: rgba(251,252,248,.78); cursor: pointer; }
.timeline-entry-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: var(--forest); background: var(--mint); }.timeline-entry-icon svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.today-timeline-entry strong, .today-timeline-entry small { display: block; }.today-timeline-entry strong { margin-bottom: 3px; font-size: 11px; }.today-timeline-entry small { color: var(--muted); font-size: 8px; }.today-timeline-entry b { color: var(--sage); }
.today-list-section .section-heading > span { color: var(--muted); font-size: 9px; }
.secondary-outcomes { margin-top: 25px; }
.today-list { display: grid; gap: 10px; }
.today-empty { padding: 26px 18px; border: 1px dashed #cad5cc; border-radius: 20px; text-align: center; background: rgba(251,252,248,.55); }
.today-empty strong, .today-empty span { display: block; }.today-empty strong { margin-bottom: 7px; color: var(--forest); font: 600 15px "Songti SC", serif; }.today-empty span { color: var(--muted); font-size: 9px; line-height: 1.65; }
.outcome-item { padding: 14px; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 11px; border: 1px solid var(--line); border-radius: 18px 18px 18px 5px; background: var(--card); box-shadow: 0 7px 22px rgba(23,59,53,.045); }
.outcome-item.focused { border-color: rgba(119,169,149,.7); box-shadow: 0 8px 25px rgba(23,59,53,.09); }
.outcome-check { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 1px solid #bdcbc1; border-radius: 50%; color: transparent; background: #f3f6f1; cursor: pointer; }
.outcome-check svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.outcome-item.completed { opacity: .68; }.outcome-item.completed .outcome-check { color: white; border-color: var(--sage); background: var(--sage); }.outcome-item.completed h3 { text-decoration: line-through; }
.outcome-copy { min-width: 0; }.outcome-copy header { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.outcome-copy h3 { margin: 1px 0 5px; font-size: 12px; line-height: 1.45; }.outcome-copy p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.outcome-meta { margin-top: 9px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 8px; }
.outcome-rank { min-width: 20px; color: var(--forest-2); font: 700 8px ui-monospace, monospace; }
.outcome-actions { margin-left: auto; display: flex; gap: 4px; }
.outcome-actions button { min-width: 27px; height: 27px; padding: 0 7px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: #f1f4ef; font-size: 9px; cursor: pointer; }
.outcome-actions button:disabled { opacity: .28; cursor: default; }.outcome-actions .focus-action { color: var(--forest-2); }
.priority-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }.priority-dot.high { background: var(--coral); }.priority-dot.low { background: var(--blue); }
.outcome-due { flex: 0 0 auto; padding: 4px 7px; border-radius: 99px; color: var(--forest-2); background: #edf1eb; font: 600 8px ui-monospace, monospace; }
.today-dialogue { display: grid; gap: 8px; margin-top: 18px; }
.today-dialogue article { padding: 11px 13px; border-left: 2px solid var(--sage); border-radius: 0 12px 12px 0; background: rgba(251,252,248,.65); }
.today-dialogue p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }.today-dialogue strong { display: block; margin-bottom: 4px; color: var(--forest); font-size: 10px; }
.today-composer-space { height: 145px; }
.today-composer { width: 100%; max-width: 480px; position: fixed; z-index: 12; left: 50%; bottom: calc(70px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 14px 16px 11px; background: linear-gradient(180deg, rgba(237,242,236,0), #edf2ec 18%); }
.today-composer > label { display: block; margin: 0 4px 7px; color: var(--forest-2); font-size: 9px; font-weight: 700; }
.today-input-row { min-height: 58px; padding: 7px 7px 7px 14px; display: grid; grid-template-columns: minmax(0,1fr) 44px 44px; gap: 7px; align-items: end; border: 1px solid #d5ddd6; border-radius: 21px; background: var(--card); box-shadow: 0 11px 34px rgba(34,58,51,.12); }
.today-input-row textarea { width: 100%; max-height: 88px; min-height: 42px; padding: 10px 0 7px; resize: none; overflow-y: auto; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; line-height: 1.5; }
.today-input-row textarea::placeholder { color: #9aa59f; }.today-input-row textarea:disabled { opacity: .65; }
.today-send-button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; color: white; background: var(--forest); cursor: pointer; }
.today-send-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.today-send-button:disabled { opacity: .45; cursor: wait; }
.today-mic-button { width: 44px; height: 44px; padding: 0; position: relative; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--forest); background: #e9efea; cursor: pointer; touch-action: manipulation; user-select: none; }
.today-mic-button svg { width: 18px; position: relative; z-index: 1; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }.today-mic-button.listening { color: white; background: var(--coral); }.today-mic-button.processing { color: white; background: var(--sage); }
.today-mic-button.listening .mic-rings { position: absolute; inset: -6px; border: 1px solid rgba(219,117,99,.44); border-radius: 50%; animation: rings 1.25s ease infinite; }
.today-composer > p { height: 13px; margin: 6px 0 0; color: var(--muted); font-size: 8px; text-align: center; }
.horizon-screen { background: linear-gradient(180deg, #f3f5ef, #eaf0ea); }
.recent-notice { padding: 18px 19px; margin-bottom: 15px; border-radius: 8px 23px 23px 23px; color: white; background: var(--forest); box-shadow: 0 12px 30px rgba(14,39,36,.13); }.recent-notice p { margin: 0 0 5px; color: #9eb6ad; font-size: 8px; letter-spacing: .06em; }.recent-notice h2 { margin: 0 0 7px; font: 500 18px "Songti SC", serif; }.recent-notice span { color: #b8c8c2; font-size: 9px; line-height: 1.6; }
.recent-calendar { padding: 18px 15px 16px; border: 1px solid var(--line); border-radius: 23px 8px 23px 23px; background: rgba(251,252,248,.84); box-shadow: 0 10px 30px rgba(34,58,51,.06); }.recent-calendar > header { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; margin-bottom: 15px; }.recent-calendar > header h2 { margin: 0; text-align: center; color: var(--forest); font: 600 18px "Songti SC", serif; }.recent-calendar > header button { width: 36px; height: 36px; border: 0; border-radius: 50%; color: var(--forest); background: #e9efea; cursor: pointer; font-size: 20px; }
.recent-weekdays, .recent-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }.recent-weekdays { margin-bottom: 7px; color: var(--muted); text-align: center; font-size: 8px; }.recent-calendar-grid button, .recent-calendar-grid .calendar-blank { aspect-ratio: 1; position: relative; border: 0; border-radius: 50%; background: transparent; font-size: 10px; }.recent-calendar-grid button { cursor: pointer; }.recent-calendar-grid button.has-records { background: #e5ede7; }.recent-calendar-grid button.has-records::after { content: ""; width: 4px; height: 4px; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); border-radius: 50%; background: var(--sage); }.recent-calendar-grid button.today { box-shadow: inset 0 0 0 1px var(--sage); font-weight: 700; }.recent-calendar-grid button.today.has-records::after { background: var(--coral); }
.recent-calendar-legend { min-height: 18px; margin-top: 13px; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; }.recent-calendar-legend i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--sage); }
.horizon-placeholder { min-height: 390px; padding: 40px 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #c9d4cb; border-radius: 8px 30px 30px 30px; text-align: center; background: rgba(251,252,248,.58); }
.horizon-placeholder > div { width: 68px; height: 68px; margin-bottom: 23px; display: grid; place-items: center; border-radius: 24px 24px 7px 24px; color: var(--forest); background: var(--sun); font: 600 27px "Songti SC", serif; box-shadow: 0 12px 28px rgba(43,57,48,.1); }.horizon-placeholder.long > div { color: white; background: var(--forest); }
.horizon-placeholder p { margin: 0 0 8px; color: var(--sage); font-size: 9px; letter-spacing: .06em; }.horizon-placeholder h2 { margin: 0 0 10px; color: var(--forest); font: 600 23px "Songti SC", serif; }.horizon-placeholder span { max-width: 250px; color: var(--muted); font-size: 10px; line-height: 1.7; }

.drawer-backdrop { position: fixed; z-index: 40; inset: 0; background: rgba(7,22,19,.38); backdrop-filter: blur(3px); }
.today-drawer { width: min(82vw, 330px); height: 100dvh; padding: max(24px, env(safe-area-inset-top)) 18px 24px; position: fixed; z-index: 41; left: max(calc((100vw - 480px) / 2), 0px); top: 0; color: white; background: var(--forest); box-shadow: 18px 0 55px rgba(7,22,19,.22); animation: drawer-in .24s ease both; }
@keyframes drawer-in { from { transform: translateX(-102%); } }
.today-drawer header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 27px; }.today-drawer header p { margin: 0 0 3px; color: #8eaaa0; font-size: 9px; letter-spacing: .09em; }.today-drawer h2 { margin: 0; font: 500 24px "Songti SC", serif; }
.today-drawer header button { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: white; background: rgba(255,255,255,.06); font-size: 22px; cursor: pointer; }
.drawer-entry { width: 100%; padding: 14px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 11px; align-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; color: white; text-align: left; background: rgba(255,255,255,.07); cursor: pointer; }
.drawer-entry[hidden] { display: none; }
.drawer-entry + .drawer-entry { margin-top: 9px; }
.drawer-entry-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: var(--forest); background: var(--sun); }.drawer-entry strong, .drawer-entry small { display: block; }.drawer-entry strong { margin-bottom: 4px; font-size: 12px; }.drawer-entry small { color: #9fb5ad; font-size: 8px; }.drawer-entry b { color: var(--sun); font-size: 15px; }
.drawer-entry-icon.secondary { color: white; background: rgba(255,255,255,.12); font: 600 17px "Songti SC", serif; }
.drawer-entry-icon svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.screen-back-button { flex: 0 0 auto; margin-right: 12px; }

.dictionary-overlay { width: 100%; max-width: 480px; min-height: 100dvh; overflow-y: auto; position: fixed; z-index: 45; inset: 0 auto 0 50%; transform: translateX(-50%); color: var(--ink); background: linear-gradient(180deg, #f4f2e9, #edf2ec); animation: ideal-in .25s ease both; }
.dictionary-body { padding: 22px 18px calc(35px + env(safe-area-inset-bottom)); }
.dictionary-body > p { margin: 0 0 20px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.dictionary-body > label { display: block; margin: 0 0 8px; color: var(--forest-2); font-size: 10px; font-weight: 700; }
#dictionaryEditor { width: 100%; min-height: 330px; padding: 16px; resize: vertical; border: 1px solid var(--line); border-radius: 8px 22px 22px 22px; outline: 0; color: var(--ink); background: rgba(255,254,248,.9); font-size: 13px; line-height: 1.85; box-shadow: 0 12px 32px rgba(38,50,43,.06); }
#dictionaryEditor:focus { border-color: var(--sage); }
.dictionary-meta { margin: 10px 2px 18px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }
.dictionary-save-button { width: 100%; min-height: 50px; border: 0; border-radius: 15px; color: white; background: var(--forest); cursor: pointer; }

.ideal-day-overlay { width: 100%; max-width: 480px; min-height: 100dvh; overflow-y: auto; position: fixed; z-index: 45; inset: 0 auto 0 50%; transform: translateX(-50%); color: var(--ink); background: linear-gradient(180deg, #f4f2e9, #edf2ec); animation: ideal-in .25s ease both; }
@keyframes ideal-in { from { opacity: .5; transform: translate(-50%, 12px); } }
.ideal-day-header { min-height: 92px; padding: max(18px, env(safe-area-inset-top)) 18px 14px; position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid rgba(214,222,215,.8); background: rgba(244,242,233,.9); backdrop-filter: blur(16px); }
.ideal-day-header p { margin: 0 0 2px; color: var(--sage); font-size: 8px; letter-spacing: .12em; }.ideal-day-header h2 { margin: 0; color: var(--forest); font: 600 21px "Songti SC", serif; }
.ideal-edit-button { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--forest-2); background: var(--card); cursor: pointer; }
.ideal-day-body { padding: 20px 18px calc(35px + env(safe-area-inset-bottom)); }
.ideal-content-card { padding: 22px; border: 1px solid #dddccf; border-radius: 8px 26px 26px 26px; background: rgba(255,254,248,.88); box-shadow: 0 14px 38px rgba(38,50,43,.08); }
.ideal-content { white-space: pre-wrap; color: #34443e; font: 400 14px/1.9 "Songti SC", serif; }.ideal-content::first-line { color: var(--forest); font-size: 20px; font-weight: 600; }
#idealDayEditor { width: 100%; min-height: 420px; padding: 0; resize: vertical; border: 0; outline: 0; color: #34443e; background: transparent; font: 400 13px/1.8 "PingFang SC", sans-serif; }
.ideal-edit-actions { margin-top: 16px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }.ideal-edit-actions button { min-height: 45px; border: 0; border-radius: 13px; background: #e9eee8; cursor: pointer; }.ideal-edit-actions .primary { color: white; background: var(--forest); }
.ideal-edit-actions[hidden] { display: none; }
.ideal-versions { margin-top: 26px; }.ideal-versions .section-heading > span { color: var(--muted); font-size: 9px; }
#idealVersionList { display: grid; gap: 8px; }.ideal-version { padding: 13px 14px; display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 15px; background: rgba(251,252,248,.72); }.ideal-version strong, .ideal-version span { display: block; }.ideal-version strong { margin-bottom: 3px; font-size: 10px; }.ideal-version span { color: var(--muted); font-size: 8px; }.ideal-version button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 10px; color: var(--forest-2); background: #e5ece6; font-size: 9px; cursor: pointer; }

.bottom-nav { width: 100%; max-width: 480px; height: calc(70px + env(safe-area-inset-bottom)); padding: 5px 25px env(safe-area-inset-bottom); position: fixed; z-index: 20; left: 50%; bottom: 0; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; border-top: 1px solid rgba(214,222,215,.9); background: rgba(250,251,247,.92); backdrop-filter: blur(18px); }
.bottom-nav button { min-height: 56px; padding: 4px 0; display: grid; justify-items: center; align-content: center; gap: 2px; border: 0; color: #8e9b94; background: transparent; font-size: 9px; cursor: pointer; }
.bottom-nav svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.bottom-nav button.active { color: var(--forest); }

.sheet-backdrop { position: fixed; z-index: 30; inset: 0; background: rgba(7,22,19,.35); backdrop-filter: blur(3px); }
.bottom-sheet { width: 100%; max-width: 480px; max-height: 72dvh; overflow: auto; position: fixed; z-index: 31; left: 50%; bottom: 0; transform: translateX(-50%); padding: 9px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--card); animation: sheet-in .25s ease both; }
@keyframes sheet-in { from { transform: translate(-50%, 30px); opacity: .6; } }
.sheet-grabber { width: 42px; height: 4px; margin: 0 auto 17px; border-radius: 99px; background: #ced6cf; }
.bottom-sheet h2 { margin: 0 0 6px; font: 600 22px "Songti SC", serif; }.bottom-sheet > div > p { margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.calendar-heading { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; margin-bottom: 15px; }
.calendar-heading strong { text-align: center; font: 600 17px "Songti SC", serif; }
.calendar-heading button { width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--forest); background: #edf1eb; cursor: pointer; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.calendar-weekdays { margin-bottom: 5px; color: var(--muted); font-size: 9px; text-align: center; }
.calendar-grid { margin-bottom: 15px; }
.calendar-grid button, .calendar-grid .calendar-blank { aspect-ratio: 1; border: 0; border-radius: 50%; position: relative; background: transparent; font-size: 11px; cursor: pointer; }
.calendar-grid button.has-sample { background: #e8eee8; }.calendar-grid button.has-records::after { content: ""; width: 4px; height: 4px; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); border-radius: 50%; background: var(--sage); }
.calendar-grid button.today { box-shadow: inset 0 0 0 1px var(--sage); }.calendar-grid button.selected { color: white; background: var(--forest); font-weight: 700; }.calendar-grid button.selected::after { background: var(--sun); }
.calendar-legend { display: flex; gap: 13px; align-items: center; margin-bottom: 15px; color: var(--muted); font-size: 9px; }.calendar-legend i { width: 7px; height: 7px; display: inline-block; margin-right: 4px; border-radius: 50%; background: var(--sage); }
.calendar-today { width: 100%; min-height: 44px; border: 0; border-radius: 13px; color: var(--forest); background: var(--mint); cursor: pointer; }

.about-screen { background: linear-gradient(180deg, #f3f5ef 0%, #edf2ec 100%); }
.version-pill { padding: 7px 11px; border: 1px solid var(--line); border-radius: 99px; color: var(--sage); background: rgba(251,252,248,.72); font: 600 10px ui-monospace, monospace; }
.about-hero { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: center; padding: 23px 20px; margin-bottom: 14px; overflow: hidden; border-radius: 8px 27px 27px 27px; color: white; background: var(--forest); box-shadow: 0 14px 38px rgba(14,39,36,.16); }
.about-mark { width: 54px; height: 54px; display: flex; align-items: end; justify-content: center; gap: 4px; padding-bottom: 15px; border-radius: 18px 18px 6px 18px; background: rgba(255,255,255,.09); }
.about-mark span { width: 4px; border-radius: 4px; background: var(--sun); }.about-mark span:nth-child(1) { height: 12px; }.about-mark span:nth-child(2) { height: 23px; }.about-mark span:nth-child(3) { height: 17px; }
.about-hero h2 { margin: 0 0 6px; font: 500 18px/1.35 "Songti SC", serif; }
.about-hero p { margin: 0; color: #a9bbb4; font-size: 10px; line-height: 1.65; }
.about-card { padding: 19px; margin-bottom: 25px; border: 1px solid var(--line); border-radius: 24px 8px 24px 24px; background: var(--card); }
.about-card h2 { margin: 0 0 15px; font: 600 17px "Songti SC", serif; }
.about-fact { min-height: 38px; display: flex; justify-content: space-between; align-items: center; gap: 15px; border-bottom: 1px solid #e8ece7; font-size: 10px; }
.about-fact span { color: var(--muted); }.about-fact strong { color: var(--forest-2); text-align: right; font-size: 10px; }
.about-card > p { margin: 14px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.release-section .section-heading > span { color: var(--muted); font-size: 9px; }
.release-list { display: grid; gap: 12px; }
.release-card { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: rgba(251,252,248,.8); }
.release-card.latest { border-color: rgba(119,169,149,.5); box-shadow: 0 8px 24px rgba(23,59,53,.07); }
.release-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.release-card header strong { color: var(--forest); font: 600 15px ui-monospace, monospace; }.release-card header time { color: var(--muted); font-size: 9px; }
.release-card h3 { margin: 10px 0 5px; color: var(--sage); font-size: 9px; letter-spacing: .08em; }
.release-card ul { margin: 0; padding-left: 17px; color: #53615b; font-size: 10px; line-height: 1.65; }
.release-card li + li { margin-top: 3px; }.empty-release { color: var(--muted); font-size: 10px; }
.sheet-actions { display: grid; gap: 9px; }.sheet-actions button { min-height: 48px; border: 0; border-radius: 14px; background: #e8eee8; cursor: pointer; }.sheet-actions button.primary { color: white; background: var(--forest); }.sheet-actions button.danger { color: var(--coral); }
.settings-form { display: grid; gap: 14px; }.settings-form label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; }.settings-form input, .settings-form select { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--paper); font: inherit; outline: 0; }.settings-form input:focus, .settings-form select:focus { border-color: var(--sage); }.settings-note { padding: 11px 12px; border-radius: 12px; color: var(--muted); background: #edf1eb; font-size: 9px; line-height: 1.55; }
.settings-section { margin-bottom: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: rgba(243,245,239,.72); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.setting-row strong, .setting-row small { display: block; }.setting-row strong { margin-bottom: 4px; font-size: 12px; }.setting-row small, .settings-section > p { color: var(--muted); font-size: 9px; }.settings-section > p { margin: 10px 0 0; line-height: 1.55; }
.sample-switch { width: 50px; height: 29px; padding: 3px; flex: 0 0 auto; border: 0; border-radius: 99px; background: #cdd5cf; cursor: pointer; transition: background .18s ease; }.sample-switch i { width: 23px; height: 23px; display: block; border-radius: 50%; background: white; box-shadow: 0 2px 7px rgba(14,39,36,.18); transition: transform .18s ease; }.sample-switch.active { background: var(--sage); }.sample-switch.active i { transform: translateX(21px); }
.settings-section-title { margin-bottom: 13px; }.settings-section-title strong, .settings-section-title span { display: block; }.settings-section-title strong { margin-bottom: 4px; font-size: 12px; }.settings-section-title span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.settings-save-button { min-height: 46px; border: 0; border-radius: 13px; color: white; background: var(--forest); cursor: pointer; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.danger-zone strong { font-size: 12px; }.danger-zone p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }.danger-zone > button { min-height: 40px; padding: 0 12px; flex: 0 0 auto; border: 1px solid rgba(219,117,99,.35); border-radius: 11px; color: #b85d4e; background: #fff5f1; cursor: pointer; }
.data-clear-options { display: grid; gap: 8px; margin-bottom: 17px; }.data-clear-options label { min-height: 45px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 10px; cursor: pointer; }.data-clear-options input { width: 18px; height: 18px; accent-color: var(--forest); }.data-clear-options strong, .data-clear-options small { display: block; }.data-clear-options small { margin-top: 3px; color: var(--muted); font-size: 8px; }.data-clear-options .data-clear-all { border-color: rgba(14,39,36,.28); background: var(--mint); }.data-clear-options .clear-api-option { margin-top: 6px; border-color: rgba(219,117,99,.28); background: #fff5f1; }
.data-management-section { border-color: rgba(219,117,99,.22); }.inline-danger-button { width: 100%; min-height: 44px; border: 1px solid rgba(219,117,99,.35); border-radius: 12px; color: #b85d4e; background: #fff5f1; cursor: pointer; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.quick-grid button { min-height: 74px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; text-align: left; background: var(--paper); cursor: pointer; }.quick-grid strong, .quick-grid span { display: block; }.quick-grid strong { margin-bottom: 5px; font-size: 12px; }.quick-grid span { color: var(--muted); font-size: 9px; }
.toast { max-width: 350px; position: fixed; z-index: 50; left: 50%; bottom: calc(87px + env(safe-area-inset-bottom)); transform: translate(-50%, 15px); padding: 10px 15px; border-radius: 99px; opacity: 0; pointer-events: none; color: white; background: var(--forest); font-size: 10px; box-shadow: var(--shadow); transition: .22s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 560px) { body { padding: 22px 0; }.app-shell { min-height: calc(100dvh - 44px); border-radius: 32px; }.screen { min-height: calc(100dvh - 44px); }.bottom-nav { bottom: 22px; border-radius: 0 0 32px 32px; }.composer, .today-composer { bottom: 91px; }.bottom-sheet { bottom: 22px; border-radius: 28px; }.sheet-backdrop { inset: 0; } }
@media (max-width: 360px) { .screen { padding-left: 15px; padding-right: 15px; }.now-card { padding: 18px; }.finish-button { position: static; margin-top: 14px; }.input-row { grid-template-columns: 40px minmax(0,1fr) 40px 40px; }.attach-button, .send-button, .mic-button { width: 40px; height: 40px; }.bottom-nav { padding-left: 12px; padding-right: 12px; gap: 4px; }.today-hero { padding-left: 17px; padding-right: 17px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }