:root{
  --ink:#0f172a; --muted:#475569; --line:#e2e8f0; --bg:#f8fafc; --card:#fff;
  --brand:#0f766e; --brand-2:#14b8a6; --brand-soft:#ccfbf1; --accent:#4338ca;
  --ok:#15803d; --ok-soft:#dcfce7; --warn:#b45309; --warn-soft:#fef3c7; --bad:#b91c1c; --bad-soft:#fee2e2;
  --radius:14px; --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--brand)} a:hover{color:#115e59}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:820px}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
/* header */
#site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.header-inner{display:flex;align-items:center;gap:16px;min-height:62px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
#site-header nav{margin-left:auto}
#nav-list{list-style:none;display:flex;gap:4px;margin:0;padding:0;flex-wrap:wrap}
#nav-list a{display:block;padding:8px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:.95rem}
#nav-list a:hover{background:var(--bg);color:var(--ink)}
#nav-list a[aria-current=page]{color:var(--brand);background:var(--brand-soft);font-weight:600}
.nav-toggle{display:none;margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;font:inherit}
@media (max-width:860px){
  .nav-toggle{display:block}
  #site-header nav{width:100%;margin:0}
  #nav-list{display:none;flex-direction:column;padding-bottom:10px}
  #nav-list.open{display:flex}
}
/* footer */
#site-footer{border-top:1px solid var(--line);background:#fff;margin-top:64px;padding:28px 0;color:var(--muted)}
.footer-links a{color:var(--muted)}
.small{font-size:.875rem;color:var(--muted)}
/* hero */
.hero{background:linear-gradient(135deg,#0f766e 0%,#115e59 45%,#312e81 100%);color:#fff;padding:64px 0 72px}
.hero h1{font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.12;margin:0 0 14px;letter-spacing:-.02em;max-width:760px}
.hero p.lead{font-size:1.15rem;max-width:680px;color:#d1fae5;margin:0 0 26px}
.hero .badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.badge{display:inline-block;font-size:.8rem;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25)}
.page-head{padding:36px 0 8px}
.page-head h1{margin:0 0 6px;font-size:clamp(1.6rem,3.4vw,2.2rem);letter-spacing:-.015em}
.page-head p{margin:0;color:var(--muted);max-width:760px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:10px 16px;font-family:inherit;font-weight:600;font-size:.95rem;line-height:1.2;cursor:pointer;text-decoration:none;background:var(--brand);color:#fff}
.btn:hover{background:#115e59;color:#fff}
.btn.secondary{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.secondary:hover{background:var(--bg)}
.btn.light{background:#fff;color:var(--brand)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.danger{background:#fff;color:var(--bad);border-color:#fecaca}
.btn.small{padding:6px 10px;font-size:.85rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* cards & grid */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card h2,.card h3{margin-top:0}
.card .icon{width:40px;height:40px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;margin-bottom:10px}
.tool-card{display:flex;flex-direction:column}
.tool-card p{flex:1}
section{padding:36px 0}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 18px 62px;position:relative}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700}
.kit{background:linear-gradient(180deg,#eef2ff,#fff);border-color:#c7d2fe}
.pill{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand)}
.pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.indigo{background:#e0e7ff;color:var(--accent)}
/* notices */
.notice{border-radius:12px;padding:14px 16px;border:1px solid var(--line);background:#fff;margin:14px 0}
.notice.info{background:#f0fdfa;border-color:#99f6e4}
.notice.warn{background:var(--warn-soft);border-color:#fcd34d}
.notice.bad{background:var(--bad-soft);border-color:#fca5a5}
.notice.ok{background:var(--ok-soft);border-color:#86efac}
.notice p{margin:.2em 0}
/* forms */
form .row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:14px}
label{display:block;font-weight:600;font-size:.92rem;margin-bottom:4px}
.hint{font-weight:400;color:var(--muted);font-size:.83rem}
input[type=text],input[type=number],input[type=date],input[type=month],select,textarea{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid #99f6e4;border-color:var(--brand)}
textarea{min-height:70px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:8px 0}
.check input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--brand)}
fieldset{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 16px}
legend{font-weight:700;padding:0 6px}
.err{color:var(--bad);font-size:.9rem;margin:6px 0 0}
.errors{background:var(--bad-soft);border:1px solid #fca5a5;border-radius:10px;padding:10px 14px;color:var(--bad);margin-bottom:14px}
.errors ul{margin:4px 0 0 18px;padding:0}
/* tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.items-table input{padding:7px 8px;border-radius:8px}
.items-table td{padding:4px}
.total-row td{font-weight:700;border-bottom:0}
/* request view */
.status-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.fp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.04em;background:#f1f5f9;border-radius:8px;padding:2px 8px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:500}
.approvals{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:14px 0}
.ap{border:2px dashed #cbd5e1;border-radius:12px;padding:14px 16px;background:#fff}
.ap.done{border-style:solid;border-color:#86efac;background:#f0fdf4}
.ap.declined{border-style:solid;border-color:#fca5a5;background:#fef2f2}
.ap.invalid{border-style:solid;border-color:#fca5a5;background:#fff1f2}
.ap h4{margin:0 0 6px}
.sig{font-family:"Segoe Script","Brush Script MT","Snell Roundhand","URW Chancery L",cursive;font-size:1.5rem;line-height:1.2;color:#1e3a8a}
.linkbox{display:flex;gap:8px;flex-wrap:wrap}
.linkbox input{flex:1;min-width:200px;font-family:ui-monospace,monospace;font-size:.82rem}
.progress{height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.progress > span{display:block;height:100%;background:var(--brand);width:0;transition:width .2s}
/* checklists */
.cl-section{margin-bottom:18px}
.cl-section h2{font-size:1.15rem;margin:0 0 6px}
.cl{list-style:none;margin:0;padding:0}
.cl li{display:grid;grid-template-columns:28px 1fr;gap:6px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
.cl li input[type=checkbox]{width:20px;height:20px;margin-top:3px;accent-color:var(--brand)}
.cl li.done .cl-text{color:var(--muted);text-decoration:line-through;text-decoration-color:#94a3b8}
.cl li .cl-note{grid-column:2;font-size:.88rem;padding:6px 8px}
/* states */
.state{scroll-margin-top:80px}
.state h3{margin:0 0 4px}
.state ul{margin:8px 0 0;padding-left:18px}
.verified{font-size:.8rem;color:var(--muted)}
.soon{display:flex;flex-wrap:wrap;gap:6px}
.soon span{font-size:.82rem;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted)}
/* print doc */
.print-only{display:none}
.doc{background:#fff;color:#000;font-size:12.5px;line-height:1.45}
.doc h1{font-size:20px;margin:0}
.doc .doc-head{display:flex;justify-content:space-between;gap:12px;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:10px}
.doc table th,.doc table td{border:1px solid #888;padding:4px 6px;color:#000}
.doc table th{font-size:11px}
.doc .sigblocks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.doc .sigblock{border:1.5px solid #000;padding:8px 10px;min-height:150px}
.doc .line{border-bottom:1px solid #000;min-height:22px;margin:4px 0 8px}
.doc .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:#333}
.doc .box{border:1px solid #000;padding:8px 10px;margin-top:12px}
.doc .foot{margin-top:12px;font-size:10.5px;color:#333;border-top:1px solid #999;padding-top:6px}
.doc .stamp{display:inline-block;border:2px solid #000;padding:2px 8px;font-weight:800;letter-spacing:.06em}
.doc .cb{display:inline-block;width:12px;height:12px;border:1px solid #000;margin-right:6px;vertical-align:-2px;text-align:center;line-height:10px;font-size:11px}
.preview{border:1px solid var(--line);border-radius:12px;padding:24px;background:#fff;box-shadow:var(--shadow);overflow-x:auto}
@media print{
  @page{margin:14mm}
  body{background:#fff}
  #site-header,#site-footer,.no-print,.page-head,.hero{display:none!important}
  .print-only{display:block!important}
  .preview{border:0;box-shadow:none;padding:0}
  a{color:#000;text-decoration:none}
  .cl li{break-inside:avoid}
  .card{box-shadow:none;border:0;padding:0}
}
fieldset{min-width:0}
@media (max-width:640px){
  .items-table thead{display:none}
  .items-table, .items-table tbody, .items-table tfoot{display:block;width:100%}
  .items-table tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:6px;border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px;background:#fff}
  .items-table tbody td{display:block;padding:0;border:0}
  .items-table tbody td:has(input[name=i_x]), .items-table tbody td:has(input[data-k=x]){grid-column:1 / -1}
  .items-table tfoot tr{display:flex;justify-content:space-between}
  .items-table tfoot td{border:0}
  .items-table tfoot td:empty{display:none}
}
@media (max-width:640px){
  .items-view thead{display:none}
  .items-view, .items-view tbody, .items-view tfoot{display:block;width:100%}
  .items-view tbody tr{display:block;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px}
  .items-view tbody td{display:flex;justify-content:space-between;gap:12px;border:0;padding:2px 0;text-align:right}
  .items-view tbody td::before{content:attr(data-l);color:var(--muted);font-size:.8rem;text-align:left}
  .items-view tfoot tr{display:flex;justify-content:space-between}
  .items-view tfoot td{border:0}
  .kv{grid-template-columns:1fr}
  .kv dt{font-size:.8rem;margin-top:4px}
}
.state-jump{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0 16px}
.state-jump a{display:inline-block;min-width:38px;text-align:center;padding:3px 6px;border:1px solid var(--line);border-radius:8px;background:#fff;text-decoration:none;font-weight:600}
.state-jump a:hover{background:var(--brand-soft)}
.state{scroll-margin-top:80px}
