:root {
  color-scheme: dark;
  --bg: #080b10;
  --bg-deep: #030508;
  --surface: rgba(18, 24, 31, 0.58);
  --surface-strong: rgba(22, 30, 39, 0.78);
  --surface-soft: rgba(255, 255, 255, 0.055);
  --line: rgba(226, 238, 255, 0.14);
  --line-strong: rgba(226, 238, 255, 0.28);
  --edge: rgba(255, 255, 255, 0.42);
  --text: #f7fbff;
  --text-soft: #cbd8e8;
  --muted: #8fa0b3;
  --accent: #60b7ff;
  --accent-strong: #2f89e8;
  --green: #48d49b;
  --amber: #f2b35d;
  --red: #ff6a7a;
  --cyan: #58d5e8;
  --focus: rgba(96, 183, 255, 0.36);
  --radius: 8px;
  --radius-lg: 10px;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.34), 0 1px 0 rgba(255,255,255,0.06) inset;
  --shadow-lift: 0 28px 90px rgba(0, 0, 0, 0.42), 0 1px 0 rgba(255,255,255,0.08) inset;
  --blur: 24px;
  --sat: 170%;
  font-family: "Segoe UI Variable", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(11, 16, 22, 0.98) 0%, rgba(5, 8, 12, 0.96) 44%, rgba(12, 15, 17, 0.98) 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 86px);
  font-size: 14px;
  line-height: 1.5;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(100deg, transparent 0%, rgba(96,183,255,0.08) 24%, transparent 42%),
    linear-gradient(260deg, transparent 4%, rgba(72,212,155,0.07) 34%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 32%, rgba(255,255,255,0.03));
  opacity: 0.9;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.14;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.5) 52%, transparent 100%);
}

button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.46; }
a { color: inherit; }
input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 12, 18, 0.68);
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
input::placeholder, textarea::placeholder { color: rgba(203, 216, 232, 0.48); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: rgba(96, 183, 255, 0.66);
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%), linear-gradient(135deg, var(--text-soft) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 12px) 19px; background-size: 6px 6px; background-repeat: no-repeat; }

.glass-defs { position: absolute; pointer-events: none; }
.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: #fff;
  color: #03101c;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.glass-panel, .glass-bar, .panel, .liquid-surface {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.045)),
    var(--surface);
  backdrop-filter: blur(var(--blur)) saturate(var(--sat)) contrast(1.06);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)) contrast(1.06);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.glass-panel::before, .glass-bar::before, .panel::before, .liquid-surface::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(125deg, rgba(255,255,255,0.28), transparent 26%, rgba(255,255,255,0.08) 64%, transparent),
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 34%);
  opacity: 0.78;
}

.glass-panel::after, .glass-bar::after, .panel::after, .liquid-surface::after {
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(90deg, rgba(255,255,255,0.04), transparent 45%, rgba(255,255,255,0.06));
  filter: url(#glass-distortion);
  opacity: 0.7;
}

.app-shell {
  display: none;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns 220ms ease;
}
body.workbench-open .app-shell { display: grid; }
body.workbench-open.sidebar-collapsed .app-shell { grid-template-columns: 76px minmax(0, 1fr); }
body.workbench-open.sidebar-hidden .app-shell { grid-template-columns: minmax(0, 1fr); }

.app-skip-link { display: none; }
body.workbench-open > .skip-link:not(.app-skip-link) { display: none; }
body.workbench-open .app-skip-link { display: block; }

.sidebar-reveal {
  position: fixed;
  left: 14px;
  top: 14px;
  z-index: 35;
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(96,183,255,0.46);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)),
    rgba(18, 28, 40, 0.72);
  color: #f7fbff;
  font-weight: 850;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.sidebar-reveal svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}
.sidebar-reveal:hover {
  border-color: rgba(96,183,255,0.72);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)),
    rgba(47,137,232,0.26);
  transform: translateY(-1px);
}
.sidebar-reveal:active { transform: scale(0.985); }
body.sidebar-hidden .sidebar-reveal { display: inline-flex; }
body.sidebar-hidden .sidebar { display: none; }

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 14px 10px;
  border-width: 0 1px 0 0;
  border-radius: 0;
  overflow-y: auto;
}

.brand-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.sidebar-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.sidebar-control {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  background: rgba(255,255,255,0.055);
  color: #dff4ff;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.sidebar-control:hover {
  border-color: rgba(96,183,255,0.56);
  background: rgba(96,183,255,0.14);
}
.sidebar-control:active { transform: scale(0.95); }
.sidebar-control svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  color: #06121e;
  background: linear-gradient(145deg, #f9fbff, #98cef7 46%, #4bbf9b);
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 14px 32px rgba(96,183,255,0.22);
}
.brand-title { font-weight: 800; white-space: nowrap; }
.brand-subtitle { margin-top: 2px; color: var(--muted); font-size: 12px; }
.nav-label { margin: 18px 8px 8px; color: var(--muted); font-size: 12px; font-weight: 800; }

.side-nav { display: grid; gap: 6px; }
.side-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-soft);
  text-align: left;
  font-weight: 760;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.side-nav button:hover {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.07);
  transform: translateY(-1px);
}
.side-nav button:active { transform: scale(0.985); }
.side-nav button.active {
  color: #fff;
  border-color: rgba(96,183,255,0.48);
  background: linear-gradient(135deg, rgba(96,183,255,0.24), rgba(72,212,155,0.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 12px 34px rgba(0,0,0,0.18);
}

.sidebar-home {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  margin-top: auto;
  padding: 10px;
  border: 1px solid rgba(96,183,255,0.34);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)),
    rgba(96,183,255,0.08);
  color: #f6fbff;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.sidebar-home:hover {
  border-color: rgba(96,183,255,0.62);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.17), rgba(255,255,255,0.06)),
    rgba(96,183,255,0.14);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}
.sidebar-home:active { transform: scale(0.985); }
.sidebar-home-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  color: #06121e;
  background: linear-gradient(145deg, #f9fbff, #98cef7 46%, #4bbf9b);
  font-weight: 900;
}
.sidebar-home span:not(.sidebar-home-icon) {
  font-weight: 900;
}
.sidebar-home small {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 750;
}

body.sidebar-collapsed .sidebar {
  padding-inline: 8px;
  overflow-x: hidden;
}
body.sidebar-collapsed .brand-card {
  display: grid;
  justify-items: center;
  min-height: 88px;
  padding: 8px;
}
body.sidebar-collapsed .brand-card > div:not(.sidebar-controls),
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .side-nav button span:last-child,
body.sidebar-collapsed .sidebar-home span:not(.sidebar-home-icon),
body.sidebar-collapsed .sidebar-home small {
  display: none;
}
body.sidebar-collapsed .sidebar-controls {
  display: grid;
  gap: 6px;
}
body.sidebar-collapsed [data-sidebar-toggle] svg {
  transform: rotate(180deg);
}
body.sidebar-collapsed .side-nav button {
  justify-content: center;
  padding-inline: 0;
}
body.sidebar-collapsed .sidebar-home {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 52px;
  padding: 8px;
}
body.sidebar-collapsed .sidebar-home-icon {
  grid-row: auto;
}

.svg-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: currentColor;
}
.svg-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.main {
  min-width: 0;
  padding: 0 22px 30px;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  margin: 0 -22px;
  padding: 0 22px;
  border-width: 0 0 1px;
  border-radius: 0;
}
.crumb {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.crumb span, .crumb b { color: var(--accent); font-size: 13px; }
.crumb h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  text-wrap: balance;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(560px, 48vw);
}
.search-box { position: relative; flex: 1; min-width: 160px; }
.search-box input { padding-left: 40px; background: rgba(7, 12, 18, 0.66); }
.search-box span::before {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 12px;
  height: 12px;
  content: "";
  border: 2px solid rgba(203,216,232,0.7);
  border-radius: 999px;
}
.search-box span::after {
  position: absolute;
  left: 25px;
  top: 27px;
  width: 8px;
  height: 2px;
  content: "";
  border-radius: 2px;
  background: rgba(203,216,232,0.7);
  transform: rotate(45deg);
}
.icon-status, .admin-chip {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.07);
}
.icon-status {
  position: relative;
}
.icon-status::before {
  position: absolute;
  left: 17px;
  top: 17px;
  width: 10px;
  height: 10px;
  content: "";
  border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 0 20px rgba(242,179,93,0.62);
}
.icon-status.ready::before { background: var(--green); box-shadow: 0 0 20px rgba(72,212,155,0.66); }
.admin-chip {
  padding: 0 13px;
  color: #dff4ff;
  font-weight: 800;
}
.view { padding-top: 18px; }

.product-home {
  position: relative;
  min-height: 100dvh;
  padding: 18px clamp(14px, 4vw, 48px) 48px;
  overflow-x: hidden;
}
body.workbench-open .product-home { display: none; }
.product-home::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(120deg, rgba(96,183,255,0.11), transparent 30%),
    linear-gradient(240deg, rgba(72,212,155,0.09), transparent 32%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 92px);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.88) 58%, rgba(0,0,0,0.24) 100%);
}
.product-home::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.08;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.55) 1px, transparent 0);
  background-size: 18px 18px;
}

.marketing-nav {
  position: sticky;
  top: 14px;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(136px, 1fr);
  align-items: center;
  gap: 16px;
  width: min(1180px, 100%);
  min-height: 64px;
  margin: 0 auto 38px;
  padding: 8px 10px 8px 12px;
  border-radius: var(--radius-lg);
}
.marketing-brand,
.marketing-links,
.landing-actions,
.hero-metrics,
.tile-topline,
.job-row {
  display: flex;
  align-items: center;
}
.marketing-brand {
  gap: 10px;
  min-width: 0;
  font-weight: 900;
  text-decoration: none;
}
.marketing-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  color: #05111d;
  background: linear-gradient(145deg, #f7fbff, #a7d8ff 46%, #60d6a7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82), 0 16px 36px rgba(96,183,255,0.2);
}
.marketing-links {
  justify-content: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.045);
}
.marketing-links a,
.marketing-nav-cta,
.landing-btn {
  min-height: 44px;
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 850;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.marketing-links a {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  color: var(--text-soft);
}
.marketing-links a:hover,
.marketing-links a:focus-visible {
  color: var(--text);
  background: rgba(255,255,255,0.075);
}
.marketing-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  padding: 0 16px;
  border: 1px solid rgba(96,183,255,0.48);
  background: rgba(96,183,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.marketing-nav-cta:hover,
.landing-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(96,183,255,0.72);
}
.marketing-nav-cta:active,
.landing-btn:active,
.feature-card:active,
.scenario-card:active {
  transform: scale(0.985);
}

.landing-hero,
.landing-section,
.landing-cta {
  width: min(1180px, 100%);
  margin-inline: auto;
}
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: 34px;
  min-height: 680px;
  padding-bottom: 24px;
}
.landing-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 700px;
}
.landing-eyebrow,
.section-kicker {
  margin: 0 0 12px;
  color: #75d9ff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.landing-hero h1 {
  margin: 0;
  max-width: 14ch;
  font-size: 64px;
  line-height: 1.04;
}
.landing-hero h1 span { display: block; }
.landing-lede {
  max-width: 58ch;
  margin: 20px 0 0;
  color: #d8e6f5;
  font-size: 18px;
  line-height: 1.76;
  text-wrap: pretty;
}
.landing-actions {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  touch-action: manipulation;
}
.landing-btn.primary {
  border-color: rgba(96,183,255,0.74);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08)),
    linear-gradient(135deg, rgba(47,137,232,0.96), rgba(44,156,126,0.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 20px 50px rgba(47,137,232,0.24);
}
.landing-btn.secondary {
  background: rgba(255,255,255,0.06);
}
.hero-metrics {
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
}
.hero-metrics div {
  min-width: 104px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.055);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.hero-metrics dt {
  color: #fbfdff;
  font-size: 22px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}
.hero-metrics dd {
  margin: 1px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 750;
}

.hero-visual {
  position: relative;
  min-height: 600px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)),
    rgba(8, 13, 20, 0.48);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  backdrop-filter: blur(28px) saturate(175%);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
}
.hero-visual::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(255,255,255,0.16), transparent 32%, rgba(96,183,255,0.08) 58%, transparent);
}
.masonry-wall {
  column-count: 3;
  column-gap: 12px;
}
.asset-tile {
  position: relative;
  display: inline-block;
  width: 100%;
  min-height: 150px;
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)),
    rgba(15, 22, 32, 0.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 16px 44px rgba(0,0,0,0.22);
  break-inside: avoid;
  overflow: hidden;
  animation: landingRise 380ms ease both;
}
.asset-tile:nth-child(2) { animation-delay: 40ms; }
.asset-tile:nth-child(3) { animation-delay: 80ms; }
.asset-tile:nth-child(4) { animation-delay: 120ms; }
.asset-tile:nth-child(5) { animation-delay: 160ms; }
.asset-tile:nth-child(6) { animation-delay: 200ms; }
.asset-tile.tall { min-height: 260px; }
.asset-tile.medium { min-height: 210px; }
.asset-tile.wide { min-height: 166px; }
.asset-tile strong,
.feature-card h3,
.scenario-card h3 {
  display: block;
  margin: 12px 0 5px;
  color: #fbfdff;
  font-size: 18px;
  line-height: 1.25;
}
.asset-tile small,
.feature-card p,
.scenario-card p,
.section-heading p,
.landing-cta p,
.trust-grid p,
.workflow-steps p,
.proof-card span {
  color: var(--text-soft);
}
.tile-topline,
.job-row {
  justify-content: space-between;
  gap: 10px;
  color: #d9f4ff;
  font-size: 12px;
  font-weight: 850;
}
.video-frame,
.image-stack,
.waveform,
.file-lines {
  margin-top: 14px;
}
.video-frame {
  position: relative;
  display: grid;
  align-content: end;
  height: 150px;
  padding: 12px;
  border-radius: var(--radius);
  background:
    linear-gradient(160deg, rgba(96,183,255,0.42), transparent 52%),
    linear-gradient(25deg, rgba(72,212,155,0.36), transparent 58%),
    #121d2a;
}
.video-frame span {
  display: block;
  height: 7px;
  margin-top: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,0.48);
}
.video-frame span:nth-child(1) { width: 68%; }
.video-frame span:nth-child(2) { width: 44%; }
.video-frame span:nth-child(3) { width: 78%; background: rgba(72,212,155,0.68); }
.rule-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 18px;
}
.rule-line b,
.rule-line span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 9px;
  border-radius: 7px;
  background: rgba(96,183,255,0.13);
  color: #dff4ff;
}
.image-stack {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  grid-template-rows: 74px 74px;
  gap: 8px;
}
.image-stack span {
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,255,255,0.2), rgba(96,183,255,0.16)), #182436;
}
.image-stack span:first-child { grid-row: span 2; background: linear-gradient(145deg, rgba(72,212,155,0.3), rgba(96,183,255,0.16)), #162535; }
.waveform {
  display: flex;
  align-items: end;
  gap: 6px;
  height: 92px;
}
.waveform span {
  flex: 1;
  min-width: 8px;
  border-radius: 99px;
  background: linear-gradient(180deg, #7fe7ff, #46d29d);
}
.waveform span:nth-child(1) { height: 42%; }
.waveform span:nth-child(2) { height: 78%; }
.waveform span:nth-child(3) { height: 56%; }
.waveform span:nth-child(4) { height: 92%; }
.waveform span:nth-child(5) { height: 48%; }
.waveform span:nth-child(6) { height: 70%; }
.progress-track {
  height: 10px;
  margin: 18px 0 10px;
  border-radius: 99px;
  background: rgba(255,255,255,0.09);
  overflow: hidden;
}
.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60b7ff, #48d49b);
}
.progress-track .progress-72 { width: 72%; }
.file-lines {
  display: grid;
  gap: 8px;
}
.file-lines span {
  height: 12px;
  border-radius: 99px;
  background: rgba(255,255,255,0.22);
}
.file-lines span:nth-child(1) { width: 92%; }
.file-lines span:nth-child(2) { width: 68%; }
.file-lines span:nth-child(3) { width: 78%; background: rgba(96,183,255,0.34); }

.landing-section {
  padding: 72px 0 20px;
}
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.58fr);
  align-items: end;
  gap: 28px;
  margin-bottom: 24px;
}
.section-heading h2,
.trust-grid h2,
.landing-cta h2 {
  margin: 0;
  color: #fbfdff;
  font-size: 42px;
  line-height: 1.12;
  text-wrap: balance;
}
.section-heading p,
.landing-cta p,
.trust-grid p {
  margin: 0;
  line-height: 1.7;
}
.feature-masonry {
  column-count: 4;
  column-gap: 14px;
}
.feature-card,
.scenario-card,
.proof-card,
.trust-list li,
.workflow-steps li {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045)),
    rgba(18, 26, 37, 0.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 18px 54px rgba(0,0,0,0.2);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}
.feature-card {
  display: inline-block;
  width: 100%;
  min-height: 210px;
  margin: 0 0 14px;
  padding: 18px;
  break-inside: avoid;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.feature-card:hover,
.scenario-card:hover {
  transform: translateY(-2px);
  border-color: rgba(96,183,255,0.44);
  box-shadow: var(--shadow-lift);
}
.feature-card.tall { min-height: 288px; }
.feature-card.medium { min-height: 246px; }
.feature-card svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: #95e9ff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-card p,
.scenario-card p {
  margin: 0;
  line-height: 1.65;
}
.feature-card span {
  display: inline-flex;
  margin-top: 18px;
  padding: 7px 9px;
  border-radius: 7px;
  background: rgba(72,212,155,0.11);
  color: #bfffe2;
  font-size: 12px;
  font-weight: 850;
}

.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(420px, 1fr);
  gap: 18px;
  align-items: stretch;
}
.trust-grid > article,
.landing-cta {
  padding: 28px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.04)),
    rgba(12, 19, 29, 0.64);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}
.trust-grid p { margin-top: 18px; }
.trust-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.trust-list li {
  min-height: 92px;
  padding: 16px;
  color: #eaf5ff;
  font-weight: 780;
  line-height: 1.5;
}
.trust-list span {
  display: block;
  margin-bottom: 8px;
  color: #75d9ff;
  font-size: 12px;
  font-weight: 950;
}

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: workflow;
}
.workflow-steps li {
  min-height: 196px;
  padding: 18px;
}
.workflow-steps span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #06121e;
  background: linear-gradient(145deg, #dff6ff, #66dcae);
  font-weight: 950;
}
.workflow-steps strong {
  display: block;
  margin-top: 18px;
  color: #fbfdff;
  font-size: 17px;
}
.workflow-steps p {
  margin: 8px 0 0;
  line-height: 1.6;
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.scenario-card {
  min-height: 220px;
  padding: 20px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.scenario-card h3 { margin-top: 0; }

.proof-section {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  gap: 12px;
}
.proof-card {
  min-height: 168px;
  padding: 20px;
}
.proof-card p {
  margin: 0 0 18px;
  color: #f6fbff;
  font-size: 18px;
  line-height: 1.62;
}
.proof-card span {
  font-size: 13px;
  font-weight: 800;
}

.landing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 70px;
  padding: 32px;
}
.landing-cta p:not(.landing-eyebrow) { margin-top: 12px; }

@keyframes landingRise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-workbench {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  min-height: 170px;
  margin-bottom: 14px;
  padding: 24px;
  border-radius: var(--radius-lg);
}
.hero-copy { max-width: 760px; }
.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.hero-copy h2 {
  margin: 0;
  font-size: 46px;
  line-height: 1.08;
}
.hero-copy p:not(.eyebrow) {
  max-width: 66ch;
  margin: 10px 0 0;
  color: var(--text-soft);
}
.hero-actions, .toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.hero-actions { margin-top: 16px; }
.system-strip {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-end;
  gap: 8px;
  min-width: 220px;
}

.grid { display: grid; gap: 14px; }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.two-col { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr); }
.three-col { grid-template-columns: minmax(290px, 0.62fr) minmax(430px, 0.95fr) minmax(430px, 0.88fr); }
.process-grid { grid-template-columns: minmax(280px, 0.66fr) minmax(390px, 0.95fr) minmax(330px, 0.86fr); }
.process-workstation {
  display: grid;
  gap: 10px;
}
.process-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
}
.process-hero h3 {
  margin: 0 0 8px;
  font-size: 22px;
}
.ffmpeg-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  background: rgba(8, 12, 18, 0.42);
  min-width: 0;
  overflow-wrap: anywhere;
}
.ok-text { color: var(--green); }
.error-text { color: var(--red); }
.process-desktop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.34fr);
  gap: 10px;
  align-items: start;
}
.process-flow {
  display: grid;
  gap: 10px;
}
.process-step {
  min-width: 0;
}
.process-preview-rail {
  position: sticky;
  top: 84px;
  min-width: 0;
  max-height: calc(100dvh - 108px);
  overflow: auto;
}
.import-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.import-tile {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.045);
}
.import-tile span {
  color: var(--muted);
  font-size: 12px;
}
.path-import.compact {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
}
.process-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 12px 0;
  color: var(--text-soft);
  font-size: 13px;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin-bottom: 10px;
}
.tab-btn {
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent;
  color: var(--text-soft);
  font-weight: 800;
}
.tab-btn.active {
  border-color: rgba(96,183,255,0.36);
  background: rgba(96,183,255,0.15);
  color: #f7fbff;
}
.material-list {
  min-height: 132px;
  max-height: 300px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  background: rgba(5, 9, 14, 0.32);
}
.button-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.panel {
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045)),
    rgba(14, 20, 27, 0.68);
}
.panel:hover { box-shadow: var(--shadow-lift); }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.035);
}
.panel-head h2, .panel-head h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}
.panel-body { padding: 16px; }
.section-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.section-tools h2 { margin: 0 0 4px; font-size: 22px; }
.hint { margin: 0; color: var(--muted); font-size: 13px; }
.meta { color: var(--muted); font-size: 12px; font-weight: 800; }

.stat-card {
  min-height: 94px;
  padding: 16px;
  border-radius: var(--radius-lg);
}
.stat-label { color: var(--text-soft); font-size: 13px; font-weight: 760; }
.stat-value {
  margin-top: 4px;
  color: var(--accent);
  font-size: 26px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.stat-value.green { color: var(--green); }
.stat-value.orange { color: var(--amber); }
.stat-value.cyan { color: var(--cyan); }

.btn, .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.055)),
    rgba(255,255,255,0.055);
  color: #f8fbff;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}
.btn { padding: 0 13px; }
.icon-btn { width: 44px; padding: 0; }
.btn:hover, .icon-btn:hover {
  border-color: rgba(96,183,255,0.52);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.07)),
    rgba(96,183,255,0.12);
  transform: translateY(-1px);
}
.btn:active, .icon-btn:active {
  transform: scale(0.975);
}
.btn:disabled,
.icon-btn:disabled {
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.btn:disabled:hover,
.icon-btn:disabled:hover {
  border-color: var(--line-strong);
  transform: none;
}
.btn.primary {
  border-color: rgba(96,183,255,0.62);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08)),
    linear-gradient(135deg, rgba(47,137,232,0.96), rgba(44,156,126,0.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 16px 40px rgba(47,137,232,0.2);
}
.btn.green {
  border-color: rgba(72,212,155,0.52);
  background: rgba(72,212,155,0.15);
  color: #c9ffe6;
}
.btn.danger, .icon-btn.danger {
  border-color: rgba(255,106,122,0.42);
  background: rgba(255,106,122,0.11);
  color: #ffd1d7;
}
.btn.ghost {
  min-height: 44px;
  padding-inline: 8px;
  border-color: transparent;
  background: transparent;
  color: #a6d9ff;
}
.toolbar.tight { gap: 6px; }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(72,212,155,0.42);
  border-radius: var(--radius);
  color: #aaffd4;
  background: rgba(72,212,155,0.12);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.badge.warn { color: #ffd99f; border-color: rgba(242,179,93,0.45); background: rgba(242,179,93,0.12); }
.badge.error { color: #ffc2c9; border-color: rgba(255,106,122,0.45); background: rgba(255,106,122,0.13); }
.badge.muted { color: var(--text-soft); border-color: var(--line); background: rgba(255,255,255,0.06); }

.list, .bucket-stack, .process-form {
  display: grid;
  gap: 10px;
}
.row, .job-line, .file-row, .token-row, .bucket-band, .subsection, .job-card {
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 12px;
}
.row.compact { min-height: 50px; }
.row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 850;
}
.row-sub {
  min-width: 0;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mono {
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.accent-text { color: #a6d9ff; font-weight: 780; }
.muted-text { color: var(--muted); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: grid; gap: 6px; min-width: 0; }
.field span, .mini-field span {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 850;
}
.mini-field {
  display: grid;
  gap: 4px;
  min-width: 190px;
}
.mini-field select { min-height: 38px; }
.inline-input {
  width: 180px;
  min-height: 44px;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.045);
  color: var(--text-soft);
  font-weight: 760;
  user-select: none;
}
.check input, .file-row input, td input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  accent-color: var(--accent);
}
.button-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.subsection {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  background: rgba(5, 9, 14, 0.24);
}

/* Portable PyQt project skin: match MaterialAutoManager.exe */
:root {
  color-scheme: light;
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-soft: #f8fafc;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --text: #0f172a;
  --text-soft: #64748b;
  --muted: #94a3b8;
  --accent: #2f80ed;
  --accent-strong: #2563eb;
  --green: #22c55e;
  --amber: #f59e0b;
  --red: #ef4444;
  --cyan: #0ea5e9;
  --focus: rgba(47, 128, 237, 0.22);
  --shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  --shadow-lift: 0 18px 45px rgba(15, 23, 42, 0.12);
}

body,
body.workbench-open {
  color: var(--text);
  background: #f3f4f6;
}

body::before,
body::after,
body.workbench-open::before,
body.workbench-open::after,
.glass-panel::before,
.glass-panel::after,
.glass-bar::before,
.glass-bar::after,
.panel::before,
.panel::after,
.liquid-surface::before,
.liquid-surface::after,
body.workbench-open .app-shell::before {
  display: none;
}

body.workbench-open .app-shell,
.app-shell {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  grid-template-areas: "sidebar main";
  min-height: 100dvh;
  background: #f3f4f6;
}

body.workbench-open .sidebar,
.sidebar {
  grid-area: sidebar;
  width: 208px;
  height: 100dvh;
  padding: 12px 10px;
  color: #dbeafe;
  background: #0f172a;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.traffic,
.sidebar-controls,
.sidebar-storage,
.sidebar-version,
.status-dock,
.output-pill,
.app-language-toggle {
  display: none !important;
}

.brand-card {
  min-height: 62px;
  padding: 8px 10px;
  justify-content: flex-start;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #dbeafe;
  background: rgba(59, 130, 246, 0.16);
  box-shadow: none;
  font-size: 18px;
}

.brand-title {
  color: #f8fafc;
  font-size: 17px;
  font-weight: 900;
}

.brand-subtitle {
  display: none;
}

.nav-label {
  margin: 8px 8px 10px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.side-nav {
  gap: 7px;
}

.side-nav button {
  min-height: 42px;
  padding: 0 12px;
  color: #cbd5e1;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  font-weight: 800;
}

.side-nav button:hover {
  color: #ffffff;
  background: rgba(59, 130, 246, 0.16);
}

.side-nav button.active {
  color: #ffffff;
  background: #2f80ed;
  box-shadow: none;
}

.side-nav .svg-icon {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.sidebar-home {
  min-height: 72px;
  margin-top: auto;
  padding: 10px 12px;
  align-items: flex-start;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f8fafc;
  box-shadow: none;
}

.sidebar-home:hover {
  background: rgba(59, 130, 246, 0.12);
}

.sidebar-home-icon {
  display: none;
}

.sidebar-home span:not(.sidebar-home-icon):not(.sidebar-exit) {
  display: block;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 900;
}

.sidebar-home small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
}

body.workbench-open .main,
.main {
  grid-area: main;
  min-width: 0;
  height: 100dvh;
  overflow: auto;
  background: #f3f4f6;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 68px;
  margin: 0;
  padding: 0 22px;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.crumb {
  gap: 10px;
}

.crumb span {
  color: #94a3b8;
  font-size: 14px;
  font-weight: 700;
}

.crumb b {
  color: #cbd5e1;
}

.crumb h1 {
  color: #0f172a;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0;
}

.search-box {
  width: 330px;
  height: 38px;
  border: 1px solid #e2e8f0;
  border-radius: 19px;
  background: #f8fafc;
  box-shadow: none;
}

.search-box input,
input,
select,
textarea {
  color: #0f172a;
  border-color: #dbe3ee;
  background: #ffffff;
  box-shadow: none;
}

.search-box input {
  min-height: 36px;
  background: transparent;
}

.keycap {
  display: none;
}

.icon-status,
.admin-chip {
  height: 38px;
  min-width: 38px;
  border: 0;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  box-shadow: none;
}

.icon-status {
  color: #f59e0b;
}

.icon-status::before {
  content: "●";
}

.admin-chip {
  min-width: 78px;
  padding: 0 12px;
  color: #2563eb;
  background: #eef4ff;
  font-weight: 900;
}

.view {
  padding: 20px;
}

.panel,
.liquid-surface,
.portable-card,
.portable-stat-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.portable-dashboard {
  display: grid;
  gap: 14px;
}

.portable-hero {
  display: grid;
  gap: 10px;
  padding: 20px;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
}

.portable-hero h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
}

.portable-hero p {
  margin: 6px 0 0;
  color: #dbeafe;
}

.portable-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portable-hero-btn {
  width: auto;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 8px;
  color: #ffffff;
  background: rgba(255,255,255,0.14);
  font-weight: 800;
}

.portable-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.portable-stat-card {
  min-height: 78px;
  padding: 12px 14px;
}

.portable-stat-card span {
  display: block;
  color: #64748b;
  font-weight: 800;
}

.portable-stat-card strong {
  display: block;
  margin-top: 5px;
  color: #2563eb;
  font-size: 22px;
  font-weight: 950;
}

.portable-stat-card.green strong { color: #16a34a; }
.portable-stat-card.amber strong { color: #f59e0b; }
.portable-stat-card.cyan strong { color: #0ea5e9; }

.portable-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.74fr);
  gap: 14px;
}

.portable-card {
  min-height: 286px;
  padding: 14px;
}

.portable-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.portable-card-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.portable-link {
  width: auto;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  color: #2f80ed;
  background: transparent;
  font-weight: 800;
}

.portable-link:hover {
  background: #eff6ff;
}

.portable-task-list,
.portable-feature-list {
  display: grid;
  gap: 8px;
}

.portable-task-row,
.portable-feature-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
}

.portable-feature-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  min-height: 72px;
  background: #f8fafc;
}

.portable-task-row strong,
.portable-feature-row strong {
  color: #0f172a;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.portable-task-row time,
.portable-feature-row small {
  display: block;
  color: #94a3b8;
}

.portable-feature-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef4ff;
}

.portable-empty {
  padding: 16px;
  color: #94a3b8;
}

.badge {
  color: #16a34a;
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.badge.error {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;
}

@media (max-width: 980px) {
  body.workbench-open .app-shell,
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
  }
  body.workbench-open .sidebar,
  .sidebar {
    display: none;
  }
  .portable-stats,
  .portable-main-grid {
    grid-template-columns: 1fr;
  }
  .topbar {
    padding: 0 12px;
  }
  .search-box {
    display: none;
  }
}
.subsection h3 { margin: 0; font-size: 14px; }
.admin-panel .admin-summary {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.admin-panel .table-wrap {
  margin-top: 12px;
}
.exports-table .toolbar.tight {
  flex-wrap: nowrap;
}
.exports-table .toolbar.tight .btn {
  white-space: nowrap;
}

.mod-token-tools {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(96, 183, 255, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(96,183,255,0.08), rgba(255,255,255,0.035)),
    rgba(5, 9, 14, 0.26);
}

.mod-token-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.mod-token-tools .mod-token-head h3 {
  margin: 0 0 4px;
  font-size: 14px;
}

.mod-token-head .hint {
  margin: 0;
}

.mod-token-tools .button-grid {
  margin-bottom: 0;
}

.mode-builder {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  background: rgba(5, 9, 14, 0.28);
}
.mode-group {
  display: grid;
  gap: 8px;
}
.mode-label {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 850;
}
.mode-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.mode-options.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mode-choice {
  position: relative;
  display: grid;
  min-height: 76px;
  padding: 10px 11px 10px 36px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.045);
  color: var(--text-soft);
  cursor: pointer;
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease;
}
.mode-choice:hover {
  border-color: rgba(96,183,255,0.42);
  background: rgba(96,183,255,0.08);
  transform: translateY(-1px);
}
.mode-choice:active { transform: scale(0.985); }
.mode-choice input {
  position: absolute;
  left: 11px;
  top: 13px;
  width: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  accent-color: var(--accent);
}
.mode-choice b {
  display: block;
  color: #f7fbff;
  font-size: 13px;
}
.mode-choice small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.mode-choice:has(input:checked) {
  border-color: rgba(96,183,255,0.66);
  background:
    linear-gradient(145deg, rgba(96,183,255,0.20), rgba(72,212,155,0.09)),
    rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 12px 34px rgba(0,0,0,0.14);
}
.mode-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(96,183,255,0.24);
  border-radius: var(--radius);
  background: rgba(96,183,255,0.08);
}
.mode-result span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.mode-result strong {
  color: #dff4ff;
  font-size: 13px;
  text-align: right;
}

.effect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.effect-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.045);
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease;
}
.effect-card:has(input:checked) {
  border-color: rgba(96,183,255,0.5);
  background: rgba(96,183,255,0.12);
}
.effect-card:hover { transform: translateY(-1px); }
.effect-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.effect-controls .field { min-width: 0; }
.check.strong {
  font-weight: 850;
  color: #f7fbff;
}
.asset-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.asset-picker {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  background: rgba(5, 9, 14, 0.28);
}
.asset-picker-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.asset-picker-head small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.asset-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow: auto;
}
.asset-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.045);
  cursor: pointer;
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease;
}
.asset-card:hover {
  transform: translateY(-1px);
  border-color: rgba(96,183,255,0.38);
}
.asset-card.selected {
  border-color: rgba(96,183,255,0.68);
  background: rgba(96,183,255,0.14);
}
.asset-card input {
  position: absolute;
  left: 9px;
  top: 9px;
  width: 18px;
  min-width: 18px;
  min-height: 18px;
  z-index: 1;
  accent-color: var(--accent);
}
.asset-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(4, 8, 12, 0.72);
  border: 1px solid rgba(255,255,255,0.1);
}
.asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.asset-thumb.placeholder span {
  padding: 6px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.asset-name {
  overflow: hidden;
  color: #f7fbff;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-meta {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.process-bottom {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  border-radius: var(--radius);
}
.config-actions {
  margin-bottom: 10px;
}

.file-list, .token-list, .log-list {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow: auto;
  padding-right: 2px;
}
.compact-list { max-height: 190px; }
.file-row {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px;
}
.source-pill {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.token-library {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.token-add {
  justify-content: flex-start;
  min-height: 50px;
}
.token-add small, .token-row small, .bucket-head small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.token-list {
  min-height: 174px;
  max-height: 250px;
}
.token-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 9px 10px;
  color: var(--text);
  text-align: left;
}
.token-row.selected {
  border-color: rgba(96,183,255,0.58);
  background: rgba(96,183,255,0.16);
}
.expression {
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5,9,14,0.48);
  overflow-wrap: anywhere;
}

.bucket-band {
  padding: 12px;
}
.bucket-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.path-import {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 10px;
}

.job-line, .job-card {
  padding: 12px;
}
.job-line-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.progress {
  position: relative;
  height: 8px;
  margin: 10px 0 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.progress.large { height: 10px; }
.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--green));
  transition: width 260ms ease;
}
.log-item {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  color: var(--text-soft);
  font-size: 12px;
}
.log-item.error { border-color: rgba(255,106,122,0.34); color: #ffd1d7; }
.log-item span {
  max-height: 68px;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px auto;
  gap: 10px;
  align-items: center;
}
.path-grid {
  display: grid;
  gap: 8px;
}
.path-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.path-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-soft);
}

.table-wrap {
  width: 100%;
  overflow-x: hidden;
  border-top: 1px solid var(--line);
}
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
th, td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  text-align: left;
  vertical-align: middle;
}
th {
  color: var(--text-soft);
  background: rgba(255,255,255,0.045);
  font-size: 12px;
  font-weight: 850;
}
td {
  color: #eef6ff;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.cell-main {
  display: grid;
  gap: 3px;
}
.cell-main small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 20px;
  color: var(--muted);
  text-align: center;
}
.empty-state.small { min-height: 68px; padding: 12px; }
.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  max-width: min(460px, calc(100vw - 44px));
  padding: 13px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.055)),
    rgba(16, 22, 30, 0.92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
::-webkit-scrollbar-thumb {
  border: 2px solid rgba(5,8,13,0.72);
  border-radius: 999px;
  background: rgba(150, 170, 195, 0.48);
}
::-webkit-scrollbar-thumb:hover { background: rgba(190, 210, 235, 0.66); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel, .glass-bar, .panel, .liquid-surface, .toast,
  .marketing-nav, .hero-visual, .feature-card, .scenario-card, .proof-card, .trust-list li, .workflow-steps li {
    background: rgba(18, 24, 31, 0.96);
  }
}

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

@media (max-width: 1400px) {
  .three-col, .process-grid { grid-template-columns: 1fr; }
  .process-desktop-grid { grid-template-columns: 1fr; }
  .process-preview-rail {
    position: static;
    max-height: none;
  }
}

@media (max-width: 1120px) {
  .marketing-nav {
    grid-template-columns: minmax(220px, 1fr) auto auto;
  }
  .marketing-links { display: none; }
  .landing-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .landing-hero-copy { max-width: 760px; }
  .landing-hero h1 { max-width: 14ch; font-size: 56px; }
  .hero-visual { min-height: 500px; }
  .feature-masonry { column-count: 3; }
  .trust-grid,
  .section-heading {
    grid-template-columns: 1fr;
  }
  .workflow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-section { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .two-col { grid-template-columns: 1fr; }
  .form-grid.three { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .top-actions { width: min(460px, 46vw); }
  .process-hero { grid-template-columns: 1fr; }
  .import-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-picker-grid, .effect-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  body { font-size: 14px; }
  .product-home {
    padding: 12px 12px 34px;
  }
  .marketing-nav {
    position: relative;
    top: 0;
    grid-template-columns: 1fr;
    margin-bottom: 34px;
    padding: 10px;
  }
  .marketing-nav-cta {
    justify-self: stretch;
    width: 100%;
  }
  .landing-hero {
    gap: 22px;
    padding-bottom: 34px;
  }
  .landing-hero h1 {
    max-width: 12ch;
    font-size: 42px;
  }
  .landing-lede {
    font-size: 16px;
  }
  .landing-actions,
  .hero-metrics {
    width: 100%;
  }
  .landing-btn,
  .hero-metrics div {
    flex: 1 1 150px;
  }
  .hero-visual {
    min-height: 420px;
    padding: 12px;
  }
  .masonry-wall,
  .feature-masonry {
    column-count: 2;
  }
  .asset-tile.tall,
  .asset-tile.medium,
  .feature-card.tall,
  .feature-card.medium {
    min-height: 0;
  }
  .section-heading h2,
  .trust-grid h2,
  .landing-cta h2 {
    font-size: 32px;
  }
  .landing-section { padding-top: 50px; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-list,
  .workflow-steps,
  .scenario-grid {
    grid-template-columns: 1fr;
  }
  .workflow-steps li,
  .scenario-card {
    min-height: 0;
  }
  .landing-cta {
    align-items: stretch;
    flex-direction: column;
    padding: 22px;
  }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    border-width: 0 0 1px;
    padding: 10px;
  }
  .sidebar-home { margin-top: 10px; }
  .side-nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .side-nav button span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .main { padding: 0 12px 22px; }
  .topbar {
    position: static;
    min-height: auto;
    margin: 0 -12px;
    padding: 12px;
    align-items: stretch;
    flex-direction: column;
  }
  .top-actions { width: 100%; }
  .hero-workbench {
    flex-direction: column;
    padding: 18px;
  }
  .system-strip { justify-content: flex-start; min-width: 0; }
  .stats-grid, .form-grid, .form-grid.three, .filters, .button-grid {
    grid-template-columns: 1fr;
  }
  .import-actions, .button-grid.three, .effect-controls {
    grid-template-columns: 1fr;
  }
  .process-bottom {
    position: static;
    grid-template-columns: 1fr;
  }
  .asset-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section-tools {
    align-items: stretch;
    flex-direction: column;
  }
  .toolbar, .hero-actions { width: 100%; }
  .toolbar .btn, .hero-actions .btn { flex: 1 1 auto; }
  .inline-input, .mini-field { width: 100%; min-width: 0; }
  .row { grid-template-columns: 1fr; }
  .file-row { grid-template-columns: 18px minmax(0,1fr) 44px; }
  .file-row .source-pill { display: none; }
  .path-import { grid-template-columns: 1fr; }
  .bucket-head { align-items: stretch; flex-direction: column; }
  .path-row { grid-template-columns: 1fr; }
  .crumb h1 { font-size: 21px; }
  .hero-copy h2 { font-size: 32px; }

  .table-wrap { border-top: 0; }
  table, thead, tbody, tr, th, td { display: block; width: 100%; }
  thead { display: none; }
  tbody {
    display: grid;
    gap: 10px;
  }
  tr {
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.045);
    overflow: hidden;
  }
  td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
  }
  td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 800;
  }
}

@media (max-width: 420px) {
  .product-home { padding-inline: 10px; }
  .marketing-brand span:last-child {
    white-space: normal;
  }
  .landing-hero h1 {
    max-width: 100%;
    font-size: 36px;
  }
  .ffmpeg-card .button-grid.three {
    grid-template-columns: 1fr;
  }
  .process-hero {
    padding: 14px;
  }
  .masonry-wall,
  .feature-masonry {
    column-count: 1;
  }
  .hero-visual {
    min-height: 0;
  }
  .asset-tile,
  .feature-card,
  .proof-card,
  .trust-grid > article,
  .landing-cta {
    padding: 16px;
  }
  .hero-metrics {
    display: grid;
    grid-template-columns: 1fr;
  }
  .main { padding-inline: 10px; }
  .topbar { margin-inline: -10px; padding-inline: 10px; }
  .side-nav { grid-template-columns: 1fr; }
  .top-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 54px;
  }
  .hero-copy h2 { font-size: 28px; }
  .panel-body, .panel-head { padding-inline: 12px; }
  .token-library { grid-template-columns: 1fr; }
  .asset-preview-grid { grid-template-columns: 1fr; }
  td { grid-template-columns: 1fr; }
  td::before { margin-bottom: -4px; }
}

/* Imported macOS frosted-blue workbench skin */
:root {
  color-scheme: dark;
  --bg: #718aa4;
  --bg-deep: #506985;
  --surface: rgba(255, 255, 255, 0.20);
  --surface-strong: rgba(255, 255, 255, 0.28);
  --surface-soft: rgba(255, 255, 255, 0.11);
  --line: rgba(255, 255, 255, 0.25);
  --line-strong: rgba(210, 234, 255, 0.52);
  --edge: rgba(255, 255, 255, 0.50);
  --text: rgba(248, 252, 255, 0.96);
  --text-soft: rgba(231, 242, 255, 0.80);
  --muted: rgba(226, 238, 250, 0.64);
  --accent: #8ac7ff;
  --accent-strong: #57a7ff;
  --green: #6be0a7;
  --amber: #ffd37b;
  --red: #ff9aa6;
  --cyan: #73f0ff;
  --focus: rgba(127, 205, 255, 0.46);
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --shadow: 0 28px 80px rgba(12, 26, 45, 0.22), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(255,255,255,0.07);
  --shadow-lift: 0 34px 92px rgba(12, 26, 45, 0.28), inset 0 1px 0 rgba(255,255,255,0.36), inset 0 -1px 0 rgba(105, 203, 255, 0.14);
  --blur: 28px;
  --sat: 145%;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}

html,
body {
  min-height: 100%;
}

body {
  min-height: 100dvh;
  color: var(--text);
  background:
    radial-gradient(circle at 9% 71%, rgba(229, 242, 255, 0.42), transparent 20%),
    radial-gradient(circle at 17% 14%, rgba(186, 222, 255, 0.48), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(161, 198, 235, 0.46), transparent 31%),
    radial-gradient(circle at 72% 88%, rgba(132, 167, 204, 0.38), transparent 32%),
    linear-gradient(135deg, #8da7bf 0%, #6f879f 44%, #58708a 100%);
  font-size: 15px;
  line-height: 1.48;
}

body::before {
  position: fixed;
  width: 520px;
  height: 520px;
  left: -110px;
  right: auto;
  top: auto;
  bottom: -95px;
  z-index: -2;
  border-radius: 999px;
  content: "";
  pointer-events: none;
  opacity: 0.72;
  filter: blur(34px);
  background: radial-gradient(circle, rgba(234, 247, 255, 0.75), rgba(128, 170, 210, 0.12) 61%, transparent 72%);
}

body::after {
  position: fixed;
  width: 760px;
  height: 420px;
  right: -160px;
  left: auto;
  top: -130px;
  bottom: auto;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.54;
  filter: blur(34px);
  border-radius: 999px;
  transform: rotate(-9deg);
  background: radial-gradient(circle, rgba(205, 226, 255, 0.52), rgba(99, 145, 193, 0.16) 58%, transparent 73%);
  mask-image: none;
}

input,
select,
textarea {
  min-height: 44px;
  color: rgba(255,255,255,.94);
  border-color: rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(31, 50, 72, 0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 10px 24px rgba(18, 33, 55, 0.06);
}

input::placeholder,
textarea::placeholder {
  color: rgba(230, 241, 255, 0.58);
}

select {
  background-color: rgba(31, 50, 72, 0.34);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(245,250,255,.92) 50%),
    linear-gradient(135deg, rgba(245,250,255,.92) 50%, transparent 50%);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(142, 210, 255, 0.72);
  outline-offset: 2px;
  border-color: rgba(149, 213, 255, 0.82);
  box-shadow: 0 0 0 5px rgba(95, 176, 255, 0.13), inset 0 1px 0 rgba(255,255,255,.14);
}

.glass-panel,
.glass-bar,
.panel,
.liquid-surface,
.toast {
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(147, 172, 199, 0.14) 45%, rgba(34, 55, 80, 0.16));
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
}

.glass-panel::before,
.glass-bar::before,
.panel::before,
.liquid-surface::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(90deg, rgba(255,255,255,0.10), transparent 42%),
    radial-gradient(circle at 84% 10%, rgba(255,255,255,.14), transparent 25%),
    radial-gradient(circle at 43% 101%, rgba(115, 174, 233, .12), transparent 36%);
  opacity: 1;
}

.glass-panel::after,
.glass-bar::after,
.panel::after,
.liquid-surface::after {
  inset: 1px;
  border-color: rgba(255,255,255,0.18);
  background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent 45%, rgba(255,255,255,0.08));
  opacity: 0.62;
}

.app-shell {
  grid-template-columns: 274px minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  padding: 10px;
  overflow-x: clip;
}

.sidebar {
  position: sticky;
  top: 10px;
  height: calc(100dvh - 20px);
  padding: 20px 22px 22px;
  border-width: 1px;
  border-radius: 28px;
  overflow: hidden;
}

.sidebar::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.12), transparent 42%),
    radial-gradient(circle at 25% 66%, rgba(232, 246, 255, 0.32), transparent 22%);
  opacity: 0.95;
}

.sidebar > * {
  position: relative;
  z-index: 1;
}

.traffic {
  display: flex;
  gap: 9px;
  height: 16px;
  margin: 0 0 24px 3px;
}

.traffic span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 8px rgba(20, 35, 58, 0.18);
}

.traffic span:nth-child(1) { background: #ff6a63; }
.traffic span:nth-child(2) { background: #ffbf3d; }
.traffic span:nth-child(3) { background: #5ed764; }

.brand-card {
  gap: 14px;
  min-height: 56px;
  margin-bottom: 38px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  color: #051521;
  font-weight: 850;
  background: linear-gradient(150deg, #efffff 0%, #8ceeff 48%, #87b6ff 100%);
  box-shadow:
    0 18px 30px rgba(88, 180, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    inset 0 -8px 18px rgba(40, 116, 190, 0.16);
}

.brand-title {
  color: rgba(255,255,255,.96);
  font-size: 15px;
  font-weight: 760;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 16px rgba(255,255,255,.15);
}

.sidebar-control {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

.nav-label {
  margin: 0 0 16px 2px;
  color: rgba(240, 248, 255, 0.64);
  font-size: 14px;
  font-weight: 650;
}

.side-nav {
  gap: 9px;
}

.side-nav button {
  min-height: 54px;
  gap: 14px;
  padding: 0 14px;
  border-radius: 14px;
  color: rgba(247, 251, 255, 0.86);
  font-size: 16px;
  font-weight: 690;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.side-nav button svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.1;
}

.svg-icon {
  width: 22px;
  height: 22px;
}

.svg-icon svg {
  width: 22px;
  height: 22px;
}

.side-nav button:hover {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(2px);
}

.side-nav button.active {
  position: relative;
  color: #fff;
  border-color: rgba(165, 213, 255, 0.55);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(112, 175, 255, 0.24));
  box-shadow:
    0 16px 34px rgba(31, 107, 199, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    inset 0 -1px 0 rgba(94, 211, 255, 0.28);
}

.side-nav button.active::after {
  position: absolute;
  left: 34px;
  right: 22px;
  bottom: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(115, 240, 255, 0.9), transparent);
  box-shadow: 0 0 16px rgba(115, 240, 255, 0.82);
}

.sidebar-home {
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  gap: 2px 12px;
  min-height: 64px;
  margin-top: auto;
  padding: 0 14px;
  border-color: rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.sidebar-home::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255,255,255,.78);
  border-bottom: 2px solid rgba(255,255,255,.78);
  transform: rotate(45deg);
}

.sidebar-home-icon {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255,255,255,.90);
  box-shadow: none;
}

.sidebar-home small {
  color: rgba(232, 242, 255, 0.56);
}

.main {
  display: grid;
  grid-template-rows: 84px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding: 0;
}

.topbar {
  height: 84px;
  margin: 0;
  padding: 0 14px 0 24px;
  border-radius: 28px;
}

.crumb {
  min-height: 46px;
  padding: 6px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.crumb span {
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  color: #aee0ff;
  background: rgba(131, 199, 255, 0.10);
  border: 1px solid rgba(158, 215, 255, 0.16);
}

.crumb b {
  color: rgba(235, 245, 255, 0.48);
}

.crumb h1 {
  font-size: 26px;
  line-height: 1;
  font-weight: 840;
  letter-spacing: 0;
  text-shadow: 0 8px 28px rgba(21, 45, 80, 0.24);
}

.top-actions {
  gap: 12px;
}

.search-box {
  width: min(490px, 38vw);
  height: 48px;
  border-radius: 16px;
  background: rgba(30, 48, 70, 0.23);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(20, 35, 58, 0.10);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
}

.search-box span::before {
  opacity: 0.84;
  color: rgba(237,247,255,.88);
}

.search-box input {
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  box-shadow: none;
}

.keycap {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  color: rgba(255,255,255,.86);
  font-size: 13px;
  font-weight: 750;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
  white-space: nowrap;
}

.language-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 14px;
  color: rgba(255,255,255,.94);
  font-weight: 820;
  background: rgba(27, 45, 68, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(20,35,58,.10);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.language-toggle:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.18);
}

.app-language-toggle {
  height: 48px;
  min-width: 52px;
}

.icon-status,
.admin-chip {
  height: 48px;
  border-radius: 15px;
  background: rgba(27, 45, 68, 0.22);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(20,35,58,.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.icon-status {
  width: 48px;
}

.icon-status::before {
  width: 8px;
  height: 8px;
  background: #74a7ff;
  box-shadow: 0 0 16px rgba(102, 173, 255, 0.8);
}

.icon-status.ready::before {
  background: #6be0a7;
  box-shadow: 0 0 16px rgba(107, 224, 167, 0.8);
}

.admin-chip {
  min-width: 70px;
  padding: 0 20px;
  color: #fff;
  font-weight: 760;
}

.view {
  min-height: 0;
  padding: 0 0 20px;
  overflow: auto;
}

.panel {
  border-radius: 24px;
}

.panel:hover {
  box-shadow: var(--shadow-lift);
}

.panel-head {
  padding: 24px 24px 14px;
  border-color: rgba(255, 255, 255, 0.14);
}

.panel-head h2,
.panel-head h3,
.panel h2,
.panel h3 {
  color: rgba(255,255,255,.96);
  font-size: 24px;
  font-weight: 830;
  letter-spacing: 0;
  text-shadow: 0 8px 24px rgba(23, 42, 68, 0.18);
}

.panel-body {
  padding: 16px 24px 24px;
}

.hero-panel,
.process-hero {
  border-radius: 24px;
}

.hero-copy h2 {
  color: #fff;
  text-shadow: 0 8px 32px rgba(21, 45, 80, 0.28);
}

.btn,
.icon-btn,
.tab-btn,
.mode-choice,
.effect-card,
.asset-card,
.token-card,
.file-row,
.bucket,
.task-item,
.export-row,
.metric-card,
.stat-card,
.path-import,
.job-panel,
.empty-state,
.table-wrap,
.subsection {
  border-color: rgba(255, 255, 255, 0.19);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(33, 53, 77, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 24px rgba(18, 33, 55, 0.08);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.btn,
.icon-btn,
.tab-btn {
  min-height: 44px;
  border-radius: 12px;
  color: rgba(255,255,255,.94);
  font-weight: 760;
}

.btn:hover,
.icon-btn:hover,
.tab-btn:hover,
.mode-choice:hover,
.asset-card:hover {
  transform: translateY(-1px);
  background-color: rgba(255, 255, 255, 0.17);
}

.btn.primary,
.btn.green,
.tab-btn.active,
.mode-choice:has(input:checked),
.asset-card.selected {
  border-color: rgba(130, 201, 255, 0.72);
  color: #fff;
  background: linear-gradient(135deg, rgba(140, 203, 255, 0.26), rgba(255, 255, 255, 0.12));
  box-shadow:
    0 0 0 1px rgba(87, 167, 255, 0.12),
    0 20px 36px rgba(61, 136, 216, 0.12),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(106, 226, 255, .20);
}

.btn.danger,
.icon-btn.danger {
  color: #ffd5db;
  border-color: rgba(255, 154, 166, 0.42);
  background: linear-gradient(135deg, rgba(255, 148, 162, 0.16), rgba(255, 255, 255, 0.08));
}

.meta,
.hint,
.small,
.file-meta,
.asset-meta,
.brand-subtitle {
  color: rgba(226, 238, 250, 0.66);
}

.check {
  min-height: 44px;
  border-radius: 12px;
  color: rgba(255,255,255,.90);
}

.check input,
.file-row input,
td input[type="checkbox"] {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  accent-color: #6fb8ff;
}

.process-workstation {
  gap: 14px;
}

.process-hero {
  padding: 24px;
  align-items: center;
}

.ffmpeg-card {
  border-color: rgba(255, 255, 255, 0.19);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(33, 53, 77, 0.18));
}

.process-desktop-grid {
  gap: 14px;
}

.process-flow,
.dashboard-grid,
.grid {
  gap: 14px;
}

.asset-thumb {
  border-color: rgba(255,255,255,.22);
  background: rgba(30, 48, 70, 0.20);
}

table {
  color: rgba(248, 252, 255, 0.92);
}

th {
  color: rgba(226, 238, 250, 0.78);
  background: rgba(31, 50, 72, 0.20);
}

td {
  color: rgba(248, 252, 255, 0.88);
  border-color: rgba(255,255,255,.11);
}

tr:hover td {
  background: rgba(255,255,255,.08);
}

.toast {
  color: #fff;
  border-radius: 16px;
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 14px;
  }

  .sidebar {
    padding-inline: 18px;
  }

  .search-box {
    width: min(420px, 42vw);
  }
}

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .sidebar {
    position: relative;
    top: auto;
    height: auto;
    max-height: none;
    border-radius: 24px;
  }

  .traffic {
    margin-bottom: 14px;
  }

  .brand-card {
    margin-bottom: 18px;
  }

  .side-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .topbar {
    height: auto;
    min-height: 78px;
    padding: 12px;
    border-radius: 24px;
  }

  .search-box {
    width: 100%;
  }

  .panel-head {
    padding: 18px 16px 12px;
  }

  .panel-body {
    padding: 14px 16px 18px;
  }
}

@media (max-width: 420px) {
  body {
    font-size: 14px;
  }

  .app-shell {
    padding: 8px;
  }

  .sidebar,
  .topbar,
  .panel {
    border-radius: 20px;
  }

  .side-nav {
    grid-template-columns: 1fr;
  }

  .crumb h1 {
    font-size: 22px;
  }

  .keycap {
    display: none;
  }

  .top-actions {
    grid-template-columns: minmax(0, 1fr) 48px 52px 70px;
  }

  .admin-chip {
    min-width: 0;
    padding: 0 12px;
  }
}

/* Harmonized dark workbench skin */
:root {
  --bg: #08111b;
  --bg-deep: #03070d;
  --surface: rgba(12, 21, 31, 0.74);
  --surface-strong: rgba(17, 30, 43, 0.86);
  --surface-soft: rgba(255, 255, 255, 0.055);
  --line: rgba(180, 210, 235, 0.16);
  --line-strong: rgba(180, 210, 235, 0.28);
  --edge: rgba(220, 240, 255, 0.28);
  --text: #f4f8fb;
  --text-soft: #bfd1df;
  --muted: #8599aa;
  --accent: #6ab7e8;
  --accent-strong: #3e8fc5;
  --green: #58c694;
  --amber: #d9a85c;
  --red: #e7818d;
  --cyan: #67d5df;
  --focus: rgba(106, 183, 232, 0.38);
  --shadow: 0 24px 68px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255,255,255,0.08);
  --shadow-lift: 0 30px 84px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255,255,255,0.10);
  --blur: 22px;
  --sat: 130%;
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 12% 18%, rgba(74, 133, 176, 0.24), transparent 30%),
    radial-gradient(circle at 84% 12%, rgba(48, 104, 131, 0.18), transparent 34%),
    radial-gradient(circle at 76% 86%, rgba(53, 118, 104, 0.13), transparent 34%),
    linear-gradient(135deg, #0c1722 0%, #07111b 48%, #050a10 100%);
}

body::before {
  opacity: 0.22;
  filter: blur(42px);
  background: radial-gradient(circle, rgba(99, 169, 212, 0.44), rgba(33, 72, 102, 0.14) 56%, transparent 74%);
}

body::after {
  opacity: 0.18;
  filter: blur(42px);
  background: radial-gradient(circle, rgba(88, 142, 184, 0.34), rgba(28, 55, 82, 0.12) 58%, transparent 74%);
}

input,
select,
textarea,
.search-box {
  color: var(--text);
  border-color: rgba(180, 210, 235, 0.18);
  background: rgba(5, 11, 18, 0.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 10px 24px rgba(0,0,0,0.12);
}

input::placeholder,
textarea::placeholder {
  color: rgba(191, 209, 223, 0.54);
}

.glass-panel,
.glass-bar,
.panel,
.liquid-surface,
.toast {
  border-color: var(--line);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.032)),
    var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
}

.glass-panel::before,
.glass-bar::before,
.panel::before,
.liquid-surface::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(90deg, rgba(255,255,255,0.045), transparent 44%),
    radial-gradient(circle at 84% 10%, rgba(109, 181, 226, 0.08), transparent 28%);
  opacity: 0.86;
}

.glass-panel::after,
.glass-bar::after,
.panel::after,
.liquid-surface::after {
  border-color: rgba(220, 240, 255, 0.08);
  background: linear-gradient(90deg, rgba(255,255,255,0.035), transparent 48%, rgba(255,255,255,0.035));
  opacity: 0.42;
}

.sidebar {
  background:
    linear-gradient(145deg, rgba(20, 37, 53, 0.84), rgba(9, 17, 27, 0.78)),
    rgba(7, 14, 23, 0.82);
}

.sidebar::before {
  background:
    linear-gradient(90deg, rgba(106, 183, 232, 0.09), transparent 45%),
    radial-gradient(circle at 26% 66%, rgba(106, 183, 232, 0.10), transparent 28%);
  opacity: 0.72;
}

.brand-title,
.crumb h1,
.panel-head h2,
.panel-head h3,
.panel h2,
.panel h3,
.hero-copy h2 {
  color: var(--text);
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.nav-label,
.meta,
.hint,
.small,
.file-meta,
.asset-meta,
.brand-subtitle,
.sidebar-home small {
  color: var(--muted);
}

.side-nav button {
  color: var(--text-soft);
}

.side-nav button:hover {
  background: rgba(106, 183, 232, 0.08);
  border-color: rgba(180, 210, 235, 0.18);
}

.side-nav button.active {
  color: var(--text);
  border-color: rgba(106, 183, 232, 0.42);
  background: linear-gradient(135deg, rgba(65, 132, 180, 0.24), rgba(42, 92, 116, 0.16));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(106, 183, 232, 0.16);
}

.side-nav button.active::after {
  background: linear-gradient(90deg, transparent, rgba(103, 213, 223, 0.48), transparent);
  box-shadow: 0 0 14px rgba(103, 213, 223, 0.34);
}

.sidebar-control,
.sidebar-home,
.icon-status,
.admin-chip,
.keycap {
  border-color: rgba(180, 210, 235, 0.16);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.065);
}

.sidebar-home-icon {
  color: var(--text);
  background: rgba(106, 183, 232, 0.10);
  border-color: rgba(180, 210, 235, 0.16);
}

.sidebar-home {
  grid-template-columns: 38px minmax(0, 1fr);
}

.sidebar-home::after {
  content: none;
}

.topbar,
.panel,
.hero-panel,
.process-hero {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.085), rgba(255,255,255,0.025)),
    rgba(11, 21, 32, 0.72);
}

.crumb {
  background: rgba(255,255,255,0.04);
  border-color: rgba(180, 210, 235, 0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

.crumb span {
  color: #9ed1f1;
  background: rgba(106, 183, 232, 0.08);
  border-color: rgba(106, 183, 232, 0.14);
}

.search-box span::before {
  color: rgba(191, 209, 223, 0.78);
}

.search-box input {
  color: var(--text);
}

.btn,
.icon-btn,
.tab-btn,
.mode-choice,
.effect-card,
.asset-card,
.token-card,
.file-row,
.bucket,
.task-item,
.export-row,
.metric-card,
.stat-card,
.path-import,
.job-panel,
.empty-state,
.table-wrap,
.subsection,
.ffmpeg-card {
  border-color: rgba(180, 210, 235, 0.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)),
    rgba(10, 19, 30, 0.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 28px rgba(0,0,0,0.15);
}

.btn,
.icon-btn,
.tab-btn {
  color: var(--text);
}

.btn:hover,
.icon-btn:hover,
.tab-btn:hover,
.mode-choice:hover,
.asset-card:hover {
  background-color: rgba(106, 183, 232, 0.10);
}

.btn.primary,
.btn.green,
.tab-btn.active,
.mode-choice:has(input:checked),
.asset-card.selected {
  border-color: rgba(106, 183, 232, 0.46);
  background: linear-gradient(135deg, rgba(68, 143, 190, 0.30), rgba(62, 143, 117, 0.18));
  box-shadow:
    0 16px 34px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.13),
    inset 0 -1px 0 rgba(103, 213, 223, 0.16);
}

.btn.danger,
.icon-btn.danger {
  color: #ffd0d6;
  border-color: rgba(231, 129, 141, 0.36);
  background: linear-gradient(135deg, rgba(231, 129, 141, 0.14), rgba(255,255,255,0.035));
}

table {
  color: var(--text-soft);
}

th {
  color: #a9bdcc;
  background: rgba(255,255,255,0.035);
}

td {
  color: #d4e2ec;
  border-color: rgba(180, 210, 235, 0.08);
}

tr:hover td {
  background: rgba(106, 183, 232, 0.07);
}

/* Rename workflow refinements */
.local-project-panel {
  display: grid;
  gap: 14px;
  margin: 12px 0 14px;
  padding: 14px;
  border: 1px solid rgba(178, 222, 255, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(86, 130, 170, 0.10)),
    rgba(13, 27, 42, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(100, 186, 240, 0.10),
    0 18px 40px rgba(0,0,0,0.18);
  backdrop-filter: blur(20px) saturate(1.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
}

.local-project-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.local-project-head h4 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 15px;
}

.local-project-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.local-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.rename-mode-switch {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.rename-mode-switch legend {
  margin-bottom: 9px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 850;
}

.rename-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rename-mode-option {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  min-height: 68px;
  padding: 13px;
  border: 1px solid rgba(180, 210, 235, 0.15);
  border-radius: 14px;
  color: var(--text-soft);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018)),
    rgba(9, 19, 30, 0.50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.rename-mode-option:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 202, 255, 0.34);
  background:
    linear-gradient(145deg, rgba(140, 198, 238, 0.16), rgba(255,255,255,0.035)),
    rgba(13, 31, 48, 0.60);
}

.rename-mode-option.active {
  color: var(--text);
  border-color: rgba(111, 184, 255, 0.58);
  background:
    linear-gradient(145deg, rgba(113, 185, 242, 0.30), rgba(73, 151, 150, 0.13)),
    rgba(13, 31, 50, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.17),
    inset 0 -1px 0 rgba(103, 213, 223, 0.14),
    0 16px 32px rgba(23, 67, 105, 0.22);
}

.rename-mode-option input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border-radius: 999px;
  accent-color: #75bbff;
}

.rename-mode-option strong,
.rename-mode-option small {
  display: block;
  min-width: 0;
}

.rename-mode-option strong {
  margin-bottom: 5px;
  font-size: 13px;
}

.rename-mode-option small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* Resizable data tables */
.table-wrap.resizable-table {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(142, 198, 238, 0.42) rgba(255,255,255,0.06);
}

.resizable-table table {
  min-width: 640px;
}

.resizable-table th {
  position: relative;
  user-select: none;
}

.resizable-table .th-label {
  display: block;
  min-width: 0;
  padding-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table-wrap {
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: inherit;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th,
.data-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table th {
  height: 42px;
}

.data-table td {
  height: 52px;
}

.table-sort-button {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}

.table-sort-button .th-label {
  flex: 1 1 auto;
}

.sort-mark {
  flex: 0 0 14px;
  min-width: 14px;
  color: #ff5a1f;
  font-size: 12px;
  text-align: center;
}

.table-sort-button:not(.active) .sort-mark {
  color: transparent;
}

.table-sort-button:hover .sort-mark,
.table-sort-button:focus-visible .sort-mark {
  color: #ff8a4a;
}

.data-table tbody tr.active {
  outline: 1px solid #ff6b2b;
  outline-offset: -1px;
}

.data-table tbody tr[data-batch-file],
.data-table tbody tr[data-batch-rename-file],
.data-table tbody tr[data-task-detail-id],
.data-table tbody tr[data-export-row],
.data-table tbody tr[data-nav] {
  cursor: pointer;
}

.data-table .module-thumb,
.data-table .material-thumb {
  display: inline-grid;
  vertical-align: middle;
}

.module-table.data-table-wrap,
.batch-rename-table.data-table-wrap,
.frame-audio-table.data-table-wrap,
.naming-table.data-table-wrap,
.naming-queue-table.data-table-wrap,
.settings-template-table.data-table-wrap,
.settings-user-table.data-table-wrap,
.rename-file-table.data-table-wrap,
.rename-preview-table.data-table-wrap {
  overflow-x: auto;
  background: #fff;
}

.module-table .data-table th,
.batch-rename-table .data-table th,
.frame-audio-table .data-table th,
.naming-table .data-table th,
.naming-queue-table .data-table th,
.settings-template-table .data-table th,
.settings-user-table .data-table th,
.rename-file-table .data-table th,
.rename-preview-table .data-table th {
  color: #667085;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}

.module-table .data-table td,
.batch-rename-table .data-table td,
.frame-audio-table .data-table td,
.naming-table .data-table td,
.naming-queue-table .data-table td,
.settings-template-table .data-table td,
.settings-user-table .data-table td,
.rename-file-table .data-table td,
.rename-preview-table .data-table td {
  border-bottom: 1px solid #edf1f6;
  color: #344054;
  font-size: 13px;
}

.module-table .data-table tbody tr:hover,
.batch-rename-table .data-table tbody tr:hover,
.frame-audio-table .data-table tbody tr:hover,
.naming-table .data-table tbody tr:hover,
.naming-queue-table .data-table tbody tr:hover,
.settings-template-table .data-table tbody tr:hover,
.settings-user-table .data-table tbody tr:hover,
.rename-file-table .data-table tbody tr:hover,
.rename-preview-table .data-table tbody tr:hover {
  background: #fff7f2;
}

.batch-rename-data-table td,
.frame-audio-data-table td,
.batch-process-data-table td {
  padding-top: 8px;
  padding-bottom: 8px;
}

.batch-rename-data-table em,
.batch-rename-data-table td[data-label="新文件名"] {
  color: #ff5a1f;
  font-style: normal;
  font-weight: 900;
}

.batch-rename-data-table .module-thumb,
.frame-audio-data-table .module-thumb,
.batch-process-data-table .module-thumb {
  width: 52px;
  height: 34px;
  border-radius: 6px;
}

.frame-audio-data-table strong,
.batch-process-data-table strong,
.task-records-data-table strong,
.rename-file-data-table strong,
.rename-preview-data-table strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rename-file-data-table .rename-file-kind {
  display: inline-grid;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  place-items: center;
  border-radius: 6px;
  background: #f2f4f7;
  color: #475467;
  font-weight: 900;
}

.rename-file-data-table em,
.rename-preview-data-table em {
  color: #667085;
  font-style: normal;
  font-weight: 800;
}

.rename-preview-data-table tr.ok strong {
  color: #047857;
}

.rename-preview-data-table tr.warning strong,
.rename-preview-data-table tr.conflict strong {
  color: #ea580c;
}

.prod-file-data-table.data-table-wrap,
.orange-table.data-table-wrap,
.dashboard-table.data-table-wrap {
  overflow-x: auto;
}

.prod-file-table th,
.orange-data-table th,
.dashboard-table th {
  background: rgba(255,255,255,0.055);
}

.prod-file-table td,
.orange-data-table td,
.dashboard-table td {
  color: rgba(238,246,255,0.92);
}

.prod-file-table i.checked {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ff7a2f;
  box-shadow: inset 0 0 0 3px rgba(20, 26, 39, 0.92);
}

.orange-data-table .orange-row-progress,
.naming-queue-data-table .naming-queue-progress {
  display: inline-flex;
  width: 100%;
  min-width: 100px;
  align-items: center;
  gap: 8px;
}

.orange-data-table .orange-row-progress i,
.naming-queue-data-table .naming-queue-progress i {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
}

.orange-data-table .orange-row-progress em,
.naming-queue-data-table .naming-queue-progress em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #ff7a2f;
}

.settings-template-data-table button,
.settings-user-data-table button,
.naming-queue-data-table button,
.export-data-table button {
  white-space: nowrap;
}

.col-resizer {
  position: absolute;
  top: 0;
  right: -5px;
  z-index: 2;
  width: 12px;
  height: 100%;
  min-height: 42px;
  cursor: col-resize;
  touch-action: none;
  outline: none;
}

.col-resizer::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 5px;
  width: 2px;
  border-radius: 999px;
  background: rgba(167, 220, 255, 0);
  box-shadow: 0 0 0 rgba(111, 184, 255, 0);
  transition: background .16s ease, box-shadow .16s ease;
}

.resizable-table th:hover .col-resizer::after,
.col-resizer:focus-visible::after,
body.column-resizing .col-resizer::after {
  background: rgba(151, 216, 255, 0.70);
  box-shadow: 0 0 14px rgba(104, 186, 255, 0.34);
}

body.column-resizing {
  cursor: col-resize;
  user-select: none;
}

@media (max-width: 768px) {
  .local-project-grid,
  .rename-mode-options {
    grid-template-columns: 1fr;
  }

  .table-wrap.resizable-table {
    overflow-x: auto;
  }

  .resizable-table colgroup,
  .resizable-table .col-resizer {
    display: none;
  }
}

/* Compact admin exit affordance */
.sidebar-home {
  grid-template-columns: 38px minmax(0, 1fr) 36px;
}

.sidebar-exit {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: end;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(180, 210, 235, 0.18);
  border-radius: 13px;
  color: rgba(223, 244, 255, 0.86);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.025)),
    rgba(9, 19, 30, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.11),
    0 10px 20px rgba(0,0,0,0.12);
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.sidebar-exit::before {
  position: absolute;
  inset: 1px;
  border-radius: 12px;
  content: "";
  background: radial-gradient(circle at 32% 22%, rgba(255,255,255,0.34), transparent 36%);
  opacity: 0.54;
  pointer-events: none;
}

.sidebar-exit svg {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-home:hover .sidebar-exit,
.sidebar-home:focus-visible .sidebar-exit {
  color: #ffffff;
  border-color: rgba(116, 207, 255, 0.58);
  background:
    linear-gradient(145deg, rgba(116, 190, 255, 0.26), rgba(72, 212, 155, 0.10)),
    rgba(13, 31, 48, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.17),
    0 12px 26px rgba(55, 146, 213, 0.22);
  transform: translateX(2px) scale(1.04);
}

.sidebar-home:active .sidebar-exit {
  transform: translateX(3px) scale(0.96);
}

body.sidebar-collapsed .sidebar-exit {
  display: none;
}

/* System directory picker inputs */
.directory-input-wrap {
  position: relative;
  display: block;
  min-width: 0;
}

.directory-input-wrap input {
  width: 100%;
  padding-right: 48px;
  cursor: pointer;
}

.directory-input-icon {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(180, 210, 235, 0.16);
  border-radius: 11px;
  color: rgba(223, 244, 255, 0.82);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.025)),
    rgba(8, 18, 29, 0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: none;
  transform: translateY(-50%);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.directory-input-icon .svg-icon,
.directory-input-icon svg {
  width: 17px;
  height: 17px;
}

.output-directory-field:hover .directory-input-icon,
.directory-input-wrap:focus-within .directory-input-icon {
  color: #ffffff;
  border-color: rgba(116, 207, 255, 0.54);
  background:
    linear-gradient(145deg, rgba(116, 190, 255, 0.24), rgba(72, 212, 155, 0.09)),
    rgba(13, 31, 48, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 10px 22px rgba(55, 146, 213, 0.18);
  transform: translateY(-50%) scale(1.04);
}

.directory-input-wrap input.directory-picking {
  border-color: rgba(116, 207, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.13),
    0 0 0 3px rgba(96, 183, 255, 0.12);
}

/* Final Liquid Glass enforcement layer */
:root {
  color-scheme: dark;
  --bg: #081018;
  --bg-deep: #03070c;
  --surface: rgba(16, 24, 34, 0.48);
  --surface-strong: rgba(18, 29, 42, 0.68);
  --surface-soft: rgba(255, 255, 255, 0.075);
  --line: rgba(235, 247, 255, 0.18);
  --line-strong: rgba(235, 247, 255, 0.34);
  --edge: rgba(255, 255, 255, 0.58);
  --text: #f8fcff;
  --text-soft: #d5e5f1;
  --muted: #92a8b9;
  --accent: #80ccff;
  --accent-strong: #48a2f0;
  --green: #6ee0a9;
  --amber: #ffc86f;
  --red: #ff8b99;
  --cyan: #72e7f2;
  --focus: rgba(128, 204, 255, 0.42);
  --radius: 10px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(255,255,255,0.06);
  --shadow-lift: 0 32px 92px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(114,231,242,0.14);
  --glass-tint: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(154, 184, 214, 0.075) 42%, rgba(8, 16, 26, 0.20));
  --glass-edge: linear-gradient(135deg, rgba(255,255,255,0.48), rgba(255,255,255,0.08) 28%, rgba(114,231,242,0.16) 72%, rgba(255,255,255,0.30));
  --ease-glass: cubic-bezier(0.175, 0.885, 0.32, 1.18);
  --blur: 30px;
  --sat: 175%;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
}

body {
  min-height: 100dvh;
  color: var(--text);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 84px),
    conic-gradient(from 236deg at 18% 12%, rgba(115, 231, 242, 0.22), transparent 18%, rgba(110, 224, 169, 0.14) 34%, transparent 48%, rgba(128, 204, 255, 0.18) 72%, transparent 100%),
    linear-gradient(145deg, #111b26 0%, #081018 46%, #05080d 100%);
  font-size: 15px;
  line-height: 1.5;
}

body::before {
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0.46;
  filter: none;
  border-radius: 0;
  background:
    linear-gradient(100deg, transparent 0%, rgba(128,204,255,0.12) 18%, transparent 33%),
    linear-gradient(260deg, transparent 4%, rgba(110,224,169,0.10) 42%, transparent 64%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.034) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 74px);
}

body::after {
  inset: 0;
  width: auto;
  height: auto;
  right: auto;
  top: auto;
  opacity: 0.20;
  filter: none;
  transform: none;
  border-radius: 0;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.72) 58%, transparent 100%);
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 58px 58px;
}

.glass-panel,
.glass-bar,
.panel,
.liquid-surface,
.toast,
.marketing-nav,
.landing-cta,
.feature-card,
.scenario-card,
.proof-card,
.trust-list li,
.workflow-steps li {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--glass-tint), var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur)) saturate(var(--sat)) contrast(1.06);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)) contrast(1.06);
}

.glass-panel::before,
.glass-bar::before,
.panel::before,
.liquid-surface::before,
.toast::before,
.marketing-nav::before,
.landing-cta::before,
.feature-card::before,
.scenario-card::before,
.proof-card::before,
.trust-list li::before,
.workflow-steps li::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), transparent 22%),
    linear-gradient(104deg, rgba(255,255,255,0.18), transparent 28%, rgba(255,255,255,0.06) 64%, transparent 78%),
    linear-gradient(90deg, rgba(128,204,255,0.10), transparent 46%, rgba(110,224,169,0.08));
  opacity: 0.95;
}

.glass-panel::after,
.glass-bar::after,
.panel::after,
.liquid-surface::after,
.toast::after,
.marketing-nav::after,
.landing-cta::after,
.feature-card::after,
.scenario-card::after,
.proof-card::after,
.trust-list li::after,
.workflow-steps li::after {
  inset: 1px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: inherit;
  background: var(--glass-edge);
  filter: url(#glass-distortion);
  opacity: 0.58;
}

input,
select,
textarea {
  color: rgba(248,252,255,0.96);
  border-color: rgba(235,247,255,0.18);
  border-radius: 10px;
  background: rgba(5, 11, 18, 0.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 28px rgba(0,0,0,0.12);
}

input::placeholder,
textarea::placeholder {
  color: rgba(213, 229, 241, 0.52);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(128, 204, 255, 0.78);
  outline-offset: 2px;
  border-color: rgba(128, 204, 255, 0.88);
  box-shadow: 0 0 0 5px rgba(128, 204, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.18);
}

.app-shell {
  grid-template-columns: 282px minmax(0, 1fr);
  gap: 16px;
  padding: 12px;
}

.sidebar {
  top: 12px;
  height: calc(100dvh - 24px);
  padding: 18px;
  border-width: 1px;
  border-radius: var(--radius-xl);
}

.traffic {
  display: flex;
  gap: 8px;
  height: 16px;
  margin: 0 0 20px 2px;
}

.traffic span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 10px rgba(0,0,0,0.18);
}

.traffic span:nth-child(1) { background: #ff6b64; }
.traffic span:nth-child(2) { background: #ffc44d; }
.traffic span:nth-child(3) { background: #5ee084; }

.brand-card {
  min-height: 62px;
  margin-bottom: 26px;
  padding: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.brand-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  color: #05111a;
  font-size: 21px;
  font-weight: 900;
  background: linear-gradient(145deg, #f7ffff 0%, #90ebff 44%, #82baff 100%);
  box-shadow: 0 18px 40px rgba(72, 162, 240, 0.28), inset 0 1px 0 rgba(255,255,255,0.88), inset 0 -10px 22px rgba(42, 120, 190, 0.18);
}

.brand-title {
  color: #fff;
  font-size: 15px;
  font-weight: 820;
  white-space: normal;
}

.brand-subtitle {
  margin-top: 3px;
  color: rgba(213, 229, 241, 0.66);
  font-size: 12px;
}

.sidebar-controls {
  margin-left: auto;
}

.sidebar-control,
.sidebar-home,
.icon-status,
.admin-chip,
.language-toggle,
.keycap,
.search-box {
  border-color: rgba(235,247,255,0.18);
  background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045)), rgba(11, 21, 32, 0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 12px 30px rgba(0,0,0,0.12);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.side-nav button {
  min-height: 52px;
  gap: 12px;
  padding: 0 13px;
  border-radius: 14px;
  color: rgba(248,252,255,0.82);
  font-size: 15px;
  font-weight: 760;
  transition: transform 240ms var(--ease-glass), border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.side-nav button:hover {
  border-color: rgba(235,247,255,0.18);
  background: rgba(255,255,255,0.105);
  transform: translateX(3px) scale(1.01);
}

.side-nav button.active {
  color: #fff;
  border-color: rgba(128,204,255,0.62);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.26), rgba(128,204,255,0.14) 45%, rgba(110,224,169,0.09)),
    rgba(12, 28, 44, 0.40);
  box-shadow:
    0 18px 42px rgba(45, 136, 220, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -1px 0 rgba(114,231,242,0.26);
}

.main {
  grid-template-rows: 78px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding: 0;
}

.topbar {
  height: 78px;
  padding: 0 14px 0 18px;
  border-radius: var(--radius-xl);
}

.crumb {
  min-height: 46px;
  padding: 6px 12px;
  border: 1px solid rgba(235,247,255,0.13);
  border-radius: 16px;
  background: rgba(255,255,255,0.055);
}

.crumb h1 {
  color: #fff;
  font-size: 25px;
  font-weight: 850;
}

.search-box {
  width: min(500px, 40vw);
  height: 48px;
  border-radius: 16px;
}

.search-box input {
  color: rgba(248,252,255,0.95);
  background: transparent;
  box-shadow: none;
}

.icon-status,
.admin-chip,
.app-language-toggle {
  height: 48px;
  border-radius: 15px;
}

.icon-status {
  width: 48px;
}

.icon-status::before {
  background: var(--amber);
  box-shadow: 0 0 18px rgba(255,200,111,0.76);
}

.icon-status.ready::before {
  background: var(--green);
  box-shadow: 0 0 18px rgba(110,224,169,0.82);
}

.hero-workbench {
  min-height: 190px;
  margin-bottom: 14px;
  padding: 24px;
  border-radius: var(--radius-xl);
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.38fr);
  align-items: stretch;
}

.hero-copy h2 {
  color: #fff;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 900;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero-copy p:not(.eyebrow) {
  color: rgba(213,229,241,0.78);
  font-size: 15px;
}

.eyebrow,
.section-kicker,
.landing-eyebrow {
  color: #aee7ff;
  letter-spacing: 0;
  text-transform: none;
}

.hero-glass-stack {
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 14px;
  min-width: 0;
}

.glass-orbit {
  --progress: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: 152px;
  aspect-ratio: 1;
  border: 1px solid rgba(235,247,255,0.22);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06)),
    conic-gradient(from 210deg, rgba(128,204,255,0.94) 0 calc(var(--progress) * 1%), rgba(255,255,255,0.10) 0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(114,231,242,0.18), 0 20px 45px rgba(0,0,0,0.18);
  overflow: hidden;
}

.glass-orbit::before {
  position: absolute;
  inset: 13px;
  content: "";
  border-radius: inherit;
  background: rgba(9, 18, 28, 0.58);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.orbit-ring {
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.16);
  filter: url(#glass-distortion);
}

.glass-orbit strong,
.glass-orbit span {
  position: relative;
  z-index: 1;
}

.glass-orbit strong {
  font-size: 32px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.glass-orbit span {
  margin-top: -38px;
  color: rgba(213,229,241,0.72);
  font-size: 12px;
  font-weight: 780;
}

.panel {
  border-radius: 20px;
  transition: transform 240ms var(--ease-glass), box-shadow 220ms ease, border-color 220ms ease;
}

.panel:hover {
  border-color: rgba(235,247,255,0.26);
  box-shadow: var(--shadow-lift);
}

.panel-head {
  min-height: 62px;
  padding: 18px 20px 12px;
  border-color: rgba(235,247,255,0.12);
  background: rgba(255,255,255,0.035);
}

.panel-head h2,
.panel-head h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: 0;
}

.panel-body {
  padding: 16px 20px 20px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.15fr) minmax(300px, 0.85fr) minmax(280px, 0.72fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}

.asset-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.flow-node,
.preview-line,
.capability-card,
.stat-card,
.row,
.job-line,
.file-row,
.token-row,
.bucket-band,
.subsection,
.job-card,
.import-tile,
.effect-card,
.asset-picker,
.asset-card,
.mode-builder,
.mode-choice,
.local-project-panel,
.table-wrap,
.empty-state,
.ffmpeg-card,
.check,
.path-import {
  border-color: rgba(235,247,255,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.105), rgba(255,255,255,0.03)), rgba(10, 19, 29, 0.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 28px rgba(0,0,0,0.10);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.flow-node {
  display: grid;
  gap: 4px;
  min-height: 96px;
  padding: 13px;
  border: 1px solid rgba(235,247,255,0.14);
  border-radius: 14px;
}

.flow-node span,
.flow-node small,
.preview-line small,
.capability-card small {
  color: rgba(213,229,241,0.62);
  font-size: 12px;
}

.flow-node strong {
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.mini-preview {
  display: grid;
  gap: 8px;
}

.preview-line {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 14px;
}

.preview-line strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(114,231,242,0.86);
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.capability-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 136px;
  padding: 14px;
  border: 1px solid rgba(235,247,255,0.15);
  border-radius: 16px;
  color: var(--text);
  text-align: left;
  transition: transform 220ms var(--ease-glass), border-color 180ms ease, background 180ms ease;
}

.capability-card:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(128,204,255,0.44);
  background: linear-gradient(145deg, rgba(128,204,255,0.18), rgba(110,224,169,0.07));
}

.capability-card:active {
  transform: scale(0.975);
}

.capability-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  color: #dff6ff;
  background: rgba(255,255,255,0.09);
}

.capability-card strong {
  color: #fff;
  font-size: 14px;
  font-weight: 850;
}

.stat-card {
  min-height: 104px;
  border-radius: 16px;
  transition: transform 220ms var(--ease-glass), border-color 180ms ease, box-shadow 180ms ease;
}

.stat-card:hover,
.row:hover,
.file-row:hover,
.token-row:hover,
.effect-card:hover,
.asset-card:hover,
.mode-choice:hover {
  border-color: rgba(128,204,255,0.35);
  transform: translateY(-1px);
}

.stat-value {
  color: var(--accent);
  font-size: 30px;
  font-weight: 900;
}

.stat-value.green { color: var(--green); }
.stat-value.orange { color: var(--amber); }
.stat-value.cyan { color: var(--cyan); }

.btn,
.icon-btn,
.tab-btn,
.language-toggle,
.sidebar-control {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(235,247,255,0.18);
  border-radius: 12px;
  color: rgba(248,252,255,0.96);
  background: linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)), rgba(10, 20, 31, 0.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 12px 30px rgba(0,0,0,0.12);
  transition: transform 220ms var(--ease-glass), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.btn::before,
.icon-btn::before,
.tab-btn::before,
.language-toggle::before,
.sidebar-control::before {
  position: absolute;
  inset: 1px 1px auto;
  height: 45%;
  z-index: -1;
  content: "";
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), transparent);
  opacity: 0.8;
}

.btn:hover,
.icon-btn:hover,
.tab-btn:hover,
.language-toggle:hover,
.sidebar-control:hover {
  border-color: rgba(128,204,255,0.46);
  background: linear-gradient(145deg, rgba(255,255,255,0.22), rgba(128,204,255,0.11)), rgba(12, 28, 44, 0.50);
  box-shadow: 0 16px 36px rgba(45, 136, 220, 0.16), inset 0 1px 0 rgba(255,255,255,0.24);
  transform: translateY(-1px) scale(1.01);
}

.btn:active,
.icon-btn:active,
.tab-btn:active,
.language-toggle:active,
.sidebar-control:active {
  transform: scale(0.965);
}

.btn.primary,
.btn.green,
.tab-btn.active,
.mode-choice:has(input:checked),
.asset-card.selected,
.rename-mode-option.active {
  border-color: rgba(128,204,255,0.70);
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.30), rgba(128,204,255,0.20) 48%, rgba(110,224,169,0.13)),
    rgba(31, 98, 157, 0.42);
  box-shadow:
    0 0 0 1px rgba(128,204,255,0.10),
    0 20px 45px rgba(45,136,220,0.20),
    inset 0 1px 0 rgba(255,255,255,0.36),
    inset 0 -1px 0 rgba(114,231,242,0.26);
}

.btn.danger,
.icon-btn.danger {
  color: #ffd5da;
  border-color: rgba(255,139,153,0.42);
  background: linear-gradient(145deg, rgba(255,139,153,0.16), rgba(255,255,255,0.045));
}

.badge {
  min-height: 30px;
  border-radius: 10px;
  color: #d6ffe8;
  border-color: rgba(110,224,169,0.42);
  background: rgba(110,224,169,0.12);
}

.badge.warn {
  color: #ffe5b5;
  border-color: rgba(255,200,111,0.44);
  background: rgba(255,200,111,0.12);
}

.badge.error {
  color: #ffd1d8;
  border-color: rgba(255,139,153,0.44);
  background: rgba(255,139,153,0.13);
}

.row {
  border-radius: 14px;
}

.row-title {
  color: #fff;
  font-weight: 840;
}

.row-sub,
.meta,
.hint,
.small,
.file-meta,
.asset-meta,
.source-pill,
.muted-text {
  color: rgba(213,229,241,0.62);
}

.progress span {
  background: linear-gradient(90deg, var(--accent), var(--green), var(--cyan));
  box-shadow: 0 0 16px rgba(114,231,242,0.42);
}

.process-bottom {
  bottom: 10px;
  border-radius: 18px;
}

.table-wrap {
  overflow-x: auto;
  border-top: 1px solid rgba(235,247,255,0.12);
}

th {
  color: rgba(213,229,241,0.72);
  background: rgba(255,255,255,0.055);
}

td {
  color: rgba(248,252,255,0.90);
  border-color: rgba(235,247,255,0.10);
}

tr:hover td {
  background: rgba(128,204,255,0.075);
}

.product-home {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.034) 0 1px, transparent 1px 86px),
    conic-gradient(from 220deg at 20% 12%, rgba(128,204,255,0.22), transparent 23%, rgba(110,224,169,0.10) 42%, transparent 64%, rgba(255,200,111,0.08) 82%, transparent 100%),
    linear-gradient(145deg, #121d28 0%, #081018 52%, #05080d 100%);
}

@media (max-width: 1400px) {
  .dashboard-grid,
  .dashboard-hero {
    grid-template-columns: 1fr;
  }

  .hero-glass-stack {
    justify-items: start;
  }
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 248px minmax(0, 1fr);
  }

  .asset-flow,
  .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .app-shell {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .sidebar {
    position: relative;
    top: auto;
    height: auto;
    border-radius: 22px;
  }

  .main {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .topbar {
    height: auto;
    min-height: 78px;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    border-radius: 22px;
  }

  .top-actions,
  .search-box {
    width: 100%;
  }

  .hero-workbench {
    padding: 18px;
  }

  .glass-orbit {
    width: 124px;
  }

  .stats-grid,
  .asset-flow,
  .capability-grid {
    grid-template-columns: 1fr;
  }

  .preview-line {
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .preview-line .badge {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 420px) {
  .app-shell {
    padding: 8px;
  }

  .sidebar,
  .topbar,
  .panel {
    border-radius: 18px;
  }

  .brand-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .sidebar-controls {
    grid-column: 1 / -1;
    margin-left: 0;
  }

  .top-actions {
    grid-template-columns: minmax(0, 1fr) 48px 52px 64px;
  }
}

@media (min-width: 901px) {
  .dashboard-hero {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  }

  .hero-glass-stack {
    justify-items: end;
  }
}

@media (max-width: 900px) {
  .dashboard-hero {
    grid-template-columns: 1fr;
  }

  .hero-glass-stack {
    justify-items: start;
  }
}

.search-box {
  position: relative;
}

.search-box input {
  padding-right: 78px;
}

.keycap {
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 1;
  height: 26px;
  transform: translateY(-50%);
}

@media (max-width: 420px) {
  .search-box input {
    padding-right: 40px;
  }

  .keycap {
    display: none;
  }
}

/* Reference-grade glass dashboard pass */
:root {
  --bg: #040914;
  --bg-deep: #01040a;
  --surface: rgba(21, 31, 48, 0.46);
  --surface-strong: rgba(26, 38, 58, 0.64);
  --line: rgba(205, 229, 255, 0.22);
  --line-strong: rgba(165, 215, 255, 0.48);
  --text: #f6fbff;
  --text-soft: #cedceb;
  --muted: #8ca0b3;
  --accent: #49c6ff;
  --accent-strong: #2d8eff;
  --green: #42df96;
  --amber: #f3ba42;
  --red: #ff6f7e;
  --cyan: #67e8ff;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --blur: 34px;
  --sat: 185%;
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(255,255,255,0.06);
  --shadow-lift: 0 28px 78px rgba(0,0,0,0.46), 0 0 0 1px rgba(83, 177, 255, 0.20), inset 0 1px 0 rgba(255,255,255,0.28);
  --glass-tint: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(128, 156, 192, 0.105) 44%, rgba(4, 10, 20, 0.30));
  --ease-glass: cubic-bezier(0.175, 0.885, 0.32, 1.18);
}

body.workbench-open {
  height: 100dvh;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 78% -8%, rgba(93, 184, 255, 0.46), transparent 28%),
    radial-gradient(circle at 97% 27%, rgba(55, 124, 255, 0.34), transparent 24%),
    radial-gradient(circle at 12% 76%, rgba(255, 132, 90, 0.22), transparent 24%),
    radial-gradient(circle at 45% 45%, rgba(74, 188, 255, 0.17), transparent 34%),
    linear-gradient(145deg, #040914 0%, #07111d 46%, #02050b 100%);
}

body.workbench-open::before {
  opacity: 0.72;
  background:
    linear-gradient(115deg, transparent 0 20%, rgba(93, 189, 255, 0.18) 21% 22%, transparent 23% 100%),
    linear-gradient(28deg, transparent 0 42%, rgba(255, 129, 88, 0.16) 43% 44%, transparent 45% 100%),
    radial-gradient(circle at 54% 30%, rgba(255,255,255,0.20), transparent 9%),
    repeating-linear-gradient(110deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 86px);
  filter: blur(0);
}

body.workbench-open::after {
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    radial-gradient(circle at 88% 8%, rgba(255,255,255,0.32), transparent 10%),
    radial-gradient(circle at 18% 58%, rgba(255,255,255,0.16), transparent 16%);
  background-size: 72px 72px, 72px 72px, 100% 100%, 100% 100%;
}

body.workbench-open .app-shell {
  position: relative;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 46px;
  grid-template-areas:
    "sidebar main"
    "dock dock";
  gap: 10px 14px;
  height: 100dvh;
  padding: 10px;
  overflow: hidden;
}

body.workbench-open .app-shell::before {
  position: fixed;
  inset: 10px;
  z-index: -1;
  pointer-events: none;
  content: "";
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.08), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(80, 169, 255, 0.34), transparent 22%),
    radial-gradient(circle at 68% 66%, rgba(40, 118, 255, 0.18), transparent 30%),
    radial-gradient(circle at 14% 42%, rgba(255, 162, 112, 0.18), transparent 26%);
  filter: saturate(1.25);
}

body.workbench-open .sidebar {
  grid-area: sidebar;
  position: relative;
  top: 0;
  height: auto;
  min-height: 0;
  padding: 18px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06) 46%, rgba(6, 11, 20, 0.24)),
    rgba(8, 16, 28, 0.56);
}

body.workbench-open .main {
  grid-area: main;
  display: grid;
  grid-template-rows: 78px minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}

body.workbench-open .status-dock {
  grid-area: dock;
}

.glass-panel,
.glass-bar,
.panel,
.liquid-surface,
.toast,
.status-dock,
.sidebar-storage,
.sidebar-version {
  border-color: rgba(205,229,255,0.20);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(143, 169, 206, 0.09) 44%, rgba(7, 14, 27, 0.28)),
    rgba(15, 25, 42, 0.48);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(90,190,255,0.10);
  backdrop-filter: blur(var(--blur)) saturate(var(--sat)) contrast(1.08);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)) contrast(1.08);
}

.glass-panel::after,
.glass-bar::after,
.panel::after,
.liquid-surface::after,
.toast::after,
.status-dock::after,
.sidebar-storage::after,
.sidebar-version::after {
  opacity: 0.74;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.52), transparent 22%, rgba(88, 188, 255, 0.18) 68%, rgba(255,255,255,0.30)),
    linear-gradient(90deg, transparent, rgba(255,255,255,0.11), transparent);
  filter: url(#glass-distortion);
}

.traffic {
  margin-bottom: 18px;
}

.brand-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 48px;
  margin-bottom: 28px;
  padding: 0;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 18px;
}

.brand-title {
  font-size: 15px;
  line-height: 1.25;
}

.brand-subtitle {
  color: rgba(222,238,252,0.70);
  font-size: 11px;
}

.sidebar-controls {
  display: flex;
  gap: 7px;
  grid-column: 3;
  grid-row: 1;
}

.sidebar-control {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 12px;
}

.nav-label {
  margin: 0 0 12px 4px;
  color: rgba(222,238,252,0.64);
}

.side-nav {
  gap: 10px;
}

.side-nav button {
  min-height: 58px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)),
    rgba(12, 20, 34, 0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 12px 26px rgba(0,0,0,0.14);
}

.side-nav button.active {
  border-color: rgba(82, 188, 255, 0.86);
  background:
    linear-gradient(145deg, rgba(92, 196, 255, 0.38), rgba(42, 106, 204, 0.20)),
    rgba(16, 36, 58, 0.62);
  box-shadow:
    0 0 0 1px rgba(100, 214, 255, 0.18),
    0 0 28px rgba(58, 180, 255, 0.34),
    inset 0 1px 0 rgba(255,255,255,0.34);
}

.sidebar-storage,
.sidebar-version {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(205,229,255,0.18);
  border-radius: 16px;
}

.sidebar-storage {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px 14px;
  margin-top: auto;
  padding: 14px;
}

.sidebar-section-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-weight: 820;
}

.mini-link,
.text-link {
  min-height: 0;
  padding: 0;
  border: 0;
  color: #58caff;
  background: transparent;
  font-weight: 780;
}

.storage-ring {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background: conic-gradient(var(--cyan) 0 22%, var(--green) 22% 64%, #2d69ff 64% 78%, rgba(255,255,255,0.12) 78% 100%);
  box-shadow: 0 0 22px rgba(73,198,255,0.25);
}

.storage-ring span {
  width: 54px;
  height: 54px;
  border-radius: inherit;
  background: rgba(9, 18, 31, 0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}

.storage-total {
  align-self: center;
}

.storage-total strong {
  color: #fff;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.storage-total span {
  display: block;
  color: rgba(222,238,252,0.72);
  font-size: 12px;
}

.storage-legend {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  color: rgba(222,238,252,0.74);
  font-size: 12px;
}

.storage-legend span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 999px;
}

.dot.cyan { background: var(--cyan); }
.dot.amber { background: var(--amber); }
.dot.rose { background: #ff8bad; }

.sidebar-home {
  margin-top: 12px;
}

.sidebar-version {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 70px;
  margin-top: 12px;
  padding: 12px;
}

.version-shield {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--green);
  background: rgba(66,223,150,0.12);
}

.version-shield svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.sidebar-version strong,
.sidebar-version b {
  color: #fff;
}

.sidebar-version small {
  display: block;
  color: var(--green);
  font-size: 12px;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 12px;
  height: 78px;
  padding: 10px 14px;
  border-radius: 18px;
}

.crumb {
  min-width: 150px;
  min-height: 54px;
  border-radius: 16px;
}

.crumb h1 {
  font-size: 22px;
}

.top-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 190px 160px 92px 142px;
  gap: 10px;
  width: 100%;
}

.search-box,
.top-pill,
.language-toggle,
.admin-chip {
  height: 54px;
  border-radius: 15px;
}

.icon-status {
  width: auto;
  height: 54px;
  padding-left: 42px;
  padding-right: 16px;
  color: #dff2ff;
}

.icon-status::after {
  content: "FFmpeg 状态\a已就绪";
  white-space: pre;
  font-size: 12px;
  line-height: 1.18;
  text-align: left;
}

.icon-status:not(.ready)::after {
  content: "FFmpeg 状态\a未检测";
}

.icon-status::before {
  left: 18px;
  top: 22px;
}

.top-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(205,229,255,0.20);
  color: #eef8ff;
  background: linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.055)), rgba(20,33,52,0.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 14px 34px rgba(0,0,0,0.14);
}

.top-pill svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.language-toggle {
  min-width: 0;
}

.admin-chip {
  justify-content: center;
}

.view {
  min-height: 0;
  padding: 0;
  overflow: auto;
}

.ops-dashboard {
  display: grid;
  grid-template-columns: minmax(280px, 0.96fr) minmax(330px, 1.08fr) minmax(280px, 0.86fr);
  grid-template-areas:
    "overview running quick"
    "rename process side";
  gap: 12px;
  min-height: 100%;
}

.ops-card {
  min-width: 0;
  border-radius: 16px;
}

.task-overview { grid-area: overview; }
.running-card { grid-area: running; }
.quick-card { grid-area: quick; }
.rename-preview-card { grid-area: rename; }
.process-settings-card { grid-area: process; }
.dashboard-side-stack {
  grid-area: side;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.ops-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 16px 18px 8px;
}

.ops-head h2 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 860;
}

.ops-head span,
.ops-head small {
  color: rgba(214,231,247,0.72);
  font-size: 12px;
  font-weight: 760;
}

.system-actions {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.system-actions .text-link {
  display: inline-flex;
  min-height: 32px;
  padding: 0 9px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(205, 229, 255, 0.14);
  border-radius: 9px;
  color: rgba(202, 236, 255, 0.92);
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 20px rgba(0,0,0,0.14);
  cursor: pointer;
}

.system-actions .text-link:hover {
  color: #fff;
  border-color: rgba(100, 203, 255, 0.38);
  transform: translateY(-1px);
}

.system-actions .text-link svg {
  width: 14px;
  height: 14px;
}

.version-pill {
  display: inline-flex;
  max-width: 132px;
  min-height: 32px;
  padding: 0 10px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(66, 223, 150, 0.20);
  border-radius: 999px;
  color: #bfffe6 !important;
  background: rgba(66, 223, 150, 0.10);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-body {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 18px 18px;
}

.dashboard-donut {
  --progress: 68;
  position: relative;
  display: grid;
  place-items: center;
  width: 166px;
  height: 166px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(8,15,26,0.92) 0 48%, transparent 49%),
    conic-gradient(var(--accent) 0 calc(var(--progress) * 1%), rgba(255,255,255,0.13) 0 100%);
  box-shadow: 0 0 32px rgba(73,198,255,0.24), inset 0 1px 0 rgba(255,255,255,0.20);
}

.dashboard-donut::before {
  position: absolute;
  inset: 16px;
  content: "";
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.12);
}

.dashboard-donut strong {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 34px;
  font-weight: 880;
}

.dashboard-donut span {
  position: relative;
  z-index: 1;
  margin-top: -48px;
  color: rgba(226,238,252,0.86);
  font-size: 13px;
}

.kpi-stack {
  display: grid;
  gap: 9px;
}

.dashboard-kpi {
  position: relative;
  display: grid;
  grid-template-columns: minmax(86px, 1fr) auto 34px;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  padding: 0 0 0 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dashboard-kpi span {
  color: rgba(226,238,252,0.78);
  white-space: nowrap;
}

.dashboard-kpi strong {
  color: #fff;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.dashboard-kpi i {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(73,198,255,0.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13);
}

.dashboard-kpi.green i { background: rgba(66,223,150,0.16); }
.dashboard-kpi.amber i { background: rgba(243,186,66,0.16); }
.dashboard-kpi.red i { background: rgba(255,111,126,0.16); }

.running-list {
  display: grid;
  gap: 12px;
  padding: 8px 18px 18px;
}

.running-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}

.media-thumb {
  display: block;
  width: 90px;
  height: 64px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)),
    linear-gradient(135deg, #789ac0, #163b63 48%, #d0a358);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.thumb-2 {
  background:
    radial-gradient(circle at 60% 42%, #f4d8a7, transparent 22%),
    linear-gradient(135deg, #54647e, #c4946a 48%, #211a2a);
}

.running-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.running-title strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.running-meta {
  display: flex;
  gap: 18px;
  margin: 6px 0;
  color: rgba(226,238,252,0.78);
  font-size: 12px;
}

.progress.tiny {
  height: 6px;
  margin: 0;
}

.progress.green span {
  background: linear-gradient(90deg, var(--green), var(--cyan));
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 8px 18px 18px;
}

.quick-action {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid rgba(205,229,255,0.18);
  border-radius: 13px;
  color: var(--text);
  text-align: left;
  background: linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)), rgba(18, 31, 50, 0.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.17), 0 12px 28px rgba(0,0,0,0.12);
  transition: transform 220ms var(--ease-glass), border-color 180ms ease, box-shadow 180ms ease;
}

.quick-action:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(86, 194, 255, 0.56);
  box-shadow: 0 0 28px rgba(70,177,255,0.20), inset 0 1px 0 rgba(255,255,255,0.24);
}

.quick-action span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(73,198,255,0.18);
}

.quick-action.green span { background: rgba(66,223,150,0.18); }
.quick-action.amber span,
.quick-action.orange span { background: rgba(243,186,66,0.18); }

.quick-action svg {
  width: 23px;
  height: 23px;
}

.quick-action strong {
  color: #fff;
}

.quick-action small {
  color: rgba(226,238,252,0.68);
  font-size: 12px;
}

.rule-chip {
  display: inline-flex;
  min-height: 28px;
  padding: 0 10px;
  align-items: center;
  border: 1px solid rgba(73,198,255,0.26);
  border-radius: 9px;
  color: #8ddfff !important;
  background: rgba(73,198,255,0.10);
}

.compact-btn {
  min-height: 38px;
}

.dashboard-table {
  margin: 6px 18px 0;
  overflow: auto;
  border: 1px solid rgba(205,229,255,0.12);
  border-radius: 12px;
}

.dashboard-table table {
  min-width: 620px;
}

.dashboard-table th,
.dashboard-table td {
  padding: 10px 9px;
  font-size: 12px;
}

.dashboard-table th {
  color: rgba(226,238,252,0.72);
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(73,198,255,0.78);
}

.table-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 16px;
  color: rgba(226,238,252,0.78);
  font-size: 12px;
}

.process-setting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 8px 18px 12px;
}

.setting-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(205,229,255,0.13);
  border-radius: 12px;
  background: rgba(12, 22, 38, 0.34);
}

.dashboard-control {
  min-height: 64px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.035)),
    rgba(9, 21, 35, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 10px 24px rgba(0,0,0,0.10);
}

.dashboard-control select,
.dashboard-control input[type="range"],
.dashboard-control input[type="checkbox"] {
  cursor: pointer;
}

.dashboard-select {
  grid-template-columns: minmax(0, 1fr) 20px;
}

.dashboard-select select {
  grid-column: 1 / -1;
  min-width: 0;
  height: 34px;
  padding: 0 36px 0 10px;
  border: 1px solid rgba(205,229,255,0.15);
  border-radius: 10px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)),
    rgba(8, 18, 31, 0.58);
}

.dashboard-select i {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-right: 1.6px solid rgba(235,247,255,0.78);
  border-bottom: 1.6px solid rgba(235,247,255,0.78);
  transform: rotate(45deg);
  pointer-events: none;
}

.dashboard-range {
  grid-template-columns: minmax(0, 1fr) 58px;
}

.dashboard-range input[type="range"] {
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

.dashboard-range input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--accent), var(--green)) 0 / calc(var(--range, 50) * 1%) 100% no-repeat,
    rgba(255,255,255,0.13);
}

.dashboard-range input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: 999px;
  background: linear-gradient(145deg, #fff, #bfeeff);
  box-shadow: 0 4px 16px rgba(73,198,255,0.34);
  appearance: none;
  -webkit-appearance: none;
}

.dashboard-range b {
  justify-self: end;
  display: inline-flex;
  min-width: 48px;
  min-height: 30px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(205,229,255,0.13);
  border-radius: 9px;
  background: rgba(255,255,255,0.07);
  font-variant-numeric: tabular-nums;
}

.dashboard-toggle {
  grid-template-columns: minmax(0, 1fr) 48px;
}

.dashboard-toggle input[type="checkbox"] {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 46px;
  height: 26px;
  border: 1px solid rgba(205,229,255,0.16);
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  transition: background 180ms ease, border-color 180ms ease;
}

.dashboard-toggle input[type="checkbox"]::before {
  display: block;
  width: 20px;
  height: 20px;
  margin: 2px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(145deg, #fff, #cdeaff);
  box-shadow: 0 5px 14px rgba(0,0,0,0.22);
  transition: transform 180ms var(--ease-glass);
}

.dashboard-toggle input[type="checkbox"]:checked {
  border-color: rgba(66,223,150,0.46);
  background: rgba(66,223,150,0.30);
}

.dashboard-toggle input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}

.setting-control.wide {
  grid-column: 1 / -1;
}

.setting-control span {
  grid-column: 1 / -1;
  color: rgba(226,238,252,0.76);
  font-size: 12px;
}

.setting-control b {
  color: #fff;
  font-size: 12px;
  font-weight: 760;
}

.setting-control em {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

.setting-control em i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--green));
}

.process-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 10px;
  padding: 0 18px 18px;
}

.export-list,
.system-metrics {
  display: grid;
  gap: 10px;
  padding: 8px 16px 16px;
}

.export-row-mini {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
}

.export-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: rgba(238,248,255,0.9);
  background: rgba(255,255,255,0.11);
}

.export-icon svg {
  width: 19px;
  height: 19px;
}

.export-row-mini strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-row-mini small {
  display: block;
  color: rgba(226,238,252,0.62);
  font-size: 11px;
}

.export-row-mini b {
  grid-column: 2 / 4;
  justify-self: end;
  color: rgba(226,238,252,0.82);
  font-size: 12px;
}

.system-metric {
  display: grid;
  grid-template-columns: 94px 44px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: rgba(226,238,252,0.75);
  font-size: 12px;
}

.system-metric strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.system-metric i {
  height: 24px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, transparent 0 16%, currentColor 17% 18%, transparent 19% 34%, currentColor 35% 36%, transparent 37% 55%, currentColor 56% 57%, transparent 58% 100%),
    linear-gradient(180deg, transparent, rgba(255,255,255,0.06));
  opacity: 0.86;
}

.system-metric.cyan { color: var(--cyan); }
.system-metric.green { color: var(--green); }
.system-metric.blue { color: var(--accent); }
.system-metric.amber { color: var(--amber); }
.system-metric.orange { color: #ff5b18; }
.system-metric.purple { color: #7560d9; }

.status-dock {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  color: rgba(226,238,252,0.76);
  font-size: 12px;
}

.status-dock span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-dock b {
  margin-left: 8px;
  color: #fff;
  font-weight: 720;
}

.dock-status {
  color: #d9fff0;
}

.dock-status i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 14px rgba(66,223,150,0.8);
}

.badge.info {
  color: #bceaff;
  border-color: rgba(73,198,255,0.42);
  background: rgba(73,198,255,0.12);
}

@media (max-width: 1380px) {
  body.workbench-open .app-shell {
    grid-template-columns: 286px minmax(0, 1fr);
  }

  .top-actions {
    grid-template-columns: minmax(180px, 1fr) 150px 52px 52px 72px;
  }

  .output-pill span,
  .icon-status::after {
    display: none;
  }

  .icon-status {
    width: 54px;
    padding: 0;
  }

  .icon-status::before {
    left: 22px;
  }

  .ops-dashboard {
    grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
    grid-template-areas:
      "overview running"
      "quick quick"
      "rename rename"
      "process side";
  }

  .overview-body {
    grid-template-columns: 152px minmax(0, 1fr);
  }

  .dashboard-donut {
    width: 142px;
    height: 142px;
  }

  .dashboard-donut strong {
    font-size: 30px;
  }

  .dashboard-donut span {
    margin-top: -42px;
    font-size: 12px;
  }
}

@media (max-width: 980px) {
  body.workbench-open {
    height: auto;
    overflow: auto;
  }

  body.workbench-open .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "sidebar"
      "main"
      "dock";
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.workbench-open .main {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .topbar,
  .top-actions {
    grid-template-columns: 1fr;
    height: auto;
  }

  .crumb {
    min-width: 0;
  }

  .ops-dashboard {
    grid-template-columns: 1fr;
    grid-template-areas:
      "overview"
      "running"
      "quick"
      "rename"
      "process"
      "side";
  }

  .overview-body,
  .quick-grid,
  .process-setting-grid,
  .process-actions,
  .status-dock {
    grid-template-columns: 1fr;
  }

  .status-dock {
    align-items: start;
    padding: 10px 14px;
  }
}

/* Smooth glass cleanup: remove rough displaced edges from large panels */
.glass-panel::after,
.glass-bar::after,
.panel::after,
.liquid-surface::after,
.toast::after,
.marketing-nav::after,
.landing-cta::after,
.feature-card::after,
.scenario-card::after,
.proof-card::after,
.trust-list li::after,
.workflow-steps li::after,
.status-dock::after,
.sidebar-storage::after,
.sidebar-version::after {
  inset: 0;
  border: 1px solid rgba(235, 247, 255, 0.16);
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.34), rgba(255,255,255,0.055) 28%, transparent 54%),
    linear-gradient(320deg, transparent 0 62%, rgba(106, 201, 255, 0.13) 78%, rgba(255,255,255,0.18) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    inset 0 -1px 0 rgba(117, 218, 255, 0.10);
  filter: none !important;
  opacity: 0.72;
}

.orbit-ring {
  filter: none !important;
  opacity: 0.42;
}

.glass-panel,
.glass-bar,
.panel,
.liquid-surface,
.status-dock,
.sidebar-storage,
.sidebar-version {
  outline: 1px solid rgba(255,255,255,0.055);
  outline-offset: -2px;
}

body.workbench-open .sidebar,
body.workbench-open .topbar,
.ops-card,
.status-dock {
  box-shadow:
    0 22px 70px rgba(0,0,0,0.34),
    0 0 0 1px rgba(96, 184, 255, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(96, 184, 255, 0.10);
}

.ops-card,
.side-nav button,
.quick-action,
.setting-control,
.dashboard-table,
.sidebar-storage,
.sidebar-version,
.sidebar-home {
  background-clip: padding-box;
}

/* Sidebar rail states */
body.workbench-open.sidebar-collapsed .app-shell {
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-areas:
    "sidebar main"
    "dock dock";
}

body.workbench-open.sidebar-collapsed .sidebar {
  align-items: stretch;
  padding: 10px 8px;
  overflow: hidden;
}

body.workbench-open.sidebar-collapsed .traffic {
  justify-content: center;
  width: 100%;
  height: 12px;
  margin: 0 0 10px;
  gap: 5px;
}

body.workbench-open.sidebar-collapsed .traffic span {
  width: 8px;
  height: 8px;
}

body.workbench-open.sidebar-collapsed .brand-card {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  width: 100%;
  min-height: 98px;
  margin: 0 0 12px;
  padding: 0;
  gap: 8px;
  cursor: pointer;
}

body.workbench-open.sidebar-collapsed .brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 14px;
  font-size: 18px;
}

body.workbench-open.sidebar-collapsed .brand-card > div:not(.sidebar-controls),
body.workbench-open.sidebar-collapsed .nav-label,
body.workbench-open.sidebar-collapsed .side-nav button span:not(.svg-icon),
body.workbench-open.sidebar-collapsed .sidebar-home span:not(.sidebar-home-icon):not(.sidebar-exit),
body.workbench-open.sidebar-collapsed .sidebar-home small {
  display: none;
}

body.workbench-open.sidebar-collapsed .sidebar-controls {
  display: grid;
  grid-column: auto;
  grid-row: auto;
  justify-items: center;
  width: 100%;
  margin: 0;
  gap: 0;
}

body.workbench-open.sidebar-collapsed [data-sidebar-hide] {
  display: none;
}

body.workbench-open.sidebar-collapsed [data-sidebar-toggle] {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border-color: rgba(111, 207, 255, 0.58);
  border-radius: 15px;
  color: #f7fcff;
  background:
    linear-gradient(145deg, rgba(128, 204, 255, 0.30), rgba(255,255,255,0.08)),
    rgba(14, 31, 48, 0.72);
  box-shadow:
    0 0 22px rgba(67, 184, 255, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.24);
}

body.workbench-open.sidebar-collapsed [data-sidebar-toggle] svg {
  transform: rotate(180deg);
}

body.workbench-open.sidebar-collapsed .side-nav {
  display: grid;
  width: 100%;
  gap: 8px;
}

body.workbench-open.sidebar-collapsed .side-nav button {
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  height: 48px;
  padding: 0;
  border-radius: 15px;
  gap: 0;
}

body.workbench-open.sidebar-collapsed .side-nav button:hover {
  transform: translateY(-1px);
}

body.workbench-open.sidebar-collapsed .side-nav button .svg-icon {
  width: 22px;
  height: 22px;
  margin: 0;
}

body.workbench-open.sidebar-collapsed .sidebar-storage,
body.workbench-open.sidebar-collapsed .sidebar-version,
body.workbench-open.sidebar-collapsed .sidebar-home {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 8px;
  border-radius: 16px;
}

body.workbench-open.sidebar-collapsed .sidebar-storage {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  margin-top: auto;
  gap: 0;
}

body.workbench-open.sidebar-collapsed .sidebar-section-head,
body.workbench-open.sidebar-collapsed .storage-total,
body.workbench-open.sidebar-collapsed .storage-legend,
body.workbench-open.sidebar-collapsed .sidebar-version div,
body.workbench-open.sidebar-collapsed .sidebar-version b {
  display: none;
}

body.workbench-open.sidebar-collapsed .storage-ring {
  width: 36px;
  height: 36px;
}

body.workbench-open.sidebar-collapsed .storage-ring span {
  width: 24px;
  height: 24px;
}

body.workbench-open.sidebar-collapsed .sidebar-home,
body.workbench-open.sidebar-collapsed .sidebar-version {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 0;
  margin-top: 10px;
}

body.workbench-open.sidebar-collapsed .sidebar-home-icon,
body.workbench-open.sidebar-collapsed .version-shield {
  grid-row: auto;
  width: 36px;
  height: 36px;
}

body.workbench-open.sidebar-hidden .app-shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "dock";
}

body.workbench-open.sidebar-hidden .sidebar {
  display: none;
}

body.workbench-open.sidebar-hidden .main {
  grid-area: main;
  padding-left: 62px;
}

body.workbench-open.sidebar-hidden .status-dock {
  grid-area: dock;
}

body.workbench-open.sidebar-hidden .sidebar-reveal {
  display: inline-flex;
}

@media (max-width: 980px) {
  body.workbench-open.sidebar-collapsed .app-shell,
  body.workbench-open.sidebar-hidden .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "dock";
  }

  body.workbench-open.sidebar-collapsed .sidebar {
    display: none;
  }

  body.workbench-open.sidebar-collapsed .sidebar-reveal,
  body.workbench-open.sidebar-hidden .sidebar-reveal {
    display: inline-flex;
  }

  body.workbench-open.sidebar-hidden .main {
    padding-left: 0;
    padding-top: 54px;
  }
}

/* Product homepage v2: mist background + dark liquid-glass workbench */
body:not(.workbench-open) {
  background: #edf4f8;
}

.product-home {
  --v2-ink: #172b3f;
  --v2-muted: #5f7284;
  --v2-soft: #edf4f8;
  --v2-soft-2: #f7fbfd;
  --v2-line: rgba(102, 130, 154, 0.18);
  --v2-dark: rgba(13, 32, 49, 0.86);
  --v2-dark-2: rgba(18, 43, 65, 0.72);
  --v2-cyan: #66aeca;
  --v2-sea: #8bcbbd;
  --v2-amber: #d9b46f;
  display: block;
  min-height: 100dvh;
  padding: 18px;
  color: var(--v2-ink);
  background:
    linear-gradient(120deg, rgba(248, 252, 255, 0.96) 0%, rgba(235, 243, 249, 0.95) 42%, rgba(218, 232, 241, 0.9) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(223,235,244,0.78));
  overflow-x: clip;
}

.product-home::before,
.product-home::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.product-home::before {
  background:
    linear-gradient(104deg, rgba(255,255,255,0.82), rgba(255,255,255,0) 34%),
    linear-gradient(73deg, rgba(126, 178, 204, 0.18), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, rgba(224, 194, 133, 0.12), rgba(255,255,255,0) 62%);
}

.product-home::after {
  opacity: 0.28;
  background-image:
    repeating-linear-gradient(0deg, rgba(42, 70, 91, 0.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.45) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

.product-home > :not(.home-v2) {
  display: none !important;
}

.home-v2 {
  position: relative;
  z-index: 1;
  max-width: 1420px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.home-v2 *,
.home-v2 *::before,
.home-v2 *::after {
  box-sizing: border-box;
}

.home-v2 a {
  color: inherit;
  text-decoration: none;
}

.v2-nav,
.v2-btn,
.v2-asset-card,
.v2-card-light,
.v2-proof-grid article,
.v2-flow li,
.v2-scenario-grid article,
.v2-data-grid article {
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
}

.v2-nav {
  position: sticky;
  top: 14px;
  z-index: 10;
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.78), rgba(236,246,252,0.48)),
    rgba(244, 249, 252, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(92, 127, 153, 0.12),
    0 22px 55px rgba(50, 83, 107, 0.16);
}

.v2-brand,
.v2-nav-links,
.v2-nav-actions,
.v2-actions,
.v2-metrics,
.v2-card-line,
.v2-job-meta,
.v2-window-bar,
.v2-window-bar nav,
.v2-kpis,
.v2-task-row,
.v2-diagram-flow,
.v2-flow-media,
.v2-flow-rules,
.v2-flow-folders,
.v2-format-cloud {
  display: flex;
  align-items: center;
}

.v2-brand {
  gap: 12px;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  color: #1b334b;
}

.v2-brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: #174362;
  background:
    linear-gradient(145deg, rgba(154, 214, 238, 0.92), rgba(234, 251, 253, 0.84));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 12px 26px rgba(72, 144, 178, 0.2);
}

.v2-nav-links {
  justify-content: center;
  gap: 6px;
  padding: 4px;
  border-radius: 13px;
  background: rgba(255,255,255,0.26);
}

.v2-nav-links a {
  min-height: 36px;
  padding: 9px 18px;
  border-radius: 10px;
  color: #294258;
  font-size: 14px;
  font-weight: 600;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.v2-nav-links a:hover,
.v2-nav-links a:focus-visible {
  color: #0d2234;
  background: rgba(255,255,255,0.62);
  transform: translateY(-1px);
}

.v2-nav-actions {
  justify-content: flex-end;
  gap: 10px;
}

.v2-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,0.44);
  border-radius: 12px;
  padding: 0 18px;
  color: #173047;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.v2-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v2-btn-dark {
  color: #f5fbff;
  border-color: rgba(218, 242, 255, 0.2);
  background:
    linear-gradient(145deg, rgba(34, 67, 95, 0.96), rgba(9, 26, 42, 0.92)),
    rgba(11, 31, 48, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 16px 30px rgba(19, 46, 68, 0.28);
}

.v2-btn-light {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.75), rgba(234,244,250,0.44)),
    rgba(255,255,255,0.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 14px 28px rgba(68, 101, 126, 0.12);
}

.v2-btn-ghost {
  color: #e9f7ff;
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.08);
}

.v2-btn-large {
  min-height: 56px;
  padding-inline: 24px;
  font-size: 16px;
}

.v2-btn:hover,
.v2-btn:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(134, 194, 221, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 20px 42px rgba(59, 100, 130, 0.2);
}

.v2-btn:active {
  transform: translateY(0) scale(0.98);
}

.v2-btn:focus-visible,
.v2-nav-links a:focus-visible {
  outline: 3px solid rgba(77, 145, 190, 0.34);
  outline-offset: 3px;
}

.v2-hero {
  display: grid;
  grid-template-columns: minmax(330px, 0.78fr) minmax(620px, 1.22fr);
  gap: 38px;
  align-items: center;
  min-height: 700px;
  padding: 70px 18px 42px;
}

.v2-hero-copy {
  max-width: 560px;
}

.v2-eyebrow {
  margin: 0 0 14px;
  color: #50738c;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.v2-hero h1,
.v2-section-head h2,
.v2-final-cta h2 {
  margin: 0;
  color: #162d43;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

.v2-hero h1 {
  font-size: 76px;
}

.v2-hero h1 span {
  display: block;
}

.v2-lede,
.v2-section-head p:not(.v2-eyebrow),
.v2-final-cta p:not(.v2-eyebrow) {
  color: var(--v2-muted);
  line-height: 1.82;
  text-wrap: pretty;
}

.v2-lede {
  max-width: 520px;
  margin: 24px 0 0;
  font-size: 18px;
}

.v2-actions {
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.v2-metrics {
  flex-wrap: wrap;
  gap: 12px;
  margin: 34px 0 0;
}

.v2-metrics div {
  min-width: 128px;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.66), rgba(235,245,250,0.34)),
    rgba(255,255,255,0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.86),
    0 14px 28px rgba(74, 106, 132, 0.1);
}

.v2-metrics dt {
  color: #1d4965;
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.v2-metrics dd {
  margin: 4px 0 0;
  color: #627486;
  font-size: 12px;
}

.v2-hero-stage {
  position: relative;
  min-height: 640px;
}

.v2-masonry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 48px;
  gap: 14px;
}

.v2-hero-masonry {
  position: absolute;
  inset: 0;
}

.v2-asset-card,
.v2-card-light,
.v2-proof-grid article,
.v2-flow li,
.v2-scenario-grid article,
.v2-data-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.64);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.62), rgba(229,241,248,0.34)),
    rgba(255,255,255,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 20px 46px rgba(65, 96, 120, 0.14);
}

.v2-asset-card {
  padding: 14px;
  color: #284154;
}

.v2-asset-card strong,
.v2-asset-card b,
.v2-feature-card h3,
.v2-proof-grid strong,
.v2-scenario-grid h3,
.v2-data-grid h3 {
  font-weight: 800;
}

.v2-asset-video { grid-column: 1 / 4; grid-row: 1 / 4; }
.v2-asset-audio { grid-column: 4 / 8; grid-row: 1 / 3; }
.v2-asset-rule { grid-column: 8 / 11; grid-row: 1 / 3; }
.v2-asset-photo { grid-column: 11 / 13; grid-row: 1 / 4; }
.v2-asset-job { grid-column: 10 / 13; grid-row: 4 / 8; }
.v2-asset-tags { grid-column: 10 / 12; grid-row: 8 / 10; }
.v2-asset-image { grid-column: 12 / 13; grid-row: 8 / 11; }

.v2-thumb {
  min-height: 112px;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0)),
    linear-gradient(135deg, #87b5c8, #d8e7ed 52%, #2a6c86);
}

.v2-thumb-wave {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #87c5cf 0%, #f4efe5 52%, #447086 100%);
}

.v2-thumb-portrait {
  min-height: 132px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.24), rgba(255,255,255,0)),
    linear-gradient(135deg, #d9c9a6 0%, #eaf4f4 48%, #6c967f 100%);
}

.v2-thumb-city {
  min-height: 98px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.24), rgba(255,255,255,0)),
    linear-gradient(135deg, #95b3ca 0%, #d9e4ee 42%, #33566e 100%);
}

.v2-card-line {
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
}

.v2-card-line span,
.v2-asset-tags span,
.v2-asset-rule span,
.v2-ratio-row span,
.v2-flow-media span,
.v2-flow-rules span,
.v2-format-cloud span {
  border-radius: 8px;
  padding: 6px 9px;
  color: #315066;
  background: rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

.v2-wave,
.v2-audio-matrix {
  display: flex;
  align-items: center;
  gap: 5px;
}

.v2-wave {
  height: 52px;
  margin: 12px 0;
}

.v2-wave i {
  display: block;
  width: 100%;
  min-width: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7abbd6, #548bb0);
}

.v2-wave i:nth-child(1) { height: 28%; }
.v2-wave i:nth-child(2) { height: 70%; }
.v2-wave i:nth-child(3) { height: 46%; }
.v2-wave i:nth-child(4) { height: 86%; }
.v2-wave i:nth-child(5) { height: 38%; }
.v2-wave i:nth-child(6) { height: 64%; }
.v2-wave i:nth-child(7) { height: 52%; }
.v2-wave i:nth-child(8) { height: 76%; }

.v2-asset-rule p {
  margin: 12px 0;
  padding: 10px;
  border-radius: 9px;
  color: #39566c;
  background: rgba(255,255,255,0.5);
  font-size: 12px;
}

.v2-asset-rule div,
.v2-asset-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v2-progress,
.v2-flow-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(20, 45, 66, 0.14);
}

.v2-progress i,
.v2-flow-progress i,
.v2-slider span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8dd6cf, #73add3);
}

.v2-progress .is-72,
.v2-flow-progress .is-72 {
  width: 72%;
}

.v2-job-meta {
  justify-content: space-between;
  margin-top: 14px;
  color: #617688;
  font-size: 12px;
}

.v2-workbench-card,
.v2-card-dark,
.v2-local-diagram,
.v2-final-cta,
.v2-cta-preview {
  color: #dcecf6;
  border: 1px solid rgba(216, 242, 255, 0.18);
  background:
    linear-gradient(145deg, rgba(48, 80, 105, 0.82), rgba(9, 28, 45, 0.9)),
    rgba(13, 32, 49, 0.84);
  backdrop-filter: blur(30px) saturate(165%);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(7, 19, 31, 0.42),
    0 28px 80px rgba(21, 52, 77, 0.28);
}

.v2-workbench-card {
  position: absolute;
  left: 15%;
  right: 18%;
  top: 152px;
  min-height: 420px;
  overflow: hidden;
  border-radius: 17px;
}

.v2-window-bar {
  min-height: 52px;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.04);
}

.v2-window-bar > span {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.v2-window-bar > span:nth-child(1) { background: #e77f65; }
.v2-window-bar > span:nth-child(2) { background: #e9bd66; }
.v2-window-bar > span:nth-child(3) { background: #79c591; }

.v2-window-bar nav {
  gap: 8px;
  margin-left: 12px;
}

.v2-window-bar nav b {
  padding: 7px 10px;
  border-radius: 8px;
  color: #d7ebf5;
  background: rgba(255,255,255,0.08);
  font-size: 12px;
}

.v2-window-bar em {
  margin-left: auto;
  color: #98e2bf;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.v2-workbench-body {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 368px;
}

.v2-workbench-body aside {
  padding: 18px 12px;
  border-right: 1px solid rgba(255,255,255,0.08);
  background: rgba(8, 24, 39, 0.36);
}

.v2-workbench-body aside b,
.v2-workbench-body aside span {
  display: block;
}

.v2-workbench-body aside b {
  margin-bottom: 12px;
  color: #91aabe;
  font-size: 12px;
}

.v2-workbench-body aside span {
  margin-top: 8px;
  padding: 10px;
  border-radius: 9px;
  color: #c6dbe8;
  font-size: 12px;
}

.v2-workbench-body aside .active {
  color: #f5fbff;
  background: rgba(109, 184, 217, 0.18);
}

.v2-dashboard {
  padding: 16px;
}

.v2-kpis {
  gap: 10px;
}

.v2-kpis div {
  flex: 1;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  background: rgba(255,255,255,0.055);
}

.v2-kpis span {
  display: block;
  color: #91aabe;
  font-size: 12px;
}

.v2-kpis strong {
  display: block;
  margin-top: 6px;
  color: #66d7e5;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.v2-kpis div:nth-child(3) strong { color: #e6bb6c; }
.v2-kpis div:nth-child(4) strong { color: #72dfea; }

.v2-table-panel {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 13px;
  background: rgba(255,255,255,0.05);
}

.v2-table-panel header {
  display: flex;
  justify-content: space-between;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}

.v2-table-panel header span,
.v2-task-row em {
  color: #b9def1;
  font-style: normal;
  font-size: 12px;
}

.v2-task-row {
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.v2-task-row b {
  flex: 1;
  min-width: 0;
  color: #f1f7fb;
  font-size: 12px;
}

.v2-task-row span {
  padding: 5px 9px;
  border-radius: 8px;
  color: #8ff0c2;
  background: rgba(105, 217, 165, 0.12);
  font-size: 12px;
}

.v2-hero-tags {
  position: absolute;
  right: 14px;
  bottom: 16px;
  display: flex;
  gap: 9px;
}

.v2-hero-tags span {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 10px;
  color: #416176;
  background: rgba(255,255,255,0.46);
  font-size: 12px;
  font-weight: 700;
}

.v2-section {
  position: relative;
  margin-top: 22px;
  padding: 22px;
  border-radius: 20px;
}

.v2-section-soft,
.v2-workflow,
.v2-scenarios,
.v2-data {
  border: 1px solid rgba(255,255,255,0.56);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.52), rgba(232,242,248,0.28)),
    rgba(245,250,252,0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 22px 62px rgba(78, 109, 132, 0.12);
}

.v2-section-head {
  max-width: 860px;
  margin-bottom: 22px;
}

.v2-section-head h2 {
  font-size: 32px;
}

.v2-section-head p:not(.v2-eyebrow) {
  max-width: 640px;
  margin: 12px 0 0;
  font-size: 16px;
}

.v2-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(210px, auto);
  gap: 14px;
}

.v2-feature-card {
  min-height: 230px;
  padding: 22px;
  border-radius: 16px;
  overflow: hidden;
}

.v2-feature-card:nth-child(1),
.v2-feature-card:nth-child(4) {
  grid-row: span 2;
}

.v2-feature-card h3,
.v2-local-diagram h3,
.v2-scenario-grid h3,
.v2-data-grid h3,
.v2-final-cta h2 {
  margin: 0;
}

.v2-feature-card p,
.v2-local-diagram p,
.v2-scenario-grid p,
.v2-data-grid p {
  margin: 8px 0 18px;
  color: inherit;
  opacity: 0.76;
  line-height: 1.62;
}

.v2-card-dark p {
  color: #b9cdd9;
}

.v2-mini-table,
.v2-export-list,
.v2-mini-log,
.v2-csv-table,
.v2-folder-tree {
  display: grid;
  gap: 9px;
}

.v2-mini-table span,
.v2-export-list span,
.v2-mini-log span,
.v2-folder-tree span,
.v2-csv-table span {
  display: block;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(255,255,255,0.08);
  color: #e5f3fa;
  font-size: 12px;
}

.v2-card-light .v2-mini-table span,
.v2-card-light .v2-export-list span {
  color: #345166;
  background: rgba(255,255,255,0.62);
}

.v2-before-after {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}

.v2-before-after i,
.v2-phone-row i,
.v2-product-row i,
.v2-frame-strip i,
.v2-thumb-grid i {
  display: block;
  min-height: 82px;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.2), rgba(255,255,255,0)),
    linear-gradient(135deg, #7db1c4, #e1e8df 52%, #355c75);
}

.v2-before-after b {
  width: 24px;
  height: 2px;
  border-radius: 99px;
  background: #88c8d5;
}

.v2-slider {
  height: 8px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,0.14);
}

.v2-slider span {
  width: 85%;
}

.v2-ratio-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.v2-ratio-row span {
  color: #e6f3f8;
  text-align: center;
  background: rgba(255,255,255,0.09);
}

.v2-audio-matrix {
  flex-direction: column;
  align-items: stretch;
}

.v2-audio-matrix span {
  height: 18px;
  border-radius: 99px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.12) 0 18%, transparent 18% 24%, rgba(124, 199, 220, 0.86) 24% 34%, transparent 34% 40%, rgba(124, 199, 220, 0.7) 40% 58%, transparent 58% 64%, rgba(124, 199, 220, 0.9) 64% 76%, transparent 76%),
    rgba(255,255,255,0.08);
}

.v2-layer-stack {
  position: relative;
  min-height: 126px;
}

.v2-layer-stack i {
  position: absolute;
  width: 72%;
  height: 72px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.64);
  background: rgba(255,255,255,0.42);
  box-shadow: 0 18px 32px rgba(69, 100, 123, 0.12);
}

.v2-layer-stack i:nth-child(1) { left: 0; top: 18px; }
.v2-layer-stack i:nth-child(2) { left: 12%; top: 36px; }
.v2-layer-stack i:nth-child(3) { left: 24%; top: 54px; }

.v2-wave-wide {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.48);
}

.v2-frame-strip,
.v2-thumb-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}

.v2-frame-strip i,
.v2-thumb-grid i {
  min-height: 58px;
}

.v2-trust-grid {
  display: grid;
  grid-template-columns: 1.04fr 1.16fr;
  gap: 18px;
}

.v2-local-diagram {
  min-height: 400px;
  padding: 26px;
  border-radius: 17px;
}

.v2-diagram-flow {
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0;
}

.v2-diagram-flow div {
  flex: 1;
  min-height: 142px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
}

.v2-diagram-flow div span {
  color: #acc3d2;
  font-size: 13px;
}

.v2-diagram-flow i {
  width: 30px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255,255,255,0.16), #87c8d6);
}

.v2-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.v2-proof-grid article {
  min-height: 194px;
  padding: 18px;
}

.v2-proof-grid span {
  display: block;
  margin-top: 8px;
  color: #617589;
  font-size: 13px;
  line-height: 1.56;
}

.v2-mini-bars,
.v2-toggles,
.v2-mini-checks,
.v2-template-stack {
  margin-top: 22px;
}

.v2-mini-bars i {
  display: inline-block;
  width: 18%;
  height: 54px;
  margin-right: 6px;
  border-radius: 9px 9px 4px 4px;
  background: linear-gradient(180deg, #72bdd3, #385f78);
}

.v2-mini-bars i:nth-child(2) { height: 72px; }
.v2-mini-bars i:nth-child(3) { height: 44px; }

.v2-shield,
.v2-download-box {
  width: 84px;
  height: 72px;
  margin-top: 20px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.78), rgba(196,220,230,0.36)),
    rgba(255,255,255,0.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
}

.v2-toggles i,
.v2-mini-checks i,
.v2-template-stack i {
  display: block;
  height: 22px;
  margin-top: 9px;
  border-radius: 8px;
  background: rgba(255,255,255,0.58);
}

.v2-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
}

.v2-flow li {
  min-height: 166px;
  padding: 18px;
}

.v2-flow li > b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #27617e;
  background: rgba(134, 196, 222, 0.22);
}

.v2-flow strong {
  display: block;
  margin: 12px 0;
}

.v2-flow-media,
.v2-flow-rules,
.v2-flow-folders {
  gap: 7px;
  flex-wrap: wrap;
}

.v2-flow-list i {
  display: block;
  height: 18px;
  margin-top: 7px;
  border-radius: 7px;
  background: rgba(94, 128, 152, 0.16);
}

.v2-flow-folders span {
  width: 34px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(180deg, #e8c278, #d49d54);
}

.v2-scenario-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr 1fr 1fr;
  gap: 14px;
}

.v2-scenario-grid article {
  min-height: 260px;
  padding: 22px;
}

.v2-scenario-grid article:nth-child(1),
.v2-scenario-grid article:nth-child(4) {
  background:
    linear-gradient(145deg, rgba(43, 76, 101, 0.82), rgba(11, 31, 49, 0.86)),
    rgba(14, 35, 53, 0.8);
  color: #e6f3f9;
}

.v2-phone-row,
.v2-product-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.v2-phone-row i {
  min-height: 132px;
  border-radius: 16px;
}

.v2-product-row i {
  min-height: 92px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.38), rgba(255,255,255,0)),
    linear-gradient(135deg, #d6d5cf, #f0e6d4 56%, #ae8968);
}

.v2-calendar-wave {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 12px;
  min-height: 120px;
}

.v2-calendar-wave i,
.v2-calendar-wave span {
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.42), rgba(255,255,255,0)),
    rgba(119, 170, 197, 0.24);
}

.v2-folder-tree span {
  color: inherit;
  background: rgba(255,255,255,0.08);
}

.v2-data-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.v2-data-grid article {
  min-height: 270px;
  padding: 22px;
}

.v2-data-grid article:nth-child(2),
.v2-data-grid article:nth-child(4) {
  background:
    linear-gradient(145deg, rgba(46, 78, 103, 0.82), rgba(12, 31, 49, 0.86)),
    rgba(13, 32, 49, 0.82);
  color: #e8f4f9;
}

.v2-format-cloud,
.v2-thumb-grid {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.v2-format-cloud span {
  color: inherit;
  background: rgba(255,255,255,0.12);
}

.v2-data-grid article:not(:nth-child(2)):not(:nth-child(4)) .v2-format-cloud span {
  color: #365468;
  background: rgba(255,255,255,0.6);
}

.v2-thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.v2-mini-log span,
.v2-csv-table span {
  color: inherit;
  background: rgba(255,255,255,0.1);
}

.v2-final-cta {
  position: relative;
  min-height: 300px;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(460px, 1.1fr);
  gap: 22px;
  align-items: center;
  margin: 24px 0 18px;
  padding: 40px;
  overflow: hidden;
  border-radius: 20px;
}

.v2-final-cta h2 {
  color: #f3fbff;
  font-size: 36px;
}

.v2-final-cta p:not(.v2-eyebrow) {
  max-width: 520px;
  color: #bdd2df;
  font-size: 16px;
}

.v2-final-cta .v2-eyebrow {
  color: #9bd0df;
}

.v2-cta-preview {
  min-height: 210px;
  overflow: hidden;
  border-radius: 16px;
}

.v2-cta-preview .v2-kpis {
  padding: 18px;
}

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

/* Hero visual layout correction: explicit masonry grid instead of loose overlay */
@media (min-width: 1181px) {
  .v2-hero-stage {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(10, 46px);
    gap: 14px;
    min-height: 586px;
    align-items: stretch;
  }

  .v2-hero-masonry {
    display: contents;
    position: static;
    inset: auto;
  }

  .v2-asset-video {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
  }

  .v2-asset-audio {
    grid-column: 4 / 8;
    grid-row: 1 / 3;
  }

  .v2-asset-rule {
    grid-column: 8 / 11;
    grid-row: 1 / 3;
  }

  .v2-asset-photo {
    grid-column: 11 / 13;
    grid-row: 1 / 4;
  }

  .v2-workbench-card {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    z-index: 3;
    grid-column: 2 / 10;
    grid-row: 3 / 11;
    min-height: 0;
    height: 100%;
  }

  .v2-asset-job {
    grid-column: 10 / 13;
    grid-row: 4 / 7;
  }

  .v2-asset-tags {
    grid-column: 10 / 11;
    grid-row: 7 / 9;
    align-content: start;
  }

  .v2-asset-image {
    grid-column: 11 / 13;
    grid-row: 7 / 10;
  }

  .v2-hero-tags {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 4;
    grid-column: 10 / 13;
    grid-row: 10 / 11;
    align-self: end;
    justify-self: end;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .v2-asset-card {
    min-width: 0;
  }

  .v2-asset-video .v2-thumb,
  .v2-asset-photo .v2-thumb,
  .v2-asset-image .v2-thumb {
    min-height: 0;
    height: 100%;
  }

  .v2-asset-video {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .v2-asset-photo,
  .v2-asset-image {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  .v2-asset-audio .v2-wave {
    height: 38px;
    margin: 8px 0 6px;
  }

  .v2-asset-rule p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 1180px) {
  .v2-nav {
    grid-template-columns: 1fr auto;
  }

  .v2-nav-links {
    display: none;
  }

  .v2-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .v2-hero-copy {
    max-width: 760px;
  }

  .v2-hero h1 {
    font-size: 60px;
  }

  .v2-hero-stage {
    min-height: 660px;
  }

  .v2-feature-grid,
  .v2-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2-trust-grid,
  .v2-final-cta {
    grid-template-columns: 1fr;
  }

  .v2-flow,
  .v2-scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .product-home {
    padding: 10px;
  }

  .v2-nav {
    position: relative;
    top: 0;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .v2-nav-actions {
    justify-content: stretch;
  }

  .v2-nav-actions .v2-btn {
    flex: 1;
  }

  .v2-hero {
    padding: 44px 8px 24px;
    gap: 26px;
  }

  .v2-hero h1 {
    font-size: 42px;
  }

  .v2-lede {
    font-size: 16px;
  }

  .v2-actions .v2-btn,
  .v2-btn-large {
    width: 100%;
  }

  .v2-metrics {
    display: grid;
    grid-template-columns: 1fr;
  }

  .v2-hero-stage {
    min-height: 0;
  }

  .v2-hero-masonry {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
  }

  .v2-asset-card {
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 12px;
  }

  .v2-thumb {
    min-height: 84px;
  }

  .v2-workbench-card {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin-top: 14px;
  }

  .v2-workbench-body {
    grid-template-columns: 1fr;
  }

  .v2-workbench-body aside {
    display: none;
  }

  .v2-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2-hero-tags {
    position: static;
    margin-top: 14px;
    flex-wrap: wrap;
  }

  .v2-section {
    padding: 16px;
    border-radius: 16px;
  }

  .v2-section-head h2,
  .v2-final-cta h2 {
    font-size: 28px;
  }

  .v2-feature-grid,
  .v2-proof-grid,
  .v2-flow,
  .v2-scenario-grid,
  .v2-data-grid {
    grid-template-columns: 1fr;
  }

  .v2-feature-card:nth-child(1),
  .v2-feature-card:nth-child(4) {
    grid-row: auto;
  }

  .v2-diagram-flow {
    display: grid;
  }

  .v2-diagram-flow i {
    width: 2px;
    height: 24px;
    justify-self: center;
  }

  .v2-final-cta {
    padding: 24px;
  }
}

@media (max-width: 460px) {
  .v2-brand {
    font-size: 15px;
  }

  .v2-nav-actions {
    flex-direction: column;
  }

  .v2-hero h1 {
    font-size: 36px;
  }

  .v2-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2-dashboard {
    padding: 12px;
  }

  .v2-table-panel .v2-task-row:nth-of-type(n+3) {
    display: none;
  }

  .v2-window-bar nav {
    display: none;
  }

  .v2-hero-masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2-asset-rule,
  .v2-asset-tags,
  .v2-asset-image {
    display: none;
  }
}

/* Final hero alignment: match approved image proportions */
@media (min-width: 1181px) {
  .home-v2 {
    max-width: 1420px;
  }

  .v2-hero {
    grid-template-columns: minmax(500px, 0.82fr) minmax(800px, 1.18fr);
    align-items: center;
    min-height: 656px;
    gap: 30px;
    padding: 56px 16px 30px;
  }

  .v2-hero-copy {
    max-width: 520px;
  }

  .v2-hero h1 {
    max-width: 9em;
    font-size: clamp(50px, 3.15vw, 56px);
    line-height: 1.13;
  }

  .v2-lede {
    max-width: 430px;
    font-size: 16px;
    line-height: 1.72;
  }

  .v2-actions {
    margin-top: 30px;
  }

  .v2-metrics {
    margin-top: 30px;
  }

  .v2-hero-stage {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(10, 44px);
    gap: 13px;
    min-height: 557px;
    align-items: stretch;
  }

  .v2-hero-masonry {
    display: contents !important;
    position: static !important;
    inset: auto !important;
  }

  .v2-asset-card {
    min-width: 0;
    padding: 12px;
  }

  .v2-asset-video {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-column: 1 / 4 !important;
    grid-row: 1 / 3 !important;
  }

  .v2-asset-audio {
    grid-column: 4 / 8 !important;
    grid-row: 1 / 3 !important;
  }

  .v2-asset-rule {
    grid-column: 8 / 11 !important;
    grid-row: 1 / 3 !important;
  }

  .v2-asset-photo {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 7px;
    grid-column: 11 / 13 !important;
    grid-row: 1 / 4 !important;
  }

  .v2-workbench-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: 3;
    grid-column: 1 / 10;
    grid-row: 3 / 11;
    width: auto;
    min-height: 0;
    height: 100%;
  }

  .v2-asset-job {
    grid-column: 10 / 13 !important;
    grid-row: 4 / 7 !important;
  }

  .v2-asset-tags {
    grid-column: 10 / 11 !important;
    grid-row: 7 / 9 !important;
    align-content: start;
  }

  .v2-asset-image {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 7px;
    grid-column: 11 / 13 !important;
    grid-row: 7 / 10 !important;
  }

  .v2-hero-tags {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 4;
    grid-column: 10 / 13;
    grid-row: 10 / 11;
    align-self: end;
    justify-self: end;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .v2-asset-video .v2-thumb,
  .v2-asset-photo .v2-thumb,
  .v2-asset-image .v2-thumb {
    min-height: 0;
    height: 100%;
  }

  .v2-asset-audio .v2-wave {
    height: 36px;
    margin: 7px 0 5px;
  }

  .v2-asset-audio strong,
  .v2-asset-rule strong,
  .v2-asset-job strong,
  .v2-asset-image strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }

  .v2-asset-rule p {
    overflow: hidden;
    margin: 7px 0;
    padding: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v2-asset-rule div,
  .v2-asset-tags {
    gap: 6px;
  }

  .v2-asset-rule span,
  .v2-asset-tags span {
    padding: 5px 7px;
    font-size: 11px;
  }

  .v2-workbench-body {
    grid-template-columns: 132px minmax(0, 1fr);
    min-height: calc(100% - 50px);
  }

  .v2-window-bar {
    min-height: 50px;
  }

  .v2-table-panel header {
    padding: 12px 14px;
  }

  .v2-task-row {
    padding: 11px 14px;
  }
}

/* Product homepage v2 polish pass: closer to approved visual direction */
.product-home {
  padding: 18px 20px 24px;
  background:
    linear-gradient(118deg, rgba(250, 253, 255, 0.98) 0%, rgba(239, 247, 252, 0.96) 41%, rgba(224, 236, 244, 0.92) 100%),
    linear-gradient(180deg, #f8fcff 0%, #e8f1f7 100%);
}

.product-home::before {
  background:
    linear-gradient(112deg, rgba(255,255,255,0.92) 0 18%, rgba(255,255,255,0) 42%),
    linear-gradient(74deg, rgba(119, 166, 191, 0.16) 0 14%, rgba(255,255,255,0) 46%),
    linear-gradient(102deg, transparent 28%, rgba(255,255,255,0.58) 30% 33%, transparent 38%),
    linear-gradient(109deg, transparent 54%, rgba(255,255,255,0.48) 56% 58%, transparent 65%);
}

.product-home::after {
  opacity: 0.2;
  background-image:
    repeating-linear-gradient(0deg, rgba(50, 82, 105, 0.028) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.36) 0 1px, transparent 1px 8px);
}

.home-v2 {
  max-width: 1368px;
}

.v2-nav {
  top: 12px;
  min-height: 60px;
  padding: 9px 12px;
  border-radius: 14px;
  border-color: rgba(255,255,255,0.82);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.82), rgba(235,245,251,0.54)),
    rgba(245, 250, 253, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -1px 0 rgba(89, 120, 145, 0.10),
    0 18px 46px rgba(48, 79, 104, 0.14);
}

.v2-nav::before,
.v2-workbench-card::before,
.v2-card-dark::before,
.v2-local-diagram::before,
.v2-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 32%),
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 42%);
  mix-blend-mode: screen;
}

.v2-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.v2-nav-links a {
  min-height: 34px;
  padding-inline: 17px;
}

.v2-btn {
  min-height: 42px;
  border-radius: 11px;
}

.v2-btn-large {
  min-height: 54px;
}

.v2-hero {
  grid-template-columns: minmax(340px, 0.72fr) minmax(660px, 1.28fr);
  min-height: 682px;
  padding: 68px 18px 36px;
  gap: 34px;
}

.v2-hero h1 {
  font-size: clamp(58px, 5.1vw, 76px);
  color: #183048;
}

.v2-lede {
  max-width: 500px;
  margin-top: 22px;
  color: #506a7f;
  font-size: 17px;
  line-height: 1.76;
}

.v2-metrics div {
  min-width: 118px;
  padding: 14px 16px;
  border-radius: 13px;
}

.v2-hero-stage {
  min-height: 620px;
}

.v2-asset-card {
  border-color: rgba(255,255,255,0.72);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.66), rgba(226,239,247,0.40)),
    rgba(255,255,255,0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(83, 116, 140, 0.08),
    0 18px 42px rgba(55, 86, 111, 0.13);
}

.v2-asset-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.32), rgba(255,255,255,0) 38%),
    radial-gradient(circle at 78% 12%, rgba(255,255,255,0.34), rgba(255,255,255,0) 36%);
}

.v2-asset-video { grid-column: 1 / 4; grid-row: 1 / 4; }
.v2-asset-audio { grid-column: 4 / 8; grid-row: 1 / 3; }
.v2-asset-rule { grid-column: 8 / 11; grid-row: 1 / 3; }
.v2-asset-photo { grid-column: 11 / 13; grid-row: 1 / 4; }
.v2-asset-job { grid-column: 10 / 13; grid-row: 4 / 8; }
.v2-asset-tags { grid-column: 10 / 12; grid-row: 8 / 10; }
.v2-asset-image { grid-column: 12 / 13; grid-row: 8 / 11; }

.v2-thumb {
  position: relative;
  overflow: hidden;
  min-height: 108px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
}

.v2-thumb::before,
.v2-thumb::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.v2-thumb::before {
  inset: 0;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.36), rgba(255,255,255,0) 36%),
    linear-gradient(0deg, rgba(17, 45, 68, 0.22), rgba(17,45,68,0) 55%);
}

.v2-thumb-wave::after {
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 22px;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 28% 100%, rgba(255,255,255,0.95) 0 9px, transparent 10px),
    linear-gradient(135deg, transparent 0 34%, rgba(255,255,255,0.8) 34% 38%, transparent 39%),
    rgba(255,255,255,0.22);
}

.v2-thumb-portrait::after {
  width: 56px;
  height: 56px;
  right: 18px;
  bottom: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #f9efe1 0 15px, transparent 16px),
    radial-gradient(circle at 50% 80%, rgba(75, 105, 82, 0.8) 0 28px, transparent 29px);
}

.v2-thumb-city::after {
  inset: 24px 18px 12px;
  background:
    linear-gradient(90deg, rgba(39, 69, 91, 0.7) 0 8px, transparent 8px 14px, rgba(39,69,91,0.55) 14px 26px, transparent 26px 34px, rgba(39,69,91,0.78) 34px 48px, transparent 48px);
}

.v2-workbench-card {
  left: 13%;
  right: 19%;
  top: 148px;
  min-height: 410px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(45, 78, 103, 0.88), rgba(7, 24, 39, 0.93)),
    rgba(13, 32, 49, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(7, 19, 31, 0.5),
    0 30px 78px rgba(18, 47, 70, 0.32);
}

.v2-workbench-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0 66%, rgba(255,255,255,0.035) 66% 100%),
    radial-gradient(circle at 18% 0%, rgba(145, 205, 231, 0.12), rgba(145,205,231,0) 34%);
}

.v2-window-bar {
  min-height: 50px;
  padding: 11px 15px;
}

.v2-workbench-body {
  grid-template-columns: 136px minmax(0, 1fr);
}

.v2-workbench-body aside {
  padding: 16px 10px;
}

.v2-dashboard {
  padding: 14px;
}

.v2-kpis {
  gap: 9px;
}

.v2-kpis div {
  padding: 13px 14px;
}

.v2-table-panel {
  margin-top: 12px;
}

.v2-task-row {
  padding: 12px 14px;
}

.v2-section {
  margin-top: 18px;
  padding: 21px;
  border-radius: 18px;
}

.v2-section-soft,
.v2-workflow,
.v2-scenarios,
.v2-data {
  border-color: rgba(255,255,255,0.68);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.60), rgba(228,239,247,0.32)),
    rgba(246,250,253,0.38);
}

.v2-section-head {
  margin-bottom: 18px;
}

.v2-section-head h2 {
  font-size: 28px;
  color: #1e3850;
}

.v2-feature-grid {
  grid-auto-rows: minmax(188px, auto);
  gap: 12px;
}

.v2-feature-card {
  min-height: 214px;
  padding: 20px;
  border-radius: 14px;
}

.v2-feature-grid .v2-feature-card {
  color: #e7f3fa;
  border: 1px solid rgba(216, 242, 255, 0.18);
  background:
    linear-gradient(145deg, rgba(45, 78, 102, 0.88), rgba(10, 30, 48, 0.92)),
    rgba(13, 32, 49, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(5, 17, 29, 0.42),
    0 20px 44px rgba(29, 59, 84, 0.20);
}

.v2-feature-grid .v2-feature-card::before {
  width: 30px;
  height: 30px;
  inset: 16px auto auto 16px;
  border: 1px solid rgba(213, 241, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.04)),
    rgba(125, 191, 218, 0.12);
}

.v2-feature-card h3 {
  padding-left: 42px;
  font-size: 18px;
}

.v2-feature-card p {
  min-height: 46px;
  margin: 8px 0 14px;
  color: #b9cdd9;
  font-size: 13px;
  line-height: 1.52;
}

.v2-mini-table span,
.v2-export-list span {
  min-height: 33px;
  padding: 8px 10px;
  color: #dcecf5;
  background: rgba(255,255,255,0.07);
}

.v2-before-after i {
  min-height: 78px;
}

.v2-ratio-row span {
  padding-block: 12px;
}

.v2-layer-stack {
  min-height: 108px;
}

.v2-layer-stack i {
  height: 60px;
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 14px 30px rgba(0,0,0,0.16);
}

.v2-wave-wide {
  background: rgba(255,255,255,0.07);
}

.v2-frame-strip i {
  min-height: 54px;
}

.v2-trust {
  padding-top: 18px;
}

.v2-trust-grid {
  grid-template-columns: 1.05fr 1.15fr;
  gap: 16px;
}

.v2-local-diagram {
  min-height: 382px;
  padding: 24px;
  border-radius: 16px;
}

.v2-diagram-flow {
  margin: 24px 0 22px;
}

.v2-diagram-flow div {
  min-height: 128px;
  padding: 16px;
}

.v2-proof-grid {
  gap: 11px;
}

.v2-proof-grid article {
  min-height: 184px;
  padding: 17px;
}

.v2-proof-grid article::after,
.v2-flow li::before,
.v2-scenario-grid article::after,
.v2-data-grid article::after {
  content: "";
  position: absolute;
  inset: auto 14px 12px 14px;
  height: 44px;
  border-radius: 12px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(111, 167, 191, 0.18), rgba(255,255,255,0.3)),
    rgba(255,255,255,0.18);
}

.v2-flow {
  gap: 12px;
}

.v2-flow li {
  min-height: 150px;
  padding: 17px;
}

.v2-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  z-index: 2;
  width: 22px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(77, 116, 143, 0.26), rgba(77,116,143,0.62));
}

.v2-flow li > b {
  width: 26px;
  height: 26px;
}

.v2-flow strong {
  margin: 10px 0 12px;
}

.v2-scenario-grid {
  gap: 12px;
}

.v2-scenario-grid article {
  min-height: 246px;
  padding: 21px;
}

.v2-scenario-grid article:nth-child(1),
.v2-scenario-grid article:nth-child(4) {
  background:
    linear-gradient(145deg, rgba(45, 78, 103, 0.88), rgba(10, 30, 48, 0.92)),
    rgba(13, 32, 49, 0.86);
}

.v2-phone-row i {
  min-height: 118px;
}

.v2-product-row i {
  min-height: 86px;
}

.v2-data-grid {
  gap: 12px;
}

.v2-data-grid article {
  min-height: 246px;
  padding: 21px;
}

.v2-data-grid article:nth-child(1),
.v2-data-grid article:nth-child(2),
.v2-data-grid article:nth-child(3),
.v2-data-grid article:nth-child(4) {
  background:
    linear-gradient(145deg, rgba(45, 78, 103, 0.88), rgba(10, 30, 48, 0.92)),
    rgba(13, 32, 49, 0.86);
  color: #e8f4f9;
}

.v2-data-grid p {
  color: #bfd2dd;
}

.v2-format-cloud span,
.v2-data-grid article:not(:nth-child(2)):not(:nth-child(4)) .v2-format-cloud span {
  color: #e7f3fa;
  background: rgba(255,255,255,0.08);
}

.v2-thumb-grid i {
  min-height: 50px;
}

.v2-final-cta {
  min-height: 280px;
  margin-top: 20px;
  padding: 38px;
  border-radius: 18px;
}

.v2-final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0 46%, rgba(255,255,255,0.05) 46% 100%),
    radial-gradient(circle at 82% 18%, rgba(129, 194, 217, 0.17), transparent 34%);
}

.v2-cta-preview {
  transform: translateY(24px);
}

@media (max-width: 1180px) {
  .v2-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .v2-hero h1 {
    font-size: 58px;
  }

  .v2-flow li:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .product-home {
    padding: 10px;
  }

  .v2-nav {
    border-radius: 14px;
  }

  .v2-hero {
    padding-top: 38px;
  }

  .v2-hero h1 {
    font-size: 42px;
  }

  .v2-feature-card h3 {
    padding-left: 40px;
  }

  .v2-feature-card p {
    min-height: 0;
  }

  .v2-proof-grid article::after,
  .v2-flow li::before,
  .v2-scenario-grid article::after,
  .v2-data-grid article::after {
    display: none;
  }
}

/* Absolute final desktop hero override */
@media (min-width: 1181px) {
  .home-v2 {
    max-width: 1420px;
  }

  .v2-hero {
    grid-template-columns: minmax(500px, 0.82fr) minmax(800px, 1.18fr) !important;
    align-items: center;
    min-height: 656px;
    gap: 30px;
    padding: 56px 16px 30px;
  }

  .v2-hero-copy {
    max-width: 520px;
  }

  .v2-hero h1 {
    max-width: 9em;
    font-size: clamp(50px, 3.15vw, 56px) !important;
    line-height: 1.13;
  }

  .v2-lede {
    max-width: 430px;
    font-size: 16px;
    line-height: 1.72;
  }

  .v2-hero-stage {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(10, 44px);
    gap: 13px;
    min-height: 557px;
    align-items: stretch;
  }

  .v2-hero-masonry {
    display: contents !important;
    position: static !important;
    inset: auto !important;
  }

  .v2-asset-video {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-column: 1 / 4 !important;
    grid-row: 1 / 3 !important;
  }

  .v2-asset-audio {
    grid-column: 4 / 8 !important;
    grid-row: 1 / 3 !important;
  }

  .v2-asset-rule {
    grid-column: 8 / 11 !important;
    grid-row: 1 / 3 !important;
  }

  .v2-asset-photo {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 7px;
    grid-column: 11 / 13 !important;
    grid-row: 1 / 4 !important;
  }

  .v2-workbench-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: 3;
    grid-column: 1 / 10;
    grid-row: 3 / 11;
    width: auto;
    min-height: 0;
    height: 100%;
  }

  .v2-asset-job {
    grid-column: 10 / 13 !important;
    grid-row: 4 / 7 !important;
  }

  .v2-asset-tags {
    grid-column: 10 / 11 !important;
    grid-row: 7 / 9 !important;
    align-content: start;
  }

  .v2-asset-image {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 7px;
    grid-column: 11 / 13 !important;
    grid-row: 7 / 10 !important;
  }

  .v2-hero-tags {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 4;
    grid-column: 10 / 13;
    grid-row: 10 / 11;
    align-self: end;
    justify-self: end;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .v2-asset-video .v2-thumb,
  .v2-asset-photo .v2-thumb,
  .v2-asset-image .v2-thumb {
    min-height: 0;
    height: 100%;
  }

  .v2-asset-audio .v2-wave {
    height: 36px;
    margin: 7px 0 5px;
  }

  .v2-asset-rule p {
    overflow: hidden;
    margin: 7px 0;
    padding: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v2-workbench-body {
    grid-template-columns: 132px minmax(0, 1fr);
    min-height: calc(100% - 50px);
  }
}

/* Product homepage v2 fidelity pass: wider mist canvas and richer material wall */
.product-home {
  background:
    linear-gradient(118deg, rgba(253, 254, 255, 0.98) 0%, rgba(244, 249, 252, 0.97) 34%, rgba(230, 240, 247, 0.92) 100%),
    radial-gradient(ellipse at 18% 20%, rgba(255, 255, 255, 0.78), transparent 42%),
    linear-gradient(180deg, #f8fcff 0%, #edf5fa 100%);
}

.product-home::before {
  background:
    linear-gradient(112deg, rgba(255,255,255,0.94) 0 17%, rgba(255,255,255,0) 42%),
    linear-gradient(72deg, rgba(112, 157, 184, 0.12) 0 16%, rgba(255,255,255,0) 47%),
    linear-gradient(101deg, transparent 31%, rgba(255,255,255,0.50) 32% 34%, transparent 40%),
    linear-gradient(110deg, transparent 58%, rgba(255,255,255,0.48) 59% 61%, transparent 70%);
}

.v2-nav,
.v2-asset-card,
.v2-metrics div,
.v2-section-soft,
.v2-workflow,
.v2-scenarios,
.v2-data {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(86, 118, 145, 0.08),
    0 18px 46px rgba(58, 86, 112, 0.10);
}

.v2-asset-card {
  padding: 12px;
  border-color: rgba(255, 255, 255, 0.78);
  border-radius: 13px;
  background:
    linear-gradient(146deg, rgba(255,255,255,0.74), rgba(230,241,248,0.43)),
    rgba(255,255,255,0.36);
}

.v2-asset-card::before {
  background:
    linear-gradient(118deg, rgba(255,255,255,0.42), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 46%);
}

.v2-asset-card strong {
  color: #29465d;
  font-size: 12px;
}

.v2-asset-card > span,
.v2-card-line,
.v2-job-meta {
  color: #5b7488;
}

.v2-thumb {
  border: 1px solid rgba(255,255,255,0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 10px 20px rgba(45, 80, 108, 0.12);
}

.v2-thumb-wave {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 35%),
    radial-gradient(ellipse at 23% 77%, rgba(252,255,255,0.94) 0 7%, rgba(252,255,255,0.55) 8% 13%, transparent 14%),
    radial-gradient(ellipse at 33% 70%, rgba(214,243,247,0.9) 0 18%, transparent 19%),
    linear-gradient(135deg, #76b7c7 0%, #dce9e8 51%, #2f6177 100%);
}

.v2-thumb-wave::before {
  background:
    linear-gradient(150deg, rgba(255,255,255,0.42), rgba(255,255,255,0) 38%),
    linear-gradient(13deg, transparent 0 48%, rgba(20,59,80,0.34) 49% 51%, transparent 52%),
    linear-gradient(0deg, rgba(20, 53, 73, 0.25), rgba(20,53,73,0) 58%);
}

.v2-thumb-wave::after {
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 20px;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 24% 100%, rgba(255,255,255,0.95) 0 9px, transparent 10px),
    linear-gradient(132deg, transparent 0 35%, rgba(255,255,255,0.86) 36% 39%, transparent 40%),
    rgba(255,255,255,0.22);
}

.v2-thumb-portrait {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 36%),
    radial-gradient(circle at 26% 27%, rgba(241,219,149,0.92) 0 4px, transparent 5px),
    radial-gradient(circle at 67% 24%, rgba(255,244,190,0.82) 0 5px, transparent 6px),
    radial-gradient(circle at 35% 70%, rgba(237,196,128,0.45) 0 30%, transparent 31%),
    linear-gradient(135deg, #d1c399 0%, #eff6f5 48%, #6d987f 100%);
}

.v2-thumb-portrait::after {
  width: 58px;
  height: 72px;
  right: 18px;
  bottom: 8px;
  border-radius: 24px 24px 18px 18px;
  background:
    radial-gradient(circle at 50% 25%, #f4e8d7 0 15px, transparent 16px),
    radial-gradient(ellipse at 50% 16%, rgba(47, 72, 76, 0.84) 0 24px, transparent 25px),
    linear-gradient(180deg, transparent 0 32px, rgba(73, 108, 84, 0.86) 33px);
}

.v2-thumb-city {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, #d5e4ed 0 40%, #8fb2ca 41% 100%);
}

.v2-thumb-city::after {
  inset: 23px 15px 12px;
  background:
    linear-gradient(90deg,
      rgba(38,63,82,0.82) 0 9px,
      transparent 9px 15px,
      rgba(48,77,96,0.72) 15px 28px,
      transparent 28px 36px,
      rgba(33,62,84,0.86) 36px 52px,
      transparent 52px 62px,
      rgba(52,79,99,0.72) 62px 76px,
      transparent 76px);
}

.v2-workbench-card {
  border-color: rgba(214, 239, 255, 0.22);
  background:
    linear-gradient(145deg, rgba(42, 74, 99, 0.92), rgba(8, 25, 40, 0.95)),
    rgba(12, 31, 49, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(4, 15, 25, 0.58),
    0 32px 74px rgba(28, 58, 82, 0.28);
}

.v2-window-bar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
    rgba(255,255,255,0.03);
}

.v2-workbench-body aside {
  background:
    linear-gradient(180deg, rgba(12, 35, 55, 0.72), rgba(8, 25, 40, 0.48));
}

.v2-kpis div,
.v2-table-panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)),
    rgba(255,255,255,0.035);
}

.v2-task-row b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1181px) {
  .home-v2 {
    max-width: 1800px;
  }

  .v2-nav {
    min-height: 58px;
  }

  .v2-hero {
    grid-template-columns: minmax(460px, 520px) minmax(760px, 1fr) !important;
    min-height: 640px;
    gap: 44px;
    padding: 34px 16px 28px;
  }

  .v2-hero-copy {
    max-width: 520px;
  }

  .v2-hero h1 {
    max-width: 9em;
    font-size: 58px !important;
    line-height: 1.12;
  }

  .v2-lede {
    max-width: 440px;
    margin-top: 20px;
  }

  .v2-actions {
    margin-top: 30px;
  }

  .v2-metrics {
    margin-top: 30px;
  }

  .v2-hero-stage {
    grid-template-rows: repeat(10, 45px);
    gap: 14px;
    min-height: 576px;
    align-self: start;
  }

  .v2-asset-video {
    grid-column: 1 / 4 !important;
    grid-row: 1 / 3 !important;
  }

  .v2-asset-audio {
    grid-column: 4 / 8 !important;
    grid-row: 1 / 3 !important;
  }

  .v2-asset-rule {
    grid-column: 8 / 11 !important;
    grid-row: 1 / 3 !important;
  }

  .v2-asset-photo {
    grid-column: 11 / 13 !important;
    grid-row: 1 / 4 !important;
  }

  .v2-workbench-card {
    grid-column: 1 / 9;
    grid-row: 3 / 11;
    border-radius: 16px;
  }

  .v2-asset-job {
    grid-column: 9 / 13 !important;
    grid-row: 4 / 7 !important;
  }

  .v2-asset-tags {
    grid-column: 9 / 10 !important;
    grid-row: 7 / 9 !important;
  }

  .v2-asset-image {
    grid-column: 10 / 13 !important;
    grid-row: 7 / 10 !important;
  }

  .v2-hero-tags {
    grid-column: 9 / 13;
    grid-row: 10 / 11;
    width: 100%;
    justify-content: flex-start;
  }

  .v2-hero-tags span {
    padding: 7px 10px;
  }

  .v2-window-bar nav b {
    padding: 7px 11px;
  }

  .v2-workbench-body {
    grid-template-columns: 136px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .v2-workbench-card {
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .v2-window-bar,
  .v2-workbench-body {
    max-width: 100%;
  }
}

/* Product homepage v2 content pass: make each card feel like a usable tool */
.v2-feature-card {
  display: flex;
  flex-direction: column;
}

.v2-feature-card h3 {
  position: relative;
}

.v2-feature-card h3::before {
  content: "";
  position: absolute;
  left: -31px;
  top: 3px;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(225, 245, 255, 0.82);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 3px rgba(113, 199, 219, 0.10),
    0 0 0 1px rgba(255,255,255,0.06);
}

.v2-mini-table,
.v2-export-list {
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)),
    rgba(8, 25, 40, 0.22);
}

.v2-mini-table span,
.v2-export-list span {
  position: relative;
  padding-right: 30px;
}

.v2-mini-table span::after,
.v2-export-list span::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 10px;
  height: 6px;
  border-left: 2px solid rgba(135, 230, 188, 0.9);
  border-bottom: 2px solid rgba(135, 230, 188, 0.9);
  transform: translateY(-62%) rotate(-45deg);
}

.v2-rule-console,
.v2-bgm-panel,
.v2-mask-controls,
.v2-audio-formats,
.v2-frame-toolbar,
.v2-export-table,
.v2-compare-labels {
  display: grid;
  gap: 8px;
}

.v2-rule-console {
  min-height: 128px;
  margin-top: auto;
  padding: 12px;
  border: 1px solid rgba(214, 242, 255, 0.12);
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)),
    rgba(4, 18, 30, 0.24);
}

.v2-rule-console div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.v2-rule-console span,
.v2-bgm-panel span,
.v2-mask-controls span,
.v2-audio-formats span,
.v2-frame-toolbar span,
.v2-export-table span,
.v2-compare-labels span {
  min-width: 0;
  border: 1px solid rgba(218, 242, 255, 0.10);
  border-radius: 9px;
  padding: 7px 9px;
  color: #dcecf5;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035));
  font-size: 12px;
}

.v2-rule-console b {
  min-height: 42px;
  display: flex;
  align-items: center;
  border-radius: 11px;
  padding: 0 12px;
  color: #8ff0c2;
  background:
    linear-gradient(90deg, rgba(105, 217, 165, 0.16), rgba(105, 217, 165, 0.05));
  font-size: 12px;
}

.v2-before-after i {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.20), rgba(255,255,255,0.02)),
    radial-gradient(circle at 28% 34%, rgba(239, 223, 162, 0.74), transparent 18%),
    linear-gradient(135deg, #729eb4 0%, #dbe7e8 49%, #274f68 100%);
}

.v2-before-after i:nth-of-type(2) {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.20), rgba(255,255,255,0.02)),
    radial-gradient(circle at 66% 30%, rgba(185, 217, 208, 0.72), transparent 18%),
    linear-gradient(135deg, #355e76 0%, #e0e6dd 52%, #7ca4ba 100%);
}

.v2-before-after i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(18, 42, 60, 0.62), rgba(18,42,60,0.24));
  transform: translate(-50%, -50%);
}

.v2-before-after i::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(50% - 3px);
  top: calc(50% - 7px);
  border-left: 12px solid rgba(255,255,255,0.88);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.v2-compare-labels {
  grid-template-columns: 1fr 1fr;
  margin-top: 8px;
}

.v2-compare-labels span {
  text-align: center;
}

.v2-version-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.v2-version-preview i {
  display: block;
  min-height: 74px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02)),
    linear-gradient(135deg, #5c89a1 0%, #dde7e4 48%, #2c5269 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.v2-version-preview i:nth-child(2) {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02)),
    linear-gradient(135deg, #2d526b 0%, #dfe6de 52%, #799cad 100%);
}

.v2-ratio-row {
  margin-top: auto;
}

.v2-bgm-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: auto;
  padding: 10px;
  border: 1px solid rgba(214, 242, 255, 0.11);
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.026)),
    rgba(4, 18, 30, 0.18);
}

.v2-bgm-panel span {
  position: relative;
  min-height: 36px;
  padding-left: 38px;
}

.v2-bgm-panel span::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, #86d5d4, #426d8d);
}

.v2-bgm-panel span::after {
  content: "";
  position: absolute;
  left: 68px;
  right: 9px;
  top: 17px;
  height: 5px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(125, 210, 224, 0.9) 0 42%, transparent 42% 52%, rgba(125,210,224,0.64) 52% 100%);
}

.v2-mask-controls,
.v2-audio-formats,
.v2-frame-toolbar,
.v2-export-table {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
}

.v2-layer-stack {
  margin-bottom: 12px;
}

.v2-audio-formats span,
.v2-frame-toolbar span,
.v2-export-table span,
.v2-mask-controls span {
  text-align: center;
}

.v2-frame-toolbar,
.v2-export-table {
  margin-top: 12px;
}

.v2-export-table {
  padding: 8px;
  border: 1px solid rgba(214, 242, 255, 0.11);
  border-radius: 13px;
  background: rgba(4, 18, 30, 0.16);
}

.v2-export-table span:nth-child(3) {
  color: #8ff0c2;
}

.v2-feature-grid {
  grid-auto-rows: minmax(330px, auto) !important;
  align-items: stretch;
}

.v2-feature-card:nth-child(1),
.v2-feature-card:nth-child(4) {
  grid-row: auto !important;
}

.v2-feature-card {
  min-height: 330px !important;
  padding: 18px !important;
}

.v2-feature-card p {
  min-height: auto !important;
  margin-bottom: 12px !important;
}

.v2-mini-table,
.v2-export-list {
  gap: 7px;
  padding: 8px;
}

.v2-mini-table span,
.v2-export-list span {
  min-height: 30px;
  padding: 7px 28px 7px 9px;
  font-size: 11px;
}

.v2-rule-console {
  min-height: 0;
  margin-top: 10px;
  padding: 9px;
}

.v2-rule-console div {
  gap: 6px;
}

.v2-rule-console span,
.v2-bgm-panel span,
.v2-mask-controls span,
.v2-audio-formats span,
.v2-frame-toolbar span,
.v2-export-table span,
.v2-compare-labels span {
  padding: 6px 8px;
  font-size: 11px;
}

.v2-rule-console b {
  min-height: 34px;
  padding-inline: 10px;
  font-size: 11px;
}

.v2-bgm-panel {
  margin-top: 12px;
  padding: 8px;
}

.v2-audio-matrix span {
  height: 17px;
}

.v2-layer-stack {
  min-height: 92px !important;
}

.v2-layer-stack i {
  height: 52px !important;
}

.v2-wave-wide {
  margin-bottom: 10px;
}

.v2-frame-strip i {
  min-height: 48px !important;
}

.v2-flow-media span,
.v2-flow-rules span {
  min-height: 46px;
  display: grid;
  place-items: end center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    linear-gradient(135deg, rgba(116, 172, 193, 0.75), rgba(238, 245, 244, 0.52));
  color: #173047;
  font-weight: 800;
}

.v2-flow-list i {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(130,210,202,0.72) 0 8px, transparent 8px 16px),
    rgba(255,255,255,0.50);
}

.v2-flow-list i::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 8px;
  height: 5px;
  border-left: 2px solid rgba(54, 132, 111, 0.76);
  border-bottom: 2px solid rgba(54, 132, 111, 0.76);
  transform: translateY(-65%) rotate(-45deg);
}

.v2-phone-row i,
.v2-product-row i,
.v2-thumb-grid i,
.v2-frame-strip i {
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}

.v2-phone-row i:nth-child(1),
.v2-thumb-grid i:nth-child(2),
.v2-frame-strip i:nth-child(4) {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.20), rgba(255,255,255,0.02)),
    linear-gradient(135deg, #315b73, #dfe6dd 52%, #9e7555);
}

.v2-phone-row i:nth-child(2),
.v2-thumb-grid i:nth-child(4),
.v2-frame-strip i:nth-child(2) {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.20), rgba(255,255,255,0.02)),
    linear-gradient(135deg, #789fb4, #e3e7df 48%, #315168);
}

.v2-product-row i:nth-child(1) {
  background:
    radial-gradient(ellipse at 50% 64%, rgba(232,232,224,0.95) 0 34%, transparent 35%),
    linear-gradient(135deg, #d5e4ec, #fafafa 58%, #9caebc);
}

.v2-product-row i:nth-child(2) {
  background:
    radial-gradient(ellipse at 50% 62%, rgba(190,150,109,0.88) 0 34%, transparent 35%),
    linear-gradient(135deg, #e7d8c4, #f7f8f7 58%, #ac8d72);
}

.v2-product-row i:nth-child(3) {
  background:
    radial-gradient(ellipse at 50% 54%, rgba(220,198,162,0.78) 0 29%, transparent 30%),
    linear-gradient(135deg, #d6e5ec, #fbfbfa 58%, #b7a486);
}

/* Product homepage v2 lower-section pass: concrete workflow, scenarios and data widgets */
.v2-flow li {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.v2-flow li > small,
.v2-flow-stats,
.v2-scenario-meta,
.v2-file-caption,
.v2-bgm-list,
.v2-rule-chip,
.v2-preview-tabs,
.v2-log-status {
  color: #547087;
  font-size: 12px;
}

.v2-flow li > small {
  margin-top: auto;
}

.v2-flow-media,
.v2-flow-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.v2-flow-rules {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.v2-flow-media span {
  position: relative;
  overflow: hidden;
  min-height: 56px;
  align-items: end;
  padding-bottom: 6px;
  border: 1px solid rgba(255,255,255,0.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
}

.v2-flow-media span:nth-child(1) {
  background:
    linear-gradient(180deg, transparent 0 58%, rgba(9, 34, 54, 0.60) 59%),
    linear-gradient(135deg, #799fb4, #e1e7e1 52%, #32576f);
  color: #f3fbff;
}

.v2-flow-media span:nth-child(2) {
  background:
    radial-gradient(circle at 40% 34%, rgba(255,239,166,0.92) 0 7px, transparent 8px),
    linear-gradient(135deg, #92bac9, #f1f1e6 50%, #6e987c);
}

.v2-flow-media span:nth-child(3) {
  background:
    linear-gradient(90deg, rgba(75, 133, 158, 0.64) 0 10px, transparent 10px 17px, rgba(75,133,158,0.86) 17px 28px, transparent 28px),
    rgba(255,255,255,0.56);
}

.v2-flow-switches {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.v2-flow-switches i {
  position: relative;
  display: block;
  height: 22px;
  border-radius: 999px;
  background: rgba(97, 126, 149, 0.12);
}

.v2-flow-switches i::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 4px;
  width: 30px;
  height: 14px;
  border-radius: inherit;
  background: linear-gradient(90deg, #90ded8, #66a9ca);
}

.v2-flow-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.v2-flow-folders {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.v2-flow-folders span {
  position: relative;
  flex: 1;
  width: auto;
  height: 38px;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
}

.v2-flow-folders span::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -5px;
  width: 24px;
  height: 10px;
  border-radius: 5px 5px 0 0;
  background: #efcf8f;
}

.v2-scenario-grid article,
.v2-data-grid article {
  display: flex;
  flex-direction: column;
}

.v2-scenario-meta,
.v2-file-caption,
.v2-bgm-list,
.v2-preview-tabs,
.v2-log-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.v2-scenario-meta span,
.v2-file-caption span,
.v2-bgm-list span,
.v2-preview-tabs span,
.v2-log-status span,
.v2-rule-chip {
  border: 1px solid rgba(91, 124, 149, 0.12);
  border-radius: 9px;
  padding: 7px 9px;
  background: rgba(255,255,255,0.42);
}

.v2-scenario-grid article:nth-child(1) .v2-scenario-meta span,
.v2-scenario-grid article:nth-child(4) .v2-rule-chip {
  color: #eaf6fb;
  border-color: rgba(230, 248, 255, 0.13);
  background: rgba(255,255,255,0.08);
}

.v2-file-caption {
  display: grid;
  grid-template-columns: 1fr;
}

.v2-bgm-list {
  display: grid;
  grid-template-columns: 1fr;
}

.v2-bgm-list span {
  position: relative;
  padding-left: 34px;
}

.v2-bgm-list span::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 9px;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: linear-gradient(135deg, #89d5dc, #5f86b8);
}

.v2-rule-chip {
  margin-top: auto;
  color: #eaf6fb;
}

.v2-calendar-wave i {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(98, 154, 190, 0.26) 18% 20%, transparent 20% 39%, rgba(98,154,190,0.26) 39% 41%, transparent 41% 60%, rgba(98,154,190,0.26) 60% 62%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.54), rgba(255,255,255,0.22));
}

.v2-calendar-wave span {
  background:
    linear-gradient(90deg, rgba(103, 149, 205, 0.70) 0 22%, transparent 22% 30%, rgba(103,149,205,0.52) 30% 45%, transparent 45% 52%, rgba(103,149,205,0.68) 52% 70%, transparent 70%),
    rgba(255,255,255,0.35);
}

.v2-data-grid article p {
  margin-bottom: 12px;
}

.v2-format-cloud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
}

.v2-format-cloud span {
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(218, 242, 255, 0.10);
  border-radius: 10px;
}

.v2-thumb-grid {
  margin-top: 12px;
}

.v2-thumb-grid i {
  min-height: 54px;
  border-radius: 10px;
}

.v2-preview-tabs,
.v2-log-status {
  margin-top: 12px;
}

.v2-mini-log,
.v2-csv-table {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.v2-csv-table {
  grid-template-columns: 1.35fr 1fr 0.7fr;
}

.v2-csv-table span:nth-child(4) {
  grid-column: 1 / -1;
}

.v2-csv-table-detailed {
  grid-template-columns: minmax(0, 1.55fr) 0.7fr 0.8fr 0.72fr;
  margin-top: 14px;
}

.v2-csv-table-detailed span {
  min-width: 0;
  min-height: 31px;
  overflow: hidden;
  padding: 7px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-csv-table-detailed span:nth-child(-n+4) {
  min-height: 28px;
  color: #9db8ca;
  background: rgba(255,255,255,0.055);
  font-size: 11px;
  font-weight: 700;
}

.v2-csv-table-detailed span:nth-child(8),
.v2-csv-table-detailed span:nth-child(12) {
  color: #8ff0c2;
}

.v2-csv-table-detailed span:nth-child(13) {
  grid-column: 1 / -1;
  color: #d6e8f1;
  background:
    linear-gradient(90deg, rgba(145, 210, 220, 0.14), rgba(255,255,255,0.075)),
    rgba(255,255,255,0.06);
}

.v2-mini-log span,
.v2-csv-table span {
  min-height: 34px;
  display: flex;
  align-items: center;
  border-radius: 9px;
  padding: 7px 10px;
}

.v2-log-status {
  justify-content: space-between;
}

.v2-log-status span:first-child,
.v2-csv-table span:nth-child(3) {
  color: #8ff0c2;
}

.v2-csv-table-detailed span:nth-child(3) {
  color: #9db8ca;
}

@media (max-width: 760px) {
  .v2-flow-media,
  .v2-flow-rules,
  .v2-format-cloud,
  .v2-csv-table {
    grid-template-columns: 1fr 1fr;
  }

  .v2-flow-media span {
    min-height: 48px;
  }
}

@media (max-width: 760px) {
  .v2-rule-console,
  .v2-bgm-panel {
    min-height: 0;
    margin-top: 12px;
  }

  .v2-mask-controls,
  .v2-audio-formats,
  .v2-frame-toolbar,
  .v2-export-table {
    grid-template-columns: 1fr;
  }
}

/* Product homepage v2 reference-image pass: visible fake media assets and tighter data widgets */
.v2-thumb-wave,
.v2-thumb-portrait,
.v2-thumb-city,
.v2-thumb-cat,
.v2-before-after i,
.v2-version-preview i,
.v2-layer-stack i,
.v2-frame-strip i,
.v2-flow-media span,
.v2-phone-row i,
.v2-product-row i,
.v2-thumb-grid i {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.v2-thumb-wave {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 38%),
    linear-gradient(0deg, rgba(15,42,61,0.28), rgba(15,42,61,0) 54%),
    url("/static/assets/homepage/surf.svg");
}

.v2-thumb-portrait {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 38%),
    url("/static/assets/homepage/portrait.svg");
}

.v2-thumb-city {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 38%),
    linear-gradient(0deg, rgba(14,35,54,0.18), rgba(14,35,54,0) 58%),
    url("/static/assets/homepage/city.svg");
}

.v2-thumb-cat {
  min-height: 112px;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 38%),
    url("/static/assets/homepage/cat.svg");
}

.v2-thumb-wave::after,
.v2-thumb-portrait::after,
.v2-thumb-city::after {
  display: none;
}

.v2-asset-cat {
  display: none;
  gap: 8px;
}

.v2-asset-cat > span {
  width: max-content;
  color: #7e5261;
  background: rgba(255,255,255,0.58);
}

.v2-asset-image {
  overflow: hidden;
}

.v2-asset-image,
.v2-asset-cat {
  padding: 10px;
  gap: 6px;
}

.v2-asset-image .v2-thumb {
  min-height: 58px !important;
  height: 58px !important;
}

.v2-asset-cat .v2-thumb {
  min-height: 58px !important;
  height: 58px !important;
}

.v2-asset-image strong,
.v2-asset-image > span,
.v2-asset-cat > span {
  font-size: 11px;
  line-height: 1.25;
}

.v2-asset-cat > span {
  padding: 4px 7px;
}

@media (min-width: 1181px) {
  .v2-asset-tags {
    grid-column: 9 / 11 !important;
    grid-row: 7 / 9 !important;
    align-content: start;
  }

  .v2-asset-image {
    grid-column: 11 / 13 !important;
    grid-row: 7 / 9 !important;
  }

  .v2-asset-cat {
    display: grid;
    grid-column: 9 / 11 !important;
    grid-row: 9 / 11 !important;
  }

  .v2-hero-tags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    grid-column: 11 / 13;
    grid-row: 9 / 11;
  }
}

.v2-before-after i:first-child,
.v2-version-preview i:first-child,
.v2-frame-strip i:nth-child(1),
.v2-frame-strip i:nth-child(4),
.v2-flow-media span:nth-child(1),
.v2-phone-row i:nth-child(1),
.v2-thumb-grid i:nth-child(1) {
  background-image:
    linear-gradient(180deg, transparent 0 58%, rgba(12,37,56,0.58) 59%),
    url("/static/assets/homepage/surf.svg");
}

.v2-before-after i:nth-child(3),
.v2-version-preview i:nth-child(2),
.v2-frame-strip i:nth-child(2),
.v2-frame-strip i:nth-child(5),
.v2-phone-row i:nth-child(2),
.v2-thumb-grid i:nth-child(2),
.v2-thumb-grid i:nth-child(5) {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(12,37,56,0.20)),
    url("/static/assets/homepage/mountain.svg");
}

.v2-layer-stack i:first-child,
.v2-flow-media span:nth-child(2),
.v2-phone-row i:nth-child(3),
.v2-thumb-grid i:nth-child(3) {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(12,37,56,0.18)),
    url("/static/assets/homepage/portrait.svg");
}

.v2-layer-stack i:nth-child(2),
.v2-frame-strip i:nth-child(3),
.v2-thumb-grid i:nth-child(4) {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(12,37,56,0.18)),
    url("/static/assets/homepage/city.svg");
}

.v2-layer-stack i:nth-child(3),
.v2-thumb-grid i:nth-child(6) {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(12,37,56,0.12)),
    url("/static/assets/homepage/cat.svg");
}

.v2-product-row i:nth-child(1) {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 48%),
    url("/static/assets/homepage/product-shoe.svg");
}

.v2-product-row i:nth-child(2) {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 48%),
    url("/static/assets/homepage/product-bag.svg");
}

.v2-product-row i:nth-child(3) {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 48%),
    url("/static/assets/homepage/product-jewelry.svg");
}

.v2-product-row i,
.v2-phone-row i,
.v2-thumb-grid i,
.v2-frame-strip i {
  overflow: hidden;
}

.v2-csv-table-detailed {
  grid-template-columns: minmax(0, 1.5fr) 0.62fr 0.78fr 0.68fr;
  align-items: stretch;
}

.v2-csv-table-detailed span:nth-child(4) {
  grid-column: auto;
}

.v2-csv-table-detailed span:nth-child(3) {
  color: #9db8ca;
}

.v2-csv-table-detailed span:nth-child(7),
.v2-csv-table-detailed span:nth-child(11) {
  color: #d6e8f1;
}

.v2-csv-table-detailed span:nth-child(8),
.v2-csv-table-detailed span:nth-child(12) {
  color: #8ff0c2;
  justify-content: center;
}

.v2-csv-table-detailed span:nth-child(13) {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .v2-csv-table-detailed {
    grid-template-columns: minmax(0, 1.35fr) 0.75fr;
  }

  .v2-csv-table-detailed span:nth-child(4) {
    grid-column: auto;
  }

  .v2-csv-table-detailed span:nth-child(13) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .v2-asset-tags {
    grid-column: 10 / 11 !important;
    grid-row: 7 / 9 !important;
  }

  .v2-asset-image {
    display: grid;
    grid-template-rows: 70px auto auto;
    grid-column: 11 / 13 !important;
    grid-row: 7 / 9 !important;
  }

  .v2-asset-image .v2-thumb {
    min-height: 70px !important;
    height: 70px !important;
  }

  .v2-hero-tags {
    grid-column: 10 / 13 !important;
    grid-row: 9 / 10 !important;
    width: 100%;
    justify-content: flex-start;
  }
}

/* Final override: portable desktop UI fidelity layer */
body.workbench-open,
body.workbench-open .app-shell,
body.workbench-open .main {
  color: #0f172a !important;
  background: #f3f4f6 !important;
}

body.workbench-open::before,
body.workbench-open::after,
body.workbench-open .app-shell::before,
body.workbench-open .app-shell::after,
body.workbench-open .sidebar::before,
body.workbench-open .sidebar::after,
body.workbench-open .topbar::before,
body.workbench-open .topbar::after,
body.workbench-open .panel::before,
body.workbench-open .panel::after {
  display: none !important;
}

body.workbench-open .app-shell {
  display: grid !important;
  grid-template-columns: 208px minmax(0, 1fr) !important;
  grid-template-areas: "sidebar main" !important;
  min-height: 100dvh !important;
  padding: 0 !important;
}

body.workbench-open .sidebar {
  grid-area: sidebar !important;
  width: 208px !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 12px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0f172a !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.workbench-open .traffic,
body.workbench-open .sidebar-controls,
body.workbench-open .sidebar-storage,
body.workbench-open .sidebar-version,
body.workbench-open .status-dock,
body.workbench-open .output-pill,
body.workbench-open .app-language-toggle {
  display: none !important;
}

body.workbench-open .brand-card {
  min-height: 62px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.workbench-open .brand-mark {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(59, 130, 246, 0.16) !important;
  color: #dbeafe !important;
  box-shadow: none !important;
}

body.workbench-open .brand-title {
  color: #f8fafc !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

body.workbench-open .brand-subtitle {
  display: none !important;
}

body.workbench-open .nav-label {
  margin: 8px 8px 10px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.workbench-open .side-nav {
  gap: 7px !important;
}

body.workbench-open .side-nav button {
  min-height: 42px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

body.workbench-open .side-nav button.active {
  background: #2f80ed !important;
  color: #ffffff !important;
}

body.workbench-open .sidebar-home {
  min-height: 72px !important;
  margin-top: auto !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f8fafc !important;
}

body.workbench-open .sidebar-home-icon,
body.workbench-open .sidebar-exit {
  display: none !important;
}

body.workbench-open .sidebar-home small {
  display: block !important;
  margin-top: 3px !important;
  color: #64748b !important;
}

body.workbench-open .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  height: 68px !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.workbench-open .crumb h1 {
  color: #0f172a !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

body.workbench-open .crumb span,
body.workbench-open .crumb b {
  color: #94a3b8 !important;
}

body.workbench-open .search-box {
  width: 330px !important;
  height: 38px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 19px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

body.workbench-open input,
body.workbench-open select,
body.workbench-open textarea {
  color: #0f172a !important;
  border-color: #dbe3ee !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.workbench-open .search-box input {
  background: transparent !important;
}

body.workbench-open .keycap {
  display: none !important;
}

body.workbench-open .icon-status,
body.workbench-open .admin-chip {
  height: 38px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

body.workbench-open .admin-chip {
  min-width: 78px !important;
  color: #2563eb !important;
  background: #eef4ff !important;
}

body.workbench-open .view {
  padding: 20px !important;
}

body.workbench-open .panel,
body.workbench-open .liquid-surface,
body.workbench-open .portable-card,
body.workbench-open .portable-stat-card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.workbench-open .portable-dashboard {
  display: grid !important;
  gap: 14px !important;
}

body.workbench-open .portable-hero {
  display: grid !important;
  gap: 10px !important;
  padding: 20px !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%) !important;
}

body.workbench-open .portable-hero h2 {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}

body.workbench-open .portable-hero p {
  margin: 6px 0 0 !important;
  color: #dbeafe !important;
}

body.workbench-open .portable-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body.workbench-open .portable-hero-btn {
  width: auto !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  background: rgba(255,255,255,0.14) !important;
}

body.workbench-open .portable-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.workbench-open .portable-stat-card {
  min-height: 78px !important;
  padding: 12px 14px !important;
}

body.workbench-open .portable-stat-card span {
  display: block !important;
  color: #64748b !important;
  font-weight: 800 !important;
}

body.workbench-open .portable-stat-card strong {
  display: block !important;
  margin-top: 5px !important;
  color: #2563eb !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

body.workbench-open .portable-stat-card.green strong { color: #16a34a !important; }
body.workbench-open .portable-stat-card.amber strong { color: #f59e0b !important; }
body.workbench-open .portable-stat-card.cyan strong { color: #0ea5e9 !important; }

body.workbench-open .portable-main-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.74fr) !important;
  gap: 14px !important;
}

body.workbench-open .portable-card {
  min-height: 286px !important;
  padding: 14px !important;
}

body.workbench-open .portable-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

body.workbench-open .portable-card-head h3 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body.workbench-open .portable-link {
  width: auto !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #2f80ed !important;
  background: transparent !important;
}

body.workbench-open .portable-task-list,
body.workbench-open .portable-feature-list {
  display: grid !important;
  gap: 8px !important;
}

body.workbench-open .portable-task-row,
body.workbench-open .portable-feature-row {
  display: grid !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 44px !important;
  padding: 8px 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

body.workbench-open .portable-task-row {
  grid-template-columns: 28px minmax(0, 1fr) auto auto auto !important;
}

body.workbench-open .portable-feature-row {
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  min-height: 72px !important;
  background: #f8fafc !important;
}

body.workbench-open .portable-task-row strong,
body.workbench-open .portable-feature-row strong {
  color: #0f172a !important;
  font-weight: 900 !important;
}

body.workbench-open .portable-task-row time,
body.workbench-open .portable-feature-row small {
  color: #94a3b8 !important;
}

body.workbench-open .portable-feature-icon {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: #eef4ff !important;
}

@media (max-width: 980px) {
  body.workbench-open .app-shell {
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" !important;
  }
  body.workbench-open .sidebar {
    display: none !important;
  }
  body.workbench-open .portable-stats,
  body.workbench-open .portable-main-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Desktop parity override: cloud workbench opens directly and mirrors the PyQt portable layout */
body.workbench-open {
  min-width: 1280px !important;
  color-scheme: light !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Arial, sans-serif !important;
}

body.workbench-open #product-home,
body.workbench-open .product-home,
body.workbench-open .home-v2,
body.workbench-open .marketing-nav,
body.workbench-open .landing-hero,
body.workbench-open .landing-section,
body.workbench-open .landing-cta {
  display: none !important;
  visibility: hidden !important;
}

body.workbench-open .main {
  grid-area: main !important;
  min-width: 0 !important;
  background: #f3f6fb !important;
}

body.workbench-open .view {
  min-height: calc(100dvh - 68px) !important;
  padding: 18px 20px 16px !important;
}

body.workbench-open .section-tools,
body.workbench-open .desktop-title-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  min-height: 82px !important;
  margin: 0 0 14px !important;
  padding: 16px 18px !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.workbench-open .section-tools h2,
body.workbench-open .desktop-title-card h2 {
  margin: 0 0 6px !important;
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}

body.workbench-open .hint {
  color: #64748b !important;
}

body.workbench-open .btn,
body.workbench-open .icon-btn,
body.workbench-open .landing-btn {
  min-height: 38px !important;
  border: 1px solid #cfd9e8 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease !important;
}

body.workbench-open .btn:hover,
body.workbench-open .icon-btn:hover {
  border-color: #93b8ff !important;
  background: #f8fbff !important;
}

body.workbench-open .btn:active,
body.workbench-open .icon-btn:active {
  transform: translateY(1px) !important;
}

body.workbench-open .btn.primary,
body.workbench-open .btn.green,
body.workbench-open .side-nav button.active {
  border-color: #2563eb !important;
  background: #2563eb !important;
  color: #ffffff !important;
}

body.workbench-open .btn.danger {
  border-color: #fecaca !important;
  color: #b91c1c !important;
  background: #fff7f7 !important;
}

body.workbench-open .panel-head {
  min-height: 42px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #dbe3ee !important;
  background: #ffffff !important;
}

body.workbench-open .panel-head h3,
body.workbench-open .panel-body h3 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body.workbench-open .panel-body {
  padding: 14px !important;
}

body.workbench-open .field > span,
body.workbench-open .mini-field > span,
body.workbench-open .template-select-row > span {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.workbench-open .desktop-page {
  display: grid !important;
  gap: 12px !important;
}

body.workbench-open .rename-desktop-page {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  height: calc(100dvh - 118px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.workbench-open .desktop-template-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

body.workbench-open .template-select-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.workbench-open .template-select-row select {
  width: 180px !important;
  min-height: 38px !important;
}

body.workbench-open .desktop-template-toolbar .inline-input {
  width: 180px !important;
  min-height: 38px !important;
}

body.workbench-open .rename-desktop-grid {
  display: grid !important;
  grid-template-columns: minmax(360px, 390px) minmax(480px, 0.9fr) minmax(560px, 1.08fr) !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

body.workbench-open .rename-import-card,
body.workbench-open .rename-rule-card,
body.workbench-open .rename-preview-card {
  display: grid !important;
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.workbench-open .rename-import-card .panel-body,
body.workbench-open .rename-rule-card .panel-body {
  min-height: 0 !important;
  overflow: auto !important;
}

body.workbench-open .rename-preview-card {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

body.workbench-open .desktop-file-picker-row,
body.workbench-open .desktop-output-row,
body.workbench-open .desktop-import-status {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 12px 0 !important;
}

body.workbench-open .desktop-output-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body.workbench-open .desktop-import-status {
  grid-template-columns: minmax(0, 1fr) auto !important;
  color: #64748b !important;
}

body.workbench-open .desktop-import-status > div {
  display: flex !important;
  gap: 8px !important;
}

body.workbench-open .desktop-mode-field {
  margin-top: 6px !important;
}

body.workbench-open .rename-file-list {
  max-height: 42dvh !important;
  overflow: auto !important;
  padding-right: 2px !important;
}

body.workbench-open .rename-rule-canvas {
  min-height: 112px !important;
  margin-top: 8px !important;
  padding: 12px !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-family: Consolas, "Microsoft YaHei UI", monospace !important;
  font-weight: 800 !important;
}

body.workbench-open .rename-rule-actions {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 10px 0 !important;
}

body.workbench-open .token-config-card {
  margin-top: 12px !important;
  padding: 14px !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
}

body.workbench-open .desktop-token-library {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body.workbench-open .token-library .btn {
  min-height: 40px !important;
  justify-content: center !important;
  background: #eaf3ff !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
}

body.workbench-open .rename-mode-switch {
  margin: 12px 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.workbench-open .rename-mode-switch legend {
  margin-bottom: 8px !important;
  color: #0f172a !important;
  font-weight: 900 !important;
}

body.workbench-open .rename-mode-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.workbench-open .rename-mode-option {
  border: 1px solid #dbe3ee !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

body.workbench-open .rename-mode-option.active {
  border-color: #93c5fd !important;
  background: #eff6ff !important;
}

body.workbench-open .table-wrap {
  border: 1px solid #dbe3ee !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

body.workbench-open table thead th {
  color: #0f172a !important;
  background: #e8eef7 !important;
}

body.workbench-open table tbody td {
  color: #0f172a !important;
  border-color: #edf2f7 !important;
  background: #ffffff !important;
}

body.workbench-open .rename-preview-card .table-wrap {
  min-height: 0 !important;
  height: 100% !important;
  overflow: auto !important;
}

body.workbench-open .rename-preview-card > .empty-state {
  min-height: 0 !important;
  height: 100% !important;
}

body.workbench-open .rename-bottom-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 64px !important;
  padding: 10px 14px !important;
  color: #0f172a !important;
}

body.workbench-open .rename-bottom-bar span {
  font-weight: 800 !important;
}

body.workbench-open .process-workstation,
body.workbench-open .export-layout,
body.workbench-open .settings-panel,
body.workbench-open .admin-panel {
  color: #0f172a !important;
}

/* FlexClip-inspired production editor, matched to generated 16:9 mockup */
body.workbench-open {
  min-width: 1280px !important;
  overflow: hidden !important;
  color: #18181b !important;
  background: #f4f5f8 !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Arial, sans-serif !important;
}

body.workbench-open .app-shell {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  grid-template-areas: "sidebar main" !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  background: #f4f5f8 !important;
}

body.workbench-open .sidebar {
  grid-area: sidebar !important;
  width: 74px !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 18px 8px 14px !important;
  border-right: 1px solid #e5e7ee !important;
  background: #ffffff !important;
  box-shadow: 1px 0 0 rgba(17, 24, 39, 0.02) !important;
  overflow: hidden !important;
}

body.workbench-open .brand-card {
  display: grid !important;
  place-items: center !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 0 30px !important;
  background: transparent !important;
}

body.workbench-open .brand-card > div:not(.sidebar-controls),
body.workbench-open .nav-label,
body.workbench-open .sidebar-home span:not(.sidebar-home-icon):not(.sidebar-exit),
body.workbench-open .sidebar-home small {
  display: none !important;
}

body.workbench-open .brand-mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 9px !important;
  background: #ff5b18 !important;
  color: #ffffff !important;
  font-size: 0 !important;
  font-weight: 950 !important;
  box-shadow: 0 8px 18px rgba(255, 91, 24, 0.22) !important;
}

body.workbench-open .brand-mark::before {
  content: "M" !important;
  color: #ffffff !important;
  font-size: 25px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body.workbench-open .side-nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}

body.workbench-open .side-nav button {
  position: relative !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 5px !important;
  width: 58px !important;
  min-height: 62px !important;
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #4b5565 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

body.workbench-open .side-nav button::before {
  position: absolute !important;
  left: -8px !important;
  top: 14px !important;
  bottom: 14px !important;
  width: 3px !important;
  border-radius: 0 4px 4px 0 !important;
  background: transparent !important;
  content: "" !important;
}

body.workbench-open .side-nav button.active {
  color: #ff5b18 !important;
  background: #fff3ed !important;
  border-color: transparent !important;
}

body.workbench-open .side-nav button.active::before {
  background: #ff5b18 !important;
}

body.workbench-open .nav-symbol {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  color: currentColor !important;
  font-size: 21px !important;
  line-height: 1 !important;
}

body.workbench-open .sidebar-home {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  min-height: 42px !important;
  margin: auto auto 8px !important;
  padding: 0 !important;
  border: 1px solid #e5e7ee !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #111827 !important;
}

body.workbench-open .sidebar-home-icon {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: #f4f5f8 !important;
  color: #4b5565 !important;
}

body.workbench-open .main {
  grid-area: main !important;
  display: grid !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #f4f5f8 !important;
}

body.workbench-open .topbar,
body.workbench-open .status-dock,
body.workbench-open .sidebar-controls,
body.workbench-open .sidebar-storage,
body.workbench-open .sidebar-version,
body.workbench-open .traffic,
body.workbench-open .sidebar-reveal {
  display: none !important;
}

body.workbench-open .view {
  display: grid !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.workbench-open .prod-workbench {
  display: grid !important;
  grid-template-columns: clamp(390px, 25.2vw, 480px) minmax(620px, 1fr) clamp(318px, 20.6vw, 382px) !important;
  grid-template-rows: 78px minmax(0, 1fr) 178px !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  color: #1f2328 !important;
  background: #f4f5f8 !important;
}

body.workbench-open .prod-library {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  min-width: 0 !important;
  padding: 20px 18px 14px !important;
  border-right: 1px solid #e3e6ee !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

body.workbench-open .prod-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  height: 46px !important;
  padding: 4px !important;
  border-radius: 10px !important;
  background: #f5f6fa !important;
  box-shadow: 0 8px 26px rgba(17, 24, 39, 0.06) !important;
}

body.workbench-open .prod-tabs button {
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #30343b !important;
  font-weight: 900 !important;
}

body.workbench-open .prod-tabs button.active {
  color: #ff5b18 !important;
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08) !important;
}

body.workbench-open .prod-search {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  height: 46px !important;
  margin: 16px 0 18px !important;
  padding: 0 14px !important;
  border: 1px solid #dde2eb !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #9aa3af !important;
}

body.workbench-open .prod-search input {
  min-height: 0 !important;
  height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #111827 !important;
}

body.workbench-open .prod-lib-section {
  margin-bottom: 20px !important;
}

body.workbench-open .prod-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

body.workbench-open .prod-section-head h2 {
  margin: 0 !important;
  color: #20242a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

body.workbench-open .prod-section-head button,
body.workbench-open .prod-section-head span {
  border: 0 !important;
  background: transparent !important;
  color: #7b8494 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.workbench-open .prod-file-tools {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.workbench-open .prod-template-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.workbench-open .prod-template-card {
  display: grid !important;
  grid-template-rows: 72px auto auto !important;
  gap: 7px !important;
  min-height: 146px !important;
  padding: 8px !important;
  border: 1px solid #e2e6ef !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #20242a !important;
  text-align: left !important;
  overflow: hidden !important;
}

body.workbench-open .prod-template-card.orange {
  border-color: #ff6b22 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 34, 0.18) !important;
}

body.workbench-open .prod-template-card > span {
  display: block !important;
  border-radius: 7px !important;
  background:
    linear-gradient(135deg, rgba(40, 94, 160, 0.28), rgba(255, 107, 34, 0.22)),
    linear-gradient(140deg, #d9e7ef 0%, #84a8bd 42%, #34424c 100%) !important;
}

body.workbench-open .prod-template-card.blue > span {
  background:
    linear-gradient(90deg, transparent 12%, rgba(255,255,255,0.76) 12% 14%, transparent 14% 23%, rgba(255,255,255,0.52) 23% 26%, transparent 26%),
    linear-gradient(135deg, #0f172a, #334155 48%, #31d0aa) !important;
}

body.workbench-open .prod-template-card.green > span {
  background:
    radial-gradient(circle at 72% 30%, rgba(255,255,255,0.86) 0 12%, transparent 13%),
    linear-gradient(135deg, #1f2937, #8a4b10 52%, #ff9a3d) !important;
}

body.workbench-open .prod-template-card strong,
body.workbench-open .prod-file-row strong,
body.workbench-open .prod-clip strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open .prod-template-card strong {
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.workbench-open .prod-template-card small {
  color: #6b7280 !important;
  font-size: 12px !important;
}

body.workbench-open .prod-import-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

body.workbench-open .prod-import-grid button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  border: 1px solid #e2e6ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #20242a !important;
  font-weight: 850 !important;
}

body.workbench-open .prod-import-grid button:first-child {
  color: #ff5b18 !important;
  border-color: #ff6b22 !important;
  background: #fff7f2 !important;
}

body.workbench-open .prod-material-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

body.workbench-open .prod-material-stats span {
  display: grid !important;
  gap: 2px !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: #f5f9ff !important;
  color: #4b5565 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

body.workbench-open .prod-material-stats span:nth-child(2) { background: #f0fbf4 !important; }
body.workbench-open .prod-material-stats span:nth-child(3) { background: #fff0f5 !important; }
body.workbench-open .prod-material-stats span:nth-child(4) { background: #fff7e9 !important; }

body.workbench-open .prod-material-stats b {
  color: #111827 !important;
  font-size: 20px !important;
  font-weight: 950 !important;
}

body.workbench-open .prod-file-section {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  height: calc(100dvh - 512px) !important;
  margin-bottom: 0 !important;
}

body.workbench-open .prod-file-list {
  min-height: 0 !important;
  overflow: hidden auto !important;
  padding-right: 4px !important;
}

body.workbench-open .prod-file-row {
  display: grid !important;
  grid-template-columns: 18px 36px minmax(0, 1fr) 44px 58px 34px !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 42px !important;
  margin-bottom: 6px !important;
  padding: 5px 7px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #f7f8fb !important;
  color: #20242a !important;
  text-align: left !important;
}

body.workbench-open .prod-file-row > i {
  display: grid !important;
  place-items: center !important;
  width: 16px !important;
  height: 16px !important;
  border: 1px solid #cfd6e4 !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  font-style: normal !important;
}

body.workbench-open .prod-file-row > i.checked {
  border-color: #ff5b18 !important;
  background: #ff5b18 !important;
}

body.workbench-open .prod-file-row > i.checked::before {
  content: "✓" !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

body.workbench-open .prod-file-thumb {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 26px !important;
  border-radius: 6px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.4), transparent),
    linear-gradient(135deg, #9ec5d6, #3a657d) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

body.workbench-open .prod-file-thumb.image {
  background: linear-gradient(135deg, #cfd8e9, #596a86) !important;
}

body.workbench-open .prod-file-thumb.audio {
  background: #6d6df6 !important;
  color: #ffffff !important;
}

body.workbench-open .prod-file-row strong {
  color: #20242a !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

body.workbench-open .prod-file-row small,
body.workbench-open .prod-file-row em {
  color: #7b8494 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 750 !important;
  text-align: right !important;
}

body.workbench-open .prod-editor-toolbar {
  grid-column: 2 / 4 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 120px minmax(180px, 1fr) minmax(210px, auto) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  padding: 14px 24px !important;
  border-bottom: 1px solid #e3e6ee !important;
  background: #f4f5f8 !important;
}

body.workbench-open .prod-ratio {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 46px !important;
  border: 1px solid #dfe4ed !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.04) !important;
}

body.workbench-open .prod-project {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body.workbench-open .prod-project strong {
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body.workbench-open .prod-project span {
  color: #4d8b5c !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body.workbench-open .prod-toolbar-center,
body.workbench-open .prod-toolbar-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body.workbench-open .prod-toolbar-center button {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #111827 !important;
  font-size: 22px !important;
  font-weight: 750 !important;
}

body.workbench-open .prod-toolbar-center b {
  font-size: 15px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body.workbench-open .prod-status-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: #6b7280 !important;
  background: #edf0f6 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

body.workbench-open .prod-status-chip.ready {
  color: #27a452 !important;
  background: #eaf8ee !important;
}

body.workbench-open .prod-soft-btn,
body.workbench-open .prod-primary-btn {
  min-height: 46px !important;
  padding: 0 23px !important;
  border-radius: 9px !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body.workbench-open .prod-soft-btn {
  border: 1px solid #e0e4ed !important;
  background: #ffffff !important;
  color: #111827 !important;
}

body.workbench-open .prod-primary-btn {
  border: 1px solid #05070c !important;
  background: #05070c !important;
  color: #ffffff !important;
}

body.workbench-open .prod-primary-btn:disabled {
  opacity: 0.62 !important;
}

body.workbench-open .prod-stage {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-rows: 68px minmax(0, 1fr) 42px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 18px 14px 24px !important;
  overflow: hidden !important;
}

body.workbench-open .prod-preview-meta {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  min-width: 0 !important;
  height: 50px !important;
  margin-top: 12px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.05) !important;
}

body.workbench-open .prod-color-dot {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: #050505 !important;
}

body.workbench-open .prod-canvas-shell {
  display: grid !important;
  align-items: center !important;
  min-height: 0 !important;
}

body.workbench-open .prod-canvas {
  position: relative !important;
  width: min(100%, calc((100dvh - 386px) * 16 / 9)) !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 auto !important;
  border: 18px solid #050505 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(23, 91, 129, 0.16) 0 50%, rgba(151, 94, 42, 0.28) 50% 100%),
    url("/static/assets/homepage/mountain.svg") center / cover no-repeat !important;
  box-shadow: 0 18px 46px rgba(17, 24, 39, 0.18) !important;
}

body.workbench-open .prod-canvas::before {
  position: absolute !important;
  inset: 58px 70px 55px !important;
  border: 2px dashed rgba(255, 255, 255, 0.72) !important;
  border-radius: 2px !important;
  content: "" !important;
  pointer-events: none !important;
}

body.workbench-open .prod-canvas::after {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(43, 98, 132, 0.24) 0 50%, rgba(39, 31, 20, 0.42) 50% 100%),
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 32%, rgba(0, 0, 0, 0.44) 100%) !important;
  content: "" !important;
}

body.workbench-open .prod-video-before,
body.workbench-open .prod-video-after {
  position: absolute !important;
  z-index: 2 !important;
  display: grid !important;
  gap: 8px !important;
  color: #ffffff !important;
}

body.workbench-open .prod-video-before {
  left: 72px !important;
  top: 48px !important;
}

body.workbench-open .prod-video-after {
  right: 72px !important;
  top: 48px !important;
  text-align: right !important;
}

body.workbench-open .prod-video-before span,
body.workbench-open .prod-video-after span,
body.workbench-open .prod-video-before b,
body.workbench-open .prod-video-after b {
  justify-self: start !important;
  width: fit-content !important;
  padding: 6px 10px !important;
  border-radius: 5px !important;
  background: rgba(0, 0, 0, 0.78) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.workbench-open .prod-video-after span,
body.workbench-open .prod-video-after b {
  justify-self: end !important;
}

body.workbench-open .prod-video-before b,
body.workbench-open .prod-video-after b {
  position: fixed !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: none !important;
}

body.workbench-open .prod-split-line {
  position: absolute !important;
  z-index: 4 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 2px !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

body.workbench-open .prod-split-line::after {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-style: normal !important;
  transform: translate(-50%, -50%) !important;
  content: "‹›" !important;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.22) !important;
}

body.workbench-open .prod-safe-grid {
  position: absolute !important;
  z-index: 3 !important;
  left: 50% !important;
  bottom: 42px !important;
  padding: 6px 12px !important;
  border-radius: 5px !important;
  background: rgba(0, 0, 0, 0.78) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  transform: translateX(-50%) !important;
}

body.workbench-open .prod-safe-grid::before {
  content: "product_clip_001.mp4" !important;
}

body.workbench-open .prod-flow-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  color: #8a93a3 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body.workbench-open .prod-flow-strip span {
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
}

body.workbench-open .prod-flow-strip .done {
  color: #2b9f52 !important;
  background: #eaf8ee !important;
}

body.workbench-open .prod-flow-strip .active {
  color: #ff5b18 !important;
  background: #fff1e9 !important;
}

body.workbench-open .prod-inspector {
  grid-column: 3 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto auto auto auto minmax(0, auto) auto auto !important;
  align-content: start !important;
  gap: 14px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 12px 20px 14px 0 !important;
  padding: 22px 20px !important;
  border: 1px solid #e4e7ef !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.08) !important;
  overflow: hidden auto !important;
}

body.workbench-open .prod-inspector-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

body.workbench-open .prod-inspector-head h2 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

body.workbench-open .prod-inspector-head span {
  color: #7b8494 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.workbench-open .prod-field,
body.workbench-open .prod-mode-field,
body.workbench-open .prod-slider {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 40px !important;
}

body.workbench-open .prod-field span,
body.workbench-open .prod-mode-field > span,
body.workbench-open .prod-slider span,
body.workbench-open .prod-toggle span {
  color: #30343b !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body.workbench-open .prod-mode-field {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  min-height: 72px !important;
}

body.workbench-open .prod-mode-segment {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  min-height: 38px !important;
  padding: 3px !important;
  border-radius: 8px !important;
  background: #f2f4f8 !important;
}

body.workbench-open .prod-mode-segment label {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  border-radius: 7px !important;
  color: #30343b !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

body.workbench-open .prod-mode-segment label.active {
  color: #ffffff !important;
  background: #ff5b18 !important;
}

body.workbench-open .prod-mode-segment input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

body.workbench-open .prod-field select {
  grid-column: 2 / 4 !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 32px 0 12px !important;
  border: 1px solid #e1e5ee !important;
  border-radius: 7px !important;
  background-color: #ffffff !important;
  color: #111827 !important;
  font-weight: 800 !important;
}

body.workbench-open .prod-slider input[type="range"] {
  min-height: 0 !important;
  height: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: linear-gradient(90deg, #ff5b18 0 calc(var(--range) * 1%), #e4e7ee calc(var(--range) * 1%) 100%) !important;
  border-radius: 999px !important;
  accent-color: #ff5b18 !important;
}

body.workbench-open .prod-slider b {
  display: grid !important;
  place-items: center !important;
  min-width: 48px !important;
  height: 34px !important;
  border: 1px solid #e4e7ef !important;
  border-radius: 7px !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

body.workbench-open .prod-toggle-list {
  display: grid !important;
  gap: 11px !important;
  margin-top: 2px !important;
}

body.workbench-open .prod-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 28px !important;
}

body.workbench-open .prod-toggle input {
  width: 36px !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  appearance: none !important;
  background: #c7cbd4 !important;
  transition: background 160ms ease !important;
}

body.workbench-open .prod-toggle input::before {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  margin: 2px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  content: "" !important;
  transition: transform 160ms ease !important;
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.25) !important;
}

body.workbench-open .prod-toggle input:checked {
  background: #ff5b18 !important;
}

body.workbench-open .prod-toggle input:checked::before {
  transform: translateX(16px) !important;
}

body.workbench-open .prod-output-card {
  display: grid !important;
  gap: 10px !important;
  margin-top: 6px !important;
  padding: 16px !important;
  border-radius: 10px !important;
  background: #f7f8fb !important;
}

body.workbench-open .prod-output-card span {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: #6b7280 !important;
  font-weight: 800 !important;
}

body.workbench-open .prod-output-card b {
  color: #111827 !important;
  font-weight: 950 !important;
}

body.workbench-open .prod-system-info-card {
  display: grid !important;
  gap: 12px !important;
  margin-top: 6px !important;
  padding: 14px !important;
  border: 1px solid #e4e7ef !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.06) !important;
}

body.workbench-open .prod-system-info-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

body.workbench-open .prod-system-info-head h3 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

body.workbench-open .prod-system-info-head button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid #e1e5ee !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #4b5565 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open .prod-system-info-head button:hover {
  border-color: #ffb38e !important;
  color: #ff5b18 !important;
  background: #fff7f2 !important;
}

body.workbench-open .prod-system-info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.workbench-open .prod-system-metric {
  display: grid !important;
  justify-items: start !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 104px !important;
  padding: 12px !important;
  border: 1px solid #e5e9f1 !important;
  border-radius: 8px !important;
  background: #fbfcfe !important;
}

body.workbench-open .prod-system-icon {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  color: #ff5b18 !important;
  background: #fff1e9 !important;
}

body.workbench-open .prod-system-icon .svg-icon,
body.workbench-open .prod-system-icon svg {
  width: 18px !important;
  height: 18px !important;
}

body.workbench-open .prod-system-metric small {
  min-width: 0 !important;
  color: #596273 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open .prod-system-metric strong {
  color: #111827 !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

body.workbench-open .prod-system-metric.orange {
  border-color: #ffd5c2 !important;
  background: #fff8f4 !important;
}

body.workbench-open .prod-system-metric.green .prod-system-icon {
  color: #18a957 !important;
  background: #eaf8ee !important;
}

body.workbench-open .prod-system-metric.blue .prod-system-icon {
  color: #1f7ae0 !important;
  background: #edf6ff !important;
}

body.workbench-open .prod-system-metric.purple .prod-system-icon {
  color: #7560d9 !important;
  background: #f1efff !important;
}

body.workbench-open .prod-refresh-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 46px !important;
  margin-top: 4px !important;
  border: 1px solid #ff5b18 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #ff5b18 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

body.workbench-open .prod-timeline {
  grid-column: 1 / 4 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-rows: 48px minmax(0, 1fr) 24px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 20px 12px !important;
  border-top: 1px solid #e1e5ee !important;
  background: #ffffff !important;
  box-shadow: 0 -8px 26px rgba(17, 24, 39, 0.04) !important;
}

body.workbench-open .prod-timeline-top {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) auto minmax(220px, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

body.workbench-open .prod-timeline-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  height: 100% !important;
}

body.workbench-open .prod-timeline-tabs button {
  height: 100% !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: #596273 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body.workbench-open .prod-timeline-tabs button.active {
  color: #ff5b18 !important;
  border-bottom-color: #ff5b18 !important;
}

body.workbench-open .prod-player {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  color: #111827 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

body.workbench-open .prod-player button {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #111827 !important;
  color: #ffffff !important;
}

body.workbench-open .prod-zoom {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

body.workbench-open .prod-zoom i {
  width: 118px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #adb4c1 0 42%, #e2e5ec 42% 100%) !important;
}

body.workbench-open .prod-zoom button {
  min-height: 32px !important;
  padding: 0 14px !important;
  border: 1px solid #e1e5ee !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #30343b !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

body.workbench-open .prod-track {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(210px, 1.2fr) minmax(210px, 1fr) minmax(210px, 1fr) minmax(210px, 1fr) 140px !important;
  gap: 14px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 10px 8px 6px !important;
}

body.workbench-open .prod-playhead {
  position: absolute !important;
  z-index: 4 !important;
  top: -2px !important;
  bottom: -30px !important;
  left: 11.7% !important;
  width: 2px !important;
  background: #111827 !important;
}

body.workbench-open .prod-playhead::before {
  position: absolute !important;
  top: -8px !important;
  left: 50% !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 3px !important;
  background: #111827 !important;
  transform: translateX(-50%) rotate(45deg) !important;
  content: "" !important;
}

body.workbench-open .prod-clip,
body.workbench-open .prod-add-tile {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 20px !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  min-height: 86px !important;
  padding: 12px !important;
  border: 1px solid #e1e5ee !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #20242a !important;
  text-align: left !important;
}

body.workbench-open .prod-clip.active {
  border-color: #ff5b18 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 91, 24, 0.24) !important;
}

body.workbench-open .prod-clip b {
  grid-row: 1 / 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #d4e2ee, #4f7f95) !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.workbench-open .prod-clip:nth-of-type(2) b {
  background: #dff8e7 !important;
  color: #12a95a !important;
  font-size: 0 !important;
}

body.workbench-open .prod-clip:nth-of-type(2) b::before { content: "♪"; font-size: 25px !important; }
body.workbench-open .prod-clip:nth-of-type(3) b { background: #fff0f5 !important; color: #e83e80 !important; }
body.workbench-open .prod-clip:nth-of-type(4) b { background: #fff2e6 !important; color: #ff6b22 !important; }

body.workbench-open .prod-clip strong {
  color: #20242a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

body.workbench-open .prod-clip span {
  color: #8a93a3 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.workbench-open .prod-add-tile {
  place-items: center !important;
  grid-template-columns: 1fr !important;
  color: #596273 !important;
  border-style: dashed !important;
  font-size: 28px !important;
}

body.workbench-open .prod-queue-preview {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  color: #7b8494 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

body.workbench-open .prod-queue-preview .running {
  color: #ff5b18 !important;
}

body.workbench-open .svg-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2 !important;
}

@media (max-width: 1500px) {
  body.workbench-open .prod-workbench {
    grid-template-columns: 390px minmax(560px, 1fr) 322px !important;
  }
  body.workbench-open .prod-editor-toolbar {
    grid-template-columns: 120px minmax(160px, 1fr) auto auto !important;
    gap: 10px !important;
    padding-inline: 18px !important;
  }
  body.workbench-open .prod-toolbar-actions .prod-status-chip {
    display: none !important;
  }
  body.workbench-open .prod-soft-btn,
  body.workbench-open .prod-primary-btn {
    padding-inline: 16px !important;
  }
  body.workbench-open .prod-inspector {
    gap: 10px !important;
    margin-right: 14px !important;
    padding: 18px 16px !important;
  }
  body.workbench-open .prod-field,
  body.workbench-open .prod-slider {
    grid-template-columns: 76px minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }
  body.workbench-open .prod-mode-segment label {
    font-size: 13px !important;
  }
  body.workbench-open .prod-output-card {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 10px !important;
  }
  body.workbench-open .prod-output-card span {
    display: grid !important;
    justify-items: start !important;
    gap: 4px !important;
    font-size: 12px !important;
  }
  body.workbench-open .prod-output-card b {
    font-size: 14px !important;
  }
  body.workbench-open .prod-system-info-card {
    padding: 12px !important;
  }
  body.workbench-open .prod-system-info-grid {
    gap: 8px !important;
  }
  body.workbench-open .prod-system-metric {
    min-height: 92px !important;
    padding: 10px !important;
  }
  body.workbench-open .prod-system-icon {
    width: 30px !important;
    height: 30px !important;
  }
  body.workbench-open .prod-system-metric strong {
    font-size: 21px !important;
  }
  body.workbench-open .prod-refresh-btn {
    min-height: 42px !important;
  }
}

@media (max-width: 1500px) {
  body.workbench-open .rename-desktop-grid {
    grid-template-columns: minmax(330px, 0.72fr) minmax(420px, 1fr) minmax(480px, 1fr) !important;
  }
}

/* Video processing production workbench */
body.workbench-open.process-open.sidebar-collapsed .app-shell {
  grid-template-columns: 128px minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #f4f5f8 !important;
}

body.workbench-open.process-open .app-shell {
  grid-template-columns: 128px minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #f4f5f8 !important;
}

body.workbench-open.process-open.sidebar-collapsed .main {
  height: 100dvh !important;
  overflow: hidden !important;
  background: #f4f5f8 !important;
}

body.workbench-open.process-open .main {
  height: 100dvh !important;
  overflow: hidden !important;
  background: #f4f5f8 !important;
}

body.workbench-open.process-open.sidebar-collapsed .sidebar {
  position: sticky !important;
  top: 0 !important;
  width: 128px !important;
  height: 100dvh !important;
  padding: 18px 8px 12px !important;
  border: 0 !important;
  border-right: 1px solid #e5e8f0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.workbench-open.process-open .sidebar {
  position: sticky !important;
  z-index: 30 !important;
  top: 0 !important;
  width: 128px !important;
  height: 100dvh !important;
  padding: 18px 8px 12px !important;
  border: 0 !important;
  border-right: 1px solid #e5e8f0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.workbench-open.process-open .sidebar::after {
  position: absolute !important;
  z-index: 6 !important;
  display: block !important;
  left: 98px !important;
  top: 28px !important;
  color: #111827 !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  content: "素材自动化管理平台" !important;
}

body.workbench-open.process-open.sidebar-collapsed .brand-card {
  min-height: 48px !important;
  margin: 0 0 28px !important;
  justify-items: start !important;
  padding-left: 24px !important;
}

body.workbench-open.process-open .brand-card {
  min-height: 48px !important;
  margin: 0 0 28px !important;
  justify-items: start !important;
  padding-left: 24px !important;
}

body.workbench-open.process-open.sidebar-collapsed .brand-mark {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  background: #ff5b18 !important;
  box-shadow: 0 10px 22px rgba(255, 91, 24, 0.22) !important;
}

body.workbench-open.process-open .brand-mark {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  background: #ff5b18 !important;
  box-shadow: 0 10px 22px rgba(255, 91, 24, 0.22) !important;
}

body.workbench-open.process-open.sidebar-collapsed .side-nav {
  gap: 8px !important;
}

body.workbench-open.process-open .side-nav {
  gap: 8px !important;
}

body.workbench-open.process-open.sidebar-collapsed .side-nav button {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  justify-content: start !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  color: #374151 !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body.workbench-open.process-open .side-nav button {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  justify-content: start !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  color: #374151 !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body.workbench-open.process-open.sidebar-collapsed .side-nav button span:not(.svg-icon) {
  display: inline-block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .side-nav button span:not(.svg-icon) {
  display: inline-block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open.sidebar-collapsed .side-nav button .svg-icon {
  width: 20px !important;
  height: 20px !important;
}

body.workbench-open.process-open .side-nav button .svg-icon {
  width: 20px !important;
  height: 20px !important;
}

body.workbench-open.process-open.sidebar-collapsed .side-nav button.active {
  color: #ff5b18 !important;
  background: #fff0e8 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.workbench-open.process-open .side-nav button.active {
  color: #ff5b18 !important;
  background: #fff0e8 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.workbench-open.process-open.sidebar-collapsed .side-nav button.active::before {
  position: absolute !important;
  left: -8px !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: #ff5b18 !important;
  content: "" !important;
}

body.workbench-open.process-open .side-nav button.active::before {
  position: absolute !important;
  left: -8px !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: #ff5b18 !important;
  content: "" !important;
}

body.workbench-open.process-open.sidebar-collapsed .side-nav button.active::after {
  display: none !important;
}

body.workbench-open.process-open .side-nav button.active::after {
  display: none !important;
}

body.workbench-open.process-open.sidebar-collapsed .sidebar-home,
body.workbench-open.process-open.sidebar-collapsed .sidebar-version {
  min-height: 44px !important;
  border: 1px solid #e5e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #4b5563 !important;
}

body.workbench-open.process-open .sidebar-home,
body.workbench-open.process-open .sidebar-version {
  min-height: 44px !important;
  border: 1px solid #e5e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #4b5563 !important;
}

body.workbench-open .process-editor {
  display: grid !important;
  grid-template-columns: clamp(332px, 21vw, 360px) minmax(560px, 1fr) clamp(310px, 20vw, 326px) !important;
  grid-template-rows: 74px minmax(0, 1fr) var(--process-timeline-height, 160px) !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  color: #1f2328 !important;
  background: #f4f5f8 !important;
}

body.workbench-open.process-open .process-editor::before {
  display: none !important;
  content: "" !important;
}

body.workbench-open .process-project-panel {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 16px 14px 12px !important;
  border-right: 1px solid #e2e6ef !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

body.workbench-open.process-open .process-project-panel {
  grid-row: 2 !important;
  margin-left: 8px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  border: 1px solid #e4e7ef !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.045) !important;
}

body.workbench-open .process-project-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  height: 44px !important;
  padding: 4px !important;
  border-radius: 10px !important;
  background: #f4f5f8 !important;
}

body.workbench-open .process-project-tabs button {
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #30343b !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body.workbench-open .process-project-tabs button.active {
  color: #ff5b18 !important;
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08) !important;
}

body.workbench-open .process-search {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  height: 44px !important;
  padding: 0 13px !important;
  border: 1px solid #dde2eb !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #9099a8 !important;
}

body.workbench-open .process-search input {
  width: 100% !important;
  height: 38px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #111827 !important;
}

body.workbench-open .process-board-block {
  min-width: 0 !important;
}

body.workbench-open .process-board-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

body.workbench-open .process-board-head h3 {
  margin: 0 !important;
  color: #20242a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

body.workbench-open .process-board-head span,
body.workbench-open .process-board-head button {
  border: 0 !important;
  background: transparent !important;
  color: #7b8494 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.workbench-open .process-flow-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.workbench-open .process-flow-card {
  display: grid !important;
  grid-template-rows: 44px auto auto !important;
  gap: 5px !important;
  min-height: 104px !important;
  padding: 7px !important;
  border: 1px solid #e2e6ef !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #20242a !important;
  text-align: left !important;
  overflow: hidden !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

body.workbench-open .process-flow-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.07) !important;
}

body.workbench-open .process-flow-card i {
  display: block !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #dfeaf2, #7ba0b4 48%, #34424c) !important;
}

body.workbench-open .process-flow-card.orange { border-color: #ff6b22 !important; }
body.workbench-open .process-flow-card.orange i { background: linear-gradient(135deg, #fee2c4, #ff7a2a 48%, #2f333a) !important; }
body.workbench-open .process-flow-card.green i { background: linear-gradient(135deg, #dcfce7, #2dd4bf 48%, #334155) !important; }
body.workbench-open .process-flow-card.pink i { background: linear-gradient(135deg, #ffe4ee, #f45c9b 48%, #31323a) !important; }
body.workbench-open .process-flow-card.blue i { background: linear-gradient(135deg, #dbeafe, #38bdf8 48%, #273041) !important; }

body.workbench-open .process-flow-card strong,
body.workbench-open .process-flow-card span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open .process-flow-card strong {
  font-size: 12px !important;
  font-weight: 950 !important;
}

body.workbench-open .process-flow-card span {
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

body.workbench-open .process-import-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body.workbench-open .process-bucket-stat {
  display: grid !important;
  gap: 2px !important;
  min-height: 64px !important;
  padding: 7px 6px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: #f5f9ff !important;
  color: #4b5565 !important;
  text-align: left !important;
}

body.workbench-open .process-bucket-stat:nth-child(2) { background: #f0fbf4 !important; }
body.workbench-open .process-bucket-stat:nth-child(3) { background: #fff0f5 !important; }
body.workbench-open .process-bucket-stat:nth-child(4) { background: #fff7e9 !important; }
body.workbench-open .process-bucket-stat.active {
  border-color: #ff6b22 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 34, 0.12) !important;
}

body.workbench-open .process-bucket-stat b {
  color: #111827 !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  font-variant-numeric: tabular-nums !important;
}

body.workbench-open .process-bucket-stat span {
  color: #27303d !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open .process-bucket-stat small {
  color: #7b8494 !important;
  font-size: 10px !important;
  font-weight: 750 !important;
}

body.workbench-open .process-import-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

body.workbench-open .process-import-actions button,
body.workbench-open .process-file-actions button,
body.workbench-open .process-inline-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border: 1px solid #e2e6ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #20242a !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.workbench-open .process-import-actions button:first-child {
  color: #ff5b18 !important;
  border-color: #ff6b22 !important;
  background: #fff7f2 !important;
}

body.workbench-open .process-file-board {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
}

body.workbench-open .process-mini-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

body.workbench-open .process-mini-tabs .tab-btn {
  min-height: 32px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #f3f5f8 !important;
  color: #596273 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.workbench-open .process-mini-tabs .tab-btn.active {
  color: #ff5b18 !important;
  background: #fff1e9 !important;
}

body.workbench-open .process-file-list {
  min-height: 0 !important;
  overflow: hidden auto !important;
  padding-right: 3px !important;
}

body.workbench-open .process-file-tools {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px 34px !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

body.workbench-open .process-file-tools select,
body.workbench-open .process-file-tools button {
  min-width: 0 !important;
  min-height: 32px !important;
  border: 1px solid #e1e5ee !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #4b5565 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.workbench-open .process-file-tools button.active {
  color: #ff5b18 !important;
  border-color: #ffb08f !important;
  background: #fff2ec !important;
}

body.workbench-open .process-file-list.grid-view {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
  gap: 8px !important;
}

body.workbench-open .process-file-list.grid-view .file-row {
  grid-template-columns: 18px minmax(0, 1fr) 28px !important;
  grid-template-rows: auto auto !important;
  min-height: 78px !important;
}

body.workbench-open .process-file-list.grid-view .source-pill {
  grid-column: 2 !important;
  justify-self: start !important;
}

body.workbench-open .process-file-list.grid-view .icon-btn {
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
}

body.workbench-open .process-file-list .file-row {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) 44px 30px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  margin-bottom: 6px !important;
  padding: 6px 7px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #f7f8fb !important;
}

body.workbench-open .process-file-list .row-title {
  color: #20242a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open .process-file-list .row-sub {
  color: #8a93a3 !important;
  font-size: 11px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open .process-file-list input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  accent-color: #ff5b18 !important;
}

body.workbench-open .process-file-list .source-pill {
  justify-self: end !important;
  padding: 3px 6px !important;
  border-radius: 5px !important;
  background: #eef2f7 !important;
  color: #596273 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

body.workbench-open .process-file-list .icon-btn {
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
}

body.workbench-open .process-file-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

body.workbench-open .process-naming-summary {
  padding: 8px !important;
  border-radius: 10px !important;
  background: #f7f8fb !important;
}

body.workbench-open .process-naming-summary .process-board-head {
  margin-bottom: 6px !important;
}

body.workbench-open .process-name-preview {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body.workbench-open .process-name-preview span {
  display: none !important;
  color: #7b8494 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.workbench-open .process-name-preview strong {
  min-width: 0 !important;
  padding: 6px 7px !important;
  border: 1px solid #e7ebf2 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #20242a !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open .process-editor-toolbar {
  grid-column: 2 / 4 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 104px minmax(170px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 12px 18px 12px 22px !important;
  border-bottom: 1px solid #e2e6ef !important;
  background: #f4f5f8 !important;
}

body.workbench-open.process-open .process-editor-toolbar {
  padding-left: 20px !important;
}

body.workbench-open .process-ratio-picker {
  position: relative !important;
  z-index: 60 !important;
  width: 112px !important;
  min-width: 0 !important;
}

body.workbench-open .process-ratio-trigger {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) 12px !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  border: 1px solid #dfe4ed !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.045) !important;
  cursor: pointer !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease !important;
}

body.workbench-open .process-ratio-trigger:hover,
body.workbench-open .process-ratio-picker.is-open .process-ratio-trigger {
  border-color: #ff8b5b !important;
  background: #fffaf7 !important;
  box-shadow: 0 10px 24px rgba(255, 91, 24, 0.12) !important;
}

body.workbench-open .process-ratio-trigger:active {
  transform: scale(0.98) !important;
}

body.workbench-open .process-ratio-icon {
  display: inline-block !important;
  justify-self: center !important;
  width: var(--ratio-icon-width, 18px) !important;
  height: var(--ratio-icon-height, 10px) !important;
  border: 2px solid #667085 !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55) !important;
}

body.workbench-open .process-ratio-current {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open .process-ratio-caret {
  color: #667085 !important;
  font-size: 12px !important;
  transform-origin: 50% 45% !important;
  transition: transform 180ms ease !important;
}

body.workbench-open .process-ratio-picker.is-open .process-ratio-caret {
  transform: rotate(180deg) !important;
}

body.workbench-open .process-ratio-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  width: 126px !important;
  padding: 7px !important;
  border: 1px solid #e4e8ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16) !important;
}

body.workbench-open .process-ratio-menu[hidden] {
  display: none !important;
}

body.workbench-open .process-ratio-menu button {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 14px !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-height: 28px !important;
  padding: 0 7px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #20242a !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease !important;
}

body.workbench-open .process-ratio-menu button:hover {
  background: #f4f6fa !important;
}

body.workbench-open .process-ratio-menu button:active {
  transform: translateY(1px) !important;
}

body.workbench-open .process-ratio-menu button.active {
  background: #fff2eb !important;
  color: #ff5b18 !important;
}

body.workbench-open .process-ratio-menu button.active .process-ratio-icon {
  border-color: #ff5b18 !important;
}

body.workbench-open .process-ratio-menu b {
  opacity: 0 !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body.workbench-open .process-ratio-menu button.active b {
  opacity: 1 !important;
}

body.workbench-open .process-title-edit {
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  margin-left: 4px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #eef1f6 !important;
  color: #4b5565 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease !important;
}

body.workbench-open .process-title-edit:hover {
  background: #fff0e9 !important;
  color: #ff5b18 !important;
}

body.workbench-open .process-title-edit:active {
  transform: scale(0.96) !important;
}

body.workbench-open .process-title-editor {
  display: grid !important;
  grid-template-columns: minmax(180px, 360px) 28px 28px !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.workbench-open .process-title-editor input {
  width: 100% !important;
  height: 34px !important;
  padding: 0 10px !important;
  border: 2px solid #ff5b18 !important;
  border-radius: 7px !important;
  outline: none !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  box-shadow: 0 0 0 4px rgba(255, 91, 24, 0.10) !important;
}

body.workbench-open .process-title-editor button {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid #e1e5ee !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #30343b !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

body.workbench-open .process-title-editor button[data-action="process-title-save"] {
  border-color: #ff5b18 !important;
  background: #ff5b18 !important;
  color: #ffffff !important;
}

body.workbench-open .process-title-block {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

body.workbench-open .process-title-block strong {
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open .process-title-block span {
  color: #4d8b5c !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body.workbench-open .process-toolbar-icons,
body.workbench-open .process-toolbar-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.workbench-open .process-toolbar-icons button {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #111827 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease !important;
}

body.workbench-open .process-toolbar-icons button:hover:not(:disabled) {
  background: #eef1f6 !important;
}

body.workbench-open .process-toolbar-icons button:active:not(:disabled),
body.workbench-open .process-soft-btn:active:not(:disabled),
body.workbench-open .process-primary-btn:active:not(:disabled),
body.workbench-open .process-danger-btn:active:not(:disabled),
body.workbench-open .process-player-strip button:active:not(:disabled),
body.workbench-open .process-timeline-player button:active:not(:disabled),
body.workbench-open .process-timeline-zoom button:active:not(:disabled) {
  transform: scale(0.97) !important;
}

body.workbench-open .process-editor button:focus-visible,
body.workbench-open .process-editor input:focus-visible,
body.workbench-open .process-editor select:focus-visible,
body.workbench-open .process-editor [role="button"]:focus-visible {
  outline: 3px solid rgba(255, 91, 24, 0.24) !important;
  outline-offset: 2px !important;
}

body.workbench-open .process-toolbar-icons button:disabled,
body.workbench-open .process-soft-btn:disabled,
body.workbench-open .process-primary-btn:disabled,
body.workbench-open .process-refresh-preview:disabled {
  cursor: not-allowed !important;
  opacity: 0.46 !important;
}

body.workbench-open .process-toolbar-icons b {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.workbench-open .process-soft-btn,
body.workbench-open .process-primary-btn,
body.workbench-open .process-danger-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body.workbench-open .process-soft-btn {
  border: 1px solid #e0e4ed !important;
  background: #ffffff !important;
  color: #111827 !important;
}

body.workbench-open .process-primary-btn {
  border: 1px solid #05070c !important;
  background: #05070c !important;
  color: #ffffff !important;
}

body.workbench-open .process-danger-btn {
  border: 1px solid #ef4444 !important;
  background: #fff1f1 !important;
  color: #dc2626 !important;
}

body.workbench-open .process-soft-btn.is-loading .svg-icon,
body.workbench-open .process-refresh-preview.is-loading .svg-icon {
  animation: process-spin 900ms linear infinite !important;
}

body.workbench-open .process-primary-btn.is-loading {
  opacity: 0.78 !important;
}

@keyframes process-spin {
  to { transform: rotate(360deg); }
}

body.workbench-open .process-stage {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-rows: 58px minmax(0, 1fr) 54px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 16px 26px 19px !important;
  overflow: hidden !important;
}

body.workbench-open .process-stage-meta {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  height: 46px !important;
  margin-top: 10px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.045) !important;
}

body.workbench-open .process-color-dot {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: #050505 !important;
}

body.workbench-open .process-ready-chip {
  margin-left: auto !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  color: #27a452 !important;
  background: #eaf8ee !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open .process-ready-chip.loading {
  color: #b45309 !important;
  background: #fff7ed !important;
}

body.workbench-open .process-preview-mode {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid #e4e8ef !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #30343b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.workbench-open .process-canvas-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 18px 0 12px !important;
  overflow: hidden !important;
}

body.workbench-open .process-canvas {
  position: relative !important;
  width: min(100%, 960px) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--process-canvas-ratio, 16 / 9) !important;
  margin: auto !important;
  border: 0 !important;
  border-radius: 9px 9px 0 0 !important;
  overflow: hidden !important;
  background: #101214 !important;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.12) !important;
  transform: translateZ(0) !important;
  transform-origin: center center !important;
  transition:
    width 300ms cubic-bezier(0.22, 1, 0.36, 1),
    height 300ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease !important;
  will-change: width, height, transform !important;
}

body.workbench-open .process-canvas.is-ratio-animating {
  transform: translateZ(0) scale(0.998) !important;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.2) !important;
}

body.workbench-open .process-canvas.is-ratio-instant {
  transition: none !important;
}

body.workbench-open .process-preview-loading {
  position: absolute !important;
  z-index: 10 !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  gap: 10px !important;
  background: rgba(5, 7, 12, 0.42) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  backdrop-filter: blur(2px) !important;
}

body.workbench-open .process-preview-loading i {
  width: 44px !important;
  height: 44px !important;
  border: 3px solid rgba(255, 255, 255, 0.35) !important;
  border-top-color: #ff6b22 !important;
  border-radius: 50% !important;
  animation: process-spin 900ms linear infinite !important;
}

body.workbench-open .process-preview-media,
body.workbench-open .process-preview-placeholder {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body.workbench-open .process-preview-placeholder {
  background:
    linear-gradient(180deg, rgba(23, 91, 129, 0.18), rgba(17, 24, 39, 0.12)),
    url("/static/assets/homepage/mountain.svg") center / cover no-repeat !important;
}

body.workbench-open .process-canvas::before {
  position: absolute !important;
  z-index: 3 !important;
  inset: 56px 62px 52px !important;
  border: 2px dashed rgba(255, 255, 255, 0.72) !important;
  border-radius: 2px !important;
  content: "" !important;
  pointer-events: none !important;
}

body.workbench-open .process-after-layer {
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: var(--process-compare, 50%) !important;
  background:
    linear-gradient(90deg, rgba(38, 31, 24, 0.42), rgba(20, 18, 16, 0.55)),
    linear-gradient(180deg, rgba(255, 121, 42, 0.16), transparent 46%, rgba(0,0,0,0.42)) !important;
  transition: left 120ms ease, opacity 160ms ease !important;
}

body.workbench-open .process-canvas.preview-original .process-after-layer,
body.workbench-open .process-canvas.preview-original .process-after-tag,
body.workbench-open .process-canvas.preview-original .process-split-line {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.workbench-open .process-canvas.preview-processed .process-after-layer {
  left: 0 !important;
}

body.workbench-open .process-canvas.preview-processed .process-before-tag,
body.workbench-open .process-canvas.preview-processed .process-split-line {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.workbench-open .process-canvas.is-pulsing::after {
  position: absolute !important;
  z-index: 9 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.28), transparent 38%) !important;
  animation: process-preview-pulse 520ms ease-out !important;
  content: "" !important;
}

@keyframes process-preview-pulse {
  0% { opacity: 0; transform: scale(0.98); }
  35% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}

body.workbench-open .process-before-tag,
body.workbench-open .process-after-tag,
body.workbench-open .process-file-badge,
body.workbench-open .process-effect-badge {
  position: absolute !important;
  z-index: 5 !important;
  padding: 6px 10px !important;
  border-radius: 5px !important;
  background: rgba(0, 0, 0, 0.78) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body.workbench-open .process-before-tag { left: 70px !important; top: 46px !important; }
body.workbench-open .process-after-tag { right: 70px !important; top: 46px !important; }
body.workbench-open .process-file-badge {
  left: 50% !important;
  bottom: 34px !important;
  transform: translateX(-50%) !important;
}

body.workbench-open .process-effect-badge {
  left: 70px !important;
  right: auto !important;
  bottom: 72px !important;
}

body.workbench-open .process-split-line {
  position: absolute !important;
  z-index: 6 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: var(--process-compare, 50%) !important;
  width: 2px !important;
  padding: 0 !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.86) !important;
  cursor: ew-resize !important;
  transition: left 120ms ease, opacity 160ms ease !important;
}

body.workbench-open .process-split-line::after {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-style: normal !important;
  transform: translate(-50%, -50%) !important;
  content: "‹›" !important;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.22) !important;
}

body.process-compare-dragging,
body.process-compare-dragging * {
  cursor: ew-resize !important;
  user-select: none !important;
}

body.process-compare-dragging .process-after-layer,
body.process-compare-dragging .process-split-line {
  transition: none !important;
}

body.workbench-open .process-split-line:hover::after,
body.workbench-open .process-split-line:focus-visible::after {
  color: #ff5b18 !important;
  box-shadow: 0 8px 22px rgba(255, 91, 24, 0.24) !important;
}

body.workbench-open .process-player-strip {
  display: grid !important;
  grid-template-columns: auto auto auto minmax(0, 1fr) minmax(120px, 180px) auto !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid #e2e6ef !important;
  border-top: 0 !important;
  border-radius: 0 0 9px 9px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08) !important;
  min-width: 0 !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

body.workbench-open .process-player-strip button {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #111827 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, opacity 160ms ease !important;
}

body.workbench-open .process-player-strip button[data-action="process-preview"],
body.workbench-open .process-player-strip button[data-action="process-fullscreen"] {
  border: 1px solid #e0e4ed !important;
  background: #ffffff !important;
  color: #111827 !important;
}

body.workbench-open .process-play-button.is-playing {
  background: #ff5b18 !important;
  color: #ffffff !important;
}

body.workbench-open .process-player-strip button:hover:not(:disabled) {
  filter: brightness(1.04) !important;
}

body.workbench-open .process-player-strip button:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

body.workbench-open .process-player-strip button.is-loading {
  animation: process-spin 900ms linear infinite !important;
}

body.workbench-open .process-player-strip .process-seek-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.workbench-open .process-preview-seek {
  flex: 0 0 120px !important;
  width: 120px !important;
  height: 4px !important;
  min-height: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ff5b18 0 calc(var(--seek, 0) * 1%), #e2e5ec calc(var(--seek, 0) * 1%) 100%) !important;
  accent-color: #ff5b18 !important;
  cursor: pointer !important;
}

body.workbench-open .process-preview-seek:disabled {
  cursor: not-allowed !important;
  opacity: 0.45 !important;
  background: #e2e5ec !important;
}

body.workbench-open .process-time-label,
body.workbench-open .process-timeline-time-label {
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

body.workbench-open .process-player-strip b {
  min-width: 0 !important;
  color: #7b8494 !important;
  font-size: 12px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open .process-volume {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  color: #596273 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.workbench-open .process-volume input {
  width: 100% !important;
  accent-color: #ff5b18 !important;
}

body.workbench-open .process-inspector {
  grid-column: 3 !important;
  grid-row: 2 !important;
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 10px 16px 10px 0 !important;
  padding: 16px 14px !important;
  border: 1px solid #e4e7ef !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.065) !important;
  overflow: hidden auto !important;
}

body.workbench-open .process-inspector-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

body.workbench-open .process-inspector-head h2 {
  margin: 0 0 3px !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

body.workbench-open .process-inspector-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 4px !important;
  border-radius: 8px !important;
  background: #f2f4f7 !important;
}

body.workbench-open .process-inspector-tabs span {
  display: grid !important;
  place-items: center !important;
  min-height: 34px !important;
  border-radius: 7px !important;
  color: #30343b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

body.workbench-open .process-inspector-tabs span.active {
  color: #ffffff !important;
  background: #ff5b18 !important;
}

body.workbench-open .process-inspector-head span {
  color: #7b8494 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.workbench-open .process-inspector-head button,
body.workbench-open .process-refresh-preview {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid #e2e6ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #30343b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open .process-inspector-section {
  min-width: 0 !important;
  padding: 11px !important;
  border: 1px solid #edf0f5 !important;
  border-radius: 10px !important;
  background: #fbfcfe !important;
}

body.workbench-open .process-inspector-section.active {
  border-color: #ffb08f !important;
  box-shadow: inset 0 0 0 1px rgba(255, 91, 24, 0.12) !important;
}

body.workbench-open details.process-inspector-section summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  list-style: none !important;
  cursor: pointer !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.workbench-open details.process-inspector-section summary::-webkit-details-marker {
  display: none !important;
}

body.workbench-open .process-section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

body.workbench-open .process-section-title h3 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.workbench-open .process-section-title span {
  color: #7b8494 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body.workbench-open .process-choice-group {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin-bottom: 8px !important;
}

body.workbench-open .process-choice-group.two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.workbench-open .process-choice {
  position: relative !important;
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 7px 6px !important;
  border: 1px solid #e4e7ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  cursor: pointer !important;
}

body.workbench-open .process-choice.active {
  border-color: #ff5b18 !important;
  background: #fff3ed !important;
}

body.workbench-open .process-choice input {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
}

body.workbench-open .process-choice span {
  display: grid !important;
  gap: 3px !important;
}

body.workbench-open .process-choice b {
  color: #1f2328 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

body.workbench-open .process-choice small {
  color: #7b8494 !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.workbench-open .process-field-grid {
  display: grid !important;
  gap: 9px !important;
  margin-top: 9px !important;
}

body.workbench-open .process-field-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.workbench-open .process-field-grid.two .process-field {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
}

body.workbench-open .process-field-grid.two .process-field input,
body.workbench-open .process-field-grid.two .process-field select {
  grid-column: 1 !important;
}

body.workbench-open .process-field,
body.workbench-open .process-range-field,
body.workbench-open .process-toggle {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 36px !important;
}

body.workbench-open .process-field span,
body.workbench-open .process-toggle span {
  color: #30343b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.workbench-open .process-toggle span {
  display: grid !important;
  gap: 2px !important;
}

body.workbench-open .process-toggle small {
  color: #8a93a3 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

body.workbench-open .process-field input,
body.workbench-open .process-field select {
  grid-column: 2 / 4 !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border: 1px solid #e1e5ee !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.workbench-open .process-directory-field input {
  cursor: pointer !important;
}

body.workbench-open .process-range-field input[type="range"] {
  grid-column: 2 !important;
  height: 4px !important;
  min-height: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: linear-gradient(90deg, #ff5b18 0 calc(var(--range) * 1%), #e4e7ee calc(var(--range) * 1%) 100%) !important;
  border-radius: 999px !important;
  accent-color: #ff5b18 !important;
}

body.workbench-open .process-range-field b {
  display: grid !important;
  place-items: center !important;
  min-width: 48px !important;
  height: 32px !important;
  border: 1px solid #e4e7ef !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open .process-toggle {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body.workbench-open .process-toggle input {
  width: 38px !important;
  height: 21px !important;
  min-height: 21px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  appearance: none !important;
  background: #c7cbd4 !important;
  transition: background 160ms ease !important;
}

body.workbench-open .process-toggle input::before {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  margin: 2px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  content: "" !important;
  transition: transform 160ms ease !important;
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.25) !important;
}

body.workbench-open .process-toggle input:checked {
  background: #ff5b18 !important;
}

body.workbench-open .process-toggle input:checked::before {
  transform: translateX(17px) !important;
}

body.workbench-open .process-inline-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

body.workbench-open .process-output-card {
  display: grid !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding: 12px !important;
  border-radius: 10px !important;
  background: #f7f8fb !important;
}

body.workbench-open .process-output-card span {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.workbench-open .process-output-card b {
  color: #111827 !important;
  font-weight: 950 !important;
}

body.workbench-open .process-refresh-preview {
  width: 100% !important;
  min-height: 44px !important;
  border-color: #ff5b18 !important;
  color: #ff5b18 !important;
}

body.workbench-open .process-timeline {
  position: relative !important;
  grid-column: 1 / 4 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-rows: 42px 82px minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 18px 8px !important;
  border-top: 1px solid #e1e5ee !important;
  background: #ffffff !important;
  box-shadow: 0 -6px 20px rgba(17, 24, 39, 0.035) !important;
  overflow: hidden !important;
}

body.workbench-open .process-timeline.is-compact {
  grid-template-rows: 42px minmax(0, 1fr) 0 !important;
}

body.workbench-open .process-timeline.is-compact .process-bottom-grid {
  display: none !important;
}

body.workbench-open .process-timeline.is-expanded {
  grid-template-rows: 42px 78px minmax(0, 1fr) !important;
}

body.workbench-open .process-timeline-resize {
  position: absolute !important;
  z-index: 20 !important;
  top: -6px !important;
  left: 50% !important;
  width: min(360px, 34vw) !important;
  height: 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  cursor: ns-resize !important;
  transform: translateX(-50%) !important;
}

body.workbench-open .process-timeline-resize::before {
  position: absolute !important;
  top: 4px !important;
  left: 50% !important;
  width: 86px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: #c9ced8 !important;
  content: "" !important;
  transform: translateX(-50%) !important;
}

body.process-timeline-resizing,
body.process-timeline-resizing * {
  cursor: ns-resize !important;
  user-select: none !important;
}

body.workbench-open .process-timeline-head {
  display: grid !important;
  grid-template-columns: minmax(300px, 1fr) auto minmax(190px, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
}

body.workbench-open .process-timeline-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  height: 100% !important;
}

body.workbench-open .process-timeline-tabs button {
  height: 100% !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: #596273 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

body.workbench-open .process-timeline-tabs button.active {
  color: #ff5b18 !important;
  border-bottom-color: #ff5b18 !important;
}

body.workbench-open .process-timeline-player,
body.workbench-open .process-timeline-zoom {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.workbench-open .process-timeline-player button {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #111827 !important;
  color: #ffffff !important;
}

body.workbench-open .process-timeline-zoom {
  justify-content: flex-end !important;
}

body.workbench-open .process-timeline-zoom i {
  width: 110px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ff5b18 0 calc(var(--zoom) * 1%), #e2e5ec calc(var(--zoom) * 1%) 100%) !important;
}

body.workbench-open .process-timeline-zoom button {
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid #e1e5ee !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #30343b !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.workbench-open .process-track {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(calc(148px * var(--process-timeline-zoom, 1)), 1fr)) 90px !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 7px 6px 7px !important;
  overflow: auto hidden !important;
}

body.workbench-open .process-track > i {
  position: absolute !important;
  z-index: 4 !important;
  top: -1px !important;
  bottom: -78px !important;
  left: 9.6% !important;
  width: 2px !important;
  background: #111827 !important;
}

body.workbench-open .process-track > i::before {
  position: absolute !important;
  top: -8px !important;
  left: 50% !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 3px !important;
  background: #111827 !important;
  transform: translateX(-50%) rotate(45deg) !important;
  content: "" !important;
}

body.workbench-open .process-track article,
body.workbench-open .process-add-task {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 2px 8px !important;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 8px 10px !important;
  border: 1px solid #e4e7ef !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

body.workbench-open .process-track article:hover,
body.workbench-open .process-add-task:hover {
  transform: translateY(-1px) !important;
  border-color: #ffb08f !important;
}

body.workbench-open .process-track article.active {
  border-color: #ff5b18 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 91, 24, 0.16) !important;
}

body.workbench-open .process-track article b {
  grid-row: 1 / 3 !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.workbench-open .process-track article strong,
body.workbench-open .process-track article span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open .process-track article strong {
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body.workbench-open .process-track article span {
  color: #7b8494 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.workbench-open .process-add-task {
  display: grid !important;
  place-items: center !important;
  border-style: dashed !important;
  color: #4b5565 !important;
  font-size: 24px !important;
  font-weight: 400 !important;
}

body.workbench-open .process-bottom-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.44fr) !important;
  gap: 12px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.workbench-open .process-bottom-grid.single {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.workbench-open .process-preview-rows,
body.workbench-open .process-job-panel {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid #edf0f5 !important;
  border-radius: 9px !important;
  background: #fbfcfe !important;
  overflow: hidden !important;
}

body.workbench-open .process-preview-rows .exports-table,
body.workbench-open .process-preview-rows table {
  min-width: 780px !important;
}

body.workbench-open .process-bottom-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 6px !important;
}

body.workbench-open .process-bottom-title h3 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body.workbench-open .process-bottom-title span {
  color: #7b8494 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.workbench-open .process-bottom-title button {
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid #e1e5ee !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #ff5b18 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open .process-preview-rows .table-wrap {
  height: calc(100% - 25px) !important;
  min-height: 0 !important;
  overflow: auto !important;
}

body.workbench-open .process-preview-rows .empty-state {
  height: calc(100% - 25px) !important;
  min-height: 46px !important;
  display: grid !important;
  place-items: center !important;
  color: #8a93a3 !important;
}

body.workbench-open .process-job-panel .panel-body {
  padding: 0 !important;
}

body.workbench-open .process-job-panel .empty-state {
  min-height: 46px !important;
  display: grid !important;
  place-items: center !important;
}

body.workbench-open .process-job-panel .job-card,
body.workbench-open .process-job-panel .log-list {
  border: 0 !important;
  background: transparent !important;
}

body.workbench-open .process-job-panel .log-list {
  max-height: 76px !important;
  overflow: auto !important;
}

body.workbench-open .process-job-panel .progress {
  height: 6px !important;
  margin-bottom: 7px !important;
  background: #e6eaf1 !important;
}

body.workbench-open .process-job-panel .progress span {
  background: #ff5b18 !important;
}

@media (max-width: 1500px) {
  body.workbench-open .process-editor {
    grid-template-columns: 340px minmax(500px, 1fr) 316px !important;
    grid-template-rows: 74px minmax(0, 1fr) var(--process-timeline-height, 160px) !important;
  }
  body.workbench-open .process-toolbar-actions .process-soft-btn:first-child {
    display: none !important;
  }
  body.workbench-open .process-toolbar-icons {
    flex: 0 0 auto !important;
    gap: 6px !important;
  }
  body.workbench-open .process-toolbar-icons button {
    width: 30px !important;
    height: 30px !important;
    font-size: 17px !important;
  }
  body.workbench-open .process-toolbar-icons b {
    font-size: 13px !important;
  }
  body.workbench-open .process-flow-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.workbench-open .process-flow-card {
    grid-template-rows: 36px auto auto !important;
    min-height: 92px !important;
  }
  body.workbench-open .process-inspector {
    margin-right: 14px !important;
  }
  body.workbench-open .process-track {
    grid-template-columns: repeat(5, minmax(calc(132px * var(--process-timeline-zoom, 1)), 1fr)) 76px !important;
    gap: 8px !important;
  }
  body.workbench-open .process-timeline {
    grid-template-rows: 42px 76px minmax(0, 1fr) !important;
  }
  body.workbench-open .process-timeline.is-compact {
    grid-template-rows: 42px minmax(0, 1fr) 0 !important;
  }
  body.workbench-open .process-track article,
  body.workbench-open .process-add-task {
    min-height: 58px !important;
  }
}

@media (max-width: 1180px) {
  body.workbench-open {
    min-width: 0 !important;
    overflow: auto !important;
  }
  body.workbench-open .process-editor {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }
  body.workbench-open .process-project-panel,
  body.workbench-open .process-editor-toolbar,
  body.workbench-open .process-stage,
  body.workbench-open .process-inspector,
  body.workbench-open .process-timeline {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  body.workbench-open .process-project-panel,
  body.workbench-open .process-inspector,
  body.workbench-open .process-timeline {
    margin: 0 !important;
    max-height: none !important;
  }
  body.workbench-open .process-canvas {
    width: 100% !important;
  }
  body.workbench-open .process-timeline {
    grid-template-rows: auto auto auto !important;
    overflow: visible !important;
  }
  body.workbench-open .process-track,
  body.workbench-open .process-bottom-grid {
    grid-template-columns: 1fr !important;
  }
}

body.auth-open {
  min-width: 0 !important;
  overflow: auto !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 91, 24, 0.10), transparent 32rem),
    radial-gradient(circle at 12% 10%, rgba(37, 99, 235, 0.08), transparent 26rem),
    linear-gradient(180deg, #fbfcff 0%, #f4f7fb 58%, #eef2f7 100%) !important;
  color: #111827 !important;
}

body.auth-open::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(115deg, rgba(255,255,255,0.70), transparent 42%),
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.025) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.018) 0 1px, transparent 1px 72px);
}

body.auth-open .app-shell {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  min-height: 100dvh !important;
}

body.auth-open .sidebar,
body.auth-open .sidebar-reveal,
body.auth-open .topbar,
body.auth-open .status-dock {
  display: none !important;
}

body.auth-open .main {
  min-height: 100dvh !important;
  padding: 0 !important;
}

body.auth-open .view {
  display: grid !important;
  min-height: 100dvh !important;
  padding: clamp(24px, 5vw, 64px) !important;
  place-items: center !important;
}

body.auth-open .toast {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #111827 !important;
  border-color: rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.12) !important;
}

.auth-page {
  width: min(100%, 720px);
}

.auth-card {
  width: min(100%, 680px);
  margin: 0 auto;
  padding: clamp(42px, 5vw, 76px) clamp(34px, 5vw, 74px);
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 42px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.88), rgba(255,255,255,0.64)),
    rgba(255, 255, 255, 0.76);
  box-shadow:
    0 36px 90px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -18px 42px rgba(148, 163, 184, 0.08);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
}

.auth-logo {
  display: grid;
  width: 84px;
  height: 84px;
  margin: 0 auto 30px;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(145deg, #ff6a1f 0%, #ff310d 100%);
  color: #fff;
  font-size: 46px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.08em;
  text-indent: -0.08em;
  box-shadow: 0 18px 42px rgba(255, 74, 18, 0.26), inset 0 1px 0 rgba(255,255,255,0.45);
}

.auth-title {
  margin: 0;
  color: #111827;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-align: center;
}

.auth-subtitle {
  margin: 16px 0 34px;
  color: #667085;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-align: center;
}

.auth-form {
  display: grid;
  gap: 22px;
}

.auth-field {
  display: grid;
  gap: 10px;
  color: #111827;
  font-size: 20px;
  font-weight: 850;
}

.auth-input-wrap {
  position: relative;
  display: grid;
  align-items: center;
}

.auth-input-icon,
.auth-password-toggle {
  position: absolute;
  z-index: 1;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #475467;
}

.auth-input-icon {
  left: 24px;
}

.auth-input-icon svg,
.auth-password-toggle svg,
.auth-tags svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-input-wrap input {
  width: 100%;
  min-height: 70px;
  padding: 0 68px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  outline: none;
  background: rgba(255,255,255,0.78);
  color: #111827;
  font: inherit;
  font-size: 22px;
  font-weight: 650;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.auth-input-wrap input::placeholder {
  color: #98a2b3;
}

.auth-input-wrap input:focus {
  border-color: rgba(255, 91, 24, 0.75);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 0 0 4px rgba(255, 91, 24, 0.12);
}

.auth-password-toggle {
  right: 22px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.auth-submit {
  min-height: 78px;
  margin-top: 8px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ff6532 0%, #ff330d 100%);
  color: #fff;
  cursor: pointer;
  font-size: 27px;
  font-weight: 950;
  letter-spacing: -0.02em;
  box-shadow: 0 18px 34px rgba(255, 73, 16, 0.24);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.auth-submit:hover {
  filter: brightness(1.03);
  box-shadow: 0 22px 42px rgba(255, 73, 16, 0.30);
  transform: translateY(-1px);
}

.auth-submit:active {
  transform: translateY(1px) scale(0.99);
}

.auth-switch {
  margin: 24px 0 26px;
  color: #667085;
  font-size: 21px;
  font-weight: 650;
  text-align: center;
}

.auth-switch button {
  border: 0;
  background: transparent;
  color: #ff4b18;
  cursor: pointer;
  font: inherit;
  font-weight: 850;
}

.auth-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.auth-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid #d6dde8;
  border-radius: 14px;
  background: rgba(255,255,255,0.62);
  color: #111827;
  font-size: 19px;
  font-weight: 850;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

@media (max-width: 720px) {
  body.auth-open .view {
    padding: 18px !important;
  }
  .auth-card {
    border-radius: 28px;
    padding: 34px 22px;
  }
  .auth-logo {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    font-size: 38px;
  }
  .auth-title {
    font-size: 30px;
  }
  .auth-subtitle {
    font-size: 17px;
    letter-spacing: 0.04em;
  }
  .auth-input-wrap input {
    min-height: 58px;
    padding: 0 54px;
    font-size: 17px;
  }
  .auth-input-icon {
    left: 17px;
  }
  .auth-password-toggle {
    right: 15px;
  }
  .auth-submit {
    min-height: 62px;
    font-size: 22px;
  }
  .auth-tags {
    grid-template-columns: 1fr;
  }
}

/* Materials library page */
body.materials-open {
  color: #111827;
  background: #f6f8fb !important;
}

body.materials-open .app-shell {
  background: #f6f8fb;
}

body.materials-open .main {
  display: grid !important;
  grid-template-rows: 78px minmax(0, 1fr) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.materials-open .status-dock {
  display: none !important;
}

body.workbench-open.materials-open .topbar {
  display: grid !important;
}

body.workbench-open.materials-open .view {
  display: block !important;
  height: calc(100dvh - 88px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.materials-open .topbar {
  height: 78px;
  padding: 12px 24px;
  border: 0;
  border-bottom: 1px solid #e8ebf1;
  border-radius: 0;
  color: #111827;
  background: rgba(246, 248, 251, 0.96);
  box-shadow: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.materials-open .topbar::before,
body.materials-open .topbar::after {
  content: none;
}

body.materials-open .crumb {
  min-width: 240px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.materials-open .crumb span {
  padding: 0;
  color: #6b7280;
  background: transparent;
  border: 0;
}

body.materials-open .crumb b {
  color: #c3c8d1;
}

body.materials-open .crumb h1 {
  color: #111827;
  font-size: 20px;
  font-weight: 950;
}

body.materials-open .top-actions {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto auto auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
}

body.materials-open .search-box {
  width: 100%;
  height: 50px;
  border: 1px solid #dfe4ec;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.04);
}

body.materials-open .search-box span::before {
  color: #798293;
}

body.materials-open .search-box input {
  color: #111827;
  font-size: 15px;
  font-weight: 760;
  padding-right: 16px;
}

body.materials-open .search-box input::placeholder {
  color: #8b94a3;
}

body.materials-open .keycap {
  display: none;
}

.material-helper-pill,
.material-top-button,
.material-top-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  min-width: 0;
  padding: 0 20px;
  border-radius: 9px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 950;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.material-helper-pill {
  border: 1px solid #dff0e6;
  color: #188344;
  background: #edf9f1;
}

.material-helper-pill i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.10);
}

.material-top-button {
  border: 1px solid #dfe4ec;
  color: #111827;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.04);
}

.material-top-primary {
  border: 1px solid #ff4b14;
  color: #ffffff;
  background: linear-gradient(180deg, #ff5c1b, #ff3d08);
  box-shadow: 0 14px 26px rgba(255, 72, 18, 0.24);
}

.material-top-button:hover,
.material-top-primary:hover,
.material-helper-pill:hover {
  transform: translateY(-1px);
}

.materials-page {
  display: grid;
  grid-template-columns: 326px minmax(520px, 1fr) 340px;
  grid-template-rows: minmax(0, 1fr) 76px;
  gap: 14px;
  height: 100%;
  min-height: 0;
  padding: 14px 18px 0;
  color: #111827;
  background: #f6f8fb;
  overflow: hidden;
}

.materials-page input,
.materials-page button {
  font: inherit;
}

.materials-import-panel,
.materials-library-panel,
.materials-detail-panel > section {
  min-width: 0;
  border: 1px solid #e6e9f0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.04);
}

.materials-import-panel {
  grid-row: 1;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 20px 18px 14px;
  overflow: hidden auto;
}

.material-panel-title h2,
.material-library-head h2,
.material-detail-card h2,
.material-batch-card h2 {
  margin: 0;
  color: #111827;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 950;
}

.material-import-tabs,
.material-filter-tabs {
  display: flex;
  align-items: center;
  gap: 14px;
}

.material-import-tabs button {
  position: relative;
  min-height: 38px;
  padding: 0 9px;
  border: 0;
  color: #111827;
  background: transparent;
  font-size: 15px;
  font-weight: 950;
}

.material-import-tabs button.active {
  color: #ff4b14;
}

.material-import-tabs button.active::after {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: -2px;
  height: 3px;
  border-radius: 99px;
  background: #ff4b14;
  content: "";
}

.material-dropzone {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 256px;
  padding: 24px;
  border: 1px dashed #c8ced9;
  border-radius: 10px;
  color: #303744;
  background: #fbfcfe;
}

.material-upload-cloud {
  display: grid;
  place-items: center;
  width: 66px;
  height: 52px;
  color: #3f4756;
}

.material-upload-cloud .svg-icon {
  width: 46px;
  height: 46px;
}

.material-dropzone strong {
  font-size: 17px;
  font-weight: 900;
}

.material-dropzone small,
.material-source-title {
  color: #6b7280;
  font-size: 13px;
  font-weight: 760;
}

.material-source-actions {
  display: grid;
  gap: 10px;
}

.material-source-actions button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid #e3e7ef;
  border-radius: 9px;
  color: #1f2937;
  background: #ffffff;
  font-size: 14px;
  font-weight: 900;
}

.material-source-actions button span {
  min-width: 0;
}

.material-source-actions button i {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 999px;
  background: transparent;
}

.material-source-actions button.active {
  border-color: #ff5b18;
  color: #111827;
  background: #fff8f4;
  box-shadow: inset 0 0 0 1px rgba(255, 91, 24, 0.10);
}

.material-source-actions button.active i {
  background: #ff4b14;
}

.material-source-filtered {
  margin-top: -2px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.material-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.material-stat-card {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 110px;
  padding: 12px 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #111827;
  background: #f3f7ff;
}

.material-stat-card.green { background: #edf9f2; color: #047857; }
.material-stat-card.purple { background: #f3edff; color: #6d28d9; }
.material-stat-card.orange { background: #fff3eb; color: #ea580c; }

.material-stat-card.active {
  border-color: #ff5b18;
  box-shadow: inset 0 0 0 1px rgba(255, 91, 24, 0.12);
}

.material-stat-card span {
  font-size: 13px;
  font-weight: 900;
}

.material-stat-card strong {
  color: #111827;
  font-size: 22px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.material-stat-card i {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: currentColor;
  opacity: 0.86;
}

.materials-library-panel {
  grid-row: 1;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  height: 100%;
  padding: 18px 20px 8px;
  overflow: hidden;
}

.material-library-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.material-filter-tabs button {
  min-height: 38px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  color: #303744;
  background: #f3f4f6;
  font-size: 14px;
  font-weight: 900;
}

.material-filter-tabs button.active {
  color: #ff4b14;
  background: #fff0e9;
}

.material-view-switch {
  display: inline-flex;
  gap: 7px;
  padding: 4px;
  border-radius: 8px;
  background: #f3f4f6;
}

.material-view-switch button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  color: #4b5563;
  background: transparent;
  font-size: 19px;
}

.material-view-switch button.active {
  color: #ff4b14;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
}

.material-library-meta {
  display: flex;
  gap: 14px;
  color: #7b8494;
  font-size: 12px;
  font-weight: 800;
}

.material-folder-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 42px;
}

.material-folder-label {
  color: #6b7280;
  font-size: 13px;
  font-weight: 850;
}

.material-folder-chips {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.material-folder-chips::-webkit-scrollbar {
  display: none;
}

.material-folder-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  max-width: 180px;
  padding: 0 14px;
  border: 1px solid #e1e6ee;
  border-radius: 7px;
  color: #4b5563;
  background: #ffffff;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}

.material-folder-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.material-folder-chip b {
  color: #7b8494;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.material-folder-chip.active {
  border-color: #ff5b18;
  color: #ff4b14;
  background: #fff5ef;
  box-shadow: inset 0 0 0 1px rgba(255, 91, 24, 0.10);
}

.material-folder-chip .svg-icon {
  width: 16px;
  height: 16px;
}

.material-folder-tools {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.material-folder-tools > button {
  height: 36px;
  padding: 0 13px;
  border: 1px solid #e1e6ee;
  border-radius: 7px;
  color: #111827;
  background: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.material-folder-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4b5563;
  font-size: 12px;
  font-weight: 850;
}

.material-folder-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.material-folder-toggle i {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #ffd8c8;
}

.material-folder-toggle i::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.18);
  transition: transform 160ms ease;
  content: "";
}

.material-folder-toggle input:checked + i {
  background: #ff5b18;
}

.material-folder-toggle input:checked + i::after {
  transform: translateX(16px);
}

.material-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  height: 100%;
  min-height: 0;
  padding: 6px 2px 10px;
  overflow: hidden auto;
}

.material-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-self: start;
  min-width: 0;
  border: 1px solid #e5e8ef;
  border-radius: 9px;
  background: #ffffff;
  overflow: hidden;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.material-card:hover,
.material-list-row:hover {
  transform: translateY(-1px);
  border-color: #d7dde7;
  box-shadow: 0 12px 26px rgba(17, 24, 39, 0.08);
}

.material-card.active,
.material-list-row.active {
  border-color: #ff5b18;
  box-shadow: inset 0 0 0 1px #ff5b18;
}

.material-check {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.material-check input {
  position: absolute;
  opacity: 0;
}

.material-check span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #b9c0cc;
  border-radius: 6px;
  background: rgba(255,255,255,0.92);
}

.material-check input:checked + span {
  border-color: #ff5b18;
  background: #ff5b18;
}

.material-check input:checked + span::after {
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
  content: "✓";
}

.material-card-delete,
.material-row-delete {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 75, 75, 0.44);
  border-radius: 7px;
  color: #ef1f1f;
  background: rgba(255, 255, 255, 0.94);
  opacity: 0;
  transition: opacity 160ms ease, background 160ms ease, transform 160ms ease;
}

.material-card-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
}

.material-card:hover .material-card-delete,
.material-card:focus-within .material-card-delete,
.material-list-row:hover .material-row-delete,
.material-list-row:focus-within .material-row-delete {
  opacity: 1;
}

.material-card-delete:hover,
.material-row-delete:hover {
  color: #ffffff;
  background: #ff4b4b;
  transform: translateY(-1px);
}

.material-card-delete .svg-icon,
.material-row-delete .svg-icon {
  width: 15px;
  height: 15px;
}

.material-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #d8e7ef, #8fb3c3 48%, #354c5b);
}

.material-thumb.large {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

.material-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 6px;
  border-radius: 5px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.78);
  font-size: 12px;
  font-weight: 900;
}

.material-play-mark {
  position: absolute;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(255,255,255,0.88);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(0,0,0,0.18);
  font-size: 22px;
  transition: transform 160ms ease, background 160ms ease;
}

.material-play-mark:hover {
  background: rgba(255, 91, 24, 0.78);
  transform: scale(1.04);
}

.material-play-mark .svg-icon {
  width: 24px;
  height: 24px;
  transform: translateX(1px);
}

.material-audio-thumb {
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  gap: 5px;
  padding: 0 18px;
  background: linear-gradient(135deg, #31156a, #0a1720);
}

.material-audio-thumb::before {
  position: absolute;
  left: 48px;
  right: 18px;
  top: 50%;
  height: 44px;
  content: "";
  background: linear-gradient(90deg, #7d42ff, #23e3c4 52%, #19a8ff);
  -webkit-mask:
    linear-gradient(#000 0 0) center / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 9px);
  mask:
    linear-gradient(#000 0 0) center / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 9px);
  opacity: 0.9;
  transform: translateY(-50%);
}

.material-audio-thumb .material-note {
  position: absolute;
  left: 16px;
  top: 13px;
  color: #28e5bd;
  font-size: 24px;
  font-weight: 950;
}

.material-audio-thumb i {
  display: block;
  height: 32%;
  min-height: 14px;
  border-radius: 99px;
  background: linear-gradient(180deg, #28e5bd, #20a7ff);
  opacity: 0.55;
}

.material-audio-thumb i:nth-child(odd) { height: 54%; }
.material-audio-thumb i:nth-child(3n) { height: 74%; }

.material-mask-thumb {
  background-color: #f7f7f7;
  background-image:
    linear-gradient(45deg, #d9d9d9 25%, transparent 25%),
    linear-gradient(-45deg, #d9d9d9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d9d9d9 75%),
    linear-gradient(-45deg, transparent 75%, #d9d9d9 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.material-mask-thumb span {
  width: 76%;
  height: 52%;
  border: 8px solid #111;
  border-radius: 3px;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.1));
}

.material-mask-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.material-file-thumb {
  background: linear-gradient(135deg, #eef2f7, #d9e1ec);
}

.material-file-thumb b {
  color: #4b5563;
  font-size: 22px;
  font-weight: 950;
}

.material-card-body {
  display: grid;
  gap: 8px;
  min-height: 82px;
  padding: 10px 12px 12px;
}

.material-card-body strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.material-card-meta b {
  color: #6b7280;
  font-weight: 800;
}

.material-folder-tag {
  justify-self: start;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 5px;
  color: #ff4b14;
  background: #fff0e9;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-list {
  display: grid;
  align-content: start;
  gap: 8px;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden auto;
}

.material-list-row {
  display: grid;
  grid-template-columns: 28px 84px minmax(180px, 1fr) 74px 64px 78px 110px 32px;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 8px 12px 8px 6px;
  border: 1px solid #e6e9f0;
  border-radius: 9px;
  background: #ffffff;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.material-list-row .material-check {
  position: relative;
  top: auto;
  left: auto;
}

.material-list-row .material-thumb {
  width: 84px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
}

.material-list-row strong {
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-list-row span,
.material-list-row b,
.material-list-row .material-folder-tag {
  color: #6b7280;
  font-size: 12px;
  font-weight: 850;
}

.material-list-row .material-folder-tag {
  color: #ff4b14;
  background: #fff0e9;
}

.material-empty-state,
.material-detail-empty {
  display: grid;
  place-items: center;
  gap: 12px;
  height: 100%;
  min-height: 360px;
  padding: 28px;
  color: #6b7280;
  text-align: center;
}

.material-empty-state strong,
.material-detail-empty strong {
  color: #111827;
  font-size: 17px;
  font-weight: 950;
}

.material-empty-state p,
.material-detail-empty p {
  max-width: 360px;
  margin: 0;
  line-height: 1.6;
}

.material-empty-state button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #ff5b18;
  border-radius: 8px;
  color: #ff4b14;
  background: #fff3ed;
  font-weight: 950;
}

.materials-detail-panel {
  grid-row: 1;
  display: grid;
  grid-template-rows: minmax(0, auto) auto;
  align-content: start;
  gap: 14px;
  min-width: 0;
  overflow: hidden auto;
}

.material-detail-card,
.material-batch-card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.material-detail-card h3 {
  margin: 0;
  overflow: hidden;
  color: #111827;
  font-size: 18px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-detail-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.material-detail-list div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.material-detail-list dt {
  color: #6b7280;
  font-size: 13px;
  font-weight: 850;
}

.material-detail-list dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.material-detail-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid #e1e5ee;
  border-radius: 8px;
  color: #111827;
  background: #ffffff;
  font-weight: 950;
}

.material-detail-actions button.danger {
  color: #ef1f1f;
  border-color: #ff4b4b;
  background: #fff9f9;
}

.material-batch-card label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  color: #303744;
  font-size: 14px;
  font-weight: 850;
}

.material-batch-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #ff5b18;
}

.material-batch-card label::after {
  justify-self: end;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #ff5b18;
  content: "";
  box-shadow: inset 20px 0 0 rgba(255,255,255,0.92);
}

.material-batch-card label:has(input:checked)::after {
  box-shadow: inset -20px 0 0 rgba(255,255,255,0.92);
}

.material-batch-card label:has(input:disabled)::after {
  background: #d3d8e1;
}

.material-batch-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  margin-top: 2px;
  border: 1px solid #ff4b4b;
  border-radius: 8px;
  color: #ef1f1f;
  background: #fff9f9;
  font-size: 14px;
  font-weight: 950;
}

.material-batch-delete:disabled {
  color: #9ca3af;
  border-color: #e5e7eb;
  background: #f9fafb;
}

.material-batch-delete .svg-icon {
  width: 16px;
  height: 16px;
}

.material-bottom-bar {
  grid-column: 1 / 4;
  grid-row: 2;
  display: grid;
  grid-template-columns: auto repeat(4, auto) minmax(260px, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  height: 76px;
  padding: 11px 16px 11px 20px;
  border: 1px solid #e6e9f0;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #ffffff;
  box-shadow: 0 -8px 24px rgba(17, 24, 39, 0.04);
}

.material-bottom-bar strong {
  color: #111827;
  font-size: 16px;
  font-weight: 950;
  white-space: nowrap;
}

.material-bottom-bar strong b {
  margin: 0 5px;
  font-size: 18px;
}

.material-bottom-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 9px;
  font-weight: 950;
  white-space: nowrap;
}

.material-bottom-chip.blue { color: #2563eb; background: #eff6ff; }
.material-bottom-chip.green { color: #047857; background: #eefaf2; }
.material-bottom-chip.purple { color: #6d28d9; background: #f3edff; }
.material-bottom-chip.orange { color: #ea580c; background: #fff3eb; }

.material-bottom-actions {
  justify-self: end;
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(190px, auto) minmax(220px, auto);
  gap: 14px;
}

.material-bottom-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid #ff5b18;
  border-radius: 9px;
  color: #ff4b14;
  background: #ffffff;
  font-size: 15px;
  font-weight: 950;
}

.material-bottom-actions button.primary {
  color: #ffffff;
  background: linear-gradient(180deg, #ff5c1b, #ff3d08);
  box-shadow: 0 12px 26px rgba(255, 72, 18, 0.22);
}

.material-bottom-actions button.danger {
  color: #ef1f1f;
  border-color: #ff6b5f;
  background: #fffafa;
  box-shadow: none;
}

.material-bottom-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.material-player-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(17, 24, 39, 0.66);
  backdrop-filter: blur(10px);
}

.material-player-dialog {
  width: min(980px, 92vw);
  max-height: 88vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: 10px;
  background: #0b1018;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
}

.material-player-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  padding: 0 14px 0 18px;
  color: #ffffff;
}

.material-player-dialog header strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-player-dialog header small {
  margin-left: auto;
  color: rgba(255,255,255,0.66);
  font-size: 12px;
  white-space: nowrap;
}

.material-player-dialog header button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: #ffffff;
  background: rgba(255,255,255,0.08);
  font-size: 24px;
  line-height: 1;
}

.material-player-dialog video {
  width: 100%;
  max-height: calc(88vh - 54px);
  aspect-ratio: 16 / 9;
  background: #000000;
  object-fit: contain;
}

.frame-audio-source-dialog img {
  display: block;
  width: 100%;
  max-height: calc(88vh - 54px);
  object-fit: contain;
  background: #05070b;
}

.frame-audio-source-unavailable {
  display: grid;
  gap: 14px;
  min-height: 320px;
  place-items: center;
  padding: 32px;
  color: #e5e7eb;
  text-align: center;
}

.frame-audio-source-unavailable .module-thumb {
  width: 160px;
  height: 100px;
}

@media (max-width: 1500px) {
  .materials-page {
    grid-template-columns: 320px minmax(460px, 1fr) 320px;
  }

  .material-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  body.materials-open .top-actions {
    grid-template-columns: minmax(260px, 1fr) auto auto auto auto;
    gap: 10px;
  }

  .material-helper-pill span {
    display: none;
  }
}

@media (max-width: 1180px) {
  body.materials-open {
    overflow: auto !important;
  }

  body.materials-open .topbar {
    height: auto;
    min-height: 78px;
  }

  body.workbench-open.materials-open .view {
    height: auto !important;
    overflow: visible !important;
  }

  body.materials-open .top-actions {
    grid-template-columns: 1fr 1fr;
  }

  .materials-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .material-grid,
  .material-list,
  .material-empty-state {
    height: auto;
    overflow: visible;
  }

  .materials-import-panel,
  .materials-library-panel,
  .materials-detail-panel,
  .material-bottom-bar {
    grid-column: 1;
    grid-row: auto;
  }

  .materials-detail-panel {
    overflow: visible;
  }

  .material-bottom-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    grid-template-columns: 1fr;
    height: auto;
  }

  .material-bottom-actions {
    justify-self: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .material-folder-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .material-folder-tools {
    justify-content: space-between;
  }
}

@media (max-width: 760px) {
  .material-grid,
  .material-stat-grid,
  .material-library-head,
  .material-bottom-actions,
  body.materials-open .top-actions {
    grid-template-columns: 1fr;
  }

  .material-filter-tabs {
    flex-wrap: wrap;
  }

  .material-list-row {
    grid-template-columns: 28px 74px minmax(0, 1fr) 32px;
  }

  .material-list-row span,
  .material-list-row b,
  .material-list-row .material-folder-tag {
    display: none;
  }
}

body.auth-open .app-shell {
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

body.auth-open .sidebar,
body.auth-open .sidebar.glass-panel,
body.auth-open .sidebar-reveal,
body.auth-open .topbar,
body.auth-open .status-dock {
  display: none !important;
  visibility: hidden !important;
}

body.workbench-open.auth-open .topbar,
body.workbench-open.auth-open.materials-open .topbar,
body.workbench-open.auth-open .status-dock,
body.workbench-open.auth-open.materials-open .status-dock {
  display: none !important;
  visibility: hidden !important;
}

body.auth-open .main,
body.auth-open .view {
  width: 100% !important;
  max-width: none !important;
}

/* Batch rename light workbench */
body.rename-open {
  --rename-accent: #ff4f0a;
  --rename-accent-2: #ff6a1a;
  --rename-text: #111827;
  --rename-muted: #6b7280;
  --rename-line: #e5e7eb;
  --rename-soft: #f7f8fa;
  --rename-card: #ffffff;
  height: 100dvh;
  overflow: hidden;
  color: var(--rename-text);
  background: var(--rename-soft) !important;
}

body.rename-open::before,
body.rename-open::after,
body.rename-open .app-shell::before,
body.rename-open .glass-panel::before,
body.rename-open .glass-bar::before,
body.rename-open .panel::before,
body.rename-open .glass-panel::after,
body.rename-open .glass-bar::after,
body.rename-open .panel::after {
  display: none !important;
}

body.rename-open .app-shell {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "sidebar main" !important;
  gap: 0 !important;
  height: 100dvh;
  padding: 0 !important;
  overflow: hidden;
  background: var(--rename-soft);
}

body.rename-open .status-dock,
body.rename-open .sidebar-storage,
body.rename-open .sidebar-version,
body.rename-open .sidebar-home,
body.rename-open .traffic,
body.rename-open .nav-label,
body.rename-open .sidebar-controls,
body.rename-open .brand-card > div:not(.sidebar-controls) {
  display: none !important;
}

body.rename-open .sidebar {
  grid-area: sidebar;
  display: grid;
  grid-template-rows: 86px minmax(0, 1fr);
  height: 100dvh !important;
  min-height: 0;
  padding: 18px 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--rename-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.rename-open .brand-card {
  display: grid;
  place-items: start center;
  min-height: 58px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.rename-open .brand-mark {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #ff6a1a, #fb4304);
  box-shadow: 0 10px 24px rgba(255, 79, 10, 0.26);
  font-size: 30px;
  font-weight: 950;
}

body.rename-open .side-nav {
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 8px 0;
}

body.rename-open .side-nav button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 5px;
  min-height: 54px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 8px 8px 0 !important;
  color: #1f2937;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 850;
  transform: none;
}

body.rename-open .side-nav button::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  content: "";
  background: transparent;
}

body.rename-open .side-nav button .nav-symbol,
body.rename-open .side-nav button .svg-icon,
body.rename-open .side-nav button .svg-icon svg {
  width: 24px;
  height: 24px;
}

body.rename-open .side-nav button.active {
  color: var(--rename-accent) !important;
  background: linear-gradient(90deg, rgba(255,79,10,0.13), rgba(255,79,10,0.05)) !important;
}

body.rename-open .side-nav button.active::before {
  background: var(--rename-accent);
}

body.rename-open .main {
  grid-area: main;
  display: grid;
  grid-template-rows: 74px minmax(0, 1fr);
  min-height: 0;
  gap: 0;
  padding: 0 !important;
  background: var(--rename-soft);
}

body.rename-open .topbar {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  height: 74px;
  min-height: 74px;
  padding: 0 30px 0 36px;
  border: 0 !important;
  border-bottom: 1px solid var(--rename-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.rename-open .crumb {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--rename-muted);
  background: transparent;
  box-shadow: none;
}

body.rename-open .crumb h1 {
  color: var(--rename-text);
  font-size: 17px;
  font-weight: 900;
}

body.rename-open .crumb b {
  color: #9ca3af;
}

body.rename-open .top-actions {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) 150px 156px 156px 178px;
  align-items: center;
  gap: 28px;
  width: 100%;
}

body.rename-open input,
body.rename-open select,
body.rename-open textarea {
  color: #111827;
  border-color: #dfe5ee;
  background: #fff;
  box-shadow: none;
}

body.rename-open input::placeholder,
body.rename-open textarea::placeholder {
  color: #9ca3af;
}

body.rename-open button {
  color: inherit;
}

body.rename-open .search-box,
body.rename-open .top-pill,
body.rename-open .rename-save-chip,
body.rename-open .rename-top-primary {
  height: 44px !important;
  min-height: 44px;
  border-radius: 8px !important;
  font-size: 14px;
}

body.rename-open .search-box {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid #dfe5ee !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.rename-open .search-box input {
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
}

body.rename-open .search-box span::before {
  border-color: #111827;
}

body.rename-open .keycap,
body.rename-open .language-toggle,
body.rename-open .admin-chip {
  display: none !important;
}

body.rename-open .rename-save-chip,
body.rename-open .top-pill,
body.rename-open .rename-top-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #dfe5ee;
  background: #fff;
  box-shadow: none;
  font-weight: 850;
}

body.rename-open .rename-save-chip {
  color: #16a34a;
  border-color: transparent;
  background: #eaf8ef;
}

body.rename-open .rename-top-primary {
  color: #fff;
  border-color: var(--rename-accent);
  background: linear-gradient(180deg, #ff681d, #fb4304);
  box-shadow: 0 12px 24px rgba(255, 79, 10, 0.25);
}

body.rename-open .rename-top-primary:disabled {
  opacity: 0.62;
  box-shadow: none;
}

body.rename-open .view {
  height: calc(100dvh - 74px);
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.rename-workbench {
  display: grid;
  grid-template-columns:
    minmax(320px, calc(var(--rename-left, 28%) - 4px))
    6px
    minmax(430px, calc(var(--rename-middle, 39%) - 4px))
    6px
    minmax(340px, calc(var(--rename-right, 33%) - 4px));
  grid-template-rows: minmax(0, 1fr) 150px;
  min-height: 0;
  height: 100%;
  background: #fff;
}

.rename-import-pane,
.rename-rule-pane,
.rename-preview-pane {
  min-width: 0;
  min-height: 0;
  padding: 28px 28px 20px;
  overflow: auto;
  background: #fff;
}

.rename-rule-pane {
  position: relative;
}

.rename-import-pane,
.rename-rule-pane {
  border-right: 0;
}

.rename-pane-resizer {
  position: relative;
  z-index: 5;
  min-width: 6px;
  min-height: 0;
  border-inline: 1px solid var(--rename-line);
  background: #fff;
  cursor: col-resize;
  touch-action: none;
}

.rename-pane-resizer::before {
  position: absolute;
  inset: 60px 1px 60px;
  border-radius: 999px;
  content: "";
  background: transparent;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.rename-pane-resizer:hover::before,
.rename-pane-resizer:focus-visible::before,
body.rename-pane-resizing .rename-pane-resizer::before {
  background: #aeb8c6;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08);
}

body.rename-pane-resizing,
body.rename-preview-column-resizing {
  cursor: col-resize;
  user-select: none;
}

.rename-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  margin-bottom: 22px;
}

.rename-pane-head h2 {
  margin: 0;
  color: var(--rename-text);
  font-size: 21px;
  font-weight: 950;
}

.rename-pane-head button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  color: var(--rename-muted);
  background: transparent;
  font-weight: 800;
}

.rename-import-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rename-import-actions button {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 98px;
  padding: 12px 8px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-weight: 900;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease;
}

.rename-import-actions button .svg-icon {
  width: 26px;
  height: 26px;
}

.rename-import-actions button.active,
.rename-import-actions button:hover {
  color: var(--rename-accent);
  border-color: var(--rename-accent);
  background: #fff8f4;
  transform: translateY(-1px);
}

.rename-path-row,
.rename-output-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 10px;
  margin-top: 22px;
}

.rename-path-row input,
.rename-output-grid input {
  min-height: 46px;
  border-radius: 8px;
}

.rename-path-row button,
.rename-output-grid button {
  display: grid;
  place-items: center;
  width: 46px;
  min-height: 46px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
}

.rename-import-meta,
.rename-list-foot,
.rename-preview-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  color: var(--rename-muted);
  font-weight: 750;
}

.rename-import-meta button,
.rename-list-foot button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  color: var(--rename-muted);
  background: transparent;
  font-weight: 850;
}

.rename-list-foot button {
  color: var(--rename-accent);
}

.rename-file-list {
  margin-top: 18px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.rename-file-list-head,
.rename-file-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 64px 72px;
  align-items: center;
  gap: 10px;
}

.rename-file-list-head {
  min-height: 42px;
  padding: 0 12px;
  border-bottom: 1px solid #eef1f5;
  color: #4b5563;
  background: #fbfcfe;
  font-size: 13px;
  font-weight: 900;
}

.rename-file-row {
  min-height: 52px;
  padding: 0 12px;
  border-bottom: 1px solid #eef1f5;
  color: #111827;
}

.rename-file-row:last-child {
  border-bottom: 0;
}

.rename-file-row input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  accent-color: var(--rename-accent);
}

.rename-file-kind {
  display: none;
}

.rename-file-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.rename-file-row em,
.rename-file-row small {
  color: #374151;
  font-style: normal;
  text-align: right;
  white-space: nowrap;
}

.rename-file-more,
.rename-empty-list,
.rename-preview-empty {
  min-height: 56px;
  padding: 18px;
  color: #9ca3af;
  font-weight: 800;
}

.rename-mode-switch {
  margin-bottom: 22px;
}

.rename-mode-switch legend {
  display: none;
}

.rename-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  overflow: hidden;
  background: #f9fafb;
}

.rename-mode-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.rename-mode-option input {
  display: none;
}

.rename-mode-option > span {
  grid-column: 1 / -1;
}

.rename-mode-option strong {
  margin: 0;
  text-align: center;
  font-size: 14px;
}

.rename-mode-option small {
  display: none;
}

.rename-mode-option.active {
  color: var(--rename-accent);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--rename-accent);
}

.rename-rule-builder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  margin-bottom: 24px;
}

.rename-rule-chip,
.rename-rule-add {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-weight: 900;
}

.rename-rule-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.rename-rule-chip-main {
  min-height: 36px;
  padding: 0 28px 0 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: inherit;
}

.rename-rule-chip-main:focus {
  outline: none;
}

.rename-rule-chip-main:focus-visible {
  outline: 2px solid rgba(255, 90, 31, 0.32);
  outline-offset: -2px;
  border-radius: 6px;
}

.rename-rule-chip-delete {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border: 1px solid #ffd2c2;
  border-radius: 999px;
  background: #fff;
  color: #ff5a1f;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(255, 90, 31, 0.14);
  cursor: pointer;
}

.rename-rule-chip-delete:hover,
.rename-rule-chip-delete:focus-visible {
  border-color: #ff5a1f;
  background: #ff5a1f;
  color: #fff;
}

.rename-rule-chip.active,
.rename-rule-chip:hover {
  border-color: var(--rename-accent);
  color: var(--rename-accent);
  background: #fff7f2;
}

.rename-rule-chip.dragging {
  opacity: 0.72;
  transform: scale(0.98);
  box-shadow: 0 10px 22px rgba(255, 90, 31, 0.18);
}

body.rename-token-sorting,
body.rename-token-sorting * {
  cursor: grabbing !important;
}

.rename-rule-chip.tone-text {
  color: #2563eb;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.rename-rule-chip.tone-date {
  color: #16a34a;
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.rename-rule-chip.tone-sequence {
  color: var(--rename-accent);
  border-color: #fed7aa;
  background: #fff7ed;
}

.rename-rule-add {
  width: 36px;
  padding: 0;
  color: #6b7280;
}

.rename-elements {
  margin-bottom: 24px;
}

.rename-elements h3,
.rename-output-settings h3,
.rename-section-title h3 {
  margin: 0 0 14px;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.rename-elements h3 small {
  margin-left: 6px;
  color: var(--rename-muted);
  font-size: 13px;
  font-weight: 750;
}

.rename-element-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.rename-element-button {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 82px;
  padding: 10px 6px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-weight: 900;
}

.rename-element-button b {
  font-size: 20px;
}

.rename-element-button:hover {
  color: var(--rename-accent);
  border-color: var(--rename-accent);
  background: #fff8f4;
}

.rename-current-settings {
  margin-bottom: 22px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.rename-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #eef1f5;
}

.rename-section-title h3 {
  margin: 0;
}

.rename-section-title div {
  display: flex;
  gap: 6px;
}

.rename-section-title button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border: 1px solid #dde3ec;
  border-radius: 7px;
  background: #fff;
}

.rename-current-settings .subsection,
.rename-current-settings.original .subsection {
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.rename-current-settings .subsection h3 {
  margin: 0 0 12px;
  color: #111827;
  font-size: 15px;
}

.rename-current-settings .field,
.rename-current-settings .mini-field,
.rename-output-settings label {
  display: grid;
  gap: 7px;
  color: #4b5563;
  font-weight: 850;
}

.rename-current-settings .form-grid,
.rename-current-settings .form-grid.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rename-current-settings .expression {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  color: #111827;
  background: #f9fafb;
}

.rename-current-settings.original {
  border: 0;
  background: transparent;
  overflow: visible;
}

.rename-current-settings.original .subsection {
  padding: 0;
}

.rename-original-editor {
  display: grid;
  gap: 14px;
}

.rename-original-note {
  margin: -2px 0 2px;
  color: #4b5563;
  font-size: 14px;
  font-weight: 750;
}

.rename-original-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
}

.rename-original-section h3,
.rename-template-panel h3 {
  margin: 0;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.rename-original-section .form-grid,
.rename-original-section .form-grid.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rename-original-section .form-grid.compact {
  align-items: end;
}

.rename-original-section .field span,
.rename-original-section .mini-field span,
.rename-template-panel span {
  color: #374151;
  font-size: 13px;
  font-weight: 850;
}

.rename-original-section input,
.rename-original-section select,
.rename-template-panel input,
.rename-template-panel select {
  min-height: 42px;
  border-radius: 8px;
  font-weight: 750;
}

.rename-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  color: #374151;
  background: #fbfcfe;
  font-size: 13px;
  font-weight: 850;
}

.rename-inline-check input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  accent-color: var(--rename-accent);
}

.mod-token-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mod-token-head .mini-field {
  min-width: 164px;
}

.rename-dynamic-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rename-dynamic-actions button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-weight: 900;
}

.rename-dynamic-actions button:hover {
  color: var(--rename-accent);
  border-color: var(--rename-accent);
  background: #fff8f4;
}

.rename-dynamic-actions b,
.rename-dynamic-actions .svg-icon {
  justify-self: center;
  font-size: 15px;
}

.rename-token-format {
  padding: 10px 12px;
  border: 1px solid #eef1f5;
  border-radius: 8px;
  color: #6b7280;
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rename-original-preview {
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fbfcfe;
}

.rename-original-preview span {
  color: #4b5563;
  font-size: 13px;
  font-weight: 850;
}

.rename-original-preview code {
  color: #111827;
  font-size: 13px;
  font-weight: 850;
  white-space: normal;
  word-break: break-word;
}

.rename-original-guide {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  color: #4b5563;
  background: #fbfcfe;
  font-size: 13px;
  font-weight: 850;
}

.rename-original-guide span {
  color: #111827;
  font-weight: 950;
}

.rename-original-guide b {
  color: var(--rename-accent);
}

.rename-original-guide i {
  color: #9ca3af;
  font-style: normal;
}

.rename-variable-toolbar,
.rename-advanced-panel,
.rename-effect-card,
.rename-original-card {
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
}

.rename-variable-toolbar {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.rename-variable-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 12px;
  align-items: start;
}

.rename-variable-head h3 {
  margin: 0 0 4px;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.rename-variable-head p,
.rename-field-help,
.rename-effect-card small {
  margin: 0;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.rename-variable-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rename-variable-actions button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  color: #111827;
  background: #fff;
  font-weight: 900;
}

.rename-variable-actions button:hover {
  color: var(--rename-accent);
  border-color: var(--rename-accent);
  background: #fff8f4;
}

.rename-variable-actions b,
.rename-variable-actions .svg-icon {
  justify-self: center;
}

.rename-variable-config {
  display: grid;
  gap: 10px;
}

.rename-current-settings .form-grid.two,
.rename-original-section .form-grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.rename-date-sample {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #f8fafc;
}

.rename-date-sample span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.rename-date-sample strong {
  color: #111827;
  font-size: 14px;
  font-weight: 950;
}

.rename-custom-date.is-hidden {
  display: none;
}

.rename-original-actions {
  display: grid;
  gap: 12px;
}

.rename-original-card {
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.rename-original-card.open {
  border-color: #cfd8e6;
}

.rename-original-card.active {
  border-color: rgba(255, 78, 16, 0.36);
  box-shadow: 0 12px 24px rgba(255, 78, 16, 0.07);
}

.rename-original-card-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(140px, 0.7fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  color: #111827;
  background: #fff;
  text-align: left;
}

.rename-original-card-head:hover {
  background: #fff8f4;
}

.rename-card-switch {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #d8e0eb;
  border-radius: 999px;
  color: #fff;
  background: #fff;
}

.rename-original-card.active .rename-card-switch {
  border-color: var(--rename-accent);
  background: var(--rename-accent);
}

.rename-card-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.rename-card-title strong {
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rename-card-title small,
.rename-original-card-head em {
  overflow: hidden;
  color: #6b7280;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rename-original-card-head em {
  justify-self: end;
  max-width: 100%;
  color: #4b5563;
}

.rename-original-card-body {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.rename-card-warning {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #9a3412;
  background: #fff7ed;
  font-size: 12px;
  font-weight: 850;
}

.rename-token-input {
  display: grid;
  gap: 8px;
}

.rename-inline-token-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.rename-inline-token-buttons button,
.rename-delete-text-button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  color: #374151;
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 900;
}

.rename-inline-token-buttons button:hover,
.rename-delete-text-button:hover {
  color: var(--rename-accent);
  border-color: var(--rename-accent);
  background: #fff8f4;
}

.rename-delete-text-button {
  width: fit-content;
}

.rename-card-extra {
  border: 1px dashed #d8e0eb;
  border-radius: 8px;
  background: #fbfcfe;
}

.rename-card-extra summary {
  padding: 10px 12px;
  color: #4b5563;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.rename-card-extra .field {
  padding: 0 12px 12px;
}

.rename-field-picker {
  display: grid;
  gap: 8px;
}

.rename-field-picker > span {
  color: #374151;
  font-size: 13px;
  font-weight: 850;
}

.rename-field-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rename-field-segment {
  display: grid;
  gap: 2px;
  min-width: 92px;
  max-width: 180px;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  color: #111827;
  background: #fff;
  text-align: left;
}

.rename-field-segment:hover,
.rename-field-segment.active {
  color: var(--rename-accent);
  border-color: var(--rename-accent);
  background: #fff8f4;
}

.rename-field-segment small {
  overflow: hidden;
  color: #6b7280;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rename-field-segment strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rename-position-select {
  max-width: 360px;
}

.rename-action-example {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid #eef1f5;
  border-radius: 8px;
  background: #fbfcfe;
}

.rename-action-example span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 850;
}

.rename-action-example code {
  overflow-wrap: anywhere;
  color: #111827;
  font-size: 12px;
  font-weight: 850;
}

.rename-field-help {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border: 1px dashed #d8e0eb;
  border-radius: 8px;
  background: #fbfcfe;
}

.rename-advanced-panel {
  overflow: hidden;
}

.rename-advanced-panel > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  background: #fff;
  color: #111827;
  text-align: left;
  font-weight: 950;
}

.rename-advanced-panel > button:hover {
  background: #fbfcfe;
}

.rename-advanced-panel > button small {
  overflow: hidden;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rename-advanced-panel .form-grid {
  padding: 0 14px 14px;
}

.rename-advanced-panel .rename-card-warning {
  margin: 0 14px 14px;
}

.rename-effect-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #fbfcfe;
}

.rename-effect-card > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.rename-effect-card span {
  color: #111827;
  font-size: 14px;
  font-weight: 950;
}

.rename-effect-card p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 0;
}

.rename-effect-card b,
.rename-effect-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rename-effect-card b {
  color: #4b5563;
  font-weight: 850;
}

.rename-effect-card strong {
  color: #111827;
  font-weight: 950;
}

.rename-effect-card i {
  color: var(--rename-accent);
  font-style: normal;
  text-align: center;
}

.rename-effect-card code {
  display: block;
  padding: 9px 10px;
  border: 1px solid #eef1f5;
  border-radius: 8px;
  color: #4b5563;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: normal;
  word-break: break-word;
}

.rename-current-settings .toolbar,
.rename-current-settings .token-list,
.rename-current-settings .mod-token-tools .hint {
  display: none;
}

.rename-output-settings {
  display: grid;
  gap: 14px;
  color: #111827;
}

.rename-output-grid {
  margin-top: 0;
}

.rename-output-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 14px;
  align-items: end;
}

.rename-output-options label:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #111827;
}

.rename-output-options input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  accent-color: var(--rename-accent);
}

.rename-template-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.06);
}

.rename-template-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rename-template-panel-head button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  color: #4b5563;
  background: #fff;
  font-size: 20px;
  font-weight: 750;
}

.rename-template-panel-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.rename-template-select,
.rename-template-name {
  display: grid;
  gap: 7px;
}

.rename-template-details {
  display: none;
}

.rename-template-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
}

.rename-template-save-row {
  display: grid;
}

.rename-template-save-button {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--rename-accent);
  border-radius: 8px;
  color: #fff;
  background: var(--rename-accent);
  font-weight: 900;
}

.rename-template-save-button:hover {
  filter: brightness(1.03);
}

.rename-template-actions button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
  font-weight: 850;
}

.rename-template-actions button.primary {
  color: #fff;
  border-color: var(--rename-accent);
  background: var(--rename-accent);
}

.rename-template-actions button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.rename-output-settings p {
  display: none;
}

.rename-keep-ext-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-bottom: 22px;
  padding: 0 18px;
  border-radius: 8px;
  color: #7c4a03;
  background: #fff2d8;
  font-weight: 900;
}

.rename-keep-ext-banner b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #fff;
  background: #f59e0b;
  font-size: 12px;
}

.rename-preview-table {
  border: 1px solid #dde3ec;
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
}

.rename-preview-head,
.rename-preview-row {
  display: grid;
  grid-template-columns: var(--rename-preview-columns, minmax(0, 1fr) minmax(0, 1.2fr) 104px);
  align-items: center;
  gap: 12px;
  min-width: max(100%, var(--rename-preview-min-width, 100%));
}

.rename-preview-head {
  min-height: 46px;
  padding: 0 18px;
  border-bottom: 1px solid #eef1f5;
  background: #fbfcfe;
  font-weight: 950;
}

.rename-preview-th {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 46px;
}

.rename-preview-th > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rename-preview-th i {
  position: absolute;
  inset: 7px -9px 7px auto;
  width: 14px;
  border-radius: 999px;
  cursor: col-resize;
  touch-action: none;
}

.rename-preview-th i::before {
  position: absolute;
  inset: 4px 6px;
  border-radius: inherit;
  content: "";
  background: transparent;
  transition: background 160ms ease;
}

.rename-preview-th i:hover::before,
.rename-preview-th i:focus-visible::before,
body.rename-preview-column-resizing .rename-preview-th i::before {
  background: #b8c1ce;
}

.rename-preview-row {
  min-height: 62px;
  padding: 0 18px;
  border-bottom: 1px solid #eef1f5;
}

.rename-preview-row:last-child {
  border-bottom: 0;
}

.rename-preview-row span,
.rename-preview-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rename-preview-row strong {
  color: #111827;
  font-weight: 850;
}

.rename-preview-row em {
  justify-self: start;
  min-width: 58px;
  padding: 5px 12px;
  border-radius: 8px;
  color: #15803d;
  background: #dcfce7;
  font-style: normal;
  font-weight: 950;
}

.rename-preview-row.warning em {
  color: #b45309;
  background: #ffedd5;
}

.rename-preview-row.conflict em {
  color: #ea580c;
  background: #ffedd5;
}

.rename-preview-foot {
  justify-content: flex-start;
  margin-top: 22px;
}

.rename-preview-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rename-preview-foot i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #9ca3af;
}

.rename-preview-foot i.ok {
  background: #16a34a;
}

.rename-preview-foot i.warn {
  background: #f97316;
}

.rename-workflow-footer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr)) minmax(260px, 1.18fr);
  gap: 26px;
  align-items: center;
  min-height: 150px;
  padding: 22px 36px;
  border-top: 1px solid var(--rename-line);
  background: #fff;
}

.rename-step,
.rename-progress-card {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 88px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
}

.rename-step {
  grid-template-columns: 42px 48px minmax(0, 1fr) 24px;
  gap: 10px;
  padding: 0 18px;
}

.rename-step.active {
  border-color: var(--rename-accent);
  box-shadow: 0 16px 35px rgba(255, 79, 10, 0.11);
}

.rename-step-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: #fff;
  background: #5b6472;
  font-weight: 950;
}

.rename-step.active .rename-step-number {
  background: linear-gradient(180deg, #ff681d, #fb4304);
}

.rename-step-icon .svg-icon {
  width: 32px;
  height: 32px;
}

.rename-step strong,
.rename-progress-card strong {
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.rename-step small,
.rename-progress-card small {
  display: block;
  margin-top: 3px;
  color: var(--rename-muted);
  font-size: 13px;
  font-weight: 750;
}

.rename-step b {
  color: #16a34a;
}

.rename-step i {
  color: #6b7280;
  font-style: normal;
  font-size: 28px;
}

.rename-progress-card {
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 10px;
  padding: 16px 18px;
}

.rename-progress-card div {
  grid-column: 1 / -1;
  height: 9px;
  border-radius: 999px;
  background: #ffe3d5;
  overflow: hidden;
}

.rename-progress-card div i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff681d, #fb4304);
}

.rename-progress-card span {
  justify-self: end;
  color: #111827;
  font-weight: 900;
}

body.rename-open .local-project-panel {
  border-radius: 8px;
  border-color: #dde3ec;
  background: #fff;
  box-shadow: none;
}

@media (max-width: 1440px) {
  body.rename-open .top-actions {
    grid-template-columns: minmax(260px, 1fr) 128px 140px 140px 158px;
    gap: 14px;
  }

  .rename-workbench {
    grid-template-columns:
      minmax(300px, calc(var(--rename-left, 28%) - 4px))
      6px
      minmax(390px, calc(var(--rename-middle, 39%) - 4px))
      6px
      minmax(320px, calc(var(--rename-right, 33%) - 4px));
  }

  .rename-import-pane,
  .rename-rule-pane,
  .rename-preview-pane {
    padding: 22px 20px 16px;
  }

  .rename-element-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .rename-workflow-footer {
    gap: 14px;
    padding-inline: 20px;
  }
}

@media (max-width: 1080px) {
  body.rename-open {
    overflow: auto;
  }

  body.rename-open .app-shell {
    grid-template-columns: 1fr !important;
    height: auto;
    min-height: 100dvh;
  }

  body.rename-open .sidebar {
    display: none !important;
  }

  body.rename-open .main {
    min-height: 100dvh;
  }

  body.rename-open .topbar {
    grid-template-columns: 1fr;
    height: auto;
    padding: 14px;
  }

  body.rename-open .top-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.rename-open .view {
    height: auto;
    overflow: visible;
  }

  .rename-workbench {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .rename-pane-resizer {
    display: none;
  }

  .rename-import-pane,
  .rename-rule-pane,
  .rename-preview-pane {
    border-right: 0;
    border-bottom: 1px solid var(--rename-line);
    overflow: visible;
  }

  .rename-original-section .form-grid,
  .rename-original-section .form-grid.three,
  .rename-original-section .form-grid.compact,
  .rename-current-settings .form-grid,
  .rename-current-settings .form-grid.three,
  .rename-current-settings .form-grid.two,
  .rename-variable-head,
  .rename-variable-actions,
  .rename-variable-config .form-grid,
  .rename-original-card-head,
  .rename-advanced-panel > button,
  .rename-template-panel-body,
  .rename-dynamic-actions {
    grid-template-columns: 1fr;
  }

  .rename-original-card-head em {
    justify-self: start;
  }

  .rename-effect-card p {
    grid-template-columns: 1fr;
  }

  .rename-effect-card i {
    text-align: left;
  }

  .rename-template-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rename-workflow-footer {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}


/* Orange operations workbench dashboard */
body.dashboard-open {
  --orange-accent: #ff5b18;
  --orange-accent-dark: #f04409;
  --orange-line: #e4e8ef;
  --orange-text: #111827;
  --orange-muted: #6b7280;
  --orange-soft: #f6f7f9;
  height: 100dvh;
  overflow: hidden;
  color: var(--orange-text);
  background: #f7f8fa !important;
}

body.dashboard-open::before,
body.dashboard-open::after,
body.dashboard-open .app-shell::before {
  display: none !important;
}

body.dashboard-open .app-shell {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "sidebar main" !important;
  gap: 0 !important;
  height: 100dvh;
  padding: 0 !important;
  overflow: hidden;
  background: #f7f8fa;
}

body.dashboard-open .status-dock,
body.dashboard-open .sidebar-storage,
body.dashboard-open .sidebar-version,
body.dashboard-open .sidebar-home,
body.dashboard-open .traffic,
body.dashboard-open .nav-label,
body.dashboard-open .sidebar-controls,
body.dashboard-open .brand-card > div:not(.sidebar-controls) {
  display: none !important;
}

body.dashboard-open .sidebar {
  grid-area: sidebar;
  display: grid;
  grid-template-rows: 82px minmax(0, 1fr) 108px;
  gap: 0;
  height: 100dvh !important;
  min-height: 0;
  padding: 18px 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--orange-line) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden;
  backdrop-filter: none !important;
}

body.dashboard-open .brand-card {
  display: grid;
  place-items: start center;
  grid-template-columns: 1fr;
  min-height: 56px;
  margin: 0 !important;
  padding: 0 !important;
}

body.dashboard-open .brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #ff6a22, #ff4308);
  box-shadow: 0 10px 24px rgba(255, 91, 24, 0.28);
  font-size: 29px;
  font-weight: 950;
}

body.dashboard-open .side-nav {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 8px 0;
}

body.dashboard-open .side-nav button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 8px 8px 0 !important;
  color: #2f3640;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 850;
}

body.dashboard-open .side-nav button::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  content: "";
  background: transparent;
}

body.dashboard-open .side-nav button .svg-icon,
body.dashboard-open .side-nav button .nav-symbol {
  width: 22px;
  height: 22px;
  color: currentColor;
}

body.dashboard-open .side-nav button.active {
  color: var(--orange-accent) !important;
  background: linear-gradient(90deg, rgba(255,91,24,0.13), rgba(255,91,24,0.06)) !important;
}

body.dashboard-open .side-nav button.active::before {
  background: var(--orange-accent);
}

body.dashboard-open .main {
  grid-area: main;
  display: grid;
  grid-template-rows: 74px minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  background: #f7f8fa;
}

body.dashboard-open .topbar {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  height: 74px;
  min-height: 74px;
  padding: 0 28px 0 36px;
  border: 0 !important;
  border-bottom: 1px solid var(--orange-line) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.dashboard-open .crumb {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  color: #6b7280;
  background: transparent;
  box-shadow: none;
}

body.dashboard-open .crumb h1 {
  color: var(--orange-text);
  font-size: 16px;
  font-weight: 850;
}

body.dashboard-open .crumb b {
  color: #9ca3af;
}

body.dashboard-open .top-actions {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 160px 174px 148px 156px;
  gap: 28px;
  align-items: center;
  width: 100%;
}

body.dashboard-open .search-box,
body.dashboard-open .top-pill,
body.dashboard-open .dashboard-ffmpeg-pill,
body.dashboard-open .dashboard-start-btn {
  height: 44px !important;
  min-height: 44px;
  border-radius: 8px !important;
  font-size: 14px;
}

body.dashboard-open .search-box {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 0 14px;
  border: 1px solid #dde3ec !important;
  color: #9ca3af;
  background: #fff !important;
  box-shadow: none !important;
}

body.dashboard-open .search-box::before {
  width: 17px;
  height: 17px;
  border-color: #111827;
}

body.dashboard-open .search-box input {
  color: #111827;
  font-size: 14px;
  font-weight: 650;
}

body.dashboard-open .dashboard-ffmpeg-pill,
body.dashboard-open .top-pill,
body.dashboard-open .dashboard-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #dde3ec !important;
  background: #fff !important;
  color: #111827;
  box-shadow: none !important;
  font-weight: 850;
  white-space: nowrap;
}

body.dashboard-open .dashboard-ffmpeg-pill i {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #9ca3af;
}

body.dashboard-open .dashboard-ffmpeg-pill.ready i {
  background: #22a447;
  box-shadow: inset 0 0 0 4px #ffffff, 0 0 0 1px #22a447;
}

body.dashboard-open .dashboard-ffmpeg-pill.ready {
  color: #111827;
}

body.dashboard-open .top-pill svg,
body.dashboard-open .dashboard-start-btn svg,
body.dashboard-open .orange-dashboard svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

body.dashboard-open .dashboard-start-btn {
  border-color: transparent !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #ff6828, #ff3f08) !important;
  box-shadow: 0 12px 24px rgba(255, 91, 24, 0.24) !important;
}

body.dashboard-open .dashboard-start-btn:disabled {
  opacity: 0.68;
  cursor: not-allowed;
}

body.dashboard-open .view {
  min-height: 0;
  padding: 18px 28px 16px;
  overflow: auto;
  background: #f7f8fa;
}

.orange-dashboard {
  display: grid;
  grid-template-columns: minmax(760px, 1fr) 354px;
  grid-template-rows: minmax(0, 1fr) 144px;
  gap: 16px;
  min-height: 100%;
}

.orange-dashboard-main {
  display: grid;
  grid-template-rows: 132px 248px minmax(218px, 1fr);
  gap: 16px;
  min-width: 0;
}

.orange-panel,
.orange-stat-card,
.orange-step,
.orange-add-step {
  border: 1px solid var(--orange-line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.035);
}

.orange-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.orange-stat-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
}

.orange-card-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  color: #1976d2;
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px rgba(25, 118, 210, 0.12);
}

.orange-stat-card.orange .orange-card-icon,
.orange-flow-card.orange .orange-card-icon,
.orange-quick-action.orange > span,
.orange-system-metric.orange > span { color: var(--orange-accent); background: #fff2eb; }
.orange-stat-card.green .orange-card-icon,
.orange-flow-card.green .orange-card-icon,
.orange-quick-action.green > span,
.orange-system-metric.green > span { color: #22a447; background: #edf9f1; }
.orange-stat-card.purple .orange-card-icon,
.orange-flow-card.purple .orange-card-icon,
.orange-quick-action.purple > span,
.orange-system-metric.purple > span { color: #7c5fd3; background: #f2efff; }

.orange-stat-card small,
.orange-flow-card small,
.orange-system-metric small,
.orange-step small {
  display: block;
  color: #6b7280;
  font-size: 13px;
  font-weight: 750;
}

.orange-flow-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orange-stat-card strong {
  display: block;
  margin: 5px 0 6px;
  color: #05070d;
  font-size: 32px;
  line-height: 1;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.orange-stat-card em {
  display: block;
  color: #6b7280;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.orange-stat-card em b {
  margin-left: 4px;
  color: #22a447;
}

.orange-panel {
  min-width: 0;
  overflow: hidden;
}

.orange-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid #eef1f5;
}

.orange-panel-head h2 {
  margin: 0;
  color: #111827;
  font-size: 17px;
  font-weight: 950;
}

.orange-panel-head span,
.orange-panel-head button {
  color: #6b7280;
  font-size: 13px;
  font-weight: 750;
}

.orange-panel-head button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.orange-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 20px 16px 16px;
}

.orange-flow-card {
  display: grid;
  grid-template-rows: auto minmax(72px, 1fr);
  min-width: 0;
  min-height: 160px;
  padding: 16px 14px 12px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.orange-flow-card header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
}

.orange-flow-card .orange-card-icon {
  width: 44px;
  height: 44px;
}

.orange-flow-card strong {
  display: block;
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orange-flow-arrow {
  position: relative;
  height: 1px;
  background: #b9c0ca;
}

.orange-flow-arrow::after {
  position: absolute;
  right: -1px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #b9c0ca;
  border-right: 1px solid #b9c0ca;
  content: "";
  transform: rotate(45deg);
}

.orange-thumb-row {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  min-width: 0;
}

.orange-thumb,
.orange-more-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 6px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(140deg, rgba(255,255,255,0.32), rgba(255,255,255,0) 38%),
    linear-gradient(135deg, #a7bfcc, #31536b);
  font-size: 12px;
  font-weight: 950;
}

.orange-thumb.tone-1 { background: linear-gradient(135deg, #4d617c, #97c4d2); }
.orange-thumb.tone-2 { background: linear-gradient(135deg, #183248, #6e8b74); }

.orange-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.orange-thumb i {
  position: absolute;
  right: 5px;
  bottom: 4px;
  font-style: normal;
  font-size: 11px;
}

.orange-more-thumb {
  background: rgba(17,24,39,0.72);
}

.orange-empty-mini {
  display: grid;
  place-items: center;
  min-height: 68px;
  border: 1px dashed #ccd3dd;
  border-radius: 8px;
  color: #8b95a4;
  font-size: 13px;
  font-weight: 800;
}

.orange-name-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 2px 0 0 0;
  list-style: none;
  color: #4b5563;
  font-size: 13px;
  font-weight: 760;
}

.orange-name-list li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orange-progress-block {
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 74px;
}

.orange-progress,
.orange-row-progress i {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

.orange-progress span,
.orange-row-progress em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7a2f, #ff4a0d);
}

.orange-progress-block p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: #6b7280;
  font-size: 12px;
  font-weight: 760;
}

.orange-export-mini {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: #4b5563;
}

.orange-export-mini span {
  grid-row: span 2;
  color: #6d5bd0;
}

.orange-export-mini b,
.orange-export-mini small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orange-table {
  display: grid;
  font-size: 13px;
}

.orange-table-head,
.orange-table-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.25fr) 118px 90px 108px 124px 150px 52px;
  align-items: center;
  gap: 12px;
  min-width: 860px;
  padding: 0 18px;
}

.orange-table-head {
  min-height: 42px;
  color: #6b7280;
  background: #fbfcfd;
  border-bottom: 1px solid #eef1f5;
  font-weight: 850;
}

.orange-table-row {
  min-height: 52px;
  border-bottom: 1px solid #eef1f5;
  color: #4b5563;
}

.orange-table-row strong {
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orange-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 850;
}

.orange-status i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #9ca3af;
}

.orange-status.success i { background: #2aaa3f; }
.orange-status.running i { background: #ff7a1a; }
.orange-status.failed i { background: #ef4444; }

.orange-row-progress {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.orange-row-progress b {
  color: #111827;
  font-weight: 850;
}

.orange-table-row button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  color: #4b5563;
  background: transparent;
  cursor: pointer;
}

.orange-table-empty {
  display: grid;
  place-items: center;
  min-height: 164px;
  color: #8b95a4;
  font-weight: 850;
}

.orange-side {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 300px;
  gap: 16px;
  min-width: 0;
}

.orange-quick-list {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.orange-quick-action {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 18px;
  grid-template-rows: auto auto;
  gap: 4px 16px;
  align-items: center;
  min-height: 78px;
  padding: 12px 16px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.orange-quick-action > span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  color: #1976d2;
  background: #eff6ff;
}

.orange-quick-action b {
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.orange-quick-action small {
  color: #6b7280;
  font-size: 12px;
  font-weight: 760;
}

.orange-quick-action i {
  grid-row: span 2;
  width: 11px;
  height: 11px;
  border-top: 2px solid #111827;
  border-right: 2px solid #111827;
  transform: rotate(45deg);
}

.orange-system-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
}

.orange-system-metric {
  display: grid;
  grid-template-rows: 40px auto auto;
  gap: 6px;
  min-height: 106px;
  padding: 12px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fbfcfd;
}

.orange-system-metric > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #1976d2;
  background: #eff6ff;
}

.orange-system-metric strong {
  color: #111827;
  font-size: 25px;
  line-height: 1;
  font-weight: 950;
}

.orange-system-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 16px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.orange-system-foot span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.orange-system-foot i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #9ca3af;
}

.orange-system-foot i.ok {
  background: #22a447;
}

.orange-system-foot button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #dde3ec;
  border-radius: 7px;
  background: #fff;
  color: #374151;
  font-weight: 850;
}

.orange-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 270px 242px 252px 252px minmax(170px, 1fr);
  align-items: center;
  gap: 38px;
  min-width: 0;
  padding: 16px 20px;
  border: 1px solid var(--orange-line);
  border-radius: 8px;
  background: #ffffff;
}

.orange-step,
.orange-add-step {
  position: relative;
  display: grid;
  grid-template-columns: 32px 64px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  min-height: 92px;
  padding: 10px 12px;
  box-shadow: none;
}

.orange-step:not(:last-of-type)::after {
  position: absolute;
  right: -38px;
  top: 50%;
  width: 38px;
  height: 1px;
  content: "";
  background: #111827;
}

.orange-step.active {
  border-color: var(--orange-accent);
}

.orange-step > span {
  align-self: start;
  color: #111827;
  font-weight: 950;
}

.orange-step-media {
  display: grid;
  place-items: center;
  width: 64px;
  height: 52px;
}

.orange-step-media .orange-thumb {
  width: 64px;
  height: 52px;
}

.orange-step strong {
  display: block;
  color: #111827;
  font-size: 14px;
  font-weight: 950;
}

.orange-step small {
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orange-step > i {
  position: absolute;
  right: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #fff;
  background: var(--orange-accent);
}

.orange-step > i svg {
  width: 12px;
  height: 12px;
}

.orange-add-step {
  grid-template-columns: 1fr;
  justify-items: center;
  border-style: dashed;
  color: #4b5563;
  background: #fff;
}

.orange-add-step span {
  font-size: 38px;
  line-height: 1;
  font-weight: 350;
}

.orange-add-step b {
  font-size: 14px;
}

@media (max-width: 1500px) {
  body.dashboard-open .top-actions {
    grid-template-columns: minmax(260px, 1fr) 144px 154px 132px 142px;
    gap: 12px;
  }

  .orange-dashboard {
    grid-template-columns: minmax(680px, 1fr) 326px;
  }

  .orange-stat-grid {
    gap: 12px;
  }

  .orange-flow {
    gap: 10px;
  }

  .orange-steps {
    grid-template-columns: repeat(4, minmax(190px, 1fr)) 150px;
    gap: 22px;
  }

  .orange-step:not(:last-of-type)::after {
    right: -22px;
    width: 22px;
  }
}

@media (max-width: 1180px) {
  body.dashboard-open {
    overflow: auto;
  }

  body.dashboard-open .app-shell {
    grid-template-columns: 1fr !important;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.dashboard-open .sidebar {
    display: none;
  }

  body.dashboard-open .main {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.dashboard-open .topbar,
  body.dashboard-open .top-actions,
  .orange-dashboard,
  .orange-dashboard-main,
  .orange-side,
  .orange-flow,
  .orange-steps {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  body.dashboard-open .topbar {
    height: auto;
    padding: 14px;
  }

  .orange-flow-arrow,
  .orange-step::after {
    display: none;
  }

  .orange-dashboard-main {
    min-height: 0;
  }

  .orange-stat-grid,
  .orange-system-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  body.dashboard-open .view {
    padding: 12px;
  }

  .orange-stat-grid,
  .orange-system-grid,
  .orange-table-head,
  .orange-table-row {
    grid-template-columns: 1fr;
  }

  .orange-table-head {
    display: none;
  }

  .orange-table-row {
    gap: 6px;
    padding: 12px 16px;
  }
}

/* Orange dashboard second-pass fit: lock the homepage to the reference workbench proportions. */
@media (min-width: 1181px) {
  body.dashboard-open .sidebar-reveal {
    display: none !important;
  }

  body.dashboard-open.sidebar-collapsed .app-shell,
  body.dashboard-open.sidebar-hidden .app-shell,
  body.dashboard-open .app-shell {
    grid-template-columns: 128px minmax(0, 1fr) !important;
    grid-template-areas: "sidebar main" !important;
  }

  body.dashboard-open.sidebar-collapsed .sidebar,
  body.dashboard-open.sidebar-hidden .sidebar,
  body.dashboard-open .sidebar {
    display: grid !important;
    width: 128px !important;
    min-width: 128px !important;
    transform: none !important;
    visibility: visible !important;
  }

  body.dashboard-open.sidebar-collapsed .main,
  body.dashboard-open.sidebar-hidden .main {
    margin: 0 !important;
    width: auto !important;
  }

  body.dashboard-open.sidebar-collapsed .side-nav button span:not(.svg-icon),
  body.dashboard-open.sidebar-hidden .side-nav button span:not(.svg-icon),
  body.dashboard-open.sidebar-collapsed .side-nav button span:last-child,
  body.dashboard-open.sidebar-hidden .side-nav button span:last-child {
    display: block !important;
    opacity: 1 !important;
    max-width: none !important;
  }

  body.dashboard-open.sidebar-collapsed .side-nav button,
  body.dashboard-open.sidebar-hidden .side-nav button,
  body.dashboard-open .side-nav button {
    min-height: 58px !important;
    gap: 7px !important;
  }

  body.dashboard-open .side-nav {
    gap: 3px !important;
    padding-top: 8px !important;
  }

  body.dashboard-open .brand-card {
    min-height: 58px !important;
  }

  body.dashboard-open .brand-mark {
    width: 52px !important;
    height: 52px !important;
  }

  body.dashboard-open .view {
    padding: 18px 22px 16px 30px !important;
    overflow: auto !important;
  }

  .orange-dashboard {
    grid-template-columns: minmax(0, 1fr) 354px !important;
    grid-template-rows: 662px 144px !important;
    align-content: start !important;
    gap: 12px 16px !important;
    min-height: 0 !important;
  }

  .orange-dashboard-main {
    grid-template-rows: 132px 248px auto !important;
    align-content: start !important;
    gap: 16px !important;
    min-height: 0 !important;
  }

  .orange-stat-grid {
    gap: 20px !important;
  }

  .orange-stat-card {
    height: 100% !important;
    min-height: 132px !important;
    padding: 0 24px !important;
  }

  .orange-stat-card strong {
    font-size: 31px !important;
  }

  .orange-flow-panel,
  .orange-quick-panel,
  .orange-system-panel {
    height: 100% !important;
  }

  .orange-recent-panel {
    align-self: start !important;
    height: auto !important;
  }

  .orange-flow {
    height: 196px !important;
    padding: 20px 16px 16px !important;
  }

  .orange-flow-card {
    height: 160px !important;
    min-height: 160px !important;
  }

  .orange-table-head,
  .orange-table-row {
    min-width: 0 !important;
    grid-template-columns: minmax(180px, 1.35fr) 110px 86px 104px 124px 148px 46px !important;
  }

  .orange-table-row {
    min-height: 52px !important;
  }

  .orange-table-empty {
    min-height: 124px !important;
  }

  .orange-side {
    grid-template-rows: 354px 300px !important;
    align-content: start !important;
    gap: 16px !important;
  }

  .orange-quick-list {
    gap: 18px !important;
    padding: 18px !important;
  }

  .orange-quick-action {
    min-height: 78px !important;
  }

  .orange-system-grid {
    gap: 10px 12px !important;
    padding: 12px 16px !important;
  }

  .orange-system-metric {
    grid-template-rows: 32px auto auto !important;
    gap: 4px !important;
    min-height: 86px !important;
    padding: 10px !important;
  }

  .orange-system-metric > span {
    width: 32px !important;
    height: 32px !important;
  }

  .orange-system-metric strong {
    font-size: 22px !important;
  }

  .orange-system-foot {
    display: none !important;
  }

  .orange-steps {
    height: 144px !important;
    min-height: 144px !important;
    grid-template-columns: 270px 242px 252px 252px minmax(220px, 240px) !important;
    justify-content: start !important;
    align-content: center !important;
    gap: 38px !important;
    padding: 16px 20px !important;
  }

  .orange-add-step {
    width: 100% !important;
    max-width: 240px !important;
    min-height: 92px !important;
    justify-self: stretch !important;
  }
}

@media (min-width: 1501px) {
  body.dashboard-open .topbar {
    grid-template-columns: 300px minmax(0, 1fr) !important;
    padding: 0 28px 0 36px !important;
  }

  body.dashboard-open .top-actions {
    grid-template-columns: 440px 160px 160px 148px 156px !important;
    justify-self: start !important;
    width: auto !important;
    gap: 22px !important;
  }
}

@media (min-width: 1181px) and (max-width: 1500px) {
  body.dashboard-open .topbar {
    grid-template-columns: 230px minmax(0, 1fr) !important;
    padding: 0 18px 0 24px !important;
  }

  body.dashboard-open .top-actions {
    grid-template-columns: minmax(300px, 1fr) 136px 150px 126px 142px !important;
    gap: 12px !important;
  }

  .orange-dashboard {
    grid-template-columns: minmax(0, 1fr) 326px !important;
  }

  .orange-stat-grid {
    gap: 12px !important;
  }

  .orange-steps {
    grid-template-columns: repeat(4, minmax(178px, 1fr)) minmax(150px, 170px) !important;
    gap: 22px !important;
  }

  .orange-step:not(:last-of-type)::after {
    right: -22px !important;
    width: 22px !important;
  }
}

/* BGM production workbench */
body.bgm-open {
  min-width: 1180px;
  color: #171a22 !important;
  background: #f6f7fa !important;
}

body.bgm-open .app-shell {
  grid-template-columns: 118px minmax(0, 1fr) !important;
  gap: 0 !important;
}

body.bgm-open .sidebar {
  width: 118px !important;
  padding: 20px 0 18px !important;
  border-right: 1px solid #e8ebf1 !important;
  background: #ffffff !important;
  box-shadow: 10px 0 24px rgba(17,24,39,0.035) !important;
}

body.bgm-open .brand-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  place-items: center !important;
  min-height: 58px !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bgm-open .brand-mark {
  justify-self: center !important;
  align-self: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #ff6c21, #ff3e08) !important;
  box-shadow: 0 10px 24px rgba(255,78,22,0.22) !important;
  font-size: 0 !important;
  font-weight: 950 !important;
}

body.bgm-open .brand-mark::before {
  content: "M" !important;
  color: #ffffff !important;
  font-size: 32px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body.bgm-open .brand-card > div:not(.sidebar-controls),
body.bgm-open .nav-label,
body.bgm-open .sidebar-controls,
body.bgm-open .sidebar-storage,
body.bgm-open .sidebar-version,
body.bgm-open .sidebar-home,
body.bgm-open .traffic {
  display: none !important;
}

body.bgm-open .side-nav {
  gap: 16px !important;
  padding: 0 !important;
}

body.bgm-open .side-nav button {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  gap: 5px !important;
  min-height: 56px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 8px 8px 0 !important;
  background: transparent !important;
  color: #1f2937 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 820 !important;
}

body.bgm-open .side-nav button::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: transparent;
  content: "";
}

body.bgm-open .side-nav button.active {
  color: #ff4f16 !important;
  background: rgba(255,79,22,0.08) !important;
}

body.bgm-open .side-nav button.active::before {
  background: #ff4f16;
}

body.bgm-open .side-nav button .nav-symbol,
body.bgm-open .side-nav button .svg-icon,
body.bgm-open .side-nav button .svg-icon svg {
  width: 25px !important;
  height: 25px !important;
}

body.bgm-open::before,
body.bgm-open::after {
  display: none !important;
}

body.bgm-open .main {
  display: grid !important;
  grid-template-rows: 88px minmax(0, 1fr) !important;
  gap: 0 !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f6f7fa !important;
}

body.bgm-open .view {
  display: block !important;
  grid-row: 2 !important;
  height: calc(100dvh - 88px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  overflow: hidden !important;
}

body.bgm-open .topbar {
  display: grid !important;
  grid-row: 1 !important;
  grid-template-columns: 360px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 88px !important;
  margin: 0 !important;
  padding: 0 28px 0 40px !important;
  border-color: #e8ebf1 !important;
  background: rgba(255,255,255,0.94) !important;
  color: #171a22 !important;
  box-shadow: 0 10px 28px rgba(17,24,39,0.04) !important;
}

body.bgm-open .crumb span,
body.bgm-open .crumb b {
  color: #697386 !important;
}

body.bgm-open .crumb h1 {
  color: #111827 !important;
  font-size: 19px !important;
  font-weight: 950 !important;
}

body.bgm-open .top-actions {
  display: grid !important;
  grid-template-columns: 407px 188px minmax(48px, 1fr) 184px 172px 184px !important;
  justify-self: end !important;
  gap: 24px !important;
  width: min(1324px, 100%) !important;
}

body.bgm-open .top-actions > :nth-child(1) {
  grid-column: 1 !important;
}

body.bgm-open .top-actions > :nth-child(2) {
  grid-column: 2 !important;
}

body.bgm-open .top-actions > :nth-child(3) {
  grid-column: 4 !important;
}

body.bgm-open .top-actions > :nth-child(4) {
  grid-column: 5 !important;
}

body.bgm-open .top-actions > :nth-child(5) {
  grid-column: 6 !important;
}

body.bgm-open .sidebar-hide-topbar {
  display: none !important;
}

body.bgm-open .top-actions {
  grid-template-columns: 407px 188px 184px 172px 184px !important;
}

body.bgm-open .top-actions > * {
  grid-column: auto !important;
}

body.bgm-open .bgm-top-search,
body.bgm-open .search-box.bgm-top-search {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 44px !important;
  border-radius: 10px !important;
}

body.bgm-open .search-box input {
  height: 44px !important;
  min-height: 44px !important;
  border-color: #dfe3eb !important;
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0 8px 20px rgba(17,24,39,0.04) !important;
}

.bgm-selected-chip,
.bgm-top-button,
.bgm-top-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.bgm-selected-chip {
  border: 1px solid #e4e7ef;
  background: #ffffff;
  color: #1f2937;
}

.bgm-selected-chip i {
  width: 10px;
  height: 10px;
  border: 3px solid #ff4f16;
  border-radius: 50%;
}

.bgm-top-button {
  border: 1px solid #dfe3eb !important;
  background: #ffffff !important;
  color: #111827 !important;
}

.bgm-top-primary {
  border: 1px solid #ff4f16;
  background: linear-gradient(180deg, #ff641d, #ff3f08);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(255,78,22,0.24);
}

.bgm-workbench {
  display: grid;
  grid-template-columns: 440px minmax(760px, 1fr) 392px;
  grid-template-rows: minmax(0, 1fr) 128px;
  gap: 16px;
  height: calc(100dvh - 88px);
  min-height: 0;
  padding: 0 24px 20px 18px;
  overflow: hidden;
  background: #f6f7fa;
}

.bgm-pool-panel,
.bgm-mixer-card,
.bgm-output-preview,
.bgm-params-panel,
.bgm-steps article {
  border: 1px solid #e4e7ef;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(17,24,39,0.05);
}

.bgm-pool-panel {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 0;
  padding: 22px 14px 12px;
  overflow: hidden;
}

.bgm-panel-head,
.bgm-output-head,
.bgm-param-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bgm-panel-head h2,
.bgm-param-head h2,
.bgm-mixer-title h2,
.bgm-output-head h3 {
  margin: 0;
  color: #111827;
  font-size: 16px;
  font-weight: 950;
}

.bgm-panel-head-actions,
.bgm-param-head button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bgm-panel-head-actions {
  position: relative;
}

.bgm-panel-head button,
.bgm-output-head button,
.bgm-param-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: #ffffff;
  color: #1f2937;
  font-size: 13px;
  font-weight: 850;
}

.bgm-icon-button,
.bgm-tool-icon {
  width: 30px;
  height: 30px;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.bgm-icon-button:hover,
.bgm-tool-icon:hover,
.bgm-icon-button.active,
.bgm-tool-icon.active {
  background: #fff1e8 !important;
  color: #ff4f16 !important;
}

.bgm-icon-button:active,
.bgm-tool-icon:active,
.bgm-output-head button:active {
  transform: translateY(1px);
}

.bgm-icon-button .svg-icon,
.bgm-tool-icon .svg-icon,
.bgm-output-head button .svg-icon {
  width: 16px;
  height: 16px;
}

.bgm-icon-button.is-loading .svg-icon,
.bgm-output-head button.is-loading .svg-icon {
  animation: bgm-spin 0.8s linear infinite;
}

@keyframes bgm-spin {
  to {
    transform: rotate(360deg);
  }
}

.bgm-pool-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 25;
  display: grid;
  gap: 4px;
  width: 164px;
  padding: 6px;
  border: 1px solid #e4e7ef;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(17,24,39,0.14);
}

.bgm-pool-menu button {
  justify-content: flex-start !important;
  width: 100%;
  min-height: 30px;
  padding: 0 9px !important;
  color: #1f2937;
  text-align: left;
}

.bgm-pool-menu button:hover {
  background: #f4f6f9;
}

.bgm-pool-menu button.danger {
  color: #ff4f16;
}

.bgm-pool-search {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e1e5ee;
  border-radius: 8px;
  background: #ffffff;
  color: #8a94a6;
}

.bgm-pool-search .svg-icon {
  width: 15px;
  height: 15px;
}

.bgm-pool-search input {
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111827;
  font-size: 13px;
  font-weight: 780;
}

.bgm-dropzone {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 148px;
  border: 1px dashed #bfc6d2;
  border-radius: 8px;
  background: #fbfcff;
  color: #1f2937;
  text-align: center;
}

.bgm-dropzone .svg-icon {
  width: 30px;
  height: 30px;
  color: #334155;
}

.bgm-dropzone strong {
  font-size: 14px;
  font-weight: 900;
}

.bgm-dropzone span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 760;
}

.bgm-pool-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 34px;
  gap: 8px;
}

.bgm-pool-tools button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: #f4f6f9;
  color: #1f2937;
  font-weight: 850;
}

.bgm-filter-button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bgm-track-list {
  min-height: 0;
  overflow: hidden auto;
  padding-right: 2px;
}

.bgm-track {
  display: grid;
  grid-template-columns: 20px 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 92px;
  margin-bottom: 10px;
  padding: 10px 10px;
  border: 1px solid #edf0f5;
  border-radius: 8px;
  background: #fbfcfe;
  cursor: pointer;
}

.bgm-track.active,
.bgm-track.selected {
  border-color: #ff5b18;
  box-shadow: inset 0 0 0 1px rgba(255,91,24,0.12);
}

.bgm-track input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  accent-color: #ff4f16;
}

.bgm-track-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: #ecfdf3;
  color: #31b977;
  font-size: 28px;
  font-weight: 900;
}

.bgm-track-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.bgm-track-main strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bgm-track-meta {
  display: grid;
  gap: 7px;
  justify-items: end;
  color: #6b7280;
  font-size: 11px;
  font-weight: 850;
}

.bgm-track-meta b {
  padding: 3px 7px;
  border-radius: 6px;
  background: #eef1f6;
  color: #6b7280;
}

.bgm-track-meta em {
  font-style: normal;
}

.bgm-pool-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px 2px;
  border-top: 1px solid #edf0f5;
  color: #4b5563;
  font-size: 13px;
  font-weight: 850;
}

.bgm-pool-foot button {
  border: 0;
  background: transparent;
  color: #ff4f16;
  font-weight: 950;
}

.bgm-center {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-rows: 40px 420px minmax(250px, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding-top: 16px;
}

.bgm-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid #e1e5ee;
  border-radius: 8px;
  background: #ffffff;
}

.bgm-mode-tabs button {
  min-height: 40px;
  border: 0;
  border-right: 1px solid #e8ebf1;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
  font-weight: 950;
}

.bgm-mode-tabs button:last-child {
  border-right: 0;
}

.bgm-mode-tabs button.active {
  background: linear-gradient(180deg, #ff6420, #ff4208);
  color: #ffffff;
}

.bgm-mixer-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 52px;
  min-height: 0;
  padding: 24px 26px 14px;
  overflow: hidden;
}

.bgm-mixer-title {
  min-width: 0;
}

.bgm-mixer-title h2 span {
  color: #8b95a5;
  font-size: 14px;
}

.bgm-mixer-title h2 {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bgm-mixer-grid {
  display: grid;
  grid-template-columns: 222px minmax(380px, 1fr) 88px;
  align-items: center;
  gap: 18px;
  min-height: 0;
  padding: 10px 0 8px;
}

.bgm-video-preview {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: #111827;
}

.bgm-video-preview video,
.bgm-video-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bgm-video-placeholder {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.12)),
    url("/static/assets/homepage/mountain.svg") center / cover no-repeat;
}

.bgm-big-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid rgba(255,255,255,0.86);
  border-radius: 50%;
  background: rgba(17,24,39,0.45);
  color: #ffffff;
  transform: translate(-50%, -50%);
}

.bgm-video-preview span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,0.36);
}

.bgm-wave-stack {
  display: grid;
  min-width: 0;
  border: 1px solid #e4e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.bgm-wave-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  min-height: 112px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf0f5;
}

.bgm-wave-row:last-child {
  border-bottom: 0;
}

.bgm-wave-row strong {
  display: block;
  color: #111827;
  font-size: 13px;
  font-weight: 950;
}

.bgm-wave-row small {
  display: block;
  max-width: 118px;
  overflow: hidden;
  color: #6b7280;
  font-size: 11px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bgm-wave-row b {
  color: #111827;
  font-size: 14px;
  font-weight: 950;
  text-align: right;
}

.bgm-wave,
.bgm-tiny-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  height: 42px;
}

.bgm-wave i,
.bgm-tiny-wave i {
  flex: 1 1 2px;
  min-width: 1px;
  border-radius: 999px;
  opacity: 0.92;
}

.bgm-wave.blue i,
.bgm-tiny-wave.blue i {
  background: #4a90ff;
}

.bgm-wave.green i,
.bgm-tiny-wave.green i {
  background: #2fbf78;
}

.bgm-wave.orange i,
.bgm-tiny-wave.orange i {
  background: #ff5b18;
}

.bgm-tiny-wave {
  height: 24px;
}

.bgm-levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  height: 100%;
  min-height: 190px;
}

.bgm-meter {
  display: grid;
  grid-template-rows: auto repeat(8, 1fr) auto;
  justify-items: center;
  gap: 4px;
  color: #1f2937;
  font-size: 11px;
  font-weight: 900;
}

.bgm-meter i {
  width: 18px;
  min-height: 8px;
  border-radius: 3px;
  background: #e3e8f1;
}

.bgm-meter.blue i.on {
  background: #3b82f6;
}

.bgm-meter.green i.on {
  background: #22b96f;
}

.bgm-meter em {
  color: #64748b;
  font-style: normal;
}

.bgm-player-bar {
  display: grid;
  grid-template-columns: 30px 42px 30px minmax(160px, 1fr) 30px 120px 30px;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.bgm-player-bar button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #1f2937;
  font-weight: 950;
}

.bgm-player-bar button .svg-icon {
  width: 17px;
  height: 17px;
}

.bgm-player-bar button:hover {
  background: #f1f4f8;
  color: #ff4f16;
}

.bgm-player-bar button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.bgm-player-bar button.play {
  width: 42px;
  height: 42px;
  background: #242936;
  color: #ffffff;
}

.bgm-progress,
.bgm-volume-line {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #dde2eb;
}

.bgm-progress i,
.bgm-volume-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #ff5b18;
}

.bgm-output-preview {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 14px 14px 12px;
  overflow: hidden;
}

.bgm-output-head {
  margin-bottom: 8px;
}

.bgm-output-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.bgm-output-tabs {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #e3e7ef;
  border-radius: 8px;
  background: #f7f9fc;
}

.bgm-output-tabs button {
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #657082 !important;
  font-size: 12px !important;
}

.bgm-output-tabs button.active {
  background: #ffffff !important;
  color: #ff4f16 !important;
  box-shadow: inset 0 0 0 1px rgba(255,79,22,0.08);
}

.bgm-output-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bgm-output-actions button {
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid #e1e5ee !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  box-shadow: 0 6px 14px rgba(17,24,39,0.04);
  white-space: nowrap;
}

.bgm-output-actions button:hover {
  border-color: #ffd0bd !important;
  color: #ff4f16 !important;
}

.bgm-output-preview .table-wrap {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.bgm-output-preview table {
  color: #111827;
  table-layout: fixed;
}

.bgm-output-preview th {
  background: #f6f8fb;
  color: #475569;
}

.bgm-output-preview td,
.bgm-output-preview th {
  height: 38px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  white-space: nowrap !important;
}

.bgm-output-preview th:nth-child(1),
.bgm-output-preview td:nth-child(1) {
  width: 62px;
}

.bgm-output-preview th:nth-child(2),
.bgm-output-preview td:nth-child(2) {
  width: 224px;
}

.bgm-output-preview th:nth-child(3),
.bgm-output-preview td:nth-child(3) {
  width: 220px;
}

.bgm-output-preview th:nth-child(4),
.bgm-output-preview td:nth-child(4) {
  width: 142px;
}

.bgm-output-preview th:nth-child(5),
.bgm-output-preview td:nth-child(5) {
  width: 120px;
}

.bgm-policy {
  color: #24a764;
  font-weight: 950;
}

.bgm-export-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bgm-export-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #e1e5ee;
  border-radius: 7px;
  background: #ffffff;
  color: #1f2937;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.bgm-export-action:hover {
  border-color: #ffd0bd;
  color: #ff4f16;
}

.bgm-export-action .svg-icon {
  width: 14px;
  height: 14px;
}

.bgm-export-table th:nth-child(1),
.bgm-export-table td:nth-child(1) {
  width: 270px;
}

.bgm-export-table th:nth-child(2),
.bgm-export-table td:nth-child(2) {
  width: 72px;
}

.bgm-export-table th:nth-child(3),
.bgm-export-table td:nth-child(3) {
  width: 90px;
}

.bgm-export-table th:nth-child(4),
.bgm-export-table td:nth-child(4) {
  width: 156px;
}

.bgm-export-table th:nth-child(5),
.bgm-export-table td:nth-child(5) {
  width: 100px;
}

.bgm-export-table th:nth-child(6),
.bgm-export-table td:nth-child(6) {
  width: 92px;
}

.bgm-params-panel {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 0;
  padding: 18px 18px 16px;
  overflow: hidden auto;
}

.bgm-param-list,
.bgm-output-settings {
  display: grid;
  gap: 14px;
}

.bgm-output-settings {
  padding-top: 14px;
  border-top: 1px solid #edf0f5;
}

.bgm-output-settings h3 {
  margin: 0;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.bgm-field,
.bgm-switch {
  display: grid;
  grid-template-columns: minmax(92px, 0.7fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: #1f2937;
  font-size: 14px;
  font-weight: 900;
}

.bgm-switch {
  grid-template-columns: minmax(0, 1fr) auto;
}

.bgm-field input,
.bgm-field select {
  grid-column: 2 / 4;
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #e1e5ee;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-weight: 850;
}

.bgm-switch input {
  width: 42px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: #c6cad4 !important;
}

body.bgm-open .bgm-switch input {
  background: #c6cad4 !important;
}

.bgm-switch input::before {
  display: block;
  width: 20px;
  height: 20px;
  margin: 2px;
  border-radius: 50%;
  background: #ffffff;
  content: "";
  transition: transform 160ms ease;
  box-shadow: 0 1px 4px rgba(17,24,39,0.25);
}

.bgm-switch input:checked {
  background: #ff4f16 !important;
}

body.bgm-open .bgm-switch input:checked {
  background: #ff4f16 !important;
}

.bgm-switch input:checked::before {
  transform: translateX(18px);
}

.bgm-range-field input[type="range"] {
  grid-column: 2;
  height: 4px;
  min-height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5b18 0 calc(var(--range) * 1%), #dfe3eb calc(var(--range) * 1%) 100%);
  accent-color: #ff5b18;
}

.bgm-range-field b {
  display: grid;
  place-items: center;
  min-width: 50px;
  height: 34px;
  border: 1px solid #e1e5ee;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 13px;
  font-weight: 950;
}

.bgm-run-button {
  width: 100%;
  min-height: 44px;
  border: 1px solid #ff4f16;
  border-radius: 9px;
  background: linear-gradient(180deg, #ff641d, #ff3f08);
  color: #ffffff;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(255,78,22,0.22);
}

.bgm-steps {
  position: relative;
  z-index: 1;
  grid-column: 1 / 4;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 42px;
  min-height: 0;
}

.bgm-steps article {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.bgm-steps article:hover,
.bgm-steps article:focus-visible {
  border-color: #ffd0bd;
  outline: 0;
  box-shadow: inset 0 0 0 1px rgba(255,91,24,0.08), 0 10px 28px rgba(17,24,39,0.06);
}

.bgm-steps article::after {
  position: absolute;
  right: -30px;
  top: 50%;
  color: #c7ceda;
  content: "›";
  font-size: 46px;
  line-height: 1;
  transform: translateY(-50%);
}

.bgm-steps article:last-child::after {
  display: none;
}

.bgm-steps article.done::after {
  color: #111827;
}

.bgm-steps article.current {
  border-color: #ff5b18;
  box-shadow: inset 0 0 0 1px rgba(255,91,24,0.16), 0 10px 28px rgba(17,24,39,0.05);
}

.bgm-steps article.done {
  border-color: #dfe5ee;
}

.bgm-steps article.pending {
  border-color: #e7eaf1;
  box-shadow: none;
}

.bgm-steps article > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: #eef2f8;
  color: #111827;
  font-size: 28px;
  font-weight: 950;
}

.bgm-steps article.done > span {
  background: #ecfdf3;
  color: #2fbf78;
}

.bgm-steps article.current > span {
  background: #fff1e8;
  color: #ff5b18;
}

.bgm-steps article.pending > span {
  background: #f2f5f9;
  color: #9aa4b2;
}

.bgm-steps strong {
  display: block;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.bgm-steps small {
  display: block;
  color: #6b7280;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.45;
}

.bgm-steps b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #25b86d;
  color: #ffffff;
  font-size: 13px;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.bgm-steps article.done b {
  opacity: 1;
  transform: scale(1);
}

.bgm-empty {
  display: grid;
  place-items: center;
  min-height: 100px;
  padding: 18px;
  border: 1px dashed #d8dde7;
  border-radius: 8px;
  color: #7b8494;
  font-weight: 850;
  text-align: center;
}

.table-empty {
  min-height: 120px;
}

@media (max-width: 1400px) {
  body.bgm-open .top-actions {
    grid-template-columns: minmax(230px, 1fr) auto auto auto !important;
  }

  body.bgm-open .bgm-selected-chip {
    display: none;
  }

  .bgm-workbench {
    grid-template-columns: 320px minmax(480px, 1fr) 310px;
    grid-template-rows: minmax(0, 1fr) 120px;
    gap: 12px;
    padding: 14px;
  }

  .bgm-mixer-grid {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .bgm-levels {
    display: none;
  }

  .bgm-wave-row {
    grid-template-columns: 94px minmax(0, 1fr) 44px;
  }

  .bgm-steps {
    gap: 24px;
  }

  .bgm-steps article::after {
    right: -22px;
  }
}

@media (max-width: 1180px) {
  body.bgm-open {
    min-width: 0;
    overflow: auto !important;
  }

  body.bgm-open .main {
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.bgm-open .topbar {
    position: sticky !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  body.bgm-open .top-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
  }

  body.bgm-open .bgm-top-search,
  body.bgm-open .bgm-selected-chip {
    display: none !important;
  }

  body.bgm-open .bgm-top-button,
  body.bgm-open .bgm-top-primary {
    min-width: 0;
    padding: 0 8px;
    font-size: 12px;
  }

  body.bgm-open .view {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .bgm-workbench {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .bgm-pool-panel,
  .bgm-center,
  .bgm-params-panel,
  .bgm-steps {
    grid-column: 1;
  }

  .bgm-center {
    grid-template-rows: auto auto auto;
  }

  .bgm-mixer-grid,
  .bgm-steps {
    grid-template-columns: 1fr;
  }

  .bgm-steps article::after {
    display: none;
  }
}

/* Final dashboard overrides must stay after feature-page skins. */
@media (min-width: 1181px) {
  body.dashboard-open .sidebar {
    display: grid !important;
    grid-template-rows: 74px minmax(0, 1fr) 88px !important;
    width: 128px !important;
    min-width: 128px !important;
    height: 100dvh !important;
    padding: 14px 0 16px !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border: 0 solid #e5e7eb !important;
    border-right-width: 1px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.dashboard-open .brand-card {
    display: grid !important;
    place-items: center !important;
    min-height: 58px !important;
    height: 58px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.dashboard-open .brand-mark {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    background: #ff5b18 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(255, 91, 24, 0.22) !important;
  }

  body.dashboard-open .side-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 3px 0 0 !important;
  }

  body.dashboard-open .side-nav button,
  body.dashboard-open.sidebar-collapsed .side-nav button,
  body.dashboard-open.sidebar-hidden .side-nav button {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-items: initial !important;
    align-content: center !important;
    grid-template-columns: none !important;
    width: 125px !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 6px 0 24px !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #3f4651 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.dashboard-open .side-nav button::before,
  body.dashboard-open.sidebar-collapsed .side-nav button::before,
  body.dashboard-open.sidebar-hidden .side-nav button::before {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 3px !important;
    border-radius: 0 3px 3px 0 !important;
    content: "" !important;
    background: transparent !important;
  }

  body.dashboard-open .side-nav button .nav-symbol,
  body.dashboard-open .side-nav button .svg-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    color: currentColor !important;
  }

  body.dashboard-open .side-nav button span:not(.nav-symbol):not(.svg-icon),
  body.dashboard-open.sidebar-collapsed .side-nav button span:not(.nav-symbol):not(.svg-icon),
  body.dashboard-open.sidebar-hidden .side-nav button span:not(.nav-symbol):not(.svg-icon) {
    display: block !important;
    min-width: 0 !important;
    max-width: 70px !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    opacity: 1 !important;
    color: currentColor !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  body.dashboard-open .side-nav button:hover {
    color: #ff5b18 !important;
    background: #fff7f2 !important;
    transform: none !important;
  }

  body.dashboard-open .side-nav button.active {
    color: #ff5b18 !important;
    background: #fff3ed !important;
  }

  body.dashboard-open .side-nav button.active::before {
    background: #ff5b18 !important;
  }

  body.dashboard-open .topbar {
    display: grid !important;
    position: static !important;
    grid-template-columns: 300px minmax(0, 1fr) !important;
    height: 74px !important;
    min-height: 74px !important;
    padding: 0 28px 0 36px !important;
  }

  body.dashboard-open .view {
    display: block !important;
    grid-row: 2 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  body.dashboard-open .top-actions {
    display: grid !important;
  }

  body.dashboard-open .crumb span {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #6b7280 !important;
  }

  body.dashboard-open .search-box {
    width: auto !important;
    border-radius: 8px !important;
  }

  body.dashboard-open .orange-side {
    grid-template-rows: 354px 300px !important;
  }

  body.dashboard-open .orange-quick-list {
    gap: 18px !important;
    padding: 18px !important;
  }

  body.dashboard-open .orange-quick-action {
    grid-template-columns: 52px minmax(0, 1fr) 18px !important;
    grid-template-rows: auto auto !important;
    min-height: 78px !important;
    padding: 12px 16px !important;
  }

  body.dashboard-open .orange-quick-action > span {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 46px !important;
    height: 46px !important;
  }

  body.dashboard-open .orange-quick-action b {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    writing-mode: horizontal-tb !important;
    white-space: nowrap;
    font-size: 15px !important;
  }

  body.dashboard-open .orange-quick-action small {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    writing-mode: horizontal-tb !important;
    font-size: 12px !important;
  }

  body.dashboard-open .orange-quick-action i {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  body.dashboard-open .orange-dashboard {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: 662px 144px !important;
    align-content: start !important;
    gap: 12px 16px !important;
  }

  body.dashboard-open .orange-dashboard-main {
    grid-template-rows: 132px 248px auto !important;
    align-content: start !important;
    gap: 16px !important;
  }

  body.dashboard-open .orange-stat-card {
    min-height: 132px !important;
    padding: 0 24px !important;
  }

  body.dashboard-open .orange-stat-card strong {
    font-size: 31px !important;
  }

  body.dashboard-open .orange-flow {
    height: 196px !important;
    padding: 20px 16px 16px !important;
  }

  body.dashboard-open .orange-flow-card {
    height: 160px !important;
    min-height: 160px !important;
  }

  body.dashboard-open .orange-recent-panel {
    align-self: start !important;
    height: auto !important;
  }

  body.dashboard-open .orange-steps {
    height: 144px !important;
    min-height: 144px !important;
    padding: 16px 20px !important;
  }

  body.dashboard-open .orange-step,
  body.dashboard-open .orange-add-step {
    min-height: 92px !important;
  }
}

@media (max-width: 1180px) {
  body.dashboard-open {
    overflow: auto !important;
  }

  body.dashboard-open .main,
  body.dashboard-open .view {
    height: auto !important;
    overflow: visible !important;
  }

  body.dashboard-open .view {
    padding: 12px !important;
  }

  body.dashboard-open .topbar {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  body.dashboard-open .crumb {
    min-height: 34px !important;
  }

  body.dashboard-open .top-actions {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
  }

  body.dashboard-open .search-box,
  body.dashboard-open .dashboard-ffmpeg-pill,
  body.dashboard-open .top-pill,
  body.dashboard-open .dashboard-start-btn {
    width: 100% !important;
  }

  body.dashboard-open .orange-dashboard,
  body.dashboard-open .orange-dashboard-main,
  body.dashboard-open .orange-side,
  body.dashboard-open .orange-flow,
  body.dashboard-open .orange-steps {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  body.dashboard-open .orange-dashboard {
    width: 100% !important;
    min-width: 0 !important;
    align-content: start !important;
  }

  body.dashboard-open .orange-dashboard-main {
    display: block !important;
    order: 1 !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  body.dashboard-open .orange-dashboard-main > * + * {
    margin-top: 12px !important;
  }

  body.dashboard-open .orange-flow-panel,
  body.dashboard-open .orange-recent-panel {
    height: auto !important;
    min-height: 0 !important;
  }

  body.dashboard-open .orange-side {
    order: 2 !important;
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body.dashboard-open .orange-steps {
    order: 3 !important;
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body.dashboard-open .orange-dashboard,
  body.dashboard-open .orange-dashboard-main,
  body.dashboard-open .orange-side {
    gap: 12px !important;
  }

  body.dashboard-open .orange-flow {
    gap: 12px !important;
    padding: 12px !important;
  }

  body.dashboard-open .orange-flow-arrow,
  body.dashboard-open .orange-step::after {
    display: none !important;
  }

  body.dashboard-open .orange-quick-list {
    gap: 10px !important;
    padding: 12px !important;
  }

  body.dashboard-open .orange-quick-action {
    grid-template-columns: 46px minmax(0, 1fr) 16px !important;
    grid-template-rows: auto auto !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
  }

  body.dashboard-open .orange-quick-action > span {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 38px !important;
    height: 38px !important;
  }

  body.dashboard-open .orange-quick-action b {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
  }

  body.dashboard-open .orange-quick-action small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
  }

  body.dashboard-open .orange-quick-action i {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
  }

  body.dashboard-open .orange-steps {
    gap: 12px !important;
    padding: 12px !important;
  }
}

/* Mask workbench */
body.mask-open {
  color-scheme: light;
  color: #1e2633;
  background: #f5f7fb;
}

body.mask-open::before,
body.mask-open::after {
  display: none;
}

body.mask-open .app-shell,
body.mask-open .main-shell,
body.mask-open .workspace,
body.mask-open .content {
  background: #f5f7fb;
}

body.mask-open .main {
  display: grid !important;
  grid-template-rows: 76px minmax(0, 1fr) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.mask-open .topbar {
  display: grid !important;
  grid-row: 1 !important;
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 0 26px !important;
  border: 0 !important;
  border-bottom: 1px solid #e8ebf1 !important;
  border-radius: 0 !important;
  color: #171a22 !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 10px 28px rgba(17,24,39,0.04) !important;
}

body.mask-open .top-actions {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) auto auto auto auto !important;
  gap: 14px !important;
  width: min(1190px, 74vw) !important;
}

body.mask-open .view {
  grid-row: 2 !important;
  height: calc(100dvh - 76px) !important;
  min-height: 0 !important;
  padding: 0 16px 16px !important;
  overflow: hidden !important;
}

.mask-top-search {
  max-width: 540px;
  color: #243044;
  background: #fff;
  border-color: #d8dee9;
}

.mask-selected-chip,
.mask-top-button,
.mask-top-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  color: #1f2937;
  background: #fff;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(27, 39, 62, 0.06);
  white-space: nowrap;
}

.mask-selected-chip {
  background: #fff8ee;
}

.mask-selected-chip i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #39b56a;
}

.mask-top-primary {
  color: #fff;
  background: #ff4b17;
  border-color: #ff4b17;
}

.mask-workbench {
  display: grid;
  grid-template-columns: 300px minmax(420px, 1fr) 300px;
  grid-template-rows: minmax(0, 1fr) 118px;
  grid-template-areas:
    "assets stage inspector"
    "flow flow flow";
  gap: 14px;
  width: 100%;
  height: 100%;
  min-height: 0;
  color: #1f2937;
}

.mask-editor-toolbar {
  display: none;
}

.mask-panel,
.mask-stage-panel,
.mask-flow {
  background: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(42, 54, 78, 0.07);
}

.mask-panel {
  min-width: 0;
  padding: 16px;
  overflow: hidden;
}

.mask-assets-panel {
  grid-area: assets;
}

.mask-panel-title,
.mask-selected-head,
.mask-layer-head,
.mask-stage-header,
.mask-stage-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mask-panel-title h2 {
  margin: 0;
  color: #101828;
  font-size: 18px;
}

.mask-panel-title button,
.mask-selected-head button {
  width: auto;
  min-height: 30px;
  padding: 0 8px;
  color: #697386;
  background: transparent;
  border: 0;
}

.mask-tabs,
.mask-param-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  margin: 14px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #e7ebf2;
}

.mask-tabs button,
.mask-param-tabs button {
  min-height: 34px;
  padding: 0 6px;
  color: #5f6b7d;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.mask-tabs button.active,
.mask-param-tabs button.active {
  color: #ff4b17;
  background: #fff2ec;
}

.mask-upload-zone {
  display: grid;
  place-items: center;
  gap: 8px;
  width: 100%;
  min-height: 118px;
  padding: 16px;
  color: #6b7280;
  background: #fbfcff;
  border: 1px dashed #c9d2df;
  border-radius: 10px;
  text-align: center;
}

.mask-upload-zone strong {
  color: #253044;
  font-size: 14px;
}

.mask-upload-zone.compact {
  border-style: solid;
}

.mask-upload-zone.compact button {
  width: auto;
  min-height: 34px;
  padding: 0 12px;
  color: #fff;
  background: #ff4b17;
  border: 0;
  border-radius: 8px;
}

.mask-asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: 376px;
  overflow: auto;
  padding-right: 4px;
}

.mask-asset-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  color: #394559;
  background:
    linear-gradient(45deg, #eef2f7 25%, transparent 25%),
    linear-gradient(-45deg, #eef2f7 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef2f7 75%),
    linear-gradient(-45deg, transparent 75%, #eef2f7 75%);
  background-color: #fff;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  border: 1px solid #e0e6ef;
  border-radius: 8px;
  cursor: pointer;
}

.mask-asset-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mask-asset-card.selected {
  border-color: #ff6a32;
  box-shadow: 0 0 0 2px rgba(255, 75, 23, 0.12);
}

.mask-asset-card > b {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #fff;
  background: #ff4b17;
  border-radius: 6px;
  opacity: 0;
}

.mask-asset-card.selected > b {
  opacity: 1;
}

.mask-asset-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
}

.mask-asset-thumb img,
.mask-asset-thumb video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mask-asset-card strong,
.mask-asset-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mask-asset-card small {
  color: #7b8798;
  font-size: 12px;
}

.mask-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding: 12px;
  background: #fbfcff;
  border: 1px solid #e4e9f1;
  border-radius: 10px;
}

.mask-stats strong {
  grid-column: 1 / -1;
  color: #253044;
}

.mask-stats span {
  display: grid;
  place-items: center;
  min-height: 58px;
  color: #6a7485;
  background: #fff;
  border: 1px solid #e7ebf2;
  border-radius: 8px;
  font-size: 12px;
}

.mask-stats b {
  color: #ff4b17;
  font-size: 24px;
}

.mask-stage-panel {
  grid-area: stage;
  display: grid;
  grid-template-rows: auto minmax(230px, 1fr) auto clamp(172px, 22vh, 224px);
  min-width: 0;
  overflow: hidden;
}

.mask-stage-header {
  padding: 12px 18px 0;
  color: #fff;
  pointer-events: none;
}

.mask-stage-header span {
  position: relative;
  z-index: 2;
  padding: 5px 10px;
  background: rgba(11, 23, 39, 0.86);
  border-radius: 6px;
  font-weight: 700;
}

.mask-canvas-wrap {
  min-height: 0;
  padding: 0 18px 14px;
}

.mask-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 230px;
  overflow: hidden;
  background: #162235;
  border-radius: 10px;
  isolation: isolate;
}

.mask-canvas.show-grid::after {
  position: absolute;
  inset: 40px 56px;
  z-index: 5;
  pointer-events: none;
  content: "";
  border: 1px dashed rgba(255, 255, 255, 0.5);
  background-image:
    linear-gradient(rgba(255,255,255,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.22) 1px, transparent 1px);
  background-size: 52px 52px;
}

.mask-base-placeholder,
.mask-base-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mask-base-placeholder {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 36%),
    linear-gradient(145deg, #4b8fb2, #253b52 45%, #192532);
}

.mask-base-media {
  object-fit: cover;
}

.mask-safe-frame {
  position: absolute;
  inset: 72px 90px;
  z-index: 6;
  pointer-events: none;
  border: 2px solid #ff6a32;
}

.mask-canvas-layer {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  width: min(34%, 260px);
  min-width: 96px;
  transform-origin: center;
  border: 1px dashed rgba(255, 255, 255, 0.65);
  cursor: move;
  touch-action: none;
  user-select: none;
}

.mask-canvas-layer.locked {
  cursor: default;
}

.mask-canvas-layer.texture,
.mask-canvas-layer.image_mask[style*="width:100%"] {
  width: 100%;
  min-width: 0;
}

.mask-canvas-layer img,
.mask-canvas-layer video {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.24));
}

.mask-canvas-layer.texture img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.mask-canvas-layer.text_mask {
  width: auto;
  min-width: 180px;
  padding: 8px 16px;
  color: #fff;
  font-size: 42px;
  font-weight: 900;
  line-height: 1.12;
  text-shadow: 0 3px 8px rgba(0,0,0,0.45);
}

.mask-canvas-layer.active {
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #ff4b17;
}

.mask-canvas-layer .handle {
  position: absolute;
  z-index: 9;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid #c7d0df;
  border-radius: 50%;
}

.mask-canvas-layer .handle.nw { left: -8px; top: -8px; }
.mask-canvas-layer .handle.ne { right: -8px; top: -8px; }
.mask-canvas-layer .handle.sw { left: -8px; bottom: -8px; }
.mask-canvas-layer .handle.se { right: -8px; bottom: -8px; }
.mask-canvas-layer .handle.rotate {
  top: -42px;
  left: calc(50% - 7px);
}

.mask-stage-tools {
  padding: 0 18px 12px;
  color: #6b7280;
}

.mask-stage-tools button,
.mask-stage-tools label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 34px;
  padding: 0 10px;
  color: #566173;
  background: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 8px;
}

.mask-stage-tools button.active {
  color: #ff4b17;
  border-color: #ffb199;
}

.mask-stage-tools select {
  width: auto;
  min-height: 28px;
  padding: 0 28px 0 8px;
  color: #253044;
  background: #f8fafc;
}

.mask-layer-list {
  min-height: 0;
  padding: 0 18px 16px;
}

.mask-layer-head {
  color: #687386;
  font-size: 12px;
}

.mask-layer-head strong {
  color: #344054;
}

.mask-layer-rows {
  display: grid;
  gap: 6px;
  max-height: 218px;
  overflow: auto;
  margin-top: 8px;
}

.mask-layer-row {
  position: relative;
  display: grid;
  grid-template-columns: 22px 42px 88px minmax(0, 1fr) 22px 30px;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 5px 10px;
  color: #475467;
  background: #f8fafc;
  border: 1px solid #e4e9f1;
  border-radius: 8px;
  text-align: left;
}

.mask-layer-row.active {
  background: #fff4ef;
  border-color: #ff9b77;
}

.mask-layer-row.base {
  background: #ffffff;
}

.mask-layer-row.locked {
  background: #f9fafb;
}

.mask-layer-row.muted {
  color: #8b95a7;
  opacity: 0.66;
}

.mask-layer-row.sorting {
  border-color: #ff4b17;
  box-shadow: 0 8px 22px rgba(255, 75, 23, 0.14);
}

.mask-layer-row .drag-dot,
.mask-layer-row .mask-layer-more {
  display: grid;
  place-items: center;
  width: 22px;
  min-width: 22px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  color: #667085;
  background: transparent;
  border: 0;
  border-radius: 6px;
}

.mask-layer-row .drag-dot {
  cursor: grab;
  font-weight: 900;
  letter-spacing: -2px;
}

.mask-layer-row .drag-dot:active {
  cursor: grabbing;
}

.mask-layer-row .drag-dot:disabled,
.mask-layer-row .drag-dot.locked {
  cursor: default;
  opacity: 0.45;
}

.mask-layer-row .mask-layer-more:hover,
.mask-layer-row .drag-dot:hover:not(:disabled) {
  color: #ff4b17;
  background: #fff1eb;
}

.mask-layer-more .svg-icon,
.mask-layer-row i .svg-icon {
  width: 18px;
  height: 18px;
}

.mask-layer-menu {
  position: absolute;
  z-index: 40;
  top: 34px;
  right: 8px;
  display: grid;
  width: 154px;
  padding: 6px;
  background: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(27, 39, 62, 0.16);
}

.mask-layer-menu button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 8px;
  color: #344054;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
}

.mask-layer-menu button:hover {
  color: #ff4b17;
  background: #fff1eb;
}

.mask-layer-menu button.danger {
  color: #f04438;
}

body.mask-canvas-dragging,
body.mask-layer-sorting {
  cursor: grabbing;
  user-select: none;
}

.mask-layer-row b {
  display: grid;
  place-items: center;
  width: 40px;
  height: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d9e1ec;
  border-radius: 6px;
}

.mask-layer-row img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mask-layer-row strong,
.mask-layer-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mask-layer-row i {
  color: #344054;
}

.mask-inspector-panel {
  grid-area: inspector;
  overflow: auto;
}

.mask-param-group {
  display: grid;
  gap: 12px;
  padding: 10px 0 16px;
  border-bottom: 1px solid #e9edf4;
}

.mask-param-group h3 {
  margin: 0;
  color: #344054;
  font-size: 15px;
}

.mask-param-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #344054;
}

.mask-param-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mask-param-row select,
.mask-param-row input[type="text"] {
  min-height: 36px;
  color: #253044;
  background: #fff;
  border: 1px solid #d9e1ec;
  border-radius: 8px;
}

.mask-range-field {
  grid-template-columns: 96px minmax(0, 1fr) 52px;
}

.mask-range-field input[type="range"] {
  width: 100%;
  height: 4px;
  min-height: 0;
  appearance: none;
  background: linear-gradient(90deg, #ff4b17 0%, #ff4b17 calc(var(--range, 0) * 1%), #d8dde7 calc(var(--range, 0) * 1%), #d8dde7 100%);
  border-radius: 999px;
  cursor: pointer;
}

body.mask-open .mask-range-field input[type="range"] {
  min-height: 4px !important;
  padding: 0 !important;
  background: linear-gradient(90deg, #ff4b17 0%, #ff4b17 calc(var(--range, 0) * 1%), #d8dde7 calc(var(--range, 0) * 1%), #d8dde7 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.mask-range-field input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  appearance: none;
  background: #fff;
  border: 3px solid #ff4b17;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(255, 75, 23, 0.24);
}

.mask-range-field input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #fff;
  border: 3px solid #ff4b17;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(255, 75, 23, 0.24);
}

.mask-range-field input[type="range"]::-moz-range-track {
  height: 4px;
  background: transparent;
  border: 0;
}

.mask-range-field b {
  display: grid;
  place-items: center;
  min-height: 32px;
  color: #4b5565;
  background: #fff;
  border: 1px solid #d9e1ec;
  border-radius: 8px;
  font-size: 12px;
}

.mask-param-row.toggle {
  grid-template-columns: 1fr 48px;
}

.mask-param-row.toggle input {
  position: relative;
  width: 42px;
  height: 24px;
  min-height: 24px;
  appearance: none;
  background: #e5e8ef;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}

body.mask-open .mask-param-row.toggle input {
  width: 42px !important;
  min-height: 24px !important;
  padding: 0 !important;
  background: #e5e8ef !important;
  border: 0 !important;
  box-shadow: none !important;
}

.mask-param-row.toggle input::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  content: "";
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(31, 41, 55, 0.18);
  transition: transform 0.2s ease;
}

.mask-param-row.toggle input:checked {
  background: #ff4b17;
}

body.mask-open .mask-param-row.toggle input:checked {
  background: #ff4b17 !important;
}

.mask-param-row.toggle input:checked::after {
  transform: translateX(18px);
}

.mask-param-row.toggle input:focus-visible {
  outline: 2px solid rgba(255, 75, 23, 0.28);
  outline-offset: 3px;
}

.mask-param-row.text {
  grid-template-columns: 1fr;
}

.mask-outline-btn,
.mask-danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  color: #ff4b17;
  background: #fff;
  border: 1px solid #ff6a32;
  border-radius: 8px;
  font-weight: 800;
}

.mask-danger-btn {
  color: #ff331f;
  border-color: #ff9f91;
}

.mask-flow {
  grid-area: flow;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 20px minmax(180px, 1fr) 20px minmax(180px, 1fr) 20px minmax(180px, 1fr) minmax(210px, 1.1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.mask-flow article,
.mask-flow-run {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  min-height: 76px;
  padding: 12px;
  color: #344054;
  background: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  text-align: left;
}

.mask-flow article b,
.mask-flow-run b {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #ff4b17;
  background: #fff2ec;
  border-radius: 8px;
  font-size: 18px;
}

.mask-flow article span,
.mask-flow-run span,
.mask-flow article small,
.mask-flow-run small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mask-flow article span,
.mask-flow-run span {
  color: #1f2937;
  font-weight: 800;
}

.mask-flow article small,
.mask-flow-run small {
  color: #7b8798;
}

.mask-flow article.active,
.mask-flow-run {
  background: #fff8f4;
  border-color: #ffb199;
}

.mask-flow-run {
  width: 100%;
  cursor: pointer;
}

.mask-flow article.done b {
  color: #fff;
  background: #42b979;
}

.mask-flow > i {
  color: #5f6b7d;
  font-style: normal;
  text-align: center;
}

.mask-workbench {
  grid-template-rows: 94px minmax(0, 1fr) 98px;
  grid-template-areas:
    "toolbar toolbar toolbar"
    "assets stage inspector"
    "flow flow flow";
}

.mask-editor-toolbar {
  grid-area: toolbar;
  display: grid;
  grid-template-rows: 46px 40px;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  background: rgba(255,255,255,0.96);
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(42,54,78,0.06);
}

.mask-primary-toolbar,
.mask-format-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mask-primary-toolbar button,
.mask-primary-toolbar select,
.mask-format-toolbar button,
.mask-format-toolbar select,
.mask-format-toolbar input {
  min-height: 32px;
  color: #192232;
  background: #fff;
  border: 1px solid #d8dee9;
  border-radius: 8px;
}

.mask-primary-toolbar button,
.mask-format-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  padding: 0 10px;
  font-weight: 800;
}

.mask-ratio-select,
.mask-zoom-select {
  width: auto;
  padding: 0 30px 0 12px;
  font-weight: 850;
}

.mask-task-title {
  display: grid;
  grid-template-columns: auto 28px;
  align-items: center;
  column-gap: 4px;
  min-width: 210px;
}

.mask-task-title strong {
  color: #151b27;
  font-size: 15px;
}

.mask-task-title span {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4b5a6f;
  font-size: 12px;
}

.mask-task-title span i {
  width: 9px;
  height: 9px;
  background: #35b56d;
  border-radius: 50%;
}

.mask-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 12px;
}

.mask-play-button {
  width: 34px !important;
  min-width: 34px;
  padding: 0 !important;
  color: #fff !important;
  background: #111827 !important;
  border-color: #111827 !important;
  border-radius: 50% !important;
}

.mask-editor-soft {
  background: #fff !important;
}

.mask-editor-primary {
  color: #fff !important;
  background: #ff5a1f !important;
  border-color: #ff5a1f !important;
}

.mask-format-toolbar {
  padding-top: 4px;
  border-top: 1px solid #edf0f6;
  overflow: hidden;
}

.mask-format-toolbar select {
  width: 136px;
  padding: 0 28px 0 10px;
}

.mask-stepper {
  display: grid;
  grid-template-columns: 28px 52px 28px;
  align-items: center;
}

.mask-stepper input {
  width: 52px;
  min-width: 0;
  padding: 0;
  text-align: center;
  border-radius: 0;
}

.mask-stepper button {
  width: 28px;
  padding: 0;
}

.mask-toolbar-count {
  margin-left: auto;
  color: #5f6b7d;
  font-size: 12px;
  white-space: nowrap;
}

.mask-search-box {
  display: block;
  margin: 12px 0 10px;
}

.mask-search-box input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  color: #243044;
  background: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(42,54,78,0.05);
}

.mask-assets-panel {
  grid-area: assets;
}

.mask-stage-panel {
  grid-area: stage;
  grid-template-rows: auto minmax(0, 1fr) auto minmax(242px, 28vh);
  border-radius: 8px;
}

.mask-inspector-panel {
  grid-area: inspector;
  border-radius: 8px;
}

.mask-flow {
  grid-area: flow;
  grid-column: auto;
  min-height: 0;
  border-radius: 8px;
}

.mask-panel,
.mask-stage-panel,
.mask-flow,
.mask-canvas,
.mask-upload-zone,
.mask-asset-card,
.mask-layer-row,
.mask-flow article,
.mask-flow-run {
  border-radius: 8px;
}

.mask-stage-header {
  padding: 10px 16px 0;
}

.mask-canvas-wrap {
  padding: 0 16px 12px;
}

.mask-canvas {
  min-height: 360px;
  background: #101827;
}

.mask-canvas.show-grid::after {
  inset: 36px 52px;
  border-color: rgba(255,255,255,0.48);
  background-size: 48px 48px;
}

.mask-safe-frame {
  inset: 58px 76px;
  border: 1px dashed rgba(255,255,255,0.78);
}

.mask-canvas-layer {
  border: 1px dashed rgba(255,255,255,0.72);
  transition: box-shadow 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

.mask-canvas-layer.active {
  border: 2px solid #12c8d8;
  box-shadow: 0 0 0 1px rgba(18,200,216,0.2), 0 12px 28px rgba(0,0,0,0.18);
}

.mask-canvas-layer .handle {
  width: 12px;
  height: 12px;
  background: #fff;
  border-color: #12c8d8;
  box-shadow: 0 2px 8px rgba(18,200,216,0.36);
  touch-action: none;
}

.mask-canvas-layer .handle.n { top: -7px; left: calc(50% - 6px); }
.mask-canvas-layer .handle.e { right: -7px; top: calc(50% - 6px); }
.mask-canvas-layer .handle.s { bottom: -7px; left: calc(50% - 6px); }
.mask-canvas-layer .handle.w { left: -7px; top: calc(50% - 6px); }

.mask-canvas-layer .handle[data-mask-resize-handle]::before {
  position: absolute;
  inset: -10px;
  content: "";
}

.mask-canvas-layer .handle.nw,
.mask-canvas-layer .handle.se {
  cursor: nwse-resize;
}

.mask-canvas-layer .handle.ne,
.mask-canvas-layer .handle.sw {
  cursor: nesw-resize;
}

.mask-canvas-layer .handle.n,
.mask-canvas-layer .handle.s {
  cursor: ns-resize;
}

.mask-canvas-layer .handle.e,
.mask-canvas-layer .handle.w {
  cursor: ew-resize;
}

.mask-canvas-layer.locked .handle,
.mask-canvas-layer[data-mask-fill="1"] .handle,
.mask-canvas-layer.locked .mask-selection-center,
.mask-canvas-layer[data-mask-fill="1"] .mask-selection-center {
  display: none;
}

body.mask-layer-resizing,
body.mask-layer-resizing * {
  user-select: none !important;
}

.mask-canvas-layer .handle.rotate {
  top: -40px;
  background: #12c8d8;
  border-color: #fff;
}

.mask-canvas-layer .handle.rotate::before {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 1px;
  height: 22px;
  content: "";
  background: #12c8d8;
}

.mask-selection-center {
  position: absolute;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
  z-index: 10;
  width: 10px;
  height: 10px;
  background: #12c8d8;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(18,200,216,0.42);
}

.mask-canvas-guides {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
}

.mask-guide-x,
.mask-guide-y,
.mask-safe-dash {
  position: absolute;
  display: block;
}

.mask-guide-x {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(18,200,216,0.5);
}

.mask-guide-y {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: rgba(18,200,216,0.5);
}

.mask-safe-dash {
  inset: 58px 76px;
  border: 1px dashed rgba(255,255,255,0.62);
}

.mask-floating-menu,
.mask-floating-toolbar {
  position: absolute;
  left: var(--layer-left);
  top: var(--layer-top);
  z-index: 42;
  pointer-events: auto;
  background: #fff;
  border: 1px solid #dce3ee;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(15,23,42,0.2);
}

.mask-floating-menu {
  display: grid;
  width: 154px;
  padding: 6px;
  transform: translate(26px, -132%);
}

.mask-floating-menu button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 8px;
  color: #192232;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-weight: 800;
  text-align: left;
}

.mask-floating-menu button:hover,
.mask-floating-toolbar button:hover {
  color: #ff5a1f;
  background: #fff1eb;
}

.mask-floating-toolbar button:disabled {
  color: #9aa5b5;
  cursor: not-allowed;
  opacity: 0.52;
  background: transparent;
}

.mask-floating-menu kbd {
  padding: 2px 5px;
  color: #5f6b7d;
  background: #f4f6fa;
  border: 1px solid #e1e6ef;
  border-radius: 5px;
  font-size: 11px;
  font-family: inherit;
}

.mask-floating-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: min(600px, 88%);
  padding: 6px;
  transform: translate(-50%, 24px);
}

.mask-floating-toolbar button {
  width: auto;
  min-height: 28px;
  padding: 0 8px;
  color: #263144;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.mask-stage-tools {
  padding: 0 16px 10px;
}

.mask-stage-tools button,
.mask-stage-tools label {
  min-height: 32px;
  border-radius: 8px;
}

.mask-editor-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0 16px 12px;
}

.mask-timeline,
.mask-layer-list {
  min-width: 0;
  min-height: 0;
}

.mask-timeline {
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr);
  background: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  overflow: hidden;
}

.mask-timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  border-bottom: 1px solid #edf0f6;
}

.mask-timeline-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mask-timeline-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  color: #ff4b17;
  background: #fff4ef;
  border: 1px solid #ffd0bf;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.mask-timeline-tools button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  color: #344054;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 850;
}

.mask-timeline-tools button:hover {
  color: #ff4b17;
  background: #fff7f2;
  border-color: #ffd0bf;
}

.mask-timeline-tools .svg-icon {
  width: 15px;
  height: 15px;
}

.mask-timeline-player,
.mask-timeline-zoom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4b5a6f;
  font-size: 12px;
  font-weight: 800;
}

.mask-timeline-zoom button {
  width: auto;
  min-height: 28px;
  padding: 0 9px;
  background: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
}

.mask-timeline-zoom i {
  width: 92px;
  height: 4px;
  background: linear-gradient(90deg, #12c8d8 0 58%, #dfe5ef 58% 100%);
  border-radius: 999px;
}

.mask-timeline-body {
  position: relative;
  display: grid;
  grid-template-rows: repeat(5, minmax(24px, 1fr));
  gap: 3px;
  padding: 8px 64px 8px 86px;
  overflow: hidden;
  background: #fbfcff;
}

.mask-timeline-playhead {
  position: absolute;
  z-index: 8;
  top: 0;
  bottom: 0;
  left: 126px;
  width: 2px;
  background: #111827;
}

.mask-timeline-playhead::before {
  position: absolute;
  top: 0;
  left: -5px;
  width: 12px;
  height: 12px;
  content: "";
  background: #111827;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.mask-timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  min-height: 24px;
}

.mask-timeline-row strong {
  position: absolute;
  left: -82px;
  top: 50%;
  width: 72px;
  overflow: hidden;
  color: #526074;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-50%);
}

.mask-timeline-lane {
  position: relative;
  grid-column: 2;
  overflow: hidden;
  background: #fff;
  border: 1px dashed #e1e7f0;
  border-radius: 7px;
}

.mask-timeline-clip {
  position: absolute;
  z-index: 3;
  left: var(--clip-start);
  top: 3px;
  bottom: 3px;
  width: var(--clip-width);
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 0;
  padding: 3px 8px;
  color: #243044;
  background: #fff;
  border: 1px solid #d7e0eb;
  border-radius: 6px;
  text-align: left;
  pointer-events: auto;
  box-shadow: 0 6px 14px rgba(31,41,55,0.05);
}

.mask-timeline-thumb {
  flex: 0 0 42px;
  width: 42px;
  height: 26px;
  overflow: hidden;
  color: #ff4b17;
  background:
    linear-gradient(45deg, #f4f6fa 25%, transparent 25%),
    linear-gradient(-45deg, #f4f6fa 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f4f6fa 75%),
    linear-gradient(-45deg, transparent 75%, #f4f6fa 75%),
    #fff;
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  border-radius: 5px;
}

.mask-timeline-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mask-timeline-thumb.placeholder {
  display: grid;
  place-items: center;
  color: #ff4b17;
  background: #fff4ef;
  border: 1px solid #ffd0bf;
  font-size: 12px;
  font-weight: 900;
}

.mask-timeline-copy {
  display: grid;
  min-width: 0;
}

.mask-timeline-clip b,
.mask-timeline-clip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mask-timeline-clip b {
  font-size: 12px;
}

.mask-timeline-clip small {
  color: #667085;
  font-size: 10px;
}

.mask-timeline-clip.active {
  color: #063f45;
  background: #d9fbff;
  border-color: #12c8d8;
  box-shadow: 0 0 0 2px rgba(18,200,216,0.18);
}

.mask-timeline-clip.mask,
.mask-timeline-clip.image_mask,
.mask-timeline-clip.video_mask {
  background: #eafffb;
}

.mask-timeline-clip.sticker,
.mask-timeline-clip.texture {
  background: #fff4e8;
}

.mask-timeline-clip.text_mask {
  background: #f1edff;
}

.mask-timeline-clip.audio {
  background: #eef8ff;
}

.mask-timeline-clip.audio::after {
  position: absolute;
  right: 8px;
  bottom: 5px;
  left: 56px;
  height: 10px;
  content: "";
  opacity: 0.58;
  background: repeating-linear-gradient(90deg, #43d0aa 0 3px, transparent 3px 7px);
  border-radius: 999px;
}

.mask-timeline-add {
  position: absolute;
  z-index: 7;
  top: 11px;
  left: min(340px, 38%);
  display: grid;
  place-items: center;
  width: 54px;
  height: 44px;
  color: #202b3d;
  background: #f3f5fa;
  border: 1px dashed #d8dee8;
  border-radius: 8px;
  font-size: 24px;
  font-weight: 500;
}

.mask-timeline-add:hover {
  color: #ff4b17;
  background: #fff7f2;
  border-color: #ffb199;
}

.mask-timeline-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: #8a95a8;
  font-size: 12px;
}

.mask-editor-bottom .mask-layer-list {
  display: none;
}

.mask-editor-bottom .mask-layer-rows {
  max-height: 190px;
}

.mask-editor-bottom .mask-layer-head {
  min-height: 32px;
  padding: 0 2px;
}

.mask-tip-card {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 46;
  width: min(280px, 38%);
  padding: 14px;
  color: #211033;
  background: #ead2ff;
  border: 1px solid #d8b9ff;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(63,31,96,0.18);
}

.mask-tip-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}

.mask-tip-card p {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.55;
}

.mask-tip-card button {
  float: right;
  width: auto;
  min-height: 28px;
  padding: 0 10px;
  color: #fff;
  background: #111827;
  border: 0;
  border-radius: 7px;
  font-weight: 850;
}

body.mask-open .mask-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-flow: initial;
}

body.mask-open .mask-tabs button {
  min-width: 0;
  font-size: 12px;
}

@media (max-width: 1500px) {
  .mask-workbench {
    grid-template-columns: 310px minmax(460px, 1fr) 310px;
  }

  .mask-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .mask-flow > i {
    display: none;
  }
}

@media (max-width: 1120px) {
  body.mask-open .main {
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.mask-open .topbar {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    gap: 10px !important;
  }

  body.mask-open .top-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 8px !important;
  }

  body.mask-open .top-actions .search-box {
    grid-column: 1 / -1;
    max-width: none;
  }

  body.mask-open .view {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 10px !important;
  }

  .mask-selected-chip,
  .mask-top-button,
  .mask-top-primary {
    justify-content: center;
    min-width: 0;
    width: 100%;
    padding: 0 10px;
    gap: 6px;
    overflow: hidden;
    font-size: 13px;
  }

  .mask-selected-chip span,
  .mask-top-button span,
  .mask-top-primary span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mask-workbench {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "toolbar"
      "assets"
      "stage"
      "inspector"
      "flow";
    height: auto;
  }

  .mask-editor-toolbar {
    grid-template-rows: auto auto;
    height: auto;
  }

  .mask-primary-toolbar,
  .mask-format-toolbar {
    flex-wrap: wrap;
  }

  .mask-flow {
    grid-template-columns: 1fr;
  }

  .mask-panel,
  .mask-stage-panel {
    overflow: visible;
  }

  .mask-stage-panel {
    grid-template-rows: auto auto auto auto;
  }

  .mask-editor-bottom {
    grid-template-columns: 1fr;
  }

  .mask-canvas {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 360px;
  }

  .mask-layer-rows {
    max-height: none;
  }
}

@media (max-width: 720px) {
  body.mask-open .top-actions .search-box {
    display: none;
  }

  .mask-workbench {
    gap: 10px;
  }

  .mask-tabs,
  .mask-param-tabs {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mask-asset-grid,
  .mask-stats {
    grid-template-columns: 1fr 1fr;
  }

  .mask-param-row,
  .mask-range-field,
  .mask-param-row.toggle {
    grid-template-columns: 1fr;
  }

  .mask-canvas {
    min-height: 0;
  }

  .mask-floating-menu,
  .mask-floating-toolbar {
    display: none;
  }

  .mask-tip-card {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }

  .mask-layer-row {
    grid-template-columns: 18px 38px minmax(0, 1fr) 24px;
  }

  .mask-layer-row strong {
    display: none;
  }

  .mask-layer-row i {
    display: none;
  }
}

/* Final precedence for the rename workbench over shared workbench overrides */
body.rename-open .main {
  display: grid !important;
  grid-template-rows: 74px minmax(0, 1fr) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--rename-soft) !important;
}

body.rename-open .topbar {
  display: grid !important;
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
}

body.rename-open .view {
  display: block !important;
  height: calc(100dvh - 74px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.rename-open .sidebar {
  display: grid !important;
  width: 128px !important;
  min-width: 128px !important;
  max-width: 128px !important;
}

@media (max-width: 1080px) {
  body.rename-open .main {
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.rename-open .topbar {
    display: grid !important;
    height: auto !important;
    min-height: 68px !important;
    max-height: none !important;
  }

  body.rename-open .view {
    height: auto !important;
    overflow: visible !important;
  }

  body.rename-open .sidebar {
    display: none !important;
  }
}

/* Settings page: faithful light-mode reconstruction from the supplied mockup */
body.settings-open {
  color-scheme: light;
  --settings-bg: #f8fafc;
  --settings-surface: #ffffff;
  --settings-text: #111827;
  --settings-muted: #667085;
  --settings-border: #e2e8f0;
  --settings-soft: #f5f7fb;
  --settings-orange: #ff5b16;
  --settings-orange-strong: #f04b0b;
  --settings-green: #21ad66;
  --settings-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  background: var(--settings-bg) !important;
  color: var(--settings-text) !important;
}

body.settings-open .app-shell {
  grid-template-columns: 156px minmax(0, 1fr) !important;
  min-height: 100dvh !important;
  background: var(--settings-bg) !important;
}

body.settings-open .sidebar {
  display: flex !important;
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  padding: 20px 10px !important;
  border-right: 1px solid var(--settings-border) !important;
  background: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.settings-open .sidebar::before,
body.settings-open .sidebar::after,
body.settings-open .glass-panel::before,
body.settings-open .glass-panel::after,
body.settings-open .traffic,
body.settings-open .brand-title,
body.settings-open .brand-subtitle,
body.settings-open .sidebar-controls,
body.settings-open .sidebar-storage,
body.settings-open .sidebar-version {
  display: none !important;
}

body.settings-open .brand-card {
  justify-content: center !important;
  min-height: 74px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.settings-open .brand-mark {
  width: 58px !important;
  height: 58px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ff6d1b 0%, #ff390d 100%) !important;
  color: #fff !important;
  font-size: 0 !important;
  box-shadow: 0 12px 28px rgba(255, 91, 22, 0.28) !important;
}

body.settings-open .brand-mark::after {
  content: "M";
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

body.settings-open .nav-label {
  display: none !important;
}

body.settings-open .side-nav {
  gap: 14px !important;
  margin-top: 26px !important;
}

body.settings-open .side-nav button {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 48px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #374151 !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 650 !important;
}

body.settings-open .side-nav button .svg-icon,
body.settings-open .side-nav button svg {
  width: 24px !important;
  height: 24px !important;
  color: currentColor !important;
  stroke-width: 1.85 !important;
}

body.settings-open .side-nav button:hover {
  background: #fff3ec !important;
  color: var(--settings-orange) !important;
  transform: none !important;
}

body.settings-open .side-nav button.active {
  background: #fff2ec !important;
  color: var(--settings-orange) !important;
  box-shadow: none !important;
}

body.settings-open .sidebar-home {
  display: none !important;
}

body.settings-open .main {
  display: grid !important;
  grid-template-rows: 88px minmax(0, 1fr) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--settings-bg) !important;
}

body.settings-open .topbar {
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) !important;
  align-items: center !important;
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  margin: 0 !important;
  padding: 0 46px 0 28px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--settings-border) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.settings-open .topbar::before,
body.settings-open .topbar::after {
  display: none !important;
}

body.settings-open .crumb {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #111827 !important;
}

body.settings-open .crumb span,
body.settings-open .crumb b {
  color: #111827 !important;
  font-size: 17px !important;
  font-weight: 750 !important;
}

body.settings-open #page-title {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 17px !important;
  font-weight: 750 !important;
}

body.settings-open .top-actions {
  display: grid !important;
  grid-template-columns: minmax(320px, 448px) 188px 144px 148px !important;
  justify-content: end !important;
  align-items: center !important;
  gap: 14px !important;
}

.settings-top-search,
.settings-version-pill,
.settings-top-button,
.settings-top-primary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  border-radius: 8px;
  font-weight: 760;
}

.settings-top-search {
  gap: 12px;
  padding: 0 16px;
  border: 1px solid var(--settings-border);
  background: #fff;
  color: #6b7280;
}

.settings-top-search .svg-icon,
.settings-top-search svg {
  width: 22px;
  height: 22px;
}

.settings-top-search input {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111827;
  box-shadow: none;
  font-size: 16px;
}

.settings-version-pill {
  justify-content: center;
  gap: 8px;
  background: #e8f7ef;
  color: #178f51;
}

.settings-version-pill b {
  font-weight: 850;
}

.settings-version-pill .svg-icon,
.settings-version-pill svg {
  width: 22px;
  height: 22px;
}

.settings-top-button,
.settings-top-primary {
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--settings-border);
  background: #fff;
  color: #1f2937;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.settings-top-primary {
  border-color: var(--settings-orange);
  background: var(--settings-orange);
  color: #fff;
  box-shadow: 0 10px 20px rgba(255, 91, 22, 0.22);
}

.settings-top-button:hover,
.settings-top-primary:hover {
  transform: translateY(-1px);
}

.settings-top-primary:hover {
  background: var(--settings-orange-strong);
}

body.settings-open .view {
  height: calc(100dvh - 88px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.settings-page {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 112px;
  height: 100%;
  min-height: 0;
  color: var(--settings-text);
  background: var(--settings-bg);
}

.settings-breadcrumb {
  display: none;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 430px;
  gap: 18px;
  min-height: 0;
  padding: 18px 26px 10px;
  overflow: hidden;
}

.settings-main,
.settings-side {
  min-height: 0;
  overflow: auto;
}

.settings-main {
  display: grid;
  grid-template-rows: 160px 186px 160px minmax(178px, 1fr);
  gap: 10px;
}

.settings-side {
  display: grid;
  grid-template-rows: minmax(386px, 1fr) 178px 152px;
  gap: 10px;
}

.settings-card,
.settings-side-card {
  border: 1px solid var(--settings-border);
  border-radius: 8px;
  background: var(--settings-surface);
  box-shadow: var(--settings-shadow);
}

.settings-card {
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr);
  min-height: 0;
  padding: 0 20px 16px;
}

.settings-card-head,
.settings-side-card header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--settings-border);
}

.settings-card-head {
  min-height: 54px;
}

.settings-card-head h2,
.settings-side-card h2 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 850;
}

.settings-card-icon,
.settings-side-card header > span {
  display: inline-grid;
  place-items: center;
  color: var(--settings-orange);
}

.settings-card-icon .svg-icon,
.settings-card-icon svg,
.settings-side-card header .svg-icon,
.settings-side-card header svg {
  width: 25px;
  height: 25px;
}

.settings-card-body {
  min-height: 0;
  padding-top: 16px;
}

.settings-grid {
  display: grid;
  gap: 16px;
}

.settings-grid.four {
  grid-template-columns: 1.05fr 0.8fr 1.28fr 0.66fr;
}

.settings-field {
  display: grid;
  gap: 8px;
  color: #111827;
  font-size: 14px;
  font-weight: 760;
}

.settings-field input,
.settings-field select,
.settings-path-control input {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--settings-border);
  border-radius: 8px;
  background: #fff;
  color: #111827;
  box-shadow: none;
  font-size: 15px;
  font-weight: 520;
}

.settings-field select {
  color: #111827;
  background-color: #fff;
}

.settings-field-hint {
  min-width: 0;
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.settings-path-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
}

.settings-path-control input {
  border-radius: 8px 0 0 8px;
}

.settings-path-control button {
  display: grid;
  place-items: center;
  width: 48px;
  min-height: 44px;
  border: 1px solid var(--settings-border);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: #fff;
  color: #1f2937;
}

.settings-path-control button svg {
  width: 22px;
  height: 22px;
}

.settings-ffmpeg-row {
  display: grid;
  grid-template-columns: 240px minmax(300px, 1fr) 128px 128px;
  align-items: end;
  gap: 18px;
}

.settings-status-inline {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 72px;
  color: #111827;
  font-size: 15px;
  font-weight: 760;
}

.settings-status-inline strong,
.settings-status-line strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--settings-green);
  font-weight: 820;
}

.settings-status-inline strong.warn,
.settings-status-line strong.warn {
  color: #c2410c;
}

.settings-status-inline i,
.settings-status-line i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}

.settings-soft-button,
.settings-mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--settings-border);
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-size: 14px;
  font-weight: 780;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.settings-soft-button:hover,
.settings-mini-button:hover {
  border-color: #fed7c7;
  background: #fff5ef;
  color: var(--settings-orange);
}

.settings-switch-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
}

.settings-inline-hint {
  min-width: 0;
  overflow: hidden;
  color: #6b7280;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.settings-strategy-grid {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1.9fr;
  align-items: center;
  gap: 26px;
}

.settings-range {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 760;
}

.settings-range > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
}

.settings-range input {
  height: 22px;
  accent-color: var(--settings-orange);
}

.settings-range output {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 34px;
  border: 1px solid var(--settings-border);
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-weight: 760;
}

.settings-range small {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  color: #4b5563;
  font-size: 13px;
  font-weight: 520;
}

.settings-toggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 26px;
}

.settings-switch {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) 42px;
  align-items: center;
  gap: 12px;
  min-height: 28px;
  color: #111827;
  font-size: 15px;
  font-weight: 720;
}

.settings-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-switch i {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #d7dce5;
  transition: background 160ms ease;
}

.settings-switch i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
  content: "";
  transition: transform 160ms ease;
}

.settings-switch input:checked + i {
  background: var(--settings-orange);
}

.settings-switch input:checked + i::after {
  transform: translateX(18px);
}

.settings-template-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  margin-bottom: 8px;
  color: #111827;
  font-size: 15px;
  font-weight: 760;
}

.settings-template-table {
  overflow: hidden;
  border: 1px solid var(--settings-border);
  border-radius: 8px;
}

.settings-template-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.6fr) minmax(280px, 1fr) 92px;
  align-items: center;
  min-height: 30px;
  padding: 0 16px;
  border-top: 1px solid var(--settings-border);
  color: #374151;
  font-size: 13px;
}

.settings-template-row:first-child {
  border-top: 0;
}

.settings-template-row.header {
  min-height: 34px;
  background: linear-gradient(180deg, #f9fafb, #f4f6fa);
  color: #111827;
  font-weight: 780;
}

.settings-template-row strong {
  color: #111827;
  font-weight: 650;
}

.settings-template-actions {
  display: flex;
  justify-content: end;
  gap: 8px;
}

.settings-template-actions button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1f2937;
}

.settings-template-actions button:hover {
  color: var(--settings-orange);
}

.settings-template-actions svg {
  width: 18px;
  height: 18px;
}

.settings-template-empty,
.settings-empty,
.settings-modal-state {
  display: grid;
  place-items: center;
  min-height: 92px;
  color: #6b7280;
  font-weight: 650;
}

.settings-side-card {
  padding: 0 22px 18px;
}

.settings-side-card header {
  min-height: 58px;
}

.settings-system-card {
  display: grid;
  grid-template-rows: 58px auto 1px auto 1px auto minmax(0, 1fr);
}

.settings-status-list {
  display: grid;
  gap: 12px;
  padding: 8px 0 10px;
}

.settings-status-line,
.settings-kv,
.settings-storage-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
  color: #111827;
  font-size: 15px;
}

.settings-side-separator {
  height: 1px;
  background: var(--settings-border);
}

.settings-kv {
  padding: 12px 0;
}

.settings-storage-title {
  padding-top: 14px;
  font-weight: 820;
}

.settings-storage-body {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding-top: 12px;
}

.settings-donut {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: conic-gradient(var(--settings-green) var(--settings-storage), #e5e7eb 0);
  color: #111827;
}

.settings-donut::before {
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.settings-donut strong {
  position: relative;
  font-size: 24px;
  font-weight: 620;
}

.settings-storage-legend {
  display: grid;
  gap: 14px;
  color: #4b5563;
  font-size: 14px;
}

.settings-storage-legend span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-storage-legend i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #a6adba;
}

.settings-storage-legend i.used {
  background: var(--settings-green);
}

.settings-storage-legend b {
  color: #4b5563;
  font-weight: 600;
}

.settings-account-card {
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr) 44px;
}

.settings-account-user {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
}

.settings-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ff8a1c;
  color: #fff;
  font-weight: 900;
}

.settings-account-user strong,
.settings-account-user small {
  display: block;
}

.settings-account-user small {
  color: #6b7280;
}

.settings-account-user b {
  padding: 4px 10px;
  border-radius: 6px;
  background: #dcfce7;
  color: #178f51;
  font-size: 12px;
}

.settings-account-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.settings-account-actions button,
.settings-user-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--settings-border);
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-weight: 760;
}

.settings-security-card p {
  margin: 16px 0 0;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.75;
}

.settings-bottom-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr)) 298px;
  align-items: center;
  gap: 34px;
  min-height: 112px;
  padding: 14px 28px;
  border-top: 1px solid var(--settings-border);
  background: #fff;
  box-shadow: 0 -10px 26px rgba(15, 23, 42, 0.04);
}

.settings-bottom-bar > button {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 10px 16px;
  border: 1px solid var(--settings-border);
  border-radius: 8px;
  background: #fff;
  color: #111827;
  text-align: left;
}

.settings-bottom-bar > button:first-child {
  border-color: #fed7c7;
}

.settings-bottom-bar > button > .svg-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #fff0e8;
  color: var(--settings-orange);
}

.settings-bottom-bar > button:nth-child(2) > .svg-icon {
  background: #eff6ff;
  color: #2374e1;
}

.settings-bottom-bar > button:nth-child(4) > .svg-icon {
  background: #fff1f1;
  color: #ef4444;
}

.settings-bottom-bar strong,
.settings-bottom-bar small {
  display: block;
}

.settings-bottom-bar strong {
  font-size: 16px;
  font-weight: 820;
}

.settings-bottom-bar small {
  color: #6b7280;
  font-size: 13px;
}

.settings-save-state {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding-left: 34px;
  border-left: 1px solid var(--settings-border);
}

.settings-save-state > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--settings-green);
  color: #fff;
}

.settings-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.38);
}

.settings-user-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: min(720px, calc(100dvh - 48px));
  overflow: auto;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.settings-user-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid var(--settings-border);
}

.settings-user-modal h2 {
  margin: 0;
  font-size: 20px;
}

.settings-user-modal header button {
  width: 36px;
  min-height: 36px;
  border: 1px solid var(--settings-border);
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 22px;
}

.settings-registration-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--settings-border);
  font-weight: 760;
}

.settings-user-table {
  padding: 12px 20px 20px;
}

.settings-user-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 90px 100px 80px 84px;
  align-items: center;
  min-height: 50px;
  border-bottom: 1px solid var(--settings-border);
  color: #374151;
  font-size: 14px;
}

.settings-user-row.header {
  min-height: 38px;
  color: #111827;
  font-weight: 820;
}

.settings-user-row strong,
.settings-user-row small {
  display: block;
}

.settings-user-row small {
  color: #6b7280;
}

.settings-modal-state.error {
  color: #b91c1c;
}

body.settings-open .status-dock {
  display: none !important;
}

@media (max-width: 1280px) {
  body.settings-open .app-shell {
    grid-template-columns: 128px minmax(0, 1fr) !important;
  }

  body.settings-open .sidebar {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
  }

  body.settings-open .top-actions {
    grid-template-columns: minmax(240px, 1fr) 160px 128px 132px !important;
  }

  .settings-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .settings-grid.four,
  .settings-ffmpeg-row,
  .settings-strategy-grid {
    grid-template-columns: 1fr 1fr;
  }

  .settings-toggles {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  body.settings-open .app-shell {
    grid-template-columns: 1fr !important;
  }

  body.settings-open .sidebar {
    display: none !important;
  }

  body.settings-open .main {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.settings-open .topbar {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    padding: 14px !important;
  }

  body.settings-open .crumb {
    display: none !important;
  }

  body.settings-open .top-actions,
  .settings-layout,
  .settings-main,
  .settings-side,
  .settings-grid.four,
  .settings-ffmpeg-row,
  .settings-strategy-grid,
  .settings-bottom-bar {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  body.settings-open .view,
  .settings-page {
    height: auto !important;
    overflow: visible !important;
  }

  .settings-layout {
    overflow: visible;
    padding: 12px;
  }

  .settings-main,
  .settings-side {
    overflow: visible;
  }

  .settings-bottom-bar {
    gap: 10px;
    padding: 12px;
  }

  .settings-save-state {
    padding-left: 0;
    border-left: 0;
  }

  .settings-template-row,
  .settings-user-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px;
  }
}

/* Final unified workbench sidebar rail. Keep this block last so page skins cannot diverge. */
body.workbench-open .app-shell,
body.workbench-open.dashboard-open .app-shell,
body.workbench-open.materials-open .app-shell,
body.workbench-open.rename-open .app-shell,
body.workbench-open.process-open .app-shell,
body.workbench-open.bgm-open .app-shell,
body.workbench-open.mask-open .app-shell,
body.workbench-open.settings-open .app-shell {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  grid-template-areas: "sidebar main" !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f5f7fb !important;
}

body.workbench-open.sidebar-hidden .app-shell,
body.workbench-open.dashboard-open.sidebar-hidden .app-shell,
body.workbench-open.materials-open.sidebar-hidden .app-shell,
body.workbench-open.rename-open.sidebar-hidden .app-shell,
body.workbench-open.process-open.sidebar-hidden .app-shell,
body.workbench-open.bgm-open.sidebar-hidden .app-shell,
body.workbench-open.mask-open.sidebar-hidden .app-shell,
body.workbench-open.settings-open.sidebar-hidden .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "main" !important;
}

body.workbench-open .sidebar,
body.workbench-open.dashboard-open .sidebar,
body.workbench-open.materials-open .sidebar,
body.workbench-open.rename-open .sidebar,
body.workbench-open.process-open .sidebar,
body.workbench-open.bgm-open .sidebar,
body.workbench-open.mask-open .sidebar,
body.workbench-open.settings-open .sidebar {
  grid-area: sidebar !important;
  position: sticky !important;
  z-index: 30 !important;
  top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 18px 8px 14px !important;
  color: #4b5563 !important;
  background: #ffffff !important;
  border: 0 !important;
  border-right: 1px solid #e7ebf2 !important;
  border-radius: 0 !important;
  box-shadow: 10px 0 24px rgba(17, 24, 39, 0.035) !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.workbench-open.sidebar-hidden .sidebar,
body.workbench-open.dashboard-open.sidebar-hidden .sidebar,
body.workbench-open.materials-open.sidebar-hidden .sidebar,
body.workbench-open.rename-open.sidebar-hidden .sidebar,
body.workbench-open.process-open.sidebar-hidden .sidebar,
body.workbench-open.bgm-open.sidebar-hidden .sidebar,
body.workbench-open.mask-open.sidebar-hidden .sidebar,
body.workbench-open.settings-open.sidebar-hidden .sidebar {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
}

body.workbench-open .sidebar::before,
body.workbench-open .sidebar::after,
body.workbench-open.process-open .sidebar::after {
  display: none !important;
  content: none !important;
}

body.workbench-open .brand-card,
body.workbench-open.dashboard-open .brand-card,
body.workbench-open.materials-open .brand-card,
body.workbench-open.rename-open .brand-card,
body.workbench-open.process-open .brand-card,
body.workbench-open.bgm-open .brand-card,
body.workbench-open.mask-open .brand-card,
body.workbench-open.exports-open .brand-card,
body.workbench-open.settings-open .brand-card,
body.workbench-open .traffic,
body.workbench-open.dashboard-open .traffic,
body.workbench-open.materials-open .traffic,
body.workbench-open.rename-open .traffic,
body.workbench-open.process-open .traffic,
body.workbench-open.bgm-open .traffic,
body.workbench-open.mask-open .traffic,
body.workbench-open.exports-open .traffic,
body.workbench-open.settings-open .traffic,
body.workbench-open .nav-label,
body.workbench-open.dashboard-open .nav-label,
body.workbench-open.materials-open .nav-label,
body.workbench-open.rename-open .nav-label,
body.workbench-open.process-open .nav-label,
body.workbench-open.bgm-open .nav-label,
body.workbench-open.mask-open .nav-label,
body.workbench-open.exports-open .nav-label,
body.workbench-open.settings-open .nav-label,
body.workbench-open .sidebar-controls,
body.workbench-open.dashboard-open .sidebar-controls,
body.workbench-open.materials-open .sidebar-controls,
body.workbench-open.rename-open .sidebar-controls,
body.workbench-open.process-open .sidebar-controls,
body.workbench-open.bgm-open .sidebar-controls,
body.workbench-open.mask-open .sidebar-controls,
body.workbench-open.exports-open .sidebar-controls,
body.workbench-open.settings-open .sidebar-controls,
body.workbench-open .sidebar-storage,
body.workbench-open.dashboard-open .sidebar-storage,
body.workbench-open.materials-open .sidebar-storage,
body.workbench-open.rename-open .sidebar-storage,
body.workbench-open.process-open .sidebar-storage,
body.workbench-open.bgm-open .sidebar-storage,
body.workbench-open.mask-open .sidebar-storage,
body.workbench-open.exports-open .sidebar-storage,
body.workbench-open.settings-open .sidebar-storage,
body.workbench-open .sidebar-version,
body.workbench-open.dashboard-open .sidebar-version,
body.workbench-open.materials-open .sidebar-version,
body.workbench-open.rename-open .sidebar-version,
body.workbench-open.process-open .sidebar-version,
body.workbench-open.bgm-open .sidebar-version,
body.workbench-open.mask-open .sidebar-version,
body.workbench-open.exports-open .sidebar-version,
body.workbench-open.settings-open .sidebar-version,
body.workbench-open .sidebar-home,
body.workbench-open.dashboard-open .sidebar-home,
body.workbench-open.materials-open .sidebar-home,
body.workbench-open.rename-open .sidebar-home,
body.workbench-open.process-open .sidebar-home,
body.workbench-open.bgm-open .sidebar-home,
body.workbench-open.mask-open .sidebar-home,
body.workbench-open.exports-open .sidebar-home,
body.workbench-open.settings-open .sidebar-home {
  display: none !important;
}

body.workbench-open .side-nav,
body.workbench-open.dashboard-open .side-nav,
body.workbench-open.materials-open .side-nav,
body.workbench-open.rename-open .side-nav,
body.workbench-open.process-open .side-nav,
body.workbench-open.bgm-open .side-nav,
body.workbench-open.mask-open .side-nav,
body.workbench-open.settings-open .side-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-content: start !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  overflow: visible !important;
}

body.workbench-open .side-nav button,
body.workbench-open.dashboard-open .side-nav button,
body.workbench-open.materials-open .side-nav button,
body.workbench-open.rename-open .side-nav button,
body.workbench-open.process-open .side-nav button,
body.workbench-open.bgm-open .side-nav button,
body.workbench-open.mask-open .side-nav button,
body.workbench-open.settings-open .side-nav button,
body.workbench-open.sidebar-collapsed .side-nav button,
body.workbench-open.sidebar-hidden .side-nav button {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 24px auto !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 62px !important;
  min-height: 62px !important;
  padding: 7px 0 6px !important;
  color: #4b5563 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  white-space: normal !important;
}

body.workbench-open .side-nav button::before,
body.workbench-open .side-nav button::after {
  display: none !important;
  content: none !important;
}

body.workbench-open .side-nav button:hover {
  color: #ff5b18 !important;
  background: #fff7f2 !important;
  transform: none !important;
}

body.workbench-open .side-nav button.active,
body.workbench-open.dashboard-open .side-nav button.active,
body.workbench-open.materials-open .side-nav button.active,
body.workbench-open.rename-open .side-nav button.active,
body.workbench-open.process-open .side-nav button.active,
body.workbench-open.bgm-open .side-nav button.active,
body.workbench-open.mask-open .side-nav button.active,
body.workbench-open.settings-open .side-nav button.active {
  color: #ff4f0a !important;
  background: #fff3ed !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.workbench-open .side-nav button .nav-symbol,
body.workbench-open .side-nav button .svg-icon,
body.workbench-open .side-nav button .svg-icon svg {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: currentColor !important;
  stroke-width: 2 !important;
}

body.workbench-open .side-nav button span:not(.nav-symbol):not(.svg-icon) {
  display: block !important;
  width: 58px !important;
  max-width: 58px !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: currentColor !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  opacity: 1 !important;
}

body.workbench-open .main,
body.workbench-open.dashboard-open .main,
body.workbench-open.materials-open .main,
body.workbench-open.rename-open .main,
body.workbench-open.process-open .main,
body.workbench-open.bgm-open .main,
body.workbench-open.mask-open .main,
body.workbench-open.settings-open .main {
  grid-area: main !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding-left: 0 !important;
}

body.workbench-open .topbar {
  display: grid !important;
  grid-template-columns: minmax(170px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
}

body.workbench-open .top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.sidebar-hide-topbar {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  color: #4b5563 !important;
  background: #ffffff !important;
  border: 1px solid #e0e5ee !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.045) !important;
}

.sidebar-hide-topbar:hover {
  color: #ff5b18 !important;
  background: #fff7f2 !important;
  border-color: #ffd9c9 !important;
}

.sidebar-hide-topbar .svg-icon,
.sidebar-hide-topbar svg {
  width: 19px !important;
  height: 19px !important;
}

body.workbench-open .sidebar-reveal {
  position: fixed !important;
  left: 12px !important;
  top: 12px !important;
  z-index: 80 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 44px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  color: #ff5b18 !important;
  background: #ffffff !important;
  border: 1px solid #ffd9c9 !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 26px rgba(17, 24, 39, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.workbench-open.sidebar-hidden .sidebar-reveal {
  display: inline-flex !important;
}

body.workbench-open.sidebar-hidden .main {
  padding-left: 0 !important;
}

@media (max-width: 980px) {
  body.workbench-open .app-shell,
  body.workbench-open.dashboard-open .app-shell,
  body.workbench-open.materials-open .app-shell,
  body.workbench-open.rename-open .app-shell,
  body.workbench-open.process-open .app-shell,
  body.workbench-open.bgm-open .app-shell,
  body.workbench-open.mask-open .app-shell,
  body.workbench-open.settings-open .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "main" !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.workbench-open .sidebar {
    display: none !important;
  }

  body.workbench-open .sidebar-reveal {
    display: inline-flex !important;
  }

  body.workbench-open .topbar {
    grid-template-columns: 1fr !important;
    padding-left: 58px !important;
  }

  body.workbench-open .top-actions {
    justify-content: stretch !important;
    flex-wrap: wrap !important;
  }
}

/* Export page EOF overrides: these intentionally win over the unified rail. */
body.workbench-open.exports-open .app-shell {
  grid-template-columns: 106px minmax(0, 1fr) !important;
  background: #f7f8fb !important;
}

body.workbench-open.exports-open .sidebar {
  display: flex !important;
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
  padding: 18px 12px 14px !important;
}

body.workbench-open.exports-open .brand-card {
  display: grid !important;
}

body.workbench-open.exports-open .side-nav button {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
}

body.workbench-open.exports-open .main {
  width: auto !important;
}

@media (max-width: 1180px) {
  body.workbench-open.exports-open .app-shell {
    grid-template-columns: 74px minmax(0, 1fr) !important;
  }

  body.workbench-open.exports-open .sidebar {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    padding: 18px 8px 14px !important;
  }
}

@media (max-width: 980px) {
  body.workbench-open.exports-open .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "main" !important;
  }

  body.workbench-open.exports-open .sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }
}

/* Export page final fidelity overrides. Keep after the unified workbench rail. */
body.workbench-open.exports-open .app-shell {
  grid-template-columns: 106px minmax(0, 1fr) !important;
  background: #f7f8fb !important;
}

body.workbench-open.exports-open .sidebar {
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
  padding: 18px 12px 14px !important;
}

body.workbench-open.exports-open .brand-card {
  display: grid !important;
  place-items: center !important;
  min-height: 64px !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.workbench-open.exports-open .brand-mark {
  display: grid !important;
  place-items: center !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #ff6a18 0%, #f04405 100%) !important;
  color: #fff !important;
  font-size: 0 !important;
  box-shadow: 0 12px 24px rgba(255, 86, 16, 0.25) !important;
}

body.workbench-open.exports-open .brand-mark::after {
  content: "M" !important;
  color: #fff !important;
  font-size: 31px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body.workbench-open.exports-open .side-nav {
  gap: 8px !important;
  padding-top: 8px !important;
}

body.workbench-open.exports-open .side-nav button {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 76px !important;
  min-height: 76px !important;
}

body.workbench-open.exports-open .side-nav button.active::before {
  content: "" !important;
  position: absolute !important;
  left: -12px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: #ff4f0a !important;
}

body.workbench-open.exports-open .topbar {
  grid-template-columns: 174px minmax(0, 1fr) !important;
  padding: 0 28px 0 22px !important;
}

body.workbench-open.exports-open .crumb span {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.workbench-open.exports-open .export-top-search {
  flex: 0 0 448px !important;
  width: 448px !important;
  max-width: 448px !important;
}

body.workbench-open.exports-open .view {
  height: calc(100dvh - 84px) !important;
  padding: 0 28px 0 22px !important;
  overflow: hidden !important;
}

body.workbench-open.exports-open .exports-workbench {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 275px !important;
  grid-template-rows: 124px minmax(0, 1fr) 80px !important;
  grid-template-areas:
    "stats detail"
    "list detail"
    "bulk bulk" !important;
  gap: 14px 16px !important;
  height: calc(100dvh - 88px) !important;
  max-height: calc(100dvh - 88px) !important;
  overflow: hidden !important;
}

body.workbench-open.exports-open .export-stat-grid {
  grid-area: stats !important;
  min-width: 0 !important;
}

body.workbench-open.exports-open .exports-main-grid {
  display: contents !important;
}

body.workbench-open.exports-open .exports-list-panel {
  grid-area: list !important;
  min-height: 0 !important;
  height: 100% !important;
}

body.workbench-open.exports-open .export-detail-panel {
  grid-area: detail !important;
  min-height: 0 !important;
  height: 100% !important;
}

body.workbench-open.exports-open .export-bulk-bar {
  grid-area: bulk !important;
  min-height: 80px !important;
}

body.workbench-open.exports-open .export-filter-controls {
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
}

body.workbench-open.exports-open .export-missing-check {
  min-width: 86px !important;
  white-space: nowrap !important;
}

body.workbench-open.exports-open .export-detail-list dd {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

@media (max-width: 1180px) {
  body.workbench-open.exports-open .app-shell {
    grid-template-columns: 74px minmax(0, 1fr) !important;
  }

  body.workbench-open.exports-open .sidebar {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    padding: 18px 8px 14px !important;
  }

  body.workbench-open.exports-open .brand-card {
    display: none !important;
  }

  body.workbench-open.exports-open .exports-workbench {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "stats"
      "list"
      "detail"
      "bulk" !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.workbench-open.exports-open .exports-main-grid {
    display: contents !important;
  }

  body.workbench-open.exports-open .view {
    height: auto !important;
    overflow: auto !important;
  }
}

@media (max-width: 980px) {
  body.workbench-open.exports-open .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "main" !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.workbench-open.exports-open .sidebar {
    display: none !important;
  }
}

/* Settings page final override: keep the mockup's wide sidebar after all shared rail rules. */
body.workbench-open.settings-open .app-shell {
  grid-template-columns: 156px minmax(0, 1fr) !important;
  background: var(--settings-bg) !important;
}

body.workbench-open.settings-open .sidebar {
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  padding: 24px 10px 18px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

body.workbench-open.settings-open .brand-card {
  display: grid !important;
  place-items: center !important;
  min-height: 58px !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.workbench-open.settings-open .traffic,
body.workbench-open.settings-open .brand-card > div,
body.workbench-open.settings-open .sidebar-controls,
body.workbench-open.settings-open .sidebar-storage,
body.workbench-open.settings-open .sidebar-version,
body.workbench-open.settings-open .sidebar-home,
body.workbench-open.settings-open .nav-label,
body.workbench-open.settings-open .sidebar-hide-topbar {
  display: none !important;
}

body.workbench-open.settings-open .brand-mark {
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ff6d1b 0%, #ff390d 100%) !important;
  color: #fff !important;
  font-size: 0 !important;
  box-shadow: 0 12px 28px rgba(255, 91, 22, 0.28) !important;
}

body.workbench-open.settings-open .brand-mark::after {
  content: "M";
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body.workbench-open.settings-open .side-nav {
  display: grid !important;
  gap: 14px !important;
  margin: 0 !important;
}

body.workbench-open.settings-open .side-nav button {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  color: #374151 !important;
  background: transparent !important;
}

body.workbench-open.settings-open .side-nav button span:not(.svg-icon),
body.workbench-open.settings-open .side-nav button span:last-child {
  display: inline !important;
  min-width: 0 !important;
  color: currentColor !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

body.workbench-open.settings-open .side-nav button .svg-icon,
body.workbench-open.settings-open .side-nav button svg {
  width: 24px !important;
  height: 24px !important;
}

body.workbench-open.settings-open .side-nav button.active {
  color: var(--settings-orange) !important;
  background: #fff2ec !important;
}

body.workbench-open.settings-open .main,
body.workbench-open.settings-open .topbar {
  width: auto !important;
}

/* Absolute final unified sidebar rail override. Keep this as the last sidebar block. */
body.workbench-open .app-shell,
body.workbench-open.dashboard-open .app-shell,
body.workbench-open.materials-open .app-shell,
body.workbench-open.rename-open .app-shell,
body.workbench-open.process-open .app-shell,
body.workbench-open.bgm-open .app-shell,
body.workbench-open.mask-open .app-shell,
body.workbench-open.exports-open .app-shell,
body.workbench-open.settings-open .app-shell {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  grid-template-areas: "sidebar main" !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f5f7fb !important;
}

body.workbench-open.sidebar-hidden .app-shell,
body.workbench-open.dashboard-open.sidebar-hidden .app-shell,
body.workbench-open.materials-open.sidebar-hidden .app-shell,
body.workbench-open.rename-open.sidebar-hidden .app-shell,
body.workbench-open.process-open.sidebar-hidden .app-shell,
body.workbench-open.bgm-open.sidebar-hidden .app-shell,
body.workbench-open.mask-open.sidebar-hidden .app-shell,
body.workbench-open.exports-open.sidebar-hidden .app-shell,
body.workbench-open.settings-open.sidebar-hidden .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "main" !important;
}

body.workbench-open .sidebar,
body.workbench-open.dashboard-open .sidebar,
body.workbench-open.materials-open .sidebar,
body.workbench-open.rename-open .sidebar,
body.workbench-open.process-open .sidebar,
body.workbench-open.bgm-open .sidebar,
body.workbench-open.mask-open .sidebar,
body.workbench-open.exports-open .sidebar,
body.workbench-open.settings-open .sidebar {
  grid-area: sidebar !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 18px 8px 14px !important;
  overflow: hidden !important;
  color: #4b5563 !important;
  background: #fff !important;
  border: 0 !important;
  border-right: 1px solid #e7ebf2 !important;
  border-radius: 0 !important;
  box-shadow: 10px 0 24px rgba(17, 24, 39, 0.035) !important;
}

body.workbench-open.sidebar-hidden .sidebar,
body.workbench-open.dashboard-open.sidebar-hidden .sidebar,
body.workbench-open.materials-open.sidebar-hidden .sidebar,
body.workbench-open.rename-open.sidebar-hidden .sidebar,
body.workbench-open.process-open.sidebar-hidden .sidebar,
body.workbench-open.bgm-open.sidebar-hidden .sidebar,
body.workbench-open.mask-open.sidebar-hidden .sidebar,
body.workbench-open.exports-open.sidebar-hidden .sidebar,
body.workbench-open.settings-open.sidebar-hidden .sidebar {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
}

body.workbench-open .brand-card,
body.workbench-open.dashboard-open .brand-card,
body.workbench-open.materials-open .brand-card,
body.workbench-open.rename-open .brand-card,
body.workbench-open.process-open .brand-card,
body.workbench-open.bgm-open .brand-card,
body.workbench-open.mask-open .brand-card,
body.workbench-open.exports-open .brand-card,
body.workbench-open.settings-open .brand-card,
body.workbench-open .traffic,
body.workbench-open .nav-label,
body.workbench-open .sidebar-controls,
body.workbench-open .sidebar-storage,
body.workbench-open .sidebar-version,
body.workbench-open .sidebar-home,
body.workbench-open.dashboard-open .sidebar-home,
body.workbench-open.materials-open .sidebar-home,
body.workbench-open.rename-open .sidebar-home,
body.workbench-open.process-open .sidebar-home,
body.workbench-open.bgm-open .sidebar-home,
body.workbench-open.mask-open .sidebar-home,
body.workbench-open.exports-open .sidebar-home,
body.workbench-open.settings-open .sidebar-home {
  display: none !important;
}

body.workbench-open .sidebar::before,
body.workbench-open .sidebar::after,
body.workbench-open .side-nav button::before,
body.workbench-open .side-nav button::after {
  display: none !important;
  content: none !important;
}

body.workbench-open .side-nav,
body.workbench-open.dashboard-open .side-nav,
body.workbench-open.materials-open .side-nav,
body.workbench-open.rename-open .side-nav,
body.workbench-open.process-open .side-nav,
body.workbench-open.bgm-open .side-nav,
body.workbench-open.mask-open .side-nav,
body.workbench-open.exports-open .side-nav,
body.workbench-open.settings-open .side-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  overflow: visible !important;
}

body.workbench-open .side-nav button,
body.workbench-open.dashboard-open .side-nav button,
body.workbench-open.materials-open .side-nav button,
body.workbench-open.rename-open .side-nav button,
body.workbench-open.process-open .side-nav button,
body.workbench-open.bgm-open .side-nav button,
body.workbench-open.mask-open .side-nav button,
body.workbench-open.exports-open .side-nav button,
body.workbench-open.settings-open .side-nav button {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 24px auto !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 62px !important;
  min-height: 62px !important;
  padding: 7px 0 6px !important;
  color: #4b5563 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  white-space: normal !important;
}

body.workbench-open .side-nav button:hover {
  color: #ff5b18 !important;
  background: #fff7f2 !important;
  transform: none !important;
}

body.workbench-open .side-nav button.active,
body.workbench-open.dashboard-open .side-nav button.active,
body.workbench-open.materials-open .side-nav button.active,
body.workbench-open.rename-open .side-nav button.active,
body.workbench-open.process-open .side-nav button.active,
body.workbench-open.bgm-open .side-nav button.active,
body.workbench-open.mask-open .side-nav button.active,
body.workbench-open.exports-open .side-nav button.active,
body.workbench-open.settings-open .side-nav button.active {
  color: #ff4f0a !important;
  background: #fff3ed !important;
  box-shadow: none !important;
}

body.workbench-open .side-nav button .nav-symbol,
body.workbench-open .side-nav button .svg-icon,
body.workbench-open .side-nav button .svg-icon svg {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: currentColor !important;
}

body.workbench-open .side-nav button span:not(.nav-symbol):not(.svg-icon),
body.workbench-open.settings-open .side-nav button span:not(.svg-icon),
body.workbench-open.settings-open .side-nav button span:last-child {
  display: block !important;
  width: 58px !important;
  max-width: 58px !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: currentColor !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  opacity: 1 !important;
}

body.workbench-open .main,
body.workbench-open.dashboard-open .main,
body.workbench-open.materials-open .main,
body.workbench-open.rename-open .main,
body.workbench-open.process-open .main,
body.workbench-open.bgm-open .main,
body.workbench-open.mask-open .main,
body.workbench-open.exports-open .main,
body.workbench-open.settings-open .main {
  grid-area: main !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
}

body.workbench-open .top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.workbench-open .sidebar-hide-topbar,
body.workbench-open.dashboard-open .sidebar-hide-topbar,
body.workbench-open.materials-open .sidebar-hide-topbar,
body.workbench-open.rename-open .sidebar-hide-topbar,
body.workbench-open.process-open .sidebar-hide-topbar,
body.workbench-open.bgm-open .sidebar-hide-topbar,
body.workbench-open.mask-open .sidebar-hide-topbar,
body.workbench-open.exports-open .sidebar-hide-topbar,
body.workbench-open.settings-open .sidebar-hide-topbar {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  color: #4b5563 !important;
  background: #fff !important;
  border: 1px solid #e0e5ee !important;
  border-radius: 8px !important;
}

body.workbench-open.sidebar-hidden .sidebar-hide-topbar {
  display: none !important;
}

body.workbench-open .sidebar-reveal {
  display: none !important;
}

body.workbench-open.sidebar-hidden .sidebar-reveal {
  display: inline-flex !important;
}

@media (max-width: 980px) {
  body.workbench-open .app-shell,
  body.workbench-open.dashboard-open .app-shell,
  body.workbench-open.materials-open .app-shell,
  body.workbench-open.rename-open .app-shell,
  body.workbench-open.process-open .app-shell,
  body.workbench-open.bgm-open .app-shell,
  body.workbench-open.mask-open .app-shell,
  body.workbench-open.exports-open .app-shell,
  body.workbench-open.settings-open .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "main" !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.workbench-open .sidebar,
  body.workbench-open.dashboard-open .sidebar,
  body.workbench-open.materials-open .sidebar,
  body.workbench-open.rename-open .sidebar,
  body.workbench-open.process-open .sidebar,
  body.workbench-open.bgm-open .sidebar,
  body.workbench-open.mask-open .sidebar,
  body.workbench-open.exports-open .sidebar,
  body.workbench-open.settings-open .sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }

  body.workbench-open .sidebar-reveal {
    display: inline-flex !important;
  }
}

body.workbench-open.settings-open .brand-mark {
  position: relative !important;
  overflow: hidden !important;
  color: transparent !important;
  text-indent: -999px !important;
}

body.workbench-open.settings-open .brand-mark::after {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  text-indent: 0 !important;
}

body.workbench-open.settings-open .topbar {
  grid-template-columns: 190px minmax(0, 1fr) !important;
  gap: 24px !important;
}

body.workbench-open.settings-open .top-actions {
  display: grid !important;
  grid-template-columns: 448px 188px 144px 148px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  width: 100% !important;
}

@media (max-width: 980px) {
  body.workbench-open .sidebar,
  body.workbench-open.dashboard-open .sidebar,
  body.workbench-open.materials-open .sidebar,
  body.workbench-open.rename-open .sidebar,
  body.workbench-open.process-open .sidebar,
  body.workbench-open.bgm-open .sidebar,
  body.workbench-open.mask-open .sidebar,
  body.workbench-open.exports-open .sidebar,
  body.workbench-open.settings-open .sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }
}

/* Settings page must use the wide mockup sidebar, after the global rail reset above. */
body.workbench-open.settings-open .app-shell {
  grid-template-columns: 156px minmax(0, 1fr) !important;
  background: var(--settings-bg) !important;
}

body.workbench-open.settings-open .sidebar {
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  padding: 24px 10px 18px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

body.workbench-open.settings-open .brand-card {
  display: grid !important;
  place-items: center !important;
  min-height: 58px !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.workbench-open.settings-open .traffic,
body.workbench-open.settings-open .brand-card > div,
body.workbench-open.settings-open .sidebar-controls,
body.workbench-open.settings-open .sidebar-storage,
body.workbench-open.settings-open .sidebar-version,
body.workbench-open.settings-open .sidebar-home,
body.workbench-open.settings-open .nav-label,
body.workbench-open.settings-open .sidebar-hide-topbar {
  display: none !important;
}

body.workbench-open.settings-open .brand-mark {
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ff6d1b 0%, #ff390d 100%) !important;
  color: #fff !important;
  font-size: 0 !important;
  box-shadow: 0 12px 28px rgba(255, 91, 22, 0.28) !important;
}

body.workbench-open.settings-open .brand-mark::after {
  content: "M";
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body.workbench-open.settings-open .side-nav {
  display: grid !important;
  gap: 14px !important;
  margin: 0 !important;
}

body.workbench-open.settings-open .side-nav button {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  color: #374151 !important;
  background: transparent !important;
}

body.workbench-open.settings-open .side-nav button span:not(.svg-icon),
body.workbench-open.settings-open .side-nav button span:last-child {
  display: inline !important;
  min-width: 0 !important;
  color: currentColor !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

body.workbench-open.settings-open .side-nav button .svg-icon,
body.workbench-open.settings-open .side-nav button svg {
  width: 24px !important;
  height: 24px !important;
}

body.workbench-open.settings-open .side-nav button.active {
  color: var(--settings-orange) !important;
  background: #fff2ec !important;
}

body.workbench-open.settings-open .main {
  width: auto !important;
  padding-left: 0 !important;
}

body.workbench-open.settings-open .topbar {
  width: auto !important;
}

@media (max-width: 980px) {
  body.workbench-open .sidebar,
  body.workbench-open.dashboard-open .sidebar,
  body.workbench-open.materials-open .sidebar,
  body.workbench-open.rename-open .sidebar,
  body.workbench-open.process-open .sidebar,
  body.workbench-open.bgm-open .sidebar,
  body.workbench-open.mask-open .sidebar,
  body.workbench-open.exports-open .sidebar,
  body.workbench-open.settings-open .sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }
}
/* Export archive page fidelity layer */
body.exports-open,
body.exports-open .app-shell,
body.exports-open .main {
  min-width: 1280px !important;
  color: #151923 !important;
  background: #f7f8fb !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Arial, sans-serif !important;
}

body.exports-open .app-shell {
  grid-template-columns: 106px minmax(0, 1fr) !important;
  min-height: 100dvh !important;
  background: #f7f8fb !important;
}

body.exports-open .sidebar {
  width: 106px !important;
  min-height: 100dvh !important;
  padding: 18px 0 24px !important;
  border-right: 1px solid #e8ebf1 !important;
  background: #fff !important;
  box-shadow: 1px 0 0 rgba(16, 24, 40, 0.02) !important;
}

body.exports-open .traffic,
body.exports-open .sidebar-controls,
body.exports-open .nav-label,
body.exports-open .sidebar-storage,
body.exports-open .sidebar-version,
body.exports-open .brand-card > div:not(.sidebar-controls),
body.exports-open .sidebar-hide-topbar,
body.exports-open .status-dock {
  display: none !important;
}

body.exports-open .brand-card {
  display: grid !important;
  place-items: center !important;
  min-height: 54px !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  background: transparent !important;
}

body.exports-open .brand-mark {
  position: relative !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, #ff6b1a 0%, #f04405 100%) !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 10px 24px rgba(239, 68, 5, 0.25) !important;
}

body.exports-open .brand-mark::after {
  content: "M";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 31px;
  font-weight: 950;
}

body.exports-open .side-nav {
  display: grid !important;
  gap: 7px !important;
  padding: 0 !important;
}

body.exports-open .side-nav button {
  position: relative !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 6px !important;
  min-height: 78px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #313846 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

body.exports-open .side-nav button .svg-icon {
  width: 26px !important;
  height: 26px !important;
}

body.exports-open .side-nav button.active {
  color: #fb4f0b !important;
  background: #fff3ed !important;
}

body.exports-open .side-nav button.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #fb4f0b;
}

body.exports-open .sidebar-home {
  width: 40px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: auto auto 0 !important;
  padding: 0 !important;
  border: 1px solid #e3e8f0 !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #1f2937 !important;
}

body.exports-open .sidebar-home::after {
  content: "≪";
  font-size: 18px;
  font-weight: 900;
}

body.exports-open .sidebar-home * {
  display: none !important;
}

body.exports-open .topbar {
  height: 84px !important;
  min-height: 84px !important;
  margin: 0 !important;
  padding: 0 28px 0 24px !important;
  border: 0 !important;
  background: #f7f8fb !important;
  box-shadow: none !important;
}

body.exports-open .crumb h1 {
  color: #ff4d0a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body.exports-open .crumb span,
body.exports-open .crumb b {
  color: #111827 !important;
  font-size: 18px !important;
}

body.exports-open .top-actions {
  width: auto !important;
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

body.exports-open .export-top-search {
  width: min(448px, 30vw) !important;
  height: 43px !important;
  border: 1px solid #dde3ec !important;
  border-radius: 8px !important;
  background: #fff !important;
}

body.exports-open .export-top-counter,
body.exports-open .export-top-button,
body.exports-open .export-top-primary {
  height: 43px !important;
  border: 1px solid #dde3ec !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111827 !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

body.exports-open .export-top-counter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 17px !important;
}

body.exports-open .export-top-counter b {
  color: #fb4f0b;
  font-size: 17px;
}

body.exports-open .export-top-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 22px !important;
  border-color: #fb4f0b !important;
  color: #fff !important;
  background: linear-gradient(180deg, #ff6418 0%, #f04405 100%) !important;
}

body.exports-open .export-top-primary:disabled,
body.exports-open .export-bulk-bar button:disabled {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
}

body.exports-open .view {
  height: calc(100dvh - 84px) !important;
  padding: 0 28px 18px 22px !important;
  overflow: hidden !important;
}

body.exports-open .exports-workbench {
  display: grid;
  grid-template-rows: 124px minmax(0, 1fr) 80px;
  gap: 14px;
  height: 100%;
}

.export-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.export-stat-card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid #e1e6ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.03);
}

.export-stat-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 12px;
}

.export-stat-card.blue .export-stat-icon { color: #3b82f6; background: #eaf2ff; }
.export-stat-card.green .export-stat-icon { color: #18a65b; background: #e8f8ef; }
.export-stat-card.purple .export-stat-icon { color: #8b5cf6; background: #f0eaff; }
.export-stat-card.orange .export-stat-icon { color: #f97316; background: #fff0e5; }

.export-stat-card span:not(.export-stat-icon) {
  display: block;
  color: #596273;
  font-size: 15px;
  font-weight: 700;
}

.export-stat-card strong {
  display: block;
  margin-top: 4px;
  color: #0b1020;
  font-size: 30px;
  line-height: 1;
  font-weight: 950;
}

.export-stat-card small {
  display: block;
  margin-top: 10px;
  color: #8a94a6;
  font-size: 14px;
}

.export-stat-card small b {
  color: #17a55c;
  font-weight: 900;
}

.exports-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 275px;
  gap: 16px;
  min-height: 0;
}

.exports-list-panel,
.export-detail-panel {
  min-height: 0;
  border: 1px solid #e1e6ef;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.exports-list-panel {
  display: grid;
  grid-template-rows: 69px minmax(0, 1fr) 50px;
}

.export-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid #edf1f6;
}

.export-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}

.export-tabs button {
  position: relative;
  height: 100%;
  border: 0;
  background: transparent;
  color: #263141;
  font-size: 15px;
  font-weight: 800;
}

.export-tabs button.active {
  color: #fb4f0b;
}

.export-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #fb4f0b;
}

.export-filter-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.export-date-range {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  background: #fff;
  font-weight: 800;
}

.export-date-range input {
  width: 122px !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.export-filter-controls select,
.export-missing-check {
  height: 40px !important;
  border: 1px solid #dfe5ee !important;
  border-radius: 8px !important;
  color: #111827 !important;
  background: #fff !important;
  font-weight: 800 !important;
}

.export-missing-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  color: #3f4654 !important;
}

.export-table-shell {
  min-height: 0;
  overflow: auto;
}

.export-data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.export-data-table th,
.export-data-table td {
  height: 67px;
  padding: 0 12px;
  border-bottom: 1px solid #edf1f6;
  color: #151923;
  font-size: 14px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-data-table th {
  height: 43px;
  color: #111827;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
}

.export-data-table th button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.export-data-table tbody tr.active,
.export-data-table tbody tr.selected {
  background: #fff5ee;
}

.export-data-table tbody tr:hover {
  background: #f9fafc;
}

.export-col-check { width: 40px; }
.export-col-file { width: 280px; }
.export-col-type { width: 70px; }
.export-col-size { width: 86px; }
.export-col-time { width: 168px; }
.export-col-source { width: 140px; }
.export-col-status { width: 92px; }
.export-col-path { width: 190px; }
.export-col-actions { width: 144px; }

.export-file-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.export-file-cell > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.export-thumb {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 70px;
  height: 42px;
  border-radius: 5px;
  color: #8b5cf6;
  background: #f0e9ff;
  overflow: hidden;
  font-weight: 950;
}

.export-thumb.audio {
  font-size: 28px;
}

.export-thumb.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.export-thumb.media i {
  position: absolute;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 23, 42, 0.72);
  font-size: 10px;
  font-style: normal;
}

.export-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  color: #15945a;
  background: #dff7ea;
  font-size: 12px;
  font-weight: 900;
}

.export-status-badge.downloaded {
  color: #2563eb;
  background: #e6f0ff;
}

.export-status-badge.missing {
  color: #ef4444;
  background: #ffe5e7;
}

.export-path {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1f2937;
}

.export-path.missing {
  color: #ff3b1f;
}

.export-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.export-row-actions button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 30px;
  padding: 0;
  border: 0;
  color: #162033;
  background: transparent;
}

.export-row-actions button:disabled {
  color: #b7bfca;
}

.export-table-empty {
  display: grid;
  place-items: center;
  min-height: 280px;
  color: #8993a3;
  font-weight: 800;
}

.export-table-meta {
  display: none;
}

.export-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 700;
}

.export-page-buttons {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.export-page-buttons button,
.export-pagination select {
  min-width: 34px;
  height: 34px;
  border: 1px solid #dde3ec;
  border-radius: 7px;
  color: #111827;
  background: #fff;
  font-weight: 800;
}

.export-page-buttons button.active {
  border-color: #fb4f0b;
  color: #fff;
  background: #fb4f0b;
}

.export-pagination select {
  justify-self: end;
  width: 104px;
}

.export-detail-panel {
  display: grid;
  grid-template-rows: 69px auto minmax(0, auto) auto 1fr;
}

.export-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid #edf1f6;
}

.export-detail-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
}

.export-detail-head button {
  border: 0;
  background: transparent;
  color: #111827;
  font-size: 28px;
  line-height: 1;
}

.export-detail-preview {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 16px 12px;
}

.export-detail-preview .export-thumb {
  width: 118px;
  height: 72px;
}

.export-detail-preview strong {
  display: block;
  max-height: 42px;
  overflow: hidden;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 900;
}

.export-detail-preview span {
  display: block;
  margin: 6px 0;
  color: #6b7280;
  font-size: 13px;
}

.export-detail-list {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px 12px;
  margin: 0;
  padding: 14px 18px 20px;
}

.export-detail-list dt {
  color: #3d4553;
  font-weight: 800;
}

.export-detail-list dd {
  min-width: 0;
  margin: 0;
  color: #111827;
  overflow-wrap: anywhere;
  text-align: right;
}

.export-detail-actions {
  display: grid;
  gap: 10px;
  padding: 0 18px;
}

.export-detail-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 41px;
  border: 1px solid #dde3ec;
  border-radius: 7px;
  color: #111827;
  background: #fff;
  font-weight: 900;
}

.export-detail-actions button.primary {
  border-color: #fb4f0b;
  color: #fff;
  background: linear-gradient(180deg, #ff6418 0%, #f04405 100%);
}

.export-detail-actions button.danger {
  border-color: #ff3b30;
  color: #ff3b30;
}

.export-detail-panel > p {
  margin: 14px 0 0;
  color: #8a94a6;
  text-align: center;
  font-size: 13px;
}

.export-detail-empty {
  display: grid;
  place-items: center;
  color: #8a94a6;
  font-weight: 800;
}

.export-bulk-bar {
  display: grid;
  grid-template-columns: 260px 190px 190px 190px minmax(260px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 0 18px 0 24px;
  border: 1px solid #e1e6ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.04);
}

.export-bulk-bar > div:first-child {
  display: flex;
  align-items: center;
  gap: 18px;
}

.export-bulk-bar strong {
  color: #111827;
  font-size: 18px;
  font-weight: 950;
}

.export-bulk-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  color: #111827;
  background: #fff;
  font-size: 15px;
  font-weight: 900;
}

.export-bulk-bar button.primary {
  border-color: #fb4f0b;
  color: #fff;
  background: linear-gradient(180deg, #ff6418 0%, #f04405 100%);
}

.export-bulk-bar button.danger {
  color: #ef233c;
}

.export-bulk-bar [data-export-clear] {
  width: auto;
  height: auto;
  border: 0;
  color: #fb4f0b;
  background: transparent;
  font-size: 14px;
}

.export-csv-ready {
  justify-self: end;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) 86px;
  align-items: center;
  width: min(480px, 100%);
  gap: 12px;
}

.export-csv-ready i {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  color: #17a55c;
  background: #e8f8ef;
  font-style: normal;
}

.export-csv-ready span {
  min-width: 0;
}

.export-csv-ready b,
.export-csv-ready small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-csv-ready small {
  margin-top: 5px;
  color: #7b8494;
  font-size: 13px;
}

@media (max-width: 1180px) {
  body.exports-open,
  body.exports-open .app-shell,
  body.exports-open .main {
    min-width: 0 !important;
  }

  body.exports-open .app-shell {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  body.exports-open .sidebar {
    width: 76px !important;
  }

  body.exports-open .side-nav button span:last-child {
    font-size: 11px !important;
  }

  body.exports-open .topbar {
    height: auto !important;
    min-height: 84px !important;
    padding: 12px !important;
  }

  body.exports-open .top-actions {
    flex-wrap: wrap !important;
  }

  body.exports-open .view {
    height: auto !important;
    min-height: calc(100dvh - 84px) !important;
    overflow: auto !important;
    padding: 12px !important;
  }

  body.exports-open .exports-workbench {
    display: grid;
    height: auto;
    grid-template-rows: auto auto auto;
  }

  .export-stat-grid,
  .exports-main-grid,
  .export-bulk-bar {
    grid-template-columns: 1fr;
  }

  .exports-list-panel {
    min-height: 520px;
  }

  .export-filter-row {
    height: auto;
    align-items: stretch;
    flex-direction: column;
    padding: 12px;
  }

  .export-filter-controls {
    flex-wrap: wrap;
  }

  .export-detail-panel {
    min-height: 520px;
  }
}

/* Unified workbench sidebar rail reassertion. This must stay at the end of the file. */
body.workbench-open,
body.exports-open {
  min-width: 0 !important;
}

body.workbench-open .app-shell,
body.workbench-open.dashboard-open .app-shell,
body.workbench-open.materials-open .app-shell,
body.workbench-open.rename-open .app-shell,
body.workbench-open.process-open .app-shell,
body.workbench-open.bgm-open .app-shell,
body.workbench-open.mask-open .app-shell,
body.workbench-open.exports-open .app-shell,
body.workbench-open.settings-open .app-shell {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  grid-template-areas: "sidebar main" !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f5f7fb !important;
}

body.workbench-open.sidebar-hidden .app-shell,
body.workbench-open.dashboard-open.sidebar-hidden .app-shell,
body.workbench-open.materials-open.sidebar-hidden .app-shell,
body.workbench-open.rename-open.sidebar-hidden .app-shell,
body.workbench-open.process-open.sidebar-hidden .app-shell,
body.workbench-open.bgm-open.sidebar-hidden .app-shell,
body.workbench-open.mask-open.sidebar-hidden .app-shell,
body.workbench-open.exports-open.sidebar-hidden .app-shell,
body.workbench-open.settings-open.sidebar-hidden .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "main" !important;
}

body.workbench-open .sidebar,
body.workbench-open.dashboard-open .sidebar,
body.workbench-open.materials-open .sidebar,
body.workbench-open.rename-open .sidebar,
body.workbench-open.process-open .sidebar,
body.workbench-open.bgm-open .sidebar,
body.workbench-open.mask-open .sidebar,
body.workbench-open.exports-open .sidebar,
body.workbench-open.settings-open .sidebar {
  grid-area: sidebar !important;
  position: sticky !important;
  z-index: 30 !important;
  top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 18px 8px 14px !important;
  color: #4b5563 !important;
  background: #fff !important;
  border: 0 !important;
  border-right: 1px solid #e7ebf2 !important;
  border-radius: 0 !important;
  box-shadow: 10px 0 24px rgba(17, 24, 39, 0.035) !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.workbench-open.sidebar-hidden .sidebar,
body.workbench-open.dashboard-open.sidebar-hidden .sidebar,
body.workbench-open.materials-open.sidebar-hidden .sidebar,
body.workbench-open.rename-open.sidebar-hidden .sidebar,
body.workbench-open.process-open.sidebar-hidden .sidebar,
body.workbench-open.bgm-open.sidebar-hidden .sidebar,
body.workbench-open.mask-open.sidebar-hidden .sidebar,
body.workbench-open.exports-open.sidebar-hidden .sidebar,
body.workbench-open.settings-open.sidebar-hidden .sidebar {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
}

body.workbench-open .sidebar::before,
body.workbench-open .sidebar::after,
body.workbench-open.process-open .sidebar::after {
  display: none !important;
  content: none !important;
}

body.workbench-open .brand-card,
body.workbench-open .traffic,
body.workbench-open .nav-label,
body.workbench-open .sidebar-controls,
body.workbench-open .sidebar-storage,
body.workbench-open .sidebar-version,
body.workbench-open .sidebar-home {
  display: none !important;
}

body.workbench-open .side-nav,
body.workbench-open.dashboard-open .side-nav,
body.workbench-open.materials-open .side-nav,
body.workbench-open.rename-open .side-nav,
body.workbench-open.process-open .side-nav,
body.workbench-open.bgm-open .side-nav,
body.workbench-open.mask-open .side-nav,
body.workbench-open.exports-open .side-nav,
body.workbench-open.settings-open .side-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-content: start !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  overflow: visible !important;
}

body.workbench-open .side-nav button,
body.workbench-open.dashboard-open .side-nav button,
body.workbench-open.materials-open .side-nav button,
body.workbench-open.rename-open .side-nav button,
body.workbench-open.process-open .side-nav button,
body.workbench-open.bgm-open .side-nav button,
body.workbench-open.mask-open .side-nav button,
body.workbench-open.exports-open .side-nav button,
body.workbench-open.settings-open .side-nav button {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 24px auto !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 62px !important;
  min-height: 62px !important;
  padding: 7px 0 6px !important;
  color: #4b5563 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  white-space: normal !important;
}

body.workbench-open .side-nav button::before,
body.workbench-open .side-nav button::after {
  display: none !important;
  content: none !important;
}

body.workbench-open .side-nav button:hover {
  color: #ff5b18 !important;
  background: #fff7f2 !important;
  transform: none !important;
}

body.workbench-open .side-nav button.active,
body.workbench-open.dashboard-open .side-nav button.active,
body.workbench-open.materials-open .side-nav button.active,
body.workbench-open.rename-open .side-nav button.active,
body.workbench-open.process-open .side-nav button.active,
body.workbench-open.bgm-open .side-nav button.active,
body.workbench-open.mask-open .side-nav button.active,
body.workbench-open.exports-open .side-nav button.active,
body.workbench-open.settings-open .side-nav button.active {
  color: #ff4f0a !important;
  background: #fff3ed !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.workbench-open .side-nav button .nav-symbol,
body.workbench-open .side-nav button .svg-icon,
body.workbench-open .side-nav button .svg-icon svg {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: currentColor !important;
  stroke-width: 2 !important;
}

body.workbench-open .side-nav button span:not(.nav-symbol):not(.svg-icon) {
  display: block !important;
  width: 58px !important;
  max-width: 58px !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: currentColor !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  opacity: 1 !important;
}

body.workbench-open .main,
body.workbench-open.dashboard-open .main,
body.workbench-open.materials-open .main,
body.workbench-open.rename-open .main,
body.workbench-open.process-open .main,
body.workbench-open.bgm-open .main,
body.workbench-open.mask-open .main,
body.workbench-open.exports-open .main,
body.workbench-open.settings-open .main {
  grid-area: main !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding-left: 0 !important;
}

body.workbench-open .topbar {
  display: grid !important;
  grid-template-columns: minmax(170px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
}

body.workbench-open .top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.workbench-open .sidebar-hide-topbar {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  color: #4b5563 !important;
  background: #fff !important;
  border: 1px solid #e0e5ee !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.045) !important;
}

body.workbench-open.dashboard-open .sidebar-hide-topbar,
body.workbench-open.materials-open .sidebar-hide-topbar,
body.workbench-open.rename-open .sidebar-hide-topbar,
body.workbench-open.process-open .sidebar-hide-topbar,
body.workbench-open.bgm-open .sidebar-hide-topbar,
body.workbench-open.mask-open .sidebar-hide-topbar,
body.workbench-open.exports-open .sidebar-hide-topbar,
body.workbench-open.settings-open .sidebar-hide-topbar {
  display: inline-grid !important;
}

body.workbench-open .sidebar-hide-topbar:hover {
  color: #ff5b18 !important;
  background: #fff7f2 !important;
  border-color: #ffd9c9 !important;
}

body.workbench-open .sidebar-hide-topbar .svg-icon,
body.workbench-open .sidebar-hide-topbar svg {
  width: 19px !important;
  height: 19px !important;
}

body.workbench-open.sidebar-hidden .sidebar-hide-topbar {
  display: none !important;
}

body.workbench-open .sidebar-reveal {
  position: fixed !important;
  left: 12px !important;
  top: 12px !important;
  z-index: 80 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 44px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  color: #ff5b18 !important;
  background: #fff !important;
  border: 1px solid #ffd9c9 !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 26px rgba(17, 24, 39, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.workbench-open.sidebar-hidden .sidebar-reveal {
  display: inline-flex !important;
}

body.workbench-open.sidebar-hidden .main {
  padding-left: 0 !important;
}

@media (max-width: 980px) {
  body.workbench-open .app-shell,
  body.workbench-open.dashboard-open .app-shell,
  body.workbench-open.materials-open .app-shell,
  body.workbench-open.rename-open .app-shell,
  body.workbench-open.process-open .app-shell,
  body.workbench-open.bgm-open .app-shell,
  body.workbench-open.mask-open .app-shell,
  body.workbench-open.exports-open .app-shell,
  body.workbench-open.settings-open .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "main" !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.workbench-open .sidebar,
  body.workbench-open.dashboard-open .sidebar,
  body.workbench-open.materials-open .sidebar,
  body.workbench-open.rename-open .sidebar,
  body.workbench-open.process-open .sidebar,
  body.workbench-open.bgm-open .sidebar,
  body.workbench-open.mask-open .sidebar,
  body.workbench-open.exports-open .sidebar,
  body.workbench-open.settings-open .sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }

  body.workbench-open .sidebar-reveal {
    display: inline-flex !important;
  }

  body.workbench-open .topbar {
    grid-template-columns: 1fr !important;
    padding-left: 58px !important;
  }

  body.workbench-open .top-actions {
    justify-content: stretch !important;
    flex-wrap: wrap !important;
  }
}

/* Settings page EOF override: keep the mockup's wide sidebar after every shared rail rule. */
body.workbench-open.settings-open .app-shell {
  grid-template-columns: 156px minmax(0, 1fr) !important;
  background: var(--settings-bg) !important;
}

body.workbench-open.settings-open .sidebar {
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  padding: 24px 10px 18px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

body.workbench-open.settings-open .brand-card {
  display: grid !important;
  place-items: center !important;
  min-height: 58px !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.workbench-open.settings-open .traffic,
body.workbench-open.settings-open .brand-card > div,
body.workbench-open.settings-open .sidebar-controls,
body.workbench-open.settings-open .sidebar-storage,
body.workbench-open.settings-open .sidebar-version,
body.workbench-open.settings-open .sidebar-home,
body.workbench-open.settings-open .nav-label,
body.workbench-open.settings-open .sidebar-hide-topbar {
  display: none !important;
}

body.workbench-open.settings-open .brand-mark {
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ff6d1b 0%, #ff390d 100%) !important;
  color: #fff !important;
  font-size: 0 !important;
  box-shadow: 0 12px 28px rgba(255, 91, 22, 0.28) !important;
}

body.workbench-open.settings-open .brand-mark::after {
  content: "M";
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body.workbench-open.settings-open .side-nav {
  display: grid !important;
  gap: 14px !important;
  margin: 0 !important;
}

body.workbench-open.settings-open .side-nav button {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  color: #374151 !important;
  background: transparent !important;
}

body.workbench-open.settings-open .side-nav button span:not(.svg-icon),
body.workbench-open.settings-open .side-nav button span:last-child {
  display: inline !important;
  min-width: 0 !important;
  color: currentColor !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

body.workbench-open.settings-open .side-nav button .svg-icon,
body.workbench-open.settings-open .side-nav button svg {
  width: 24px !important;
  height: 24px !important;
}

body.workbench-open.settings-open .side-nav button.active {
  color: var(--settings-orange) !important;
  background: #fff2ec !important;
}

body.workbench-open.settings-open .main,
body.workbench-open.settings-open .topbar {
  width: auto !important;
}

/* EOF guard: keep every workbench page on the unified narrow sidebar. */
body.workbench-open.settings-open .app-shell,
body.workbench-open.exports-open .app-shell {
  grid-template-columns: 74px minmax(0, 1fr) !important;
  grid-template-areas: "sidebar main" !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f5f7fb !important;
}

body.workbench-open.settings-open.sidebar-hidden .app-shell,
body.workbench-open.exports-open.sidebar-hidden .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "main" !important;
}

body.workbench-open.settings-open .sidebar,
body.workbench-open.exports-open .sidebar {
  grid-area: sidebar !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 18px 8px 14px !important;
  overflow: hidden !important;
  color: #4b5563 !important;
  background: #fff !important;
  border: 0 !important;
  border-right: 1px solid #e7ebf2 !important;
  border-radius: 0 !important;
  box-shadow: 10px 0 24px rgba(17, 24, 39, 0.035) !important;
}

body.workbench-open.settings-open.sidebar-hidden .sidebar,
body.workbench-open.exports-open.sidebar-hidden .sidebar {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
}

body.workbench-open.settings-open .brand-card,
body.workbench-open.exports-open .brand-card,
body.workbench-open.settings-open .brand-mark,
body.workbench-open.exports-open .brand-mark,
body.workbench-open.settings-open .traffic,
body.workbench-open.exports-open .traffic,
body.workbench-open.settings-open .nav-label,
body.workbench-open.exports-open .nav-label,
body.workbench-open.settings-open .sidebar-controls,
body.workbench-open.exports-open .sidebar-controls,
body.workbench-open.settings-open .sidebar-storage,
body.workbench-open.exports-open .sidebar-storage,
body.workbench-open.settings-open .sidebar-version,
body.workbench-open.exports-open .sidebar-version,
body.workbench-open.settings-open .sidebar-home,
body.workbench-open.exports-open .sidebar-home {
  display: none !important;
}

body.workbench-open.settings-open .side-nav,
body.workbench-open.exports-open .side-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  overflow: visible !important;
}

body.workbench-open.settings-open .side-nav button,
body.workbench-open.exports-open .side-nav button {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 24px auto !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 62px !important;
  min-height: 62px !important;
  padding: 7px 0 6px !important;
  color: #4b5563 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  white-space: normal !important;
}

body.workbench-open.settings-open .side-nav button.active,
body.workbench-open.exports-open .side-nav button.active {
  color: #ff4f0a !important;
  background: #fff3ed !important;
}

body.workbench-open.settings-open .side-nav button span:not(.nav-symbol):not(.svg-icon),
body.workbench-open.settings-open .side-nav button span:not(.svg-icon),
body.workbench-open.settings-open .side-nav button span:last-child,
body.workbench-open.exports-open .side-nav button span:not(.nav-symbol):not(.svg-icon),
body.workbench-open.exports-open .side-nav button span:not(.svg-icon),
body.workbench-open.exports-open .side-nav button span:last-child {
  display: block !important;
  width: 58px !important;
  max-width: 58px !important;
  color: currentColor !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  opacity: 1 !important;
}

body.workbench-open.settings-open .main,
body.workbench-open.exports-open .main {
  grid-area: main !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
}

body.workbench-open.settings-open .sidebar-hide-topbar,
body.workbench-open.exports-open .sidebar-hide-topbar {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  color: #4b5563 !important;
  background: #fff !important;
  border: 1px solid #e0e5ee !important;
  border-radius: 8px !important;
}

body.workbench-open.settings-open.sidebar-hidden .sidebar-hide-topbar,
body.workbench-open.exports-open.sidebar-hidden .sidebar-hide-topbar {
  display: none !important;
}

@media (max-width: 980px) {
  body.workbench-open.settings-open .app-shell,
  body.workbench-open.exports-open .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "main" !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.workbench-open.settings-open .sidebar,
  body.workbench-open.exports-open .sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }
}

/* Settings page final alignment: keep the shared narrow sidebar on every module. */
body.workbench-open.settings-open .app-shell {
  grid-template-columns: 74px minmax(0, 1fr) !important;
}

body.workbench-open.settings-open .sidebar {
  display: flex !important;
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  padding: 18px 8px 14px !important;
}

body.workbench-open.settings-open .brand-card {
  display: none !important;
}

body.workbench-open.settings-open .brand-mark {
  display: none !important;
}

body.workbench-open.settings-open .brand-mark::after {
  display: none !important;
  content: none !important;
}

body.workbench-open.settings-open .side-nav button {
  grid-template-columns: 1fr !important;
  grid-template-rows: 24px auto !important;
  place-items: center !important;
  gap: 5px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 62px !important;
  min-height: 62px !important;
  padding: 7px 0 6px !important;
}

body.workbench-open.settings-open .side-nav button span:not(.nav-symbol):not(.svg-icon),
body.workbench-open.settings-open .side-nav button span:not(.svg-icon),
body.workbench-open.settings-open .side-nav button span:last-child {
  display: block !important;
  width: 58px !important;
  max-width: 58px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
}

body.workbench-open.settings-open .sidebar-hide-topbar {
  display: inline-grid !important;
}

body.workbench-open.settings-open .topbar {
  grid-template-columns: minmax(170px, auto) minmax(0, 1fr) !important;
  gap: 14px !important;
}

body.workbench-open.settings-open .top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
}

.sidebar-hide-rail {
  display: none;
}

/* Final topbar placement: keep workbench actions aligned after moving sidebar controls to the rail. */
body.workbench-open .top-actions,
body.workbench-open.dashboard-open .top-actions,
body.workbench-open.materials-open .top-actions,
body.workbench-open.rename-open .top-actions,
body.workbench-open.process-open .top-actions,
body.workbench-open.bgm-open .top-actions,
body.workbench-open.mask-open .top-actions,
body.workbench-open.exports-open .top-actions,
body.workbench-open.settings-open .top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Final sidebar hide placement: the hide button lives at the top of the rail. */
body.workbench-open .sidebar-hide-topbar,
body.workbench-open.dashboard-open .sidebar-hide-topbar,
body.workbench-open.materials-open .sidebar-hide-topbar,
body.workbench-open.rename-open .sidebar-hide-topbar,
body.workbench-open.process-open .sidebar-hide-topbar,
body.workbench-open.bgm-open .sidebar-hide-topbar,
body.workbench-open.mask-open .sidebar-hide-topbar,
body.workbench-open.exports-open .sidebar-hide-topbar,
body.workbench-open.settings-open .sidebar-hide-topbar {
  display: none !important;
}

body.workbench-open .sidebar-hide-rail,
body.workbench-open.dashboard-open .sidebar-hide-rail,
body.workbench-open.materials-open .sidebar-hide-rail,
body.workbench-open.rename-open .sidebar-hide-rail,
body.workbench-open.process-open .sidebar-hide-rail,
body.workbench-open.bgm-open .sidebar-hide-rail,
body.workbench-open.mask-open .sidebar-hide-rail,
body.workbench-open.exports-open .sidebar-hide-rail,
body.workbench-open.settings-open .sidebar-hide-rail {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 auto 8px !important;
  padding: 0 !important;
  color: #4b5563 !important;
  background: #fff !important;
  border: 1px solid #e0e5ee !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.045) !important;
  cursor: pointer !important;
}

body.workbench-open .sidebar-hide-rail:hover {
  color: #ff5b18 !important;
  background: #fff7f2 !important;
  border-color: #ffd9c9 !important;
}

body.workbench-open .sidebar-hide-rail svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.workbench-open.sidebar-hidden .sidebar-hide-rail,
body.workbench-open.dashboard-open.sidebar-hidden .sidebar-hide-rail,
body.workbench-open.materials-open.sidebar-hidden .sidebar-hide-rail,
body.workbench-open.rename-open.sidebar-hidden .sidebar-hide-rail,
body.workbench-open.process-open.sidebar-hidden .sidebar-hide-rail,
body.workbench-open.bgm-open.sidebar-hidden .sidebar-hide-rail,
body.workbench-open.mask-open.sidebar-hidden .sidebar-hide-rail,
body.workbench-open.exports-open.sidebar-hidden .sidebar-hide-rail,
body.workbench-open.settings-open.sidebar-hidden .sidebar-hide-rail {
  display: none !important;
}

body.workbench-open .side-nav,
body.workbench-open.dashboard-open .side-nav,
body.workbench-open.materials-open .side-nav,
body.workbench-open.rename-open .side-nav,
body.workbench-open.process-open .side-nav,
body.workbench-open.bgm-open .side-nav,
body.workbench-open.mask-open .side-nav,
body.workbench-open.exports-open .side-nav,
body.workbench-open.settings-open .side-nav {
  padding-top: 6px !important;
}

/* Mask editor final pass: FlexClip-like canvas, media cards, and layer dock. */
body.workbench-open.mask-open .content {
  background: #f3f6fb !important;
}

body.workbench-open.mask-open .topbar {
  min-height: 58px !important;
  border-bottom: 1px solid #e5ebf4 !important;
  box-shadow: none !important;
}

.mask-workbench {
  height: calc(100vh - 78px) !important;
  min-height: 720px !important;
  display: grid !important;
  grid-template-columns: 300px minmax(760px, 1fr) 300px !important;
  grid-template-rows: 88px minmax(0, 1fr) 82px !important;
  grid-template-areas:
    "toolbar toolbar toolbar"
    "assets stage inspector"
    "flow flow flow" !important;
  gap: 12px !important;
  padding: 12px !important;
  overflow: hidden !important;
  background: #eef2f7 !important;
}

.mask-editor-toolbar {
  grid-area: toolbar !important;
  display: grid !important;
  grid-template-rows: 38px 34px !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid #dfe6f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 26px rgba(30,41,59,0.07) !important;
}

.mask-primary-toolbar,
.mask-format-toolbar {
  min-width: 0 !important;
  gap: 7px !important;
}

.mask-primary-toolbar button,
.mask-primary-toolbar select,
.mask-format-toolbar button,
.mask-format-toolbar select,
.mask-format-toolbar input {
  height: 30px !important;
  min-height: 30px !important;
  border-color: #d8e1ee !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

.mask-ratio-select {
  width: 86px !important;
  font-weight: 800 !important;
}

.mask-task-title {
  min-width: 192px !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
}

.mask-task-title strong,
.mask-task-title span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mask-format-toolbar {
  border-top: 1px solid #edf2f8 !important;
  overflow: hidden !important;
}

.mask-format-toolbar select {
  width: 128px !important;
}

.mask-format-toolbar button {
  flex: 0 0 auto !important;
  padding: 0 9px !important;
}

.mask-toolbar-count {
  margin-left: auto !important;
}

.mask-assets-panel,
.mask-stage-panel,
.mask-inspector-panel {
  min-height: 0 !important;
  border: 1px solid #dfe6f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(30,41,59,0.06) !important;
}

.mask-assets-panel {
  grid-area: assets !important;
  overflow: hidden !important;
}

.mask-asset-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  align-content: start !important;
}

.mask-asset-card {
  min-height: 118px !important;
  padding: 7px !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid #e1e8f2 !important;
}

.mask-asset-card.selected {
  border-color: #ff6a2a !important;
  box-shadow: 0 0 0 1px rgba(255,106,42,0.18) !important;
}

.mask-asset-thumb {
  position: relative !important;
  height: 72px !important;
  border-radius: 7px !important;
  background:
    linear-gradient(45deg, #f4f6fa 25%, transparent 25%),
    linear-gradient(-45deg, #f4f6fa 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f4f6fa 75%),
    linear-gradient(-45deg, transparent 75%, #f4f6fa 75%),
    #fff !important;
  background-size: 16px 16px !important;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0 !important;
  overflow: hidden !important;
}

.mask-asset-thumb img,
.mask-asset-thumb video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.mask-video-mark {
  position: absolute !important;
  left: 7px !important;
  bottom: 7px !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  color: #fff !important;
  background: rgba(15,23,42,0.84) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-style: normal !important;
}

.mask-asset-card strong,
.mask-asset-card small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mask-stage-panel {
  grid-area: stage !important;
  display: grid !important;
  grid-template-rows: 34px minmax(320px, 1fr) 40px clamp(176px, 23vh, 224px) !important;
  overflow: hidden !important;
}

.mask-stage-header {
  padding: 0 14px !important;
  background: #fff !important;
  border-bottom: 1px solid #edf2f8 !important;
}

.mask-stage-header span {
  color: #fff !important;
  background: #172233 !important;
  border-radius: 6px !important;
}

.mask-canvas-wrap {
  min-height: 0 !important;
  padding: 0 14px !important;
  background: #fff !important;
}

.mask-canvas {
  min-height: 320px !important;
  height: 100% !important;
  background:
    linear-gradient(rgba(255,255,255,0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.15) 1px, transparent 1px),
    #101827 !important;
  background-size: 48px 48px !important;
  border: 0 !important;
  border-radius: 7px !important;
  overflow: hidden !important;
}

.mask-base-media {
  filter: none !important;
}

.mask-safe-frame {
  inset: 50px 64px !important;
  border: 1px dashed rgba(255,255,255,0.72) !important;
}

.mask-canvas.show-grid::after {
  inset: 36px 48px !important;
  border: 1px dashed rgba(255,255,255,0.48) !important;
  background-size: 48px 48px !important;
}

.mask-guide-x,
.mask-guide-y {
  background: rgba(23,195,211,0.55) !important;
}

.mask-canvas-layer {
  cursor: grab !important;
  border: 1px dashed rgba(255,255,255,0.72) !important;
  will-change: left, top, transform, opacity !important;
}

.mask-canvas-layer:active {
  cursor: grabbing !important;
}

.mask-canvas-layer.active {
  border: 2px solid #16c5d8 !important;
  box-shadow: 0 0 0 1px rgba(22,197,216,0.22), 0 18px 38px rgba(0,0,0,0.26) !important;
}

.mask-canvas-layer.locked {
  cursor: default !important;
}

.mask-canvas-layer .handle,
.mask-selection-center {
  border-color: #16c5d8 !important;
}

.mask-video-fallback {
  position: absolute !important;
  inset: auto 8px 8px 8px !important;
  display: none !important;
  place-items: center !important;
  min-height: 24px !important;
  color: #fff !important;
  background: rgba(17,24,39,0.78) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.mask-canvas-layer.video-error video {
  opacity: 0.24 !important;
}

.mask-canvas-layer.video-error .mask-video-fallback,
.mask-video-fallback.visible {
  display: grid !important;
}

.mask-floating-menu,
.mask-floating-toolbar {
  border-radius: 8px !important;
  box-shadow: 0 18px 40px rgba(15,23,42,0.22) !important;
}

.mask-stage-tools {
  display: grid !important;
  grid-template-columns: auto 1fr auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 14px !important;
  background: #fff !important;
}

.mask-editor-bottom {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 14px 14px !important;
  background: #fff !important;
}

.mask-timeline,
.mask-layer-list {
  border-radius: 8px !important;
  border-color: #dfe6f0 !important;
}

.mask-editor-bottom .mask-layer-list {
  display: grid !important;
}

.mask-layer-row {
  min-height: 36px !important;
  grid-template-columns: 24px 38px 92px minmax(0, 1fr) 28px 28px !important;
  border-radius: 7px !important;
}

.mask-layer-row b {
  width: 34px !important;
  height: 24px !important;
  border-radius: 5px !important;
  overflow: hidden !important;
}

.mask-layer-row b img,
.mask-layer-row b video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.mask-layer-row strong,
.mask-layer-row small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mask-inspector-panel {
  grid-area: inspector !important;
  overflow: hidden auto !important;
}

.mask-flow {
  grid-area: flow !important;
  min-height: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(30,41,59,0.06) !important;
}

@media (max-width: 1500px) {
  .mask-workbench {
    grid-template-columns: 270px minmax(620px, 1fr) 280px !important;
  }
  .mask-editor-bottom {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .mask-timeline {
    display: grid !important;
  }
  .mask-stage-panel {
    grid-template-rows: 34px minmax(300px, 1fr) 40px clamp(168px, 24vh, 218px) !important;
  }
}

@media (max-width: 1120px) {
  .mask-workbench {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto auto !important;
    grid-template-areas:
      "toolbar"
      "assets"
      "stage"
      "inspector"
      "flow" !important;
    overflow: visible !important;
  }
  .mask-stage-panel {
    grid-template-rows: auto minmax(300px, 58vh) auto auto !important;
  }
  .mask-editor-toolbar {
    grid-template-rows: auto auto !important;
  }
  .mask-primary-toolbar,
  .mask-format-toolbar {
    flex-wrap: wrap !important;
  }
}

/* Settings page final fidelity layer: narrow rail, mockup-aligned content. */
body.workbench-open.settings-open {
  color-scheme: light !important;
  --settings-bg: #f8fafc;
  --settings-surface: #ffffff;
  --settings-text: #111827;
  --settings-muted: #667085;
  --settings-border: #e2e8f0;
  --settings-soft: #f5f7fb;
  --settings-orange: #ff5b16;
  --settings-orange-strong: #f04b0b;
  --settings-green: #21ad66;
  --settings-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  min-width: 1180px !important;
  overflow: hidden !important;
  background: var(--settings-bg) !important;
  color: var(--settings-text) !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Arial, sans-serif !important;
}

body.workbench-open.settings-open .app-shell {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  grid-template-areas: "sidebar main" !important;
  grid-template-rows: minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  background: var(--settings-bg) !important;
}

body.workbench-open.settings-open.sidebar-hidden .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "main" !important;
}

body.workbench-open.settings-open .sidebar {
  grid-area: sidebar !important;
  display: flex !important;
  flex-direction: column !important;
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 100dvh !important;
  padding: 18px 8px 14px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid #e7ebf2 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 10px 0 24px rgba(17, 24, 39, 0.035) !important;
}

body.workbench-open.settings-open.sidebar-hidden .sidebar {
  display: none !important;
}

body.workbench-open.settings-open .brand-card,
body.workbench-open.settings-open .brand-mark,
body.workbench-open.settings-open .traffic,
body.workbench-open.settings-open .nav-label,
body.workbench-open.settings-open .sidebar-controls,
body.workbench-open.settings-open .sidebar-storage,
body.workbench-open.settings-open .sidebar-version,
body.workbench-open.settings-open .sidebar-home,
body.workbench-open.settings-open .sidebar-hide-topbar {
  display: none !important;
}

body.workbench-open.settings-open .sidebar-hide-rail {
  display: grid !important;
}

body.workbench-open.settings-open .side-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 0 0 !important;
  overflow: visible !important;
}

body.workbench-open.settings-open .side-nav button {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 24px auto !important;
  place-items: center !important;
  gap: 5px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 62px !important;
  min-height: 62px !important;
  padding: 7px 0 6px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #4b5563 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.workbench-open.settings-open .side-nav button.active {
  background: #fff3ed !important;
  color: #ff4f0a !important;
}

body.workbench-open.settings-open .side-nav button .svg-icon,
body.workbench-open.settings-open .side-nav button svg {
  width: 22px !important;
  height: 22px !important;
  color: currentColor !important;
  stroke-width: 1.85 !important;
}

body.workbench-open.settings-open .side-nav button span:not(.nav-symbol):not(.svg-icon),
body.workbench-open.settings-open .side-nav button span:last-child {
  display: block !important;
  width: 58px !important;
  max-width: 58px !important;
  overflow: visible !important;
  color: currentColor !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
}

body.workbench-open.settings-open .main {
  grid-area: main !important;
  display: grid !important;
  grid-template-rows: 88px minmax(0, 1fr) !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: var(--settings-bg) !important;
}

body.workbench-open.settings-open .topbar {
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  margin: 0 !important;
  padding: 0 46px 0 28px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--settings-border) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.workbench-open.settings-open .crumb {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  color: #111827 !important;
}

body.workbench-open.settings-open .crumb span,
body.workbench-open.settings-open .crumb b,
body.workbench-open.settings-open #page-title {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 17px !important;
  font-weight: 750 !important;
}

body.workbench-open.settings-open .top-actions {
  display: grid !important;
  grid-template-columns: minmax(360px, 448px) 180px 136px minmax(120px, 1fr) 148px !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.workbench-open.settings-open .settings-top-primary {
  grid-column: 5 !important;
}

body.workbench-open.settings-open .settings-top-search,
body.workbench-open.settings-open .settings-version-pill,
body.workbench-open.settings-open .settings-top-button,
body.workbench-open.settings-open .settings-top-primary {
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 760 !important;
}

body.workbench-open.settings-open .settings-top-search {
  width: 100% !important;
  min-width: 0 !important;
}

body.workbench-open.settings-open .settings-version-pill,
body.workbench-open.settings-open .settings-top-button,
body.workbench-open.settings-open .settings-top-primary {
  width: 100% !important;
}

body.workbench-open.settings-open .view {
  height: calc(100dvh - 88px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.workbench-open.settings-open .settings-page {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 108px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--settings-bg) !important;
}

body.workbench-open.settings-open .settings-layout {
  display: grid !important;
  grid-template-columns: minmax(760px, 1fr) 430px !important;
  gap: 18px !important;
  min-height: 0 !important;
  padding: 0 26px 10px !important;
  overflow: hidden !important;
}

body.workbench-open.settings-open .settings-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 160px 186px 160px minmax(178px, 1fr) !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.workbench-open.settings-open .settings-side {
  display: grid !important;
  grid-template-columns: 430px !important;
  grid-template-rows: minmax(386px, 1fr) 178px 152px !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.workbench-open.settings-open .settings-card,
body.workbench-open.settings-open .settings-side-card {
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid var(--settings-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.045) !important;
}

body.workbench-open.settings-open .settings-card {
  display: grid !important;
  grid-template-rows: 52px minmax(0, 1fr) !important;
  padding: 0 20px 12px !important;
  overflow: hidden !important;
}

body.workbench-open.settings-open .settings-card-head,
body.workbench-open.settings-open .settings-side-card header {
  min-height: 52px !important;
}

body.workbench-open.settings-open .settings-card-body {
  min-height: 0 !important;
  padding-top: 12px !important;
  overflow: hidden !important;
}

body.workbench-open.settings-open .settings-grid.four {
  grid-template-columns: 1.05fr 0.8fr 1.28fr 0.66fr !important;
  gap: 16px !important;
}

body.workbench-open.settings-open .settings-ffmpeg-row {
  grid-template-columns: 240px minmax(300px, 1fr) 128px 128px !important;
  gap: 18px !important;
}

body.workbench-open.settings-open .settings-status-inline {
  gap: 8px !important;
  min-height: 58px !important;
}

body.workbench-open.settings-open .settings-switch-row {
  gap: 16px !important;
  margin-top: 6px !important;
}

body.workbench-open.settings-open .settings-inline-hint {
  display: none !important;
}

body.workbench-open.settings-open .settings-strategy-grid {
  grid-template-columns: 1fr 1.18fr 1.9fr !important;
  gap: 26px !important;
}

body.workbench-open.settings-open .settings-toggles {
  gap: 8px 26px !important;
}

body.workbench-open.settings-open .settings-switch {
  min-height: 24px !important;
}

body.workbench-open.settings-open .settings-field input,
body.workbench-open.settings-open .settings-field select,
body.workbench-open.settings-open .settings-path-control input,
body.workbench-open.settings-open .settings-soft-button,
body.workbench-open.settings-open .settings-mini-button {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 8px !important;
}

body.workbench-open.settings-open .settings-path-control input {
  border-radius: 8px 0 0 8px !important;
}

body.workbench-open.settings-open .settings-path-control input[data-directory-picker] {
  cursor: pointer !important;
}

body.workbench-open.settings-open .settings-path-control button {
  min-height: 44px !important;
  border-radius: 0 8px 8px 0 !important;
  cursor: pointer !important;
}

body.workbench-open.settings-open .settings-path-control button:hover:not(:disabled) {
  border-color: #ffb392 !important;
  color: var(--settings-orange) !important;
  background: #fff7f2 !important;
}

body.workbench-open.settings-open .settings-path-control button:disabled {
  cursor: not-allowed !important;
  color: #9ca3af !important;
  background: #f8fafc !important;
}

body.workbench-open.settings-open .settings-side-card {
  padding: 0 22px 18px !important;
  overflow: hidden !important;
}

body.workbench-open.settings-open .settings-system-card {
  grid-template-rows: 58px auto 1px auto 1px auto minmax(0, 1fr) !important;
}

body.workbench-open.settings-open .settings-storage-body {
  grid-template-columns: 118px minmax(0, 1fr) !important;
}

body.workbench-open.settings-open .settings-bottom-bar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(170px, 1fr)) 298px !important;
  align-items: center !important;
  gap: 34px !important;
  height: 108px !important;
  min-height: 108px !important;
  padding: 12px 28px !important;
  border-top: 1px solid var(--settings-border) !important;
  background: #fff !important;
  box-shadow: 0 -10px 26px rgba(15, 23, 42, 0.04) !important;
}

body.workbench-open.settings-open .settings-bottom-bar > button {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  min-height: 76px !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
}

body.workbench-open.settings-open .settings-save-state {
  min-height: 74px !important;
  padding-left: 34px !important;
  border-left: 1px solid var(--settings-border) !important;
}

@media (max-width: 1180px) {
  body.workbench-open.settings-open {
    min-width: 0 !important;
  }

  body.workbench-open.settings-open .topbar {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 84px !important;
    max-height: none !important;
    padding: 16px 18px !important;
    overflow: visible !important;
  }

  body.workbench-open.settings-open .crumb {
    display: none !important;
  }

  body.workbench-open.settings-open .top-actions {
    grid-template-columns: minmax(260px, 1fr) 160px 128px 132px !important;
    justify-content: stretch !important;
  }

  body.workbench-open.settings-open .settings-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    overflow: auto !important;
  }

  body.workbench-open.settings-open .settings-main,
  body.workbench-open.settings-open .settings-side {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    overflow: visible !important;
  }

  body.workbench-open.settings-open .settings-grid.four,
  body.workbench-open.settings-open .settings-ffmpeg-row,
  body.workbench-open.settings-open .settings-strategy-grid,
  body.workbench-open.settings-open .settings-bottom-bar {
    grid-template-columns: 1fr 1fr !important;
  }

  body.workbench-open.settings-open .settings-toggles,
  body.workbench-open.settings-open .settings-save-state {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 980px) {
  body.workbench-open.settings-open .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "main" !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.workbench-open.settings-open .sidebar {
    display: none !important;
  }

  body.workbench-open.settings-open .main,
  body.workbench-open.settings-open .view,
  body.workbench-open.settings-open .settings-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.workbench-open.settings-open .top-actions,
  body.workbench-open.settings-open .settings-grid.four,
  body.workbench-open.settings-open .settings-ffmpeg-row,
  body.workbench-open.settings-open .settings-strategy-grid,
  body.workbench-open.settings-open .settings-bottom-bar {
    grid-template-columns: 1fr !important;
  }

  body.workbench-open.settings-open .settings-layout {
    padding: 12px !important;
  }

  body.workbench-open.settings-open .settings-save-state {
    padding-left: 0 !important;
    border-left: 0 !important;
  }
}

/* Modular process editor */
body.workbench-open.process-open .process-project-panel.process-module-shell {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.workbench-open.process-open .process-module-rail {
  display: grid !important;
  grid-auto-rows: minmax(58px, auto) !important;
  align-content: start !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 10px 7px !important;
  border-right: 1px solid #e4e7ef !important;
  background: #f7f8fb !important;
  overflow: hidden auto !important;
}

body.workbench-open.process-open .process-module-rail button {
  display: grid !important;
  place-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 6px 4px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #596273 !important;
  cursor: pointer !important;
}

body.workbench-open.process-open .process-module-rail button:hover,
body.workbench-open.process-open .process-module-rail button.active {
  border-color: #ffd0bd !important;
  background: #ffffff !important;
  color: #ff5b18 !important;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.06) !important;
}

body.workbench-open.process-open .process-module-rail b {
  max-width: 100% !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
}

body.workbench-open.process-open .process-module-icon,
body.workbench-open.process-open .process-module-icon svg {
  width: 20px !important;
  height: 20px !important;
}

body.workbench-open.process-open .process-module-panel {
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 14px !important;
  overflow: hidden auto !important;
}

body.workbench-open.process-open .process-module-head,
body.workbench-open.process-open .process-board-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.workbench-open.process-open .process-module-head h2,
body.workbench-open.process-open .process-board-head h3 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

body.workbench-open.process-open .process-module-head span,
body.workbench-open.process-open .process-board-head span {
  color: #7b8494 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.workbench-open.process-open .process-module-head button,
body.workbench-open.process-open .process-board-head button,
body.workbench-open.process-open .process-module-upload-row button,
body.workbench-open.process-open .process-import-actions button,
body.workbench-open.process-open .process-file-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid #e2e6ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #30343b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open.process-open .process-module-head button:first-of-type {
  border-color: transparent !important;
  background: #111827 !important;
  color: #ffffff !important;
}

body.workbench-open.process-open .process-module-head button {
  flex: 0 0 auto !important;
  min-width: 104px !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-board-block {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 11px !important;
  border: 1px solid #edf0f5 !important;
  border-radius: 8px !important;
  background: #fbfcfe !important;
}

body.workbench-open.process-open .process-import-stats,
body.workbench-open.process-open .process-module-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.workbench-open.process-open .process-bucket-stat,
body.workbench-open.process-open .process-module-summary-grid article {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 74px !important;
  padding: 10px !important;
  border: 1px solid #e4e7ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #30343b !important;
  text-align: left !important;
}

body.workbench-open.process-open .process-bucket-stat.active {
  border-color: #ff9c75 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 91, 24, 0.13) !important;
}

body.workbench-open.process-open .process-bucket-stat b,
body.workbench-open.process-open .process-module-summary-grid strong {
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

body.workbench-open.process-open .process-bucket-stat span,
body.workbench-open.process-open .process-module-summary-grid span {
  color: #30343b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open.process-open .process-bucket-stat small,
body.workbench-open.process-open .process-module-summary-grid small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #7b8494 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-import-actions,
body.workbench-open.process-open .process-module-upload-row,
body.workbench-open.process-open .process-file-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body.workbench-open.process-open .process-name-preview {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 8px 10px !important;
  align-items: center !important;
}

body.workbench-open.process-open .process-name-preview span {
  color: #7b8494 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.workbench-open.process-open .process-name-preview strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-file-board {
  min-height: 240px !important;
}

body.workbench-open.process-open .process-file-tools {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px 34px !important;
  gap: 7px !important;
}

body.workbench-open.process-open .process-file-tools select,
body.workbench-open.process-open .process-file-tools button {
  min-width: 0 !important;
  min-height: 34px !important;
  border: 1px solid #e2e6ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #30343b !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.workbench-open.process-open .process-module-list {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.workbench-open.process-open .process-compact-file {
  display: grid !important;
  grid-template-columns: 18px 46px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 3px 9px !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 7px !important;
  border: 1px solid #e4e7ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  cursor: pointer !important;
}

body.workbench-open.process-open .process-compact-file.selected {
  border-color: #ff9c75 !important;
  background: #fff7f3 !important;
}

body.workbench-open.process-open .process-compact-file input {
  grid-row: 1 / 3 !important;
}

body.workbench-open.process-open .process-compact-file > span {
  grid-row: 1 / 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 40px !important;
  overflow: hidden !important;
  border-radius: 7px !important;
  background: #eef1f6 !important;
}

body.workbench-open.process-open .process-compact-file img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body.workbench-open.process-open .process-compact-file i {
  color: #596273 !important;
  font-style: normal !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body.workbench-open.process-open .process-compact-file b,
body.workbench-open.process-open .process-compact-file small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-compact-file b {
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open.process-open .process-compact-file small {
  color: #7b8494 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

body.workbench-open.process-open .process-inspector-module-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding: 6px !important;
  border-radius: 8px !important;
  background: #f2f4f7 !important;
}

body.workbench-open.process-open .process-inspector-module-tabs button {
  min-width: 0 !important;
  min-height: 32px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #596273 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-inspector-module-tabs button.active {
  background: #111827 !important;
  color: #ffffff !important;
}

body.workbench-open.process-open .process-real-preview-chip.status-ready,
body.workbench-open.process-open .process-real-preview-chip.status-cached {
  color: #08745f !important;
  background: #e7f7f2 !important;
}

body.workbench-open.process-open .process-real-preview-chip.status-unavailable,
body.workbench-open.process-open .process-real-preview-chip.status-failed {
  color: #9a3412 !important;
  background: #fff1e7 !important;
}

body.workbench-open.process-open .process-real-preview-chip.status-skipped,
body.workbench-open.process-open .process-real-preview-chip.status-idle {
  color: #596273 !important;
  background: #eef1f6 !important;
}

body.workbench-open.process-open .process-preview-status-note {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 7 !important;
  max-width: min(520px, 64%) !important;
  overflow: hidden !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  background: rgba(17, 24, 39, 0.82) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-track {
  grid-template-columns: repeat(7, minmax(calc(132px * var(--process-timeline-zoom, 1)), 1fr)) 76px !important;
}

body.workbench-open.process-open .process-track > i {
  left: 6.8% !important;
}

@media (max-width: 1180px) {
  body.workbench-open.process-open .process-editor {
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr) !important;
  }

  body.workbench-open.process-open .process-inspector {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    max-height: 34dvh !important;
    margin: 0 12px 10px !important;
  }

  body.workbench-open.process-open .process-project-panel.process-module-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  body.workbench-open.process-open .process-module-rail {
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(64px, 1fr) !important;
    grid-auto-rows: auto !important;
    overflow: auto hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e4e7ef !important;
  }
}

@media (max-width: 780px) {
  body.workbench-open.process-open .process-import-stats,
  body.workbench-open.process-open .process-module-summary-grid,
  body.workbench-open.process-open .process-inspector-module-tabs {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.workbench-open.process-open .process-preview-status-note {
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
  }
}

/* Unified process canvas composition overlay. */
body.workbench-open.process-open .process-project-panel.process-module-shell {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.workbench-open.process-open .process-module-rail {
  display: none !important;
}

body.workbench-open.process-open .side-nav {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
  scrollbar-width: thin !important;
}

body.workbench-open.process-open .side-nav button {
  min-height: 40px !important;
}

body.workbench-open.process-open .process-mask-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  pointer-events: none !important;
}

body.workbench-open.process-open .process-mask-overlay .mask-canvas-layer,
body.workbench-open.process-open .process-mask-overlay .mask-floating-menu,
body.workbench-open.process-open .process-mask-overlay .mask-floating-toolbar {
  pointer-events: auto !important;
}

body.workbench-open.process-open .process-mask-overlay .mask-canvas-layer {
  border-color: rgba(255, 255, 255, 0.72) !important;
}

body.workbench-open.process-open .process-mask-overlay .mask-canvas-layer.active {
  border-color: #12c8d8 !important;
  box-shadow: 0 0 0 1px rgba(18, 200, 216, 0.26), 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

body.workbench-open.process-open .process-mask-overlay.controls-only .process-mask-control-layer {
  min-height: 44px !important;
  background: rgba(18, 200, 216, 0.045) !important;
  border: 1px dashed rgba(18, 200, 216, 0.7) !important;
}

body.workbench-open.process-open .process-mask-overlay.controls-only .process-mask-control-layer:not(.active) {
  opacity: 0.2 !important;
}

body.workbench-open.process-open .process-mask-overlay .mask-canvas-guides {
  z-index: 16 !important;
}

body.workbench-open.process-open .process-mask-overlay .mask-floating-menu,
body.workbench-open.process-open .process-mask-overlay .mask-floating-toolbar {
  z-index: 44 !important;
}

body.workbench-open.process-open .process-mask-overlay .mask-safe-dash {
  inset: 56px 62px 52px !important;
}

body.workbench-open.process-open .process-canvas.has-rendered-preview .process-after-layer,
body.workbench-open.process-open .process-canvas.has-rendered-preview .process-split-line,
body.workbench-open.process-open .process-canvas.has-rendered-preview .process-before-tag,
body.workbench-open.process-open .process-canvas.has-rendered-preview .process-after-tag {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.workbench-open.process-open .process-canvas.has-composition .process-preview-loading {
  z-index: 30 !important;
}

@media (max-width: 1180px) {
  body.workbench-open.process-open .process-editor {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.workbench-open.process-open .process-editor-toolbar,
  body.workbench-open.process-open .process-project-panel,
  body.workbench-open.process-open .process-stage,
  body.workbench-open.process-open .process-inspector,
  body.workbench-open.process-open .process-timeline {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: auto !important;
  }

  body.workbench-open.process-open .process-project-panel.process-module-shell {
    grid-template-rows: auto !important;
    margin: 0 8px !important;
    max-height: none !important;
  }

  body.workbench-open.process-open .process-module-panel {
    max-height: none !important;
  }

  body.workbench-open.process-open .process-stage {
    grid-template-rows: auto minmax(260px, 48vh) auto !important;
    min-height: 420px !important;
    overflow: visible !important;
  }

  body.workbench-open.process-open .process-canvas-shell {
    min-height: 260px !important;
  }

  body.workbench-open.process-open .process-canvas {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--process-canvas-ratio, 16 / 9) !important;
  }
}

/* Figure-aligned editor distribution: unified rail, module panel, stage, inspector, timeline. */
body.workbench-open:not(.auth-open) {
  color: #161b22 !important;
  background: #f5f7fb !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Arial, sans-serif !important;
}

body.workbench-open:not(.auth-open)::before,
body.workbench-open:not(.auth-open)::after {
  opacity: 0 !important;
}

body.workbench-open .status-dock {
  display: none !important;
}

body.workbench-open .sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e7ebf2 !important;
  box-shadow: 8px 0 26px rgba(16, 24, 40, 0.035) !important;
}

body.workbench-open .brand-card {
  display: grid !important;
  place-items: center !important;
  min-height: 52px !important;
  height: 52px !important;
  margin: 0 auto 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.workbench-open .brand-card > div,
body.workbench-open .sidebar-controls,
body.workbench-open .traffic,
body.workbench-open .nav-label,
body.workbench-open .sidebar-storage,
body.workbench-open .sidebar-version,
body.workbench-open .sidebar-home,
body.workbench-open .sidebar-hide-rail {
  display: none !important;
}

body.workbench-open .brand-mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #ff7a1a 0%, #f04a0b 100%) !important;
  box-shadow: 0 12px 28px rgba(255, 91, 24, 0.22) !important;
}

body.workbench-open .side-nav {
  padding-top: 4px !important;
}

body.workbench-open .side-nav button {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  min-height: 55px !important;
  border-radius: 9px !important;
  color: #313846 !important;
}

body.workbench-open .side-nav button[data-nav-group="effects"],
body.workbench-open .side-nav button[data-nav-group="tools"] {
  min-height: 52px !important;
}

body.workbench-open .side-nav button:hover,
body.workbench-open .side-nav button.active {
  color: #ff5b18 !important;
  background: #fff2eb !important;
  border-color: #ffd7c4 !important;
  box-shadow: none !important;
}

body.workbench-open .side-nav button.active::before {
  content: "" !important;
  position: absolute !important;
  left: -8px !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: #ff5b18 !important;
}

body.workbench-open.process-open .main {
  display: grid !important;
  grid-template-rows: 64px minmax(0, 1fr) !important;
  height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f5f7fb !important;
}

body.workbench-open.process-open .topbar {
  display: grid !important;
  grid-template-columns: minmax(190px, 280px) minmax(0, 1fr) !important;
  height: 64px !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 0 18px 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid #e4e9f2 !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

body.workbench-open.process-open .crumb {
  align-items: center !important;
}

body.workbench-open.process-open .crumb span,
body.workbench-open.process-open .crumb b {
  color: #8a94a6 !important;
  font-size: 13px !important;
}

body.workbench-open.process-open .crumb h1 {
  color: #111827 !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body.workbench-open.process-open .top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.workbench-open.process-open .process-top-search {
  flex: 1 1 360px !important;
  max-width: 560px !important;
}

body.workbench-open.process-open .process-top-chip,
body.workbench-open.process-open .process-top-button,
body.workbench-open.process-open .process-top-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 13px !important;
  border: 1px solid #e0e5ee !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-top-chip i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #ffb020 !important;
}

body.workbench-open.process-open .process-top-chip.ready i {
  background: #20bf6b !important;
}

body.workbench-open.process-open .process-top-primary {
  border-color: #05070c !important;
  background: #05070c !important;
  color: #ffffff !important;
}

body.workbench-open.process-open .view {
  height: calc(100dvh - 64px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.workbench-open.process-open .process-editor {
  grid-template-columns: clamp(320px, 21vw, 380px) minmax(560px, 1fr) clamp(300px, 20vw, 344px) !important;
  grid-template-rows: 62px minmax(0, 1fr) var(--process-timeline-height, 170px) !important;
  height: 100% !important;
  min-height: 0 !important;
  background: #f5f7fb !important;
}

body.workbench-open.process-open .process-project-panel.process-module-shell {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  display: grid !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 1px solid #e3e8f0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.workbench-open.process-open .process-editor-toolbar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  grid-template-columns: 112px minmax(0, 1fr) auto auto !important;
  min-height: 62px !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid #e4e9f2 !important;
  background: #f8fafc !important;
}

body.workbench-open.process-open .process-stage {
  grid-column: 2 !important;
  grid-row: 2 !important;
  grid-template-rows: 46px minmax(0, 1fr) 46px !important;
  padding: 0 18px 16px !important;
}

body.workbench-open.process-open .process-inspector {
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  margin: 10px 16px 10px 0 !important;
  padding: 15px 14px !important;
  border: 1px solid #e4e9f2 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.055) !important;
}

body.workbench-open.process-open .process-timeline {
  grid-column: 1 / 4 !important;
  grid-row: 3 !important;
  padding: 0 18px 8px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}

body.workbench-open.process-open .process-module-panel {
  gap: 12px !important;
  padding: 16px 14px !important;
  overflow: hidden auto !important;
}

body.workbench-open.process-open .process-module-head small {
  display: block !important;
  margin-bottom: 2px !important;
  color: #ff5b18 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

body.workbench-open.process-open .process-module-tabs {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(66px, 1fr) !important;
  gap: 0 !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  border-bottom: 1px solid #edf1f6 !important;
}

body.workbench-open.process-open .process-module-tabs button {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  gap: 3px !important;
  min-width: 66px !important;
  min-height: 54px !important;
  border: 0 !important;
  background: transparent !important;
  color: #303846 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open.process-open .process-module-tabs button span,
body.workbench-open.process-open .process-module-tabs button svg {
  width: 20px !important;
  height: 20px !important;
}

body.workbench-open.process-open .process-module-tabs button.active {
  color: #ff5b18 !important;
}

body.workbench-open.process-open .process-module-tabs button.active::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: -1px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #ff5b18 !important;
}

body.workbench-open.process-open .process-panel-section {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid #edf1f6 !important;
  border-radius: 9px !important;
  background: #fbfcfe !important;
}

body.workbench-open.process-open .process-tool-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.workbench-open.process-open .process-tool-card {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 2px 9px !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 10px !important;
  border: 1px solid #e2e7ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #20242a !important;
  text-align: left !important;
}

body.workbench-open.process-open .process-tool-card.active {
  border-color: #ff7a35 !important;
  background: #fff7f2 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 91, 24, 0.12) !important;
}

body.workbench-open.process-open .process-tool-card > span {
  grid-row: 1 / 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: #f3f5f8 !important;
  color: #111827 !important;
}

body.workbench-open.process-open .process-tool-card.active > span {
  background: #ff5b18 !important;
  color: #ffffff !important;
}

body.workbench-open.process-open .process-tool-card strong,
body.workbench-open.process-open .process-tool-card small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-tool-card strong {
  font-size: 13px !important;
  font-weight: 950 !important;
}

body.workbench-open.process-open .process-tool-card small {
  color: #7b8494 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body.workbench-open.process-open .process-name-rule-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px !important;
  border: 1px solid #e4e9f2 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

body.workbench-open.process-open .process-name-rule-strip span {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: #f2f4f7 !important;
  color: #303846 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open.process-open .process-name-rule-strip i {
  color: #9aa4b2 !important;
  font-style: normal !important;
}

body.workbench-open.process-open .process-rule-add {
  width: max-content !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid #e2e7ef !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open.process-open .process-name-example {
  margin: 0 !important;
  color: #7b8494 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.workbench-open.process-open .process-inspector-module-tabs {
  display: none !important;
}

body.workbench-open.process-open .process-section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

body.workbench-open.process-open .process-section-title h3 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.workbench-open.process-open .process-section-title button {
  border: 0 !important;
  background: transparent !important;
  color: #ff5b18 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open.process-open .process-export-queue {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid #edf1f6 !important;
  border-radius: 9px !important;
  background: #fbfcfe !important;
}

body.workbench-open.process-open .process-export-queue-list {
  display: grid !important;
  gap: 8px !important;
}

body.workbench-open.process-open .process-export-queue-item {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 9px !important;
  border: 1px solid #e4e9f2 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

body.workbench-open.process-open .process-export-queue-item strong,
body.workbench-open.process-open .process-export-queue-item span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-export-queue-item strong {
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

body.workbench-open.process-open .process-export-queue-item span {
  color: #7b8494 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body.workbench-open.process-open .process-export-progress {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}

body.workbench-open.process-open .process-export-progress::before {
  content: "" !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: #e5eaf1 !important;
}

body.workbench-open.process-open .process-export-progress i {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: #ff5b18 !important;
}

body.workbench-open.process-open .process-export-progress b {
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

@media (max-width: 1180px) {
  body.workbench-open.process-open .main {
    height: auto !important;
    overflow: auto !important;
  }

  body.workbench-open.process-open .view {
    height: auto !important;
    overflow: visible !important;
  }

  body.workbench-open.process-open .process-editor {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.workbench-open.process-open .process-editor-toolbar,
  body.workbench-open.process-open .process-project-panel.process-module-shell,
  body.workbench-open.process-open .process-stage,
  body.workbench-open.process-open .process-inspector,
  body.workbench-open.process-open .process-timeline {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}
/* Modular backend pages: batch tools, naming export, task records */
.module-page {
  min-height: calc(100vh - 76px);
  padding: 18px;
  color: #121826;
  background: #f6f8fb;
}
.module-page h1,
.module-page h2,
.module-page h3,
.module-page p { margin: 0; }
.module-page button {
  color: inherit;
}
.module-side,
.module-card,
.module-kpi {
  border: 1px solid #e3e8f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 35, 60, 0.06);
}
.module-side {
  width: 300px;
  padding: 18px;
}
.module-side h2 {
  margin-bottom: 18px;
  font-size: 20px;
}
.module-main {
  min-width: 0;
  flex: 1;
}
.module-page.batch-tools-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}
.module-head,
.module-card-head,
.module-actions,
.module-detail-head,
.module-before-after,
.module-job-row,
.module-output-row {
  display: flex;
  align-items: center;
}
.module-head {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.module-head h1 {
  font-size: 22px;
}
.module-head p,
.module-card-head span,
.module-page small,
.module-page p {
  color: #667085;
}
.module-actions {
  gap: 8px;
}
.module-actions .btn.full,
.module-params .btn.full {
  width: 100%;
  justify-content: center;
}
.module-tool-card {
  display: grid;
  width: 100%;
  grid-template-columns: 42px 1fr;
  gap: 4px 12px;
  padding: 14px;
  margin-bottom: 12px;
  text-align: left;
  border: 1px solid #e3e8f2;
  border-radius: 8px;
  background: #fff;
}
.module-tool-card > span {
  display: grid;
  width: 38px;
  height: 38px;
  grid-row: span 2;
  place-items: center;
  color: #ff5a1f;
  border-radius: 8px;
  background: #fff1eb;
}
.module-tool-card svg {
  width: 20px;
  height: 20px;
}
.module-tool-card.active {
  border-color: #ff6b2b;
  background: #fff7f2;
}
.module-split,
.module-layout {
  display: grid;
  gap: 16px;
}
.module-split {
  grid-template-columns: minmax(0, 1fr) 320px;
}
.module-layout.three {
  grid-template-columns: 280px minmax(0, 1fr) 300px;
}
.module-layout.detail {
  grid-template-columns: minmax(0, 1fr) 380px;
}
.module-card {
  padding: 16px;
}
.module-card-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.module-table {
  overflow: hidden;
  border: 1px solid #edf0f6;
  border-radius: 8px;
}
.module-table-row {
  display: grid;
  width: 100%;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #edf0f6;
  background: #fff;
  text-align: left;
}
.module-table-card .module-table-row {
  grid-template-columns: 34px 76px minmax(160px, 1fr) 80px 150px 96px;
}
.naming-table .module-table-row {
  grid-template-columns: 34px 76px minmax(130px, 1fr) minmax(170px, 1.2fr) 70px 70px 82px;
}
.task-records-page .module-table-row {
  grid-template-columns: minmax(180px, 1.3fr) 100px 110px 70px 70px 90px 70px 60px;
}
.module-table-row.header {
  min-height: 42px;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  background: #f8fafc;
}
.module-table-row.active {
  outline: 1px solid #ff6b2b;
  background: #fff7f2;
}
.module-thumb {
  position: relative;
  display: grid;
  width: 64px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  background: linear-gradient(135deg, #182230, #465a69);
}
.module-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.module-thumb span,
.module-thumb em {
  position: relative;
  z-index: 1;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
}
.module-thumb.audio {
  background: linear-gradient(135deg, #312e81, #7c3aed);
}
.module-thumb.processed {
  width: 180px;
  height: 108px;
}
.module-thumb.empty {
  background: #e5e7eb;
}
.module-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.module-tags b {
  padding: 3px 7px;
  color: #344054;
  font-size: 12px;
  border-radius: 999px;
  background: #f2f4f7;
}
.module-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 4px 8px;
  color: #344054;
  font-size: 12px;
  border-radius: 999px;
  background: #eef2f6;
}
.module-status-completed,
.module-status-success,
.module-status-ready {
  color: #047857;
  background: #dcfce7;
}
.module-status-running,
.module-status-queued,
.module-status-paused {
  color: #1d4ed8;
  background: #dbeafe;
}
.module-status-failed,
.module-status-error {
  color: #dc2626;
  background: #fee2e2;
}
.module-status-warning {
  color: #b45309;
  background: #fef3c7;
}
.module-params {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.module-segment,
.module-check-grid,
.module-token-builder,
.module-kpis,
.module-tabs {
  display: grid;
  gap: 8px;
}
.module-segment {
  grid-template-columns: 1fr 1fr;
}
.module-segment label,
.module-check-grid label {
  padding: 10px;
  border: 1px solid #e3e8f2;
  border-radius: 8px;
  background: #fff;
}
.module-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.module-field {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: 13px;
}
.module-field input,
.module-field select {
  min-height: 38px;
  color: #121826;
  border-color: #d7deea;
  background-color: #fff;
}
.module-preview-row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 320px;
  gap: 16px;
  margin-top: 16px;
}
.module-before-after {
  gap: 14px;
}
.module-before-after > .module-thumb {
  width: 180px;
  height: 108px;
}
.module-queue {
  display: grid;
  gap: 8px;
}
.module-job-row {
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: #f8fafc;
}
.module-job-row progress {
  flex: 1;
  height: 8px;
  accent-color: #ff5a1f;
}
.module-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}
.module-kpi {
  padding: 16px;
}
.module-kpi span {
  color: #667085;
}
.module-kpi strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}
.module-kpi.green strong { color: #16a34a; }
.module-kpi.red strong { color: #dc2626; }
.module-kpi.amber strong { color: #f97316; }
.module-kpi.blue strong { color: #2563eb; }
.module-kpi.purple strong { color: #7c3aed; }
.module-token-builder {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.module-token-builder button,
.module-rule-list button,
.module-tabs button {
  padding: 10px;
  border: 1px solid #e3e8f2;
  border-radius: 8px;
  background: #fff;
}
.module-rule-list {
  display: grid;
  gap: 8px;
}
.module-rule-list button {
  display: flex;
  justify-content: space-between;
}
.module-rule-list .active,
.module-tabs .active {
  color: #ff5a1f;
  border-color: #ff6b2b;
  background: #fff7f2;
}
.module-tabs {
  grid-template-columns: repeat(5, max-content);
  margin-bottom: 16px;
}
.module-detail {
  position: sticky;
  top: 16px;
  align-self: start;
}
.module-close {
  float: right;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #f2f4f7;
}
.module-detail-head {
  gap: 12px;
  margin: 14px 0;
}
.module-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.module-detail-grid span,
.module-output-row,
.module-log-list p {
  padding: 8px;
  border-radius: 8px;
  background: #f8fafc;
}
.module-output-row {
  justify-content: space-between;
  margin-bottom: 8px;
}
.module-log-list {
  display: grid;
  max-height: 180px;
  gap: 6px;
  overflow: auto;
}
.module-log-list p {
  font-size: 12px;
}
.module-log-list span {
  margin-right: 8px;
  color: #667085;
}
.module-empty {
  padding: 28px;
  color: #667085;
  text-align: center;
}
.module-page .btn.danger {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff;
}
.module-page input[type="checkbox"],
.module-page input[type="radio"],
.module-page input[type="range"] {
  accent-color: #ff5a1f;
}
.module-page.batch-tools-page.batch-rename-page {
  align-items: stretch;
  align-content: start;
  gap: 14px;
  grid-template-rows: auto auto;
  min-height: auto;
  padding: 14px;
  background: #f5f7fb;
}
.batch-tool-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.045);
  scrollbar-width: thin;
}
.batch-tool-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  color: #344054;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}
.batch-tool-tab > span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #ff5a1f;
}
.batch-tool-tab > span .svg-icon,
.batch-tool-tab > span svg {
  width: 17px;
  height: 17px;
}
.batch-tool-tab:hover {
  border-color: #ffd2bd;
  color: #ff5a1f;
  background: #fff8f3;
  transform: translateY(-1px);
}
.batch-tool-tab.active {
  border-color: #ff6b2b;
  color: #ff5a1f;
  background: #fff7f2;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 31, 0.1);
}
.batch-tool-tab.active > span {
  color: #ff5a1f;
}
.batch-rename-page .module-side {
  width: clamp(248px, 16vw, 300px);
  flex: 0 0 auto;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.05);
}
.batch-rename-page .module-tool-card {
  min-height: 76px;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.batch-rename-page .module-tool-card:hover {
  border-color: #ff8a4c;
  background: #fff8f3;
  transform: translateY(-1px);
}
.batch-rename-page .module-tool-card.active {
  border-color: #ff5a1f;
  background: #fff7f2;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 31, 0.12);
}
.batch-rename-main {
  display: grid;
  gap: 14px;
  min-width: 0;
  width: 100%;
}
.batch-rename-workbench {
  display: grid;
  grid-template-columns: minmax(760px, 1fr) clamp(292px, 20vw, 340px);
  gap: 14px;
  min-width: 0;
}
.batch-rename-center,
.batch-rename-params,
.batch-rename-bottom > article,
.batch-rename-rule-card,
.batch-rename-preview-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.045);
}
.batch-rename-center {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
}
.batch-rename-head,
.batch-rename-section-title,
.batch-rename-action-row,
.batch-rename-bottom h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.batch-rename-head {
  justify-content: flex-end;
}
.batch-rename-head > span {
  flex: 0 0 auto;
  color: #667085;
  font-size: 13px;
  font-weight: 850;
}
.batch-rename-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr)) auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 2px;
  border-bottom: 1px solid #edf1f6;
}
.batch-rename-tabs label,
.batch-rename-tabs button,
.batch-rename-toolbar button,
.batch-rename-action-row button,
.batch-rename-row-actions button,
.batch-rename-output-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid #d8e0ec;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-size: 13px;
  font-weight: 900;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}
.batch-rename-tabs label {
  position: relative;
  cursor: pointer;
}
.batch-rename-tabs input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.batch-rename-tabs label.active,
.batch-rename-tabs label:has(input:checked) {
  color: #ff5a1f;
  border-color: #ff6b2b;
  background: #fff7f2;
}
.batch-rename-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.batch-rename-toolbar button {
  padding: 0 12px;
}
.batch-rename-toolbar button.primary,
.batch-rename-action-row button.primary {
  color: #fff;
  border-color: #ff5a1f;
  background: linear-gradient(180deg, #ff6d26, #fb4b0b);
  box-shadow: 0 10px 22px rgba(255, 91, 24, 0.18);
}
.batch-rename-tabs button:hover,
.batch-rename-toolbar button:hover,
.batch-rename-action-row button:hover,
.batch-rename-row-actions button:hover,
.batch-rename-output-row button:hover {
  border-color: #ff8a4c;
  color: #ff5a1f;
  background: #fff8f3;
  transform: translateY(-1px);
}
.batch-rename-toolbar button:disabled {
  color: #98a2b3;
  border-color: #e4e7ec;
  background: #f8fafc;
  transform: none;
}
.batch-rename-rule-card,
.batch-rename-preview-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  box-shadow: none;
}
.batch-rename-section-title h3,
.batch-rename-params h2,
.batch-rename-params h3,
.batch-rename-bottom h3 {
  margin: 0;
  color: #111827;
  font-size: 14px;
  font-weight: 950;
}
.batch-rename-section-title small,
.batch-rename-bottom h3 span,
.batch-rename-params p {
  color: #667085;
  font-size: 12px;
  font-weight: 760;
}
.batch-rename-rule-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfcfe;
}
.batch-rename-rule-strip .rename-rule-chip,
.batch-rename-rule-strip .rename-rule-add {
  min-height: 34px;
}
.batch-rename-rule-strip .rename-rule-chip-main {
  min-height: 34px;
}
.batch-rename-builder-grid {
  display: grid;
  grid-template-columns: minmax(310px, 0.96fr) minmax(360px, 1.04fr);
  gap: 12px;
  min-width: 0;
}
.batch-rename-elements,
.batch-rename-current,
.batch-rename-original-panel {
  min-width: 0;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fff;
}
.batch-rename-elements {
  padding: 12px;
}
.batch-rename-elements h3 {
  margin: 0 0 10px;
  color: #111827;
  font-size: 14px;
}
.batch-rename-elements .rename-element-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.batch-rename-elements .rename-element-button {
  min-height: 58px;
}
.batch-rename-current {
  overflow: hidden;
}
.batch-rename-current .rename-section-title {
  min-height: 42px;
}
.batch-rename-current .subsection {
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.batch-rename-current .subsection::before,
.batch-rename-current .subsection::after {
  display: none !important;
}
.batch-rename-current .subsection h3 {
  color: #111827;
}
.batch-rename-current .field span,
.batch-rename-current .mini-field span {
  color: #344054;
}
.batch-rename-current input,
.batch-rename-current select,
.batch-rename-original-panel input,
.batch-rename-original-panel select,
.batch-rename-params input,
.batch-rename-params select {
  min-height: 38px;
  color: #111827;
  border-color: #d8e0ec;
  background: #fff;
}
.batch-rename-original-panel {
  padding: 12px;
}
.batch-rename-original-panel .rename-original-editor {
  gap: 10px;
}
.batch-rename-original-panel .rename-original-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.batch-rename-table {
  overflow-x: auto;
  border: 1px solid #edf1f6;
  border-radius: 8px;
}
.batch-rename-row {
  display: grid;
  grid-template-columns: 28px 34px 58px minmax(190px, 1.15fr) minmax(210px, 1.25fr) 82px 118px 82px 68px;
  gap: 10px;
  align-items: center;
  min-width: 1060px;
  min-height: 50px;
  padding: 8px 10px;
  border-bottom: 1px solid #edf1f6;
  color: #344054;
  font-size: 13px;
}
.batch-rename-row:last-child {
  border-bottom: 0;
}
.batch-rename-row.header {
  min-height: 38px;
  color: #667085;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}
.batch-rename-row.active:not(.header),
.batch-rename-row:not(.header):hover {
  background: #fff7f2;
}
.batch-rename-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
}
.batch-rename-row > strong,
.batch-rename-row > em,
.batch-rename-row > span,
.batch-rename-row > i {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batch-rename-row > em,
.batch-rename-row.header > em {
  color: #ff5a1f;
  font-style: normal;
  font-weight: 900;
}
.batch-rename-row > b {
  color: #475467;
  font-variant-numeric: tabular-nums;
}
.batch-rename-row .module-thumb {
  width: 52px;
  height: 34px;
  border-radius: 6px;
}
.batch-rename-status {
  justify-self: start;
  min-width: 58px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #eef2f6;
  color: #475467;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}
.batch-rename-status.ok {
  color: #047857;
  background: #dcfce7;
}
.batch-rename-status.warning,
.batch-rename-status.conflict {
  color: #ea580c;
  background: #ffedd5;
}
.batch-rename-status.pending {
  color: #475467;
  background: #f2f4f7;
}
.batch-rename-row-actions {
  display: inline-flex;
  gap: 4px;
}
.batch-rename-row-actions button {
  width: 30px;
  min-height: 30px;
  padding: 0;
}
.batch-rename-table-empty,
.batch-rename-selected-empty,
.batch-rename-queue-empty {
  padding: 14px 16px;
  color: #667085;
  text-align: center;
  font-weight: 800;
}
.batch-rename-params {
  position: sticky;
  top: 90px;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  min-width: 0;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.055);
}
.batch-rename-params section {
  display: grid;
  gap: 8px;
}
.batch-rename-param-pill {
  display: grid;
  place-items: center;
  min-height: 38px;
  border: 1px solid #ff6b2b;
  border-radius: 8px;
  color: #ff5a1f;
  background: #fff7f2;
  font-weight: 950;
}
.batch-rename-checks {
  gap: 10px;
}
.batch-rename-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #344054;
  font-weight: 850;
}
.batch-rename-checks input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
}
.batch-rename-output-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
}
.batch-rename-output-row button {
  min-height: 38px;
  padding: 0;
}
.batch-rename-action-row {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: 10px;
}
.batch-rename-action-row button {
  width: 100%;
}
.batch-rename-action-row button:disabled {
  color: #fff;
  opacity: 0.55;
  transform: none;
}
.batch-rename-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 12px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfcfe;
}
.batch-rename-summary h3 {
  grid-column: 1 / -1;
  margin-bottom: 8px;
}
.batch-rename-summary div {
  display: grid;
  gap: 2px;
  place-items: center;
  border-right: 1px solid #edf1f6;
}
.batch-rename-summary div:last-child {
  border-right: 0;
}
.batch-rename-summary span {
  color: #667085;
  font-size: 12px;
  font-weight: 850;
}
.batch-rename-summary b {
  color: #111827;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.batch-rename-summary .warn b {
  color: #ff5a1f;
}
.batch-rename-params .rename-template-panel {
  padding: 10px;
  border-color: #edf1f6;
  box-shadow: none;
}
.batch-rename-params .rename-template-panel-body,
.batch-rename-params .rename-template-actions {
  grid-template-columns: 1fr;
}
.batch-rename-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.batch-rename-bottom > article {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.batch-rename-selected-card {
  display: grid;
  grid-template-columns: 168px minmax(190px, 0.9fr) 42px minmax(220px, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfcfe;
}
.batch-rename-selected-card .module-thumb {
  width: 168px;
  height: 96px;
}
.batch-rename-selected-card span {
  color: #667085;
  font-size: 12px;
  font-weight: 850;
}
.batch-rename-selected-card strong,
.batch-rename-job strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #111827;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batch-rename-selected-card strong.accent {
  color: #ff5a1f;
}
.batch-rename-selected-card small,
.batch-rename-job small {
  display: block;
  margin-top: 5px;
  color: #667085;
  font-size: 12px;
}
.batch-rename-selected-card > b {
  justify-self: center;
  color: #344054;
  font-size: 28px;
}
.batch-rename-job {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfcfe;
}
.batch-rename-job > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #fff;
  background: #ff5a1f;
}
.batch-rename-job progress {
  width: 100%;
  height: 6px;
  margin-top: 8px;
  accent-color: #ff5a1f;
}
.batch-rename-job > b {
  color: #344054;
  font-variant-numeric: tabular-nums;
}
body.workbench-open.batch-tools-open .module-page.batch-tools-page:not(.batch-rename-page) {
  align-items: stretch;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100dvh - 64px);
  padding: 14px;
  gap: 12px;
  background: #f5f7fb;
}
body.workbench-open.batch-tools-open .module-page.batch-tools-page:not(.batch-rename-page) .module-side {
  flex: 0 0 260px;
  width: 260px;
  padding: 14px;
  border-color: #e5e9f2;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}
body.workbench-open.batch-tools-open .module-page.batch-tools-page:not(.batch-rename-page) .module-side h2 {
  margin-bottom: 14px;
  color: #101828;
  font-size: 18px;
  font-weight: 950;
}
body.workbench-open.batch-tools-open .module-page.batch-tools-page:not(.batch-rename-page) .module-tool-card {
  min-height: 72px;
  margin-bottom: 10px;
  border-color: #e7ebf3;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
body.workbench-open.batch-tools-open .module-page.batch-tools-page:not(.batch-rename-page) .module-tool-card:hover {
  border-color: #ffd2bd;
  transform: translateY(-1px);
}
body.workbench-open.batch-tools-open .module-page.batch-tools-page:not(.batch-rename-page) .module-tool-card.active {
  border-color: #ff6b2b;
  background: #fff6ef;
  box-shadow: inset 3px 0 0 #ff5b18;
}
body.workbench-open.batch-tools-open .module-page.batch-tools-page:not(.batch-rename-page) .module-tool-card.active > span {
  background: #ff5b18;
  color: #ffffff;
}
body.workbench-open.batch-tools-open .batch-process-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
  width: 100%;
}
body.workbench-open.batch-tools-open .batch-process-main.batch-process-main-no-head {
  grid-template-rows: minmax(0, 1fr) auto;
}
body.workbench-open.batch-tools-open .batch-process-main.batch-process-main-dedup {
  grid-template-rows: minmax(0, 1fr) auto;
}
body.workbench-open.batch-tools-open .batch-process-head {
  justify-content: flex-end;
  min-height: 40px;
  margin-bottom: 0;
}
body.workbench-open.batch-tools-open .batch-process-head .module-actions {
  margin-left: auto;
}
body.workbench-open.batch-tools-open .batch-process-split {
  grid-template-columns: minmax(0, 1fr) clamp(300px, 20vw, 350px);
  min-height: 0;
}
body.workbench-open.batch-tools-open .batch-process-center-preview {
  display: grid;
  min-height: calc(100dvh - 348px);
  padding: 0;
  place-items: stretch;
}
body.workbench-open.batch-tools-open .batch-process-center-preview article {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: inherit;
  place-items: stretch;
}
body.workbench-open.batch-tools-open .batch-effect-canvas {
  display: grid;
  min-height: inherit;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 2px solid #ffc400;
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}
body.workbench-open.batch-tools-open .batch-effect-canvas.pending {
  border-style: dashed;
}
body.workbench-open.batch-tools-open .batch-effect-canvas .module-thumb {
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.14);
}
body.workbench-open.batch-tools-open .batch-process-table {
  max-height: calc(100dvh - 330px);
  overflow: auto;
}
body.workbench-open.batch-tools-open .batch-process-table-compact {
  max-height: 220px;
}
body.workbench-open.batch-tools-open .batch-process-table-compact .module-table-row {
  min-width: 860px;
}
body.workbench-open.batch-tools-open .batch-process-table .module-table-row {
  grid-template-columns: 32px 34px 74px minmax(220px, 1fr) 72px minmax(150px, 0.72fr) 82px 78px;
  min-height: 60px;
}
body.workbench-open.batch-tools-open .batch-process-table .module-table-row.header {
  position: sticky;
  top: 0;
  z-index: 2;
}
body.workbench-open.batch-tools-open .batch-process-table .module-table-row strong {
  min-width: 0;
  overflow: hidden;
  color: #1f2937;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.workbench-open.batch-tools-open .module-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
body.workbench-open.batch-tools-open .module-row-actions i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #e4e8f0;
  border-radius: 7px;
  background: #ffffff;
  color: #475467;
  font-style: normal;
}
body.workbench-open.batch-tools-open .module-row-actions i:hover {
  border-color: #ffb58f;
  color: #ff5b18;
}
body.workbench-open.batch-tools-open .module-params {
  position: sticky;
  top: 12px;
  max-height: calc(100dvh - 96px);
  overflow: auto;
  padding: 14px;
  border-color: #e5e9f2;
}
body.workbench-open.batch-tools-open .module-params-head,
body.workbench-open.batch-tools-open .batch-param-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.workbench-open.batch-tools-open .module-params-head h3,
body.workbench-open.batch-tools-open .batch-param-title h4 {
  margin: 0;
  color: #101828;
  font-size: 15px;
  font-weight: 950;
}
body.workbench-open.batch-tools-open .module-params-head span,
body.workbench-open.batch-tools-open .batch-param-title span {
  color: #98a2b3;
  font-size: 11px;
  font-weight: 850;
}
body.workbench-open.batch-tools-open .batch-param-section {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfcfe;
}
body.workbench-open.batch-tools-open .batch-param-overview {
  gap: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf7 100%);
  border-color: #ffe0d1;
}
body.workbench-open.batch-tools-open .batch-param-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.workbench-open.batch-tools-open .batch-param-stats span {
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #ffffff;
}
body.workbench-open.batch-tools-open .batch-param-stats small {
  color: #98a2b3;
  font-size: 11px;
  font-weight: 850;
}
body.workbench-open.batch-tools-open .batch-param-stats b {
  min-width: 0;
  overflow: hidden;
  color: #182230;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.workbench-open.batch-tools-open .batch-param-active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
}
body.workbench-open.batch-tools-open .batch-param-active-tags b,
body.workbench-open.batch-tools-open .batch-param-active-tags span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 7px;
  background: #f2f4f7;
  color: #475467;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
}
body.workbench-open.batch-tools-open .batch-param-active-tags b {
  background: #fff3ed;
  color: #ff5b18;
}
body.workbench-open.batch-tools-open .batch-param-active-tags em {
  color: #9a3412;
  font-style: normal;
  font-weight: 950;
}
body.workbench-open.batch-tools-open .batch-operation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.workbench-open.batch-tools-open .batch-operation-grid label {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 50px;
  border: 1px solid #e2e7ef;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
body.workbench-open.batch-tools-open .batch-operation-grid label.active {
  border-color: #ff6b2b;
  background: #fff3ed;
  color: #ff5b18;
}
body.workbench-open.batch-tools-open .batch-operation-grid label span {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: center;
}
body.workbench-open.batch-tools-open .batch-operation-grid label b,
body.workbench-open.batch-tools-open .batch-operation-grid label small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.workbench-open.batch-tools-open .batch-operation-grid label b {
  font-size: 12px;
  font-weight: 950;
}
body.workbench-open.batch-tools-open .batch-operation-grid label small {
  color: #98a2b3;
  font-size: 10px;
  font-weight: 850;
}
body.workbench-open.batch-tools-open .batch-operation-grid label.active small {
  color: #c2410c;
}
body.workbench-open.batch-tools-open .batch-operation-grid input {
  position: absolute;
  inset: 0;
  opacity: 0;
}
body.workbench-open.batch-tools-open .batch-config-actions,
body.workbench-open.batch-tools-open .batch-primary-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
body.workbench-open.batch-tools-open .batch-primary-actions {
  grid-template-columns: 1fr;
}
body.workbench-open.batch-tools-open .batch-config-actions button,
body.workbench-open.batch-tools-open .batch-primary-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border: 1px solid #e2e7ef;
  border-radius: 8px;
  background: #ffffff;
  color: #30343b;
  font-size: 12px;
  font-weight: 900;
}
body.workbench-open.batch-tools-open .batch-primary-actions .btn.primary {
  min-height: 42px;
}
body.workbench-open.batch-tools-open .batch-note p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
}
body.workbench-open.batch-tools-open .batch-process-bottom {
  grid-template-columns: minmax(520px, 1fr) 240px 320px;
  margin-top: 0;
}
body.workbench-open.batch-tools-open .batch-process-dedup-bottom {
  grid-template-columns: minmax(520px, 1fr) 320px;
}
body.workbench-open.batch-tools-open .batch-process-bottom > article {
  min-width: 0;
}
body.workbench-open.batch-tools-open .batch-selected-materials {
  min-width: 0;
}
body.workbench-open.batch-tools-open .batch-selected-materials .module-card-head {
  margin-bottom: 8px;
}
body.workbench-open.batch-tools-open .batch-process-bottom h3 {
  margin-bottom: 10px;
  color: #101828;
  font-size: 14px;
  font-weight: 950;
}
body.workbench-open.batch-tools-open .batch-process-bottom h3 span {
  color: #667085;
  font-size: 12px;
}
body.workbench-open.batch-tools-open .batch-process-summary {
  display: grid;
  align-content: start;
  gap: 8px;
}
body.workbench-open.batch-tools-open .batch-process-summary p {
  color: #667085;
  font-size: 12px;
  font-weight: 750;
}
body.workbench-open.batch-tools-open .module-thumb.processed {
  display: grid;
  width: min(320px, 100%);
  height: 132px;
  border-radius: 4px;
  background: #e9edf4;
}
body.workbench-open.batch-tools-open .batch-process-center-preview .module-thumb.processed {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: 6px;
  box-shadow: none;
}
body.workbench-open.batch-tools-open .module-thumb.processed img,
body.workbench-open.batch-tools-open .module-thumb.processed video,
body.workbench-open.batch-tools-open .module-thumb.processed > .module-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.workbench-open.batch-tools-open .module-thumb.processed > .module-thumb {
  border-radius: 0;
}
body.workbench-open.batch-tools-open .batch-process-center-preview .module-thumb.processed img,
body.workbench-open.batch-tools-open .batch-process-center-preview .module-thumb.processed video {
  object-fit: contain;
}
body.workbench-open.batch-tools-open .module-job-row b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.workbench-open.batch-tools-open .process-inspector-section {
  margin: 0 !important;
  scroll-margin-top: 14px;
}
body.workbench-open.batch-tools-open .process-choice-group {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.workbench-open.batch-tools-open .process-field,
body.workbench-open.batch-tools-open .process-range-field {
  grid-template-columns: 78px minmax(0, 1fr) auto !important;
}
body.workbench-open.batch-tools-open .process-toggle.batch-process-jump-target,
body.workbench-open.batch-tools-open .process-field.batch-process-jump-target,
body.workbench-open.batch-tools-open .process-range-field.batch-process-jump-target,
body.workbench-open.batch-tools-open .process-inspector-section .batch-process-jump-target {
  border-radius: 8px;
  background: #fff5ef !important;
  outline: 2px solid rgba(255, 91, 24, 0.32);
  outline-offset: 3px;
  animation: batchProcessJumpPulse 1.25s ease;
}
@keyframes batchProcessJumpPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 91, 24, 0.28);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 91, 24, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 91, 24, 0);
  }
}
.frame-audio-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
}
.frame-audio-main.frame-audio-main-no-head {
  grid-template-rows: minmax(0, 1fr) auto;
}
.frame-audio-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 20vw, 350px);
  gap: 12px;
  min-height: 0;
}
.frame-audio-table-card,
.frame-audio-params,
.frame-audio-preview-card,
.frame-audio-queue-card {
  border: 1px solid #e5e9f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}
.frame-audio-table-card {
  min-width: 0;
  padding: 14px;
}
.frame-audio-table {
  max-height: calc(100dvh - 332px);
  overflow: auto;
  border: 1px solid #edf1f6;
  border-radius: 8px;
}
.frame-audio-row {
  display: grid;
  grid-template-columns: 32px 74px minmax(220px, 1fr) 72px 72px minmax(210px, .86fr) 86px;
  gap: 12px;
  align-items: center;
  min-width: 980px;
  min-height: 62px;
  padding: 10px 12px;
  border-bottom: 1px solid #edf1f6;
  color: #344054;
  font-size: 13px;
}
.frame-audio-row:not(.header) > span {
  min-width: 0;
}
.frame-audio-row:not(.header) > span:nth-child(1),
.frame-audio-row:not(.header) > span:nth-child(2) {
  display: grid;
  place-items: center;
}
.frame-audio-row:not(.header) > span:nth-child(2) {
  width: 74px;
  height: 42px;
  overflow: hidden;
}
.frame-audio-row.header {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 40px;
  color: #667085;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}
.frame-audio-row:not(.header) {
  cursor: pointer;
}
.frame-audio-row:not(.header):hover,
.frame-audio-row.active {
  background: #fff7f2;
}
.frame-audio-row:last-child {
  border-bottom: 0;
}
.frame-audio-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
}
.frame-audio-row strong,
.frame-audio-row em,
.frame-audio-row b,
.frame-audio-row i {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame-audio-row strong {
  color: #1f2937;
  font-weight: 900;
}
.frame-audio-row em,
.frame-audio-row b,
.frame-audio-row i {
  color: #667085;
  font-style: normal;
  font-weight: 850;
}
.frame-audio-row .module-thumb {
  width: 66px;
  height: 42px;
  max-width: 66px;
  max-height: 42px;
  overflow: hidden;
  border-radius: 6px;
}
.frame-audio-row .module-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame-audio-row .module-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}
.frame-audio-row .module-tags b {
  min-width: 0;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame-audio-table.table-wrap.resizable-table {
  max-height: calc(100dvh - 332px);
  overflow: auto;
}
.frame-audio-data-table {
  background: #fff;
}
.frame-audio-data-table th,
.frame-audio-data-table td {
  border-bottom: 1px solid #edf1f6;
  color: #344054;
  background: #fff;
  font-size: 13px;
  vertical-align: middle;
}
.frame-audio-data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: #667085;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}
.frame-audio-data-table tbody tr {
  cursor: pointer;
}
.frame-audio-data-table tbody tr:hover,
.frame-audio-data-table tbody tr.active {
  background: #fff7f2;
}
.frame-audio-data-table tbody tr:hover td,
.frame-audio-data-table tbody tr.active td {
  background: #fff7f2;
}
.frame-audio-data-table .frame-audio-col-select,
.frame-audio-data-table .frame-audio-col-preview,
.frame-audio-data-table .frame-audio-col-status {
  text-align: center;
}
.frame-audio-data-table .frame-audio-col-select input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: #ff5a1f;
}
.frame-audio-data-table .frame-audio-col-preview {
  overflow: hidden;
}
.frame-audio-source-preview-button {
  display: grid;
  width: 72px;
  height: 48px;
  margin: 0 auto;
  padding: 3px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: zoom-in;
}
.frame-audio-source-preview-button:hover,
.frame-audio-source-preview-button:focus-visible {
  border-color: #ffc400;
  background: #fff9db;
  outline: none;
}
.frame-audio-data-table .frame-audio-col-preview .module-thumb {
  width: 66px;
  height: 42px;
  max-width: 66px;
  max-height: 42px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 6px;
}
.frame-audio-data-table .frame-audio-col-preview .module-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame-audio-data-table .frame-audio-col-name strong,
.frame-audio-data-table .frame-audio-col-type em,
.frame-audio-data-table .frame-audio-col-duration b {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame-audio-data-table .frame-audio-col-name strong {
  color: #1f2937;
  font-weight: 900;
}
.frame-audio-data-table .frame-audio-col-type em,
.frame-audio-data-table .frame-audio-col-duration b {
  color: #667085;
  font-style: normal;
  font-weight: 850;
}
.frame-audio-data-table .frame-audio-col-tasks {
  overflow: hidden;
}
.frame-audio-data-table .frame-audio-col-tasks .module-tags {
  flex-wrap: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.frame-audio-data-table .frame-audio-col-tasks .module-tags b {
  min-width: 0;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame-audio-params {
  position: sticky;
  top: 12px;
  display: grid;
  align-content: start;
  gap: 13px;
  max-height: calc(100dvh - 96px);
  overflow: auto;
  padding: 16px;
}
.frame-audio-params,
.frame-audio-params * {
  box-sizing: border-box;
  min-width: 0;
}
.frame-audio-params h2,
.frame-audio-params h3 {
  margin: 0;
  color: #101828;
  font-weight: 950;
}
.frame-audio-params h2 {
  font-size: 18px;
}
.frame-audio-params h3 {
  font-size: 13px;
}
.frame-audio-params section {
  display: grid;
  gap: 8px;
}
.frame-audio-task-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.frame-audio-task-types label,
.frame-audio-segment label {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 8px;
  border: 1px solid #e2e7ef;
  border-radius: 8px;
  background: #fff;
  color: #344054;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.frame-audio-task-types label.active,
.frame-audio-segment label.active {
  border-color: #ff6b2b;
  background: #fff3ed;
  color: #ff5b18;
}
.frame-audio-task-types input,
.frame-audio-segment input {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.frame-audio-task-types label span {
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.frame-audio-segment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.frame-audio-segment label {
  min-height: 38px;
}
.frame-audio-field {
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
}
.frame-audio-field label,
.frame-audio-switches label {
  color: #344054;
  font-size: 12px;
  font-weight: 900;
}
.frame-audio-field input,
.frame-audio-field select,
.frame-audio-switches select {
  width: 100%;
  min-height: 36px;
  border: 1px solid #d8e0ec;
  border-radius: 8px;
  background: #fff;
  color: #111827;
}
.frame-audio-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 28px;
  gap: 8px;
  align-items: center;
}
.frame-audio-range span {
  color: #667085;
  font-size: 12px;
  font-weight: 850;
}
.frame-audio-switches {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 8px;
  align-items: center;
  padding: 0;
}
.frame-audio-switches label {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfcfe;
  gap: 7px;
  line-height: 1.25;
}
.frame-audio-switches input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  accent-color: #ff5a1f;
}
.frame-audio-switches label:last-child {
  grid-column: 1 / -1;
}
.frame-audio-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.frame-audio-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid #e2e7ef;
  border-radius: 8px;
  background: #fff;
  color: #30343b;
  font-size: 12px;
  font-weight: 900;
}
.frame-audio-actions button.primary {
  min-height: 42px;
  color: #fff;
  border-color: #ff5a1f;
  background: #2563eb;
}
.frame-audio-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
}
.frame-audio-preview-card,
.frame-audio-queue-card {
  min-width: 0;
}
.frame-audio-queue-card {
  padding: 14px;
}
.frame-audio-preview-card {
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
}
.frame-audio-center-preview {
  display: grid;
  min-height: calc(100dvh - 360px);
  max-height: calc(100dvh - 360px);
  align-items: stretch;
  justify-items: stretch;
  padding: 18px;
}
.frame-audio-queue-card h3 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  color: #101828;
  font-size: 14px;
  font-weight: 950;
}
.frame-audio-export-preview {
  display: grid;
  width: 100%;
  min-height: clamp(220px, 34vh, 430px);
  place-items: center;
}
.frame-audio-export-preview.has-frames {
  align-content: start;
  height: 100%;
  max-height: inherit;
  min-height: inherit;
  overflow: auto;
  place-items: stretch;
}
.frame-audio-export-preview.has-video {
  width: min(1080px, 100%);
  justify-self: center;
}
.frame-audio-export-video {
  display: grid;
  width: 100%;
  overflow: hidden;
  border: 1px solid #e4eaf2;
  border-radius: 8px;
  background: #0b1018;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.12);
}
.frame-audio-export-video video {
  width: 100%;
  max-height: clamp(260px, 48vh, 520px);
  aspect-ratio: 16 / 9;
  background: #000;
  object-fit: contain;
}
.frame-audio-export-empty {
  display: grid;
  gap: 8px;
  width: min(520px, 100%);
  min-height: 150px;
  place-items: center;
  padding: 24px;
  border: 1px dashed #d8e0ec;
  border-radius: 8px;
  background: #f8fafc;
  color: #667085;
  text-align: center;
}
.frame-audio-export-empty strong {
  color: #1f2937;
  font-size: 14px;
}
.frame-audio-export-empty small {
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}
.frame-audio-export-preview .frame-audio-frames {
  width: 100%;
  height: 100%;
}
.frame-audio-strip {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) 32px minmax(0, 1.1fr);
  gap: 14px;
  align-items: center;
}
.frame-audio-center-preview .frame-audio-strip {
  width: min(1120px, 100%);
}
.frame-audio-source {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfcfe;
}
.frame-audio-source-media {
  position: relative;
  display: grid;
  width: 100%;
  height: clamp(168px, 28vh, 300px);
  place-items: center;
  overflow: hidden;
  border: 1px solid #e4eaf2;
  border-radius: 7px;
  background: #f3f6fa;
}
.frame-audio-source-media img,
.frame-audio-source-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f3f6fa;
}
.frame-audio-source-media.fallback .module-thumb {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.frame-audio-source-media.fallback .module-thumb img {
  object-fit: cover;
}
.frame-audio-source-media.empty span {
  color: #667085;
  font-size: 13px;
  font-weight: 900;
}
.frame-audio-source-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.frame-audio-source strong,
.frame-audio-source small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame-audio-source strong {
  color: #1f2937;
  font-size: 12px;
}
.frame-audio-source small {
  color: #667085;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}
.frame-audio-center-preview.is-non-video .frame-audio-source {
  border-color: #ffe4a8;
  background: #fffbeb;
}
.frame-audio-center-preview.is-non-video .frame-audio-frames figure.empty span {
  background: #fffbeb;
  color: #b45309;
}
.frame-audio-strip > b {
  justify-self: center;
  color: #1f2937;
  font-size: 26px;
}
.frame-audio-frames {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-content: start;
  gap: 14px;
  min-width: 0;
}
.frame-audio-frames figure {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  padding: 10px;
  border: 1px solid #e4eaf2;
  border-radius: 8px;
  background: #fff;
}
.frame-audio-frames img,
.frame-audio-frames figure.empty span {
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  place-items: center;
  border-radius: 6px;
  background: #f3f6fa;
  object-fit: contain;
  color: #667085;
  font-size: 12px;
  font-weight: 900;
}
.frame-audio-frames figcaption {
  min-width: 0;
  overflow: hidden;
  color: #1f2937;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame-audio-queue-card {
  display: grid;
  align-content: start;
  gap: 8px;
}
.frame-audio-queue-card p {
  color: #667085;
  font-size: 13px;
}
@media (max-width: 1180px) {
  .frame-audio-workbench,
  .frame-audio-bottom {
    grid-template-columns: 1fr;
  }

  .frame-audio-params {
    position: static;
    max-height: none;
  }

  .frame-audio-center-preview {
    min-height: 360px;
  }
}
@media (max-width: 760px) {
  .frame-audio-main .batch-process-head {
    align-items: stretch;
  }

  .frame-audio-main .module-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .frame-audio-main .module-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .frame-audio-task-types,
  .frame-audio-field {
    grid-template-columns: 1fr;
  }

  .frame-audio-range {
    grid-template-columns: minmax(0, 1fr) 72px 28px;
  }

  .frame-audio-strip {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .frame-audio-center-preview {
    min-height: 320px;
    padding: 14px;
  }

  .frame-audio-strip > b {
    display: none;
  }

  .frame-audio-source-media {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .frame-audio-source-media.fallback .module-thumb {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .frame-audio-frames {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .frame-audio-table.table-wrap.resizable-table {
    overflow-x: auto;
    overflow-y: auto;
  }

  .frame-audio-table.resizable-table .frame-audio-data-table {
    min-width: 900px !important;
  }

  .frame-audio-table.resizable-table colgroup {
    display: table-column-group;
  }

  .frame-audio-table.resizable-table col {
    display: table-column;
  }

  .frame-audio-table.resizable-table .col-resizer {
    display: block;
  }
}
.batch-tools-page .btn.primary,
.task-records-page .btn.primary {
  border-color: #ff5a1f !important;
  background: #ff5a1f !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important;
}
@media (max-width: 1440px) {
  .batch-rename-workbench {
    grid-template-columns: minmax(650px, 1fr) 300px;
  }
  .batch-rename-builder-grid,
  .batch-rename-original-panel .rename-original-actions {
    grid-template-columns: 1fr;
  }
  .batch-rename-elements .rename-element-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .batch-rename-bottom {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 1180px) {
  .module-page.batch-tools-page,
  .module-layout.three,
  .module-layout.detail,
  .module-split,
  .module-preview-row {
    grid-template-columns: 1fr;
    display: grid;
  }
  .module-side {
    width: auto;
  }
  .batch-rename-workbench,
  .batch-rename-bottom,
  .batch-rename-selected-card {
    grid-template-columns: 1fr;
  }
  .batch-rename-params {
    position: static;
  }
  body.workbench-open.batch-tools-open .module-page.batch-tools-page:not(.batch-rename-page) .module-side,
  body.workbench-open.batch-tools-open .module-params {
    position: static;
    width: auto;
    max-height: none;
  }
  body.workbench-open.batch-tools-open .batch-process-split {
    grid-template-columns: minmax(0, 1fr);
  }
  body.workbench-open.batch-tools-open .batch-process-table {
    max-height: none;
    overflow-x: auto;
  }
  body.workbench-open.batch-tools-open .batch-process-center-preview {
    min-height: 360px;
  }
  body.workbench-open.batch-tools-open .batch-process-bottom {
    grid-template-columns: 1fr;
  }
  .batch-rename-selected-card > b {
    transform: rotate(90deg);
  }
  .batch-rename-selected-card .module-thumb {
    width: 100%;
    height: 180px;
  }
  .batch-tool-tabs {
    overflow-x: auto;
  }
  .batch-tool-tab {
    min-width: max-content;
  }
}
@media (max-width: 760px) {
  .module-page.batch-tools-page.batch-rename-page {
    padding: 10px;
  }
  .batch-tool-tabs {
    margin: 0 -2px;
    padding: 6px;
  }
  .batch-tool-tab {
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }
  body.workbench-open.batch-tools-open .module-page.batch-tools-page:not(.batch-rename-page) {
    padding: 10px;
  }
  body.workbench-open.batch-tools-open .batch-process-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
  }
  body.workbench-open.batch-tools-open .batch-process-head .module-actions {
    display: grid;
    width: 100%;
    margin-left: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body.workbench-open.batch-tools-open .batch-process-head .module-actions button {
    min-width: 0;
  }
  body.workbench-open.batch-tools-open .batch-process-center-preview {
    min-height: 320px;
    padding: 0;
  }
  body.workbench-open.batch-tools-open .batch-effect-canvas {
    min-height: 240px;
  }
  body.workbench-open.batch-tools-open .module-thumb.processed {
    width: 100%;
    height: 210px;
  }
  body.workbench-open.batch-tools-open .batch-config-actions {
    grid-template-columns: 1fr;
  }
  body.workbench-open.batch-tools-open .batch-process-table .module-table-row {
    grid-template-columns: 28px 30px 64px minmax(180px, 1fr) 64px minmax(130px, 0.7fr) 76px 70px;
  }
  .batch-rename-center,
  .batch-rename-params,
  .batch-rename-bottom > article {
    padding: 12px;
  }
  .batch-rename-head,
  .batch-rename-section-title,
  .batch-rename-bottom h3 {
    align-items: flex-start;
    flex-direction: column;
  }
  .batch-rename-tabs,
  .batch-rename-action-row,
  .batch-rename-elements .rename-element-grid {
    grid-template-columns: 1fr;
  }
  .batch-rename-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .batch-rename-toolbar button {
    min-width: 0;
  }
}

/* Video production editor refresh */
body.workbench-open.process-open .process-editor {
  grid-template-columns: clamp(320px, 21vw, 380px) minmax(620px, 1fr) clamp(308px, 20vw, 352px) !important;
  grid-template-rows: 62px minmax(0, 1fr) var(--process-timeline-height, 300px) !important;
  background: #f5f7fb !important;
}

body.workbench-open.process-open .process-material-panel.process-module-shell {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 16px 14px 14px !important;
  border-right: 1px solid #e3e8f0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

body.workbench-open.process-open .process-material-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

body.workbench-open.process-open .process-material-head h2 {
  margin: 0 0 4px !important;
  color: #111827 !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body.workbench-open.process-open .process-material-head span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.workbench-open.process-open .process-material-head span i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #f59e0b !important;
}

body.workbench-open.process-open .process-material-head span i.ready {
  background: #16a34a !important;
}

body.workbench-open.process-open .process-material-head button,
body.workbench-open.process-open .process-material-actions button,
body.workbench-open.process-open .process-material-empty button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid #e3e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
}

body.workbench-open.process-open .process-material-head button:hover,
body.workbench-open.process-open .process-material-actions button:hover,
body.workbench-open.process-open .process-material-empty button:hover {
  border-color: #ffb08a !important;
  background: #fff4ed !important;
  color: #f04f13 !important;
}

body.workbench-open.process-open .process-material-head button:active,
body.workbench-open.process-open .process-material-actions button:active,
body.workbench-open.process-open .process-material-empty button:active {
  transform: translateY(1px) scale(0.99) !important;
}

body.workbench-open.process-open .process-material-counters {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.workbench-open.process-open .process-material-counters .process-bucket-stat {
  min-height: 66px !important;
  padding: 10px !important;
  border: 1px solid #e6ebf3 !important;
  border-radius: 8px !important;
  background: #fbfcfe !important;
  box-shadow: none !important;
}

body.workbench-open.process-open .process-material-counters .process-bucket-stat.active {
  border-color: #ff7a35 !important;
  background: #fff6ef !important;
}

body.workbench-open.process-open .process-material-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.workbench-open.process-open .process-material-actions button:first-child {
  grid-column: span 2 !important;
  border-color: #ffd7c4 !important;
  background: #fff7f2 !important;
  color: #f05214 !important;
}

body.workbench-open.process-open .process-material-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 3px !important;
  border-radius: 8px !important;
  background: #f4f6fa !important;
}

body.workbench-open.process-open .process-material-tabs .tab-btn {
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open.process-open .process-material-tabs .tab-btn.active {
  background: #ffffff !important;
  color: #ff5b18 !important;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.06) !important;
}

body.workbench-open.process-open .process-material-search {
  min-height: 36px !important;
  border-radius: 8px !important;
}

body.workbench-open.process-open .process-material-filter {
  grid-template-columns: minmax(0, 1fr) 34px 34px !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 36px !important;
  overflow: visible !important;
}

body.workbench-open.process-open .process-material-filter select,
body.workbench-open.process-open .process-material-filter button {
  height: 34px !important;
  min-height: 34px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

body.workbench-open.process-open .process-material-filter button {
  display: grid !important;
  place-items: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.workbench-open.process-open .process-material-board {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

body.workbench-open.process-open .process-material-board > .process-board-head {
  display: none !important;
}

body.workbench-open.process-open .process-material-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-content: start !important;
  gap: 8px !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding-right: 2px !important;
}

body.workbench-open.process-open .process-material-gallery .process-compact-file {
  grid-template-columns: 1fr !important;
  grid-template-rows: 62px auto auto !important;
  gap: 4px !important;
  min-height: 104px !important;
  padding: 5px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

body.workbench-open.process-open .process-material-gallery .process-compact-file > span {
  width: 100% !important;
  height: 62px !important;
  border-radius: 7px !important;
}

body.workbench-open.process-open .process-material-gallery .process-compact-file input {
  top: 7px !important;
  right: 7px !important;
}

body.workbench-open.process-open .process-material-gallery .process-compact-file b,
body.workbench-open.process-open .process-material-gallery .process-compact-file small {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-material-empty {
  display: grid !important;
  place-items: center !important;
  gap: 8px !important;
  min-height: 180px !important;
  padding: 18px !important;
  border: 1px dashed #cfd7e5 !important;
  border-radius: 8px !important;
  background: #fbfcfe !important;
  color: #667085 !important;
  text-align: center !important;
}

body.workbench-open.process-open .process-material-empty strong {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.workbench-open.process-open .process-canvas {
  border-radius: 7px !important;
  background: #101418 !important;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18) !important;
}

body.workbench-open.process-open .process-canvas::before,
body.workbench-open.process-open .process-after-layer,
body.workbench-open.process-open .process-split-line,
body.workbench-open.process-open .process-before-tag,
body.workbench-open.process-open .process-after-tag {
  display: none !important;
}

body.workbench-open.process-open .process-canvas-safe {
  position: absolute !important;
  z-index: 7 !important;
  pointer-events: none !important;
  border: 1px dashed rgba(255, 255, 255, 0.66) !important;
  border-radius: 4px !important;
}

body.workbench-open.process-open .process-canvas-safe span {
  position: absolute !important;
  left: 8px !important;
  top: -20px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.workbench-open.process-open .process-canvas-safe-edge {
  inset: 7% 5% !important;
}

body.workbench-open.process-open .process-canvas-safe-action {
  inset: 12% 9% !important;
  border-color: rgba(18, 200, 216, 0.78) !important;
}

body.workbench-open.process-open .process-canvas-safe-action span {
  color: #36d8e7 !important;
}

body.workbench-open.process-open .process-stage-meta {
  grid-template-columns: auto auto auto auto minmax(0, 1fr) !important;
}

body.workbench-open.process-open .process-stage-meta::before {
  content: "画布编辑" !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.workbench-open.process-open .process-fixed-inspector {
  display: grid !important;
  grid-template-rows: auto auto min-content min-content min-content min-content auto auto auto !important;
  gap: 12px !important;
  overflow: hidden auto !important;
}

body.workbench-open.process-open .process-fixed-tabs {
  display: flex !important;
  gap: 20px !important;
  border-bottom: 1px solid #edf1f6 !important;
}

body.workbench-open.process-open .process-fixed-tabs span {
  position: relative !important;
  padding: 0 0 10px !important;
  color: #667085 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.workbench-open.process-open .process-fixed-tabs span.active {
  color: #ff5b18 !important;
}

body.workbench-open.process-open .process-fixed-tabs span.active::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #ff5b18 !important;
}

body.workbench-open.process-open .process-fixed-inspector .process-inspector-section {
  border-radius: 8px !important;
  box-shadow: none !important;
}

body.workbench-open.process-open .process-fixed-inspector .process-field-grid {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

body.workbench-open.process-open .process-fixed-inspector .process-field,
body.workbench-open.process-open .process-fixed-inspector .process-toggle {
  min-width: 0 !important;
}

body.workbench-open.process-open .process-fixed-summary {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 8px !important;
  background: #f6f8fb !important;
}

body.workbench-open.process-open .process-fixed-summary span {
  display: grid !important;
  gap: 2px !important;
  color: #7b8494 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body.workbench-open.process-open .process-fixed-summary b {
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body.workbench-open.process-open .process-inspector-run {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #05070c !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.workbench-open.process-open .process-timeline {
  display: grid !important;
  grid-template-rows: 30px 44px minmax(0, 1fr) !important;
  gap: 5px !important;
  min-height: var(--process-timeline-height, 300px) !important;
  padding: 8px 18px 10px !important;
  overflow: hidden !important;
}

body.workbench-open.process-open .process-timeline-head {
  min-height: 30px !important;
}

body.workbench-open.process-open .process-track {
  min-height: 42px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 2px !important;
}

body.workbench-open.process-open .process-track article {
  min-height: 40px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}

body.workbench-open.process-open .process-multitrack-editor {
  display: grid !important;
  grid-template-rows: 24px 16px minmax(0, 1fr) !important;
  gap: 4px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.workbench-open.process-open .process-edit-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
}

body.workbench-open.process-open .process-edit-toolbar button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 26px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #303846 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-edit-toolbar button:hover:not(:disabled) {
  background: #f3f5f8 !important;
  color: #ff5b18 !important;
}

body.workbench-open.process-open .process-time-ruler {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(86px, 1fr)) !important;
  padding-left: 132px !important;
  color: #8a94a6 !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

body.workbench-open.process-open .process-edit-lanes {
  position: relative !important;
  display: grid !important;
  grid-template-rows: repeat(4, minmax(24px, 1fr)) !important;
  gap: 3px !important;
  min-height: 0 !important;
  overflow: auto !important;
}

body.workbench-open.process-open .process-edit-playhead {
  position: absolute !important;
  z-index: 12 !important;
  top: -20px !important;
  bottom: 0 !important;
  left: calc(132px + 32%) !important;
  width: 1px !important;
  background: #111827 !important;
  pointer-events: none !important;
}

body.workbench-open.process-open .process-edit-playhead::before {
  content: "" !important;
  position: absolute !important;
  top: -5px !important;
  left: -4px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 2px !important;
  background: #111827 !important;
}

body.workbench-open.process-open .process-edit-lane {
  display: grid !important;
  grid-template-columns: 120px minmax(720px, 1fr) !important;
  gap: 12px !important;
  min-height: 24px !important;
}

body.workbench-open.process-open .process-lane-label {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) 16px !important;
  align-items: center !important;
  gap: 7px !important;
  color: #303846 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.workbench-open.process-open .process-lane-label span {
  display: grid !important;
  place-items: center !important;
  color: #667085 !important;
}

body.workbench-open.process-open .process-lane-label svg {
  width: 16px !important;
  height: 16px !important;
}

body.workbench-open.process-open .process-lane-label b {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-lane-label i {
  color: #98a2b3 !important;
}

body.workbench-open.process-open .process-lane-strip {
  position: relative !important;
  min-height: 24px !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  overflow: hidden !important;
}

body.workbench-open.process-open .process-timeline-clip {
  position: absolute !important;
  inset-block: 1px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  overflow: hidden !important;
}

body.workbench-open.process-open .process-video-clip {
  left: 0 !important;
  right: 8% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  padding: 0 8px !important;
  background: #15181d !important;
  color: #ffffff !important;
}

body.workbench-open.process-open .process-video-thumbs {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  opacity: 0.66 !important;
}

body.workbench-open.process-open .process-video-thumbs i {
  min-width: 0 !important;
  overflow: hidden !important;
}

body.workbench-open.process-open .process-video-thumbs img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body.workbench-open.process-open .process-video-clip strong,
body.workbench-open.process-open .process-video-clip small {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

body.workbench-open.process-open .process-subtitle-clip {
  left: var(--clip-start) !important;
  width: var(--clip-width) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 10px !important;
  border-color: #ffd8bd !important;
  background: #fff0e5 !important;
  color: #8a3a12 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-bgm-clip {
  left: 0 !important;
  right: 16% !important;
  display: grid !important;
  grid-template-columns: auto minmax(100px, 180px) minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 9px !important;
  border-color: #9bdac9 !important;
  background: #dff7ef !important;
  color: #167a5a !important;
}

body.workbench-open.process-open .process-bgm-clip strong,
body.workbench-open.process-open .process-bgm-clip small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-waveform {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  height: 22px !important;
}

body.workbench-open.process-open .process-waveform i {
  width: 2px !important;
  height: var(--h) !important;
  border-radius: 999px !important;
  background: rgba(22, 122, 90, 0.42) !important;
}

body.workbench-open.process-open .clip-handle {
  width: 7px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(22, 122, 90, 0.28) !important;
}

body.workbench-open.process-open .process-material-thumb-clip {
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 24px !important;
  margin: 2px 7px 2px 0 !important;
  border: 1px solid #d6dee9 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

body.workbench-open.process-open .process-material-thumb-clip img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body.workbench-open.process-open .process-material-thumb-clip span {
  color: #667085 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

body.workbench-open.process-open .process-lane-empty {
  display: grid !important;
  place-items: center !important;
  min-height: 24px !important;
  color: #98a2b3 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.workbench-open.process-open .process-lane-empty.action {
  width: 100% !important;
  border: 1px dashed #c9d3e1 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
}

@media (max-width: 1180px) {
  body.workbench-open.process-open .process-editor {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.workbench-open.process-open .process-material-panel.process-module-shell,
  body.workbench-open.process-open .process-editor-toolbar,
  body.workbench-open.process-open .process-stage,
  body.workbench-open.process-open .process-inspector,
  body.workbench-open.process-open .process-timeline {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: auto !important;
  }

  body.workbench-open.process-open .process-material-panel.process-module-shell,
  body.workbench-open.process-open .process-inspector,
  body.workbench-open.process-open .process-timeline {
    max-height: none !important;
    overflow: visible !important;
  }

  body.workbench-open.process-open .process-material-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 360px !important;
  }

  body.workbench-open.process-open .process-canvas {
    aspect-ratio: var(--process-canvas-ratio, 16 / 9) !important;
  }

  body.workbench-open.process-open .process-timeline {
    overflow-x: auto !important;
  }

  body.workbench-open.process-open .process-time-ruler,
  body.workbench-open.process-open .process-edit-lanes,
  body.workbench-open.process-open .process-track {
    min-width: 880px !important;
  }
}

/* Final workflow sidebar guard: batch tools and task records use the shared narrow rail. */
body.workbench-open.batch-tools-open .app-shell,
body.workbench-open.task-records-open .app-shell {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  grid-template-areas: "sidebar main" !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f5f7fb !important;
}

body.workbench-open.batch-tools-open.sidebar-hidden .app-shell,
body.workbench-open.task-records-open.sidebar-hidden .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "main" !important;
}

body.workbench-open.batch-tools-open .sidebar,
body.workbench-open.task-records-open .sidebar {
  grid-area: sidebar !important;
  position: sticky !important;
  z-index: 30 !important;
  top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 18px 8px 14px !important;
  overflow: hidden !important;
  color: #4b5563 !important;
  background: #fff !important;
  border: 0 !important;
  border-right: 1px solid #e7ebf2 !important;
  border-radius: 0 !important;
  box-shadow: 10px 0 24px rgba(17, 24, 39, 0.035) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.workbench-open.batch-tools-open.sidebar-hidden .sidebar,
body.workbench-open.task-records-open.sidebar-hidden .sidebar {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
}

body.workbench-open.batch-tools-open .brand-card,
body.workbench-open.batch-tools-open .brand-mark,
body.workbench-open.batch-tools-open .traffic,
body.workbench-open.batch-tools-open .nav-label,
body.workbench-open.batch-tools-open .sidebar-controls,
body.workbench-open.batch-tools-open .sidebar-storage,
body.workbench-open.batch-tools-open .sidebar-version,
body.workbench-open.batch-tools-open .sidebar-home,
body.workbench-open.task-records-open .brand-card,
body.workbench-open.task-records-open .brand-mark,
body.workbench-open.task-records-open .traffic,
body.workbench-open.task-records-open .nav-label,
body.workbench-open.task-records-open .sidebar-controls,
body.workbench-open.task-records-open .sidebar-storage,
body.workbench-open.task-records-open .sidebar-version,
body.workbench-open.task-records-open .sidebar-home {
  display: none !important;
}

body.workbench-open.batch-tools-open .sidebar-hide-topbar,
body.workbench-open.task-records-open .sidebar-hide-topbar {
  display: none !important;
}

body.workbench-open.batch-tools-open .sidebar-hide-rail,
body.workbench-open.task-records-open .sidebar-hide-rail {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 auto 8px !important;
  padding: 0 !important;
  color: #4b5563 !important;
  background: #fff !important;
  border: 1px solid #e0e5ee !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.045) !important;
  cursor: pointer !important;
}

body.workbench-open.batch-tools-open.sidebar-hidden .sidebar-hide-rail,
body.workbench-open.task-records-open.sidebar-hidden .sidebar-hide-rail {
  display: none !important;
}

body.workbench-open.batch-tools-open .side-nav,
body.workbench-open.task-records-open .side-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  overflow: visible !important;
}

body.workbench-open.batch-tools-open .side-nav button,
body.workbench-open.task-records-open .side-nav button {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 24px auto !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 62px !important;
  min-height: 62px !important;
  padding: 7px 0 6px !important;
  color: #4b5563 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  white-space: normal !important;
}

body.workbench-open.batch-tools-open .side-nav button.active,
body.workbench-open.task-records-open .side-nav button.active {
  color: #ff4f0a !important;
  background: #fff3ed !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.workbench-open.batch-tools-open .side-nav button::before,
body.workbench-open.batch-tools-open .side-nav button::after,
body.workbench-open.task-records-open .side-nav button::before,
body.workbench-open.task-records-open .side-nav button::after {
  display: none !important;
  content: none !important;
}

body.workbench-open.batch-tools-open .side-nav button .nav-symbol,
body.workbench-open.batch-tools-open .side-nav button .svg-icon,
body.workbench-open.batch-tools-open .side-nav button .svg-icon svg,
body.workbench-open.task-records-open .side-nav button .nav-symbol,
body.workbench-open.task-records-open .side-nav button .svg-icon,
body.workbench-open.task-records-open .side-nav button .svg-icon svg {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: currentColor !important;
  stroke-width: 2 !important;
}

body.workbench-open.batch-tools-open .side-nav button span:not(.nav-symbol):not(.svg-icon),
body.workbench-open.task-records-open .side-nav button span:not(.nav-symbol):not(.svg-icon) {
  display: block !important;
  width: 58px !important;
  max-width: 58px !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: currentColor !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  opacity: 1 !important;
}

body.workbench-open.batch-tools-open .main,
body.workbench-open.task-records-open .main {
  grid-area: main !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
}

body.workbench-open.batch-tools-open .main {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.workbench-open.batch-tools-open .view {
  align-self: stretch !important;
  height: calc(100dvh - 88px) !important;
  max-height: calc(100dvh - 88px) !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.workbench-open.batch-tools-open .batch-dedup-prototype {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(520px, 1fr) minmax(360px, 420px);
  gap: 14px;
  align-items: stretch;
  min-height: 640px;
}

body.workbench-open.batch-tools-open .batch-dedup-assets,
body.workbench-open.batch-tools-open .batch-dedup-stage,
body.workbench-open.batch-tools-open .batch-dedup-params {
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
}

body.workbench-open.batch-tools-open .batch-dedup-assets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
}

body.workbench-open.batch-tools-open .batch-dedup-panel-head,
body.workbench-open.batch-tools-open .batch-dedup-stage-head,
body.workbench-open.batch-tools-open .batch-layer-inspector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.workbench-open.batch-tools-open .batch-dedup-panel-head h3,
body.workbench-open.batch-tools-open .batch-dedup-stage-head h3,
body.workbench-open.batch-tools-open .batch-layer-inspector-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.2;
}

body.workbench-open.batch-tools-open .batch-dedup-panel-head span,
body.workbench-open.batch-tools-open .batch-dedup-stage-head span,
body.workbench-open.batch-tools-open .batch-layer-inspector-head span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

body.workbench-open.batch-tools-open .batch-dedup-panel-head button,
body.workbench-open.batch-tools-open .batch-layer-inspector-head button,
body.workbench-open.batch-tools-open .batch-dedup-stage-actions button,
body.workbench-open.batch-tools-open .batch-dedup-upload-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

body.workbench-open.batch-tools-open .batch-dedup-panel-head button:hover,
body.workbench-open.batch-tools-open .batch-layer-inspector-head button:hover,
body.workbench-open.batch-tools-open .batch-dedup-stage-actions button:hover,
body.workbench-open.batch-tools-open .batch-dedup-upload-row button:hover {
  background: #fff;
  border-color: #fb923c;
  transform: translateY(-1px);
}

body.workbench-open.batch-tools-open .batch-dedup-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.workbench-open.batch-tools-open .batch-dedup-tabs button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  text-align: left;
}

body.workbench-open.batch-tools-open .batch-dedup-tabs button.active {
  color: #ea580c;
  background: #fff7ed;
  border-color: #fed7aa;
}

body.workbench-open.batch-tools-open .batch-dedup-tabs b,
body.workbench-open.batch-tools-open .batch-dedup-tabs span {
  min-width: 0;
  font-size: 12px;
  font-weight: 850;
}

body.workbench-open.batch-tools-open .batch-dedup-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 11px;
  color: #94a3b8;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
}

body.workbench-open.batch-tools-open .batch-dedup-search input {
  width: 100%;
  min-width: 0;
  color: #0f172a;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 13px;
}

body.workbench-open.batch-tools-open .batch-dedup-upload-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.workbench-open.batch-tools-open .batch-dedup-asset-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

body.workbench-open.batch-tools-open .batch-dedup-asset-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

body.workbench-open.batch-tools-open .batch-dedup-asset-card:hover,
body.workbench-open.batch-tools-open .batch-dedup-asset-card.active {
  background: #fff;
  border-color: #38bdf8;
  transform: translateY(-1px);
}

body.workbench-open.batch-tools-open .batch-dedup-asset-card.selected {
  border-color: #fb923c;
}

body.workbench-open.batch-tools-open .batch-dedup-asset-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.workbench-open.batch-tools-open .batch-dedup-asset-thumb,
body.workbench-open.batch-tools-open .batch-dedup-asset-thumb .module-thumb {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 7px;
  overflow: hidden;
}

body.workbench-open.batch-tools-open .batch-dedup-asset-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.workbench-open.batch-tools-open .batch-dedup-asset-copy b,
body.workbench-open.batch-tools-open .batch-dedup-asset-copy small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.workbench-open.batch-tools-open .batch-dedup-asset-copy b {
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
}

body.workbench-open.batch-tools-open .batch-dedup-asset-copy small,
body.workbench-open.batch-tools-open .batch-dedup-asset-card i {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

body.workbench-open.batch-tools-open .batch-dedup-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 168px;
  padding: 18px;
  color: #64748b;
  background: repeating-linear-gradient(135deg, #f8fafc 0, #f8fafc 12px, #f1f5f9 12px, #f1f5f9 24px);
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}

body.workbench-open.batch-tools-open .batch-dedup-empty strong {
  color: #0f172a;
  font-size: 14px;
}

body.workbench-open.batch-tools-open .batch-dedup-asset-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

body.workbench-open.batch-tools-open .batch-dedup-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
}

body.workbench-open.batch-tools-open .batch-dedup-stage-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body.workbench-open.batch-tools-open .batch-dedup-stage-actions button.active {
  color: #0f766e;
  background: #ecfdf5;
  border-color: #99f6e4;
}

body.workbench-open.batch-tools-open .batch-dedup-canvas-shell {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  min-height: 470px;
  padding: 18px;
  overflow: hidden;
  background: #edf2f7;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
}

body.workbench-open.batch-tools-open .batch-dedup-canvas {
  position: relative;
  width: min(100%, 760px);
  height: auto;
  aspect-ratio: var(--batch-dedup-aspect-ratio, 16 / 9);
  min-height: 0;
  max-height: 560px;
  overflow: visible;
  background: #111827;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.18);
}

body.workbench-open.batch-tools-open .batch-dedup-canvas.has-video {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  cursor: pointer;
}

body.workbench-open.batch-tools-open .batch-dedup-canvas .mask-base-media,
body.workbench-open.batch-tools-open .batch-dedup-canvas .mask-base-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #111827;
  border-radius: 4px;
}

body.workbench-open.batch-tools-open .batch-dedup-canvas.has-video .mask-base-media {
  object-fit: cover;
}

body.workbench-open.batch-tools-open .batch-dedup-canvas.has-video .batch-dedup-base-video {
  background: #111827;
}

body.workbench-open.batch-tools-open .batch-dedup-canvas .mask-base-placeholder {
  background: linear-gradient(135deg, #1f2937, #334155);
}

body.workbench-open.batch-tools-open .batch-dedup-canvas .mask-canvas-layer {
  cursor: grab;
}

body.workbench-open.batch-tools-open .batch-dedup-canvas .mask-canvas-layer:active {
  cursor: grabbing;
}

body.workbench-open.batch-tools-open .batch-dedup-canvas-empty {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 28px;
  color: #e2e8f0;
  text-align: center;
  background: rgba(15, 23, 42, 0.52);
}

body.workbench-open.batch-tools-open .batch-dedup-stage-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 9px 10px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
}

body.workbench-open.batch-tools-open .batch-dedup-params {
  align-self: start;
  min-width: 0;
  max-height: min(720px, calc(100dvh - 170px));
  overflow: hidden auto;
}

body.workbench-open.batch-tools-open .batch-dedup-params,
body.workbench-open.batch-tools-open .batch-dedup-params * {
  min-width: 0;
}

body.workbench-open.batch-tools-open .batch-dedup-params .process-choice-group,
body.workbench-open.batch-tools-open .batch-dedup-params .process-choice-group.two,
body.workbench-open.batch-tools-open .batch-dedup-params .process-field-grid,
body.workbench-open.batch-tools-open .batch-dedup-params .process-field-grid.two,
body.workbench-open.batch-tools-open .batch-dedup-params .batch-operation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.workbench-open.batch-tools-open .batch-dedup-params .process-choice,
body.workbench-open.batch-tools-open .batch-dedup-params .batch-operation-grid label,
body.workbench-open.batch-tools-open .batch-dedup-params .process-output-card span {
  overflow: hidden;
}

body.workbench-open.batch-tools-open .batch-dedup-params .process-choice strong,
body.workbench-open.batch-tools-open .batch-dedup-params .process-choice span,
body.workbench-open.batch-tools-open .batch-dedup-params .batch-operation-grid label span,
body.workbench-open.batch-tools-open .batch-dedup-params .process-output-card b {
  overflow-wrap: anywhere;
}

body.workbench-open.batch-tools-open .batch-dedup-params .process-field,
body.workbench-open.batch-tools-open .batch-dedup-params .process-range-field {
  grid-template-columns: minmax(72px, 0.7fr) minmax(0, 1fr) auto !important;
}

body.workbench-open.batch-tools-open .batch-layer-inspector {
  margin: 0 0 12px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

body.workbench-open.batch-tools-open .batch-layer-inspector .mask-param-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0;
}

body.workbench-open.batch-tools-open .batch-layer-inspector .mask-param-tabs button {
  min-height: 30px;
  color: #475569;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

body.workbench-open.batch-tools-open .batch-layer-inspector .mask-param-tabs button.active {
  color: #ea580c;
  background: #fff7ed;
  border-color: #fed7aa;
}

body.workbench-open.batch-tools-open .batch-layer-inspector .mask-param-group {
  display: grid;
  gap: 8px;
}

body.workbench-open.batch-tools-open .batch-layer-inspector .mask-param-row {
  display: grid;
  grid-template-columns: minmax(86px, 0.7fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 34px;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
}

body.workbench-open.batch-tools-open .batch-layer-inspector input,
body.workbench-open.batch-tools-open .batch-layer-inspector select {
  min-width: 0;
  border: 1px solid #dbe3ee;
  border-radius: 6px;
}

body.workbench-open.batch-tools-open .batch-layer-empty {
  display: grid;
  gap: 6px;
  padding: 18px;
  color: #64748b;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 7px;
}

body.workbench-open.batch-tools-open .batch-layer-empty strong {
  color: #0f172a;
}

@media (max-width: 1320px) {
  body.workbench-open.batch-tools-open .batch-dedup-prototype {
    grid-template-columns: minmax(230px, 0.75fr) minmax(360px, 1fr);
  }

  body.workbench-open.batch-tools-open .batch-dedup-stage {
    min-height: 610px;
  }

  body.workbench-open.batch-tools-open .batch-dedup-canvas-shell {
    flex: 0 0 auto;
    height: 470px;
    min-height: 0;
  }

  body.workbench-open.batch-tools-open .batch-dedup-params {
    grid-column: 1 / -1;
    max-height: none;
  }
}

@media (max-width: 1180px) {
  body.workbench-open.batch-tools-open .batch-dedup-prototype {
    grid-template-columns: 1fr;
  }

  body.workbench-open.batch-tools-open .batch-dedup-stage {
    min-height: 600px;
  }

  body.workbench-open.batch-tools-open .batch-dedup-canvas-shell {
    height: 460px;
    min-height: 0;
  }

  body.workbench-open.batch-tools-open .batch-dedup-canvas.has-video {
    min-height: 0;
  }
}

@media (max-width: 900px) {
  body.workbench-open.batch-tools-open .batch-dedup-prototype {
    grid-template-columns: 1fr;
  }

  body.workbench-open.batch-tools-open .batch-dedup-stage {
    min-height: 560px;
  }

  body.workbench-open.batch-tools-open .batch-dedup-canvas-shell {
    height: 420px;
    min-height: 0;
  }
}

@media (max-width: 760px) {
  body.workbench-open.batch-tools-open .batch-dedup-params .process-choice-group,
  body.workbench-open.batch-tools-open .batch-dedup-params .process-choice-group.two,
  body.workbench-open.batch-tools-open .batch-dedup-params .process-field-grid,
  body.workbench-open.batch-tools-open .batch-dedup-params .process-field-grid.two,
  body.workbench-open.batch-tools-open .batch-dedup-params .batch-operation-grid,
  body.workbench-open.batch-tools-open .batch-param-stats,
  body.workbench-open.batch-tools-open .batch-dedup-upload-row,
  body.workbench-open.batch-tools-open .batch-config-actions {
    grid-template-columns: 1fr !important;
  }

  body.workbench-open.batch-tools-open .batch-dedup-params .process-field,
  body.workbench-open.batch-tools-open .batch-dedup-params .process-range-field {
    grid-template-columns: 1fr !important;
  }
}

/* FlexClip-style context toolbar for selected video-production layers. */
body.workbench-open.process-open .process-editor {
  grid-template-rows: 106px minmax(0, 1fr) var(--process-timeline-height, 300px) !important;
}

body.workbench-open.process-open .process-editor-toolbar {
  grid-template-rows: 40px 42px !important;
  align-items: stretch !important;
  gap: 8px 12px !important;
  min-height: 106px !important;
  padding-block: 10px !important;
}

body.workbench-open.process-open .process-layer-toolbar {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 5px 8px !important;
  border: 1px solid #e3e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.workbench-open.process-open .process-layer-toolbar.empty {
  background: #fbfcfe !important;
}

body.workbench-open.process-open .process-layer-toolbar.empty button,
body.workbench-open.process-open .process-layer-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid #e3e8f0 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #303846 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-layer-toolbar.empty button:hover,
body.workbench-open.process-open .process-layer-actions button:hover {
  border-color: #ffb08a !important;
  background: #fff4ed !important;
  color: #f04f13 !important;
}

body.workbench-open.process-open .process-layer-toolbar.empty span {
  flex: 0 0 auto !important;
  padding: 0 8px !important;
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.workbench-open.process-open .process-layer-chip {
  display: grid !important;
  grid-template-columns: auto minmax(72px, 150px) !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 150px !important;
  max-width: 260px !important;
  padding: 0 9px !important;
  border-right: 1px solid #edf1f6 !important;
}

body.workbench-open.process-open .process-layer-chip b {
  color: #ff5b18 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-layer-chip small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #303846 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.workbench-open.process-open .process-layer-text-input {
  flex: 0 0 190px !important;
  height: 30px !important;
  min-width: 120px !important;
  padding: 0 10px !important;
  border: 1px solid #dfe5ee !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.workbench-open.process-open .process-layer-field {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: auto minmax(56px, 92px) auto !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  color: #667085 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-layer-field.compact {
  grid-template-columns: auto minmax(64px, 96px) !important;
}

body.workbench-open.process-open .process-layer-field.color {
  grid-template-columns: auto 34px !important;
}

body.workbench-open.process-open .process-layer-field input,
body.workbench-open.process-open .process-layer-field select {
  min-width: 0 !important;
  height: 30px !important;
  border: 1px solid #dfe5ee !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.workbench-open.process-open .process-layer-field input[type="number"] {
  width: 76px !important;
  padding: 0 6px !important;
}

body.workbench-open.process-open .process-layer-field input[type="color"] {
  width: 34px !important;
  padding: 3px !important;
}

body.workbench-open.process-open .process-layer-range input[type="range"] {
  width: 96px !important;
  accent-color: #ff5b18 !important;
}

body.workbench-open.process-open .process-layer-range b {
  min-width: 34px !important;
  color: #303846 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

body.workbench-open.process-open .process-layer-check {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #303846 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.workbench-open.process-open .process-layer-check input {
  accent-color: #ff5b18 !important;
}

body.workbench-open.process-open .process-layer-actions {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-left: auto !important;
}

body.workbench-open.batch-tools-open .batch-preview-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-height: calc(100dvh - 148px);
}

body.workbench-open.batch-tools-open .batch-preview-head-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

body.workbench-open.batch-tools-open .batch-preview-head-card h3,
body.workbench-open.batch-tools-open .batch-preview-queue-card h3,
body.workbench-open.batch-tools-open .batch-preview-log-card h3 {
  margin: 0;
  color: #172033;
  font-size: 15px;
}

body.workbench-open.batch-tools-open .batch-preview-head-card span {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px;
}

body.workbench-open.batch-tools-open .batch-preview-head-actions,
body.workbench-open.batch-tools-open .batch-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.workbench-open.batch-tools-open .batch-preview-head-actions button,
body.workbench-open.batch-tools-open .batch-primary-actions button {
  min-height: 38px;
}

body.workbench-open.batch-tools-open .batch-preview-table-card {
  min-height: 0;
  overflow: hidden;
}

body.workbench-open.batch-tools-open .batch-unified-preview-table {
  height: 100%;
}

body.workbench-open.batch-tools-open .batch-md5-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  border-radius: 999px;
  padding: 4px 9px;
  background: #eef6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}

body.workbench-open.batch-tools-open .batch-preview-bottom {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(420px, 1.2fr);
  gap: 12px;
  min-height: 230px;
}

body.workbench-open.batch-tools-open .batch-preview-queue-card,
body.workbench-open.batch-tools-open .batch-preview-log-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px;
}

body.workbench-open.batch-tools-open .batch-preview-job {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 76px 44px;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid #e5eaf2;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  color: #253044;
  text-align: left;
}

body.workbench-open.batch-tools-open .batch-preview-job.active {
  border-color: #ff6a3d;
  box-shadow: 0 0 0 2px rgba(255, 106, 61, 0.12);
}

body.workbench-open.batch-tools-open .batch-preview-job span {
  color: #ff6a3d;
  font-size: 12px;
  font-weight: 800;
}

body.workbench-open.batch-tools-open .batch-preview-job strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

body.workbench-open.batch-tools-open .batch-preview-job progress {
  width: 100%;
  height: 8px;
}

body.workbench-open.batch-tools-open .batch-preview-job b {
  color: #64748b;
  font-size: 12px;
  text-align: right;
}

body.workbench-open.batch-tools-open .batch-preview-job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}

body.workbench-open.batch-tools-open .batch-preview-job-download {
  min-width: 86px;
  border: 1px solid #ffb48f;
  border-radius: 8px;
  background: #fff7f2;
  color: #f04f13;
  font-size: 12px;
  font-weight: 900;
}

body.workbench-open.batch-tools-open .batch-preview-job-download:hover {
  border-color: #ff6a3d;
  background: #fff0e6;
}

body.workbench-open.batch-tools-open .batch-preview-queue-empty,
body.workbench-open.batch-tools-open .batch-preview-log-empty,
body.workbench-open.batch-tools-open .batch-preview-empty {
  display: grid;
  min-height: 140px;
  place-items: center;
  color: #7b8494;
  font-size: 13px;
}

body.workbench-open.batch-tools-open .batch-preview-log-card {
  overflow: hidden;
}

body.workbench-open.batch-tools-open .batch-preview-log-card > h3 {
  flex: 0 0 auto;
}

body.workbench-open.batch-tools-open .batch-preview-log-row {
  border: 1px solid #e5eaf2;
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px 12px;
}

body.workbench-open.batch-tools-open .batch-preview-log-row header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #172033;
  font-size: 13px;
}

body.workbench-open.batch-tools-open .batch-preview-log-row header b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.workbench-open.batch-tools-open .batch-preview-log-row header span {
  flex: 0 0 auto;
  color: #8a94a6;
  font-size: 12px;
}

body.workbench-open.batch-tools-open .batch-preview-log-row p {
  margin: 7px 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

body.workbench-open.batch-tools-open .batch-preview-log-row dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

body.workbench-open.batch-tools-open .batch-preview-log-row div {
  min-width: 0;
  border-radius: 6px;
  background: #fff;
  padding: 8px;
}

body.workbench-open.batch-tools-open .batch-preview-log-row dt {
  color: #8a94a6;
  font-size: 11px;
}

body.workbench-open.batch-tools-open .batch-preview-log-row dd {
  margin: 3px 0 0;
  overflow: hidden;
  color: #253044;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  body.workbench-open.batch-tools-open .batch-preview-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.workbench-open.batch-tools-open .batch-preview-head-card,
  body.workbench-open.batch-tools-open .batch-preview-bottom,
  body.workbench-open.batch-tools-open .batch-preview-log-row dl {
    grid-template-columns: 1fr;
  }

  body.workbench-open.batch-tools-open .batch-preview-head-card {
    display: grid;
  }

  body.workbench-open.batch-tools-open .batch-preview-head-actions,
  body.workbench-open.batch-tools-open .batch-primary-actions,
  body.workbench-open.batch-tools-open .batch-preview-job {
    grid-template-columns: 1fr;
  }
}

body.batch-pane-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}

body.batch-pane-resizing * {
  cursor: col-resize !important;
}

.batch-pane-resizer {
  position: relative;
  display: block;
  align-self: stretch;
  width: 10px;
  min-width: 10px;
  min-height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: col-resize;
}

.batch-pane-resizer::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 2px;
  border-radius: 999px;
  background: #d9e2ef;
  transform: translateX(-50%);
  transition: width 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.batch-pane-resizer:hover::before,
.batch-pane-resizer:focus-visible::before {
  width: 4px;
  background: #ff7a3d;
  box-shadow: 0 0 0 4px rgba(255, 122, 61, 0.12);
}

.batch-pane-resizer:focus-visible {
  outline: none;
}

body.workbench-open.batch-tools-open [data-batch-pane] {
  min-width: 0;
}

body.workbench-open.batch-tools-open .batch-rename-workbench[data-batch-layout="rename-main"] {
  grid-template-columns: minmax(420px, var(--batch-pane-main, 78fr)) 10px minmax(260px, var(--batch-pane-params, 22fr));
}

body.workbench-open.batch-tools-open .batch-preview-workbench[data-batch-layout="preview-main"],
body.workbench-open.batch-tools-open .frame-audio-workbench[data-batch-layout="frames-main"] {
  display: grid;
  grid-template-columns: minmax(0, var(--batch-pane-preview, 78fr)) 10px minmax(280px, var(--batch-pane-params, 22fr));
  gap: 0;
  min-width: 0;
  min-height: 0;
}

body.workbench-open.batch-tools-open .batch-dedup-prototype[data-batch-layout="dedup-main"] {
  grid-template-columns: minmax(56px, var(--batch-pane-assets, 20fr)) 10px minmax(420px, var(--batch-pane-stage, 57fr)) 10px minmax(300px, var(--batch-pane-params, 23fr));
  gap: 0;
}

body.workbench-open.batch-tools-open .batch-dedup-prototype.assets-collapsed[data-batch-layout="dedup-main"] {
  grid-template-columns: 56px minmax(420px, 1fr) 10px minmax(300px, var(--batch-pane-params, 23fr));
}

body.workbench-open.batch-tools-open .batch-dedup-prototype.assets-collapsed [data-batch-pane-resize="assets:stage"] {
  display: none;
}

body.workbench-open.batch-tools-open .batch-process-bottom[data-batch-layout="dedup-bottom"],
body.workbench-open.batch-tools-open .frame-audio-bottom[data-batch-layout="frames-bottom"] {
  grid-template-columns: minmax(0, var(--batch-pane-main, 78fr)) 10px minmax(240px, var(--batch-pane-queue, 22fr));
  gap: 0;
}

body.workbench-open.batch-tools-open .batch-preview-bottom[data-batch-layout="preview-bottom"] {
  grid-template-columns: minmax(220px, var(--batch-pane-summary, 28fr)) 10px minmax(260px, var(--batch-pane-queue, 34fr)) 10px minmax(300px, var(--batch-pane-log, 38fr));
  gap: 0;
}

body.workbench-open.batch-tools-open .batch-rename-workbench[data-batch-layout],
body.workbench-open.batch-tools-open .batch-process-bottom[data-batch-layout],
body.workbench-open.batch-tools-open .frame-audio-bottom[data-batch-layout],
body.workbench-open.batch-tools-open .batch-preview-bottom[data-batch-layout] {
  gap: 0;
}

body.workbench-open.batch-tools-open .batch-preview-workbench {
  min-height: 0;
}

body.workbench-open.batch-tools-open .batch-preview-params {
  align-self: start;
  display: grid;
  align-content: start;
  gap: 12px;
  max-height: min(720px, calc(100dvh - 170px));
  overflow: hidden auto;
  padding: 14px;
}

body.workbench-open.batch-tools-open .batch-preview-summary-card,
body.workbench-open.batch-tools-open .batch-process-queue-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}

body.workbench-open.batch-tools-open .batch-preview-summary-card h3 {
  margin: 0;
  color: #172033;
  font-size: 15px;
}

body.workbench-open.batch-tools-open .batch-preview-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.workbench-open.batch-tools-open .batch-preview-summary-grid span {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid #edf1f6;
  border-radius: 7px;
  background: #fbfdff;
}

body.workbench-open.batch-tools-open .batch-preview-summary-grid b {
  color: #111827;
  font-size: 18px;
}

body.workbench-open.batch-tools-open .batch-preview-summary-grid small,
body.workbench-open.batch-tools-open .batch-process-queue-empty {
  color: #667085;
  font-size: 12px;
}

body.workbench-open.batch-tools-open .batch-dedup-panel-actions {
  display: inline-flex;
  gap: 6px;
}

body.workbench-open.batch-tools-open .batch-dedup-assets.is-collapsed {
  display: grid;
  place-items: stretch;
  width: 56px;
  min-width: 56px;
  padding: 8px;
  overflow: hidden;
}

body.workbench-open.batch-tools-open .batch-assets-collapsed-toggle {
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr) 24px;
  place-items: center;
  gap: 8px;
  width: 100%;
  min-height: 220px;
  padding: 8px 4px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fff;
  color: #344054;
}

body.workbench-open.batch-tools-open .batch-assets-collapsed-toggle:hover,
body.workbench-open.batch-tools-open .batch-assets-collapsed-toggle:focus-visible {
  border-color: #ff8a4c;
  color: #ff5a1f;
  background: #fff8f3;
  outline: none;
}

body.workbench-open.batch-tools-open .batch-assets-collapsed-toggle b {
  writing-mode: vertical-rl;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 950;
}

body.workbench-open.batch-tools-open .batch-assets-collapsed-toggle i {
  font-style: normal;
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 1180px) {
  body.workbench-open.batch-tools-open [data-batch-layout] {
    grid-template-columns: 1fr !important;
  }

  body.workbench-open.batch-tools-open .batch-pane-resizer {
    display: none !important;
  }

  body.workbench-open.batch-tools-open .batch-preview-params,
  body.workbench-open.batch-tools-open .batch-dedup-params {
    position: static;
    max-height: none;
  }

  body.workbench-open.batch-tools-open .batch-dedup-assets.is-collapsed {
    width: auto;
    min-width: 0;
  }

  body.workbench-open.batch-tools-open .batch-assets-collapsed-toggle {
    grid-template-rows: 1fr;
    grid-template-columns: 28px minmax(0, 1fr) 24px;
    min-height: 52px;
  }

  body.workbench-open.batch-tools-open .batch-assets-collapsed-toggle b {
    writing-mode: horizontal-tb;
  }
}