/* ========== Base ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; color: #333; background: #f5f7fa; line-height: 1.6; }
a { color: #4A90D9; text-decoration: none; }
a:hover { color: #357ABD; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ========== Header ========== */
.site-header { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 100; padding: 12px 0; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 20px; font-weight: 700; color: #4A90D9; }
.main-nav { display: flex; gap: 24px; }
.main-nav a { color: #555; font-size: 14px; padding: 4px 0; border-bottom: 2px solid transparent; transition: all 0.2s; }
.main-nav a:hover { color: #4A90D9; border-color: #4A90D9; }
.header-right { display: flex; gap: 8px; }

/* ========== Public navigation ========== */
.main-nav { align-items: center; gap: 5px; }
.main-nav-link { display: inline-flex; align-items: center; gap: 4px; color: #5c707d; font-size: 13px; padding: 8px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; white-space: nowrap; }
.main-nav-link:hover, .main-nav-link:focus { color: #206bb0; border-bottom-color: #55a7c8; outline: 0; }
.main-nav-dropdown { position: relative; display: flex; align-items: center; }
.dropdown-trigger span { color: #91a0a9; font-size: 14px; transition: transform 0.2s; }
.main-nav-dropdown:hover .dropdown-trigger span, .main-nav-dropdown:focus-within .dropdown-trigger span { transform: rotate(180deg); }
.main-nav-menu { display: none; position: absolute; z-index: 20; top: 100%; left: 0; min-width: 150px; margin-top: -1px; padding: 6px; padding-top: 12px; background: transparent; border: 0; }
.main-nav-menu::before { content: ""; position: absolute; top: 12px; left: 0; right: 0; bottom: 0; background: #fff; border: 1px solid #dfe8ec; border-radius: 7px; box-shadow: 0 10px 24px rgba(37,65,80,.12); z-index: -1; }
.main-nav-dropdown:hover .main-nav-menu, .main-nav-dropdown:focus-within .main-nav-menu { display: block; }
.main-nav-menu a { display: block; color: #5c707d; padding: 8px 10px; border-radius: 5px; font-size: 12px; white-space: nowrap; }
.main-nav-menu a:hover { color: #206bb0; background: #f1f7fb; }

/* ========== Buttons ========== */
.btn { display: inline-block; padding: 8px 20px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; color: #333; cursor: pointer; font-size: 14px; transition: all 0.2s; }
.btn:hover { border-color: #4A90D9; color: #4A90D9; }
.btn-primary { background: #4A90D9; border-color: #4A90D9; color: #fff; }
.btn-primary:hover { background: #357ABD; color: #fff; }
.btn-sm { padding: 4px 12px; font-size: 13px; }
.btn-lg { padding: 12px 32px; font-size: 16px; }
.btn-block { display: block; width: 100%; }

/* ========== Forms ========== */
.tool-form { background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 24px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 14px; color: #666; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; transition: border-color 0.2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #4A90D9; box-shadow: 0 0 0 2px rgba(74,144,217,0.1); }
.form-row { display: flex; gap: 16px; }
.form-row .form-group { flex: 1; }
.flex-2 { flex: 2; }
.flex-1 { flex: 1; }
.status-msg { margin-left: 12px; font-size: 13px; color: #999; }

/* ========== Hero ========== */
.hero { text-align: center; padding: 60px 0 40px; }
.hero h1 { font-size: 36px; margin-bottom: 16px; color: #1a1a2e; }
.hero-desc { font-size: 16px; color: #666; max-width: 600px; margin: 0 auto 24px; }
.hero-actions { display: flex; gap: 16px; justify-content: center; }

/* ========== Tool Grid ========== */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0; }
.tool-card { background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform 0.2s, box-shadow 0.2s; }
.tool-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.tool-card h3 { font-size: 18px; margin-bottom: 8px; color: #1a1a2e; }
.tool-card p { font-size: 14px; color: #666; margin-bottom: 12px; }
.card-link { font-size: 14px; color: #4A90D9; font-weight: 500; }

/* ========== Tool Page ========== */
.site-main { background: #f5f8fa; min-height: calc(100vh - 120px); }
.public-breadcrumb { max-width: 1225px; margin: 0 auto; padding: 17px 0 0; color: #94a2aa; font-size: 11px; }
.public-breadcrumb a { color: #6c8d9d; }.public-breadcrumb span { margin-left: 8px; }.public-breadcrumb span:last-child { color: #506d7b; }
.tool-page { max-width: 1225px; margin: 0 auto; padding: 28px 0 55px; }
.tool-page > h1 { color: #263f4d; font-size: 25px; letter-spacing: -.02em; margin-bottom: 6px; }
.tool-desc { color: #7e909a; margin-bottom: 20px; font-size: 13px; }
.tool-page > h1 + .tool-desc { max-width: 800px; }
.tool-page > .tool-form { border: 1px solid #dfe8ec; border-radius: 7px; box-shadow: 0 4px 15px rgba(36,67,82,.045); }
.tool-page > #result-area { margin-top: 18px; }
.tool-page .chart-container, .tool-page .table-container { border: 1px solid #dfe8ec; box-shadow: 0 4px 15px rgba(36,67,82,.035); }
.tool-page .result-table th { background: #f8fafb; color: #70838e; font-size: 11px; padding: 13px 15px; }
.tool-page .result-table td { color: #526a77; font-size: 12px; padding: 12px 15px; }
.tool-page .stats-summary { gap: 12px; }
.tool-page .stat-item { border: 1px solid #dfe8ec; border-radius: 7px; box-shadow: 0 4px 15px rgba(36,67,82,.03); }
.tool-page .tabs { padding: 5px; background: #fff; border: 1px solid #dfe8ec; border-radius: 7px; width: fit-content; }
.tool-page .tab-btn { border-color: transparent; color: #82939c; }.tool-page .tab-btn.active { background: #edf6fb; color: #246f9e; border-color: #d6eaf3; }

/* ========== Public home ========== */
.home-page { max-width: 1240px; margin: 0 auto; padding: 30px 0 50px; }
.home-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px 4px 25px; }
.home-kicker { color: #52849c; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.home-heading h1 { color: #203845; font-size: 30px; letter-spacing: -.025em; margin: 8px 0 5px; }
.home-heading p { color: #7c8e99; font-size: 14px; }
.home-status { display: inline-flex; align-items: center; gap: 8px; color: #43806e; background: #eff9f5; border: 1px solid #d7eee5; border-radius: 999px; padding: 8px 12px; font-size: 12px; white-space: nowrap; }
.home-filter-bar { display: flex; align-items: center; gap: 18px; padding: 8px 11px; background: #fff; border: 1px solid #e1e9ed; border-radius: 7px; box-shadow: 0 3px 12px rgba(34,65,80,.04); }
.home-filter-label { color: #334c5a; font-size: 12px; font-weight: 750; padding: 0 8px; white-space: nowrap; }
.home-filters { display: flex; gap: 5px; flex: 1; }
.home-filter { color: #82919a; border: 1px solid transparent; border-radius: 5px; background: transparent; padding: 7px 12px; cursor: pointer; font: inherit; font-size: 12px; }
.home-filter:hover { color: #2671a8; background: #f2f8fb; }
.home-filter.is-active { color: #216ca4; background: #edf6fb; border-color: #d7eaf3; font-weight: 650; }
.home-filter-help { color: #6d8998; font-size: 12px; white-space: nowrap; }
.home-filter-help span { color: #2d8caf; margin-left: 3px; }
.home-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.home-tool-card { position: relative; min-height: 112px; display: flex; align-items: center; gap: 13px; padding: 20px 17px; background: #fff; border: 1px solid #e1e9ed; border-radius: 7px; color: #304956; box-shadow: 0 3px 12px rgba(34,65,80,.025); transition: border-color .18s, box-shadow .18s, transform .18s; }
.home-tool-card:hover { color: #294c60; border-color: #b9d6e3; box-shadow: 0 8px 20px rgba(34,65,80,.08); transform: translateY(-2px); }
.home-tool-card[hidden] { display: none; }
.tool-card-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border-radius: 9px; font-size: 20px; }
.icon-blue { color: #367dc5; background: #edf5fd; }.icon-teal { color: #248d83; background: #eaf8f5; }.icon-orange { color: #c9872c; background: #fff5e7; }.icon-violet { color: #7767bd; background: #f2effd; }.icon-green { color: #329c70; background: #ebf8f1; }.icon-red { color: #c76565; background: #fff0f0; }
.tool-card-body { min-width: 0; flex: 1; }
.tool-card-body strong, .tool-card-body small { display: block; }
.tool-card-body strong { color: #304957; font-size: 15px; margin-bottom: 5px; }
.tool-card-body small { overflow: hidden; color: #8a9aa4; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tool-card-arrow { color: #a6b5bd; font-size: 18px; }
.home-tool-card:hover .tool-card-arrow { color: #2d8caf; }
.tool-badge { position: absolute; top: 12px; right: 13px; padding: 3px 6px; border-radius: 4px; font-size: 9px; font-weight: 750; }
.badge-blue { color: #397dbb; background: #edf5fd; }.badge-teal { color: #278b81; background: #eaf8f5; }.badge-orange { color: #b67a28; background: #fff5e7; }.badge-violet { color: #7160b2; background: #f2effd; }.badge-green { color: #308c67; background: #ebf8f1; }.badge-red { color: #c35f5f; background: #fff0f0; }
.home-lower-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; margin-top: 24px; }
.home-info-panel { min-width: 0; padding: 21px; background: #fff; border: 1px solid #e1e9ed; border-radius: 7px; }
.home-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.home-panel-heading h2 { color: #304957; font-size: 17px; margin-top: 6px; }
.home-panel-heading a, .home-panel-count { color: #6c8b9a; font-size: 11px; white-space: nowrap; }
.home-panel-count { color: #3b8e78; background: #eff9f5; padding: 5px 8px; border-radius: 4px; }
.capability-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #edf1f3; }
.capability-list div { padding: 14px 14px 3px 0; border-right: 1px solid #edf1f3; }
.capability-list div + div { padding-left: 14px; }
.capability-list div:last-child { border-right: 0; }
.capability-list b, .capability-list span { display: block; }.capability-list b { color: #3c5968; font-size: 12px; }.capability-list span { color: #8c9ba4; font-size: 11px; margin-top: 5px; line-height: 1.5; }
.home-news-list { list-style: none; border-top: 1px solid #edf1f3; }.home-news-list li { padding: 10px 0; border-bottom: 1px solid #edf1f3; font-size: 12px; }.home-news-list a { color: #617884; }.home-news-list a:hover { color: #246ea7; }.home-empty-news { color: #9aa7ae; border-top: 1px solid #edf1f3; padding: 20px 0 5px; font-size: 12px; }

/* ========== Tcping workbench ========== */
.tcping-page { max-width: 1180px; padding-top: 0; }
.tool-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.tool-kicker, .section-kicker { color: #397aa2; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.tool-hero h1 { color: #203745; font-size: 30px; letter-spacing: -.025em; margin: 8px 0 5px; }
.tool-hero .tool-desc { max-width: 650px; margin-bottom: 0; color: #778b98; font-size: 14px; }
.tool-hero-badge { display: inline-flex; align-items: center; gap: 8px; color: #327c68; background: #eff9f5; border: 1px solid #d6eee4; border-radius: 999px; padding: 8px 12px; white-space: nowrap; font-size: 12px; }
.pulse-dot, .button-pulse { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #2db486; box-shadow: 0 0 0 4px rgba(45,180,134,.13); }
.tcping-form { margin-bottom: 20px; padding: 22px 24px 16px; border: 1px solid #dfe8ec; box-shadow: 0 5px 18px rgba(33,65,80,.05); }
.target-input-wrap > label { display: block; color: #556b79; font-size: 12px; font-weight: 700; margin-bottom: 7px; }
.target-input-row { display: flex; align-items: center; gap: 0; }
.target-input-row input { min-width: 0; height: 46px; border: 1px solid #ccdce3; color: #233c4b; font-size: 15px; padding: 0 13px; outline: 0; }
.target-input-row input:first-child { flex: 1; border-radius: 6px 0 0 6px; }
.target-input-row input:focus { border-color: #378bb5; box-shadow: 0 0 0 3px rgba(55,139,181,.1); position: relative; z-index: 1; }
.target-input-row .target-separator { height: 46px; display: grid; place-items: center; padding: 0 4px; background: #fff; border-top: 1px solid #ccdce3; border-bottom: 1px solid #ccdce3; color: #9aabb5; }
.target-input-row .port-input { width: 92px; border-radius: 0 6px 6px 0; }
.target-input-row .btn { height: 46px; margin-left: 14px; border-radius: 6px; display: inline-flex; align-items: center; gap: 9px; padding: 0 20px; font-size: 13px; }
.button-pulse { width: 6px; height: 6px; background: #fff; box-shadow: none; }
.tcping-results { margin-top: 20px; }
.tcping-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .45fr); gap: 18px; }
.probe-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; }
.probe-status i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #2db486; }
.probe-status.is-failed { color: #d45c5c; }.probe-status.is-failed i { background: #e05d5d; }
.probe-status.is-ok { color: #328e70; }.latency-value { font-variant-numeric: tabular-nums; font-weight: 650; }
.probe-node-cell { display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; }.probe-node-cell strong { font-weight:500; color:#526a77; }.probe-isp { display:inline-flex; padding:3px 6px; border-radius:4px; color:#fff; font-size:11px; line-height:1; }.probe-isp-telecom{background:#8bc34a}.probe-isp-unicom{background:#ffb74d}.probe-isp-mobile{background:#12a9bd}.probe-isp-overseas{background:#7a838b}
/* ===== 区域统计表 ===== */
.region-panel { margin-top: 18px; }
.region-switch { display:inline-flex; gap:4px; background:#f4f7f9; padding:2px; border-radius:8px; }
.region-tab { padding:2px 8px; border:none; background:transparent; border-radius:6px; color:#526a77; font-size:10px; font-weight:600; cursor:pointer; transition:all .15s; white-space:nowrap; }
.region-tab.is-active { background:#fff; color:#246bb3; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.region-table th { background:#f8fafb; color:#758793; font-size:11px; }
.region-table td { color:#506673; font-size:12px; }
.region-table .col-region-name { width:40%; }
.region-table .col-fastest, .region-table .col-slowest, .region-table .col-avg { width:20%; text-align:left; font-variant-numeric:tabular-nums; }
.region-count { color:#a3aab0; font-size:11px; font-weight:400; }
.tcping-node-cell { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.probe-room-tag { display:inline-flex; padding:2px 6px; border-radius:4px; background:#fff3df; color:#b6761a; font-size:10px; line-height:1; font-weight:600; border:1px solid #ffe0a8; }
.latency-value.is-warn { color:#d68a2d; }
.latency-value.is-bad { color:#d45c5c; }

/* ========== Stats ========== */
.stats-summary { display: flex; gap: 16px; margin: 20px 0; }
.stat-item { flex: 1; background: #fff; padding: 16px; border-radius: 8px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.stat-label { display: block; font-size: 13px; color: #999; margin-bottom: 4px; }
.stat-value { display: block; font-size: 24px; font-weight: 700; color: #4A90D9; }

/* ========== Tables ========== */
.table-container { overflow-x: auto; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 24px; }
.result-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ping-results-table-wrap { overflow-x: auto; }
.result-table th { background: #fafafa; padding: 12px 16px; text-align: left; font-weight: 600; color: #666; border-bottom: 2px solid #e8e8e8; white-space: nowrap; }
.result-table td { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; }
.result-table tr:hover td { background: #fafbfc; }

/* ========== Charts ========== */
.chart-container { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }

/* ========== Tabs ========== */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab-btn { padding: 8px 20px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; cursor: pointer; font-size: 14px; }
.tab-btn.active { background: #4A90D9; color: #fff; border-color: #4A90D9; }

/* ========== Auth ========== */
.auth-page { display: flex; justify-content: center; padding: 60px 0; }
.auth-card { background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); width: 400px; max-width: 100%; }
.auth-card h1 { font-size: 24px; margin-bottom: 24px; text-align: center; }
.auth-link { text-align: center; margin-top: 16px; font-size: 14px; color: #666; }

/* ========== Admin ========== */
.admin-nav { margin-bottom: 24px; padding: 12px 16px; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.admin-nav a { margin-right: 16px; font-size: 14px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat-card { background: #fff; padding: 24px; border-radius: 8px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.stat-card h3 { font-size: 16px; color: #666; margin-bottom: 8px; }
.stat-card p { font-size: 32px; font-weight: 700; color: #4A90D9; }

/* ========== Admin workspace ========== */
.admin-shell { min-height: 100vh; background: #f4f6f8; color: #1f2933; display: flex; }
.admin-sidebar { width: 244px; flex: 0 0 244px; min-height: 100vh; background: #17212b; color: #b9c5d0; padding: 24px 14px 18px; display: flex; flex-direction: column; }
.admin-brand { display: flex; align-items: center; gap: 11px; color: #f7fafc; padding: 0 12px 30px; }
.admin-brand:hover { color: #fff; }
.admin-brand strong, .admin-brand small { display: block; }
.admin-brand strong { font-size: 16px; letter-spacing: .02em; }
.admin-brand small { color: #8293a5; font-size: 11px; margin-top: 3px; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; background: #2d8cff; color: #fff; font-weight: 800; font-size: 17px; border-radius: 7px; }
.admin-nav-label { color: #687b8e; font-size: 10px; font-weight: 700; letter-spacing: .14em; padding: 0 14px 9px; margin-top: 11px; text-transform: uppercase; }
.admin-menu { display: grid; gap: 3px; }
.admin-menu-item { color: #a9b8c6; padding: 10px 13px; display: flex; align-items: center; gap: 11px; font-size: 13px; border-radius: 5px; transition: background .15s, color .15s; }
.admin-menu-item:hover, .admin-menu-item.is-active { color: #fff; background: #243646; }
.admin-menu-item.is-active { box-shadow: inset 3px 0 #3c9cff; }
.menu-icon { width: 18px; color: #7f95a8; text-align: center; font-size: 16px; line-height: 1; }
.admin-menu-item.is-active .menu-icon { color: #5caeff; }
.admin-sidebar-foot { margin-top: auto; border-top: 1px solid #2a3947; padding: 18px 13px 0; font-size: 11px; color: #8091a1; display: flex; align-items: center; gap: 8px; }
.admin-main { min-width: 0; flex: 1; }
.admin-topbar { min-height: 94px; padding: 22px 42px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e3e8ed; background: #fff; }
.admin-kicker, .eyebrow { color: #7c8a97; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.admin-topbar h1 { font-size: 21px; line-height: 1.3; margin-top: 4px; font-weight: 650; }
.admin-topbar-actions { display: flex; align-items: center; gap: 20px; font-size: 12px; }
.admin-env { color: #6f7e8b; display: inline-flex; align-items: center; gap: 7px; }
.admin-logout { color: #667786; padding-left: 20px; border-left: 1px solid #e3e8ed; }
.admin-logout:hover { color: #2d8cff; }
.status-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; display: inline-block; background: #2eb67d; box-shadow: 0 0 0 3px rgba(46,182,125,.12); }
.status-dot.is-offline { background: #a7b1ba; box-shadow: 0 0 0 3px rgba(167,177,186,.15); }
.admin-content { max-width: 1440px; padding: 34px 42px 54px; }
.admin-page { width: 100%; }
.page-intro { display: flex; align-items: end; justify-content: space-between; margin-bottom: 25px; }
.page-intro h2 { font-size: 25px; margin: 7px 0 5px; letter-spacing: -.01em; }
.page-desc { color: #7d8a96; font-size: 13px; }
.last-refresh { color: #8996a2; font-size: 11px; }
.stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat-card { text-align: left; padding: 20px 22px 18px; border: 1px solid #e5eaee; box-shadow: none; border-radius: 6px; position: relative; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; width: 4px; height: 100%; left: 0; top: 0; background: #2d8cff; }
.stat-card.stat-green::after { background: #2eb67d; }
.stat-card.stat-amber::after { background: #e5a83b; }
.stat-card-head { color: #687887; display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
.stat-symbol { color: #2d8cff; font-size: 22px; line-height: 16px; }
.stat-green .stat-symbol { color: #2eb67d; }
.stat-amber .stat-symbol { color: #d99928; }
.stat-card p { margin: 16px 0 2px; font-size: 32px; line-height: 1; color: #1e2c38; }
.stat-card small { color: #98a4ae; font-size: 11px; }
.admin-grid-2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 16px; margin-top: 16px; }
.admin-panel { background: #fff; border: 1px solid #e5eaee; border-radius: 6px; padding: 22px; min-width: 0; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; margin-bottom: 18px; }
.panel-heading h3 { font-size: 16px; margin-top: 5px; }
.panel-link { color: #2d8cff; font-size: 12px; }
.panel-link span { font-size: 15px; margin-left: 4px; }
.health-list { border-top: 1px solid #eef1f3; }
.health-row { min-height: 43px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #eef1f3; font-size: 12px; }
.health-name { color: #324250; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-region { color: #8b98a3; margin-left: auto; }
.health-status { width: 42px; color: #2b9d70; text-align: right; font-size: 11px; }
.empty-row, .loading-row { color: #99a5ae; font-size: 12px; padding: 20px 0; text-align: center; }
.quick-panel { padding-bottom: 10px; }
.quick-action { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid #eef1f3; color: #334452; }
.quick-action:hover { color: #2d8cff; }
.quick-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 5px; color: #2d8cff; background: #edf6ff; font-size: 16px; }
.quick-action:nth-of-type(3) .quick-icon { color: #d18b1d; background: #fff6e6; }
.quick-action:nth-of-type(4) .quick-icon { color: #2e9f77; background: #eaf8f2; }
.quick-action span:nth-child(2) { min-width: 0; flex: 1; }
.quick-action strong, .quick-action small { display: block; }
.quick-action strong { font-size: 12px; }
.quick-action small { color: #98a4ae; font-size: 11px; margin-top: 2px; }
.quick-action b { color: #97a4ae; font-weight: 400; }
.admin-content > .admin-page > section:not(.admin-panel), .admin-page > section { margin: 0; }
.admin-page > .table-container, .admin-page > .tool-form { margin-top: 20px; box-shadow: none; border: 1px solid #e5eaee; }
.admin-page .table-container { border-radius: 6px; }
.node-tag { display: inline-flex; align-items: center; padding: 2px 8px; margin: 1px 4px 1px 0; border-radius: 10px; background: #eef4fa; color: #2a6db5; font-size: 11px; line-height: 1.4; white-space: nowrap; }
.admin-input { width: 100%; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; }
.admin-input:focus { outline: none; border-color: #4A90D9; box-shadow: 0 0 0 2px rgba(74,144,217,0.1); }
.mono-input { font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; }
.admin-list-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.admin-list-toolbar label { display: inline-flex; align-items: center; gap: 7px; color: #607481; font-size: 13px; }
.admin-list-toolbar select { min-width: 112px; height: 34px; padding: 0 9px; border: 1px solid #dce5ea; border-radius: 5px; background: #fff; color: #354957; }
.admin-toolbar-button, .admin-pagination button { min-height: 34px; padding: 0 13px; border: 1px solid #d5e0e6; border-radius: 5px; background: #fff; color: #405563; cursor: pointer; }
.admin-toolbar-button:hover, .admin-pagination button:hover:not(:disabled) { border-color: #4a90d9; color: #2d75bd; }
.admin-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: -10px 0 24px; color: #687b86; font-size: 13px; }
.admin-pagination button:disabled { cursor: not-allowed; opacity: .45; }
.ip-address { display: inline-block; font-size: 12px; font-weight: 650; white-space: nowrap; }
.ip-address.reachable { color: #268761; }
.ip-address.unreachable { color: #c44f4f; }
.ip-address.unknown, .ip-address.checking { color: #9aa6af; }
.danger-button { border: 1px solid #f0caca; background: #fff7f7; color: #c44f4f; }
.danger-button:hover { border-color: #d96b6b; background: #fff0f0; }
.admin-page .result-table th { background: #f8fafb; font-size: 11px; text-transform: none; user-select: none; }
.admin-page .result-table th[data-sort]:hover { background: #eef4f8; }
.admin-page .result-table .sort-arrow { font-size: 10px; color: #b3bdc5; margin-left: 2px; }
.admin-page .result-table .sort-arrow.asc { color: #2d8cff; }
.admin-page .result-table .sort-arrow.desc { color: #2d8cff; }
.admin-page .result-table .sort-arrow.muted { opacity: .45; }
.admin-search-input { padding: 8px 12px; border: 1px solid #dce3e8; border-radius: 5px; font-size: 13px; min-width: 220px; outline: none; }
.admin-search-input:focus { border-color: #2d8cff; }
.admin-page .result-table td { color: #52616d; }
.admin-page h1 { font-size: 24px; }
.admin-empty-panel { min-height: 260px; background: #fff; border: 1px solid #e5eaee; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; color: #9aa6af; font-size: 12px; }
.admin-empty-panel strong { color: #536371; font-size: 14px; }
.empty-panel-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #2d8cff; background: #edf6ff; border-radius: 7px; font-size: 22px; margin-bottom: 5px; }

/* ========== Admin polish ========== */
.admin-shell { background: #f7f9fb; }
.admin-sidebar { width: 250px; flex-basis: 250px; background: #fff; color: #667583; border-right: 1px solid #e5ebef; padding: 22px 15px 18px; }
.admin-brand { color: #20303d; padding: 0 12px 28px; }
.admin-brand:hover { color: #20303d; }
.admin-brand strong { font-size: 15px; }
.admin-brand small { color: #97a4ae; }
.brand-mark { background: #226fda; border-radius: 9px; box-shadow: 0 5px 12px rgba(34,111,218,.2); }
.admin-nav-label { color: #a0abb4; margin-top: 15px; }
.admin-menu-item { color: #687987; padding: 10px 13px; border-radius: 7px; }
.admin-menu-item:hover { color: #205fae; background: #f1f6fc; }
.admin-menu-item.is-active { color: #175fb4; background: #edf5fe; box-shadow: inset 3px 0 #2d8cff; }
.menu-icon { color: #91a0ab; }
.admin-menu-item.is-active .menu-icon { color: #2d8cff; }
.admin-sidebar-foot { border-color: #edf0f2; color: #9aa6af; }
.admin-topbar { min-height: 102px; padding: 20px 46px; background: rgba(255,255,255,.96); }
.admin-breadcrumb { display: flex; gap: 8px; align-items: center; color: #a0abb4; font-size: 11px; margin-bottom: 7px; }
.admin-breadcrumb b { color: #c8d0d6; font-weight: 400; }
.admin-kicker { color: #81909c; }
.admin-topbar h1 { color: #263743; font-size: 20px; }
.admin-topbar-actions { gap: 18px; }
.admin-env { color: #668071; background: #f1faf5; border: 1px solid #d9f0e2; padding: 6px 10px; border-radius: 999px; }
.admin-logout { color: #778692; }
.admin-content { max-width: 1480px; padding: 38px 46px 60px; }
.page-intro { margin-bottom: 22px; }
.page-intro h2 { color: #233541; font-size: 26px; letter-spacing: -.02em; }
.page-desc { color: #84929d; }
.dashboard-banner { display: flex; align-items: center; justify-content: space-between; min-height: 124px; padding: 25px 30px; margin-bottom: 18px; border: 1px solid #dceaf5; border-radius: 9px; background: linear-gradient(105deg, #eef7ff 0%, #f8fbfd 65%, #f1fbf7 100%); overflow: hidden; }
.banner-label { color: #3680bf; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.dashboard-banner h2 { color: #234052; font-size: 20px; margin: 7px 0 4px; }
.dashboard-banner p { color: #78909f; font-size: 12px; }
.banner-mark { color: #2d8b74; font-size: 18px; font-weight: 750; letter-spacing: .08em; padding-right: 12px; }
.stats-grid { gap: 18px; }
.stat-card { min-height: 142px; padding: 20px 23px 16px; border: 1px solid #e1e8ed; border-radius: 9px; box-shadow: 0 4px 14px rgba(33,52,67,.035); }
.stat-card::after { width: 4px; }
.stat-card-head { color: #70818e; }
.stat-card p { margin: 17px 0 8px; font-size: 36px; letter-spacing: -.03em; }
.stat-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stat-card small { color: #9aa7b0; }
.stat-trend { color: #6c94bd; font-size: 10px; font-weight: 700; background: #eff6fc; padding: 4px 7px; border-radius: 4px; }
.trend-green { color: #328b6c; background: #eff9f4; }
.trend-amber { color: #aa7c2d; background: #fff8e9; }
.admin-grid-2 { gap: 18px; margin-top: 18px; }
.admin-panel { border-radius: 9px; padding: 24px; box-shadow: 0 4px 14px rgba(33,52,67,.025); }
.panel-heading { margin-bottom: 20px; }
.panel-heading h3 { color: #2c3e4b; font-size: 16px; }
.panel-subtitle { display: block; color: #9aa7b0; font-size: 11px; margin-top: 4px; }
.panel-link { font-weight: 650; }
.health-list { border-top-color: #edf1f3; }
.health-row { min-height: 48px; border-bottom-color: #edf1f3; }
.health-name { color: #334957; }
.health-region { color: #96a3ac; }
.health-status { color: #2d9a72; font-weight: 650; }
.quick-panel { padding-bottom: 12px; }
.quick-action { padding: 14px 2px; border-top-color: #edf1f3; }
.quick-action strong { color: #354957; }
.quick-action:hover strong { color: #236fc4; }
.quick-icon { width: 32px; height: 32px; border-radius: 8px; }
.admin-page > .table-container, .admin-page > .tool-form { border-color: #e1e8ed; border-radius: 9px; box-shadow: 0 4px 14px rgba(33,52,67,.025); }
.admin-page .result-table th { color: #6d7d89; background: #f7fafc; padding: 14px 17px; }
.admin-page .result-table td { padding: 13px 17px; color: #526572; }
.table-subtext { display: block; max-width: 180px; margin-top: 4px; color: #9aa7b0; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 10px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-address { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.admin-form { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px; margin-top: 18px; background: #fff; border: 1px solid #e1e8ed; border-radius: 9px; }
.admin-form input, .admin-form select, .admin-form textarea { min-height: 38px; border: 1px solid #dce5ea; border-radius: 6px; padding: 8px 10px; color: #354957; font: inherit; font-size: 13px; }
.admin-form input, .admin-form select { flex: 1 1 160px; }
.admin-form textarea { flex: 2 1 320px; min-height: 82px; resize: vertical; }
.admin-form button { align-self: center; min-height: 38px; border: 0; border-radius: 6px; padding: 0 16px; background: #226fda; color: #fff; cursor: pointer; font: inherit; font-size: 13px; }
.admin-form button:hover { background: #155caf; }
.package-upload-progress { padding: 12px 18px 14px; margin-top: 10px; background: #f8fbfd; border: 1px solid #dce8ee; border-radius: 7px; color: #607682; font-size: 12px; }
.package-upload-progress-head, .package-upload-progress-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.package-upload-progress-head strong { color: #246f9e; font-size: 13px; }
.package-upload-progress progress { display: block; width: 100%; height: 9px; margin: 9px 0 7px; accent-color: #287fc0; }
.package-upload-progress-foot { color: #8999a2; font-size: 11px; }

/* ========== Admin login ========== */
.admin-login-shell { min-height: 100vh; background: #17212b; display: grid; place-items: center; padding: 24px; }
.admin-login-panel { width: min(420px, 100%); background: #fff; border-radius: 7px; padding: 38px 40px 34px; box-shadow: 0 20px 55px rgba(0,0,0,.22); }
.admin-login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 32px; }
.admin-login-brand strong, .admin-login-brand small { display: block; }
.admin-login-brand strong { color: #1f2d38; font-size: 17px; }
.admin-login-brand small { color: #8b98a3; font-size: 11px; margin-top: 3px; }
.admin-login-panel h1 { color: #1f2d38; font-size: 23px; margin-bottom: 7px; }
.admin-login-subtitle { color: #8a97a2; font-size: 13px; margin-bottom: 26px; }
.admin-login-field { display: block; color: #52616d; font-size: 12px; font-weight: 600; margin-bottom: 17px; }
.admin-login-field input { display: block; width: 100%; border: 1px solid #dce3e8; border-radius: 4px; padding: 11px 12px; margin-top: 7px; color: #23313c; font-size: 14px; outline: 0; }
.admin-login-field input:focus { border-color: #2d8cff; box-shadow: 0 0 0 3px rgba(45,140,255,.12); }
.admin-login-button { width: 100%; border: 0; border-radius: 4px; padding: 12px; background: #2d8cff; color: #fff; font-size: 14px; cursor: pointer; margin-top: 4px; }
.admin-login-button:hover { background: #1677d2; }
.admin-login-button:disabled { opacity: .65; cursor: wait; }
.login-error { min-height: 18px; color: #d94f4f; font-size: 12px; margin: -5px 0 10px; }
.admin-login-footnote { color: #a0abb4; font-size: 11px; text-align: center; margin-top: 22px; }

.dns-properties { border: 1px solid #e1e8ee; border-radius: 6px; overflow: hidden; background: #fff; }
.dns-property-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-bottom: 1px solid #edf1f4; min-height: 46px; }
.dns-property-row:last-child { border-bottom: 0; }
.dns-property-label { padding: 13px 16px; background: #f7f9fb; color: #637382; font-size: 13px; font-weight: 600; }
.dns-property-value { padding: 13px 16px; color: #344451; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.dns-property-value.strong { color: #1f6fb2; font-weight: 600; }
.dns-property-value .copy-value { color: #1677d2; cursor: pointer; }
.dns-package-item { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 14px; padding: 10px 0; color: #465766; font-size: 13px; }
.dns-package-url { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .dns-property-row { grid-template-columns: 105px minmax(0, 1fr); } .dns-property-label, .dns-property-value { padding: 11px 10px; } }
.record-count { color: #8996a2; font-size: 11px; }
.page-intro-actions { display: flex; align-items: center; gap: 8px; }
/* 操作按钮组另起一行并左对齐，而不是被 .page-intro 的 space-between 推到最右侧。
   align-items 覆盖基础的 end，避免子元素被拉伸或底部对齐。 */
.page-intro-left { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; white-space: nowrap; }
.status-pill .status-dot { width: 6px; height: 6px; flex-basis: 6px; }
.status-online { color: #2b9d70; }
.status-muted { color: #8996a2; }
.status-muted .status-dot { background: #a7b1ba; box-shadow: none; }

/* ========== Modal ========== */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,32,42,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.modal-overlay[hidden] { display: none; }
.modal-box { background: #fff; border-radius: 10px; width: min(760px, 100%); max-height: 86vh; overflow: auto; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #eef1f4; }
.modal-header h3 { font-size: 16px; color: #233541; }
.modal-close { border: 0; background: transparent; font-size: 24px; line-height: 1; color: #97a4ae; cursor: pointer; padding: 0 4px; }
.modal-close:hover { color: #2d8cff; }
.modal-note { padding: 14px 22px 0; color: #7d8a96; font-size: 12px; line-height: 1.6; }
.modal-footer { padding: 14px 22px 20px; display: flex; justify-content: flex-end; gap: 10px; }
.code-block { margin: 14px 22px 0; padding: 16px 18px; background: #0f1b26; color: #d7e6f2; border-radius: 7px; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; }
.package-upload-modal-box { width: min(620px, 100%); }
.package-upload-form { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.dns-raw-value { min-width: 180px; max-width: 300px; color: #425b69; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.mono-cell { font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; max-width: 320px; }
.copy-value { cursor: pointer; color: #2d8cff; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.copy-value:hover { text-decoration: underline; }

/* ========== Modal 增强（编辑节点 / 下发指令） ========== */
.modal-box-sm { width: min(560px, 100%); }
.modal-overlay { animation: modal-fade .16s ease; }
.modal-box { animation: modal-rise .18s cubic-bezier(.2,.8,.3,1); }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

.modal-header-main { min-width: 0; }
.modal-header-sub { margin-top: 3px; font-size: 12px; color: #8b98a4; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-close { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.modal-close:hover { background: #f2f5f7; color: #2d8cff; }
.modal-body { padding: 18px 22px 4px; }
.modal-body .form-group:last-child { margin-bottom: 14px; }

.field-label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; font-weight: 500; font-size: 13px; color: #4a5b68; }
.field-hint { font-weight: 400; font-size: 11px; color: #9aa7b2; }
.field-counter { margin-left: auto; font-weight: 400; font-size: 11px; color: #9aa7b2; font-variant-numeric: tabular-nums; }

/* 页脚按钮 */
.modal-footer { padding: 14px 22px 18px; border-top: 1px solid #f0f3f5; background: #fcfdfd; border-radius: 0 0 10px 10px; }
.modal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 16px; border-radius: 6px; font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.modal-btn-ghost { border: 1px solid #dce5ea; background: #fff; color: #5b6b78; }
.modal-btn-ghost:hover { border-color: #c3d2db; background: #f7fafb; }
.modal-btn-primary { border: 1px solid #2d8cff; background: #2d8cff; color: #fff; box-shadow: 0 1px 2px rgba(45,140,255,.25); }
.modal-btn-primary:hover { background: #1f7ded; border-color: #1f7ded; }
.modal-btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-spinner { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: btn-spin .7s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* 标签编辑器 */
.tag-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid #d9e2e8; border-radius: 6px; background: #fff; transition: border-color .2s, box-shadow .2s; cursor: text; }
.tag-editor:focus-within { border-color: #4A90D9; box-shadow: 0 0 0 3px rgba(74,144,217,.12); }
.tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 9px; border-radius: 12px; background: #eef5fb; color: #2a6db5; font-size: 12px; line-height: 1.5; }
.tag-chip-x { width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(42,109,181,.14); color: #2a6db5; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.tag-chip-x:hover { background: #2a6db5; color: #fff; }
.tag-editor-input { flex: 1 1 120px; min-width: 120px; border: 0; outline: none; padding: 3px 2px; font-size: 13px; background: transparent; }

/* 指令下发：目标节点卡片 */
.cmd-target { display: flex; align-items: center; gap: 12px; padding: 11px 13px; margin-bottom: 16px; border: 1px solid #e6edf2; border-radius: 8px; background: linear-gradient(180deg,#fbfdfe,#f6f9fb); }
.cmd-target-icon { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #e8f1fa; color: #2d8cff; font-size: 16px; }
.cmd-target-info { min-width: 0; flex: 1; }
.cmd-target-name { font-size: 13.5px; color: #233541; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-target-uid { margin-top: 2px; font-size: 11px; color: #8b98a4; font-family: "SFMono-Regular", Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-target-env { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 10px; background: #eef4fb; color: #4a6a8a; font-size: 10.5px; font-family: "SFMono-Regular", Menlo, Consolas, monospace; }
.cmd-target-env.is-unknown { background: #fdf3e7; color: #a06820; }
.cmd-os-select { margin-left: 6px; padding: 2px 6px; border: 1px solid #dce5ea; border-radius: 5px; background: #fff; color: #5b6b78; font-size: 11px; cursor: pointer; }
.cmd-os-select:focus { outline: none; border-color: #2d8cff; }
.cmd-target-badge { flex: none; padding: 3px 9px; border-radius: 11px; font-size: 11px; background: #eef1f4; color: #7d8a96; }
.cmd-target-badge.is-online { background: #e6f7ec; color: #1f9254; }
.cmd-target-badge.is-offline { background: #fdeeee; color: #c0392b; }

/* 快捷指令 */
.cmd-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.cmd-preset { padding: 4px 10px; border: 1px solid #e0e8ee; border-radius: 12px; background: #fff; color: #5b6b78; font-size: 11.5px; cursor: pointer; transition: all .15s; }
.cmd-preset:hover { border-color: #2d8cff; color: #2d8cff; background: #f5faff; }

/* 指令输入框：终端风格 */
.cmd-input-wrap { display: flex; gap: 9px; padding: 11px 13px; border: 1px solid #22323d; border-radius: 7px; background: #0f1b26; transition: box-shadow .2s, border-color .2s; }
.cmd-input-wrap:focus-within { border-color: #2d8cff; box-shadow: 0 0 0 3px rgba(45,140,255,.18); }
.cmd-prompt { flex: none; color: #4fd1a5; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.55; user-select: none; }
.cmd-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #d7e6f2; font-size: 13px; line-height: 1.55; resize: vertical; caret-color: #4fd1a5; }
.cmd-input::placeholder { color: #5b7284; }

/* 分段控件（超时选择） */
.seg-control { display: inline-flex; padding: 3px; border: 1px solid #dce5ea; border-radius: 7px; background: #f4f7f9; gap: 2px; }
.seg-item { min-width: 52px; padding: 5px 10px; border: 0; border-radius: 5px; background: transparent; color: #5b6b78; font-size: 12.5px; cursor: pointer; transition: all .15s; font-variant-numeric: tabular-nums; }
.seg-item:hover { color: #2d8cff; }
.seg-item.is-active { background: #fff; color: #2d8cff; font-weight: 500; box-shadow: 0 1px 2px rgba(20,32,42,.1); }

/* 安全提示 */
.cmd-warn { display: flex; gap: 9px; padding: 10px 12px; margin-bottom: 14px; border: 1px solid #f3e2c7; border-left: 3px solid #e0a94a; border-radius: 6px; background: #fdf8ef; color: #8a6d3b; font-size: 12px; line-height: 1.6; }
.cmd-warn-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #e0a94a; color: #fff; font-size: 11px; font-weight: 700; }

/* 执行结果 */
.cmd-result { margin-bottom: 14px; border: 1px solid #e6edf2; border-radius: 8px; overflow: hidden; }
.cmd-result-head { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: #f7fafb; border-bottom: 1px solid #eef2f5; }
.cmd-result-badge { padding: 3px 10px; border-radius: 11px; font-size: 11.5px; background: #eef1f4; color: #7d8a96; }
.cmd-result-badge.is-ok { background: #e6f7ec; color: #1f9254; }
.cmd-result-badge.is-fail { background: #fdeeee; color: #c0392b; }
.cmd-result-meta { font-size: 11.5px; color: #8b98a4; font-variant-numeric: tabular-nums; }
.cmd-result-block { padding: 10px 13px; border-bottom: 1px solid #f2f5f7; }
.cmd-result-block:last-child { border-bottom: 0; }
.cmd-result-label { margin-bottom: 5px; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: #a3b0ba; }
.cmd-result-pre { margin: 0; padding: 11px 13px; border-radius: 6px; background: #0f1b26; color: #d7e6f2; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow: auto; }
.cmd-result-pre-err { background: #2a1417; color: #ffc9c9; }
.cmd-empty { padding: 22px 13px; border: 1px dashed #e0e8ee; border-radius: 8px; background: #fcfdfd; color: #9aa7b2; font-size: 12.5px; text-align: center; }
.cmd-empty.is-error { border-color: #f5c6c6; background: #fdf5f5; color: #c0392b; text-align: left; }
.copy-hint { font-size: 11px; color: #97a4ae; border: 1px solid #e6eaee; border-radius: 4px; padding: 0 5px; line-height: 16px; }
.copy-value:hover .copy-hint { color: #2d8cff; border-color: #bcdcff; }
.dns-instance-box { padding: 6px 22px 4px; }
.dns-instance-title { font-size: 12.5px; color: #5a6671; font-weight: 600; margin: 8px 0 6px; }
.dns-instance-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.dns-instance-list li { font-size: 12.5px; color: #2f3b46; display: flex; align-items: center; gap: 8px; }

/* ========== Announcements ========== */
.announcements { margin: 40px 0; }
.announcements h2 { font-size: 20px; margin-bottom: 12px; }
.announcements ul { list-style: none; }
.announcements li { padding: 8px 0; border-bottom: 1px solid #eee; }

/* ========== Ad Sidebar ========== */
.ad-sidebar { position: fixed; right: 20px; top: 100px; width: 200px; }
.ad-item { margin-bottom: 12px; }
.ad-item img { width: 100%; border-radius: 4px; }

/* ========== Footer ========== */
.site-footer { margin-top: 60px; padding: 24px 0; text-align: center; color: #999; font-size: 13px; border-top: 1px solid #eee; }
.site-footer a { color: #999; margin: 0 8px; }

/* ========== Content Article ========== */
.content-article { background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.content-article h1 { font-size: 28px; margin-bottom: 24px; }
.article-body { font-size: 15px; line-height: 1.8; }

/* ========== Responsive ========== */
@media (max-width: 768px) {
    .tool-grid { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; }
    .stats-summary { flex-wrap: wrap; }
    .stat-item { flex: 1 1 45%; }
    .ad-sidebar { display: none; }
    .stats-grid { grid-template-columns: 1fr; }
    .admin-shell { display: block; }
    .admin-sidebar { width: 100%; min-height: auto; padding: 14px 16px 10px; border-right: 0; border-bottom: 1px solid #e5ebef; }
    .admin-brand { padding: 0 3px 14px; }
    .admin-nav-label, .admin-sidebar-foot { display: none; }
    .admin-menu { display: flex; overflow-x: auto; gap: 4px; }
    .admin-menu + .admin-nav-label { display: none; }
    .admin-menu-item { white-space: nowrap; padding: 8px 10px; }
    .admin-menu-item.is-active { box-shadow: inset 0 -2px #3c9cff; }
    .admin-topbar { padding: 16px 20px; min-height: 86px; }
    .admin-topbar-actions { gap: 0; }
    .admin-env { display: none; }
    .admin-logout { padding-left: 0; border-left: 0; }
    .admin-content { padding: 24px 20px 40px; }
    .dashboard-banner { align-items: flex-start; padding: 21px; }
    .dashboard-banner h2 { font-size: 17px; }
    .banner-mark { display: none; }
    .admin-grid-2 { grid-template-columns: 1fr; }
    .page-intro { align-items: start; gap: 10px; flex-direction: column; }
    .admin-form { flex-direction: column; }
    .admin-form input, .admin-form select, .admin-form textarea, .admin-form button { width: 100%; flex: none; }
}
@media (max-width: 820px) {
    .main-nav { overflow-x: auto; justify-content: flex-start; max-width: 100%; }
    .main-nav-link { padding-left: 7px; padding-right: 7px; }
    .home-page { padding: 20px 0 35px; }
    .home-heading { align-items: flex-start; flex-direction: column; padding-top: 10px; }
    .home-heading h1 { font-size: 26px; }
    .home-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-lower-grid { grid-template-columns: 1fr; }
    .public-breadcrumb { padding-top: 13px; }
    .tool-page { padding-top: 22px; }
}
@media (max-width: 520px) {
    .home-filter-bar { align-items: flex-start; flex-wrap: wrap; gap: 6px; padding: 10px; }
    .home-filters { flex-basis: 100%; order: 3; overflow-x: auto; }
    .home-filter-help { margin-left: auto; }
    .home-tool-grid { grid-template-columns: 1fr; }
    .capability-list { grid-template-columns: 1fr; }.capability-list div, .capability-list div + div { border-right: 0; border-bottom: 1px solid #edf1f3; padding: 11px 0; }.capability-list div:last-child { border-bottom: 0; }
}
@media (max-width: 700px) {
    .tcping-page { padding-top: 25px; }
    .tool-hero { align-items: flex-start; flex-direction: column; gap: 14px; }
    .tool-hero h1 { font-size: 26px; }
    .tool-hero-badge { align-self: flex-start; }
    .target-input-row { flex-wrap: wrap; }
    .target-input-row input:first-child { flex: 1 1 calc(100% - 0px); border-radius: 6px; }
    .target-input-row .target-separator, .target-input-row .port-input { margin-top: 8px; }
    .target-input-row .port-input { flex: 1; width: auto; border-radius: 0 6px 6px 0; }
    .target-input-row .target-separator { margin-left: 0; border-left: 1px solid #ccdce3; border-radius: 6px 0 0 6px; }
    .target-input-row .btn { flex: 1 1 100%; margin: 12px 0 0; justify-content: center; }
    .tcping-layout { grid-template-columns: 1fr; }
}

/* ========== Reference-inspired workspace ========== */
.site-header { position: relative; top: auto; z-index: 100; padding: 0; background: transparent; box-shadow: none; }
.site-brandbar { height: 56px; background: #fff; }
.site-brandbar .container { height: 100%; display: flex; align-items: center; }
.site-brandbar .container, .site-navbar .container, .site-main > .container { width: 960px; max-width: calc(100% - 30px); padding-left: 0; padding-right: 0; }
.site-brandbar .logo { display: inline-flex; align-items: center; gap: 7px; color: #292929; font-family: Georgia, serif; line-height: 1; }
.site-brandbar .logo { gap: 0; flex-direction: column; align-items: flex-start; }
.site-brandbar .logo-word { display: block; color: #2f4050; font-size: 19px; font-weight: 700; letter-spacing: .02em; }
.site-brandbar .logo img { display: block; max-height: 32px; width: auto; object-fit: contain; }
.site-brandbar .logo small { display: block; color: #8b98a3; font-size: 10px; margin-top: 3px; }
.site-navbar { height: 39px; background: #101b38; box-shadow: 0 2px 5px rgba(0,0,0,.22); }
.site-navbar .container { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.site-navbar .main-nav { height: 100%; gap: 0; overflow: visible; }
.site-navbar .main-nav-link { height: 100%; padding: 0 10px; border: 0; border-bottom: 3px solid transparent; color: #aebbd3; font-size: 12px; }
.site-navbar .main-nav-link:hover, .site-navbar .main-nav-link:focus { color: #fff; background: #1c2b50; border-bottom-color: #5d96ee; }
.site-navbar .main-nav-link.is-active { color: #fff; background: #1c2b50; border-bottom-color: #4285ed; }
.site-navbar .main-nav-menu { top: 100%; }
.header-setting { border: 1px solid #e0b82e; color: #f1cb48; padding: 5px 9px; font-size: 11px; border-radius: 3px; }
.header-setting:hover { color: #fff; border-color: #fff; }
.site-main { background: #eef1f7; min-height: calc(100vh - 145px); }
.site-main > .container { padding: 0 0 34px; }
.public-breadcrumb { max-width: none; height: 43px; padding: 21px 0 7px; color: #7f8b9b; font-size: 11px; }
.public-breadcrumb a { color: #788695; }
.tool-page { max-width: none; padding: 0 0 24px; }
.tool-page > h1 { padding: 0 0 3px; color: #435363; font-size: 18px; font-weight: 500; }
.tool-desc { margin-bottom: 9px; color: #8995a2; font-size: 11px; }
.tool-hero { align-items: center; gap: 12px; margin-bottom: 9px; }
.tool-hero h1 { margin: 0 0 3px; color: #435363; font-size: 18px; font-weight: 500; letter-spacing: 0; }
.tool-hero .tool-desc { color: #8995a2; font-size: 11px; }
.tool-kicker, .section-kicker { display: none; }
.tool-hero-badge { padding: 5px 9px; border-radius: 3px; font-size: 10px; }
.tool-page > .tool-form { margin-bottom: 12px; padding: 18px 24px 14px; border: 1px solid #dce2e9; border-radius: 3px; box-shadow: 0 2px 5px rgba(31,53,75,.08); }
.tool-page > .tool-form .form-row { display: flex; align-items: flex-end; gap: 12px; }
.tool-page > .tool-form .form-row .form-group > label { display: none; }
.tool-page > .tool-form .form-row .btn { height: 44px; }
.tool-page > .tool-form .form-row .form-group { flex: 1; margin-bottom: 0; }
.tool-page > .tool-form .form-group label { margin-bottom: 4px; color: #71808c; font-size: 11px; font-weight: 400; }
.tool-page > .tool-form .form-group input, .tool-page > .tool-form .form-group select, .tool-page > .tool-form .form-group textarea { height: 44px; padding: 0 12px; border-color: #d9e0e6; border-radius: 2px; color: #64727e; font-size: 13px; }
.tool-page > .tool-form .btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 110px; padding: 0 20px; border-radius: 3px; font-size: 13px; }
.tool-page > .tool-form .btn-lg { height: 44px; padding: 0 24px; font-size: 13px; }
.tool-page > .tool-form > .status-msg:empty { display: none; }
.ping-target-group { flex: 1 1 auto; max-width: none; }
.ping-options { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; color: #7b8791; font-size: 11px; margin: 3px 0 10px; }
.ping-options label { white-space: nowrap; }
.ping-options input[type=checkbox] { vertical-align: -2px; accent-color: #4285ed; }
.dns-choice { margin-left: auto; color: #6c8291; }
.dns-input { width: 155px; height: 32px; padding: 0 8px; border: 1px solid #d9e0e6; border-radius: 3px; font-size: 11px; }
.tool-page > #result-area { margin-top: 12px; }
.ping-result-area { display: block; }
/* 地图 + 地域面板：统一模块（tcping / ping / http / dns 共用，保持一致） */
.probe-map-panel, .ping-result-top, .probe-summary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.probe-map-panel .chart-container, .probe-map-panel .probe-region-panel,
.ping-result-top .chart-container, .ping-region-panel,
.probe-summary-grid > .chart-container, .probe-region-card,
.table-container { margin-bottom: 10px; border: 1px solid #dce2e9; border-radius: 3px; box-shadow: 0 2px 5px rgba(31,53,75,.07); }
.probe-map-panel .chart-container, .ping-result-top .chart-container, .probe-summary-grid > .chart-container { position: relative; height: 425px !important; padding: 8px; }
.probe-map-panel .probe-region-panel, .ping-region-panel, .probe-region-card { height: 425px; overflow: hidden; background: #fff; }
.region-panel-head { height: 42px; display: flex; align-items: center; gap: 13px; padding: 0 12px; border-bottom: 1px solid #edf0f2; color: #87939c; font-size: 11px; }
.region-panel-head strong { padding: 5px 9px; background: #4387e9; color: #fff; border-radius: 3px; font-weight: 400; }
.region-panel-head em { margin-left: auto; color: #87939c; font-style: normal; font-size: 10px; }
.region-table { width: 100%; border-collapse: collapse; table-layout: fixed; color: #687782; font-size: 10px; }
.region-table th, .region-table td { padding: 8px 9px; border-bottom: 1px solid #edf0f2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.region-table th { color: #8b969f; background: #fafbfc; font-weight: 400; }
.region-table th:first-child, .region-table td:first-child { text-align: left; }
.stats-summary { gap: 8px; margin-bottom: 10px; }
.stat-item { min-height: 55px; padding: 8px 12px; border: 1px solid #dce2e9; border-radius: 3px; background: #fff; box-shadow: 0 2px 5px rgba(31,53,75,.05); }
.stat-label { color: #909ba3; font-size: 10px; }.stat-value { color: #3e7dcc; font-size: 17px; }
.table-container { overflow-x: auto; background: #fff; }
.result-table { font-size: 11px; }
.result-table th { padding: 9px 10px; color: #7f8a93; background: #fafbfc; border-bottom: 1px solid #e7ebee; font-size: 10px; }
.result-table td { padding: 8px 10px; color: #687782; border-bottom: 1px solid #edf0f2; }
.site-footer { margin-top: 0; padding: 21px 0 26px; background: #f5f6f8; border-top: 1px solid #e2e6eb; font-size: 11px; }
.site-footer p { margin: 0 0 6px; }
.site-footer-extra { color: #9aa4ad; line-height: 1.7; }

/* Shared result workbench styling: compact, scan-friendly panels like the reference views. */
.tool-page > .tool-form { position: relative; }
.tool-page > .tool-form .btn-primary { background: #4285ed; border-color: #4285ed; box-shadow: 0 2px 5px rgba(66,133,237,.18); }
.tool-page > .tool-form .btn-primary:hover { background: #326fce; border-color: #326fce; }
.tool-page > .tool-form input::placeholder { color: #aeb8c1; }
.persistent-map-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.persistent-map-area > .chart-container { margin-bottom: 0; min-height: 360px; }
.persistent-map-area > .table-container { margin-bottom: 0; }
.persistent-map-area .stats-summary { margin: 0; }
.persistent-map-area .result-table th, .ping-results-table-wrap .result-table th { text-transform: none; letter-spacing: 0; }
.persistent-map-area .result-table td, .ping-results-table-wrap .result-table td { vertical-align: middle; }
.tool-page .status-msg { color: #7e8d99; }
.tool-page .status-msg.is-error { color: #c85c5c; }
.tool-page .status-msg.is-success { color: #398b6d; }

/* ===== Toast 提示 ===== */
.toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; max-width: 420px; padding: 11px 18px; border-radius: 6px; font-size: 13px; line-height: 1.4; color: #fff; box-shadow: 0 6px 20px rgba(31,53,75,.18); opacity: 0; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-info { background: #4285ed; }
.toast-success { background: #2db486; }
.toast-warning { background: #f0a23b; }
.toast-error { background: #e0584f; }
.tool-page .tab-btn { min-height: 28px; padding: 5px 13px; font-size: 11px; }
.tool-page .tabs { margin: 0 0 10px; }
.tool-page .result-table tr:last-child td { border-bottom: 0; }
.tool-page .result-table button { min-height: 24px; padding: 3px 8px; border: 1px solid #cfdbe3; border-radius: 3px; background: #fff; color: #3978bd; font: inherit; font-size: 11px; cursor: pointer; }
.tool-page .result-table button:hover { border-color: #4285ed; background: #f3f7ff; }
.dns-records-cell { display: flex; flex-direction: column; gap: 2px; max-width: 260px; }
.dns-record-line { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 11px; line-height: 1.5; color: #3d5365; }
.dns-ok .dns-record-line { color: #26845d; }
.dns-empty .dns-record-line { color: #c85c5c; }
.dns-ok { display: inline-block; min-width: 36px; padding: 1px 6px; border-radius: 10px; background: #e7f7ee; color: #26845d; font-size: 10px; text-align: center; }
.dns-empty { display: inline-block; min-width: 36px; padding: 1px 6px; border-radius: 10px; background: #fff1f1; color: #c85c5c; font-size: 10px; text-align: center; }
.tool-page .table-container::-webkit-scrollbar { height: 8px; }
.tool-page .table-container::-webkit-scrollbar-thumb { background: #cbd7df; border-radius: 4px; }

@media (min-width: 801px) {
    .persistent-map-area > .chart-container { min-height: 425px; }
    .persistent-map-area > .stats-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .persistent-map-area > .table-container { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
    .site-navbar { height: auto; min-height: 39px; }
    .site-navbar .container { overflow-x: auto; }
    .site-navbar .main-nav-link { padding: 0 8px; }
    .header-setting { display: none; }
    .site-main > .container { padding: 0 10px 24px; }
    .public-breadcrumb { height: 39px; }
    .ping-result-top, .probe-map-panel, .probe-summary-grid { grid-template-columns: 1fr; }
    .ping-region-panel, .probe-map-panel .probe-region-panel, .probe-region-card, .ping-result-top .chart-container, .probe-map-panel .chart-container, .probe-summary-grid > .chart-container { height: auto !important; min-height: 340px; }
    .probe-progress-meta, .ping-progress-meta { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .dns-choice { margin-left: 0; }
}

/* Tcping reference layout overrides (kept last so the compact workspace theme wins). */
.tcping-page { padding-top: 0; }
.tcping-form { padding: 18px 24px 14px; }
.tcping-form .target-input-wrap > label { display: none; }
.tcping-form .target-input-row input:first-child, .tcping-form .target-input-row .target-separator, .tcping-form .target-input-row .port-input { height: 44px; font-size: 13px; }
.tcping-form .target-input-row .btn { height: 44px; min-width: 110px; justify-content: center; }
.tcping-ip-version { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; height: 44px; margin-left: 14px; }
.tcping-ip-version .ip-version-option { display: flex; align-items: center; gap: 5px; color: #526a77; font-size: 13px; cursor: pointer; user-select: none; }
.tcping-ip-version .ip-version-option input { width: 14px; height: 14px; margin: 0; accent-color: #4285ed; cursor: pointer; }
.tcping-ip-version .ip-version-option:has(input:checked) { color: #4285ed; }
.tcping-form .target-input-row .btn-capture { background: #ffb34f; border-color: #ffb34f; color: #fff; }
.tcping-form .target-input-row .btn-capture:hover { background: #ed9d36; border-color: #ed9d36; }
.tcping-form .probe-options > .status-msg { display: none; }
.tcping-hidden-option { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Tcping 现使用统一 .probe-map-panel 结构（样式已内联至模板），此处仅保留页面级布局 */
.tcping-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: stretch; }
.tcping-layout .probe-map-card { height: 425px !important; min-height: 425px !important; max-height: 425px !important; padding: 8px; overflow: hidden; }
.tcping-form .target-input-row { min-width: 0; }
.tcping-form .target-input-row > input:first-child { min-width: 0; }
.tcping-dns-input { width: min(200px, 25vw); min-width: 120px; max-width: 200px; flex: 0 1 200px; }
.tcping-dns { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.tcping-custom-dns { display: inline-flex; align-items: center; }
@media (max-width: 1100px) and (min-width: 701px) {
    .tcping-form { padding-left: 24px; padding-right: 24px; }
    .tcping-form .target-input-row .btn { min-width: 110px; padding-left: 10px; padding-right: 10px; }
    .tcping-ip-version { margin-left: 10px; }
    .tcping-checks { gap: 10px; flex-wrap: wrap; }
    .tcping-dns { margin-left: 0; width: 100%; padding-top: 4px; }
    .tcping-dns-input { width: 200px; }
}
.region-progress-line { flex: 1; height: 8px; min-width: 50px; background: #e9eef3; border-radius: 5px; overflow: hidden; }
.region-progress-line i { display: block; width: 0; height: 100%; background: #4285ed; }
.probe-result-area { margin-top: 12px; }
.probe-result-area > .table-container { margin-top: 0; }
.dns-action-buttons { display: flex; gap: 10px; flex: 0 0 auto; align-items: center; }
.dns-action-buttons .btn { height: 44px; min-width: 110px; justify-content: center; }
.dns-action-buttons .btn-capture { background: #ffb34f; border-color: #ffb34f; color: #fff; }
.dns-action-buttons .btn-capture:hover { background: #ed9d36; border-color: #ed9d36; }
@media (max-width: 700px) {
    .probe-summary-grid { grid-template-columns: 1fr; gap: 10px; }
    .probe-summary-grid > .chart-container, .probe-region-card { height: 380px; min-height: 380px; }
}

/* Wide detection workspace: two balanced panels close to the reference 720x640 layout. */
@media (min-width: 1100px) {
    .site-brandbar .container, .site-navbar .container, .site-main > .container { width: calc(100% - 30px); max-width: 960px; }
    .tcping-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .probe-summary-grid, .probe-map-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
    .probe-summary-grid > .chart-container, .probe-summary-grid .probe-region-card,
    .probe-map-panel .chart-container, .probe-map-panel .probe-region-panel { height: 426px !important; min-height: 426px !important; max-height: 426px !important; }
}

@media (max-width: 980px) {
    .tcping-form { padding: 20px 24px 16px; }
    .tcping-form .target-input-row { flex-wrap: wrap; }
    .tcping-form .target-input-row input:first-child { flex: 1 1 calc(100% - 110px); }
    .tcping-dns { width: 100%; margin-left: 0; }
}

@media (max-width: 700px) {
    .tcping-form { padding: 18px 14px 14px; }
    .tcping-form .target-input-row { flex-wrap: wrap; gap: 8px; }
    .tcping-form .target-input-row input:first-child { flex: 1 1 100%; border-radius: 4px; }
    .tcping-form .target-input-row .target-separator { display: none; }
    .tcping-form .target-input-row .port-input { width: 100px; border-radius: 4px; }
    .tcping-ip-version { order: 3; width: 100%; margin: 0; justify-content: center; }
    .tcping-form .target-input-row .btn { flex: 1; min-width: 0; margin-left: 0; }
    .tcping-checks, .tcping-dns { width: 100%; flex-wrap: wrap; gap: 10px; margin-left: 0; }
    .tcping-dns > input:not([type]) { flex: 1; min-width: 150px; }
    .tcping-layout .probe-map-card { height: auto !important; min-height: 340px; max-height: none !important; }
}

/* Shared probe controls and live-result affordances. */
.probe-options { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin: 4px 0 11px; color: #71808c; font-size: 11px; }
.tool-page > .tool-form .probe-options { margin: 12px 0 0; }
.probe-node-selector { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; }
.probe-node-selector label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.probe-node-selector input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: #4285ed; }
.probe-dns-choice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.probe-options-label { color: #6c8291; font-weight: 600; margin-right: 2px; }
.probe-dns-choice .dns-combobox { display: inline-flex; align-items: center; }
.probe-dns-choice .dns-input {
    width: 210px; height: 32px; padding: 0 10px;
    border: 1px solid #d9e0e6; border-radius: 4px; font-size: 11px; color: #44525c;
    background: #fff; transition: border-color .15s, box-shadow .15s;
}
.probe-dns-choice .dns-input::placeholder { color: #a6b1ba; }
.probe-dns-choice .dns-input:focus { border-color: #4285ed; box-shadow: 0 0 0 2px rgba(66,133,237,.15); outline: none; }
.result-row-error td { background: #fffafa; }
.result-error, .result-success { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 10px; line-height: 1.25; }
.result-error { background: #fff0f0; color: #c65353; }
.result-success { background: #e7f7ee; color: #26845d; }
.result-table tr.is-map-selected td { background: #edf5ff; box-shadow: inset 3px 0 #4285ed; }
.raw-result { position: relative; display: inline-block; text-align: left; }
.raw-result summary { color: #3978bd; cursor: pointer; list-style: none; white-space: nowrap; }
.raw-result summary::-webkit-details-marker { display: none; }
.raw-result summary::after { content: ' v'; color: #8b98a3; }
.raw-result[open] pre { position: absolute; z-index: 8; right: 0; width: min(480px, 70vw); max-height: 260px; margin: 6px 0 0; padding: 10px; overflow: auto; border: 1px solid #cbd7df; border-radius: 3px; background: #1f2933; color: #dce7ed; box-shadow: 0 4px 12px rgba(31, 53, 75, .18); font: 11px/1.45 Consolas, "Courier New", monospace; white-space: pre-wrap; }
.traceroute-table { width: 100%; max-width: 100%; table-layout: fixed; min-width: 0; }
.traceroute-table th, .traceroute-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.traceroute-table td { vertical-align: top; }
.traceroute-table th:last-child, .traceroute-table td:last-child { overflow: visible; }
.traceroute-table th:nth-child(3), .traceroute-table td:nth-child(3) { width: 150px; }

/* ===== 自定义 Tooltip（可复制，替代原生 title）===== */
.custom-tooltip {
    position: fixed; z-index: 1000;
    max-width: 480px; max-height: 260px;
    padding: 8px 10px;
    border: 1px solid #cbd7df; border-radius: 4px;
    background: #1f2933; color: #dce7ed;
    box-shadow: 0 4px 12px rgba(31, 53, 75, .25);
    font: 11px/1.5 Consolas, "Courier New", monospace;
    white-space: pre-wrap; word-break: break-word;
    overflow: auto;
    user-select: text; -webkit-user-select: text;
    pointer-events: auto;
    opacity: 0; visibility: hidden;
    transition: opacity .12s ease;
}
.custom-tooltip.show { opacity: 1; visibility: visible; }
.raw-trigger { color: #3978bd; cursor: pointer; white-space: nowrap; }
.raw-trigger:hover { text-decoration: underline; }

@media (max-width: 700px) {
    .probe-options { align-items: flex-start; gap: 10px; }
    .probe-node-selector, .probe-dns-choice { width: 100%; gap: 8px 11px; }
    .probe-dns-choice { margin-left: 0; }
    .probe-dns-choice .dns-input { flex: 1; min-width: 150px; width: auto; }
}

/* Ping workspace alignment with the reference layout. */
.ping-form { padding: 18px 24px 14px; }
.ping-submit-row { display: flex; align-items: flex-end; gap: 12px; }
.ping-form .ping-target-group { flex: 1 1 auto; max-width: none; margin: 0; }
.ping-form .ping-target-group label { display: none; }
.ping-form .ping-target-group input { height: 44px; font-size: 13px; }
.ping-action-buttons { display: flex; gap: 10px; flex: 0 0 auto; align-items: center; }
.ping-ip-version { display: flex; align-items: center; gap: 14px; height: 44px; }
.ping-ip-version .ip-version-option { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #526a77; cursor: pointer; user-select: none; }
.ping-ip-version .ip-version-option input { width: 14px; height: 14px; margin: 0; accent-color: #4285ed; cursor: pointer; }
.ping-ip-version .ip-version-option:has(input:checked) { color: #4285ed; }
.ping-action-buttons .btn-capture { background: #ffb34f; border-color: #ffb34f; color: #fff; }
.ping-action-buttons .btn-capture:hover { background: #ed9d36; border-color: #ed9d36; }
.ping-advanced-fields { display: none; }
.ping-result-top .chart-container { height: 425px !important; }
.ping-region-panel { height: 425px; }
.region-panel-head { min-height: 52px; height: auto; padding: 7px 12px; }
.probe-progress-meta, .ping-progress-meta { display: flex; align-items: center; gap: 4px; margin-left: auto; color: #768792; font-size: 10px; white-space: nowrap; }
.probe-progress-meta strong, .ping-progress-meta strong { padding: 4px 7px; border-radius: 3px; background: #e7efff; color: #4285ed; font-size: 12px; font-weight: 500; }
.probe-progress-meta em, .ping-progress-meta em { color: #8b98a3; font-style: normal; }
.probe-progress-track, .ping-progress-track { display: inline-block; width: 100px; height: 8px; overflow: hidden; border-radius: 4px; background: #e9eef3; }
.probe-progress-track i, .ping-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: #4285ed; transition: width .2s ease; }
.ping-resolve-panel, .ping-results-panel { margin-bottom: 10px; border: 1px solid #dce2e9; border-radius: 3px; background: #fff; box-shadow: 0 2px 5px rgba(31,53,75,.07); }
.ping-panel-heading { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid #e7ebee; color: #637582; }
.ping-panel-heading .class-hr { display: inline-block; width: 3px; height: 24px; background: #4285ed; }
.ping-panel-heading h2 { margin: 0 8px 0 2px; color: #526675; font-size: 15px; font-weight: 400; }
.panel-count { padding: 3px 7px; border-radius: 3px; background: #e7efff; color: #4285ed; font-size: 11px; }
.copy-ip-btn, .collapse-btn { border: 0; border-radius: 3px; background: #fff3dd; color: #ed9d36; padding: 4px 8px; font-size: 10px; cursor: pointer; }
.collapse-btn { margin-left: auto; background: transparent; color: #788994; }
.resolve-ip-list { display: flex; flex-wrap: wrap; gap: 5px; min-height: 48px; padding: 9px 14px; }
.resolve-ip-list.is-collapsed { display: none; }
.resolve-ip-item { display: inline-flex; align-items: center; gap: 14px; padding: 7px 12px; border-radius: 2px; background: #f5f7f9; color: #687984; font-size: 11px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resolve-ip-item b { color: #4285ed; font-weight: 400; }
.ping-results-heading { min-height: 50px; }
.ping-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ping-filter button { min-height: 28px; padding: 4px 11px; border: 1px solid #e2e8ed; border-radius: 3px; background: #fff; color: #84929c; font-size: 11px; cursor: pointer; }
.ping-filter button.is-active { border-color: #4285ed; background: #4285ed; color: #fff; }
.filter-count { color: #e55b5b; font-weight: 600; margin-left: 4px; font-size: 11px; }
.ping-filter button.is-active .filter-count { color: #fff; }
.result-count-label { margin-left: auto; color: #8b98a3; font-size: 10px; white-space: nowrap; }
.result-count-label b { color: #4285ed; font-weight: 500; }
.ping-results-table-wrap { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.ping-result-table { width: 100%; max-width: 100%; table-layout: fixed; min-width: 0; }
.ping-result-table th, .ping-result-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ping-result-table .col-target { width: 170px; }
.ping-result-table th { height: 40px; font-size: 10px; }
.ping-result-table td { height: 42px; font-size: 11px; }
.ping-result-table .probe-node-cell, .http-result-table .probe-node-cell, .dns-result-table .probe-node-cell, .traceroute-table .probe-node-cell { flex-wrap: nowrap; min-width: 0; }
.ping-result-table .probe-node-name, .http-result-table .probe-node-name, .dns-result-table .probe-node-name, .traceroute-table .probe-node-name { overflow: hidden; text-overflow: ellipsis; }
.quality-wrap { display: inline-flex; align-items: center; gap: 7px; min-width: 165px; }
.quality-sparkline { display: block; width: 130px; height: 22px; overflow: visible; }
.quality-timeout { display: inline-block; width: 130px; height: 18px; background: #f21b1b; }
.quality-label { color: #6f818d; font-size: 10px; }
.raw-inline { display: inline-block; margin-left: 5px; }
.raw-inline .raw-result summary { font-size: 10px; }

@media (max-width: 900px) {
    .ping-submit-row { flex-wrap: wrap; }
    .ping-action-buttons { width: 100%; }
    .ping-action-buttons .btn { flex: 1; }
    .ping-options-row { align-items: flex-start; flex-wrap: wrap; }
    .ping-options-row .probe-dns-choice { width: 100%; margin-left: 0; }
}

/* HTTP(S) measurement workspace aligned with the reference page. */
.http-form { padding: 18px 24px 14px; }
.http-submit-row { display: flex; align-items: flex-end; gap: 12px; }
.http-target-group { flex: 1 1 auto; max-width: none; margin: 0; }
.http-target-group label { display: none; }
.http-target-group input { height: 44px; font-size: 13px; }
.http-action-buttons { display: flex; gap: 10px; flex: 0 0 auto; }

.http-action-buttons .btn-outline-primary { border-color: #4285ed; color: #4285ed; background: #fff; }
.http-action-buttons .btn-outline-primary:hover { background: #edf4ff; color: #326fce; }
.http-action-buttons #advanced-btn { display: inline-flex; align-items: center; gap: 5px; }
#advanced-btn .advanced-chevron { transition: transform .2s ease; }
#advanced-btn.is-open .advanced-chevron { transform: rotate(180deg); }
.http-action-buttons .btn-capture { background: #ffb34f; border-color: #ffb34f; color: #fff; }
.http-action-buttons .btn-capture:hover { background: #ed9d36; border-color: #ed9d36; color: #fff; }
.http-advanced-fields { margin-top: 12px; padding: 12px 14px; border-radius: 3px; background: #f1f4f8; color: #71808c; font-size: 11px; }
.http-advanced-fields[hidden] { display: none !important; }
.http-advanced-row { display: grid; grid-template-columns: 72px minmax(150px, 1fr) 72px minmax(150px, 1.5fr); align-items: center; gap: 8px; margin: 7px 0; }
.http-advanced-row label { color: #71808c; }
.http-advanced-row input, .http-advanced-row select { width: 100%; height: 31px; padding: 5px 8px; border: 1px solid #d5dfe7; border-radius: 2px; background: #fff; color: #64727e; font-size: 11px; }
.http-stage-summary { display: none !important; }
.http-result-area { margin-top: 12px; }
.http-results-table-wrap { margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.http-progress-meta { display: flex; align-items: center; gap: 4px; margin-left: auto; color: #768792; font-size: 10px; white-space: nowrap; }
.http-progress-meta strong { padding: 4px 7px; border-radius: 3px; background: #e7efff; color: #4285ed; font-size: 12px; font-weight: 500; }
.http-progress-meta em { color: #8b98a3; font-style: normal; }
.http-progress-track { display: inline-block; width: 100px; height: 8px; overflow: hidden; border-radius: 4px; background: #e9eef3; }
.http-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: #4285ed; transition: width .2s ease; }
.http-result-table { width: 100%; max-width: 100%; table-layout: fixed; min-width: 0; }
.http-result-table .col-node { width: 18%; }
.http-result-table .col-target { width: 24%; }
.http-result-table .col-status { width: 7%; }
.http-result-table .col-total { width: 9%; }
.http-result-table .col-phase { width: 34%; }
.http-result-table .col-head { width: 8%; }
.http-result-table th, .http-result-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.http-result-table th { height: 40px; font-size: 10px; }
.http-result-table td { height: 54px; font-size: 11px; }
.http-result-table th:last-child, .http-result-table td:last-child { overflow: visible; }
.http-result-table .http-status-code { color: #3f5360; font-variant-numeric: tabular-nums; }
.http-target-cell, .probe-target-cell { display: flex; min-width: 0; flex-direction: column; gap: 3px; line-height: 1.2; }
.http-target-cell strong, .probe-target-cell strong { overflow: hidden; color: #334e68; font-weight: 500; text-overflow: ellipsis; }
.http-target-cell span, .probe-target-cell span { overflow: hidden; color: #82909b; font-size: 10px; text-overflow: ellipsis; }
/* 超时/不可达时解析 IP 仍渲染，仅以次要（灰）样式弱化，保留可诊断性 */
.probe-target-cell strong.text-muted, .http-target-cell strong.text-muted { color: #9aa5ae; font-weight: 400; }
.http-total-time { color: #334e68; font-weight: 600; font-variant-numeric: tabular-nums; }
.http-phase-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.http-phase-grid span { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; background: #f5f7f9; border-radius: 3px; }
.http-phase-grid small { color: #82909b; font-size: 9px; font-weight: 400; }
.http-phase-grid b { overflow: hidden; max-width: 100%; color: #3f5360; font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .http-result-table .col-node { width: 20%; }
  .http-result-table .col-target { width: 25%; }
  .http-result-table .col-status { width: 8%; }
  .http-result-table .col-total { width: 10%; }
  .http-result-table .col-phase { width: 29%; }
  .http-result-table .col-head { width: 8%; }
  .http-result-table td { height: 74px; padding-inline: 3px; }
  .http-phase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .http-phase-grid span { padding: 2px 1px; }
}
.http-result-table .raw-result summary { color: #3978bd; cursor: pointer; }
.http-results-panel .ping-panel-heading { min-height: 50px; }
.http-head-details { position: relative; overflow: visible; white-space: normal; }
.http-head-details summary { color: #3978bd; cursor: pointer; list-style: none; }
.http-head-details summary::-webkit-details-marker { display: none; }
.http-head-details[open]::before { content: ""; position: fixed; z-index: 19; inset: 0; background: rgba(17, 35, 52, .28); }
.http-head-list { position: fixed; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, calc(100vw - 32px)); max-height: min(76vh, 680px); overflow: auto; padding: 0 14px 14px; background: #fff; border: 1px solid #d8e0e8; border-radius: 8px; box-shadow: 0 18px 55px rgba(20,40,60,.24); text-align: left; }
.http-head-list-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 0 -14px 10px; padding: 12px 14px; color: #243b53; background: #fff; border-bottom: 1px solid #e8eef3; }
.http-head-close { width: 28px; height: 28px; padding: 0; color: #52606d; background: transparent; border: 0; border-radius: 4px; font-size: 22px; line-height: 1; cursor: pointer; }
.http-head-close:hover { color: #102a43; background: #edf2f7; }
.http-head-hop { margin: 0 0 10px; }
.http-head-hop:last-child { margin-bottom: 0; }
.http-head-hop-title { padding: 5px 7px; color: #334e68; background: #f3f6f9; font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
.http-head-hop table { width: 100%; border-collapse: collapse; font-size: 11px; }
.http-head-hop th, .http-head-hop td { height: auto !important; padding: 4px 6px; border-bottom: 1px solid #edf1f4; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; vertical-align: top; }
.http-head-hop th { width: 34%; color: #52606d; text-align: left; }
.http-head-hop td { color: #243b53; overflow-wrap: anywhere; }

/* ============ 系统配置：分类卡片 + 编辑弹窗 ============ */
.config-summary { display: flex; align-items: center; gap: 8px; }
.config-summary-item { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; color: #6b7b88; background: #fff; border: 1px solid #e4eaef; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.config-summary-item b { color: #205fae; font-size: 13px; }

/* 数据库结构自检报告面板 */
.schema-report { margin-bottom: 16px; padding: 14px 18px; background: #fff; border: 1px solid #e5eaee; border-left: 3px solid #2d8cff; border-radius: 8px; }
.schema-report[hidden] { display: none !important; }
.schema-report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.schema-report-head b { color: #233541; font-size: 13px; }
.schema-report ul { margin: 0; padding-left: 18px; }
.schema-report li { margin-bottom: 3px; color: #6b7b88; font-size: 12px; line-height: 1.6; }
.schema-report li.is-ok { color: #2f9e6f; }
.schema-report li.is-error { color: #d9534f; }

.config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.config-card { display: flex; flex-direction: column; gap: 16px; padding: 22px; background: #fff; border: 1px solid #e5eaee; border-radius: 9px; box-shadow: 0 4px 14px rgba(33, 52, 67, .025); transition: border-color .18s, box-shadow .18s, transform .18s; }
.config-card:hover { border-color: #bcd8f7; box-shadow: 0 8px 22px rgba(33, 73, 111, .09); transform: translateY(-2px); }
.config-card-head { display: flex; align-items: flex-start; gap: 13px; }
.config-card-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 10px; font-size: 19px; line-height: 1; }
.config-card-title { min-width: 0; }
.config-card-title h3 { margin: 0 0 5px; color: #233541; font-size: 15px; font-weight: 650; }
.config-card-title p { margin: 0; color: #84929d; font-size: 12px; line-height: 1.55; }
.config-progress { height: 5px; overflow: hidden; background: #eef2f6; border-radius: 999px; }
.config-progress-bar { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3d95f5, #2d75bd); transition: width .3s ease; }
.config-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.config-card-meta { color: #8b98a4; font-size: 12px; }
.config-card-meta b { color: #205fae; }
.config-card-other .config-card-head { padding-bottom: 2px; }

.config-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; }
.config-modal[hidden] { display: none !important; }
.config-modal-mask { position: absolute; inset: 0; background: rgba(17, 35, 52, .45); }
.config-modal-dialog { position: relative; display: flex; flex-direction: column; width: min(680px, 100%); max-height: min(84vh, 760px); background: #fff; border-radius: 12px; box-shadow: 0 22px 60px rgba(16, 36, 56, .28); overflow: hidden; }
.config-modal-head { display: flex; align-items: flex-start; gap: 13px; padding: 20px 22px 16px; border-bottom: 1px solid #edf1f4; }
.config-modal-head > div { min-width: 0; flex: 1; }
.config-modal-head h3 { margin: 0 0 4px; color: #233541; font-size: 17px; font-weight: 650; }
.config-modal-head p { margin: 0; color: #84929d; font-size: 12px; line-height: 1.5; }
.config-modal-close { width: 28px; height: 28px; flex: 0 0 28px; padding: 0; color: #7b8a96; background: transparent; border: 0; border-radius: 6px; font-size: 21px; line-height: 1; cursor: pointer; }
.config-modal-close:hover { color: #22384c; background: #eef2f6; }

.config-modal-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; padding: 20px 22px; overflow: auto; }
.cfg-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cfg-field-textarea { grid-column: 1 / -1; }
.cfg-label { display: flex; align-items: baseline; gap: 6px; color: #35485a; font-size: 13px; font-weight: 600; }
.cfg-label em { color: #d9534f; font-style: normal; }
.cfg-unit { color: #9aa6b0; font-size: 11px; font-weight: 400; }
.cfg-input { width: 100%; min-height: 38px; padding: 8px 11px; color: #354957; background: #fff; border: 1px solid #dce5ea; border-radius: 7px; font: inherit; font-size: 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
.cfg-input:focus { border-color: #2d8cff; box-shadow: 0 0 0 3px rgba(45, 140, 255, .12); }
textarea.cfg-input { min-height: 96px; resize: vertical; line-height: 1.6; }
.cfg-remark { margin: 0; color: #93a0aa; font-size: 11px; line-height: 1.55; }

.cfg-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; cursor: pointer; user-select: none; }
.cfg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cfg-switch-track { position: relative; display: block; width: 44px; height: 24px; flex: 0 0 44px; background: #cfd9e0; border-radius: 999px; transition: background .18s; }
.cfg-switch-dot { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(16, 36, 56, .25); transition: transform .18s; }
.cfg-switch input:checked + .cfg-switch-track { background: #2d8cff; }
.cfg-switch input:checked + .cfg-switch-track .cfg-switch-dot { transform: translateX(20px); }
.cfg-switch-text { color: #6b7b88; font-size: 12px; }
.cfg-switch input:checked ~ .cfg-switch-text { color: #2d75bd; }

.config-modal-dialog-wide { width: min(880px, 100%); }

/* 其他配置：自定义配置项表格 */
.config-extra-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px; overflow: auto; }
.config-extra-row { display: grid; grid-template-columns: 1.1fr 1.4fr 92px 1.3fr 30px; align-items: center; gap: 8px; }
.config-extra-head { color: #93a0aa; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.config-extra-row .cfg-input { min-height: 34px; padding: 6px 9px; font-size: 12px; }
.config-extra-row input[readonly] { color: #6b7b88; background: #f6f8fa; cursor: default; }
.config-extra-remove { width: 28px; height: 28px; padding: 0; color: #a3b0ba; background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 17px; line-height: 1; cursor: pointer; }
.config-extra-remove:hover { color: #d9534f; background: #fdf1f1; border-color: #f6d9d9; }

.config-modal-test { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 22px 18px; }
.config-modal-test input { flex: 1 1 220px; min-width: 0; min-height: 36px; padding: 7px 11px; color: #354957; border: 1px solid #dce5ea; border-radius: 7px; font: inherit; font-size: 13px; outline: none; }
.config-modal-test input:focus { border-color: #2d8cff; }
.config-modal-test-hint { flex: 1 1 100%; color: #93a0aa; font-size: 11px; }

.config-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 22px; background: #fafcfd; border-top: 1px solid #edf1f4; }
.config-modal-status { flex: 1; min-width: 0; color: #93a0aa; font-size: 12px; }
.config-modal-status.is-ok { color: #2f9e6f; }
.config-modal-status.is-error { color: #d9534f; }

body.modal-open { overflow: hidden; }

@media (max-width: 820px) {
  .config-grid { grid-template-columns: 1fr; }
  .config-modal { padding: 12px; }
  .config-modal-body { grid-template-columns: 1fr; }
  .config-summary { flex-wrap: wrap; }
  .config-extra-row { grid-template-columns: 1fr 1fr 92px 30px; }
  .config-extra-head { display: none; }
  .config-extra-row input[data-extra-remark] { grid-column: 1 / -1; }
}

.dns-result-table { width: 100%; max-width: 100%; table-layout: fixed; min-width: 0; }
.dns-result-table th, .dns-result-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dns-result-table th { height: 40px; font-size: 10px; }
.dns-result-table td { font-size: 11px; }

@media (max-width: 900px) {
    .http-submit-row { flex-wrap: wrap; }
    .http-action-buttons { width: 100%; }
    .http-action-buttons .btn { flex: 1; min-width: 0; }
    .http-options-row { align-items: flex-start; flex-wrap: wrap; }
    .http-options-row .probe-dns-choice { width: 100%; margin-left: 0; }
    .http-advanced-row { grid-template-columns: 72px minmax(0, 1fr); }
    .http-advanced-row label:nth-of-type(2), .http-advanced-row label:nth-of-type(2) + input { grid-column: auto; }
}

/* ========== 截图（前端长图） ========== */
/* 截图等待遮罩 */
.capture-busy-mask { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(18, 32, 43, .45); backdrop-filter: blur(2px); }
.capture-busy-mask[hidden] { display: none; }
.capture-busy-box { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 10px; background: #fff; box-shadow: 0 12px 34px rgba(15, 34, 51, .28); color: #2c4453; font-size: 14px; }
.capture-busy-spinner { width: 16px; height: 16px; border: 2px solid #d5e3ec; border-top-color: #4A90D9; border-radius: 50%; animation: capture-spin .7s linear infinite; }
@keyframes capture-spin { to { transform: rotate(360deg); } }