/* HIVE — Amethyst Atelier colorway
   A theme-only layer: preserves page structure, navigation, and application logic. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F4FA !important;
  --bg2: #F0EAF6 !important;
  --card: #FFFFFF !important;
  --card2: #F8F4FC !important;
  --text: #28213A !important;
  --ink: #28213A !important;
  --muted: #756D85 !important;
  --mut: #756D85 !important;
  --line: #E6DEEF !important;
  --acc: #B8A1F5 !important;
  --acc2: #7C3AED !important;
  --acc3: #6D28D9 !important;
  --acc-soft: #F0E9FB !important;
  --acc-rgb: 124, 58, 237 !important;
  --onacc: #FFFFFF !important;
  --primary: #7C3AED !important;
  --primary-d: #5B21B6 !important;
  --primary-dark: #5B21B6 !important;
  --accent: #8B5CF6 !important;
  --gold: #DDA64E !important;
  --lime: #F0C477 !important;
  --teal: #8B5CF6 !important;
  --g: #7C3AED !important;
  --g2: #5B21B6 !important;
  --green: #16866A !important;
  --green2: #2FAF86 !important;
  --sky: #C4B5FD !important;
  --pink: #E9B7A8 !important;
  --soft: #F0E9FB !important;
  --panel: rgba(255,255,255,.82) !important;
  --sh: 0 12px 34px rgba(73, 42, 112, .10) !important;
  --shadow: 0 8px 24px rgba(73, 42, 112, .08) !important;
  --shadow-lg: 0 24px 60px rgba(73, 42, 112, .15) !important;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #100D18 !important;
  --bg2: #171020 !important;
  --card: #1B1526 !important;
  --card2: #241B33 !important;
  --text: #F7F1FF !important;
  --ink: #F7F1FF !important;
  --muted: #B4A9C7 !important;
  --mut: #B4A9C7 !important;
  --line: #382D49 !important;
  --acc: #C4B5FD !important;
  --acc2: #A78BFA !important;
  --acc3: #8B5CF6 !important;
  --acc-soft: #2A203B !important;
  --acc-rgb: 167, 139, 250 !important;
  --onacc: #160E23 !important;
  --primary: #A78BFA !important;
  --primary-d: #8B5CF6 !important;
  --primary-dark: #6D28D9 !important;
  --accent: #C4B5FD !important;
  --gold: #F0C477 !important;
  --lime: #F0C477 !important;
  --teal: #A78BFA !important;
  --g: #A78BFA !important;
  --g2: #8B5CF6 !important;
  --green: #4AD6A0 !important;
  --green2: #75E0B8 !important;
  --sky: #A78BFA !important;
  --pink: #D6A99B !important;
  --soft: #2A203B !important;
  --panel: rgba(27,21,38,.86) !important;
  --sh: 0 14px 36px rgba(0,0,0,.27) !important;
  --shadow: 0 8px 24px rgba(0,0,0,.24) !important;
  --shadow-lg: 0 24px 60px rgba(0,0,0,.38) !important;
}

/* The Education and Medical panels intentionally share one consistent accent system. */
html[data-field="education"], html[data-field="medical"] {
  --acc: #8B5CF6 !important;
  --acc2: #7C3AED !important;
  --acc3: #6D28D9 !important;
  --acc-rgb: 124,58,237 !important;
  --onacc: #FFFFFF !important;
}
html[data-theme="dark"][data-field="education"],
html[data-theme="dark"][data-field="medical"] {
  --acc: #C4B5FD !important;
  --acc2: #A78BFA !important;
  --acc3: #8B5CF6 !important;
  --acc-rgb: 167,139,250 !important;
  --onacc: #160E23 !important;
}

html, body { scrollbar-color: var(--acc2) var(--bg); }
body:has(.phone) { background: var(--bg) !important; color: var(--text) !important; }
.phone { background: radial-gradient(ellipse at 92% -8%, color-mix(in srgb, var(--acc2) 13%, transparent), transparent 45%), radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 40%), var(--bg) !important; color: var(--text) !important; }
.top { border-color: var(--line) !important; }
.brand, .brand span, .hh1, .hh2, .h1, .home-greeting h1, .section-header h2 { color: var(--text) !important; }
.hcard, .card, .prow, .news, .recovery-card, .home-item, .action-card, .match-card, .stats-grid > div, .login-form-card, .fcard { border-color: var(--line) !important; }
.btn-primary, .login-btn, .hpill.on, .filter-pill.active, .navbtn.active, .btn:not(.btn-primary).highlight, .chip.on {
  background: linear-gradient(135deg, var(--acc2), var(--acc3)) !important;
  border-color: var(--acc2) !important;
  color: #fff !important;
}
.btn:not(.btn-primary), .hbtn, .hpill, .chip, .filter-pill { border-color: var(--line) !important; }
.btn:not(.btn-primary), .hbtn { background: var(--acc-soft) !important; color: var(--acc2) !important; }
.input, input, select, textarea, .login-field input { border-color: var(--line) !important; }
.input:focus, input:focus, select:focus, textarea:focus, .login-field input:focus { border-color: var(--acc2) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc2) 18%, transparent) !important; }
.tag, .code { background: var(--acc-soft) !important; color: var(--acc2) !important; }
.hcard.glow, .fcard:hover { border-color: var(--gold) !important; }
.ux-nav, .nav-main.ux-nav { background: color-mix(in srgb, var(--card) 92%, transparent) !important; border-color: var(--line) !important; }
.ux-nav .navbtn.active { background: var(--acc-soft) !important; color: var(--acc2) !important; }
.ux-nav .navbtn.active:before { background: var(--gold) !important; }
.ux-nav .navbtn.eco-tab { color: var(--acc2) !important; }
.ux-nav .navbtn.eco-tab .eco-dot { background: var(--gold) !important; }
.login-hero { background: var(--bg) !important; }
.login-hero:before { background: radial-gradient(ellipse at 12% 14%, color-mix(in srgb,var(--acc2) 18%,transparent), transparent 38%), radial-gradient(ellipse at 95% 86%, color-mix(in srgb,var(--gold) 12%,transparent), transparent 34%) !important; }
.login-hero:after { background: linear-gradient(120deg,color-mix(in srgb,var(--bg) 95%,transparent),color-mix(in srgb,var(--bg) 78%,transparent)) !important; }
.hv-logo, .login-logo, .ux-loading-orbit img { filter: drop-shadow(0 18px 28px color-mix(in srgb,var(--acc2) 18%,transparent)) !important; }
.hcard.glow { box-shadow: 0 0 22px color-mix(in srgb,var(--gold) 14%,transparent) !important; }
:focus-visible { outline-color: var(--acc2) !important; }

/* Eco Points shares HIVE's violet and warm-metal palette instead of a separate green theme. */
html[data-theme="light"] body, html[data-theme="dark"] body { color: var(--ink, var(--text)) !important; }
body:has(.hero2), body:has(.eco-grid), body:has(.act) { background: radial-gradient(ellipse at 8% 3%, color-mix(in srgb,var(--acc2) 14%,transparent), transparent 35%), radial-gradient(ellipse at 94% 18%, color-mix(in srgb,var(--gold) 10%,transparent), transparent 32%), linear-gradient(145deg,var(--bg),var(--bg2,var(--card))) !important; }
html[data-theme="light"] body:has(.hero2), html[data-theme="light"] body:has(.act) { background-image: radial-gradient(ellipse at 8% 4%,rgba(124,58,237,.15),transparent 34%),radial-gradient(ellipse at 92% 16%,rgba(196,181,253,.13),transparent 32%),radial-gradient(ellipse at 80% 82%,rgba(240,196,119,.15),transparent 35%),linear-gradient(145deg,#F7F4FA,#F0EAF6 52%,#FBF9FD) !important; background-color: #F7F4FA !important; }
html[data-theme="dark"] body:has(.hero2), html[data-theme="dark"] body:has(.act) { background-image: radial-gradient(ellipse at 8% 4%,rgba(167,139,250,.18),transparent 34%),radial-gradient(ellipse at 92% 16%,rgba(124,58,237,.16),transparent 32%),radial-gradient(ellipse at 80% 82%,rgba(240,196,119,.08),transparent 35%),linear-gradient(145deg,#100D18,#171020 52%,#100D18) !important; background-color: #100D18 !important; }
body:has(.hero2) { --bg: #F7F4FA !important; --card: #FFFFFF !important; --ink: #28213A !important; --mut: #756D85 !important; --g: #7C3AED !important; --g2: #5B21B6 !important; --lime: #F0C477 !important; --line: #E6DEEF !important; --soft: #F0E9FB !important; }
html[data-theme="dark"] body:has(.hero2) { --bg: #100D18 !important; --card: #1B1526 !important; --ink: #F7F1FF !important; --mut: #B4A9C7 !important; --g: #A78BFA !important; --g2: #8B5CF6 !important; --lime: #F0C477 !important; --line: #382D49 !important; --soft: #2A203B !important; }
body:has(.hero2) .hero2, body:has(.hero2) .band { background: linear-gradient(135deg,#2A1740,#5B21B6 58%,#7C3AED) !important; }
body:has(.hero2) .hero2::before { background: linear-gradient(90deg,rgba(25,12,38,.92),rgba(52,22,84,.72) 62%,rgba(92,49,145,.32)) !important; }
body:has(.hero2) .live i { background: var(--gold) !important; }
body:has(.hero2) .pic { background: linear-gradient(135deg,#E2D7F7,#7C3AED) !important; }
body:has(.hero2) .pic .pt { color: #4C1D95 !important; background: #FFF7E7 !important; }
body:has(.hero2) .glass { background: rgba(37,20,55,.58) !important; border-color: rgba(255,255,255,.24) !important; }
body:has(.hero2) .gbar i { background: linear-gradient(90deg,#A78BFA,#F0C477) !important; }
body:has(.hero2) .btn:not(.bad):not(.ghost), body:has(.hero2) .chip.on { background: linear-gradient(135deg,var(--g),var(--g2)) !important; border-color: var(--g2) !important; color: #fff !important; }
body:has(.hero2) .btn.big, body:has(.hero2) .hero2 .btn.big, body:has(.hero2) .band .btn.big { background: var(--lime) !important; color: #321A4B !important; }
body:has(.hero2) .chip, body:has(.hero2) .nav button { border-color: var(--line) !important; }
body:has(.hero2) .pill { background: var(--soft) !important; color: var(--g2) !important; border-color: var(--line) !important; }
body:has(.hero2) .pill.y { background: #FFF0D5 !important; color: #79530A !important; }
body:has(.hero2) .pill.gr { background: #E9E0FF !important; color: #5B21B6 !important; }
body:has(.hero2) .nav { background: color-mix(in srgb,var(--card) 96%,transparent) !important; border-color: var(--line) !important; }
html[data-theme="dark"] body:has(.hero2) .nav { background: rgba(27,21,38,.96) !important; }
body:has(.hero2) .pic .em { color: #4C1D95 !important; }

/* The compact Ops and legacy admin pages use inline styles; these overrides recolor them without touching handlers. */
body:has(.wrap), body:has(.login-card) { background: var(--bg) !important; color: var(--text) !important; }
body:has(.wrap) { --bg: #100D18 !important; --bg2: #171020 !important; --card: #1B1526 !important; --card2: #241B33 !important; --text: #F7F1FF !important; --muted: #B4A9C7 !important; --line: #382D49 !important; --acc2: #A78BFA !important; --acc3: #8B5CF6 !important; --gold: #F0C477 !important; --teal: #A78BFA !important; --green: #4AD6A0 !important; }
body:has(.wrap) .login, body:has(.wrap) .topbar { background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb,var(--acc2) 24%,transparent),transparent 62%), linear-gradient(135deg,#1A1028,#32164A 58%,#5B21B6) !important; }
body:has(.wrap) .panel, body:has(.wrap) .card, body:has(.wrap) .stat, body:has(.login-card) .section, body:has(.login-card) .stat, body:has(.login-card) .login-card { background: var(--card) !important; border-color: var(--line) !important; color: var(--text) !important; }
body:has(.wrap) input, body:has(.wrap) select, body:has(.wrap) textarea, body:has(.wrap) .cats>div, body:has(.wrap) .th, body:has(.login-card) input, body:has(.login-card) .search { background: var(--card2,var(--card)) !important; color: var(--text) !important; border-color: var(--line) !important; }
body:has(.wrap) button:not(.g):not(.r):not(.y):not(.ok), body:has(.wrap) .tabs button.on, body:has(.wrap) .pills button.on { background: linear-gradient(135deg,var(--acc2),var(--acc3)) !important; color: #fff !important; border-color: var(--acc2) !important; }
body:has(.wrap) .chip { background: var(--gold) !important; color: #2C1B3E !important; }
body:has(.wrap) .brand-big .bar { background: linear-gradient(90deg,var(--acc2),var(--gold)) !important; }
body:has(.wrap) .wm, body:has(.login-card) h1, body:has(.login-card) .section h2 { color: var(--text) !important; }
body:has(.login-card) { --primary: #7C3AED !important; --primary-d: #5B21B6 !important; --bg: #100D18 !important; --card: #1B1526 !important; --card2: #241B33 !important; --text: #F7F1FF !important; --muted: #B4A9C7 !important; --line: #382D49 !important; --gold: #F0C477 !important; }
body:has(.login-card) .topbar { background: linear-gradient(135deg,#1A1028,#5B21B6) !important; }
body:has(.login-card) .btn-primary, body:has(.login-card) .section h2 .count, body:has(.login-card) .pill.active { background: var(--primary) !important; }
body:has(.login-card) .stat.blue .val, body:has(.login-card) .stat.cyan .val, body:has(.login-card) .stat.purple .val { color: #C4B5FD !important; }
body:has(.login-card) .stat.gold .val { color: var(--gold) !important; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; }
}

/* Eco loading brand animation uses the same accent family. */
body:has(.shell) { --bg: #100D18 !important; --bg2: #171020 !important; --ink: #F7F1FF !important; --muted: #B4A9C7 !important; --green: #A78BFA !important; --green2: #8B5CF6 !important; --sky: #C4B5FD !important; --pink: #F0C477 !important; --panel: rgba(27,21,38,.86) !important; --line: rgba(196,181,253,.22) !important; }
body:has(.shell) .hex-stack { background: linear-gradient(135deg,#E9DFFF 0%,#B8A1F5 24%,#8B5CF6 52%,#5B21B6 80%,#E9DFFF 100%) !important; }
body:has(.shell) .hex-stack.back { background: linear-gradient(145deg,#A78BFA,#F0C477 70%,#7C3AED) !important; }
body:has(.shell) .hex-face { background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(232,220,255,.78)) !important; }
body:has(.shell) .hex-face svg { filter: drop-shadow(0 8px 7px rgba(92,49,145,.25)) !important; }
body:has(.shell) .wordmark span { color: var(--green) !important; }
body:has(.shell) .progress-fill { background: linear-gradient(90deg,#8B5CF6,#C4B5FD,#F0C477,#8B5CF6) !important; }
body:has(.shell) .foot svg { color: var(--green) !important; }
/* Ops has a dedicated password gate before its .wrap dashboard exists. */
body:has(.login) {
  --bg: #100D18 !important;
  --bg2: #171020 !important;
  --card: #1B1526 !important;
  --card2: #241B33 !important;
  --text: #F7F1FF !important;
  --muted: #B4A9C7 !important;
  --line: #382D49 !important;
  --acc2: #A78BFA !important;
  --acc3: #8B5CF6 !important;
  --gold: #F0C477 !important;
  --teal: #A78BFA !important;
}
body:has(.login) .login { background: radial-gradient(ellipse 70% 50% at 50% 0%,rgba(124,58,237,.28),transparent 70%),radial-gradient(ellipse 60% 40% at 50% 100%,rgba(240,196,119,.10),transparent 70%),linear-gradient(145deg,#100D18,#24132F) !important; }
body:has(.login) .panel { background: rgba(27,21,38,.92) !important; border-color: var(--line) !important; color: var(--text) !important; }
body:has(.login) input, body:has(.login) select, body:has(.login) textarea { background: #171020 !important; color: var(--text) !important; border-color: var(--line) !important; }
body:has(.login) input:focus, body:has(.login) select:focus, body:has(.login) textarea:focus { outline-color: var(--acc2) !important; }
body:has(.login) button:not(.g):not(.r):not(.y):not(.ok) { background: linear-gradient(135deg,#8B5CF6,#5B21B6) !important; color: #fff !important; }
body:has(.login) .brand-big .bar { background: linear-gradient(90deg,#A78BFA,#F0C477) !important; }
body:has(.login) .wm { color: #F7F1FF !important; }
/* Preserve contrast in dark mode: filled controls use a deeper violet, while labels use lavender. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .login-btn,
:root[data-theme="dark"] .hpill.on,
:root[data-theme="dark"] .filter-pill.active,
:root[data-theme="dark"] .chip.on,
:root[data-theme="dark"] .navbtn.active:not(.eco-tab) {
  background: linear-gradient(135deg,#7C3AED,#5B21B6) !important;
  border-color: #8B5CF6 !important;
  color: #FFFFFF !important;
}
body:has(.wrap) button:not(.g):not(.r):not(.y):not(.ok),
body:has(.login) button:not(.g):not(.r):not(.y):not(.ok) {
  background: linear-gradient(135deg,#7C3AED,#5B21B6) !important;
  border-color: #8B5CF6 !important;
  color: #FFFFFF !important;
}
html[data-theme="dark"] body:has(.hero2) { --g: #7C3AED !important; --g2: #5B21B6 !important; }