/* SaveKit.app — Mobile-Perfect SaaS Design System */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Slate & Glass Depth.
     2026-08-24 sharpening pass: the surfaces used to be quite transparent and the
     borders nearly invisible, which on a dark page reads as soft and muddy. Cards are
     now close to solid and the edges carry real contrast, because on dark UI the thing
     the eye reads as "sharp" is edge contrast, not shadow. */
  --bg-app: #07090e;
  --bg-card: rgba(16, 23, 38, 0.92);
  --bg-card-hover: rgba(24, 34, 54, 0.97);
  --bg-input: #0b111d;
  --bg-surface: #111827;
  --bg-elevated: #162032;

  /* Borders */
  --border-glass: rgba(255, 255, 255, 0.13);
  --border-glass-hover: rgba(56, 189, 248, 0.45);
  --border-focus: #38bdf8;

  /* Gradients */
  --insta-gradient: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
  --yt-gradient: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
  --fb-gradient: linear-gradient(135deg, #1877f2 0%, #0c56b8 100%);
  --primary-gradient: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
  --primary-glow: rgba(37, 99, 235, 0.3);

  /* High-Contrast Colors */
  --text-main: #f8fafc;
  --text-sub: #cbd5e1;
  --text-muted: #94a3b8;
  --text-white: #ffffff;
  --text-blue: #38bdf8;

  /* Backwards-compatible aliases used by the legal/contact pages. Keeping these
     mapped to the live design tokens prevents an invalid var() from dropping an
     entire colour, border or radius declaration in the browser. */
  --text-primary: var(--text-main);
  --text-secondary: var(--text-sub);
  --border-subtle: var(--border-glass);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --font-heading: var(--font-display);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radii — tightened, because large radii are what made the old cards look soft. */
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 9999px;

  /* Shadows — shorter and darker instead of wide and hazy. */
  --shadow-ambient: 0 12px 26px -12px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 16px rgba(56, 189, 248, 0.22);
  --shadow-card: 0 6px 16px -8px rgba(0, 0, 0, 0.7);

  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  background-color: var(--bg-app);
}

a, a:link, a:visited {
  color: inherit;
  text-decoration: none;
}

body {
  font-family: var(--font-text);
  /* Toned down from 0.12/0.10/0.06. Three coloured washes over the whole page lifted
     the black and cost the cards their edge; the tint is now just enough to stop the
     background looking flat grey. */
  background-image:
    radial-gradient(at 0% 0%, rgba(37, 99, 235, 0.08) 0px, transparent 45%),
    radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.06) 0px, transparent 45%);
  background-attachment: fixed;
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Keyboard users need to see where they are. `:focus-visible` (not `:focus`) so a
   mouse click on a button does not leave a ring behind. */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Fluid Safe Container */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--border-glass);
  background: rgba(7, 9, 14, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.site-header .container {
  max-width: 1240px;
  padding: 0 10px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  width: 100%;
  gap: 16px;
}

.brand-logo, .brand-logo:visited {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #ffffff !important;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

.brand-icon, svg.brand-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  color: #38bdf8;
  flex-shrink: 0;
}

.input-icon, svg.input-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  color: var(--text-muted);
  flex-shrink: 0;
}

.logo-badge {
  width: 32px;
  height: 32px;
  background: var(--primary-gradient);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Header Navigation Bar - Centered */
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  gap: 4px;
  list-style: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 6px;
  border-radius: var(--r-pill);
}

.nav-links a,
.nav-links a:link,
.nav-links a:visited {
  color: var(--text-sub) !important;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  transition: all 0.2s var(--ease-smooth);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.nav-links a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08);
}

.nav-links a.active {
  color: #ffffff !important;
  background: rgba(59, 130, 246, 0.25);
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.nav-home-link,
.nav-home-link:link,
.nav-home-link:visited {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  font-weight: 700 !important;
}

.header-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-header-install {
  display: none !important; /* Mobile only */
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-white);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* Mobile Quick Home Link in Header */
.mobile-home-icon-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--r-pill);
  color: #38bdf8 !important;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  gap: 4px;
}

/* Breadcrumb Navigation */
.breadcrumb-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(17, 24, 39, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin: 0 auto 14px;
  font-size: 0.8rem;
  box-shadow: none;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: center;
}

.breadcrumb-bar a,
.breadcrumb-bar a:link,
.breadcrumb-bar a:visited {
  color: #38bdf8 !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb-separator {
  color: #64748b;
  font-weight: 800;
  padding: 0 2px;
}

.breadcrumb-current {
  color: #ffffff;
  font-weight: 600;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hero Section */
.hero-section {
  padding: 20px 0 16px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #93c5fd;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 0.76rem;
  font-weight: 700;
  margin-bottom: 12px;
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.3;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 10px;
  color: var(--text-white);
  word-break: break-word;
  padding: 0 4px;
}

.hero-subtitle {
  font-size: clamp(0.86rem, 3.2vw, 1.02rem);
  color: var(--text-sub);
  max-width: 600px;
  margin: 0 auto 20px;
  line-height: 1.5;
  padding: 0 4px;
}

/* Responsive Tool Tabs / Horizontal Scroll on Mobile */
.tool-tabs-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 20px;
  padding: 2px 0;
}

.tool-tabs-wrapper::-webkit-scrollbar {
  display: none;
}

.tool-tabs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 100%;
  flex-wrap: wrap;
}

.tool-tab,
.tool-tab:link,
.tool-tab:visited {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  color: var(--text-sub) !important;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.tool-tab:hover,
.tool-tab.active {
  background: var(--bg-elevated);
  border-color: var(--border-focus);
  color: var(--text-white) !important;
}

.tool-tab-home,
.tool-tab-home:link,
.tool-tab-home:visited {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

.tab-svg-icon {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: -2px;
}

.tab-svg-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.icon-insta-color { color: #ec4899; }
.icon-yt-color { color: #ef4444; }
.icon-fb-color { color: #3b82f6; }
.icon-mp3-color { color: #38bdf8; }
.icon-reels-color { color: #f43f5e; }
.icon-shorts-color { color: #ef4444; }
.icon-photo-color { color: #a855f7; }
/* Brand colours for the newer platforms, matching their .support-icon gradients. */
.icon-reddit-color { color: #ff4500; }
.icon-pinterest-color { color: #e60023; }
.icon-dailymotion-color { color: #0066dc; }

/* ==========================================================================
   Downloader Input Box (Mobile-Perfect, Zero Blowout)
   ========================================================================== */
.downloader-box {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 26px;
  background: #0e1524;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-lg);
  padding: 6px;
  box-shadow: var(--shadow-ambient);
  box-sizing: border-box;
}

.downloader-form {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.input-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  padding: 4px 6px 4px 12px;
  min-width: 0;
  min-height: 46px;
  box-sizing: border-box;
  transition: border-color 0.18s var(--ease-smooth);
}

.input-container:focus-within {
  border-color: var(--border-focus);
}

.input-icon {
  font-size: 1.1rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.url-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-white);
  font-size: 16px; /* Prevents auto-zoom on iOS */
  font-family: var(--font-text);
  outline: none;
  padding: 8px 0;
  min-width: 0;
}

.url-input::placeholder {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.btn-paste {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-white);
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-paste:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: var(--border-focus);
}

.btn-download-primary {
  width: auto;
  flex-shrink: 0;
  background: var(--primary-gradient);
  border: none;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  min-height: 46px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-download-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
  filter: brightness(1.07);
}

/* AdSense Responsive Slot Container (CLS-Safe) */
.ad-slot-wrapper {
  width: 100%;
  max-width: 728px;
  min-height: 90px;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .ad-slot-wrapper {
    min-height: 250px;
  }
}

/* Status / Alerts */
.status-container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 20px;
  box-sizing: border-box;
}

.loading-state {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  padding: 14px;
  border-radius: var(--r-md);
  color: var(--text-white);
  font-size: 0.86rem;
  font-weight: 600;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}

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

.error-alert {
  display: none;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 0.86rem;
  text-align: left;
}

/* Platform Showcase Cards */
.platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 24px 0 40px;
}

.platform-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-lg);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s var(--ease-smooth), background 0.18s var(--ease-smooth),
    transform 0.18s var(--ease-smooth);
}

.platform-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-glass-hover);
  transform: translateY(-2px);
}

.platform-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.platform-badge-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  flex-shrink: 0;
}

.badge-insta { background: var(--insta-gradient); }
.badge-yt { background: var(--yt-gradient); }
.badge-fb { background: var(--fb-gradient); }

.platform-card h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--text-white);
}

.platform-card p {
  color: var(--text-sub);
  font-size: 0.86rem;
  margin-bottom: 14px;
  line-height: 1.5;
}

.platform-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}

.platform-mini-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-sub);
}

/* Footer */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-glass);
  background: rgba(7, 9, 14, 0.92);
  padding: 36px 0 20px;
  width: 100%;
}

.footer-grid {
  display: grid;
  /* brand + Instagram + YouTube + Facebook + Legal */
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

/* Five columns get cramped on small laptops and tablets, so fold to a 3-up grid
   before the mobile rule further down takes over at 768px. */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* The 404 page reuses this grid for its three tool columns only, so it must not
   inherit the five-column track list (that left two empty columns behind). */
.footer-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.footer-col h4 {
  font-family: var(--font-display);
  color: var(--text-white);
  font-size: 0.92rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 6px;
}

.footer-links a,
.footer-links a:link,
.footer-links a:visited {
  color: var(--text-sub) !important;
  text-decoration: none;
  font-size: 0.84rem;
}

.footer-links a:hover {
  color: #ffffff !important;
}

.footer-bottom {
  border-top: 1px solid var(--border-glass);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  gap: 10px;
}

/* ==========================================================================
   PREMIUM MOBILE APP & SAAS RESPONSIVE DESIGN SYSTEM (320px – 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }

  /* Compact Native-Feel Glass Header */
  .site-header {
    background: rgba(7, 9, 14, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .header-inner {
    height: 54px;
    padding: 0 4px;
  }

  .brand-logo {
    font-size: 1.12rem;
    gap: 8px;
  }

  .logo-badge {
    width: 28px;
    height: 28px;
    font-size: 0.88rem;
    border-radius: 7px;
  }

  .site-header .nav-links {
    display: none;
  }

  .mobile-home-icon-btn {
    display: inline-flex;
    padding: 5px 12px;
    font-size: 0.78rem;
    border-radius: var(--r-pill);
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8 !important;
    font-weight: 700;
  }

  .btn-header-install {
    display: inline-flex !important;
    padding: 5px 11px;
    font-size: 0.75rem;
    gap: 4px;
  }

  /* Hero Section */
  .hero-section {
    padding: 20px 0 16px;
    text-align: center;
  }

  .hero-badge {
    font-size: 0.72rem;
    padding: 4px 12px;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--r-pill);
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.28);
    color: #38bdf8;
    font-weight: 700;
  }

  .hero-title {
    font-size: clamp(1.5rem, 6.2vw, 2.1rem);
    line-height: 1.22;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    font-weight: 900;
  }

  .hero-subtitle {
    font-size: 0.88rem;
    line-height: 1.45;
    margin-bottom: 16px;
    color: var(--text-sub);
    padding: 0 4px;
  }

  /* Tool Tabs Pills (Horizontal Smooth Scrollable Row) */
  .tool-tabs-wrapper {
    margin-bottom: 18px;
    padding: 2px 0 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    display: block;
    width: 100%;
  }

  .tool-tabs-wrapper::-webkit-scrollbar {
    display: none;
  }

  .tool-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 0 4px;
    width: max-content;
  }

  .tool-tab {
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: var(--r-pill);
    background: rgba(16, 23, 38, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-sub) !important;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .tool-tab.active {
    background: rgba(37, 99, 235, 0.25);
    border-color: #38bdf8;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
  }

  /* Downloader Input Box on Mobile (Spacious, Touch-Friendly, High-Convert) */
  .downloader-box {
    padding: 8px;
    border-radius: 14px;
    background: #0e1524;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.85), 0 0 18px rgba(37, 99, 235, 0.15);
    margin-bottom: 24px;
  }

  .downloader-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .input-container {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 4px 6px 4px 12px;
    min-height: 48px;
    width: 100%;
    box-sizing: border-box;
  }

  .url-input {
    font-size: 16px !important; /* Prevents auto-zoom on iOS */
    padding: 10px 0;
    min-width: 0;
    flex: 1;
    color: #ffffff;
  }

  .url-input::placeholder {
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  .btn-paste {
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 7px;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.32);
    color: #38bdf8;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  .btn-download-primary {
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 0.96rem;
    font-weight: 800;
    border-radius: 10px;
    background: var(--primary-gradient);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.45);
    cursor: pointer;
    box-sizing: border-box;
  }

  .btn-download-primary:active {
    transform: scale(0.98);
  }

  /* Supported Platforms Cards */
  .support-links-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .support-card {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .support-text {
    flex: 1;
    min-width: 0;
  }

  .support-name {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-main);
    display: block;
    margin-bottom: 2px;
  }

  .support-desc {
    font-size: 0.78rem;
    color: var(--text-sub);
    line-height: 1.4;
    display: block;
  }

  .support-arrow {
    flex-shrink: 0;
    color: #38bdf8;
    font-size: 1.1rem;
    margin-left: auto;
  }

  /* Guides Cards */
  .platforms-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 20px 0 32px;
  }

  .platform-card {
    padding: 16px;
    border-radius: 12px;
  }

  /* Footer */
  .site-footer {
    padding: 32px 0 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
  }

  .footer-col:first-child {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding-top: 14px;
    font-size: 0.76rem;
  }
}