/* ============================================================
   CHOCO'S WASH HOUSE — Core stylesheet
   Brand: charcoal / amber gold / cream
   ============================================================ */

:root{
  /* brand */
  --ink:#0E1B33;
  --ink-2:#152443;
  --ink-3:#1C3054;
  --line:#2B416B;
  --line-soft:#E2E8F4;

  --gold:#1A56DB;
  --gold-lite:#3B76F0;
  --gold-deep:#0F3DA8;
  --gold-mist:#EEF3FE;
  --gold-soft:#D8E4FC;

  --cream:#F7F9FD;
  --white:#FFFFFF;
  --text:#1A2439;
  --text-soft:#5B6880;
  --muted:#8B98AE;

  --ok:#2E9E5B;
  --warn:#D99425;
  --bad:#C6452F;
  --info:#3B7BC8;

  --radius:14px;
  --radius-lg:20px;
  --shadow:0 4px 16px rgba(14,27,51,.07);
  --shadow-lg:0 16px 44px rgba(14,27,51,.16);

  --font-display:'Baloo 2',system-ui,cursive;
  --font-body:'Nunito',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:1rem}

.container{width:min(1240px,92%);margin:0 auto}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.5rem;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:.94rem;transition:transform .15s,box-shadow .15s,background .15s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-gold{background:var(--gold);color:#fff;box-shadow:0 4px 14px rgba(26,86,219,.3)}
.btn-gold:hover{background:var(--gold-deep);box-shadow:0 8px 22px rgba(26,86,219,.4)}

.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:var(--ink-3)}

.btn-outline{background:transparent;border-color:var(--line-soft);color:var(--text)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-mist)}

.btn-ghost{background:transparent;color:var(--text-soft);padding:.5rem .9rem}
.btn-ghost:hover{background:var(--gold-mist);color:var(--gold-deep)}

.btn-lg{padding:.9rem 1.9rem;font-size:1rem}
.btn-sm{padding:.45rem 1rem;font-size:.84rem}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ============================================================
   AUTH (staff login)
   ============================================================ */
.auth-wrap{
  min-height:100vh;display:grid;place-items:center;padding:2rem 1rem;
  background:
    radial-gradient(1100px 500px at 80% -10%, rgba(26,86,219,.16), transparent 60%),
    linear-gradient(160deg,#141210,#221D18 60%,#191512);
}
.auth-card{
  width:min(430px,100%);background:var(--white);border-radius:var(--radius-lg);
  padding:2.4rem 2rem;box-shadow:var(--shadow-lg);
}
.auth-logo{display:flex;align-items:center;gap:.7rem;justify-content:center;margin-bottom:1.6rem}
.auth-logo .mark{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(140deg,var(--gold-lite),var(--gold-deep));
  display:grid;place-items:center;font-size:1.5rem;
  box-shadow:0 6px 18px rgba(26,86,219,.35);
}
.auth-logo b{font-family:var(--font-display);font-size:1.2rem;line-height:1.15;display:block}
.auth-logo span{font-size:.74rem;color:var(--muted);letter-spacing:.16em;text-transform:uppercase}

.auth-card h1{font-size:1.45rem;font-weight:700;margin-bottom:.3rem;text-align:center}
.auth-card .sub{color:var(--text-soft);font-size:.92rem;text-align:center;margin-bottom:1.7rem}

/* ============================================================
   FORM FIELDS
   ============================================================ */
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:.84rem;font-weight:600;margin-bottom:.4rem;color:var(--text)}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem 1rem;border:1px solid var(--line-soft);
  border-radius:11px;background:var(--white);color:var(--text);transition:border .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(26,86,219,.14);
}
.field input::placeholder{color:var(--muted)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}

/* password eye */
.pw-field{position:relative}
.pw-field input{padding-right:3rem !important}
.pw-eye{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;font-size:1.05rem;width:36px;height:36px;
  border-radius:8px;display:grid;place-items:center;color:var(--muted);
}
.pw-eye:hover{background:var(--gold-mist)}

.form-msg{margin-top:.8rem;font-size:.87rem;min-height:1.2em;text-align:center}
.form-msg.ok{color:var(--ok)}
.form-msg.err{color:var(--bad)}

/* ============================================================
   APP SHELL (staff dashboard)
   ============================================================ */
.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
@media(max-width:900px){.shell{grid-template-columns:1fr}}

.side{
  background:var(--ink);color:#CFC6BA;padding:1.5rem 1rem;
  display:flex;flex-direction:column;gap:.25rem;
}
@media(max-width:900px){
  .side{
    position:fixed;inset:0 auto 0 0;width:260px;z-index:200;
    transform:translateX(-100%);transition:transform .3s;
  }
  .side.open{transform:translateX(0)}
}

@media(max-width:500px){
  .side{width:220px}
}

@media(max-width:380px){
  .side{width:200px}
}
.side-brand{display:flex;align-items:center;gap:.7rem;padding:0 .5rem 1.4rem;border-bottom:1px solid var(--line);margin-bottom:1rem}
.side-brand .mark{
  width:42px;height:42px;border-radius:11px;
  background:linear-gradient(140deg,var(--gold-lite),var(--gold-deep));
  display:grid;place-items:center;font-size:1.2rem;flex-shrink:0;
}
.side-brand b{font-family:var(--font-display);color:var(--cream);font-size:.98rem;display:block;line-height:1.2}
.side-brand span{font-size:.66rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}

.side a{
  display:flex;align-items:center;gap:.75rem;padding:.72rem .8rem;border-radius:10px;
  font-size:.92rem;font-weight:500;color:#CFC6BA;transition:background .15s,color .15s;
}
.side a:hover{background:rgba(255,255,255,.06);color:var(--cream)}
.side a.active{background:var(--gold);color:#fff;font-weight:600}
.side a .ico{font-size:1.05rem;width:22px;text-align:center}
.side .spacer{flex:1}
.side .sign-out{color:#C98B7E}
.side .sign-out:hover{background:rgba(198,69,47,.14);color:#E8A093}

.side-scrim{
  display:none;position:fixed;inset:0;background:rgba(14,27,51,.5);z-index:150;
}
.side-scrim.show{display:block}

.main{padding:2rem;overflow-x:hidden}
@media(max-width:900px){.main{padding:1.2rem}}

.top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.8rem;flex-wrap:wrap}
.top h1{font-family:var(--font-display);font-size:1.7rem;font-weight:700;line-height:1.2}
.top p{color:var(--text-soft);font-size:.92rem}

.burger{
  display:none;background:var(--white);border:1px solid var(--line-soft);
  border-radius:10px;width:42px;height:42px;font-size:1.1rem;
}
@media(max-width:900px){.burger{display:grid;place-items:center}}

/* ============================================================
   PANELS & CARDS
   ============================================================ */
.panel{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--shadow);
}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.panel-head h2{font-size:1.15rem;font-weight:700}
.panel-head p{font-size:.87rem;color:var(--text-soft)}

.badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.28rem .7rem;border-radius:999px;font-size:.74rem;font-weight:700;
  background:var(--gold-soft);color:var(--gold-deep);
}
.badge.ok{background:#DEF3E5;color:#1F7A45}
.badge.warn{background:#FCEFD4;color:#9A6A12}
.badge.bad{background:#FBE3DE;color:#A5341F}
.badge.info{background:#DEEAF8;color:#28598F}
.badge.mute{background:#EFEAE3;color:var(--text-soft)}

/* ============================================================
   PRICING GRID
   ============================================================ */
.grid-scroll{overflow-x:auto;border:1px solid var(--line-soft);border-radius:12px}
table.price-grid{width:100%;border-collapse:collapse;min-width:640px}
table.price-grid th,table.price-grid td{
  padding:.7rem .8rem;text-align:left;border-bottom:1px solid var(--line-soft);
  font-size:.9rem;
}
table.price-grid thead th{
  background:var(--ink);color:var(--cream);font-weight:600;font-size:.82rem;
  position:sticky;top:0;white-space:nowrap;
}
table.price-grid thead th:first-child{border-radius:0}
table.price-grid tbody tr:hover{background:var(--gold-mist)}
table.price-grid td.garment{font-weight:600;white-space:nowrap}
table.price-grid td.garment .ico{margin-right:.4rem}

.price-cell{display:flex;align-items:center;gap:.35rem}
.price-cell input{
  width:92px;padding:.42rem .55rem;border:1px solid var(--line-soft);
  border-radius:8px;font-size:.88rem;text-align:right;
}
.price-cell input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(26,86,219,.14)}
.price-cell input.off{background:#F6F3EF;color:var(--muted)}
.price-cell .naira{color:var(--muted);font-size:.85rem}

.toggle{
  position:relative;width:38px;height:22px;border-radius:999px;
  background:#DCD5CB;border:none;transition:background .2s;flex-shrink:0;
}
.toggle::after{
  content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle.on{background:var(--gold)}
.toggle.on::after{transform:translateX(16px)}

.save-bar{
  position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;background:var(--white);border-top:1px solid var(--line-soft);
  padding:1rem 0 .2rem;margin-top:1rem;flex-wrap:wrap;
}
.save-bar .hint{font-size:.85rem;color:var(--text-soft)}

/* ============================================================
   LISTS (services & garments management)
   ============================================================ */
.chip-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--white);border:1px solid var(--line-soft);border-radius:999px;
  padding:.5rem 1rem;font-size:.88rem;font-weight:500;
}
.chip .ico{font-size:1rem}
.chip .x{
  background:none;border:none;color:var(--muted);font-size:.9rem;
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
}
.chip .x:hover{background:#FBE3DE;color:var(--bad)}
.chip.add{border-style:dashed;color:var(--gold-deep);border-color:var(--gold);cursor:pointer}
.chip.add:hover{background:var(--gold-mist)}

/* ============================================================
   MODAL
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:400;display:none;
  align-items:center;justify-content:center;padding:1.2rem;
  background:rgba(14,27,51,.55);backdrop-filter:blur(3px);
}
.modal.open{display:flex}
.modal-card{
  width:min(440px,100%);background:var(--white);border-radius:var(--radius-lg);
  padding:1.8rem;box-shadow:var(--shadow-lg);
}
.modal-card h3{font-size:1.15rem;margin-bottom:.3rem}
.modal-card .sub{font-size:.87rem;color:var(--text-soft);margin-bottom:1.3rem}
.modal-actions{display:flex;gap:.7rem;margin-top:1.2rem}
.modal-actions .btn{flex:1}

/* ============================================================
   UTIL
   ============================================================ */
.empty{text-align:center;padding:3rem 1rem;color:var(--text-soft)}
.empty .ico{font-size:2.6rem;display:block;margin-bottom:.6rem;opacity:.6}
.spinner{
  width:22px;height:22px;border:2.5px solid var(--line-soft);border-top-color:var(--gold);
  border-radius:50%;animation:spin .7s linear infinite;margin:0 auto;
}
@keyframes spin{to{transform:rotate(360deg)}}
.center-load{padding:3rem;text-align:center}

/* ============================================================
   SOAP BUBBLE INTRO — plays once on login, bursts into the app
   ============================================================ */
.bubble-intro{
  position:fixed;inset:0;z-index:9999;overflow:hidden;
  background:linear-gradient(165deg,#141210,#241E18 55%,#191512);
  display:grid;place-items:center;
  transition:opacity .7s ease, visibility .7s;
}
.bubble-intro.done{opacity:0;visibility:hidden}

.bi-stage{position:absolute;inset:0;overflow:hidden}

/* a single soap bubble */
.bub{
  position:absolute;bottom:-140px;border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.35) 12%, transparent 32%),
    radial-gradient(circle at 70% 72%, rgba(59,118,240,.35) 0%, transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(26,86,219,.12));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 0 22px rgba(255,255,255,.22), 0 0 22px rgba(26,86,219,.16);
  animation:bubRise var(--dur,5s) ease-in forwards;
  animation-delay:var(--del,0s);
  opacity:0;
}
@keyframes bubRise{
  0%   {transform:translateY(0) translateX(0) scale(.55);opacity:0}
  12%  {opacity:.95}
  50%  {transform:translateY(-52vh) translateX(var(--drift,14px)) scale(1)}
  88%  {opacity:.85}
  100% {transform:translateY(-115vh) translateX(calc(var(--drift,14px) * -1.4)) scale(1.08);opacity:0}
}

/* burst rings when the app opens */
.bi-burst{position:absolute;left:50%;top:50%;pointer-events:none}
.bi-ring{
  position:absolute;left:0;top:0;border-radius:50%;
  border:2px solid rgba(26,86,219,.5);
  transform:translate(-50%,-50%) scale(0);opacity:0;
}
.bubble-intro.bursting .bi-ring{animation:ringOut .85s cubic-bezier(.2,.7,.3,1) forwards}
.bubble-intro.bursting .bi-ring:nth-child(2){animation-delay:.1s}
.bubble-intro.bursting .bi-ring:nth-child(3){animation-delay:.2s}
@keyframes ringOut{
  0%  {transform:translate(-50%,-50%) scale(.2);opacity:.9}
  100%{transform:translate(-50%,-50%) scale(9);opacity:0}
}

/* centre logo that pops then bursts */
.bi-logo{
  position:relative;z-index:2;text-align:center;
  animation:logoIn .8s cubic-bezier(.2,.9,.25,1.2) forwards;
}
.bi-logo .mark{
  width:96px;height:96px;border-radius:26px;margin:0 auto .9rem;
  background:linear-gradient(140deg,var(--gold-lite),var(--gold-deep));
  display:grid;place-items:center;font-size:2.6rem;
  box-shadow:0 14px 44px rgba(26,86,219,.45);
  animation:markFloat 2.6s ease-in-out infinite;
}
.bi-logo b{display:block;color:var(--cream);font-size:1.35rem;font-weight:700;letter-spacing:.01em}
.bi-logo span{
  display:block;color:var(--gold-lite);font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;margin-top:.25rem;
}
.bi-logo .load{
  margin-top:1.4rem;width:150px;height:3px;border-radius:99px;
  background:rgba(255,255,255,.12);overflow:hidden;margin-inline:auto;
}
.bi-logo .load i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-lite),var(--gold));
  animation:loadFill 2.1s ease-out forwards;
}
@keyframes logoIn{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
@keyframes markFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes loadFill{to{width:100%}}
.bubble-intro.bursting .bi-logo{animation:logoPop .5s ease-in forwards}
@keyframes logoPop{
  0%{transform:scale(1);opacity:1}
  35%{transform:scale(1.16);opacity:1}
  100%{transform:scale(2.4);opacity:0}
}

/* ============================================================
   AMBIENT FLOATERS — bubbles & laundry icons on every screen
   ============================================================ */
.floaters{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.main,.auth-card,.panel,.side{position:relative;z-index:1}

.flo{
  position:absolute;bottom:-70px;
  animation:floUp var(--dur,17s) linear infinite;
  animation-delay:var(--del,0s);
  opacity:0;
}
@keyframes floUp{
  0%   {transform:translateY(0) translateX(0) rotate(0deg) scale(.8);opacity:0}
  10%  {opacity:var(--op,.5)}
  50%  {transform:translateY(-48vh) translateX(var(--drift,20px)) rotate(12deg) scale(1)}
  90%  {opacity:calc(var(--op,.5) * .6)}
  100% {transform:translateY(-104vh) translateX(calc(var(--drift,20px) * -1)) rotate(-10deg) scale(1.05);opacity:0}
}

/* soap-bubble floater */
.flo.bubble{
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 14%, transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(26,86,219,.13), rgba(26,86,219,.05));
  border:1px solid rgba(26,86,219,.24);
}
/* emoji floater (shirt, sock, soap…) */
.flo.icon{
  display:grid;place-items:center;
  filter:drop-shadow(0 3px 8px rgba(14,27,51,.1));
}

@media(prefers-reduced-motion:reduce){
  .bub,.flo,.bi-logo .mark,.bi-logo .load i{animation:none}
  .floaters{display:none}
  .bubble-intro{display:none}
}

/* ============================================================
   SOAP BUBBLE INTRO — fills the screen after login, then bursts
   ============================================================ */
.bubble-intro{
  position:fixed;inset:0;z-index:9999;overflow:hidden;
  background:linear-gradient(160deg,#141210,#221D18 55%,#191512);
  display:grid;place-items:center;
  animation:introOut .9s cubic-bezier(.65,0,.35,1) 2.5s forwards;
}
@keyframes introOut{
  0%{opacity:1}
  100%{opacity:0;visibility:hidden;transform:scale(1.12)}
}

.bi-center{
  position:relative;z-index:3;text-align:center;
  animation:biPop .7s cubic-bezier(.2,.9,.25,1.2) both;
}
@keyframes biPop{
  0%{opacity:0;transform:scale(.6)}
  100%{opacity:1;transform:scale(1)}
}
.bi-mark{
  width:96px;height:96px;margin:0 auto .9rem;border-radius:26px;
  background:linear-gradient(140deg,var(--gold-lite),var(--gold-deep));
  display:grid;place-items:center;font-size:2.6rem;
  box-shadow:0 12px 40px rgba(26,86,219,.45);
  animation:markWobble 2.2s ease-in-out infinite;
}
@keyframes markWobble{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-8px) rotate(-4deg)}
}
.bi-center b{
  display:block;color:var(--cream);font-size:1.5rem;font-weight:700;
  font-family:var(--font-display);letter-spacing:-.01em;
}
.bi-center span{
  display:block;color:var(--gold-lite);font-size:.76rem;
  letter-spacing:.22em;text-transform:uppercase;margin-top:.25rem;
}
.bi-load{
  margin-top:1.4rem;width:120px;height:3px;border-radius:99px;
  background:rgba(255,255,255,.14);overflow:hidden;margin-inline:auto;
}
.bi-load i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-lite),var(--gold));
  animation:biFill 2.3s ease-out forwards;
}
@keyframes biFill{to{width:100%}}

/* the bubbles that flood up and fill the screen */
.bi-bubble{
  position:absolute;border-radius:50%;bottom:-140px;
  background:radial-gradient(circle at 32% 28%,
    rgba(255,255,255,.55), rgba(59,118,240,.22) 45%, rgba(26,86,219,.08) 70%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset -6px -6px 16px rgba(255,255,255,.18),
             0 0 22px rgba(59,118,240,.18);
  animation:biRise var(--dur,3s) cubic-bezier(.35,.6,.4,1) var(--del,0s) forwards;
  opacity:0;
}
@keyframes biRise{
  0%{transform:translateY(0) scale(.5);opacity:0}
  12%{opacity:.95}
  70%{opacity:.9}
  100%{transform:translateY(calc(-100vh - 240px)) scale(1.25);opacity:0}
}
.bi-bubble::after{
  content:"";position:absolute;top:16%;left:20%;
  width:26%;height:22%;border-radius:50%;
  background:rgba(255,255,255,.65);filter:blur(1px);
}

/* burst flash as it opens into the page */
.bi-burst{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.9), rgba(59,118,240,.5) 30%, transparent 62%);
  opacity:0;transform:scale(.2);
  animation:biBurst .8s cubic-bezier(.2,.8,.3,1) 2.1s forwards;
}
@keyframes biBurst{
  0%{opacity:0;transform:scale(.2)}
  35%{opacity:.85}
  100%{opacity:0;transform:scale(2.4)}
}

/* ============================================================
   AMBIENT LAYER — drifting suds + tumbling clothes (all pages)
   ============================================================ */
.ambient{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.amb{
  position:absolute;opacity:0;
  animation:ambFall var(--dur,16s) linear var(--del,0s) infinite;
}
@keyframes ambFall{
  0%{transform:translateY(-8vh) translateX(0) rotate(0);opacity:0}
  8%{opacity:var(--peak,.5)}
  92%{opacity:var(--peak,.5)}
  100%{transform:translateY(108vh) translateX(var(--drift,40px)) rotate(var(--spin,220deg));opacity:0}
}
/* soap sud = translucent circle with a highlight */
.amb.sud{
  border-radius:50%;
  background:radial-gradient(circle at 32% 30%,
    rgba(255,255,255,.75), rgba(26,86,219,.16) 55%, rgba(26,86,219,.04) 75%);
  border:1px solid rgba(26,86,219,.18);
}
.amb.sud::after{
  content:"";position:absolute;top:18%;left:22%;width:24%;height:20%;
  border-radius:50%;background:rgba(255,255,255,.85);
}
/* clothing emoji drifting down */
.amb.cloth{
  font-size:var(--size,20px);
  filter:drop-shadow(0 2px 6px rgba(14,27,51,.12));
}
.side .amb{filter:none}

@media(prefers-reduced-motion:reduce){
  .bubble-intro,.bi-bubble,.bi-burst,.amb,.bi-mark{animation:none !important}
  .bubble-intro{display:none}
  .ambient{display:none}
}

/* content sits above the ambient layer */
.shell,.auth-wrap{position:relative;z-index:1}

/* ============================================================
   FLOATING ICON TILES — used across dashboards
   ============================================================ */
.float-ico{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;
  display:grid;place-items:center;font-size:1.25rem;
  background:linear-gradient(140deg,var(--gold-mist),var(--gold-soft));
  border:1px solid rgba(26,86,219,.22);
  box-shadow:0 4px 12px rgba(26,86,219,.14);
  animation:floatBob 3.4s ease-in-out infinite;
}
@keyframes floatBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
.float-ico.d2{animation-delay:.5s}
.float-ico.d3{animation-delay:1s}
.float-ico.d4{animation-delay:1.5s}
.float-ico.dark{
  background:linear-gradient(140deg,#2A2622,#1E1B18);
  border-color:var(--line);
}

/* stat cards with floating icons */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:1.6rem}
.stat{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:1.2rem;display:flex;align-items:center;gap:.9rem;
  box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;
}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat b{display:block;font-family:var(--font-display);font-size:1.6rem;line-height:1.1}
.stat span{font-size:.82rem;color:var(--text-soft)}

/* ============================================================
   INTAKE (new drop-off)
   ============================================================ */
.intake-grid{display:grid;grid-template-columns:1fr 380px;gap:1.4rem;align-items:start}
@media(max-width:1050px){.intake-grid{grid-template-columns:1fr}}

/* customer lookup */
.cust-found{
  display:flex;align-items:center;gap:.9rem;background:var(--gold-mist);
  border:1px solid rgba(26,86,219,.28);border-radius:12px;padding:.9rem 1rem;margin-top:.8rem;
  animation:popIn .28s ease;
}
@keyframes popIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cust-found b{display:block;font-size:.95rem}
.cust-found span{font-size:.8rem;color:var(--text-soft)}
.cust-found .tag{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--gold-deep)}

/* garment picker */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.7rem}
.pick{
  background:var(--white);border:1px solid var(--line-soft);border-radius:13px;
  padding:.85rem .5rem;text-align:center;transition:.16s;cursor:pointer;
}
.pick:hover{border-color:var(--gold);background:var(--gold-mist);transform:translateY(-3px)}
.pick .ico{font-size:1.6rem;display:block;margin-bottom:.25rem}
.pick b{font-size:.78rem;font-weight:600;display:block}

/* items in the basket */
.basket-item{
  background:var(--white);border:1px solid var(--line-soft);border-radius:13px;
  padding:1rem;margin-bottom:.75rem;animation:popIn .25s ease;
}
.bi-top{display:flex;align-items:center;gap:.75rem;margin-bottom:.7rem}
.bi-top .float-ico{width:40px;height:40px;font-size:1.1rem;animation:none}
.bi-top b{flex:1;font-size:.95rem}
.bi-x{
  background:none;border:none;color:var(--muted);width:28px;height:28px;
  border-radius:8px;display:grid;place-items:center;font-size:.9rem;flex-shrink:0;
}
.bi-x:hover{background:#FBE3DE;color:var(--bad)}

.qty{display:flex;align-items:center;gap:.35rem}
.qty button{
  width:28px;height:28px;border-radius:8px;border:1px solid var(--line-soft);
  background:var(--white);font-weight:700;color:var(--text-soft);display:grid;place-items:center;
}
.qty button:hover{border-color:var(--gold);color:var(--gold-deep)}
.qty span{min-width:24px;text-align:center;font-weight:700;font-size:.92rem}

/* service pills — "sugar into tea" */
.svc-row{display:flex;gap:.4rem;flex-wrap:wrap}
.svc{
  border:1px solid var(--line-soft);background:var(--white);border-radius:999px;
  padding:.4rem .85rem;font-size:.8rem;font-weight:600;color:var(--text-soft);
  transition:.15s;display:inline-flex;align-items:center;gap:.35rem;
}
.svc:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-mist)}
.svc.on{
  background:var(--gold);border-color:var(--gold);color:#fff;
  box-shadow:0 3px 10px rgba(26,86,219,.3);
}
.svc.on::after{content:"✓";font-size:.7rem}
.svc .p{font-size:.72rem;opacity:.85;font-weight:500}
.svc.off{opacity:.35;cursor:not-allowed;text-decoration:line-through}

.bi-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:.7rem;padding-top:.7rem;border-top:1px dashed var(--line-soft);
}
.bi-foot .lt{font-family:var(--font-display);font-weight:700;color:var(--gold-deep)}

/* summary rail */
.rail{position:sticky;top:1.5rem}
@media(max-width:768px){.rail{position:static}}
.sum-line{display:flex;justify-content:space-between;padding:.55rem 0;font-size:.9rem;border-bottom:1px solid var(--line-soft)}
.sum-line span{color:var(--text-soft)}
.sum-line.big{
  border-bottom:none;padding-top:.9rem;font-family:var(--font-display);
  font-size:1.35rem;font-weight:700;
}
.sum-line.big span{color:var(--text);font-size:1rem;font-weight:600;align-self:center}
.sum-line.big b{color:var(--gold-deep)}

/* ticket preview / print */
.ticket{
  background:#fff;color:#111;font-family:'Courier New',monospace;
  padding:14px;width:280px;margin:0 auto;font-size:12px;line-height:1.5;
}
.ticket .c{text-align:center}
.ticket hr{border:none;border-top:1px dashed #999;margin:8px 0}
.ticket .lg{font-size:16px;font-weight:bold}
.ticket .code{font-size:22px;font-weight:bold;letter-spacing:3px}
.ticket table{width:100%;font-size:11px}
.ticket td{padding:1px 0;vertical-align:top}
.ticket td.r{text-align:right}

@media print{
  body *{visibility:hidden}
  .ticket,.ticket *{visibility:visible}
  .ticket{position:absolute;left:0;top:0;width:100%}
  .ambient,.bubble-intro{display:none !important}
}



/* ============================================================
   ATMOSPHERE — real soap bubbles, laundry line, falling clothes
   ============================================================ */
.auth-wrap{position:relative;overflow:hidden;isolation:isolate}

/* the layer everything lives in */
.atmos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}

/* ---------- SOAP BUBBLE (real film, not an atom) ---------- */
.bub{
  position:absolute;bottom:-140px;pointer-events:auto;cursor:pointer;
  animation:bubUp var(--dur,10s) linear var(--del,0s) infinite;
  will-change:transform;
}
@keyframes bubUp{
  0%   {transform:translate(0,0) scale(.6)}
  25%  {transform:translate(calc(var(--drift,30px) * .4), -25vh) scale(.95)}
  50%  {transform:translate(calc(var(--drift,30px) * -.3), -50vh) scale(1)}
  75%  {transform:translate(calc(var(--drift,30px) * .6), -75vh) scale(1.02)}
  92%  {transform:translate(var(--drift,30px), -92vh) scale(1.05);opacity:1}
  96%  {transform:translate(var(--drift,30px), -95vh) scale(1.45);opacity:.35}
  100% {transform:translate(var(--drift,30px), -96vh) scale(1.8);opacity:0}
}
.bub svg{display:block;width:100%;height:100%;overflow:visible}

/* burst ring at the top of the rise */
.bub .ring{
  position:absolute;inset:-25%;border-radius:50%;
  border:2px solid rgba(255,255,255,.75);opacity:0;transform:scale(.4);
  animation:ringPop var(--dur,10s) linear var(--del,0s) infinite;
}
@keyframes ringPop{
  0%,93%{opacity:0;transform:scale(.4)}
  96%   {opacity:.8;transform:scale(1.05)}
  100%  {opacity:0;transform:scale(2)}
}
/* droplets flung out by the pop */
.bub .dp{
  position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.9);opacity:0;
  animation:dpFly var(--dur,10s) linear var(--del,0s) infinite;
}
@keyframes dpFly{
  0%,94%{opacity:0;transform:translate(-50%,-50%) scale(1)}
  97%   {opacity:.95}
  100%  {opacity:0;transform:translate(var(--dx,18px),var(--dy,-18px)) scale(.25)}
}

/* CLICK TO POP — instant burst */
@keyframes burstNow{
  0%  {transform:scale(1);opacity:1}
  40% {transform:scale(1.5);opacity:.5}
  100%{transform:scale(2.1);opacity:0}
}
.bub.burst{animation:burstNow .32s ease-out forwards !important}
.burst-ring{
  position:absolute;border-radius:50%;pointer-events:none;z-index:5;
  border:2.5px solid rgba(255,255,255,.9);
  animation:brRing .45s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes brRing{
  0%  {transform:scale(.5);opacity:.95}
  100%{transform:scale(2.6);opacity:0}
}
.burst-dot{
  position:absolute;width:6px;height:6px;border-radius:50%;z-index:5;
  background:radial-gradient(circle at 35% 32%, #fff, rgba(59,118,240,.85));
  pointer-events:none;animation:brDot .55s cubic-bezier(.15,.75,.3,1) forwards;
}
@keyframes brDot{
  0%  {transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--bx),var(--by)) scale(.2);opacity:0}
}

/* ---------- FALLING LAUNDRY (clothes + pegs + flakes) ---------- */
.fall{
  position:absolute;top:-70px;pointer-events:none;
  animation:fallDown var(--dur,17s) linear var(--del,0s) infinite;
  will-change:transform;
}
@keyframes fallDown{
  0%   {transform:translate(0,0) rotate(0);opacity:0}
  6%   {opacity:var(--peak,.85)}
  30%  {transform:translate(var(--sw,30px), 28vh) rotate(90deg)}
  55%  {transform:translate(calc(var(--sw,30px) * -1), 55vh) rotate(190deg)}
  80%  {transform:translate(var(--sw,30px), 80vh) rotate(280deg)}
  94%  {opacity:var(--peak,.85)}
  100% {transform:translate(0, 112vh) rotate(360deg);opacity:0}
}
.fall svg{display:block;overflow:visible}

/* soap flakes */
.flake{
  position:absolute;top:-30px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 33% 30%,
    rgba(255,255,255,.95), rgba(255,255,255,.5) 40%, rgba(59,118,240,.25) 75%);
  box-shadow:0 0 8px rgba(255,255,255,.35);
  animation:flakeFall var(--dur,15s) linear var(--del,0s) infinite;
}
@keyframes flakeFall{
  0%   {transform:translate(0,0);opacity:0}
  8%   {opacity:var(--peak,.7)}
  50%  {transform:translate(var(--sw,25px), 50vh)}
  92%  {opacity:var(--peak,.7)}
  100% {transform:translate(calc(var(--sw,25px) * -1), 108vh);opacity:0}
}

/* ---------- WASHING LINE ---------- */
.wline{position:absolute;top:0;left:-6%;width:112%;height:220px;pointer-events:none;z-index:1}
.wline svg{width:100%;height:100%;overflow:visible}
.peg{transform-box:fill-box;transform-origin:top center;animation:sway 3.6s ease-in-out infinite alternate}
.peg.s2{animation-duration:4.6s;animation-delay:-.7s}
.peg.s3{animation-duration:3.1s;animation-delay:-1.4s}
.peg.s4{animation-duration:5.1s;animation-delay:-.3s}
.peg.s5{animation-duration:4s;animation-delay:-2s}
.peg.s6{animation-duration:3.4s;animation-delay:-1.1s}
@keyframes sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

.drip{transform-box:fill-box;transform-origin:center top;animation:dripFall 3.6s ease-in infinite}
.drip.d2{animation-duration:4.8s;animation-delay:1.5s}
.drip.d3{animation-duration:4.1s;animation-delay:2.8s}
@keyframes dripFall{
  0%,58%{opacity:0;transform:translateY(0) scale(.5)}
  64%   {opacity:.85;transform:translateY(4px) scale(1)}
  100%  {opacity:0;transform:translateY(80px) scale(.8)}
}

.auth-card{position:relative;z-index:3}
.shell{position:relative;z-index:1}

/* mark floats, bubbles pop off it */
.auth-logo .mark{position:relative;animation:markFloat 3.6s ease-in-out infinite}
@keyframes markFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-7px) rotate(2deg)}
}
.auth-logo .mark::before,.auth-logo .mark::after{
  content:"";position:absolute;border-radius:50%;
  background:radial-gradient(circle at 30% 28%, rgba(255,255,255,.95), rgba(59,118,240,.4) 65%);
  border:1px solid rgba(255,255,255,.6);
}
.auth-logo .mark::before{width:15px;height:15px;top:-9px;right:-7px;animation:popBub 2.8s ease-in-out infinite}
.auth-logo .mark::after {width:10px;height:10px;top:-18px;right:6px;animation:popBub 2.8s ease-in-out .9s infinite}
@keyframes popBub{
  0%  {transform:scale(0);opacity:0}
  30% {transform:scale(1) translateY(-4px);opacity:.95}
  62% {transform:scale(1.2) translateY(-13px);opacity:.6}
  78% {transform:scale(1.7) translateY(-17px);opacity:.2}
  100%{transform:scale(.3) translateY(-22px);opacity:0}
}

.auth-card h1,.auth-logo b,.top h1,.stat b,.oc-total,
.sum-line.big,.bi-center b,.panel-head h2{font-family:var(--font-display)}

/* hint */
.pop-hint{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  font-size:.76rem;color:rgba(255,255,255,.5);z-index:3;letter-spacing:.04em;
  pointer-events:none;
}

@media(prefers-reduced-motion:reduce){
  .bub,.fall,.flake,.peg,.drip,.auth-logo .mark,
  .auth-logo .mark::before,.auth-logo .mark::after{animation:none}
  .bub,.fall,.flake{display:none}
}

/* ============================================================
   CINEMATIC LOGIN SCENES — 15 wallpapers, 6s each, crossfading
   ============================================================ */
.sky{
  position:absolute;inset:0;z-index:-1;
  opacity:0;transition:opacity 1.6s ease-in-out;
}
.sky.on{opacity:1}

/* ---- the 15 skies ---- */
.sky.s-morning   {background:linear-gradient(170deg,#F9C97C 0%,#E8955B 42%,#3A2A26 100%)}
.sky.s-drying    {background:linear-gradient(175deg,#7EC8E8 0%,#B8E4F0 40%,#2C3A44 100%)}
.sky.s-rain      {background:linear-gradient(175deg,#4A5A6B 0%,#5F7183 45%,#1E262E 100%)}
.sky.s-sunset    {background:linear-gradient(170deg,#E8843C 0%,#C25A4A 38%,#3B2229 100%)}
.sky.s-night     {background:linear-gradient(175deg,#1A2438 0%,#141C2E 45%,#0B0F18 100%)}
.sky.s-foam      {background:linear-gradient(170deg,#D9EEF5 0%,#A8CFDE 40%,#2A3840 100%)}
.sky.s-windy     {background:linear-gradient(175deg,#8FB8C9 0%,#6E93A6 42%,#25333B 100%)}
.sky.s-rainbow   {background:linear-gradient(170deg,#A8D8E8 0%,#C9D9A0 30%,#E8C97C 55%,#2E3830 100%)}
.sky.s-cold      {background:linear-gradient(175deg,#BFE0F0 0%,#8CB8D4 45%,#1F2E3A 100%)}
.sky.s-hot       {background:linear-gradient(170deg,#E8A868 0%,#C46B4A 40%,#38221C 100%)}
.sky.s-linen     {background:linear-gradient(175deg,#CFE5C4 0%,#9FC99A 42%,#26332A 100%)}
.sky.s-rinse     {background:linear-gradient(175deg,#9ED4E8 0%,#5FA8C9 45%,#1B2E3A 100%)}
.sky.s-softener  {background:linear-gradient(170deg,#E8C4DE 0%,#C99AC4 40%,#2E2436 100%)}
.sky.s-express   {background:linear-gradient(175deg,#F0C05A 0%,#E07B3C 42%,#33231C 100%)}
.sky.s-sunday    {background:linear-gradient(170deg,#EDD9B8 0%,#D4A87C 40%,#332821 100%)}

/* sun / moon body */
.orb{
  position:absolute;border-radius:50%;z-index:0;
  opacity:0;transition:opacity 1.6s ease-in-out;
}
.orb.on{opacity:1}
.orb.sun{
  width:130px;height:130px;top:6%;right:9%;
  background:radial-gradient(circle at 40% 38%, #FFF6D8, #FBD968 45%, #F0A93C);
  box-shadow:0 0 90px rgba(251,217,104,.6), 0 0 160px rgba(240,169,60,.3);
  animation:sunPulse 5s ease-in-out infinite;
}
@keyframes sunPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.orb.moon{
  width:96px;height:96px;top:8%;right:11%;
  background:radial-gradient(circle at 38% 34%, #F4F6FB, #D6DCE8 55%, #AEB8CA);
  box-shadow:0 0 70px rgba(220,230,245,.45), 0 0 140px rgba(180,200,230,.2);
}
.orb.moon::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 66% 30%, rgba(160,175,200,.5) 0 9px, transparent 10px),
             radial-gradient(circle at 40% 66%, rgba(160,175,200,.45) 0 7px, transparent 8px),
             radial-gradient(circle at 62% 68%, rgba(160,175,200,.4) 0 5px, transparent 6px);
}

/* sun rays */
.rays{
  position:absolute;top:-40px;right:2%;width:340px;height:420px;z-index:0;
  opacity:0;transition:opacity 1.6s ease;pointer-events:none;
}
.rays.on{opacity:.5}
.rays i{
  position:absolute;top:60px;right:60px;transform-origin:top right;
  width:2px;height:330px;
  background:linear-gradient(180deg, rgba(255,246,216,.55), transparent);
  animation:rayShift 7s ease-in-out infinite alternate;
}
@keyframes rayShift{from{opacity:.3}to{opacity:.75}}

/* stars */
.stars{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.stars.on{opacity:1}
.star{
  position:absolute;border-radius:50%;background:#fff;
  animation:twinkle var(--tw,3s) ease-in-out var(--td,0s) infinite;
}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

/* RAIN */
.rain{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.2s ease;pointer-events:none;overflow:hidden}
.rain.on{opacity:1}
.drop-r{
  position:absolute;top:-60px;width:1.6px;border-radius:2px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(200,225,245,.75));
  animation:rainFall var(--dur,.8s) linear var(--del,0s) infinite;
}
@keyframes rainFall{
  0%  {transform:translateY(0) translateX(0);opacity:0}
  8%  {opacity:.8}
  100%{transform:translateY(112vh) translateX(var(--slant,-30px));opacity:.15}
}
/* splash at the bottom */
.splash{
  position:absolute;bottom:0;width:14px;height:14px;border-radius:50%;
  border:1.5px solid rgba(200,225,245,.5);border-top:none;border-left:none;
  transform:rotate(-45deg) scale(0);opacity:0;
  animation:splashPop var(--dur,1.4s) ease-out var(--del,0s) infinite;
}
@keyframes splashPop{
  0%,70%{transform:rotate(-45deg) scale(0);opacity:0}
  78%   {transform:rotate(-45deg) scale(1);opacity:.7}
  100%  {transform:rotate(-45deg) scale(1.8);opacity:0}
}

/* STEAM (hot wash) */
.steam{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.steam.on{opacity:1}
.st{
  position:absolute;bottom:-80px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.28), transparent 70%);
  filter:blur(10px);
  animation:steamUp var(--dur,10s) ease-out var(--del,0s) infinite;
}
@keyframes steamUp{
  0%  {transform:translateY(0) scale(.6);opacity:0}
  20% {opacity:.5}
  100%{transform:translateY(-90vh) scale(2.2);opacity:0}
}

/* WATER RUNNING DOWN THE GLASS (rinse) */
.glass{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.4s ease;pointer-events:none;overflow:hidden}
.glass.on{opacity:1}
.rivulet{
  position:absolute;top:-10%;width:2.5px;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(190,225,245,.25));
  border-radius:99px;
  animation:runDown var(--dur,5s) cubic-bezier(.5,0,.6,1) var(--del,0s) infinite;
}
@keyframes runDown{
  0%  {height:0;opacity:0}
  10% {opacity:.7}
  60% {height:45vh}
  100%{height:0;transform:translateY(110vh);opacity:0}
}
.bead{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.9), rgba(180,215,240,.35));
  border:1px solid rgba(255,255,255,.35);
  animation:beadSlide var(--dur,7s) cubic-bezier(.4,0,.7,1) var(--del,0s) infinite;
  opacity:0;
}
@keyframes beadSlide{
  0%  {transform:translateY(0);opacity:0}
  12% {opacity:.85}
  100%{transform:translateY(110vh);opacity:0}
}

/* RAINBOW arc */
.rainbow{
  position:absolute;top:-16%;left:50%;transform:translateX(-50%);
  width:150%;aspect-ratio:1;border-radius:50%;z-index:0;
  opacity:0;transition:opacity 1.8s ease;pointer-events:none;
  background:conic-gradient(from 180deg at 50% 50%,
    transparent 0deg 130deg,
    rgba(232,110,90,.16) 140deg,
    rgba(240,180,80,.16) 150deg,
    rgba(210,220,110,.16) 160deg,
    rgba(120,200,150,.16) 170deg,
    rgba(110,180,220,.16) 180deg,
    rgba(160,140,210,.16) 190deg,
    transparent 200deg 360deg);
  mask:radial-gradient(circle, transparent 62%, #000 64%, #000 72%, transparent 74%);
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 64%, #000 72%, transparent 74%);
}
.rainbow.on{opacity:1}

/* scene label */
.scene-name{
  position:absolute;top:22px;left:24px;z-index:4;
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);pointer-events:none;
  transition:opacity .5s;
}
.scene-name .ico{margin-right:.35rem}

/* wind: laundry blows harder */
.atmos.windy .peg{animation-duration:1.4s !important}
.atmos.windy .fall{animation-duration:8s !important}
.atmos.express .bub{animation-duration:5s !important}
.atmos.express .fall{animation-duration:7s !important}

/* ============================================================
   ORDER DETAIL — tap items through their statuses
   ============================================================ */
.ord-grid{display:grid;grid-template-columns:1fr 340px;gap:1.4rem;align-items:start}
@media(max-width:1000px){.ord-grid{grid-template-columns:1fr}}

.ord-hero{
  background:linear-gradient(140deg,var(--ink),var(--ink-3));
  color:var(--cream);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.4rem;
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.ord-hero::after{
  content:"";position:absolute;top:-40%;right:-8%;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,86,219,.22),transparent 70%);
}
.ord-hero .tk{position:relative;z-index:1}
.ord-hero .tk b{
  display:block;font-family:var(--font-display);font-size:1.9rem;line-height:1.1;
}
.ord-hero .tk span{font-size:.85rem;color:#B5AA9C}
.ord-hero .sep{width:1px;height:44px;background:var(--line)}
.ord-hero .bit{position:relative;z-index:1}
.ord-hero .bit b{display:block;font-size:.98rem;font-weight:600}
.ord-hero .bit span{font-size:.76rem;color:#9A8F82;text-transform:uppercase;letter-spacing:.08em}
.ord-hero .push{margin-left:auto;position:relative;z-index:1;display:flex;gap:.5rem;flex-wrap:wrap}

/* item cards with status buttons */
.item-card{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:1.1rem;margin-bottom:.85rem;transition:border-color .2s,box-shadow .2s;
}
.item-card:hover{border-color:var(--gold);box-shadow:var(--shadow)}
.item-card.done{background:linear-gradient(180deg,#F4FBF6,#fff);border-color:#BFE5CC}

.it-top{display:flex;align-items:center;gap:.85rem;margin-bottom:.85rem}
.it-top .float-ico{width:44px;height:44px;font-size:1.2rem;animation:none}
.it-top .nm{flex:1;min-width:0}
.it-top .nm b{display:block;font-size:1rem}
.it-top .nm span{font-size:.8rem;color:var(--text-soft)}
.it-top .lt{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--gold-deep)}

/* the three-step status track */
.track{display:flex;gap:.5rem}
.step{
  flex:1;border:1.5px solid var(--line-soft);background:var(--white);
  border-radius:11px;padding:.6rem .4rem;text-align:center;
  font-size:.8rem;font-weight:600;color:var(--muted);transition:.18s;
}
.step .ico{display:block;font-size:1.1rem;margin-bottom:.15rem;opacity:.5;transition:.18s}
.step:hover{border-color:var(--gold);color:var(--gold-deep)}
.step:hover .ico{opacity:1;transform:scale(1.1)}

.step.on.pending{background:#EEF3F9;border-color:#9EB9D6;color:#2B5A8C}
.step.on.processing{
  background:linear-gradient(180deg,#FDF3E0,#FBEBCF);
  border-color:var(--gold);color:var(--gold-deep);
  box-shadow:0 3px 12px rgba(26,86,219,.2);
}
.step.on.done{
  background:linear-gradient(180deg,#E4F6EA,#D3F0DD);
  border-color:#4FB877;color:#1F7A45;
  box-shadow:0 3px 12px rgba(79,184,119,.22);
}
.step.on .ico{opacity:1}
.step.on.processing .ico{animation:tumble 1.6s ease-in-out infinite}
@keyframes tumble{
  0%,100%{transform:rotate(-12deg) scale(1.05)}
  50%{transform:rotate(12deg) scale(1.15)}
}
.step.on.done .ico{animation:pop .4s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.3)}100%{transform:scale(1)}}

/* progress bar on the order */
.prog{height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin:.4rem 0 .2rem}
.prog i{
  display:block;height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--gold-lite),var(--ok));
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
@media(max-width:600px){.prog{height:10px;margin:.5rem 0 .3rem}}

/* ready celebration */
.ready-flash{
  position:fixed;inset:0;z-index:900;pointer-events:none;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(79,184,119,.16),transparent 62%);
  animation:rfOut 1.8s ease-out forwards;
}
@keyframes rfOut{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
.ready-flash b{
  font-family:var(--font-display);font-size:2rem;color:#1F7A45;
  background:#fff;padding:1rem 2rem;border-radius:99px;box-shadow:var(--shadow-lg);
  animation:rfPop .6s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes rfPop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}

.svc-tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.3rem}
.svc-tag{
  background:var(--gold-mist);border:1px solid rgba(26,86,219,.25);
  border-radius:999px;padding:.15rem .55rem;font-size:.72rem;font-weight:600;color:var(--gold-deep);
}

/* ============================================================
   BRAND LOGO — crisp SVG, never blurs
   ============================================================ */
.cwh-logo{display:block;width:100%;height:100%}

.auth-logo .mark,
.side-brand .mark,
.bi-mark{
  background:#fff !important;
  padding:6px;
  box-shadow:0 6px 20px rgba(26,86,219,.28) !important;
}
.auth-logo .mark{--logo-ink:#1A56DB;--logo-bg:#fff}
.side-brand .mark{--logo-ink:#1A56DB;--logo-bg:#fff;padding:5px}
.bi-mark{--logo-ink:#1A56DB;--logo-bg:#fff;padding:12px}

/* ============================================================
   UNDO TOAST
   ============================================================ */
.toast-rail{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:800;display:flex;flex-direction:column;gap:.6rem;align-items:center;
  pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:.9rem;
  background:var(--ink);color:var(--cream);
  border:1px solid var(--line);border-radius:999px;
  padding:.75rem 1.4rem;box-shadow:var(--shadow-lg);
  font-size:.9rem;pointer-events:auto;
  animation:toastIn .3s cubic-bezier(.2,.9,.3,1.2);
  max-width:min(92vw,520px);
}
@keyframes toastIn{
  from{opacity:0;transform:translateY(20px) scale(.95)}
  to{opacity:1;transform:none}
}
.toast.out{animation:toastOut .3s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(14px) scale(.96)}}

.toast .msg{flex:1;min-width:0}
.toast .undo{
  background:var(--gold);border:none;color:#fff;
  border-radius:999px;padding:.42rem 1.1rem;
  font-weight:700;font-size:.84rem;font-family:inherit;
  display:inline-flex;align-items:center;gap:.35rem;flex-shrink:0;
  transition:.15s;
}
.toast .undo:hover{background:var(--gold-lite);transform:translateY(-1px)}
.toast .undo:disabled{opacity:.5;cursor:wait}

/* the countdown ring */
.toast .timer{
  position:relative;width:22px;height:22px;flex-shrink:0;
}
.toast .timer svg{transform:rotate(-90deg);width:100%;height:100%}
.toast .timer circle{
  fill:none;stroke-width:2.5;
  stroke:rgba(255,255,255,.18);
}
.toast .timer circle.go{
  stroke:var(--gold-lite);
  stroke-dasharray:57;stroke-dashoffset:0;
  animation:ring 8s linear forwards;
}
@keyframes ring{to{stroke-dashoffset:57}}

/* undo buttons on the summary rail */
.undo-line{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:.8rem;color:var(--text-soft);
  background:var(--gold-mist);border:1px solid rgba(26,86,219,.16);
  border-radius:10px;padding:.55rem .8rem;margin-top:.5rem;
}
.undo-line button{
  background:none;border:none;color:var(--gold-deep);
  font-weight:700;font-size:.8rem;font-family:inherit;
  display:inline-flex;align-items:center;gap:.3rem;
}
.undo-line button:hover{text-decoration:underline}

/* ============================================================
   ANALYTICS
   ============================================================ */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.4rem}
.kpi{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:1.2rem;box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.kpi::after{
  content:"";position:absolute;top:-30px;right:-30px;width:90px;height:90px;
  border-radius:50%;background:var(--gold-mist);
}
.kpi .lab{
  font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-soft);font-weight:600;position:relative;z-index:1;
}
.kpi .val{
  font-family:var(--font-display);font-size:1.75rem;font-weight:700;
  line-height:1.15;margin-top:.2rem;position:relative;z-index:1;
}
.kpi .sub{font-size:.78rem;color:var(--text-soft);position:relative;z-index:1;margin-top:.15rem}
.kpi.good .val{color:var(--ok)}
.kpi.warn .val{color:var(--warn)}
.kpi.bad .val{color:var(--bad)}
.kpi.good::after{background:#E4F6EA}
.kpi.warn::after{background:#FDF3E0}
.kpi.bad::after{background:#FBE3DE}

/* bar chart */
.chart{display:flex;align-items:flex-end;gap:.35rem;height:190px;padding-top:1rem}
.bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative}
.bar{
  width:100%;max-width:38px;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,var(--gold-lite),var(--gold));
  transition:height .6s cubic-bezier(.4,0,.2,1),background .2s;
  min-height:3px;position:relative;
}
.bar-col:hover .bar{background:linear-gradient(180deg,var(--gold),var(--gold-deep))}
.bar .tip{
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--cream);font-size:.72rem;font-weight:600;
  padding:.3rem .6rem;border-radius:7px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s;
}
.bar-col:hover .tip{opacity:1}
.bar-lab{font-size:.66rem;color:var(--muted);margin-top:.35rem;white-space:nowrap}

/* split bars (cash vs transfer) */
.bar.split{background:none;display:flex;flex-direction:column;justify-content:flex-end}
.bar .cash{background:linear-gradient(180deg,#4FB877,#2E9E5B);border-radius:6px 6px 0 0}
.bar .xfer{background:linear-gradient(180deg,var(--gold-lite),var(--gold))}
.bar .cash + .xfer{border-radius:0}

.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--text-soft);margin-top:.8rem}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:.35rem;vertical-align:-1px}

/* service breakdown rows */
.svc-bar{margin-bottom:.85rem}
.svc-bar .hd{display:flex;justify-content:space-between;font-size:.86rem;margin-bottom:.3rem}
.svc-bar .hd b{font-family:var(--font-display)}
.svc-bar .track2{height:9px;background:var(--line-soft);border-radius:99px;overflow:hidden}
.svc-bar .track2 i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-lite),var(--gold-deep));
  transition:width .7s cubic-bezier(.4,0,.2,1);
}

/* activity feed */
.act{
  display:flex;gap:.8rem;padding:.75rem 0;border-bottom:1px solid var(--line-soft);
  align-items:flex-start;font-size:.88rem;
}
.act:last-child{border-bottom:none}
.act .ai{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:grid;place-items:center;font-size:.9rem;
  background:var(--gold-mist);border:1px solid rgba(26,86,219,.16);
}
.act .ab{flex:1;min-width:0}
.act .ab b{display:block;font-weight:600}
.act .ab span{font-size:.78rem;color:var(--text-soft)}
.act .at{font-size:.74rem;color:var(--muted);white-space:nowrap;flex-shrink:0}
.act.undo .ai{background:#FBE3DE;border-color:#F0C4BC}
.act.money .ai{background:#E4F6EA;border-color:#BFE5CC}

.tabs{display:flex;gap:.4rem;margin-bottom:1.2rem;flex-wrap:wrap}
.tab{
  background:var(--white);border:1px solid var(--line-soft);border-radius:999px;
  padding:.45rem 1.1rem;font-size:.86rem;font-weight:600;color:var(--text-soft);transition:.15s;
}
.tab:hover{border-color:var(--gold);color:var(--gold-deep)}
.tab.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* ============================================================
   VOID + DANGER ACTIONS
   ============================================================ */
.danger-zone{
  margin-top:1.2rem;padding-top:1rem;border-top:1px dashed var(--line-soft);
}
.btn-void{
  background:transparent;border:1px solid #F0C4BC;color:var(--bad);
  width:100%;border-radius:999px;padding:.65rem 1.2rem;
  font-weight:600;font-size:.86rem;transition:.15s;
}
.btn-void:hover{background:#FBE3DE;border-color:var(--bad)}

.void-banner{
  background:linear-gradient(135deg,#FBE3DE,#F7D0C8);
  border:1px solid #E8A093;border-radius:var(--radius);
  padding:1rem 1.2rem;margin-bottom:1.4rem;
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
}
.void-banner b{font-family:var(--font-display);color:#8C2A18}
.void-banner span{font-size:.85rem;color:#A5341F}
.void-banner .push{margin-left:auto}

/* delivery fee editor */
.fee-box{
  background:var(--gold-mist);border:1px solid rgba(26,86,219,.2);
  border-radius:12px;padding:.9rem;margin-top:.6rem;
}
.fee-box label{font-size:.8rem;font-weight:600;display:block;margin-bottom:.4rem}
.fee-row{display:flex;gap:.5rem}
.fee-row input{
  flex:1;padding:.6rem .8rem;border:1px solid var(--line-soft);
  border-radius:10px;font-size:.95rem;
}
.fee-row input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(26,86,219,.12)}

/* ============================================================
   CUSTOMER SIDE
   ============================================================ */
.cust-wrap{
  min-height:100vh;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0E1B33,#1C3054 55%,#152443);
  padding:2rem 1rem;
}
.cust-inner{width:min(880px,100%);margin:0 auto;position:relative;z-index:3}

.cust-head{text-align:center;margin-bottom:2rem}
.cust-head .mark{
  width:78px;height:78px;margin:0 auto 1rem;border-radius:22px;background:#fff;
  padding:9px;box-shadow:0 10px 32px rgba(26,86,219,.35);
  animation:markFloat 3.6s ease-in-out infinite;
}
.cust-head h1{
  font-family:var(--font-display);font-size:2rem;color:#fff;
  font-weight:700;line-height:1.15;
}
.cust-head p{color:#A8B6CE;font-size:.98rem;margin-top:.3rem}

.track-card{
  background:#fff;border-radius:var(--radius-lg);padding:2rem;
  box-shadow:var(--shadow-lg);
}
.track-card h2{font-family:var(--font-display);font-size:1.3rem;margin-bottom:.3rem}
.track-card .sub{color:var(--text-soft);font-size:.9rem;margin-bottom:1.5rem}

/* the customer's order card */
.cust-order{
  background:#fff;border-radius:var(--radius-lg);padding:1.6rem;
  box-shadow:var(--shadow-lg);margin-bottom:1.2rem;
}
.co-head{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line-soft);
}
.co-head .tk{flex:1;min-width:0}
.co-head .tk b{
  display:block;font-family:var(--font-display);font-size:1.35rem;line-height:1.15;
}
.co-head .tk span{font-size:.83rem;color:var(--text-soft)}

/* big status stages the customer sees */
.stages{display:flex;gap:.4rem;margin-bottom:1.4rem}
.stage{
  flex:1;text-align:center;padding:.8rem .4rem;border-radius:12px;
  border:1.5px solid var(--line-soft);background:var(--white);
  font-size:.78rem;font-weight:600;color:var(--muted);position:relative;
}
.stage .ico{display:block;font-size:1.4rem;margin-bottom:.2rem;opacity:.35}
.stage.done{background:#E4F6EA;border-color:#4FB877;color:#1F7A45}
.stage.done .ico{opacity:1}
.stage.now{
  background:linear-gradient(180deg,var(--gold-mist),var(--gold-soft));
  border-color:var(--gold);color:var(--gold-deep);
  box-shadow:0 4px 14px rgba(26,86,219,.18);
}
.stage.now .ico{opacity:1;animation:tumble 1.6s ease-in-out infinite}

/* customer's garment rows */
.cg{
  display:flex;align-items:center;gap:.8rem;padding:.8rem 0;
  border-bottom:1px solid var(--line-soft);
}
.cg:last-child{border-bottom:none}
.cg .ci{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:grid;place-items:center;font-size:1rem;
  background:var(--gold-mist);border:1px solid rgba(26,86,219,.16);
}
.cg.done .ci{background:#E4F6EA;border-color:#BFE5CC}
.cg .cb{flex:1;min-width:0}
.cg .cb b{display:block;font-size:.94rem}
.cg .cb span{font-size:.78rem;color:var(--text-soft)}
.cg .cs{font-size:.76rem;font-weight:700;padding:.25rem .7rem;border-radius:999px;flex-shrink:0}
.cg .cs.pending{background:#EEF3F9;color:#2B5A8C}
.cg .cs.processing{background:var(--gold-soft);color:var(--gold-deep)}
.cg .cs.done{background:#D3F0DD;color:#1F7A45}

/* the big choice */
.choice{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.2rem}
@media(max-width:520px){.choice{grid-template-columns:1fr}}
.choice button{
  padding:1.2rem 1rem;border-radius:14px;border:2px solid var(--line-soft);
  background:var(--white);text-align:center;transition:.18s;font-family:inherit;
}
.choice button:hover{border-color:var(--gold);background:var(--gold-mist);transform:translateY(-2px)}
.choice button .ico{display:block;font-size:1.9rem;margin-bottom:.35rem}
.choice button b{display:block;font-size:.98rem;font-family:var(--font-display)}
.choice button span{font-size:.78rem;color:var(--text-soft)}
.choice button.on{
  border-color:var(--gold);background:linear-gradient(180deg,var(--gold-mist),var(--gold-soft));
  box-shadow:0 6px 20px rgba(26,86,219,.2);
}

/* pay box */
.pay-box{
  background:linear-gradient(140deg,var(--ink),var(--ink-3));
  color:var(--cream);border-radius:14px;padding:1.3rem;margin-top:1.2rem;
}
.pay-box .amt{
  font-family:var(--font-display);font-size:2rem;font-weight:700;
  color:#fff;line-height:1.1;
}
.pay-box .lab{font-size:.78rem;color:#9FB0CC;text-transform:uppercase;letter-spacing:.08em}
.pay-line{display:flex;justify-content:space-between;font-size:.88rem;padding:.35rem 0;color:#C7D2E4}
.pay-line b{color:#fff}
.pay-line.tot{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.7rem;font-size:1rem}
.bank{
  background:rgba(255,255,255,.07);border:1px solid var(--line);
  border-radius:11px;padding:.9rem;margin-top:.9rem;font-size:.86rem;
}
.bank .row{display:flex;justify-content:space-between;padding:.2rem 0}
.bank .row span{color:#9FB0CC}
.bank .row b{color:#fff;font-family:monospace;letter-spacing:.04em}
.copy-btn{
  background:var(--gold);border:none;color:#fff;border-radius:8px;
  padding:.2rem .6rem;font-size:.74rem;font-weight:700;font-family:inherit;margin-left:.4rem;
}
.copy-btn:hover{background:var(--gold-lite)}

.cust-foot{text-align:center;color:#7E8DA8;font-size:.82rem;margin-top:2rem}
.cust-foot a{color:var(--gold-lite);font-weight:600}

/* ============================================================
   RECEIPT — saved, viewable, ACTIVE / EXPIRED
   ============================================================ */
.rcpt-wrap{
  background:#fff;border-radius:14px;padding:1.2rem;
  border:1px solid var(--line-soft);position:relative;overflow:hidden;
}
.rcpt-wrap.expired{opacity:.72}
.rcpt-wrap.expired::after{
  content:"EXPIRED";
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-22deg);
  font-family:var(--font-display);font-size:2.6rem;font-weight:800;
  color:rgba(198,69,47,.16);letter-spacing:.12em;pointer-events:none;
  border:5px solid rgba(198,69,47,.16);border-radius:12px;padding:.2rem 1.2rem;
}

.tag{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .85rem;border-radius:999px;
  font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.tag.active{
  background:linear-gradient(135deg,#D3F0DD,#BFE5CC);color:#1F7A45;
  border:1px solid #4FB877;
  animation:tagPulse 2.4s ease-in-out infinite;
}
@keyframes tagPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(79,184,119,.4)}
  50%{box-shadow:0 0 0 6px rgba(79,184,119,0)}
}
.tag.expired{
  background:#F1EFEC;color:#8A8078;border:1px solid #D8D2CB;
}

.rcpt{
  font-family:'Courier New',monospace;font-size:12px;line-height:1.55;color:#111;
  background:#fff;
}
.rcpt .c{text-align:center}
.rcpt hr{border:none;border-top:1px dashed #BBB;margin:8px 0}
.rcpt .lg{font-size:15px;font-weight:bold}
.rcpt .code{
  font-size:26px;font-weight:bold;letter-spacing:5px;
  color:var(--gold-deep);
}
.rcpt table{width:100%;font-size:11px}
.rcpt td{padding:1px 0;vertical-align:top}
.rcpt td.r{text-align:right}
.rcpt .mini{font-size:9px;color:#666}

.rcpt-actions{display:flex;gap:.6rem;margin-top:1rem}
.rcpt-actions .btn{flex:1}

/* ============================================================
   READY → CALL THE CUSTOMER
   ============================================================ */
.call-strip{
  background:linear-gradient(135deg,#E4F6EA,#D3F0DD);
  border:1px solid #4FB877;border-radius:var(--radius);
  padding:1.1rem 1.2rem;margin-bottom:1.4rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.call-strip .ring{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:#fff;display:grid;place-items:center;font-size:1.3rem;
  animation:ringing 1.8s ease-in-out infinite;
}
@keyframes ringing{
  0%,100%{transform:rotate(0)}
  10%{transform:rotate(-14deg)}
  20%{transform:rotate(14deg)}
  30%{transform:rotate(-10deg)}
  40%{transform:rotate(10deg)}
  50%{transform:rotate(0)}
}
.call-strip .cs-b{flex:1;min-width:0}
.call-strip .cs-b b{
  display:block;font-family:var(--font-display);color:#1F7A45;font-size:1.05rem;
}
.call-strip .cs-b span{font-size:.85rem;color:#2E7A50}
.call-strip .acts{display:flex;gap:.5rem;flex-wrap:wrap}
.btn-call{
  background:#2E9E5B;color:#fff;border:none;border-radius:999px;
  padding:.6rem 1.2rem;font-weight:700;font-size:.88rem;font-family:inherit;
  display:inline-flex;align-items:center;gap:.4rem;transition:.15s;min-height:48px;
}
.btn-call:hover{background:#25834B;transform:translateY(-1px)}
.btn-wa{
  background:#25D366;color:#fff;border:none;border-radius:999px;
  padding:.6rem 1.2rem;font-weight:700;font-size:.88rem;font-family:inherit;
  display:inline-flex;align-items:center;gap:.4rem;transition:.15s;min-height:48px;
}
.btn-wa:hover{background:#1FB855;transform:translateY(-1px)}
@media(max-width:600px){
  .call-strip .acts{gap:.35rem}
  .btn-call,.btn-wa{padding:.7rem 1rem;font-size:.85rem;min-height:48px}
}
@media(max-width:480px){
  .call-strip{flex-direction:column}
  .call-strip .ring{align-self:flex-start}
  .call-strip .acts{width:100%;gap:.4rem}
  .btn-call,.btn-wa{flex:1;padding:.75rem .6rem;font-size:.8rem}
  .btn-ghost.btn-sm{width:100%;padding:.75rem}
  
  /* track buttons get min height on small screens */
  .step{min-height:46px;padding:.5rem .3rem}
  .step .ico{font-size:1.1rem;margin-bottom:.2rem}
}

.notified{
  font-size:.78rem;color:#2E7A50;font-weight:600;
  display:inline-flex;align-items:center;gap:.3rem;
}

/* the dashboard "needs calling" pile */
.call-pile{
  background:linear-gradient(135deg,#E4F6EA,#D3F0DD);
  border:1px solid #4FB877;border-radius:var(--radius);
  padding:1rem 1.2rem;margin-bottom:1.4rem;
}
.call-pile .hd{
  display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;
}
.call-pile .hd b{font-family:var(--font-display);color:#1F7A45;font-size:1rem}
.cp-row{
  display:flex;align-items:center;gap:.7rem;padding:.6rem 0;
  border-top:1px solid rgba(79,184,119,.3);
}
.cp-row .nm{flex:1;min-width:0;font-size:.9rem}
.cp-row .nm b{display:block}
.cp-row .nm span{font-size:.78rem;color:#2E7A50}

/* ============================================================
   CUSTOMERS
   ============================================================ */
.search-box{position:relative;margin-bottom:1.2rem}
.search-box input{
  width:100%;padding:.85rem 1rem .85rem 2.8rem;
  border:1px solid var(--line-soft);border-radius:12px;
  background:var(--white);font-size:.98rem;
}
.search-box input:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(26,86,219,.12);
}
.search-box .ico{
  position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:1.05rem;pointer-events:none;
}

.cust-row{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:1rem 1.2rem;margin-bottom:.75rem;display:flex;align-items:center;gap:1rem;
  box-shadow:var(--shadow);transition:transform .18s,border-color .18s,box-shadow .18s;
  cursor:pointer;
}
.cust-row:hover{transform:translateX(4px);border-color:var(--gold);box-shadow:var(--shadow-lg)}
.cust-row.open{border-color:var(--gold);background:var(--gold-mist)}

.avatar{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;
  display:grid;place-items:center;font-family:var(--font-display);
  font-weight:700;font-size:1.05rem;color:#fff;
  background:linear-gradient(140deg,var(--gold-lite),var(--gold-deep));
  box-shadow:0 4px 12px rgba(26,86,219,.22);
}
.cr-b{flex:1;min-width:0}
.cr-b b{display:block;font-size:1rem}
.cr-b span{font-size:.83rem;color:var(--text-soft);display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.cr-b .dot{color:var(--muted)}
.cr-stats{display:flex;gap:1.4rem;flex-shrink:0;text-align:right}
.cr-stats div b{
  display:block;font-family:var(--font-display);font-size:1.05rem;line-height:1.2;
}
.cr-stats div span{font-size:.72rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:.05em}
@media(max-width:700px){
  .cust-row{flex-wrap:wrap}
  .cr-stats{width:100%;justify-content:space-between;text-align:left;padding-top:.6rem;border-top:1px solid var(--line-soft)}
}

/* expanded history */
.cust-detail{
  background:var(--white);border:1px solid var(--gold);border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  padding:1.2rem;margin-top:-.85rem;margin-bottom:.85rem;
  animation:slideDown .25s ease;
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}
.hist{
  display:flex;align-items:center;gap:.8rem;padding:.7rem 0;
  border-bottom:1px solid var(--line-soft);font-size:.9rem;
}
.hist:last-child{border-bottom:none}
.hist .hi{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  display:grid;place-items:center;font-size:.9rem;
  background:var(--gold-mist);border:1px solid rgba(26,86,219,.16);
}
.hist .hb{flex:1;min-width:0}
.hist .hb b{display:block}
.hist .hb span{font-size:.78rem;color:var(--text-soft)}
.hist .hm{font-family:var(--font-display);font-weight:700;white-space:nowrap}

.cd-top{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:.8rem;margin-bottom:1.1rem;padding-bottom:1.1rem;
  border-bottom:1px solid var(--line-soft);
}
.cd-stat{text-align:center;padding:.6rem;background:var(--cream);border-radius:10px}
.cd-stat b{display:block;font-family:var(--font-display);font-size:1.2rem}
.cd-stat span{font-size:.72rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:.05em}

.edit-row{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}

/* ============================================================
   SETTINGS
   ============================================================ */
.set-section{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--shadow);margin-bottom:1.4rem;
}
.set-section .sh{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.set-section .sh .si{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  display:grid;place-items:center;font-size:1.2rem;
  background:linear-gradient(140deg,var(--gold-mist),var(--gold-soft));
  border:1px solid rgba(26,86,219,.2);
}
.set-section .sh b{font-family:var(--font-display);font-size:1.1rem;display:block}
.set-section .sh span{font-size:.83rem;color:var(--text-soft)}

.set-preview{
  background:linear-gradient(140deg,var(--ink),var(--ink-3));
  color:var(--cream);border-radius:12px;padding:1.1rem;margin-top:1rem;
}
.set-preview .pl{font-size:.72rem;color:#9FB0CC;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem}
.set-preview .row{display:flex;justify-content:space-between;padding:.25rem 0;font-size:.9rem}
.set-preview .row span{color:#9FB0CC}
.set-preview .row b{color:#fff;font-family:monospace;letter-spacing:.03em}

/* ============================================================
   MOBILE POLISH — phone-first for the shop counter
   ============================================================ */
@media(max-width:600px){
  /* tighter shell padding */
  .main{padding:1rem .9rem}
  .top h1{font-size:1.4rem}
  .top{margin-bottom:1.2rem}

  /* stat cards: 2 per row, not cramped singles */
  .stat-row{grid-template-columns:1fr 1fr;gap:.7rem}
  .stat{padding:.9rem;gap:.6rem}
  .stat .float-ico{width:38px;height:38px;font-size:1.05rem}
  .stat b{font-size:1.3rem}
  .stat span{font-size:.74rem}
  .kpi-row{grid-template-columns:1fr 1fr;gap:.7rem}
  .kpi{padding:.9rem}
  .kpi .val{font-size:1.4rem}

  /* the "new drop-off" button in headers shouldn't shove the title */
  .top{flex-direction:column}
  .top .btn{width:100%}

  /* panels breathe less */
  .panel{padding:1.1rem}

  /* order hero stacks cleanly */
  .ord-hero{padding:1.1rem;gap:.8rem}
  .ord-hero .tk b{font-size:1.5rem}
  .ord-hero .sep{display:none}
  .ord-hero .push{margin-left:0;width:100%;gap:.35rem}

  /* status track: keep 3 across but smaller */
  .track{gap:.35rem}
  .step{padding:.5rem .2rem;font-size:.72rem;min-height:44px}
  .step .ico{font-size:1rem}

  /* customer choice buttons full width already, tighten */
  .choice button{padding:1rem .8rem}

  /* pricing grid: make cells tap-friendly */
  .price-cell input{width:70px;padding:.5rem}
  table.price-grid th,table.price-grid td{padding:.55rem}

  /* toast clear of the mobile nav bar */
  .toast-rail{bottom:16px;width:94%;}
  .toast{width:100%;padding:.7rem 1rem;font-size:.85rem}
  .toast .undo{padding:.4rem .9rem}

  /* modals fit */
  .modal{padding:.8rem}
  .modal-card{padding:1.2rem;border-radius:16px}
  .modal-card h3{font-size:1.15rem;margin-bottom:.6rem}
  .modal-card .sub{font-size:.85rem}
  .modal-actions{gap:.5rem}
  .modal-actions .btn{flex:1;min-height:48px;padding:.7rem .8rem}

  /* customer page */
  .cust-inner{width:100%}
  .cust-head h1{font-size:1.6rem}
  .cust-order{padding:1.2rem}
  .stages{gap:.3rem}
  .stage{padding:.6rem .2rem;font-size:.68rem}
  .stage .ico{font-size:1.1rem}

  /* receipt fits phone width */
  .rcpt-wrap{padding:1rem}
  .ticket,.rcpt{width:100%;max-width:280px;margin:0 auto}

  /* customers list stats wrap */
  .cr-stats{gap:1rem}

  /* pay box */
  .pay-box{padding:1.1rem}
  .pay-box .amt{font-size:1.7rem}

  /* fee box stacking */
  .fee-row{display:flex;flex-direction:column;gap:.6rem}
  .fee-row input{width:100%}
  .fee-row button{width:100%;padding:.75rem;min-height:48px}

  /* filters/tabs scroll horizontally instead of wrapping messily */
  .tabs,.filter-row{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:.3rem;
  }
  .tabs::-webkit-scrollbar,.filter-row::-webkit-scrollbar{height:0}
  .tab,.filter{flex-shrink:0}
}

/* very small phones */
@media(max-width:380px){
  .stat-row,.kpi-row{grid-template-columns:1fr}
  .ord-hero .tk b{font-size:1.3rem}
}

/* make sure nothing ever forces horizontal scroll on the body */
html,body{max-width:100%;overflow-x:hidden}

/* bigger tap targets everywhere on touch devices */
@media(hover:none){
  .btn,.step,.svc,.choice button,.filter,.tab{min-height:42px}
  .pw-eye{width:42px;height:42px}
  .qty button{width:34px;height:34px}
}

/* ============================================================
   CUSTOMER STOREFRONT HOMEPAGE
   ============================================================ */
.home{position:relative;overflow-x:hidden;background:var(--cream)}

/* hero with shifting scenes */
.hero{
  position:relative;overflow:hidden;padding:2.5rem 1.2rem 3rem;
  min-height:auto;
}
.hero-inner{position:relative;z-index:3;width:min(720px,100%);margin:0 auto;text-align:center}
.hero .mark{
  width:72px;height:72px;margin:0 auto 1rem;border-radius:20px;background:#fff;
  padding:8px;box-shadow:0 10px 30px rgba(26,86,219,.35);
  animation:markFloat 3.6s ease-in-out infinite;
}
.hero h1{
  font-family:var(--font-display);font-size:2.3rem;font-weight:800;
  color:#fff;line-height:1.1;text-shadow:0 2px 20px rgba(0,0,0,.25);
}
.hero .tag{color:rgba(255,255,255,.92);font-size:1.05rem;margin-top:.4rem;text-shadow:0 1px 8px rgba(0,0,0,.2)}
.hero .scene-badge{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px);border-radius:999px;padding:.35rem 1rem;
  font-size:.8rem;color:#fff;font-weight:600;transition:opacity .5s;
}

/* the track panel — medium, in the flow */
.track-panel{
  width:min(440px,100%);margin:1.8rem auto 0;
  background:#fff;border-radius:20px;padding:1.6rem;
  box-shadow:0 20px 50px rgba(14,27,51,.28);position:relative;z-index:3;
}
.track-panel h2{font-family:var(--font-display);font-size:1.25rem;text-align:center;margin-bottom:.2rem}
.track-panel .ps{text-align:center;color:var(--text-soft);font-size:.88rem;margin-bottom:1.2rem}
.track-panel .code-in{
  letter-spacing:.5em;font-size:1.2rem;font-weight:700;text-align:center;
}

/* section wrapper */
.sec{padding:2.8rem 1.2rem;position:relative;z-index:2}
.sec-inner{width:min(1080px,100%);margin:0 auto}
.sec-head{text-align:center;margin-bottom:2rem}
.sec-head h2{font-family:var(--font-display);font-size:1.7rem;font-weight:700}
.sec-head p{color:var(--text-soft);margin-top:.3rem}

/* services grid */
.serv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.serv-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:16px;
  padding:1.6rem 1.2rem;text-align:center;transition:transform .2s,box-shadow .2s;
  box-shadow:var(--shadow);
}
.serv-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.serv-card .si{
  width:60px;height:60px;margin:0 auto .8rem;border-radius:16px;
  display:grid;place-items:center;font-size:1.8rem;
  background:linear-gradient(140deg,var(--gold-mist),var(--gold-soft));
  border:1px solid rgba(26,86,219,.2);
}
.serv-card b{font-family:var(--font-display);font-size:1.05rem;display:block;margin-bottom:.3rem}
.serv-card span{font-size:.85rem;color:var(--text-soft)}

/* how it works */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.step-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:16px;
  padding:1.5rem;position:relative;box-shadow:var(--shadow);
}
.step-card .num{
  position:absolute;top:-14px;left:1.5rem;width:34px;height:34px;border-radius:50%;
  background:var(--gold);color:#fff;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;box-shadow:0 4px 12px rgba(26,86,219,.3);
}
.step-card .se{font-size:1.8rem;margin:.5rem 0}
.step-card b{font-family:var(--font-display);display:block;margin-bottom:.3rem}
.step-card span{font-size:.86rem;color:var(--text-soft)}

/* why us */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.why{display:flex;gap:.9rem;align-items:flex-start;background:#fff;
  border:1px solid var(--line-soft);border-radius:14px;padding:1.2rem;box-shadow:var(--shadow)}
.why .wi{font-size:1.5rem;flex-shrink:0}
.why b{font-family:var(--font-display);display:block;margin-bottom:.2rem}
.why span{font-size:.85rem;color:var(--text-soft)}

/* contact */
.contact-card{
  background:linear-gradient(140deg,var(--ink),var(--ink-3));color:var(--cream);
  border-radius:20px;padding:2rem;text-align:center;
}
.contact-card h2{font-family:var(--font-display);color:#fff;font-size:1.5rem;margin-bottom:1.2rem}
.contact-row{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}
.contact-row .ci{color:#B8C6DE}
.contact-row .ci b{display:block;color:#fff;font-size:1.05rem;margin-top:.2rem}

/* home footer */
.home-foot{
  background:var(--ink);color:#8F9BB3;text-align:center;padding:1.6rem;font-size:.85rem;
}
.home-foot a{color:var(--gold-lite)}
.home-foot .sl{opacity:.5;font-size:.78rem}

/* section tint alternation */
.sec.tint{background:#fff}

@media(max-width:600px){
  .hero{padding:2rem 1rem 2.5rem}
  .hero h1{font-size:1.9rem}
  .hero .tag{font-size:.95rem}
  .track-panel{padding:1.3rem}
  .sec{padding:2.2rem 1rem}
  .sec-head h2{font-size:1.4rem}
  .contact-row{gap:1.2rem}
}

/* ============================================================
   MATCH GAME — "Sort the Laundry"
   ============================================================ */
.game-wrap{
  background:#fff;border:1px solid var(--line-soft);border-radius:20px;
  padding:1.5rem;box-shadow:var(--shadow-lg);max-width:520px;margin:0 auto;
}
.game-head{text-align:center;margin-bottom:1.2rem}
.game-head b{font-family:var(--font-display);font-size:1.2rem;display:block}
.game-head span{font-size:.85rem;color:var(--text-soft)}

.game-stats{display:flex;justify-content:space-around;margin-bottom:1.2rem;
  background:var(--gold-mist);border-radius:12px;padding:.7rem}
.game-stats div{text-align:center}
.game-stats b{font-family:var(--font-display);font-size:1.3rem;display:block;color:var(--gold-deep)}
.game-stats span{font-size:.72rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:.05em}

.game-board{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-bottom:1rem;
}
.tile{
  aspect-ratio:1;border-radius:14px;border:2px solid var(--line-soft);
  background:var(--cream);display:grid;place-items:center;cursor:pointer;
  transition:transform .15s,border-color .15s,background .15s;position:relative;
  -webkit-tap-highlight-color:transparent;
}
.tile:hover{transform:scale(1.04);border-color:var(--gold)}
.tile svg{width:58%;height:58%}
.tile.flipped{background:var(--gold-mist);border-color:var(--gold)}
.tile.matched{
  background:linear-gradient(140deg,#E4F6EA,#D3F0DD);border-color:#4FB877;
  cursor:default;animation:matchPop .4s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes matchPop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
.tile.hidden-face svg{opacity:0}
.tile .q{position:absolute;font-size:1.6rem;color:var(--gold);opacity:.5}
.tile.flipped .q,.tile.matched .q{display:none}

.game-win{
  text-align:center;padding:1.5rem;
}
.game-win .big{font-size:3rem;animation:pop .6s cubic-bezier(.2,.9,.3,1.4)}
.game-win b{font-family:var(--font-display);font-size:1.4rem;color:#1F7A45;display:block;margin:.5rem 0}

/* ============================================================
   GAMES PAGE
   ============================================================ */
.games-wrap{position:relative;min-height:100vh;overflow-x:hidden;
  background:linear-gradient(160deg,#0E1B33,#1C3054 55%,#152443);padding:1.5rem 1rem 3rem}
.games-inner{width:min(600px,100%);margin:0 auto;position:relative;z-index:3}

.games-top{display:flex;align-items:center;gap:.9rem;margin-bottom:1.5rem;color:#fff}
.games-top .mark{width:48px;height:48px;border-radius:13px;background:#fff;padding:6px;flex-shrink:0}
.games-top b{font-family:var(--font-display);font-size:1.15rem;display:block}
.games-top span{font-size:.82rem;color:#A8B6CE}
.games-top .back{margin-left:auto;color:#A8B6CE;font-size:.85rem}

/* game picker tabs */
.game-pick{display:flex;gap:.5rem;margin-bottom:1.2rem;background:rgba(255,255,255,.08);
  border-radius:14px;padding:.4rem}
.game-pick button{
  flex:1;background:none;border:none;color:#A8B6CE;font-family:inherit;
  padding:.7rem .4rem;border-radius:10px;font-weight:600;font-size:.86rem;transition:.15s;
}
.game-pick button.on{background:var(--gold);color:#fff;box-shadow:0 4px 12px rgba(26,86,219,.4)}

.game-stage{
  background:#fff;border-radius:20px;padding:1.4rem;box-shadow:0 20px 50px rgba(14,27,51,.3);
}

/* score bar */
.score-bar{display:flex;justify-content:space-around;margin-bottom:1.2rem;
  background:var(--gold-mist);border-radius:12px;padding:.8rem}
.score-bar div{text-align:center}
.score-bar b{font-family:var(--font-display);font-size:1.4rem;display:block;color:var(--gold-deep)}
.score-bar span{font-size:.7rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:.05em}

/* canvas games */
.game-canvas-wrap{position:relative;display:grid;place-items:center;margin-bottom:1rem}
canvas.game{
  background:var(--cream);border-radius:14px;border:2px solid var(--line-soft);
  touch-action:none;max-width:100%;
}
.game-overlay{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(255,255,255,.92);border-radius:14px;text-align:center;padding:1rem;
}
.game-overlay .big{font-size:2.6rem;margin-bottom:.3rem}
.game-overlay b{font-family:var(--font-display);font-size:1.3rem;display:block;margin-bottom:.5rem}
.game-overlay p{color:var(--text-soft);font-size:.9rem;margin-bottom:1rem}

/* dpad for mobile */
.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,52px);
  gap:.4rem;justify-content:center;margin-top:.5rem}
.dpad button{
  background:var(--gold-mist);border:1px solid rgba(26,86,219,.2);border-radius:12px;
  font-size:1.3rem;color:var(--gold-deep);font-family:inherit;
  display:grid;place-items:center;-webkit-tap-highlight-color:transparent;transition:.1s;
}
.dpad button:active{background:var(--gold);color:#fff;transform:scale(.94)}
.dpad .up{grid-column:2;grid-row:1}
.dpad .left{grid-column:1;grid-row:2}
.dpad .down{grid-column:2;grid-row:2}
.dpad .right{grid-column:3;grid-row:2}

.game-hint{text-align:center;font-size:.8rem;color:var(--text-soft);margin-top:.6rem}

/* slide puzzle */
.slide-board{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
  aspect-ratio:1;max-width:340px;margin:0 auto 1rem}
.slide-tile{
  border-radius:12px;display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(140deg,var(--gold-mist),var(--gold-soft));
  border:2px solid var(--gold);transition:transform .12s;-webkit-tap-highlight-color:transparent;
  position:relative;
}
.slide-tile svg{width:50%;height:50%}
.slide-tile .n{position:absolute;top:4px;left:7px;font-size:.7rem;font-weight:700;color:var(--gold-deep)}
.slide-tile.empty{background:transparent;border:2px dashed var(--line-soft);cursor:default}
.slide-tile:active:not(.empty){transform:scale(.95)}

.play-btn{background:var(--gold);color:#fff;border:none;border-radius:999px;
  padding:.7rem 1.8rem;font-family:inherit;font-weight:700;font-size:.95rem}
.play-btn:hover{background:var(--gold-deep)}
/* ============================================================
   TOUCH DEVICE FIX — Disable hover effects on touch devices
   ============================================================ */

@media(hover:none){
  .filter:hover{border-color:var(--line-soft);color:var(--text-soft);background:var(--white)}
  .order-card:hover{transform:none;border-color:var(--line-soft);box-shadow:var(--shadow)}
  .side a:hover{background:transparent;color:#CFC6BA}
  .btn-call:hover{background:#2E9E5B;transform:none}
  .btn-wa:hover{background:#25D366;transform:none}
  .btn:hover{transform:none}
  .kpi:hover{transform:none;box-shadow:var(--shadow)}
  .cust-row:hover{transform:none;border-color:var(--line-soft);box-shadow:var(--shadow)}
  .stat:hover{transform:none}
  .panel:hover{transform:none}
  .serv-card:hover{transform:none;box-shadow:var(--shadow)}
  .step:hover{border-color:var(--line-soft);color:var(--muted)}
  .step:hover .ico{opacity:.5;transform:none}
  .tile:hover{transform:none;border-color:var(--line-soft)}
  .slide-tile:active:not(.empty){transform:none}
  .btn-ghost:hover{background:transparent;color:var(--text-soft)}
  .toast .undo:hover{background:var(--gold);transform:none}
  .badge:hover{transform:none}
}