:root{
  --bg:#000;
  --fg:#ff8a00;
  --fg2:rgba(255,138,0,.78);
  --fg3:rgba(255,138,0,.50);
  --line:rgba(255,138,0,.20);
  --panel:#0a0a0a;
  --shadow: rgba(0,0,0,.72);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --r:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:#0b0b0b;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  font-family: var(--mono);
}

.shell{ width:min(980px,100%); display:flex; justify-content:center; }

.device{
  background:var(--bg);
  color:var(--fg);
  width:min(820px,100%);
  aspect-ratio: 3 / 2; /* “480x320 feel”, but scalable */
  border-radius:var(--r);
  border:1px solid #1a1a1a;
  box-shadow:0 18px 60px var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  border-bottom:1px solid #141414;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--fg2);
  margin-right:6px;
}

.badgePause{
  background:rgba(255,138,0,.10);
  color:var(--fg);
}

.dots{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
  min-height:18px;
  color:var(--fg2);
  font-size:14px;
  letter-spacing:.25em;
}

.gear{
  background:transparent;
  color:var(--fg);
  border:1px solid var(--line);
  border-radius:10px;
  padding:4px 10px;
  cursor:pointer;
  font-family:var(--mono);
}

/* headline */
.headline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px 6px 10px;
  border-bottom:1px solid #141414;
}

.stopName{
  font-size:30px;
  letter-spacing:.04em;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:65%;
}

.timeBlock{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.clock{
  font-size:34px;
  letter-spacing:.10em;
  line-height:1;
  white-space:nowrap;
}

.metaRight{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  margin-top:2px;
  gap:4px;
}

.date{
  font-size:12px;
  color:var(--fg3);
  letter-spacing:.06em;
}

.weather{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:14px;
  color:var(--fg2);
  letter-spacing:.06em;
}
.wxIcon{ width:20px; text-align:center; }
.wxTemp{ min-width:34px; text-align:right; }

/* list */
.list{
  flex:1;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:6px; /* меньше воздуха, но читабельно */
}

/* row as вокзальное табло */
.row{
  display:grid;
  grid-template-columns: 38px 68px 1fr 90px 78px; /* № / line / dest / time(!) / in */
  align-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 10px;
  background:rgba(255,138,0,.02);
  min-height:46px;
  opacity:0;
  transform:translateY(6px);
}

.row.show{
  opacity:1;
  transform:translateY(0);
  transition: opacity .16s linear, transform .16s ease;
}

.cellNo{ color:var(--fg3); font-size:14px; }
.cellLine{ font-size:18px; letter-spacing:.08em; }
.cellDest{
  font-size:18px;
  color:var(--fg2);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.cellTime{
  font-size:18px;
  text-align:right;
  letter-spacing:.08em;
  white-space:nowrap;
}
.timeBang{
  display:inline-block;
  width:12px;
  text-align:center;
  margin-left:6px;
  color:var(--fg);
}
.cellIn{
  font-size:18px;
  text-align:right;
  letter-spacing:.06em;
  white-space:nowrap;
  color:var(--fg);
}
.cellIn small{ font-size:12px; color:var(--fg3); margin-left:4px; }

/* footer */
.status{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  border-top:1px solid #141414;
  font-size:12px;
  color:var(--fg3);
}

/* SETUP */
.setup{
  border:none;
  border-radius:16px;
  padding:0;
  width:min(860px, 94vw);
  background: #0b0b0b;
  color: var(--fg);
  box-shadow:0 24px 90px rgba(0,0,0,.75);
}
.setup::backdrop{ background:rgba(0,0,0,.70); }

.setupInner{ padding:14px; }

.setupHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:12px;
}
.setupTitle{ font-size:24px; letter-spacing:.06em; }
.setupSubtitle{ font-size:12px; color:var(--fg3); margin-top:4px; letter-spacing:.06em; }
.setupAp{ font-size:12px; color:var(--fg3); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }

.card{
  border:1px solid #1a1a1a;
  border-radius:14px;
  background:#060606;
  padding:12px;
  margin-bottom:10px;
}
.cardTitle{
  font-size:13px;
  color:var(--fg2);
  letter-spacing:.08em;
  margin-bottom:10px;
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

label span{
  display:block;
  font-size:12px;
  color:var(--fg3);
  margin-bottom:6px;
}

input, select{
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#000;
  color:var(--fg);
  font-family:var(--mono);
  outline:none;
}

.addStop{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  margin-bottom:8px;
}

.suggest{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:10px;
}
.suggestItem{
  padding:10px;
  cursor:pointer;
  background:#000;
  border-bottom:1px solid rgba(255,138,0,.10);
  color:var(--fg2);
}
.suggestItem:hover{ background: rgba(255,138,0,.06); }
.suggestItem:last-child{ border-bottom:none; }
.suggestSmall{ color:var(--fg3); font-size:12px; margin-top:4px; }

.stopList{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}
.stopItem{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
  border:1px solid rgba(255,138,0,.14);
  border-radius:12px;
  padding:10px;
  background:#000;
}
.stopMain{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.stopLabel{ color:var(--fg); font-size:14px; letter-spacing:.04em; }
.stopId{ color:var(--fg3); font-size:12px; }

.stopBtns{
  display:flex;
  gap:8px;
  align-items:center;
}
.iconBtn{
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  font-family:var(--mono);
}

.rowActions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}

.hintSmall{
  font-size:12px;
  color:var(--fg3);
}

.setupButtons{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:10px;
}

.btn{
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
  font-family:var(--mono);
}
.btn.primary{ background: rgba(255,138,0,.12); }
.btn.danger{ border-color: rgba(255,138,0,.35); background: rgba(255,138,0,.06); }

.toast{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(255,138,0,.25);
  border-radius:12px;
  background:rgba(255,138,0,.06);
  color:var(--fg);
  font-size:12px;
  letter-spacing:.06em;
  text-align:right;
}

/* confirm dialog */
.confirm{
  border:none;
  border-radius:16px;
  padding:0;
  width:min(520px, 92vw);
  background:#0b0b0b;
  color:var(--fg);
  box-shadow:0 24px 80px rgba(0,0,0,.75);
}
.confirm::backdrop{ background:rgba(0,0,0,.70); }
.confirmInner{ padding:14px; }
.confirmTitle{ font-size:14px; color:var(--fg2); letter-spacing:.08em; }
.confirmText{ margin-top:8px; font-size:13px; color:var(--fg3); line-height:1.4; }
.confirmBtns{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:12px;
}

@media (max-width: 720px){
  .stopName{ font-size:24px; }
  .clock{ font-size:28px; }
  .row{
    grid-template-columns: 34px 58px 1fr 86px 72px;
    padding:9px 9px;
  }
  .cellLine,.cellDest,.cellTime,.cellIn{ font-size:16px; }
  .grid2{ grid-template-columns:1fr; }
}