:root { --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --brand:#2563eb; --brand-d:#1d4ed8; --bg:#f9fafb; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--bg); }

/* impersonation / sandbox banners */
.banner { padding:.6rem 1rem; font-size:.9rem; display:flex; gap:1rem; align-items:center; justify-content:center; flex-wrap:wrap; }
.banner.impersonate { background:#fef3c7; color:#92400e; border-bottom:1px solid #fcd34d; }
.banner.dummy { background:#e0e7ff; color:#3730a3; border-bottom:1px solid #a5b4fc; }
.banner a { color:inherit; font-weight:600; text-decoration:underline; }

header.top { background:#fff; border-bottom:1px solid var(--line); padding:.85rem 1.25rem; }
header.top .brand { font-weight:700; letter-spacing:.02em; }
.topbar { max-width:60rem; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.pnav { display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.pnav a { padding:.35rem .7rem; border-radius:.4rem; text-decoration:none; color:#374151; font-size:.9rem; }
.pnav a:hover { background:#f3f4f6; }
.pnav a.active { background:#eff6ff; color:var(--brand-d); font-weight:600; }
.pnav a.signout { color:var(--muted); }

/* data tables (billing / documents) */
.tbl { width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:.5rem .6rem; border-bottom:1px solid var(--line); }
.tbl td { padding:.6rem .6rem; border-bottom:1px solid var(--line); }
.tbl tr:last-child td { border-bottom:0; }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; }
.tbl a { color:var(--brand); text-decoration:none; } .tbl a:hover { text-decoration:underline; }
.st { display:inline-block; font-size:.7rem; padding:.1rem .5rem; border-radius:1rem; text-transform:capitalize; background:#f3f4f6; color:#4b5563; }
.st.paid,.st.completed { background:#dcfce7; color:#166534; }
.st.overdue,.st.failed,.st.chargeback { background:#fee2e2; color:#991b1b; }
.st.sent,.st.partially_paid,.st.pending,.st.processing { background:#fef9c3; color:#854d0e; }
.st.refunded,.st.partial_refund,.st.disputed { background:#e0e7ff; color:#3730a3; }
.st.open,.st.assigned,.st.scheduled,.st.in_progress,.st.pending_parts,.st.pending_vendor { background:#fef9c3; color:#854d0e; }
.st.closed { background:#dcfce7; color:#166534; }
.st.cancelled { background:#f3f4f6; color:#4b5563; }
.empty { color:var(--muted); padding:1rem .2rem; }
h2.sec { font-size:.95rem; margin:1.5rem 0 .5rem; }
main { max-width:44rem; margin:1.5rem auto; padding:0 1rem; }
h1 { font-size:1.35rem; margin:.25rem 0 1rem; }

.grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:40rem){ .grid { grid-template-columns:1fr 1fr; } }
.card { background:#fff; border:1px solid var(--line); border-radius:.6rem; padding:1.1rem 1.25rem; }
.card h2 { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 .5rem; }
.balance { font-size:2rem; font-weight:700; }
.balance.owed { color:#b91c1c; } .balance.zero { color:#065f46; }
.lease { padding:.6rem 0; border-top:1px solid var(--line); }
.lease:first-of-type { border-top:0; }
.lease .addr { font-weight:600; }
.lease .meta { color:var(--muted); font-size:.85rem; margin-top:.15rem; }
.pill { display:inline-block; font-size:.7rem; padding:.1rem .5rem; border-radius:1rem; background:#dcfce7; color:#166534; text-transform:capitalize; }
.pill.inactive { background:#f3f4f6; color:#4b5563; }
.muted { color:var(--muted); }
footer { max-width:44rem; margin:2rem auto; padding:0 1rem; color:var(--muted); font-size:.8rem; }

/* auth screens (login / forgot / reset) */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem; }
.auth-box { background:#fff; border:1px solid var(--line); border-radius:.6rem; padding:2rem; max-width:26rem; width:100%; }
.auth-box h1 { text-align:center; font-size:1.3rem; margin:.25rem 0 .25rem; }
.auth-box .sub { text-align:center; color:var(--muted); font-size:.9rem; margin:0 0 1.25rem; }
.field { margin-bottom:1rem; }
.field label { display:block; font-size:.82rem; color:#374151; margin-bottom:.3rem; font-weight:600; }
.field input, .field select, .field textarea { width:100%; padding:.55rem .7rem; border:1px solid var(--line); border-radius:.4rem; font-size:.95rem; font-family:inherit; background:#fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline:2px solid var(--brand); outline-offset:0; border-color:var(--brand); }
.field textarea { resize:vertical; min-height:4.5rem; }
.field .hint { font-size:.78rem; color:var(--muted); margin-top:.25rem; font-weight:400; }
.form-row { display:grid; grid-template-columns:1fr; gap:0 1rem; }
@media (min-width:34rem){ .form-row.two { grid-template-columns:1fr 1fr; } }
.btn { display:inline-block; padding:.55rem 1rem; border:1px solid var(--line); border-radius:.4rem; background:#fff; color:var(--ink); text-decoration:none; font-size:.9rem; cursor:pointer; }
.btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; width:100%; font-weight:600; }
.btn-primary:hover { background:var(--brand-d); }
.alert { padding:.6rem .8rem; border-radius:.4rem; font-size:.87rem; margin-bottom:1rem; }
.alert-error { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.alert-ok { background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }
.alert-info { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; }
.links { text-align:center; margin-top:1rem; font-size:.85rem; }
.links a { color:var(--brand); text-decoration:none; }
.links a:hover { text-decoration:underline; }