:root{
  --bg:#05162f;
  --bg2:#0d2d5d;
  --text:#edf4ff;
  --muted:#9fb4d3;
  --line:rgba(140,175,220,.28);
  --thead:#0a2243;
  --row:#0c2a4e;
  --row-alt:#0b2545;
  --ok:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --bus:#a855f7;
  --cancel:#f87171;
  --arrived:#34d399;
  --screen-scale:1;
  --screen-header-pad-y:14px;
  --screen-header-pad-x:18px;
  --screen-cell-pad-y:10px;
  --screen-cell-pad-x:12px;
  --screen-table-min-width:980px;
}

*{box-sizing:border-box}

html,
body{
  margin:0;
  width:100%;
  min-width:320px;
  min-height:100%;
  height:100dvh;
  overflow:hidden;
  font-family:"Segoe UI", "SF Pro Text", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1600px 760px at 15% -10%, var(--bg2) 0%, var(--bg) 56%, #031024 100%);
}

body[data-display-mode="compact"]{
  --screen-scale:.92;
  --screen-header-pad-y:12px;
  --screen-header-pad-x:14px;
  --screen-cell-pad-y:8px;
  --screen-cell-pad-x:12px;
  --screen-table-min-width:0px;
}

body[data-display-mode="standard"]{
  --screen-scale:1;
}

body[data-display-mode="large"]{
  --screen-scale:1.1;
  --screen-table-min-width:1120px;
}

body[data-display-mode="wall"]{
  --screen-scale:1.22;
  --screen-table-min-width:1320px;
}

body[data-display-mode="ultra"]{
  --screen-scale:1.36;
  --screen-table-min-width:1500px;
}

body{
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
}

.wallHeader{
  padding:calc(var(--screen-header-pad-y) * var(--screen-scale)) calc(var(--screen-header-pad-x) * var(--screen-scale));
  border-bottom:1px solid var(--line);
  background:rgba(3,14,34,.86);
}

.wallHeaderZoneRow{
  display:flex;
  align-items:flex-start;
  gap:calc(18px * var(--screen-scale));
  min-width:0;
}

.wallHeaderBannerZone{
  display:flex;
  flex-direction:column;
  gap:calc(10px * var(--screen-scale));
  margin-top:calc(10px * var(--screen-scale));
  min-width:0;
}

.wallHeaderBannerZone:empty{
  display:none;
}

.wallHeaderZone{
  display:flex;
  flex-direction:column;
  gap:calc(10px * var(--screen-scale));
  min-width:0;
  flex:1 1 0;
}

.wallHeaderZone:empty{
  display:none;
}

.wallHeaderZone--left{
  flex:1.45 1 0;
}

.wallHeaderZone--center{
  flex:1.15 1 0;
}

.wallHeaderZone--right{
  flex:1 1 0;
}

.screenZoneMain{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
  padding:12px;
}

.screenZoneFooter{
  display:flex;
  flex-direction:column;
  min-height:0;
}

.screenZoneFooter:empty{
  border-top:none;
}

.screenSectionCard{
  border:1px solid rgba(140,175,220,.24);
  border-radius:16px;
  background:rgba(8,24,48,.78);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  padding:12px 14px;
}

.screenSectionCard--plain{
  border:none;
  background:transparent;
  box-shadow:none;
  padding:0;
}

.screenSectionCard--table{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  padding:0;
  overflow:hidden;
}

.screenSectionCard--table .viewport{
  flex:1 1 auto;
}

.brandBlock{
  min-width:0;
}

.screenLogoBlock{
  min-width:0;
}

.screenLogoBlock:empty{
  display:none;
}

.screenLogoBadge{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  min-height:calc(56px * var(--screen-scale));
  max-width:min(280px, 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background: rgba(255,255,255,.035);
  padding:10px 12px;
}

.screenLogoBadge img{
  display:block;
  max-width:100%;
  max-height:calc(74px * var(--screen-scale));
  width:auto;
  height:auto;
  object-fit:contain;
}

.wallHeaderZone--center .brandBlock{
  text-align:center;
}

.wallHeaderZone--center .screenLogoBadge{
  margin-left:auto;
  margin-right:auto;
}

.wallHeaderZone--right .brandBlock{
  text-align:right;
}

.wallHeaderZone--right .screenLogoBadge{
  margin-left:auto;
}

.brandBlock h1{
  margin:0;
  font-size:clamp(20px, calc(2.4vw * var(--screen-scale)), 46px);
  line-height:1.1;
  font-weight:900;
  letter-spacing:.01em;
}

.sub{
  margin-top:4px;
  color:var(--muted);
  font-size:clamp(12px, calc(1.2vw * var(--screen-scale)), 24px);
}

.templateTop{
  margin-top:8px;
  max-width:100%;
  color:var(--text);
}

.templateTop:empty{
  display:none;
}

.templateTop img{
  max-height:calc(60px * var(--screen-scale));
  width:auto;
  vertical-align:middle;
  margin-right:8px;
}

.templateTop .bannerPanel{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background: rgba(255,255,255,.035);
  padding:10px 12px;
}

.templateTop .bannerMedia{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  max-width:180px;
  min-height:64px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(2,6,23,.24);
  overflow:hidden;
}

.templateTop .bannerMedia img{
  display:block;
  width:100%;
  height:100%;
  max-height:110px;
  object-fit:contain;
  margin-right:0;
}

.templateTop .bannerCopy{
  flex:1 1 260px;
  min-width:0;
}

.templateTop .bannerText{
  font-size:clamp(12px, calc(1.05vw * var(--screen-scale)), 22px);
  color:var(--muted);
  line-height:1.45;
}

.importantWallBanner{
  margin-top:10px;
  max-width:100%;
}

.importantWallBanner:empty{
  display:none;
}

.importantWallBannerCard{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(254,215,170,.68);
  background: linear-gradient(135deg, rgba(127,29,29,.94), rgba(194,65,12,.9));
  color:#fff7ed;
  box-shadow: 0 10px 24px rgba(127,29,29,.22);
}

.importantWallBannerLabel{
  flex:0 0 auto;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(255,247,237,.18);
  border:1px solid rgba(255,247,237,.28);
  font-size:clamp(10px, calc(.78vw * var(--screen-scale)), 14px);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.importantWallBannerText{
  font-size:clamp(12px, calc(1vw * var(--screen-scale)), 20px);
  font-weight:800;
  line-height:1.4;
}

.status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid transparent;
  padding:4px 10px;
  font-weight:800;
  font-size:clamp(11px, calc(.9vw * var(--screen-scale)), 18px);
  line-height:1;
}

.status.ok{background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.45); color:#bbf7d0}
.status.warn{background:rgba(245,158,11,.2); border-color:rgba(245,158,11,.45); color:#fde68a}
.status.bad{background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.45); color:#fecaca}
.status.bus{background:rgba(168,85,247,.22); border-color:rgba(168,85,247,.45); color:#e9d5ff}
.status.cancelled{background:rgba(248,113,113,.22); border-color:rgba(248,113,113,.45); color:#ffe4e6}
.status.arrived{background:rgba(52,211,153,.22); border-color:rgba(52,211,153,.45); color:#ccfbf1}

.metaBlock{
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  min-width:0;
  width:100%;
}

.metaPanelCard{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(140,175,220,.24);
  background:rgba(8,24,48,.78);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.metaPanelItem{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  text-align:right;
}

.metaPanelItem.primary{
  padding-bottom:2px;
}

.metaPanelItem.alert{
  margin-top:4px;
  padding-top:8px;
  border-top:1px solid rgba(248,113,113,.2);
  color:#fecaca;
}

.metaPanelItem.muted{
  color:var(--muted);
}

.metaPanelLabel{
  flex:0 0 auto;
  color:var(--muted);
  font-size:clamp(10px, calc(.8vw * var(--screen-scale)), 14px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.metaPanelValue,
.metaPanelText{
  font-size:clamp(12px, calc(1vw * var(--screen-scale)), 22px);
  font-weight:800;
  line-height:1.3;
}

.metaPanelItem.primary .metaPanelValue,
.metaPanelItem.primary .metaPanelText{
  font-size:clamp(13px, calc(1.15vw * var(--screen-scale)), 26px);
  font-weight:900;
}

.metaPanelText{
  width:100%;
}

.metaPanelItem.muted .metaPanelText{
  font-weight:700;
}

.metaPanelItem.alert .metaPanelLabel{
  color:#fca5a5;
}

.metaPanelItem.alert .metaPanelValue{
  color:#fee2e2;
}

.metaBlock:empty{
  display:none;
}

body[data-display-mode="compact"] .metaPanelCard{
  max-width:none;
}

body[data-display-mode="compact"] .metaPanelItem{
  text-align:left;
  flex-direction:column;
  gap:2px;
}

body[data-display-mode="compact"] .metaPanelLabel{
  font-size:10px;
}

body[data-display-mode="compact"] .metaPanelValue,
body[data-display-mode="compact"] .metaPanelText{
  font-size:14px;
}

body[data-display-mode="compact"] .metaPanelItem.primary .metaPanelValue,
body[data-display-mode="compact"] .metaPanelItem.primary .metaPanelText{
  font-size:15px;
}

body[data-display-mode="compact"] .metaPanelText{
  width:auto;
}

@media (max-width: 1200px){
  .metaPanelCard{
    max-width:none;
  }
  .metaPanelItem{
    text-align:left;
    flex-direction:column;
    gap:2px;
  }
  .metaPanelText{
    width:auto;
  }
}

.viewport{
  height:100%;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:0;
}

table{
  width:100%;
  min-width:var(--screen-table-min-width);
  border-collapse:separate;
  border-spacing:0;
}

thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:var(--thead);
  color:#d5e2f7;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:clamp(11px, calc(.9vw * var(--screen-scale)), 18px);
  padding:calc(12px * var(--screen-scale)) calc(12px * var(--screen-scale));
  border-bottom:1px solid var(--line);
}

tbody td{
  border-bottom:1px solid rgba(140,175,220,.16);
  padding:calc(var(--screen-cell-pad-y) * var(--screen-scale)) calc(var(--screen-cell-pad-x) * var(--screen-scale));
  vertical-align:top;
  font-size:clamp(14px, calc(1.25vw * var(--screen-scale)), 30px);
}

tbody tr:nth-child(odd) td{background:var(--row)}
tbody tr:nth-child(even) td{background:var(--row-alt)}

.trainCell{
  font-weight:900;
}

.routeLine{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:clamp(11px, calc(.95vw * var(--screen-scale)), 18px);
  font-weight:600;
}

.delayCell{
  font-weight:900;
}

.nextCell{
  font-size:clamp(13px, calc(1.05vw * var(--screen-scale)), 24px);
}

.nextCell .eta{
  color:var(--muted);
  font-size:clamp(11px, calc(.95vw * var(--screen-scale)), 18px);
  margin-top:2px;
}

.messageCell{
  font-size:clamp(13px, calc(1.05vw * var(--screen-scale)), 24px);
}

.stationList{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:clamp(12px, calc(1vw * var(--screen-scale)), 22px);
}

.stationList .time{
  color:var(--muted);
  margin-left:6px;
}

.footer{
  padding:calc(7px * var(--screen-scale)) calc(12px * var(--screen-scale));
  border-top:1px solid var(--line);
  background:rgba(3,14,34,.9);
  color:var(--muted);
  font-size:clamp(11px, calc(.95vw * var(--screen-scale)), 16px);
}

body[data-display-mode="compact"]{
  overflow:auto;
}

body[data-display-mode="compact"] .wallHeaderZoneRow{
  flex-direction:column;
}

body[data-display-mode="compact"] .metaBlock{
  align-items:flex-start;
  min-width:0;
  width:100%;
}

body[data-display-mode="compact"] .viewport{
  padding:12px;
}

body[data-display-mode="compact"] table,
body[data-display-mode="compact"] thead,
body[data-display-mode="compact"] tbody,
body[data-display-mode="compact"] tr,
body[data-display-mode="compact"] th,
body[data-display-mode="compact"] td{
  display:block;
}

body[data-display-mode="compact"] table{
  min-width:0;
}

body[data-display-mode="compact"] thead{
  display:none;
}

body[data-display-mode="compact"] tbody{
  display:grid;
  gap:12px;
}

body[data-display-mode="compact"] tbody tr{
  border:1px solid rgba(140,175,220,.22);
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(12,42,78,.96), rgba(11,37,69,.94));
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

body[data-display-mode="compact"] tbody td{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(140,175,220,.12);
  padding:10px 12px;
  background:transparent !important;
  font-size:15px;
}

body[data-display-mode="compact"] tbody td:last-child{
  border-bottom:none;
}

body[data-display-mode="compact"] tbody td::before{
  content:attr(data-label);
  flex:0 0 42%;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

body[data-display-mode="compact"] .trainCell,
body[data-display-mode="compact"] .messageCell,
body[data-display-mode="compact"] .nextCell{
  flex-direction:column;
  align-items:flex-start;
}

body[data-display-mode="compact"] .trainCell::before,
body[data-display-mode="compact"] .messageCell::before,
body[data-display-mode="compact"] .nextCell::before{
  flex:0 0 auto;
  margin-bottom:4px;
}

body[data-display-mode="compact"] .routeLine{
  font-size:12px;
}

body[data-display-mode="compact"] .stationList{
  width:100%;
  gap:6px;
  font-size:13px;
}

body[data-display-mode="compact"] .status{
  font-size:11px;
}

@media (max-width: 1200px){
  .wallHeaderZoneRow{
    gap:12px;
  }
}

@media (max-width: 900px){
  .wallHeaderZoneRow{
    flex-direction:column;
  }
}

@media (max-width: 700px){
  .wallHeader{
    padding:12px;
  }
  .screenSectionCard{
    padding:10px 12px;
  }
}

@media (max-width: 480px){
  .wallHeader{
    padding:10px;
  }
  .screenSectionCard{
    padding:10px;
  }
}