/* AutoMods 皮肤层
 *
 * 全站的颜色、圆角、阴影都从 tokens.css 的令牌走。这份文件在每一页最后加载（排在
 * 页面自己的样式表之后），只写两类东西：
 *
 *   1. html[data-skin="…"] 上的令牌重定义
 *   2. 组件形状覆盖 —— 令牌管不到的（边框、按钮长相、背包格子、动效）
 *
 * 三个皮肤：
 *   classic  经典。一条规则都没有；选它 = 2026-09 之前的样子。
 *   studio   工坊。默认。颜色一律沿用站里那套绿（老板要求色系不动），改的是"长相语言"：
 *            按钮、卡片、格子都按 Minecraft GUI 的样子来——顶部一线高光、底下一条
 *            实心投影、直角偏多；产物区是真的背包格子；入口和文件图标是像素画；
 *            加了一层克制的动效（卡片浮起、格子弹出、成品闪一下、logo 像掉落物一样浮动）。
 *   pixel    像素。更狠一步：全站直角、粗描边、硬投影、石砖底纹。
 *
 * skin.js 在 <head> 里同步写 html[data-skin]，首屏不会先闪经典再换。
 * 像素图标本体在 mc-icons.js。 */


/* ==================================================================
   通用：像素图标的盒子（三套皮肤都用）
   ================================================================== */

.mc-ico {
  display: inline-grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -.22em;
  flex: none;
}
.mc-ico svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
.new-project .mc-ico { width: 1.35em; height: 1.35em; margin-right: 2px; vertical-align: -.3em; }
.bf-cover-fallback .mc-ico { width: 64px; height: 64px; }
.bf-empty > i .mc-ico, .bf-stage-empty > i .mc-ico, #vaultEmptyIcon .mc-ico { width: 52px; height: 52px; }
.bf-search > i .mc-ico { width: 16px; height: 16px; vertical-align: -3px; }
.bf-navlink .mc-ico, .add-menu button > i .mc-ico { width: 18px; height: 18px; }
.add-menu button > i .mc-ico { width: 22px; height: 22px; }
.hx-starters button .mc-ico { width: 16px; height: 16px; margin-right: 3px; }
.tree-icon .mc-ico { width: 18px; height: 18px; }
.jar-card i .mc-ico { width: 24px; height: 24px; }
.bf-cover-fallback, .bf-empty > i, .bf-stage-empty > i { line-height: 0; }


/* ==================================================================
   个人中心里的「外观样式」面板（不分皮肤）
   ================================================================== */

.appearance-panel > header { flex-wrap: wrap; align-items: center; }
.appearance-theme {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-sunken);
}
.appearance-theme button {
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.appearance-theme button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
.appearance-skins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.appearance-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.appearance-card:hover { transform: translateY(-2px); border-color: var(--border-hover); box-shadow: var(--shadow-pop); }
.appearance-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.appearance-card > b { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; }
.appearance-card > b small {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
}
.appearance-card > small { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.appearance-card.is-on > b::after { content: '当前'; margin-left: auto; color: var(--accent); font-size: 11px; font-weight: 700; }

/* 缩略预览：一个小窗口，左侧栏 + 主区。每套皮肤用自己的样子画，不受当前皮肤影响。 */
.appearance-preview {
  --ap-page: #f8faf7; --ap-side: #fbfcfa; --ap-line: #dfe5dc; --ap-accent: #35792a; --ap-text: #172016;
  --ap-radius: 3px; --ap-btn-radius: 2px; --ap-shadow: none;
  position: relative;
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 6px;
  aspect-ratio: 16 / 10;
  padding: 8px;
  border: 1px solid var(--ap-line);
  border-radius: calc(var(--ap-radius) * 2.5);
  background: var(--ap-page);
  overflow: hidden;
}
.appearance-preview[data-preview="studio"] {
  --ap-page: #f3f6f1; --ap-side: #ffffff; --ap-line: #cbd3c6; --ap-accent: #35792a; --ap-text: #172016;
  --ap-radius: 4px; --ap-btn-radius: 2px; --ap-shadow: 0 2px 0 #cbd3c6;
}
.appearance-preview[data-preview="pixel"] {
  --ap-page: #d9d4c7; --ap-side: #f1ede2; --ap-line: #3a3a3a; --ap-accent: #2f7a1f; --ap-text: #1b1b1b;
  --ap-radius: 0px; --ap-btn-radius: 0px; --ap-shadow: 2px 2px 0 #3a3a3a;
}
.appearance-preview i {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 6px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  background: var(--ap-side);
  box-shadow: var(--ap-shadow);
}
.appearance-preview .ap-main { background: color-mix(in srgb, var(--ap-side) 70%, var(--ap-page)); grid-template-rows: auto 1fr 1fr auto; }
.appearance-preview b { display: block; height: 9px; border-radius: var(--ap-btn-radius); background: var(--ap-accent); box-shadow: var(--ap-shadow); }
.appearance-preview u { display: block; height: 5px; border-radius: var(--ap-btn-radius); background: color-mix(in srgb, var(--ap-text) 14%, transparent); }
.appearance-preview em { display: block; height: 6px; width: 55%; border-radius: var(--ap-btn-radius); background: color-mix(in srgb, var(--ap-text) 30%, transparent); }
.appearance-preview s { display: block; height: 4px; border-radius: var(--ap-btn-radius); background: color-mix(in srgb, var(--ap-text) 10%, transparent); text-decoration: none; }
.appearance-preview .ap-input { width: 100%; height: 12px; border: 1px solid var(--ap-line); background: var(--ap-side); position: relative; }
.appearance-preview .ap-input::after { content: ''; position: absolute; right: 2px; top: 2px; width: 7px; height: 6px; border-radius: var(--ap-btn-radius); background: var(--ap-accent); }
.appearance-preview[data-preview="pixel"] i { border-width: 2px; }
.appearance-preview[data-preview="classic"] b { box-shadow: none; }
@media (max-width: 760px) {
  .appearance-skins { grid-template-columns: 1fr; }
}


/* ==================================================================
   studio · 令牌
   颜色不动（沿用 tokens.css 那套绿）。这里只定形状、阴影，以及 MC GUI 那几种灰。
   ================================================================== */

html[data-skin="studio"] {
  --radius: 8px;
  --radius-sm: 5px;

  --shadow-card: 0 1px 0 rgba(23, 32, 22, .05), 0 6px 18px -12px rgba(23, 32, 22, .22);
  --shadow-pop: 0 12px 32px -14px rgba(23, 32, 22, .32), 0 2px 0 rgba(23, 32, 22, .06);
  --shadow-modal: 0 32px 80px -24px rgba(23, 32, 22, .4), 0 8px 24px -12px rgba(23, 32, 22, .18);

  /* MC 按钮 / 卡片的斜面用色 */
  --sk-outline: #1f2a1c;                                                      /* 深描边 */
  --sk-hi: rgba(255, 255, 255, .85);                                          /* 顶部高光 */
  --sk-lo: color-mix(in srgb, var(--text) 16%, transparent);                  /* 底部压暗 */
  --sk-edge: #b9c4b3;                                                         /* 卡片下沿实心投影 */
  --sk-accent-hi: color-mix(in srgb, var(--accent) 62%, #ffffff);
  --sk-accent-lo: color-mix(in srgb, var(--accent) 68%, #000000);
  --sk-glow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 55%, transparent);

  /* 背包 / 工作台那张 GUI 的灰：原版就是这几个数 */
  --mc-panel: #c6c6c6;
  --mc-panel-hi: #ffffff;
  --mc-panel-lo: #555555;
  --mc-panel-edge: #000000;
  --mc-slot: #8b8b8b;
  --mc-slot-hi: #ffffff;
  --mc-slot-lo: #373737;
  --mc-title: #3f3f3f;
  --mc-tab: #c6c6c6;
  --mc-tab-on: #e6e6e6;
}

html[data-skin="studio"][data-theme="dark"] {
  --shadow-card: 0 1px 0 rgba(0, 0, 0, .4), 0 8px 22px -12px rgba(0, 0, 0, .7);
  --shadow-pop: 0 14px 36px -14px rgba(0, 0, 0, .8), 0 2px 0 rgba(0, 0, 0, .5);
  --shadow-modal: 0 40px 100px -24px rgba(0, 0, 0, .85);

  --sk-outline: #0a0d09;
  --sk-hi: rgba(255, 255, 255, .1);
  --sk-lo: rgba(0, 0, 0, .45);
  --sk-edge: #0b0f0b;
  --sk-accent-hi: color-mix(in srgb, var(--accent) 70%, #ffffff);
  --sk-accent-lo: color-mix(in srgb, var(--accent) 55%, #000000);

  --mc-panel: #303030;
  --mc-panel-hi: #4d4d4d;
  --mc-panel-lo: #0f0f0f;
  --mc-panel-edge: #000000;
  --mc-slot: #1e1e1e;
  --mc-slot-hi: #3d3d3d;
  --mc-slot-lo: #0a0a0a;
  --mc-title: #d6d6d6;
  --mc-tab: #303030;
  --mc-tab-on: #454545;
}


/* ==================================================================
   studio · 基础与动效关键帧
   ================================================================== */

html[data-skin="studio"] body { -webkit-font-smoothing: antialiased; }
html[data-skin="studio"] ::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
html[data-skin="studio"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-skin="studio"] ::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background: color-mix(in srgb, var(--text-muted) 45%, transparent);
  background-clip: padding-box;
}
html[data-skin="studio"] ::-webkit-scrollbar-track { background: transparent; }

@keyframes sk-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes sk-pop {
  from { opacity: 0; transform: scale(.7); }
  60% { transform: scale(1.06); }
  to { opacity: 1; transform: none; }
}
@keyframes sk-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}
@keyframes sk-shine {
  from { transform: translateX(-130%) skewX(-18deg); }
  to { transform: translateX(230%) skewX(-18deg); }
}
@keyframes sk-stripes {
  to { background-position: 28px 0; }
}
@keyframes sk-glow {
  0%, 100% { box-shadow: 0 2px 0 var(--sk-outline), 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
  50% { box-shadow: 0 2px 0 var(--sk-outline), 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@keyframes sk-block {
  0% { transform: rotate(0) scale(1); border-radius: 2px; }
  40% { transform: rotate(90deg) scale(.82); border-radius: 30%; }
  50% { transform: rotate(90deg) scale(.82); }
  90% { transform: rotate(180deg) scale(1); border-radius: 2px; }
  100% { transform: rotate(180deg) scale(1); }
}
@keyframes sk-drop {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: none; }
}


/* ==================================================================
   studio · MC 按钮
   原版按钮：深描边、顶部一线高光、底下一截压暗、点下去整颗下沉。站里简洁模式原来
   那套像素按钮就是这个意思，这里统一规格、推广到每一页、去掉过重的 3px 黑边。
   ================================================================== */

html[data-skin="studio"] .new-project,
html[data-skin="studio"] .create-actions .asset-create,
html[data-skin="studio"] .balance,
html[data-skin="studio"] .activity-link,
html[data-skin="studio"] .workbench-link,
html[data-skin="studio"] .hx-legacy,
html[data-skin="studio"] .hx-flag,
html[data-skin="studio"] .hx-id,
html[data-skin="studio"] .hx-stop,
html[data-skin="studio"] .hx-attach,
html[data-skin="studio"] .attach,
html[data-skin="studio"] .send,
html[data-skin="studio"] .primary,
html[data-skin="studio"] .plan-build,
html[data-skin="studio"] .modal-actions button,
html[data-skin="studio"] .failure-dialog header button,
html[data-skin="studio"] .failure-button,
html[data-skin="studio"] .retry-button,
html[data-skin="studio"] .escalate-button,
html[data-skin="studio"] .download,
html[data-skin="studio"] .primary-button,
html[data-skin="studio"] .ghost-button,
html[data-skin="studio"] .bf-btn,
html[data-skin="studio"] .studio-go,
html[data-skin="studio"] .mc-btn,
html[data-skin="studio"] .package-card > button,
html[data-skin="studio"] .point-card button,
html[data-skin="studio"] .redeem-card form button,
html[data-skin="studio"] .assets-open,
html[data-skin="studio"] .bundle-get {
  border: 2px solid var(--sk-outline);
  border-radius: 3px;
  background: linear-gradient(var(--sk-hi) 0 2px, transparent 2px) , var(--surface);
  color: var(--text);
  box-shadow: inset 0 -3px 0 var(--sk-lo), 0 2px 0 var(--sk-outline);
  text-shadow: none;
  font-weight: 700;
  letter-spacing: 0;
  transform: none;
  transition: transform .1s ease, box-shadow .1s ease, filter .15s ease, background .15s ease;
}
html[data-skin="studio"] .new-project:hover,
html[data-skin="studio"] .create-actions .asset-create:hover,
html[data-skin="studio"] .balance:hover,
html[data-skin="studio"] .activity-link:hover,
html[data-skin="studio"] .workbench-link:hover,
html[data-skin="studio"] .hx-legacy:hover,
html[data-skin="studio"] .hx-attach:hover,
html[data-skin="studio"] .attach:hover,
html[data-skin="studio"] .modal-actions button:hover,
html[data-skin="studio"] .failure-dialog header button:hover,
html[data-skin="studio"] .ghost-button:hover,
html[data-skin="studio"] .bf-btn:hover,
html[data-skin="studio"] .mc-btn:hover:not(:disabled),
html[data-skin="studio"] .package-card > button:hover,
html[data-skin="studio"] .point-card button:hover,
html[data-skin="studio"] .assets-open:hover,
html[data-skin="studio"] .bundle-get:hover {
  color: var(--text);
  background: linear-gradient(var(--sk-hi) 0 2px, transparent 2px), var(--surface-hover);
  border-color: var(--sk-outline);
  transform: translateY(-1px);
  box-shadow: inset 0 -3px 0 var(--sk-lo), 0 3px 0 var(--sk-outline);
  filter: none;
}
/* 强调色那一档：新建、发送、主操作 */
html[data-skin="studio"] .create-actions #newProject,
html[data-skin="studio"] .send,
html[data-skin="studio"] .primary,
html[data-skin="studio"] .plan-build,
html[data-skin="studio"] .modal-actions .primary,
html[data-skin="studio"] .download,
html[data-skin="studio"] .retry-button,
html[data-skin="studio"] .primary-button,
html[data-skin="studio"] .bf-btn--primary,
html[data-skin="studio"] .studio-go,
html[data-skin="studio"] .mc-btn.primary,
html[data-skin="studio"] .mc-btn.is-on,
html[data-skin="studio"] .package-card.featured > button,
html[data-skin="studio"] .bf-chip.is-active {
  background: linear-gradient(var(--sk-accent-hi) 0 2px, transparent 2px), var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 -3px 0 var(--sk-accent-lo), 0 2px 0 var(--sk-outline), var(--sk-glow);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
html[data-skin="studio"] .create-actions #newProject:hover,
html[data-skin="studio"] .send:hover:not(:disabled),
html[data-skin="studio"] .primary:hover:not(:disabled),
html[data-skin="studio"] .plan-build:hover:not(:disabled),
html[data-skin="studio"] .modal-actions .primary:hover,
html[data-skin="studio"] .download:hover,
html[data-skin="studio"] .primary-button:hover,
html[data-skin="studio"] .bf-btn--primary:hover,
html[data-skin="studio"] .studio-go:hover:not(:disabled),
html[data-skin="studio"] .mc-btn.primary:hover:not(:disabled),
html[data-skin="studio"] .package-card.featured > button:hover {
  background: linear-gradient(var(--sk-accent-hi) 0 2px, transparent 2px), var(--accent-hover);
  color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow: inset 0 -3px 0 var(--sk-accent-lo), 0 3px 0 var(--sk-outline), var(--sk-glow);
  filter: none;
}
html[data-skin="studio"] .failure-button { color: var(--danger); background: linear-gradient(var(--sk-hi) 0 2px, transparent 2px), var(--danger-soft); }
html[data-skin="studio"] .escalate-button { color: var(--warn); background: linear-gradient(var(--sk-hi) 0 2px, transparent 2px), var(--warn-soft); }
html[data-skin="studio"] .hx-stop { color: var(--danger); background: linear-gradient(var(--sk-hi) 0 2px, transparent 2px), var(--danger-soft); }
html[data-skin="studio"] .hx-flag.busy { color: var(--accent); background: linear-gradient(var(--sk-hi) 0 2px, transparent 2px), var(--accent-soft); }
/* 点下去：整颗按钮下沉，底下那条投影没了 */
html[data-skin="studio"] .new-project:active,
html[data-skin="studio"] .create-actions .asset-create:active,
html[data-skin="studio"] .balance:active,
html[data-skin="studio"] .activity-link:active,
html[data-skin="studio"] .send:active:not(:disabled),
html[data-skin="studio"] .primary:active:not(:disabled),
html[data-skin="studio"] .plan-build:active:not(:disabled),
html[data-skin="studio"] .modal-actions button:active,
html[data-skin="studio"] .primary-button:active,
html[data-skin="studio"] .ghost-button:active,
html[data-skin="studio"] .bf-btn:active,
html[data-skin="studio"] .studio-go:active:not(:disabled),
html[data-skin="studio"] .mc-btn:active:not(:disabled),
html[data-skin="studio"] .hx-attach:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 0 var(--sk-lo);
}
/* 空白屏上的一键示例：这是"给你几个点子"的轻提示，不是主操作，别套黑描边的
   石头按钮，做成浅色小片就够了 */
html[data-skin="studio"] .hx-starters button {
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-secondary);
  box-shadow: 0 2px 0 var(--sk-edge);
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
}
html[data-skin="studio"] .hx-starters button:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--sk-edge);
}
html[data-skin="studio"] .hx-starters button:active { transform: translateY(1px); box-shadow: 0 0 0 var(--sk-edge); }
html[data-skin="studio"] .primary::after, html[data-skin="studio"] .plan-build::after { content: none; }
html[data-skin="studio"] .primary:disabled, html[data-skin="studio"] .send:disabled, html[data-skin="studio"] .primary-button:disabled { filter: grayscale(.6); opacity: .5; box-shadow: 0 2px 0 var(--sk-outline); }
html[data-skin="studio"] .bf-btn--sm { padding: 6px 11px; }
html[data-skin="studio"] .bf-chip {
  border: 2px solid var(--sk-outline);
  border-radius: 3px;
  box-shadow: 0 2px 0 var(--sk-outline);
  font-weight: 600;
}
html[data-skin="studio"] .bf-chip:hover { transform: translateY(-1px); }
/* 侧栏四个入口的色相（贴图绿 / 建模紫 / 市场蓝 / 资产橙）沿用 simple.css 定义的令牌 */
html[data-skin="studio"] .create-actions .asset-create {
  --entry: var(--entry-green);
  background: linear-gradient(rgba(255, 255, 255, .35) 0 2px, transparent 2px), var(--entry);
  color: #fff;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--entry) 60%, #000), 0 2px 0 var(--sk-outline);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
html[data-skin="studio"] .create-actions .model-create { --entry: var(--entry-violet); }
html[data-skin="studio"] .create-actions .market-create { --entry: var(--entry-blue); }
html[data-skin="studio"] .create-actions .assets-create { --entry: var(--entry-amber); }
html[data-skin="studio"] .create-actions .asset-create:hover {
  color: #fff;
  background: linear-gradient(rgba(255, 255, 255, .45) 0 2px, transparent 2px), color-mix(in srgb, var(--entry) 88%, #fff);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--entry) 60%, #000), 0 3px 0 var(--sk-outline);
}
html[data-skin="studio"] .create-actions .asset-create .mc-ico { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
html[data-skin="studio"] .create-actions #newProject { padding: 11px 12px; text-align: center; font-size: 14px; }


/* ==================================================================
   studio · 对话制作 / 简洁模式的骨架
   ================================================================== */

/* 卡片：1px 边 + 顶部一线高光 + 底下 3px 实心边，像一块摆在桌上的方块 */
@media (min-width: 761px) {
  html[data-skin="studio"] .shell .sidebar,
  html[data-skin="studio"] .shell .project-view {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: inset 0 1px 0 var(--sk-hi), 0 3px 0 var(--sk-edge), var(--shadow-card);
    overflow: hidden;
  }
  html[data-skin="studio"] .shell .sidebar { margin: 12px 0 15px 12px; animation: sk-rise .45s cubic-bezier(.2, .7, .2, 1) both; }
  html[data-skin="studio"] .shell .sidebar.closed { margin-left: calc(-276px - 12px); }
  html[data-skin="studio"] .shell .main { padding: 12px 12px 15px; }
  html[data-skin="studio"] .shell .project-view { animation: sk-rise .45s cubic-bezier(.2, .7, .2, 1) .06s both; }
  html[data-skin="studio"] .shell .project-content { border-top: 0; }
  html[data-skin="studio"] .shell .chat-column { border-right-color: var(--border); }
}
html[data-skin="studio"] .sidebar header {
  height: 58px;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
}
html[data-skin="studio"] .history-icon { font-size: 20px; }
html[data-skin="studio"] .icon { border-radius: 5px; }
html[data-skin="studio"] .create-actions { margin: 12px 14px 10px; gap: 8px; }

/* 项目列表：选中项左边一条绿，像被选中的物品栏格 */
html[data-skin="studio"] .sidebar .project-item {
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 12px;
  transition: background .15s ease, transform .15s ease;
}
html[data-skin="studio"] .sidebar .project-item:hover { background: var(--surface-hover); transform: translateX(2px); }
html[data-skin="studio"] .sidebar .project-item.active { border-left-color: var(--accent); background: var(--accent-soft); }
html[data-skin="studio"] .sidebar .project-item b { font-size: 13.5px; font-weight: 600; }

/* 顶栏 */
html[data-skin="studio"] .topbar { height: 58px; padding: 0 12px 0 16px; gap: 8px; }
html[data-skin="studio"] .topbar > b { font-size: 15px; font-weight: 700; }
html[data-skin="studio"] .balance,
html[data-skin="studio"] .activity-link,
html[data-skin="studio"] .workbench-link,
html[data-skin="studio"] .hx-legacy,
html[data-skin="studio"] .hx-flag,
html[data-skin="studio"] .hx-id { padding: 6px 12px; font-size: 12.5px; }
html[data-skin="studio"] .balance { font-variant-numeric: tabular-nums; }
html[data-skin="studio"] .avatar {
  border-radius: 4px;
  border: 2px solid var(--sk-outline);
  box-shadow: 0 2px 0 var(--sk-outline);
  background: linear-gradient(var(--sk-accent-hi) 0 2px, transparent 2px), var(--accent);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  font-weight: 700;
}
/* 进度条已经是 MC 经验条（hx.css .hx-xp），三套皮肤共用；工坊只把点开的清单卡
   换成这套皮肤的方角描边样子 */
html[data-skin="studio"] .hx-xp-list {
  border: 2px solid var(--sk-outline);
  border-radius: 4px;
  box-shadow: 0 3px 0 var(--sk-outline);
}
html[data-skin="pixel"] .hx-xp-list { border-radius: 0 }

/* 空白屏：logo 就是一张像素画，不加框、不浮动——框和晃动都只会让它像个卡住的
   掉落物。留一道很轻的硬投影贴住地面就行；标题带一层像素投影 */
html[data-skin="studio"] .hero-brand .cube-logo {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  animation: none;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 color-mix(in srgb, var(--text) 12%, transparent));
}
html[data-skin="studio"] .hero-brand h1 {
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--text);
  text-shadow: 3px 3px 0 var(--accent-soft), 4px 4px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
html[data-skin="studio"] .hero > p { color: var(--text-secondary); font-size: 15px; }

/* 输入框 */
html[data-skin="studio"] .composer {
  border: 2px solid var(--sk-outline);
  border-radius: 6px;
  padding: 14px 14px 10px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--sk-hi), 0 4px 0 var(--sk-outline), var(--shadow-card);
  transition: box-shadow .18s ease, border-color .18s ease;
}
html[data-skin="studio"] .chat-column.blank .dock .composer { border-style: solid; border-radius: 8px; }
html[data-skin="studio"] .composer:focus-within {
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 var(--sk-hi), 0 4px 0 var(--accent-active), 0 0 0 4px var(--focus-ring);
}
html[data-skin="studio"] .composer textarea { font-size: 15px; line-height: 1.6; }
html[data-skin="studio"] .send { width: 40px; height: 40px; font-size: 18px; }
html[data-skin="studio"] .composer.writing .send { animation: sk-glow 1.8s ease-in-out infinite; }
html[data-skin="studio"] .send.stopping { background: var(--danger); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--danger) 60%, #000), 0 2px 0 var(--sk-outline); }
html[data-skin="studio"] .hx-attach, html[data-skin="studio"] .attach { height: 36px; }
html[data-skin="studio"] .hx-attach[aria-expanded="true"] { background: linear-gradient(var(--sk-hi) 0 2px, transparent 2px), var(--accent-soft); color: var(--accent); }
html[data-skin="studio"] .model-switch-trigger,
html[data-skin="studio"] .hx-ctx { border-radius: 4px; border-color: var(--border-strong); background: var(--surface-sunken); }
html[data-skin="studio"] .model-switch-menu,
html[data-skin="studio"] .add-menu,
html[data-skin="studio"] .file-mention-menu {
  border: 2px solid var(--sk-outline);
  border-radius: 6px;
  box-shadow: 0 4px 0 var(--sk-outline), var(--shadow-modal);
  animation: sk-drop .16s ease both;
}
html[data-skin="studio"] .model-switch-menu > button { border-radius: 4px; }
html[data-skin="studio"] .add-menu button > i { display: grid; place-items: center; }

/* AI 构建那颗开关：像原版的拉杆，方块滑块 */
html[data-skin="studio"] .ai-build-switch {
  border: 2px solid var(--sk-outline);
  border-radius: 3px;
  background: var(--surface-sunken);
  box-shadow: inset 0 2px 0 var(--sk-lo);
}
html[data-skin="studio"] .ai-build-switch i {
  border-radius: 2px;
  background: linear-gradient(#fff 0 40%, #d9d9d9 40%);
  box-shadow: 0 1px 0 var(--sk-outline);
}
html[data-skin="studio"] .ai-build-toggle > input:checked + .ai-build-switch { background: var(--accent); border-color: var(--sk-outline); }

/* 消息：气泡带底边，进场从下方升起 */
html[data-skin="studio"] .conversation { padding: 26px 30px 10px; }
html[data-skin="studio"] .message:not(.settled) { animation: sk-rise .28s ease both; }
html[data-skin="studio"] .message.user {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 8px 8px 3px 8px;
  box-shadow: 0 2px 0 var(--accent-border);
  padding: 10px 14px;
}
html[data-skin="studio"] .message code, html[data-skin="studio"] .hx-report code { border-radius: 3px; background: var(--surface-sunken); }
html[data-skin="studio"] .md-table th { background: var(--surface-sunken); }

/* 内核工作记录、帮手、成品卡 */
html[data-skin="studio"] .hx-work > summary,
html[data-skin="studio"] .hx-mate,
html[data-skin="studio"] .hx-wait,
html[data-skin="studio"] .hx-tipcard,
html[data-skin="studio"] .asset-row,
html[data-skin="studio"] .hx-sub > summary { border-radius: var(--radius-sm); }
html[data-skin="studio"] .hx-mate { box-shadow: 0 2px 0 var(--border); }
html[data-skin="studio"] .hx-mate:hover { transform: translateY(-1px); }
html[data-skin="studio"] .jar-card {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--sk-outline);
  border-radius: 5px;
  background: linear-gradient(var(--sk-hi) 0 2px, transparent 2px), var(--accent-soft);
  box-shadow: 0 3px 0 var(--sk-outline);
  transition: transform .12s ease, box-shadow .12s ease;
}
/* 只在第一次出现时弹一下、扫一道光；资产栏重画时 hx.js 会给它挂 .settled */
html[data-skin="studio"] .jar-card:not(.settled) { animation: sk-pop .4s cubic-bezier(.2, .8, .2, 1) both; }
html[data-skin="studio"] .jar-card.settled::after { animation: none; display: none; }
html[data-skin="studio"] .jar-card:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--sk-outline); background: linear-gradient(var(--sk-hi) 0 2px, transparent 2px), var(--accent-soft); }
html[data-skin="studio"] .jar-card:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sk-outline); }
/* 刚做出来的成品扫一道光：只在卡片进场那一下，不循环 */
html[data-skin="studio"] .jar-card::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 0;
  width: 35%;
  height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: sk-shine 1.1s ease-out .35s both;
  pointer-events: none;
}
html[data-skin="studio"] .jar-card i { border: 2px solid var(--sk-outline); border-radius: 3px; background: var(--surface); box-shadow: inset 0 -2px 0 var(--sk-lo); }
html[data-skin="studio"] .hx-steps > li { border-color: var(--border-subtle); }
html[data-skin="studio"] .tree-head, html[data-skin="studio"] .tree-file { border-radius: 4px; }
/* 等待中的那颗小方块：翻着转，比圆圈更像这个站 */
html[data-skin="studio"] .hx-wait i,
html[data-skin="studio"] .plan-loading i {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--sk-accent-hi), var(--accent) 55%, var(--sk-accent-lo));
  box-shadow: 0 2px 0 var(--sk-outline);
  animation: sk-block 1.15s cubic-bezier(.65, .05, .35, 1) infinite;
}
html[data-skin="studio"] .plan-loading i { width: 30px; height: 30px; }

/* 资产栏 */
html[data-skin="studio"] .assets-panel { background: var(--surface-alt); }
html[data-skin="studio"] .assets-panel > header h2 { font-size: 17px; }
html[data-skin="studio"] .tree-icon .mc-ico { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .12)); }

/* 弹窗 */
html[data-skin="studio"] .modal > section,
html[data-skin="studio"] .build-config-dialog > section,
html[data-skin="studio"] .announcement-dialog > section,
html[data-skin="studio"] .failure-dialog > section,
html[data-skin="studio"] .dialog-card,
html[data-skin="studio"] .bf-modal-card,
html[data-skin="studio"] .login-card {
  border: 2px solid var(--sk-outline);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 var(--sk-hi), 0 5px 0 var(--sk-outline), var(--shadow-modal);
  animation: sk-pop .28s cubic-bezier(.2, .8, .2, 1) both;
}
html[data-skin="studio"] .modal { background: var(--overlay); backdrop-filter: blur(4px); }
html[data-skin="studio"] .toast,
html[data-skin="studio"] .bf-toast,
html[data-skin="studio"] .studio-toast,
html[data-skin="studio"] .activity-toast {
  border: 2px solid var(--sk-outline);
  border-radius: 4px;
  box-shadow: 0 3px 0 var(--sk-outline);
  font-weight: 600;
  animation: sk-rise .22s ease both;
}
html[data-skin="studio"] .hx-role-card { border-radius: 10px; }
html[data-skin="studio"] .hx-tour-card { border-radius: 8px; }


/* ==================================================================
   studio · 背包 / 工作台（输入框上面那块）
   照原版 GUI 画：灰底 + 白/深灰双色斜面，格子是内凹的深灰，鼠标停上去泛白。
   胶囊改成创造模式背包底下那排标签页。
   ================================================================== */

html[data-skin="studio"] .hx-bench-panel,
html[data-skin="pixel"] .hx-bench-panel {
  margin-bottom: 0;
  border: 3px solid;
  border-color: var(--mc-panel-hi) var(--mc-panel-lo) var(--mc-panel-lo) var(--mc-panel-hi);
  border-radius: 2px;
  background: var(--mc-panel);
  box-shadow: 0 0 0 2px var(--mc-panel-edge), 0 6px 18px -8px rgba(0, 0, 0, .5);
  /* 进场沿用 hx.css 自带的 hx-bench-in；切标签会整块重画，再叠一个弹跳就跳个不停 */
}
html[data-skin="studio"] .hx-bench-head,
html[data-skin="pixel"] .hx-bench-head { border-bottom: 0; padding: 7px 8px 2px 10px; }
html[data-skin="studio"] .hx-bench-head > b,
html[data-skin="pixel"] .hx-bench-head > b { color: var(--mc-title); font-size: 13.5px; font-weight: 700; }
html[data-skin="studio"] .hx-bench-head > small,
html[data-skin="pixel"] .hx-bench-head > small { color: color-mix(in srgb, var(--mc-title) 70%, var(--mc-panel)); }
html[data-skin="studio"] .hx-bench-tab,
html[data-skin="pixel"] .hx-bench-tab {
  border: 2px solid var(--mc-panel-lo);
  border-radius: 2px;
  background: var(--mc-tab);
  color: var(--mc-title);
  box-shadow: inset 1px 1px 0 var(--mc-panel-hi);
}
html[data-skin="studio"] .hx-bench-tab.on,
html[data-skin="pixel"] .hx-bench-tab.on { background: var(--mc-tab-on); color: var(--mc-title); border-color: var(--mc-panel-lo); }
html[data-skin="studio"] .hx-bench-close,
html[data-skin="pixel"] .hx-bench-close {
  border: 2px solid var(--mc-panel-lo);
  border-radius: 2px;
  background: var(--mc-tab);
  color: var(--mc-title);
  box-shadow: inset 1px 1px 0 var(--mc-panel-hi);
}
html[data-skin="studio"] .hx-bench-close:hover,
html[data-skin="pixel"] .hx-bench-close:hover { background: var(--mc-tab-on); color: var(--mc-title); }
html[data-skin="studio"] .hx-bench-body,
html[data-skin="pixel"] .hx-bench-body { padding: 8px 10px 10px; }
html[data-skin="studio"] .hx-bench-empty,
html[data-skin="pixel"] .hx-bench-empty { color: var(--mc-title); }

/* 格子 */
html[data-skin="studio"] .hx-inv,
html[data-skin="pixel"] .hx-inv { gap: 0; grid-template-columns: repeat(auto-fill, 44px); }
html[data-skin="studio"] .hx-slot,
html[data-skin="pixel"] .hx-slot,
html[data-skin="studio"] .hx-craft-grid div,
html[data-skin="pixel"] .hx-craft-grid div,
html[data-skin="studio"] .hx-craft-row .hx-cell,
html[data-skin="pixel"] .hx-craft-row .hx-cell,
html[data-skin="studio"] .hx-recipe-index button,
html[data-skin="pixel"] .hx-recipe-index button,
html[data-skin="studio"] .hx-craft-out,
html[data-skin="pixel"] .hx-craft-out {
  border: 0;
  border-radius: 0;
  background: var(--mc-slot);
  box-shadow: inset 2px 2px 0 var(--mc-slot-lo), inset -2px -2px 0 var(--mc-slot-hi);
  opacity: 1;
  transition: background .1s ease;
}
html[data-skin="studio"] .hx-slot,
html[data-skin="pixel"] .hx-slot { width: 44px; height: 44px; animation: sk-pop .25s ease both; }
html[data-skin="studio"] .hx-slot:hover,
html[data-skin="pixel"] .hx-slot:hover,
html[data-skin="studio"] .hx-recipe-index button:hover,
html[data-skin="pixel"] .hx-recipe-index button:hover,
html[data-skin="studio"] .hx-craft-grid div:hover,
html[data-skin="pixel"] .hx-craft-grid div:hover {
  background: color-mix(in srgb, var(--mc-slot) 55%, #ffffff);
  border: 0;
}
html[data-skin="studio"] .hx-slot img,
html[data-skin="pixel"] .hx-slot img { transition: transform .12s ease; }
html[data-skin="studio"] .hx-slot:hover img,
html[data-skin="pixel"] .hx-slot:hover img { transform: translateY(-2px) scale(1.06); }
html[data-skin="studio"] .hx-recipe-index button.on,
html[data-skin="pixel"] .hx-recipe-index button.on {
  background: color-mix(in srgb, var(--mc-slot) 55%, #ffffff);
  box-shadow: inset 2px 2px 0 var(--mc-slot-lo), inset -2px -2px 0 var(--mc-slot-hi), 0 0 0 2px var(--accent);
}
html[data-skin="studio"] .hx-recipe-index,
html[data-skin="pixel"] .hx-recipe-index { gap: 0; grid-template-columns: repeat(auto-fill, 36px); }
html[data-skin="studio"] .hx-recipe-index button,
html[data-skin="pixel"] .hx-recipe-index button { width: 36px; height: 36px; }
/* 九宫格：外面那圈框去掉，三乘三紧贴，就是工作台 */
html[data-skin="studio"] .hx-craft-grid,
html[data-skin="pixel"] .hx-craft-grid { padding: 0; gap: 0; border: 0; border-radius: 0; background: transparent; grid-template-columns: repeat(3, 40px); }
html[data-skin="studio"] .hx-craft-grid div,
html[data-skin="pixel"] .hx-craft-grid div { width: 40px; height: 40px; }
html[data-skin="studio"] .hx-craft-grid div.empty,
html[data-skin="pixel"] .hx-craft-grid div.empty,
html[data-skin="studio"] .hx-craft-row .hx-cell.empty,
html[data-skin="pixel"] .hx-craft-row .hx-cell.empty { border: 0; opacity: 1; background: var(--mc-slot); }
html[data-skin="studio"] .hx-craft-out,
html[data-skin="pixel"] .hx-craft-out { width: 56px; height: 56px; box-shadow: inset 2px 2px 0 var(--mc-slot-lo), inset -2px -2px 0 var(--mc-slot-hi), 0 0 0 2px var(--accent); }
html[data-skin="studio"] .hx-craft-arrow,
html[data-skin="pixel"] .hx-craft-arrow,
html[data-skin="studio"] .hx-craft-tag,
html[data-skin="pixel"] .hx-craft-tag { color: var(--mc-title); font-weight: 700; }
html[data-skin="studio"] .hx-craft-name b,
html[data-skin="pixel"] .hx-craft-name b,
html[data-skin="studio"] .hx-craft-in small,
html[data-skin="pixel"] .hx-craft-in small,
html[data-skin="studio"] .hx-craft-note,
html[data-skin="pixel"] .hx-craft-note,
html[data-skin="studio"] .hx-recipe-source,
html[data-skin="pixel"] .hx-recipe-source { color: var(--mc-title); }
html[data-skin="studio"] .hx-craft-name small,
html[data-skin="pixel"] .hx-craft-name small { color: color-mix(in srgb, var(--mc-title) 72%, var(--mc-panel)); }
html[data-skin="studio"] .hx-craft-type,
html[data-skin="pixel"] .hx-craft-type { border-color: var(--mc-panel-lo); background: var(--mc-tab-on); color: var(--mc-title); }
html[data-skin="studio"] .hx-slot.blank::after,
html[data-skin="pixel"] .hx-slot.blank::after,
html[data-skin="studio"] .hx-craft-grid div.blank::after,
html[data-skin="pixel"] .hx-craft-grid div.blank::after,
html[data-skin="studio"] .hx-recipe-index button.blank::after,
html[data-skin="pixel"] .hx-recipe-index button.blank::after {
  /* 原版那张紫黑棋盘：这里格子本来就是深灰，用它不再吵 */
  border-radius: 0;
  background:
    linear-gradient(45deg, #f800f8 25%, transparent 25%, transparent 75%, #f800f8 75%),
    linear-gradient(45deg, #f800f8 25%, #000 25%, #000 75%, #f800f8 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  opacity: .55;
}

/* 标签：输入框里一行字，不要灰底整条，也不要 3D 按钮。 */
html[data-skin="studio"] .composer > .hx-bench-chips,
html[data-skin="pixel"] .composer > .hx-bench-chips {
  gap: 2px 14px;
  width: auto;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html[data-skin="studio"] .hx-bench-chip,
html[data-skin="pixel"] .hx-bench-chip {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--mc-title) 72%, var(--mc-panel));
  box-shadow: none;
  padding: 0;
  font-weight: 700;
  margin: 0;
  transform: none;
}
html[data-skin="studio"] .hx-bench-chip small,
html[data-skin="pixel"] .hx-bench-chip small { color: inherit; opacity: .7; }
html[data-skin="studio"] .hx-bench-chip:hover,
html[data-skin="pixel"] .hx-bench-chip:hover {
  background: transparent;
  color: var(--mc-title);
  transform: none;
}
html[data-skin="studio"] .hx-bench-chip.on,
html[data-skin="pixel"] .hx-bench-chip.on {
  background: transparent;
  color: var(--accent);
  margin: 0;
  padding: 0;
}
html[data-skin="studio"] .hx-bench-chip.on small,
html[data-skin="pixel"] .hx-bench-chip.on small { color: inherit; opacity: .85; }
html[data-skin="studio"] .hx-bench-chip[disabled],
html[data-skin="pixel"] .hx-bench-chip[disabled] { opacity: .45; }
html[data-skin="studio"] .hx-bench,
html[data-skin="pixel"] .hx-bench { margin-bottom: 0; }

/* 模型监视器：清单像一列格子，舞台像原版那块深色展示台 */
html[data-skin="studio"] .hx-monitor-tile,
html[data-skin="pixel"] .hx-monitor-tile {
  border: 2px solid var(--mc-panel-lo);
  border-radius: 2px;
  background: var(--mc-tab);
  color: var(--mc-title);
  box-shadow: inset 1px 1px 0 var(--mc-panel-hi);
}
html[data-skin="studio"] .hx-monitor-tile small,
html[data-skin="pixel"] .hx-monitor-tile small { color: color-mix(in srgb, var(--mc-title) 70%, var(--mc-panel)); }
html[data-skin="studio"] .hx-monitor-tile:hover,
html[data-skin="pixel"] .hx-monitor-tile:hover { background: var(--mc-tab-on); border-color: var(--mc-panel-lo); }
html[data-skin="studio"] .hx-monitor-tile.on,
html[data-skin="pixel"] .hx-monitor-tile.on { background: var(--mc-tab-on); border-color: var(--mc-panel-lo); box-shadow: inset 1px 1px 0 var(--mc-panel-hi), 0 0 0 2px var(--accent); }
html[data-skin="studio"] .hx-monitor-thumb,
html[data-skin="pixel"] .hx-monitor-thumb {
  border-radius: 0;
  background: var(--mc-slot);
  box-shadow: inset 2px 2px 0 var(--mc-slot-lo), inset -2px -2px 0 var(--mc-slot-hi);
}
html[data-skin="studio"] .hx-monitor-stage,
html[data-skin="pixel"] .hx-monitor-stage {
  border: 0;
  border-radius: 0;
  background-color: var(--mc-slot);
  background-image:
    linear-gradient(rgba(0, 0, 0, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .08) 1px, transparent 1px);
  box-shadow: inset 2px 2px 0 var(--mc-slot-lo), inset -2px -2px 0 var(--mc-slot-hi);
}
html[data-skin="studio"] .hx-monitor-note,
html[data-skin="pixel"] .hx-monitor-note { background: rgba(0, 0, 0, .55); color: #f0f0f0; border-radius: 2px; }
html[data-skin="studio"] .hx-monitor-bar,
html[data-skin="pixel"] .hx-monitor-bar { border-top: 2px solid var(--mc-panel-lo); background: var(--mc-panel); }
html[data-skin="studio"] .hx-monitor-bar small,
html[data-skin="pixel"] .hx-monitor-bar small { color: var(--mc-title); }
html[data-skin="studio"] .hx-monitor-bar select,
html[data-skin="pixel"] .hx-monitor-bar select { border: 2px solid var(--mc-panel-lo); border-radius: 2px; background: var(--mc-tab-on); color: var(--mc-title); }

/* 说明书：字全按面板的深灰走，小胶囊做成小按钮 */
html[data-skin="studio"] .hx-guide h4,
html[data-skin="pixel"] .hx-guide h4,
html[data-skin="studio"] .hx-guide p,
html[data-skin="pixel"] .hx-guide p,
html[data-skin="studio"] .hx-guide li,
html[data-skin="pixel"] .hx-guide li { color: var(--mc-title); }
html[data-skin="studio"] .hx-guide h4,
html[data-skin="pixel"] .hx-guide h4 { padding-bottom: 4px; border-bottom: 2px solid var(--mc-panel-lo); }
html[data-skin="studio"] .hx-guide-chip,
html[data-skin="pixel"] .hx-guide-chip {
  border: 2px solid var(--mc-panel-lo);
  border-radius: 2px;
  background: var(--mc-tab-on);
  color: var(--mc-title);
  box-shadow: inset 1px 1px 0 var(--mc-panel-hi), 0 1px 0 var(--mc-panel-edge);
}
html[data-skin="studio"] .hx-guide-chip:hover,
html[data-skin="pixel"] .hx-guide-chip:hover { color: var(--mc-title); border-color: var(--accent); }
html[data-skin="studio"] .hx-guide-link,
html[data-skin="pixel"] .hx-guide-link { color: var(--accent); }
html[data-skin="studio"][data-theme="dark"] .hx-guide-link,
html[data-skin="pixel"][data-theme="dark"] .hx-guide-link { color: var(--accent); }


/* ==================================================================
   studio · 市场 / 仓库 / 模型工坊 / 个人中心 / 充值 / 贴图 / 活动 / 老工作台
   ================================================================== */

html[data-skin="studio"] .bf-topbar,
html[data-skin="studio"] .site-head,
html[data-skin="studio"] .studio-topbar,
html[data-skin="studio"] .activity-topbar,
html[data-skin="studio"] .titlebar {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--border-strong);
}
html[data-skin="studio"] .bf-navlink, html[data-skin="studio"] .site-head nav a { border-radius: 4px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
html[data-skin="studio"] .site-head nav button { border-radius: 4px; }

/* 卡片家族：同一套"方块"语言 */
html[data-skin="studio"] .bf-card,
html[data-skin="studio"] .panel,
html[data-skin="studio"] .tier-panel,
html[data-skin="studio"] main > .hero,
html[data-skin="studio"] .checkin,
html[data-skin="studio"] .first-buy,
html[data-skin="studio"] .checkin-card,
html[data-skin="studio"] .redeem-card,
html[data-skin="studio"] .package-card,
html[data-skin="studio"] .point-card,
html[data-skin="studio"] .bf-panel,
html[data-skin="studio"] .bf-stage,
html[data-skin="studio"] .bf-empty,
html[data-skin="studio"] .studio-workspace,
html[data-skin="studio"] .activity-panel,
html[data-skin="studio"] .rules-panel,
html[data-skin="studio"] .submit-panel,
html[data-skin="studio"] .share-panel,
html[data-skin="studio"] .activity-pick button,
html[data-skin="studio"] .checkin-claim,
html[data-skin="studio"] .checkin-rules li,
html[data-skin="studio"] .game-slot,
html[data-skin="studio"] .podium-section,
html[data-skin="studio"] .forge-panel,
html[data-skin="studio"] .chat-panel,
html[data-skin="studio"] .welcome-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--sk-hi), 0 3px 0 var(--sk-edge), var(--shadow-card);
}
html[data-skin="studio"] .bf-card { overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; animation: sk-rise .35s ease both; }
html[data-skin="studio"] .bf-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--sk-hi), 0 5px 0 var(--sk-edge), var(--shadow-pop); border-color: var(--border-strong); }
html[data-skin="studio"] .bf-cover { border-radius: 0; }
html[data-skin="studio"] .bf-cover-fallback .mc-ico { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .12)); animation: sk-bob 3.4s ease-in-out infinite; }
html[data-skin="studio"] .bf-badge { border-radius: 3px; font-weight: 600; }
html[data-skin="studio"] .bf-search { border: 2px solid var(--sk-outline); border-radius: 4px; box-shadow: inset 0 2px 0 var(--sk-lo); background: var(--surface); }
html[data-skin="studio"] .bf-search:focus-within { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--sk-lo), 0 0 0 3px var(--focus-ring); }
html[data-skin="studio"] .bf-head b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
html[data-skin="studio"] .bf-field input,
html[data-skin="studio"] .bf-field textarea,
html[data-skin="studio"] .bf-field select,
html[data-skin="studio"] .bf-select,
html[data-skin="studio"] .studio-compose textarea,
html[data-skin="studio"] .redeem-card input,
html[data-skin="studio"] .dialog-card input { border: 2px solid var(--border-strong); border-radius: 4px; box-shadow: inset 0 2px 0 var(--sk-lo); }
html[data-skin="studio"] .package-card.featured { border-color: var(--accent); box-shadow: inset 0 1px 0 var(--sk-hi), 0 3px 0 var(--accent-active), var(--shadow-pop); }
html[data-skin="studio"] .package-card:hover { transform: translateY(-3px); }
html[data-skin="studio"] .wallet { border: 2px solid var(--sk-outline); border-radius: 6px; box-shadow: inset 0 1px 0 var(--sk-hi), 0 3px 0 var(--sk-outline); }
html[data-skin="studio"] .wallet > strong { letter-spacing: -.03em; }
html[data-skin="studio"] .project-item, html[data-skin="studio"] .model-item, html[data-skin="studio"] .tier-card, html[data-skin="studio"] .ledger-item { border-radius: var(--radius-sm); }
html[data-skin="studio"] .checkin-week i { border-radius: 3px; }
html[data-skin="studio"] .avatar.profile-avatar, html[data-skin="studio"] .hero-who .avatar { width: 64px; height: 64px; border-radius: 6px; font-size: 26px; }
html[data-skin="studio"] .studio-model-settings,
html[data-skin="studio"] .studio-upload-reference,
html[data-skin="studio"] .studio-card,
html[data-skin="studio"] .stage, html[data-skin="studio"] .stage-box,
html[data-skin="studio"] .mode-card,
html[data-skin="studio"] .work-card,
html[data-skin="studio"] .podium-card { border-radius: var(--radius-sm); }
html[data-skin="studio"] .studio-card { border: 1px solid var(--border-strong); box-shadow: 0 2px 0 var(--sk-edge); transition: transform .15s ease; }
html[data-skin="studio"] .studio-card:hover { transform: translateY(-2px); }
html[data-skin="studio"] .studio-model-options button,
html[data-skin="studio"] .studio-size-options button,
html[data-skin="studio"] .studio-batch-count button { border-radius: 3px; }
html[data-skin="studio"] .mc-chip, html[data-skin="studio"] .balance-chip { border-radius: 3px; font-weight: 600; }
html[data-skin="studio"] .chat-bubble { border-radius: 6px; }

/* 顶部活动条：改成和站里同色系的浅条，别再是一条深绿实心杠 */
html[data-skin="studio"] .public-event-banner {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-top: 0;
  border-bottom: 2px solid var(--accent-border);
  box-shadow: none;
}
html[data-skin="studio"] .public-event-banner__badge {
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--sk-outline);
  border-radius: 2px;
  box-shadow: 1px 1px 0 var(--sk-outline);
}
html[data-skin="studio"] .public-event-banner strong { color: var(--accent); }
html[data-skin="studio"] .public-event-banner__detail { color: var(--text-secondary); }
html[data-skin="studio"] .public-event-banner__group { color: var(--text-secondary); font-weight: 600; }
html[data-skin="studio"] .public-event-banner__inner::after { color: var(--accent); }

/* 扫码登录那一屏按经典样式走（老板点名）：卡片、logo 都还原成 simple.css 里的样子 */
html[data-skin="studio"] .login-view .login-card,
html[data-skin="pixel"] .login-view .login-card {
  border: 1px solid var(--line);
  border-radius: 16px !important;
  box-shadow: var(--shadow);
  animation: none;
}
html[data-skin="studio"] .login-view .cube-logo,
html[data-skin="pixel"] .login-view .cube-logo {
  border: 0;
  border-radius: 14px !important;
  box-shadow: inset -5px -5px rgba(0, 0, 0, .12);
  animation: none;
}
html[data-skin="pixel"] .login-view *,
html[data-skin="pixel"] .login-view *::before,
html[data-skin="pixel"] .login-view *::after { border-radius: revert !important; }
html[data-skin="pixel"] .login-view .login-gift,
html[data-skin="pixel"] .login-view .wechat-qr-shell { border-radius: 12px !important; }

/* 动效对怕晃的人关掉 */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="studio"] *, html[data-skin="studio"] *::before, html[data-skin="studio"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==================================================================
   pixel · 令牌
   直角、粗描边、硬投影。颜色贴近游戏 GUI 的石头与羊皮纸。
   ================================================================== */

html[data-skin="pixel"] {
  --page: #d9d4c7;
  --surface: #f1ede2;
  --surface-alt: #e9e4d6;
  --surface-sunken: #e1dccd;
  --surface-hover: #e8e2d2;
  --surface-active: #d8d1bf;
  --border: #3a3a3a;
  --border-subtle: #8f8a7c;
  --border-strong: #1f1f1f;
  --border-hover: #1f1f1f;

  --text: #1b1b1b;
  --text-secondary: #3e3e3e;
  --text-muted: #5b5b55;

  --accent: #2f7a1f;
  --accent-hover: #256319;
  --accent-active: #1d4f13;
  --accent-soft: #dcefd1;
  --accent-border: #2f7a1f;
  --on-accent: #ffffff;
  --focus-ring: rgba(47, 122, 31, .35);

  --success: #2f7a1f;
  --success-soft: #dcefd1;
  --success-border: #2f7a1f;
  --warn: #8a5a10;
  --warn-soft: #f3e5c3;
  --warn-border: #8a5a10;
  --danger: #a5281e;
  --danger-soft: #f3d3cf;
  --danger-border: #a5281e;
  --info: #1f4e9b;
  --info-soft: #d5e0f3;
  --info-border: #1f4e9b;

  --slot: #8b8b8b;
  --slot-border: #373737;
  --slot-inset: rgba(0, 0, 0, .35);
  --slot-hover: #a0a0a0;
  --slot-selected: #c6d8b8;
  --stage: #c6c6c6;
  --stage-grid: rgba(0, 0, 0, .08);
  --stage-text: #3a3a3a;
  --checker-a: #d8d3c6;
  --checker-b: #ebe6d9;

  --radius: 0px;
  --radius-sm: 0px;

  --shadow-color: rgba(0, 0, 0, .35);
  --shadow-card: 3px 3px 0 rgba(0, 0, 0, .28);
  --shadow-pop: 5px 5px 0 rgba(0, 0, 0, .32);
  --shadow-modal: 8px 8px 0 rgba(0, 0, 0, .35);
  --overlay: rgba(0, 0, 0, .55);

  --sk-hard: 3px 3px 0 var(--border-strong);

  --mc-panel: #c6c6c6;
  --mc-panel-hi: #ffffff;
  --mc-panel-lo: #555555;
  --mc-panel-edge: #000000;
  --mc-slot: #8b8b8b;
  --mc-slot-hi: #ffffff;
  --mc-slot-lo: #373737;
  --mc-title: #3f3f3f;
  --mc-tab: #c6c6c6;
  --mc-tab-on: #e6e6e6;
}

html[data-skin="pixel"][data-theme="dark"] {
  --page: #161616;
  --surface: #262626;
  --surface-alt: #202020;
  --surface-sunken: #1c1c1c;
  --surface-hover: #2f2f2f;
  --surface-active: #383838;
  --border: #6a6a6a;
  --border-subtle: #444444;
  --border-strong: #0a0a0a;
  --border-hover: #9a9a9a;

  --text: #f2f2f2;
  --text-secondary: #c8c8c8;
  --text-muted: #a0a0a0;

  --accent: #6fd35c;
  --accent-hover: #86e072;
  --accent-active: #9ce98b;
  --accent-soft: #1f3a19;
  --accent-border: #6fd35c;
  --on-accent: #0f1a0c;
  --focus-ring: rgba(111, 211, 92, .4);

  --success: #6fd35c;
  --success-soft: #1f3a19;
  --success-border: #6fd35c;
  --warn: #f0c04a;
  --warn-soft: #3a3014;
  --warn-border: #f0c04a;
  --danger: #ef6b60;
  --danger-soft: #3d1c19;
  --danger-border: #ef6b60;
  --info: #7fb0f5;
  --info-soft: #1a2740;
  --info-border: #7fb0f5;

  --slot: #8b8b8b;
  --slot-border: #373737;
  --slot-inset: rgba(0, 0, 0, .5);
  --slot-hover: #a0a0a0;
  --slot-selected: #4b6b3c;
  --stage: #2b2b2b;
  --stage-grid: rgba(255, 255, 255, .06);
  --stage-text: #d0d0d0;
  --checker-a: #2a2a2a;
  --checker-b: #202020;

  --shadow-card: 3px 3px 0 rgba(0, 0, 0, .7);
  --shadow-pop: 5px 5px 0 rgba(0, 0, 0, .75);
  --shadow-modal: 8px 8px 0 rgba(0, 0, 0, .8);
  --overlay: rgba(0, 0, 0, .72);

  --sk-hard: 3px 3px 0 var(--border-strong);

  --mc-panel: #303030;
  --mc-panel-hi: #4d4d4d;
  --mc-panel-lo: #0f0f0f;
  --mc-panel-edge: #000000;
  --mc-slot: #1e1e1e;
  --mc-slot-hi: #3d3d3d;
  --mc-slot-lo: #0a0a0a;
  --mc-title: #d6d6d6;
  --mc-tab: #303030;
  --mc-tab-on: #454545;
}


/* ==================================================================
   pixel · 形状
   ================================================================== */

html[data-skin="pixel"] *,
html[data-skin="pixel"] *::before,
html[data-skin="pixel"] *::after { border-radius: 0 !important; }
html[data-skin="pixel"] body {
  background-color: var(--page);
  background-image:
    linear-gradient(var(--stage-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--stage-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}
html[data-skin="pixel"] img.cube-logo,
html[data-skin="pixel"] .brand img,
html[data-skin="pixel"] .bf-brand img,
html[data-skin="pixel"] .bf-cover img,
html[data-skin="pixel"] .studio-card-thumb img { image-rendering: pixelated; }

html[data-skin="pixel"] .composer,
html[data-skin="pixel"] .panel,
html[data-skin="pixel"] .tier-panel,
html[data-skin="pixel"] main > .hero,
html[data-skin="pixel"] .checkin,
html[data-skin="pixel"] .first-buy,
html[data-skin="pixel"] .checkin-card,
html[data-skin="pixel"] .redeem-card,
html[data-skin="pixel"] .package-card,
html[data-skin="pixel"] .point-card,
html[data-skin="pixel"] .bf-card,
html[data-skin="pixel"] .bf-panel,
html[data-skin="pixel"] .bf-stage,
html[data-skin="pixel"] .bf-search,
html[data-skin="pixel"] .studio-workspace,
html[data-skin="pixel"] .activity-panel,
html[data-skin="pixel"] .rules-panel,
html[data-skin="pixel"] .submit-panel,
html[data-skin="pixel"] .share-panel,
html[data-skin="pixel"] .podium-section,
html[data-skin="pixel"] .jar-card,
html[data-skin="pixel"] .hx-mate,
html[data-skin="pixel"] .hx-work > summary,
html[data-skin="pixel"] .message.user,
html[data-skin="pixel"] .login-card,
html[data-skin="pixel"] .modal > section,
html[data-skin="pixel"] .dialog-card,
html[data-skin="pixel"] .bf-modal-card,
html[data-skin="pixel"] .announcement-dialog > section,
html[data-skin="pixel"] .forge-panel,
html[data-skin="pixel"] .chat-panel {
  border: 2px solid var(--border);
  box-shadow: var(--sk-hard);
}
html[data-skin="pixel"] .bf-card:hover, html[data-skin="pixel"] .package-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--border-strong);
}
html[data-skin="pixel"] .sidebar { border-right: 2px solid var(--border); }
html[data-skin="pixel"] .project-content { border-top: 2px solid var(--border); }
html[data-skin="pixel"] .chat-column { border-right: 2px solid var(--border); }
html[data-skin="pixel"] .site-head,
html[data-skin="pixel"] .bf-topbar,
html[data-skin="pixel"] .studio-topbar,
html[data-skin="pixel"] .activity-topbar,
html[data-skin="pixel"] .titlebar { border-bottom: 2px solid var(--border); background: var(--surface); backdrop-filter: none; }

html[data-skin="pixel"] .primary-button,
html[data-skin="pixel"] .ghost-button,
html[data-skin="pixel"] .bf-btn,
html[data-skin="pixel"] .bf-chip,
html[data-skin="pixel"] .studio-go,
html[data-skin="pixel"] .mc-btn,
html[data-skin="pixel"] .package-card > button,
html[data-skin="pixel"] .point-card button,
html[data-skin="pixel"] .hx-attach,
html[data-skin="pixel"] .model-switch-trigger,
html[data-skin="pixel"] .hx-starters button,
html[data-skin="pixel"] .hx-legacy,
html[data-skin="pixel"] .hx-flag,
html[data-skin="pixel"] .hx-id,
html[data-skin="pixel"] .studio-model-options button,
html[data-skin="pixel"] .studio-size-options button {
  border: 2px solid var(--border-strong);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset -2px 0 0 rgba(0, 0, 0, .12), 2px 2px 0 var(--border-strong);
  font-weight: 700;
  text-shadow: none;
}
html[data-skin="pixel"] .primary-button,
html[data-skin="pixel"] .bf-btn--primary,
html[data-skin="pixel"] .studio-go,
html[data-skin="pixel"] .mc-btn.primary,
html[data-skin="pixel"] .bf-chip.is-active,
html[data-skin="pixel"] .package-card.featured > button {
  background: linear-gradient(var(--accent) 0 68%, var(--accent-active) 68% 100%);
  color: var(--on-accent);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .35);
}
html[data-skin="pixel"] .primary-button:hover,
html[data-skin="pixel"] .bf-btn:hover,
html[data-skin="pixel"] .ghost-button:hover,
html[data-skin="pixel"] .studio-go:hover:not(:disabled) { transform: translateY(-1px); filter: none; }
html[data-skin="pixel"] .primary-button:active,
html[data-skin="pixel"] .bf-btn:active,
html[data-skin="pixel"] .ghost-button:active { transform: translateY(2px); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .22); }
html[data-skin="pixel"] .avatar { border: 2px solid var(--border-strong); box-shadow: 2px 2px 0 var(--border-strong); }
html[data-skin="pixel"] .hero-brand h1 { text-shadow: 3px 3px 0 var(--accent-soft), 4px 4px 0 var(--border); }
html[data-skin="pixel"] .cube-logo { border: 2px solid var(--border-strong); box-shadow: 3px 3px 0 var(--border-strong); image-rendering: pixelated; }
html[data-skin="pixel"] .toast, html[data-skin="pixel"] .bf-toast, html[data-skin="pixel"] .studio-toast { border: 2px solid var(--border-strong); box-shadow: var(--sk-hard); }
html[data-skin="pixel"] .public-event-banner { border-top: 2px solid var(--border-strong); border-bottom: 2px solid var(--border-strong); }