/* Pick a record — accessible responsive library action and reveal dialog */
.library-toolbar>.random-record-trigger{
  display:inline-flex;align-items:center;gap:11px;min-height:43px;min-width:0;margin-right:auto;padding:5px 16px 5px 6px;
  border:1px solid rgba(255,133,65,.48);border-radius:13px;
  background:linear-gradient(110deg,rgba(232,83,1,.15),rgba(255,122,50,.045) 80%),#18171a;
  color:#fff;text-align:left;font:inherit;cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 5px 22px rgba(0,0,0,.14);
  transition:transform .18s,border-color .18s,background .18s,box-shadow .18s
}
.library-toolbar>.random-record-trigger[hidden]{display:none!important}
.random-record-trigger:hover{border-color:#ff9754;box-shadow:0 7px 25px rgba(232,83,1,.15);transform:translateY(-1px)}
.random-record-trigger:focus-visible,.random-record-close:focus-visible,.random-record-actions button:focus-visible{outline:2px solid #ff9958;outline-offset:3px}
.random-record-trigger:active{transform:scale(.98)}
.random-record-trigger-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:9px;background:linear-gradient(140deg,#ff8a41,#dc4800);box-shadow:0 4px 12px rgba(232,83,1,.24)}
.random-record-trigger-icon svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.random-record-trigger-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.random-record-trigger-copy strong{font-size:12px;font-weight:750;line-height:1.15;letter-spacing:.01em}
.random-record-trigger-copy small{font-size:10px;font-weight:500;line-height:1.2;color:#c0a69a}
.random-record-trigger-arrow{margin-left:7px;color:#f89052;font-size:20px;font-weight:400}
.random-record-overlay[hidden]{display:none!important}
.random-record-overlay{
  position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(5,5,8,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:random-record-fade .22s ease-out
}
.random-record-dialog{
  position:relative;isolation:isolate;width:min(740px,100%);max-height:calc(100dvh - 32px);overflow-x:hidden;overflow-y:auto;
  padding:34px 38px 31px;border:1px solid rgba(255,255,255,.14);border-radius:28px;
  background:radial-gradient(ellipse at 30% 2%,rgba(227,82,8,.16),transparent 53%),linear-gradient(135deg,#1b1a1e,#101013 85%);
  color:#fff;box-shadow:0 32px 100px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.07);
  animation:random-record-enter .32s cubic-bezier(.16,1,.3,1)
}
.random-record-dialog:focus{outline:none}
.random-record-topline{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:#fa9d62;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.random-record-topline:before{content:'';width:25px;height:1px;background:#ed7c3c}
.random-record-close{position:absolute;right:19px;top:17px;z-index:2;display:grid;place-items:center;width:37px;height:37px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(255,255,255,.035);color:#d6cfd0;font-size:24px;line-height:1;cursor:pointer}
.random-record-close:hover{background:rgba(255,255,255,.1);color:#fff}
.random-record-dialog h2{margin:0 40px 8px 0;color:#fff;font-size:clamp(23px,3.4vw,33px);font-weight:800;letter-spacing:-.04em;line-height:1.14}
.random-record-intro{max-width:510px;margin:0;color:#a9a3a8;font-size:13px;line-height:1.65}
.random-record-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:30px;margin:20px 0 9px}
.random-record-stage{position:relative;width:100%;max-width:325px;aspect-ratio:1;justify-self:center;overflow:hidden}
.random-record-stage:before{content:'';position:absolute;inset:10% 7%;border-radius:50%;background:radial-gradient(circle,rgba(233,90,8,.15),transparent 65%);filter:blur(15px)}
.random-record-vinyl{
  position:absolute;top:9%;right:2%;width:77%;aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle at center,#151518 0,#151518 4px,#222227 5px,#101013 6px,#161619 8px),#161619;
  border:1px solid #3a383c;box-shadow:10px 16px 32px rgba(0,0,0,.58),inset -12px -14px 24px rgba(0,0,0,.6),inset 5px 5px 19px rgba(255,255,255,.06)
}
.random-record-vinyl:before{content:'';position:absolute;inset:37%;border-radius:50%;background:radial-gradient(circle at center,#16151a 0 8%,#e86b28 9% 56%,#ab3e13 58%,#ee874b 61% 65%,#b44815 68%);box-shadow:0 0 0 1px #111}
.random-record-artwork{
  position:absolute;top:14%;left:2%;display:grid;place-items:center;width:70%;aspect-ratio:1;overflow:hidden;
  border:1px solid rgba(255,255,255,.19);border-radius:7px;
  background:linear-gradient(145deg,#44312b,#161619 60%);box-shadow:9px 15px 32px rgba(0,0,0,.68),inset 0 0 0 1px rgba(255,255,255,.08);
  transform:rotate(-4deg)
}
.random-record-artwork img{display:block;width:100%;height:100%;object-fit:cover}
.random-record-artwork img[hidden],.random-record-artwork-placeholder[hidden]{display:none!important}
.random-record-artwork-placeholder{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(circle at 25% 22%,rgba(255,158,89,.26),transparent 60%),#2c2323}
.random-record-artwork-placeholder svg{width:53%;fill:none;stroke:#fa8b49;stroke-width:1.2;opacity:.85}
.random-record-copy{min-width:0;transition:opacity .2s,filter .2s}
.random-record-kicker{display:block;margin-bottom:12px;font-size:10px;font-weight:850;letter-spacing:.14em;color:#fa9d62;text-transform:uppercase}
.random-record-artist{display:block;margin:0 0 6px;color:#b7b1b5;font-size:14px;font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.random-record-album{display:block;color:#fff;font-size:clamp(21px,2.6vw,30px);font-weight:800;line-height:1.15;letter-spacing:-.03em;overflow-wrap:anywhere}
.random-record-meta{margin:12px 0 0;color:#969098;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.random-record-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.random-record-actions button{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1 1 170px;min-height:47px;padding:11px 16px;border-radius:12px;font:inherit;font-size:13px;font-weight:750;cursor:pointer;transition:transform .18s,background .18s,border-color .18s}
.random-record-actions button[hidden]{display:none!important}
.random-record-actions button:active{transform:scale(.98)}
.random-record-again{border:1px solid rgba(255,255,255,.18);background:#28252a;color:#fff}
.random-record-again:hover{border-color:#fa9d62;background:#332c2b}
.random-record-open{border:1px solid #ff9b62;background:linear-gradient(130deg,#fb8a42,#e95a0b);color:#170b07;box-shadow:0 8px 24px rgba(232,83,1,.17)}
.random-record-open:hover{background:linear-gradient(130deg,#ffa067,#ef6c21)}
.random-record-scope{margin:16px 0 0;text-align:center;color:#857e85;font-size:11px;line-height:1.5}
.random-record-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.random-record-dialog.is-spinning .random-record-vinyl{animation:random-record-turn .75s linear infinite}
.random-record-dialog.is-spinning .random-record-artwork{animation:random-record-shuffle .18s ease-in-out infinite alternate}
.random-record-dialog.is-spinning .random-record-copy{opacity:.35;filter:blur(2px)}
@keyframes random-record-fade{from{opacity:0}to{opacity:1}}
@keyframes random-record-enter{from{opacity:0;transform:translateY(13px) scale(.975)}to{opacity:1;transform:none}}
@keyframes random-record-turn{to{transform:rotate(360deg)}}
@keyframes random-record-shuffle{from{transform:rotate(-7deg) translateX(-3px)}to{transform:rotate(2deg) translateX(3px)}}
@media(max-width:760px){
  .library-toolbar{flex-wrap:wrap}
  .library-toolbar>.random-record-trigger{order:-1;flex:0 0 100%;width:100%;min-height:61px;margin:0 0 4px;padding:8px 12px;border-radius:14px}
  .random-record-trigger-icon{width:39px;height:39px;flex-basis:39px;border-radius:11px}
  .random-record-trigger-icon svg{width:22px;height:22px}
  .random-record-trigger-copy strong{font-size:13px}
  .random-record-trigger-copy small{font-size:10px}
  .random-record-trigger-arrow{margin-left:auto}
}
@media(max-width:600px){
  .random-record-overlay{
    align-items:center;
    justify-content:center;
    padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  }
  .random-record-dialog{
    width:min(460px,100%);
    max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding:26px 23px 24px;
    border-radius:24px;
    animation-name:random-record-enter-mobile;
  }
  .random-record-dialog h2{font-size:25px}
  .random-record-grid{grid-template-columns:1fr;gap:3px;margin-top:10px}
  .random-record-stage{max-width:248px}
  .random-record-copy{text-align:center;margin-top:-4px}
  .random-record-kicker{margin-bottom:7px}
  .random-record-album{font-size:24px}
  .random-record-meta{margin-top:6px}
  .random-record-actions{margin-top:18px}
  .random-record-actions button{flex-basis:130px}
  .random-record-scope{margin-top:12px}
  @keyframes random-record-enter-mobile{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
}
/* Keep the dialog comfortable and scrollable in landscape/short mobile viewports. */
@media(max-width:600px) and (max-height:690px){
  .random-record-dialog{padding-top:20px;padding-bottom:18px}
  .random-record-stage{max-width:195px}
  .random-record-grid{gap:0}
  .random-record-actions{margin-top:12px}
}
@media(max-width:355px){
  .random-record-dialog{padding-left:16px;padding-right:16px}
  .random-record-stage{max-width:205px}
  .random-record-actions button{font-size:12px;padding:9px}
}
@media(prefers-reduced-motion:reduce){
  .random-record-overlay,.random-record-dialog,.random-record-dialog.is-spinning .random-record-vinyl,.random-record-dialog.is-spinning .random-record-artwork{animation:none!important}
  .random-record-trigger,.random-record-actions button,.random-record-copy{transition:none!important}
}