/* NEXUS SYSTEM — Glass Header + Responsive App Navbar — 2026-09-03 */
:root{--nx-h:112px;--nx-nav-h:64px;--nx-glass:rgba(7,16,31,.72);--nx-glass-strong:rgba(7,16,31,.88);--nx-line:rgba(148,196,255,.16);--nx-text:#edf6ff;--nx-muted:#8fa6c2;--nx-blue:#38a8ff;--nx-purple:#8b5cf6}
html,body{overflow-x:hidden!important}
body{padding-top:calc(var(--nx-h) + var(--nx-nav-h) + 18px)!important}
.nx-header{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;height:var(--nx-h)!important;z-index:10000!important;box-sizing:border-box;background:linear-gradient(180deg,rgba(3,9,20,.92),rgba(5,12,25,.72));border-bottom:1px solid var(--nx-line);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);box-shadow:0 12px 38px rgba(0,0,0,.22)}
.nx-header-inner{height:100%;width:min(1440px,100%);margin:auto;padding:18px 28px;display:grid;grid-template-columns:auto minmax(280px,1fr) auto;align-items:center;gap:22px;box-sizing:border-box}
.nx-brand{display:flex;align-items:center;gap:11px;min-width:0;color:var(--nx-text);font-weight:900;text-decoration:none;white-space:nowrap}.nx-logo{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(82,170,255,.3);background:linear-gradient(145deg,rgba(35,151,255,.16),rgba(139,92,246,.14));box-shadow:inset 0 1px rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.2)}.nx-logo img{width:100%;height:100%;object-fit:contain}.nx-logo span{color:#50b7ff;font-size:15px}.nx-brand-name{font-size:16px;letter-spacing:.5px}
.nx-search{height:50px;min-width:0;display:flex;align-items:center;direction:ltr;border:1px solid rgba(123,180,236,.18);border-radius:17px;background:rgba(3,10,21,.48);box-shadow:inset 0 1px rgba(255,255,255,.045),0 10px 30px rgba(0,0,0,.12);overflow:hidden}.nx-search input{direction:rtl;flex:1;min-width:0;height:100%;padding:0 17px;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:13px}.nx-search input::placeholder{color:#7186a3}.nx-search button{width:52px;height:100%;border:0;border-left:1px solid rgba(123,180,236,.12);background:rgba(56,168,255,.08);color:#bfe4ff;display:grid;place-items:center;cursor:pointer}.nx-search button:hover{background:rgba(56,168,255,.16)}
.nx-header-actions{display:flex;align-items:center;gap:8px}.nx-action{height:44px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(123,180,236,.14);border-radius:13px;background:rgba(255,255,255,.045);color:#dceaff;text-decoration:none;font-size:12px;white-space:nowrap;transition:.2s}.nx-action:hover{border-color:rgba(56,168,255,.38);background:rgba(56,168,255,.09);transform:translateY(-1px)}.nx-action .nx-icon{color:#8ed2ff}
.nx-navbar{position:fixed!important;top:calc(var(--nx-h) + 12px)!important;left:50%!important;transform:translateX(-50%)!important;width:min(920px,calc(100% - 48px))!important;height:var(--nx-nav-h)!important;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:7px;padding:7px;border:1px solid rgba(135,194,255,.18);border-radius:19px;background:rgba(8,18,34,.66);backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);box-shadow:0 18px 55px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.07);z-index:10001!important;overflow:hidden!important}
.nx-navbar a{position:relative;flex:1 1 0;min-width:0;height:48px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:13px;color:#b6c7da;text-decoration:none;font-size:12px;white-space:nowrap;transition:.2s;box-sizing:border-box}.nx-navbar a:hover{color:#fff;background:rgba(56,168,255,.09);border-color:rgba(100,190,255,.12)}.nx-navbar a .nx-icon{flex:0 0 auto;color:#a8d9ff}.nx-navbar a b{position:absolute;top:2px;left:calc(50% + 9px);min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:999px;background:#38a8ff;color:#03101d;font:800 9px/1 sans-serif;border:2px solid #091527}
@media(max-width:900px){.nx-header-inner{grid-template-columns:auto 1fr auto;gap:10px;padding-inline:18px}.nx-header-actions{gap:5px}.nx-action{padding:0 10px}.nx-action span{display:none}.nx-search{height:46px}.nx-brand-name{display:none}}
@media(max-width:700px){
 :root{--nx-h:118px}
 body{padding-top:calc(var(--nx-h) + 18px)!important;padding-bottom:94px!important}
 .nx-header{height:var(--nx-h)!important}
 .nx-header-inner{height:100%;padding:12px 14px 14px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:52px 44px;gap:8px 10px}
 .nx-brand{grid-column:1;grid-row:1}.nx-logo{width:44px;height:44px;border-radius:14px}.nx-header-actions{grid-column:2;grid-row:1;justify-content:flex-end}.nx-action{height:42px;padding:0 10px;border-radius:12px}.nx-action span{display:inline;font-size:10px}.nx-search{grid-column:1/-1;grid-row:2;width:100%;height:44px;border-radius:14px}.nx-search button{width:48px}
 .nx-navbar{top:auto!important;bottom:10px!important;left:10px!important;right:10px!important;transform:none!important;width:auto!important;height:70px!important;padding:7px!important;border-radius:21px!important;gap:3px!important;justify-content:stretch!important;background:rgba(7,16,31,.74);backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);box-shadow:0 18px 60px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08)}
 .nx-navbar a{height:54px;min-width:0;padding:3px 2px;flex:1 1 0;flex-direction:column;gap:2px;border-radius:15px;font-size:9px}.nx-navbar a .nx-icon{width:21px;height:21px}.nx-navbar a:hover{transform:none}.nx-navbar a b{top:1px;left:calc(50% + 5px);min-width:16px;height:16px;font-size:8px}
}
@media(max-width:380px){.nx-header-actions .nx-action{padding:0 8px;font-size:9px}.nx-navbar{left:7px!important;right:7px!important;bottom:7px!important;height:68px!important}.nx-navbar a{font-size:8px}.nx-navbar a .nx-icon{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.nx-action,.nx-navbar a{transition:none}}

/* NEXUS GLASS BLUE — site-wide visual layer */
:root{
  --nx-cyan:#36c8ff;
  --nx-cyan-soft:rgba(54,200,255,.16);
  --nx-glass-page:rgba(10,24,45,.48);
  --nx-glass-card:rgba(16,31,55,.48);
  --nx-glass-border:rgba(104,202,255,.18);
}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(54,200,255,.65) rgba(7,16,31,.45)}
html::-webkit-scrollbar{width:9px;height:9px}
html::-webkit-scrollbar-track{background:rgba(5,13,27,.45);border-left:1px solid rgba(255,255,255,.035)}
html::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(54,200,255,.82),rgba(62,126,255,.62));border:2px solid rgba(7,16,31,.72);border-radius:999px;box-shadow:0 0 14px rgba(54,200,255,.28)}
html::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(88,218,255,.95),rgba(81,143,255,.82))}
body{background-attachment:fixed}

/* NOTE: the site-wide glass surface rules used to live here, but they
   targeted class names that don't exist in the real markup (.product-card,
   .product-item, .category-card, etc.) so they never actually applied to
   the real product cards / panels. The full, correct glass system (matching
   the actual template classes: .product, .nx-product-media, .panel, .ad,
   .cats a, admin panel, forms, alerts, footer, product-card rebuild, etc.)
   now lives at the end of assets/v25.css, which is loaded on every page
   (including admin, which never loads this header file). Kept here only:
   header/nav glass (above) and the small mobile search-position fix below. */

/* remove the accidental second-layer search feeling on small screens */
@media(max-width:700px){
 .nx-header-inner{grid-template-columns:1fr auto;grid-template-rows:52px 44px!important}
 .nx-brand{min-width:0}
 .nx-header-actions{min-width:0}
 .nx-search{grid-column:1/-1!important;grid-row:2!important;margin:0!important}
 .nx-search input{font-size:12px}
}