/* ABC Tune Factory — light (cool blue-grey, default) and dark (warm walnut) themes, low-saturation */
:root {
  --radius: 6px;
  --dock-h: min(320px, 38vh);
  --lib-w: 280px;
  --hdr-w: 220px;
  --note-w: 520px;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

/* Light: cool blue-grey surfaces, slate text, brass accent */
:root, :root[data-theme="light"] {
  --bg0: #dde4ee;         /* timeline well */
  --bg1: #edf1f7;         /* panels */
  --bg2: #e3e9f2;         /* bars, headers */
  --bg3: #f7f9fd;         /* controls */
  --bg4: #d3dbe8;         /* hover */
  --line: #d0d9e6;
  --line2: #b9c5d6;
  --edge: #b0bdd0;        /* structural dividers */
  --text: #1f2733;
  --text2: #475265;
  --text3: #74829a;
  --accent: #a8792b;
  --accent2: #85601f;
  --accent-bg: rgba(168, 121, 43, .13);
  --accent-line: rgba(168, 121, 43, .45);
  --on-accent: #fffaf0;
  --green: #5e7d42;
  --green-bg: rgba(94, 125, 66, .14);
  --red: #b04a33;
  --blue: #3f6e9e;
  --soft-red: #a8442b;
  --lcd-bg: #d3dfe0;      /* reflective LCD */
  --lcd-fg: #1f2d30;
  --lcd-dim: #6a7b80;
  --lcd-line: #bccacd;
  --paper: #fcfdff;
  --ink: #1d232d;
  --mark: #a8442b;
  --scroll-thumb: #bcc8da;
  --shadow: rgba(25, 40, 70, .18);
  --scrim: rgba(25, 35, 55, .38);
  /* timeline canvas */
  --cv-grid-bar: rgba(40, 60, 95, .16);
  --cv-grid-beat: rgba(40, 60, 95, .07);
  --cv-tint: rgba(40, 60, 95, .03);
  --cv-past: rgba(40, 60, 95, .10);
  --cv-lane-sel: rgba(168, 121, 43, .06);
  --cv-tick: #8795ab;
  --cv-tick2: #bcc7d8;
  --cv-playhead: #1f2733;
  --cv-playing: #a8442b;
  --cv-note-on: #1f2733;
  /* tracks & parts */
  --trk-melody: #a8792b;
  --trk-voice2: #a35c45;
  --trk-voice3: #7d6389;
  --trk-voice4: #8f7a45;
  --trk-harmony: #3f8574;
  --trk-chords: #3f6e9e;
  --trk-bass: #5e7d42;
  --trk-drums: #a8553a;
  --parts: #a8792b, #3f6e9e, #5e7d42, #a35c45, #7d6389, #8f7a45, #3f8574, #9a6a3a;
  color-scheme: light;
}

/* Dark: walnut and charcoal */
:root[data-theme="dark"] {
  --bg0: #171512;
  --bg1: #1d1a17;
  --bg2: #24201c;
  --bg3: #2d2924;
  --bg4: #3a352e;
  --line: #322d27;
  --line2: #463f36;
  --edge: #0c0b09;
  --text: #ebe4d6;
  --text2: #b7ad9c;
  --text3: #857b6d;
  --accent: #d0a456;
  --accent2: #e6c88c;
  --accent-bg: rgba(208, 164, 86, .14);
  --accent-line: rgba(208, 164, 86, .5);
  --on-accent: #221a0c;
  --green: #93ad74;
  --green-bg: rgba(147, 173, 116, .16);
  --red: #c0634a;
  --blue: #7c97ad;
  --soft-red: #e0a08a;
  --lcd-bg: #12100d;
  --lcd-fg: #e2c891;
  --lcd-dim: #7a6c55;
  --lcd-line: #221e18;
  --paper: #f6f1e6;
  --ink: #2b2620;
  --mark: #a8442b;
  --scroll-thumb: #cfc5b2;
  --shadow: rgba(0, 0, 0, .45);
  --scrim: rgba(0, 0, 0, .55);
  --cv-grid-bar: rgba(255, 240, 215, .085);
  --cv-grid-beat: rgba(255, 240, 215, .035);
  --cv-tint: rgba(255, 240, 215, .018);
  --cv-past: rgba(0, 0, 0, .35);
  --cv-lane-sel: rgba(255, 255, 255, .03);
  --cv-tick: #5a5246;
  --cv-tick2: #3a352e;
  --cv-playhead: #ebe4d6;
  --cv-playing: #e2c891;
  --cv-note-on: #fbf3e2;
  --trk-melody: #d0a456;
  --trk-voice2: #c08368;
  --trk-voice3: #a08aa6;
  --trk-voice4: #c4a874;
  --trk-harmony: #86a89b;
  --trk-chords: #7c97ad;
  --trk-bass: #93ad74;
  --trk-drums: #bf6a4e;
  --parts: #d0a456, #7c97ad, #93ad74, #c08368, #a08aa6, #c4a874, #86a89b, #b48a5c;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg0);
  color: var(--text);
  font: 13px/1.4 var(--sans);
  overflow: hidden;
  user-select: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
/* Icon styling only; the engraved score manages its own SVG sizes and colours. */
.icon-btn svg, .tbtn svg, .search svg, .knob svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

#app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) 24px; height: 100vh; height: 100dvh; }

/* ---------------------------------------------------------------- controls */
.btn, .chip, select, .stepper button {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: 5px 10px;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.btn:hover, .chip:hover, select:hover, .stepper button:hover { background: var(--bg4); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { background: var(--accent2); }
.btn.danger { color: var(--soft-red); }
.btn.ghost { background: none; border-color: transparent; color: var(--text2); }
.btn.ghost:hover { background: var(--bg3); color: var(--text); }
.btn.small { padding: 3px 9px; font-size: 12px; }
.chip { padding: 3px 9px; font-size: 12px; color: var(--text2); }
.chip.on, .chip.toggle.on { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent2); }
select option, select optgroup { background: var(--bg2); }
.icon-btn { background: none; border: 0; color: var(--text2); padding: 6px; border-radius: var(--radius); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { background: var(--bg3); color: var(--text); }
#btnTheme .i-sun, :root[data-theme="dark"] #btnTheme .i-moon { display: none; }
:root[data-theme="dark"] #btnTheme .i-sun { display: block; }
input[type=number], input[type=text], input[type=search], textarea {
  background: var(--bg1); border: 1px solid var(--line2); border-radius: var(--radius); padding: 5px 8px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type=range] { accent-color: var(--accent); cursor: pointer; }

/* ---------------------------------------------------------------- top bar */
.topbar {
  display: flex; align-items: center; gap: 16px; padding: 0 12px; min-height: 58px;
  background: var(--bg2);
  border-bottom: 1px solid var(--edge);
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: 6px; }
.logo { font-weight: 600; font-size: 16px; letter-spacing: .2px; margin-right: 4px; white-space: nowrap; }
.logo span { color: var(--accent); font-weight: 500; }
.transport { display: flex; align-items: center; gap: 4px; }
.tbtn {
  width: 34px; height: 32px; display: grid; place-items: center;
  background: var(--bg3); border: 1px solid var(--line2); border-radius: var(--radius); cursor: pointer; color: var(--text2);
}
.tbtn:hover { color: var(--text); background: var(--bg4); }
.tbtn svg { width: 15px; height: 15px; }
.tbtn.play { width: 44px; color: var(--green); }
.tbtn.play svg { fill: currentColor; stroke: none; width: 17px; height: 17px; }
.tbtn.play .i-pause { display: none; }
.playing .tbtn.play .i-pause { display: block; }
.playing .tbtn.play .i-play { display: none; }
.playing .tbtn.play { background: var(--green-bg); border-color: var(--green); }
#btnStop svg, #btnHome svg, #btnPrev svg, #btnNext svg { fill: currentColor; }
.tbtn.toggle.on { color: var(--accent2); background: var(--accent-bg); border-color: var(--accent-line); }
.tbtn.small-label { width: auto; padding: 0 9px; font-size: 11.5px; font-weight: 500; }
.sep { width: 1px; height: 22px; background: var(--line2); margin: 0 5px; display: inline-block; }

.lcd {
  display: flex; align-items: stretch; height: 42px;
  background: var(--lcd-bg); border: 1px solid var(--edge); border-radius: var(--radius);
  font-family: var(--mono); color: var(--lcd-fg); min-width: 0;
}
.lcd-cell { padding: 3px 12px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--lcd-line); min-width: 0; }
.lcd-cell:last-child { border-right: 0; }
.lcd-cell label { font-size: 9.5px; letter-spacing: .6px; color: var(--lcd-dim); font-family: var(--sans); text-transform: uppercase; }
.lcd-cell > div { font-size: 18px; font-weight: 500; white-space: nowrap; }
.lcd-pos > div { min-width: 76px; }
.lcd-time > div { min-width: 78px; }
.lcd-sec > div { min-width: 36px; }
.lcd-chord > div { min-width: 120px; }
.lcd-chord small { font-size: 12px; color: var(--lcd-dim); margin-left: 8px; }
.lcd.countin { border-color: var(--accent); }

.tempo-key { display: flex; align-items: center; gap: 10px; }
.field-group { display: grid; gap: 1px; }
.field-group > label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); }
.field-group .sub { font-size: 10.5px; color: var(--text3); white-space: nowrap; }
.stepper { display: flex; align-items: center; }
.stepper button { padding: 2px 8px; border-radius: 0; height: 26px; }
.stepper button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.stepper button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.stepper input, .stepper select { border-radius: 0; height: 26px; border-left: 0; border-right: 0; text-align: center; }
.stepper input { width: 52px; font-variant-numeric: tabular-nums; font-weight: 600; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { display: none; }
.stepper select { width: 128px; padding: 0 4px; }
.master-mini { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.master-mini input[type=range] { width: 84px; }
.mini-meter { display: flex; gap: 2px; height: 32px; width: 11px; }
.mini-meter i { flex: 1; background: var(--bg1); border-radius: 2px; position: relative; overflow: hidden; }
.mini-meter i::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--lvl, 0%); background: linear-gradient(to top, var(--green) 70%, var(--accent) 88%, var(--red)); background-size: 100% 32px; background-position: bottom; }
.menu-wrap { position: relative; }
.menu { position: absolute; left: 0; top: calc(100% + 6px); background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px; padding: 4px; min-width: 260px; display: none; z-index: 50; box-shadow: 0 14px 30px var(--shadow); }
.menu.open { display: block; }
.menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 10px; border-radius: 4px; cursor: pointer; }
.menu button:hover { background: var(--bg4); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }

/* ---------------------------------------------------------------- main */
.main { display: flex; min-height: 0; }
.library {
  width: var(--lib-w); flex-shrink: 0; background: var(--bg1); border-right: 1px solid var(--edge);
  display: flex; flex-direction: column; min-height: 0;
}
.library.hidden { display: none; }
.lib-head { padding: 10px; display: flex; flex-direction: column; gap: 7px; border-bottom: 1px solid var(--line); }
.search { position: relative; }
.search svg, .search .notes-tag { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text3); }
.search .notes-tag { font-size: 14px; width: auto; height: auto; }
.search input { width: 100%; padding-left: 30px; height: 30px; }
.filters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.filters select { font-size: 12px; padding: 3px 4px; min-width: 0; }
.lib-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.lib-count { font-size: 11px; color: var(--text3); }
.lib-list { overflow-y: auto; flex: 1; padding: 4px 6px 10px; }
.lib-item { padding: 6px 9px; border-radius: var(--radius); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; border: 1px solid transparent; }
.lib-item:hover { background: var(--bg3); }
.lib-item.active { background: var(--accent-bg); border-color: var(--accent-line); }
.lib-item .nm { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-item .meta { grid-column: 1 / -1; font-size: 11.5px; color: var(--text3); display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; }
.lib-item .cnt { font-size: 10.5px; color: var(--text3); align-self: center; }
.lib-item .mine-tag { color: var(--accent); font-size: 10.5px; }
.lib-item .mine-cell { display: flex; align-items: center; gap: 4px; align-self: center; }
.lib-del { border: 0; background: none; color: var(--text3); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 4px; cursor: pointer; visibility: hidden; }
.lib-item:hover .lib-del, .lib-item.active .lib-del { visibility: visible; }
.lib-del:hover { color: #fff; background: var(--red); }
.badge { font-size: 10.5px; padding: 0 6px; border-radius: 3px; border: 1px solid var(--line2); color: var(--text2); text-transform: capitalize; }
.lib-more { display: block; margin: 8px auto; }
.lib-empty { color: var(--text3); padding: 20px 10px; text-align: center; }

.workspace { flex: 1; display: flex; flex-direction: column; min-width: 380px; min-height: 0; }
.main { position: relative; }
.tune-bar { min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 4px 12px; background: var(--bg1); border-bottom: 1px solid var(--edge); min-width: 0; flex-wrap: wrap; }
.tune-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 180px; }
.tune-title h1 { font-size: 16px; margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tune-meta { display: flex; gap: 6px; font-size: 12px; color: var(--text2); white-space: nowrap; }
.star { background: none; border: 0; font-size: 18px; color: var(--text3); cursor: pointer; padding: 0 2px; line-height: 1; }
.star.on { color: var(--accent); }
.tune-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tune-tools select { max-width: 200px; font-size: 12px; }
#zoomRange { width: 90px; }

.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--radius); overflow: hidden; }
.seg button { background: var(--bg3); border: 0; border-right: 1px solid var(--line2); padding: 4px 10px; cursor: pointer; font-size: 12px; color: var(--text2); }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--bg4); }
.seg button.on { background: var(--accent-bg); color: var(--accent2); }
.seg button:disabled { opacity: .4; cursor: default; }
.quick-loop { margin-left: 2px; }
.quick-loop button { padding: 0 8px; height: 30px; font-size: 11.5px; }

/* ---------------------------------------------------------------- arrange */
.arrange { flex: 1; display: grid; grid-template-columns: var(--hdr-w) 1fr; min-height: 120px; background: var(--bg0); }
.track-headers { display: flex; flex-direction: column; border-right: 1px solid var(--edge); background: var(--bg1); min-height: 0; z-index: 2; }
.ruler-corner { height: 46px; border-bottom: 1px solid var(--edge); display: grid; grid-template-rows: 18px 28px; font-size: 10.5px; color: var(--text3); flex-shrink: 0; }
.ruler-corner > div { display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; }
.corner-sections { background: var(--bg2); border-bottom: 1px solid var(--line); }
.headers-viewport { flex: 1; overflow: hidden; position: relative; }
.headers-inner { position: absolute; left: 0; right: 0; top: 0; }
.track-header {
  position: relative; border-bottom: 1px solid var(--line); padding: 6px 8px 5px 13px; display: flex; flex-direction: column; gap: 5px;
  background: var(--bg2); cursor: pointer; overflow: hidden;
}
.track-header::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc); }
.track-header.selected { background: var(--bg3); }
.track-header.muted { opacity: .5; }
.th-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.th-name { font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-inst { font-size: 11px; color: var(--text2); background: var(--bg1); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 112px; cursor: pointer; }
.th-inst:hover { border-color: var(--tc); color: var(--text); }
.ms { width: 22px; height: 20px; font-size: 10px; font-weight: 600; border-radius: 4px; border: 1px solid var(--line2); background: var(--bg3); cursor: pointer; padding: 0; color: var(--text2); }
.ms.m.on { background: var(--red); border-color: var(--red); color: #fff; }
.ms.s.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.th-row input[type=range] { flex: 1; min-width: 40px; height: 14px; }
.th-meter { margin-top: auto; height: 3px; background: var(--bg0); border-radius: 2px; overflow: hidden; }
.th-meter i { display: block; height: 100%; width: 0; background: var(--tc); }
.th-oct { font-size: 10px; color: var(--text3); font-family: var(--mono); }

.timeline { overflow: auto; position: relative; min-width: 0; background: var(--bg0); }
.timeline-content { position: relative; }
#timelineCanvas { position: sticky; left: 0; top: 0; display: block; cursor: crosshair; touch-action: pan-x pan-y; }
::-webkit-scrollbar { height: 11px; width: 11px; }
::-webkit-scrollbar-track { background: var(--bg1); }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 6px; border: 3px solid var(--bg1); }
.score-box::-webkit-scrollbar-track { background: var(--paper); }
.score-box::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-color: var(--paper); }

/* ---------------------------------------------------------------- dock */
.dock-resizer { height: 5px; cursor: ns-resize; background: var(--edge); touch-action: none; }
.dock-resizer:hover, .side-resizer:hover { background: var(--accent); }
.dock { height: var(--dock-h); display: flex; flex-direction: column; background: var(--bg1); min-height: 0; }
.dock-tabs, .notation-tabs { display: flex; gap: 2px; }
.dock-tabs { padding: 0 10px; background: var(--bg2); border-bottom: 1px solid var(--edge); flex-shrink: 0; }
.dock-tabs button, .notation-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 7px 12px 6px; cursor: pointer; color: var(--text2); }
.dock-tabs button:hover, .notation-tabs button:hover { color: var(--text); }
.dock-tabs button.active, .notation-tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.dock-body { flex: 1; min-height: 0; position: relative; }
.tab-pane { position: absolute; inset: 0; overflow: auto; padding: 12px 14px; display: none; }
.tab-pane.active { display: block; }

/* modules / knobs */
.modules { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.module { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px 10px; }
.module h3 { margin: 0 0 6px; font-size: 11px; color: var(--text3); font-weight: 500; display: flex; justify-content: space-between; gap: 10px; letter-spacing: .3px; }
.module .row { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }
.knob { width: 56px; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: ns-resize; touch-action: none; }
.knob svg { width: 38px; height: 38px; overflow: visible; }
.knob .track { stroke: var(--bg4); stroke-width: 4; fill: none; }
.knob .val { stroke: var(--kc, var(--accent)); stroke-width: 4; fill: none; }
.knob .cap { fill: var(--bg3); stroke: var(--line2); stroke-width: 1; }
.knob .ptr { stroke: var(--text); stroke-width: 2; }
.knob label { font-size: 10.5px; color: var(--text2); white-space: nowrap; pointer-events: none; }
.knob output { font-size: 10px; font-family: var(--mono); color: var(--text3); pointer-events: none; white-space: nowrap; }
.knob:hover output { color: var(--accent2); }
.ctl-select { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--text2); min-width: 92px; }
.ctl-select select { font-size: 12px; }
.adsr { width: 150px; height: 58px; background: var(--bg1); border-radius: 5px; border: 1px solid var(--line); }
.inst-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.inst-head .tname { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 7px; }
.inst-head .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tc); }
.inst-head select { min-width: 190px; }
.hint { font-size: 11.5px; color: var(--text3); }

/* harmony panel */
.harm-grid { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 12px; align-items: start; }
.creativity .scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text2); margin-bottom: 2px; }
.creativity input { width: 100%; }
.creativity .desc { font-size: 11.5px; color: var(--text2); min-height: 16px; margin-top: 2px; }
.form-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; font-size: 12px; }
.form-grid > label { color: var(--text2); }
.form-grid select { width: 100%; }
.chart { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 4px; }
.chart .cbar { background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px 5px; min-height: 44px; cursor: pointer; }
.chart .cbar:hover { border-color: var(--blue); }
.chart .cbar.now { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.chart .cbar .bn { font-size: 9.5px; color: var(--text3); font-family: var(--mono); display: flex; justify-content: space-between; }
.chart .cbar .chs { display: flex; gap: 4px; flex-wrap: wrap; font-weight: 600; font-size: 13px; }
.chart .cbar .chs span.ovr { color: var(--soft-red); }
.chart .cbar .chs span.rn { font-size: 10px; color: var(--text3); font-weight: 400; align-self: flex-end; }
.chart .sec-label { grid-column: 1 / -1; font-size: 11.5px; font-weight: 600; color: var(--text2); margin-top: 4px; }

/* mixer */
.mixer { display: flex; gap: 6px; align-items: stretch; height: 100%; min-height: 230px; }
.strip { width: 124px; flex-shrink: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.strip::before { content: ''; position: absolute; left: 6px; right: 6px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--tc, var(--text3)); }
.strip .sname { font-size: 11.5px; font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: 2px; }
.knob-row { display: flex; justify-content: center; }
.strip .knob { width: 38px; }
.strip .knob svg { width: 26px; height: 26px; }
.strip .knob label, .strip .knob output { font-size: 9.5px; }
.fader-wrap { display: flex; gap: 6px; flex: 1; min-height: 70px; align-items: stretch; }
.fader { writing-mode: vertical-lr; direction: rtl; width: 22px; min-height: 60px; margin: 0; }
.vmeter { width: 7px; background: var(--bg0); border-radius: 3px; position: relative; overflow: hidden; }
.vmeter i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(to top, var(--green) 65%, var(--accent) 85%, var(--red)); }
.strip .db { font-family: var(--mono); font-size: 10px; color: var(--text2); }
.strip .ms-row { display: flex; gap: 4px; }
.strip.master { width: 150px; background: var(--bg3); }
.strip.master .row .knob { width: 34px; }
.strip.fx { width: auto; min-width: 200px; align-items: stretch; }
.strip.fx h4 { margin: 2px 0 0; font-size: 11px; font-weight: 500; color: var(--text3); text-align: center; }
.strip.fx .row { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }

/* performance */
.perf-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.toggle-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.switch { width: 30px; height: 17px; border-radius: 99px; background: var(--bg4); position: relative; cursor: pointer; border: 0; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--text2); transition: left .12s; }
.switch.on { background: var(--accent); }
.switch.on::after { left: 15px; background: var(--on-accent); }

/* ---------------------------------------------------------------- notation panel */
.side-resizer { width: 5px; cursor: ew-resize; background: var(--edge); flex-shrink: 0; touch-action: none; }
.side-resizer.hidden { display: none; }
.notation { width: min(var(--note-w), 55vw); flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg1); min-height: 0; min-width: 260px; }
.notation.collapsed { display: none; }
.notation-head { display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--bg2); border-bottom: 1px solid var(--edge); min-height: 36px; }
.score-box { flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--paper); border-left: 1px solid var(--line); color: var(--ink); padding: 10px 12px 30px; }
#scoreOut { cursor: pointer; }
/* Playing note: highlighter box behind it plus a strong ink colour (the score is always on paper). */
#scoreOut .abc-now, #scoreOut .abc-now path { fill: #b01c0c !important; stroke: #b01c0c; }
#scoreOut .abc-hl { fill: #ffc21a; opacity: .85; pointer-events: none; }
.notation.both .score-box { flex: var(--split, 60) 1 0; min-height: 80px; }
.notation.both .abc-box { flex: calc(100 - var(--split, 60)) 1 0; min-height: 60px; }
.note-split { height: 6px; flex-shrink: 0; cursor: ns-resize; background: var(--edge); touch-action: none; }
.note-split:hover { background: var(--accent); }
.abc-box { flex: 1; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.abc-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.abc-note { line-height: 1.35; }
.abc-view { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; user-select: text; color: var(--text); }
.abc-view mark { background: #ffc928; color: #1d1608; border-radius: 2px; padding: 0 1px; box-shadow: 0 0 0 1px #c99400; }
.abc-edit { flex: 1; width: 100%; min-height: 260px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; resize: none; user-select: text; }

/* ---------------------------------------------------------------- status / misc */
.statusbar { display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 11px; color: var(--text3); background: var(--bg2); border-top: 1px solid var(--edge); white-space: nowrap; overflow: hidden; }
.grow { flex: 1; }
.modal { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; z-index: 100; }
.modal-card { background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px; padding: 20px 24px; max-width: 560px; width: calc(100% - 32px); box-shadow: 0 30px 60px var(--shadow); }
.modal-card h2 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }
.help-grid { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin-bottom: 16px; font-size: 12.5px; }
kbd { font-family: var(--mono); font-size: 11px; background: var(--bg4); border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; white-space: nowrap; justify-self: start; }
.toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); background: var(--bg4); border: 1px solid var(--line2); padding: 8px 16px; border-radius: 8px; box-shadow: 0 10px 30px var(--shadow); z-index: 200; font-size: 12.5px; }

/* Rendered off-screen while preparing; shown only on paper. */
#printArea { position: absolute; left: -10000px; top: 0; width: 720px; background: #fff; color: #000; }

@media print {
  @page { margin: 14mm; }
  /* The dark theme's color-scheme would otherwise paint the page margins dark. */
  :root, :root[data-theme] { color-scheme: light !important; background: #fff !important; }
  html, body { height: auto; overflow: visible; background: #fff; color: #000; }
  #app, .modal, .toast { display: none !important; }
  #printArea { position: static; width: auto; font: 11pt/1.4 var(--sans); }
  #printArea .print-meta { font-size: 9.5pt; color: #444; margin-bottom: 4mm; }
  #printArea h3 { font-size: 11pt; margin: 8mm 0 2mm; page-break-after: avoid; }
  #printArea .print-abc { font: 9.5pt/1.45 var(--mono); white-space: pre-wrap; margin: 0; }
}

.lcd, .transport, .brand { flex-shrink: 0; }

/* ===================================================================== responsive
   Layout is chosen in JS (and before first paint in index.html) and exposed as
   :root[data-layout="desktop|tablet|phone"]; the phone layout also uses
   :root[data-view="library|tracks|score|panels"] for its full-screen views. */

/* Controls that don't fit scroll sideways instead of disappearing. */
.topbar-strip {
  display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 2px 0;
}
.topbar-strip > * { flex-shrink: 0; }
.topbar-strip .master-mini { margin-left: auto; }
/* Desktop windows too narrow for one line: the control group gets its own row. */
.topbar.two-rows { flex-wrap: wrap; row-gap: 6px; padding-top: 6px; padding-bottom: 6px; }
.topbar.two-rows .topbar-strip { flex-basis: 100%; order: 3; }
.topbar-strip::-webkit-scrollbar { height: 4px; }
.mobile-nav, .scrim, .strip-toggle { display: none; }
#btnFile .i-menu { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tbtn.small-label { white-space: nowrap; }

/* Wide desktop niceties only. */
@media (max-width: 1700px) { :root[data-layout="desktop"] #zoomRange { display: none; } }
@media (max-width: 1600px) { :root[data-layout="desktop"] .lcd-time { display: none; } .topbar { gap: 10px; } }
@media (max-width: 1440px) {
  .tempo-key .sub, .master-mini .field-group > label { display: none; }
  :root { --note-w: 460px; --lib-w: 250px; --hdr-w: 200px; }
}

/* -------------------------------------------------- tablet + phone: two-row top bar */
:root:not([data-layout="desktop"]) #app { grid-template-rows: auto minmax(0, 1fr) auto auto; }
:root:not([data-layout="desktop"]) .topbar {
  flex-wrap: wrap; row-gap: 6px; padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top));
}
:root:not([data-layout="desktop"]) .topbar-strip { flex-basis: 100%; order: 3; gap: 12px; }
:root:not([data-layout="desktop"]) .topbar-strip .master-mini { margin-left: 0; }
:root:not([data-layout="desktop"]) .strip-toggle { display: grid; flex-shrink: 0; }
:root:not([data-layout="desktop"]) .strip-toggle.on { color: var(--accent2); background: var(--accent-bg); }
:root:not([data-layout="desktop"]) .topbar.strip-closed .topbar-strip { display: none; }
:root:not([data-layout="desktop"]) .dock-tabs { overflow-x: auto; scrollbar-width: none; }
:root:not([data-layout="desktop"]) .dock-tabs button { white-space: nowrap; }
:root:not([data-layout="desktop"]) .tune-tools::-webkit-scrollbar, .topbar-strip::-webkit-scrollbar { height: 3px; }
:root:not([data-layout="desktop"]) .lcd { flex: 1; min-width: 0; height: 40px; }
:root:not([data-layout="desktop"]) .lcd-time { display: none; }
:root:not([data-layout="desktop"]) .tbtn { height: 34px; }
:root:not([data-layout="desktop"]) .quick-loop button { height: 34px; }
:root:not([data-layout="desktop"]) .menu { position: fixed; left: 8px; top: 52px; max-height: 75vh; overflow-y: auto; min-width: min(300px, calc(100vw - 16px)); }
:root:not([data-layout="desktop"]) .menu button { padding: 10px 12px; }
:root:not([data-layout="desktop"]) .tune-tools { flex-wrap: nowrap; overflow-x: auto; min-width: 0; flex: 1 1 100%; scrollbar-width: thin; padding-bottom: 2px; }
:root:not([data-layout="desktop"]) .tune-bar, :root:not([data-layout="desktop"]) .tune-title { min-width: 0; }
:root:not([data-layout="desktop"]) .tune-tools > * { flex-shrink: 0; }
:root:not([data-layout="desktop"]) .tune-tools .sep { display: none; }
:root:not([data-layout="desktop"]) #zoomRange { display: inline-block; }
:root:not([data-layout="desktop"]) .harm-grid { grid-template-columns: 1fr; }
:root:not([data-layout="desktop"]) .mixer { overflow-x: auto; }

/* -------------------------------------------------- tablet: library drawer */
:root[data-layout="tablet"] { --lib-w: min(340px, 85vw); --hdr-w: 176px; }
:root[data-layout="tablet"] .library,
:root[data-layout="tablet"] .library.hidden {
  display: flex; position: absolute; top: 0; bottom: 0; left: 0; z-index: 40;
  transform: translateX(-102%); transition: transform .2s ease; box-shadow: 8px 0 24px var(--shadow);
}
:root[data-layout="tablet"] .library.open { transform: none; }
:root[data-layout="tablet"] .main.drawer-open .scrim { display: block; position: absolute; inset: 0; z-index: 35; background: var(--scrim); }
:root[data-layout="tablet"] .workspace { min-width: 0; }
:root[data-layout="tablet"] .notation { min-width: 240px; width: min(var(--note-w), 46vw); }

/* -------------------------------------------------- phone: one full-screen view at a time */
:root[data-layout="phone"] { --hdr-w: 136px; --lib-w: 100%; }
:root[data-layout="phone"] .logo, :root[data-layout="phone"] #toggleLibrary,
:root[data-layout="phone"] #btnNotation, :root[data-layout="phone"] .statusbar,
:root[data-layout="phone"] .dock-resizer, :root[data-layout="phone"] .side-resizer { display: none !important; }
:root[data-layout="phone"] .topbar { gap: 6px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
:root[data-layout="phone"] .transport { gap: 3px; }
:root[data-layout="phone"] .tbtn { width: 30px; }
:root[data-layout="phone"] .tbtn.play { width: 38px; }
/* Text buttons (Tap, Count-in) size to their label, not the icon-button width. */
:root[data-layout="phone"] .tbtn.small-label { width: auto; padding: 0 8px; }
:root[data-layout="phone"] .lcd-cell { padding: 2px 7px; }
:root[data-layout="phone"] .lcd-cell > div { font-size: 15px; }
:root[data-layout="phone"] .lcd-pos > div { min-width: 0; }
:root[data-layout="phone"] .lcd-chord > div { min-width: 0; }
:root[data-layout="phone"] .lcd-chord small, :root[data-layout="phone"] .lcd-sec { display: none; }
:root[data-layout="phone"] .lcd { overflow: hidden; }
:root[data-layout="phone"] .lcd-chord { flex: 1; min-width: 0; }
:root[data-layout="phone"] .ms { width: 24px; }
:root[data-layout="phone"] #btnFile { padding: 6px; display: grid; place-items: center; }
:root[data-layout="phone"] #btnFile span { display: none; }
:root[data-layout="phone"] #btnFile .i-menu { display: block; }
:root[data-layout="phone"] .lcd-cell label { font-size: 8.5px; letter-spacing: .3px; }
:root[data-layout="phone"] .topbar-strip .field-group > label, :root[data-layout="phone"] .mini-meter { display: none; }
:root[data-layout="phone"] .master-mini input[type=range] { width: 72px; }
:root[data-layout="phone"] .master-mini { gap: 4px; }

:root[data-layout="phone"] .main > * { display: none; }
:root[data-layout="phone"][data-view="library"] .library,
:root[data-layout="phone"][data-view="library"] .library.hidden { display: flex; width: 100%; }
:root[data-layout="phone"][data-view="tracks"] .workspace,
:root[data-layout="phone"][data-view="panels"] .workspace { display: flex; min-width: 0; width: 100%; }
:root[data-layout="phone"][data-view="tracks"] .dock { display: none; }
:root[data-layout="phone"][data-view="panels"] .arrange { display: none; }
:root[data-layout="phone"][data-view="panels"] .dock { flex: 1; height: auto; }
:root[data-layout="phone"][data-view="score"] .notation,
:root[data-layout="phone"][data-view="score"] .notation.collapsed { display: flex; width: 100%; min-width: 0; }

:root[data-layout="phone"] .tune-bar { padding: 4px 8px; gap: 6px; }
:root[data-layout="phone"] .tune-title { flex-basis: 100%; }
/* Short (landscape) phones: tune title and tools share one row. */
@media (max-height: 499px) {
  :root[data-layout="phone"] .tune-title { flex: 0 1 auto; max-width: 38%; }
  :root[data-layout="phone"] .tune-meta { display: none; }
  :root[data-layout="phone"] .tune-bar { flex-wrap: nowrap; }
  :root[data-layout="phone"] .mobile-nav button { flex-direction: row; justify-content: center; gap: 6px; padding: 5px 0; }
}
:root[data-layout="phone"] .tune-title h1 { font-size: 15px; }
:root[data-layout="phone"] .track-header { padding: 5px 6px 4px 10px; }
:root[data-layout="phone"] .th-row input[type=range] { display: none; }
:root[data-layout="phone"] .th-inst { max-width: none; flex: 1; }
:root[data-layout="phone"] .ruler-corner { font-size: 9.5px; }
:root[data-layout="phone"] .dock-tabs { overflow-x: auto; scrollbar-width: none; padding: 0 4px; }
:root[data-layout="phone"] .dock-tabs button { white-space: nowrap; padding: 10px 12px 9px; }
:root[data-layout="phone"] .tab-pane { padding: 10px; }
:root[data-layout="phone"] .module { max-width: 100%; }
:root[data-layout="phone"] .notation-tabs button { padding: 10px 14px 9px; }
:root[data-layout="phone"] .lib-head { padding: 8px; }
:root[data-layout="phone"] .lib-item { padding: 9px 10px; }
:root[data-layout="phone"] .modal-card { max-height: 85vh; overflow-y: auto; padding: 16px; }
:root[data-layout="phone"] .help-grid { grid-template-columns: 1fr; gap: 2px; }
:root[data-layout="phone"] .help-grid span { margin-bottom: 6px; }
:root[data-layout="phone"] .toast { bottom: 76px; max-width: calc(100vw - 32px); }

:root[data-layout="phone"] .mobile-nav {
  display: flex; background: var(--bg2); border-top: 1px solid var(--edge);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 7px 0 6px; color: var(--text3); font-size: 11px; cursor: pointer;
}
.mobile-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mobile-nav button.active { color: var(--accent2); }
.mobile-nav button.active svg { stroke-width: 2.2; }

/* Touch screens: no hover, so show hover-only controls and enlarge small targets. */
@media (hover: none) {
  .lib-del { visibility: visible; }
  .ms { width: 28px; height: 26px; }
  .chip { padding: 5px 11px; }
  .btn.small { padding: 5px 10px; }
  .stepper button { min-width: 32px; height: 32px; }
  .stepper input, .stepper select { height: 32px; }
  .switch { width: 36px; height: 20px; }
  .switch::after { width: 16px; height: 16px; }
  .switch.on::after { left: 18px; }
}

/* Rows that run out of room wrap onto another line on every device, so no
   control is ever cut off or hidden behind a sideways scroll. */
.topbar-strip { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
:root:not([data-layout="desktop"]) .tune-tools { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
:root:not([data-layout="desktop"]) .dock-tabs { flex-wrap: wrap; overflow: visible; }
/* Phones: shorter tab labels so the four tabs fit on one line. */
:root[data-layout="phone"] .tab-long { display: none; }

/* Phones: two compact control lines. Master volume lives in the Mixer, and theme
   and help are in the ☰ menu, so the strip only carries playing controls. */
:root[data-layout="phone"] .topbar-strip .master-mini { display: none; }
:root[data-layout="phone"] .topbar-strip { gap: 8px; }
:root[data-layout="phone"] .stepper input { width: 44px; }
:root[data-layout="phone"] .stepper select { width: 88px; }
:root[data-layout="phone"] .stepper button { min-width: 30px; padding: 2px 6px; }

/* Phones: mixer strips wrap into a grid you scroll down, instead of running off the side. */
:root[data-layout="phone"] .mixer { flex-wrap: wrap; height: auto; overflow: visible; }
:root[data-layout="phone"] .strip { width: calc(50% - 3px); height: 270px; }
:root[data-layout="phone"] .strip.fx, :root[data-layout="phone"] .strip.master { width: 100%; height: auto; }
:root[data-layout="phone"] .strip.master .fader-wrap { min-height: 150px; justify-content: center; }

/* Phones: Stop already returns to the start, so the separate ⏮ button makes way for the LCD. */
:root[data-layout="phone"] #btnHome { display: none; }
:root[data-layout="phone"] .lcd-chord > div { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) {
  :root[data-layout="phone"] .lcd-cell { padding: 2px 5px; }
  :root[data-layout="phone"] .lcd-cell > div { font-size: 13.5px; }
  :root[data-layout="phone"] .topbar { gap: 4px; }
}
:root[data-layout="phone"] .lcd-chord > div.long { font-size: 11.5px; }

/* TheSession library: download / status panel in the library sidebar */
.session-box { font-size: 11.5px; color: var(--text3); display: flex; flex-direction: column; gap: 6px; }
.session-box:empty { display: none; }
.session-box .session-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.session-box .session-line .grow { flex: 1; }
.session-card { background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px; padding: 10px; color: var(--text2); display: flex; flex-direction: column; gap: 8px; line-height: 1.4; }
.session-card strong { color: var(--text); font-size: 12.5px; }
.session-card a { color: var(--accent2); }
.session-progress { height: 6px; background: var(--bg0); border-radius: 3px; overflow: hidden; }
.session-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
/* Size unknown (the file arrives compressed): a band sweeps across instead. */
.session-progress.busy i { width: 30% !important; transition: none; animation: session-sweep 1.3s ease-in-out infinite; }
@keyframes session-sweep { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .session-progress.busy i { animation: none; width: 100% !important; opacity: .5; } }

/* Restore My Library dialog */
.modal-note { margin: 0 0 12px; font-size: 12.5px; color: var(--text2); line-height: 1.45; }
.backup-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-height: 50vh; overflow-y: auto; }
.backup-list .btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto; padding: 7px 10px; text-align: left; white-space: normal; }
.backup-list .btn span { font-size: 11.5px; color: var(--text3); }
.session-error { color: var(--soft-red); }

/* ---------------------------------------------------------------- Pro: chip, locks, badges, dialog */
.pro-chip { border: 1px solid var(--accent-line); background: var(--accent-bg); color: var(--accent2); border-radius: 999px; padding: 2px 10px; font: 600 11.5px var(--sans); cursor: pointer; white-space: nowrap; }
.pro-chip:hover { background: var(--accent); color: var(--on-accent); }
.pro-chip.on { background: none; border-color: var(--line2); color: var(--text2); font-weight: 500; }
.lock-icon { display: inline-flex; vertical-align: -2px; margin-left: 4px; }
.lock-icon svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: .75; }
.menu .lock-icon { float: right; margin-top: 2px; }
.pro-locked { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.pro-locked select, .pro-locked input, .pro-locked label, .pro-locked button { pointer-events: none; opacity: .55; }
.pro-unlock { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; }
.pro-unlock .lock-icon { margin: 0; }
.demo-badge { margin-left: 6px; font-size: 10px; font-weight: 600; padding: 0 5px; border-radius: 3px; color: var(--accent2); background: var(--accent-bg); border: 1px solid var(--accent-line); vertical-align: 1px; }
.demo-note { font-size: 11.5px; color: var(--accent2); background: var(--accent-bg); border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
:root[data-layout="phone"] .demo-note { display: none; }
.storage-note { font-size: 11.5px; color: var(--text2); background: var(--bg3); border: 1px dashed var(--line2); border-radius: var(--radius); padding: 6px 8px; margin-top: 6px; }
.storage-note[hidden], .demo-note[hidden] { display: none; }

.pro-card { max-width: 520px; max-height: calc(100vh - 32px); overflow: auto; }
.pro-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pro-head h2 { margin: 0; }
.pro-head .icon-btn { font-size: 20px; line-height: 1; }
.pro-word { color: var(--accent); }
.pro-body p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.pro-body h3 { font-size: 13px; margin: 16px 0 6px; }
.pro-list { margin: 0 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.pro-small { font-size: 12px !important; color: var(--text2); }
.pro-msg { font-size: 13px; padding: 8px 10px; border-radius: var(--radius); background: var(--bg3); }
.pro-msg.lead { font-weight: 600; background: none; padding: 0; }
.pro-msg.ok { background: var(--green-bg); color: var(--text); }
.pro-msg.warn { background: var(--accent-bg); }
.pro-msg.err { background: none; color: var(--red); padding: 4px 0; }
.pro-buy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.pro-buy .pro-small { flex-basis: 100%; margin: 0; }
.btn.big { padding: 8px 16px; font-size: 14px; }
.pro-form { display: flex; gap: 8px; margin: 0 0 8px; }
.pro-input { flex: 1; min-width: 0; font: 15px var(--mono); letter-spacing: .5px; padding: 7px 10px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--bg3); color: var(--text); }
.pro-input[type="email"] { font-family: var(--sans); letter-spacing: 0; }
.pro-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 10px; }
.linklike { background: none; border: none; padding: 0; color: var(--blue); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.pro-keyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.pro-key { font: 17px var(--mono); letter-spacing: 1px; background: var(--bg3); border: 1px solid var(--line); padding: 5px 10px; border-radius: var(--radius); }
.pro-table { border-collapse: collapse; font-size: 13px; margin: 6px 0 4px; }
.pro-table th { text-align: left; color: var(--text2); font-weight: 500; padding: 3px 14px 3px 0; vertical-align: top; }
.pro-table td { padding: 3px 0; }
.pro-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.pro-devices { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.pro-device { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; background: var(--bg3); border-radius: var(--radius); font-size: 13px; }
.pro-device span { color: var(--text2); }
.pro-safari { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 12px !important; }