/* =============================================================================
   neo.css — final shared visual layer
   -----------------------------------------------------------------------------
   This file intentionally loads after page-local styles. It converts the existing
   WMS class contract to the NEO liquid-glass language without changing business
   templates, form names, routes, or JavaScript hooks.
============================================================================= */

html,body{height:100%}
body.neo-shell{
  overflow:hidden;
  background:
    radial-gradient(140% 120% at 20% 0%,var(--n-bg-deep2) 0%,var(--n-bg-deep) 58%,var(--n-bg-deep) 100%);
}

/* Deep-space atmosphere. */
.n-deep{
  position:fixed;inset:0;z-index:var(--z-fx);
  overflow:hidden;pointer-events:none;
}
.n-blob{
  position:absolute;width:46vw;height:46vw;border-radius:50%;
  opacity:.8;filter:blur(90px);will-change:transform;
}
.n-blob--a{
  left:-10vw;top:-16vh;
  background:radial-gradient(circle at 40% 40%,var(--n-glow),transparent 65%);
  animation:nDriftA 52s ease-in-out infinite alternate;
}
.n-blob--b{
  right:-14vw;top:24vh;
  background:radial-gradient(circle at 55% 45%,var(--n-glow2),transparent 65%);
  animation:nDriftB 64s ease-in-out infinite alternate;
}
.n-blob--c{
  left:26vw;bottom:-24vh;width:38vw;height:38vw;
  background:radial-gradient(circle at 50% 50%,var(--n-glow3),transparent 65%);
  animation:nDriftC 74s ease-in-out infinite alternate;
}
@keyframes nDriftA{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(9vw,12vh) scale(1.18)}
}
@keyframes nDriftB{
  from{transform:translate(0,0) scale(1.1)}
  to{transform:translate(-11vw,-9vh) scale(.92)}
}
@keyframes nDriftC{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(7vw,-10vh) scale(1.14)}
}

/* The glass recipe: translucent face, specular top edge, weighted lower edge. */
body.neo-shell :is(.topbar,.nav,.page,.tabbar,.drawer,.modal__box,.toast,.wms-toast,.n-glass){
  background:var(--n-glass-bg)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid var(--n-edge)!important;
  border-top-color:var(--n-spec)!important;
  border-bottom-color:var(--n-glass-bottom)!important;
  box-shadow:var(--n-shadow)!important;
}
[data-backdrop="unsupported"] body.neo-shell
  :is(.topbar,.nav,.page,.tabbar,.drawer,.modal__box,.toast,.wms-toast,.n-glass){
  background:var(--n-glass-strong)!important;
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  body.neo-shell :is(.topbar,.nav,.page,.tabbar,.drawer,.modal__box,.toast,.wms-toast,.n-glass){
    background:var(--n-glass-strong)!important;
  }
}

/* Floating island. The desktop navigation is a sibling Dock, not a classic topbar. */
body.neo-shell .topbar{
  position:fixed;top:14px;left:50%;right:auto;z-index:var(--z-topbar);
  width:max-content;max-width:calc(100vw - 220px);height:46px;min-height:46px;
  padding:0 12px 0 14px;gap:10px;
  transform:translateX(-50%);
  border-radius:var(--r-pill);
  overflow:visible;
  transition:transform .28s var(--n-spring),box-shadow .25s ease,
             background-color .18s ease,border-color .18s ease;
}
body.neo-shell .topbar .spacer{flex:0 0 2px}
body.neo-shell .brand{gap:8px}
body.neo-shell .brand__mark{
  width:27px;height:27px;border-radius:10px;
  background:var(--n-accent-soft);
  border:1px solid var(--n-accent-line);
  box-shadow:inset 0 1px 0 var(--n-spec),0 4px 16px var(--n-glow);
  color:var(--n-accent);
}
body.neo-shell .brand__name{
  color:var(--n-text);font-size:.86rem;font-weight:800;letter-spacing:.04em;
}
body.neo-shell .brand__sub{display:none}
body.neo-shell .topbar .btn{
  width:auto;min-width:34px;height:34px;min-height:34px;padding:0 10px;
  border-radius:12px;color:var(--n-text-dim);
  background:var(--n-surface-3);
  border:1px solid transparent;
  box-shadow:none;
}
body.neo-shell .topbar .btn--icon{width:34px;padding:0}
body.neo-shell .topbar .btn:hover{
  color:var(--n-text);background:var(--n-surface-3);
  border-color:var(--n-line-2);
  box-shadow:inset 0 1px 0 var(--n-spec),var(--n-shadow-sm);
}
body.neo-shell .userbtn__n{
  max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Left liquid Dock: 72px resting width, 260px when it receives intent. */
body.neo-shell--app .nav{
  position:fixed;left:16px;top:50%;z-index:30;
  width:72px;max-height:86vh;padding:12px 10px;
  display:flex;flex-direction:column;align-items:stretch;gap:7px;
  transform:translateY(-50%);overflow:hidden;
  border-radius:20px;
  transition:width .32s var(--n-spring),box-shadow .25s ease,
             background-color .18s ease,border-color .18s ease;
}
body.neo-shell--app .nav:hover,
body.neo-shell--app .nav:focus-within{
  width:260px;
  box-shadow:var(--n-shadow),0 0 44px var(--n-glow)!important;
}
body.neo-shell--app .nav > a{
  position:relative;width:50px;height:44px;min-height:44px;padding:0 14px;
  justify-content:flex-start;gap:0;flex:none;
  border:1px solid transparent;border-radius:13px;
  color:var(--n-text-dim);background:transparent;
  transition:transform .28s var(--n-spring),color .18s ease,
             background-color .18s ease,border-color .18s ease,box-shadow .25s ease,
             gap .18s ease;
}
body.neo-shell--app .nav > a svg{width:22px;height:22px;flex:none;stroke-width:1.5}
body.neo-shell--app .nav > a > :is(.zh,.ru){
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  transform:translateX(-6px);
  transition:max-width .32s var(--n-spring),opacity .22s ease .06s,
             transform .28s var(--n-spring);
}
body.neo-shell--app .nav:hover > a,
body.neo-shell--app .nav:focus-within > a{width:238px;gap:12px}
body.neo-shell--app .nav:hover > a > :is(.zh,.ru),
body.neo-shell--app .nav:focus-within > a > :is(.zh,.ru){
  max-width:168px;opacity:1;transform:none;
}
body.neo-shell--app .nav > a:hover{color:var(--n-text);background:var(--n-surface-3)}
body.neo-shell--app .nav > a:active{transform:scale(.96)}
body.neo-shell--app .nav > a.on{
  color:var(--n-text)!important;background:var(--n-accent-soft)!important;
  border-color:var(--n-accent-line)!important;
  box-shadow:0 0 0 2px var(--n-accent-line),
             inset 0 1px 0 var(--n-spec),0 8px 24px var(--n-glow)!important;
}
body.neo-shell--app .nav > a.on::before{
  content:"";position:absolute;left:5px;top:9px;bottom:9px;width:3px;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--n-accent),var(--n-accent2));
  box-shadow:0 0 12px var(--n-glow);
}

/* Glass main stage with internal scrolling. */
body.neo-shell .page{
  position:fixed;top:66px;left:94px;right:12px;bottom:12px;z-index:var(--z-content);
  min-height:0;padding:0!important;
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;
}
body.neo-shell--auth .page{left:12px}
body.neo-shell .page > .wrap{
  flex:1 1 auto;width:100%;max-width:1480px;height:100%;min-height:0;
  margin-inline:auto;padding:16px 20px 24px;
  overflow:auto;overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
body.neo-shell .page > .truckbar{
  flex:none;margin:12px 16px 0;min-height:44px;
  border:1px solid var(--n-accent-line);
  border-radius:14px;background:var(--n-accent-soft);
  color:var(--n-text);box-shadow:inset 0 1px 0 var(--n-spec);
}
body.neo-shell .page > .truckbar::before{
  top:9px;bottom:9px;left:8px;width:3px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--n-accent),var(--n-accent2));
}

/* One quiet escape hatch for secondary screens. It lives inside the page's
   scroll area so it aligns with every page without adding another fixed layer. */
body.neo-shell .wms-backline{
  display:flex;align-items:center;min-height:40px;margin:0 0 12px;
}
body.neo-shell .wms-backline[hidden]{display:none!important}
body.neo-shell .wms-backlink{
  width:max-content;min-height:40px;padding:0 13px 0 10px;gap:7px;
  color:var(--n-text-dim);border-color:var(--n-line)!important;
  background:var(--n-surface-3);box-shadow:inset 0 1px 0 var(--n-spec);
}
body.neo-shell .wms-backlink svg{
  width:18px;height:18px;flex:none;stroke-width:1.8;
  transition:transform .2s var(--n-spring);
}
body.neo-shell .wms-backlink:hover svg{transform:translateX(-2px)}
body.neo-shell .wms-backlink:focus-visible{
  outline:2px solid var(--n-accent);outline-offset:2px;
}

/* Shared content surfaces. */
body.neo-shell :is(.card,.ocard,.unit,.sh-kpis,.rack,.loose,.moves,.pw__card,
                   .dual,.tablewrap,.t-kpis,.auth__panel){
  background:var(--n-surface-3)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--n-edge)!important;
  border-top-color:var(--n-spec)!important;
  border-bottom-color:var(--n-glass-bottom)!important;
  border-radius:16px;
  box-shadow:var(--n-shadow-sm);
  transition:transform .28s var(--n-spring),background-color .18s ease,
             border-color .18s ease,box-shadow .25s ease;
}
[data-backdrop="unsupported"] body.neo-shell
  :is(.card,.ocard,.unit,.sh-kpis,.rack,.loose,.moves,.pw__card,
      .dual,.tablewrap,.t-kpis,.auth__panel){
  background:var(--n-surface-2)!important;
}

@media (hover:hover) and (pointer:fine){
  body.neo-shell .topbar:hover{
    transform:translateX(-50%) scale(1.03);
    box-shadow:var(--n-shadow),0 0 34px var(--n-glow)!important;
  }
  body.neo-shell :is(.card,.ocard.glow,.unit.glow,.sku-opt):hover{
    transform:translateY(-3px);
    border-color:var(--n-accent-line)!important;
    box-shadow:var(--n-shadow),0 0 26px -4px var(--n-glow)!important;
  }
}

/* Controls: one primary gradient, liquid secondary controls, spring feedback. */
body.neo-shell .btn{
  border-radius:13px;color:var(--n-text-dim);
  background:var(--n-surface-3);border:1px solid transparent;
  transition:transform .28s var(--n-spring),background-color .18s ease,
             color .18s ease,border-color .18s ease,box-shadow .25s ease;
}
body.neo-shell .btn:hover{
  color:var(--n-text);background:var(--n-surface-3);
  border-color:var(--n-line-2);
  box-shadow:inset 0 1px 0 var(--n-spec),var(--n-shadow-sm);
}
body.neo-shell .btn:active{transform:scale(.96);filter:none}
body.neo-shell :is(.btn--primary,.nav-cta.on){
  color:var(--n-accent-ink)!important;
  background:linear-gradient(135deg,var(--n-accent),var(--n-accent2))!important;
  border-color:transparent!important;font-weight:800!important;
  box-shadow:0 10px 26px var(--n-glow)!important;
}
body.neo-shell :is(.btn--primary,.nav-cta.on):hover{
  filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:0 12px 30px var(--n-glow)!important;
}
body.neo-shell .btn--ok{
  color:var(--n-ok)!important;background:var(--n-ok-bg)!important;
  border-color:var(--n-ok-line)!important;box-shadow:none!important;
}
body.neo-shell .btn--danger{
  color:var(--n-danger)!important;background:var(--n-surface-3)!important;
  border-color:var(--n-danger-line)!important;box-shadow:none!important;
}
body.neo-shell .btn[disabled],
body.neo-shell .btn.is-disabled{
  opacity:.45;box-shadow:none!important;transform:none!important;filter:none!important;
}

body.neo-shell :is(.input,.select,input[type="text"],input[type="password"],
                   input[type="number"],input[type="search"],textarea,select){
  color:var(--n-text);background:var(--n-surface-3);
  border:1px solid var(--n-line);border-radius:12px;
  transition:background-color .18s ease,color .18s ease,
             border-color .18s ease,box-shadow .25s ease;
}
body.neo-shell :is(.input,.select,input,textarea,select):focus{
  outline:none;border-color:var(--n-accent-line)!important;
  box-shadow:0 0 0 3px var(--n-accent-soft),0 6px 22px var(--n-glow)!important;
}
/* Four visible Excel pickers share one native, dependency-free treatment.
   Photo/camera inputs stay hidden behind their existing purpose-built buttons. */
body.neo-shell input[type="file"].input{
  min-height:52px;padding:5px 10px 5px 5px;cursor:pointer;
  color:var(--n-text-dim);font:600 var(--fs-300)/1.2 var(--font);
}
body.neo-shell input[type="file"].input::file-selector-button{
  min-height:40px;margin-right:12px;padding:0 15px;
  border:1px solid var(--n-accent-line);border-radius:10px;
  background:var(--n-accent-soft);color:var(--n-text);
  font:800 var(--fs-300)/1 var(--font);cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,
             box-shadow .25s ease,transform .28s var(--n-spring);
}
body.neo-shell input[type="file"].input:hover::file-selector-button{
  border-color:var(--n-accent);background:var(--n-surface-2);
  box-shadow:0 5px 18px var(--n-glow);
}
body.neo-shell input[type="file"].input:active::file-selector-button{
  transform:scale(.97);
}
body.neo-shell input[type="checkbox"]{accent-color:var(--n-accent)}

body.neo-shell :is(.chip,.t-chip,.locnav a,.sku-opt,.bin-chip){
  border:1px solid var(--n-line);border-radius:var(--r-pill);
  color:var(--n-text-dim);background:var(--n-surface-3);
  transition:transform .28s var(--n-spring),background-color .18s ease,
             color .18s ease,border-color .18s ease,box-shadow .25s ease;
}
body.neo-shell :is(.chip,.t-chip,.locnav a,.sku-opt,.bin-chip):hover{
  color:var(--n-text);border-color:var(--n-accent-line);
}
body.neo-shell :is(.chip,.t-chip,.locnav a,.sku-opt,.bin-chip):active{transform:scale(.95)}
body.neo-shell :is(.chip.on,.chip.is-on,.t-chip.on,.t-chip.is-on,
                   .locnav a[aria-current="page"],.sku-opt.on,.bin-chip.on){
  color:var(--n-text)!important;background:var(--n-accent-soft)!important;
  border-color:var(--n-accent-line)!important;
  box-shadow:0 0 0 2px var(--n-accent-line),
             inset 0 1px 0 var(--n-spec),0 4px 16px var(--n-glow)!important;
}

body.neo-shell .pill{
  border-radius:var(--r-pill);box-shadow:inset 0 1px 0 var(--n-spec);
}
body.neo-shell table.tbl tbody tr{
  transition:background-color .18s ease,color .18s ease;
}
body.neo-shell table.tbl tbody tr:hover{background:var(--n-surface-3)}
body.neo-shell .scrim{
  background:transparent!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.neo-shell .drawer,
body.neo-shell .modal__box{border-radius:20px}
body.neo-shell .toast,
body.neo-shell .wms-toast{border-radius:var(--r-pill)}

/* Theme hand-off is brief; it is never left on the page permanently. */
html.n-theming,
html.n-theming *{
  transition:background-color .4s ease,color .4s ease,border-color .4s ease,
             box-shadow .4s ease,fill .4s ease,stroke .4s ease!important;
}

/* Spec scrollbar. */
body.neo-shell ::-webkit-scrollbar{width:9px;height:9px}
body.neo-shell ::-webkit-scrollbar-thumb{
  background:var(--n-line-2);border-radius:9px;
  border:2px solid transparent;background-clip:content-box;
}
body.neo-shell ::-webkit-scrollbar-track{background:transparent}

/* Full-screen scanner remains a purpose-built tool view. */
body.scan-page .n-deep{display:none}
body.scan-page .page{
  inset:0!important;border:0!important;border-radius:0;
  background:var(--n-bg-deep)!important;box-shadow:none!important;
}
body.scan-page .page > .wrap{max-width:none;padding:var(--s3)}

/* Mobile: compact island + four-key bottom Dock + safe areas. */
@media (max-width:760px){
  body.neo-shell .topbar{
    top:max(8px,env(safe-area-inset-top));left:8px;right:8px;
    width:auto;max-width:none;height:52px;min-height:52px;
    padding:0 8px 0 10px;gap:6px;
    transform:none;border-radius:16px;
  }
  body.neo-shell .topbar .spacer{flex:1 1 auto}
  body.neo-shell .topbar .btn{
    width:48px;min-width:48px;height:48px;min-height:48px;padding:0;
  }
  body.neo-shell .topbar .userbtn__n{display:none}
  body.neo-shell--app .nav{display:none!important}

  body.neo-shell .page{
    top:calc(max(8px,env(safe-area-inset-top)) + 60px);
    left:8px;right:8px;
    bottom:calc(76px + env(safe-area-inset-bottom));
    border-radius:18px;
  }
  body.neo-shell--auth .page{bottom:max(8px,env(safe-area-inset-bottom))}
  body.neo-shell .page > .wrap{
    max-width:none;padding:12px 12px 18px;scrollbar-gutter:auto;
  }
  body.neo-shell .page > .truckbar{
    margin:8px 8px 0;border-radius:12px;
  }
  body.neo-shell .wms-backline{min-height:48px;margin-bottom:10px}
  body.neo-shell .wms-backlink{
    min-width:48px;min-height:48px;padding-inline:12px 15px;gap:8px;
  }

  body.neo-shell--app .tabbar{
    display:flex;left:8px;right:8px;
    bottom:max(6px,env(safe-area-inset-bottom));
    width:auto;height:64px;padding:4px;
    border-radius:20px;
  }
  body.neo-shell .tabbar a{
    min-width:48px;min-height:48px;border-radius:14px;
    color:var(--n-text-dim);
    transition:transform .28s var(--n-spring),color .18s ease,
               background-color .18s ease,box-shadow .25s ease;
  }
  body.neo-shell .tabbar a.on{
    color:var(--n-text);background:var(--n-accent-soft);
    box-shadow:0 0 0 2px var(--n-accent-line),
               inset 0 1px 0 var(--n-spec),0 4px 16px var(--n-glow);
  }
  body.neo-shell .tabbar a:active{transform:scale(.95)}
  body.neo-shell--auth .tabbar{display:none!important}

  body.neo-shell :is(.card,.ocard,.unit,.sh-kpis,.rack,.loose,.moves,.pw__card,
                     .dual,.tablewrap,.t-kpis,.auth__panel){
    background:var(--n-surface-2)!important;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:var(--n-shadow-sm);
  }
  body.neo-shell :is(.card,.ocard,.unit,.sku-opt):hover{
    transform:none;box-shadow:var(--n-shadow-sm)!important;
  }
  body.neo-shell :is(.btn,.chip,.t-chip,.input,.select,.thumb--add){
    min-height:48px;
  }
  body.neo-shell .btn{min-width:48px}
  body.neo-shell .home-tab{min-height:48px}

  /* Real-phone acceptance: every currently reachable control must present a
     48px thumb target.  These are legacy page-local exceptions whose compact
     desktop sizes otherwise win through specificity or inline styles. */
  body.neo-shell .locnav a{min-height:48px}
  body.neo-shell .bc-allbox{min-height:48px}
  body.neo-shell .bc-card .bc-chk{width:24px;height:24px}
  body.neo-shell .bc-card :is(.bc-zoombtn,.bc-dlbtn){
    min-width:48px;min-height:48px;
  }
  body.neo-shell .pick-order__no,
  body.neo-shell a.txt-brand{
    display:inline-flex;align-items:center;min-height:48px;
  }
  body.neo-shell #fm :is(#fm-pay,#fm-save){min-height:48px!important}
  body.neo-shell .ninfo__btn{width:48px!important;height:48px!important}
  body.neo-shell .rp-bar{min-height:48px}
}

@media (max-width:430px){
  body.neo-shell .brand__name{font-size:.78rem;letter-spacing:.02em}
  body.neo-shell .brand__mark{width:26px;height:26px}
}

@media (hover:none),(pointer:coarse){
  body.neo-shell :is(.topbar,.card,.ocard,.unit,.sku-opt,.btn):hover{transform:none}
}

/* Accessibility fallback: retain meaning, remove travel and perpetual motion. */
@media (prefers-reduced-motion:reduce){
  .n-blob{animation:none!important}
  html.n-theming,
  html.n-theming *{transition-duration:.12s!important}
  body.neo-shell *,
  body.neo-shell *::before,
  body.neo-shell *::after{
    scroll-behavior:auto!important;
    transition-duration:.12s!important;
    animation-duration:.16s!important;
    animation-iteration-count:1!important;
  }
  body.neo-shell :is(.topbar,.nav,.card,.ocard,.unit,.btn,.chip,.t-chip):hover,
  body.neo-shell :is(.btn,.chip,.t-chip,.tabbar a):active{
    transform:none!important;
  }
}