/* Testlayouten på /test. Den vanliga style.css laddas först. */
body.test-shell{
  display:grid;
  grid-template-columns:232px minmax(0, 1fr);
  min-height:100vh;
  margin:0;
  background:#090b10;
  color:#e8eaef;
}
.test-side{
  background:#0c0e14;
  border-right:1px solid #222833;
  padding:22px 18px;
}
.test-brand{ display:block; }
.test-brand img{ width:100%; height:auto; display:block; }
.test-nav{ display:flex; flex-direction:column; gap:4px; margin-top:28px; }
.test-nav a{
  color:#c5cad6;
  text-decoration:none;
  padding:8px 2px;
  font-size:14px;
}
.test-nav a:hover{ color:#fff; text-decoration:none; }
.test-nav__live{ margin-top:18px; color:#7a8296 !important; font-size:13px !important; }
.test-main{ min-width:0; }
.test-banner{
  padding:10px 28px;
  border-bottom:1px solid #222833;
  color:#f0b429;
  font-size:12.5px;
  line-height:1.4;
}
.test-content{ padding:28px 32px 64px; }
.login-wrap{
  min-height:calc(100vh - 120px);
  display:grid;
  place-items:center;
}

.listen-grid{
  display:block;
}
.listen__head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:18px;
}
.cover{
  width:64px;
  height:64px;
  object-fit:contain;
  object-position:center;
  background:transparent;
  flex:0 0 auto;
}
.listen__title{ min-width:0; flex:1; }
.listen__title h1{ margin:0 0 4px; font-size:22px; font-weight:600; }
.listen__title p{ margin:0; color:#8b93a7; font-size:13px; }
.listen__tools{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }

.wave-wrap{ position:relative; }
.listen .wave{
  min-height:160px;
  background:#12151c;
  border-radius:10px;
  overflow:hidden;
}
.listen .wave canvas{ height:160px; border-radius:10px; }
.offset-row{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:8px;
  margin:0 0 16px;
}
.offset-row label{
  display:inline;
  margin:0;
  color:#8b93a7;
  font-size:13px;
}
.listen .offset-input{
  width:9.5rem;
  max-width:9.5rem;
  flex:0 0 9.5rem;
}
.clock{
  position:absolute;
  right:14px;
  top:12px;
  z-index:4;
  font:13px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric:tabular-nums;
  color:#e8eaef;
  pointer-events:none;
}
.listen .comment-dot{
  width:10px;
  height:10px;
  box-shadow:0 0 0 1.5px rgba(0,0,0,.55);
}
.player__row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:12px;
  color:#8b93a7;
  font-size:13px;
}
.player__row .spacer{ flex:1; }
.version-row{ margin-top:16px; }
.notes{
  background:#12151c;
  border:1px solid #222833;
  border-radius:12px;
  padding:16px;
}
.notes .section--comments{
  margin:0;
  padding:0;
  border:0;
}
.offset-input{ width:120px; }

@media (max-width:980px){
  body.test-shell{ grid-template-columns:1fr; }
  .test-side{ border-right:0; border-bottom:1px solid #222833; }
  .test-nav{ flex-direction:row; flex-wrap:wrap; gap:12px; margin-top:16px; }

  .test-content{ padding:20px 16px 48px; }
}