/* cyberSID 64 – Oberfläche. Drei Designs über Farbwerte: Neon (Standard, body.neon), C64-Blau (ohne Klasse) und Cyber-Nacht (body.cyber). */
:root {
  --bg: #2a2168; --panel: #352a86; --panel2: #2f257a; --line: #6a5cd6; --text: #cfc8ff; --dim: #8f86d6;
  --accent: #5ff2ff; --accent2: #ff5fd2; --cursor: #bfce72; --warn: #ffb454;
  --row4: rgba(255, 255, 255, 0.045); --row16: rgba(95, 242, 255, 0.10);
  --play: rgba(255, 95, 210, 0.28); --sel: rgba(95, 242, 255, 0.22); --glow: 0 0 6px rgba(95, 242, 255, 0.55);
  --note: #e8e3ff; --ins: #7ee0ff; --fx: #ffb3ea; --empty: #6f65b8;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
body.cyber {
  --bg: #07070f; --panel: #0f1024; --panel2: #0b0c1c; --line: #262b5c; --text: #cdd6ff; --dim: #6b73a8;
  --accent: #3ef2ff; --accent2: #ff3ea5; --cursor: #f4ff3e;
  --row4: rgba(62, 242, 255, 0.035); --row16: rgba(255, 62, 165, 0.08);
  --play: rgba(255, 62, 165, 0.25); --sel: rgba(62, 242, 255, 0.18); --glow: 0 0 8px rgba(62, 242, 255, 0.8);
  --note: #e6ecff; --ins: #3ef2ff; --fx: #ff6ec0; --empty: #333a70;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-size: 14px;
  display: grid; grid-template-rows: auto auto 1fr auto; grid-template-columns: minmax(0, 1fr); overflow: hidden;
}
/* Neon: fast schwarzer, leicht violetter Grund, knallige Neonfarben mit kräftigem Leuchten. */
body.neon {
  --bg: #05010c; --panel: #0e0420; --panel2: #090216; --line: #4a1a7a; --text: #f3e9ff; --dim: #9d80cc;
  --accent: #00f0ff; --accent2: #ff2bd6; --cursor: #f5ff00; --warn: #ffb000;
  --row4: rgba(0, 240, 255, 0.04); --row16: rgba(255, 43, 214, 0.12);
  --play: rgba(255, 43, 214, 0.32); --sel: rgba(0, 240, 255, 0.22);
  --glow: 0 0 8px rgba(0, 240, 255, 0.9), 0 0 20px rgba(255, 43, 214, 0.45);
  --note: #ffffff; --ins: #00f0ff; --fx: #ff2bd6; --empty: #3b2466;
}
body.neon .brand {
  background: linear-gradient(90deg, #00f0ff, #ff2bd6 55%, #f5ff00); -webkit-background-clip: text; background-clip: text;
  color: transparent; text-shadow: none; filter: drop-shadow(0 0 6px rgba(255, 43, 214, 0.75));
}
body.neon header, body.neon footer { border-color: var(--accent2); box-shadow: 0 0 14px rgba(255, 43, 214, 0.35); }
body.neon button.on { background: var(--accent2); border-color: var(--accent2); color: #fff; }
body.neon .row:nth-child(16n+1) .rn { color: var(--cursor); text-shadow: 0 0 6px var(--cursor); }
body.neon .cur { box-shadow: 0 0 10px var(--cursor); }
body.neon .tabs button.active { color: var(--cursor); box-shadow: inset 0 -2px 0 var(--cursor); text-shadow: 0 0 6px var(--cursor); }
body.cyber::after, body.neon::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}
button, select, input { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); padding: 3px 9px; white-space: nowrap; }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.on { background: var(--line); color: #fff; border-color: var(--accent); box-shadow: var(--glow); }
button.play { color: var(--accent); }
button.active { background: var(--accent2); color: #fff; }
input[type=range] { accent-color: var(--accent); padding: 0; }
.spacer { flex: 1; }
label { color: var(--dim); display: inline-flex; gap: 5px; align-items: center; }
.num { width: 4.6em; text-align: center; }
.hex1 { width: 2.2em; text-align: center; }

/* Kopfleiste */
header { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 2px solid var(--line); background: var(--panel2); }
header .grp { display: flex; gap: 5px; align-items: center; }
header .sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.brand { font-weight: 700; letter-spacing: 0.1em; color: var(--accent); text-shadow: var(--glow); font-size: 18px; white-space: nowrap; }
.title { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16em; min-width: 3em; flex-shrink: 1; }
.title b { color: var(--text); font-weight: 400; }
body.edit #btnEdit { background: var(--accent2); color: #fff; border-color: var(--accent2); }

/* Ablauf-Leiste */
.order { display: flex; gap: 6px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.order .positions { display: flex; gap: 4px; overflow-x: auto; max-width: 40vw; min-width: 7em; }
.order .pos { padding: 2px 7px; color: var(--dim); }
.order .pos b { color: var(--text); font-weight: 400; }
.order .pos.cur { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }
.order .pos.playing { background: var(--play); }
.order .pos.loop::before { content: "↻ "; color: var(--accent2); }
.lbl { color: var(--dim); }

main { display: grid; grid-template-columns: minmax(0, 1fr) 430px; min-height: 0; }

/* Pattern-Editor */
.pattern { display: grid; grid-template-rows: auto 1fr; min-height: 0; border-right: 2px solid var(--line); }
.voices, .row { display: grid; grid-template-columns: 62px repeat(3, 1fr); }
.voices { background: var(--panel2); border-bottom: 1px solid var(--line); }
.voices > div { padding: 5px 10px; display: flex; gap: 8px; align-items: center; border-left: 1px solid var(--line); white-space: nowrap; }
.voices > div:first-child { padding: 5px 6px; border-left: none; font-size: 12px; justify-content: flex-end; }
.voices .vh { cursor: pointer; user-select: none; }
.voices .vh.muted { opacity: 0.45; }
.voices .meter { flex: 1; height: 6px; background: var(--panel); border: 1px solid var(--line); position: relative; }
.voices .meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.rows { overflow-y: auto; font-size: 16px; line-height: 1.45; user-select: none; cursor: default; }
.row .rn { color: var(--dim); text-align: right; padding-right: 8px; }
.row .c { padding: 0 10px; border-left: 1px solid var(--line); white-space: pre; letter-spacing: 0.03em; }
.row:nth-child(4n+1) { background: var(--row4); }
.row:nth-child(16n+1) { background: var(--row16); }
.row:nth-child(16n+1) .rn { color: var(--accent); }
.row.playing { background: var(--play); }
.row.currow .rn { color: var(--cursor); }
.row .c.sel { background: var(--sel); }
.n { color: var(--note); } .i { color: var(--ins); } .f { color: var(--fx); } .e { color: var(--empty); }
.cur { outline: 2px solid var(--cursor); background: rgba(191, 206, 114, 0.18); }
body.edit .cur { outline-color: var(--accent2); background: rgba(255, 95, 210, 0.25); }

/* Seitenleiste */
aside { display: grid; grid-template-rows: auto auto 1fr; min-height: 0; background: var(--panel); }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { border: none; border-right: 1px solid var(--line); background: transparent; padding: 7px 14px; color: var(--dim); }
.tabs button.active { color: var(--accent); background: var(--panel2); box-shadow: inset 0 -2px 0 var(--accent); }
.side { overflow-y: auto; padding: 10px 12px; display: grid; gap: 9px; align-content: start; }
.side[hidden] { display: none; }
.inslist { border: 1px solid var(--line); height: 150px; overflow-y: auto; background: var(--panel2); }
.inslist div { padding: 1px 8px; cursor: pointer; white-space: nowrap; }
.inslist div span { color: var(--dim); margin-right: 8px; }
.inslist div.empty { color: var(--empty); }
.inslist .sel { background: var(--line); color: #fff; }
h3 { margin: 4px 0 0; font-size: 12px; letter-spacing: 0.15em; color: var(--dim); font-weight: 400; text-transform: uppercase; }
.line { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.env { height: 90px; border: 1px solid var(--line); background: var(--panel2); display: block; width: 100%; touch-action: none; cursor: crosshair; }
.hex4 { display: flex; gap: 10px; }
.wt { border: 1px solid var(--line); background: var(--panel2); }
.wt .wr { display: grid; grid-template-columns: 2.6em 5.5em 5.5em 2em; gap: 4px; padding: 2px 6px; align-items: center; }
.wt .wr.hd { color: var(--dim); border-bottom: 1px solid var(--line); }
.wt .wr.loop { box-shadow: inset 3px 0 0 var(--accent2); }
.wt input { width: 100%; padding: 1px 4px; }
.wt button { padding: 0 4px; }
.scope { height: 56px; width: 100%; display: block; background: var(--panel2); border-bottom: 1px solid var(--line); }
.hint.warn { color: var(--warn); }
.hint.warn:empty { display: none; }
.cutlive .bar { flex: 1; height: 8px; background: var(--panel2); border: 1px solid var(--line); position: relative; }
.cutlive .bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.cutlive #cutLiveV { min-width: 3em; text-align: right; }
.filterlist { border: 1px solid var(--line); background: var(--panel2); }
.filterlist .fr { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 2px 6px; cursor: pointer; }
.filterlist .fr:hover { background: var(--row16); }
.filterlist .nr { color: var(--dim); }
.filterlist .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filterlist .fr:not(.on) .t { color: var(--dim); }
.filterlist .t small { display: block; color: var(--dim); font-size: 11px; }
.filterlist button { padding: 0 6px; font-size: 12px; }
.filterlist .hint { margin: 0; padding: 6px; }
.hint { color: var(--dim); font-size: 12px; }

/* Fußzeile */
footer { display: flex; gap: 16px; padding: 5px 12px; border-top: 2px solid var(--line); background: var(--panel2); color: var(--dim); font-size: 13px; white-space: nowrap; }
footer #status { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
footer #status.warn { color: var(--warn); }
footer .audio { font-size: 12px; padding: 0 8px; color: var(--dim); border-color: var(--line); background: transparent; }
footer .audio.off { color: var(--bg); background: var(--accent); border-color: var(--accent); box-shadow: var(--glow); font-weight: 700; }

/* Menüs und Hilfe */
.menu[hidden] { display: none; }
.menu { position: fixed; z-index: 20; background: var(--panel2); border: 1px solid var(--accent); box-shadow: var(--glow); display: grid; min-width: 14em; }
.menu button { border: none; text-align: left; padding: 6px 12px; background: transparent; }
.menu button:hover { background: var(--line); color: #fff; }
.menu hr { border: none; border-top: 1px solid var(--line); margin: 3px 0; width: 100%; }
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.55); display: grid; place-items: center; }
.overlay[hidden] { display: none; }
.dialog { background: var(--panel); border: 2px solid var(--accent); box-shadow: var(--glow); max-width: 760px; max-height: 85vh; overflow-y: auto; padding: 16px 22px; }
.dialog h2 { margin-top: 0; color: var(--accent); letter-spacing: 0.1em; font-size: 16px; }
.dialog table { border-collapse: collapse; width: 100%; }
.dialog td { padding: 3px 10px 3px 0; vertical-align: top; }
.dialog td:first-child { color: var(--accent); white-space: nowrap; }
.dialog a { color: var(--accent); }
button:disabled { opacity: 0.45; cursor: default; border-color: var(--line); }
input:disabled { opacity: 0.45; cursor: default; }
.line.inactive .lbl, .line.inactive label { opacity: 0.45; }
#pwHint:empty { display: none; }

/* Preset-Browser */
.dialog.presets { width: 560px; display: grid; gap: 10px; }
.dialog.presets h2 { margin-bottom: 0; }
.presetlist { border: 1px solid var(--line); background: var(--panel2); height: 260px; overflow-y: auto; }
.presetlist div { padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.presetlist div:hover { background: var(--row16); }
.presetlist .sel { background: var(--line); color: #fff; }
.presethint { min-height: 2.6em; margin: 0; color: var(--text); }
.menu .demo small { color: var(--dim); margin-left: 8px; }
.menu button small { color: var(--dim); float: right; margin-left: 16px; }

/* Speicherstand, Links, Meine Songs */
.savestate { color: var(--dim); font-size: 12px; white-space: nowrap; border: 1px solid var(--line); padding: 1px 7px; cursor: default; }
.savestate.saved { color: var(--accent); border-color: var(--accent); }
.savestate.dirty { color: var(--warn); border-color: var(--warn); }
.dialog.links, .dialog.mysongs { width: 620px; display: grid; gap: 8px; }
.dialog.links p { margin: 4px 0 0; }
.dialog.links input { flex: 1; min-width: 0; }
.mysonglist { border: 1px solid var(--line); background: var(--panel2); max-height: 320px; overflow-y: auto; }
.mysong { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.mysong .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mysong .d { color: var(--dim); font-size: 12px; }
.mysonglist .hint { padding: 8px; margin: 0; }

/* Export */
.dialog.exportdlg { width: 560px; display: grid; gap: 8px; }
.dialog.exportdlg p { margin: 0; }
.progress { height: 10px; border: 1px solid var(--line); background: var(--panel2); position: relative; }
.progress[hidden] { display: none; }
.progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: var(--glow); }

/* Hilfe mit Reitern */
.dialog.helpdlg { width: 760px; height: 82vh; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; }
.dialog.helpdlg h2 { margin: 0; }
.helptabs { flex-wrap: wrap; }
.helpbody { overflow-y: auto; padding-right: 8px; line-height: 1.5; }
.helpbody h3 { margin: 14px 0 4px; font-size: 13px; color: var(--accent); }
.helpbody h3:first-child { margin-top: 0; }
.helpbody p { margin: 6px 0; }
.helpbody ul, .helpbody ol { margin: 6px 0; padding-left: 22px; }
.helpbody li { margin: 4px 0; }
.helpbody code, .helpbody kbd { color: var(--cursor); }
.helpbody kbd { border: 1px solid var(--line); padding: 0 5px; background: var(--panel2); }
.helpbody .tip { border-left: 3px solid var(--accent2); padding: 4px 10px; background: var(--panel2); }
.helpbody table.keys td:first-child { color: var(--cursor); padding-right: 16px; }
.helpbody dl.fx dt { color: var(--accent); margin-top: 12px; }
.helpbody dl.fx dt code { font-weight: 700; }
.helpbody dl.fx dd { margin: 2px 0 0 18px; }
.helpbody .ex { display: block; color: var(--dim); margin-top: 2px; }
.celldemo { display: inline-block; font-size: 20px; padding: 8px 14px; border: 1px solid var(--line); background: var(--panel2); margin: 4px 0 8px; }
.celldemo .legend { display: flex; gap: 14px; font-size: 11px; color: var(--dim); margin-top: 4px; }

/* Erklärmodus */
body.explain [data-help] { outline: 1px dashed var(--accent); outline-offset: 1px; cursor: help; }
body.explain [data-help].explain-hover { outline: 2px solid var(--cursor); box-shadow: 0 0 10px var(--cursor); }
.explainbar { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--accent2); color: #fff;
  padding: 3px 6px 3px 12px; font-size: 12px; box-shadow: var(--glow); display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.explainbar[hidden], .explaintip[hidden] { display: none; }
.explainbar button { padding: 0 8px; font-size: 12px; }
.explaintip { position: fixed; z-index: 60; max-width: 340px; background: var(--panel); border: 1px solid var(--accent); box-shadow: var(--glow);
  padding: 8px 12px; font-size: 13px; line-height: 1.45; display: grid; gap: 4px; }
.explaintip b { color: var(--accent); }
.explaintip .more { justify-self: start; padding: 1px 8px; font-size: 12px; margin-top: 4px; }
#btnExplain.on { background: var(--cursor); color: var(--bg); border-color: var(--cursor); }

/* Anmeldung: ohne Anmeldung ist nur diese Seite sichtbar */
body.locked > header, body.locked > nav, body.locked > main, body.locked > footer { visibility: hidden; }
.gate { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background:
  radial-gradient(ellipse at 50% 30%, rgba(255, 43, 214, 0.18), transparent 60%), radial-gradient(ellipse at 50% 90%, rgba(0, 240, 255, 0.12), transparent 60%), var(--bg); }
.gate[hidden] { display: none; }
.gatebox { width: min(420px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--accent); box-shadow: var(--glow); padding: 24px 28px; display: grid; gap: 10px; }
.gatebrand { font-size: 30px; text-align: center; }
.gatesub { text-align: center; color: var(--dim); margin: -6px 0 6px; }
.gatebox form { display: grid; gap: 10px; }
.gatebox form[hidden] { display: none; }
.gatebox h2 { margin: 4px 0 0; color: var(--accent); letter-spacing: 0.1em; font-size: 15px; }
.gatebox label { display: grid; gap: 4px; }
.gatebox input { width: 100%; padding: 6px 8px; }
.gatebox button[type=submit] { justify-self: start; padding: 5px 16px; }
.gatebox .hint { margin: 0; }
.gateerror { color: var(--warn); margin: 0; min-height: 1.2em; }
.gatelinks { text-align: center; margin: 4px 0 0; font-size: 12px; }
.gatelinks a { color: var(--dim); }

/* Konto im Menü und Benutzerverwaltung */
.menuuser { padding: 6px 12px; color: var(--dim); font-size: 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.menuuser b { color: var(--text); font-weight: 400; }
.dialog.usersdlg { width: 680px; display: grid; gap: 8px; }
.dialog.usersdlg form { margin: 0; }
.linkbox { border: 1px solid var(--accent2); padding: 8px; display: grid; gap: 6px; }
.linkbox[hidden] { display: none; }
.linkbox .hint { margin: 0; }
.userlist { border: 1px solid var(--line); background: var(--panel2); max-height: 280px; overflow-y: auto; }
.urow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.urow .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urow .t small { color: var(--accent2); margin-left: 6px; }
.urow .d { color: var(--dim); font-size: 12px; }
.urow.off .t { color: var(--dim); }