/* Piano Widget v6 Global Styles */
.piano-widget-wrap * { margin: 0; padding: 0; box-sizing: border-box; }
.piano-widget-wrap { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: transparent; color: #1a1a1a; padding: 0; margin: 2rem 0 0; }
.piano-widget-wrap .piano-widget { max-width: 100%; margin: 0 auto; text-align: center; }
.piano-widget-wrap .piano-keyboard { position: relative; height: clamp(180px, 22vw, 280px); width: fit-content; min-width: min-content; margin: 0 auto; }
.piano-widget-wrap .white-keys { display: flex; position: relative; height: 100%; }
.piano-widget-wrap .white-key { width: clamp(36px, 5.5vw, 64px); height: 100%; background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%); border: 2px solid #333; border-top: 2px solid #333; border-radius: 0 0 0.35rem 0.35rem; margin-right: 1px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 0.5rem; gap: 0.3rem; transition: all 0.1s ease; position: relative; user-select: none; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.15); }
.piano-widget-wrap .white-key .fingering { font-size: 0.92rem; font-weight: 700; color: #000000; line-height: 1; }
.piano-widget-wrap .white-key .note-label { font-size: 1.35rem; font-weight: 700; color: #374151; display: flex; align-items: baseline; gap: 0.15rem; }
.piano-widget-wrap .white-key .note-label .octave-number { font-size: 0.82rem; font-weight: 600; color: #6b7280; }
.piano-widget-wrap .white-key.highlight { background: linear-gradient(to bottom, #fca5a5 0%, #f87171 100%); border-color: #991b1b; }
.piano-widget-wrap .white-key.highlight .note-label { color: #b91c1c; }
.piano-widget-wrap .white-key.highlight .note-label .octave-number { color: #991b1b; }
.piano-widget-wrap .white-key.highlight .fingering { color: #7f1d1d; }
.piano-widget-wrap .white-key.highlight:hover { background: linear-gradient(to bottom, #fca5a5 0%, #ef4444 100%); }
.piano-widget-wrap .white-key:hover { background: linear-gradient(to bottom, #fafafa 0%, #efefef 100%); }
.piano-widget-wrap .white-key:last-child { margin-right: 0; }
.piano-widget-wrap .white-key.active { background: linear-gradient(to bottom, #e5e5e5 0%, #d5d5d5 100%) !important; box-shadow: inset 0 3px 6px rgba(0,0,0,0.25) !important; transform: scale(0.98); border-color: #999 !important; }
.piano-widget-wrap .white-key.active .note-label, .piano-widget-wrap .white-key.active .note-label .octave-number, .piano-widget-wrap .white-key.active .fingering { color: #4b5563 !important; }
.piano-widget-wrap .white-key.highlight.active { background: linear-gradient(to bottom, #22c55e 0%, #16a34a 100%) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 0 20px rgba(34,197,94,0.6) !important; transform: scale(0.98); border-color: #15803d !important; }
.piano-widget-wrap .white-key.highlight.active .note-label, .piano-widget-wrap .white-key.highlight.active .note-label .octave-number, .piano-widget-wrap .white-key.highlight.active .fingering { color: white !important; }
.piano-widget-wrap .black-keys { position: absolute; top: 0; left: 0; width: 100%; height: 60%; display: flex; pointer-events: none; }
.piano-widget-wrap .black-key-spacer { width: clamp(36px, 5.5vw, 64px); margin-right: 1px; }
.piano-widget-wrap .black-key { position: absolute; width: clamp(24px, 3.4vw, 41px); height: 100%; background: linear-gradient(to bottom, #2d2d2d 0%, #1a1a1a 100%); border: 2px solid #000; border-top: 2px solid #333; border-radius: 0 0 0.35rem 0.35rem; cursor: pointer; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: .6rem; gap: 0.3rem; transition: all 0.1s ease; z-index: 10; user-select: none; box-shadow: 0 4px 6px rgba(0,0,0,0.4), inset 0 -1px 3px rgba(255,255,255,0.1); }
.piano-widget-wrap .black-key .note-label { font-size: 0.9rem; font-weight: 600; color: white; white-space: nowrap; line-height: 1.3; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.piano-widget-wrap .black-key .note-label .octave-number { font-size: 0.68rem; font-weight: 500; color: #d1d5db; display: none; }
.piano-widget-wrap .black-key .fingering { font-size: 0.85rem; font-weight: 700; color: #ffffff; line-height: 1; }
.piano-widget-wrap .black-key.highlight { background: linear-gradient(to bottom, #dc2626 0%, #991b1b 100%); border-color: #7f1d1d; }
.piano-widget-wrap .black-key.highlight:hover { background: linear-gradient(to bottom, #ef4444 0%, #b91c1c 100%); }
.piano-widget-wrap .black-key:hover { background: linear-gradient(to bottom, #3d3d3d 0%, #2a2a2a 100%); }
.piano-widget-wrap .black-key.active .note-label, .piano-widget-wrap .black-key.active .note-label .octave-number, .piano-widget-wrap .black-key.active .fingering { color: white !important; }
.piano-widget-wrap .black-key.active { background: linear-gradient(to bottom, #525252 0%, #3d3d3d 100%) !important; box-shadow: 0 4px 6px rgba(0,0,0,0.4), inset 0 2px 4px rgba(0,0,0,0.3) !important; transform: scale(0.98); border-color: #262626 !important; }
.piano-widget-wrap .black-key.highlight.active { background: linear-gradient(to bottom, #16a34a 0%, #15803d 100%) !important; box-shadow: 0 4px 6px rgba(0,0,0,0.4), 0 0 20px rgba(34,197,94,0.7) !important; transform: scale(0.98); border-color: #166534 !important; }
.piano-widget-wrap .white-key.overlay-I { background: linear-gradient(to bottom, #bfdbfe 0%, #93c5fd 100%) !important; border-color: #2563eb !important; }
.piano-widget-wrap .black-key.overlay-I { background: linear-gradient(to bottom, #1d4ed8 0%, #1e40af 100%) !important; border-color: #1e3a8a !important; }
.piano-widget-wrap .white-key.overlay-IV { background: linear-gradient(to bottom, #e9d5ff 0%, #d8b4fe 100%) !important; border-color: #7c3aed !important; }
.piano-widget-wrap .black-key.overlay-IV { background: linear-gradient(to bottom, #6d28d9 0%, #5b21b6 100%) !important; border-color: #4c1d95 !important; }
.piano-widget-wrap .white-key.overlay-V { background: linear-gradient(to bottom, #fed7aa 0%, #fdba74 100%) !important; border-color: #ea580c !important; }
.piano-widget-wrap .black-key.overlay-V { background: linear-gradient(to bottom, #c2410c 0%, #9a3412 100%) !important; border-color: #7c2d12 !important; }
.piano-widget-wrap .white-key.overlay-scale { background: linear-gradient(to bottom, #bbf7d0 0%, #86efac 100%) !important; border-color: #16a34a !important; }
.piano-widget-wrap .black-key.overlay-scale { background: linear-gradient(to bottom, #166534 0%, #14532d 100%) !important; border-color: #052e16 !important; }
.piano-widget-wrap .play-along-bar { display: flex; align-items: center; justify-content: space-between; background: #1d4ed8; color: white; padding: 0.4rem 0.9rem; border-radius: 6px; margin: 0.4rem auto 0; max-width: fit-content; min-width: 260px; font-size: 0.8rem; font-weight: 600; gap: 1rem; }
.piano-widget-wrap .play-along-stop-btn { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); color: white; border-radius: 4px; padding: 0.15rem 0.5rem; font-size: 0.7rem; cursor: pointer; font-family: 'Outfit', sans-serif; transition: background 0.15s; }
.piano-widget-wrap .play-along-stop-btn:hover { background: rgba(255,255,255,0.35); }
@keyframes pulse-next { 0%,100% { box-shadow: 0 0 0 0 rgba(250,204,21,0.7); } 50% { box-shadow: 0 0 0 6px rgba(250,204,21,0); } }
.piano-widget-wrap .white-key.play-along-next { background: linear-gradient(to bottom, #fef08a 0%, #facc15 100%) !important; border-color: #ca8a04 !important; animation: pulse-next 0.8s ease-in-out infinite; }
.piano-widget-wrap .white-key.play-along-next .note-name, .piano-widget-wrap .white-key.play-along-next .octave-number, .piano-widget-wrap .white-key.play-along-next .fingering { color: #78350f !important; }
.piano-widget-wrap .black-key.play-along-next { background: linear-gradient(to bottom, #ca8a04 0%, #a16207 100%) !important; border-color: #713f12 !important; animation: pulse-next 0.8s ease-in-out infinite; }
.piano-widget-wrap .black-key.play-along-next .note-name, .piano-widget-wrap .black-key.play-along-next .octave-number, .piano-widget-wrap .black-key.play-along-next .fingering { color: #fef9c3 !important; }
.piano-widget-wrap .white-key.play-along-correct { background: linear-gradient(to bottom, #bbf7d0 0%, #4ade80 100%) !important; border-color: #16a34a !important; }
.piano-widget-wrap .white-key.play-along-correct .note-name, .piano-widget-wrap .white-key.play-along-correct .octave-number, .piano-widget-wrap .white-key.play-along-correct .fingering { color: #ffffff !important; }
.piano-widget-wrap .black-key.play-along-correct { background: linear-gradient(to bottom, #16a34a 0%, #15803d 100%) !important; border-color: #166534 !important; }
.piano-widget-wrap .black-key.play-along-correct .note-name, .piano-widget-wrap .black-key.play-along-correct .octave-number, .piano-widget-wrap .black-key.play-along-correct .fingering { color: #ffffff !important; }
.piano-widget-wrap .white-key.play-along-wrong { background: linear-gradient(to bottom, #fecaca 0%, #f87171 100%) !important; border-color: #dc2626 !important; }
.piano-widget-wrap .white-key.play-along-wrong .note-name, .piano-widget-wrap .white-key.play-along-wrong .octave-number, .piano-widget-wrap .white-key.play-along-wrong .fingering { color: #ffffff !important; }
.piano-widget-wrap .black-key.play-along-wrong { background: linear-gradient(to bottom, #dc2626 0%, #b91c1c 100%) !important; border-color: #7f1d1d !important; }
.piano-widget-wrap .black-key.play-along-wrong .note-name, .piano-widget-wrap .black-key.play-along-wrong .octave-number, .piano-widget-wrap .black-key.play-along-wrong .fingering { color: #ffffff !important; }
.piano-widget-wrap .piano-info { margin-top: 0.1rem; font-size: 0.875rem; color: #4b5563; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.piano-widget-wrap .hidden { display: none !important; }
.piano-widget-wrap .controls-row { width: 100%; display: flex; flex-direction: column; gap: 0.25rem; }
.piano-widget-wrap .toggle-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; align-items: flex-end; }
.piano-widget-wrap .toggle-group { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-height: 3rem; justify-content: flex-end; }
.piano-widget-wrap .toggle-group label { font-size: 0.55rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; }
.piano-widget-wrap .toggle-switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.piano-widget-wrap .toggle-switch input { opacity: 0; width: 0; height: 0; }
.piano-widget-wrap .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #d1d5db; transition: 0.3s; border-radius: 20px; }
.piano-widget-wrap .toggle-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; }
.piano-widget-wrap input:checked + .toggle-slider { background-color: #4b5563; }
.piano-widget-wrap input:checked + .toggle-slider:before { transform: translateX(20px); }
.piano-widget-wrap .accidental-toggle { display: flex; gap: 0.15rem; background: #e5e7eb; border-radius: 4px; padding: 2px; }
.piano-widget-wrap .accidental-toggle button { padding: 0.2rem 0.4rem; font-size: 0.6rem; font-weight: 600; border: none; background: transparent; color: #6b7280; cursor: pointer; border-radius: 3px; transition: all 0.2s; font-family: 'Outfit', sans-serif; }
.piano-widget-wrap .accidental-toggle button.active { background: #4b5563; color: white; }
.piano-widget-wrap .accidental-toggle button:hover:not(.active) { background: #d1d5db; }
.piano-widget-wrap .bpm-slider { width: 80px; height: 4px; cursor: pointer; accent-color: #b71c1c; }
.piano-widget-wrap .bpm-display { font-weight: 700; color: #b71c1c; }
.piano-widget-wrap .play-chord-btn { background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%); color: white; border: none; padding: 0.35rem 1rem; border-radius: 6px; font-family: 'Outfit', sans-serif; font-size: 0.75rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 6px rgba(46,125,50,0.35); transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.4rem; }
.piano-widget-wrap .play-chord-btn:hover { background: linear-gradient(180deg, #388e3c 0%, #2e7d32 100%); box-shadow: 0 4px 10px rgba(56,142,60,0.45); transform: translateY(-1px); }
.piano-widget-wrap .play-chord-btn:active { transform: translateY(0); }
.piano-widget-wrap .play-along-btn { background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%); color: white; border: none; padding: 0.35rem 0.85rem; border-radius: 6px; font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 6px rgba(29,78,216,0.3); transition: all 0.2s ease; }
.piano-widget-wrap .play-along-btn:hover { background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%); transform: translateY(-1px); }
.piano-widget-wrap .inversion-toggle { display: flex; justify-content: center; width: 100%; margin-bottom: 0.75rem; }
.piano-widget-wrap .inv-btn { padding: 0.2rem 0.6rem; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-family: 'Outfit', sans-serif; border: 1.5px solid #d1d5db; border-radius: 0; background: #fff; color: #6b7280; cursor: pointer; transition: all 0.15s ease; line-height: 1.4; white-space: nowrap; }
.piano-widget-wrap .inv-btn:first-child { border-radius: 4px 0 0 4px; border-right: none; }
.piano-widget-wrap .inv-btn:nth-child(2) { border-right: none; }
.piano-widget-wrap .inv-btn:last-child { border-radius: 0 4px 4px 0; }
.piano-widget-wrap .inv-btn.active { background: #b71c1c; border-color: #b71c1c; color: #fff; }
.piano-widget-wrap .inv-btn:not(.active):hover { background: #f3f4f6; color: #374151; border-color: #9ca3af; }
.piano-widget-wrap .play-buttons-row { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; }
.piano-widget-wrap .settings-accordion { width: 100%; display: flex; flex-direction: column; align-items: center; }
.piano-widget-wrap .settings-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; width: auto; background: transparent; border: none; border-radius: 4px; padding: 0.2rem 0.5rem; font-family: 'Outfit', sans-serif; font-size: 0.58rem; font-weight: 500; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: color 0.2s ease; user-select: none; }
.piano-widget-wrap .settings-toggle:hover { color: #6b7280; }
.piano-widget-wrap .settings-toggle.open { color: #4b5563; }
.piano-widget-wrap .settings-chevron { transition: transform 0.25s ease; flex-shrink: 0; }
.piano-widget-wrap .settings-toggle.open .settings-chevron { transform: rotate(180deg); }
.piano-widget-wrap .settings-panel { overflow: hidden; max-height: 0; transition: max-height 0.3s ease, padding 0.3s ease; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; margin-top: 0.2rem; padding: 0; }
.piano-widget-wrap .settings-panel.open { max-height: 500px; padding: 0.6rem 0.5rem 0.5rem; }
.piano-widget-wrap .hand-toggle { display: flex; gap: 0; background: #e5e7eb; border-radius: 4px; padding: 2px; }
.piano-widget-wrap .hand-btn { padding: 0.2rem 0.55rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; border: none; background: transparent; color: #6b7280; cursor: pointer; border-radius: 3px; transition: all 0.15s; font-family: 'Outfit', sans-serif; }
.piano-widget-wrap .hand-btn.active { background: #b71c1c; color: white; }
.piano-widget-wrap .hand-btn:not(.active):hover { background: #d1d5db; color: #374151; }
.piano-widget-wrap .volume-slider { width: 80px; height: 4px; cursor: pointer; accent-color: #2e7d32; }
.piano-widget-wrap .volume-display { font-weight: 700; color: #2e7d32; }
@media (max-width: 768px) {
  .piano-widget-wrap .piano-keyboard { height: clamp(130px, 24vw, 200px); }
  .piano-widget-wrap .piano-info { margin-top: 0.2rem; gap: 0.3rem; }
  .piano-widget-wrap .controls-row { gap: 0.3rem; }
  .piano-widget-wrap .toggle-controls { gap: 0.35rem; }
  .piano-widget-wrap .toggle-group label { font-size: 0.5rem; }
  .piano-widget-wrap .white-key { width: clamp(23px, 3.95vw, 41px); border-radius: 0 0 0.15rem 0.15rem; border: 1px solid #333; border-top: 1px solid #333; padding-bottom: 0.15rem; gap: 0.05rem; }
  .piano-widget-wrap .black-key { width: clamp(15px, 2.67vw, 27px); border-radius: 0 0 0.1rem 0.1rem; border: 1px solid #000; border-top: 1px solid #333; padding-bottom: .3rem; gap: 0.25rem; }
  .piano-widget-wrap .black-key-spacer { width: clamp(23px, 3.95vw, 41px); }
  .piano-widget-wrap .white-key .fingering { font-size: 0.72rem; }
  .piano-widget-wrap .white-key .note-label { font-size: 0.7rem; gap: 0.05rem; }
  .piano-widget-wrap .white-key .note-label .octave-number { font-size: 0.62rem; }
  .piano-widget-wrap .black-key .fingering { font-size: 0.65rem; }
  .piano-widget-wrap .black-key .note-label { font-size: 0.4rem; }
  .piano-widget-wrap .black-key .note-label .octave-number { font-size: 0.55rem; }
  .piano-widget-wrap .accidental-toggle button { padding: 0.15rem 0.3rem; font-size: 0.55rem; }
  .piano-widget-wrap .play-chord-btn { padding: 0.3rem 0.75rem; font-size: 0.7rem; gap: 0.3rem; }
  .piano-widget-wrap .play-along-btn { padding: 0.25rem 0.6rem; font-size: 0.65rem; }
  .piano-widget-wrap .bpm-slider { width: 60px; }
  .piano-widget-wrap .inv-btn { padding: 0.15rem 0.45rem; font-size: 0.5rem; border-radius: 0; }
  .piano-widget-wrap .inv-btn:first-child { border-radius: 4px 0 0 4px; border-right: none; }
  .piano-widget-wrap .inv-btn:nth-child(2) { border-right: none; }
  .piano-widget-wrap .inv-btn:last-child { border-radius: 0 4px 4px 0; }
  .piano-widget-wrap .play-along-bar { font-size: 0.7rem; min-width: 200px; padding: 0.3rem 0.6rem; }
}