@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root {
  /* 背景层级（暖炭灰，与车机 App 一致） */
  --bg: #0E0F13;            /* 页面底色 */
  --panel: #191B21;         /* 卡片表面 */
  --panel-2: #23262E;       /* 次级表面 / 输入框 */
  --panel-3: #2C303A;       /* 三级表面 / 表头 */
  /* 描边 */
  --line: #2A2E37;          /* 主描边 */
  --line-soft: #353A45;     /* 弱描边 */
  /* 文本层级 */
  --text: #F3F4F6;          /* 主文本 */
  --muted: #A7ABB4;         /* 次文本 */
  --text-low: #82868F;      /* 弱文本 */
  /* 主色：信号琥珀（车机仪表盘质感） */
  --accent: #FF7A1A;
  --amber: #FF7A1A;
  --accent-soft: #FF9A4D;
  --accent-dim: #B5570F;
  --accent-line: #432716;
  --on-accent: #1A0E02;     /* 琥珀按钮上的深色字 */
  /* 辅助结构色 */
  --accent-2: #6E8EF6;      /* 钢蓝（辅助强调） */
  --accent-3: #3DD68C;      /* 青绿（语义 / 点缀） */
  /* 语义色 */
  --ok: #3DD68C; --warn: #FFB020; --danger: #FF5C5C;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.35);
  --grad: linear-gradient(135deg, #FF9A4D 0%, #FF7A1A 55%, #B5570F 100%);
  /* 中灰文本（标签 / 标签控件，原先被多处引用但未定义，此处补齐） */
  --text-mid: #C9CDD6;
  /* 按钮专属令牌（统一规范：所有按钮共用，确保视觉一致） */
  --btn-radius: 11px;            /* 统一圆角 */
  --btn-pad-y: 9px; --btn-pad-x: 16px;       /* 默认内边距 */
  --btn-pad-sm-y: 7px; --btn-pad-sm-x: 12px; /* 小尺寸内边距 */
  --btn-focus: rgba(255,122,26,.45);          /* 键盘聚焦环 */
}

* { box-sizing: border-box; }
body {
  margin: 0; background:
    radial-gradient(1100px 620px at 12% -12%, rgba(255,122,26,.10), transparent 60%),
    radial-gradient(900px 520px at 110% 0%, rgba(110,142,246,.07), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: "Sora", "Manrope", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 关键：确保 hidden 属性始终生效（覆盖下方 .login/.app 的 display 规则） */
[hidden] { display: none !important; }

/* 登录 */
.login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(900px 520px at 50% -10%, #20160d, var(--bg)); }
.login-card { width: 380px; background: linear-gradient(180deg, var(--panel), #14161c);
  border: 1px solid var(--line-soft); border-radius: 22px; padding: 40px 36px; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.login-logo { display: block; height: 72px; width: auto; margin: 0 auto 12px; border-radius: 18px; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.login-card h1 { margin: 0; font-size: 27px; letter-spacing: .5px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-card .sub { color: var(--muted); margin: 8px 0 26px; font-size: 14px; }
.login-card input { width: 100%; padding: 15px 16px; border-radius: 13px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-size: 16px; outline: none; margin-bottom: 16px;
  transition: border-color .2s, box-shadow .2s; font-family: inherit; }
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,26,.20); }
/* 登录按钮统一使用 .btn .primary .btn-block（与系统按钮共享圆角/字号/过渡/聚焦环令牌） */
.btn.btn-block { width: 100%; padding-top: 12px; padding-bottom: 12px; }
.hint { color: var(--muted); font-size: 13px; margin-top: 14px; }
.login-hint { color: var(--muted); font-size: 13px; min-height: 18px; margin-top: 12px; text-align: center; }
.text-muted { color: var(--muted); font-size: 13px; }

/* ============ 主框架：侧边栏 + 主内容 ============ */
.app { min-height: 100vh; display: flex; }

/* 侧边导航（分组 + 可折叠） */
.side { flex: 0 0 232px; align-self: stretch; min-height: 100vh;
  display: flex; flex-direction: column; gap: 6px; padding: 22px 14px;
  background: linear-gradient(180deg, #14161c, #0e0f13);
  border-right: 1px solid var(--line); position: sticky; top: 0;
  transition: flex-basis .22s ease, padding .22s ease, transform .25s ease; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 6px 12px 20px;
  white-space: nowrap; overflow: hidden; }
.side-logo { height: 30px; width: auto; border-radius: 8px; display: block; flex: 0 0 auto; }
.side-title { font-size: 18px; font-weight: 800; letter-spacing: .5px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.side-nav { display: flex; flex-direction: column; gap: 14px; flex: 1; overflow-y: auto; overflow-x: hidden; }
.side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.side-ver { padding: 4px 12px; color: var(--text-low); font-size: 11px; letter-spacing: .4px;
  white-space: nowrap; overflow: hidden; }

/* 分组标题 */
.nav-group { display: flex; flex-direction: column; gap: 6px; }
.nav-group-label { padding: 0 16px 2px; color: var(--text-low); font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; }
.nav-group-label::after { content: ''; display: block; margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,.05); }

.nav-item { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 16px; border: 1px solid transparent; border-radius: 12px;
  background: transparent; color: var(--muted); font-size: 15px; font-weight: 600;
  cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden;
  transition: background .18s, color .18s, border-color .18s, transform .1s; }
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item:active { transform: scale(.98); }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-item .nav-ico { font-size: 18px; width: 22px; text-align: center; flex: 0 0 auto; }
.nav-item .nav-label { overflow: hidden; text-overflow: ellipsis; }
.nav-item.active { background: linear-gradient(90deg, var(--accent), var(--accent-dim)); color: var(--on-accent);
  border-color: rgba(255,200,150,.18); box-shadow: 0 6px 16px rgba(255,122,26,.30); }

/* 桌面折叠态：侧栏收窄为图标栏（.app.side-collapsed） */
.app.side-collapsed .side { flex-basis: 68px; padding: 22px 10px; }
.app.side-collapsed .side-title,
.app.side-collapsed .nav-group-label,
.app.side-collapsed .side-ver,
.app.side-collapsed .nav-item .nav-label { display: none; }
.app.side-collapsed .side-brand { justify-content: center; padding-bottom: 18px; }
.app.side-collapsed .nav-item { justify-content: center; gap: 0; padding: 13px 0; }
.app.side-collapsed .nav-group-label::after { margin-top: 0; }

/* 主内容区 */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 28px; background: linear-gradient(180deg, rgba(25,27,33,.96), rgba(25,27,33,.86));
  border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 20; }
.top-lead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.top-heading { min-width: 0; }
.top-title { font-size: 19px; font-weight: 800; letter-spacing: .5px; line-height: 1.25;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.top-desc { color: var(--text-low); font-size: 12px; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* 侧栏开关按钮（汉堡） */
.icon-btn { width: 38px; height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--btn-radius); border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font-size: 16px; cursor: pointer; transition: background .15s, border-color .15s, transform .12s; }
.icon-btn:hover { background: var(--panel-3); border-color: var(--line-soft); }
.icon-btn:active { transform: scale(.94); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 账户菜单 */
.account { position: relative; }
.account-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s; }
.account-btn:hover { background: var(--panel-3); border-color: var(--line-soft); }
.account-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-dim)); }
.account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-caret { color: var(--text-low); font-size: 10px; }
.account-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 172px; z-index: 60;
  background: linear-gradient(180deg, #1d2027, var(--panel)); border: 1px solid var(--line-soft);
  border-radius: 14px; padding: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 2px; }
.account-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px;
  border: none; border-radius: 10px; background: transparent; color: var(--text); font-size: 14px;
  font-weight: 600; cursor: pointer; text-align: left; font-family: inherit; transition: background .15s; }
.account-item:hover { background: var(--panel-2); }
.account-item.danger { color: var(--danger); }
.account-item.danger:hover { background: rgba(255,92,92,.12); }
.account-item .nav-ico { font-size: 15px; width: 18px; text-align: center; }

/* 移动端抽屉遮罩 */
.scrim { position: fixed; inset: 0; background: rgba(8,9,12,.62); backdrop-filter: blur(2px);
  z-index: 39; opacity: 0; pointer-events: none; transition: opacity .22s; }
.scrim.show { opacity: 1; pointer-events: auto; }

.body { padding: 22px 28px; flex: 1; }
.main > section { padding: 22px 28px; flex: 1; overflow-y: auto; }

/* 筛选 */
.filters { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.filters-ico { font-size: 16px; opacity: .7; }
.filters input { flex: 1; max-width: 420px; padding: 11px 15px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 15px; outline: none; font-family: inherit;
  transition: border-color .2s, box-shadow .2s; }
.filters input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,26,.18); }
.count { color: var(--muted); font-family: "JetBrains Mono", ui-monospace, monospace; }

/* 表格容器卡片 */
.table-card { border-radius: var(--radius); }

/* 页面小标题（分类/公告/下载记录等子页头部） */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.page-head > span { font-size: 18px; font-weight: 800; }
.page-head > div { display: flex; gap: 10px; }

/* 表格卡片化 + 斑马纹 + hover */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.tbl th, .tbl td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; }
.tbl thead th { color: #c9cdd6; font-weight: 700; background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  letter-spacing: .3px; position: sticky; top: 0; z-index: 3; }
.tbl tbody tr { transition: background .15s; }
/* 弹窗内滚动表格：表头 sticky 需要滚动容器自身提供滚动上下文，避免被外层 modal-card 的 overflow 裁剪 */
.table-card { position: relative; }
/* 关键修复：.tbl 自带的 overflow:hidden 会成为一个「中间滚动容器」，掐断 thead sticky 相对 .table-card 的粘性。
   解除它（仅作用于包在 .table-card 内的滚动表），让表头随 .table-card 滚动固定；圆角裁剪交由 .table-card(overflow:auto) 完成。 */
.table-card > .tbl { overflow: visible; }
.table-card .tbl { position: relative; }
.tbl tbody tr:nth-child(even) { background: rgba(255,255,255,.018); }
.tbl tbody tr:hover { background: rgba(255,122,26,.08); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl th:first-child, .tbl td:first-child { padding-left: 18px; }
.tbl .cb-col { width: 44px; text-align: center; padding-left: 0; padding-right: 0; }
.tbl .cb-col input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.tbl .num-col { width: 50px; text-align: right; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; padding-right: 10px; }
.tbl img { width: 42px; height: 42px; border-radius: 11px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.tbl .ops { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============ 统一按钮规范 ============
   所有按钮共用同一圆角(--btn-radius)、字号(14px/600)、过渡曲线与盒模型。
   关键：每个变体都带 1px 边框（无边框变体用透明边框），保证并排时高度完全一致。
   层级：primary(强调) > neutral/ghost(次级) > danger(危险)。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-size: 14px; font-weight: 600; line-height: 1.4; font-family: inherit;
  color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .15s ease, filter .15s ease, transform .12s ease;
}
.btn:hover { background: var(--panel-3); border-color: var(--line-soft); }
.btn:active { transform: scale(.97); }
/* 键盘聚焦统一环（用 outline 避免覆盖各变体原有 box-shadow 阴影） */
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 主操作（强调） */
.btn.primary {
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  color: var(--on-accent); border-color: transparent;
  box-shadow: 0 6px 18px rgba(255,122,26,.32);
}
.btn.primary:hover { filter: brightness(1.05); box-shadow: 0 8px 24px rgba(255,122,26,.42); border-color: transparent; }

/* 次级 / 幽灵（与默认同底，仅语义区分） */
.btn.ghost { background: var(--panel-2); color: var(--text); }
.btn.ghost:hover { background: var(--panel-3); border-color: var(--line-soft); }

/* 危险操作 */
.btn.danger {
  background: var(--danger); color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(255,92,92,.28);
}
.btn.danger:hover { filter: brightness(1.06); border-color: transparent; }

/* 小尺寸 */
.btn-sm { padding: var(--btn-pad-sm-y) var(--btn-pad-sm-x); font-size: 13px; }

/* 禁用态（所有变体统一：变灰、禁用指针、去掉交互反馈） */
.btn:disabled, .btn[disabled] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
  filter: none; box-shadow: none; transform: none;
}

/* 弹窗 */
.modal { position: fixed; inset: 0; background: rgba(8,9,12,.72); display: flex;
  align-items: center; justify-content: center; padding: 24px; z-index: 50; backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.modal-card { width: min(760px, 96vw); max-height: 90vh; overflow-y: auto; background: linear-gradient(180deg, #1d2027, var(--panel));
  border: 1px solid var(--line-soft); border-radius: 20px; padding: 26px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal-head h2 { margin: 0; font-size: 21px; }
.x { width: 38px; height: 38px; border-radius: var(--btn-radius); border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); cursor: pointer; transition: background .15s ease, transform .12s ease, border-color .15s ease; }
.x:hover { background: var(--danger); color: #fff; border-color: transparent; }
.x:active { transform: scale(.94); }
.x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 表单 */
.form .row { display: flex; gap: 16px; margin-bottom: 14px; }
.form label { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.form label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.form input[type=text], .form input:not([type=checkbox]):not([type=file]), .form select, .form textarea {
  padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); font-size: 15px; outline: none; font-family: inherit;
  transition: border-color .2s, box-shadow .2s; }
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,26,.18); }
.form textarea { resize: vertical; }
.form small { color: var(--accent); font-size: 12px; }
.form .or { color: var(--muted); font-size: 12px; margin-top: 4px; }
.form input[type=url] { margin-top: 2px; }
.icon-preview { width: 56px; height: 56px; border-radius: 12px; margin-top: 8px; border: 1px solid var(--line); display: none; object-fit: cover; background: var(--panel-2); }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; }

.toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
  background: rgba(20,22,28,.96); border: 1px solid var(--line-soft); color: var(--text);
  padding: 13px 24px; border-radius: 13px; font-size: 15px; opacity: 0; pointer-events: none;
  transition: all .25s; z-index: 100; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 卡密管理 */
.lic-gen { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.lic-gen input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-size: 15px; outline: none; font-family: inherit; transition: border-color .2s, box-shadow .2s; }
.lic-gen input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,26,.18); }
.lic-gen input[type=number] { width: 92px; }
.lic-gen input[type=text] { width: 165px; }
.lic-gen select { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-size: 14px; outline: none; font-family: inherit;
  min-width: 200px; max-width: 300px; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.lic-gen select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,26,.18); }
/* 编辑弹窗：APP 多选下拉 */
.form select#l_appId { min-width: 240px; cursor: pointer; }
.tbl code { background: var(--panel-3); padding: 5px 9px; border-radius: 7px; border: 1px solid var(--line);
  font-size: 13px; letter-spacing: 1px; color: #ffd2ad; font-family: "JetBrains Mono", ui-monospace, monospace; }

/* 站点设置分隔与子标题（自身更新区块） */
.sep { border: none; border-top: 1px dashed var(--line-soft); margin: 18px 0; }
.sub-title { color: var(--text); font-size: 14px; font-weight: 700; margin: 4px 0 12px;
  padding-left: 10px; border-left: 3px solid var(--accent); }

/* 下载记录（可追溯审计） */
.dl-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.dl-stat { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 20px; min-width: 140px; flex: 1; box-shadow: var(--shadow-sm);
  transition: transform .15s, border-color .2s; }
.dl-stat:hover { transform: translateY(-2px); border-color: var(--line-soft); }
.dl-stat-num { font-size: 24px; font-weight: 800; background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent; word-break: break-word;
  font-family: "JetBrains Mono", ui-monospace, monospace; }
.dl-stat-num.dl-small { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.5;
  background: none; -webkit-background-clip: initial; }
.dl-stat-label { color: var(--muted); font-size: 13px; margin-top: 4px; }
.dl-filters { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.dl-filters input, .dl-filters select { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-size: 14px; outline: none; font-family: inherit; transition: border-color .2s, box-shadow .2s; }
.dl-filters input:focus, .dl-filters select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,26,.18); }
.dl-filters input[type=text] { width: 200px; }
.dl-filters input[type=date] { width: 150px; }
.dl-filters input[type=datetime-local] { width: 172px; }
.dl-filters .lic-time-sep { color: var(--text-low); font-size: 13px; user-select: none; }
/* 商店管理筛选栏：搜索框自适应、下拉统一宽度、重置按钮筛选激活态高亮 */
.app-filters input[type=text] { flex: 1; min-width: 200px; max-width: 360px; }
.app-filters select { min-width: 132px; cursor: pointer; }
.app-filters .filters-ico { font-size: 15px; opacity: .7; }
.app-filters .count { margin-left: auto; }
.app-filters .btn.ghost.on {
  background: rgba(255,122,26,.12); color: var(--accent);
  border-color: rgba(255,122,26,.45); box-shadow: 0 4px 14px rgba(255,122,26,.22);
}
.app-filters .btn.ghost.on:hover { background: rgba(255,122,26,.2); }
.auto-refresh-hint { color: #82868F; font-size: 12px; margin-left: 2px; }
.dl-pagebar { display: flex; gap: 14px; align-items: center; margin: 16px 0; }

/* 滚动条美化 */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-soft); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #4a505d; }

/* 弹窗加宽版 */
.modal-card.wide { width: min(1584px, 96vw); max-height: 96vh; }

/* 站点设置弹窗 */
.site-card { width: min(680px, 96vw); }
.site-form { display: flex; flex-direction: column; gap: 0; }
.site-section { border: 1px solid var(--line-soft); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.site-section-title { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--bg1, rgba(255,255,255,.03)); font-size: 14px; font-weight: 700; color: var(--text); }
.site-section-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--amber, #FF7A1A); color: #fff; font-size: 12px; font-weight: 700; }
.site-section-body { padding: 14px 16px 4px; display: flex; flex-direction: column; gap: 14px; }
.site-section-body .row { margin-bottom: 0; }
.site-section-body label { font-size: 12px; }
.site-subgroup { border-left: 3px solid var(--amber, #FF7A1A); padding-left: 14px; display: flex; flex-direction: column; gap: 12px; }
.site-subgroup-label { font-size: 12px; font-weight: 700; color: var(--amber, #FF7A1A); letter-spacing: .03em; }
.site-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 14px 0 0; border-top: 1px solid var(--line-soft); margin-top: 4px; position: sticky; bottom: -26px; background: var(--panel); padding-right: 26px; padding-left: 26px; margin-left: -26px; margin-right: -26px; }
@media (max-width: 600px) {
  .site-section-body .row { flex-direction: column; gap: 14px; }
  .site-actions { position: static; padding: 14px 0 0; margin: 4px 0 0; }
}

/* 小型表格（弹窗内） */
.tbl-sm th, .tbl-sm td { padding: 9px 12px; font-size: 13px; }
.tbl-sm code { font-size: 12px; }

/* 已装应用详情：搜索框 + 列间距微调 */
.detail-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-sub > span { flex: 0 0 auto; }
#installedDetailSearch { flex: 0 1 300px; width: 300px; max-width: 60%; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; font-size: 13px; }
#installedDetailSearch:focus { outline: none; border-color: var(--accent); }
/* 应用名/版本/类型 三列间距减小；包名↔应用名 间距保持原样 */
.installed-apps-tbl th:nth-child(2), .installed-apps-tbl td:nth-child(2) { padding-left: 12px; padding-right: 6px; }
.installed-apps-tbl th:nth-child(3), .installed-apps-tbl td:nth-child(3) { padding-left: 6px; padding-right: 6px; }
.installed-apps-tbl th:nth-child(4), .installed-apps-tbl td:nth-child(4) { padding-left: 6px; padding-right: 12px; }
.installed-apps-tbl th:nth-child(5), .installed-apps-tbl td:nth-child(5) { padding-left: 6px; padding-right: 12px; }
/* 单元格不换行：长包名/长版本单行显示，列宽由 JS 按最长内容计算，溢出时外层横向滚动 */
.installed-apps-tbl th, .installed-apps-tbl td { white-space: nowrap; }
/* 状态徽标：统一带边框，用户/系统类型视觉一致 */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; line-height: 1.5;
  background: rgba(255,122,26,.14); color: var(--accent); border: 1px solid var(--line-soft); }
.badge-user { background: rgba(110,142,246,.14); color: #8daaf8; border: 1px solid var(--line-soft); }
.badge-on { background: rgba(54,199,120,.16); color: #43d17e; }
.badge-off { background: rgba(255,92,92,.16); color: #ff7a7a; }

/* 截图预览（编辑弹窗多选上传） */
.shot-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.shot-thumb { position: relative; width: 96px; height: 170px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-del { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; line-height: 18px; text-align: center; border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; font-size: 14px; padding: 0; }
.shot-del:hover { background: var(--danger); }
.shot-link-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.shot-link-row input[type=url] { flex: 1; }
.form-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-mid); line-height: 1.5; }
.form-hint code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
/* 应用列表截图缩略图 */
.shot-cells { display: flex; gap: 4px; }
.shot-cell { width: 44px; height: 78px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); background: var(--panel-2); }

/* 主题子包编辑器（1~4 个 RRO overlay，全必选） */
.theme-editor-head { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.theme-editor-head strong { font-size: 13px; }
#partRows { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.part-row { display: grid; grid-template-columns: 22px 1fr 1.4fr 1.2fr 1.2fr 52px; gap: 8px; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.part-row input[type=text] { min-width: 0; padding: 6px 8px; }
.p-idx { font-size: 13px; font-weight: 600; color: var(--accent); text-align: center; }
.p-file { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-mid); cursor: pointer; min-width: 0; }
.p-file input[type=file] { font-size: 11px; max-width: 100%; }
.p-file-tip { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .part-row { grid-template-columns: 22px 1fr 1fr 52px; } .part-row .p-target { grid-column: 2 / span 2; } }

/* ============ 响应式体系 ============ */
/* 平板及以下：侧栏转为抽屉（汉堡开关 + 遮罩），折叠态失效 */
@media (max-width: 1020px) {
  .app { flex-direction: column; }
  .app.side-collapsed .side { flex-basis: 248px; padding: 22px 14px; }
  .app.side-collapsed .side-title,
  .app.side-collapsed .nav-group-label,
  .app.side-collapsed .side-ver,
  .app.side-collapsed .nav-item .nav-label { display: initial; }
  .app.side-collapsed .side-brand { justify-content: flex-start; }
  .app.side-collapsed .nav-item { justify-content: flex-start; gap: 12px; padding: 13px 16px; }
  .side { position: fixed; top: 0; bottom: 0; left: 0; width: 248px; flex-basis: 248px;
    min-height: 0; z-index: 40; transform: translateX(-105%);
    box-shadow: 30px 0 60px rgba(0,0,0,.4); }
  .side.drawer-open { transform: translateX(0); }
  .top { padding: 10px 16px; }
  .body, .main > section { padding: 18px 16px; }
  .top-desc { display: none; }
}

/* 手机：表格卡片化 + 顶栏紧凑 */
@media (max-width: 640px) {
  .top-title { font-size: 16px; }
  .account-name, .account-caret { display: none; }
  .account-btn { padding: 7px 9px; }
  .body, .main > section { padding: 14px 12px; }
  .dl-filters, .lic-gen, .syslog-filters { gap: 8px; padding: 12px; }
  .dl-filters input, .dl-filters select { width: auto; min-width: 0; flex: 1 1 140px; }

  /* 主区表格转卡片：字段名由内联脚本写入 td[data-l]。
     仅作用于 section 内的数据表——#app 内还有 cmdDetail/batchProgress 两个弹窗表格，需保持常规表格。 */
  #app section .tbl { display: block; background: transparent; border: none; border-radius: 0; box-shadow: none; overflow: visible; }
  #app section .tbl thead { display: none; }
  #app section .tbl tbody { display: block; }
  #app section .tbl tbody tr { display: block; margin: 10px 0; background: var(--panel);
    border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
  #app section .tbl tbody tr:nth-child(even) { background: var(--panel); }
  #app section .tbl tbody td { display: flex; align-items: baseline; gap: 10px;
    padding: 10px 14px; border-bottom: 1px dashed rgba(53,58,69,.6); text-align: right;
    word-break: break-word; }
  #app section .tbl tbody td:first-child { padding-left: 14px; }
  #app section .tbl tbody td::before { content: attr(data-l); flex: 0 0 auto; min-width: 68px;
    color: var(--text-low); font-size: 12px; font-weight: 600; text-align: left; }
  #app section .tbl tbody td:empty::before { display: none; }
  #app section .tbl tbody tr:last-child td { border-bottom: none; }
  /* 空态行（colspan 整行提示）居中显示，不打字段标签 */
  #app section .tbl tbody td[colspan] { justify-content: center; color: var(--muted); }
  #app section .tbl tbody td[colspan]::before { content: none; }
  #app section .tbl .ops { justify-content: flex-end; }
  #app section .msg-cell { max-width: none; white-space: normal; }
}

/* ---------------- 用户与权限（RBAC） ---------------- */
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab { padding: 9px 18px; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text-mid); border-radius: var(--btn-radius); cursor: pointer; font-size: 14px;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; }
.tab:hover { background: var(--panel-3); border-color: var(--line-soft); }
.tab:active { transform: scale(.97); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------------- 应用管理整合页（已装应用 / 系统日志 / 远程指令 / 指令历史） ---------------- */
.dev-tabs { display: flex; gap: 10px; margin: 2px 0 18px; flex-wrap: wrap; }
.dev-tabs .tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px;
  font-size: 14.5px; font-weight: 600; border-radius: 11px; }
.dev-tabs .tab .tab-ico { font-size: 15px; line-height: 1; }
.dev-tabs .tab.active { box-shadow: 0 4px 14px rgba(255,122,26, .22); }
#devSection { padding-top: 4px; }
@media (max-width: 640px) {
  .dev-tabs { gap: 7px; }
  .dev-tabs .tab { padding: 9px 14px; font-size: 13.5px; flex: 1 1 auto; justify-content: center; }
}

.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 16px; margin: 4px 0 6px; }
.perm-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.perm-item input { width: 16px; height: 16px; accent-color: var(--accent); }

.tag-super { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 11px; line-height: 1.6;
  border-radius: 6px; background: rgba(255,122,26,0.16); color: var(--accent); border: 1px solid rgba(255,122,26,0.4); }
.tag-on { color: #2ecc71; }
.tag-off { color: var(--danger); }

/* ===================== 系统日志浏览器 ===================== */
.syslog-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.syslog-filters .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.syslog-filters input, .syslog-filters select {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-size: 14px; outline: none; min-width: 120px;
}
.syslog-filters .lvl-label { color: var(--muted); font-size: 13px; }
.syslog-filters .lvl { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; cursor: pointer; }
.syslog-filters .lvl input { min-width: 0; width: 16px; height: 16px; }
.syslog-filters .spacer { flex: 1; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--btn-radius); overflow: hidden; }
.seg-btn { background: var(--panel-2); color: var(--muted); border: none; padding: 9px 14px; font-size: 13px; cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .12s ease; }
.seg-btn:hover { background: var(--panel-3); color: var(--text); }
.seg-btn:active { transform: scale(.97); }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg-btn.active { background: var(--accent); color: var(--on-accent); font-weight: 700; }

.lvl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.lvl-V { color: #9aa0aa; } .lvl-D { color: #6EA8FE; } .lvl-I { color: #3DD68C; }
.lvl-W { color: #FFB020; } .lvl-E { color: #FF5C5C; } .lvl-F { color: #FF2D6F; }
.lvl-pill { display: inline-block; min-width: 20px; text-align: center; padding: 1px 7px; border-radius: 6px; font-weight: 700; font-size: 12px; font-family: "JetBrains Mono", monospace; }
.lvl-pill.V { background: rgba(154,160,170,.18); color: #c9cdd6; }
.lvl-pill.D { background: rgba(110,168,254,.18); color: #9ec5ff; }
.lvl-pill.I { background: rgba(61,214,140,.18); color: #7be3b0; }
.lvl-pill.W { background: rgba(255,176,32,.18); color: #ffd27a; }
.lvl-pill.E { background: rgba(255,92,92,.20); color: #ff9a9a; }
.lvl-pill.F { background: rgba(255,45,111,.20); color: #ff8fb3; }
.msg-cell { max-width: 640px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "JetBrains Mono", monospace; font-size: 12px; }

/* 时间线视图 */
.timeline { display: flex; flex-direction: column; gap: 0; padding: 6px 4px; }
.tl-item { display: grid; grid-template-columns: 86px 18px 1fr; gap: 10px; align-items: start; padding: 6px 0; border-left: 2px solid var(--line); margin-left: 8px; padding-left: 14px; position: relative; }
.tl-item::before { content: ''; position: absolute; left: -7px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--panel-3); border: 2px solid var(--line-soft); }
.tl-item .tl-time { color: var(--text-low); font-size: 12px; font-family: "JetBrains Mono", monospace; padding-top: 1px; }
.tl-item .tl-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; }
.tl-item .tl-body { font-size: 13px; line-height: 1.5; }
.tl-item .tl-head { display: flex; gap: 8px; align-items: center; margin-bottom: 2px; }
.tl-item .tl-tag { color: var(--accent-2); font-weight: 600; font-size: 12px; }
.tl-item .tl-buf { color: var(--text-low); font-size: 11px; }
.tl-item .tl-msg { color: var(--text); font-family: "JetBrains Mono", monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; }

/* ===================== 远程指令 / 设备 ===================== */
.dev-online { color: #2ecc71; font-weight: 600; }
.dev-offline { color: var(--text-low); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.wait { background: rgba(255,176,32,.16); color: #ffd27a; }
.badge.run { background: rgba(110,168,254,.16); color: #9ec5ff; }
.badge.ok { background: rgba(61,214,140,.16); color: #7be3b0; }
.badge.fail { background: rgba(255,92,92,.18); color: #ff9a9a; }

/* 批量执行进度可视化 */
.batch-prog-summary { margin-bottom: 14px; }
.progress-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.progress-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #ffb066); transition: width .45s ease; }
.batch-prog-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 10px; flex-wrap: wrap; }
.batch-prog-detail { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.05);
  border: 1px solid var(--line-soft); font-family: monospace; font-size: 12px; color: #c9cdd6;
  white-space: pre-wrap; word-break: break-all; max-height: 140px; overflow-y: auto; }
.prog-result-cell { max-width: 380px; word-break: break-all; }

.cmd-result { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--panel-2); }
.cmd-result-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.term { background: #0B0C10; border: 1px solid var(--line); border-radius: 10px; padding: 12px; max-height: 320px; overflow: auto;
  white-space: pre-wrap; word-break: break-all; font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 1.5; color: #d7dbe3; margin: 6px 0 0; }
.term:empty::before { content: '(空)'; color: var(--text-low); }


/* ============ 设备应用管理弹窗（对齐安卓端 MyApps） ============ */
.devapps-card { width: min(1584px, 97vw); max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; }
.devapps-card .modal-head { flex: 0 0 auto; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.devapps-dev { color: var(--amber); font-family: "JetBrains Mono", monospace; font-size: 15px; }
#devAppsOnline { margin-left: 8px; vertical-align: 2px; }
#devAppsOnline.on { background: rgba(46,204,113,.16); color: #2ecc71; }
#devAppsOnline.off { background: rgba(130,134,143,.16); color: var(--text-low); }

.devapps-body { display: flex; gap: 0; flex: 1; min-height: 0; }
/* 左侧面板 */
.devapps-side { flex: 0 0 268px; border-right: 1px solid var(--line); padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; background: linear-gradient(180deg, rgba(35,38,46,.35), transparent); }
.devapps-search input { width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 14px; outline: none; font-family: inherit; transition: border-color .2s, box-shadow .2s; }
.devapps-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,26,.18); }
/* 分类 chips（对齐安卓端 FilterChip） */
.devapps-cats { display: flex; flex-direction: column; gap: 6px; }
.devapps-cats .chip { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; text-align: left; transition: background .15s, color .15s, border-color .15s, transform .1s; }
.devapps-cats .chip:hover { background: var(--panel-3); color: var(--text); }
.devapps-cats .chip:active { transform: scale(.98); }
.devapps-cats .chip.active { background: linear-gradient(90deg, var(--accent), var(--accent-dim)); color: var(--on-accent); border-color: rgba(255,200,150,.18); box-shadow: 0 4px 12px rgba(255,122,26,.25); }
.devapps-cats .chip-count { font-size: 11.5px; font-weight: 700; opacity: .8; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.18); }
.devapps-cats .chip.active .chip-count { background: rgba(0,0,0,.22); }
/* 批量操作栏 */
.devapps-batch { border: 1px solid var(--accent-line); border-radius: 12px; padding: 10px; background: rgba(255,122,26,.06); display: flex; flex-direction: column; gap: 8px; }
.devapps-batch-head { display: flex; align-items: center; justify-content: space-between; }
.devapps-batch-clear { color: var(--muted); font-size: 12.5px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.devapps-batch-clear:hover { color: var(--danger); background: rgba(255,92,92,.12); }
.devapps-batch .ops { display: flex; flex-wrap: wrap; gap: 6px; }
.devapps-hint { font-size: 12px; line-height: 1.6; }
.devapps-hint b { color: var(--accent-soft); }
.devapps-reload { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.devapps-reload .text-muted { font-size: 11px; white-space: nowrap; }
/* 右侧网格 */
.devapps-grid { flex: 1; min-width: 0; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-content: start; }
/* 应用卡片 */
.appcard { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), #16181e); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; transition: border-color .18s, box-shadow .18s, transform .1s; position: relative; }
.appcard:hover { border-color: var(--line-soft); box-shadow: var(--shadow-sm); }
.appcard.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 18px rgba(255,122,26,.15); }
.appcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.appcard-top .appcard-name { flex: 1; min-width: 0; }
.appcard-check { display: flex; align-items: center; flex: 0 0 auto; }
.appcard-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.appcard-ver { flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.appcard-ver .appcard-vc { opacity: .62; }
.apptag { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.apptag.ok { background: rgba(61,214,140,.14); color: #7be3b0; }
.apptag.sys { background: rgba(110,142,246,.16); color: #9db4ff; }
.apptag.off { background: rgba(255,92,92,.14); color: #ff7a7a; }
.apptag.hide { background: rgba(255,170,60,.16); color: #ffb35c; }
.apptag.gone { background: rgba(190,130,255,.16); color: #c89bff; }
.appcard-times { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 11px; color: var(--text-low); }
.appcard-name { font-size: 14.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appcard-pkg { font-size: 12px; color: var(--text-low); }
.appcard-pkg code { font-family: "JetBrains Mono", monospace; font-size: 11.5px; }
.appcard-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.appcard-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line); }
.appcard-ops .btn { font-size: 12px; padding: 5px 10px; border-radius: 9px; }
.appcard-ops .btn.danger { background: rgba(255,92,92,.10); color: #ff7a7a; border-color: rgba(255,92,92,.28); }
.appcard-ops .btn.danger:hover { background: rgba(255,92,92,.22); border-color: transparent; }
.appcard-ops .btn.plain { background: transparent; border-color: transparent; color: var(--accent-2); }
.appcard-ops .btn.plain:hover { background: rgba(110,142,246,.12); }
.appcard-empty { grid-column: 1 / -1; text-align: center; color: var(--text-low); padding: 48px 0; font-size: 13.5px; }
/* 结果弹窗 */
.devapp-info-body { max-height: 56vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); padding: 4px 0; }
.devapp-info-body .info-line { padding: 7px 12px; font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 1.5; color: #d7dbe3; white-space: pre-wrap; word-break: break-all; border-bottom: 1px solid rgba(53,58,69,.5); }
.devapp-info-body .info-line:last-child { border-bottom: none; }
.devapp-info-body .info-kv { display: flex; gap: 10px; align-items: baseline; }
.devapp-info-body .info-kv .k { flex: 0 0 88px; color: var(--text-low); font-family: "Sora", "Noto Sans SC", sans-serif; }
.devapp-info-body .info-sep { color: var(--accent-line); font-weight: 700; background: none; }
.devapp-info-body .info-msg { padding: 14px 12px; color: var(--muted); font-size: 13px; }
/* 组件行内启停 */
.comp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; }
.comp-row:hover { background: rgba(255,122,26,.06); }
.comp-row .comp-k { flex: 0 0 88px; font-size: 12px; color: var(--text-low); }
.comp-row .comp-v { flex: 1; min-width: 0; font-family: "JetBrains Mono", monospace; font-size: 12px; color: #d7dbe3; text-align: right; }
.comp-row.comp-head { font-size: 12.5px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); border-radius: 0; }
.comp-row.comp-head code { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--muted); }
.comp-row .comp-kind { flex: 0 0 66px; font-size: 11px; font-weight: 700; color: var(--accent-2); }
.comp-row .comp-name { flex: 1; min-width: 0; font-family: "JetBrains Mono", monospace; font-size: 12px; color: #d7dbe3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-row .comp-state { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; flex: 0 0 auto; }
.comp-row .comp-state.disabled { background: rgba(255,92,92,.16); color: #ff7a7a; }
.comp-row .comp-state.enabled { background: rgba(61,214,140,.16); color: #7be3b0; }
.comp-row .comp-toggle { flex: 0 0 auto; font-size: 11.5px; padding: 3px 9px; }
/* 响应式适配 */
@media (max-width: 1100px) {
  .devapps-body { flex-direction: column; }
  .devapps-side { flex: 0 0 auto; border-right: none; border-bottom: 1px solid var(--line); max-height: 40vh; }
  .devapps-cats { flex-direction: row; flex-wrap: wrap; }
  .devapps-cats .chip { width: auto; }
  .devapps-reload { margin-top: 0; }
  .devapps-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 640px) {
  .devapps-grid { grid-template-columns: 1fr; padding: 12px; }
}

/* 状态徽标（安装器请求日志） */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.badge-ok { background: rgba(76, 175, 80, 0.15); color: #4CAF50; }
.badge-err { background: rgba(244, 67, 54, 0.15); color: #f44336; }
.badge-warn { background: rgba(255, 152, 0, 0.15); color: #FF9800; }

/* 提取记录页（extracted/ 归档的查看 / 下载 / 按任务清理） */
.ex-link { background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ex-link:hover { color: var(--accent-dim); }
.ex-link:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; }
.ex-muted { color: var(--muted); }
.ex-sm { font-size: 11.5px; margin-top: 2px; }
.ex-warn { color: #FF9800; }
.ex-empty { text-align: center; color: #82868F; }