/* ETEA — Oversight Committee / Neon Dashboard Design 01
   Visual-only layer. Source: approved Phase R3D. Preserve Worker, API, election rules.
   Reference: user-provided neon ETEA portal composition. */
:root{--nd-ink:#001725;--nd-ice:#dffaff;--nd-teal:#37ffbf;--nd-aqua:#31dfe9;--nd-edge:rgba(58,214,229,.52)}
html{background:#02111f!important}
body.neon-dashboard{font-family:Inter,"Segoe UI",system-ui,sans-serif!important;color:#effbff!important;background:linear-gradient(180deg,#02111e,#061c2f 60%,#02111f)!important}
.neon-dashboard .etea-experience{max-width:1520px!important;width:100%!important;min-height:100svh!important;overflow:hidden!important;isolation:isolate!important;position:relative!important;background:
 radial-gradient(ellipse 58% 38% at 50% 22%,rgba(34,171,197,.25),transparent 80%),
 radial-gradient(ellipse 40% 35% at 15% 68%,rgba(22,178,133,.12),transparent 80%),
 radial-gradient(ellipse 40% 35% at 92% 65%,rgba(17,102,203,.12),transparent 80%),
 linear-gradient(145deg,#031b2c 0%,#062a3e 48%,#031528 100%)!important;
 border-left:1px solid rgba(81,235,247,.17);border-right:1px solid rgba(81,235,247,.17);box-shadow:0 0 110px #0005!important}
.neon-dashboard .etea-experience:before{opacity:.34;z-index:-1!important;background:repeating-linear-gradient(90deg,transparent 0,transparent 83px,rgba(81,230,224,.05) 84px)}
.neon-dashboard .etea-experience:after{content:""!important;display:block!important;position:absolute!important;z-index:-1!important;bottom:0;left:0;right:0;height:225px;pointer-events:none;opacity:.38;background:
 linear-gradient(to top,rgba(0,14,27,.88),transparent 94%),
 repeating-linear-gradient(90deg,transparent 0 25px,rgba(24,180,171,.16) 25px 27px,transparent 27px 83px),
 linear-gradient(0deg,#092b3a,transparent 80%);clip-path:polygon(0 74%,3% 74%,3% 49%,5% 49%,5% 64%,8% 64%,8% 36%,11% 36%,11% 72%,14% 72%,14% 56%,16% 56%,16% 27%,19% 27%,19% 70%,23% 70%,23% 52%,26% 52%,26% 40%,29% 40%,29% 69%,33% 69%,33% 30%,36% 30%,36% 70%,39% 70%,39% 54%,44% 54%,44% 68%,47% 68%,47% 33%,51% 33%,51% 66%,55% 66%,55% 49%,58% 49%,58% 64%,61% 64%,61% 22%,65% 22%,65% 68%,69% 68%,69% 45%,72% 45%,72% 66%,76% 66%,76% 38%,79% 38%,79% 69%,83% 69%,83% 55%,87% 55%,87% 30%,90% 30%,90% 71%,94% 71%,94% 49%,97% 49%,97% 74%,100% 74%,100% 100%,0 100%)}
.neon-dashboard .hero{width:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;background:transparent!important;min-height:0!important}
.neon-dashboard .hero>.nav{width:100%!important;max-width:100%!important;height:78px!important;min-height:78px!important;padding:10px clamp(18px,3.3vw,52px)!important;background:linear-gradient(90deg,rgba(0,20,36,.98),rgba(3,39,56,.94),rgba(0,23,42,.98))!important;border-bottom:1px solid rgba(76,235,229,.23)!important;box-shadow:0 8px 28px rgba(0,15,32,.22),inset 0 -1px 0 rgba(70,241,200,.06)!important;gap:18px;z-index:20!important}
.neon-dashboard .nav .brand{flex:0 1 385px!important;min-width:0;justify-content:flex-start}
.neon-dashboard .nav .logo{width:47px!important;height:47px!important;background:linear-gradient(132deg,#0cd994,#076d83)!important;border:1px solid rgba(103,255,220,.85)!important;color:#fff;font-size:13px!important;border-radius:12px;box-shadow:0 0 26px #06c5b95c,inset 0 2px 4px #ffffff52!important}
.neon-dashboard .nav .brand-text strong{font-size:21px!important;font-weight:950;letter-spacing:.04em}
.neon-dashboard .nav .brand small{font-size:9px!important;color:#b6d4e2!important;letter-spacing:.11em}
.neon-nav-links{display:flex;gap:7px;padding:5px;border-radius:17px;border:1px solid rgba(84,195,209,.12);background:rgba(0,22,39,.48);align-items:center;justify-content:center;flex:0 1 auto}
.neon-nav-links button{appearance:none;border:0;background:transparent;color:#b1d5e2;font-weight:750;font-size:12px;letter-spacing:.025em;padding:10px 15px;border-radius:12px;cursor:pointer;white-space:nowrap;transition:background .22s,color .22s,box-shadow .22s}
.neon-nav-links button:first-child{background:linear-gradient(120deg,rgba(6,145,121,.33),rgba(4,54,74,.5));color:#a4ffe0;box-shadow:0 0 22px rgba(3,218,154,.12),inset 0 -2px 0 #37fac6}
.neon-nav-links button:hover,.neon-nav-links button:focus-visible{color:white;background:rgba(6,132,150,.34);outline:none}
.neon-dashboard .nav .ghost{background:rgba(7,49,72,.76)!important;border:1px solid rgba(104,213,235,.55)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;color:#ecfdff;min-height:42px;padding:10px 16px!important;font-size:12px!important;border-radius:13px!important;white-space:nowrap}
.neon-dashboard .nav .ghost:hover{border-color:#45f6c6!important;background:rgba(12,88,91,.78)!important}
.neon-dashboard .hero>.hero-story{width:100%!important;max-width:1300px!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;padding:clamp(9px,1.25vh,15px) 14px 0!important;margin:0!important}
.neon-dashboard .hero-story>.hero-showcase{position:relative!important;width:min(94%,1025px,calc((100svh - 450px)*1.93))!important;max-width:1025px!important;min-width:min(100%,300px)!important;line-height:0!important;margin:0 auto!important;padding:8px!important;border-radius:24px!important;border:1px solid rgba(60,211,232,.24)!important;background:linear-gradient(150deg,rgba(68,226,239,.12),rgba(5,38,63,.63),rgba(41,230,156,.1))!important;box-shadow:0 0 75px rgba(0,204,230,.16),inset 0 0 22px rgba(66,212,226,.17),0 22px 60px rgba(0,4,17,.44)!important;filter:none!important;transform:none!important}
.neon-dashboard .hero-story>.hero-showcase:before{content:""!important;display:block!important;position:absolute!important;left:6%;right:6%;bottom:-13px;height:18px;border-radius:50%;background:rgba(44,225,192,.43);filter:blur(27px);z-index:-1;pointer-events:none}
.neon-dashboard .hero-showcase>.hero-visual{display:block!important;position:relative!important;width:100%!important;height:auto!important;aspect-ratio:1.93!important;object-fit:contain!important;max-height:none!important;border-radius:16px!important;border:0!important;box-shadow:inset 0 0 35px rgba(0,22,44,.42)!important}
.neon-dashboard .hero-story>.hero-copy{gap:4px!important;margin:0!important;padding:10px 10px 0!important;max-width:900px!important;min-height:0!important;width:100%!important}
.neon-dashboard .hero-copy h1{font-size:clamp(39px,4.7vw,66px)!important;line-height:1!important;margin:0!important;letter-spacing:-.052em!important;color:#f4fdff!important;text-shadow:0 0 32px rgba(36,169,255,.26)!important}
.neon-dashboard .hero-copy h1 em{color:#72ffd0!important;text-shadow:0 0 28px rgba(28,255,188,.26)!important}
.neon-dashboard .hero-copy p{font-size:clamp(12px,1.3vw,17px)!important;color:#b8dce8!important;letter-spacing:.01em;margin:5px 0 0!important}
.neon-dashboard .hero-copy #heroStatus{font-size:9px!important;padding:5px 11px!important;background:rgba(0,55,57,.68)!important;border:1px solid rgba(59,234,187,.43)!important;color:#8df7d0!important;letter-spacing:.08em!important;margin-top:5px}
.neon-dashboard main#mainContent{width:min(calc(100% - 50px),1050px)!important;max-width:1050px!important;margin:clamp(14px,2.1vh,24px) auto 0!important;padding:0 0 clamp(26px,4vh,50px)!important;position:relative!important;z-index:3!important}
.neon-dashboard main#mainContent>.card{border-radius:27px!important;border:1px solid rgba(54,232,228,.60)!important;background:linear-gradient(130deg,rgba(9,73,92,.95),rgba(4,40,61,.96) 58%,rgba(2,30,51,.99))!important;box-shadow:inset 0 1px 0 rgba(197,255,252,.19),inset 0 0 45px rgba(10,149,178,.10),0 25px 74px rgba(0,5,20,.47),0 0 0 6px rgba(9,70,87,.09)!important}
.neon-dashboard #memberCard{display:flex!important;flex-direction:column!important;gap:11px!important;padding:19px clamp(20px,4vw,48px) 20px!important;min-height:0!important}
.neon-dashboard #memberCard>.phase-rail{display:none!important}
.neon-panel-kicker{display:flex;align-items:center;justify-content:center;gap:10px;font-size:10px;font-weight:850;letter-spacing:.19em;color:#78f6ce;text-transform:uppercase;line-height:1.2}
.neon-panel-kicker .shield{width:23px;height:23px;display:inline-grid;place-items:center;border:1px solid rgba(95,254,214,.53);border-radius:50%;background:rgba(0,121,115,.25);font-size:12px;box-shadow:0 0 18px #00a88b44}
.neon-dashboard #memberCard>.topline{margin:0!important;gap:0!important;display:block!important}
.neon-dashboard #memberCard h2{font-size:clamp(26px,2.7vw,36px)!important;line-height:1.1!important;margin:0!important;letter-spacing:-.035em!important}
.neon-dashboard #memberCard .step{display:none!important}
.neon-dashboard #memberCard>.topline p{display:none!important}
.neon-dashboard #memberCard>.grid{display:grid!important;grid-template-columns:1.15fr 1fr!important;gap:12px!important;width:100%!important;max-width:820px!important;margin:3px auto 0!important}
.neon-dashboard #memberCard .field{height:57px!important;min-height:57px!important;font-size:15px!important;border-radius:13px!important;background:linear-gradient(150deg,rgba(0,26,45,.86),rgba(3,54,70,.7))!important;border:1px solid rgba(95,203,244,.60)!important;box-shadow:inset 0 1px 0 #ffffff0a,0 0 0 1px rgba(30,168,203,.08)!important;padding:13px 18px!important;text-align:left!important}
.neon-dashboard #memberCard #voterSearch{padding-left:43px!important}
.neon-dashboard #memberCard>.grid{position:relative}
.neon-dashboard #memberCard>.grid:before{content:"⌕";position:absolute;z-index:2;left:16px;top:11px;color:#76e9ed;font-size:28px;line-height:1;pointer-events:none}
.neon-dashboard #memberCard .field:focus-visible{outline:2px solid #6affd2!important;outline-offset:2px!important;box-shadow:0 0 30px #26daa844!important}
.neon-dashboard #memberCard>.list{width:min(100%,820px)!important;max-width:820px!important;max-height:250px!important;margin:0 auto!important;box-shadow:0 16px 40px rgba(0,8,20,.35)}
.neon-dashboard #memberCard>.roster-context,.neon-dashboard #memberCard>.p11-identity-guidance{display:none!important}
.neon-rule-strip{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:5px auto 0;max-width:900px}
.neon-rule{border:1px solid rgba(40,180,213,.30);border-radius:13px;padding:11px 13px;background:linear-gradient(130deg,rgba(8,46,68,.75),rgba(5,32,54,.77));display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;box-shadow:inset 0 1px 0 rgba(167,255,250,.04)}
.neon-rule .symbol{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(4,125,119,.18);color:#62f4c4;border:1px solid rgba(40,217,186,.28);font-size:19px;flex-shrink:0}
.neon-rule strong{font-size:12px;letter-spacing:.015em;color:#e8fbff;font-weight:780;line-height:1.3;white-space:nowrap}
.neon-rule small{display:block;font-size:10px;color:#84b1c4;line-height:1.4;text-align:left;margin-top:2px}
.neon-dashboard #memberCard>.directory-notice,.neon-dashboard #memberCard>#identity{max-width:820px!important;width:100%!important;margin:0 auto!important}
.neon-dashboard .foot{display:none!important}
.neon-dashboard body, .neon-dashboard button, .neon-dashboard input{letter-spacing:normal}
/* Screen-specific behavior: the hero belongs only to the member welcome/dashboard. */
.neon-dashboard[data-etea-screen]:not([data-etea-screen='welcome']) .hero>.hero-story{display:none!important}
.neon-dashboard[data-etea-screen]:not([data-etea-screen='welcome']) main#mainContent{width:min(calc(100% - 36px),790px)!important;margin:clamp(28px,7vh,74px) auto 0!important}
.neon-dashboard[data-etea-screen='admin'] main#mainContent{width:min(calc(100% - 36px),1160px)!important}
.neon-dashboard[data-etea-screen]:not([data-etea-screen='welcome']) .neon-nav-links{display:none}
.neon-dashboard[data-etea-screen]:not([data-etea-screen='welcome']) #memberCard{display:none!important}
/* Tablets */
@media (max-width:900px){
 .neon-dashboard .nav .brand{flex:1 1 auto!important}
 .neon-nav-links{display:none}
 .neon-dashboard .hero>.nav{height:69px!important;min-height:69px!important;padding:9px 19px!important}
 .neon-dashboard .hero-story>.hero-showcase{width:min(97%,775px)!important;max-width:775px!important}
 .neon-dashboard .hero-story>.hero-copy{padding-top:9px!important}
 .neon-dashboard .hero-copy h1{font-size:clamp(42px,6vw,56px)!important}
 .neon-dashboard main#mainContent{width:min(calc(100% - 28px),720px)!important;margin:18px auto 0!important}
 .neon-dashboard #memberCard>.grid{grid-template-columns:1fr 1fr!important}
 .neon-rule{padding:11px 6px;gap:6px}.neon-rule small{font-size:9px}
}
/* Phones */
@media (max-width:620px){
 .neon-dashboard .hero>.nav{height:62px!important;min-height:62px!important;padding:8px 11px!important;gap:7px!important}
 .neon-dashboard .nav .logo{width:42px!important;height:42px!important;font-size:11px!important}
 .neon-dashboard .nav .brand{gap:8px!important}
 .neon-dashboard .nav .brand-text strong{font-size:16px!important}
 .neon-dashboard .nav .brand small{font-size:7px!important;letter-spacing:0!important}
 .neon-dashboard .nav .ghost{padding:9px 10px!important;font-size:9px!important;min-height:39px!important}
 .neon-dashboard .hero>.hero-story{padding:11px 6px 0!important;gap:3px!important}
 .neon-dashboard .hero-story>.hero-showcase{width:min(100%,510px)!important;min-width:0!important;padding:4px!important;border-radius:14px!important}
 .neon-dashboard .hero-showcase>.hero-visual{border-radius:9px!important}
 .neon-dashboard .hero-story>.hero-copy{padding:10px 5px 0!important;gap:3px!important}
 .neon-dashboard .hero-copy h1{font-size:clamp(34px,9.8vw,45px)!important;line-height:1.05!important}
 .neon-dashboard .hero-copy p{font-size:12px!important}
 .neon-dashboard .hero-copy #heroStatus{font-size:8px!important;padding:5px 9px!important}
 .neon-dashboard main#mainContent{width:calc(100% - 18px)!important;margin:15px auto 0!important;padding-bottom:22px!important}
 .neon-dashboard #memberCard{padding:18px 16px!important;gap:11px!important;border-radius:21px!important}
 .neon-panel-kicker{font-size:9px;letter-spacing:.12em}
 .neon-dashboard #memberCard h2{font-size:28px!important}
 .neon-dashboard #memberCard>.grid{grid-template-columns:1fr!important;gap:9px!important}
 .neon-dashboard #memberCard .field{height:55px!important;min-height:55px!important;font-size:16px!important}
 .neon-dashboard #memberCard>.grid:before{top:10px}
 .neon-rule-strip{gap:6px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:3px}
 .neon-rule{flex-direction:column;gap:5px;padding:9px 4px;min-height:67px;text-align:center}
 .neon-rule .symbol{width:23px;height:23px;border-radius:7px;font-size:14px}
 .neon-rule strong{font-size:9.5px;white-space:normal}
 .neon-rule small{display:none}
}
@media(max-width:360px){.neon-dashboard .nav .brand small{display:none!important}.neon-dashboard #memberCard{padding:16px 13px!important}.neon-rule strong{font-size:9px}}
@media(prefers-reduced-motion:reduce){.neon-dashboard *, .neon-dashboard *::before,.neon-dashboard *::after{animation:none!important;transition:none!important}}
/* Height-aware final tuning: visible dashboard composition in a regular desktop window. */
@media(min-width:1100px){
 body.neon-dashboard[data-etea-screen='welcome'] .hero-story>.hero-showcase{width:min(92vw,1040px,calc((100svh - 480px)*1.93))!important;max-width:1040px!important;min-width:0!important}
 body.neon-dashboard[data-etea-screen='welcome'] .hero-copy h1{font-size:clamp(43px,3.35vw,54px)!important;line-height:.94!important}
 body.neon-dashboard[data-etea-screen='welcome'] .hero-copy{padding-top:6px!important;gap:2px!important}
 body.neon-dashboard[data-etea-screen='welcome'] main#mainContent{margin-top:10px!important}
 body.neon-dashboard[data-etea-screen='welcome'] #memberCard{padding-block:14px!important;gap:8px!important}
 body.neon-dashboard[data-etea-screen='welcome'] .neon-rule{padding-block:8px!important}
 body.neon-dashboard[data-etea-screen='welcome'] .neon-rule .symbol{height:29px;width:29px}
 body.neon-dashboard[data-etea-screen='welcome'] #memberCard h2{font-size:30px!important}
 body.neon-dashboard[data-etea-screen='welcome'] #memberCard .field{height:53px!important;min-height:53px!important}
}
@media (min-width:1100px) and (min-height:1040px){
 body.neon-dashboard[data-etea-screen='welcome'] .hero-story>.hero-showcase{width:min(92vw,1120px,calc((100svh - 475px)*1.93))!important;max-width:1120px!important}
 body.neon-dashboard[data-etea-screen='welcome'] .hero-copy h1{font-size:clamp(50px,4vw,63px)!important}
 body.neon-dashboard[data-etea-screen='welcome'] #memberCard{padding-block:20px!important;gap:11px!important}
}