/* SoulOne LIVE 0.5 — performance-first layout. Pure CSS, no heavy images. */
:root{--soulone-ink:#1c344b;--soulone-stroke:#d4e2ef;--soulone-sea:#138fbd}
*{scrollbar-width:thin}
html,body{min-height:100%;overflow-x:hidden}
.app{width:100%;max-width:100%;padding:9px 13px 15px}
.top{padding:9px 14px;border-radius:13px;gap:9px}
.main-grid{grid-template-columns:minmax(0,1fr) minmax(250px,300px);gap:10px;margin-top:9px}
.timeline{padding:10px 12px}
.timeline .heading{margin-bottom:9px}
.stems-visual{max-height:clamp(300px,44dvh,525px);overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#9fbdd6 transparent}
.wave-row{height:39px;grid-template-columns:135px minmax(0,1fr)}
.wave-name{font-size:10px;padding:0 9px}
.segments{padding-left:136px;height:34px}
.time-numbers{padding-left:135px}
.progress-panel{margin-top:8px;min-height:72px;padding:8px 10px}
.transport button{height:45px;min-width:48px}
.transport button.start{height:55px;min-width:66px}
.download-panel[hidden]{display:none!important}
.download-panel{margin:0 0 9px;padding:13px 16px}
.download-panel .download-file-list{max-height:125px}
.download-header h3{font-size:15px;margin:2px 0}
.download-total{height:8px;margin:9px 0}
.download-track{padding:4px 1px;font-size:11px}
.download-info{font-size:10px}
#downloadPrompt[hidden],#readyPill[hidden]{display:none!important}
#downloadPrompt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 13px;margin-bottom:9px;border:1px solid #cbdceb;border-radius:11px;background:#f5faff;color:#335673;font-size:12px}
#downloadPrompt strong{font-size:12px}
#downloadPrompt button{padding:8px 12px;background:#0d74d8;color:white;border:0;white-space:nowrap}
#readyPill{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:#eaf8f3;border:1px solid #c4e9de;color:#18765c;font-size:11px;font-weight:900}
.meter-title{margin:10px 3px 6px}
.mixer{gap:7px;padding:2px 2px 7px;scrollbar-color:#a9c4d9 transparent;scroll-snap-type:x proximity}
.strip{flex:1 0 83px;min-width:83px;max-width:120px;border:1px solid #c9dbea;border-radius:12px;background:linear-gradient(180deg,#fff,#f4f8fd);box-shadow:0 6px 13px #16426810;scroll-snap-align:start}
.strip.is-selected{border-color:#1680d5;box-shadow:0 0 0 2px #1591e823,0 6px 15px #1642681c}
.striphead{min-height:64px;padding:8px 6px;color:white;font-size:10px;align-items:stretch}
.striphead .emoji{font-size:14px;line-height:18px}
.striphead .track-title{display:block;white-space:normal;word-break:break-word;line-height:1.15}
.striphead .route-chip{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:2px 5px;border-radius:5px;border:1px solid #ffffff55;background:#ffffff33;color:white;font-weight:950;letter-spacing:.05em}
.striphead .track-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:3px}
.strip .faderbox{height:175px;gap:8px;padding:8px 4px}
.strip .meter{height:147px;width:10px;border-radius:5px;background:#d3e1ed;box-shadow:inset 0 2px 3px #25475f15}
.strip .v-range{height:147px;width:30px}
.strip .v-range::-webkit-slider-runnable-track{width:7px;background:linear-gradient(90deg,#a2b8cf,#d1e0ec,#8eabc2);box-shadow:inset 0 1px 2px #28465a33;border-radius:7px}
.strip .v-range::-webkit-slider-thumb{width:30px;height:19px;border-radius:5px;background:linear-gradient(#fff,#dce8f3);border:1px solid #6b91ae;box-shadow:0 3px 5px #213d5070;margin-left:-12px}
.strip .v-range::-moz-range-track{width:7px;background:#9fb7cb;border-radius:7px}
.strip .v-range::-moz-range-thumb{height:19px;width:30px;border:1px solid #6b91ae;border-radius:5px;background:#f6faff}
.strip .db{font-size:11px;margin-bottom:6px}
.strip .dual{padding:0 6px;gap:4px}
.strip .dual button{height:31px;border-radius:7px;font-weight:900}
.strip .role{letter-spacing:.04em;font-size:9px;margin-top:6px}
.strip .role small{display:block;color:#6689a5;font-size:9px;line-height:1.5}
.strip .master{background:#ecf3f9}
.preset-description{display:flex;gap:5px;align-items:center;padding:8px 9px;background:#edf8ff;border:1px solid #d0e5f4;border-radius:9px;font-size:11px;color:#315b79;margin-top:9px}
.shortcuts-help{padding:9px;border:1px solid #d7e5f0;border-radius:9px;background:#f7fbff;margin-top:11px}
.shortcuts-help p{font-size:11px;line-height:1.65;margin:5px 0}
.shortcuts-help kbd,.shortcut-modal kbd{font-family:inherit;display:inline-block;font-size:11px;font-weight:850;padding:2px 6px;margin-right:3px;border:1px solid #c7d9ea;border-radius:5px;background:white;box-shadow:0 1px 0 #cfdeea}
#helpOverlay{position:fixed;inset:0;z-index:120;background:#122b45bd;display:flex;justify-content:center;align-items:center;padding:16px}
#helpOverlay[hidden]{display:none!important}
#helpOverlay .shortcut-modal{background:#fff;border-radius:16px;padding:20px;max-width:780px;width:100%;max-height:90dvh;overflow:auto;box-shadow:0 14px 50px #0004}
#helpOverlay h2{margin:0 0 6px;font-size:21px}
#helpOverlay .modal-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
#helpOverlay .modal-top button{min-width:36px;height:36px}
#helpOverlay .shortcut-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
#helpOverlay .shortcut-block{border:1px solid #deebf5;border-radius:10px;padding:12px;background:#f8fbff}
#helpOverlay .shortcut-block strong{font-size:13px}
#helpOverlay .shortcut-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px solid #e6eff7;font-size:11px}
#helpOverlay .shortcut-item:first-of-type{margin-top:7px}
#helpOverlay .shortcut-item span:last-child{color:#526c84;text-align:right}
.tools button#keyboardHelp{white-space:nowrap}
@media(min-width:1500px){.main-grid{grid-template-columns:minmax(0,1fr) 340px}.stems-visual{max-height:49dvh}.strip{flex-basis:92px}.wave-row{height:41px}}
@media(max-width:1100px){.main-grid{grid-template-columns:minmax(0,1fr) 245px}.strip{flex:0 0 88px}}
@media(max-width:800px){.main-grid{grid-template-columns:1fr}.right{order:2}.stems-visual{max-height:38dvh}.wave-row{grid-template-columns:91px minmax(0,1fr);height:37px}.segments{padding-left:92px}.time-numbers{padding-left:91px}.wave-name{font-size:9px;padding:0 5px}.progress-panel{position:sticky;bottom:0;z-index:10;background:#fff}.strip{flex:0 0 86px}.mixer{gap:6px}.setlist{max-height:210px}.tabcontent{min-height:0}}
@media(max-width:500px){.app{padding:5px 6px 8px}.top{padding:7px 9px}.brand{font-size:18px}.main-grid{gap:7px;margin-top:7px}.stems-visual{max-height:32dvh}.wave-row{height:34px;grid-template-columns:82px minmax(0,1fr)}.segments{padding-left:83px}.time-numbers{padding-left:82px}.clock{font-size:23px}.progress-panel{gap:6px}.transport{gap:5px}.transport button{min-width:42px;height:42px}.transport button.start{min-width:60px;height:50px}.strip{flex:0 0 88px}.strip .faderbox{height:157px}.strip .meter,.strip .v-range{height:133px}.download-panel{padding:11px}.download-file-list{max-height:110px}.shortcuts-help p{font-size:10px}#helpOverlay .shortcut-grid{grid-template-columns:1fr}}