:root{--ink:#17212b;--muted:#66727d;--line:#d9e0e5;--surface:#fff;--canvas:#eef2f4;--toolbar:#f8fafb;--accent:#176b87;--accent-dark:#0e5269;--accent-soft:#e3f2f6;--shadow:0 8px 24px #17212b14}*{box-sizing:border-box}body{min-width:320px;height:100vh;color:var(--ink);background:var(--canvas);flex-direction:column;margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:15px;display:flex}button,input,select{font:inherit}button{border:1px solid var(--line);min-height:32px;color:var(--ink);background:var(--surface);cursor:pointer;border-radius:6px;padding:6px 11px;transition:border-color .12s,background .12s,transform .12s}button:hover{background:#f3f7f8;border-color:#aab8c2}button:active{transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible,#editor:focus-visible{outline-offset:1px;outline:3px solid #176b873d}.app-header{color:#f7fbfc;background:#20313d;border-bottom:4px solid #d08b42;flex:none;padding:18px 24px}.app-header-inner{justify-content:space-between;align-items:center;gap:24px;max-width:1440px;margin:auto;display:flex}.app-title{align-items:center;gap:12px;display:flex}.app-logo{object-fit:contain;background:#1598d7;border-radius:50%;width:36px;height:36px;display:block}.app-title h1,.app-title p{margin:0}.app-title h1{font-size:22px;font-weight:750}.app-title p{color:#b9c9d1;margin-top:3px;font-size:14px;font-weight:600}.partner-link{color:#d8e7ec;flex-direction:column;align-items:flex-start;gap:4px;text-decoration:none;display:flex}.partner-link span{color:#a9c0c9;font-size:11px;font-weight:600}.partner-link img{aspect-ratio:1000/360;object-fit:contain;border-radius:4px;width:min(250px,32vw);height:auto;display:block}.partner-link:hover img{filter:brightness(1.08)}.app-main{flex-direction:column;flex:1;width:min(1440px,100%);min-height:0;margin:auto;display:flex}.toolbar{background:var(--toolbar);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:10px;padding:10px 24px;display:flex}.toolbar-primary{gap:18px}.toolbar-secondary{background:var(--surface)}.toolbar-group{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.toolbar-label{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-right:3px;font-size:12px;font-weight:750}.toolbar button{font-size:13px;font-weight:650}.button-primary{border-color:var(--accent);color:#fff;background:var(--accent);font-weight:700}.button-primary:hover{border-color:var(--accent-dark);color:#fff;background:var(--accent-dark)}.button-secondary{color:var(--accent-dark);background:var(--accent-soft);border-color:#b8cdd5}.button-quiet,.document-actions{margin-left:auto}.field-inline,.toggle-field{color:var(--muted);align-items:center;gap:7px;font-size:13px;font-weight:700;display:inline-flex}.field-inline input{width:190px}.field-number input{width:58px}input,select{border:1px solid var(--line);min-height:32px;color:var(--ink);background:var(--surface);border-radius:6px;padding:5px 8px}.toggle-field input{width:16px;height:16px;accent-color:var(--accent)}.editor-wrap{border:1px solid var(--line);background:var(--surface);min-height:0;box-shadow:var(--shadow);border-radius:10px;flex-direction:column;flex:1;margin:18px 24px;display:flex;overflow:hidden}.editor-hint{color:var(--muted);border-bottom:1px solid var(--line);letter-spacing:.08em;text-transform:uppercase;background:#fbfcfc;flex:none;padding:9px 18px;font-size:11px;font-weight:700}#editor{color:#263640;background:var(--surface);white-space:pre;overflow-wrap:break-word;outline:none;flex:1;min-height:0;padding:22px;font-family:Courier New,monospace;font-size:14px;line-height:1.55;overflow-y:auto}#editor:empty:before{content:"Paste or type your chord sheet here...";color:#a2adb4;pointer-events:none}.status-bar{color:#8ee6a8;background:#20313d;border-top:1px solid #314954;flex:none;justify-content:space-between;align-items:center;gap:16px;min-height:30px;padding:7px 24px;font-size:13px;font-weight:650;display:flex}.status-bar #status{min-width:0}.status-bar #installButton{color:#20313d;background:#8ee6a8;border-color:#8ee6a8;flex:none;min-height:28px;padding:4px 10px;font-size:12px;font-weight:750}.status-bar #installButton:hover{background:#b1f2c2;border-color:#b1f2c2}.highlighted-chord{color:#163d4a;background:#f0c27b;border-radius:3px;padding:.2em .5em;font-weight:700}#configModal{border:1px solid var(--line);border-radius:10px;width:min(720px,100vw - 32px);max-height:calc(100vh - 32px);padding:0;box-shadow:0 20px 60px #17212b38}#configModal::backdrop{background:#17212b8c}.config-modal-content{padding:22px;overflow-y:auto}.config-modal-header,.config-modal-actions{align-items:center;gap:10px;display:flex}.config-modal-header{justify-content:space-between;margin-bottom:16px}.config-modal-header h2{margin:0;font-size:22px;font-weight:750}.config-modal-actions{justify-content:flex-end;margin-top:16px}#config-status{min-height:1.2em;color:var(--muted);margin:12px 0 0;font-size:13px;font-weight:600;display:block}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.config-item{border-bottom:1px solid #edf0f2;grid-template-columns:110px minmax(0,1fr) 70px minmax(0,1fr);align-items:center;gap:8px;padding:12px 0;display:grid}.config-item br{display:none}.config-item button{color:#b23a48;grid-column:4;justify-self:end}@media (width<=800px){.app-header,.toolbar{padding-left:16px;padding-right:16px}.app-header-inner{align-items:flex-start}.button-quiet,.document-actions{margin-left:0;margin-right:0}.editor-wrap{margin:12px 16px}}@media (width<=600px){.toolbar-primary,.toolbar-secondary{align-items:stretch}.toolbar-group,.document-actions,.field-inline,.toggle-field{width:100%}.toolbar button,.field-inline input{flex:1}.field-number{width:auto}.field-number input{flex:0 0 58px}.config-item{grid-template-columns:1fr 1fr}.config-item button{grid-column:2}.config-modal-actions{flex-wrap:wrap}}
