.cardsGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:14px}.harmony-card{padding:12px;border-radius:16px;border:1px solid var(--stroke,#242438);background:rgba(0,0,0,.26);cursor:pointer;transition:.2s cubic-bezier(.175, .885, .32, 1.275);position:relative;overflow:hidden;user-select:none;min-height:80px}.harmony-card:hover{border-color:rgba(255,180,92,.3);background:rgba(255,255,255,.03)}.harmony-card.in-progression{border-color:rgba(255,180,92,.5);background:rgba(255,180,92,.05)}.harmony-card.playing{border-color:#fff!important;background:rgba(255,255,255,.15)!important;box-shadow:0 0 20px rgba(255,180,92,.6),inset 0 0 10px rgba(255,255,255,.2)!important;z-index:5}.harmony-card.in-progression::after{content:"";position:absolute;bottom:5px;right:8px;color:var(--accent-color);font-size:14px;opacity:.6}.harmony-card .top-info{display:flex;justify-content:space-between;font-size:10px;color:var(--muted,#a7a7bf);text-transform:uppercase;margin-bottom:4px}.harmony-card .top-info span{font-weight:900;color:#fff;letter-spacing:.3px}.harmony-card .chord-name{font-size:18px;font-weight:1000;margin:2px 0}.harmony-card .chord-tones{font-size:11px;color:var(--muted,#a7a7bf)}.sequence-rail{display:flex;gap:8px;flex-wrap:wrap;padding:10px 0}.harmony-chip{border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.3);padding:6px 12px;border-radius:999px;font-size:12px;color:var(--muted,#a7a7bf);cursor:pointer;display:flex;align-items:center;gap:6px;transition:.15s}.harmony-chip.active{background:linear-gradient(180deg,#ffb45c,#ff6a3d);color:#000;font-weight:900;border-color:#fff}.info-i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.1);font-size:9px;display:flex;align-items:center;justify-content:center;color:var(--accent-color,#ff9f43);border:none;cursor:pointer}.info-i:hover{background:var(--accent-color);color:#000}@media (max-width:1024px){.cardsGrid{grid-template-columns:repeat(7,1fr)!important;gap:6px}.harmony-card{padding:8px 4px;min-height:60px}.harmony-card .chord-name{font-size:14px}.harmony-card .chord-tones{font-size:9px}.harmony-card .top-info{font-size:8px}}@media (max-width:600px) and (orientation:portrait){.cardsGrid{grid-template-columns:repeat(4,1fr)!important}.harmony-card .chord-name{font-size:13px}}.chord-mini-popup{position:fixed;z-index:3000;background:rgba(17,17,24,.95);border:1px solid var(--accent-color);border-radius:14px;padding:10px;box-shadow:0 12px 40px rgba(0,0,0,.8);display:none;pointer-events:auto;width:195px;backdrop-filter:blur(10px);cursor:move}.chord-mini-popup .diagram-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:5px;overflow:visible}.chord-mini-popup .string-indicator-bar{display:grid;grid-template-columns:repeat(6,1fr);width:154px;height:18px;margin:0 auto 2px;pointer-events:none}.chord-mini-popup .string-ind{width:13px;height:13px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#999;font-weight:900}.chord-mini-popup .string-ind.is-bass{background:var(--accent-color)!important;color:#000!important;border-color:#fff}.chord-mini-popup #mini-diagram svg{width:100%!important;height:auto!important;transform:translate(-25px,-10px);overflow:visible}