@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--bg-main:#0d0f16;--bg-sidebar:#11131d;--bg-card:#17192699;--bg-card-hover:#222639cc;--border-glass:#3035504d;--border-glass-focus:#00aaff80;--color-text-main:#e0e4eb;--color-text-muted:#8a94a8;--accent-cyan:#00eaff;--accent-blue:#0080ff;--accent-indigo:#5b4cff;--accent-emerald:#0c6;--accent-ruby:#ff1a53;--gradient-accent:linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));--gradient-neon:linear-gradient(135deg, var(--accent-cyan), var(--accent-indigo));--font-main:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--sidebar-width:320px;--header-height:70px;--transition-speed:.2s;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-main);color:var(--color-text-main);background-image:radial-gradient(at 0 0,#5b4cff14 0,#0000 50%),radial-gradient(at 100% 0,#00eaff0d 0,#0000 50%),radial-gradient(at 50% 100%,#0080ff0d 0,#0000 50%);min-height:100vh;line-height:1.5;display:flex;overflow:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-sidebar)}::-webkit-scrollbar-thumb{background:#30355080;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#434a70cc}h1,h2,h3,h4{letter-spacing:-.02em;font-weight:600}.app-container{width:100vw;height:100vh;display:flex;position:relative}.sidebar{width:var(--sidebar-width);background-color:var(--bg-sidebar);border-right:1px solid var(--border-glass);z-index:10;flex-direction:column;flex-shrink:0;height:100%;display:flex}.sidebar-header{border-bottom:1px solid var(--border-glass);align-items:center;gap:12px;padding:24px;display:flex}.logo-icon{background:var(--gradient-accent);border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-size:20px;display:flex;box-shadow:0 0 15px #00f2fe4d}.logo-text{background:var(--gradient-accent);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.25rem;font-weight:700}.sidebar-content{flex-direction:column;flex:1;gap:24px;padding:20px;display:flex;overflow-y:auto}.main-content{flex-direction:column;flex:1;height:100%;display:flex;position:relative;overflow:hidden}.top-nav{min-height:var(--header-height);border-bottom:1px solid var(--border-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:5;background-color:#0d0f1680;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;height:auto;padding:12px 32px;display:flex}.song-info{align-items:center;gap:16px;display:flex}.song-title-input{color:var(--color-text-main);font-family:var(--font-main);transition:all var(--transition-speed);background:0 0;border:1px solid #0000;border-radius:6px;width:240px;padding:4px 8px;font-size:1.3rem;font-weight:700}.song-title-input:hover{background:var(--bg-card)}.song-title-input:focus{background:var(--bg-card);border-color:var(--accent-cyan);outline:none;box-shadow:0 0 8px #00f2fe33}.song-meta-input{color:var(--color-text-muted);font-family:var(--font-main);background:0 0;border:1px solid #0000;border-radius:6px;width:150px;padding:4px 8px;font-size:.9rem}.song-meta-input:hover{background:var(--bg-card)}.song-meta-input:focus{background:var(--bg-card);border-color:var(--accent-cyan);outline:none}.workspace-canvas{flex-direction:column;flex:1;gap:24px;padding:32px;display:flex;overflow-y:auto}.control-panel{background:var(--bg-card);border:1px solid var(--border-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:16px 24px;display:flex;box-shadow:0 10px 30px #0000004d}.control-group{align-items:center;gap:12px;display:flex}.divider{background-color:var(--border-glass);width:1px;height:24px}.btn{background:var(--bg-card);border:1px solid var(--border-glass);color:var(--color-text-main);font-family:var(--font-main);cursor:pointer;transition:all var(--transition-speed);-webkit-user-select:none;user-select:none;border-radius:8px;align-items:center;gap:8px;padding:8px 16px;font-size:.9rem;font-weight:500;display:flex}.btn:hover{background:var(--bg-card-hover);border-color:var(--color-text-muted);transform:translateY(-1px)}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--gradient-accent);color:#0a0b10;border:none;font-weight:600;box-shadow:0 4px 15px #00f2fe33}.btn-primary:hover{color:#0a0b10;background:linear-gradient(135deg,#1aecff,#1a8cff);border:none;box-shadow:0 6px 20px #00f2fe59}.btn-icon{border-radius:8px;padding:8px}.btn-danger{color:var(--accent-ruby);background:#ff1e5026;border-color:#ff1e504d}.btn-danger:hover{border-color:var(--accent-ruby);background:#ff1e5040}.btn-active{border-color:var(--accent-cyan);color:var(--accent-cyan);background:#00f2fe26;box-shadow:0 0 10px #00f2fe1a}.tempo-control{color:var(--color-text-muted);align-items:center;gap:8px;font-size:.9rem;display:flex}.tempo-slider{-webkit-appearance:none;background:var(--border-glass);border-radius:2px;outline:none;width:100px;height:4px}.tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-cyan);cursor:pointer;width:12px;height:12px;box-shadow:0 0 8px var(--accent-cyan);border-radius:50%;transition:transform .1s}.tempo-slider::-webkit-slider-thumb:hover{transform:scale(1.3)}.tempo-val{font-family:var(--font-mono);color:var(--color-text-main);text-align:right;min-width:32px}.tab-sheet-card{background:var(--bg-card);border:1px solid var(--border-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;flex-direction:column;gap:16px;padding:24px;display:flex;box-shadow:0 4px 20px #00000026}.tab-sheet-header{justify-content:space-between;align-items:center;display:flex}.tab-sheet-title{color:var(--color-text-main);align-items:center;gap:8px;font-size:1.1rem;display:flex}.tab-editor-scroll-container{background:#00000026;border:1px solid #ffffff08;border-radius:8px;width:100%;padding-bottom:12px;position:relative}.tab-grid{font-family:var(--font-mono);flex-wrap:wrap;gap:24px 16px;min-height:auto;padding:16px;font-size:14px;display:flex}.measure-block{border:1px solid var(--border-glass);background:#0003;border-radius:8px;grid-template-rows:24px 24px 20px 20px 20px 20px 20px 20px;grid-template-columns:24px repeat(8,36px) 10px;padding:12px 8px;display:grid;position:relative;box-shadow:inset 0 0 10px #0000004d}.measure-block:before{content:"";pointer-events:none;z-index:1;background:repeating-linear-gradient(#0000 0 9px,#8a94a82e 9px 11px,#0000 11px 20px);height:100px;position:absolute;top:70px;left:32px;right:18px}.measure-header-cell{color:var(--accent-cyan);font-size:12px;font-weight:700;font-family:var(--font-mono);-webkit-user-select:none;user-select:none;justify-content:flex-start;align-items:center;display:flex}.measure-header-cell.string-header{height:20px}.measure-barline{border-right:2px solid #ffffff59;height:100%;margin-left:4px}.tab-cell{z-index:2;transition:background-color var(--transition-speed);cursor:pointer;justify-content:center;align-items:center;display:flex;position:relative}.tab-cell.note-cell{height:20px;color:var(--color-text-main);font-weight:500}.tab-cell.note-cell:before{content:"";background:var(--bg-main);z-index:-1;border-radius:3px;width:14px;height:14px;display:none;position:absolute}.tab-cell.note-cell.has-note:before{display:block}.tab-cell.chord-cell{height:24px;color:var(--accent-cyan);text-transform:uppercase;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;font-size:11px;font-weight:700;display:flex;overflow:visible}.tab-chord-pill{color:var(--accent-cyan);-webkit-user-select:none;user-select:none;transition:all var(--transition-speed);background:#00f2fe1f;border:1px solid #00f2fe40;border-radius:4px;align-items:center;gap:3px;margin:1px;padding:1px 4px;font-size:9px;font-weight:700;display:inline-flex}.tab-chord-pill:hover{border-color:var(--accent-cyan);background:#00f2fe33}.tab-chord-pill-delete{color:var(--accent-ruby);cursor:pointer;margin-left:2px;font-size:10px;font-weight:700;transition:transform .1s;display:inline-block}.tab-chord-pill-delete:hover{transform:scale(1.2)}.tab-chord-pill-move{color:var(--color-text-muted);cursor:pointer;padding:0 1px;font-size:9px;transition:color .1s,transform .1s;display:inline-block}.tab-chord-pill-move:hover{color:var(--accent-cyan);transform:scale(1.25)}.tab-cell.lyric-cell{height:24px;color:var(--color-text-muted);white-space:nowrap;font-size:10px}.tab-cell.focused{outline:2px solid var(--accent-cyan);z-index:4;background-color:#00f2fe1a;border-radius:4px}.tab-cell.note-cell.focused:before{background:0 0}.tab-cell.drag-over{outline:2px dashed var(--accent-cyan);background-color:#00f2fe33;border-radius:4px}.tab-column-highlight{pointer-events:none;z-index:1;background-color:#0000;border-left:1px dashed #0000;border-right:1px dashed #0000;grid-row:1/-1}.tab-column-highlight.playing{border-left:1px solid var(--accent-emerald);border-right:1px solid var(--accent-emerald);background-color:#00cc6614;box-shadow:0 0 10px #00ff781a}.tab-column-highlight.copy-range-highlight{border-left:1px dashed var(--accent-cyan);border-right:1px dashed var(--accent-cyan);background-color:#ffd70026!important;display:block!important}.chord-library-section{flex-direction:column;gap:16px;display:flex}.section-title{text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);border-bottom:1px solid var(--border-glass);padding-bottom:8px;font-size:.9rem;font-weight:600}.chord-list{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px;display:grid}.chord-card{background:var(--bg-card);border:1px solid var(--border-glass);cursor:pointer;transition:all var(--transition-speed);border-radius:8px;flex-direction:column;align-items:center;gap:6px;padding:8px;display:flex;position:relative}.chord-card:hover{background:var(--bg-card-hover);border-color:var(--accent-cyan);transform:translateY(-2px)}.chord-card.active-tab-chord{border-color:var(--accent-indigo);background:#6464ff0d}.chord-card.drag-over-chord{box-shadow:0 0 10px #00f2fe66;border-color:var(--accent-cyan)!important}.chord-card-name{text-align:center;font-size:.85rem;font-weight:600}.chord-card-diagram{width:85px;height:95px}.song-chords-panel{background:var(--bg-card);border:1px solid var(--border-glass);border-radius:12px;flex-wrap:wrap;gap:12px;padding:16px;display:flex}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;opacity:0;pointer-events:none;background:#06070ecc;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-card{background:var(--bg-sidebar);border:1px solid var(--border-glass);border-radius:20px;flex-direction:column;width:90%;max-width:550px;transition:transform .3s;display:flex;overflow:hidden;transform:scale(.9);box-shadow:0 20px 50px #00000080}.modal-overlay.active .modal-card{transform:scale(1)}.modal-header{border-bottom:1px solid var(--border-glass);justify-content:space-between;align-items:center;padding:24px;display:flex}.modal-body{max-height:70vh;padding:24px;overflow-y:auto}.modal-footer{border-top:1px solid var(--border-glass);justify-content:flex-end;gap:12px;padding:16px 24px;display:flex}.form-group{flex-direction:column;gap:8px;margin-bottom:20px;display:flex}.form-label{color:var(--color-text-muted);font-size:.85rem;font-weight:500}.form-input{background:var(--bg-card);border:1px solid var(--border-glass);color:var(--color-text-main);font-family:var(--font-main);transition:border-color var(--transition-speed);border-radius:8px;padding:10px 14px;font-size:.95rem}.form-input:focus{border-color:var(--accent-cyan);outline:none;box-shadow:0 0 8px #00f2fe26}.builder-layout{grid-template-columns:1fr 1fr;gap:24px;display:grid}.builder-fretboard-container{flex-direction:column;align-items:center;gap:12px;display:flex}.builder-fretboard{background:var(--bg-card);border:1px solid var(--border-glass);border-radius:8px;grid-template-rows:repeat(6,24px);grid-template-columns:repeat(6,28px);padding:10px;display:grid;position:relative}.builder-fretboard:before{content:"";pointer-events:none;background:repeating-linear-gradient(90deg,#0000 0 27px,#8a94a84d 27px 28px);width:140px;position:absolute;top:10px;bottom:10px;left:24px}.builder-fretboard:after{content:"";pointer-events:none;background:repeating-linear-gradient(#0000 0 11px,#8a94a833 11px 13px,#0000 13px 24px);height:120px;position:absolute;top:22px;left:10px;right:10px}.builder-cell{cursor:pointer;z-index:2;justify-content:center;align-items:center;width:28px;height:24px;display:flex;position:relative}.builder-dot{background:var(--accent-cyan);width:12px;height:12px;box-shadow:0 0 8px var(--accent-cyan);border-radius:50%;display:none}.builder-cell.active .builder-dot{display:block}.builder-status-row{justify-content:space-around;width:100%;padding:0 10px;display:flex}.builder-status-indicator{cursor:pointer;width:24px;height:24px;font-family:var(--font-mono);background:var(--bg-card);border:1px solid var(--border-glass);border-radius:4px;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.builder-status-indicator.muted{color:var(--accent-ruby);border-color:#ff1e504d}.builder-status-indicator.open{color:var(--accent-emerald);border-color:#00ff784d}.builder-preview-container{background:var(--bg-card);border:1px solid var(--border-glass);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;padding:20px;display:flex}.builder-preview-svg{width:120px;height:150px}.song-list{flex-direction:column;gap:8px;max-height:250px;display:flex;overflow-y:auto}.song-list-item{background:var(--bg-card);border:1px solid var(--border-glass);cursor:pointer;transition:all var(--transition-speed);border-radius:8px;justify-content:space-between;align-items:center;padding:10px 12px;display:flex}.song-list-item:hover{background:var(--bg-card-hover);border-color:var(--accent-cyan)}.song-list-item.active{border-color:var(--accent-cyan);background:#00f2fe0d}.song-item-info{flex-direction:column;display:flex}.song-item-title{font-size:.9rem;font-weight:600}.song-item-artist{color:var(--color-text-muted);font-size:.75rem}.song-item-actions{opacity:0;transition:opacity var(--transition-speed)}.song-list-item:hover .song-item-actions{opacity:1}.ascii-textarea{border:1px solid var(--border-glass);width:100%;height:300px;color:var(--color-text-main);font-family:var(--font-mono);resize:none;background:#0000004d;border-radius:8px;outline:none;padding:16px;font-size:13px}.ascii-textarea:focus{border-color:var(--accent-cyan)}.print-chords-container{flex-wrap:wrap;gap:20px;margin-bottom:24px;display:none}@media print{body{color:#000;background:#fff;overflow:visible}.app-container{width:auto;height:auto;display:block}.sidebar,.top-nav,.control-panel,.tab-sheet-header,.logo-icon,.btn,.divider,.track-switcher-bar{display:none!important}.main-content{height:auto;display:block;overflow:visible}.workspace-canvas{padding:0;display:block}.tab-sheet-card{box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}.tab-editor-scroll-container{background:0 0;border:none}.tab-grid{gap:20px 8px;padding:0}.measure-block{page-break-inside:avoid;box-shadow:none!important;background:0 0!important;border:1px solid #ccc!important}.measure-header-cell{color:#000!important}.measure-barline{border-right:2px solid #000!important}.tab-cell{color:#000!important}.tab-cell.note-cell:before{background:#fff!important}.tab-cell.chord-cell{color:#000!important}.tab-cell.focused{background:0 0!important;outline:none!important}.print-chords-container{display:flex!important}svg text{fill:#000!important}svg line,svg circle{stroke:#000!important}svg circle.pressed-dot{fill:#000!important}}.chord-card{-webkit-user-select:none;user-select:none;position:relative}.chord-card .chord-card-delete{background:var(--accent-ruby);color:#fff;border:1px solid var(--border-glass);cursor:pointer;opacity:0;width:20px;height:20px;transition:opacity var(--transition-speed), transform var(--transition-speed);z-index:5;border-radius:50%;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex;position:absolute;top:-6px;right:-6px}.chord-card:hover .chord-card-delete{opacity:1}.chord-card .chord-card-delete:hover{background:#ff4c79;transform:scale(1.15)}.track-tab-btn{background:var(--bg-sidebar);border:1px solid var(--border-glass);color:var(--color-text-muted);font-family:var(--font-main);cursor:pointer;transition:all var(--transition-speed);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:.85rem;font-weight:500;display:flex}.track-tab-btn:hover{background:var(--bg-card-hover);color:var(--color-text-main);border-color:var(--color-text-muted)}.track-tab-btn.active{border-color:var(--accent-cyan);color:var(--accent-cyan);background:#00f2fe26;font-weight:600;box-shadow:0 0 10px #00f2fe26}.track-tab-delete-btn{color:var(--accent-ruby);cursor:pointer;opacity:.6;transition:opacity var(--transition-speed), transform var(--transition-speed);background:0 0;border:none;justify-content:center;align-items:center;padding:0 2px;font-size:.95rem;font-weight:700;line-height:1;display:flex}.track-tab-delete-btn:hover{opacity:1;transform:scale(1.2)}.measure-block.bass-track{grid-template-rows:24px 24px 20px 20px 20px 20px}.measure-block.bass-track:before{height:60px;top:70px}.youtube-player-container{border:1px solid var(--border-glass);background:#000;border-radius:8px;width:100%;height:160px;margin-top:8px;position:relative;overflow:hidden}.youtube-player-container iframe{border:none;width:100%;height:100%}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}to{opacity:1;transform:scale(1)}}@media (width<=1200px){.control-panel{justify-content:center;gap:20px}}@media (width<=992px){body{overflow:auto}.app-container{flex-direction:column;height:auto}.sidebar{border-right:none;border-bottom:1px solid var(--border-glass);width:100%;height:auto}.main-content{height:auto;overflow:visible}.top-nav{flex-direction:column;justify-content:center;align-items:center}.song-info,.top-nav .control-group{flex-wrap:wrap;justify-content:center}.workspace-canvas{padding:16px}.control-panel{flex-direction:column;align-items:stretch}.control-panel .control-group{flex-wrap:wrap;justify-content:center}}