:root{
  /* Clean Premium • Violet/Black/Blue */
  --bg:#050613;
  --panel:#0B0F22;
  --text:#F3F6FF;
  --muted:#A2AFD2;

  --a:#8B5CF6; /* violet */
  --b:#3B82F6; /* blue */
  --c:#22C55E;
  --bad:#EF4444;

  --r:20px;
  --shadow: 0 18px 60px rgba(0,0,0,.42);

  --t-fast: 150ms;
  --t: 220ms;
  --t-slow: 420ms;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(139,92,246,.20), transparent 60%),
    radial-gradient(820px 360px at 90% 10%, rgba(59,130,246,.16), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, #070A1A 100%);
  overflow-x:hidden;
}

/* Animated background */
body::before{
  content:"";
  position:fixed;
  inset:-40vh -20vw;
  z-index:-2;
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(900px 600px at 90% 15%, rgba(0,212,255,.20), transparent 62%),
    radial-gradient(900px 600px at 40% 120%, rgba(34,197,94,.12), transparent 62%),
    radial-gradient(900px 600px at 110% 90%, rgba(124,92,255,.10), transparent 62%);
  filter: blur(14px);
  animation: auroraMove 10s ease-in-out infinite alternate;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:.10;
  pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
@keyframes auroraMove{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(2vw,-2vh,0) scale(1.05); }
}

a{color:inherit; text-decoration:none}
code{background:rgba(255,255,255,.06); padding:.15rem .35rem; border-radius:10px}
img{max-width:100%; display:block}

.container{max-width:1120px; margin:0 auto; padding:0 16px}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background: rgba(7,10,18,.60);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header__inner{display:flex; align-items:center; gap:14px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.6px}
.brand__logo{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,212,255,.9));
  box-shadow: 0 14px 40px rgba(124,92,255,.22);
}
.brand__name{opacity:.98}
.brand__sub{
  font-weight:700;
  font-size:.9rem;
  color:rgba(147,160,194,.95);
  border:1px solid rgba(255,255,255,.10);
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.03);
}

.nav{display:flex; gap:10px; margin-left:12px}
.nav__link{
  padding:9px 11px;
  border-radius:14px;
  color:var(--muted);
  border:1px solid transparent;
  transition: transform var(--t) ease, background var(--t) ease, border-color var(--t) ease, color var(--t) ease;
}
.nav__link:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  transform: translateY(-1px);
}
.nav__link--active{
  color:var(--text);
  border-color:rgba(124,92,255,.45);
  background: rgba(124,92,255,.10);
}
.nav__link--admin{opacity:.9}

.header__actions{margin-left:auto; display:flex; align-items:center; gap:10px}
.search{min-width: 280px}

.trustbar{
  border-bottom:1px solid rgba(255,255,255,.06);
  background: rgba(13,19,36,.30);
}
.trustbar__inner{
  padding:10px 0;
  display:flex; gap:18px; flex-wrap:wrap;
  color:var(--muted);
  font-size:.95rem;
}

.app{padding:22px 0 44px}

/* Inputs / Buttons */
.input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
  transition: border-color var(--t) ease, box-shadow var(--t) ease, transform var(--t) ease;
}
.input:focus{
  border-color:rgba(124,92,255,.60);
  box-shadow:0 0 0 4px rgba(124,92,255,.16);
}
textarea.input{resize:vertical}

.icon-btn{
  position:relative;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  transition: transform var(--t) ease, background var(--t) ease, border-color var(--t) ease;
}
.icon-btn:hover{
  background:rgba(255,255,255,.06);
  transform: translateY(-1px);
}

.badge{
  display:inline-grid; place-items:center;
  min-width:20px; height:20px;
  padding:0 6px;
  border-radius:999px;
  font-size:.8rem;
  background: rgba(0,212,255,.16);
  border:1px solid rgba(0,212,255,.26);
  margin-left:6px;
}
.badge--pop{ animation: badgePop 240ms ease-out; }
@keyframes badgePop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.22); }
  100%{ transform: scale(1); }
}

.btn{
  position:relative;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  transition: transform var(--t) ease, background var(--t) ease, border-color var(--t) ease, filter var(--t) ease;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
}
.btn:hover{
  background:rgba(255,255,255,.07);
  transform: translateY(-1px);
}
.btn:active{ transform: translateY(0px) scale(.99); }

.btn--primary{
  border:none;
  background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(59,130,246,.90));
  box-shadow: 0 16px 44px rgba(59,130,246,.18);
}
.btn--primary::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: rotate(20deg) translateX(-60%);
  transition: transform 520ms ease;
}
.btn--primary:hover::after{
  transform: rotate(20deg) translateX(60%);
}

.btn--ghost{background:transparent}
.btn--full{width:100%}

/* Cards / Layout */
.card{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(10px);
}
.card__pad{padding:16px}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.col-12{grid-column: span 12}
.col-8{grid-column: span 8}
.col-6{grid-column: span 6}
.col-4{grid-column: span 4}
.col-3{grid-column: span 3}

@media (max-width:900px){
  .col-8,.col-6,.col-4,.col-3{grid-column: span 12}
  .nav{display:none}
  .search{display:none}
}

/* Headings */
.h1,.h2{
  margin:0 0 8px;
  background: linear-gradient(90deg, rgba(124,92,255,1), rgba(0,212,255,1), rgba(34,197,94,1));
  background-size: 240% 240%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 4.5s ease-in-out infinite;
}
.h1{font-size:2.05rem; letter-spacing:.2px}
.h2{font-size:1.35rem}
@keyframes gradientShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.muted{color:var(--muted)}
.kpi{display:flex; gap:10px; flex-wrap:wrap}
.kpi .pill{
  padding:8px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  transition: transform var(--t) ease, border-color var(--t) ease;
}
.kpi .pill:hover{ transform: translateY(-1px); border-color: rgba(0,212,255,.25); }

.hr{height:1px; background:rgba(255,255,255,.08); margin:12px 0}
.row{display:flex; align-items:center}
.row--between{justify-content:space-between}
.gap{gap:10px}

/* Category chips */
.chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 14px;
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  cursor:pointer;
  transition: transform var(--t) ease, border-color var(--t) ease, background var(--t) ease, color var(--t) ease;
}
.chip:hover{
  transform: translateY(-1px);
  color: var(--text);
  border-color: rgba(124,92,255,.30);
  background: rgba(124,92,255,.10);
}
.chip--active{
  color: var(--text);
  border-color: rgba(0,212,255,.35);
  background: rgba(0,212,255,.10);
}

/* Product cards */
.product{
  display:flex; flex-direction:column; gap:10px;
  padding:14px;
  transition: transform var(--t) ease;
}
.card:has(.product):hover{
  border-color: rgba(124,92,255,.22);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
}
.card:has(.product):hover .product{ transform: translateY(-2px); }
.product__title{font-weight:900; letter-spacing:.2px}
.product__price{font-weight:900}
.product__meta{color:var(--muted); font-size:.92rem}

.product__thumb{
  width:100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* Gallery */
.gallery{display:flex; flex-direction:column; gap:10px}
.gallery__main{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  cursor: zoom-in;
}
.gallery__main img{ width:100%; height:auto; display:block; }
.gallery__thumbs{display:flex; gap:10px; flex-wrap:wrap}
.gallery__thumb{
  width:78px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  transition: transform var(--t) ease, border-color var(--t) ease;
}
.gallery__thumb:hover{ transform: translateY(-1px); border-color: rgba(124,92,255,.35); }
.gallery__thumb--active{ border-color: rgba(0,212,255,.40); }

/* Tables */
.table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}
.table th, .table td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:left;
  color:var(--muted);
}
.table th{color:var(--text); background:rgba(255,255,255,.03)}
.table tr:hover td{background:rgba(255,255,255,.02)}

/* Drawer */
.drawer{
  position:fixed;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition: opacity var(--t) ease;
  z-index: 55;
}
.drawer--open{ opacity:1; pointer-events:auto; }
.drawer__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.58);
  opacity:0;
  transition: opacity var(--t) ease;
  z-index:1;
}
.drawer--open .drawer__backdrop{ opacity:1; }
.drawer__panel{
  position:absolute; right:0; top:0; height:100%;
  width:min(430px, 100%);
  background: rgba(13,19,36,.96);
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
  transform: translateX(110%);
  transition: transform var(--t-slow) cubic-bezier(.2,.9,.2,1);
  z-index:2;
}
.drawer--open .drawer__panel{ transform: translateX(0); }
.drawer__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.08)
}
.drawer__body{ padding:14px; overflow:auto; display:flex; flex-direction:column; gap:10px }
.drawer__footer{ padding:14px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:10px }

/* Modal */
.modal{
  position:fixed; inset:0;
  opacity:0;
  pointer-events:none;
  transition: opacity var(--t) ease;
  z-index: 60;
}
.modal--open{ opacity:1; pointer-events:auto; }
.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.58);
  opacity:0;
  transition: opacity var(--t) ease;
  z-index:1;
}
.modal--open .modal__backdrop{ opacity:1; }
.modal__panel{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) scale(.96);
  width:min(520px, 92vw);
  background: rgba(13,19,36,.96);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  transition: transform var(--t-slow) cubic-bezier(.2,.9,.2,1);
  z-index:2;
}
.modal--open .modal__panel{ transform: translate(-50%,-50%) scale(1); }
.modal__header{ display:flex; justify-content:space-between; align-items:center; padding:14px; border-bottom:1px solid rgba(255,255,255,.08) }

.tabs{display:flex; gap:8px; padding:12px 14px}
.tab{
  flex:1;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:var(--muted);
  cursor:pointer;
  transition: transform var(--t) ease, border-color var(--t) ease, background var(--t) ease, color var(--t) ease;
}
.tab:hover{ transform: translateY(-1px); }
.tab--active{ color:var(--text); border-color:rgba(124,92,255,.55); background:rgba(124,92,255,.12) }
.tabpane{display:none; padding:0 14px 14px}
.tabpane--active{display:block}
.form{display:flex; flex-direction:column; gap:10px}
.label{font-size:.92rem; color:var(--muted)}

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  opacity:0;
  pointer-events:none;
  transition: opacity var(--t) ease;
  z-index:70;
}
.lightbox--open{ opacity:1; pointer-events:auto; }
.lightbox__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.70);
  opacity:0;
  transition: opacity var(--t) ease;
  z-index:1;
}
.lightbox--open .lightbox__backdrop{ opacity:1; }
.lightbox__panel{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) scale(.98);
  width:min(920px, 92vw);
  max-height: 86vh;
  background: rgba(13,19,36,.98);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform var(--t-slow) cubic-bezier(.2,.9,.2,1);
  z-index:2;
}
.lightbox--open .lightbox__panel{ transform: translate(-50%,-50%) scale(1); }
.lightbox__header{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.10); }
.lightbox__body{ display:grid; grid-template-columns: 52px 1fr 52px; align-items:center; gap:10px; padding:14px; }
.lightbox__img{
  width:100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.lightbox__nav{
  height:52px; width:52px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  font-size: 28px;
  transition: transform var(--t) ease, background var(--t) ease;
}
.lightbox__nav:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); }
@media (max-width:700px){
  .lightbox__body{ grid-template-columns: 44px 1fr 44px; }
  .lightbox__nav{ height:44px; width:44px; border-radius: 14px; }
}

/* Page transitions */
.page{ animation: pageIn 360ms cubic-bezier(.2,.9,.2,1); }
@keyframes pageIn{
  from{ opacity:0; transform: translateY(8px); filter: blur(4px); }
  to{ opacity:1; transform: translateY(0); filter: blur(0); }
}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform: translateY(10px);
  filter: blur(5px);
  transition: opacity 560ms cubic-bezier(.2,.9,.2,1),
              transform 560ms cubic-bezier(.2,.9,.2,1),
              filter 560ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform, filter;
}
.reveal--in{ opacity:1; transform: translateY(0); filter: blur(0); }

/* Toast */
.toast{
  position:fixed; left:50%; top:88px; transform:translateX(-50%);
  padding:10px 12px;
  border-radius:14px;
  background: rgba(13,19,36,.96);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  display:none;
  z-index:80;
  max-width: 90vw;
}
.toast--show{display:block}

/* Footer */
.footer{ border-top:1px solid rgba(255,255,255,.06); background: rgba(13,19,36,.25); }
.footer__inner{padding:16px 0; color:var(--muted)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}


/* ===== Account panel (client panel) ===== */
.subtabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 10px 0 14px;
}
.subtab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  cursor:pointer;
  transition: transform var(--t) ease, border-color var(--t) ease, background var(--t) ease, color var(--t) ease;
}
.subtab:hover{
  transform: translateY(-1px);
  color: var(--text);
  border-color: rgba(124,92,255,.30);
  background: rgba(124,92,255,.10);
}
.subtab--active{
  color: var(--text);
  border-color: rgba(0,212,255,.35);
  background: rgba(0,212,255,.10);
}

.kpi-cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width:900px){
  .kpi-cards{ grid-template-columns: 1fr; }
}
.kpi-card{
  padding:14px;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.kpi-card .num{ font-size:1.35rem; font-weight:900; margin-top:6px; }

.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size:.9rem;
}

.btn--danger{
  border:1px solid rgba(239,68,68,.45);
  background: rgba(239,68,68,.10);
}
.btn--danger:hover{
  border-color: rgba(239,68,68,.65);
  background: rgba(239,68,68,.14);
}

.wish-btn{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  transition: transform var(--t) ease, background var(--t) ease, border-color var(--t) ease;
}
.wish-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); }
.wish-btn--on{ border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.12); }

.stack{ display:flex; flex-direction:column; gap:10px; }


/* Premium input fix */
.input, .btn, .icon-btn{ box-sizing:border-box; }
.input{ line-height:1.2; }


/* =========================================================
   PRO v2.1 — Fulfillment UI + Mobile fixes
   ========================================================= */

/* Shipping status pill */
.ship-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:.9rem;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.ship-pill--processing{
  border-color: rgba(139,92,246,.40);
  background: rgba(139,92,246,.12);
}
.ship-pill--shipped{
  border-color: rgba(59,130,246,.40);
  background: rgba(59,130,246,.12);
}
.ship-pill--delivered{
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.12);
}

.ship-box{
  margin-top:10px;
  padding:12px;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.ship-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.ship-steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top:10px;
}
.ship-step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}
.ship-dot{
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  font-weight:900;
  font-size:.9rem;
}
.ship-step--done{
  color: var(--text);
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.08);
}
.ship-step--done .ship-dot{
  border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.14);
}

/* Mobile polish: header + chips + tables */
@media (max-width:720px){
  .header__inner{ flex-wrap:wrap; gap:10px; }
  .brand__sub{ display:none; }
  .brand__name{ font-size: 1.05rem; }
  .brand__logo{ width:34px; height:34px; border-radius: 12px; }

  .header__actions{ width:100%; justify-content:flex-end; }

  .chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:6px;
    -webkit-overflow-scrolling: touch;
  }
  .chip{ flex:0 0 auto; white-space:nowrap; }

  .table{ display:block; overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .ship-steps{ grid-template-columns: 1fr; }
}


/* ===== User dropdown (account menu) ===== */
.userbox{ position:relative; display:inline-flex; align-items:center; }
.user-dropdown{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: 260px;
  padding:10px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(13,19,36,.96);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  opacity:0;
  transform: translateY(-8px);
  pointer-events:none;
  transition: opacity var(--t) ease, transform var(--t) ease;
  z-index: 70;
}
.user-dropdown--open{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.user-dropdown__head{ padding:10px 10px 8px; }
.user-dropdown__name{ font-weight:900; letter-spacing:.2px; }
.user-dropdown__email{ font-size:.92rem; margin-top:4px; }
.user-dropdown__sep{ height:1px; background: rgba(255,255,255,.08); margin:8px 6px; }
.user-dropdown__item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor:pointer;
  transition: transform var(--t) ease, background var(--t) ease, border-color var(--t) ease;
}
.user-dropdown__item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(139,92,246,.22);
}
.user-dropdown__logout{
  border-color: rgba(239,68,68,.18);
}
.user-dropdown__logout:hover{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
}

/* ===== Shop: actions spacing in filters card ===== */
.shop-actions{ display:flex; flex-direction:column; gap:10px; }


/* ===== Shipping timeline + progress ===== */
.ship-progress{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  margin-top:10px;
  border:1px solid rgba(255,255,255,.08);
}
.ship-progress > span{
  display:block;
  height:100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, rgba(139,92,246,.95), rgba(59,130,246,.95));
  border-radius:999px;
  box-shadow: 0 10px 25px rgba(59,130,246,.22);
  transition: width var(--t-slow) ease;
}
.ship-date{ font-size:.9rem; margin-top:2px; color: rgba(162,175,210,.92); }

.ship-timeline{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ship-event{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.ship-bullet{
  width:12px; height:12px; border-radius:999px;
  margin-top:4px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.ship-event--done .ship-bullet{
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.18);
  box-shadow: 0 10px 25px rgba(34,197,94,.18);
}
.ship-event__body{ line-height:1.35; }
.ship-event__title{ font-weight:800; }
.ship-event__time{ font-size:.9rem; color: var(--muted); margin-top:2px; }


/* ===== Glow pulse for icons ===== */
@keyframes glowPulse{
  0%{ filter: drop-shadow(0 0 0 rgba(139,92,246,0)); transform: translateY(0); }
  30%{ filter: drop-shadow(0 10px 26px rgba(139,92,246,.28)); transform: translateY(-1px); }
  100%{ filter: drop-shadow(0 0 0 rgba(139,92,246,0)); transform: translateY(0); }
}
.icon-btn--pulse{ animation: glowPulse 560ms ease; }

/* ===== Fulfillment pill (v2.2 statuses) ===== */
.ship-pill--accepted, .ship-pill--packed{ border-color: rgba(139,92,246,.35); background: rgba(139,92,246,.14); }
.ship-pill--shipped{ border-color: rgba(59,130,246,.38); background: rgba(59,130,246,.14); }
.ship-pill--delivered{ border-color: rgba(34,197,94,.38); background: rgba(34,197,94,.14); }


/* ===== Admin UX upgrade ===== */
.admin{
  --adminPad: 16px;
}
.admin .admin-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.admin .admin-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.admin .admin-kpis{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 980px){
  .admin .admin-kpis{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .admin .admin-kpis{ grid-template-columns: 1fr; }
}
.admin .admin-split{
  display:grid;
  grid-template-columns: 1.05fr 1.45fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .admin .admin-split{ grid-template-columns: 1fr; }
}

.table-wrap{
  width:100%;
  overflow:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.table-wrap .table{
  border:0;
  border-radius:0;
  min-width: 920px;
}
@media (max-width: 980px){
  .table-wrap .table{ min-width: 980px; }
}
.admin .table th{
  color: var(--text);
  font-weight:800;
  font-size:.92rem;
  background: rgba(255,255,255,.03);
  position: sticky;
  top: 0;
  z-index: 1;
}
.admin .table td{
  color: rgba(255,255,255,.82);
}
.admin .table tr:nth-child(even) td{
  background: rgba(255,255,255,.015);
}
.admin .muted-2{ color: rgba(255,255,255,.55); }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  font-size:.86rem;
  color: rgba(255,255,255,.82);
}
.badge--ok{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); }
.badge--warn{ border-color: rgba(234,179,8,.35); background: rgba(234,179,8,.08); }
.badge--info{ border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.08); }

.form--row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.form--row .input{ flex: 1 1 280px; min-width: 220px; }

.admin .admin-mini{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 560px){
  .admin .admin-mini{ grid-template-columns: 1fr; }
}

/* Mobile: category chips don't collide, scroll horizontally */
@media (max-width: 520px){
  .chips{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .chip{ flex: 0 0 auto; white-space: nowrap; }
}

/* Shop actions: ensure buttons never overlap */
.shop-actions{ width:100%; }


/* ===== ADMIN REWRITE v2.4 ===== */
.table-scroll{
  width:100%;
  overflow:auto;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.08);
}
.table-scroll .table{
  min-width: 980px;
  border:0;
}
.table-scroll .table thead th{
  position: sticky;
  top: 0;
  background: rgba(10,12,22,.92);
  backdrop-filter: blur(10px);
  z-index: 2;
}
.admin-top{
  display:flex;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
}
.admin-top .grow{ flex: 1 1 360px; }
.admin-top .right{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.admin-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.admin-tabbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  cursor:pointer;
  transition: transform var(--t) ease, border-color var(--t) ease, background var(--t) ease, color var(--t) ease;
}
.admin-tabbtn:hover{
  transform: translateY(-1px);
  color: var(--text);
  border-color: rgba(124,92,255,.35);
  background: rgba(124,92,255,.10);
}
.admin-tabbtn--active{
  color: var(--text);
  border-color: rgba(0,212,255,.35);
  background: rgba(0,212,255,.10);
}
.admin-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
}
@media (max-width: 980px){
  .admin-grid{ grid-template-columns: 1fr; }
  .table-scroll .table{ min-width: 860px; }
}
.thumb{
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  object-fit: cover;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size:.9rem;
}
.pill--ok{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); color: rgba(220,255,235,.92); }
.pill--warn{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); color: rgba(255,245,220,.92); }
.pill--info{ border-color: rgba(0,212,255,.35); background: rgba(0,212,255,.10); color: rgba(220,250,255,.92); }

.filebox{
  border-radius: var(--r);
  border:1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.02);
  padding: 12px;
}
.filebox .muted{ margin-top: 6px; }
.preview-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.preview-row img{
  width:84px; height:84px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  object-fit: cover;
}
.admin-kpis{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 980px){
  .admin-kpis{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .admin-kpis{ grid-template-columns: 1fr; }
}
.smallhelp{ font-size:.92rem; color: var(--muted); line-height:1.5; }


/* ===== ADMIN PRODUCTS EDIT v2.5 ===== */
.admin-section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.admin-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.admin-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 720px){
  .admin-form-grid{ grid-template-columns: 1fr; }
}
.imglist{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.imgitem{
  width:108px;
}
.imgitem img{
  width:108px;
  height:108px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  object-fit: cover;
}
.imgitem .btn{
  width:100%;
  margin-top:8px;
}
.modal__panel--wide{ width: min(860px, 92vw); }

/* ===== Locale controls ===== */
.locale{
  display:flex;
  gap:10px;
  align-items:center;
}
.select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding:10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t) ease, transform var(--t) ease, background var(--t) ease;
}
.select:hover{
  transform: translateY(-1px);
  border-color: rgba(0,212,255,.25);
  background: rgba(0,212,255,.07);
}
.select:focus{
  outline:none;
  border-color: rgba(124,92,255,.40);
  box-shadow: 0 0 0 4px rgba(124,92,255,.18);
}
@media (max-width: 820px){
  .locale{ order: 3; width: 100%; justify-content: flex-end; }
  .select{ padding:9px 10px; }
}