/*
 * Atproo NutriAI — Midnight Neon v3
 * Selected full-interface theme. Loaded after every legacy stylesheet so the
 * visual system can change without touching authentication or application JS.
 */

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
  color-scheme: dark;
  --bg: #070b1b;
  --bg2: #0a1024;
  --bg3: #101831;
  --bg4: #16203e;
  --card: rgba(13, 23, 50, .82);
  --surface: rgba(255, 255, 255, .038);
  --surface2: rgba(255, 255, 255, .072);
  --bd: rgba(129, 140, 248, .14);
  --bd2: rgba(110, 231, 255, .22);
  --border: rgba(129, 140, 248, .14);
  --border2: rgba(110, 231, 255, .22);

  --g1: #57c7ff;
  --g2: #7c5cff;
  --g3: #b56cff;
  --blue: #57c7ff;
  --purple: #9b72ff;
  --cyan: #31e1f7;
  --or: #ffb65c;
  --yellow: #ffd166;
  --pink: #f778d5;
  --rd: #ff6f91;

  --t1: #f7f8ff;
  --t2: #aab5d4;
  --t3: #697699;
  --t4: #303b5c;

  --grad-brand: linear-gradient(135deg, #31e1f7 0%, #6672ff 48%, #b56cff 100%);
  --grad-purple: linear-gradient(135deg, #6d5dfc 0%, #b56cff 100%);
  --grad-warm: linear-gradient(135deg, #ffb65c 0%, #ff6f91 100%);
  --grad-dark: linear-gradient(180deg, #0b1229 0%, #070b1b 100%);
  --grad-card: linear-gradient(145deg, rgba(91, 94, 255, .18), rgba(49, 225, 247, .055));

  --sh-sm: 0 8px 24px rgba(0, 0, 0, .24);
  --sh: 0 14px 38px rgba(0, 0, 0, .34);
  --sh-lg: 0 28px 80px rgba(0, 0, 0, .5);
  --sh-glow: 0 0 42px rgba(90, 103, 255, .24);
  --sh-card: 0 1px 0 rgba(255, 255, 255, .025) inset, 0 16px 36px rgba(1, 4, 20, .26);

  --r-xs: 7px;
  --r-sm: 11px;
  --r: 15px;
  --r-lg: 19px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --sidebar-w: 238px;
  --content-max: 1600px;
  --font-display: "Space Grotesk", Inter, system-ui, sans-serif;
}

/* =========================================================
   2. GLOBAL CANVAS
   ========================================================= */
html,
body {
  background: var(--bg) !important;
  color: var(--t1) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.theme-midnight-neon {
  min-height: 100vh;
  background:
    radial-gradient(circle at 76% -12%, rgba(96, 75, 255, .18), transparent 34%),
    radial-gradient(circle at 18% 110%, rgba(30, 192, 255, .1), transparent 32%),
    #070b1b !important;
}

body.theme-midnight-neon::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .44;
  background-image:
    linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

::selection { background: rgba(124, 92, 255, .42); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(4, 8, 22, .72); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(87, 199, 255, .48), rgba(181, 108, 255, .48));
  border-radius: 20px;
  border: 2px solid rgba(4, 8, 22, .72);
}

h1, h2, h3,
.page-title,
.hb-title,
.auth-title,
.ws-heading,
.prof-name,
.section-title,
.chart-title {
  font-family: var(--font-display) !important;
  letter-spacing: -.025em;
}

.grad-text,
.ws-heading .grad,
.sb-name,
.auth-brand,
.bs-val.grad-text,
.ps-val.grad-text {
  background: var(--grad-brand) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.amb.a1 { background: rgba(89, 77, 255, .24) !important; }
.amb.a2 { background: rgba(49, 225, 247, .13) !important; }
.amb.a3 { background: rgba(181, 108, 255, .16) !important; }
.star-field { opacity: .42; }

/* =========================================================
   3. WELCOME, SPLASH, AUTH, ONBOARDING
   ========================================================= */
#app-splash {
  background:
    radial-gradient(circle at 50% 42%, rgba(102, 114, 255, .2), transparent 28%),
    #070b1b !important;
}

#app-splash .as-logo {
  border: 1px solid rgba(87, 199, 255, .34);
  box-shadow: 0 0 0 8px rgba(102, 114, 255, .07), 0 22px 70px rgba(86, 75, 255, .36) !important;
}

#app-splash .as-brand { color: rgba(224, 232, 255, .58) !important; }

#welcome-screen.ws-screen {
  background:
    radial-gradient(ellipse 72% 58% at 12% 4%, rgba(76, 72, 224, .34), transparent 62%),
    radial-gradient(ellipse 62% 64% at 92% 14%, rgba(29, 171, 255, .2), transparent 58%),
    radial-gradient(ellipse 70% 60% at 70% 100%, rgba(156, 80, 225, .2), transparent 60%),
    #070b1b !important;
}

#welcome-screen.ws-screen::before {
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
  opacity: .5;
}

.ws-content { max-width: 1180px !important; padding: 44px 34px 28px !important; }
.ws-badge {
  color: #b8ecff !important;
  background: rgba(74, 133, 255, .12) !important;
  border: 1px solid rgba(87, 199, 255, .27) !important;
  box-shadow: 0 0 24px rgba(87, 199, 255, .08);
}
.ws-heading { font-size: clamp(34px, 4.5vw, 60px) !important; }
.ws-sub { color: var(--t2) !important; font-size: 15px !important; }
.ws-sub .hl { color: #78d9ff !important; }
.ws-feat {
  background: linear-gradient(145deg, rgba(24, 35, 72, .76), rgba(11, 18, 42, .72)) !important;
  border: 1px solid rgba(119, 129, 255, .14) !important;
  box-shadow: var(--sh-card);
}
.ws-feat:hover { border-color: rgba(87, 199, 255, .28) !important; transform: translateY(-2px); }
.ws-btn-primary {
  background: var(--grad-brand) !important;
  color: #06081c !important;
  box-shadow: 0 16px 38px rgba(97, 83, 255, .28) !important;
}
.ws-btn-secondary {
  background: rgba(15, 24, 52, .74) !important;
  border-color: rgba(132, 145, 255, .22) !important;
}
.ws-illu-ring {
  background: radial-gradient(circle, rgba(49, 225, 247, .11), rgba(102, 114, 255, .14) 52%, transparent 74%) !important;
  border-color: rgba(87, 199, 255, .34) !important;
  box-shadow: 0 0 90px 22px rgba(87, 83, 255, .24), inset 0 0 55px rgba(49, 225, 247, .12) !important;
}

#auth-screen.auth-screen {
  background:
    radial-gradient(circle at 12% 8%, rgba(95, 75, 255, .22), transparent 34%),
    radial-gradient(circle at 88% 92%, rgba(37, 190, 255, .15), transparent 30%),
    rgba(7, 11, 27, .98) !important;
}

#auth-screen.auth-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(87,199,255,.035) 50%, transparent 70%);
}

.auth-card {
  position: relative;
  width: min(440px, calc(100vw - 30px)) !important;
  padding: 34px !important;
  background: linear-gradient(155deg, rgba(18, 29, 64, .94), rgba(8, 14, 34, .94)) !important;
  border: 1px solid rgba(110, 126, 255, .24) !important;
  border-radius: 26px !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .52), 0 0 60px rgba(94, 79, 255, .12) !important;
  backdrop-filter: blur(28px) saturate(130%);
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(87, 199, 255, .08), transparent 30%, transparent 70%, rgba(181, 108, 255, .06));
}
.auth-logo, .auth-title, .auth-desc, .auth-tabs, .auth-form { position: relative; z-index: 1; }
.auth-orb {
  background: rgba(16, 24, 54, .9) !important;
  border: 1px solid rgba(87, 199, 255, .28);
  box-shadow: 0 0 30px rgba(98, 90, 255, .22);
}
.auth-sub { color: #8897be !important; letter-spacing: 2.8px !important; }
.auth-title { color: #fff !important; font-size: 30px !important; }
.auth-desc { color: var(--t2) !important; }
.auth-tabs {
  background: rgba(4, 8, 24, .66) !important;
  border: 1px solid rgba(123, 136, 255, .12);
}
.auth-tab { color: var(--t3) !important; }
.auth-tab.active, .auth-tab.on {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(87, 199, 255, .17), rgba(124, 92, 255, .24)) !important;
  border: 1px solid rgba(100, 201, 255, .2) !important;
  box-shadow: inset 0 0 20px rgba(90, 95, 255, .08);
}

.field-label { color: #b7c2df !important; }
.field-inp,
.fi,
.hist-search,
.hist-search input,
.adm-input,
select,
textarea {
  color: var(--t1) !important;
  background: rgba(7, 13, 34, .78) !important;
  border-color: rgba(118, 132, 255, .17) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}
.field-inp:focus,
.fi:focus,
.hist-search:focus-within,
.adm-input:focus,
select:focus,
textarea:focus {
  border-color: rgba(87, 199, 255, .58) !important;
  box-shadow: 0 0 0 3px rgba(87, 199, 255, .09), 0 0 28px rgba(100, 84, 255, .08) !important;
}
.field-inp::placeholder, .fi::placeholder, textarea::placeholder { color: #52607e !important; }
.btn-primary,
.btn-primary-sm,
.auth-btn,
.plan-btn-primary,
.pb-btn,
.acp-btn,
.qt-save,
.support-fab,
.ob-next-btn {
  color: #05071a !important;
  background: var(--grad-brand) !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(97, 82, 255, .22) !important;
}
.btn-primary:hover,
.btn-primary-sm:hover,
.plan-btn-primary:hover,
.pb-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-social,
.soc-btn {
  background: rgba(10, 17, 40, .8) !important;
  border-color: rgba(120, 135, 255, .18) !important;
  color: var(--t1) !important;
}
.or-divider { color: var(--t3) !important; }
.or-divider::before, .or-divider::after { background: rgba(127, 139, 255, .13) !important; }

/* Dynamic onboarding shell */
.ob-screen,
.onboarding-screen,
#onboarding-screen {
  background:
    radial-gradient(circle at 14% 5%, rgba(101, 78, 255, .22), transparent 34%),
    radial-gradient(circle at 90% 88%, rgba(37, 190, 255, .12), transparent 32%),
    #070b1b !important;
}
.ob-card,
.onboarding-card,
.ob-panel,
.onboarding-content {
  background: linear-gradient(155deg, rgba(17, 27, 60, .94), rgba(8, 14, 34, .94)) !important;
  border-color: rgba(112, 127, 255, .2) !important;
  box-shadow: var(--sh-lg) !important;
}
.ob-option,
.onboarding-option {
  background: rgba(13, 22, 49, .78) !important;
  border-color: rgba(117, 132, 255, .15) !important;
}
.ob-option.selected,
.ob-option.active,
.onboarding-option.selected {
  background: linear-gradient(135deg, rgba(87,199,255,.13), rgba(124,92,255,.22)) !important;
  border-color: rgba(87,199,255,.5) !important;
}

/* =========================================================
   4. APP SHELL, SIDEBAR, TOPBAR
   ========================================================= */
#app {
  background: transparent !important;
  isolation: isolate;
}
.sidebar {
  width: var(--sidebar-w) !important;
  background:
    linear-gradient(180deg, rgba(10, 16, 38, .98), rgba(6, 10, 27, .98)) !important;
  border-right: 1px solid rgba(113, 128, 255, .14) !important;
  box-shadow: 18px 0 55px rgba(0, 0, 0, .16);
}
.sb-logo {
  min-height: 78px;
  padding: 18px 18px 15px !important;
  border-bottom: 1px solid rgba(116, 129, 255, .11) !important;
}
.sb-orb {
  width: 39px !important;
  height: 39px !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(57, 222, 249, .95), rgba(124, 92, 255, .95)) !important;
  box-shadow: 0 0 28px rgba(94, 97, 255, .22);
}
.sb-name { font-size: 18px !important; }
.sb-sub { color: #7380a2 !important; letter-spacing: 2.1px !important; }
.sb-nav { padding: 11px 10px !important; gap: 3px !important; }
.sb-sec {
  color: #53617e !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  margin: 12px 10px 5px !important;
}
.sb-item {
  position: relative;
  min-height: 39px;
  padding: 9px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  color: #8e9bbc !important;
  font-size: 12.5px !important;
}
.sb-item::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 6px 6px 0;
  background: transparent;
  box-shadow: none;
}
.sb-item:hover {
  color: #edf2ff !important;
  background: rgba(95, 109, 255, .07) !important;
  border-color: rgba(103, 121, 255, .09) !important;
}
.sb-item.active {
  color: #fff !important;
  background: linear-gradient(95deg, rgba(75, 106, 255, .3), rgba(135, 67, 230, .3)) !important;
  border-color: rgba(99, 197, 255, .26) !important;
  box-shadow: inset 0 0 24px rgba(89, 85, 255, .12), 0 10px 28px rgba(10, 7, 36, .2);
}
.sb-item.active::before {
  background: linear-gradient(180deg, #31e1f7, #9b72ff);
  box-shadow: 0 0 14px rgba(49, 225, 247, .8);
}
.sb-ico { width: 17px !important; height: 17px !important; }
.sb-user {
  min-height: 66px;
  background: rgba(10, 17, 40, .66);
  border-top-color: rgba(112, 128, 255, .13) !important;
}
.sb-avatar,
.tb-avatar,
.home-toolbar-avatar {
  color: #fff !important;
  background: linear-gradient(135deg, #347cff, #8e5cff) !important;
  border: 1px solid rgba(112, 221, 255, .28);
  box-shadow: 0 6px 24px rgba(82, 84, 255, .25);
}
.sb-uplan { color: #71d8ff !important; }

.main-wrap { background: transparent !important; }
.topbar {
  background: rgba(7, 11, 27, .8) !important;
  border-bottom: 1px solid rgba(116, 130, 255, .14) !important;
  backdrop-filter: blur(24px) saturate(140%);
}
.tb-mobile-logo {
  font-family: var(--font-display) !important;
  color: #f5f7ff !important;
  font-weight: 700 !important;
}
#content.content,
#content {
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
  padding: 22px 28px 42px !important;
}
.page {
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 !important;
}
#p-home { max-width: 1600px; }
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  margin-bottom: 15px !important;
}
.page-title {
  font-size: clamp(24px, 2vw, 32px) !important;
  color: #f6f8ff !important;
}

/* =========================================================
   5. SHARED SURFACES AND CONTROLS
   ========================================================= */
.chart-card,
.meal-planner-card,
.meals-card,
.ai-rec-card,
.workout-card,
.activity-card,
.body-card,
.body-progress-card,
.goals-rail-card,
.achievements-card,
.streak-card,
.water-card,
.rings-card,
.stat-card-ring,
.voice-card,
.bmi-card,
.bmi-scale-card,
.cal-calc-card,
.plan-card,
.cur-plan-banner,
.promo-section,
.weight-log-add,
.settings-group,
.set-item,
.empty-state,
.modal-sheet,
.result-card,
.camera-viewport,
.prof-hero,
.premium-widget,
.support-panel,
.adm-card,
.adm-stat {
  background:
    linear-gradient(145deg, rgba(15, 25, 55, .88), rgba(8, 15, 36, .86)) !important;
  border: 1px solid rgba(114, 130, 255, .14) !important;
  box-shadow: var(--sh-card) !important;
  backdrop-filter: blur(18px) saturate(120%);
}
.chart-card:hover,
.meal-planner-card:hover,
.stat-card-ring:hover,
.plan-card:hover,
.set-item:hover {
  border-color: rgba(87, 199, 255, .24) !important;
}
.section-header { border-color: rgba(114, 129, 255, .1) !important; }
.section-title, .chart-title { color: #f2f5ff !important; }
.section-link { color: #6ed5ff !important; }
.section-link:hover { color: #c394ff !important; }
.empty-state-sm,
.empty-state {
  color: var(--t2) !important;
  background: rgba(6, 12, 31, .48) !important;
  border-color: rgba(112, 128, 255, .11) !important;
}
.empty-ico {
  filter: drop-shadow(0 0 16px rgba(100, 111, 255, .28));
}
.mpill,
.chart-tab,
.prem-tab,
.hist-filter,
.filter-pill {
  color: #8f9cbd !important;
  background: rgba(11, 18, 42, .74) !important;
  border-color: rgba(112, 129, 255, .14) !important;
}
.mpill.active,
.chart-tab.active,
.prem-tab.active,
.hist-filter.active,
.filter-pill.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(62, 179, 255, .18), rgba(124, 92, 255, .3)) !important;
  border-color: rgba(87, 199, 255, .34) !important;
  box-shadow: 0 7px 22px rgba(76, 70, 224, .14);
}
.toggle.on,
.adm-toggle input:checked + .slider {
  background: linear-gradient(90deg, #36d9f5, #7c5cff) !important;
}
.modal-overlay { background: rgba(2, 5, 17, .78) !important; backdrop-filter: blur(9px); }
.modal-sheet {
  border-radius: 22px !important;
  border-color: rgba(103, 193, 255, .22) !important;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .62), 0 0 70px rgba(82, 69, 226, .12) !important;
}
.modal-handle { background: rgba(128, 142, 181, .34) !important; }
.toast { background: rgba(12, 20, 45, .94) !important; border-color: rgba(92, 191, 255, .28) !important; }

/* =========================================================
   6. HOME DASHBOARD
   ========================================================= */
.home-toolbar {
  padding: 2px 0 18px !important;
  border-bottom: 1px solid rgba(111, 127, 255, .1);
  margin-bottom: 18px !important;
}
.home-greeting-title { color: #f5f7ff !important; font-family: var(--font-display) !important; }
.home-greeting-sub { color: #72809e !important; }
.home-toolbar-search {
  width: min(430px, 34vw) !important;
  background: rgba(9, 16, 38, .82) !important;
  border: 1px solid rgba(114, 130, 255, .16) !important;
}
.home-toolbar-search:hover { border-color: rgba(87, 199, 255, .28) !important; }
.home-toolbar-bell,
.home-streak-pill,
.home-premium-pill {
  background: rgba(12, 20, 46, .82) !important;
  border-color: rgba(111, 128, 255, .16) !important;
}
.home-premium-pill { color: #c59aff !important; }

.hero-banner {
  min-height: 255px !important;
  border-radius: 21px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 44%, rgba(45, 210, 255, .18), transparent 26%),
    radial-gradient(circle at 68% 120%, rgba(156, 77, 255, .3), transparent 48%),
    linear-gradient(120deg, #101745 0%, #101a54 46%, #17266a 100%) !important;
  border: 1px solid rgba(86, 205, 255, .23) !important;
  box-shadow: 0 26px 70px rgba(3, 6, 28, .4), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 42%, rgba(86, 224, 255, .07) 52%, transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 56px);
}
.hero-banner-left { max-width: 58% !important; }
.hb-badge {
  color: #8de4ff !important;
  background: rgba(43, 164, 255, .13) !important;
  border-color: rgba(87, 199, 255, .23) !important;
}
.hb-title { color: #fff !important; font-size: clamp(31px, 3vw, 47px) !important; }
.hb-desc { color: #aeb8d4 !important; max-width: 590px; }
.hb-cta {
  color: #080a1d !important;
  background: var(--grad-brand) !important;
  box-shadow: 0 14px 34px rgba(80, 94, 255, .25) !important;
}
.hero-banner-right::before,
.hero-banner-right::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(88, 210, 255, .28);
}
.hero-banner-right::before { width: 210px; height: 210px; box-shadow: 0 0 46px rgba(55, 188, 255, .16); }
.hero-banner-right::after { width: 255px; height: 255px; border-style: dashed; opacity: .5; }
.hb-emoji { filter: drop-shadow(0 22px 30px rgba(0,0,0,.38)) drop-shadow(0 0 22px rgba(91, 114, 255, .22)); }
.hb-orb1 { background: rgba(48, 205, 255, .2) !important; }
.hb-orb2 { background: rgba(161, 81, 255, .26) !important; }

.dash-hero {
  background: linear-gradient(145deg, rgba(13, 23, 52, .92), rgba(8, 14, 35, .9)) !important;
  border-color: rgba(112, 128, 255, .15) !important;
  box-shadow: var(--sh-card) !important;
}
.dash-hero-badge {
  color: #bda3ff !important;
  background: rgba(121, 84, 255, .11) !important;
  border-color: rgba(164, 120, 255, .2) !important;
}
.cal-ring-bg, .scr-ring-bg { stroke: rgba(112, 127, 168, .13) !important; }
.cal-ring-fill { stroke: url(#calGrad) !important; filter: drop-shadow(0 0 6px rgba(82, 190, 255, .45)); }
.dm-bar,
.goal-bar-wrap,
.water-bar-wrap { background: rgba(104, 119, 164, .13) !important; }
.dm-fill,
.goal-bar-fill,
.water-bar-fill { box-shadow: 0 0 12px currentColor; }

.stats-grid { gap: 12px !important; }
.stat-card-ring {
  border-radius: 16px !important;
  background: linear-gradient(150deg, rgba(16, 27, 60, .9), rgba(8, 15, 35, .86)) !important;
}
.stat-card-ring:hover { transform: translateY(-3px); box-shadow: 0 18px 46px rgba(0,0,0,.3) !important; }
.scr-label { color: #8d9abb !important; }
.scr-val { color: #f5f7ff !important; font-family: var(--font-display) !important; }

.quick-actions {
  padding: 10px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(14, 24, 53, .78), rgba(7, 13, 33, .78)) !important;
  border: 1px solid rgba(112, 128, 255, .12) !important;
}
.qa-item { border-radius: 13px !important; color: #9eacca !important; }
.qa-item:hover {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(50, 186, 255, .12), rgba(124, 92, 255, .18)) !important;
}
.qa-ico {
  background: rgba(15, 24, 54, .86) !important;
  border: 1px solid rgba(106, 132, 255, .16);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.dash-grid { gap: 16px !important; }
.dash-main, .dash-rail { gap: 15px !important; }
.chart-wrap { background: rgba(5, 10, 27, .24); border-radius: 13px; }
.add-meal-btn,
.add-photo-btn {
  color: #72d9ff !important;
  background: rgba(48, 184, 255, .075) !important;
  border-color: rgba(87, 199, 255, .22) !important;
}
.ai-rec-orb,
.acp-orb {
  background: linear-gradient(135deg, rgba(49,225,247,.18), rgba(124,92,255,.28)) !important;
  box-shadow: 0 0 28px rgba(93, 82, 255, .16);
}
.ai-coach-promo {
  background:
    radial-gradient(circle at 90% 8%, rgba(49, 225, 247, .18), transparent 34%),
    linear-gradient(145deg, rgba(31, 35, 95, .92), rgba(34, 18, 77, .9)) !important;
  border-color: rgba(115, 141, 255, .27) !important;
  box-shadow: 0 20px 50px rgba(23, 10, 67, .28) !important;
}
.premium-banner {
  background:
    radial-gradient(circle at 90% 10%, rgba(45, 215, 255, .22), transparent 32%),
    linear-gradient(145deg, #171b55, #38156a) !important;
  border-color: rgba(143, 130, 255, .3) !important;
  box-shadow: 0 24px 58px rgba(26, 8, 70, .32) !important;
}
.water-glass.filled { color: #50ceff !important; filter: drop-shadow(0 0 7px rgba(61, 196, 255, .45)); }
.streak-flame { color: #d3a3ff !important; }

/* =========================================================
   7. SCANNER, CHAT, HISTORY, PLANS, PROFILE
   ========================================================= */
.camera-viewport {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(77, 89, 255, .13), transparent 36%),
    #05091b !important;
  border-color: rgba(89, 203, 255, .24) !important;
}
.scan-frame { border-color: transparent !important; }
.sf-corner { border-color: #65d8ff !important; filter: drop-shadow(0 0 7px rgba(101, 216, 255, .7)); }
.scan-beam {
  background: linear-gradient(90deg, transparent, #57c7ff, #a36eff, transparent) !important;
  box-shadow: 0 0 18px rgba(87, 199, 255, .6) !important;
}
.live-pill {
  color: #8ee8ff !important;
  background: rgba(13, 30, 59, .82) !important;
  border-color: rgba(87, 199, 255, .31) !important;
}
.live-dot { background: #57c7ff !important; box-shadow: 0 0 10px #57c7ff; }
.cam-ph-ico { filter: drop-shadow(0 0 20px rgba(96, 94, 255, .35)); }
.scan-controls { gap: 10px !important; }
.sc-btn {
  color: #9daac8 !important;
  background: rgba(12, 20, 46, .84) !important;
  border-color: rgba(110, 128, 255, .16) !important;
}
.sc-btn.sc-primary {
  color: #05071a !important;
  background: var(--grad-brand) !important;
  border-color: transparent !important;
}
.capture-btn { border-color: rgba(87,199,255,.6) !important; box-shadow: 0 0 30px rgba(87,199,255,.26); }
.capture-inner { background: var(--grad-brand) !important; }
.ai-thinking-bar { background: rgba(18, 29, 65, .9) !important; border-color: rgba(87,199,255,.22) !important; }

.voice-card {
  background:
    radial-gradient(circle at 86% 15%, rgba(49, 225, 247, .12), transparent 30%),
    linear-gradient(145deg, rgba(21, 28, 75, .9), rgba(22, 15, 57, .86)) !important;
}
.voice-orb,
.chat-avatar {
  background: linear-gradient(135deg, #31e1f7, #7c5cff) !important;
  box-shadow: 0 0 28px rgba(92, 94, 255, .3) !important;
}
.chat-area,
.chat-container,
.chat-messages {
  background: rgba(5, 10, 28, .35) !important;
  border-color: rgba(112, 128, 255, .12) !important;
}
.msg-bubble,
.chat-bubble,
.message-bubble {
  background: rgba(18, 29, 62, .9) !important;
  border-color: rgba(114, 130, 255, .13) !important;
  color: #dce4fa !important;
}
.msg.user .msg-bubble,
.message.user .message-bubble,
.chat-msg.user .chat-bubble {
  background: linear-gradient(135deg, rgba(51, 110, 233, .78), rgba(119, 63, 212, .78)) !important;
  border-color: rgba(111, 203, 255, .2) !important;
  color: #fff !important;
}
.chat-input-wrap,
.coach-input-row {
  background: rgba(9, 16, 39, .9) !important;
  border-color: rgba(112, 130, 255, .17) !important;
}

.hist-search-row { background: transparent !important; }
.hist-item,
.history-item,
.meal-item,
.activity-item,
.weight-log-item,
.shopping-item {
  background: rgba(12, 21, 48, .76) !important;
  border-color: rgba(111, 128, 255, .12) !important;
}
.hist-item:hover,
.history-item:hover,
.meal-item:hover { border-color: rgba(87, 199, 255, .24) !important; }

.prof-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(49, 225, 247, .16), transparent 30%),
    linear-gradient(125deg, rgba(22, 34, 91, .96), rgba(39, 18, 82, .94)) !important;
  border-color: rgba(103, 157, 255, .24) !important;
}
.prof-hero-bg {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 48px),
    linear-gradient(115deg, transparent, rgba(87,199,255,.05), transparent) !important;
}
.prof-av {
  background: var(--grad-brand) !important;
  color: #06081a !important;
  border-color: rgba(205, 231, 255, .42) !important;
  box-shadow: 0 0 38px rgba(93, 100, 255, .3) !important;
}
.prof-plan-tag,
.cpb-badge {
  color: #82ddff !important;
  background: rgba(52, 171, 255, .1) !important;
  border-color: rgba(87, 199, 255, .22) !important;
}
.prem-tabs {
  background: rgba(7, 13, 32, .74) !important;
  border: 1px solid rgba(112, 128, 255, .12) !important;
}
.plan-card.plan-featured {
  border-color: rgba(97, 204, 255, .42) !important;
  box-shadow: 0 0 0 1px rgba(116, 82, 255, .16), 0 22px 60px rgba(25, 13, 75, .28) !important;
}
.plan-popular-badge {
  color: #06081b !important;
  background: var(--grad-brand) !important;
}
.pf-row::before { color: #62d5ff !important; }
.payment-note { color: #8795b7 !important; background: rgba(8, 14, 34, .5) !important; border-color: rgba(112,128,255,.12) !important; }
.settings-group { overflow: hidden; }
.sg-title { color: #7d8aaa !important; }
.sg-item,
.set-item { border-color: rgba(111, 128, 255, .1) !important; }
.sg-item:hover,
.set-item:hover { background: rgba(79, 91, 214, .08) !important; }
.sg-icon,
.si-icon { background: rgba(83, 101, 231, .12) !important; }

/* =========================================================
   8. ADMIN PANEL
   ========================================================= */
#admin-screen {
  color: var(--t1) !important;
  background:
    radial-gradient(circle at 82% -8%, rgba(95, 72, 255, .16), transparent 32%),
    #070b1b !important;
}
#admin-screen .adm-sidebar {
  background: linear-gradient(180deg, #0a1025, #070b1b) !important;
  border-right: 1px solid rgba(112, 129, 255, .14) !important;
}
.adm-nav { color: #8f9bbb !important; border: 1px solid transparent !important; }
.adm-nav:hover { color: #fff !important; background: rgba(85, 101, 229, .08) !important; }
.adm-nav.active {
  color: #fff !important;
  background: linear-gradient(100deg, rgba(53, 186, 255, .18), rgba(124, 92, 255, .28)) !important;
  border-color: rgba(87, 199, 255, .25) !important;
}
.adm-card,
.adm-stat { border-radius: 14px !important; }
.adm-table th {
  color: #657393 !important;
  background: rgba(6, 12, 30, .55) !important;
  border-bottom-color: rgba(112, 128, 255, .13) !important;
}
.adm-table td { color: #a8b4d2 !important; border-bottom-color: rgba(112, 128, 255, .07) !important; }
.adm-table tr:hover td { color: #fff !important; background: rgba(77, 93, 214, .06) !important; }
.adm-label { color: #7885a5 !important; }
.adm-mobile-exit {
  color: #79dcff !important;
  background: rgba(50, 183, 255, .1) !important;
  border-color: rgba(87, 199, 255, .28) !important;
}

/* =========================================================
   9. MOBILE AND TABLET
   ========================================================= */
@media (max-width: 1100px) {
  :root { --sidebar-w: 218px; }
  #content.content, #content { padding: 18px 20px 38px !important; }
  .hero-banner-left { max-width: 64% !important; }
  .home-toolbar-search { width: 270px !important; }
}

@media (max-width: 768px) {
  body.theme-midnight-neon {
    background:
      radial-gradient(circle at 80% -5%, rgba(91, 70, 238, .2), transparent 30%),
      #070b1b !important;
  }
  #content.content, #content {
    padding: 14px 14px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .page { max-width: none; }
  .topbar { min-height: 58px !important; }
  .bottom-nav {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    border-radius: 19px !important;
    background: rgba(9, 15, 36, .92) !important;
    border: 1px solid rgba(110, 128, 255, .2) !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .52) !important;
    backdrop-filter: blur(22px) saturate(150%);
  }
  .nav-item { color: #697799 !important; }
  .nav-item.on {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(46, 188, 255, .15), rgba(124, 92, 255, .24)) !important;
  }
  #mobile-nav-modal .mnm-sheet,
  #quick-track-modal .qt-sheet {
    background: linear-gradient(180deg, #111a35, #080e24) !important;
    border: 1px solid rgba(109, 128, 255, .2);
    box-shadow: 0 -24px 70px rgba(0,0,0,.48);
  }
  #mobile-nav-modal .mnm-header { background: rgba(14, 22, 48, .96) !important; }

  #mobile-simple-home {
    display: block !important;
    color: var(--t1) !important;
    background:
      radial-gradient(circle at 85% 8%, rgba(90, 69, 240, .2), transparent 27%),
      linear-gradient(180deg, #0d1530, #080e22) !important;
    margin: -14px -14px 18px !important;
    padding: 22px 16px 26px !important;
    border-radius: 0 0 27px 27px !important;
    border-bottom: 1px solid rgba(108, 127, 255, .19);
  }
  .msh-greet, .msh-day-lbl, .msh-ring-lbl, .msh-mac-lbl, .msh-empty-sub, .msh-meal-cal { color: #7f8dab !important; }
  .msh-streak-pill {
    color: #caa4ff !important;
    background: rgba(140, 88, 255, .12) !important;
    border: 1px solid rgba(173, 119, 255, .2);
  }
  .msh-day-num { color: #8c99b7 !important; }
  .msh-day.active .msh-day-lbl { color: #eaf0ff !important; }
  .msh-day.active .msh-day-num { color: #05071a !important; background: var(--grad-brand) !important; }
  .msh-ring-bg { stroke: rgba(112, 128, 168, .16) !important; }
  .msh-ring-fill { stroke: #6e7cff !important; filter: drop-shadow(0 0 7px rgba(92, 105, 255, .55)); }
  .msh-ring-val, .msh-mac-val, .msh-recent-title, .msh-empty-title, .msh-meal-name { color: #f5f7ff !important; }
  .msh-mac-card,
  .msh-empty-card,
  .msh-meal-item {
    background: rgba(12, 21, 47, .8) !important;
    border: 1px solid rgba(112, 128, 255, .13);
  }
  .msh-meal-thumb { background: rgba(5, 10, 27, .75) !important; }
  .auth-card { padding: 26px 21px !important; border-radius: 22px !important; }
  .ws-content { padding: 24px 18px 20px !important; }
  .ws-heading { font-size: 34px !important; }
  .ws-feat-grid { grid-template-columns: 1fr !important; }
  .page-title { font-size: 24px !important; }
  .camera-viewport { min-height: 390px; }
}

@media (max-width: 420px) {
  #content.content, #content { padding-left: 11px !important; padding-right: 11px !important; }
  #mobile-simple-home { margin-left: -11px !important; margin-right: -11px !important; }
  .auth-card { width: calc(100vw - 22px) !important; }
  .ws-heading { font-size: 30px !important; }
}

/* =========================================================
   10. ACCESSIBILITY AND MOTION
   ========================================================= */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #62d7ff !important;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  body, #app, #content { background: #fff !important; color: #111 !important; }
  .sidebar, .topbar, .bottom-nav, .support-fab { display: none !important; }
}