:root{
  --red:#d90000;
  --red-dark:#9f0000;
  --red-soft:#fff0f0;
  --white:#ffffff;
  --page:#f6f6f6;
  --ink:#1b1b1b;
  --muted:#686868;
  --line:#ead0d0;
  --success:#157a3b;
  --warning:#9d4f00;
}
*{box-sizing:border-box}
html{background:var(--page)}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:
    radial-gradient(circle at 12% 0%,rgba(217,0,0,.10),transparent 30%),
    linear-gradient(180deg,#fff 0,#f7f7f7 55%,#f0f0f0 100%);
  color:var(--ink);
  min-height:100vh;
}
.topbar{
  position:sticky;top:0;z-index:3;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-bottom:3px solid var(--red);
  padding:13px 22px;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  box-shadow:0 7px 25px rgba(80,0,0,.08);
}
.brand-lockup{display:flex;align-items:center;gap:12px}
.brand-logo{
  width:52px;height:52px;object-fit:contain;border-radius:50%;
  background:#fff;border:2px solid var(--red);padding:3px;
  box-shadow:0 7px 20px rgba(217,0,0,.18)
}
.brand{display:block;font-weight:950;font-size:22px;letter-spacing:.07em;text-transform:uppercase;color:var(--red)}
small,.eyebrow,.muted{color:var(--muted)}
nav{display:flex;gap:8px;flex-wrap:wrap}
button{
  border:1px solid #e1b6b6;border-radius:999px;padding:11px 17px;
  background:#fff;color:var(--red-dark);font-weight:850;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
button:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(217,0,0,.13)}
button.active,.submit,#loginBtn{
  border-color:var(--red);
  background:linear-gradient(135deg,#ec1c24,var(--red-dark));
  color:#fff;
  box-shadow:0 8px 22px rgba(217,0,0,.24)
}
main{max-width:1180px;margin:auto;padding:24px}
.tab{display:none}.tab.active{display:block}
.card{
  background:#fff;border:1px solid var(--line);
  box-shadow:0 18px 46px rgba(72,0,0,.09);
  border-radius:24px;padding:24px;margin-bottom:22px
}
.hero{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center}
.hero-brand{
  min-height:220px;display:grid;place-items:center;
  border:2px solid var(--red);border-radius:22px;
  background:radial-gradient(circle,#fff,#fff5f5);padding:24px
}
.hero-brand img{width:min(180px,100%);height:auto;object-fit:contain;border:0;box-shadow:none;background:transparent}
h1{font-size:clamp(36px,5vw,64px);line-height:1;margin:0 0 12px;color:#171717}
h2{color:var(--red);margin-top:0}
.hero-intro{margin:0;color:#4c4c4c;font-size:1.12rem;line-height:1.65;max-width:720px}
.formgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wide{grid-column:1/-1}
label{display:grid;gap:8px;color:#4d4d4d;font-weight:750}
input,select,textarea{
  width:100%;padding:13px 14px;border-radius:14px;
  border:1px solid #d9b4b4;background:#fff;color:#1a1a1a;font-size:16px;
  outline:none;transition:border-color .16s ease,box-shadow .16s ease
}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(217,0,0,.10)}
textarea{min-height:90px}
.products{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.product{border:1px solid #e3bdbd;border-radius:18px;padding:16px;background:#fffafa;display:grid;gap:16px}
.product b{color:#1a1a1a}
.product .price{color:var(--red);font-size:26px;font-weight:950}
.product-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.product-head>b,.product-head div>b{display:block;font-size:20px}
.product-head small{display:block;margin-top:5px;line-height:1.4}
.unit-price-box{text-align:right;flex:0 0 auto}
.unit-price-box span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.unit-price-box .price{margin-top:3px}
.product-fields{display:grid;grid-template-columns:1fr 130px;gap:12px}
.line-preview{border:1px solid #efcaca;border-radius:12px;padding:11px 12px;background:#fff;color:var(--red);font-weight:900;font-size:14px}
.paybox{border:1px dashed var(--red);border-radius:18px;padding:16px;background:var(--red-soft);color:#3b1717}
.confirm{color:var(--success);font-weight:900;line-height:1.7;background:#eefaf2;border:1px solid #b9e2c7;border-radius:14px;padding:14px}
.confirm:empty{display:none}
.confirm button{margin-top:10px;background:var(--red);color:#fff;border-color:var(--red)}
.hidden{display:none}
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.metric{background:#fffafa;border:1px solid #e4bdbd;border-radius:18px;padding:15px}
.metric b{display:block;color:var(--red);font-size:28px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.order{padding:0}
.order.card{
  width:min(920px,100%);
  margin:0 auto 18px;
  border:1px solid var(--line);
  border-left:6px solid var(--red);
  border-radius:18px;
  padding:22px;
  box-shadow:0 12px 30px rgba(72,0,0,.08)
}
.order h3{margin:0;color:#1a1a1a}
.tag{display:inline-block;border-radius:999px;padding:6px 9px;background:#ffeaea;margin:4px;color:var(--red-dark)}
pre{white-space:pre-wrap;background:#fff8f8;border:1px solid #eccaca;padding:16px;border-radius:16px;color:#272727}
.cloud{padding:.65rem .85rem;border-radius:12px;background:#f3f3f3;color:#292929;border:1px solid #d7d7d7;font-weight:700}
.cloud.ok{background:#e8f7ed;color:#176b35;border-color:#b9dfc5}
.cloud.warn{background:#fff3e6;color:#8a4807;border-color:#edcfaa}
.order-summary{
  border:2px solid var(--red);border-radius:22px;padding:20px;
  background:linear-gradient(145deg,#fff0f0,#fff);
  box-shadow:inset 0 1px #fff,0 10px 28px rgba(217,0,0,.08)
}
.summary-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid #efc1c1;padding-bottom:14px}
.summary-heading h2{margin:2px 0 0}
.summary-heading strong{background:var(--red);border:1px solid var(--red);color:#fff;border-radius:999px;padding:9px 13px;white-space:nowrap}
.order-lines{display:grid;gap:10px;padding:14px 0}
.summary-line{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 0;border-bottom:1px solid #eadede}
.summary-line:last-child{border-bottom:0}
.summary-line div{display:grid;gap:4px}
.summary-line span,.empty-summary{color:var(--muted)}
.summary-line strong{font-size:20px;color:#222}
.summary-total{display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--red);padding-top:16px;font-size:20px}
.summary-total b{font-size:clamp(30px,5vw,46px);color:var(--red)}
.payment-reminder{margin:12px 0 0;color:#3d2020;font-weight:700}
.admin-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:end}
.admin-toolbar h2{margin-bottom:4px}
.filters{display:grid;grid-template-columns:minmax(240px,1fr) 220px;gap:10px;min-width:min(100%,600px)}
.order-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  gap:28px;
  align-items:flex-start
}
.order-head h3{font-size:25px;margin:2px 0}
.order-head p{margin:4px 0;color:var(--muted)}
.order-money{
  text-align:left;
  display:grid;
  justify-items:start;
  gap:8px;
  padding:10px 14px;
  border:1px solid #efc1c1;
  border-radius:14px;
  background:var(--red-soft)
}
.order-money::before{content:'Order Total';font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.order-money>b{font-size:30px;color:var(--red)}
.pill{font-size:12px;border-radius:999px;padding:6px 9px;font-weight:900;letter-spacing:.08em}
.pill.paid{background:#e5f6eb;color:#176b35}
.pill.unpaid{background:#fff0e1;color:#914c06}
.order-items{margin:14px 0}
.order-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.order-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.danger,#logoutBtn{background:#8f1111;color:#fff;border-color:#8f1111}
.order textarea[disabled],.order input[disabled]{opacity:.82;background:#f5f5f5}
.login{max-width:520px;margin-inline:auto}
.login input{margin-bottom:12px}
.modal{position:fixed;inset:0;z-index:50;background:rgba(30,0,0,.72);backdrop-filter:blur(8px);display:grid;place-items:center;padding:18px}
.modal.hidden{display:none}
.modal-card{width:min(620px,100%);max-height:90vh;overflow:auto;background:#fff;border:2px solid var(--red);border-radius:24px;padding:24px;box-shadow:0 30px 100px rgba(50,0,0,.35)}
.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
.modal-actions button{min-width:130px}
.modal-open{overflow:hidden}
.submit:disabled{opacity:.65;cursor:wait}
.people-mockups{margin:18px 0 24px}
.people-mockups .mockup-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:0}
.people-mockups .mockup-card{margin:0;background:#fff;border:2px solid #efc1c1;border-radius:18px;overflow:hidden;box-shadow:0 14px 28px rgba(90,0,0,.10)}
.people-mockups .mockup-card img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;object-position:center top}
.people-mockups .mockup-card figcaption{padding:11px 12px;text-align:center;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:var(--red);font-size:.78rem}
.form-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.form-title h2{margin-bottom:0}
.form-title>p{max-width:520px;text-align:right}
@media(max-width:900px){
  .admin-toolbar{display:block}.filters{grid-template-columns:1fr;margin-top:14px}.order-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:850px){
  .topbar{display:block}.hero,.formgrid{grid-template-columns:1fr}.hero-brand{min-height:auto}.hero-brand img{width:130px}
  .products,.cards{grid-template-columns:1fr 1fr}main{padding:14px}h1{font-size:42px}
  .form-title{display:block}.form-title>p{text-align:left;max-width:none}
  .people-mockups .mockup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .order.card{padding:18px;border-radius:16px}
  .order-head{grid-template-columns:1fr;gap:12px}
  .order-money{justify-items:start;text-align:left;margin-top:0;width:min(220px,100%)}
  .order-grid{grid-template-columns:1fr}.actions button{width:100%}
}
@media(max-width:520px){
  .products,.cards{grid-template-columns:1fr}nav button{flex:1}.topbar{padding:12px}.card{padding:18px}
  .brand-logo{width:42px;height:42px}.brand{font-size:17px}.summary-heading{align-items:center}.summary-line{align-items:flex-start}.summary-total b{font-size:32px}
  .product-fields{grid-template-columns:1fr}.product-head{align-items:center}.modal-actions{display:grid;grid-template-columns:1fr}.modal-actions button{width:100%}
}
@media(max-width:480px){
  .people-mockups .mockup-grid{gap:9px}.people-mockups .mockup-card{border-radius:13px}.people-mockups .mockup-card figcaption{font-size:.65rem;padding:9px 5px}
}
.production-grid{grid-template-columns:minmax(220px,1fr) minmax(220px,1fr)}
#sendPrinter{background:linear-gradient(135deg,#ec1c24,var(--red-dark));color:#fff;border-color:var(--red);box-shadow:0 8px 22px rgba(217,0,0,.24)}
@media(max-width:700px){.production-grid{grid-template-columns:1fr}}


/* v8 admin order entry */
.primary-action{background:linear-gradient(135deg,#ec1c24,var(--red-dark));color:#fff;border-color:var(--red);box-shadow:0 8px 22px rgba(217,0,0,.24)}
.admin-order-panel{border-top:6px solid var(--red)}
.admin-order-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:20px}
.admin-order-heading h2{margin-bottom:0}
.admin-order-heading>p{max-width:560px;text-align:right;margin:0}
.admin-order-buttons{display:flex;justify-content:flex-end;gap:12px}
.admin-order-buttons button{min-width:180px}
.optional{font-size:.75rem;font-weight:700;color:var(--muted);margin-left:5px}
.admin-order-summary{background:linear-gradient(145deg,#fff5f5,#fff)}
@media(max-width:850px){.admin-order-heading{display:block}.admin-order-heading>p{text-align:left;max-width:none;margin-top:8px}}
@media(max-width:560px){.admin-order-buttons{display:grid;grid-template-columns:1fr}.admin-order-buttons button{width:100%;min-width:0}}