/* ══ Hero ══ */
.yvec-page {
   background: linear-gradient(135deg, #ff0000 0%, #cc0000 40%, #990000 100%);
    min-height: 65vh;
    padding: 28px 8px 52px;
    position: relative;
    overflow: hidden;
}
.yvec-page::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px; pointer-events: none;
}
.yvec-page::after {
    content: ''; position: absolute;
    bottom: -2px; left: 0; right: 0; height: 60px;
    background: #f8fafc;
    clip-path: ellipse(55% 100% at 50% 100%);
}

/* ══ Search bar ══ */
.yvec-search-wrap { max-width: 720px; margin: 0 auto; }
.yvec-search-row  { position: relative; }
.yvec-input {
    width: 100%;
    padding: 16px 170px 16px 20px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.15);
   
    backdrop-filter: blur(8px);
    font-size: 14px;
    color: #000000;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    font-family: inherit;
}

.yvec-calc-btn {
    position: absolute; right: 6px; top: 6px; bottom: 6px;
    padding: 0 22px;
    background: #0004ff;
    color: #fff;
    border: none; border-radius: 10px;
    font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; gap: 7px;
    font-family: inherit;
}
.yvec-calc-btn:hover    { background: #0004ff; transform: translateY(-1px); }
.yvec-calc-btn:disabled { background: #475569; cursor: not-allowed; transform: none; }
.yvec-calc-btn .spin    { width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:none; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ══ Error ══ */
.yvec-error {
    max-width: 400px; margin: 12px auto 0;
    background: #FF9800; border: 1px solid rgba(220,38,38,0.4);
    border-radius: 10px; padding: 10px 16px;
    color: #ffff; font-size: 16px; font-weight: 500;
    text-align: center; display: none;
}
.yvec-error.show { display: block; }

/* ══ Results area ══ */
.yvec-results { max-width: 1060px; margin: -36px auto 0; padding: 0 16px; position: relative; z-index: 10; }

/* ══ Video info card ══ */
.video-info-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.10);
    overflow: hidden;
    display: none;
    animation: fadeUp 0.4s ease;
}
.video-info-card.show { display: block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ══ Video header ══ */
.v-header {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 24px 28px;
    background: linear-gradient(135deg, #0f172a, #1e1b4b);
    flex-wrap: wrap;
}
@media(max-width:640px){ .v-header{ flex-direction:column; padding:20px; } }
.v-thumb {
    width: 160px; min-width: 160px; height: 90px;
    object-fit: cover; border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.1);
}
.v-thumb-placeholder {
    width:160px; min-width:160px; height:90px;
    background: #1e1b4b; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:28px;
}
.v-meta { flex:1; }
.v-title { font-size:16px; font-weight:700; color:#fff; line-height:1.4; margin-bottom:6px; }
.v-channel { font-size:13px; color:rgba(255,255,255,0.55); margin-bottom:10px; }
.v-badges { display:flex; flex-wrap:wrap; gap:6px; }
.v-badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:999px;
    font-size:11px; font-weight:600; background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.7);
}
.v-badge.green  { background:rgba(16,185,129,0.2); color:#6ee7b7; }
.v-badge.yellow { background:rgba(245,158,11,0.2); color:#fcd34d; }
.v-badge.red    { background:rgba(239,68,68,0.2);  color:#fca5a5; }
.v-badge.blue   { background:rgba(99,102,241,0.2); color:#a5b4fc; }
.v-yt-link {
    display:inline-flex; align-items:center; gap:6px;
    background:#ff0000; color:#fff;
    font-size:12px; font-weight:700; padding:8px 14px;
    border-radius:8px; text-decoration:none;
    transition:background 0.2s; flex-shrink:0; align-self:flex-start;
}
.v-yt-link:hover { background:#cc0000; color:#fff; text-decoration:none; }

/* ══ Stats row ══ */
.v-stats-row {
    display:grid; grid-template-columns:repeat(4,1fr);
    border-bottom: 1px solid #f1f5f9;
}
@media(max-width:640px){ .v-stats-row{ grid-template-columns:repeat(2,1fr); } }
.v-stat {
    padding:18px 20px; border-right:1px solid #f1f5f9;
    transition:background 0.15s;
}
.v-stat:last-child { border-right:none; }
.v-stat:hover { background:#fafafa; }
.v-stat-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#64748b; margin-bottom:6px; }
.v-stat-val { font-size:22px; font-weight:900; color:#0f172a; line-height:1; }
.v-stat-sub { font-size:11px; color:#94a3b8; margin-top:3px; }

/* ══ Earnings cards ══ */
.earn-section { padding:24px 28px; }
@media(max-width:600px){ .earn-section{ padding:20px; } }
.earn-section-title {
    font-size:16px; font-weight:800; color:#0f172a;
    margin-bottom:16px; display:flex; align-items:center; gap:8px;
}
.earn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
@media(max-width:600px){ .earn-grid{ grid-template-columns:1fr; } }

.earn-card {
    border-radius:14px; padding:20px; position:relative; overflow:hidden;
}
.earn-card.total   { background:linear-gradient(135deg,#fef3ff,#ede9fe); border:1px solid #c4b5fd; }
.earn-card.monthly { background:linear-gradient(135deg,#fef3f2,#fee2e2); border:1px solid #fca5a5; }
.earn-card.sponsor { background:linear-gradient(135deg,#f0fdf4,#dcfce7); border:1px solid #86efac; }
.earn-lbl  { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; margin-bottom:8px; }
.earn-card.total   .earn-lbl { color:#7c3aed; }
.earn-card.monthly .earn-lbl { color:#dc2626; }
.earn-card.sponsor .earn-lbl { color:#16a34a; }
.earn-range { font-size:18px; font-weight:900; color:#0f172a; line-height:1.25; margin-bottom:4px; }
.earn-note  { font-size:11px; color:#64748b; }
.earn-icon  { position:absolute; right:12px; top:12px; font-size:22px; opacity:0.25; }

/* ══ RPM info ══ */
.rpm-section {
    background:#f8fafc; border-top:1px solid #f1f5f9;
    padding:20px 28px; display:flex; flex-wrap:wrap; gap:16px; align-items:center;
}
@media(max-width:600px){ .rpm-section{ padding:16px 20px; } }
.rpm-item { display:flex; flex-direction:column; gap:2px; }
.rpm-lbl  { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:#64748b; }
.rpm-val  { font-size:18px; font-weight:800; color:#0f172a; font-family:'Courier New',monospace; }
.rpm-divider { width:1px; height:36px; background:#e2e8f0; flex-shrink:0; }
@media(max-width:500px){ .rpm-divider{ display:none; } }
.midroll-badge {
    margin-left:auto; display:inline-flex; align-items:center; gap:5px;
    padding:6px 12px; border-radius:8px; font-size:12px; font-weight:700;
}
.midroll-badge.yes { background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; }
.midroll-badge.no  { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }

/* ══ Interactive calculator ══ */
.calc-section { padding:24px 28px; border-top:1px solid #f1f5f9; }
@media(max-width:600px){ .calc-section{ padding:20px; } }
.calc-title { font-size:15px; font-weight:700; color:#0f172a; margin-bottom:4px; }
.calc-sub   { font-size:12px; color:#64748b; margin-bottom:18px; }
.calc-row   { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:560px){ .calc-row{ grid-template-columns:1fr; } }
.calc-slider-wrap .slider-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
.calc-slider-wrap .s-lbl { font-size:12px; font-weight:600; color:#374151; }
.calc-slider-wrap .s-val { font-size:13px; font-weight:800; color:#6366f1; font-family:'Courier New',monospace; }
.yvec-slider {
    -webkit-appearance:none; width:100%; height:5px; border-radius:3px;
    background:#e2e8f0; outline:none; cursor:pointer;
}
.yvec-slider::-webkit-slider-thumb {
    -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    cursor:pointer; border:2px solid #fff;
    box-shadow:0 2px 8px rgba(99,102,241,0.4);
}
.calc-output { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
@media(max-width:480px){ .calc-output{ grid-template-columns:1fr; } }
.calc-out-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:14px; text-align:center; }
.calc-out-val  { font-size:20px; font-weight:900; color:#6366f1; line-height:1; margin-bottom:3px; }
.calc-out-lbl  { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:#64748b; }

/* ══ Engagement ══ */
.engagement-section { padding:20px 28px; border-top:1px solid #f1f5f9; }
@media(max-width:600px){ .engagement-section{ padding:16px 20px; } }
.eng-title { font-size:14px; font-weight:700; color:#0f172a; margin-bottom:14px; }
.eng-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media(max-width:480px){ .eng-grid{ grid-template-columns:1fr; } }
.eng-bar-wrap { background:#f1f5f9; border-radius:999px; height:7px; overflow:hidden; margin-top:6px; }
.eng-bar      { height:100%; border-radius:999px; transition:width 0.6s ease; }
.eng-item { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:14px; }
.eng-lbl  { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:#64748b; margin-bottom:4px; }
.eng-val  { font-size:18px; font-weight:800; color:#0f172a; }
.eng-tier { font-size:11px; font-weight:600; margin-top:3px; }

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

/* ══ Placeholder state ══ */
.yvec-placeholder {
    max-width:1060px; margin:0 auto; padding:0 16px; position:relative; z-index:10;
    display:none;
}
.yvec-placeholder.show { display:block; }
.ph-card {
    background:#fff; border-radius:20px;
    box-shadow:0 16px 48px rgba(0,0,0,0.07);
    padding:48px 24px; text-align:center;
}
.ph-icon  { font-size:52px; margin-bottom:14px; }
.ph-title { font-size:18px; font-weight:700; color:#0f172a; margin-bottom:6px; }
.ph-sub   { font-size:14px; color:#64748b; }

/* ══ RPM table ══ */
.rpm-table { width:100%; border-collapse:collapse; font-size:13px; }
.rpm-table th { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:#64748b;padding:8px 12px;text-align:left;border-bottom:1.5px solid #f1f5f9; }
.rpm-table td { padding:8px 12px;border-bottom:1px solid #f8fafc;color:#374151; }
.rpm-table tr:last-child td { border-bottom:none; }
.rpm-table tr:hover td { background:#f8fafc; }
.rpm-hi { color:#16a34a; font-weight:700; }
.rpm-lo { color:#dc2626; font-weight:700; }