:root { --forest:#173d2b; --leaf:#347450; --lime:#dff06b; --cream:#f5f3eb; --ink:#17231d; --muted:#657168; --line:#dfe4dd; --white:#fff; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding-bottom:92px; }
button,a { font:inherit; }
.topbar { height:64px; background:var(--forest); color:white; display:flex; align-items:center; justify-content:space-between; padding:0 max(20px, calc((100vw - 760px)/2)); position:sticky; top:0; z-index:10; }
.brand { color:white; text-decoration:none; font-weight:750; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; }
.brand span { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; background:var(--lime); color:var(--forest); font-family:Georgia,serif; font-size:21px; }
.avatar { width:36px; height:36px; border-radius:50%; border:1px solid #87a492; background:#28573e; color:white; font-weight:700; }
main { max-width:760px; margin:auto; }
.hero { background:var(--forest); color:white; padding:24px 20px 30px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.eyebrow { color:#9ab3a3; text-transform:uppercase; letter-spacing:.11em; font-size:11px; font-weight:800; margin:0 0 7px; }
h1,h2,p { margin-top:0; } h1 { font-family:Georgia,serif; font-size:clamp(26px,7vw,38px); line-height:1.05; margin-bottom:11px; font-weight:600; } h2 { font-family:Georgia,serif; font-size:29px; margin:0; }
.weather { color:#cfdbd2; font-size:13px; margin:0; }
.progress-ring { --p:calc(var(--progress)*1%); flex:0 0 auto; width:82px; height:82px; border-radius:50%; display:grid; place-content:center; text-align:center; background:radial-gradient(circle 31px,var(--forest) 96%,transparent 100%),conic-gradient(var(--lime) var(--p),#496454 0); }
.progress-ring strong { font-size:20px; }.progress-ring small { font-size:10px; color:#cbd9cf; }
.status-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.status-grid article { padding:16px 12px; background:white; min-width:0; }.status-grid span,.status-grid small { display:block; color:var(--muted); font-size:10px; }.status-grid strong { display:block; font-size:14px; margin:4px 0; color:var(--leaf); }.status-grid small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.section-heading { padding:27px 20px 16px; display:flex; align-items:end; justify-content:space-between; }.section-heading .eyebrow { color:#748077; }
.outline-button { border:1px solid #b9c2ba; background:transparent; border-radius:999px; padding:8px 12px; font-size:12px; color:var(--forest); }
.notice { margin:0 20px 12px; padding:13px; border-radius:14px; background:#e2eedf; color:var(--forest); display:flex; align-items:center; gap:10px; }.notice>span { width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--leaf);color:white; }.notice strong,.notice small { display:block; }.notice strong { font-size:13px; }.notice small { color:#66766b;font-size:11px;margin-top:2px; }
.task-list { padding:0 20px; display:grid; gap:10px; }
.task { display:grid; grid-template-columns:30px 1fr 18px; gap:11px; background:white; padding:15px 12px; border:1px solid var(--line); border-radius:15px; box-shadow:0 2px 10px #2334260b; transition:.2s; }.task.active { border-left:4px solid var(--lime); }.task.done { opacity:.68; }.task.done strong { text-decoration:line-through; }.task.blocked { background:#ecece8; box-shadow:none; }
.check { width:27px; height:27px; border:2px solid #9cac9f; border-radius:9px; background:white; color:white; font-weight:900; cursor:pointer; }.done .check { background:var(--leaf); border-color:var(--leaf); }.blocked .check { background:#d6dad4;color:#7e887f;border:0; }
.task-title { display:flex; align-items:start; justify-content:space-between; gap:8px; }.task-title strong { font-size:15px; }.tag { flex:0 0 auto; font-size:10px; color:var(--leaf); background:#edf3ec; padding:4px 7px; border-radius:999px; }
.task-main p { color:var(--muted); font-size:12px; line-height:1.35; margin:6px 0 10px; }.chips { display:flex; flex-wrap:wrap; gap:5px; }.chips span { background:#f3f3ef; border-radius:6px; padding:5px 7px; color:#566159; font-size:10px; }.chevron { border:0;background:transparent;color:#8c958e;font-size:25px;padding:0; }.detail-button { border:0;background:transparent;color:var(--leaf);font-size:11px;font-weight:800;padding:10px 0 0; }
.bottom-nav { position:fixed; bottom:0; left:0; right:0; height:76px; padding-bottom:env(safe-area-inset-bottom); background:white; border-top:1px solid var(--line); display:flex; justify-content:center; z-index:20; }.bottom-nav a,.bottom-nav button { width:min(18vw,130px); border:0;background:white;text-decoration:none;color:#7c867e;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;font-size:10px; }.bottom-nav span { font-size:20px; }.bottom-nav .selected { color:var(--leaf);font-weight:800; }.bottom-nav button { color:var(--forest);font-weight:800; }.bottom-nav button span { width:42px;height:42px;margin-top:-27px;border-radius:50%;display:grid;place-items:center;background:var(--lime);box-shadow:0 4px 14px #233b2340;font-size:24px; }
.toast { position:fixed; left:50%; bottom:92px; translate:-50% 18px; padding:11px 16px; background:var(--ink); color:white; font-size:12px; border-radius:999px; opacity:0; pointer-events:none; transition:.2s; z-index:30; }.toast.show { opacity:1;translate:-50% 0; }
.project-overview { padding:24px 20px; }
.project-overview .section-heading { padding:0 0 18px; }
.project-overview h1 { font-size:32px; }
.empty-state,.project-card { background:white; border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 4px 18px #173d2b0a; }
.empty-state { text-align:center; margin-top:12px; }
.empty-state h2,.project-card h2 { margin:0 0 8px; font-size:21px; }
.empty-state p,.project-card p { margin:0; color:var(--muted); line-height:1.55; }
.error-state { border-color:#b54b3a; }
.project-form { display:grid; gap:16px; margin-top:20px; text-align:left; }
.project-form.compact { margin:0 0 20px; padding:16px; border-radius:16px; background:white; }
.project-form label { display:grid; gap:6px; font-weight:700; }
.project-form input,.project-form textarea,.project-form button { min-height:44px; border-radius:12px; font:inherit; }
.project-form input,.project-form textarea { padding:10px 12px; border:1px solid #98a89d; }
.project-form textarea { min-height:86px; resize:vertical; }
.project-form button { padding:10px 16px; border:0; background:var(--forest); color:white; font-weight:700; }
.project-form button.secondary { background:#e6ece8; color:var(--forest); }
.project-form button:disabled { opacity:.6; }
.project-list { display:grid; gap:12px; }
.project-card h2,.project-card p { margin:0; }
.project-card p { margin-top:6px; }
.project-list { display:grid; gap:12px; }
.project-card .eyebrow { color:var(--leaf); margin-bottom:6px; }
.project-card button,.detail-heading button,.card-heading button,.step-card button,#project-actions>button { min-height:44px; margin-top:14px; padding:9px 14px; border:0; border-radius:12px; background:var(--forest); color:white; font-weight:700; }
.project-card button.secondary,#project-actions>button.secondary,.step-card button.secondary { background:#e6ece8; color:var(--forest); }
.project-detail { display:grid; gap:16px; }
.detail-heading,.section-card,.editor-card { background:white; border:1px solid var(--line); border-radius:16px; padding:20px; }
.turbo-section { display:grid; gap:12px; background:#eef4e9; border:1px solid #cad9c6; border-radius:16px; padding:20px; }
.turbo-section h3,.turbo-card h4 { margin:0; }
.turbo-card { display:grid; gap:12px; padding:14px; background:white; border:1px solid var(--line); border-radius:14px; }
.turbo-card p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.turbo-actions { display:flex; flex-wrap:wrap; gap:8px; }
.turbo-actions button { min-height:44px; padding:8px 12px; border:0; border-radius:11px; background:var(--forest); color:white; font-weight:700; flex:1 1 105px; }
.turbo-actions button.secondary { background:#e6ece8; color:var(--forest); }
.turbo-actions button.icon-button { flex:0 0 44px; padding:0; font-size:20px; }
.turbo-actions button:disabled { opacity:.42; }
.detail-heading h2,.section-card h3,.step-card h3 { margin:0; }
.card-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-heading button { margin:0; }
.section-card { display:grid; gap:12px; }
.step-card { border:1px solid var(--line); border-radius:14px; padding:16px; }
.step-meta,.inline-empty { color:var(--muted); margin:6px 0 0; }
.progress-summary { color:var(--muted); margin:8px 0 0; font-size:14px; }
.section-card progress { width:100%; height:12px; accent-color:var(--leaf); }
.step-meta.status-ready { color:var(--leaf); font-weight:750; }
.step-meta.status-in_progress { color:#8a5a00; font-weight:750; }
.step-meta.status-blocked { color:#8b2d20; font-weight:750; }
.step-meta.status-done { color:var(--leaf); font-weight:750; }
.blocking-reasons { margin:10px 0 0; padding:10px; border-radius:10px; background:#f7e6e2; color:#8b2d20; font-size:13px; }
.step-actions { display:flex; flex-wrap:wrap; gap:8px; }
.step-actions button { margin-top:0; flex:1 1 120px; }
.step-card dl { display:grid; grid-template-columns:minmax(92px, 1fr) 2fr; gap:7px 12px; margin:16px 0; font-size:14px; }
.step-card dt { font-weight:750; color:var(--forest); }
.step-card dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.editor-card { margin:0; }
.form-error { padding:10px; border-radius:10px; background:#f7e6e2; color:#8b2d20; margin:0; }
@media(max-width:520px){ .card-heading{align-items:stretch;flex-direction:column}.card-heading button{width:100%}.step-card dl{grid-template-columns:1fr}.step-card dd{margin-bottom:7px} }
@media(min-width:760px){ body{padding-top:20px}.topbar{border-radius:18px 18px 0 0;max-width:760px;margin:auto}.hero{border-radius:0}.status-grid{border-radius:0 0 18px 18px;overflow:hidden}.bottom-nav{left:50%;right:auto;translate:-50%;width:760px;border-radius:18px 18px 0 0;box-shadow:0 -5px 25px #25332618}.task:hover{translate:0 -1px;box-shadow:0 5px 18px #23342614} }