.theme-cyan { --primary: #00adb5; --accent: #ff5722; }
.theme-gold { --primary: #d4af37; --accent: #ffaa00; }
.theme-purple { --primary: #9b51e0; --accent: #e040fb; }

.dark-mode { --bg-body: #121212; --bg-panels: #181818; --bg-inner: #161616; --bg-buttons: #2b2b2b; --text-main: #ffffff; --text-muted: #888888; --border: #333333; }
.light-mode { --bg-body: #f4f5f6; --bg-panels: #ffffff; --bg-inner: #f0f1f2; --bg-buttons: #e4e5e6; --text-main: #121212; --text-muted: #666666; --border: #cccccc; }

body { background-color: var(--bg-body); color: var(--text-main); font-family: Arial, sans-serif; margin: 0; padding: 0; height: 100vh; max-height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; transition: background-color 0.3s, color 0.3s; box-sizing: border-box; font-size: 16.1px; }

.top-navbar { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 8px 30px; background-color: var(--bg-panels); border-bottom: 1px solid var(--border); box-sizing: border-box; height: 50px; }
.nav-left, .nav-right { display: flex; gap: 10px; align-items: center; }
.btn-mode-toggle, .top-navbar select { background-color: var(--bg-buttons); color: var(--text-main); border: 1px solid var(--border); padding: 6px 12px; font-size: 16.1px; border-radius: 4px; cursor: pointer; font-weight: bold; }

.app-layout { display: grid; grid-template-columns: 28% 40% 32%; gap: 15px; width: 97%; max-width: 1600px; height: calc(100vh - 80px); margin-top: 15px; box-sizing: border-box; overflow: hidden; }

.side-timeline { background-color: var(--bg-panels); border: 2px dashed var(--border); border-radius: 10px; padding: 14px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; height: 100%; overflow: hidden; }
.section-title { font-size: 16.1px; color: var(--primary); font-weight: bold; }
.direction-selector { display: flex; gap: 6px; background-color: var(--bg-inner); padding: 4px; border-radius: 6px; flex-shrink: 0; }
.direction-selector button { flex: 1; background: none; border: none; color: var(--text-muted); padding: 6px; font-weight: bold; font-size: 14.9px; cursor: pointer; }
.direction-selector button.active { background-color: var(--primary); color: #121212; }
.btn-clear { background-color: var(--bg-inner); color: #ff4444; border: 1px solid var(--border); padding: 8px; font-weight: bold; font-size: 16.1px; border-radius: 6px; cursor: pointer; flex-shrink: 0; }

.timeline-container { overflow-y: auto; padding-right: 5px; flex: 1; gap: 8px; box-sizing: border-box; }
.timeline-container.mode-horizontal { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 55px; }
.timeline-container.mode-vertical { display: flex; flex-direction: column; gap: 6px; }
.timeline-block { background-color: var(--primary); color: #121212; border-radius: 6px; font-weight: bold; font-size: 21px; cursor: pointer; display: flex; position: relative; }
.timeline-container.mode-horizontal .timeline-block { flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
.timeline-container.mode-horizontal .block-num { position: absolute; top: 4px; left: 6px; font-size: 12.6px; opacity: 0.6; }
.timeline-container.mode-vertical .timeline-block { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 15px; min-height: 44px; }
.timeline-container.mode-vertical .block-num { font-size: 16.1px; opacity: 0.5; width: 30px; }
.timeline-container.mode-vertical .block-label { flex: 1; text-align: center; }
.timeline-block.active { background-color: var(--accent); box-shadow: 0 0 15px var(--accent); color: white; }

.main-container { background-color: var(--bg-panels); padding: 20px; border-radius: 15px; border: 1px solid var(--border); text-align: center; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; height: 100%; overflow: hidden; }
.main-container h1 { margin: 0; font-size: 32px; color: var(--primary); }
.visual-indicator { display: flex; justify-content: center; gap: 12px; margin: 5px 0; height: 40px; flex-wrap: wrap; flex-shrink: 0; }
.beat-dot { width: 34px; height: 34px; background-color: var(--bg-inner); border-radius: 50%; border: 1px solid var(--border); }
.beat-dot.active-strong { background-color: var(--accent); transform: scale(1.25); box-shadow: 0 0 15px var(--accent); }
.beat-dot.active-weak { background-color: var(--primary); transform: scale(1.12); box-shadow: 0 0 10px var(--primary); }
.bpm-display { font-size: 85px; font-weight: bold; margin: 0; color: var(--text-main); line-height: 1; flex-shrink: 0; }
.bpm-unit { font-size: 24px; color: var(--primary); }

.subdiv-panel { margin: 2px 0; display: flex; flex-direction: column; gap: 4px; align-items: center; width: 100%; flex-shrink: 0; }
.subdiv-label { font-size: 16.8px; font-weight: bold; color: var(--text-muted); letter-spacing: 1px; }
.subdiv-buttons { display: flex; gap: 6px; background-color: var(--bg-inner); padding: 4px; border-radius: 6px; border: 1px solid var(--border); width: 100%; box-sizing: border-box; }
.subdiv-buttons button { flex: 1; background: none; border: none; color: var(--text-muted); padding: 6px 2px; font-size: 15.4px; font-weight: bold; cursor: pointer; border-radius: 4px; transition: 0.1s; display: flex; flex-direction: column; align-items: center; gap: 2px; justify-content: center; min-height: 68px; }
.subdiv-buttons button.active { background-color: var(--primary); color: #121212; }
.subdiv-buttons button.active .note-shape, .subdiv-buttons button.active .note-beam { background-color: #121212 !important; }

.note-container { display: flex; align-items: flex-end; justify-content: center; height: 24px; position: relative; gap: 2px; transform: scale(1.1); transform-origin: bottom center; }
.note-stem { width: 2px; height: 16px; background-color: var(--text-muted); position: relative; }
.note-head { width: 7px; height: 5px; background-color: var(--text-muted); border-radius: 50%; transform: rotate(-20deg); transform-origin: left bottom; }
.note-beam { position: absolute; top: 4px; left: 2px; right: 0; height: 3px; background-color: var(--text-muted); }
.note-beam-double { position: absolute; top: 9px; left: 2px; right: 0; height: 2px; background-color: var(--text-muted); }
.tuplet-num { font-size: 11px; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-weight: 900; }

.sound-panel { margin: 2px 0; display: flex; flex-direction: column; gap: 4px; align-items: center; width: 100%; flex-shrink: 0; }
.sound-label { font-size: 12.6px; font-weight: bold; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; }

.sound-select {
    width: 100%;
    background-color: var(--bg-inner);
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 8px 30px 8px 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14.9px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    transition: 0.1s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.sound-select:hover, .sound-select:focus { border-color: var(--accent); outline: none; }
.sound-select option { background-color: var(--bg-panels); color: var(--text-main); padding: 6px; }

.controls { width: 100%; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.controls button { background-color: var(--bg-buttons); border: 1px solid var(--border); color: var(--text-main); padding: 10px 15px; font-size: 19px; cursor: pointer; border-radius: 5px; font-weight: bold; }
.bpm-buttons { display: flex; gap: 8px; }
.bpm-buttons button { flex: 1; }
#btnTapTempo { background-color: var(--accent); color: white; border: none; width: 100%; padding: 11px; font-size: 19px; font-weight: bold; border-radius: 6px; cursor: pointer; }
#btnPlay { background-color: #28a745; border: none; width: 100%; color: white; padding: 12px; font-size: 23px; border-radius: 6px; margin: 0; }
#btnPlay.playing { background-color: #dc3545; }
.instructions { margin-top: 2px; color: var(--text-muted); font-size: 14.5px; }

.right-panel { background-color: var(--bg-panels); border: 1px solid var(--border); border-radius: 10px; padding: 14px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; height: 100%; overflow-y: auto; }
.panel-column { background-color: var(--bg-inner); padding: 6px 10px; border-radius: 6px; box-sizing: border-box; width: 100%; }
.panel-column h3 { margin: 0 0 4px 0; font-size: 15px; color: var(--primary); text-transform: uppercase; }
.btn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; width: 100%; box-sizing: border-box; }
.btn-grid button { background-color: var(--bg-buttons); color: var(--text-main); border: 1px solid var(--border); padding: 5px 2px; font-weight: bold; font-size: 15px; border-radius: 4px; cursor: pointer; text-align: center; box-sizing: border-box; width: 100%; }
.btn-grid button:hover { background-color: var(--primary); color: #121212; }

.highlighted-premium { border: 1px solid var(--accent) !important; }
.premium-box { background-color: var(--bg-inner); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; box-sizing: border-box; width: 100%; }
.premium-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.premium-title { font-size: 12.6px; font-weight: bold; color: var(--accent); }
.premium-controls { display: flex; gap: 12px; margin-bottom: 4px; }
.control-group { display: flex; align-items: center; gap: 6px; font-size: 13.8px; color: var(--text-muted); }
.control-group input { background-color: var(--bg-buttons); color: var(--text-main); border: 1px solid var(--border); padding: 4px; width: 42px; border-radius: 4px; text-align: center; font-weight: bold; }

.countdown-wrapper { background-color: var(--bg-body); border: 1px dashed var(--border); border-radius: 6px; padding: 6px; text-align: center; box-sizing: border-box; width: 100%; min-height: 85px; display: flex; justify-content: center; align-items: center; }
.progressive-status { font-size: 14.9px; color: var(--text-main); font-weight: bold; line-height: 1.2; }
.progressive-status .num-highlight { font-size: 52px; font-weight: 900; color: var(--accent); display: block; margin: 1px 0; font-family: 'Courier New', Courier, monospace; text-shadow: 0 0 10px var(--accent); line-height: 1; }

.custom-box { background-color: var(--bg-inner); padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); box-sizing: border-box; width: 100%; }
.custom-box h3 { margin: 0 0 4px 0; font-size: 13.8px; color: var(--primary); text-transform: uppercase; }
.custom-inputs { display: flex; gap: 6px; align-items: center; width: 100%; box-sizing: border-box; }
.custom-inputs input { width: 42px; background-color: var(--bg-buttons); color: var(--text-main); border: 1px solid var(--border); padding: 5px; border-radius: 4px; font-weight: bold; text-align: center; }
.custom-inputs select { flex: 1; background-color: var(--bg-buttons); color: var(--text-main); border: 1px solid var(--border); padding: 5px; border-radius: 4px; font-weight: bold; }
.btn-custom-add { background-color: var(--accent); color: white; border: none; padding: 5px 10px; font-weight: bold; font-size: 17.2px; border-radius: 4px; cursor: pointer; }

.switch-container { position: relative; display: inline-block; width: 34px; height: 18px; }
.switch-container input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border); transition: .3s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent); }
input:checked + .slider:before { transform: translateX(16px); }