/* 代理页面：组件按共享设计规范（app.css）重新设计；NETOPS 网络分析面板改为 Revolut 风格的深色卡片 */

.glass { border-radius: var(--lz-radius); background: var(--lz-surface); box-shadow: var(--lz-shadow); }
.metric-tile { background: var(--lz-surface-2); border-radius: 18px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.6rem 1.15rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
    border: 0; transition: background 0.15s ease, transform 0.12s ease; white-space: nowrap; cursor: pointer;
}
.btn:disabled { cursor: not-allowed; opacity: 0.4; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn--primary { background: var(--lz-blue); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--lz-blue-2); }
.btn--danger { background: var(--lz-red-soft); color: var(--lz-red); }
.btn--danger:hover:not(:disabled) { background: #fadadf; }
.btn--ghost { background: var(--lz-surface-2); color: var(--lz-ink); }
.btn--ghost:hover:not(:disabled) { background: var(--lz-surface-3); }
.btn--sm { padding: 0.4rem 0.85rem; font-size: 0.78rem; }

.chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.field label { display: block; font-size: 13px; font-weight: 600; color: var(--lz-muted); margin-bottom: 6px; }
.hint { font-size: 12px; color: var(--lz-muted); margin-top: 6px; line-height: 1.55; }
.input {
    width: 100%; padding: 0.7rem 0.9rem; border-radius: 14px; border: 1.5px solid transparent; background: var(--lz-surface-2);
    font: inherit; font-size: 14px; color: var(--lz-ink); outline: none; transition: border-color 0.15s ease, background 0.15s ease;
}
.input:focus { border-color: var(--lz-blue); background: #fff; }
.input:disabled { opacity: 0.55; }
.toggle { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; font-size: 14px; }
.toggle input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--lz-blue); }

.bar { height: 6px; border-radius: 999px; background: var(--lz-surface-3); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--lz-blue); }
.bar--warn > span { background: var(--lz-red); }

.modal-mask {
    position: fixed; inset: 0; z-index: 9000; background: rgba(10, 12, 14, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center; padding: 16px; animation: lz-fade 0.18s ease both;
}
.modal { width: 480px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 28px; padding: 26px; box-shadow: var(--lz-shadow-lg); }
@media (max-width: 520px) {
    .modal-mask { align-items: flex-end; padding: 0; }
    .modal { border-radius: 28px 28px 0 0; max-height: 92vh; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
}
.mono { font-family: var(--lz-mono); word-break: break-all; }
.qr-box { display: flex; justify-content: center; padding: 14px; background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--lz-line); }
.qr-box svg, .qr-box img, .qr-box canvas { width: 220px !important; height: 220px !important; display: block; }

.toast {
    position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100000;
    max-width: min(460px, calc(100vw - 32px)); padding: 0.85rem 1.25rem; border-radius: 999px; font-size: 14px; font-weight: 600;
    box-shadow: var(--lz-shadow-lg); text-align: center;
}
.toast--ok { background: var(--lz-ink); color: #fff; }
.toast--err { background: var(--lz-red); color: #fff; }

table { border-collapse: collapse; width: 100%; }
.rounded-2xl { border-radius: 20px !important; }

/* ---------- NETOPS：网络分析面板（深色终端风格） ---------- */
.ops {
    --ops-surface: #111214;
    --ops-panel: #1a1b1e;
    --ops-line: #26272b;
    --ops-axis: #34363b;
    --ops-ink: #f5f5f7;
    --ops-ink-2: #b4b6bc;
    --ops-muted: #7c7f86;
    --ops-down: #00c389;   /* 下载 / TCP / P50 —— 分类色 1 */
    --ops-up: #3d8bff;     /* 上传 / UDP / P95 —— 分类色 2 */
    --ops-crit: #ff5a6e;
    --ops-warn: #ffb020;
    position: relative; overflow: hidden;
    border-radius: 28px; color: var(--ops-ink);
    background: var(--ops-surface);
    box-shadow: 0 30px 60px -35px rgba(0, 0, 0, 0.6);
    font-family: var(--lz-font);
    font-variant-numeric: tabular-nums;
}
.ops::after { content: none; }
.ops > * { position: relative; z-index: 1; }
.ops-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
    padding: 12px 18px; border-bottom: 1px solid var(--ops-line); font-size: 12px; color: var(--ops-ink-2); }
.ops-prompt b { color: var(--ops-down); font-weight: 600; }
.ops-cursor { display: inline-block; width: 7px; height: 14px; margin-left: 4px; vertical-align: -2px;
    background: var(--ops-down); animation: ops-blink 1.05s steps(1) infinite; }
@keyframes ops-blink { 50% { opacity: 0; } }
.ops-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.ops-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ops-down); box-shadow: 0 0 0 0 rgba(0,195,137,0.6); animation: ops-ping 1.8s infinite; }
.ops-live.off i { background: var(--ops-muted); animation: none; }
@keyframes ops-ping { 0% { box-shadow: 0 0 0 0 rgba(0,195,137,0.55); } 70%,100% { box-shadow: 0 0 0 7px rgba(0,195,137,0); } }
.ops-grid { display: grid; gap: 10px; padding: 14px; }
.ops-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .ops-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ops-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ops-card { background: var(--ops-panel); border-radius: 20px; min-width: 0; }
.ops-kpi { padding: 12px 14px 8px; }
.ops-label { font-size: 12px; font-weight: 600; color: var(--ops-muted); }
.ops-value { margin-top: 6px; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: var(--ops-ink); line-height: 1.1; white-space: nowrap; }
.ops-value small { font-size: 12px; color: var(--ops-ink-2); font-weight: 500; margin-left: 2px; }
.ops-sub { margin-top: 3px; font-size: 11px; color: var(--ops-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-key { display: inline-block; width: 10px; height: 2px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.ops-spark { height: 34px; margin-top: 6px; }
.ops-charts { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
@media (min-width: 1024px) { .ops-charts { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.ops-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 14px 0; }
.ops-chart-title { font-size: 14px; font-weight: 700; color: var(--ops-ink); }
.ops-chart-meta { font-size: 10px; color: var(--ops-muted); white-space: nowrap; }
.ops-chart { width: 100%; height: 220px; }
.ops-chart--sm { height: 180px; }
.ops-feed { height: 260px; overflow-y: auto; padding: 8px 14px 12px; font-size: 12px; line-height: 1.75; font-family: var(--lz-mono); }
.ops-feed::-webkit-scrollbar { width: 6px; }
.ops-feed::-webkit-scrollbar-thumb { background: #34363b; border-radius: 6px; }
.ops-row { display: grid; grid-template-columns: 62px 74px minmax(0, 1fr); gap: 8px; white-space: nowrap; }
.ops-row > span { overflow: hidden; text-overflow: ellipsis; }
.ops-t { color: var(--ops-muted); }
.ops-tag { color: var(--ops-ink-2); }
.ops-tag::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 1px; margin-right: 6px; vertical-align: 1px; background: var(--tag, var(--ops-muted)); }
.ops-row--bad .ops-tag, .ops-row--bad .ops-msg { color: #f0b3b3; }
.ops-msg { color: var(--ops-ink); }
.ops-msg em { font-style: normal; color: var(--ops-muted); }
.ops-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 18px 14px; border-top: 1px solid var(--ops-line); font-size: 11px; color: var(--ops-muted); }
.ops-foot b { color: var(--ops-ink-2); font-weight: 500; }
@media (max-width: 640px) {
    .ops-feed { font-size: 10.5px; height: 300px; }
    .ops-row { grid-template-columns: 54px 58px minmax(0, 1fr); gap: 6px; }
    .ops-row > .ops-msg { white-space: normal; word-break: break-all; }
    .ops-prompt { font-size: 11px; }
}
.ops-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ops-muted); font-size: 12px; }