/* "คลังเสียงโรบล็อกซ์" page — site/audio.js */
.au-page{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:12px;min-width:0}
.au-hero{position:relative;overflow:hidden;border-radius:22px;padding:20px 22px;background:radial-gradient(120% 140% at 0% 0%,rgba(140,90,255,.38),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(255,95,126,.30),transparent 55%),var(--card);border:1px solid var(--line);display:flex;align-items:center;gap:16px;isolation:isolate}
.au-hero-t{flex:1;min-width:0}
.au-hero h1{display:flex;align-items:center;gap:10px;margin:0;font-size:26px;line-height:1.2}
.au-logo{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,#a77bff,#ff5f9e);box-shadow:0 8px 22px rgba(167,123,255,.45);flex:none}
.au-logo .i{width:22px;height:22px;color:#fff}
.au-hero p{margin:6px 0 0;color:var(--mute);font-size:14.5px;line-height:1.5;max-width:640px}
.au-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.au-b{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;border-radius:999px;padding:4px 11px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--text)}
.au-b .i{width:14px;height:14px;color:#c9a8ff}
.au-b.ok .i{color:var(--green,#3ee59a)}
.au-dot{width:8px;height:8px;border-radius:50%;background:var(--green,#3ee59a);box-shadow:0 0 0 3px rgba(62,229,154,.18);animation:auPulse 2s infinite}
@keyframes auPulse{50%{box-shadow:0 0 0 6px rgba(62,229,154,0)}}
.au-eq{display:flex;align-items:flex-end;gap:4px;height:64px;flex:none;opacity:.9}
.au-eq i{width:6px;border-radius:3px;background:linear-gradient(#ffcf6b,#ff5f9e 60%,#a77bff);animation:auEq 1.1s ease-in-out infinite alternate;height:30%}
.au-eq i:nth-child(3n){animation-duration:.8s}.au-eq i:nth-child(3n+1){animation-duration:1.35s;animation-delay:-.4s}.au-eq i:nth-child(4n){animation-delay:-.7s}
@keyframes auEq{to{height:100%}}
@media (prefers-reduced-motion:reduce){.au-eq i,.au-dot{animation:none}.au-eq i{height:60%}}

.au-moods{display:flex;flex-wrap:wrap;gap:7px}
.au-mood{display:inline-flex;align-items:center;gap:6px;border:1px solid hsla(var(--h),80%,65%,.28);background:hsla(var(--h),80%,60%,.10);color:var(--text);border-radius:999px;padding:6px 12px 6px 8px;font:inherit;font-size:14px;cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.au-mood .e{font-size:16px;line-height:1}
.au-mood em{font-style:normal;font-size:11.5px;color:var(--mute);background:rgba(0,0,0,.22);border-radius:999px;padding:1px 7px}
.au-mood:hover{transform:translateY(-1px);background:hsla(var(--h),80%,60%,.18)}
.au-mood.on{background:hsl(var(--h),85%,62%);border-color:transparent;color:#160f22;font-weight:600;box-shadow:0 6px 18px hsla(var(--h),85%,55%,.35)}
.au-mood.on em{color:#160f22;background:rgba(255,255,255,.35)}

.au-tools{display:flex;gap:8px;min-width:0}
.au-q{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:0 12px;height:42px;color:var(--mute)}
.au-q .i{width:18px;height:18px;flex:none}
.au-q:focus-within{border-color:rgba(255,165,61,.6)}
.au-q input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:14.5px}
.au-tools select{flex:none;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font:inherit;font-size:14px;padding:0 10px;max-width:30%}
.au-count{font-size:13px;color:var(--mute);min-height:18px}

.au-ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.au-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px;transition:border-color .2s,transform .2s}
.au-row:hover{border-color:hsla(var(--h),80%,65%,.45)}
.au-disc{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:21px;background:radial-gradient(circle at 50% 50%,var(--card) 0 7px,transparent 8px),conic-gradient(from 30deg,hsl(var(--h),80%,58%),hsl(calc(var(--h) + 40),85%,66%),hsl(var(--h),80%,58%));box-shadow:0 4px 14px hsla(var(--h),80%,50%,.35)}
.au-row:hover .au-disc{animation:auSpin 3s linear infinite}
@keyframes auSpin{to{transform:rotate(360deg)}}
.au-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.au-t{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--mute);min-width:0}
.au-a{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-src{display:inline-flex;align-items:center;gap:4px}
.au-src .i{width:12px;height:12px;color:var(--green,#3ee59a)}
.au-tags{display:flex;flex-wrap:wrap;gap:4px}
.au-mt{font-size:11px;font-weight:600;border-radius:7px;padding:1px 7px;background:hsla(var(--h),80%,60%,.14);color:hsl(var(--h),85%,78%)}
.au-id{font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text2,#c9cde6);background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:7px 9px;user-select:all}
.au-act{display:flex;align-items:center;gap:6px}
.au-act .btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.au-act .btn .i{width:15px;height:15px}
.au-id2{display:none}
.au-copy.done{filter:saturate(.4) brightness(1.15)}
.au-flag{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--mute);cursor:pointer}
.au-flag .i{width:15px;height:15px}
.au-flag:hover{color:var(--acc2,#ff5f7e);border-color:rgba(255,95,126,.4)}
.au-rep{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:14px}
.au-reasons{display:flex;flex-wrap:wrap;gap:6px 14px}
.au-reasons label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.au-rep input[name=note]{background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;color:var(--text);font:inherit}
.au-rep-b{display:flex;gap:8px}
.au-note{padding:26px 10px;text-align:center;color:var(--mute)}
.au-more{display:flex;justify-content:center;padding:8px 0}
.au-how{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 16px;font-size:14px}
.au-how summary{cursor:pointer;font-weight:600}
.au-how ol{margin:10px 0 2px;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--text2,#c9cde6);line-height:1.5}
.au-src-note{font-size:12px;color:var(--mute);margin:0;text-align:center}

@media (max-width:759px){
  .au-hero{padding:16px}
  .au-hero h1{font-size:21px}
  .au-logo{width:34px;height:34px}
  .au-eq{display:none}
  .au-moods{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(-1 * var(--pad));padding:2px var(--pad) 4px;scroll-padding:var(--pad)}
  .au-moods::-webkit-scrollbar{display:none}
  .au-mood{font-size:13.5px;padding:5px 10px 5px 7px}
  .au-row{grid-template-columns:auto minmax(0,1fr);gap:8px 10px}
  .au-id{display:none}
  .au-id2{display:inline;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text2,#c9cde6);user-select:all}
  .au-act{grid-column:1/-1;justify-content:flex-end}
  .au-disc{width:40px;height:40px;font-size:18px}
  .au-listen span{display:none}
  .au-tools{flex-wrap:wrap}
  .au-q{flex-basis:100%}
  .au-tools select{flex:1;max-width:none}
}
[data-theme="light"] .au-mt{color:hsl(var(--h),70%,32%)}
[data-theme="light"] .au-mood em{background:rgba(0,0,0,.07)}

/* 20-second sample button (the disc) */
.au-play{position:relative;border:0;cursor:pointer;padding:0;color:#fff;font:inherit}
.au-play .em{transition:opacity .15s,transform .15s}
.au-play .pl{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .15s}
.au-play .pl .i{width:20px;height:20px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.au-play:hover .em,.au-play.on .em,.au-play:focus-visible .em{opacity:0;transform:scale(.6)}
.au-play:hover .pl,.au-play.on .pl,.au-play:focus-visible .pl{opacity:1}
.au-play::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(hsl(var(--h),90%,70%) var(--pg,0deg),transparent 0);-webkit-mask:radial-gradient(circle,transparent 25px,#000 26px);mask:radial-gradient(circle,transparent 25px,#000 26px);opacity:0;transition:opacity .2s}
.au-play.on::after{opacity:1}
.au-play.on{animation:auSpin 3s linear infinite}
.au-play.on .pl{animation:auSpin 3s linear infinite reverse}
@media (hover:none){.au-play .pl{opacity:1;background:rgba(0,0,0,.18);border-radius:50%}.au-play .em{opacity:0}}
@media (max-width:759px){.au-play::after{-webkit-mask:radial-gradient(circle,transparent 22px,#000 23px);mask:radial-gradient(circle,transparent 22px,#000 23px)}}

/* music / sound-effect tabs */
.au-grp{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:16px;background:var(--card);border:1px solid var(--line);margin-bottom:10px}
.au-grp button{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 8px;border:0;border-radius:12px;background:none;color:var(--mute);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.au-grp button em{font-style:normal;font-size:12px;font-weight:600;opacity:.75;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.08)}
.au-grp button.on{background:var(--grad,#ff9a3d);color:#2a1000}
.au-grp button.on em{background:rgba(0,0,0,.12)}
@media (max-width:480px){.au-grp button{font-size:13.5px;gap:5px;white-space:nowrap;padding:10px 4px}.au-grp button em{font-size:11px;padding:1px 5px}}