/* 12.6 — cohesive color system, mobile navigation and admin readability. */
:root {
  color-scheme: dark;
  --nexus-canvas: #1d2939;
  --nexus-canvas-deep: #172231;
  --nexus-surface: #263448;
  --nexus-surface-soft: #2d3c52;
  --nexus-surface-raised: #34465f;
  --nexus-ice: #dcecff;
  --nexus-blue: #91b7ef;
  --nexus-blue-strong: #78a8ed;
  --nexus-mint: #81d7c1;
  --nexus-text: #f4f8ff;
  --nexus-muted: #b7c6d9;
  --nexus-subtle: #94a8c0;
  --nexus-line: rgba(191, 215, 244, .14);
  --nexus-focus: #c9e3ff;
  --bg: var(--nexus-canvas);
  --bg-dark: var(--nexus-canvas-deep);
  --panel: var(--nexus-surface);
  --panel-2: var(--nexus-surface-soft);
  --text: var(--nexus-text);
  --muted: var(--nexus-muted);
  --muted-2: var(--nexus-subtle);
}

html { background: var(--nexus-canvas-deep); }
body {
  background:
    radial-gradient(circle at 12% 2%, rgba(142, 191, 245, .12), transparent 28rem),
    radial-gradient(circle at 92% 22%, rgba(125, 217, 198, .07), transparent 31rem),
    linear-gradient(180deg, #233146 0, var(--nexus-canvas) 32rem, #1b2636 100%) !important;
  color: var(--nexus-text);
  overflow-x: clip;
}
body.nexus-pattern-enabled {
  background-image:
    radial-gradient(circle at 12% 2%, rgba(142, 191, 245, .13), transparent 28rem),
    linear-gradient(rgba(29, 41, 57, .91), rgba(27, 38, 54, .96)),
    url('/assets/nexus-pattern.svg') !important;
  background-size: auto, auto, 700px 525px !important;
}
body :is(button,a,summary,input,select,textarea):focus-visible { outline-color: var(--nexus-focus); }

/* Calm and brighter: emphasis is reserved for active states and actions. */
.site-header { background: rgba(31, 44, 61, .94) !important; box-shadow: 0 14px 35px rgba(5, 12, 23, .13); }
.site-header .main-nav { background: rgba(25, 36, 51, .9) !important; }
.utility-bar { background: #172231 !important; }
.site-header .global-search { background: #2b3a50 !important; box-shadow: inset 0 1px rgba(255,255,255,.045) !important; }
.site-header .global-search:focus-within { background: #31425a !important; box-shadow: 0 0 0 2px rgba(162, 202, 249, .16) !important; }
.site-header .sell-btn,
.site-header .register-pill,
.btn-primary,
.nexus-hero-primary { background: linear-gradient(135deg, #a9c6ef, #82ade9) !important; color: #13233a !important; }
.site-header .sell-btn:hover,
.site-header .register-pill:hover,
.btn-primary:hover,
.nexus-hero-primary:hover { background: linear-gradient(135deg, #c6ddf8, #9bc2f3) !important; }
.section-kicker,
.section-title > div > span,
.admin-workspace-content :is(.section-title > div > span,[class$="-hero"] > div > span) { color: #b9d8fb !important; }
body .product-card {
  background: linear-gradient(155deg, #2c3a50, #253348) !important;
  box-shadow: 0 15px 34px rgba(5, 12, 24, .15), inset 0 1px rgba(255,255,255,.055) !important;
}
body .product-card:hover { background: linear-gradient(155deg, #33455e, #29394f) !important; }
body .product-card .product-image-wrap { background: linear-gradient(145deg, #202d40, #182536) !important; }
body .product-card .quick-cart { background: linear-gradient(145deg, #6f98cf, #517ab0) !important; color: #f7fbff; }
.trust-strip { background: rgba(39, 53, 73, .78) !important; }
.footer { background: #172231 !important; }

/* Admin: readable type, clear hierarchy and icon-led navigation. */
.admin-app-shell { grid-template-columns: 292px minmax(0, 1fr) !important; background: #1b2636; }
.admin-sidebar {
  padding: 18px 13px 12px !important;
  background: linear-gradient(180deg, #1c293b, #172231) !important;
  border-right: 1px solid var(--nexus-line) !important;
}
.admin-sidebar .admin-brand { padding: 5px 9px 18px !important; }
.admin-sidebar nav { gap: 3px !important; padding-right: 4px !important; }
.admin-nav-caption { padding: 7px 10px 11px !important; }
.admin-nav-caption span { color: #a9c9ef !important; font-size: 12px !important; letter-spacing: .13em !important; }
.admin-nav-caption small { color: #91a6bf !important; font-size: 12.5px !important; }
.admin-sidebar nav > a,
.admin-nav-group > button {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #d8e4f3 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.admin-nav-group { border: 0 !important; border-radius: 7px !important; }
.admin-nav-group.open { background: rgba(103, 139, 187, .08) !important; }
.admin-nav-group > button > i,
.admin-sidebar nav > .admin-nav-direct > i {
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: rgba(143, 183, 235, .08) !important;
  color: #b9d8fb !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
.admin-nav-group > button > b { background: transparent !important; color: #8fa7c2 !important; }
.admin-nav-group.open > div { max-height: none !important; padding: 2px 6px 10px 20px !important; }
.admin-sidebar nav .admin-nav-group > div > a {
  grid-template-columns: 27px minmax(0,1fr) !important;
  min-height: 42px !important;
  padding: 6px 9px !important;
  border: 0 !important;
  border-radius: 5px !important;
  color: #b8c8db !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
}
.admin-sidebar nav .admin-nav-group > div > a > i {
  width: 27px !important;
  height: 27px !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #8fb5e5 !important;
  font-size: 13px !important;
}
.admin-sidebar nav .admin-nav-group > div > a:hover { background: rgba(151, 188, 234, .07) !important; color: #f4f8ff !important; }
.admin-sidebar nav .admin-nav-group > div > a.active {
  background: linear-gradient(90deg, rgba(126, 169, 224, .2), rgba(126, 169, 224, .06)) !important;
  box-shadow: inset 2px 0 #9bc6f7 !important;
  color: #fff !important;
}
.admin-site-return { color: #adc3dc !important; font-size: 13px !important; }
.admin-topbar { background: rgba(31, 44, 61, .95) !important; border-bottom-color: var(--nexus-line) !important; }
.admin-topbar > div:nth-child(2) small,
.admin-session > span small { font-size: 12px !important; }
.admin-topbar > div:nth-child(2) b,
.admin-session > span b { font-size: 14px !important; }
.admin-workspace-content { color: var(--nexus-text); font-size: 14px !important; }
.admin-workspace-content :is(p,label,li,td,th,dt,dd) { font-size: 14px !important; line-height: 1.58 !important; }
.admin-workspace-content small { font-size: 12.5px !important; line-height: 1.5 !important; }
.admin-workspace-content :is(input,select,textarea,button,.btn) { font-size: 14px !important; }
.admin-workspace-content :is(input,select,textarea) { min-height: 44px; }
.admin-workspace-content textarea { min-height: 108px; }
#adminSettingsForm > button[type="submit"] {
  position: sticky;
  bottom: 14px;
  z-index: 12;
  width: min(100%, 520px);
  margin: 24px auto 2px;
  box-shadow: 0 16px 38px rgba(5, 13, 27, .35), 0 0 0 1px rgba(212, 233, 255, .2) !important;
}

.mobile-bottom-nav,
.mobile-product-action { display: none; }

@media (max-width: 980px) {
  .admin-app-shell { grid-template-columns: 1fr !important; }
  .admin-sidebar { width: min(88vw, 310px) !important; }
}

@media (max-width: 760px) {
  body:has(.mobile-bottom-nav),
  body:has(.mobile-product-action) { padding-bottom: 88px; }
  .mobile-bottom-nav {
    position: fixed;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 66px;
    padding: 6px;
    border: 1px solid rgba(193, 218, 247, .16);
    border-radius: 12px;
    background: rgba(24, 35, 50, .92);
    box-shadow: 0 20px 48px rgba(3, 9, 20, .42), inset 0 1px rgba(255,255,255,.055);
    backdrop-filter: blur(22px) saturate(140%);
  }
  .mobile-nav-item {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    min-width: 0;
    padding: 6px 2px;
    border-radius: 7px !important;
    color: #98abc2;
    text-decoration: none;
  }
  .mobile-nav-item > span { display: grid; place-items: center; width: 23px; height: 23px; }
  .mobile-nav-item svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.75; }
  .mobile-nav-item small { max-width: 100%; overflow: hidden; font-size: 11.5px !important; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav-item.active { background: rgba(140, 184, 238, .12); color: #dcecff; }
  .mobile-nav-item.active::before { position: absolute; top: 0; width: 20px; height: 2px; border-radius: 2px; background: #9fc9f8; box-shadow: 0 0 12px #8ebcf0; content: ''; }
  .mobile-nav-sell { color: #ecf6ff; }
  .mobile-nav-sell > span { width: 36px; height: 30px; border-radius: 7px; background: linear-gradient(145deg, #8fb9ef, #6d9ddc); color: #10223a; box-shadow: 0 9px 20px rgba(62, 111, 174, .28); }
  .mobile-nav-sell svg { width: 20px; height: 20px; stroke-width: 2.1; }

  .mobile-product-action {
    position: fixed;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    z-index: 92;
    display: grid;
    grid-template-columns: minmax(96px, auto) 46px minmax(140px, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 70px;
    padding: 9px 10px;
    border: 1px solid rgba(201, 225, 250, .18);
    border-radius: 12px;
    background: rgba(24, 35, 50, .94);
    box-shadow: 0 20px 50px rgba(3, 9, 20, .48), inset 0 1px rgba(255,255,255,.06);
    backdrop-filter: blur(22px) saturate(145%);
  }
  .mobile-product-action > div { min-width: 0; }
  .mobile-product-action small { display: block; color: #94a8bf; font-size: 10.5px !important; font-weight: 800; letter-spacing: .06em; }
  .mobile-product-action strong { display: block; overflow: hidden; margin-top: 2px; color: #f8fbff; font-size: clamp(17px, 5vw, 22px); letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-product-cart,
  .mobile-product-buy { height: 46px; border: 0; border-radius: 7px !important; }
  .mobile-product-cart { display: grid; place-items: center; background: #34475f; color: #dbeaff; }
  .mobile-product-cart svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .mobile-product-buy { padding: 0 12px; background: linear-gradient(135deg, #aac8ef, #80abe6); color: #12243b; font-size: 13px; font-weight: 850; }
  .mobile-product-action button:disabled { opacity: .48; }

  .floating-message-launcher { bottom: 92px !important; }
  .site-header .header-actions { padding-bottom: 2px; }
  .admin-workspace-content { padding-bottom: 86px !important; }
  #adminSettingsForm > button[type="submit"] { bottom: 10px; width: 100%; }
  .listing-detail-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .listing-detail-layout > div,
  .listing-detail-layout > aside,
  .detail-panel,
  .panel-grid { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
  .detail-tabs { width: 100% !important; max-width: 100% !important; }
  .listing-checkout [data-tooltip]::after,
  .listing-checkout [data-tooltip]::before { display: none !important; }
  .seller-card-top,
  .seller-identity,
  .seller-name-line { min-width: 0 !important; max-width: 100% !important; }
}

@media (max-width: 420px) {
  .mobile-bottom-nav { right: 6px; bottom: max(6px, env(safe-area-inset-bottom)); left: 6px; }
  .mobile-nav-item small { font-size: 11px !important; }
  .mobile-product-action { right: 6px; bottom: max(6px, env(safe-area-inset-bottom)); left: 6px; grid-template-columns: minmax(86px, auto) 43px minmax(126px, 1fr); }
  .mobile-product-buy { padding-inline: 8px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav *,
  .mobile-product-action * { transition: none !important; }
}