:root { --crjb-bg: #fff; --crjb-text: #222; --crjb-panel: rgba(245,245,245,0.92); --crjb-border: #ccc; --crjb-accent: #0073aa; --crjb-sec: #555; }
[data-theme="dark"] { --crjb-bg: #000; --crjb-text: #fff; --crjb-panel: rgba(10,10,10,0.85); --crjb-border: #444; --crjb-accent: #3598dc; --crjb-sec: #bbb; }

.crjb-app-container { position: relative; z-index: 10; background: var(--crjb-panel); color: var(--crjb-text); font-family: system-ui, sans-serif; width: 94%; max-width: 480px; margin: 20px auto; padding: 20px; border: 1px solid var(--crjb-border); border-radius: 24px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); backdrop-filter: blur(15px); box-shadow: 0 20px 50px rgba(0,0,0,0.4); }

.crjb-dashboard-grid { display: flex; flex-direction: column; gap: 20px; }
.crjb-dashboard-column { display: flex; flex-direction: column; gap: 15px; }

.crjb-track-item { background: var(--crjb-panel); border: 1px solid var(--crjb-border); padding: 15px; border-radius: 12px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; transition: opacity 0.3s; width: 100%; max-width: none; contain: layout; position: relative; box-sizing: border-box; }
.crjb-track-info { flex: 1; min-width: 160px; max-width: none; overflow: hidden; }

.crjb-locked .crjb-track-info, .crjb-locked .crjb-btn-vote { opacity: 0.5; filter: grayscale(0.8); }
.crjb-locked .crjb-btn-vote { pointer-events: none; cursor: not-allowed; }
.crjb-cooldown-badge { font-size: 10px; font-weight: 800; background: rgba(220, 53, 69, 0.15); color: #dc3545; padding: 4px 10px; border-radius: 6px; display: inline-block; margin-top: 6px; }
.crjb-explicit-badge { font-size: 9px; font-weight: 800; background: #666; color: #fff; padding: 2px 5px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.crjb-genre-badge { font-size: 10px; font-weight: 700; background: var(--crjb-accent); color: #fff; padding: 2px 6px; border-radius: 6px; margin-left: 6px; text-transform: uppercase; }
.crjb-clickable-artist { cursor: pointer; color: var(--crjb-accent); transition: opacity 0.2s; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.crjb-btn { background: var(--crjb-accent); color: #fff; border: none; padding: 10px 16px; border-radius: 10px; cursor: pointer; font-weight: 700; transition: transform 0.1s; display: inline-flex; align-items: center; justify-content: center; }
.crjb-btn-vote { background: #28a745; transition: all 0.2s ease; }
.crjb-btn-vote.crjb-voted { background: #155d27; opacity: 0.7; cursor: default; }
.crjb-btn-sync { background: #d63638; width: 100%; padding: 18px; border-radius: 50px; animation: pulse 2s infinite; margin-top: 15px; font-size: 17px;}
.crjb-btn-disconnect { background: var(--crjb-sec); width: 100%; padding: 18px; border-radius: 50px; display: none; margin-top: 15px;}
.crjb-station-badge { font-size: 11px; font-weight: 800; background: var(--crjb-accent); color: #fff; padding: 4px 10px; border-radius: 12px; margin-top: 5px; display: inline-block; vertical-align: middle; white-space: nowrap; }

.crjb-marquee-container { width: 100%; max-width: 100%; overflow: hidden; white-space: nowrap; background: rgba(0,0,0,0.05); border-radius: 6px; margin-top: 10px; padding: 5px 0; box-sizing: border-box; contain: layout paint; position: relative; display: block; }
[data-theme="dark"] .crjb-marquee-container { background: rgba(255,255,255,0.05); }
.crjb-marquee-content { display: inline-block; padding-left: 100%; animation: crjb-marquee 12s linear infinite; font-weight: 600; font-size: 12px; color: var(--crjb-accent); }

#crjb-schedule-list { max-height: 250px; overflow-y: auto; padding-right: 5px; scrollbar-width: thin; scrollbar-color: var(--crjb-border) transparent; }
#crjb-schedule-list::-webkit-scrollbar { width: 4px; }
#crjb-schedule-list::-webkit-scrollbar-track { background: transparent; }
#crjb-schedule-list::-webkit-scrollbar-thumb { background: var(--crjb-border); border-radius: 4px; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(214, 54, 56, 0.6); } 70% { box-shadow: 0 0 0 15px rgba(214, 54, 56, 0); } 100% { box-shadow: 0 0 0 0 rgba(214, 54, 56, 0); } }
@keyframes crjb-marquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }
@keyframes crjb-spin { 100% { transform: rotate(360deg); } }
.crjb-spin { animation: crjb-spin 1s linear infinite; }

#crjb-alert-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; width: 90%; max-width: 460px; pointer-events: none; }
#crjb-alert-container .alert { pointer-events: auto; font-weight: 600; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); border: none; }

@media (min-width: 768px) {
    .crjb-app-container { max-width: 1140px; width: 92%; padding: 30px; margin: 40px auto; }
    .crjb-dashboard-grid { display: grid; grid-template-columns: 340px 1fr; gap: 25px; align-items: start; }
    
    .crjb-sticky-pane { 
        position: sticky; 
        top: 100px; 
        max-height: calc(100vh - 120px); 
        overflow-y: auto; 
        scrollbar-width: none;
    }
    .crjb-sticky-pane::-webkit-scrollbar { display: none; }
    
    #crjb-queue-list, #crjb-catalog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 15px; }
    .crjb-track-item { margin-bottom: 0; }
}

@media (min-width: 1200px) {
    .crjb-dashboard-grid { grid-template-columns: 380px 1fr; gap: 35px; }
    #crjb-queue-list, #crjb-catalog-list { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 18px; }
}