/* SANDO colors follow the existing html.dark / html.light theme switch. */
html.dark .home-page.home-page[data-v-329e3f7c] {
  --sando-bg: #0d291f;
  --sando-header: rgba(12, 39, 30, .9);
  --sando-text: #e5f3df;
  --sando-subtle: #b7d3bb;
  --sando-muted: #9abb9e;
  --sando-accent: #c8dc7b;
  --sando-action: #b8dc86;
  --sando-action-text: #153524;
  --sando-border: rgba(189, 224, 177, .24);
  --sando-secondary: rgba(21, 65, 46, .68);
  --sando-photo-overlay: linear-gradient(90deg, rgba(10, 39, 29, .94) 0%, rgba(10, 39, 29, .82) 42%, rgba(10, 39, 29, .3) 100%), linear-gradient(0deg, #0d291f 0%, transparent 36%);
}

html.light .home-page.home-page[data-v-329e3f7c] {
  --sando-bg: #dcecd5;
  --sando-header: rgba(221, 239, 212, .94);
  --sando-text: #183f2c;
  --sando-subtle: #315a40;
  --sando-muted: #4c7053;
  --sando-accent: #526f1f;
  --sando-action: #2f6843;
  --sando-action-text: #eff7dc;
  --sando-border: rgba(43, 100, 61, .28);
  --sando-secondary: rgba(230, 245, 218, .8);
  --sando-photo-overlay: linear-gradient(90deg, rgba(224, 242, 211, .96) 0%, rgba(224, 242, 211, .84) 43%, rgba(224, 242, 211, .3) 100%), linear-gradient(0deg, #dcecd5 0%, transparent 36%);
}

.home-page.home-page[data-v-329e3f7c] {
  position: relative;
  z-index: 1;
  color: var(--sando-text);
  background: var(--sando-bg);
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

.home-page .content-layer[data-v-329e3f7c] {
  position: relative;
  z-index: 2;
  background: var(--sando-bg);
}

.home-page.home-page[data-v-329e3f7c]::before {
  inset: 0 0 auto;
  height: min(80svh, 780px);
  background-image: var(--sando-photo-overlay), url("/sando-build/21ac4e2a59fda76f/assets/sando-workbench.png");
  background-size: cover;
  background-position: center, center 45%;
  mask-image: none;
  -webkit-mask-image: none;
}

.home-page .background-stage[data-v-329e3f7c],
.home-page .hero-visual[data-v-329e3f7c],
.home-page .hero-orb[data-v-329e3f7c] {
  display: none;
}

.home-page > canvas[data-v-329e3f7c] {
  display: none;
}

.home-page .content-layer[data-v-329e3f7c] {
  padding-top: 76px;
}

.home-page .home-corner-chrome[data-v-329e3f7c]::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 70px;
  background: var(--sando-header);
  border-bottom: 1px solid var(--sando-border);
  backdrop-filter: blur(16px);
}

.home-page .top-brand[data-v-329e3f7c] {
  top: 12px;
  left: 28px;
  gap: 12px;
}

.home-page .brand-logo[data-v-329e3f7c] {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-page .brand-logo[data-v-329e3f7c] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-page .brand-name[data-v-329e3f7c] {
  color: var(--sando-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.home-page .top-start-btn[data-v-329e3f7c] {
  top: 15px;
  right: 28px;
  min-height: 40px;
  border: 1px solid var(--sando-action);
  border-radius: 6px;
  background: var(--sando-action);
  color: var(--sando-action-text);
  box-shadow: none;
}

.home-page .top-start-btn[data-v-329e3f7c]:hover {
  filter: brightness(1.1);
  box-shadow: 0 8px 26px rgba(10, 44, 25, .18);
}

.home-page .hero[data-v-329e3f7c] {
  box-sizing: border-box;
  width: min(1360px, 100%);
  padding: 0 56px 40px;
  grid-template-rows: minmax(580px, 73svh) auto;
  gap: 0;
}

.home-page .hero-copy[data-v-329e3f7c] {
  box-sizing: border-box;
  width: 100%;
  max-width: 790px;
  margin: 0;
  padding: 36px 0 20px;
  align-self: center;
  justify-items: start;
  text-align: left;
  gap: 14px;
}

.home-page .hero-copy[data-v-329e3f7c] > * {
  animation: none;
}

.home-page .badge[data-v-329e3f7c] {
  min-height: 0;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 2px solid var(--sando-accent);
  border-radius: 0;
  background: none;
  color: var(--sando-accent);
  box-shadow: none;
  font-size: 12px;
  letter-spacing: 0;
}

.home-page .hero-title[data-v-329e3f7c] {
  display: block;
  max-width: 790px;
  color: var(--sando-text);
  font-size: 4.6rem;
  font-weight: 720;
  line-height: 1.08;
  letter-spacing: 0;
  white-space: normal;
  text-wrap: balance;
}

.home-page .hero-title[data-v-329e3f7c] span {
  display: inline;
  margin-right: .18em;
  font-weight: 720;
  letter-spacing: 0;
}

.home-page .hero-title .tone-dark[data-v-329e3f7c],
.home-page .hero-title .tone-warm[data-v-329e3f7c] {
  color: var(--sando-text);
}

.home-page .hero-title .tone-mint[data-v-329e3f7c] {
  color: var(--sando-accent);
}

.home-page .hero-creative-title[data-v-329e3f7c] {
  margin: 12px 0 0;
  color: var(--sando-text);
  font-size: 2.15rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: normal;
}

.home-page .hero-creative-sub[data-v-329e3f7c],
.home-page .hero-creative-sub-secondary[data-v-329e3f7c] {
  max-width: 650px;
  margin: 0;
  color: var(--sando-subtle);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
}

.home-page .hero-creative-sub-secondary[data-v-329e3f7c] {
  color: var(--sando-muted);
}

.home-page .hero-actions[data-v-329e3f7c] {
  justify-content: flex-start;
  margin-top: 22px;
}

.home-page .btn-primary[data-v-329e3f7c],
.home-page .btn-secondary[data-v-329e3f7c] {
  min-height: 48px;
  padding: 0 23px;
  border-radius: 6px;
  font-weight: 650;
  box-shadow: none;
}

.home-page .btn-primary[data-v-329e3f7c] {
  background: var(--sando-action);
  color: var(--sando-action-text);
}

.home-page .btn-secondary[data-v-329e3f7c] {
  border: 1px solid var(--sando-border);
  background: var(--sando-secondary);
  color: var(--sando-text);
}

.home-page .btn-primary[data-v-329e3f7c]:hover,
.home-page .btn-secondary[data-v-329e3f7c]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(10, 44, 25, .2);
}

.home-page .value-strip[data-v-329e3f7c] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--sando-border);
}

.home-page .value-card[data-v-329e3f7c] {
  min-height: 175px;
  padding: 25px 28px 22px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  animation: none;
  transform: none;
}

.home-page .value-card[data-v-329e3f7c] + .value-card[data-v-329e3f7c] {
  padding-left: 28px;
  border-left: 1px solid var(--sando-border);
}

.home-page .value-card[data-v-329e3f7c]::before,
.home-page .value-card[data-v-329e3f7c]::after {
  display: none;
}

.home-page .value-card[data-v-329e3f7c]:hover {
  transform: none;
  background: none;
  border-color: var(--sando-border);
  box-shadow: none;
}

.home-page .value-card-eyebrow[data-v-329e3f7c] {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sando-accent);
  box-shadow: none;
  letter-spacing: 0;
}

.home-page .value-card h3[data-v-329e3f7c],
.home-page .value-card:hover h3[data-v-329e3f7c] {
  margin: 12px 0 9px;
  color: var(--sando-text);
  font-size: 1.27rem;
  font-weight: 650;
  letter-spacing: 0;
  transform: none;
}

.home-page .value-card p[data-v-329e3f7c],
.home-page .value-card:hover p[data-v-329e3f7c] {
  color: var(--sando-subtle);
  font-size: .93rem;
  transform: none;
}

.home-page .home-footer[data-v-329e3f7c] {
  color: var(--sando-muted);
  border-top: 1px solid var(--sando-border);
}

.home-page .fab[data-v-329e3f7c] {
  border: 1px solid var(--sando-border);
  border-radius: 6px;
  background: var(--sando-action);
  color: var(--sando-action-text);
  box-shadow: 0 10px 28px rgba(10, 44, 25, .2);
}

html.dark .app-shell.app-shell {
  --studio-bg: #102b20;
  --studio-rail: #153727;
  --studio-panel: #1a3d2c;
  --studio-panel-2: #204734;
  --studio-line: rgba(191, 224, 174, .18);
  --studio-line-strong: rgba(182, 219, 118, .46);
  --studio-text: #e4f1de;
  --studio-muted: #a7c4a8;
  --studio-soft: #cee0c4;
  --studio-green: #bbdb7e;
  --studio-green-light: #d5eaa0;
  --studio-green-rgb: 187, 219, 126;
  --studio-aqua: #92cf9b;
  --studio-blue: #aecf95;
  --sando-topbar: rgba(17, 48, 33, .97);
  --sando-active-text: #173923;
  --sando-prompt: #1a3b2c;
  background: var(--studio-bg);
  color: var(--studio-text);
}

html.light .app-shell.app-shell {
  --studio-bg: #e3f0dc;
  --studio-rail: #d4e9d0;
  --studio-panel: #eef7e6;
  --studio-panel-2: #dcebd5;
  --studio-line: rgba(42, 96, 55, .19);
  --studio-line-strong: rgba(44, 106, 57, .4);
  --studio-text: #183c28;
  --studio-muted: #4b6e51;
  --studio-soft: #315a3b;
  --studio-green: #2e7043;
  --studio-green-light: #3c8652;
  --studio-green-rgb: 46, 112, 67;
  --studio-aqua: #3b8060;
  --studio-blue: #426e55;
  --sando-topbar: rgba(221, 239, 215, .98);
  --sando-active-text: #f1f8e9;
  --sando-prompt: #f1f8e9;
  background: var(--studio-bg);
  color: var(--studio-text);
}

html .app-shell .studio-main.studio-main {
  background: var(--studio-bg);
  color: var(--studio-text);
}

html .app-shell .studio-topbar.studio-topbar {
  border-bottom: 1px solid var(--studio-line);
  background: var(--sando-topbar);
  color: var(--studio-text);
}

html .app-shell .studio-rail.studio-rail {
  border-right: 1px solid var(--studio-line);
  background: var(--studio-rail);
  color: var(--studio-text);
}

html .app-shell .studio-theme-toggle.studio-theme-toggle {
  border-color: var(--studio-line-strong);
  background: var(--studio-panel);
  color: var(--studio-text);
}

html.light .app-shell.app-shell:has(.studio-chat-workspace) {
  background: var(--studio-bg) !important;
}

html.light .app-shell:has(.studio-chat-workspace) > .studio-shell.studio-shell,
html.light .app-shell:has(.studio-chat-workspace) .studio-main.studio-main,
html.light .app-shell:has(.studio-chat-workspace) .studio-stage.studio-stage {
  background: var(--studio-bg) !important;
}

/* 注意：工具工位内部还有一个同名的 div.studio-shell.panel 包装层，
   这里必须用直接子选择器（>），否则会把工位内部的 flex 布局也改成 block，
   导致工位面板被撑高、底部按钮挤出屏幕。 */
html .app-shell > .studio-shell.studio-shell,
html .app-shell .studio-stage.studio-stage,
html .app-shell .studio-canvas.studio-canvas {
  background: var(--studio-bg) !important;
}

html .app-shell .studio-main.studio-main,
html .app-shell .studio-stage.studio-stage {
  background: var(--studio-bg) !important;
}

html.light .app-shell .studio-canvas:has(.studio-chat-workspace) {
  background: var(--studio-bg) !important;
}

html .app-shell .studio-assist.studio-assist {
  border-color: var(--studio-line);
  background: var(--studio-panel) !important;
  color: var(--studio-text);
}

html .app-shell .studio-center-composer.studio-center-composer {
  border-color: var(--studio-line-strong);
  background: var(--studio-panel) !important;
  color: var(--studio-text);
}

html .app-shell .studio-center-input.studio-center-input {
  color: var(--studio-text);
}

html .app-shell .studio-center-input.studio-center-input::placeholder {
  color: var(--studio-muted);
}

html.light .app-shell .studio-rail-bottom[data-v-f522b144] {
  background: linear-gradient(180deg, transparent, var(--studio-rail) 36%);
}

.app-shell .studio-brand.studio-brand,
.app-shell .studio-rail-btn span[data-v-f522b144] {
  border-radius: 6px;
}

/* SANDO desktop navigation: keep the brand and workspace actions in one top row. */
html .app-shell > .studio-shell.studio-shell {
  display: block !important;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

html .app-shell .studio-rail.studio-rail {
  position: sticky;
  top: 0;
  z-index: 150;
  width: 100%;
  height: 80px;
  min-height: 80px;
  box-sizing: border-box;
  padding: 9px 18px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  border-right: 0;
  border-bottom: 1px solid var(--studio-line);
  background:
    linear-gradient(100deg, rgba(var(--studio-green-rgb), .16), transparent 34%),
    linear-gradient(180deg, var(--studio-rail), color-mix(in srgb, var(--studio-rail) 88%, transparent));
  box-shadow: 0 8px 28px rgba(4, 21, 12, .16);
  scrollbar-width: none;
}

/* The rail component hides its original brand on this route; rebuild it as the
   first flex items so the Logo, name, and menu share one line. */
html .app-shell .studio-rail.studio-rail::before {
  content: "SANDO AI Platform";
  width: 194px;
  height: 44px;
  flex: 0 0 194px;
  display: block;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  padding: 0 8px 0 47px;
  color: var(--studio-text);
  white-space: nowrap;
  font-size: 15px;
  font-weight: 850;
  line-height: 44px;
  background: transparent url("/api/media/sando-logo.png") 8px center / 33px 33px no-repeat;
  box-shadow: none;
}

html .app-shell .studio-rail.studio-rail::after {
  display: none;
}

html .app-shell .studio-rail.studio-rail::-webkit-scrollbar {
  display: none;
}

html .app-shell .studio-brand.studio-brand {
  width: auto;
  min-width: 194px;
  height: 44px;
  flex: 0 0 auto;
  margin: 0 6px 0 0;
  padding: 0 8px 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--studio-text);
  box-shadow: none;
}

html .app-shell .studio-brand.studio-brand::before {
  content: "SANDO AI Platform";
  order: 2;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: .01em;
}

html .app-shell .studio-brand.studio-brand img {
  order: 1;
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  object-fit: contain;
  padding: 0;
  box-sizing: border-box;
  border-radius: 0;
  background: transparent;
}

html .app-shell .studio-rail-btn.studio-rail-btn {
  width: auto;
  min-width: 64px;
  min-height: 48px;
  height: 48px;
  flex: 0 0 auto;
  grid-template-columns: 28px auto;
  grid-template-rows: 1fr;
  gap: 6px;
  padding: 0 8px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
}

html .app-shell .studio-rail-btn.studio-rail-btn span[data-v-f522b144] {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

/* SANDO icon set: compact geometric marks distinct from the source site's
   original line illustrations. */
html .app-shell .studio-rail-btn .studio-rail-ico svg {
  display: none;
}

html .app-shell .studio-rail-btn .studio-rail-ico::before {
  display: block;
  content: "";
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 17px 17px;
  mask-size: 17px 17px;
}

/* One vector family keeps every menu icon at the same optical weight as the
   13px labels: 24px grid, 1.9 stroke, rounded joins. */
html .app-shell .studio-rail-btn:nth-of-type(1) .studio-rail-ico::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.4 19 7.4v9.2L12 20.6 5 16.6V7.4z'/><path d='M12 8.7l.95 2.35L15.3 12l-2.35.95L12 15.3l-.95-2.35L8.7 12l2.35-.95z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.4 19 7.4v9.2L12 20.6 5 16.6V7.4z'/><path d='M12 8.7l.95 2.35L15.3 12l-2.35.95L12 15.3l-.95-2.35L8.7 12l2.35-.95z'/></svg>");
}

html .app-shell .studio-rail-btn:nth-of-type(2) .studio-rail-ico::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4.6h6.2L18 9.4v9a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6.6a2 2 0 0 1 2-2z'/><path d='M13 4.8v4.6h4.8'/><path d='M8.6 13.4h6.6M8.6 16.6h4.4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4.6h6.2L18 9.4v9a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6.6a2 2 0 0 1 2-2z'/><path d='M13 4.8v4.6h4.8'/><path d='M8.6 13.4h6.6M8.6 16.6h4.4'/></svg>");
}

html .app-shell .studio-rail-btn:nth-of-type(3) .studio-rail-ico::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M6.3 8.2h11.4l1.05 9.3a1.9 1.9 0 0 1-1.9 2.1H7.15a1.9 1.9 0 0 1-1.9-2.1z'/><path d='M9.3 8.2V6.7a2.7 2.7 0 0 1 5.4 0v1.5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M6.3 8.2h11.4l1.05 9.3a1.9 1.9 0 0 1-1.9 2.1H7.15a1.9 1.9 0 0 1-1.9-2.1z'/><path d='M9.3 8.2V6.7a2.7 2.7 0 0 1 5.4 0v1.5'/></svg>");
}

html .app-shell .studio-rail-btn:nth-of-type(4) .studio-rail-ico::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4.3 4.9 8.3l7.1 4 7.1-4z'/><path d='M4.9 12.4 12 16.4l7.1-4'/><path d='M4.9 16.3 12 20.3l7.1-4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4.3 4.9 8.3l7.1 4 7.1-4z'/><path d='M4.9 12.4 12 16.4l7.1-4'/><path d='M4.9 16.3 12 20.3l7.1-4'/></svg>");
}

html .app-shell .studio-rail-btn:nth-of-type(5) .studio-rail-ico::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4.9a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7z'/><path d='M5.6 19.3c0-3.2 2.9-5.2 6.4-5.2s6.4 2 6.4 5.2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4.9a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7z'/><path d='M5.6 19.3c0-3.2 2.9-5.2 6.4-5.2s6.4 2 6.4 5.2'/></svg>");
}

html .app-shell .studio-rail-btn.studio-rail-btn b[data-v-f522b144] {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}

html .app-shell .studio-codex-btn.studio-codex-btn {
  display: none !important;
}

html .app-shell .studio-rail-bottom.studio-rail-bottom {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
}

html .app-shell .studio-main.studio-main {
  height: calc(100vh - 80px);
  min-height: 0;
  grid-template-rows: 0 minmax(0, 1fr);
  grid-template-areas: "topbar" "stage";
}

html .app-shell .studio-topbar-brand.studio-topbar-brand {
  display: none;
}

html .app-shell .studio-topbar.studio-topbar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 151;
  width: auto;
  max-width: min(100vw, 860px);
  height: 80px;
  min-height: 80px;
  box-sizing: border-box;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  overflow: visible;
  border: 0;
  background: transparent;
  pointer-events: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html .app-shell .studio-topbar .studio-top-right {
  min-width: 0;
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  overflow: visible;
  pointer-events: auto;
}

html .app-shell .studio-announcement,
html .app-shell .studio-support-fab,
html .app-shell .studio-topbar-promo {
  font-size: 13px;
}

html .app-shell .studio-support-fab {
  min-height: 40px;
  padding-inline: 12px;
  gap: 7px;
  background: rgba(var(--studio-green-rgb), .14);
  border-color: rgba(var(--studio-green-rgb), .30);
  color: var(--studio-text);
}

html .app-shell .studio-announcement {
  width: 230px;
  flex-basis: 230px;
  height: 38px;
  background: rgba(var(--studio-green-rgb), .10);
  border-color: rgba(var(--studio-green-rgb), .24);
  color: var(--studio-text);
}

html .app-shell .studio-theme-toggle.studio-theme-toggle {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
}

html .app-shell .studio-announcement-label {
  min-height: 18px;
  padding: 0 7px;
  border-radius: 6px;
  background: rgba(var(--studio-green-rgb), .18);
  color: var(--studio-green);
  line-height: 18px;
}

html .app-shell .studio-announcement-title {
  color: var(--studio-text);
}

html .app-shell .studio-topbar .studio-theme-toggle,
html .app-shell .studio-topbar .studio-announcement,
html .app-shell .studio-topbar .studio-support-fab,
html .app-shell .studio-topbar .studio-topbar-promo {
  pointer-events: auto;
}

/* Reserve room for the fixed controls while keeping the left navigation in
   the same horizontal row. */
@media (min-width: 1101px) {
  html .app-shell .studio-rail.studio-rail {
    padding-right: min(860px, 60vw);
  }

  html .app-shell .studio-topbar-promo {
    flex: 0 1 320px;
    width: min(320px, 28vw);
    height: 40px;
    margin: 0 4px;
  }

  html .app-shell .studio-topbar-promo-box,
  html .app-shell .studio-topbar-promo-open,
  html .app-shell .studio-topbar-promo-frame,
  html .app-shell .studio-topbar-promo-img {
    width: min(320px, 28vw);
    height: 40px;
  }
}

@media (max-width: 1100px) {
  html .app-shell .studio-topbar.studio-topbar {
    max-width: 100vw;
    padding-right: 10px;
  }

  html .app-shell .studio-topbar .studio-announcement {
    width: min(248px, 34vw);
    flex-basis: min(248px, 34vw);
  }
}

@media (max-width: 920px) {
  html .app-shell .studio-topbar.studio-topbar {
    height: 76px;
    min-height: 76px;
    padding: 8px 10px;
    gap: 4px;
  }

  html .app-shell .studio-rail.studio-rail {
    height: 76px;
    min-height: 76px;
    padding: 8px 10px;
  }

  html .app-shell .studio-rail.studio-rail::before {
    width: 174px;
    height: 40px;
    flex-basis: 174px;
    padding-left: 41px;
    font-size: 14px;
    line-height: 40px;
    background-size: 29px 29px;
    background-position: 7px center;
  }

  html .app-shell .studio-rail.studio-rail::after {
    display: none;
  }

  html .app-shell .studio-brand.studio-brand {
    min-width: 46px;
    width: 46px;
    height: 44px;
    margin-right: 2px;
    padding: 0;
    justify-content: center;
  }

  html .app-shell .studio-brand.studio-brand::before {
    display: none;
  }

  html .app-shell .studio-brand.studio-brand img {
    width: 37px;
    height: 37px;
  }

  html .app-shell .studio-rail-btn.studio-rail-btn {
    min-width: 62px;
    width: 62px;
    height: 54px;
    padding: 0 6px;
    grid-template-columns: 1fr;
    grid-template-rows: 30px auto;
    gap: 4px;
    font-size: 12px;
  }

  html .app-shell .studio-main.studio-main {
    height: calc(100vh - 76px);
    grid-template-rows: 0 minmax(0, 1fr);
    grid-template-areas: "topbar" "stage";
  }
}

@media (max-width: 720px) {
  html .app-shell .studio-topbar .studio-announcement {
    display: none;
  }

  html .app-shell .studio-topbar .studio-support-fab {
    min-height: 38px;
    padding-inline: 11px;
    font-size: 13px;
  }
}

html .app-shell .studio-rail-btn.is-active span[data-v-f522b144] {
  border-color: var(--studio-line-strong);
  background: var(--studio-green);
  color: var(--sando-active-text);
  box-shadow: none;
}

html .app-shell .studio-chat-welcome.studio-chat-welcome {
  border-radius: 8px;
  background: var(--studio-panel);
  color: var(--studio-text);
  box-shadow: none;
}

.app-shell .studio-command-mode.studio-command-mode {
  border-radius: 6px;
}

html .app-shell .studio-prompt-card.studio-prompt-card {
  border-radius: 8px;
  background: var(--sando-prompt);
  color: var(--studio-text);
  box-shadow: none;
}

@media (max-width: 920px) {
  .home-page .hero[data-v-329e3f7c] {
    grid-template-rows: minmax(560px, 72svh) auto;
    padding-inline: 32px;
  }

  .home-page .hero-title[data-v-329e3f7c] {
    font-size: 3.7rem;
  }
}

@media (max-width: 720px) {
  .home-page.home-page[data-v-329e3f7c]::before {
    height: 620px;
    background-image: var(--sando-photo-overlay), url("/sando-build/21ac4e2a59fda76f/assets/sando-workbench.png");
    background-position: center, 60% center;
  }

  .home-page .content-layer[data-v-329e3f7c] {
    padding-top: 66px;
  }

  .home-page .home-corner-chrome[data-v-329e3f7c]::before {
    height: 62px;
  }

  .home-page .top-brand[data-v-329e3f7c] {
    top: 12px;
    left: 14px;
    gap: 8px;
    max-width: 63vw;
  }

  .home-page .brand-logo[data-v-329e3f7c] {
    width: 36px;
    height: 36px;
  }

  .home-page .brand-name[data-v-329e3f7c] {
    font-size: 13px;
  }

  .home-page .top-start-btn[data-v-329e3f7c] {
    top: 13px;
    right: 14px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  .home-page .hero[data-v-329e3f7c] {
    width: 100%;
    grid-template-rows: minmax(510px, 72svh) auto;
    padding: 0 22px 28px;
    gap: 0;
  }

  .home-page .hero-copy[data-v-329e3f7c] {
    gap: 12px;
    padding: 20px 0;
  }

  .home-page .hero-title[data-v-329e3f7c] {
    font-size: 2.8rem;
    line-height: 1.13;
  }

  .home-page .hero-creative-title[data-v-329e3f7c] {
    margin-top: 10px;
    font-size: 1.65rem;
  }

  .home-page .hero-creative-sub[data-v-329e3f7c],
  .home-page .hero-creative-sub-secondary[data-v-329e3f7c] {
    font-size: .91rem;
    line-height: 1.65;
  }

  .home-page .hero-actions[data-v-329e3f7c] {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    margin-top: 20px;
  }

  .home-page .btn-primary[data-v-329e3f7c],
  .home-page .btn-secondary[data-v-329e3f7c] {
    min-width: 0;
    padding-inline: 8px;
    font-size: 14px;
  }

  .home-page .value-strip[data-v-329e3f7c] {
    grid-template-columns: 1fr;
  }

  .home-page .value-card[data-v-329e3f7c],
  .home-page .value-card[data-v-329e3f7c] + .value-card[data-v-329e3f7c] {
    min-height: 0;
    padding: 23px 0;
    border-left: 0;
    border-bottom: 1px solid var(--sando-border);
  }
}



/* ===== 导航行尺寸微调（2026-09-29 二次调整）=====
   文字比原始版本略大以便阅读，但图标底座收窄、按钮高度克制，
   避免整体变胖占地方；高度、间距、圆角按同一比例协调。 */
html .app-shell .studio-rail.studio-rail {
  height: 92px !important;
  min-height: 92px !important;
  padding: 10px 20px !important;
  gap: 6px !important;
}
html .app-shell .studio-rail.studio-rail::before {
  width: 218px !important;
  height: 50px !important;
  flex: 0 0 218px !important;
  padding: 0 10px 0 53px !important;
  font-size: 17px !important;
  line-height: 50px !important;
  background: transparent url("/api/media/sando-logo.png") 9px center / 38px 38px no-repeat !important;
}
html .app-shell .studio-brand.studio-brand {
  min-width: 218px !important;
  height: 50px !important;
  gap: 10px !important;
}
html .app-shell .studio-brand.studio-brand::before { font-size: 17px !important; }
html .app-shell .studio-brand.studio-brand img {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
}
/* 按钮：文字 15px，图标底座 32px，高度 56px —— 底座只比文字略大，不再臃肿 */
html .app-shell .studio-rail-btn.studio-rail-btn {
  min-width: 68px !important;
  min-height: 56px !important;
  height: 56px !important;
  grid-template-columns: 27px auto !important;
  gap: 6px !important;
  padding: 0 7px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
}
html .app-shell .studio-rail-btn.studio-rail-btn b[data-v-f522b144] { font-size: 15px !important; }
html .app-shell .studio-rail-btn.studio-rail-btn span[data-v-f522b144] {
  width: 27px !important;
  height: 27px !important;
  border-radius: 8px !important;
}
html .app-shell .studio-rail-btn .studio-rail-ico::before {
  width: 17px !important;
  height: 17px !important;
  -webkit-mask-size: 17px 17px !important;
  mask-size: 17px 17px !important;
}
html .app-shell .studio-rail-bottom.studio-rail-bottom { gap: 6px !important; }
html .app-shell .studio-main.studio-main { height: calc(100vh - 92px) !important; }
html .app-shell .studio-topbar.studio-topbar {
  height: 92px !important;
  min-height: 92px !important;
  padding: 11px 20px !important;
}
html .app-shell .studio-announcement,
html .app-shell .studio-support-fab,
html .app-shell .studio-topbar-promo { font-size: 15px !important; }
html .app-shell .studio-support-fab { min-height: 46px !important; padding-inline: 14px !important; }
html .app-shell .studio-announcement { height: 44px !important; width: 264px !important; flex-basis: 264px !important; }
html .app-shell .studio-theme-toggle.studio-theme-toggle {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
}
html .app-shell .studio-announcement-label { min-height: 21px !important; line-height: 21px !important; font-size: 15px !important; }

/* 公告条内部文字（AIGC工作态 / 创作更丝滑）跟随导航字号，避免大小不一 */
html .app-shell .studio-announcement-title,
html .app-shell .studio-announcement-body,
html .app-shell .studio-announcement-viewport,
html .app-shell .studio-announcement em,
html .app-shell .studio-topbar-promo,
html .app-shell .studio-topbar-promo * { font-size: 15px !important; }


/* ===== 导航行紧凑化（2026-09-29 三次调整，参考 Windows 任务栏比例）=====
   思路：文字保持可读（14px），但把图标底座、LOGO、切换按钮、两个胶囊框
   整体收小，减少水平占位，让导航行更接近任务栏那种紧凑感。 */
html .app-shell .studio-rail.studio-rail {
  height: 76px !important;
  min-height: 76px !important;
  padding: 8px 16px !important;
  gap: 5px !important;
}
html .app-shell .studio-rail.studio-rail::before {
  width: 186px !important;
  height: 44px !important;
  flex: 0 0 186px !important;
  padding: 0 8px 0 44px !important;
  font-size: 15px !important;
  line-height: 44px !important;
  background: transparent url("/api/media/sando-logo.png") 8px center / 32px 32px no-repeat !important;
}
html .app-shell .studio-brand.studio-brand { min-width: 186px !important; height: 44px !important; gap: 8px !important; }
html .app-shell .studio-brand.studio-brand::before { font-size: 15px !important; }
html .app-shell .studio-brand.studio-brand img { width: 34px !important; height: 34px !important; flex: 0 0 34px !important; }
/* 底座 23px：只比 15px 文字大一档，接近任务栏图标与文字的比例 */
html .app-shell .studio-rail-btn.studio-rail-btn {
  min-width: 58px !important;
  min-height: 46px !important;
  height: 46px !important;
  grid-template-columns: 23px auto !important;
  gap: 5px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}
html .app-shell .studio-rail-btn.studio-rail-btn b[data-v-f522b144] { font-size: 14px !important; }
html .app-shell .studio-rail-btn.studio-rail-btn span[data-v-f522b144] {
  width: 23px !important;
  height: 23px !important;
  border-radius: 7px !important;
}
html .app-shell .studio-rail-btn .studio-rail-ico::before {
  width: 15px !important;
  height: 15px !important;
  -webkit-mask-size: 15px 15px !important;
  mask-size: 15px 15px !important;
}
html .app-shell .studio-rail-bottom.studio-rail-bottom { gap: 5px !important; }
html .app-shell .studio-main.studio-main { height: calc(100vh - 76px) !important; }
html .app-shell .studio-topbar.studio-topbar {
  height: 76px !important;
  min-height: 76px !important;
  padding: 8px 16px !important;
}
html .app-shell .studio-theme-toggle.studio-theme-toggle {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
}
html .app-shell .studio-announcement { height: 36px !important; width: 216px !important; flex-basis: 216px !important; }
html .app-shell .studio-support-fab { min-height: 38px !important; padding-inline: 12px !important; }
html .app-shell .studio-announcement,
html .app-shell .studio-support-fab,
html .app-shell .studio-topbar-promo,
html .app-shell .studio-announcement-title,
html .app-shell .studio-announcement-body,
html .app-shell .studio-announcement-viewport,
html .app-shell .studio-announcement em,
html .app-shell .studio-topbar-promo * { font-size: 14px !important; }
html .app-shell .studio-announcement-label { min-height: 20px !important; line-height: 20px !important; font-size: 13px !important; padding: 0 6px !important; }


/* ===== 底座极限收窄（2026-09-29 四次调整）=====
   用户要求底座接近 Windows 任务栏的紧凑度：底座缩到 20px，
   图形 14px，按钮左右留白压到 5px，整体占位再降一档。 */
html .app-shell .studio-rail-btn.studio-rail-btn {
  min-width: 54px !important;
  min-height: 44px !important;
  height: 44px !important;
  grid-template-columns: 20px auto !important;
  gap: 4px !important;
  padding: 0 5px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
}
html .app-shell .studio-rail-btn.studio-rail-btn span[data-v-f522b144] {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
}
html .app-shell .studio-rail-btn .studio-rail-ico::before {
  width: 14px !important;
  height: 14px !important;
  -webkit-mask-size: 14px 14px !important;
  mask-size: 14px 14px !important;
}
html .app-shell .studio-rail-bottom.studio-rail-bottom { gap: 4px !important; }


/* ===== 底座缩小 1/5（2026-09-29 五次调整）=====
   用户要求：底座再缩 20%（20px -> 16px），图标 14px 与字体 14px 保持不变。 */
html .app-shell .studio-rail-btn.studio-rail-btn {
  grid-template-columns: 16px auto !important;
}
html .app-shell .studio-rail-btn.studio-rail-btn span[data-v-f522b144] {
  width: 16px !important;
  height: 16px !important;
  border-radius: 5px !important;
}


/* ===== 修正：图标恢复尺寸，底座保持窄（2026-09-29 六次调整）=====
   前面几轮误把图标一起缩小（25->19->17->15->14），这里把图标恢复到 18px，
   底座只比图标大 2px（20px），做到“底座窄、图标清晰”，字体维持 14px。 */
html .app-shell .studio-rail-btn.studio-rail-btn {
  grid-template-columns: 20px auto !important;
}
html .app-shell .studio-rail-btn.studio-rail-btn span[data-v-f522b144] {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
}
html .app-shell .studio-rail-btn .studio-rail-ico::before {
  width: 18px !important;
  height: 18px !important;
  -webkit-mask-size: 18px 18px !important;
  mask-size: 18px 18px !important;
}


/* ===== 按 Windows 任务栏比例对齐（2026-09-29 七次调整）=====
   实测任务栏：图标方块 36px、其中图形 24px，比例 1.5:1。
   这里以 18px 图形为基准，底座取 27px（18 x 1.5），字体 15px 与之协调。 */
html .app-shell .studio-rail-btn.studio-rail-btn {
  grid-template-columns: 27px auto !important;
  min-width: 62px !important;
  min-height: 48px !important;
  height: 48px !important;
  gap: 6px !important;
  padding: 0 7px !important;
  font-size: 15px !important;
}
html .app-shell .studio-rail-btn.studio-rail-btn b[data-v-f522b144] { font-size: 15px !important; }
html .app-shell .studio-rail-btn.studio-rail-btn span[data-v-f522b144] {
  width: 27px !important;
  height: 27px !important;
  border-radius: 8px !important;
}
html .app-shell .studio-rail-btn .studio-rail-ico::before {
  width: 18px !important;
  height: 18px !important;
  -webkit-mask-size: 18px 18px !important;
  mask-size: 18px 18px !important;
}


/* ===== 底座按 Windows 任务栏真实比例修正（2026-09-29 八次调整）=====
   Windows 11 默认任务栏：图标 32px、方块约 40px，比例 1.25:1。
   我们图标 18px，对应底座应为 18 x 1.25 = 22.5px，取 23px。
   （上一版的 27px 是目测估算，偏宽 20%，这里纠正。） */
html .app-shell .studio-rail-btn.studio-rail-btn {
  grid-template-columns: 23px auto !important;
  min-width: 60px !important;
}
html .app-shell .studio-rail-btn.studio-rail-btn span[data-v-f522b144] {
  width: 23px !important;
  height: 23px !important;
  border-radius: 7px !important;
}


/* ===== 导航栏高度压缩到任务栏级别（2026-09-29 九次调整）=====
   用户说的“底座”＝整条导航栏的高度。任务栏实测 49px，这里把导航栏
   从 76px 压到 56px，只动高度与内边距；图标 18px、字号 15px 保持不变。 */
html .app-shell .studio-rail.studio-rail {
  height: 56px !important;
  min-height: 56px !important;
  padding: 5px 14px !important;
}
html .app-shell .studio-main.studio-main { height: calc(100vh - 56px) !important; }
html .app-shell .studio-topbar.studio-topbar {
  height: 56px !important;
  min-height: 56px !important;
  padding: 5px 14px !important;
}
html .app-shell .studio-rail-btn.studio-rail-btn {
  min-height: 42px !important;
  height: 42px !important;
}
html .app-shell .studio-brand.studio-brand { height: 42px !important; }
html .app-shell .studio-rail.studio-rail::before { height: 42px !important; line-height: 42px !important; }
html .app-shell .studio-theme-toggle.studio-theme-toggle {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
}
html .app-shell .studio-announcement { height: 32px !important; }
html .app-shell .studio-support-fab { min-height: 34px !important; }


/* ===== 图标去底色 + 悬停反馈（2026-09-29 十次调整）=====
   默认：图标裸放，不显示底色方块（贴近 Windows 任务栏观感）；
   悬停：出现淡绿底色；选中：保持实心绿底。另外拉开品牌块与首个菜单的距离。 */
html .app-shell .studio-rail-btn.studio-rail-btn span[data-v-f522b144] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html .app-shell .studio-rail-btn.studio-rail-btn:hover span[data-v-f522b144] {
  background: rgba(var(--studio-green-rgb), .18) !important;
  border-color: rgba(var(--studio-green-rgb), .38) !important;
  transform: none !important;
  color: var(--studio-green) !important;
}
html .app-shell .studio-rail-btn.studio-rail-btn.is-active span[data-v-f522b144] {
  background: var(--studio-green) !important;
  border-color: var(--studio-line-strong) !important;
  box-shadow: none !important;
}
html .app-shell .studio-rail-btn.studio-rail-btn.is-active:hover span[data-v-f522b144] {
  background: var(--studio-green) !important;
  transform: none !important;
}
/* 品牌块与「大模型」之间多留一点间距 */
html .app-shell .studio-rail.studio-rail::before { margin-right: 16px !important; }


/* ===== 工具工作台改造成影视墙（2026-09-29）===== */
html body .tools-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important;
  gap: 20px 18px !important;
  align-items: stretch !important;
}
html body .tool-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(10, 44, 25, .10) !important;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease !important;
  text-align: left !important;
}
html body .tool-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 26px rgba(10, 44, 25, .18) !important;
}
/* 封面：竖版 3:4，整块渐变 + 大字工具名 */
html body .tool-card .tool-cover {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 12px 12px 14px !important;
  box-sizing: border-box !important;
  color: #fff !important;
  overflow: hidden !important;
}
html body .tool-card .tool-cover .cover-glyph {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  opacity: .34 !important;
  line-height: 1 !important;
}
html body .tool-card .tool-cover .cover-idx {
  position: absolute !important;
  top: 10px !important;
  left: 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  opacity: .7 !important;
}
html body .tool-card .tool-cover .cover-name {
  position: relative !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .28) !important;
}
html body .tool-card .tool-cover .cover-cat {
  position: relative !important;
  margin-top: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  opacity: .9 !important;
}
html body .tool-card .tool-cover .cover-strip {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 46% !important;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 100%) !important;
  pointer-events: none !important;
}
/* 卡片正文：只留标题与价格，隐藏长描述与标签，贴近影视墙的简洁 */
html body .tool-card .card-body,
html body .tool-card .card-footer { padding: 10px 12px !important; }
html body .tool-card .card-desc,
html body .tool-card .card-summary,
html body .tool-card .tool-tags,
html body .tool-card .card-tags { display: none !important; }
/* 左侧分类：改成影视网站的竖排目录样式 */
html body .toolbox-layout > section:first-child,
html body .toolbox-layout > aside {
  background: #fff !important;
  border: 1px solid rgba(42, 96, 55, .14) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(10, 44, 25, .08) !important;
}

/* ★ 2026-10-09 修夜间模式「工具筛选」栏发灰 + 闪动：
   上面那条白底带了 !important，夜间也会生效 —— 而里面的 .sidebar-panel 是
   「72% 深色 + backdrop-filter: blur(14px)」的玻璃面板，深色压在纯白上合成出来就是灰色；
   blur 每帧重采样那块白底，滚动/重渲染时就会发闪。
   修法：夜间把父层白底去掉、面板改成接近不透明并去掉 backdrop-filter。
   （浅色模式不受影响：那边本来就有 html.light .sidebar-panel 的白色覆盖。） */
html.dark body .toolbox-layout > section:first-child,
html.dark body .toolbox-layout > aside {
  background: transparent !important;
  border-color: rgba(120, 220, 160, .14) !important;
  box-shadow: none !important;
}
html.dark .sidebar-panel,
html.dark .workbench-panel {
  background: rgba(10, 16, 15, .95) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* ===== 工具墙最终版：只留封面与名称（2026-09-30）=====
   参考影视网站的海报墙：竖版封面 2:3 + 封面下方只有一行工具名，
   隐藏分类、副标题、描述、标签、状态、价格等所有文字说明。 */
html body .tools-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 22px 16px !important;
  align-items: start !important;
}
html body .tool-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  overflow: visible !important;
}
html body .tool-card:hover { transform: none !important; box-shadow: none !important; }

/* 封面：纯图，不留任何文字 */
html body .tool-card .tool-cover {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(10, 44, 25, .16) !important;
  transition: transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s ease !important;
}
html body .tool-card:hover .tool-cover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 22px rgba(10, 44, 25, .26) !important;
}
html body .tool-card .tool-cover .cover-name,
html body .tool-card .tool-cover .cover-cat,
html body .tool-card .tool-cover .cover-idx,
html body .tool-card .tool-cover .cover-glyph,
html body .tool-card .tool-cover .cover-strip { display: none !important; }

/* 卡片里除工具名以外的全部内容隐藏 */
html body .tool-card .tool-card-top,
html body .tool-card .card-footer { display: none !important; }
html body .tool-card .tool-card-body > div > *:not(h3) { display: none !important; }
html body .tool-card .tool-card-body { padding: 9px 2px 0 !important; }
html body .tool-card .tool-card-body h3,
html body .tool-card .tool-card-body h3 * {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: #1d3f2a !important;
  text-align: center !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-shadow: none !important;
}
html.light body .tool-card .tool-card-body h3 { color: #1d3f2a !important; }
html.dark body .tool-card .tool-card-body h3 { color: #dcecd6 !important; }

/* 左侧分类：改成影视网站那种朴素的目录行，右侧对齐数量 */
html body .toolbox-sidebar .category-pill {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 12px !important;
  margin: 0 0 2px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #47694f !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
html body .toolbox-sidebar .category-pill:hover { background: rgba(46, 112, 67, .09) !important; }
html body .toolbox-sidebar .category-pill.active {
  background: rgba(46, 112, 67, .15) !important;
  color: #175c33 !important;
  font-weight: 700 !important;
}
html.dark body .toolbox-sidebar .category-pill { color: #b6cfb6 !important; }
html.dark body .toolbox-sidebar .category-pill.active { color: #cfe8a8 !important; }


/* 补齐：卡片内所有文字元素的隐藏清单（按实际层级逐个指定，避免漏项） */
html body .tool-card .tool-category,
html body .tool-card .tool-subtitle,
html body .tool-card .tool-description,
html body .tool-card .tag-row,
html body .tool-card .tag-chip,
html body .tool-card .tool-chip-cluster,
html body .tool-card .scene-chip,
html body .tool-card .status-chip,
html body .tool-card .tool-icon,
html body .tool-card .tool-card-top,
html body .tool-card .card-footer,
html body .tool-card .footer-meta,
html body .tool-card .tool-metrics,
html body .tool-card .tool-price { display: none !important; }


/* 占位封面上的首字标记（有真实图片时自动隐藏） */
html body .tool-card .tool-cover .cover-glyph {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 56px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, .30) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .18) !important;
  pointer-events: none !important;
}


/* ===== 工具墙按分类分组（2026-09-30）=====
   每组一个组名（模仿影视网站的"纪录片 ›"），组内是该分类的工具。
   用 grid-column 跨列 + order 排序实现，不改变组件原有的 DOM 结构。 */
html body .tools-grid {
  grid-auto-flow: row !important;
}
html body .tool-group-head {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 8px 0 2px !important;
  padding: 0 !important;
  color: #1d3f2a !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
}
html body .tool-group-head .group-arrow {
  font-size: 15px !important;
  font-weight: 700 !important;
  opacity: .55 !important;
}
html body .tool-group-head .group-count {
  font-size: 12px !important;
  font-weight: 600 !important;
  opacity: .5 !important;
  margin-left: 2px !important;
}
html.dark body .tool-group-head { color: #dcecd6 !important; }


/* ===== 一键成片工坊：补充的视频参数字段（分辨率 / 生成音频）=====
   原版把这两个参数写死在代码里，界面只能改比例；这里补上选择器，
   样式跟随左侧「项目设定」面板里原有的下选框。 */
.sando-video-params { display: grid; gap: 10px; }
.sando-video-params select {
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #1b1b1b;
  color: #f3f8f3;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.sando-video-params select:focus {
  outline: none;
  border-color: #8ff6ba;
}


/* ===== 工具墙封面（2026-09-30）=====
   用卡片自身的伪元素画一张竖版 2:3 海报，避免往 Vue 管理的 DOM 里插节点。
   - 有真实图片：把图片放进 assets/tool-covers/ 并在 manifest.json 登记，
     页面脚本会把 --cover-image 设成 url(...)，同时清空首字标记。
   - 没有图片：--cover-image 是分类渐变色，中间显示工具名首字。 */
html body .tool-card {
  position: relative !important;
  overflow: visible !important;
}
html body .tool-card::before {
  content: attr(data-cover-glyph) !important;
  position: static !important;
  inset: auto !important;
  order: -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: 10px !important;
  background-image: var(--cover-image, linear-gradient(150deg, #35735a, #10382a)) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: rgba(255, 255, 255, .34) !important;
  font-size: 46px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .28) !important;
  box-shadow: 0 6px 18px rgba(10, 44, 25, .22) !important;
  transition: transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s ease !important;
  pointer-events: none !important;
}
html body .tool-card:hover::before {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 26px rgba(10, 44, 25, .3) !important;
}
/* 海报下面只留工具名，不允许正文被 flex 拉高 */
html body .tool-card .tool-card-body {
  flex: 0 0 auto !important;
}
html body .tool-card {
  min-height: 0 !important;
}