.bt-wrap{
--gap: .6rem;
--radius: 12px;
--shadow: 0 3px 12px rgba(0,0,0,.06);
--accent: #111;
--accent-soft: #00994b; --accent-soft-bg: #f7fff9;
max-width: 1000px;
margin: 28px 0;
padding: 0 12px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.bt-list { width: 100%; align-items: stretch; }
.bt-row  { width: 100%; } .bt-hero{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
margin-bottom: 8px;
}
.bt-title{
font-size: clamp(1.2rem, 2vw, 1.6rem);
margin: 0;
font-weight: 650;
} .bt-search{
flex: 1;
min-width: 220px;
position: relative;
margin-bottom: 6px; }
.bt-search::before{
content: "🔍";
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: .9rem;
opacity: .55;
pointer-events: none;
}
.bt-search input{
width: 100%;
padding: 9px 12px;
padding-left: 30px; border: 1px solid #ddd;
border-radius: 999px;
font-size: .95rem;
line-height: 1.2;
background: #fafafa;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.bt-search input:focus{
outline: none;
border-color: var(--accent-soft);
box-shadow: 0 0 0 2px rgba(11,191,91,.25);
background: #fff;
} .bt-sort{
display: inline-flex;
align-self: flex-start;
border-radius: 999px;
padding: 2px;
background: #f0f0f3;
border: 1px solid #e0e0e4;
}
.bt-sort button{
padding: 6px 12px;
border: 0;
border-radius: 999px;
background: transparent;
cursor: pointer;
font-size: .85rem;
line-height: 1.2;
color: #444;
min-width: 80px;
text-align: center;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.bt-sort button[aria-pressed="true"]{
background: var(--accent);
color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.18);
}  .bt-list{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--gap);
}
.bt-row{
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 10px 12px;
display: grid;
grid-template-columns: minmax(0,1.6fr) auto;
gap: 10px 14px;
align-items: center;
border: 1px solid #eee;
border-left: 4px solid transparent;
transition: background-color .15s ease;
} .bt-row:hover{
background-color: #f9f9f9;
}
.bt-row.is-active{
border-left-color: var(--accent-soft);
background: var(--accent-soft-bg);
box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.bt-main{
min-width: 0;
}
.bt-line{
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bt-line-title{
font-size: .98rem;
font-weight: 650;
}
.bt-line-artist{
font-size: .86rem;
color: #666;
margin-top: 2px;
} .bt-badges{
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
}
.bt-badge{
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
background: #f1f3f7;
color: #444;
font-size: .75rem;
} .bt-tempos{
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
}
.bt-play{
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 90px;
min-width: 90px;
max-width: 90px;
flex: 0 0 90px;
padding: 6px 10px;
border: 0;
border-radius: 999px;
background: #111; cursor: pointer;
font-size: .85rem;
line-height: 1.1;
font-variant-numeric: tabular-nums;
color: #fff;
appearance: none;
-webkit-appearance: none;
text-align: center;
transition: transform .12s ease, box-shadow .12s ease,
background .12s ease, color .12s ease;
}
.bt-play:active{
transform: scale(.97);
}
.bt-play:hover{
box-shadow: 0 2px 6px rgba(0,0,0,.18);
} .bt-play.is-active,
.bt-play[aria-pressed="true"]{
color: #fff; }
.bt-player{
grid-column: 1 / -1;
margin-top: 6px;
display: none;
} .bt-player-anim-in{
animation: none;
} .bt-player-inner{
position: relative;
margin-top: 4px;
} .bt-player-inner,
.bt-player-inner *{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bt-player-frame{
position: relative;
border-radius: 14px;
overflow: hidden;
background: #000;
box-shadow: 0 8px 28px rgba(0,0,0,.35);
} .bt-player iframe{
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
display: block;
} .bt-iframe-shield{
position: absolute;
inset: 0;
background: transparent;
cursor: pointer;
z-index: 2;
} .bt-iframe-shield:focus-visible{
outline: 2px solid var(--accent-soft);
outline-offset: 3px;
box-shadow: 0 0 0 2px rgba(0,153,75,.4);
} .bt-iframe-controls{
position: absolute;
top: 8px;
right: 8px;
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px 6px;
border-radius: 999px;
background: rgba(10,10,10,.65);
backdrop-filter: blur(6px);
}
.bt-iframe-ctrl{
border: 0;
border-radius: 999px;
padding: 3px 7px;
font-size: .75rem;
line-height: 1.1;
color: #f9f9f9;
background: transparent;
cursor: pointer;
white-space: nowrap;
} .bt-iframe-ctrl:hover{
background: rgba(255,255,255,.08);
} .bt-iframe-ctrl:focus-visible{
outline: 2px solid var(--accent-soft);
outline-offset: 2px;
box-shadow: 0 0 0 2px rgba(0,153,75,.4);
}
.bt-iframe-bpm{
min-width: 72px;
text-align: center;
font-size: .8rem;
color: #fff;
font-variant-numeric: tabular-nums;
} .bt-touch .bt-iframe-shield,
.bt-touch .bt-iframe-controls{
display: none !important;
pointer-events: none !important;
}  .bt-empty{
opacity: .85;
padding: 22px 12px 26px;
text-align: center;
}
.bt-empty-icon{
font-size: 1.8rem;
margin-bottom: 6px;
}
.bt-empty-main{
margin: 0 0 4px 0;
font-weight: 600;
}
.bt-empty-help{
margin: 0;
font-size: .9rem;
color: #555;
} .bt-help-overlay{
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
display: none;
align-items: center;
justify-content: center;
z-index: 99999;
}
.bt-help{
position: relative;
background: #fff;
color: #111;
border-radius: 16px;
padding: 20px;
max-width: 760px;
width: 92%;
box-shadow: 0 10px 40px rgba(0,0,0,.25);
font-size: .95rem;
} .bt-help-close{
position: absolute;
top: 10px;
right: 14px;
border: 0;
background: transparent;
font-size: 1.1rem;
cursor: pointer;
} .bt-help-body{
max-height: min(70vh, 480px);
overflow: auto;
} .bt-help-sections{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 20px;
margin-bottom: 8px;
} .bt-help-section{
border-radius: 8px;
}
.bt-help-section-title{
margin: 0 0 4px 0;
font-size: .9rem;
text-transform: uppercase;
letter-spacing: .03em;
color: #666;
} .bt-help-section table{
width: 100%;
border-collapse: collapse;
font-size: .9rem;
}
.bt-help-section th,
.bt-help-section td{
padding: 4px 0;
border-bottom: 1px solid #f0f0f0;
vertical-align: top;
}
.bt-help-section tr:last-child th,
.bt-help-section tr:last-child td{
border-bottom: none;
}
.bt-help-section th{
width: 40%;
padding-right: 8px;
font-weight: 500;
color: #333;
} .bt-kbd{
display: inline-block;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
border: 1px solid #ddd;
border-bottom-width: 2px;
background: #fafafa;
border-radius: 6px;
padding: 1px 6px;
margin: 0 2px 2px 0;
} .bt-help .foot{
opacity: .7;
font-size: .85rem;
margin-top: 4px;
} html.bt-noscroll-html,
body.bt-noscroll{
overflow: hidden !important;
overscroll-behavior: contain;
touch-action: none;
} @media (max-width: 720px){
.bt-row{
grid-template-columns: 1fr;
gap: 8px;
}
.bt-tempos{
justify-content: flex-start;
} .bt-help-overlay{
align-items: flex-end;
}
.bt-help{
width: 100%;
max-width: 100%;
border-radius: 16px 16px 0 0;
} .bt-line-title{
font-size: 1.05rem;
font-weight: 700;
}
} @media (max-width: 640px){
.bt-help-sections{
grid-template-columns: 1fr;
}
} @media (max-width: 480px){
.bt-iframe-controls{
top: 8px;
left: 50%;
right: auto;
transform: translateX(-50%);
justify-content: center;
}
.bt-iframe-ctrl-voldown,
.bt-iframe-ctrl-volup,
.bt-iframe-ctrl-mute{
display: none;
}
.bt-iframe-ctrl{
font-size: .7rem;
padding: 2px 6px;
}
.bt-iframe-bpm{
min-width: 64px;
font-size: .75rem;
}
}  .bt-touch .bt-tempos{
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-start;
}
.bt-touch .bt-play{
width: 90px !important;
min-width: 90px !important;
max-width: 90px !important;
flex: 0 0 90px !important;
}  .bt-player-inner:fullscreen,
.bt-player-inner:-webkit-full-screen,
.bt-player-inner:-moz-full-screen,
.bt-player-inner:-ms-fullscreen {
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
width: 100vw !important;
height: 100vh !important;
} .bt-player-inner:fullscreen .bt-player-frame,
.bt-player-inner:-webkit-full-screen .bt-player-frame {
width: 100%;
height: 100%;
border-radius: 0 !important;
box-shadow: none !important;
} .bt-player-inner:fullscreen iframe.glt-embed-frame,
.bt-player-inner:-webkit-full-screen iframe.glt-embed-frame {
width: 100% !important;
height: 100% !important;
max-width: none !important;
} iframe.glt-embed-frame:fullscreen,
iframe.glt-embed-frame:-webkit-full-screen,
iframe.glt-embed-frame:-moz-full-screen,
iframe.glt-embed-frame:-ms-fullscreen {
width: 100vw !important;
height: 100vh !important;
max-width: none !important;
margin: 0 !important;
border-radius: 0 !important;
} @media (max-width: 980px) {
html, body { overflow-x: hidden; } #bt-app {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 8px !important;
padding-right: 8px !important;
box-sizing: border-box !important;
} #bt-app .bt-player-frame {
box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
}  body:has(#bt-app) #main-content .container{
width: 100% !important;
max-width: none !important;
}
body:has(#bt-app) #content-area,
body:has(#bt-app) #left-area{
width: 100% !important;
} #bt-app.bt-wrap{
max-width: none !important; width: 100% !important;
margin: 28px 0 !important;
padding: 0 12px !important; box-sizing: border-box !important;
}
#bt-app .bt-row{ width: 100% !important; }