/* 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; }


/* HIVE login blend: remove the separate midnight-blue logo backdrop and use the same app canvas. */
body:has(.login-hero){background:var(--bg)!important;color:var(--text)!important}
.login-hero{background:radial-gradient(ellipse at 7% 12%,color-mix(in srgb,var(--acc2) 12%,transparent),transparent 36%),radial-gradient(ellipse at 92% 88%,color-mix(in srgb,var(--gold) 15%,transparent),transparent 34%),var(--bg)!important;isolation:isolate!important}
.login-hero::before{background-image:radial-gradient(circle at 20% 22%,color-mix(in srgb,var(--acc2) 11%,transparent),transparent 38%),radial-gradient(circle at 80% 75%,color-mix(in srgb,var(--gold) 10%,transparent),transparent 34%),linear-gradient(135deg,color-mix(in srgb,var(--card) 35%,transparent),transparent 72%)!important;background-size:auto!important;background-position:center!important;filter:none!important;opacity:1!important;z-index:-2!important}
.login-hero::after{background:linear-gradient(125deg,color-mix(in srgb,var(--bg) 48%,transparent),color-mix(in srgb,var(--bg) 20%,transparent))!important;opacity:.55!important;z-index:-1!important}
.login-hero-inner>.hv-logo{filter:drop-shadow(0 18px 24px color-mix(in srgb,var(--acc2) 16%,transparent))!important;mix-blend-mode:normal!important}
.login-form-card,.login-hero-inner>.login-form-card{background:color-mix(in srgb,var(--card) 92%,transparent)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-lg)!important;color:var(--text)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
.login-form-card .login-field label{color:var(--muted)!important}
.login-form-card .login-field input{background:var(--card2)!important;color:var(--text)!important;border-color:var(--line)!important;box-shadow:none!important}
.login-form-card .login-field input::placeholder{color:var(--muted)!important;opacity:.8!important}
.login-form-card .login-field input:focus{border-color:var(--acc2)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc2) 18%,transparent)!important}
.login-form-card .login-footer-note{color:var(--muted)!important}
.login-form-card .adminlink{color:var(--acc2)!important}
.login-form-card .password-eye{background:var(--acc-soft)!important;color:var(--acc2)!important;border-color:var(--line)!important}
:root[data-theme="dark"] .login-hero::after{background:linear-gradient(125deg,color-mix(in srgb,var(--bg) 66%,transparent),color-mix(in srgb,var(--bg) 42%,transparent))!important}

/* HIVE: render the original transparent SVG emblem with a live wordmark, not the old navy-background bitmap. */
.login-hero-inner>.hv-logo.login-brand-assembly{grid-column:1!important;grid-row:1!important;justify-self:center!important;align-self:center!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;width:min(100%,390px)!important;max-width:100%!important;height:auto!important;max-height:none!important;margin:0!important;padding:10px 0!important;object-fit:initial!important;filter:none!important;mix-blend-mode:normal!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;}
.login-brand-mark{display:block!important;width:min(100%,292px)!important;height:auto!important;max-height:290px!important;object-fit:contain!important;margin:0 auto 8px!important;filter:drop-shadow(0 14px 20px color-mix(in srgb,var(--acc2) 14%,transparent))!important;animation:none!important;}
.login-brand-wordmark{font:800 clamp(31px,4vw,43px)/1 'Sora',system-ui,sans-serif!important;letter-spacing:.27em!important;text-indent:.27em!important;color:var(--text)!important;margin:1px auto 8px!important;text-align:center!important;}
.login-brand-tagline{max-width:330px!important;font:700 10px/1.8 var(--font)!important;letter-spacing:.16em!important;color:var(--muted)!important;text-align:center!important;margin:0 auto!important;}
@media(max-width:680px){.login-hero-inner>.hv-logo.login-brand-assembly{grid-column:1!important;grid-row:1!important;width:min(100%,245px)!important;padding:0!important;margin:0 auto!important}.login-brand-mark{width:min(100%,175px)!important;max-height:190px!important;margin-bottom:2px!important}.login-brand-wordmark{font-size:30px!important;margin-bottom:4px!important}.login-brand-tagline{font-size:8px!important;letter-spacing:.12em!important}.login-hero-inner>.login-form-card{grid-column:1!important;grid-row:2!important}}

/* V13: on the unselected field picker, place the field choices directly below the blended logo on mobile. */
@media(max-width:680px){.login-hero-inner>.login-form-card.fpick{grid-column:1!important;grid-row:2!important}}

/* EcoPoints is its own sustainability module and keeps its green palette inside HIVE. */
.ux-nav .navbtn.eco-tab{color:#167A5B!important}
.ux-nav .navbtn.eco-tab .eco-dot{background:#B9E872!important}
.ux-nav .navbtn.eco-tab:hover,.ux-nav .navbtn.eco-tab.active{background:#EAF4EE!important;color:#105840!important}
.ux-nav .navbtn.eco-tab.active:before{background:linear-gradient(90deg,#167A5B,#B9E872)!important}

/* v19: consistent, theme-aware feature back button and unobtrusive horizontal motion */
.hive-nav-back,.hive-page-back{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  flex:0 0 40px!important;width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;
  padding:0!important;border:1px solid var(--line,#dbe3ec)!important;border-radius:14px!important;
  background:color-mix(in srgb,var(--card,#fff) 92%,var(--acc,#fbbf24) 8%)!important;
  color:var(--text,#243247)!important;box-shadow:0 4px 12px rgba(21,45,73,.08)!important;
  font:700 25px/1 system-ui,sans-serif!important;text-decoration:none!important;cursor:pointer!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease!important;
  -webkit-tap-highlight-color:transparent;z-index:3;
}
.hive-nav-back:hover,.hive-page-back:hover{transform:translateX(-2px)!important;border-color:var(--acc2,var(--primary,#c6a75e))!important;box-shadow:0 7px 16px rgba(21,45,73,.13)!important}
.hive-nav-back:active,.hive-page-back:active{transform:scale(.96)!important}
.hive-feature-top{justify-content:flex-start!important;gap:10px!important}
.hive-feature-top>.brand{flex:1 1 auto!important;min-width:0!important}
.hive-feature-back-row{display:flex;align-items:center;justify-content:flex-start;margin:0 0 12px;min-height:40px}
.hive-feature-back-row .hive-nav-back{flex:0 0 auto!important;width:auto!important;min-width:88px!important;padding:0 13px!important;font-size:13px!important;line-height:1!important}
.hive-feature-back-row .hive-nav-back span:first-child{font-size:25px!important;line-height:.8!important}
.admin-top .hive-page-back{margin-right:2px}
.hive-admin-pane-slide{animation:hivePaneSlide .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes hivePaneSlide{from{opacity:.6;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
.hive-page-enter{animation:hivePaneSlide .34s cubic-bezier(.2,.8,.2,1) both}
@media(prefers-reduced-motion:reduce){.hive-nav-back,.hive-page-back{transition:none!important}.hive-admin-pane-slide,.hive-page-enter{animation:none!important}}


.hive-admin-back-fixed{position:fixed!important;top:16px!important;left:16px!important;z-index:120!important}
.ops-brand-area{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
@keyframes hiveStandalonePageIn{from{opacity:.65;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
body:has(.admin-hub-page) .admin-hub-inner,
body:has(.admin-top) #phone>.screen,
body:has(#app) #app>.wrap,
body:has(#dashScreen) #dashScreen{animation:hiveStandalonePageIn .34s cubic-bezier(.2,.8,.2,1) both}
@media(prefers-reduced-motion:reduce){body:has(.admin-hub-page) .admin-hub-inner,body:has(.admin-top) #phone>.screen,body:has(#app) #app>.wrap,body:has(#dashScreen) #dashScreen{animation:none!important}}


/* V21: an intentional Admin entry on the initial field picker only. */
.login-form-card.fpick .admin-entry-link{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;
  margin:14px auto 2px!important;padding:10px 15px!important;min-height:42px!important;
  border:1px solid color-mix(in srgb,var(--acc2) 24%,var(--line))!important;border-radius:13px!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--card) 96%,var(--acc-soft)),color-mix(in srgb,var(--card) 88%,#E8D7C2))!important;
  color:var(--text)!important;text-decoration:none!important;font-size:12px!important;font-weight:800!important;
  box-shadow:0 5px 15px rgba(47,31,49,.06)!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.login-form-card.fpick .admin-entry-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--acc-soft);color:var(--acc2);font-size:15px!important}
.login-form-card.fpick .admin-entry-arrow{margin-left:3px;color:var(--acc2);font-size:16px!important}
.login-form-card.fpick .admin-entry-link:hover{transform:translateY(-1px)!important;border-color:var(--gold)!important;box-shadow:0 8px 20px rgba(47,31,49,.10)!important}
.login-form-card.fpick .admin-entry-link:focus-visible{outline:3px solid color-mix(in srgb,var(--acc2) 26%,transparent)!important;outline-offset:3px!important}
@media(prefers-reduced-motion:reduce){.login-form-card.fpick .admin-entry-link{transition:none!important}}


/* V25: use the exact SVG aspect ratio for the intro and the field-picker brand mark.
   This prevents the assembled emblem from looking larger than the logo revealed after the intro. */
#hive-intro .ux-intro-stage {
  width:min(292px,76vw)!important;
  aspect-ratio:336 / 368!important;
  height:auto!important;
  flex:0 0 auto!important;
  margin:0 auto 18px!important;
  overflow:visible!important;
}
#hive-intro .ux-intro-mark {
  width:100%!important;
  height:100%!important;
  aspect-ratio:336 / 368!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
}
#hive-intro .ux-intro-mark .ux-intro-final {
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
}
/* The persistent logo under the intro uses the same rendered size as the final assembled mark. */
.login-hero-inner>.hv-logo.login-brand-assembly {width:min(100%,292px)!important;}
.login-brand-mark {width:min(100%,292px)!important;max-height:320px!important;height:auto!important;object-fit:contain!important;}
@media(max-width:680px){
  #hive-intro .ux-intro-stage {width:min(235px,74vw)!important;aspect-ratio:336 / 368!important;margin:0 auto 14px!important;}
  .login-hero-inner>.hv-logo.login-brand-assembly {width:min(100%,245px)!important;}
  .login-brand-mark {width:min(100%,235px)!important;max-height:258px!important;height:auto!important;margin:0 auto 4px!important;}
}