*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:linear-gradient(135deg,#0ea5e9,#facc15);min-height:100vh;padding:18px;color:#17324d}.app{max-width:1200px;margin:auto;background:rgba(255,255,255,.92);border-radius:24px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.2)}h1{text-align:center;margin-top:0}.hidden{display:none!important}input,select,button{width:100%;padding:12px;border:0;border-radius:14px;margin:6px 0;font-size:16px}button{background:#0ea5e9;color:white;font-weight:bold;cursor:pointer}.success{background:#22c55e}.danger{background:#ef4444}.ghost{background:#e0f2fe;color:#075985}.warning{background:#f97316}.dark{background:#0f172a}.card,.product,.cart,.stat{background:white;border-radius:18px;padding:16px;box-shadow:0 10px 25px rgba(0,0,0,.1)}.grid,.stats,.actions,.paygrid,.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:16px 0}.tabs button,.cat button{background:#e0f2fe;color:#075985}.tabs button.active,.cat button.active{background:#0ea5e9;color:white}.tab{display:none}.tab.active{display:block}.cat{display:flex;gap:8px;overflow:auto;margin:12px 0}.cat button{min-width:110px}.product{text-align:center;cursor:pointer;position:relative}.product:hover{transform:translateY(-2px)}.product.out{opacity:.45;cursor:not-allowed}.star{position:absolute;right:12px;top:10px}.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#ecfdf5;color:#065f46;font-weight:bold;font-size:13px}.low{background:#fff7ed!important;color:#9a3412!important}.outb{background:#fef2f2!important;color:#991b1b!important}.cartrow{display:grid;grid-template-columns:1fr 40px 40px 40px;gap:8px;align-items:center;border-bottom:1px solid #ddd;padding:8px 0}.cartrow button{padding:8px;margin:0}.total{text-align:center;font-size:34px;font-weight:bold;color:#0f4c81;margin:18px}.paymethod{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}.paymethod button{background:#e0f2fe;color:#075985}.paymethod button.active{background:#22c55e;color:white}.stat{text-align:center}.stat strong{display:block;font-size:28px;color:#0f4c81}.wrap{overflow:auto}table{width:100%;min-width:900px;border-collapse:collapse;background:white;border-radius:14px;overflow:hidden;margin-top:10px}th,td{padding:9px;border-bottom:1px solid #ddd;text-align:left;vertical-align:top}th{background:#0ea5e9;color:white}td input,td select{padding:7px;margin:0}.notice{background:#fff7ed;color:#9a3412;padding:12px;border-radius:14px;margin:8px 0;font-weight:bold}.barrow{display:grid;grid-template-columns:70px 1fr 80px;gap:8px;align-items:center;margin:8px 0}.barbg{height:22px;background:#e0f2fe;border-radius:99px;overflow:hidden}.barfill{height:100%;background:linear-gradient(135deg,#0ea5e9,#22c55e)}.modal{position:fixed;inset:0;background:rgba(15,23,42,.75);display:grid;place-items:center;padding:20px;z-index:99}.modalcard{background:white;border-radius:24px;padding:22px;text-align:center;max-width:430px;width:100%}.modalcard img{width:270px;max-width:100%;border:8px solid #f8fafc;border-radius:16px}.small{font-size:13px;color:#64748b;word-break:break-all}.msg{min-height:22px;font-weight:bold}@media(max-width:650px){body{padding:8px}.app{padding:12px}.cartrow{grid-template-columns:1fr 36px 36px 36px}table{font-size:14px}}

/* POS V3 meldingen */
.site-notice{
  max-width:1200px;
  margin:0 auto 14px;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:14px;
  align-items:center;
  background:linear-gradient(135deg,#fff7ed,#ffedd5);
  color:#9a3412;
  border:1px solid #fed7aa;
  border-radius:22px;
  padding:15px;
  box-shadow:0 12px 28px rgba(154,52,18,.14);
}
.site-notice.error{background:linear-gradient(135deg,#fef2f2,#fee2e2);color:#991b1b;border-color:#fecaca}
.site-notice.info{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1e3a8a;border-color:#bfdbfe}
.site-notice.success{background:linear-gradient(135deg,#ecfdf5,#dcfce7);color:#065f46;border-color:#bbf7d0}
.site-notice-icon{
  width:50px;height:50px;border-radius:16px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.65);
  font-size:28px;
}
.site-notice p{margin:5px 0 0;line-height:1.4}
.maintenance-screen{
  position:fixed;inset:0;z-index:999999;
  display:grid;place-items:center;
  padding:22px;
  background:
    radial-gradient(circle at top left, rgba(250,204,21,.45), transparent 32%),
    radial-gradient(circle at bottom right, rgba(14,165,233,.40), transparent 36%),
    linear-gradient(135deg,#0f172a,#0ea5e9);
}
.maintenance-card{
  width:100%;max-width:650px;
  background:rgba(255,255,255,.96);
  border-radius:32px;
  padding:34px 24px;
  text-align:center;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
}
.maintenance-icon{
  width:92px;height:92px;
  margin:0 auto 18px;
  display:grid;place-items:center;
  border-radius:28px;
  font-size:48px;
  background:linear-gradient(135deg,#facc15,#fb923c);
}
.maintenance-card h1{color:#0f4c81;font-size:clamp(30px,6vw,52px)}
.maintenance-card p{font-size:18px;line-height:1.5}
@media(max-width:650px){
  .site-notice{grid-template-columns:1fr;text-align:center}
  .site-notice-icon{margin:auto}
}