:root{
  --text:#151515;
  --muted:#5f6368;
  --surface:#ffffff;
  --border:rgba(0,0,0,.10);
  --shadow:0 8px 30px rgba(0,0,0,.12);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#111;color:var(--text)}
body{overscroll-behavior:none}
button,input,textarea{font:inherit}
button{cursor:pointer}
.app-shell{min-height:100dvh;background:#fff}

.home{min-height:100dvh;display:grid;grid-template-rows:1.18fr 1fr 1fr 1fr 1fr;padding-bottom:var(--safe-bottom)}
.priority-band{border:0;width:100%;text-align:left;padding:24px 24px 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;transition:filter .15s ease,transform .08s ease;color:#121212}
.priority-band:active{transform:scale(.997);filter:brightness(.96)}
.priority-band .copy{max-width:82%}
.priority-rank{font-size:clamp(12px,2.5vw,14px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.62;margin-bottom:8px}
.priority-title{font-size:clamp(27px,8vw,54px);font-weight:800;line-height:.94;letter-spacing:-.04em;margin:0 0 10px}
.priority-subtitle{font-size:clamp(13px,3.5vw,18px);line-height:1.25;opacity:.72;max-width:38ch}
.chev{font-size:34px;opacity:.38;align-self:center}

.detail{min-height:100dvh;background:#f7f7f5;padding:calc(12px + var(--safe-top)) 14px calc(96px + var(--safe-bottom))}
.top-card{background:#fff;border-radius:24px;padding:18px 18px 20px;box-shadow:0 1px 0 var(--border);margin-bottom:14px;position:relative}
.back-btn{border:0;background:#efefed;border-radius:999px;width:42px;height:42px;font-size:22px;display:grid;place-items:center;margin-bottom:18px}
.eyebrow{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--muted);margin-bottom:7px}
.detail h1{font-size:clamp(30px,9vw,52px);line-height:.95;letter-spacing:-.045em;margin:0 0 12px}
.description{font-size:16px;line-height:1.45;color:#4b4b4b;margin:0 0 18px;white-space:pre-line}
.next-box{border:1px solid #deded8;background:#fafaf6;border-radius:18px;padding:14px 15px}
.next-label{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:900;color:#6b6b64;margin-bottom:6px}
.next-text{font-weight:750;font-size:17px;line-height:1.28}

.subgrid{display:grid;gap:12px}
.sub-card{border:0;width:100%;text-align:left;border-radius:22px;padding:20px 18px;min-height:132px;box-shadow:0 1px 0 var(--border);display:flex;justify-content:space-between;gap:16px;color:#171717}
.sub-card:active{transform:scale(.995)}
.sub-title{font-weight:850;font-size:22px;line-height:1.05;letter-spacing:-.02em;margin-bottom:8px}
.sub-desc{font-size:14px;line-height:1.35;color:#474747;max-width:42ch}
.status{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;opacity:.55;white-space:nowrap;margin-top:2px}
.empty-slot{opacity:.55}

.action{min-height:100dvh;background:#fff;padding:calc(12px + var(--safe-top)) 14px calc(28px + var(--safe-bottom));display:flex;flex-direction:column;gap:12px}
.action-copy{background:#fff;border-radius:24px;padding:18px 18px 16px;border:1px solid var(--border)}
.action h1{font-size:clamp(30px,9vw,50px);line-height:.95;letter-spacing:-.04em;margin:0 0 11px}
.done-when{margin-top:15px;padding:12px 14px;border-radius:16px;background:#f2f2ef;font-size:14px;line-height:1.35}
.visual{flex:1;min-height:54dvh;border-radius:24px;overflow:hidden;background:#efefef;border:1px solid var(--border);display:grid;place-items:center;position:relative}
.visual img{width:100%;height:100%;object-fit:contain;background:#fff}
.visual-placeholder{padding:26px;text-align:center;color:#6a6a6a;font-size:14px;line-height:1.4}

.floating-btn{position:fixed;right:18px;bottom:calc(18px + var(--safe-bottom));width:54px;height:54px;border-radius:50%;border:0;background:#111;color:white;font-size:24px;box-shadow:var(--shadow);z-index:30}
.editor-dialog{width:min(92vw,620px);border:0;border-radius:24px;padding:0;box-shadow:var(--shadow)}
.editor-dialog::backdrop{background:rgba(0,0,0,.42)}
.editor-header{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 8px}
.editor-header h2{margin:0;font-size:24px}
.icon-btn{border:0;background:#efefef;width:38px;height:38px;border-radius:50%}
.editor-fields{padding:8px 18px 4px;display:grid;gap:14px;max-height:62dvh;overflow:auto}
.field{display:grid;gap:6px}
.field label{font-size:12px;font-weight:800;color:#555;text-transform:uppercase;letter-spacing:.08em}
.field input,.field textarea{width:100%;border:1px solid #d9d9d9;border-radius:14px;padding:11px 12px;background:white;color:#111}
.field textarea{min-height:86px;resize:vertical}
.editor-actions{display:flex;justify-content:space-between;gap:10px;padding:16px 18px 18px}
.editor-actions button{border:0;border-radius:14px;padding:12px 15px;font-weight:800}
.primary{background:#111;color:#fff}.secondary{background:#ececea;color:#222}

@media (min-width:700px){
  .home{max-width:720px;margin:0 auto;box-shadow:0 0 80px rgba(0,0,0,.28)}
  .detail,.action{max-width:720px;margin:0 auto}
}