:root { font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; color: #dce8fa; background: #050a16; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 1180px; min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 55% 20%, #10213c 0, #070d1b 42%, #030711 100%); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.viewport-shell { width: 100vw; height: 100vh; padding: clamp(12px, 1.6vh, 22px); display: grid; place-items: center; }
.dashboard { width: min(1900px, 100%); height: min(1040px, 100%); display: grid; grid-template-columns: 285px 1fr; overflow: hidden; border: 1px solid #22344f; background: #071020; box-shadow: 0 0 0 7px rgba(26,42,70,.28), 0 28px 90px #000b; }
.sidebar { position: relative; padding: 38px 28px 28px; border-right: 1px solid #24334e; background: linear-gradient(180deg,#050b18 0%,#070e1e 60%,#091324 100%); }
.brand { height: 92px; font-size: 35px; font-weight: 800; letter-spacing: 2px; color: #f7fbff; }
.brand span::after { content: '.'; color: #83ffbd; }
.brand i { display: block; width: 44px; height: 5px; margin-top: -52px; background: #ff7f4c; box-shadow: 0 0 12px #ff744f99; }
nav { display: grid; gap: 17px; margin-top: 6px; }
nav button { height: 58px; display:flex; align-items:center; gap:22px; padding: 0 22px; border:0; border-radius: 4px; background: transparent; color:#8d99c8; font-size:20px; cursor:default; }
nav button svg, nav button > i { font-size: 24px; }
nav button.active { color:#baffd3; background:linear-gradient(90deg,#28456e,#25395d); box-shadow: inset 3px 0 #82ffb6, 0 6px 18px #0004; }
.profile { position:absolute; left:28px; right:28px; bottom:28px; text-align:center; color:#73809d; }
.avatar { position:absolute; width:56px; height:56px; top:-20px; left:50%; transform:translateX(-50%); display:grid; place-items:center; border-radius:50%; background:#fff; color:#ed5545; font-size:27px; box-shadow:0 0 20px #b8e4ff55; }
.avatar > i { font-style:normal; }
.avatar em { position:absolute; right:-4px; top:-2px; width:22px; height:22px; border-radius:50%; background:#ef3646; color:#fff; font:normal 13px/22px sans-serif; }
.profile p { margin:0 0 5px; font-size:15px; }.profile small{font-size:13px}.profile button{width:100%; margin-top:17px; height:39px; border:0; border-radius:3px; background:#283b5d; font-size:17px; display:flex; align-items:center; justify-content:center; gap:10px;}
.content { min-width:0; padding: 18px 20px 20px; display:grid; grid-template-rows: 282px minmax(330px,1fr) 254px; gap:15px; background:linear-gradient(135deg,rgba(13,25,45,.94),rgba(4,10,21,.98)); }
.top-grid,.bottom-grid { display:grid; grid-template-columns: .96fr 1.14fr; gap:15px; min-height:0; }
.bottom-grid { grid-template-columns: .95fr 1.2fr; }
.panel { position:relative; min-width:0; overflow:hidden; border:1px solid #20304c; background:linear-gradient(145deg,rgba(12,24,44,.97),rgba(7,16,31,.98)); box-shadow:inset 0 0 25px rgba(29,61,101,.15), 0 5px 13px #0004; }
.panel::before { content:''; position:absolute; inset:0; pointer-events:none; border-top:1px solid rgba(102,145,207,.08); background:linear-gradient(90deg,transparent,rgba(65,108,163,.045),transparent); }
.section-title { height:47px; display:flex; align-items:center; gap:12px; padding:0 15px; border-bottom:1px solid #263550; }
.section-title b { font-size:21px; letter-spacing:1px; color:#dce8fb; }.section-title span{font:700 12px 'Rajdhani'; letter-spacing:1px; color:#32415e;}
.status-grid { padding: 13px 18px; display:grid; grid-template-columns:1fr 1fr; gap:9px 18px; }
.status-row { min-height:42px; display:grid; grid-template-columns:15px 105px minmax(95px,1fr) auto auto; align-items:center; gap:10px; }
.status-row.wide { grid-column:span 2; }
.signal { width:13px; height:13px; border-radius:50%; background:#73f2b3; box-shadow:0 0 9px #69ffc6; }.signal.warn{background:#ff7337;box-shadow:0 0 8px #ff7f38;}
.status-label,.plain-row span { color:#8d9dbd; font-size:16px; }.status-row strong,.plain-row strong{height:36px;padding:5px 15px;border:1px solid #364866;background:#0a1528;font-size:17px;color:#a9ddf0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.orange{color:#ff8a4f!important;}
html[lang="en"] .brand span { font-size: 29px; white-space: nowrap; letter-spacing: -.02em; }
html[lang="en"] .sidebar nav button span { font-size: 16px; white-space: nowrap; }
html[lang="en"] .status-label,
html[lang="en"] .plain-row span { font-size: 13px; white-space: nowrap; }
html[lang="en"] .status-row strong,
html[lang="en"] .plain-row strong { padding-inline: 10px; font-size: 14px; }
html[lang="en"] .action-grid button { font-size: 13px; white-space: nowrap; }
.mint-btn { min-width:70px; height:38px; border:0; border-radius:2px; background:#7dffb6; color:#173526; font-weight:700; box-shadow:0 0 12px #67ffb333; }
.vehicle-grid { gap:9px 18px; }.plain-row{grid-column:span 2;display:grid;grid-template-columns:85px 115px 75px 90px 95px 70px;align-items:center;gap:10px;}.plain-row.unlock{grid-template-columns:85px 1fr 76px 76px}.vehicle-grid .status-row{grid-template-columns:15px 90px 1fr;}
.battery-panel { min-height:0; }.battery-list { height:calc(100% - 47px); padding:17px 16px 13px; display:grid; grid-template-columns:repeat(8,1fr); gap:13px; }
.battery-card { min-width:0; display:grid; grid-template-rows:1fr 42px; border:1px solid #15253e; background:#071121; transition:.2s; }.battery-card.selected{border-color:#5ea285;box-shadow:inset 0 0 18px #5affaa12;}.battery-visual{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at center,#15342f 0,#081522 48%,#050d1a 100%);}.battery-visual img{width:94%;height:94%;object-fit:contain;transform:scale(1.42);filter:drop-shadow(0 5px 9px #000) drop-shadow(0 0 9px #53f1ad55);}.battery-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:20%;text-shadow:0 2px 4px #000;font-family:Arial,"Microsoft YaHei UI",sans-serif;}.battery-copy b{font-size:18px}.battery-copy span{font-size:14px}.battery-card footer{position:relative;padding:9px 12px;background:#172744;color:#d4ddf0;font-size:17px;font-weight:600;}
.robot-panel .status-row:not(.wide){grid-template-columns:15px 92px minmax(112px,1fr)}
.robot-panel .status-row:nth-child(5){grid-template-columns:15px 92px minmax(92px,1fr) auto auto}
.operation-panel,.log-panel{min-height:0}.toggle{position:absolute;right:20px;top:12px;display:flex;align-items:center;gap:5px;padding:2px 7px;border-radius:18px;background:#7bffb8;color:#163a29;font-weight:700}.toggle i{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0005}.operation-body{display:grid;grid-template-columns:165px 1fr;gap:15px;padding:14px 20px 10px}.large-action{border:0;background:#293b5c;font-size:20px}.operation-status{display:grid;grid-template-columns:auto auto auto auto;align-items:center;gap:5px 12px;font-size:14px}.operation-status span{color:#7888a7}.operation-status b{color:#9aeac0}.action-grid{padding:0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px 12px}.action-grid button{height:39px;border:0;background:#273958;font-size:16px}.action-grid button.primary{background:#7dffb6;color:#153829;font-weight:700}.log-panel table{width:100%;border-collapse:collapse;font-size:16px}.log-panel th{height:43px;background:#14233d;color:#8795b0;text-align:left;padding:0 24px;font-weight:500}.log-panel td{height:38px;padding:0 24px;border-bottom:1px solid #27344a;color:#c3cddd}.log-panel tr.danger td{color:#ff7b57;}
@media (max-height: 850px) { .dashboard{height:100%}.content{grid-template-rows:230px minmax(270px,1fr) 220px}.brand{height:70px}.sidebar{padding-top:26px}nav{gap:9px}nav button{height:50px}.profile{bottom:15px}.section-title{height:40px}.status-grid{padding:6px 14px;gap:4px 14px}.status-row{min-height:35px}.status-row strong,.plain-row strong{height:31px;padding-top:3px}.battery-list{height:calc(100% - 40px);padding-top:10px}.battery-card{grid-template-rows:1fr 34px}.battery-card footer{padding:5px 10px}.operation-body{padding-top:6px}.action-grid button{height:32px}.log-panel th{height:36px}.log-panel td{height:31px}.section-title b{font-size:18px}.content{gap:10px}.top-grid,.bottom-grid{gap:10px}}

@media (max-width: 767px) {
  body { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; }
  .viewport-shell { width: 100%; height: auto; min-height: 0; padding: 0; display: block; }
  .dashboard { width: 100%; height: auto; min-height: 0; display: block; overflow: visible; border: 0; box-shadow: none; }
  .sidebar { padding: 18px 14px 14px; border-right: 0; border-bottom: 1px solid #24334e; }
  .brand { height: 52px; padding-left: 4px; font-size: 26px; }
  .brand i { width: 34px; height: 4px; margin-top: -40px; }
  nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
  nav button { height: 42px; justify-content: center; gap: 7px; padding: 0 5px; font-size: 13px; }
  nav button > i { font-size: 16px; }
  .profile { position: static; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; text-align: left; }
  .profile p { margin: 0; color: #b6c4dd; font-size: 13px; }
  .profile small { flex: 1; font-size: 10px; }
  .profile button { width: auto; height: 30px; margin: 0; padding: 0 10px; font-size: 12px; }

  .content { padding: 10px; display: block; background: #071020; }
  .top-grid, .bottom-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .panel { margin-bottom: 10px; overflow: hidden; }
  .section-title { height: 40px; padding: 0 11px; }
  .section-title b { font-size: 16px; }
  .section-title span { font-size: 9px; }

  .status-grid { padding: 10px; grid-template-columns: 1fr; gap: 7px; }
  .status-row, .robot-panel .status-row:not(.wide), .robot-panel .status-row:nth-child(5), .vehicle-grid .status-row { grid-template-columns: 11px 74px minmax(0, 1fr); min-height: 35px; gap: 7px; }
  .status-row.wide { grid-column: auto; }
  .robot-panel .status-row:nth-child(5) { grid-template-columns: 11px 74px minmax(0, 1fr) 48px 48px; }
  .signal { width: 10px; height: 10px; }
  .status-label, .plain-row span { font-size: 12px; }
  .status-row strong, .plain-row strong { height: 32px; padding: 5px 8px; font-size: 12px; }
  .mint-btn { min-width: 48px; height: 32px; padding: 0 7px; font-size: 12px; }
  .plain-row, .plain-row.unlock { grid-column: auto; grid-template-columns: 68px minmax(0, 1fr) 52px; gap: 7px; }
  .plain-row > span:nth-of-type(2), .plain-row > strong:nth-of-type(2), .plain-row:not(.unlock) > button:last-child { display: none; }
  .plain-row.unlock { grid-template-columns: 68px minmax(0, 1fr) 52px 52px; }

  .battery-list { height: auto; padding: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .battery-card { height: 205px; grid-template-rows: 1fr 34px; }
  .battery-visual img { width: 90%; height: 90%; transform: scale(1.28); }
  .battery-copy { padding-top: 18%; }
  .battery-copy b { font-size: 15px; }
  .battery-copy span { font-size: 11px; }
  .battery-card footer { padding: 6px 9px; font-size: 14px; }

  .operation-body { grid-template-columns: 105px 1fr; gap: 8px; padding: 10px; }
  .large-action { font-size: 14px; }
  .operation-status { grid-template-columns: auto 1fr; gap: 4px 7px; font-size: 11px; }
  .action-grid { padding: 0 10px 10px; gap: 7px; }
  .action-grid button { height: 34px; font-size: 12px; }
  .toggle { top: 9px; right: 11px; font-size: 12px; }
  .toggle i { width: 14px; height: 14px; }

  .log-panel { overflow: hidden; }
  .log-panel table { width: 100%; min-width: 0; table-layout: fixed; font-size: 10px; }
  .log-panel th, .log-panel td { height: 34px; padding: 0 6px; overflow-wrap: anywhere; }
  .log-panel th:nth-child(1) { width: 42%; }
  .log-panel th:nth-child(2) { width: 23%; }
  .log-panel th:nth-child(3) { width: 35%; }
  .example-back-link { top: 10px; right: 10px; min-height: 30px; padding: 0 9px; font-size: 10px; }
}