/* ========== 盾卫 SHIELD OPS — FUI Server Observatory ========== */
:root{
  --bg:#050507;
  --bg-2:#080a10;
  --surface:rgba(255,255,255,.03);
  --surface-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.18);
  --text:#f0f2f6;
  --text-2:#9aa3b2;
  --text-3:#5f6b7d;

  --amber:#ff8c00;
  --amber-2:#ff6b00;
  --amber-soft:rgba(255,140,0,.12);
  --amber-glow:rgba(255,140,0,.35);
  --cyan:#00d4ff;
  --green:#2ecc71;
  --red:#ff2a2a;
  --yellow:#f1c40f;

  --font:"Rajdhani", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:"JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --radius:4px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh;
  font-family:var(--font);
  background:var(--bg); color:var(--text);
  line-height:1.5; overflow-x:hidden;
}
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:var(--amber); border-radius:3px; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select{ font-family:inherit; }

.grid-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.scanline{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:linear-gradient(to bottom, transparent 50%, rgba(255,140,0,.02) 51%, transparent 52%);
  background-size:100% 4px; opacity:.6; mix-blend-mode:overlay;
}

/* Loader */
.loader{
  position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; background:var(--bg);
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader.is-hidden{ opacity:0; visibility:hidden; }
.loader__gear{ font-size:4rem; color:var(--amber); animation:spin 3s linear infinite; }
.loader__text{ font-size:1.1rem; letter-spacing:.3em; color:var(--text-2); }
.loader__bar{ width:220px; height:2px; background:var(--line); overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0; background:var(--amber); animation:loadBar 1.4s var(--ease) forwards; }
@keyframes spin{ to{ transform:rotate(360deg);} }
@keyframes loadBar{ to{ width:100%;} }

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; height:64px; background:rgba(5,5,7,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar__brand{ display:flex; align-items:center; gap:14px; }
.brand__mark{ width:34px; height:34px; border:2px solid var(--amber); transform:rotate(45deg); box-shadow:0 0 14px var(--amber-glow); position:relative; }
.brand__mark::after{ content:""; position:absolute; inset:6px; background:var(--amber); }
.brand__name{ font-size:1.3rem; font-weight:700; letter-spacing:.08em; }
.brand__name span{ color:var(--amber); font-size:.95rem; letter-spacing:.1em; }
.brand__tag{ font-size:.62rem; letter-spacing:.2em; color:var(--text-3); }
.topbar__nav{ display:flex; gap:6px; }
.topbar__nav a{ padding:8px 14px; font-size:.86rem; font-weight:600; letter-spacing:.04em; color:var(--text-2); border:1px solid transparent; transition:.2s var(--ease); position:relative; }
.topbar__nav a::after{ content:""; position:absolute; bottom:-1px; left:50%; width:0; height:2px; background:var(--amber); transition:.25s var(--ease); transform:translateX(-50%); }
.topbar__nav a:hover,.topbar__nav a.is-active{ color:var(--text); }
.topbar__nav a.is-active::after{ width:70%; }
.topbar__meta{ display:flex; align-items:center; gap:16px; }
.node-select{ background:rgba(255,255,255,.04); color:var(--text); border:1px solid var(--line); border-radius:var(--radius); padding:7px 12px; font-size:.78rem; outline:none; cursor:pointer; }
.node-select:focus{ border-color:var(--amber); }
.clock{ font-family:var(--mono); font-size:.95rem; color:var(--amber); letter-spacing:.04em; }
.alert-badge{ min-width:24px; height:24px; padding:0 7px; border-radius:12px; background:var(--red); color:#fff; font-weight:700; font-size:.8rem; display:grid; place-items:center; box-shadow:0 0 12px var(--red); transition:transform .18s var(--ease); }

.main{ position:relative; z-index:2; padding:34px 28px 80px; }

/* View switching */
.view{ display:none; animation:viewIn .45s var(--ease); }
.view--active{ display:block; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

/* Section header */
.section__header{ display:flex; align-items:baseline; gap:16px; margin-bottom:26px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.section__id{ font-family:var(--mono); font-size:.7rem; color:var(--amber); border:1px solid var(--amber); padding:2px 7px; border-radius:var(--radius); }
.section__title{ font-size:1.3rem; font-weight:700; letter-spacing:.1em; margin:0; }
.section__subtitle{ font-size:.72rem; color:var(--text-3); letter-spacing:.08em; margin-left:auto; }

/* Overview */
.overview-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; }
.score-card{
  grid-row:span 2; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.score-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--amber), transparent); }
.score-card__ring{ position:relative; width:150px; height:150px; }
.score-card__ring svg{ transform:rotate(-90deg); width:100%; height:100%; }
.ring-bg{ fill:none; stroke:var(--line); stroke-width:8; }
.ring-fill{ fill:none; stroke:var(--amber); stroke-width:8; stroke-linecap:round; filter:drop-shadow(0 0 6px var(--amber-glow)); transition:stroke-dashoffset 1s var(--ease); }
.score-card__value{ position:absolute; inset:0; display:grid; place-items:center; font-size:3rem; font-weight:700; }
.score-card__label{ margin-top:16px; font-size:.82rem; letter-spacing:.16em; color:var(--text-2); }
.score-card__rank{ margin-top:4px; font-size:1.05rem; font-weight:700; color:var(--amber); }

.stat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  position:relative; overflow:hidden; transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.stat-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(var(--amber),var(--amber)) left top / 18px 1px no-repeat,
    linear-gradient(var(--amber),var(--amber)) left top / 1px 18px no-repeat,
    linear-gradient(var(--amber),var(--amber)) right bottom / 18px 1px no-repeat,
    linear-gradient(var(--amber),var(--amber)) right bottom / 1px 18px no-repeat;
  opacity:.35;
}
.stat-card:hover{ transform:translateY(-3px); border-color:var(--amber); }
.stat-card__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.stat-card__id{ font-family:var(--mono); font-size:.68rem; color:var(--text-3); }
.status-dot{ width:8px; height:8px; border-radius:50%; }
.status-dot.is-online{ background:var(--green); box-shadow:0 0 8px var(--green); }
.status-dot.is-warning{ background:var(--yellow); box-shadow:0 0 8px var(--yellow); }
.status-dot.is-danger{ background:var(--red); box-shadow:0 0 8px var(--red); }
.stat-card__value{ font-size:2.2rem; font-weight:700; }
.stat-card__label{ font-size:.72rem; letter-spacing:.12em; color:var(--text-3); margin-top:4px; }

.overview-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; }
.quick-entries{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.quick-entry{ flex:1; min-width:160px; text-align:center; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); font-weight:600; letter-spacing:.06em; transition:.2s; }
.quick-entry:hover{ border-color:var(--amber); color:var(--amber); }

/* nodes tabs */
.node-tabs{ display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap; }
.node-tab{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 20px; color:var(--text-2); display:flex; flex-direction:column; align-items:flex-start; transition:.2s; }
.node-tab small{ font-size:.68rem; color:var(--text-3); margin-top:2px; font-family:var(--mono); }
.node-tab.is-active{ border-color:var(--amber); color:var(--text); background:var(--amber-soft); }
.node-tab.is-active small{ color:var(--amber); }

/* metrics */
.metrics-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px; }
.metric-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; position:relative; overflow:hidden; }
.metric-card::before{ content:""; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--amber); opacity:.7; }
.metric-card__header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.metric-card__name{ font-size:.8rem; letter-spacing:.1em; color:var(--text-2); }
.metric-card__value{ font-family:var(--mono); font-size:1.5rem; font-weight:700; color:var(--amber); }
.metric-card__bar{ height:4px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:12px; }
.metric-card__bar span{ display:block; height:100%; background:linear-gradient(90deg, var(--amber-2), var(--amber)); border-radius:2px; transition:width .6s var(--ease); }
.sparkline{ width:100%; height:48px; display:block; }
.metric-card__detail{ margin-top:10px; font-size:.72rem; color:var(--text-3); }

/* two cols */
.servers-cols,.firewall-cols,.forensics-cols,.alert-cols{ display:grid; gap:18px; margin:24px 0; }
.servers-cols{ grid-template-columns:1fr 1fr; }
.firewall-cols{ grid-template-columns:1.2fr 1fr; }
.forensics-cols{ grid-template-columns:1fr 1.2fr; }
.alert-cols{ grid-template-columns:1.5fr 1fr; }

/* node info */
.node-info{ display:flex; flex-direction:column; gap:10px; }
.node-info__row{ display:flex; justify-content:space-between; font-size:.86rem; color:var(--text-2); padding:6px 0; border-bottom:1px solid var(--line); }
.node-info__row:last-child{ border-bottom:none; }
.node-info__row span:first-child{ color:var(--text-3); }

/* data table */
.data-table{ width:100%; border-collapse:collapse; font-size:.82rem; }
.data-table th{ text-align:left; padding:10px 12px; font-size:.72rem; letter-spacing:.08em; color:var(--text-3); border-bottom:1px solid var(--line-strong); font-weight:600; }
.data-table td{ padding:10px 12px; border-bottom:1px solid var(--line); color:var(--text-2); }
.data-table tbody tr{ transition:.15s; }
.data-table tbody tr:hover{ background:var(--surface-2); }
.data-table tbody tr:hover td{ color:var(--text); }

/* pill */
.pill{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:3px; font-size:.68rem; font-weight:700; letter-spacing:.04em; }
.pill.is-green{ background:rgba(46,204,113,.12); color:var(--green); }
.pill.is-danger{ background:rgba(255,42,42,.12); color:var(--red); }
.pill.is-warning{ background:rgba(255,140,0,.12); color:var(--amber); }
.pill.is-yellow{ background:rgba(241,196,15,.12); color:var(--yellow); }

/* panel */
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; position:relative; overflow:hidden; margin-bottom:18px; }
.panel::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--amber), transparent 70%); }
.panel__header{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.panel__id{ font-family:var(--mono); font-size:.65rem; color:var(--text-3); border:1px solid var(--line); padding:2px 6px; border-radius:2px; }
.panel h3{ margin:0; font-size:.95rem; letter-spacing:.06em; }
.panel__search{ margin-left:auto; }
.panel__search input{ background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text); padding:6px 10px; font-size:.78rem; border-radius:var(--radius); outline:none; width:180px; }
.panel__search input:focus{ border-color:var(--amber); }
.panel__toolbar{ display:flex; gap:8px; margin-bottom:14px; }
.panel__toolbar input{ flex:1; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text); padding:8px 12px; font-size:.8rem; border-radius:var(--radius); outline:none; }
.panel__toolbar input:focus{ border-color:var(--amber); }
.panel__toolbar-inline{ margin-left:auto; display:flex; gap:6px; }

/* chips */
.chip{ background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text-2); padding:5px 12px; border-radius:14px; font-size:.74rem; transition:.2s; }
.chip:hover{ border-color:var(--amber); color:var(--text); }
.chip.is-active{ background:var(--amber-soft); border-color:var(--amber); color:var(--amber); }

/* buttons */
.btn{ background:var(--amber); color:#000; border:none; border-radius:var(--radius); padding:8px 16px; font-size:.8rem; font-weight:700; transition:.2s var(--ease); }
.btn:hover{ background:var(--amber-2); box-shadow:0 0 14px var(--amber-glow); }
.btn--ghost{ background:transparent; color:var(--amber); border:1px solid var(--amber); }
.btn--ghost:hover{ background:var(--amber-soft); }
.btn--small{ padding:5px 10px; font-size:.72rem; }

/* firewall */
.fw-subtabs{ display:flex; gap:8px; margin-bottom:14px; }
.rule-list{ display:flex; flex-direction:column; gap:8px; }
.blocked-list{ display:flex; flex-direction:column; gap:0; }
.blocked-item{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.82rem; }
.blocked-item:last-child{ border-bottom:none; }
.blocked-item__count{ font-weight:700; color:var(--red); }
.blocked-item__time{ font-size:.7rem; color:var(--text-3); }
.port-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.port-item{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; background:rgba(255,255,255,.03); border-radius:var(--radius); border:1px solid var(--line); transition:.2s; }
.port-item:hover{ border-color:var(--amber); }
.port-item span:first-child{ font-family:var(--mono); font-size:1.1rem; font-weight:700; color:var(--amber); }

/* forensics */
.forensics-filters{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.src-bars{ display:flex; flex-direction:column; gap:12px; }
.src-bar{ display:grid; grid-template-columns:140px 1fr 50px; align-items:center; gap:10px; font-size:.8rem; }
.src-bar__ip{ font-family:var(--mono); color:var(--text-2); }
.src-bar__track{ height:14px; background:var(--line); border-radius:7px; overflow:hidden; }
.src-bar__fill{ height:100%; background:linear-gradient(90deg, var(--amber-2), var(--amber)); border-radius:7px; }
.src-bar__num{ text-align:right; color:var(--red); font-weight:700; }
.timeline{ display:flex; flex-direction:column; }
.timeline__item{ display:flex; gap:14px; padding:10px 0; }
.timeline__dot{ width:10px; height:10px; border-radius:50%; background:var(--text-3); margin-top:5px; box-shadow:0 0 0 3px rgba(255,255,255,.05); flex-shrink:0; }
.timeline__dot.is-danger{ background:var(--red); box-shadow:0 0 0 3px rgba(255,42,42,.15); }
.timeline__dot.is-warning{ background:var(--yellow); box-shadow:0 0 0 3px rgba(241,196,15,.15); }
.timeline__content{ flex:1; padding-bottom:10px; border-bottom:1px solid var(--line); }
.timeline__time{ font-family:var(--mono); font-size:.72rem; color:var(--amber); margin-bottom:3px; }
.timeline__text{ font-size:.84rem; color:var(--text-2); }

/* log viewer */
.log-viewer{ font-family:var(--mono); font-size:.78rem; line-height:1.7; max-height:300px; overflow-y:auto; background:rgba(0,0,0,.4); padding:14px; border-radius:var(--radius); }
.log-line{ margin-bottom:2px; color:var(--text-2); }
.log-line .l-critical{ color:var(--red); font-weight:700; }
.log-line .l-warn{ color:var(--yellow); }
.log-line .l-info{ color:var(--green); }

/* processes */
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
.process-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; position:relative; transition:.25s var(--ease); }
.process-card:hover{ border-color:var(--amber); transform:translateY(-3px); }
.process-card__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.process-card__id{ font-family:var(--mono); font-size:.65rem; color:var(--text-3); }
.process-card__name{ font-size:1.05rem; font-weight:700; }
.process-card__pid{ font-family:var(--mono); font-size:.75rem; color:var(--text-2); margin:6px 0 14px; }
.process-card__actions{ display:flex; gap:8px; }
.deploy-form{ display:flex; gap:10px; flex-wrap:wrap; }
.deploy-form input,.deploy-form select{ flex:1; min-width:160px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text); padding:9px 12px; font-size:.8rem; border-radius:var(--radius); outline:none; }
.deploy-form input:focus,.deploy-form select:focus{ border-color:var(--amber); }

/* terminal */
.terminal{ background:rgba(0,0,0,.55); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.terminal__header{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--line); }
.terminal__dot{ width:10px; height:10px; border-radius:50%; }
.terminal__dot.is-red{ background:var(--red); }
.terminal__dot.is-amber{ background:var(--amber); }
.terminal__dot.is-green{ background:var(--green); }
.terminal__title{ margin-left:8px; font-size:.78rem; letter-spacing:.08em; color:var(--text-3); }
.terminal__body{ padding:14px; font-family:var(--mono); font-size:.82rem; line-height:1.6; max-height:240px; overflow-y:auto; color:var(--text-2); }
.terminal__line{ margin-bottom:2px; }
.terminal__prompt{ color:var(--amber); margin-right:8px; }
.terminal__input{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--line); background:rgba(255,255,255,.02); }
.terminal__input input{ flex:1; background:transparent; border:none; color:var(--text); font-family:var(--mono); font-size:.85rem; outline:none; }

/* alerts */
.alert-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px; }
.alert-list{ display:flex; flex-direction:column; gap:10px; }
.alert-item{ display:flex; align-items:flex-start; gap:12px; padding:14px; background:rgba(255,255,255,.03); border-radius:var(--radius); border-left:3px solid var(--text-3); transition:.2s; }
.alert-item:hover{ background:var(--surface-2); }
.alert-item.is-danger{ border-left-color:var(--red); background:rgba(255,42,42,.08); }
.alert-item.is-warning{ border-left-color:var(--yellow); background:rgba(241,196,15,.06); }
.alert-item__icon{ width:26px; height:26px; border-radius:50%; background:var(--text-3); color:#000; display:grid; place-items:center; font-weight:700; font-size:.9rem; flex-shrink:0; }
.alert-item.is-danger .alert-item__icon{ background:var(--red); color:#fff; }
.alert-item.is-warning .alert-item__icon{ background:var(--yellow); color:#000; }
.alert-item__content{ flex:1; }
.alert-item__title{ font-size:.9rem; font-weight:700; margin-bottom:3px; }
.alert-item__desc{ font-size:.78rem; color:var(--text-2); }
.alert-item__time{ font-size:.72rem; color:var(--text-3); white-space:nowrap; }
.alert-item__btn{ background:transparent; border:1px solid var(--line); color:var(--text-2); padding:4px 10px; border-radius:3px; font-size:.7rem; }
.alert-item__btn:hover{ border-color:var(--amber); color:var(--amber); }

.notify-list{ display:flex; flex-direction:column; gap:12px; }
.notify-item{ display:flex; align-items:center; justify-content:space-between; padding:12px; background:rgba(255,255,255,.03); border-radius:var(--radius); border:1px solid var(--line); }
.notify-item__name{ font-size:.86rem; font-weight:600; }
.notify-item__desc{ font-size:.72rem; color:var(--text-3); }
.switch{ width:42px; height:22px; border-radius:11px; background:var(--line); position:relative; cursor:pointer; transition:.2s; flex-shrink:0; }
.switch::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--text-2); transition:.2s; }
.switch.is-on{ background:var(--amber); }
.switch.is-on::after{ left:22px; background:#000; }

/* event stream */
.event-stream{ font-family:var(--mono); font-size:.78rem; line-height:1.8; max-height:300px; overflow-y:auto; }
.event-line{ display:flex; gap:10px; color:var(--text-2); padding:3px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.event-time{ color:var(--text-3); width:60px; flex-shrink:0; }
.event-tag{ width:48px; text-align:center; border-radius:2px; font-size:.62rem; font-weight:700; background:rgba(255,255,255,.08); color:var(--text-2); }
.event-tag.is-danger{ background:rgba(255,42,42,.12); color:var(--red); }
.event-tag.is-warning{ background:rgba(241,196,15,.12); color:var(--yellow); }

/* big chart */
.big-chart{ width:100%; height:220px; display:block; }

/* footer */
.footer{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:24px 28px; border-top:1px solid var(--line); font-size:.75rem; color:var(--text-3); letter-spacing:.04em; }
.footer__right{ color:var(--amber); opacity:.7; }

/* responsive */
@media (max-width:1200px){
  .overview-grid{ grid-template-columns:repeat(3,1fr); }
  .score-card{ grid-row:span 1; }
  .metrics-grid{ grid-template-columns:repeat(2,1fr); }
  .alert-stats{ grid-template-columns:repeat(2,1fr); }
  .servers-cols,.firewall-cols,.forensics-cols,.alert-cols{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .topbar{ flex-wrap:wrap; height:auto; padding:12px; gap:10px; }
  .topbar__nav{ order:3; width:100%; overflow-x:auto; }
  .overview-grid{ grid-template-columns:repeat(2,1fr); }
  .overview-cols{ grid-template-columns:1fr; }
  .metrics-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
  .port-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .main{ padding:20px 14px; }
  .overview-grid{ grid-template-columns:1fr; }
  .alert-stats{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr; }
  .port-grid{ grid-template-columns:1fr; }
  .section__header{ flex-wrap:wrap; }
  .section__subtitle{ margin-left:0; width:100%; }
  .data-table{ font-size:.72rem; }
  .data-table th:nth-child(3),.data-table td:nth-child(3){ display:none; }
}

/* ============ 登录闸门 (Login Gate) ============ */
.login{
  position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,140,0,.10), transparent 60%),
    radial-gradient(800px 500px at 50% 120%, rgba(0,212,255,.06), transparent 55%),
    var(--bg);
  transition:opacity .5s var(--ease), visibility .5s;
}
.login.is-hidden{ opacity:0; visibility:hidden; }
.login__panel{
  position:relative; overflow:hidden; width:min(440px, 92vw);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:6px;
  padding:34px 34px 26px; backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255,140,0,.06), 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(255,140,0,.08);
}
.login__panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
}
.login__scan{
  position:absolute; left:0; right:0; top:0; height:140px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,140,0,.16), transparent);
  animation:loginScan 4.5s var(--ease) infinite; opacity:.7;
}
@keyframes loginScan{ 0%{ transform:translateY(-160px);} 100%{ transform:translateY(440px);} }
.login__brand{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.login__shield{
  font-size:3.4rem; line-height:1; text-align:center; color:var(--amber);
  text-shadow:0 0 26px var(--amber-glow); margin:4px 0 6px;
}
.login__hint{ text-align:center; color:var(--text-3); font-size:.78rem; letter-spacing:.05em; margin-bottom:22px; }
.login__form{ display:flex; flex-direction:column; gap:14px; }
.login__form label{ display:block; font-size:.76rem; letter-spacing:.08em; color:var(--text-2); }
.login__form input{
  width:100%; margin-top:6px; box-sizing:border-box;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text);
  padding:11px 12px; font-size:.92rem; border-radius:var(--radius); outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.login__form input:focus{ border-color:var(--amber); box-shadow:0 0 0 2px var(--amber-soft); }
.login__btn{ width:100%; padding:12px; letter-spacing:.22em; margin-top:4px; }
.login__error{ color:var(--red); font-size:.76rem; min-height:1.1em; margin-top:12px; text-align:center; letter-spacing:.03em; }
.login__foot{
  margin-top:18px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:.7rem; color:var(--text-3); letter-spacing:.03em; border-top:1px solid var(--line); padding-top:14px;
}

/* ============ 受控操作台 (Secure Ops Bar) ============ */
.ops-bar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.ops-bar .btn{ letter-spacing:.04em; }

/* ============ 用户芯片 (User Chip) ============ */
.user-chip{ display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--text-2); }
.user-chip[hidden]{ display:none; }
.user-chip #userName{ color:var(--amber); font-weight:700; letter-spacing:.04em; }

@media (max-width:560px){
  .login__panel{ padding:28px 22px 22px; }
}