.creative-hero {
text-align:center;
margin-top:40px
}

.creative-hero h1 {
font-size:32px
}

.badge {
background:#3b82f6;
color:#fff;
padding:4px 10px;
border-radius:6px;
font-size:12px;
margin-top:6px;
display:inline-block
}

.subtitle {
color:#666;
margin-top:10px;
font-size:14px
}

.generator-card {
max-width:850px;
margin:30px auto;
padding:24px;
background:#f3f4f6;
border-radius:12px
}

.form-section {
margin-bottom:22px
}

.form-section h4 {
color:#2563eb;
font-size:14px;
margin-bottom:10px
}

input,textarea,select {
width:100%;
padding:10px;
border-radius:6px;
border:1px solid #ccc
}

.generate-btn {
margin-top:12px;
background:#3b82f6;
color:#fff;
padding:10px 16px;
border-radius:6px;
border:none;
transition:.2s
}

.generate-btn:hover {
background:#2563eb;
transform:translateY(-1px)
}

.preview-box {
max-width:850px;
margin:30px auto;
padding:20px;
border:1px solid #c7d2fe;
border-radius:12px
}

.yt-card {
background:#fff;
border-radius:16px;
padding:20px;
margin-top:20px;
box-shadow:0 10px 30px #0000000f;
animation:fadeUp .4s ease
}

@keyframes fadeUp {
from {
opacity:0;
transform:translateY(10px)
}

to {
opacity:1;
transform:translateY(0)
}
}

.yt-header {
display:flex;
gap:14px;
align-items:center
}

.yt-logo {
width:50px
}

.yt-header h3 {
margin:0;
font-size:18px
}

.yt-header p {
font-size:13px;
color:#555
}

.yt-niche {
margin-top:6px;
display:inline-block;
background:#2563eb;
color:#fff;
font-size:11px;
padding:3px 8px;
border-radius:6px
}

.yt-stats {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
margin-top:20px
}

.yt-stat {
background:linear-gradient(135deg,#eef2ff,#f8fafc);
padding:12px;
border-radius:10px;
text-align:center;
transition:.2s
}

.yt-stat:hover {
transform:translateY(-2px);
box-shadow:0 6px 14px #00000014
}

.yt-stat strong {
display:block;
font-size:16px
}

.yt-stat span {
font-size:12px;
color:#666
}

.yt-insights {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:20px
}

.yt-insight {
background:linear-gradient(135deg,#f8fafc,#eef2ff);
padding:12px;
border-radius:10px;
text-align:center;
transition:.2s
}

.yt-insight:hover {
transform:translateY(-2px);
box-shadow:0 6px 14px #0000000f
}

.yt-insight strong {
display:block;
font-size:14px
}

.yt-insight span {
font-size:12px;
color:#666
}

.yt-performance {
margin-top:20px;
padding:14px;
background:linear-gradient(135deg,#ecfeff,#f0fdf4);
border-radius:12px;
font-weight:600;
text-align:center
}

.download {
display:flex;
justify-content:center;
gap:14px;
margin-top:20px
}

.download button {
background:#111;
color:#fff;
padding:10px 14px;
border-radius:6px;
border:none;
transition:.2s
}

.download button:hover {
background:#222;
transform:translateY(-1px)
}

.skeleton {
position:relative;
overflow:hidden;
background:#e5e7eb;
border-radius:8px
}

.skeleton::after {
content:"";
position:absolute;
top:0;
left:-150px;
height:100%;
width:150px;
background:linear-gradient(90deg,transparent,#fff9,transparent);
animation:shimmer 1.2s infinite
}

@keyframes shimmer {
100% {
transform:translateX(300px)
}
}

.skeleton-line {
height:12px;
margin-bottom:8px
}

.skeleton-title {
height:16px;
width:40%;
margin-bottom:10px
}

.skeleton-avatar {
width:50px;
height:50px;
border-radius:50%
}

@media (max-width:768px) {
.yt-stats {
grid-template-columns:repeat(2,1fr)
}

.yt-insights {
grid-template-columns:repeat(2,1fr)
}

.yt-logo {
width:42px
}

.yt-card {
padding:16px
}
}

.yt-card {
border:1px solid #e5e7eb;
box-shadow:0 20px 40px #0000000f
}

.yt-header {
align-items:flex-start
}

.yt-logo {
border-radius:10px
}

.yt-niche {
background:#2563eb1a;
color:#2563eb;
font-weight:600
}

.yt-stat {
background:#f9fafb;
border:1px solid #e5e7eb
}

.yt-stat strong {
color:#111827
}

.yt-insight {
background:#fff;
border:1px solid #e5e7eb
}

.yt-insight strong {
color:#111827
}

.yt-performance {
border:1px solid #d1fae5;
font-size:14px
}

.download button {
background:#fff;
color:#111;
border:1px solid #e5e7eb;
font-weight:500
}

.download button:hover {
border-color:#2563eb;
color:#2563eb;
background:#f8fafc
}

.loader {
display:flex;
justify-content:center;
padding:40px
}

.spinner {
width:36px;
height:36px;
border:3px solid #e5e7eb;
border-top:3px solid #2563eb;
border-radius:50%;
animation:spin .7s linear infinite
}

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

.skeleton {
background:#e5e7eb
}

.skeleton::after {
background:linear-gradient(90deg,transparent,#ffffffb3,transparent)
}

.yt-stat:hover,.yt-insight:hover {
transform:translateY(-2px);
transition:.2s
}

.yt-score {
text-align:center;
margin-top:20px
}

.score-circle {
width:80px;
height:80px;
border-radius:50%;
border:6px solid #e5e7eb;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:700;
margin:auto
}

.bar {
margin-top:12px
}

.bar-top {
display:flex;
justify-content:space-between;
font-size:12px
}

.bar-bg {
background:#e5e7eb;
height:8px;
border-radius:6px
}

.bar-fill {
background:#4f46e5;
height:100%;
border-radius:6px;
animation:grow .8s ease
}

@keyframes grow {
from {
width:0
}
}

.loader {
display:flex;
justify-content:center;
padding:40px
}

.spinner {
width:36px;
height:36px;
border:3px solid #e5e7eb;
border-top:3px solid #4f46e5;
border-radius:50%;
animation:spin .8s linear infinite
}

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

.input-hint {
display:block;
margin-top:6px;
font-size:12px;
color:#6b7280
}

.skeleton {
background:linear-gradient(90deg,#eee 25%,#ddd 37%,#eee 63%);
background-size:400% 100%;
animation:shimmer 1.2s infinite;
border-radius:6px
}

.skeleton.header {
height:50px;
margin-bottom:12px
}

.skeleton.line {
height:12px;
margin-bottom:10px
}

.skeleton.grid {
height:60px;
margin-top:10px
}

@keyframes shimmer {
0% {
background-position:100% 0
}

100% {
background-position:-100% 0
}
}

.export-fix {
background:#fff!important;
color:#000!important;
box-shadow:none!important;
opacity:1!important
}

.yt-row {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
margin-top:12px
}

.yt-tool-page * {
box-sizing:border-box
}

.yt-tool-page .creative-hero {
text-align:center;
padding:56px 20px 28px
}

.yt-tool-page .badge {
display:inline-flex;
align-items:center;
justify-content:center;
height:34px;
padding:0 16px;
border-radius:999px;
background:linear-gradient(135deg,#3b82f6,#2563eb);
color:#fff;
font-size:12px;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase
}

.yt-tool-page .creative-hero h1 {
margin-top:18px;
font-size:clamp(2rem,4vw,3.5rem);
line-height:1.08;
letter-spacing:-.04em;
font-weight:800;
color:#334155
}

.yt-tool-page .subtitle {
max-width:700px;
margin:16px auto 0;
font-size:1rem;
line-height:1.7;
color:#64748b
}

.yt-tool-page .yt-generator {
max-width:1100px;
margin:34px auto;
padding:34px;
background:#fff;
border:1px solid #e5e7eb;
border-radius:24px;
box-shadow:0 10px 30px #0f172a0a
}

.yt-tool-page .generator-section {
margin-bottom:36px
}

.yt-tool-page .section-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:24px
}

.yt-tool-page .generator-section h3 {
font-size:1.5rem;
font-weight:750;
letter-spacing:-.03em;
color:#2563eb
}

.yt-tool-page .credits-badge {
padding:10px 16px;
border-radius:999px;
background:#eff6ff;
color:#2563eb;
font-size:13px;
font-weight:700
}

.yt-tool-page .yt-grid-2 {
display:grid;
grid-template-columns:1fr 160px;
gap:24px
}

.yt-tool-page .yt-grid-3 {
display:grid;
grid-template-columns:2fr 150px 150px;
gap:18px
}

.yt-tool-page .yt-grid-4 {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px
}

.yt-tool-page .form-field {
display:flex;
flex-direction:column
}

.yt-tool-page .form-field label {
margin-bottom:10px;
font-size:14px;
font-weight:600;
color:#334155
}

.yt-tool-page .form-field label span {
color:#ef4444
}

.yt-tool-page input,.yt-tool-page textarea,.yt-tool-page select {
width:100%;
border:1px solid #dbe3f0;
border-radius:16px;
background:#fff;
color:#0f172a;
font-size:15px;
transition:border-color .18s ease,box-shadow .18s ease
}

.yt-tool-page input,.yt-tool-page select {
height:56px;
padding:0 18px
}

.yt-tool-page textarea {
min-height:120px;
padding:18px;
resize:vertical;
line-height:1.65
}

.yt-tool-page input:focus,.yt-tool-page textarea:focus,.yt-tool-page select:focus {
outline:none;
border-color:#2563eb;
box-shadow:0 0 0 4px #2563eb14
}

.yt-tool-page .radio-group {
display:flex;
align-items:center;
gap:14px;
min-height:56px
}

.yt-tool-page .radio-group label {
display:flex;
align-items:center;
gap:6px;
margin:0;
font-size:14px;
font-weight:500;
color:#475569
}

.yt-tool-page .radio-group input {
width:16px;
height:16px;
accent-color:#2563eb
}

.yt-tool-page .avatar-upload {
width:110px;
height:110px;
border-radius:22px;
border:2px dashed #93c5fd;
background:#f8fbff;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:border-color .18s ease,background .18s ease,transform .18s ease
}

.yt-tool-page .avatar-upload:hover {
background:#eff6ff;
border-color:#2563eb;
transform:translateY(-1px)
}

.yt-tool-page .avatar-upload span {
font-size:52px;
font-weight:300;
color:#2563eb
}

.yt-tool-page .upload-preview {
width:100%;
height:100%;
object-fit:cover
}

.yt-tool-page .toggle-switch {
position:relative;
width:54px;
height:32px;
margin-top:10px
}

.yt-tool-page .toggle-switch input {
display:none
}

.yt-tool-page .toggle-slider {
position:absolute;
inset:0;
border-radius:999px;
background:#d1d5db;
cursor:pointer;
transition:.2s
}

.yt-tool-page .toggle-slider::before {
content:"";
position:absolute;
top:4px;
left:4px;
width:24px;
height:24px;
border-radius:50%;
background:#fff;
transition:.2s
}

.yt-tool-page .toggle-switch input:checked + .toggle-slider {
background:#2563eb
}

.yt-tool-page .toggle-switch input:checked + .toggle-slider::before {
transform:translateX(22px)
}

.yt-tool-page .generate-btn {
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
height:56px;
padding:0 26px;
border:none;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:#fff;
font-size:15px;
font-weight:700;
cursor:pointer;
transition:transform .18s ease,box-shadow .18s ease
}

.yt-tool-page .generate-btn:hover {
transform:translateY(-1px);
box-shadow:0 12px 26px #2563eb33
}

.yt-tool-page .yt-action-bar {
display:flex;
align-items:center;
gap:20px;
margin-top:28px;
padding-top:20px;
border-top:1px solid #e5e7eb;
color:#475569;
font-size:14px;
font-weight:600
}

.yt-tool-page .preview-box {
max-width:1100px;
margin:30px auto 0;
padding:24px;
border-radius:24px;
background:#f8fafc;
border:1px solid #dbeafe
}

.yt-tool-page .yt-comment-card {
background:#fff;
border:1px solid #e5e7eb;
border-radius:18px;
padding:18px;
box-shadow:0 6px 18px #0f172a0a
}

.yt-tool-page .yt-comment-wrap {
display:flex;
align-items:flex-start;
gap:14px
}

.yt-tool-page .yt-avatar {
width:40px;
height:40px;
border-radius:50%;
object-fit:cover;
flex-shrink:0
}

.yt-tool-page .yt-content {
flex:1;
min-width:0
}

.yt-tool-page .yt-top {
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap
}

.yt-tool-page .yt-user {
font-size:13px;
font-weight:700;
color:#111827
}

.yt-tool-page .yt-time {
font-size:12px;
color:#64748b
}

.yt-tool-page .yt-text {
margin-top:5px;
font-size:14px;
line-height:1.6;
color:#111827
}

.yt-tool-page .yt-actions {
display:flex;
align-items:center;
gap:16px;
margin-top:10px;
color:#606060;
font-size:12px
}

.yt-tool-page .yt-action {
display:flex;
align-items:center;
gap:5px
}

.yt-tool-page .yt-icon {
width:18px;
height:18px;
stroke:#606060;
stroke-width:1.8;
fill:none
}

.yt-tool-page .download {
display:flex;
gap:12px;
margin-top:22px
}

.yt-tool-page .download button {
height:46px;
padding:0 18px;
border:none;
border-radius:12px;
background:#111827;
color:#fff;
font-size:13px;
font-weight:700;
cursor:pointer;
transition:transform .18s ease,background .18s ease
}

.yt-tool-page .download button:hover {
background:#1f2937;
transform:translateY(-1px)
}

@media (max-width: 980px) {
.yt-tool-page .yt-grid-2,.yt-tool-page .yt-grid-3,.yt-tool-page .yt-grid-4 {
grid-template-columns:1fr
}

.yt-tool-page .yt-generator,.yt-tool-page .preview-box {
padding:22px
}

.yt-tool-page .creative-hero h1 {
font-size:2.3rem
}
}

.yt-tool-page .creative-hero h1 {
margin-top:14px;
font-size:2.5rem;
line-height:1.08;
letter-spacing:-.04em;
font-weight:800;
color:#334155
}

@media (max-width: 900px) {
.yt-tool-page .creative-hero h1 {
font-size:2.5rem
}
}

@media (max-width: 600px) {
.yt-tool-page .creative-hero h1 {
font-size:2rem;
line-height:1.15
}
}

.yt-tool-page .form-field:has(.generate-btn) {
justify-content:center
}

.yt-tool-page .form-field:has(.generate-btn) label {
display:none
}

.yt-tool-page .generate-btn {
width:100%;
min-height:auto;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
line-height:1.8
}

@media (min-width: 981px) {
.yt-tool-page .form-field:has(.generate-btn) {
padding-top:34px
}
}

.yt-tool-page .creative-hero {
padding:26px 20px 18px!important
}

.yt-tool-page .creative-hero h1 {
margin-top:0
}

.yt-tool-page .subtitle {
margin-top:10px
}


/* =========================
   MOBILE PREVIEW OUTPUT
========================= */

@media (max-width: 768px) {

  /* PREVIEW WRAPPER */

  .yt-tool-page .preview-box {

    width: 100%;

    margin-top: 20px;

    padding:
      16px;

    border-radius:
      20px;

    overflow: hidden;

  }

  /* COMMENT CARD */

  .yt-tool-page .yt-comment-card {

    padding:
      14px;

    border-radius:
      16px;

  }

  /* COMMENT WRAP */

  .yt-tool-page .yt-comment-wrap {

    gap:
      10px;

  }

  /* AVATAR */

  .yt-tool-page .yt-avatar {

    width:
      36px;

    height:
      36px;

  }

  /* USER */

  .yt-tool-page .yt-user {

    font-size:
      12px;

  }

  /* TIME */

  .yt-tool-page .yt-time {

    font-size:
      11px;

  }

  /* COMMENT TEXT */

  .yt-tool-page .yt-text {

    font-size:
      13px;

    line-height:
      1.55;

    word-break:
      break-word;

  }

  /* ACTIONS */

  .yt-tool-page .yt-actions {

    gap:
      12px;

    flex-wrap:
      wrap;

    margin-top:
      12px;

  }

  /* DOWNLOAD BUTTONS */

  .yt-tool-page .download {

    flex-direction:
      column;

    width: 100%;

  }

  .yt-tool-page .download button {

    width: 100%;

    justify-content: center;

  }

  /* SCORE SECTION */

  .yt-score {

    margin-top:
      18px;

  }

  .score-circle {

    width:
      68px;

    height:
      68px;

    font-size:
      18px;

    border-width:
      5px;

  }

  /* STATS */

  .yt-stats,
  .yt-insights,
  .yt-row {

    grid-template-columns:
      1fr !important;

    gap:
      10px;

  }

  /* STAT BOX */

  .yt-stat,
  .yt-insight {

    padding:
      14px;

    border-radius:
      14px;

  }

  /* PERFORMANCE */

  .yt-performance {

    padding:
      14px;

    font-size:
      13px;

    line-height:
      1.6;

  }

  /* HEADER */

  .yt-header {

    align-items:
      flex-start;

  }

  .yt-header h3 {

    font-size:
      15px;

    line-height:
      1.4;

  }

  .yt-header p {

    font-size:
      12px;

    line-height:
      1.5;

  }

}

/* =========================
   PROFESSIONAL YOUTUBE TOOL LAYOUT
   Scoped here so YouTube pages do not depend on the generic SaaS layer.
========================= */

.qt-youtube-tool-page .yt-tool-page .page-content {
  width: min(100% - 32px, 1180px) !important;
  margin: 0 auto !important;
  padding-top: 22px !important;
}

.qt-youtube-tool-page .yt-tool-page .creative-hero {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 24px 0 22px !important;
  text-align: center !important;
}

.qt-youtube-tool-page .yt-tool-page .creative-hero h1 {
  margin: 0 !important;
  color: #101828 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.qt-youtube-tool-page .yt-tool-page .badge {
  height: 30px !important;
  margin-top: 14px !important;
  border: 1px solid #fecaca !important;
  background: #fff1f2 !important;
  color: #b91c1c !important;
  box-shadow: none !important;
}

.qt-youtube-tool-page .yt-tool-page .subtitle {
  max-width: 700px !important;
  margin: 12px auto 0 !important;
  color: #5d6b82 !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}

.qt-youtube-tool-page .yt-tool-page .yt-generator,
.qt-youtube-tool-page .yt-tool-page .preview-box {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto 16px !important;
  padding: clamp(18px, 2.4vw, 24px) !important;
  overflow: hidden !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 16px 38px rgba(15, 23, 42, 0.06) !important;
}

.qt-youtube-tool-page .yt-tool-page .yt-generator::before,
.qt-youtube-tool-page .yt-tool-page .preview-box::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #dc2626, #2563eb) !important;
}

.qt-youtube-tool-page .yt-tool-page .generator-section {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.qt-youtube-tool-page .yt-tool-page .generator-section + .generator-section {
  margin-top: 24px !important;
  padding-top: 24px !important;
  border-top: 1px solid #e5edf6 !important;
}

.qt-youtube-tool-page .yt-tool-page .section-head {
  margin-bottom: 18px !important;
}

.qt-youtube-tool-page .yt-tool-page .generator-section h3 {
  margin: 0 0 18px !important;
  color: #101828 !important;
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

.qt-youtube-tool-page .yt-tool-page .section-head h3 {
  margin-bottom: 0 !important;
}

.qt-youtube-tool-page .yt-tool-page .credits-badge {
  border: 1px solid #dbeafe !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  box-shadow: none !important;
}

.qt-youtube-tool-page .yt-tool-page .yt-grid-2,
.qt-youtube-tool-page .yt-tool-page .yt-grid-3,
.qt-youtube-tool-page .yt-tool-page .yt-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
}

.qt-youtube-tool-page .yt-tool-page .form-field label {
  margin-bottom: 8px !important;
  color: #344054 !important;
  font-size: 0.84rem !important;
  font-weight: 740 !important;
}

.qt-youtube-tool-page .yt-tool-page input,
.qt-youtube-tool-page .yt-tool-page textarea,
.qt-youtube-tool-page .yt-tool-page select {
  border: 1px solid #cbd8e6 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #101828 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

.qt-youtube-tool-page .yt-tool-page input,
.qt-youtube-tool-page .yt-tool-page select {
  height: 44px !important;
  padding: 0 12px !important;
}

.qt-youtube-tool-page .yt-tool-page textarea {
  min-height: 116px !important;
  padding: 12px !important;
}

.qt-youtube-tool-page .yt-tool-page input:focus,
.qt-youtube-tool-page .yt-tool-page textarea:focus,
.qt-youtube-tool-page .yt-tool-page select:focus {
  border-color: #2563eb !important;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.12),
    0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.qt-youtube-tool-page .yt-tool-page .generate-btn {
  min-height: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #dc2626, #2563eb) !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.2) !important;
}

.qt-youtube-tool-page .yt-tool-page .yt-action-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px solid #e5edf6 !important;
}

.qt-youtube-tool-page .yt-tool-page .yt-action-bar span {
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  padding: 0 10px !important;
  background: #ffffff !important;
  color: #475467 !important;
  font-size: 0.78rem !important;
}

.qt-youtube-tool-page .yt-tool-page .preview-box #preview {
  min-height: 220px !important;
}

.qt-youtube-tool-page .yt-tool-page .empty-state {
  min-height: 220px !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  border: 1px dashed #cbd8e6 !important;
  border-radius: 8px !important;
  background: #f8fbff !important;
  color: #64748b !important;
  text-align: center !important;
}

.qt-youtube-tool-page .yt-tool-page .download {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

.qt-youtube-tool-page .yt-tool-page .download.hidden {
  display: none !important;
}

.qt-youtube-tool-page .yt-tool-page .download button,
.qt-youtube-tool-page .yt-tool-page .export-fix {
  min-height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid #d6e0ec !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #344054 !important;
  font-size: 0.82rem !important;
  font-weight: 740 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  opacity: 1 !important;
}

.qt-youtube-tool-page .yt-tool-page .download button:hover,
.qt-youtube-tool-page .yt-tool-page .export-fix:hover {
  border-color: #9fb3cc !important;
  background: #f8fbff !important;
  color: #1d4ed8 !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 640px) {
  .qt-youtube-tool-page .yt-tool-page .page-content {
    width: min(100% - 24px, 1180px) !important;
    padding-top: 14px !important;
  }

  .qt-youtube-tool-page .yt-tool-page .creative-hero {
    padding: 18px 0 !important;
  }

  .qt-youtube-tool-page .yt-tool-page .yt-generator,
  .qt-youtube-tool-page .yt-tool-page .preview-box {
    padding: 16px !important;
  }

  .qt-youtube-tool-page .yt-tool-page .section-head,
  .qt-youtube-tool-page .yt-tool-page .download {
    display: grid !important;
    justify-items: stretch !important;
  }

  .qt-youtube-tool-page .yt-tool-page .download button {
    width: 100% !important;
  }
}

/* =========================
   YOUTUBE ANALYZER CONTROL ALIGNMENT
========================= */

.qt-youtube-tool-page .yt-tool-page .generator-section > .yt-grid-2:has(#channelId):has(.generate-btn) {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px) !important;
  align-items: end !important;
  gap: 14px !important;
}

.qt-youtube-tool-page .yt-tool-page .generator-section > .yt-grid-2:has(#channelId):has(.generate-btn) .form-field {
  min-width: 0 !important;
  justify-content: end !important;
}

.qt-youtube-tool-page .yt-tool-page .generator-section > .yt-grid-2:has(#channelId):has(.generate-btn) .form-field:has(.generate-btn) {
  padding-top: 0 !important;
}

.qt-youtube-tool-page .yt-tool-page .generator-section > .yt-grid-2:has(#channelId):has(.generate-btn) .form-field:has(.generate-btn) label {
  display: none !important;
}

.qt-youtube-tool-page .yt-tool-page .generator-section > .yt-grid-2:has(#channelId):has(.generate-btn) .generate-btn {
  width: 100% !important;
  max-width: 220px !important;
  min-height: 44px !important;
  height: 44px !important;
  justify-self: stretch !important;
  border-radius: 8px !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.2) !important;
}

@media (min-width: 981px) {
  .qt-youtube-tool-page .yt-tool-page .generator-section > .yt-grid-2:has(#channelId):has(.generate-btn) .generate-btn {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 760px) {
  .qt-youtube-tool-page .yt-tool-page .generator-section > .yt-grid-2:has(#channelId):has(.generate-btn) {
    grid-template-columns: 1fr !important;
  }

  .qt-youtube-tool-page .yt-tool-page .generator-section > .yt-grid-2:has(#channelId):has(.generate-btn) .generate-btn {
    max-width: none !important;
  }
}