:root{--fret-color: #bdc3c7;--string-color: #95a5a6;--nut-color: #002776;--marker-color: #c0392b;--root-highlight: #ffdf00;--chord-symbol-stroke: #002776;--chord-symbol-fill: #ffdf00;--chord-root-stroke: #f39c12;--chord-root-fill: #ffdf00;--open-string-stroke: #009c3b}body{font-family:inherit;background-color:var(--bg-color);color:var(--text-color);margin:0;padding:0}.app-container{min-height:100vh;margin-left:60px;padding:20px;transition:margin-left .3s ease}header{text-align:center;margin-bottom:40px;padding:20px 0;border-bottom:1px solid #ddd}h1{font-size:2.5rem;color:var(--primary-color);margin:0 0 10px}.tuning-info{font-size:1.2rem;color:#555;margin-bottom:20px}.controls{display:flex;justify-content:center;gap:15px;margin-top:20px}.btn{padding:10px 20px;border:1px solid var(--primary-color);background:transparent;color:var(--primary-color);font-weight:600;cursor:pointer;border-radius:4px;transition:all .2s}.btn:hover{background:#2c3e501a}.btn.active{background:var(--primary-color);color:#fff}.view-section{margin-bottom:40px}.section-title{font-size:1.8rem;color:var(--primary-color);border-left:5px solid var(--accent-color);padding-left:15px;margin-bottom:20px;margin-top:40px}.chord-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:25px}.aligned-grid{grid-template-columns:repeat(7,1fr)!important}.chord-placeholder{visibility:hidden;height:0;padding:0;margin:0}.chord-card{background:#fff;border-radius:8px;padding:10px;box-shadow:0 2px 5px #0000000d;display:flex;flex-direction:column;align-items:center;transition:transform .2s,box-shadow .2s;border:1px solid #eee;cursor:pointer}.chord-card:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0000001a}.chord-card:active{transform:translateY(0);box-shadow:0 2px 5px #0000000d;background-color:#f9f9f9}.chord-name{font-size:1.4rem;font-weight:700;margin-bottom:5px;color:var(--primary-color)}.chord-variation{font-size:.9rem;color:#999;font-weight:400;margin-left:5px}svg{display:block;overflow:visible}.string{stroke:var(--string-color);stroke-width:2.5;stroke-linecap:round}.fret{stroke:var(--fret-color);stroke-width:1.5}.nut{stroke:var(--nut-color);stroke-width:6;stroke-linecap:round}.barre{fill:#2c3e50;opacity:.8}.marker-circle{fill:var(--chord-symbol-fill);stroke:var(--chord-symbol-stroke);stroke-width:1.5}.marker-circle.root{fill:var(--chord-root-fill);stroke:var(--chord-root-stroke);stroke-width:2}.marker-text{fill:#fff;font-size:12px;font-weight:700;font-family:Inter,sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none}.marker-text.root-text{fill:#2c3e50}.base-fret{font-size:14px;font-weight:600;fill:var(--text-color);text-anchor:end;dominant-baseline:middle}.fret-number{font-size:10px;fill:#bdc3c7;text-anchor:end;dominant-baseline:middle;font-family:Inter,sans-serif}#loading{text-align:center;font-size:1.5rem;color:#777;margin-top:50px}footer{text-align:center;margin-top:60px;color:#999;font-size:.9rem}.builder-container{display:flex;flex-direction:column;align-items:center;gap:30px;padding:40px 0}.builder-controls{display:flex;gap:20px}.fretboard-svg{background:#fff;border-radius:8px;box-shadow:0 4px 15px #0000001a;padding:20px;overflow:visible}.fret-hit-box{cursor:pointer}.fret-hit-box:hover .hover-dot{opacity:.3}.hover-dot{fill:var(--marker-color);opacity:0;transition:opacity .2s}.active-dot{fill:var(--marker-color);stroke:#8e1812;stroke-width:1.5}.selected-marker-text{fill:#fff;font-size:10px;font-weight:700;text-anchor:middle;dominant-baseline:central}.sidebar-nav-btn{border:none;cursor:pointer;display:flex;align-items:center;transition:all .2s ease;box-sizing:border-box;text-align:left;background:transparent;color:#fff;width:260px}.sidebar-nav-btn:hover{background:#ffffff1a!important}.sidebar-nav-btn.active{background:var(--highlight-color)!important;color:var(--primary-color)!important}.sidebar-nav-btn.active:hover{background:var(--highlight-color)!important;opacity:.9}