:root{--hca-bg:#08111f;--hca-card:#101b2d;--hca-card2:#111f34;--hca-text:#f5f7fb;--hca-muted:#aab6c8;--hca-line:rgba(255,255,255,.11);--hca-brand:#f6c24a;--hca-brand2:#52d0ff;--hca-good:#4ade80;--hca-radius:22px;--hca-shadow:0 20px 60px rgba(0,0,0,.28)}
.hca-app{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(145deg,#07101d,#12203a 45%,#07101d);color:var(--hca-text);padding:22px;border-radius:var(--hca-radius);box-shadow:var(--hca-shadow);max-width:1180px;margin:24px auto;box-sizing:border-box}
.hca-app *{box-sizing:border-box}.hca-hero{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:24px;border:1px solid var(--hca-line);border-radius:var(--hca-radius);background:radial-gradient(circle at 20% 20%,rgba(82,208,255,.25),transparent 32%),radial-gradient(circle at 85% 10%,rgba(246,194,74,.22),transparent 30%),rgba(255,255,255,.04)}
.hca-hero h2{font-size:34px;line-height:1.1;margin:10px 0 8px;color:#fff}.hca-hero p{margin:0;color:var(--hca-muted);max-width:760px}.hca-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(246,194,74,.15);color:var(--hca-brand);border:1px solid rgba(246,194,74,.35);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;letter-spacing:.08em}.hca-status{min-width:150px;text-align:center;padding:12px 14px;border-radius:15px;background:rgba(82,208,255,.13);border:1px solid rgba(82,208,255,.28);font-weight:700;color:#dff7ff}
.hca-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.hca-card{border:1px solid var(--hca-line);background:rgba(255,255,255,.045);border-radius:var(--hca-radius);padding:18px;margin-top:18px}.hca-grid .hca-card{margin-top:0}.hca-card h3{margin:0 0 14px;font-size:18px;color:#fff}.hca-filebox{display:flex;align-items:center;justify-content:center;border:1.5px dashed rgba(246,194,74,.55);border-radius:18px;min-height:92px;padding:20px;background:rgba(246,194,74,.08);cursor:pointer;font-weight:900;text-align:center}.hca-filebox input{display:none}.hca-app audio{width:100%;margin-top:12px}.hca-row{display:flex;gap:10px}.hca-row input{flex:1}.hca-app input,.hca-app select,.hca-app textarea{width:100%;border:1px solid rgba(255,255,255,.16);background:#07101d;color:var(--hca-text);border-radius:14px;padding:12px 13px;outline:none}.hca-app textarea{resize:vertical;min-height:120px}.hca-app input:focus,.hca-app select:focus,.hca-app textarea:focus{border-color:var(--hca-brand2);box-shadow:0 0 0 3px rgba(82,208,255,.14)}.hca-formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hca-formgrid-4{grid-template-columns:repeat(4,1fr)}.hca-formgrid label{font-size:13px;font-weight:800;color:var(--hca-muted)}.hca-formgrid label input,.hca-formgrid label select{margin-top:6px}.hca-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.hca-actions.small{margin-top:0}.hca-btn{border:0;border-radius:14px;padding:12px 15px;font-weight:900;cursor:pointer;transition:transform .15s ease,opacity .15s ease;background:#263650;color:#fff}.hca-btn:hover{transform:translateY(-1px)}.hca-btn.primary{background:linear-gradient(135deg,var(--hca-brand),#ffdf7d);color:#191200}.hca-btn.secondary{background:rgba(82,208,255,.14);color:#e7f9ff;border:1px solid rgba(82,208,255,.26)}.hca-btn.ghost{background:rgba(255,255,255,.06);color:var(--hca-muted);border:1px solid var(--hca-line)}.hca-note{color:var(--hca-muted);font-size:13px;margin:10px 0 0}.hca-result-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}.hca-empty{text-align:center;color:var(--hca-muted);padding:26px;border:1px dashed var(--hca-line);border-radius:18px;background:rgba(255,255,255,.035)}.hca-progress{height:8px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin-top:12px}.hca-progress span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--hca-brand2),var(--hca-brand));transition:width .2s ease}
.hca-chord-sheet{display:grid;gap:12px}.hca-sheet-meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;padding:12px;border:1px solid rgba(246,194,74,.25);border-radius:18px;background:rgba(246,194,74,.08)}.hca-sheet-meta span{font-size:13px;color:#f6f7fb;background:rgba(0,0,0,.16);border-radius:999px;padding:7px 10px}.hca-sheet-meta b{color:var(--hca-brand)}.hca-bar-row{border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border-radius:18px;padding:12px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.hca-bar-row.active-row{border-color:rgba(246,194,74,.55);box-shadow:0 0 0 3px rgba(246,194,74,.1);background:linear-gradient(135deg,rgba(246,194,74,.1),rgba(82,208,255,.04))}.hca-bar-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:9px;color:var(--hca-muted)}.hca-bar-title b{color:var(--hca-brand);font-size:15px}.hca-bar-title span{font-size:12px}.hca-slots{display:grid;grid-template-columns:repeat(var(--hca-slots-per-row,4),minmax(120px,1fr));gap:9px;overflow-x:auto;padding-bottom:2px}.hca-slot-card{position:relative;border:1px solid rgba(255,255,255,.13);background:#07101d;border-radius:16px;padding:10px;min-height:86px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;cursor:pointer}.hca-slot-card.strong{border-color:rgba(246,194,74,.35);background:linear-gradient(145deg,rgba(246,194,74,.12),rgba(255,255,255,.035))}.hca-slot-card.lead{border-color:rgba(82,208,255,.32);background:linear-gradient(145deg,rgba(82,208,255,.09),rgba(255,255,255,.035))}.hca-slot-card.empty-slot{opacity:.62}.hca-slot-card.collapsed-slot{display:none}.hca-slot-card.active{opacity:1;transform:translateY(-2px) scale(1.015);border-color:var(--hca-brand);box-shadow:0 0 0 3px rgba(246,194,74,.18),0 10px 30px rgba(246,194,74,.18);background:linear-gradient(145deg,rgba(246,194,74,.25),rgba(82,208,255,.11))}.hca-slot-card.active:before{content:"";position:absolute;inset:-1px;border-radius:16px;border:1px solid rgba(255,255,255,.35);pointer-events:none}.hca-slot-top{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:8px}.hca-slot-top span{font-size:12px;color:var(--hca-brand);font-weight:900}.hca-slot-top small{font-size:11px;color:var(--hca-muted)}.hca-slot-input{font-size:23px!important;text-align:center;font-weight:950;color:#fff!important;background:rgba(0,0,0,.22)!important;border-color:rgba(255,255,255,.13)!important;padding:10px!important;border-radius:13px!important;letter-spacing:.01em}.hca-slot-card.active .hca-slot-input{color:#191200!important;background:#ffe08a!important;border-color:#ffe08a!important}.hca-lyric-line{margin-top:10px;background:rgba(255,255,255,.055)!important;color:#fff!important;border-color:rgba(255,255,255,.12)!important}.hca-lyric-line::placeholder,.hca-slot-input::placeholder{color:rgba(255,255,255,.34)}
@media(max-width:980px){.hca-formgrid-4{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.hca-grid{grid-template-columns:1fr}.hca-hero,.hca-result-head{flex-direction:column;align-items:flex-start}.hca-formgrid,.hca-formgrid-4{grid-template-columns:1fr}.hca-row{flex-direction:column}.hca-app{padding:14px}.hca-hero h2{font-size:28px}.hca-slot-card{min-height:76px}.hca-slot-input{font-size:21px!important}}
/* Version 1.3: tùy chọn 1-8 ô/dòng, click/SPACE điều khiển nhạc và chạy đèn theo nhịp */
.hca-slot-card{overflow:hidden}
.hca-slot-card.empty-slot{opacity:.92;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.018));border-color:rgba(255,255,255,.1)}
.hca-slot-card.empty-slot .hca-slot-input{color:rgba(255,255,255,.5)!important;background:rgba(0,0,0,.12)!important}
.hca-slot-card.active-chord{opacity:1;transform:translateY(-3px) scale(1.018);border-color:var(--hca-brand);box-shadow:0 0 0 3px rgba(246,194,74,.22),0 0 28px rgba(246,194,74,.45),inset 0 0 18px rgba(246,194,74,.16);background:linear-gradient(145deg,rgba(246,194,74,.33),rgba(82,208,255,.13))}
.hca-slot-card.active-beat{opacity:1;transform:translateY(-1px) scale(1.008);border-color:rgba(82,208,255,.55);box-shadow:0 0 0 2px rgba(82,208,255,.13),0 0 18px rgba(82,208,255,.24);background:linear-gradient(145deg,rgba(82,208,255,.13),rgba(255,255,255,.035))}
.hca-slot-card.active-beat:after,.hca-slot-card.active-chord:after{content:"";position:absolute;inset:-35%;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 42%);animation:hcaBeatGlow .44s ease-out;pointer-events:none}
.hca-slot-card.active-chord .hca-slot-input{color:#191200!important;background:#ffe08a!important;border-color:#ffe08a!important;text-shadow:none}
.hca-slot-card.active-beat .hca-slot-input{border-color:rgba(82,208,255,.4)!important;background:rgba(82,208,255,.08)!important}
.hca-slot-card.active-beat.empty-slot .hca-slot-input::placeholder{color:rgba(255,255,255,.18)}
@keyframes hcaBeatGlow{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.15)}}
/* Version 1.4: chế độ đơn giản/phách mạnh, phách mạnh vừa và xuất tone sau khi transpose */
.hca-slot-card.medium{border-color:rgba(82,208,255,.24);background:linear-gradient(145deg,rgba(82,208,255,.075),rgba(255,255,255,.03))}
.hca-slot-card.medium .hca-slot-top span{color:#8ee7ff}
.hca-slot-card.medium:not(.empty-slot) .hca-slot-input{box-shadow:inset 0 0 0 1px rgba(82,208,255,.22)}
.hca-slot-card.active-chord.medium{border-color:#8ee7ff;box-shadow:0 0 0 3px rgba(82,208,255,.18),0 0 28px rgba(82,208,255,.38),inset 0 0 18px rgba(82,208,255,.16)}
.hca-sheet-meta span:nth-child(4){border:1px solid rgba(246,194,74,.28)}
/* Version 1.5: gom/mở rộng bảng hợp âm và chuẩn bị xuất file có hàng lời dưới mỗi hàng hợp âm */
.hca-chord-sheet.is-compact{max-height:720px;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(246,194,74,.55) rgba(255,255,255,.08)}
.hca-chord-sheet.is-compact::-webkit-scrollbar{width:10px}.hca-chord-sheet.is-compact::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:99px}.hca-chord-sheet.is-compact::-webkit-scrollbar-thumb{background:linear-gradient(var(--hca-brand),var(--hca-brand2));border-radius:99px}
.hca-chord-sheet.is-compact .hca-sheet-meta{position:sticky;top:0;z-index:5;backdrop-filter:blur(10px);box-shadow:0 8px 20px rgba(0,0,0,.22)}
.hca-result-head .hca-actions.small{align-items:center}.hca-result-head .hca-btn[aria-expanded="false"]{border-color:rgba(246,194,74,.32);color:#ffe8a8}.hca-result-head .hca-btn[aria-expanded="true"]{border-color:rgba(82,208,255,.32);color:#e7f9ff}