:root {
  color-scheme: light dark;
  --ink: light-dark(#19382d, #e4ede0);
  --ink-soft: light-dark(#4d665b, #b5c5b7);
  --muted: light-dark(#819087, #95a898);
  --paper: light-dark(#f7f8f1, #111a14);
  --surface: light-dark(#ffffff, #1b2820);
  --surface-soft: light-dark(#f0f4e9, #243328);
  --line: light-dark(#e3e9dc, #34463a);
  --green: #245c43;
  --green-dark: #173d2d;
  --green-bright: #b9e06e;
  --lime: #d9edaa;
  --clay: #c87851;
  --sand: #f4e3c8;
  --shadow: 0 18px 50px rgba(34, 61, 44, .08);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #8bbd53; outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; overflow: hidden; }
.topbar { width: min(1220px, calc(100% - 48px)); height: 82px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 200px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; background: var(--green); color: #e4f4c2; box-shadow: 0 6px 14px rgba(36, 92, 67, .16); }
.brand-mark svg { width: 23px; height: 23px; }
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.55px; }
.brand-tag { display: block; color: var(--muted); font-size: 10px; letter-spacing: 1.45px; text-transform: uppercase; margin-top: 2px; font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: 30px; color: var(--ink-soft); font-size: 13px; font-weight: 650; }
.nav-links a { transition: color .18s ease; }
.nav-links a:hover { color: var(--green); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.72); border-radius: 999px; padding: 9px 12px; color: var(--ink-soft); font-size: 11px; font-weight: 700; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; background: #82a950; box-shadow: 0 0 0 3px #e7f1d9; border-radius: 50%; }
.icon-button { width: 39px; height: 39px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 50%; display: grid; place-items: center; }
.icon-button svg { width: 17px; height: 17px; }
main { width: min(1220px, calc(100% - 48px)); margin: 0 auto; }
.hero { min-height: 370px; position: relative; overflow: hidden; border-radius: 32px; background: #214f3c; display: grid; grid-template-columns: 1fr .84fr; isolation: isolate; box-shadow: 0 22px 60px rgba(21, 58, 41, .12); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 79% 12%, rgba(217,237,170,.2), transparent 36%), linear-gradient(115deg, #204d39 0%, #23573f 50%, #315e42 100%); }
.hero-copy { padding: 47px 0 43px 52px; align-self: center; max-width: 600px; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 1.65px; font-size: 10px; font-weight: 800; color: #d3eaa5; }
.eyebrow .spark { font-size: 15px; }
.hero h1 { color: #fffdf5; font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 5.1vw, 66px); letter-spacing: -2px; line-height: .99; font-weight: 500; margin: 19px 0 16px; max-width: 550px; }
.hero h1 em { color: #d9edaa; font-weight: 500; }
.hero-copy p { max-width: 418px; color: #d0dfd3; font-size: 14px; line-height: 1.75; margin: 0; }
.hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 27px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; min-height: 45px; padding: 0 18px; border-radius: 999px; font-size: 12px; font-weight: 800; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: #d9edaa; color: #1e4934; box-shadow: 0 7px 20px rgba(0,0,0,.10); }
.btn-primary:hover { background: #e5f4c5; }
.btn-ghost { color: #f1f6ec; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); }
.btn-ghost:hover { background: rgba(255,255,255,.13); }
.btn svg { width: 15px; height: 15px; }
.hero-art { position: relative; min-height: 340px; align-self: stretch; overflow: hidden; }
.hero-art .sun { position: absolute; width: 112px; height: 112px; border-radius: 50%; background: #e6c990; opacity: .96; top: 43px; right: 25%; box-shadow: 0 0 55px rgba(232,202,145,.18); }
.hero-art .ridge { position: absolute; bottom: -1px; width: 125%; left: -7%; height: 76%; }
.hero-art .ridge-back { background: #628a57; clip-path: polygon(0 76%, 14% 55%, 25% 68%, 41% 30%, 54% 52%, 67% 36%, 82% 61%, 100% 35%, 100% 100%, 0 100%); opacity: .7; }
.hero-art .ridge-mid { background: #416f4d; clip-path: polygon(0 42%, 16% 64%, 29% 45%, 44% 69%, 62% 40%, 77% 64%, 90% 45%, 100% 55%, 100% 100%, 0 100%); }
.hero-art .ridge-front { background: #173d2d; clip-path: polygon(0 70%, 15% 55%, 26% 73%, 45% 51%, 60% 70%, 75% 48%, 89% 67%, 100% 56%, 100% 100%, 0 100%); }
.tree { position: absolute; bottom: 12px; width: 0; height: 0; border-left: 24px solid transparent; border-right: 24px solid transparent; border-bottom: 83px solid #183c2e; filter: drop-shadow(0 7px 7px rgba(0,0,0,.08)); }
.tree::after { content: ""; position: absolute; left: -18px; top: 27px; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 62px solid #1b4432; }
.tree.t1 { right: 14%; transform: scale(1.4); bottom: 24px; }
.tree.t2 { right: 4%; transform: scale(.9); bottom: 0; }
.tree.t3 { left: 16%; transform: scale(.75); bottom: 1px; }
.art-label { position: absolute; bottom: 27px; right: 25%; background: rgba(245,246,228,.94); color: #234b37; border-radius: 15px; padding: 11px 14px; box-shadow: 0 12px 24px rgba(0,0,0,.12); display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 800; letter-spacing: .25px; transform: rotate(-3deg); z-index: 3; }
.art-label span:first-child { font-size: 22px; }
.hero-note { position: absolute; top: 25px; right: 25px; z-index: 4; color: #dcebc6; font-size: 10px; text-align: right; letter-spacing: 1px; text-transform: uppercase; line-height: 1.8; }
.intro-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 36px 2px 17px; }
.section-kicker { color: #7d927f; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: 1.8px; margin-bottom: 8px; }
.section-title { font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 2.7vw, 33px); line-height: 1.05; font-weight: 500; letter-spacing: -.8px; margin: 0; }
.section-subtitle { color: var(--muted); margin: 8px 0 0; font-size: 12px; line-height: 1.6; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: #3a704e; font-size: 12px; font-weight: 800; white-space: nowrap; }
.text-link svg { width: 14px; height: 14px; }
.planner-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); gap: 18px; align-items: stretch; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.planner-panel { padding: 26px; }
.panel-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.panel-icon { width: 43px; height: 43px; flex: 0 0 auto; border-radius: 15px; display: grid; place-items: center; background: #edf4e1; color: var(--green); }
.panel-icon svg { width: 21px; height: 21px; }
.panel-heading h3 { font-size: 15px; letter-spacing: -.2px; margin: 2px 0 5px; }
.panel-heading p { color: var(--muted); margin: 0; font-size: 11px; line-height: 1.5; }
.field-label { display: block; font-size: 11px; font-weight: 800; color: var(--ink-soft); margin: 0 0 10px; }
.activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.activity-option { min-height: 76px; padding: 11px 6px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: #fbfcf8; border: 1px solid var(--line); color: var(--ink-soft); border-radius: 15px; font-size: 10px; line-height: 1.2; font-weight: 750; transition: border .15s, background .15s, transform .15s; }
.activity-option:hover { border-color: #b6cc9d; transform: translateY(-1px); }
.activity-option[aria-pressed="true"] { background: #edf4e3; color: #25563d; border-color: #8eb26d; box-shadow: inset 0 0 0 1px #8eb26d; }
.activity-emoji { font-size: 20px; line-height: 1; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 20px; }
.select-wrap label { display: block; font-size: 11px; font-weight: 800; color: var(--ink-soft); margin: 0 0 8px; }
.select-wrap select, .select-wrap input { width: 100%; min-height: 43px; border: 1px solid var(--line); background: #fbfcf8; color: var(--ink); border-radius: 12px; padding: 0 12px; font-size: 12px; }
.focus-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.focus-option { position: relative; }
.focus-option input { position: absolute; opacity: 0; pointer-events: none; }
.focus-option span { display: inline-flex; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); font-size: 10px; font-weight: 750; }
.focus-option input:checked + span { border-color: #9bbd7c; background: #eef5e3; color: #29583e; }
.focus-option input:focus-visible + span { outline: 3px solid #8bbd53; outline-offset: 3px; }
.generate-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.generate-row .btn { min-width: 180px; }
.microcopy { color: var(--muted); font-size: 10px; line-height: 1.45; display: flex; align-items: center; gap: 6px; }
.microcopy svg { width: 13px; height: 13px; flex: 0 0 auto; }
.plan-panel { display: flex; flex-direction: column; overflow: hidden; min-height: 100%; }
.plan-top { padding: 25px 25px 20px; background: #eef4e4; border-bottom: 1px solid #e0e9d4; }
.plan-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.plan-label { display: inline-flex; gap: 7px; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: 1.25px; color: #597a54; font-weight: 850; }
.plan-label span { width: 7px; height: 7px; background: #79a658; border-radius: 50%; }
.plan-time { border-radius: 999px; background: #fff; color: #426647; font-size: 10px; font-weight: 800; padding: 7px 10px; }
.plan-top h3 { font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 500; letter-spacing: -.45px; margin: 0 0 8px; }
.plan-top p { color: #607565; line-height: 1.6; margin: 0; font-size: 12px; }
.plan-body { flex: 1; padding: 22px 25px 20px; }
.plan-body h4 { margin: 0 0 13px; font-size: 11px; letter-spacing: .25px; }
.steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.step-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: start; gap: 10px; }
.step-number { width: 27px; height: 27px; display: grid; place-items: center; background: #eef4e5; color: #356645; border-radius: 9px; font-size: 10px; font-weight: 850; }
.step-copy { font-size: 11px; line-height: 1.5; color: #53675c; padding-top: 3px; }
.step-time { font-size: 10px; font-weight: 800; color: #89998b; padding-top: 4px; white-space: nowrap; }
.observe-box { margin-top: 20px; padding: 15px; border-radius: 16px; background: #faf7ef; border: 1px solid #f0e8d8; }
.observe-heading { display: flex; align-items: center; gap: 8px; color: #6c654a; font-size: 10px; font-weight: 850; margin-bottom: 10px; }
.observe-heading span { font-size: 17px; }
.observe-list { display: flex; flex-wrap: wrap; gap: 7px; }
.observe-chip { border-radius: 999px; background: #fff; border: 1px solid #f0e6d3; padding: 7px 9px; color: #716b56; font-size: 10px; }
.plan-footer { padding: 14px 25px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-origin { color: #8a968d; display: flex; align-items: center; gap: 6px; font-size: 10px; }
.plan-origin svg { width: 13px; height: 13px; }
.plan-actions { display: flex; gap: 7px; }
.small-btn { border: 1px solid var(--line); background: #fff; color: #486153; min-height: 33px; border-radius: 10px; padding: 0 10px; font-size: 10px; font-weight: 800; }
.small-btn:hover { background: #f3f7ed; border-color: #c1d5ad; }
.empty-plan { min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 45px 25px; }
.empty-illustration { width: 112px; height: 112px; border-radius: 50%; background: #edf4e5; display: grid; place-items: center; font-size: 47px; margin-bottom: 19px; position: relative; }
.empty-illustration::after { content: ""; position: absolute; width: 128px; height: 128px; border-radius: 50%; border: 1px dashed #c4d8b2; }
.empty-plan h3 { font: 500 23px Georgia, serif; margin: 0 0 8px; }
.empty-plan p { font-size: 12px; color: var(--muted); max-width: 270px; line-height: 1.7; margin: 0; }
.discover-section { margin-top: 50px; }
.discover-toolbar { display: flex; align-items: center; gap: 12px; }
.search-box { position: relative; min-width: 190px; }
.search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #819087; }
.search-box input { width: 100%; min-height: 39px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 0 14px 0 36px; font-size: 11px; color: var(--ink); }
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 14px; }
.filter-chip { border: 1px solid var(--line); background: transparent; color: var(--ink-soft); border-radius: 999px; padding: 8px 13px; font-size: 10px; font-weight: 800; }
.filter-chip[aria-pressed="true"] { color: #fff; background: var(--green); border-color: var(--green); }
.idea-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.idea-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: transform .18s, box-shadow .18s; min-width: 0; }
.idea-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.idea-visual { height: 132px; position: relative; overflow: hidden; display: grid; place-items: center; }
.idea-visual::before { content: ""; position: absolute; width: 130px; height: 130px; background: rgba(255,255,255,.27); right: -25px; top: -46px; border-radius: 50%; }
.idea-visual span { position: relative; font-size: 45px; filter: drop-shadow(0 6px 6px rgba(38,59,32,.08)); }
.idea-visual.walk { background: linear-gradient(135deg, #dfecc7, #b4cf9b); }
.idea-visual.bird { background: linear-gradient(135deg, #d8e9e4, #aacdc0); }
.idea-visual.garden { background: linear-gradient(135deg, #f3e8bf, #d9d89c); }
.idea-visual.sky { background: linear-gradient(135deg, #e5e8f4, #b9c9df); }
.idea-visual.photo { background: linear-gradient(135deg, #f1dccc, #ddb59a); }
.idea-visual.park { background: linear-gradient(135deg, #e1eadc, #a7c5a9); }
.idea-tag { position: absolute; bottom: 11px; left: 12px; background: rgba(255,255,255,.78); color: #4d6954; border-radius: 999px; padding: 6px 8px; text-transform: uppercase; letter-spacing: .9px; font-size: 8px; font-weight: 850; }
.idea-content { padding: 16px; }
.idea-content h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 18px; line-height: 1.18; letter-spacing: -.15px; margin: 0 0 8px; }
.idea-content p { min-height: 45px; font-size: 10px; color: var(--muted); line-height: 1.6; margin: 0 0 14px; }
.idea-bottom { border-top: 1px solid #eef1e9; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.idea-duration { font-size: 10px; color: #819087; font-weight: 750; }
.idea-use { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #3d7451; font-size: 10px; font-weight: 850; padding: 3px 0; }
.idea-use svg { width: 13px; height: 13px; }
.no-results { grid-column: 1/-1; padding: 30px; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: 16px; font-size: 12px; }
.notebook-section { margin: 50px 0 40px; }
.notebook-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 18px; }
.note-compose { padding: 25px; background: #f0f4e7; border: 1px solid #e0e9d7; border-radius: var(--radius-xl); }
.note-compose .panel-heading { margin-bottom: 19px; }
.note-compose .panel-icon { background: #dfeacb; }
.note-compose input, .note-compose textarea { display: block; width: 100%; border-radius: 12px; border: 1px solid #dce5cf; background: rgba(255,255,255,.76); padding: 12px 13px; color: var(--ink); font-size: 11px; margin-bottom: 10px; }
.note-compose textarea { min-height: 105px; resize: vertical; line-height: 1.55; }
.note-compose .btn { width: 100%; margin-top: 3px; }
.privacy-note { display: flex; gap: 7px; align-items: center; color: #758872; font-size: 9px; margin-top: 12px; }
.privacy-note svg { width: 13px; height: 13px; }
.notes-panel { padding: 23px; }
.notes-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 17px; }
.notes-header h3 { font-size: 14px; margin: 0; }
.notes-count { padding: 6px 9px; border-radius: 999px; background: #f0f4e9; color: #66805c; font-size: 9px; font-weight: 800; }
.notes-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.note-card { border: 1px solid var(--line); border-radius: 15px; background: #fdfefa; padding: 15px; min-width: 0; position: relative; }
.note-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; color: #8a978d; font-size: 9px; }
.note-meta .note-mood { color: #688553; text-transform: uppercase; letter-spacing: .8px; font-size: 8px; font-weight: 850; }
.note-card h4 { font: 500 17px Georgia, serif; margin: 0 0 7px; overflow-wrap: anywhere; }
.note-card p { font-size: 10px; line-height: 1.6; color: #708074; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.delete-note { position: absolute; top: 12px; right: 12px; border: 0; color: #a0aca2; background: transparent; font-size: 15px; padding: 0 2px; }
.delete-note:hover { color: #a64f3e; }
.notes-empty { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 15px; padding: 28px; text-align: center; color: var(--muted); font-size: 11px; line-height: 1.7; }
.notes-empty span { display: block; font-size: 27px; margin-bottom: 8px; }
footer { border-top: 1px solid var(--line); width: 100%; }
.footer-inner { width: min(1220px, calc(100% - 48px)); min-height: 76px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #849188; font-size: 10px; }
.footer-brand { display: flex; align-items: center; gap: 8px; color: #52715a; font-weight: 800; }
.footer-brand span { font-size: 16px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 20; transform: translate(-50%, 18px); opacity: 0; pointer-events: none; background: #173d2d; color: #f7f8ed; padding: 12px 17px; border-radius: 999px; box-shadow: 0 12px 40px rgba(0,0,0,.18); font-size: 11px; font-weight: 700; transition: opacity .2s, transform .2s; max-width: calc(100% - 28px); text-align: center; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.modal-backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(15, 34, 24, .38); display: none; place-items: center; padding: 20px; }
.modal-backdrop.open { display: grid; }
.modal { width: min(460px, 100%); background: #fff; border-radius: 24px; padding: 27px; box-shadow: 0 28px 100px rgba(0,0,0,.2); }
.modal h3 { margin: 0 0 8px; font: 500 27px Georgia, serif; }
.modal p { margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.hidden { display: none !important; }
@media (max-width: 1000px) {
  .topbar, main, .footer-inner { width: min(100% - 32px, 900px); }
  .brand { min-width: auto; }
  .nav-links { gap: 18px; }
  .hero-copy { padding-left: 34px; }
  .hero h1 { font-size: clamp(42px, 5.5vw, 57px); }
  .planner-layout { grid-template-columns: minmax(0, 1fr) minmax(290px, .9fr); }
  .planner-panel { padding: 21px; }
  .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .topbar { height: 70px; gap: 10px; }
  .brand-name { font-size: 15px; }
  .brand-tag { font-size: 9px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 13px; }
  .nav-links { display: none; }
  .status-pill { padding: 8px 10px; font-size: 10px; }
  .hero { grid-template-columns: 1fr; min-height: 570px; border-radius: 25px; }
  .hero-copy { padding: 36px 26px 10px; align-self: start; }
  .hero h1 { font-size: clamp(43px, 11vw, 59px); max-width: 420px; }
  .hero-copy p { font-size: 13px; max-width: 370px; }
  .hero-art { min-height: 220px; }
  .hero-art .sun { width: 84px; height: 84px; top: 6px; right: 28%; }
  .hero-art .ridge { height: 100%; }
  .art-label { bottom: 24px; right: 30%; }
  .hero-note { top: 14px; right: 16px; font-size: 8px; }
  .intro-row { align-items: flex-start; flex-direction: column; margin-top: 31px; gap: 10px; }
  .planner-layout, .notebook-layout { grid-template-columns: 1fr; }
  .planner-panel { padding: 20px; }
  .activity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .activity-option { min-height: 74px; font-size: 9px; }
  .plan-top, .plan-body { padding-left: 20px; padding-right: 20px; }
  .plan-footer { padding: 14px 20px; }
  .discover-toolbar { width: 100%; }
  .search-box { width: 100%; }
  .idea-grid { gap: 10px; }
  .idea-visual { height: 118px; }
  .idea-content { padding: 13px; }
  .idea-content h3 { font-size: 17px; }
  .notebook-section, .discover-section { margin-top: 39px; }
  .note-compose, .notes-panel { padding: 20px; }
  .notes-list { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; justify-content: center; padding: 18px 0; gap: 7px; }
}
@media (max-width: 390px) {
  .topbar, main, .footer-inner { width: calc(100% - 24px); }
  .top-actions .status-pill { max-width: 130px; overflow: hidden; }
  .hero-copy { padding-left: 21px; padding-right: 21px; }
  .hero-buttons .btn { padding: 0 14px; }
  .activity-grid { gap: 6px; }
  .activity-option { padding-left: 3px; padding-right: 3px; }
  .form-row { gap: 9px; }
  .generate-row { align-items: flex-start; flex-direction: column; }
  .generate-row .btn { width: 100%; }
  .idea-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.safety-note { display: flex; gap: 10px; align-items: flex-start; padding: 13px 14px; margin-top: 10px; border: 1px solid #e1ead9; border-radius: 14px; background: #f6f9f1; }
.safety-note > span { font-size: 18px; line-height: 1; }
.safety-note strong { display: block; font-size: 10px; margin: 1px 0 5px; color: #526b4e; }
.safety-note p { margin: 0; color: #758574; font-size: 10px; line-height: 1.55; }
.small-btn:disabled { opacity: .55; cursor: default; }

@media (prefers-color-scheme: dark) {
  body { background: #111a14; color: #e4ede0; }
  .topbar .icon-button, .status-pill, .panel, .idea-card, .notes-panel, .note-card, .search-box input, .select-wrap select, .select-wrap input, .focus-option span, .small-btn { background-color: #1b2820; color: #e4ede0; border-color: #34463a; }
  .activity-option { background: #19251d; color: #c6d4c7; border-color: #34463a; }
  .activity-option[aria-pressed="true"], .focus-option input:checked + span, .filter-chip[aria-pressed="true"] { background: #345a40; border-color: #71995a; color: #f0f7e9; }
  .plan-top { background: #26382a; border-color: #3a4d39; }
  .plan-top p, .plan-label { color: #c1d5b2; }
  .plan-time { background: #1b2820; color: #d8e9c9; }
  .plan-footer { border-color: #34463a; }
  .observe-box { background: #2a2b20; border-color: #4a4532; }
  .observe-heading, .observe-chip { color: #ded2a9; }
  .observe-chip { background: #363529; border-color: #4a4532; }
  .safety-note { background: #203126; border-color: #3a4d39; }
  .safety-note strong, .safety-note p { color: #bfd0bb; }
  .idea-bottom { border-color: #34463a; }
  .note-compose { background: #1c2b20; border-color: #34463a; }
  .note-compose input, .note-compose textarea { background: #142018; color: #e4ede0; border-color: #34463a; }
  .notes-empty, .no-results { background: #1b2820; border-color: #34463a; color: #b5c5b7; }
  .notes-count { background: #293b2d; color: #c5d9b0; }
  .delete-note { color: #a3b0a2; }
  .modal { background: #1b2820; color: #e4ede0; }
  .modal p { color: #b5c5b7; }
  .footer-inner { color: #95a898; }
}