/* =========================================================
   RyuTools — FX + Nav layer (v2)
   Hamburger mobile · Desktop glass tabs · Extra liquid FX
   ========================================================= */

/* ---------- Hide legacy short/full split ---------- */
.tab-short{display:none!important}
.tab-full{display:inline}

/* ---------- Vignette + shimmer + aurora ---------- */
.vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 40%, transparent 30%, rgba(0,0,0,.5) 100%);
  z-index:2;
}
.shimmer-layer{
  position:absolute;
  inset:-20%;
  pointer-events:none;
  z-index:1;
  opacity:.4;
  background:
    linear-gradient(115deg,
      transparent 30%,
      rgba(180,220,255,.07) 45%,
      rgba(255,255,255,.12) 50%,
      rgba(100,200,255,.07) 55%,
      transparent 70%);
  animation:fieldShimmer 8s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes fieldShimmer{
  0%{transform:translateX(-14%) rotate(0deg)}
  50%{transform:translateX(14%) rotate(2deg)}
  100%{transform:translateX(-14%) rotate(0deg)}
}
.aurora{
  position:absolute;
  inset:-10%;
  pointer-events:none;
  z-index:0;
  opacity:.55;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(60,140,255,.12) 50deg,
      transparent 100deg,
      rgba(0,230,255,.1) 160deg,
      transparent 220deg,
      rgba(160,100,255,.1) 280deg,
      transparent 360deg);
  animation:auroraSpin 28s linear infinite;
  filter:blur(40px);
  mix-blend-mode:screen;
}
@keyframes auroraSpin{to{transform:rotate(360deg)}}

/* Floating glass orbs */
.orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  mix-blend-mode:screen;
  filter:blur(2px);
  will-change:transform;
}
.orb-a{
  width:min(180px,40vw);height:min(180px,40vw);
  top:18%;left:8%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(circle at 60% 70%, rgba(80,160,255,.4), transparent 55%);
  animation:orbFloat 11s ease-in-out infinite;
  opacity:.55;
}
.orb-b{
  width:min(120px,30vw);height:min(120px,30vw);
  bottom:22%;right:12%;
  background:
    radial-gradient(circle at 40% 35%, rgba(180,255,255,.5), transparent 45%),
    radial-gradient(circle at 55% 65%, rgba(0,200,255,.35), transparent 55%);
  animation:orbFloat 14s ease-in-out infinite reverse;
  opacity:.45;
}
.orb-c{
  width:min(90px,22vw);height:min(90px,22vw);
  top:55%;left:55%;
  background:radial-gradient(circle at 40% 35%, rgba(220,180,255,.45), transparent 50%);
  animation:orbFloat 9s ease-in-out infinite;
  animation-delay:-3s;
  opacity:.4;
}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(18px,-22px) scale(1.08)}
  66%{transform:translate(-14px,12px) scale(.92)}
}
.caustic-3{
  position:absolute;
  width:50vw;height:40vh;
  left:30%;top:40%;
  border-radius:50%;
  filter:blur(55px) saturate(1.7);
  mix-blend-mode:screen;
  opacity:.3;
  background:radial-gradient(ellipse at 50% 50%, rgba(160,120,255,.4) 0%, transparent 55%);
  animation:causticFloat 14s ease-in-out infinite alternate;
}

/* Subtle pulse — desktop only (causes mobile flicker with backdrop-filter) */
@keyframes glassPulse{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(170,210,255,.2), inset 0 1px 0 rgba(255,255,255,.16), 0 12px 40px rgba(0,0,0,.35)}
  50%{box-shadow:inset 0 0 0 1px rgba(190,225,255,.32), inset 0 1px 0 rgba(255,255,255,.24), 0 16px 48px rgba(40,120,255,.18)}
}
@media (min-width:900px) and (hover:hover){
  .main-card{animation:fadeUp .65s cubic-bezier(.22,1,.36,1), glassPulse 8s ease-in-out infinite}
  .app-header{animation:fadeDown .65s cubic-bezier(.22,1,.36,1), glassPulse 9s ease-in-out infinite}
  #fetch-btn::after,
  .action-btn::after,
  .save-btn::after{
    content:'';
    position:absolute;
    top:0;left:-60%;
    width:40%;height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-20deg);
    animation:btnShine 5s ease-in-out infinite;
    pointer-events:none;
    z-index:1;
  }
}
@keyframes btnShine{
  0%{left:-60%}
  40%,100%{left:130%}
}
#fetch-btn > *,.action-btn > *,.save-btn > *{position:relative;z-index:2}

/* Platform chips — hover only, no infinite float (flickers on mobile) */
.platforms span{
  transition:transform .25s, box-shadow .25s, background .25s;
}
@media (hover:hover) and (pointer:fine){
  .platforms span:hover{
    transform:translateY(-4px) scale(1.05);
    box-shadow:0 8px 20px rgba(0,0,0,.25)!important;
  }
}

/* ---------- Particles ---------- */
.particles{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:1;
  pointer-events:none;
}
.particle{
  position:absolute;
  width:var(--s, 2px);
  height:var(--s, 2px);
  border-radius:50%;
  background:rgba(200,230,255,var(--o,.35));
  box-shadow:0 0 8px rgba(120,190,255,.55), 0 0 16px rgba(60,180,255,.25);
  animation:particleDrift var(--d, 10s) ease-in-out infinite;
  animation-delay:var(--delay, 0s);
  will-change:transform, opacity;
}
@keyframes particleDrift{
  0%,100%{transform:translate(0,0) scale(1);opacity:var(--o,.35)}
  25%{transform:translate(12px,-28px) scale(1.3);opacity:calc(var(--o,.35) + .15)}
  50%{transform:translate(-10px,-50px) scale(.8);opacity:calc(var(--o,.35) * .6)}
  75%{transform:translate(18px,-22px) scale(1.15);opacity:calc(var(--o,.35) + .1)}
}

/* ---------- Desktop custom cursor (NEVER on touch) ---------- */
@media (hover:hover) and (pointer:fine){
  .has-cursor-fx,
  .has-cursor-fx *{cursor:none!important}
  .has-cursor-fx .cursor-glow,
  .has-cursor-fx .cursor-ring{opacity:1;display:block}
}
.cursor-glow,
.cursor-ring{
  position:fixed;
  top:0;left:0;
  pointer-events:none;
  z-index:9999;
  opacity:0;
  display:none;
  transition:opacity .3s;
}
.cursor-glow{
  width:380px;height:380px;
  margin:-190px 0 0 -190px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(100,180,255,.28) 0%, rgba(40,200,255,.1) 32%, transparent 68%);
  mix-blend-mode:screen;
  filter:blur(10px);
  will-change:transform;
}
.cursor-ring{
  width:40px;height:40px;
  margin:-20px 0 0 -20px;
  border-radius:50%;
  border:1.5px solid rgba(200,230,255,.6);
  box-shadow:0 0 24px rgba(100,180,255,.4), inset 0 0 14px rgba(120,200,255,.18);
  backdrop-filter:blur(4px);
  transition:width .2s, height .2s, margin .2s, border-color .2s, background .2s, box-shadow .2s;
  will-change:transform;
}
.cursor-ring.hot{
  width:56px;height:56px;
  margin:-28px 0 0 -28px;
  border-color:rgba(255,255,255,.8);
  background:rgba(120,180,255,.12);
  box-shadow:0 0 32px rgba(100,200,255,.55), inset 0 0 18px rgba(180,230,255,.22);
}

/* ---------- Header row + hamburger ---------- */
.header-row{
  display:flex;
  align-items:center;
  gap:.75rem;
  width:100%;
}
.logo{
  flex:1;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  margin-bottom:0!important;
  min-width:0;
}
.logo-text{text-align:left;min-width:0}
.logo-text h1{margin:0;line-height:1.15}
.logo-text .tagline{
  margin:0;
  text-align:left;
  font-size:.78rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.header-spacer{width:44px;flex-shrink:0}
.logo-icon.sm{
  width:40px!important;height:40px!important;
  border-radius:14px!important;
  font-size:1rem!important;
}

/* Hamburger — enhanced glass (base visibility is in style.css) */
.hamburger{
  flex-shrink:0;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  transition:background .2s, box-shadow .2s, transform .2s;
}
.hamburger:active{transform:scale(.94)}
.hamburger span{
  display:block;
  position:absolute;
  left:12px;right:12px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, #cfe6ff, #7dd3fc);
  box-shadow:0 0 8px rgba(120,200,255,.5);
  transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .2s, top .28s;
}
.hamburger span:nth-child(1){top:15px}
.hamburger span:nth-child(2){top:22px}
.hamburger span:nth-child(3){top:29px}
.hamburger.open span:nth-child(1){top:22px;transform:rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){top:22px;transform:rotate(-45deg)}

/* Current tool chip (mobile) */
.current-tool-chip{
  display:none;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin-top:.75rem;
  padding:.55rem .9rem;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(90,150,255,.28), rgba(40,200,255,.15));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 16px rgba(40,120,255,.2);
  font-size:.82rem;
  font-weight:700;
  color:#eaf4ff;
  backdrop-filter:blur(16px);
}
.current-tool-chip i{
  color:#9ed8ff;
  filter:drop-shadow(0 0 8px rgba(120,200,255,.55));
}

/* ---------- Mobile drawer ---------- */
.nav-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,4,16,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
.nav-overlay.open{opacity:1;visibility:visible}

.nav-drawer{
  position:fixed;
  top:0;left:0;bottom:0;
  width:min(86vw, 320px);
  z-index:210;
  display:flex;
  flex-direction:column;
  padding:
    max(1rem, env(safe-area-inset-top))
    1rem
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background:
    linear-gradient(165deg,
      rgba(255,255,255,.16) 0%,
      rgba(20,40,80,.55) 35%,
      rgba(8,16,36,.82) 100%);
  border-right:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  box-shadow:
    20px 0 60px rgba(0,0,0,.45),
    inset 1px 0 0 rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.2);
  transform:translateX(-105%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.nav-drawer::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 80% 40% at 20% 0%, rgba(120,180,255,.25), transparent 50%),
    linear-gradient(125deg, rgba(255,255,255,.12) 0%, transparent 30%);
  pointer-events:none;
}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer > *{position:relative;z-index:1}

.nav-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:1.25rem;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.nav-drawer-brand{
  display:flex;
  align-items:center;
  gap:.7rem;
}
.nav-drawer-brand strong{
  display:block;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.02em;
  background:linear-gradient(120deg,#fff,#9ed8ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nav-drawer-brand span{
  display:block;
  font-size:.72rem;
  color:var(--text-muted,#8aa4c4);
}
.nav-close{
  width:40px;height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.nav-drawer-list{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-right:.15rem;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:.85rem;
  width:100%;
  min-height:52px;
  padding:.75rem 1rem;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  color:rgba(230,240,255,.88);
  font:inherit;
  font-size:.92rem;
  font-weight:650;
  text-align:left;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .15s, box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-item i{
  width:36px;height:36px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  color:#9ed8ff;
  flex-shrink:0;
}
.nav-item:active{transform:scale(.98)}
.nav-item.active{
  background:linear-gradient(135deg, rgba(90,150,255,.4), rgba(40,200,255,.22));
  border-color:rgba(255,255,255,.32);
  color:#fff;
  box-shadow:
    0 8px 24px rgba(50,130,255,.3),
    inset 0 1px 0 rgba(255,255,255,.3);
}
.nav-item.active i{
  background:linear-gradient(145deg, rgba(100,160,255,.7), rgba(40,220,255,.45));
  border-color:rgba(255,255,255,.3);
  color:#fff;
  box-shadow:0 0 16px rgba(100,180,255,.4);
}

.nav-admin{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin-top:1rem;
  padding:.8rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(200,220,255,.75);
  text-decoration:none;
  font-size:.85rem;
  font-weight:600;
  background:rgba(255,255,255,.04);
}
.nav-admin:hover{color:#fff;background:rgba(255,255,255,.08)}

body.nav-open{overflow:hidden}

/* ---------- Desktop tabs (only) ---------- */
.desktop-tabs{display:block}

/* ---------- Tab enter / stagger ---------- */
.tab-content.tab-enter{
  animation:tabPanelIn .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes tabPanelIn{
  from{opacity:0;transform:translateY(18px) scale(.975);filter:blur(6px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.fx-stagger{
  animation:staggerIn .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--stagger, 0s);
}
@keyframes staggerIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- Ripple (contained — never expand host) ---------- */
.ripple-host{position:relative;overflow:hidden}
.ripple{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(140,200,255,.2) 40%, transparent 70%);
  transform:scale(0);
  animation:rippleOut .65s ease-out forwards;
  pointer-events:none;
  z-index:5;
  /* prevent layout influence */
  margin:0!important;
  max-width:none;
  max-height:none;
}
@keyframes rippleOut{to{transform:scale(1);opacity:0}}
/* fetch button must stay fixed height even with ripple */
#fetch-btn.ripple-host,
.action-btn.ripple-host{
  overflow:hidden;
  flex:0 0 auto!important;
}

/* ---------- Tilt cards (desktop) ---------- */
.tilt-card{
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .15s ease-out;
}
.tilt-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(
    600px circle at var(--gx,50%) var(--gy,50%),
    rgba(180,220,255,.18),
    transparent 42%
  );
  opacity:.9;
  z-index:4;
  mix-blend-mode:soft-light;
}
.quality-card.tilt-card::after{mix-blend-mode:screen;opacity:.55}

/* ---------- Toast ---------- */
.fx-toast{
  position:fixed;
  left:50%;
  bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(120%);
  z-index:10000;
  padding:.75rem 1.25rem;
  border-radius:999px;
  background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(40,100,180,.2));
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  color:#fff;
  font-size:.86rem;
  font-weight:600;
  box-shadow:0 12px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
  opacity:0;
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .35s;
  pointer-events:none;
  max-width:min(90vw, 360px);
  text-align:center;
}
.fx-toast.show{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}

/* =========================================================
   MOBILE: hamburger only — hide desktop tab strip
   ========================================================= */
@media (max-width: 899px){
  .hamburger{display:block!important;visibility:visible!important;opacity:1!important}
  .header-spacer{display:none}
  .current-tool-chip{display:inline-flex!important;width:100%}
  .desktop-tabs,
  .tab-bar-scroll{display:none!important}

  /* Kill sticky glitch / white blob artifacts */
  .app-header{
    position:relative!important;
    top:auto!important;
    z-index:20!important;
    margin-bottom:.15rem;
  }
  .tab-bar-scroll{
    position:static!important;
    background:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    mask-image:none!important;
    -webkit-mask-image:none!important;
  }

  /* Never show desktop cursor FX on phones */
  .cursor-glow,
  .cursor-ring{display:none!important;opacity:0!important}
  body, body *{cursor:auto!important}

  .app-wrapper{
    gap:.65rem;
    padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px));
  }
  .app-header{
    border-radius:22px!important;
    padding:.85rem .9rem .75rem!important;
  }
  .logo{justify-content:flex-start!important}
  .logo-icon{width:42px!important;height:42px!important;border-radius:14px!important}
  .logo h1{font-size:1.35rem!important;text-align:left}
  .logo-text .tagline{font-size:.7rem!important}

  .main-card{
    border-radius:22px!important;
    padding:1.05rem .95rem 1.15rem!important;
    flex:0 1 auto!important;
    min-height:0!important;
  }

  .action-btn, #fetch-btn, .save-btn{
    min-height:52px!important;
    border-radius:16px!important;
  }

  #tab-media > .scale-grid:first-of-type,
  #tab-ai > .scale-grid:first-of-type{
    display:flex!important;
    overflow-x:auto;
    gap:.45rem!important;
    padding-bottom:.35rem;
    margin-bottom:.9rem!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    grid-template-columns:none!important;
  }
  #tab-media > .scale-grid:first-of-type::-webkit-scrollbar,
  #tab-ai > .scale-grid:first-of-type::-webkit-scrollbar{display:none}
  #tab-media > .scale-grid:first-of-type .scale-btn,
  #tab-ai > .scale-grid:first-of-type .scale-btn{
    flex:0 0 auto;
    min-width:6.5rem;
    min-height:3.5rem!important;
  }

  .quality-grid{grid-template-columns:repeat(3, minmax(0,1fr))!important;gap:.4rem!important}
  .stem-grid{grid-template-columns:1fr!important}
  .platforms span{font-size:.65rem!important}
  .search-section{flex-direction:column}
  #fetch-btn{width:100%;justify-content:center}

  /* Stronger mobile glass without sticky bugs */
  .app-header,
  .main-card,
  .progress-card,
  .upload-area{
    background:linear-gradient(165deg, rgba(255,255,255,.14) 0%, rgba(20,40,70,.45) 45%, rgba(8,16,32,.72) 100%)!important;
  }
}

@media (max-width:380px){
  .logo-text .tagline{display:none}
  .quality-grid{grid-template-columns:repeat(2, minmax(0,1fr))!important}
  .nav-drawer{width:min(92vw, 300px)}
}

/* =========================================================
   DESKTOP: enhanced liquid glass toolbar
   ========================================================= */
@media (min-width:900px){
  .hamburger,
  .current-tool-chip,
  .nav-drawer,
  .nav-overlay{display:none!important}

  .header-row{justify-content:center}
  .header-spacer{display:none}
  .logo{justify-content:center!important}
  .logo-text{text-align:center}
  .logo-text .tagline{text-align:center}

  .app-wrapper{
    max-width:1000px;
    padding:1.4rem 1rem 2rem;
    gap:1.15rem;
  }

  .app-header{
    padding:1.45rem 1.6rem 1.15rem!important;
    border-radius:30px;
    background:
      linear-gradient(155deg,
        rgba(255,255,255,.22) 0%,
        rgba(255,255,255,.08) 18%,
        rgba(80,140,255,.1) 50%,
        rgba(255,255,255,.05) 100%)!important;
    box-shadow:
      0 2px 0 rgba(255,255,255,.18) inset,
      0 -18px 40px rgba(30,80,180,.1) inset,
      0 16px 50px rgba(0,0,0,.35),
      0 0 80px rgba(60,150,255,.1)!important;
    transition:transform .35s, box-shadow .35s;
  }
  .app-header:hover{
    box-shadow:
      0 2px 0 rgba(255,255,255,.22) inset,
      0 20px 60px rgba(0,0,0,.4),
      0 0 100px rgba(60,160,255,.15)!important;
  }

  .desktop-tabs{
    display:flex!important;
    justify-content:center;
    mask-image:none!important;
    -webkit-mask-image:none!important;
    position:static!important;
    background:transparent!important;
    backdrop-filter:none!important;
  }
  .tab-bar{
    padding:8px!important;
    gap:.5rem!important;
    background:linear-gradient(180deg, rgba(18,32,58,.88), rgba(10,20,40,.92))!important;
    border:none!important;
    outline:none!important;
    box-shadow:none!important;
    filter:none!important;
  }
  .tab-bar::before,
  .tab-bar::after{content:none!important;display:none!important}
  .tab-btn{
    padding:.82rem 1.2rem!important;
    min-height:50px!important;
    font-size:.86rem!important;
    border-radius:999px!important;
    border:none!important;
    box-shadow:none!important;
  }
  .tab-btn:hover{transform:translateY(-2px);box-shadow:none!important}
  .tab-btn.active{
    background:linear-gradient(135deg, rgba(70,130,255,.9), rgba(30,190,230,.8))!important;
    border:none!important;
    box-shadow:none!important;
  }

  .main-card{
    padding:2.15rem 2.25rem!important;
    border-radius:32px!important;
    background:
      linear-gradient(160deg,
        rgba(255,255,255,.2) 0%,
        rgba(255,255,255,.07) 20%,
        rgba(50,110,200,.08) 55%,
        rgba(255,255,255,.05) 100%)!important;
    box-shadow:
      0 2px 0 rgba(255,255,255,.16) inset,
      0 -24px 50px rgba(30,80,180,.1) inset,
      0 24px 70px rgba(0,0,0,.4),
      0 0 90px rgba(60,150,255,.1)!important;
  }
  .main-card:hover{
    box-shadow:
      0 2px 0 rgba(255,255,255,.2) inset,
      0 -24px 50px rgba(30,80,180,.12) inset,
      0 28px 80px rgba(0,0,0,.45),
      0 0 110px rgba(60,160,255,.14)!important;
  }

  .quality-card:hover{transform:translateY(-6px) scale(1.03)!important}
  .scale-btn:hover{transform:translateY(-5px) scale(1.03)!important}
  .action-btn:hover{transform:translateY(-3px) scale(1.015)!important}
  .upload-area:hover{transform:translateY(-3px)!important}

  .app-wrapper::before,
  .app-wrapper::after{
    content:'';
    position:fixed;
    width:300px;height:300px;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
    filter:blur(90px);
    opacity:.4;
  }
  .app-wrapper::before{
    top:12%;left:max(0px, calc(50% - 640px));
    background:rgba(70,150,255,.5);
    animation:sidePulse 8s ease-in-out infinite;
  }
  .app-wrapper::after{
    bottom:8%;right:max(0px, calc(50% - 640px));
    background:rgba(0,230,255,.35);
    animation:sidePulse 10s ease-in-out infinite reverse;
  }
  @keyframes sidePulse{
    0%,100%{opacity:.28;transform:scale(1)}
    50%{opacity:.5;transform:scale(1.18)}
  }
}

@media(min-width:1200px){
  .app-wrapper{max-width:1060px}
}

/* Focus + success */
:focus-visible{
  outline:2px solid rgba(140,200,255,.7);
  outline-offset:3px;
}
.complete-card .complete-icon{
  animation:popIn .55s cubic-bezier(.22,1,.36,1), successFlash 1.2s ease-out .2s;
}
@keyframes successFlash{
  0%{box-shadow:0 0 0 0 rgba(74,240,192,.5)}
  100%{box-shadow:0 0 0 16px rgba(74,240,192,0)}
}
/* Progress pulse — desktop only */
@media (min-width:900px){
  .progress-icon{animation:iconPulseRing 2.4s ease-in-out infinite}
}
@keyframes iconPulseRing{
  0%,100%{box-shadow:0 10px 28px rgba(50,140,255,.5), inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 0 rgba(100,180,255,.4)}
  50%{box-shadow:0 10px 28px rgba(50,140,255,.5), inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 10px rgba(100,180,255,0)}
}

/* ===== MOBILE: kill continuous animations (stops screen flicker) ===== */
@media (max-width:899px){
  .aurora,
  .shimmer-layer,
  .orb,
  .caustic,
  .particles,
  .glass-noise{
    animation:none!important;
    display:none!important; /* heavy layers off on phone */
  }
  .blob{
    animation:none!important;
    opacity:.28!important;
    filter:blur(40px)!important;
  }
  .liquid-stage::after{
    animation:none!important;
    opacity:.25!important;
  }
  .main-card,
  .app-header,
  .progress-icon,
  .platforms span,
  #fetch-btn::after,
  .action-btn::after,
  .save-btn::after,
  .app-wrapper::before,
  .app-wrapper::after{
    animation:none!important;
  }
  .main-card,
  .app-header{
    /* static glass — no pulse flicker with backdrop-filter */
    backdrop-filter:blur(18px) saturate(140%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(140%)!important;
  }
  .tab-content.tab-enter{
    animation:tabPanelIn .3s ease both!important;
  }
  .fx-stagger{animation:none!important;opacity:1!important;transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  .particle,.cursor-glow,.cursor-ring,.tab-content.tab-enter,.fx-stagger,.ripple,
  .progress-icon,.app-wrapper::before,.app-wrapper::after,.shimmer-layer,.caustic-3,
  .aurora,.orb,.blob{
    animation:none!important;
  }
  .tilt-card{transform:none!important}
  .nav-drawer{transition:none}
}