/* Vision-Core 監控平台 — 樣式表
   視覺方向沿用 AI SCOPE 看板：淺藍漸層底、玻璃卡面、霓虹描邊、
   漸層髮絲分隔線、粗體等寬數字。唯一持續動態是一條掃描線。 */

:root {
  /* 底色與紙面 */
  --bgA:        #f3f8ff;
  --bgB:        #fbfdff;
  --glass:      rgba(255,255,255,.72);
  --glass-2:    rgba(255,255,255,.60);
  --card:       rgba(255,255,255,.78);

  /* 文字 */
  --ink:        #081a3a;
  --ink-2:      #0a2c62;
  --ink-3:      #0f3564;
  --text:       #081a3a;
  --text-2:     #4f6487;
  --text-3:     #7d8fae;

  /* 線 */
  --line:       rgba(8, 26, 58, .14);
  --line-soft:  rgba(8, 26, 58, .08);

  /* 霓虹三色 */
  --neon:       rgba(64, 170, 255, .55);
  --neon2:      rgba(140, 90, 255, .35);
  --neon3:      rgba(0, 208, 255, .28);
  --steel:      #1f7fd4;
  --steel-dk:   #0f5aa8;
  --steel-soft: #e3f2fd;

  /* 狀態 */
  --ok:         #12a46d;
  --ok-soft:    #e2f7ee;
  --alarm:      #e04b4b;
  --alarm-soft: #fdeaea;
  --warn:       #e7a017;
  --warn-soft:  #fdf4e0;

  --radius:     12px;
  --radius-lg:  15px;
  --shadow:     0 16px 38px rgba(8, 26, 58, .10);
  --shadow-lg:  0 26px 70px rgba(6, 18, 44, .14);
  --sidebar-w:  248px;
  --topbar-h:   64px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  background:
    radial-gradient(1300px 780px at 6% -6%, rgba(79,150,243,.46) 18%, rgba(196,223,245,.34) 78%),
    radial-gradient(900px 600px at 92% 0%, #ececff 0%, rgba(236,236,255,0) 55%),
    radial-gradient(1000px 700px at 50% 112%, #dff6ff 0%, rgba(223,246,255,0) 52%),
    radial-gradient(700px 520px at 100% 60%, rgba(140,90,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bgA), #eef5ff 55%, var(--bgB));
  background-attachment: fixed;
}

a { color: var(--steel-dk); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }

.ic { width: 18px; height: 18px; flex: 0 0 18px; }

/* ---------- 版面骨架 ---------- */
.shell { display: flex; min-height: 100vh; position: relative; }

/* 電路網格紋理 */
.shell::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .55; mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(90deg, rgba(10,40,90,.04) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg,  rgba(10,40,90,.03) 0 1px, transparent 1px 22px);
}

/* 掃描線 */
.shell::after {
  content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 2px;
  pointer-events: none; z-index: 1; opacity: .5;
  background: linear-gradient(90deg, transparent, var(--neon), var(--neon2), transparent);
  animation: scan 4.5s linear infinite;
}
@keyframes scan {
  0%   { transform: translateY(10px);  opacity: .18; }
  40%  { opacity: .6; }
  100% { transform: translateY(100vh); opacity: .12; }
}
@media (prefers-reduced-motion: reduce) { .shell::after { animation: none; opacity: .25; } }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  color: var(--ink-3);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0;
  z-index: 40;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.66));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid rgba(64,170,255,.22);
  box-shadow: 8px 0 30px rgba(8,26,58,.07);
}

.brand {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 18px; position: relative;
  background: linear-gradient(90deg, rgba(64,170,255,.14), rgba(140,90,255,.08));
}
/* 有 Logo 時改為直向：圖在上、名稱在下 */
.brand.has-logo {
  flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 18px 18px 15px;
}
.brand-logo {
  display: block; width: 100%; max-width: 190px; height: auto; max-height: 60px;
  object-fit: contain; object-position: left center;
}
.brand.has-logo .brand-txt { width: 100%; }
.brand.has-logo .brand-name { font-size: 13.5px; }
.brand::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon), var(--neon2), transparent);
}
.brand-mark {
  width: 36px; height: 36px; border-radius: var(--radius);
  background: linear-gradient(135deg, #40aaff, #8c5aff);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(64,170,255,.35), inset 0 0 0 1px rgba(255,255,255,.35);
}
.brand-txt { display: flex; flex-direction: column; min-width: 0; }
.brand-name { color: var(--ink-2); font-weight: 900; font-size: 14.5px; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-org { color: var(--text-2); font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 3px;
  border-radius: var(--radius);
  color: var(--text-2); font-size: 13.5px; font-weight: 700;
  border: 1px solid transparent;
}
.nav-item:hover {
  background: rgba(255,255,255,.72); color: var(--ink-2); text-decoration: none;
  border-color: rgba(64,170,255,.22);
  box-shadow: inset 0 0 0 1px rgba(140,90,255,.08);
}
.nav-item.active {
  background: linear-gradient(180deg, rgba(223,241,255,.98), rgba(255,255,255,.68));
  color: var(--ink-2);
  border-color: rgba(64,170,255,.42);
  box-shadow: 0 6px 16px rgba(64,170,255,.18), inset 0 0 0 1px rgba(140,90,255,.10);
}
.nav-item.active .ic { color: var(--steel); }
.nav-sep {
  margin: 18px 12px 8px;
  font-size: 11px; color: var(--text-3); font-weight: 800; letter-spacing: .06em;
  padding-top: 13px; position: relative;
}
.nav-sep::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(64,170,255,.45), transparent);
}
.sidebar-foot {
  padding: 12px 18px; font-size: 11px; color: var(--text-3); font-weight: 600;
  position: relative;
}
.sidebar-foot::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(64,170,255,.40), transparent);
}

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0;
  display: flex; flex-direction: column; position: relative; z-index: 2; }

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(90deg,
    rgba(64,170,255,.14), rgba(140,90,255,.09), rgba(0,208,255,.14)),
    rgba(255,255,255,.80);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(8,26,58,.09), inset 0 0 0 1px rgba(255,255,255,.40);
}
.topbar::after {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon), var(--neon2), transparent);
}
.page-title {
  font-size: 17px; font-weight: 900; margin: 0; flex: 1;
  color: var(--ink-2); letter-spacing: .04em;
  text-shadow: 0 1px 2px rgba(255,255,255,.7);
}
.top-right { display: flex; align-items: center; gap: 12px; }
.clock {
  font-family: var(--mono); font-size: 13px; color: var(--text-2);
  font-variant-numeric: tabular-nums; font-weight: 800;
  text-shadow: 0 1px 2px rgba(255,255,255,.55);
}
.lang-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid rgba(64,170,255,.28);
  background: linear-gradient(180deg, rgba(223,241,255,.92), rgba(255,255,255,.58));
  box-shadow: inset 0 0 0 1px rgba(140,90,255,.10);
  color: var(--ink-3); font-size: 12.5px; font-weight: 800;
}
.lang-btn:hover { text-decoration: none; box-shadow: 0 4px 12px rgba(64,170,255,.20); }
.lang-btn .ic { width: 15px; height: 15px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius);
  color: var(--text-2); cursor: pointer;
  border: 1px solid rgba(10,40,90,.12);
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(64,170,255,.10);
}
.icon-btn:hover { color: var(--alarm); box-shadow: 0 4px 12px rgba(8,26,58,.12); }

.user-chip { display: flex; align-items: center; gap: 9px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #40aaff, #8c5aff);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px;
  box-shadow: 0 4px 12px rgba(64,170,255,.32), inset 0 0 0 1px rgba(255,255,255,.35);
}
.uname { display: flex; flex-direction: column; line-height: 1.2; }
.uname strong { font-size: 13px; font-weight: 900; color: var(--ink-3); }
.uname small { font-size: 11px; color: var(--text-3); font-weight: 600; }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.burger span { display: block; width: 20px; height: 2px; background: var(--ink-3); margin: 4px 0; border-radius: 2px; }

.content { padding: 22px; flex: 1; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(10,40,90,.14);
  border-radius: var(--radius-lg);
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.42);
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; position: relative;
  background: linear-gradient(90deg, rgba(64,170,255,.08), rgba(140,90,255,.05), transparent);
}
.card-head::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(64,170,255,.50), rgba(140,90,255,.28), transparent);
}
.card-head h2 {
  font-size: 15px; font-weight: 900; margin: 0; flex: 1;
  color: var(--ink-3); letter-spacing: .05em;
}
.card-head .sub { font-size: 12px; color: var(--text-2); font-weight: 600; }
.card-body { padding: 18px; }
.card-body.flush { padding: 0; }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 18px; }
.kpi {
  background: linear-gradient(135deg, #e3f2fd 0%, rgba(212,230,245,.92) 100%);
  border: 1px solid #90caf9;
  border-radius: var(--radius-lg); padding: 18px 20px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.45);
}
.kpi-ic {
  width: 46px; height: 46px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.72); color: var(--steel);
  border: 1px solid rgba(64,170,255,.28);
  box-shadow: inset 0 0 0 1px rgba(140,90,255,.10);
}
.kpi.alarm .kpi-ic { color: var(--alarm); border-color: rgba(224,75,75,.30); }
.kpi.ok .kpi-ic    { color: var(--ok);    border-color: rgba(18,164,109,.30); }
.kpi.warn .kpi-ic  { color: var(--warn);  border-color: rgba(231,160,23,.32); }
.kpi-num {
  font-size: 34px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  color: #071a3a;
  text-shadow: 0 2px 4px rgba(8,26,58,.14), 0 1px 0 rgba(255,255,255,.75);
}
.kpi-lbl { font-size: 13px; color: #123763; font-weight: 800; margin-top: 3px;
  text-shadow: 0 1px 2px rgba(255,255,255,.8); }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
  text-align: left; font-weight: 800; color: var(--ink-3);
  padding: 11px 16px; white-space: nowrap; font-size: 12.5px;
  letter-spacing: .03em;
  background: linear-gradient(180deg, rgba(227,242,253,.72), rgba(255,255,255,.35));
  border-bottom: 1px solid rgba(64,170,255,.30);
}
table.tbl td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft);
  vertical-align: middle; white-space: nowrap; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: rgba(227,242,253,.45); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl .mono { font-family: var(--mono); font-size: 12px; color: var(--text-2); }

.thumb {
  width: 88px; height: 50px; object-fit: cover;
  border-radius: 8px; border: 1px solid rgba(64,170,255,.28);
  background: rgba(255,255,255,.6); display: block;
  box-shadow: 0 4px 10px rgba(8,26,58,.10);
}
.thumb-lg { width: 100%; border-radius: var(--radius);
  border: 1px solid rgba(64,170,255,.24); display: block; }

/* ---------- 標籤 ---------- */
.badge {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 900; white-space: nowrap;
  color: #0f3a70;
  background: linear-gradient(180deg, rgba(223,241,255,.95), rgba(255,255,255,.55));
  border: 1px solid rgba(64,170,255,.25);
  box-shadow: inset 0 0 0 1px rgba(140,90,255,.10);
}
.badge.danger  { color: #b32d2d; background: linear-gradient(180deg, rgba(253,226,226,.95), rgba(255,255,255,.55));
  border-color: rgba(224,75,75,.30); }
.badge.warn    { color: #9a6a08; background: linear-gradient(180deg, rgba(253,240,214,.95), rgba(255,255,255,.55));
  border-color: rgba(231,160,23,.32); }
.badge.info    { color: #0f3a70; }
.badge.ok      { color: #0b7a50; background: linear-gradient(180deg, rgba(219,246,235,.95), rgba(255,255,255,.55));
  border-color: rgba(18,164,109,.30); }
.badge.default { color: var(--text-2); background: linear-gradient(180deg, rgba(238,243,250,.95), rgba(255,255,255,.55));
  border-color: rgba(10,40,90,.14); }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.dot.on  { background: var(--ok);    box-shadow: 0 0 0 3px var(--ok-soft); }
.dot.off { background: #a9bcd4;      box-shadow: 0 0 0 3px rgba(10,40,90,.07); }
.dot.live{ background: var(--alarm); box-shadow: 0 0 0 3px var(--alarm-soft); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dot.live { animation: none; } }

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius);
  border: 1px solid rgba(10,40,90,.14);
  background: rgba(255,255,255,.66);
  box-shadow: inset 0 0 0 1px rgba(64,170,255,.10);
  color: var(--ink-3);
  font-size: 13px; font-weight: 800; font-family: inherit;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { text-decoration: none; box-shadow: 0 6px 16px rgba(8,26,58,.12), inset 0 0 0 1px rgba(64,170,255,.18); }
.btn-primary {
  background: linear-gradient(135deg, #40aaff, #6d7dff);
  border-color: rgba(64,170,255,.55); color: #fff;
  box-shadow: 0 8px 20px rgba(64,170,255,.30), inset 0 0 0 1px rgba(255,255,255,.28);
}
.btn-primary:hover { background: linear-gradient(135deg, #2f9bf2, #5b6cf5); }
.btn-danger {
  background: linear-gradient(135deg, #ec6060, #d33f3f);
  border-color: rgba(224,75,75,.55); color: #fff;
  box-shadow: 0 8px 20px rgba(224,75,75,.26), inset 0 0 0 1px rgba(255,255,255,.24);
}
.btn-danger:hover { background: linear-gradient(135deg, #e05252, #c23434); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ---------- 表單 ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 800; color: var(--ink-3); letter-spacing: .02em; }
.field .hint { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=search], input[type=url], select, textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid rgba(10,40,90,.16); border-radius: var(--radius);
  background: rgba(255,255,255,.82); color: var(--text);
  font-size: 13.5px; font-family: inherit;
  box-shadow: inset 0 0 0 1px rgba(64,170,255,.07);
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(64,170,255,.65); outline: none;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(64,170,255,.16), inset 0 0 0 1px rgba(140,90,255,.10);
}
textarea { resize: vertical; min-height: 74px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.check input { width: 15px; height: 15px; accent-color: #40aaff; }
.form-actions {
  display: flex; gap: 9px; padding-top: 16px; margin-top: 16px;
  border-top: 1px solid var(--line-soft);
}

/* ---------- 篩選列 ---------- */
.filters {
  display: flex; gap: 11px; flex-wrap: wrap; align-items: flex-end;
  padding: 16px 18px; position: relative;
  background: linear-gradient(90deg, rgba(64,170,255,.07), rgba(140,90,255,.04), transparent);
}
.filters::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(64,170,255,.42), transparent);
}
.filters .field { min-width: 150px; }

/* ---------- 提示 ---------- */
.alert {
  padding: 12px 16px; border-radius: var(--radius);
  margin-bottom: 16px; font-size: 13px; font-weight: 700;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.40);
}
.alert-ok    { background: var(--ok-soft);    color: #0b7a50; border-color: rgba(18,164,109,.30); }
.alert-error { background: var(--alarm-soft); color: #b32d2d; border-color: rgba(224,75,75,.32); }
.alert-warn  { background: var(--warn-soft);  color: #9a6a08; border-color: rgba(231,160,23,.34); }
.alert-info  { background: var(--steel-soft); color: #0f3a70; border-color: rgba(64,170,255,.32); }

.empty { text-align: center; color: var(--text-2); padding: 40px 18px; font-size: 13px; font-weight: 600; }

/* ---------- 分頁 ---------- */
.pager { display: flex; gap: 6px; align-items: center; padding: 14px 18px; flex-wrap: wrap; }
.pager a, .pager span {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(10,40,90,.14);
  background: rgba(255,255,255,.62);
  font-size: 12.5px; font-weight: 800; color: var(--ink-3);
}
.pager .cur {
  background: linear-gradient(135deg, #40aaff, #6d7dff);
  border-color: rgba(64,170,255,.55); color: #fff;
  box-shadow: 0 6px 16px rgba(64,170,255,.28);
}
.pager .info { border: 0; background: none; margin-left: auto; color: var(--text-3); font-weight: 600; }

/* ---------- 條形圖 ---------- */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 46px; gap: 12px; align-items: center;
  font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.bar-track {
  height: 12px; border-radius: 999px; overflow: hidden;
  background: rgba(10,40,90,.08); border: 1px solid rgba(10,40,90,.10);
}
.bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,208,255,.55), rgba(64,170,255,.85), rgba(140,90,255,.55));
}
.bar-fill.alarm { background: linear-gradient(90deg, rgba(231,160,23,.55), rgba(224,75,75,.85)); }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 800; }

.spark { display: flex; align-items: flex-end; gap: 3px; height: 92px; }
.spark-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.spark-bar {
  border-radius: 4px 4px 0 0; min-height: 2px;
  background: linear-gradient(180deg, rgba(64,170,255,.90), rgba(140,90,255,.45));
}
.spark-lbl { font-size: 9.5px; color: var(--text-3); text-align: center; margin-top: 5px;
  font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- 實時頁 ---------- */
.live-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.frame-box {
  background: #081a3a; border-radius: var(--radius-lg);
  border: 1px solid rgba(64,170,255,.30);
  overflow: hidden; position: relative;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(140,90,255,.12);
}
.frame-box iframe { width: 100%; height: 640px; border: 0; display: block; background: #081a3a; }
.feed { max-height: 640px; overflow-y: auto; }
.feed-item {
  display: flex; gap: 11px; padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.feed-item:hover { background: rgba(227,242,253,.45); }
.feed-item .fi-time { font-family: var(--mono); font-size: 11px; color: var(--text-3); font-weight: 700; }
.feed-item .fi-name { font-weight: 900; color: var(--ink-3); }
.feed-new { animation: flashin 1.2s ease-out; }
@keyframes flashin { from { background: var(--alarm-soft); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .feed-new { animation: none; } }

.vgrid { display: grid; gap: 10px; }
.vgrid.g1 { grid-template-columns: 1fr; }
.vgrid.g4 { grid-template-columns: repeat(2, 1fr); }
.vgrid.g9 { grid-template-columns: repeat(3, 1fr); }
.vcell {
  background: #081a3a; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16/9; position: relative;
  border: 1px solid rgba(64,170,255,.26);
  box-shadow: 0 10px 24px rgba(8,26,58,.14);
}
.vcell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vcell .vlabel {
  position: absolute; left: 9px; bottom: 9px;
  background: rgba(8,26,58,.72); color: #fff; font-size: 11.5px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(64,170,255,.30);
}
.vcell .vempty { color: #5a7db0; font-size: 12px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; height: 100%; }

/* ---------- 登入頁 ---------- */
.login-page {
  min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr;
  padding: clamp(10px, 1.2vw, 18px);
  gap: 0;
}
.login-art {
  position: relative; color: #fff; padding: 54px 58px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(900px 460px at 12% 8%, rgba(64,170,255,.55), transparent 62%),
    radial-gradient(700px 500px at 88% 100%, rgba(140,90,255,.42), transparent 60%),
    linear-gradient(160deg, #0a2c62 0%, #123c86 58%, #081a3a 100%);
  box-shadow: var(--shadow-lg);
}
.login-art .grid-lines {
  position: absolute; inset: 0; opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 44px 44px;
}
.login-art .art-inner { position: relative; z-index: 1; }
.art-logo {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; margin-bottom: 26px;
  background: rgba(255,255,255,.90);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(8,26,58,.28), inset 0 0 0 1px rgba(64,170,255,.22);
}
.art-logo img { display: block; height: 44px; width: auto; max-width: 240px; object-fit: contain; }
.login-art h2 { font-size: 32px; margin: 0 0 14px; font-weight: 900; letter-spacing: .05em; }
.login-art p { color: #bcd6f5; max-width: 40ch; margin: 0; line-height: 1.7; }
.login-art .feat { display: flex; flex-direction: column; gap: 13px; margin-top: 32px; }
.login-art .feat div { display: flex; align-items: center; gap: 11px; color: #d5e6fb;
  font-size: 13.5px; font-weight: 700; }
.login-art .feat .ic { color: #7fc4ff; }
.login-art .foot { position: relative; z-index: 1; color: #7f9dc8; font-size: 12px; font-weight: 600; }

.login-form-wrap {
  background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(10,40,90,.14); border-left: 0;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  display: flex; align-items: center; justify-content: center; padding: 42px;
  box-shadow: var(--shadow-lg);
}
.login-form { width: 100%; max-width: 350px; }
.login-form h1 { font-size: 23px; margin: 0 0 8px; font-weight: 900; color: var(--ink-2); letter-spacing: .03em; }
.login-form .lead { color: var(--text-2); font-size: 13.5px; margin: 0 0 26px; font-weight: 600; }
.login-form .field { margin-bottom: 15px; }
.login-form .btn { width: 100%; justify-content: center; padding: 11px; font-size: 14px; }
.login-lang { text-align: center; margin-top: 22px; font-size: 12.5px; }

/* ---------- 詳情列表 ---------- */
.dl { display: grid; grid-template-columns: 130px 1fr; gap: 10px 16px; font-size: 13px; }
.dl dt { color: var(--text-2); font-weight: 800; }
.dl dd { margin: 0; word-break: break-all; }

.snap-wrap { position: relative; display: inline-block; max-width: 100%; }
.snap-wrap img { display: block; max-width: 100%; border-radius: var(--radius);
  border: 1px solid rgba(64,170,255,.24); }
.bbox {
  position: absolute; border: 2px solid var(--alarm); border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.55) inset, 0 0 12px rgba(224,75,75,.35);
}
.bbox span {
  position: absolute; top: -20px; left: -2px;
  background: var(--alarm); color: #fff; font-size: 10.5px; font-weight: 800;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}

.code-box {
  font-family: var(--mono); font-size: 12px;
  background: #081a3a; color: #9fc7f5;
  padding: 13px 15px; border-radius: var(--radius); overflow-x: auto;
  white-space: pre-wrap; word-break: break-all;
  border: 1px solid rgba(64,170,255,.26);
  box-shadow: inset 0 0 0 1px rgba(140,90,255,.10);
}

.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.split-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }

/* ---------- AI 文字描述 ---------- */
.desc-text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 12.5px; line-height: 1.6;
  color: var(--text-2); max-width: 430px; white-space: normal; font-weight: 600;
}
.tbl td.desc-cell, .tbl td:has(.desc-text) { white-space: normal; }
.desc-full {
  white-space: normal; line-height: 1.7; font-size: 13px; font-weight: 600;
  color: var(--ink-3);
  background: linear-gradient(135deg, rgba(227,242,253,.85), rgba(255,255,255,.55));
  border: 1px solid rgba(64,170,255,.24);
  border-left: 3px solid rgba(64,170,255,.75);
  padding: 10px 13px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(140,90,255,.08);
}
.text-muted { color: var(--text-3); }

/* ---------- 響應式 ---------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .live-grid, .split-2, .split-3 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .burger { display: block; }
  .content { padding: 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .login-page { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-form-wrap { border-left: 1px solid rgba(10,40,90,.14); border-radius: var(--radius-lg); }
  .user-chip .uname { display: none; }
  .clock { display: none; }
  .kpi-num { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}