:root{
  --bg1:#0f2027; --bg2:#203a43; --bg3:#2c5364;
  --neon:#00ffe0; --neon2:#0077ff; --ok:#00ff7f;
  --text:#ffffff; --panel:#0f161a;

  /* Header neon bar controls */
  --bar-height: 16px;                        /* thickness of the bar (was 12px) */
  --bar-offset: calc(-1 * (var(--bar-height) + 8px)); /* vertical position above title */
}

*{ box-sizing:border-box; }

body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; gap:24px; padding:32px 16px;
  background:linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3));
  color:var(--text); font-family:'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.app-title{
  margin:0; font-size:clamp(1.6rem, 3vw, 2.2rem); text-align:center;
  text-shadow:0 0 10px var(--neon), 0 0 20px var(--neon);
}

.card{
  width:min(560px, 96vw); margin-inline:auto; background:rgba(0,0,0,0.78);
  border-radius:16px; padding:22px; box-shadow:0 0 24px var(--neon);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}

.thumb{
  width:100%; border-radius:12px; transition:opacity .45s ease;
}

.video-title{
  width:100%; text-align:center; font-weight:700; font-size:1.05rem;
}

form{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:12px;
}

.field, .input-wrap{
  width:100%; max-width:520px;
}

.input-wrap{ position:relative; }
#urlInput{
  width:100%;
  height:48px;
  line-height:48px;
  padding:0 44px 0 12px;
  border-radius:10px; border:none; outline:none;
  font-size:1rem; background:var(--panel); color:var(--text);
  box-shadow: inset 0 0 0 1px rgba(0,255,224,0.45);
}

.loader, .btn-spinner{
  border-radius:50%; border-top:3px solid transparent; animation:spin 1s linear infinite;
}

.loader{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border:3px solid var(--neon);
}
.checkmark{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--ok); font-weight:700; font-size:1.1rem;
}

@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

select{
  width:100%; padding:12px; border-radius:10px; border:none; outline:none;
  font-size:1rem; background:var(--panel); color:var(--text);
  box-shadow: inset 0 0 0 1px rgba(0,255,224,0.45);
}

.button-wrap{
  width:100%; max-width:520px; display:flex; flex-direction:column;
  align-items:center; gap:8px; margin-top:6px;
}

.arrow{
  min-height:1.4rem; font-size:1rem; color:var(--neon);
  opacity:0; transition:opacity .45s ease, transform .45s ease;
  text-align:center; animation:bounce 1.4s infinite;
}
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

#downloadBtn{
  width:100%; max-width:320px; padding:12px; border:none; border-radius:12px;
  background:linear-gradient(45deg, var(--neon), var(--neon2)); color:#000; font-weight:800; font-size:1rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
}
#downloadBtn:hover:enabled{ transform:scale(1.04); box-shadow:0 0 16px var(--neon), 0 0 24px var(--neon2); }
#downloadBtn:disabled{ background:#3a3f46; color:#d1d5db; cursor:not-allowed; }
.btn-spinner{ display:none; width:16px; height:16px; border:3px solid #d1d5db; border-top-color:transparent; }
.btn-text{ display:inline-block; }

.progress-container{
  width:100%; max-width:520px; position:relative; height:20px; background:#101417;
  border-radius:10px; overflow:hidden; margin-top:6px; display:flex; align-items:center;
}
.progress-bar{
  position:relative; height:100%; width:0%;
  background:linear-gradient(90deg, var(--neon), var(--neon2)); transition:width .2s linear;
}
.progress-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:0.8rem;
  line-height:1;
  color:#fff;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

.done-check{
  margin-top:6px; color:var(--ok); font-weight:800; font-size:1.05rem;
}

.ready-link{
  margin-top:8px; display:inline-block; text-decoration:none; font-weight:800; color:#000;
  background:linear-gradient(45deg, var(--neon), var(--neon2)); padding:10px 16px; border-radius:10px;
  position: relative;           /* enable tap ripple containment */
  overflow: hidden;             /* clip the ripple */
}
.ready-link:hover{ filter:brightness(1.08); }

@media (max-width: 480px){
  .card{ padding:18px; }
  #downloadBtn{ max-width:100%; }
}

/* ===== Minimal centering fix across all devices (safe) ===== */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
/* === Safe centering fix === */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* removes right-side push */
}

.card {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   NEON HEADER BAR (thicker pill) + flowing gradient + states
   ============================================================ */
.header-wrap { position: relative; }

/* Thicker glowing bar above the header (keeps original colors/animation) */
.header-wrap::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--bar-offset);           /* sits above the title */
  height: var(--bar-height);        /* thicker pill bar */
  border-radius: 999px;
  background: linear-gradient(270deg,
    #00e0ff,
    #4f8cff,
    #00ffe0,
    #4f8cff,
    #00e0ff);
  background-size: 400% 100%;
  animation: line-flow 6s linear infinite;
  box-shadow:
    0 0 16px rgba(79,140,255,.75),
    0 0 32px rgba(0,224,255,.6);
}

/* Ready state ? green, keep anim/glow */
.ready .header-wrap::before {
  background: linear-gradient(270deg,
    #23ff7a,
    #7bd389,
    #b5ffca,
    #7bd389,
    #23ff7a);
  background-size: 400% 100%;
  box-shadow:
    0 0 16px rgba(35,255,122,.8),
    0 0 32px rgba(72,219,112,.6);
}

/* Flowing gradient */
@keyframes line-flow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 400% 50%; }
}

/* Optional glow on header text */
.header-title {
  text-shadow:
    0 0 10px rgba(79,140,255,.45),
    0 0 24px rgba(79,140,255,.25);
}
.ready .header-title {
  text-shadow:
    0 0 10px rgba(35,255,122,.45),
    0 0 24px rgba(35,255,122,.25);
}

/* Emoji rendering fix for the actual rocket in the header */
.logo-rocket{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
              "EmojiOne Color","Twemoji Mozilla",system-ui,sans-serif;
  display:inline-block;
  transform-origin:60% 50%;
  will-change:transform;
  pointer-events:none;
  line-height:1;
}

/* ============================================================
   VISUAL EXTRAS (used by ux.js, non-breaking)
   ============================================================ */

/* Downloading pulse stacks with flow animation */
@keyframes neonPulse {
  0%   { filter: brightness(1) saturate(1);   opacity: .9; }
  50%  { filter: brightness(1.35) saturate(1.2); opacity: 1; }
  100% { filter: brightness(1) saturate(1);   opacity: .9; }
}
.downloading .header-wrap::before{
  animation: line-flow 6s linear infinite, neonPulse 1.2s ease-in-out infinite;
}

/* Launch puff at rocket liftoff */
.launch-puff{
  position: fixed;
  left: 0; top: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
              rgba(255,255,255,.95) 0,
              rgba(255,255,255,.6) 30%,
              rgba(255,255,255,0) 70%);
  opacity: .9;
  transform: translate(-50%,-50%) scale(.5);
  filter: blur(.5px);
  animation: puffOut .6s ease-out forwards;
}
@keyframes puffOut{
  to{
    opacity: 0;
    transform: translate(-50%,-50%) scale(5);
  }
}

/* Tap ripple effect on the ready button */
.tap-ripple{
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: currentColor;
  opacity: .25;
  transform: translate(-50%,-50%) scale(0);
  mix-blend-mode: multiply;
  animation: rippleOut .45s ease-out forwards;
}
@keyframes rippleOut{
  to{
    opacity: 0;
    transform: translate(-50%,-50%) scale(12);
  }
}

/* Floating rocket ghost (kept from your original; harmless if unused) */
#flying-rocket {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-size: 24px;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 10px rgba(79,140,255,.5));
}
.ready #flying-rocket {
  filter: drop-shadow(0 0 10px rgba(35,255,122,.55));
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .downloading .header-wrap::before { animation: line-flow 6s linear infinite; }
}
/* ===== Top header bar (thin, glossy) — no HTML/JS changes needed ===== */
:root{
  --topbar-h: 16px; /* height of the bar (tweak to match your screenshot) */
}

/* Reserve space so content doesn't slide under the fixed bar */
body{
  padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 8px);
}

/* The bar itself */
body::before{
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px); /* iOS notch safe area */
  z-index: 10000;

  /* subtle glossy black */
  background:
    linear-gradient(to bottom, rgba(0,0,0,.85), rgba(18,18,18,.95));
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),   /* faint top highlight */
    inset 0 -1px rgba(0,0,0,.6),        /* inner bottom shade */
    0 0 12px rgba(0,0,0,.35);           /* soft outer vignette */
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* optional: hairline highlight just under the bar (like in many UIs) */
body::after{
  content: "";
  position: fixed;
  top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  left: 0; right: 0;
  height: 2px;
  z-index: 9999;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,0) 15%,
    rgba(255,255,255,0) 85%,
    rgba(255,255,255,.16) 100%
  );
  opacity: .35; /* lower if you want subtler */
}

/* Keep your thicker neon bar happily below it */
.header-wrap { position: relative; }

/* ========================================================================
   FOOTER: full-width neon pill — "ytdown.store"
   - Spans left?right with side margins
   - Green on .ready, pulse on .downloading
   - No HTML/JS required
   ======================================================================== */
:root{
  --footer-h: 36px;                               /* pill height */
  --footer-gap: 12px;                              /* distance from bottom edge */
  --footer-side: clamp(10px, 3vw, 24px);           /* side margin */
  --footer-pad-x: 18px;                            /* inner left/right padding */
  --footer-radius: 9999px;                         /* pill shape */
  --footer-font: clamp(12px, 1.8vw, 15px);         /* responsive font size */
}

/* keep content from hiding behind the fixed footer */
body{
  padding-bottom: calc(var(--footer-h) + var(--footer-gap)
                       + env(safe-area-inset-bottom, 0px) + 16px);
}

/* the pill itself */
html::after{
  content: "ytdown.store";
  position: fixed;
  left: var(--footer-side);
  right: var(--footer-side);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--footer-gap));
  height: var(--footer-h);
  line-height: var(--footer-h);
  padding: 0 var(--footer-pad-x);
  border-radius: var(--footer-radius);
  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  /* default blue/cyan flowing gradient (matches header vibe) */
  background: linear-gradient(270deg,
    #00e0ff, #4f8cff, #00ffe0, #4f8cff, #00e0ff);
  background-size: 400% 100%;
  animation: footer-flow 6s linear infinite;

  /* glow */
  box-shadow:
    0 0 16px rgba(79,140,255,.75),
    0 0 32px rgba(0,224,255,.6);

  color: #000;
  font-weight: 800;
  font-size: var(--footer-font);
  letter-spacing: .5px;
  text-align: center;
  white-space: nowrap;

  user-select: none;
  pointer-events: none; /* set to 'auto' later if you want it clickable */
}

/* flowing gradient animation */
@keyframes footer-flow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 400% 50%; }
}

/* subtle pulse when downloading */
@keyframes footerPulse {
  0%   { filter: brightness(1) saturate(1);   opacity: .9; }
  50%  { filter: brightness(1.35) saturate(1.2); opacity: 1; }
  100% { filter: brightness(1) saturate(1);   opacity: .9; }
}

/* ready state ? green variant (matches header ready) */
.ready html::after{
  background: linear-gradient(270deg,
    #23ff7a, #7bd389, #b5ffca, #7bd389, #23ff7a);
  background-size: 400% 100%;
  box-shadow:
    0 0 16px rgba(35,255,122,.8),
    0 0 32px rgba(72,219,112,.6);
}

/* downloading pulse stacks with flow */
.downloading html::after{
  animation: footer-flow 6s linear infinite, footerPulse 1.2s ease-in-out infinite;
}

/* accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .downloading html::after{ animation: footer-flow 6s linear infinite; }
}

/* --- Optional: cap width on ultra-wide monitors (uncomment to use) --- */
/*
html::after{
  max-width: 1100px;
  margin: 0 auto;
  left: 0; right: 0;
}
*/