:root{
  --paper:#F2F6F4;
  --card:#FFFFFF;
  --ink:#18241F;
  --muted:#5C6B65;
  --line:#DAE4DF;
  --done:#0B7A63;
  --done-soft:#E2F2EC;
  --pending:#B06A12;
  --pending-soft:#FBF3E4;
  --danger:#A8362B;
  --danger-soft:#F9E9E7;
  --focus:#0B7A63;
  --radius:10px;
  --chart-done:#0B8A63;
  --chart-ongoing:#B06A12;
}
*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.5;
  min-height:100vh;padding:20px 18px 80px;
}
.wrap{max-width:760px;margin:0 auto}
.wrap.wide{max-width:1060px}
a{color:var(--done);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- top bar ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:6px 0 18px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.brand{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;color:var(--ink);
  display:flex;align-items:center;gap:8px;line-height:1.25;
}
.brand:hover{text-decoration:none}
.brand-logo{width:28px;height:28px;display:block;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:16px;font-size:14px;font-weight:500;flex-wrap:wrap}
.nav-links a{color:var(--ink)}
.nav-user{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)}
.inline-form{display:inline}
.btn-link{
  background:none;border:none;color:var(--ink);font:inherit;font-weight:500;
  cursor:pointer;padding:0;
}
.btn-link:hover{text-decoration:underline}

/* ---------- headings ---------- */
.page-head{margin-bottom:22px}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.eyebrow a{color:var(--muted);text-transform:none;letter-spacing:normal}
h1{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(24px,4vw,32px);letter-spacing:-.01em}

/* ---------- progress ---------- */
.progress-block{display:flex;align-items:center;gap:14px;margin-top:14px}
.progress-track{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.progress-track.sm{height:6px;width:110px;flex:none}
.progress-fill{height:100%;width:0%;background:var(--done);border-radius:99px;transition:width .35s ease}
.progress-num{
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;
  color:var(--muted);white-space:nowrap;
}
.progress-num strong{color:var(--done)}
.head-actions{margin-top:14px}

/* ---------- forms ---------- */
.stack{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}
.field em{font-weight:400;color:var(--muted);font-style:normal}
.field input{
  font:inherit;font-weight:400;padding:9px 12px;border:1px solid var(--line);
  border-radius:8px;background:#FBFDFC;color:var(--ink);
}
textarea{
  width:100%;min-height:190px;resize:vertical;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.6;
  border:1px solid var(--line);border-radius:8px;padding:12px;
  background:#FBFDFC;color:var(--ink);
}
.field input:focus,textarea:focus,select:focus,button:focus-visible{
  outline:2px solid var(--focus);outline-offset:1px;
}
.hint{font-size:12.5px;color:var(--muted)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
button{
  font-family:'Inter',sans-serif;font-weight:600;font-size:14px;
  padding:9px 18px;border-radius:8px;cursor:pointer;border:1px solid transparent;
  transition:background .15s ease;
}
button:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#2B3B34}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--card)}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:var(--danger-soft)}
.btn-danger.sm{padding:4px 12px;font-size:12.5px}
.alert{
  background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger);
  border-radius:8px;padding:9px 12px;font-size:13.5px;margin-bottom:14px;
}

/* ---------- auth card ---------- */
.auth-card{
  max-width:400px;margin:8vh auto 0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:28px;
}
.auth-card h1{margin-bottom:16px}
.auth-switch{margin-top:16px;font-size:13.5px;color:var(--muted)}

/* ---------- input panel ---------- */
details.input-panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:22px;overflow:hidden;
}
details.input-panel summary{
  cursor:pointer;padding:13px 16px;font-weight:600;font-size:14px;
  list-style:none;display:flex;align-items:center;gap:8px;user-select:none;
}
details.input-panel summary::-webkit-details-marker{display:none}
details.input-panel summary::before{
  content:"▸";font-size:12px;color:var(--muted);transition:transform .15s ease;
}
details[open].input-panel summary::before{transform:rotate(90deg)}
.panel-body{padding:0 16px 16px}

/* ---------- phases ---------- */
.phase-block{margin-bottom:26px}
.phase-head{
  display:flex;align-items:baseline;gap:12px;margin-bottom:12px;
  padding-bottom:8px;border-bottom:2px solid var(--ink);
}
.phase-title{font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.005em}
.phase-count{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)}
.phase-empty{padding:18px;font-size:13px}

/* ---------- sections / cards ---------- */
.card-grid{columns:2;column-gap:16px}
.card-grid .section{break-inside:avoid}
.section{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-bottom:16px;
}
.section-head{
  padding:11px 16px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.section-title{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;letter-spacing:-.005em}
.head-right{display:flex;align-items:center;gap:10px}
.section-count{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);white-space:nowrap}
.section-count.all-done{color:var(--done);font-weight:600}
.phase-select{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;color:var(--ink);
  border:1px solid var(--line);border-radius:6px;background:#FBFDFC;padding:4px 6px;
  cursor:pointer;max-width:170px;
}

/* ---------- rows ---------- */
.row{
  display:flex;align-items:flex-start;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .12s ease;
}
.row:last-child{border-bottom:none}
.row:hover{background:#F7FAF9}
.row input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex-shrink:0;
  width:20px;height:20px;margin-top:1px;
  border:2px solid #A9BAB3;border-radius:6px;background:#fff;
  display:grid;place-content:center;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.row input[type="checkbox"]::after{
  content:"";width:11px;height:11px;
  clip-path:polygon(14% 44%, 0 61%, 40% 100%, 100% 16%, 84% 3%, 39% 68%);
  background:#fff;transform:scale(0);transition:transform .15s ease;
}
.row input[type="checkbox"]:checked{background:var(--done);border-color:var(--done)}
.row input[type="checkbox"]:checked::after{transform:scale(1)}
.row-text{flex:1;min-width:0}
.row-label{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.row-value{
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;
  word-break:break-word;transition:color .15s ease;
}
.row.checked .row-value{color:var(--muted)}
.row.checked .row-label{opacity:.7}
.stamp{
  display:none;flex-shrink:0;margin-top:3px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.12em;color:var(--done);background:var(--done-soft);
  border:1px solid var(--done);border-radius:4px;padding:2px 7px;
  transform:rotate(-3deg);
}
.row.checked .stamp{display:inline-block;animation:stampIn .18s ease}
@keyframes stampIn{from{transform:rotate(-3deg) scale(1.35);opacity:0}to{transform:rotate(-3deg) scale(1);opacity:1}}
.flag{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.08em;color:var(--pending);background:var(--pending-soft);
  border-radius:4px;padding:1px 6px;margin-left:4px;vertical-align:1px;
}
.note-row{padding:10px 16px;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line)}
.note-row:last-child{border-bottom:none}
.empty{text-align:center;color:var(--muted);padding:30px 20px;font-size:14px}

/* ---------- dashboard list ---------- */
.ob-row{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink);
  transition:background .12s ease;
}
.ob-row:hover{background:#F7FAF9;text-decoration:none}
.ob-row:last-child{border-bottom:none}
.ob-title{font-weight:600;display:block}
.ob-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted)}
.ob-progress{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* ---------- admin ---------- */
.admin-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--line);font-size:14px;
}
.admin-row:last-child{border-bottom:none}
.admin-row .grow{flex:1;min-width:0;word-break:break-word}
.mono{font-family:'IBM Plex Mono',monospace;font-size:12px}
.muted{color:var(--muted)}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--ink);color:#fff;font-size:13px;font-weight:500;
  padding:10px 18px;border-radius:99px;opacity:0;pointer-events:none;
  transition:transform .25s ease,opacity .25s ease;z-index:10;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

@media (max-width:700px){
  .card-grid{columns:1}
  .ob-progress .progress-track{width:70px}
}

/* ---------- v2: admin editor & misc ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field select{
  font:inherit;font-weight:400;padding:9px 12px;border:1px solid var(--line);
  border-radius:8px;background:#FBFDFC;color:var(--ink);
}
.mini-input{
  font:inherit;font-size:13px;padding:5px 9px;border:1px solid var(--line);
  border-radius:6px;background:#FBFDFC;color:var(--ink);min-width:0;
}
.mono-input{font-family:'IBM Plex Mono',monospace;font-size:12px}
.mini-select{
  font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;color:var(--ink);
  border:1px solid var(--line);border-radius:6px;background:#FBFDFC;padding:5px 6px;
  cursor:pointer;max-width:190px;
}
.row-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn-primary.sm{padding:5px 13px;font-size:12.5px}
.btn-ghost.sm{padding:4px 10px;font-size:12.5px}
.title-form{margin-top:2px}
.title-input{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(20px,3vw,28px);
  letter-spacing:-.01em;border:1px solid transparent;border-radius:8px;
  background:transparent;color:var(--ink);padding:4px 8px;min-width:min(420px,70vw);
}
.title-input:hover,.title-input:focus{border-color:var(--line);background:#FBFDFC}
.flag.missing{color:var(--danger);background:var(--danger-soft)}
.tpl-section{break-inside:avoid}
.field-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 16px;border-bottom:1px solid var(--line);
}
.field-row:last-child{border-bottom:none}
.field-row.add-form{background:#F7FAF9}
.field-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.f-label{width:170px}
.f-match{flex:1;min-width:180px}
.chk{
  display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;
  color:var(--muted);white-space:nowrap;cursor:pointer;
}
.chk input{accent-color:var(--done);cursor:pointer}
.add-section{margin-top:2px;margin-bottom:6px}

/* ---------- v3: admin nav dropdown (opens on hover) ---------- */
.nav-dropdown{position:relative}
.nav-drop-trigger{
  color:var(--ink);font-weight:500;display:inline-flex;align-items:center;gap:5px;
}
.nav-drop-trigger::after{content:"▾";font-size:10px;color:var(--muted)}
.dropdown-menu{
  display:none;position:absolute;top:100%;right:0;padding-top:8px;z-index:30;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu{display:block}
.dropdown-inner{
  min-width:190px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 28px rgba(24,36,31,.14);padding:6px;
  display:flex;flex-direction:column;
}
.dropdown-inner a{
  color:var(--ink);font-weight:500;font-size:13.5px;
  padding:8px 11px;border-radius:6px;white-space:nowrap;
}
.dropdown-inner a:hover{background:var(--paper);text-decoration:none}

/* ---------- v3: admin dashboard ---------- */
.stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;margin-bottom:24px;
}
.stat-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;display:flex;flex-direction:column;color:var(--ink);
  transition:border-color .15s ease;
}
.stat-card:hover{text-decoration:none;border-color:var(--done)}
.stat-num{font-family:'Archivo',sans-serif;font-weight:800;font-size:30px;line-height:1.15}
.stat-label{font-size:13px;font-weight:600;color:var(--muted)}
.stat-cta{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  color:var(--done);margin-top:10px;
}
.admin-grid{display:grid;grid-template-columns:3fr 2fr;gap:16px;align-items:start}
@media (max-width:800px){.admin-grid{grid-template-columns:1fr}}

/* ---------- v4: status badges, alerts, charts ---------- */
.flag.done{color:var(--done);background:var(--done-soft)}
.alert.ok{background:var(--done-soft);color:var(--done);border-color:var(--done)}
.ob-title .flag{vertical-align:2px}
.chart-box{padding:14px 16px}
.chart-box svg{width:100%;height:auto;display:block}
.chart-legend{display:flex;gap:16px;font-size:12px;font-weight:500;color:var(--muted)}
.legend-item{display:inline-flex;align-items:center;gap:6px}
.legend-swatch{width:10px;height:10px;border-radius:3px;display:inline-block}
.chart-nums{display:flex;gap:18px;font-size:13px;margin-bottom:10px;flex-wrap:wrap}
.chart-nums strong{font-family:'IBM Plex Mono',monospace}
.c-label{fill:var(--muted);font-family:'Inter',sans-serif;font-size:12px}
.c-num{fill:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600}
@media (max-width:700px){
  .two-col{grid-template-columns:1fr}
  .f-label,.f-match{width:100%;flex:auto}
}