:root{--violet:#7c3aed;--red:#ef4444;--green:#16a34a;--blue:#0284c7;--orange:#f97316;--yellow:#facc15}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(135deg,#090716,#1b1034);color:white}
header{padding:14px 18px;background:#0d0920;display:flex;align-items:center;gap:15px;border-bottom:1px solid #ffffff25;position:sticky;top:0;z-index:5}
.logo{width:70px;height:70px;object-fit:contain;background:white;border-radius:16px;padding:5px}h1{margin:0;font-size:30px}.muted{color:#c7c0df}.version{margin-left:auto;text-align:right;font-size:12px;color:#c7c0df}
main{padding:16px;max-width:1300px;margin:auto}.screen{display:none}.screen.on{display:block}.banner{background:linear-gradient(135deg,#4c1d95,#7c3aed);border-radius:22px;padding:18px;margin-bottom:14px}.caisseBanner{display:flex;justify-content:space-between;align-items:center;gap:14px}.salesBox{text-align:right;background:#00000022;border-radius:18px;padding:12px 16px;min-width:180px}.salesLabel{font-size:13px;color:#e9ddff}.salesAmount{font-size:30px;font-weight:900;color:#facc15}.salesCount{font-size:13px;color:#e9ddff}
.card{background:#ffffff12;border:1px solid #ffffff25;border-radius:24px;padding:16px;margin-bottom:14px}.home{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
button{border:0;border-radius:16px;color:white;font-weight:900;padding:14px;cursor:pointer;background:#30264f}button:active{transform:scale(.98)}
.tile{background:linear-gradient(135deg,#151126,#241a42);min-height:120px;text-align:left;padding:24px}.tile b{font-size:28px;display:block;margin-bottom:8px}.tile span{color:#c7c0df}
input,select,textarea{width:100%;padding:14px;border-radius:14px;border:1px solid #ffffff30;background:#1c1730;color:white;font-size:18px;margin:6px 0 14px}
label{font-weight:900;color:#c7c0df}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.primary{background:var(--violet)}.danger{background:var(--red)}
.layout{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.tab{background:#30264f;border-radius:999px}.tab.active{background:var(--violet)}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.product{position:relative;min-height:118px;text-align:left;box-shadow:0 8px 18px #0008}
.product .name{font-size:21px;line-height:1.05;display:block;padding-right:40px}.product .price{font-size:30px;display:block;margin-top:20px}
.buvette{background:linear-gradient(135deg,#2563eb,#7c3aed)}.resto{background:linear-gradient(135deg,#c2410c,#f97316)}.consigne{background:linear-gradient(135deg,#374151,#111827)}.negatif{background:linear-gradient(135deg,#991b1b,#ef4444)}
.badge{position:absolute;top:9px;right:9px;background:var(--red);border-radius:999px;min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:19px}
.cartLine{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;border-bottom:1px solid #ffffff22;padding:10px 0}.smallBtn{background:#342b55;padding:8px 11px}.remove{background:var(--red);padding:8px 11px}
.totalBox{position:sticky;bottom:0;background:#090716ee;border-top:1px solid #ffffff25;margin:14px -16px -16px;padding:14px;border-radius:0 0 24px 24px}.totalRow{display:flex;justify-content:space-between;align-items:center;font-size:24px;font-weight:900}.amount{font-size:42px;color:var(--yellow)}
.payments{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.cash{background:var(--green)}.cardpay{background:var(--blue)}.check{background:var(--orange)}
.modal{position:fixed;inset:0;background:#000b;display:none;align-items:center;justify-content:center;padding:14px;z-index:20}.modal.show{display:flex}.box{background:#141126;border:1px solid #ffffff25;border-radius:24px;padding:18px;width:min(720px,100%);max-height:92vh;overflow:auto}.box .stickyBottom{position:sticky;bottom:-18px;background:#141126;padding-top:10px}
.bigQty{display:flex;gap:16px;align-items:center;justify-content:center;font-size:38px;margin:18px 0}footer{text-align:center;color:#8d86a6;font-size:12px;padding:10px}
@media(max-width:900px){.layout{grid-template-columns:1fr}.products{grid-template-columns:repeat(2,1fr)}.home{grid-template-columns:1fr}}
@media(max-width:560px){.caisseBanner{display:block}.salesBox{text-align:left;margin-top:12px;min-width:0}main{padding:10px}.products,.actions,.payments{grid-template-columns:1fr}.logo{width:55px;height:55px}h1{font-size:23px}.version{display:none}.amount{font-size:34px}.box{align-self:stretch;width:100%}}