*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d0d;--sidebar-bg: #111111;--surface: #1a1a1a;--accent: #4a8fff;--text: #f0f0f0;--muted: #6b7280;--border: #2a2a2a;--font: system-ui, sans-serif;--mono: "Courier New", Courier, monospace}body{font-family:var(--font);background:var(--bg);color:var(--text);height:100dvh;overflow:hidden}.layout{display:grid;grid-template-columns:280px 1fr;height:100dvh}.sidebar{background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1rem;border-bottom:1px solid var(--border)}.sidebar-header h1{font-size:1.25rem;letter-spacing:.05em;color:var(--accent)}.btn-new{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:.35rem .75rem;font-size:.85rem;cursor:pointer;transition:opacity .15s;text-decoration:none}.btn-new:hover{opacity:.85}.song-list{list-style:none;overflow-y:auto;flex:1;padding:.5rem 0}.list-empty{color:var(--muted);padding:1rem;font-size:.9rem}.song-item{display:block;padding:.75rem 1rem;cursor:pointer;border-left:3px solid transparent;transition:background .1s;text-decoration:none;color:inherit}.song-item:hover{background:#ffffff0a}.song-item.active{background:#4a8fff1a;border-left-color:var(--accent)}.song-item-title{display:block;font-size:.95rem;font-weight:500}.song-item-artist{display:block;font-size:.8rem;color:var(--muted);margin-top:.15rem}.content{overflow-y:auto;padding:2rem}.empty-state{color:var(--muted);margin-top:4rem;text-align:center}.error-banner{background:#ff6b6b1a;border:1px solid #ff6b6b;border-radius:8px;padding:.75rem 1rem;margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:center;font-size:.9rem}.error-banner button{background:none;border:none;color:var(--text);cursor:pointer;font-size:1rem}.song-detail-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem}.song-detail h2{font-size:1.8rem;font-weight:700}.song-detail .artist{color:var(--muted);margin-top:.25rem}.song-detail-actions{display:flex;gap:.5rem}.section{margin-bottom:2rem}.section h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.75rem}.lyrics,.tabs{white-space:pre-wrap;font-family:var(--mono);font-size:.9rem;background:var(--sidebar-bg);border:1px solid var(--border);border-radius:8px;padding:1rem;line-height:1.7}.no-content{color:var(--muted);font-size:.9rem}.btn{border:none;border-radius:6px;padding:.45rem 1rem;font-size:.85rem;cursor:pointer;transition:opacity .15s}.btn:hover{opacity:.85}.btn-edit{background:var(--surface);color:var(--text)}.btn-delete{background:#4a8fff1a;color:#ff6b6b}.btn-save{background:var(--accent);color:#fff}.btn-cancel{background:var(--surface);color:var(--text)}.btn-qr{background:var(--surface);color:var(--accent);line-height:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100}.modal-box{background:var(--sidebar-bg);border:1px solid var(--border);border-radius:12px;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1.25rem}.modal-url{font-family:var(--mono);font-size:.75rem;color:var(--muted);word-break:break-all;text-align:center;max-width:220px}.song-form h2{font-size:1.4rem;margin-bottom:1.5rem}.form-row{margin-bottom:1.25rem;display:flex;flex-direction:column;gap:.4rem}.form-row label{font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.form-row input,.form-row textarea{background:var(--sidebar-bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--font);font-size:.95rem;padding:.65rem .85rem;outline:none;transition:border-color .15s;resize:vertical}.form-row input:focus,.form-row textarea:focus{border-color:var(--accent)}.form-row textarea.mono{font-family:var(--mono);font-size:.875rem}.form-actions{display:flex;gap:.75rem;margin-top:.5rem}.cp-chord-grid{display:flex;flex-wrap:wrap;gap:1rem 1.25rem;padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border)}.cd-wrap{display:flex;flex-direction:column;align-items:center;gap:.25rem}.cd-name{font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--text);text-align:center}.search-wrap{padding:.6rem .75rem;border-bottom:1px solid var(--border)}.search-input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.85rem;padding:.4rem .65rem;outline:none}.search-input:focus{border-color:var(--accent)}.tag{display:inline-flex;align-items:center;gap:.3rem;background:#4a8fff1f;color:var(--accent);border-radius:4px;font-size:.75rem;padding:.15rem .5rem}.tag button{background:none;border:none;color:inherit;cursor:pointer;font-size:.9rem;line-height:1;padding:0;opacity:.7}.tag button:hover{opacity:1}.tag--readonly{cursor:default}.tag--sm{padding:.1rem .35rem;font-size:.7rem}.tag-input{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;background:var(--sidebar-bg);border:1px solid var(--border);border-radius:8px;padding:.5rem .75rem;cursor:text}.tag-input:focus-within{border-color:var(--accent)}.tag-input input{background:none;border:none;outline:none;color:var(--text);font-size:.9rem;min-width:10rem;flex:1}.song-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.25rem}.song-item-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}.cp-viewer{font-family:var(--mono);font-size:.9rem;line-height:1.5}.cp-spacer{height:.75rem}.cp-section{font-family:var(--font);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin:1.25rem 0 .4rem}.cp-text{color:var(--text)}.cp-line{display:flex;flex-wrap:nowrap;align-items:flex-end;overflow-x:auto}.cp-segment{display:inline-flex;flex-direction:column;white-space:pre}.cp-chord{color:var(--accent);font-weight:700;font-size:.85rem;min-height:1.3em;line-height:1.3}.cp-lyric{color:var(--text)}.cp-tab{margin:.5rem 0;padding:.75rem 1rem;background:var(--sidebar-bg);border:1px solid var(--border);border-radius:8px;white-space:pre;overflow-x:auto;font-size:.85rem;line-height:1.6;color:var(--muted)}.back-btn{display:none}@media(max-width:700px){.layout{grid-template-columns:1fr;grid-template-rows:1fr}.sidebar{height:100dvh;border-right:none}.content,.layout--detail .sidebar{display:none}.layout--detail .content{display:flex;flex-direction:column;height:100dvh;overflow-y:auto}.back-btn{display:flex;align-items:center;gap:.4rem;background:none;border:none;color:var(--accent);font-size:.9rem;cursor:pointer;padding:.75rem 1rem;border-bottom:1px solid var(--border);width:100%;flex-shrink:0}.content{padding:0}.song-detail,.song-form{padding:1rem}.song-detail-header{flex-direction:column;gap:.75rem}.song-detail-actions{width:100%;justify-content:flex-start}.empty-state{padding:2rem 1rem}.error-banner{margin:.75rem}.cp-chord-grid{flex-wrap:nowrap;overflow-x:auto;padding-bottom:1rem}}