:root {
  --accent: #ff5ca6 !important;
  --accent2: #ff8cbd !important;
  --primary: #ff5ca6 !important;
  --primary-color: #ff5ca6 !important;
  --tb-bg: #130d14;
  --tb-surface: #181319;
  --tb-panel: #1b171e;
  --tb-popover: #211c24;
  --tb-text: #fdf7fa;
  --tb-muted: #c791aa;
  --tb-dim: #8e687b;
  --tb-pink: #ff5ca6;
  --tb-pink-soft: #ff8cbd;
  --tb-success: #60e8b4;
  --tb-warning: #f2b56b;
  --tb-error: #ff6f88;
  --tb-line: rgba(255, 141, 194, 0.22);
  --tb-line-strong: rgba(255, 141, 194, 0.38);
  --tb-radius-shell: 20px;
  --tb-radius-panel: 16px;
  --tb-radius-control: 10px;
  --tb-radius-status: 6px;
  color-scheme: dark;
}

body.tb-theme {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--tb-text);
  background: var(--tb-bg);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  scrollbar-color: var(--tb-pink) var(--tb-bg);
}

.toolbox-nav,
.toolbox-hero { box-sizing: border-box; }

.toolbox-hero {
  display: flex;
  min-height: 154px;
  padding: 28px 24px 30px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #171219;
  border-bottom: 1px solid rgba(255, 141, 194, 0.08);
}

.toolbox-hero__title {
  margin: 0 !important;
  color: var(--tb-text) !important;
  font-size: clamp(25px, 2.2vw, 32px) !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em !important;
}

.toolbox-hero__subtitle {
  margin: 12px 0 0 !important;
  color: #a98c9c !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

body.tb-theme::before {
  position: fixed;
  z-index: -1;
  top: -24rem;
  right: -18rem;
  width: min(48rem, 62vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 92, 166, 0.28), transparent 68%);
  pointer-events: none;
  content: "";
}

.tb-mono,
.toolbox-nav {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
}

.toolbox-nav {
  position: relative;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 64px;
  padding: 0 24px;
  color: var(--tb-text);
  background: rgba(19, 13, 20, 0.94);
  border-bottom: 1px solid var(--tb-line);
  backdrop-filter: blur(18px);
}

.toolbox-nav__brand {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.toolbox-nav__brand b {
  color: var(--tb-pink);
}

.toolbox-nav__identity {
  color: var(--tb-muted);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.toolbox-nav__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.toolbox-nav__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tb-muted);
  font-size: 10px;
}

.toolbox-nav__status::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tb-success);
  box-shadow: 0 0 10px rgba(96, 232, 180, 0.75);
  content: "";
}

.toolbox-nav__home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  color: var(--tb-text);
  background: var(--tb-panel);
  border: 1px solid var(--tb-line-strong);
  border-radius: var(--tb-radius-control);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 12px;
  text-decoration: none;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.toolbox-nav__home:hover,
.toolbox-nav__home:focus-visible {
  color: var(--tb-bg);
  background: var(--tb-pink);
  border-color: var(--tb-pink);
}

.tb-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
}

body.tb-theme :where(button, input, select, textarea) {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

body.tb-theme :where(button, .btn, [role="button"]) {
  color: var(--tb-text) !important;
  background: var(--tb-panel) !important;
  border-color: var(--tb-line-strong) !important;
  border-radius: var(--tb-radius-control) !important;
  box-shadow: none !important;
}

body.tb-theme :where(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  color: var(--tb-text) !important;
  background-color: var(--tb-panel) !important;
  border-color: var(--tb-line-strong) !important;
  border-radius: var(--tb-radius-control) !important;
}

body.tb-theme :where(input, select, textarea, button, a):focus-visible {
  outline: 2px solid var(--tb-pink) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 92, 166, 0.14) !important;
}

body.tb-theme :where(.card, .panel, .section, .settings-panel, .upload-section, .preview-section, .sidebar, .controls, .control-panel) {
  color: var(--tb-text);
  background-color: var(--tb-panel) !important;
  border-color: var(--tb-line) !important;
  border-radius: var(--tb-radius-panel) !important;
}

body.tb-theme :where(.upload-area, .drop-zone, .upload-zone, .dropzone) {
  color: var(--tb-muted) !important;
  background-color: var(--tb-surface) !important;
  border-color: var(--tb-line-strong) !important;
  border-radius: var(--tb-radius-panel) !important;
}

body.tb-theme :where(.primary-btn, .btn-primary, .process-btn, .download-btn, button.primary) {
  color: var(--tb-bg) !important;
  background: var(--tb-pink) !important;
  border-color: var(--tb-pink) !important;
  box-shadow: none !important;
}

body.tb-theme :where(.primary-btn, .btn-primary, .process-btn, .download-btn, button.primary):hover {
  background: var(--tb-pink-soft) !important;
}

body.tb-theme :where(.danger, .btn-danger, .delete-btn) {
  color: #ffafc3 !important;
  background: rgba(255, 111, 136, 0.08) !important;
  border-color: rgba(255, 111, 136, 0.48) !important;
}

body.tb-theme :where(.status, .badge, .tag, .chip, .notice, .alert) {
  border-radius: var(--tb-radius-status) !important;
}

body.tb-theme :where(.preset-tag, .platform-tag, .platform-badge, .ratio-badge, .count-badge) {
  color: var(--tb-bg) !important;
  background: var(--tb-pink) !important;
  border-color: var(--tb-pink) !important;
  border-radius: var(--tb-radius-status) !important;
}

body.tb-theme .home-btn {
  display: none !important;
}

body.tb-theme a[href*="zzgjx.top"]:not(.toolbox-nav__home) {
  display: none !important;
}

/* Per-tool compatibility skin: the original pages use different class systems. */
body.tb-tool-01 :where(.app-container,.main-panel,.left-panel,.right-panel,.toolbar,.control-section,.settings-panel,.preset-btn,.tool-btn,.png-upload-box,.zoom-toolbar) {
  color: var(--tb-text) !important;
  background: var(--tb-panel) !important;
  border-color: var(--tb-line) !important;
  border-radius: var(--tb-radius-panel) !important;
  box-shadow: none !important;
}
body.tb-tool-01 :where(.mode-tabs,.mode-tab) { background: var(--tb-panel) !important; color: var(--tb-muted) !important; border-color: var(--tb-line) !important; }
body.tb-tool-01 .mode-tab.active { background: var(--tb-pink) !important; color: var(--tb-bg) !important; }
body.tb-tool-01 :where(.tool-btn.active,.preset-btn.active,#btnConfirm) { background: var(--tb-pink) !important; color: var(--tb-bg) !important; }
body.tb-tool-01 :where(.container > .header) { display: none !important; }
body.tb-tool-01 .container { background: var(--tb-panel) !important; }
body.tb-tool-01 :where(.upload-text,.upload-hint,.input-label,.section-title,.checkbox-row,.status-message,.preset-desc,.png-info,label,p) { color: var(--tb-text) !important; opacity: 1 !important; }
body.tb-tool-01 :where(.mode-tab,.mode-tab *,.sidebar,.sidebar *) { color: var(--tb-text) !important; opacity: 1 !important; }
body.tb-tool-01 .toolbox-hero__subtitle { color: #a98c9c !important; }
body.tb-tool-01 .mode-tabs { gap: 8px; padding: 10px; border: 0 !important; border-radius: var(--tb-radius-panel) !important; }
body.tb-tool-01 .mode-tab { border: 1px solid var(--tb-line) !important; border-radius: var(--tb-radius-control) !important; }
body.tb-tool-01 .mode-tab.active,
body.tb-tool-01 .mode-tab.active *,
body.tb-tool-01 .sidebar :where(.preset-btn.active,.preset-btn.active *) { color: var(--tb-bg) !important; }
body.tb-tool-02 > .header { display: none !important; }
body.tb-tool-03 .container > h1 { display: none !important; }
body.tb-tool-04 > .header,
body.tb-tool-05 > header,
body.tb-tool-06 > .header,
body.tb-tool-09 > .header { display: none !important; }
body.tb-tool-07 .container > h1 { display: none !important; }
body.tb-tool-08 .app > .header h1 { display: none !important; }
body.tb-tool-08 .app > .header { justify-content: flex-end; min-height: 56px; }
body.tb-tool-02 .main-upload-area { background: var(--tb-surface) !important; border-color: var(--tb-line-strong) !important; border-radius: var(--tb-radius-panel) !important; }
body.tb-tool-02 :where(.pos-box,.tips,.notice) { background: var(--tb-surface) !important; color: var(--tb-muted) !important; border-color: var(--tb-line) !important; border-radius: var(--tb-radius-control) !important; }
body.tb-tool-02 :where(.preset-btn,#processBtn) { background: var(--tb-pink) !important; color: var(--tb-bg) !important; }
body.tb-tool-03 :where(.upload-area,.preview-container,.settings-panel,.info-panel,.output-section) { background: var(--tb-panel) !important; border-color: var(--tb-line) !important; border-radius: var(--tb-radius-panel) !important; }
body.tb-tool-05 :where(header,.stats-bar,.item-card,.item-shop,.item-img-wrap) { background: var(--tb-panel) !important; border-color: var(--tb-line) !important; }
body.tb-tool-05 :where(.item-link-btn,.stat-chip) { color: var(--tb-pink-soft) !important; border-color: var(--tb-line-strong) !important; }
body.tb-tool-06 { --accent-dark: #ff5ca6 !important; --bg-primary: #130d14 !important; --bg-card: #1b171e !important; --bg-card-hover: #211c24 !important; }
body.tb-tool-06 :where(.header-badge,.upload-icon,.upload-btn,.btn-primary) { background: var(--tb-pink) !important; color: var(--tb-bg) !important; border-color: var(--tb-pink) !important; }
body.tb-tool-07 :where(.config-box,.preview-card) { background: var(--tb-panel) !important; color: var(--tb-text) !important; border: 1px solid var(--tb-line) !important; border-radius: var(--tb-radius-panel) !important; }
body.tb-tool-07 :where(label,.preview-card h3,.upload-area p) { color: var(--tb-text) !important; }
body.tb-tool-07 #download-btn { background: var(--tb-pink) !important; color: var(--tb-bg) !important; }
body.tb-tool-07 #download-btn:disabled { opacity: .48; }

body.tb-theme :where(img, canvas, .preview, .preview-container, .image-card, .product-card, .screenshot-card) {
  border-radius: var(--tb-radius-panel);
}

body.tb-theme :where(.modal, .modal-content, .dialog) {
  color: var(--tb-text) !important;
  background: var(--tb-popover) !important;
  border-color: var(--tb-line) !important;
  border-radius: var(--tb-radius-shell) !important;
}

body.tb-theme :where(h1, h2, h3, h4, label, p, span) {
  text-shadow: none;
}

body.tb-theme :where(a) {
  accent-color: var(--tb-pink);
}

body.tb-theme :where(input[type="range"], input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--tb-pink);
}

.tb-surface {
  color: var(--tb-text) !important;
  background: var(--tb-surface) !important;
}

.tb-panel {
  color: var(--tb-text) !important;
  background: var(--tb-panel) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-radius-panel) !important;
}

.tb-rounded {
  border-radius: var(--tb-radius-control) !important;
}

.tb-title-accent {
  color: var(--tb-pink) !important;
}

@media (max-width: 760px) {
  html, body.tb-theme { max-width: 100%; overflow-x: hidden; }
  body.tb-theme { padding-left: 0 !important; padding-right: 0 !important; }
  body.tb-theme :where(.container,.app,.main-container,.app-container) { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .toolbox-nav {
    grid-template-columns: 1fr auto;
    gap: 12px;
    min-height: 58px;
    padding: 8px 14px;
  }

  .toolbox-nav__identity {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-bottom: 4px;
  }

  .toolbox-nav__status {
    display: none;
  }

  .toolbox-nav__home { font-size: 0; padding: 9px; }
  .toolbox-nav__home .tb-icon { width: 16px; height: 16px; }
  .toolbox-hero { min-height: 132px; padding: 24px 18px; }
  .toolbox-hero__subtitle { max-width: 32em; margin-top: 9px !important; font-size: 13px !important; }

  body.tb-tool-01 .main-content { grid-template-columns: minmax(0,1fr) !important; }
  body.tb-tool-01 :where(.canvas-area,.canvas-container,.sidebar,.toolbar) { min-width: 0 !important; max-width: 100% !important; }
  body.tb-tool-01 .mode-tabs { overflow-x: auto; }
  body.tb-tool-01 .mode-tab { min-width: 132px; }

  body.tb-tool-05 .container { grid-template-columns: 1fr !important; }

  body.tb-tool-08 .app { height: auto !important; min-height: calc(100vh - 86px); }
  body.tb-tool-08 .header { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  body.tb-tool-08 .main { flex-direction: column; overflow: visible; }
  body.tb-tool-08 .toolbar { width: 100%; flex-direction: row; justify-content: center; padding: 8px; overflow-x: auto; }
  body.tb-tool-08 .tool-sep { width: 1px; height: 28px; margin: 0 6px; }
  body.tb-tool-08 .canvas-area { flex: none; width: 100%; height: 420px; min-height: 420px; }
  body.tb-tool-08 .panel { width: 100%; max-height: none; border-left: 0; border-top: 1px solid var(--tb-line); }
  body.tb-tool-08 .statusbar { position: static; }

  body.tb-tool-09 .preset-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}