create-issflow 1.2.0 → 1.4.0

package/template/.claude/istartsoft-flow/METHODOLOGY.md

@@ -59,6 +59,37 @@ non-TDD before SCAFFOLD fires.
 
 -----
 
+## Sprint layer (the Scrum wrapper — optional)
+
+Between the PLAN (the product backlog) and the PHASE (the build loop) sits an
+optional **sprint layer** (`/sprint`): consecutive PLAN phases are grouped behind ONE
+sprint goal and ship ONE deployable increment, wrapped in the full Scrum ceremony set.
+The hierarchy is **PLAN (backlog) → SPRINT (committed slice) → PHASE (loop)**. Phases
+run unchanged inside a sprint; the layer only adds cadence + inspect-and-adapt around them.
+
+Scrum maps onto the kit with no new vocabulary to learn:
+
+| Scrum | iStartSoftFlow |
+|-------|----------------|
+| Product Backlog | `docs/PLAN.md` (all phases) |
+| Sprint Backlog | `docs/sprints/sprint-<n>.md` (committed phases + goal) |
+| Scrum Master / Dev Team | the orchestrator (facilitates) / the subagent fleet (builds) |
+| Sprint Planning | `/sprint plan` — slice the approved PLAN into a capacity-bounded sprint |
+| Daily Scrum | `/sprint standup` — rebound to a **per-phase-close tick** (the AI loop has no calendar days) |
+| Sprint Review / demo | `/sprint review` — demo the increment + run the boundary audits |
+| Retrospective | `/sprint retro` — routed, concrete process actions |
+| Increment · Burndown · Velocity | the deployable slice · remaining-points table · completed pts/sprint |
+
+**AUTO-facilitated.** Sprint planning only SLICES an ALREADY-APPROVED plan (the
+requirements gate happened at `/overview` plan approval), so the ceremonies are
+AUTO-safe: `/sprint run` drives a whole sprint — or every remaining sprint — hands-off
+(plan → loop `/phase` → standup tick → review → retro → close → next sprint), pausing
+only at a methodology hard-stop. The PLAN-approval, commercial, and release gates are
+SEPARATE and stay interactive (see Autonomy). The layer is opt-in: skip it and drive
+phases directly off the PLAN exactly as before.
+
+-----
+
 ## Project lifecycle (real-world delivery)
 
 The loop above is the BUILD engine. Around it runs a full client-delivery lifecycle
@@ -68,20 +99,31 @@ from idea to closeout:
 1. **Discover** — idea → requirements, captured by `/overview` (the double-grill).
 2. **PRD** — crystallised requirements in `docs/PRD.md` (or your BMAD/iSSM stories).
 3. **Stack & architecture** — decided in `/overview` design-research → `OVERVIEW.md`.
-4. **Plan** — `/overview`'s `planner` → `docs/PLAN.md` (the vertical-slice phases).
-   The plan exists before the proposal, because the proposal estimates *these* phases.
+4. **Plan** — `/overview`'s `planner` → `docs/PLAN.md` (the vertical-slice phases),
+   then the **PLAN-APPROVAL gate** (rule 13): build cannot start until a human signs the
+   plan off and the approval is recorded. The plan exists before the proposal, because
+   the proposal estimates *these* phases.
 5. **Proposal & estimate (OPTIONAL — depends on the job)** — for client / quoted
    work, `/propose` reads OVERVIEW + PLAN → `docs/PROPOSAL.md` + a rendered
    `docs/proposal.html`: scope, phase breakdown, effort + cost estimate, timeline,
    assumptions, with a **client sign-off gate** before build. Internal / personal
    projects skip straight from plan to build.
-6. **Build** — the loop, one phase at a time (`/phase`, AUTO dev loop).
+6. **Build** — the loop, one phase at a time (`/phase`, AUTO dev loop). Each phase's
+   tests (unit + integration + e2e) are automated and MUST pass before the next phase.
+   Optionally wrap the phases in the **sprint layer** (`/sprint`): group them into
+   capacity-bounded sprints, each shipping one demoable increment with planning →
+   standups → review → retro. `/sprint run` drives this end-to-end (see Sprint layer).
 7. **Change mid-flight** — `/change-request`: impact analysis + re-estimate + a logged
    change order (`docs/CHANGES.md`) + sign-off, then `/replan`. Scope and cost never
    change silently.
-8. **Deploy** — in the final phase.
-9. **Closeout** — `/synthesize` (final pass) → a project summary: what was built, key
-   decisions, every change order, and the final cost vs the original estimate.
+8. **Release** — `/release`: full regression (functional/integration/e2e) → auto
+   audits (UI / QA / security / code) → smoke → **manual UAT** (`/uat`, scenario sheet
+   + captured results) → defect loop → **sign-off** (`docs/SIGNOFF-…`) → promote to
+   production (a human-signed hard-stop).
+9. **Go-live & support** — after-go-live hypercare; new scope routes through
+   `/change-request`. The project is live; the loop continues.
+10. **Closeout** — `/synthesize` → a project summary: what was built, key decisions,
+    every change order, and the final cost vs the original estimate.
 
 **Logging is continuous and total.** Every stage writes to a durable artifact:
 requirements (PRD / OVERVIEW), commercial (PROPOSAL / CHANGES), execution
@@ -89,9 +131,9 @@ requirements (PRD / OVERVIEW), commercial (PROPOSAL / CHANGES), execution
 Nothing important lives only in chat — it is on disk, so the project can always be
 reconstructed and summarised.
 
-**Commercial gates are always interactive** (both modes): the proposal sign-off and
-every change-order approval pause for the human. AUTO governs the *dev loop between*
-those gates, never the money decisions.
+**Approval gates are always interactive** (both modes): the **PLAN-APPROVAL** gate
+(rule 13), the proposal sign-off, and every change-order approval pause for the human.
+AUTO governs the *dev loop between* those gates, never the plan or the money decisions.
 
 -----
 
@@ -105,6 +147,7 @@ front-end. They compose — BMAD plans, iStartSoftFlow builds — with no duplic
 | Analyst / PM / Architect / PO agents | → | `/overview` grill + `researcher` + `planner` |
 | PRD + Architecture | → | `docs/OVERVIEW.md` (+ `docs/PRD.md`) |
 | sharded epics / story files | → | `docs/PLAN.md` phases (1 story ≈ 1 phase) |
+| epics / sprint grouping | → | the **sprint layer** (`/sprint`) — phases grouped behind one sprint goal |
 | SM "story with embedded context" | → | the phase **context package** (rationale + architecture + impl notes + qa focus + sharp acceptance) |
 | Dev → QA | → | `implementer` → `test-author` + the phase gates (TDD · UX · security · code-standards) |
 
@@ -149,7 +192,8 @@ can. Escalation is at most two hops.
   structural, not honor-system. Writes a MOCK suite + a REAL API suite.
 - **e2e-runner** — writes/runs functional browser E2E (your declared E2E runner,
   e.g. Playwright) BLIND. Reads only the acceptance spec + `docs/ENDPOINTS.md`,
-  never the implementation.
+  never the implementation. Writes a trace to `docs/research/e2e-<phase-slug>.md`;
+  returns a terse summary.
 - **debugger** — debugs in an ISOLATED context. Writes a trace to
   `docs/research/debug-<slug>.md`; returns a summary.
 - **synthesizer** — compresses `docs/STATE.md` / `docs/ISSUES.md`, prunes
@@ -171,7 +215,12 @@ Named procedures, each with a canonical body in `.claude/commands/<name>.md`.
   a logged change order (`CHANGES.md`) + sign-off, then `replan`.
 - **phase [n]** — run one phase end-to-end with the circuit breaker. Chooses the
   TDD or non-TDD order at RESEARCH. CLOSE runs the regression guard + ENDPOINTS
-  coverage gate.
+  coverage gate. When a sprint is active, CLOSE also fires a `/sprint standup` tick.
+- **sprint [run|plan|standup|review|retro|close|status] [n]** — the Scrum wrapper
+  around the build loop: slice the approved PLAN into a capacity-bounded sprint, run
+  the ceremonies (planning → standups → review/demo + boundary audits → retro → close)
+  with burndown + velocity. `/sprint run` drives a whole sprint (or every remaining
+  one) AUTO end-to-end. Opt-in; phases run unchanged inside it.
 - **quick [change]** — small, obvious, non-phase change; no agent chain. Stays
   non-TDD. Runs the mock regression corpus after the change.
 - **ui-audit** — whole-product UI audit against the `ux-design` cookbook (a11y /
@@ -183,12 +232,20 @@ Named procedures, each with a canonical body in `.claude/commands/<name>.md`.
 - **security-audit** — whole-product SECURITY audit against the `security` cookbook
   (OWASP/ASVS/WSTG/secrets/SCA/SAST/supply-chain); scored report. On-demand; a
   precondition for the pre-deploy pentest. Distinct from the per-phase rule-11 gate.
+- **release** — the pre-production pipeline (run after all build phases): full
+  regression → auto audits → smoke → UAT handoff → defect loop → sign-off → promote
+  to production → go-live support. The automated SDLC backbone.
+- **uat** — manual UAT cycle: generate an all-case scenario sheet for human testers,
+  capture their results, drive the defect loop to 100% pass. Used inside `release`.
 - **unstuck** — deep re-research after a circuit breaker (auto-run once in AUTO on
   first stuck; human-triggered in GUIDED).
 - **synthesize** — compress STATE.md, dedup ISSUES.md, prune snapshots. Run
   before a context reset.
 - **replan** — revise `PLAN.md` (add/cut/split/merge/reorder pending phases) and
-  reconcile the regression corpus in step.
+  reconcile the regression corpus in step. Reshaping unbuilt scope reverts the plan
+  to `PENDING` and re-runs the PLAN-APPROVAL gate (rule 13).
+- **runbook** — capture an operational / incident scenario in `docs/RUNBOOK.md` so
+  prod-debug knowledge isn't re-derived under pressure.
 - **log-issue** — append an error to `ISSUES.md` with root cause + failed attempts.
 - **log-decision** — record an architectural change in `docs/DESIGN_LOG.md`.
 - **store-wisdom** — promote resolved issues + research to the shared KB.
@@ -205,13 +262,22 @@ inject context, the model performs them itself.
 
 At the start of every session, before any other work, surface:
 1. git state (branch, uncommitted count, last 3 commits).
-2. `docs/STATE.md` — the current position. READ THIS FIRST.
+2. `docs/STATE.md` — the current position. READ THIS FIRST. If a sprint is active,
+   surface its goal + burndown from `docs/sprints/sprint-<n>.md`.
 3. open items in `docs/ISSUES.md`.
 4. `docs/research/INDEX.md` (research map) + infra/auth status.
 5. shared KB: pull latest + load `docs/.kb-snapshot.md` if `.claude/kb-config.json`
    exists.
 6. a one-line reminder of the hard rules below.
 
+### SPRINT-STANDUP (auto — at phase close inside an active sprint)
+
+When a sprint is active, every `/phase` CLOSE fires one standup tick: append a
+one-line entry to the active `docs/sprints/sprint-<n>.md` (done / next / blockers)
+and update the burndown (remaining points + the sparkline). The "daily" Scrum is
+rebound to per-phase-close because the AI dev loop has no calendar days — the phase
+boundary is the real unit of progress. Blockers surface immediately. See `/sprint`.
+
 ### COMPRESS (before a context compaction)
 
 Snapshot the live position to `docs/.snapshots/` so a post-compact session can
@@ -223,7 +289,8 @@ The cheapest token is the one never loaded. The kit is built to minimise context
 
 - **Phase boundary is the primary reset.** `/synthesize -> /clear` ends every
   phase so the next one starts with a small, fresh context instead of carrying
-  the whole history forward.
+  the whole history forward. The **sprint boundary** (`/sprint close`) is a second,
+  coarser reset — synthesize + clear there too before the next sprint plans.
 - **Lazy, not always-on.** This methodology + the skills load on demand; only the
   SessionStart hook output is paid every session, and it injects just the live
   STATE + *open* issues (resolved ones stay on disk for grep, not re-paid in tokens).
@@ -243,8 +310,8 @@ The cheapest token is the one never loaded. The kit is built to minimise context
 The kit runs in one of two modes, declared in `docs/OVERVIEW.md` (default: **AUTO**):
 
 **Planning always asks; development doesn't.** Asking is cheap and decisive while
-*planning* — so `/overview` (the double-grill) and plan approval stay interactive in
-both modes. AUTO governs only the **development loop** (implement → test → debug →
+*planning* — so `/overview` (the double-grill) and the **PLAN-APPROVAL gate** (rule 13,
+a recorded sign-off) stay interactive in both modes. AUTO governs only the **development loop** (implement → test → debug →
 close): there, interruptions are expensive, so it follows the plan instead of asking.
 
 - **AUTO (default) — during DEVELOPMENT, follow the plan, don't interrupt.** Once a
@@ -284,7 +351,7 @@ development run that follows the spec and logs every problem so it never recurs.
 
 -----
 
-## Hard rules (1–12)
+## Hard rules (1–13)
 
 1. Before debugging ANY error: grep `docs/ISSUES.md` AND `docs/research/INDEX.md`.
    The SESSION-OPEN ritual surfaces ISSUES.md — there is no excuse to miss it.
@@ -338,6 +405,16 @@ development run that follows the spec and logs every problem so it never recurs.
     (the language's standard tool), names follow the language's OWN idiom, and the
     code conforms to the declared architecture (Feature-Based by default) — checked
     at CLOSE. Lint/format errors or idiom violations BLOCK the close. (`code-standards`.)
+13. **PLAN-APPROVAL gate.** No phase / sprint / build work starts until `docs/PLAN.md`
+    carries a human approval. `/overview` ends by presenting the plan and STOPPING for
+    sign-off; on approval the gate is RECORDED in three places — the PLAN.md
+    `> Approval:` header (`approved <date> v<n>`), `plan:` in `docs/STATE.md`, and a
+    `plan v<n> approved` line in `docs/HISTORY.md`. `/phase` and `/sprint` REFUSE to
+    start while that header still reads `PENDING`. Interactive in BOTH modes: AUTO
+    governs the dev loop that runs AFTER approval, never the approval itself — it is
+    the planning twin of the commercial sign-off gate (`/propose`). A `/replan` that
+    adds or reshapes UNBUILT scope reverts the affected plan to `PENDING` and
+    re-surfaces it for confirmation before those phases run.
 
 -----
 
@@ -381,18 +458,35 @@ the KB. The kit works normally without a KB.
   commands render into `docs/`.
 - `docs/CHANGES.md` — change-order log (append-only): each scope change with its
   impact, effort/cost delta, new total, and approval status. The commercial audit trail.
+- `docs/UAT-<date>.md` — UAT scenario sheet (all cases) + captured tester results
+  (PASS/FAIL + notes). Drives the release defect loop.
+- `docs/SIGNOFF-<date>.md` — release sign-off: scope delivered, test/audit/UAT
+  summary, known limitations, approver — the gate to promote to production.
+- `docs/ui-audit-<date>.md` · `docs/qa-audit-<date>.md` · `docs/security-audit-<date>.md`
+  — scored whole-product audit reports (from the `*-audit` commands).
 - `docs/STATE.md` — current position. Small. Rewritten, not appended.
 - `docs/ISSUES.md` — error log. Deduped by synthesizer.
-- `docs/PLAN.md` — the phase plan. The last phase has the deploy task.
-- `docs/HISTORY.md` — one line per finished phase.
+- `docs/PLAN.md` — the phase plan (the product backlog). Carries an `> Approval:`
+  header — `PENDING` until the rule-13 PLAN-APPROVAL gate stamps `approved <date> v<n>`;
+  no phase runs while it reads `PENDING`. The last phase has the deploy task. Phases may
+  carry a `[N pts]` estimate and be grouped under `## Sprint` headers when the sprint
+  layer is used.
+- `docs/sprints/sprint-<n>.md` — one per sprint (sprint layer): goal, committed phases
+  + points, burndown, standup log, review (demo + audit scores), retro. Maintained by
+  `/sprint`.
+- `docs/sprints/VELOCITY.md` — rolling velocity table (committed vs completed pts per
+  sprint). Drives the next sprint's capacity.
+- `docs/HISTORY.md` — one line per finished phase (and per closed sprint).
 - `docs/DESIGN_LOG.md` — kit architectural rationale (§5.x decision log).
 - `docs/OVERVIEW.md` — project scope. Written after the double-grill in `overview`.
   E2E target.
 - `docs/ENDPOINTS.md` — API/service endpoint catalogue. Maintained by implementer
   each phase. Drives the CLOSE coverage gate.
+- `docs/RUNBOOK.md` — operational / incident runbook (grep-able): per-scenario
+  symptoms, diagnosis, and recovery steps. Maintained by `/runbook`.
 - `docs/research/` — full research + debug files. `INDEX.md` is the searchable map.
   `design-<slug>.md` (design research), `<slug>.md` (impl research),
-  `debug-<slug>.md` (debugger traces).
+  `debug-<slug>.md` (debugger traces), `e2e-<slug>.md` (e2e-runner traces).
 - `docs/.snapshots/` — pre-compact recovery markers (auto-pruned, gitignored).
   Holds no secrets.
 - your E2E stack — runner config + any ephemeral test services (e.g. `e2e/`,
@@ -421,7 +515,7 @@ the same everywhere — only the *wiring* differs.
 
 | Host | Entry file | Commands | Subagents | Lifecycle hooks | Shared KB |
 |------|-----------|----------|-----------|-----------------|-----------|
-| **Claude Code** (reference) | `AGENTS.md` + `.claude/` | `.claude/commands/` | native | SessionStart · PreCompact · SubagentStop (with context injection) | yes |
+| **Claude Code** (reference) | `CLAUDE.md` (`@AGENTS.md`) + `.claude/` | `.claude/commands/` | native | SessionStart · PreToolUse (context-budget watchdog) · PreCompact · SubagentStop | yes |
 | **Codex CLI** | `AGENTS.md` (native) | `.claude/commands/` (read as prompts) | read as reference | model-run | yes |
 | **Cursor** | `.cursor/rules/` + `AGENTS.md` | `.cursor/commands/` | reads `.claude/agents/` | `.cursor/hooks.json` (sessionStart · subagentStop) | yes |
 | **Gemini CLI** | `GEMINI.md` + `AGENTS.md` | `.claude/commands/` (read as prompts) | read as reference | model-run | yes |

package/template/.claude/templates/proposal.html

@@ -1,126 +1,112 @@
 <!doctype html>
 <!--
-  Client-facing proposal template (rendered by /propose from docs/PROPOSAL.md).
-  HOW TO USE (agent): copy this file to docs/proposal.html and replace every
-  {{PLACEHOLDER}}. LOCALISE the labels + content to the project's declared
-  language (e.g. natural Thai) — keep technical terms in English where a Thai dev
-  team would. Light + print-friendly on purpose (Ctrl/Cmd-P → "Save as PDF").
-  Repeat the <tr> in the phases table per phase; repeat <li> lists as needed.
-
-  WHITE-LABEL: this template is brand-neutral. Fill {{COMPANY}} / {{LOGO}} with the
-  ISSUING company's brand (whoever is sending the proposal) — NOT the kit's. {{LOGO}}
-  is optional: replace with an <img src="…"> or a text wordmark, or delete it.
-  Icons: none by design (no emoji) — keep it clean and typographic.
+  Client-facing proposal — ONE A4 PAGE (rendered by /propose from docs/PROPOSAL.md).
+  HOW TO USE (agent): copy to docs/proposal.html, replace every {{PLACEHOLDER}}, and
+  keep it to a SINGLE A4 page — be terse (≈3–6 phases, ≈4 assumptions). Localise the
+  CONTENT to the project language; the section labels are bilingual (TH / EN) already.
+  WHITE-LABEL: fill {{COMPANY}} / {{LOGO}} with the ISSUING company's brand (not the
+  kit's). {{LOGO}} optional: an <img src="…">, an SVG, or delete to keep the monogram.
+  Print: Ctrl/Cmd-P → A4 → "Save as PDF" (fits one page).
 -->
 <html lang="{{LANG}}">
 <head>
 <meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>{{TITLE}} — Proposal {{VERSION}}</title>
 <style>
-  :root{ --ink:#1a2230; --muted:#5b6878; --line:#e3e8f0; --accent:#5b4cf0;
-    --accent2:#0ea5b7; --bg:#fff; --soft:#f6f8fc;
-    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Thai",system-ui,sans-serif;
-    --mono:ui-monospace,Menlo,Consolas,monospace; }
+  @page { size: A4; margin: 0 }
+  :root{
+    --ink:#162033; --muted:#5d6a7d; --line:#dbe3ee; --soft:#f6f8fb;
+    --violet:#635bff; --green:#15803d;
+    --sans:"Inter","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
+    --mono:ui-monospace,Menlo,Consolas,monospace;
+  }
   *{box-sizing:border-box}
-  body{margin:0;background:var(--soft);color:var(--ink);font-family:var(--sans);line-height:1.6}
-  .sheet{max-width:880px;margin:24px auto;background:var(--bg);border:1px solid var(--line);
-    border-radius:14px;overflow:hidden}
-  .head{padding:34px 40px;border-bottom:3px solid var(--accent);
-    background:linear-gradient(120deg,#f3f1ff,#eafcff)}
-  .brand-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:1rem}
-  .brand-row .logo{display:inline-flex;align-items:center}
-  .head .ey{font:600 .72rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
-  .head h1{margin:.3em 0 .1em;font-size:1.9rem;letter-spacing:-.02em}
-  .head .meta{color:var(--muted);font-size:.9rem}
-  main{padding:14px 40px 40px}
-  section{padding:20px 0;border-bottom:1px solid var(--line)}
-  section:last-child{border:none}
-  h2{font-size:1.05rem;margin:0 0 .5em;display:flex;align-items:center;gap:9px}
-  h2::before{content:"";width:10px;height:10px;border-radius:3px;
-    background:linear-gradient(120deg,var(--accent),var(--accent2))}
-  table{width:100%;border-collapse:collapse;font-size:.92rem}
-  th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
-  th{background:var(--soft);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
-  td.num,th.num{text-align:right;font-family:var(--mono)}
-  tfoot td{font-weight:700;border-top:2px solid var(--ink);border-bottom:none}
-  ul{margin:.2em 0;padding-left:1.2em} li{margin:.2em 0;color:var(--muted)}
-  .total{font-size:1.5rem;font-weight:800}
-  .total small{font-size:.8rem;color:var(--muted);font-weight:500}
-  .cols{display:flex;gap:32px;flex-wrap:wrap} .cols>div{flex:1;min-width:220px}
-  .sign{display:flex;gap:40px;flex-wrap:wrap;margin-top:10px}
-  .sign div{flex:1;min-width:220px} .line{border-bottom:1px solid var(--ink);height:34px;margin-top:18px}
-  .muted{color:var(--muted)} .pill{display:inline-block;font:600 .7rem/1 var(--mono);
-    padding:3px 8px;border-radius:6px;background:var(--soft);border:1px solid var(--line);color:var(--muted)}
-  footer{padding:18px 40px;color:var(--muted);font-size:.8rem;background:var(--soft)}
-  @media print{ body{background:#fff} .sheet{margin:0;border:none;border-radius:0;max-width:none}
-    .head{background:#fff} section{break-inside:avoid} }
+  body{margin:0;background:#e9edf3;color:var(--ink);font-family:var(--sans);font-size:10.5px;line-height:1.45}
+  .sheet{width:210mm;min-height:297mm;margin:10mm auto;background:#fff;padding:15mm 16mm;display:flex;flex-direction:column;gap:11px}
+  .lbl{color:var(--muted);font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 3px}
+  .lbl em{font-style:normal;opacity:.6;font-weight:600}
+  h1{font-size:21px;margin:0;letter-spacing:-.3px;line-height:1.1}
+  .muted{color:var(--muted)} ul{margin:0;padding-left:15px} li{margin:1.5px 0}
+  hr{border:none;border-top:1px solid var(--line);margin:0}
+
+  /* header */
+  .head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:11px}
+  .co{display:flex;align-items:center;gap:10px}
+  .logo{width:42px;height:42px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto;overflow:hidden}
+  .logo img{width:100%;height:100%;object-fit:contain}
+  .co .name{font-weight:800;font-size:15px;line-height:1.15}
+  .co .tag{color:var(--muted);font-size:9px}
+  .head .meta{text-align:right;font-size:9px;color:var(--muted)}
+  .head .meta .big{font:800 12px/1.2 var(--sans);letter-spacing:.12em;color:var(--violet)}
+  .pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 8px;font:800 8px/1 var(--mono);color:var(--muted);margin-top:4px}
+
+  .cols{display:flex;gap:18px} .cols>div{flex:1;min-width:0}
+  table{width:100%;border-collapse:collapse;font-size:10px}
+  th,td{text-align:left;padding:5px 7px;border-bottom:1px solid var(--line)}
+  th{background:var(--soft);font-size:8px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
+  td.n,th.n{text-align:right;font-family:var(--mono)}
+  tfoot td{font-weight:800;border-top:1.5px solid var(--ink);border-bottom:none}
+  .total{display:flex;align-items:baseline;justify-content:space-between;background:var(--soft);border-radius:9px;padding:9px 13px}
+  .total .amt{font-size:19px;font-weight:800} .total .amt small{font-size:9px;color:var(--muted);font-weight:600}
+
+  .sign{display:flex;gap:34px;margin-top:auto;padding-top:14px}
+  .sign>div{flex:1} .line{border-bottom:1px solid var(--ink);height:30px} .sign .lbl{margin-top:5px}
+  footer{border-top:1px solid var(--line);padding-top:8px;color:var(--muted);font-size:8.5px;display:flex;justify-content:space-between}
+  @media print{ body{background:#fff} .sheet{margin:0;min-height:auto;box-shadow:none} }
 </style>
 </head>
 <body>
 <div class="sheet">
+
   <div class="head">
-    <div class="brand-row"><span class="logo">{{LOGO}}</span><strong>{{COMPANY}}</strong></div>
-    <div class="ey">Proposal · {{VERSION}}</div>
+    <div class="co">
+      <span class="logo">{{LOGO}}</span>
+      <span><span class="name">{{COMPANY}}</span><br><span class="tag">{{COMPANY_TAGLINE}}</span></span>
+    </div>
+    <div class="meta">
+      <div class="big">PROPOSAL</div>
+      {{VERSION}} · {{DATE}}<br><span class="pill">{{STATUS}}</span>
+    </div>
+  </div>
+
+  <div>
+    <p class="lbl">ใบเสนอราคา <em>Prepared for</em></p>
     <h1>{{TITLE}}</h1>
-    <div class="meta">{{L_PREPARED_FOR}} {{CLIENT}} · {{DATE}} · <span class="pill">{{STATUS}}</span></div>
+    <p class="muted" style="margin:3px 0 0">{{CLIENT}} — {{SUMMARY}}</p>
   </div>
-  <main>
-    <section>
-      <h2>{{L_OVERVIEW}}</h2>
-      <p class="muted">{{SUMMARY}}</p>
-    </section>
 
-    <section>
-      <h2>{{L_SCOPE}}</h2>
-      <div class="cols">
-        <div><strong>{{L_IN_SCOPE}}</strong><ul>{{SCOPE_IN_ITEMS}}</ul></div>
-        <div><strong>{{L_OUT_SCOPE}}</strong><ul>{{SCOPE_OUT_ITEMS}}</ul></div>
-      </div>
-    </section>
+  <div class="cols">
+    <div><p class="lbl">ขอบเขตงาน <em>In scope</em></p><ul>{{SCOPE_IN_ITEMS}}</ul></div>
+    <div><p class="lbl">นอกขอบเขต <em>Out of scope</em></p><ul>{{SCOPE_OUT_ITEMS}}</ul></div>
+  </div>
+
+  <div>
+    <p class="lbl">เฟส &amp; ค่าใช้จ่าย <em>Phases &amp; cost</em></p>
+    <table>
+      <thead><tr><th>เฟส <em style="font-style:normal;opacity:.5">Phase</em></th><th>Complexity</th><th class="n">Effort</th><th class="n">Cost</th></tr></thead>
+      <tbody>{{PHASE_ROWS}}<!-- <tr><td>1. Auth</td><td>M</td><td class="n">2–3d</td><td class="n">฿16k–24k</td></tr> --></tbody>
+      <tfoot><tr><td colspan="2">รวม <em style="font-style:normal;opacity:.5">Total</em></td><td class="n">{{TOTAL_EFFORT}}</td><td class="n">{{TOTAL_COST}}</td></tr></tfoot>
+    </table>
+  </div>
 
-    <section>
-      <h2>{{L_PHASES}}</h2>
-      <table>
-        <thead><tr>
-          <th>{{L_PHASE}}</th><th>{{L_COMPLEXITY}}</th>
-          <th class="num">{{L_EFFORT}}</th><th class="num">{{L_COST}}</th>
-        </tr></thead>
-        <tbody>
-          {{PHASE_ROWS}}
-          <!-- e.g. <tr><td>1. Auth</td><td>M</td><td class="num">2–3d</td><td class="num">฿16,000–24,000</td></tr> -->
-        </tbody>
-        <tfoot><tr><td colspan="2">{{L_TOTAL}}</td><td class="num">{{TOTAL_EFFORT}}</td><td class="num">{{TOTAL_COST}}</td></tr></tfoot>
-      </table>
-      <p class="total" style="margin-top:14px">{{TOTAL_COST}} <small>{{CONTINGENCY_NOTE}}</small></p>
-    </section>
+  <div class="total">
+    <span><span class="lbl" style="margin:0">ราคารวม <em>Total</em></span><br><span class="muted" style="font-size:9px">{{TIMELINE}}</span></span>
+    <span class="amt">{{TOTAL_COST}} <small>{{CONTINGENCY_NOTE}}</small></span>
+  </div>
 
-    <section>
-      <h2>{{L_TIMELINE}}</h2>
-      <p class="muted">{{TIMELINE}}</p>
-    </section>
+  <div class="cols">
+    <div><p class="lbl">สมมุติฐาน <em>Assumptions</em></p><ul>{{ASSUMPTION_ITEMS}}</ul></div>
+    <div><p class="lbl">ข้อยกเว้น <em>Exclusions</em></p><ul>{{EXCLUSION_ITEMS}}</ul></div>
+  </div>
 
-    <section>
-      <div class="cols">
-        <div><h2>{{L_ASSUMPTIONS}}</h2><ul>{{ASSUMPTION_ITEMS}}</ul></div>
-        <div><h2>{{L_EXCLUSIONS}}</h2><ul>{{EXCLUSION_ITEMS}}</ul></div>
-      </div>
-    </section>
+  <div><p class="lbl">เงื่อนไขการชำระเงิน <em>Payment</em></p><p class="muted" style="margin:0">{{PAYMENT_ITEMS}}</p></div>
 
-    <section>
-      <h2>{{L_PAYMENT}}</h2>
-      <ul>{{PAYMENT_ITEMS}}</ul>
-    </section>
+  <div class="sign">
+    <div><div class="line"></div><p class="lbl">ลงนามลูกค้า <em>Client sign-off</em></p></div>
+    <div><div class="line"></div><p class="lbl">วันที่ <em>Date</em></p></div>
+  </div>
 
-    <section>
-      <h2>{{L_SIGNOFF}}</h2>
-      <div class="sign">
-        <div><div class="line"></div><div class="muted">{{L_CLIENT_SIGN}}</div></div>
-        <div><div class="line"></div><div class="muted">{{L_DATE}}</div></div>
-      </div>
-    </section>
-  </main>
-  <footer>{{FOOTER}}</footer>
+  <footer><span>{{COMPANY}} · {{FOOTER}}</span><span>{{VERSION}}</span></footer>
 </div>
 </body>
 </html>