:root {
  --background: #ffffff;
  --surface: #f5f5f7;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --border: #d2d2d7;
  --accent: #0071e3;
  --dark: #111111;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "SF Pro Display", "Segoe UI", system-ui, sans-serif;
}

/* Product pages follow a single reading path: position, value, difference, proof, resources. */
.product-detail {
  gap: 72px;
}

.product-detail > .product-detail-section {
  gap: 34px;
  padding-top: 56px;
  border-top: 1px solid var(--border);
}

.product-chapter {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 24px;
  max-width: 820px;
}

.product-chapter-marker {
  display: grid;
  justify-items: center;
  gap: 9px;
}

.product-chapter-marker > em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.product-chapter-marker .product-detail-icon {
  --tone-color: #0071e3;
  --tone-bg: #f1f7ff;
  --tone-border: #d5e9ff;
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.product-chapter small,
.product-resource-group header small,
.product-panel-heading small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.product-chapter small {
  color: #0071e3;
}

.product-chapter h2,
.product-chapter p {
  margin: 0;
}

.product-chapter h2 {
  margin-top: 8px;
  color: var(--text);
  font-size: 42px;
  font-weight: 750;
  line-height: 1.08;
}

.product-chapter p {
  max-width: 680px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
}

.product-positioning-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.product-positioning-grid article {
  min-width: 0;
  padding: 34px 34px 36px 0;
}

.product-positioning-grid article + article {
  padding-left: 34px;
  border-left: 1px solid var(--border);
}

.product-positioning-grid article > header,
.product-panel-heading,
.product-resource-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-positioning-grid .product-block-icon {
  --tone-color: #6e6e73;
  --tone-bg: #f5f5f7;
  --tone-border: #e5e5e9;
}

.product-panel-heading .product-block-icon,
.product-capability-block .product-block-icon,
.product-full-specs .product-block-icon,
.product-resource-heading .product-block-icon {
  --tone-color: #0071e3;
  --tone-bg: #f1f7ff;
  --tone-border: #d5e9ff;
}

.product-positioning-grid small,
.product-selling-copy small,
.product-capability-block > header small,
.product-audio-chain small,
.product-document-links small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.product-positioning-grid h3,
.product-positioning-grid p {
  margin: 0;
}

.product-positioning-grid h3 {
  margin-top: 18px;
  color: var(--text);
  font-size: 23px;
  font-weight: 730;
  line-height: 1.35;
}

.product-positioning-grid p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
}

.product-selling-list {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.product-selling-item {
  display: grid;
  grid-template-columns: 44px minmax(220px, 0.65fr) minmax(0, 1.35fr);
  gap: 32px;
  align-items: start;
  padding: 46px 0;
}

.product-selling-item + .product-selling-item {
  border-top: 1px solid var(--border);
}

.product-selling-index {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  background: #f1f7ff;
  border-radius: 10px;
  color: #0071e3;
  font-size: 13px;
  font-weight: 750;
}

.product-selling-copy h3,
.product-selling-copy small,
.product-selling-body dt,
.product-selling-body dd {
  margin: 0;
}

.product-selling-copy h3 {
  color: var(--text);
  font-size: 30px;
  font-weight: 740;
  line-height: 1.22;
}

.product-selling-copy small {
  display: block;
  max-width: 250px;
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.65;
}

.product-selling-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  margin: 0;
  padding: 28px;
  background: #f5f5f7;
  border-radius: 16px;
}

.product-selling-body > div {
  display: block;
  min-width: 0;
}

.product-selling-body dt {
  color: #6e6e73;
  font-size: 12px;
  font-weight: 750;
}

.product-selling-body dd {
  margin-top: 10px;
  color: #3a3a3c;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
}

.product-selling-body .selling-evidence {
  grid-column: 1 / -1;
  padding-top: 24px;
  border-top: 1px solid #dcdce1;
}

.product-selling-body .selling-evidence dd {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.selling-evidence dd span {
  min-width: 0;
  padding: 14px 16px;
  background: #ffffff;
  border-left: 3px solid #0071e3;
  border-radius: 8px;
}

.selling-evidence dd small,
.selling-evidence dd strong {
  display: block;
}

.selling-evidence dd small {
  color: var(--muted);
  font-size: 11px;
}

.selling-evidence dd strong {
  margin-top: 7px;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  text-overflow: ellipsis;
}

.product-difference-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 18px;
}

.product-upgrade-panel,
.product-compare-panel {
  min-width: 0;
  padding: 32px;
  background: #f5f5f7;
  border-radius: 18px;
}

.product-upgrade-panel h3,
.product-compare-panel h3,
.product-compare-panel p,
.product-compare-panel > span {
  margin: 0;
}

.product-upgrade-panel h3,
.product-compare-panel h3 {
  margin-top: 14px;
  color: var(--text);
  font-size: 26px;
  font-weight: 730;
  line-height: 1.3;
}

.product-upgrade-panel > ul {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.product-upgrade-list {
  display: grid;
  gap: 0;
  margin-top: 22px;
  border-top: 1px solid var(--border);
}

.product-upgrade-list > div {
  display: grid;
  grid-template-columns: 78px minmax(0, 0.8fr) 18px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.product-upgrade-list > div::after {
  grid-column: 3;
  grid-row: 1;
  color: #0071e3;
  content: "→";
}

.product-upgrade-list span,
.product-upgrade-list del,
.product-upgrade-list strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  text-overflow: ellipsis;
}

.product-upgrade-list span {
  color: var(--muted);
  font-weight: 700;
}

.product-upgrade-list del {
  color: var(--muted);
}

.product-upgrade-list strong {
  grid-column: 4;
  color: var(--text);
}

.product-compare-panel p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
}

.product-compare-panel > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.product-compare-panel .product-compare-toggle,
.product-compare-panel .compare-start-button {
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 0 15px;
}

.product-compare-panel > div > a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 15px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.product-compare-panel > span {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
}

.product-capability-stack {
  display: grid;
  gap: 42px;
}

.product-capability-block > header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.product-capability-block > header > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 12px;
}

.product-capability-block > header h3,
.product-capability-block > header p {
  margin: 0;
}

.product-capability-block > header h3 {
  color: var(--text);
  font-size: 24px;
  font-weight: 730;
}

.product-capability-block > header p {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

.product-core-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--border);
}

.product-core-specs > div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  padding: 18px 20px 18px 0;
  border-bottom: 1px solid var(--border);
}

.product-core-specs > div:nth-child(even) {
  padding-right: 0;
  padding-left: 20px;
  border-left: 1px solid var(--border);
}

.product-core-specs dt,
.product-core-specs dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.product-core-specs dt {
  color: var(--muted);
  font-weight: 700;
}

.product-core-specs dd {
  overflow: hidden;
  color: var(--text);
  font-weight: 650;
  text-overflow: ellipsis;
}

.product-audio-chain {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  padding: 4px 0 8px;
}

.product-audio-chain > span {
  position: relative;
  display: grid;
  min-width: 170px;
  flex: 1 0 170px;
  align-content: start;
  padding: 20px 42px 20px 20px;
  background: #f5f5f7;
}

.product-audio-chain > span:first-child {
  border-radius: 12px 0 0 12px;
}

.product-audio-chain > span:last-child {
  padding-right: 20px;
  border-radius: 0 12px 12px 0;
}

.product-audio-chain > span:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: 16px;
  color: #0071e3;
  content: "→";
  transform: translateY(-50%);
}

.product-audio-chain strong {
  margin-top: 7px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.product-full-specs {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.product-full-specs summary {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.product-full-specs summary::-webkit-details-marker {
  display: none;
}

.product-full-specs summary > .product-full-specs-title {
  display: flex;
  gap: 14px;
  align-items: center;
}

.product-full-specs summary strong {
  color: var(--text);
  font-size: 19px;
}

.product-full-specs summary em {
  color: #0071e3;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.product-full-specs summary i {
  display: inline-block;
  margin-left: 7px;
  font-size: 18px;
  font-style: normal;
  transition: transform 160ms ease;
}

.product-full-specs[open] summary i {
  transform: rotate(45deg);
}

.product-full-specs > dl {
  margin: 0;
  padding-bottom: 16px;
}

.product-full-specs > dl > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 20px;
  padding: 15px 0;
  border-top: 1px solid #ececf0;
}

.product-full-specs dt,
.product-full-specs dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}

.product-full-specs dt {
  color: var(--muted);
  font-weight: 700;
}

.product-full-specs dd {
  color: var(--text);
}

.product-resource-hub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.product-resource-group {
  min-width: 0;
  padding: 30px 30px 32px 0;
}

.product-resource-group + .product-resource-group {
  padding-left: 30px;
  border-left: 1px solid var(--border);
}

.product-resource-group header h3 {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 23px;
  font-weight: 730;
}

.product-resource-heading > div {
  min-width: 0;
}

.product-resource-group > a {
  display: inline-flex;
  gap: 8px;
  margin-top: 22px;
  color: #0071e3;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.product-resource-group > p,
.product-document-links > p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.product-asset-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 20px 0 0;
  border-top: 1px solid var(--border);
}

.product-asset-counts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 13px 12px 13px 0;
  border-bottom: 1px solid var(--border);
}

.product-asset-counts > div:nth-child(even) {
  padding-right: 0;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

.product-asset-counts dt,
.product-asset-counts dd {
  margin: 0;
}

.product-asset-counts dt {
  color: var(--muted);
  font-size: 12px;
}

.product-asset-counts dd {
  color: var(--text);
  font-size: 18px;
  font-weight: 720;
}

.product-content-list,
.product-document-links {
  display: grid;
  margin-top: 20px;
  border-top: 1px solid var(--border);
}

.product-content-list a,
.product-document-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.product-content-list strong,
.product-content-list span,
.product-document-links span,
.product-document-links strong,
.product-content-list i,
.product-document-links i {
  min-width: 0;
}

.product-content-list strong {
  font-size: 14px;
  font-weight: 700;
}

.product-content-list span {
  grid-column: 1;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-content-list i,
.product-document-links i {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--muted);
  font-style: normal;
}

.product-document-links small,
.product-document-links strong {
  display: block;
}

.product-document-links strong {
  margin-top: 4px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .product-selling-item {
    grid-template-columns: 40px minmax(180px, 0.5fr) minmax(0, 1fr);
    gap: 24px;
  }

  .product-difference-layout,
  .product-resource-hub {
    grid-template-columns: 1fr;
  }

  .product-resource-group,
  .product-resource-group + .product-resource-group {
    padding: 28px 0;
    border-left: 0;
    border-bottom: 1px solid var(--border);
  }

  .product-resource-group:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 760px) {
  .product-detail {
    gap: 46px;
  }

  .product-detail > .product-detail-section {
    gap: 24px;
    padding-top: 38px;
  }

  .product-chapter {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }

  .product-chapter h2 {
    font-size: 30px;
  }

  .product-positioning-grid,
  .product-selling-item,
  .product-selling-body > div,
  .product-selling-body .selling-evidence dd,
  .product-core-specs,
  .product-full-specs > dl > div {
    grid-template-columns: 1fr;
  }

  .product-positioning-grid article,
  .product-positioning-grid article + article {
    padding: 24px 0;
    border-left: 0;
    border-bottom: 1px solid var(--border);
  }

  .product-positioning-grid article:last-child {
    border-bottom: 0;
  }

  .product-selling-item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px 12px;
    padding: 32px 0;
  }

  .product-selling-copy {
    grid-column: 2;
  }

  .product-selling-copy h3 {
    font-size: 24px;
  }

  .product-selling-copy small {
    margin-top: 8px;
  }

  .product-selling-body {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px;
    border-radius: 14px;
  }

  .product-selling-body .selling-evidence {
    grid-column: auto;
  }

  .product-selling-body > div {
    gap: 8px;
  }

  .product-upgrade-panel,
  .product-compare-panel {
    padding: 24px;
  }

  .product-upgrade-list > div {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .product-upgrade-list del,
  .product-upgrade-list strong {
    grid-column: 2;
  }

  .product-upgrade-list > div::after {
    display: none;
  }

  .product-capability-block > header {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .product-capability-block > header > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .product-core-specs > div,
  .product-core-specs > div:nth-child(even) {
    grid-template-columns: 84px minmax(0, 1fr);
    padding: 16px 0;
    border-left: 0;
  }

  .product-full-specs summary em {
    font-size: 0;
  }

  .product-full-specs summary i {
    font-size: 20px;
  }

  .product-full-specs > dl > div {
    gap: 5px;
  }
}

/* Nextcloud material launcher */
.material-launcher {
  display: grid;
  gap: 72px;
  padding-bottom: 72px;
}

.material-shortcut-section {
  border-top: 1px solid var(--border);
}

.material-shortcut-section > header {
  padding: 30px 0 24px;
}

.material-shortcut-section > header small,
.material-shortcut-section > header h2,
.material-nextcloud-entry small,
.material-nextcloud-entry h2,
.material-nextcloud-entry p {
  display: block;
  margin: 0;
}

.material-shortcut-section > header small,
.material-nextcloud-entry small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}

.material-shortcut-section > header h2,
.material-nextcloud-entry h2 {
  margin-top: 7px;
  color: var(--text);
  font-size: 30px;
  line-height: 1.2;
}

.material-product-shortcuts,
.material-type-shortcuts {
  display: grid;
  border-top: 1px solid #ececf0;
}

.material-product-shortcuts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.material-type-shortcuts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.material-product-shortcuts a,
.material-type-shortcuts a {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--text);
  text-decoration: none;
  transition: background-color 160ms ease;
}

.material-product-shortcuts a {
  min-height: 122px;
  padding: 24px 30px;
  border-right: 1px solid #ececf0;
  border-bottom: 1px solid #ececf0;
}

.material-product-shortcuts a:nth-child(2n) {
  border-right: 0;
}

.material-type-shortcuts a {
  min-height: 84px;
  padding: 18px 24px;
  border-right: 1px solid #ececf0;
  border-bottom: 1px solid #ececf0;
}

.material-type-shortcuts a:nth-child(3n) {
  border-right: 0;
}

.material-product-shortcuts a:hover,
.material-type-shortcuts a:hover {
  background: var(--surface);
}

.material-product-shortcuts span,
.material-product-shortcuts small,
.material-product-shortcuts strong {
  display: block;
  min-width: 0;
}

.material-product-shortcuts small {
  color: var(--muted);
  font-size: 11px;
}

.material-product-shortcuts strong {
  margin-top: 8px;
  font-size: 21px;
}

.material-product-shortcuts i,
.material-type-shortcuts i {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 18px;
  font-style: normal;
}

.material-type-shortcuts strong {
  overflow-wrap: anywhere;
  font-size: 16px;
}

.material-nextcloud-entry {
  display: flex;
  min-height: 210px;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: 42px 48px;
  background: #111111;
  border-radius: 8px;
  color: #ffffff;
}

.material-nextcloud-entry small,
.material-nextcloud-entry p {
  color: #a1a1a6;
}

.material-nextcloud-entry h2 {
  color: #ffffff;
}

.material-nextcloud-entry p {
  max-width: 520px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
}

.material-nextcloud-entry > a {
  display: inline-flex;
  min-height: 46px;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  background: #ffffff;
  border-radius: 8px;
  color: #111111;
  font-size: 13px;
  font-weight: 680;
  text-decoration: none;
}

@media (max-width: 760px) {
  .material-launcher {
    gap: 50px;
    padding-bottom: 48px;
  }

  .material-product-shortcuts,
  .material-type-shortcuts {
    grid-template-columns: 1fr;
  }

  .material-product-shortcuts a,
  .material-product-shortcuts a:nth-child(2n),
  .material-type-shortcuts a,
  .material-type-shortcuts a:nth-child(3n) {
    min-height: 78px;
    padding: 18px 8px;
    border-right: 0;
  }

  .material-nextcloud-entry {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    padding: 34px 26px;
  }

  .material-nextcloud-entry > a {
    width: 100%;
    justify-content: center;
  }
}

/* Visual product and real-folder shortcuts */
.material-launcher {
  gap: 64px;
}

.material-launcher > * {
  min-width: 0;
}

.material-product-shortcuts {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-auto-columns: calc((100% - 36px) / 4);
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  border-top: 0;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.material-product-shortcuts::-webkit-scrollbar {
  display: none;
}

.material-product-shortcuts > button {
  scroll-snap-align: start;
}

.material-product-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.material-carousel-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.material-carousel-controls > small {
  margin-right: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.material-carousel-controls button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  background: var(--surface);
  border: 0;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 25px;
  line-height: 1;
  transition: background-color 160ms ease;
}

.material-carousel-controls button:hover {
  background: #e8e8ed;
}

.material-product-search {
  margin-bottom: 18px;
}

.material-product-search input {
  width: min(460px, 100%);
  height: 48px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.material-product-search input:focus {
  background: #ffffff;
  border-color: var(--border);
}

.material-product-search input::placeholder {
  color: #86868b;
}

.material-product-empty {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.material-product-shortcuts button,
.material-channel-shortcuts button,
.material-type-shortcuts button,
.material-all-products button {
  appearance: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.material-product-shortcuts button,
.material-product-shortcuts > a {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 258px;
  grid-template-rows: 166px auto;
  gap: 16px;
  padding: 18px;
  background: var(--surface);
  border: 0;
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.material-product-shortcuts button:hover,
.material-product-shortcuts button.active,
.material-product-shortcuts > a:hover {
  background: #ececef;
}

.material-product-shortcuts button:hover,
.material-product-shortcuts > a:hover {
  transform: translateY(-2px);
}

.material-product-shortcuts > [hidden] {
  display: none;
}

.material-product-image {
  display: grid;
  width: 100%;
  height: 166px;
  place-items: center;
  overflow: hidden;
  background: #ffffff;
}

.material-product-image img,
.material-all-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--product-image-scale, 1));
}

.material-product-image-empty:not([hidden]) {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #9a9aa0;
  font-size: 11px;
  font-weight: 650;
}

.material-product-image:not(.has-product-image) > span,
.material-all-product-image:not(.has-product-image) > span {
  width: 44%;
  height: 18%;
  background: #dadadd;
  border-radius: 3px;
}

.material-product-shortcuts button > span:not(.material-product-image),
.material-product-shortcuts > a > span:not(.material-product-image),
.material-product-shortcuts button small,
.material-product-shortcuts button strong,
.material-product-shortcuts > a small,
.material-product-shortcuts > a strong {
  display: block;
  min-width: 0;
}

.material-product-shortcuts button small,
.material-product-shortcuts > a small {
  color: var(--muted);
  font-size: 11px;
}

.material-product-shortcuts button strong,
.material-product-shortcuts > a strong {
  margin-top: 7px;
  overflow-wrap: anywhere;
  font-size: 18px;
}

.material-product-shortcuts button > i,
.material-product-shortcuts > a > i {
  position: absolute;
  right: 18px;
  bottom: 24px;
}

.material-channel-shortcuts,
.material-type-shortcuts {
  display: grid;
  border-top: 1px solid #ececf0;
}

.material-channel-shortcuts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.material-channel-shortcuts button,
.material-type-shortcuts button {
  display: flex;
  min-width: 0;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  background: #ffffff;
  border-right: 1px solid #ececf0;
  border-bottom: 1px solid #ececf0;
  transition: background-color 160ms ease;
}

.material-channel-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
}

.material-channel-label img {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  object-fit: contain;
}

.material-channel-shortcuts button:nth-child(4n),
.material-type-shortcuts button:nth-child(3n) {
  border-right: 0;
}

.material-channel-shortcuts button:hover,
.material-channel-shortcuts button.active,
.material-type-shortcuts button:hover,
.material-type-shortcuts button.active {
  background: var(--surface);
}

.material-product-shortcuts i,
.material-channel-shortcuts i,
.material-type-shortcuts i,
.material-all-products i,
.material-folder-option > i {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 18px;
  font-style: normal;
}

.material-channel-shortcuts strong,
.material-type-shortcuts strong {
  overflow-wrap: anywhere;
  font-size: 16px;
}

.material-all-products {
  margin-top: 18px;
  border-top: 1px solid #ececf0;
  border-bottom: 1px solid #ececf0;
}

.material-all-products summary {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 650;
}

.material-all-products summary::-webkit-details-marker {
  display: none;
}

.material-all-products summary small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.material-all-products[open] summary {
  border-bottom: 1px solid #ececf0;
}

.material-all-products > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 0;
}

.material-all-products button {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: 118px auto;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border-radius: 8px;
}

.material-all-products button:hover {
  background: #ececef;
}

.material-all-product-image {
  display: grid;
  width: 100%;
  height: 118px;
  place-items: center;
  overflow: hidden;
  background: #ffffff;
}

.material-all-products button strong {
  min-width: 0;
  padding-right: 20px;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.material-all-products button i {
  position: absolute;
  right: 14px;
  bottom: 14px;
}

.material-folder-picker-results {
  margin-top: 24px;
  padding: 28px;
  background: #f5f5f7;
  border-radius: 8px;
}

.material-channel-product-picker {
  width: 100%;
  min-width: 0;
  margin-top: 18px;
  padding: 28px;
  overflow: hidden;
  background: #f5f5f7;
  border-radius: 8px;
}

.material-channel-product-picker > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 22px;
}

.material-channel-product-picker > header small,
.material-channel-product-picker > header h3,
.material-channel-product-picker > header p {
  margin: 0;
}

.material-channel-product-picker > header small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}

.material-channel-product-picker > header h3 {
  margin-top: 6px;
  font-size: 28px;
}

.material-channel-product-picker > header p {
  color: var(--muted);
  font-size: 13px;
}

.material-channel-product-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.material-channel-product-grid button {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: 118px auto;
  gap: 14px;
  padding: 14px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.material-channel-product-grid button:hover {
  background: #fbfdff;
  border-color: #d7e8fb;
  transform: translateY(-2px);
}

.material-channel-product-grid button.active {
  background: #f7fbff;
  border-color: #9bc7f4;
}

.material-channel-product-image {
  display: grid;
  width: 100%;
  height: 118px;
  place-items: center;
  overflow: hidden;
  background: #ffffff;
}

.material-channel-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--product-image-scale, 1));
}

.material-channel-product-image .material-product-image-empty:not([hidden]) {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.material-channel-product-grid button > span:not(.material-channel-product-image) {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding-right: 24px;
}

.material-channel-product-grid strong,
.material-channel-product-grid small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.material-channel-product-grid strong {
  font-size: 16px;
  line-height: 1.25;
}

.material-channel-product-grid small {
  color: var(--muted);
  font-size: 12px;
}

.material-channel-product-grid i {
  position: absolute;
  right: 15px;
  bottom: 17px;
  color: var(--muted);
  font-size: 18px;
  font-style: normal;
}

.material-channel-all-folders {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #0066cc;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}

.material-channel-product-state {
  margin: 0;
  padding: 32px 20px;
  background: #ffffff;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.material-channel-product-state.is-error {
  color: #b42318;
}

.material-folder-picker-results > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 22px;
}

.material-folder-picker-results > header small,
.material-folder-picker-results > header h3,
.material-folder-picker-results > header p {
  margin: 0;
}

.material-folder-picker-results > header small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}

.material-folder-picker-results > header h3 {
  margin-top: 6px;
  font-size: 28px;
}

.material-folder-picker-results > header p {
  max-width: 420px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: right;
}

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

.material-folder-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 132px;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  background: #ffffff;
  color: var(--text);
  text-decoration: none;
  transition: background-color 160ms ease;
}

.material-folder-option:hover {
  background: #fbfbfd;
}

.material-folder-preview {
  position: relative;
  display: grid;
  width: 100%;
  height: 132px;
  place-items: center;
  overflow: hidden;
  background: #f7f7f8;
  border-right: 1px solid #ececf0;
}

.material-folder-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.material-folder-fallback {
  color: #9a9aa0;
  font-size: 11px;
  font-weight: 700;
}

.material-folder-copy {
  display: flex;
  min-width: 0;
  justify-content: center;
  flex-direction: column;
  padding: 18px 40px 18px 18px;
}

.material-folder-copy small,
.material-folder-copy strong,
.material-folder-copy em,
.material-folder-copy b {
  display: block;
  min-width: 0;
  font-style: normal;
}

.material-folder-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-folder-copy strong {
  margin-top: 8px;
  overflow-wrap: anywhere;
  font-size: 18px;
  line-height: 1.25;
}

.material-folder-copy em {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.material-folder-copy b {
  margin-top: 8px;
  color: #0066cc;
  font-size: 11px;
  font-weight: 600;
}

.material-folder-option > i {
  position: absolute;
  right: 16px;
  bottom: 18px;
  color: var(--muted);
  font-size: 18px;
  font-style: normal;
}

.material-folder-state {
  margin: 0;
  padding: 34px 20px;
  background: #ffffff;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.material-folder-state.is-error {
  color: #b42318;
}

@media (max-width: 1000px) {
  .material-all-products > div,
  .material-folder-grid,
  .material-channel-product-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-product-shortcuts {
    grid-auto-columns: calc((100% - 12px) / 2);
  }

  .material-channel-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-channel-shortcuts button:nth-child(4n) {
    border-right: 1px solid #ececf0;
  }

  .material-channel-shortcuts button:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  .material-launcher {
    gap: 44px;
  }

  .material-product-shortcuts {
    grid-auto-columns: min(84vw, 310px);
    grid-template-columns: none;
  }

  .material-product-heading {
    align-items: center;
  }

  .material-carousel-controls > small {
    display: none;
  }

  .material-product-shortcuts button,
  .material-product-shortcuts > a {
    min-height: 246px;
    grid-template-rows: 156px auto;
  }

  .material-product-image {
    height: 156px;
  }

  .material-channel-shortcuts,
  .material-type-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-channel-shortcuts button,
  .material-channel-shortcuts button:nth-child(4n),
  .material-type-shortcuts button,
  .material-type-shortcuts button:nth-child(3n) {
    min-height: 78px;
    padding: 16px 12px;
    border-right: 1px solid #ececf0;
  }

  .material-channel-shortcuts button:nth-child(2n),
  .material-type-shortcuts button:nth-child(2n) {
    border-right: 0;
  }

  .material-all-products > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-all-products button {
    grid-template-rows: 90px auto;
    padding: 10px;
  }

  .material-all-product-image {
    height: 90px;
  }

  .material-folder-picker-results {
    margin-top: 18px;
    padding: 20px 14px;
  }

  .material-channel-product-picker {
    margin-top: 16px;
    padding: 20px 14px;
  }

  .material-channel-product-picker > header {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }

  .material-channel-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-channel-product-grid button {
    grid-template-rows: 92px auto;
    padding: 10px;
  }

  .material-channel-product-image {
    height: 92px;
  }

  .material-folder-picker-results > header {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }

  .material-folder-picker-results > header p {
    text-align: left;
  }

  .material-folder-grid {
    grid-template-columns: 1fr;
  }

  .material-folder-option {
    min-height: 112px;
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .material-folder-preview {
    height: 112px;
  }

  .material-folder-copy {
    padding: 14px 36px 14px 14px;
  }

  .material-folder-copy strong {
    font-size: 16px;
  }
}

.tone-blue {
  --tone-color: #0071e3;
  --tone-bg: #f1f7ff;
  --tone-border: #cfe6ff;
}

.tone-green {
  --tone-color: #23824a;
  --tone-bg: #eff8f2;
  --tone-border: #d6ecd9;
}

.tone-orange {
  --tone-color: #b45f00;
  --tone-bg: #fff7e8;
  --tone-border: #f2dfbd;
}

.tone-purple {
  --tone-color: #7651b5;
  --tone-bg: #f7f2ff;
  --tone-border: #e2d6f7;
}

.tone-rose {
  --tone-color: #c8465b;
  --tone-bg: #fff2f4;
  --tone-border: #f2d3d8;
}

.tone-gray {
  --tone-color: #5f6368;
  --tone-bg: #f5f5f7;
  --tone-border: #d9d9de;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--background);
  color: var(--text);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  letter-spacing: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: #d6eaff;
}

.loading-view {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 32px;
  text-align: center;
}

.loading-view p {
  margin: 0;
  color: var(--text);
  font-size: 28px;
  font-weight: 700;
}

.loading-view span {
  display: block;
  max-width: 420px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.site-frame {
  min-height: 100vh;
  background: var(--background);
}

.top-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

.top-nav-inner {
  display: grid;
  width: min(1360px, 100%);
  min-height: 72px;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin: 0 auto;
  padding: 0 28px;
}

.top-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.top-brand span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.top-brand strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 720;
}

.top-nav-actions {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.top-nav-actions::-webkit-scrollbar {
  display: none;
}

.top-link {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  background: transparent;
  border: 0;
  border-radius: 14px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 620;
  cursor: pointer;
}

.top-link:hover,
.top-link.active {
  background: var(--surface);
  color: var(--text);
}

.top-admin-link {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  background: var(--surface);
  border: 0;
  border-radius: 13px;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.top-admin-link:hover,
.top-admin-link.active {
  background: var(--text);
  color: #ffffff;
}

.home-view {
  background: var(--surface);
  color: var(--text);
}

.home-hero {
  width: min(1360px, 100%);
  margin: 0 auto;
  padding: 76px 28px 48px;
}

.home-heading {
  max-width: 880px;
  margin: 0 auto 34px;
  text-align: center;
}

.brand-kicker {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.home-heading h1 {
  margin: 0;
  color: var(--text);
  font-size: 60px;
  font-weight: 720;
  line-height: 1.04;
  letter-spacing: 0;
}

.home-heading > p:last-child {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 22px;
  line-height: 1.45;
}

.search-area {
  position: relative;
  width: min(920px, 100%);
  margin: 0 auto 30px;
  z-index: 10;
}

.search-area-compact {
  width: min(760px, 100%);
  margin: 0 0 42px;
}

.global-search {
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 0 24px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 16px;
  transition:
    background 180ms ease,
    border-color 180ms ease;
}

.home-view .search-area:not(.search-area-compact) .global-search {
  background: #ffffff;
  border-color: #ececf0;
}

.search-area-compact .global-search {
  min-height: 52px;
  padding: 0 18px;
  border-radius: 14px;
}

.global-search:focus-within {
  background: #ffffff;
  border-color: var(--border);
}

.global-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 18px;
}

.search-area-compact input {
  font-size: 15px;
}

.global-search input::placeholder {
  color: var(--muted);
}

.search-glyph {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-right: 14px;
  border: 2px solid var(--muted);
  border-radius: 50%;
}

.search-glyph::after {
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 8px;
  height: 2px;
  background: var(--muted);
  border-radius: 2px;
  content: "";
  transform: rotate(45deg);
}

.search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 100%;
  max-width: 920px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  transform: translateX(-50%);
}

.search-area-compact .search-results {
  left: 0;
  max-width: 760px;
  transform: none;
}

.search-result {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  text-align: left;
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.search-result:last-child {
  border-bottom: 0;
}

.search-result:hover {
  background: var(--surface);
}

.search-result strong,
.search-result small,
.search-result em {
  display: block;
}

.search-result strong {
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 650;
}

.search-result small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.search-result em {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 13px;
  font-style: normal;
  font-weight: 560;
}

.empty-state {
  margin: 0;
  padding: 18px;
  color: var(--muted);
  font-size: 14px;
}

.module-mark {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  border: 1.5px solid currentColor;
  border-radius: 8px;
}

.module-mark::before,
.module-mark::after,
.module-mark span {
  position: absolute;
  display: block;
  content: "";
}

.mark-materials::before {
  inset: 7px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.mark-materials::after {
  top: 7px;
  bottom: 7px;
  left: 13px;
  border-left: 1.5px solid currentColor;
}

.mark-products {
  border-radius: 50%;
}

.mark-products::before {
  inset: 7px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.mark-sops::before,
.mark-sops::after,
.mark-gpt::before,
.mark-templates::before,
.mark-projects::before,
.mark-knowledge::before,
.mark-domestic-request::before,
.mark-domestic-request::after,
.mark-overseas-request::before,
.mark-overseas-request::after {
  left: 7px;
  right: 7px;
}

.mark-sops::before {
  top: 9px;
  border-top: 1.5px solid currentColor;
}

.mark-sops::after {
  top: 15px;
  border-top: 1.5px solid currentColor;
}

.mark-gpt::before {
  top: 7px;
  bottom: 7px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.mark-gpt::after {
  top: 13px;
  left: 13px;
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 50%;
}

.mark-templates::before {
  top: 7px;
  bottom: 7px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
}

.mark-templates::after {
  top: 14px;
  left: 7px;
  right: 7px;
  border-top: 1.5px solid currentColor;
}

.mark-projects::before {
  top: 9px;
  border-top: 1.5px solid currentColor;
}

.mark-projects::after {
  top: 7px;
  bottom: 7px;
  left: 10px;
  border-left: 1.5px solid currentColor;
}

.mark-knowledge::before {
  top: 8px;
  bottom: 8px;
  border-left: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.mark-domestic-request::before,
.mark-overseas-request::before {
  top: 9px;
  border-top: 1.5px solid currentColor;
}

.mark-domestic-request::after,
.mark-overseas-request::after {
  top: 15px;
  border-top: 1.5px solid currentColor;
}

.mark-domestic-request span,
.mark-overseas-request span {
  top: 21px;
  left: 7px;
  right: 12px;
  border-top: 1.5px solid currentColor;
}

.home-nav-board {
  width: min(1360px, 100%);
  margin: 0 auto;
}

.nav-panel {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #ececf0;
  border-radius: 8px;
}

.nav-panel + .nav-panel {
  margin-top: 24px;
}

.nav-panel-head,
.section-label {
  position: relative;
  display: flex;
  min-height: 78px;
  align-items: center;
  padding: 0 32px 0 34px;
  border-bottom: 1px solid #ececf0;
}

.nav-panel-head::before,
.section-label::before {
  position: absolute;
  top: 31px;
  left: 0;
  width: 3px;
  height: 26px;
  background: var(--accent);
  content: "";
}

.nav-panel-head h2,
.section-label h2 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 720;
  line-height: 1.2;
}

.nav-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding: 28px 32px;
}

.nav-card-item {
  display: grid;
  width: 100%;
  min-height: 92px;
  grid-template-columns: 48px minmax(0, 1fr) 28px;
  gap: 20px;
  align-items: center;
  padding: 0 24px 0 22px;
  text-align: left;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.nav-card-item:hover {
  background: #ffffff;
  border-color: var(--border);
  transform: translateY(-1px);
}

.nav-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
}

.nav-icon-materials {
  background: #0071e3;
}

.nav-icon-products {
  background: #111111;
}

.nav-icon-sops {
  background: #6e6e73;
}

.nav-icon-gpt {
  background: #3a8f4f;
}

.nav-icon-templates {
  background: #ff9f0a;
}

.nav-icon-projects {
  background: #4a68c7;
}

.nav-icon-knowledge {
  background: #d94f5c;
}

.nav-icon-domestic-request {
  background: #5f6368;
}

.nav-icon-overseas-request {
  background: #0071e3;
}

.nav-card-text,
.nav-card-text strong,
.nav-card-text small {
  display: block;
  min-width: 0;
}

.nav-card-text strong {
  margin-bottom: 5px;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.nav-card-text small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.nav-chevron {
  position: relative;
  width: 26px;
  height: 26px;
  border: 2px solid #c7c7cc;
  border-radius: 50%;
}

.nav-chevron::after {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #9a9aa0;
  border-right: 2px solid #9a9aa0;
  content: "";
  transform: rotate(45deg);
}

.admin-stage {
  min-height: calc(100vh - 72px);
  padding: 58px 28px 96px;
  background: var(--surface);
}

.admin-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.admin-panel {
  padding: 42px;
  background: #ffffff;
  border: 1px solid #ececf0;
  border-radius: 8px;
}

.admin-login-panel {
  width: min(520px, 100%);
  margin: 56px auto 0;
}

.admin-kicker {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.admin-panel h1 {
  margin: 0;
  color: var(--text);
  font-size: 42px;
  font-weight: 720;
  line-height: 1.1;
}

.admin-panel > span,
.admin-dashboard-head span {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.admin-login-form,
.admin-entries-form {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.admin-login-form label,
.admin-form-grid label {
  display: grid;
  gap: 8px;
}

.admin-login-form label span,
.admin-form-grid label span,
.admin-check span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.admin-login-form input,
.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea {
  width: 100%;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
}

.admin-login-form input,
.admin-form-grid input,
.admin-form-grid select {
  min-height: 44px;
}

.admin-form-grid textarea {
  min-height: 116px;
  padding-top: 12px;
  line-height: 1.55;
  resize: vertical;
}

.admin-login-form input:focus,
.admin-form-grid input:focus,
.admin-form-grid select:focus,
.admin-form-grid textarea:focus {
  background: #ffffff;
  border-color: var(--border);
  outline: 0;
}

.admin-login-form button,
.admin-actions button {
  min-height: 44px;
  padding: 0 18px;
  background: var(--text);
  border: 1px solid var(--text);
  border-radius: 10px;
  color: #ffffff;
  font-weight: 650;
  cursor: pointer;
}

.admin-dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid #ececf0;
}

.admin-tabs {
  display: flex;
  gap: 8px;
  margin: 24px 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.admin-tabs::-webkit-scrollbar {
  display: none;
}

.admin-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.admin-tabs button:hover,
.admin-tabs button.active {
  background: var(--surface);
  color: var(--text);
}

.admin-entry-list {
  display: grid;
  gap: 16px;
}

.admin-entry-card {
  padding: 24px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 8px;
}

.admin-entry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.admin-entry-head strong,
.admin-entry-head small {
  display: block;
}

.admin-entry-head strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
}

.admin-entry-head small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.admin-text-button {
  min-height: 34px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

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

.admin-wide {
  grid-column: 1 / -1;
}

.admin-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-check input {
  width: 18px;
  min-height: 18px;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.admin-actions button:first-child {
  background: #ffffff;
  border-color: var(--border);
  color: var(--text);
}

.admin-error,
.admin-success {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.45;
}

.admin-error {
  background: #fff2f2;
  color: #b42318;
}

.admin-success {
  background: #edf7ee;
  color: #1f7a3f;
}

.content-stage {
  min-width: 0;
}

.content-inner {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 72px 56px 96px;
}

.page-header {
  margin-bottom: 28px;
}

.page-header p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.page-header h1 {
  margin: 0;
  color: var(--text);
  font-size: 46px;
  font-weight: 720;
  line-height: 1.08;
  letter-spacing: 0;
}

.page-header span {
  display: block;
  max-width: 760px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.section-stack {
  display: grid;
  gap: 28px;
}

.category-stack {
  display: grid;
  border-top: 1px solid var(--border);
}

.category-band {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 44px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}

.category-band h3,
.product-grid h3,
.detail-panel h3,
.prompt-panel h3,
.prompt-panel h4,
.block-title {
  margin: 0;
  color: var(--text);
  font-weight: 650;
  letter-spacing: 0;
}

.category-band h3 {
  font-size: 22px;
}

.category-band p,
.product-grid p,
.detail-panel p,
.prompt-panel p,
.template-row span,
.knowledge-row span {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.category-band ul,
.plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-band ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.category-band li,
.directory-grid span,
.directory-grid a,
.resource-grid span,
.status-strip span,
.tag-row span {
  min-width: 0;
  padding: 11px 12px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
}

.plain-list {
  display: grid;
  gap: 10px;
}

.plain-list li {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.directory-grid a {
  color: var(--text);
  text-decoration: none;
}

.directory-grid a:hover {
  background: #ececf0;
}

.sop-source-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-top: 18px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.sop-source-link:hover {
  background: var(--surface);
}

.product-home-panel,
.detail-panel,
.prompt-panel {
  padding: 34px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 22px;
}

.panel-intro p,
.product-head p,
.detail-head p,
.prompt-panel p:first-child,
.template-row p,
.knowledge-row p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.panel-intro h2,
.product-head h2,
.detail-head h2,
.template-row h2,
.knowledge-row h2 {
  margin: 0;
  color: var(--text);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.18;
}

.panel-intro span,
.product-head span,
.detail-head span {
  display: block;
  max-width: 760px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.tag-row,
.status-strip,
.resource-grid,
.directory-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-row {
  margin-top: 22px;
}

.link-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 0;
}

.link-slots div,
.progress-block,
.template-row dl,
.knowledge-row dl,
.detail-head dl {
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
}

dt {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

dd {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.status-strip {
  margin-bottom: 4px;
}

.status-strip span,
.tag-row span {
  color: var(--muted);
}

.product-head,
.detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 28px;
  align-items: start;
  margin-bottom: 30px;
}

.progress-block small,
.progress-block strong,
.progress-block span {
  display: block;
}

.progress-block small {
  color: var(--muted);
  font-size: 13px;
}

.progress-block strong {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 700;
}

.progress-block span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.product-grid,
.rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.product-grid > div,
.rule-grid > div {
  padding: 24px 0;
  border-top: 1px solid var(--border);
}

.block-title {
  margin-bottom: 14px;
  font-size: 18px;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-center {
  gap: 30px;
}

.product-finder {
  display: grid;
  gap: 18px;
  padding: 28px;
  background: #ffffff;
  border: 1px solid #ececf0;
  border-radius: 8px;
}

.product-search {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0 18px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 14px;
}

.product-search:focus-within {
  background: #ffffff;
  border-color: var(--border);
}

.product-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}

.product-search input::placeholder {
  color: var(--muted);
}

.product-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-filter-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.product-filter-toolbar .product-filter-row {
  flex: 1;
}

.product-sheet-links {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: 16px;
}

.product-sheet-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  color: #0066cc;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.product-sheet-link:hover {
  text-decoration: underline;
}

.product-filter-row button {
  min-height: 38px;
  padding: 0 14px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.product-filter-row button:hover,
.product-filter-row button.active {
  background: var(--text);
  border-color: var(--text);
  color: #ffffff;
}

.product-count-line {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

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

.product-card {
  display: grid;
  width: 100%;
  min-height: 420px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  overflow: hidden;
  padding: 0;
  text-align: left;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #ececf0;
  border-radius: 20px;
  color: inherit;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.product-card:hover {
  background: #ffffff;
  border-color: var(--border);
  transform: translateY(-1px);
}

.product-card.is-compare-selected {
  border-color: var(--tone-border, var(--border));
}

.product-card-link {
  display: grid;
  grid-template-rows: 260px minmax(0, 1fr) auto;
  color: inherit;
  text-decoration: none;
}

.product-card-visual {
  display: grid;
  width: 100%;
  min-height: 260px;
  place-items: center;
  padding: 24px 24px 0;
  background: #ffffff;
}

.product-card-visual span {
  display: block;
  width: min(220px, 74%);
  height: 46px;
  background: #111111;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
}

.product-card-visual.has-product-image {
  min-height: 260px;
  overflow: hidden;
}

.product-card-visual img {
  display: block;
  width: min(620px, 100%);
  max-height: 248px;
  object-fit: contain;
  transform: scale(var(--product-image-scale, 1));
}

.product-card-meta {
  padding: 18px 26px 12px;
}

.product-card-meta small,
.product-card-meta strong,
.product-card-meta em {
  display: block;
}

.product-card-meta small {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 650;
}

.product-card-meta small::before {
  width: 7px;
  height: 7px;
  background: var(--tone-color, var(--muted));
  border-radius: 50%;
  content: "";
}

.product-card:hover .product-card-meta small {
  color: var(--tone-color, var(--text));
}

.product-card-meta strong {
  color: var(--text);
  font-size: 25px;
  font-weight: 720;
  line-height: 1.15;
}

.product-card-meta em {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  line-height: 1.55;
}

.product-mini-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  padding: 6px 26px 24px;
  border-top: 0;
}

.product-mini-specs span,
.product-mini-specs small,
.product-mini-specs strong {
  display: block;
  min-width: 0;
}

.product-mini-specs span {
  position: relative;
  display: grid;
  min-height: 46px;
  grid-template-rows: 16px 18px;
  align-content: start;
  gap: 4px;
  padding-left: 14px;
}

.product-mini-specs span::before {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 2px;
  background: var(--tone-border, #ececf0);
  border-radius: 2px;
  content: "";
}

.product-mini-specs small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 16px;
}

.product-mini-specs strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-compare-toggle {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  margin: 0 26px 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.product-compare-toggle:hover,
.product-compare-toggle.active {
  background: var(--tone-bg, var(--surface));
  border-color: var(--tone-border, var(--border));
  color: var(--tone-color, var(--text));
}

.product-compare-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.compare-tray {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px 26px;
  background: #ffffff;
  border: 1px solid #ececf0;
  border-radius: 18px;
}

.compare-tray-head p,
.compare-tray-head strong,
.compare-tray-head span {
  display: block;
  margin: 0;
}

.compare-tray-head p {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.compare-tray-head strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
}

.compare-tray-head span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.compare-chip-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px;
}

.compare-chip-row button,
.compare-empty-chip {
  min-height: 34px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.compare-chip-row button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.compare-chip-row button:hover {
  background: #ffffff;
  border-color: var(--border);
  color: var(--text);
}

.compare-chip-row button span {
  position: relative;
  width: 12px;
  height: 12px;
}

.compare-chip-row button span::before,
.compare-chip-row button span::after {
  position: absolute;
  top: 5px;
  left: 1px;
  width: 10px;
  border-top: 1.5px solid currentColor;
  content: "";
}

.compare-chip-row button span::before {
  transform: rotate(45deg);
}

.compare-chip-row button span::after {
  transform: rotate(-45deg);
}

.compare-tray-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.compare-start-button,
.compare-clear-button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.compare-start-button {
  background: var(--text);
  border: 1px solid var(--text);
  color: #ffffff;
}

.compare-clear-button {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--muted);
}

.compare-start-button:disabled,
.compare-clear-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.product-detail {
  gap: 34px;
}

.product-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 38px;
  padding: 0 14px;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.product-back-button:hover {
  background: var(--surface);
}

.page-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-bottom: 34px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.page-back-link span {
  font-size: 18px;
  line-height: 1;
  transition: transform 160ms ease;
}

.page-back-link:hover {
  color: var(--text);
}

.page-back-link:hover span {
  transform: translateX(-2px);
}

.product-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 44px;
  align-items: center;
  min-height: 430px;
  padding: 50px;
  background: #ffffff;
  border: 1px solid #ececf0;
  border-radius: 24px;
}

.product-detail-hero p,
.product-detail-hero h2,
.product-detail-hero span {
  margin: 0;
}

.product-detail-hero p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.product-detail-hero h2 {
  margin-top: 14px;
  color: var(--text);
  font-size: 48px;
  font-weight: 720;
  line-height: 1.04;
}

.product-detail-hero > div:first-child > span {
  display: block;
  max-width: 620px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.product-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.product-hero-tags small {
  min-height: 34px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.product-hero-tags small:first-child {
  background: var(--tone-bg, #ffffff);
  border-color: var(--tone-border, var(--border));
  color: var(--tone-color, var(--muted));
}

.product-device {
  display: grid;
  min-height: 220px;
  place-items: center;
}

.product-device span {
  position: relative;
  display: block;
  width: min(310px, 100%);
  height: 120px;
  background: #111111;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
}

.product-device span::before {
  position: absolute;
  top: 26px;
  left: 28px;
  width: 56px;
  height: 68px;
  background: #f5f5f7;
  border-radius: 8px;
  content: "";
}

.product-device span::after {
  position: absolute;
  top: 45px;
  right: 34px;
  width: 36px;
  height: 36px;
  border: 2px solid #f5f5f7;
  border-radius: 50%;
  content: "";
}

.product-device.has-product-image {
  min-height: 330px;
  overflow: hidden;
}

.product-device.has-product-image img {
  display: block;
  width: min(560px, 100%);
  max-height: 330px;
  object-fit: contain;
  transform: scale(var(--product-image-scale, 1));
}

.product-detail-section {
  display: grid;
  gap: 22px;
}

.product-section-label {
  gap: 16px;
  min-height: 92px;
  align-items: center;
  padding: 22px 32px;
}

.product-section-label::before {
  display: none;
}

.product-section-label > div {
  min-width: 0;
}

.product-section-label p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.product-detail-icon,
.product-block-icon {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  background: var(--tone-bg, var(--surface));
  border: 1px solid var(--tone-border, var(--border));
  color: var(--tone-color, var(--muted));
}

.product-detail-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.product-block-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.product-detail-icon::before,
.product-detail-icon::after,
.product-detail-icon span,
.product-block-icon::before,
.product-block-icon::after,
.product-block-icon span {
  position: absolute;
  display: block;
  content: "";
}

.product-detail-icon-overview::before,
.product-block-icon-overview::before,
.product-detail-icon-target::before,
.product-block-icon-target::before {
  top: 23%;
  left: 31%;
  width: 38%;
  height: 38%;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.product-detail-icon-overview span,
.product-block-icon-overview span {
  bottom: 25%;
  left: 26%;
  width: 48%;
  border-top: 2px solid currentColor;
}

.product-detail-icon-target::after,
.product-block-icon-target::after {
  top: 45%;
  left: 45%;
  width: 10%;
  height: 10%;
  background: currentColor;
  border-radius: 50%;
}

.product-detail-icon-capability::before,
.product-detail-icon-capability::after,
.product-detail-icon-capability span,
.product-block-icon-capability::before,
.product-block-icon-capability::after,
.product-block-icon-capability span {
  left: 27%;
  width: 46%;
  border-top: 2px solid currentColor;
  border-radius: 2px;
}

.product-detail-icon-capability::before,
.product-block-icon-capability::before {
  top: 31%;
}

.product-detail-icon-capability::after,
.product-block-icon-capability::after {
  top: 48%;
}

.product-detail-icon-capability span,
.product-block-icon-capability span {
  top: 65%;
}

.product-detail-icon-people::before,
.product-block-icon-people::before {
  top: 24%;
  left: 24%;
  width: 23%;
  height: 23%;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.product-detail-icon-people::after,
.product-block-icon-people::after {
  top: 29%;
  right: 24%;
  width: 18%;
  height: 18%;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.product-detail-icon-people span,
.product-block-icon-people span {
  bottom: 25%;
  left: 22%;
  width: 56%;
  border-top: 2px solid currentColor;
}

.product-detail-icon-key::before,
.product-block-icon-key::before {
  top: 30%;
  left: 23%;
  width: 24%;
  height: 24%;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.product-detail-icon-key::after,
.product-block-icon-key::after {
  top: 49%;
  left: 45%;
  width: 34%;
  border-top: 2px solid currentColor;
}

.product-detail-icon-upgrade::before,
.product-block-icon-upgrade::before {
  top: 25%;
  left: 34%;
  width: 30%;
  height: 30%;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(-45deg);
}

.product-detail-icon-upgrade::after,
.product-block-icon-upgrade::after {
  top: 55%;
  left: 30%;
  width: 42%;
  border-top: 2px solid currentColor;
  transform: rotate(-45deg);
}

.product-detail-icon-chip::before,
.product-block-icon-chip::before,
.product-detail-icon-interface::before,
.product-block-icon-interface::before {
  inset: 27%;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.product-detail-icon-chip::after,
.product-block-icon-chip::after,
.product-detail-icon-interface::after,
.product-block-icon-interface::after {
  top: 46%;
  left: 46%;
  width: 8%;
  height: 8%;
  background: currentColor;
  border-radius: 50%;
}

.product-detail-icon-audio::before,
.product-detail-icon-audio::after,
.product-detail-icon-audio span,
.product-block-icon-audio::before,
.product-block-icon-audio::after,
.product-block-icon-audio span {
  bottom: 26%;
  width: 2px;
  background: currentColor;
  border-radius: 2px;
}

.product-detail-icon-audio::before,
.product-block-icon-audio::before {
  left: 34%;
  height: 28%;
}

.product-detail-icon-audio span,
.product-block-icon-audio span {
  left: 49%;
  height: 42%;
}

.product-detail-icon-audio::after,
.product-block-icon-audio::after {
  right: 34%;
  height: 34%;
}

.product-detail-icon-cards::before,
.product-block-icon-cards::before {
  top: 30%;
  left: 28%;
  width: 42%;
  height: 30%;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.product-detail-icon-cards::after,
.product-block-icon-cards::after {
  right: 24%;
  bottom: 25%;
  width: 42%;
  height: 30%;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.product-detail-icon-image::before,
.product-block-icon-image::before,
.product-detail-icon-file::before,
.product-block-icon-file::before,
.product-detail-icon-document::before,
.product-block-icon-document::before,
.product-detail-icon-page::before,
.product-block-icon-page::before {
  top: 24%;
  left: 30%;
  width: 40%;
  height: 50%;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.product-detail-icon-image::after,
.product-block-icon-image::after {
  top: 34%;
  right: 34%;
  width: 10%;
  height: 10%;
  background: currentColor;
  border-radius: 50%;
}

.product-detail-icon-image span,
.product-block-icon-image span {
  bottom: 30%;
  left: 36%;
  width: 28%;
  border-top: 2px solid currentColor;
  transform: rotate(-25deg);
}

.product-detail-icon-video::before,
.product-block-icon-video::before {
  top: 30%;
  left: 25%;
  width: 40%;
  height: 38%;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.product-detail-icon-video::after,
.product-block-icon-video::after {
  top: 38%;
  right: 23%;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 9px solid currentColor;
}

.product-detail-icon-file::after,
.product-detail-icon-document::after,
.product-detail-icon-page::after,
.product-block-icon-file::after,
.product-block-icon-document::after,
.product-block-icon-page::after {
  top: 42%;
  left: 38%;
  width: 24%;
  border-top: 2px solid currentColor;
}

.product-detail-icon-file span,
.product-detail-icon-document span,
.product-detail-icon-page span,
.product-block-icon-file span,
.product-block-icon-document span,
.product-block-icon-page span {
  top: 55%;
  left: 38%;
  width: 24%;
  border-top: 2px solid currentColor;
}

.product-detail-icon-link::before,
.product-detail-icon-link::after,
.product-block-icon-link::before,
.product-block-icon-link::after {
  top: 36%;
  width: 20%;
  height: 20%;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.product-detail-icon-link::before,
.product-block-icon-link::before {
  left: 24%;
}

.product-detail-icon-link::after,
.product-block-icon-link::after {
  right: 24%;
}

.product-detail-icon-link span,
.product-block-icon-link span {
  top: 49%;
  left: 42%;
  width: 16%;
  border-top: 2px solid currentColor;
}

.white-image-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 28px;
  align-items: center;
  margin-bottom: 16px;
  padding: 30px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 20px;
}

.white-image-panel img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
}

.white-image-panel h3,
.white-image-panel p {
  margin: 0;
}

.white-image-panel h3 {
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
}

.white-image-panel p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.product-list-block {
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.product-list-block.tone-blue,
.product-list-block.tone-green,
.product-list-block.tone-orange,
.product-list-block.tone-purple,
.product-list-block.tone-rose,
.product-list-block.tone-gray,
.parameter-card.tone-blue,
.parameter-card.tone-green,
.parameter-card.tone-orange,
.parameter-card.tone-purple,
.parameter-card.tone-rose,
.parameter-card.tone-gray,
.asset-group-grid article.tone-blue,
.asset-group-grid article.tone-green,
.asset-group-grid article.tone-orange,
.asset-group-grid article.tone-purple,
.asset-group-grid article.tone-rose,
.asset-group-grid article.tone-gray,
.content-production-grid article.tone-blue,
.content-production-grid article.tone-green,
.content-production-grid article.tone-orange,
.content-production-grid article.tone-purple,
.content-production-grid article.tone-rose,
.content-production-grid article.tone-gray,
.product-related-grid div.tone-blue,
.product-related-grid div.tone-green,
.product-related-grid div.tone-orange,
.product-related-grid div.tone-purple,
.product-related-grid div.tone-rose,
.product-related-grid div.tone-gray {
  border-color: var(--tone-border);
}

.product-list-block h3 {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 18px;
  font-weight: 680;
}

.product-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.product-list-block .product-block-head h3,
.asset-group-grid .product-block-head h3,
.content-production-grid .product-block-head h3,
.white-image-panel .product-block-head h3 {
  margin: 0;
}

.product-empty-text {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.capability-panel {
  display: grid;
  gap: 16px;
  padding: 26px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 20px;
}

.product-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-flow span {
  position: relative;
  min-height: 36px;
  padding: 9px 12px 9px 24px;
  background: #ffffff;
  border: 1px solid #ececf0;
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
}

.product-flow span::before {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

.parameter-card-grid,
.asset-group-grid,
.content-production-grid {
  display: grid;
  gap: 14px;
}

.parameter-card-grid,
.asset-group-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.content-production-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.parameter-card,
.asset-group-grid article,
.content-production-grid article {
  min-width: 0;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.parameter-card small,
.parameter-card h3,
.parameter-card p,
.asset-group-grid h3,
.content-production-grid h3 {
  margin: 0;
}

.parameter-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.parameter-card .parameter-note {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--tone-bg, var(--surface));
  border: 1px solid var(--tone-border, var(--border));
  border-radius: 9px;
  color: var(--tone-color, var(--muted));
}

.parameter-note span {
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}

.parameter-card h3,
.asset-group-grid h3,
.content-production-grid h3 {
  margin-top: 8px;
  color: var(--text);
  font-size: 17px;
  font-weight: 680;
}

.parameter-card p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.parameter-link-card a {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  margin-top: 16px;
  color: #0071e3;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.parameter-link-card a:hover {
  text-decoration: underline;
}

.asset-group-grid ul,
.content-production-grid ul {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.asset-group-grid li,
.content-production-grid li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.product-related-grid {
  margin-top: 0;
}

.product-related-grid dt {
  display: flex;
  align-items: center;
  gap: 8px;
}

.related-dot {
  width: 8px;
  height: 8px;
  background: var(--tone-color, var(--muted));
  border-radius: 50%;
}

.compare-page {
  gap: 28px;
}

.compare-empty-panel,
.compare-hero,
.compare-section,
.compare-conclusion {
  background: #ffffff;
  border: 1px solid #ececf0;
  border-radius: 22px;
}

.compare-empty-panel {
  padding: 52px;
}

.compare-empty-panel p,
.compare-empty-panel h2,
.compare-empty-panel span,
.compare-hero p,
.compare-hero h2,
.compare-hero span {
  margin: 0;
}

.compare-empty-panel p,
.compare-hero p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.compare-empty-panel h2,
.compare-hero h2 {
  margin-top: 12px;
  color: var(--text);
  font-size: 42px;
  font-weight: 720;
  line-height: 1.08;
}

.compare-empty-panel span,
.compare-hero > div:first-child > span {
  display: block;
  max-width: 700px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.compare-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 34px;
  align-items: center;
  padding: 34px;
}

.compare-product-strip {
  display: grid;
  grid-template-columns: repeat(var(--compare-count), minmax(0, 1fr));
  gap: 12px;
}

.compare-product-strip article {
  min-width: 0;
  padding: 14px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 16px;
}

.compare-product-image {
  display: grid;
  min-height: 104px;
  place-items: center;
  overflow: hidden;
  margin-bottom: 12px;
  background: #ffffff;
  border-radius: 12px;
}

.compare-product-image span {
  display: block;
  width: min(140px, 74%);
  height: 28px;
  background: #111111;
  border-radius: 7px;
}

.compare-product-image.has-product-image img {
  display: block;
  width: 100%;
  max-height: 98px;
  object-fit: contain;
  transform: scale(var(--product-image-scale, 1));
}

.compare-product-strip small,
.compare-product-strip strong,
.compare-product-strip span {
  display: block;
  min-width: 0;
}

.compare-product-strip small,
.compare-product-strip span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-product-strip strong {
  margin: 4px 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-section {
  overflow: hidden;
}

.compare-section-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 26px 30px;
  border-bottom: 1px solid #ececf0;
}

.compare-section-head h2,
.compare-section-head p {
  margin: 0;
}

.compare-section-head h2 {
  color: var(--text);
  font-size: 26px;
  font-weight: 720;
  line-height: 1.15;
}

.compare-section-head p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.compare-matrix {
  overflow-x: auto;
}

.compare-row {
  display: grid;
  min-width: calc(170px + var(--compare-count) * 210px);
  grid-template-columns: 170px repeat(var(--compare-count), minmax(0, 1fr));
  border-top: 1px solid #ececf0;
}

.compare-row:first-child {
  border-top: 0;
}

.compare-row-head {
  background: var(--surface);
}

.compare-row > span,
.compare-row > strong,
.compare-cell {
  min-width: 0;
  padding: 16px;
  border-left: 1px solid #ececf0;
}

.compare-row > span:first-child {
  border-left: 0;
}

.compare-row > span {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.compare-row > strong {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-cell {
  position: relative;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

.compare-row.is-same-row .compare-cell,
.compare-cell.is-empty {
  color: var(--muted);
}

.compare-row.is-same-row {
  background: #fbfbfd;
}

.compare-row.has-difference .compare-cell.is-different {
  background: var(--tone-bg, #ffffff);
  color: var(--text);
}

.compare-cell.is-upgrade {
  color: var(--tone-color, var(--text));
  font-weight: 650;
}

.compare-cell.is-upgrade::before {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  margin: 0 8px 4px 0;
  padding: 0 7px;
  vertical-align: middle;
  background: #ffffff;
  border: 1px solid var(--tone-border, var(--border));
  border-radius: 8px;
  color: var(--tone-color, var(--text));
  content: "升级";
  font-size: 12px;
  font-weight: 700;
}

.compare-conclusion {
  overflow: hidden;
}

.compare-conclusion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 24px 30px 30px;
}

.compare-conclusion-grid article {
  min-width: 0;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--tone-border, var(--border));
  border-radius: 16px;
}

.compare-conclusion-grid h3,
.compare-conclusion-grid p,
.compare-conclusion-grid ul {
  margin: 0;
}

.compare-conclusion-grid h3 {
  color: var(--tone-color, var(--text));
  font-size: 17px;
  font-weight: 720;
}

.compare-conclusion-grid ul {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}

.compare-conclusion-grid li,
.compare-conclusion-grid p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.compare-conclusion-grid div {
  padding-top: 14px;
  border-top: 1px solid #ececf0;
}

.compare-conclusion-grid div:first-of-type {
  margin-top: 14px;
}

.compare-conclusion-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.directory-grid.compact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detail-panel {
  background: #ffffff;
  border-color: var(--border);
}

.detail-head dl {
  display: grid;
  gap: 14px;
}

.template-section {
  display: grid;
  gap: 16px;
}

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

.prompt-panel {
  display: grid;
  gap: 20px;
}

.prompt-panel h3 {
  font-size: 24px;
}

.prompt-panel h4 {
  font-size: 15px;
}

.prompt-panel pre {
  min-height: 118px;
  margin: 0;
  padding: 18px;
  overflow-x: auto;
  white-space: pre-wrap;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
}

.prompt-panel button,
.filter-row button {
  width: fit-content;
  min-height: 40px;
  padding: 0 15px;
  background: var(--dark);
  border: 1px solid var(--dark);
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
}

.prompt-panel button:hover {
  background: #000000;
}

.template-list,
.knowledge-list {
  display: grid;
  gap: 14px;
}

.template-row,
.knowledge-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--border);
}

.template-row:last-child,
.knowledge-row:last-child {
  border-bottom: 1px solid var(--border);
}

.template-row dl,
.knowledge-row dl {
  display: grid;
  gap: 14px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-row button {
  background: #ffffff;
  border-color: var(--border);
  color: var(--text);
}

.filter-row button:hover,
.filter-row button.active {
  background: var(--dark);
  border-color: var(--dark);
  color: #ffffff;
}

.project-table {
  border-top: 1px solid var(--border);
}

.project-table-head,
.project-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(100px, 0.8fr) minmax(
      92px,
      0.7fr
    ) minmax(92px, 0.7fr) minmax(90px, 0.65fr) minmax(190px, 1.1fr);
  gap: 18px;
  align-items: center;
}

.project-table-head {
  padding: 14px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.project-row {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.project-row strong,
.project-row small {
  display: block;
}

.project-row strong {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}

.project-row small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.project-row > span {
  color: var(--muted);
  font-size: 14px;
}

.status-pill {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  background: var(--surface);
  border-radius: 9px;
  color: var(--text);
}

.asset-platform {
  gap: 34px;
}

.asset-search-stage {
  padding: 30px;
  background: var(--surface);
  border-radius: 18px;
}

.asset-search-box {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 14px;
}

.asset-search-box:focus-within {
  border-color: var(--border);
}

.asset-search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 17px;
}

.asset-source-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
}

.asset-source-line small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-source-line button {
  margin-left: auto;
  padding: 4px 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
}

.asset-connection-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.asset-connection-status.is-configured {
  color: #176b3a;
  border-color: #bcdcc7;
}

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

.asset-library-entry {
  position: relative;
  display: grid;
  grid-column: span 3;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 132px;
  align-items: start;
  padding: 24px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e5e5e8;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.asset-library-entry:nth-child(1) {
  grid-column: span 7;
}

.asset-library-entry:nth-child(2) {
  grid-column: span 5;
}

.asset-library-entry:hover {
  background: var(--surface);
  border-color: var(--border);
  transform: translateY(-2px);
}

.asset-library-entry.active {
  border-color: var(--text);
}

.asset-library-entry > span:nth-child(2) {
  min-width: 0;
}

.asset-library-entry strong,
.asset-library-entry small {
  display: block;
}

.asset-library-entry strong {
  color: var(--text);
  font-size: 19px;
  font-weight: 700;
}

.asset-library-entry small {
  max-width: 420px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.asset-library-entry em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
}

.asset-library-icon {
  position: relative;
  width: 46px;
  height: 46px;
  background: var(--surface);
  border: 1px solid #e5e5e8;
  border-radius: 12px;
}

.asset-library-icon::before,
.asset-library-icon::after,
.asset-library-icon i::before,
.asset-library-icon i::after {
  position: absolute;
  content: "";
}

.asset-library-icon::before {
  inset: 12px 10px;
  border: 1.5px solid #5e5e63;
  border-radius: 3px;
}

.asset-library-icon::after {
  right: 14px;
  bottom: 14px;
  left: 14px;
  height: 1.5px;
  background: #5e5e63;
}

.icon-scene::before {
  border-radius: 50%;
}

.icon-video::before {
  inset: 14px 13px;
  border: 0;
  border-left: 11px solid #5e5e63;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-radius: 0;
}

.icon-video::after {
  display: none;
}

.icon-ai::before {
  inset: 11px;
  border-radius: 50%;
}

.icon-ai::after {
  top: 17px;
  right: 17px;
  bottom: auto;
  left: auto;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}

.asset-browser {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.asset-browser-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 0;
}

.asset-browser-head p,
.asset-browser-head h2 {
  margin: 0;
}

.asset-browser-head p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.asset-browser-head h2 {
  margin-top: 5px;
  font-size: 30px;
  line-height: 1.2;
}

.asset-browser-head > span {
  color: var(--muted);
  font-size: 14px;
}

.asset-filter-panel {
  display: grid;
  gap: 14px;
  padding: 18px 0 24px;
  border-top: 1px solid #ececf0;
}

.asset-filter-group {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.asset-filter-group > span {
  padding-top: 7px;
  color: var(--muted);
  font-size: 13px;
}

.asset-filter-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.asset-filter-group button {
  min-height: 32px;
  padding: 0 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}

.asset-filter-group button:hover,
.asset-filter-group button.active {
  background: var(--dark);
  border-color: var(--dark);
  color: #ffffff;
}

.asset-filter-group button small {
  margin-left: 6px;
  color: inherit;
  opacity: 0.7;
}

.asset-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.asset-card {
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e5e5e8;
  border-radius: 8px;
}

.asset-card-preview {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  place-items: center;
  overflow: hidden;
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid #e5e5e8;
  cursor: pointer;
}

.asset-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asset-card-preview > em {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 7px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e5e5e8;
  border-radius: 7px;
  color: var(--text);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.asset-file-kind {
  display: grid;
  width: 72px;
  height: 88px;
  place-items: end center;
  padding-bottom: 14px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.asset-card-body {
  padding: 18px;
}

.asset-card-body p,
.asset-card-body h3,
.asset-card-body > span,
.asset-card-body > small {
  display: block;
  margin: 0;
}

.asset-card-body p {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.asset-card-body h3 {
  margin-top: 7px;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-card-body > span,
.asset-card-body > small {
  margin-top: 7px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-card-tags {
  display: flex;
  min-height: 26px;
  gap: 5px;
  margin-top: 13px;
  overflow: hidden;
}

.asset-card-tags i {
  flex: 0 0 auto;
  padding: 5px 7px;
  background: var(--surface);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.asset-card-actions,
.asset-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.asset-card-actions button,
.asset-card-actions a,
.asset-preview-actions a {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.asset-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 260px;
  place-content: center;
  justify-items: center;
  padding: 42px;
  background: var(--surface);
  border-radius: 8px;
  text-align: center;
}

.asset-empty strong {
  font-size: 20px;
}

.asset-empty span {
  max-width: 620px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.asset-empty a {
  margin-top: 18px;
  color: var(--accent);
  font-size: 14px;
  text-decoration: none;
}

.asset-empty.is-error strong {
  color: #b42318;
}

.asset-preview-layer {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.46);
}

.asset-preview-dialog {
  position: relative;
  display: grid;
  width: min(1120px, 100%);
  max-height: calc(100vh - 56px);
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.75fr);
  overflow: hidden;
  background: #ffffff;
  border-radius: 12px;
}

.asset-preview-media {
  display: grid;
  min-height: 560px;
  place-items: center;
  overflow: auto;
  background: var(--surface);
}

.asset-preview-media img {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 56px);
  object-fit: contain;
}

.asset-preview-info {
  align-self: center;
  min-width: 0;
  padding: 42px;
}

.asset-preview-info p,
.asset-preview-info h2,
.asset-preview-info span,
.asset-preview-info small {
  display: block;
  margin: 0;
}

.asset-preview-info p {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.asset-preview-info h2 {
  margin-top: 8px;
  overflow-wrap: anywhere;
  font-size: 28px;
  line-height: 1.2;
}

.asset-preview-info span,
.asset-preview-info small {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.asset-preview-info small {
  overflow-wrap: anywhere;
}

.asset-preview-actions a {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  line-height: 36px;
}

.asset-preview-actions a:first-child {
  background: var(--dark);
  border-color: var(--dark);
  color: #ffffff;
}

.asset-preview-close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  background: var(--surface);
  border: 1px solid #e5e5e8;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.admin-asset-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.admin-asset-overview > div {
  min-width: 0;
  padding: 28px 24px 28px 0;
}

.admin-asset-overview > div + div {
  padding-left: 24px;
  border-left: 1px solid var(--border);
}

.admin-asset-overview small,
.admin-asset-overview strong,
.admin-asset-overview span {
  display: block;
}

.admin-asset-overview small,
.admin-asset-overview span,
.admin-asset-actions p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.admin-asset-overview strong {
  margin: 8px 0;
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-asset-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 26px;
}

.admin-asset-actions p {
  max-width: 660px;
  margin: 0;
}

.admin-asset-actions button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 16px;
  background: var(--dark);
  border: 1px solid var(--dark);
  border-radius: 9px;
  color: #ffffff;
  cursor: pointer;
}

.admin-asset-actions button:disabled {
  background: #b8b8bd;
  border-color: #b8b8bd;
  cursor: not-allowed;
}

.global-search button,
.product-search button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  background: var(--text);
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.product-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.product-status-row button {
  min-height: 34px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.product-status-row button:hover,
.product-status-row button.active {
  background: var(--surface);
  color: var(--text);
}

.material-view-nav {
  display: flex;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.material-view-nav a {
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.material-view-nav a:hover,
.material-view-nav a.active {
  background: var(--surface);
  color: var(--text);
}

.material-business-search .search-area {
  width: 100%;
  margin-bottom: 0;
}

.material-business-search .global-search {
  background: var(--surface);
}

.asset-view-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.asset-view-heading p,
.asset-view-heading h2,
.asset-view-heading span {
  margin: 0;
}

.asset-view-heading p {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.asset-view-heading h2 {
  font-size: 30px;
  line-height: 1.15;
}

.asset-view-heading > span {
  max-width: 420px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
}

.product-asset-overview,
.case-center {
  padding: 32px;
  background: #ffffff;
  border: 1px solid #ececf0;
  border-radius: 8px;
}

.product-asset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.product-asset-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 14px;
}

.product-asset-card:hover {
  background: #ffffff;
  border-color: var(--border);
}

.product-asset-card > a:first-child {
  display: grid;
  color: inherit;
  text-decoration: none;
}

.product-asset-image {
  display: grid;
  min-height: 176px;
  place-items: center;
  padding: 18px;
  background: #ffffff;
}

.product-asset-image img {
  width: 100%;
  max-height: 150px;
  object-fit: contain;
}

.product-asset-image > span {
  width: 120px;
  height: 30px;
  background: #111111;
  border-radius: 6px;
}

.product-asset-card > a:first-child > span:nth-child(2) {
  display: grid;
  gap: 4px;
  padding: 18px 18px 4px;
}

.product-asset-card small,
.product-asset-card strong,
.product-asset-card em {
  display: block;
}

.product-asset-card small,
.product-asset-card em,
.product-asset-detail-link {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.product-asset-card strong {
  font-size: 18px;
}

.product-asset-card em {
  padding: 4px 18px 18px;
}

.product-asset-detail-link {
  position: absolute;
  right: 18px;
  bottom: 18px;
  color: var(--accent);
  text-decoration: none;
}

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

.case-card {
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 14px;
}

.case-card:hover {
  background: #ffffff;
  border-color: var(--border);
}

.case-cover {
  display: grid;
  min-height: 190px;
  place-items: center;
  overflow: hidden;
  background: #ffffff;
}

.case-cover img {
  width: 100%;
  height: 190px;
  object-fit: contain;
}

.case-cover i {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.case-card-body {
  display: grid;
  gap: 7px;
  padding: 20px;
}

.case-card-body small,
.case-card-body strong,
.case-card-body em,
.case-card-body i {
  display: block;
}

.case-card-body small,
.case-card-body i {
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
}

.case-card-body strong {
  font-size: 20px;
}

.case-card-body em {
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
}

.case-card-body i {
  color: var(--muted);
  font-weight: 500;
}

.case-detail {
  display: grid;
  gap: 28px;
}

.case-detail-hero {
  display: grid;
  min-height: 420px;
  grid-template-columns: 1fr 0.9fr;
  gap: 40px;
  align-items: center;
  padding: 54px;
  background: var(--surface);
  border-radius: 22px;
}

.case-detail-hero p,
.case-detail-hero h2,
.case-detail-hero span {
  margin: 0;
}

.case-detail-hero p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.case-detail-hero h2 {
  margin-top: 12px;
  font-size: 42px;
  line-height: 1.08;
}

.case-detail-hero > div > span {
  display: block;
  margin-top: 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.case-detail-hero > img {
  width: 100%;
  max-height: 310px;
  object-fit: contain;
  background: #ffffff;
}

.case-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.case-meta-row a {
  padding: 8px 11px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
}

.case-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}

.case-story-grid article {
  min-height: 210px;
  padding: 30px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.case-story-grid article:nth-child(2n) {
  border-right: 0;
}

.case-story-grid small,
.case-story-grid h3,
.case-story-grid p {
  margin: 0;
}

.case-story-grid small {
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
}

.case-story-grid h3 {
  margin-top: 8px;
  font-size: 22px;
}

.case-story-grid p,
.case-outcome p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-line;
}

.case-detail-section,
.case-outcome {
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.case-detail-section h2 {
  margin: 0 0 18px;
  font-size: 26px;
}

.case-asset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.case-outcome a,
.product-resource-actions a {
  display: inline-flex;
  margin-top: 12px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.product-asset-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.product-asset-summary span {
  padding: 20px;
  border-right: 1px solid var(--border);
}

.product-asset-summary span:nth-child(4n) {
  border-right: 0;
}

.product-asset-summary small,
.product-asset-summary strong,
.product-resource-loading strong,
.product-resource-loading span {
  display: block;
}

.product-asset-summary small {
  color: var(--muted);
  font-size: 12px;
}

.product-asset-summary strong {
  margin-top: 5px;
  font-size: 22px;
}

.product-detail-section > .case-asset-grid {
  margin-top: 22px;
}

.product-resource-loading {
  padding: 28px 0;
  border-top: 1px solid var(--border);
}

.product-resource-loading span,
.product-resource-actions span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.product-case-links {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.product-case-links > h3 {
  margin: 0 0 16px;
  font-size: 22px;
}

.intent-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 28px;
}

.intent-strip strong {
  margin-right: 4px;
  font-size: 13px;
}

.intent-strip span {
  padding: 8px 11px;
  background: var(--surface);
  border-radius: 9px;
  color: var(--muted);
  font-size: 13px;
}

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

.business-result-group {
  min-width: 0;
  border-top: 1px solid var(--text);
}

.business-result-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 12px;
}

.business-result-group h2 {
  margin: 0;
  font-size: 21px;
}

.business-result-group header span {
  color: var(--muted);
  font-size: 13px;
}

.business-result-item {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.business-result-item strong,
.business-result-item small {
  display: block;
}

.business-result-item strong {
  font-size: 16px;
}

.business-result-item small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.business-result-item em {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
}

.business-result-reason {
  color: var(--accent) !important;
}

.task-recommendation-summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  margin: 8px 0 44px;
  padding: 18px 0;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--border);
}

.task-recommendation-summary span,
.task-recommendation-summary small {
  color: var(--muted);
  font-size: 13px;
}

.task-recommendation-summary strong {
  color: var(--text);
  font-size: 24px;
}

.task-recommendation-section {
  margin-bottom: 60px;
}

.task-recommendation-section > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.task-recommendation-section > header p,
.task-recommendation-section > header h2 {
  margin: 0;
}

.task-recommendation-section > header p {
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.task-recommendation-section > header h2 {
  font-size: 28px;
}

.task-recommendation-section > header > span {
  color: var(--muted);
  font-size: 13px;
}

.task-asset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.task-asset-card {
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.task-asset-visual {
  display: grid;
  width: 100%;
  min-height: 230px;
  place-items: center;
  padding: 18px;
  background: var(--surface);
  border: 0;
  cursor: pointer;
}

.task-asset-visual img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: contain;
}

.task-asset-copy {
  padding: 20px;
}

.task-asset-copy p,
.task-asset-copy h3,
.task-asset-copy small {
  margin: 0;
}

.task-asset-copy p {
  color: var(--muted);
  font-size: 11px;
}

.task-asset-copy h3 {
  overflow: hidden;
  margin-top: 7px;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-asset-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}

.task-asset-tags span {
  padding: 5px 7px;
  background: var(--surface);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
}

.task-asset-copy > small {
  display: block;
  min-height: 40px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.task-asset-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.task-asset-actions button,
.task-asset-actions a {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

.task-support-grid {
  margin-top: 8px;
}

.task-package-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin: 12px 0 40px;
  padding: 22px 0;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--border);
}

.task-package-intro small,
.task-package-intro strong {
  display: block;
}

.task-package-intro small {
  color: var(--muted);
  font-size: 12px;
}

.task-package-intro strong {
  margin-top: 7px;
  font-size: 17px;
}

.task-workflow-path {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 78px;
  border-bottom: 1px solid var(--border);
}

.task-workflow-path article {
  min-width: 0;
  padding: 4px 24px 28px 0;
}

.task-workflow-path article + article {
  padding-left: 24px;
  border-left: 1px solid var(--border);
}

.task-workflow-path span,
.task-workflow-path strong,
.task-workflow-path small {
  display: block;
}

.task-workflow-path span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.task-workflow-path strong {
  margin-top: 12px;
  font-size: 15px;
}

.task-workflow-path small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.work-package-section {
  margin-bottom: 78px;
}

.work-package-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}

.work-package-heading p,
.work-package-heading h2 {
  margin: 0;
}

.work-package-heading p {
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.work-package-heading h2 {
  font-size: 29px;
}

.work-package-heading > a,
.work-package-heading > span {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.work-package-heading > a:hover {
  color: var(--accent);
}

.task-product-overview {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 54px;
  padding: 46px 54px;
  background: var(--surface);
  border-radius: 20px;
}

.task-product-image {
  display: grid;
  min-height: 260px;
  place-items: center;
}

.task-product-image img {
  display: block;
  width: 100%;
  max-width: 440px;
  height: 250px;
  object-fit: contain;
}

.task-product-summary small,
.task-product-summary h3,
.task-product-summary p {
  margin: 0;
}

.task-product-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.task-product-summary h3 {
  margin-top: 10px;
  font-size: 34px;
}

.task-product-summary p {
  max-width: 620px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.task-audience-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.task-audience-list span {
  padding: 7px 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
}

.task-product-knowledge {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  padding-top: 30px;
}

.task-product-knowledge > div {
  border-top: 1px solid var(--text);
}

.task-product-knowledge h3 {
  margin: 18px 0 14px;
  font-size: 18px;
}

.task-product-knowledge ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-product-knowledge li {
  position: relative;
  padding: 9px 0 9px 18px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.task-product-knowledge li::before {
  position: absolute;
  top: 18px;
  left: 2px;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  content: "";
}

.task-coverage-list {
  border-top: 1px solid var(--text);
}

.task-coverage-list a {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 82px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.task-coverage-list i {
  width: 8px;
  height: 8px;
  background: var(--border);
  border-radius: 50%;
}

.task-coverage-list .is-ready i {
  background: var(--accent);
}

.task-coverage-list .is-partial i {
  background: #86868b;
  outline: 3px solid #ededf0;
}

.task-coverage-list strong,
.task-coverage-list small {
  display: block;
}

.task-coverage-list strong {
  font-size: 15px;
}

.task-coverage-list small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.task-coverage-list em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.task-support-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 38px;
  border-top: 1px solid var(--text);
}

.task-support-item {
  display: flex;
  min-width: 0;
  min-height: 118px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 2px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.task-support-item small,
.task-support-item strong,
.task-support-item em {
  display: block;
}

.task-support-item small {
  color: var(--accent);
  font-size: 11px;
}

.task-support-item strong {
  margin-top: 7px;
  font-size: 16px;
}

.task-support-item em {
  overflow: hidden;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}

.task-support-item i {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 17px;
  font-style: normal;
  transition: transform 160ms ease;
}

.task-support-item:hover i {
  transform: translateX(3px);
}

.task-section-gap {
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.task-section-gap.is-section {
  margin: -34px 0 60px;
}

.task-section-gap strong,
.task-section-gap span {
  display: block;
}

.task-section-gap span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
}

.task-delivery-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--border);
}

.task-delivery-layout > div {
  min-width: 0;
  padding: 30px 34px 34px 0;
}

.task-delivery-layout > div + div {
  padding-left: 34px;
  border-left: 1px solid var(--border);
}

.task-delivery-layout small,
.task-delivery-layout strong,
.task-delivery-layout span {
  display: block;
}

.task-delivery-layout small {
  color: var(--muted);
  font-size: 11px;
}

.task-delivery-layout strong {
  overflow-wrap: anywhere;
  margin-top: 10px;
  font-size: 18px;
}

.task-delivery-layout span {
  margin-top: 11px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.task-delivery-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.task-delivery-actions a,
.task-delivery-layout > div > a {
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
}

.task-delivery-actions code {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
}

.task-delivery-layout dl {
  margin: 22px 0 18px;
}

.task-delivery-layout dl div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
}

.task-delivery-layout dt {
  color: var(--muted);
}

.task-delivery-layout dd {
  margin: 0;
}

.task-clarification {
  margin: 18px 0 48px;
  padding: 34px 38px;
  background: var(--surface);
  border-radius: 16px;
}

.task-clarification > p,
.task-clarification > h2,
.task-clarification > span {
  margin: 0;
}

.task-clarification > p {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.task-clarification > h2 {
  margin-top: 9px;
  font-size: 25px;
}

.task-clarification > span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.task-choice-group {
  margin-top: 26px;
}

.task-choice-group > strong {
  display: block;
  margin-bottom: 11px;
  font-size: 13px;
}

.task-choice-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-choice-group a {
  padding: 8px 11px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  text-decoration: none;
}

.task-choice-group a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.recent-task-section {
  margin-top: 70px;
  border-top: 1px solid var(--text);
}

.recent-task-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0 10px;
}

.recent-task-section > header p,
.recent-task-section > header h2 {
  margin: 0;
}

.recent-task-section > header p {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.recent-task-section > header h2 {
  margin-top: 5px;
  font-size: 23px;
}

.recent-task-section > header button {
  padding: 4px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.recent-task-list a {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.recent-task-list strong,
.recent-task-list small {
  display: block;
}

.recent-task-list strong {
  font-size: 15px;
}

.recent-task-list small,
.recent-task-list time {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.business-search-empty {
  padding: 34px 0;
  border-top: 1px solid var(--border);
}

.business-search-empty strong,
.business-search-empty span {
  display: block;
}

.business-search-empty span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
}

.admin-asset-manager,
.admin-case-manager {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.admin-asset-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.admin-asset-list-head strong,
.admin-asset-list-head span {
  display: block;
}

.admin-asset-list-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.admin-asset-list {
  max-height: 360px;
  overflow: auto;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.admin-asset-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.admin-asset-row:last-child {
  border-bottom: 0;
}

.admin-asset-row strong,
.admin-asset-row small {
  display: block;
}

.admin-asset-row strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-asset-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.admin-tag-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.admin-tag-editor label {
  display: grid;
  gap: 7px;
}

.admin-tag-editor label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.admin-tag-editor select,
.admin-tag-editor input {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 8px;
}

.admin-case-list {
  display: grid;
  gap: 18px;
}

.admin-case-form {
  padding: 24px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 8px;
}

.admin-case-form select[multiple] {
  min-height: 118px;
  padding: 8px;
}

@media (max-width: 1100px) {
  .top-nav-inner {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
    padding: 12px 24px;
  }

  .top-nav-actions {
    justify-content: flex-start;
    padding-bottom: 2px;
  }

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

  .content-inner {
    padding: 58px 36px 82px;
  }

  .category-band,
  .product-head,
  .detail-head,
  .template-row,
  .product-detail-hero,
  .compare-hero,
  .white-image-panel,
  .knowledge-row {
    grid-template-columns: 1fr;
  }

  .link-slots,
  .resource-grid,
  .product-card-grid,
  .parameter-card-grid,
  .asset-group-grid,
  .compare-conclusion-grid,
  .directory-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .compare-tray-actions {
    justify-content: flex-start;
  }

  .project-table-head {
    display: none;
  }

  .project-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .asset-library-entry,
  .asset-library-entry:nth-child(1),
  .asset-library-entry:nth-child(2) {
    grid-column: span 6;
  }

  .asset-result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .asset-preview-dialog {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .asset-preview-media {
    min-height: 380px;
  }
}

@media (max-width: 860px) {
  .top-nav-inner {
    padding: 12px 18px 10px;
  }

  .top-brand {
    margin-bottom: 0;
  }

  .top-nav-actions {
    margin: 0 -18px;
    padding: 0 18px 2px;
    justify-content: flex-start;
  }

  .content-inner {
    padding: 42px 22px 72px;
  }

  .home-hero {
    min-height: auto;
    padding: 50px 18px 54px;
  }

  .home-heading h1 {
    font-size: 44px;
  }

  .home-heading > p:last-child {
    font-size: 19px;
  }

  .global-search {
    min-height: 58px;
    padding: 0 18px;
  }

  .global-search input {
    font-size: 16px;
  }

  .admin-stage {
    padding: 34px 18px 72px;
  }

  .admin-panel {
    padding: 24px;
  }

  .admin-panel h1 {
    font-size: 34px;
  }

  .admin-dashboard-head,
  .admin-entry-head {
    display: grid;
  }

  .admin-tabs {
    margin-right: -24px;
    margin-left: -24px;
    padding: 0 24px;
  }

  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .nav-card-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px;
  }

  .nav-panel-head,
  .section-label {
    min-height: 66px;
    padding: 0 22px 0 24px;
  }

  .nav-panel-head::before,
  .section-label::before {
    top: 23px;
    height: 24px;
  }

  .nav-card-item {
    min-height: 82px;
    grid-template-columns: 44px minmax(0, 1fr) 26px;
    gap: 16px;
    padding: 0 18px;
  }

  .nav-icon {
    width: 44px;
    height: 44px;
  }

  .nav-card-text strong {
    font-size: 16px;
  }

  .page-header h1 {
    font-size: 40px;
  }

  .page-header span {
    font-size: 16px;
  }

  .category-band ul,
  .product-grid,
  .rule-grid,
  .template-grid,
  .link-slots,
  .resource-grid,
  .product-card-grid,
  .product-mini-specs,
  .parameter-card-grid,
  .asset-group-grid,
  .content-production-grid,
  .compare-conclusion-grid,
  .directory-grid.compact,
  .project-row {
    grid-template-columns: 1fr;
  }

  .product-finder,
  .product-detail-hero,
  .compare-hero,
  .capability-panel {
    padding: 22px;
    border-radius: 18px;
  }

  .product-filter-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .product-sheet-links {
    justify-content: flex-start;
  }

  .product-card {
    min-height: 380px;
    padding: 0;
    border-radius: 18px;
  }

  .product-card-link {
    grid-template-rows: 230px minmax(0, 1fr) auto;
  }

  .product-card-visual,
  .product-card-visual.has-product-image {
    min-height: 230px;
  }

  .product-card-visual img {
    max-height: 220px;
  }

  .product-card-meta {
    padding: 22px 22px 10px;
  }

  .product-mini-specs {
    padding: 4px 22px 22px;
  }

  .product-compare-toggle {
    margin: 0 22px 22px;
  }

  .product-card-meta strong {
    font-size: 22px;
  }

  .product-detail-hero {
    min-height: auto;
  }

  .product-detail-hero h2 {
    font-size: 38px;
  }

  .compare-empty-panel {
    padding: 28px;
  }

  .compare-empty-panel h2,
  .compare-hero h2 {
    font-size: 34px;
  }

  .compare-product-strip {
    grid-template-columns: 1fr;
  }

  .compare-section-head {
    padding: 22px;
  }

  .compare-row {
    min-width: calc(150px + var(--compare-count) * 190px);
    grid-template-columns: 150px repeat(var(--compare-count), minmax(0, 1fr));
  }

  .compare-row > span,
  .compare-row > strong,
  .compare-cell {
    padding: 14px;
  }

  .compare-conclusion-grid {
    padding: 22px;
  }

  .product-device {
    min-height: 170px;
  }

  .product-home-panel,
  .detail-panel,
  .prompt-panel {
    padding: 24px;
    border-radius: 18px;
  }

  .asset-search-stage {
    padding: 18px;
    border-radius: 14px;
  }

  .asset-search-box {
    min-height: 56px;
    padding: 0 16px;
  }

  .asset-source-line {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .asset-source-line button {
    margin-left: 0;
  }

  .asset-library-entry,
  .asset-library-entry:nth-child(1),
  .asset-library-entry:nth-child(2) {
    grid-column: 1 / -1;
    min-height: 108px;
    padding: 20px;
  }

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

  .asset-filter-group {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .asset-filter-group > span {
    padding-top: 0;
  }

  .asset-preview-layer {
    padding: 0;
  }

  .asset-preview-dialog {
    width: 100%;
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0;
  }

  .asset-preview-media {
    min-height: 42vh;
  }

  .asset-preview-info {
    padding: 28px 22px 42px;
  }

  .admin-asset-overview {
    grid-template-columns: 1fr;
  }

  .admin-asset-overview > div,
  .admin-asset-overview > div + div {
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .admin-asset-overview > div:first-child {
    border-top: 0;
  }

  .admin-asset-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .asset-result-grid {
    grid-template-columns: 1fr;
  }

  .asset-library-entry {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .asset-library-entry > em {
    display: none;
  }
}

@media (max-width: 980px) {
  .product-asset-grid,
  .case-grid,
  .case-asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-detail-hero {
    grid-template-columns: 1fr;
  }

  .business-result-grid {
    grid-template-columns: 1fr;
  }

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

  .task-workflow-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border);
  }

  .task-workflow-path article,
  .task-workflow-path article + article {
    padding: 22px 22px 24px 0;
    border-bottom: 1px solid var(--border);
    border-left: 0;
  }

  .task-workflow-path article:nth-child(even) {
    padding-left: 22px;
    border-left: 1px solid var(--border);
  }

  .task-product-overview {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .task-product-image {
    min-height: 210px;
  }

  .task-support-list {
    grid-template-columns: 1fr;
  }

  .admin-tag-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .global-search button,
  .product-search button {
    padding: 0 12px;
  }

  .task-recommendation-summary {
    grid-template-columns: auto auto;
  }

  .task-recommendation-summary small {
    grid-column: 1 / -1;
  }

  .task-recommendation-section > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .task-asset-grid {
    grid-template-columns: 1fr;
  }

  .task-package-intro,
  .task-product-knowledge,
  .task-delivery-layout {
    grid-template-columns: 1fr;
  }

  .task-workflow-path {
    grid-template-columns: 1fr;
    margin-bottom: 56px;
  }

  .task-workflow-path article,
  .task-workflow-path article + article,
  .task-workflow-path article:nth-child(even) {
    padding: 19px 0;
    border-right: 0;
    border-left: 0;
  }

  .work-package-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .work-package-heading h2 {
    font-size: 25px;
  }

  .task-product-overview {
    padding: 26px 22px;
    border-radius: 16px;
  }

  .task-product-image,
  .task-product-image img {
    min-height: 170px;
    height: 170px;
  }

  .task-product-summary h3 {
    font-size: 28px;
  }

  .task-coverage-list a {
    grid-template-columns: 8px minmax(0, 1fr);
  }

  .task-coverage-list em {
    grid-column: 2;
  }

  .task-delivery-layout > div,
  .task-delivery-layout > div + div {
    padding: 26px 0;
    border-left: 0;
  }

  .task-delivery-layout > div + div {
    border-top: 1px solid var(--border);
  }

  .task-clarification {
    padding: 26px 22px;
  }

  .recent-task-list a {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
  }

  .task-asset-visual {
    min-height: 220px;
  }

  .product-asset-overview,
  .case-center {
    padding: 20px;
  }

  .asset-view-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .asset-view-heading > span {
    text-align: left;
  }

  .product-asset-grid,
  .case-grid,
  .case-asset-grid,
  .case-story-grid,
  .product-asset-summary,
  .admin-tag-editor {
    grid-template-columns: 1fr;
  }

  .case-detail-hero {
    min-height: 0;
    padding: 28px 22px;
    border-radius: 18px;
  }

  .case-detail-hero h2 {
    font-size: 34px;
  }

  .case-story-grid article,
  .case-story-grid article:nth-child(2n),
  .product-asset-summary span,
  .product-asset-summary span:nth-child(4n) {
    border-right: 0;
  }

  .material-view-nav {
    overflow-x: auto;
  }

  .material-view-nav a {
    flex: 0 0 auto;
  }

  .admin-asset-list-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

.asset-browser-controls {
  display: flex;
  align-items: center;
  gap: 18px;
}

.asset-browser-controls > span {
  color: var(--muted);
  font-size: 14px;
}

.asset-display-switch {
  display: flex;
  padding: 3px;
  background: var(--surface);
  border-radius: 10px;
}

.asset-display-switch button {
  min-height: 34px;
  padding: 0 13px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}

.asset-display-switch button.active {
  background: #ffffff;
  color: var(--text);
}

.asset-folder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.asset-folder-card {
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e5e5e8;
  border-radius: 8px;
}

.asset-folder-visual {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 10;
  place-items: center;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid #e5e5e8;
}

.asset-folder-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asset-folder-visual > em {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 29px;
  height: 21px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #c9c9ce;
  border-radius: 4px;
}

.asset-folder-visual > em::before {
  position: absolute;
  top: -5px;
  left: 3px;
  width: 12px;
  height: 6px;
  background: inherit;
  border: 1px solid #c9c9ce;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  content: "";
}

.asset-folder-body {
  padding: 18px;
}

.asset-folder-body p,
.asset-folder-body h3,
.asset-folder-body > span {
  display: block;
  margin: 0;
}

.asset-folder-body p {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.asset-folder-body h3 {
  margin-top: 7px;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-folder-body > span {
  margin-top: 7px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-folder-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 14px;
  color: var(--muted);
}

.asset-folder-facts small {
  font-size: 12px;
}

.asset-folder-body > a {
  display: inline-flex;
  margin-top: 17px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

@media (max-width: 980px) {
  .asset-folder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .asset-browser-head,
  .asset-browser-controls {
    align-items: flex-start;
  }

  .asset-browser-controls {
    flex-direction: column;
    gap: 10px;
  }

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

/* Focused asset browser */
.asset-platform:has(.asset-browser) {
  gap: 38px;
}

.asset-platform:has(.asset-browser) > .material-view-nav {
  margin-bottom: 0;
}

.asset-search-stage {
  padding: 0 0 30px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.asset-search-box {
  min-height: 70px;
  padding: 0 22px;
  background: var(--surface);
  border-color: transparent;
  border-radius: 14px;
}

.asset-search-box:focus-within {
  background: #ffffff;
  border-color: #a8a8ad;
}

.asset-source-line {
  margin-top: 13px;
}

.asset-usage-shelf {
  padding: 4px 0 34px;
  border-bottom: 1px solid var(--border);
}

.asset-usage-shelf > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.asset-usage-shelf > header p,
.asset-usage-shelf > header h2 {
  margin: 0;
}

.asset-usage-shelf > header p {
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
}

.asset-usage-shelf > header h2 {
  margin-top: 5px;
  font-size: 24px;
  line-height: 1.2;
}

.asset-usage-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--surface);
  border-radius: 9px;
}

.asset-usage-switch button {
  min-height: 32px;
  padding: 0 11px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.asset-usage-switch button.active {
  background: #ffffff;
  color: var(--text);
}

.asset-usage-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.asset-usage-item {
  min-width: 0;
  padding: 0 0 12px;
  overflow: hidden;
  background: #ffffff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.asset-usage-item > span {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 10;
  place-items: center;
  overflow: hidden;
  background: var(--surface);
  border-radius: 8px;
}

.asset-usage-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asset-usage-item strong,
.asset-usage-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-usage-item strong {
  margin-top: 10px;
  font-size: 13px;
}

.asset-usage-item small,
.asset-usage-note {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.asset-usage-note {
  margin-bottom: 0;
  padding: 16px 0 2px;
}

.asset-browser {
  padding-top: 0;
  border-top: 0;
}

.asset-browser-head {
  padding: 0 0 20px;
}

.asset-library-strip {
  display: flex;
  gap: 5px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  overflow-x: auto;
  border-bottom: 1px solid #ececf0;
  scrollbar-width: none;
}

.asset-library-strip::-webkit-scrollbar {
  display: none;
}

.asset-library-strip button {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
}

.asset-library-strip button:hover,
.asset-library-strip button.active {
  background: var(--surface);
  color: var(--text);
}

.asset-library-strip strong,
.asset-library-strip small {
  font-size: 12px;
}

.asset-library-strip small {
  color: inherit;
  opacity: 0.58;
}

.asset-filter-panel {
  gap: 12px;
  padding: 0 0 26px;
  border-top: 0;
}

.asset-filter-group {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
}

.asset-filter-group > span {
  padding-top: 8px;
  font-weight: 650;
}

.asset-filter-group button {
  min-height: 34px;
  background: transparent;
  border-color: transparent;
}

.asset-filter-group button:hover {
  background: var(--surface);
  border-color: transparent;
  color: var(--text);
}

.asset-filter-group button.active {
  background: var(--dark);
  border-color: var(--dark);
  color: #ffffff;
}

.asset-product-select {
  position: relative;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
}

.asset-product-select > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.asset-product-select select {
  min-height: 34px;
  max-width: 190px;
  padding: 0 28px 0 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.asset-more-filter-row {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 12px;
  padding-left: 64px;
}

.asset-more-filter-row > button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}

.asset-more-filter-row > button:hover {
  background: var(--surface);
}

.asset-more-filter-row > button span {
  font-size: 16px;
  line-height: 1;
}

.asset-more-filter-row > small {
  color: var(--muted);
  font-size: 12px;
}

.asset-advanced-filters {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding: 16px;
  background: var(--surface);
  border-radius: 10px;
}

.asset-result-grid {
  gap: 22px 16px;
}

.asset-card {
  background: var(--surface);
  border: 0;
  border-radius: 10px;
  transition: transform 160ms ease, background-color 160ms ease;
}

.asset-card:hover {
  background: #f0f0f2;
  transform: translateY(-2px);
}

.asset-card-preview {
  background: #ffffff;
  border-bottom: 0;
}

.asset-card-preview img {
  padding: 4px;
  object-fit: contain;
}

.asset-card-body {
  padding: 16px;
}

.asset-card-body h3 {
  margin-top: 6px;
}

.asset-card-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #dedee2;
}

.asset-card-facts span,
.asset-card-facts small,
.asset-card-facts strong {
  display: block;
  min-width: 0;
}

.asset-card-facts small {
  color: var(--muted);
  font-size: 10px;
}

.asset-card-facts strong {
  margin-top: 4px;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-card-actions {
  margin-top: 14px;
}

.asset-video-mark {
  position: absolute;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding-left: 2px;
  background: rgba(17, 17, 17, 0.78);
  border-radius: 50%;
  color: #ffffff;
  font-size: 13px;
}

.asset-format-mark {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  color: var(--text);
  font-size: 10px;
  font-weight: 750;
}

.asset-preview-media {
  position: relative;
}

.asset-preview-image {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 56px);
  object-fit: contain;
}

.asset-preview-media > .asset-video-mark {
  width: 54px;
  height: 54px;
}

.asset-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 22px 0 0;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.asset-detail-list div,
.asset-detail-list dt,
.asset-detail-list dd {
  min-width: 0;
  margin: 0;
}

.asset-detail-list dt {
  color: var(--muted);
  font-size: 11px;
}

.asset-detail-list dd {
  margin-top: 4px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px;
}

.asset-preview-tags i {
  padding: 5px 7px;
  background: var(--surface);
  border-radius: 6px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

@media (max-width: 980px) {
  .asset-usage-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .asset-result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .asset-search-stage {
    padding: 0 0 24px;
  }

  .asset-search-box {
    min-height: 58px;
    padding: 0 15px;
  }

  .asset-usage-shelf > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .asset-usage-row {
    grid-auto-columns: minmax(170px, 72%);
    grid-auto-flow: column;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .asset-usage-item {
    scroll-snap-align: start;
  }

  .asset-filter-group {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .asset-filter-group > span {
    padding-top: 0;
  }

  .asset-more-filter-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding-left: 0;
  }

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

@media (max-width: 520px) {
  .asset-result-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
  }
}

/* Asset access workflow */
.asset-platform:has(.asset-selection-bar) {
  padding-bottom: 104px;
}

.asset-result-grid {
  gap: 28px 18px;
}

.asset-card {
  position: relative;
  overflow: visible;
  background: #ffffff;
  border: 0;
  border-radius: 8px;
  transition: transform 160ms ease;
}

.asset-card:hover {
  background: #ffffff;
  transform: translateY(-2px);
}

.asset-card.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.asset-card-preview {
  border: 1px solid #ececf0;
  border-radius: 8px;
  background: #f8f8fa;
}

.asset-card-preview img {
  padding: 10px;
}

.asset-card-body {
  display: block;
  width: 100%;
  padding: 15px 2px 2px;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.asset-card-body p,
.asset-card-body h3 {
  margin: 0;
}

.asset-card-body h3 {
  margin-top: 6px;
}

.asset-card-facts {
  display: flex;
  gap: 8px;
  margin-top: 9px;
  padding: 0;
  border: 0;
  color: var(--muted);
  font-size: 11px;
}

.asset-card-facts span + span::before {
  margin-right: 8px;
  content: "·";
}

.asset-select-control {
  position: absolute;
  z-index: 3;
  top: 11px;
  left: 11px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
}

.asset-select-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.asset-select-control span {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #b8b8bd;
  border-radius: 50%;
}

.asset-select-control input:focus-visible + span {
  outline: 3px solid rgba(0, 113, 227, 0.24);
  outline-offset: 2px;
}

.asset-select-control input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
}

.asset-select-control input:checked + span::after {
  position: absolute;
  top: 4px;
  left: 7px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  content: "";
  transform: rotate(45deg);
}

.asset-origin-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 7px;
  background: rgba(17, 17, 17, 0.82);
  border-radius: 5px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}

.asset-file-cover {
  position: relative;
  display: grid;
  width: 82px;
  height: 102px;
  place-items: end center;
  padding-bottom: 15px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
}

.asset-file-cover[hidden] {
  display: none;
}

.asset-file-cover i {
  position: absolute;
  top: 18px;
  width: 30px;
  height: 36px;
  border: 1px solid #a8a8ad;
  border-radius: 3px;
}

.asset-file-cover i::before,
.asset-file-cover i::after {
  position: absolute;
  left: 7px;
  width: 14px;
  height: 1px;
  background: #a8a8ad;
  content: "";
}

.asset-file-cover i::before { top: 12px; }
.asset-file-cover i::after { top: 19px; }

.asset-file-cover strong {
  font-size: 11px;
}

.asset-detail-layer {
  place-items: stretch end;
  padding: 0;
  background: rgba(0, 0, 0, 0.24);
}

.asset-detail-drawer,
.asset-collection-drawer {
  width: min(620px, 92vw);
  height: 100vh;
  max-height: none;
  overflow: hidden;
  background: #ffffff;
  border-radius: 16px 0 0 16px;
}

.asset-detail-drawer {
  display: flex;
  grid-template-columns: none;
  flex-direction: column;
}

.asset-detail-drawer .asset-preview-media {
  flex: 0 0 min(40vh, 410px);
  min-height: 270px;
  max-height: 410px;
  background: #f5f5f7;
}

.asset-detail-drawer .asset-preview-info {
  align-self: auto;
  padding: 30px 34px 42px;
  overflow-y: auto;
}

.asset-detail-drawer .asset-preview-info h2 {
  padding-right: 24px;
  font-size: 24px;
}

.asset-detail-drawer .asset-preview-close,
.asset-collection-drawer > header > button {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  background: rgba(245, 245, 247, 0.94);
  border: 0;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  font-size: 22px;
}

.asset-access-note {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  padding: 13px 14px;
  background: #f5f5f7;
  border-left: 3px solid #6e6e73;
}

.asset-access-note strong,
.asset-access-note span {
  margin: 0;
}

.asset-access-note strong {
  font-size: 12px;
}

.asset-access-note span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.asset-detail-drawer .asset-detail-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 18px;
  margin-top: 22px;
  padding: 18px 0;
}

.asset-detail-drawer .asset-detail-list dd {
  white-space: normal;
}

.asset-version-panel {
  margin-top: 24px;
}

.asset-version-panel h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.asset-version-row {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #ececf0;
}

.asset-version-row span,
.asset-version-row strong,
.asset-version-row small {
  display: block;
  min-width: 0;
  margin: 0;
}

.asset-version-row strong {
  font-size: 12px;
}

.asset-version-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.asset-version-row a,
.asset-version-row button {
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.asset-preview-path {
  margin-top: 22px;
}

.asset-preview-path small,
.asset-preview-path span {
  display: block;
  margin: 0;
}

.asset-preview-path small {
  color: var(--muted);
  font-size: 10px;
}

.asset-preview-path span {
  margin-top: 5px;
  color: var(--text);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.asset-preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

.asset-preview-actions a,
.asset-preview-actions button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  line-height: normal;
  text-decoration: none;
}

.asset-preview-actions a:first-child {
  background: var(--dark);
  border-color: var(--dark);
  color: #ffffff;
}

.asset-preview-actions button:disabled {
  color: #a8a8ad;
  cursor: not-allowed;
}

.asset-detail-layer.is-media-focused {
  place-items: center;
  padding: 26px;
  background: rgba(0, 0, 0, 0.62);
}

.asset-detail-layer.is-media-focused .asset-detail-drawer {
  display: grid;
  width: min(1180px, 100%);
  height: min(820px, calc(100vh - 52px));
  grid-template-columns: minmax(0, 1.5fr) minmax(380px, 0.75fr);
  border-radius: 12px;
}

.asset-detail-layer.is-media-focused .asset-preview-media {
  min-height: 0;
  max-height: none;
}

.asset-selection-bar {
  position: fixed;
  z-index: 42;
  right: 24px;
  bottom: 22px;
  left: 24px;
  display: flex;
  width: min(900px, calc(100% - 48px));
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 0 auto;
  padding: 13px 16px 13px 20px;
  background: #111111;
  border-radius: 12px;
  color: #ffffff;
}

.asset-selection-bar > div:first-child {
  min-width: 0;
}

.asset-selection-bar strong,
.asset-selection-bar span,
.asset-selection-bar em {
  display: block;
}

.asset-selection-bar strong { font-size: 13px; }
.asset-selection-bar span,
.asset-selection-bar em {
  margin-top: 4px;
  color: #b8b8bd;
  font-size: 10px;
  font-style: normal;
}

.asset-selection-bar em { color: #ffffff; }

.asset-selection-bar > div:last-child {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.asset-selection-bar button {
  min-height: 38px;
  padding: 0 12px;
  background: #ffffff;
  border: 0;
  border-radius: 8px;
  color: #111111;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
}

.asset-selection-bar button:last-child {
  background: #2c2c2e;
  color: #ffffff;
}

.asset-selection-bar button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.asset-collection-drawer {
  position: relative;
  padding: 36px 30px;
  overflow-y: auto;
}

.asset-collection-drawer > header {
  position: relative;
  padding-right: 46px;
}

.asset-collection-drawer > header small,
.asset-collection-drawer > header h2,
.asset-collection-drawer > p {
  margin: 0;
}

.asset-collection-drawer > header small {
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
}

.asset-collection-drawer > header h2 {
  margin-top: 5px;
  font-size: 26px;
}

.asset-collection-drawer > p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.asset-collection-list {
  margin-top: 26px;
  border-top: 1px solid var(--border);
}

.asset-collection-list article {
  display: grid;
  min-height: 88px;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #ececf0;
}

.asset-collection-thumb {
  position: relative;
  display: grid;
  width: 72px;
  aspect-ratio: 4 / 3;
  place-items: center;
  overflow: hidden;
  background: var(--surface);
  border-radius: 6px;
}

.asset-collection-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asset-collection-thumb .asset-file-cover {
  width: 38px;
  height: 48px;
  padding-bottom: 5px;
}

.asset-collection-thumb .asset-file-cover i,
.asset-collection-thumb .asset-format-mark,
.asset-collection-thumb .asset-video-mark {
  display: none;
}

.asset-collection-list article > span:nth-child(2),
.asset-collection-list article strong,
.asset-collection-list article small {
  display: block;
  min-width: 0;
}

.asset-collection-list article strong,
.asset-collection-list article small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-collection-list article strong { font-size: 12px; }
.asset-collection-list article small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.asset-collection-actions {
  display: flex;
  gap: 9px;
}

.asset-collection-actions a {
  color: var(--accent);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}

@media (max-width: 720px) {
  .asset-detail-drawer,
  .asset-collection-drawer {
    width: 100%;
    border-radius: 0;
  }

  .asset-detail-drawer .asset-preview-media {
    flex-basis: 34vh;
    min-height: 220px;
  }

  .asset-detail-drawer .asset-preview-info {
    padding: 24px 22px 110px;
  }

  .asset-detail-drawer .asset-detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asset-preview-actions {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .asset-preview-actions a,
  .asset-preview-actions button {
    flex: 0 0 auto;
  }

  .asset-detail-layer.is-media-focused {
    padding: 0;
  }

  .asset-detail-layer.is-media-focused .asset-detail-drawer {
    display: flex;
    width: 100%;
    height: 100vh;
    border-radius: 0;
  }

  .asset-selection-bar {
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: calc(100% - 20px);
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
  }

  .asset-selection-bar > div:last-child {
    width: 100%;
    overflow-x: auto;
  }

  .asset-selection-bar button {
    flex: 0 0 auto;
  }

  .asset-collection-drawer {
    padding: 30px 20px 100px;
  }

  .asset-collection-list article {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .asset-collection-actions {
    grid-column: 2;
  }
}

/* Product-led design asset center */
.asset-platform {
  gap: 64px;
}

.asset-platform > .material-view-nav {
  margin-bottom: -24px;
}

.material-discovery-hero {
  padding: 48px 0 52px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.material-discovery-copy {
  display: flex;
  width: min(920px, 100%);
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.material-discovery-copy > p,
.material-discovery-copy > h2,
.material-discovery-copy > span {
  margin: 0;
}

.material-discovery-copy > p {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.material-discovery-copy > h2 {
  max-width: 650px;
  color: var(--text);
  font-size: 42px;
  font-weight: 720;
  line-height: 1.12;
}

.material-discovery-copy > span {
  max-width: 760px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.asset-intent-search {
  display: grid;
  min-height: 66px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 0 8px 0 20px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 14px;
}

.asset-intent-search:focus-within {
  border-color: #a9a9af;
}

.asset-intent-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}

.asset-intent-search button {
  min-height: 50px;
  padding: 0 18px;
  background: var(--dark);
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 680;
  cursor: pointer;
}

.asset-search-examples {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 18px;
}

.asset-search-examples small {
  color: var(--muted);
  font-size: 13px;
}

.asset-search-examples a {
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid #a9a9af;
}

.product-asset-overview,
.material-recommendations {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.product-asset-overview .asset-view-heading,
.material-recommendations .asset-view-heading {
  margin-bottom: 34px;
}

.featured-asset-product {
  display: grid;
  min-height: 500px;
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.7fr);
  overflow: hidden;
  background: var(--surface);
  border-radius: 24px;
}

.featured-asset-visual {
  display: grid;
  min-width: 0;
  place-items: center;
  padding: 52px;
  background: #ffffff;
}

.featured-asset-visual img {
  display: block;
  width: 100%;
  max-height: 390px;
  object-fit: contain;
}

.featured-asset-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 48px;
}

.featured-asset-copy > p,
.featured-asset-copy > h3,
.featured-asset-copy > span {
  margin: 0;
}

.featured-asset-copy > p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.featured-asset-copy > h3 {
  margin-top: 10px;
  color: var(--text);
  font-size: 38px;
  line-height: 1.12;
}

.featured-asset-copy > span {
  margin-top: 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.featured-asset-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 30px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.featured-asset-stats div {
  padding-right: 12px;
}

.featured-asset-stats strong,
.featured-asset-stats small {
  display: block;
}

.featured-asset-stats strong {
  font-size: 23px;
}

.featured-asset-stats small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.featured-asset-related {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 20px;
}

.featured-asset-related span {
  color: var(--muted);
  font-size: 13px;
}

.featured-asset-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
}

.featured-asset-actions a {
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.featured-asset-actions a:first-child {
  min-height: 42px;
  padding: 11px 16px;
  background: var(--dark);
  border-radius: 10px;
  color: #ffffff;
}

.product-asset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.compact-asset-product {
  display: grid;
  min-width: 0;
  grid-template-rows: 180px auto;
  padding: 24px 20px;
  color: inherit;
  text-decoration: none;
  border-right: 1px solid var(--border);
  transition: background 180ms ease;
}

.compact-asset-product:last-child {
  border-right: 0;
}

.compact-asset-product:hover {
  background: var(--surface);
}

.compact-asset-product-image {
  display: grid;
  min-width: 0;
  place-items: center;
  background: #ffffff;
}

.compact-asset-product-image img {
  display: block;
  width: 100%;
  max-height: 150px;
  object-fit: contain;
  transition: transform 180ms ease;
}

.compact-asset-product:hover img {
  transform: scale(1.025);
}

.compact-asset-product > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 5px;
  margin-top: 18px;
}

.compact-asset-product small,
.compact-asset-product strong,
.compact-asset-product em,
.compact-asset-product > i {
  display: block;
  min-width: 0;
  font-style: normal;
}

.compact-asset-product small,
.compact-asset-product em {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-asset-product strong {
  overflow: hidden;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-asset-product > i {
  display: none;
}

.all-product-assets-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0 auto;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.all-product-assets-link span {
  color: var(--accent);
}

.material-recommendations {
  padding-top: 8px;
}

.material-recommendation-list {
  border-top: 1px solid var(--border);
}

.material-recommendation-row {
  display: grid;
  min-height: 150px;
  grid-template-columns: 46px 164px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 28px;
  padding: 24px 10px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background 180ms ease;
}

.material-recommendation-row:hover {
  background: var(--surface);
}

.recommendation-index {
  color: var(--muted);
  font-size: 13px;
}

.recommendation-product-image {
  display: grid;
  min-width: 0;
  min-height: 96px;
  place-items: center;
  background: #ffffff;
}

.recommendation-product-image img {
  display: block;
  width: 100%;
  max-height: 90px;
  object-fit: contain;
}

.recommendation-copy {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.recommendation-copy small,
.recommendation-copy strong,
.recommendation-copy em {
  display: block;
  font-style: normal;
}

.recommendation-copy small {
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
}

.recommendation-copy strong {
  color: var(--text);
  font-size: 20px;
}

.recommendation-copy em {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.material-recommendation-row > i {
  color: var(--accent);
  font-size: 20px;
  font-style: normal;
}

@media (max-width: 980px) {
  .featured-asset-product {
    grid-template-columns: 1fr;
  }

  .featured-asset-visual {
    min-height: 390px;
  }

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

  .compact-asset-product:nth-child(2n) {
    border-right: 0;
  }

  .compact-asset-product:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 680px) {
  .asset-platform {
    gap: 44px;
  }

  .asset-platform:has(.asset-browser) {
    grid-template-columns: minmax(0, 1fr);
  }

  .asset-platform:has(.asset-browser) > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .asset-platform:has(.asset-browser) > .material-view-nav,
  .asset-platform:has(.asset-browser) .asset-usage-row {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .asset-platform > .material-view-nav {
    margin-bottom: -12px;
  }

  .material-discovery-hero {
    padding: 34px 0 38px;
  }

  .material-discovery-copy {
    padding: 0;
  }

  .material-discovery-copy > p {
    margin-bottom: 12px;
  }

  .material-discovery-copy > h2 {
    font-size: 32px;
  }

  .material-discovery-copy > span {
    margin-top: 16px;
    font-size: 15px;
  }

  .asset-intent-search {
    min-height: 58px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 26px;
    padding-left: 14px;
  }

  .asset-intent-search input {
    font-size: 14px;
  }

  .asset-intent-search button {
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }

  .asset-search-examples {
    display: grid;
  }

  .product-asset-overview .asset-view-heading,
  .material-recommendations .asset-view-heading {
    margin-bottom: 24px;
  }

  .featured-asset-product {
    min-height: 0;
    border-radius: 18px;
  }

  .featured-asset-visual {
    min-height: 280px;
    padding: 28px 20px;
  }

  .featured-asset-visual img {
    max-height: 240px;
  }

  .featured-asset-copy {
    padding: 30px 22px 34px;
  }

  .featured-asset-copy > h3 {
    font-size: 31px;
  }

  .featured-asset-stats strong {
    font-size: 20px;
  }

  .product-asset-grid {
    grid-template-columns: 1fr;
  }

  .compact-asset-product,
  .compact-asset-product:nth-child(2n) {
    min-height: 116px;
    grid-template-columns: 116px minmax(0, 1fr) 20px;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 16px;
    padding: 16px 4px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .compact-asset-product:last-child {
    border-bottom: 0;
  }

  .compact-asset-product-image {
    min-height: 82px;
  }

  .compact-asset-product-image img {
    max-height: 76px;
  }

  .compact-asset-product > span:nth-child(2) {
    margin-top: 0;
  }

  .compact-asset-product > i {
    display: block;
    color: var(--accent);
  }

  .material-recommendation-row {
    min-height: 120px;
    grid-template-columns: 94px minmax(0, 1fr) 18px;
    gap: 16px;
    padding: 18px 0;
  }

  .recommendation-index {
    display: none;
  }

  .recommendation-product-image {
    min-height: 74px;
  }

  .recommendation-product-image img {
    max-height: 68px;
  }

  .recommendation-copy strong {
    font-size: 17px;
  }

  .recommendation-copy em {
    display: none;
  }
}

/* Work loop: the operational layer inside the material library. */
.work-center,
.work-detail {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.work-center {
  padding: 22px 0 72px;
}

.work-center-heading {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.work-center-heading h2 {
  margin: 4px 0 0;
  font-size: 34px;
  line-height: 1.12;
}

.work-center-heading p,
.work-center-heading span {
  margin: 0;
}

.work-center-heading p {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.work-center-heading > span {
  max-width: 520px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  text-align: right;
}

.work-view-switch {
  display: flex;
  gap: 8px;
  margin: 30px 0;
  overflow-x: auto;
}

.work-view-switch button {
  display: inline-flex;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.work-view-switch button span {
  min-width: 20px;
  padding: 2px 6px;
  background: var(--surface);
  border-radius: 8px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.work-view-switch button:hover,
.work-view-switch button.active {
  background: var(--surface);
  color: var(--text);
}

.work-view-switch button.active span {
  background: #ffffff;
  color: var(--text);
}

.work-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}

.work-item-card {
  position: relative;
  min-width: 0;
  padding: 32px 42px 34px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.work-item-card:nth-child(odd) {
  padding-right: 42px;
  border-right: 1px solid var(--border);
}

.work-item-card:nth-child(even) {
  padding-left: 42px;
}

.work-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.work-card-topline small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.work-status {
  padding: 4px 8px;
  background: var(--surface);
  border-radius: 8px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.work-status.is-进行中,
.work-status.is-待审核 {
  background: #eef6ff;
  color: #0066cc;
}

.work-status.is-延期,
.work-status.is-修改中 {
  background: #fff4e8;
  color: #a54f00;
}

.work-item-card > strong,
.work-item-card > span,
.work-item-card > i {
  display: block;
}

.work-item-card > strong {
  margin-top: 18px;
  font-size: 24px;
  line-height: 1.28;
}

.work-item-card > span:not(.work-card-topline) {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.work-item-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  margin: 28px 0 0;
}

.work-item-card dt,
.work-item-card dd {
  margin: 0;
}

.work-item-card dt {
  color: var(--muted);
  font-size: 11px;
}

.work-item-card dd {
  margin-top: 5px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-item-card > i {
  position: absolute;
  top: 50%;
  right: 16px;
  color: var(--accent);
  font-size: 19px;
  font-style: normal;
  transition: transform 160ms ease;
}

.work-item-card:hover > i {
  transform: translateX(4px);
}

.work-detail {
  padding: 20px 0 80px;
}

.work-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
  gap: 64px;
  align-items: end;
  margin-top: 34px;
  padding: 46px 0 40px;
  border-bottom: 1px solid var(--border);
}

.work-detail-hero small,
.work-detail-hero h2,
.work-detail-hero p {
  margin: 0;
}

.work-detail-hero small {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.work-detail-hero h2 {
  max-width: 760px;
  margin-top: 12px;
  font-size: 44px;
  line-height: 1.1;
}

.work-detail-hero p {
  max-width: 720px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.work-detail-hero dl,
.work-demand-grid,
.work-review-list dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 30px;
  margin: 0;
}

.work-detail-hero dt,
.work-demand-grid dt,
.work-review-list dt {
  color: var(--muted);
  font-size: 11px;
}

.work-detail-hero dd,
.work-demand-grid dd,
.work-review-list dd {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}

.work-stage-path {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 36px 0 4px;
  border-bottom: 1px solid var(--border);
}

.work-stage-path span {
  position: relative;
  padding: 0 0 16px 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.work-stage-path span::before {
  position: absolute;
  left: 0;
  width: 6px;
  height: 6px;
  margin-top: 5px;
  background: var(--accent);
  border-radius: 50%;
  content: "";
}

.work-detail-section {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 54px;
  padding: 58px 0;
  border-bottom: 1px solid var(--border);
}

.work-detail-section > header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.work-detail-section > header > span,
.work-detail-section > header small,
.work-detail-section > header h3 {
  display: block;
  margin: 0;
}

.work-detail-section > header > span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.work-detail-section > header small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.work-detail-section > header h3 {
  margin-top: 7px;
  font-size: 20px;
}

.work-demand-grid {
  gap: 26px 44px;
}

.work-product-context {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 42px;
  align-items: center;
}

.work-product-image {
  display: grid;
  min-height: 260px;
  place-items: center;
  background: var(--surface);
  border-radius: 8px;
}

.work-product-image img {
  width: 88%;
  height: 220px;
  object-fit: contain;
}

.work-product-context small,
.work-product-context h3,
.work-product-context p {
  margin: 0;
}

.work-product-context small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.work-product-context h3 {
  margin-top: 8px;
  font-size: 30px;
}

.work-product-context p {
  margin-top: 15px;
  color: var(--muted);
  line-height: 1.7;
}

.work-product-context a {
  display: inline-block;
  margin-top: 22px;
  color: var(--accent);
  font-size: 14px;
  text-decoration: none;
}

.work-product-points,
.work-snapshot-list,
.work-snapshot-standards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.work-product-points span,
.work-snapshot-list span,
.work-snapshot-standards span {
  padding: 7px 10px;
  background: var(--surface);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
}

.work-empty-note {
  padding: 28px 30px;
  background: var(--surface);
  border-radius: 8px;
}

.work-empty-note strong,
.work-empty-note span {
  display: block;
}

.work-empty-note span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.work-package-snapshot {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px 28px;
}

.work-package-snapshot > div:first-child {
  grid-row: 1 / span 3;
  padding-right: 24px;
  border-right: 1px solid var(--border);
}

.work-package-snapshot > div:first-child small,
.work-package-snapshot > div:first-child strong,
.work-package-snapshot > div:first-child span {
  display: block;
}

.work-package-snapshot > div:first-child small,
.work-package-snapshot > div:first-child span,
.work-snapshot-standards small {
  color: var(--muted);
  font-size: 11px;
}

.work-package-snapshot > div:first-child strong {
  margin: 8px 0;
  font-size: 26px;
}

.work-package-snapshot > p {
  margin: 0;
  line-height: 1.7;
}

.work-snapshot-list,
.work-snapshot-standards {
  margin-top: 0;
}

.work-snapshot-standards small {
  width: 100%;
}

.work-review-list,
.work-delivery-list,
.work-rule-list {
  display: grid;
  gap: 14px;
}

.work-review-list article,
.work-delivery-list article,
.work-rule-list article {
  padding: 24px 0;
  border-top: 1px solid var(--border);
}

.work-review-list article:first-child,
.work-delivery-list article:first-child,
.work-rule-list article:first-child {
  padding-top: 0;
  border-top: 0;
}

.work-review-list header,
.work-delivery-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.work-review-list header span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
}

.work-review-list header small {
  margin-left: auto;
  color: var(--muted);
}

.work-review-list dl {
  margin-top: 22px;
}

.work-delivery-list article > div:first-child small,
.work-delivery-list article > div:first-child strong,
.work-delivery-list article > div:first-child span {
  display: block;
}

.work-delivery-list article > div:first-child small,
.work-delivery-list article > div:first-child span {
  color: var(--muted);
  font-size: 11px;
}

.work-delivery-list article > div:first-child strong {
  margin: 7px 0;
  font-size: 16px;
}

.work-delivery-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.work-delivery-actions a {
  padding: 8px 11px;
  background: var(--surface);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.work-delivery-actions a:hover {
  color: var(--accent);
}

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

.work-retrospective-grid > div {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.work-retrospective-grid small,
.work-rule-list small {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.work-retrospective-grid p,
.work-rule-list p {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
}

.work-rule-list strong {
  display: block;
  margin-top: 7px;
}

.work-completion-state {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 22px 24px;
  background: #fff7ed;
  border-radius: 8px;
}

.work-completion-state::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: #c66300;
  border-radius: 50%;
  content: "";
}

.work-completion-state.is-ready {
  background: #f0f8f2;
}

.work-completion-state.is-ready::before {
  background: #23824a;
}

.work-completion-state span {
  color: var(--muted);
  font-size: 13px;
}

/* Supervisor controls reuse the same quiet hierarchy without turning into a dashboard. */
.admin-work-create {
  margin: 24px 0 30px;
  border-bottom: 1px solid var(--border);
}

.admin-work-create summary {
  width: fit-content;
  margin-bottom: 22px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.admin-work-create[open] {
  padding-bottom: 30px;
}

.admin-work-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.31fr) minmax(0, 1fr);
  gap: 42px;
  align-items: start;
}

.admin-work-list {
  position: sticky;
  top: 24px;
  display: grid;
  border-top: 1px solid var(--border);
}

.admin-work-list button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
}

.admin-work-list button:hover,
.admin-work-list button.active {
  background: var(--surface);
}

.admin-work-list span,
.admin-work-list small,
.admin-work-list strong,
.admin-work-list em {
  display: block;
  min-width: 0;
}

.admin-work-list small,
.admin-work-list em,
.admin-work-list i {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.admin-work-list strong {
  margin: 5px 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-work-list i {
  flex: 0 0 auto;
}

.admin-work-detail {
  min-width: 0;
}

.admin-work-section,
.admin-approved-rules {
  margin: 0 0 22px;
  padding: 28px 30px;
  background: var(--surface);
  border: 0;
  border-radius: 8px;
}

.admin-work-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.admin-work-section > header small,
.admin-work-section > header h2,
.admin-work-section > header span {
  margin: 0;
}

.admin-work-section > header small {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}

.admin-work-section > header h2 {
  margin-top: 6px;
  font-size: 21px;
}

.admin-work-section > header > span,
.admin-work-section.is-quiet > p {
  color: var(--muted);
  font-size: 12px;
}

.admin-work-section > header button {
  min-height: 36px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.admin-work-section .admin-form-grid {
  margin-top: 0;
}

.admin-work-history {
  display: grid;
  margin-bottom: 24px;
  border-top: 1px solid var(--border);
}

.admin-work-history article {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.admin-work-history article span,
.admin-work-history article small {
  color: var(--muted);
}

.admin-rule-candidates {
  display: grid;
  gap: 16px;
}

.admin-rule-candidates > form {
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.admin-rule-version-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.admin-rule-version-head small,
.admin-rule-version-head strong {
  display: block;
}

.admin-rule-version-head small,
.admin-rule-version-head > span {
  color: var(--muted);
  font-size: 11px;
}

.admin-rule-version-head strong {
  margin-top: 5px;
}

.admin-work-complete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  background: #fff7ed;
  border-radius: 8px;
}

.admin-work-complete.is-ready {
  background: #f0f8f2;
}

.admin-work-complete small,
.admin-work-complete strong,
.admin-work-complete span {
  display: block;
}

.admin-work-complete small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.admin-work-complete strong {
  margin: 6px 0;
}

.admin-work-complete span {
  color: var(--muted);
  font-size: 12px;
}

.admin-work-complete button {
  min-height: 40px;
  flex: 0 0 auto;
  padding: 0 16px;
  background: var(--text);
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.admin-work-complete button:disabled {
  background: #b8b8bd;
  cursor: not-allowed;
}

.admin-approved-rules {
  margin-top: 42px;
}

@media (max-width: 980px) {
  .work-detail-hero,
  .work-detail-section,
  .admin-work-layout {
    grid-template-columns: 1fr;
  }

  .work-detail-hero {
    gap: 34px;
  }

  .work-detail-section {
    gap: 30px;
  }

  .admin-work-list {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-work-list button:nth-child(odd) {
    border-right: 1px solid var(--border);
  }
}

@media (max-width: 680px) {
  .work-center-heading,
  .work-review-list header,
  .work-delivery-list article,
  .work-completion-state,
  .admin-work-complete {
    align-items: flex-start;
    flex-direction: column;
  }

  .work-center-heading > span {
    text-align: left;
  }

  .work-item-grid,
  .work-product-context,
  .work-package-snapshot,
  .work-retrospective-grid,
  .admin-work-list {
    grid-template-columns: 1fr;
  }

  .work-item-card,
  .work-item-card:nth-child(odd),
  .work-item-card:nth-child(even) {
    padding: 26px 38px 28px 0;
    border-right: 0;
  }

  .work-detail-hero {
    margin-top: 18px;
    padding: 30px 0;
  }

  .work-detail-hero h2 {
    font-size: 34px;
  }

  .work-stage-path {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
  }

  .work-stage-path span {
    min-width: 76px;
    flex: 0 0 76px;
  }

  .work-detail-section {
    padding: 42px 0;
  }

  .work-detail-hero dl,
  .work-demand-grid,
  .work-review-list dl {
    grid-template-columns: 1fr;
  }

  .work-product-image {
    min-height: 220px;
  }

  .work-package-snapshot > div:first-child {
    grid-row: auto;
    padding: 0 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .work-delivery-actions {
    flex-wrap: wrap;
  }

  .admin-work-list button:nth-child(odd) {
    border-right: 0;
  }

  .admin-work-section {
    padding: 24px 18px;
  }

  .admin-work-history article {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.product-detail {
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 72px;
}

.product-detail > *,
.product-detail-section > *,
.product-detail-hero > *,
.product-capability-stack > *,
.product-capability-block {
  min-width: 0;
  max-width: 100%;
}

.product-detail-section,
.product-detail-hero {
  grid-template-columns: minmax(0, 1fr);
}

.product-audio-chain {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 1101px) {
  .product-detail-hero {
    grid-template-columns: minmax(0, 1fr) 460px;
  }
}

@media (max-width: 760px) {
  .product-detail {
    gap: 46px;
  }

  .product-detail-hero {
    gap: 24px;
  }

  .product-device,
  .product-device.has-product-image {
    min-height: 180px;
  }

  .product-device.has-product-image img {
    max-height: 190px;
  }
}