*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;background-color:#f5f5f5;color:#111}.page{width:min(100% - 2rem,960px);margin:0 auto;padding:1rem;background-color:#fff;border-radius:12px}.page-form{width:min(100% - 2rem,640px)}.auth-page{min-height:calc(100dvh - 2rem);display:grid;place-items:center;padding:1rem}.auth-card{width:min(100%,420px);background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1.2rem;box-shadow:0 10px 28px #11182714}.auth-title{margin:0 0 1rem}.stack-form{display:flex;flex-direction:column;gap:.9rem}.form-field{display:flex;flex-direction:column;gap:.3rem}.form-field label{font-size:.92rem;color:#374151}.text-input{width:100%;border:1px solid #d1d5db;border-radius:8px;padding:.5rem .65rem;font-size:.96rem}.text-input:focus{outline:2px solid #bfdbfe;border-color:#60a5fa}.file-hint{color:#15803d;margin:.25rem 0 0}.button-row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.btn-confirm{background-color:#28a745}.btn-neutral{background-color:#4b5563}.status-error{color:#b00020;margin:0}.auth-switch-text{margin:.2rem 0 0;text-align:center;font-size:.92rem;color:#374151}.auth-switch-link{margin-left:.35rem;background:none;border:none;padding:0;color:#007bff;font:inherit;cursor:pointer;text-decoration:underline}.auth-switch-link:hover,.auth-switch-link:focus-visible{color:#0056b3}.profile-grid{display:grid;grid-template-columns:minmax(100px,auto) 1fr;gap:.6rem 1rem}.profile-label{font-weight:700}.song-meta-field{margin:.3rem 0}.meta-number-input{width:8rem}.header-row{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}.header-actions{display:flex;gap:.5rem;align-items:center}.text-box{background:#f7f7f7;border:1px solid #ddd;border-radius:8px;padding:.75rem 1rem;margin-top:1rem;overflow-x:auto}.line-wrapper{display:flex;align-items:flex-start;gap:1rem;margin-bottom:8px}.line-number{width:2rem;text-align:right;font-family:system-ui,sans-serif;font-size:.9rem;color:#555;-webkit-user-select:none;user-select:none;flex-shrink:0;margin-top:1.25rem}.pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;margin:0;line-height:1.25}.textarea-chords{width:100%;min-height:1.8rem;font-family:inherit;font-size:.95rem;padding:4px 6px;border-radius:4px;border:1px solid #ccc;resize:vertical;background-color:#fff}.chord-hit{color:#d00}.no-margin{margin:0}.primary-button{color:#fff;border:none;border-radius:4px;padding:6px 12px;cursor:pointer;font-weight:500}.primary-button:disabled{opacity:.7;cursor:default}.btn-edit{background-color:#007bff}.btn-save{background-color:#28a745}.btn-export{background-color:#17a2b8}.is-saving{opacity:.7;cursor:default}.song-item-btn{background:none;border:none;padding:0;margin:0;color:inherit;text-align:left;cursor:pointer;font-size:1rem;width:100%;font-family:inherit;min-width:0}.song-item-btn:hover,.song-item-btn:focus{text-decoration:underline;outline:none}.song-list{list-style:none;margin:0;padding:0}.song-item{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid #ececec;padding:.4rem 0}.song-item-content{display:block;white-space:normal;overflow-wrap:anywhere}.song-main-text{font-weight:500;margin-right:.45rem}.song-tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.8rem;font-weight:600;margin-right:.35rem;vertical-align:middle}.song-tag-album{background-color:#fde68a;color:#78350f}.song-tag-bpm{background-color:#bfdbfe;color:#1e3a8a}.song-tag-capo{background-color:#bbf7d0;color:#14532d}.song-item-actions{margin-left:auto;display:flex;gap:.4rem;flex-shrink:0}.song-small-btn{border:none;border-radius:4px;color:#fff;font-size:.75rem;padding:4px 7px;cursor:pointer;white-space:nowrap}.song-small-btn:disabled{opacity:.7;cursor:default}.btn-overwrite{background-color:#0d9488}.btn-delete{background-color:#dc2626}.search-input{width:100%;padding:8px 12px;margin:12px 0;border:1px solid #ccc;border-radius:8px;font-size:1rem;outline:none;transition:border-color .2s}.search-input:focus{border-color:#666}.search-filter-row{display:flex;align-items:flex-start;gap:.5rem;margin:12px 0}.search-filter-row .search-input{margin:0;flex:1;min-width:0}.filter-popup-wrapper{position:relative;flex-shrink:0}.filter-toggle-btn{border:1px solid #9ca3af;background:#fff;color:#111827;border-radius:8px;padding:8px 12px;font-size:.95rem;cursor:pointer}.filter-toggle-btn.has-active-filters{border-color:#0d9488;color:#0f766e;background:#f0fdfa}.filter-popup{position:absolute;top:calc(100% + 8px);right:0;width:min(280px,85vw);background:#fff;border:1px solid #d1d5db;border-radius:10px;box-shadow:0 10px 25px #00000024;padding:.7rem;z-index:20}.filter-label{display:block;font-size:.8rem;color:#4b5563;margin-bottom:.2rem}.filter-control{width:100%;border:1px solid #d1d5db;border-radius:6px;padding:.45rem .55rem;margin-bottom:.55rem;font-size:.92rem}.filter-reset-btn{width:100%;margin-top:.2rem;border:1px solid #9ca3af;border-radius:6px;background:#f9fafb;color:#111827;padding:.45rem .6rem;cursor:pointer}.filter-reset-btn:disabled{opacity:.6;cursor:default}@media(max-width:640px){.search-filter-row{align-items:stretch}.filter-toggle-btn{height:100%;min-width:82px}}.offline-banner{background:#fff4e5;color:#8a4b08;border:1px solid #f0c36d;border-radius:8px;padding:.6rem .8rem;margin-bottom:.8rem}.line-wrapper-word{margin-bottom:1rem;display:block}.line-chords-word{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95rem;margin:0;white-space:pre;line-height:1.2;color:#333;font-weight:600}.line-text-word{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:1rem;margin:0;white-space:pre-wrap;line-height:1.6;word-wrap:break-word}.html-preview-page{width:min(100% - 2rem,1200px)}.html-preview-wrap{display:flex;justify-content:center}.html-preview-frame{width:min(100%,1080px);height:82dvh;border:1px solid #d1d5db;border-radius:12px;background:#fff}@media(max-width:1024px){.page{width:min(100% - 1.5rem,860px)}}@media(max-width:768px){.page,.page-form{width:calc(100% - 1rem);padding:.85rem}.song-item{align-items:flex-start;gap:.5rem}.song-item-actions{margin-left:0}.song-tag{margin-top:.2rem}.line-wrapper{gap:.55rem}.line-number{width:1.5rem}.html-preview-page{width:calc(100% - 1rem)}.html-preview-frame{height:76dvh}}@media(max-width:640px){.auth-page{align-items:flex-start;padding:.75rem}.auth-card{width:100%;padding:1rem}.header-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}.song-item{flex-direction:column}.song-item-actions{width:100%;justify-content:flex-end}.meta-number-input{width:100%;max-width:10rem}.button-row{width:100%}.html-preview-frame{height:72dvh}}.navbar{display:flex;justify-content:space-between;align-items:center;gap:.8rem;background-color:#1e1e1e;color:#fff;padding:10px 20px}.navbar-left{display:flex;align-items:center;gap:20px}.navbar-logo{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.6rem;line-height:1}.navbar-logo-icon{width:40px;height:40px;border-radius:999px;display:block}.navbar-logo-text{display:inline-flex;flex-direction:column;gap:.12rem}.navbar-logo-campfire{color:#ff8c2a;font-size:1rem;font-weight:800;letter-spacing:.02em}.navbar-logo-songs{color:#fff;font-size:.88rem;font-weight:600;letter-spacing:.03em}.navbar-link{color:#fff;text-decoration:none;font-size:16px;white-space:nowrap}.navbar-link:hover,.navbar-logo:hover{text-decoration:underline}.navbar-logo:hover{text-decoration:none}.navbar-logout{background-color:#c00;color:#fff;border:none;border-radius:4px;padding:6px 12px;cursor:pointer;font-weight:500;transition:background-color .2s ease}.navbar-logout:hover{background-color:#900}.connection-indicator{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .6rem;border-radius:999px;font-size:.85rem;font-weight:600;border:1px solid transparent}.connection-dot{width:9px;height:9px;border-radius:999px;display:inline-block}.connection-indicator.is-online{background:#10381f;color:#b7f7cb;border-color:#1e7a3f}.connection-indicator.is-online .connection-dot{background:#34d399;box-shadow:0 0 0 3px #34d39933}.connection-indicator.is-offline{background:#472612;color:#ffd9bb;border-color:#a65a2b}.connection-indicator.is-offline .connection-dot{background:#fb923c;box-shadow:0 0 0 3px #fb923c33}@media(max-width:760px){.navbar{flex-wrap:wrap;gap:.6rem;padding:10px 14px}.navbar-left{width:100%;justify-content:space-between;gap:.8rem}.navbar-logo-icon{width:34px;height:34px}.navbar-logo-campfire{font-size:.94rem}.navbar-logo-songs{font-size:.82rem}.connection-indicator{order:3;width:100%;justify-content:center}.navbar-logout{width:100%}}@media(max-width:480px){.navbar-left{align-items:center}.navbar-link{font-size:.92rem}}