/* ops/assets/app.css  —  batch 1 深色主题，零外部依赖（无 CDN、无 JS） */

:root {
    --bg:        #0f1319;
    --bg-2:      #131922;
    --panel:     #171d26;
    --panel-2:   #1c232e;
    --line:      #242c38;
    --line-2:    #2e3846;
    --txt:       #dce4ef;
    --txt-2:     #9aa8ba;
    --txt-3:     #6b7a8d;
    --accent:    #4ea1ff;
    --ok:        #3ecf8e;
    --idle:      #e8b84b;
    --dead:      #ef6a6a;
    --warn-bg:   rgba(232, 184, 75, .10);
    --err-bg:    rgba(239, 106, 106, .10);
    --info-bg:   rgba(78, 161, 255, .10);
    --radius:    10px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--txt);
    font: 14px/1.55 -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
    font-family: Consolas, "Cascadia Mono", monospace;
}

.wrap { width: min(1400px, 100% - 48px); margin: 0 auto; }
.main { padding: 22px 0 40px; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; }

/* ---------- 顶栏 ---------- */
.topbar {
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 58px;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: .02em;
}

.src {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid var(--line-2);
    color: var(--txt-2);
}
.src-demo { color: #1a1206; background: var(--idle); border-color: var(--idle); }
.src-db   { color: #04210f; background: var(--ok); border-color: var(--ok); }

.nav { display: flex; gap: 4px; }
.nav-item {
    color: var(--txt-2);
    padding: 7px 12px;
    border-radius: 8px;
    font-weight: 550;
}
.nav-item:hover { background: var(--panel-2); color: var(--txt); text-decoration: none; }
.nav-item.is-active { background: var(--panel-2); color: var(--txt); box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------- 横幅 ---------- */
.banner {
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--txt-2);
    line-height: 1.6;
}
.banner b { color: var(--txt); }
.banner-warn { background: var(--warn-bg); border-color: rgba(232, 184, 75, .35); }
.banner-err  { background: var(--err-bg);  border-color: rgba(239, 106, 106, .35); }
.banner-info { background: var(--info-bg); border-color: rgba(78, 161, 255, .30); }

/* ---------- 四卡 ---------- */
.cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    color: var(--txt);
    transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--line-2); transform: translateY(-1px); text-decoration: none; }
.card-k { color: var(--txt-2); font-size: 12.5px; letter-spacing: .02em; }
.card-v { font-size: 30px; line-height: 1.15; font-weight: 680; font-variant-numeric: tabular-nums; }
.card-sub { color: var(--txt-3); font-size: 11.5px; font-family: Consolas, monospace; }
.accent-ok { color: var(--ok); }

.under-cards { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; }

.chip {
    display: inline-block;
    font-size: 12.5px;
    color: var(--txt-2);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 4px 12px;
}
.chip:hover { border-color: var(--line-2); color: var(--txt); text-decoration: none; }
.chip-dead { color: var(--dead); border-color: rgba(239, 106, 106, .35); }

/* ---------- 面板 ---------- */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 16px;
}

.grid2 {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.panel-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.panel-h h2 { margin: 0; font-size: 14px; font-weight: 620; letter-spacing: .02em; }
.panel-note { color: var(--txt-3); font-size: 11px; font-family: Consolas, monospace; }

/* ---------- 柱状 ---------- */
.bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    height: 210px;
}
.bar-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%; }
.bar-num { text-align: center; font-size: 12px; color: var(--txt-2); font-variant-numeric: tabular-nums; }
.bar-track {
    flex: 1;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}
.bar-fill {
    width: 100%;
    background: linear-gradient(180deg, #4ea1ff, #2f6fbf);
    border-radius: 5px 5px 0 0;
    transition: height .25s ease;
}
.bar-fill.is-top { background: linear-gradient(180deg, #6fd3a5, #2f9e74); }
.bar-x { text-align: center; font-size: 11px; color: var(--txt-3); font-family: Consolas, monospace; }

/* ---------- 排行 ---------- */
.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rank li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.rank-i { width: 18px; color: var(--txt-3); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.rank-k { width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-track { flex: 1; height: 8px; background: var(--bg-2); border-radius: 6px; overflow: hidden; }
.rank-fill { display: block; height: 100%; background: linear-gradient(90deg, #3d7fd1, #4ea1ff); border-radius: 6px; }
.rank-v { width: 46px; text-align: right; color: var(--txt-2); font-variant-numeric: tabular-nums; }

/* ---------- 筛选 ---------- */
.filters {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.f-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.f-row + .f-row { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.f-item { display: flex; flex-direction: column; gap: 5px; min-width: 140px; }
.f-item > span { color: var(--txt-3); font-size: 11.5px; }
.f-grow { flex: 1 1 240px; }
.f-narrow { min-width: 118px; flex: 0 0 auto; }
.f-actions { display: flex; gap: 8px; margin-left: auto; }

input, select {
    background: var(--bg-2);
    color: var(--txt);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    padding: 7px 10px;
    font: inherit;
    min-width: 0;
}
input::placeholder { color: var(--txt-3); }
input:focus, select:focus { outline: 2px solid rgba(78, 161, 255, .35); outline-offset: 1px; border-color: var(--accent); }
input[type="search"] { -webkit-appearance: none; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--panel-2);
    color: var(--txt);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    padding: 7px 14px;
    font: inherit;
    font-weight: 550;
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover { border-color: #3c4859; text-decoration: none; }
.btn-primary { background: #1f6fd0; border-color: #2a80e6; color: #fff; }
.btn-primary:hover { background: #2a80e6; }
.btn-ghost { background: transparent; }
.btn.is-disabled { opacity: .38; cursor: not-allowed; }
.btn.is-current { cursor: default; }

/* ---------- 列表头 ---------- */
.list-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--txt-2);
    font-size: 12.5px;
}
.list-sum b { color: var(--txt); font-variant-numeric: tabular-nums; }
.tag {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    color: var(--accent);
    border: 1px solid rgba(78, 161, 255, .4);
    border-radius: 20px;
    padding: 1px 8px;
}
.list-legend { display: flex; align-items: center; gap: 6px; color: var(--txt-3); }

/* ---------- 状态点 ---------- */
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: 1px;
    background: var(--txt-3);
}
.dot.ok   { background: var(--ok);   box-shadow: 0 0 0 3px rgba(62, 207, 142, .16); }
.dot.idle { background: var(--idle); box-shadow: 0 0 0 3px rgba(232, 184, 75, .14); }
.dot.dead { background: var(--dead); box-shadow: 0 0 0 3px rgba(239, 106, 106, .14); }

/* ---------- 表格 ---------- */
.table-wrap {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow-x: auto;
}
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.tbl thead th {
    text-align: left;
    font-weight: 560;
    font-size: 11.5px;
    letter-spacing: .04em;
    color: var(--txt-3);
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    padding: 9px 12px;
    white-space: nowrap;
}
.tbl tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: rgba(255, 255, 255, .022); }

.tbl th:nth-child(2), .tbl td:nth-child(2) { width: 190px; }
.tbl th:nth-child(3), .tbl td:nth-child(3) { width: 130px; }
.tbl th:nth-child(5), .tbl td:nth-child(5) { width: 150px; }
.tbl th:nth-child(7), .tbl td:nth-child(7) { width: 96px; }

.c-st { white-space: nowrap; }
.c-uid, .c-ver, .c-time, .c-rel, .c-op { white-space: nowrap; }
.st-txt { color: var(--txt-2); font-size: 12.5px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.null { color: var(--txt-3); }

.pill {
    display: inline-block;
    font-size: 11.5px;
    border-radius: 20px;
    padding: 2px 9px;
    border: 1px solid var(--line-2);
    color: var(--txt-3);
}
.pill-off { opacity: .85; }

/* ---------- 分页 ---------- */
.pager {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.pager-hint { margin-left: auto; color: var(--txt-3); font-size: 11px; }

/* ---------- 空态 ---------- */
.empty { color: var(--txt-3); font-size: 13px; margin: 6px 0; }
.empty-box {
    background: var(--panel);
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    padding: 46px 20px;
    text-align: center;
    color: var(--txt-2);
}
.empty-big { font-size: 15px; color: var(--txt); margin: 0 0 8px; }

/* ---------- 页脚 ---------- */
.foot {
    border-top: 1px solid var(--line);
    padding: 14px 0 26px;
    color: var(--txt-3);
    font-size: 11.5px;
    font-family: Consolas, monospace;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid2 { grid-template-columns: minmax(0, 1fr); }
    .tbl { table-layout: auto; }
    .tbl th:nth-child(n), .tbl td:nth-child(n) { width: auto; }
}

@media (max-width: 720px) {
    .wrap { width: calc(100% - 24px); }
    .cards { grid-template-columns: minmax(0, 1fr); }
    .card-v { font-size: 26px; }
    .topbar-inner { height: 52px; }
    .f-actions { margin-left: 0; width: 100%; }
    .pager-hint { display: none; }
    .bars { height: 170px; gap: 6px; }
}

/* =====================================================================
   batch 2：设备详情页
   ===================================================================== */

.detail-top { margin-bottom: 12px; }
.back { color: var(--txt-2); font-size: 13px; }
.back:hover { color: var(--txt); }

.detail {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 16px;
}

.detail-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.detail-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-title h1 { margin: 0; font-size: 17px; font-weight: 640; letter-spacing: .01em; }
.detail-id { color: var(--txt-3); font-size: 12px; }

.st-badge {
    font-size: 11.5px;
    border-radius: 20px;
    padding: 2px 10px;
    border: 1px solid var(--line-2);
    color: var(--txt-2);
}
.st-badge.ok   { color: var(--ok);   border-color: rgba(62, 207, 142, .40); background: rgba(62, 207, 142, .08); }
.st-badge.idle { color: var(--idle); border-color: rgba(232, 184, 75, .40); background: rgba(232, 184, 75, .08); }
.st-badge.dead { color: var(--dead); border-color: rgba(239, 106, 106, .40); background: rgba(239, 106, 106, .08); }

.kv {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 0;
}
.kv > div { min-width: 0; }
.kv dt { color: var(--txt-3); font-size: 11.5px; margin-bottom: 2px; }
.kv dd { margin: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--txt-3); }

/* tabs */
.tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
}
.tab {
    color: var(--txt-2);
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 550;
}
.tab:hover { background: var(--panel-2); color: var(--txt); text-decoration: none; }
.tab.is-active { background: var(--panel-2); color: var(--txt); border-color: var(--line-2); box-shadow: inset 0 -2px 0 var(--accent); }

.win-form { margin-left: auto; }
.win-label { display: flex; align-items: center; gap: 8px; color: var(--txt-3); font-size: 11.5px; }
.win-label select { padding: 4px 8px; font-size: 12px; }

.tab-meta {
    color: var(--txt-3);
    font-size: 11.5px;
    margin-bottom: 12px;
    font-family: Consolas, monospace;
}
.tab-meta b { color: var(--txt); }

/* 消息列表 */
.msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.msg {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
}
.msg-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.msg-t { color: var(--txt-3); }
.msg-a { color: var(--accent); }
.msg-n { color: var(--txt-2); font-size: 12.5px; }
.msg-tag {
    font-size: 11px;
    color: var(--txt-3);
    border: 1px solid var(--line-2);
    border-radius: 20px;
    padding: 1px 8px;
}
.msg-b {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font: 12.5px/1.6 Consolas, "Cascadia Mono", monospace;
    color: var(--txt);
    max-height: 320px;
    overflow: auto;
}

.more-hint { color: var(--txt-3); font-size: 11.5px; margin: 12px 0 0; }
.empty-box.small { padding: 26px 18px; }

@media (max-width: 1100px) {
    .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .kv { grid-template-columns: minmax(0, 1fr); }
    .win-form { margin-left: 0; }
}
.pill-link { color: var(--accent); border-color: rgba(78, 161, 255, .45); }
.pill-link:hover { background: rgba(78, 161, 255, .12); text-decoration: none; }

/* =====================================================================
   batch 3：登录页 / 顶栏用户区
   ===================================================================== */

.auth-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 0;
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(78, 161, 255, .10), transparent 60%),
        radial-gradient(900px 500px at 90% 110%, rgba(62, 207, 142, .07), transparent 60%),
        var(--bg);
}
.auth-wrap { width: min(430px, calc(100% - 32px)); }
.auth-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 24px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.auth-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; }
.auth-sub { margin: -4px 0 2px; color: var(--txt-3); font-size: 12.5px; }
.auth-err {
    background: var(--err-bg);
    border: 1px solid rgba(239, 106, 106, .35);
    color: var(--dead);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { color: var(--txt-3); font-size: 12px; }
.field input { padding: 10px 12px; font-size: 14px; }
.btn-block { width: 100%; padding: 10px; margin-top: 2px; font-size: 14px; }
.auth-foot {
    margin: 2px 0 0;
    color: var(--txt-3);
    font-size: 11px;
    font-family: Consolas, monospace;
    text-align: center;
    line-height: 1.6;
}
.auth-bottom { margin: 22px 0 0; color: var(--txt-3); font-size: 11px; font-family: Consolas, monospace; }

.topright { display: flex; align-items: center; gap: 10px; }
.who { color: var(--txt-2); font-size: 12.5px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* =====================================================================
   batch 4：指令队列 / 详情页动作区 / 文本域
   ===================================================================== */

.detail-actions { margin-left: auto; }

.queue-form .f-row + .f-row { border-top: 0; padding-top: 0; margin-top: 10px; }
textarea {
    background: var(--bg-2);
    color: var(--txt);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    padding: 8px 10px;
    font: 13px/1.6 Consolas, "Cascadia Mono", monospace;
    resize: vertical;
    width: 100%;
}
textarea:focus { outline: 2px solid rgba(78, 161, 255, .35); outline-offset: 1px; border-color: var(--accent); }

.tbl-queue th:nth-child(2), .tbl-queue td:nth-child(2) { width: 260px; }
.tbl-queue th:nth-child(3), .tbl-queue td:nth-child(3) { width: 280px; }
.tbl-queue th:nth-child(5), .tbl-queue td:nth-child(5) { width: 150px; }
.tbl-queue th:nth-child(6), .tbl-queue td:nth-child(6) { width: 168px; }
.c-qid { width: 64px; }

.inline-form { display: inline-flex; gap: 6px; }
.pill-done { color: var(--ok); border-color: rgba(62, 207, 142, .45); }
.queue-note { color: var(--txt-3); font-size: 11.5px; line-height: 1.7; margin: 4px 0 0; }

/* =====================================================================
   batch 5：实时连接
   ===================================================================== */

.live-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.live-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; flex: 1 1 520px; }
.live-meta { color: var(--txt-3); font-size: 11.5px; display: flex; align-items: center; gap: 8px; }

.tbl-live th:nth-child(2), .tbl-live td:nth-child(2) { width: 170px; }
.tbl-live th:nth-child(3), .tbl-live td:nth-child(3) { width: 220px; }
.tbl-live th:nth-child(5), .tbl-live td:nth-child(5) { width: 170px; }
.live-empty { color: var(--txt-3); text-align: center; padding: 22px 0 !important; }

.chip-live { color: var(--ok); border-color: rgba(62, 207, 142, .40); }
.chip-live:hover { color: var(--ok); border-color: rgba(62, 207, 142, .65); }

@media (max-width: 900px) {
    .live-cards { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* =====================================================================
   batch 6：设备墙
   ===================================================================== */

.wall-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.wall-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.wall-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--panel);
    color: var(--txt-2); font-size: 13px;
}
.wall-tab b { color: var(--txt); font-variant-numeric: tabular-nums; }
.wall-tab:hover { border-color: var(--line-2); color: var(--txt); text-decoration: none; }
.wall-tab.is-active { background: var(--panel-2); color: var(--txt); box-shadow: inset 0 -2px 0 var(--accent); }
.wall-tab.is-disabled { opacity: .45; cursor: not-allowed; }
.wall-search { display: flex; gap: 8px; align-items: center; }
.wall-search input { width: 240px; }

.wall-note { color: var(--txt-3); font-size: 11.5px; margin: 0 0 14px; }
.wall-note b { color: var(--txt-2); }

.wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.dcard {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 14px 12px;
    min-width: 0;
}
.dcard.is-online { border-color: rgba(62, 207, 142, .28); }
.dcard-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dcard-model { margin: 0; font-size: 13.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcard-ip { margin-left: auto; color: var(--txt-3); font-size: 11.5px; }

.dcard-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.dtag {
    font-size: 10.5px; line-height: 1;
    padding: 4px 7px; border-radius: 5px;
    border: 1px solid var(--line-2); color: var(--txt-3);
}
.dtag.on { color: var(--ok); border-color: rgba(62, 207, 142, .40); background: rgba(62, 207, 142, .08); }
.dtag.off { color: var(--idle); border-color: rgba(232, 184, 75, .35); }
.dtag.dev { color: var(--txt-3); border-style: dashed; }

.dcard-kv { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.dcard-kv > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dcard-kv dt { flex: 0 0 74px; color: var(--txt-3); font-size: 11.5px; }
.dcard-kv dd { margin: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcard-kv dd.undev { color: var(--txt-3); font-style: italic; }

.dcard-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 11.5px; }

@media (max-width: 1400px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .wall { grid-template-columns: minmax(0, 1fr); } .wall-search input { width: 100%; } }

/* =====================================================================
   batch 9：设备详情（锁屏 / 权限 / 应用）
   ===================================================================== */

.kv-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.perm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; }
.perm-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.perm-k { color: var(--txt-2); font-size: 12.5px; }

.tbl-apps th:nth-child(1), .tbl-apps td:nth-child(1) { width: 28%; }
.tbl-apps th:nth-child(2), .tbl-apps td:nth-child(2) { width: 88px; }
.tbl-apps th:nth-child(4), .tbl-apps td:nth-child(4) { width: 230px; }

@media (max-width: 1100px) {
  .perm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .perm-list { grid-template-columns: minmax(0, 1fr); }
  .kv-3 { grid-template-columns: minmax(0, 1fr); }
}

/* batch 12：活动记录 */
.date-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.date-nav input[type="date"] { padding: 5px 8px; font-size: 13px; }
.tbl-act th:nth-child(2), .tbl-act td:nth-child(2) { width: 240px; }
.tbl-act th:nth-child(3), .tbl-act td:nth-child(3) { width: 130px; }

/* =====================================================================
   batch 13：壳布局（左侧导航 + 顶部工具栏 + 四列卡片）
   ===================================================================== */

body.shell { display: flex; min-height: 100vh; }

.side {
    flex: 0 0 190px;
    background: var(--bg-2);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 14px 10px;
    gap: 14px;
    position: sticky;
    top: 0;
    height: 100vh;
}
.side-brand { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 8px;
    color: var(--txt-2); font-size: 13px;
}
.side-item i { font-style: normal; color: var(--txt-3); width: 14px; text-align: center; }
.side-item:hover { background: var(--panel-2); color: var(--txt); text-decoration: none; }
.side-item.is-active { background: var(--panel-2); color: var(--txt); box-shadow: inset 2px 0 0 var(--accent); }
.side-item.is-off { opacity: .42; cursor: not-allowed; }
.side-sep { color: var(--txt-3); font-size: 11px; padding: 12px 10px 4px; }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid var(--line); }

.main2 { flex: 1 1 auto; min-width: 0; padding: 18px 22px 40px; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.tb-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tb-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--panel);
    color: var(--txt-2); font-size: 12.5px;
}
.tb-tab b { color: var(--txt); font-variant-numeric: tabular-nums; }
.tb-tab:hover { border-color: var(--line-2); color: var(--txt); text-decoration: none; }
.tb-tab.is-active { background: #1f6fd0; border-color: #2a80e6; color: #fff; }
.tb-tab.is-active b { color: #fff; }
.tb-tab.is-disabled { opacity: .45; cursor: not-allowed; }

.tb-search { display: flex; gap: 8px; align-items: center; }
.tb-search input { width: 280px; }

.filters-compact { padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filters-compact .f-item { min-width: 108px; }
.filters-compact .f-actions { margin-left: auto; }

.wall-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dcard-ops { display: flex; gap: 4px; }
.dcard-ops .op {
    width: 24px; height: 22px; line-height: 22px; text-align: center;
    border: 1px solid var(--line); border-radius: 6px;
    color: var(--txt-2); font-size: 12px;
}
.dcard-ops .op:hover { border-color: var(--line-2); color: var(--txt); text-decoration: none; }
.dcard-ops .op.is-off { opacity: .38; cursor: not-allowed; }

.dcard-power { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--txt-2); }
.dcard-power b { color: var(--txt); font-variant-numeric: tabular-nums; }

.dcard-tag { display: flex; gap: 6px; margin-top: 2px; }
.dcard-tag input { flex: 1 1 auto; min-width: 0; padding: 5px 8px; font-size: 12px; }

@media (max-width: 1500px) { .wall-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1150px) {
    .wall-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.shell { flex-direction: column; }
    .side { flex: none; height: auto; position: static; width: 100%; }
    .side-nav { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 700px) { .wall-4 { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   batch 15：过渡与质感（淡入 / 骨架屏 / 悬停 / 滚动条）
   ===================================================================== */

#view { min-height: 62vh; }

@keyframes opsViewIn {
    from { opacity: 0; transform: translateY(8px) scale(.998); }
    to   { opacity: 1; transform: none; }
}
#view.view-in > * { animation: opsViewIn .26s cubic-bezier(.22, .61, .36, 1) both; }
#view.view-in > *:nth-child(2) { animation-delay: .03s; }
#view.view-in > *:nth-child(3) { animation-delay: .06s; }
#view.view-in > *:nth-child(4) { animation-delay: .09s; }

/* 骨架屏 */
@keyframes opsShimmer {
    0%   { background-position: -420px 0; }
    100% { background-position: 420px 0; }
}
.skel-panel, .skel-wall {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
}
.skel-panel { display: flex; flex-direction: column; gap: 12px; }
.skel-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; border: 0; background: none; padding: 0; }
.skel-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.skel-row, .skel-line {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,.045) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.045) 63%);
    background-size: 420px 100%;
    animation: opsShimmer 1.15s linear infinite;
}
.skel-line { height: 11px; }
.skel-line.w30 { width: 30%; }
.skel-line.w40 { width: 40%; }
.skel-line.w60 { width: 60%; }
.skel-line.w80 { width: 80%; }

/* 卡片：悬停更细腻 */
.dcard { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease; }
.dcard:hover {
    border-color: rgba(78, 161, 255, .34);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgba(78,161,255,.045), transparent 42%), var(--panel);
}

/* 侧栏：滑动指示条 + 过渡 */
.side-item {
    position: relative;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.side-item:active { transform: scale(.985); }
.side-item.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 3px; border-radius: 3px;
    background: var(--accent);
    animation: opsBar .22s ease both;
}
@keyframes opsBar { from { transform: scaleY(.2); opacity: 0; } to { transform: none; opacity: 1; } }

/* 顶部标签 / 按钮：过渡 */
.tb-tab, .btn, .chip, .op { transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease; }
.btn:active, .tb-tab:active { transform: translateY(1px); }
.btn-primary { box-shadow: 0 6px 16px rgba(31, 111, 208, .28); }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(31, 111, 208, .38); }

/* 表格行悬停 */
.tbl tbody tr { transition: background .14s ease; }

/* 细滚动条 */
* { scrollbar-width: thin; scrollbar-color: #2e3846 transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #2a3441; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3a4657; }
::-webkit-scrollbar-track { background: transparent; }

/* 工具栏吸顶，滚动时不飘 */
.toolbar { position: sticky; top: 0; z-index: 6; padding: 8px 0; background: linear-gradient(var(--bg) 70%, rgba(15,19,25,.65)); backdrop-filter: blur(6px); }

/* 面板/详情入场 */
.panel, .detail, .card { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.panel:hover, .detail:hover { border-color: var(--line-2); }

@media (prefers-reduced-motion: reduce) {
    #view.view-in > *, .skel-row, .skel-line, .side-item.is-active::before { animation: none !important; }
}

/* =====================================================================
   batch 16：原生 View Transitions
   ===================================================================== */

/* 让侧栏和内容各自成为一个"命名快照"，转场时侧栏保持不动 */
.side { view-transition-name: ops-side; }
#view { view-transition-name: ops-content; }

::view-transition-old(ops-side),
::view-transition-new(ops-side) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(ops-content) {
    animation: opsVtOut .16s ease both;
}
::view-transition-new(ops-content) {
    animation: opsVtIn .26s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes opsVtOut {
    to { opacity: 0; transform: translateY(-6px); }
}
@keyframes opsVtIn {
    from { opacity: 0; transform: translateY(10px); }
}

/* 顶部状态条之类不该跟着晃的元素，也固定住 */
.topbar { view-transition-name: ops-top; }
::view-transition-old(ops-top),
::view-transition-new(ops-top) { animation: none; }

/* 详情页标题做成"共享元素"（列表里没有同名元素时退化为普通转场） */
.detail-title h1 { view-transition-name: ops-title; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(ops-content),
    ::view-transition-new(ops-content) { animation: none !important; }
}

/* =====================================================================
   batch 17：高级感（深色 / 苹果式克制 / 自适应列数）
   纯样式层，不改任何数据与接口
   ===================================================================== */

:root {
    --bg:        #0a0a0c;
    --bg-2:      #0f0f12;
    --panel:     #16161a;
    --panel-2:   #1e1e23;
    --line:      rgba(255, 255, 255, .065);
    --line-2:    rgba(255, 255, 255, .12);
    --txt:       #f5f5f7;
    --txt-2:     #a6a6ae;
    --txt-3:     #70707a;
    --accent:    #0a84ff;
    --ok:        #30d158;
    --idle:      #ffd60a;
    --dead:      #ff453a;
    --radius:    16px;
    --radius-sm: 11px;
    --shadow-1:  0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2:  0 14px 40px rgba(0, 0, 0, .42);
    --hair:      1px solid rgba(255, 255, 255, .065);
}

body, input, select, textarea, button {
    font-family: -apple-system, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI",
                 Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    letter-spacing: -.005em;
}

body {
    background:
        radial-gradient(1100px 520px at 12% -8%, rgba(10, 132, 255, .10), transparent 62%),
        radial-gradient(900px 480px at 96% 4%, rgba(48, 209, 88, .05), transparent 60%),
        var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---- 字号层级：少而稳 ---- */
h1, .detail-title h1 { font-size: 22px; font-weight: 600; letter-spacing: -.022em; }
h2, .panel-h h2 { font-size: 14.5px; font-weight: 590; letter-spacing: -.012em; }
.card-v { font-size: 32px; font-weight: 620; letter-spacing: -.03em; }
.card-k, .panel-note, .f-item > span, .field > span { letter-spacing: .02em; }
.mono, .c-time, .c-ver, .c-uid, .c-qid, .dcard-ip, .btn { font-variant-numeric: tabular-nums; }
.card-v, .rank-v, .tb-tab b, .dcard-power b, .live-meta, .tag { font-variant-numeric: tabular-nums; }

/* ---- 材质与层次：去描边，用阴影和留白分组 ---- */
.panel, .detail, .card, .filters, .empty-box, .table-wrap, .bsk-panel {
    border: var(--hair);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 42%), var(--panel);
    box-shadow: var(--shadow-1), 0 10px 30px rgba(0, 0, 0, .28);
}
.panel { padding: 18px 20px; }

/* 侧栏：半透明毛玻璃，主要靠它出气质 */
.side {
    background: rgba(16, 16, 19, .74);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
    backdrop-filter: blur(20px) saturate(1.35);
    border-right: var(--hair);
    padding: 16px 12px;
}
.side-brand { font-size: 15.5px; font-weight: 620; letter-spacing: -.01em; padding: 4px 10px 8px; }
.side-item {
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    font-size: 13px;
    color: var(--txt-2);
}
.side-item:hover { background: rgba(255, 255, 255, .06); color: var(--txt); }
.side-item.is-active {
    background: rgba(255, 255, 255, .10);
    color: #fff;
    box-shadow: none;
}
.side-item.is-active::before {
    width: 3px; border-radius: 3px; background: var(--accent);
    box-shadow: 0 0 12px rgba(10, 132, 255, .8);
}
.side-sep { letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }

/* ---- 分段控件（iOS 风格胶囊）---- */
.tb-tabs {
    background: rgba(255, 255, 255, .055);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.tb-tab {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    color: var(--txt-2);
    transition: background .18s ease, color .18s ease, transform .12s ease;
}
.tb-tab:hover { background: rgba(255, 255, 255, .06); color: var(--txt); }
.tb-tab.is-active {
    background: #fff;
    color: #111;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.tb-tab.is-active b { color: #111; }
.tb-tab.is-disabled { opacity: .38; background: transparent; }

/* ---- 按钮 ---- */
.btn {
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .07);
    padding: 7px 13px;
    font-weight: 500;
}
.btn:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .16); }
.btn:active { transform: scale(.975); }
.btn-primary {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(10, 132, 255, .30);
}
.btn-primary:hover { background: #2a95ff; box-shadow: 0 8px 22px rgba(10, 132, 255, .40); }
.btn-sm { padding: 4px 10px; border-radius: 9px; font-size: 12px; }

/* ---- 卡片：自动列数 + 呼吸感 ---- */
.wall, .wall-4 {
    grid-template-columns: repeat(auto-fill, minmax(318px, 1fr));
    gap: 16px;
}
.dcard {
    border: var(--hair);
    border-radius: var(--radius);
    padding: 16px 16px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 46%), var(--panel);
    box-shadow: var(--shadow-1), 0 10px 26px rgba(0, 0, 0, .26);
}
.dcard.is-online { border-color: rgba(48, 209, 88, .22); }
.dcard:hover {
    border-color: rgba(10, 132, 255, .30);
    box-shadow: var(--shadow-1), 0 18px 40px rgba(0, 0, 0, .45);
    transform: translateY(-2px);
}
.dcard-model { font-size: 14.5px; font-weight: 590; letter-spacing: -.012em; }

.dcard-tags { gap: 6px; }
.dtag {
    border-radius: 7px;
    padding: 4px 8px;
    font-size: 10.5px;
    letter-spacing: .01em;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
    color: var(--txt-2);
}
.dtag.on { background: rgba(48, 209, 88, .13); border-color: rgba(48, 209, 88, .32); color: #6ee79a; }
.dtag.off { background: rgba(255, 214, 10, .10); border-color: rgba(255, 214, 10, .28); color: #ffdf6b; }
.dtag.dev { background: transparent; border-style: dashed; border-color: rgba(255, 255, 255, .12); color: rgba(245, 245, 247, .34); }

/* 未开发：安静地存在，不抢戏 */
.undev {
    color: rgba(245, 245, 247, .26);
    font-style: normal;
    font-size: 11.5px;
    letter-spacing: .02em;
}

/* 字段表：发丝线分隔，去掉满屏线条 */
.dcard-kv { gap: 0; }
.dcard-kv > div {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .045);
}
.dcard-kv > div:last-child { border-bottom: 0; }
.dcard-kv dt { flex: 0 0 76px; font-size: 11.5px; color: var(--txt-3); letter-spacing: .02em; }
.dcard-kv dd { font-size: 12.5px; color: var(--txt); }

.dcard-power { padding: 2px 0 4px; }
.dcard-power b { font-weight: 600; }

.dcard-tag input {
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 9px;
}

/* ---- 吸顶工具栏：模糊 + 渐隐 ---- */
.toolbar {
    background: linear-gradient(rgba(10, 10, 12, .88) 62%, rgba(10, 10, 12, 0));
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    padding: 10px 0 14px;
    border-bottom: 1px solid transparent;
}

/* ---- 表格 ---- */
.tbl thead th {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--txt-3);
}
.tbl tbody td { border-bottom: 1px solid rgba(255, 255, 255, .045); }
.tbl tbody tr:hover { background: rgba(255, 255, 255, .035); }
.table-wrap { overflow: hidden; }
.tbl { background: transparent; }

/* ---- 输入 ---- */
input, select, textarea {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: rgba(10, 132, 255, .65);
    box-shadow: 0 0 0 3.5px rgba(10, 132, 255, .16);
    background: rgba(255, 255, 255, .07);
}
:focus-visible { outline: 2px solid rgba(10, 132, 255, .55); outline-offset: 2px; }

/* ---- 首页数字卡 ---- */
.cards { gap: 16px; }
.card { padding: 18px 20px; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1), 0 18px 40px rgba(0, 0, 0, .45); }
.chip {
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .08);
    padding: 5px 13px;
}

/* ---- 排行榜 / 柱状 ---- */
.rank-fill { background: linear-gradient(90deg, #0a84ff, #64b5ff); }
.bar-fill { background: linear-gradient(180deg, #4ea1ff, #0a84ff); }
.bar-fill.is-top { background: linear-gradient(180deg, #6ee79a, #30d158); }
.bar-track { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .06); }

/* ---- 空状态 ---- */
.empty-box { padding: 54px 20px; border-style: dashed; }
.empty-big { font-size: 15px; letter-spacing: -.01em; color: var(--txt); }

/* ---- 滚动条（更细更暗）---- */
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .2); }

/* ---- 转场：更短的位移，更长的淡出 ---- */
@keyframes opsVtIn {
    from { opacity: 0; transform: translateY(8px) scale(.996); }
}
::view-transition-new(ops-content) { animation: opsVtIn .3s cubic-bezier(.22, .9, .25, 1) both; }
::view-transition-old(ops-content) { animation: opsVtOut .12s ease both; }

/* =====================================================================
   batch 18：分段控件胶囊滑动 + 结果区软更新
   ===================================================================== */

.tb-tabs {
    position: relative;
    isolation: isolate;
}
.tb-pill {
    position: absolute;
    left: 0;
    top: 3px;
    height: calc(100% - 6px);
    width: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition:
        transform .34s cubic-bezier(.25, .9, .25, 1),
        width .34s cubic-bezier(.25, .9, .25, 1),
        opacity .18s ease;
    will-change: transform, width;
}
.tb-tabs .tb-tab {
    position: relative;
    z-index: 1;
    background: transparent;
    border: 0;
    transition: color .2s ease;
}
.tb-tabs .tb-tab.is-active {
    background: transparent;
    box-shadow: none;
    color: #101012;
}
.tb-tabs .tb-tab.is-active b { color: #101012; }
.tb-tabs .tb-tab:not(.is-active):hover { color: var(--txt); }

/* 结果区软切换：换内容时轻微淡入，不掉高度 */
#wallResults { transition: opacity .18s ease; }
#wallResults.is-swapping { opacity: .35; }
#wallResults.is-swapped { animation: opsResultsIn .26s cubic-bezier(.22, .9, .25, 1) both; }

@keyframes opsResultsIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* 数字变化时给标签一点呼吸，显得在“更新”而不是“重画” */
.tb-tab b { transition: color .2s ease; }

@media (prefers-reduced-motion: reduce) {
    .tb-pill, #wallResults.is-swapped { transition: none !important; animation: none !important; }
}

/* =====================================================================
   batch 20：自绘下拉（替掉原生 select 的白底弹层）+ 通用滑块
   ===================================================================== */

.csel { position: relative; }

.csel-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 118px;
    padding: 7px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    color: var(--txt);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.csel-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.csel-btn:active { transform: scale(.99); }

.csel.is-open .csel-btn {
    border-color: rgba(10, 132, 255, .62);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, .15);
}

.csel-arrow {
    font-style: normal;
    color: var(--txt-3);
    font-size: 10px;
    transition: transform .22s cubic-bezier(.22, .9, .25, 1);
}
.csel.is-open .csel-arrow { transform: rotate(180deg); color: var(--accent); }

.csel-pop {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    padding: 6px;
    border-radius: 12px;
    background: rgba(30, 30, 34, .96);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
    backdrop-filter: blur(20px) saturate(1.35);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .58), 0 1px 0 rgba(255, 255, 255, .04) inset;
    opacity: 0;
    transform: translateY(-6px) scale(.985);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity .16s ease, transform .22s cubic-bezier(.22, .9, .25, 1);
}
.csel.is-open .csel-pop {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.csel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--txt-2);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.csel-item:hover { background: rgba(255, 255, 255, .08); color: var(--txt); }
.csel-item i {
    font-style: normal;
    font-size: 11px;
    color: var(--accent);
    opacity: 0;
    transition: opacity .14s ease;
}
.csel-item.is-on { background: rgba(10, 132, 255, .16); color: #fff; }
.csel-item.is-on i { opacity: 1; }

/* 下拉里的分组标题（安卓版本很多时用得上，现在先留位） */
.csel-group { padding: 6px 10px 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); }

/* =====================================================================
   batch 21：滑块与结果区"统一手感"（设备墙 / 操作日志 完全一致）
   ===================================================================== */

/* 标签栏单行不换行，多了横向滚动，滑块永远在一条线上滑 */
.tb-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 标签不许被压缩：保持文字一行，超出的部分靠横向滚动 */
.tb-tabs .tb-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    word-break: keep-all;
}
.tb-tabs::-webkit-scrollbar { display: none; }

/* 胶囊：位置与尺寸都可动画；首帧由 placePill() 瞬置 */
.tb-pill {
    transition:
        transform .34s cubic-bezier(.25, .9, .25, 1),
        width .34s cubic-bezier(.25, .9, .25, 1),
        height .34s cubic-bezier(.25, .9, .25, 1),
        top .34s cubic-bezier(.25, .9, .25, 1),
        opacity .18s ease;
}

/* 结果区统一动效：设备墙/日志/以后所有列表页都用这一个类 */
.swap-in { animation: opsResultsIn .26s cubic-bezier(.22, .9, .25, 1) both; }

@keyframes opsResultsIn {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

/* 两页标签统一内边距，观感一致 */
#ltabs .tb-tab, #wtabs .tb-tab { padding: 6px 15px; }

/* =====================================================================
   batch 22：应用式布局——整页不滚，内容区自己滚（以后所有页面统一）
   ===================================================================== */

html, body.shell { height: 100%; }
body.shell { overflow: hidden; }

.side {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.main2 {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 20px 0;
}

/* 只有这一块能滚，工具栏、侧栏都固定 */
#view {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    padding-bottom: 28px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* 工具栏在内容区里吸顶 */
#view .toolbar { top: 0; }

/* 表格头吸顶（表多行时最实用）；不再让 table-wrap 自己滚，否则 sticky 失效 */
#view .table-wrap {
    overflow: visible;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    background: transparent;
    box-shadow: none;
}
#view .tbl thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #141418;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}
#view .panel { overflow: visible; }

/* 底部留白，滚到底不贴边 */
#view::after { content: ''; display: block; height: 8px; }

/* 窄屏：侧栏变横条，恢复普通页面滚动，避免手机上一屏看不了 */
@media (max-width: 1150px) {
    html, body.shell { height: auto; }
    body.shell { overflow: auto; }
    .side { height: auto; }
    .main2 { height: auto; overflow: visible; padding: 12px 14px 0; }
    #view { overflow: visible; }
    #view .tbl thead th { position: static; }
}

/* =====================================================================
   batch 23：结果区切换改成"柔和过渡"，不再从 0 透明度硬闪
   ===================================================================== */

/* 旧动效：从 opacity 0 开始 → 切换瞬间整块消失再淡回来，眼睛会刺一下 */
.swap-in {
    animation: opsSoftIn .18s ease-out both;
}

@keyframes opsSoftIn {
    from { opacity: .55; transform: translateY(3px); }
    to   { opacity: 1;   transform: none; }
}

/* 标签点下去到数据回来之间，结果区轻轻压暗，让"正在换"有个预期，而不是突然消失 */
#logResults, #wallResults { transition: opacity .12s ease; }
#logResults.is-swapping, #wallResults.is-swapping { opacity: .5; }

/* 日志表格换行时高度会跳，给个最小高度，眼睛不跟着上下晃 */
#logResults .panel, #wallResults { min-height: 240px; }

/* 尊重系统"减少动态效果" */
@media (prefers-reduced-motion: reduce) {
    .swap-in { animation: none !important; }
    #logResults, #wallResults { transition: none !important; }
}

/* =====================================================================
   batch 24：设备控制中心（按控制台截图搭的框架）
   ===================================================================== */

.cc-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cc-top-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-title { font-size: 17px; font-weight: 620; letter-spacing: -.015em; }

.cc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11.5px; color: var(--txt-2);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
}
.cc-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--txt-3); display: inline-block; }
.cc-chip.on { color: #6ee79a; border-color: rgba(48, 209, 88, .32); background: rgba(48, 209, 88, .10); }
.cc-chip.on i { background: var(--ok); box-shadow: 0 0 8px rgba(48, 209, 88, .8); }
.cc-chip.off { color: var(--txt-3); }
.cc-chip.off i { background: #55555e; }
.cc-chip.dev { color: rgba(245, 245, 247, .34); border-style: dashed; }
.cc-chip.dev i { background: transparent; border: 1px dashed rgba(255, 255, 255, .35); }

.cc-clocks { display: flex; gap: 16px; font-size: 11.5px; color: var(--txt-3); font-family: Consolas, monospace; }
.cc-clocks b { color: var(--txt-2); font-weight: 600; }

.cc-tabs { margin-bottom: 12px; }

.cc-info {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}
.cc-i {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    background: var(--panel);
    min-width: 0;
}
.cc-i span { color: var(--txt-3); font-size: 11.5px; white-space: nowrap; }
.cc-i b { color: var(--txt); font-size: 12.5px; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-i-lock b { color: #ffd60a; font-family: Consolas, monospace; }

.cc-grid {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(240px, 300px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.cc-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.cc-screen {
    background: var(--panel);
    border: var(--hair);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow-1), 0 10px 30px rgba(0, 0, 0, .28);
}
.cc-screen-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cc-screens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-shot {
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: #0f0f12;
    min-height: 260px;
    display: flex; flex-direction: column;
}
.cc-shot-h {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; font-size: 11.5px; color: var(--txt-3);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.cc-shot-b { flex: 1; display: grid; place-items: center; color: rgba(245, 245, 247, .22); font-size: 12px; }

.cc-input { display: flex; gap: 8px; margin-top: 10px; }
.cc-input input { flex: 1; }
.cc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }

.cc-panel {
    background: var(--panel);
    border: var(--hair);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow-1), 0 8px 24px rgba(0, 0, 0, .24);
}
.cc-panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cc-panel-h h3 { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--txt-2); }

.cc-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.ccbtn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 9px 8px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .045);
    color: var(--txt-2);
    font: inherit; font-size: 12px;
    cursor: not-allowed;
    transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.ccbtn .undev { font-size: 10px; letter-spacing: .04em; }
.ccbtn.g { border-color: rgba(48, 209, 88, .28); background: rgba(48, 209, 88, .08); color: #7ee0a4; }
.ccbtn.b { border-color: rgba(10, 132, 255, .30); background: rgba(10, 132, 255, .09); color: #7ab8ff; }
.ccbtn.r { border-color: rgba(255, 69, 58, .28); background: rgba(255, 69, 58, .08); color: #ff8a80; }

@media (max-width: 1400px) {
    .cc-grid { grid-template-columns: minmax(280px, 1fr) minmax(220px, .9fr); }
    .cc-tools { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
}
@media (max-width: 900px) {
    .cc-grid { grid-template-columns: minmax(0, 1fr); }
    .cc-screens { grid-template-columns: 1fr; }
    .cc-shot { min-height: 180px; }
}

/* =====================================================================
   batch 25：控制中心布局调整——画面为主，工具面板下沉
   ===================================================================== */

.cc-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    align-items: start;
}

/* 画面区放大 */
.cc-screens { gap: 12px; }
.cc-shot { min-height: 430px; }
.cc-shot-b { font-size: 13px; }

.cc-screen { padding: 16px; }
.cc-screen-bar .cc-chip.dev { font-size: 10.5px; }

/* 工具区下沉：横铺一行，自动换列 */
.cc-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.cc-tools .cc-panel { margin: 0; }

/* 屏幕控制面板按钮更宽松一点 */
.cc-control .cc-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1200px) {
    .cc-grid { grid-template-columns: minmax(0, 1fr); }
    .cc-shot { min-height: 300px; }
    .cc-control .cc-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .cc-screens { grid-template-columns: 1fr; }
    .cc-shot { min-height: 220px; }
    .cc-control .cc-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cc-tools { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   batch 26：控制中心可拖拽布局（左右调宽 / 上下调高）
   ===================================================================== */

.cc-grid {
    display: flex;
    align-items: stretch;
    gap: 0;
    grid-template-columns: none;
}

.cc-grid > .cc-screen { flex: 0 0 62%; max-width: 62%; min-width: 0; }
.cc-grid > .cc-control { flex: 1 1 auto; min-width: 240px; }

/* 左右拖动条 */
.cc-split-x {
    flex: 0 0 10px;
    cursor: col-resize;
    position: relative;
    border-radius: 6px;
    background: transparent;
    transition: background .16s ease;
}
.cc-split-x::after {
    content: '';
    position: absolute;
    left: 4px; top: 8px; bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .10);
    transition: background .16s ease, box-shadow .16s ease;
}
.cc-split-x:hover::after,
.cc-split-x.is-drag::after {
    background: rgba(10, 132, 255, .85);
    box-shadow: 0 0 10px rgba(10, 132, 255, .55);
}

/* 上下拖动条（画面高度） */
.cc-split-y {
    height: 12px;
    margin: 8px 0 6px;
    cursor: row-resize;
    position: relative;
    border-radius: 6px;
    transition: background .16s ease;
}
.cc-split-y::after {
    content: '';
    position: absolute;
    left: 28%; right: 28%; top: 5px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .10);
    transition: background .16s ease, box-shadow .16s ease;
}
.cc-split-y:hover::after,
.cc-split-y.is-drag::after {
    background: rgba(10, 132, 255, .85);
    box-shadow: 0 0 10px rgba(10, 132, 255, .55);
}

/* 画面高度由变量控制 */
.cc-screens { --shot-h: 430px; }
.cc-shot { min-height: var(--shot-h, 430px); }

/* 布局条 */
.cc-layoutbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 12px; margin-bottom: 12px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    font-size: 12px;
}
.cc-layoutbar b { color: var(--txt); font-variant-numeric: tabular-nums; }
.cc-split-hint { color: var(--txt-3); font-size: 11.5px; }
.cc-copyout { color: var(--ok); font-size: 11.5px; margin-left: auto; }

/* 拖拽时禁止选中文字 */
.cc-split-x.is-drag, .cc-split-y.is-drag { user-select: none; }

@media (max-width: 1200px) {
    .cc-grid { flex-direction: column; }
    .cc-grid > .cc-screen { flex: 1 1 auto; max-width: none; }
    .cc-split-x { display: none; }
}

/* =====================================================================
   batch 27：区块高度可拖 + 布局保存
   ===================================================================== */

.cc-panel { position: relative; }
.cc-panel.is-sized { overflow: hidden; display: flex; flex-direction: column; }
.cc-panel.is-sized .cc-panel-b { overflow: auto; flex: 1 1 auto; min-height: 0; }

/* 面板底部拖拽手柄 */
.cc-rz {
    position: absolute;
    left: 0; right: 0; bottom: -5px;
    height: 10px;
    cursor: row-resize;
    z-index: 5;
}
.cc-rz::after {
    content: '';
    position: absolute;
    left: 30%; right: 30%; top: 4px;
    height: 2px; border-radius: 2px;
    background: rgba(255, 255, 255, .08);
    transition: background .16s ease, box-shadow .16s ease, left .16s ease, right .16s ease;
}
.cc-rz:hover::after,
.cc-rz.is-drag::after {
    left: 18%; right: 18%;
    background: rgba(10, 132, 255, .85);
    box-shadow: 0 0 10px rgba(10, 132, 255, .55);
}

/* 拖拽中禁止选中 */
.cc-rz.is-drag, .cc-split-y.is-drag { user-select: none; }

/* 工具面板之间留出缝隙，手柄不至于压住下一张 */
.cc-tools { row-gap: 20px; }
.cc-control > .cc-panel + .cc-panel { margin-top: 16px; }

/* 布局条里的保存按钮更醒目 */
.cc-layoutbar .btn-primary { box-shadow: 0 4px 14px rgba(10, 132, 255, .28); }

/* =====================================================================
   batch 28：画面高度手柄（和其他面板一样拖底边）
   ===================================================================== */

/* 画面区底部的手柄，往下拖=画面变高 */
.cc-rz-shot {
    bottom: -6px;
    height: 12px;
    cursor: row-resize;
}
.cc-rz-shot::after {
    left: 24%; right: 24%;
    background: rgba(10, 132, 255, .45);
    box-shadow: 0 0 8px rgba(10, 132, 255, .25);
}
.cc-rz-shot:hover::after,
.cc-rz-shot.is-drag::after {
    left: 14%; right: 14%;
    background: rgba(10, 132, 255, .95);
    box-shadow: 0 0 12px rgba(10, 132, 255, .65);
}

/* 画面区给手柄留出空间，别被下一条压住 */
.cc-screen { padding-bottom: 20px; position: relative; }
.cc-control > .cc-panel:first-child { position: relative; }

/* 画面撑满面板宽度，拖动时能看到实时变化 */
.cc-screens { align-items: start; }
.cc-shot { transition: min-height .12s ease; }
.cc-rz-shot.is-drag ~ * { transition: none; }

/* 画面区：真图显示 */
.cc-shot-live { padding: 0; overflow: hidden; background: #000; }
.cc-live { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 8px; }

/* 画面控制条 */
.cc-screens-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.cc-screens-bar .f-item { flex: 0 0 auto; }
.cc-screens-bar .csel-btn { min-width: 140px; }

/* 投屏与控制功能已下线：隐藏相关区块与未开发标签 */
.cc-screen, .cc-control, .cc-tools, .tb-tab.is-disabled { display: none !important; }

/* 设备卡片：数据中心按钮（跟主题按钮同一套配色，仅比 .btn-sm 略大） */
.dcard-go {
    margin-left: 10px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 550;
    line-height: 1;
    color: var(--txt);
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
}
.dcard-go:hover, .dcard-go:focus { border-color: #3c4859; color: #fff; text-decoration: none; }
/* 设备卡片：电量条（替代 emoji） */
.dcard-power {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 9px 0 4px;
    min-height: 18px;
}
.bat {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 13px;
    border: 1px solid var(--line-2);
    border-radius: 4px;
    background: rgba(255,255,255,.04);
    overflow: hidden;
    flex: 0 0 auto;
}
.bat::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 3px;
    width: 2px;
    height: 6px;
    background: var(--line-2);
    border-radius: 0 1px 1px 0;
}
.bat > i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--ok);
    transition: width .35s ease;
}
.bat.is-mid > i { background: var(--idle); }
.bat.is-low > i { background: var(--dead); }
.bat.is-unknown > i { background: var(--line-2); }
.bat-num {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--txt);
    font-variant-numeric: tabular-nums;
}
/* 电量条：百分比刻度 + 充电闪电 */
.bat {
    width: 46px;
    height: 14px;
}
.bat::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(255,255,255,.26) 0 1px, transparent 1px);
    background-size: 10% 100%;
    background-repeat: repeat-x;
    opacity: .55;
}
.bat > i {
    position: relative;
    z-index: 1;
}
.bat-bolt {
    width: 11px;
    height: 14px;
    flex: 0 0 auto;
    fill: var(--ok);
    filter: drop-shadow(0 0 4px rgba(62,207,142,.55));
}
/* 电量行：三个元素靠在一起，不要两端对齐 */
.dcard-power {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.dcard-power .bat-bolt { margin-left: -2px; }
.dcard-power .bat-num { margin-left: 0; }
/* 电量行：整体靠右（覆盖上面的 flex-start） */
.dcard-power { justify-content: flex-end; }
/* 电量组：并入标签行，靠右 */
.dcard-bat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding-left: 8px;
    flex: 0 0 auto;
}
.dcard-tags { flex-wrap: wrap; }
/* IP 前后的国旗 */
.geo-flag {
    display: inline-block;
    margin-right: 6px;
    font-size: 13px;
    line-height: 1;
    vertical-align: -1px;
}
/* 内嵌 SVG 国旗 */
.geo-flag {
    display: inline-flex;
    align-items: center;
    margin-right: 7px;
    vertical-align: -2px;
    line-height: 0;
}
.geo-flag svg {
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
}
.geo-cc {
    display: inline-block;
    margin-right: 7px;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 10.5px;
    line-height: 1.3;
    letter-spacing: .04em;
    color: var(--txt-2);
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    vertical-align: 1px;
}
/* 设备墙右上角刷新按钮组 */
.tb-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
#wrefresh { min-width: 64px; }
/* IP 可点击复制 + 历史 IP */
.ip-copy {
    cursor: pointer;
    border-bottom: 1px dashed rgba(255,255,255,.22);
    transition: color .15s, border-color .15s;
}
.ip-copy:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ip-copy.is-copied { color: var(--ok); border-bottom-color: transparent; }
.ip-hist {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--txt-3);
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* 历史 IP：折叠按钮 + 展开列表 */
.ip-hist-toggle {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--txt-2);
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    cursor: pointer;
    vertical-align: 1px;
}
.ip-hist-toggle:hover { color: var(--txt); border-color: #3c4859; }
.ip-hist-toggle[data-open="1"] { color: var(--accent); border-color: rgba(78,161,255,.45); }

/* 展开后横向可滚：不换行、不撑破卡片、细滚动条 */
.ip-hist-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0;
    margin-top: 5px;
    padding-bottom: 3px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}
.ip-hist-list::-webkit-scrollbar { height: 4px; }
.ip-hist-list::-webkit-scrollbar-track { background: transparent; }
.ip-hist-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 2px; }
.ip-hist-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); }
.ip-hist-list[hidden] { display: none; }
.ip-hist-item {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    margin: 0 6px 5px 0;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--txt-2);
    background: rgba(255,255,255,.035);
    border: 1px solid var(--line);
    cursor: pointer;
}
.ip-hist-item:hover { color: var(--txt); border-color: var(--line-2); background: rgba(255,255,255,.06); }
.ip-hist-item > b { font-weight: 500; color: var(--txt-3); font-size: 10.5px; }
.ip-copied { color: var(--ok); }
/* 卡片右上角：收藏 / 置顶 / 固定 */
.dcard-flags {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.cflag {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1;
    color: var(--txt-3);
    background: transparent;
    border: 1px solid var(--line);
    cursor: pointer;
    transition: all .12s;
}
.cflag:hover { color: var(--txt); border-color: var(--line-2); background: rgba(255,255,255,.05); }
.cflag.is-on { color: var(--ok); border-color: rgba(62,207,142,.45); background: rgba(62,207,142,.10); }
.cflag[data-f="fav"].is-on { color: #e8b84b; border-color: rgba(232,184,75,.5); background: rgba(232,184,75,.10); }
/* 应用列表图标 */
.c-app { width: 40%; }
.appcell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.appicon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 5px;
    object-fit: cover;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
}
.appicon.is-empty { display: inline-block; }
/* 应用列表排版优化：包名完整显示、名称省略、时间紧凑 */
.tbl .c-app { width: 34%; }
.tbl .c-pkg {
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--txt-2);
}
.tbl .c-appdate {
    white-space: nowrap;
    font-size: 11.5px;
    color: var(--txt-3);
}
.appname {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.appcell { min-width: 0; }
/* 应用列表：两行式（名称 / 包名·日期），彻底避免列宽打架 */
.tbl .c-app { width: auto; }
.appcell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.appmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.appname {
    font-size: 13px;
    color: var(--txt);
    line-height: 1.25;
}
.appsub {
    font-size: 11px;
    line-height: 1.3;
    color: var(--txt-3);
    word-break: break-all;
    overflow-wrap: anywhere;
}
.tbl .c-ver { width: 76px; white-space: nowrap; }
/* 差异记录 */
.tbl .c-detail {
    white-space: normal;
    word-break: break-all;
    font-size: 11.5px;
    color: var(--txt-2);
    line-height: 1.35;
}
/* 文件浏览：面包屑 + 目录可点 */
.fc-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 8px 2px 10px;
    font-size: 12.5px;
    color: var(--txt-2);
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}
.fc-crumb { color: var(--accent); text-decoration: none; }
.fc-crumb:hover { text-decoration: underline; }
.fc-sep { color: var(--txt-3); }
.fc-dir { color: var(--txt); text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.2); }
.fc-dir:hover { color: var(--accent); border-bottom-color: var(--accent); }
.fc-ico { display: inline-block; margin-right: 7px; opacity: .9; }
/* 活动记录日期选择 */
.fc-date {
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    color: var(--txt);
    border-radius: 7px;
    padding: 4px 8px;
    font-size: 12px;
    margin-left: 8px;
}
/* 活动记录日期条 */
.actdays {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 2px 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}
.actday {
    padding: 4px 12px;
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--txt-2);
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    text-decoration: none;
}
.actday:hover { color: var(--txt); border-color: #3c4859; }
.actday.is-on { color: var(--ok); border-color: rgba(62,207,142,.45); background: rgba(62,207,142,.10); }
/* 活动日期块（按钮版，避免触发路由） */
.actday {
    cursor: pointer;
    font: inherit;
}
/* 输入类事件高亮 */
.row-sens { background: rgba(232,184,75,.06); }
.row-sens td { border-color: rgba(232,184,75,.12) !important; }
/* 总结一句话 */
.sum-text {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--txt);
    background: rgba(78,161,255,.07);
    border: 1px solid rgba(78,161,255,.18);
}
/* 总结里的银行卡展示 */
.bc-wrap { grid-column: 1 / -1; }
.bank-card {
    display: inline-block;
    min-width: 260px;
    margin: 6px 10px 6px 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1f3a5f 0%, #172536 60%, #101820 100%);
    border: 1px solid rgba(120,170,255,.25);
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.bc-num {
    font-size: 16px;
    letter-spacing: 2px;
    color: #eaf2ff;
    margin-bottom: 10px;
}
.bc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
    color: var(--txt-2);
}
/* 卡面完整信息 + 上下文 */
.bc-fields {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 11.5px;
    color: var(--txt-2);
}
.bc-fields b { color: #eaf2ff; font-weight: 600; }
.bc-ctx { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.10); padding-top: 8px; }
.bc-ctx-row {
    display: grid;
    grid-template-columns: 46px 130px 120px 1fr;
    gap: 8px;
    padding: 3px 0;
    font-size: 11px;
    color: var(--txt-2);
}
.bc-ctx-row.is-hit { background: rgba(232,184,75,.12); color: var(--txt); border-radius: 4px; }
.bc-ctx-row > b { color: var(--txt-3); font-weight: 500; }
.bc-ctx-row .bc-cd { word-break: break-all; }
/* 日期块获取中 */
.actday.is-busy {
    color: var(--idle);
    border-color: rgba(232,184,75,.45);
    background: rgba(232,184,75,.10);
    cursor: progress;
}
/* ============ 全部日期总结（重设计） ============ */
.sa-panel .panel-h h2 { letter-spacing: .2px; }

.sa-hero {
    display: flex; align-items: baseline; gap: 14px;
    padding: 18px 20px; margin-bottom: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(78,161,255,.14), rgba(78,161,255,.03));
    border: 1px solid rgba(78,161,255,.22);
}
.sa-hero-num { font-size: 34px; font-weight: 700; color: #eaf2ff; line-height: 1; font-variant-numeric: tabular-nums; }
.sa-hero-txt b { display: block; font-size: 13px; color: var(--txt); }
.sa-hero-txt span { font-size: 12px; color: var(--txt-2); }

.sa-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.sa-kpi {
    padding: 12px 14px; border-radius: 10px; text-align: center;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
}
.sa-kpi b { display: block; font-size: 20px; font-weight: 700; color: var(--txt); font-variant-numeric: tabular-nums; }
.sa-kpi span { font-size: 11.5px; color: var(--txt-2); }

.sa-sec { margin-bottom: 18px; }
.sa-sec h3 {
    font-size: 12.5px; font-weight: 600; color: var(--txt-2);
    text-transform: uppercase; letter-spacing: .6px; margin: 0 0 10px;
}
.sa-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--txt-3); }

.sa-days { margin-bottom: 18px; }
.sa-day { display: grid; grid-template-columns: 96px 1fr 58px 46px; gap: 10px; align-items: center; padding: 5px 0; }
.sa-day-d { font-size: 12px; color: var(--txt-2); }
.sa-day-bar, .sa-app-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.sa-day-bar i, .sa-app-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #3f7fd8, #63a4ff); }
.sa-day b { font-size: 12px; text-align: right; color: var(--txt); }
.sa-day-pct { font-size: 11px; color: var(--txt-3); text-align: right; }

.sa-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sa-card { padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.sa-card-t { display: block; font-size: 11px; color: var(--txt-3); margin-bottom: 8px; letter-spacing: .5px; }
.sa-card ul { margin: 0; padding: 0; list-style: none; }
.sa-card li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 12px; color: var(--txt); word-break: break-all; }
.sa-card li i { font-style: normal; font-size: 10.5px; color: var(--txt-3); flex: 0 0 auto; }
.sa-card-bank { background: rgba(232,184,75,.05); border-color: rgba(232,184,75,.18); }

.sa-tag { padding: 1px 6px; border-radius: 4px; font-size: 10px; font-style: normal; white-space: nowrap; }
.sa-tag.ok { color: #7fe0a3; background: rgba(88,201,137,.12); }
.sa-tag.warn { color: #f0b95c; background: rgba(232,184,75,.12); }

.sa-apps { display: grid; gap: 6px; }
.sa-app { display: grid; grid-template-columns: 150px 1fr 52px; gap: 10px; align-items: center; }
.sa-app-n { font-size: 12px; color: var(--txt-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-app b { font-size: 12px; text-align: right; color: var(--txt); }

.sa-sess { display: grid; gap: 10px; }
.sa-sess-item { border-left: 2px solid rgba(78,161,255,.35); padding: 6px 0 6px 12px; }
.sa-sess-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sa-sess-h b {
    width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(78,161,255,.16); color: #9dc7ff;
}
.sa-sess-app { font-size: 12.5px; color: var(--txt); font-weight: 600; }
.sa-sess-n { font-size: 11px; color: var(--txt-3); }
.sa-sess-body { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-step {
    font-size: 11px; color: var(--txt-2); padding: 2px 8px; border-radius: 20px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sa-ask { padding: 14px 16px; border-radius: 10px; background: rgba(232,184,75,.06); border: 1px solid rgba(232,184,75,.2); }
.sa-ask-q { margin: 0 0 10px; font-size: 13px; color: var(--txt); }
.sa-ask-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.sa-wait { display: flex; align-items: center; gap: 10px; padding: 14px 4px; font-size: 12.5px; color: var(--txt-2); }
.sa-spin {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.18); border-top-color: #63a4ff;
    animation: saSpin .8s linear infinite;
}
@keyframes saSpin { to { transform: rotate(360deg); } }

.sa-err { color: #f8837e; font-size: 12.5px; margin: 0; }

.sa-raw { margin-top: 4px; }
.sa-raw summary { cursor: pointer; font-size: 12px; color: var(--txt-3); }
.sa-raw .sum-text { margin-top: 8px; }

@media (max-width: 760px) {
    .sa-kpis { grid-template-columns: repeat(2, 1fr); }
    .sa-day { grid-template-columns: 80px 1fr 48px; }
    .sa-day-pct { display: none; }
    .sa-app { grid-template-columns: 100px 1fr 44px; }
}

/* flags-color-v2 */
    
.cflag[data-f="fav"]{color:#e8b84b;border-color:rgba(232,184,75,.35);}
.cflag[data-f="pinned"]{color:#58c989;border-color:rgba(88,201,137,.35);}
.cflag[data-f="archived"]{color:#63a4ff;border-color:rgba(99,164,255,.35);}
.cflag[data-f="fav"]:hover{background:rgba(232,184,75,.12);}
.cflag[data-f="pinned"]:hover{background:rgba(88,201,137,.12);}
.cflag[data-f="archived"]:hover{background:rgba(99,164,255,.12);}
.cflag[data-f="fav"].is-on{background:rgba(232,184,75,.20);border-color:#e8b84b;color:#ffd166;}
.cflag[data-f="pinned"].is-on{background:rgba(88,201,137,.20);border-color:#58c989;color:#7fe0a3;}
.cflag[data-f="archived"].is-on{background:rgba(99,164,255,.20);border-color:#63a4ff;color:#9dc7ff;}

/* 卡片内嵌小折叠（最后在线等） */
details.kv-more {
    display: inline-block;
    margin-left: 6px;
    font-weight: 400;
}
details.kv-more > summary {
    cursor: pointer;
    font-size: 11px;
    color: var(--txt-3);
    list-style: none;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 5px;
    border: 1px solid var(--line);
}
details.kv-more > summary::-webkit-details-marker { display: none; }
details.kv-more[open] > summary { color: var(--txt-2); border-color: rgba(99,164,255,.35); }
details.kv-more > b {
    display: inline-block;
    margin-left: 6px;
    font-size: 11.5px;
    color: var(--txt-2);
    font-weight: 500;
}
/* 离线设备：最后在线（常驻显示） */
.ls-inline {
    display: inline-block;
    margin-left: 8px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--txt-3);
}
.ls-inline > b { color: var(--txt-2); font-weight: 500; }
/* 离线：最后在线（徽章常驻，样式同 IP 历史按钮） */
.ip-hist-toggle.ls-badge { cursor: default; pointer-events: none; }
.ls-val {
    display: inline-block;
    margin-left: 6px;
    font-size: 11.5px;
    color: var(--txt-2);
    vertical-align: 1px;
}
/* 短信列表排版 */
.sms-tbl td { vertical-align: top; }
.sms-who { min-width: 180px; }
.sms-who b { display: block; font-weight: 600; color: var(--txt); font-size: 12.5px; }
.sms-who .sms-num { display: block; margin-top: 2px; font-size: 11px; color: var(--txt-3); }
.sms-time { width: 150px; white-space: nowrap; font-size: 11.5px; color: var(--txt-2); }
.sms-body { max-width: 620px; }
.sms-body > span {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 12.5px; line-height: 1.6; color: var(--txt-2);
    word-break: break-word;
}
.sms-body > span:hover { color: var(--txt); }
/* 短信：联系人 / 号码 分列 */
.sms-name { width: 160px; max-width: 180px; }
.sms-name > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--txt); }
.sms-num { width: 160px; font-size: 11.5px; color: var(--txt-3); white-space: nowrap; }
/* 短信：内容列占满剩余宽度，其它列收窄 */
.sms-tbl { table-layout: auto; }
.sms-tbl .sms-num { width: 150px; max-width: 170px; }
.sms-tbl .sms-time { width: 130px; }
.sms-tbl .c-ver { width: 70px; }
.sms-body { width: auto; max-width: none; }
.sms-body > span { display: block; overflow: visible; -webkit-line-clamp: unset; white-space: normal; }
/* sms-tbl v2：内容列吃满剩余宽度 */
.sms-tbl { table-layout: fixed; }
.sms-tbl col.sms-c-num  { width: 160px; }
.sms-tbl col.sms-c-dir  { width: 76px; }
.sms-tbl col.sms-c-time { width: 132px; }
.sms-tbl th.sms-num, .sms-tbl td.sms-num { width: 160px; }
.sms-tbl th.sms-time, .sms-tbl td.sms-time { width: 132px; }
.sms-tbl th.c-ver, .sms-tbl td.c-ver { width: 76px; }
.sms-tbl td.sms-body { width: auto; max-width: none; white-space: normal; word-break: break-word; line-height: 1.65; color: var(--txt-2); }
/* 持续获取开启态按钮 */
.btn-on {
    color: #7fe0a3 !important;
    border-color: rgba(88,201,137,.55) !important;
    background: rgba(88,201,137,.14) !important;
}
/* 面板头部按钮组：靠右紧凑排列 */
.panel-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}
/* 应用列表分类按钮 */
.app-filter-bar { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.app-filter .af-num { opacity: .65; font-size: 10.5px; margin-left: 2px; }
/* 注入库表格：包名完整显示 */
.il-lib { table-layout: auto; }
.il-lib td.il-pkg { white-space: normal; word-break: break-all; font-size: 12px; line-height: 1.45; max-width: 560px; color: var(--txt-2); }
.il-lib th:nth-child(1), .il-lib td:nth-child(1) { width: 52px; }
.il-lib th:nth-child(2), .il-lib td:nth-child(2) { width: 150px; }
.il-lib th:nth-child(4), .il-lib td:nth-child(4) { width: 96px; text-align: right; }
.il-lib th:nth-child(5), .il-lib td:nth-child(5) { width: 158px; white-space: nowrap; }
.il-lib th:nth-child(6), .il-lib td:nth-child(6) { width: 86px; }

/* 注入库：图标与名称 */
.il-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.il-ico { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; background: #131a24; border: 1px solid #1e2836; }
.il-ico-ph { display: inline-block; }
.il-txt { display: flex; flex-direction: column; min-width: 0; }
.il-txt b { font-size: 12.8px; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.il-sub { font-size: 11px; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }

/* 注入库：国家列 */
.il-cty { white-space: nowrap; }
.il-cc { display: inline-block; min-width: 24px; font-size: 11px; font-weight: 600; color: #9dc7ff; }
.il-cn { font-size: 11.5px; color: var(--txt-3); }

/* 固定卡片宽度：避免电池行被挤到下一行 */
.wall { grid-template-columns: repeat(auto-fill, 360px); justify-content: start; }
.dcard { width: 360px; max-width: 100%; }
.dcard-tags { flex-wrap: nowrap; overflow: hidden; }

@media (max-width: 640px) {
    .wall { grid-template-columns: 1fr; }
    .dcard { width: 100%; }
    .dcard-tags { flex-wrap: wrap; }
}
/* IP 后面的心跳耗时 */
.ip-ms { margin-left: 8px; font-size: 11px; color: var(--txt-3); }

/* 卡片手机状态里的姿态 */
.dcard-an { margin-left: 6px; font-size: 11px; color: var(--txt-3); }


/* ===== 右侧边栏（可展开 / 收起） ===== */
.rbar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px;
    display: flex;
    align-items: stretch;
    transform: translateX(300px);
    transition: transform .22s ease;
    z-index: 900;
}
.rbar.is-open { transform: translateX(0); }

.rbar-tab {
    align-self: flex-start;
    margin-top: 92px;
    width: 30px;
    height: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: var(--panel);
    color: var(--txt-2);
    cursor: pointer;
    font-size: 11px;
    letter-spacing: .04em;
    transform: translateX(-30px);
    box-shadow: -6px 0 18px rgba(0,0,0,.25);
}
.rbar-tab:hover { color: var(--txt); border-color: var(--line-2); }
.rbar-tab-icon { font-size: 13px; line-height: 1; }
.rbar-tab-text { writing-mode: vertical-rl; text-orientation: upright; font-size: 10.5px; }

.rbar-body {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    background: var(--panel);
    border-left: 1px solid var(--line);
    padding: 14px 14px 24px;
    box-shadow: -14px 0 28px rgba(0,0,0,.35);
}
.rbar-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.rbar-head b { font-size: 13px; color: var(--txt); }
.rbar-note { font-size: 11px; color: var(--txt-3); }

.rbar-slot {
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.rbar-slot-title { font-size: 12px; color: var(--txt-2); margin-bottom: 6px; }
.rbar-slot-body { font-size: 11.5px; color: var(--txt-3); }

@media (max-width: 980px) {
    .rbar { width: 260px; transform: translateX(260px); }
    .rbar.is-open { transform: translateX(0); }
}

/* 侧栏：自动获取密码面板 */
.rbar-badge { display:inline-block; margin-left:6px; padding:2px 7px; border-radius:6px; font-size:10.5px;
    border:1px solid rgba(255,255,255,.12); color: var(--txt-3); }
.rbar-badge.is-on { color:#6ee79a; border-color:rgba(48,209,88,.32); background:rgba(48,209,88,.10); }
.la-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; font-size:11.5px; color:var(--txt-2); }
.la-row input { width:78px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--txt);
    border-radius:6px; padding:3px 7px; font-size:11.5px; text-align:right; }
.la-actions { display:flex; gap:8px; margin:9px 0 10px; }
.la-stat { font-size:11.5px; color:var(--txt-2); line-height:1.7; padding-top:8px; border-top:1px solid var(--line); }
.la-stat b { color:var(--txt); }
.la-recent { margin-top:8px; font-size:10.8px; color:var(--txt-3); max-height:190px; overflow:auto; }
.la-line { display:flex; gap:6px; align-items:baseline; padding:2px 0; }
.la-line .mono { color:var(--txt-3); }
.la-ok { color:#6ee79a; }
.la-no { color:#8b97a8; }
.la-det { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 侧栏：自动取密码（新版） */
.la-head { display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.la-title { font-size:12px; color:var(--txt); }
.la-cfg-btn { margin-left:auto; background:none; border:1px solid var(--line-2); color:var(--txt-3);
    border-radius:6px; padding:2px 8px; font-size:10.5px; cursor:pointer; }
.la-cfg-btn:hover { color:var(--txt); border-color:var(--txt-3); }
.la-cfg { padding:6px 0 2px; }
.la-actions.la-main { margin-top:10px; }

/* 状态徽章可点击 */
button.rbar-badge { cursor:pointer; background:transparent; font:inherit; line-height:1; }
button.rbar-badge:hover { border-color: var(--txt-3); color: var(--txt); }
button.rbar-badge.is-on:hover { border-color:#6ee79a; }

/* AI 配置页 */
.ai-form { display:flex; flex-direction:column; gap:12px; max-width:720px; }
.ai-row { display:flex; align-items:center; gap:12px; }
.ai-row > label { width:110px; flex:0 0 auto; font-size:12px; color:var(--txt-3); }
.ai-row input { flex:1; background:var(--panel-2); border:1px solid var(--line-2); color:var(--txt);
    border-radius:7px; padding:7px 10px; font-size:12.5px; }
.ai-row-col { align-items:flex-start; }
.ai-row-col textarea { flex:1; background:var(--panel-2); border:1px solid var(--line-2); color:var(--txt);
    border-radius:7px; padding:8px 10px; font-size:12.5px; font-family:inherit; resize:vertical; }
.ai-hint { font-size:11px; color:var(--txt-3); }
.ai-actions { display:flex; align-items:center; gap:10px; padding-top:6px; }
.ai-state { font-size:12px; }
.ai-state.is-ok { color:#6ee79a; }
.ai-state.is-err { color:#ff7b72; }

/* 卡片标签：禁止被压扁换行 + 宽度微调 */
.dcard-tags .dtag { flex: 0 0 auto; white-space: nowrap; }
.wall { grid-template-columns: repeat(auto-fill, 380px); }
.dcard { width: 380px; }

/* 卡片标签里的按钮样式（检查权限） */
.dtag-btn {
    cursor: pointer;
    background: transparent;
    font: inherit;
    color: #ffd166;
    border-color: rgba(255, 209, 102, .35);
}
.dtag-btn:hover { color: #ffe08a; border-color: rgba(255, 209, 102, .6); }
.dtag-btn[disabled] { opacity: .55; cursor: default; }

/* 检查权限按钮：与其它标签字号一致 */
.dcard-tags .dtag-btn {
    font-size: 10.5px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 7px;
    font-weight: 400;
    letter-spacing: .01em;
}

/* 应用列表 AI 标注 */
.ai-sum { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.ai-chip { font-size:11px; color:var(--txt-3); border:1px solid var(--line-2); border-radius:6px; padding:3px 8px; background:rgba(255,255,255,.02); }
.ai-chip b { color:var(--txt); margin-left:3px; }
.ai-mark { display:inline-block; margin-left:5px; font-size:9.5px; line-height:1; padding:2px 4px; border-radius:4px;
    color:#9dc7ff; border:1px solid rgba(157,199,255,.35); vertical-align:middle; }

/* AI 标注中的提示 */
.ai-chip-busy { color:#ffd166; border-color: rgba(255,209,102,.45); animation: aipulse 1.2s ease-in-out infinite; }
@keyframes aipulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }

/* 可点击的 AI 分类 */
.ai-chip-btn { cursor:pointer; background:transparent; font:inherit; font-size:11px; }
.ai-chip-btn:hover { border-color: var(--txt-3); color: var(--txt); }
.ai-chip-btn.is-active { color:#6ee79a; border-color: rgba(48,209,88,.45); background: rgba(48,209,88,.10); }
button.ai-catbtn { cursor:pointer; font:inherit; }
button.ai-catbtn:hover { border-color:#6ee79a; color:#8ff0b4; }
.ai-catbtn.is-active { background: rgba(48,209,88,.14); }

/* 应用列表列宽与间距微调 */
.tbl .col-kind  { width: 84px; }
.tbl .col-aicat { width: 96px; padding-left: 2px !important; }
.tbl .col-brand { width: 150px; padding-left: 26px !important; }
.tbl .col-usage { width: 168px; padding-left: 26px !important; }

/* AI 分类按钮：字号与「类别」标签一致 */
button.ai-catbtn {
    font-size: 10.5px;
    line-height: 1;
    padding: 4px 8px;
    font-weight: 400;
    letter-spacing: .01em;
}

/* 卡片：应用列表分类计数 */
.card-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.card-chip { font-size:10.5px; line-height:1; padding:3px 6px; border-radius:5px;
    color: var(--txt-3); border:1px solid var(--line-2); background: rgba(255,255,255,.02); }
.card-chip b { color: var(--txt); margin-left:2px; }

/* 卡片：已注入标签 */
.card-chip-inj { color:#9dc7ff; border-color: rgba(157,199,255,.35); background: rgba(157,199,255,.08); }

/* 卡片：已注入标签（与 69 个 同一行，绿色同其它标签） */
.card-injtag { margin-left: 8px; vertical-align: middle; }

/* 已注入标签：高度收一点 */
.dtag.card-injtag {
    padding: 2px 7px;
    line-height: 1;
    margin-left: 8px;
    vertical-align: middle;
}

/* 卡片：密码类型标签高度收一点 */
.dcard-lock .dtag {
    padding: 2px 7px;
    line-height: 1;
}

/* 密码类型 / 已注入标签：高度再收一档 */
.dcard-lock .dtag { padding: 1px 7px; line-height: 1; }
.dtag.card-injtag { padding: 1px 7px; }

/* ===== 监控配置页（WatchDog） ===== */
.wd-panel { margin-bottom: 14px; }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.wd-item { background: #141821; border: 1px solid #232a36; border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.wd-item span { color: #8b93a3; font-size: 12px; }
.wd-item code { color: #d6dbe6; font-size: 12px; word-break: break-all; font-family: Consolas, monospace; }
.wd-ok { color: #3fce7c; }
.wd-bad { color: #f2696b; }
.wd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.wd-btn { background: #1d2330; border: 1px solid #2c3546; color: #cfd6e4; border-radius: 5px; padding: 6px 12px; font-size: 12px; cursor: pointer; text-decoration: none; display: inline-block; }
.wd-btn:hover { background: #26303f; border-color: #3a4557; }
.wd-ini { width: 100%; min-height: 320px; background: #0f131a; color: #b9c4d6; border: 1px solid #232a36; border-radius: 6px; padding: 10px; font-family: Consolas, monospace; font-size: 12px; line-height: 1.55; resize: vertical; }
.wd-tip { color: #7f8899; font-size: 12px; line-height: 1.6; margin: 6px 0 0; }
.wd-steps { margin: 8px 0 0; padding-left: 20px; color: #b8c1d1; font-size: 13px; line-height: 1.9; }
.wd-steps code { background: #141821; border: 1px solid #232a36; border-radius: 4px; padding: 1px 5px; font-family: Consolas, monospace; font-size: 12px; color: #d6dbe6; }

/* 卡片标签悬停预览：只有图标，横向排列，放不下自动换行 */
.hv-prev {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background: #0d1219;
    border: 1px solid #263041;
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0,0,0,.55);
    pointer-events: none;
}
.hv-ico {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: block;
    object-fit: cover;
    background: #182031;
}
.hv-ico.is-empty { border: 1px dashed #33405a; }

/* hidden 属性要能压过 display:flex，否则浮层收不起来 */
.hv-prev[hidden] { display: none !important; }

/* ---------- 设备墙：卡片 / 列表 视图切换 ---------- */
.wview {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    margin-right: 8px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid var(--line);
}
.wview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--txt-3);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.wview-btn:hover { color: var(--txt); background: rgba(255, 255, 255, .07); }
.wview-btn.is-on { color: #101012; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }

/* ---------- 设备墙工具条：一行主控 + 筛选抽屉 ---------- */
.wbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 8px;
}
/* 只看收藏 / 只看归档 */
.wonlys { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.wonly {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--txt-2);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.wonly .wdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-block;
}
/* 收藏：绿点 */
.wonly.wofav .wdot { background: #3ecf8e; box-shadow: 0 0 0 3px rgba(62, 207, 142, .16); }
/* 归档：黑点（外圈一道细亮边，深色底上才看得见） */
.wonly.woarch .wdot { background: #0b0c0e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); }
.wonly b { font-variant-numeric: tabular-nums; color: var(--txt); font-weight: 600; }
.wonly:hover { border-color: var(--line-2); color: var(--txt); }
.wonly.wofav.is-on {
    color: #7ce8b2;
    background: rgba(62, 207, 142, .16);
    border-color: rgba(62, 207, 142, .55);
}
.wonly.woarch.is-on {
    color: var(--txt);
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .34);
}
.wonly.is-on b { color: inherit; }

.wbar-r {    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}
.wsearch { display: flex; align-items: center; gap: 6px; }
.wsearch input {
    width: 208px;
    padding: 6px 10px;
    font-size: 12.5px;
    border-radius: 8px;
}
.wfbtn { display: inline-flex; align-items: center; gap: 6px; }
.wfbtn.is-open .wfcar { transform: rotate(180deg); }
.wfcar { font-style: normal; font-size: 10px; opacity: .7; transition: transform .16s ease; display: inline-block; }
.wfnum {
    font-style: normal;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--accent);
    color: #08111d;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.grow {
    display: flex;
    align-items: center;
    padding: 2px 0 10px;
    min-height: 0;
}
/* 第二行跟着激活的状态标签左右滑，节奏与胶囊一致 */
.grow .gbar {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
    transition: margin-left .34s cubic-bezier(.25, .9, .25, 1);
}
/* 分组按钮 = 标签同款外观，去掉自己那套描边底 */
.grow .gchip {
    background: transparent;
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--txt-2);
    gap: 6px;
    transition: background .18s ease, color .18s ease;
}
.grow .gchip:hover { background: rgba(255, 255, 255, .06); color: var(--txt); }
.grow .gchip b { color: inherit; font-weight: 600; }
.grow .gchip.is-on,
.grow .gchip.g-unknown.is-on,
.grow .gchip.g-high.is-on,
.grow .gchip.g-low.is-on {
    background: #fff;
    border: 0;
    color: #101012;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.grow .gchip.is-on b { color: #101012; }
.grow .gchip.is-on:hover { filter: none; background: #fff; }
/* 彩色语义保留成一个小圆点 */
.gdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--txt-3);
    flex: 0 0 auto;
}
.gchip.g-unknown .gdot { background: #e8b84b; }
.gchip.g-high .gdot { background: #ef6a6a; }
.gchip.g-low .gdot { background: #b9c2d1; }
.gchip.g-all .gdot { display: none; }
.wbar { row-gap: 0; margin-bottom: 0; }
.wpop {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.wpop[hidden] { display: none !important; }
.wpop-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.wpop-grid .f-item { min-width: 140px; }
.wpop-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.wpop-foot .panel-note { margin-left: auto; }
.warch { display: inline-flex; align-items: center; gap: 7px; }
.warch-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--txt-3);
    transition: background .14s ease, box-shadow .14s ease;
}
.warch.is-on .warch-dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(62, 207, 142, .18); }

/* ---------- 设备分组：未确认 / 高价值 / 低价值 ---------- */
.gbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0;
}
.gbar-k { color: var(--txt-3); font-size: 11.5px; margin-right: 2px; }
.gchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--txt-2);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.gchip b { font-variant-numeric: tabular-nums; color: var(--txt); font-weight: 600; }
.gchip:hover { border-color: var(--line-2); color: var(--txt); }
.gchip.is-on { color: #101012; background: #fff; border-color: #fff; }
.gchip.is-on b { color: #101012; }

/* 四组配色：未选淡色，选中实色 */
.gchip.g-unknown.is-on { border-color: rgba(232, 184, 75, .55); color: #ffdf8b; background: rgba(232, 184, 75, .16); }
.gchip.g-high.is-on    { border-color: rgba(239, 106, 106, .58); color: #ff9b9b; background: rgba(239, 106, 106, .16); }
.gchip.g-low.is-on     { border-color: rgba(150, 160, 175, .5); color: #c7d0dd; background: rgba(150, 160, 175, .14); }
.gchip.g-unknown.is-on b, .gchip.g-high.is-on b, .gchip.g-low.is-on b { color: inherit; }
.gchip.g-unknown.is-on:hover, .gchip.g-high.is-on:hover, .gchip.g-low.is-on:hover { filter: brightness(1.15); }

/* 行内 / 卡片上的分组按钮 */
.gbtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    line-height: 1.5;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    color: var(--txt-2);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color .14s ease, background .14s ease;
}
.gbtn:hover { border-color: var(--line-2); }
.gbtn.g-unknown { border-color: rgba(232, 184, 75, .45); color: #ffdf8b; background: rgba(232, 184, 75, .10); }
.gbtn.g-high    { border-color: rgba(239, 106, 106, .5); color: #ff9b9b; background: rgba(239, 106, 106, .11); }
.gbtn.g-low     { border-color: rgba(150, 160, 175, .38); color: #b9c2d1; background: rgba(150, 160, 175, .10); }
.gbtn .gauto { font-style: normal; font-size: 9.5px; opacity: .7; }

/* 卡片右上角那颗分组按钮：文字胶囊 */
.cflag-grp {
    max-width: 104px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.6;
    font-weight: 550;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    color: var(--txt-2);
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.cflag-grp:hover { border-color: var(--line-2); filter: brightness(1.12); }
.cflag-grp.g-unknown { color: #ffdf8b; border-color: rgba(232, 184, 75, .45); background: rgba(232, 184, 75, .10); }
.cflag-grp.g-high    { color: #ff9b9b; border-color: rgba(239, 106, 106, .5); background: rgba(239, 106, 106, .11); }
.cflag-grp.g-low     { color: #b9c2d1; border-color: rgba(150, 160, 175, .38); background: rgba(150, 160, 175, .10); }

/* 分组弹出菜单 */
.gmenu {
    position: fixed;
    z-index: 11500;
    width: 174px;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .55);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gmenu[hidden] { display: none !important; }
.gmenu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--txt-2);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}
.gmenu-item:hover { background: rgba(255, 255, 255, .06); color: var(--txt); }
.gmenu-item.is-on { color: var(--txt); background: rgba(255, 255, 255, .07); }
.gmenu-item i { font-style: normal; color: var(--accent); }
.gmenu-item.g-high:hover { color: #ff9b9b; }
.gmenu-item.g-unknown:hover { color: #ffdf8b; }
.tbl-wall .c-wgrp { text-align: left; }

/* 列表视图：一行一台，列宽固定 */
.tbl-wall { table-layout: fixed; }
.tbl-wall th, .tbl-wall td { padding: 8px 10px; vertical-align: middle; }
/* 列收窄后内容不许压到隔壁列，也不许换行（超出就是省略号） */
.tbl-wall td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-wall th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 设备列吃掉剩余宽度，其余列锁死 */
.tbl-wall col.c-wdev { width: auto; }
.tbl-wall .c-wdev { min-width: 180px; }
.wtable-wrap { width: 100%; overflow-x: auto; }
.wtable-wrap::-webkit-scrollbar { height: 8px; }
.wtable-wrap::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 4px; }
.tbl-wall .c-wsts { text-align: center; }
/* 编号：跟行里其它标签（锁屏 / 已归档）用同一套 dtag 样式 */
.tbl-wall .c-wseq .wseq-tag {
    font-variant-numeric: tabular-nums;
    font-family: Consolas, monospace;
    color: var(--txt-2);
}
.tbl-wall .c-wip { white-space: nowrap; font-size: 12px; }
.tbl-wall .c-wnet { font-size: 12px; }
.tbl-wall .c-wapp { font-size: 12px; }
.tbl-wall .c-wos { font-size: 12px; color: var(--txt-2); }
.tbl-wall .c-wseen { font-size: 11.5px; white-space: nowrap; }
.tbl-wall .c-wop { white-space: nowrap; text-align: left; }
.tbl-wall .c-wop > * { vertical-align: middle; }
.tbl-wall .c-wop .btn { padding: 4px 9px; font-size: 11.5px; margin-left: 6px; }
.tbl-wall .c-wop .cflag { margin-left: 6px; }
.tbl-wall .c-wop .gbtn { padding: 3px 9px; font-size: 11.5px; }
/* 操作列里的备注小输入 */
.wop-tag {
    width: 150px;
    margin-left: 6px;
    padding: 4px 8px;
    font-size: 11.5px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    color: var(--txt);
}
.wop-tag::placeholder { color: var(--txt-3); }
.wop-tag:hover { border-color: var(--line-2); }
.wop-tag:focus { outline: none; border-color: var(--accent); background: var(--bg-2); }

/* 设备列：只显示「型号 · pid」一行，白色 */
.wrow .wrow-devline {
    color: var(--txt);
    font-size: 12.5px;
    letter-spacing: .01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wrow .wrow-devline .dtag { margin-left: 6px; }
.wrow td { border-bottom: 1px solid rgba(255, 255, 255, .045); }
.wrow .wrow-name { color: var(--txt); font-size: 13px; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
/* 列表里的备注：默认看着像纯文字，指上去才有边，聚焦变成输入框 */
.wrow .wrow-tagin {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 3px 7px;
    margin-left: -7px;
    font: inherit;
    font-size: 13px;
    font-weight: 560;
    color: var(--txt);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    text-overflow: ellipsis;
    transition: background .14s ease, border-color .14s ease;
}
.wrow .wrow-tagin::placeholder { color: var(--txt-3); font-weight: 400; }
.wrow .wrow-tagin:hover { border-color: var(--line-2); }
.wrow .wrow-tagin:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-2);
    box-shadow: 0 0 0 2px rgba(78, 161, 255, .18);
}
.wrow .wrow-sub { color: var(--txt-3); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow .wrow-bat { display: inline-flex; align-items: center; gap: 4px; }
.wrow .wrow-sim { margin-left: 6px; color: var(--txt-3); font-size: 11px; }
.wrow .wrow-inj { margin-left: 6px; color: var(--ok); font-size: 11px; }
.wrow .wrow-on { color: var(--ok); font-size: 11.5px; }
.wrow .c-wip .ip-copy { font-size: 12px; }
.wrow .c-wip .ip-ms { font-size: 10.5px; }
.wrow.is-online .c-wdev .wrow-name { color: var(--txt); }
.wrow:hover { background: rgba(255, 255, 255, .035); }
.wrow .bat { width: 44px; }

/* ---------- 登录准入：超管确认弹框 / 等待页 ---------- */
/* 登录审批：右下角浮层，不遮页面、不挡操作 */
.gate-mask {
    position: fixed;
    top: auto;
    left: auto;
    right: 18px;
    bottom: 18px;
    z-index: 12000;
    display: block;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
}
.gate-mask[hidden] { display: none !important; }
.gate-box {
    pointer-events: auto;
    width: min(380px, calc(100vw - 36px));
    max-height: min(62vh, 520px);
    overflow-y: auto;
    background: rgba(20, 24, 31, .96);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .62);
    padding: 14px 16px 10px;
    animation: gateIn .22s cubic-bezier(.22, .9, .25, 1) both;
}
@keyframes gateIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
.gate-box-h { font-size: 13.5px; }
.gate-box-note { font-size: 11.5px; margin: 4px 0 8px; }
.gate-row { padding: 8px 0; }
.gate-row-main b { font-size: 13px; }
.gate-ua { font-size: 10.5px; }
.gate-box-h { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--txt); }
.gate-box-note { margin: 6px 0 12px; color: var(--txt-3); font-size: 12px; line-height: 1.6; }
.gate-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}
.gate-row-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.gate-row-main b { color: var(--txt); font-size: 13.5px; }
.gate-meta { color: var(--txt-2); font-size: 11.5px; font-family: Consolas, monospace; }
.gate-ua { color: var(--txt-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gate-row-act { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.gate-box-f { display: flex; justify-content: flex-end; padding-top: 10px; }

.gate-wait { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; }
.gate-wait-txt { display: flex; flex-direction: column; gap: 4px; }
.gate-wait-txt b { color: var(--txt); font-size: 14px; }
.gate-wait-txt span { color: var(--txt-3); font-size: 12px; }
.gate-wait-txt span:empty { display: none; }
.gate-spin {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    border-top-color: var(--accent);
    animation: gateSpin .9s linear infinite;
}
@keyframes gateSpin { to { transform: rotate(360deg); } }
.gate-tip { line-height: 1.6; }

/* ---------- 账户管理 ---------- */
.panel-h .panel-actions { align-self: center; }
.acc-add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 4px 0 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.acc-add[hidden] { display: none !important; }
.acc-add .f-item { min-width: 168px; }
.acc-seg { display: inline-flex; align-items: center; gap: 6px; }
.acc-self { color: var(--txt-3); font-size: 11.5px; }
.acc-ops { white-space: nowrap; }
.acc-ops input { width: 124px !important; padding: 5px 8px; }
.acc-ops .btn { padding: 5px 10px; }
.tbl-acc th:nth-child(2), .tbl-acc td:nth-child(2) { width: 92px; }
.tbl-acc th:nth-child(3), .tbl-acc td:nth-child(3) { width: 76px; }
.tbl-acc th:nth-child(5), .tbl-acc td:nth-child(5) { width: 132px; }
.tbl-acc th:nth-child(6), .tbl-acc td:nth-child(6) { width: 78px; }
.tbl-acc th:nth-child(8), .tbl-acc td:nth-child(8) { width: 320px; }

/* 密码变更记录：小字按钮 + 弹层 */
.lock-hist-btn {
    background: none; border: 0; padding: 0 0 0 6px;
    color: var(--txt-3); font-size: 11px; cursor: pointer; text-decoration: underline;
}
.lock-hist-btn:hover { color: var(--txt); }

.lh-mask {
    position: fixed; inset: 0; z-index: 9997;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
}
.lh-box {
    width: min(560px, 92vw); max-height: 70vh; overflow: auto;
    background: #0d1219; border: 1px solid #263041; border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0,0,0,.6);
}
.lh-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid #1d2634;
}
.lh-head b { color: var(--txt); font-size: 13px; }
.lh-head span { color: var(--txt-3); font-size: 11.5px; }
.lh-close {
    margin-left: auto; background: none; border: 0; color: var(--txt-3);
    font-size: 18px; line-height: 1; cursor: pointer;
}
.lh-close:hover { color: var(--txt); }

/* 首页：注入/密码/权限等小卡 + 自动任务列表 */
.mini-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}
.mini-stat {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mini-k { font-size: 11.5px; color: var(--txt-3); }
.mini-v { font-size: 17px; color: var(--txt); font-weight: 600; }
.mini-sub { font-size: 10.5px; color: var(--txt-3); }

.task-list { list-style: none; margin: 0; padding: 0; }
.task-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 2px; border-bottom: 1px solid var(--line);
    font-size: 12.5px; color: var(--txt-2);
}
.task-row:last-child { border-bottom: 0; }
.task-name { color: var(--txt); }

/* 国家 Top：国旗与文字间距 */
.geo-flag-inline { margin-right: 6px; font-size: 13px; line-height: 1; }

/* 服务器状态面板 */
.sv-val { color: var(--txt); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sv-sub { color: var(--txt-3); font-size: 11px; margin-left: 4px; }
.sv-grid { align-items: start; }



/* ---------- 数据中心 · AI 分析页签 ---------- */
.cc-ai-block { padding: 4px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.cc-ai-block:last-of-type { border-bottom: 0; }
.cc-ai-t { color: var(--txt-3); font-size: 11.5px; letter-spacing: .04em; margin-bottom: 8px; }
.cc-ai-head { margin: 0 0 6px; font-size: 14.5px; font-weight: 640; color: var(--txt); }
.cc-ai-body { margin: 0 0 10px; font-size: 13px; line-height: 1.75; color: var(--txt-2); }
.cc-ai-sub { color: var(--txt-3); font-size: 11.5px; margin: 10px 0 6px; letter-spacing: .04em; }
.cc-ai-list { margin: 0; padding-left: 18px; }
.cc-ai-list li { font-size: 12.5px; line-height: 1.8; color: var(--txt-2); }
.cc-ai-list.cc-ai-warn li { color: #ffcf8b; }
.cc-ai-dim {
    font-style: normal;
    display: inline-block;
    min-width: 34px;
    margin-right: 6px;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 10.5px;
    color: var(--txt-3);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
}
.cc-ai-w {
    margin-left: 6px;
    font-size: 10px;
    color: var(--accent);
    font-weight: 600;
}
.cc-ai-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.cc-ai-msg { color: var(--warn, #ffcf8b); font-size: 12px; }
.cc-ai-meta { margin-left: auto; }
/* ---------- 短信 AI 译文 ---------- */
.sms-body .sms-orig { color: var(--txt-2); }
.sms-body .sms-trbtn {
    margin-top: 5px;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--txt-3);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.sms-body .sms-trbtn:hover { color: #9dc7ff; border-color: rgba(78, 161, 255, .5); background: rgba(78, 161, 255, .1); }
.sms-body .sms-trbtn.is-busy { color: var(--txt-3); cursor: default; opacity: .8; }
.sms-body .sms-tr {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 5px;
    padding-left: 8px;
    border-left: 2px solid rgba(78, 161, 255, .45);
    color: #9dc7ff;
    font-size: 12px;
    line-height: 1.6;
}
.sms-body .sms-trx {
    flex: 0 0 auto;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--txt-3);
    font-size: 11px;
    cursor: pointer;
}
.sms-body .sms-trx:hover { color: #9dc7ff; }
.btn.btn-on { border-color: rgba(78, 161, 255, .55); color: #9dc7ff; background: rgba(78, 161, 255, .12); }
/* ---------- 运行日志页 ---------- */
.rl-panel { padding-bottom: 10px; }
.rl-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 0 10px;
}
.rl-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.rl-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--txt-2);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.rl-chip:hover { color: var(--txt); border-color: rgba(255, 255, 255, .18); }
.rl-chip.is-on { color: #9dc7ff; border-color: rgba(78, 161, 255, .55); background: rgba(78, 161, 255, .12); }
.rl-dot { width: 6px; height: 6px; border-radius: 50%; background: #3ecf8e; flex: 0 0 auto; }
.rl-dot.is-off { background: #555c66; }
.rl-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rl-q { width: 150px; }
.csel-native {
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    color: var(--txt-2);
    font-size: 12px;
}
.rl-meta { color: var(--txt-3); font-size: 11.5px; padding: 0 0 8px; }
.rl-box {
    margin: 0;
    max-height: 60vh;
    overflow: auto;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .35);
    border: 1px solid var(--line);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-all;
}
.rl-box .rl-line {
    display: block;
    padding: 0 2px;
    color: #b8c0cc;
    white-space: pre-wrap;
    word-break: break-all;
}
.rl-box .rl-line:hover { background: rgba(255, 255, 255, .04); }
.rl-line { display: block; color: #b8c0cc; }
.rl-line.is-ok { color: #7fd8a8; }
.rl-line.is-bad { color: #ffb0a8; }
.rl-empty { color: var(--txt-3); }
/* ---------- 运行日志：设备编号筛选 ---------- */
.rl-devq { width: 96px; }
.rl-devs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 10px;
}
.rl-dev-tip { color: var(--txt-3); font-size: 11.5px; }
.rl-devchip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--txt-2);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.rl-devchip:hover { color: var(--txt); border-color: rgba(255, 255, 255, .2); }
.rl-devchip.is-on { color: #9dc7ff; border-color: rgba(78, 161, 255, .55); background: rgba(78, 161, 255, .12); }
.rl-devchip i { font-style: normal; color: var(--txt-3); font-size: 10.5px; }
/* 筛选项很多时允许换行（操作日志这类） */
.tb-tabs.is-wrap {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 4px;
}

/* ---------- 操作日志页：分类筛选 ---------- */
.log-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.log-toolbar .tb-tabs { flex: 1 1 auto; }
.log-aux { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.log-kw { width: 170px; }
.log-act { color: var(--txt); }
.tbl-log .log-dev { color: #9dc7ff; font-variant-numeric: tabular-nums; }
.tbl-log td { padding-top: 9px; padding-bottom: 9px; }

/* 操作日志列宽：固定布局，时间/操作/IP/账号 定宽，对象占剩余并省略 */
.tbl-log { table-layout: fixed; width: 100%; }
.tbl-log th, .tbl-log td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tbl-log .c-time { width: 158px; }
.tbl-log .c-st   { width: 132px; }
.tbl-log .c-ver  { width: 148px; }
.tbl-log .c-qid  { width: 92px; }
.tbl-log td.c-ver, .tbl-log th.c-ver { padding-right: 14px; }
.tbl-log td.c-qid, .tbl-log th.c-qid { padding-left: 14px; }
/* 操作日志翻页：只淡入表格行，整页不重画 */
#logTbody { transition: opacity .16s ease; }
#logTbody tr { animation: logRowIn .2s ease both; }
@keyframes logRowIn {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}
#logPager { transition: opacity .16s ease; }
/* ---------- 账户管理：在线会话 ---------- */
.pres-head { color: var(--txt-3); font-size: 11.5px; padding: 2px 0 8px; display: flex; gap: 10px; align-items: center; }
.pres-head b { color: var(--txt); }
.pres-time { margin-left: auto; }
.tbl-pres { table-layout: fixed; width: 100%; }
.tbl-pres th, .tbl-pres td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-pres .pres-who { width: 180px; }
.tbl-pres .c-ver { width: 130px; }
.tbl-pres .pres-ua { width: 150px; color: var(--txt-3); }
.tbl-pres td.mono { font-variant-numeric: tabular-nums; }
.pres-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #555c66; margin-right: 6px; }
.pres-dot.is-on { background: #3ecf8e; box-shadow: 0 0 0 3px rgba(62, 207, 142, .16); }
.pres-dev { color: #9dc7ff; font-size: 11.5px; margin-left: 6px; }
/* 侧栏角色角标 */
.role-tag {
    font-style: normal;
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 10.5px;
    line-height: 1.7;
    color: var(--txt-3);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
}
/* 登录审批：收起后右下角的小徽标 */
.gate-chip {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 12000;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(78, 161, 255, .55);
    background: rgba(20, 26, 36, .96);
    color: #cfe4ff;
    font-size: 12.5px;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
    animation: gateChipIn .2s ease both;
}
.gate-chip[hidden] { display: none !important; }
.gate-chip:hover { border-color: rgba(78, 161, 255, .9); color: #fff; }
.gate-chip b { color: #fff; }
.gate-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ea1ff;
    box-shadow: 0 0 0 3px rgba(78, 161, 255, .22);
    animation: gatePulse 1.8s ease-in-out infinite;
}
@keyframes gateChipIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes gatePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}
/* 卡片右上角收起按钮 */
.gate-x {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--txt-3);
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}
.gate-x:hover { color: #fff; }
/* ============ 细节质感（全部由真实状态驱动） ============ */

/* 数字滚动时不要跳字宽 */
.num-roll { font-variant-numeric: tabular-nums; }

/* ---------- 注入库：新建 / 复制模板面板 ---------- */
.il-tpl-mask {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 64px;
    background: rgba(6, 8, 12, .58);
    backdrop-filter: blur(2px);
}
.il-tpl-mask[hidden] { display: none !important; }
.il-tpl-box {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 120px);
    overflow: auto;
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
    padding: 16px 18px 12px;
}
.il-tpl-h { display: flex; align-items: center; gap: 10px; }
.il-tpl-h b { font-size: 14.5px; color: var(--txt); }
.il-tpl-note { flex: 1 1 auto; color: var(--txt-3); font-size: 11.5px; line-height: 1.5; }
.il-tpl-g {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0 6px;
}
.il-tpl-g label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--txt-3); min-width: 0; }
.il-tpl-g input, .il-tpl-g select {
    width: 100%;
    padding: 7px 9px;
    font-size: 12.5px;
    border-radius: 8px;
    background: var(--bg-2);
    color: var(--txt);
    border: 1px solid var(--line-2);
}
.il-tpl-g input[type="color"] { padding: 2px; height: 34px; }
.il-tpl-wide { grid-column: span 2; }
.il-tpl-f {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    margin-top: 6px;
}
.il-tpl-msg { color: #ffcf8b; font-size: 12px; margin-right: auto; }
.il-ops { white-space: nowrap; }
.il-ops .btn { padding: 4px 9px; font-size: 11.5px; margin-left: 4px; }
@media (max-width: 900px) {
    .il-tpl-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .il-tpl-wide { grid-column: span 2; }
}
/* ---------- 注入库：图片上传 + 编辑器 ---------- */
.il-tpl-img {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 0;
    padding: 12px;
    border: 1px dashed var(--line-2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
    flex-wrap: wrap;
}
.il-tpl-file { display: inline-flex; align-items: center; }
.il-tpl-file input[type="file"] { display: none; }
.il-tpl-file span {
    display: inline-block;
    padding: 7px 12px;
    font-size: 12.5px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.il-tpl-thumb {
    width: 62px;
    height: 62px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 10.5px;
    color: var(--txt-3);
    flex: 0 0 auto;
}
.il-tpl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.il-tpl-imgnote { flex: 1 1 220px; font-size: 11.5px; color: var(--txt-3); line-height: 1.6; }

.il-ed-mask {
    position: fixed;
    inset: 0;
    z-index: 12100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 8, 12, .66);
    backdrop-filter: blur(2px);
}
.il-ed-mask[hidden] { display: none !important; }
.il-ed-box {
    width: min(1180px, calc(100vw - 40px));
    height: min(760px, calc(100vh - 60px));
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
    overflow: hidden;
}
.il-ed-h {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.il-ed-h b { font-size: 14px; color: var(--txt); }
.il-ed-h code { color: var(--txt-3); font-size: 12px; flex: 1 1 auto; }
.il-ed-body { flex: 1 1 auto; display: flex; min-height: 0; }
.il-ed-col { flex: 1 1 50%; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); }
.il-ed-col:last-child { border-right: 0; }
.il-ed-t { padding: 8px 14px; font-size: 11.5px; color: var(--txt-3); border-bottom: 1px solid var(--line); }
.il-ed-col textarea {
    flex: 1 1 auto;
    width: 100%;
    resize: none;
    border: 0;
    outline: none;
    background: var(--bg-2);
    color: var(--txt);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    line-height: 1.6;
    padding: 12px 14px;
    white-space: pre;
    overflow: auto;
}
.il-ed-col iframe { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
.il-ed-f {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.il-ed-f input {
    flex: 1 1 320px;
    min-width: 200px;
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--bg-2);
    color: var(--txt);
    border: 1px solid var(--line-2);
    font-size: 12.5px;
}
.il-ed-msg { color: #ffcf8b; font-size: 12px; }
@media (max-width: 900px) {
    .il-ed-body { flex-direction: column; }
    .il-ed-col { flex: 1 1 50%; border-right: 0; border-bottom: 1px solid var(--line); }
}
/* ---------- 注入库：第 2 步 预览 + 微调 ---------- */
.il-tpl-box-b { width: min(1180px, calc(100vw - 32px)); }
.il-tpl-b2 {
    display: flex;
    gap: 12px;
    height: min(560px, calc(100vh - 300px));
    min-height: 320px;
    margin: 14px 0 12px;
}
.il-tpl-pv, .il-tpl-src {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.il-tpl-pv iframe { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
.il-tpl-src { background: var(--bg-2); }
.il-tpl-src textarea {
    flex: 1 1 auto;
    width: 100%;
    resize: none;
    border: 0;
    outline: none;
    background: var(--bg-2);
    color: var(--txt);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    line-height: 1.6;
    padding: 10px 12px;
    white-space: pre;
    overflow: auto;
}
.il-tpl-ask { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.il-tpl-ask input {
    flex: 1 1 auto;
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--bg-2);
    color: var(--txt);
    border: 1px solid var(--line-2);
    font-size: 12.5px;
}
@media (max-width: 900px) {
    .il-tpl-b2 { flex-direction: column; height: auto; }
    .il-tpl-pv, .il-tpl-src { height: 320px; flex: 0 0 auto; }
}
/* ---------- 注入库：第 2 步的入库信息行 ---------- */
.il-tpl-meta {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 2px;
}
.il-tpl-meta label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--txt-3); min-width: 0; }
.il-tpl-meta input, .il-tpl-meta select {
    width: 100%;
    padding: 7px 9px;
    font-size: 12.5px;
    border-radius: 8px;
    background: var(--bg-2);
    color: var(--txt);
    border: 1px solid var(--line-2);
}
.il-tpl-wait { padding: 18px 4px; color: var(--txt-2); font-size: 13px; }
@media (max-width: 900px) {
    .il-tpl-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- AI 新建页面：上传工作台 ---------- */
.il-tpl-box-up { width: min(620px, calc(100vw - 32px)); }
.il-up {
    margin: 16px 0 10px;
    padding: 42px 20px;
    border: 2px dashed var(--line-2);
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    transition: border-color .16s, background .16s;
    background: rgba(255, 255, 255, .015);
}
.il-up:hover, .il-up.is-over {
    border-color: var(--accent);
    background: rgba(60, 130, 255, .07);
}
.il-up-ico {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line-2);
    color: var(--txt-2);
    font-size: 24px;
    line-height: 44px;
    text-align: center;
}
.il-up-t { font-size: 14px; color: var(--txt); margin-bottom: 6px; }
.il-up-s { font-size: 11.5px; color: var(--txt-3); line-height: 1.7; }
.il-up-bar { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; }
.il-up-hint { margin-left: auto; font-size: 11.5px; color: var(--txt-3); }
/* ---------- AI 新建：确认截图屏 ---------- */
.il-cf {
    margin: 16px 0 8px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--bg-2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 52vh;
}
.il-cf img {
    display: block;
    max-width: 100%;
    max-height: 52vh;
    object-fit: contain;
}
.il-cf-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--txt-3);
    padding: 0 2px 10px;
}
/* ---------- AI 新建：模型选择行 ---------- */
.il-cf-model {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
    flex-wrap: wrap;
}
.il-cf-model label { font-size: 11.5px; color: var(--txt-3); }
.il-cf-model select {
    flex: 1 1 200px;
    min-width: 160px;
    padding: 7px 9px;
    font-size: 12.5px;
    border-radius: 8px;
    background: var(--bg-2);
    color: var(--txt);
    border: 1px solid var(--line-2);
}
.il-tpl-box-wide { width: min(940px, calc(100vw - 32px)); }
#imRows input {
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 7px;
    background: var(--bg-2);
    color: var(--txt);
    border: 1px solid var(--line-2);
}
/* ---------- 预览：标准手机尺寸（390×844） ---------- */
.il-tpl-pv { background: #0e1014; display: flex; align-items: center; justify-content: center; }
.il-phone-wrap {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px;
}
.il-phone {
    width: 390px;
    height: 844px;
    flex: 0 0 auto;
    background: #fff;
    border-radius: 34px;
    box-shadow: 0 0 0 9px #1b1e24, 0 14px 40px rgba(0, 0, 0, .55);
    overflow: hidden;
    transform-origin: center center;
    position: relative;
}
.il-phone iframe {
    width: 390px;
    height: 844px;
    border: 0;
    display: block;
    background: #fff;
}
.il-tpl-pv { overflow: hidden; }
#imRows input { min-width: 0; }
/* ---------- 预览可视化编辑 ---------- */
.il-vis {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
}
.il-vis[hidden] { display: none !important; }
.il-vis-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.il-vis-h b { font-size: 12.5px; color: var(--txt); }
.il-vis-h span { color: var(--txt-3); font-size: 11.5px; }
.il-vis-tip { margin-left: auto; }
.il-vis-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.il-vis-row > span { color: var(--txt-3); font-size: 11.5px; min-width: 48px; }
.il-vis-in {
    flex: 1 1 160px;
    min-width: 120px;
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 6px;
}
.il-vis-num {
    width: 62px;
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 6px;
}
.il-vis input[type="color"] {
    width: 34px;
    height: 26px;
    padding: 2px;
    border-radius: 6px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    cursor: pointer;
}
#iltVis.btn-primary { border-color: #2a80e6; }
/* 可视化编辑：图片宽度滑杆 */
.il-vis-range {
    flex: 1 1 140px;
    min-width: 110px;
    height: 22px;
    accent-color: #4ea1ff;
    padding: 0;
    background: transparent;
    border: 0;
}
.il-vis-wv {
    min-width: 54px;
    color: var(--txt);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
/* ---------- 注入库：草稿历史 ---------- */
.il-hist {
    margin: 10px 0 0;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    padding: 10px 12px;
}
.il-hist[hidden] { display: none !important; }
.il-hist-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.il-hist-h b { font-size: 12.5px; }
.il-hist-h span { color: var(--txt-3); font-size: 11.5px; flex: 1; }
.il-hist-list { max-height: 220px; overflow: auto; }
.il-hist-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--line-2);
    margin-bottom: 6px;
    background: rgba(255, 255, 255, .02);
}
.il-hist-row:hover { border-color: #2a80e6; }
.il-hist-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.il-hist-main b { font-size: 12.5px; color: var(--txt); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-hist-main span { font-size: 11px; color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 弹窗头部按钮不被长文案挤掉 + 上传屏历史入口 */
.il-tpl-h .btn { flex: 0 0 auto; white-space: nowrap; }
.il-up-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.il-up-bar .il-tpl-msg { flex: 1 1 auto; }
.il-up-bar .btn { flex: 0 0 auto; white-space: nowrap; }
/* 右下角轻提示（覆盖入库等） */
.ops-toast {
    position: fixed;
    right: 22px;
    bottom: 24px;
    z-index: 9999;
    max-width: 420px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(20, 26, 35, .96);
    border: 1px solid #2a80e6;
    color: #dbe6f5;
    font-size: 12.5px;
    line-height: 1.5;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.ops-toast.is-on { opacity: 1; transform: translateY(0); }
/* 可视化编辑：位置微调 */
.il-vis-k { color: var(--txt-3); font-size: 11.5px; }
.il-vis-tip2 { color: var(--txt-3); font-size: 11px; margin-left: 4px; }
#visAddImg { flex: 0 0 auto; white-space: nowrap; }
/* 注入库：下载菜单 */
.il-dl-menu {
    position: fixed;
    z-index: 10000;
    width: 200px;
    padding: 6px;
    border-radius: 10px;
    background: rgba(16, 21, 28, .98);
    border: 1px solid #2a3442;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.il-dl-pkg {
    font-size: 10.5px;
    color: var(--txt-3);
    padding: 2px 6px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #222b38;
    margin-bottom: 4px;
}
.il-dl-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #dbe6f5;
    font-size: 12.5px;
    cursor: pointer;
}
.il-dl-item:hover { background: #1d2836; color: #fff; }
.btn.ildl { padding: 3px 8px; font-size: 13px; line-height: 1; }
/* ---------- 域名管理 ---------- */
.dm-add {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 14px;
}
.dm-add input, .dm-add select {
    padding: 6px 9px;
    font-size: 12.5px;
    border-radius: 7px;
}
#dmInput { width: 240px; }
#dmNote { width: 220px; }
#dmCert { width: 190px; }
.dm-msg { color: var(--warn, #ffcf8b); font-size: 12px; }
.dm-tbl td, .dm-tbl th { vertical-align: middle; }
.dm-d { color: var(--txt); }
.dm-n { color: var(--txt-2); max-width: 260px; }
.dm-t { color: var(--txt-3); font-size: 11.5px; }
.dm-ok { color: #6fe3a8; font-size: 12px; }
.dm-dim { color: var(--txt-3); font-size: 11.5px; }
.dm-warn { color: #ffcf8b; font-size: 12px; }
.dm-tbl .dm-c1 { width: 96px; }
.dm-tbl .dm-c2 { width: 132px; }
.dm-tbl .dm-ops { width: 300px; white-space: nowrap; }
.dm-ops .btn { margin-right: 4px; }
/* 域名管理：443 绑定列 */
.dm-tbl .dm-c3 { width: 150px; }
.dm-tbl td .dm-dim { display: block; margin-top: 2px; font-size: 10.5px; }
/* 域名用途徽标 */
.dm-role {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 5px;
    font-size: 10px;
    line-height: 16px;
    color: var(--txt-3);
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, .04);
}
.dm-role.is-panel { color: #7fc7ff; border-color: #2a80e6; background: rgba(42, 128, 230, .12); }
#dmRole { width: 130px; }
/* 私有设备（仅超管可见）标记与右键菜单 */
.dtag.wseq-tag.is-private,
.dcard-model.is-private {
    color: #c9a6ff;
    border-color: #6b46c1;
    background: rgba(107, 70, 193, .16);
}
.dcard-model.is-private { border: 0; background: transparent; }
[data-spid] { cursor: default; }
.sp-menu {
    position: fixed;
    z-index: 10001;
    min-width: 250px;
    padding: 6px;
    border-radius: 10px;
    background: rgba(16, 21, 28, .98);
    border: 1px solid #6b46c1;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.sp-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #e3d9ff;
    font-size: 12.5px;
    cursor: pointer;
}
.sp-item:hover { background: #241a3d; color: #fff; }
/* 右键菜单：状态头 + 条目 */
.sp-head { padding: 6px 8px 4px; }
.sp-title { display: block; font-size: 12.5px; color: #e8e3ff; letter-spacing: .2px; }
.sp-sub { display: block; margin-top: 2px; font-size: 10.5px; color: var(--txt-3); }
.sp-state {
    display: flex; align-items: center; gap: 6px;
    margin: 2px 8px 4px; padding: 5px 8px;
    border-radius: 7px; background: rgba(255, 255, 255, .04);
    font-size: 11.5px; color: var(--txt-2);
}
.sp-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #5b6472; flex: 0 0 auto;
}
.sp-dot.is-on { background: #c9a6ff; box-shadow: 0 0 0 3px rgba(201, 166, 255, .18); }
.sp-sep { height: 1px; margin: 5px 6px; background: rgba(255, 255, 255, .07); }
.sp-item[disabled] { opacity: .38; cursor: default; }
.sp-item[disabled]:hover { background: transparent; color: #e3d9ff; }
.sp-close { color: var(--txt-3); }
/* 快捷面板只读（非超管）：能看，不能点 */
.rbar.is-ro .rbar-badge,
.rbar.is-ro .la-cfg-btn,
.rbar.is-ro .la-cfg,
.rbar.is-ro .la-run,
.rbar.is-ro .la-save,
.rbar.is-ro .la-reset { pointer-events: none; }
.rbar.is-ro .rbar-badge { cursor: default; opacity: .82; }
.rbar.is-ro .la-cfg-btn { opacity: .35; }
.rbar.is-ro .la-cfg { display: none !important; }
.rbar.is-ro .la-cfg-btn::after { content: '（只读）'; font-size: 10px; opacity: .7; }