* { box-sizing: border-box; }
*[hidden] { display: none !important; }
.theme-chrome { display: none; position: absolute; inset: 0; z-index: 11; pointer-events: none; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #080708; color: var(--ink); font-family: var(--display); letter-spacing: .04em; }
button, input { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
.noise { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .075; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); mix-blend-mode: screen; }
.jukebox-shell { width: min(1500px, calc(100% - 44px)); min-height: 100vh; margin: auto; background: linear-gradient(135deg, #120d12 0%, #0a090c 55%, #1b1015 100%); box-shadow: 0 0 90px rgba(0,0,0,.7); }
.topbar { min-height: 104px; display: flex; align-items: center; padding: 0 30px; border: 1px solid var(--line); border-top: 0; background: linear-gradient(90deg, rgba(25,13,18,.98), rgba(13,13,16,.96) 58%, rgba(28,12,17,.98)); }
.brand { display: flex; gap: 15px; align-items: center; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--amber); color: var(--amber); transform: rotate(45deg); font-size: 15px; }
.brand strong { display: block; line-height: .8; font: 27px/1 var(--display-head); letter-spacing: .12em; }
.brand small { display: block; margin-top: 7px; color: var(--muted); font: 9px var(--mono); letter-spacing: .17em; }
.public-status { display: flex; align-items: center; gap: 11px; margin-left: auto; color: var(--muted); font: 10px var(--mono); letter-spacing: .07em; }
.live-dot, .pulse, .status-light { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
.divider { height: 19px; width: 1px; background: var(--line); margin: 0 8px; }
.signal-line { height: 4px; background: #080708; border-inline: 1px solid var(--line); }
.signal-line span { display: block; width: 31%; height: 100%; background: repeating-linear-gradient(90deg, var(--amber) 0 1px, transparent 1px 8px); opacity: .58; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; min-height: calc(100vh - 132px); }
.main-stage { position: relative; min-width: 0; padding: 34px 36px 60px; overflow: hidden; background: radial-gradient(circle at 65% 12%, rgba(91,27,34,.28), transparent 36%); }
.main-stage::after { content: ""; position: absolute; z-index: 0; top: 80px; right: 30px; width: 255px; height: 330px; background: url("/assets/clande-rock-logo.png") center / contain no-repeat; opacity: .08; filter: saturate(1.2) sepia(.15); pointer-events: none; }
.main-stage > * { position: relative; z-index: 1; }
.queue-panel { padding: 31px 24px; border-left: 1px solid var(--line); background: linear-gradient(180deg, rgba(28,14,19,.72), rgba(14,14,18,.82)); }
.stage-heading, .queue-topline, .results-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.eyebrow { display: block; color: var(--muted); font: 10px var(--mono); letter-spacing: .17em; text-transform: uppercase; }
.eyebrow.amber { color: var(--amber); }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.tiny { font-size: 9px; }
h1, h2, p { margin: 0; }
h1 { margin-top: 8px; font: 48px/.95 var(--display-head); letter-spacing: .06em; text-transform: uppercase; }
h1 em { color: var(--amber); font-style: normal; }
.signal-readout { display: flex; align-items: center; gap: 7px; color: var(--cyan); font: 9px var(--mono); letter-spacing: .1em; }
.signal-readout .mono { margin-left: 10px; color: var(--muted); font-size: 8px; }
.pulse { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.search-console { position: relative; padding: 19px 22px 15px; margin-top: 26px; border: 1px solid rgba(218,139,123,.38); background: linear-gradient(100deg, #26181d, #141115 70%); box-shadow: inset 0 0 0 4px #171014, 0 7px 24px rgba(0,0,0,.32); }
.search-console::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.05); pointer-events: none; }
.console-screw { position: absolute; z-index: 1; width: 6px; height: 6px; border-radius: 50%; background: #777267; box-shadow: inset 1px 1px 2px #222; }.screw-a { top: 9px; left: 10px; }.screw-b { right: 10px; bottom: 9px; }
.search-label { display: flex; justify-content: space-between; color: var(--amber); font-size: 9px; }
.key-hint { padding: 1px 5px; border: 1px solid rgba(231,189,98,.3); color: var(--muted); font: 9px var(--mono); }
.search-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.search-icon { color: var(--amber); font: 29px/1 Arial; transform: rotate(-16deg); }
.search-row input { min-width: 0; flex: 1; padding: 9px 0; border: 0; outline: 0; background: none; color: var(--ink); font: 19px var(--display); letter-spacing: .04em; }
.search-row input::placeholder { color: #65645e; }
.search-button { padding: 11px 15px; border: 1px solid var(--amber); background: rgba(231,189,98,.08); color: var(--amber-bright); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: .2s; }
.search-button span { margin-left: 10px; font-size: 17px; }.search-button:hover { background: var(--amber); color: #131313; }
.search-note { margin-top: 13px; color: #696b66; font: 8px var(--mono); }.status-light { width: 5px; height: 5px; margin-right: 6px; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.credit-access { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 15px; padding-top: 12px; border-top: 1px solid rgba(201,185,143,.1); color: #8a877b; font-size: 8px; }.credit-access input { width: 76px; padding: 5px 7px; border: 1px solid rgba(231,189,98,.35); outline: 0; background: #0e1213; color: var(--amber-bright); font: 12px var(--mono); letter-spacing: .14em; text-align: center; }.credit-access input:focus { border-color: var(--amber); box-shadow: 0 0 10px rgba(231,189,98,.13); }.credit-status { margin-left: auto; color: #6b756f; font: 8px var(--mono); letter-spacing: .05em; }.credit-status.ready { color: var(--cyan); }
.credit-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; }.credit-backdrop { position: absolute; z-index: 0; inset: 0; background: rgba(2,4,5,.78); backdrop-filter: blur(4px); }.credit-dialog { position: relative; z-index: 1; width: min(390px,100%); padding: 29px; border: 1px solid rgba(231,189,98,.45); background: linear-gradient(145deg,#1b2021,#101416); box-shadow: 0 25px 80px #000, inset 0 0 25px rgba(0,0,0,.45); }.credit-dialog h2 { margin-top: 9px; font: 35px var(--display-head); letter-spacing: .08em; text-transform: uppercase; }.credit-dialog p { margin-top: 12px; color: #a1a097; font-size: 13px; line-height: 1.35; }.credit-dialog input { width: 100%; margin-top: 22px; padding: 13px 12px; border: 1px solid rgba(231,189,98,.42); outline: 0; background: #0a0d0f; color: var(--amber-bright); font: 20px var(--mono); letter-spacing: .22em; text-align: center; }.credit-dialog input:focus { border-color: var(--amber); box-shadow: 0 0 16px rgba(231,189,98,.15); }.modal-close { position: absolute; top: 10px; right: 13px; background: transparent; color: #777a72; font-size: 23px; }.modal-close:hover { color: var(--amber); }.modal-error { min-height: 20px; margin-top: 9px; color: #e27c6e; font: 9px var(--mono); text-align: center; }.modal-submit { width: 100%; margin-top: 5px; }
.hero-panel { position: relative; height: 230px; overflow: hidden; margin-top: 28px; border: 1px solid #414138; background: linear-gradient(160deg, #11242a, #0d151d 48%, #0d0c11); box-shadow: inset 0 0 40px #050708, 0 8px 28px rgba(0,0,0,.3); }
.hero-panel::after { content: ""; position: absolute; inset: 0; z-index: 4; border: 9px solid rgba(0,0,0,.17); pointer-events: none; }
.moon { position: absolute; top: 24px; right: 19%; width: 108px; height: 108px; border-radius: 50%; background: #d3c795; box-shadow: 0 0 45px rgba(215,200,135,.38); opacity: .85; }.moon::after { content: ""; position: absolute; inset: 15px 22px 27px 8px; border-radius: 50%; background: rgba(91,92,74,.15); box-shadow: 30px 37px 0 1px rgba(77,80,68,.14), 16px 64px 0 -3px rgba(77,80,68,.18); }
.horizon { position: absolute; inset: auto 0 0; height: 41%; background: linear-gradient(180deg, transparent, #07090d 58%); z-index: 1; }.mountain { position: absolute; z-index: 1; bottom: 15%; width: 80%; height: 85%; background: #101a1d; clip-path: polygon(0 100%, 21% 57%, 32% 70%, 48% 30%, 65% 63%, 74% 45%, 100% 100%); opacity: .75; }.mountain-back { right: -3%; transform: scale(.95); opacity: .45; background: #24343a; }.mountain-front { left: -7%; bottom: 7%; transform: scale(1.1); }
.css-tree { position: absolute; z-index: 2; bottom: 3%; width: 0; height: 0; border-left: 31px solid transparent; border-right: 31px solid transparent; border-bottom: 150px solid #080b0e; filter: drop-shadow(0 0 7px #06080a); }.css-tree::before, .css-tree::after { content: ""; position: absolute; width: 4px; height: 155px; background: #080b0e; transform-origin: bottom; }.css-tree::before { left: -2px; top: 20px; transform: rotate(39deg); }.css-tree::after { right: -3px; top: 37px; transform: rotate(-42deg); }.tree-one { right: 8%; transform: scale(1.25); }.tree-two { right: 29%; transform: scale(.8); opacity: .72; }.tree-three { left: 42%; transform: scale(.52); opacity: .55; }
.hero-scanlines { position: absolute; z-index: 3; inset: 0; opacity: .2; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(193,205,182,.16) 3px 4px); }.hero-copy { position: relative; z-index: 5; width: 52%; padding: 29px 0 0 29px; }.hero-title { margin-top: 9px; font: 54px/.76 var(--display-head); letter-spacing: .1em; color: #e4ddc7; text-shadow: 3px 3px #20231f; }.hero-title span { color: var(--amber); font-size: .67em; letter-spacing: .22em; }.hero-copy p { max-width: 290px; margin-top: 18px; color: #9b9b8f; font-size: 12px; line-height: 1.3; }.hero-meta { display: flex; align-items: center; gap: 15px; margin-top: 17px; }.red-stamp { padding: 3px 7px; border: 1px solid var(--red); color: #e2826e; font: 10px var(--mono); transform: rotate(-3deg); }.hero-meta .mono { color: #9e9a84; font-size: 8px; }.hero-caption { position: absolute; z-index: 6; bottom: 12px; right: 18px; color: #99aaa1; font-size: 8px; letter-spacing: .14em; }.hero-caption span { color: var(--amber); padding: 0 8px; }
.results-heading { align-items: end; margin: 31px 0 15px; }.results-heading h2, .queue-heading h2 { margin-top: 5px; font: 26px var(--display-head); letter-spacing: .08em; text-transform: uppercase; }.result-count { color: var(--muted); font-size: 9px; }
.results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.video-card { min-width: 0; padding-bottom: 12px; border: 1px solid rgba(201,185,143,.12); background: rgba(17,21,26,.85); transition: transform .22s, border-color .22s, background .22s; }.video-card:hover { transform: translateY(-3px); border-color: rgba(231,189,98,.55); background: #1a2025; }.video-art { position: relative; height: 110px; overflow: hidden; background: #1b2426; }.video-art::before, .video-art::after { content: ""; position: absolute; }.video-art::after { inset: 0; background: linear-gradient(0deg, rgba(3,5,6,.84), transparent 60%); }.video-art::before { width: 100px; height: 100px; right: 12%; top: -30px; border-radius: 50%; background: rgba(204,193,139,.65); box-shadow: 0 0 31px rgba(232,207,128,.32); }.art-eddie { background: linear-gradient(135deg, #1d2825, #3b3920 58%, #151113); }.art-eddie::before { background: var(--amber); }.art-moon { background: linear-gradient(150deg, #102a35, #152024 60%, #0b1115); }.art-red { background: linear-gradient(145deg, #24151b, #5c2521 58%, #131016); }.art-red::before { background: #a53a31; }.art-ember { background: linear-gradient(145deg, #2b2117, #9b4b26 58%, #161214); }.art-ember::before { background: #e2b75f; }.art-blue { background: linear-gradient(145deg, #0c1d2e, #1a3c4d 52%, #091118); }.art-blue::before { background: #92b2a1; }.video-tag { position: absolute; z-index: 1; top: 9px; left: 9px; padding: 3px 5px; color: #e5cf9c; background: rgba(12,13,12,.72); font: 8px var(--mono); letter-spacing: .06em; }.add-card { position: absolute; z-index: 2; right: 7px; bottom: 8px; width: 27px; height: 27px; border: 1px solid var(--amber); border-radius: 50%; background: rgba(10,11,11,.7); color: var(--amber); font-size: 20px; line-height: 1; transition: .2s; }.add-card:hover { background: var(--amber); color: #10100d; transform: rotate(90deg); }.video-info { padding: 11px 10px 0; }.video-info strong { display: block; overflow: hidden; color: #e2dfd1; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.video-info span { display: block; margin-top: 4px; overflow: hidden; color: #7d807c; font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.youtube-art { position: relative; background: #15191c; }.youtube-art::before { display: none; }.youtube-art img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .74; filter: saturate(.7) contrast(1.16); }.youtube-art::after { z-index: 1; }.youtube-art .video-tag, .youtube-art .add-card, .youtube-art .equalizer { z-index: 2; }
.queue-heading { display: flex; align-items: center; gap: 10px; margin-top: 4px; }.queue-heading h2 { font-size: 31px; }.queue-badge { display: grid; place-items: center; min-width: 22px; height: 22px; border: 1px solid var(--amber); color: var(--amber); font: 10px var(--mono); }
.now-playing { margin-top: 25px; padding: 14px 13px 12px; border: 1px solid rgba(231,189,98,.25); background: linear-gradient(145deg, #1d2020, #131719); box-shadow: inset 0 0 20px rgba(0,0,0,.42); }.now-label { color: var(--amber); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.now-label .live-dot { width: 5px; height: 5px; margin-right: 7px; }.now-thumb { position: relative; height: 116px; margin-top: 12px; overflow: hidden; }.art-live { background: linear-gradient(140deg, #4f4a1e, #171f20 54%, #2c1719); }.art-live::before { content: ""; position: absolute; left: 43%; bottom: -39px; width: 100px; height: 157px; border-radius: 50% 50% 20% 20%; background: #0d1111; box-shadow: -45px -67px 0 -38px #d2bd62, 48px -61px 0 -40px #d2bd62; }.equalizer { position: absolute; z-index: 1; right: 9px; bottom: 9px; display: flex; align-items: end; gap: 3px; height: 19px; }.equalizer i { width: 3px; background: var(--amber); animation: eq .7s ease-in-out infinite alternate; }.equalizer i:nth-child(1) { height: 40%; }.equalizer i:nth-child(2) { height: 90%; animation-delay: -.2s; }.equalizer i:nth-child(3) { height: 60%; animation-delay: -.5s; }.equalizer i:nth-child(4) { height: 75%; animation-delay: -.1s; }@keyframes eq { to { transform: scaleY(.5); opacity: .28; } }
.now-info { padding-top: 11px; }.now-info strong { display: block; color: #e5dfca; font-size: 17px; font-weight: 600; }.now-info span { display: block; margin-top: 3px; color: var(--muted); font: 10px var(--mono); }.progress { height: 3px; margin-top: 14px; background: #383a35; }.progress span { display: block; width: 58%; height: 100%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }.time-row { display: flex; justify-content: space-between; margin-top: 7px; color: #77786f; font-size: 8px; }
.waiting-state { display: grid; gap: 10px; place-items: center; min-height: 169px; color: var(--muted); font: 10px var(--mono); text-align: center; }.waiting-state strong { color: var(--ink); font: 18px var(--display); letter-spacing: .08em; text-transform: uppercase; }.waiting-state .pulse { width: 10px; height: 10px; }
.queue-label { display: flex; justify-content: space-between; margin: 28px 0 10px; color: var(--muted); font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }.queue-list { min-height: 78px; }.queue-item { display: grid; grid-template-columns: 22px 37px 1fr; gap: 9px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(201,185,143,.09); }.queue-index { color: #696b66; font: 10px var(--mono); }.queue-cover { width: 37px; height: 33px; overflow: hidden; }.queue-cover::before { opacity: .64; }.queue-item strong { display: block; overflow: hidden; color: #d5d1c2; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.queue-item span { display: block; overflow: hidden; margin-top: 3px; color: #73766e; font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }.empty-queue { padding: 18px 0; color: var(--muted); font: 10px var(--mono); text-align: center; }.tip { margin-top: 16px; color: #5e625f; font-size: 8px; line-height: 1.5; }.tip span { color: var(--amber); }
.footer-bar { display: flex; justify-content: space-between; padding: 16px 30px; border: 1px solid var(--line); color: #595d59; font-size: 8px; }.footer-bar b { color: var(--amber); font-weight: 400; }.footer-center { color: #77766d; font: 11px var(--display); letter-spacing: .1em; }.toast { position: fixed; z-index: 100; right: 29px; bottom: 27px; padding: 12px 16px; border: 1px solid var(--amber); background: #151916; color: var(--amber-bright); box-shadow: 0 10px 24px #000; font: 11px var(--mono); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s; }.toast.show { opacity: 1; transform: translateY(0); }.loading { grid-column: 1/-1; padding: 32px; border: 1px dashed var(--line); color: var(--muted); font: 11px var(--mono); text-align: center; }
@media (max-width: 900px) { .layout { grid-template-columns: minmax(0,1fr); }.queue-panel,.queue-list { min-width: 0; }.queue-panel { border-top: 1px solid var(--line); border-left: 0; }.queue-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 22px; } }
@media (max-width: 680px) { .jukebox-shell { width: 100%; }.topbar { padding: 17px 18px; }.public-status { font-size: 8px; }.main-stage { padding: 26px 17px 45px; }.stage-heading { display: block; }.signal-readout { margin-top: 16px; }.results-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.hero-panel { height: 286px; }.hero-copy { width: 68%; padding-left: 19px; }.moon { right: 5%; }.tree-one { right: -1%; }.queue-panel { padding: 26px 17px; }.footer-bar { gap: 12px; padding-inline: 18px; }.footer-center { display: none; } }
@media (max-width: 460px) { h1 { font-size: 38px; }.search-row { gap: 8px; }.search-row input { font-size: 16px; }.search-button { padding-inline: 10px; }.search-button span { margin-left: 2px; }.results-grid { grid-template-columns: 1fr; }.video-art { height: 145px; }.public-status .divider, .public-status .mono { display: none; }.queue-list { display: block; } }
.brand-logo { width: 45px; height: 68px; object-fit: contain; flex: 0 0 auto; }.brand-caption { display: grid; gap: 7px; }.brand-caption strong { display: block; font: 22px/1 var(--display-head); letter-spacing: .1em; }.brand-caption small { display: block; margin: 0; color: var(--muted); font: 8px var(--mono); letter-spacing: .15em; }.results-heading { margin-top: 22px; }.video-card .add-card { width: auto; min-width: 110px; height: 30px; padding: 0 10px; border-radius: 2px; font: 10px var(--mono); letter-spacing: .03em; line-height: 1; text-transform: uppercase; }.video-card .add-card span { margin-right: 5px; font-size: 16px; vertical-align: -1px; }.queue-item { min-width: 0; }.queue-item > div:last-child { min-width: 0; }.queue-item strong, .queue-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.confirm-modal { position: fixed; inset: 0; z-index: 31; display: grid; place-items: center; padding: 20px; }.confirm-dialog p { overflow: hidden; max-height: 48px; text-overflow: ellipsis; white-space: nowrap; }.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 17px; }.confirm-actions .modal-submit { margin-top: 0; }.cancel-button { padding: 11px; border: 1px solid rgba(201,185,143,.28); background: transparent; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }.cancel-button:hover { border-color: var(--amber); color: var(--amber); }
.now-info { min-width: 0; }.now-info strong, .now-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.processing-modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 20px; }
.processing-dialog { width: min(470px,100%); overflow: hidden; text-align: center; }
.processing-dialog::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--amber); box-shadow: 0 0 18px var(--amber); }
.processing-indicator { position: relative; display: grid; width: 76px; height: 76px; margin: 22px auto 17px; place-items: center; }
.processing-spinner { position: absolute; inset: 0; border: 1px solid rgba(231,189,98,.16); border-top-color: var(--amber); border-right-color: rgba(231,189,98,.62); border-radius: 50%; box-shadow: inset 0 0 18px rgba(231,189,98,.08); animation: genre-check-spin 1s linear infinite; }
.processing-spinner::after { content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(231,189,98,.28); border-radius: 50%; }
.processing-symbol { display: none; color: var(--cyan); font: 35px/1 var(--display-head); text-shadow: 0 0 16px currentColor; }
.processing-video { overflow: hidden; margin-top: 11px!important; color: var(--ink)!important; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.processing-dialog #processingMessage { min-height: 37px; }
.processing-track { height: 2px; margin-top: 22px; overflow: hidden; background: rgba(231,189,98,.12); }
.processing-track span { display: block; width: 38%; height: 100%; background: var(--amber); box-shadow: 0 0 9px var(--amber); animation: genre-check-track 1.35s ease-in-out infinite; }
.processing-close { width: 100%; margin-top: 20px; }
.processing-dialog[data-state="approved"] .processing-spinner,
.processing-dialog[data-state="success"] .processing-spinner { border-color: var(--cyan); animation-duration: .55s; }
.processing-dialog[data-state="success"]::before { background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.processing-dialog[data-state="success"] .processing-spinner { display: none; }
.processing-dialog[data-state="success"] .processing-symbol { display: block; }
.processing-dialog[data-state="success"] .processing-track span { width: 100%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); animation: none; }
.processing-dialog[data-state="error"]::before { background: var(--red); box-shadow: 0 0 18px var(--red); }
.processing-dialog[data-state="error"] .processing-spinner { display: none; }
.processing-dialog[data-state="error"] .processing-indicator { width: 62px; height: 62px; margin-bottom: 12px; }
.processing-dialog[data-state="error"] .processing-symbol { display: block; color: #e27c6e; font-family: var(--mono); }
.processing-dialog[data-state="error"] .processing-symbol::before { content: "×"; }
.processing-dialog[data-state="error"] .processing-symbol { font-size: 0; }
.processing-dialog[data-state="error"] .processing-symbol::before { font-size: 40px; }
.processing-dialog[data-state="error"] .processing-track { display: none; }
@keyframes genre-check-spin { to { transform: rotate(360deg); } }
@keyframes genre-check-track { from { transform: translateX(-105%); } to { transform: translateX(270%); } }

.pending-queue-item { position: relative; opacity: .48; border-bottom-color: rgba(231,189,98,.34); }
.pending-queue-item::after { content: ""; position: absolute; inset: 3px 0; border: 1px solid rgba(231,189,98,.12); pointer-events: none; }
.pending-queue-item .queue-cover img { filter: grayscale(.45) saturate(.45) contrast(1.05); }
.pending-copy { color: var(--amber)!important; letter-spacing: .08em; animation: pending-pulse 1.15s ease-in-out infinite alternate; }
.pending-scan { position: absolute; z-index: 3; inset: 0; background: linear-gradient(105deg,transparent 20%,rgba(245,211,127,.32) 48%,transparent 76%); transform: translateX(-120%); animation: pending-scan 1.45s linear infinite; }
.youtube-art .official-tag { border: 1px solid rgba(245,211,127,.48); background: rgba(83,48,16,.82); color: var(--amber-bright); box-shadow: 0 0 12px rgba(231,189,98,.18); }
@keyframes pending-pulse { to { opacity: .38; } }
@keyframes pending-scan { to { transform: translateX(120%); } }

/* Identidad del bar: la cápsula del logo funciona como pieza de la cabina, no solo como icono. */
.brand-logo { width: 78px; height: 94px; padding: 4px; border: 1px solid rgba(218,139,123,.42); border-radius: 44px 44px 28px 28px; background: radial-gradient(circle at 50% 62%, rgba(150,25,35,.4), rgba(12,8,11,.92) 70%); box-shadow: 0 0 24px rgba(180,35,42,.22), inset 0 0 18px rgba(255,154,128,.08); }
.brand-caption strong { color: #fff0e7; text-shadow: 0 0 14px rgba(223,48,56,.3); }
.brand-caption small { color: var(--amber-bright); }
.video-card .add-card:hover { transform: none; }
.video-card .add-card:active { transform: translateY(1px); }
.video-card .add-card.blocked,.video-card .add-card:disabled { min-width: 118px; border-color: rgba(200,67,53,.38); color: #c9786d; cursor: not-allowed; opacity: .82; }
.video-card .add-card.blocked:hover,.video-card .add-card:disabled:hover { background: rgba(200,67,53,.08); color: #c9786d; }
.video-card { border-color: rgba(218,139,123,.16); background: rgba(23,15,20,.9); }
.video-card:hover { border-color: rgba(217,91,76,.65); background: #2a151c; }
.now-playing { border-color: rgba(217,91,76,.32); background: linear-gradient(145deg, #291820, #141015); }
.processing-dialog[data-state="notice"]::before { background: var(--amber); box-shadow: 0 0 18px var(--amber); }
.processing-dialog[data-state="notice"] .processing-spinner { display: none; }
.processing-dialog[data-state="notice"] .processing-indicator { width: 62px; height: 62px; margin-bottom: 12px; }
.processing-dialog[data-state="notice"] .processing-symbol { display: block; color: var(--amber); font-size: 0; }
.processing-dialog[data-state="notice"] .processing-symbol::before { content: "!"; font: 40px/1 var(--display-head); }
.processing-dialog[data-state="notice"] .processing-track { display: none; }

/* Estado global de búsqueda: visible en el área donde aparecerán los resultados. */
.search-loading { display:flex;min-height:82px;align-items:center;justify-content:center;gap:12px; }
.search-spinner { width:23px;height:23px;flex:0 0 auto;border:2px solid rgba(217,91,76,.18);border-top-color:var(--amber);border-right-color:var(--amber-bright);border-radius:50%;box-shadow:0 0 13px rgba(217,91,76,.18);animation:search-spinner-turn .72s linear infinite; }
.search-button:disabled { cursor:wait;opacity:.62; }
@keyframes search-spinner-turn { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .search-spinner { animation-duration:1.8s; } }
/* Acciones del modal: dos columnas iguales, aisladas de las reglas del buscador. */
.confirm-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.confirm-actions > .cancel-button,
.confirm-actions > .modal-submit {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  grid-column: auto;
  grid-row: auto;
}

/* El título seleccionado puede ocupar dos líneas sin ensanchar el modal. */
.confirm-dialog {
  width: min(430px, 100%);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.confirm-dialog > * { min-width: 0; }
.confirm-dialog #confirmVideoTitle {
  display: -webkit-box;
  overflow: hidden;
  max-height: 2.8em;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.confirm-dialog #confirmCreditImpact {
  max-height: none;
  padding: 9px 10px;
  border-left: 2px solid var(--amber);
  background: rgba(231,189,98,.06);
  color: var(--amber-bright);
  font: 9px/1.45 var(--mono);
  white-space: normal;
}

/* Los titulos de resultados reservan dos lineas y recortan solo a partir de la tercera. */
.video-card .video-info strong {
  display: -webkit-box;
  min-height: 2.4em;
  max-height: 2.4em;
  overflow: hidden;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.credit-history{max-height:150px;overflow:auto;margin:5px 0 10px;border-top:1px solid rgba(201,185,143,.15)}
.credit-history>strong{display:block;padding-top:9px;color:var(--amber);font:8px var(--mono);letter-spacing:.08em}.credit-history span{display:block;padding:7px 0;border-bottom:1px solid rgba(201,185,143,.09)}.credit-history b,.credit-history small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.credit-history b{color:var(--ink);font:11px var(--mono)}.credit-history small{margin-top:3px;color:var(--muted);font:8px var(--mono);text-transform:uppercase}
.recommendation-filters{display:flex;gap:7px;overflow-x:auto;margin:12px 0 4px;padding-bottom:4px}.recommendation-filters button{flex:0 0 auto;padding:7px 10px;border:1px solid rgba(201,185,143,.22);background:transparent;color:var(--muted);font:8px var(--mono);letter-spacing:.06em;text-transform:uppercase}.recommendation-filters button:hover,.recommendation-filters button.active{border-color:var(--amber);color:var(--amber-bright);background:rgba(231,189,98,.08)}