/* ══ Tool theme ══ */
.yt-page { background: linear-gradient(135deg, #ff0000 0%, #cc0000 40%, #990000 100%); min-height: 60vh; padding: 24px 8px 48px; position: relative; overflow: hidden; }
.yt-page::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }

/* ══ Search bar ══ */
.yt-search-wrap { max-width: 700px; margin: 0 auto; position: relative; }
.yt-search-input {
    width: 100%;
    padding: 16px 160px 16px 20px;
    border-radius: 50px;
    border: none;
    font-size: 14px;
    color: #1e293b;
    outline: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    font-family: inherit;
}
.yt-search-btn {
    position: absolute;
    right: 6px; top: 6px; bottom: 6px;
    padding: 0 24px;
    background: #ff0000;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}
.yt-search-btn:hover    { background: #cc0000; }
.yt-search-btn:disabled { background: #94a3b8; cursor: not-allowed; }
.yt-search-btn .spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══ Channel card ══ */
.channel-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    overflow: hidden;
    margin-top: 32px;
    display: none;
}
.channel-card.visible { display: block; animation: slideUp 0.4s ease; }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* ══ Channel header ══ */
.ch-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
@media(max-width:600px){ .ch-header{ padding: 20px; gap: 16px; flex-direction: column; text-align: center; } }
.ch-avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.2);
    object-fit: cover;
    flex-shrink: 0;
}
.ch-avatar-placeholder {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff0000, #cc0000);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
}
.ch-info { flex: 1; }
.ch-name { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.ch-handle { font-size: 14px; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.ch-country { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1); padding: 3px 10px; border-radius: 999px; }
.ch-yt-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ff0000;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s;
    flex-shrink: 0;
}
.ch-yt-link:hover { background: #cc0000; text-decoration: none; color: #fff; }

/* ══ Stats grid ══ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-bottom: 1px solid #f1f5f9;
}
@media(max-width:640px){ .stats-grid{ grid-template-columns: 1fr; } }
.stat-cell {
    padding: 24px 28px;
    border-right: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.stat-cell:last-child { border-right: none; }
.stat-cell:hover { background: #fafafa; }
.stat-title { font-size: 14px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.stat-value { font-size: 28px; font-weight: 900; color: #0f172a; line-height: 1; margin-bottom: 4px; font-family: 'Georgia', serif; }
.stat-sub   { font-size: 14px; color: #94a3b8; }

/* ══ Earnings section ══ */
.earnings-section { padding: 28px 32px; }
@media(max-width:600px){ .earnings-section{ padding: 20px; } }
.earnings-title { font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }

.earnings-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
@media(max-width:640px){ .earnings-cards{ grid-template-columns: 1fr; } }

.earn-card {
    border-radius: 14px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.earn-card.monthly { background: linear-gradient(135deg, #fef3f2, #fee2e2); border: 1px solid #fecaca; }
.earn-card.yearly  { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1px solid #bbf7d0; }
.earn-card.sponsor { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 1px solid #bfdbfe; }

.earn-label   { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }
.earn-card.monthly .earn-label  { color: #dc2626; }
.earn-card.yearly  .earn-label  { color: #16a34a; }
.earn-card.sponsor .earn-label  { color: #2563eb; }

.earn-range { font-size: 20px; font-weight: 900; color: #0f172a; line-height: 1.2; margin-bottom: 4px; }
.earn-cpm   { font-size: 14px; color: #64748b; }
.earn-icon  { position: absolute; right: 14px; top: 14px; font-size: 24px; opacity: 0.3; }

/* ══ Daily views calculator ══ */
.calc-section { background: #f8fafc; border-top: 1px solid #f1f5f9; padding: 28px 32px; }
@media(max-width:600px){ .calc-section{ padding: 20px; } }
.calc-title { font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.calc-sub   { font-size: 14px; color: #64748b; margin-bottom: 20px; }

.calc-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media(max-width:640px){ .calc-sliders{ grid-template-columns: 1fr; } }

.calc-slider-wrap { }
.slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.slider-lbl { font-size: 14px; font-weight: 600; color: #374151; }
.slider-val { font-size: 14px; font-weight: 800; color: #ff0000; font-family: 'Courier New', monospace; }

.yt-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: #e2e8f0;
    outline: none;
    cursor: pointer;
}
.yt-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #ff0000;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(255,0,0,0.3);
}
.yt-slider::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #ff0000;
    cursor: pointer;
    border: 2px solid #fff;
}

.calc-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 20px;
}
@media(max-width:500px){ .calc-results{ grid-template-columns: 1fr; } }
.calc-result-card {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    border: 1px solid #e2e8f0;
}
.crc-val   { font-size: 22px; font-weight: 900; color: #ff0000; line-height: 1; margin-bottom: 4px; }
.crc-label { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }

/* ══ Extra stats row ══ */
.extra-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid #f1f5f9;
}
@media(max-width:640px){ .extra-stats{ grid-template-columns: 1fr; } }

/* ══ Error message ══ */
.yt-error {
    max-width: 700px;
    margin: 16px auto 0;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 14px;
    padding: 14px 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    display: none;
    text-align: center;
}
.yt-error.visible { display: block; }

/* ══ Loading skeleton ══ */
.skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200%; animation: shimmer 1.2s infinite; border-radius: 8px; }
@keyframes shimmer { 0%{background-position:200%} 100%{background-position:-200%} }

/* ══ Disclaimer ══ */
.disclaimer {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14px;
    color: #92400e;
    margin: 20px 0 0;
    line-height: 1.6;
}





.yt-content { background: #fff; }
.yt-content h2 { font-size: 2rem; font-weight: 900; color: #0f172a; margin-bottom: 1.25rem; line-height: 1.2; }
.yt-content h3 { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin-bottom: .5rem; }
.yt-content p  { color: #475569; line-height: 1.8; margin-bottom: 1rem; }
.yt-content code { background: #f1f5f9; padding: 2px 7px; border-radius: 5px; font-size: .85em; color: #dc2626; }
.yt-section { padding: 60px 0; border-bottom: 1px solid #f1f5f9; }
.yt-section:last-child { border-bottom: none; }
.section-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff5f5; border: 1px solid #fecaca;
    color: #dc2626; font-size: 11px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
    padding: 4px 14px; border-radius: 999px; margin-bottom: 14px;
}
 
/* ══ TOC ══ */
.toc-box {
    background: linear-gradient(135deg, #fafafa, #f1f5f9);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 48px;
}
.toc-box h4 { font-size: 14px; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; }
.toc-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; }
@media(max-width:640px){ .toc-list{ grid-template-columns: 1fr; } }
.toc-list li a { font-size: 14px; color: #3b82f6; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.toc-list li a:hover { color: #dc2626; }
.toc-num { font-size: 11px; background: #e0e7ff; color: #3730a3; border-radius: 999px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
 
/* ══ Formula box ══ */
.formula-box {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 14px;
    padding: 24px 28px;
    margin: 24px 0;
    text-align: center;
    border: 1px solid #334155;
}
.formula-box .formula-title { font-size: 11px; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.formula-box .formula-text  { font-size: 1.4rem; font-weight: 900; color: #fff; font-family: 'Georgia', serif; margin-bottom: 10px; }
.formula-box .formula-example { font-size: 14px; color: #64748b; }
.formula-box .formula-example span { color: #22c55e; font-weight: 700; }
 
/* ══ Channel size table ══ */
.size-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.size-table thead tr { background: #0f172a; }
.size-table thead th { color: #fff; padding: 14px 16px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.size-table tbody tr { border-bottom: 1px solid #f1f5f9; transition: background .15s; }
.size-table tbody tr:hover { background: #fafafa; }
.size-table tbody td { padding: 14px 16px; color: #374151; vertical-align: middle; }
.size-table .tier-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.tier-nano    { background: #f0fdf4; color: #16a34a; }
.tier-micro   { background: #eff6ff; color: #2563eb; }
.tier-mid     { background: #fefce8; color: #ca8a04; }
.tier-macro   { background: #fff7ed; color: #ea580c; }
.tier-mega    { background: #fff1f2; color: #e11d48; }
.tier-elite   { background: #faf5ff; color: #7c3aed; }
.earn-pill { font-weight: 800; color: #0f172a; font-size: 14px; }
 
/* ══ Niche table ══ */
.niche-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 24px 0; }
@media(max-width:640px){ .niche-grid{ grid-template-columns: 1fr; } }
.niche-card {
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    transition: transform .15s, box-shadow .15s;
}
.niche-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.07); }
.niche-icon { font-size: 28px; flex-shrink: 0; }
.niche-info { flex: 1; }
.niche-name { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
.niche-rpm  { font-size: 18px; font-weight: 900; color: #dc2626; line-height: 1; }
.niche-rpm-label { font-size: 11px; color: #94a3b8; }
.niche-bar-wrap { margin-top: 6px; background: #f1f5f9; border-radius: 999px; height: 4px; }
.niche-bar { height: 4px; border-radius: 999px; background: linear-gradient(90deg, #ff0000, #ff6b35); }
 
/* ══ Methodology steps ══ */
.method-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
@media(max-width:640px){ .method-steps{ grid-template-columns: 1fr; } }
.method-step {
    background: #f8fafc;
    border-radius: 14px;
    padding: 22px 20px;
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}
.method-step::before {
    content: attr(data-step);
    position: absolute;
    top: -8px; right: 14px;
    font-size: 80px;
    font-weight: 900;
    color: #f1f5f9;
    line-height: 1;
    z-index: 0;
    font-family: 'Georgia', serif;
}
.method-step-inner { position: relative; z-index: 1; }
.method-step-icon  { font-size: 28px; margin-bottom: 10px; }
.method-step-title { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.method-step-text  { font-size: 14px; color: #64748b; line-height: 1.6; }
 
/* ══ Views-to-income table ══ */
.income-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 24px 0; }
.income-table thead tr { background: linear-gradient(135deg, #ff0000, #cc0000); }
.income-table thead th { color: #fff; padding: 14px 16px; text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.income-table thead th:first-child { text-align: left; }
.income-table tbody tr { border-bottom: 1px solid #f1f5f9; }
.income-table tbody tr:hover { background: #fafafa; }
.income-table tbody td { padding: 14px 16px; color: #374151; text-align: center; }
.income-table tbody td:first-child { text-align: left; font-weight: 700; color: #0f172a; }
.income-highlight { color: #dc2626; font-weight: 800; }
 
/* ══ Top earners ══ */
.earners-list { display: grid; gap: 14px; margin: 24px 0; }
.earner-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: box-shadow .2s;
}
.earner-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.earner-rank { font-size: 22px; font-weight: 900; color: #e2e8f0; font-family: 'Georgia', serif; min-width: 32px; }
.earner-info { flex: 1; }
.earner-name { font-size: 15px; font-weight: 800; color: #0f172a; margin-bottom: 3px; }
.earner-meta { font-size: 14px; color: #94a3b8; }
.earner-earn { text-align: right; }
.earner-earn-val { font-size: 16px; font-weight: 900; color: #16a34a; }
.earner-earn-lbl { font-size: 11px; color: #94a3b8; }
 
/* ══ Revenue breakdown ══ */
.revenue-bars { display: grid; gap: 14px; margin: 24px 0; }
.rev-bar-row { display: flex; align-items: center; gap: 14px; }
.rev-bar-name { font-size: 14px; font-weight: 700; color: #0f172a; min-width: 170px; }
@media(max-width:500px){ .rev-bar-name{ min-width: 120px; } }
.rev-bar-outer { flex: 1; background: #f1f5f9; border-radius: 999px; height: 10px; }
.rev-bar-inner { height: 10px; border-radius: 999px; }
.rev-pct { font-size: 14px; font-weight: 800; color: #0f172a; min-width: 40px; text-align: right; }
 
/* ══ Tips grid ══ */
.tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; }
@media(max-width:640px){ .tips-grid{ grid-template-columns: 1fr; } }
.tip-card {
    background: #f8fafc;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid #e2e8f0;
}
.tip-icon  { font-size: 28px; margin-bottom: 10px; }
.tip-title { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.tip-text  { font-size: 14px; color: #64748b; line-height: 1.6; }
 
/* ══ FAQ accordion ══ */
.faq-list { display: grid; gap: 10px; margin: 24px 0; }
.faq-item { border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; }
.faq-q {
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    background: #fff;
    transition: background .15s;
}
.faq-q:hover { background: #fafafa; }
.faq-q .faq-arrow { font-size: 16px; color: #dc2626; transition: transform .2s; flex-shrink: 0; }
.faq-q.open .faq-arrow { transform: rotate(180deg); }
.faq-a {
    padding: 0 20px;
    font-size: 14px;
    color: #475569;
    line-height: 1.8;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s;
}
.faq-a.open { max-height: 500px; padding: 0 20px 16px; }
 
/* ══ Glossary ══ */
.glossary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 24px 0; }
@media(max-width:640px){ .glossary-grid{ grid-template-columns: 1fr; } }
.gloss-card { background: #f8fafc; border-radius: 14px; padding: 16px 18px; border: 1px solid #e2e8f0; }
.gloss-term { font-size: 14px; font-weight: 800; color: #dc2626; margin-bottom: 4px; }
.gloss-def  { font-size: 14px; color: #475569; line-height: 1.7; }
 
/* ══ Geography table ══ */
.geo-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 24px 0; }
@media(max-width:500px){ .geo-list{ grid-template-columns: 1fr; } }
.geo-item { display: flex; align-items: center; gap: 10px; background: #f8fafc; border-radius: 10px; padding: 14px 14px; border: 1px solid #e2e8f0; }
.geo-flag { font-size: 22px; flex-shrink: 0; }
.geo-info  { flex: 1; }
.geo-country { font-size: 14px; font-weight: 700; color: #0f172a; }
.geo-rpm     { font-size: 14px; color: #94a3b8; }
.geo-rpm span { color: #16a34a; font-weight: 800; }
 
/* ══ Shorts comparison ══ */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0; }
@media(max-width:500px){ .compare-grid{ grid-template-columns: 1fr; } }
.compare-card { border-radius: 14px; padding: 24px; }
.compare-long  { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 1px solid #bfdbfe; }
.compare-short { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1px solid #bbf7d0; }
.compare-type  { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; }
.compare-long .compare-type  { color: #2563eb; }
.compare-short .compare-type { color: #16a34a; }
.compare-rpm   { font-size: 28px; font-weight: 900; color: #0f172a; line-height: 1; margin-bottom: 6px; font-family: 'Georgia', serif; }
.compare-desc  { font-size: 14px; color: #64748b; line-height: 1.6; }

h2{
      font-weight: bold !important;
}
h3{
      font-weight: bold !important;
}