.intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 24px 0 18px;
  padding: 27px 30px;
  border: 1px solid #76dbc626;
  border-radius: 20px;
  background: radial-gradient(ellipse at 12% 0%, #27776642, transparent 66%),
    radial-gradient(ellipse at 92% 120%, #65568932, transparent 64%),
    linear-gradient(115deg, #112726, #111921 58%, #171b2a);
  box-shadow: inset 0 1px 0 #d1fff908, 0 18px 55px #00000022;
}
.intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(120deg, transparent 0 76px, #a6f8e703 77px 78px);
  mask-image: linear-gradient(90deg, transparent 26%, #000);
}
.intro::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 1px;
  background: linear-gradient(90deg, #8ae3c580, #7ddbd72b 38%, transparent 80%);
  pointer-events: none;
}
.intro .eyebrow { color: #a2c5bf; font-size: 10px; letter-spacing: 2.3px; }
.intro .drop-compact {
  background: linear-gradient(135deg, #6bd6b310, #90b6df07);
  border: 1px solid #90d2c235;
  box-shadow: inset 0 1px 0 #defff60a;
  flex-shrink: 0;
}
.intro .drop-compact:hover {
  background: #77dbbd15;
  border-color: #96ead570;
  box-shadow: 0 6px 22px #070f162e, inset 0 1px 0 #defff614;
}
h1 .demo-badge {
  display: inline-block;
  padding: 1px 13px 5px;
  border: 1px solid #a3ffe144;
  border-radius: 12px;
  color: #b0ffe1;
  background: linear-gradient(135deg, #237d6352, #487e9233);
  box-shadow: inset 0 1px 0 #d5fff81c;
  letter-spacing: -1.2px;
}
.batch-panel {
  margin-bottom: 18px;
  background: linear-gradient(115deg, #102024c9, #131a25eb 70%, #1b1d2ab8);
  border: 1px solid #8cb5c325;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 #d7fff805, 0 8px 24px #00000012;
}
.batch-tray-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 11px 18px;
  border-radius: 13px;
  cursor: pointer;
  list-style: none;
  color: #d7eae7;
  transition: background 160ms ease;
}
.batch-tray-summary::-webkit-details-marker { display: none; }
.batch-tray-summary::marker { content: ""; }
.batch-tray-summary:hover { background: #9ddedb05; }
.batch-tray-summary:focus-visible {
  outline: 2px solid #8fe6cf;
  outline-offset: 3px;
}
.batch-tray-summary strong { font-size: 13px; font-weight: 550; letter-spacing: .15px; white-space: nowrap; }
.batch-tray-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  color: #9ae8cf;
  border: 1px solid #83debf21;
  border-radius: 9px;
  background: linear-gradient(135deg, #78d4b918, #5d7ca507);
}
.batch-tray-icon svg { width: 17px; height: 17px; }
.batch-tray-caption { color: #92aab3; font-size: 12px; }
.batch-tray-status {
  margin-left: auto;
  padding: 4px 9px;
  border: 1px solid #a2b7d01c;
  border-radius: 999px;
  background: #91b5c505;
  color: #a9bfc6;
  font-size: 10px;
  line-height: 1.4;
  text-align: right;
}
.batch-tray-status:empty { display: none; }
.batch-tray-chevron { width: 16px; height: 16px; flex: 0 0 auto; color: #91bfb7; transition: transform 180ms ease; }
.batch-panel[open] > .batch-tray-summary { border-bottom: 1px solid #9cc3ce16; border-radius: 13px 13px 0 0; }
.batch-panel[open] .batch-tray-chevron { transform: rotate(180deg); }
.batch-tray-content { padding: 18px 20px 20px; }
.batch-toolbar,.batch-settings,.batch-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.batch-switch { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: #deeee9; cursor: pointer; }
.batch-switch input { accent-color: #75ddbb; width: 17px; height: 17px; }
.batch-hint,.cpu-summary,.batch-note { color: #9caebb; font-size: 12px; line-height: 1.6; }
.cpu-summary { margin-left: auto; }
.batch-settings { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 16px; }
.batch-settings[hidden],#batchResults[hidden] { display: none; }
.batch-settings>label:not(.batch-switch) { display: flex; align-items: center; gap: 9px; color: #b6c7cf; font-size: 12px; }
.batch-settings input[type=number] { width: 70px; }
.batch-settings select,.batch-settings input[type=number],.batch-panel button { background: #192a33; color: #d4f3e9; border: 1px solid #38535e; border-radius: 8px; padding: 8px 10px; }
.batch-panel button { cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.batch-panel button:hover:not(:disabled) { border-color: #8be3c966; background: #233d44; }
.batch-panel :is(button, input, select, a):focus-visible { outline: 2px solid #8fe6cf; outline-offset: 3px; }
.batch-panel button:disabled { opacity: .45; cursor: default; }
.batch-note { flex-basis: 100%; margin: 0; }
.batch-heading { margin: 18px 0 6px; justify-content: space-between; font-size: 13px; }
.batch-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 12px; margin-top: 14px; max-height: 470px; overflow: auto; }
.batch-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.batch-file { display: flex; flex-wrap: wrap; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font-size: 11px; }
.batch-file small { color: #9caebb; }
.batch-file[data-status=rejected] small { color: #e8b18e; }
.batch-card { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 13px; background: #0c141de6; }
.batch-card img { width: 100%; height: 115px; object-fit: contain; border-radius: 6px; background: #090f18; margin: 9px 0; }
.batch-card strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.batch-card small { display: block; font-size: 12px; color: #a0b5c0; margin-top: 5px; overflow-wrap: anywhere; }
.batch-card[data-status=published] { border-color: #72d2b044; background: linear-gradient(145deg, #142a273d, #0c141de6 65%); }
.batch-card[data-status=rejected] small { color: #e8b18e; }
.batch-card[data-status=flattening],.batch-card[data-status=inspecting] { border-color: #70dce2; }
.batch-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 12px; }
.batch-actions a { text-decoration: underline; color: #9adfc8; }
.batch-export { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 16px 0; padding: 16px; border: 1px solid #75ddbb30; border-radius: 12px; background: linear-gradient(115deg, #4bd2aa0b, #6e79c409); }
.batch-export > div { display: grid; gap: 5px; margin-right: auto; }
.batch-export strong { font-size: 13px; color: var(--text); }
.batch-export .batch-switch { font-size: 12px; }
.batch-export #batchDownload { border-color: #75ddbb66; }
@media(max-width:700px) { .intro { padding: 20px; gap: 20px; flex-wrap: wrap; } .cpu-summary { margin-left: 0; width: 100%; } .batch-cards { grid-template-columns: 1fr; } }
@media(max-width:540px) {
  .batch-tray-summary { gap: 9px; padding: 10px 12px; }
  .batch-tray-caption { display: none; }
  .batch-tray-status { font-size: 9px; max-width: 45%; }
  .batch-tray-content { padding: 16px; }
  .batch-settings > label:not(.batch-switch) { flex-wrap: wrap; }
}
@media(prefers-reduced-motion:reduce) {
  .batch-tray-chevron, .batch-tray-summary, .batch-panel button, .intro .drop-compact { transition: none; }
}