/* FormMetrics Sports theme: neon-cyan HUD on deep navy + smooth motion.
   Loaded after styles.css, so it overrides variables and adds effects. */
:root{
  --bg:#02050d; --panel:rgba(7,16,36,.62); --panel2:rgba(18,38,78,.5);
  --line:rgba(0,240,255,.14); --text:#eaf8ff; --muted:#7f98b5;
  --cyan:#00f0ff; --blue:#2f7bff; --emerald:#34d399;
  --radius:14px; --ease:cubic-bezier(.22,1,.36,1);
  --glow:0 0 28px rgba(0,240,255,.16);
}
::selection{background:rgba(0,240,255,.3)}
*{scrollbar-width:thin;scrollbar-color:rgba(0,240,255,.35) transparent}
body{
  font-family:'Montserrat',Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:#02050d;
}
#app{position:relative;z-index:1}

/* ---------- animated background ---------- */
.bg{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(900px 600px at 78% 8%,rgba(0,110,255,.18),transparent 62%),
    radial-gradient(700px 500px at 6% 100%,rgba(0,240,255,.08),transparent 60%),
    linear-gradient(180deg,#02040b 0%,#040a1b 55%,#050e24 100%);
}
.bg .floor{
  position:absolute;left:-60%;right:-60%;bottom:-8%;height:62%;
  transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(0,240,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.2) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to top,#000 8%,transparent 85%);mask-image:linear-gradient(to top,#000 8%,transparent 85%);
  animation:floor 7s linear infinite;
}
.bg .hud{
  position:absolute;right:-9vw;top:-12vh;width:min(62vw,760px);aspect-ratio:1;opacity:.5;
  filter:drop-shadow(0 0 10px rgba(0,240,255,.45));animation:hudFloat 14s ease-in-out infinite;
}
.bg .hud svg{width:100%;height:100%;fill:none;stroke:var(--cyan)}
.bg .hud circle{transform-box:fill-box;transform-origin:center}
.bg .hud .r{animation:spin 60s linear infinite}
.bg .hud .r.rev{animation-direction:reverse}
.bg .hud circle:nth-child(1){animation-duration:140s}
.bg .hud circle:nth-child(2){animation-duration:48s}
.bg .hud circle:nth-child(4){animation-duration:36s}
.bg .hud circle:nth-child(5){animation-duration:70s}
.bg .hud circle:nth-child(6){animation-duration:28s}
@keyframes floor{to{background-position:0 56px}}
@keyframes hudFloat{50%{transform:translate(-12px,14px) rotate(2deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- keyframes ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{to{opacity:0}}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes modalOut{to{opacity:0;transform:translateY(12px) scale(.97)}}
@keyframes gaugeIn{from{stroke-dasharray:0 var(--c)}}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- page transitions ---------- */
.shell{animation:fade .7s ease both}
#view{transition:opacity .18s ease,transform .18s ease}
#view.leaving{opacity:0;transform:translateY(8px)}
#view.enter>*{animation:rise .75s var(--ease) both}
#view.enter>*:nth-child(2){animation-delay:.06s}
#view.enter>*:nth-child(3){animation-delay:.12s}
#view.enter>*:nth-child(4){animation-delay:.18s}
#view.enter>*:nth-child(5){animation-delay:.24s}
#view.enter>*:nth-child(n+6){animation-delay:.3s}
#view.enter>.grid{animation:none}
#view.enter .cards-4>*,#view.enter .two>*{animation:rise .75s var(--ease) both}
#view.enter .cards-4>*:nth-child(1){animation-delay:.1s}
#view.enter .cards-4>*:nth-child(2){animation-delay:.18s}
#view.enter .cards-4>*:nth-child(3){animation-delay:.26s}
#view.enter .cards-4>*:nth-child(4){animation-delay:.34s}
#view.enter .two>*:nth-child(1){animation-delay:.12s}
#view.enter .two>*:nth-child(2){animation-delay:.22s}
.auth-card{animation:rise .95s var(--ease) both}
.stage{animation:fade .6s var(--ease) both}
.coach.swap .coach-body{animation:fade .35s var(--ease) both}
.msgs .msg:last-child{animation:rise .45s var(--ease) both}

/* ---------- brand ---------- */
.brand{gap:12px}
.logo-mark{width:32px;height:32px;flex:none;fill:none;stroke:var(--cyan);filter:drop-shadow(0 0 6px rgba(0,240,255,.8))}
.logo-mark circle{transform-box:fill-box;transform-origin:center}
.logo-mark .m1{stroke-width:2.2;stroke-dasharray:22 6 10 6;animation:spin 14s linear infinite}
.logo-mark .m2{stroke-width:3.2;stroke-dasharray:30 8;animation:spin 9s linear infinite reverse}
.logo-mark .m3{fill:var(--cyan);stroke:none}
.wordmark{display:inline-flex;flex-direction:column;line-height:1}
.wordmark .wm{font-weight:800;letter-spacing:-.02em;color:var(--cyan);text-shadow:0 0 18px rgba(0,240,255,.45)}
.wordmark .wm b{color:var(--text);font-weight:800}
.wordmark small{margin-top:4px;font-size:9px;letter-spacing:.42em;color:var(--muted);font-weight:700}
.brand.big{gap:14px}
.brand.big .wm{font-size:30px}
.lbl{transition:opacity .25s ease,transform .4s var(--ease),width .4s var(--ease)}

/* ---------- headings ---------- */
.page-head h2{
  font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  color:var(--cyan);text-shadow:0 0 28px rgba(0,240,255,.35);
}
.page-head::before{
  content:"";display:block;width:148px;height:8px;margin-bottom:14px;
  background:
    repeating-linear-gradient(115deg,var(--cyan) 0 4px,transparent 4px 8px) 0 0/44px 8px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 44px 3.5px/92px 1px no-repeat,
    radial-gradient(circle,var(--cyan) 0 2.4px,transparent 3px) 138px 0/8px 8px no-repeat;
  filter:drop-shadow(0 0 6px rgba(0,240,255,.7));
}
.topbar{background:rgba(2,6,16,.72);border-bottom:1px solid var(--line)}
.topbar h1{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);font-weight:700}

/* ---------- surfaces ---------- */
.card,.glass{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease);
}
.card::before,.card::after,.glass::before,.glass::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;border:2px solid var(--cyan);opacity:.85;
  transition:width .4s var(--ease),height .4s var(--ease),opacity .4s;
}
.card::before,.glass::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:var(--radius)}
.card::after,.glass::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:var(--radius)}
.card:hover{border-color:rgba(0,240,255,.3);box-shadow:var(--glow)}
.card:hover::before,.card:hover::after{width:26px;height:26px}
.card h3{color:var(--cyan);opacity:.85;font-weight:700}
.modal{background:rgba(4,10,24,.94)}
.modal::before,.modal::after{display:none}
.modal-backdrop{animation:fade .3s var(--ease) both}
.modal{animation:modalIn .5s var(--ease) both}
.modal-backdrop.out{animation:fadeOut .2s ease forwards;pointer-events:none}
.modal-backdrop.out .modal{animation:modalOut .2s ease forwards}
.stage{border-color:rgba(0,240,255,.25);box-shadow:0 0 40px rgba(0,240,255,.07)}

/* ---------- sidebar ---------- */
.sidebar{
  background:linear-gradient(180deg,rgba(3,8,20,.88),rgba(3,8,20,.72));border-right:1px solid var(--line);
  transition:width .45s var(--ease),transform .4s var(--ease);
}
.nav{transition:background .3s var(--ease),color .3s,border-color .3s,transform .3s var(--ease),box-shadow .3s}
.nav:hover{transform:translateX(3px)}
.nav.on{
  background:linear-gradient(90deg,rgba(0,240,255,.18),rgba(0,240,255,.03));
  border-color:rgba(0,240,255,.4);color:#d8fcff;box-shadow:0 0 22px rgba(0,240,255,.12);
}
.collapsed .lbl{display:inline;opacity:0;width:0;overflow:hidden;transform:translateX(-8px);pointer-events:none}
.collapsed .collapse-btn .ic{transform:rotate(180deg)}
.collapse-btn .ic{transition:transform .45s var(--ease)}

/* ---------- controls ---------- */
.btn,.icon-btn,.chip,.pill,.ts{
  transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .35s,filter .3s,color .3s;
}
.btn{border-color:rgba(0,240,255,.18)}
.btn:hover,.icon-btn:hover{transform:translateY(-1px);border-color:rgba(0,240,255,.45);box-shadow:0 6px 22px rgba(0,240,255,.12)}
.btn:active,.icon-btn:active{transform:translateY(0) scale(.97)}
.btn.primary,.icon-btn.lg{background:linear-gradient(135deg,#00f0ff,#2fa8ff);color:#00121a;border:0;box-shadow:0 0 22px rgba(0,240,255,.28)}
.btn.primary:hover,.icon-btn.lg:hover{box-shadow:0 8px 32px rgba(0,240,255,.45);filter:brightness(1.06)}
.avatar{background:linear-gradient(135deg,#00f0ff,#2f7bff)}
.chip:hover,.pill:hover{transform:translateY(-1px)}
.chip.on,.pill.on{background:rgba(0,240,255,.14);border-color:var(--cyan);color:#cffcff;box-shadow:0 0 16px rgba(0,240,255,.2)}
.input,.select{transition:border-color .3s,box-shadow .3s,background .3s}
.input:focus,.select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,240,255,.14)}
.seg button{transition:background .3s var(--ease),color .3s}
.seg button.on{background:rgba(0,240,255,.14);color:#d8fcff}
.step,.step i{transition:all .4s var(--ease)}
.step.on{box-shadow:0 0 18px rgba(0,240,255,.18)}
.item,.clip,.drill,.ev{
  transition:transform .35s var(--ease),border-color .3s,background .3s,box-shadow .35s;
}
.item:hover,.clip:hover,.drill:hover,.ev:hover{border-color:rgba(0,240,255,.35);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.sport{transition:border-color .3s,background .3s}
.progress div{background:linear-gradient(90deg,#00f0ff,#2f7bff);box-shadow:0 0 12px rgba(0,240,255,.6);transition:width .18s linear}
.badge-lock{border-color:rgba(0,240,255,.28);background:rgba(0,240,255,.06);color:#9ff6ff}
.intro-card{background:linear-gradient(135deg,rgba(0,40,70,.9),rgba(6,20,48,.9));border-color:rgba(0,240,255,.4)}
.intro-card .nm{color:var(--cyan);text-shadow:0 0 18px rgba(0,240,255,.4)}
.intro-card .wm{margin-top:8px;font-size:10px;letter-spacing:.32em;color:var(--cyan);opacity:.8;font-weight:700}

/* ---------- data visuals ---------- */
.g-fg{
  stroke:var(--cyan);stroke-dasharray:var(--d) var(--c);filter:drop-shadow(0 0 6px rgba(0,240,255,.7));
  animation:gaugeIn 1.4s var(--ease) .2s both;
}
.g-t{fill:var(--cyan)}
.spark polyline{
  stroke-dasharray:600;stroke-dashoffset:600;filter:drop-shadow(0 0 4px rgba(0,240,255,.7));
  animation:draw 1.5s var(--ease) .3s forwards;
}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .collapsed .lbl{opacity:1;width:auto;transform:none;pointer-events:auto;overflow:visible}
  .bg .hud{width:120vw;right:-52vw;top:-6vh;opacity:.3}
  .card::before,.card::after{width:12px;height:12px}
}
@media (prefers-reduced-motion:reduce){
  .bg .floor,.bg .hud,.bg .hud circle,.logo-mark circle{animation:none!important}
  .spark polyline{stroke-dashoffset:0}
}

/* ---------- cloud sync pill ---------- */
.sync{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.sync::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);transition:background .3s,box-shadow .3s}
.sync.saving::before{background:var(--amber);box-shadow:0 0 10px var(--amber);animation:pulse 1s ease-in-out infinite}
.sync.offline::before{background:var(--red);box-shadow:0 0 10px var(--red)}
@media (max-width:860px){.sync{font-size:0;gap:0}.sync::before{width:10px;height:10px}}