/* Military AI Command Console — Visual Style (red/green monochrome + dark) */
:root{
  --bg:#07080a;
  --panel:#0c0f12;
  --accent:#9a1111; /* red */
  --green:#7ef27e;  /* green telemetry */
  --muted:#93a1a1;
  --glass: rgba(255,255,255,0.02);
  --card-shadow: 0 6px 20px rgba(0,0,0,0.6);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, "Roboto Mono", monospace;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg),#020203 85%);color:var(--green)}
#console{max-width:1600px;margin:18px auto;padding:14px 24px;display:flex;flex-direction:column;gap:14px}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:8px;background:var(--panel);box-shadow:var(--card-shadow);border:1px solid rgba(255,255,255,0.03)}
.title{font-weight:600;letter-spacing:0.6px}
.badge{background:var(--accent);padding:6px 8px;margin-right:10px;border-radius:4px;color:#fff;font-weight:700;margin-right:8px;font-size:12px}
.status{display:flex;gap:18px;font-size:13px;color:var(--muted)}
.status-item strong{color:var(--green)}

/* Panels */
.panels{display:grid;grid-template-columns:minmax(500px, 1.2fr) minmax(420px, 0.8fr);gap:18px;align-items:start}
.left{display:flex;flex-direction:column;gap:12px}
.right{display:flex;flex-direction:column;gap:12px}

/* Radar card */
.radar-card{position:relative;background:linear-gradient(180deg,#081014,#071014);border-radius:10px;padding:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--card-shadow);display:flex;align-items:center;justify-content:center}
canvas{border-radius:8px;background:radial-gradient(circle at 40% 30%, rgba(0,0,0,0.05), transparent 30%);box-shadow:inset 0 0 30px rgba(0,255,120,0.02);max-width:100%;height:auto}
.radar-overlay{position:absolute;inset:12px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.radar-readouts{color:var(--muted);font-size:13px;padding:8px;background:linear-gradient(90deg, rgba(0,0,0,0.2), transparent);border-radius:6px;margin:6px;pointer-events:auto}
.radar-controls{display:flex;gap:8px;align-self:flex-end;margin:6px}
.radar-controls button{pointer-events:auto;background:#0b0e10;border:1px solid rgba(255,255,255,0.03);color:var(--green);padding:6px 8px;border-radius:6px;cursor:pointer;font-weight:600}

/* Meters */
.meters{display:flex;gap:8px;flex-direction:column}
.meter{display:flex;flex-direction:column;gap:6px;background:var(--panel);padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.02)}
.meter label{font-size:12px;color:var(--muted)}
.bar{height:12px;background:rgba(255,255,255,0.03);border-radius:8px;overflow:hidden}
.bar > div{height:100%;background:linear-gradient(90deg,var(--green),#b2ffb2);width:20%}

/* Logs */
.log-card{background:var(--panel);padding:8px;border-radius:10px;box-shadow:var(--card-shadow);border:1px solid rgba(255,255,255,0.02);display:flex;flex-direction:column;gap:8px}
.log-header{font-weight:700;color:var(--muted);padding:6px 8px;border-bottom:1px solid rgba(255,255,255,0.02)}
.logs{height:320px;overflow:auto;padding:10px;font-size:13px;background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);border-radius:6px}
.log-line{color:var(--green);padding:2px 0;line-height:1.3;border-bottom:1px dashed rgba(255,255,255,0.02);white-space:pre-wrap}
.controls{display:flex;gap:8px;align-self:flex-end}
.controls button{background:#0b0e10;border:1px solid rgba(255,255,255,0.03);color:var(--green);padding:6px 8px;border-radius:6px;cursor:pointer;font-weight:600}

/* info grid */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.info{background:var(--panel);padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.02)}
.info .label{font-size:12px;color:var(--muted)}
.info .value{font-weight:700;color:var(--green);margin-top:6px}

/* Footer */
.footer{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;padding:6px 12px}

/* Wide screens */
@media (min-width:1600px){
  #console{max-width:2000px}
  .panels{grid-template-columns:minmax(600px, 1.3fr) minmax(480px, 0.7fr);gap:24px}
  canvas{width:600px;height:600px}
  .logs{height:400px}
}

@media (min-width:2000px){
  #console{max-width:2400px}
  .panels{grid-template-columns:minmax(700px, 1.4fr) minmax(520px, 0.6fr);gap:32px}
  canvas{width:700px;height:700px}
  .logs{height:480px}
}

/* Medium screens */
@media (max-width:1200px){
  .panels{grid-template-columns:1fr 420px}
}

/* Small screens */
@media (max-width:1000px){
  .panels{grid-template-columns:1fr;grid-auto-rows:auto}
  .right{order:2}
  .left{order:1}
  canvas{width:100%;height:auto}
}