.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: 10px;
margin-bottom: 20px;
} .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 32px 9px 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-clear{
position: absolute;
right: 9px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: #c0c0c0;
cursor: pointer;
color: #fff;
font-size: .7rem;
line-height: 1;
padding: 0;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease, background .15s ease, transform .15s ease;
}
.bt-search-clear.is-visible{
opacity: 1;
pointer-events: auto;
}
.bt-search-clear:hover{
background: #888;
transform: translateY(-50%) scale(1.1);
}
.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;
align-items: center;
}
.bt-play{
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 32px;
min-width: 90px;
max-width: 180px;
padding: 4px 14px;
border: 0;
border-radius: 999px;
background: #111;
cursor: pointer;
font-size: .85rem;
line-height: 1.2;
font-variant-numeric: tabular-nums;
color: #fff;
appearance: none;
-webkit-appearance: none;
text-align: center;
white-space: normal;
word-break: break-word;
vertical-align: middle;
transition: transform .12s ease, box-shadow .12s ease,
background .12s ease, color .12s ease;
} #bt-app .bt-play{
display: inline-block !important;
height: auto !important;
min-height: unset !important;
align-self: flex-start !important;
padding: 6px 14px 9px !important;
line-height: 1 !important;
}
.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"]{
background: var(--accent-soft);
color: #fff;
box-shadow: 0 2px 8px rgba(0,153,75,.35);
}
.bt-player{
grid-column: 1 / -1;
margin-top: 6px;
display: 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-row--sectioned .bt-tempos {
align-self: start;
} .bt-section-panels {
grid-column: 1 / -1;
}
.bt-section-panel {
display: flex;
flex-direction: column;
gap: 8px;
}
.bt-section-panel--hidden {
display: none;
} .bt-tabs-bar {
display: flex;
gap: 4px;
justify-content: flex-end;
}
.bt-tab {
padding: 5px 14px;
border: 1px solid #ddd;
border-radius: 999px;
background: #f0f0f3;
color: #555;
font-size: .82rem;
font-weight: 600;
cursor: pointer;
transition: background .12s ease, color .12s ease, border-color .12s ease,
box-shadow .12s ease;
white-space: nowrap;
}
.bt-tab.is-active {
background: var(--accent-soft);
color: #fff;
border-color: var(--accent-soft);
box-shadow: 0 2px 8px rgba(0,153,75,.35);
}
.bt-tab:hover:not(.is-active) {
background: #e4e4e8;
border-color: #ccc;
} .bt-subtabs-bar {
display: flex;
gap: 4px;
justify-content: flex-end;
}
.bt-subtab {
padding: 3px 10px;
border: 1px solid #ddd;
border-radius: 999px;
background: #f0f0f3;
color: #555;
font-size: .76rem;
font-weight: 600;
cursor: pointer;
transition: background .12s ease, color .12s ease, border-color .12s ease;
white-space: nowrap;
}
.bt-subtab.is-active {
background: var(--accent-soft);
color: #fff;
border-color: var(--accent-soft);
box-shadow: 0 1px 5px rgba(0,153,75,.25);
}
.bt-subtab:hover:not(.is-active) {
background: #e4e4e8;
border-color: #ccc;
}
.bt-subpanel {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
}
.bt-subpanel--hidden {
display: none;
} .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;
} body:has(#bt-app) #main-content,
body:has(#bt-app) .et_pb_section:first-of-type,
body:has(#bt-app) #page-container .container:first-of-type {
padding-top: 8px !important;
}
body:has(#bt-app) h1.entry-title,
body:has(#bt-app) .entry-title,
body:has(#bt-app) .page-title,
body:has(#bt-app) .et_pb_post_title h1,
body:has(#bt-app) .et_pb_post_title .entry-title,
body:has(#bt-app) #page-container h1:first-of-type {
font-size: 2rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: -.01em !important;
color: #00994b !important;
margin-top: 0 !important;
margin-bottom: 10px !important;
padding-left: 12px !important;
} #bt-app.bt-wrap{
max-width: 1040px;
width: 100%;
margin: 8px auto 28px;
padding: 0 12px;
box-sizing: border-box;
}
#bt-app .bt-row{
width: 100%;
} .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: 720px){
.bt-row{
grid-template-columns: 1fr;
gap: 8px;
padding: 14px 18px;
}
.bt-tempos{
justify-content: flex-start;
}
.bt-line-title{
font-size: 1.05rem;
font-weight: 700;
}
}
@media (max-width: 980px){
html, body { overflow-x: hidden; } 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;
} body:has(#bt-app) h1.entry-title,
body:has(#bt-app) .entry-title,
body:has(#bt-app) .page-title,
body:has(#bt-app) .et_pb_post_title h1,
body:has(#bt-app) .et_pb_post_title .entry-title,
body:has(#bt-app) #page-container h1:first-of-type {
padding-left: 18px !important;
padding-right: 18px !important;
} #bt-app{
margin-top: 8px !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left:  calc(18px + env(safe-area-inset-left)) !important;
padding-right: calc(18px + env(safe-area-inset-right)) !important;
box-sizing: border-box !important;
}
#bt-app .bt-player-frame{
box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
#bt-app, #bt-app *{
box-sizing: border-box;
}
#bt-app ul.bt-list{
margin: 0 !important;
padding: 0 !important;
}
#bt-app .bt-row{
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
#bt-app .bt-search,
#bt-app .bt-search input{
width: 100% !important;
max-width: 100% !important;
}
}