/* =========================================================
   kolOS — Instrumentarium, Studio, Hitparade, Gaestebuch
   ---------------------------------------------------------
   Praefixe: sn- (Klang/Studio) und gb2- (Gaestebuch-Huelle).
   Beide sind gegen style.css geprueft und dort unbenutzt --
   die Namenskollisionen mit .card und .tile aus dem HANDOFF
   sollen sich nicht wiederholen.
   ========================================================= */

/* --- gemeinsame Bausteine -------------------------------- */
.sn-app, .sn-studio, .sn-charts {
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #123a52;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #eaf6fd 0%, #d8eefb 45%, #cbe6f7 100%);
}

.sn-btn {
  appearance: none;
  border: 1px solid rgba(120,170,205,.75);
  border-radius: 7px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  color: #10405e;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(226,243,253,.92) 48%, rgba(198,229,247,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(10,60,95,.18);
  transition: filter .12s, transform .06s;
}
.sn-btn:hover { filter: brightness(1.06) saturate(1.1); }
.sn-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(10,60,95,.28); }
.sn-btn:disabled { opacity: .5; cursor: default; }
.sn-btn.sq { padding: 3px 7px; }
.sn-btn.on, .sn-btn.tog.on {
  background: linear-gradient(180deg, #bfe9ff, #7fd0f5 55%, #4fbcec);
  border-color: #2f9dd0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 8px rgba(80,190,240,.55);
}
.sn-btn.primary {
  background: linear-gradient(180deg, #d8f4c8, #9fdc7e 55%, #6ec44f);
  border-color: #58a63c; color: #16400b; font-weight: 700;
}
.sn-btn.play { min-width: 38px; font-size: 14px; }
.sn-btn.sn-rec.on {
  background: linear-gradient(180deg, #ffd0d0, #ff8f8f 55%, #ef5f5f);
  border-color: #cc4444; color: #4a0d0d;
  animation: sn-pulse 1.4s ease-in-out infinite;
}
@keyframes sn-pulse { 0%,100% { box-shadow: 0 0 0 rgba(230,70,70,.6); } 50% { box-shadow: 0 0 10px rgba(230,70,70,.85); } }

.sn-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(140,190,220,.5);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(214,238,252,.55));
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.sn-bar2 { padding-block: 5px; }
.sn-spacer { flex: 1 1 auto; }
.sn-lbl { font-size: 12px; opacity: .8; }

.sn-modes { display: flex; gap: 4px; }
.sn-mode {
  appearance: none; border: 1px solid transparent; background: transparent;
  border-radius: 8px 8px 0 0; padding: 5px 11px; font: inherit; font-size: 12.5px;
  color: #17506f; cursor: pointer;
}
.sn-mode:hover { background: rgba(255,255,255,.55); }
.sn-mode.on {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(212,238,252,.85));
  border-color: rgba(120,175,210,.7); border-bottom-color: transparent;
  font-weight: 700; box-shadow: inset 0 1px 0 #fff;
}

.sn-pick, .sn-slider, .sn-check, .sn-num {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
}
.sn-slider input[type=range] { width: 88px; }
.sn-slider.sm input[type=range] { width: 62px; }
.sn-instr, .sn-beats, .sn-num input {
  font: inherit; font-size: 12px; padding: 3px 5px;
  border: 1px solid rgba(120,170,205,.75); border-radius: 6px;
  background: linear-gradient(180deg, #fff, #eef8fd);
  color: #10405e;
}
.sn-num input { width: 58px; }
.sn-oct { display: inline-flex; align-items: center; gap: 4px; }
.sn-octv { font-size: 12px; min-width: 24px; text-align: center; }
.sn-state, .sn-msg {
  font-size: 11.5px; opacity: .8; margin-left: 4px;
}
.sn-state.warn, .sn-msg.warn { color: #a4341f; opacity: 1; }
.sn-state.ok, .sn-msg.ok { color: #1d7a35; opacity: 1; }
.sn-state.rec { color: #c62828; opacity: 1; font-weight: 700; }

.sn-stage {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px;
  display: flex; flex-direction: column;
  justify-content: safe center;
}
.sn-hint { padding: 6px 12px 9px; font-size: 11.5px; opacity: .68; }

/* --- Klaviatur -------------------------------------------
   Die weissen UND die schwarzen Tasten werden absolut
   gesetzt; left kommt aus dem Tastenindex (music.js). Genau
   das fehlte der alten Fassung -- ohne left stapelten sich
   alle schwarzen Tasten am linken Rand. */
.sn-kb {
  position: relative;
  height: 170px;
  /* Alle Tasten liegen absolut -- der Rahmen hat also KEINE eigene
     Inhaltsbreite. In einem Flex-Behaelter wuerde "margin:0 auto"
     ihn deshalb auf null schrumpfen lassen (genau das ist einmal
     passiert: es war nur noch eine einzige Taste zu sehen).
     Darum ausdruecklich die volle Breite. */
  width: 100%;
  align-self: center;
  margin: 0 auto;
  max-width: 780px;
  user-select: none;
  touch-action: none;
}
.sn-kb-sm { height: 118px; max-width: 320px; }

.sn-w {
  position: absolute; top: 0; bottom: 0;
  border: 1px solid #8fb4cc;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg, #fff 0%, #fbfeff 55%, #e6f2fa 100%);
  box-shadow: inset 0 -6px 8px -6px rgba(60,110,150,.5), 0 2px 5px rgba(0,60,100,.22);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 8px; cursor: pointer;
}
.sn-w small { font-size: 9.5px; color: #7f9db0; pointer-events: none; }
.sn-w.on, .sn-w:active {
  background: linear-gradient(180deg, #fff, #d6f0ff 55%, #a9def8);
  box-shadow: inset 0 4px 9px rgba(0,80,130,.35);
}
.sn-b {
  position: absolute; top: 0; height: 58%;
  border: 1px solid #16222b; border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, #46586a 0%, #223140 42%, #0d151d 100%);
  box-shadow: 0 4px 7px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22);
  z-index: 3; cursor: pointer;
}
.sn-b.on, .sn-b:active {
  background: linear-gradient(180deg, #2f7fa8, #17516e 60%, #0a2d3f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.6);
}

/* --- Akkordeon ------------------------------------------- */
.sn-acc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sn-acc-side {
  flex: 0 1 auto; min-width: 0;
  border: 1px solid rgba(150,195,225,.6); border-radius: 14px;
  padding: 10px;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(220,240,252,.35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.sn-acc-side h4 { margin: 0 0 8px; font-size: 12.5px; color: #17506f; font-weight: 700; }
/* Die Knopfseite darf sich nach dem Inhalt richten, die Diskantseite
   braucht dagegen eine Mindestbreite -- sonst quetscht das Raster die
   Klaviatur auf Fingerbreite zusammen. */
.sn-acc-right { flex: 1 1 280px; min-width: 230px; max-width: 380px; }
.sn-btns {
  touch-action: manipulation;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 6px;
  justify-content: center;
}
.sn-ab {
  appearance: none; cursor: pointer; border-radius: 50%;
  width: 48px; height: 48px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  border: 1px solid #9a7638; font: inherit; color: #46320e;
  background: radial-gradient(circle at 34% 28%, #fffaf0, #f0dcb4 52%, #cda962 100%);
  box-shadow: inset 0 -3px 6px rgba(120,90,30,.35), 0 2px 4px rgba(60,40,10,.3);
}
.sn-ab b { font-size: 12px; line-height: 1; }
.sn-ab small { font-size: 8.5px; opacity: .75; line-height: 1; }
.sn-ab.min { background: radial-gradient(circle at 34% 28%, #fff, #dfe6f2 52%, #a9b8cf 100%); border-color: #7b8ba5; color: #2b3a52; }
.sn-ab.maj { background: radial-gradient(circle at 34% 28%, #fff8ef, #f6d9a8 52%, #d2a35a 100%); }
.sn-ab.hit { transform: scale(.9); filter: brightness(1.12); }

.sn-bellows {
  flex: 0 0 62px; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 12px 0; transition: flex-basis .26s cubic-bezier(.3,1.4,.5,1);
}
.sn-acc.pull .sn-bellows { flex-basis: 96px; }
.sn-fold {
  height: 15px; border-radius: 3px;
  background: linear-gradient(180deg, #d94f4f, #8e2020 45%, #c74040);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.3);
}

/* --- Schlagzeug-Pads ------------------------------------- */
.sn-pads {
  touch-action: manipulation;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px;
}
.sn-pad {
  appearance: none; cursor: pointer; border-radius: 13px; padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid rgba(110,160,195,.8); font: inherit; color: #123a52;
  background:
    radial-gradient(115% 80% at 30% 12%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #f2fbff, #cfe9f8 55%, #a9d5ee);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 6px rgba(10,60,95,.22);
  transition: transform .07s, filter .1s;
}
.sn-pad .sn-pi { font-size: 23px; line-height: 1; }
.sn-pad b { font-size: 11.5px; }
.sn-pad small { font-size: 9.5px; opacity: .6; }
.sn-pad.hit, .sn-pad:active {
  transform: scale(.94);
  filter: brightness(1.15) saturate(1.25);
  box-shadow: inset 0 3px 9px rgba(0,70,120,.35), 0 0 14px rgba(90,200,245,.6);
}

/* =========================================================
   Studio
   ========================================================= */
.sn-tp { display: flex; align-items: center; gap: 6px; padding: 7px 9px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(140,190,220,.5);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(206,234,250,.6));
  backdrop-filter: blur(9px) saturate(1.25);
  -webkit-backdrop-filter: blur(9px) saturate(1.25);
}
.sn-title { display: flex; gap: 7px; padding: 6px 10px; border-bottom: 1px solid rgba(140,190,220,.35); }
.sn-title input {
  font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 7px;
  border: 1px solid rgba(120,170,205,.7);
  background: linear-gradient(180deg, #fff, #f2fafe); color: #10405e;
}
.sn-title .sn-t { flex: 2 1 200px; font-weight: 700; }
.sn-title .sn-by { flex: 1 1 120px; }

.sn-main { flex: 1 1 auto; display: flex; min-height: 0; }
.sn-tracks {
  flex: 0 0 208px; display: flex; flex-direction: column; min-height: 0;
  overflow-y: auto; padding: 8px; gap: 7px;
  border-right: 1px solid rgba(140,190,220,.5);
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(214,238,252,.3));
}
.sn-trlist { display: flex; flex-direction: column; gap: 7px; }
.sn-tr {
  --tr: #4aa3df;
  border: 1px solid rgba(130,180,215,.7); border-radius: 11px; padding: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(232,246,253,.7));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
  cursor: pointer;
}
.sn-tr.sel {
  border-color: var(--tr);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--tr), 0 2px 10px rgba(40,140,200,.3);
}
.sn-tr-h { display: flex; align-items: center; gap: 5px; }
.sn-tr-i { font-size: 15px; }
.sn-tr-sel {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 11px; padding: 2px 4px;
  border: 1px solid rgba(120,170,205,.6); border-radius: 5px; background: #fff; color: #10405e;
}
.sn-x {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: #8199aa; font-size: 12px; padding: 2px 4px; border-radius: 4px;
}
.sn-x:hover { background: rgba(220,90,90,.16); color: #b03030; }
.sn-tr-c { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.sn-tr-c input[type=range] { flex: 1 1 auto; min-width: 0; }
.sn-tr-c2 { display: flex; gap: 4px; margin-top: 4px; font-size: 9.5px; opacity: .8; }
.sn-tr-c2 label { display: flex; align-items: center; gap: 2px; flex: 1 1 0; min-width: 0; }
.sn-tr-c2 input[type=range] { width: 100%; min-width: 0; }
.sn-mini {
  appearance: none; width: 20px; height: 19px; border-radius: 5px; cursor: pointer;
  border: 1px solid rgba(120,170,205,.7); font: inherit; font-size: 10px; font-weight: 700;
  color: #4a6b80; background: linear-gradient(180deg, #fff, #e4f2fb);
}
.sn-mini.m.on { background: linear-gradient(180deg, #ffd9d9, #ef8f8f); border-color: #d06565; color: #5a1414; }
.sn-mini.s.on { background: linear-gradient(180deg, #fff0c2, #f2ce5e); border-color: #cfa62c; color: #4d3a05; }
.sn-addtr {
  appearance: none; margin-top: 7px; padding: 6px; border-radius: 9px; cursor: pointer;
  border: 1px dashed rgba(120,170,205,.85); font: inherit; font-size: 12px; color: #2b6d92;
  background: rgba(255,255,255,.45);
}
.sn-addtr:hover { background: rgba(255,255,255,.8); }

.sn-grid-wrap {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  overflow: auto;
  --lbl: 62px;
  --gw: calc(100% - var(--lbl));
}
.sn-gridhead { position: sticky; top: 0; z-index: 4; }
.sn-gh-row, .sn-row {
  display: grid;
  grid-template-columns: var(--lbl) repeat(var(--cols), 1fr);
  min-width: max(100%, calc(var(--lbl) + var(--cols) * 15px));
}
.sn-gh-row {
  height: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(214,238,252,.9));
  border-bottom: 1px solid rgba(120,170,205,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sn-gh-lbl { display: flex; align-items: center; gap: 2px; padding-left: 3px; }
.sn-gh-c { font-size: 9px; color: #5b7f96; display: flex; align-items: center; justify-content: flex-start; padding-left: 2px; }
.sn-gh-c.bar { border-left: 1px solid rgba(70,130,170,.55); font-weight: 700; }
.sn-gh-c.beat { border-left: 1px solid rgba(120,170,205,.3); }

.sn-grid { position: relative; flex: 1 1 auto; touch-action: none; }
.sn-row { height: 17px; position: relative; }
.sn-row.black { background: rgba(120,160,190,.13); }
.sn-rl {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 9px;
  display: flex; align-items: center; gap: 3px; padding: 0 4px; overflow: hidden;
  color: #46687d; text-align: left;
  background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(232,246,253,.6));
  border-right: 1px solid rgba(120,170,205,.5);
  border-bottom: 1px solid rgba(160,200,225,.35);
  position: sticky; left: 0; z-index: 2;
}
.sn-rl:hover { background: linear-gradient(90deg, #fff, #d9f0ff); }
.sn-rl .rt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-c {
  border-bottom: 1px solid rgba(160,200,225,.28);
  border-right: 1px solid rgba(160,200,225,.22);
  cursor: crosshair;
}
.sn-c.beat { border-right-color: rgba(110,165,200,.4); }
.sn-c.bar { border-left: 1px solid rgba(70,130,170,.5); }
.sn-c:hover { background: rgba(120,205,245,.28); }

.sn-n {
  position: relative; z-index: 1;
  align-self: center; height: 13px; margin: 0 1px;
  border-radius: 4px; pointer-events: auto; cursor: pointer;
  background: linear-gradient(180deg, #9fe6ff, #45b6e8 55%, #2492c7);
  border: 1px solid #1c7ba9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(10,70,110,.35);
}
.sn-n:hover { filter: brightness(1.12); }
.sn-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,120,120,.95), rgba(220,40,40,.75));
  box-shadow: 0 0 8px rgba(255,80,80,.85);
}

.sn-foot {
  padding: 5px 10px; font-size: 11.5px; min-height: 22px;
  border-top: 1px solid rgba(140,190,220,.5);
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(214,238,252,.45));
}

/* --- Menue und Dialoge ----------------------------------- */
.sn-menu {
  position: absolute; z-index: 40; min-width: 208px; padding: 5px;
  border: 1px solid rgba(120,170,205,.8); border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(226,243,253,.95));
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 12px 30px rgba(10,50,80,.32), inset 0 1px 0 #fff;
}
.sn-mi {
  appearance: none; display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 12.5px;
  padding: 6px 9px; border-radius: 7px; color: #123a52; text-align: left;
}
.sn-mi:hover { background: linear-gradient(180deg, #cdeeff, #a9dcf7); }
.sn-mi span { font-size: 14px; }

.sn-dlg {
  position: absolute; inset: 0; z-index: 45; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(15,45,70,.34);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sn-dlg-w {
  width: min(460px, 100%); max-height: 100%; overflow: auto;
  border: 1px solid rgba(255,255,255,.75); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(224,242,253,.95));
  box-shadow: 0 20px 50px rgba(5,35,60,.45), inset 0 1px 0 #fff;
}
.sn-dlg-h {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-bottom: 1px solid rgba(140,190,220,.5);
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(206,234,250,.6));
  border-radius: 14px 14px 0 0;
}
.sn-dlg-h b { flex: 1 1 auto; font-size: 13px; color: #0f4a6d; }
.sn-dlg-b { padding: 12px; display: flex; flex-wrap: wrap; gap: 9px; }
.sn-dlg-b.col { flex-direction: column; }
.sn-dlg-a { display: flex; align-items: center; gap: 9px; }
.sn-tmpl {
  appearance: none; flex: 1 1 120px; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 9px;
  border: 1px solid rgba(120,170,205,.75); border-radius: 12px; color: #123a52;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(214,238,252,.8));
  box-shadow: inset 0 1px 0 #fff;
}
.sn-tmpl:hover { filter: brightness(1.06); transform: translateY(-1px); }
.sn-tmpl span { font-size: 24px; }
.sn-tmpl b { font-size: 12px; }
.sn-prj {
  appearance: none; cursor: pointer; font: inherit; text-align: left;
  display: flex; flex-direction: column; gap: 2px; padding: 8px 11px;
  border: 1px solid rgba(120,170,205,.6); border-radius: 9px; color: #123a52;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(226,243,253,.7));
}
.sn-prj:hover { filter: brightness(1.06); }
.sn-prj b { font-size: 12.5px; }
.sn-prj small { font-size: 10.5px; opacity: .7; }
.sn-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.sn-f input {
  font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 7px;
  border: 1px solid rgba(120,170,205,.7); background: #fff; color: #10405e;
}
.sn-note { margin: 0; font-size: 11.5px; opacity: .75; line-height: 1.45; }
.sn-ok { margin: 0; padding: 14px; font-size: 13px; color: #1d7a35; }
.sn-pmsg { font-size: 11.5px; opacity: .8; }
.sn-pmsg.warn { color: #a4341f; opacity: 1; }
.sn-empty { padding: 18px; text-align: center; font-size: 12.5px; opacity: .7; }

/* --- Hitparade ------------------------------------------- */
.sn-charts { padding: 0; }
.sn-ch-h { padding: 12px 14px 8px; }
.sn-ch-h h2 { margin: 0 0 3px; font-size: 19px; font-weight: 300; color: #0a4a70; }
.sn-ch-h p { margin: 0; font-size: 12.5px; opacity: .75; line-height: 1.5; }
.sn-ch-list { flex: 1 1 auto; overflow: auto; padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.sn-song {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border: 1px solid rgba(130,180,215,.65); border-radius: 12px;
  background:
    radial-gradient(110% 90% at 10% 0%, rgba(255,255,255,.8), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(224,242,253,.68));
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(10,60,95,.14);
}
.sn-song-i { font-size: 22px; }
.sn-song-m { flex: 1 1 auto; min-width: 0; }
.sn-song-m b { display: block; font-size: 13.5px; color: #0f4a6d; }
.sn-song-m small { font-size: 11px; opacity: .7; }
.sn-song-a { display: flex; gap: 5px; }

/* =========================================================
   Gaestebuch-Huelle
   ========================================================= */
.gb2 { height: 100%; overflow: hidden; display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(255,255,255,.72), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #eaf6fd, #d6ecfa);
}
.gb2-shell { padding: 12px 14px 14px; flex: 1 1 auto; min-height: 0; overflow: auto; }

/* Zwei Spalten ab genug Breite: links schreiben, rechts lesen.
   Das Panel selbst bleibt unveraendert -- nur sein Raster ist neu.

   ACHTUNG, hier steckte ein Fehler: ohne ausdrueckliche Zeilen landete
   die Suchleiste in Zeile 3 (neben dem Formular) und die Liste in Zeile 4
   DARUNTER. Da die Zeilenhoehe vom 380 px hohen Formular kam, klaffte
   zwischen Suchfeld und erstem Eintrag ein Loch von ueber 400 px.
   Deshalb werden Zeile UND Spalte jetzt fuer jedes Stueck gesetzt, und
   das Formular ueberspannt beide Inhaltszeilen. */
.gb2-panel { display: grid; gap: 10px 16px; grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .gb2-panel {
    grid-template-columns: minmax(270px, 330px) 1fr;
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
    height: 100%;
    min-height: 0;
  }
  .gb2-panel > h2   { grid-column: 1 / -1; grid-row: 1; }
  .gb2-panel > .lead { grid-column: 1 / -1; grid-row: 2; }
  .gb2-panel > .gb-form { grid-column: 1; grid-row: 3 / span 2; }
  .gb2-panel > .gb2-bar { grid-column: 2; grid-row: 3; }
  .gb2-panel > .gb-list {
    grid-column: 2; grid-row: 4;
    margin: 0; min-height: 0; overflow-y: auto; padding-right: 4px;
  }
}

/* Im Fenster ist weniger Platz als auf der Seite: die Ueberschriften
   duerfen hier kleiner sein als im Internet Explorer. */
.gb2-panel > h2 { margin: 0; font-size: 19px; font-weight: 300; color: #0a4a70; }
.gb2-panel > .lead { margin: 0; font-size: 12.5px; line-height: 1.5; opacity: .8; }
.gb2 .gb-form { margin: 0; max-width: none; }
.gb2 .gb-hint, .gb2 .gb2-drop-hint { font-size: 11px; line-height: 1.45; }
.gb2 .gb-list li { font-size: 12.5px; }
.gb2 .gb-list .gb-meta b { font-size: 12.5px; }

.gb2-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gb2-search {
  flex: 1 1 auto; display: flex; align-items: center; gap: 5px;
  border: 1px solid rgba(120,170,205,.7); border-radius: 20px; padding: 3px 10px;
  background: linear-gradient(180deg, #fff, #f0f9fe);
  box-shadow: inset 0 1px 3px rgba(10,60,95,.12);
}
.gb2-search span { opacity: .55; font-size: 12px; }
.gb2-q { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 12.5px; color: #123a52; outline: none; }
.gb2-count { font-size: 11.5px; opacity: .7; white-space: nowrap; }
.gb2-reload {
  appearance: none; cursor: pointer; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(120,170,205,.7); font-size: 13px; color: #10405e;
  background: linear-gradient(180deg, #fff, #dcf0fb);
}
.gb2-reload.spin { animation: gb2-spin .6s linear; }
@keyframes gb2-spin { to { transform: rotate(360deg); } }

.gb2-chars { display: block; text-align: right; font-size: 10.5px; opacity: .6; margin-top: 2px; }
.gb2-chars.full { color: #b8560f; opacity: 1; }
.gb2-drop-hint { margin: 4px 0 0; font-size: 11px; opacity: .62; }
.gb2-gone { padding: 22px; text-align: center; opacity: .7; }

/* =========================================================
   Dunkle Fassung
   ========================================================= */
body.dark .sn-app, body.dark .sn-studio, body.dark .sn-charts, body.dark .gb2 {
  color: #d7e6f2;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(120,190,235,.12), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #16293a, #101f2c);
}
body.dark .sn-bar, body.dark .sn-tp, body.dark .sn-foot, body.dark .sn-gh-row {
  background: linear-gradient(180deg, rgba(38,66,88,.72), rgba(22,42,58,.6));
  border-color: rgba(110,165,205,.28);
}
body.dark .sn-btn {
  color: #d7e6f2; border-color: rgba(120,175,215,.4);
  background: linear-gradient(180deg, rgba(70,105,132,.9), rgba(38,64,86,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.35);
}
body.dark .sn-btn.on { background: linear-gradient(180deg, #2a7ea8, #17546f); border-color: #3ea8d8; color: #eaf7ff; }
body.dark .sn-btn.primary { background: linear-gradient(180deg, #3e8a4e, #256234); border-color: #4fae62; color: #eafff0; }
body.dark .sn-mode { color: #bfe0f5; }
body.dark .sn-mode.on { background: linear-gradient(180deg, rgba(52,88,114,.95), rgba(30,56,76,.85)); border-color: rgba(110,165,205,.5); }
body.dark .sn-instr, body.dark .sn-beats, body.dark .sn-num input,
body.dark .sn-title input, body.dark .sn-tr-sel, body.dark .sn-f input {
  background: linear-gradient(180deg, #24405a, #1a3145); color: #dbeaf6; border-color: rgba(110,165,205,.35);
}
body.dark .sn-tracks { background: linear-gradient(180deg, rgba(30,54,74,.5), rgba(20,38,52,.4)); border-color: rgba(110,165,205,.28); }
body.dark .sn-tr { background: linear-gradient(180deg, rgba(44,74,98,.7), rgba(28,50,68,.6)); border-color: rgba(110,165,205,.3); }
body.dark .sn-rl { background: linear-gradient(90deg, rgba(38,66,88,.9), rgba(26,48,66,.7)); color: #a8c8dd; border-color: rgba(110,165,205,.28); }
body.dark .sn-row.black { background: rgba(255,255,255,.05); }
body.dark .sn-c { border-color: rgba(110,165,205,.16); }
body.dark .sn-c:hover { background: rgba(90,180,230,.22); }
body.dark .sn-w { background: linear-gradient(180deg, #e8eef3, #cfdbe4 55%, #b8c7d4); border-color: #2b3945; }
body.dark .sn-pad { color: #123a52; }
body.dark .sn-menu, body.dark .sn-dlg-w {
  background: linear-gradient(180deg, rgba(34,60,82,.97), rgba(22,42,58,.96));
  border-color: rgba(110,165,205,.4);
}
body.dark .sn-mi { color: #d7e6f2; }
body.dark .sn-mi:hover { background: linear-gradient(180deg, #2a6d92, #1c4c68); }
body.dark .sn-dlg-h { background: linear-gradient(180deg, rgba(48,80,105,.9), rgba(30,54,74,.8)); border-color: rgba(110,165,205,.3); }
body.dark .sn-dlg-h b, body.dark .sn-ch-h h2, body.dark .sn-song-m b { color: #bfe0f5; }
body.dark .sn-song, body.dark .sn-tmpl, body.dark .sn-prj {
  background: linear-gradient(180deg, rgba(44,74,98,.75), rgba(28,50,68,.6));
  border-color: rgba(110,165,205,.3); color: #d7e6f2;
}
body.dark .gb2-panel > .gb-form {
  background: linear-gradient(180deg, rgba(44,74,98,.7), rgba(28,50,68,.6));
  border-color: rgba(110,165,205,.3);
}
body.dark .gb2-search { background: linear-gradient(180deg, #24405a, #1a3145); border-color: rgba(110,165,205,.35); }
body.dark .gb2-q { color: #dbeaf6; }
body.dark .gb2-reload { background: linear-gradient(180deg, #2f5273, #21394f); color: #dbeaf6; border-color: rgba(110,165,205,.35); }

/* =========================================================
   Handy
   ========================================================= */
@media (max-width: 700px) {
  .sn-kb { height: 132px; }
  .sn-tracks { flex-basis: 150px; }
  .sn-grid-wrap { --lbl: 46px; }
  .sn-pads { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .sn-title { flex-wrap: wrap; }
  .sn-bar, .sn-tp { gap: 5px; padding: 6px 7px; }
  .sn-slider input[type=range] { width: 62px; }
}