/* ══════════════════════════════════════════════════════
   yt-style.css — YouTube App Link Generator Theme
   Fixed: logo visibility, input alignment, responsive
══════════════════════════════════════════════════════ */
:root {
  --yt-red:       #CC0000;
  --yt-red-dark:  #990000;
  --yt-red-light: #FF0000;
  --yt-dark:      #0f0f0f;
  --yt-dark2:     #181818;
  --yt-dark3:     #212121;
  --yt-dark4:     #2d2d2d;
  --yt-text:      #f1f1f1;
  --yt-muted:     #aaaaaa;
  --yt-border:    rgba(255,255,255,.1);
}

.yt-page { background: var(--yt-dark); min-height: 100vh; }

/* ── Navbar — Bootstrap override for dark theme ── */
.yt-navbar {
  background: rgba(12,12,12,.97) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: .65rem 0;
}
/* Nav links */
.yt-nl {
  color: var(--yt-muted) !important;
  font-size: .87rem;
  font-weight: 500;
  padding: .35rem .7rem !important;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.yt-nl:hover,
.yt-nl.active {
  color: var(--yt-text) !important;
  background: var(--yt-dark3) !important;
}
/* CTA button in navbar */
.yt-nav-btn {
  background: var(--yt-red) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  font-size: .84rem;
  border-radius: 7px !important;
  transition: background .15s !important;
}
.yt-nav-btn:hover { background: var(--yt-red-dark) !important; color: #fff !important; }
/* Hamburger toggler — white lines on dark bg */
.yt-toggler {
  border: 1px solid rgba(255,255,255,.25) !important;
  padding: .3rem .5rem !important;
  border-radius: 6px;
}
.yt-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.yt-toggler:focus { box-shadow: 0 0 0 3px rgba(204,0,0,.3) !important; outline: none !important; }
/* Mobile collapse menu bg */
@media (max-width: 991px) {
  #ytNavMenu {
    background: var(--yt-dark2);
    border: 1px solid var(--yt-border);
    border-radius: 10px;
    padding: .65rem .75rem;
    margin-top: .5rem;
  }
  .yt-nl { padding: .55rem .75rem !important; display: block; }
  .navbar-nav { gap: .15rem; }
  .yt-nav-btn { margin-top: .35rem; display: inline-flex; }
}

/* ── Hero ── */
.yt-hero {
  background: var(--yt-dark);
  padding: 4rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}
.yt-hero::before {
  content: '';
  position: absolute; top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 350px;
  background: radial-gradient(ellipse, rgba(204,0,0,.15) 0%, transparent 70%);
  pointer-events: none;
}
.yt-badge {
  display: inline-flex;
  align-items: center; gap: .45rem;
  background: rgba(204,0,0,.12);
  border: 1px solid rgba(204,0,0,.3);
  color: #ff6b6b;
  font-size: .77rem; font-weight: 600;
  letter-spacing: .04em;
  padding: .28rem .85rem;
  border-radius: 50px;
  margin-bottom: .8rem;
}
.yt-title {
  font-size: clamp(1.85rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--yt-text);
  line-height: 1.18;
  margin-bottom: .8rem;
  letter-spacing: -.5px;
}
.yt-accent { color: var(--yt-red-light); }
.yt-sub {
  color: var(--yt-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Tool Card ── */
.yt-tool-card {
  background: var(--yt-dark3);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 1.4rem;
  text-align: left;
}

/* ── FIX: Input group — proper flex, no overflow issues ── */
.yt-input-group {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  transition: border-color .15s;
  margin-bottom: .6rem;
}
.yt-input-group:focus-within {
  border-color: var(--yt-red);
}
/* FIX: YouTube icon — centered, correct color, no white bleed */
.yt-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .85rem 0 1rem;
  background: #ffffff;
  flex-shrink: 0;
  color: #FF0000;
  min-width: 44px;
}
.yt-input-icon svg {
  display: block;
  flex-shrink: 0;
}
.yt-input {
  flex: 1;
  min-width: 0;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: .93rem;
  padding: .75rem .5rem .75rem 0;
  line-height: 1.4;
}
.yt-input::placeholder { color: #9ca3af; }
.yt-btn-generate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--yt-red);
  color: #fff;
  border: none;
  padding: 0 1.3rem;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
  border-radius: 0 8px 8px 0;
  font-family: inherit;
  min-height: 48px;
}
.yt-btn-generate:hover { background: var(--yt-red-dark); }
.yt-btn-generate:disabled { opacity: .7; cursor: not-allowed; }

/* Custom code row */
.yt-custom-row {
  display: flex;
  align-items: center;
  background: var(--yt-dark4);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: .4rem;
}
.yt-custom-prefix {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(170,170,170,.7);
  padding: 0 .6rem;
  border-right: 1px solid rgba(255,255,255,.1);
  height: 42px;
  display: flex;
  align-items: center;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  flex-shrink: 0;
}
.yt-custom-input {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  color: var(--yt-text) !important;
  font-family: 'Courier New', monospace;
  font-size: .84rem;
  height: 42px;
  padding: 0 .6rem;
  outline: none !important;
  box-shadow: none !important;
}
.yt-custom-input::placeholder { color: rgba(255,255,255,.2); font-size:.82rem; }
.yt-code-hint { font-size: .72rem; padding: 0 .6rem; white-space: nowrap; flex-shrink: 0; }
.yt-hint-ok    { color: #4ade80; }
.yt-hint-err   { color: #f87171; }
.yt-hint-check { color: var(--yt-muted); }
.yt-field-note { font-size: .71rem; color: rgba(170,170,170,.4); margin: .35rem 0 0; }
.yt-error-msg  { color: #f87171; font-size: .82rem; margin: .5rem 0 0; display: flex; align-items: center; gap: .35rem; }

/* ── Result ── */
@keyframes ytFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.yt-result { animation: ytFadeUp .3s ease both; }
.yt-result-status {
  display: flex; align-items: center; justify-content: center;
  gap: .45rem;
  color: #4ade80;
  font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .85rem;
}
.yt-custom-badge {
  background: rgba(204,0,0,.2);
  border: 1px solid rgba(204,0,0,.4);
  color: #ff6b6b;
  font-size: .68rem; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
}
.yt-result-card {
  display: flex; align-items: stretch;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  margin-bottom: .65rem;
}
.yt-result-card-left {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: .55rem;
  padding: .8rem .9rem;
}
.yt-result-link {
  font-family: 'Courier New', monospace;
  font-size: .9rem; font-weight: 700;
  color: #0f0f0f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  user-select: all; cursor: text; display: block; width: 100%;
}
.yt-copy-btn {
  display: flex; align-items: center; gap: .4rem;
  background: var(--yt-red); color: #fff;
  border: none;
  padding: 0 1rem;
  font-size: .86rem; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  font-family: inherit;
  flex-shrink: 0;
}
.yt-copy-btn:hover { background: var(--yt-red-dark); }
.yt-copy-btn.yt-copied { background: #16a34a; }

.yt-result-actions { display: flex; gap: .5rem; margin-bottom: .6rem; }
.yt-action-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem .5rem;
  border-radius: 8px;
  font-size: .84rem; font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.yt-btn-test { color: var(--yt-text); border: 1px solid rgba(255,255,255,.3); background: transparent; }
.yt-btn-test:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.yt-btn-new  { color: var(--yt-muted); border: 1px solid var(--yt-border); background: rgba(255,255,255,.05); }
.yt-btn-new:hover  { background: rgba(255,255,255,.1); color: var(--yt-text); text-decoration: none; }
.yt-tip-box {
  background: rgba(204,0,0,.08);
  border: 1px solid rgba(204,0,0,.2);
  border-radius: 8px;
  padding: .6rem .85rem;
  font-size: .77rem;
  color: #ffaaaa;
  display: flex; gap: .45rem; align-items: flex-start;
  line-height: 1.5;
}
.yt-tool-note { color: rgba(170,170,170,.38); font-size: .77rem; margin-top: .7rem; }

/* ── Sections ── */
.yt-section-dark { background: var(--yt-dark); }
.yt-section-mid  { background: var(--yt-dark2); }
.yt-section-title {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 800;
  color: var(--yt-text);
  margin-bottom: .5rem;
  letter-spacing: -.3px;
}
.yt-section-sub { color: var(--yt-muted); font-size: .97rem; }
.yt-body-text   { font-size: 1rem; color: var(--yt-muted); line-height: 1.8; margin-bottom: 1.1rem; }

/* ── Step cards ── */
.yt-step-card {
  background: var(--yt-dark3);
  border: 1px solid var(--yt-border);
  border-radius: 14px;
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
  position: relative;
  height: 100%;
  transition: border-color .2s;
}
.yt-step-card:hover { border-color: rgba(204,0,0,.4); }
.yt-step-num {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px;
  background: var(--yt-red); color: #fff;
  font-size: .77rem; font-weight: 700;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.yt-step-icon { color: var(--yt-red); margin-bottom: .7rem; }
.yt-step-title { font-size: .97rem; font-weight: 700; color: var(--yt-text); margin-bottom: .4rem; }
.yt-step-desc  { font-size: .85rem; color: var(--yt-muted); margin: 0; line-height: 1.6; }

/* ── Feature cards ── */
.yt-feature-card {
  background: var(--yt-dark3);
  border: 1px solid var(--yt-border);
  border-radius: 12px;
  padding: 1.3rem;
  height: 100%;
  transition: border-color .2s;
}
.yt-feature-card:hover { border-color: rgba(204,0,0,.35); }
.yt-feature-dot { width: 8px; height: 8px; background: var(--yt-red); border-radius: 50%; margin-bottom: .6rem; }
.yt-feature-title { font-size: .92rem; font-weight: 700; color: var(--yt-text); margin-bottom: .3rem; }
.yt-feature-desc  { font-size: .83rem; color: var(--yt-muted); margin: 0; line-height: 1.6; }

/* ── FAQ ── */
.yt-faq-item { border-bottom: 1px solid var(--yt-border); }
.yt-faq-item:last-child { border-bottom: none; }
.yt-faq-btn {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--yt-text);
  font-size: .93rem; font-weight: 600;
  padding: 1rem 0;
  text-align: left;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  font-family: inherit;
  line-height: 1.4;
}
.yt-faq-btn.yt-faq-open { color: #ff6b6b; }
.yt-faq-arrow { flex-shrink: 0; transition: transform .2s; color: var(--yt-muted); }
.yt-faq-body { font-size: .9rem; color: var(--yt-muted); line-height: 1.75; padding: 0 0 1rem; }

/* ── Blog cards ── */
.yt-blog-card {
  background: var(--yt-dark3);
  border: 1px solid var(--yt-border);
  border-radius: 12px;
  padding: 1.3rem;
  height: 100%;
  transition: border-color .2s;
}
.yt-blog-card:hover { border-color: rgba(204,0,0,.35); }
.yt-blog-tag   { font-size: .71rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--yt-red); margin-bottom: .4rem; }
.yt-blog-title { font-size: .95rem; font-weight: 700; color: var(--yt-text); margin-bottom: .4rem; line-height: 1.35; }
.yt-blog-title a { color: var(--yt-text); text-decoration: none; }
.yt-blog-title a:hover { color: #ff6b6b; }
.yt-blog-desc  { font-size: .83rem; color: var(--yt-muted); margin-bottom: .7rem; line-height: 1.6; }
.yt-blog-read  { font-size: .81rem; font-weight: 600; color: var(--yt-red); text-decoration: none; }
.yt-blog-read:hover { color: #ff6b6b; }

/* ── CTA ── */
.yt-cta-section { background: var(--yt-dark); }
.yt-cta-title { font-size: clamp(1.6rem,3.5vw,2rem); font-weight: 800; color: var(--yt-text); margin-bottom: .5rem; }
.yt-cta-sub   { color: var(--yt-muted); font-size: 1rem; margin-bottom: 1.4rem; }
.yt-cta-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--yt-red); color: #fff;
  font-size: .97rem; font-weight: 700;
  padding: .8rem 2rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.yt-cta-btn:hover { background: var(--yt-red-dark); color: #fff; transform: translateY(-2px); text-decoration: none; }
.yt-outline-btn {
  display: inline-flex; align-items: center;
  background: transparent;
  color: var(--yt-red);
  border: 1.5px solid var(--yt-red);
  font-size: .88rem; font-weight: 600;
  padding: .6rem 1.6rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.yt-outline-btn:hover { background: var(--yt-red); color: #fff; text-decoration: none; }

/* ── Footer ── */
.yt-footer {
  background: #080808;
  border-top: 1px solid var(--yt-border);
  padding: 2.25rem 0;
}
.yt-footer-brand  { display: block; margin-bottom: .35rem; }
.yt-footer-tagline{ font-size: .81rem; color: rgba(170,170,170,.45); margin: 0; }
.yt-footer-nav    { display: flex; gap: 1rem; flex-wrap: wrap; }
.yt-footer-nav a  { color: rgba(170,170,170,.55); font-size: .84rem; text-decoration: none; transition: color .15s; }
.yt-footer-nav a:hover { color: var(--yt-text); }
.yt-footer-copy   { font-size: .8rem; color: rgba(170,170,170,.35); margin: 0; }

/* ── Ad slot ── */
.yt-ad-slot { background: var(--yt-dark4); border-radius: 8px; min-height: 90px; overflow: hidden; }

/* ── Article blog styles ── */
.yt-article-hero  { background: var(--yt-dark); padding: 3.25rem 0 2.75rem; }
.yt-article-badge { display:inline-block; background:rgba(204,0,0,.12); border:1px solid rgba(204,0,0,.28); color:#ff6b6b; border-radius:50px; font-size:.74rem; font-weight:600; padding:.28rem .85rem; margin-bottom:.65rem; letter-spacing:.04em; }
.yt-article-title { font-size:clamp(1.7rem,4vw,2.6rem); font-weight:800; color:var(--yt-text); line-height:1.2; margin-bottom:.65rem; }
.yt-article-meta  { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.yt-article-meta span { font-size:.79rem; color:var(--yt-muted); }
.yt-article-body  { padding:2.25rem 0 3rem; background:var(--yt-dark); }
.yt-article-content { max-width:760px; }
.yt-article-content h2 { font-size:1.42rem; font-weight:700; color:var(--yt-text); margin:2.5rem 0 .75rem; padding-bottom:.4rem; border-bottom:2px solid rgba(204,0,0,.25); }
.yt-article-content h3 { font-size:1.08rem; font-weight:700; color:var(--yt-text); margin:1.75rem 0 .5rem; }
.yt-article-content p  { font-size:1rem; color:var(--yt-muted); line-height:1.85; margin-bottom:1.05rem; }
.yt-article-content ul,.yt-article-content ol { color:var(--yt-muted); font-size:1rem; line-height:1.85; padding-left:1.5rem; margin-bottom:1.05rem; }
.yt-article-content li { margin-bottom:.4rem; }
.yt-article-content a  { color:var(--yt-red); }
.yt-article-content strong { color:var(--yt-text); font-weight:600; }
.yt-article-content code { background:rgba(255,255,255,.08); padding:2px 6px; border-radius:4px; font-size:.88em; color:#f1f1f1; }
.yt-article-content table { width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.91rem; }
.yt-article-content table th { background:rgba(204,0,0,.18); color:var(--yt-text); padding:.6rem .85rem; font-weight:600; text-align:left; border:1px solid rgba(204,0,0,.25); }
.yt-article-content table td { padding:.58rem .85rem; border:1px solid var(--yt-border); color:var(--yt-muted); }
.yt-article-content table tr:nth-child(even) td { background:var(--yt-dark3); }
.yt-callout { background:rgba(204,0,0,.08); border-left:4px solid var(--yt-red); border-radius:0 8px 8px 0; padding:.9rem 1.2rem; margin:1.5rem 0; }
.yt-callout p { margin:0; color:#ffcccc; font-size:.92rem; }
.yt-step-list { list-style:none; padding:0; counter-reset:yt-steps; }
.yt-step-list li { counter-increment:yt-steps; display:flex; gap:1rem; margin-bottom:1.05rem; align-items:flex-start; color:var(--yt-muted); font-size:1rem; line-height:1.7; }
.yt-step-list li::before { content:counter(yt-steps); display:flex; align-items:center; justify-content:center; width:27px; height:27px; background:var(--yt-red); color:#fff; border-radius:50%; font-weight:700; font-size:.78rem; flex-shrink:0; margin-top:.18rem; }
.yt-toc { background:var(--yt-dark3); border:1px solid var(--yt-border); border-radius:10px; padding:1.2rem 1.4rem; margin-bottom:1.9rem; }
.yt-toc-title { font-size:.81rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--yt-muted); margin-bottom:.6rem; }
.yt-toc ol { margin:0; padding-left:1.2rem; }
.yt-toc li { font-size:.87rem; line-height:1.7; }
.yt-toc a { color:var(--yt-red); text-decoration:none; }
.yt-toc a:hover { color:#ff6b6b; }
.yt-author-box { display:flex; gap:1rem; align-items:flex-start; background:var(--yt-dark3); border:1px solid var(--yt-border); border-left:3px solid var(--yt-red); border-radius:10px; padding:1.3rem; margin:2.25rem 0 1.25rem; }
.yt-author-avatar { width:56px; height:56px; background:rgba(204,0,0,.12); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.yt-author-name { font-size:.95rem; font-weight:700; color:var(--yt-text); margin-bottom:2px; }
.yt-author-role { font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--yt-red); margin-bottom:.5rem; }
.yt-author-bio  { font-size:.85rem; color:var(--yt-muted); line-height:1.7; margin-bottom:.45rem; }
.yt-author-links { font-size:.79rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.yt-author-links a { color:var(--yt-red); font-weight:500; text-decoration:none; }
.yt-article-cta { background:rgba(204,0,0,.1); border:1px solid rgba(204,0,0,.28); border-radius:12px; padding:1.2rem 1.4rem; margin:2.25rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.yt-article-cta-text { font-size:.91rem; color:#ffaaaa; flex:1; }
.yt-article-cta-text strong { color:var(--yt-text); }
.yt-article-cta-btn { display:flex; align-items:center; gap:.4rem; background:var(--yt-red); color:#fff; padding:.58rem 1.25rem; border-radius:8px; font-size:.86rem; font-weight:700; text-decoration:none; white-space:nowrap; transition:background .15s; flex-shrink:0; }
.yt-article-cta-btn:hover { background:var(--yt-red-dark); color:#fff; text-decoration:none; }
.yt-breadcrumb { font-size:.79rem; display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.8rem; align-items:center; }
.yt-breadcrumb a { color:rgba(204,0,0,.65); text-decoration:none; }
.yt-breadcrumb a:hover { color:var(--yt-red); }
.yt-breadcrumb span { color:var(--yt-muted); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .yt-nav-inner { flex-wrap: wrap; }
  .yt-nav-links { gap: .05rem; }
  .yt-nav-links a { font-size: .8rem; padding: .28rem .5rem; }
}

@media (max-width: 576px) {
  .yt-hero { padding: 2.5rem 0 2rem; }
  .yt-tool-card { padding: 1rem; border-radius: 12px; }

  /* Mobile: stack input group vertically */
  .yt-input-group {
    flex-direction: column;
    border-radius: 10px;
    overflow: visible;
    background: transparent;
    border: none;
    gap: .5rem;
  }
  .yt-input-group:focus-within { border: none; }
  .yt-input-icon {
    display: none; /* hide icon on mobile — saves space */
  }
  .yt-input {
    width: 100%;
    border-radius: 8px !important;
    padding: .75rem 1rem !important;
    border: 2px solid #e5e7eb !important;
    font-size: .95rem;
  }
  .yt-input:focus {
    border-color: var(--yt-red) !important;
    outline: none !important;
  }
  .yt-btn-generate {
    width: 100%;
    border-radius: 8px !important;
    padding: .8rem 1rem;
    min-height: 48px;
    font-size: .95rem;
  }

  /* Mobile result card */
  .yt-result-card { flex-direction: column; }
  .yt-result-card-left { padding: .75rem; }
  .yt-copy-btn {
    padding: .65rem;
    justify-content: center;
    border-radius: 0 0 10px 10px;
  }

  /* Custom code row mobile */
  .yt-custom-prefix { font-size: .73rem; padding: 0 .5rem; }
  .yt-result-actions { flex-direction: column; }

  /* Section adjustments */
  .yt-section-title { font-size: 1.4rem; }
  .yt-step-card { padding: 1.75rem 1.25rem 1.25rem; }
  .yt-feature-card { padding: 1.1rem; }
  .yt-article-cta { flex-direction: column; align-items: flex-start; }
  .yt-author-box { flex-direction: column; gap: .75rem; }
  .yt-footer { text-align: center; }
  .yt-footer-nav { justify-content: center; }
  .yt-footer-copy { margin-top: .5rem; }
}

@media (max-width: 400px) {
  .yt-nav-links a { font-size: .75rem; padding: .25rem .4rem; }
  .yt-title { font-size: 1.65rem; }
}