/* Milani Lab 3D — base compartilhada (loja, pedido e painel)
   Conceito: bancada do laboratório. Topo em preto-violeta como o fundo do logo,
   vitrine em cinza "mesa de impressão", cartões brancos, roxo do cubo nos botões. */
:root{
  --night:#141219;      /* topo, hero e rodapé (fundo do logo) */
  --night-2:#1E1B25;
  --on-night:#F4F1FA;
  --on-night-muted:#ABA4B9;
  --bg:#F3F2F6;         /* cinza com leve viés violeta */
  --surface:#FFFFFF;
  --surface-2:#EBE9F1;
  --line:#DCD8E4;
  --ink:#1A1720;
  --muted:#686274;
  --accent:#6A3BD6;     /* roxo do cubo */
  --accent-hover:#5A2EC2;
  --accent-ink:#FFFFFF;
  --accent-soft:#ECE5FC;
  --accent-text:#5428BE;
  --hot:#D93B73;        /* promoção */
  --ok:#1C7F4E; --ok-soft:#E1F3E9;
  --warn:#9A5B00; --warn-soft:#FBEFD9;
  --err:#BD2F3B; --err-soft:#FBE4E6;
  --info:#2E62C9; --info-soft:#E3ECFB;

  --display:"Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body:"Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgb(20 18 25 / .06), 0 12px 32px -16px rgb(20 18 25 / .28);
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --night:#0C0B0F; --night-2:#16141B; --on-night:#F4F1FA; --on-night-muted:#ABA4B9;
    --bg:#111015; --surface:#1A1820; --surface-2:#24212C; --line:#312D3A;
    --ink:#EFECF6; --muted:#A39DB0;
    --accent:#8B5CF0; --accent-hover:#9C74F2; --accent-ink:#FFFFFF; --accent-soft:#2A2142; --accent-text:#BDA2FF;
    --hot:#F0679A; --ok:#4CC488; --ok-soft:#173326; --warn:#E8A84A; --warn-soft:#352915;
    --err:#F07580; --err-soft:#3A1A1F; --info:#7FA6F2; --info-soft:#1B2640;
    --shadow:0 1px 2px rgb(0 0 0 / .4), 0 14px 34px -16px rgb(0 0 0 / .7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --night:#0C0B0F; --night-2:#16141B; --on-night:#F4F1FA; --on-night-muted:#ABA4B9;
  --bg:#111015; --surface:#1A1820; --surface-2:#24212C; --line:#312D3A;
  --ink:#EFECF6; --muted:#A39DB0;
  --accent:#8B5CF0; --accent-hover:#9C74F2; --accent-ink:#FFFFFF; --accent-soft:#2A2142; --accent-text:#BDA2FF;
  --hot:#F0679A; --ok:#4CC488; --ok-soft:#173326; --warn:#E8A84A; --warn-soft:#352915;
  --err:#F07580; --err-soft:#3A1A1F; --info:#7FA6F2; --info-soft:#1B2640;
  --shadow:0 1px 2px rgb(0 0 0 / .4), 0 14px 34px -16px rgb(0 0 0 / .7);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15.5px/1.55 var(--body);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);font-stretch:112%;font-weight:750;line-height:1.08;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1240px;margin-inline:auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em}
.eyebrow{font:500 .72rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.7em 1.15em;border-radius:10px;border:1px solid transparent;font-weight:600;font-size:.95rem;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s,transform .1s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-dark{background:var(--ink);color:var(--surface)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-text)}
.btn-soft{background:var(--accent-soft);color:var(--accent-text)}
.btn-soft:hover{background:color-mix(in oklab,var(--accent-soft) 80%,var(--accent))}
.btn-wa{background:#1F9D55;color:#fff}
.btn-wa:hover{background:#178246}
.btn-danger{background:transparent;color:var(--err);border-color:color-mix(in oklab,var(--err) 40%,transparent)}
.btn-danger:hover{background:var(--err-soft)}
.btn-sm{min-height:34px;padding:.5em .8em;font-size:.85rem;border-radius:8px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none}
.icon-btn svg{width:20px;height:20px}
.icon-btn:hover{border-color:var(--accent);color:var(--accent-text)}

/* campos */
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field > label,.field > .lbl{font-size:.86rem;font-weight:600}
.field small{font-size:.8rem;color:var(--muted)}
.field .err{color:var(--err);font-size:.8rem}
.input,select.input,textarea.input{width:100%;min-height:44px;padding:.6em .8em;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
textarea.input{min-height:88px;resize:vertical;line-height:1.45}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent)}
.input.bad,.field.bad .input{border-color:var(--err)}
.input-group{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-height:44px;min-width:0}
.input-group:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent)}
.input-group span{padding-inline:.8em .2em;color:var(--muted);font-size:.9rem}
.input-group input{flex:1;min-width:0;width:100%;border:0;background:transparent;padding:.6em .8em .6em .3em;outline:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);flex:none}

/* chips e pílulas */
.chip{display:inline-flex;align-items:center;gap:.45em;min-height:36px;padding:.45em .9em;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.88rem;font-weight:500;white-space:nowrap;color:var(--ink)}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"],.chip.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.chip small{font-family:var(--mono);font-size:.72rem;opacity:.7}
.pill{display:inline-flex;align-items:center;gap:.4em;padding:.28em .65em;border-radius:999px;font:600 .74rem/1.2 var(--body);white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.s-aguardando_pagamento{background:var(--warn-soft);color:var(--warn)}
.pill.s-pago{background:var(--accent-soft);color:var(--accent-text)}
.pill.s-em_producao{background:var(--info-soft);color:var(--info)}
.pill.s-enviado{background:var(--ok-soft);color:var(--ok)}
.pill.s-entregue{background:var(--surface-2);color:var(--muted)}
.pill.s-cancelado{background:var(--err-soft);color:var(--err)}
.swatch{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .14),0 0 0 1px var(--line);flex:none}

/* camadas: sobreposição, janela, gaveta */
.shade{position:absolute;inset:0;background:rgb(12 10 16 / .55);animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(16px);opacity:.4}}
@keyframes slide{from{transform:translateX(32px);opacity:.4}}
body.lock{overflow:hidden}

.toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top,0px));transform:translate(-50%,-20px);z-index:100;max-width:min(92vw,460px);padding:12px 16px;border-radius:12px;background:var(--ink);color:var(--surface);font-size:.92rem;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--err);color:#fff}

.demo-flag{display:inline-flex;align-items:center;gap:.5em;font:600 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:.55em .8em;border-radius:999px;background:var(--warn-soft);color:var(--warn)}

/* marca */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--on-night);min-width:0}
.brand svg.cube{width:40px;height:40px;flex:none}
.brand img{height:44px;width:auto}
.brand b{display:block;font:800 1.05rem/1 var(--display);font-stretch:125%;letter-spacing:.04em;white-space:nowrap}
.brand small{display:block;margin-top:5px;font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-muted);white-space:nowrap}