/* Media Download Result Card (Reference Layout Match) */
.media-result-container {
  display: none;
  width: 100%;
  max-width: 880px;
  margin: 25px auto 40px;
  background: var(--bg-card, #0f172a);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-ambient);
  box-sizing: border-box;
  text-align: left;
  animation: slideUpFade 0.35s ease;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.ref-result-card {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 24px;
  align-items: start;
}

/* Left Column: Thumbnail + Title */
.ref-col-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ref-thumb-box {
  width: 100%;
  max-height: 200px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #020617;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ref-thumb-box img {
  width: 100%;
  height: 100%;
  max-height: 200px;
  object-fit: cover;
  display: block;
}

/* Shown when the source platform gives us no thumbnail (e.g. some Facebook videos) */
.ref-thumb-placeholder {
  width: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  opacity: 0.35;
}

.ref-media-title {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
  color: #f8fafc;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Right Column: Tabs + Table */
.ref-col-right {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.6);
}

/* Tabs Header */
.ref-tabs-header {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ref-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.ref-tab-btn:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.02);
}

.ref-tab-btn.active {
  color: #ec4899;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 3px solid #ec4899;
}

.ref-tab-btn[data-tab="video"].active {
  color: #38bdf8;
  border-bottom-color: #38bdf8;
}

.ref-tab-btn[data-tab="other"].active {
  color: #eab308;
  border-bottom-color: #eab308;
}

/* Tab Panels */
.ref-tab-panels {
  width: 100%;
}

.ref-panel {
  display: none;
  width: 100%;
}

.ref-panel.active {
  display: block;
}

/* Table Design matching Reference Screenshot */
.ref-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.ref-table th {
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.ref-table-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s ease;
}

.ref-table-row:last-child {
  border-bottom: none;
}

.ref-table-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.ref-table td {
  padding: 14px 16px;
  font-size: 0.88rem;
  color: #f1f5f9;
  vertical-align: middle;
}

.col-filetype {
  font-weight: 600;
  color: #f8fafc;
}

.col-format {
  color: #94a3b8;
  font-size: 0.82rem;
}

.col-action {
  text-align: right;
  width: 130px;
}

/* Bright Solid Green Download Button */
.btn-ref-download,
.btn-ref-download:link,
.btn-ref-download:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #22c55e !important;
  color: #ffffff !important;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 0.84rem;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.35);
  white-space: nowrap;
}

.btn-ref-download:hover {
  background: #16a34a !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.5);
}

/* Mobile Responsive Result Card & Tables */
@media (max-width: 720px) {
  .media-result-container {
    padding: 14px;
    margin: 16px auto 30px;
    border-radius: 14px;
  }

  .ref-result-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  
  .ref-thumb-box {
    max-width: 100%;
    max-height: 180px;
    border-radius: 10px;
  }

  .ref-media-title {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .ref-tab-btn {
    padding: 10px 8px;
    font-size: 0.82rem;
  }

  .ref-table th {
    padding: 8px 10px;
    font-size: 0.76rem;
  }

  .ref-table td {
    padding: 10px 10px;
    font-size: 0.82rem;
  }

  .col-action {
    width: auto;
    text-align: right;
  }

  .btn-ref-download {
    padding: 7px 12px;
    font-size: 0.78rem;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.4);
  }

  .btn-ref-download:active {
    transform: scale(0.96);
  }

  /* Steps and Features Grid on Mobile */
  .steps-section, .features-section, .faq-section {
    padding: 32px 0;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

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

  .features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .feature-item {
    padding: 18px 16px;
    border-radius: 12px;
  }

  .faq-question {
    padding: 14px 16px;
    font-size: 0.9rem;
  }

  .faq-answer {
    padding: 0 16px 14px;
    font-size: 0.85rem;
  }
}

/* Feature Steps Section */
.steps-section {
  padding: 50px 0;
  border-top: 1px solid var(--border-glass);
  width: 100%;
}

.section-header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 32px;
  padding: 0 8px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  color: var(--text-white);
  word-break: break-word;
}

.section-subtitle {
  color: var(--text-sub);
  font-size: 0.92rem;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  padding: 20px 18px;
  border-radius: var(--r-lg);
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.step-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.step-number {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  color: #38bdf8;
  line-height: 1;
}

.step-tag {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.step-mockup {
  width: 100%;
  height: 130px;
  background: #080d1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  margin-bottom: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}

.step-card h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--text-white);
}

.step-card p {
  color: var(--text-sub);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Features Grid */
.features-section {
  padding: 50px 0;
  width: 100%;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
}

.feature-item {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  padding: 22px;
  border-radius: var(--r-lg);
  box-sizing: border-box;
}

.feature-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 14px;
}

.feature-item h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text-white);
}

.feature-item p {
  color: var(--text-sub);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* FAQ Accordion Component */
.faq-section {
  padding: 50px 0;
  border-top: 1px solid var(--border-glass);
  width: 100%;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-md);
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.faq-item[open] {
  border-color: var(--border-focus);
}

.faq-question {
  padding: 16px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  color: var(--text-white);
  box-sizing: border-box;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: 10px;
}

.faq-item[open] .faq-question::after {
  content: "−";
  color: #38bdf8;
}

.faq-answer {
  padding: 0 20px 18px;
  color: var(--text-sub);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Ecosystem Banner */
.ecosystem-banner {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(6, 182, 212, 0.1) 100%);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  margin: 40px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
}

.banner-content h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: 6px;
  color: var(--text-white);
}

.banner-content p {
  color: var(--text-sub);
  font-size: 0.9rem;
}

.btn-ecosystem {
  background: var(--bg-elevated);
  border: 1px solid var(--border-glass-hover);
  color: var(--text-white) !important;
  padding: 12px 24px;
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Retention Modal */
.retention-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.retention-modal {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--r-lg);
  max-width: 400px;
  width: 100%;
  padding: 28px 20px;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
}

.modal-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--primary-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 16px;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--text-white);
}

.modal-desc {
  color: var(--text-sub);
  font-size: 0.88rem;
  margin-bottom: 22px;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-modal-install {
  background: var(--primary-gradient);
  border: none;
  color: #fff;
  padding: 12px;
  border-radius: var(--r-md);
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
}

.btn-modal-dismiss {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 6px;
}

/* Component Layout Parity across screens */
@media (max-width: 768px) {
  .media-result-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ecosystem-banner {
    flex-direction: column;
    text-align: center;
    padding: 22px 18px;
  }

  .btn-ecosystem {
    width: 100%;
    text-align: center;
  }
}

/* =========================================================
   LIVE CONVERSION PROGRESS MODAL & FLY ANIMATION
   ========================================================= */

.conversion-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 16px;
}

.conversion-overlay.active {
  opacity: 1;
  visibility: visible;
}

.conversion-modal-card {
  background: #0f172a;
  border: 1px solid #26344a;
  border-radius: var(--r-lg);
  max-width: 440px;
  width: 100%;
  padding: 28px 24px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.85);
  text-align: center;
  position: relative;
  transform: scale(0.92) translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.conversion-overlay.active .conversion-modal-card {
  transform: scale(1) translateY(0);
}

.conversion-header {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: #1e293b;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 22px;
}

.conversion-thumb {
  width: 54px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.conversion-info {
  flex: 1;
  min-width: 0;
}

.conversion-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 3px 0;
}

.conversion-meta {
  font-size: 0.74rem;
  color: #22c55e;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.conversion-badge {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
}

.conversion-circle-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 18px;
}

.conversion-circle-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.conversion-circle-bg {
  fill: none;
  stroke: #1e293b;
  stroke-width: 6;
}

.conversion-circle-progress {
  fill: none;
  stroke: #22c55e;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 251.2;
  stroke-dashoffset: 251.2;
  transition: stroke-dashoffset 0.2s ease;
}

.conversion-circle-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 800;
  color: #f8fafc;
  font-family: monospace;
}

.conversion-status-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 6px;
}

.conversion-status-sub {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-bottom: 20px;
  min-height: 1.2em;
}

.conversion-bar-container {
  width: 100%;
  height: 6px;
  background: #1e293b;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
}

.conversion-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #22c55e, #10b981, #06b6d4);
  border-radius: 999px;
  transition: width 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.conversion-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn-conversion-cancel {
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-conversion-cancel:hover {
  background: #1e293b;
  color: #f8fafc;
}

/* Failed download: the card shows the server's real error instead of a green 100%. */
.conversion-circle-progress.is-error {
  stroke: #ef4444;
}

.conversion-bar-fill.is-error {
  background: #ef4444;
}

/* =========================================================
   MINIMISED PROGRESS DOCK  (shown after "Hide")
   ---------------------------------------------------------
   "Hide" used to remove the only place progress was visible, and the browser's own
   download tray cannot fill that gap: the browser download does not start until the
   server has finished preparing the file, so during preparation there is nothing for
   the tray to show. This dock keeps the real percentage on screen after Hide. Clicking
   it restores the full card; the small x cancels the job.
   ========================================================= */

.conv-mini {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 290px;
  max-width: calc(100vw - 32px);
  padding: 10px 11px;
  background: #0f172a;
  border: 1px solid #26344a;
  border-radius: var(--r-md);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
}

.conv-mini.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Everything except the x reopens the full card, so it all shares the pointer. */
.conv-mini-open {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.conv-mini-ring {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.conv-mini-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.conv-mini-ring-bg {
  fill: none;
  stroke: #1e293b;
  stroke-width: 4;
}

.conv-mini-ring-fill {
  fill: none;
  stroke: #22c55e;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.2s ease;
}

.conv-mini-ring-fill.is-error {
  stroke: #ef4444;
}

.conv-mini-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 800;
  color: #f8fafc;
}

/* These three are <span>s inside the button, so they must be blockified by hand —
   text-overflow/ellipsis is ignored on an inline box, and a long media title would
   otherwise run straight out of the dock and underneath the cancel button. */
.conv-mini-body {
  display: block;
  flex: 1;
  min-width: 0;
}

.conv-mini-title {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.conv-mini-sub {
  display: block;
  font-size: 0.7rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-mini-cancel {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.conv-mini-cancel:hover {
  background: #1e293b;
  color: #f8fafc;
}

@media (max-width: 480px) {
  .conv-mini {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
}

/* =========================================================
   SUPPORTED PLATFORMS — LINK GRID
   ---------------------------------------------------------
   One card per tool that actually works today, so the grid doubles as the site's
   internal link hub. Kept deliberately flat and thin-bordered: on a dark background
   the thing that reads as "sharp" is edge contrast, not shadow.
   ========================================================= */

/* The section also carries .container, whose `padding: 0 16px` provides the page
   gutter. Only the vertical padding may be set here — a `padding` shorthand would win
   the cascade (components.css loads last, same specificity) and reset the side gutter
   to zero, which put the cards flush against the screen edge on phones. */
.support-section {
  padding-top: 46px;
  padding-bottom: 10px;
}

.support-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}

.support-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-lg);
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.support-card:hover {
  background: rgba(23, 34, 56, 0.9);
  border-color: rgba(34, 197, 94, 0.45);
  transform: translateY(-2px);
}

.support-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.support-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.support-icon.is-instagram { background: var(--insta-gradient); }
.support-icon.is-youtube { background: var(--yt-gradient); }
.support-icon.is-facebook { background: var(--fb-gradient); }
.support-icon.is-reddit { background: linear-gradient(135deg, #ff4500, #ff5722); }
.support-icon.is-pinterest { background: linear-gradient(135deg, #e60023, #ad081b); }
.support-icon.is-dailymotion { background: linear-gradient(135deg, #0066dc, #00d2f3); }

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

.support-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-white);
  margin-bottom: 2px;
}

.support-desc {
  display: block;
  font-size: 0.79rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.support-arrow {
  flex-shrink: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #22c55e;
  transition: transform 0.16s ease;
}

.support-card:hover .support-arrow {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .support-links-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 640px) {
  .support-links-grid { grid-template-columns: 1fr; gap: 10px; }
  .support-section { padding-top: 24px; padding-bottom: 6px; }
}

/* =========================================================
   FLOATING SHARE & MESSAGE BUTTONS
   ---------------------------------------------------------
   Built by js/share.js so all pages get the same pair. They share the bottom-right
   corner with the minimised download dock, so they hide themselves while a download
   is docked instead of stacking on top of it.
   ========================================================= */

.sk-fab-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9970;
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-end;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.sk-fab-stack.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
}

.sk-fab {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: #22c55e;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: 0 4px 12px -4px rgba(34, 197, 94, 0.7);
  transition: background 0.15s ease, transform 0.15s ease;
}

.sk-fab:hover {
  background: #16a34a;
  transform: translateY(-2px);
}

/* Label appears on hover on pointer devices; on touch the icons speak for themselves. */
.sk-fab-tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: #0f172a;
  border: 1px solid #26344a;
  color: #f8fafc;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

@media (hover: hover) {
  .sk-fab:hover .sk-fab-tip { opacity: 1; }
}

.sk-share-menu {
  width: 216px;
  background: #0f172a;
  border: 1px solid #26344a;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 18px 38px -12px rgba(0, 0, 0, 0.8);
}

.sk-share-menu[hidden] {
  display: none;
}

.sk-share-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: 9px;
}

.sk-share-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  padding: 0;
}

.sk-share-close:hover { color: #f8fafc; }

.sk-share-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 9px;
}

.sk-share-link {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #e2e8f0 !important;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sk-share-link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(34, 197, 94, 0.4);
}

.sk-share-copy {
  width: 100%;
  padding: 9px;
  border: none;
  border-radius: 8px;
  background: #22c55e;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.sk-share-copy:hover { background: #16a34a; }

.sk-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 14px);
  z-index: 9995;
  max-width: calc(100vw - 32px);
  background: #0f172a;
  border: 1px solid #26344a;
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.sk-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Y2Mate Style Flying Download Circle Icon - Snappy & Smooth Parabolic Arc */
.y2m-fly-circle {
  position: fixed;
  z-index: 999999;
  width: 48px;
  height: 48px;
  background: rgba(30, 41, 59, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45), 0 0 16px rgba(34, 197, 94, 0.4);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: y2mArcFlight 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.y2m-fly-circle svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

@keyframes y2mArcFlight {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.9;
  }
  35% {
    transform: translate(calc(var(--dest-x, 0px) * 0.4 - 50%), calc(var(--dest-y, 0px) * 0.2 - 50px - 50%)) scale(1.05);
    opacity: 1;
  }
  75% {
    transform: translate(calc(var(--dest-x, 0px) * 0.85 - 50%), calc(var(--dest-y, 0px) * 0.75 - 15px - 50%)) scale(0.8);
    opacity: 0.95;
  }
  100% {
    transform: translate(calc(var(--dest-x, 0px) - 50%), calc(var(--dest-y, 0px) - 50%)) scale(0.25);
    opacity: 0;
  }
}
/* Trust, legal and live-status pages */
.trust-main {
  padding: 56px 0 80px;
}

.trust-shell {
  max-width: 860px;
}

.trust-kicker {
  color: var(--text-blue);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.trust-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1.1;
  margin: 12px 0 18px;
}

.trust-lead {
  color: var(--text-sub);
  font-size: 1.05rem;
  max-width: 720px;
}

.trust-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(22px, 5vw, 34px);
  margin-top: 28px;
}

.trust-card h2,
.trust-card h3 {
  font-family: var(--font-display);
  margin: 26px 0 10px;
}

.trust-card h2:first-child,
.trust-card h3:first-child { margin-top: 0; }

.trust-card p,
.trust-card li { color: var(--text-sub); line-height: 1.75; }
.trust-card ul,
.trust-card ol { padding-left: 1.35rem; margin: 10px 0 18px; }
.trust-card a { color: var(--text-blue); font-weight: 700; }

.status-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.status-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.55);
}

.status-dot.is-online { background: #22c55e; box-shadow: 0 0 16px rgba(34, 197, 94, 0.55); }
.status-dot.is-degraded { background: #ef4444; box-shadow: 0 0 16px rgba(239, 68, 68, 0.55); }

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.status-service {
  background: var(--bg-input);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-md);
  padding: 16px;
}

.status-service strong { display: block; margin-bottom: 5px; }
.status-service span { color: var(--text-muted); font-size: 0.9rem; }

@media (max-width: 640px) {
  .status-grid { grid-template-columns: 1fr; }
}