/* ── Variables & Reset ───────────────────────────────────────────────────── */

#hartz-practice-room {
    --hpr-accent:      #29BDDB;
    --hpr-bg:          #141414;
    --hpr-surface:     #1e1e1e;
    --hpr-surface-2:   #2a2a2a;
    --hpr-border:      #333;
    --hpr-text:        #ffffff;
    --hpr-muted:       #888;
    --hpr-red:         #e0205a;
    --hpr-radius:      8px;

    background:  var(--hpr-bg);
    color:       var(--hpr-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    padding:     24px;
    box-sizing:  border-box;
    min-height:  80vh;
}

#hartz-practice-room *, #hartz-practice-room *::before, #hartz-practice-room *::after {
    box-sizing: border-box;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.hpr-header {
    margin-bottom:  20px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.hpr-top-row {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-wrap:   wrap;
}

#hpr-search {
    width:         100%;
    max-width:     340px;
    background:    var(--hpr-surface);
    border:        1px solid var(--hpr-border);
    color:         var(--hpr-text);
    padding:       10px 14px;
    border-radius: var(--hpr-radius);
    font-size:     14px;
    outline:       none;
}

#hpr-search:focus {
    border-color: var(--hpr-accent);
}

#hpr-search::placeholder {
    color: var(--hpr-muted);
}

.hpr-instrument-filter {
    display:     flex;
    gap:         6px;
    flex-wrap:   wrap;
}

/* ── Pills ───────────────────────────────────────────────────────────────── */

#hartz-practice-room .hpr-pill {
    background:    var(--hpr-surface);
    border:        1px solid var(--hpr-border);
    color:         var(--hpr-muted);
    padding:       6px 14px;
    border-radius: 20px;
    font-size:     13px;
    font-weight:   500;
    cursor:        pointer;
    transition:    border-color 0.15s, color 0.15s, background 0.15s;
    line-height:   1;
}

#hartz-practice-room .hpr-pill:hover:not(:disabled) {
    border-color: var(--hpr-accent);
    color:        var(--hpr-accent);
}

/* High-contrast selected state — solid filled blue */
#hartz-practice-room .hpr-pill.active {
    background:  var(--hpr-accent) !important;
    border:      2px solid var(--hpr-accent) !important;
    color:       #000 !important;
    font-weight: 700 !important;
    padding:     5px 13px;
}

#hartz-practice-room .hpr-pill:disabled {
    opacity: 0.35;
    cursor:  default;
}

/* ── Dropdown Filters ────────────────────────────────────────────────────── */

.hpr-filters {
    display:     flex;
    flex-wrap:   wrap;
    gap:         12px;
    align-items: center;
}

.hpr-select-group {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.hpr-filter-label {
    font-size:      12px;
    color:          var(--hpr-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink:    0;
}

.hpr-select {
    background:    var(--hpr-surface);
    border:        1px solid var(--hpr-border);
    color:         var(--hpr-text);
    padding:       6px 28px 6px 10px;
    border-radius: var(--hpr-radius);
    font-size:     13px;
    cursor:        pointer;
    outline:       none;
    -webkit-appearance: none;
    appearance:    none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 9px center;
    min-width: 90px;
}

.hpr-select:focus {
    border-color: var(--hpr-accent);
}

/* ── Playlists Bar ───────────────────────────────────────────────────────── */

.hpr-playlists-bar {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}

.hpr-pl-sep {
    color:  var(--hpr-border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── Body Layout ─────────────────────────────────────────────────────────── */

.hpr-body {
    display:               grid;
    grid-template-columns: 300px 1fr;
    gap:                   20px;
    align-items:           start;
}

/* ── Track List ──────────────────────────────────────────────────────────── */

.hpr-track-list {
    background:    var(--hpr-surface);
    border-radius: var(--hpr-radius);
    border:        1px solid var(--hpr-border);
    overflow-y:    auto;
    max-height:    calc(100vh - 220px);
}

.hpr-track-item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       10px 14px;
    cursor:        pointer;
    border-bottom: 1px solid var(--hpr-border);
    transition:    background 0.1s;
}

.hpr-track-item:last-child {
    border-bottom: none;
}

.hpr-track-item:hover {
    background: var(--hpr-surface-2);
}

.hpr-track-item.active {
    background:   var(--hpr-surface-2);
    border-left:  3px solid var(--hpr-accent);
    padding-left: 11px;
}

.hpr-track-thumb {
    width:         50px;
    height:        50px;
    flex-shrink:   0;
    border-radius: 4px;
    overflow:      hidden;
    background:    var(--hpr-surface-2);
}

.hpr-track-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.hpr-track-info {
    flex:      1;
    min-width: 0;
}

.hpr-track-title {
    font-size:     13px;
    font-weight:   500;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.hpr-track-meta {
    display:     flex;
    gap:         4px;
    flex-wrap:   wrap;
    align-items: center;
}

.hpr-tag {
    font-size:     11px;
    background:    var(--hpr-surface-2);
    border:        1px solid var(--hpr-border);
    color:         var(--hpr-muted);
    padding:       2px 7px;
    border-radius: 10px;
}

.hpr-tag-level {
    border-color: #555;
    color:        #aaa;
}

/* ── Playlist dots (track list) ──────────────────────────────────────────── */

.hpr-pl-dots {
    display:     flex;
    gap:         3px;
    align-items: center;
}

.hpr-pl-dot {
    width:           16px;
    height:          16px;
    border-radius:   50%;
    font-size:       9px;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #000;
    flex-shrink:     0;
}

.hpr-pl-dot-0 { background: var(--hpr-accent); }
.hpr-pl-dot-1 { background: #f5a623; }
.hpr-pl-dot-2 { background: #7ed321; }

.hpr-empty {
    padding:    40px 20px;
    text-align: center;
    color:      var(--hpr-muted);
    font-size:  14px;
}

/* ── Player Panel ────────────────────────────────────────────────────────── */

.hpr-player {
    background:     var(--hpr-surface);
    border-radius:  var(--hpr-radius);
    border:         1px solid var(--hpr-border);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    position:       relative;
}

.hpr-player-empty {
    padding:    80px 30px;
    text-align: center;
    color:      var(--hpr-muted);
    font-size:  15px;
}

/* ── Artwork (ambient blur fill) ─────────────────────────────────────────── */

.hpr-player-art {
    position:   relative;
    width:      100%;
    height:     260px;
    background: #0d0d0d;
    flex-shrink: 0;
    overflow:   hidden;
}

.hpr-art-bg {
    position:            absolute;
    inset:               -20px;
    background-size:     cover;
    background-position: center;
    filter:              blur(22px) brightness(0.6);
}

.hpr-player-art img {
    position:   relative;
    z-index:    1;
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
}

.hpr-art-placeholder {
    width:      100%;
    height:     100%;
    background: var(--hpr-surface-2);
}

/* ── Player Header ───────────────────────────────────────────────────────── */

.hpr-player-header {
    padding:       16px 20px 12px;
    border-bottom: 1px solid var(--hpr-border);
}

.hpr-player-title {
    font-size:     18px;
    font-weight:   700;
    margin-bottom: 8px;
}

.hpr-player-meta {
    display:       flex;
    gap:           6px;
    flex-wrap:     wrap;
    margin-bottom: 8px;
}

.hpr-lesson-link {
    font-size:       13px;
    color:           var(--hpr-accent);
    text-decoration: none;
    display:         inline-block;
}

.hpr-lesson-link:hover {
    text-decoration: underline;
}

.hpr-status {
    padding:    30px;
    text-align: center;
    color:      var(--hpr-muted);
    font-size:  14px;
}

.hpr-status.hpr-error {
    color: var(--hpr-red);
}

/* ── Transport ───────────────────────────────────────────────────────────── */

.hpr-transport {
    padding: 16px 20px 20px;
    flex:    1;
}

.hpr-progress-wrap {
    display:       flex;
    align-items:   center;
    gap:           10px;
    margin-bottom: 14px;
}

.hpr-time {
    font-size:   12px;
    color:       var(--hpr-muted);
    min-width:   34px;
    flex-shrink: 0;
}

.hpr-time-right {
    text-align: right;
}

.hpr-progress-bar {
    flex:          1;
    height:        4px;
    background:    var(--hpr-surface-2);
    border-radius: 2px;
    cursor:        pointer;
    position:      relative;
    transition:    height 0.1s;
}

.hpr-progress-bar:hover {
    height: 6px;
}

.hpr-progress-fill {
    height:         100%;
    background:     var(--hpr-accent);
    border-radius:  2px;
    width:          0%;
    pointer-events: none;
    transition:     none;
}

.hpr-controls {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             10px;
    margin-bottom:   14px;
}

.hpr-play-btn {
    background:      var(--hpr-accent);
    border:          none;
    color:           #000;
    width:           54px;
    height:          54px;
    border-radius:   50%;
    font-size:       18px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      transform 0.1s;
    font-weight:     700;
}

.hpr-play-btn:hover {
    transform: scale(1.06);
}

.hpr-repeat-btn {
    background:    var(--hpr-surface-2);
    border:        1px solid var(--hpr-border);
    color:         var(--hpr-muted);
    padding:       8px 16px;
    border-radius: 20px;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    color 0.15s, border-color 0.15s, background 0.15s;
    white-space:   nowrap;
}

.hpr-repeat-btn:hover {
    color:        var(--hpr-accent);
    border-color: var(--hpr-accent);
}

.hpr-repeat-btn.active {
    background:   var(--hpr-accent);
    border-color: var(--hpr-accent);
    color:        #000;
    font-weight:  700;
}

/* ── A/B Loop (collapsible) ──────────────────────────────────────────────── */

.hpr-ab-section {
    margin-bottom: 14px;
    border:        1px solid var(--hpr-border);
    border-radius: var(--hpr-radius);
    overflow:      hidden;
}

.hpr-ab-expand-btn {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    background:      var(--hpr-surface-2);
    border:          none;
    color:           var(--hpr-muted);
    padding:         8px 14px;
    font-size:       12px;
    font-weight:     600;
    cursor:          pointer;
    text-align:      left;
    letter-spacing:  0.04em;
    transition:      color 0.15s;
}

.hpr-ab-expand-btn::after {
    content:   '▾';
    font-size: 10px;
    transition: transform 0.2s;
}

.hpr-ab-section.expanded .hpr-ab-expand-btn::after {
    transform: rotate(180deg);
}

.hpr-ab-expand-btn:hover {
    color: var(--hpr-accent);
}

.hpr-ab-dot-indicator {
    display:       inline-block;
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--hpr-accent);
    margin-left:   4px;
    vertical-align: middle;
}

.hpr-ab-row {
    display:         none;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         10px 14px;
    flex-wrap:       wrap;
    border-top:      1px solid var(--hpr-border);
    background:      var(--hpr-surface);
}

.hpr-ab-section.expanded .hpr-ab-row {
    display: flex;
}

.hpr-ab-btn {
    background:    var(--hpr-surface-2);
    border:        1px solid var(--hpr-border);
    color:         var(--hpr-text);
    padding:       5px 10px;
    border-radius: 4px;
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    transition:    border-color 0.15s, color 0.15s;
}

.hpr-ab-btn:hover {
    border-color: var(--hpr-accent);
    color:        var(--hpr-accent);
}

.hpr-ab-time {
    font-size:  12px;
    color:      var(--hpr-muted);
    min-width:  36px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.hpr-ab-toggle {
    background:    var(--hpr-surface-2);
    border:        1px solid var(--hpr-border);
    color:         var(--hpr-muted);
    padding:       5px 12px;
    border-radius: 4px;
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.15s, border-color 0.15s, color 0.15s;
}

.hpr-ab-toggle:disabled {
    opacity: 0.35;
    cursor:  not-allowed;
}

.hpr-ab-toggle.active {
    background:   var(--hpr-accent);
    border-color: var(--hpr-accent);
    color:        #000;
}

.hpr-ab-clear {
    background:  none;
    border:      none;
    color:       var(--hpr-muted);
    font-size:   11px;
    cursor:      pointer;
    padding:     4px 6px;
    transition:  color 0.15s;
}

.hpr-ab-clear:hover {
    color: var(--hpr-red);
}

/* ── A/B Markers on Progress Bar ─────────────────────────────────────────── */

.hpr-ab-marker {
    position:       absolute;
    top:            -4px;
    width:          2px;
    height:         calc(100% + 8px);
    display:        none;
    pointer-events: none;
}

.hpr-a-marker { background: #f5a623; }
.hpr-b-marker { background: #7ed321; }

/* ── Stem & Speed Sliders ────────────────────────────────────────────────── */

.hpr-stems {
    margin-bottom: 14px;
}

.hpr-stem-row {
    display:       flex;
    align-items:   center;
    gap:           10px;
    margin-bottom: 10px;
}

.hpr-stem-label {
    font-size:   13px;
    color:       var(--hpr-muted);
    min-width:   56px;
    flex-shrink: 0;
}

.hpr-slider {
    flex:               1;
    -webkit-appearance: none;
    appearance:         none;
    height:             4px;
    background:         var(--hpr-surface-2);
    border-radius:      2px;
    outline:            none;
    cursor:             pointer;
}

.hpr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:         14px;
    height:        14px;
    background:    var(--hpr-accent);
    border-radius: 50%;
    cursor:        pointer;
}

.hpr-slider::-moz-range-thumb {
    width:         14px;
    height:        14px;
    background:    var(--hpr-accent);
    border-radius: 50%;
    cursor:        pointer;
    border:        none;
}

.hpr-slider-val {
    font-size:   12px;
    color:       var(--hpr-muted);
    min-width:   38px;
    text-align:  right;
    flex-shrink: 0;
}

.hpr-mute-btn {
    background:    var(--hpr-surface-2);
    border:        1px solid var(--hpr-border);
    color:         var(--hpr-muted);
    width:         28px;
    height:        28px;
    border-radius: 4px;
    font-size:     11px;
    font-weight:   700;
    cursor:        pointer;
    flex-shrink:   0;
    transition:    background 0.15s, color 0.15s, border-color 0.15s;
    line-height:   1;
    padding:       0;
}

.hpr-mute-btn:hover {
    border-color: var(--hpr-accent);
    color:        var(--hpr-accent);
}

.hpr-mute-btn.muted {
    background:   var(--hpr-red);
    border-color: var(--hpr-red);
    color:        #fff;
}

/* ── Playlist Add Buttons (Player) ───────────────────────────────────────── */

.hpr-pl-row {
    display:      flex;
    align-items:  center;
    gap:          8px;
    flex-wrap:    wrap;
    padding-top:  12px;
    border-top:   1px solid var(--hpr-border);
}

.hpr-pl-row-label {
    font-size:   12px;
    color:       var(--hpr-muted);
    flex-shrink: 0;
}

.hpr-pl-add-btn {
    background:    var(--hpr-surface-2);
    border:        1px solid var(--hpr-border);
    color:         var(--hpr-muted);
    padding:       5px 14px;
    border-radius: 4px;
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.15s, border-color 0.15s, color 0.15s;
}

.hpr-pl-add-btn:hover {
    border-color: var(--hpr-accent);
    color:        var(--hpr-accent);
}

.hpr-pl-add-btn.in-playlist {
    background:   var(--hpr-accent);
    border-color: var(--hpr-accent);
    color:        #000;
}

/* ── Countdown Overlay ───────────────────────────────────────────────────── */

.hpr-countdown-overlay {
    position:        absolute;
    inset:           0;
    background:      rgba(0, 0, 0, 0.82);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         20;
    cursor:          pointer;
}

.hpr-countdown-content {
    text-align: center;
    padding:    20px;
}

.hpr-countdown-label {
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          rgba(255, 255, 255, 0.5);
    margin-bottom:  10px;
}

.hpr-countdown-title {
    font-size:     20px;
    font-weight:   700;
    margin-bottom: 24px;
    color:         #fff;
}

.hpr-countdown-num {
    font-size:     72px;
    font-weight:   700;
    color:         var(--hpr-accent);
    line-height:   1;
    margin-bottom: 16px;
}

.hpr-countdown-hint {
    font-size: 12px;
    color:     rgba(255, 255, 255, 0.35);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    #hartz-practice-room {
        padding: 16px;
    }

    .hpr-body {
        grid-template-columns: 1fr;
    }

    .hpr-track-list {
        max-height: 280px;
    }

    .hpr-player-art {
        height: 200px;
    }
}