:root{
  --bg:#0b0c0f;
  --card:#11131a;
  --muted:#9aa3b2;
  --text:#e8ecf3;
  --line:#202434;
  --btn:#2a6df4;
  --danger:#d64545;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
a{color:inherit;text-decoration:none}
code{background:#0f1220;border:1px solid var(--line);padding:2px 6px;border-radius:6px}

.wrap{max-width:980px;margin:0 auto;padding:18px}
.topbar{position:sticky;top:0;background:rgba(11,12,15,0.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:10}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand-title{font-weight:700;letter-spacing:0.2px}
.brand-sub{font-size:12px;color:var(--muted);margin-top:2px}

.nav{display:flex;gap:12px;align-items:center}
.nav a{padding:8px 10px;border-radius:10px;border:1px solid transparent}
.nav a:hover{border-color:var(--line);background:#0f1220}

.footer{color:var(--muted);font-size:12px;padding-top:30px;padding-bottom:30px}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.narrow{max-width:420px;margin:40px auto}

.pagehead{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:18px 0}
.pagehead h1{margin:0;font-size:22px}
.pagehead h2{margin:0;font-size:18px}

.right-actions{display:flex;gap:10px;align-items:center}
.inline{display:inline}

.form{display:flex;flex-direction:column;gap:10px}
.label{font-size:12px;color:var(--muted)}
.input,.textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0f1220;
  color:var(--text);
  outline:none;
}
.input:focus,.textarea:focus{border-color:#3357ff}

.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:720px){.grid-2{grid-template-columns:1fr}}

.row{display:grid;gap:12px;align-items:end}
.row-2{grid-template-columns:1fr auto}
.row-3{grid-template-columns:1fr 220px auto}
@media(max-width:720px){.row-3{grid-template-columns:1fr}.row-actions{justify-content:flex-start}}

.row-actions{display:flex;justify-content:flex-end}

.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background:var(--btn);
  color:white;
  font-weight:600;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.05)}
.btn-small{padding:8px 10px;font-size:12px;border-radius:10px}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-ghost:hover{background:#0f1220}
.btn-danger{background:var(--danger)}

.hr{border:0;border-top:1px solid var(--line);margin:14px 0}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.table th{font-size:12px;color:var(--muted);text-align:left}
.right{text-align:right}

.muted{color:var(--muted)}
.small{font-size:12px}
.pre{white-space:pre-wrap}

.alert{
  padding:10px 12px;
  border:1px solid #5a2730;
  background:#2a1216;
  border-radius:12px;
  color:#ffd6db;
}

.invoice-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.invoice-meta{min-width:240px;text-align:right}
@media(max-width:720px){
  .invoice-top{flex-direction:column}
  .invoice-meta{text-align:left;min-width:unset}
}

.totals{margin-top:16px;max-width:320px;margin-left:auto}
.totals-row{display:flex;justify-content:space-between;padding:6px 0}
.total{font-weight:800;border-top:1px solid var(--line);padding-top:10px;margin-top:6px}

.invoice-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* Price redaction rules:
   - screen: prices hidden unless .show-prices on body
   - print: always hidden
*/
.price-cell{display:none}
body.show-prices .price-cell{display:table-cell}
body.show-prices .totals.price-cell{display:block}

@media print{
  body{background:white;color:black}
  .topbar,.footer,.invoice-actions,.btn{display:none !important}
  .card{border:none}
  .price-cell{display:none !important}
}