/* ═══════════════════════════════════════════
   YT Audio Player — Public CSS v2.1
   Theme: Dark Navy / Indigo
   ═══════════════════════════════════════════ */
.ytap-player, .ytap-player * { box-sizing: border-box; margin: 0; padding: 0; }

.ytap-player {
    --c1:    #818cf8;
    --c2:    #6366f1;
    --bg:    #1a1c2e;
    --surf:  #20233a;
    --surf2: #272b45;
    --bdr:   rgba(255,255,255,.09);
    --muted: #7c8490;
    --text:  #f1f5f9;
    --sub:   #a0aab8;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    max-width: 100%; width: 100%;
    background: var(--bg);
    border-radius: 12px;
    border: 1px solid var(--bdr);
    box-shadow: 0 4px 24px rgba(0,0,0,.45);
    overflow: hidden;
    margin: 0 auto 30px;
}

/* ── Header ── */
.ytap-header {
    background: var(--surf);
    border-bottom: 1px solid var(--bdr);
    padding: 14px 18px;
    display: flex; align-items: center; gap: 11px;
}
.ytap-header-icon {
    width: 36px; height: 36px; background: var(--surf2);
    border-radius: 8px; border: 1px solid var(--bdr);
    display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0;
}
.ytap-header-title { font-size: 14px; font-weight: 700; color: var(--text); }
.ytap-header-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .06em; }

/* ── Now Playing ── */
.ytap-np {
    position: relative;
    overflow: hidden;
    padding: 20px 18px 16px;
    border-bottom: 1px solid var(--bdr);
}
/* Layer 1: blurred ambient bg */
.ytap-np-blur {
    position: absolute; inset: -20px;
    background-size: cover; background-position: center;
    filter: blur(30px) brightness(.22) saturate(2.2);
    transform: scale(1.12); z-index: 0;
    transition: background-image .6s ease;
    background-color: var(--surf);
}
/* Layer 2: vignette */
.ytap-np-vignette {
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(ellipse 80% 55% at 50% 110%, rgba(99,102,241,.22) 0%, transparent 70%),
        linear-gradient(180deg, rgba(18,20,42,.25) 0%, rgba(18,20,42,.82) 100%);
}
/* Layer 3: content */
.ytap-np-inner {
    position: relative; z-index: 2;
    width: 100%;
}
.ytap-np-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-bottom: 16px;
}
.ytap-np-info { flex: 1; min-width: 0; overflow: hidden; margin-left: 18px; }

/* Art with glow ring */
.ytap-np-art-wrap {
    position: relative;
    flex-shrink: 0;
    width: 76px; height: 76px;
}
.ytap-np-art-glow {
    position: absolute; inset: -6px; border-radius: 16px;
    background: linear-gradient(135deg, var(--c2), #a78bfa, var(--c1));
    opacity: .45; filter: blur(10px); z-index: 0;
    animation: ytap-glow-pulse 2.5s ease-in-out infinite alternate;
    transition: opacity .3s;
}
.ytap-np-art-glow.ytap-idle { opacity: 0; animation: none; }
@keyframes ytap-glow-pulse { from{opacity:.28;transform:scale(.96)} to{opacity:.58;transform:scale(1.02)} }
.ytap-np-art {
    position: absolute; inset: 0; z-index: 1;
    border-radius: 13px; overflow: hidden;
    background: var(--surf2);
    border: 1.5px solid rgba(255,255,255,.14);
    box-shadow: 0 8px 28px rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
}
.ytap-np-img { width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .4s; }
.ytap-np-img.ytap-loaded { opacity:1; }

/* Info */
.ytap-np-info { flex: 1; min-width: 0; overflow: hidden; }
.ytap-np-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 9px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--c1); margin-bottom: 7px;
}
.ytap-np-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c1); flex-shrink: 0;
    box-shadow: 0 0 6px rgba(129,140,248,.8);
    animation: ytap-dot-blink 1.4s ease-in-out infinite;
    transition: opacity .3s;
}
.ytap-np-dot.ytap-idle { animation: none; opacity: .35; }
@keyframes ytap-dot-blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.65)} }

/* Marquee */
.ytap-np-marquee {
    overflow: hidden; margin-bottom: 6px;
    mask-image: linear-gradient(90deg, black 0%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, black 0%, black 85%, transparent 100%);
}
.ytap-np-title {
    display: inline-block; white-space: nowrap;
    font-size: 15px; font-weight: 700; color: #eef0ff; letter-spacing: -.01em;
}
.ytap-np-title.ytap-marquee-on { animation: ytap-marquee 12s linear infinite; padding-right: 50px; }
@keyframes ytap-marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-55%)} }
.ytap-np-artist { font-size:12px;color:rgba(180,185,240,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* Play button */
.ytap-np-pulse {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--c2), var(--c1));
    color: #fff; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: none; outline: none;
    box-shadow: 0 4px 20px rgba(99,102,241,.55);
    animation: ytap-play-ring 2.2s ease-in-out infinite;
    transition: transform .15s;
}
.ytap-np-pulse:hover { transform: scale(1.1); }
.ytap-np-pulse.ytap-idle { animation: none; box-shadow: 0 2px 12px rgba(99,102,241,.3); }
@keyframes ytap-play-ring {
    0%  { box-shadow: 0 4px 20px rgba(99,102,241,.55), 0 0 0 0   rgba(99,102,241,.3); }
    60% { box-shadow: 0 4px 20px rgba(99,102,241,.55), 0 0 0 14px rgba(99,102,241,0); }
    100%{ box-shadow: 0 4px 20px rgba(99,102,241,.55), 0 0 0 0   rgba(99,102,241,0); }
}

/* ── Progress (inside NP) ── */
.ytap-prog-wrap {
    position: relative; z-index: 2;
    padding: 0 18px 18px;
    background: transparent;
    border-bottom: 1px solid var(--bdr);
}
.ytap-time-row { display:flex;justify-content:space-between;font-size:11px;color:rgba(180,185,240,.4);margin-bottom:7px;letter-spacing:.03em;font-weight:600; }

.ytap-prog-track {
    height: 6px; background: #2a2f52;
    border-radius: 3px; cursor: pointer; position: relative; min-width: 80px;
    transition: height .15s; border: none;
}
.ytap-prog-track:hover { height: 8px; }
.ytap-prog-fill {
    height:100%; border-radius:3px;
    background: linear-gradient(90deg, var(--c2), var(--c1));
    width:0%; transition: width .4s ease; pointer-events:none; position:relative;
    box-shadow: 0 0 8px rgba(129,140,248,.4);
}
.ytap-prog-fill::after {
    content:''; position:absolute; right:-5px; top:50%; transform:translateY(-50%);
    width:11px; height:11px; border-radius:50%; background:var(--c1);
    opacity:0; transition:opacity .15s; box-shadow: 0 0 8px rgba(129,140,248,.6);
}
.ytap-prog-track:hover .ytap-prog-fill::after { opacity:1; }

/* ── Column header row ── */
.ytap-list-header {
    display:flex; align-items:center; gap:10px;
    padding: 9px 14px 9px 18px;
    background: var(--surf); border-bottom: 1px solid var(--bdr);
}
.ytap-list-header span {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.ytap-lh-num  { width:20px; flex-shrink:0; }
.ytap-lh-thumb{ width:56px; flex-shrink:0; }
.ytap-lh-play { width:34px; flex-shrink:0; }
.ytap-lh-title{ flex:1; }
.ytap-lh-dur  { width:36px; text-align:right; }
.ytap-lh-dl   { width:30px; text-align:center; }

/* ── Song list ── */
.ytap-list { max-height: 400px; overflow-y: auto; background: var(--bg); }
.ytap-list::-webkit-scrollbar       { width: 6px; }
.ytap-list::-webkit-scrollbar-track { background: transparent; }
.ytap-list::-webkit-scrollbar-thumb { background: var(--surf2); border-radius: 3px; }
.ytap-list::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Song row ── */
.ytap-item {
    display:flex; align-items:center; gap:10px;
    padding: 11px 14px 11px 18px;
    cursor:pointer; position:relative; user-select:none;
    border-bottom: 1px solid var(--bdr);
    transition: background .15s;
    background: transparent;
}
.ytap-item:last-child { border-bottom: none; }

/* Hover — slightly lighter dark, no border */
.ytap-item:hover             { background: rgba(255,255,255,.04); }
.ytap-item.ytap-active       { background: rgba(99,102,241,.10); }
.ytap-item.ytap-active:hover { background: rgba(99,102,241,.14); }

/* Active left bar */
.ytap-item.ytap-active::before {
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:3px; background:var(--c1); border-radius:0 2px 2px 0;
}

/* Serial */
.ytap-serial { width:20px;text-align:center;font-size:11px;color:var(--muted);font-weight:600;flex-shrink:0; }
.ytap-item.ytap-active .ytap-serial { display:none; }

/* Equalizer */
.ytap-eq { display:none;gap:2px;align-items:flex-end;height:16px;flex-shrink:0; }
.ytap-item.ytap-active.ytap-playing .ytap-eq    { display:flex; }
.ytap-item.ytap-active.ytap-playing .ytap-serial { display:none; }
.ytap-eq-bar { width:3px;border-radius:2px;background:var(--c1);animation:ytap-eq .9s ease-in-out infinite alternate; }
.ytap-eq-bar:nth-child(1){height:8px;animation-delay:0s}
.ytap-eq-bar:nth-child(2){height:14px;animation-delay:.2s}
.ytap-eq-bar:nth-child(3){height:6px;animation-delay:.4s}
.ytap-eq-bar:nth-child(4){height:11px;animation-delay:.1s}
@keyframes ytap-eq { from{transform:scaleY(.3)} to{transform:scaleY(1)} }

/* Thumbnail */
.ytap-thumb {
    width:56px;height:56px;border-radius:8px;overflow:hidden;flex-shrink:0;
    background:var(--surf2);border:1px solid var(--bdr);
    display:flex;align-items:center;justify-content:center;font-size:18px;position:relative;
}
.ytap-thumb img { width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .3s; }
.ytap-thumb img.ytap-loaded { opacity:1; }
.ytap-thumb-mask {
    position:absolute;inset:0;border-radius:6px;background:rgba(0,0,0,0);
    display:flex;align-items:center;justify-content:center;transition:background .2s;pointer-events:none;
}
.ytap-item:hover .ytap-thumb-mask,
.ytap-item.ytap-active .ytap-thumb-mask { background:rgba(0,0,0,.4); }
.ytap-thumb-icon { color:#fff;font-size:14px;opacity:0;transition:opacity .2s; }
.ytap-item:hover .ytap-thumb-icon,
.ytap-item.ytap-active .ytap-thumb-icon { opacity:1; }

/* Info */
.ytap-info { flex:1;min-width:0;overflow:hidden; }
.ytap-name {
    display:block; max-width:100%;
    font-size:13px; font-weight:500; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:color .15s;
}
.ytap-item:hover .ytap-name       { color:var(--c1); }
.ytap-item.ytap-active .ytap-name { color:var(--c1); font-weight:700; }
.ytap-artist { font-size:11px;color:var(--muted);margin-top:2px; }

/* Badge */
.ytap-count {
    display:inline-block; padding:2px 8px; border-radius:4px;
    font-family:monospace; font-size:11px; font-weight:700;
    background:rgba(129,140,248,.15); color:var(--c1);
    margin-left:5px; vertical-align:middle;
}
.ytap-count.ytap-count-warn { background:rgba(251,191,36,.12); color:#fbbf24; }
.ytap-count.ytap-count-low  { background:rgba(239,68,68,.12);  color:#f87171; }

/* Skipped */
.ytap-item.ytap-skipped { opacity:.32; pointer-events:none; }
.ytap-item.ytap-skipped .ytap-name::after { content:' — unavailable'; font-size:10px;color:#f87171;font-style:italic; }

/* Duration */
.ytap-dur { font-size:11px;color:var(--muted);flex-shrink:0;min-width:34px;text-align:right;font-variant-numeric:tabular-nums; }

/* ── Play button ── */
.ytap-btn {
    width:34px;height:34px;border:none;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;
    transition:transform .15s, background .15s, opacity .15s; outline:none;
}
.ytap-item:not(.ytap-active) .ytap-btn-off {
    background:var(--surf2); color:var(--c1);
    border:1px solid var(--bdr); opacity:0; transform:scale(.78);
}
.ytap-item:hover .ytap-btn-off      { opacity:1!important; transform:scale(1)!important; }
.ytap-item:not(.ytap-active) .ytap-btn-on { display:none; }
.ytap-item.ytap-active .ytap-btn-off      { display:none; }
.ytap-item.ytap-active .ytap-btn-on {
    background:var(--c2); color:#fff;
    box-shadow:0 2px 12px rgba(99,102,241,.45);
}
.ytap-btn:hover  { transform:scale(1.15)!important; }
.ytap-btn:active { transform:scale(.9)!important; }

/* ── Download button ── */
.ytap-dl {
    width:30px;height:30px; border:1px solid var(--bdr); border-radius:6px;
    background:var(--surf2); color:var(--c1); font-size:14px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;flex-shrink:0;text-decoration:none;
    transition:all .15s; outline:none;
}
.ytap-dl:hover {
    background:var(--c2)!important; border-color:var(--c2)!important;
    color:#fff!important; transform:scale(1.1);
    box-shadow:0 3px 12px rgba(99,102,241,.4);
}

/* ── Footer ── */
.ytap-footer {
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 18px;
    background:var(--surf); border-top:1px solid var(--bdr);
}
.ytap-ctrls { display:flex;gap:5px; }
.ytap-ctrl {
    width:32px;height:32px;background:var(--surf2);border:1px solid var(--bdr);
    border-radius:7px;cursor:pointer;font-size:13px;
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);transition:all .15s;
}
.ytap-ctrl:hover { border-color:var(--c1);color:var(--c1);transform:scale(1.08); }
.ytap-ctrl.ytap-on { background:rgba(99,102,241,.15);border-color:var(--c1);color:var(--c1); }
.ytap-vol-row { display:flex;align-items:center;gap:7px; }
.ytap-vol-row span { font-size:14px;color:var(--muted); }
.ytap-vol-slider {
    -webkit-appearance:none; width:80px;height:4px;border-radius:3px;
    background:#2a2f52;border:none;outline:none;cursor:pointer;
}
.ytap-vol-slider::-webkit-slider-thumb {
    -webkit-appearance:none;width:13px;height:13px;border-radius:50%;
    background:var(--c1);cursor:pointer;box-shadow:0 0 6px rgba(129,140,248,.5);
}

/* ── Mini floating player ── */
.ytap-mini {
    position:fixed;bottom:22px;right:22px;z-index:99999;
    background:#1a1c2e; border:1px solid var(--bdr); border-radius:12px;
    padding:12px 14px 13px; display:flex;flex-direction:column;gap:10px;
    box-shadow:0 8px 32px rgba(0,0,0,.5); width:295px;
    transform:translateY(110px);opacity:0;pointer-events:none;
    transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s;
}
.ytap-mini.ytap-mini-show { transform:translateY(0);opacity:1;pointer-events:all; }
.ytap-mini-row { display:flex;align-items:center;gap:11px; }
.ytap-mini-art {
    width:40px;height:40px;border-radius:7px;overflow:hidden;flex-shrink:0;
    background:var(--surf2);border:1px solid var(--bdr);
    display:flex;align-items:center;justify-content:center;font-size:17px;position:relative;
}
.ytap-mini-img { width:100%;height:100%;object-fit:cover;border-radius:7px;position:absolute;inset:0;opacity:0;transition:opacity .3s; }
.ytap-mini-img.ytap-loaded { opacity:1; }
.ytap-mini-info { flex:1;min-width:0; }
.ytap-mini-title  { font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ytap-mini-artist { font-size:11px;color:var(--muted);margin-top:2px; }
.ytap-mini-btns   { display:flex;gap:5px;flex-shrink:0; }
.ytap-mini-btn {
    width:29px;height:29px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;transition:transform .15s;outline:none;border:1px solid var(--bdr);
}
.ytap-mini-btn:hover { transform:scale(1.15); }
.ytap-m-prev,.ytap-m-next { background:var(--surf2);color:var(--muted); }
.ytap-m-play { background:var(--c2);color:#fff;border-color:var(--c2);box-shadow:0 2px 10px rgba(99,102,241,.4); }
.ytap-mini-prog { height:6px;background:#2a2f52;border-radius:3px;overflow:hidden;cursor:pointer;min-width:80px;border:none; }
.ytap-mini-fill { height:100%;border-radius:3px;background:var(--c1);width:0%;transition:width .4s ease; }

/* ── Toast ── */
.ytap-toast {
    position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(60px);
    background:#20233a;color:var(--text);padding:9px 20px;border-radius:6px;
    font-size:12px;z-index:99998;opacity:0;transition:all .3s;pointer-events:none;
    white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.4);
    border:1px solid var(--bdr);
}
.ytap-toast.ytap-toast-show { opacity:1;transform:translateX(-50%) translateY(0); }

/* ── Error ── */
.ytap-error { padding:12px 16px;border:1px solid rgba(239,68,68,.3);background:rgba(239,68,68,.08);border-radius:8px;font-size:13px;color:#f87171; }

/* ── Responsive ── */
@media(max-width:480px){
    .ytap-mini{width:calc(100% - 32px);right:16px;bottom:16px;}
    .ytap-vol-slider{width:55px;}
    .ytap-item { padding: 9px 10px 9px 12px; gap: 8px; }
    .ytap-thumb { width:46px; height:46px; }
    .ytap-footer { padding: 9px 12px; }
    .ytap-header { padding: 12px 14px; }
}