*,*:before,*:after{box-sizing:border-box}:root{--bg-app: #f5f5f5;--text-main: #111111;--surface: #ffffff;--surface-muted: #f7f7f7;--surface-elevated: #ffffff;--border-subtle: #e5e7eb;--border-input: #d1d5db;--text-muted: #374151;--text-soft: #4b5563;--focus-outline: #bfdbfe;--focus-border: #60a5fa;--navbar-bg: #1e1e1e;--navbar-text: #ffffff;--navbar-logout-bg: #cc0000;--navbar-logout-hover-bg: #990000;--navbar-toggle-bg: #2f3640;--navbar-toggle-hover-bg: #404b57;--navbar-toggle-border: #5a6778;--navbar-toggle-text: #f3f4f6}:root[data-theme=dark]{--bg-app: #111827;--text-main: #f3f4f6;--surface: #1f2937;--surface-muted: #111827;--surface-elevated: #1f2937;--border-subtle: #374151;--border-input: #4b5563;--text-muted: #d1d5db;--text-soft: #c4c9d4;--focus-outline: #1d4ed8;--focus-border: #3b82f6;--navbar-bg: #0b1220;--navbar-text: #f9fafb;--navbar-logout-bg: #b91c1c;--navbar-logout-hover-bg: #991b1b;--navbar-toggle-bg: #243041;--navbar-toggle-hover-bg: #314156;--navbar-toggle-border: #4b5f79;--navbar-toggle-text: #e5e7eb}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:var(--bg-app);color:var(--text-main);transition:background-color .2s ease,color .2s ease}.page{width:min(100% - 2rem,960px);margin:0 auto;padding:1rem;background-color:var(--surface);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:var(--surface-elevated);border:1px solid var(--border-subtle);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:var(--text-muted)}.text-input{width:100%;border:1px solid var(--border-input);border-radius:8px;padding:.5rem .65rem;font-size:.96rem;background-color:var(--surface);color:var(--text-main)}.text-input:focus{outline:2px solid var(--focus-outline);border-color:var(--focus-border)}.text-input.input-error{border-color:#dc2626;background-color:#fef2f2}.text-input.input-error:focus{outline:2px solid #fecaca;border-color:#dc2626}.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}.status-success{color:#0f766e;margin:0}.auth-switch-text{margin:.2rem 0 0;text-align:center;font-size:.92rem;color:var(--text-muted)}.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}.song-meta-field strong{display:block}.song-meta-value{display:block;margin-top:.1rem}.meta-number-input{width:8rem;margin-top:.1rem}.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:var(--surface-muted);border:1px solid var(--border-subtle);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:var(--text-soft);-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 var(--border-input);resize:vertical;background-color:var(--surface);color:var(--text-main)}.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 var(--border-subtle);padding:.4rem 0}.song-item-content{display:block;white-space:normal;overflow-wrap:anywhere}.song-main-text{display:block;font-weight:500}.song-tags-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.2rem}.song-tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.8rem;font-weight:600;vertical-align:middle;white-space:nowrap;overflow-wrap:normal;word-break:keep-all}.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}.table-wrap{width:100%;overflow-x:auto}.admin-table{width:100%;border-collapse:collapse;min-width:640px}.admin-table th,.admin-table td{border-bottom:1px solid var(--border-subtle);padding:.55rem .6rem;text-align:left;vertical-align:middle}.admin-table th{font-size:.9rem;color:var(--text-muted)}.btn-overwrite{background-color:#0d9488}.btn-delete{background-color:#dc2626}.search-input{width:100%;padding:8px 12px;margin:12px 0;border:1px solid var(--border-input);border-radius:8px;font-size:1rem;background-color:var(--surface);color:var(--text-main);outline:none;transition:border-color .2s}.search-input:focus{border-color:var(--focus-border)}.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 var(--border-input);background:var(--surface);color:var(--text-main);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:var(--surface-elevated);border:1px solid var(--border-input);border-radius:10px;box-shadow:0 10px 25px #00000024;padding:.7rem;z-index:20}.filter-label{display:block;font-size:.8rem;color:var(--text-soft);margin-bottom:.2rem}.filter-control{width:100%;border:1px solid var(--border-input);border-radius:6px;padding:.45rem .55rem;margin-bottom:.55rem;font-size:.92rem;background:var(--surface);color:var(--text-main)}.filter-reset-btn{width:100%;margin-top:.2rem;border:1px solid var(--border-input);border-radius:6px;background:var(--surface-muted);color:var(--text-main);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:var(--text-main);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 var(--border-input);border-radius:12px;background:var(--surface)}@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:var(--navbar-bg);color:var(--navbar-text);padding:10px 20px}.navbar-left{display:flex;align-items:center;gap:20px}.navbar-logo{color:var(--navbar-text);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:var(--navbar-text);font-size:.88rem;font-weight:600;letter-spacing:.03em}.navbar-link{color:var(--navbar-text);text-decoration:none;font-size:16px;white-space:nowrap}.navbar-link:hover,.navbar-logo:hover{text-decoration:underline}.navbar-logo:hover{color:var(--navbar-text);text-decoration:none}.navbar-actions{display:inline-flex;align-items:center;gap:.5rem}.navbar-theme-toggle{background-color:var(--navbar-toggle-bg);color:var(--navbar-toggle-text);border:1px solid var(--navbar-toggle-border);border-radius:4px;padding:6px 12px;cursor:pointer;font-weight:500;transition:background-color .2s ease,border-color .2s ease}.navbar-theme-toggle:hover{background-color:var(--navbar-toggle-hover-bg)}.navbar-logout{background-color:var(--navbar-logout-bg);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:var(--navbar-logout-hover-bg)}.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-actions{width:100%;flex-direction:column}.navbar-theme-toggle,.navbar-logout{width:100%}}@media(max-width:480px){.navbar-left{align-items:center}.navbar-link{font-size:.92rem}}