:root{
  --bg:#0e1114; --panel:#161b21; --panel-2:#1b2128; --line:#2a323c;
  --ink:#e8edf2; --muted:#8c97a3; --accent:#5aa9ff; --accent-ink:#06243f;
  --good:#54d08a; --warn:#ffcf6b; --danger:#ff6b6b;
  --radius:10px; --f: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:0}
h2{font-size:1.05rem;margin:1.4rem 0 .6rem;color:#cdd6df}
b{font-weight:700}
.muted{color:var(--muted)}

/* top bar */
.topbar{display:flex;align-items:center;gap:1.2rem;padding:.6rem 1.2rem;background:linear-gradient(180deg,#1a2129,#12171c);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--ink);font-weight:600}
.brand b{color:var(--accent)}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:.2rem;flex:1;flex-wrap:wrap}
.nav a{color:var(--muted);padding:.35rem .7rem;border-radius:7px}
.nav a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.nav a.on{background:var(--panel-2);color:var(--ink)}
.who{color:var(--muted);font-size:.85rem}
.logout-form{display:inline}
.linkbtn{background:none;border:none;color:var(--accent);font:inherit;cursor:pointer;padding:0}
.linkbtn:hover{text-decoration:underline}
.clickrow{cursor:pointer}
.attach{display:inline-flex;align-items:center;gap:.4rem;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:.5rem .8rem;margin:.6rem 0;font-size:.9rem}
.attach b{color:var(--ink)}
.usage{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;margin:1rem 0}
.usage-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem;flex-wrap:wrap}
.usage table.list{margin-top:.4rem}
.usage .r{text-align:right}
code.link{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:.3rem .5rem;font-size:.82rem;word-break:break-all;color:var(--accent)}

.wrap{max-width:960px;margin:1.4rem auto;padding:0 1.2rem}
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}

/* cards */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-bottom:1.2rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;text-align:center;color:var(--ink)}
.card:hover{border-color:var(--accent);text-decoration:none}
.card .num{font-size:1.6rem;font-weight:700}
.card .lbl{color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}

/* buttons */
.btn{display:inline-block;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);padding:.5rem .9rem;border-radius:8px;cursor:pointer;font:inherit;font-size:.92rem}
.btn:hover{border-color:#3a4552;text-decoration:none}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.btn.danger{color:var(--danger);border-color:#432a2e}
.btn.danger:hover{background:#2a1a1d}
.btn.small{padding:.3rem .6rem;font-size:.82rem}
.row-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}

/* tables */
table.list,table.items{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.list th,table.list td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem}
table.list th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
table.list tr.clickrow:hover td{background:var(--panel-2)}

/* forms */
.form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;max-width:720px}
.form.compact{max-width:720px;margin-bottom:1rem}
.form label{display:block;margin:.6rem 0;color:var(--muted);font-size:.85rem}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:.25rem;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:.5rem .6rem;font:inherit}
.form input:focus,.form select,.form textarea:focus{outline:none;border-color:var(--accent)}
.form textarea{resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
select{color-scheme:dark}
option{background:#14181d}
.fields label{margin:.7rem 0}

/* invoice item editor */
table.items th,table.items td{padding:.4rem;border-bottom:1px solid var(--line)}
table.items input{margin-top:0}
.w-qty{width:80px}.w-price{width:120px}.w-amt{width:110px;text-align:right}
td.amt{text-align:right;color:var(--muted);white-space:nowrap}
.item .rm{background:none;border:none;color:var(--danger);font-size:1.2rem;cursor:pointer;line-height:1}
.item input.qty,.item input.price{text-align:right}

.meta{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:.7rem .9rem;margin-bottom:1rem;font-size:.92rem}
.inline{display:inline}
form.inline.inline{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:.6rem 0}

/* pills */
.pill{display:inline-block;padding:.1rem .55rem;border-radius:20px;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--line)}
.pill.draft{color:var(--muted)}
.pill.sent{color:var(--warn);border-color:#4a3f26}
.pill.paid{color:var(--good);border-color:#26402f}

.ok{background:#16281d;border:1px solid #26402f;color:var(--good);padding:.6rem .9rem;border-radius:8px;margin-bottom:1rem}
.warn{background:#2a2412;border:1px solid #4a3f26;color:var(--warn);padding:.6rem .9rem;border-radius:8px;margin-bottom:1rem}
.error{background:#2a1a1d;border:1px solid #432a2e;color:var(--danger);padding:.5rem .8rem;border-radius:8px;margin:.6rem 0}

/* preview iframe */
.preview{width:100%;height:760px;border:1px solid var(--line);border-radius:8px;background:#fff;margin-top:.5rem}
.preview.tall{height:1000px}

/* login */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:2rem;width:340px;text-align:center}
.login-card h1{font-size:1.3rem;margin:.6rem 0 0}
.login-card p{margin:.2rem 0 1rem}
.login-card label{display:block;text-align:left;color:var(--muted);font-size:.85rem;margin:.6rem 0}
.login-card input{display:block;width:100%;margin-top:.25rem;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:.55rem .6rem;font:inherit}
.login-card button{width:100%;margin-top:1rem;background:var(--accent);color:var(--accent-ink);border:none;padding:.6rem;border-radius:8px;font:inherit;font-weight:600;cursor:pointer}

@media(max-width:720px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:1fr}
  .wrap{margin:1rem auto}
}