:root {
  --theme-primary: #2563eb;
  --theme-deep: #0f2f6b;
  --theme-soft: #e8f1ff;
  --theme-accent: #60a5fa;
  --ink: #11253f;
  --ink-soft: #1b3557;
  --paper: #f4f7fc;
  --panel: #ffffff;
  --panel-soft: #f8faff;
  --line: #dbe3ef;
  --line-strong: #c4d0e2;
  --muted: #5f7188;
  --green: var(--theme-primary);
  --green-bright: var(--theme-accent);
  --lime: #bfdbfe;
  --amber: #c88421;
  --danger: #b44132;
  --danger-soft: #fff0ed;
  --shadow: 0 18px 50px rgba(20, 48, 94, 0.12);
  --radius: 18px;
  --radius-sm: 12px;
  --font: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--green); }
[hidden] { display: none !important; }

.admin-boot {
  display: grid;
  min-height: 100vh;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  background: radial-gradient(circle at 50% 30%, #173a6b, #071326 70%);
  color: #dce8f8;
}
.boot-mark, .brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: var(--theme-accent);
  color: #071a38;
  font-weight: 900;
  font-size: 1.35rem;
}
.brand-mark.small { width: 38px; height: 38px; border-radius: 11px; font-size: 1rem; }
@keyframes pulse { 50% { opacity: 0.45; transform: scale(0.96); } }
.boot-mark { animation: pulse 1.8s ease-in-out infinite; }

.admin-auth {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #081a33;
  color: #f4f8f5;
}
.auth-atmosphere {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(96, 165, 250, 0.22), transparent 32%),
    radial-gradient(circle at 80% 85%, rgba(37, 99, 235, 0.28), transparent 42%),
    linear-gradient(125deg, #061326 0%, #102a50 52%, #07172e 100%);
}
.auth-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}
.auth-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.72fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
  width: min(1180px, calc(100% - 3rem));
  min-height: 100vh;
  margin: 0 auto;
  padding: 3rem 0;
}
.brand-lockup { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 2.8rem; }
.brand-lockup div { display: grid; gap: 0.12rem; }
.brand-lockup strong { font-size: 1.05rem; letter-spacing: 0.04em; }
.brand-lockup span { color: rgba(255,255,255,0.52); font-size: 0.72rem; }
.auth-copy .eyebrow { color: var(--lime); }
.auth-copy h1 { margin: 0.5rem 0 1.2rem; font-size: clamp(2.7rem, 6vw, 5.2rem); line-height: 1.06; letter-spacing: -0.05em; }
.auth-copy > p { max-width: 34rem; margin: 0; color: rgba(255,255,255,0.64); font-size: 0.95rem; line-height: 1.9; }
.auth-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 2.8rem; }
.auth-features > div { display: grid; gap: 0.22rem; padding: 1rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 15px; background: rgba(255,255,255,0.04); }
.auth-features b { color: var(--lime); font-size: 0.64rem; letter-spacing: 0.12em; }
.auth-features span { font-size: 0.82rem; font-weight: 700; }
.auth-features small { color: rgba(255,255,255,0.48); font-size: 0.68rem; }
.auth-card {
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 26px;
  background: rgba(250, 251, 247, 0.98);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  backdrop-filter: blur(18px);
}
.auth-card-head { margin-bottom: 1.25rem; }
.auth-card-head h2, .auth-card h2 { margin: 0.3rem 0 0.45rem; font-size: 1.5rem; letter-spacing: -0.03em; }
.auth-card-head p, .auth-card > div > p { margin: 0; color: var(--muted); font-size: 0.82rem; }
.auth-footnote { margin: 1.3rem 0 0; color: var(--muted); font-size: 0.72rem; line-height: 1.7; }
.eyebrow { color: var(--green); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }

.admin-form, .stack-form { display: grid; gap: 0.92rem; }
.two-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.72rem; }
.field { display: grid; gap: 0.38rem; }
.field > span { color: #47514b; font-size: 0.74rem; font-weight: 700; }
.field input, .field select, .field textarea, .toolbar input, .toolbar select, .inline-input {
  width: 100%;
  min-height: 42px;
  padding: 0.62rem 0.72rem;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .toolbar input:focus, .toolbar select:focus, .inline-input:focus {
  border-color: var(--green-bright);
  box-shadow: 0 0 0 3px rgba(32, 167, 124, 0.13);
}
.form-message { min-height: 1.2em; margin: 0; color: var(--muted); font-size: 0.75rem; }
.form-message.is-error { color: var(--danger); }
.form-message.is-success { color: var(--green); }
.hint { color: var(--muted); font-size: 0.72rem; line-height: 1.7; }

.button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 1rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.78rem;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }
.button-primary { background: var(--green); color: #fff; }
.button-primary:hover { background: #105740; }
.button-secondary { border-color: var(--line-strong); background: #fff; color: var(--ink); }
.button-quiet { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: #fff; }
.admin-main .button-quiet { border-color: var(--line); background: #fff; color: var(--ink); }
.button-danger { background: var(--danger); color: #fff; }
.button-danger-soft { border-color: #e9c8c1; background: var(--danger-soft); color: var(--danger); }
.button-block { width: 100%; }
.button-mini { min-height: 32px; padding: 0.35rem 0.6rem; font-size: 0.7rem; border-radius: 8px; }
.icon-button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 1.2rem;
}
.danger-text { color: #ffb4a8 !important; }
.admin-main .danger-text { color: var(--danger) !important; }
.green-text { color: #2d8b67; }
.admin-main .green-text { color: #1b7f5c !important; }

.admin-shell { min-height: 100vh; background: var(--paper); }
.admin-topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(11, 21, 18, 0.97);
  color: #fff;
  backdrop-filter: blur(16px);
}
.topbar-brand { display: flex; align-items: center; gap: 0.75rem; }
.topbar-brand div { display: grid; gap: 0.05rem; }
.topbar-brand strong { font-size: 0.98rem; letter-spacing: 0.05em; }
.topbar-brand span { color: rgba(255,255,255,0.45); font-size: 0.6rem; letter-spacing: 0.16em; }
.topbar-actions { display: flex; align-items: center; gap: 0.65rem; }
.admin-identity { display: flex; align-items: center; gap: 0.5rem; margin-right: 0.35rem; }
.admin-identity strong { font-size: 0.8rem; }
.level-badge { padding: 0.22rem 0.5rem; border: 1px solid rgba(217,242,122,0.3); border-radius: 999px; background: rgba(217,242,122,0.12); color: var(--lime); font-size: 0.64rem; font-weight: 700; }

.admin-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: calc(100vh - 72px); }
.admin-sidebar {
  position: sticky;
  top: 72px;
  display: flex;
  height: calc(100vh - 72px);
  flex-direction: column;
  padding: 1.1rem 0.8rem 0.8rem;
  background: #11201c;
  color: #fff;
}
#admin-nav { display: grid; min-height: 0; flex: 1; align-content: start; gap: 0.35rem; overflow-y: auto; padding-right: 0.15rem; }
.nav-item {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.58rem;
  width: 100%;
  padding: 0.66rem 0.72rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(255,255,255,0.62);
  text-align: left;
  transition: background 0.16s, color 0.16s;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.is-active { border-color: rgba(217,242,122,0.18); background: rgba(217,242,122,0.1); color: #fff; }
.nav-index { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: rgba(255,255,255,0.06); color: var(--lime); font-size: 0.66rem; font-weight: 800; }
.nav-item.is-active .nav-index { background: var(--lime); color: #102019; }
.nav-label { overflow: hidden; font-size: 0.76rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge { min-width: 18px; padding: 0.08rem 0.28rem; border-radius: 99px; background: #d56b54; color: #fff; font-size: 0.58rem; text-align: center; }
.sidebar-note { display: flex; gap: 0.55rem; margin-top: auto; padding: 0.8rem; border: 1px solid rgba(217,242,122,0.16); border-radius: 13px; background: rgba(217,242,122,0.06); }
.sidebar-note-mark { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--lime); color: #14221d; font-size: 0.7rem; font-weight: 900; }
.sidebar-note strong { display: block; color: var(--lime); font-size: 0.7rem; }
.sidebar-note p { margin: 0.25rem 0 0; color: rgba(255,255,255,0.48); font-size: 0.62rem; line-height: 1.6; }
.sidebar-footer { display: flex; justify-content: space-between; padding: 0.8rem 0.3rem 0; color: rgba(255,255,255,0.3); font-size: 0.6rem; }

.admin-main { min-width: 0; padding: clamp(1.1rem, 2.8vw, 2.3rem); }
.admin-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.admin-page-heading h1 { margin: 0.18rem 0 0.3rem; font-size: clamp(1.5rem, 2.7vw, 2.2rem); letter-spacing: -0.04em; }
.admin-page-heading p { max-width: 54rem; margin: 0; color: var(--muted); font-size: 0.78rem; }
.section-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.admin-content { display: grid; gap: 1rem; }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 8px 26px rgba(22,36,31,0.035); }
.panel-pad { padding: clamp(1rem, 2vw, 1.45rem); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 1rem; }
.panel-head p { margin: 0.12rem 0 0; color: var(--muted); font-size: 0.7rem; }
.panel-body { padding: 1rem 1.15rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.8rem; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.stat-card { padding: 0.95rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.stat-card span { display: block; color: var(--muted); font-size: 0.66rem; }
.stat-card strong { display: block; margin-top: 0.22rem; font-size: 1.38rem; letter-spacing: -0.03em; }
.stat-card small { color: var(--muted); font-size: 0.62rem; }

.toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.6rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.toolbar label { display: grid; min-width: 125px; gap: 0.28rem; }
.toolbar label > span { color: var(--muted); font-size: 0.64rem; font-weight: 700; }
.toolbar .grow { flex: 1 1 190px; min-width: 160px; }
.toolbar .button { margin-left: auto; }
.toolbar-actions { display: flex; gap: 0.4rem; margin-left: auto; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.data-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.data-table th, .data-table td { padding: 0.72rem 0.8rem; border-bottom: 1px solid #edf0e9; text-align: left; vertical-align: top; font-size: 0.72rem; }
.data-table th { position: sticky; top: 0; background: #f7f8f3; color: #58635d; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fbfcf8; }
.cell-title { display: grid; gap: 0.1rem; }
.cell-title strong { font-size: 0.76rem; }
.cell-title span { color: var(--muted); font-size: 0.62rem; }
.cell-money { font-variant-numeric: tabular-nums; font-weight: 700; }
.cell-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: 0.68rem; }

.badge { display: inline-flex; align-items: center; padding: 0.18rem 0.45rem; border-radius: 999px; background: #eef1ea; color: #58635d; font-size: 0.62rem; font-weight: 700; white-space: nowrap; }
.badge.green { background: #e5f6ee; color: #167553; }
.badge.amber { background: #fff2df; color: #966117; }
.badge.red { background: #fdebe8; color: #a13d30; }
.badge.blue { background: #e8f1fb; color: #2d639c; }
.badge.dark { background: #14231d; color: var(--lime); }
.badge-row { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.empty-state { display: grid; justify-items: center; gap: 0.3rem; padding: 2.4rem 1rem; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--ink); }
.empty-state span { font-size: 0.72rem; }
.loading-state { display: grid; min-height: 220px; place-items: center; color: var(--muted); font-size: 0.78rem; }

.game-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0.8rem; }
.game-admin-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.game-cover { position: relative; display: grid; height: 116px; place-items: center; overflow: hidden; background: linear-gradient(135deg, #dbeafe, #bfdbfe 55%, #93c5fd); color: #0f2f6b; font-size: 2.1rem; font-weight: 900; }
.game-cover img { width: 100%; height: 100%; object-fit: cover; }
.game-cover .badge { position: absolute; right: 0.55rem; top: 0.55rem; }
.game-card-body { display: grid; gap: 0.6rem; padding: 0.8rem; }
.game-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.game-card-title h3 { margin: 0; font-size: 0.9rem; }
.game-card-title span { color: var(--muted); font-size: 0.6rem; }
.game-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; color: var(--muted); font-size: 0.64rem; }
.game-card-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-top: 0.5rem; border-top: 1px solid #eef0e9; }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.28rem; max-height: 76px; overflow: hidden; }
.chip { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.42rem; border: 1px solid #e1e6dc; border-radius: 7px; background: #f8f9f5; color: #4b5751; font-size: 0.61rem; }
.chip.is-active { border-color: #b9dfc9; background: #e9f6ef; color: #176a52; }

.rank-editor { display: grid; gap: 0.5rem; }
.rank-list { display: grid; gap: 0.32rem; max-height: 260px; overflow: auto; padding: 0.45rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.rank-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 0.38rem; }
.rank-order { color: var(--muted); font-size: 0.6rem; text-align: center; }
.rank-row input { min-height: 32px; padding: 0.3rem 0.5rem; font-size: 0.7rem; }
.rank-actions { display: flex; gap: 0.18rem; }
.rank-actions button { width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted); font-size: 0.72rem; }
.rank-add { display: flex; gap: 0.35rem; }
.rank-add input { flex: 1; }

.service-order-list { display: grid; gap: 0.3rem; }
.service-order-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.service-order-row label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 700; }
.service-order-row input { accent-color: var(--green); }
.tiny-buttons { display: flex; gap: 0.18rem; }
.tiny-buttons button { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); }

.rate-table { width: 100%; border-collapse: collapse; }
.rate-table th, .rate-table td { padding: 0.52rem; border-bottom: 1px solid #edf0e9; font-size: 0.7rem; text-align: left; }
.rate-table input { width: 100%; min-height: 34px; padding: 0.3rem 0.45rem; }
.rate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.rate-note { display: flex; gap: 0.5rem; padding: 0.7rem 0.8rem; border-radius: 11px; background: #fff6e6; color: #866224; font-size: 0.7rem; line-height: 1.7; }

.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.65rem; }
.asset-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.asset-preview { display: grid; height: 100px; place-items: center; overflow: hidden; background: var(--theme-soft); color: var(--muted); font-size: 0.65rem; }
.asset-preview img { width: 100%; height: 100%; object-fit: cover; }
.asset-info { display: grid; gap: 0.18rem; padding: 0.5rem; }
.asset-info strong { overflow: hidden; font-size: 0.65rem; text-overflow: ellipsis; white-space: nowrap; }
.asset-info span { color: var(--muted); font-size: 0.58rem; }
.asset-info .button { margin-top: 0.25rem; }
.upload-box { display: grid; gap: 0.45rem; padding: 0.9rem; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--panel-soft); }
.upload-box input[type="file"] { width: 100%; color: var(--muted); font-size: 0.7rem; }
.ui-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; align-items: start; }
.ui-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.ui-page-card { display: grid; gap: 0.7rem; padding: 0.9rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.ui-page-card h3 { margin: 0; font-size: 0.82rem; }
.image-picker { display: grid; gap: 0.35rem; }
.image-picker-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem; align-items: center; }
.image-picker-upload { position: relative; overflow: hidden; white-space: nowrap; cursor: pointer; }
.image-picker-hint { margin: 0; font-size: 0.6rem; line-height: 1.45; }
.image-preview-box { display: grid; min-height: 92px; place-items: center; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: 9px; background: #f2f5ef; color: var(--muted); font-size: 0.63rem; }
.image-preview-box img { width: 100%; height: 100%; max-height: 140px; object-fit: cover; }
.mock-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.mock-cover { display: grid; height: 118px; place-items: center; overflow: hidden; background: linear-gradient(135deg, #cfdfd5, #accab7); color: #214b3b; font-weight: 900; }
.mock-cover img { width: 100%; height: 100%; object-fit: cover; }
.mock-body { display: grid; gap: 0.35rem; padding: 0.75rem; }
.mock-body strong { font-size: 0.85rem; }
.mock-body p { margin: 0; color: var(--muted); font-size: 0.66rem; }
.ui-effect-soft { box-shadow: 0 10px 25px rgba(21,70,52,0.12); }
.ui-effect-bold { border: 2px solid var(--green); box-shadow: 0 5px 0 rgba(23,106,82,0.25); }
.ui-effect-outline { border: 2px dashed var(--green-bright); background: #fbfff9; }

.report-list { display: grid; gap: 0.7rem; }
.report-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.7rem; padding: 0.8rem 0.95rem; border-bottom: 1px solid #eef0e9; background: #fcfdfa; }
.report-head h3 { margin: 0; font-size: 0.82rem; }
.report-meta { margin-top: 0.2rem; color: var(--muted); font-size: 0.64rem; }
.report-body { display: grid; gap: 0.65rem; padding: 0.85rem 0.95rem; }
.report-content { padding: 0.65rem 0.75rem; border-radius: 10px; background: var(--panel-soft); font-size: 0.74rem; line-height: 1.75; white-space: pre-wrap; }
.evidence-link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.32rem 0.55rem; border: 1px solid #c8decf; border-radius: 8px; background: #eff9f3; color: var(--green); font-size: 0.68rem; text-decoration: none; }
.review-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; padding-top: 0.65rem; border-top: 1px solid #eef0e9; }
.review-form .wide { grid-column: 1 / -1; }
.check-row { display: flex; flex-wrap: wrap; gap: 0.9rem; padding: 0.15rem 0; }
.check-row label { display: flex; align-items: center; gap: 0.32rem; color: #47514b; font-size: 0.7rem; }
.check-row input { accent-color: var(--green); }
.review-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.log-detail { max-width: 400px; overflow-wrap: anywhere; color: var(--muted); font-size: 0.63rem; }
.order-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; }
.mini-stat { padding: 0.65rem 0.75rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.mini-stat span { display: block; color: var(--muted); font-size: 0.6rem; }
.mini-stat strong { font-size: 0.92rem; }

.admin-modal {
  width: min(880px, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: 0 40px 100px rgba(0,0,0,0.35);
}
.admin-modal::backdrop { background: rgba(8,16,13,0.62); backdrop-filter: blur(4px); }
.modal-shell { overflow: hidden; border-radius: 20px; background: var(--paper); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); background: #fff; }
.modal-head h2 { margin: 0.15rem 0 0; font-size: 1.15rem; }
.modal-body { max-height: calc(100vh - 150px); overflow: auto; padding: 1rem 1.15rem 1.2rem; }
.modal-form { display: grid; gap: 0.8rem; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.form-section { display: grid; gap: 0.7rem; padding: 0.9rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.form-section-title { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.form-section-title strong { font-size: 0.8rem; }
.form-section-title span { color: var(--muted); font-size: 0.64rem; }
.form-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.form-split.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.admin-toast {
  position: fixed;
  z-index: 100;
  right: 1.2rem;
  bottom: 1.2rem;
  max-width: min(380px, calc(100vw - 2rem));
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 11px;
  background: #10201a;
  color: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,0.24);
  font-size: 0.74rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.2s, transform 0.2s;
}
.admin-toast.is-visible { opacity: 1; transform: translateY(0); }
.admin-toast.is-error { border-color: rgba(255,120,95,0.35); background: #341b16; }

.field-label { display: block; margin-bottom: 0.28rem; color: var(--muted); font-size: 0.66rem; font-weight: 700; }
.panel-head-flush { padding: 0 0 0.9rem; border: 0; }
.panel-head-flush-sm { padding: 0 0 0.8rem; border: 0; }
.mt-08 { margin-top: 0.8rem; }
.mt-09 { margin-top: 0.9rem; }
.preview-stack { display: grid; gap: 1rem; }

@media (max-width: 1050px) {
  .rate-grid, .ui-config-grid { grid-template-columns: 1fr; }
  .ui-layout { grid-template-columns: 1fr; }
  .stat-grid, .order-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 840px) {
  .auth-layout { grid-template-columns: 1fr; width: min(560px, calc(100% - 1.6rem)); gap: 1.5rem; padding: 1.5rem 0; }
  .auth-features { display: none; }
  .auth-copy h1 { font-size: 2.5rem; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; padding: 0.65rem; }
  #admin-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar-note, .sidebar-footer { display: none; }
  .admin-topbar { min-height: 64px; padding: 0 0.8rem; }
  .topbar-brand span, .admin-identity { display: none; }
  .admin-main { padding: 1rem 0.8rem; }
  .admin-page-heading { align-items: flex-start; flex-direction: column; }
  .section-actions { justify-content: flex-start; }
  .review-form { grid-template-columns: 1fr; }
  .form-split, .form-split.two, .two-fields { grid-template-columns: 1fr; }
  .toolbar .button { margin-left: 0; }
}
@media (max-width: 560px) {
  #admin-nav { grid-template-columns: 1fr; }
  .stat-grid, .order-stats { grid-template-columns: 1fr; }
  .game-admin-grid { grid-template-columns: 1fr; }
  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-page-heading h1 { font-size: 1.45rem; }
}

/* v3.2 visual UI editor */
.visual-editor-panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.visual-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--line); background: #fbfcf7; }
.visual-page-select { display: flex; align-items: center; gap: 0.45rem; color: var(--muted); font-size: 0.68rem; font-weight: 800; }
.visual-page-select select { min-width: 180px; min-height: 37px; border: 1px solid var(--line); border-radius: 9px; padding: 0.4rem 0.55rem; background: #fff; color: var(--ink); }
.visual-edit-switch { display: flex; align-items: center; gap: 0.42rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.28rem 0.52rem 0.28rem 0.32rem; background: #fff; color: var(--ink); font-size: 0.68rem; }
.visual-edit-switch input { position: absolute; opacity: 0; pointer-events: none; }
.visual-switch-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #d9ded4; transition: background 150ms ease; }
.visual-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(20, 55, 42, 0.25); transition: transform 150ms ease; }
.visual-edit-switch input:checked + .visual-switch-track { background: var(--green); }
.visual-edit-switch input:checked + .visual-switch-track::after { transform: translateX(14px); }
.visual-dirty-state { border-radius: 999px; padding: 0.25rem 0.52rem; background: var(--panel-soft); color: var(--muted); font-size: 0.62rem; font-weight: 800; }
.visual-dirty-state.is-dirty { background: #fff6e6; color: #866224; }
.visual-quick-tools { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.visual-quick-tools .button { white-space: nowrap; }
.visual-editor-tip { margin-left: auto; color: var(--muted); font-size: 0.64rem; }
.visual-editor-page-note { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); background: #f4f8f1; }
.visual-editor-page-note > div:first-child { display: grid; gap: 0.13rem; }
.visual-editor-page-note strong { font-size: 0.85rem; }
.visual-editor-page-note p { margin: 0; color: var(--muted); font-size: 0.64rem; }
.visual-editor-counts { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.visual-editor-counts span { border: 1px solid var(--line); border-radius: 999px; padding: 0.24rem 0.52rem; background: #fff; color: var(--muted); font-size: 0.62rem; }
.visual-editor-counts b { color: var(--green-deep); }
.visual-editor-canvas { position: relative; min-height: clamp(560px, 72vh, 900px); background: #e8eef9; }
.visual-editor-canvas iframe { display: block; width: 100%; height: clamp(560px, 72vh, 900px); border: 0; background: var(--paper); }
.visual-preview-stage { position: relative; width: 100%; overflow: hidden; background: #e8eef9; }
.visual-preview-stage iframe { display: block; width: 1600px; height: 1100px; border: 0; background: #f8fbff; transform-origin: top left; }
.visual-editor-canvas.has-scaled-preview { min-height: 0; }
.visual-preview-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.5rem; background: rgba(240, 246, 255, 0.94); color: var(--muted); text-align: center; }
.visual-preview-loading strong { color: var(--ink); }
.visual-preview-loading p { margin: 0; font-size: 0.66rem; }
.visual-preview-loader { width: 32px; height: 32px; border: 3px solid rgba(37, 99, 235, 0.16); border-top-color: var(--theme-primary); border-radius: 50%; animation: visual-spin 700ms linear infinite; }
@keyframes visual-spin { to { transform: rotate(360deg); } }
.visual-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0.9rem; border-top: 1px solid var(--line); background: #fbfcf7; }
.visual-editor-footer > div:first-child { display: grid; gap: 0.12rem; }
.visual-editor-footer strong { font-size: 0.74rem; }
.visual-editor-footer span { color: var(--muted); font-size: 0.62rem; }
.visual-editor-footer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem; }
.visual-editor-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.visual-editor-info-grid h2 { margin: 0.2rem 0 0.5rem; font-size: 0.95rem; }
.visual-editor-info-grid p { margin: 0; color: var(--muted); font-size: 0.7rem; line-height: 1.75; }
.visual-editor-boundary { background: linear-gradient(135deg, #f8fbff, #eef4ff); }

.ui-slot-form { display: grid; gap: 0.8rem; }
.ui-slot-overview { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr); align-items: stretch; gap: 0.8rem; }
.ui-slot-preview-shell { display: grid; min-height: 190px; place-items: center; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: 13px; background: linear-gradient(45deg, #eef4ff 25%, transparent 25%, transparent 75%, #eef4ff 75%), linear-gradient(45deg, #eef4ff 25%, #fff 25%, #fff 75%, #eef4ff 75%); background-position: 0 0, 10px 10px; background-size: 20px 20px; color: var(--muted); font-size: 0.68rem; }
.ui-slot-preview-shell img { display: block; width: 100%; height: 100%; max-height: 260px; object-fit: contain; }
.ui-slot-meta { display: grid; align-content: start; gap: 0.35rem; border: 1px solid var(--line); border-radius: 13px; padding: 0.8rem; background: #f8faff; }
.ui-slot-meta h3 { margin: 0; font-size: 0.92rem; }
.ui-slot-meta p { margin: 0; color: var(--muted); font-size: 0.68rem; line-height: 1.65; }
.ui-slot-spec { display: grid; gap: 0.12rem; color: var(--muted); font-size: 0.62rem; }
.ui-slot-meta code { justify-self: start; border-radius: 6px; padding: 0.2rem 0.38rem; background: var(--green-soft); color: var(--green-deep); font-size: 0.6rem; }
.ui-slot-upload-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.55rem; border: 1px dashed var(--line-strong); border-radius: 12px; padding: 0.75rem; background: var(--panel-soft); }
.ui-slot-library-section { display: grid; gap: 0.45rem; }
.ui-slot-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; max-height: 260px; overflow: auto; padding: 0.1rem; }
.ui-slot-asset { display: grid; gap: 0.22rem; overflow: hidden; border: 2px solid transparent; border-radius: 10px; padding: 0.25rem; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 0 0 1px var(--line); }
.ui-slot-asset:hover { border-color: rgba(37, 99, 235, 0.35); }
.ui-slot-asset.is-selected { border-color: var(--theme-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.ui-slot-asset-preview { display: grid; height: 76px; place-items: center; overflow: hidden; border-radius: 7px; background: var(--theme-soft); }
.ui-slot-asset-preview img { width: 100%; height: 100%; object-fit: contain; }
.ui-slot-asset > span:not(.ui-slot-asset-preview) { overflow: hidden; font-size: 0.58rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ui-slot-asset small { color: var(--muted); font-size: 0.52rem; }
.ui-slot-library-empty { grid-column: 1 / -1; border-radius: 10px; padding: 1rem; background: var(--panel-soft); color: var(--muted); font-size: 0.68rem; text-align: center; }
.ui-slot-actions { align-items: center; justify-content: flex-start; }
.ui-slot-actions .grow { flex: 1; }

@media (max-width: 900px) {
  .visual-editor-toolbar { align-items: stretch; flex-direction: column; }
  .visual-editor-tip { margin-left: 0; }
  .visual-editor-page-note, .visual-editor-footer { align-items: stretch; flex-direction: column; }
  .visual-editor-footer-actions { justify-content: flex-start; }
  .visual-editor-info-grid, .ui-slot-overview { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .visual-page-select { align-items: stretch; flex-direction: column; }
  .visual-page-select select { width: 100%; }
  .visual-editor-canvas, .visual-editor-canvas iframe { height: 620px; min-height: 620px; }
  .visual-editor-footer-actions .button { width: 100%; }
  .ui-slot-upload-row { grid-template-columns: 1fr; }
  .ui-slot-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v5.0 blue theme and uploaded asset library */
.admin-topbar { background: rgba(11, 28, 56, 0.97); }
.admin-sidebar { background: linear-gradient(180deg, #0d2751, #0a1b35); }
.nav-item:hover { background: rgba(96, 165, 250, 0.12); }
.nav-item.is-active { border-color: rgba(96, 165, 250, 0.34); background: rgba(96, 165, 250, 0.18); }
.nav-item.is-active .nav-index { background: var(--theme-accent); color: #071a38; }
.nav-index { color: var(--theme-accent); }
.level-badge { border-color: rgba(96, 165, 250, 0.34); background: rgba(96, 165, 250, 0.13); color: #bfdbfe; }
.sidebar-note { border-color: rgba(96, 165, 250, 0.2); background: rgba(96, 165, 250, 0.08); }
.sidebar-note strong { color: #bfdbfe; }
.sidebar-note-mark { background: var(--theme-accent); color: #071a38; }
.admin-main .button-primary, .button-primary { border-color: var(--theme-primary); background: linear-gradient(135deg, var(--theme-primary), var(--theme-deep)); color: #fff; }
.admin-main .button-primary:hover, .button-primary:hover { background: linear-gradient(135deg, var(--theme-accent), var(--theme-primary)); }
.admin-main .button-secondary:hover, .admin-main .button-quiet:hover { border-color: var(--theme-primary); background: var(--theme-soft); color: var(--theme-deep); }
.eyebrow, .green-text { color: var(--theme-primary) !important; }
.panel { box-shadow: 0 8px 26px rgba(20, 48, 94, 0.05); }
.field input, .field select, .field textarea, .toolbar input, .toolbar select, .inline-input { border-color: var(--line); }
.field input:focus, .field select:focus, .field textarea:focus, .toolbar input:focus, .toolbar select:focus { border-color: var(--theme-primary); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18); outline: none; }
.badge.green { background: var(--theme-soft); color: var(--theme-primary); }
.badge.blue { background: #e0ecff; color: #1d4ed8; }
.chip { background: var(--theme-soft); color: var(--theme-deep); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.data-table th { background: #eef4ff; color: #34527a; }
.data-table tr:hover td { background: #f7faff; }

.asset-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.7rem; margin-top: 0.8rem; }
.asset-library-card { display: grid; gap: 0.5rem; border: 1px solid var(--line); border-radius: 14px; padding: 0.6rem; background: var(--panel); }
.asset-library-preview { display: grid; aspect-ratio: 16 / 10; place-items: center; overflow: hidden; border-radius: 10px; background: var(--theme-soft); color: var(--theme-primary); }
.asset-library-preview img { width: 100%; height: 100%; object-fit: cover; }
.asset-library-card > div:nth-child(2) { display: grid; gap: 0.12rem; min-width: 0; }
.asset-library-card strong { overflow: hidden; font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; }
.asset-library-card span { color: var(--muted); font-size: 0.58rem; }
.asset-preview-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0.8rem 0; }
.asset-preview-row a { display: grid; aspect-ratio: 16 / 10; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); }
.asset-preview-row img { width: 100%; height: 100%; object-fit: contain; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.45rem; margin-top: 0.6rem; }
.check-card { display: flex; align-items: center; gap: 0.45rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.65rem; background: var(--panel-soft); font-size: 0.68rem; }
.check-card:has(input:checked) { border-color: rgba(37, 99, 235, 0.32); background: var(--theme-soft); color: var(--theme-deep); }

/* v5.0 blue cleanup for legacy success accents */
.green-text, .admin-main .green-text { color: var(--theme-primary) !important; }
.badge.green { background: var(--theme-soft); color: var(--theme-primary); }
.chip.is-active { border-color: rgba(37, 99, 235, 0.32); background: var(--theme-soft); color: var(--theme-deep); }

@media (max-width: 640px) {
  .asset-preview-row { grid-template-columns: 1fr; }
}

/* v6 game tree, tags, banners, levels and theme presets */
.game-mode-editor { display: grid; gap: 0.75rem; }
.game-mode-editor-card { border: 1px solid #dbe7f7; border-radius: 16px; padding: 0.8rem; background: linear-gradient(145deg, #f8fbff, #fff); }
.game-mode-editor-head, .game-selector-head, .level-editor-head { display: flex; flex-wrap: wrap; align-items: end; gap: 0.55rem; }
.game-mode-editor-head .field { flex: 1 1 180px; margin: 0; }
.game-selector-list { display: grid; gap: 0.55rem; margin: 0.75rem 0; }
.game-selector-editor { border: 1px dashed #bfdbfe; border-radius: 14px; padding: 0.7rem; background: #fff; }
.game-selector-head .field { flex: 1 1 150px; margin: 0; }
.game-selector-editor textarea { min-height: 110px; font-family: "Cascadia Mono", Consolas, monospace; font-size: 0.7rem; }
.banner-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.8rem; }
.banner-admin-card { overflow: hidden; border: 1px solid #dbe7f7; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.06); }
.banner-admin-card.is-disabled { opacity: 0.68; }
.banner-admin-preview { position: relative; display: grid; min-height: 125px; place-items: center; background: linear-gradient(125deg, #0b2550, #1d4ed8); color: #fff; font-size: 2.4rem; font-weight: 900; }
.banner-admin-preview img { width: 100%; height: 150px; object-fit: cover; }
.banner-admin-preview .badge { position: absolute; top: 0.55rem; right: 0.55rem; }
.banner-admin-copy { display: grid; gap: 0.3rem; padding: 0.8rem; }
.banner-admin-copy p { margin: 0; color: #5f7188; font-size: 0.68rem; }
.banner-admin-copy small { color: #8695a9; font-size: 0.58rem; }
.level-track-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 0.9rem; align-items: start; }
.level-editor-list { display: grid; gap: 0.65rem; margin-top: 0.7rem; }
.level-editor-card { border: 1px solid #dbe7f7; border-radius: 16px; padding: 0.75rem; background: linear-gradient(145deg, #f8fbff, #fff); }
.level-editor-head .field { flex: 1 1 130px; margin: 0; }
.level-condition-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.45rem; margin: 0.6rem 0; }
.level-condition-grid .field { margin: 0; }
.theme-preset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 0.7rem; }
.theme-preset-card { display: flex; flex-direction: column; justify-content: space-between; gap: 0.8rem; border: 1px solid #dbe7f7; border-radius: 18px; padding: 0.9rem; background: linear-gradient(145deg, #fff, #f5f9ff); }
.theme-preset-card.is-published { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14); }
.theme-preset-card h3 { margin: 0.18rem 0; }
.theme-preset-card p { margin: 0; color: #5f7188; font-size: 0.66rem; }
.table-note { display: block; max-width: 300px; color: #5f7188; font-size: 0.66rem; white-space: normal; }
.mb-08 { margin-bottom: 0.8rem; }

.ui-style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.55rem; }
.ui-style-preview { display: grid; min-height: 120px; place-content: center; justify-items: center; gap: 0.35rem; border-radius: 16px; background: linear-gradient(145deg, #0f2f6b, #2563eb); color: #fff; }
.ui-style-preview-mark { font-size: 2rem; font-weight: 900; letter-spacing: -0.08em; }
.ui-style-preview strong { color: #fff; font-size: 0.8rem; }
.ui-style-form textarea, .ui-text-form textarea { min-height: 70px; }

/* ===== v8.0 视觉工作台、二级导航与全量可视化编辑器 ===== */
:root {
  --admin-navy: #071a3d;
  --admin-navy-2: #0d2b62;
  --admin-cyan: #38bdf8;
  --admin-surface: rgba(255, 255, 255, 0.9);
  --admin-line: rgba(151, 176, 210, 0.3);
  --admin-shadow: 0 22px 65px rgba(19, 52, 105, 0.12);
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(56, 189, 248, 0.09), transparent 30rem),
    radial-gradient(circle at 96% 10%, rgba(37, 99, 235, 0.08), transparent 34rem),
    #f3f7fd;
}

.admin-shell {
  background:
    radial-gradient(circle at 92% 2%, rgba(56, 189, 248, 0.1), transparent 30rem),
    linear-gradient(145deg, #f7faff, #eef5ff 58%, #f7faff);
}
.admin-topbar {
  min-height: 76px;
  border-bottom: 1px solid rgba(147, 197, 253, 0.14);
  padding: 0 1.4rem;
  background: linear-gradient(110deg, rgba(5, 19, 44, 0.98), rgba(10, 40, 84, 0.96));
  box-shadow: 0 14px 42px rgba(4, 23, 52, 0.24);
}
.topbar-brand .brand-mark.small {
  background: linear-gradient(145deg, #7dd3fc, #3b82f6 58%, #1d4ed8);
  color: #fff;
  box-shadow: 0 9px 22px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}
.topbar-brand strong { letter-spacing: 0.06em; }
.topbar-brand span { color: rgba(191, 219, 254, 0.54); letter-spacing: 0.2em; }
.topbar-actions { gap: 0.5rem; }
.admin-identity {
  min-height: 42px;
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-radius: 13px;
  padding: 0.2rem 0.55rem;
  background: rgba(255,255,255,0.05);
}
.admin-identity strong { color: #eff6ff; }
.admin-topbar .level-badge {
  border-color: rgba(125, 211, 252, 0.32);
  background: rgba(56, 189, 248, 0.12);
  color: #bae6fd;
}
.admin-topbar .button-quiet:hover {
  border-color: rgba(125, 211, 252, 0.36);
  background: rgba(56, 189, 248, 0.13);
  color: #fff;
}
.admin-topbar .danger-text:hover { background: rgba(239, 68, 68, 0.16); }

.admin-layout { grid-template-columns: 278px minmax(0, 1fr); min-height: calc(100vh - 76px); }
.admin-sidebar {
  top: 76px;
  height: calc(100vh - 76px);
  padding: 0.8rem 0.7rem 0.75rem;
  background:
    radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.13), transparent 16rem),
    linear-gradient(180deg, #0a2148 0%, #081a35 60%, #07152b 100%);
  box-shadow: inset -1px 0 0 rgba(147, 197, 253, 0.1);
}
#admin-nav { gap: 0.2rem; padding-right: 0.2rem; scrollbar-width: thin; }
.admin-nav-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  padding: 0.2rem 0.55rem 0.7rem;
  color: rgba(191, 219, 254, 0.5);
  font-size: 0.61rem;
  letter-spacing: 0.04em;
}
.admin-nav-hint b {
  display: grid;
  min-width: 24px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.08);
  color: #bae6fd;
  font-size: 0.58rem;
}
.admin-nav-group {
  border: 1px solid transparent;
  border-radius: 14px;
  transition: background 160ms ease, border-color 160ms ease;
}
.admin-nav-group.is-active {
  border-color: rgba(96, 165, 250, 0.16);
  background: rgba(59, 130, 246, 0.07);
}
.admin-nav-group-head {
  display: grid;
  width: 100%;
  grid-template-columns: 25px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  border-radius: 12px;
  padding: 0.58rem 0.52rem;
  background: transparent;
  color: rgba(219, 234, 254, 0.64);
  text-align: left;
  transition: background 150ms ease, color 150ms ease;
}
.admin-nav-group-head:hover { background: rgba(255,255,255,0.05); color: #fff; }
.admin-nav-group.is-active .admin-nav-group-head { color: #eff6ff; }
.admin-nav-group-icon {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 8px;
  background: rgba(96, 165, 250, 0.1);
  color: #7dd3fc;
  font-size: 0.74rem;
}
.admin-nav-group.is-active .admin-nav-group-icon {
  background: linear-gradient(145deg, #38bdf8, #2563eb);
  color: #fff;
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.32);
}
.admin-nav-group-label { overflow: hidden; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.025em; text-overflow: ellipsis; white-space: nowrap; }
.admin-nav-group-count {
  min-width: 20px;
  padding: 0.03rem 0.3rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: rgba(191,219,254,0.6);
  font-size: 0.55rem;
  font-weight: 800;
  text-align: center;
}
.admin-nav-group-chevron { color: rgba(191,219,254,0.45); font-size: 0.65rem; transition: transform 160ms ease; }
.admin-nav-group.is-collapsed .admin-nav-group-chevron { transform: rotate(-90deg); }
.admin-nav-subitems {
  display: grid;
  gap: 0.16rem;
  max-height: 1600px;
  overflow: hidden;
  padding: 0.08rem 0 0.34rem 0.3rem;
  transition: max-height 220ms ease, opacity 160ms ease;
}
.admin-nav-group.is-collapsed .admin-nav-subitems { max-height: 0; opacity: 0; }
.nav-item {
  min-height: 39px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 0.45rem;
  border-radius: 10px;
  padding: 0.46rem 0.52rem;
  color: rgba(219, 234, 254, 0.58);
}
.nav-item:hover { background: rgba(96, 165, 250, 0.1); color: #eff6ff; }
.nav-item.is-active {
  border-color: rgba(96, 165, 250, 0.3);
  background: linear-gradient(100deg, rgba(37, 99, 235, 0.3), rgba(56, 189, 248, 0.1));
  color: #fff;
  box-shadow: inset 3px 0 0 #60a5fa;
}
.nav-index {
  width: 30px;
  height: 25px;
  border-radius: 7px;
  background: rgba(255,255,255,0.045);
  color: rgba(191,219,254,0.56);
  font-size: 0.55rem;
  letter-spacing: -0.02em;
}
.nav-item.is-active .nav-index {
  background: linear-gradient(145deg, #7dd3fc, #3b82f6);
  color: #fff;
}
.nav-label { font-size: 0.7rem; font-weight: 650; }
.sidebar-note {
  margin-top: 0.7rem;
  border-color: rgba(125, 211, 252, 0.16);
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.1), rgba(37, 99, 235, 0.06));
}
.sidebar-note-mark { background: linear-gradient(145deg, #7dd3fc, #3b82f6); color: #fff; }
.sidebar-note strong { color: #bae6fd; }
.sidebar-note p { color: rgba(191, 219, 254, 0.48); }
.sidebar-footer { color: rgba(191, 219, 254, 0.3); }

.admin-main { padding: clamp(1.15rem, 2.5vw, 2.2rem); }
.admin-page-heading { margin-bottom: 1.35rem; }
.admin-page-heading h1 { color: #0b2348; font-weight: 900; letter-spacing: -0.045em; }
.admin-page-heading p { color: #657a99; line-height: 1.7; }
.section-actions { align-items: center; }
.eyebrow { color: #2563eb; letter-spacing: 0.17em; }
.panel { border-color: rgba(158, 185, 220, 0.3); background: rgba(255,255,255,0.92); box-shadow: 0 18px 48px rgba(21, 60, 120, 0.07); }
.panel-pad { backdrop-filter: blur(12px); }
.table-wrap { border-color: rgba(158, 185, 220, 0.3); box-shadow: 0 14px 36px rgba(21, 60, 120, 0.05); }
.data-table th { background: #f1f6ff; }
.admin-main .button-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #2563eb, #0d2b62);
  box-shadow: 0 9px 22px rgba(37, 99, 235, 0.22);
}
.admin-main .button-primary:hover { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.admin-main .button-secondary, .admin-main .button-quiet { background: rgba(255,255,255,0.94); }
.admin-main .button-secondary:hover, .admin-main .button-quiet:hover { border-color: rgba(37, 99, 235, 0.38); background: #eef5ff; }

/* 视觉中心 */
.visual-center-shell { display: grid; gap: 0.6rem; }
.visual-center-head {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  min-height: 0;
  border: 1px solid rgba(147, 197, 253, 0.2);
  border-radius: 16px;
  padding: 0.72rem 1rem;
  background:
    radial-gradient(circle at 80% 18%, rgba(56, 189, 248, 0.34), transparent 18rem),
    radial-gradient(circle at 8% 100%, rgba(37, 99, 235, 0.32), transparent 24rem),
    linear-gradient(120deg, #0b2e66, #17499c);
  color: #fff;
  box-shadow: 0 12px 30px rgba(5, 30, 70, 0.18);
}
.visual-center-head::before {
  content: none;
}
.visual-center-head::after {
  content: none;
}
.visual-center-head > * { position: relative; z-index: 1; }
.visual-center-head .eyebrow, .visual-center-head p, .visual-center-badge { display: none; }
.visual-center-head h2 { margin: 0; color: #fff; font-size: 1.02rem; font-weight: 900; letter-spacing: -0.02em; }
.visual-center-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.visual-center-tab {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgba(151, 176, 210, 0.32);
  border-radius: 999px;
  padding: 0.38rem 0.72rem;
  background: rgba(255,255,255,0.86);
  color: #335477;
  text-align: left;
  box-shadow: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.visual-center-tab:hover { transform: translateY(-1px); border-color: rgba(37, 99, 235, 0.34); background: #fff; box-shadow: 0 6px 14px rgba(37, 99, 235, 0.08); }
.visual-center-tab.is-active { border-color: transparent; background: linear-gradient(145deg, #2563eb, #0d2b62); color: #fff; box-shadow: 0 14px 34px rgba(37, 99, 235, 0.24); }
.visual-center-tab-icon {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: #e8f1ff;
  color: #2563eb;
  font-size: 0.68rem;
  font-weight: 900;
}
.visual-center-tab.is-active .visual-center-tab-icon { background: rgba(255,255,255,0.14); color: #fff; }
.visual-center-tab > span:last-child { display: grid; min-width: 0; gap: 0.1rem; }
.visual-center-tab strong { font-size: 0.68rem; white-space: nowrap; }
.visual-center-tab small { display: none; }
.visual-center-tab.is-active small { color: rgba(219,234,254,0.66); }
.visual-center-actions { position: sticky; top: 0.4rem; z-index: 24; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; min-height: 0; border-radius: 14px; padding: 0.3rem 0.4rem; background: rgba(246, 250, 255, 0.94); backdrop-filter: blur(10px); }
.visual-center-actions:empty { display: none; }
.visual-center-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34,197,94,0.11);
}
.visual-center-live-text { color: #607697; font-size: 0.64rem; font-weight: 800; }
.visual-center-content { display: grid; gap: 1rem; min-width: 0; }
.visual-center-content > .panel, .visual-center-content .visual-editor-panel { margin: 0; }
.visual-center-content .admin-page-heading { display: none; }

/* 页面内可视化编辑器 */
.visual-editor-panel { border-color: rgba(151,176,210,0.32); border-radius: 22px; box-shadow: 0 18px 52px rgba(20, 55, 115, 0.08); }
.visual-editor-toolbar { padding: 0.72rem 0.9rem; background: linear-gradient(90deg, #f8fbff, #f0f6ff); }
.visual-editor-toolbar .visual-page-select:has(#ui-style-target-picker) { display: none; }
.visual-page-select select { min-width: 200px; border-color: rgba(151,176,210,0.4); border-radius: 11px; }
.visual-edit-switch { border-color: rgba(147, 197, 253, 0.42); background: #fff; }
.visual-switch-track { background: #c9d8ea; }
.visual-edit-switch input:checked + .visual-switch-track { background: linear-gradient(90deg, #38bdf8, #2563eb); }
.visual-dirty-state { border-radius: 999px; padding: 0.26rem 0.55rem; background: #edf4ff; color: #41658d; font-size: 0.61rem; font-weight: 800; }
.visual-dirty-state.is-dirty { background: #fff7e6; color: #9a6413; }
.visual-editor-tip { color: #7186a1; }
.visual-editor-page-note { background: linear-gradient(110deg, #0d2b62, #17499c); }
.visual-editor-counts span { border: 1px solid rgba(191, 219, 254, 0.16); background: rgba(255,255,255,0.06); }
.visual-editor-counts b { color: #7dd3fc; }
.visual-editor-canvas { margin: 0.7rem; border: 1px solid rgba(151,176,210,0.36); border-radius: 16px; background: #dce9fb; box-shadow: inset 0 0 0 5px rgba(255,255,255,0.5); height: auto; min-height: 0; overflow: hidden; }
.visual-editor-canvas .visual-preview-stage { border-radius: 12px; overflow: hidden; }
.visual-editor-canvas iframe { border: 0; border-radius: 12px; background: #f8fbff; }
.visual-editor-footer { padding: 0.8rem 0.95rem; background: #f8fbff; }
.visual-editor-footer > div:first-child { display: none; }
.visual-editor-footer { justify-content: flex-end; }
.visual-editor-info-grid { gap: 0.8rem; }

/* 样式设计器 */
.admin-modal { width: min(1080px, calc(100% - 2rem)); }
.modal-shell { border-radius: 24px; }
.modal-head { padding: 1rem 1.2rem; background: linear-gradient(100deg, #fbfdff, #f2f7ff); }
.modal-body { background: #f5f9ff; }
.ui-style-form { display: grid; gap: 0.85rem; }
.ui-style-designer-head {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: stretch;
  gap: 0.8rem;
}
.ui-style-preview {
  min-height: 158px;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 16px;
  background: linear-gradient(145deg, #0f2f6b, #2563eb);
  color: #fff;
  box-shadow: 0 16px 34px rgba(21, 60, 120, 0.14), inset 0 1px 0 rgba(255,255,255,0.4);
  text-align: center;
}
.ui-style-preview-mark { text-shadow: 0 5px 18px rgba(0,0,0,0.15); }
.ui-style-preview small { color: currentColor; font-size: 0.58rem; opacity: 0.58; }
.ui-style-designer-head .ui-slot-meta { border-color: rgba(151,176,210,0.34); background: linear-gradient(145deg, #fff, #f5f9ff); }
.ui-style-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; align-items: start; }
.ui-style-tool-card.is-wide { grid-column: 1 / -1; }
.ui-style-tool-card {
  display: grid;
  gap: 0.62rem;
  border: 1px solid rgba(151, 176, 210, 0.32);
  border-radius: 16px;
  padding: 0.8rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(21, 60, 120, 0.045);
}
.ui-style-color-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: end; gap: 0.5rem; }
.ui-style-color-toolbar .field { margin: 0; }
.ui-style-color-toolbar input[type="color"] { height: 42px; border-radius: 10px; padding: 3px; }
.ui-background-mode-row { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr); align-items: end; gap: 0.65rem; }
.ui-background-mode-row .field { margin: 0; }
.ui-background-mode-note { border: 1px solid #dbe7f7; border-radius: 11px; padding: 0.6rem 0.7rem; background: #f6faff; color: #526d91; font-size: 0.62rem; line-height: 1.6; }
.ui-background-mode-hint { margin: 0 !important; }
.ui-color-palette { display: grid; grid-template-columns: repeat(10, minmax(20px, 1fr)); gap: 0.35rem; }
.ui-color-palette button {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 0;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(120, 146, 181, 0.3), 0 4px 9px rgba(20,55,115,0.08);
  transition: transform 130ms ease, box-shadow 130ms ease;
}
.ui-color-palette button:hover { transform: scale(1.12); box-shadow: 0 0 0 2px #2563eb, 0 5px 12px rgba(37,99,235,0.18); }
.ui-style-compact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.ui-style-compact-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-style-compact-grid .field { margin: 0; }
.ui-style-compact-grid input[type="color"] { width: 100%; height: 38px; border-radius: 9px; padding: 3px; }
.ui-style-quick-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ui-style-quick-actions button {
  min-height: 30px;
  border: 1px solid rgba(147, 197, 253, 0.32);
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  background: #eff6ff;
  color: #28558e;
  font-size: 0.59rem;
  font-weight: 800;
}
.ui-style-quick-actions button:hover { border-color: #60a5fa; background: #dbeafe; color: #1d4ed8; }
.ui-gradient-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.ui-gradient-colors label { display: grid; gap: 0.2rem; color: #637997; font-size: 0.58rem; font-weight: 800; }
.ui-gradient-colors input[type="color"] { width: 100%; height: 34px; border: 1px solid #d4e1f2; border-radius: 8px; padding: 3px; background: #fff; }
.ui-gradient-preview {
  min-height: 60px;
  border: 1px solid rgba(151,176,210,0.26);
  border-radius: 12px;
  background: linear-gradient(135deg, #0d2b62, #2563eb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
}
.ui-style-inline-upload { display: flex; align-items: center; gap: 0.4rem; }
.ui-style-inline-upload input[type="file"] { min-width: 0; flex: 1; color: #667c99; font-size: 0.58rem; }
.ui-style-range {
  display: grid;
  gap: 0.25rem;
  border: 1px solid #e1eafa;
  border-radius: 11px;
  padding: 0.55rem 0.65rem;
  background: #f8fbff;
}
.ui-style-range > span { display: flex; justify-content: space-between; color: #58708f; font-size: 0.62rem; font-weight: 800; }
.ui-style-range b { color: #2563eb; }
.ui-style-range input { width: 100%; accent-color: #2563eb; }
.ui-style-advanced { border: 1px solid rgba(151,176,210,0.32); border-radius: 14px; background: #fff; }
.ui-style-advanced summary { cursor: pointer; padding: 0.7rem 0.8rem; color: #294e7c; font-size: 0.67rem; font-weight: 800; }
.ui-style-advanced summary span { margin-left: 0.35rem; color: #7a8ea8; font-weight: 500; }
.ui-style-advanced .ui-style-grid { padding: 0 0.8rem 0.8rem; }
.ui-style-property-field code { border-radius: 5px; padding: 0 0.25rem; background: #edf4ff; color: #315c93; font-size: 0.55rem; }
.ui-style-form .hint { margin: 0; padding: 0.55rem 0.7rem; border-radius: 10px; background: #eef6ff; }

/* 页面显隐 */
.ui-visibility-form, .ui-palette-form { display: grid; gap: 0.8rem; }
.ui-visibility-intro {
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  background:
    radial-gradient(circle at 92% 10%, rgba(56,189,248,0.16), transparent 13rem),
    linear-gradient(135deg, #f8fbff, #edf5ff);
}
.ui-visibility-intro h3 { margin: 0.35rem 0 0.25rem; font-size: 1.02rem; color: #0e2f5e; }
.ui-visibility-intro p { margin: 0; color: #617894; font-size: 0.68rem; line-height: 1.7; }
.ui-visibility-groups { display: grid; gap: 0.7rem; }
.ui-visibility-group { border: 1px solid rgba(151,176,210,0.3); border-radius: 15px; padding: 0.75rem; background: #fff; }
.ui-visibility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; margin-top: 0.55rem; }
.ui-visibility-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #e1eafa;
  border-radius: 11px;
  padding: 0.55rem 0.6rem;
  background: #f9fbff;
  cursor: pointer;
}
.ui-visibility-toggle:has(input:checked) { border-color: rgba(37,99,235,0.22); background: #f3f8ff; }
.ui-visibility-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ui-visibility-switch { position: relative; width: 34px; height: 20px; flex: 0 0 auto; border-radius: 999px; background: #ccd9e9; transition: background 150ms ease; }
.ui-visibility-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(23,55,100,0.24); transition: transform 150ms ease; }
.ui-visibility-toggle input:checked + .ui-visibility-switch { background: linear-gradient(90deg, #38bdf8, #2563eb); }
.ui-visibility-toggle input:checked + .ui-visibility-switch::after { transform: translateX(14px); }
.ui-visibility-toggle > span:last-child { display: grid; min-width: 0; gap: 0.04rem; }
.ui-visibility-toggle strong { color: #27496f; font-size: 0.66rem; }
.ui-visibility-toggle small { overflow: hidden; color: #8a9bb0; font-family: "Cascadia Mono", Consolas, monospace; font-size: 0.52rem; text-overflow: ellipsis; white-space: nowrap; }

/* 全局配色 */
.ui-palette-preview {
  position: relative;
  display: grid;
  min-height: 150px;
  align-content: end;
  overflow: hidden;
  border-radius: 18px;
  padding: 1rem;
  background:
    radial-gradient(circle at 82% 16%, rgba(56,189,248,0.28), transparent 12rem),
    linear-gradient(135deg, #071a3d, #2563eb);
  color: #fff;
  box-shadow: 0 18px 42px rgba(12,49,110,0.18);
}
.ui-palette-preview-nav { position: absolute; top: 0.8rem; left: 0.8rem; right: 0.8rem; display: flex; gap: 0.35rem; }
.ui-palette-preview-nav span { width: 42px; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.24); }
.ui-palette-preview-nav span:first-child { width: 66px; background: #fff; }
.ui-palette-preview small { color: #7dd3fc; font-size: 0.55rem; font-weight: 900; letter-spacing: 0.18em; }
.ui-palette-preview strong { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.04em; }
.ui-palette-preview p { max-width: 34rem; margin: 0.1rem 0 0; color: rgba(219,234,254,0.68); font-size: 0.64rem; }
.ui-palette-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.ui-palette-grid .field { margin: 0; }
.ui-palette-grid input[type="color"] { width: 100%; height: 44px; border-radius: 10px; padding: 3px; }
.ui-palette-sliders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.ui-palette-sliders label { display: grid; gap: 0.25rem; border: 1px solid #e1eafa; border-radius: 11px; padding: 0.55rem 0.65rem; background: #f8fbff; color: #58708f; font-size: 0.6rem; font-weight: 800; }
.ui-palette-sliders label span { display: flex; justify-content: space-between; }
.ui-palette-sliders b { color: #2563eb; }
.ui-palette-sliders input { width: 100%; accent-color: #2563eb; }

/* 嵌入视觉中心后的内容收口 */
.visual-center-content .banner-admin-grid,
.visual-center-content .theme-preset-grid,
.visual-center-content .asset-library-grid { margin-top: 0.2rem; }
.visual-center-content .toolbar { margin: 0; background: linear-gradient(90deg, #fff, #f6faff); }

@media (max-width: 1220px) {
  .visual-center-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-layout { grid-template-columns: 258px minmax(0, 1fr); }
  .visual-center-tab small { display: none; }
}
@media (max-width: 1050px) {
  .ui-style-tool-grid { grid-template-columns: 1fr; }
  .ui-style-tool-card.is-wide { grid-column: auto; }
  .ui-style-compact-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 840px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; max-height: none; }
  #admin-nav { grid-template-columns: 1fr; max-height: 55vh; }
  .admin-nav-subitems { max-height: 1400px; }
  .admin-nav-group.is-collapsed .admin-nav-subitems { max-height: 0; }
  .visual-center-head { align-items: flex-start; flex-direction: column; min-height: 0; }
  .visual-center-badge { display: none; }
  .visual-center-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-page-heading { align-items: flex-start; flex-direction: column; }
  .visual-center-actions { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .visual-center-tabs { grid-template-columns: 1fr; }
  .visual-center-head h2 { font-size: 2rem; }
  .ui-style-designer-head { grid-template-columns: 1fr; }
  .ui-style-compact-grid, .ui-style-compact-grid.three, .ui-palette-grid, .ui-palette-sliders, .ui-visibility-grid { grid-template-columns: 1fr; }
  .ui-background-mode-row { grid-template-columns: 1fr; }
  .ui-color-palette { grid-template-columns: repeat(5, minmax(28px, 1fr)); }
  .visual-editor-canvas { margin: 0.45rem; }
  .visual-editor-canvas, .visual-editor-canvas iframe { height: 580px; min-height: 580px; }
}

/* v8 game tree workspace */
.tree-toolbar-note {
  display: flex;
  position: relative;
  overflow: hidden;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid rgba(147, 197, 253, 0.24);
  border-radius: 22px;
  padding: 1.15rem 1.25rem;
  background:
    radial-gradient(circle at 88% 0%, rgba(56, 189, 248, 0.2), transparent 16rem),
    linear-gradient(120deg, #071d45, #0d3575 62%, #1859ae);
  color: #fff;
  box-shadow: 0 20px 50px rgba(7, 35, 82, 0.18);
}
.tree-toolbar-note::after {
  content: "TREE";
  position: absolute;
  right: 1rem;
  bottom: -0.5rem;
  color: rgba(255,255,255,0.045);
  font-size: 5.5rem;
  font-weight: 900;
  letter-spacing: -0.07em;
  pointer-events: none;
}
.tree-toolbar-note > * { position: relative; z-index: 1; }
.tree-toolbar-note .eyebrow { color: #7dd3fc; }
.tree-toolbar-note h2 { margin: 0.25rem 0 0.35rem; color: #fff; font-size: clamp(1.35rem, 2.6vw, 2rem); letter-spacing: -0.045em; }
.tree-toolbar-note p { max-width: 46rem; margin: 0; color: rgba(219,234,254,0.65); font-size: 0.69rem; line-height: 1.75; }
.tree-toolbar-metrics { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem; }
.tree-toolbar-metrics span { display: inline-flex; align-items: baseline; gap: 0.28rem; border: 1px solid rgba(191,219,254,0.18); border-radius: 999px; padding: 0.34rem 0.62rem; background: rgba(255,255,255,0.075); color: rgba(219,234,254,0.72); font-size: 0.58rem; white-space: nowrap; }
.tree-toolbar-metrics b { color: #fff; font-size: 0.82rem; }
.drag-handle { position: absolute; z-index: 3; top: 0.48rem; left: 0.48rem; display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; background: rgba(7, 28, 65, 0.42); color: #fff; font-size: 0.64rem; line-height: 1; cursor: grab; backdrop-filter: blur(8px); }
.drag-handle:active { cursor: grabbing; }
.game-admin-card[draggable="true"] { transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease; }
.game-admin-card.is-dragging, .mode-summary-card.is-dragging { opacity: 0.46; transform: scale(0.985); }
.game-admin-card.is-drop-target, .mode-summary-card.is-drop-target { box-shadow: 0 0 0 3px rgba(37,99,235,0.24), 0 18px 42px rgba(21,60,120,0.12); }
.mode-summary-card { position: relative; display: grid; gap: 0.55rem; padding: 0.72rem; }
.mode-summary-card .game-mode-editor-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; }
.mode-summary-copy { display: grid; min-width: 0; gap: 0.18rem; }
.mode-summary-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.36rem; }
.mode-summary-title strong { color: #102f5b; font-size: 0.78rem; }
.mode-summary-copy > span { overflow: hidden; color: #7a8da5; font-size: 0.57rem; text-overflow: ellipsis; white-space: nowrap; }
.mode-summary-tags { display: flex; grid-column: 3 / 4; flex-wrap: wrap; gap: 0.28rem; }
.mode-summary-tags span { border: 1px solid #dbe7f7; border-radius: 999px; padding: 0.18rem 0.42rem; background: #f7fbff; color: #4c6789; font-size: 0.55rem; }
.mode-summary-card .tiny-buttons { grid-column: 4; grid-row: 1; align-self: center; }
.mode-edit-button { width: auto !important; min-width: 72px; padding: 0 0.52rem !important; border-color: rgba(37,99,235,0.24) !important; background: linear-gradient(135deg, #eff6ff, #dbeafe) !important; color: #1d4ed8 !important; font-size: 0.58rem !important; font-weight: 800; }
.mode-summary-card.is-disabled { opacity: 0.62; border-style: dashed; }

.rank-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; }
.rank-group-card { display: grid; gap: 0.62rem; border: 1px solid #dbe7f7; border-radius: 17px; padding: 0.8rem; background: linear-gradient(145deg, #fff, #f7fbff); box-shadow: 0 10px 28px rgba(21,60,120,0.05); }
.rank-group-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.rank-group-card-head h3 { margin: 0 0 0.16rem; color: #102f5b; font-size: 0.83rem; }
.rank-group-card-head span { color: #7a8da5; font-size: 0.57rem; }
.rank-group-stats { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rank-group-stats span { border-radius: 8px; padding: 0.24rem 0.44rem; background: #eff6ff; color: #315c93; font-size: 0.57rem; font-weight: 700; }
.rank-group-ranks { display: flex; flex-wrap: wrap; gap: 0.23rem; max-height: 78px; overflow: hidden; }
.rank-group-ranks span { border: 1px solid #e1eafa; border-radius: 7px; padding: 0.18rem 0.38rem; background: #fff; color: #526a86; font-size: 0.54rem; }
.rank-group-card-actions { display: flex; flex-wrap: wrap; gap: 0.32rem; padding-top: 0.5rem; border-top: 1px solid #eef4fc; }

.rank-editor-list { display: grid; gap: 0.6rem; }
.rank-editor-card { display: grid; gap: 0.55rem; border: 1px solid #dbe7f7; border-radius: 15px; padding: 0.7rem; background: #fff; }
.rank-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.rank-editor-head strong { color: #173f72; font-size: 0.68rem; }
.rank-editor-grid { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(150px, 1.5fr) repeat(2, minmax(82px, 0.55fr)); gap: 0.45rem; }
.rank-editor-grid .field { margin: 0; }
.rank-editor-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.rank-editor-advanced { border: 1px solid #e8f0fa; border-radius: 11px; background: #f9fbff; }
.rank-editor-advanced summary { cursor: pointer; padding: 0.5rem 0.62rem; color: #57728f; font-size: 0.59rem; font-weight: 800; }
.rank-editor-advanced .field { margin: 0 0.62rem 0.62rem; }
.rank-editor-advanced textarea { min-height: 72px; font-family: "Cascadia Mono", Consolas, monospace; font-size: 0.62rem; }
.drawer-section-title { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.drawer-section-title strong { color: #173f72; font-size: 0.76rem; }
.drawer-section-title span { color: #8092aa; font-size: 0.58rem; }

.admin-drawer { width: min(920px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border: 0; border-radius: 24px; padding: 0; background: transparent; color: var(--ink); }
.admin-drawer::backdrop { background: rgba(5, 21, 48, 0.48); backdrop-filter: blur(5px); }
.drawer-shell { overflow: hidden; max-height: calc(100vh - 2rem); border: 1px solid rgba(151,176,210,0.3); border-radius: 24px; background: #f5f9ff; box-shadow: 0 34px 90px rgba(4, 24, 61, 0.32); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(158,185,220,0.28); padding: 1rem 1.2rem; background: linear-gradient(105deg, #fff, #eff6ff); }
.drawer-head h2 { margin: 0.18rem 0 0.12rem; color: #0c2b58; font-size: 1.15rem; letter-spacing: -0.035em; }
.drawer-head p { margin: 0; color: #7186a1; font-size: 0.62rem; line-height: 1.55; }
.drawer-body { overflow: auto; max-height: calc(100vh - 9rem); padding: 1rem 1.2rem 1.2rem; }
.drawer-form { display: grid; gap: 0.8rem; }
.drawer-form .form-section { background: #fff; }
.mode-drawer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.55rem; }
.mode-drawer-grid .field { margin: 0; }
.mode-drawer-grid .wide { grid-column: 1 / -1; }
.drawer-selector-list { display: grid; gap: 0.55rem; }
.drawer-selector-card { display: grid; gap: 0.5rem; border: 1px solid #dbe7f7; border-radius: 14px; padding: 0.68rem; background: linear-gradient(145deg, #fbfdff, #f5faff); }
.drawer-selector-card.is-dependent { border-color: rgba(37,99,235,0.3); background: linear-gradient(145deg, #f8fbff, #edf5ff); }
.drawer-selector-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.drawer-selector-card-head .field { flex: 1 1 140px; margin: 0; }
.drawer-selector-card .field { margin: 0; }
.drawer-selector-card textarea { min-height: 82px; font-family: "Cascadia Mono", Consolas, monospace; font-size: 0.64rem; }
.drawer-selector-help { margin: 0; color: #7c8fa6; font-size: 0.57rem; line-height: 1.55; }
.drawer-check { display: inline-flex; align-items: center; gap: 0.4rem; color: #3e5b7c; font-size: 0.64rem; font-weight: 700; }
.drawer-check input { accent-color: #2563eb; }
.drawer-empty { border: 1px dashed #bfdbfe; border-radius: 13px; padding: 1rem; background: #f8fbff; color: #7c8fa6; font-size: 0.65rem; text-align: center; }
.drawer-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem; border-top: 1px solid #e4edf9; padding-top: 0.8rem; }

@media (max-width: 760px) {
  .tree-toolbar-note { align-items: flex-start; flex-direction: column; }
  .tree-toolbar-metrics { justify-content: flex-start; }
  .mode-summary-card .game-mode-editor-head { grid-template-columns: auto auto minmax(0, 1fr); }
  .mode-summary-card .tiny-buttons { grid-column: 1 / -1; grid-row: auto; justify-content: flex-end; }
  .mode-summary-tags { grid-column: 1 / -1; }
  .rank-editor-grid, .rank-editor-assets, .mode-drawer-grid { grid-template-columns: 1fr; }
  .mode-drawer-grid .wide { grid-column: auto; }
  .admin-drawer { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); }
  .drawer-shell { max-height: calc(100vh - 1rem); border-radius: 18px; }
  .drawer-body { max-height: calc(100vh - 8rem); padding: 0.8rem; }
}
/* Credit tier and chat emoji editors */
.credit-tier-table td { vertical-align: top; }
.credit-tier-table .inline-input { min-width: 84px; }
.credit-tier-icon-field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.credit-tier-icon-preview { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #f1f5ff; border: 1px dashed #c7d8ef; }
.credit-tier-icon-preview img { width: 28px; height: 28px; object-fit: contain; }
.emoji-admin-preview { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: #f4f8ff; font-size: 20px; }
.emoji-admin-preview img { width: 30px; height: 30px; object-fit: contain; }

/* 稳定的可视化样式编辑器：视觉与业务配置分离 */
.visual-history-tools { display: inline-flex; align-items: center; gap: 0.3rem; }
.visual-history-tools .button { min-height: 30px; padding: 0 0.55rem; font-size: 0.62rem; white-space: nowrap; }
.visual-history-tools .button:disabled { cursor: not-allowed; opacity: 0.42; }
.ui-style-form-v2 { gap: 0.7rem; }
.ui-style-form-v2 .ui-style-designer-head { grid-template-columns: 220px minmax(0, 1fr); }
.ui-style-form-v2 .ui-style-preview { min-height: 170px; }
.ui-style-form-v2 .ui-style-tool-card { align-content: start; }
.ui-gradient-stops { display: grid; gap: 0.38rem; }
.ui-gradient-stop {
  display: grid;
  grid-template-columns: 20px 40px minmax(74px, 0.75fr) minmax(112px, 1.25fr) 42px 26px;
  align-items: center;
  gap: 0.36rem;
  border: 1px solid #e1eafa;
  border-radius: 11px;
  padding: 0.38rem 0.42rem;
  background: #f8fbff;
}
.ui-gradient-stop-index {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #e7f0ff;
  color: #2563eb;
  font-size: 0.55rem;
  font-weight: 900;
}
.ui-gradient-stop > input[type="color"] { width: 38px; height: 32px; border: 1px solid #d4e1f2; border-radius: 8px; padding: 2px; background: #fff; }
.ui-gradient-stop label { display: grid; min-width: 0; gap: 0.12rem; color: #637997; font-size: 0.52rem; font-weight: 800; }
.ui-gradient-stop label > span { display: flex; justify-content: space-between; }
.ui-gradient-stop input[type="number"] { width: 100%; min-width: 0; border: 1px solid #d4e1f2; border-radius: 7px; padding: 0.3rem 0.35rem; background: #fff; color: #1f3c68; font-size: 0.62rem; }
.ui-gradient-stop input[type="range"] { width: 100%; min-width: 0; accent-color: #2563eb; }
.ui-gradient-stop > b { color: #2563eb; font-size: 0.55rem; text-align: right; }
.ui-gradient-stop-remove {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid #e8c5c5;
  border-radius: 7px;
  background: #fff6f6;
  color: #c83434;
  font-size: 0.9rem;
  line-height: 1;
}
.ui-gradient-stop-remove:disabled { cursor: not-allowed; opacity: 0.32; }
.ui-gradient-toolbar { display: flex; flex-wrap: wrap; gap: 0.38rem; }
.ui-gradient-code {
  display: block;
  max-height: 4.6rem;
  overflow: auto;
  border: 1px solid #dce7f7;
  border-radius: 9px;
  padding: 0.42rem 0.52rem;
  background: #f6faff;
  color: #42638d;
  font-size: 0.52rem;
  line-height: 1.55;
  white-space: normal;
  word-break: break-all;
}
.ui-style-diagnostics { display: grid; gap: 0.42rem; }
.ui-style-diagnostic-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.ui-style-diagnostic-badges span {
  border: 1px solid #dbe7f7;
  border-radius: 999px;
  padding: 0.25rem 0.5rem;
  background: #f8fbff;
  color: #5d7696;
  font-size: 0.57rem;
}
.ui-style-diagnostic-badges span b { margin-right: 0.26rem; color: #1e4f91; }
.ui-style-diagnostic-badges strong { margin-left: auto; border-radius: 999px; padding: 0.25rem 0.5rem; font-size: 0.57rem; }
.ui-style-diagnostic-badges strong.is-ok { background: #e9f9f0; color: #157a54; }
.ui-style-diagnostic-badges strong.is-warning { background: #fff5df; color: #9a6100; }
.ui-style-diagnostics > code {
  display: block;
  max-height: 5.5rem;
  overflow: auto;
  border: 1px solid #dce7f7;
  border-radius: 9px;
  padding: 0.45rem 0.55rem;
  background: #f6faff;
  color: #42638d;
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 0.54rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.ui-style-form-v2 .ui-style-tool-card .field > span { color: #557091; }
.ui-style-form-v2 .ui-style-quick-actions button { min-height: 28px; }

@media (max-width: 1050px) {
  .ui-style-form-v2 .ui-style-designer-head { grid-template-columns: 1fr; }
  .ui-gradient-stop { grid-template-columns: 20px 38px minmax(70px, 1fr) minmax(100px, 1.2fr) 38px 24px; }
}

@media (max-width: 720px) {
  .ui-gradient-stop { grid-template-columns: 20px 38px minmax(0, 1fr) 26px; }
  .ui-gradient-stop label { grid-column: 1 / 3; }
  .ui-gradient-stop > b { grid-column: 3; text-align: left; }
  .ui-style-diagnostic-badges strong { margin-left: 0; }
}

/* v9.2 图标化画布工具条与右侧属性面板 */
.ui-canvas-commandbar {
  position: absolute;
  z-index: 36;
  top: auto;
  bottom: 12px;
  left: 50%;
  display: flex;
  width: max-content;
  max-width: calc(100% - 32px);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transform: translateX(-50%);
  border: 1px solid rgba(151, 176, 210, 0.42);
  border-radius: 15px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 40px rgba(20, 55, 115, 0.18), 0 2px 7px rgba(20, 55, 115, 0.08);
  backdrop-filter: blur(18px);
}
.ui-icon-group { display: flex; align-items: center; gap: 3px; }
.ui-icon-divider { width: 1px; height: 24px; margin: 0 2px; background: rgba(132, 157, 190, 0.3); }
.ui-icon-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 5px 8px;
  background: transparent;
  color: #31557f;
  font-size: 0.61rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.ui-icon-button:hover { border-color: rgba(37, 99, 235, 0.2); background: #edf4ff; color: #174a91; }
.ui-icon-button:focus-visible { outline: 2px solid rgba(37, 99, 235, 0.48); outline-offset: 2px; }
.ui-icon-button:active { transform: translateY(1px); }
.ui-icon-button.is-danger { color: #b44132; }
.ui-icon-button.is-danger:hover { border-color: #e9c8c1; background: #fff1ee; color: #9b3024; }
.ui-icon-button.is-primary { border-color: #2563eb; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; box-shadow: 0 5px 14px rgba(37, 99, 235, 0.24); }
.ui-icon-button.is-primary:hover { border-color: #1d4ed8; background: linear-gradient(135deg, #1d4ed8, #1e40af); color: #fff; }
.ui-icon-button.is-compact { min-height: 28px; width: 28px; padding: 3px; border-color: var(--line); background: #fff; }
.ui-icon-glyph { display: grid; min-width: 20px; place-items: center; font-size: 0.9rem; line-height: 1; }
.ui-icon-label { max-width: 76px; overflow: hidden; text-overflow: ellipsis; }

.ui-canvas-inspector {
  position: absolute;
  z-index: 45;
  top: 72px;
  right: 12px;
  bottom: 12px;
  display: grid;
  width: min(310px, calc(100% - 24px));
  align-content: start;
  gap: 0.7rem;
  overflow: auto;
  border: 1px solid rgba(151, 176, 210, 0.4);
  border-radius: 16px;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 48px rgba(20, 55, 115, 0.2);
  backdrop-filter: blur(18px);
  overscroll-behavior: contain;
}
.ui-canvas-inspector-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; border-bottom: 1px solid #e4ecf7; padding-bottom: 0.55rem; }
.ui-canvas-inspector-head > div { display: grid; gap: 0.05rem; }
.ui-canvas-inspector-head strong { color: #173b6c; font-size: 0.82rem; }
.ui-canvas-coordinate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.ui-canvas-inspector-field { display: grid; gap: 0.26rem; margin: 0; }
.ui-canvas-inspector-field.is-wide { grid-column: 1 / -1; }
.ui-canvas-inspector-field > span { color: #607596; font-size: 0.56rem; font-weight: 800; }
.ui-canvas-inspector-field input,
.ui-canvas-inspector-field select,
.ui-canvas-inspector-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #d5e2f2;
  border-radius: 8px;
  padding: 0.42rem 0.48rem;
  background: #fff;
  color: #173b6c;
  font-size: 0.66rem;
}
.ui-canvas-inspector-field input[type="color"] { height: 34px; padding: 2px; }
.ui-canvas-inspector-field textarea { min-height: 74px; resize: vertical; line-height: 1.55; }
.ui-canvas-inspector-check { margin: 0; border: 1px solid #e3ebf6; border-radius: 8px; padding: 0.42rem 0.5rem; background: #f8fbff; color: #4b6688; font-size: 0.62rem; }
.ui-canvas-inspector-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ui-canvas-inspector-actions .button { flex: 1 1 120px; }
.ui-canvas-advanced { border: 1px solid #dce7f5; border-radius: 11px; background: #f8fbff; }
.ui-canvas-advanced > summary { cursor: pointer; padding: 0.6rem 0.68rem; color: #345b88; font-size: 0.64rem; font-weight: 900; list-style: none; }
.ui-canvas-advanced > summary::-webkit-details-marker { display: none; }
.ui-canvas-advanced > summary::after { content: '⌄'; float: right; color: #6b86a7; transition: transform 140ms ease; }
.ui-canvas-advanced[open] > summary::after { transform: rotate(180deg); }
.ui-canvas-advanced-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.48rem; border-top: 1px solid #e1eaf6; padding: 0.62rem; }
.ui-canvas-advanced-grid .canvas-inspector-field.is-wide,
.ui-canvas-advanced-grid .canvas-transparent-button { grid-column: 1 / -1; }
.canvas-transparent-button { width: 100%; min-height: 31px; }

@media (max-width: 980px) {
  .ui-canvas-commandbar { top: auto; bottom: 8px; max-width: calc(100% - 16px); gap: 3px; padding: 5px 6px; }
  .ui-icon-button { min-height: 31px; padding: 4px 6px; }
  .ui-icon-label { display: none; }
  .ui-canvas-inspector { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; max-height: 46%; }
  .ui-canvas-coordinate-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .ui-icon-divider { display: none; }
  .ui-canvas-coordinate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-canvas-advanced-grid { grid-template-columns: 1fr; }
}

/* v9.3 全屏编辑工作台、简化属性面板与轮播简单模式 */
.admin-main .button.is-active,
.visual-center-actions .button.is-active {
  border-color: rgba(37, 99, 235, 0.42);
  background: #e8f1ff;
  color: #174a91;
}
body.visual-focus-mode { overflow: hidden; }
body.visual-focus-mode .admin-topbar,
body.visual-focus-mode .admin-sidebar,
body.visual-focus-mode .admin-page-heading,
body.visual-focus-mode .visual-center-head,
body.visual-focus-mode .visual-center-tabs,
body.visual-focus-mode .visual-editor-footer > div:first-child {
  display: none !important;
}
body.visual-focus-mode .admin-shell,
body.visual-focus-mode .admin-layout,
body.visual-focus-mode .admin-main,
body.visual-focus-mode .admin-content,
body.visual-focus-mode .visual-center-shell,
body.visual-focus-mode .visual-center-content {
  height: 100vh;
  min-height: 0;
}
body.visual-focus-mode .admin-layout { display: block; }
body.visual-focus-mode .admin-main { padding: 0; overflow: hidden; }
body.visual-focus-mode .admin-content { display: flex; flex-direction: column; padding: 0; }
body.visual-focus-mode .visual-center-shell { display: flex; flex-direction: column; gap: 0; }
body.visual-focus-mode .visual-center-content { display: flex; flex: 1; flex-direction: column; min-height: 0; }
body.visual-focus-mode .visual-center-actions {
  position: fixed;
  z-index: 90;
  top: 10px;
  right: 14px;
  margin: 0;
  border: 1px solid rgba(151, 176, 210, 0.44);
  border-radius: 14px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 34px rgba(15, 47, 107, 0.18);
  backdrop-filter: blur(16px);
}
body.visual-focus-mode .visual-editor-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  border: 0;
  border-radius: 0;
}
body.visual-focus-mode .visual-editor-toolbar { flex: none; padding-right: 310px; }
body.visual-focus-mode .visual-editor-canvas {
  flex: 1;
  min-height: 0;
  margin: 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
}
body.visual-focus-mode .visual-editor-footer { display: none; }
body.visual-focus-mode .visual-preview-stage { min-height: 0; }
body.visual-focus-mode .ui-canvas-inspector { top: 66px; bottom: 72px; }

.ui-inspector-quickbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
}
.ui-quick-chip {
  min-height: 32px;
  border: 1px solid #dce7f5;
  border-radius: 9px;
  padding: 4px 5px;
  background: #f8fbff;
  color: #31557f;
  font-size: 0.58rem;
  font-weight: 800;
  white-space: nowrap;
}
.ui-quick-chip:hover { border-color: rgba(37, 99, 235, 0.34); background: #edf4ff; color: #174a91; }
.ui-quick-chip.is-danger { color: #b44132; }
.ui-quick-chip.is-on { border-color: #f2b8ae; background: #fff1ee; color: #9b3024; }
.ui-inspector-section { border: 1px solid #dce7f5; border-radius: 11px; background: #fbfdff; }
.ui-inspector-section > summary {
  cursor: pointer;
  padding: 0.56rem 0.64rem;
  color: #345b88;
  font-size: 0.62rem;
  font-weight: 900;
  list-style: none;
}
.ui-inspector-section > summary::-webkit-details-marker { display: none; }
.ui-inspector-section > summary::after { content: '⌄'; float: right; color: #6b86a7; transition: transform 140ms ease; }
.ui-inspector-section[open] > summary::after { transform: rotate(180deg); }
.ui-inspector-section-body { display: grid; gap: 0.48rem; border-top: 1px solid #e4edf8; padding: 0.58rem; }
.ui-inspector-section-body .button-block { width: 100%; }

.carousel-studio { display: grid; gap: 0.85rem; }
.carousel-studio-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 16px;
  padding: 0.9rem 1rem;
  background: linear-gradient(120deg, #0d2b62, #17499c);
  color: #fff;
}
.carousel-studio-intro h3 { margin: 0.18rem 0; color: #fff; font-size: 1.25rem; }
.carousel-studio-intro p { margin: 0; color: rgba(219, 234, 254, 0.74); font-size: 0.66rem; }
.carousel-studio-intro .eyebrow { color: #93c5fd; }
.carousel-studio-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.45rem; }
.carousel-count-field {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(191, 219, 254, 0.24);
  border-radius: 10px;
  padding: 4px 5px 4px 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #dbeafe;
  font-size: 0.6rem;
  font-weight: 800;
}
.carousel-count-field input { width: 58px; border: 0; border-radius: 7px; padding: 5px; background: #fff; color: #173b6c; }
.carousel-studio-size, .carousel-studio-current {
  border: 1px solid #e0e9f5;
  border-radius: 14px;
  padding: 0.72rem;
  background: #f8fbff;
}
.carousel-ratio-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.52rem 0; }
.carousel-studio-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.carousel-settings-current { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.carousel-settings-slides { display: grid; gap: 0.5rem; }
.carousel-settings-slide {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0.55rem;
  border: 1px solid #e0e9f5;
  border-radius: 13px;
  padding: 0.5rem;
  background: #fff;
}
.carousel-settings-slide.is-active { border-color: rgba(37, 99, 235, 0.48); background: #f4f8ff; box-shadow: 0 7px 20px rgba(37, 99, 235, 0.1); }
.carousel-settings-thumb {
  display: grid;
  width: 100%;
  min-height: 82px;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: #eaf2ff;
  color: #607596;
  font-size: 0.58rem;
  font-weight: 800;
}
.carousel-settings-thumb img { width: 100%; height: 82px; object-fit: cover; }
.carousel-settings-copy { display: grid; align-content: center; gap: 0.16rem; min-width: 0; }
.carousel-settings-copy strong { color: #173b6c; font-size: 0.72rem; }
.carousel-settings-copy span { color: #607596; font-size: 0.56rem; }
.carousel-settings-actions { display: flex; flex-wrap: wrap; align-content: center; gap: 0.28rem; }
.carousel-settings-slide { grid-template-columns: 132px minmax(0, 1fr); }
.carousel-settings-thumb { position: relative; min-height: 82px; }
.carousel-settings-index {
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 5px;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: rgba(15, 35, 66, 0.78);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 900;
}
.carousel-settings-link { overflow: hidden; color: #2563eb !important; text-overflow: ellipsis; white-space: nowrap; }
.carousel-settings-slide .carousel-settings-actions { grid-column: 2; }
@media (max-width: 760px) {
  .carousel-studio-summary, .carousel-studio-actions { align-items: stretch; flex-direction: column; }
  .carousel-studio-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carousel-settings-slide { grid-template-columns: 1fr; }
  .carousel-settings-slide .carousel-settings-actions { grid-column: auto; }
  .carousel-settings-current { grid-template-columns: 1fr; }
  body.visual-focus-mode .visual-editor-toolbar { padding-right: 0.9rem; }
}

/* 背景画板与排版模块：所见即所得，少层级、少打扰 */
.ui-background-form,
.ui-layout-form,
.ui-slot-form { display: grid; gap: 0.9rem; }
.ui-background-board {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  gap: 0.9rem;
  align-items: stretch;
}
.ui-background-board-preview {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 285px;
  align-content: space-between;
  overflow: hidden;
  border: 1px solid rgba(146, 174, 211, 0.56);
  border-radius: 18px;
  padding: 0.9rem;
  background: linear-gradient(145deg, #f8fbff, #eaf3ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 36px rgba(26, 67, 132, 0.11);
}
.ui-background-board-canvas,
.ui-background-board-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ui-background-board-canvas {
  z-index: -2;
  background-repeat: no-repeat;
  transform-origin: center;
  transition: opacity 120ms ease, filter 120ms ease, background-size 120ms ease;
}
.ui-background-board-overlay {
  z-index: -1;
  background: transparent;
}
.ui-background-board-chrome,
.ui-background-board-content {
  position: relative;
  z-index: 1;
  width: fit-content;
}
.ui-background-board-chrome {
  display: inline-flex;
  gap: 0.3rem;
  width: auto;
  border-radius: 999px;
  padding: 0.34rem 0.5rem;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 24px rgba(18, 52, 105, 0.11);
  backdrop-filter: blur(12px);
}
.ui-background-board-chrome span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8db6f4;
}
.ui-background-board-content {
  display: grid;
  gap: 0.16rem;
  justify-self: end;
  align-self: end;
  justify-items: end;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 13px;
  padding: 0.5rem 0.68rem;
  background: rgba(7, 26, 61, 0.7);
  color: #fff;
  text-align: right;
  box-shadow: 0 12px 30px rgba(7, 26, 61, 0.18);
  backdrop-filter: blur(12px);
}
.ui-background-board-content b { font-size: 0.76rem; letter-spacing: 0.02em; }
.ui-background-board-content span { color: rgba(225, 237, 255, 0.78); font-size: 0.57rem; }
.ui-background-board-side {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  border: 1px solid #dfe9f6;
  border-radius: 18px;
  padding: 0.85rem;
  background: #fff;
}
.ui-background-board-side .badge { justify-self: start; }
.ui-background-board-side h3 { margin: 0.12rem 0 0; color: #173b6c; font-size: 1rem; }
.ui-background-board-side p { margin: 0; color: #687f9f; font-size: 0.64rem; line-height: 1.6; }
.ui-background-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; margin-top: 0.18rem; }
.ui-background-mode {
  position: relative;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 0.36rem;
  border: 1px solid #dce7f5;
  border-radius: 10px;
  padding: 0.46rem 0.5rem;
  background: #f8fbff;
  color: #365a86;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.ui-background-mode:hover { border-color: #aac7f4; background: #f2f7ff; }
.ui-background-mode:has(input:checked) { border-color: #5a8ff2; background: #edf4ff; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08); }
.ui-background-mode input { position: absolute; opacity: 0; pointer-events: none; }
.ui-background-mode > span,
.ui-background-mode > strong { pointer-events: none; }
.ui-background-mode > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: #e9f2ff; font-size: 0.8rem; }
.ui-background-mode strong { font-size: 0.62rem; text-align: left; }
.ui-background-panel,
.ui-background-overlay-panel {
  border: 1px solid #dfe9f6;
  border-radius: 14px;
  padding: 0.72rem;
  background: #f9fcff;
}
.ui-background-form [data-background-panel][hidden] { display: none !important; }
.ui-background-overlay-panel { display: grid; gap: 0.55rem; }
.ui-background-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.ui-background-color-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; align-items: end; }
.ui-background-color-row input[type="color"] { width: 100%; height: 38px; }
.ui-range-field > span { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ui-range-field > span b { color: #2563eb; font-size: 0.6rem; }
.ui-range-field input[type="range"] { width: 100%; accent-color: #2563eb; }
.ui-background-form .ui-slot-library { max-height: 188px; overflow: auto; }
.ui-background-form .ui-slot-actions { margin-top: 0; }

.ui-layout-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.56fr);
  gap: 0.8rem;
  align-items: stretch;
  border: 1px solid #dfe9f6;
  border-radius: 16px;
  padding: 0.8rem;
  background: linear-gradient(115deg, #f8fbff, #edf5ff);
}
.ui-layout-intro h3 { margin: 0.12rem 0 0.2rem; color: #173b6c; font-size: 1.05rem; }
.ui-layout-intro p { max-width: 44rem; margin: 0; color: #657d9e; font-size: 0.65rem; line-height: 1.65; }
.ui-layout-demo {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns, 3), minmax(0, 1fr));
  gap: var(--layout-gap, 12px);
  align-content: center;
  border: 1px dashed #b8d0f0;
  border-radius: 12px;
  padding: var(--layout-padding, 12px);
  background: #fff;
}
.ui-layout-demo span {
  display: grid;
  min-height: 27px;
  place-items: center;
  border: 1px solid #cddff6;
  border-radius: 7px;
  background: #edf5ff;
  color: #4d73a5;
  font-size: 0.56rem;
  font-weight: 900;
}
.ui-layout-demo[data-mode="free"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-layout-demo[data-mode="row"] { grid-template-columns: repeat(auto-fit, minmax(32px, 1fr)); }
.ui-layout-demo[data-mode="column"] { grid-template-columns: 1fr; }
.ui-layout-demo[data-mode="column"] span { min-height: 18px; }
.ui-layout-mode-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.ui-layout-mode-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.28rem;
  border: 1px solid #dce7f5;
  border-radius: 13px;
  padding: 0.62rem;
  background: #f9fcff;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.ui-layout-mode-card:hover { border-color: #aac7f4; background: #f3f8ff; }
.ui-layout-mode-card:has(input:checked) { border-color: #5a8ff2; background: #edf4ff; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08); }
.ui-layout-mode-card input { position: absolute; opacity: 0; pointer-events: none; }
.ui-layout-mode-card > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: #e8f2ff; color: #2563eb; font-size: 0.9rem; }
.ui-layout-mode-card strong { color: #244b7d; font-size: 0.68rem; }
.ui-layout-mode-card small { color: #6b82a2; font-size: 0.57rem; line-height: 1.45; }
.ui-layout-mode-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-layout-block-list { display: grid; gap: 0.42rem; border: 1px solid #e1eaf6; border-radius: 12px; padding: 0.75rem; background: #f8fbff; }
.ui-layout-block-row { display: flex; align-items: center; gap: 0.55rem; border-radius: 9px; padding: 0.45rem 0.55rem; background: #fff; border: 1px solid #e7eff9; }
.ui-layout-block-row b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: #e8f2ff; color: #2563eb; font-size: 0.6rem; }
.ui-layout-block-row > span:first-of-type { display: grid; flex: 1; gap: 0.08rem; color: #244b7d; font-size: 0.66rem; font-weight: 800; }
.ui-layout-block-row small { display: block; color: #7b91ad; font-size: 0.55rem; font-weight: 500; }
.ui-layout-block-row .ui-layout-visible { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.28rem; color: #46658a; font-size: 0.6rem; font-weight: 700; }
.ui-layout-block-row .ui-layout-move { display: inline-flex; flex: 0 0 auto; gap: 0.22rem; }
.ui-layout-block-row .mini-button { min-width: 28px; min-height: 26px; padding: 0 0.3rem; }
.ui-canvas-mode-switch .button { flex: 1 1 0; }
.ui-layout-control-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; }
.ui-layout-control-grid .field { margin: 0; }
.ui-image-transform-panel { border: 1px solid #dfe9f6; border-radius: 14px; padding: 0.72rem; background: #f9fcff; }
.ui-image-transform-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.56rem; }

@media (max-width: 980px) {
  .ui-background-board,
  .ui-layout-intro { grid-template-columns: 1fr; }
  .ui-layout-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-layout-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-image-transform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .ui-background-mode-grid,
  .ui-background-control-grid,
  .ui-background-color-row,
  .ui-layout-mode-grid,
  .ui-layout-control-grid,
  .ui-image-transform-grid { grid-template-columns: 1fr; }
  .ui-background-board-preview { min-height: 220px; }
}

/* Lightweight Visual Studio shell */
.visual-studio {
  position: relative;
  display: flex;
  min-height: 760px;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #f4f8ff;
  box-shadow: 0 24px 70px rgba(20, 55, 115, 0.13);
}
.vi-shellbar {
  z-index: 25;
  display: flex;
  min-height: 58px;
  flex: 0 0 58px;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 1px solid rgba(177, 199, 229, 0.52);
  padding: 0.48rem 0.75rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(25, 61, 124, 0.05);
  backdrop-filter: blur(18px);
}
.vi-shellbar-brand,
.vi-shellbar-center,
.vi-shellbar-actions { display: flex; align-items: center; gap: 0.48rem; }
.vi-shellbar-brand { min-width: 188px; }
.vi-shellbar-center { flex: 1; justify-content: center; }
.vi-shellbar-actions { justify-content: flex-end; }
.vi-brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #0b2d73, #2f7cf6);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 9px 20px rgba(37, 99, 235, 0.26);
}
.vi-page-picker select {
  max-width: 180px;
  height: 36px;
  border: 1px solid #dbe7f7;
  border-radius: 11px;
  padding: 0 2rem 0 0.7rem;
  background: #f8fbff;
  color: #173d72;
  font-size: 0.74rem;
  font-weight: 850;
}
.vi-icon-action,
.vi-tool-action {
  display: inline-flex;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border: 1px solid #dfe9f7;
  border-radius: 10px;
  padding: 0 0.62rem;
  background: #fff;
  color: #32567f;
  font-size: 0.68rem;
  font-weight: 850;
  cursor: pointer;
  transition: 160ms ease;
}
.vi-icon-action { width: 34px; padding: 0; font-size: 0.9rem; }
.vi-icon-action:hover,
.vi-tool-action:hover { border-color: #b8d1f2; background: #f3f8ff; color: #174a91; }
.vi-icon-action:disabled { cursor: not-allowed; opacity: 0.34; }
.vi-tool-action.is-primary {
  border-color: transparent;
  padding-inline: 1.1rem;
  background: linear-gradient(135deg, #225ed7, #3d8bfd);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24);
}
.vi-save-draft { border-color: #c9dcf5; color: #1c4f91; }
.vi-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  border: 1px solid #d9e6f8;
  border-radius: 10px;
  padding: 3px;
  background: #edf5ff;
  cursor: pointer;
}
.vi-mode-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.vi-mode-toggle span {
  border-radius: 7px;
  padding: 0.28rem 0.68rem;
  color: #6580a3;
  font-size: 0.64rem;
  font-weight: 850;
  transition: 160ms ease;
}
.vi-mode-toggle input:not(:checked) ~ span[data-mode-label="preview"],
.vi-mode-toggle input:checked ~ span[data-mode-label="edit"] {
  background: #fff;
  color: #174a91;
  box-shadow: 0 3px 10px rgba(45, 86, 150, 0.14);
}
.vi-shellbar .visual-dirty-state {
  position: static;
  max-width: 150px;
  overflow: hidden;
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
  background: #f1f7ff;
  color: #69809d;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vi-shellbar .visual-dirty-state.is-dirty { background: #fff1e8; color: #a64a12; }
.vi-hidden-controls { display: none !important; }
.vi-workspace {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.vi-material {
  z-index: 18;
  width: 0;
  flex: 0 0 0;
  overflow: hidden;
  border-right: 1px solid transparent;
  background: #fff;
  transition: flex-basis 200ms ease, width 200ms ease, border-color 200ms ease;
}
.vi-workspace.is-material-open .vi-material {
  width: 254px;
  flex-basis: 254px;
  border-right-color: #dce8f7;
}
.vi-material-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 0.6rem 0.62rem;
  border-bottom: 1px solid #e8f0fa;
  background: #fbfdff;
}
.vi-material-tabs button {
  min-width: 0;
  border: 0;
  border-radius: 8px;
  padding: 0.42rem 0.25rem;
  background: transparent;
  color: #7186a1;
  font-size: 0.64rem;
  font-weight: 850;
  cursor: pointer;
}
.vi-material-tabs button.is-active { background: #eaf3ff; color: #1e56b3; }
.vi-material-body { height: calc(100% - 48px); overflow: auto; padding: 0.7rem; }
.vi-material-section + .vi-material-section { margin-top: 1rem; }
.vi-material-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; }
.vi-material-section-head strong { color: #173d72; font-size: 0.7rem; }
.vi-material-section-head small { color: #8ca0b9; font-size: 0.54rem; }
.vi-material-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; }
.vi-material-grid button,
.vi-material-module-list button,
.vi-layout-options button {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid #e1ebf8;
  border-radius: 11px;
  padding: 0.55rem;
  background: #fbfdff;
  color: #31557f;
  text-align: left;
  cursor: pointer;
  transition: 150ms ease;
}
.vi-material-grid button { flex-direction: column; min-height: 62px; justify-content: center; }
.vi-material-grid button:hover,
.vi-material-module-list button:hover,
.vi-layout-options button:hover { border-color: #b9d2f3; background: #f2f8ff; transform: translateY(-1px); }
.vi-material-grid span { font-size: 1rem; }
.vi-material-grid b,
.vi-material-module-list b,
.vi-layout-options b { min-width: 0; overflow: hidden; color: #284e7c; font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.vi-material-module-list { display: grid; gap: 0.35rem; }
.vi-material-module-list button > span { width: 24px; color: #2b6fe1; text-align: center; }
.vi-material-module-list button > i { margin-left: auto; color: #8aa0bb; font-size: 0.52rem; font-style: normal; }
.vi-material-module-list button.is-hidden { opacity: 0.58; }
.vi-material-wide { width: 100%; border: 1px dashed #bed4f1; border-radius: 10px; padding: 0.6rem; background: #f8fbff; color: #2b61ae; font-size: 0.64rem; font-weight: 800; cursor: pointer; }
.vi-layout-options { display: grid; gap: 0.44rem; }
.vi-layout-options button { align-items: flex-start; flex-direction: column; }
.vi-layout-options button.is-active { border-color: #94bbef; background: #eaf3ff; }
.vi-layout-options small { color: #8298b2; font-size: 0.54rem; }
.vi-material-list { display: grid; gap: 0.3rem; }
.vi-material-list button { display: flex; align-items: center; gap: 0.48rem; border: 0; border-radius: 9px; padding: 0.48rem; background: #f8fbff; color: #385a82; font-size: 0.63rem; cursor: pointer; }
.vi-material-list button:hover { background: #edf5ff; }
.vi-material-list b { flex: 1; text-align: left; }
.vi-material-list i { color: #8ca1bb; font-style: normal; }
.vi-material-empty { color: #8498b2; font-size: 0.62rem; line-height: 1.6; }
.vi-material-handle {
  z-index: 19;
  display: flex;
  width: 26px;
  flex: 0 0 26px;
  align-items: center;
  flex-direction: column;
  gap: 0.3rem;
  border: 0;
  border-right: 1px solid #dce8f7;
  padding: 0.7rem 0;
  background: #fff;
  color: #486d9b;
  cursor: pointer;
}
.vi-material-handle span { font-size: 1rem; font-weight: 900; }
.vi-material-handle b { font-size: 0.52rem; letter-spacing: 0.1em; writing-mode: vertical-rl; }
.vi-canvas-shell { display: flex; min-width: 0; flex: 1; flex-direction: column; background: #e8f0fb; }
.vi-canvas-hint { display: flex; min-height: 32px; flex: 0 0 32px; align-items: center; gap: 0.6rem; padding: 0 0.8rem; border-bottom: 1px solid #d5e4f6; background: rgba(247, 251, 255, 0.94); color: #3d608a; font-size: 0.6rem; }
.vi-canvas-hint span { font-weight: 900; }
.vi-canvas-hint small { color: #8297af; }
.vi-canvas-shell .visual-editor-canvas { flex: 1; min-height: 0; margin: 0; border: 0; border-radius: 0; background: #e8f0fb; box-shadow: none; overflow: auto; }
.vi-canvas-shell .visual-preview-stage { border-radius: 0; }
.vi-canvas-shell.is-grid-visible .visual-preview-stage::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  background-image: linear-gradient(rgba(37, 99, 235, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  content: '';
  pointer-events: none;
}
.vi-statusbar { min-height: 42px; flex: 0 0 42px; padding: 0.4rem 0.75rem; border-top: 1px solid #dbe7f7; background: #fff; }
.vi-status-left { display: flex; align-items: center; gap: 0.45rem; color: #58718f; font-size: 0.58rem; }
.vi-status-left strong { color: #254c7e; font-size: 0.62rem; }
.vi-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12); }
.vi-link-action { border: 0; padding: 0.25rem 0.35rem; background: transparent; color: #5a7393; font-size: 0.58rem; font-weight: 750; cursor: pointer; }
.vi-link-action:hover { color: #1d55ad; text-decoration: underline; }
.vi-link-action.is-danger { color: #b65447; }
.vi-onboarding {
  position: absolute;
  z-index: 40;
  right: 1rem;
  bottom: 54px;
  display: flex;
  width: min(430px, calc(100% - 2rem));
  align-items: center;
  gap: 0.7rem;
  border: 1px solid #cbe0ff;
  border-radius: 16px;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 20px 54px rgba(19, 57, 121, 0.2);
  backdrop-filter: blur(16px);
}
.vi-onboarding[hidden] { display: none !important; }
.vi-onboarding-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 11px; background: #e9f2ff; color: #2563eb; font-size: 1.1rem; }
.vi-onboarding > div { flex: 1; }
.vi-onboarding strong { color: #173e73; font-size: 0.7rem; }
.vi-onboarding p { margin: 0.2rem 0 0; color: #6e86a4; font-size: 0.58rem; line-height: 1.6; }
.vi-onboarding button { border: 0; border-radius: 8px; padding: 0.35rem 0.55rem; background: #edf5ff; color: #1d57b0; font-size: 0.58rem; font-weight: 850; cursor: pointer; }

.vi-inspector-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  border-radius: 10px;
  padding: 3px;
  background: #eef5ff;
}
.vi-inspector-tabs button { border: 0; border-radius: 7px; padding: 0.4rem 0.2rem; background: transparent; color: #6d84a3; font-size: 0.62rem; font-weight: 850; cursor: pointer; }
.vi-inspector-tabs button.is-active { background: #fff; color: #174a91; box-shadow: 0 3px 10px rgba(42, 82, 146, 0.12); }
.vi-inspector-pane { display: grid; gap: 0.62rem; animation: vi-pane-in 150ms ease both; }
@keyframes vi-pane-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.vi-inspector-group { display: grid; gap: 0.4rem; border: 1px solid #e4edf9; border-radius: 12px; padding: 0.58rem; background: #fbfdff; }
.vi-inspector-label { color: #244f82; font-size: 0.62rem; font-weight: 900; }
.vi-inspector-block-note { display: grid; gap: 0.15rem; border: 1px solid #d8e8fb; border-radius: 10px; padding: 0.52rem; background: #f2f8ff; }
.vi-inspector-block-note strong { color: #235b9e; font-size: 0.63rem; }
.vi-inspector-block-note span { color: #7188a4; font-size: 0.56rem; line-height: 1.5; }
.vi-style-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.vi-style-presets button { border: 1px solid #dce8f7; border-radius: 8px; padding: 0.42rem 0.1rem; background: #fff; color: #3c608b; font-size: 0.57rem; font-weight: 850; cursor: pointer; }
.vi-style-presets button:hover { border-color: #9fc1ed; background: #f2f8ff; color: #1d57b0; }
.vi-inspector-corner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.visual-studio .ui-canvas-inspector {
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: 352px;
  max-height: none;
  border: 1px solid rgba(177, 201, 232, 0.72);
  border-radius: 16px;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 60px rgba(17, 53, 112, 0.24);
  backdrop-filter: blur(18px);
  animation: vi-drawer-in 180ms ease both;
}
@keyframes vi-drawer-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
.visual-studio .ui-canvas-inspector-head small { color: #8ba0ba; font-size: 0.52rem; }
.visual-studio .ui-canvas-inspector-head { border-bottom-color: #e7effa; }
.visual-studio .ui-inspector-quickbar { margin-top: 0.55rem; }
.visual-studio .ui-canvas-inspector-field > span { color: #5e7695; }
.visual-studio .ui-canvas-inspector-field input,
.visual-studio .ui-canvas-inspector-field select,
.visual-studio .ui-canvas-inspector-field textarea { border-color: #dce7f5; border-radius: 8px; background: #fbfdff; }
.visual-studio .ui-canvas-inspector-field input:focus,
.visual-studio .ui-canvas-inspector-field select:focus,
.visual-studio .ui-canvas-inspector-field textarea:focus { border-color: #8bb8f4; outline: 0; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.visual-studio .ui-canvas-commandbar {
  top: auto;
  right: 372px;
  bottom: 12px;
  left: auto;
  width: max-content;
  max-width: calc(100% - 392px);
  transform: none;
  border-radius: 13px;
  box-shadow: 0 14px 36px rgba(16, 49, 103, 0.2);
}
.visual-studio .ui-canvas-inspector:not([hidden]) { z-index: 46; }

.vi-template-modal,
.vi-settings-modal { display: grid; gap: 1rem; }
.vi-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.vi-template-grid button { display: grid; gap: 0.38rem; border: 1px solid #dce7f6; border-radius: 15px; padding: 0.65rem; background: #fbfdff; text-align: left; cursor: pointer; }
.vi-template-grid button:hover { border-color: #93baf0; box-shadow: 0 12px 32px rgba(30, 74, 142, 0.12); transform: translateY(-2px); }
.vi-template-grid strong { color: #1d446f; font-size: 0.7rem; }
.vi-template-grid small { color: #788ea9; font-size: 0.56rem; line-height: 1.55; }
.vi-template-preview { display: grid; height: 76px; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #dcecff, #f6faff); color: #2563eb; font-size: 1.6rem; }
.vi-template-preview.is-board { background: linear-gradient(145deg, #0c2554, #1d5cae); color: #dbeafe; }
.vi-template-preview.is-minimal { background: linear-gradient(145deg, #f7fbff, #eaf2ff); }
.vi-version-section { border-top: 1px solid #e6eef9; padding-top: 0.8rem; }
.vi-version-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; }
.vi-version-list button { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border: 1px solid #e0eaf7; border-radius: 9px; padding: 0.48rem 0.55rem; background: #fbfdff; color: #33587f; font-size: 0.6rem; cursor: pointer; }
.vi-version-list small { color: #8da1b9; font-size: 0.52rem; }
.vi-settings-section { display: grid; gap: 0.45rem; border: 1px solid #e3edf9; border-radius: 12px; padding: 0.7rem; background: #fbfdff; }
.vi-settings-section > strong { color: #1e4878; font-size: 0.7rem; }
.vi-settings-section > p { margin: 0; color: #758ca8; font-size: 0.58rem; }
.vi-segment-list { display: flex; flex-wrap: wrap; gap: 0.38rem; }
.vi-segment-list button { border: 1px solid #dce7f6; border-radius: 8px; padding: 0.4rem 0.65rem; background: #fff; color: #45668b; font-size: 0.6rem; font-weight: 800; cursor: pointer; }
.vi-segment-list button.is-active { border-color: #7dafec; background: #eaf3ff; color: #1a55ad; }
.vi-settings-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.vi-settings-links button { border: 1px solid #e0eaf7; border-radius: 9px; padding: 0.55rem; background: #fff; color: #31577f; font-size: 0.62rem; text-align: left; cursor: pointer; }
.vi-settings-links button:hover { background: #f2f8ff; border-color: #b9d4f5; }

body.visual-focus-mode .visual-center-actions { display: none !important; }
body.visual-focus-mode .visual-studio { height: 100vh; min-height: 0; border-radius: 0; }
body.visual-focus-mode .visual-studio .visual-editor-canvas { margin: 0; border: 0; border-radius: 0; }
body.visual-focus-mode .visual-studio .ui-canvas-inspector { top: 10px; bottom: 10px; }
body.visual-focus-mode .vi-statusbar { display: flex; }
body.visual-focus-mode .vi-statusbar > div:first-child { display: flex; }

@media (max-width: 1180px) {
  .vi-shellbar-center { justify-content: flex-start; }
  .vi-shellbar .visual-dirty-state { display: none; }
  .vi-workspace.is-material-open .vi-material { width: 224px; flex-basis: 224px; }
  .visual-studio .ui-canvas-inspector { width: min(340px, calc(100% - 20px)); }
  .visual-studio .ui-canvas-commandbar { right: 354px; max-width: calc(100% - 374px); }
}

@media (max-width: 820px) {
  .visual-studio { min-height: 640px; border-radius: 16px; }
  .vi-shellbar { flex-wrap: wrap; flex-basis: auto; }
  .vi-shellbar-center { order: 3; flex-basis: 100%; justify-content: space-between; }
  .vi-tool-action span { display: none; }
  .vi-workspace { min-height: 600px; }
  .vi-workspace.is-material-open .vi-material { position: absolute; z-index: 30; top: 0; bottom: 0; left: 26px; width: 250px; box-shadow: 16px 0 40px rgba(16, 48, 103, 0.18); }
  .vi-canvas-hint small { display: none; }
  .visual-studio .ui-canvas-inspector { position: fixed; z-index: 120; top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; max-height: 56vh; }
  .visual-studio .ui-canvas-commandbar { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; max-width: none; transform: none; }
  .vi-template-grid { grid-template-columns: 1fr; }
  .vi-version-list { grid-template-columns: 1fr; }
}

/* 游戏卡片统一样式工作台 */
.game-card-studio { display: grid; gap: 0.9rem; }
.gcs-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0.32rem;
  border: 1px solid #dbe8f8;
  border-radius: 16px;
  background: #f3f8ff;
}
.gcs-tab {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.55rem;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  background: transparent;
  color: #58718f;
  text-align: left;
  cursor: pointer;
}
.gcs-tab > span { grid-row: 1 / 3; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #e4eefb; font-size: 1rem; }
.gcs-tab b { color: #234a7d; font-size: 0.72rem; }
.gcs-tab small { color: #8297b0; font-size: 0.56rem; }
.gcs-tab.is-active { border-color: #9fc4f4; background: #fff; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1); }
.gcs-tab.is-active > span { background: #2563eb; color: #fff; }
.gcs-tab-panel[hidden] { display: none !important; }
.gcs-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}
.gcs-preset {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.42rem;
  align-items: center;
  min-width: 0;
  border: 1px solid #d7e5f6;
  border-radius: 11px;
  padding: 0.38rem;
  background: #fff;
  color: #49627f;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.gcs-preset:hover { border-color: #8fb9ed; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.1); transform: translateY(-1px); }
.gcs-preset.is-active { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
.gcs-preset-thumb {
  grid-row: 1 / 3;
  display: block;
  width: 38px;
  height: 38px;
  border: 1px solid var(--preset-border, #26323f);
  border-radius: var(--preset-radius, 12px);
  background: linear-gradient(155deg, var(--preset-bg, #0b0f16), var(--preset-bg-to, #070a0e));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--preset-accent, #6bff9e) 24%, transparent);
}
.gcs-preset.is-mini .gcs-preset-thumb { width: 30px; height: 30px; justify-self: center; }
.gcs-preset b { overflow: hidden; color: #24466f; font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; }
.gcs-preset small { overflow: hidden; color: #8a9cb2; font-size: 0.49rem; text-overflow: ellipsis; white-space: nowrap; }
.game-card-studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 1rem;
  align-items: start;
}
.game-card-studio-preview-panel {
  position: sticky;
  top: 0;
  display: grid;
  gap: 0.8rem;
  border: 1px solid #dbe8f8;
  border-radius: 20px;
  padding: 0.9rem;
  background: linear-gradient(155deg, #f7fbff, #eaf3ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.game-card-studio-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.game-card-studio-preview-head strong { display: block; color: #173e73; font-size: 0.78rem; }
.game-card-studio-preview-head .eyebrow { margin-bottom: 0.18rem; }
.gcs-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gcs-gap, 14px);
  padding: 0.25rem;
}
.gcs-card {
  position: relative;
  overflow: hidden;
  border-style: solid;
  border-color: var(--gcs-card-border-color, #dbe7f5);
  border-width: var(--gcs-card-border-width, 1px);
  border-radius: var(--gcs-card-radius, 22px);
  background: var(--gcs-card-bg, #ffffff);
  box-shadow: var(--gcs-card-shadow, 0 10px 28px rgba(15,35,66,.14));
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.gcs-card:hover { border-color: var(--gcs-accent, #6bff9e); transform: translateY(calc(-1 * var(--gcs-hover-lift, 4px))); }
.gcs-art {
  position: relative;
  display: grid;
  height: var(--gcs-poster-height, 220px);
  margin: var(--gcs-poster-padding, 0px);
  place-items: center;
  overflow: hidden;
  border-radius: var(--gcs-poster-radius, 0px);
  background: linear-gradient(135deg, #0b2a66, #2563eb);
}
.gcs-art::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.2), transparent 45%), linear-gradient(120deg, transparent, rgba(255,255,255,.12), transparent);
  transform: scale(var(--gcs-poster-zoom, 1));
}
.gcs-art::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background: var(--gcs-overlay-color, #061a38);
  opacity: var(--gcs-overlay-opacity, 0);
  pointer-events: none;
}
.gcs-art-word {
  position: relative;
  z-index: 0;
  color: rgba(255,255,255,.9);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  transform: scale(var(--gcs-poster-zoom, 1));
}
.gcs-hot,
.gcs-heat {
  position: absolute;
  z-index: 3;
  top: 0.55rem;
  border-radius: 999px;
  padding: 0.18rem 0.42rem;
  font-size: 0.56rem;
  font-weight: 900;
}
.gcs-hot { left: 0.55rem; color: var(--gcs-hot-color, #fff); background: var(--gcs-hot-bg, #e5484d); }
.gcs-heat { right: 0.55rem; color: var(--gcs-heat-color, #23456d); background: var(--gcs-heat-bg, #fff); }
.gcs-copy { display: grid; gap: 0.26rem; padding: var(--gcs-copy-padding, 14px); }
.gcs-copy strong { color: var(--gcs-title-color, #0f2342); font-size: var(--gcs-title-size, 15px); font-weight: var(--gcs-title-weight, 800); line-height: 1.25; }
.gcs-copy small { color: var(--gcs-desc-color, #5b7190); font-size: var(--gcs-desc-size, 10px); line-height: 1.45; }
.gcs-meta,
.gcs-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.gcs-meta b {
  border-radius: 999px;
  padding: 0.1rem 0.34rem;
  color: var(--gcs-meta-color, #5b7190);
  background: var(--gcs-meta-bg, #f3f7fc);
  font-size: var(--gcs-meta-size, 9px);
}
.gcs-tags b {
  border-radius: var(--gcs-tag-radius, 999px);
  padding: 0.12rem 0.38rem;
  color: var(--gcs-tag-color, #1d4ed8);
  background: var(--gcs-tag-bg, #e8f1ff);
  font-size: var(--gcs-tag-size, 9px);
}
.gcs-preview-grid[data-show-hot="0"] .gcs-hot { display: none; }
.gcs-preview-grid[data-show-heat="0"] .gcs-heat { display: none; }
.gcs-preview-grid[data-show-meta="0"] .gcs-meta { display: none; }
.gcs-preview-grid[data-show-services="0"] .gcs-tags { display: none; }

/* 小图标独立预览 */
.gms-preview-grid {
  display: grid;
  grid-template-columns: repeat(var(--gms-columns, 5), minmax(0, 1fr));
  column-gap: var(--gms-gap-x, 14px);
  row-gap: var(--gms-gap-y, 14px);
  padding: 0.45rem 0.3rem;
  background: #080b10;
  border: 1px solid #1f2c3d;
  border-radius: 14px;
}
.gms-card {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 6px;
}
.gms-art {
  display: grid;
  width: min(100%, var(--gms-size, 72px));
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border-style: solid;
  border-color: var(--gms-border-color, #2a3544);
  border-width: var(--gms-border-width, 1px);
  border-radius: var(--gms-radius, 20px);
  padding: var(--gms-padding, 0);
  background: var(--gms-bg, #0c1118);
  box-shadow: var(--gms-shadow, 0 12px 28px rgba(0,0,0,.4));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 900;
  transition: transform 160ms ease, border-color 160ms ease;
}
.gms-art > span { transform: scale(var(--gms-zoom, 1)); }
.gms-card:hover .gms-art {
  border-color: var(--gms-accent, #6bff9e);
  transform: translateY(calc(-1 * var(--gms-hover-lift, 4px))) scale(var(--gms-hover-zoom, 1.08));
}
.gms-card strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--gms-label-color, #f4f8ff);
  font-size: var(--gms-label-size, 11px);
  font-weight: var(--gms-label-weight, 800);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 画布元素管理：为所有新增元素提供不依赖点击命中的安全入口。 */
.canvas-layer-manager { display: grid; gap: 0.8rem; }
.canvas-layer-manager-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid #dce8f7;
  border-radius: 16px;
  padding: 0.9rem 1rem;
  background: linear-gradient(135deg, #f6faff, #edf5ff);
}
.canvas-layer-manager-head > div { display: grid; gap: 0.25rem; }
.canvas-layer-manager-head strong { color: #173d72; font-size: 0.82rem; }
.canvas-layer-manager-head p { max-width: 660px; margin: 0; color: #667d9b; font-size: 0.7rem; line-height: 1.65; }
.canvas-layer-manager-head .badge { flex: 0 0 auto; }
.canvas-layer-list { display: grid; max-height: min(58vh, 520px); gap: 0.4rem; overflow: auto; padding-right: 0.15rem; }
.canvas-layer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 0.35rem;
  border: 1px solid #dce8f7;
  border-radius: 14px;
  padding: 0.38rem;
  background: #fff;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.canvas-layer-row:hover { border-color: #a9c9f3; background: #f8fbff; }
.canvas-layer-row.is-selected { border-color: #4c8ff4; background: #f1f7ff; box-shadow: 0 8px 22px rgba(37, 99, 235, 0.09); }
.canvas-layer-select {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  border: 0;
  border-radius: 10px;
  padding: 0.42rem 0.55rem;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.canvas-layer-select:hover { background: #edf5ff; }
.canvas-layer-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: #e8f1ff; font-size: 1rem; }
.canvas-layer-copy { display: grid; min-width: 0; gap: 0.1rem; }
.canvas-layer-copy strong { overflow: hidden; color: #16365f; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.canvas-layer-copy small { overflow: hidden; color: #8194ad; font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; }
.canvas-layer-current,
.canvas-layer-enter { flex: 0 0 auto; border-radius: 999px; padding: 0.18rem 0.48rem; font-size: 0.54rem; font-weight: 800; }
.canvas-layer-current { color: #1d4ed8; background: #dcecff; }
.canvas-layer-enter { color: #7a8da6; background: #f1f5fa; }
.canvas-layer-delete {
  display: grid;
  width: 42px;
  min-height: 38px;
  place-items: center;
  align-self: center;
  border: 1px solid #f0d8dc;
  border-radius: 11px;
  background: #fff7f8;
  color: #c73543;
  cursor: pointer;
}
.canvas-layer-delete:hover { border-color: #e9aab1; background: #ffedef; }
.canvas-layer-empty { border: 1px dashed #bed4f1; border-radius: 14px; padding: 1.2rem; background: #f8fbff; color: #7c91ad; font-size: 0.7rem; line-height: 1.7; text-align: center; }
@media (max-width: 720px) {
  .canvas-layer-manager-head { flex-direction: column; }
  .canvas-layer-select { grid-template-columns: 34px minmax(0, 1fr); }
  .canvas-layer-current, .canvas-layer-enter { display: none; }
}
.game-card-studio-fields { display: grid; gap: 0.55rem; max-height: 590px; overflow: auto; padding-right: 0.2rem; }
.gcs-group { border: 1px solid #dce8f7; border-radius: 14px; padding: 0.58rem 0.7rem; background: #fbfdff; }
.gcs-group summary { cursor: pointer; color: #1d446f; font-size: 0.68rem; font-weight: 850; }
.gcs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.58rem; }
.gcs-field { min-width: 0; }
.gcs-field > span { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; color: #5e7695; font-size: 0.56rem; }
.gcs-field > span b { color: #1d57b0; font-weight: 850; }
.gcs-field input[type="range"] { width: 100%; accent-color: #2563eb; }
.gcs-color-wrap { display: flex; align-items: center; gap: 0.4rem; border: 1px solid #dce7f5; border-radius: 9px; padding: 0.22rem 0.35rem; background: #fff; }
.gcs-color-wrap input[type="color"] { width: 34px; height: 26px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.gcs-color-wrap code { color: #7890ad; font-size: 0.54rem; }
.gcs-check-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.6rem; }
.gcs-check { min-height: 32px; border: 1px solid #dce8f7; border-radius: 9px; padding: 0.3rem 0.45rem; background: #fff; font-size: 0.57rem; }
.game-card-studio-actions { position: sticky; bottom: 0; z-index: 2; padding-top: 0.55rem; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 30%); }
@media (max-width: 1080px) {
  .game-card-studio-layout { grid-template-columns: 1fr; }
  .game-card-studio-preview-panel { position: static; }
  .game-card-studio-fields { max-height: none; }
}
@media (max-width: 620px) {
  .gcs-preview-grid, .gcs-grid, .gcs-check-row { grid-template-columns: 1fr; }
}

/* ===== v11 深色运营控制台：与前台黑蓝霓虹视觉统一 ===== */
:root {
  --theme-primary: #61f79a;
  --theme-deep: #0b5b35;
  --theme-soft: rgba(83, 255, 151, 0.1);
  --theme-accent: #c4ffd9;
  --ink: #e8f1ff;
  --ink-soft: #c9d8ea;
  --paper: #02060d;
  --panel: rgba(7, 17, 29, 0.92);
  --panel-soft: rgba(8, 22, 37, 0.74);
  --line: rgba(146, 184, 224, 0.16);
  --line-strong: rgba(146, 184, 224, 0.3);
  --muted: rgba(184, 204, 227, 0.66);
  --green: #61f79a;
  --green-bright: #a8ffc7;
  --lime: #c9ffdd;
  --amber: #f4c66a;
  --danger: #ff7f8b;
  --danger-soft: rgba(255, 95, 111, 0.12);
  --shadow: 0 24px 68px rgba(0, 0, 0, 0.38);
  --admin-green: #61f79a;
  --admin-green-soft: rgba(97, 247, 154, 0.12);
  --admin-green-line: rgba(97, 247, 154, 0.28);
  --admin-blue: #4da3ff;
  --admin-surface: rgba(7, 17, 29, 0.9);
  --admin-surface-raised: rgba(10, 24, 40, 0.96);
}

html { background: #02060d; }
body {
  color-scheme: dark;
  background:
    radial-gradient(circle at 12% 0%, rgba(50, 137, 255, 0.14), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgba(97, 247, 154, 0.09), transparent 28rem),
    linear-gradient(155deg, #030812 0%, #050d18 54%, #02060c 100%);
  color: var(--ink);
}

.admin-auth {
  background:
    radial-gradient(circle at 76% 20%, rgba(97, 247, 154, 0.13), transparent 25rem),
    radial-gradient(circle at 12% 84%, rgba(56, 132, 255, 0.18), transparent 32rem),
    #02060d;
}
.auth-atmosphere {
  background:
    linear-gradient(rgba(97, 247, 154, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(97, 247, 154, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 78% 18%, rgba(56, 189, 248, 0.13), transparent 26rem),
    radial-gradient(circle at 8% 90%, rgba(37, 99, 235, 0.18), transparent 34rem);
  background-size: 54px 54px, 54px 54px, auto, auto;
}
.auth-copy .eyebrow { color: var(--admin-green); }
.auth-card {
  border-color: rgba(97, 247, 154, 0.16);
  background: rgba(7, 17, 29, 0.94);
  color: var(--ink);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.auth-card-head h2, .auth-card h2 { color: #f4f9ff; }
.auth-card-head p, .auth-card > div > p, .auth-footnote { color: var(--muted); }
.auth-features > div { border-color: rgba(151, 184, 224, 0.14); background: rgba(255, 255, 255, 0.035); }
.auth-features b { color: var(--admin-green); }
.auth-features small { color: rgba(188, 205, 227, 0.5); }
.brand-mark, .boot-mark {
  background: linear-gradient(145deg, #9dffc1, #47e88a 58%, #1b9e5f);
  color: #02110a;
  box-shadow: 0 10px 26px rgba(44, 224, 127, 0.25);
}

.admin-shell {
  background:
    radial-gradient(circle at 96% 1%, rgba(56, 189, 248, 0.1), transparent 28rem),
    radial-gradient(circle at 4% 10%, rgba(97, 247, 154, 0.055), transparent 26rem),
    transparent;
}
.admin-topbar {
  border-bottom: 1px solid rgba(97, 247, 154, 0.12);
  background: linear-gradient(110deg, rgba(2, 7, 14, 0.98), rgba(5, 18, 28, 0.97));
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.36);
}
.topbar-brand .brand-mark.small {
  background: linear-gradient(145deg, #b2ffd0, #61f79a 54%, #1fb96d);
  color: #02110a;
  box-shadow: 0 10px 24px rgba(97, 247, 154, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.topbar-brand strong { color: #f4f9ff; }
.topbar-brand span { color: rgba(170, 201, 230, 0.52); }
.admin-identity {
  border-color: rgba(97, 247, 154, 0.16);
  background: rgba(97, 247, 154, 0.045);
}
.admin-topbar .level-badge {
  border-color: rgba(97, 247, 154, 0.3);
  background: rgba(97, 247, 154, 0.12);
  color: #bdffd4;
}
.admin-topbar .button-quiet:hover {
  border-color: rgba(97, 247, 154, 0.32);
  background: rgba(97, 247, 154, 0.1);
  color: #effff5;
}
.admin-topbar .danger-text { color: #ffb0b8 !important; }
.admin-topbar .danger-text:hover { background: rgba(255, 95, 111, 0.13); }

.admin-sidebar {
  background:
    radial-gradient(circle at 10% 0%, rgba(97, 247, 154, 0.095), transparent 17rem),
    radial-gradient(circle at 88% 18%, rgba(56, 132, 255, 0.08), transparent 20rem),
    linear-gradient(180deg, #06101d 0%, #040b14 64%, #02060d 100%);
  box-shadow: inset -1px 0 0 rgba(97, 247, 154, 0.08);
}
.admin-nav-hint { color: rgba(173, 200, 226, 0.46); }
.admin-nav-hint b {
  border-color: rgba(97, 247, 154, 0.2);
  background: rgba(97, 247, 154, 0.08);
  color: #bdffd4;
}
.admin-nav-group.is-active {
  border-color: rgba(97, 247, 154, 0.12);
  background: rgba(97, 247, 154, 0.04);
}
.admin-nav-group-head { color: rgba(203, 222, 242, 0.68); }
.admin-nav-group-head:hover { background: rgba(97, 247, 154, 0.055); color: #fff; }
.admin-nav-group.is-active .admin-nav-group-head { color: #f2fff7; }
.admin-nav-group-icon {
  background: rgba(97, 247, 154, 0.085);
  color: var(--admin-green);
}
.admin-nav-group.is-active .admin-nav-group-icon {
  background: linear-gradient(145deg, #a1ffc3, #46e88a 56%, #15945a);
  color: #03130b;
  box-shadow: 0 6px 16px rgba(50, 224, 130, 0.22);
}
.admin-nav-group-count {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(188, 209, 231, 0.5);
}
.admin-nav-group-chevron { color: rgba(169, 198, 226, 0.42); }
.admin-nav-subgroups {
  display: grid;
  gap: 0.22rem;
  max-height: 2200px;
  overflow: hidden;
  padding: 0.08rem 0 0.34rem;
  transition: max-height 220ms ease, opacity 160ms ease;
}
.admin-nav-group.is-collapsed .admin-nav-subgroups { max-height: 0; opacity: 0; }
.admin-nav-subgroup {
  border: 1px solid transparent;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.012);
}
.admin-nav-subgroup.is-active {
  border-color: rgba(97, 247, 154, 0.09);
  background: rgba(97, 247, 154, 0.025);
}
.admin-nav-subgroup-head {
  display: grid;
  width: 100%;
  min-height: 30px;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  border-radius: 9px;
  padding: 0.3rem 0.46rem 0.3rem 2.85rem;
  background: transparent;
  color: rgba(163, 188, 214, 0.56);
  text-align: left;
}
.admin-nav-subgroup-head:hover { background: rgba(255, 255, 255, 0.035); color: rgba(225, 240, 255, 0.9); }
.admin-nav-subgroup.is-active .admin-nav-subgroup-head { color: rgba(190, 255, 211, 0.9); }
.admin-nav-subgroup-label {
  overflow: hidden;
  font-size: 0.59rem;
  font-weight: 750;
  letter-spacing: 0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-nav-subgroup-count {
  min-width: 18px;
  border-radius: 999px;
  padding: 0 0.28rem;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(166, 192, 218, 0.5);
  font-size: 0.5rem;
  font-weight: 800;
  text-align: center;
}
.admin-nav-subgroup-chevron { color: rgba(166, 192, 218, 0.38); font-size: 0.58rem; transition: transform 160ms ease; }
.admin-nav-subgroup.is-collapsed .admin-nav-subgroup-chevron { transform: rotate(-90deg); }
.admin-nav-subgroup.is-collapsed > .admin-nav-subitems { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.admin-nav-subgroup .admin-nav-subitems { padding-left: 0.36rem; }
.nav-item { color: rgba(203, 222, 242, 0.62); }
.nav-item:hover { background: rgba(97, 247, 154, 0.065); color: #f2fff7; }
.nav-item.is-active {
  border-color: rgba(97, 247, 154, 0.25);
  background: linear-gradient(100deg, rgba(97, 247, 154, 0.18), rgba(56, 145, 255, 0.06));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--admin-green), 0 6px 18px rgba(0, 0, 0, 0.14);
}
.nav-index { background: rgba(255, 255, 255, 0.035); color: rgba(176, 201, 226, 0.52); }
.nav-item.is-active .nav-index {
  background: linear-gradient(145deg, #b5ffd1, #5cf396 58%, #1aa566);
  color: #03140b;
}
.nav-label { font-weight: 700; }
.sidebar-note {
  border-color: rgba(97, 247, 154, 0.14);
  background: linear-gradient(145deg, rgba(97, 247, 154, 0.075), rgba(56, 132, 255, 0.045));
}
.sidebar-note-mark { background: linear-gradient(145deg, #b9ffd4, #61f79a 56%, #1b9e5f); color: #02110a; }
.sidebar-note strong { color: #c8ffdd; }
.sidebar-note p { color: rgba(184, 207, 230, 0.5); }
.sidebar-footer { color: rgba(168, 195, 220, 0.32); }

.admin-main { color: #dce9f8; }
.admin-page-heading h1 { color: #f4f9ff; text-shadow: 0 0 28px rgba(97, 247, 154, 0.08); }
.admin-page-heading p { color: var(--muted); }
.eyebrow { color: var(--admin-green); }
.admin-content > * { min-width: 0; }

.panel,
.stat-card,
.toolbar,
.table-wrap,
.form-section,
.report-card,
.mini-stat,
.game-admin-card,
.rank-group-card,
.rank-editor-card,
.level-editor-card,
.mode-summary-card,
.service-order-row,
.banner-admin-card,
.theme-preset-card,
.asset-library-card,
.check-card,
.ui-page-card,
.mock-card,
.drawer-selector-card,
.game-mode-editor-card,
.rank-group-stats,
.order-stats {
  border-color: var(--line);
  background: var(--admin-surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}
.panel { backdrop-filter: blur(14px); }
.panel-head, .panel-heading { border-color: var(--line); }
.panel-head p, .panel-heading p { color: var(--muted); }
.image-preview-box, .rank-list, .upload-box, .asset-preview, .file-drop, .drawer-selector-list,
.ui-background-panel, .ui-background-overlay-panel, .ui-image-transform-panel, .review-form,
.mode-drawer-grid, .level-condition-grid, .service-order-list {
  border-color: var(--line);
  background: var(--panel-soft);
}
.upload-box { border-style: dashed; }
.image-preview-box { color: var(--muted); }
.game-cover, .mock-cover {
  background: linear-gradient(135deg, rgba(56, 132, 255, 0.18), rgba(97, 247, 154, 0.1));
  color: #c8ffdd;
}
.game-card-body, .mock-body, .asset-info { background: transparent; }
.game-meta, .asset-info span, .mock-body p { color: var(--muted); }

.field > span, .toolbar label > span, .check-row label, .check-line, .gcs-field > span, .drawer-section-title {
  color: rgba(186, 207, 230, 0.72);
}
.field input, .field select, .field textarea, .toolbar input, .toolbar select, .inline-input,
.gcs-color-wrap, .rank-list input, .rank-list select {
  border-color: var(--line-strong);
  background: rgba(3, 10, 18, 0.86);
  color: #eaf4ff;
}
.field input::placeholder, .field textarea::placeholder, .toolbar input::placeholder, .inline-input::placeholder { color: rgba(166, 190, 214, 0.36); }
.field input:focus, .field select:focus, .field textarea:focus, .toolbar input:focus, .toolbar select:focus, .inline-input:focus {
  border-color: rgba(97, 247, 154, 0.58);
  box-shadow: 0 0 0 3px rgba(97, 247, 154, 0.1);
}
.field select option, .toolbar select option { background: #07111d; color: #e8f1ff; }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.48; }
.toolbar label { min-width: 130px; }
.hint, .form-message, .cell-title span, .report-meta, .log-detail { color: var(--muted); }
.empty-state { color: var(--muted); }
.empty-state strong, .loading-state { color: #dce9f8; }

.button-primary, .admin-main .button-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #9dffc0, #61f79a 52%, #35dc82);
  color: #02130a;
  box-shadow: 0 10px 24px rgba(49, 219, 125, 0.2);
}
.button-primary:hover, .admin-main .button-primary:hover {
  background: linear-gradient(135deg, #c1ffd6, #79ffab 52%, #45ec92);
}
.button-secondary, .admin-main .button-secondary, .icon-button {
  border-color: var(--line-strong);
  background: rgba(10, 24, 38, 0.92);
  color: #dce9f8;
}
.button-secondary:hover, .admin-main .button-secondary:hover, .icon-button:hover {
  border-color: rgba(97, 247, 154, 0.42);
  background: rgba(97, 247, 154, 0.08);
  color: #effff5;
}
.admin-main .button-quiet {
  border-color: var(--line);
  background: rgba(10, 24, 38, 0.78);
  color: #dce9f8;
}
.admin-main .button-quiet:hover { border-color: rgba(97, 247, 154, 0.3); background: rgba(97, 247, 154, 0.07); }
.button-danger { background: linear-gradient(135deg, #ff8e98, #d83f53); color: #1e0306; }
.button-danger-soft { border-color: rgba(255, 127, 139, 0.28); background: rgba(255, 95, 111, 0.1); color: #ffb0b8; }
.green-text { color: #7dffae !important; }
.danger-text { color: #ff8e99 !important; }
.balance-low { color: #ffb45e !important; }

.table-wrap { overflow: auto; }
.data-table th, .data-table td { border-color: rgba(146, 184, 224, 0.11); }
.data-table th {
  background: #08141f;
  color: rgba(167, 194, 221, 0.72);
  backdrop-filter: blur(8px);
}
.data-table tbody tr:hover, .data-table tr:hover td { background: rgba(97, 247, 154, 0.045); }
.data-table td { color: rgba(222, 235, 249, 0.9); }
.cell-title strong, .cell-money { color: #edf6ff; }
.mono { color: rgba(194, 214, 236, 0.82); }

.badge { background: rgba(255, 255, 255, 0.06); color: rgba(205, 221, 240, 0.82); }
.badge.green { background: rgba(97, 247, 154, 0.11); color: #8fffb8; }
.badge.amber { background: rgba(244, 198, 106, 0.12); color: #ffd98c; }
.badge.red { background: rgba(255, 95, 111, 0.12); color: #ffabb3; }
.badge.blue { background: rgba(77, 163, 255, 0.13); color: #a7d0ff; }
.badge.dark { background: rgba(97, 247, 154, 0.12); color: #b9ffd2; }

.rate-note {
  border: 1px solid rgba(97, 247, 154, 0.16);
  background: rgba(97, 247, 154, 0.06);
  color: #c8f9d8;
}
.rate-note strong { color: #e3ffed; }
.report-head { border-color: var(--line); background: rgba(9, 22, 36, 0.92); }
.report-content { background: rgba(4, 12, 20, 0.74); color: #dce9f8; }
.evidence-link { border-color: rgba(97, 247, 154, 0.22); background: rgba(97, 247, 154, 0.07); color: #a8ffc7; }
.review-form { border-color: var(--line); }
.check-row input, .check-line input { accent-color: var(--admin-green); }
.stat-card span, .mini-stat span { color: var(--muted); }
.stat-card small { color: rgba(175, 198, 222, 0.52); }
.stat-card strong, .mini-stat strong { color: #f4f9ff; }

.modal-shell, .drawer-shell {
  border: 1px solid rgba(146, 184, 224, 0.18);
  background: #07111d;
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.55);
}
.modal-head, .drawer-head {
  border-color: var(--line);
  background: linear-gradient(100deg, rgba(8, 21, 35, 0.98), rgba(5, 14, 24, 0.98));
}
.modal-head h2, .drawer-head h2 { color: #f4f9ff; }
.modal-body, .drawer-body { background: #040b14; color: #dce9f8; }
.modal-actions { border-color: var(--line); }
.form-section { background: rgba(7, 17, 29, 0.94); }
.form-section-title strong { color: #eaf4ff; }
.form-section-title span { color: var(--muted); }
.admin-modal::backdrop, .admin-drawer::backdrop { background: rgba(0, 3, 8, 0.74); backdrop-filter: blur(5px); }
.admin-modal.modal-wide { width: min(1240px, calc(100% - 2rem)); }
.drawer-selector-card-head { border-color: var(--line); }

.visual-center-head {
  border-color: rgba(97, 247, 154, 0.16);
  background:
    radial-gradient(circle at 78% 12%, rgba(97, 247, 154, 0.16), transparent 18rem),
    radial-gradient(circle at 8% 100%, rgba(56, 132, 255, 0.19), transparent 24rem),
    linear-gradient(120deg, #061422, #081c30 54%, #06111d);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
}
.visual-center-head h2 { color: #f4f9ff; }
.visual-center-tab {
  border-color: var(--line-strong);
  background: rgba(9, 22, 36, 0.88);
  color: rgba(201, 220, 241, 0.74);
}
.visual-center-tab:hover { border-color: rgba(97, 247, 154, 0.32); background: rgba(97, 247, 154, 0.06); box-shadow: none; }
.visual-center-tab.is-active {
  background: linear-gradient(145deg, rgba(97, 247, 154, 0.2), rgba(56, 132, 255, 0.12));
  color: #f4fff8;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
.visual-center-tab-icon { background: rgba(97, 247, 154, 0.09); color: var(--admin-green); }
.visual-center-actions { background: rgba(3, 10, 18, 0.9); }
.visual-center-live-text { color: var(--muted); }
.visual-editor-panel { border-color: var(--line); background: var(--admin-surface); box-shadow: var(--shadow); }
.visual-editor-footer { background: rgba(5, 13, 22, 0.95); }
.visual-editor-canvas iframe { background: #050b13; }
.ui-style-preview { border-color: rgba(97, 247, 154, 0.2); }
.ui-slot-upload-row, .asset-library-card, .asset-library-preview { border-color: var(--line); background: var(--panel-soft); }
.theme-preset-card .badge { background: rgba(255, 255, 255, 0.06); }

.user-list-hint { margin: 0; }
.user-cell-link {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.user-cell-link:hover strong { color: #a8ffc7; }
.user-cell-avatar, .user-detail-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(97, 247, 154, 0.22);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(97, 247, 154, 0.2), rgba(56, 132, 255, 0.12));
  color: #d9ffe6;
  font-weight: 900;
}
.user-cell-avatar { width: 38px; height: 38px; }
.user-cell-copy { display: grid; min-width: 0; gap: 0.08rem; }
.user-cell-copy strong { color: #f4f9ff; font-size: 0.8rem; }
.user-cell-copy span { color: var(--muted); font-size: 0.61rem; }
.user-detail-hero {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.9rem;
  border: 1px solid rgba(97, 247, 154, 0.14);
  border-radius: 20px;
  padding: 1rem;
  background:
    radial-gradient(circle at 88% 10%, rgba(97, 247, 154, 0.12), transparent 18rem),
    linear-gradient(135deg, rgba(7, 20, 33, 0.98), rgba(4, 13, 22, 0.98));
}
.user-detail-avatar { width: 64px; height: 64px; border-radius: 18px; font-size: 1.5rem; }
.user-detail-copy { min-width: 0; }
.user-detail-copy h3 { margin: 0.18rem 0 0.4rem; color: #f5fbff; font-size: 1.35rem; letter-spacing: -0.035em; }
.user-detail-copy p { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.68rem; }
.user-detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; }
.user-detail-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.7rem;
}
.user-detail-metrics > div {
  display: grid;
  gap: 0.22rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.72rem 0.8rem;
  background: rgba(8, 20, 33, 0.86);
}
.user-detail-metrics span { color: var(--muted); font-size: 0.61rem; }
.user-detail-metrics strong { color: #f4f9ff; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.user-detail-metrics small { color: rgba(175, 198, 222, 0.48); font-size: 0.55rem; }
.user-detail-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.9rem 0 0.65rem; }
.user-detail-tab {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  background: rgba(9, 22, 36, 0.8);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}
.user-detail-tab b {
  min-width: 20px;
  border-radius: 999px;
  padding: 0 0.3rem;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(202, 221, 241, 0.74);
  font-size: 0.55rem;
  text-align: center;
}
.user-detail-tab:hover { border-color: rgba(97, 247, 154, 0.3); color: #effff5; }
.user-detail-tab.is-active {
  border-color: rgba(97, 247, 154, 0.36);
  background: rgba(97, 247, 154, 0.12);
  color: #c8ffdd;
}
.user-detail-tab.is-active b { background: rgba(97, 247, 154, 0.18); color: #d8ffe5; }
.user-detail-panel { display: grid; gap: 0.85rem; }
.user-detail-order-section { display: grid; gap: 0.5rem; }
.user-detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.user-detail-section-head > div { display: grid; gap: 0.12rem; }
.user-detail-section-head strong { color: #edf6ff; font-size: 0.78rem; }
.user-detail-section-head span { color: var(--muted); font-size: 0.62rem; }
.account-order-list { display: grid; gap: 0.5rem; }
.account-order-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(7, 18, 30, 0.9);
}
.account-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
  border-bottom: 1px solid var(--line);
  padding: 0.62rem 0.75rem;
  background: rgba(9, 23, 38, 0.78);
}
.account-order-head > div:first-child { display: grid; gap: 0.08rem; }
.account-order-head strong { color: #eaf6ff; font-size: 0.7rem; }
.account-order-head span { color: var(--muted); font-size: 0.58rem; }
.account-order-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0.68rem 0.75rem;
}
.account-order-grid > div { display: grid; gap: 0.12rem; min-width: 0; }
.account-order-grid span { color: var(--muted); font-size: 0.57rem; }
.account-order-grid strong { overflow: hidden; color: #dce9f8; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.account-order-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  border-top: 1px solid var(--line);
  padding: 0.55rem 0.75rem;
  background: rgba(4, 12, 20, 0.66);
}
.account-order-foot > span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 0.59rem; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1180px) {
  .user-detail-hero { grid-template-columns: 58px minmax(0, 1fr); }
  .user-detail-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .user-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .user-detail-hero { grid-template-columns: 1fr; }
  .user-detail-avatar { width: 54px; height: 54px; border-radius: 15px; }
  .user-detail-actions { grid-column: auto; }
  .user-detail-actions .button { flex: 1 1 46%; }
  .user-detail-metrics { grid-template-columns: 1fr; }
  .account-order-grid { grid-template-columns: 1fr; }
  .account-order-head { flex-direction: column; }
  .account-order-foot { align-items: flex-start; flex-direction: column; }
  .account-order-foot > span { white-space: normal; }
}

/* 编辑器内部同样使用深色玻璃层，预览画布保持真实前台效果 */
.visual-studio { background: #040b14; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42); }
.vi-shellbar {
  border-color: rgba(146, 184, 224, 0.14);
  background: rgba(5, 14, 24, 0.97);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.vi-brand-mark {
  background: linear-gradient(145deg, #b7ffd2, #61f79a 54%, #1fb96d);
  color: #02110a;
  box-shadow: 0 9px 22px rgba(97, 247, 154, 0.18);
}
.vi-page-picker select {
  border-color: var(--line-strong);
  background: #07131f;
  color: #eaf6ff;
}
.vi-icon-action, .vi-tool-action {
  border-color: var(--line-strong);
  background: rgba(10, 24, 38, 0.94);
  color: #c8d9eb;
}
.vi-icon-action:hover, .vi-tool-action:hover {
  border-color: rgba(97, 247, 154, 0.38);
  background: rgba(97, 247, 154, 0.08);
  color: #f2fff7;
}
.vi-tool-action.is-primary {
  background: linear-gradient(135deg, #9dffc0, #61f79a 55%, #33da81);
  color: #02130a;
  box-shadow: 0 8px 20px rgba(49, 219, 125, 0.18);
}
.vi-save-draft { border-color: rgba(97, 247, 154, 0.25); color: #bdffd4; }
.vi-mode-toggle { border-color: var(--line); background: rgba(3, 10, 18, 0.82); }
.vi-mode-toggle span { color: rgba(176, 199, 224, 0.62); }
.vi-mode-toggle input:not(:checked) ~ span[data-mode-label="preview"],
.vi-mode-toggle input:checked ~ span[data-mode-label="edit"] {
  background: rgba(97, 247, 154, 0.12);
  color: #c8ffdd;
  box-shadow: none;
}
.vi-shellbar .visual-dirty-state { background: rgba(255, 255, 255, 0.05); color: rgba(183, 204, 226, 0.66); }
.vi-shellbar .visual-dirty-state.is-dirty { background: rgba(244, 198, 106, 0.13); color: #ffd98c; }
.vi-material { background: #06101c; }
.vi-workspace.is-material-open .vi-material { border-color: var(--line); }
.vi-material-tabs { border-color: var(--line); background: rgba(8, 20, 33, 0.98); }
.vi-material-tabs button { color: rgba(178, 202, 226, 0.62); }
.vi-material-tabs button.is-active { background: rgba(97, 247, 154, 0.12); color: #c9ffdd; }
.vi-material-section-head strong { color: #eaf6ff; }
.vi-material-section-head small { color: var(--muted); }
.vi-material-grid button, .vi-material-module-list button, .vi-layout-options button {
  border-color: var(--line);
  background: rgba(9, 22, 36, 0.88);
  color: #c6d7e9;
}
.vi-material-grid button:hover, .vi-material-module-list button:hover, .vi-layout-options button:hover {
  border-color: rgba(97, 247, 154, 0.3);
  background: rgba(97, 247, 154, 0.07);
}
.vi-material-grid b, .vi-material-module-list b, .vi-layout-options b { color: #dce9f8; }
.vi-material-module-list button > span { color: var(--admin-green); }
.vi-material-module-list button > i, .vi-layout-options small { color: var(--muted); }
.vi-material-wide { border-color: rgba(97, 247, 154, 0.28); background: rgba(97, 247, 154, 0.06); color: #bdffd4; }
.vi-layout-options button.is-active { border-color: rgba(97, 247, 154, 0.3); background: rgba(97, 247, 154, 0.09); }
.vi-material-list button { background: rgba(8, 21, 35, 0.82); color: #c6d7e9; }
.vi-material-list button:hover { background: rgba(97, 247, 154, 0.07); }
.vi-material-list i, .vi-material-empty { color: var(--muted); }
.vi-material-handle { border-color: var(--line); background: #07131f; color: #b9d1e9; }
.vi-canvas-shell { background: #02060c; }
.vi-canvas-hint { border-color: var(--line); background: rgba(4, 12, 21, 0.94); color: #c7d8ea; }
.vi-canvas-hint small { color: var(--muted); }
.vi-canvas-shell .visual-editor-canvas { background: #02060c; }
.vi-statusbar { border-color: var(--line); background: #06101c; }
.vi-status-left { color: var(--muted); }
.vi-status-left strong { color: #e1efff; }
.vi-link-action { color: rgba(184, 205, 227, 0.7); }
.vi-link-action:hover { color: #a8ffc7; }
.vi-link-action.is-danger { color: #ff9aa4; }
.vi-onboarding {
  border-color: rgba(97, 247, 154, 0.16);
  background: rgba(6, 16, 28, 0.98);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.42);
}
.vi-onboarding-icon { background: rgba(97, 247, 154, 0.1); color: var(--admin-green); }
.vi-onboarding strong { color: #eaf6ff; }
.vi-onboarding p { color: var(--muted); }
.vi-onboarding button { background: rgba(97, 247, 154, 0.1); color: #c8ffdd; }
.vi-inspector-tabs { background: rgba(3, 10, 18, 0.82); }
.vi-inspector-tabs button { color: rgba(180, 203, 227, 0.64); }
.vi-inspector-tabs button.is-active { background: rgba(97, 247, 154, 0.12); color: #d4ffe3; box-shadow: none; }
.vi-inspector-group, .vi-inspector-block-note, .vi-settings-section, .vi-version-section {
  border-color: var(--line);
  background: rgba(8, 21, 35, 0.88);
}
.vi-inspector-label, .vi-inspector-block-note strong, .vi-settings-section > strong { color: #e3efff; }
.vi-inspector-block-note span, .vi-settings-section > p { color: var(--muted); }
.vi-style-presets button, .vi-segment-list button, .vi-settings-links button, .vi-version-list button {
  border-color: var(--line);
  background: rgba(8, 21, 35, 0.9);
  color: #c4d6e9;
}
.vi-style-presets button:hover, .vi-segment-list button:hover, .vi-settings-links button:hover, .vi-version-list button:hover {
  border-color: rgba(97, 247, 154, 0.28);
  background: rgba(97, 247, 154, 0.07);
  color: #effff5;
}
.vi-segment-list button.is-active { border-color: rgba(97, 247, 154, 0.32); background: rgba(97, 247, 154, 0.12); color: #c8ffdd; }
.vi-version-list small { color: var(--muted); }
.vi-version-section { border-top-color: var(--line); }
.visual-studio .ui-canvas-inspector {
  border-color: rgba(97, 247, 154, 0.16);
  background: rgba(5, 14, 24, 0.98);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48);
}
.visual-studio .ui-canvas-inspector-head { border-bottom-color: var(--line); }
.visual-studio .ui-canvas-inspector-head small { color: var(--muted); }
.visual-studio .ui-canvas-inspector-field > span { color: rgba(186, 207, 230, 0.72); }
.visual-studio .ui-canvas-inspector-field input,
.visual-studio .ui-canvas-inspector-field select,
.visual-studio .ui-canvas-inspector-field textarea {
  border-color: var(--line-strong);
  background: #030a13;
  color: #eaf4ff;
}
.visual-studio .ui-canvas-inspector-field input:focus,
.visual-studio .ui-canvas-inspector-field select:focus,
.visual-studio .ui-canvas-inspector-field textarea:focus {
  border-color: rgba(97, 247, 154, 0.55);
  box-shadow: 0 0 0 3px rgba(97, 247, 154, 0.1);
}
.vi-template-grid button { border-color: var(--line); background: rgba(8, 21, 35, 0.9); }
.vi-template-grid button:hover { border-color: rgba(97, 247, 154, 0.3); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
.vi-template-grid strong { color: #eaf6ff; }
.vi-template-grid small { color: var(--muted); }

/* ===== v12 交互层级与推广收入页 ===== */
.admin-nav-hint span::after {
  content: ' · 带编号可进入';
  color: rgba(151, 181, 210, 0.38);
  font-size: 0.5rem;
  font-weight: 600;
}
.admin-nav-subgroup-head {
  cursor: pointer;
  border-left: 2px solid rgba(146, 184, 224, 0.12);
}
.admin-nav-subgroup.is-active .admin-nav-subgroup-head {
  border-left-color: rgba(97, 247, 154, 0.42);
}
.admin-nav-subgroup-head:focus-visible,
.admin-nav-group-head:focus-visible,
.nav-item:focus-visible,
.button:focus-visible,
.user-detail-tab:focus-visible,
.user-cell-link:focus-visible {
  outline: 2px solid rgba(97, 247, 154, 0.74);
  outline-offset: 2px;
}
.nav-item {
  position: relative;
  padding-right: 1.9rem;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.nav-item::after {
  content: '›';
  position: absolute;
  right: 0.62rem;
  color: rgba(168, 196, 224, 0.34);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  transition: color 150ms ease, transform 150ms ease;
}
.nav-item:hover { border-left-color: rgba(97, 247, 154, 0.3); }
.nav-item:hover::after { color: #baffd1; transform: translateX(2px); }
.nav-item.is-active { border-left-color: var(--admin-green); }
.nav-item.is-active::after { color: #c8ffdd; }
.admin-nav-subgroup-head:hover .admin-nav-subgroup-chevron { color: rgba(200, 255, 221, 0.76); }

.button, .user-detail-tab, .user-cell-link, .admin-nav-group-head { cursor: pointer; }
.button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.46; box-shadow: none; }
.button-primary { box-shadow: 0 8px 20px rgba(49, 219, 125, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.button-secondary { border-left-color: rgba(77, 163, 255, 0.62); }
.button-secondary:hover { border-left-color: var(--admin-green); }
.button-mini { font-weight: 820; letter-spacing: 0.01em; }
.user-cell-link { border-radius: 10px; padding: 0.16rem 0.26rem; margin: -0.16rem -0.26rem; }
.user-cell-link:hover { background: rgba(97, 247, 154, 0.055); }
.user-cell-link::after {
  content: '查看';
  margin-left: 0.25rem;
  border: 1px solid rgba(97, 247, 154, 0.2);
  border-radius: 999px;
  padding: 0.12rem 0.3rem;
  color: rgba(174, 255, 201, 0.72);
  font-size: 0.52rem;
  font-weight: 800;
}

.stat-card, .user-detail-metrics > div, .account-order-card, .promotion-kpi, .promotion-user-row,
.data-table tbody tr { cursor: default; }
.stat-card:hover, .user-detail-metrics > div:hover { transform: none; }
.user-accounts-table td:last-child {
  border-left: 1px solid rgba(97, 247, 154, 0.1);
  background: rgba(97, 247, 154, 0.022);
}
.user-accounts-table th:last-child { color: #a8ffc7; }
.user-accounts-table .cell-actions { min-width: 218px; }

.admin-interaction-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-top: 0.62rem;
  border: 1px dashed rgba(146, 184, 224, 0.18);
  border-radius: 12px;
  padding: 0.58rem 0.7rem;
  background: rgba(5, 15, 25, 0.7);
  color: var(--muted);
  font-size: 0.6rem;
}
.admin-interaction-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.legend-dot-green { background: var(--admin-green); box-shadow: 0 0 8px rgba(97, 247, 154, 0.55); }
.legend-dot-blue { background: var(--admin-blue); box-shadow: 0 0 8px rgba(77, 163, 255, 0.45); }
.legend-dot-muted { background: rgba(184, 204, 227, 0.42); }

.promotion-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  overflow: hidden;
  border: 1px solid rgba(97, 247, 154, 0.18);
  border-radius: 18px;
  padding: 0.9rem 1rem;
  background:
    radial-gradient(circle at 92% 16%, rgba(97, 247, 154, 0.13), transparent 17rem),
    linear-gradient(120deg, rgba(7, 23, 34, 0.98), rgba(4, 13, 23, 0.98));
}
.promotion-banner > div:first-child { min-width: 0; }
.promotion-banner .eyebrow { display: block; margin-bottom: 0.18rem; color: #9dffc1; font-size: 0.58rem; }
.promotion-banner > div:first-child > strong { display: block; color: #f2fff7; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.2rem; letter-spacing: 0.08em; }
.promotion-banner p { max-width: 44rem; margin: 0.36rem 0 0; color: var(--muted); font-size: 0.64rem; line-height: 1.65; }
.promotion-banner-actions { display: grid; flex: 0 0 auto; justify-items: end; gap: 0.5rem; }
.promotion-referrer { max-width: 18rem; color: var(--muted); font-size: 0.61rem; text-align: right; }
.promotion-referrer strong { color: #dffbe9; }

.promotion-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}
.promotion-kpi {
  position: relative;
  display: grid;
  gap: 0.24rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.75rem 0.82rem;
  background: linear-gradient(145deg, rgba(8, 21, 35, 0.96), rgba(5, 14, 24, 0.94));
}
.promotion-kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: rgba(146, 184, 224, 0.24); }
.promotion-kpi.is-green::before { background: var(--admin-green); box-shadow: 0 0 14px rgba(97, 247, 154, 0.45); }
.promotion-kpi.is-cyan::before { background: #67e8f9; }
.promotion-kpi.is-blue::before { background: var(--admin-blue); }
.promotion-kpi.is-amber::before { background: var(--amber); }
.promotion-kpi span { color: var(--muted); font-size: 0.6rem; }
.promotion-kpi strong { color: #f4f9ff; font-size: 1rem; font-variant-numeric: tabular-nums; }
.promotion-kpi small { color: rgba(175, 198, 222, 0.54); font-size: 0.55rem; }

.promotion-section {
  display: grid;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.75rem;
  background: rgba(5, 14, 24, 0.72);
}
.promotion-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.promotion-section-head > div { display: grid; gap: 0.12rem; }
.promotion-section-head strong { color: #edf6ff; font-size: 0.76rem; }
.promotion-section-head span { color: var(--muted); font-size: 0.58rem; }
.promotion-user-list, .promotion-earning-list, .promotion-recharge-list { display: grid; gap: 0.42rem; }
.promotion-user-row {
  display: grid;
  grid-template-columns: 38px minmax(150px, 1.3fr) minmax(138px, 0.9fr) minmax(96px, 0.62fr) minmax(118px, 0.72fr) auto;
  align-items: center;
  gap: 0.62rem;
  border: 1px solid rgba(146, 184, 224, 0.12);
  border-radius: 13px;
  padding: 0.55rem 0.62rem;
  background: rgba(7, 18, 30, 0.88);
}
.promotion-user-main { display: grid; min-width: 0; gap: 0.06rem; }
.promotion-user-main strong { overflow: hidden; color: #eff8ff; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.promotion-user-main span, .promotion-user-main small { overflow: hidden; color: var(--muted); font-size: 0.55rem; text-overflow: ellipsis; white-space: nowrap; }
.promotion-user-status { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.promotion-user-status .badge { font-size: 0.51rem; }
.promotion-user-metric { display: grid; gap: 0.06rem; min-width: 0; }
.promotion-user-metric span, .promotion-user-metric small { color: var(--muted); font-size: 0.53rem; }
.promotion-user-metric strong { overflow: hidden; color: #e4f4ff; font-size: 0.65rem; text-overflow: ellipsis; white-space: nowrap; }

.promotion-earning-row {
  display: grid;
  grid-template-columns: minmax(135px, 1fr) auto minmax(100px, 0.7fr) minmax(110px, 0.55fr);
  align-items: center;
  gap: 0.62rem;
  border: 1px solid rgba(146, 184, 224, 0.12);
  border-radius: 12px;
  padding: 0.5rem 0.62rem;
  background: rgba(7, 18, 30, 0.86);
}
.promotion-earning-main, .promotion-earning-user, .promotion-earning-amount { display: grid; gap: 0.05rem; min-width: 0; }
.promotion-earning-main strong, .promotion-earning-user strong { overflow: hidden; color: #eaf6ff; font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; }
.promotion-earning-main span, .promotion-earning-user span { color: var(--muted); font-size: 0.53rem; }
.promotion-earning-amount { justify-items: end; }
.promotion-earning-amount strong { color: #a8ffc7; font-size: 0.68rem; }
.promotion-earning-amount span { color: var(--muted); font-size: 0.53rem; }
.promotion-cleared-note { grid-column: 1 / -1; color: #ffabb3; font-size: 0.55rem; }

.promotion-recharge-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(180px, 1.5fr) auto;
  align-items: center;
  gap: 0.62rem;
  border: 1px solid rgba(146, 184, 224, 0.12);
  border-radius: 12px;
  padding: 0.5rem 0.62rem;
  background: rgba(7, 18, 30, 0.86);
}
.promotion-recharge-row > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-width: 0; }
.promotion-recharge-row > div:first-child { display: grid; gap: 0.08rem; }
.promotion-recharge-row strong { color: #a8ffc7; font-size: 0.7rem; }
.promotion-recharge-row span, .promotion-recharge-row small { color: var(--muted); font-size: 0.55rem; }
.promotion-recharge-row small { text-align: right; }

@media (max-width: 980px) {
  .promotion-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promotion-user-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .promotion-user-status, .promotion-user-metric { grid-column: 2 / -1; }
  .promotion-user-row > .button { grid-column: 3; grid-row: 1; }
  .promotion-earning-row { grid-template-columns: minmax(0, 1fr) auto; }
  .promotion-earning-user { grid-column: 1; }
  .promotion-earning-amount { grid-column: 2; grid-row: 1 / span 2; }
  .promotion-recharge-row { grid-template-columns: 1fr; }
  .promotion-recharge-row small { text-align: left; }
}
@media (max-width: 760px) {
  .promotion-banner { flex-direction: column; }
  .promotion-banner-actions { justify-items: start; }
  .promotion-referrer { text-align: left; }
  .promotion-kpis { grid-template-columns: 1fr; }
  .promotion-user-row { grid-template-columns: 38px minmax(0, 1fr); }
  .promotion-user-row > .button { grid-column: 1 / -1; width: 100%; }
  .promotion-user-status, .promotion-user-metric { grid-column: 1 / -1; }
  .promotion-earning-row { grid-template-columns: 1fr; }
  .promotion-earning-amount { grid-column: 1; grid-row: auto; justify-items: start; }
  .admin-interaction-legend { font-size: 0.56rem; }
}

/* v13 深色编辑工作台：去掉预览白底与白色工具栏，避免出现看不清内容的白色空框 */
.visual-preview-stage {
  background: #060c14;
}

.visual-preview-stage iframe {
  background: #060c14;
}

.visual-preview-loading {
  background: rgba(6, 12, 20, 0.94);
  color: rgba(198, 216, 235, 0.8);
}

.visual-preview-loading strong {
  color: #eaf3ff;
}

.visual-editor-footer {
  border-top-color: rgba(97, 247, 154, 0.16);
  background: #070f18;
  color: rgba(198, 216, 235, 0.78);
}

.ui-canvas-commandbar {
  border-color: rgba(97, 247, 154, 0.22);
  background: rgba(7, 15, 24, 0.94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.ui-icon-button {
  color: #d3e3f4;
}

.ui-icon-button:hover,
.ui-icon-button:focus-visible {
  border-color: rgba(97, 247, 154, 0.34);
  background: rgba(97, 247, 154, 0.12);
  color: #eafff2;
}

.ui-icon-divider {
  background: rgba(151, 180, 216, 0.22);
}