/* ============================================================
   YT Vault Pro — Front-end Styles  v2  (all formats + tabs)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ---- CSS Variables (dark theme default) ---- */
.ytvp-wrap {
    --ytvp-accent:       #FF0000;
    --ytvp-accent-dark:  #cc0000;
    --ytvp-accent-glow:  rgba(255,0,0,.2);
    --ytvp-bg:           #0f0f0f;
    --ytvp-surface:      #1a1a1a;
    --ytvp-surface-2:    #222;
    --ytvp-surface-3:    #2a2a2a;
    --ytvp-border:       #2e2e2e;
    --ytvp-border-hover: #444;
    --ytvp-text:         #f1f1f1;
    --ytvp-text-2:       #ccc;
    --ytvp-muted:        #777;
    --ytvp-radius:       14px;
    --ytvp-radius-sm:    9px;
    --ytvp-shadow:       0 6px 32px rgba(0,0,0,.55);

    font-family: 'DM Sans', -apple-system, sans-serif;
    background:    var(--ytvp-bg);
    border:        1px solid var(--ytvp-border);
    border-radius: var(--ytvp-radius);
    padding:       28px;
    max-width:     780px;
    box-shadow:    var(--ytvp-shadow);
    box-sizing:    border-box;
}

/* ---- Light theme ---- */
.ytvp-wrap.ytvp-theme-light {
    --ytvp-bg:          #fafafa;
    --ytvp-surface:     #f0f0f0;
    --ytvp-surface-2:   #e8e8e8;
    --ytvp-surface-3:   #e0e0e0;
    --ytvp-border:      #ddd;
    --ytvp-border-hover:#bbb;
    --ytvp-text:        #111;
    --ytvp-text-2:      #333;
    --ytvp-muted:       #888;
    --ytvp-shadow:      0 4px 20px rgba(0,0,0,.1);
    --ytvp-accent-glow: rgba(255,0,0,.12);
}

/* ---- Red theme ---- */
.ytvp-wrap.ytvp-theme-red {
    --ytvp-bg:          #120000;
    --ytvp-surface:     #1e0000;
    --ytvp-surface-2:   #280000;
    --ytvp-surface-3:   #330000;
    --ytvp-border:      #450000;
    --ytvp-border-hover:#660000;
    --ytvp-text:        #fff5f5;
    --ytvp-text-2:      #ffcccc;
    --ytvp-muted:       #cc7777;
    --ytvp-shadow:      0 6px 32px rgba(255,0,0,.15);
}

/* ============================================================
   Header
   ============================================================ */
.ytvp-header {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin-bottom: 22px;
}

.ytvp-icon {
    width:  30px;
    height: 30px;
    color:  var(--ytvp-accent);
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px var(--ytvp-accent-glow));
}

.ytvp-title {
    font-size:   1.2rem;
    font-weight: 700;
    color:       var(--ytvp-text);
    margin:  0; padding: 0; border: none;
    letter-spacing: -.01em;
}

/* ============================================================
   Input row
   ============================================================ */
.ytvp-input-row {
    display:   flex;
    gap:       10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.ytvp-url-input {
    flex:          1 1 220px;
    background:    var(--ytvp-surface);
    border:        1.5px solid var(--ytvp-border);
    border-radius: var(--ytvp-radius-sm);
    padding:       13px 16px;
    font-family:   inherit;
    font-size:     0.95rem;
    color:         var(--ytvp-text);
    outline:       none;
    transition:    border-color .2s, background .2s;
}

.ytvp-url-input::placeholder { color: var(--ytvp-muted); }
.ytvp-url-input:focus {
    border-color: var(--ytvp-accent);
    background:   var(--ytvp-surface-2);
    box-shadow:   0 0 0 3px var(--ytvp-accent-glow);
}

/* ============================================================
   Buttons — base
   ============================================================ */
.ytvp-btn {
    display:     inline-flex;
    align-items: center;
    gap:         7px;
    padding:     13px 22px;
    border:      none;
    border-radius: var(--ytvp-radius-sm);
    font-family: inherit;
    font-size:   0.92rem;
    font-weight: 600;
    cursor:      pointer;
    transition:  background .18s, transform .1s, box-shadow .18s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

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

.ytvp-btn-primary {
    background: var(--ytvp-accent);
    color:      #fff;
}

.ytvp-btn-primary:hover {
    background:  var(--ytvp-accent-dark);
    box-shadow:  0 4px 14px var(--ytvp-accent-glow);
}

/* Download button — compact */
.ytvp-btn-download {
    background:  var(--ytvp-surface-3);
    color:       var(--ytvp-text-2);
    border:      1px solid var(--ytvp-border);
    font-size:   0.8rem;
    padding:     7px 12px;
    border-radius: 7px;
}

.ytvp-btn-download:hover {
    border-color: var(--ytvp-accent);
    color:        var(--ytvp-accent);
    background:   var(--ytvp-surface-2);
}

.ytvp-btn-download svg { width: 13px; height: 13px; }

/* ============================================================
   Spinner
   ============================================================ */
.ytvp-spinner {
    display:       none;
    width:         15px;
    height:        15px;
    border:        2.5px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation:     ytvp-spin .65s linear infinite;
}

.ytvp-btn.is-loading .ytvp-btn-text  { display: none; }
.ytvp-btn.is-loading .ytvp-spinner   { display: block; }
.ytvp-btn.is-loading                 { pointer-events: none; opacity: .85; }

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

/* ============================================================
   Result area
   ============================================================ */
.ytvp-result {
    margin-top: 22px;
    animation:  ytvp-fadein .3s ease;
}

@keyframes ytvp-fadein {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Video info bar ---- */
.ytvp-video-info {
    display:       flex;
    gap:           16px;
    align-items:   flex-start;
    background:    var(--ytvp-surface);
    border:        1px solid var(--ytvp-border);
    border-radius: var(--ytvp-radius-sm);
    padding:       14px;
    margin-bottom: 18px;
}

.ytvp-thumb {
    width:         148px;
    height:        84px;
    object-fit:    cover;
    border-radius: 7px;
    flex-shrink:   0;
    background:    var(--ytvp-surface-2);
}

.ytvp-meta { flex: 1; min-width: 0; }

.ytvp-video-title {
    font-size:    0.98rem;
    font-weight:  700;
    color:        var(--ytvp-text);
    margin:       0 0 5px;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
}

.ytvp-uploader,
.ytvp-meta-row,
.ytvp-engine-note {
    font-size:  0.8rem;
    color:      var(--ytvp-muted);
    margin:     3px 0;
}

.ytvp-engine-note { color: #e8b84b; }

.ytvp-max-res-pill {
    display:       inline-block;
    background:    var(--ytvp-accent-glow);
    color:         var(--ytvp-accent);
    border:        1px solid var(--ytvp-accent);
    border-radius: 99px;
    font-size:     0.72rem;
    font-weight:   700;
    padding:       2px 9px;
    margin-top:    5px;
    letter-spacing: .04em;
}

/* ============================================================
   Tabs
   ============================================================ */
.ytvp-tabs-header {
    display:  flex;
    gap:      6px;
    margin-bottom: 14px;
    border-bottom: 1.5px solid var(--ytvp-border);
    padding-bottom: 0;
}

.ytvp-tab-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           7px;
    padding:       10px 18px;
    background:    transparent;
    border:        none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    font-family:   inherit;
    font-size:     0.88rem;
    font-weight:   600;
    color:         var(--ytvp-muted);
    cursor:        pointer;
    transition:    color .18s, border-color .18s;
    border-radius: 0;
}

.ytvp-tab-btn svg { width: 15px; height: 15px; }

.ytvp-tab-btn:hover {
    color: var(--ytvp-text-2);
}

.ytvp-tab-btn.active {
    color:        var(--ytvp-accent);
    border-bottom-color: var(--ytvp-accent);
}

.ytvp-tab-count {
    background:    var(--ytvp-surface-3);
    color:         var(--ytvp-muted);
    border-radius: 99px;
    font-size:     0.72rem;
    font-weight:   700;
    padding:       1px 7px;
}

.ytvp-tab-btn.active .ytvp-tab-count {
    background: var(--ytvp-accent-glow);
    color:      var(--ytvp-accent);
}

/* ============================================================
   Format grid + cards
   ============================================================ */
.ytvp-formats-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap:                   10px;
}

.ytvp-format-card {
    background:     var(--ytvp-surface);
    border:         1.5px solid var(--ytvp-border);
    border-radius:  var(--ytvp-radius-sm);
    padding:        12px 14px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    transition:     border-color .2s, box-shadow .2s;
}

.ytvp-format-card:hover {
    border-color: var(--ytvp-accent);
    box-shadow:   0 0 0 3px var(--ytvp-accent-glow);
}

.ytvp-fmt-top {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}

.ytvp-fmt-icon {
    width:      16px;
    height:     16px;
    color:      var(--ytvp-muted);
    flex-shrink: 0;
}

.ytvp-format-label {
    font-size:   0.88rem;
    font-weight: 700;
    color:       var(--ytvp-text);
    flex:        1;
}

.ytvp-fmt-bottom {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         8px;
}

/* EXT tag */
.ytvp-ext-tag {
    font-size:     0.7rem;
    font-weight:   700;
    letter-spacing: .05em;
    color:         var(--ytvp-muted);
    background:    var(--ytvp-surface-3);
    border:        1px solid var(--ytvp-border);
    border-radius: 5px;
    padding:       2px 6px;
}

/* ============================================================
   Badges  (quality / bitrate labels)
   ============================================================ */
.ytvp-badge {
    font-size:     0.68rem;
    font-weight:   700;
    letter-spacing: .04em;
    padding:       2px 7px;
    border-radius: 99px;
    white-space:   nowrap;
}

.ytvp-badge-purple  { background: rgba(147,51,234,.18); color: #c084fc; border: 1px solid rgba(147,51,234,.35); }
.ytvp-badge-blue    { background: rgba(59,130,246,.18); color: #60a5fa; border: 1px solid rgba(59,130,246,.35); }
.ytvp-badge-cyan    { background: rgba(6,182,212,.18);  color: #22d3ee; border: 1px solid rgba(6,182,212,.35);  }
.ytvp-badge-green   { background: rgba(34,197,94,.18);  color: #4ade80; border: 1px solid rgba(34,197,94,.35);  }
.ytvp-badge-yellow  { background: rgba(234,179,8,.18);  color: #fbbf24; border: 1px solid rgba(234,179,8,.35);  }
.ytvp-badge-gray    { background: rgba(107,114,128,.18);color: #9ca3af; border: 1px solid rgba(107,114,128,.35);}
.ytvp-badge-red     { background: rgba(239,68,68,.18);  color: #f87171; border: 1px solid rgba(239,68,68,.35);  }

/* ---- Light-theme badge overrides ---- */
.ytvp-theme-light .ytvp-badge-purple { background: #f3e8ff; color: #7e22ce; border-color: #d8b4fe; }
.ytvp-theme-light .ytvp-badge-blue   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ytvp-theme-light .ytvp-badge-cyan   { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.ytvp-theme-light .ytvp-badge-green  { background: #f0fdf4; color: #15803d; border-color: #86efac; }
.ytvp-theme-light .ytvp-badge-yellow { background: #fefce8; color: #a16207; border-color: #fde047; }
.ytvp-theme-light .ytvp-badge-gray   { background: #f9fafb; color: #374151; border-color: #d1d5db; }

/* ============================================================
   Empty / error
   ============================================================ */
.ytvp-empty {
    color:      var(--ytvp-muted);
    font-size:  0.88rem;
    text-align: center;
    padding:    24px 0;
}

.ytvp-error {
    margin-top:    18px;
    background:    rgba(255,0,0,.08);
    border:        1px solid rgba(255,0,0,.28);
    border-radius: var(--ytvp-radius-sm);
    padding:       12px 16px;
    color:         #ff6b6b;
    font-size:     0.88rem;
    animation:     ytvp-fadein .25s ease;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 520px) {
    .ytvp-wrap               { padding: 18px 14px; }
    .ytvp-video-info         { flex-direction: column; }
    .ytvp-thumb              { width: 100%; height: auto; max-height: 180px; }
    .ytvp-formats-grid       { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .ytvp-tab-btn            { padding: 9px 12px; font-size: 0.82rem; }
}