.config-screen{background:white;border-radius:16px;padding:40px;box-shadow:0 20px 60px #0000004d;max-width:800px;margin:0 auto}.app-header{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:30px}.app-logo{height:60px;width:auto}.config-screen h1{color:#333;margin:0;text-align:center;font-size:2.5em}.config-section{margin-bottom:40px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-header h2{color:#555;font-size:1.5em}.select-buttons{display:flex;gap:10px}.select-btn{padding:8px 16px;background:#667eea;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.9em;transition:background .2s}.select-btn:hover{background:#5568d3}.checkbox-grid{display:grid;gap:12px}.checkbox-grid.letters-grid{grid-template-columns:repeat(3,1fr);gap:16px}.letter-group{display:flex;flex-direction:column;gap:8px;padding:12px;background:#f8f9fa;border-radius:8px;border:1px solid #e9ecef}.checkbox-list{display:flex;flex-direction:column;gap:12px}.checkbox-list.qualities-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;padding:8px;border-radius:6px;transition:background .2s}.checkbox-label:hover{background:#f5f5f5}.checkbox-label input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:#667eea}.checkbox-label span{font-size:1.1em;color:#333}.action-buttons{display:flex;gap:15px;margin-top:30px}.start-button{flex:1;padding:20px;font-size:1.5em;font-weight:700;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .2s}.list-all-button{flex:1;padding:20px;font-size:1.5em;font-weight:700;background:linear-gradient(135deg,#4ecdc4 0%,#44a08d 100%);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .2s}.start-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px #667eea66}.start-button:disabled{background:#ccc;cursor:not-allowed;transform:none}.list-all-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px #4ecdc466}.list-all-button:disabled{background:#ccc;cursor:not-allowed;transform:none}.warning{text-align:center;color:#e74c3c;margin-top:15px;font-size:.9em}@media (max-width: 768px){.config-screen{padding:20px;margin:10px}.config-screen h1{font-size:1.8em}.app-header{gap:10px;margin-bottom:20px}.app-logo{height:40px}.section-header{flex-direction:column;align-items:flex-start;gap:10px}.section-header h2{font-size:1.2em}.select-buttons{width:100%;justify-content:space-between}.select-btn{flex:1;font-size:.85em;padding:6px 12px}.checkbox-grid.letters-grid{grid-template-columns:1fr;gap:12px}.checkbox-list.qualities-grid{grid-template-columns:1fr}.action-buttons{flex-direction:column;gap:10px}.start-button,.list-all-button{font-size:1.2em;padding:16px}}@media (max-width: 480px){.config-screen{padding:15px;margin:5px;border-radius:12px}.config-screen h1{font-size:1.5em}.app-logo{height:35px}.section-header h2{font-size:1.1em}.checkbox-label span{font-size:1em}.start-button,.list-all-button{font-size:1.1em;padding:14px}}.display-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;gap:50px}.chord-display{background:white;border-radius:20px;padding:60px 100px;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:400px;min-height:300px;gap:30px}.chord-symbol{font-size:8em;font-weight:700;color:#333;text-align:center;font-family:Georgia,serif;letter-spacing:.05em}@media (max-width: 768px){.display-screen{gap:30px;min-height:70vh;padding:20px}.chord-display{padding:30px 20px;min-width:unset;width:100%;max-width:100%;min-height:200px;gap:20px}.chord-symbol{font-size:4em}.notes-label{font-size:1.2em}.notes-list{gap:10px}.note-item{font-size:1.5em;padding:8px 16px}.button-container{width:100%;max-width:100%}.button-group{flex-direction:column;width:100%}.action-button{width:100%;min-width:unset}}@media (max-width: 480px){.chord-symbol{font-size:3em}.chord-display{padding:20px 15px;min-height:180px}.note-item{font-size:1.2em;padding:6px 12px}}.chord-notes{display:flex;flex-direction:column;align-items:center;gap:15px;margin-top:20px}.notes-label{font-size:1.5em;color:#666;font-weight:600}.notes-list{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.note-item{font-size:2em;font-weight:700;color:#667eea;padding:10px 20px;background:#f0f4ff;border-radius:8px;border:2px solid #667eea}.button-container{display:flex;flex-direction:column;gap:15px;align-items:center}.button-group{display:flex;gap:15px;justify-content:center}.action-button{padding:18px 30px;font-size:1.1em;font-weight:700;border:none;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .2s;min-width:140px;flex:0 1 auto}.next-button{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.next-button:hover{transform:translateY(-2px);box-shadow:0 10px 25px #667eea66}.config-button{background:white;color:#667eea;border:2px solid #667eea}.config-button:hover{transform:translateY(-2px);box-shadow:0 10px 25px #ffffff4d;background:#f8f9ff}.check-button{background:#28a745;color:#fff}.check-button:hover{transform:translateY(-2px);box-shadow:0 10px 25px #28a74566;background:#218838}.play-chord-button{background:#ff6b6b;color:#fff}.play-chord-button:hover{transform:translateY(-2px);box-shadow:0 10px 25px #ff6b6b66;background:#ee5a5a}.play-arpeggio-button{background:#4ecdc4;color:#fff}.play-arpeggio-button:hover{transform:translateY(-2px);box-shadow:0 10px 25px #4ecdc466;background:#3db8af}.list-screen{background:white;border-radius:16px;padding:40px;box-shadow:0 20px 60px #0000004d;max-width:1000px;margin:0 auto;max-height:90vh;display:flex;flex-direction:column}.list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-shrink:0}.list-header h1{color:#333;font-size:2em;margin:0}.back-button{padding:12px 24px;font-size:1em;font-weight:700;background:#667eea;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:transform .2s,box-shadow .2s}.back-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.chord-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;overflow-y:auto;flex:1;padding:10px}.chord-item{background:#f8f9fa;border-radius:12px;padding:20px;border:2px solid #e9ecef;transition:transform .2s,box-shadow .2s}.chord-item:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0000001a}.chord-symbol-small{font-size:1.8em;font-weight:700;color:#333;margin-bottom:12px;font-family:Georgia,serif}.chord-notes-small{display:flex;flex-wrap:wrap;gap:8px}.note-small{font-size:1em;font-weight:600;color:#667eea;padding:6px 12px;background:#f0f4ff;border-radius:6px;border:1px solid #667eea}.list-footer{margin-top:20px;padding-top:20px;border-top:2px solid #e9ecef;text-align:center;color:#666;font-size:1.1em;flex-shrink:0}@media (max-width: 768px){.list-screen{padding:20px;margin:10px;max-height:85vh}.list-header{flex-direction:column;align-items:flex-start;gap:15px;margin-bottom:20px}.list-header h1{font-size:1.5em}.back-button{width:100%;padding:10px 20px}.chord-list{grid-template-columns:1fr;gap:15px;padding:5px}.chord-item{padding:15px}.chord-symbol-small{font-size:1.5em}.note-small{font-size:.9em;padding:5px 10px}.list-footer{font-size:1em;margin-top:15px;padding-top:15px}}@media (max-width: 480px){.list-screen{padding:15px;margin:5px;border-radius:12px}.list-header h1,.chord-symbol-small{font-size:1.3em}}.app{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;display:flex;justify-content:center;align-items:center}#root{width:100%;max-width:1200px;padding:20px}@media (max-width: 768px){#root{padding:10px}body{padding:0}}@media (max-width: 480px){#root{padding:5px}}