.guitar-chord-finder{max-width:1400px;margin:0 auto;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}.gcf-main{display:flex;flex-direction:column;gap:20px}.chord-input-section{background:rgba(255,255,255,.95);border-radius:15px;padding:20px 30px;box-shadow:0 10px 30px rgba(0,0,0,.2);margin-bottom:10px}.chord-input-container{display:flex;gap:15px;align-items:center;justify-content:center}.chord-input-field{flex:1;max-width:400px;padding:12px 20px;border:2px solid #e0e0e0;border-radius:25px;font-size:16px;font-family:inherit;background:#fff;transition:all .3s ease;box-shadow:0 2px 10px rgba(0,0,0,.1)}.chord-input-field:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.chord-input-field::placeholder{color:#999;font-style:italic}.find-btn{background:linear-gradient(135deg,#27ae60 0%,#2ecc71 100%);white-space:nowrap}.result-section{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.95);border-radius:15px;padding:20px 30px;box-shadow:0 10px 30px rgba(0,0,0,.2);margin-bottom:10px}.chord-result-text{flex:1;margin-right:20px}.chord-result-text.chord-detected{color:#27ae60;animation:chordDetected .5s ease-in-out}.fretboard-container{background:rgba(255,255,255,.95);border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.2)}.fretboard{position:relative;background:linear-gradient(135deg,#8b4513 0%,sienna 50%,#8b4513 100%);border-radius:10px;box-shadow:inset 0 0 30px rgba(0,0,0,.4),0 8px 25px rgba(0,0,0,.3);border:3px solid #654321}.fretboard-title{text-align:center;font-size:1.5em;font-weight:700;color:#2c3e50;margin-bottom:20px;text-shadow:1px 1px 2px rgba(255,255,255,.8)}.fretboard-grid{position:relative;background:linear-gradient(135deg,#d2691e 0%,peru 50%,#d2691e 100%);border-radius:8px;padding:15px;box-shadow:inset 0 0 20px rgba(0,0,0,.3),0 4px 15px rgba(0,0,0,.2);border:2px solid #8b4513;display:flex;flex-direction:column}.fretboard-header{display:grid;grid-template-columns:repeat(14,1fr);background:linear-gradient(135deg,#2c3e50 0%,#34495e 100%);color:#fff;border-radius:0 0 5px 5px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.3);order:2}@media (max-width:480px){.fretboard-header{grid-template-columns:repeat(6,1fr)}}@media (min-width:481px) and (max-width:768px){.fretboard-header{grid-template-columns:repeat(8,1fr)}}.fret-header-cell{padding:12px 5px;text-align:center;font-weight:700;font-size:14px;border-right:1px solid #34495e;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.fret-header-cell:last-child{border-right:none}.fretboard-strings{display:contents;order:1}.guitar-string-row{display:grid;grid-template-columns:repeat(14,1fr);position:relative}@media (max-width:480px){.guitar-string-row{grid-template-columns:repeat(6,1fr)}}@media (min-width:481px) and (max-width:768px){.guitar-string-row{grid-template-columns:repeat(8,1fr)}}.guitar-string-row:nth-child(1):before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:linear-gradient(90deg,silver 0%,#e8e8e8 50%,silver 100%);box-shadow:0 1px 2px rgba(0,0,0,.2);z-index:1}.guitar-string-row:nth-child(2):before{content:"";position:absolute;top:50%;left:0;right:0;height:1.5px;background:linear-gradient(90deg,silver 0%,#e8e8e8 50%,silver 100%);box-shadow:0 1px 2px rgba(0,0,0,.2);z-index:1}.guitar-string-row:nth-child(3):before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;background:linear-gradient(90deg,silver 0%,#e8e8e8 50%,silver 100%);box-shadow:0 1px 2px rgba(0,0,0,.25);z-index:1}.guitar-string-row:nth-child(4):before{content:"";position:absolute;top:50%;left:0;right:0;height:2.5px;background:linear-gradient(90deg,silver 0%,#e8e8e8 50%,silver 100%);box-shadow:0 1px 3px rgba(0,0,0,.3);z-index:1}.guitar-string-row:nth-child(5):before{content:"";position:absolute;top:50%;left:0;right:0;height:3px;background:linear-gradient(90deg,silver 0%,#e8e8e8 50%,silver 100%);box-shadow:0 1px 3px rgba(0,0,0,.35);z-index:1}.guitar-string-row:nth-child(6):before{content:"";position:absolute;top:50%;left:0;right:0;height:3.5px;background:linear-gradient(90deg,silver 0%,#e8e8e8 50%,silver 100%);box-shadow:0 1px 3px rgba(0,0,0,.4);z-index:1}.fret-cell{position:relative;min-height:50px;border-right:2px solid #654321;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;background:rgba(255,255,255,.05);z-index:2}.fret-cell:last-child{border-right:none}.fret-cell:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 10px rgba(255,255,255,.2)}.fret-cell.selected{background:rgba(39,174,96,.2)}.fret-cell.selected:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;background:radial-gradient(circle,#27ae60 0%,#2ecc71 70%,#27ae60 100%);border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,255,255,.3);z-index:3}.fret-cell.selected:after{content:attr(data-note);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.8);z-index:4;pointer-events:none}.fret-cell.open.selected{background:rgba(39,174,96,.2)}.fret-cell.open.selected:before{background:radial-gradient(circle,#27ae60 0%,#2ecc71 70%,#27ae60 100%)}.fret-cell.open{background:rgba(243,156,18,.2)}.fret-cell.open:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;background:radial-gradient(circle,#f39c12 0%,#f1c40f 70%,#f39c12 100%);border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,255,255,.3);z-index:3}.fret-cell.open:after{content:attr(data-note);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.8);z-index:4;pointer-events:none}.fret-cell.selected:hover{background:rgba(39,174,96,.2) !important;box-shadow:none !important;transform:none !important}.fret-cell.muted{background:rgba(244,67,54,.2)}.fret-cell.muted:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;background:#f44336;border-radius:50%;z-index:1}.fret-cell.muted:after{content:"✕";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:700;color:#fff;z-index:2}.fret-cell.open:hover{background:rgba(243,156,18,.2) !important;box-shadow:none !important;transform:none !important}.guitar-string-row .fret-cell:first-child{border-right:4px solid #333;background:rgba(255,255,255,.1);box-shadow:inset 2px 0 5px rgba(0,0,0,.3)}.fretboard-grid:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;pointer-events:none;z-index:1}.fret-marker-3{position:absolute;top:calc(50% - 18px);left:calc((100% / 14) * 3 + (100% / 14) / 2);transform:translate(-50%,-50%);width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.8);z-index:1}.fret-marker-5{position:absolute;top:calc(50% - 18px);left:calc((100% / 14) * 5 + (100% / 14) / 2);transform:translate(-50%,-50%);width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.8);z-index:1}.fret-marker-7{position:absolute;top:calc(50% - 18px);left:calc((100% / 14) * 7 + (100% / 14) / 2);transform:translate(-50%,-50%);width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.8);z-index:1}@media (max-width:480px){.fret-marker-3{left:calc((100% / 6) * 3 + (100% / 6) / 2)}.fret-marker-5{left:calc((100% / 6) * 5 + (100% / 6) / 2)}}@media (min-width:481px) and (max-width:768px){.fret-marker-3{left:calc((100% / 8) * 3 + (100% / 8) / 2)}.fret-marker-5{left:calc((100% / 8) * 5 + (100% / 8) / 2)}.fret-marker-7{left:calc((100% / 8) * 7 + (100% / 8) / 2)}}.fret-marker-9{position:absolute;top:calc(50% - 18px);left:calc((100% / 14) * 9 + (100% / 14) / 2);transform:translate(-50%,-50%);width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.8);z-index:1}.fret-marker-12{position:absolute;top:calc(50% - 68px);left:calc((100% / 14) * 12 + (100% / 14) / 2);transform:translate(-50%,-50%);width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.8);z-index:1}.fret-marker-12-bottom{position:absolute;top:calc(50% + 32px);left:calc((100% / 14) * 12 + (100% / 14) / 2);transform:translate(-50%,-50%);width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.8);z-index:1}.gcf-btn{padding:12px 24px;border:none;border-radius:25px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-size:16px;font-weight:400;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px rgba(0,0,0,.2);white-space:nowrap}.gcf-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}.gcf-btn:active{transform:translateY(0)}@media (max-width:1200px){.gcf-main{gap:15px}}@media (max-width:768px){.chord-input-section{padding:15px 20px}.chord-input-container{flex-direction:column;gap:12px}.chord-input-field{max-width:100%;font-size:14px;padding:10px 16px}.result-section{flex-direction:column;gap:15px;text-align:center}.chord-result-text{margin-right:0;font-size:1.2em}.fretboard{padding:15px}.fret-cell{min-height:40px}.fret-header-cell{font-size:12px;padding:8px 3px}}@media (max-width:480px){.guitar-chord-finder{padding:15px}.chord-input-section{padding:12px 15px}.chord-input-field{font-size:13px;padding:8px 12px}.result-section{padding:15px 20px}.chord-result-text{font-size:1.1em}.fret-cell{min-height:35px}.fret-header-cell{font-size:11px;padding:6px 2px}}@keyframes chordDetected{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}.chord-detected{animation:chordDetected .5s ease-in-out}.loading{opacity:.6;pointer-events:none}