:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --ink: #162033;
  --muted: #667085;
  --line: #d9e1ec;
  --blue: #1769e0;
  --green: #0f9f6e;
  --yellow: #d99000;
  --red: #d33f49;
  --rail: #223044;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; }
button, input, select { font: inherit; }
button { border: 0; border-radius: 7px; background: var(--blue); color: white; cursor: pointer; min-height: 38px; padding: 0 14px; }
button.secondary { background: #e8eef7; color: var(--ink); }
button.tiny { min-height: 30px; padding: 0 10px; font-size: 13px; }

.app-shell { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.sidebar { background: var(--rail); color: white; padding: 22px 16px; }
.brand { align-items: center; display: flex; gap: 12px; margin-bottom: 28px; }
.brand-mark { align-items: center; background: #3fd0a7; border-radius: 8px; color: #10243a; display: grid; font-weight: 800; height: 38px; place-items: center; width: 38px; }
.brand small { color: #b6c4d6; display: block; margin-top: 4px; }
nav { display: grid; gap: 8px; }
.nav-item { background: transparent; color: #d6dfeb; justify-content: flex-start; text-align: left; width: 100%; }
.nav-item.active { background: #31435c; color: white; }

main { min-width: 0; padding: 22px; }
.topbar { align-items: center; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 18px; }
h1, h2, p { margin: 0; }
h1 { font-size: 26px; line-height: 1.25; }
h2 { font-size: 17px; }
.topbar p, .panel-head span, small { color: var(--muted); }
.top-actions { display: flex; gap: 10px; }
.lang-toggle { background: #e8eef7; border-radius: 8px; display: flex; gap: 4px; padding: 4px; }
.lang-btn { background: transparent; color: var(--muted); font-size: 13px; min-height: 30px; padding: 0 10px; }
.lang-btn.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 4px rgba(22, 32, 51, 0.12); }
.view { display: none; }
.view.active { display: block; }

.metrics { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(115px, 1fr)); margin-bottom: 14px; }
.metric, .panel, .table-panel, .detail-panel .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.metric { padding: 14px; }
.metric strong { display: block; font-size: 24px; margin-top: 7px; }
.work-grid, .split, .teleop-layout, .band-grid { display: grid; gap: 14px; }
.work-grid { grid-template-columns: minmax(420px, 1.35fr) minmax(300px, 0.75fr); }
.split { grid-template-columns: minmax(380px, 1fr) minmax(380px, 1fr); }
.band-grid { grid-template-columns: 1fr 1fr; margin-top: 14px; }
.teleop-layout { grid-template-columns: minmax(460px, 1.2fr) minmax(300px, 0.8fr); }
.panel, .table-panel { padding: 16px; }
.table-panel { overflow-x: auto; }
.panel-head { align-items: center; display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

.warehouse-map {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(90deg, rgba(34, 48, 68, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(34, 48, 68, 0.07) 1px, transparent 1px),
    #eef4fb;
  background-size: 48px 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.zone, .robot-dot, .asset-dot { position: absolute; transform: translate(-50%, -50%); }
.zone { border: 1px solid rgba(22, 32, 51, 0.2); border-radius: 6px; min-width: 72px; padding: 7px 8px; text-align: center; }
.zone.hot { background: rgba(211, 63, 73, 0.16); }
.zone.warm { background: rgba(217, 144, 0, 0.16); }
.zone.cool { background: rgba(15, 159, 110, 0.14); }
.robot-dot { align-items: center; background: var(--blue); border: 3px solid white; border-radius: 50%; box-shadow: 0 8px 18px rgba(22, 32, 51, 0.22); color: white; display: grid; font-size: 11px; font-weight: 700; height: 42px; padding: 0; place-items: center; width: 42px; }
.robot-dot.watch { background: var(--yellow); }
.robot-dot.fault { background: var(--red); }
.asset-dot { align-items: center; background: #6b7280; border-radius: 6px; color: white; display: grid; font-size: 11px; height: 28px; place-items: center; width: 34px; }

.stack { display: grid; gap: 10px; }
.line-card, .insight, .mission-card, .rule-card, .incident-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.line-card, .rule-card { align-items: center; display: grid; gap: 10px; grid-template-columns: 1fr auto auto; }
.insight.warn { border-color: rgba(217, 144, 0, 0.45); background: rgba(217, 144, 0, 0.08); }
.insight.info { border-color: rgba(23, 105, 224, 0.25); }
.rule-card.disabled { opacity: 0.58; }

table { border-collapse: collapse; min-width: 860px; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: left; vertical-align: middle; }
th { color: var(--muted); font-weight: 600; }
.selected-row { background: #f0f6ff; }
.link-button { background: transparent; color: var(--blue); min-height: auto; padding: 0; font-weight: 700; }
.status, .severity { border-radius: 999px; display: inline-block; font-size: 12px; padding: 4px 9px; }
.status.working, .status.running, .status.completed { background: rgba(15, 159, 110, 0.13); color: var(--green); }
.status.idle, .status.planned { background: rgba(23, 105, 224, 0.12); color: var(--blue); }
.status.maintenance, .status.blocked, .severity.P1 { background: rgba(211, 63, 73, 0.13); color: var(--red); }
.severity.P2 { background: rgba(217, 144, 0, 0.15); color: #9a6300; }
.row-actions { display: flex; gap: 8px; }
.row-actions button { font-size: 13px; min-height: 30px; padding: 0 10px; }
.detail-panel { margin-top: 14px; }
.detail-grid { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(100px, 1fr)); }
.detail-grid div { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.detail-grid span { color: var(--muted); display: block; font-size: 12px; margin-bottom: 5px; }

.mission-card header, .mission-card footer, .incident-card header { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.mission-card p, .incident-card p { margin: 10px 0; color: #344054; }
.training-card footer { flex-wrap: wrap; }
.progress { background: #e8eef7; border-radius: 999px; height: 8px; overflow: hidden; margin: 12px 0; }
.progress span { background: var(--green); display: block; height: 100%; }
.form-grid { display: grid; gap: 10px; }
.compact-form { grid-template-columns: 1fr 90px 1fr 1fr auto; margin-top: 12px; }
input, select { border: 1px solid var(--line); border-radius: 7px; min-height: 38px; padding: 0 10px; }

.video-wall { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.camera { align-items: end; aspect-ratio: 16 / 9; background: radial-gradient(circle at 38% 42%, rgba(63, 208, 167, 0.38), transparent 18%), linear-gradient(135deg, #18253a, #33445e 55%, #15283a); border-radius: 8px; color: white; display: flex; overflow: hidden; padding: 12px; position: relative; }
.main-camera { grid-column: span 2; }
.scanline { animation: scan 2.8s linear infinite; background: rgba(63, 208, 167, 0.42); height: 3px; left: 0; position: absolute; right: 0; top: 0; }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(340px); } }
.control-panel { min-height: 100%; }
.joystick { display: grid; gap: 8px; grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 58px); justify-content: center; margin: 24px 0; }
.joystick button { aspect-ratio: 1; font-size: 22px; padding: 0; }
.joy-forward { grid-column: 2; grid-row: 1; }
.joy-left { grid-column: 1; grid-row: 2; }
.joy-stop { grid-column: 2; grid-row: 2; }
.joy-right { grid-column: 3; grid-row: 2; }
.joy-back { grid-column: 2; grid-row: 3; }
.quick-actions { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.health-panel { border-top: 1px solid var(--line); color: var(--muted); display: grid; gap: 8px; margin-top: 18px; padding-top: 14px; }
.log-list { max-height: 560px; overflow: auto; }
.log { border-bottom: 1px solid var(--line); display: grid; gap: 4px; padding: 9px 0; }
.log.warn { color: #9a6300; }
.log.error { color: var(--red); }
.contact-footer { border-top: 1px solid var(--line); margin-top: 34px; padding: 28px 0 10px; }
.contact-title { margin: 0 auto 18px; text-align: center; }
.contact-title h2 { font-size: 27px; letter-spacing: 0; }
.contact-title span { color: var(--muted); display: inline-block; font-size: 13px; margin-top: 5px; padding-bottom: 8px; position: relative; }
.contact-title span::after { background: #d9a520; border-radius: 999px; bottom: 0; content: ""; height: 2px; left: 50%; position: absolute; transform: translateX(-50%); width: 34px; }
.contact-cards { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(210px, 1fr)); margin: 0 auto; max-width: 780px; }
.contact-card { align-items: flex-start; background: var(--panel); border: 1px solid rgba(217, 225, 236, 0.9); border-radius: 8px; box-shadow: 0 18px 36px rgba(22, 32, 51, 0.08); color: var(--ink); display: grid; gap: 12px; grid-template-columns: 52px 1fr; min-height: 112px; min-width: 0; padding: 18px; text-decoration: none; }
.contact-card:hover { border-color: rgba(23, 105, 224, 0.4); box-shadow: 0 22px 42px rgba(22, 32, 51, 0.12); transform: translateY(-1px); }
.contact-card strong { display: block; font-size: 15px; line-height: 1.2; }
.contact-card small { display: block; margin-top: 5px; }
.contact-card b { color: #401080; display: block; font-size: 12px; margin-top: 14px; overflow-wrap: anywhere; }
.contact-card .flag { border-radius: 50%; box-shadow: 0 10px 20px rgba(22, 32, 51, 0.18); display: block; height: 42px; overflow: hidden; width: 42px; }
.flag-us { background: linear-gradient(#b22234 0 7.69%, #fff 7.69% 15.38%, #b22234 15.38% 23.07%, #fff 23.07% 30.76%, #b22234 30.76% 38.45%, #fff 38.45% 46.14%, #b22234 46.14% 53.83%, #fff 53.83% 61.52%, #b22234 61.52% 69.21%, #fff 69.21% 76.9%, #b22234 76.9% 84.59%, #fff 84.59% 92.28%, #b22234 92.28%); position: relative; }
.flag-us::before { background: #3c3b6e; content: ""; height: 54%; left: 0; position: absolute; top: 0; width: 48%; }
.flag-sg { background: linear-gradient(#ef3340 0 50%, #fff 50%); position: relative; }
.flag-sg::before { color: #fff; content: "☾★"; font-size: 15px; left: 7px; letter-spacing: -4px; position: absolute; top: 8px; }
.flag-cn { background: #ee1c25; position: relative; }
.flag-cn::before { color: #ffde00; content: "★"; font-size: 18px; left: 8px; position: absolute; top: 5px; }

@media (max-width: 1100px) {
  .metrics, .work-grid, .split, .teleop-layout, .band-grid, .detail-grid, .compact-form, .contact-cards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { padding: 14px; }
  .brand { margin-bottom: 14px; }
  nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-item { font-size: 14px; min-height: 40px; padding: 0 10px; text-align: center; }
  main { padding: 14px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  h1 { font-size: 22px; }
  .topbar p { font-size: 14px; }
  .top-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .lang-toggle { grid-column: 1 / -1; justify-content: center; }
  .top-actions > button { width: 100%; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { padding: 12px; }
  .metric strong { font-size: 22px; }
  .panel, .table-panel { padding: 12px; }
  .panel-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .warehouse-map { min-height: 330px; aspect-ratio: auto; }
  .zone { font-size: 12px; min-width: 58px; padding: 5px 6px; }
  .robot-dot { height: 36px; width: 36px; font-size: 10px; }
  .asset-dot { height: 24px; width: 30px; font-size: 10px; }
  .line-card, .rule-card { align-items: stretch; grid-template-columns: 1fr; }
  .mission-card header, .mission-card footer, .incident-card header { align-items: flex-start; flex-direction: column; }
  .video-wall { grid-template-columns: 1fr; }
  .main-camera { grid-column: auto; }
  .joystick { grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(3, 54px); }
  .quick-actions { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-footer { margin-top: 24px; padding-top: 22px; }
  .contact-title h2 { font-size: 24px; }
  .contact-card { grid-template-columns: 46px 1fr; padding: 14px; }
  .contact-card .flag { height: 38px; width: 38px; }
}

@media (max-width: 420px) {
  nav { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .top-actions { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .contact-card { grid-template-columns: 1fr; }
}