:root{--panel-bg:#161616}
*{box-sizing:border-box;font-family:'Space Mono',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
body{margin:0;background:#101010;color:#eee}
#app{display:flex;flex-direction:column;height:100vh;overflow:hidden;gap:0;padding:0;max-width:1400px;margin:0 auto}

/* ===== PAGE NAV TABS ===== */
.page-nav{display:flex;gap:0;background:#0a0a0a;border-top:1px solid #222;flex-shrink:0}
.page-tab{flex:1;padding:14px 20px;background:#0a0a0a;color:#777;border:none;border-top:2px solid transparent;border-radius:0;cursor:pointer;font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:color .2s,border-color .2s,background .2s}
.page-tab:hover{color:#ddd;background:#1a1a1a;border-top-color:#444}
.page-tab--active{color:#fff;border-top-color:#7055e5;background:#1a1a1a}

/* ===== PAGE CONTAINERS ===== */
.page{display:flex;flex:1 1 auto;min-height:0;gap:16px;padding:16px;overflow:auto}
.page--hidden{display:none !important}
.page--noscroll{overflow:hidden;flex-direction:column}

/* ===== PANEL BASE ===== */
.panel{background:#161616;padding:20px;border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.05)}

/* ===== AUDIO PAGE ===== */
#audioPage .panel{flex:1 1 48%;min-width:300px}

/* ===== CONTROL PANEL LAYOUT ===== */
.cp-top-row{display:flex;gap:12px;flex:0 0 auto;min-height:0}
.cp-top-row .panel{padding:10px 14px;border-radius:14px}
.cp-top-row .app-banner-button{height:60px;padding:6px;border-radius:10px}
.cp-top-row .by-magmalabs-banner{height:60px;padding:6px;border-radius:10px}
.cp-top-row .kofi-button{height:60px;flex:0 0 60px;border-radius:10px}

.cp-bottom-row{display:flex;gap:12px;flex:1 1 auto;min-height:0;overflow:hidden}
.cp-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.cp-logo-banners{flex:0 0 300px}
.cp-session-intercom{flex:1 1 0}
.cp-stopwatch{flex:0 0 315px;align-items:center;justify-content:flex-start;transition:background 0.3s ease}
.cp-music-mini{flex:0 0 300px}
.cp-slides-mini{flex:1 1 0}
.cp-blank{flex:0 0 315px}

.cp-clock{font-size:1.8rem;font-weight:700;text-align:center;padding:12px;background:#1e1e1e;border:1px solid #2f2f2f;border-radius:14px;width:100%}
.cp-top-row .cp-clock{font-size:1.4rem;padding:6px 10px;border-radius:10px;margin-bottom:4px}

.cp-session-intercom-inner{display:flex;gap:8px;height:100%;min-height:0}
.cp-subsection{flex:1 1 0;display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden}
.cp-subsection h3{margin:0 0 2px;font-size:.9rem}
.cp-subsection select, .cp-subsection input, .cp-subsection button{margin-top:2px;padding:6px 8px;font-size:.8rem;border-radius:8px}
.cp-subsection .row{margin-bottom:6px;gap:8px}
.cp-subsection .file-label{font-size:.8rem}
.cp-subsection .file-label input[type=file]{padding:4px 6px}
.cp-subsection .file-type-list{margin-top:2px;font-size:.72rem}

.cp-now-playing{font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px}
.cp-progression{font-size:.8rem;font-family:'Space Mono',monospace;margin-bottom:6px;color:#aaa}

/* Clock mode tabs and styles */
.clock-mode-tabs{display:flex;width:100%;gap:4px;margin-bottom:8px;background:#101010;padding:3px;border-radius:8px;border:1px solid #2f2f2f;flex-shrink:0}
.clock-mode-tab{flex:1;padding:5px 2px;font-size:.7rem;background:transparent;border:none;border-radius:6px;color:#888;cursor:pointer;text-align:center;text-transform:uppercase;font-weight:700;transition:all .2s;letter-spacing:.02em}
.clock-mode-tab:hover{color:#eee;background:#2a2a2a;border-color:transparent}
.clock-mode-tab.active{background:#7055e5;color:#fff;animation:tab-select-in .18s ease-out}
.clock-display-content{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}
.clock-display-content.hidden{display:none}
.clock-controls{display:flex;gap:6px;width:100%}
.clock-controls button{flex:1;padding:6px;font-size:.75rem;border-radius:8px}
.lap-list{width:100%;max-height:120px;overflow-y:auto;margin-top:4px;display:flex;flex-direction:column;gap:2px}
.lap-item{font-size:.75rem;font-family:'Space Mono',monospace;color:#bbb;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:6px;padding:3px 8px;display:flex;justify-content:space-between}
.timer-settings{display:flex;align-items:center;justify-content:center;gap:4px;margin:2px 0;width:100%}
.timer-input{width:54px !important;text-align:center;padding:4px 6px !important;margin:0 !important;font-size:.8rem;border-radius:8px}
.timer-settings span{font-size:.85rem;color:#888}

/* Alarm pulse for the clock card panel */
@keyframes timerPulse {
  0% { background: var(--panel-bg, #161616); }
  50% { background: #b33; }
  100% { background: var(--panel-bg, #161616); }
}
.cp-stopwatch.timer-alarm{animation:timerPulse 1.2s infinite}
.cp-mini-controls{display:flex;gap:6px;margin-bottom:4px}
.cp-mini-controls .action-button{flex:1;padding:8px 6px;font-size:.8rem}
.cp-mirror-mini{flex:1 1 auto;min-height:0;background:#080808;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.cp-mirror-content-mini{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#555}
.cp-mirror-content-mini img,.cp-mirror-content-mini video{width:100%;height:100%;object-fit:contain;display:block}
.cp-notes-mini textarea{width:100%;margin:0;font-size:.8rem;resize:none;min-height:0}
.cp-settings-footer{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.notes-card-inline{background:#121212;border:1px solid #292929;border-radius:14px;padding:10px}
.notes-card-inline h4{margin:0 0 6px;font-size:.85rem;color:#ccc}
.notes-card-inline textarea{margin:0;font-size:.8rem;resize:none}

/* ===== SLIDES PAGE ===== */
#visualsPage .panel{flex:1 1 48%;min-width:300px}
.presenter-section{display:flex;flex-direction:column;gap:12px}

/* ===== BRAND STACK ===== */
.brand-stack{display:flex;flex-direction:column;gap:8px;width:100%}
.brand-links{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;width:100%}
.version-tag{font-family:'Space Mono',monospace;font-size:.62rem;color:#3a3a3a;text-align:center;letter-spacing:.08em;padding-top:2px;user-select:text}
.app-banner-button,.by-magmalabs-banner,.kofi-button{display:flex;align-items:center;justify-content:center;border:1px solid #2f2f2f;border-radius:14px;background:#111;overflow:hidden;transition:background .2s,border-color .2s,transform .2s}
.app-banner-button{height:62px;padding:10px;cursor:pointer;width:100%}
.by-magmalabs-banner{height:52px;padding:10px;text-decoration:none;flex:1 1 auto;min-width:0}
.kofi-button{height:52px;flex:0 0 52px;padding:0}
.app-banner-button:hover,.by-magmalabs-banner:hover,.kofi-button:hover{background:#1f1f1f;border-color:#444;transform:translateY(-1px)}
.app-banner-button img,.by-magmalabs-banner img,.kofi-button img{display:block;width:100%;height:100%;object-fit:contain}

/* ===== IMMEDIATE TOOLTIP ===== */
.app-tooltip{position:fixed;z-index:3000;pointer-events:none;max-width:280px;padding:6px 10px;background:#000;color:#f0f0f0;border:1px solid #4a4a4a;border-radius:8px;font-size:.78rem;line-height:1.35;white-space:pre-line;box-shadow:0 6px 22px rgba(0,0,0,.45);opacity:0;transform:translateY(2px);transition:opacity .05s ease,transform .05s ease}
.app-tooltip.visible{opacity:1;transform:none}
body.light-mode .app-tooltip{background:#1c1c1c;color:#f5f5f5;border-color:#333}

/* ===== MODAL (e.g. slide-number prompt for deck replace) ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-box{background:#161616;border:1px solid #3a3a3a;border-radius:16px;padding:20px;max-width:380px;width:90%;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.modal-box label{font-size:.9rem;color:#ccc;line-height:1.4}
.modal-box input{width:100%;margin:0}
.modal-actions{display:flex;justify-content:flex-end;gap:10px}
body.light-mode .modal-box{background:#f4f4f6;border-color:#c0c0c6}
body.light-mode .modal-box label{color:#333}

/* ===== COMMON COMPONENTS ===== */
.ecp-card{flex:1 1 620px;min-width:320px;margin-bottom:0;padding:18px;background:#121212;border:1px solid #292929;border-radius:18px}
.ecp-card .note{margin:10px 0 0;font-size:.9rem;color:#999;line-height:1.4}
.notes-card{flex:1 1 100%;width:100%;padding:18px;background:#121212;border:1px solid #292929;border-radius:18px}
.notes-card h3{margin-top:0}
.file-label{display:inline-flex;flex-direction:column;gap:6px;font-size:.95rem;color:#ccc;width:100%}
.file-label input[type=file]{width:100%;margin:0;padding:8px 10px}
.file-input-box{margin-top:12px}
.file-input-box input[type=file]{margin-top:0}
.file-type-list{display:block;margin-top:6px;font-size:.78rem;line-height:1.45;color:#aaa}
.row{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.row.wrap{flex-wrap:wrap}
.field-group{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.mode-buttons{display:flex;gap:10px;flex-wrap:wrap}
.mode-button{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;border-radius:12px;transition:transform .2s,border-color .2s,background .2s}
.mode-button input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0}
.mode-button span{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:10px 14px;background:#2c2c2c;border:1px solid #555;border-radius:12px;color:#eee;min-width:80px;text-transform:uppercase;letter-spacing:.04em}
.mode-button:hover span{background:#383838;border-color:#888;transform:translateY(-1px)}
.mode-button input[type=radio]:checked + span{background:#2a8;color:#011;border-color:#2f9}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
ul{list-style:none;padding:0;margin:12px 0;max-height:320px;overflow:auto}
li{position:relative;padding:14px 14px 14px 20px;border-radius:16px;cursor:pointer;border:1px solid transparent;transition:background .2s,border-color .2s}
li:hover{border-color:#5a5a5a;background:rgba(255,255,255,.03)}
li.active{background:#351466;border-color:#7055e5;box-shadow:inset 0 0 0 1px rgba(112,85,229,.35)}
li .progress-underlay{position:absolute;left:0;top:0;width:0;height:100%;background:rgba(255,255,255,.08);border-radius:16px;z-index:0;transition:width .2s ease}
li .item-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px}
li .detail-group{display:flex;flex-direction:column;gap:4px;min-width:0}
li .item-info{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
li .item-info span{font-size:.95rem;color:#ccc}
li .item-actions{display:flex;gap:8px;align-items:center}
li .item-actions button,li .item-settings button{padding:6px 10px;font-size:.9rem;border-radius:10px;border:1px solid #555;background:#2e2e2e;color:#eee}
li .item-actions button:hover,li .item-settings button:hover{background:#3a3a3a;border-color:#888}
li .item-settings{position:relative;z-index:1;display:none;flex-wrap:wrap;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #333}
li.settings-open .item-settings{display:flex}
.hidden-file-input{display:none}
li .skip-toggle{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:#ccc;cursor:pointer;margin-right:8px}
li .skip-toggle input{width:16px;height:16px;margin:0}
li.skipped{opacity:.78}
li.skipped .item-info span{color:#888}
button{background:#333;color:#fff;border:1px solid #5a5a5a;padding:10px 14px;border-radius:10px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
button:hover{background:#3d3d3d;border-color:#888}
button.action-button.inactive{background:#2d2d2d;color:#999;border-color:#464646}
.page-banner{position:relative;display:flex;align-items:center;justify-content:center;height:160px;border-radius:18px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}
.page-banner:hover{transform:translateY(-1px);box-shadow:0 14px 35px rgba(0,0,0,.25)}
.page-banner .banner-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.65)}
.banner-title{position:relative;z-index:1;font-size:2rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.6)}
.brand-banner{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:#fff;background:#111;border:1px solid #2f2f2f;border-radius:14px;padding:12px 16px;font-size:.95rem;letter-spacing:.08em;transition:background .2s,border-color .2s;margin-top:-6px;z-index:1;position:relative}
.brand-banner:hover{background:#1f1f1f;border-color:#444}
.brand-banner .brand-logo{height:28px;width:auto;display:block}
.soundboard-section{display:flex;flex-direction:column}
.soundboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.soundboard-button{width:100%;padding:12px 14px;background:#2e2e2e;border:1px solid #585858;border-radius:12px;color:#eee;cursor:pointer;font-family:'Space Mono',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;transition:background .2s,border-color .2s,transform .2s;text-align:center}
.soundboard-button:hover{background:#3a3a3a;border-color:#888;transform:translateY(-1px)}
button.action-button.active-play{background:#2a8;color:#011;border-color:#2f9}
button.action-button.active-pause{background:#b33;color:#fff;border-color:#d55}
button.action-button.active-toggle{background:#2a8;color:#011;border-color:#2f9}
button.action-button.active-announcement{background:#2a8;color:#fff;border-color:#2f9}
button.action-button.active-announcement.inactive{background:#2d2d2d;color:#aaa;border-color:#4a4a4a}
input[type=file],input[type=number],select{width:100%;margin-top:12px;padding:10px 12px;background:#202020;border:1px solid #4a4a4a;border-radius:10px;color:#eee}
input[type=file]:focus,input[type=number]:focus,select:focus{outline:none;border-color:#7055e5}
input[type=range]{accent-color:#7055e5;cursor:pointer}
input[type=checkbox]{accent-color:#7055e5;cursor:pointer;width:15px;height:15px}
textarea{width:100%;min-height:96px;margin-top:8px;padding:12px;background:#181818;border:1px solid #3a3a3a;border-radius:10px;color:#eee;resize:vertical;line-height:1.45}
textarea:focus{outline:none;border-color:#7055e5}
textarea:disabled{opacity:.55;cursor:not-allowed}
#status{margin-top:8px;font-size:.95rem;color:#aaa}
#currentSong,#currentMedia{font-weight:700;margin-bottom:10px}
.media-notes-card{margin-top:14px;padding:14px;background:#121212;border:1px solid #292929;border-radius:14px}
.media-notes-card label{display:block;font-size:.9rem;color:#ccc}
.media-mirror{padding:14px;background:#121212;border:1px solid #292929;border-radius:14px;--mirror-display-width:440px;--mirror-display-height:220px}
.media-mirror h4{margin:0 0 10px;font-size:1rem;color:#ccc}
.mirror-content{width:100%;aspect-ratio:16/9;min-height:140px;max-height:360px;display:flex;align-items:center;justify-content:center;background:#080808;border-radius:14px;overflow:hidden}
.mirror-content img,.mirror-content video{width:100%;height:100%;object-fit:contain;display:block}
.media-preview-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;width:100%;align-items:stretch}
.media-preview{border:1px solid #484848;border-radius:14px;background:#1e1e1e;color:#eee;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;cursor:pointer;transition:border-color .2s,transform .2s,background .2s;min-width:0;min-height:0;max-height:220px;overflow:hidden}
.media-preview:disabled{opacity:.45;cursor:not-allowed}
.media-preview:hover:not(:disabled){border-color:#7055e5;background:#252530;transform:translateY(-1px)}
.preview-label{font-size:.8rem;color:#8b8b8b;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
.preview-content{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-height:0;flex:1 1 auto;overflow:hidden}
.preview-thumb{width:100%;max-height:150px;position:relative;background:#080808;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.preview-thumb img{width:100%;height:auto;max-width:100%;max-height:150px;object-fit:contain;display:block}
.preview-icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:8px 12px;background:#141414;border-radius:10px;color:#ddd;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.preview-title{margin-top:8px;font-size:.85rem;line-height:1.2;text-align:center;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.open-display-row{margin-top:12px}
.live-source-row{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.live-source-row .file-type-list{flex-basis:100%}
h3{margin:0 0 12px;font-size:1rem}
h4{margin:0 0 8px}
/* ===== URL INPUT ROW ===== */
.url-input-section{margin-top:10px}
.url-input-row{display:flex;gap:8px;align-items:center}
.url-input-row input[type=text]{flex:1 1 auto;margin:0;padding:10px 12px;font-size:.9rem;background:#202020;border:1px solid #4a4a4a;border-radius:10px;color:#eee}
.url-input-row input[type=text]:focus{outline:none;border-color:#7055e5}
.url-input-row .action-button{flex:0 0 auto;white-space:nowrap;padding:10px 16px}

/* ===== YOUTUBE PLAYER CARD =====
   Off-screen by default (position:fixed; left:-9999px) so the YouTube iframe
   always initializes and stays functional. Switching to display:none breaks
   the iframe and disables embed controls.
*/
.yt-player-card{position:fixed;left:-9999px;top:0;width:380px;height:240px;padding:10px 12px;background:#0f0f0f;border:1px solid #333;border-radius:14px;z-index:-1}
.yt-player-card.stream-player-visible{position:relative;left:auto;top:auto;width:auto;height:auto;border-left:none;border-right:none;border-bottom:none;border-radius:0;border-top:1px solid #333;flex-shrink:0;z-index:auto}
.yt-player-label{font-size:.78rem;color:#ccc;margin-bottom:8px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.yt-player-card iframe{display:block;border-radius:8px}

/* ===== SPOTIFY PLAYER CARD ===== */
.spotify-player-card{position:fixed;left:-9999px;top:0;width:380px;height:280px;padding:10px 12px;background:#0a1a0e;border:1px solid #1db954;border-radius:14px;z-index:-1}
.spotify-player-card.stream-player-visible{position:relative;left:auto;top:auto;width:auto;height:auto;border-left:none;border-right:none;border-bottom:none;border-radius:0;border-top:1px solid #1db954;flex-shrink:0;z-index:auto}
.spotify-player-label{font-size:.78rem;color:#1db954;margin-bottom:6px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.spotify-warning{display:block;color:#888;font-weight:400;text-transform:none;letter-spacing:0;font-size:.72rem;margin-top:3px}

/* ===== SOURCE BADGES ===== */
.source-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle}
.badge-youtube{background:#c00;color:#fff}
.badge-spotify{background:#1db954;color:#000}
.badge-gdrive{background:#1a73e8;color:#fff}
.badge-live{background:#d33;color:#fff}

/* ===== STREAM ITEM WARNING ===== */
li.stream-item{border-left:3px solid #a33;background:rgba(180,40,40,.08)}
li.stream-item.active{border-left-color:#c44}
.stream-warning{display:block;font-size:.7rem;color:#e87;margin-top:3px;font-weight:400}

/* ===== API LIMITATION CONTROL STATES =====
   .control-unavailable — feature is completely broken for the current source;
                          button/input is disabled and coloured amber/orange.
   .control-limited-warn — feature works at ECP-queue level but cannot reach
                           inside the stream's own playlist; still clickable,
                           coloured a softer amber so the operator is informed.
*/
.control-unavailable,
button.control-unavailable,
select.control-unavailable{
  border-color:#7a4400 !important;
  background:#1c0d00 !important;
  color:#c87b30 !important;
  cursor:not-allowed !important;
  opacity:.8
}
input[type=range].control-unavailable{accent-color:#b86000;cursor:not-allowed}
input[type=checkbox].control-unavailable{accent-color:#b86000;cursor:not-allowed}
/* Style the wrapper label too */
label.control-unavailable-label{color:#c87b30 !important;cursor:not-allowed !important}
label.control-unavailable-label input[type=range],
label.control-unavailable-label input[type=checkbox]{cursor:not-allowed}

/* Limited: functional but restricted */
.control-limited-warn,
button.control-limited-warn,
select.control-limited-warn{
  border-color:#5a3800 !important;
  color:#b07020 !important
}
label.control-limited-warn-label{color:#b07020 !important}

/* ===== ANNOUNCE PAGE ===== */
.announce-left{display:flex;flex-direction:column;gap:12px;flex:1 1 0;min-width:340px;overflow-y:auto}
.announce-right{flex:1 1 0;min-width:280px;display:flex;flex-direction:column}
.announce-right .soundboard-section{flex:1 1 auto}
.announce-top-row{display:flex;gap:12px;flex:0 0 auto}
.announce-intercom-panel{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.announce-clock-panel{flex:0 0 240px;align-items:center;justify-content:flex-start}
.announce-soundboard{flex:1 1 auto}

/* Typed announcement controls */
.announce-appearance-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-top:12px}
.announce-color-label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:#ccc}
.announce-color-label input[type=color]{width:52px;height:34px;padding:2px 3px;border-radius:8px;border:1px solid #555;background:#202020;cursor:pointer}
.announce-opacity-label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:#ccc;flex:1 1 120px;min-width:100px}
.announce-slider-row{display:flex;align-items:center;gap:8px}
.announce-slider-row input[type=range]{flex:1 1 0;margin:0}
.announce-slider-row span{font-size:.8rem;font-family:'Space Mono',monospace;color:#aaa;min-width:36px;text-align:right}
.announce-linger-label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:#ccc}
.announce-linger-input{width:72px!important;margin:0!important;padding:6px 8px!important;text-align:center;font-family:'Space Mono',monospace}

@media (max-width:900px){
  .cp-top-row,.cp-bottom-row{flex-direction:column}
  .cp-logo-banners,.cp-stopwatch,.cp-blank{flex:none}
  .page--noscroll{overflow:auto}
  #audioPage,.page{flex-direction:column}
  #audioPage .panel,#visualsPage .panel{flex:none}
  .announce-left,.announce-right{flex:none}
  .announce-top-row{flex-direction:column}
  .announce-clock-panel{flex:none}
}

/* ===== ICONS MODE (action buttons) ===== */
body.icons-mode button.action-button{font-size:0;min-width:2.4rem;padding:10px}
body.icons-mode button.action-button::before{content:'';display:block;width:1rem;height:1rem;margin:0 auto;background:#ddd;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;mask-repeat:no-repeat;mask-position:center;mask-size:contain}
body.light-mode.icons-mode button.action-button::before{background:#222}
body.icons-mode button.action-button.active-play::before,
body.icons-mode button.action-button.active-pause::before,
body.icons-mode button.action-button.active-announcement::before{background:#fff}
/* High contrast + icons: invert icon color to match inverted button background */
body.high-contrast.icons-mode button.action-button::before{background:#111}
body.high-contrast.icons-mode button.action-button.active-play::before,
body.high-contrast.icons-mode button.action-button.active-pause::before,
body.high-contrast.icons-mode button.action-button.active-announcement::before{background:#fff}
body.light-mode.high-contrast.icons-mode button.action-button::before{background:#eee}
body.light-mode.high-contrast.icons-mode button.action-button.active-play::before,
body.light-mode.high-contrast.icons-mode button.action-button.active-pause::before,
body.light-mode.high-contrast.icons-mode button.action-button.active-announcement::before{background:#fff}

/* Play / Autoplay */
body.icons-mode #musicPlay::before,body.icons-mode #mediaPlay::before,body.icons-mode #cpMusicPlay::before{-webkit-mask-image:url(icons/play.svg);mask-image:url(icons/play.svg)}
/* Pause */
body.icons-mode #musicPause::before,body.icons-mode #mediaPause::before,body.icons-mode #cpMusicPause::before{-webkit-mask-image:url(icons/pause.svg);mask-image:url(icons/pause.svg)}
/* Previous */
body.icons-mode #musicPrev::before,body.icons-mode #mediaPrev::before,body.icons-mode #cpMusicPrev::before,body.icons-mode #cpMediaPrev::before{-webkit-mask-image:url(icons/backward-step.svg);mask-image:url(icons/backward-step.svg)}
/* Next */
body.icons-mode #musicNext::before,body.icons-mode #mediaNext::before,body.icons-mode #cpMusicNext::before,body.icons-mode #cpMediaNext::before{-webkit-mask-image:url(icons/forward-step.svg);mask-image:url(icons/forward-step.svg)}
/* Shuffle */
body.icons-mode #musicShuffle::before{-webkit-mask-image:url(icons/shuffle.svg);mask-image:url(icons/shuffle.svg)}
/* Add URL */
body.icons-mode #musicUrlAdd::before,body.icons-mode #mediaUrlAdd::before{-webkit-mask-image:url(icons/plus.svg);mask-image:url(icons/plus.svg)}
/* Intercom — microphone idle, stop when active */
body.icons-mode #intercomToggle::before,body.icons-mode #anIntercomToggle::before{-webkit-mask-image:url(icons/microphone.svg);mask-image:url(icons/microphone.svg)}
body.icons-mode #intercomToggle.active-announcement::before,body.icons-mode #anIntercomToggle.active-announcement::before{-webkit-mask-image:url(icons/stop.svg);mask-image:url(icons/stop.svg)}
/* Stopwatch / Timer start — play idle, pause when running */
body.icons-mode #btnStopwatchStart::before,body.icons-mode #anBtnStopwatchStart::before,body.icons-mode #btnTimerStart::before,body.icons-mode #anBtnTimerStart::before{-webkit-mask-image:url(icons/play.svg);mask-image:url(icons/play.svg)}
body.icons-mode #btnStopwatchStart.btn-running::before,body.icons-mode #anBtnStopwatchStart.btn-running::before,body.icons-mode #btnTimerStart.btn-running::before,body.icons-mode #anBtnTimerStart.btn-running::before{-webkit-mask-image:url(icons/pause.svg);mask-image:url(icons/pause.svg)}
/* Lap */
body.icons-mode #btnStopwatchLap::before,body.icons-mode #anBtnStopwatchLap::before{-webkit-mask-image:url(icons/flag.svg);mask-image:url(icons/flag.svg)}
/* Reset */
body.icons-mode #btnStopwatchReset::before,body.icons-mode #anBtnStopwatchReset::before,body.icons-mode #btnTimerReset::before,body.icons-mode #anBtnTimerReset::before{-webkit-mask-image:url(icons/rotate-left.svg);mask-image:url(icons/rotate-left.svg)}
/* Session */
body.icons-mode #ecpExport::before{-webkit-mask-image:url(icons/floppy-disk.svg);mask-image:url(icons/floppy-disk.svg)}
body.icons-mode #ecpExportAll::before{-webkit-mask-image:url(icons/file-export.svg);mask-image:url(icons/file-export.svg)}
/* Slides */
body.icons-mode #openDisplay::before{-webkit-mask-image:url(icons/display.svg);mask-image:url(icons/display.svg)}
/* Typed announcement */
body.icons-mode #showAnnouncementBtn::before{-webkit-mask-image:url(icons/tv.svg);mask-image:url(icons/tv.svg)}
body.icons-mode #clearAnnouncementBtn::before{-webkit-mask-image:url(icons/xmark.svg);mask-image:url(icons/xmark.svg)}

/* ===== SETTINGS PAGE ===== */
#settingsPage{justify-content:center;align-items:flex-start}
.settings-content{max-width:640px;width:100%;display:flex;flex-direction:column;gap:16px}
.settings-section{display:flex;flex-direction:column}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid #2a2a2a}
.settings-row:last-child{border-bottom:none;padding-bottom:0}
.settings-label{flex:1 1 0}
.settings-label h4{margin:0 0 4px;font-size:.95rem;font-weight:700}
.settings-label p{margin:0;font-size:.8rem;color:#777;line-height:1.4}
.settings-toggle{position:relative;display:inline-block;width:50px;height:28px;flex-shrink:0}
.settings-toggle input{opacity:0;width:0;height:0;margin:0}
.toggle-track{position:absolute;inset:0;background:#444;border-radius:28px;cursor:pointer;transition:background .2s}
.toggle-track::before{content:'';position:absolute;height:22px;width:22px;left:3px;bottom:3px;background:#888;border-radius:50%;transition:transform .2s,background .2s}
.settings-toggle input:checked+.toggle-track{background:#7055e5}
.settings-toggle input:checked+.toggle-track::before{transform:translateX(22px);background:#fff}
.github-banner{display:flex;align-items:center;gap:16px;padding:18px 22px;background:#161616;border:1px solid #292929;border-radius:16px;text-decoration:none;color:#eee;transition:background .2s,border-color .2s,transform .15s}
.github-banner:hover{background:#1e1e22;border-color:#555;transform:translateY(-2px)}
.github-banner-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.github-banner-title{font-weight:700;font-size:1rem;letter-spacing:.04em}
.github-banner-url{font-size:.78rem;color:#7055e5;font-family:'Space Mono',monospace}
.github-banner-arrow{margin-left:auto;font-size:1.2rem;opacity:.45;flex-shrink:0}

/* ===== LIGHT MODE ===== */
body.light-mode{background:#f0f2f5;color:#111;--panel-bg:#ffffff}
body.light-mode .page-nav{background:#e4e6ea;border-top-color:#c8c8cc}
body.light-mode .page-tab{background:#e4e6ea;color:#555}
body.light-mode .page-tab:hover{background:#d4d6da;color:#111;border-top-color:#b0b0b8}
body.light-mode .page-tab--active{background:#d4d6da;color:#111;border-top-color:#7055e5}
body.light-mode .panel{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.09)}
body.light-mode button{background:#e0e0e4;color:#111;border-color:#b8b8be}
body.light-mode button:hover{background:#d0d0d5;border-color:#888}
body.light-mode button.action-button.inactive{background:#eaeaee;color:#888;border-color:#c8c8cc}
body.light-mode .soundboard-button{background:#e0e0e4;border-color:#b8b8be;color:#111}
body.light-mode .soundboard-button:hover{background:#d0d0d5;border-color:#888}
body.light-mode input[type=file],body.light-mode input[type=number],body.light-mode select{background:#ededf0;border-color:#c4c4c8;color:#111}
body.light-mode .url-input-row input[type=text]{background:#ededf0;border-color:#c4c4c8;color:#111}
body.light-mode textarea{background:#f5f5f8;border-color:#d0d0d4;color:#111}
body.light-mode .ecp-card,body.light-mode .notes-card,body.light-mode .notes-card-inline{background:#f5f5f8;border-color:#ddd}
body.light-mode .notes-card-inline h4{color:#444}
body.light-mode .media-notes-card,body.light-mode .media-mirror{background:#f5f5f8;border-color:#ddd}
body.light-mode .media-notes-card label,body.light-mode .media-mirror h4{color:#444}
body.light-mode .mirror-content,body.light-mode .cp-mirror-mini{background:#dde0e6}
body.light-mode .cp-mirror-content-mini{color:#888}
body.light-mode .ecp-card .note,body.light-mode .file-type-list,body.light-mode .cp-progression,body.light-mode #status{color:#666}
body.light-mode .file-label{color:#444}
body.light-mode li:hover{background:rgba(0,0,0,.04);border-color:#c8c8cc}
body.light-mode li.active{background:#ede0ff;border-color:#7055e5;box-shadow:inset 0 0 0 1px rgba(112,85,229,.25)}
body.light-mode li .progress-underlay{background:rgba(0,0,0,.06)}
body.light-mode li .item-info span{color:#333}
body.light-mode li .item-actions button,body.light-mode li .item-settings button{background:#eaeaee;border-color:#c0c0c6;color:#111}
body.light-mode li .item-actions button:hover,body.light-mode li .item-settings button:hover{background:#d8d8dd;border-color:#888}
body.light-mode li .skip-toggle{color:#444}
body.light-mode li.skipped .item-info span{color:#999}
body.light-mode .mode-button span{background:#e0e0e4;border-color:#b8b8be;color:#111}
body.light-mode .mode-button:hover span{background:#d0d0d5;border-color:#888}
body.light-mode .cp-clock{background:#ededf0;border-color:#d0d0d4}
body.light-mode .clock-mode-tabs{background:#e0e0e4;border-color:#d0d0d4}
body.light-mode .clock-mode-tab{color:#666}
body.light-mode .clock-mode-tab:hover{background:#d4d4d8;color:#111}
body.light-mode .clock-mode-tab.active{background:#7055e5;color:#fff;animation:tab-select-in .18s ease-out}
body.light-mode .lap-item{background:#ededf0;border-color:#d0d0d4;color:#444}
body.light-mode .timer-settings span{color:#666}
body.light-mode .media-preview{background:#ededf0;border-color:#c8c8cc;color:#111}
body.light-mode .preview-label{color:#777}
body.light-mode .preview-icon{background:#d8d8dc;color:#333}
body.light-mode .preview-thumb{background:#dde0e6}
body.light-mode .yt-player-card{background:#f5f5f8;border-color:#d0d0d4}
body.light-mode .yt-player-label{color:#444}
body.light-mode .spotify-warning{color:#555}
/* Logo/byline panel always stays dark — never themed */
body.light-mode #logoBannersPanel{background:#161616;box-shadow:0 0 0 1px rgba(255,255,255,.05)}
body.light-mode .app-banner-button{background:#111 !important;border-color:#2f2f2f !important;color:#eee !important}
body.light-mode .app-banner-button:hover{background:#1f1f1f !important;border-color:#444 !important}
body.light-mode .by-magmalabs-banner{background:#111 !important;border-color:#2f2f2f !important}
body.light-mode .by-magmalabs-banner:hover{background:#1f1f1f !important;border-color:#444 !important}
body.light-mode .kofi-button:hover{background:#1f1f1f !important;border-color:#444 !important}
body.light-mode .brand-banner{background:#f5f5f8;border-color:#d0d0d4;color:#111}
body.light-mode .brand-banner:hover{background:#e8e8ec;border-color:#b0b0b8}
body.light-mode .announce-color-label,body.light-mode .announce-opacity-label,body.light-mode .announce-linger-label{color:#444}
body.light-mode .announce-color-label input[type=color]{border-color:#c0c0c4;background:#ededf0}
body.light-mode .announce-slider-row span{color:#666}
body.light-mode .stream-warning{color:#c55}
body.light-mode .github-banner{background:#f5f5f8;border-color:#ddd;color:#111}
body.light-mode .github-banner:hover{background:#e8e8ec;border-color:#b0b0b8}
body.light-mode .settings-row{border-bottom-color:#e0e0e4}
body.light-mode .settings-label p{color:#888}
body.light-mode .toggle-track{background:#c8c8cc}
body.light-mode .toggle-track::before{background:#fff}

/* ===== HIGH CONTRAST ===== */
/* Dark bg + HC → buttons become light (logo banner exempted) */
body.high-contrast button:not([class*="active-"]):not(.control-unavailable):not(.app-banner-button){background:#d8d8dc;color:#111;border-color:#888}
body.high-contrast button:not([class*="active-"]):not(.control-unavailable):not(.app-banner-button):hover{background:#e8e8ec;border-color:#555}
body.high-contrast .soundboard-button{background:#d8d8dc;color:#111;border-color:#888}
body.high-contrast .soundboard-button:hover{background:#e8e8ec}
body.high-contrast .mode-button span{background:#d8d8dc;color:#111;border-color:#888}
body.high-contrast .mode-button:hover span{background:#e8e8ec}
body.high-contrast .clock-mode-tab.active{background:#7055e5 !important;color:#fff !important;border-color:#9070ff !important}
body.high-contrast li .item-actions button,body.high-contrast li .item-settings button{background:#d8d8dc;color:#111;border-color:#888}
body.high-contrast li .item-actions button:hover,body.high-contrast li .item-settings button:hover{background:#e8e8ec}
body.high-contrast button.action-button.inactive{background:#888;color:#111;border-color:#aaa}
/* Light bg + HC → buttons become dark (logo banner exempted) */
body.light-mode.high-contrast button:not([class*="active-"]):not(.control-unavailable):not(.app-banner-button){background:#1e1e22;color:#eee;border-color:#777}
body.light-mode.high-contrast button:not([class*="active-"]):not(.control-unavailable):not(.app-banner-button):hover{background:#2e2e34;border-color:#aaa}
body.light-mode.high-contrast .soundboard-button{background:#1e1e22;color:#eee;border-color:#777}
body.light-mode.high-contrast .soundboard-button:hover{background:#2e2e34}
body.light-mode.high-contrast .mode-button span{background:#1e1e22;color:#eee;border-color:#777}
body.light-mode.high-contrast .mode-button:hover span{background:#2e2e34}
body.light-mode.high-contrast .clock-mode-tab.active{background:#7055e5 !important;color:#fff !important;border-color:#9070ff !important}
body.light-mode.high-contrast li .item-actions button,body.light-mode.high-contrast li .item-settings button{background:#1e1e22;color:#eee;border-color:#777}
body.light-mode.high-contrast li .item-actions button:hover,body.light-mode.high-contrast li .item-settings button:hover{background:#2e2e34}
body.light-mode.high-contrast button.action-button.inactive{background:#666;color:#eee;border-color:#555}

/* ===== REALISTIC BUTTON MODE ===== */
/* Base — static dark aviation-panel color, always, regardless of theme */
body.realistic-mode button.action-button{
  position:relative;
  padding:26px 12px 9px !important;
  min-height:56px;
  background:#25272b !important;
  border:1px solid #15171a !important;
  color:#bdbdbd !important;
  border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 3px 8px rgba(0,0,0,.55);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:background .15s,border-color .15s,color .15s
}
body.realistic-mode button.action-button:hover{
  background:#2d2f34 !important;
  border-color:#1c1e22 !important;
  color:#e0e0e0 !important;
  transform:none
}
/* Active states keep same dark body — LED bars handle state indication */
body.realistic-mode button.action-button.active-play,
body.realistic-mode button.action-button.active-pause,
body.realistic-mode button.action-button.active-announcement,
body.realistic-mode button.action-button.active-toggle{
  background:#25272b !important;
  border-color:#15171a !important;
  color:#bdbdbd !important
}
/* Inactive: dimmer text only */
body.realistic-mode button.action-button.inactive{
  background:#25272b !important;
  border-color:#15171a !important;
  color:#666 !important
}

/* LED bar indicator (::after — doesn't conflict with icons-mode ::before) */
body.realistic-mode button.action-button::after{
  content:'';
  position:absolute;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  width:58%;
  height:12px;
  border-radius:3px;
  pointer-events:none;
  /* Two unlit bars — dark green */
  background:linear-gradient(
    #0c190d 0,#0c190d 41%,
    transparent 41%,transparent 59%,
    #0c190d 59%,#0c190d 100%
  );
  border:1px solid #080f09
}
/* Green — playing / active / running */
body.realistic-mode button.action-button.active-play::after,
body.realistic-mode button.action-button.active-announcement::after,
body.realistic-mode button.action-button.btn-running::after{
  background:linear-gradient(
    #1ecc4a 0,#1ecc4a 41%,
    transparent 41%,transparent 59%,
    #1ecc4a 59%,#1ecc4a 100%
  );
  border-color:#15a83a;
  box-shadow:0 0 7px #1ecc4a,0 0 18px rgba(30,204,74,.4)
}
/* Amber — paused */
body.realistic-mode button.action-button.active-pause::after{
  background:linear-gradient(
    #cc8800 0,#cc8800 41%,
    transparent 41%,transparent 59%,
    #cc8800 59%,#cc8800 100%
  );
  border-color:#a87000;
  box-shadow:0 0 7px #cc8800,0 0 18px rgba(204,136,0,.4)
}
/* Icons + realistic: icon sits below LED bars naturally via padding-top */
body.realistic-mode.icons-mode button.action-button{
  padding:26px 10px 9px !important
}

/* ===== SOUNDBOARD ITEM (star + delete) ===== */
.soundboard-item{display:flex;gap:4px;align-items:stretch}
.soundboard-item .soundboard-button{flex:1 1 auto;min-width:0}
.sb-actions{display:flex;flex-direction:column;gap:3px;justify-content:center;flex-shrink:0}
.sb-star-btn,.sb-delete-btn{width:22px;height:22px;padding:0;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#666;cursor:pointer;font-size:.8rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.sb-star-btn:hover{background:rgba(255,200,0,.18);color:#ffd700;border-color:rgba(255,215,0,.5)}
.sb-delete-btn:hover{background:rgba(180,40,40,.3);color:#ff8080;border-color:#c44}
.sb-star-btn.starred{color:#ffd700;border-color:rgba(255,215,0,.35);background:rgba(255,200,0,.1)}

/* CP starred sounds */
.cp-starred-section{margin-top:8px;padding-top:8px;border-top:1px solid #2a2a2a;flex-shrink:0}
.cp-starred-section h4{margin:0 0 6px;font-size:.75rem;color:#777;text-transform:uppercase;letter-spacing:.05em}
.cp-starred-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:5px;max-height:110px;overflow-y:auto}
.cp-starred-grid .soundboard-button{padding:6px 8px;font-size:.72rem;border-radius:8px;width:100%}

/* Queue next button in media list */
.queue-next-btn{padding:4px 8px;font-size:.75rem;border-radius:8px;border:1px solid #555;background:#2e2e2e;color:#aaa;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.queue-next-btn:hover{background:#3a3a3a;border-color:#888;color:#eee}
.queue-next-btn.queued{background:#7055e5 !important;border-color:#9070ff !important;color:#fff !important}
.queue-next-btn.queued:hover{background:#5a40d0 !important;border-color:#7055e5 !important}

/* ===== LIGHT MODE additions ===== */
body.light-mode .sb-star-btn,body.light-mode .sb-delete-btn{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.14);color:#999}
body.light-mode .sb-star-btn.starred{color:#b8860b;border-color:rgba(184,134,11,.35);background:rgba(184,134,11,.08)}
body.light-mode .sb-star-btn:hover{background:rgba(184,134,11,.15);color:#b8860b;border-color:#b8860b}
body.light-mode .sb-delete-btn:hover{background:rgba(180,40,40,.12);color:#c33;border-color:#d55}
body.light-mode .cp-starred-section{border-top-color:#e0e0e4}
body.light-mode .cp-starred-section h4{color:#aaa}
body.light-mode .queue-next-btn{background:#ededf0;border-color:#c4c4c8;color:#666}
body.light-mode .queue-next-btn:hover{background:#d8d8dc;border-color:#888;color:#111}
body.light-mode .queue-next-btn.queued{background:#7055e5;border-color:#9070ff;color:#fff}

/* ===== MIRROR UNSYNC WARNING ===== */
.mirror-unsync-warning{display:flex;align-items:center;gap:8px;background:rgba(200,40,40,.12);border:1px solid rgba(200,60,60,.4);border-radius:8px;padding:8px 12px;font-size:.8rem;color:#e88;margin-bottom:10px}
.media-mirror.mirror-unsync{border-color:#c44;box-shadow:0 0 0 2px rgba(200,60,60,.25)}
.media-mirror.mirror-unsync h4{color:#e88}
body.light-mode .mirror-unsync-warning{background:rgba(180,40,40,.08);border-color:rgba(180,40,40,.3);color:#b33}
body.light-mode .media-mirror.mirror-unsync{border-color:#c44;box-shadow:0 0 0 2px rgba(200,60,60,.2)}
/* When the display is blacked out (Hide), overlay the mirror to match — so the operator
   sees the audience's black screen instead of the still-running media underneath. */
.mirror-content.display-hidden,.cp-mirror-content-mini.display-hidden{position:relative}
.mirror-content.display-hidden::after,.cp-mirror-content-mini.display-hidden::after{
  content:'Display hidden';position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:#000;color:#888;font-weight:600;letter-spacing:.03em}
.cp-mirror-content-mini.display-hidden::after{font-size:.7rem}

/* ===== FA ICON UTILITY ===== */
/* Inline SVG icon via CSS mask — color follows currentColor of parent button */
.fa-icon{display:inline-block;width:.85em;height:.85em;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;vertical-align:-.1em;pointer-events:none;flex-shrink:0}
/* Icon-only compact buttons (up/down/delete in list, breakpoint, soundboard actions) */
/* inline-flex centering keeps the mask icon (and any label) truly centered — a
   plain block button lets vertical-align nudge the icon off-center vertically. */
li .item-actions button:has(.fa-icon),li .item-settings button:has(.fa-icon){padding:5px 8px;min-width:28px;display:inline-flex;align-items:center;justify-content:center;gap:4px}

/* ===== BREAKPOINTS ===== */
li.has-breakpoint{border-left:3px solid #d44 !important;padding-left:17px;background:rgba(200,50,50,.05)}
.breakpoint-btn{padding:3px 7px;font-size:.78rem;border-radius:8px;border:1px solid #444;background:#2a2a2a;color:#777;cursor:pointer;transition:all .15s;line-height:1.4}
.breakpoint-btn:hover{border-color:#888;color:#ccc;background:#333}
.breakpoint-btn.bp-active{color:#fff !important;border-color:#c33 !important;background:#c44 !important}
.breakpoint-btn.bp-active:hover{background:#d55 !important;border-color:#e55 !important}
body.light-mode li.has-breakpoint{border-left-color:#c33 !important}
body.light-mode .breakpoint-btn{background:#ededf0;border-color:#c4c4c8;color:#888}
body.light-mode .breakpoint-btn:hover{background:#d8d8dc;border-color:#888;color:#333}
body.light-mode .breakpoint-btn.bp-active{color:#fff !important;border-color:#b33 !important;background:#c44 !important}
body.light-mode .breakpoint-btn.bp-active:hover{background:#d55 !important}

/* ===== VISUALS SOURCE BADGES ===== */
.badge-gslides{background:#4285f4;color:#fff}
.badge-web{background:#2a5cb8;color:#fff}
/* Red severity warning */
.stream-warning-red{display:block;font-size:.7rem;color:#f55;margin-top:3px;font-weight:400}
body.light-mode .stream-warning-red{color:#c33}

/* ===== SPOTIFY LOGIN WARNING ===== */
.stream-warning-amber{color:#c8880a}
.spotify-login-link{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:5px;background:rgba(29,185,84,.15);color:#1db954;border:1px solid rgba(29,185,84,.35);font-size:.7rem;text-decoration:none;font-weight:700;transition:background .15s,border-color .15s;white-space:nowrap}
.spotify-login-link:hover{background:rgba(29,185,84,.28);border-color:rgba(29,185,84,.6)}
body.light-mode .stream-warning-amber{color:#9a6500}
body.light-mode .spotify-login-link{background:rgba(29,185,84,.1);border-color:rgba(29,185,84,.3)}

/* ===== SPOTIFY CONNECT PANEL ===== */
.spotify-full-panel{flex:1 1 100% !important;display:flex;flex-direction:column}
.spotify-setup-step{background:#121212;border:1px solid #2a2a2a;border-radius:10px;padding:12px 14px;margin-bottom:10px;font-size:.88rem;line-height:1.5;color:#bbb}
.spotify-setup-step a{color:#7055e5}
.spotify-uri-display{display:block;margin-top:8px;padding:7px 10px;background:#0c0c0c;border:1px solid #333;border-radius:7px;font-family:'Space Mono',monospace;font-size:.78rem;color:#aaa;word-break:break-all;user-select:all}
.spotify-connect-row{display:flex;gap:8px;margin-top:10px}
.spotify-player-layout{display:grid;grid-template-columns:300px 1fr;gap:16px;margin-top:4px}
.spotify-left-col,.spotify-right-col{display:flex;flex-direction:column;gap:10px}
.spotify-now-playing{display:flex;gap:14px;align-items:center;padding:14px;background:#0d0d0d;border:1px solid #222;border-radius:12px}
.spotify-album-art{width:68px;height:68px;border-radius:8px;background:#1a1a1a;flex-shrink:0;background-size:cover;background-position:center}
.spotify-track-name{font-weight:700;font-size:.95rem;line-height:1.3;word-break:break-word}
.spotify-artist-name{color:#999;font-size:.82rem;margin-top:3px}
.spotify-album-name{color:#666;font-size:.75rem;margin-top:2px}
.spotify-controls{display:flex;gap:8px}
.spotify-controls button{flex:1}
.spotify-device-row{display:flex;align-items:center;gap:10px;padding-top:4px;border-top:1px solid #1e1e1e;margin-top:4px}
.spotify-device-status{font-size:.8rem;color:#777;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spotify-search-results{display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:340px}
.spotify-result-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#141414;border:1px solid #242424;transition:background .15s,border-color .15s}
.spotify-result-item:hover{background:#1e1e1e;border-color:#3a3a3a}
.spotify-result-art{width:40px;height:40px;border-radius:6px;background:#222;flex-shrink:0;background-size:cover;background-position:center}
.spotify-result-info{flex:1 1 auto;min-width:0}
.spotify-result-name{font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spotify-result-artist{color:#888;font-size:.75rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spotify-result-play{flex-shrink:0;padding:6px 10px;font-size:.8rem}
/* Light mode for Spotify panel */
body.light-mode .spotify-setup-step{background:#f5f5f8;border-color:#ddd;color:#444}
body.light-mode .spotify-uri-display{background:#ededf0;border-color:#d0d0d4;color:#555}
body.light-mode .spotify-now-playing{background:#f0f0f4;border-color:#ddd}
body.light-mode .spotify-album-art{background:#ddd}
body.light-mode .spotify-track-name{color:#111}
body.light-mode .spotify-device-row{border-top-color:#e0e0e4}
body.light-mode .spotify-device-status{color:#888}
body.light-mode .spotify-result-item{background:#f5f5f8;border-color:#ddd}
body.light-mode .spotify-result-item:hover{background:#eaeaee;border-color:#c0c0c4}
body.light-mode .spotify-result-art{background:#ddd}
body.light-mode .spotify-result-name{color:#111}
body.light-mode .spotify-result-artist{color:#666}
@media (max-width:900px){.spotify-player-layout{grid-template-columns:1fr}}
body.light-mode .queue-next-btn.queued{background:#7055e5;border-color:#9070ff;color:#fff}
/* ===== CLICK FEEDBACK & SELECTION ANIMATIONS ===== */

/* All buttons: immediate press feel */
button:not(:disabled):active{transform:scale(0.96);filter:brightness(0.78);transition:transform .05s,filter .05s}
button{transition:background .2s,border-color .2s,color .2s,transform .1s,filter .1s}

/* Brief brightness flash after click (JS adds .btn-clicked) */
@keyframes btn-click-flash{
  0%{filter:brightness(1.65)}
  100%{filter:brightness(1)}
}
button.btn-clicked{animation:btn-click-flash .22s ease-out forwards}

/* Queue item — flash when newly selected */
@keyframes item-select-flash{
  0%{filter:brightness(1.8)}
  100%{filter:brightness(1)}
}
li.item-just-selected{animation:item-select-flash .3s ease-out forwards}

/* Breakpoint — flash when toggled on */
@keyframes bp-set-flash{
  0%{box-shadow:0 0 0 3px rgba(220,60,60,.55),inset 0 0 12px rgba(220,60,60,.2)}
  100%{box-shadow:none}
}
li.bp-just-set{animation:bp-set-flash .5s ease-out forwards}

/* Clock/Stopwatch/Timer tab — flash when selected */
@keyframes tab-select-in{
  0%{filter:brightness(1.55)}
  100%{filter:brightness(1)}
}

/* ===== PERSISTENT COLORED STATES (stay colored until deselected) ===== */
/* Start button — green while stopwatch/timer is running */
body:not(.realistic-mode) button.action-button.btn-running{background:#2a8 !important;color:#011 !important;border-color:#2f9 !important}
body:not(.realistic-mode) button.action-button.btn-running:hover{background:#3b9 !important;border-color:#4fc !important;color:#011 !important}
/* Icon color on green btn-running button */
body.icons-mode button.action-button.btn-running::before{background:#011 !important}
body.high-contrast.icons-mode button.action-button.btn-running::before{background:#011 !important}
body.light-mode.high-contrast.icons-mode button.action-button.btn-running::before{background:#011 !important}

/* ===== FREEZE / HIDE DISPLAY BUTTONS ===== */
button.action-button.active-freeze{background:#c47800;color:#fff;border-color:#e89a00}
button.action-button.active-freeze:hover{background:#d98a00;border-color:#ffb300;color:#fff}
button.action-button.active-hide{background:#111;color:#888;border-color:#333}
button.action-button.active-hide:hover{background:#1a1a1a;border-color:#555;color:#bbb}
body.icons-mode button.action-button.active-freeze::before{background:#fff}
body.icons-mode button.action-button.active-hide::before{background:#666}
/* Icons mode mask-image for freeze/hide buttons */
body.icons-mode #freezeDisplay::before,body.icons-mode #cpFreezeDisplay::before{-webkit-mask-image:url(icons/lock.svg);mask-image:url(icons/lock.svg)}
body.icons-mode #hideDisplay::before,body.icons-mode #cpHideDisplay::before{-webkit-mask-image:url(icons/eye-slash.svg);mask-image:url(icons/eye-slash.svg)}

/* ===== SOUNDBOARD VOLUME — slider + number input ===== */
.sb-vol-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:nowrap}
.sb-vol-label{font-size:.85rem;white-space:nowrap;flex-shrink:0}
.sb-vol-slider-wrap{flex:1 1 80px;min-width:60px;position:relative;padding-bottom:15px}
.sb-vol-slider-wrap input[type=range]{width:100%;margin:0}
.sb-vol-slider-wrap::after{content:'100%';position:absolute;left:50%;bottom:1px;transform:translateX(-50%);font-size:.6rem;color:#484848;font-family:'Space Mono',monospace;pointer-events:none;white-space:nowrap}
.sb-vol-input{width:56px!important;margin:0!important;padding:4px 6px!important;text-align:center;font-family:'Space Mono',monospace;font-size:.8rem;flex-shrink:0}
.sb-vol-pct{font-size:.8rem;color:#888;flex-shrink:0}
body.light-mode .sb-vol-slider-wrap::after{color:#bbb}

/* ===== SOUNDBOARD BUTTON — filename + dB label + playing state ===== */
.soundboard-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.sb-filename{width:100%;text-align:center;overflow-wrap:break-word;word-break:break-word;hyphens:manual;line-height:1.3}
.sb-norm-label{font-size:.62rem;opacity:.45;font-family:'Space Mono',monospace;text-align:center;letter-spacing:.02em;min-height:.85em}
/* Playing state */
@keyframes sb-play-pulse{0%,100%{opacity:1}50%{opacity:.75}}
.soundboard-item.sb-playing .soundboard-button,
button.sb-cp-btn.sb-playing{
  background:#2a8 !important;
  border-color:#2f9 !important;
  color:#011 !important;
  animation:sb-play-pulse 1.1s ease-in-out infinite
}
body.light-mode .soundboard-item.sb-playing .soundboard-button,
body.light-mode button.sb-cp-btn.sb-playing{background:#2a8 !important;border-color:#2f9 !important;color:#011 !important}
.sb-norm-label.sb-norm-pos{color:#2d9;opacity:.85}
.sb-norm-label.sb-norm-neg{color:#e55;opacity:.85}

/* ===== COMPLEXITY MODE (Basic / Advanced) ===== */
/* Basic mode: hide all advanced-marked controls.
   Per-item skip/queue/breakpoint are gated only in the MUSIC queue — the slides
   queue keeps them in the bar at all times (the gear panel holds the rest). */
body:not(.advanced-mode) .adv                          { display: none !important; }
body:not(.advanced-mode) #musicQueue .breakpoint-btn   { display: none !important; }
body:not(.advanced-mode) #musicQueue .queue-next-btn   { display: none !important; }
body:not(.advanced-mode) #musicQueue .skip-toggle      { display: none !important; }

/* Advanced mode: deep-blue card highlight on advanced controls */
body.advanced-mode .adv {
  background: rgba(8, 26, 92, 0.52);
  border-left: 2px solid #1e4ed8;
  border-radius: 0 6px 6px 0;
  padding: 5px 10px 5px 12px;
  margin: 3px 0;
}
/* Inline labels sit inside a flex row — tighter padding, no block margin */
body.advanced-mode label.adv {
  padding: 3px 8px 3px 10px;
  margin: 0;
  border-radius: 0 4px 4px 0;
}
/* Light mode: soften the tint */
body.light-mode.advanced-mode .adv {
  background: rgba(8, 26, 92, 0.1);
  border-left-color: #3062f0;
}
.sb-duration-label{font-size:.58rem;opacity:.38;font-family:'Space Mono',monospace;text-align:center;letter-spacing:.02em;min-height:.8em}