:root{
  --bg:#F1F1EC;
  --panel:#FFFFFF;
  --ink:#151A23;
  --ink-soft:#5B6270;
  --line:#DDDCD3;
  --accent:#2A4CFF;
  --accent-ink:#FFFFFF;
  --good:#1E8A5B;
  --warn:#B3560B;
  --chip:#EDEEE6;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  min-height:100vh;
}
.num{font-family:'Consolas','Courier New',monospace;}
.app{display:flex;min-height:100vh;}
.sidebar{
  width:236px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--line);
  padding:24px 16px; display:flex; flex-direction:column; gap:4px;
}
.brand{font-weight:700; font-size:1.15rem; padding:4px 10px 6px;}
.brand span{display:block; font-weight:500; font-size:0.72rem; color:var(--ink-soft); margin-top:3px;}
.user-box{padding:8px 10px 20px; font-size:0.78rem; color:var(--ink-soft); border-bottom:1px solid var(--line); margin-bottom:12px;}
.user-box strong{color:var(--ink); display:block; font-size:0.86rem;}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  color:var(--ink-soft); font-size:0.92rem; font-weight:500; cursor:pointer; text-decoration:none;
}
.nav-item:hover{background:var(--chip); color:var(--ink);}
.nav-item.active{background:var(--accent); color:var(--accent-ink);}
.nav-bottom{margin-top:auto; padding-top:16px; border-top:1px solid var(--line);}
.main{flex:1; min-width:0; padding:28px 36px 60px; overflow-x:auto;}
.topbar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; gap:20px; flex-wrap:wrap;}
h1{font-size:1.5rem; margin:0 0 4px;}
.sub{color:var(--ink-soft); font-size:0.88rem; margin:0;}
.btn{
  background:var(--accent); color:var(--accent-ink); border:none; padding:10px 16px;
  border-radius:8px; font-weight:600; font-size:0.86rem; cursor:pointer; text-decoration:none; display:inline-block;
}
.btn:hover{opacity:0.9;}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
.btn.sm{padding:6px 11px; font-size:0.78rem;}
.btn.danger{background:transparent; color:#C1493D; border:1px solid #C1493D55;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:20px;}
.card-h{padding:16px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.card-h h3{margin:0; font-size:1rem;}
.card-body{padding:18px;}
table{width:100%; border-collapse:collapse; font-size:0.86rem;}
th{text-align:left; padding:9px 12px; color:var(--ink-soft); font-weight:600; border-bottom:1px solid var(--line); font-size:0.72rem; white-space:nowrap;}
td{padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;}
tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto;}
.pill{display:inline-block; padding:3px 9px; border-radius:20px; font-size:0.72rem; font-weight:600; background:var(--chip); color:var(--ink-soft);}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
label{display:block; font-size:0.76rem; font-weight:600; color:var(--ink-soft); margin-bottom:5px;}
input,select{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--ink); font-size:0.88rem;}
input:focus,select:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent;}
.field{margin-bottom:14px;}
.empty{padding:40px 20px; text-align:center; color:var(--ink-soft); font-size:0.88rem;}
.kpi{display:flex; flex-direction:column; gap:4px;}
.kpi .v{font-family:'Consolas',monospace; font-size:1.5rem; font-weight:600;}
.kpi .l{font-size:0.76rem; color:var(--ink-soft);}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:20px;}
.kpis .kpi{background:var(--panel); padding:16px 18px;}
.cart-row{display:grid; grid-template-columns:1.3fr 0.6fr 0.7fr 0.7fr 32px; gap:8px; align-items:center; margin-bottom:8px;}
.cart-head{display:grid; grid-template-columns:1.3fr 0.6fr 0.7fr 0.7fr 32px; gap:8px; font-size:0.7rem; color:var(--ink-soft); font-weight:600; margin-bottom:6px;}
.pay-row{display:grid; grid-template-columns:1.2fr 1fr 0.8fr 32px; gap:8px; align-items:end; margin-bottom:10px;}
.icon-btn{background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:1rem;}
.totals-box{background:var(--chip); border-radius:10px; padding:14px 16px; margin-top:14px;}
.totals-box .line{display:flex; justify-content:space-between; font-size:0.86rem; padding:3px 0;}
.totals-box .line.total{font-weight:700; font-size:1rem; border-top:1px solid var(--line); margin-top:6px; padding-top:8px;}
.totals-box .line.bad{color:var(--warn);}
.alert{padding:12px 16px; border-radius:8px; font-size:0.86rem; margin-bottom:16px;}
.alert.error{background:#FBEAEA; color:#B3231B; border:1px solid #E9B7B3;}
.alert.success{background:#E5F5EC; color:var(--good); border:1px solid #B9E3CB;}
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg);}
.login-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:32px; width:100%; max-width:360px;}
.login-card h1{text-align:center; margin-bottom:4px;}
.login-card p.sub{text-align:center; margin-bottom:22px;}
.instrument-tag{font-size:0.76rem; color:var(--ink-soft);}