:root {
  --bg:#0f172a; --card:#0b1220; --card-border:#1f2937; --muted:#94a3b8; --text:#e5e7eb;
  --accent:#22c55e; --danger:#ef4444; --ok:#16a34a; --idle:#64748b; --input:#0f172a; --input-border:#334155;
}
:root[data-theme="light"] {
  --bg:#f6f7fb; --card:#ffffff; --card-border:#e5e7eb; --muted:#475569; --text:#0f172a;
  --accent:#16a34a; --danger:#dc2626; --ok:#15803d; --idle:#94a3b8; --input:#ffffff; --input-border:#d1d5db;
}

*{box-sizing:border-box} 
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--card-border);position:sticky;top:0;z-index:10}
.topbar .brand{font-weight:700;letter-spacing:.2px;font-size:18px}
.topbar .brand a{cursor:pointer}

main{padding:16px;max-width:1400px;margin:0 auto}

.grid{display:grid;gap:16px}
@media(min-width:900px){
  .grid.cols-4{grid-template-columns:repeat(4,1fr)}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .grid.cols-1{grid-template-columns:1fr}
}
@media(max-width:900px){ 
  .grid.cols-4{grid-template-columns:repeat(2,1fr)} 
  .grid.cols-3{grid-template-columns:repeat(2,1fr)} 
}
@media(max-width:640px){ 
  .grid.cols-4,.grid.cols-3{grid-template-columns:1fr} 
}

.card{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.06);animation:pop .2s ease}

.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(148,163,184,.08);border:1px solid var(--card-border);font-size:12px}
.badge.green{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#16a34a}
.badge.gray{background:rgba(148,163,184,.12);border-color:var(--card-border);color:var(--muted)}

.small{font-size:12px;color:var(--muted)}

.btn{background:var(--card);color:var(--text);border:1px solid var(--card-border);border-radius:12px;padding:10px 14px;cursor:pointer;transition:.18s;transform:translateZ(0);font-size:14px;display:inline-block;text-decoration:none}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(0,0,0,.08)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--accent);border:none;color:#052e16;font-weight:600}
.btn.small{padding:6px 10px;font-size:12px}
.btn.danger{background:var(--danger);color:#fff;border:none}

.input, select.input{width:100%;padding:12px;border-radius:12px;border:1px solid var(--input-border);background:var(--input);color:var(--text);font-size:14px}
.input:focus, select.input:focus{outline:none;border-color:var(--accent)}

.table-card{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:12px;transition:transform .18s ease, box-shadow .18s ease;cursor:pointer}
.table-card:hover{transform:scale(1.03);box-shadow:0 16px 28px rgba(0,0,0,.18)}
.table-card img{width:100%;height:140px;object-fit:cover;border-radius:12px;border:1px solid var(--card-border);background:#000}
.table-card h3{margin:8px 0 4px 0;font-size:16px}

.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
.sep{border-top:1px solid var(--card-border);margin:12px 0}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal.hidden{display:none}
.modal-body{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:20px;max-width:960px;width:100
%;max-height:90vh;overflow:auto;animation:slideUp .22s ease}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.modal-head h3{margin:0}

.invoice{background:var(--bg);border:1px solid var(--card-border);border-radius:12px;padding:12px;margin:8px 0}
.list{line-height:1.9}

/* Table */
table.table{width:100%;border-collapse:collapse;margin-top:8px}
.table th,.table td{padding:10px;border-bottom:1px solid var(--card-border);text-align:left}
.table th{font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.table-wrap{overflow:auto}
.table-wrap .table{min-width:720px}

/* Animations */
@keyframes pop{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
@keyframes slideUp{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--card);color:var(--text);border:1px solid var(--card-border);padding:12px 20px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.2);z-index:60;opacity:0;transition:opacity .2s;font-size:14px}
.toast.show{opacity:1}
.toast.hidden{display:none}

/* Mobile Navigation */
.nav-links{display:flex;gap:8px;align-items:center}
#btn-burger{display:none}
#mobile-menu{display:none;position:fixed;top:56px;left:0;right:0;background:var(--card);border-bottom:1px solid var(--card-border);padding:8px;z-index:999;box-shadow:0 4px 12px rgba(0,0,0,.1)}
#mobile-menu.open{display:block}
#mobile-menu a{display:block;padding:12px 16px;border-bottom:1px solid var(--card-border);text-decoration:none;color:var(--text)}
#mobile-menu a:hover{background:var(--bg)}

@media(max-width:900px){
  .nav-links{display:none}
  #btn-burger{display:inline-block}
}

/* Responsive adjustments */
@media(max-width:640px){
  .topbar{padding:10px 12px}
  .topbar .brand{font-size:16px}
  main{padding:12px}
  .card{padding:12px}
  .btn{padding:8px 12px;font-size:13px}
  .modal-body{padding:16px}
}

/* Login page specific */
.login{max-width:460px;margin:60px auto;background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:24px;animation:pop .25s ease}

/* Utility classes */
.text-center{text-align:center}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.mb-1{margin-bottom:8px}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}

/* Print styles */
@media print {
  .topbar, #mobile-menu, .btn, nav{display:none !important}
  body{background:#fff;color:#000}
  .card{border:1px solid #ddd;box-shadow:none}
}