.sbukr {
    --sbukr-navy:#0b2745;
    --sbukr-blue:#1473e6;
    --sbukr-soft:#eef6ff;
    --sbukr-text:#10243a;
    --sbukr-muted:#66788a;
    width:100%;
    max-width:1120px;
    margin:24px auto;
    padding:0 14px 110px;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--sbukr-text);
}
.sbukr * { box-sizing:border-box; }
.sbukr button, .sbukr input { font:inherit; }

.sbukr-hero {
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    gap:18px;
    padding:25px 28px;
    border-radius:24px;
    color:#fff;
    background:
        radial-gradient(circle at 90% 20%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 10% 100%, rgba(42,168,223,.30), transparent 30%),
        linear-gradient(135deg,#0b2745,#175c9b);
    box-shadow:0 16px 40px rgba(12,48,82,.18);
}
.sbukr-hero:after {
    content:"";
    position:absolute;
    width:180px;height:180px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
    right:-55px;bottom:-85px;
}
.sbukr-flag {
    display:grid;
    place-items:center;
    flex:0 0 72px;
    width:72px;height:72px;
    border-radius:18px;
    font-size:42px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.17);
    box-shadow:inset 0 0 30px rgba(255,255,255,.06);
}
.sbukr-kicker {
    margin-bottom:4px;
    font-size:12px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:1.7px;
    opacity:.78;
}
.sbukr-hero h2 {
    margin:0 !important;
    padding:0 !important;
    color:#fff !important;
    font-size:34px !important;
    line-height:1.05 !important;
    font-weight:800 !important;
}
.sbukr-hero p {
    margin:7px 0 0 !important;
    color:rgba(255,255,255,.88) !important;
    font-size:16px !important;
}
.sbukr-live-chip {
    margin-left:auto;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:7px;
    padding:9px 13px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    font-size:12px;
    font-weight:800;
    letter-spacing:.6px;
}
.sbukr-live-chip span,
.sbukr-now-dot {
    width:8px;height:8px;border-radius:50%;
    background:#ff3b30;
    box-shadow:0 0 0 0 rgba(255,59,48,.6);
    animation:sbukr-pulse 1.6s infinite;
}
@keyframes sbukr-pulse {
    0% { box-shadow:0 0 0 0 rgba(255,59,48,.58); }
    70% { box-shadow:0 0 0 8px rgba(255,59,48,0); }
    100% { box-shadow:0 0 0 0 rgba(255,59,48,0); }
}

.sbukr-toolbar {
    display:flex;
    align-items:center;
    gap:8px;
    padding:20px 2px 12px;
    flex-wrap:wrap;
}
.sbukr-filter {
    border:0;
    background:#edf3f8;
    color:#36516a;
    border-radius:999px;
    padding:9px 14px;
    font-weight:700;
    cursor:pointer;
}
.sbukr-filter.is-active {
    background:var(--sbukr-navy);
    color:#fff;
}
.sbukr-hint {
    margin-left:auto;
    color:var(--sbukr-muted);
    font-size:13px;
}

.sbukr-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.sbukr-card {
    position:relative;
    border-radius:18px;
    border:1px solid #dfe8f1;
    background:#fff;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(21,54,83,.07);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sbukr-card:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(21,54,83,.11);
    border-color:#c9d8e6;
}
.sbukr-card.is-playing {
    border-color:var(--sbukr-accent);
    box-shadow:0 10px 30px color-mix(in srgb,var(--sbukr-accent) 18%,transparent);
}
.sbukr-main {
    display:flex;
    align-items:center;
    gap:13px;
    width:100%;
    min-height:102px;
    border:0;
    background:transparent;
    padding:16px 58px 16px 16px;
    text-align:left;
    cursor:pointer;
    color:inherit;
}
.sbukr-mark {
    display:grid;
    place-items:center;
    flex:0 0 58px;
    width:58px;height:58px;
    border-radius:16px;
    color:#fff;
    background:linear-gradient(145deg,var(--sbukr-accent),color-mix(in srgb,var(--sbukr-accent) 68%,#081b30));
    font-size:16px;
    font-weight:900;
    letter-spacing:-.3px;
    box-shadow:0 8px 18px color-mix(in srgb,var(--sbukr-accent) 24%,transparent);
}
.sbukr-copy {
    min-width:0;
    display:flex;
    flex:1;
    flex-direction:column;
    gap:2px;
}
.sbukr-group {
    width:max-content;
    max-width:100%;
    color:var(--sbukr-accent);
    font-size:10px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:1px;
}
.sbukr-copy strong {
    display:block;
    color:#10243a;
    font-size:18px;
    line-height:1.2;
    font-weight:800;
}
.sbukr-copy small {
    display:block;
    margin-top:2px;
    color:#6d7d8c;
    font-size:12px;
    line-height:1.3;
}
.sbukr-play {
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:var(--sbukr-accent);
}
.sbukr-play-icon {
    display:grid;
    place-items:center;
    width:36px;height:36px;
    border-radius:50%;
    background:color-mix(in srgb,var(--sbukr-accent) 10%,#fff);
    font-size:14px;
    padding-left:2px;
}
.sbukr-play-text {
    font-size:9px;
    line-height:1;
    font-weight:900;
    white-space:nowrap;
}
.sbukr-card.is-playing .sbukr-play-icon:before { content:""; }
.sbukr-card.is-playing .sbukr-play-icon { font-size:0; }
.sbukr-card.is-playing .sbukr-play-icon:after {
    content:"";
    width:11px;height:11px;
    border-radius:2px;
    background:currentColor;
}
.sbukr-card.is-playing .sbukr-play-text { color:var(--sbukr-accent); }

.sbukr-fav {
    position:absolute;
    z-index:2;
    top:8px;right:8px;
    width:34px;height:34px;
    border:0;
    border-radius:50%;
    background:rgba(242,246,250,.96);
    color:#788b9b;
    font-size:22px;
    line-height:1;
    cursor:pointer;
}
.sbukr-fav.is-favourite {
    color:#f0a000;
    background:#fff6dd;
}

.sbukr-no-favs {
    margin:14px 0;
    padding:24px;
    text-align:center;
    border:1px dashed #c9d8e6;
    border-radius:16px;
    background:#f8fbfe;
    color:#66788a;
}
.sbukr-no-favs strong {
    display:block;
    color:#304b64;
    margin-bottom:4px;
}
.sbukr-empty {
    max-width:900px;
    margin:25px auto;
    padding:20px;
    border-radius:12px;
    background:#f5f7f9;
    text-align:center;
}

.sbukr-player {
    position:fixed;
    z-index:9998;
    left:50%;
    bottom:14px;
    transform:translateX(-50%);
    width:min(760px,calc(100vw - 24px));
    border-radius:18px;
    overflow:hidden;
    color:#fff;
    background:linear-gradient(135deg,#0a223b,#113f69);
    box-shadow:0 16px 45px rgba(5,24,41,.34);
}
.sbukr-player-inner {
    display:flex;
    align-items:center;
    gap:18px;
    padding:13px 15px;
}
.sbukr-now {
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    flex:1;
}
.sbukr-now small {
    display:block;
    margin-bottom:2px;
    color:rgba(255,255,255,.60);
    font-size:9px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:1.2px;
}
.sbukr-now strong {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-size:15px;
}
.sbukr-player-actions {
    display:flex;
    align-items:center;
    gap:9px;
}
.sbukr-pause,
.sbukr-stop {
    border:0;
    color:#fff;
    background:rgba(255,255,255,.11);
    border-radius:10px;
    cursor:pointer;
}
.sbukr-pause {
    width:38px;height:38px;
    font-size:14px;
    font-weight:900;
}
.sbukr-stop {
    height:38px;
    padding:0 12px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.5px;
}
.sbukr-volume {
    display:flex;
    align-items:center;
    gap:7px;
}
.sbukr-volume span { font-size:15px; }
.sbukr-volume input { width:95px; accent-color:#fff; }
.sbukr-status {
    min-height:4px;
    padding:0 15px 8px 43px;
    color:rgba(255,255,255,.70);
    font-size:10px;
}
.sbukr-status.is-error { color:#ffd1cf; }

@media (max-width:760px) {
    .sbukr { padding-left:10px;padding-right:10px;padding-bottom:125px; }
    .sbukr-hero {
        padding:20px 18px;
        border-radius:19px;
        gap:13px;
    }
    .sbukr-flag { width:58px;height:58px;flex-basis:58px;border-radius:14px;font-size:33px; }
    .sbukr-hero h2 { font-size:28px !important; }
    .sbukr-hero p { font-size:14px !important; }
    .sbukr-live-chip { display:none; }
    .sbukr-grid { grid-template-columns:1fr; gap:10px; }
    .sbukr-hint { width:100%;margin-left:0;padding-top:2px; }
    .sbukr-main { min-height:91px;padding:13px 54px 13px 13px;gap:11px; }
    .sbukr-mark { width:52px;height:52px;flex-basis:52px;border-radius:14px; }
    .sbukr-copy strong { font-size:17px; }
    .sbukr-play-text { display:none; }
    .sbukr-player-inner { gap:10px;padding:11px 12px; }
    .sbukr-volume input { width:66px; }
    .sbukr-stop { padding:0 9px; }
    .sbukr-status { padding-left:39px; }
}
@media (max-width:430px) {
    .sbukr-hero { align-items:flex-start; }
    .sbukr-hero p { line-height:1.35 !important; }
    .sbukr-copy small { max-width:185px; }
    .sbukr-volume span { display:none; }
    .sbukr-volume input { width:52px; }
    .sbukr-player-actions { gap:6px; }
}