:root {
  --bg: #f3f5f4;
  --panel: #ffffff;
  --ink: #252122;
  --muted: #66727a;
  --line: #d8dee2;
  --brand: #80c342;
  --brand-dark: #416c1c;
  --brand-soft: #edf7e3;
  --danger: #b42318;
  --danger-soft: #fef3f2;
  --warn: #b54708;
  --warn-soft: #fffaeb;
  --shadow: 0 1px 2px rgba(40, 52, 59, 0.05);
  --radius: 11px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: "Aptos", "Segoe UI", Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { display:flex; justify-content:space-between; align-items:center; min-height:92px; padding:14px clamp(20px,4vw,58px); background:#ffffff; color:var(--ink); position:sticky; top:0; z-index:10; border-bottom:4px solid var(--brand); box-shadow:0 1px 5px rgba(40,52,59,.08); }
.brand { display:flex; align-items:center; gap:18px; min-width:0; }
.brand-logo { display:block; width:230px; height:62px; max-width:48vw; object-fit:contain; object-position:left center; }
.brand-context { padding-left:18px; border-left:1px solid var(--line); white-space:nowrap; }
.brand-context span { display:block; margin:0 0 2px; color:#65717a; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.brand-context strong { display:block; color:var(--ink); font-size:21px; letter-spacing:-.02em; }
.topbar .icon-btn { min-height:42px; border-color:#bfc9cf; background:#fff; color:#4f5d66; border-radius:8px; padding:0 15px; font-weight:700; }
.topbar .icon-btn:hover { border-color:var(--brand); background:var(--brand-soft); }
.icon-btn { border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:white; border-radius:12px; padding:10px 12px; }
.main { width:min(1120px, calc(100% - 36px)); margin:26px auto 56px; flex:1; }
.product-footer { display:flex; justify-content:center; padding:0 20px 20px; }
.product-footer img { display:block; width:140px; height:auto; opacity:.62; mix-blend-mode:multiply; }
.hero { background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:11px; padding:28px 30px; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:space-between; gap:28px; }
.hero::after { display:none; }
.hero h1 { margin:0 0 8px; font-size:clamp(30px,4vw,40px); line-height:1.08; letter-spacing:-.045em; max-width:760px; }
.hero p { margin:0; max-width:680px; color:var(--muted); font-size:17px; line-height:1.55; }
.eyebrow { margin:0 0 6px!important; color:#718078!important; text-transform:uppercase; font-size:11px!important; font-weight:800; letter-spacing:.13em; }
.hero-status { min-width:210px; display:flex; align-items:center; gap:12px; padding:15px 17px; background:#edf8f2; border:1px solid #cce8d7; border-radius:8px; color:#176d47; }
.hero-status>span { width:10px; height:10px; border-radius:50%; background:#28a46b; box-shadow:0 0 0 4px rgba(40,164,107,.12); }
.hero-status strong,.hero-status small { display:block; }
.hero-status small { margin-top:2px; color:#5e776a; font-size:12px; }
.section-label { display:flex; justify-content:space-between; align-items:center; margin:23px 2px 10px; color:#718078; text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.13em; }
.home-actions { margin-top:0; display:grid; grid-template-columns:1.2fr .8fr; gap:12px; }
.action-card { background:white; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); position:relative; }
.card-number { position:absolute; top:20px; right:20px; color:#a2aca7; font-family:"Cascadia Mono",Consolas,monospace; font-size:13px; font-weight:700; }
.action-card h2 { margin:0 0 8px; font-size:23px; letter-spacing:-.025em; }
.action-card p { margin:0 0 20px; color:var(--muted); line-height:1.5; }
.primary { background:var(--brand); color:#1d2b19; border:none; padding:12px 16px; border-radius:8px; font-weight:800; min-height:46px; }
.primary:hover { background:#6dad31; }
.secondary { background:white; color:#4f5d66; border:1px solid #bfc9cf; padding:12px 16px; border-radius:8px; font-weight:700; }
.ghost { background:transparent; border:none; color:var(--muted); font-weight:700; padding:10px 2px; }
.danger { background:var(--danger); color:white; border:none; padding:12px 16px; border-radius:12px; font-weight:800; }
.btn-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); }
.card + .card { margin-top:16px; }
.section-title { margin:0 0 6px; font-size:28px; letter-spacing:-.035em; }
.section-sub { margin:0 0 22px; color:var(--muted); line-height:1.55; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-weight:800; font-size:14px; }
.field input, .field select, .field textarea { width:100%; border:1px solid #cbd3d8; border-radius:7px; padding:13px 14px; background:white; color:var(--ink); outline:none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(22,132,91,.12); }
.field textarea { min-height:128px; resize:vertical; }
.help { color:var(--muted); font-size:12px; }
.required::after { content:" *"; color:var(--danger); }

.stepper { display:flex; gap:8px; margin:0 0 18px; flex-wrap:wrap; }
.step-pill { padding:8px 12px; border-radius:999px; background:#e8eaed; color:#667085; font-size:12px; font-weight:800; }
.step-pill.active { background:var(--brand-soft); color:var(--brand-dark); }
.step-pill.done { background:#252122; color:white; }

.rule-list { display:grid; gap:12px; }
.rule { display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; padding:16px; border:1px solid var(--line); border-radius:16px; background:#fbfcfc; }
.rule-icon { width:44px; height:44px; border-radius:13px; background:var(--brand-soft); color:var(--brand-dark); display:grid; place-items:center; font-weight:900; }
.rule h3 { margin:1px 0 4px; font-size:16px; }
.rule p { margin:0; color:var(--muted); line-height:1.45; }
.callout { border-radius:16px; padding:16px 18px; margin:16px 0; background:var(--warn-soft); border:1px solid #fedf89; color:#7a2e0e; }
.callout strong { display:block; margin-bottom:4px; }
.checkline { display:flex; gap:12px; align-items:flex-start; padding:16px; border:1px solid var(--line); border-radius:15px; margin-top:18px; background:#fff; }
.checkline input { width:20px; height:20px; margin-top:1px; accent-color:var(--brand); }

.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }
.choice { border:2px solid var(--line); border-radius:16px; padding:18px; background:white; text-align:left; font-weight:800; min-height:76px; }
.choice.selected { border-color:var(--brand); background:var(--brand-soft); color:var(--brand-dark); }
.choice.no.selected { border-color:#d92d20; background:var(--danger-soft); color:#912018; }
.terms { max-height:320px; overflow:auto; border:1px solid var(--line); background:#fafafa; border-radius:16px; padding:18px; line-height:1.55; }
.terms ol { padding-left:22px; margin:0; }
.terms li + li { margin-top:10px; }

.sig-wrap { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:white; }
.sig-head { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
.sig-canvas { width:100%; height:220px; display:block; touch-action:none; background:#fff; }
.sig-clear { border:none; background:transparent; color:var(--danger); font-weight:800; }

.nav-row { display:flex; justify-content:space-between; gap:12px; margin-top:22px; }
.nav-row .primary, .nav-row .secondary { min-width:140px; }

.badge { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#eef2f6; color:#475467; font-size:12px; font-weight:800; }
.badge.green { background:var(--brand-soft); color:var(--brand-dark); }
.badge.red { background:var(--danger-soft); color:var(--danger); }
.badge.amber { background:var(--warn-soft); color:var(--warn); }

.complete { text-align:center; padding:46px 24px; }
.complete .tick { width:76px; height:76px; border-radius:24px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; font-size:38px; font-weight:900; margin:0 auto 18px; }
.complete h1 { font-size:38px; margin:0 0 8px; letter-spacing:-.04em; }
.complete p { color:var(--muted); font-size:17px; }

.admin-layout { display:grid; grid-template-columns:220px 1fr; gap:18px; }
.admin-nav { background:#4e5b63; color:white; border-radius:11px; padding:12px; height:max-content; position:sticky; top:112px; border-top:4px solid var(--brand); }
.admin-nav button { width:100%; text-align:left; border:none; background:transparent; color:#cbd5e1; padding:12px 14px; border-radius:12px; font-weight:750; }
.admin-nav button.active { background:rgba(255,255,255,.11); color:white; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.stat { background:white; border:1px solid var(--line); border-radius:18px; padding:18px; }
.stat .value { font-size:30px; font-weight:900; letter-spacing:-.04em; }
.stat .label { color:var(--muted); font-size:12px; font-weight:700; margin-top:4px; }
.module-row { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.module-row:last-child { border-bottom:none; }
.module-row h3 { margin:0 0 4px; font-size:17px; }
.module-row p { margin:0; color:var(--muted); font-size:13px; }
.toggle { width:48px; height:28px; border-radius:99px; border:none; background:#d0d5dd; position:relative; transition:.2s; }
.toggle::after { content:""; position:absolute; width:22px; height:22px; border-radius:50%; background:white; top:3px; left:3px; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.2s; }
.toggle.on { background:var(--brand); }
.toggle.on::after { left:23px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:16px; }
table { width:100%; border-collapse:collapse; min-width:780px; background:white; }
th, td { padding:13px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:13px; vertical-align:top; }
th { background:#f8fafc; color:#475467; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
tr:last-child td { border-bottom:none; }
.link-btn { border:none; background:none; padding:0; color:var(--brand-dark); font-weight:800; }
.filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.filters input, .filters select { border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:white; }

.modal-backdrop { position:fixed; inset:0; background:rgba(17,24,39,.48); display:grid; place-items:center; padding:20px; z-index:50; }
.modal { width:min(760px,100%); max-height:90vh; overflow:auto; background:white; border-radius:24px; padding:24px; box-shadow:0 30px 80px rgba(0,0,0,.25); }
.modal-head { display:flex; justify-content:space-between; gap:14px; align-items:start; margin-bottom:18px; }
.modal-head h2 { margin:0; }
.close { border:none; background:#f2f4f7; border-radius:10px; width:36px; height:36px; font-size:18px; }
.kv { display:grid; grid-template-columns:160px 1fr; gap:8px 14px; padding:10px 0; border-bottom:1px solid var(--line); }
.kv .k { color:var(--muted); font-weight:700; }
.signature-img { max-width:100%; border:1px solid var(--line); border-radius:12px; background:white; }

.pin-screen { width:min(440px,100%); margin:70px auto; }
.empty { text-align:center; padding:36px; color:var(--muted); }
.hr { height:1px; background:var(--line); margin:20px 0; }
.small { font-size:12px; color:var(--muted); }

@media (max-width: 800px) {
  .topbar { padding:14px 16px; }
  .brand-logo { width:180px; height:50px; max-width:60vw; }
  .brand-context { display:none; }
  .main { width:min(100% - 20px, 1120px); margin-top:18px; }
  .product-footer img { width:120px; }
  .hero { padding:30px 24px; border-radius:24px; }
  .hero { align-items:stretch; flex-direction:column; padding:24px; border-radius:11px; }
  .hero-status { min-width:0; }
  .home-actions, .grid-2, .grid-3, .choice-grid, .stat-grid { grid-template-columns:1fr; }
  .admin-layout { grid-template-columns:1fr; }
  .admin-nav { position:static; display:flex; overflow:auto; }
  .admin-nav button { min-width:max-content; }
  .nav-row { flex-direction:column-reverse; }
  .nav-row button { width:100%; }
  .kv { grid-template-columns:1fr; }
}