.job-error {
  color: #fb7185;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 6px;
  max-width: 680px;
  overflow-wrap: anywhere;
}

.result-preview {
  align-items: stretch;
  display: flex;
  justify-content: center;
  min-height: 520px;
}

.result-loading,
.result-error {
  align-self: center;
  color: var(--muted);
  max-width: 420px;
  padding: 36px;
  text-align: center;
  width: 100%;
}

.result-loading strong,
.result-error strong {
  color: var(--text);
  display: block;
  font-size: 16px;
  margin-top: 14px;
}

.spinner {
  animation: spin .85s linear infinite;
  border: 3px solid var(--line);
  border-radius: 50%;
  border-top-color: var(--blue);
  height: 42px;
  margin: 0 auto;
  width: 42px;
}

.progress.wide {
  margin-top: 16px;
}

.result-error .empty-icon {
  color: #fb7185;
}

.image-result {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  padding: 18px;
  width: 100%;
}

.image-result .result-img {
  border-radius: 10px;
  box-shadow: 0 12px 40px #0004;
  object-fit: contain;
  width: 100%;
}

.result-actions,
.result-section-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.result-open {
  text-decoration: none;
}

.prompt-result {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  padding: 18px;
  width: 100%;
}

.prompt-result section {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}

.prompt-copy {
  color: var(--text);
  line-height: 1.8;
  margin-top: 12px;
  white-space: pre-wrap;
}

.negative-copy {
  color: var(--muted);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.card-title-row,
.queue-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.card-title-row h2,
.queue-toolbar .tabs {
  margin-bottom: 0;
}

.card-title-row small,
.image-result > small,
.prompt-result > small {
  color: var(--muted);
}

.model-chip {
  background: linear-gradient(90deg, #168cff22, #8f4fff22);
  border: 1px solid #6679ff55;
  border-radius: 999px;
  color: #7aaeff;
  font-size: 12px;
  padding: 5px 10px;
}

.compact-upload {
  padding: 18px;
}

.compact-upload.dragging {
  background: #168cff12;
  border-color: var(--blue);
}

.full-button {
  width: 100%;
}

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

.asset-card,
.reference-card {
  align-items: center;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 9px;
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  position: relative;
}

.asset-card img,
.reference-card img {
  background: var(--input);
  border-radius: 6px;
  height: 58px;
  object-fit: contain;
  width: 58px;
}

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

.asset-card b,
.asset-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-card small {
  color: var(--muted);
}

.asset-remove {
  background: #fb71851a;
  border: 0;
  border-radius: 50%;
  color: #fb7185;
  cursor: pointer;
  height: 22px;
  margin-left: auto;
  width: 22px;
}

.reference-card {
  align-items: flex-end;
  min-height: 106px;
  overflow: hidden;
  padding: 0;
}

.reference-card img {
  height: 106px;
  inset: 0;
  object-fit: contain;
  position: absolute;
  width: 100%;
}

.reference-card::after {
  background: linear-gradient(transparent, #020611dd);
  content: '';
  inset: 40% 0 0;
  pointer-events: none;
  position: absolute;
}

.reference-card span,
.reference-card button {
  position: relative;
  z-index: 1;
}

.reference-card span {
  color: white;
  font-size: 12px;
  margin: 0 0 8px 8px;
}

.reference-card [data-insert-ref] {
  background: #168cffcc;
  border: 0;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  margin: 0 0 7px auto;
  padding: 3px 7px;
}

.reference-card .asset-remove {
  margin: 0 7px 7px 4px;
}

.generated-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.generated-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

.generated-grid article {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  padding: 8px;
}

.image-preview-button {
  background: transparent;
  border: 0;
  cursor: zoom-in;
  padding: 0;
  width: 100%;
}

.generated-grid .result-img {
  display: block;
  height: 280px;
}

.generated-grid .result-actions {
  margin-top: 8px;
}

.small-primary {
  padding: 8px 12px;
}

.queue-card {
  padding: 0;
  overflow: hidden;
}

.queue-toolbar {
  border-bottom: 1px solid var(--line);
  margin: 0;
  padding: 16px 20px;
}

.table-wrap {
  overflow: auto;
}

.queue-table {
  border-collapse: collapse;
  min-width: 1050px;
  width: 100%;
}

.queue-table th,
.queue-table td {
  border-bottom: 1px solid var(--line);
  padding: 15px 14px;
  text-align: left;
  vertical-align: middle;
}

.queue-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.queue-table td:first-child {
  max-width: 360px;
  min-width: 280px;
}

.queue-table td:first-child small,
.queue-table .job-error {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-table td:first-child small {
  color: var(--muted);
  margin-top: 4px;
}

.queue-table .progress {
  min-width: 90px;
}

.reverse-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: 230px minmax(360px, .9fr) minmax(420px, 1.1fr);
}

.image-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: 250px minmax(380px, .95fr) minmax(390px, 1.05fr);
}

.image-history .history-list {
  max-height: 660px;
}

.image-history-item {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  display: flex;
  gap: 4px;
  padding: 5px;
}

.image-history-item:hover,
.image-history-item.active {
  background: #168cff12;
  border-color: #168cff66;
}

.image-history-main {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  display: flex;
  gap: 9px;
  min-width: 0;
  padding: 3px;
  text-align: left;
  width: 100%;
}

.image-history-main img,
.image-history-placeholder {
  align-items: center;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  flex: 0 0 54px;
  height: 54px;
  justify-content: center;
  object-fit: cover;
  width: 54px;
}

.image-history-copy {
  min-width: 0;
}

.image-history-copy b,
.image-history-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-history-copy small {
  color: var(--muted);
  font-size: 11px;
  margin: 3px 0 5px;
}

.image-history-copy em {
  font-size: 11px;
  font-style: normal;
  padding: 2px 6px;
}

.image-history-delete {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 28px;
  height: 28px;
}

.image-history-delete:hover {
  background: #fb71851a;
  color: #fb7185;
}

.image-result-card {
  min-width: 0;
}

.task-history {
  align-self: start;
  padding: 14px;
}

.history-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  max-height: 590px;
  overflow: auto;
}

.history-item {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  padding: 10px;
  text-align: left;
}

.history-item:hover,
.history-item.active {
  background: #168cff12;
  border-color: #168cff66;
}

.history-item b,
.history-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item small {
  color: var(--muted);
  margin-top: 4px;
}

.compact-empty {
  font-size: 12px;
  padding: 28px 8px;
}

@media (max-width: 1320px) {
  .reverse-layout { grid-template-columns: 210px 1fr; }
  .reverse-layout > .card:last-child { grid-column: 1 / -1; }
  .image-layout { grid-template-columns: 220px 1fr; }
  .image-layout > .card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .image-layout { grid-template-columns: 1fr; }
  .image-layout > .card:last-child { grid-column: auto; }
  .image-history .history-list { max-height: 320px; }
}

.remake-steps {
  align-items: center;
  background: linear-gradient(145deg, var(--card1), var(--card2));
  border: 1px solid var(--line);
  border-radius: 11px;
  display: flex;
  gap: 14px;
  margin: -6px 0 18px;
  padding: 13px 18px;
}

.remake-steps span {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  gap: 7px;
}

.remake-steps span.active { color: var(--text); }
.remake-steps i { color: #49617f; font-style: normal; }
.remake-steps b {
  align-items: center;
  background: #31415c;
  border-radius: 50%;
  color: white;
  display: flex;
  height: 22px;
  justify-content: center;
  width: 22px;
}
.remake-steps .active b { background: linear-gradient(135deg, var(--blue), var(--purple)); }

.remake-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: 230px minmax(390px, .9fr) minmax(430px, 1.1fr);
}

.remake-composer,
.remake-result-card { min-width: 0; }

.remake-upload-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.remake-upload { min-height: 108px; padding: 18px 12px; }
.remake-upload span { display: block; font-size: 11px; margin-top: 4px; }

.remake-asset-preview {
  background: var(--input);
  border-radius: 8px;
  margin-top: 8px;
  overflow: hidden;
}

.remake-asset-preview video,
.remake-asset-preview img {
  display: block;
  height: 120px;
  object-fit: contain;
  width: 100%;
}

.remake-asset-preview small {
  color: var(--muted);
  display: block;
  overflow: hidden;
  padding: 6px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remake-tips {
  background: #168cff0c;
  border: 1px solid #168cff2c;
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  font-size: 11px;
  gap: 4px;
  margin: 0 0 16px;
  padding: 10px 12px;
}

.remake-result {
  min-height: 620px;
}

.remake-empty { padding-top: 170px; }
.remake-output { display: flex; flex-direction: column; gap: 14px; }
.remake-media {
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.remake-media-tabs { border-bottom: 1px solid var(--line); margin: 0; padding: 7px; }
.remake-media-pane { min-height: 205px; }
.remake-media-pane[hidden] { display: none; }
.remake-media-pane video { display: block; height: 250px; object-fit: contain; width: 100%; }
.remake-media-pane .empty { padding: 70px 20px; }

.remake-summary,
.remake-segments {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 14px;
}
.remake-summary p { color: var(--muted); line-height: 1.7; margin: 8px 0 0; }
.remake-segments .result-section-head span { color: var(--muted); font-size: 11px; }
.remake-segments article {
  align-items: flex-start;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: 34px 1fr;
  padding: 11px 0;
}
.remake-segments article:first-of-type { margin-top: 9px; }
.remake-segments article > span {
  background: #168cff1e;
  border-radius: 6px;
  color: #58a8ff;
  font-size: 11px;
  padding: 4px 6px;
  text-align: center;
}
.remake-segments article p { color: var(--muted); margin: 4px 0; }
.remake-segments article small { color: var(--text); display: block; }
.remake-segments article em { color: #8aa0bf; display: block; font-size: 11px; font-style: normal; margin-top: 5px; }
.remake-output .field { margin-bottom: 0; }
.remake-output .field textarea { min-height: 110px; }
.remake-output .compact-negative textarea { min-height: 72px; }
.remake-output > small { color: var(--muted); }

@media (max-width: 1420px) {
  .remake-layout { grid-template-columns: 220px 1fr; }
  .remake-result-card { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .remake-layout { grid-template-columns: 1fr; }
  .remake-result-card { grid-column: auto; }
  .remake-upload-grid { grid-template-columns: 1fr; }
  .remake-steps { overflow-x: auto; }
  .remake-steps span { flex: 0 0 auto; }
}

/* 九叶草同层级：视频元素批量替换 */
.element-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: 230px minmax(440px, .95fr) minmax(430px, 1.05fr);
}
.element-composer,.element-result-card { min-width: 0; }
.compact-button { font-size: 11px; padding: 5px 8px; }
.element-video-list { display: grid; gap: 8px; margin-top: 9px; max-height: 220px; overflow: auto; }
.element-video-item { align-items: center; background: var(--input); border: 1px solid var(--line); border-radius: 8px; display: flex; justify-content: space-between; padding: 7px; }
.element-video-item > label { align-items: center; cursor: pointer; display: grid; gap: 8px; grid-template-columns: 18px 58px 1fr; margin: 0; min-width: 0; width: 100%; }
.element-video-item input { height: 15px; width: 15px; }
.element-video-item video { background: #020711; border-radius: 5px; height: 42px; object-fit: cover; width: 58px; }
.element-video-item span { min-width: 0; }
.element-video-item b,.element-video-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.element-video-item small { color: var(--muted); font-weight: 400; }
.element-video-item .asset-remove { position: static; }
.element-mode-grid { display: grid; gap: 8px; grid-template-columns: repeat(4,1fr); }
.element-mode-grid label { background: var(--input); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px; }
.element-mode-grid label:has(input:checked) { background: #168cff14; border-color: var(--blue); box-shadow: 0 0 0 2px #168cff18; }
.element-mode-grid input { display: none; }
.element-mode-grid span { color: var(--muted); font-size: 10px; font-weight: 400; }
.preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.preset-row button { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 11px; padding: 5px 8px; }
.preset-row button:hover { border-color: var(--blue); color: var(--blue); }
.capability-note { background: #f5b9420d; border: 1px solid #f5b94238; border-radius: 8px; color: var(--muted); display: grid; font-size: 11px; gap: 3px; padding: 11px 12px; }
.capability-note b { color: var(--amber); }
.inline-note { margin: 2px 0 14px; }
.element-result { min-height: 690px; }
.element-empty { padding-top: 210px; }
.element-output { display: flex; flex-direction: column; gap: 13px; }
.element-result-warning { background: #f5b94212; border: 1px solid #f5b94255; border-radius: 9px; display: grid; gap: 4px; padding: 12px 14px; }
.element-result-warning b { color: var(--amber); }
.element-result-warning span,.video-preview-error { color: var(--muted); font-size: 12px; line-height: 1.6; }
.element-source-block { display: grid; gap: 8px; }
.element-source-block .result-section-head { margin: 0; }
.element-source-block .link { font-size: 12px; }
.video-preview-error { background: #ff5d7d12; border-radius: 7px; color: #ff6f8b; margin: 0; padding: 9px 11px; }
.element-source-video { background: var(--input); border: 1px solid var(--line); border-radius: 9px; height: 230px; object-fit: contain; width: 100%; }
.element-result-meta { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; gap: 9px; font-size: 11px; }
.element-output .field { margin: 0; }
.element-output .field textarea { min-height: 110px; }
.element-output .compact-negative textarea { min-height: 72px; }
@media (max-width: 1420px) {
  .element-layout { grid-template-columns: 220px 1fr; }
  .element-result-card { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .element-layout { grid-template-columns: 1fr; }
  .element-result-card { grid-column: auto; }
  .element-mode-grid { grid-template-columns: 1fr 1fr; }
}

#content.products-content { max-width: none; }
.products-page { width: 100%; }
.products-page-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 24px; }
.products-page-head h1 { font-size: 24px; margin: 0; }
.products-page-head .primary { min-height: 40px; padding: 9px 16px; }
.products-card { padding: 0; }
.products-title { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding: 18px 24px 14px; }
.products-title h2 { font-size: 16px; margin: 0 0 5px; }
.products-title small { color: var(--muted); }
.product-toolbar { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 10px; }
.product-filter { display: grid; gap: 5px; }
.product-filter span { color: var(--muted); font-size: 11px; }
.product-filter select { min-width: 128px; }
.product-search { display: block; min-width: 280px; position: relative; }
.product-search svg { fill: none; height: 16px; left: 12px; position: absolute; stroke: var(--muted); stroke-linecap: round; stroke-width: 1.8; top: 50%; transform: translateY(-50%); width: 16px; }
.product-search input { padding-left: 36px; width: 100%; }
.products-table-wrap { overflow-x: auto; }
.products-table { border-collapse: collapse; min-width: 1180px; table-layout: fixed; text-align: left; width: 100%; }
.products-table th,.products-table td { border-top: 1px solid var(--line); padding: 12px 18px; vertical-align: middle; }
.products-table th { color: var(--muted); font-size: 12px; font-weight: 500; }
.products-table th:nth-child(1) { width: 15%; }
.products-table th:nth-child(2) { width: 110px; }
.products-table th:nth-child(3) { width: 140px; }
.products-table th:nth-child(4) { width: 14%; }
.products-table th:nth-child(5) { width: 20%; }
.products-table th:nth-child(6) { width: 22%; }
.products-table th:nth-child(7) { text-align: right; width: 92px; }
.products-table td:last-child { text-align: right; }
.product-category { border: 1px solid var(--line); border-radius: 999px; display: inline-flex; font-size: 12px; padding: 4px 9px; white-space: nowrap; }
.product-category.category-ecommerce { background: rgba(51,143,255,.11); border-color: rgba(51,143,255,.25); color: #4b9cff; }
.product-category.category-daily { background: rgba(37,198,159,.11); border-color: rgba(37,198,159,.25); color: #21b98f; }
.product-category.category-professional { background: rgba(151,93,255,.11); border-color: rgba(151,93,255,.25); color: #a775ff; }
.product-model { color: var(--text); font-weight: 600; }
.product-form-row { display: grid; gap: 14px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.product-form-row.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.products-table td { color: var(--muted); }
.products-table td.product-name { color: var(--text); font-weight: 650; }
.products-table .actions { justify-content: flex-end; gap: 4px; }
.product-action { align-items: center; background: transparent; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; display: inline-flex; height: 32px; justify-content: center; padding: 0; width: 32px; }
.product-action:hover { background: var(--input); color: var(--text); }
.product-action.danger:hover { color: #ff5d7d; }
.product-action svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 16px; }
.product-points { display: flex; flex-wrap: wrap; gap: 6px; }
.product-images { display: grid; gap: 7px; grid-template-columns: repeat(auto-fill,64px); max-width: 360px; }
.product-points span { background: #168cff1b; border-radius: 5px; color: var(--text); font-size: 11px; padding: 3px 7px; }
.product-images img { background: var(--input); border: 1px solid var(--line); border-radius: 7px; cursor: zoom-in; height: 64px; object-fit: contain; padding: 3px; width: 64px; }
.product-empty { padding: 24px; }
.product-modal { max-width: 760px; }
.product-modal .modal-body { max-height: 68vh; overflow-y: auto; }
.product-point-list { display: grid; gap: 8px; }
.product-point-row { display: grid; gap: 8px; grid-template-columns: 1fr 36px; }
.product-point-row button { padding: 4px; }
.product-image-grid { display: grid; gap: 9px; grid-template-columns: repeat(4,1fr); }
.product-image-tile,.product-image-add { aspect-ratio: 1; background: var(--input); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; position: relative; }
.product-image-tile img { background: var(--input); cursor: zoom-in; height: 100%; object-fit: contain; padding: 4px; width: 100%; }
.product-image-tile button { background: #07101fc9; border: 0; border-radius: 50%; color: white; cursor: pointer; height: 24px; position: absolute; right: 4px; top: 4px; width: 24px; }
.product-image-add { align-items: center; border-style: dashed; color: var(--muted); cursor: pointer; display: flex; flex-direction: column; font-size: 22px; justify-content: center; }
.product-image-add small { font-size: 11px; }
.product-image-add input { inset: 0; opacity: 0; position: absolute; width: 100%; }
.library-pick-button { margin-top: 8px; }
.library-picker-modal { width: min(760px, 94vw); max-width: 760px; }
.library-picker-modal .modal-body { max-height: 65vh; overflow-y: auto; }
.library-picker-card { align-items: center; border: 1px solid var(--line); border-radius: 9px; display: grid; gap: 14px; grid-template-columns: 72px minmax(0,1fr) auto; margin: 10px 0; padding: 12px; }
.library-picker-cover { align-items: center; background: var(--input); border-radius: 7px; display: flex; height: 72px; justify-content: center; overflow: hidden; width: 72px; }
.library-picker-cover img { cursor: zoom-in; height: 100%; object-fit: contain; padding: 3px; width: 100%; }
.library-picker-detail { display: grid; gap: 5px; min-width: 0; }
.library-picker-detail small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-picker-thumbs { display: flex; flex-wrap: wrap; gap: 5px; }
.library-picker-thumbs button { background: var(--input); border: 1px solid var(--line); border-radius: 5px; cursor: pointer; height: 34px; padding: 0; width: 34px; }
.library-picker-thumbs button:hover { border-color: var(--blue); }
.library-picker-thumbs img { border-radius: 4px; height: 100%; object-fit: contain; width: 100%; }
@media (max-width: 680px) { .library-picker-card { grid-template-columns: 56px 1fr; } .library-picker-cover { height: 56px; width: 56px; } .library-picker-card > .ghost { grid-column: 2; justify-self: start; } }
@media (max-width: 800px) {
  .products-page-head { align-items: stretch; gap: 12px; }
  .products-title { align-items: stretch; }
  .product-toolbar { align-items: stretch; flex-direction: column; width: 100%; }
  .product-filter select,.product-search { min-width: 0; width: 100%; }
  .product-form-row { grid-template-columns: 1fr; }
  .product-form-row.three { grid-template-columns: 1fr; }
}

/* Product asset board: filters stay compact; imagery is the primary content. */
.product-filter-panel { display: grid; gap: 4px; margin-bottom: 22px; padding: 16px 22px 18px; }
.product-filter-top { align-items: center; display: flex; gap: 18px; justify-content: space-between; padding-bottom: 8px; }
.product-filter-top .primary { flex: 0 0 auto; min-height: 38px; padding: 8px 15px; }
.product-filter-search { align-items: center; display: grid; flex: 1; gap: 14px; grid-template-columns: 58px minmax(260px,560px); min-width: 0; }
.product-filter-panel .product-search { min-width: 0; position: relative; width: 100%; }
.product-filter-panel .product-search svg { color: #7893bb; height: 17px; left: 14px; pointer-events: none; position: absolute; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; top: 50%; transform: translateY(-50%); transition: color .18s ease; width: 17px; z-index: 1; }
.product-filter-panel .product-search input { background: color-mix(in srgb,var(--input) 84%,transparent); border: 1px solid color-mix(in srgb,var(--line) 82%,#6d96d8); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.025),0 4px 14px rgba(4,16,38,.035); color: var(--text); font: inherit; height: 42px; outline: none; padding: 0 16px 0 42px; transition: border-color .18s ease,box-shadow .18s ease,background .18s ease; width: 100%; }
.product-filter-panel .product-search input::placeholder { color: color-mix(in srgb,var(--muted) 76%,transparent); }
.product-filter-panel .product-search input:hover { border-color: color-mix(in srgb,#5296ff 48%,var(--line)); }
.product-filter-panel .product-search input:focus { background: var(--card); border-color: #438fff; box-shadow: 0 0 0 3px rgba(42,133,255,.13),0 9px 24px rgba(13,72,157,.1); }
.product-filter-panel .product-search:focus-within svg { color: #3d8eff; }
.product-filter-row { align-items: center; border-top: 0; display: flex; gap: 14px; min-height: 48px; padding-top: 4px; }
.product-filter-label { color: var(--muted); flex: 0 0 58px; font-size: 12px; }
.product-filter-tabs { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.product-filter-tabs button { background: transparent; border: 1px solid transparent; border-radius: 7px; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; min-height: 32px; min-width: 68px; padding: 5px 14px; white-space: nowrap; }
.product-filter-tabs button:hover { background: var(--input); color: var(--text); }
.product-filter-tabs button.active { background: rgba(38,129,255,.1); border-color: rgba(55,139,255,.55); box-shadow: none; color: #3e91ff; font-weight: 650; }
.product-filter-reset { background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; margin-left: auto; padding: 7px 6px; white-space: nowrap; }
.product-filter-reset:hover { color: #3e91ff; }
.product-board { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); }
.product-board > .product-empty { grid-column: 1 / -1; }
.product-board-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(3,12,30,.08); min-width: 0; overflow: hidden; position: relative; transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.product-board-card:hover { border-color: rgba(79,143,255,.45); box-shadow: 0 16px 38px rgba(3,12,30,.16); transform: translateY(-3px); }
.product-card-cover { aspect-ratio: 1 / 1; background: linear-gradient(145deg,var(--input),rgba(89,119,180,.08)); border-bottom: 1px solid var(--line); display: block; overflow: hidden; position: relative; width: 100%; }
.product-card-cover::after { background: linear-gradient(180deg,transparent 55%,rgba(3,9,18,.12)); content: ''; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity .18s ease; z-index: 2; }
.product-card-cover:hover::after,.product-card-cover:focus-within::after { opacity: 1; }
.product-card-detail { background: transparent; border: 0; cursor: pointer; display: block; height: 100%; padding: 0; width: 100%; }
.product-card-cover img { height: 100%; object-fit: contain; padding: 10px; transition: transform .25s ease; width: 100%; }
.product-board-card:hover .product-card-cover img { transform: scale(1.035); }
.product-cover-empty { align-items: center; color: var(--muted); display: flex; height: 100%; justify-content: center; }
.product-status { border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 600; padding: 5px 9px; position: absolute; right: 10px; top: 10px; }
.product-status.on { background: rgba(17,190,139,.9); color: white; }
.product-status.off { background: rgba(93,106,130,.9); color: white; }
.product-card-body { display: grid; gap: 8px; padding: 13px 14px 16px; position: relative; }
.product-card-code { align-items: flex-start; display: flex; gap: 8px; justify-content: space-between; }
.product-card-skus { display: flex; flex: 1; flex-wrap: wrap; gap: 5px; min-width: 0; }
.product-card-sku { align-items: center; background: color-mix(in srgb,#4b8fff 9%,var(--card)); border: 1px solid color-mix(in srgb,#4b8fff 20%,var(--line)); border-radius: 6px; color: var(--text); display: inline-flex; font-size: 11px; gap: 4px; line-height: 1; min-height: 24px; padding: 4px 6px; }
.product-card-sku b { font-size: 11px; font-weight: 650; }
.product-card-sku em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 500; }
.product-card-code .product-category { flex-shrink: 0; font-size: 10px; padding: 3px 7px; }
.product-card-body h3 { display: -webkit-box; font-size: 15px; line-height: 1.45; margin: 0; min-height: 43px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-card-name { background: transparent; border: 0; color: var(--text); cursor: pointer; display: -webkit-box; font: inherit; font-size: 15px; font-weight: 650; line-height: 1.45; margin: 0; min-height: 43px; overflow: hidden; padding: 0; text-align: left; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-card-name:hover { color: #3288fa; }
.product-card-actions { backdrop-filter: blur(8px); background: rgba(7,15,28,.38); border: 1px solid rgba(255,255,255,.16); border-radius: 8px 0 0 8px; display: flex; flex-direction: column; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; right: 0; top: 50%; transform: translate(100%,-50%); transition: opacity .18s ease,transform .18s ease; z-index: 5; }
.product-card-cover:hover .product-card-actions,.product-card-cover:focus-within .product-card-actions { opacity: 1; pointer-events: auto; transform: translate(0,-50%); }
.product-card-action { align-items: center; background: transparent; border: 0; color: rgba(255,255,255,.92); cursor: pointer; display: inline-flex; height: 34px; justify-content: center; padding: 0; transition: background .15s ease,color .15s ease; width: 32px; }
.product-card-action + .product-card-action { border-top: 1px solid rgba(255,255,255,.12); }
.product-card-action:hover { background: rgba(55,137,255,.56); color: white; }
.product-card-action.danger:hover { background: rgba(234,62,91,.62); color: white; }
.product-card-action svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 15px; }
.product-preview-button { align-items: center; backdrop-filter: blur(7px); background: rgba(7,15,28,.44); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.14); color: white; cursor: pointer; display: inline-flex; font: inherit; font-size: 12px; gap: 6px; height: 34px; left: 50%; opacity: 0; padding: 0 14px; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%,-40%); transition: opacity .18s ease,transform .18s ease,background .18s ease; z-index: 4; }
.product-preview-button svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 16px; }
.product-card-cover:hover .product-preview-button,.product-card-cover:focus-within .product-preview-button { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%); }
.product-preview-button:hover { background: rgba(25,111,237,.68); }
.product-pagination { align-items: center; display: flex; gap: 16px; justify-content: flex-end; min-height: 56px; padding: 14px 2px 0; }
.product-pagination-summary { align-items: center; color: var(--muted); display: flex; font-size: 12px; gap: 10px; }
.product-pagination-summary b { color: var(--text); font-size: 13px; }
.product-pagination-controls,.product-pagination-controls label { align-items: center; display: flex; gap: 8px; }
.product-pagination-controls { justify-content: flex-end; }
.product-pagination-controls label { color: var(--muted); font-size: 12px; }
.product-pagination-controls select { appearance: none; background: var(--card); border: 1px solid var(--line); border-radius: 8px; color: var(--text); cursor: pointer; font: inherit; height: 34px; min-width: 62px; padding: 0 22px 0 10px; text-align: center; }
.product-pagination-controls button { align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 8px; color: var(--text); cursor: pointer; display: inline-flex; font: inherit; font-size: 19px; height: 34px; justify-content: center; width: 34px; }
.product-pagination-controls button:hover:not(:disabled) { border-color: #4a91ff; color: #3989ff; }
.product-pagination-controls button:disabled { cursor: not-allowed; opacity: .38; }
.product-page-current { color: var(--muted); font-size: 12px; min-width: 46px; text-align: center; }
.product-detail-page { display: grid; gap: 16px; }
.product-detail-back { background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit; justify-self: start; padding: 2px 0; transition: color .15s ease,transform .15s ease; }
.product-detail-back:hover { color: #398cff; transform: translateX(-2px); }
.product-detail-loading,.product-detail-missing { color: var(--muted); padding: 48px; text-align: center; }
.product-detail-hero { display: grid; gap: 32px; grid-template-columns: minmax(280px,38%) minmax(0,1fr); padding: 24px; }
.product-detail-gallery { display: grid; gap: 12px; min-width: 0; }
.product-detail-main-image { align-items: center; aspect-ratio: 1 / 1; background: linear-gradient(145deg,color-mix(in srgb,var(--input) 88%,white),rgba(89,119,180,.08)); border: 1px solid var(--line); border-radius: 14px; cursor: zoom-in; display: flex; justify-content: center; overflow: hidden; padding: 14px; position: relative; width: 100%; }
.product-detail-main-image img { height: 100%; object-fit: contain; transition: transform .25s ease; width: 100%; }
.product-detail-main-image:hover img { transform: scale(1.025); }
.product-detail-main-image em { backdrop-filter: blur(7px); background: rgba(5,14,28,.44); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; bottom: 14px; color: white; font-size: 11px; font-style: normal; opacity: 0; padding: 6px 11px; position: absolute; transition: opacity .18s ease; }
.product-detail-main-image:hover em { opacity: 1; }
.product-detail-thumbs { display: grid; gap: 8px; grid-template-columns: repeat(6,1fr); }
.product-detail-thumbs button { aspect-ratio: 1; background: var(--input); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; overflow: hidden; padding: 3px; }
.product-detail-thumbs button.active { border-color: #438fff; box-shadow: 0 0 0 2px rgba(50,135,255,.12); }
.product-detail-thumbs img { height: 100%; object-fit: contain; width: 100%; }
.product-detail-summary { align-content: center; display: grid; justify-items: start; min-width: 0; padding: 10px 12px; }
.product-detail-labels { align-items: center; display: flex; gap: 9px; margin-bottom: 14px; }
.product-detail-status { align-items: center; border-radius: 999px; display: inline-flex; font-size: 11px; gap: 6px; padding: 4px 9px; }
.product-detail-status i { border-radius: 50%; height: 6px; width: 6px; }
.product-detail-status.on { background: rgba(22,190,143,.1); color: #18b88d; }.product-detail-status.on i { background: #18c596; }
.product-detail-status.off { background: rgba(105,119,142,.12); color: var(--muted); }.product-detail-status.off i { background: #8290a6; }
.product-detail-summary h1 { font-size: clamp(25px,2.5vw,38px); letter-spacing: -.03em; line-height: 1.25; margin: 0 0 18px; }
.product-detail-number { align-items: center; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; gap: 18px; padding: 13px 0; width: 100%; }
.product-detail-number span { color: var(--muted); font-size: 12px; }.product-detail-number b { font-size: 15px; letter-spacing: .05em; }
.product-detail-points { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.product-detail-points span { background: color-mix(in srgb,#438fff 8%,var(--input)); border: 1px solid color-mix(in srgb,#438fff 24%,var(--line)); border-radius: 7px; color: color-mix(in srgb,#438fff 72%,var(--text)); font-size: 11px; padding: 5px 9px; }
.product-detail-summary-actions { display: flex; gap: 10px; margin-top: 26px; }
.product-detail-summary-actions button { align-items: center; display: inline-flex; gap: 7px; min-height: 38px; padding: 8px 16px; }
.product-detail-summary-actions svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 15px; }
.danger-outline { color: #e35c72; }.danger-outline:hover { border-color: #ed7185; }
.product-detail-content { min-height: 350px; overflow: hidden; padding: 0; }
.product-detail-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 8px; padding: 0 22px; }
.product-detail-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; font: inherit; min-height: 52px; padding: 0 18px; position: relative; }
.product-detail-tabs button.active { border-color: #3289ff; color: var(--text); font-weight: 650; }
.product-detail-tabs span { background: var(--input); border-radius: 999px; font-size: 10px; margin-left: 5px; padding: 2px 6px; }
.product-detail-pane { animation: productPaneIn .18s ease; padding: 26px; }
.product-detail-pane[hidden] { display: none !important; }
@keyframes productPaneIn { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:none } }
.product-detail-pane[data-product-pane="info"] { display: grid; gap: 16px; grid-template-columns: repeat(3,1fr); }
.product-info-section { background: color-mix(in srgb,var(--input) 55%,transparent); border: 1px solid var(--line); border-radius: 12px; min-height: 205px; padding: 18px; }
.product-info-section header { align-items: center; display: flex; gap: 11px; }
.product-info-section header > span { align-items: center; background: rgba(48,137,255,.11); border-radius: 8px; color: #3b8fff; display: flex; font-size: 11px; font-weight: 700; height: 34px; justify-content: center; width: 34px; }
.product-info-section h3 { font-size: 15px; margin: 0 0 3px; }.product-info-section small { color: var(--muted); font-size: 10px; }
.product-info-copy { color: color-mix(in srgb,var(--text) 82%,var(--muted)); font-size: 13px; line-height: 1.9; padding-top: 18px; white-space: pre-wrap; }
.product-info-copy p { margin: 0; }.product-info-empty { color: var(--muted); }
.product-patent-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); align-items: start; }
.product-patent-card { min-width: 0; background: var(--card1); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; padding: 0; transition: border-color .18s,box-shadow .18s; }
.product-patent-card:hover { border-color: #a8c5f0; box-shadow: 0 5px 18px rgba(42,87,152,.07); }
.product-patent-card > button,.product-patent-placeholder { align-items: center; aspect-ratio: 4/5; width: 100%; background: rgba(111,155,219,.055); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--muted); display: flex; justify-content: center; overflow: hidden; padding: 18px; position: relative; box-sizing: border-box; }
.product-patent-card > button { cursor: zoom-in; }
.product-patent-card img { display: block; height: 100%; object-fit: contain; width: 100%; min-height: 0; }
.product-patent-card button span { background: rgba(25,42,65,.48); bottom: 16px; color: white; font-size: 12px; left: 50%; transform: translateX(-50%); opacity: 0; padding: 6px 14px; border-radius: 18px; position: absolute; white-space: nowrap; transition: opacity .15s; }
.product-patent-card button:hover span,.product-patent-card button:focus-visible span { opacity: 1; }
.product-patent-card > button:focus-visible { outline: 2px solid #7860ed; outline-offset: -3px; }
.product-patent-card > div:not(.product-patent-placeholder) { padding: 16px 18px 18px; }
.product-patent-card h3 { font-size: 14px; font-weight: 600; line-height: 1.6; margin: 0 0 12px; overflow-wrap: anywhere; }
.product-patent-card p { color: var(--text); font-size: 12px; line-height: 1.7; margin: 0; overflow-wrap: anywhere; }
.product-patent-card p span { color: var(--muted); display: block; font-size: 11px; margin-bottom: 3px; }
.product-pane-empty { align-content: center; color: var(--muted); display: grid; justify-items: center; min-height: 260px; text-align: center; }.product-pane-empty > div { color: #4f93ee; font-size: 32px; }.product-pane-empty strong { color: var(--text); margin: 9px 0 4px; }.product-pane-empty p { margin: 0; }
.product-attachment-list { display: grid; gap: 10px; }.product-attachment-list a { align-items: center; background: color-mix(in srgb,var(--input) 55%,transparent); border: 1px solid var(--line); border-radius: 11px; color: var(--text); display: grid; gap: 13px; grid-template-columns: 40px 1fr auto; padding: 12px 14px; text-decoration: none; transition: border-color .15s ease,transform .15s ease; }.product-attachment-list a:hover { border-color: #4a91ff; transform: translateY(-1px); }.product-file-icon { align-items: center; background: linear-gradient(135deg,#378eff,#7656ef); border-radius: 8px; color: white; display: flex; font-weight: 700; height: 40px; justify-content: center; }.product-attachment-list b { display: block; font-size: 13px; }.product-attachment-list small { color: var(--muted); }.product-attachment-list em { color: #3d8fff; font-size: 12px; font-style: normal; }
.product-editor-section-title { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin-top: 6px; padding-top: 16px; }.product-editor-section-title:first-child { border-top: 0; margin-top: 0; padding-top: 0; }.product-editor-section-title b { font-size: 14px; }.product-editor-section-title span { color: var(--muted); font-size: 11px; }
.product-patent-editor-list,.product-attachment-editor-list { display: grid; gap: 9px; }.product-editor-empty { background: var(--input); border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); font-size: 11px; padding: 16px; text-align: center; }
.product-patent-editor { align-items: center; background: var(--input); border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 9px; grid-template-columns: 1fr 88px 28px; padding: 10px; }.product-patent-editor-fields { display: grid; gap: 7px; }.product-patent-image-upload { align-items: center; background: var(--card); border: 1px dashed var(--line); border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; height: 68px; justify-content: center; overflow: hidden; position: relative; }.product-patent-image-upload input,.product-attachment-upload input { display: none; }.product-patent-image-upload img { height: 100%; object-fit: contain; width: 100%; }.product-patent-image-upload span { bottom: 3px; color: var(--muted); font-size: 9px; position: absolute; }.product-patent-remove { background: transparent; border: 0; color: #e36178; cursor: pointer; font-size: 20px; }
.product-attachment-upload { align-items: center; background: rgba(53,137,255,.08); border: 1px dashed rgba(65,142,255,.4); border-radius: 9px; color: #3f8eff; cursor: pointer; display: flex; font-size: 12px; justify-content: center; padding: 13px; }.product-attachment-editor { align-items: center; background: var(--input); border: 1px solid var(--line); border-radius: 9px; display: grid; gap: 9px; grid-template-columns: 30px 1fr 28px; padding: 9px 11px; }.product-attachment-editor > span { align-items: center; background: #4b86e8; border-radius: 6px; color: white; display: flex; font-size: 11px; font-weight: 700; height: 28px; justify-content: center; }.product-attachment-editor b { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.product-attachment-editor button { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 18px; }
@media (max-width: 900px) { .product-detail-hero { grid-template-columns: 1fr; }.product-detail-gallery { max-width: 560px; width: 100%; }.product-detail-pane[data-product-pane="info"] { grid-template-columns: 1fr; }.product-detail-summary { padding: 4px; } }
@media (max-width: 900px) { .product-filter-top { align-items: stretch; } .product-filter-search { grid-template-columns: 58px minmax(0,1fr); } .product-filter-row { align-items: flex-start; padding: 10px 0 6px; } }
@media (hover:none) { .product-card-actions { opacity: 1; pointer-events: auto; transform: translate(0,-50%); } .product-preview-button { bottom: 10px; left: 10px; opacity: 1; pointer-events: auto; top: auto; transform: none; } }
@media (max-width: 680px) { .product-pagination { align-items: flex-start; flex-direction: column; } .product-pagination-controls { width: 100%; } .product-pagination-controls label { margin-right: auto; } }

/* Stable media sizing: uploaded assets never enlarge their page columns. */
.workspace,.image-layout,.reverse-layout,.remake-layout,.element-layout { align-items: start; }
.workspace > *,.image-layout > *,.reverse-layout > *,.remake-layout > *,.element-layout > * { min-width: 0; }
.asset-strip,.reference-grid { grid-template-columns: repeat(auto-fit,minmax(112px,1fr)); max-width: 100%; overflow: hidden; }
.asset-card { overflow: hidden; }
.asset-card img { flex: 0 0 58px; }
.generated-grid { grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); }
.generated-grid .result-img { background: var(--input); object-fit: contain; width: 100%; }
.remake-asset-preview,.remake-media-pane,.element-source-block { max-width: 100%; }
.remake-asset-preview img,.remake-asset-preview video,.remake-media-pane video,.element-source-video { object-fit: contain; }

/* Product profile: compact gallery, structured facts and readable content. */
.product-form-row.three.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.product-detail-hero { align-items: stretch; background: transparent; border: 0; box-shadow: none; gap: 18px; grid-template-columns: minmax(0,1.18fr) minmax(520px,1fr); padding: 0; }
.product-detail-primary { align-items: start; background: var(--card1); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 3px 12px rgba(20,54,104,.04); display: grid; gap: clamp(24px,3vw,42px); grid-template-columns: minmax(230px,310px) minmax(0,1fr); padding: clamp(22px,2.4vw,30px); }
.product-detail-gallery { align-content: start; max-width: 320px; width: 100%; }
.product-detail-image-stage { position: relative; }
.product-detail-main-image { aspect-ratio: 4 / 5; max-height: 330px; padding: 18px; }
.product-detail-image-nav { align-items: center; backdrop-filter: blur(8px); background: color-mix(in srgb,var(--card) 82%,transparent); border: 1px solid color-mix(in srgb,var(--line) 75%,transparent); border-radius: 50%; color: var(--text); cursor: pointer; display: flex; font-size: 26px; height: 34px; justify-content: center; padding: 0 0 3px; position: absolute; top: 50%; transform: translateY(-50%); transition: background .15s ease,border-color .15s ease,transform .15s ease; width: 34px; z-index: 2; }
.product-detail-image-nav:hover { background: color-mix(in srgb,#3d8fff 15%,var(--card)); border-color: rgba(61,143,255,.45); transform: translateY(-50%) scale(1.04); }
.product-detail-image-nav.prev { left: 9px; }.product-detail-image-nav.next { right: 9px; }
.product-detail-image-count { backdrop-filter: blur(8px); background: color-mix(in srgb,var(--card) 78%,transparent); border: 1px solid color-mix(in srgb,var(--line) 75%,transparent); border-radius: 999px; bottom: 10px; color: var(--muted); font-size: 10px; padding: 4px 8px; position: absolute; right: 10px; z-index: 2; }
.product-detail-thumbs { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 2px 1px 5px; scrollbar-width: thin; }
.product-detail-thumbs button { flex: 0 0 48px; height: 48px; }
.product-detail-summary { align-content: start; display: grid; justify-items: stretch; padding: 7px 0 2px; }
.product-detail-summary h1 { color: var(--text); font-size: 20px; font-weight: 600; letter-spacing: 0; line-height: 1.5; margin: 0 0 24px; }
.product-detail-title-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; min-width: 0; }
.product-detail-title-row h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.product-detail-back-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb,var(--card) 70%,transparent); color: var(--muted); cursor: pointer; transition: color .15s ease,background .15s ease,border-color .15s ease; }
.product-detail-back-icon svg { width: 18px; height: 18px; }
.product-detail-back-icon:hover { color: #398cff; background: rgba(57,140,255,.08); border-color: rgba(57,140,255,.3); }
.product-detail-back-icon:focus-visible { outline: 2px solid #398cff; outline-offset: 3px; }
.page-back-button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; margin-right: 8px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb,var(--card) 85%,transparent); color: var(--muted); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; box-shadow: 0 1px 3px rgba(32,63,108,.04); transition: background .18s,color .18s,border-color .18s; }
.page-back-button[hidden] { display: none; }
.page-back-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.page-back-button:hover { color: #398cff; background: rgba(57,140,255,.07); border-color: rgba(57,140,255,.25); }
.page-back-button:hover svg { transform: translateX(-2px); }
.page-back-button:focus-visible { outline: 2px solid #398cff; outline-offset: 3px; }
.product-detail-meta-grid { display: grid; gap: 13px; grid-template-columns: 1fr; width: 100%; }
.product-detail-meta-grid > div { align-items: center; display: grid; gap: 14px; grid-template-columns: 82px minmax(0,1fr); min-height: 34px; padding: 0; }
.product-detail-meta-grid span:first-child { color: color-mix(in srgb,var(--text) 62%,var(--muted)); font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.product-detail-meta-grid strong { color: var(--text); font-size: 13px; font-weight: 620; min-width: 0; }
.product-detail-tags { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.product-detail-meta-grid .product-sale-period { margin-left: 10px; color: var(--muted); font-size: 12px; font-weight: 400; }
.product-detail-note { align-items: start!important; }
.product-detail-note strong { color: color-mix(in srgb,var(--text) 78%,var(--muted)); font-weight: 500; line-height: 1.65; }
.product-detail-benefits { align-content: start; background: var(--card1); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 3px 12px rgba(20,54,104,.04); display: grid; gap: 24px; margin: 0; padding: clamp(26px,3vw,38px); width: 100%; }
.product-detail-filing { align-content: start; background: var(--card1); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 3px 12px rgba(20,54,104,.04); display: grid; gap: 18px; margin: 0; padding: clamp(26px,3vw,38px); width: 100%; }
.product-filing-head { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.product-filing-head h2 { color: var(--text); font-size: 18px; font-weight: 680; margin: 0; }
.product-filing-edit { align-items: center; background: transparent; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; display: inline-flex; font: inherit; font-size: 12px; gap: 5px; padding: 6px 8px; transition: background .18s,color .18s; }
.product-filing-edit svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 14px; }
.product-filing-edit:hover { background: rgba(120,96,237,.06); color: #7860ed; }
.product-filing-edit:focus-visible { outline: 2px solid #7860ed; outline-offset: 2px; }
.product-filing-list { display: grid; gap: 10px; grid-template-areas: "approval special" "name name" "efficacy efficacy"; grid-template-columns: minmax(0,1.45fr) minmax(150px,.55fr); }
.product-filing-list > div { align-content: center; background: color-mix(in srgb,var(--input) 38%,transparent); border: 1px solid color-mix(in srgb,var(--line) 68%,transparent); border-radius: 10px; display: grid; gap: 6px; min-height: 66px; padding: 11px 14px; }
.product-filing-list .filing-approval { grid-area: approval; }
.product-filing-list .filing-special { grid-area: special; }
.product-filing-list .filing-name { grid-area: name; }
.product-filing-list .filing-efficacy { align-items: center; grid-area: efficacy; grid-template-columns: 78px minmax(0,1fr); min-height: 58px; }
.product-filing-list span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.product-filing-list strong { color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
.product-filing-value { align-items: center; display: flex; gap: 10px; justify-content: space-between; min-width: 0; }
.product-filing-value strong { flex: 1 1 auto; min-width: 0; }
.product-filing-copy { align-items: center; background: transparent; border: 0; border-radius: 5px; color: var(--muted); cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 26px; justify-content: center; padding: 0; transition: background .18s,color .18s; width: 26px; }
.product-filing-copy svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 14px; }
.product-filing-copy:hover { background: rgba(57,140,255,.09); color: #398cff; }
.product-filing-copy:focus-visible { outline: 2px solid #398cff; outline-offset: 2px; }
.product-filing-tags { display: flex; flex-wrap: wrap; gap: 5px; max-width: 100%; padding: 1px 0; }
.product-filing-tags:focus-visible { border-radius: 5px; outline: 2px solid color-mix(in srgb,#398cff 55%,transparent); outline-offset: 2px; }
.product-filing-tags b { background: color-mix(in srgb,#398cff 8%,var(--input)); border: 1px solid color-mix(in srgb,#398cff 18%,var(--line)); border-radius: 5px; color: color-mix(in srgb,#398cff 76%,var(--text)); flex: 0 0 auto; font-size: 11px; font-weight: 560; line-height: 1; padding: 4px 7px; white-space: nowrap; }
.product-filing-actions { display: flex; margin-top: auto; padding-left: 0; }
.product-filing-actions .product-filing-edit { min-height: 32px; padding: 5px 2px; }
.product-detail-page > .product-detail-hero { background: transparent; box-shadow: none; }
.product-detail-page > .product-detail-content { background: var(--card1); box-shadow: 0 3px 12px rgba(20,54,104,.04); }
.product-detail-benefits h2 { color: var(--text); font-size: 18px; font-weight: 680; margin: 0; }
.product-detail-tabs .product-section-manage { margin-left: auto; align-self: center; flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 5px; padding: 7px 4px; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--muted); background: transparent; box-shadow: none; cursor: pointer; transition: color .18s; }
.product-detail-tabs .product-section-manage::before { content: '+'; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; background: #7860ed; color: #fff; font: 500 15px/1 Arial,sans-serif; }
.product-detail-tabs .product-section-manage:hover { background: transparent; color: #7860ed; box-shadow: none; }
.product-detail-tabs .product-section-manage:focus-visible { outline: 2px solid #7860ed; outline-offset: 3px; }
.product-detail-pane[data-product-pane="info"] { display: block; }
.product-detail-pane[hidden] { display: none !important; }
.product-editorial { display: grid; gap: 0; }
.product-editorial > section { padding: 26px 0; }
.product-editorial > section:first-child { padding-top: 0; }
.product-editorial > section:last-child { padding-bottom: 0; }
.product-editorial > section + section { border-top: 1px solid var(--line); }
.product-info-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; min-height: 30px; }
.product-editorial .product-info-heading h3 { display: flex; align-items: center; gap: 9px; margin: 0; }
.product-info-heading h3::before { content: ''; display: block; width: 3px; height: 15px; flex: 0 0 3px; border-radius: 3px; background: #779fed; }
.product-part-edit { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.product-part-edit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.product-part-edit:hover { color: #7860ed; background: rgba(120,96,237,.06); }
.product-part-edit:focus-visible { outline: 2px solid #7860ed; outline-offset: 2px; }
.product-detail-tabs .product-section-manage[hidden] { display: none; }
.product-selling-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 14px; }
.product-selling-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: rgba(87,146,235,.04); min-width: 0; }
.product-selling-card h4 { color: var(--text); font-size: 15px; font-weight: 600; margin: 0 0 8px; overflow-wrap: anywhere; }
.product-selling-card p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; }
.product-selling-editor { position: relative; display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 16px 40px 16px 16px; }
.product-selling-editor label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.product-selling-editor textarea { min-height: 76px; }
.product-selling-editor > button { position: absolute; right: 8px; top: 10px; padding: 3px 6px; }
.product-editorial section { min-width: 0; }
.product-editorial h3 { font-size: 15px; margin: 0 0 14px; color: var(--text); font-weight: 600; }
.product-editorial p { font-size: 14px; line-height: 1.85; margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.product-editorial .product-info-empty { color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.85; margin: 0; }
.ingredient-intro,.product-readable-copy { box-sizing: border-box; color: var(--muted); max-width: none; width: 100%; }
.ingredient-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; margin-top: 16px; }
.ingredient-card { display: flex; gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card1); align-items: flex-start; min-width: 0; }
.ingredient-card a { flex: 0 0 108px; }
.ingredient-card img { width: 108px; height: 108px; object-fit: contain; border-radius: 8px; background: rgba(90,143,215,.04); }
.ingredient-card h4 { font-size: 14px; font-weight: 600; margin: 2px 0 8px; }
.ingredient-card p { font-size: 13px; color: var(--muted); }
.ingredient-editor-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 12px; }
.ingredient-editor-row { padding: 16px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; }
.ingredient-editor-image { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.ingredient-editor-image img { width: 72px; height: 72px; object-fit: contain; }
.product-modal .modal-body > [hidden] { display: none !important; }
.product-detail-benefits > p { color: var(--muted); font-size: 12px; margin: 0; }
.product-detail-benefits ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.product-detail-benefits li { align-items: center; color: color-mix(in srgb,var(--text) 82%,var(--muted)); display: grid; font-size: 14px; gap: 10px; grid-template-columns: 12px minmax(0,1fr); line-height: 1.8; min-height: 28px; }
.product-detail-benefits li i { background: #6b9fea; border-radius: 50%; display: block; height: 6px; width: 6px; justify-self: center; box-shadow: 0 0 0 3px rgba(66,142,244,.08); }
.product-detail-benefits li > span { min-width: 0; overflow-wrap: anywhere; }
.product-detail-summary-actions { margin-top: 18px; margin-left: 78px; gap: 16px; flex-wrap: wrap; }
.product-detail-summary-actions button,.product-filing-actions .product-filing-edit { min-height: 32px; padding: 5px 2px; border: 0; border-radius: 5px; background: transparent; box-shadow: none; color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 500; line-height: 20px; }
.product-detail-summary-actions button svg,.product-filing-actions .product-filing-edit svg { width: 15px; height: 15px; stroke-width: 1.8; }
.product-detail-summary-actions button:hover,.product-filing-actions .product-filing-edit:hover { background: rgba(57,140,255,.06); color: #398cff; box-shadow: none; }
.product-detail-summary-actions #deleteDetailProduct:hover { color: #e05b6f; background: rgba(224,91,111,.06); }
.product-detail-summary-actions button:focus-visible,.product-filing-actions .product-filing-edit:focus-visible { outline: 2px solid #398cff; outline-offset: 3px; }
.product-detail-content { min-height: 0; }
.product-detail-pane[data-product-pane="info"] { align-items: start; grid-template-columns: repeat(2,minmax(0,1fr)); }
.product-info-section { min-height: 0; padding: 18px 20px 20px; }
.product-info-section.wide { grid-column: 1 / -1; }
.product-info-section.wide .product-info-copy { max-width: 1050px; }
.product-info-copy { line-height: 1.8; padding-top: 14px; }
.product-info-empty-state { grid-column: 1 / -1; min-height: 170px; }
@media (max-width: 1050px) { .product-form-row.three.four { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 1150px) { .product-detail-hero { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .product-detail-primary { grid-template-columns: 1fr; }.product-detail-gallery { max-width: 360px; }.product-detail-pane[data-product-pane="info"] { grid-template-columns: 1fr; }.product-info-section.wide { grid-column: auto; } }
@media (max-width: 620px) { .product-form-row.three.four,.product-detail-meta-grid { grid-template-columns: 1fr; }.product-detail-meta-grid { gap: 9px; } }
.remake-asset-preview img,.reference-card img,.image-history-main img { cursor: zoom-in; }
.element-video-item video,.remake-asset-preview video,.remake-media-pane video,.element-source-video { cursor: zoom-in; }

/* Unified image/video viewer. */
.media-viewer-backdrop { padding: 18px; z-index: 40; }
.media-viewer { background: #050a13f2; border: 1px solid #ffffff25; border-radius: 13px; box-shadow: 0 28px 100px #000b; display: grid; grid-template-rows: auto minmax(0,1fr); height: min(900px,94vh); overflow: hidden; width: min(1440px,96vw); }
.media-viewer header { align-items: center; background: #0c1525ed; border-bottom: 1px solid #ffffff1a; display: flex; justify-content: space-between; min-width: 0; padding: 11px 14px; }
.media-viewer header > div:first-child { display: grid; min-width: 0; }
.media-viewer header b { color: #f4f7ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-viewer header small { color: #8d9ab1; }
.media-viewer-tools { align-items: center; display: flex; flex-shrink: 0; gap: 7px; }
.media-viewer-tools button,.media-viewer-tools a { align-items: center; background: #18243a; border: 1px solid #33435e; border-radius: 7px; color: #eef3ff; cursor: pointer; display: inline-flex; font: inherit; height: 34px; justify-content: center; min-width: 34px; padding: 0 10px; text-decoration: none; }
.media-viewer-tools [data-media-scale] { color: #a9b6cb; font-size: 12px; min-width: 44px; text-align: center; }
.media-viewer-tools [data-media-close] { font-size: 21px; }
.media-viewer-stage { align-items: center; display: flex; justify-content: center; min-height: 0; overflow: hidden; padding: 18px; touch-action: none; }
.media-viewer-stage img { cursor: zoom-in; max-height: 100%; max-width: 100%; object-fit: contain; transform-origin: center; transition: transform .08s linear; user-select: none; }
.media-viewer-stage.is-zoomed img { cursor: grab; max-height: none; max-width: none; }
.media-viewer-stage.is-zoomed img:active { cursor: grabbing; }
.media-viewer-stage video { background: #000; height: 100%; max-height: 100%; max-width: 100%; object-fit: contain; width: 100%; }
@media (max-width: 720px) { .media-viewer header small { display: none; } .media-viewer-tools [data-media-scale] { display: none; } .media-viewer-tools button,.media-viewer-tools a { padding: 0 7px; } }

/* Refined collapsible navigation and consistent line icons. */
.sidebar nav { min-height: 0; }
.nav-group .nav-section-toggle { align-items: center; background: transparent; border: 0; color: #4c9eff; display: flex; font-size: 12px; height: 38px; justify-content: space-between; margin: 2px 0 4px; padding: 0 9px; width: 100%; }
.nav-group .nav-section-toggle:hover { background: #5684ca12; }
.nav-section-toggle svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform .2s ease; width: 17px; }
.nav-section-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.nav-items { display: grid; gap: 2px; max-height: 360px; opacity: 1; overflow: hidden; transition: max-height .24s ease,opacity .18s ease; }
.nav-items.collapsed { max-height: 0; opacity: 0; pointer-events: none; }
.nav-group .nav-items > button { border: 1px solid transparent; height: 42px; margin: 0; padding: 0 10px; transition: background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; }
.nav-group .nav-items > button:hover { border-color: #5684ca24; transform: translateX(2px); }
.nav-group .nav-items > button.active { border-color: #6095ff30; }
.nav-group .nav-items > button > i { align-items: center; display: inline-flex; flex: 0 0 24px; height: 24px; justify-content: center; width: 24px; }
.nav-group .nav-items > button > i svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 18px; }
.nav-group .nav-items > button > span:not(.badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group .nav-items > button.active > i { filter: drop-shadow(0 2px 5px #fff4); }

/* Scalable application shell: primary modules on top, current module functions on the left. */
body { min-width: 980px; }
.app {
  display: grid;
  grid-template-areas: "top top" "side main";
  grid-template-columns: 220px minmax(0,1fr);
  grid-template-rows: 56px minmax(calc(100vh - 56px),auto);
}
.topbar {
  grid-area: top;
  height: 56px;
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 12;
}
.topbar .brand { flex: 0 0 198px; padding: 0; }
.topbar .brandmark { font-size: 25px; }
.module-tabs { align-self: stretch; display: flex; gap: 6px; margin-left: 18px; }
.module-tabs button {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: 650;
  gap: 8px;
  min-width: 92px;
  padding: 0 15px;
  position: relative;
}
.module-tabs button:hover { background: #5684ca0d; color: var(--text); }
.module-tabs button.active { border-bottom-color: var(--blue); color: var(--text); }
.module-tabs button.active::after { display: none; }
.module-tabs i { align-items: center; display: inline-flex; justify-content: center; }
.module-tabs svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 18px; }
.topbar .header-actions { margin-left: auto; }
.topbar .icon-btn { height: 32px; width: 32px; }
.topbar .avatar { height: 30px; width: 30px; }

.sidebar {
  grid-area: side;
  height: calc(100vh - 56px);
  inset: auto;
  padding: 17px 10px 14px;
  position: sticky;
  top: 56px;
  width: 220px;
  z-index: 5;
}
.side-navigation { flex: 1; min-height: 0; overflow-y: auto; }
.module-side-panel { display: grid; gap: 3px; }
.module-side-panel[hidden] { display: none !important; }
.module-tabs [data-module="ai"][hidden] { display: none !important; }
.side-panel-label { color: #4c9eff; font-size: 11px; padding: 7px 10px; }
.module-side-panel > button,
.module-side-panel .nav-items > button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 10px;
  height: 42px;
  padding: 0 10px;
  text-align: left;
  width: 100%;
}
.module-side-panel > button:hover { background: #5684ca18; border-color: #5684ca24; color: var(--text); }
.module-side-panel > button.active { background: linear-gradient(90deg,#087eee,#693cff); border-color: #6095ff30; box-shadow: 0 5px 20px #1f55db55; color: white; }
.module-side-panel button > i { align-items: center; color: #7c96bd; display: inline-flex; flex: 0 0 24px; height: 24px; justify-content: center; width: 24px; }
.module-side-panel button.active > i { color: white; }
.module-side-panel button > i svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 18px; }

main { grid-area: main; min-width: 0; }
:root {
  --app-page-gutter-x: 16px;
  --app-page-gutter-top: 16px;
  --app-page-gutter-bottom: 16px;
}
#content {
  max-width: none;
  padding: var(--app-page-gutter-top) var(--app-page-gutter-x) var(--app-page-gutter-bottom);
}

/* Group overview: keep the application shell and open the official site in place. */

/* Compact page identity: a small visual anchor with clear two-line hierarchy. */
.page-head,.products-page-head { align-items: center; gap: 11px; margin-bottom: 14px; min-height: 44px; padding: 2px 0; }
.page-head::before,.products-page-head::before { align-items: center; background: linear-gradient(145deg,#168cff22,#7c3cff20); border: 1px solid #5f82ff35; border-radius: 9px; color: #79aaff; content: '✦'; display: flex; flex: 0 0 36px; font-size: 15px; height: 36px; justify-content: center; }
.products-page-head::before { background: linear-gradient(145deg,#168cff1c,#22d3a615); border-color: #3e9eff35; color: #55a7ff; content: '◇'; }
.page-head > div,.products-page-head > div { align-items: flex-start; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.page-head h1,.products-page-head h1 { font-size: 18px; font-weight: 720; letter-spacing: -.01em; line-height: 1.25; margin: 0; white-space: nowrap; }
.page-head p,.products-page-head p { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 0; }
.mode-pill { flex-shrink: 0; font-size: 11px; margin-left: auto; padding: 5px 10px; }
.products-page-head > .primary { margin-left: auto; }
.products-page-head .primary { min-height: 36px; padding: 8px 14px; }
.card { box-shadow: 0 12px 36px #0000001a; }

.module-landing { margin: 0 auto; max-width: 1280px; }
.module-hero { align-items: center; background: linear-gradient(125deg,#168cff17,#7748ff18 62%,#ef63c212); border: 1px solid var(--line); border-radius: 16px; display: flex; justify-content: space-between; min-height: 220px; overflow: hidden; padding: 38px 42px; position: relative; }
.module-hero::after { background: radial-gradient(circle,#4d86ff38 0,transparent 67%); content: ''; height: 310px; position: absolute; right: -70px; top: -125px; width: 310px; }
.module-kicker { color: #67a8ff; font-size: 11px; font-weight: 750; letter-spacing: .16em; }
.module-hero h1 { font-size: 32px; margin: 8px 0 8px; }
.module-hero p { color: var(--muted); line-height: 1.8; margin: 0; max-width: 720px; }
.module-hero-mark { align-items: center; background: linear-gradient(135deg,#198dff,#7446ff 65%,#ed63bd); border: 8px solid #ffffff12; border-radius: 28px; box-shadow: 0 20px 60px #203cdf4d; color: white; display: flex; flex: 0 0 96px; font-size: 42px; font-weight: 800; height: 96px; justify-content: center; margin-left: 28px; position: relative; transform: rotate(5deg); z-index: 1; }
.module-overview-grid { display: grid; gap: 16px; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 18px; }
.module-overview-card { display: flex; flex-direction: column; min-height: 245px; }
.module-overview-card > div { flex: 1; }
.module-overview-card small { color: var(--green); font-size: 11px; }
.module-overview-card h2 { margin: 7px 0 8px; }
.module-overview-card p { color: var(--muted); line-height: 1.7; margin: 0; }
.module-card-icon { align-items: center; background: #7186a51a; border: 1px solid var(--line); border-radius: 10px; color: #8fa2bd; display: flex; font-size: 22px; height: 44px; justify-content: center; margin-bottom: 18px; width: 44px; }
.module-card-icon.product-icon { background: #168cff15; color: #4c9eff; }
.module-card-icon.ai-icon { background: #7546ff18; color: #a17cff; }
.module-overview-card .ghost { align-self: flex-start; margin-top: 20px; }
.module-overview-card.future { border-style: dashed; opacity: .8; }
.module-plan-tag { align-self: flex-start; background: var(--input); border-radius: 999px; color: var(--muted); font-size: 11px; margin-top: 20px; padding: 5px 10px; }

html[data-theme="light"] .module-tabs button.active { background: linear-gradient(180deg,transparent,#168cff0b); }
html[data-theme="light"] .module-hero { box-shadow: 0 14px 50px #3156860c; }

/* Shared editing dialog: clear labels, full-width fields and stable actions. */
.modal-backdrop > .modal { display: flex; flex-direction: column; max-height: 90dvh; overflow: hidden; }
.modal.product-modal { width: min(800px,100%); max-width: 800px; }
.modal .modal-head,.modal .modal-foot { flex-shrink: 0; background: var(--card1); }
.modal .modal-head { padding: 20px 24px; gap: 16px; }
.modal .modal-head h2 { font-size: 19px; line-height: 1.4; font-weight: 600; }
.modal .modal-head small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.modal .modal-head .close { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 7px; }
.modal .modal-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 24px; scrollbar-gutter: stable; }
.modal .field { margin-bottom: 20px; min-width: 0; }
.modal .field > label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.modal label small { font-size: 11px; font-weight: 400; color: var(--muted); }
.modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.modal textarea,.modal select { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; line-height: 1.6; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--input); }
.modal textarea { min-height: 240px; resize: vertical; }
.basic-product-modal .modal-head { border-bottom: 0; padding-bottom: 8px; }
.basic-product-modal #productNotes { min-height: 120px; height: 120px; }
.product-sale-row { display: grid; grid-template-columns: minmax(120px,1fr) minmax(0,3fr); gap: 16px; }
.sale-dates { display: flex; align-items: center; gap: 8px; }
.sale-dates > input { flex: 1; }
.sale-dates label { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; }
.sku-edit-row { display: grid; grid-template-columns: minmax(0,1fr) 14px minmax(0,1fr) 32px; align-items: center; gap: 10px; margin-bottom: 10px; }
.basic-product-modal .product-image-grid { grid-template-columns: repeat(auto-fill,96px); }
.basic-product-modal .product-image-grid > * { width: 96px; height: 96px; box-sizing: border-box; }
.product-modal .product-image-grid .product-image-upload { display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; min-width: 0; gap: 0; background: var(--card1); border: 1px dashed #c5cbd5; border-radius: 8px; transition: border-color .18s,background .18s; }
.product-modal .product-image-upload svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.required-field-title { display: inline-flex; align-items: center; gap: 4px; }
.required-star { color: #e05b6f; font-size: 13px; }
.product-image-upload svg { width: 32px; height: 32px; fill: none; stroke: #969ca5; stroke-width: 1.5; pointer-events: none; }
.product-image-grid .product-image-upload:hover,.product-image-grid .product-image-upload:focus-within { border-color: #779fed; background: rgba(119,159,237,.04); }
.product-image-upload input { height: 100%; cursor: pointer; }
.upload-help { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; }
@media(max-width:620px){.product-sale-row{grid-template-columns:1fr}.sale-dates{flex-wrap:wrap}}
.modal input:focus-visible,.modal textarea:focus-visible,.modal select:focus-visible { outline: 2px solid rgba(66,142,244,.22); outline-offset: 1px; border-color: #76a6ed; }
.modal .modal-foot { padding: 16px 24px; gap: 12px; }
.modal .modal-foot > button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 108px; min-width: 108px; height: 40px; min-height: 40px; margin: 0; padding: 0 14px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 500; line-height: 1; box-shadow: none; }
.product-modal .product-form-row.three { grid-template-columns: repeat(2,minmax(0,1fr)); }
.product-modal .product-editor-section-title { margin: 4px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.product-modal .product-selling-editor { grid-template-columns: minmax(0,1fr); padding: 18px; gap: 16px; background: rgba(92,144,214,.035); }
.product-modal .product-selling-editor label { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; gap: 8px; color: var(--text); font-size: 12px; font-weight: 500; }
.product-modal .product-selling-editor label:first-child { padding-right: 26px; box-sizing: border-box; }
.product-modal .product-selling-editor textarea { min-height: 240px; }
.product-modal .product-selling-editor > button { top: 12px; right: 12px; width: 26px; height: 26px; }
.product-modal .product-point-list { gap: 16px; }
.product-modal .product-patent-editor { grid-template-columns: minmax(0,1fr) 116px 26px; gap: 14px; padding: 16px; }
.product-modal .product-patent-editor-fields label { display: grid; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text); }
.product-modal .product-patent-image-upload { height: 130px; background: var(--card1); }
.product-modal .product-patent-image-upload span { font-size: 11px; }
.product-modal #productEfficacy,.product-modal #productTestDescription { min-height: 240px; }
.product-modal #productSkuVariants { min-height: 86px; }
.product-modal .ingredient-editor-row { padding: 18px; background: rgba(92,144,214,.035); }
@media (max-width: 620px) { .modal-backdrop { padding: 12px; }.modal .modal-head,.modal .modal-body,.modal .modal-foot { padding: 16px; }.product-modal .product-form-row.three { grid-template-columns: 1fr; }.product-modal .product-patent-editor { grid-template-columns: minmax(0,1fr); } }

@media (max-width: 1180px) {
  .topbar .brand { flex-basis: 188px; }
  .module-tabs button { min-width: 84px; padding: 0 12px; }
  .module-overview-grid { grid-template-columns: 1fr 1fr; }
  .page-head > div,.products-page-head > div { gap: 1px; }
}

/* Compact form language, shared by creation and editing dialogs. */
#modalRoot .modal { font-family: "Microsoft YaHei","PingFang SC",Arial,sans-serif; font-size: 13px; border-radius: 6px; box-shadow: 0 16px 60px rgba(20,30,50,.18); }
#modalRoot .product-modal { width: min(880px,100%); max-width: 880px; }
#modalRoot .modal-head { padding: 24px 28px 14px; border-bottom: 0; }
#modalRoot .modal-head h2 { font-size: 16px; font-weight: 600; line-height: 24px; }
#modalRoot .modal-head small { font-size: 11px; margin-top: 4px; }
#modalRoot .modal-head .close { background: transparent; border: 0; font-size: 20px; font-weight: 400; color: var(--muted); }
#modalRoot .modal-body { padding: 12px 28px 18px; }
#modalRoot .modal .field { margin-bottom: 16px; }
#modalRoot .modal .field > label { font-size: 12px; font-weight: 400; line-height: 20px; color: var(--muted); margin-bottom: 6px; }
#modalRoot .modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),#modalRoot .modal select { height: 34px; min-height: 34px; padding: 5px 10px; font-size: 13px; border-radius: 4px; background-color: var(--card1); }
#modalRoot .modal textarea { padding: 9px 10px; font-size: 13px; line-height: 1.75; border-radius: 4px; background-color: var(--card1); }
#modalRoot .modal input::placeholder,#modalRoot .modal textarea::placeholder { color: #a0a6af; opacity: 1; }
#modalRoot .modal select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%23979da7' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
#modalRoot .modal-foot { padding: 14px 28px 24px; border-top: 0; gap: 16px; }
#modalRoot .modal-foot > button { width: 96px; min-width: 96px; height: 34px; min-height: 34px; font-size: 13px; border-radius: 4px; }
#modalRoot .modal-foot > .primary { background: #7860ed; border: 1px solid #7860ed; color: #fff; }
#modalRoot .modal-foot > .ghost { background: var(--input); border: 1px solid transparent; color: var(--muted); }
#modalRoot .modal-foot > button:hover { filter: brightness(.97); }
#modalRoot .basic-product-modal .modal-body > .field { display: grid; grid-template-columns: 88px minmax(0,1fr); column-gap: 14px; align-items: start; }
#modalRoot .basic-product-modal .modal-body > .field > label { grid-column: 1; padding-top: 7px; flex-wrap: wrap; justify-content: flex-start; }
#modalRoot .basic-product-modal .modal-body > .field > :not(label) { grid-column: 2; }
#modalRoot .basic-product-modal .modal-body > .field > label > small { font-size: 10px; line-height: 1.5; }
#modalRoot .basic-product-modal .product-form-row,#modalRoot .basic-product-modal .product-sale-row { padding-left: 102px; gap: 18px; }
#modalRoot .basic-product-modal #addSkuRow { padding: 2px 0; min-height: 24px; font-size: 11px; color: #7860ed; border: 0; background: transparent; white-space: nowrap; }
#modalRoot .basic-product-modal #productNotes { height: 120px; min-height: 120px; }
#modalRoot .product-selling-editor,#modalRoot .ingredient-editor-row { background: transparent; border-radius: 6px; padding: 16px; }
#modalRoot .product-selling-editor label,#modalRoot .product-patent-editor-fields label { font-size: 12px; font-weight: 400; color: var(--muted); }
#modalRoot .product-patent-editor { background: transparent; border-radius: 6px; }
#modalRoot .selling-point-modal .product-selling-editor { padding: 6px 34px 18px 0; gap: 14px; border: 0; border-radius: 0; background: transparent; }
#modalRoot .selling-point-modal .product-selling-editor + .product-selling-editor { border-top: 1px solid var(--line); padding-top: 22px; }
#modalRoot .selling-point-modal .product-selling-editor > button { border: 0; background: transparent; color: var(--muted); top: 7px; right: 0; }
#modalRoot .selling-point-modal .product-selling-editor + .product-selling-editor > button { top: 23px; }
#modalRoot .selling-point-modal .product-selling-editor > button:hover { color: #e05b6f; background: rgba(224,91,111,.06); }
#modalRoot .selling-point-modal .product-point-list { gap: 4px; }
#modalRoot .selling-point-modal .modal-head h2 { font-size: 18px; line-height: 1.4; color: var(--text); font-weight: 600; }
#modalRoot .selling-point-modal .product-selling-editor label { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 8px; align-items: start; padding-right: 0; font-size: 14px; font-weight: 500; color: var(--text); }
#modalRoot .selling-point-modal .product-selling-editor label > span { display: flex; align-items: center; min-height: 38px; padding: 0; white-space: nowrap; }
#modalRoot .selling-point-modal .required-star { margin-right: 4px; color: #df5368; font-size: 14px; font-style: normal; font-weight: 600; }
#modalRoot .selling-point-modal .product-selling-editor input,
#modalRoot .selling-point-modal .product-selling-editor textarea { border-color: color-mix(in srgb, var(--line) 74%, var(--muted)); color: var(--text); background: color-mix(in srgb, var(--panel) 97%, var(--primary) 3%); font-size: 14px; font-weight: 400; }
#modalRoot .selling-point-modal .product-selling-editor input { height: 38px; }
#modalRoot .selling-point-modal .product-selling-editor textarea { height: 120px; min-height: 120px; line-height: 1.7; }
#modalRoot .selling-point-modal .product-selling-editor input::placeholder,
#modalRoot .selling-point-modal .product-selling-editor textarea::placeholder { color: color-mix(in srgb, var(--muted) 82%, var(--text)); opacity: 1; }
#modalRoot .selling-point-modal .product-selling-editor input:focus,
#modalRoot .selling-point-modal .product-selling-editor textarea:focus { border-color: color-mix(in srgb, var(--primary) 68%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent); }
#modalRoot .selling-point-modal .selling-point-add-row { display: flex; justify-content: flex-end; margin-top: 10px; }
#modalRoot .selling-point-modal #addProductPoint { padding: 5px 8px; background: transparent; border: 0; color: #7860ed; font-size: 12px; }
#modalRoot .basic-product-modal .sku-control-group { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 12px; }
#modalRoot .basic-product-modal .sku-control-group #addSkuRow { min-height: 34px; padding: 0 4px; }
#modalRoot .basic-product-modal .product-form-row,#modalRoot .basic-product-modal .product-sale-row { padding-left: 0; }
#modalRoot .basic-product-modal .product-sale-row { grid-template-columns: minmax(190px,1fr) minmax(0,2fr); }
#modalRoot .basic-product-modal .product-form-row > .field,#modalRoot .basic-product-modal .product-sale-row > .field { display: grid; grid-template-columns: 88px minmax(0,1fr); column-gap: 14px; align-items: start; }
#modalRoot .basic-product-modal .product-form-row > .field > label,#modalRoot .basic-product-modal .product-sale-row > .field > label { padding-top: 7px; margin-bottom: 0; }
#modalRoot .basic-product-modal .field > label:not(:has(.required-field-title)) { padding-left: 10px; box-sizing: border-box; }
#modalRoot .basic-product-modal .sale-dates { gap: 6px; min-width: 0; }
#modalRoot .basic-product-modal .modal-body > .field,#modalRoot .basic-product-modal .product-form-row > .field,#modalRoot .basic-product-modal .product-sale-row > .field { grid-template-columns: 82px minmax(0,1fr); column-gap: 8px; }
#modalRoot .basic-product-modal .combined-series-row { grid-template-columns: minmax(0,1fr); }
.product-series-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#modalRoot .basic-product-modal .sale-dates > input { width: 0; min-width: 0; }
@media(max-width:620px){#modalRoot .basic-product-modal .modal-body > .field{display:block}#modalRoot .basic-product-modal .product-form-row,#modalRoot .basic-product-modal .product-sale-row{padding-left:0}#modalRoot .modal-head,#modalRoot .modal-body,#modalRoot .modal-foot{padding-left:16px;padding-right:16px}}

/* Unified dialog language: extends the approved selling-point editor across all dialogs. */
#modalRoot .modal {
  --dialog-label: color-mix(in srgb,var(--text) 88%,var(--muted));
  --dialog-placeholder: color-mix(in srgb,var(--muted) 82%,var(--text));
  --dialog-control-border: color-mix(in srgb,var(--line) 74%,var(--muted));
  border-radius: 10px;
  color: var(--text);
}
#modalRoot .modal-head { padding: 22px 28px 14px; }
#modalRoot .modal-head h2 { color: var(--text); font-size: 18px; font-weight: 600; line-height: 1.4; }
#modalRoot .modal-head small { margin-top: 5px; color: color-mix(in srgb,var(--muted) 88%,var(--text)); font-size: 13px; line-height: 1.6; }
#modalRoot .modal-head .close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; color: color-mix(in srgb,var(--muted) 88%,var(--text)); transition: background .18s,color .18s; }
#modalRoot .modal-head .close:hover { color: var(--text); background: color-mix(in srgb,var(--input) 84%,var(--line)); }
#modalRoot .modal-body { padding: 14px 28px 20px; }
#modalRoot .modal .field { margin-bottom: 18px; }
#modalRoot .modal .field > label { color: var(--dialog-label); font-size: 14px; font-weight: 500; line-height: 22px; }
#modalRoot .modal label small,#modalRoot .modal .field-help { color: color-mix(in srgb,var(--muted) 88%,var(--text)); font-size: 12px; line-height: 1.65; }
#modalRoot .modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#modalRoot .modal select {
  height: 38px;
  min-height: 38px;
  padding: 7px 11px;
  border-color: var(--dialog-control-border);
  border-radius: 6px;
  color: var(--text);
  background-color: color-mix(in srgb,var(--panel) 97%,var(--primary) 3%);
  font-size: 14px;
}
#modalRoot .modal textarea {
  min-height: 120px;
  padding: 10px 11px;
  border-color: var(--dialog-control-border);
  border-radius: 6px;
  color: var(--text);
  background-color: color-mix(in srgb,var(--panel) 97%,var(--primary) 3%);
  font-size: 14px;
  line-height: 1.7;
}
#modalRoot .modal input::placeholder,#modalRoot .modal textarea::placeholder { color: var(--dialog-placeholder); opacity: 1; }
#modalRoot .modal input:focus-visible,#modalRoot .modal textarea:focus-visible,#modalRoot .modal select:focus-visible { outline: 0; border-color: color-mix(in srgb,var(--primary) 68%,white); box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent); }
#modalRoot .modal .field:has(> input[required],> select[required],> textarea[required],> .ui-select > select[required]) > label:not(:has(.required-field-title))::before { content: "*"; margin-right: 4px; color: #df5368; font-size: 14px; font-weight: 600; }
#modalRoot .modal-foot { padding: 14px 28px 24px; gap: 12px; }
#modalRoot .modal-foot > button { width: 104px; min-width: 104px; height: 38px; min-height: 38px; border-radius: 6px; font-size: 14px; font-weight: 500; }
#modalRoot .modal-foot > .ghost { border-color: color-mix(in srgb,var(--line) 88%,transparent); color: var(--dialog-label); background: color-mix(in srgb,var(--input) 72%,var(--card1)); }
#modalRoot .modal-foot > .primary { border-color: #7860ed; background: #7860ed; }
#modalRoot .filing-modal { max-width: 660px; width: min(660px,100%); }
#modalRoot .filing-modal .modal-body { padding-top: 18px; }
#modalRoot .filing-modal .field { align-items: start; display: grid; gap: 12px; grid-template-columns: 176px minmax(0,1fr); }
#modalRoot .filing-modal .field > label { align-items: center; box-sizing: border-box; display: flex; justify-content: flex-start; margin: 0; min-height: 38px; padding-left: 14px; position: relative; white-space: nowrap; }
#modalRoot .filing-modal select:invalid { color: var(--dialog-placeholder); }
#modalRoot .filing-modal .field:has(> input[required],> select[required],> textarea[required],> .ui-select > select[required]) > label::before { left: 0; margin-right: 0; position: absolute; top: 50%; transform: translateY(-50%); }
#modalRoot .filing-modal .filing-efficacy-help { grid-column: 2; color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: -6px; }
@media(max-width:760px){.product-filing-list{grid-template-areas:"approval" "special" "name" "efficacy";grid-template-columns:1fr}}
@media(max-width:620px){#modalRoot .filing-modal .field{grid-template-columns:1fr;gap:6px}#modalRoot .filing-modal .field > label{min-height:auto}#modalRoot .filing-modal .filing-efficacy-help{grid-column:1}}

/* Product create/edit keeps its compact left-label structure, with stronger hierarchy. */
#modalRoot .basic-product-modal .modal-body > .field,
#modalRoot .basic-product-modal .product-form-row > .field,
#modalRoot .basic-product-modal .product-sale-row > .field { grid-template-columns: 92px minmax(0,1fr); column-gap: 10px; }
#modalRoot .basic-product-modal .modal-body > .field > label,
#modalRoot .basic-product-modal .product-form-row > .field > label,
#modalRoot .basic-product-modal .product-sale-row > .field > label { min-height: 38px; padding-top: 0; align-items: center; color: var(--dialog-label); font-size: 14px; font-weight: 500; }
#modalRoot .basic-product-modal .field > label:not(:has(.required-field-title)) { padding-left: 12px; }
#modalRoot .basic-product-modal .sku-control-group #addSkuRow { min-height: 38px; color: #6f55e8; font-size: 13px; font-weight: 500; }
#modalRoot .basic-product-modal #productNotes { height: 96px; min-height: 96px; }
#modalRoot .basic-product-modal .upload-help { color: color-mix(in srgb,var(--muted) 88%,var(--text)); font-size: 13px; }
#modalRoot .basic-product-modal .sale-dates label { color: var(--dialog-label); font-size: 13px; font-weight: 500; }

/* Product information editors use whitespace and separators instead of nested boxes. */
#modalRoot .product-modal:not(.basic-product-modal) .product-editor-section-title { border-bottom-color: color-mix(in srgb,var(--line) 72%,transparent); }
#modalRoot .product-modal .modal-head small { display: none; }
#modalRoot .product-modal:not(.basic-product-modal) .product-editor-section-title b,
#modalRoot .ingredient-editor-head b { color: var(--text); font-size: 15px; font-weight: 600; }
#modalRoot .product-modal:not(.basic-product-modal) #productEfficacy,
#modalRoot .product-modal:not(.basic-product-modal) #productTestDescription { min-height: 150px; }
#modalRoot .product-modal .product-editor-section-title button,
#modalRoot .product-modal .selling-point-add-row button { color: #6f55e8; font-size: 13px; font-weight: 500; }
#modalRoot .simple-content-modal { max-width: 880px; width: min(880px,100%); }
#modalRoot .simple-content-modal .modal-body { padding-top: 22px; }
#modalRoot .simple-content-modal .modal-body > .field { align-items: start; column-gap: 10px; display: grid; grid-template-columns: 96px minmax(0,1fr); margin: 0; }
#modalRoot .simple-content-modal .modal-body > .field > label { box-sizing: border-box; color: var(--dialog-label); font-size: 14px; font-weight: 500; line-height: 38px; margin: 0; padding-left: 14px; white-space: nowrap; }
#modalRoot .simple-content-modal .modal-body > .field > textarea { height: 180px; min-height: 180px; resize: vertical; width: 100%; }
#modalRoot .simple-content-modal.tests-modal .modal-body > .field > textarea { height: 210px; min-height: 210px; }
@media(max-width:620px){#modalRoot .simple-content-modal .modal-body > .field{grid-template-columns:1fr;row-gap:6px}#modalRoot .simple-content-modal .modal-body > .field > label{line-height:1.5;padding-left:0}}
#modalRoot .ingredient-modal .modal-body { padding-top: 20px; }
#modalRoot .ingredient-modal .modal-body > .field { align-items: start; column-gap: 8px; display: grid; grid-template-columns: 82px minmax(0,1fr); padding-bottom: 20px; }
#modalRoot .ingredient-modal .modal-body > .field > label { color: var(--dialog-label); font-size: 14px; font-weight: 500; line-height: 38px; margin: 0; white-space: nowrap; }
#modalRoot .ingredient-modal .modal-body > .field > label,
#modalRoot .ingredient-form-row > label { box-sizing: border-box; padding-left: 14px; position: relative; }
#modalRoot .ingredient-modal .modal-body > .field:has(> textarea[required]) > label::before { left: 0; margin-right: 0; position: absolute; top: 0; }
#modalRoot .ingredient-modal #productIngredients { height: 92px; min-height: 92px; resize: vertical; }
#modalRoot .ingredient-editor-shell { display: block; padding-top: 2px; }
#modalRoot .ingredient-editor-head { align-items: center; border-bottom: 1px solid color-mix(in srgb,var(--line) 72%,transparent); display: flex; margin: 0 0 20px; min-height: 48px; }
#modalRoot .ingredient-editor-head b { font-size: 15px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
#modalRoot .ingredient-editor-list { min-width: 0; }
#modalRoot .ingredient-editor-row { background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0 36px 22px 0; position: relative; }
#modalRoot .ingredient-editor-row + .ingredient-editor-row { border-top: 1px solid color-mix(in srgb,var(--line) 72%,transparent); padding-top: 22px; }
#modalRoot .ingredient-form-row { align-items: start; column-gap: 8px; display: grid; grid-template-columns: 82px minmax(0,1fr); margin-bottom: 14px; }
#modalRoot .ingredient-form-row > label { color: var(--dialog-label); font-size: 13px; font-weight: 500; line-height: 38px; margin: 0; white-space: nowrap; }
#modalRoot .ingredient-form-row input,#modalRoot .ingredient-form-row textarea { min-width: 0; width: 100%; }
#modalRoot .ingredient-form-row textarea { min-height: 92px; resize: vertical; }
#modalRoot .ingredient-remove { align-items: center; background: transparent; border: 0; border-radius: 5px; color: var(--muted); cursor: pointer; display: inline-flex; font-size: 18px; height: 28px; justify-content: center; padding: 0; position: absolute; right: 0; top: 5px; width: 28px; }
#modalRoot .ingredient-editor-row + .ingredient-editor-row .ingredient-remove { top: 27px; }
#modalRoot .ingredient-remove:hover { background: rgba(224,91,111,.07); color: #e05b6f; }
#modalRoot .ingredient-image-row { margin-bottom: 0; }
#modalRoot .ingredient-image-field { display: grid; gap: 7px; justify-items: start; }
#modalRoot .ingredient-image-field > small { color: var(--dialog-placeholder); font-size: 12px; line-height: 1.5; }
#modalRoot .ingredient-image-control { display: inline-flex; position: relative; width: fit-content; }
#modalRoot .ingredient-image-upload { align-items: center; background: color-mix(in srgb,var(--panel) 98%,var(--primary) 2%); border: 1px dashed color-mix(in srgb,var(--dialog-control-border) 86%,var(--muted)); border-radius: 8px; cursor: pointer; display: inline-flex; height: 104px; justify-content: center; overflow: hidden; position: relative; transition: border-color .18s,background .18s; width: 104px; }
#modalRoot .ingredient-image-upload:hover,#modalRoot .ingredient-image-upload:focus-visible { background: color-mix(in srgb,var(--panel) 96%,var(--primary) 4%); border-color: color-mix(in srgb,var(--primary) 58%,var(--line)); outline: 0; }
#modalRoot .ingredient-image-upload svg { fill: none; height: 30px; stroke: #969ca5; stroke-linecap: round; stroke-width: 1.5; width: 30px; }
#modalRoot .ingredient-image-upload img { height: 100%; object-fit: contain; width: 100%; }
#modalRoot .ingredient-image-upload input { height: 1px; opacity: 0; pointer-events: none; position: absolute; width: 1px; }
#modalRoot .ingredient-image-clear { align-items: center; background: rgba(40,48,62,.88); border: 0; border-radius: 50%; color: #fff; cursor: pointer; display: inline-flex; font-size: 14px; height: 24px; justify-content: center; padding: 0; position: absolute; right: -8px; top: -8px; width: 24px; }
#modalRoot .ingredient-add-row { border-top: 1px solid color-mix(in srgb,var(--line) 72%,transparent); display: flex; justify-content: flex-end; padding-top: 14px; }
#modalRoot .ingredient-add-row button { background: transparent; border: 0; color: #6f55e8; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; padding: 6px 0; }
@media(max-width:680px){#modalRoot .ingredient-modal .modal-body > .field{grid-template-columns:1fr;row-gap:8px}#modalRoot .ingredient-form-row{grid-template-columns:1fr;row-gap:6px}#modalRoot .ingredient-form-row > label,#modalRoot .ingredient-editor-head b{line-height:1.5}}

/* Patent and attachment dialogs: clearer fields, lighter grouping. */
#modalRoot .product-patent-editor { padding: 18px 0 20px; border: 0; border-radius: 0; background: transparent; }
#modalRoot .product-patent-editor + .product-patent-editor { border-top: 1px solid color-mix(in srgb,var(--line) 72%,transparent); }
#modalRoot .product-patent-editor-fields label { gap: 8px; color: var(--dialog-label); font-size: 14px; font-weight: 500; }
#modalRoot .product-patent-image-upload { border-color: var(--dialog-control-border); border-radius: 6px; background: color-mix(in srgb,var(--panel) 97%,var(--primary) 3%); }
#modalRoot .product-patent-image-upload span { color: var(--dialog-placeholder); font-size: 12px; }
#modalRoot .patent-modal { max-width: 880px; width: min(880px,100%); }
#modalRoot .patent-modal .modal-body { padding-top: 20px; }
#modalRoot .patent-modal .product-patent-editor-list { display: block; }
#modalRoot .patent-modal .product-patent-editor { display: block; margin: 0; padding: 0 36px 22px 0; position: relative; }
#modalRoot .patent-modal .product-patent-editor + .product-patent-editor { padding-top: 22px; }
#modalRoot .patent-modal .product-patent-editor-fields { display: grid; gap: 14px; }
#modalRoot .patent-modal .product-patent-editor-fields > label,
#modalRoot .patent-modal .product-patent-image-field { align-items: start; column-gap: 8px; display: grid; grid-template-columns: 96px minmax(0,1fr); margin: 0; }
#modalRoot .patent-modal .product-patent-editor-fields > label > span,
#modalRoot .patent-modal .product-patent-image-field > span { box-sizing: border-box; color: var(--dialog-label); font-size: 14px; font-weight: 500; line-height: 38px; padding-left: 14px; white-space: nowrap; }
#modalRoot .patent-modal .product-patent-editor-fields input { min-width: 0; width: 100%; }
#modalRoot .patent-modal .product-patent-image-field > div { display: grid; gap: 7px; justify-items: start; }
#modalRoot .patent-modal .product-patent-image-control { display: inline-flex; position: relative; }
#modalRoot .patent-modal .product-patent-image-upload { align-items: center; background: color-mix(in srgb,var(--panel) 98%,var(--primary) 2%); border: 1px dashed color-mix(in srgb,var(--dialog-control-border) 86%,var(--muted)); border-radius: 8px; display: inline-flex; height: 112px; justify-content: center; overflow: hidden; width: 112px; }
#modalRoot .patent-modal .product-patent-image-upload:hover,#modalRoot .patent-modal .product-patent-image-upload:focus-within { background: color-mix(in srgb,var(--panel) 96%,var(--primary) 4%); border-color: color-mix(in srgb,var(--primary) 58%,var(--line)); }
#modalRoot .patent-modal .product-patent-image-upload svg { fill: none; height: 30px; stroke: #969ca5; stroke-linecap: round; stroke-width: 1.5; width: 30px; }
#modalRoot .patent-modal .product-patent-image-upload img { height: 100%; object-fit: contain; width: 100%; }
#modalRoot .patent-modal .product-patent-image-field small { color: var(--dialog-placeholder); font-size: 12px; line-height: 1.5; }
#modalRoot .patent-modal .product-patent-image-clear { align-items: center; background: rgba(40,48,62,.88); border: 0; border-radius: 50%; color: #fff; cursor: pointer; display: inline-flex; font-size: 14px; height: 24px; justify-content: center; padding: 0; position: absolute; right: -8px; top: -8px; width: 24px; }
#modalRoot .patent-modal .product-patent-remove { align-items: center; background: transparent; border: 0; border-radius: 5px; color: var(--muted); display: inline-flex; font-size: 18px; height: 28px; justify-content: center; padding: 0; position: absolute; right: 0; top: 5px; width: 28px; }
#modalRoot .patent-modal .product-patent-editor + .product-patent-editor .product-patent-remove { top: 27px; }
#modalRoot .patent-modal .product-patent-remove:hover { background: rgba(224,91,111,.07); color: #e05b6f; }
#modalRoot .patent-modal .patent-add-row { border-top: 1px solid color-mix(in srgb,var(--line) 72%,transparent); display: flex; justify-content: flex-end; padding-top: 14px; }
#modalRoot .patent-modal #addProductPatent { background: transparent; border: 0; color: #6f55e8; font-size: 13px; font-weight: 500; padding: 6px 0; }
@media(max-width:620px){#modalRoot .patent-modal .product-patent-editor-fields > label,#modalRoot .patent-modal .product-patent-image-field{grid-template-columns:1fr;row-gap:6px}#modalRoot .patent-modal .product-patent-editor-fields > label > span,#modalRoot .patent-modal .product-patent-image-field > span{line-height:1.5;padding-left:0}}
#modalRoot .attachment-modal { width: min(760px,100%); }
#modalRoot .attachment-modal .modal-body { display: grid; gap: 14px; padding-top: 16px; }
#modalRoot .attachment-modal .product-editor-section-title { margin: 0; padding: 0 0 10px; }
#modalRoot .product-attachment-upload { align-items: center; background: color-mix(in srgb,#398cff 4%,var(--panel)); border: 1px dashed color-mix(in srgb,#398cff 38%,var(--line)); border-radius: 10px; color: var(--text); display: flex; flex-direction: column; gap: 6px; justify-content: center; min-height: 142px; padding: 20px; text-align: center; transition: background .18s,border-color .18s,box-shadow .18s,transform .18s; }
#modalRoot .product-attachment-upload:hover,#modalRoot .product-attachment-upload.is-dragging { background: color-mix(in srgb,#398cff 9%,var(--panel)); border-color: #398cff; box-shadow: 0 0 0 4px rgba(57,140,255,.08); }
#modalRoot .product-attachment-upload.is-dragging { transform: translateY(-2px); }
#modalRoot .product-attachment-upload.is-uploading { cursor: progress; opacity: .78; }
#modalRoot .product-attachment-drop-icon { align-items: center; background: color-mix(in srgb,#398cff 10%,var(--panel)); border-radius: 10px; color: #398cff; display: flex; height: 42px; justify-content: center; margin-bottom: 2px; width: 42px; }
#modalRoot .product-attachment-drop-icon svg { fill: none; height: 21px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 21px; }
#modalRoot .product-attachment-upload strong { font-size: 14px; font-weight: 560; }
#modalRoot .product-attachment-upload em { color: #6f55e8; font-style: normal; }
#modalRoot .product-attachment-upload small { color: var(--muted); font-size: 11px; font-weight: 400; }
#modalRoot .product-attachment-editor-list { gap: 8px; max-height: 240px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
#modalRoot .product-attachment-editor { align-items: center; background: color-mix(in srgb,var(--panel) 98%,var(--primary) 2%); border: 1px solid color-mix(in srgb,var(--line) 70%,transparent); border-radius: 8px; display: grid; gap: 11px; grid-template-columns: 36px minmax(0,1fr) 28px; min-height: 54px; padding: 8px 10px; }
#modalRoot .product-attachment-editor .product-attachment-type { border-radius: 7px; font-size: 12px; height: 36px; width: 36px; }
#modalRoot .product-attachment-editor .product-attachment-type.powerpoint { background: linear-gradient(135deg,#ff8b52,#ed5b3f); }
#modalRoot .product-attachment-editor .product-attachment-type.word { background: linear-gradient(135deg,#4a91ff,#356bd4); }
#modalRoot .product-attachment-file { display: block; min-width: 0; }
#modalRoot .product-attachment-editor b { color: var(--text); display: block; font-size: 13px; font-weight: 520; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modalRoot .product-attachment-editor small { color: var(--muted); display: block; font-size: 10px; margin-top: 2px; }
#modalRoot .product-attachment-editor button { border-radius: 6px; height: 28px; transition: background .18s,color .18s; width: 28px; }
#modalRoot .product-attachment-editor button:hover { background: rgba(224,91,111,.08); color: #e05b6f; }
#modalRoot .product-attachment-empty { align-items: center; display: flex; flex-direction: column; gap: 3px; padding: 14px; }
#modalRoot .product-attachment-empty strong { color: var(--text); font-size: 12px; font-weight: 520; }
#modalRoot .product-attachment-empty span { color: var(--muted); font-size: 10px; }

/* Unified custom selects: replaces the browser-native popup across the app. */
.ui-select { display: block; min-width: 0; position: relative; width: 100%; }
.ui-select-native { height: 100% !important; inset: 0; opacity: 0; pointer-events: none; position: absolute !important; width: 100% !important; }
.ui-select-trigger { align-items: center; background: color-mix(in srgb,var(--panel) 97%,var(--primary) 3%); border: 1px solid color-mix(in srgb,var(--line) 74%,var(--muted)); border-radius: 7px; color: var(--text); cursor: pointer; display: flex; font-family: inherit; font-size: 14px; font-weight: 400; gap: 10px; height: 40px; justify-content: space-between; min-width: 0; padding: 0 11px 0 12px; text-align: left; transition: border-color .18s,box-shadow .18s,background .18s; width: 100%; }
.ui-select-trigger:hover { border-color: color-mix(in srgb,var(--primary) 38%,var(--line)); background: color-mix(in srgb,var(--panel) 95%,var(--primary) 5%); }
.ui-select.open .ui-select-trigger,.ui-select-trigger:focus-visible { border-color: color-mix(in srgb,var(--primary) 68%,white); box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent); outline: 0; }
.ui-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select.is-placeholder .ui-select-value { color: color-mix(in srgb,var(--muted) 82%,var(--text)); }
.ui-select-arrow { fill: none; flex: 0 0 auto; height: 18px; stroke: color-mix(in srgb,var(--muted) 86%,var(--text)); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transition: transform .18s; width: 18px; }
.ui-select.open .ui-select-arrow { transform: rotate(180deg); }
.ui-select.is-disabled { opacity: .58; }
.ui-select.is-disabled .ui-select-trigger { cursor: not-allowed; }
.ui-select-menu { background: var(--panel); border: 1px solid color-mix(in srgb,var(--line) 78%,var(--muted)); border-radius: 9px; box-shadow: 0 12px 34px rgba(23,37,61,.16),0 3px 10px rgba(23,37,61,.08); box-sizing: border-box; overscroll-behavior: contain; overflow-x: hidden; overflow-y: auto; padding: 6px; position: fixed; scrollbar-color: color-mix(in srgb,var(--muted) 35%,transparent) transparent; z-index: 5000; }
.ui-select-menu[hidden] { display: none !important; }
.ui-select-option { align-items: center; background: transparent; border: 0; border-radius: 6px; color: color-mix(in srgb,var(--text) 92%,var(--muted)); cursor: pointer; display: flex; font-family: inherit; font-size: 14px; font-weight: 400; justify-content: space-between; line-height: 1.45; min-height: 36px; padding: 7px 10px 7px 11px; text-align: left; width: 100%; }
.ui-select-option:hover,.ui-select-option:focus-visible { background: color-mix(in srgb,var(--primary) 8%,var(--panel)); color: var(--text); outline: 0; }
.ui-select-option.selected { background: color-mix(in srgb,var(--primary) 12%,var(--panel)); color: #684de2; font-weight: 500; }
.ui-select-option svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 17px; }
.ui-select-empty { color: var(--muted); font-size: 13px; padding: 10px 11px; text-align: center; }

/* Material collections: individual home cards, vertical playlist in detail. */
.material-detail-stage {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  max-height: min(650px,calc(100vh - 235px));
  min-height: 0;
  width: 100%;
}
.material-detail-stage.has-collection { gap: 14px; }
.material-collection-launch {
  align-self: stretch;
  display: flex;
  flex: 0 0 82px;
  justify-content: center;
  padding-top: 18px;
}
.material-collection-launch > button {
  align-items: center;
  align-self: flex-start;
  background: color-mix(in srgb,var(--primary) 5%,var(--card1));
  border: 1px solid color-mix(in srgb,var(--primary) 18%,var(--line));
  border-radius: 14px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 7px 12px;
  transition: border-color .18s,box-shadow .18s,transform .18s,background .18s;
  width: 76px;
}
.material-collection-launch > button:hover {
  background: color-mix(in srgb,var(--primary) 9%,var(--card1));
  border-color: color-mix(in srgb,var(--primary) 36%,var(--line));
  box-shadow: 0 8px 22px rgba(62,83,160,.1);
  transform: translateY(-1px);
}
.material-collection-launch-icon { align-items:center;background:linear-gradient(135deg,#258cf7,#7653f5);border-radius:10px;color:white;display:flex;height:34px;justify-content:center;width:34px; }
.material-collection-launch-icon svg { fill:none;height:20px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;width:20px; }
.material-collection-launch-icon svg path { fill:currentColor;stroke:none; }
.material-collection-launch b { font-size:13px;line-height:1.3;white-space:nowrap; }
.material-collection-launch small { color:var(--muted);font-size:10px;line-height:1.4;text-align:center; }
.material-collection-strip {
  align-self: stretch;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex: 0 0 78px;
  flex-direction: column;
  margin: 0;
  max-height: 100%;
  overflow: hidden;
  padding: 0;
}
.material-collection-items {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 4px 6px 4px 4px;
  scrollbar-width: none;
}
.material-collection-items::-webkit-scrollbar { display: none; }
.material-collection-strip button {
  aspect-ratio: 9 / 16;
  background: #edf1f6;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  cursor: pointer;
  flex: 0 0 auto;
  height: auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  transition: border-color .18s,box-shadow .18s,transform .18s;
  width: 64px;
}
.material-collection-strip button:hover { transform: translateY(-1px); }
.material-collection-strip button.active {
  border: 2px solid #7599eb;
  box-shadow: 0 0 0 2px rgba(82,130,224,.12),0 7px 16px rgba(55,72,163,.12);
  transform: translateY(-1px);
}
.material-collection-strip button.active::before {background:rgba(77,132,225,.05);content:'';inset:0;pointer-events:none;position:absolute;z-index:2}
.material-collection-strip video {
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  width: 100%;
}
.material-collection-view-button {
  aspect-ratio: auto !important;
  background: transparent;
  border: 0;
  color: #557fe8;
  cursor: pointer;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  height: auto !important;
  line-height: 1.4;
  margin: 7px 0 0;
  overflow: visible !important;
  padding: 5px 2px !important;
  position: static !important;
  transition: color .16s !important;
  width: 100% !important;
}
.material-collection-view-button:hover { color:#7658ec;transform:none !important;text-decoration:underline;text-underline-offset:3px; }
.material-collection-view-button:focus-visible { border-radius:6px;outline:2px solid rgba(85,127,232,.28);outline-offset:1px; }
.modal.material-collection-modal { max-width:1120px;width:min(1120px,94vw); }
.material-collection-modal .modal-body { background:color-mix(in srgb,var(--input) 52%,var(--card1));padding:22px 24px; }
.material-collection-modal-grid { display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(142px,1fr)); }
.material-collection-modal-card {
  aspect-ratio:9 / 16;
  background:#151821;
  border:2px solid transparent;
  border-radius:13px;
  box-shadow:0 5px 16px rgba(22,31,55,.08);
  cursor:pointer;
  min-width:0;
  overflow:hidden;
  padding:0;
  position:relative;
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.material-collection-modal-card:hover { box-shadow:0 10px 24px rgba(22,31,55,.16);transform:translateY(-2px); }
.material-collection-modal-card.selected { border-color:#5e82f2;box-shadow:0 0 0 3px rgba(94,130,242,.14),0 10px 24px rgba(22,31,55,.14); }
.material-collection-modal-card video { height:100%;object-fit:cover;width:100%; }
.material-collection-modal-check { align-items:center;background:rgba(255,255,255,.94);border:1px solid rgba(89,104,139,.25);border-radius:5px;display:flex;height:20px;justify-content:center;left:10px;position:absolute;top:10px;width:20px;z-index:3; }
.material-collection-modal-check svg { fill:none;height:14px;opacity:0;stroke:white;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.7;width:14px; }
.material-collection-modal-card.selected .material-collection-modal-check { background:#5e82f2;border-color:#5e82f2; }
.material-collection-modal-card.selected .material-collection-modal-check svg { opacity:1; }
.material-collection-modal-play { align-items:center;background:rgba(18,23,34,.48);border-radius:50%;color:white;display:flex;height:42px;justify-content:center;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .16s;width:42px;z-index:2; }
.material-collection-modal-play svg { fill:currentColor;height:20px;width:20px; }
.material-collection-modal-card.is-playing .material-collection-modal-play { opacity:0; }
.material-collection-modal-name { background:linear-gradient(transparent,rgba(8,11,18,.86));bottom:0;color:white;font-size:12px;font-weight:600;left:0;overflow:hidden;padding:38px 10px 11px;position:absolute;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%;z-index:2; }
.material-collection-modal-foot { align-items:center;gap:10px; }
.material-collection-modal-foot #collectionSelectedCount { color:var(--muted);font-size:13px;margin-right:auto; }
#modalRoot .material-collection-modal-foot > button { min-width:0;width:auto; }
#modalRoot .material-collection-modal-foot #copyCollectionToJianying { min-width:164px;padding-inline:18px; }
#modalRoot .ui-select-trigger { height: 38px; }
.product-pagination-controls label .ui-select { display: inline-block; margin: 0 6px; vertical-align: middle; width: 76px; }
.product-pagination-controls label .ui-select-trigger { font-size: 14px; height: 36px; justify-content: space-between; padding: 0 8px 0 10px; width: 100%; }

/* Configuration, picker and confirmation dialogs follow the same scale. */
#modalRoot #configForm { width: min(720px,100%); }
#modalRoot #configForm .field { display: grid; grid-template-columns: 108px minmax(0,1fr); column-gap: 12px; align-items: start; }
#modalRoot #configForm .field > label { grid-column: 1; min-height: 38px; margin: 0; align-items: center; justify-content: flex-start; }
#modalRoot #configForm .field > label small { display: none; }
#modalRoot #configForm .field > :not(label) { grid-column: 2; }
#modalRoot #configForm .field > small { margin-top: 6px; }
#modalRoot #configForm .field > label:has(input[type="checkbox"]) { grid-column: 2; }
#modalRoot #configForm .field > label:not(:has(input[type="checkbox"]))::after { content: "："; }
#modalRoot .library-picker-modal .field-help { margin: 0 0 16px; color: var(--dialog-label); font-size: 14px; }
#modalRoot .library-picker-card { border-radius: 8px; }
#modalRoot .modal[style*="440px"] .modal-body { color: var(--dialog-label); font-size: 14px; line-height: 1.75; }

@media(max-width:620px){
  #modalRoot #configForm .field { display:block; }
  #modalRoot #configForm .field > label { margin-bottom:7px; }
  #modalRoot .basic-product-modal .modal-body > .field,
  #modalRoot .basic-product-modal .product-form-row > .field,
  #modalRoot .basic-product-modal .product-sale-row > .field { display:block; }
  #modalRoot .basic-product-modal .field > label:not(:has(.required-field-title)) { padding-left:0; }
}

/* Global feedback stays visible above dialogs without obscuring form fields. */
#toast {
  top: 18px;
  right: auto;
  bottom: auto;
  left: 50%;
  max-width: min(520px,calc(100vw - 32px));
  padding: 10px 18px;
  transform: translate(-50%,-14px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: rgba(16,20,28,.78);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  color: #fff;
  text-align: center;
  backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: 60;
}
#toast.show { transform: translate(-50%,0); }

#modalRoot .basic-product-modal select:required:invalid { color: var(--dialog-placeholder); }
#modalRoot .basic-product-modal select option { color: var(--text); }

/* Filter result pages keep empty feedback centered in the available content area. */
.products-page.has-empty-results {
  display: grid;
  grid-template-rows: auto minmax(280px,1fr) auto;
  min-height: calc(100vh - 124px);
}
.product-board.is-empty,
.filter-result-region.is-empty {
  align-content: center;
  justify-items: center;
  min-height: 280px;
}
.product-board.is-empty .product-empty,
.filter-result-region.is-empty > .empty {
  align-self: center;
  margin: 0;
  padding: 28px 20px;
}
/* Content / material management */
.materials-content{padding:var(--app-page-gutter-top) var(--app-page-gutter-x) var(--app-page-gutter-bottom)!important;max-width:none!important}
.materials-page,.material-detail-page,.material-upload-page{width:100%;max-width:none;margin:0;color:var(--text)}
.materials-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:18px}
.materials-toolbar h1{margin:0 0 6px;font-size:24px;line-height:1.35;color:#11213b}.materials-toolbar p{margin:0;color:#76859a;font-size:15px}
.materials-toolbar .primary{min-width:122px;height:44px}
.material-filter-panel{margin-bottom:22px}.material-advanced-filter-row{align-items:center;min-height:56px}.material-advanced-controls{align-items:center;display:flex;flex:1;flex-wrap:wrap;gap:10px 18px;min-width:0}.material-advanced-controls>label{align-items:center;display:flex;gap:8px;min-width:0}.material-advanced-controls>label>span{color:var(--muted);font-size:12px;white-space:nowrap}.material-advanced-controls .ui-select{min-width:150px;width:170px}.material-advanced-controls .ui-select-trigger{min-height:36px}.material-inline-date>div{align-items:center;display:grid;gap:7px;grid-template-columns:142px auto 142px}.material-inline-date input{background:var(--input);border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;font-size:12px;height:36px;padding:0 10px}.material-inline-date input:focus{border-color:#438fff;box-shadow:0 0 0 3px rgba(42,133,255,.11);outline:0}.material-inline-date i{color:var(--muted);font-size:12px;font-style:normal}.material-filter-panel .product-filter-reset{align-self:center}
.material-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}.material-card{aspect-ratio:9/16;background:#0e1726;border:1px solid var(--line);border-radius:14px;cursor:pointer;isolation:isolate;outline:none;overflow:hidden;position:relative;box-shadow:0 8px 24px rgba(3,12,30,.07);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.material-card:hover,.material-card:focus-visible,.material-card.is-playing{transform:translateY(-2px);border-color:color-mix(in srgb,#6999df 24%,var(--line));box-shadow:0 13px 30px rgba(20,45,86,.12)}
.material-card-media{background:linear-gradient(145deg,color-mix(in srgb,var(--input) 88%,white),rgba(89,119,180,.08));inset:0;overflow:hidden;position:absolute;z-index:1}.material-card-media:after{background:linear-gradient(180deg,transparent 62%,rgba(5,13,27,.22));content:'';inset:0;pointer-events:none;position:absolute;transition:opacity .24s ease}.material-card-media video{background:var(--input);display:block;height:100%;object-fit:cover;object-position:center center;width:100%}.material-play-hint{align-items:center;background:rgba(20,31,49,.62);border:1px solid rgba(255,255,255,.16);border-radius:50%;color:#fff;display:flex;height:42px;justify-content:center;left:50%;position:absolute;top:32.5%;transform:translate(-50%,-50%);transition:opacity .22s ease,transform .22s ease;width:42px;z-index:2}.material-play-hint svg{fill:currentColor;height:18px;margin-left:2px;stroke:none;width:18px}.material-card:hover .material-card-media:after,.material-card:focus-visible .material-card-media:after,.material-card.is-playing .material-card-media:after,.material-card:hover .material-play-hint,.material-card:focus-visible .material-play-hint,.material-card.is-playing .material-play-hint{opacity:0}.material-media-empty{color:var(--muted);display:grid;height:100%;place-items:center}
.material-card-body{background:var(--card1);bottom:0;display:flex;flex-direction:column;height:35%;inset-inline:0;padding:14px 15px 13px;position:absolute;transition:opacity .24s ease,transform .28s cubic-bezier(.22,.8,.25,1);z-index:3}.material-card:hover .material-card-body,.material-card:focus-visible .material-card-body,.material-card.is-playing .material-card-body{opacity:0;pointer-events:none;transform:translateY(14px)}.material-card-body h3{color:var(--text);font-size:15px;line-height:1.45;margin:0 0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.material-card-tags{display:flex;gap:6px;min-height:25px;overflow:hidden}.material-card-tags span,.material-info-tags dd span{background:rgba(53,137,255,.09);border-radius:7px;color:#4c82cf;font-size:12px;max-width:110px;overflow:hidden;padding:3px 8px;text-overflow:ellipsis;white-space:nowrap}.material-card-tags .tag-more{background:var(--input);color:var(--muted);min-width:28px;text-align:center}.material-card-tags .tag-empty{background:transparent;color:var(--muted);padding-left:0}.material-card-meta{border-top:1px solid var(--line);color:var(--muted);display:flex;font-size:12px;gap:8px;justify-content:space-between;margin-top:auto;padding-top:10px}.material-card-meta span,.material-card-meta time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.material-card-meta span{max-width:52%}.material-result-count{margin-top:20px;text-align:right;color:var(--muted);font-size:14px}
.material-card-actions{backdrop-filter:blur(8px);background:rgba(7,15,28,.4);border:1px solid rgba(255,255,255,.16);border-radius:8px 0 0 8px;display:flex;flex-direction:column;opacity:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:50%;transform:translate(100%,-50%);transition:opacity .18s ease,transform .18s ease;z-index:6}.material-card:hover .material-card-actions,.material-card:focus-within .material-card-actions{opacity:1;pointer-events:auto;transform:translate(0,-50%)}.material-card-action{align-items:center;background:transparent;border:0;color:rgba(255,255,255,.94);cursor:pointer;display:inline-flex;height:36px;justify-content:center;padding:0;text-decoration:none;transition:background .15s ease,color .15s ease;width:34px}.material-card-action+.material-card-action{border-top:1px solid rgba(255,255,255,.13)}.material-card-action:hover{background:rgba(55,137,255,.62);color:#fff}.material-card-action:disabled{cursor:wait;opacity:.55}.material-card-action svg{fill:none;height:16px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;width:16px}@media(hover:none){.material-card-actions{opacity:1;pointer-events:auto;transform:translate(0,-50%)}}
.material-toolbar-actions{align-items:center;display:flex;flex:0 0 auto;gap:10px}.material-toolbar-actions button{white-space:nowrap}.material-batch-copy{align-items:center;display:inline-flex;gap:7px}.material-batch-copy[hidden]{display:none}.material-batch-copy svg{fill:none;height:17px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;width:17px}.material-select-box{align-items:center;background:rgba(255,255,255,.94);border:1px solid rgba(151,166,192,.55);border-radius:50%;box-shadow:0 3px 10px rgba(16,34,67,.18);color:transparent;cursor:pointer;display:flex;height:28px;justify-content:center;left:12px;opacity:0;padding:0;pointer-events:none;position:absolute;top:12px;transform:scale(.82);transition:opacity .18s ease,transform .18s ease,background .18s ease,border-color .18s ease;visibility:hidden;width:28px;z-index:9}.material-select-box svg{fill:none;height:16px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5;width:16px}.selection-mode .material-select-box{opacity:1;pointer-events:auto;transform:scale(1);visibility:visible}.material-select-box.selected{background:linear-gradient(135deg,#2d8cff,#7658f5);border-color:transparent;color:#fff}.selection-mode .material-card{cursor:pointer}.selection-mode .material-card.is-selected{border-color:rgba(75,119,244,.68);box-shadow:0 0 0 3px rgba(75,119,244,.13),0 12px 28px rgba(20,45,86,.12)}.selection-mode .material-card-actions{display:none}.selection-mode .material-card.is-selected:after{background:linear-gradient(180deg,rgba(63,113,245,.08),transparent 35%);content:'';inset:0;pointer-events:none;position:absolute;z-index:7}@media(max-width:1100px){.material-filter-panel .product-filter-top{align-items:stretch;flex-wrap:wrap}.material-toolbar-actions{justify-content:flex-end;width:100%}}@media(max-width:700px){.material-toolbar-actions{flex-wrap:wrap;justify-content:flex-start}.material-toolbar-actions button{flex:1 1 auto}}
.material-selection-bar{align-items:center;border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent);display:flex;gap:10px;justify-content:flex-end;margin-top:8px;min-height:43px;padding:11px 0 0}.material-selection-bar button{min-height:32px;padding:5px 16px;white-space:nowrap}.material-select-box{border-radius:5px;box-shadow:0 2px 6px rgba(16,34,67,.14);height:20px;left:10px;top:10px;width:20px}.material-select-box svg{height:12px;width:12px}.selection-mode .material-card.is-selected{border-color:rgba(75,119,244,.5);box-shadow:0 0 0 2px rgba(75,119,244,.1),0 10px 25px rgba(20,45,86,.1)}@media(max-width:700px){.material-selection-bar{justify-content:stretch}.material-selection-bar button{flex:1 1 auto}}
.material-empty-state{min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}.material-empty-state b{font-size:17px;color:var(--text)}.material-empty-state p{margin:8px 0 20px}.material-empty-icon{width:64px;height:64px;border-radius:18px;background:rgba(53,137,255,.09);display:grid;place-items:center;margin-bottom:16px}.material-empty-icon svg{width:30px;height:30px;fill:none;stroke:#5f82ef;stroke-width:1.7}.material-loading{min-height:360px;display:grid;place-items:center;color:var(--muted)}
.material-upload-page{max-width:1380px}.material-upload-shell{overflow:hidden;padding:0}.material-upload-header{padding:24px 30px 20px}.material-upload-header span{color:#478cf5;font-size:11px;font-weight:700;letter-spacing:.08em}.material-upload-header h1{font-size:23px;line-height:1.35;margin:5px 0 5px}.material-upload-header p{color:var(--muted);font-size:13px;margin:0}.material-upload-layout{border-top:1px solid var(--line);display:grid;gap:0;grid-template-columns:minmax(0,1fr) minmax(360px,440px);min-height:430px}.material-upload-form,.material-upload-panel{background:transparent;border-radius:0;box-shadow:none;padding:25px 30px}.material-upload-form{border-right:1px solid var(--line);display:block}.material-section-title{align-items:center;display:flex;justify-content:space-between;margin-bottom:26px}.material-section-title b{align-items:center;display:flex;font-size:16px;gap:9px}.material-section-title em{align-items:center;background:rgba(53,137,255,.1);border-radius:8px;color:#438fff;display:inline-flex;font-size:12px;font-style:normal;height:28px;justify-content:center;width:28px}.material-section-title small{color:var(--muted);font-size:11px}.standard-form-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:20px}.standard-form-row>label{position:relative;font-size:14px;color:var(--text);text-align:right}.standard-form-row.required>label:before{content:'*';color:#ef5968;margin-right:3px}.standard-form-row input,.standard-form-row select{height:44px}.material-upload-preview{background:color-mix(in srgb,var(--input) 74%,transparent);border:1px dashed color-mix(in srgb,#5894ef 36%,var(--line));border-radius:12px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;min-height:320px;overflow:hidden;transition:border-color .18s,background .18s}.material-upload-preview:hover,.material-upload-preview.dragging{background:rgba(65,139,255,.055);border-color:#5794ee}.material-upload-preview.has-file{cursor:default}.material-upload-placeholder{text-align:center;padding:34px 24px}.material-upload-placeholder>span{display:grid;place-items:center;width:58px;height:58px;border:1px dashed #aebdd2;border-radius:13px;margin:0 auto 17px;font-size:31px;font-weight:300;color:#8090a6}.material-upload-placeholder b{display:block;font-size:15px;color:var(--text)}.material-upload-placeholder p{margin:7px 0 20px;color:var(--muted);font-size:11px}.material-upload-placeholder .primary{min-height:38px;padding:8px 20px}.material-upload-preview video{background:#10141b;display:block;max-height:300px;object-fit:contain;width:100%}.material-file-summary{align-items:center;display:flex;justify-content:space-between;gap:14px;padding:14px 16px;width:100%}.material-file-summary span{display:grid;gap:3px;min-width:0}.material-file-summary b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.material-file-summary small{color:var(--muted);font-size:11px}.material-upload-footer{align-items:center;border-top:1px solid var(--line);display:flex;gap:12px;justify-content:flex-end;padding:17px 30px}.material-upload-footer button{min-height:42px;min-width:112px}
.material-detail-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(360px,.7fr);gap:22px}.material-detail-video,.material-info-panel{background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(54,91,150,.08)}.material-detail-video{padding:24px}.material-detail-player{height:min(68vh,720px);min-height:480px;background:#10141b;border-radius:12px;overflow:hidden;display:grid;place-items:center}.material-detail-player video{width:100%;height:100%;object-fit:contain}.material-detail-video>p{margin:12px 0 0;text-align:center;color:#8795a8;font-size:13px}.material-info-panel{padding:28px 30px;display:flex;flex-direction:column}.material-info-panel h2{margin:0 0 22px;font-size:20px}.material-info-panel dl{margin:0;display:grid;gap:0}.material-info-panel dl>div{padding:17px 0;border-bottom:1px solid #edf1f6}.material-info-panel dt{font-size:13px;color:#8593a6;margin-bottom:7px}.material-info-panel dd{margin:0;color:#1c2c44;font-size:15px;line-height:1.55;font-weight:600;word-break:break-word}.material-info-tags dd{display:flex;flex-wrap:wrap;gap:7px}.material-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:26px}.material-detail-actions>*{min-height:43px;display:flex;align-items:center;justify-content:center;text-decoration:none;border-radius:9px}.danger-text{color:#df5b68!important}.secondary-primary{background:linear-gradient(135deg,#665ff0,#8a55ec)!important}
.material-edit-modal{width:min(760px,calc(100vw - 36px))!important}.material-edit-modal .modal-body{padding:28px 32px 8px}.material-edit-modal .standard-form-row{grid-template-columns:120px minmax(0,1fr)}

/* Material board: lightweight product-style filters */
.material-tag-filter-row{align-items:flex-start}.material-tag-tabs{align-items:center;display:flex;flex:1;flex-wrap:wrap;gap:6px 12px}.material-tag-tabs button{border-radius:7px;font-size:13px;min-height:32px;padding:5px 12px}.material-meta-filter-row{align-items:center;min-height:58px}.material-meta-controls{align-items:center;display:flex;flex:1;flex-wrap:wrap;gap:10px 24px;min-width:0}.material-meta-controls>label{align-items:center;display:flex;gap:9px;min-width:0}.material-meta-controls>label>span{color:#8a98aa;font-size:12px;white-space:nowrap}.material-meta-controls .ui-select{min-width:148px;width:168px}.material-meta-controls .ui-select-trigger{font-size:12px;font-weight:400;min-height:36px;padding:7px 11px}.material-meta-controls .ui-select-value{color:#718096;font-size:12px;font-weight:400}.material-meta-controls .material-inline-date{display:flex}.material-meta-controls .material-inline-date>div{grid-template-columns:142px auto 142px}.material-meta-filter-row .product-filter-reset{margin-left:auto}.ui-select-option{font-size:13px;font-weight:400}.ui-select-option:not(.selected){color:#69788e}

/* Reference-aligned material upload page */
.material-upload-page{max-width:none}.material-upload-title{align-items:center;display:flex;gap:10px;margin:2px 0 16px}.material-upload-title i{background:#4f8df7;border-radius:50%;height:8px;width:8px}.material-upload-title h1{color:var(--text);font-size:20px;margin:0}.material-upload-reference-layout{display:grid;gap:18px;grid-template-columns:minmax(620px,1fr) minmax(360px,470px);align-items:stretch}.material-upload-reference-layout>.card{border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(36,72,130,.06)}.material-upload-reference-layout .material-upload-form{border-right:0;padding:34px 40px 30px}.material-upload-reference-layout .material-upload-panel{padding:28px;display:flex}.material-reference-row{align-items:flex-start;display:grid;gap:14px;grid-template-columns:92px minmax(0,1fr);margin-bottom:22px}.material-reference-row>label{color:#69788c;font-size:13px;line-height:42px;position:relative;text-align:right;white-space:nowrap}.material-reference-row.required>label:before{color:#ed5665;content:'*';margin-right:4px}.material-radio-group{align-items:center;display:flex;flex-wrap:wrap;gap:24px;min-height:42px}.material-radio-group label{align-items:center;color:#536278;cursor:pointer;display:inline-flex;font-size:13px;gap:7px}.material-radio-group input{accent-color:#6d5cf4;height:15px;margin:0;width:15px}.material-name-control,.material-script-control{display:grid;gap:10px}.material-name-control>input{height:40px;max-width:520px}.material-product-pair{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.material-product-pair .ui-select-trigger,.material-authorization-control .ui-select-trigger{font-size:12px;font-weight:400;height:40px;min-height:40px}.material-product-pair .ui-select-value,.material-authorization-control .ui-select-value{color:#718096;font-size:12px;font-weight:400}.material-upload-tags{align-items:center;display:flex;flex-wrap:wrap;gap:7px;min-height:42px}.material-upload-tags>span{align-items:center;background:rgba(68,137,247,.1);border:1px solid rgba(68,137,247,.15);border-radius:7px;color:#4e7fc8;display:inline-flex;font-size:12px;gap:5px;padding:6px 8px}.material-upload-tags>span button{background:transparent;border:0;color:#7f94b1;cursor:pointer;font-size:14px;padding:0}.material-add-tag,.material-expand-config{background:transparent;border:0;color:#6d5cf4;cursor:pointer;font-size:12px;padding:6px 0}.material-tag-entry{align-items:center;display:flex;gap:6px}.material-tag-entry[hidden]{display:none}.material-tag-entry input{height:34px;width:145px}.material-tag-entry button{background:#6d5cf4;border:0;border-radius:6px;color:white;cursor:pointer;height:34px;padding:0 12px}.material-script-control .material-product-pair{max-width:620px}.material-script-control>p{color:#9aa6b6;font-size:11px;margin:0}.material-protection-control{align-items:center;display:flex;gap:9px;min-height:42px}.material-protection-control input{height:40px;max-width:240px}.material-protection-control span{color:#8492a4;font-size:12px}.material-authorization-control{align-items:center;display:grid;gap:10px;grid-template-columns:minmax(260px,520px) auto}.material-authorization-control .ghost{font-size:12px;min-height:40px;white-space:nowrap}.material-upload-form-actions{display:flex;gap:12px;margin:40px 0 0 106px}.material-upload-form-actions button{height:42px;min-width:150px}.material-upload-reference-layout .material-upload-preview{flex:1;min-height:390px}.material-upload-placeholder strong{color:#695bf0;font-weight:600}.material-upload-file-list{display:grid;gap:10px;max-height:440px;overflow:auto;padding:14px}.material-upload-file{align-items:center;background:color-mix(in srgb,var(--input) 82%,transparent);border:1px solid var(--line);border-radius:10px;display:grid;gap:12px;grid-template-columns:74px minmax(0,1fr) 28px;padding:9px}.material-upload-file video{border-radius:7px;height:58px;object-fit:cover;width:74px}.material-upload-file span{display:grid;gap:4px;min-width:0}.material-upload-file b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.material-upload-file small{color:var(--muted);font-size:11px}.material-upload-file>button{background:transparent;border:0;color:#8b98a9;cursor:pointer;font-size:20px}.material-upload-file>button{background:transparent;border:0;color:#8b98a9;cursor:pointer;font-size:20px}.material-choose-more{align-self:center;margin:2px 14px 14px;min-height:38px}.material-authorization-modal{width:min(680px,calc(100vw - 36px))!important}
@media(max-width:1160px){.material-meta-controls{display:grid;grid-template-columns:auto 1fr}.material-inline-date{grid-column:2}.material-upload-reference-layout,.material-detail-layout{grid-template-columns:1fr}.material-upload-reference-layout .material-upload-preview{min-height:300px}.material-detail-player{min-height:420px}}
@media(max-width:760px){.materials-content{padding:18px!important}.material-tag-filter-row,.material-meta-filter-row{align-items:flex-start}.material-meta-controls{grid-template-columns:1fr}.material-meta-controls>label{align-items:flex-start;flex-direction:column}.material-meta-controls .ui-select{width:100%}.material-meta-controls .material-inline-date{grid-column:auto}.material-inline-date>div{grid-template-columns:1fr auto 1fr;width:100%}.material-reference-row{grid-template-columns:1fr}.material-reference-row>label{text-align:left;line-height:1}.material-product-pair,.material-authorization-control{grid-template-columns:1fr}.material-upload-reference-layout .material-upload-form,.material-upload-reference-layout .material-upload-panel{padding:22px 20px}.material-upload-form-actions{margin-left:0}.material-detail-player{min-height:360px}.materials-toolbar{align-items:center}}

/* Material upload: compact, reference-aligned layout */
.material-upload-page{max-width:none}.material-upload-title{gap:8px;margin:0 0 12px 2px}.material-upload-title i{height:6px;width:6px}.material-upload-title h1{font-size:17px;line-height:1.35;font-weight:700}.material-upload-reference-layout{align-items:start;gap:16px;grid-template-columns:minmax(620px,1fr) minmax(360px,420px)}.material-upload-reference-layout>.card{border-radius:12px;box-shadow:0 8px 24px rgba(36,72,130,.055)}.material-upload-reference-layout .material-upload-form{padding:26px 34px 24px}.material-reference-row{gap:12px;grid-template-columns:94px minmax(0,1fr);margin-bottom:14px}.material-reference-row>label{font-size:13px;line-height:40px}.material-radio-group{gap:22px;min-height:40px}.material-radio-group label{font-size:13px;gap:6px}.material-name-control{gap:8px}.material-name-control>input:not([hidden]){background:var(--card1);border:1px solid var(--line);border-radius:8px;color:var(--text);display:block;font:inherit;font-size:13px;height:40px;max-width:520px;outline:none;padding:0 12px;width:100%}.material-name-control>input:not([hidden]):focus{border-color:#438fff;box-shadow:0 0 0 3px rgba(42,133,255,.11)}.material-name-control>input::placeholder{color:#9aa6b6}.material-product-pair{gap:10px}.material-product-pair .ui-select-trigger{border-radius:8px}.material-upload-tags{min-height:40px}.material-protection-control{min-height:40px}.material-protection-control input{border-radius:8px;height:40px}.material-upload-form-actions{gap:10px;margin:22px 0 0 106px}.material-upload-form-actions button{height:40px;min-width:104px;padding:9px 20px}.material-upload-form-actions .primary{min-width:118px}.material-upload-reference-layout .material-upload-panel{align-self:start;display:flex;padding:18px}.material-upload-reference-layout .material-upload-preview{background:color-mix(in srgb,var(--input) 62%,transparent);border-color:color-mix(in srgb,#5794ee 34%,var(--line));border-radius:11px;flex:1;min-height:480px;width:100%}.material-upload-placeholder{padding:36px 28px}.material-upload-placeholder>span.material-upload-drop-icon{background:color-mix(in srgb,#5c8ff1 6%,var(--card1));border:1px dashed #aebdd2;border-radius:12px;color:#7b8ba1;height:58px;margin-bottom:18px;width:58px}.material-upload-drop-icon svg{fill:none;height:26px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6;width:26px}.material-upload-placeholder b{font-size:14px;font-weight:600}.material-upload-placeholder b strong{color:#695bf0}.material-upload-placeholder p{font-size:11px;line-height:1.6;margin:7px auto 19px;max-width:310px}.material-upload-placeholder .primary{font-size:13px;min-height:38px;padding:8px 22px}.material-upload-preview.has-file{min-height:480px}.material-upload-file-list{max-height:404px}.material-choose-more{font-size:12px}.material-upload-reference-layout select,.material-upload-reference-layout input{transition:border-color .18s,box-shadow .18s,background .18s}
@media(max-width:1160px){.material-upload-reference-layout{grid-template-columns:1fr}.material-upload-reference-layout .material-upload-panel{width:100%}.material-upload-reference-layout .material-upload-preview{min-height:320px}}
@media(max-width:760px){.material-upload-reference-layout .material-upload-form,.material-upload-reference-layout .material-upload-panel{padding:20px}.material-reference-row{grid-template-columns:1fr;margin-bottom:18px}.material-reference-row>label{line-height:1.2;text-align:left}.material-upload-form-actions{margin-left:0}.material-upload-reference-layout .material-upload-preview{min-height:300px}}

/* Material upload: full-height cards and refined compact controls */
.material-upload-reference-layout{align-items:stretch;min-height:calc(100vh - 123px)}.material-upload-reference-layout>.card{background:var(--card1)!important;background-image:none!important;height:100%;min-height:0}.material-upload-reference-layout .material-upload-form{align-self:stretch}.material-upload-reference-layout .material-upload-panel{align-self:stretch;background:var(--card1)!important}.material-upload-reference-layout .material-upload-preview{background:var(--input);height:100%;min-height:0}.material-product-pair{grid-template-columns:minmax(180px,220px) minmax(220px,280px);max-width:510px;width:100%}.material-product-pair>.ui-select,.material-product-pair>select{min-width:0;width:100%}.material-protection-control{gap:10px}.material-protection-control input{appearance:auto;background:var(--card1);border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;font-size:13px;height:40px;outline:none;padding:0 11px;width:168px}.material-protection-control input:hover{border-color:#b8c7dc}.material-protection-control input:focus{border-color:#438fff;box-shadow:0 0 0 3px rgba(42,133,255,.11)}.material-protection-control span{background:rgba(67,143,255,.08);border:1px solid rgba(67,143,255,.12);border-radius:999px;color:#7388a5;font-size:11px;line-height:1;padding:6px 9px}.material-upload-reference-layout .material-upload-preview:hover,.material-upload-reference-layout .material-upload-preview.dragging{background:color-mix(in srgb,var(--input) 92%,#edf4ff)}
@media(max-width:1160px){.material-upload-reference-layout{min-height:auto}.material-upload-reference-layout>.card{height:auto}.material-upload-reference-layout .material-upload-preview{height:auto;min-height:320px}.material-product-pair{grid-template-columns:minmax(180px,220px) minmax(220px,280px)}}
@media(max-width:760px){.material-product-pair{grid-template-columns:1fr;max-width:none}.material-upload-reference-layout .material-upload-preview{min-height:300px}}

/* Selected material files: show stable file identity instead of cropped video frames. */
.material-upload-file {
  gap: 11px;
  grid-template-columns: 40px minmax(0,1fr) 28px;
  padding: 10px 11px;
}
.material-upload-file-icon {
  align-items: center;
  background: rgba(68,137,247,.1);
  border: 1px solid rgba(68,137,247,.16);
  border-radius: 8px;
  color: #5b88d8;
  display: flex !important;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.material-upload-file-icon svg {
  fill: none;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 21px;
}
.material-upload-file > span:not(.material-upload-file-icon) {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* Material filters: keep every row on one visual rhythm. */
.material-filter-panel {
  gap: 0;
  padding-bottom: 16px;
}
.material-filter-panel .product-filter-top {
  padding-bottom: 10px;
}
.material-filter-panel .product-filter-row {
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 6px 0;
}
.material-filter-panel .product-filter-label {
  align-self: center;
  line-height: 32px;
}
.material-filter-panel .product-filter-tabs,
.material-filter-panel .material-tag-tabs {
  align-items: center;
  min-height: 32px;
  row-gap: 6px;
}
.material-filter-panel .product-filter-tabs button,
.material-filter-panel .material-tag-tabs button {
  height: 32px;
  line-height: 20px;
  min-height: 32px;
  padding-bottom: 5px;
  padding-top: 5px;
}
.material-filter-panel .material-tag-filter-row {
  align-items: center;
}
.material-filter-panel .material-meta-filter-row {
  min-height: 46px;
  padding-bottom: 4px;
  padding-top: 6px;
}
.material-filter-panel .material-meta-controls {
  gap: 10px 20px;
}
.material-filter-panel .material-uploader-control .ui-select {
  height: 34px;
  min-width: 148px;
  width: 168px;
}
.material-filter-panel .material-uploader-control .ui-select-trigger {
  border-radius: 8px;
  font-size: 12px;
  height: 34px;
  min-height: 34px;
  padding: 0 9px 0 11px;
}
.material-filter-panel .material-uploader-control .ui-select-arrow {
  height: 16px;
  width: 16px;
}
.material-filter-panel .material-inline-date input {
  height: 34px;
}

@media (max-width: 760px) {
  .material-filter-panel .product-filter-row,
  .material-filter-panel .material-tag-filter-row,
  .material-filter-panel .material-meta-filter-row {
    align-items: flex-start;
  }
  .material-filter-panel .product-filter-label {
    align-self: flex-start;
  }
  .material-filter-panel .material-uploader-control .ui-select {
    width: 100%;
  }
}

/* Material detail: vertical preview with an open, reference-style information panel. */
.material-detail-layout {
  align-items: stretch;
  background: var(--card1);
  border: 1px solid color-mix(in srgb,var(--line) 86%,transparent);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(36,72,130,.065);
  display: grid;
  gap: clamp(24px,2vw,36px);
  grid-template-columns: minmax(430px,460px) minmax(0,1fr);
  min-height: min(760px,calc(100vh - 166px));
  overflow: hidden;
  padding: 28px clamp(32px,4vw,70px);
}
.material-detail-video {
  align-items: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0;
}
.material-detail-device {
  aspect-ratio: 9 / 18;
  background: #050608;
  border: 8px solid #050608;
  border-radius: 32px;
  box-shadow: 0 20px 48px rgba(10,18,32,.25),0 0 0 1px rgba(255,255,255,.08) inset;
  max-height: min(650px,calc(100vh - 235px));
  overflow: hidden;
  position: relative;
  width: auto;
}
.material-detail-device::before {
  background: #050608;
  border-radius: 0 0 13px 13px;
  content: '';
  height: 17px;
  left: 50%;
  position: absolute;
  top: -1px;
  transform: translateX(-50%);
  width: 35%;
  z-index: 3;
}
.material-detail-player {
  background: #0e131b;
  border-radius: 21px;
  display: block;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.material-detail-player video {
  background: #0e131b;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.douyin-preview-ui {
  color: #fff;
  cursor: pointer;
  font-family: "Microsoft YaHei",Arial,sans-serif;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  text-shadow: 0 1px 3px rgba(0,0,0,.62);
  z-index: 2;
}
.douyin-status {
  align-items: center;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  left: 22px;
  opacity: .96;
  position: absolute;
  right: 19px;
  top: 13px;
}
.douyin-status > b {align-items:center;display:flex;font-size:13px;font-weight:700;gap:3px;letter-spacing:.01em}
.douyin-muted {display:inline-block;font-size:10px;font-style:normal;opacity:.9;transform:rotate(-35deg)}
.douyin-system-icons {align-items:center;display:flex;gap:5px;text-shadow:none}
.douyin-cellular {align-items:flex-end;display:flex;gap:1.5px;height:12px;width:16px}
.douyin-cellular > i {background:#fff;border-radius:1px;display:block;width:2.5px}
.douyin-cellular > i:nth-child(1){height:4px}.douyin-cellular > i:nth-child(2){height:6.5px}.douyin-cellular > i:nth-child(3){height:9px}.douyin-cellular > i:nth-child(4){height:12px}
.douyin-wifi {fill:none;height:14px;stroke:#fff;stroke-linecap:round;stroke-width:2.2;width:16px}
.douyin-battery {align-items:center;background:#fff;border-radius:4px;color:#20242a;display:flex;font-family:Arial,sans-serif;font-size:8px;font-style:normal;font-weight:700;height:13px;justify-content:center;letter-spacing:-.02em;position:relative;text-shadow:none;width:23px}
.douyin-battery::after {background:#fff;border-radius:0 2px 2px 0;content:'';height:6px;position:absolute;right:-3px;top:3.5px;width:2px}
.douyin-top-nav {
  align-items: center;
  display: flex;
  gap: 0;
  justify-content: space-between;
  left: 11px;
  position: absolute;
  right: 11px;
  top: 48px;
  white-space: nowrap;
}
.douyin-top-nav span,.douyin-top-nav b {font-size: 11px;font-style: normal;font-weight: 500;line-height:20px;opacity: .9}
.douyin-top-nav b {font-size: 12px;font-weight:700;opacity: 1;position: relative}
.douyin-top-nav b::after {background:#fff;border-radius:2px;bottom:-7px;content:'';height:2px;left:12%;position:absolute;width:76%}
.douyin-top-nav i {font-style: normal;line-height: 1}
.douyin-top-nav .menu-icon {display:flex;flex-direction:column;gap:3px;height:16px;justify-content:center;width:17px}
.douyin-top-nav .menu-icon > i {background:#fff;border-radius:2px;height:1.5px;width:15px}.douyin-top-nav .menu-icon > i:nth-child(2){width:11px}.douyin-top-nav .menu-icon > i:nth-child(3){width:7px}
.douyin-mini-logo {fill:#fff;height:10px;opacity:.8;width:10px}
.douyin-top-nav .live-tab {position:relative}
.douyin-top-nav .live-tab::after {background:#ff365f;border-radius:2px;content:'';height:4px;position:absolute;right:-4px;top:-3px;width:4px}
.douyin-top-nav .search-icon {border:2px solid #fff;border-radius:50%;height:15px;position:relative;width:15px}
.douyin-top-nav .search-icon::after {background:#fff;border-radius:2px;bottom:-5px;content:'';height:7px;position:absolute;right:-4px;transform:rotate(-45deg);width:2px}
.douyin-side-actions {
  align-items: center;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: absolute;
  right: 7px;
  width: 40px;
}
.douyin-live-avatar {height:42px;margin-bottom:3px;position:relative;width:42px}
.douyin-live-avatar::before {
  animation: douyinLivePulse 1.6s ease-out infinite;
  border: 2px solid rgba(255,42,105,.8);
  border-radius: 50%;
  content: '';
  inset: -3px;
  position: absolute;
}
.douyin-live-avatar > span {
  align-items:center;
  background:#fff;
  border:3px solid #ff2d75;
  border-radius:50%;
  color:#111;
  display:flex;
  flex-direction:column;
  height:42px;
  justify-content:center;
  line-height:1;
  overflow:hidden;
  text-shadow:none;
  width:42px;
}
.douyin-live-avatar b {font-family:Arial,sans-serif;font-size:15px;font-weight:500;letter-spacing:-1px}
.douyin-live-avatar small {font-size:8px;margin-top:2px}
.douyin-live-avatar em {
  animation: douyinLiveBadge 1.05s ease-in-out infinite;
  background:linear-gradient(90deg,#ff295f,#ff3e8b);
  border-radius:5px;
  bottom:-5px;
  color:#fff;
  font-size:8px;
  font-style:normal;
  left:50%;
  line-height:15px;
  padding:0 5px;
  position:absolute;
  text-shadow:none;
  transform:translateX(-50%);
  white-space:nowrap;
}
.douyin-action {align-items:center;display:flex;flex-direction:column;gap:1px}
.douyin-action svg {fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));height:27px;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;width:27px}
.douyin-action span {font-size:10px;font-weight:500}
.douyin-record {
  align-items:center;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
  color:#111;
  display:flex;
  flex-direction:column;
  height:36px;
  justify-content:center;
  line-height:1;
  margin-top:2px;
  text-shadow:none;
  width:36px;
}
.douyin-record b {font-family:Arial,sans-serif;font-size:13px;font-weight:500;letter-spacing:-1px}.douyin-record small{font-size:7px;margin-top:2px}
.douyin-caption {
  bottom: 62px;
  left: 11px;
  max-width: calc(100% - 58px);
  position: absolute;
}
.douyin-caption .douyin-shop {background:rgba(25,25,25,.42);border-radius:4px;display:inline-flex;font-size:10px;margin-bottom:6px;padding:5px 7px;text-shadow:none}
.douyin-caption b {display:block;font-size:12px;margin-bottom:6px}
.douyin-caption p {font-size:11px;line-height:1.45;margin:0}.douyin-caption small{display:block;font-size:9px;margin-top:3px;opacity:.75}
.douyin-bottom-nav {
  align-items:center;
  background:#090a0c;
  bottom:0;
  display:grid;
  font-size:11px;
  font-weight:600;
  grid-template-columns:repeat(5,1fr);
  height:55px;
  left:0;
  position:absolute;
  right:0;
  text-align:center;
  text-shadow:none;
}
.douyin-bottom-nav b {font-size:24px;font-weight:300;line-height:31px}.douyin-bottom-nav span:not(.active){color:rgba(255,255,255,.72)}
.douyin-bottom-nav > b:first-child {font-size:12px;font-weight:700}
.douyin-bottom-nav > strong {border:2px solid #fff;border-radius:8px;font-size:25px;font-weight:300;height:30px;line-height:25px;margin:auto;width:37px}
.douyin-bottom-nav .message {position:relative}
.douyin-bottom-nav .message i {align-items:center;background:#ff315f;border-radius:999px;display:flex;font-size:8px;font-style:normal;height:16px;justify-content:center;position:absolute;right:5px;top:-12px;width:16px}
.douyin-play-state {
  align-items:center;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.4);
  border-radius:50%;
  display:flex;
  font-size:24px;
  height:56px;
  justify-content:center;
  left:50%;
  opacity:1;
  padding-left:4px;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  transition:opacity .2s ease;
  width:56px;
}
.douyin-play-state svg {fill:#fff;height:25px;stroke:none;width:25px}
.material-detail-player.is-playing .douyin-play-state {opacity:0}
@keyframes douyinLivePulse {0%{opacity:.9;transform:scale(.92)}75%,100%{opacity:0;transform:scale(1.28)}}
@keyframes douyinLiveBadge {0%,100%{filter:brightness(1);transform:translateX(-50%) scale(1)}50%{filter:brightness(1.18);transform:translateX(-50%) scale(1.06)}}
.material-detail-video > p {
  color: #8896a8;
  font-size: 12px;
  margin: 12px 0 0;
  text-align: center;
}
.material-info-panel {
  align-self: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  min-height: 540px;
  padding: 24px 0;
}
@media(max-width:1280px){
  .material-detail-layout{gap:24px;grid-template-columns:minmax(420px,460px) minmax(0,1fr);padding-inline:30px}
  .material-collection-launch{flex-basis:74px}
  .material-collection-launch > button{width:68px}
  .material-collection-strip{flex-basis:74px}
  .material-collection-strip button{height:auto;width:60px}
}
@media(max-width:980px){
  .material-detail-layout{grid-template-columns:1fr}
  .material-detail-stage{max-height:none}
  .material-info-panel{min-height:0}
}
.material-detail-heading {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}
.material-detail-heading h2 {
  color: var(--text);
  font-size: clamp(22px,2vw,30px);
  line-height: 1.35;
  margin: 0;
  word-break: break-word;
}
.material-detail-uploader {
  align-items: center;
  display: flex;
  gap: 11px;
  margin: 22px 0 28px;
}
.material-detail-uploader > i {
  align-items: center;
  background: linear-gradient(135deg,#4d8df8,#7459ee);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: 0 0 38px;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  height: 38px;
  justify-content: center;
}
.material-detail-uploader > div {
  display: grid;
  gap: 3px;
}
.material-detail-uploader b {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}
.material-detail-uploader time {
  color: #8996a8;
  font-size: 11px;
}
.material-info-panel .material-detail-fields {
  display: grid;
  gap: 20px;
  margin: 0;
}
.material-info-panel .material-detail-fields > div {
  align-items: flex-start;
  border: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: 82px minmax(0,1fr);
  padding: 0;
}
.material-info-panel .material-detail-fields dt {
  color: #8a98aa;
  font-size: 13px;
  line-height: 28px;
  margin: 0;
}
.material-info-panel .material-detail-fields dd {
  color: #31415a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  margin: 0;
}
.material-info-panel .material-info-tags dd {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.material-info-panel .material-info-tags dd span {
  background: rgba(77,141,248,.09);
  border: 1px solid rgba(77,141,248,.1);
  border-radius: 999px;
  color: #5f7fae;
  font-size: 12px;
  max-width: 180px;
  padding: 4px 10px;
}
.material-info-panel .material-info-tags dd .empty {
  background: var(--input);
  border-color: transparent;
  color: #93a0b1;
}
.material-detail-tools {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 34px;
  padding-top: 22px;
}
.material-detail-tools button,
.material-detail-tools > span {
  align-items: center;
  background: transparent;
  border: 0;
  color: #69788c;
  display: inline-flex;
  font: inherit;
  font-size: 13px;
  gap: 7px;
  padding: 7px 0;
}
.material-detail-tools button {
  cursor: pointer;
}
.material-detail-tools button:hover {
  color: #3f86ef;
}
.material-detail-tools svg {
  fill: none;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 17px;
}
.material-info-panel .material-detail-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding: 0;
}
.material-info-panel .material-detail-actions > * {
  border-radius: 9px;
  flex: 0 1 190px;
  font-size: 13px;
  gap: 8px;
  min-height: 44px;
  padding: 9px 18px;
}
.material-info-panel .material-detail-actions svg {
  fill: none;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 17px;
}
.material-download-action {
  background: linear-gradient(135deg,#168afa,#b54ade);
}

@media (max-width: 1120px) {
  .material-detail-layout {
    gap: 34px;
    grid-template-columns: minmax(300px,380px) minmax(0,1fr);
    padding: 26px 30px;
  }
}
@media (max-width: 820px) {
  .material-detail-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .material-detail-device {
    max-height: 620px;
  }
  .material-info-panel {
    min-height: 0;
    padding-top: 6px;
  }
}
@media (max-width: 560px) {
  .material-detail-layout {
    padding: 20px 18px;
  }
  .material-info-panel .material-detail-fields > div {
    gap: 7px;
    grid-template-columns: 1fr;
  }
  .material-info-panel .material-detail-actions {
    flex-direction: column;
  }
  .material-info-panel .material-detail-actions > * {
    flex-basis: auto;
    width: 100%;
  }
}

/* Location-first preset-tag management and shared selection. */
.tag-management-page { max-width:1500px;margin:0 auto; }
.tag-management-page > .page-head { margin-bottom:18px; }
.tag-location-layout { display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;align-items:stretch;min-height:calc(100vh - 122px); }
.tag-location-nav,.tag-location-content { height:100%;padding:0;overflow:hidden; }
.tag-location-nav-head { display:flex;flex-direction:column;gap:5px;padding:20px 20px 16px;border-bottom:1px solid var(--line); }
.tag-location-nav-head b { font-size:16px; }
.tag-location-nav-head small,.tag-location-content-head p,.tag-editor-location small { color:var(--muted); }
.tag-location-group { padding:14px 10px; }
.tag-location-group + .tag-location-group { border-top:1px solid var(--line); }
.tag-location-group > span { display:block;padding:0 10px 8px;color:var(--muted);font-size:12px;font-weight:600; }
.tag-location-group button { display:flex;align-items:center;gap:11px;width:100%;padding:11px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text);text-align:left;cursor:pointer; }
.tag-location-group button:hover { background:rgba(91,125,239,.06); }
.tag-location-group button.active { border-color:rgba(91,125,239,.18);background:rgba(91,125,239,.1);color:#526fd2; }
.tag-location-group button > i { width:8px;height:8px;border-radius:50%;background:#b9c2d6;box-shadow:0 0 0 4px rgba(185,194,214,.14); }
.tag-location-group button.active > i { background:#687ff0;box-shadow:0 0 0 4px rgba(104,127,240,.15); }
.tag-location-group button > span { display:flex;min-width:0;flex:1;flex-direction:column;gap:3px; }
.tag-location-group button b { font-size:14px; }
.tag-location-group button small { color:var(--muted);font-size:12px; }
.tag-location-group button em { color:var(--muted);font-size:20px;font-style:normal; }
.tag-location-content { min-height:100%;padding:22px 24px; }
.tag-location-content-head { display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px; }
.tag-location-content-head h2 { margin:8px 0 4px;font-size:21px; }
.tag-location-content-head p { margin:0;font-size:13px; }
.tag-location-breadcrumb { display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px; }
.tag-location-breadcrumb i { font-style:normal; }
.tag-location-breadcrumb b { color:#6075d1; }
.tag-management-toolbar { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px; }
.tag-management-toolbar > input { flex:1;min-width:200px; }
.tag-management-toolbar input,.tag-management-toolbar select,.preset-tag-search { border:1px solid var(--line);border-radius:8px;background:var(--input);color:var(--text);padding:10px 12px;font:inherit; }
.tag-management-toolbar .ui-select { width:160px; }
.tag-management-page .page-head p { margin:6px 0; }
.tag-management-page .page-head h1 { font-size:26px; }
.tag-management-page .table-link { padding:6px 10px; }
.preset-tag-picker.material-upload-tags,.preset-tag-picker { display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;min-width:0; }
.preset-tag-selected,.preset-tag-options { display:flex;flex-wrap:wrap;gap:8px; }
.preset-tag-selected:empty { display:none; }
.preset-tag-options { max-height:180px;overflow-y:auto;overscroll-behavior:contain;padding:3px; }
.preset-tag-selected button,.preset-tag-options button { border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--muted);padding:7px 11px;font:inherit;font-size:13px;cursor:pointer; }
.preset-tag-options button:hover { border-color:#879ff5;color:#5978d8; }
.preset-tag-selected button,.preset-tag-options button.selected { background:rgba(91,125,239,.09);border-color:rgba(91,125,239,.38);color:#5978d8; }
.preset-tag-help { color:var(--muted);font-size:12px;line-height:1.7; }
.preset-tag-empty { color:var(--muted);padding:14px 4px;font-size:13px; }
.tag-enabled-option { display:flex;align-items:center;gap:8px; }
.tag-editor-location { display:grid;grid-template-columns:90px 1fr;gap:5px 12px;margin-bottom:18px;padding:14px;border:1px solid var(--line);border-radius:10px;background:rgba(91,125,239,.05); }
.tag-editor-location span { color:var(--muted);font-size:13px; }
.tag-editor-location b { font-size:14px; }
.tag-editor-location b i { margin:0 7px;color:var(--muted);font-style:normal; }
.tag-editor-location small { grid-column:2;font-size:12px; }
.tag-editor input[type="checkbox"] { accent-color:#7860ed;width:16px;height:16px; }
#modalRoot .material-edit-modal .preset-tag-picker { min-width:0; }
@media (max-width:900px) { .tag-location-layout { grid-template-columns:1fr; }.tag-location-nav { display:flex;align-items:stretch; }.tag-location-nav-head { min-width:170px;border-right:1px solid var(--line);border-bottom:0; }.tag-location-group { display:flex;flex:1;gap:8px; }.tag-location-group > span { display:none; } }

/* Group-aware tag management and dialog-based tag selection. */
.tag-group-table th:first-child,.tag-group-table td:first-child{width:170px}.tag-group-table th:nth-child(3),.tag-group-table td:nth-child(3){width:120px}.tag-group-badge{background:rgba(91,125,239,.08);border:1px solid rgba(91,125,239,.14);border-radius:7px;color:#5b72c9;display:inline-flex;font-size:12px;font-weight:600;padding:5px 9px}.tag-editor .field small{color:var(--muted);display:block;font-size:11px;margin-top:6px}.tag-editor .field input{height:42px}
.preset-tag-picker.material-upload-tags,.preset-tag-picker{align-items:flex-start;display:flex;flex-direction:column;gap:10px;min-height:40px;width:100%}.preset-tag-add-button{align-items:center;background:var(--panel);border-color:var(--line);color:var(--text);display:inline-flex;font-size:13px;gap:5px;min-height:38px;padding:8px 13px}.preset-tag-add-button:hover{border-color:#879ff5;color:#5978d8}.preset-tag-add-button span{color:#6479d9;font-size:16px;line-height:1}.preset-tag-selected{display:flex;flex-wrap:wrap;gap:7px;width:100%}.preset-tag-selected:empty{display:none}.preset-tag-selected button{align-items:center;background:rgba(91,125,239,.09);border:1px solid rgba(91,125,239,.25);border-radius:7px;color:#5873d1;cursor:pointer;display:inline-flex;font:inherit;font-size:12px;gap:6px;padding:6px 8px}.preset-tag-selected button:hover{background:rgba(91,125,239,.14);border-color:rgba(91,125,239,.42)}.preset-tag-selected button i{color:#8190aa;font-size:14px;font-style:normal;line-height:1}
.preset-tag-dialog{width:min(760px,calc(100vw - 36px))}.preset-tag-dialog .modal-head>div{display:grid;gap:3px}.preset-tag-dialog .modal-head h2{font-size:19px}.preset-tag-dialog .modal-head small{color:var(--muted);font-size:12px}.preset-tag-dialog-tools{align-items:center;border-bottom:1px solid var(--line);display:flex;gap:14px;padding:16px 22px}.preset-tag-dialog-tools label{align-items:center;background:var(--input);border:1px solid var(--line);border-radius:8px;display:flex;flex:1;min-width:0;padding:0 11px}.preset-tag-dialog-tools svg{fill:none;height:18px;stroke:#8795a9;stroke-width:1.8;width:18px}.preset-tag-dialog-tools input{background:transparent;border:0;color:var(--text);font:inherit;height:40px;min-width:0;outline:0;padding:0 9px;width:100%}.preset-tag-dialog-tools>span{color:var(--muted);font-size:12px;white-space:nowrap}.preset-tag-dialog-tools>span b{color:#5e76d4}.preset-tag-dialog-body{display:grid;gap:18px;max-height:min(54vh,520px);overflow:auto;overscroll-behavior:contain;padding:20px 22px}.preset-tag-choice-group{display:grid;gap:10px}.preset-tag-choice-group h3{align-items:center;color:var(--text);display:flex;font-size:14px;gap:8px;margin:0}.preset-tag-choice-group h3:before{background:#7286e8;border-radius:3px;content:'';height:14px;width:4px}.preset-tag-choice-group h3 small{color:var(--muted);font-size:11px;font-weight:400}.preset-tag-choice-group>div{display:flex;flex-wrap:wrap;gap:8px}.preset-tag-choice-group label{align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--muted);cursor:pointer;display:inline-flex;font-size:13px;gap:7px;min-width:82px;padding:8px 10px;transition:.18s}.preset-tag-choice-group label:hover{border-color:#91a4e9;color:#5871ca}.preset-tag-choice-group label.selected{background:rgba(91,125,239,.09);border-color:rgba(91,125,239,.42);color:#536fd0}.preset-tag-choice-group input{height:15px;margin:0;width:15px;accent-color:#687ff0}.preset-tag-choice-group i{color:#687ff0;font-size:11px;font-style:normal;opacity:0}.preset-tag-choice-group label.selected i{opacity:1}.preset-tag-dialog .preset-tag-empty{padding:54px 10px;text-align:center}.material-reference-row .preset-tag-picker{padding-top:1px}
@media(max-width:900px){.tag-location-layout{min-height:0}.tag-location-nav,.tag-location-content{height:auto}.tag-group-table th:first-child,.tag-group-table td:first-child{width:auto}}

/* Account, login and role access */
body.auth-pending .app,
body.auth-required .app { visibility: hidden; }
body.auth-ready .auth-screen { display: none; }
.auth-screen {
  align-items: center;
  background: radial-gradient(circle at 72% 18%,rgba(88,126,255,.22),transparent 34%),linear-gradient(145deg,#f7faff,#eef3ff 56%,#f9f2fb);
  display: flex;
  inset: 0;
  justify-content: center;
  min-height: 100vh;
  padding: 42px;
  position: fixed;
  z-index: 100;
}
.auth-brand { align-items:center; display:flex; gap:10px; left:42px; position:absolute; top:32px; color:#17243b; font-size:18px; }
.auth-brand > span { color:#4f8cff; font-size:34px; }
.auth-brand b > span { background:linear-gradient(90deg,#668cff,#df57c5); background-clip:text; color:transparent; }
.auth-card { background:rgba(255,255,255,.95); border:1px solid rgba(203,215,235,.8); border-radius:20px; box-shadow:0 28px 80px rgba(40,65,110,.16); color:#17243b; padding:36px 40px 30px; width:430px; }
.auth-card-heading > span { color:#4d8df6; display:block; font-size:12px; font-weight:700; letter-spacing:.12em; margin-bottom:8px; }
.auth-card-heading h1 { font-size:25px; margin:0 0 8px; }
.auth-card-heading p { color:#7a8799; font-size:13px; margin:0 0 26px; }
.auth-card .field { margin-bottom:16px; }
.auth-card .field label { color:#4c5b70; font-size:13px; }
.auth-card .field input { background:#f8faff; border:1px solid #dbe4f2; color:#17243b; height:46px; }
.auth-card .field input:focus { border-color:#5795fa; box-shadow:0 0 0 3px rgba(72,139,250,.12); }
.auth-submit { font-size:14px; margin-top:8px; min-height:46px; width:100%; }
.auth-message { background:#fff4f3; border:1px solid #ffd9d5; border-radius:8px; color:#d2534a; font-size:12px; margin:-10px 0 18px; padding:10px 12px; }
.auth-local-note { align-items:center; color:#96a1b0; display:flex; font-size:11px; gap:7px; justify-content:center; margin-top:22px; }
.auth-local-note i { background:#21c79a; border-radius:50%; height:7px; width:7px; }
.auth-filing-footer { align-items:center; bottom:24px; color:#8491a4; display:flex; font-size:12px; gap:12px; justify-content:center; left:50%; position:absolute; transform:translateX(-50%); white-space:nowrap; }
.auth-filing-footer i { background:#aeb8c8; border-radius:50%; height:3px; width:3px; }
.auth-filing-footer a,.filing-sidebar-foot a { color:inherit; text-decoration:none; transition:color .18s; }
.auth-filing-footer a:hover,.auth-filing-footer a:focus-visible,.filing-sidebar-foot a:hover,.filing-sidebar-foot a:focus-visible { color:#397fe8; text-decoration:underline; }
.filing-sidebar-foot { justify-content:center; }
@media(max-width:560px){.auth-brand{left:24px;top:22px}.auth-card{padding:30px 24px 26px;width:min(430px,calc(100vw - 32px))}.auth-filing-footer{bottom:16px;font-size:11px;gap:8px}}
.user-menu-wrap { position:relative; }
.topbar .user { background:transparent; border:0; color:var(--text); cursor:pointer; padding:4px 2px 4px 6px; }
.topbar .user > svg { fill:none; height:14px; stroke:var(--muted); stroke-width:1.8; width:14px; }
.user-popover { background:var(--panel); border:1px solid var(--line); border-radius:11px; box-shadow:0 18px 45px rgba(20,42,80,.18); min-width:210px; padding:8px; position:absolute; right:0; top:52px; z-index:30; }
.user-popover > div { border-bottom:1px solid var(--line); display:flex; flex-direction:column; padding:8px 10px 11px; }
.user-popover small { color:var(--muted); margin-top:2px; }
.user-popover button { background:transparent; border:0; border-radius:7px; color:var(--text); cursor:pointer; display:block; font:inherit; padding:9px 10px; text-align:left; width:100%; }
.user-popover button:hover { background:var(--input); }
.user-popover button.danger { color:#ef6377; }
.access-page { padding:0; overflow:hidden; }
.access-toolbar { align-items:center; display:flex; justify-content:space-between; padding:18px 20px; }
.access-toolbar > div { display:flex; flex-direction:column; }
.access-toolbar small { color:var(--muted); font-size:12px; margin-top:2px; }
.access-table-wrap { overflow:auto; }
.access-table { border-collapse:collapse; width:100%; }
.access-table th,.access-table td { border-top:1px solid var(--line); padding:14px 20px; text-align:left; white-space:nowrap; }
.access-table th { color:var(--muted); font-size:12px; font-weight:500; }
.member-cell { align-items:center; display:flex; gap:10px; }
.member-cell > span { background:linear-gradient(135deg,#378df8,#795cf2); border-radius:50%; color:#fff; display:grid; height:32px; place-items:center; width:32px; }
.member-cell em { background:rgba(54,139,248,.1); border-radius:999px; color:#468cf1; font-size:11px; font-style:normal; padding:2px 7px; }
.account-status { border-radius:999px; display:inline-block; font-size:12px; padding:3px 9px; }
.account-status.active { background:rgba(29,191,145,.1); color:#17a67e; }
.account-status.disabled { background:rgba(144,157,176,.12); color:#8290a3; }
.table-link { background:transparent; border:0; color:#438cf5; cursor:pointer; }
.access-modal { width:min(500px,100%); }
.access-radio { display:flex; gap:24px; }
.access-radio label { align-items:center; display:flex; font-weight:400; gap:7px; margin:0; }
.access-radio input { width:auto; }
.access-role-layout { display:grid; gap:16px; grid-template-columns:300px minmax(0,1fr); }
.role-list { padding:0 0 10px; overflow:hidden; }
.role-item { align-items:center; background:transparent; border:0; border-left:3px solid transparent; color:var(--text); cursor:pointer; display:flex; justify-content:space-between; padding:13px 18px; text-align:left; width:100%; }
.role-item:hover,.role-item.active { background:rgba(55,139,248,.08); border-left-color:#438cf5; }
.role-item span { display:flex; flex-direction:column; min-width:0; }
.role-item small { color:var(--muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.role-item em { background:var(--input); border-radius:999px; color:var(--muted); font-size:10px; font-style:normal; padding:2px 7px; }
.role-detail { min-height:510px; }
.role-detail-head { align-items:flex-start; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding-bottom:18px; }
.role-detail-head h2 { margin:0 0 4px; }
.role-detail-head p { color:var(--muted); margin:0; }
.role-detail-head > div:last-child { display:flex; gap:8px; }
.permission-summary { display:grid; gap:22px; padding-top:22px; }
.permission-summary section > b { display:block; margin-bottom:10px; }
.permission-summary section > div { display:grid; gap:8px; grid-template-columns:repeat(3,minmax(150px,1fr)); }
.permission-summary section span { background:var(--input); border:1px solid transparent; border-radius:8px; color:var(--muted); padding:10px 12px; }
.permission-summary section span.granted { border-color:rgba(68,141,245,.18); color:#438cf5; }
.permission-all { background:rgba(68,141,245,.08); border:1px solid rgba(68,141,245,.15); border-radius:10px; display:flex; flex-direction:column; padding:18px; }
.permission-all span { color:var(--muted); margin-top:3px; }
.role-modal { width:min(650px,100%); }
.permission-picker > label { display:block; font-weight:600; margin-bottom:10px; }
.permission-picker section { border:1px solid var(--line); border-radius:9px; margin-bottom:10px; padding:13px; }
.permission-picker section > b { display:block; margin-bottom:8px; }
.permission-picker section > label { align-items:center; cursor:pointer; display:flex; gap:10px; margin:7px 0; }
.permission-picker section input { width:auto; }
.permission-picker section span { display:flex; flex-direction:column; }
.permission-picker section small { color:var(--muted); font-size:10px; }
@media(max-width:900px){.access-role-layout{grid-template-columns:1fr}.permission-summary section>div{grid-template-columns:1fr 1fr}}

/* Account dialog: compact, aligned form language. */
#modalRoot .access-modal {
  border-radius: 12px;
  box-shadow: 0 22px 70px rgba(31,48,79,.22);
}
#modalRoot .access-modal .modal-head {
  border-bottom: 1px solid rgba(132,153,184,.14);
  padding: 21px 26px 16px;
}
#modalRoot .access-modal .modal-head h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
#modalRoot .access-modal .modal-head small {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 3px;
}
#modalRoot .access-modal .modal-head .close {
  align-items: center;
  border-radius: 7px;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  transition: background .16s,color .16s;
  width: 28px;
}
#modalRoot .access-modal .modal-head .close:hover {
  background: var(--input);
  color: var(--text);
}
#modalRoot .access-modal .modal-body {
  padding: 18px 26px 8px;
}
#modalRoot .access-modal .field {
  margin-bottom: 15px;
}
#modalRoot .access-modal .field > label {
  align-items: center;
  color: color-mix(in srgb,var(--text) 86%,var(--muted));
  font-size: 12px;
  font-weight: 500;
  gap: 4px;
  justify-content: flex-start;
  line-height: 20px;
  margin-bottom: 6px;
}
#modalRoot .access-modal .field:has(> input[required],> select[required],> .ui-select > select[required]) > label::before {
  flex: 0 0 auto;
  margin-right: 0;
}
#modalRoot .access-modal input:not([type="checkbox"]):not([type="radio"]),
#modalRoot .access-modal select,
#modalRoot .access-modal .ui-select-trigger {
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
  height: 40px;
  min-height: 40px;
  padding: 8px 12px;
}
#modalRoot .access-modal input[readonly] {
  background: color-mix(in srgb,var(--input) 78%,var(--line));
  color: var(--muted);
  cursor: not-allowed;
}
#modalRoot .access-modal .field > small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 5px;
}
#modalRoot .access-modal .ui-select {
  width: 100%;
}
#modalRoot .access-modal .ui-select-trigger {
  color: var(--text);
  width: 100%;
}
#modalRoot .access-modal .access-radio {
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  gap: 3px;
  padding: 3px;
}
#modalRoot .access-modal .access-radio label {
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  gap: 6px;
  min-width: 76px;
  padding: 7px 12px;
}
#modalRoot .access-modal .access-radio label:has(input:checked) {
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(30,52,88,.08);
  color: var(--text);
}
#modalRoot .access-modal .access-radio input {
  accent-color: #528df4;
}
#modalRoot .access-modal .modal-foot {
  border-top: 1px solid rgba(132,153,184,.14);
  gap: 10px;
  padding: 14px 26px 20px;
}
#modalRoot .access-modal .modal-foot > button {
  border-radius: 7px;
  height: 38px;
  min-height: 38px;
  min-width: 98px;
  width: 98px;
}
#modalRoot .access-modal .modal-foot > .primary {
  background: linear-gradient(100deg,#347ff4,#7359eb);
  border: 0;
  box-shadow: 0 7px 18px rgba(74,94,224,.18);
}
@media(max-width:560px){#modalRoot .access-modal .modal-head,#modalRoot .access-modal .modal-body,#modalRoot .access-modal .modal-foot{padding-left:18px;padding-right:18px}}