:root{--black:#101214;--black2:#1c2023;--gold:#c89229;--gold2:#f0c45c;--text:#171717;--muted:#707070;--line:#e7d7af;--green:#19723b}
*{box-sizing:border-box} body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f3f3;color:var(--text)}
button,input,select,textarea{font:inherit}.hidden{display:none!important}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,#2a2418,#0e1012 55%)}
.auth-card{width:min(430px,100%);background:#fff;border-radius:24px;padding:28px;box-shadow:0 30px 80px #0008}
.auth-logo{display:block;width:150px;margin:0 auto 15px}.auth-card h1{text-align:center;margin:0 0 4px}.auth-card p{text-align:center;color:#666}
.field{display:grid;gap:6px;margin:12px 0}.field label{font-weight:700;font-size:13px}.field input,.field select,.field textarea{width:100%;border:1px solid #d9d9d9;border-radius:12px;padding:12px;background:#fff}
.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer;background:var(--black);color:#fff}.btn.gold{background:linear-gradient(135deg,#a87517,#e1b349);color:#111}.btn.soft{background:#f2f2f2;color:#222}.btn.danger{background:#7b1f1f}
.auth-actions{display:flex;gap:8px;margin-top:14px}.auth-actions .btn{flex:1}.msg{margin-top:12px;font-size:13px;padding:10px;border-radius:10px;background:#f7f7f7}
.topbar{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,#0d0f10,#1b1e21);color:#fff;padding:10px 16px;display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--gold)}
.brand-mini{width:54px;height:54px;object-fit:contain}.topbar h1{font-size:18px;margin:0;color:var(--gold2)}.topbar small{color:#ddd}.top-actions{margin-left:auto}
.layout{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 76px)}.sidebar{background:#141719;color:#fff;padding:16px 10px}
.nav-btn{width:100%;text-align:left;border:0;padding:12px 14px;margin:4px 0;border-radius:10px;background:transparent;color:#eee;cursor:pointer;font-weight:700}.nav-btn.active,.nav-btn:hover{background:linear-gradient(90deg,#8b6117,#c99532);color:#111}
.main{padding:22px;max-width:1300px;width:100%}.page-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}.page-head h2{margin:0}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card{background:#fff;border-radius:18px;padding:18px;box-shadow:0 6px 20px #0000000c;border:1px solid #eee}.metric b{display:block;font-size:26px;margin-top:8px}.metric span{color:#6f6f6f;font-size:13px}
.table-wrap{overflow:auto;background:#fff;border:1px solid #eee;border-radius:16px}table{border-collapse:collapse;width:100%;min-width:700px}th,td{padding:12px;border-bottom:1px solid #eee;text-align:left;font-size:13px}th{background:#17191a;color:var(--gold2)}
.badge{display:inline-block;padding:4px 8px;border-radius:99px;background:#eee;font-size:11px;font-weight:800;text-transform:uppercase}.badge.paid,.badge.completed,.badge.accepted{background:#dff3e6;color:#176739}.badge.unpaid,.badge.cancelled,.badge.declined{background:#f7dfdf;color:#8b2020}.badge.open,.badge.draft,.badge.sent{background:#fff1ca;color:#755513}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.modal{position:fixed;inset:0;background:#0009;z-index:40;display:grid;place-items:center;padding:18px}.modal-card{width:min(760px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:18px;padding:20px}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0}
.line-items{display:grid;gap:8px}.line-item{display:grid;grid-template-columns:2fr 1.3fr .55fr 1fr auto;gap:8px;align-items:end}.line-item input{width:100%;border:1px solid #ddd;border-radius:9px;padding:9px}.summary{margin-left:auto;width:min(330px,100%);margin-top:14px}.sumrow{display:flex;justify-content:space-between;padding:7px 0}.sumrow.total{font-weight:900;border-top:2px solid var(--gold);font-size:18px}.notice{background:#fff5d9;border-left:4px solid var(--gold);padding:10px 12px;border-radius:8px;margin:12px 0;font-size:13px}
@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{display:flex;overflow:auto;padding:8px;position:sticky;top:76px;z-index:15}.nav-btn{white-space:nowrap;width:auto}.cards{grid-template-columns:1fr 1fr}.main{padding:14px}.line-item{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards,.grid2{grid-template-columns:1fr}.topbar small{display:none}.brand-mini{width:44px;height:44px}.main{padding:10px}.auth-card{padding:20px}}