:root {
  --page: #f6f7fb;
  --surface: #ffffff;
  --text: #222331;
  --muted: #777c8d;
  --soft: #eceef5;
  --brand: #8c35f2;
  --brand-2: #d93cc9;
  --accent: #ff4d7d;
  --green: #14a36f;
  --yellow: #ffbf2e;
  --blue: #3977f6;
  --header-blue: #5b84cf;
  --shadow: 0 18px 45px rgba(31, 34, 53, 0.12);
  --radius: 8px;
  --mobile-nav-height: 62px;
  --mobile-nav-safe-bottom: 0px;
  --mobile-browser-bottom-gap: 0px;
  --mobile-visual-bottom-gap: 0px;
  --mobile-nav-visual-shift: 0px;
  --mobile-nav-bottom-offset: max(var(--mobile-browser-bottom-gap), var(--mobile-visual-bottom-gap));
  --mobile-nav-total-height: calc(var(--mobile-nav-height) + var(--mobile-nav-safe-bottom));
  --cart-undo-ring-length: 88;
  --site-glass-card-padding: 14px;
  --site-glass-card-radius: 16px;
  --site-glass-card-border: 1px solid rgba(255, 255, 255, 0.66);
  --site-glass-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.43), rgba(248, 252, 255, 0.24));
  --site-glass-card-shadow:
    0 14px 34px rgba(31, 42, 68, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  --site-glass-card-blur: blur(16px) saturate(1.14);
  --site-glass-row-line: rgba(180, 195, 216, 0.24);
  --site-glass-row-highlight: rgba(255, 255, 255, 0.28);
  --site-glass-label: #858ba0;
}

html {
  overflow-y: scroll;
  touch-action: pan-x pan-y;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background: var(--page);
  touch-action: pan-x pan-y;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.app-booting {
  min-height: 100vh;
  overflow: hidden;
}

body.app-booting .site-header,
body.app-booting main,
body.app-booting .contact-support-popover,
body.app-booting .mobile-bottom-nav {
  visibility: hidden;
}

body.app-booting::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #f6f7fb;
}

body.app-booting::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 4px solid rgba(91, 132, 207, 0.18);
  border-top-color: #35adbd;
  border-radius: 50%;
  animation: appBootSpin 0.8s linear infinite;
}

.yandex-metrika-noscript {
  position: absolute;
  left: -9999px;
}

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

@media (prefers-reduced-motion: reduce) {
  body.app-booting::after {
    animation: none;
  }
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(110deg, rgba(41, 168, 173, 0.98), rgba(70, 181, 202, 0.98) 48%, rgba(91, 132, 207, 0.98)),
    #35adbd;
  box-shadow: 0 8px 28px rgba(35, 108, 143, 0.18);
  isolation: isolate;
}

.site-header::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.site-header::before {
  opacity: 0.72;
  background:
    radial-gradient(70% 90% at 12% 112%, rgba(255, 255, 255, 0.23) 0 24%, transparent 25%),
    radial-gradient(72% 88% at 48% 118%, rgba(255, 255, 255, 0.16) 0 22%, transparent 23%),
    radial-gradient(62% 80% at 88% 108%, rgba(255, 255, 255, 0.13) 0 23%, transparent 24%);
}

.main-bar,
.catalog-shell {
  width: min(1728px, calc(100% - 40px));
  margin: 0 auto;
}

.header-action,
.tool-button,
.favorite-button,
.collection-button {
  border: 0;
}

.main-bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 14px 0;
}

.desktop-brand {
  display: none;
}

.search-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 64px;
  padding: 0 22px;
  border-radius: 22px;
  color: #a5a9b7;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(26, 29, 45, 0.06);
}

.search-field > svg {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  color: #9da1b2;
}

.search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--header-blue);
  font-size: 20px;
  background: transparent;
}

.search-field input::placeholder {
  color: var(--header-blue);
  opacity: 0.72;
}

body.is-materials-cart .search-field {
  display: none;
}

body.is-profile .search-field {
  display: none;
}

body.is-recent-viewed .search-field {
  display: none;
}

body.is-favorites-view .search-field {
  display: none;
}

body.is-downloads-view .search-field {
  display: none;
}

body.is-pending-reviews-view .search-field {
  display: none;
}

body.is-offer-view .search-field {
  display: none;
}

body.is-about-view .search-field {
  display: none;
}

body.is-agreement-view .search-field {
  display: none;
}

body.is-privacy-view .search-field {
  display: none;
}

body.is-refund-view .search-field {
  display: none;
}

body.is-material-reviews-view .search-field {
  display: none;
}

body.is-material-questions-view .search-field {
  display: none;
}

body.is-ai-agent-view .search-field {
  display: none;
}

.header-actions {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.header-action {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 70px;
  padding: 2px 4px;
  color: #fff;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
}

.header-contact-link {
  display: none;
}

.header-action svg {
  width: 28px;
  height: 28px;
}

.header-cart-count[hidden] {
  display: none;
}

.header-cart-count {
  position: absolute;
  top: -4px;
  left: calc(50% + 10px);
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  color: #fff;
  background: #46b5ca;
  box-shadow: 0 6px 14px rgba(70, 181, 202, 0.36);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.contact-support-popover[hidden] {
  display: none;
}

.contact-support-popover {
  position: fixed;
  top: var(--contact-popover-top, 82px);
  right: max(20px, calc((100vw - 1728px) / 2 + 20px));
  left: var(--contact-popover-left, auto);
  z-index: 35;
  width: min(320px, calc(100vw - 32px));
}

.contact-support-popover.is-positioned {
  right: auto;
}

.contact-support-card {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(213, 220, 234, 0.9);
  border-radius: 22px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 60px rgba(31, 34, 53, 0.18);
}

.contact-support-card::before {
  position: absolute;
  top: -8px;
  right: var(--contact-popover-caret-right, 52px);
  width: 18px;
  height: 18px;
  content: "";
  background: #fff;
  border-top: 1px solid rgba(213, 220, 234, 0.9);
  border-left: 1px solid rgba(213, 220, 234, 0.9);
  transform: rotate(45deg);
}

.contact-support-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  color: #7c8395;
  background: #f1f5fb;
}

.contact-support-close svg {
  width: 18px;
  height: 18px;
}

.contact-support-eyebrow {
  margin: 0;
  color: #46b5ca;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.contact-support-card h2 {
  margin: 0;
  padding-right: 38px;
  font-size: 21px;
  line-height: 1.08;
}

.contact-support-text {
  margin: 0;
  color: #7f8595;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.28;
}

.contact-support-links {
  display: grid;
  gap: 8px;
}

.contact-support-link {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 14px;
  color: var(--text);
  background: #f2fbfd;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.contact-support-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(70, 181, 202, 0.16);
}

.contact-support-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  background: #222331;
  font-weight: 900;
}

.contact-support-icon svg {
  width: 20px;
  height: 20px;
}

.contact-support-icon-vk {
  color: #fff;
  background: #0077ff;
  font-size: 10px;
  letter-spacing: 0;
}

.contact-support-link strong,
.contact-support-link small {
  display: block;
}

.contact-support-link strong {
  font-size: 14px;
  line-height: 1.15;
}

.contact-support-link small {
  margin-top: 2px;
  color: #7f8595;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

main {
  padding: 28px 0 56px;
}

@media (min-width: 901px) {
  .main-bar {
    grid-template-columns: minmax(150px, 220px) minmax(220px, 330px) minmax(140px, 1fr) auto;
    justify-content: stretch;
    min-height: 72px;
    padding: 12px 0;
  }

  .desktop-brand {
    display: inline-flex;
    grid-column: 1;
    align-items: center;
    justify-self: start;
    color: #fff;
    font-family: "Avenir Next", "Montserrat", "Inter", system-ui, sans-serif;
    font-size: clamp(29px, 2.65vw, 42px);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    text-shadow:
      0 10px 22px rgba(20, 75, 120, 0.16),
      0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .search-field {
    grid-column: 2;
    width: min(100%, 330px);
    justify-self: center;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 18px;
  }

  .search-field > svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

  .search-field input {
    font-size: 18px;
  }

  body.is-materials-cart .search-field,
  body.is-profile .search-field,
  body.is-recent-viewed .search-field,
  body.is-favorites-view .search-field,
  body.is-downloads-view .search-field,
  body.is-pending-reviews-view .search-field,
  body.is-offer-view .search-field,
  body.is-about-view .search-field,
  body.is-agreement-view .search-field,
  body.is-privacy-view .search-field,
  body.is-refund-view .search-field,
  body.is-material-reviews-view .search-field,
  body.is-material-questions-view .search-field {
    display: grid;
    visibility: hidden;
    pointer-events: none;
  }

  .header-actions {
    grid-column: 4;
    justify-self: end;
    display: grid;
    grid-template-columns: repeat(4, 68px);
    gap: 8px;
  }

  .header-action {
    gap: 4px;
    width: 68px;
    min-width: 68px;
    padding: 1px 3px;
    font-size: 12px;
    font-weight: 650;
  }

  .header-contact-link {
    display: inline-flex;
    grid-column: 3;
    align-items: center;
    justify-self: end;
    min-height: 42px;
    padding: 0 8px;
    border: 0;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.94);
    background: transparent;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.1;
    text-align: center;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    white-space: nowrap;
  }

  .header-contact-link:hover {
    color: #fff;
  }

  .header-action svg {
    width: 22px;
    height: 22px;
  }
}

.catalog-shell {
  position: relative;
}

.category-tiles-section {
  margin: 0 0 30px;
}

.category-tiles-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.category-tiles-head h1 {
  margin: 0;
  color: #202335;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 780;
  line-height: 1;
}

.category-tiles-head p {
  margin: 0;
  color: #7f879a;
  font-size: 18px;
  font-weight: 750;
  text-align: right;
}

.category-tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1020px;
}

.category-tile {
  position: relative;
  min-width: 0;
  min-height: 184px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 18px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(31, 34, 53, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.category-tile::before,
.category-tile::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.category-tile::before {
  width: 118px;
  height: 118px;
  right: -38px;
  top: -34px;
}

.category-tile::after {
  width: 132px;
  height: 132px;
  left: -54px;
  bottom: -62px;
}

.category-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(31, 34, 53, 0.16);
}

.category-tile-icon,
.category-tile-title,
.category-tile-subtitle,
.category-tile-count {
  position: relative;
  z-index: 1;
}

.category-tile-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.22);
}

.category-tile-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 2.4;
}

.category-tile-title {
  margin-top: auto;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 820;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.category-tile-subtitle {
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.category-tile-count {
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 820;
  line-height: 1;
}

.category-tile-count.is-loading {
  min-width: 76px;
  text-align: center;
  opacity: 0.86;
}

.category-tile-teal {
  background: linear-gradient(145deg, #2cb4c4, #2f7dd8);
}

.category-tile-blue {
  background: linear-gradient(145deg, #5277f3, #39b9dd);
}

.category-tile-amber {
  background: linear-gradient(145deg, #ffc547, #ff7a45);
}

.category-tile-pink {
  background: linear-gradient(145deg, #f66aa0, #cf45e6);
}

.category-tile-violet {
  background: linear-gradient(145deg, #7b5cf3, #405ee6);
}

.category-tile-green {
  background: linear-gradient(145deg, #17bd7b, #11a3a7);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px 14px;
  align-items: start;
}

.catalog-shell.is-loading .site-footer {
  display: none;
}

.catalog-loading-state {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  border-radius: 18px;
  color: #6f778d;
  background: #f4f7fb;
  font-size: 15px;
  font-weight: 850;
}

.product-card-skeleton {
  aspect-ratio: 3 / 5;
  min-height: 250px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #edf2f8 0 68%, transparent 68%),
    linear-gradient(90deg, #e4ebf5 0 72%, transparent 72%),
    #f6f8fc;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 53, 0.06);
}

#materials[hidden],
#sentinel[hidden] {
  display: none !important;
}

.product-card {
  min-width: 0;
}

.cover-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  background: #e8eaf2;
  box-shadow: 0 1px 0 rgba(31, 34, 53, 0.04);
}

.cover-link {
  display: block;
  width: 100%;
  height: 100%;
}

.cover-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.22s ease;
}

.protected-image,
.cover-media img,
.profile-recent-cover img,
.cart-row-cover img,
.pending-review-cover img,
.admin-published-cover img,
.material-main-image img,
.quick-view-cover img,
.review-head img,
.material-review-card img,
.feedback-media-item img,
.profile-avatar img,
.account-avatar img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.cover-media,
.cover-link,
.profile-recent-cover,
.cart-row-cover,
.pending-review-cover,
.admin-published-cover,
.material-main-image,
.material-thumbs button,
.quick-view-cover,
.review-head,
.material-review-card,
.feedback-media-item,
.profile-avatar,
.account-avatar,
.admin-preview-card {
  position: relative;
  user-select: none;
  -webkit-touch-callout: none;
}

.cover-media,
.profile-recent-cover,
.cart-row-cover,
.pending-review-cover,
.admin-published-cover,
.material-main-image,
.material-thumbs button,
.quick-view-cover,
.feedback-media-item,
.admin-preview-card {
  isolation: isolate;
}

.cover-media::after,
.profile-recent-cover::after,
.cart-row-cover::after,
.pending-review-cover::after,
.admin-published-cover::after,
.material-main-image::after,
.material-thumbs button::after,
.quick-view-cover::after,
.feedback-media-item::after,
.admin-preview-card .cover-media::after {
  content: "Я Учитель";
  position: absolute;
  inset: -18%;
  z-index: 2;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.34);
  font-size: clamp(13px, 8vw, 44px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 5px rgba(31, 34, 53, 0.22);
  pointer-events: none;
  transform: rotate(-28deg);
}

.material-thumbs button::after,
.feedback-media-item::after,
.cart-row-cover::after,
.pending-review-cover::after {
  font-size: clamp(9px, 5vw, 18px);
  opacity: 0.8;
}

.cover-media::after,
.profile-recent-cover::after,
.cart-row-cover::after,
.pending-review-cover::after,
.admin-published-cover::after,
.material-main-image::after,
.material-thumbs button::after,
.quick-view-cover::after,
.feedback-media-item::after,
.admin-preview-card .cover-media::after {
  content: none !important;
  display: none !important;
}

.cover-media > *,
.profile-recent-cover > *,
.cart-row-cover > *,
.pending-review-cover > *,
.admin-published-cover > *,
.material-main-image > *,
.material-thumbs button > *,
.quick-view-cover > *,
.feedback-media-item > * {
  position: relative;
}

.favorite-button,
.profile-recent-favorite,
.feedback-play,
.cover-subject-pill,
.profile-recent-subject,
.quick-view-label {
  z-index: 4;
}

.cover-media:hover .cover-link img,
.cover-media:focus-within .cover-link img {
  transform: scale(1.035);
}

.cover-subject-pill {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 4;
  max-width: calc(100% - 16px);
  overflow: hidden;
  padding: 3px 8px;
  border-radius: 6px;
  color: #fff;
  background: var(--green);
  box-shadow: 0 6px 18px rgba(31, 34, 53, 0.14);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.quick-view-label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 4;
  display: grid;
  place-items: center;
  min-height: 31px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  color: #222331;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 24px rgba(31, 34, 53, 0.1);
  opacity: 0;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  backdrop-filter: blur(12px);
}

.cover-media:hover .quick-view-label,
.cover-media:focus-within .quick-view-label {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.favorite-button {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #fff;
  background: rgba(24, 26, 38, 0.35);
  backdrop-filter: blur(8px);
}

.favorite-button svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}

.favorite-button.active {
  color: #fff;
  background: var(--accent);
}

.product-title {
  display: -webkit-box;
  min-height: 40px;
  margin: 10px 0 8px;
  overflow: hidden;
  color: #373b49;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #4b5263;
  white-space: nowrap;
}

.rating svg {
  width: 15px;
  height: 15px;
  fill: var(--yellow);
  color: var(--yellow);
}

.collection-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  color: #fff;
  background: #46b5ca;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.collection-button span {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.collection-button svg {
  width: 18px;
  height: 18px;
}

.collection-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(70, 181, 202, 0.24);
}

.catalog-subscription-ad {
  grid-column: span 2;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
}

.catalog-subscription-ad-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 32 / 9;
  border-radius: 16px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.42), transparent 38%),
    linear-gradient(135deg, #2bb7c4, #4d86df);
  box-shadow:
    0 16px 34px rgba(31, 42, 68, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.catalog-subscription-ad img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-subscription-ad-cta {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  color: #268da3;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(31, 42, 68, 0.12);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.catalog-subscription-ad:hover .catalog-subscription-ad-media {
  transform: translateY(-1px);
  box-shadow:
    0 20px 40px rgba(31, 42, 68, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.related-materials-grid .catalog-subscription-ad {
  grid-column: span 2;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 48px 20px;
  border: 1px solid var(--soft);
  border-radius: var(--radius);
  background: #fff;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

.load-sentinel {
  display: block;
  height: 1px;
  min-height: 1px;
  overflow: hidden;
}

.load-sentinel.hidden {
  display: none;
}

.load-sentinel .spinner,
.load-sentinel span {
  display: none;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(280px, auto);
  grid-template-areas: "info links";
  gap: 28px;
  align-items: stretch;
  margin-top: 46px;
  padding: 34px 48px;
  border-radius: 8px;
  color: #626878;
  background: #dfe4ee;
}

.site-footer-info,
.site-footer-links,
.site-footer-contact {
  display: grid;
  gap: 9px;
}

.site-footer-info {
  grid-area: info;
  align-self: end;
  justify-items: start;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.site-footer-info strong {
  color: #3f4452;
  font-size: 16px;
  font-weight: 850;
}

.site-footer-links {
  grid-area: links;
  align-self: start;
  justify-items: end;
}

.site-footer-contact {
  grid-area: contact;
  display: none;
  align-self: center;
  justify-items: center;
}

.site-footer-contact-button {
  padding: 0;
  border: 0;
  color: #5f6473;
  background: transparent;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer-contact-button:hover {
  color: #2aa6b9;
}

.site-footer-messengers {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.site-footer-messenger {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #2aa6b9;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: inset 0 0 0 1px rgba(31, 34, 53, 0.08);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.site-footer-messenger:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(70, 181, 202, 0.28), 0 10px 24px rgba(70, 181, 202, 0.12);
}

.site-footer-messenger svg {
  width: 18px;
  height: 18px;
}

.site-footer-messenger-vk {
  color: #fff;
  background: #0077ff;
}

.site-footer-links button {
  max-width: 390px;
  padding: 0;
  border: 0;
  color: #5f6473;
  background: transparent;
  text-align: right;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.22;
}

.site-footer-links button:hover {
  color: #2aa6b9;
}

.materials-cart-view[hidden] {
  display: none;
}

.materials-cart-view {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: 46px;
}

.ai-agent-view[hidden] {
  display: none;
}

.ai-agent-view {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: 46px;
}

.ai-agent-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  min-height: min(640px, calc(100vh - 170px));
  transition: grid-template-columns 0.22s ease, gap 0.22s ease;
}

.ai-agent-chat-panel {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(41, 51, 76, 0.08);
}

.ai-agent-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  overflow: visible;
  transition: padding 0.22s ease;
}

.ai-agent-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(41, 51, 76, 0.07);
  color: #1f2a44;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}

.ai-agent-sidebar-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ai-agent-new-chat,
.ai-agent-sidebar-toggle {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #e7eef7;
  border-radius: 10px;
  color: #7c879d;
  background: #f3f7fb;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.2s ease;
}

.ai-agent-new-chat svg,
.ai-agent-sidebar-toggle svg {
  width: 16px;
  height: 16px;
}

.ai-agent-sidebar-toggle {
  transform: none;
}

.ai-agent-chat-list {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(41, 51, 76, 0.08);
}

.ai-agent-shell.is-sidebar-collapsed .ai-agent-sidebar {
  align-items: stretch;
  padding: 0;
}

.ai-agent-shell.is-sidebar-collapsed .ai-agent-sidebar-head {
  justify-content: space-between;
  width: 100%;
}

.ai-agent-shell.is-sidebar-collapsed .ai-agent-sidebar-actions {
  justify-content: flex-end;
}

.ai-agent-shell.is-sidebar-collapsed .ai-agent-chat-list {
  display: none;
}

.ai-agent-shell.is-sidebar-collapsed .ai-agent-sidebar-toggle {
  transform: rotate(180deg);
}

.ai-agent-chat {
  display: grid;
  width: 100%;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 0;
  border-radius: 18px;
  color: #1f2a44;
  text-align: left;
  background: #f2fbfd;
  cursor: pointer;
}

.ai-agent-chat.is-active {
  color: #fff;
  background: linear-gradient(135deg, #35b9cf, #5d86df);
  box-shadow: 0 14px 28px rgba(53, 174, 194, 0.22);
}

.ai-agent-chat-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  color: inherit;
  background: rgba(255, 255, 255, 0.45);
}

.ai-agent-chat strong {
  display: block;
  font-size: 15px;
  line-height: 1.15;
}

.ai-agent-chat small {
  display: block;
  margin-top: 3px;
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  opacity: 0.76;
}

.ai-agent-chat-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 18px;
}

.ai-agent-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef3f8;
}

.ai-agent-chat-head p {
  margin: 0 0 5px;
  color: #35aec2;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.ai-agent-chat-head h1 {
  margin: 0;
  color: #1f2a44;
  font-size: 28px;
  line-height: 1.1;
}

.ai-agent-status {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  color: #2399ad;
  background: #eaf8fb;
  font-size: 12px;
  font-weight: 900;
}

.ai-agent-messages {
  display: flex;
  min-height: 320px;
  flex: 1;
  align-items: flex-start;
  padding: 18px 0;
}

.ai-agent-message {
  display: grid;
  max-width: 680px;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
}

.ai-agent-message-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 15px;
  color: #35aec2;
  background: #eaf8fb;
}

.ai-agent-message p {
  margin: 0;
  padding: 14px 16px;
  border-radius: 18px;
  color: #687186;
  background: #f5f9fc;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.ai-agent-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: end;
  padding: 8px;
  border: 1px solid #dbe6f3;
  border-radius: 18px;
  background: #f8fbfe;
}

.ai-agent-composer textarea {
  min-height: 38px;
  max-height: 120px;
  border: 0;
  outline: 0;
  color: #1f2a44;
  background: transparent;
  resize: none;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.ai-agent-composer button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: #35b9cf;
  box-shadow: 0 10px 24px rgba(53, 174, 194, 0.24);
  cursor: pointer;
}

.ai-agent-composer button svg {
  width: 23px;
  height: 23px;
}

.profile-view[hidden],
.admin-view[hidden] {
  display: none;
}

.profile-view,
.admin-view {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: 46px;
}

.recent-view[hidden] {
  display: none;
}

.recent-view {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: 46px;
}

.material-reviews-view[hidden] {
  display: none;
}

.material-reviews-view {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: 46px;
}

.material-reviews-page {
  padding: 22px 24px 24px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(31, 34, 53, 0.08);
}

.material-reviews-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.material-reviews-title-wrap {
  min-width: 0;
}

.material-reviews-title-wrap h1 {
  margin: 0;
  color: #222331;
  font-size: 34px;
  line-height: 1.08;
}

.material-reviews-title-wrap p {
  margin: 6px 0 0;
  color: #7b8295;
  font-size: 16px;
  font-weight: 700;
}

.material-reviews-list {
  display: grid;
  gap: 12px;
}

.material-user-review-card {
  padding: 16px;
  border-radius: 16px;
  background: #f6f8fc;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 53, 0.06);
}

.material-user-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.material-user-review-author {
  display: grid;
  gap: 2px;
}

.material-user-review-author strong {
  color: #24293a;
  font-size: 20px;
  line-height: 1.1;
}

.material-user-review-author span {
  color: #858ca0;
  font-size: 13px;
  font-weight: 650;
}

.material-user-review-body {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.material-user-review-body p {
  margin: 0;
  color: #2f3343;
  font-size: 16px;
  line-height: 1.36;
}

.material-user-question-card .material-user-review-body {
  gap: 8px;
}

.material-question-answer {
  padding: 10px 12px;
  border-radius: 12px;
  background: #edf8fc;
  box-shadow: inset 0 0 0 1px rgba(71, 183, 202, 0.24);
}

.material-question-status {
  color: #7a8295;
  font-size: 14px;
  font-weight: 700;
}

.material-question-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 16px;
  border-radius: 16px;
  background: #f6f8fc;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 53, 0.08);
}

.material-question-label {
  color: #2a3142;
  font-size: 15px;
  font-weight: 700;
}

.material-question-form textarea {
  width: 100%;
  min-height: 94px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid #d5deec;
  border-radius: 14px;
  color: #242b3f;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  outline: none;
}

.material-question-form textarea:focus {
  border-color: #49becf;
  box-shadow: 0 0 0 3px rgba(73, 190, 207, 0.15);
}

.material-question-actions {
  display: grid;
  gap: 8px;
}

.material-question-submit {
  justify-self: start;
}

.admin-panel[hidden] {
  display: none;
}

.admin-panel {
  margin-top: 18px;
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(31, 34, 53, 0.08);
}

.admin-view .admin-panel {
  margin-top: 0;
}

.admin-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.admin-panel-head p {
  margin: 0 0 4px;
  color: #46b5ca;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-panel-head h2 {
  margin: 0;
  color: #222331;
  font-size: 28px;
  line-height: 1.08;
}

.admin-panel-head span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: #268fa3;
  background: #eaf8fb;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.admin-panel-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #eaf8fb;
  color: #268fa3;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.admin-tool-button svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

.admin-tool-button:hover {
  background: #d8f3f8;
  color: #1f7f92;
  transform: translateY(-1px);
}

.admin-tool-button-muted {
  background: #f0f3f8;
  color: #737b90;
}

.admin-tool-button-muted:hover {
  background: #e3e8f1;
  color: #4f596f;
}

.admin-stats {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #dce7f2;
  border-radius: 18px;
  background: #fbfdff;
}

.admin-ad-banner {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #dce7f2;
  border-radius: 18px;
  background: #fbfdff;
}

.admin-ad-banner-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-ad-banner-head p {
  margin: 0 0 4px;
  color: #46b5ca;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-ad-banner-head h3 {
  margin: 0;
  color: #222331;
  font-size: 20px;
  line-height: 1.15;
}

.admin-ad-banner-head span {
  display: block;
  margin-top: 4px;
  color: #7c8498;
  font-size: 12px;
  font-weight: 800;
}

.admin-ad-banner-body {
  display: grid;
  gap: 12px;
}

.admin-ad-banner-upload {
  display: grid;
  gap: 7px;
}

.admin-ad-banner-audience {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.admin-ad-banner-audience span {
  color: #737b90;
  font-size: 13px;
  font-weight: 850;
}

.admin-ad-banner-audience select {
  width: 100%;
  min-height: 44px;
  padding: 0 42px 0 14px;
  border: 1px solid #dce7f2;
  border-radius: 14px;
  color: #222331;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  outline: none;
  cursor: pointer;
}

.admin-ad-banner-audience select:focus {
  border-color: rgba(70, 181, 202, 0.62);
  box-shadow: 0 0 0 4px rgba(70, 181, 202, 0.13);
}

.admin-ad-banner-audience select:disabled {
  cursor: progress;
  opacity: 0.68;
}

.admin-ad-banner-audience em {
  color: #8a93a5;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.35;
}

.admin-ad-banner-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-ad-banner-meta span {
  color: #737b90;
  font-size: 13px;
  font-weight: 850;
}

.admin-ad-banner-meta strong {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: #268fa3;
  background: #eaf8fb;
  font-size: 12px;
  font-weight: 900;
}

.admin-ad-banner-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #dce7f2;
  border-radius: 14px;
  color: #4b5870;
  background: #f8fbff;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.admin-ad-banner-toggle:hover,
.admin-ad-banner-toggle.is-open {
  border-color: rgba(70, 181, 202, 0.46);
  color: #268fa3;
  background: #eef9fc;
  box-shadow: 0 8px 22px rgba(70, 181, 202, 0.08);
}

.admin-ad-banner-toggle svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}

.admin-ad-banner-toggle.is-open svg {
  transform: rotate(180deg);
}

.admin-ad-banner-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  max-width: 100%;
  overflow: visible;
  padding: 0;
}

.admin-ad-banner-list[hidden] {
  display: none;
}

.admin-ad-banner-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dce7f2;
  border-radius: 16px;
  background: #fff;
}

.admin-ad-banner-card.is-active {
  border-color: rgba(70, 181, 202, 0.52);
  box-shadow: 0 10px 24px rgba(70, 181, 202, 0.12);
}

.admin-ad-banner-card img {
  display: block;
  width: 100%;
  aspect-ratio: 32 / 9;
  object-fit: cover;
  border-radius: 10px;
  background: #eaf8fb;
}

.admin-ad-banner-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-ad-banner-card-footer span {
  color: #737b90;
  font-size: 12px;
  font-weight: 850;
}

.admin-ad-banner-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  color: #a14848;
  background: #fff0f0;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.admin-ad-banner-delete svg {
  width: 14px;
  height: 14px;
}

.admin-ad-banner-empty {
  padding: 14px;
  border: 1px dashed #cfd9e8;
  border-radius: 14px;
  color: #7c8498;
  background: #f8fafd;
  font-size: 13px;
  font-weight: 800;
}

.admin-stats-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-stats-head p {
  margin: 0 0 4px;
  color: #46b5ca;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-stats-head h3 {
  margin: 0;
  color: #222331;
  font-size: 22px;
  line-height: 1.1;
}

.admin-stats-head span {
  display: block;
  margin-top: 5px;
  color: #7c8498;
  font-size: 13px;
  font-weight: 750;
}

.admin-stats-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.admin-stat-card {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 74px;
  padding: 11px 12px;
  border-radius: 14px;
  background: #f3f8fc;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 53, 0.05);
}

.admin-stat-card span {
  overflow: hidden;
  color: #6e768b;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-stat-card strong {
  margin-top: 6px;
  color: #222331;
  font-size: 26px;
  line-height: 1;
}

.admin-stats-chart {
  display: grid;
  gap: 12px;
  padding: 13px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 53, 0.06);
}

.admin-stats-chart:empty {
  display: none;
}

.admin-stats-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-stats-chart-head h4 {
  margin: 0;
  color: #24293a;
  font-size: 15px;
  line-height: 1.1;
}

.admin-stats-chart-head span {
  display: block;
  margin-top: 4px;
  color: #7c8498;
  font-size: 12px;
  font-weight: 750;
}

.admin-stats-date-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.admin-stats-date-controls label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 11px;
  background: #f3f8fc;
  color: #687185;
  font-size: 11px;
  font-weight: 850;
}

.admin-stats-date-controls label span {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.admin-stats-date-controls input {
  width: 126px;
  border: 0;
  background: transparent;
  color: #222331;
  font: inherit;
  outline: 0;
}

.admin-stats-date-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: #e9f8fb;
  color: #259aad;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.admin-stats-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  color: #687185;
  font-size: 12px;
  font-weight: 850;
}

.admin-stats-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.admin-stats-chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.admin-stats-chart-legend i.is-profile {
  background: #46b5ca;
}

.admin-stats-chart-legend i.is-guest {
  background: #8f98ad;
}

.admin-stats-chart-legend i.is-payment-card {
  background: #46b5ca;
}

.admin-stats-chart-legend i.is-payment-sbp {
  background: #5d73d8;
}

.admin-stats-chart-legend i.is-payment-other {
  background: #8f98ad;
}

.admin-stats-chart-plot {
  min-width: 0;
  padding: 10px 8px 4px;
  border-radius: 14px;
  background: #f3f8fc;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 53, 0.05);
}

.admin-stats-chart-plot svg {
  display: block;
  width: 100%;
  height: 260px;
}

.admin-chart-grid-line line {
  stroke: rgba(121, 129, 149, 0.28);
  stroke-width: 1;
}

.admin-chart-grid-line text,
.admin-chart-label,
.admin-chart-value {
  fill: #717a90;
  font-size: 12px;
  font-weight: 850;
}

.admin-chart-grid-line text {
  text-anchor: end;
}

.admin-chart-axis {
  stroke: #aeb8c8;
  stroke-width: 2;
}

.admin-chart-bar {
  filter: drop-shadow(0 6px 8px rgba(31, 34, 53, 0.1));
}

.admin-chart-bar.is-profile {
  fill: #46b5ca;
}

.admin-chart-bar.is-guest {
  fill: #8f98ad;
}

.admin-chart-bar.is-payment-card {
  fill: #46b5ca;
}

.admin-chart-bar.is-payment-sbp {
  fill: #5d73d8;
}

.admin-chart-bar.is-payment-other {
  fill: #8f98ad;
}

.admin-chart-value {
  fill: #222331;
  font-size: 15px;
  text-anchor: middle;
}

.admin-chart-label {
  fill: #687185;
  font-size: 14px;
  text-anchor: middle;
}

.admin-stats-chart-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-stats-chart-totals span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f9fd;
}

.admin-stats-chart-totals b {
  color: #687185;
  font-size: 12px;
  font-weight: 900;
}

.admin-stats-chart-totals strong {
  color: #222331;
  font-size: 24px;
  line-height: 1;
}

.admin-stats-chart-totals em {
  overflow: hidden;
  color: #7c8498;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-subscription-metrics,
.admin-payment-breakdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-subscription-metrics span,
.admin-payment-breakdown span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f9fd;
}

.admin-subscription-metrics b,
.admin-payment-breakdown b {
  overflow: hidden;
  color: #687185;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-subscription-metrics strong,
.admin-payment-breakdown strong {
  color: #222331;
  font-size: 24px;
  line-height: 1;
}

.admin-payment-breakdown em {
  overflow: hidden;
  color: #7c8498;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-payment-breakdown b,
.admin-payment-breakdown em {
  overflow: visible;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
}

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

.admin-stats-block {
  min-width: 0;
  padding: 13px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 53, 0.06);
}

.admin-stats-block h4 {
  margin: 0 0 10px;
  color: #24293a;
  font-size: 15px;
  line-height: 1.1;
}

.admin-stats-list {
  display: grid;
  gap: 7px;
}

.admin-stats-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
  color: #687185;
  font-size: 13px;
  font-weight: 750;
}

.admin-stats-row strong {
  color: #222331;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

.admin-recent-visitors {
  display: grid;
  gap: 8px;
}

.admin-visitor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 10px;
  border-radius: 12px;
  background: #f7f9fd;
}

.admin-visitor-row strong,
.admin-visitor-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-visitor-row strong {
  color: #222331;
  font-size: 13px;
  line-height: 1.1;
}

.admin-visitor-row span {
  margin-top: 3px;
  color: #798195;
  font-size: 12px;
  font-weight: 750;
}

.admin-visitor-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  color: #6f778d;
  background: #edf1f7;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.admin-visitor-badge.is-online {
  color: #1f8798;
  background: #e6f8fb;
}

.admin-search-queries {
  display: grid;
  gap: 10px;
}

.admin-search-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-search-summary span {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: #f4f8fc;
}

.admin-search-summary b,
.admin-search-summary strong {
  display: block;
}

.admin-search-summary b {
  overflow: hidden;
  color: #6d7589;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-search-summary strong {
  margin-top: 3px;
  color: #222331;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.admin-search-list {
  display: grid;
  gap: 8px;
}

.admin-search-query {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px;
  border-radius: 12px;
  background: #f8fafc;
}

.admin-search-query.is-important {
  background: #fff5eb;
  box-shadow: inset 0 0 0 1px rgba(239, 145, 74, 0.22);
}

.admin-search-query strong,
.admin-search-query span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-search-query strong {
  color: #222331;
  font-size: 13px;
  font-weight: 900;
}

.admin-search-query span {
  margin-top: 3px;
  color: #798195;
  font-size: 12px;
  font-weight: 750;
}

.admin-search-query em {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  color: #6f778d;
  background: #edf1f7;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.admin-search-query.is-important em {
  color: #a75518;
  background: #ffe6d2;
}

.admin-search-empty {
  padding: 11px 12px;
  border-radius: 12px;
  color: #798195;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 800;
}

.admin-checklist {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) repeat(6, minmax(120px, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}

.admin-checklist-summary,
.admin-checklist-item {
  min-width: 0;
  min-height: 54px;
  border-radius: 16px;
  background: #f7f9fd;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 53, 0.06);
}

.admin-checklist-summary {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 10px 12px;
}

.admin-checklist-summary strong {
  color: #222331;
  font-size: 16px;
  line-height: 1.1;
}

.admin-checklist-summary span {
  color: #747c90;
  font-size: 12px;
  font-weight: 800;
}

.admin-checklist-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 0;
  color: #6f778d;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.admin-checklist-item svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  stroke-width: 2.5;
}

.admin-checklist-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-checklist-item.is-done {
  color: #218a9c;
  background: #e8f9fc;
}

.admin-checklist-item:hover {
  transform: translateY(-1px);
  background: #edf3fb;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.admin-form {
  display: grid;
  gap: 12px;
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -4px;
}

.admin-inline-button,
.admin-choice-button,
.admin-published-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: #edf8fb;
  color: #258fa2;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.admin-inline-button:hover,
.admin-choice-button:hover,
.admin-published-fill:hover {
  background: #dff4f8;
  color: #1f7f92;
  transform: translateY(-1px);
}

.admin-inline-button svg,
.admin-choice-button svg,
.admin-published-fill svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.5;
}

.admin-published-fill span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

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

.admin-form label {
  display: grid;
  gap: 7px;
}

.admin-form label span {
  color: #737b90;
  font-size: 13px;
  font-weight: 850;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dce3ef;
  border-radius: 14px;
  color: #222331;
  background: #f8fafd;
  outline: 0;
  font-size: 15px;
  font-weight: 650;
}

.admin-form input,
.admin-form select {
  min-height: 46px;
  padding: 0 12px;
}

.admin-form select optgroup {
  color: #1fa8b8;
  font-weight: 900;
}

.admin-form select option {
  color: #222331;
  font-weight: 700;
}

.admin-usage-field {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-usage-field legend {
  margin: 0 0 8px;
  color: #737b90;
  font-size: 13px;
  font-weight: 850;
}

.admin-choice-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-choice-search {
  position: relative;
  display: grid;
  align-items: center;
  flex: 1 1 210px;
  min-width: 180px;
}

.admin-form .admin-choice-search {
  gap: 0;
}

.admin-choice-search svg {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  color: #8f98ad;
  pointer-events: none;
}

.admin-form .admin-choice-search input {
  min-height: 38px;
  padding: 0 12px 0 34px;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
}

.admin-choice-count {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  color: #6f778d;
  background: #f0f3f8;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.admin-usage-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 248px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #dce3ef;
  border-radius: 16px;
  background: #f8fafd;
}

.admin-usage-grid label[hidden] {
  display: none;
}

.admin-usage-grid label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid #dce3ef;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.admin-usage-grid input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  min-height: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: #46b5ca;
}

.admin-usage-grid label span {
  color: #303443;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
}

.admin-usage-grid label:has(input:checked) {
  border-color: #46b5ca;
  background: #e8f9fc;
  box-shadow: 0 8px 18px rgba(70, 181, 202, 0.13);
}

.admin-details-field {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid #dce3ef;
  border-radius: 18px;
  background: #fbfdff;
}

.admin-details-field legend {
  padding: 0 6px;
  color: #737b90;
  font-size: 13px;
  font-weight: 850;
}

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

.admin-task-types-tree {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #dce3ef;
  border-radius: 16px;
  background: #f8fafd;
}

.admin-task-grade {
  border: 1px solid #dce3ef;
  border-radius: 14px;
  background: #fff;
}

.admin-task-grade summary {
  padding: 12px 14px;
  color: #1fa8b8;
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
}

.admin-task-grade-body {
  display: grid;
  gap: 12px;
  padding: 0 10px 12px;
}

.admin-task-subject h4 {
  margin: 4px 0 8px;
  color: #222331;
  font-size: 13px;
  font-weight: 950;
}

.admin-task-options {
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-form textarea {
  min-height: 104px;
  padding: 12px;
  resize: vertical;
  line-height: 1.38;
}

.admin-upload-field {
  position: relative;
}

.admin-upload-field input[type="file"] {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
}

.admin-upload-field em {
  color: #8b93a6;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
  border-color: #46b5ca;
  box-shadow: 0 0 0 3px rgba(70, 181, 202, 0.14);
}

.admin-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: #46b5ca;
  font-size: 16px;
  font-weight: 850;
  box-shadow: 0 14px 30px rgba(70, 181, 202, 0.24);
}

.admin-submit svg {
  width: 21px;
  height: 21px;
}

.admin-status {
  min-height: 20px;
  margin: 0;
  color: #6f778d;
  font-size: 14px;
  font-weight: 750;
}

.admin-preview {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: #f6f8fc;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 53, 0.06);
}

.admin-preview h3,
.admin-published h3 {
  margin: 0;
  color: #24293a;
  font-size: 18px;
  line-height: 1.1;
}

.admin-preview-card .product-card {
  max-width: 240px;
}

.admin-published {
  display: grid;
  gap: 10px;
}

.admin-published-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-published-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  color: #268fa3;
  background: #eaf8fb;
  font-size: 12px;
  font-weight: 900;
}

.admin-published-search {
  position: relative;
  display: grid;
  align-items: center;
}

.admin-published-search svg {
  position: absolute;
  left: 11px;
  width: 17px;
  height: 17px;
  color: #8f98ad;
  pointer-events: none;
}

.admin-published-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px 0 36px;
  border: 1px solid #dce3ef;
  border-radius: 12px;
  background: #fff;
  color: #222331;
  outline: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.admin-published-search input:focus {
  border-color: #46b5ca;
  box-shadow: 0 0 0 3px rgba(70, 181, 202, 0.14);
}

.admin-published-list {
  display: grid;
  gap: 12px;
  max-height: 620px;
  overflow: auto;
  padding-right: 2px;
}

.admin-published-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 53, 0.06);
}

.admin-published-row.is-editing {
  background: #f1fbfd;
  box-shadow: inset 0 0 0 2px rgba(70, 181, 202, 0.22);
}

.admin-published-row-main {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  align-items: start;
  min-width: 0;
  gap: 14px;
}

.admin-published-cover {
  position: relative;
  overflow: hidden;
  width: min(100%, 210px);
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  background: #e8eaf2;
  box-shadow:
    inset 0 0 0 1px rgba(31, 34, 53, 0.07),
    0 12px 26px rgba(31, 34, 53, 0.12);
  user-select: none;
  -webkit-touch-callout: none;
}

.admin-published-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-published-row .admin-published-cover-pill {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  max-width: calc(100% - 20px);
  overflow: hidden;
  padding: 5px 9px;
  border-radius: 8px;
  color: #fff;
  background: #17a66f;
  box-shadow: 0 8px 18px rgba(31, 34, 53, 0.16);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-published-row-info {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
}

.admin-published-row strong {
  overflow: hidden;
  color: #222331;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-published-row span {
  color: #7d8497;
  font-size: 12px;
  font-weight: 750;
}

.admin-published-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 4px;
}

.admin-published-stat {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding: 8px 9px;
  border-radius: 12px;
  background: #f3f8fc;
}

.admin-published-stat b {
  overflow: hidden;
  color: #748095;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-published-stat strong {
  color: #222331;
  font-size: 15px;
  line-height: 1;
}

.admin-published-actions {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.admin-published-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: #fff0f0;
  color: #d94b4b;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.admin-published-actions .admin-published-fill,
.admin-published-actions .admin-published-delete {
  width: 100%;
}

.admin-published-delete:hover {
  background: #ffdede;
  color: #b83232;
  transform: translateY(-1px);
}

.admin-published-delete svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

.admin-published-delete span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

@media (min-width: 901px) {
  .admin-preview {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 110px);
    overflow: auto;
  }
}

@media (max-width: 1160px) {
  .admin-stats-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-stats-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .admin-checklist-summary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .admin-panel {
    padding: 18px;
  }

  .admin-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-stats-head {
    flex-direction: column;
  }

  .admin-stats-head .admin-tool-button {
    align-self: flex-start;
  }

  .admin-stats-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-stats-chart-head {
    flex-direction: column;
  }

  .admin-stats-chart-legend {
    justify-content: flex-start;
  }

  .admin-stats-date-controls {
    justify-content: flex-start;
    width: 100%;
  }

  .admin-stats-chart-plot svg {
    height: 240px;
  }

  .admin-subscription-metrics,
  .admin-payment-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-stats-details {
    grid-template-columns: 1fr;
  }

  .admin-panel-head h2 {
    font-size: 24px;
  }

  .admin-panel-tools {
    justify-content: flex-start;
    width: 100%;
  }

  .admin-tool-button,
  .admin-panel-head span {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  .admin-layout,
  .admin-form-grid,
  .admin-details-grid {
    grid-template-columns: 1fr;
  }

  .admin-checklist {
    grid-template-columns: 1fr 1fr;
  }

  .admin-choice-search {
    flex-basis: 100%;
  }

  .admin-published-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-published-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-published-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-published-row-main {
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  }

  .admin-published-cover {
    width: min(100%, 260px);
  }

  .admin-preview-card .product-card {
    max-width: 220px;
  }
}

@media (max-width: 520px) {
  .admin-stats {
    padding: 12px;
  }

  .admin-stats-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .admin-stat-card {
    min-height: 58px;
    padding: 9px 10px;
  }

  .admin-stat-card span {
    font-size: 11px;
    white-space: normal;
  }

  .admin-stat-card strong {
    margin-top: 5px;
    font-size: 22px;
  }

  .admin-published-row-main {
    grid-template-columns: 1fr;
  }

  .admin-published-cover {
    width: min(100%, 330px);
    justify-self: center;
    border-radius: 14px;
  }

  .admin-published-row strong {
    white-space: normal;
  }

  .admin-stats-chart {
    padding: 12px;
  }

  .admin-stats-chart-plot {
    padding: 8px 4px 2px;
  }

  .admin-stats-date-controls label,
  .admin-stats-date-button {
    flex: 1 1 120px;
  }

  .admin-stats-date-controls input {
    width: 100%;
    min-width: 0;
  }

  .admin-stats-chart-plot svg {
    height: 230px;
  }

  .admin-stats-chart-totals {
    grid-template-columns: 1fr;
  }

  .admin-search-summary {
    grid-template-columns: 1fr;
  }

  .admin-search-query {
    grid-template-columns: 1fr;
  }

  .admin-search-query strong,
  .admin-search-query span {
    white-space: normal;
  }

  .admin-search-query em {
    justify-self: start;
  }

  .admin-subscription-metrics,
  .admin-payment-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.recent-view-panel {
  padding: 22px 24px 24px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(31, 34, 53, 0.08);
}

.recent-view-head {
  margin-bottom: 16px;
}

.recent-view-head h1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  color: #222331;
  font-size: 34px;
  line-height: 1.1;
  white-space: nowrap;
}

.recent-view-head span {
  flex: 0 0 auto;
  color: #7b8295;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.recent-view-grid {
  gap: 26px 12px;
}

.recent-view-empty {
  margin-top: 8px;
}

.profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(31, 34, 53, 0.08);
}

.profile-guest-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: min(62vh, 520px);
  padding: 72px 24px;
  color: #7d8293;
  text-align: center;
}

.profile-guest-state[hidden] {
  display: none;
}

.profile-hero[hidden],
.profile-subscription-card[hidden],
.profile-metrics[hidden],
.profile-company[hidden],
#profileRecentSection[hidden],
#adminPanel[hidden] {
  display: none;
}

.profile-guest-avatar {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid #dbe1ec;
  border-radius: 999px;
  color: #8f96aa;
  background: #f7f9fd;
}

.profile-guest-avatar svg {
  width: 48px;
  height: 48px;
  stroke-width: 1.8;
}

.profile-guest-state h1 {
  max-width: 360px;
  margin: 8px 0 0;
  color: var(--text);
  font-size: 28px;
  line-height: 1.18;
}

.profile-guest-state p {
  max-width: 330px;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.profile-guest-action {
  width: min(100%, 302px);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #43b9c9 0%, #35abc0 100%);
  box-shadow: 0 12px 24px rgba(70, 181, 202, 0.18);
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  overflow: hidden;
  border: 1px solid #dbe1ec;
  border-radius: 999px;
  color: #8f96aa;
  background: #f7f9fd;
}

.profile-avatar.has-image {
  border-color: transparent;
  background: #eef3fa;
}

.profile-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar svg {
  width: 48px;
  height: 48px;
  stroke-width: 1.8;
}

.profile-hero-copy {
  min-width: 0;
}

.profile-hero-copy h1 {
  overflow: hidden;
  max-width: 100%;
  margin: 0;
  color: #222638;
  font-size: 34px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-settings-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-top: 8px;
  padding: 0;
  border: 0;
  color: #7c8398;
  background: transparent;
  font-size: 28px;
  font-weight: 600;
  white-space: nowrap;
}

.profile-settings-link svg {
  width: 18px;
  height: 18px;
}

.profile-subscription-card {
  margin-top: 14px;
  display: block;
  min-height: auto;
  padding: 20px 24px;
}

.profile-metric-card.profile-subscription-card {
  display: block;
  grid-template-columns: none;
  min-height: auto;
}

.profile-metric-card.profile-subscription-card[hidden] {
  display: none;
}

.profile-subscription-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #212738;
  text-align: left;
  cursor: pointer;
}

.profile-subscription-card .profile-metric-copy {
  align-self: center;
  justify-self: start;
}

.profile-subscription-status.is-active {
  color: #108a73;
}

.profile-subscription-status.is-canceled {
  color: #c17819;
}

.profile-subscription-status.is-inactive {
  color: #7b8295;
}

.profile-subscription-icons {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-left: auto;
  gap: 12px;
  color: #46b5ca;
}

.profile-subscription-icons svg:first-child {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  stroke-width: 2.2;
}

.profile-subscription-icons svg:last-child {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: #8b92a5;
  transition: transform 180ms ease;
}

.profile-subscription-card.is-open .profile-subscription-icons svg:last-child {
  transform: rotate(180deg);
}

.profile-subscription-body {
  display: grid;
  gap: 8px;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 220ms ease, padding-top 220ms ease;
}

.profile-subscription-card.is-open .profile-subscription-body {
  max-height: 130px;
  padding-top: 12px;
}

.profile-subscription-action {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 12px 16px;
  border: 0;
  border-radius: 18px;
  color: #212738;
  background: #f5fbfd;
  text-align: left;
  cursor: pointer;
}

.profile-subscription-action-copy {
  display: flex;
  min-width: 0;
  place-self: center start;
  flex-direction: column;
  justify-content: center;
}

.profile-subscription-action strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.profile-subscription-action small {
  display: block;
  margin-top: 5px;
  color: #7b8295;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.profile-subscription-action:disabled {
  cursor: default;
  opacity: 0.82;
}

.profile-subscription-action svg {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-self: center end;
  margin-left: auto;
  color: #46b5ca;
  stroke-width: 2.2;
}

.profile-subscription-action.is-active {
  background: #f5fbfd;
}

.profile-subscription-action.is-active strong {
  color: #212738;
}

.profile-subscription-action.is-resume {
  background: #effbfc;
}

.profile-subscription-action.is-resume strong {
  color: #212738;
}

.profile-hero-actions {
  --profile-hero-action-size: 58px;
  --profile-hero-action-icon-size: 34px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.profile-hero-action {
  display: grid;
  place-items: center;
  flex: 0 0 var(--profile-hero-action-size);
  width: var(--profile-hero-action-size);
  height: var(--profile-hero-action-size);
  padding: 0;
  border: 0;
  border-radius: 18px;
  color: #46b5ca;
  background: #eaf7fb;
}

.profile-hero-action svg {
  width: var(--profile-hero-action-icon-size);
  height: var(--profile-hero-action-icon-size);
  stroke-width: 2.1;
}

.profile-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.profile-metric-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--profile-metric-icon-size);
  align-items: center;
  justify-items: stretch;
  gap: 14px;
  --profile-metric-icon-size: 34px;
  min-height: 142px;
  padding: 20px 24px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(31, 34, 53, 0.08);
}

.profile-metric-copy {
  display: flex;
  min-width: 0;
  align-self: center;
  justify-self: start;
  flex-direction: column;
  justify-content: center;
}

.profile-metric-card[data-profile-favorites-open] {
  cursor: pointer;
}

.profile-metric-card[data-profile-downloads-open] {
  cursor: pointer;
}

.profile-metric-card[data-profile-pending-open] {
  cursor: pointer;
}

.profile-metric-card-wide {
  grid-column: 1 / -1;
}

.profile-metric-copy h2,
.profile-company-copy h2 {
  margin: 0;
  color: #212738;
  font-size: 36px;
  line-height: 1.1;
}

.profile-metric-copy p,
.profile-company-copy p {
  margin: 8px 0 0;
  color: #7b8295;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

.profile-metric-copy h2 {
  line-height: 1.12;
}

.profile-metric-card svg {
  display: block;
  flex: 0 0 var(--profile-metric-icon-size);
  width: var(--profile-metric-icon-size);
  height: var(--profile-metric-icon-size);
  align-self: center;
  justify-self: end;
  color: #46b5ca;
  fill: none;
  stroke-width: 2.2;
}

.profile-company {
  margin-top: 14px;
  padding: 20px 24px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(31, 34, 53, 0.08);
}

.profile-admin-entry {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 98px;
  margin-top: 14px;
  padding: 20px 24px;
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: #212738;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 45px rgba(31, 34, 53, 0.08);
}

.profile-admin-entry[hidden] {
  display: none;
}

.profile-admin-entry-icons svg:last-child {
  transform: none;
}

.profile-company-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #212738;
  text-align: left;
  cursor: pointer;
}

.profile-company-copy {
  display: flex;
  min-width: 0;
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
}

.profile-company-copy h2 {
  opacity: 1;
}

.profile-company-copy p {
  opacity: 1;
}

.profile-company-icons {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-left: auto;
  gap: 12px;
  color: #46b5ca;
}

.profile-company-icons svg:first-child {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  stroke-width: 2.2;
}

.profile-company-icons svg:last-child {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: #8b92a5;
  transition: transform 180ms ease;
}

.profile-company.is-open .profile-company-icons svg:last-child {
  transform: rotate(180deg);
}

.profile-company-body {
  display: grid;
  gap: 8px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 220ms ease, padding-top 220ms ease;
}

.profile-company.is-open .profile-company-body {
  max-height: 760px;
  padding-top: 12px;
}

.profile-company-link {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 12px 16px;
  border: 0;
  border-radius: 18px;
  background: #f5fbfd;
  color: #212738;
  text-align: left;
  cursor: pointer;
}

.profile-company-link > span {
  display: flex;
  min-width: 0;
  place-self: center start;
  flex-direction: column;
  justify-content: center;
}

.profile-company-link strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.profile-company-link small {
  display: block;
  margin-top: 5px;
  color: #7b8295;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.profile-company-link svg {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-self: center end;
  margin-left: auto;
  color: #46b5ca;
  stroke-width: 2.2;
}

.offer-view[hidden] {
  display: none;
}

.offer-view {
  width: min(980px, calc(100% - 56px));
  margin: 0 auto;
  padding-bottom: 46px;
}

.offer-panel {
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(31, 34, 53, 0.08);
}

.offer-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.offer-back {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 18px;
  background: #f3f6fb;
  color: #212738;
  cursor: pointer;
}

.offer-back svg {
  width: 32px;
  height: 32px;
}

.offer-head p {
  margin: 0 0 4px;
  color: #7b8295;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
}

.offer-head h1 {
  margin: 0;
  color: #151927;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
}

.offer-content {
  color: #303648;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.profile-recent[hidden] {
  display: none;
}

.profile-recent {
  margin-top: 14px;
  padding: 20px 20px 18px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(31, 34, 53, 0.08);
}

.profile-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-recent-head h2 {
  margin: 0;
  color: #212738;
  font-size: 32px;
  line-height: 1.08;
}

.profile-recent-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  color: #46b5ca;
  background: transparent;
  font-size: 24px;
  font-weight: 700;
}

.profile-recent-all svg {
  width: 18px;
  height: 18px;
}

.profile-recent-carousel {
  position: relative;
}

.profile-recent-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(220px, calc((100% - 24px) / 3));
  gap: 12px;
  overflow-x: auto;
  padding: 0 2px 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.profile-recent-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.profile-recent-nav {
  position: absolute;
  top: 34%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  color: #4f5b72;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(31, 34, 53, 0.14);
  transform: translateY(-50%);
}

.profile-recent-nav svg {
  width: 18px;
  height: 18px;
}

.profile-recent-nav-prev {
  left: -10px;
}

.profile-recent-nav-next {
  right: -10px;
}

.profile-recent-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  scroll-snap-align: start;
}

.profile-recent-cover {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 0;
  border-radius: 16px;
  background: #eef2f8;
}

.profile-recent-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-recent-subject {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  padding: 3px 8px;
  border-radius: 6px;
  color: #fff;
  background: var(--green);
  box-shadow: 0 6px 18px rgba(31, 34, 53, 0.14);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.profile-recent-favorite {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: rgba(34, 37, 50, 0.3);
}

.profile-recent-favorite svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.profile-recent-favorite.active {
  background: var(--accent);
}

.profile-recent-title {
  display: -webkit-box;
  min-height: 36px;
  overflow: hidden;
  padding: 0;
  border: 0;
  color: #212738;
  background: transparent;
  text-align: left;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.profile-recent-meta,
.profile-recent-rating {
  overflow: hidden;
  color: #7b8295;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}

.profile-recent-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #525a6d;
}

.profile-recent-rating svg {
  width: 15px;
  height: 15px;
  color: #ffbf2e;
  fill: rgba(255, 191, 46, 0.2);
}

.profile-recent-open-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #46b5ca;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.profile-recent-open-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(70, 181, 202, 0.24);
}

.materials-cart-layout {
  display: block;
}

.materials-cart-panel {
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(31, 34, 53, 0.08);
}

.materials-cart-panel {
  min-width: 0;
  padding: 28px 30px 10px;
}

.materials-cart-header h1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0 0 18px;
  color: #222331;
  font-size: 34px;
  line-height: 1.1;
  white-space: nowrap;
}

.materials-cart-header span {
  flex: 0 0 auto;
  margin-left: 0;
  color: #7b8295;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.materials-cart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 20px;
  border-bottom: 1px solid #e5e8f0;
}

.cart-check-all {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}

.cart-check-all input,
.cart-row-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cart-check-all span,
.cart-row-check span {
  display: grid;
  place-items: center;
  border: 1px solid #d5d9e4;
  border-radius: 8px;
  background: #fff;
}

.cart-check-all span {
  width: 30px;
  height: 30px;
}

.cart-row-check span {
  width: 26px;
  height: 26px;
}

.cart-check-all input:checked + span,
.cart-row-check input:checked + span {
  border-color: #46b5ca;
  background: #46b5ca;
}

.cart-check-all input:checked + span::before,
.cart-row-check input:checked + span::before {
  display: block;
  box-sizing: border-box;
  width: 11px;
  height: 7px;
  border: solid #fff;
  border-width: 0 0 3px 3px;
  content: "";
  transform: rotate(-45deg);
  transform-origin: center;
}

.cart-toolbar-actions,
.cart-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.cart-toolbar-actions button,
.cart-row-actions button,
.cart-empty-action {
  border: 0;
}

.cart-toolbar-actions button,
.cart-row-actions button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #a0a5b3;
  background: #f4f6fb;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    opacity 0.2s ease;
}

.cart-toolbar-actions button:disabled,
.cart-row-actions button:disabled {
  cursor: default;
  opacity: 0.35;
}

.cart-toolbar-actions svg,
.cart-row-actions svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.4;
}

.materials-cart-list {
  display: grid;
}

.downloads-view-list {
  margin-top: 2px;
}

.pending-review-panel {
  padding-bottom: 14px;
}

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

.pending-review-card {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.pending-review-cover {
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  background: #eef2f8;
}

.pending-review-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pending-review-title {
  display: -webkit-box;
  min-height: 40px;
  margin: 8px 0 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  color: #252936;
  background: transparent;
  text-align: left;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.28;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pending-review-card:focus-visible {
  outline: 2px solid rgba(56, 168, 184, 0.7);
  outline-offset: 2px;
  border-radius: 14px;
}

.cart-row {
  display: grid;
  grid-template-columns: auto 108px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid #e5e8f0;
}

.cart-row-readonly {
  grid-template-columns: 108px minmax(0, 1fr);
}

.cart-row-check {
  align-self: start;
  margin-top: 5px;
  cursor: pointer;
}

.cart-row-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: #e8eaf2;
  cursor: pointer;
}

.cart-row-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-row-info {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.cart-row-title {
  margin: 0;
  color: #252936;
  font-size: 19px;
  font-weight: 760;
  line-height: 1.25;
  cursor: pointer;
}

.cart-row-meta {
  color: #858a9b;
  font-size: 14px;
  font-weight: 750;
}

.cart-row-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #4b5263;
  font-size: 14px;
  font-weight: 800;
}

.cart-row-rating svg {
  width: 16px;
  height: 16px;
  fill: var(--yellow);
  color: var(--yellow);
}

.downloads-review-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #46b5ca;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.downloads-review-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(70, 181, 202, 0.24);
}

.downloads-review-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  color: #2f8192;
  background: #e7f5fa;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.cart-row-actions {
  justify-self: end;
  margin-top: 2px;
}

.cart-toolbar-actions button.is-active,
.cart-row.is-selected .cart-row-actions button:first-child {
  color: #46b5ca;
  background: #e8f6fb;
}

.materials-cart-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 58px 24px;
  color: #7d8293;
  text-align: center;
}

.materials-cart-empty[hidden] {
  display: none;
}

.materials-cart-empty > svg {
  width: 44px;
  height: 44px;
  color: #46b5ca;
}

.materials-cart-empty h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
}

.materials-cart-empty p {
  max-width: 320px;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.cart-empty-action {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  color: #fff;
  background: #46b5ca;
  font-weight: 800;
}

.cart-undo-toast[hidden] {
  display: none;
}

.cart-undo-toast {
  position: fixed;
  top: 28px;
  left: 50%;
  z-index: 120;
  width: min(calc(100% - 26px), 520px);
  transform: translateX(-50%);
  pointer-events: none;
}

.cart-undo-toast-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  color: #fff;
  background: rgba(42, 45, 55, 0.96);
  box-shadow: 0 14px 32px rgba(17, 20, 30, 0.34);
  pointer-events: auto;
}

.cart-undo-countdown {
  position: relative;
  display: block;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  color: #fff;
}

.cart-undo-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cart-undo-ring-track,
.cart-undo-ring-progress {
  fill: none;
  stroke-width: 3;
}

.cart-undo-ring-track {
  stroke: rgba(70, 181, 202, 0.28);
}

.cart-undo-ring-progress {
  stroke-dasharray: var(--cart-undo-ring-length);
  stroke-dashoffset: var(--cart-undo-ring-length);
  stroke: #46b5ca;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.cart-undo-toast:not([hidden]) .cart-undo-ring-progress {
  animation: cartUndoRingCountdown 5s linear forwards;
}

@keyframes cartUndoRingCountdown {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: var(--cart-undo-ring-length);
  }
}

.cart-undo-seconds {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  min-width: 1ch;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.cart-undo-message {
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.cart-undo-cancel {
  padding: 0;
  border: 0;
  color: #46b5ca;
  font-size: 18px;
  font-weight: 800;
  background: transparent;
}

.material-detail-view[hidden] {
  display: none;
}

.material-detail-view {
  width: min(1280px, calc(100% - 56px));
  margin: 0 auto;
  padding-bottom: 60px;
}

.material-detail-page {
  display: grid;
  grid-template-columns: minmax(320px, 500px) minmax(380px, 620px);
  justify-content: center;
  column-gap: 24px;
  row-gap: 16px;
  align-items: start;
}

.material-breadcrumb {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  color: #8b91a1;
  font-size: 14px;
  font-weight: 700;
}

.material-breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.material-breadcrumb strong {
  color: #596174;
}

.material-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.material-back,
.material-top-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  color: #2d3342;
  background: #fff;
  box-shadow: 0 10px 24px rgba(31, 34, 53, 0.08);
}

.material-top-button svg,
.material-back svg {
  width: 19px;
  height: 19px;
}

.material-top-button.active {
  color: #46b5ca;
}

.material-top-button.active svg {
  fill: currentColor;
}

.material-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.material-thumbs {
  display: none;
  align-content: start;
  gap: 12px;
}

.material-thumbs button {
  overflow: hidden;
  width: 78px;
  aspect-ratio: 3 / 4;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(31, 34, 53, 0.06);
}

.material-thumbs button.active {
  border-color: #46b5ca;
}

.material-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-main-image {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 500px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  justify-self: center;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  background: #f1f5fa;
  box-shadow: 0 16px 42px rgba(31, 34, 53, 0.08);
}

.material-main-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.material-info,
.material-actions-card,
.material-description,
.material-feedback {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(31, 34, 53, 0.07);
}

.material-info {
  position: relative;
  display: grid;
  gap: 18px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(229, 235, 246, 0.72);
  background:
    radial-gradient(circle at 14% 0%, rgba(70, 181, 202, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.94));
  box-shadow:
    0 18px 46px rgba(31, 34, 53, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.material-detail-chip {
  width: fit-content;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 999px;
  color: #2c7181;
  background: rgba(70, 181, 202, 0.14);
  font-size: 13px;
  font-weight: 800;
}

.material-info h1 {
  position: relative;
  margin: 0;
  padding-left: 12px;
  color: var(--text);
  font-size: 27px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.14;
}

.material-info h1::before {
  position: absolute;
  top: 0.12em;
  bottom: 0.12em;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: #46b5ca;
  content: "";
}

.material-activity-section {
  display: grid;
  grid-column: 1;
  align-self: start;
}

.material-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  color: #687083;
  font-size: 14px;
  font-weight: 800;
}

.material-activity-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 2px;
}

.material-activity-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 78px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(229, 235, 246, 0.72);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(70, 181, 202, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.94));
  box-shadow:
    0 14px 34px rgba(31, 34, 53, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.material-activity-card[role="button"] {
  cursor: pointer;
}

.material-activity-card[role="button"]:hover {
  border-color: rgba(70, 181, 202, 0.24);
  box-shadow:
    0 16px 38px rgba(31, 34, 53, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.material-activity-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(226, 233, 244, 0.78);
  border-radius: 14px;
  color: #9ca3b5;
  background: rgba(242, 246, 251, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.material-activity-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.5;
}

.material-activity-icon.rating {
  color: #ffb323;
}

.material-activity-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.material-activity-copy strong {
  color: #252b39;
  font-size: 23px;
  font-weight: 680;
  line-height: 1;
}

.material-activity-copy small {
  overflow: hidden;
  color: #8791a3;
  font-size: 13px;
  font-weight: 610;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-spec-list {
  display: grid;
  gap: 0;
  margin: 4px 0 0;
  padding: 2px 0 0;
}

.material-spec-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.9fr) minmax(120px, 1.1fr);
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 9px 0;
}

.material-spec-row + .material-spec-row {
  border-top: 1px solid rgba(217, 225, 238, 0.72);
}

.material-spec-row dt {
  color: #7f8aa0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.26;
}

.material-spec-row dt span {
  background: transparent;
}

.material-spec-row dd {
  margin: 0;
  color: #2c3343;
  font-size: 15px;
  font-weight: 610;
  line-height: 1.32;
  text-wrap: normal;
}

.material-actions-card {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.material-mobile-action-bar {
  display: none;
}

.material-cart-action,
.material-download-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border: 0;
  border-radius: 15px;
  font-size: 17px;
  font-weight: 800;
}

.material-cart-action {
  color: #fff;
  background: #46b5ca;
  box-shadow: 0 14px 30px rgba(70, 181, 202, 0.24);
}

.material-cart-action.active {
  background: #2aa9ad;
}

.material-download-action {
  color: #46b5ca;
  background: rgba(70, 181, 202, 0.12);
}

.material-actions-card p {
  width: 100%;
  justify-self: center;
  margin: 6px 0 0;
  color: #788092;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.38;
  text-align: center;
}

.material-description {
  grid-column: 1 / 3;
  gap: 10px;
}

.material-description-heading {
  position: relative;
  margin: 0;
  padding-left: 12px;
  color: var(--text);
  font-size: 27px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.14;
}

.material-description-heading::before {
  position: absolute;
  top: 0.12em;
  bottom: 0.12em;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: #46b5ca;
  content: "";
}

.material-description .material-spec-list {
  margin-top: 0;
}

.material-description-text {
  display: block;
}

.material-description-row {
  display: block;
}

.material-description-text [data-description-copy] {
  display: block;
  width: 100%;
  max-width: none;
  overflow-wrap: anywhere;
  text-wrap: wrap;
}

.material-description-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  margin-top: 10px;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid rgba(70, 181, 202, 0.2);
  border-radius: 999px;
  color: #2d8ea0;
  background: rgba(70, 181, 202, 0.1);
  font: inherit;
  font-size: 13px;
  font-weight: 560;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    opacity 0.22s ease;
}

.material-description-more:hover {
  border-color: rgba(70, 181, 202, 0.32);
  color: #247c8d;
  background: rgba(70, 181, 202, 0.16);
}

.material-feedback {
  grid-column: 1 / -1;
  display: grid;
  gap: 22px;
  padding: 26px;
}

.feedback-tabs {
  display: flex;
  align-items: baseline;
  gap: 34px;
}

.feedback-tabs button {
  border: 0;
  color: #878b99;
  background: transparent;
  font-size: 28px;
  font-weight: 800;
}

.feedback-tabs button.active {
  color: #2b2d38;
}

.feedback-tabs span {
  margin-left: 6px;
  color: #8e93a2;
  font-size: 16px;
  font-weight: 800;
}

.feedback-score-row {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.feedback-score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #222331;
}

.feedback-score strong {
  font-size: 44px;
  line-height: 1;
}

.score-wreath {
  color: #9d56e8;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
}

.feedback-score-copy {
  display: grid;
  gap: 4px;
  color: #8a8f9e;
  font-size: 14px;
  font-weight: 750;
}

.feedback-score-copy strong {
  color: #2f3340;
  font-size: 17px;
}

.feedback-all-media,
.feedback-all-button {
  border: 0;
  color: #46b5ca;
  background: transparent;
  font-weight: 800;
}

.feedback-all-media {
  justify-self: end;
  font-size: 15px;
}

.feedback-media-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82px;
  gap: 10px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.feedback-media-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1.24;
  border: 0;
  border-radius: 10px;
  background: #eef2f8;
}

.feedback-media-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feedback-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #222331;
}

.feedback-play svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 999px;
  fill: currentColor;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 18px rgba(31, 34, 53, 0.16);
}

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

.material-review-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 12px 16px;
  min-height: 154px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  color: #3b3f4c;
  font-size: 15px;
  font-weight: 650;
  box-shadow: 0 14px 34px rgba(31, 34, 53, 0.08);
}

.review-card-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.review-card-head span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.review-card-head strong {
  color: #2c303d;
}

.review-card-head em {
  color: #8b90a0;
  font-style: normal;
  font-weight: 750;
}

.review-stars {
  display: inline-flex;
  gap: 1px;
  color: #c8cfdd;
}

.review-stars svg {
  width: 18px;
  height: 18px;
  color: #c8cfdd;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 2;
}

.review-stars svg.is-filled {
  color: #ffb45f;
  fill: currentColor;
  stroke: currentColor;
}

.material-review-card p {
  margin: 0;
  line-height: 1.38;
}

.material-review-card img {
  width: 92px;
  height: 92px;
  border-radius: 10px;
  object-fit: cover;
}

.feedback-all-button {
  justify-self: start;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 14px;
  color: #46b5ca;
  background: rgba(70, 181, 202, 0.14);
  font-size: 16px;
}

.related-materials {
  grid-column: 1 / -1;
  display: grid;
  gap: 22px;
  padding-top: 0;
}

.related-materials h2 {
  margin: 0;
  color: #2b2d38;
  font-size: 28px;
  line-height: 1.1;
}

.related-materials-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px 14px;
  align-items: start;
}

.related-load-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 92px;
  color: var(--muted);
  font-weight: 800;
}

.related-load-sentinel.hidden {
  display: none;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #d9dce7;
  border-top-color: var(--brand);
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

.mobile-bottom-nav {
  display: none;
}

.auth-modal[hidden] {
  display: none;
}

.document-consent-modal[hidden] {
  display: none;
}

.marketing-consent-banner[hidden] {
  display: none;
}

.subscription-prompt-modal[hidden] {
  display: none;
}

.subscription-checkout-modal[hidden] {
  display: none;
}

.quick-view-modal[hidden] {
  display: none;
}

.review-modal[hidden] {
  display: none;
}

.material-info-sheet[hidden] {
  display: none;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
}

.document-consent-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 24px;
}

.subscription-prompt-modal {
  position: fixed;
  inset: 0;
  z-index: 112;
  display: grid;
  place-items: center;
  padding: 24px;
}

.subscription-checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 113;
  display: grid;
  place-items: center;
  padding: 24px;
}

.quick-view-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 28px;
}

.review-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 20px;
}

.auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 28, 42, 0.42);
  backdrop-filter: blur(10px);
}

.document-consent-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 28, 42, 0.48);
  backdrop-filter: blur(10px);
}

.subscription-prompt-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 28, 42, 0.48);
  backdrop-filter: blur(10px);
}

.subscription-checkout-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 28, 42, 0.48);
  backdrop-filter: blur(10px);
}

.quick-view-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 28, 42, 0.46);
  backdrop-filter: blur(8px);
}

.review-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 28, 42, 0.46);
  backdrop-filter: blur(8px);
}

.auth-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  max-height: calc(100svh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 42px 34px 34px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(25, 34, 54, 0.24);
}

.document-consent-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  width: min(100%, 560px);
  max-height: calc(100svh - 32px);
  overflow: auto;
  padding: 30px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(25, 34, 54, 0.24);
}

.document-consent-dialog h2 {
  margin: 0;
  color: var(--text);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.08;
}

.document-consent-dialog p {
  margin: 0;
  color: #777f93;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.document-consent-check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(215, 221, 234, 0.9);
  border-radius: 16px;
  background: #f8fbfe;
  color: #4f586c;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.32;
}

.document-consent-check-optional {
  background: #f3fbfd;
}

.document-consent-check input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #46b5ca;
}

.marketing-consent-banner {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(560px, calc(100vw - 36px));
  padding: 10px 12px;
  border: 1px solid rgba(215, 221, 234, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 54px rgba(28, 38, 58, 0.18);
  backdrop-filter: blur(14px);
}

.marketing-consent-banner strong {
  display: block;
  margin: 0 0 2px;
  color: #222331;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.05;
}

.marketing-consent-banner p {
  margin: 0;
  color: #697286;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.25;
}

.marketing-consent-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.marketing-consent-actions button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.marketing-consent-accept {
  color: #fff;
  background: #46b5ca;
  box-shadow: 0 12px 24px rgba(70, 181, 202, 0.2);
}

.marketing-consent-decline {
  color: #657087;
  background: #eef3f8;
}

.document-consent-check button {
  padding: 0;
  border: 0;
  color: #2aa9ad;
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.document-consent-submit {
  min-height: 54px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: #46b5ca;
  box-shadow: 0 14px 30px rgba(70, 181, 202, 0.22);
  font-size: 18px;
  font-weight: 800;
}

.document-consent-submit:disabled {
  color: #9aa3b5;
  background: #edf1f7;
  box-shadow: none;
  cursor: not-allowed;
}

.document-consent-status {
  min-height: 18px;
  text-align: center;
}

.subscription-prompt-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(100%, 480px);
  max-height: calc(100svh - 32px);
  overflow: auto;
  padding: 30px 24px 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(25, 34, 54, 0.24);
  text-align: center;
}

.subscription-prompt-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 14px;
  color: #7d8598;
  background: #f2f6fb;
}

.subscription-prompt-close svg {
  width: 20px;
  height: 20px;
}

.subscription-prompt-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 22px;
  color: #37aeca;
  background: #e9f8fb;
}

.subscription-prompt-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 2.4;
}

.subscription-prompt-dialog h2 {
  margin: 0;
  color: var(--text);
  font-size: 30px;
  font-weight: 760;
  line-height: 1.08;
}

.subscription-prompt-dialog p {
  width: 100%;
  max-width: 440px;
  margin: 0;
  color: #747d91;
  font-size: 15px;
  font-weight: 740;
  line-height: 1.34;
}

.subscription-prompt-dialog .subscription-prompt-note {
  max-width: 420px;
  font-size: 11.5px;
  line-height: 1.24;
}

.subscription-prompt-dialog ul {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: 4px 0 2px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.subscription-prompt-dialog li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 16px;
  color: #485268;
  background: #f4fbfd;
  font-size: 15px;
  font-weight: 760;
}

.subscription-prompt-dialog li svg {
  width: 20px;
  height: 20px;
  color: #2fb3bd;
  stroke-width: 3;
}

.subscription-prompt-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: #46b5ca;
  box-shadow: 0 16px 34px rgba(70, 181, 202, 0.24);
  font-size: 15px;
  font-weight: 840;
  line-height: 1.1;
}

.subscription-prompt-action small {
  display: block;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.15;
  opacity: 0.92;
}

.subscription-prompt-terms {
  max-width: 460px;
  margin: 10px auto 0;
  color: #778196;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.32;
  text-align: center;
}

.subscription-prompt-terms-link {
  border: 0;
  padding: 0;
  color: #2fb3bd;
  background: transparent;
  font: inherit;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.subscription-prompt-terms-link:hover {
  color: #178fa1;
}

.subscription-checkout-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(100%, 520px);
  max-height: calc(100svh - 32px);
  overflow: auto;
  padding: 34px 30px 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, #f0fbfb 0%, #ffffff 100%);
  box-shadow: 0 24px 70px rgba(25, 34, 54, 0.24);
  text-align: center;
}

.subscription-checkout-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 0;
  padding: 0;
  color: #677186;
  background: transparent;
  font-size: 15px;
  font-weight: 720;
}

.subscription-checkout-back svg {
  width: 20px;
  height: 20px;
}

.subscription-checkout-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 14px;
  color: #7d8598;
  background: #eef5fb;
}

.subscription-checkout-close svg {
  width: 20px;
  height: 20px;
}

.subscription-checkout-dialog h2 {
  margin: 0;
  color: var(--text);
  font-size: 28px;
  font-weight: 760;
  line-height: 1.08;
}

.subscription-checkout-provider {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 12px 14px;
  border: 1.5px solid rgba(70, 181, 202, 0.42);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.54);
  text-align: left;
}

.subscription-checkout-provider-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  padding: 3px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(17, 38, 70, 0.1);
}

.subscription-checkout-provider-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.subscription-checkout-provider-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.subscription-checkout-provider-copy strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 780;
}

.subscription-checkout-provider-copy span {
  color: #778196;
  font-size: 12px;
  font-weight: 650;
}

.subscription-checkout-provider svg {
  width: 22px;
  height: 22px;
  color: #46b5ca;
}

.subscription-checkout-pay {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: #46b5ca;
  box-shadow: 0 16px 34px rgba(70, 181, 202, 0.24);
  font-size: 18px;
  font-weight: 840;
}

.subscription-checkout-pay:disabled,
.subscription-checkout-method:disabled {
  cursor: wait;
  opacity: 0.72;
}

.subscription-checkout-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.subscription-checkout-method {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 72px;
  border: 1px solid rgba(70, 181, 202, 0.24);
  border-radius: 8px;
  padding: 10px 6px;
  color: #546071;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.12;
}

.subscription-checkout-method:hover,
.subscription-checkout-method:focus-visible {
  border-color: rgba(70, 181, 202, 0.58);
  color: #0f8ea6;
  background: #ffffff;
}

.subscription-checkout-method svg {
  width: 20px;
  height: 20px;
  color: currentColor;
}

.subscription-checkout-method-note {
  margin: -2px 0 0;
  color: #778196;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.subscription-checkout-recurring {
  display: grid;
  gap: 9px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(70, 181, 202, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.subscription-checkout-recurring p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.subscription-checkout-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 9px;
  color: #344054;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.32;
}

.subscription-checkout-consent input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #46b5ca;
}

.subscription-checkout-terms {
  max-width: 460px;
  margin: 2px auto 0;
  color: #778196;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.32;
  text-align: center;
}

.review-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  max-height: min(88vh, 820px);
  overflow: auto;
  padding: 22px 20px 18px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(18, 29, 48, 0.26);
}

.review-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  color: #6f7688;
  background: #f1f3f8;
}

.review-close svg {
  width: 20px;
  height: 20px;
}

.review-head {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-right: 44px;
}

.review-head img {
  display: block;
  width: 88px;
  height: 118px;
  border-radius: 12px;
  object-fit: cover;
}

.review-head-copy {
  min-width: 0;
}

.review-head-copy h2 {
  margin: 0 0 12px;
  color: #252936;
  font-size: 34px;
  font-weight: 790;
  line-height: 1.05;
  word-break: break-word;
}

.review-stars-picker {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-star {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 11px;
  color: #c7cedc;
  background: #f3f5fa;
  transition:
    transform 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease;
}

.review-star svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.1;
}

.review-star.active {
  color: #ffbf32;
  background: #fff3d6;
}

.review-star:hover {
  transform: translateY(-1px);
}

.review-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.review-subtitle {
  margin: 16px 0 0;
  color: #252936;
  font-size: 23px;
  font-weight: 790;
  line-height: 1.1;
}

.review-field {
  display: grid;
  gap: 8px;
}

.review-field span {
  color: #252936;
  font-size: 16px;
  font-weight: 780;
}

.review-field textarea {
  width: 100%;
  min-height: 64px;
  padding: 14px 14px;
  border: 1px solid #d7ddea;
  border-radius: 14px;
  color: #252936;
  background: #f7f9fd;
  font-size: 17px;
  font-weight: 560;
  line-height: 1.35;
  resize: vertical;
}

.review-field textarea::placeholder {
  color: #9097aa;
}

.review-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 4px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #2aa9ad, #46b5ca);
  font-size: 17px;
  font-weight: 800;
}

.review-status {
  min-height: 20px;
  margin: 0;
  color: #2c7181;
  font-size: 14px;
  font-weight: 700;
}

.quick-view-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(360px, 520px) minmax(320px, 440px);
  width: min(100%, 960px);
  height: min(86vh, 760px);
  max-height: min(86vh, 760px);
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(18, 29, 48, 0.28);
}

.quick-view-cover {
  display: grid;
  place-items: center;
  min-height: 0;
  background: #eef3f8;
}

.quick-view-cover img {
  display: block;
  width: min(100%, 520px);
  height: 100%;
  max-height: min(86vh, 760px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.quick-view-info {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto 1fr auto;
  align-content: stretch;
  gap: 18px;
  min-height: 100%;
  padding: 34px 34px 0;
}

.quick-view-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  color: #6f7688;
  background: #f1f3f8;
}

.quick-view-close svg {
  width: 20px;
  height: 20px;
}

.quick-view-chip {
  display: inline-flex;
  width: fit-content;
  max-width: calc(100% - 56px);
  padding: 7px 11px;
  border-radius: 999px;
  color: #2c7181;
  background: rgba(70, 181, 202, 0.14);
  font-size: 13px;
  font-weight: 800;
}

.quick-view-info h2 {
  margin: 0;
  color: var(--text);
  font-size: 28px;
  line-height: 1.16;
}

.quick-view-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  color: #787f92;
  font-size: 15px;
  font-weight: 800;
}

.quick-view-category {
  margin: 0;
  color: #7a8191;
  font-size: 16px;
  font-weight: 700;
}

.quick-view-cart,
.quick-view-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  border: 0;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 800;
}

.quick-view-cart {
  color: #fff;
  background: #46b5ca;
  box-shadow: 0 14px 32px rgba(70, 181, 202, 0.24);
}

.quick-view-cart.active {
  background: #2aa9ad;
}

.quick-view-download {
  color: #46b5ca;
  background: rgba(70, 181, 202, 0.12);
}

.quick-view-cart svg,
.quick-view-download svg {
  width: 22px;
  height: 22px;
}

.quick-view-more {
  margin: auto -34px 0;
  padding: 20px 34px 24px;
  border: 0;
  border-top: 1px solid rgba(132, 146, 166, 0.16);
  color: #2b2d38;
  background: transparent;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
}

.quick-view-more:hover {
  color: #2c7181;
  background: rgba(70, 181, 202, 0.08);
}

.material-info-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  align-items: end;
  padding: 24px;
  overscroll-behavior: none;
}

.material-info-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(21, 28, 42, 0.48);
  opacity: 0;
  backdrop-filter: blur(6px);
  transition: opacity 0.34s ease;
  touch-action: none;
}

.material-info-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(100%, 860px);
  max-height: min(86vh, 780px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: rgba(250, 253, 255, 0.24);
  box-shadow:
    0 28px 80px rgba(18, 29, 48, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(30px) saturate(1.24);
  -webkit-backdrop-filter: blur(30px) saturate(1.24);
  opacity: 0.96;
  transform: translate3d(0, calc(100% + 32px), 0);
  transition:
    transform 0.46s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.34s ease;
  will-change: transform, opacity;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.material-info-sheet.is-open .material-info-sheet-overlay {
  opacity: 1;
}

.material-info-sheet.is-open .material-info-panel {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.material-info-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 30px 12px;
}

.material-info-panel-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.08;
}

.material-info-panel-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  color: #5f6472;
  background: rgba(244, 246, 250, 0.58);
  line-height: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 20px rgba(31, 42, 68, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.material-info-panel-close svg {
  display: block;
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.material-info-panel-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 30px 14px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 18px;
  background: rgba(236, 248, 251, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  isolation: isolate;
}

.material-info-panel-tabs::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  z-index: 0;
  width: calc((100% - 12px) / 2);
  border-radius: 14px;
  background: rgba(49, 174, 194, 0.94);
  box-shadow:
    0 8px 20px rgba(49, 157, 188, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  content: "";
  transform: translateX(0);
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.28s ease,
    box-shadow 0.28s ease;
}

.material-info-panel-tabs[data-active-tab="description"]::before {
  transform: translateX(calc(100% + 4px));
}

.material-info-panel-tab {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  color: #2b7384;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  transition:
    color 0.26s ease,
    text-shadow 0.26s ease;
}

.material-info-panel-tab.active {
  color: #fff;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 1px 10px rgba(18, 72, 88, 0.14);
}

.material-info-panel-body {
  min-height: 0;
  overflow-y: auto;
  padding: 0 30px 24px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.material-info-panel-body::-webkit-scrollbar {
  display: none;
}

.material-info-tab-panel[hidden] {
  display: none;
}

#materialInfoSpecs:not([hidden]) {
  display: grid;
  gap: 12px;
}

.material-info-sheet-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.material-info-summary-card {
  --summary-accent-rgb: 49, 174, 194;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 82px;
  padding: 12px 12px;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 16%, rgba(var(--summary-accent-rgb), 0.13), transparent 45%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(244, 250, 252, 0.27));
  box-shadow:
    0 12px 26px rgba(31, 42, 68, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

.material-info-summary-card::before {
  content: none;
}

.material-info-summary-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 0;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 12px;
  color: rgb(var(--summary-accent-rgb));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(var(--summary-accent-rgb), 0.12));
  box-shadow:
    0 8px 18px rgba(var(--summary-accent-rgb), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.material-info-summary-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.material-info-summary-copy {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 2px;
  justify-items: center;
  text-align: center;
}

.material-info-summary-copy span {
  overflow: hidden;
  color: rgb(var(--summary-accent-rgb));
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.material-info-summary-copy strong {
  overflow-wrap: anywhere;
  color: #222838;
  font-size: 13.5px;
  font-weight: 610;
  line-height: 1.2;
  text-wrap: balance;
}

.material-info-sheet-groups {
  display: grid;
  gap: 10px;
}

.site-glass-card,
.material-info-sheet-group {
  padding: var(--site-glass-card-padding);
  border: var(--site-glass-card-border);
  border-radius: var(--site-glass-card-radius);
  background: var(--site-glass-card-bg);
  box-shadow: var(--site-glass-card-shadow);
  backdrop-filter: var(--site-glass-card-blur);
  -webkit-backdrop-filter: var(--site-glass-card-blur);
}

.site-glass-card:first-child,
.material-info-sheet-group:first-child {
  padding-top: var(--site-glass-card-padding);
}

.site-glass-card:last-child,
.material-info-sheet-group:last-child {
  padding-bottom: var(--site-glass-card-padding);
}

.site-glass-title,
.material-info-sheet-group h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.material-info-topic-card {
  display: grid;
  grid-template-rows: auto minmax(54px, 1fr);
  align-content: stretch;
}

.material-info-topic-card h3 {
  margin-bottom: 8px;
  text-align: center;
}

.material-info-topic-value {
  display: grid;
  min-width: 0;
  place-items: center;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: center;
}

.site-glass-list,
.material-info-sheet-group dl {
  display: grid;
  margin: 0;
}

.site-glass-row,
.material-info-sheet-row {
  display: grid;
  grid-template-columns: minmax(118px, 0.7fr) minmax(0, 1fr);
  gap: 12px;
  padding: 6px 0;
}

.site-glass-row + .site-glass-row,
.material-info-sheet-row + .material-info-sheet-row {
  border-top: 1px solid var(--site-glass-row-line);
  box-shadow: inset 0 1px 0 var(--site-glass-row-highlight);
}

.site-glass-row dt,
.site-glass-row dd,
.material-info-sheet-row dt,
.material-info-sheet-row dd {
  margin: 0;
  line-height: 1.32;
}

.site-glass-label,
.material-info-sheet-row dt {
  color: var(--site-glass-label);
  font-size: 13px;
  font-weight: 550;
}

.site-glass-value,
.material-info-sheet-row dd {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.material-info-description-panel {
  color: #596174;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
}

.material-info-description-block {
  grid-column: 1 / -1;
  scroll-margin-top: 10px;
}

.material-info-description-copy {
  display: grid;
  gap: 14px;
  padding-top: 12px;
}

.material-info-description-copy p {
  margin: 0;
}

.material-info-description-block .material-info-description-copy {
  padding-top: 0;
}

.material-info-description-block p {
  color: #2f3545;
  font-size: 14px;
  font-weight: 520;
  line-height: 1.52;
}

.auth-dialog h2 {
  margin: 0 auto 26px;
  color: var(--text);
  font-size: 36px;
  line-height: 1.08;
  text-align: center;
  white-space: nowrap;
}

.auth-close {
  position: absolute;
  top: 14px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  color: #70778b;
  background: #f1f3f8;
}

.auth-close svg {
  width: 20px;
  height: 20px;
}

.phone-submit,
.auth-local-profile,
.auth-secondary {
  width: 100%;
  border: 0;
  border-radius: 14px;
}

.phone-auth-form {
  display: grid;
  gap: 18px;
}

.auth-social {
  display: grid;
  gap: 14px;
  justify-items: center;
  margin-bottom: 18px;
}

.auth-social[hidden] {
  display: none;
}

.auth-local-profile {
  min-height: 50px;
  margin: 0 0 18px;
  color: #fff;
  background: #46b5ca;
  box-shadow: 0 12px 24px rgba(70, 181, 202, 0.22);
  font-size: 16px;
  font-weight: 800;
}

.auth-local-profile[hidden] {
  display: none;
}

.vkid-container {
  min-height: 52px;
  width: 100%;
  overflow: hidden;
}

.vkid-container > * {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 520px !important;
  margin-inline: auto !important;
}

.vkid-container .VkIdSdk_oauth_container,
.vkid-container .VkIdSdk_oauth_list {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
}

.vkid-container .VkIdSdk_oauth_container,
.vkid-container [class*="oauth" i][class*="container" i] {
  display: grid !important;
  gap: 14px !important;
  justify-items: center !important;
}

.vkid-container .VkIdSdk_oauth_list,
.vkid-container [class*="oauth" i][class*="list" i] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px !important;
  align-items: stretch;
  justify-content: center !important;
  justify-items: stretch !important;
  width: 100% !important;
  max-width: 520px !important;
  margin-inline: auto !important;
}

.vkid-container.vkid-single-provider .VkIdSdk_oauth_list,
.vkid-container.vkid-single-provider [class*="oauth" i][class*="list" i] {
  grid-template-columns: minmax(0, 1fr);
  max-width: 320px !important;
}

.vkid-container .VkIdSdk_oauth_item,
.vkid-container [class*="oauth" i][class*="item" i] {
  box-sizing: border-box;
  display: grid !important;
  place-items: center !important;
  justify-content: stretch !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 54px !important;
  padding: 0 !important;
  border: 1px solid #d9dde7 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(25, 36, 65, 0.06) !important;
  overflow: hidden !important;
}

.vkid-container .VkIdSdk_oauth_link_text {
  max-width: 430px;
  margin-inline: auto;
  color: #858da0;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.22;
  text-align: center;
}

.vkid-container .VkIdSdk_oauth_item a,
.vkid-container .VkIdSdk_oauth_item button,
.vkid-container [class*="oauth" i][class*="item" i] a,
.vkid-container [class*="oauth" i][class*="item" i] button,
.vkid-container a[class*="oauth" i],
.vkid-container button[class*="oauth" i] {
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  text-decoration: none !important;
}

.vkid-container .VkIdSdk_oauth_button_text {
  display: none !important;
  max-width: 100%;
  font-size: 12px !important;
  line-height: 1.14 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.vkid-container .VkIdSdk_oauth_item svg,
.vkid-container .VkIdSdk_oauth_item img,
.vkid-container [class*="oauth" i][class*="item" i] svg,
.vkid-container [class*="oauth" i][class*="item" i] img {
  display: block !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
}

.vkid-container [class*="spinner" i],
.vkid-container [class*="loader" i],
.vkid-container [class*="progress" i] {
  display: none !important;
}

.local-auth-preview {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 100%;
  text-align: center;
}

.local-auth-preview[hidden] {
  display: none;
}

.local-auth-preview p {
  max-width: 430px;
  margin: 0;
  color: #858da0;
  font-size: 15px;
  font-weight: 720;
  line-height: 1.22;
  text-align: center;
}

.local-auth-providers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  justify-content: center;
  justify-items: stretch;
}

.local-auth-provider {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-inline-size: 0;
  height: 54px;
  padding: 0;
  border: 1px solid #d9dde7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(25, 36, 65, 0.06);
}

.local-auth-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.local-auth-icon-vk {
  background: #0877f2;
  font-size: 12px;
}

.local-auth-icon-mail {
  color: #0877f2;
  background: transparent;
  font-size: 32px;
  font-weight: 800;
}

.local-auth-icon-ok {
  background: #ff8500;
  font-size: 11px;
}

.auth-divider {
  margin: 0;
  color: #8d94a6;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.auth-divider span {
  display: inline-block;
  padding: 0 10px;
  border-radius: 999px;
  background: #f4f7fb;
}

.phone-auth-form[hidden],
.auth-step[hidden] {
  display: none;
}

.phone-auth-form.is-code-step .phone-submit,
.phone-auth-form.is-code-step .auth-status {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

.auth-step {
  display: grid;
  gap: 16px;
}

.phone-entry {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  min-height: 76px;
  padding: 0 18px;
  border: 2px solid rgba(70, 181, 202, 0.44);
  border-radius: 20px;
  color: var(--text);
  background: #fff;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.phone-entry:focus-within {
  border-color: #46b5ca;
  box-shadow: 0 0 0 4px rgba(70, 181, 202, 0.16);
}

.phone-prefix {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 18px;
}

.phone-prefix svg {
  width: 18px;
  height: 18px;
  color: #2d3140;
  stroke-width: 3;
}

.ru-flag {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(#fff 0 33%, #1f68d8 33% 66%, #e23a3a 66%);
  box-shadow:
    inset 0 0 0 1px rgba(31, 34, 53, 0.08),
    0 4px 12px rgba(31, 34, 53, 0.12);
}

.country-code {
  margin-right: 8px;
  color: #202330;
  font-size: 24px;
  font-weight: 800;
}

.phone-entry input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 600;
  background: #fff;
}

.phone-entry input::placeholder {
  color: #c5c7cf;
}

.sms-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 86px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #f6f8fb;
}

.sms-copy {
  display: grid;
  gap: 4px;
}

.sms-copy strong {
  color: #2f3340;
  font-size: 17px;
}

.sms-copy small {
  color: #8c91a0;
  font-size: 16px;
  font-weight: 800;
}

.sms-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  color: #46b5ca;
  background: rgba(70, 181, 202, 0.11);
}

.sms-bell::after {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #ff5c6f;
  content: "1";
  font-size: 13px;
  font-weight: 900;
}

.sms-bell svg {
  width: 30px;
  height: 30px;
  stroke-width: 2.4;
}

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

.code-digit {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 16px;
  outline: 0;
  color: var(--text);
  background: #eef0f5;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
}

.code-digit:focus {
  border-color: #46b5ca;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(70, 181, 202, 0.16);
}

.phone-submit {
  min-height: 74px;
  color: #fff;
  background: linear-gradient(110deg, #29a8ad, #46b5ca 58%, #5b84cf);
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(70, 181, 202, 0.26);
}

.auth-account {
  display: grid;
  gap: 14px;
}

.auth-account[hidden] {
  display: none;
}

.account-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 176px;
  padding: 24px 18px 22px;
  border-radius: 18px;
  color: #5d6577;
  background: #f6f8fb;
  font-weight: 800;
  text-align: center;
}

.account-avatar {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  overflow: hidden;
  border: 1px solid #d8dfec;
  border-radius: 50%;
  color: #8993a8;
  background: #f1f5fb;
}

.account-avatar.has-image {
  border-color: transparent;
}

.account-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-avatar svg {
  width: 64px;
  height: 64px;
  stroke-width: 1.8;
}

.account-card strong {
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  font-size: 24px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-card small {
  color: #7b8293;
  font-size: 13px;
}

.auth-secondary {
  min-height: 48px;
  color: #4f5668;
  background: #edf1f7;
  font-weight: 800;
}

.auth-status {
  min-height: 18px;
  margin: 0;
  color: #626a7d;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

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

@media (max-width: 1420px) {
  .main-bar,
  .catalog-shell {
    width: min(1320px, calc(100% - 32px));
  }
}

@media (max-width: 1180px) {
  .main-bar {
    grid-template-columns: minmax(130px, 0.65fr) minmax(220px, 330px) minmax(124px, 1fr) auto;
  }

  .desktop-brand {
    font-size: clamp(24px, 3vw, 34px);
  }

  .header-actions {
    grid-column: 4;
    justify-content: end;
  }

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

  .catalog-subscription-ad {
    grid-column: span 2;
  }

  .site-footer {
    padding: 30px 34px;
  }

  .material-detail-page {
    grid-template-columns: minmax(360px, 1.05fr) minmax(320px, 0.95fr);
  }

  .material-actions-card {
    position: static;
    grid-column: 2;
  }

  .material-description {
    grid-column: 1 / -1;
  }

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

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

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

@media (min-width: 901px) {
  .material-gallery {
    grid-column: 1;
    grid-row: 2 / span 4;
  }

  .material-activity-section {
    grid-column: 2;
    grid-row: 2;
  }

  .material-info {
    grid-column: 2;
    grid-row: 3;
  }

  .material-actions-card {
    grid-column: 2;
    grid-row: 4;
  }

  .material-description {
    grid-column: 1 / -1;
    grid-row: 6;
  }

  .material-info-sheet {
    place-items: center;
    padding: 40px;
  }

  .material-info-panel {
    width: min(1120px, calc(100vw - 80px));
    max-height: min(760px, calc(100dvh - 80px));
    border-radius: 26px;
    background: rgba(250, 253, 255, 0.32);
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.98);
  }

  .material-info-sheet.is-open .material-info-panel {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .material-info-panel-head {
    padding: 24px 32px 12px;
  }

  .material-info-panel-head h2 {
    font-size: 24px;
  }

  .material-info-panel-close {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .material-info-panel-tabs {
    width: min(560px, calc(100% - 64px));
    margin: 0 auto 18px;
    border-radius: 18px;
  }

  .material-info-panel-tab {
    min-height: 44px;
    padding: 0 22px;
    border-radius: 12px;
    font-size: 14px;
  }

  .material-info-panel-body {
    padding: 0 32px 32px;
  }

  #materialInfoSpecs:not([hidden]) {
    display: grid;
    gap: 16px;
  }

  #materialInfoDescription:not([hidden]) {
    display: block;
  }

  .material-info-sheet-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .material-info-summary-card {
    min-height: 92px;
    padding: 13px 12px;
    border-radius: 17px;
  }

  .material-info-summary-icon {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }

  .material-info-summary-copy strong {
    font-size: 14px;
  }

  .material-info-sheet-groups {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
  }

  .site-glass-card,
  .material-info-sheet-group {
    display: grid;
    align-content: start;
    min-height: 148px;
    padding: 16px;
    border: var(--site-glass-card-border);
    border-radius: 18px;
    background: var(--site-glass-card-bg);
  }

  .material-info-topic-card {
    grid-template-rows: auto minmax(72px, 1fr);
    align-content: stretch;
  }

  .material-info-sheet-group:nth-child(4) {
    grid-column: span 2;
  }

  .material-info-description-block {
    grid-column: 1 / -1;
  }

  .site-glass-card:first-child,
  .site-glass-card:last-child,
  .material-info-sheet-group:first-child,
  .material-info-sheet-group:last-child {
    padding: 16px;
  }

  .site-glass-title,
  .material-info-sheet-group h3 {
    margin-bottom: 12px;
    font-size: 17px;
  }

  .site-glass-row,
  .material-info-sheet-row {
    grid-template-columns: minmax(118px, 0.75fr) minmax(0, 1fr);
    gap: 12px;
    padding: 7px 0;
  }

  .site-glass-row dt,
  .site-glass-row dd,
  .material-info-sheet-row dt,
  .material-info-sheet-row dd {
    font-size: 13px;
  }

  .profile-view,
  .admin-view {
    width: min(940px, calc(100% - 56px));
    padding-bottom: 56px;
  }

  .profile-guest-state {
    width: min(100%, 520px);
    min-height: auto;
    margin: 28px auto 0;
    padding: 46px 34px 42px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(31, 34, 53, 0.08);
  }

  .profile-guest-avatar {
    width: 72px;
    height: 72px;
  }

  .profile-guest-avatar svg {
    width: 44px;
    height: 44px;
  }

  .profile-guest-state h1 {
    margin-top: 8px;
    font-size: 26px;
  }

  .profile-guest-state p {
    max-width: 360px;
    font-size: 16px;
  }

  .profile-guest-action {
    width: min(100%, 260px);
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 14px;
  }

  .profile-hero {
    gap: 14px;
    padding: 16px 20px;
    border-radius: 18px;
  }

  .profile-avatar {
    width: 64px;
    height: 64px;
  }

  .profile-avatar svg {
    width: 38px;
    height: 38px;
  }

  .profile-hero-copy h1 {
    font-size: 24px;
  }

  .profile-settings-link {
    margin-top: 5px;
    font-size: 15px;
    font-weight: 700;
  }

  .profile-hero-action {
    --profile-hero-action-size: 48px;
    --profile-hero-action-icon-size: 26px;
    border-radius: 15px;
  }

  .profile-metrics {
    gap: 12px;
    margin-top: 12px;
  }

  .profile-metric-card {
    --profile-metric-icon-size: 28px;
    min-height: 96px;
    padding: 16px 20px;
    border-radius: 18px;
  }

  .profile-metric-copy h2,
  .profile-company-copy h2 {
    font-size: 22px;
  }

  .profile-metric-copy p,
  .profile-company-copy p {
    margin-top: 5px;
    font-size: 16px;
    font-weight: 700;
  }

  .profile-company,
  .profile-admin-entry {
    margin-top: 12px;
    padding: 16px 20px;
    border-radius: 18px;
  }

  .profile-admin-entry {
    min-height: 80px;
  }

  .profile-company-toggle {
    min-height: 48px;
  }

  .profile-company-icons {
    gap: 9px;
  }

  .profile-company-icons svg:first-child {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .profile-company-icons svg:last-child {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
  }

  .profile-subscription-toggle {
    min-height: 48px;
  }

  .profile-subscription-icons {
    gap: 9px;
  }

  .profile-subscription-icons svg:first-child {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .profile-subscription-icons svg:last-child {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
  }

  .profile-company.is-open .profile-company-body {
    padding-top: 9px;
  }

  .profile-subscription-card.is-open .profile-subscription-body {
    max-height: 100px;
    padding-top: 9px;
  }

  .profile-company-link {
    grid-template-columns: minmax(0, 1fr) 24px;
    min-height: 64px;
    padding: 10px 14px;
    border-radius: 14px;
  }

  .profile-company-link strong {
    font-size: 16px;
    line-height: 1.14;
  }

  .profile-company-link small {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.18;
  }

  .profile-company-link svg {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
  }

  .profile-subscription-action {
    grid-template-columns: minmax(0, 1fr) 24px;
    min-height: 64px;
    padding: 10px 14px;
    border-radius: 14px;
  }

  .profile-subscription-action strong {
    font-size: 16px;
    line-height: 1.14;
  }

  .profile-subscription-action small {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.18;
  }

  .profile-subscription-action svg {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
  }

  .profile-recent {
    margin-top: 12px;
    padding: 16px;
    border-radius: 18px;
  }

  .profile-recent-head h2 {
    font-size: 24px;
  }

  .profile-recent-all {
    font-size: 18px;
  }

  .profile-recent-list {
    grid-auto-columns: min(190px, calc((100% - 24px) / 3));
  }

  .admin-panel {
    margin-top: 14px;
    padding: 18px;
    border-radius: 18px;
  }

  .admin-panel-head {
    margin-bottom: 14px;
  }

  .admin-panel-head h2 {
    font-size: 24px;
  }

  .admin-form input,
  .admin-form select {
    min-height: 42px;
  }

  .admin-form input,
  .admin-form select,
  .admin-form textarea {
    border-radius: 12px;
    font-size: 14px;
  }

  .admin-submit {
    min-height: 46px;
    border-radius: 14px;
    font-size: 15px;
  }
}

@media (max-width: 900px) {
  .contact-support-popover {
    display: none !important;
  }

  body.is-materials-cart .site-header {
    display: none;
  }

  body.is-profile .site-header {
    display: none;
  }

  body.is-admin-view .site-header {
    display: none;
  }

  body.is-recent-viewed .site-header {
    display: none;
  }

  body.is-favorites-view .site-header {
    display: none;
  }

  body.is-downloads-view .site-header {
    display: none;
  }

  body.is-pending-reviews-view .site-header {
    display: none;
  }

  body.is-offer-view .site-header {
    display: none;
  }

  body.is-about-view .site-header {
    display: none;
  }

  body.is-agreement-view .site-header {
    display: none;
  }

  body.is-privacy-view .site-header {
    display: none;
  }

  body.is-refund-view .site-header {
    display: none;
  }

  body.is-material-reviews-view .site-header {
    display: none;
  }

  body.is-material-questions-view .site-header {
    display: none;
  }

  body.is-ai-agent-view .site-header {
    display: none;
  }

  .main-bar {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding: 12px 0 14px;
  }

  .search-field {
    min-height: 56px;
    border-radius: 18px;
  }

  .header-actions {
    display: none;
  }

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

  .catalog-subscription-ad {
    grid-column: span 2;
  }

  .category-tiles-section {
    margin-bottom: 24px;
  }

  .category-tiles-head {
    margin-bottom: 14px;
  }

  .category-tiles-grid {
    max-width: none;
  }

  .material-detail-view {
    width: min(100% - 32px, 720px);
  }

  .profile-view,
  .admin-view {
    width: min(100% - 24px, 720px);
    padding-bottom: 0;
  }

  .recent-view {
    width: min(100% - 24px, 720px);
    padding-bottom: 0;
  }

  .profile-hero-copy h1 {
    font-size: 36px;
  }

  .profile-settings-link {
    font-size: 24px;
  }

  .profile-metric-copy h2,
  .profile-company-copy h2 {
    font-size: 30px;
  }

  .profile-metric-copy p,
  .profile-company-copy p {
    font-size: 22px;
  }

  .material-detail-page,
  .material-feedback {
    grid-template-columns: minmax(0, 1fr);
  }

  .material-actions-card,
  .material-description {
    grid-column: auto;
  }

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

  .material-thumbs {
    display: none;
  }

  .material-main-image {
    min-height: auto;
  }

  .feedback-score-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .feedback-all-media {
    justify-self: start;
  }

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

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

@media (max-width: 620px) {
  .admin-ad-banner-head,
  .admin-ad-banner-meta {
    align-items: stretch;
    flex-direction: column;
  }

  .site-header {
    border-radius: 0 0 30px 30px;
    transition: transform 0.24s ease;
    will-change: transform;
  }

  .site-header.is-header-hidden {
    transform: translateY(-100%);
    box-shadow: none;
  }

  .category-tiles-section {
    margin: 0 0 22px;
  }

  .category-tiles-head {
    align-items: start;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
  }

  .category-tiles-head h1 {
    font-size: 28px;
  }

  .category-tiles-head p {
    font-size: 14px;
    text-align: left;
  }

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

  .category-tile {
    min-height: 142px;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(31, 34, 53, 0.1);
  }

  .category-tile::before {
    width: 72px;
    height: 72px;
    right: -28px;
    top: -24px;
  }

  .category-tile::after {
    width: 82px;
    height: 82px;
    left: -38px;
    bottom: -42px;
  }

  .category-tile-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .category-tile-icon svg {
    width: 17px;
    height: 17px;
  }

  .category-tile-title {
    font-size: 16px;
    line-height: 1.12;
  }

  .category-tile-subtitle {
    font-size: 11px;
    line-height: 1.14;
  }

  .category-tile-count {
    padding: 5px 7px;
    font-size: 9px;
  }

  body.is-material-detail .site-header {
    display: none;
  }

  .main-bar,
  .catalog-shell,
  .materials-cart-view,
  .ai-agent-view,
  .profile-view,
  .admin-view,
  .recent-view,
  .material-reviews-view,
  .material-detail-view {
    width: min(100% - 20px, 560px);
  }

  .search-field {
    padding-left: 14px;
  }

  .search-field input {
    font-size: 16px;
  }

  main {
    padding: 18px 0 calc(var(--mobile-nav-total-height) + var(--mobile-nav-bottom-offset) + 18px);
  }

  .site-footer {
    grid-template-columns: minmax(0, 1fr) minmax(128px, 0.95fr);
    grid-template-areas:
      "contact links"
      "info links";
    gap: 14px;
    margin-top: 34px;
    padding: 20px 18px;
  }

  .site-footer-info {
    align-self: start;
    font-size: 11px;
    line-height: 1.28;
  }

  .site-footer-info strong {
    font-size: 12px;
  }

  .site-footer-links {
    align-self: start;
    gap: 10px;
  }

  .site-footer-links button {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.24;
  }

  .site-footer-contact {
    display: grid;
    align-self: start;
    justify-items: start;
    margin-top: 0;
  }

  .site-footer-contact-button {
    font-size: 12px;
    text-align: left;
  }

  .site-footer-messengers {
    justify-content: flex-start;
    gap: 7px;
  }

  .site-footer-messenger {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 9px;
  }

  .site-footer-messenger svg {
    width: 16px;
    height: 16px;
  }

  body.is-material-detail main {
    padding-top: 8px;
  }

  .materials-cart-view {
    padding-bottom: 0;
  }

  .ai-agent-view {
    padding-bottom: 0;
  }

  .ai-agent-shell {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    min-height: calc(100svh - var(--mobile-nav-total-height) - 120px);
  }

  .ai-agent-sidebar {
    gap: 8px;
    padding: 0;
    border-radius: 18px;
  }

  .ai-agent-shell.is-sidebar-collapsed .ai-agent-sidebar {
    padding: 0;
  }

  #aiAgentView .ai-agent-sidebar-head {
    align-items: center;
    gap: 5px;
    padding: 7px 6px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
  }

  #aiAgentView .ai-agent-sidebar-head > span {
    display: flex;
    min-width: 0;
    height: 17px;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
  }

  #aiAgentView .ai-agent-sidebar-actions {
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
  }

  #aiAgentView .ai-agent-sidebar-head .ai-agent-new-chat,
  #aiAgentView .ai-agent-sidebar-head .ai-agent-sidebar-toggle {
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
    padding: 0;
    border-radius: 6px;
  }

  #aiAgentView .ai-agent-sidebar-head .ai-agent-new-chat svg,
  #aiAgentView .ai-agent-sidebar-head .ai-agent-sidebar-toggle svg {
    width: 10px;
    height: 10px;
    stroke-width: 2.3;
  }

  .ai-agent-chat-list {
    padding: 10px;
    border-radius: 18px;
  }

  .ai-agent-chat {
    min-height: 58px;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 7px 5px;
    border-radius: 13px;
    text-align: center;
  }

  .ai-agent-chat-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
  }

  .ai-agent-chat strong {
    font-size: 11px;
    font-weight: 700;
  }

  .ai-agent-chat small {
    display: none;
  }

  .ai-agent-chat-panel {
    padding: 12px;
    border-radius: 18px;
  }

  .ai-agent-chat-head {
    align-items: center;
    padding-bottom: 10px;
  }

  .ai-agent-chat-head p {
    font-size: 11px;
  }

  .ai-agent-chat-head h1 {
    font-size: 20px;
  }

  .ai-agent-status {
    padding: 6px 9px;
    font-size: 10px;
  }

  .ai-agent-messages {
    min-height: 250px;
    padding: 12px 0;
  }

  .ai-agent-message {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
  }

  .ai-agent-message-avatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .ai-agent-message p {
    padding: 11px 12px;
    font-size: 13px;
  }

  .ai-agent-composer {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 7px;
    padding: 7px;
    border-radius: 16px;
  }

  .ai-agent-composer textarea {
    min-height: 34px;
    font-size: 13px;
  }

  .ai-agent-composer button {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .ai-agent-composer button svg {
    width: 20px;
    height: 20px;
  }

  .profile-view,
  .admin-view {
    padding-bottom: 0;
  }

  .recent-view {
    padding-bottom: 0;
  }

  .material-reviews-view {
    padding-bottom: 0;
  }

  .recent-view-panel {
    padding: 14px;
    border-radius: 18px;
  }

  .recent-view-head {
    margin-bottom: 12px;
  }

  .recent-view-head h1 {
    gap: 6px;
    font-size: clamp(17px, 4.9vw, 20px);
  }

  .recent-view-head span {
    font-size: 12px;
  }

  .material-reviews-page {
    padding: 14px;
    border-radius: 18px;
  }

  .material-reviews-title-wrap h1 {
    font-size: 24px;
  }

  .material-reviews-title-wrap p {
    margin-top: 5px;
    font-size: 13px;
  }

  .material-user-review-card {
    padding: 12px;
    border-radius: 14px;
  }

  .material-user-review-author strong {
    font-size: 16px;
  }

  .material-user-review-author span {
    font-size: 12px;
  }

  .material-user-review-body p {
    font-size: 14px;
  }

  .recent-view-grid {
    gap: 22px 10px;
  }

  .profile-hero {
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
  }

  .profile-guest-state {
    min-height: calc(100svh - 148px);
    padding: 58px 22px 72px;
  }

  .profile-guest-avatar {
    width: 72px;
    height: 72px;
  }

  .profile-guest-avatar svg {
    width: 44px;
    height: 44px;
  }

  .profile-guest-state h1 {
    font-size: 26px;
  }

  .profile-guest-state p {
    font-size: 15px;
  }

  .profile-guest-action {
    width: min(100%, 250px);
    min-height: 36px;
    padding: 0 14px;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(70, 181, 202, 0.16);
    font-size: 13.5px;
  }

  .profile-avatar {
    width: 64px;
    height: 64px;
  }

  .profile-avatar svg {
    width: 38px;
    height: 38px;
  }

  .profile-hero-copy h1 {
    font-size: 20px;
  }

  .profile-settings-link {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
  }

  .profile-subscription-card {
    margin-top: 10px;
  }

  .profile-hero-action {
    --profile-hero-action-size: 44px;
    --profile-hero-action-icon-size: 24px;
    width: var(--profile-hero-action-size);
    height: var(--profile-hero-action-size);
    border-radius: 14px;
  }

  .profile-hero-action svg {
    width: var(--profile-hero-action-icon-size);
    height: var(--profile-hero-action-icon-size);
  }

  .profile-metrics {
    gap: 10px;
    margin-top: 10px;
  }

  .profile-metric-card {
    --profile-metric-icon-size: 24px;
    min-height: 84px;
    padding: 14px;
    border-radius: 18px;
  }

  .profile-metric-copy h2,
  .profile-company-copy h2 {
    font-size: 16px;
  }

  .profile-metric-copy p,
  .profile-company-copy p {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
  }

  .profile-metric-card svg {
    flex-basis: var(--profile-metric-icon-size);
    width: var(--profile-metric-icon-size);
    height: var(--profile-metric-icon-size);
  }

  .profile-company,
  .profile-admin-entry {
    margin-top: 10px;
    padding: 12px;
    border-radius: 18px;
  }

  .profile-admin-entry {
    min-height: 72px;
  }

  .profile-metric-card.profile-subscription-card {
    padding: 12px;
    border-radius: 18px;
  }

  .profile-company-icons {
    gap: 8px;
  }

  .profile-company-icons svg:first-child {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
  }

  .profile-company-icons svg:last-child {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }

  .profile-subscription-toggle {
    min-height: 48px;
  }

  .profile-subscription-icons {
    gap: 8px;
  }

  .profile-subscription-icons svg:first-child {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
  }

  .profile-subscription-icons svg:last-child {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }

  .profile-company.is-open .profile-company-body {
    max-height: 680px;
    padding-top: 7px;
  }

  .profile-subscription-card.is-open .profile-subscription-body {
    max-height: 84px;
    padding-top: 7px;
  }

  .profile-company-link {
    grid-template-columns: minmax(0, 1fr) 22px;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px 12px;
    border-radius: 14px;
  }

  .profile-company-link strong {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
  }

  .profile-company-link small {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.18;
  }

  .profile-company-link svg {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
  }

  .profile-subscription-action {
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 10px;
    min-height: 58px;
    padding: 8px 12px;
    border-radius: 14px;
  }

  .profile-subscription-action strong {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
  }

  .profile-subscription-action small {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.18;
  }

  .profile-subscription-action svg {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
  }

  .offer-panel {
    padding: 16px;
    border-radius: 20px;
  }

  .offer-head {
    gap: 12px;
    margin-bottom: 16px;
  }

  .offer-back {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .offer-back svg {
    width: 26px;
    height: 26px;
  }

  .offer-head p {
    font-size: 12px;
  }

  .offer-head h1 {
    font-size: 20px;
    font-weight: 700;
  }

  .offer-content {
    font-size: 14px;
    line-height: 1.55;
  }

  .profile-recent {
    margin-top: 10px;
    padding: 14px 14px 12px;
    border-radius: 18px;
  }

  .profile-recent-head {
    margin-bottom: 10px;
  }

  .profile-recent-head h2 {
    font-size: 18px;
  }

  .profile-recent-all {
    font-size: 15px;
  }

  .profile-recent-all svg {
    width: 14px;
    height: 14px;
  }

  .profile-recent-list {
    grid-auto-columns: min(184px, calc((100% - 10px) / 2));
    gap: 10px;
  }

  .profile-recent-nav {
    top: 32%;
    width: 36px;
    height: 36px;
  }

  .profile-recent-nav svg {
    width: 20px;
    height: 20px;
  }

  .profile-recent-nav-prev {
    left: -6px;
  }

  .profile-recent-nav-next {
    right: -6px;
  }

  .profile-recent-cover {
    border-radius: 14px;
  }

  .profile-recent-favorite {
    width: 32px;
    height: 32px;
  }

  .profile-recent-favorite svg {
    width: 18px;
    height: 18px;
  }

  .profile-recent-title {
    min-height: 34px;
    font-size: 13px;
  }

  .profile-recent-meta,
  .profile-recent-rating {
    font-size: 12px;
  }

  .profile-recent-open-button {
    min-height: 32px;
    border-radius: 9px;
    font-size: 13px;
  }

  .material-detail-view {
    padding-bottom: calc(var(--mobile-nav-total-height) + var(--mobile-nav-bottom-offset) + 112px);
  }

  .material-detail-page {
    row-gap: 10px;
  }

  .material-breadcrumb {
    position: fixed;
    top: 8px;
    left: 50%;
    z-index: 46;
    width: min(100% - 36px, 520px);
    padding: 4px;
    border: 1px solid rgba(149, 159, 180, 0.24);
    border-radius: 16px;
    background: rgba(239, 244, 252, 0.95);
    box-shadow: 0 12px 32px rgba(31, 34, 53, 0.12);
    backdrop-filter: blur(8px);
    transform: translate(-50%, calc(-100% - 12px));
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.24s ease;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 92px;
    column-gap: 6px;
    align-items: center;
    min-height: 42px;
    font-size: 10px;
  }

  .material-breadcrumb.is-floating-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }

  .material-breadcrumb-trail {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 0 2px;
    text-align: center;
    line-height: 1.2;
  }

  .material-back {
    grid-column: 1;
    grid-row: 1;
  }

  .material-top-actions {
    grid-column: 3;
    grid-row: 1;
    margin-left: 0;
  }

  .material-back,
  .material-top-button {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(31, 34, 53, 0.1);
  }

  .material-back svg,
  .material-top-button svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
  }

  .material-main-image,
  .material-info,
  .material-actions-card,
  .material-description,
  .material-feedback {
    border-radius: 14px;
  }

  .material-info,
  .material-actions-card,
  .material-description,
  .material-feedback {
    padding: 16px;
  }

  .material-description {
    padding: 12px;
    gap: 8px;
  }

  .material-info h1 {
    font-size: 22px;
    font-weight: 640;
    padding-left: 10px;
  }

  .material-description-heading {
    font-size: 22px;
    font-weight: 640;
    padding-left: 10px;
  }

  .material-activity-summary {
    gap: 6px;
  }

  .material-activity-card {
    min-height: 64px;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    box-shadow:
      0 10px 24px rgba(31, 34, 53, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.88);
  }

  .material-activity-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .material-activity-icon svg {
    width: 18px;
    height: 18px;
  }

  .material-activity-copy strong {
    font-size: 18px;
    font-weight: 660;
  }

  .material-activity-copy small {
    font-size: 11px;
    font-weight: 610;
  }

  .material-spec-row {
    grid-template-columns: minmax(95px, 0.8fr) minmax(110px, 1.2fr);
    font-size: 13px;
    gap: 10px;
    padding: 7px 0;
  }

  .material-spec-row dt {
    font-size: 13.5px;
    font-weight: 610;
  }

  .material-spec-row dd {
    font-size: 13.5px;
    font-weight: 620;
    line-height: 1.34;
  }

  .material-cart-action,
  .material-download-action {
    min-height: 50px;
    font-size: 15px;
  }

  .material-actions-card {
    display: none;
  }

  .material-info-sheet {
    padding: 0;
  }

  .material-info-panel {
    width: 100%;
    max-height: 88dvh;
    margin: 0;
    border-radius: 26px 26px 0 0;
  }

  .material-info-panel-head {
    padding: 18px 16px 10px;
  }

  .material-info-panel-head h2 {
    font-size: 20px;
  }

  .material-info-panel-close {
    width: 32px;
    height: 32px;
    border-radius: 11px;
  }

  .material-info-panel-close svg {
    width: 17px;
    height: 17px;
  }

  .material-info-panel-tabs {
    margin: 0 16px 12px;
    border-radius: 16px;
  }

  .material-info-panel-tab {
    flex: 1;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 13px;
  }

  .material-info-panel-body {
    padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  }

  #materialInfoSpecs:not([hidden]) {
    gap: 10px;
  }

  .material-info-sheet-summary {
    gap: 8px;
  }

  .material-info-summary-card {
    min-height: 82px;
    gap: 6px;
    padding: 11px 9px;
    border-radius: 14px;
  }

  .material-info-summary-icon {
    width: 30px;
    height: 30px;
    border-radius: 11px;
  }

  .material-info-summary-icon svg {
    width: 16px;
    height: 16px;
  }

  .material-info-summary-copy span {
    font-size: 10px;
  }

  .material-info-summary-copy strong {
    font-size: 12px;
  }

  .site-glass-card,
  .material-info-sheet-group {
    padding: 12px;
    border-radius: 14px;
  }

  .site-glass-title,
  .material-info-sheet-group h3 {
    margin-bottom: 8px;
    font-size: 15px;
  }

  .material-info-topic-value {
    font-size: 15px;
  }

  .site-glass-row,
  .material-info-sheet-row {
    grid-template-columns: minmax(106px, 0.68fr) minmax(0, 1fr);
    gap: 10px;
    padding: 5px 0;
  }

  .site-glass-row dt,
  .site-glass-row dd,
  .material-info-sheet-row dt,
  .material-info-sheet-row dd {
    font-size: 12.5px;
  }

  .material-mobile-action-bar {
    position: fixed;
    right: 0;
    bottom: calc(var(--mobile-nav-total-height) + var(--mobile-nav-bottom-offset));
    left: 0;
    z-index: 39;
    display: block;
    padding: 12px;
    border-radius: 30px 30px 0 0;
    background: #f5fbff;
    box-shadow: 0 -14px 30px rgba(31, 34, 53, 0.1);
    backdrop-filter: none;
    transform: translateY(var(--mobile-nav-visual-shift));
    transition:
      transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.3s ease;
    will-change: transform, opacity;
  }

  .material-mobile-action-bar.is-hidden {
    transform: translateY(calc(var(--mobile-nav-visual-shift) + 100% + 10px));
    opacity: 0;
    pointer-events: none;
  }

  .material-mobile-action-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 10px;
    width: min(100%, 560px);
    margin: 0 auto;
  }

  .material-mobile-action-bar .material-cart-action,
  .material-mobile-action-bar .material-download-action {
    min-height: 52px;
    border-radius: 16px;
    font-size: 15px;
  }

  .material-mobile-action-bar .material-cart-action {
    box-shadow: none;
  }

  .material-mobile-action-bar .material-cart-action svg,
  .material-mobile-action-bar .material-download-action svg {
    width: 22px;
    height: 22px;
  }

  .material-mobile-action-bar span {
    white-space: nowrap;
  }

  .material-mobile-action-bar .material-cart-action span {
    display: inline-block;
    width: 92px;
    text-align: left;
  }

  .material-actions-card p {
    width: 100%;
    white-space: nowrap;
    text-align: center;
    font-size: clamp(10px, 2.75vw, 12px);
    line-height: 1.2;
  }

  .feedback-tabs {
    gap: 18px;
  }

  .feedback-tabs button {
    font-size: 22px;
  }

  .feedback-score strong,
  .score-wreath {
    font-size: 36px;
  }

  .feedback-media-strip {
    grid-auto-columns: 70px;
  }

  .material-review-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .material-review-card img {
    width: 100%;
    height: 120px;
  }

  .related-materials {
    gap: 16px;
  }

  .related-materials h2 {
    font-size: 22px;
  }

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

  .materials-cart-panel {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .materials-cart-header h1 {
    gap: 6px;
    font-size: clamp(17px, 4.9vw, 20px);
  }

  .materials-cart-header span {
    color: #7b8295;
    font-size: 12px;
    font-weight: 600;
  }

  .materials-cart-toolbar {
    padding-bottom: 12px;
  }

  .cart-check-all {
    gap: 9px;
    font-size: 14px;
  }

  .cart-check-all strong {
    font-size: 14px;
    font-weight: 600;
  }

  .cart-check-all span {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }

  .cart-row-check span {
    width: 15px;
    height: 15px;
    border-radius: 4px;
  }

  .cart-check-all input:checked + span::before {
    width: 8px;
    height: 5px;
    border-width: 0 0 2px 2px;
    margin-top: -1px;
  }

  .cart-row-check input:checked + span::before {
    width: 6px;
    height: 4px;
    border-width: 0 0 1.75px 1.75px;
    margin-top: -0.5px;
  }

  .cart-toolbar-actions button {
    width: 34px;
    height: 34px;
  }

  .cart-row {
    grid-template-columns: 15px 92px minmax(0, 1fr);
    gap: 7px;
    padding: 18px 0;
  }

  .cart-row-readonly {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 7px;
  }

  .cart-row-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-top: 0;
    line-height: 0;
    flex: 0 0 15px;
  }

  .cart-row-title {
    font-size: 15px;
  }

  .cart-row-meta,
  .cart-row-rating {
    font-size: 13px;
  }

  .downloads-review-button {
    min-height: 30px;
    padding: 0 11px;
    border-radius: 9px;
    font-size: 12.5px;
  }

  .cart-row-actions {
    grid-column: 3;
    justify-self: start;
    gap: 8px;
  }

  .cart-row-actions button {
    width: 34px;
    height: 34px;
  }

  .cart-undo-toast {
    top: 22px;
    width: min(calc(100% - 20px), 520px);
  }

  .cart-undo-toast-inner {
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .cart-undo-countdown,
  .cart-undo-ring {
    width: 30px;
    height: 30px;
  }

  .cart-undo-countdown {
    flex-basis: 30px;
  }

  .cart-undo-seconds {
    font-size: 15px;
  }

  .cart-undo-message {
    font-size: 12px;
  }

  .cart-undo-cancel {
    font-size: 11px;
  }

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

  .catalog-subscription-ad {
    grid-column: 1 / -1;
  }

  .related-materials-grid .catalog-subscription-ad {
    grid-column: 1 / -1;
  }

  .catalog-subscription-ad-media {
    border-radius: 13px;
    box-shadow:
      0 12px 24px rgba(31, 42, 68, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.44);
  }

  .catalog-subscription-ad-cta {
    right: 7px;
    bottom: 7px;
    min-height: 24px;
    padding: 0 9px;
    font-size: 10.5px;
  }

  .favorite-button {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
  }

  .favorite-button svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.2;
    transform: translateY(1px);
  }

  .quick-view-label {
    display: none;
  }

  .product-title {
    min-height: 38px;
    font-size: 14px;
  }

  .collection-button {
    min-height: 32px;
    border-radius: 9px;
    font-size: 13px;
  }

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

  .pending-review-title {
    min-height: 36px;
    font-size: 14px;
  }

  .mobile-bottom-nav {
    position: fixed;
    width: 100%;
    bottom: var(--mobile-nav-bottom-offset);
    left: 0;
    right: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    place-items: center;
    height: var(--mobile-nav-total-height);
    min-height: var(--mobile-nav-total-height);
    padding: 5px 10px;
    border-top: 1px solid rgba(132, 146, 166, 0.16);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -12px 28px rgba(31, 34, 53, 0.1);
    backdrop-filter: blur(16px);
    transform: translateY(var(--mobile-nav-visual-shift));
  }

  .mobile-bottom-nav::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: calc(var(--mobile-nav-bottom-offset) * -1);
    left: 0;
    height: var(--mobile-nav-bottom-offset);
    background: rgba(255, 255, 255, 0.96);
    pointer-events: none;
  }

  .mobile-nav-item {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    width: 100%;
    height: 100%;
    color: #8d92a4;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    outline: 0;
    background: transparent;
    border-radius: 16px;
    transition:
      background 0.18s ease,
      box-shadow 0.18s ease,
      color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-item[data-materials-cart-open] {
    position: relative;
  }

  .mobile-nav-count[hidden] {
    display: none;
  }

  .mobile-nav-count {
    position: absolute;
    top: 1px;
    left: calc(50% + 4px);
    z-index: 1;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    color: #fff;
    background: #46b5ca;
    box-shadow: 0 5px 12px rgba(70, 181, 202, 0.36);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
  }

  .mobile-nav-item:focus,
  .mobile-nav-item:focus-visible,
  .mobile-nav-item:active {
    outline: 0;
    background: transparent;
    box-shadow: none;
  }

  .mobile-nav-item svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.2;
  }

  .mobile-nav-item span:not(.mobile-nav-count) {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .subscription-item {
    gap: 2px;
    padding-top: 4px;
    padding-bottom: 6px;
  }

  .subscription-item span:not(.mobile-nav-count) {
    display: block;
    font-size: 12px;
    line-height: 1.05;
  }

  .subscription-item svg {
    width: 22px;
    height: 22px;
  }

  .mobile-nav-item.active {
    color: #fff;
    background: #29a8ad;
    box-shadow: none;
    transform: none;
  }

  .mobile-nav-item.active svg {
    stroke-width: 2.35;
  }

  .mobile-nav-item.active .mobile-nav-count {
    color: #29a8ad;
    background: #fff;
    box-shadow: 0 4px 10px rgba(31, 34, 53, 0.16);
  }

  .review-modal {
    align-items: end;
    padding: 10px;
  }

  .review-dialog {
    width: 100%;
    max-height: min(90vh, 900px);
    padding: 16px 14px 14px;
    border-radius: 22px 22px 16px 16px;
  }

  .review-close {
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
  }

  .review-head {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    margin-right: 30px;
  }

  .review-head img {
    width: 64px;
    height: 88px;
    border-radius: 10px;
  }

  .review-head-copy h2 {
    margin-bottom: 9px;
    font-size: 26px;
    line-height: 1.08;
  }

  .review-stars-picker {
    gap: 6px;
  }

  .review-star {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .review-star svg {
    width: 20px;
    height: 20px;
  }

  .review-form {
    gap: 10px;
    margin-top: 14px;
  }

  .review-subtitle {
    margin-top: 14px;
    font-size: 20px;
  }

  .review-field span {
    font-size: 14px;
  }

  .review-field textarea {
    min-height: 56px;
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 15px;
  }

  .review-submit {
    min-height: 44px;
    border-radius: 12px;
    font-size: 15px;
  }

  .review-status {
    font-size: 13px;
  }

  .auth-modal {
    align-items: end;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  }

  .auth-dialog {
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100svh - 24px);
    padding: 56px 24px 24px;
    border-radius: 26px 26px 18px 18px;
  }

  .document-consent-modal {
    align-items: end;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  }

  .document-consent-dialog {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100svh - 24px);
    padding: 24px 18px 22px;
    border-radius: 24px 24px 18px 18px;
  }

  .document-consent-dialog h2 {
    font-size: 22px;
  }

  .document-consent-check {
    padding: 12px;
    font-size: 13px;
  }

  .marketing-consent-banner {
    right: 10px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
    width: calc(100vw - 20px);
    gap: 8px;
    padding: 10px;
  }

  .marketing-consent-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .marketing-consent-actions button {
    min-width: 0;
    min-height: 32px;
    padding: 0 8px;
  }

  .subscription-prompt-modal {
    align-items: end;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  }

  .subscription-checkout-modal {
    align-items: end;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  }

  .subscription-prompt-dialog {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100svh - 24px);
    gap: 12px;
    padding: 22px 18px 20px;
    border-radius: 24px 24px 18px 18px;
  }

  .subscription-prompt-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }

  .subscription-prompt-icon svg {
    width: 28px;
    height: 28px;
  }

  .subscription-prompt-dialog h2 {
    font-size: 24px;
  }

  .subscription-prompt-dialog p {
    max-width: 100%;
    font-size: 13.5px;
    line-height: 1.32;
  }

  .subscription-prompt-dialog .subscription-prompt-note {
    font-size: 10.5px;
    line-height: 1.2;
  }

  .subscription-prompt-dialog li {
    min-height: 40px;
    padding: 9px 10px;
    font-size: 13px;
  }

  .subscription-prompt-action {
    min-height: 52px;
    border-radius: 15px;
    font-size: 14px;
  }

  .subscription-prompt-action small {
    font-size: 11px;
  }

  .subscription-prompt-dialog .subscription-prompt-terms {
    margin-top: 6px;
    font-size: 10.5px;
    line-height: 1.28;
  }

  .subscription-checkout-dialog {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100svh - 24px);
    gap: 14px;
    padding: 22px 18px 20px;
    border-radius: 24px 24px 18px 18px;
  }

  .subscription-checkout-back {
    max-width: calc(100% - 54px);
    font-size: 13px;
  }

  .subscription-checkout-dialog h2 {
    font-size: 22px;
  }

  .subscription-checkout-provider {
    min-height: 56px;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
  }

  .subscription-checkout-provider-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    padding: 2px;
  }

  .subscription-checkout-provider-copy strong {
    font-size: 14px;
  }

  .subscription-checkout-provider-copy span {
    font-size: 11px;
  }

  .subscription-checkout-provider svg {
    width: 20px;
    height: 20px;
  }

  .subscription-checkout-pay {
    min-height: 52px;
    border-radius: 15px;
    font-size: 16px;
  }

  .subscription-checkout-methods {
    gap: 6px;
  }

  .subscription-checkout-method {
    min-height: 62px;
    padding: 8px 4px;
    font-size: 11px;
  }

  .subscription-checkout-method svg {
    width: 18px;
    height: 18px;
  }

  .subscription-checkout-recurring {
    gap: 8px;
    padding: 10px 11px;
  }

  .subscription-checkout-recurring p,
  .subscription-checkout-consent {
    font-size: 10.5px;
    line-height: 1.28;
  }

  .subscription-checkout-consent input {
    width: 17px;
    height: 17px;
  }

  .subscription-checkout-terms {
    font-size: 10.5px;
    line-height: 1.28;
  }

  .auth-dialog h2 {
    max-width: calc(100% - 64px);
    margin: 0 auto 20px;
    font-size: clamp(17px, 4.7vw, 20px);
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
  }

  .auth-close {
    top: 18px;
    right: 20px;
    width: 40px;
    height: 40px;
  }

  .auth-close svg {
    width: 18px;
    height: 18px;
  }

  .vkid-container .VkIdSdk_oauth_link_text {
    max-width: 340px;
    margin-inline: auto;
    font-size: 16px;
    line-height: 1.22;
    font-weight: 740;
    text-align: center;
  }

  .vkid-container .VkIdSdk_oauth_list,
  .vkid-container [class*="oauth" i][class*="list" i] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
    width: 100% !important;
    max-width: min(330px, calc(100vw - 96px)) !important;
    margin-inline: auto !important;
    justify-content: center !important;
    justify-items: stretch !important;
  }

  .vkid-container.vkid-single-provider .VkIdSdk_oauth_list,
  .vkid-container.vkid-single-provider [class*="oauth" i][class*="list" i] {
    grid-template-columns: minmax(0, 1fr);
    max-width: 280px !important;
  }

  .vkid-container .VkIdSdk_oauth_item,
  .vkid-container [class*="oauth" i][class*="item" i] {
    width: 100% !important;
    height: 48px !important;
  }

  .vkid-container .VkIdSdk_oauth_item a,
  .vkid-container .VkIdSdk_oauth_item button,
  .vkid-container [class*="oauth" i][class*="item" i] a,
  .vkid-container [class*="oauth" i][class*="item" i] button,
  .vkid-container a[class*="oauth" i],
  .vkid-container button[class*="oauth" i] {
    height: 52px !important;
    border-radius: 10px !important;
  }

  .vkid-container .VkIdSdk_oauth_item svg,
  .vkid-container .VkIdSdk_oauth_item img,
  .vkid-container [class*="oauth" i][class*="item" i] svg,
  .vkid-container [class*="oauth" i][class*="item" i] img {
    width: 27px !important;
    height: 27px !important;
  }

  .vkid-container .VkIdSdk_oauth_button_text {
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  .local-auth-preview {
    width: 100%;
    gap: 12px;
    justify-items: center;
  }

  .local-auth-preview p {
    max-width: 300px;
    font-size: 13px;
    line-height: 1.2;
  }

  .local-auth-providers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 330px;
    justify-self: center;
    margin-inline: auto;
  }

  .local-auth-provider {
    height: 48px;
  }

  .local-auth-icon {
    width: 28px;
    height: 28px;
  }

  .phone-entry {
    min-height: 64px;
    padding: 0 14px;
    border-radius: 18px;
  }

  .phone-prefix {
    gap: 6px;
    margin-right: 12px;
  }

  .ru-flag {
    width: 26px;
    height: 26px;
  }

  .country-code,
  .phone-entry input {
    font-size: 20px;
  }

  .phone-submit {
    min-height: 58px;
    font-size: 18px;
  }

  .sms-notice {
    min-height: 74px;
    padding: 14px;
  }

  .code-entry {
    gap: 8px;
  }

  .code-digit {
    border-radius: 13px;
    font-size: 24px;
  }
}

@media (max-width: 620px) {
  body .mobile-bottom-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 2px;
    padding: 4px 12px calc(4px + env(safe-area-inset-bottom, 0px));
  }

  body .mobile-bottom-nav .mobile-nav-item {
    display: flex;
    width: 100%;
    max-width: 52px;
    height: 36px;
    min-width: 0;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    border-radius: 14px;
    text-align: center;
  }

  body .mobile-bottom-nav .mobile-nav-item.active {
    border-radius: 16px;
    transform: none;
  }

  body .mobile-bottom-nav .mobile-nav-item svg {
    width: 21px;
    height: 21px;
    stroke-width: 2.15;
  }

  body .mobile-bottom-nav .mobile-nav-count {
    top: 1px;
    left: calc(50% + 4px);
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    font-size: 8px;
  }

  body .mobile-bottom-nav .mobile-nav-item span:not(.mobile-nav-count) {
    display: none;
  }

  body .mobile-bottom-nav .subscription-item {
    gap: 0;
    padding: 0;
  }

  body .mobile-bottom-nav .subscription-item svg {
    width: 21px;
    height: 21px;
  }

  body #aiAgentView .ai-agent-shell .ai-agent-sidebar > .ai-agent-sidebar-head {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 7px;
    border-radius: 14px;
  }

  body #aiAgentView .ai-agent-sidebar-head > span {
    flex: 1 1 auto;
    min-width: 0;
    color: #1f2740;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
  }

  body #aiAgentView .ai-agent-sidebar-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
  }

  body #aiAgentView .ai-agent-sidebar-head .ai-agent-new-chat,
  body #aiAgentView .ai-agent-sidebar-head .ai-agent-sidebar-toggle {
    display: grid;
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
    padding: 0;
    place-items: center;
    border-radius: 6px;
  }

  body #aiAgentView .ai-agent-sidebar-head .ai-agent-new-chat svg,
  body #aiAgentView .ai-agent-sidebar-head .ai-agent-sidebar-toggle svg {
    width: 10px;
    height: 10px;
    stroke-width: 2.3;
  }

  body #aiAgentView .ai-agent-shell.is-sidebar-collapsed .ai-agent-sidebar {
    align-items: stretch;
  }

  body #aiAgentView .ai-agent-shell.is-sidebar-collapsed .ai-agent-sidebar-head {
    display: flex;
  }

  body #aiAgentView .ai-agent-shell.is-sidebar-collapsed .ai-agent-chat-list {
    display: none;
  }
}

/* AI worksheet agent */
.ai-agent-view {
  width: min(1380px, calc(100% - 48px));
}

.ai-agent-shell {
  grid-template-columns: 260px minmax(0, 1fr);
}

.ai-agent-chat-panel {
  min-height: min(720px, calc(100vh - 146px));
  overflow: hidden;
}

.ai-agent-chat-head {
  flex: 0 0 auto;
}

.ai-agent-workspace {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
  gap: 16px;
  padding-top: 16px;
}

.ai-agent-conversation {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.ai-agent-messages {
  flex: 1;
  min-height: 390px;
  max-height: calc(100vh - 350px);
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  overflow: auto;
  padding: 2px 6px 12px 0;
  scrollbar-width: thin;
}

.ai-agent-message {
  width: fit-content;
  max-width: min(680px, 100%);
}

.ai-agent-message-user {
  align-self: flex-end;
  grid-template-columns: minmax(0, 1fr) 44px;
}

.ai-agent-message-user .ai-agent-message-avatar {
  order: 2;
  color: #fff;
  background: #1f2a44;
}

.ai-agent-message-user p {
  color: #fff;
  background: #1f2a44;
}

.ai-agent-message-bot p {
  color: #59657a;
  background: #f4f8fc;
}

.ai-agent-request-builder {
  display: grid;
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid #dce8f4;
  border-radius: 16px;
  background: #f8fbfe;
}

.ai-agent-request-builder header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ai-agent-request-builder header strong {
  color: #1f2a44;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.1;
}

.ai-agent-request-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr 1.45fr 0.9fr 0.85fr auto;
  gap: 8px;
  align-items: end;
}

.ai-agent-request-grid label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.ai-agent-request-grid label > span {
  color: #7c879d;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.ai-agent-request-grid select,
.ai-agent-request-grid input {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid #d8e5f2;
  border-radius: 11px;
  outline: 0;
  color: #1f2a44;
  background: #fff;
  font-size: 13px;
  font-weight: 850;
}

.ai-agent-request-grid select {
  padding: 0 8px;
}

.ai-agent-request-grid input {
  padding: 0 10px;
}

.ai-agent-request-grid button {
  display: flex;
  min-width: 112px;
  height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: #35b9cf;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 10px 20px rgba(53, 174, 194, 0.2);
}

.ai-agent-request-grid button svg {
  width: 17px;
  height: 17px;
}

.ai-agent-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.ai-agent-suggestions button {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #dce8f4;
  border-radius: 12px;
  color: #2d6b82;
  background: #f5fbfd;
  font-size: 12px;
  font-weight: 900;
}

.ai-agent-preview-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  padding-left: 16px;
  border-left: 1px solid #edf3f8;
}

.ai-agent-preview-frame {
  display: grid;
  flex: 1;
  min-height: 0;
  place-items: center;
  padding: 14px;
  border: 1px solid #e0e8f2;
  border-radius: 18px;
  background:
    linear-gradient(45deg, rgba(148, 163, 184, 0.12) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, 0.12) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.12) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.12) 75%),
    #f4f7fb;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}

.ai-agent-preview-frame canvas {
  display: block;
  width: min(100%, 360px);
  height: auto;
  aspect-ratio: 210 / 297;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 42px rgba(35, 47, 72, 0.18);
}

.ai-agent-export-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ai-agent-export-actions button {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #35b9cf;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(53, 174, 194, 0.2);
}

.ai-agent-export-actions button:first-child {
  color: #1f2a44;
  background: #ffcf5c;
  box-shadow: 0 10px 24px rgba(255, 191, 46, 0.2);
}

.ai-agent-export-actions button svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .ai-agent-view {
    width: min(100% - 20px, 640px);
  }

  .ai-agent-shell,
  body #aiAgentView .ai-agent-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }

  .ai-agent-sidebar {
    min-width: 0;
  }

  body #aiAgentView .ai-agent-shell.is-sidebar-collapsed .ai-agent-sidebar {
    align-items: stretch;
  }

  .ai-agent-chat-list,
  body #aiAgentView .ai-agent-chat-list {
    display: flex;
    min-height: 0;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
  }

  .ai-agent-chat,
  body #aiAgentView .ai-agent-chat {
    min-width: 150px;
    min-height: 54px;
    grid-template-columns: 32px minmax(0, 1fr);
    justify-items: start;
    padding: 8px;
    text-align: left;
  }

  .ai-agent-chat-icon,
  body #aiAgentView .ai-agent-chat-icon {
    width: 32px;
    height: 32px;
  }

  .ai-agent-chat-panel {
    min-height: auto;
  }

  .ai-agent-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-agent-messages {
    min-height: 260px;
    max-height: none;
  }

  .ai-agent-request-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-agent-request-grid button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .ai-agent-preview-panel {
    padding-top: 14px;
    padding-left: 0;
    border-top: 1px solid #edf3f8;
    border-left: 0;
  }

  .ai-agent-preview-frame {
    min-height: 410px;
  }

  .ai-agent-preview-frame canvas {
    width: min(100%, 320px);
  }
}

@media (max-width: 520px) {
  .ai-agent-chat-head h1 {
    font-size: 18px;
  }

  .ai-agent-chat-head p {
    font-size: 10px;
  }

  .ai-agent-status {
    padding: 6px 8px;
    font-size: 9px;
  }

  .ai-agent-suggestions {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .ai-agent-suggestions button {
    flex: 0 0 auto;
    max-width: 180px;
    white-space: normal;
  }

  .ai-agent-request-builder {
    padding: 10px;
  }

  .ai-agent-request-grid {
    gap: 7px;
  }

  .ai-agent-request-grid select,
  .ai-agent-request-grid input,
  .ai-agent-request-grid button {
    height: 36px;
    font-size: 12px;
  }

  .ai-agent-export-actions button {
    min-height: 40px;
    gap: 4px;
    font-size: 11px;
  }

  .ai-agent-export-actions button svg {
    width: 16px;
    height: 16px;
  }
}