.toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 10px; margin-bottom: 14px; }
.search-box { position: relative; display: flex; align-items: center; }
.search-box > svg { position: absolute; left: 13px; color: var(--color-muted); pointer-events: none; }
.search-box .input { padding-left: 40px; background: var(--color-surface-elevated); }
.view-toggle { display: flex; padding: 3px; border: 1px solid var(--color-border-soft); border-radius: 10px; background: var(--color-surface); }
.view-toggle button { width: 36px; border: 0; border-radius: 7px; background: transparent; color: var(--color-subtle); cursor: pointer; }
.view-toggle button.active { background: var(--color-surface-hover); color: var(--color-text); }
.category-scroller { display: flex; gap: 7px; margin: 0 -28px 20px; padding: 2px 28px 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; touch-action: pan-x; }
.category-scroller::-webkit-scrollbar { display: none; }
.category-scroller.dragging { cursor: grabbing; user-select: none; }
.category-chip { flex: 0 0 auto; height: 34px; padding: 0 14px; border: 1px solid var(--color-border-soft); border-radius: var(--radius-pill); background: var(--color-surface-elevated); color: #aab4ae; font-size: 11px; font-weight: 700; cursor: pointer; scroll-snap-align: start; }
.category-chip:hover { border-color: var(--color-border); color: #fff; }
.category-chip.active { border-color: #eaf8ee; background: #eaf8ee; color: #07100a; }
.category-chip.favorite.active { border-color: #ff6573; background: #ff6573; color: #fff; }

.track-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 16px; }
.track-card { position: relative; min-width: 0; padding: 10px; border: 1px solid transparent; border-radius: var(--radius-medium); background: rgb(255 255 255 / 2.5%); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); }
.track-card:hover, .track-card.current { border-color: var(--color-border-soft); background: rgb(255 255 255 / 6%); transform: translateY(-2px); }
.track-art { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: linear-gradient(145deg, var(--cover-color, #355e46), #172019); box-shadow: 0 12px 24px rgb(0 0 0 / 22%); }
.track-art img { width: 100%; height: 100%; object-fit: cover; }
.track-art-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(255 255 255 / 72%); font-size: clamp(28px, 4vw, 54px); font-weight: 900; }
.stem-count { position: absolute; z-index: 2; top: 7px; right: 7px; padding: 4px 7px; border-radius: var(--radius-pill); background: rgb(4 7 5 / 76%); color: #dae2dd; font-size: 9px; backdrop-filter: blur(5px); }
.card-play, .card-favorite, .card-delete { position: absolute; z-index: 3; display: grid; place-items: center; border: 0; cursor: pointer; transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast); }
.card-play { right: 8px; bottom: 8px; width: 42px; height: 42px; border-radius: 50%; background: var(--color-primary); color: #06130a; opacity: 0; transform: translateY(5px); box-shadow: 0 12px 25px rgb(0 0 0 / 45%); }
.track-card:hover .card-play, .track-card.current .card-play { opacity: 1; transform: none; }
.card-favorite, .card-delete { bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgb(5 8 6 / 75%); color: #fff; opacity: 0; }
.card-favorite { left: 8px; }
.card-delete { left: 44px; color: #ff9ca5; }
.track-card:hover .card-favorite, .track-card:hover .card-delete, .card-favorite.saved { opacity: 1; }
.card-favorite.saved { color: #ff6573; }
.track-meta { min-width: 0; padding-top: 9px; }
.track-meta strong, .track-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-meta strong { font-size: 12px; }
.track-card.current .track-meta strong { color: var(--color-primary); }
.track-meta span { margin-top: 3px; color: var(--color-muted); font-size: 10px; }
.track-list { display: grid; gap: 3px; }
.track-list .track-card { display: grid; grid-template-columns: 28px 48px minmax(0,1fr) auto auto; align-items: center; gap: 11px; padding: 7px 10px; }
.track-list .track-art { width: 48px; height: 48px; }
.track-list .track-meta { padding: 0; }
.track-list .card-play, .track-list .card-favorite, .track-list .card-delete { position: static; opacity: 1; transform: none; }
.track-list .card-play { width: 34px; height: 34px; }
.track-list .card-favorite, .track-list .card-delete { background: transparent; }
.load-more { display: flex; justify-content: center; padding: 28px 0 8px; }


.player-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 16px; }
.track-hero { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 22px; padding: 20px; }
.hero-cover { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-medium); background: linear-gradient(145deg, #486d55, #152219); box-shadow: var(--shadow-large); }
.hero-cover img { width: 100%; height: 100%; object-fit: cover; }
.hero-copy { align-self: center; min-width: 0; }
.hero-copy h1 { margin: 5px 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(24px, 3vw, 40px); letter-spacing: -.045em; }
.hero-copy > p { margin: 0; color: var(--color-muted); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.transport-card { margin-top: 16px; padding: 20px; }
.timeline-large { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 11px; color: var(--color-muted); font-size: 10px; }
.range { width: 100%; accent-color: var(--color-primary); }
.transport-buttons { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 14px; }
.transport-buttons button { border: 0; background: transparent; color: var(--color-muted); cursor: pointer; }
.transport-buttons .play-large { width: 58px; height: 58px; border-radius: 50%; background: var(--color-primary); color: #05140a; font-size: 22px; box-shadow: 0 12px 35px rgb(46 232 120 / 20%); }
.transport-buttons .play-large:hover { background: #54ef92; color: #041008; }
.control-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.control-card { padding: 18px; }
.control-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 13px; }
.control-value { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 10px; }
.control-value strong { min-width: 76px; text-align: center; font-size: 26px; }
.preset-row { display: flex; gap: 5px; margin-top: 11px; overflow-x: auto; scrollbar-width: none; }
.preset-row button { flex: 0 0 auto; min-width: 34px; height: 30px; border: 1px solid var(--color-border-soft); border-radius: 6px; background: #0d120f; color: var(--color-muted); font-size: 9px; cursor: pointer; }
.preset-row button.active { border-color: var(--color-primary); background: var(--color-primary); color: #06110a; font-weight: 900; }
.lyrics-panel { min-height: 640px; display: flex; flex-direction: column; overflow: hidden; }
.panel-tabs { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-bottom: 1px solid var(--color-border-soft); }
.panel-tabs button { height: 48px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--color-muted); font-size: 11px; font-weight: 800; cursor: pointer; }
.panel-tabs button.active { border-color: var(--color-primary); color: #fff; }
.font-controls { display: flex; gap: 4px; margin-left: auto; }
.font-controls button { width: 31px; height: 31px; padding: 0; border: 1px solid var(--color-border); border-radius: 6px; }
.lyrics-content { flex: 1; overflow: auto; padding: 30px 24px; scroll-behavior: smooth; }
.lyrics-content p { margin: 0 0 16px; color: #c9d1cc; font-size: var(--lyrics-size, 17px); line-height: 1.7; }
.lyrics-content p.current { color: var(--color-text); font-weight: 750; text-shadow: 0 0 20px rgb(46 232 120 / 20%); }
.lyrics-content p.past { color: var(--color-subtle); }
.cifra-toolbar { position: sticky; z-index: 2; top: -30px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -30px -24px 24px; padding: 12px 18px; border-bottom: 1px solid var(--color-border-soft); background: rgb(16 21 18 / 96%); backdrop-filter: blur(10px); }
.cifra-toolbar > div { display: flex; gap: 5px; }
.cifra-toolbar button { min-width: 34px; height: 30px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-elevated); color: var(--color-muted); cursor: pointer; }
.cifra-toolbar small { color: var(--color-muted); font-size: 9px; }
.chord-sheet { margin: 0; color: #dce5df; font: 600 var(--lyrics-size, 16px)/1.75 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.download-list { display: grid; gap: 7px; max-height: 60dvh; overflow: auto; }
.download-list > p { margin: 0 0 8px; color: var(--color-muted); font-size: 11px; }
.download-list > a { justify-content: flex-start; font-size: 11px; }
.download-list > a small { margin-left: auto; color: var(--color-primary); }
.mixer-card { margin-top: 16px; }
.mixer-help { display: flex; align-items: center; gap: 9px; margin: 0 16px 7px; padding: 11px 12px; border: 1px solid rgb(46 232 120 / 20%); border-radius: 8px; background: rgb(46 232 120 / 5%); color: var(--color-muted); font-size: 10px; }
.mixer-help strong { color: var(--color-text); }
.mixer-list { padding: 5px 16px 16px; }
.mixer-row { --stem-color: var(--color-primary); position: relative; display: grid; grid-template-columns: minmax(138px, 1fr) minmax(110px, 1.2fr) 34px 34px; align-items: center; gap: 10px; min-height: 54px; border-bottom: 1px solid var(--color-border-soft); transition: opacity var(--transition-fast); }
.mixer-row::before { position: absolute; left: -16px; width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--stem-color); opacity: .75; content: ""; }
.stem-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11px; font-weight: 750; }
.stem-name > span:first-child { width: 22px; text-align: center; font-size: 16px; }
.stem-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mixer-row.muted, .mixer-list.has-solo .mixer-row:not(.solo) { opacity: .32; }
.mixer-row.muted .stem-name { text-decoration: line-through; }
.mixer-row.playing:not(.muted) .stem-name::after { width: 14px; height: 12px; background: linear-gradient(90deg, var(--stem-color) 18%, transparent 18% 35%, var(--stem-color) 35% 53%, transparent 53% 70%, var(--stem-color) 70%); animation: equalizer .7s ease-in-out infinite alternate; content: ""; }
@keyframes equalizer { to { transform: scaleY(.35); } }
.mix-toggle { width: 34px; height: 32px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface-elevated); color: var(--color-muted); font-size: 10px; cursor: pointer; }
.mix-toggle.active { border-color: var(--stem-color); color: var(--stem-color); }

.stage-page { min-height: calc(100dvh - var(--player-height)); padding: 0 30px 30px; background: #050806; }
.stage-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 68px; border-bottom: 1px solid var(--color-border); }
.stage-track { display: flex; align-items: center; gap: 11px; min-width: 0; }
.stage-clock { justify-self: end; text-align: right; }
.stage-clock time { display: block; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.stage-clock small { color: var(--color-muted); font-size: 9px; }
.stage-transport { display: flex; align-items: center; gap: 17px; color: var(--color-muted); }
.stage-play { width: 55px; height: 55px; border: 0; border-radius: 50%; background: var(--color-primary); color: #05140a; cursor: pointer; }
.stage-body { max-width: 1180px; margin: 0 auto; padding-top: 24px; }
.stage-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--color-border); }
.stage-tabs button { min-height: 45px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--color-muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; cursor: pointer; }
.stage-tabs button.active { border-color: var(--color-primary); color: #fff; }
.setlist { display: grid; gap: 9px; padding-top: 15px; }
.setlist-item { display: grid; grid-template-columns: 44px minmax(0,1fr) auto auto; align-items: center; gap: 13px; min-height: 76px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-surface); }
.setlist-index { color: var(--color-subtle); font-size: 18px; font-variant-numeric: tabular-nums; }
.setlist-item strong, .setlist-item small { display: block; }
.setlist-item small { margin-top: 3px; color: var(--color-muted); }
.add-track { min-height: 70px; border: 1px dashed #33533f; border-radius: var(--radius-small); background: transparent; color: var(--color-muted); cursor: pointer; }
.add-track:hover { border-color: var(--color-primary); color: #fff; }
.stage-lyrics { height: calc(100dvh - 220px); overflow: auto; display: grid; align-content: center; padding: 40px; text-align: center; }
.stage-lyrics p { margin: 10px 0; color: #cbd4ce; font-size: clamp(24px, 4vw, 54px); line-height: 1.4; }

.job-list { display: grid; gap: 8px; margin-top: 14px; }
.job-row { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(100px,180px) auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 13px; }

.settings-grid { display: grid; gap: 14px; }
.setting-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px, 46%); align-items: center; gap: 18px; padding: 17px 20px; border-bottom: 1px solid var(--color-border-soft); }
.setting-row:last-child { border-bottom: 0; }
.setting-copy strong, .setting-copy small { display: block; }
.setting-copy small { margin-top: 4px; color: var(--color-muted); font-size: 10px; }
.switch { position: relative; width: 42px; height: 24px; justify-self: end; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #303a34; cursor: pointer; transition: background var(--transition-fast); }
.switch span::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--transition-fast); content: ""; }
.switch input:checked + span { background: var(--color-primary); }
.switch input:checked + span::after { transform: translateX(18px); }


@media (max-width: 1280px) { .track-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media (max-width: 1100px) { .track-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 900px) { .player-layout { grid-template-columns: 1fr; } .lyrics-panel { min-height: 480px; } }
@media (max-width: 700px) {
  .category-scroller { margin-inline: -16px; padding-inline: 16px; }
  .track-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .track-card { padding: 8px; }
  .card-play { width: 38px; height: 38px; opacity: 1; transform: none; }
  .card-favorite { opacity: 1; }
  .toolbar { grid-template-columns: 1fr auto; }
  .track-hero { grid-template-columns: 96px minmax(0,1fr); gap: 14px; padding: 14px; }
  .hero-actions .button { width: 40px; padding: 0; }
  .hero-actions .button span:not([data-icon]) { display: none; }
  .control-grid { grid-template-columns: 1fr; }
  .lyrics-panel { min-height: 520px; }
  .mixer-row { grid-template-columns: minmax(100px, 1fr) minmax(90px, 1fr) 33px 33px; gap: 7px; }
  .mixer-list { padding-inline: 12px; }
  .stage-page { padding-inline: 13px; }
  .stage-header { grid-template-columns: minmax(0,1fr) auto; }
  .stage-transport { grid-column: 1 / -1; grid-row: 2; justify-content: center; padding: 13px 0; border-top: 1px solid var(--color-border-soft); }
  .stage-clock { grid-column: 2; }
  .stage-lyrics { padding: 18px 4px; }
  .setlist-item { grid-template-columns: 34px minmax(0,1fr) auto; }
  .setlist-item .status-pill { display: none; }
  .setting-row { grid-template-columns: 1fr; }
  .setting-row > :last-child { justify-self: stretch; }
  .switch { justify-self: start !important; }
}

/* TuPista visual refresh: hierarchy, touch targets and responsive rhythm */
.app-frame .workspace{background:radial-gradient(ellipse 70% 45% at 72% 0,rgb(45 224 116 / 7%),transparent 70%)}
.app-frame .topbar{height:48px;padding-inline:clamp(18px,3vw,42px);font-size:11px;background:linear-gradient(90deg,rgb(12 37 23 / 96%),rgb(12 23 16 / 82%));border-color:rgb(83 255 145 / 18%)}
.app-frame .page{padding-top:clamp(34px,5vw,64px);padding-bottom:64px}.app-frame .page-header{margin-bottom:30px}.app-frame .page-header h1{font-size:clamp(34px,4vw,58px);font-weight:850;letter-spacing:-.065em}.app-frame .page-header p:not(.eyebrow){font-size:14px;line-height:1.65}
.app-frame .toolbar{gap:12px;margin-bottom:18px}.app-frame .search-box{min-height:50px;border-radius:16px;border-color:rgb(166 255 196 / 12%);background:rgb(255 255 255 / 4%)}.app-frame .search-box .input{font-size:14px}.app-frame .view-toggle{padding:4px;border-radius:15px;background:rgb(255 255 255 / 4%)}.app-frame .view-toggle button{width:42px;height:40px;border-radius:11px}
.app-frame .category-scroller{gap:9px;margin-bottom:30px}.app-frame .category-chip{min-height:40px;padding-inline:17px;border-color:rgb(255 255 255 / 7%);font-size:12px;font-weight:750;background:rgb(255 255 255 / 4%)}.app-frame .category-chip.active{background:var(--color-primary);color:#06110a;border-color:transparent}
.app-frame .track-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.app-frame .track-card{padding:11px;border-radius:19px;background:linear-gradient(145deg,rgb(22 33 26 / 96%),rgb(10 16 12 / 98%));border:1px solid rgb(165 255 193 / 8%);box-shadow:0 12px 34px rgb(0 0 0 / 16%)}.app-frame .track-art{border-radius:13px;box-shadow:inset 0 0 0 1px rgb(255 255 255 / 6%)}.app-frame .track-meta{padding:9px 2px 2px}.app-frame .track-meta strong{font-size:13px;line-height:1.25}.app-frame .track-meta span{margin-top:4px;font-size:11px;color:#aab8ae}
.app-frame .player-layout{gap:22px}.app-frame .card{border-radius:22px}.app-frame .track-hero{padding:24px;border-radius:24px;background:linear-gradient(135deg,rgb(25 40 30 / 98%),rgb(10 17 12 / 98%));border-color:rgb(139 255 175 / 14%);box-shadow:0 24px 70px rgb(0 0 0 / 22%)}.app-frame .hero-cover{border-radius:17px}.app-frame .hero-copy h1{font-size:clamp(30px,3.2vw,48px)}.app-frame .hero-actions .button{min-height:42px;border-radius:13px}.app-frame .transport-card{padding:24px;border-radius:24px}.app-frame .play-large{width:68px;height:68px;background:linear-gradient(145deg,#a6ffc0,#23e877 55%,#0fad50);box-shadow:0 14px 38px rgb(46 232 120 / 25%)}.app-frame .control-card{padding:20px;border-radius:18px}.app-frame .lyrics-panel{border-radius:24px;box-shadow:0 24px 70px rgb(0 0 0 / 19%)}
.app-frame .stage-page{background:radial-gradient(ellipse at 50% 0,rgb(46 232 120 / 9%),transparent 52%),#050806}.app-frame .stage-header{min-height:78px}.app-frame .stage-body{max-width:1180px;margin-inline:auto}.app-frame .stage-tabs{border-radius:16px;padding:5px;background:rgb(255 255 255 / 4%)}.app-frame .stage-tabs button{border-radius:12px;font-size:13px}.app-frame .setlist-item,.app-frame .add-track{border-radius:16px;border-color:rgb(150 255 187 / 12%)}.app-frame .add-track{min-height:92px;background:linear-gradient(135deg,rgb(20 50 30 / 55%),rgb(10 20 13 / 55%));font-size:13px}
@media (min-width:701px) and (max-width:1200px){.app-frame .track-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.app-frame .page{padding-inline:28px}.app-frame .track-hero{padding:20px}}
@media(max-width:700px){.app-frame .page{padding:26px 15px 46px}.app-frame .page-header{margin-bottom:24px}.app-frame .page-header h1{font-size:clamp(34px,10vw,44px)}.app-frame .toolbar{margin-bottom:13px}.app-frame .category-scroller{margin-bottom:22px}.app-frame .track-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.app-frame .track-card{padding:8px;border-radius:16px}.app-frame .track-art{border-radius:11px}.app-frame .track-meta{padding:8px 1px 2px}.app-frame .track-meta strong{font-size:13px}.app-frame .track-meta span{font-size:10px}.app-frame .track-hero{padding:15px;border-radius:20px}.app-frame .hero-copy h1{font-size:clamp(25px,7vw,32px)}.app-frame .transport-card{padding:16px 13px;border-radius:20px}.app-frame .play-large{width:64px;height:64px}.app-frame .lyrics-panel{border-radius:20px}.app-frame .stage-header{min-height:78px}.app-frame .stage-page{padding-inline:12px}.app-frame .stage-tabs{margin-inline:0}.app-frame .setlist-item{padding:12px 10px}.app-frame .add-track{min-height:88px}}