/* ═══════════════════════════════════════════════════════════════
   Cryptonic — User-side Premium FX Layer
   Loaded AFTER ui.css / dashboard.css. Purely additive.
   Covers: auth pages (login/register/etc) + user dashboard.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ux-a:  #16A34A;
  --ux-b:  #4ADE80;
  --ux-c:  #0EA5E9;
  --ux-ease: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: reduce){
  .ux-aurora,.ux-aurora span,.ux-orb,.auth-logo-text,
  .sc::after,.dl-btn::before,.btn-primary::before{
    animation:none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PART 1 — AUTH PAGES (login, register, forgot, reset, verify)
   ═══════════════════════════════════════════════════════════ */

/* Aurora blobs behind the auth card */
.ux-aurora{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden; filter:blur(85px); opacity:.55;
}
.ux-aurora span{
  position:absolute; display:block; border-radius:50%;
  mix-blend-mode:screen;
}
.ux-aurora span:nth-child(1){
  width:44vw; height:44vw; left:-10vw; top:-12vw;
  background:radial-gradient(circle,rgba(22,163,74,.5),transparent 68%);
  animation:uxAuroraA 28s ease-in-out infinite;
}
.ux-aurora span:nth-child(2){
  width:36vw; height:36vw; right:-8vw; top:16vh;
  background:radial-gradient(circle,rgba(74,222,128,.34),transparent 68%);
  animation:uxAuroraB 34s ease-in-out infinite;
}
.ux-aurora span:nth-child(3){
  width:42vw; height:42vw; left:26vw; bottom:-18vw;
  background:radial-gradient(circle,rgba(14,165,233,.2),transparent 68%);
  animation:uxAuroraC 40s ease-in-out infinite;
}
@keyframes uxAuroraA{
  0%,100%{transform:translate(0,0) scale(1);}
  33%    {transform:translate(12vw,8vh) scale(1.16);}
  66%    {transform:translate(-6vw,15vh) scale(.92);}
}
@keyframes uxAuroraB{
  0%,100%{transform:translate(0,0) scale(1);}
  50%    {transform:translate(-14vw,12vh) scale(1.2);}
}
@keyframes uxAuroraC{
  0%,100%{transform:translate(0,0) scale(1);}
  40%    {transform:translate(9vw,-11vh) scale(1.14);}
  75%    {transform:translate(-11vw,-4vh) scale(.9);}
}

/* Film grain */
.ux-noise{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.028; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Floating orbs */
.ux-orbs{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
.ux-orb{
  position:absolute; border-radius:50%;
  border:1px solid rgba(22,163,74,.15);
  background:radial-gradient(circle at 30% 30%,rgba(22,163,74,.09),transparent 70%);
}
.ux-orb.b1{width:110px;height:110px; left:9%;  top:20%;  animation:uxOrbFloat 15s ease-in-out infinite;}
.ux-orb.b2{width:58px; height:58px;  right:13%;top:28%;  animation:uxOrbFloat 12s ease-in-out infinite reverse;}
.ux-orb.b3{width:150px;height:150px; right:7%; bottom:16%;animation:uxOrbFloat 19s ease-in-out infinite;}
.ux-orb.b4{width:40px; height:40px;  left:17%; bottom:24%;animation:uxOrbFloat 10s ease-in-out infinite reverse;}
@keyframes uxOrbFloat{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%    {transform:translate(16px,-24px) rotate(180deg);}
}

/* Auth card — glass + depth upgrade */
.auth-card, .auth-box-inner{
  background:rgba(10,10,10,.72) !important;
  backdrop-filter:blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.3) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.6),
    0 0 0 1px rgba(74,222,128,.1),
    0 0 60px rgba(22,163,74,.08);
}
.auth-card:hover, .auth-box-inner:hover{
  box-shadow:
    0 34px 84px rgba(0,0,0,.66),
    0 0 0 1px rgba(74,222,128,.2),
    0 0 74px rgba(22,163,74,.14);
}

/* Animated gradient wordmark */
.auth-logo-text{
  background:linear-gradient(100deg,#fff 0%,#fff 36%,var(--ux-b) 52%,var(--ux-a) 68%,#fff 88%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:uxWordmark 7s ease-in-out infinite;
}
@keyframes uxWordmark{
  0%,100%{background-position:0% 50%;}
  50%    {background-position:100% 50%;}
}

/* Auth submit — shine sweep + lift */
.auth-submit{
  position:relative; overflow:hidden; isolation:isolate;
  transition:background .18s, box-shadow .25s, transform .25s var(--ux-ease);
}
.auth-submit::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-130%);
  transition:transform .6s ease;
}
.auth-submit:hover::after{transform:translateX(130%);}
.auth-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(22,163,74,.4), 0 0 26px rgba(74,222,128,.3);
}
.auth-submit:active{transform:translateY(0) scale(.985);}

/* Inputs — focus glow ring */
.auth-form .field input,
.field input, .field textarea{
  transition:border-color .2s, box-shadow .25s, background .2s;
}
.auth-form .field input:focus{
  box-shadow:0 0 0 3px rgba(22,163,74,.12), 0 0 22px rgba(22,163,74,.18);
}

/* Tabs — smooth underline */
.auth-tab{position:relative;}
.auth-tab::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--ux-a),var(--ux-b));
  transform:scaleX(0); transform-origin:center;
  transition:transform .3s var(--ux-ease);
}
.auth-tab.active::after{transform:scaleX(1);}

/* ═══════════════════════════════════════════════════════════
   PART 2 — DASHBOARD
   ═══════════════════════════════════════════════════════════ */

/* Sidebar — subtle glass + animated edge */
.sidebar{
  background:rgba(10,10,10,.9) !important;
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  position:sticky;
}
.sidebar::after{
  content:''; position:absolute; top:0; right:0; bottom:0; width:1px;
  background:linear-gradient(180deg,
    transparent 0%, rgba(22,163,74,.5) 22%,
    rgba(74,222,128,.4) 64%, transparent 100%);
  animation:uxEdgePulse 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes uxEdgePulse{0%,100%{opacity:.45;}50%{opacity:1;}}

/* Brand wordmark gradient */
.nav-brand{
  background:linear-gradient(120deg,#fff,var(--ux-b));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nav-brand span{-webkit-text-fill-color:var(--ux-a);}

/* Sidebar items — glide + glow dot */
.sb-item{
  transition:color .18s, background .18s, padding-left .22s var(--ux-ease);
  position:relative;
}
.sb-item.active .nav-dot{
  box-shadow:0 0 8px currentColor;
}

/* Topbar — glass */
.u-topbar{
  background:rgba(10,10,10,.78) !important;
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  transition:box-shadow .3s, border-color .3s;
}
.u-topbar.ux-scrolled{
  box-shadow:0 10px 34px rgba(0,0,0,.45);
  border-bottom-color:rgba(22,163,74,.3);
}

/* Cards — lift, glow rim, spotlight */
.card, .sc{ --mx:50%; --my:50%; }
.card{
  position:relative;
  transition:transform .3s var(--ux-ease), box-shadow .3s, border-color .3s;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(22,163,74,.3);
  box-shadow:0 18px 44px rgba(0,0,0,.45),
             0 0 0 1px rgba(74,222,128,.14),
             0 0 34px rgba(22,163,74,.1);
}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(22,163,74,.55),transparent);
  opacity:0; transition:opacity .3s; pointer-events:none; z-index:2;
}
.card:hover::before{opacity:1;}

/* Stat cards — individual hover, count glow, top accent */
.sc{
  position:relative; overflow:hidden;
  transition:background .28s, transform .28s var(--ux-ease);
}
.sc::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(280px circle at var(--mx) var(--my),
             rgba(74,222,128,.1), transparent 62%);
  opacity:0; transition:opacity .32s;
}
.sc:hover::after{opacity:1;}
.sc:hover{background:rgba(22,163,74,.045);}
.sc-val{transition:text-shadow .3s;}
.sc:hover .sc-val{text-shadow:0 0 24px rgba(74,222,128,.45);}

/* Buttons — shine sweep */
.btn-primary, .btn-green, .dl-btn{
  position:relative; overflow:hidden; isolation:isolate;
  transition:background .18s, box-shadow .25s, transform .25s var(--ux-ease);
}
.btn-primary::before, .btn-green::before, .dl-btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  transform:translateX(-130%);
  transition:transform .6s ease;
}
.btn-primary:hover::before, .btn-green:hover::before, .dl-btn:hover::before{
  transform:translateX(130%);
}
.dl-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(22,163,74,.4), 0 0 28px rgba(74,222,128,.28);
}

/* Info rows — hover highlight */
.info-row{transition:background .18s;}
.info-row:hover{background:rgba(22,163,74,.035);}

/* Progress bars — gradient + sheen */
.pbar-fill, .prog-fill{
  background:linear-gradient(90deg,var(--ux-a),var(--ux-b)) !important;
  box-shadow:0 0 12px rgba(22,163,74,.45);
}

/* Badges — subtle ring */
.badge{transition:box-shadow .2s, transform .2s;}
.badge-green:hover { box-shadow:0 0 12px rgba(34,197,94,.3); }
.badge-accent:hover{ box-shadow:0 0 12px rgba(22,163,74,.3); }

/* Panel entrance already exists in ui.css — enrich the easing */
.panel.active{animation:uxPanelIn .42s var(--ux-ease) both;}
@keyframes uxPanelIn{
  from{opacity:0; transform:translateY(14px) scale(.995);}
  to  {opacity:1; transform:none;}
}

/* Content area sits above aurora */
.u-shell{position:relative; z-index:1;}

/* ═══ RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width:768px){
  .ux-aurora{filter:blur(58px); opacity:.4;}
  .ux-orbs{display:none;}
}

/* ═══════════════════════════════════════════════════════════
   PART 3 — AUTH CARD SHAPE FIX
   ui.css uses clip-path for cut corners, but clip-path also
   clips box-shadow/glow — making the card look flat & chopped.
   Restore rounded corners + draw corner brackets instead.
   ═══════════════════════════════════════════════════════════ */
.auth-card, .auth-box-inner{
  clip-path:none !important;
  border-radius:16px !important;
}

/* Corner accent brackets (pure decoration, no clipping) */
.auth-card{position:relative;}
.auth-card .ux-corner{
  position:absolute; width:20px; height:20px; pointer-events:none;
  border-color:rgba(74,222,128,.5); border-style:solid; border-width:0;
  transition:border-color .3s, width .3s var(--ux-ease), height .3s var(--ux-ease);
}
.auth-card .ux-corner.tl{top:-1px; left:-1px;  border-top-width:2px; border-left-width:2px;  border-radius:16px 0 0 0;}
.auth-card .ux-corner.tr{top:-1px; right:-1px; border-top-width:2px; border-right-width:2px; border-radius:0 16px 0 0;}
.auth-card .ux-corner.bl{bottom:-1px;left:-1px;  border-bottom-width:2px; border-left-width:2px;  border-radius:0 0 0 16px;}
.auth-card .ux-corner.br{bottom:-1px;right:-1px; border-bottom-width:2px; border-right-width:2px; border-radius:0 0 16px 0;}
.auth-card:hover .ux-corner{
  border-color:rgba(74,222,128,.9);
  width:28px; height:28px;
}

/* Tighten vertical rhythm — screenshot showed a large dead gap */
.auth-wrap{padding:32px 24px;}
.auth-box{margin:auto;}