:root {
  --gold: #f0bd5c;
  --gold-rgb: 240, 189, 92;
  --gold-deep: #e0a13c;
  --gold-soft: rgba(var(--gold-rgb), .15);
  --gold-shadow1: rgba(var(--gold-rgb), .3);
  --gold-shadow2: rgba(var(--gold-rgb), .42);
  --blue: #8fd0e8;
  --blue-soft: rgba(120, 150, 190, .1);
  --green: #84d6a0;
  --red: #ec8a7c;
  --text: #f6f1e9;
  --text-dim: #c3b6a4;
  --glass: rgba(34, 27, 22, .38);
  --glass-solid: rgba(34, 27, 22, .68);
  --veil-light: rgba(20, 15, 11, .42);
  --veil-dark: rgba(13, 10, 8, .62);
  --stroke: rgba(255, 246, 232, .14);
  --hi: rgba(255, 250, 240, .18);
  --radius: 18px;
  --ease: cubic-bezier(.22, .8, .3, 1);
  --bg-img: url('background.jpg?v=feat-20260706-2');
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-size: var(--base-font-size, 14px); font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.55; color: var(--text-custom); overflow: hidden; }
::selection { background: var(--gold-soft); }
a { color: var(--blue); text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
input, select, textarea {
  font: inherit; color: var(--text-custom, var(--text)); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--stroke); border-radius: 11px; padding: 10px 13px; width: 100%;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
input::placeholder, textarea::placeholder { color: rgba(195, 182, 164, .55); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 3px var(--gold-soft); }
select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  min-height: 42px; padding: 10px 42px 10px 14px;
  color-scheme: dark;
  color: var(--text-custom, var(--text));
  font-weight: 560;
  letter-spacing: .01em;
  border-color: rgba(255, 246, 232, .18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045)),
    radial-gradient(90px 42px at 100% 0%, rgba(var(--gold-rgb), .18), transparent 70%),
    rgba(24, 18, 14, .62);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045)),
    radial-gradient(90px 42px at 100% 0%, rgba(var(--gold-rgb), .18), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M5 7l4 4 4-4' stroke='%23f0bd5c' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0 0, right top, right 13px center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
select:hover {
  border-color: rgba(var(--gold-rgb), .42);
  background-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 26px rgba(0,0,0,.18), 0 0 0 1px rgba(var(--gold-rgb), .08);
}
select:open {
  border-color: rgba(var(--gold-rgb), .42);
  background-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 26px rgba(0,0,0,.18), 0 0 0 1px rgba(var(--gold-rgb), .08);
}
select:focus {
  background:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045)),
    radial-gradient(90px 42px at 100% 0%, rgba(var(--gold-rgb), .18), transparent 70%),
    rgba(24, 18, 14, .70);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045)),
    radial-gradient(90px 42px at 100% 0%, rgba(var(--gold-rgb), .18), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M5 7l4 4 4-4' stroke='%23f0bd5c' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0 0, right top, right 13px center;
  box-shadow: 0 0 0 3px var(--gold-soft), inset 0 1px 0 rgba(255,255,255,.12), 0 12px 28px rgba(0,0,0,.24);
}
select:disabled {
  cursor: not-allowed;
  opacity: .45;
  filter: grayscale(.25);
}
select option {
  background: rgba(33, 24, 18, .96);
  color: var(--text-custom, var(--text));
  font-weight: 500;
}
select option:checked { background: #3a2919; color: var(--gold); }
select::-ms-expand { display: none; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.bg { position: fixed; inset: -4%; z-index: -2; background: var(--bg-img); background-size: cover; background-position: center; background-repeat: no-repeat; }
.bg-veil {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 800px at 82% -6%, var(--gold-soft), transparent 55%),
    radial-gradient(900px 700px at 10% 110%, var(--blue-soft), transparent 55%),
    linear-gradient(180deg, var(--veil-light), var(--veil-dark));
}

.glass {
  background: var(--glass-solid);
  border: 1px solid var(--stroke); border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4), inset 0 1px 0 var(--hi);
}
.btn {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #2c1d08; border: none;
  border-radius: 11px; padding: 10px 18px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 6px 18px var(--gold-shadow1); transition: transform .18s var(--ease), filter .18s, box-shadow .18s;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1.5px); box-shadow: 0 9px 24px var(--gold-shadow2); }
.btn:active { transform: translateY(0) scale(.99); }
.btn.ghost { background: rgba(255, 255, 255, .06); color: var(--text-dim-custom, var(--text-dim)); box-shadow: none; border: 1px solid var(--stroke); }
.btn.ghost:hover { color: var(--text-custom); border-color: var(--gold); background: rgba(255, 255, 255, .11); transform: translateY(-1.5px); }
.btn.danger { background: transparent; color: var(--red); border: 1px solid rgba(236, 138, 124, .35); box-shadow: none; padding: 6px 13px; }
.btn.danger:hover { background: rgba(236, 138, 124, .14); transform: none; }

.toggle { position: relative; display: inline-flex; width: 46px; height: 26px; flex: none; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle .track { position: absolute; inset: 0; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid var(--stroke); transition: background .26s var(--ease), border-color .26s; }
.toggle .track::after { content: ''; position: absolute; top: 2.5px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #ece4d6; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); transition: left .28s var(--ease), background .26s; }
.toggle input:checked + .track { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border-color: transparent; box-shadow: 0 0 14px rgba(var(--gold-rgb), .4); }
.toggle input:checked + .track::after { left: 22px; background: #fff; }

#login { position: fixed; inset: 0; display: grid; place-items: center; transition: opacity .42s var(--ease), transform .42s var(--ease), filter .42s; }
#login.out { opacity: 0; transform: scale(.97); filter: blur(4px); pointer-events: none; }
#login .box { width: 372px; padding: 42px 36px; text-align: center; animation: pop .55s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
#login .logo { width: 56px; height: 56px; margin: 0 auto; border-radius: 16px; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); display: grid; place-items: center; font-size: calc(var(--base-font-size) * 26 / 14); font-weight: 800; color: #2c1d08; box-shadow: 0 8px 22px rgba(var(--gold-rgb), .4); }
#login h1 { font-size: calc(var(--base-font-size) * 21 / 14); margin: 16px 0 5px; letter-spacing: .02em; }
#login .sub { color: var(--text-dim-custom, var(--text-dim)); font-size: calc(var(--base-font-size) * 12.5 / 14); margin-bottom: 26px; }
#login input { text-align: left; margin-bottom: 14px; }
#login .btn { width: 100%; }
.err { color: var(--red); font-size: calc(var(--base-font-size) * 12 / 14); min-height: 16px; margin-top: 12px; }

#app { position: fixed; inset: 0; display: grid; grid-template-columns: 236px 1fr; padding: 18px; gap: 18px; opacity: 0; transition: opacity .5s var(--ease); }
#app.in { opacity: 1; }
aside { padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 24px; font-size: calc(var(--base-font-size) * 16 / 14); font-weight: 700; letter-spacing: .01em; }
.brand .mk { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); display: grid; place-items: center; font-size: calc(var(--base-font-size) * 15 / 14); font-weight: 800; color: #2c1d08; flex: none; }
nav { display: flex; flex-direction: column; gap: 3px; }
nav button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: none; color: var(--text-dim-custom, var(--text-dim));
  padding: 11px 14px; border-radius: 12px; font-size: calc(var(--base-font-size) * 14 / 14);
  transition: background .2s var(--ease), color .2s, transform .2s var(--ease), box-shadow .2s;
}
nav button .ic { font-size: calc(var(--base-font-size) * 16 / 14); width: 20px; text-align: center; }
nav button:hover { background: rgba(255, 255, 255, .07); color: var(--text-custom); transform: translateX(3px); }
nav button.active { background: var(--gold-soft); color: var(--gold); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .32), 0 4px 16px rgba(var(--gold-rgb), .14); }
aside .spacer { flex: 1; }

main { position: relative; overflow: hidden; border-radius: var(--radius); }
.main-glass-bg {
  position: absolute; inset: -1px; z-index: 0; pointer-events: none;
  background: var(--glass-solid);
  border: 1px solid var(--stroke); border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4), inset 0 1px 0 var(--hi);
}
.main-content { position: relative; z-index: 1; overflow: auto; overflow-x: hidden; padding: 28px 32px; height: 100%; }
.main-content::-webkit-scrollbar { width: 9px; }
.main-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 9px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-head h2 { font-size: calc(var(--base-font-size) * 24 / 14); font-weight: 700; letter-spacing: .01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .3); }
.page-head .hint { color: var(--text-dim-custom, var(--text-dim)); font-size: calc(var(--base-font-size) * 12.5 / 14); margin-top: 4px; }
section { transition: opacity .15s var(--ease), transform .15s var(--ease); }
section.leaving { opacity: 0; }
section.entering { opacity: 0; transform: translateY(14px); }

.grid { display: grid; gap: 16px; }
.grid.stats { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.card { padding: 20px 22px; transition: transform .22s var(--ease), box-shadow .22s, border-color .22s; }
.card.hoverable:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(0, 0, 0, .46), inset 0 1px 0 var(--hi); border-color: rgba(var(--gold-rgb), .32); }
.grid.stats .card { animation: rise .55s var(--ease) both; }
.grid.stats .card:nth-child(2){animation-delay:.06s} .grid.stats .card:nth-child(3){animation-delay:.12s} .grid.stats .card:nth-child(4){animation-delay:.18s}
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.stat .label { color: var(--text-dim-custom, var(--text-dim)); font-size: calc(var(--base-font-size) * 12 / 14); letter-spacing: .03em; }
.stat .value { font-size: calc(var(--base-font-size) * 30 / 14); font-weight: 700; margin-top: 8px; line-height: 1.1; }
.stat .value.gold { color: var(--gold); text-shadow: 0 0 26px rgba(var(--gold-rgb), .4); }
.stat .value.blue { color: var(--blue); } .stat .value.green { color: var(--green); }
.stat .sub { color: var(--text-dim-custom, var(--text-dim)); font-size: calc(var(--base-font-size) * 11.5 / 14); margin-top: 6px; }

/* 全局表格重置（非固定布局） */
table {
  width: 100% !important;
  border-collapse: collapse;
}

th, td { text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--stroke); font-size: calc(var(--base-font-size) * 13 / 14); }
th { color: var(--text-dim-custom, var(--text-dim)); font-weight: 600; font-size: calc(var(--base-font-size) * 12 / 14); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .16s; } tbody tr:hover { background: rgba(255, 255, 255, .05); }
td code { background: rgba(0, 0, 0, .3); padding: 2px 9px; border-radius: 8px; font-size: calc(var(--base-font-size) * 12 / 14); word-break: break-all; }

.table-wrap { overflow-x: auto; }

/* ── 【仅在电脑端桌面视图启用的布局锁定 (锁定列宽，防止撑开挤压)】 ── */
@media (min-width: 769px) {
  #page-nodes table {
    table-layout: fixed !important;
  }

  #page-nodes table th:nth-child(1), #page-nodes table td:nth-child(1) {
    width: 50px !important;
    text-align: center;
  }
  #page-nodes table th:nth-child(2), #page-nodes table td:nth-child(2) {
    width: auto !important;
    min-width: 180px !important;
  }
  #page-nodes table th:nth-child(3), #page-nodes table td:nth-child(3) {
    width: 110px !important;
  }
  #page-nodes table th:nth-child(4), #page-nodes table td:nth-child(4) {
    width: 240px !important;
  }
  #page-nodes table th:nth-child(5), #page-nodes table td:nth-child(5) {
    width: 290px !important;
    text-align: right !important;
  }

  .node-error-wrap, .node-err-msg {
    word-break: break-all !important;
    white-space: normal !important;
    max-width: 210px !important;
    line-height: 1.35 !important;
  }

  #page-nodes table td:nth-child(2) div {
    word-break: break-all !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }
}

.field { margin-bottom: 18px; }
.field label { display: block; color: var(--text-dim-custom, var(--text-dim)); font-size: calc(var(--base-font-size) * 12.5 / 14); margin-bottom: 7px; }
.field.bool { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.field.bool label { margin: 0; color: var(--text-custom); font-size: calc(var(--base-font-size) * 13.5 / 14); }
.field .desc { color: var(--text-dim-custom, var(--text-dim)); font-size: calc(var(--base-font-size) * 11 / 14); margin-top: 6px; opacity: .85; }
.toolbar { display: flex; gap: 11px; margin-bottom: 18px; }
.toolbar input { flex: 1; }

/* 【视觉美化：设置分类标题】 */
.settings-section-title {
  font-size: calc(var(--base-font-size) * 14 / 14);
  font-weight: 600;
  color: var(--gold);
  margin: 22px 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--stroke);
  display: flex;
  align-items: center;
  gap: 6px;
}
.settings-section-title:first-of-type {
  margin-top: 10px;
}

/* 【视觉美化：毛玻璃 Preset 背景选项】 */
.preset { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.preset .thumb {
  position: relative;
  width: 120px;
  height: 74px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s, transform .2s var(--ease);
  overflow: hidden;
}
.preset .thumb:hover { transform: translateY(-3px) scale(1.02); border-color: var(--gold); }
.preset .thumb .del-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  pointer-events: none; /* Initially ignore clicks when hidden */
}
.preset .thumb:hover .del-btn {
  opacity: 1;
  pointer-events: auto; /* Enable clicks when visible */
}
.preset .thumb .del-btn:hover {
  background: rgba(255, 0, 0, 0.8);
}
.preset .thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: calc(var(--base-font-size) * 11 / 14);
  text-align: center;
  padding: 3px 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(22px); padding: 13px 24px; font-size: calc(var(--base-font-size) * 13 / 14); opacity: 0; transition: all .34s var(--ease); pointer-events: none; z-index: 50; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.text-right { text-align: right; }
.text-dim { color: var(--text-dim-custom, var(--text-dim)); }
.min-w-0 { min-width: 0; }
.mt-4px { margin-top: 4px; }
.mt-14px { margin-top: 14px; }
.h-6px { height: 6px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-1 { grid-template-columns: 1fr; }
.m-0 { margin: 0; }
.font-mono { font-family: ui-monospace, monospace; }
.file-input { padding: 6px 12px; }
.btn-blue { border-color: var(--blue); color: var(--blue); }
.btn-green { border-color: var(--green); color: var(--green); }
.btn-red { border-color: var(--red); color: var(--red); }
.summary-text { margin-bottom: 12px; font-weight: 600; color: var(--gold); }
.divider { border-top: 1px dashed var(--stroke); margin: 18px 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.flex-1 { flex: 1; }
.gap-8 { gap: 8px; }
.flex-gap-11 { display: flex; gap: 11px; }
.label-gold { font-weight: 600; color: var(--gold); }
.field-mb-20px { margin-bottom: 20px; }
.field-heading { display: block; color: var(--text-dim-custom, var(--text-dim)); font-size: calc(var(--base-font-size) * 12.5 / 14); margin-bottom: 7px; }

.success-toolbar { min-width: 360px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.metric-tabs,
.window-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(255,255,255,.055);
  border: 1px solid var(--stroke);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.12);
}
.metric-tabs button,
.window-tabs button {
  border: none; border-radius: 10px; padding: 8px 13px;
  background: transparent; color: var(--text-dim-custom, var(--text-dim));
  font-weight: 650; font-size: calc(var(--base-font-size) * 12 / 14);
  transition: background .18s var(--ease), color .18s, box-shadow .18s, transform .18s var(--ease);
}
.window-tabs button { padding: 8px 10px; min-width: 42px; }
.metric-tabs button:hover,
.window-tabs button:hover { color: var(--text-custom); background: rgba(255,255,255,.075); }
.metric-tabs button.active,
.window-tabs button.active {
  color: #2c1d08;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  box-shadow: 0 6px 18px rgba(var(--gold-rgb), .24);
}
.window-label {
  width: 100%;
  text-align: right;
  color: var(--text-dim-custom, var(--text-dim));
  font-size: calc(var(--base-font-size) * 11.5 / 14);
}
.success-chart-card { margin-top: 16px; min-height: 440px; }
#successChart { width: 100%; min-height: 360px; }
.success-chart-wrap { position: relative; min-height: 360px; }
.success-svg { width: 100%; height: 360px; overflow: visible; }
.success-svg .axis { stroke: rgba(255,255,255,.25); stroke-width: 1; }
.success-svg .gridline { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.success-svg .axis-text { fill: var(--text-dim-custom, var(--text-dim)); font-size: 11px; }
.success-svg .chart-point { filter: drop-shadow(0 0 5px rgba(255,255,255,.16)); }
.success-svg .hover-line { stroke: rgba(255,255,255,.22); stroke-width: 1; stroke-dasharray: 4 5; }
.success-svg .hover-dot { fill: rgba(24,18,14,.92); stroke-width: 2.5; filter: drop-shadow(0 0 12px rgba(var(--gold-rgb), .35)); }
.chart-tooltip {
  position: absolute; z-index: 5; width: 220px; padding: 12px 13px;
  background: rgba(24, 18, 14, .92);
  border: 1px solid rgba(var(--gold-rgb), .30);
  border-radius: 13px;
  box-shadow: 0 18px 40px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: none;
}
.chart-tooltip .tt-head { display: flex; align-items: center; gap: 8px; color: var(--text-custom); font-weight: 700; margin-bottom: 8px; line-height: 1.25; word-break: break-word; }
.chart-tooltip .tt-head-wide { justify-content: space-between; }
.chart-tooltip .tt-head i { width: 10px; height: 10px; border-radius: 999px; flex: none; box-shadow: 0 0 12px currentColor; }
.chart-tooltip .tt-row { display: flex; justify-content: space-between; gap: 12px; color: var(--text-dim-custom, var(--text-dim)); font-size: calc(var(--base-font-size) * 11.5 / 14); padding: 3px 0; }
.chart-tooltip .tt-row b { color: var(--gold); font-weight: 650; text-align: right; }
.chart-tooltip .tt-model-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.chart-tooltip .tt-model-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-top: 1px solid rgba(255,255,255,.07);
}
.chart-tooltip .tt-model-name {
  min-width: 0; display: flex; align-items: center; gap: 7px;
  color: var(--text-custom); font-size: calc(var(--base-font-size) * 11.5 / 14); line-height: 1.25;
}
.chart-tooltip .tt-model-name i { width: 9px; height: 9px; border-radius: 999px; flex: none; box-shadow: 0 0 10px currentColor; }
.chart-tooltip .tt-model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-tooltip .tt-model-item b {
  flex: none; color: var(--gold); font-weight: 700; text-align: right;
  font-size: calc(var(--base-font-size) * 11.5 / 14); line-height: 1.1;
}
.chart-tooltip .tt-model-item small {
  display: block; color: var(--text-dim-custom, var(--text-dim)); font-weight: 500; margin-top: 2px;
}
.success-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim-custom, var(--text-dim)); font-size: calc(var(--base-font-size) * 12 / 14); }
.legend-item i { width: 10px; height: 10px; border-radius: 999px; box-shadow: 0 0 12px currentColor; }
.legend-item b { color: var(--text-custom); font-weight: 600; }
.legend-item em { font-style: normal; color: var(--gold); }
.empty-chart { min-height: 360px; display: grid; place-items: center; color: var(--text-dim-custom, var(--text-dim)); border: 1px dashed var(--stroke); border-radius: 14px; }

.test-progress { display: none; padding: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--stroke); border-radius: 11px; margin-bottom: 14px; overflow: hidden; }
.test-progress-text { font-weight: 600; font-size: calc(var(--base-font-size) * 13 / 14); color: var(--gold); }
.progress-track { height: 6px; background: rgba(0,0,0,0.3); border-radius: 99px; overflow: hidden; margin: 8px 0; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); transition: width 0.2s ease; }
.test-progress-detail { font-size: calc(var(--base-font-size) * 11 / 14); color: var(--text-dim-custom, var(--text-dim)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key-input-wrap { display: flex; gap: 10px; align-items: stretch; flex: 1; min-width: 0; }
.key-gen-btn {
  width: 40px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--stroke);
  border-radius: 11px; color: var(--text-dim-custom, var(--text-dim)); cursor: pointer;
  transition: all .2s var(--ease); flex-shrink: 0;
}
.key-gen-btn:hover { color: var(--gold); border-color: rgba(240,189,92,.4); background: var(--gold-soft); }
.masked { color: var(--text-dim-custom, var(--text-dim)); letter-spacing: 0.04em; }
.key-cell { white-space: nowrap; }
.key-cell:hover .action-copy-btn { opacity: 1; }
.action-copy-btn {
  background: transparent; border: none; cursor: pointer; padding: 4px;
  margin-left: 8px; color: var(--text-dim-custom, var(--text-dim)); opacity: 0.55;
  display: inline-flex; align-items: center; border-radius: 6px;
  transition: opacity .2s var(--ease);
}
.action-copy-btn:hover { opacity: 1; color: var(--gold); }
.th-center { width: 40px; text-align: center; }

/* ── mobile responsive ── */

@media (max-width: 480px) {
  #login .box { width: auto; max-width: calc(100vw - 32px); padding: 32px 20px; }
  #login h1 { font-size: calc(var(--base-font-size) * 18 / 14); }
  .preset .thumb { width: 90px; height: 58px; }
  .toast { left: 16px; right: 16px; transform: translateY(22px); text-align: center; }
  .toast.show { transform: translateY(0); }
  .card table th,
  .card table td { padding: 10px 10px; font-size: calc(var(--base-font-size) * 12 / 14); }
}

.menu-btn {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 99;
  width: 40px; height: 40px; border: 1px solid var(--stroke);
  background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 11px; align-items: center; justify-content: center;
  font-size: calc(var(--base-font-size) * 20 / 14); color: var(--text-custom);
}

.menu-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.5); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }

@media (max-width: 768px) {
  .menu-btn { display: flex; }
  #app { grid-template-columns: 1fr; padding: 0; gap: 0; }
  aside {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
    width: 260px; border-radius: 0;
    transform: translateX(-100%);
    transition: transform .3s var(--ease);
    padding: 20px 14px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  aside.open { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,.6); }
  .main-content { padding: 16px; padding-top: 68px; }
  main { border-radius: 0; }
  .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
  }
  .page-head > div:first-child {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 100%;
  }
  .page-head .hint {
    max-width: 100%;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.55;
  }
  .page-head h2 { font-size: calc(var(--base-font-size) * 20 / 14); }
  #page-success .page-head {
    justify-content: space-between;
  }
  #page-success .success-toolbar {
    flex: 1 1 320px;
    min-width: 0;
    width: 100%;
    justify-content: flex-end;
  }
  #page-success .window-tabs,
  #page-success .metric-tabs {
    flex-wrap: wrap;
    max-width: 100%;
    overflow: visible;
  }
  #page-success .window-label {
    text-align: right;
  }
  .card { padding: 16px; }
  .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .actions .flex-1 { display: none; }
  .actions .btn { font-size: calc(var(--base-font-size) * 11 / 14); padding: 8px 6px; text-align: center; min-width: 0; }

  /* ── 【移动端表格重构：Table 彻底转换成磨砂卡片】 ── */
  /* 【核心修改：作用域限定在各自页面上，绝不全局影响】 */
  #page-nodes table, #page-nodes thead, #page-nodes tbody, #page-nodes th, #page-nodes td, #page-nodes tr,
  #page-keys table, #page-keys thead, #page-keys tbody, #page-keys th, #page-keys td, #page-keys tr {
    display: block !important;
    width: 100% !important;
    table-layout: auto !important; /* 关键：移动端抛弃电脑端的锁死列宽算法 */
  }
  #page-nodes thead tr, #page-keys thead tr {
    position: absolute !important;
    top: -9999px;
    left: -9999px;
  }
  #page-nodes tr, #page-keys tr {
    border: 1px solid var(--stroke) !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    padding: 12px 14px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  }
  #page-nodes td, #page-keys td {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    padding: 8px 0 8px 32% !important;
    font-size: calc(var(--base-font-size) * 13 / 14) !important;
    white-space: normal !important;
    text-align: left !important;
    width: 100% !important; /* 核心：在移动端彻底洗掉 td-child 的强制宽度 */
  }
  #page-nodes td:last-child, #page-keys td:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  #page-nodes td:before, #page-keys td:before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 28%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-dim-custom, var(--text-dim));
  }

  /* ── 1. 代理节点页面卡片伪类标签（精准限制） ── */
  #page-nodes td:nth-of-type(1):not([colspan]) { padding-left: 0 !important; text-align: left !important; }
  #page-nodes td:nth-of-type(1):not([colspan]):before { content: "选择节点"; }
  #page-nodes td:nth-of-type(2):not([colspan]):before { content: "节点名称"; }
  #page-nodes td:nth-of-type(3):not([colspan]):before { content: "协议类型"; }
  #page-nodes td:nth-of-type(4):not([colspan]):before { content: "状态延迟"; }
  #page-nodes td:nth-of-type(5):not([colspan]):before { content: "管理操作"; }

  /* 修复手机端无节点时暂无节点 td padding */
  #page-nodes td[colspan="5"] { padding-left: 14px !important; text-align: center !important; }

  /* ── 2. 密钥页面卡片伪类标签（新增专属标签，杜绝借用代理页面标签） ── */
  #page-keys td:nth-of-type(1):before { content: "密钥名称"; }
  #page-keys td:nth-of-type(2):before { content: "密钥 Value"; }
  #page-keys td:nth-of-type(3):before { content: "备注描述"; }
  #page-keys td:nth-of-type(4):before { content: "管理操作"; }

  /* 代理页面 checkbox 样式精准限制 */
  #page-nodes td:nth-of-type(1) input[type="checkbox"] {
    margin-left: 32%;
    width: 18px;
    height: 18px;
  }
  #page-nodes td:nth-of-type(1):before {
    top: 10px;
  }
  
  /* 移动端 4 按钮排列微调 */
  #page-nodes td:nth-of-type(5) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding-left: 32% !important;
  }
  #page-nodes td:nth-of-type(5) .btn {
    margin: 0 !important;
    font-size: calc(var(--base-font-size) * 11 / 14) !important;
    padding: 5px 8px !important;
  }

  /* 密钥页面移动端删除按钮精致对齐 */
  #page-keys td:nth-of-type(4) {
    display: flex !important;
    padding-left: 32% !important;
  }
  #page-keys td:nth-of-type(4) .btn {
    margin: 0 !important;
    font-size: calc(var(--base-font-size) * 11 / 14) !important;
    padding: 5px 12px !important;
  }
  
  /* 移动端错误详细信息自然折行 */
  .node-err-msg {
    color: var(--red);
    font-size: calc(var(--base-font-size) * 11 / 14);
    margin-top: 4px;
    word-break: break-all !important;
    white-space: normal !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 600px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid.stats { grid-template-columns: 1fr 1fr; }
  .field.bool { flex-direction: column; align-items: flex-start; }
  .toolbar { flex-wrap: wrap; }
  .toolbar input { min-width: 120px; }

  /* ── 【核心修改：手机端对密钥页面输入框进行弹性垂直堆叠，根治重叠】 ── */
  /* 精准限定在 #page-keys 内，保留登录框的密码眼睛切换按钮在水平一排 */
  #page-keys .key-input-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
  }
  #page-keys .key-input-wrap input:first-of-type {
    flex: 0 0 100% !important;
  }
  #page-keys .key-input-wrap input:last-of-type {
    flex: 1 !important;
    min-width: 0 !important;
    border-radius: 11px !important;
    border: 1px solid var(--stroke) !important;
  }
  #page-keys .key-gen-btn {
    width: 40px !important;
    height: 40px !important;
    flex: none !important;
    border-radius: 11px !important;
    border: 1px solid var(--stroke) !important;
  }
}

/* =========================================================
   Advanced Color Palette Styles
   ========================================================= */

.color-preview-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: var(--text-custom, #fff);
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s, border-color 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.color-preview-box.active {
  border-color: var(--gold);
  transform: scale(0.9);
}

.appearance-advanced { display: flex; flex-direction: column; gap: 12px; }
.font-ctrl-group { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.font-ctrl-group.align-top { align-items: flex-start; }
.font-ctrl-group.align-top > span:first-child { margin-top: 18px; }
.font-ctrl-group > span:first-child { min-width: 70px; color: var(--text-dim-custom, var(--text-dim)); font-size: calc(var(--base-font-size) * 12.5 / 14); }

.color-palette-container {
  background-color: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: absolute;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.05);
  display: none;
  width: 320px;
  transform: translateY(10px);
}
.color-palette-container.show {
  display: block;
  animation: popIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.palette-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.palette-preview {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: #002fa7;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 4px 12px rgba(0,0,0,0.3);
}

.btn-icon {
  font-size: 1.2rem;
  padding: 8px;
}

.palette-tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 4px;
  margin-left: auto;
}

.palette-tabs button {
  background: transparent;
  border: none;
  color: var(--text-dim-custom, var(--text-dim));
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85em;
  transition: all 0.2s;
}

.palette-tabs button.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-custom);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.palette-body {
  padding: 0 4px;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.slider-row span {
  width: 16px;
  font-weight: 700;
  color: var(--text-dim-custom, var(--text-dim));
  font-size: 0.9em;
}

.slider-row input[type="number"] {
  width: 56px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-custom);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: monospace;
  text-align: center;
}

.hex-large {
  width: 100%;
  font-size: 2rem;
  text-align: center;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-custom);
  border-radius: 12px;
  padding: 16px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Custom Range Sliders */
.slider-row input[type="range"] {
  -webkit-appearance: none;
  flex: 1;
  height: 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
  outline: none;
  margin: 0;
}

.slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.2);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* HSL Tracks (dynamically updated via JS, but provide fallback bases) */
.track-hue {
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) !important;
}

.gradient-stops {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.gradient-stop-box {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.2s, border-color 0.2s;
  position: relative;
}

.gradient-stop-box.active {
  border-color: var(--gold);
  transform: scale(0.9);
}

.gradient-stop-box .del-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.gradient-stop-box:hover .del-btn {
  opacity: 1;
}

.preset.compact {
  gap: 10px;
}
.preset.compact .thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
}

.log-level-info { color: #3b82f6; font-weight: bold; }
.log-level-warn { color: #f59e0b; font-weight: bold; }
.log-level-error { color: #ef4444; font-weight: bold; }

.mt-20 { margin-top: 20px; }

/* ── Zeabur subscription / node overview additions ── */
.node-overview {
  margin: 14px 0;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--hi);
}
.node-overview-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 14px;
}
.node-overview-headtext { min-width: 0; }
.node-overview-title {
  font-size: 13px; font-weight: 600; color: var(--gold); letter-spacing: .02em;
  text-shadow: 0 0 18px rgba(240, 189, 92, .22);
}
.node-overview-sub { color: var(--text-dim-custom, var(--text-dim)); font-size: 11.5px; margin-top: 3px; }
.node-overview-totals { display: flex; flex-wrap: wrap; gap: 7px; }
.node-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border-radius: 99px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--stroke);
  font-size: 12px; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.node-chip .k { color: var(--text-dim-custom, var(--text-dim)); }
.node-chip .v { font-weight: 700; color: var(--text-custom); }
.node-chip.gold .v { color: var(--gold); }
.node-chip.green .v { color: var(--green); }
.node-chip.blue .v { color: var(--blue); }
.node-chip.dim .v { color: var(--text-dim-custom, var(--text-dim)); }
.node-chip.cool { background: rgba(143, 208, 232, .1); border-color: rgba(143, 208, 232, .28); }
.node-chip.cool .v { color: var(--blue); }
.node-chip.warn { background: rgba(240, 189, 92, .1); border-color: rgba(240, 189, 92, .28); }
.node-chip.warn .v { color: var(--gold); }
.node-chip.bad { background: rgba(236, 138, 124, .12); border-color: rgba(236, 138, 124, .28); }
.node-chip.bad .v { color: var(--red); }
.node-chip.zero { opacity: .55; }
.node-overview-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding-top: 4px; border-top: 1px dashed var(--stroke);
}
.node-overview-panel { min-width: 0; padding-top: 10px; }
.node-overview-label {
  color: var(--text-dim-custom, var(--text-dim)); font-size: 11.5px; margin-bottom: 8px;
  letter-spacing: .03em; text-transform: uppercase;
}
.node-overview-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.node-tag {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 10px; border-radius: 9px;
  background: rgba(0, 0, 0, .22); font-size: 11.5px; color: var(--text-dim-custom, var(--text-dim));
  border: 1px solid transparent;
}
.node-tag .n { font-weight: 700; color: var(--text-custom); }
.node-tag.err { background: rgba(236, 138, 124, .1); border-color: rgba(236, 138, 124, .22); }
.node-tag.err .n { color: var(--red); }
.node-tag.lead { border-color: var(--gold); background: rgba(240, 189, 92, .08); }
.node-tag.lead .n { color: var(--gold); }
.node-overview-empty { color: var(--text-dim-custom, var(--text-dim)); font-size: 11.5px; opacity: .6; }

/* ── subscription source sync ── */
.sub-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px;
}
.sub-form .sub-input-url { flex: 1 1 280px; min-width: 220px; }
.sub-form .sub-input-name { flex: 0 1 160px; }
.sub-form .sub-input-interval { width: 78px; flex: none; text-align: center; }
.sub-auto-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--text-dim-custom, var(--text-dim)); font-size: 12.5px; user-select: none; padding: 0 2px;
  white-space: nowrap;
}
.sub-auto-toggle input { width: auto; }
.sub-interval-unit { color: var(--text-dim-custom, var(--text-dim)); font-size: 12.5px; white-space: nowrap; }

.sub-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 4px 0 10px; padding-top: 14px; border-top: 1px dashed var(--stroke);
}
.sub-list-title {
  font-size: 12.5px; font-weight: 600; color: var(--gold); letter-spacing: .02em;
  text-shadow: 0 0 18px rgba(240, 189, 92, .18);
}
.sub-list-count {
  display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: 99px;
  background: var(--gold-soft); color: var(--gold); font-size: 11.5px; font-weight: 700;
  border: 1px solid rgba(240, 189, 92, .28);
}
.sub-list { display: flex; flex-direction: column; gap: 10px; }
.sub-list-empty {
  color: var(--text-dim-custom, var(--text-dim)); font-size: 12px; padding: 18px; text-align: center; opacity: .6;
  border: 1px dashed var(--stroke); border-radius: 12px;
}

.sub-item {
  padding: 12px 14px; border-radius: 13px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 var(--hi);
  transition: border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
  animation: rise .45s var(--ease) both;
}
.sub-item:hover {
  border-color: rgba(240, 189, 92, .3);
  background: rgba(255, 255, 255, .06);
  transform: translateY(-1px);
}
.sub-item-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.sub-item-name {
  font-weight: 600; font-size: 13.5px; color: var(--text-custom);
  max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sub-item-badge {
  font-size: 10.5px; padding: 2px 9px; border-radius: 99px;
  border: 1px solid var(--stroke); white-space: nowrap;
}
.sub-item-badge.auto { background: var(--gold-soft); color: var(--gold); border-color: rgba(240, 189, 92, .3); }
.sub-item-badge.manual { background: rgba(255, 255, 255, .05); color: var(--text-dim-custom, var(--text-dim)); }
.sub-item-meta-time {
  font-size: 11px; color: var(--text-dim-custom, var(--text-dim)); white-space: nowrap;
}
.sub-item-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.sub-item-actions .btn { padding: 4px 10px; font-size: 11.5px; }
.sub-item-url {
  font-size: 11.5px; color: var(--text-dim-custom, var(--text-dim)); margin-top: 7px;
  font-family: ui-monospace, monospace; word-break: break-all; opacity: .85;
}
.sub-item-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px;
}
.sub-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 9px; border-radius: 8px; font-size: 11px;
  background: rgba(0, 0, 0, .22); border: 1px solid transparent; color: var(--text-dim-custom, var(--text-dim));
}
.sub-chip .k { color: var(--text-dim-custom, var(--text-dim)); }
.sub-chip .n { font-weight: 700; color: var(--text-custom); }
.sub-chip.add .n { color: var(--green); }
.sub-chip.add { background: rgba(132, 214, 160, .08); }
.sub-chip.upd .n { color: var(--blue); }
.sub-chip.upd { background: rgba(143, 208, 232, .08); }
.sub-chip.rm { background: rgba(236, 138, 124, .1); border-color: rgba(236, 138, 124, .22); }
.sub-chip.rm .n { color: var(--red); }
.sub-chip.adopt .n { color: var(--gold); }
.sub-chip.adopt { background: rgba(240, 189, 92, .08); }
.sub-chip.skip .n { color: var(--text-dim-custom, var(--text-dim)); }
.sub-chip.zero { opacity: .45; }
.sub-status {
  font-size: 10.5px; padding: 2px 9px; border-radius: 99px; white-space: nowrap;
}
.sub-status.ok { background: rgba(132, 214, 160, .14); color: var(--green); }
.sub-status.err { background: rgba(236, 138, 124, .14); color: var(--red); }
.sub-status.idle { background: rgba(255, 255, 255, .05); color: var(--text-dim-custom, var(--text-dim)); }
.sub-item-error {
  margin-top: 9px; padding: 7px 10px; border-radius: 9px;
  background: rgba(236, 138, 124, .1); border: 1px solid rgba(236, 138, 124, .24);
  color: var(--red); font-size: 11.5px; word-break: break-all;
}

@media (max-width: 600px) {
  .sub-form { flex-direction: column; align-items: stretch; }
  .sub-form .sub-input-url, .sub-form .sub-input-name { flex: 1 1 auto; width: 100%; }
  .sub-item-name { max-width: 100%; }
  .sub-item-actions { margin-left: 0; width: 100%; }
}

@media (max-width: 600px) {
  .node-overview-body { grid-template-columns: 1fr; }
  .node-overview-head { flex-direction: column; align-items: flex-start; }

}