.tool-panel.scales-panel{max-width:none}
.scales-sidebar,.scales-main{min-width:0}
@media(min-width:1000px){.scales-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}.scales-sidebar .scales-controls label{flex:1 1 100px}.scales-sidebar .scales-controls input,.scales-sidebar .scales-controls select{width:100%;max-width:none}}
.scales-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:12px 0}
.scales-controls label{display:grid;gap:5px;font-size:13px;font-weight:700;color:var(--muted);min-width:0}
.scales-controls select,.scales-controls input{box-sizing:border-box;max-width:240px;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;font-size:16px}
.scales-controls button{min-height:44px}
.scales-notes{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.scales-notes span{display:grid;gap:3px;min-width:40px;padding:6px 10px;text-align:center;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font-weight:700}
.scales-notes small{font-size:11px;color:var(--muted)}
.scales-neck{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.scales-neck:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
.scales-board{width:100%;min-width:260px;table-layout:fixed;border-collapse:collapse;text-align:center;font-size:13px}
.scales-board caption{text-align:left;padding:10px 12px;color:var(--muted);font-size:12px}
.scales-board th{height:32px;color:var(--muted);font-weight:500}
.scales-board th:first-child{width:32px}
.scales-board td{height:58px;padding:3px 0;border-right:1px solid var(--line);background:linear-gradient(transparent 49%,var(--line) 49%,var(--line) 51%,transparent 51%)}
.scales-board td.open-string{border-right:3px solid var(--muted)}
.scale-note{display:inline-flex;vertical-align:middle;flex-direction:column;justify-content:center;min-width:32px;min-height:38px;box-sizing:border-box;border:2px solid var(--line);border-radius:50%;background:var(--surface);font-size:12px;font-weight:700;line-height:1.1}
.scale-note small{font-size:9px;margin-top:3px;font-weight:500}
.scale-note.tonic{background:var(--accent);color:#17120a;border-color:var(--accent)}
.scale-note.chord-tone{border-color:var(--accent-2);border-style:double;border-width:3px}
.scale-note.outside{border-style:dashed;background:var(--surface);color:var(--muted)}
.scales-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0;font-size:13px;color:var(--muted)}
.scales-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0}
.scales-guide p{margin:0;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:14px;line-height:1.5}
.scales-guide strong{display:block;color:var(--accent-2);margin-bottom:4px}
.scales-message{min-height:20px;color:var(--accent);font-size:14px}
@media(max-width:600px){.scales-controls label{flex:1 1 120px}.scales-controls select,.scales-controls input{width:100%;max-width:none}.scales-guide{grid-template-columns:minmax(0,1fr)}.scales-board td{height:48px}.scales-board th:first-child{width:26px}.scale-note{min-width:30px;min-height:34px}}