:root {
  --admin-side-width: 220px;
  --admin-gap: 16px;
  --admin-header-height: 56px;
  --admin-table-row-height: 42px;
  --admin-bg: #f2f4f8;
  --admin-line: #d8dee8;
  --admin-text: #172033;
  --admin-muted: #64748b;
}

* { box-sizing: border-box; }
body { min-width: 1280px; background: var(--admin-bg); color: var(--admin-text); }
.layui-layout-admin .layui-header { height: var(--admin-header-height); }
.layui-layout-admin .layui-logo { width: var(--admin-side-width); height: var(--admin-header-height); line-height: var(--admin-header-height); color: #fff; font-size: 18px; font-weight: 700; }
.layui-layout-admin .layui-side { top: var(--admin-header-height); width: var(--admin-side-width); }
.layui-layout-admin .layui-body { top: var(--admin-header-height); left: var(--admin-side-width); bottom: 0; }
.webpop-header { display: flex; align-items: center; border-bottom: 1px solid #101827; }
.header-title { margin-left: var(--admin-side-width); font-size: 16px; font-weight: 700; color: #f8fafc; }
.header-actions { margin-left: auto; padding-right: var(--admin-gap); display: flex; align-items: center; gap: 8px; }
.auth-chip { display: inline-flex; align-items: center; min-width: 96px; max-width: 220px; height: 30px; padding: 0 10px; border: 1px solid #334155; border-radius: 4px; color: #e2e8f0; background: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.webpop-side .layui-nav-tree { width: var(--admin-side-width); }
.webpop-body { padding: var(--admin-gap); overflow: auto; }
.layui-tab { margin: 0 0 var(--admin-gap); background: #fff; border-bottom: 1px solid var(--admin-line); }
.layui-tab-title { height: 44px; border: 0; }
.layui-tab-title li { line-height: 44px; }
.view { display: none; }
.view.is-active { display: block; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--admin-gap); margin-bottom: var(--admin-gap); }
.metric-card { margin: 0; border: 1px solid var(--admin-line); box-shadow: none; }
.metric-card span { display: block; margin-bottom: 8px; color: var(--admin-muted); }
.metric-card strong { font-size: 28px; line-height: 1.2; }
.layui-card { margin-bottom: var(--admin-gap); border: 1px solid var(--admin-line); box-shadow: none; }
.layui-card-header { height: 42px; line-height: 42px; font-weight: 700; }
.toolbar { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(260px, 360px) auto auto auto; gap: 10px; align-items: center; max-width: none; }
.device-url-toolbar { grid-template-columns: 1fr; }
.current-url-link { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: #2563eb; font: inherit; line-height: 1.5; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.current-url-link:hover { color: #1d4ed8; text-decoration: underline; }
.current-url-link:focus-visible { border-radius: 3px; outline: 2px solid #60a5fa; outline-offset: 2px; }
.h5-entry-card { display: flex; align-items: center; gap: 22px; }
.h5-entry-card img { width: 180px; height: 180px; padding: 8px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; object-fit: contain; }
.h5-entry-detail { min-width: 0; display: grid; gap: 10px; }
.h5-entry-detail a { color: #2563eb; font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.h5-entry-detail a:hover { text-decoration: underline; }
@media (max-width: 640px) { .h5-entry-card { flex-direction: column; align-items: flex-start; } }
.inventory-toolbar { display: flex; gap: 8px; align-items: center; justify-content: flex-start; }
.inventory-toolbar .layui-btn { width: auto; min-width: 76px; margin: 0; }
.inventory-toolbar .inventory-tab { min-width: 94px; }
.pending-device-badge { display: inline-flex; width: 18px; height: 18px; margin-left: 4px; align-items: center; justify-content: center; border-radius: 50%; background: #ff4d4f; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; vertical-align: middle; }
.pending-device-badge[hidden] { display: none; }
.layui-btn .layui-icon { margin-right: 4px; }
.table-wrap { overflow: auto; }
.layui-table { margin: 0; min-width: 1040px; }
.layui-table th { background: #f8fafc; color: #334155; font-weight: 700; }
.layui-table th, .layui-table td { height: var(--admin-table-row-height); padding: 8px 10px; vertical-align: middle; }
.layui-table td { overflow-wrap: anywhere; }
.text-muted { color: var(--admin-muted); }
.h5-address-row { display: flex; align-items: center; gap: 16px; }
.h5-address-row a { font-size: 18px; font-weight: 700; color: #1677ff; }
.device-actions { min-width: 290px; white-space: nowrap; }
.auth-setting-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.auth-setting-row .layui-input { width: 130px; }
.screenshot-thumb { width: 128px; height: 72px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--admin-line); border-radius: 4px; background: #0b1220; overflow: hidden; cursor: pointer; }
.screenshot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-header-actions{display:flex;align-items:center;gap:10px}.card-header-spacer{flex:1}.card-header-actions .layui-btn{margin:0}.screenshot-select{display:flex;align-items:flex-start;gap:8px}.screenshot-select input{flex:0 0 16px;width:16px;height:16px;margin:2px 0 0;cursor:pointer}.screenshot-select>span{min-width:0}.screenshot-preview-select{align-items:center}.screenshot-preview-select .screenshot-thumb{flex:0 0 128px}
.command-select{display:flex;align-items:center;gap:8px;min-width:0}.command-select input{flex:0 0 16px;width:16px;height:16px;margin:0;cursor:pointer}.command-select>span{min-width:0;overflow-wrap:anywhere}
.screenshot-thumb.is-missing::after { content: "图片缺失"; color: #f8fafc; font-size: 12px; }
.screenshot-thumb.is-missing img { display: none; }
.is-modal-open { overflow: hidden; }
.screenshot-modal[hidden] { display: none; }
.screenshot-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 32px; }
.screenshot-modal__shade { position: absolute; inset: 0; background: rgba(15, 23, 42, .72); backdrop-filter: blur(2px); }
.screenshot-modal__panel { position: relative; z-index: 1; width: min(92vw, 1440px); height: min(90vh, 900px); display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); }
.screenshot-modal__header { height: 52px; flex: 0 0 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--admin-line); color: var(--admin-text); }
.screenshot-modal__close { width: 36px; height: 36px; border: 0; border-radius: 4px; background: transparent; color: #475569; font-size: 28px; line-height: 32px; cursor: pointer; }
.screenshot-modal__close:hover, .screenshot-modal__close:focus { background: #eef2f7; color: #0f172a; outline: none; }
.screenshot-preview { min-height: 0; flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; background: #0b1220; overflow: auto; }
.screenshot-preview img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.screenshot-preview__error { color: #f8fafc; font-size: 16px; }
.status-badge { display: inline-flex; align-items: center; min-width: 62px; justify-content: center; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; background: #e2e8f0; color: #334155; }
.status-online, .status-success { background: #dcfce7; color: #166534; }
.status-offline, .status-timeout, .status-failed, .status-partial_failed { background: #fee2e2; color: #991b1b; }
.status-pending, .status-sent, .status-acked, .status-running { background: #e0f2fe; color: #075985; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #111827; color: #dbeafe; border-radius: 4px; min-height: 96px; max-height: 280px; overflow: auto; padding: 12px; }

@media (min-width: 2560px) and (max-height: 1499px) {
  :root { --admin-side-width: 232px; --admin-gap: 16px; --admin-table-row-height: 42px; }
  .metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .layui-table { min-width: 1320px; }
}

@media (min-width: 2560px) and (min-height: 1500px) {
  :root { --admin-side-width: 236px; --admin-gap: 18px; --admin-table-row-height: 44px; }
  .metric-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .layui-card-header { height: 44px; line-height: 44px; }
  .layui-table { min-width: 1440px; }
  pre { max-height: 360px; }
}

@media (min-width: 3200px) {
  :root { --admin-side-width: 248px; --admin-gap: 20px; --admin-table-row-height: 46px; }
  .metric-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .layui-table { min-width: 1680px; }
}

@media (max-width: 1919px) {
  :root { --admin-side-width: 200px; --admin-gap: 12px; --admin-table-row-height: 38px; }
  .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .toolbar { grid-template-columns: 1fr; }
}
.account-toolbar{grid-template-columns:minmax(140px,1fr) minmax(140px,1fr) minmax(180px,1fr) auto}.account-toolbar .layui-input{min-width:0}
.account-toolbar .form-feedback{grid-column:1/-1;min-height:20px;margin-top:2px;font-size:13px;line-height:20px;color:#64748b}
.account-toolbar .form-feedback.is-error{color:#e53935}
.account-toolbar .form-feedback.is-success{color:#16a34a}
.inventory-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.inventory-toolbar .layui-select{width:180px;height:30px}.inventory-device-select{display:flex;align-items:flex-start;gap:9px;min-width:0}.inventory-device-select input{flex:0 0 16px;width:16px;height:16px;margin:2px 0 0;cursor:pointer}.inventory-device-select>span{min-width:0;overflow-wrap:anywhere}.inventory-device-select.is-disabled{opacity:.55}
.admin-login{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#f3f6fb}.admin-login[hidden]{display:none}.admin-login-card{box-sizing:border-box;width:min(420px,calc(100vw - 32px));padding:36px;border-radius:12px;background:#fff;box-shadow:0 18px 60px #0f172a1f}.admin-login-brand{color:#1677ff;font-size:22px;font-weight:800}.admin-login-card h1{margin:10px 0 6px;font-size:26px}.admin-login-card p{margin:0 0 24px;color:#667085}.admin-login-card label{display:grid;gap:8px;margin-bottom:16px;color:#344054;font-weight:600}.admin-login-card .layui-input{height:44px}.admin-login-card .layui-btn{height:44px;margin-top:4px}.admin-login-error{min-height:22px;margin-top:14px;color:#d92d20;text-align:center}
.action-popover{position:fixed;z-index:10020;box-sizing:border-box;padding:14px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;box-shadow:0 12px 34px #1018282e}.action-popover[hidden]{display:none}.action-popover-title{display:block;margin-bottom:6px;color:#101828;font-size:14px}.action-popover-message{white-space:pre-line;color:#667085;font-size:13px;line-height:1.55}.action-popover-input{height:36px;margin-top:10px}.action-popover-error{min-height:18px;margin-top:5px;color:#d92d20;font-size:12px}.action-popover-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:7px}.action-popover .layui-btn+.layui-btn{margin-left:0}
.findip-credential-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: end; }
.findip-top-grid { display: grid; grid-template-columns: minmax(340px, 1.05fr) minmax(360px, 1.15fr) minmax(300px, .8fr); gap: var(--admin-gap); align-items: stretch; }
.findip-top-grid > .layui-card { min-width: 0; display: flex; flex-direction: column; }
.findip-top-grid > .layui-card > .layui-card-body { flex: 1; }
.findip-quick-add-body { min-height: 205px; display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; }
.findip-quick-add-body img { width: 148px; height: 148px; padding: 5px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; }
.findip-quick-add-body a { max-width: 100%; color: #2563eb; font-size: 12px; overflow-wrap: anywhere; }
.findip-quick-add-actions { display: flex; gap: 7px; }
.findip-credential-grid label { display: grid; gap: 6px; color: #475569; }
.findip-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.findip-account-status { grid-column: 1 / -1; min-height: 44px; margin-top: 8px; padding-top: 12px; border-top: 1px solid #e2e8f0; line-height: 1.7; white-space: pre-line; }
.findip-mapping-card .layui-card-body { min-height: 205px; display: grid; align-items: center; }
.findip-mapping-form { display: grid; gap: 14px; }
.findip-mapping-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.findip-mapping-actions .layui-btn { width: 100%; margin: 0; }
#findIpStatusFilter { width: 110px; height: 30px; }
.findip-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 0 2px; }
.findip-pagination label { display: flex; align-items: center; gap: 6px; color: #64748b; }
.findip-pagination .layui-select { width: 78px; height: 30px; }
@media (max-width: 1500px) { .findip-top-grid { grid-template-columns: repeat(3, minmax(280px, 1fr)); } }
@media (max-width: 900px) { .findip-top-grid, .findip-credential-grid { grid-template-columns: 1fr; } }
.capture-modal[hidden] { display: none; }
.capture-modal { position: fixed; inset: 0; z-index: 10030; display: grid; place-items: center; padding: 24px; }
.capture-modal-shade { position: absolute; inset: 0; background: #0f172ab8; }
.capture-modal-panel { position: relative; width: min(440px, calc(100vw - 32px)); overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 24px 70px #0006; }
.capture-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #e2e8f0; }
.capture-modal-head button { width: 32px; height: 32px; border: 0; background: transparent; color: #64748b; font-size: 26px; cursor: pointer; }
.capture-modal-body { display: grid; justify-items: center; gap: 10px; padding: 22px; text-align: center; }
.capture-modal-body img { width: 280px; height: 280px; padding: 8px; border: 1px solid #e2e8f0; background: #fff; }
.capture-modal-body p { margin: 2px 0; color: #0f172a; font-size: 15px; }.capture-modal-body small { color: #64748b; line-height: 1.6; }
.capture-modal-actions { display: flex; gap: 8px; margin-top: 6px; }