* { box-sizing: border-box; }
html, body, #root { width: 100%; min-width: 0; min-height: 100%; margin: 0; }
body { min-height: 100vh; overflow: hidden; color: var(--text); background: var(--bg); font: var(--fw-regular) var(--type-body-size)/1.5 var(--font-ui); }
button, input, select, textarea { color: inherit; font: inherit; }
button, select { cursor: pointer; }
button:disabled, select:disabled { cursor: not-allowed; opacity: .42; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { font-size: var(--type-h1-size); font-weight: var(--fw-semibold); line-height: 1.1; letter-spacing: -.04em; }
h2 { font-size: var(--type-h2-size); font-weight: var(--fw-semibold); line-height: 1.15; letter-spacing: -.03em; }
h3 { font-size: var(--type-h3-size); font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: 0; }
h4 { font-size: var(--type-h4-size); font-weight: var(--fw-semibold); line-height: 1.3; letter-spacing: 0; }
svg { display: block; width: 17px; height: 17px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
td { font-size: var(--type-table-body-size); font-weight: var(--fw-regular); }
th { position: sticky; top: 0; z-index: 1; color: var(--muted); background: var(--panel-soft); font-size: var(--type-table-head-size); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
tbody tr:hover td { background: var(--panel-hover); }
pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
mark { padding: 1px 2px; color: var(--state-active-text); background: var(--state-active); }
.hidden-input { display: none; }
/* Unified Ableton-style Button System */
button, .btn, .icon-btn, .tab-btn, .bookmark-btn, .results-btn {
  border-radius: var(--btn-radius);
  border: 1px solid var(--button-border);
  color: var(--button-text);
  background: var(--button-bg);
  font-size: var(--type-button-size);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
}
.select, .input {
  min-height: var(--control-height); border: var(--border-hair) solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); background-color: var(--panel-raised); font-size: var(--type-button-size); font-weight: var(--fw-regular);
}
/* Verbindliche Buttonform: eine Hoehe, ein Radius, ein waagerechtes Polster.
   Senkrecht traegt der Knopf kein eigenes Polster - die Hoehe kommt aus
   --btn-h, damit ueberall gleich wenig Luft ueber und unter der Schrift steht. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h); padding: 0 var(--btn-pad-x); }
.select, .input { padding: var(--legacy-space-1) var(--legacy-space-3);  border-radius: var(--radius-sm); }
.icon-btn, .bookmark-btn, .results-btn { display: inline-grid; place-items: center; min-width: var(--btn-h); min-height: var(--btn-h); padding: 0 6px; }
.btn:hover, .icon-btn:hover, .tab-btn:hover, .bookmark-btn:hover, .results-btn:hover { border-color: var(--button-border); background: var(--button-bg-hover); color: var(--button-text); }
.select:hover, .input:hover { border-color: var(--line-strong); background-color: var(--panel-hover); }
.input { background: var(--surface-inset); }

/* Marked / Active button state (Ableton Warp style: bright gold fill, dark text, exact same 1px neutral border) */
.btn.primary, .btn--primary, .btn.active, .tab-btn.active, .bookmark-btn[aria-pressed="true"], .icon-btn[aria-pressed="true"], .results-btn.is-open {
  border: 1px solid var(--button-border);
  color: var(--button-marked-text);
  background: var(--button-marked-bg);
  font-weight: var(--fw-semibold);
}
.btn.primary:hover, .btn--primary:hover, .btn.active:hover, .tab-btn.active:hover, .bookmark-btn[aria-pressed="true"]:hover, .icon-btn[aria-pressed="true"]:hover, .results-btn.is-open:hover {
  border-color: var(--button-border);
  background: var(--button-marked-bg-hover);
  color: var(--button-marked-text);
}
:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 1px; }