:root{
  --bg1:#071018;
  --bg2:#03070c;
  --panel:rgba(255,255,255,0.045);
  --panelBorder:rgba(255,255,255,0.10);
  --text:#eef3f7;
  --muted:rgba(255,255,255,0.72);
  --accent:#a00000;

  /* Breaking banner knobs */
  --ticker-height: 110px;          /* increase to make taller */
  --ticker-speed: 350s;            /* increase to slow down */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  padding-bottom: 96px; /* space for fixed footer */
}

/* Header */
.command-header{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:14px 18px;
  background: linear-gradient(90deg, #7a0000, #2a0000);
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.header-left{flex: 1 1 35%;}
.header-center{flex: 1 1 35%; display:flex; justify-content:center;}
.header-right{flex: 1 1 30%; display:flex; justify-content:flex-end;}

#searchInput{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  outline:none;
}
#searchInput::placeholder{color:rgba(255,255,255,0.55)}
.muted{opacity:0.82; font-size:12px; margin-top:6px}
.tiny{font-size:11px; margin-top:6px}

.status-panel,.casualty-panel{
  width: min(520px, 100%);
  padding:12px 14px;
  border-radius:14px;
  background: rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
}
.status-panel h2{margin:0 0 6px 0; letter-spacing:0.7px}
.status-panel p,.casualty-panel p{margin:6px 0;}

/* Breaking News ribbon */
.breaking-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  height: var(--ticker-height);
  padding:0 14px;
  background: rgba(0,0,0,0.55);
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.breaking-label{
  font-weight:800;
  letter-spacing:0.8px;
  background: var(--accent);
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  white-space:nowrap;
}
.breaking-track{
  position:relative;
  flex:1;
  overflow:hidden;
  height: calc(var(--ticker-height) - 14px);
  display:flex;
  align-items:center;
}
.breaking-ticker{
  display:inline-flex;
  gap:28px;
  white-space:nowrap;
  will-change: transform;
  animation: ticker var(--ticker-speed) linear infinite;
}
.breaking-ticker a{
  color: #fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.20);
}
.breaking-ticker a:hover{border-bottom-color:#fff}
@keyframes ticker{
  0%{transform: translateX(100%)}
  100%{transform: translateX(-100%)}
}

/* Main grid */
.dashboard-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap:14px;
  padding:14px;
}
.panel{
  background: var(--panel);
  border:1px solid var(--panelBorder);
  border-radius:16px;
  padding:12px;
  min-height: 360px;
  overflow:hidden;
}
.panel h2{
  margin:0 0 10px 0;
  letter-spacing:0.8px;
  font-size: 18px;
}

.items{display:flex; flex-direction:column; gap:10px}
.item{
  padding:10px 10px;
  border-radius:12px;
  background: rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,0.10);
}
.item .topline{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
}
.item .title{
  font-size:14px;
  line-height:1.25;
}
.item .title a{color:var(--text); text-decoration:none}
.item .title a:hover{text-decoration:underline}
.item .meta{
  margin-top:6px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--muted);
}
.badge{
  display:inline-block;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}

/* Fixed footer (smaller) */
.site-footer{
  position: fixed;
  left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.72);
  border-top:1px solid rgba(255,255,255,0.10);
  padding:10px 14px;
}
.footer-content{
  display:flex;
  justify-content:space-between;
  gap:20px;
  max-width: 1400px;
  margin:0 auto;
}
.footer-left p, .footer-right p{margin:4px 0; font-size:12px}
.site-footer a{color:#7fb7ff}

@media (max-width: 1100px){
  .dashboard-grid{grid-template-columns: repeat(2, minmax(260px, 1fr));}
}
@media (max-width: 680px){
  .command-header{flex-direction:column; align-items:stretch;}
  .header-right{justify-content:flex-start}
  .dashboard-grid{grid-template-columns: 1fr;}
  body{padding-bottom: 130px;}
  .footer-content{flex-direction:column;}
}