:root{--sidebar:230px;--green:#059669;--navy:#010b23}*{box-sizing:border-box}html,body,#app{min-height:100%;}body{overflow-x:hidden}.mc-scroll::-webkit-scrollbar{width:8px;height:8px}.mc-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}.mc-logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#e11d48,#991b1b);display:grid;place-items:center;color:#fff;font-weight:900;font-size:28px;font-style:italic;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75),0 4px 10px rgba(0,0,0,.25)}.login-pattern{background-color:#111827;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px}.content{margin-left:var(--sidebar);min-height:100vh;padding:24px 28px}.sidebar{width:var(--sidebar)}.nav-item{display:flex;gap:.75rem;align-items:center;padding:.72rem .9rem;border-radius:.25rem;color:#e5eefb;font-weight:700;font-size:.75rem;letter-spacing:.01em}.nav-item:hover,.nav-item.active{background:#182534}.nav-item .ico{width:18px;text-align:center;font-size:18px;color:#dbeafe}.pill{border:1px solid #dbe3ef;border-radius:999px;padding:.55rem .85rem;background:white;color:#1e293b;font-size:.82rem}.pill.active{background:#020617;color:white;border-color:#020617}.card{background:white;border:1px solid #e5eaf1;border-radius:1rem;box-shadow:0 8px 22px rgba(15,23,42,.08)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:.55rem;padding:.62rem .9rem;font-weight:800;font-size:.85rem;transition:.15s;border:1px solid transparent}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-dark{background:#010b23;color:#fff}.btn-green{background:#059669;color:white}.btn-red{background:#dc1745;color:white}.btn-pink{background:#f4729b;color:white}.btn-ghost{background:white;border-color:#d9e2ef;color:#0f172a}.input{width:100%;border:1px solid #d9e2ef;border-radius:.55rem;background:white;padding:.72rem .85rem;font-size:.9rem;outline:none}.input:focus{border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.12)}.label{display:block;color:#64748b;font-size:.68rem;font-weight:700;margin-bottom:.35rem}.small-label{color:#64748b;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.table th{background:#f1f5f9;color:#475569;text-align:left;font-size:.72rem}.table td,.table th{padding:.55rem .65rem;border-bottom:1px solid #e5e7eb}.modal-backdrop{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;padding:1rem}.modal-box{max-height:92vh;overflow:auto;background:white;border-radius:.7rem;box-shadow:0 24px 70px rgba(15,23,42,.30)}.toast{animation:toastIn .18s ease-out}.toast.hide{animation:toastOut .18s ease-in forwards}@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@keyframes toastOut{to{opacity:0;transform:translateY(-8px)}}.product-card-img{background:#eef2f7;border-radius:.5rem;object-fit:contain}.dashboard-hero{background:linear-gradient(105deg,#ef233c 0%,#ef233c 48%,#fb9aa4 100%);position:relative;overflow:hidden}.dashboard-hero:before,.dashboard-hero:after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.14)}.dashboard-hero:before{width:180px;height:180px;right:-24px;top:-70px}.dashboard-hero:after{width:90px;height:90px;right:80px;bottom:-32px}.mobile-top{display:none}@media(max-width:900px){:root{--sidebar:0}.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.content{margin-left:0;padding:78px 14px 16px}.mobile-top{display:flex}.hide-mobile{display:none!important}.grid-responsive{grid-template-columns:1fr!important}.modal-box{width:100%!important}.login-shell{grid-template-columns:1fr!important}.login-brand{min-height:42vh}.product-grid{grid-template-columns:1fr!important}.order-grid{grid-template-columns:1fr!important}.analytics-grid{grid-template-columns:1fr!important}.recipe-grid{grid-template-columns:1fr!important}}@media(min-width:901px){.sidebar{transform:none!important}.mobile-only{display:none!important}}
/* CDN/UI parity with old GAS app */
.material-icons-round,.material-symbols-outlined{font-size:20px;line-height:1;vertical-align:middle}.nav-icon{width:22px;text-align:center;color:#dbeafe}.input-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:20px;color:#94a3b8;pointer-events:none}.btn .material-icons-round{font-size:18px}.swal2-popup{border-radius:1rem!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important}.swal2-toast{box-shadow:0 8px 24px rgba(2,44,66,.12)!important}.content-receiving{padding-top:24px}.receiving-sidebar nav{display:none!important}.receiving-sidebar .nav-item{display:none!important}@media(min-width:901px){.content-receiving{margin-left:230px}.receiving-sidebar{width:230px}}@media(max-width:900px){.content-receiving{padding-top:78px}.receiving-sidebar{display:none}.mobile-top .invisible{visibility:hidden}}

/* Role-secure UI polish */
.login-shell{display:grid;grid-template-columns:1.08fr .92fr}.login-hero{min-height:100vh}.login-card{background:rgba(255,255,255,.96);border:1px solid rgba(226,232,240,.9);border-radius:1.5rem;box-shadow:0 24px 80px rgba(2,6,23,.28),inset 0 1px 0 rgba(255,255,255,.75);backdrop-filter:blur(18px)}.sidebar{background:linear-gradient(180deg,#111827 0%,#1f2937 48%,#2d3a47 100%);box-shadow:12px 0 28px rgba(2,6,23,.12)}.nav-item{border:1px solid transparent;margin-bottom:.25rem}.nav-item span{display:flex;min-width:0;flex-direction:column;text-align:left;line-height:1.1}.nav-item small{margin-top:.18rem;color:#94a3b8;font-size:.64rem;font-weight:700;letter-spacing:0;text-transform:none}.nav-item:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.08)}.nav-item.active{background:linear-gradient(135deg,rgba(239,35,60,.95),rgba(185,28,28,.92));box-shadow:0 10px 24px rgba(239,35,60,.22)}.nav-item.active small,.nav-item.active .nav-icon{color:#fff}.user-chip{display:flex;align-items:center;gap:.65rem;border:1px solid rgba(255,255,255,.08);border-radius:1rem;background:rgba(255,255,255,.06);padding:.7rem}.user-chip small{display:block;color:#cbd5e1;font-size:.68rem;font-weight:700}.page-top{position:sticky;top:0;z-index:20;margin:-24px -28px 20px;padding:5px 8px;background:rgba(241,245,249,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(226,232,240,.8)}.shadow-soft{box-shadow:0 8px 24px rgba(2,44,66,.08)}@media(max-width:1024px){.login-shell{grid-template-columns:1fr;background:linear-gradient(135deg,#111827,#0f172a)}}@media(max-width:900px){.page-top{position:relative;margin:-8px -14px 16px;padding:14px}.sidebar{box-shadow:18px 0 44px rgba(2,6,23,.32)}}

/* Mobile + Speed polish 2026-07 */
:root{--safe-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{background:#f1f5f9;overscroll-behavior-y:none}.ww-fast-card{content-visibility:auto;contain-intrinsic-size:120px;will-change:transform}.ww-fast-card img{background:#f1f5f9}.btn,.nav-item,button{touch-action:manipulation}.input{min-height:44px}.modal-backdrop{padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}.modal-box{overscroll-behavior:contain}
@media(max-width:900px){
  .mobile-top{height:62px;padding-top:env(safe-area-inset-top)}
  .content{padding:calc(72px + env(safe-area-inset-top)) 10px calc(18px + var(--safe-bottom));background:#f1f5f9}
  .page-top{border-radius:0 0 18px 18px;margin:-10px -10px 12px;padding:12px 12px 14px;background:rgba(248,250,252,.94)}
  .page-top h1{font-size:1.45rem;line-height:1.1}.page-top p{font-size:.85rem}
  .card{border-radius:18px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
  .card>.flex.border-b,.card>[class*="border-b"]{padding:12px!important}
  .btn{min-height:44px;border-radius:13px;padding:.58rem .78rem;font-size:.82rem}.btn .material-icons-round{font-size:18px}
  .input{border-radius:13px;padding:.68rem .8rem;font-size:16px}
  .sidebar{width:min(82vw,300px);padding-top:env(safe-area-inset-top)}
  .sidebar.open:after{content:"";position:fixed;inset:0;left:100%;width:100vw;background:rgba(2,6,23,.45)}
  #orderList,#prodGrid{grid-template-columns:1fr!important;gap:10px!important}
  #orderCats,#prodCats{position:sticky;top:calc(62px + env(safe-area-inset-top));z-index:10;margin-left:-10px;margin-right:-10px;padding:8px 10px;background:rgba(241,245,249,.94);backdrop-filter:blur(12px)}
  #orderActionBar{left:10px;right:10px;bottom:calc(10px + var(--safe-bottom));border-radius:20px;padding:10px;box-shadow:0 18px 45px rgba(15,23,42,.22)}
  body:not([data-route="orders"]) #orderActionBar{display:none!important}
  .modal-box{width:100%!important;max-height:calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:20px}
  .table{min-width:720px}.table-wrap,.overflow-x-auto{scrollbar-width:thin}
}
@media(max-width:520px){
  .content{padding-left:8px;padding-right:8px}.card{border-radius:16px}.small-label{font-size:.62rem}
  .ww-fast-card{contain-intrinsic-size:112px}.ww-fast-card:hover{transform:none!important}.shadow-card{box-shadow:0 8px 24px rgba(15,23,42,.10)}
  #prodGrid article,#orderList article{padding:10px!important;border-radius:16px!important}
  #prodGrid article .aspect-square,#orderList article .h-16{width:58px;height:58px}
  #prodGrid article b,#orderList article b{font-size:.9rem;line-height:1.15}
  #prodGrid .prod-edit,#prodGrid .prod-del{min-width:82px;padding:.42rem .55rem;border-radius:10px}
  #orderSubmit{padding-left:14px;padding-right:14px;white-space:nowrap}
}