/* Yamaha-TF-Look: dieser Trainer soll sich wie der TF Editor / das TF1-Display anfühlen.
   Referenz: nahezu schwarzer Hintergrund, mittelgraue Bedienflächen mit Lichtkante,
   Helvetica-artige Schrift, weißer Rand am gewählten Kanal, orange ON-Balken,
   grüne EQ/HPF-Tasten, pinker Band-Griff. Wird als LETZTE Datei geladen und überschreibt die Basis. */
:root {
  --bg: #0b0b0c;
  --bg-2: #121213;
  --panel: #1a1a1b;
  --panel-2: #2a2a2c;
  --panel-3: #3a3a3d;
  --line: #2c2c2e;
  --line-2: #505054;
  --fg: #f2f2f2;
  --fg-2: #c2c2c6;
  --fg-3: #8c8c92;
  --font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 8px;
}
body { font-family: var(--font-ui); }

/* Kopfzeile wie der Scene-Bereich am TF: kleine Beschriftung, große dünne Nummer, Pegelbalken */
.topbar { background: linear-gradient(#1f1f21, #131314); border-bottom: 1px solid #000; box-shadow: 0 1px 0 #2c2c2e; }
.brand b { font-weight: 700; letter-spacing: .06em; font-size: 13px; color: var(--fg-2); }
.brand-sub { display: none; }
.scene { display: flex; flex-direction: column; justify-content: center; margin-left: 28px; min-width: 64px; }
.scene-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); line-height: 1; }
.scene-num { font-size: 34px; font-weight: 200; line-height: 1; letter-spacing: .02em; margin-top: 2px; }
.top-meters { width: 190px; height: 34px; margin-left: 20px; display: block; }
.topbar .spacer { flex: 1; }

/* Tasten: dunkelgrau mit Lichtkante, wie die TF-Bedienflächen */
.btn {
  background: linear-gradient(#3d3d40, #2b2b2d); border: 1px solid #0a0a0b; border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13); font-weight: 600;
}
.btn:hover { background: linear-gradient(#47474a, #323235); }
.btn:active { background: linear-gradient(#2b2b2d, #3a3a3d); box-shadow: none; }
.btn:disabled, .btn:disabled:hover { background: #242426; color: var(--fg-3); box-shadow: none; opacity: .7; }
.btn-primary, .btn-primary:hover { background: linear-gradient(#4bd24f, #238c29); border-color: #14541a; color: #fff; border-radius: 22px; padding: 0 22px; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.btn-primary:active { background: linear-gradient(#238c29, #3cb840); }
.btn-primary:disabled, .btn-primary:disabled:hover { background: #242426; border-color: #0a0a0b; color: var(--fg-3); text-shadow: none; }
.btn-ghost, .btn-ghost:hover { background: transparent; border-color: transparent; box-shadow: none; color: var(--fg-2); }
.btn-play { background: linear-gradient(#3d3d40, #2b2b2d); }
.btn-play.on, .btn-play.on:hover { background: linear-gradient(#f7983d, #c96a0f); border-color: #6f3a05; color: #fff; }

/* Lektionsspalte wie ein TF-Fenster */
.mission { background: #161617; border-right: 1px solid #000; box-shadow: 1px 0 0 #2c2c2e; }
.m-top { background: linear-gradient(#232325, #1a1a1b); border-bottom: 1px solid #000; box-shadow: 0 1px 0 #2c2c2e; }
.m-foot { background: linear-gradient(#1a1a1b, #131314); border-top: 1px solid #2c2c2e; }
.m-dots i.now { background: var(--green); }
.m-kicker { text-transform: uppercase; font-size: 11px; letter-spacing: .08em; color: var(--fg-3); }

/* Pult */
.console { background: #0b0b0c; }
.stage { background: #131314; border: 1px solid #000; box-shadow: 0 0 0 1px #2c2c2e; border-radius: var(--r-md); }
.strips { background: #101011; border: 1px solid #000; box-shadow: 0 0 0 1px #2c2c2e; border-radius: var(--r-md); }
.strip { background: linear-gradient(#333335, #2a2a2c); border: 1px solid #0a0a0b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); border-radius: var(--r-md); }
.strip-master { background: linear-gradient(#38383a, #2e2e30); }
.db-read { background: #09090a; border: 1px solid #000; font-family: var(--font-ui); font-weight: 600; font-size: 14px; border-radius: 3px; }
.cap { background: linear-gradient(#dcdcdf, #b4b4b8); border-radius: 3px; box-shadow: 0 2px 5px rgba(0, 0, 0, .7), inset 0 1px 0 #fff; }
.cap i { background: #3a3a3d; height: 2px; }
.groove { background: #050506; border-color: #000; box-shadow: 0 0 0 1px #3a3a3d; }
.btn-on { background: linear-gradient(#3b3b3e, #2a2a2c); border-color: #0a0a0b; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.btn-cue { background: linear-gradient(#3b3b3e, #2a2a2c); border-color: #0a0a0b; border-radius: 4px; }
.btn-name { background: transparent; border: 0; border-radius: 0; padding: 4px 2px 12px; gap: 0; }
.btn-name.sel { box-shadow: 0 0 0 2px #fff; border-radius: 3px; background: #1d1d1f; }
.btn-name .ic { display: block; width: 26px; height: 26px; color: #d4d4d8; margin-bottom: 2px; }
.btn-name .lb { font-size: 12px; font-weight: 700; color: #e6e6ea; letter-spacing: .04em; }
.btn-name .nm { font-size: 11px; font-weight: 500; color: var(--fg-3); }
.btn-name .bar { height: 4px; border-radius: 0; }
.tf-small, .ch-tab, .enc-step { background: linear-gradient(#3b3b3e, #2a2a2c); border-color: #0a0a0b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.ch-tab.sel { background: #1d1d1f; border-color: #fff; }
.enc-val { background: #09090a; border-color: #000; font-family: var(--font-ui); }
.band-panel { background: #0e0e0f; border: 1px solid #000; border-radius: 4px; }
.flow-node { background: linear-gradient(#333335, #29292b); border-color: #0a0a0b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.flow-node.active { border-color: #fff; }
.flow-info { background: #0e0e0f; }
.eq-canvas-wrap { background: #08080a; border: 1px solid #000; }