/* VSM Portrait — layout dedicat transmisiei verticale 9:16.
   Logica aplicației, ID-urile DOM și modulele de analiză rămân cele din V2. */
:root { color-scheme: dark; }
html, body { min-width: 320px; width: 100%; min-height: 100%; margin: 0; }
body { overflow-x: hidden; overflow-y: auto; background: #030b14; }
.app { height: auto !important; min-height: 100dvh; display: grid !important;
  grid-template-rows: auto 1fr auto !important; gap: 8px !important;
  padding: 8px !important; max-width: 1080px !important; width: 100%; box-sizing: border-box; }
.top { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center; gap: 8px !important; padding: 10px !important; }
.brand { min-width: 0 !important; width: auto !important; flex: initial !important; }
.brand h1 { white-space: normal !important; font-size: clamp(17px,3.2vw,28px) !important; }
.yt-counter-pill { grid-column: 1; grid-row: 2; }
.monitor-pill { grid-column: 2; grid-row: 1; }
.clock-pill { grid-column: 2; grid-row: 2; }
.radio-player { grid-column: 1 / -1; grid-row: 3; width: 100%; min-width: 0; }
.radio-player audio { max-width: 100%; }
.main { min-height: 0; display: grid !important; grid-template-columns: minmax(0,1fr) !important;
  gap: 8px !important; }
.sidebar { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  overflow-x: auto; overflow-y: hidden; gap: 6px !important; padding: 6px !important;
  min-height: 0; scrollbar-width: thin; }
.sidebar .nav { flex: 0 0 auto; width: auto !important; white-space: nowrap; padding: 9px 11px !important; }
.sidebar .nav small, .sidebar .qr-card, .sidebar .revolut-qr-card, .sidebar .side-note { display: none !important; }
.workspace { display: grid !important; grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: auto auto !important; gap: 8px !important; min-height: 0; }
.map-panel { grid-column: 1 !important; grid-row: 1 !important; height: min(47vh, 620px); min-height: 320px;
  display: grid !important; grid-template-rows: 38px minmax(0,1fr) !important; }
.map-wrap { min-height: 0; }
.dashboard { display: grid !important; grid-template-columns: minmax(0,1fr) !important;
  grid-auto-rows: auto !important; gap: 8px !important; min-height: 0; }
.pulse-card { min-height: 0 !important; padding: 12px !important; }
.pulse-head { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 8px !important; }
.pulse-head h2 { font-size: clamp(17px,3vw,25px) !important; }
.pulse-main { grid-template-columns: 88px minmax(0,1fr) !important; gap: 10px !important; }
.pulse-comparison { grid-column: 1 / -1 !important; }
.factor-strip { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
#vsmUnifiedPanel { grid-column: 1 !important; width: auto !important; }
#vsmUnifiedPanel table { min-width: 0 !important; }
.events { min-height: 280px; max-height: 480px; grid-template-rows: auto minmax(0,1fr) !important; }
.events .table-wrap { overflow-x: auto; }
.events table { min-width: 540px; }
.status { display: flex !important; flex-wrap: wrap; white-space: normal !important; gap: 6px 12px !important;
  padding: 8px !important; min-height: 0; }
.below-scene { width: 100% !important; max-width: 1080px !important; box-sizing: border-box; padding: 12px 8px 28px !important; }
.scene-boundary { flex-wrap: wrap; gap: 8px; }
.vsm-intel-grid, .forecast-grid, .tool-grid, .activity-calendar-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
canvas, svg, img, video { max-width: 100%; }
@media (min-width: 760px) {
  .app { padding: 12px !important; }
  .top { grid-template-columns: minmax(0,1fr) auto auto !important; }
  .yt-counter-pill { grid-column: 2; grid-row: 1; }
  .monitor-pill { grid-column: 3; grid-row: 1; }
  .clock-pill { grid-column: 2; grid-row: 2; }
  .radio-player { grid-column: 1 / -1; grid-row: 3; }
  .map-panel { height: 540px; }
}
@media (max-width: 420px) {
  .brand h1 { font-size: 16px !important; }
  .monitor-pill { display: none !important; }
  .clock-pill { grid-column: 2; grid-row: 1; }
  .yt-counter-pill { grid-column: 1; grid-row: 2; }
  .pulse-main { grid-template-columns: 76px minmax(0,1fr) !important; }
  .factor-strip, .vsm-intel-grid, .forecast-grid, .tool-grid, .activity-calendar-grid { grid-template-columns: 1fr !important; }
}