:root{
  --bg:#f8f5fb;
  --card:#ffffff;
  --text:#1d1630;
  --muted:#756987;
  --line:#e7def2;
  --primary:#6d28d9;
  --primary2:#4c1d95;
  --accent:#f6c500;
  --accent2:#fff4b3;
  --danger:#b91c1c;
  --warning:#a16207;
  --ok:#15803d;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--primary);text-decoration:none}
.topbar{background:linear-gradient(90deg,#271044,#4c1d95 58%,#6d28d9);color:#fff;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 2px 12px rgba(39,16,68,.25);border-bottom:4px solid var(--accent)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.brand img{height:44px;max-width:180px;object-fit:contain;background:white;border-radius:8px;padding:4px;box-shadow:0 1px 6px rgba(0,0,0,.15)}
.topbar nav{display:flex;gap:10px;flex-wrap:wrap}
.topbar nav a{color:#fff9d6;padding:8px 10px;border-radius:8px;font-weight:700}
.topbar nav a.active,.topbar nav a:hover{background:rgba(246,197,0,.18);color:#fff;border:1px solid rgba(246,197,0,.35)}
.container{max-width:1180px;margin:26px auto;padding:0 16px}
.footer{text-align:center;color:var(--muted);font-size:13px;padding:28px}
.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 6px 18px rgba(76,29,149,.06)}
.hero{background:linear-gradient(135deg,#4c1d95,#6d28d9 60%,#8b5cf6);color:white;border-radius:20px;padding:28px;border-bottom:5px solid var(--accent)}
.hero p{color:#fff8d1}.muted{color:var(--muted)}.small{font-size:13px}.big{font-size:32px;font-weight:900}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--primary);color:#fff!important;padding:10px 14px;border-radius:10px;font-weight:800;cursor:pointer;box-shadow:0 2px 7px rgba(109,40,217,.18)}
.btn:hover{background:var(--primary2)}.btn.secondary{background:#3b2a5f}.btn.light{background:#fff4b3;color:#3b2465!important;border:1px solid #f6c500}.btn.danger{background:var(--danger)}.btn.warning{background:var(--warning)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.status{display:inline-flex;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:800;border:1px solid var(--line);text-transform:uppercase}
.status.paid{background:#dcfce7;color:#166534;border-color:#bbf7d0}.status.partial{background:#fef9c3;color:#854d0e;border-color:#fde68a}.status.unpaid{background:#fee2e2;color:#991b1b;border-color:#fecaca}.status.track{background:#ede9fe;color:#4c1d95;border-color:#ddd6fe}
table{width:100%;border-collapse:collapse;background:white}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}tr:hover td{background:#fbf8ff}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid #d8caeb;border-radius:10px;background:#fff;font:inherit}input:focus,select:focus,textarea:focus{outline:2px solid rgba(246,197,0,.45);border-color:#6d28d9}
label{display:block;font-weight:800;margin:12px 0 6px}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.login-box{max-width:430px;margin:56px auto}
.invoice-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:3px solid var(--accent);padding-bottom:16px;margin-bottom:18px}.invoice-brand p{margin-top:10px}.invoice-logo{font-size:28px;font-weight:900;letter-spacing:.08em;color:var(--primary)}.invoice-logo-img{max-height:82px;max-width:260px;object-fit:contain}.invoice-title{text-align:right}.invoice-title h1{color:var(--primary);letter-spacing:.08em}.totals{max-width:420px;margin-left:auto}.totals td{padding:8px}
.timeline{position:relative;padding-left:26px}.timeline:before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:2px;background:#d8caeb}.event{position:relative;margin:0 0 16px;background:white;border:1px solid var(--line);border-radius:12px;padding:12px}.event:before{content:"";position:absolute;left:-23px;top:16px;width:12px;height:12px;background:var(--accent);border-radius:50%;border:2px solid white;box-shadow:0 0 0 2px var(--primary)}
.public-search{max-width:760px;margin:0 auto}.searchbar{display:flex;gap:10px}.searchbar input{font-size:18px;padding:15px}.print-only{display:none}.notice{padding:12px 14px;border-radius:12px;background:#fffbea;border:1px solid #fde68a;color:#713f12;margin-bottom:14px}.error{padding:12px 14px;border-radius:12px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;margin-bottom:14px}
@media(max-width:780px){.topbar{display:block}.topbar nav{margin-top:12px}.grid-2,.grid-3,.form-row{grid-template-columns:1fr}.invoice-head{display:block}.invoice-title{text-align:left}.searchbar{display:block}.searchbar .btn{margin-top:10px;width:100%}}
@media print{body{background:#fff}.topbar,.footer,.no-print,.actions{display:none!important}.container{max-width:none;margin:0;padding:0}.card{box-shadow:none;border:0;border-radius:0;padding:0}.print-only{display:block}table th,table td{border-bottom:1px solid #ddd}.invoice-head{display:flex}.invoice-title{text-align:right}.invoice-logo-img{max-height:70px}}