/* ============================================================================
   ADMIN PANEL
   A working tool, not a showpiece: dense, legible, fast to scan on a phone
   between customers. Its own light palette, independent of either storefront.
   ========================================================================== */
:root{
  --a-bg:#F7F5F1; --a-card:#fff; --a-ink:#23201E; --a-mute:#6E6660; --a-faint:#9C938C;
  --a-line:#E4DED6; --a-line2:#D2C9BE;
  --a-gold:#B18A57; --a-gold-d:#8C6A3E;
  --a-green:#1B7F5A; --a-red:#C0392B; --a-blue:#2B6CB0; --a-amber:#B7791F;
  --a-r:12px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--a-bg); color:var(--a-ink);
  font-family:"Jost","Mukta","Segoe UI",system-ui,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,a,[role="button"]{touch-action:manipulation;user-select:none;-webkit-user-select:none}
input,textarea,select{font-size:16px;font-family:inherit}
:focus-visible{outline:2px solid var(--a-gold);outline-offset:2px;border-radius:6px}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(14px,3vw,28px)}
.hide{display:none!important}
.muted{color:var(--a-mute)} .faint{color:var(--a-faint)}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.2}

/* ------------------------------------------------------------------ login */
.login{max-width:400px;margin:10vh auto;padding:34px 30px;background:var(--a-card);
  border:1px solid var(--a-line);border-radius:18px;box-shadow:0 20px 50px -30px rgba(0,0,0,.3)}
.login img{width:62px;height:62px;border-radius:50%;margin-bottom:16px}
.login h1{font-size:1.45rem;margin-bottom:4px}
.login p{margin:0 0 22px;color:var(--a-mute);font-size:.9rem}

/* ------------------------------------------------------------------- shell */
.top{position:sticky;top:0;z-index:40;background:rgba(247,245,241,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--a-line)}
.top__in{display:flex;align-items:center;gap:14px;padding:10px 0}
.top__brand{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.top__brand img{width:38px;height:38px;border-radius:50%;flex:0 0 auto}
.top__brand b{font-size:.98rem;display:block;line-height:1.15}
.top__brand small{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--a-faint)}

.tabs{display:flex;gap:4px;overflow-x:auto;padding:0 0 8px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  flex:0 0 auto;min-height:40px;padding:.45em 1.1em;border-radius:100px;border:1px solid transparent;
  background:none;color:var(--a-mute);font:inherit;font-weight:500;font-size:.9rem;cursor:pointer;
}
.tabs button:hover{background:#EFEBE4}
.tabs button.on{background:var(--a-ink);color:#fff;border-color:var(--a-ink)}
.tabs button b{margin-left:.4em;opacity:.6;font-weight:600}

/* ------------------------------------------------------------------ pieces */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:42px;padding:.5em 1.1em;border-radius:100px;border:1px solid var(--a-line2);
  background:#fff;color:var(--a-ink);font:inherit;font-weight:500;font-size:.9rem;cursor:pointer;
  transition:background .15s,border-color .15s,transform .12s}
.btn:hover{border-color:var(--a-gold)}
.btn:active{transform:scale(.98)}
.btn--p{background:var(--a-ink);border-color:var(--a-ink);color:#fff}
.btn--p:hover{background:#000}
.btn--gold{background:var(--a-gold);border-color:var(--a-gold);color:#fff}
.btn--danger{color:var(--a-red);border-color:#E9C7C2}
.btn--danger:hover{background:#FDF3F2;border-color:var(--a-red)}
.btn--sm{min-height:34px;padding:.3em .8em;font-size:.82rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.card{background:var(--a-card);border:1px solid var(--a-line);border-radius:var(--a-r)}
.pad{padding:clamp(14px,2vw,20px)}
.sec{padding:clamp(16px,2.4vw,26px) 0}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.field{margin-bottom:13px}
.field label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--a-faint);margin-bottom:5px;font-weight:600}
.field input,.field textarea,.field select{
  width:100%;padding:.62em .8em;border-radius:9px;border:1px solid var(--a-line2);
  background:#fff;color:var(--a-ink)}
.field textarea{resize:vertical;min-height:66px}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--a-gold);box-shadow:0 0 0 3px rgba(177,138,87,.15)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.checks{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0 14px}
.checks label{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;
  color:var(--a-ink);text-transform:none;letter-spacing:0;font-weight:400;margin:0}
.checks input{width:auto}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{border:1px solid var(--a-line2);background:#fff;border-radius:100px;
  padding:.34em .85em;font-size:.84rem;cursor:pointer;min-height:34px;
  display:inline-flex;align-items:center}
.pill.on{background:var(--a-gold);border-color:var(--a-gold);color:#fff;font-weight:600}

.err{color:var(--a-red);font-size:.85rem;min-height:1.1em}
.ok{color:var(--a-green);font-size:.85rem}

/* ---------------------------------------------------------------- products */
.plist{display:grid;gap:9px}
.prow{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
  padding:9px 11px;background:#fff;border:1px solid var(--a-line);border-radius:11px}
.prow img{width:52px;height:52px;border-radius:8px;object-fit:cover;background:#F1EDE7}
.prow h4{font-size:.94rem;font-weight:600;margin:0;line-height:1.2}
.prow .meta{font-size:.76rem;color:var(--a-faint);margin-top:2px}
.prow .acts{display:flex;gap:6px;align-items:center}
.priceIn{width:96px;padding:.34em .5em;border-radius:8px;border:1px solid var(--a-line2);
  font-size:.88rem;text-align:right;font-variant-numeric:tabular-nums}
.priceIn.dirty{border-color:var(--a-amber);background:#FFFBF0}
.tag{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:.18em .55em;
  border-radius:100px;border:1px solid var(--a-line2);color:var(--a-mute)}
.tag--out{color:var(--a-red);border-color:#E9C7C2;background:#FDF3F2}

/* ------------------------------------------------------------------ orders */
.ostat{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;
  padding:.24em .7em;border-radius:100px;text-transform:uppercase;letter-spacing:.06em}
.s-new{background:#E8F0FB;color:var(--a-blue)}
.s-confirmed{background:#E9F6F0;color:var(--a-green)}
.s-packed{background:#FBF3E3;color:var(--a-amber)}
.s-shipped{background:#EDEAFB;color:#5A4BC4}
.s-delivered{background:#E6F4EA;color:#1E7A3E}
.s-cancelled{background:#FBEAE8;color:var(--a-red)}

.orow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;
  padding:12px;background:#fff;border:1px solid var(--a-line);border-radius:11px;
  cursor:pointer;transition:border-color .15s}
.orow:hover{border-color:var(--a-gold)}
.orow .ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;
  color:var(--a-faint)}
.orow h4{font-size:.95rem}
.orow .sub{font-size:.8rem;color:var(--a-mute)}
.orow .amt{text-align:right;font-weight:600;white-space:nowrap}

.odetail{display:grid;gap:14px}
.okv{display:grid;grid-template-columns:104px 1fr;gap:6px 12px;font-size:.9rem}
.okv dt{color:var(--a-faint);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  padding-top:2px}
.okv dd{margin:0}
.oitems{border:1px solid var(--a-line);border-radius:10px;overflow:hidden}
.oitem{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;font-size:.88rem;
  border-bottom:1px solid var(--a-line)}
.oitem:last-child{border-bottom:0}
.ototal{display:flex;justify-content:space-between;padding:11px 12px;font-weight:700;
  background:#FAF8F5}

/* --------------------------------------------------------------- insights */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px}
.kpi{background:#fff;border:1px solid var(--a-line);border-radius:var(--a-r);padding:14px 16px}
.kpi b{display:block;font-size:1.7rem;font-weight:600;line-height:1.1;
  font-variant-numeric:tabular-nums}
.kpi span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--a-faint)}
.chart{display:flex;align-items:flex-end;gap:2px;height:140px;padding-top:10px}
.chart div{flex:1;background:var(--a-gold);border-radius:3px 3px 0 0;min-height:2px;
  opacity:.85;transition:opacity .15s}
.chart div:hover{opacity:1}
.chartx{display:flex;justify-content:space-between;font-size:.7rem;color:var(--a-faint);
  margin-top:6px}
.toplist{display:grid;gap:7px}
.toprow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  font-size:.9rem;padding:7px 0;border-bottom:1px solid var(--a-line)}
.toprow:last-child{border-bottom:0}
.toprow i{font-style:normal;color:var(--a-faint);font-size:.8rem;width:18px}

/* ------------------------------------------------------------------ modal */
.sheet{position:fixed;inset:0;z-index:80;visibility:hidden}
.sheet.open{visibility:visible}
.sheet__veil{position:absolute;inset:0;background:rgba(20,16,12,.5);opacity:0;
  transition:opacity .28s}
.sheet.open .sheet__veil{opacity:1}
.sheet__panel{position:absolute;right:0;top:0;height:100%;width:min(560px,100%);
  background:var(--a-bg);display:flex;flex-direction:column;transform:translateX(102%);
  transition:transform .32s cubic-bezier(.22,.9,.28,1);
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.5)}
.sheet.open .sheet__panel{transform:none}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--a-line);background:#fff}
.sheet__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.sheet__x{width:42px;height:42px;border-radius:50%;border:1px solid var(--a-line2);
  background:#fff;cursor:pointer;font-size:1rem}

.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,14px);z-index:120;
  background:var(--a-ink);color:#fff;padding:.7em 1.2em;border-radius:100px;font-size:.88rem;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:90vw;
  text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:760px){
  .two,.three{grid-template-columns:1fr}
  .prow{grid-template-columns:44px 1fr;row-gap:8px}
  .prow img{width:44px;height:44px}
  .prow .acts{grid-column:1/-1;justify-content:flex-end}
  .orow{grid-template-columns:1fr auto}
  .okv{grid-template-columns:1fr;gap:2px 0}
  .okv dt{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .sheet__panel,.sheet__veil,.toast{transition:none}
}