:root{
    --ste-bg:#070707;
    --ste-bg-2:#0b0b0c;
    --ste-panel:#111113;
    --ste-panel-2:#151518;
    --ste-panel-3:#1a1a1e;
    --ste-wine:#70132f;
    --ste-wine-2:#8d1a3c;
    --ste-wine-soft:#a52b4d;
    --ste-gold:#c8a45b;
    --ste-gold-2:#e0c27c;
    --ste-gold-dark:#8f713b;
    --ste-text:#f6f2ea;
    --ste-muted:#97939a;
    --ste-border:rgba(255,255,255,.075);
    --ste-border-gold:rgba(200,164,91,.22);
    --ste-success:#8fb58d;
    --ste-radius:18px;
    --ste-radius-sm:12px;
    --ste-shadow:0 22px 70px rgba(0,0,0,.38);
}

html,body{
    background:var(--ste-bg);
}

.ste-shell,
.ste-control-app{
    color:var(--ste-text);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.ste-shell *,.ste-control-app *{box-sizing:border-box}

/* ---------------- PUBLIC / TICKET ---------------- */

.ste-shell{
    max-width:980px;
    margin:0 auto;
    padding:38px 18px 60px;
}

.ste-logo-wrap{
    width:190px;
    max-width:48vw;
    margin:0 0 22px;
}
.ste-logo-wrap img{
    display:block;
    width:100%;
    height:auto;
}
.ste-logo-wrap.is-compact{
    width:108px;
    margin:0;
}

.ste-brand{
    display:inline-block;
    margin-bottom:22px;
    font-weight:900;
    font-size:30px;
    line-height:1;
    letter-spacing:.02em;
    color:var(--ste-gold);
}
.ste-brand span{color:var(--ste-wine-2)}
.ste-brand.is-compact{margin:0;font-size:24px}

.ste-card{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 88% 8%,rgba(112,19,47,.12),transparent 28%),
        linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0)),
        var(--ste-panel);
    border:1px solid var(--ste-border);
    border-radius:22px;
    box-shadow:var(--ste-shadow);
    padding:30px;
    margin-bottom:18px;
}

.ste-card::before{
    content:"";
    position:absolute;
    left:0;right:0;top:0;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--ste-gold),var(--ste-wine),transparent);
    opacity:.6;
}

.ste-card h1,.ste-card h2{
    margin:5px 0 10px;
    color:var(--ste-text);
    line-height:1.08;
}
.ste-card h1{font-size:clamp(30px,5vw,50px)}
.ste-card h2{font-size:28px}

.ste-kicker,.ste-eyebrow{
    color:var(--ste-gold);
    font-size:11px;
    font-weight:850;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.ste-muted{color:var(--ste-muted)}
.ste-optional{color:var(--ste-muted);font-weight:400}

.ste-shell label{
    display:block;
    margin:18px 0 8px;
    font-size:13px;
    font-weight:750;
    color:var(--ste-text);
}

.ste-shell input[type=text],
.ste-shell input[type=url],
.ste-shell input[type=file]{
    width:100%;
    border:1px solid var(--ste-border);
    background:#0b0b0d;
    color:var(--ste-text);
    border-radius:13px;
    padding:14px 15px;
    outline:none;
    transition:.18s ease;
}
.ste-shell input:focus{
    border-color:rgba(200,164,91,.55);
    box-shadow:0 0 0 3px rgba(200,164,91,.08);
    background:#0e0e10;
}

.ste-shell small{
    display:block;
    color:var(--ste-muted);
    margin-top:7px;
}

.ste-source-tabs{
    display:flex;
    gap:7px;
    margin-top:22px;
    padding:4px;
    border:1px solid var(--ste-border);
    border-radius:13px;
    background:#09090a;
    width:max-content;
}
.ste-source-tab{
    border:0;
    border-radius:9px;
    padding:9px 16px;
    background:transparent;
    color:var(--ste-muted);
    cursor:pointer;
    font-weight:800;
}
.ste-source-tab.active{
    background:linear-gradient(180deg,var(--ste-wine-2),var(--ste-wine));
    color:#fff;
    box-shadow:0 6px 18px rgba(112,19,47,.25);
}

.ste-btn{
    appearance:none;
    border:1px solid transparent;
    border-radius:12px;
    padding:13px 18px;
    font-weight:850;
    cursor:pointer;
    transition:.17s ease;
}
.ste-btn:hover{transform:translateY(-1px)}
.ste-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.ste-btn-primary{
    background:linear-gradient(180deg,var(--ste-wine-2),var(--ste-wine));
    color:#fff;
    box-shadow:0 8px 24px rgba(112,19,47,.25);
}
.ste-btn-dark{
    background:#111115;
    border-color:var(--ste-border);
    color:var(--ste-text);
}
.ste-btn-gold{
    background:linear-gradient(180deg,var(--ste-gold-2),var(--ste-gold));
    color:#17120a;
    border-color:rgba(255,255,255,.06);
    box-shadow:0 8px 24px rgba(200,164,91,.14);
}
.ste-submit-shell .ste-btn-primary{margin-top:24px;width:100%}

.ste-form-status{
    min-height:24px;
    margin-top:12px;
    color:var(--ste-gold-2);
    font-size:14px;
}

.ste-status-pill{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:7px 12px;
    border:1px solid var(--ste-border-gold);
    border-radius:999px;
    background:rgba(200,164,91,.06);
    color:var(--ste-gold-2);
    font-size:13px;
    font-weight:850;
}

.ste-ticket-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:25px;
}
.ste-ticket-grid>div{
    border:1px solid var(--ste-border);
    background:#0b0b0d;
    border-radius:14px;
    padding:18px;
}
.ste-stat-label{
    display:block;
    color:var(--ste-muted);
    font-size:12px;
    margin-bottom:8px;
}
.ste-ticket-grid strong{
    font-size:28px;
    color:var(--ste-text);
}
.ste-ticket-note{margin-top:20px}
.ste-ticket-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}
.ste-ticket-actions[hidden]{display:none!important}
.ste-ticket-actions .ste-btn{
    text-decoration:none;
    text-align:center;
    flex:1 1 180px;
}

.ste-upload-progress{
    margin-top:16px;
    padding:14px;
    border:1px solid var(--ste-border);
    border-radius:12px;
    background:#0b0b0d;
}
.ste-upload-progress-track{
    width:100%;
    height:8px;
    overflow:hidden;
    border-radius:999px;
    background:#1b1b1f;
}
.ste-upload-progress-bar{
    width:0%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--ste-wine),var(--ste-gold));
    transition:width .15s linear;
}
.ste-upload-progress-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:9px;
    color:var(--ste-muted);
    font-size:12px;
}
.ste-upload-progress-meta strong{color:var(--ste-gold-2)}

/* ---------------- CONTROL CENTER ---------------- */

.ste-control-app{
    min-height:100vh;
    padding:14px;
    background:
        radial-gradient(circle at 50% -10%,rgba(112,19,47,.17),transparent 32%),
        radial-gradient(circle at 90% 10%,rgba(200,164,91,.06),transparent 26%),
        var(--ste-bg);
}

.ste-control-header,
.ste-control-toolbar,
.ste-control-grid{
    width:min(1800px,calc(100vw - 28px));
    margin-left:auto;
    margin-right:auto;
}

.ste-control-header{
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px 14px 12px;
}
.ste-control-brand{
    display:flex;
    align-items:center;
    gap:16px;
}
.ste-control-title{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.ste-control-title span{
    color:var(--ste-muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.14em;
}
.ste-control-title strong{
    font-size:16px;
    letter-spacing:.01em;
}

.ste-control-header-actions{
    display:flex;
    align-items:center;
    gap:8px;
}
.ste-icon-btn{
    width:38px;
    height:38px;
    border-radius:11px;
    border:1px solid var(--ste-border);
    background:#0f0f12;
    color:var(--ste-text);
    cursor:pointer;
    font-size:18px;
    transition:.16s ease;
}
.ste-icon-btn:hover{
    border-color:var(--ste-border-gold);
    color:var(--ste-gold-2);
}

.ste-live-pill{
    min-height:38px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
    border-radius:999px;
    border:1px solid rgba(143,181,141,.22);
    background:rgba(143,181,141,.06);
    color:#b8d1b6;
    font-size:12px;
    font-weight:850;
    letter-spacing:.02em;
}
.ste-live-pill::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#8fb58d;
    box-shadow:0 0 0 4px rgba(143,181,141,.08);
}

.ste-control-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:10px 0 14px;
}
.ste-toolbar-group{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.ste-toolbar-meta{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--ste-muted);
    font-size:12px;
}
.ste-toolbar-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--ste-gold);
}

.ste-control-grid{
    --ste-center-width:760px;
    --ste-right-width:290px;
    display:grid;
    grid-template-columns:
        minmax(460px,var(--ste-center-width))
        8px
        minmax(240px,var(--ste-right-width));
    align-items:stretch;
    gap:8px;
    min-height:calc(100vh - 150px);
}

.ste-cc-panel{
    position:relative;
    min-width:0;
    overflow:hidden;
    border:1px solid var(--ste-border);
    border-radius:18px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.018),transparent 45%),
        var(--ste-panel);
    box-shadow:0 18px 55px rgba(0,0,0,.27);
}

.ste-cc-left,
.ste-cc-right{
    padding:18px;
}
.ste-cc-center{
    display:flex;
    flex-direction:column;
    padding:22px;
    border-color:var(--ste-border-gold);
    background:
        radial-gradient(circle at 80% 0%,rgba(112,19,47,.13),transparent 32%),
        linear-gradient(180deg,rgba(255,255,255,.025),transparent 48%),
        #101012;
}

.ste-resizer{
    position:relative;
    cursor:col-resize;
    border-radius:999px;
}
.ste-resizer::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:3px;
    height:88px;
    transform:translate(-50%,-50%);
    border-radius:999px;
    background:linear-gradient(180deg,transparent,var(--ste-gold),transparent);
    opacity:.75;
    transition:.18s ease;
}
.ste-resizer:hover::before{
    width:4px;
    height:118px;
    opacity:1;
    box-shadow:0 0 18px rgba(200,164,91,.16);
}

.ste-panel-head,
.ste-nowplaying-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}
.ste-panel-head h2{
    margin:4px 0 0;
    font-size:23px;
}
.ste-counter{
    min-width:34px;
    height:34px;
    padding:0 9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(112,19,47,.13);
    border:1px solid rgba(112,19,47,.28);
    color:#e4b4c1;
    font-weight:900;
}

.ste-queue-filters{
    display:flex;
    gap:6px;
    margin:14px 0 12px;
    flex-wrap:wrap;
}
.ste-chip{
    padding:6px 8px;
    border:1px solid var(--ste-border);
    border-radius:999px;
    color:var(--ste-muted);
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.ste-chip-gold{
    color:var(--ste-gold-2);
    border-color:var(--ste-border-gold);
}

.ste-queue-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    overflow:auto;
    max-height:calc(100vh - 280px);
    padding-right:3px;
    scrollbar-width:thin;
    scrollbar-color:#383239 transparent;
}
.ste-queue-row{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:12px;
    border:1px solid var(--ste-border);
    border-radius:12px;
    background:#0c0c0f;
    transition:.14s ease;
}
.ste-queue-row:hover{
    transform:translateY(-1px);
    border-color:rgba(200,164,91,.16);
    background:#101013;
}
.ste-queue-index{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#16161a;
    color:var(--ste-gold);
    font-size:12px;
    font-weight:900;
}
.ste-queue-song{
    min-width:0;
}
.ste-queue-song strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
}
.ste-queue-song span{
    display:block;
    margin-top:3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--ste-muted);
    font-size:11px;
}
.ste-queue-badge{
    color:var(--ste-gold);
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
}
.ste-queue-row.is-first{
    border-color:rgba(200,164,91,.30);
    background:linear-gradient(90deg,rgba(200,164,91,.07),#0c0c0f 34%);
}
.ste-queue-row.is-skip{
    border-color:rgba(112,19,47,.30);
    background:linear-gradient(90deg,rgba(112,19,47,.10),#0c0c0f 34%);
}

.ste-empty-state{
    min-height:180px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:var(--ste-muted);
    text-align:center;
}
.ste-empty-state span{
    font-size:34px;
    color:var(--ste-gold-dark);
}
.ste-empty-state p{margin:0;font-size:12px}

.ste-nowplaying-head{
    margin-bottom:20px;
}
.ste-nowplaying-head h1{
    margin:5px 0 4px;
    font-size:clamp(25px,2.3vw,38px);
    line-height:1.08;
    letter-spacing:-.025em;
}
.ste-nowplaying-head p{
    margin:0;
    color:var(--ste-muted);
    font-size:13px;
}
.ste-priority-mark{
    flex:0 0 auto;
    padding:7px 9px;
    border-radius:9px;
    border:1px solid var(--ste-border-gold);
    background:rgba(200,164,91,.07);
    color:var(--ste-gold-2);
    font-size:10px;
    font-weight:900;
    letter-spacing:.09em;
}

.ste-player-card{
    display:grid;
    grid-template-columns:88px minmax(0,1fr);
    gap:18px;
    align-items:center;
    padding:18px;
    border-radius:16px;
    border:1px solid var(--ste-border);
    background:
        linear-gradient(135deg,rgba(112,19,47,.08),transparent 45%),
        #0a0a0c;
    min-height:132px;
}
.ste-cover-placeholder{
    width:88px;
    height:88px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    border:1px solid rgba(200,164,91,.22);
    background:
        radial-gradient(circle at 35% 25%,rgba(200,164,91,.16),transparent 32%),
        linear-gradient(145deg,#1b1014,#0b0b0d);
    color:var(--ste-gold);
    font-size:25px;
    font-weight:950;
    letter-spacing:-.05em;
    box-shadow:inset 0 0 28px rgba(112,19,47,.13);
}
.ste-player-main{min-width:0}
.ste-player-wrap{width:100%}
.ste-player-empty{
    color:var(--ste-muted);
    font-size:13px;
}

.ste-custom-player{
    width:100%;
}
.ste-player-topline{
    display:flex;
    align-items:center;
    gap:10px;
}
.ste-player-play{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(200,164,91,.22);
    border-radius:50%;
    background:linear-gradient(180deg,var(--ste-gold-2),var(--ste-gold));
    color:#14100a;
    cursor:pointer;
    font-size:16px;
    font-weight:900;
    box-shadow:0 8px 24px rgba(200,164,91,.13);
}
.ste-player-time{
    min-width:92px;
    color:var(--ste-muted);
    font-size:11px;
    font-variant-numeric:tabular-nums;
}
.ste-player-seek{
    width:100%;
    accent-color:var(--ste-gold);
    cursor:pointer;
}
.ste-player-bottom{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
}
.ste-player-small-btn{
    width:34px;
    height:30px;
    border:1px solid var(--ste-border);
    border-radius:8px;
    background:#121216;
    color:var(--ste-muted);
    cursor:pointer;
    font-size:11px;
    font-weight:850;
}
.ste-player-small-btn:hover{color:var(--ste-text);border-color:var(--ste-border-gold)}
.ste-player-volume{
    width:92px;
    accent-color:var(--ste-wine-soft);
}
.ste-player-source{
    margin-left:auto;
    color:var(--ste-muted);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.ste-link-button{
    display:inline-flex;
    align-items:center;
    padding:12px 15px;
    border-radius:10px;
    background:#111115;
    border:1px solid var(--ste-border-gold);
    color:var(--ste-gold-2);
    text-decoration:none;
    font-weight:850;
}

.ste-current-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:auto;
    padding-top:20px;
}
.ste-nav-btn{
    min-height:48px;
    border-radius:13px;
    border:1px solid var(--ste-border);
    cursor:pointer;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:.16s ease;
}
.ste-nav-btn:hover{transform:translateY(-1px)}
.ste-nav-btn-secondary{
    background:#101014;
    color:var(--ste-text);
}
.ste-nav-btn-primary{
    border-color:rgba(112,19,47,.28);
    background:linear-gradient(180deg,var(--ste-wine-2),var(--ste-wine));
    color:#fff;
    box-shadow:0 9px 25px rgba(112,19,47,.18);
}
.ste-nav-icon{font-size:16px}

.ste-stats-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:15px;
}
.ste-stat-card{
    padding:13px;
    border-radius:12px;
    border:1px solid var(--ste-border);
    background:#0c0c0f;
}
.ste-stat-card span{
    display:block;
    color:var(--ste-muted);
    font-size:10px;
    margin-bottom:5px;
}
.ste-stat-card strong{
    font-size:21px;
    font-variant-numeric:tabular-nums;
}
.ste-stat-card-gold{
    border-color:rgba(200,164,91,.18);
}
.ste-stat-card-gold strong{color:var(--ste-gold-2)}
.ste-stat-card-wine{
    border-color:rgba(112,19,47,.25);
}
.ste-stat-card-wine strong{color:#d98aa3}

.ste-cc-info-card{
    margin-top:12px;
    padding:14px;
    border:1px solid var(--ste-border);
    border-radius:12px;
    background:#0c0c0f;
}
.ste-cc-info-card strong{
    display:block;
    margin-top:5px;
    font-size:13px;
}
.ste-cc-info-card p{
    margin:7px 0 0;
    color:var(--ste-muted);
    font-size:11px;
    line-height:1.5;
}

/* TikTok / Compact mode */
.ste-control-grid.is-compact{
    --ste-center-width:560px;
    --ste-right-width:250px;
}
.ste-control-grid.is-wide{
    --ste-center-width:900px;
    --ste-right-width:300px;
}

/* Responsive fallback */
@media (max-width:1180px){
    .ste-control-grid{
        grid-template-columns:minmax(420px,1fr);
    }
    .ste-cc-right{display:none}
    .ste-resizer-right{display:none}
}
@media (max-width:820px){
    .ste-control-app{padding:8px}
    .ste-control-header,.ste-control-toolbar,.ste-control-grid{
        width:100%;
    }
    .ste-control-header{
        align-items:flex-start;
        flex-direction:column;
    }
    .ste-control-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }
    .ste-control-grid{
        display:flex;
        flex-direction:column;
        min-height:auto;
    }
    .ste-resizer{display:none}
    .ste-cc-panel{min-height:auto}
    .ste-queue-list{max-height:360px}
}
@media (max-width:640px){
    .ste-card{padding:20px}
    .ste-ticket-grid{grid-template-columns:1fr}
    .ste-player-card{grid-template-columns:1fr}
    .ste-cover-placeholder{width:72px;height:72px}
    .ste-current-actions{grid-template-columns:1fr}
}


/* v1.0.1 – Elementor Canvas / boxed container breakout
   Das Control Center soll immer am Viewport ausgerichtet sein und nicht
   an einer schmaleren Elementor-Containerbreite hängen. */
.ste-control-app{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    overflow-x:hidden;
}

.ste-control-header,
.ste-control-toolbar,
.ste-control-grid{
    width:calc(100vw - 28px);
    max-width:1800px;
}

/* Elementor darf dem Shortcode-Widget keine zusätzliche Max-Breite aufzwingen. */
.elementor-widget-shortcode:has(.ste-control-app),
.elementor-widget-shortcode:has(.ste-control-app) > .elementor-widget-container{
    width:100%;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}


/* v1.0.2 – sichtbare Live-Queue für Zuschauer */
.ste-public-live{
    margin-top:18px;
}
.ste-public-now-card{
    padding-top:26px;
}
.ste-public-now-card h2{
    margin:5px 0 6px;
    font-size:clamp(25px,4vw,38px);
}
.ste-public-player-card{
    margin-top:18px;
}
.ste-public-custom-player .ste-player-topline{
    width:100%;
}
.ste-public-queue-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-top:26px;
    padding-top:22px;
    border-top:1px solid var(--ste-border);
}
.ste-public-queue-head h3{
    margin:4px 0 0;
    font-size:22px;
}
.ste-public-queue-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:14px;
}
.ste-public-queue-row{
    display:grid;
    grid-template-columns:36px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:12px 13px;
    border:1px solid var(--ste-border);
    border-radius:12px;
    background:#0b0b0d;
}
.ste-public-queue-row.is-first{
    border-color:rgba(200,164,91,.30);
    background:linear-gradient(90deg,rgba(200,164,91,.07),#0b0b0d 35%);
}
.ste-public-queue-row.is-skip{
    border-color:rgba(112,19,47,.30);
    background:linear-gradient(90deg,rgba(112,19,47,.10),#0b0b0d 35%);
}


/* v1.0.3 – Logo zentriert über dem mittleren Control-Center-Fenster */
.ste-center-logo{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:-4px 0 16px;
    padding-bottom:14px;
    border-bottom:1px solid var(--ste-border);
}
.ste-center-logo .ste-logo-wrap{
    width:132px;
    max-width:34%;
    margin:0;
}
.ste-center-logo .ste-brand{
    margin:0;
    text-align:center;
}


/* v1.0.4 – Queue direkt unter dem Player */
.ste-center-queue{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid var(--ste-border);
}
.ste-center-queue-head{
    margin-top:0;
    padding-top:0;
    border-top:0;
}
.ste-center-queue-head h3{
    margin:4px 0 0;
    font-size:20px;
}
.ste-center-queue-filters{
    margin:12px 0 10px;
}
.ste-center-queue-list{
    max-height:310px;
    overflow:auto;
    padding-right:3px;
}


/* v1.0.5 overrides – left placeholder, higher panels, logo above center panel */
.ste-control-app{
    padding-top:8px;
}

.ste-control-header{
    min-height:52px;
    padding-top:4px;
    padding-bottom:4px;
}

.ste-control-toolbar{
    padding-top:4px;
    padding-bottom:8px;
}

.ste-control-topgrid,
.ste-control-header,
.ste-control-toolbar,
.ste-control-grid{
    width:min(1800px,calc(100vw - 28px));
    margin-left:auto;
    margin-right:auto;
}

.ste-control-topgrid{
    --ste-left-width:290px;
    --ste-center-width:760px;
    --ste-right-width:290px;
    display:grid;
    grid-template-columns:
        minmax(240px,var(--ste-left-width))
        minmax(460px,var(--ste-center-width))
        minmax(240px,var(--ste-right-width));
    align-items:end;
    gap:8px;
    margin-bottom:8px;
}

.ste-topgrid-side{
    min-height:1px;
}

.ste-center-logo-floating{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    min-height:64px;
}
.ste-center-logo-floating .ste-logo-wrap{
    width:92px;
    max-width:24%;
    margin:0;
}
.ste-center-logo-floating .ste-brand{
    margin:0;
    font-size:22px;
    text-align:center;
}

.ste-control-grid{
    --ste-left-width:290px;
    --ste-center-width:760px;
    --ste-right-width:290px;
    grid-template-columns:
        minmax(240px,var(--ste-left-width))
        minmax(460px,var(--ste-center-width))
        8px
        minmax(240px,var(--ste-right-width));
    min-height:calc(100vh - 126px);
}

.ste-cc-left-empty{
    display:block;
    border:1px solid var(--ste-border);
    border-radius:18px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.015),transparent 45%),
        var(--ste-panel);
    min-height:100%;
}
.ste-empty-panel-inner{
    min-height:100%;
}

.ste-cc-center{
    padding-top:18px;
}

.ste-nowplaying-head{
    margin-bottom:16px;
}

/* remove old in-panel logo spacing if cached css still exists */
.ste-center-logo{display:none!important}

.ste-control-grid.is-compact{
    --ste-left-width:260px;
    --ste-center-width:560px;
    --ste-right-width:260px;
}
.ste-control-grid.is-wide{
    --ste-left-width:290px;
    --ste-center-width:900px;
    --ste-right-width:290px;
}

@media (max-width:1180px){
    .ste-control-topgrid{
        display:none;
    }
    .ste-control-grid{
        grid-template-columns:minmax(420px,1fr);
    }
    .ste-cc-left-empty,
    .ste-cc-right,
    .ste-resizer-right{
        display:none;
    }
}

@media (max-width:820px){
    .ste-control-topgrid{
        display:none;
    }
    .ste-cc-left-empty{
        display:none;
    }
}


/* v1.0.6 – linker Stretch-Mechanismus + Panels insgesamt höher */
.ste-control-app{
    padding-top:4px;
}

.ste-control-header{
    min-height:44px;
    padding-top:0;
    padding-bottom:2px;
}

.ste-control-toolbar{
    padding-top:2px;
    padding-bottom:6px;
}

.ste-control-topgrid,
.ste-control-header,
.ste-control-toolbar,
.ste-control-grid{
    width:min(1800px,calc(100vw - 24px));
}

.ste-control-topgrid{
    --ste-left-width:290px;
    --ste-center-width:760px;
    --ste-right-width:290px;
    display:grid;
    grid-template-columns:
        minmax(240px,var(--ste-left-width))
        8px
        minmax(460px,var(--ste-center-width))
        8px
        minmax(240px,var(--ste-right-width));
    gap:8px;
    align-items:end;
    margin-bottom:4px;
}

.ste-center-logo-floating{
    grid-column:3;
    min-height:42px;
}
.ste-center-logo-floating .ste-logo-wrap{
    width:78px;
}
.ste-center-logo-floating .ste-brand{
    font-size:20px;
}

.ste-control-grid{
    --ste-left-width:290px;
    --ste-center-width:760px;
    --ste-right-width:290px;
    grid-template-columns:
        minmax(240px,var(--ste-left-width))
        8px
        minmax(460px,var(--ste-center-width))
        8px
        minmax(240px,var(--ste-right-width));
    min-height:calc(100vh - 110px);
    margin-top:-2px;
}

.ste-cc-panel{
    align-self:start;
}

.ste-cc-left-empty{
    display:block;
}

.ste-resizer-left,
.ste-resizer-right{
    display:block;
}

.ste-cc-center{
    padding-top:14px;
}

.ste-control-grid.is-compact{
    --ste-left-width:220px;
    --ste-center-width:560px;
    --ste-right-width:260px;
}
.ste-control-grid.is-wide{
    --ste-left-width:340px;
    --ste-center-width:900px;
    --ste-right-width:290px;
}

@media (max-width:1180px){
    .ste-control-topgrid{
        display:none;
    }
    .ste-control-grid{
        grid-template-columns:minmax(420px,1fr);
        margin-top:0;
    }
    .ste-cc-left-empty,
    .ste-resizer-left,
    .ste-cc-right,
    .ste-resizer-right{
        display:none;
    }
}


/* v1.0.8 – eingebettete Spotify / Apple Music Player */
.ste-music-embed{
    width:100%;
    overflow:hidden;
    border-radius:14px;
    background:#08080a;
    border:1px solid var(--ste-border);
}
.ste-music-embed iframe{
    display:block;
    width:100%;
    max-width:100%;
    border:0;
    background:transparent;
}
.ste-music-embed-spotify{
    min-height:152px;
}
.ste-music-embed-apple{
    min-height:175px;
}
.ste-public-player-card .ste-music-embed{
    margin:0;
}


/* v1.0.10 – YouTube / SoundCloud Embeds */
.ste-music-embed-youtube{
    min-height:300px;
    aspect-ratio:16 / 9;
}
.ste-music-embed-youtube iframe{
    height:100%;
    aspect-ratio:16 / 9;
}
.ste-music-embed-soundcloud{
    min-height:166px;
}


/* v1.0.12 – rechtes Control-Center-Fenster nutzt die komplette Restbreite */
.ste-control-grid{
    grid-template-columns:
        minmax(180px,var(--ste-left-width))
        8px
        minmax(460px,var(--ste-center-width))
        8px
        minmax(280px,1fr);
}

.ste-control-topgrid{
    grid-template-columns:
        minmax(180px,var(--ste-left-width))
        8px
        minmax(460px,var(--ste-center-width))
        8px
        minmax(280px,1fr);
}

/* Das rechte Fenster darf sich voll ausdehnen. */
.ste-cc-right{
    width:100%;
    max-width:none;
}

/* Statistik-Karten nutzen auf breiten Screens mehr Platz sinnvoll aus. */
.ste-cc-right .ste-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Wide-Mode: Mitte bleibt größer, rechts nimmt trotzdem den Rest. */
.ste-control-grid.is-wide{
    --ste-left-width:340px;
    --ste-center-width:900px;
}


/* v1.0.13 – Farbgewichtung stärker auf Weinrot statt Gold */
:root{
    --ste-wine:#7b1433;
    --ste-wine-2:#9a1a43;
    --ste-wine-soft:#b02f57;
    --ste-gold:#a68549;
    --ste-gold-2:#c3a564;
    --ste-gold-dark:#7d6537;
    --ste-border-gold:rgba(166,133,73,.16);
}

/* Headline-Labels und kleine UI-Akzente mehr in Weinrot */
.ste-kicker,
.ste-eyebrow{
    color:#d67895;
}

.ste-counter{
    background:rgba(123,20,51,.18);
    border-color:rgba(154,26,67,.34);
    color:#f1b2c5;
}

.ste-queue-index{
    background:rgba(123,20,51,.16);
    color:#efb4c6;
}

.ste-chip-gold{
    color:#e2a2b6;
    border-color:rgba(154,26,67,.30);
    background:rgba(123,20,51,.08);
}

.ste-priority-mark{
    border-color:rgba(154,26,67,.30);
    background:rgba(123,20,51,.12);
    color:#efb4c6;
}

.ste-toolbar-dot{
    background:var(--ste-wine-soft);
}

.ste-live-pill{
    border-color:rgba(154,26,67,.24);
    background:rgba(123,20,51,.10);
    color:#f0c3cf;
}
.ste-live-pill::before{
    background:#d67895;
    box-shadow:0 0 0 4px rgba(214,120,149,.10);
}

/* Stats rechts: Weinrot dominanter, Gold nur noch unterstützend */
.ste-stat-card-gold{
    border-color:rgba(154,26,67,.26);
}
.ste-stat-card-gold strong{
    color:#efb4c6;
}

.ste-stat-card-wine{
    border-color:rgba(154,26,67,.34);
    background:linear-gradient(180deg,rgba(123,20,51,.08),rgba(0,0,0,0)), #0c0c0f;
}
.ste-stat-card-wine strong{
    color:#f0a7bc;
}

/* Queue- und Public-Highlights ebenfalls etwas roter */
.ste-queue-row.is-first,
.ste-public-queue-row.is-first{
    border-color:rgba(154,26,67,.34);
    background:linear-gradient(90deg,rgba(123,20,51,.15),#0c0c0f 38%);
}

.ste-queue-row.is-skip,
.ste-public-queue-row.is-skip{
    border-color:rgba(154,26,67,.34);
    background:linear-gradient(90deg,rgba(123,20,51,.12),#0c0c0f 38%);
}

/* Gold bleibt im Player und als edler Sekundärakzent erhalten, aber dezenter */
.ste-player-play{
    background:linear-gradient(180deg,var(--ste-gold-2),var(--ste-gold));
    box-shadow:0 8px 20px rgba(166,133,73,.10);
}
.ste-cover-placeholder{
    border-color:rgba(166,133,73,.18);
}

/* Button-Primärstil etwas satter in Weinrot */
.ste-btn-primary,
.ste-nav-btn-primary,
.ste-source-tab.active{
    background:linear-gradient(180deg,#aa1d49,var(--ste-wine));
    box-shadow:0 9px 24px rgba(123,20,51,.28);
}