.tool-v2 {
  --tool-accent: #913139;
  --tool-dark: #5f2026;
  --tool-soft: #fbefef;
  --tool-page: #7d292f;
  margin: 0;
}

.tool-v2.audio-theme { --tool-accent: #176fa8; --tool-dark: #174d70; --tool-soft: #edf7fd; --tool-page: #dbeef9; }
.tool-v2.image-theme { --tool-accent: #2f8050; --tool-dark: #205d39; --tool-soft: #eef8f1; --tool-page: #dcefe2; }

.tool-global-header {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 0 max(20px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(21, 29, 34, .12);
  background: rgba(255, 255, 255, .96);
}

.tool-global-brand { display: inline-flex; align-items: center; gap: 10px; color: #182026; font-family: "Yu Mincho", serif; font-weight: 800; text-decoration: none; }
.tool-global-brand > span { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: #20282e; font-family: Georgia, serif; font-size: 10px; }
.tool-global-header nav { display: flex; gap: 8px; }
.tool-global-header nav a { min-width: 54px; padding: 8px 12px; border-bottom: 2px solid transparent; color: #68727a; text-align: center; text-decoration: none; font-size: 13px; font-weight: 800; }
.tool-global-header nav a:hover, .tool-global-header nav a.active { border-color: var(--tool-accent); color: var(--tool-dark); }

.tool-v2.video-theme { background: var(--tool-page); }
.tool-v2.audio-theme, .tool-v2.image-theme { background: var(--tool-page); }
.tool-v2 .shell, .tool-v2 .app-shell { padding-top: 28px; }
.tool-v2 .workspace, .tool-v2 .workbench { position: relative; }
.tool-v2 .workspace::before, .tool-v2 .workbench::before { position: absolute; z-index: 2; top: 0; left: 0; width: 6px; height: 74px; background: var(--tool-accent); content: ""; }
.tool-v2 .panel, .tool-v2 .drop-panel, .tool-v2 .settings-panel, .tool-v2 .progress-panel { border-color: color-mix(in srgb, var(--tool-accent), white 70%); background: var(--tool-soft); }
.tool-v2 .primary-button { background: var(--tool-accent); }
.tool-v2 .primary-button:not(:disabled):hover { background: var(--tool-dark); }
.tool-v2 .status-pill.ready { color: var(--tool-dark); border-color: color-mix(in srgb, var(--tool-accent), white 55%); background: color-mix(in srgb, var(--tool-accent), white 90%); }
.tool-v2 .drop-zone:hover, .tool-v2 .drop-zone.dragging { border-color: var(--tool-accent); background: color-mix(in srgb, var(--tool-accent), white 94%); }
.tool-v2 .tool-info { margin-top: 28px; }
.tool-v2 .tool-info > div { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--tool-accent), white 70%); background: rgba(255,255,255,.9); }
.tool-v2 .tool-info > div::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tool-accent); content: ""; }
.tool-v2 .tool-info h2 { color: var(--tool-dark); }
.tool-v2 .tool-info a { color: var(--tool-dark); }
.tool-v2 .tool-footer a { border-radius: 4px; }

.result-summary { display: grid; grid-template-columns: 1fr 36px 1fr; gap: 12px; align-items: center; margin-top: 6px; padding: 14px; border: 1px solid color-mix(in srgb, var(--tool-accent), white 75%); background: rgba(255,255,255,.76); }
.result-summary > div { display: grid; gap: 4px; min-width: 0; }
.result-summary span { color: #788188; font-size: 11px; font-weight: 800; }
.result-summary strong { overflow: hidden; color: #243039; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.result-summary i { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: var(--tool-accent); font-style: normal; }

@media (max-width: 720px) {
  .tool-global-header { min-height: 56px; padding: 0 10px; }
  .tool-global-brand { font-size: 13px; }.tool-global-brand > span { width: 26px; height: 26px; }
  .tool-global-header nav { gap: 0; }.tool-global-header nav a { min-width: 43px; padding: 7px 8px; font-size: 12px; }
  .tool-v2 .shell, .tool-v2 .app-shell { padding-top: 18px; }
  .result-summary { grid-template-columns: 1fr; }.result-summary i { width: 28px; height: 28px; transform: rotate(90deg); }
}
