:root{
  --ink:#1a2332;
  --ink-soft:#4a5568;
  --line:#c9d2dc;
  --paper:#fbfbfa;
  --panel:#ffffff;
  --accent:#9e2a2b;
  --accent-soft:#f4e6e6;
  --field-bg:#f6f7f8;
  --mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  --serif: "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  line-height:1.45;
}
a{color:var(--accent);}

/* ---------- Auth pages ---------- */
.auth-body{display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--paper);}
.auth-card{
  background:var(--panel); border:1.5px solid var(--line); border-radius:8px; padding:36px 32px;
  width:100%; max-width:380px; box-shadow:0 2px 14px rgba(0,0,0,0.04);
}
.auth-card h1{font-family:var(--serif); font-size:22px; margin:0 0 4px;}
.auth-card .muted{color:var(--ink-soft); font-size:13px; margin:0 0 20px;}
.auth-card label{display:block; font-size:11px; font-family:var(--mono); letter-spacing:0.5px; text-transform:uppercase; color:var(--ink-soft); margin:14px 0 5px;}
.auth-card input{width:100%; padding:9px 11px; border:1.5px solid var(--line); border-radius:4px; background:var(--field-bg); font-size:14px;}
.auth-card button{width:100%; margin-top:18px; padding:10px; border:1.5px solid var(--ink); background:var(--ink); color:#fff; border-radius:4px; font-size:14px; cursor:pointer;}
.auth-card button:hover{background:#000;}
.auth-card .error{background:#fbeaea; color:#9e2a2b; padding:8px 10px; border-radius:4px; font-size:13px; margin-bottom:6px;}
.auth-card .success{background:#eaf6ec; color:#226b3a; padding:8px 10px; border-radius:4px; font-size:13px; margin-bottom:6px;}
.auth-card .notice{background:#fff7e6; color:#8a6100; padding:8px 10px; border-radius:4px; font-size:12.5px; margin-bottom:6px;}
.auth-card .small{font-size:12px;}

/* ---------- App shell ---------- */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:3px solid var(--ink); padding:16px 24px; background:var(--panel);
}
.topbar .brand{font-family:var(--serif); font-size:20px; font-weight:700;}
.topbar .brand .sub{display:block; font-family:var(--mono); font-size:10px; letter-spacing:1.3px; text-transform:uppercase; color:var(--ink-soft); font-weight:400; margin-top:2px;}
.topbar nav{display:flex; align-items:center; gap:10px;}
.topbar .user{font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-right:6px;}

.container{max-width:1080px; margin:0 auto; padding:24px 20px 80px;}

button, .btn{
  font-family:var(--sans); font-size:13px; border:1.5px solid var(--ink); background:var(--panel); color:var(--ink);
  padding:8px 14px; border-radius:4px; cursor:pointer; transition:background .15s,color .15s; text-decoration:none; display:inline-block;
}
button:hover, .btn:hover{background:var(--ink); color:#fff;}
button.primary, .btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
button.primary:hover, .btn.primary:hover{background:#7e2122;}
button.ghost, .btn.ghost{border-color:var(--line); color:var(--ink-soft);}
button.ghost:hover, .btn.ghost:hover{background:var(--field-bg); color:var(--ink);}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;
}

/* ---------- Procedure picker (home) ---------- */
.proc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px;}
@media (max-width:820px){.proc-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.proc-grid{grid-template-columns:1fr;}}
.proc-card{
  background:var(--panel); border:1.5px solid var(--line); border-radius:8px; padding:20px;
  text-decoration:none; color:var(--ink); transition:border-color .15s, transform .1s;
  display:flex; flex-direction:column; gap:6px;
}
.proc-card:hover{border-color:var(--accent); transform:translateY(-1px);}
.proc-card .eyebrow{font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--accent);}
.proc-card h3{font-family:var(--serif); font-size:17px; margin:0;}
.proc-card p{font-size:12.5px; color:var(--ink-soft); margin:0;}

.section-title{font-family:var(--serif); font-size:18px; margin:28px 0 12px; border-bottom:1px solid var(--line); padding-bottom:8px;}

/* ---------- List / table ---------- */
.toolbar{display:flex; gap:10px; margin-bottom:14px; align-items:center; flex-wrap:wrap;}
.toolbar input[type="search"]{flex:1; min-width:180px; padding:9px 12px; border:1.5px solid var(--line); border-radius:4px; font-size:14px; background:var(--panel);}
.toolbar select{padding:9px 10px; border:1.5px solid var(--line); border-radius:4px; background:var(--panel); font-size:13px;}

table.records{width:100%; border-collapse:collapse; font-size:13px; background:var(--panel);}
table.records thead th{text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:0.8px; text-transform:uppercase; color:var(--ink-soft); border-bottom:1.5px solid var(--ink); padding:9px 10px;}
table.records tbody td{padding:10px 10px; border-bottom:1px solid var(--line);}
table.records tbody tr:hover{background:var(--field-bg);}
.tag{display:inline-block; font-family:var(--mono); font-size:10.5px; padding:2px 7px; border-radius:2px; background:var(--accent-soft); color:var(--accent); letter-spacing:0.4px;}
.empty-state{text-align:center; padding:60px 20px; color:var(--ink-soft); border:1.5px dashed var(--line); border-radius:6px; background:var(--panel);}
.empty-state h3{font-family:var(--serif); color:var(--ink); margin-bottom:6px;}

/* ---------- Forms ---------- */
.panel{background:var(--panel); border:1.5px solid var(--line); border-radius:6px; padding:24px; margin-bottom:18px;}
.panel h2{font-family:var(--serif); font-size:16px; margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px;}
.panel h2 .idx{font-family:var(--mono); font-size:11px; color:var(--accent); border:1px solid var(--accent); border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex:none;}

.grid{display:grid; gap:14px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:720px){.grid.cols-3,.grid.cols-4{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr;}}

label{display:block; font-size:11px; font-family:var(--mono); letter-spacing:0.5px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:5px;}
input, select, textarea{width:100%; padding:8px 10px; border:1.5px solid var(--line); border-radius:4px; background:var(--field-bg); font-size:14px; color:var(--ink); font-family:var(--sans);}
textarea{resize:vertical; min-height:64px; font-family:var(--mono); font-size:13px;}
input:focus, select:focus, textarea:focus{background:#fff;}
.field.span-2{grid-column:span 2;}
.field.span-3{grid-column:span 3;}
.field.span-full{grid-column:1/-1;}

.radio-row{display:flex; gap:14px; flex-wrap:wrap; padding-top:4px;}
.radio-opt{display:flex; align-items:center; gap:6px; font-size:13.5px;}
.radio-opt input{width:auto;}

.repeat-block{border:1px solid var(--line); border-radius:4px; padding:12px; margin-bottom:10px; background:var(--field-bg); position:relative;}
.repeat-block .remove-row{position:absolute; top:8px; right:8px; font-size:11px; padding:4px 8px;}
.add-row-btn{font-size:12.5px; padding:7px 12px;}

.footer-actions{display:flex; justify-content:space-between; gap:10px; margin-top:6px; flex-wrap:wrap;}
.footer-actions .left, .footer-actions .right{display:flex; gap:8px; flex-wrap:wrap;}

.flash{padding:10px 14px; border-radius:4px; font-size:13px; margin-bottom:16px;}
.flash.success{background:#eaf6ec; color:#226b3a;}
.flash.error{background:#fbeaea; color:#9e2a2b;}

/* ---------- Print page ---------- */
.print-page{background:#fff; border:1.5px solid var(--line); padding:48px; max-width:780px; margin:0 auto; font-family:var(--serif); color:#111;}
.print-page .ph-row{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2.5px solid #111; padding-bottom:10px; margin-bottom:18px;}
.print-page .ph-title{font-size:20px; font-weight:700; letter-spacing:0.3px;}
.print-page .ph-sub{font-family:var(--mono); font-size:10px; letter-spacing:1px; color:#555; text-transform:uppercase; margin-top:3px;}
.print-page .ph-meta{text-align:right; font-family:var(--mono); font-size:11px; color:#333;}
.print-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px 18px; font-size:13px; margin-bottom:18px;}
.print-grid div b{display:block; font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.6px; color:#666; font-weight:600;}
.psec{margin-bottom:18px;}
.psec h3{font-size:12px; text-transform:uppercase; letter-spacing:1px; font-family:var(--mono); font-weight:600; color:#9e2a2b; border-bottom:1px solid #ddd; padding-bottom:5px; margin-bottom:8px;}
.psec table{width:100%; border-collapse:collapse; font-size:12.5px;}
.psec table th{text-align:left; font-family:var(--mono); font-size:10px; text-transform:uppercase; color:#666; padding:4px 6px; border-bottom:1px solid #ccc;}
.psec table td{padding:5px 6px; border-bottom:1px solid #eee; vertical-align:top;}
.psec p{margin:4px 0; font-size:13px; white-space:pre-wrap;}
.sign-row{display:flex; justify-content:space-between; margin-top:40px; padding-top:14px; border-top:1px solid #ccc; font-size:12px; font-family:var(--mono); color:#444;}

@media print{
  body{background:#fff;}
  .no-print{display:none !important;}
  .container{max-width:100%; padding:0;}
  .print-page{border:none; padding:0; max-width:100%;}
}