/* Console Pro layout overrides (keeps full feature set, less "toy" look) */

:root {
  --panel-bg: rgba(15, 22, 35, 0.92);
  --panel-border: rgba(90, 110, 140, 0.35);
}

/* Docked systems panel (desktop) */
#systemsModal.docked {
  position: fixed !important;
  inset: 58px auto 12px 12px !important;
  width: 380px !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  pointer-events: auto !important;
  z-index: 9998 !important;
}

#systemsModal.docked .user-modal-overlay {
  display: none !important;
}

#systemsModal.docked .user-modal-content {
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  border-radius: 14px !important;
  background: var(--panel-bg) !important;
  border: 1px solid var(--panel-border) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.45) !important;
}

#systemsModal.docked #systemsList {
  max-height: calc(100vh - 190px) !important;
}

@media (min-width: 1200px) {
  #app {
    margin-left: 404px;
  }
}

/* Top bar dock toggle button */
.dock-toggle{
  padding: 8px 10px;
  border: 1px solid rgba(90,110,140,.35);
  background: rgba(10,14,20,.6);
  color: #e6edf3;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.dock-toggle:hover{ background: rgba(20,30,46,.75); }

/* Now playing panel */
.now-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
@media (min-width: 1100px){
  .now-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.now-field{
  background: rgba(10,14,20,.45);
  border: 1px solid rgba(90,110,140,.22);
  border-radius: 12px;
  padding: 10px 12px;
}
.now-label{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(219,231,255,.72);
  margin-bottom: 6px;
}
.now-value{
  font-size: 13px;
  color: #e6edf3;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(90,110,140,.35);
  background: rgba(15,22,35,.75);
  color:#e6edf3;
}
.pill.on{ border-color: rgba(41,240,163,.45); box-shadow: 0 0 0 1px rgba(41,240,163,.18) inset; }
.pill.idle{ opacity: .75; }

.now-meta summary{
  cursor:pointer;
  user-select:none;
  margin-top: 10px;
  color: rgba(219,231,255,.85);
}
.meta-pre{
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(90,110,140,.22);
  background: rgba(0,0,0,.25);
  max-height: 280px;
  overflow:auto;
}

/* Scanlist switcher controls */
.scanlist-switcher{
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.select.small{
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(90,110,140,.35);
  background: rgba(10,14,20,.55);
  color: #e6edf3;
  padding: 0 10px;
}
.toggle.small{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  color: #e6edf3;
  border: 1px solid rgba(90,110,140,.35);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(10,14,20,.4);
}
.toggle.small input{ accent-color: var(--accent); }
.error-box{
  margin: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(251,113,133,.35);
  background: rgba(251,113,133,.08);
  color: #ffe4ea;
}
.error-title{ font-weight: 800; margin-bottom: 6px; }
.error-detail{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; opacity: .95; }
.error-hint{ margin-top: 8px; font-size: 12px; opacity: .9; }