/* WechatOnCloud 面板 —— 牛奶布艺（soft neumorphism）+ 微信绿 + iOS26 圆角极简
 * 比喻：整个界面是盖在桌面上的一整块白布，组件是被布顶起的物体。
 *   - 高光在物体顶面（radial，中心偏上）
 *   - 阴影是布料折痕（小半径、紧贴边缘、冷灰蓝），不是悬浮投影
 *   - 组件亮度 ≥ 背景；层级靠明度，不靠边框/分割线 */
:root {
  --base: #ebedf1; /* 整块布底色（立体档，91% 区间） */
  --surface: #ffffff; /* 浮起表面：纯白 */
  --trough: #e0e3ea; /* 凹槽：比 base 更暗（输入框/进度槽） */
  --shadow: 51 66 102; /* 冷灰蓝阴影 RGB（配合 rgba()） */

  --wx-green: #07c160;
  --wx-green-dark: #06ad56;
  --green-rgb: 7 193 96;

  --text: #1a1d24;
  --muted: #8a9099;
  --danger: #fa5151;
  --danger-rgb: 250 81 81;

  --r-card: 28px;
  --r-blob: 22px;
  --r-small: 16px;

  /* 布料折痕：两层，紧贴边缘 */
  --crease: 0 1px 3px rgba(var(--shadow) / 0.4), 0 2px 8px rgba(var(--shadow) / 0.22);
  --crease-press: 0 1px 2px rgba(var(--shadow) / 0.28), 0 1px 3px rgba(var(--shadow) / 0.16);
  --crease-accent: 0 1px 3px rgba(var(--green-rgb) / 0.45), 0 4px 14px rgba(var(--green-rgb) / 0.32);
  /* 顶面高光（中心偏上的 radial），所有浮起组件共用 */
  --sheen: radial-gradient(
    ellipse at 50% 28%,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.16) 38%,
    transparent 74%
  );
  color-scheme: light;
}

/* ---------- 深色模式（牛奶布艺·暗）：base=亮蓝黑、surface 更高一档、阴影近纯黑、顶面高光极淡 ---------- */
/* data-theme=dark 强制深色；data-theme=auto 跟随系统 prefers-color-scheme；data-theme=light 维持亮色。 */
:root[data-theme='dark'] {
  color-scheme: dark;
  --base: #14161c;
  --surface: #23262f;
  --trough: #0e0f14;
  --shadow: 0 0 0;
  --text: #e7eaef;
  --muted: #969ca6;
  --crease: 0 1px 3px rgba(0 0 0 / 0.55), 0 2px 10px rgba(0 0 0 / 0.45);
  --crease-press: 0 1px 2px rgba(0 0 0 / 0.4), 0 1px 3px rgba(0 0 0 / 0.25);
  --sheen: radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 75%);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] {
    color-scheme: dark;
    --base: #14161c;
    --surface: #23262f;
    --trough: #0e0f14;
    --shadow: 0 0 0;
    --text: #e7eaef;
    --muted: #969ca6;
    --crease: 0 1px 3px rgba(0 0 0 / 0.55), 0 2px 10px rgba(0 0 0 / 0.45);
    --crease-press: 0 1px 2px rgba(0 0 0 / 0.4), 0 1px 3px rgba(0 0 0 / 0.25);
    --sheen: radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 75%);
  }
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
  background: var(--base);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

input,
button {
  font-family: inherit;
}

.center-screen {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* ── 浮起原子：surface + 折痕 + 顶面高光 ──────────────────── */
.mf-raised,
.card,
.enter-card,
.list,
.wx-state {
  position: relative;
  background: var(--surface);
  box-shadow: var(--crease);
}
.mf-raised::before,
.card::before,
.enter-card::before,
.list::before,
.wx-state::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sheen);
  pointer-events: none;
}
.card > *,
.enter-card > *,
.list > *,
.wx-state > * {
  position: relative;
  z-index: 1;
}

.card {
  border-radius: var(--r-card);
  padding: 24px;
  width: 100%;
  max-width: 360px;
}

/* 登录 */
.login-screen {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(var(--green-rgb) / 0.1), transparent 70%),
    var(--base);
}
.login-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 360px;
}
.login-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
}
.login-foot {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 0 12px;
}
.brand {
  text-align: center;
  margin-bottom: 8px;
}
.brand-logo {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--wx-green);
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: var(--crease-accent);
  overflow: hidden;
}
.brand-logo img {
  width: 100%;
  height: 100%;
  display: block;
}
.brand-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sheen);
  pointer-events: none;
}
.brand h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 12px;
}

/* 输入框：凹陷（trough fill + 顶部内阴影），聚焦叠绿色半透环 */
.input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: none;
  border-radius: var(--r-small);
  font-size: 16px;
  outline: none;
  color: var(--text);
  background: var(--trough);
  box-shadow: inset 0 1px 2px rgba(var(--shadow) / 0.18), inset 0 2px 6px rgba(var(--shadow) / 0.1);
  transition: box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.input::placeholder {
  color: var(--muted);
}
.input:focus {
  box-shadow: inset 0 1px 2px rgba(var(--shadow) / 0.16), 0 0 0 3px rgba(var(--green-rgb) / 0.22);
}

/* 密码框 + 显示/隐藏切换 */
.pw-field {
  position: relative;
}
.pw-field .input {
  padding-right: 46px;
}
.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
}
.pw-toggle:active {
  background: rgba(var(--shadow) / 0.06);
}

/* 按钮：浮起 blob，按下缩小 + 折痕收紧 */
.btn {
  position: relative;
  height: 48px;
  border: none;
  border-radius: var(--r-small);
  font-size: 16px;
  font-weight: 500;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--crease);
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sheen);
  pointer-events: none;
}
.btn:active:not(:disabled) {
  transform: scale(0.97);
  box-shadow: var(--crease-press);
}
.btn-primary {
  background: var(--wx-green);
  color: #fff;
  box-shadow: var(--crease-accent);
}
/* 绿底上用更克制的顶面高光，避免白色 sheen 把绿冲淡 */
.btn-primary::before,
.wx-btn.btn-primary::before {
  background: radial-gradient(
    ellipse at 50% 22%,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.08) 42%,
    transparent 72%
  );
}
.btn-primary:active:not(:disabled) {
  background: var(--wx-green-dark);
}
/* 危险动作按钮：红底，折痕用 danger 色 */
.btn-danger {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 1px 3px rgba(var(--danger-rgb) / 0.45), 0 4px 14px rgba(var(--danger-rgb) / 0.3);
}
.btn-danger::before {
  background: radial-gradient(ellipse at 50% 22%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.07) 42%, transparent 72%);
}
.btn-danger:active:not(:disabled) {
  background: #e84444;
}
.btn:disabled {
  opacity: 0.6;
  cursor: default;
}
/* 文本按钮：无浮起，绿字，按下淡绿底 */
.btn-text {
  background: none;
  border: none;
  color: var(--wx-green);
  font-size: 15px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
  transition: background 0.18s;
}
.btn-text:active {
  background: rgba(var(--green-rgb) / 0.12);
}
.btn-text.danger {
  color: var(--danger);
}
.btn-text.danger:active {
  background: rgba(var(--danger-rgb) / 0.12);
}

/* 实例卡片操作：「管理」分类折叠菜单（默认收起，点开按运维/设置/危险分组展开文字操作） */
.inst-menu-toggle {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  border-radius: 12px;
  background: var(--trough);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(var(--shadow) / 0.1);
  transition: background 0.15s;
}
.inst-menu-toggle:hover {
  background: var(--base);
}
.inst-menu-caret {
  display: inline-flex;
  color: var(--muted);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.inst-menu-toggle.open .inst-menu-caret {
  transform: rotate(180deg);
}
/* 「管理」菜单：绝对定位悬浮层，浮在下方内容之上，不把卡片撑高、不顶走后面的内容 */
.inst-menu-wrap {
  position: relative;
  margin-top: 10px;
}
.inst-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--surface);
  border-radius: var(--r-small);
  box-shadow: 0 6px 22px rgba(var(--shadow) / 0.26), 0 2px 6px rgba(var(--shadow) / 0.18);
  animation: inst-menu-in 0.16s ease;
}
@keyframes inst-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.inst-menu-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: 2px 4px 2px;
}
.inst-menu-items {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.inst-menu-danger {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--shadow) / 0.08);
}

.error {
  color: var(--danger);
  font-size: 14px;
}
.ok {
  color: var(--wx-green);
  font-size: 14px;
}

/* ── 页面骨架 ──────────────────────────────────────────── */
.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
/* 顶栏走浅色布面（不再整条绿），标题深色、操作绿字 —— iOS26 + 牛奶布艺 */
.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  padding-top: env(safe-area-inset-top);
  height: calc(52px + env(safe-area-inset-top));
  background: var(--base);
}
.topbar-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.content {
  flex: 1;
  padding: 16px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
/* PC 大屏：加宽容器，实例网格自动多列卡片 */
@media (min-width: 880px) {
  .content {
    max-width: 940px;
    padding: 20px 28px 40px;
  }
  .topbar {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.hello {
  font-size: 22px;
  font-weight: 700;
  margin: 8px 4px 18px;
}
.tag {
  display: inline-block;
  font-size: 11px;
  background: rgba(var(--green-rgb) / 0.14);
  color: var(--wx-green-dark);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 600;
}
.tag-off {
  background: rgba(var(--danger-rgb) / 0.14);
  color: var(--danger);
}

/* 进入微信入口卡 */
.enter-card {
  width: 100%;
  border: none;
  border-radius: var(--r-card);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.enter-card:active {
  transform: scale(0.985);
  box-shadow: var(--crease-press);
}
.enter-icon {
  position: relative;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: var(--wx-green);
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--crease-accent);
  overflow: hidden;
}
.enter-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sheen);
  pointer-events: none;
}
.enter-text {
  flex: 1;
}
.enter-title {
  font-size: 17px;
  font-weight: 600;
}
.enter-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}
.enter-arrow {
  color: #c2c7d0;
  font-size: 22px;
}

/* 列表卡：行间用折痕细缝分隔，不用 border */
.list {
  margin-top: 16px;
  border-radius: var(--r-card);
  overflow: hidden;
}
.list-item {
  position: relative;
  z-index: 1;
  width: 100%;
  background: none;
  border: none;
  box-shadow: inset 0 -1px 0 rgba(var(--shadow) / 0.08);
  padding: 16px 18px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.18s;
}
.list-item:active {
  background: rgba(var(--shadow) / 0.04);
}
.list-item:last-child {
  box-shadow: none;
}

/* 子账号列表 */
.user-row {
  position: relative;
  z-index: 1;
  padding: 14px 18px;
  box-shadow: inset 0 -1px 0 rgba(var(--shadow) / 0.08);
}
.user-row:last-child {
  box-shadow: none;
}
.user-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-name {
  font-size: 16px;
  font-weight: 500;
}
.user-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

/* ── 微信安装/更新状态卡（启动下载 + 更新到最新版） ──────── */
.wx-state {
  margin-top: 16px;
  border-radius: var(--r-card);
  padding: 20px;
}
.wx-state-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.wx-state-text {
  flex: 1;
  min-width: 0;
}
.wx-state-title {
  font-size: 16px;
  font-weight: 600;
}
.wx-state-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}
.wx-btn {
  height: 40px;
  flex: none;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}
/* 进度条：凹槽轨 + 绿色带光晕填充 */
.wx-progress {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  height: 8px;
  border-radius: 999px;
  background: var(--trough);
  box-shadow: inset 0 1px 2px rgba(var(--shadow) / 0.2);
  overflow: hidden;
}
.wx-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--wx-green-dark), var(--wx-green));
  box-shadow: 0 0 8px rgba(var(--green-rgb) / 0.5);
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* 进度不确定（拿不到总大小）时来回滑动 */
.wx-progress-bar.indeterminate {
  width: 40%;
  transition: none;
  animation: wx-slide 1.1s ease-in-out infinite;
}
@keyframes wx-slide {
  0% {
    margin-left: -40%;
  }
  100% {
    margin-left: 100%;
  }
}
.wx-progress-text {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

/* ── 弹窗 ──────────────────────────────────────────────── */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(26, 29, 36, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 20;
}
.modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: var(--r-card);
}
.modal h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
}
.modal-actions {
  display: flex;
  gap: 10px;
}
.modal-actions .btn {
  flex: 1;
}

/* ── 桌面 ──────────────────────────────────────────────── */
.desktop-wrap {
  position: fixed;
  inset: 0;
  background: #000;
}
.desktop-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
/* 返回钮：浮起白色圆 blob */
.desktop-back {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  box-shadow: var(--crease);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s;
}
.desktop-back:active {
  transform: scale(0.94);
  box-shadow: var(--crease-press);
}
/* 文件按钮：返回钮下方 */
.desktop-files-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 64px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  box-shadow: var(--crease);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.desktop-files-btn:active {
  transform: scale(0.94);
}

/* 拖拽落区 */
.drop-zone {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(7, 193, 96, 0.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.drop-card {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--crease);
  padding: 28px 36px;
  text-align: center;
  border: 2px dashed rgba(var(--green-rgb) / 0.5);
}
.drop-icon {
  font-size: 36px;
  color: var(--wx-green);
}
.drop-title {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 700;
}
.drop-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

/* 文件传输面板 */
.files-panel {
  position: fixed;
  top: max(64px, calc(env(safe-area-inset-top) + 52px));
  left: 12px;
  width: min(330px, calc(100vw - 24px));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--crease);
  z-index: 11;
  padding: 16px;
  gap: 10px;
}
.files-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
}
.files-upload {
  height: 42px;
  font-size: 15px;
}
.clip-area {
  width: 100%;
  resize: vertical;
  min-height: 96px;
  padding: 10px 12px;
  border-radius: 14px;
  border: none;
  background: var(--trough, #edeef1);
  color: var(--text, #1a1d24);
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
  box-shadow: inset 0 1px 3px rgba(51, 66, 102, 0.16);
  outline: none;
  box-sizing: border-box;
}
.clip-area:focus {
  box-shadow: inset 0 1px 3px rgba(51, 66, 102, 0.16), 0 0 0 2px rgba(7, 193, 96, 0.35);
}
.security-status {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--trough, #edeef1);
  box-shadow: inset 0 1px 3px rgba(51, 66, 102, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.security-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  line-height: 1.4;
}
.iv-stuck-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.files-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.files-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.files-item {
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: inset 0 -1px 0 rgba(var(--shadow) / 0.08);
}
.files-item:last-child {
  box-shadow: none;
}
.files-item.sel {
  background: rgba(var(--green-rgb) / 0.08);
  border-radius: var(--r-small);
  box-shadow: var(--crease-accent);
  padding: 0 4px;
  margin: 0 -4px;
}
.files-dl {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 4px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
}
.files-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.files-size {
  flex: none;
  color: var(--wx-green-dark);
  font-size: 12px;
  font-weight: 600;
}
.files-del {
  flex: none;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
}
.files-del:active {
  background: rgba(var(--danger-rgb) / 0.12);
  color: var(--danger);
}

/* ── loading ───────────────────────────────────────────── */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(var(--green-rgb) / 0.2);
  border-top-color: var(--wx-green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- 多实例：分区标题 ---------- */
.section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 6px 12px;
}
.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* ---------- 实例网格 ---------- */
.inst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
  /* 各卡片按自身内容高度，避免某张展开「管理」菜单时同行其它卡片被拉等高（显得也展开了） */
  align-items: start;
}
.inst-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--crease);
  padding: 18px;
  overflow: hidden;
}
.inst-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sheen);
  pointer-events: none;
}
.inst-card > * {
  position: relative;
}
/* 菜单展开时：放开裁剪让悬浮层露出，并抬升层级盖住下方/同列卡片（仍低于弹窗 z-index 20） */
.inst-card.open-menu {
  overflow: visible;
  z-index: 5;
}
.inst-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.inst-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inst-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  min-height: 18px;
}
.inst-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
/* 「关于」版本卡：有新版时的升级提示 + 上次检查脚注 */
.ver-hint {
  margin-top: 10px;
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  background: rgba(245 158 11 / 0.1);
  border-radius: 10px;
}
.upgrade-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 0 14px;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(245 158 11 / 0.12);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
}
.upgrade-banner .s-btn {
  flex: none;
}
.ver-hint code {
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(var(--shadow) / 0.08);
  white-space: nowrap;
}
.ver-checked {
  margin-top: 12px;
}
.inst-actions a.btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.inst-enter {
  flex: 1;
}
.inst-act {
  flex: none;
}
.inst-act-wide {
  flex: 1;
  height: 42px;
  font-size: 15px;
}
/* 管理卡片底部的文字操作（重命名/分配/删除） */
.inst-admin-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 10px;
  padding-top: 8px;
  box-shadow: inset 0 1px 0 rgba(var(--shadow) / 0.08);
}
.inst-admin-links .btn-text {
  padding: 6px 8px;
  font-size: 14px;
}

/* 状态徽章配色 */
.tag-on {
  background: rgba(var(--green-rgb) / 0.16);
  color: var(--wx-green-dark);
}
.tag-busy {
  background: rgba(51 102 204 / 0.16);
  color: #2f5fd0;
}
.tag-warn {
  background: rgba(245 158 11 / 0.18);
  color: #b9770a;
}

/* ---------- chip 多选 / 展示 ---------- */
.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin: 14px 2px 8px;
}
.chip-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
/* 扁平设置区块（诊断与日志 / 关于）：无卡片，直接排在分区标题下，避免单卡片的厚重感 */
.settings-block {
  padding: 2px 2px 4px;
}
.settings-block .s-desc {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 660px;
}
.s-field {
  margin-top: 14px;
}
.s-field .field-label {
  display: block;
  margin: 0 2px 8px;
}
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 16px;
}
/* 实心主按钮：固定内边距 + 不换行（之前作为 flex 项被压窄导致按钮内文字断行） */
.settings-actions .s-btn {
  height: 42px;
  padding: 0 22px;
  flex: none;
  white-space: nowrap;
}
.settings-actions .btn-text {
  white-space: nowrap;
}
.s-foot {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 660px;
}
.s-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.s-app {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.s-line {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.s-line b {
  color: var(--text);
  font-weight: 600;
}
.chip-row-pick {
  display: flex;
}
.chip {
  font-size: 12px;
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 600;
  line-height: 1.4;
}
.chip-static {
  background: rgba(var(--green-rgb) / 0.12);
  color: var(--wx-green-dark);
}
.chip-toggle {
  border: none;
  cursor: pointer;
  background: var(--trough);
  color: var(--muted);
  box-shadow: inset 0 1px 2px rgba(var(--shadow) / 0.16);
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.chip-toggle:active {
  transform: scale(0.95);
}
.chip-toggle.on {
  background: var(--wx-green);
  color: #fff;
  box-shadow: var(--crease-accent);
}

/* ---------- 空状态 ---------- */
.empty-state {
  text-align: center;
  padding: 30px 16px 36px;
}
.empty-action {
  margin-top: 16px;
}
.empty-blob {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--crease);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  position: relative;
  overflow: hidden;
}
.empty-blob::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sheen);
}
.empty-blob img {
  width: 52px;
  height: 52px;
  position: relative;
}
.empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.empty-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* ── 默认密码安全告警条 ──────────────────────────────────── */
.warn-banner {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  cursor: pointer;
  background: rgba(var(--danger-rgb) / 0.1);
  border-radius: var(--r-blob);
  padding: 14px 16px;
  margin: 4px 0 14px;
  box-shadow: inset 0 0 0 1.5px rgba(var(--danger-rgb) / 0.3);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.warn-banner:active {
  transform: scale(0.99);
}
.warn-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.warn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--danger);
}
.warn-text b {
  font-size: 14px;
}

/* ── 删除实例：勾选是否连数据卷一起删 ──────────────────────── */
.purge-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: var(--r-small);
  background: var(--trough);
  font-size: 14px;
  box-shadow: inset 0 1px 2px rgba(var(--shadow) / 0.14);
  transition: box-shadow 0.18s;
}
.purge-opt.on {
  box-shadow: inset 0 0 0 1.5px rgba(var(--danger-rgb) / 0.45);
}
.purge-check {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--crease-press);
  color: var(--danger);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.purge-opt.on .purge-check {
  background: var(--danger);
  color: #fff;
}

/* ── Toast ──────────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  z-index: 50;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  max-width: 80vw;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: var(--crease);
  animation: toast-in 0.32s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.toast-ok {
  color: var(--wx-green-dark);
}
.toast-error {
  color: var(--danger);
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── 桌面连接 loading 遮罩 ──────────────────────────────── */
.desktop-loading {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--base);
}
.desktop-loading-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.desktop-loading-sub {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 0 24px;
}
.desktop-loading-warn {
  margin-top: 6px;
  font-size: 12px;
  color: var(--danger);
  text-align: center;
  padding: 0 24px;
}

/* ============================================================
 * 微信 PC 式布局：左侧 tab 栏 + 右侧工作区
 * ============================================================ */
.shell {
  display: flex;
  height: 100%;
  min-height: 0;
  background: var(--base);
}

/* —— 左侧栏 —— */
.sidebar {
  flex: none;
  width: 264px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: 1px 0 0 rgba(var(--shadow) / 0.08), 4px 0 16px rgba(var(--shadow) / 0.05);
  z-index: 20;
  transition: width 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding-top: env(safe-area-inset-top);
}
.shell.collapsed .sidebar {
  width: 64px;
}
.sb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 10px;
}
.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sb-logo {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
}
.sb-name {
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}
.sb-collapse {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 9px;
}
.sb-collapse:active {
  background: rgba(var(--shadow) / 0.06);
}
.collapsed .sb-top {
  flex-direction: column;
}

.sb-nav {
  padding: 4px 10px;
}
.sb-section {
  padding: 12px 16px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.sb-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sb-empty {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--muted);
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 15px;
  color: var(--text);
  text-align: left;
  transition: background 0.15s;
}
.sb-item:hover {
  background: rgba(var(--shadow) / 0.05);
}
.sb-item.on {
  background: rgba(var(--green-rgb) / 0.12);
  color: var(--wx-green-dark);
}
.sb-item.on .sb-ic {
  color: var(--wx-green-dark);
}
.sb-ic {
  position: relative;
  flex: none;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
/* 「有新版」红点：贴在「管理」齿轮图标右上角，折叠/展开都可见 */
.sb-updot {
  position: absolute;
  top: -2px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f5483b;
  border: 2px solid var(--surface);
}
.sb-updot-text {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: #f5483b;
}
.sb-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.collapsed .sb-item {
  justify-content: center;
  padding: 9px 0;
}

/* 实例头像 + 状态点 */
.sb-avatar {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
}
.sb-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--surface);
}
.sb-stxt {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.st-on {
  background: #16c060;
  color: var(--wx-green-dark);
}
.st-off {
  background: #c2c7d0;
  color: var(--muted);
}
.st-busy {
  background: #2f7ad0;
  color: #2f5fd0;
}
.st-warn {
  background: #e6a23c;
  color: #b9770a;
}

.sb-footer {
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  box-shadow: inset 0 1px 0 rgba(var(--shadow) / 0.08);
}
.sb-user {
  padding: 8px 12px 2px;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* —— 右侧工作区 —— */
.workspace {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.ws-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.ws-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: calc(52px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  background: var(--base);
  box-shadow: inset 0 -1px 0 rgba(var(--shadow) / 0.07);
}
.ws-title {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-menu {
  display: none;
  flex: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
  border-radius: 9px;
  margin-left: -6px;
}
.ws-action {
  flex: none;
  border: none;
  background: var(--surface);
  color: var(--wx-green-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--crease);
}
/* 主题切换：顶栏最右的图标按钮 */
.theme-toggle {
  margin-left: auto;
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  border-radius: 10px;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.15s;
}
.theme-toggle:hover {
  color: var(--text);
  background: rgba(var(--shadow) / 0.06);
}
.theme-toggle:active {
  transform: scale(0.94);
}
.ws-action:active {
  transform: scale(0.96);
}
.ws-action.on {
  background: var(--wx-green, #07c160);
  color: #fff;
}
.ws-page .content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* 主页实例快捷卡 */
.home-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: none;
  cursor: pointer;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 16px;
  box-shadow: var(--crease);
  position: relative;
  overflow: hidden;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.home-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sheen);
  pointer-events: none;
}
.home-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--crease-accent);
}
.home-card:active {
  transform: scale(0.985);
}
.home-card-av {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
}
.home-card-main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.home-card-name {
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.home-card-st {
  font-size: 12px;
  font-weight: 600;
  background: none !important;
  flex: none;
}
.home-card-ver {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-card-ver::before {
  content: '·';
  margin-right: 8px;
  color: var(--muted);
}

/* —— 内嵌实例视图 —— */
.iv-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #000;
}
.iv-center {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--base);
}
/* VNC 分支：纵向 flex —— 画面区(.iv-canvas, flex:1) 在上，中文输入条在下，互不重叠。
   输入条占用布局空间 → iframe 区域变小 → resize=remote 让远端桌面同步缩小，微信画面完整可见、不被遮。 */
.iv-stage--vnc {
  display: flex;
  flex-direction: column;
}
.iv-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #000;
}
.iv-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.iv-imebar {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  /* 与顶部 nav 栏同款牛奶布艺浅色主题 + 顶部细折痕分隔 */
  background: var(--base);
  box-shadow: inset 0 1px 0 rgba(var(--shadow) / 0.07);
  box-sizing: border-box;
}
.iv-imebar-input {
  flex: 1;
  height: 38px;
  max-height: 38px;
  resize: none;
  padding: 9px 12px;
  border-radius: 10px;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.3;
  /* 牛奶布艺凹槽输入框：与「剪贴板」文本框一致 */
  background: var(--trough);
  color: var(--text);
  box-shadow: inset 0 1px 3px rgba(var(--shadow) / 0.16);
  box-sizing: border-box;
}
.iv-imebar-input:focus {
  box-shadow: inset 0 1px 3px rgba(var(--shadow) / 0.16), 0 0 0 2px rgba(7, 193, 96, 0.35);
}
.iv-imebar-send {
  height: 38px;
  flex: 0 0 auto;
  padding: 0 18px;
}
.iv-loading,
.iv-drop {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 5;
}
.iv-loading {
  background: var(--base);
}
.iv-loading-text {
  font-size: 16px;
  font-weight: 600;
}
.iv-loading-sub {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 0 24px;
}
.iv-loading-warn {
  margin-top: 4px;
  font-size: 12px;
  color: var(--danger);
  text-align: center;
  padding: 0 24px;
}
.iv-drop {
  z-index: 30;
  background: rgba(7, 193, 96, 0.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.iv-files {
  position: absolute;
  top: 14px;
  right: 14px;
  width: min(330px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--crease), 0 8px 30px rgba(var(--shadow) / 0.18);
  z-index: 12;
  padding: 16px;
}
/* 只读遮罩：他人正在操作时盖住 VNC，拦截键鼠（半透，仍能看到画面） */
.iv-lock {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 29, 36, 0.28);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}
.iv-lock-card {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--crease), 0 8px 30px rgba(var(--shadow) / 0.25);
  padding: 22px 26px;
  text-align: center;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.iv-lock-title {
  font-size: 16px;
  font-weight: 700;
}
.iv-lock-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.iv-notice {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
}
.iv-notice-title {
  font-size: 17px;
  font-weight: 700;
}
.iv-notice-sub {
  font-size: 13px;
  color: var(--muted);
}
.iv-notice-btn {
  padding: 0 22px;
  height: 44px;
}

/* —— 移动端：侧栏变抽屉 —— */
.shell-backdrop {
  display: none;
}
@media (max-width: 767px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 82vw;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 0 40px rgba(var(--shadow) / 0.35);
  }
  .shell.drawer-open .sidebar {
    transform: none;
  }
  .shell.drawer-open .shell-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(26, 29, 36, 0.4);
    z-index: 15;
  }
  .ws-menu {
    display: flex;
  }
  .ws-action {
    padding: 7px 12px;
  }
}

/* 宽屏：工作区内容容器更宽（实例网格多列） */
@media (min-width: 880px) {
  .ws-page .content {
    max-width: 940px;
  }
}

/* ── 数据卷管理（管理员）──────────────────────────────────── */
.vol-modal {
  width: 640px;
  max-width: 92vw;
  max-height: 86vh;
}
/* 运行中警示条：柔和琥珀，inset 凹槽质感（不是红色危险） */
.vol-warn {
  background: rgba(245, 166, 35, 0.14);
  color: #9a6400;
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 12px;
  border-radius: var(--r-small);
}
/* 分区容器：内部元素紧凑成组（label 紧贴其内容），分区之间靠 .modal 的 12px gap 拉开 */
.vol-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vol-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.vol-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.vol-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
/* 主操作：中号浮起胶囊（比默认 48px 更克制，和弹窗比例协调） */
.vol-topbar .btn {
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.vol-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: 13px;
}
.vol-crumb {
  border: none;
  background: none;
  color: var(--wx-green);
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 8px;
}
.vol-crumb:active {
  background: rgba(var(--green-rgb) / 0.12);
}
.vol-crumb:disabled {
  color: var(--muted);
  cursor: default;
}
.vol-sep {
  color: var(--muted);
}
/* 工具栏：浮起小胶囊（绿字），和上面「扁平绿色面包屑」明显区分，读起来是"按钮"而非散落文字 */
.vol-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vol-tools .btn-text {
  background: var(--surface);
  box-shadow: var(--crease-press);
  font-size: 14px;
  padding: 8px 14px;
}
.vol-tools .btn-text:active {
  transform: scale(0.96);
}
.vol-tools .btn-text:disabled {
  opacity: 0.5;
}
.vol-mkdir {
  display: flex;
  gap: 8px;
}
.vol-mkdir .input {
  flex: 1;
}
.vol-busy {
  font-size: 13px;
  color: var(--wx-green-dark);
  font-weight: 600;
}
/* 列表容器：凹槽（inset），内部条目为浮起 bump（hover） */
.vol-list {
  background: var(--trough);
  border-radius: var(--r-small);
  padding: 6px;
  max-height: 44vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: inset 0 1px 3px rgba(var(--shadow) / 0.22);
}
.vol-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 12px;
  padding: 2px 4px 2px 6px;
}
.vol-row:hover {
  background: var(--surface);
  box-shadow: var(--crease-press);
}
.vol-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  border: none;
  background: none;
  text-align: left;
  padding: 8px 4px;
  color: var(--text);
  font-size: 14px;
}
.vol-main:disabled {
  opacity: 0.55;
}
.vol-up {
  color: var(--muted);
}
.vol-ic {
  flex: 0 0 auto;
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.vol-ic.dir {
  color: var(--wx-green);
}
.vol-ic svg {
  display: block;
}
.vol-nm {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vol-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  padding-left: 8px;
}
.vol-rename {
  flex: 1;
  margin: 2px 0;
}
.vol-acts {
  flex: 0 0 auto;
  display: flex;
  gap: 3px;
}
.vol-act {
  border: none;
  background: var(--trough);
  color: var(--muted);
  width: 30px;
  height: 30px;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--crease-press);
}
.vol-row:hover .vol-act {
  background: var(--base);
  color: var(--text);
}
.vol-act:active {
  transform: scale(0.92);
}
.vol-act.danger:hover {
  color: var(--danger);
  background: rgba(var(--danger-rgb) / 0.12);
}
.vol-act:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── 新建实例·应用类型选择 ─────────────────────────────── */
.app-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}
.app-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border: none;
  border-radius: var(--r-small);
  background: var(--trough);
  color: var(--text);
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(var(--shadow) / 0.1);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.app-pick:hover:not(:disabled):not(.sel) {
  background: var(--base);
}
.app-pick.sel {
  background: var(--surface);
  box-shadow: var(--crease-accent);
}
.app-pick.sel .app-pick-name {
  color: var(--wx-green-dark);
}
.app-pick:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.app-pick-name {
  font-size: 14px;
  font-weight: 600;
}
.app-pick-desc {
  font-size: 11px;
  color: var(--muted);
}

/* ── 实例图标编辑 ─────────────────────────────────────── */
.icon-edit-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.icon-crop {
  position: relative;
  height: 240px;
  border-radius: var(--r-small);
  overflow: hidden;
  background: #1a1d24;
}
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 8px;
}
.icon-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: none;
  border-radius: var(--r-small);
  background: var(--trough);
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(var(--shadow) / 0.1);
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
}
.icon-pick span {
  font-size: 11px;
  color: var(--muted);
}
.icon-pick.sel {
  background: var(--surface);
  box-shadow: var(--crease-accent);
}
.icon-pick.sel span {
  color: var(--wx-green-dark);
}
.icon-pick:active {
  transform: scale(0.96);
}

/* 桌面设置面板 — 壁纸 / 字体 */
.settings-tabs {
  display: flex;
  gap: 0;
  margin: 8px 0;
  border-radius: var(--r-small);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
  background: var(--trough);
}
.settings-tab {
  flex: 1;
  padding: 8px 0;
  text-align: center;
  font-size: 13px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.settings-tab.on {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--crease);
}
.settings-tab + .settings-tab {
  border-left: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
}
.settings-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 壁纸缩略图网格 */
.bg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.bg-card {
  background: var(--surface);
  border-radius: var(--r-small);
  box-shadow: var(--crease);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.12s;
}
.bg-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--crease), 0 4px 12px rgba(var(--shadow) / 0.15);
}
.bg-card:active {
  transform: scale(0.98);
}
.bg-card.active {
  box-shadow: 0 0 0 2px var(--wx-green), var(--crease);
}
.bg-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--trough);
  border-bottom: 1px solid rgba(var(--shadow) / 0.06);
}
.bg-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bg-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0 0 0 / 0.45);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.bg-card:not(.active):hover .bg-hint {
  opacity: 1;
}
.bg-active-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--wx-green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  line-height: 1.4;
  pointer-events: none;
  z-index: 1;
}
.bg-del {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0 0 0 / 0.5);
  color: #fff;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}
.bg-card:hover .bg-del {
  opacity: 1;
}
.bg-del:hover {
  background: var(--danger);
}
.bg-name {
  display: block;
  font-size: 11px;
  color: var(--muted);
  padding: 5px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 字体卡片网格 */
.font-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.font-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-small);
  box-shadow: var(--crease);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.12s;
}
.font-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--crease), 0 4px 12px rgba(var(--shadow) / 0.15);
}
.font-card:active {
  transform: scale(0.98);
}
.font-card.active {
  box-shadow: 0 0 0 2px var(--wx-green), var(--crease);
}
.font-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  background: var(--wx-green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  line-height: 1.4;
  pointer-events: none;
}
.font-del {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0 0 0 / 0.5);
  color: #fff;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}
.font-card:hover .font-del {
  opacity: 1;
}
.font-del:hover {
  background: var(--danger);
}
.font-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  background: var(--trough);
  border-bottom: 1px solid rgba(var(--shadow) / 0.06);
}
.font-preview-text {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.font-name {
  display: block;
  font-size: 11px;
  color: var(--muted);
  padding: 5px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
