:root { --bg:#0b1220; --card:#0f172a; --muted:#94a3b8; --text:#e5e7eb; --line:#22304a; --primary:#22c55e; --primary2:#16a34a; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,#05070f,#0b1220);color:var(--text);}
a{color:inherit}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,18,32,.9);backdrop-filter: blur(8px);}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:38px;height:38px;border-radius:12px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#052e16;font-weight:800}
.brand-title{font-weight:800}
.brand-sub{font-size:12px;color:var(--muted)}
.right{display:flex;align-items:center;gap:10px}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;background:#111827;border:1px solid var(--line);color:var(--muted)}
.badge.on{border-color:rgba(34,197,94,.6);color:#bbf7d0}
.badge.off{border-color:rgba(239,68,68,.6);color:#fecaca}
.userpill{display:flex;gap:10px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#0b1020}
.container{max-width:1200px;margin:20px auto;padding:0 14px}
.card{background:rgba(15,23,42,.95);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 12px 50px rgba(0,0,0,.25)}
.narrow{max-width:420px;margin:30px auto}
.muted{color:var(--muted)}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 900px){.grid.two{grid-template-columns:1fr}}
.form{display:flex;flex-direction:column;gap:10px}
.form.compact label{margin-top:6px}
label{font-size:13px;color:var(--muted)}
.input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#0b1020;color:var(--text);outline:none}
.input.small{padding:8px 10px;border-radius:10px}
.row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.row.spread{justify-content:space-between}
.btn{cursor:pointer;border-radius:12px;border:1px solid var(--line);background:#0b1020;color:var(--text);padding:10px 12px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{border-color:#2b3b59}
.btn.primary{background:linear-gradient(180deg,var(--primary),var(--primary2));border-color:rgba(34,197,94,.4);color:#052e16;font-weight:800}
.btn.danger{background:linear-gradient(180deg,#fb7185,#ef4444);border-color:rgba(239,68,68,.5);color:#1f2937;font-weight:900}
.btn.small{padding:8px 10px;border-radius:10px;font-size:12px}
.inline{display:flex;align-items:center;gap:8px}
.lbl{display:block;margin-bottom:6px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:700px){.grid2{grid-template-columns:1fr}}
.link{color:#a7f3d0;text-decoration:none}
.link:hover{text-decoration:underline}
.table{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.thead,.trow{display:grid;gap:10px;align-items:center}
.table6 .thead,.table6 .trow{grid-template-columns: 1.2fr 1.6fr 1.2fr 1.2fr .8fr 1.2fr;}
.table8 .thead,.table8 .trow{grid-template-columns: 1.2fr 1.2fr 1.6fr 1.2fr 1.2fr .8fr 1.0fr .9fr;}
.thead{color:var(--muted);font-size:12px}
.trow{padding:10px;border:1px solid var(--line);border-radius:14px;background:#0b1020}
@media (max-width: 900px){
  .thead{display:none}
  .trow{grid-template-columns:1fr}
}
.messages{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.msg{padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:#0b1020}
.msg.success{border-color:rgba(34,197,94,.5)}
.msg.error{border-color:rgba(239,68,68,.5)}
.receipt{max-width:860px;margin:0 auto}
.receipt{font-size:var(--receipt-font,14px)}
.receipt-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.receipt-no{font-size:18px;font-weight:900;padding:10px 12px;border-radius:14px;background:#0b1020;border:1px dashed rgba(34,197,94,.5)}
.receipt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
@media (max-width: 700px){.receipt-grid{grid-template-columns:1fr}}
.k{font-size:12px;color:var(--muted)}
.v{font-size:15px;margin-top:2px}
.kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.kpi-box{padding:12px;border:1px solid var(--line);border-radius:14px;background:#0b1020}
.footer{padding:22px 16px;border-top:1px solid var(--line);color:var(--muted);text-align:center;margin-top:30px}
.hint{font-size:12px;color:var(--muted);margin-top:6px}
@media print{
  .topbar,.footer,.messages,.btn{display:none !important}
  body{background:#fff;color:#111}
  .card{box-shadow:none;border:none;background:#fff}
  .receipt-no{border:1px solid #111}
  .muted{color:#333}
}

/* Paper size helpers (used by receipt page) */
.paper-48{max-width:48mm}
.paper-58{max-width:58mm}
.paper-80{max-width:80mm}
.paper-88{max-width:88mm}
.paper-A4{max-width:210mm}

@media print{
  /* default width if JS did not set a class */
  .receipt{max-width:80mm}
}