:root{
  --brand:#D0021B; --brand-700:#a50116; --brand-50:#fff1f2;
  --ink:#111827; --muted:#6b7280; --bg:#ffffff; --card:#fff; --border:#e5e7eb;
  --ok:#10b981; --err:#ef4444; --radius:14px;
  --ring:0 0 0 4px rgba(208,2,27,.20);
  --shadow:0 10px 30px rgba(16,17,20,.08);
  --shadow-press:0 6px 18px rgba(16,17,20,.10);
  --shadow-hover:0 16px 36px rgba(16,17,20,.14);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink);background:var(--bg);
  background-image:radial-gradient(1200px 380px at 40% -10%, rgba(208,2,27,.06), transparent 60%)
}
.hero{background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff}
.hero-wrap{max-width:1100px;margin:0 auto;padding:28px 16px;display:flex;gap:16px;align-items:center;justify-content:space-between}
.logo{width:48px;height:48px;border-radius:12px;background:var(--brand-50);display:grid;place-items:center;color:var(--brand);font-weight:900;box-shadow:var(--shadow)}
.title-wrap{display:flex;gap:12px;align-items:center}
h1{margin:0;font-size:clamp(20px,2.2vw,28px)}
.badge{font-size:11px;border:1px solid #fff7;border-radius:999px;padding:4px 10px;background:#ffffff1a;color:#fff;letter-spacing:.2px}
.wrap{max-width:1100px;margin:16px auto;padding:0 16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:12px 0;box-shadow:var(--shadow)}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pill{font-size:12px;border:1px solid var(--border);border-radius:999px;padding:4px 10px;background:#f9fafb;color:#374151}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row-4{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:12px}
@media (max-width:800px){ .row,.row-4{grid-template-columns:1fr} }
label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px}
input[type="text"],input[type="date"],input[type="number"],input[type="password"],select,textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--ink);outline:none;transition:border-color .18s ease, box-shadow .18s ease}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:var(--ring)}
input[aria-invalid="true"], select[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 3px rgba(239,68,68,.15)}
.hint{font-size:12px;color:var(--muted);margin-top:6px}
/* Buttons */
.btn{appearance:none;border:none;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:10px;will-change:transform, box-shadow;transition:transform .14s ease, box-shadow .14s ease, background-color .18s ease, opacity .18s ease}
.btn:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:var(--ring)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-red{color:#fff;background:linear-gradient(180deg,#D0021B,var(--brand-700));box-shadow:var(--shadow)}
.btn-red:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover)}
.btn-red:active{transform:translateY(0);box-shadow:var(--shadow-press)}
.btn-ghost{background:#fff;border:1px solid var(--border);color:#111827;box-shadow:var(--shadow)}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover)}
.btn-ghost:active{transform:translateY(0);box-shadow:var(--shadow-press)}
.split{display:flex;gap:10px;flex-wrap:wrap}
.line-item{padding:12px;border:1px dashed var(--border);border-radius:12px;background:#fff}
.currency-prefix{display:flex;align-items:center;gap:6px}
#message[role="status"]{margin-top:10px;border-radius:12px;padding:14px}
#message.success{border:1px solid var(--ok);background:#ecfdf5;color:#065f46}
#message.error{border:1px solid var(--err);background:#fef2f2;color:#991b1b}
.signature{text-align:center;color:#6b7280;font-size:12px;margin:24px 0 40px}
.sep{border:none;border-top:1px solid var(--border);margin:14px 0}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn, input, select, textarea{transition:none !important}
}