.home-screen{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#000,#1a1a2e)}.home-content{text-align:center;width:90%;max-width:600px}.home-image-container{margin-bottom:60px}.app-logo{max-width:400px;width:90%;height:auto;margin-bottom:10px}.app-subtitle{font-size:18px;color:#888;margin-bottom:15px}.connection-status{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#999;margin-top:15px}.status-indicator{font-weight:600}.status-indicator.online{color:#0c6}.status-indicator.offline{color:#f66}.last-sync{font-size:12px;color:#666}.home-buttons{display:flex;flex-direction:column;gap:20px}.home-button{background:linear-gradient(to bottom,#06f,#04c);color:#fff;border:none;padding:25px;border-radius:15px;font-size:24px;font-weight:700;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:15px;box-shadow:0 4px 15px #0066ff4d}.home-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0066ff80}.home-button:active{transform:translateY(0)}.button-icon{font-size:32px}.settings-content{max-width:800px;margin:0 auto}.settings-section{background:#1a1a1a;padding:25px;margin-bottom:20px;border-radius:12px;border:2px solid #333}.settings-section h3{margin-top:0;margin-bottom:10px;color:#06f;font-size:22px}.settings-description{color:#888;margin-bottom:20px;line-height:1.5}.storage-options{display:flex;gap:15px;flex-wrap:wrap;margin-bottom:20px}.storage-button{flex:1;min-width:200px;background:#2a2a2a;border:2px solid #333;color:#fff;padding:20px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:15px;transition:all .3s}.storage-button:hover{border-color:#06f;background:#333}.storage-button.active{border-color:#06f;background:#036}.storage-icon{font-size:32px}.storage-name{font-size:18px;font-weight:700;margin-bottom:5px}.storage-status{font-size:14px;color:#888}.storage-button.active .storage-status{color:#0f8}.settings-button{background:#06f;color:#fff;border:none;padding:15px 30px;border-radius:8px;font-size:16px;cursor:pointer;transition:all .3s}.settings-button:hover{background:#05d}.disconnect-button{background:#f44;color:#fff;border:none;padding:15px 30px;border-radius:8px;font-size:16px;cursor:pointer;transition:all .3s;width:100%}.disconnect-button:hover{background:#d33}.info-box{background:#2a2a2a;padding:20px;border-radius:8px;border-left:4px solid #0066ff}.info-box p{margin:10px 0;line-height:1.6}.info-box strong{color:#06f}.storage-button:disabled{opacity:.5;cursor:not-allowed}.storage-button:disabled:hover{border-color:#333;background:#2a2a2a}.offline-warning{background:#f60;color:#fff;padding:15px;border-radius:8px;margin-top:15px;text-align:center;font-weight:600}.sync-button{width:100%}.sync-button:disabled{opacity:.5;cursor:not-allowed}.sync-message{margin-top:15px;padding:15px;border-radius:8px;text-align:center;font-weight:600;animation:fadeIn .3s ease-in}.sync-message.success{background:#0f8;color:#000}.sync-message.error{background:#f44;color:#fff}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0}.setting-info strong{display:block;color:#fff;font-size:16px;margin-bottom:5px}.setting-hint{color:#888;font-size:14px;margin:0}.toggle-switch{position:relative;display:inline-block;width:60px;height:34px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#555;transition:.4s;border-radius:34px}.toggle-slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.toggle-slider{background-color:#06f}input:checked+.toggle-slider:before{transform:translate(26px)}.folder-input-group{display:flex;gap:10px;margin-bottom:10px}.folder-input{flex:1;background:#2a2a2a;border:2px solid #333;color:#fff;padding:12px 16px;border-radius:8px;font-size:16px;font-family:monospace}.folder-input:focus{outline:none;border-color:#06f}.save-folder-button{min-width:100px}.song-viewer{width:100%;height:100%;display:flex;flex-direction:column;background:#000}.song-header{padding:20px;background:#1a1a1a;border-bottom:2px solid #333;display:flex;align-items:center;justify-content:space-between}.song-info{flex:1;text-align:center}.song-info h2{margin:0;font-size:24px}.song-position{color:#888;font-size:14px;margin-left:10px}.text-size-control{background:#2a2a2a;padding:10px 20px;border-radius:8px;font-size:14px;color:#888;display:flex;align-items:center;gap:10px}.size-button{background:#06f;color:#fff;border:none;width:32px;height:32px;border-radius:6px;font-size:20px;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;line-height:1}.size-button:hover:not(:disabled){background:#05d}.size-button:disabled{background:#333;color:#666;cursor:not-allowed}.size-display{min-width:70px;text-align:center}.size-display.clickable{cursor:pointer;padding:4px 8px;border-radius:4px;transition:background .2s}.size-display.clickable:hover{background:#444}.size-input{width:70px;padding:4px 8px;background:#444;color:#fff;border:2px solid #0066ff;border-radius:4px;font-size:14px;text-align:center}.size-input:focus{outline:none;border-color:#08f}.saving-indicator{font-size:16px;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.song-content{flex:1;overflow-y:auto;padding:40px 10px;background:#000;scroll-behavior:smooth}.song-text{font-family:Helvetica,Arial,sans-serif;white-space:pre-wrap;word-wrap:break-word;margin:0;color:#fff;line-height:1.6}.song-text-editor{font-family:Helvetica,Arial,sans-serif;white-space:pre-wrap;word-wrap:break-word;color:#fff;margin:0;padding:10px;width:100%;height:100%;background:#1a1a1a;border:2px solid #0066ff;resize:none;box-sizing:border-box}.song-text-editor:focus{outline:none;border-color:#08f}.song-navigation{padding:20px;background:#1a1a1a;border-top:2px solid #333;display:flex;gap:20px;justify-content:center}.nav-button{background:#06f;color:#fff;border:none;padding:15px 30px;border-radius:8px;font-size:16px;cursor:pointer;transition:all .3s}.nav-button:hover:not(:disabled){background:#05d}.nav-button:disabled{background:#333;color:#666;cursor:not-allowed}.keyboard-hint{padding:10px;background:#0a0a0a;text-align:center;color:#666;font-size:12px}.metronome-dot{position:fixed;top:95px;right:22px;width:10vw;height:10vw;max-width:60px;max-height:60px;min-width:30px;min-height:30px;background:#fff;border-radius:50%;z-index:1000;opacity:0;transition:opacity .1s ease-in-out;pointer-events:none}.metronome-dot.pulse{opacity:1}.app{width:100%;height:100%;background-color:#000;color:#fff;position:relative}.sync-banner{position:fixed;top:0;left:0;right:0;padding:10px 20px;text-align:center;font-size:14px;font-weight:600;z-index:1000;animation:slideDown .3s ease}.sync-banner.syncing{background:#06f;color:#fff}.sync-banner.synced{background:#0c6;color:#fff}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.screen{width:100%;height:100%;display:flex;flex-direction:column}.header{padding:20px;background-color:#1a1a1a;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #333}.back-button{background:#444;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:16px}.back-button:hover{background:#555}.content{flex:1;overflow-y:auto;padding:20px}.list-item{background:#1a1a1a;padding:20px;margin:10px 0;border-radius:8px;cursor:pointer;border:2px solid #333;transition:all .3s}.list-item:hover{background:#2a2a2a;border-color:#06f}.list-item h3{margin:0;font-size:18px}.loading{text-align:center;padding:40px;font-size:18px;color:#888}.error{text-align:center;padding:40px;font-size:18px;color:#f44}*{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-color:#000;color:#fff;overflow:hidden}#root{width:100vw;height:100vh}