/* ═════════════════════════════════════════════════════════════════════
   UNPChain Premium Theme — v6.1 (Conservative)
   Pure-CSS overlay; no JS/DOM-ID changes. Drop-in after the base styles.
   Rule of thumb: never apply text-clip / transparent fill to elements that
   hold dynamic data — only to standalone display headings and the logo.
   ═════════════════════════════════════════════════════════════════════ */

:root{
  --premium-grad-1:#6366f1;
  --premium-grad-2:#a855f7;
  --premium-grad-3:#ec4899;
  --premium-grad-4:#22d3ee;
  --premium-glow:0 0 32px rgba(99,102,241,.45),0 0 64px rgba(168,85,247,.25);
  --premium-glow-soft:0 0 24px rgba(99,102,241,.18);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}

/* ═════════ ANIMATED BACKGROUND ═════════ */
body{
  position:relative;
  background:
    radial-gradient(1100px 600px at 18% -10%, rgba(99,102,241,.16), transparent 50%),
    radial-gradient(900px 500px at 82% 110%, rgba(168,85,247,.14), transparent 55%),
    radial-gradient(700px 400px at 50% 50%, rgba(34,211,238,.05), transparent 60%),
    var(--bg) !important;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(99,102,241,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
  animation:gridDrift 60s linear infinite;
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(99,102,241,.5), transparent 50%),
    radial-gradient(1.5px 1.5px at 78% 32%, rgba(168,85,247,.45), transparent 50%),
    radial-gradient(1.5px 1.5px at 35% 72%, rgba(34,211,238,.45), transparent 50%),
    radial-gradient(2px 2px at 88% 81%, rgba(236,72,153,.4), transparent 50%),
    radial-gradient(1.5px 1.5px at 55% 11%, rgba(99,102,241,.4), transparent 50%),
    radial-gradient(2px 2px at 22% 88%, rgba(168,85,247,.4), transparent 50%);
  animation:particleDrift 30s ease-in-out infinite alternate;
  filter:blur(.6px);
}
@keyframes gridDrift{from{background-position:0 0,0 0}to{background-position:48px 48px,48px 48px}}
@keyframes particleDrift{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(24px,-32px,0) scale(1.04)}
  100%{transform:translate3d(-18px,28px,0) scale(.98)}
}

/* ═════════ HEADER POLISH ═════════ */
#app-header{
  background:linear-gradient(180deg,rgba(8,12,20,.94),rgba(8,12,20,.86)) !important;
  box-shadow:0 1px 0 rgba(99,102,241,.15),0 8px 32px rgba(0,0,0,.4) !important;
  border-bottom:1px solid rgba(99,102,241,.18) !important;
}
.logo{
  font-weight:900 !important;letter-spacing:-1px !important;
  background:linear-gradient(120deg,#6366f1 0%,#a855f7 35%,#ec4899 70%,#22d3ee 100%) !important;
  background-size:200% 200% !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;
  animation:gradientShift 8s ease infinite;
}
@keyframes gradientShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* ═════════ CARDS — subtle gradient border, no destructive overrides ═════════ */
.card{
  position:relative;
  background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%) !important;
  border:1px solid var(--border) !important;
  box-shadow:0 4px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04) !important;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s !important;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(99,102,241,.4) !important;
  box-shadow:0 10px 40px rgba(99,102,241,.15),inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* ═════════ STAT CARDS — bigger, glow, lift on hover, NO text-clip ═════════ */
.stat-card{
  position:relative;
  background:linear-gradient(135deg,rgba(99,102,241,.08) 0%,rgba(168,85,247,.04) 100%) !important;
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s !important;
  overflow:hidden;
}
.stat-card::before{
  content:'';position:absolute;top:-30%;right:-20%;width:160px;height:160px;
  background:radial-gradient(circle,rgba(99,102,241,.15),transparent 65%);
  border-radius:50%;pointer-events:none;
  animation:tileBlob 14s ease-in-out infinite;
  z-index:0;
}
.stat-card>*{position:relative;z-index:1}
.stat-card:hover{
  transform:translateY(-3px);
  border-color:rgba(99,102,241,.5) !important;
  box-shadow:0 12px 32px rgba(99,102,241,.15),inset 0 1px 0 rgba(255,255,255,.08) !important;
}
@keyframes tileBlob{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-12px,10px) scale(1.15)}
}
/* Stat label gets letter-spacing + tone */
.stat-label{
  text-transform:uppercase;letter-spacing:.6px;font-size:.72rem !important;
  color:var(--text3) !important;font-weight:600 !important;
}
/* Stat values stay solid, with accent color pop — DO NOT clip text */
.stat-value{
  font-size:1.55rem !important;font-weight:800 !important;
  color:#fff !important;
  text-shadow:0 0 18px rgba(99,102,241,.25);
}
.stat-value.accent{color:#a5b4fc !important;text-shadow:0 0 18px rgba(99,102,241,.4) !important}
.stat-value.green{color:#86efac !important;text-shadow:0 0 18px rgba(34,197,94,.35) !important}
.stat-value.yellow{color:#fde047 !important;text-shadow:0 0 18px rgba(234,179,8,.35) !important}

/* ═════════ BUTTONS WITH SHIMMER ═════════ */
.btn{
  position:relative !important;overflow:hidden;
  font-weight:600 !important;letter-spacing:.2px;
  transition:transform .2s var(--ease-out),box-shadow .25s,background .25s !important;
}
.btn::after{
  content:'';position:absolute;top:0;left:-150%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-20deg);transition:left .65s var(--ease-out);pointer-events:none;
}
.btn:hover{transform:translateY(-1px)}
.btn:hover::after{left:150%}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%) !important;
  border-color:transparent !important;
  box-shadow:0 4px 16px rgba(99,102,241,.35),inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn-primary:hover{box-shadow:0 8px 28px rgba(99,102,241,.55),inset 0 1px 0 rgba(255,255,255,.25) !important}
.btn-success{
  background:linear-gradient(135deg,#10b981 0%,#22c55e 100%) !important;
  box-shadow:0 4px 16px rgba(34,197,94,.35),inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn-danger{
  background:linear-gradient(135deg,#ef4444 0%,#f97316 100%) !important;
  box-shadow:0 4px 16px rgba(239,68,68,.35),inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn-outline{
  background:rgba(99,102,241,.06) !important;backdrop-filter:blur(8px);
  border:1px solid var(--border2) !important;
}
.btn-outline:hover{
  background:rgba(99,102,241,.12) !important;border-color:var(--accent2) !important;
  box-shadow:0 0 0 4px rgba(99,102,241,.08);
}

/* ═════════ PROGRESS / STEP CIRCLES ═════════ */
.prog-circle.active{
  background:radial-gradient(circle at 30% 30%,#a855f7,#6366f1 70%) !important;
  border-color:transparent !important;
  box-shadow:0 0 0 4px rgba(99,102,241,.18),0 0 24px rgba(99,102,241,.55) !important;
  animation:pulseRing 2.4s ease-in-out infinite;
}
.prog-circle.done{
  background:radial-gradient(circle at 30% 30%,#34d399,#10b981 70%) !important;
  box-shadow:0 0 18px rgba(16,185,129,.45) !important;
  border-color:transparent !important;
}
@keyframes pulseRing{
  0%,100%{box-shadow:0 0 0 4px rgba(99,102,241,.18),0 0 24px rgba(99,102,241,.55)}
  50%{box-shadow:0 0 0 8px rgba(99,102,241,.1),0 0 36px rgba(99,102,241,.75)}
}
.prog-line.active,.prog-line.done{
  background:linear-gradient(90deg,#6366f1,#a855f7) !important;
  box-shadow:0 0 12px rgba(99,102,241,.4);
}

/* ═════════ TABS — sliding underline ═════════ */
.nav-btn{
  position:relative !important;
  transition:color .25s,background .25s !important;
}
.nav-btn::after{
  content:'';position:absolute;left:50%;bottom:-1px;width:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:3px;
  transition:width .3s var(--ease-out);
  transform:translateX(-50%);
  box-shadow:0 0 12px rgba(99,102,241,.5);
}
.nav-btn:hover::after{width:55%}
.nav-btn.active::after{width:80%}
.nav-btn.active{
  color:#fff !important;
  background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(168,85,247,.1)) !important;
  box-shadow:inset 0 0 0 1px rgba(99,102,241,.35) !important;
}

/* ═════════ BADGES — solid colors, no text-clip ═════════ */
.badge,.header-badge{
  font-weight:600 !important;letter-spacing:.3px;
}
/* Add a subtle pulse only to elements explicitly marked "live" or "Live" badge text */
.header-badge{
  position:relative;
  background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(34,197,94,.06)) !important;
  border:1px solid rgba(34,197,94,.4) !important;
  color:#86efac !important;
}
.header-badge::before{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#22c55e;margin-right:6px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(34,197,94,.7);
  animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}
  70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* ═════════ TABLES — preserve readability ═════════ */
table th{
  background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(168,85,247,.05)) !important;
  font-weight:700 !important;letter-spacing:.5px;font-size:.78rem;text-transform:uppercase;
  color:var(--text2) !important;
}
table tbody tr{transition:background .2s}
table tbody tr:hover{
  background:rgba(99,102,241,.05) !important;
}

/* ═════════ INPUTS — focus ring ═════════ */
.form-input,input[type="text"],input[type="number"],input[type="password"],
input[type="email"],textarea,select{
  background:rgba(255,255,255,.025) !important;
  border:1px solid var(--border) !important;
  transition:border-color .25s,box-shadow .25s,background .25s !important;
}
.form-input:focus,input:focus,textarea:focus,select:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 4px rgba(99,102,241,.15),0 0 16px rgba(99,102,241,.15) !important;
  background:rgba(99,102,241,.04) !important;
  outline:none !important;
}

/* ═════════ TOAST ═════════ */
.toast,.toast-msg{
  background:linear-gradient(135deg,var(--bg3),var(--bg2)) !important;
  border:1px solid var(--border2) !important;
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(99,102,241,.2);
  backdrop-filter:blur(16px);
  animation:toastSlideIn .4s var(--ease-out);
}
@keyframes toastSlideIn{
  from{transform:translateX(120%) scale(.95);opacity:0}
  to{transform:translateX(0) scale(1);opacity:1}
}

/* ═════════ SPINNER & PROGRESS BAR — careful: only style fm-progress containers ═════════ */
.fm-spinner{
  border:3px solid rgba(99,102,241,.15) !important;
  border-top-color:var(--accent) !important;
  border-right-color:var(--accent2) !important;
  filter:drop-shadow(0 0 8px rgba(99,102,241,.45));
}
.fm-progress{background:rgba(99,102,241,.08) !important;border-radius:99px;overflow:hidden;position:relative}
.fm-progress-fill{
  background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899,#22d3ee) !important;
  background-size:200% 100% !important;
  animation:fillShine 3s linear infinite;
  box-shadow:0 0 18px rgba(99,102,241,.45);
}
@keyframes fillShine{from{background-position:0% 0}to{background-position:200% 0}}

/* ═════════ SECTION ENTRANCE ═════════ */
section.step.active{animation:sectionEnter .5s var(--ease-out)}
@keyframes sectionEnter{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ═════════ HEADER STATUS LIGHT ═════════ */
#header-status{font-weight:700 !important;position:relative}

/* ═════════ FLOATING DECO SVGs (registered via index.html) ═════════ */
.premium-deco{position:fixed;pointer-events:none;z-index:0;opacity:.45}
.premium-deco svg{filter:drop-shadow(0 0 8px rgba(99,102,241,.5))}
@keyframes float1{
  0%,100%{transform:translate(0,0) rotate(0deg);opacity:.35}
  50%{transform:translate(28px,-36px) rotate(180deg);opacity:.55}
}
@keyframes float2{
  0%,100%{transform:translate(0,0) rotate(0deg);opacity:.3}
  50%{transform:translate(-22px,28px) rotate(-180deg);opacity:.5}
}

/* ═════════ ACCESSIBILITY ═════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01s !important;
    animation-iteration-count:1 !important;
    transition-duration:.01s !important;
  }
}