:root {
  color-scheme: light;
  --ink: #14231f;
  --muted: #65736e;
  --paper: #f5f1e8;
  --surface: #fffdf7;
  --forest: #143c33;
  --forest-2: #205848;
  --gold: #b48b42;
  --line: #dcd7ca;
  --green: #34785e;
  --yellow: #b17c26;
  --red: #a34036;
  --shadow: 0 18px 60px rgba(20, 35, 31, .10);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; min-height: 100vh; color: var(--ink); background:
  radial-gradient(circle at 80% -10%, rgba(180,139,66,.17), transparent 32rem),
  linear-gradient(180deg, #f8f5ed, var(--paper)); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-header { max-width: 960px; margin: auto; padding: 28px 24px 18px; display: flex; justify-content: space-between; align-items: end; }
.app-header h1 { margin: 2px 0 0; font-family: Georgia, serif; font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 500; }
.eyebrow { margin: 0; color: var(--gold); font-size: .69rem; letter-spacing: .16em; font-weight: 800; }
.mode-pill { border: 1px solid currentColor; border-radius: 999px; padding: 8px 12px; background: transparent; font-size: .72rem; font-weight: 900; letter-spacing: .1em; }
.mode-pill.green { color: var(--green); }.mode-pill.yellow { color: var(--yellow); }.mode-pill.red { color: var(--red); }
main { max-width: 960px; margin: auto; padding: 0 24px 110px; }
.next-card { background: var(--forest); color: white; padding: clamp(26px,5vw,44px); border-radius: 24px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.next-card::after { content: ""; position: absolute; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; right: -90px; top: -100px; box-shadow: 0 0 0 34px rgba(255,255,255,.025),0 0 0 68px rgba(255,255,255,.02); }
.next-card h2 { font-family: Georgia, serif; font-size: clamp(1.7rem,4vw,2.5rem); font-weight: 500; margin: 8px 0 12px; max-width: 680px; }
.next-card > p:not(.eyebrow) { max-width: 680px; color: #dce7e2; line-height: 1.6; margin: 0; }
.text-button { position: relative; z-index: 1; border: 0; border-bottom: 1px solid rgba(255,255,255,.4); color: white; background: transparent; margin-top: 22px; padding: 4px 0; font-weight: 750; }
.status-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin: 18px 0 26px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.status-grid article { background: rgba(255,253,247,.82); padding: 18px; min-height: 110px; display: flex; flex-direction: column; }
.status-grid span { color: var(--muted); font-size: .65rem; letter-spacing: .12em; font-weight: 800; }
.status-grid strong { margin: 8px 0 5px; font-family: Georgia,serif; font-size: 1.15rem; font-weight: 600; }
.status-grid small { color: var(--muted); line-height: 1.35; }
.actions { display: grid; gap: 10px; }
.action { width: 100%; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; text-align: left; gap: 12px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,253,247,.78); color: var(--ink); transition: transform .15s, border-color .15s, background .15s; }
.action:hover { transform: translateY(-1px); border-color: #b9b2a3; background: var(--surface); }
.action > span { color: var(--gold); font-size: .68rem; font-weight: 900; }
.action b { letter-spacing: .06em; font-size: .84rem; }
.action small { color: var(--muted); }
.action.primary { background: var(--forest-2); color: white; border-color: var(--forest-2); }
.action.primary small { color: #d5e5df; }
.commitments-card { margin-top: 26px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,247,.72); }
.section-heading { display:flex;justify-content:space-between;align-items:center;margin-bottom:14px }.section-heading h2{font-family:Georgia,serif;font-weight:500;margin:4px 0 0}
.icon-button,.close-button { border: 1px solid var(--line); background: transparent; border-radius: 50%; width: 38px; height: 38px; color: var(--ink); font-size: 1.2rem; }
.commitment-item { display:grid;grid-template-columns:8px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line) }.commitment-item i{width:7px;height:7px;background:var(--gold);border-radius:50%}.commitment-item small{color:var(--muted)}
.muted,.fine-print { color: var(--muted); }.fine-print{font-size:.78rem;line-height:1.5}.hidden{display:none!important}
.safety-panel { border: 2px solid var(--red); background: #fff3ef; padding: 24px; border-radius: 18px; margin-bottom: 16px; }
.safety-panel h2 { margin: 5px 0; }.safety-actions{display:flex;gap:8px;flex-wrap:wrap}.safety-actions a{background:var(--red);color:white;text-decoration:none;padding:10px 14px;border-radius:10px;font-weight:800}
.notifications{margin:20px 0}.notice{background:#fff8df;border-left:4px solid var(--gold);padding:14px 16px;margin:8px 0;border-radius:8px;display:flex;justify-content:space-between;gap:15px}.notice button{border:0;background:none;font-weight:800}
.bottom-nav { position: fixed; z-index: 8; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; padding: 10px max(20px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)); background: rgba(245,241,232,.9); backdrop-filter: blur(18px); border-top: 1px solid rgba(220,215,202,.8); }
.bottom-nav button { width: min(30%,160px); border: 0; border-radius: 10px; padding: 10px; color: var(--muted); background: transparent; font-size: .78rem; font-weight: 800; }
.bottom-nav button.active { color: white; background: var(--forest); }
dialog { width: min(680px,calc(100% - 24px)); max-height: min(88vh,900px); border: 0; border-radius: 22px; padding: 0; box-shadow: 0 30px 90px rgba(0,0,0,.28); background: var(--surface); }
dialog::backdrop { background: rgba(11,28,23,.64); backdrop-filter: blur(3px); }
.dialog-shell > header { position: sticky; top: 0; background: var(--surface); z-index: 2; display:flex;justify-content:space-between;align-items:center;padding:24px 26px 18px;border-bottom:1px solid var(--line) }
.dialog-shell h2{font-family:Georgia,serif;font-size:1.8rem;font-weight:500;margin:4px 0 0}.dialog-content{padding:24px 26px 30px;overflow:auto}.dialog-content p{line-height:1.6}
label { display: grid; gap: 7px; margin: 15px 0; color: #33433e; font-size: .82rem; font-weight: 750; }
input,select,textarea { width:100%;border:1px solid #cfc8b8;border-radius:10px;background:white;color:var(--ink);padding:12px 13px;outline:none }textarea{min-height:90px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--forest-2);box-shadow:0 0 0 3px rgba(32,88,72,.12)}
.field-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.field-row.three{grid-template-columns:repeat(3,1fr)}
.submit-button,.secondary-button,.danger-button { border: 0; border-radius: 11px; padding: 13px 16px; font-weight: 850; }
.submit-button { width: 100%; color: white; background: var(--forest); margin-top: 12px; }.secondary-button{background:#e7e1d4;color:var(--ink)}.danger-button{background:var(--red);color:white}
.choice-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0 }.choice-grid button{min-height:82px;border:1px solid var(--line);background:white;border-radius:12px;padding:14px;text-align:left;font-weight:800}.choice-grid button small{display:block;color:var(--muted);font-weight:500;margin-top:5px}
.recitation { white-space: pre-line; font-family: Georgia,serif; font-size: 1.12rem; line-height: 1.72!important; border-left: 3px solid var(--gold); padding-left: 18px; }
.timer{font-family:Georgia,serif;font-size:3rem;text-align:center;margin:20px}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.metric{background:white;border:1px solid var(--line);padding:15px;border-radius:12px}.metric strong{display:block;font-size:1.6rem;font-family:Georgia,serif}.metric small{color:var(--muted)}
.window-row{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr auto;gap:8px;align-items:end;border-top:1px solid var(--line);padding:12px 0}.window-row label{margin:0}.window-row button{margin-bottom:2px}
.loading{display:flex;gap:5px;justify-content:center;padding:30px}.loading span{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse 1s infinite alternate}.loading span:nth-child(2){animation-delay:.2s}.loading span:nth-child(3){animation-delay:.4s}@keyframes pulse{to{opacity:.2;transform:translateY(-5px)}}
code { background:#ede8dc;padding:2px 5px;border-radius:5px;font-size:.85em }
@media(max-width:720px){.status-grid{grid-template-columns:repeat(2,1fr)}.action{grid-template-columns:34px 1fr}.action small{display:none}.field-row,.field-row.three{grid-template-columns:1fr}.window-row{grid-template-columns:1fr 1fr}.window-row label:first-child{grid-column:1/-1}.review-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}