/* ECG Lab — visible, stable premium UI v2.
   Loaded AFTER feature runtimes so it can reliably refine injected styles.
   Keeps the ECG Lab palette and never applies visual filters to ECG tracings. */
:root{
  --ui2-surface:rgba(13,28,47,.88);
  --ui2-surface-strong:rgba(15,34,55,.96);
  --ui2-border:rgba(255,255,255,.10);
  --ui2-border-strong:rgba(255,255,255,.15);
  --ui2-shadow-sm:0 7px 20px rgba(0,0,0,.16);
  --ui2-shadow-md:0 16px 40px rgba(0,0,0,.22);
  --ui2-shadow-lg:0 24px 70px rgba(0,0,0,.30);
  --ui2-fast:150ms;
  --ui2-base:240ms;
  --ui2-spring:cubic-bezier(.16,1,.3,1);
  --ui2-ease:cubic-bezier(.2,.8,.2,1);
}

html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body.ui-v2{background-attachment:fixed}

/* ---------- obvious global polish ---------- */
body.ui-v2 .card{
  border:1px solid var(--ui2-border)!important;
  background:linear-gradient(180deg,rgba(18,38,61,.94),rgba(9,24,41,.96))!important;
  box-shadow:var(--ui2-shadow-md)!important;
  border-radius:24px!important;
}
body.ui-v2 .section,body.ui-v2 .stat,body.ui-v2 .module,body.ui-v2 .sim-card{border-radius:24px!important}

body.ui-v2 .btn,body.ui-v2 .chip,body.ui-v2 .answer,
body.ui-v2 .nav button,body.ui-v2 .mobile-nav button,
body.ui-v2 .language-options button,body.ui-v2 .auth-tabs button,
body.ui-v2 .ft2-fab,body.ui-v2 .ft2-head nav button{
  transition:transform var(--ui2-fast) var(--ui2-spring),
             filter var(--ui2-fast) ease,
             background-color var(--ui2-fast) ease,
             border-color var(--ui2-fast) ease,
             box-shadow var(--ui2-fast) ease,
             opacity var(--ui2-fast) ease!important;
  transform:translateZ(0);
}
body.ui-v2 .btn{border-radius:15px!important;min-height:42px}
body.ui-v2 .chip{border-radius:13px!important;min-height:36px}
body.ui-v2 .answer{border-radius:16px!important;min-height:50px}
body.ui-v2 .ui2-pressing,
body.ui-v2 .btn:active,body.ui-v2 .chip:active,body.ui-v2 .answer:active,
body.ui-v2 .nav button:active,body.ui-v2 .mobile-nav button:active,
body.ui-v2 .language-options button:active,body.ui-v2 .ft2-fab:active{
  transform:translateZ(0) scale(.975)!important;
  filter:brightness(.97)!important;
}

body.ui-v2 .btn-primary{
  box-shadow:0 10px 24px rgba(76,224,179,.18),inset 0 1px 0 rgba(255,255,255,.32)!important;
}
body.ui-v2 .btn-secondary,body.ui-v2 .btn-ghost,body.ui-v2 .chip{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}

@media(hover:hover) and (pointer:fine){
  body.ui-v2 .btn:hover,body.ui-v2 .chip:hover{transform:translateY(-1px) translateZ(0)}
  body.ui-v2 .card:not(.ecg-card):not(.question):hover{border-color:var(--ui2-border-strong)!important;box-shadow:0 20px 48px rgba(0,0,0,.25)!important}
}

/* ---------- glass/sticky chrome ---------- */
body.ui-v2 .sidebar{
  background:rgba(5,15,26,.79)!important;
  border-right-color:rgba(255,255,255,.08)!important;
  -webkit-backdrop-filter:saturate(145%) blur(18px);
  backdrop-filter:saturate(145%) blur(18px);
  box-shadow:12px 0 40px rgba(0,0,0,.12)!important;
}
body.ui-v2 .topbar{
  position:sticky!important;top:0!important;z-index:70!important;
  margin:-6px -10px 18px!important;padding:12px 10px!important;
  border:1px solid transparent!important;border-radius:20px!important;
  transition:padding var(--ui2-base) var(--ui2-ease),background-color var(--ui2-base) ease,border-color var(--ui2-base) ease,box-shadow var(--ui2-base) ease!important;
}
body.ui-v2.ui2-scrolled .topbar{
  background:rgba(7,21,36,.82)!important;
  border-color:rgba(255,255,255,.075)!important;
  -webkit-backdrop-filter:saturate(145%) blur(16px);
  backdrop-filter:saturate(145%) blur(16px);
  box-shadow:0 12px 30px rgba(0,0,0,.16)!important;
  padding-top:8px!important;padding-bottom:8px!important;
}
body.ui-v2 .topbar h1{transition:font-size var(--ui2-base) var(--ui2-spring),transform var(--ui2-base) var(--ui2-spring)!important}
body.ui-v2.ui2-scrolled .topbar h1{font-size:23px!important}
body.ui-v2 .topbar p{transition:opacity var(--ui2-fast) ease!important}
body.ui-v2.ui2-scrolled .topbar p{opacity:.72}

/* ---------- desktop navigation ---------- */
body.ui-v2 .nav{gap:7px!important}
body.ui-v2 .nav button{
  position:relative!important;border-radius:16px!important;padding:12px 14px!important;
}
body.ui-v2 .nav button.active{
  background:linear-gradient(90deg,rgba(76,224,179,.14),rgba(110,168,255,.08))!important;
  color:#fff!important;box-shadow:inset 0 0 0 1px rgba(76,224,179,.10)!important;
}
body.ui-v2 .nav button.active:before{
  content:"";position:absolute;left:7px;top:50%;width:4px;height:22px;border-radius:99px;
  background:var(--accent);transform:translateY(-50%);box-shadow:0 0 0 4px rgba(76,224,179,.07);
}
body.ui-v2 .nav button b{display:inline-grid;place-items:center;min-width:22px;transition:transform var(--ui2-base) var(--ui2-spring)!important}
body.ui-v2 .nav button.active b{transform:scale(1.12)}

/* ---------- hero + dashboard depth ---------- */
body.ui-v2 .hero{
  border-radius:28px!important;
  box-shadow:0 26px 70px rgba(0,0,0,.25)!important;
}
body.ui-v2 .stat strong{letter-spacing:-.025em}
body.ui-v2 .list-item{
  background:rgba(255,255,255,.032)!important;border-color:rgba(255,255,255,.075)!important;
  transition:transform var(--ui2-fast) var(--ui2-spring),background-color var(--ui2-fast) ease,border-color var(--ui2-fast) ease!important;
}
body.ui-v2 .list-item:hover{background:rgba(255,255,255,.045)!important}

/* ---------- segmented controls ---------- */
body.ui-v2 .auth-tabs,
body.ui-v2 .perf-periods,
body.ui-v2 .cat-filters,
body.ui-v2 .sim-filters,
body.ui-v2 .sim-home-filters,
body.ui-v2 .sim-history-filters,
body.ui-v2 .sim-period-filters,
body.ui-v2 .review-filters,
body.ui-v2 .cat-review-filters,
body.ui-v2 .sim-review-filters,
body.ui-v2 .ft2-segment{
  padding:4px!important;gap:4px!important;border-radius:15px!important;
  background:rgba(2,12,22,.36)!important;border:1px solid rgba(255,255,255,.08)!important;
}
body.ui-v2 .perf-periods .chip,
body.ui-v2 .cat-filters .chip,
body.ui-v2 .sim-filters .chip,
body.ui-v2 .sim-home-filters .chip,
body.ui-v2 .sim-history-filters .chip,
body.ui-v2 .sim-period-filters .chip,
body.ui-v2 .review-filters .chip,
body.ui-v2 .cat-review-filters .chip,
body.ui-v2 .sim-review-filters .chip{
  border-color:transparent!important;background:transparent!important;box-shadow:none!important;
}
body.ui-v2 .perf-periods .chip.active,
body.ui-v2 .cat-filters .chip.active,
body.ui-v2 .sim-filters .chip.active,
body.ui-v2 .sim-home-filters .chip.active,
body.ui-v2 .sim-history-filters .chip.active,
body.ui-v2 .sim-period-filters .chip.active,
body.ui-v2 .review-filters .chip.active,
body.ui-v2 .cat-review-filters .chip.active,
body.ui-v2 .sim-review-filters .chip.active{
  background:rgba(76,224,179,.11)!important;border-color:rgba(76,224,179,.18)!important;
  box-shadow:0 5px 15px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* ---------- progress + feedback ---------- */
body.ui-v2 .progress,body.ui-v2 .cat-progress,body.ui-v2 .sim-progress,body.ui-v2 .sim-progress-bar,
body.ui-v2 .perf-skill-bar,body.ui-v2 .perf-xp-bar{background:rgba(255,255,255,.065)!important}
body.ui-v2 .progress>i,body.ui-v2 .cat-progress i,body.ui-v2 .sim-progress i,body.ui-v2 .sim-progress-bar i,
body.ui-v2 .perf-skill-bar i,body.ui-v2 .perf-xp-bar i{
  transform-origin:left center;animation:ui2Progress 460ms var(--ui2-spring) both;
}
@keyframes ui2Progress{from{transform:scaleX(.08);opacity:.4}to{transform:scaleX(1);opacity:1}}
body.ui-v2 .answer.correct{animation:ui2Correct 300ms var(--ui2-spring)}
body.ui-v2 .answer.wrong{animation:ui2Wrong 220ms var(--ui2-ease)}
@keyframes ui2Correct{0%{transform:scale(.985)}65%{transform:scale(1.016)}100%{transform:none}}
@keyframes ui2Wrong{0%,100%{transform:translateX(0)}40%{transform:translateX(-2px)}75%{transform:translateX(2px)}}

/* ---------- modals / bottom sheets ---------- */
body.ui-v2 .modal-backdrop,body.ui-v2 .sim-modal-backdrop,body.ui-v2 .cat-modal-backdrop{
  background:rgba(1,7,13,.64)!important;
  -webkit-backdrop-filter:saturate(135%) blur(10px);backdrop-filter:saturate(135%) blur(10px);
  animation:ui2Backdrop 150ms ease both;
}
body.ui-v2 .modal,body.ui-v2 .sim-modal,body.ui-v2 .cat-modal{
  background:rgba(13,29,48,.96)!important;border-color:rgba(255,255,255,.11)!important;
  box-shadow:var(--ui2-shadow-lg)!important;border-radius:24px!important;
  animation:ui2Modal 260ms var(--ui2-spring) both;
}
@keyframes ui2Backdrop{from{opacity:0}to{opacity:1}}
@keyframes ui2Modal{from{opacity:.25;transform:translate3d(0,16px,0) scale(.98)}to{opacity:1;transform:none}}

/* ---------- toasts ---------- */
body.ui-v2 .toast{
  background:rgba(12,31,50,.94)!important;border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:var(--ui2-shadow-md)!important;border-radius:16px!important;
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
}

/* ---------- floating tutor: visual only, no page reflow ---------- */
body.ui-v2 .ft2-panel{
  background:rgba(9,25,42,.97)!important;border-color:rgba(255,255,255,.11)!important;
  box-shadow:0 26px 78px rgba(0,0,0,.36)!important;
}
body.ui-v2 .ft2-fab{
  box-shadow:0 14px 34px rgba(0,0,0,.30),0 0 0 1px rgba(76,224,179,.08)!important;
}

/* ---------- ECG safety zone ---------- */
body.ui-v2 .ecg-wrap img,
body.ui-v2 .sim-ecg-image,
body.ui-v2 .sim-review-ecg img,
body.ui-v2 .case-ecg-image,
body.ui-v2 .cat-review-ecg img{
  filter:none!important;text-shadow:none!important;box-shadow:none!important;
  transition:transform 150ms cubic-bezier(0,.55,.45,1),opacity 140ms ease!important;
}
body.ui-v2 .ecg-wrap,body.ui-v2 .sim-ecg-viewer,body.ui-v2 .sim-ecg-shell,body.ui-v2 .case-ecg-card{
  isolation:isolate;contain:layout paint;
}

/* ---------- mobile: clearly visible floating bottom nav + bottom sheets ---------- */
@media(max-width:720px){
  body.ui-v2 .main{padding-bottom:104px!important}
  body.ui-v2 .mobile-nav{
    display:flex!important;position:fixed!important;
    left:10px!important;right:10px!important;bottom:max(10px,env(safe-area-inset-bottom))!important;
    width:auto!important;height:auto!important;min-height:64px!important;
    padding:7px 8px!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:22px!important;
    background:rgba(7,20,35,.88)!important;
    -webkit-backdrop-filter:saturate(155%) blur(18px);backdrop-filter:saturate(155%) blur(18px);
    box-shadow:0 18px 42px rgba(0,0,0,.34)!important;overflow-x:auto!important;gap:3px!important;
    z-index:95!important;
  }
  body.ui-v2 .mobile-nav button{
    min-width:62px!important;min-height:50px!important;border-radius:16px!important;
    padding:6px 7px!important;position:relative!important;
  }
  body.ui-v2 .mobile-nav button.active{
    background:rgba(76,224,179,.105)!important;color:#fff!important;
    box-shadow:inset 0 0 0 1px rgba(76,224,179,.10)!important;
  }
  body.ui-v2 .mobile-nav button.active:before{
    content:"";position:absolute;left:34%;right:34%;top:3px;height:3px;border-radius:99px;background:var(--accent);
  }
  body.ui-v2 .mobile-nav button.active{animation:ui2Tab 250ms var(--ui2-spring)}
  @keyframes ui2Tab{0%{transform:scale(.96)}70%{transform:scale(1.035)}100%{transform:none}}

  body.ui-v2 .topbar{top:6px!important;border-radius:18px!important}
  body.ui-v2.ui2-scrolled .topbar{background:rgba(7,21,36,.88)!important}

  body.ui-v2 .modal-backdrop,body.ui-v2 .sim-modal-backdrop,body.ui-v2 .cat-modal-backdrop{
    place-items:end center!important;padding:0!important;
  }
  body.ui-v2 .modal,body.ui-v2 .sim-modal,body.ui-v2 .cat-modal{
    width:100%!important;max-width:none!important;border-radius:28px 28px 0 0!important;
    border-left:0!important;border-right:0!important;border-bottom:0!important;
    padding:30px 18px max(20px,env(safe-area-inset-bottom))!important;
    animation:ui2Sheet 320ms var(--ui2-spring) both!important;
    position:relative!important;
  }
  body.ui-v2 .modal:before,body.ui-v2 .sim-modal:before,body.ui-v2 .cat-modal:before{
    content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:42px;height:4px;border-radius:99px;background:rgba(255,255,255,.20);
  }
  @keyframes ui2Sheet{from{opacity:.35;transform:translate3d(0,36px,0)}to{opacity:1;transform:none}}

  body.ui-v2 .toast{left:12px!important;right:12px!important;bottom:92px!important;text-align:center!important}
  body.ui-v2 .ft2-fab{bottom:96px!important}
}

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