/* ═══════════ esproxy/www/css/theme.css ═══════════
 * 共享主题样式 (dark 默认 + light 覆盖); 由 esproxy/www/index.html 与
 * esproxy/www/gui/*.html 共同 <link> 引入, 主题切换由 js/theme.js 驱动。
 * 主题变量通过 documentElement.style.setProperty 注入 (见 theme.js applyTheme),
 * 仅 :root 的 dark 默认值与 html.light 覆盖放这里 (light 类挂 <html>, 便于 <head> 首帧应用)。
 *
 * 与 esproxy/www/index.html 原内联 :root 变量等价; 字段命名严格保持兼容。
 */

/* ─── dark 默认 (Matrix, 与原 :root 一致) ─── */
:root{
  --c0:#0a0c0f;--c1:#12161b;--c2:#1a1f28;--c3:#252b36;
  --fg:#c8d6e0;--dim:#6a7888;--soft:#435066;
  --grn:#3dec55;--cyn:#3de0e0;--blu:#3d8aec;--yel:#ecb43d;
  --red:#ec3d3d;--mag:#c23dec;--wht:#e8f0f8;
  --accent:var(--grn);--gold:var(--yel);
  --purple:#a55ee0;--teal:#3de0e0;--slate:#6a7888;
  --pink:#c23dec;--sky:#3d8aec;--orange:#ecb43d;--yellow:#ecb43d;
  --glow-g:0 0 6px rgba(61,236,85,.4);--glow-c:0 0 6px rgba(61,224,224,.4);
  --content-max:980px;
}

/* ─── light 覆盖 (类挂在 <html> 上: html.light, 便于 <head> 首帧即应用) ─── */
html.light .flow-header,html.light .detail-tabs{background:rgba(128,128,128,.06)}
html.light .flow-item:hover{background:rgba(128,128,128,.05)}
html.light .flow-item.sel{background:var(--sel-bg);color:var(--wht);border-left-color:var(--sel-brd)}
html.light .detail-body .kv{border-color:rgba(0,0,0,.05)}
html.light .detail-body .code-block{background:rgba(0,0,0,.04)}
html.light .timeline-row{border-color:rgba(0,0,0,.04)}
html.light .more-menu .mi{border-color:rgba(0,0,0,.06)}
html.light .more-menu .mi:hover{background:rgba(128,128,128,.08)}
html.light .shortcuts-grid kbd{background:rgba(128,128,128,.1);border-color:rgba(128,128,128,.25)}
html.light .tbtn.active{background:rgba(128,128,128,.1)}
html.light .stats-section .ss-title{text-shadow:none}
html.light .dlg-body{color:var(--fg)}
html.light .dlg-field input,html.light .dlg-field textarea,html.light .dlg-field select{background:var(--c0);border-color:var(--c3);color:var(--fg)}
html.light .toolbar .filter-input{background:var(--c0);border-color:var(--c3);color:var(--fg)}
html.light .chart-btn.active{background:rgba(128,128,128,.1)}
html.light .ws-frame:hover{background:rgba(122,162,247,.08)}
html.light .dns-row:hover{background:rgba(122,162,247,.08)}
html.light .dns-empty-warn{background:rgba(247,118,142,.08)}
html.light .cfg-menu{background:#fff;border-color:#d0d7de;box-shadow:0 0 16px rgba(0,0,0,.1)}
html.light .cfg-menu .mi{border-color:rgba(0,0,0,.06);color:#656d76}
html.light .cfg-menu .mi:hover{color:#0f1116;background:#f6f8fa}
html.light .theme-menu{background:#fff;border-color:#d0d7de;box-shadow:0 0 16px rgba(0,0,0,.1)}
html.light .theme-menu .mi{border-color:rgba(0,0,0,.06);color:#656d76}
html.light .theme-menu .mi:hover{color:#0f1116;background:#f6f8fa}
html.light .mock-head-btn:hover{color:#1a7f37}

/* ═══════════ 共享顶栏 + 页脚 + 图标按钮 (intro-top / intro-footer / btn-icon) ═══════════
   由 index.html / login.html / account.html 共同使用 (原定义于 introduction/index.css) */
.intro-top {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 24px;
  background: rgba(31, 35, 53, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c3);
}
.intro-top .logo-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.intro-top .logo { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.intro-top .brand {
  font-size: 14px; font-weight: 700;
  background: linear-gradient(90deg, var(--grn), var(--cyn));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 0.3px;
}
.intro-top .ver { font-size: 10px; color: var(--dim); margin-left: 4px; }
.intro-top .spacer { flex: 1; }
.intro-top .actions { display: flex; align-items: center; gap: 0; }
.btn-icon {
  display: inline-flex; align-items: center; padding: 4px 10px;
  font-family: inherit; font-size: 12px; color: var(--dim);
  background: transparent; border: 1px solid var(--c3); border-radius: 4px;
  cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.btn-icon:hover { color: var(--fg); border-color: var(--dim); }
.intro-top .actions a.btn-icon { text-decoration: none; }
.intro-top .actions .btn-icon { border: none; padding: 4px 10px; color: var(--dim); }
.intro-top .actions .btn-icon:hover { border: none; background: var(--c2); color: var(--fg); }
.intro-top .actions > * + * { position: relative; }
.intro-top .actions > * + *::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 12px; background: var(--c3);
}
html.light .intro-top { background: rgba(255, 255, 255, 0.92); }

@keyframes introBreath {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(158, 206, 106, 0.3)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 0 12px rgba(158, 206, 106, 0.55)); }
}
.intro-top .logo { animation: introBreath 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .intro-top .logo { animation: none; } }

.intro-footer {
  margin-top: 80px; padding: 32px 24px;
  border-top: 1px solid var(--c3); background: var(--c1);
  text-align: center; font-size: 12px; color: var(--dim);
}
.intro-footer .row { display: inline-flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.intro-footer a { color: var(--cyn); text-decoration: none; }
.intro-footer a:hover { color: var(--grn); }

@media (max-width: 768px) { .intro-top { padding: 0 12px; } }