/* Data2Learn unified stylesheet
   Pages: index.html, auth.html, dashboard.html, contact.html, faq.html, change-password.html, edit-profile.html, bookmarks.html, finance.html, cart.html, cart-guest.html, tickets.html, ticket-detail.html, data.html, courses.html, articles.html
*/

    @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

    :root {
      --primary-1: #E4002B;
      --primary-2: #FF6961;
      --primary-3: #E4002B;
      --success1: #0FA862;
      --success2: #0FA862;
      --warning1: #FF9900;
      --error: #FF6961;
      --info: #3D85B7;
      --info2: #3D85B7;
      --white: #FFFFFF;
      --container: 1288px;
      --speed: .22s;
      --radius: 24px;
      --radius-sm: 16px;
      --radius-xs: 10px;
      --nav-offset: 0px;
    }

    [data-theme="dark"] {
      --text: #E8E2D8;
      --text-hover: #FF6961;
      --background-1: #202425;
      --background-2: #1D1F20;
      --card: #292C2D;
      --black-1: #000000;
      --black-3: #AFAFB6;
      --black-5: #4B4B55;
      --grey-1: #EEEEEE;
      --grey-3: #AFAFB6;
      --grey-5: #7A7878;
      --grey-6: #292C2D;
      --grey-7: #383737;
      --elevation: rgba(28, 25, 25, 0.24);
      --border-primary: #4B4B55;
      --border-secondary: #7A7878;
      --header--header-background: #1D1F20;
      --header--mobile-title-background: #292C2D;
      --header--zoomit-typography: #FFFFFF;
      --header--zoomit-logo: #FFFFFF;
      --header--menu-link: #E8E2D8;
      --header--search-icon-background: #FFFFFF;
      --header--search-icon: #AFAFB6;
      --button--contained--default-background: #383737;
      --button--contained--default-border: #383737;
      --button--contained--primary-text: #E8E2D8;
      --button--contained--primary-background: #E4002B;
      --button--contained--primary-border: #E4002B;
      --button--outline--primary-border: #E4002B;
      --muted: #AFAFB6;
      --muted-2: #7A7878;
      --soft: #242829;
      --input: #292C2D;
      --page-shadow: 0 16px 46px rgba(0,0,0,.25);
      --header-shadow: 0 19px 40px rgba(0,0,0,.19);
      --nav-shadow: 0 16px 42px rgba(0,0,0,.21);
      --card-shadow: 0 12px 34px rgba(0,0,0,.18);
      --body-grad-1: rgba(228,0,43,.045);
      --body-grad-2: rgba(61,133,183,.055);
    }

    [data-theme="light"] {
      --text: #202425;
      --text-hover: #E4002B;
      --background-1: #F4F6F8;
      --background-2: #FFFFFF;
      --card: #FFFFFF;
      --black-1: #000000;
      --black-3: #64748B;
      --black-5: #D8E0EA;
      --grey-1: #F1F5F9;
      --grey-3: #8A96A8;
      --grey-5: #64748B;
      --grey-6: #EEF2F7;
      --grey-7: #E2E8F0;
      --elevation: rgba(24, 40, 73, 0.08);
      --border-primary: #E2E8F0;
      --border-secondary: #CBD5E1;
      --header--header-background: #FFFFFF;
      --header--mobile-title-background: #FFFFFF;
      --header--zoomit-typography: #111827;
      --header--zoomit-logo: #111827;
      --header--menu-link: #263449;
      --header--search-icon-background: #F8FAFC;
      --header--search-icon: #94A3B8;
      --button--contained--default-background: #EEF2F7;
      --button--contained--default-border: #E2E8F0;
      --button--contained--primary-text: #FFFFFF;
      --button--contained--primary-background: #E4002B;
      --button--contained--primary-border: #E4002B;
      --button--outline--primary-border: #E4002B;
      --muted: #64748B;
      --muted-2: #94A3B8;
      --soft: #F8FAFC;
      --input: #F1F5F9;
      --page-shadow: 0 18px 50px rgba(15,23,42,.08);
      --header-shadow: 0 19px 40px rgba(30,41,59,.08);
      --nav-shadow: 0 17px 42px rgba(30,41,59,.08);
      --card-shadow: 0 12px 32px rgba(30,41,59,.08);
      --body-grad-1: rgba(228,0,43,.035);
      --body-grad-2: rgba(61,133,183,.045);
    }


[data-theme="dark"] {
  --c-primary1: 228 0 43;
  --c-info: 61 133 183;
}
[data-theme="light"] {
  --c-primary1: 228 0 43;
  --c-info: 61 133 183;
}


/* Main page */
* { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "Vazirmatn", "Yekan Bakh", "IRANSansX", Tahoma, Arial, sans-serif;
      background: var(--background-1);
      color: var(--text);
      line-height: 1.9;
      overflow-x: hidden;
      transition: background var(--speed), color var(--speed);
    }
    body::before {
      content:"";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -2;
      background:
        radial-gradient(720px 360px at 15% 0%, var(--body-grad-1), transparent 68%),
        radial-gradient(680px 420px at 90% 10%, var(--body-grad-2), transparent 62%);
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input { font-family: inherit; }
    .container {
      width: 100%;
      max-width: var(--container);
      margin-left: auto;
      margin-right: auto;
      padding-left: 15px;
      padding-right: 15px;
    }


/* Generic icon helpers */
[data-hugeicon] { display:inline-grid; place-items:center; line-height:0; flex:0 0 auto; }
.hugeicon { display:block; width:1em; height:1em; }
.circle-btn [data-hugeicon], .btn [data-hugeicon], .login-btn [data-hugeicon] { font-size:22px; }

    .promo { padding-top: 16px; }
    .promo__bar {
      min-height: 72px;
      border-radius: 18px;
      background: linear-gradient(135deg, color-mix(in srgb, var(--info), #000 6%), color-mix(in srgb, var(--info), #fff 8%));
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 13px 28px;
      box-shadow: var(--page-shadow);
      position: relative;
      overflow: hidden;
    }
    .promo__bar::after { content:""; position:absolute; inset:auto -50px -100px auto; width:280px; height:190px; background: rgba(255,255,255,.12); transform: rotate(-18deg); border-radius: 70px; }
    .promo__right, .promo__left { display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
    .promo__icon { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:rgba(255,255,255,.16); flex:0 0 auto; }
    .promo__text { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .promo__text p { margin:0; font-size:15px; font-weight:800; }
    .promo__link { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:10px; font-size:13px; font-weight:900; background:#fff; color:#213044; transition:.2s; }
    .promo__link:hover { transform: translateY(-2px); }
    .countdown { direction:ltr; display:grid; grid-template-columns:repeat(4,54px); gap:8px; }
    .countdown div { height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:12px; line-height:1.1; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.14); }
    .countdown strong { font-size:18px; font-weight:900; }
    .countdown span { font-size:10px; opacity:.88; }

    .header { padding: 16px 0 0; position: relative; z-index: 240; }
    .header__box {
      min-height: 104px;
      background: var(--header--header-background);
      border: 1px solid color-mix(in srgb, var(--border-primary), transparent 25%);
      border-radius: 26px;
      box-shadow: var(--header-shadow);
      padding: 25px 42px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 26px;
      transition: background var(--speed), border var(--speed), box-shadow var(--speed);
    }
    .logo { display:flex; align-items:center; min-width: 220px; }
    .logo__img { width:auto; object-fit:contain; display:block; }
    .logo__img--desktop { height:48px; }
    .logo__img--mobile { display:none; height:40px; }
    [data-theme="light"] .logo__img { filter: drop-shadow(0 2px 3px rgba(0,0,0,.07)); }
    .search { flex:1; max-width:570px; position:relative; }
    .search input {
      width:100%; height:54px; border:1px solid transparent; outline:0; border-radius:15px;
      background: var(--input); color:var(--text); padding:0 52px 0 20px; font-size:13px; font-weight:600; transition:.2s;
    }
    .search input:focus { border-color: color-mix(in srgb, var(--primary-1), transparent 58%); box-shadow:0 0 0 4px rgba(228,0,43,.055); }
    .search .icon { position:absolute; right:19px; top:50%; transform:translateY(-50%); color:var(--header--search-icon); font-size:22px; pointer-events:none; }

/* --------------------------------------------------------------------------
   Header live search dropdown
   -------------------------------------------------------------------------- */
.search[data-site-search] {
  z-index: 260;
}

.search[data-site-search] input {
  position: relative;
  z-index: 2;
}

.site-search-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline: 0;
  width: 100%;
  padding: 12px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--card), var(--background-1) 6%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 36%);
  box-shadow: 0 28px 70px rgba(3, 12, 31, .22), inset 0 1px 0 color-mix(in srgb, #fff, transparent 94%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transform-origin: top center;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
}

.site-search-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.site-search-dropdown[hidden] {
  display: block;
}

.site-search-dropdown__head,
.site-search-dropdown__actions {
  position: relative;
  z-index: 1;
}

.site-search-dropdown__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}

.site-search-dropdown__head strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.site-search-dropdown__head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.site-search-dropdown__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  max-height: min(420px, 56vh);
  overflow-y: auto;
  padding: 12px 2px 2px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary-1), transparent 58%) transparent;
}

.site-search-result {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 9px;
  border-radius: 18px;
  color: var(--text);
  text-decoration: none;
  background: color-mix(in srgb, var(--input), transparent 26%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.site-search-result:hover,
.site-search-result:focus,
.site-search-result.is-active {
  outline: 0;
  transform: translateY(-1px);
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 92%);
  border-color: color-mix(in srgb, var(--primary-1), transparent 55%);
}

.site-search-result__media {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  background: linear-gradient(135deg, var(--primary-1), var(--info));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary-1), transparent 80%);
}

.site-search-result__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-search-result__body {
  min-width: 0;
}

.site-search-result__body strong {
  display: block;
  color: inherit;
  font-size: 13px;
  font-weight: 920;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-search-result__body span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-search-result__price {
  justify-self: end;
  max-width: 118px;
  color: var(--primary-1);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-search-state {
  display: grid;
  place-items: center;
  min-height: 86px;
  padding: 14px;
  border-radius: 18px;
  color: var(--muted);
  background: color-mix(in srgb, var(--input), transparent 32%);
  border: 1px dashed color-mix(in srgb, var(--border-primary), transparent 58%);
  font-size: 12px;
  font-weight: 820;
  text-align: center;
}

.site-search-state.is-loading::before {
  content: '';
  width: 22px;
  height: 22px;
  margin-bottom: 10px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--primary-1), transparent 82%);
  border-top-color: var(--primary-1);
  animation: d2lSearchSpin .7s linear infinite;
}

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

.site-search-dropdown__actions {
  display: flex;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}

.site-search-dropdown__actions[hidden] {
  display: none;
}

.site-search-submit {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-1), var(--primary-2));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary-1), transparent 76%);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  transition: transform .18s ease, filter .18s ease;
}

.site-search-submit:hover,
.site-search-submit:focus {
  outline: 0;
  transform: translateY(-1px);
  filter: saturate(1.08);
}

@media (max-width: 850px) {
  .site-search-dropdown {
    border-radius: 22px;
  }
  .site-search-result {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .site-search-result__price {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
  }
  .site-search-result__media {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }
}

    .actions { display:flex; align-items:center; gap:12px; position:relative; z-index:245; }
    .circle-btn, .login-btn { border:0; cursor:pointer; transition:.2s; }
    .circle-btn {
      width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
      background: var(--button--contained--default-background); color:var(--text);
      border:1px solid color-mix(in srgb, var(--button--contained--default-border), transparent 15%);
    }
    .circle-btn:hover { transform:translateY(-2px); color:var(--text-hover); border-color:color-mix(in srgb, var(--primary-1), transparent 45%); }

/* --------------------------------------------------------------------------
   Header cart dropdown
   -------------------------------------------------------------------------- */
.cart-menu {
  position: relative;
  flex: 0 0 auto;
  z-index: 220;
}

.cart-menu__toggle {
  position: relative;
  text-decoration: none;
}

.cart-menu__badge {
  position: absolute;
  top: -5px;
  inset-inline-end: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: var(--primary-1);
  border: 2px solid var(--header--header-background);
  box-shadow: 0 8px 18px rgba(228, 0, 43, .22);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  direction: ltr;
}

.cart-menu__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  width: min(405px, calc(100vw - 28px));
  padding: 12px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--card), var(--background-1) 6%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 36%);
  box-shadow: 0 28px 70px rgba(3, 12, 31, .22), inset 0 1px 0 color-mix(in srgb, #fff, transparent 94%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
}


.cart-menu.is-open .cart-menu__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.cart-menu__dropdown[hidden] {
  display: block;
}

.cart-menu__dropdown::before {
  display: none;
}

.cart-menu__head,
.cart-menu__summary,
.cart-menu__actions {
  position: relative;
  z-index: 1;
}

.cart-menu__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}

.cart-menu__head strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.cart-menu__head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}


.cart-menu__items {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  max-height: 286px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 6px 12px 2px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted), transparent 36%) color-mix(in srgb, var(--background-2), transparent 58%);
}

.cart-menu__items::-webkit-scrollbar {
  width: 7px;
}

.cart-menu__items::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--background-2), transparent 58%);
  border-radius: 999px;
}

.cart-menu__items::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted), transparent 36%);
  border: 2px solid color-mix(in srgb, var(--background-2), transparent 58%);
  border-radius: 999px;
}

.cart-menu__items::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text), transparent 42%);
}

.cart-mini-item {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--background-1), transparent 4%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
  transition: .18s ease;
}

.cart-mini-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--info), transparent 58%);
}

.cart-mini-item__icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--info);
  background: linear-gradient(145deg, color-mix(in srgb, var(--info), transparent 82%), color-mix(in srgb, var(--primary-1), transparent 90%));
  border: 1px solid color-mix(in srgb, var(--info), transparent 58%);
  font-size: 12px;
  font-weight: 950;
  direction: ltr;
}

.cart-mini-item__body {
  min-width: 0;
}

.cart-mini-item__body strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
  line-height: 1.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-mini-item__body span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.6;
}

.cart-mini-item__body b {
  display: block;
  margin-top: 5px;
  color: color-mix(in srgb, var(--info), var(--text) 24%);
  font-size: 12px;
  font-weight: 950;
}

.cart-mini-item__remove {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--background-2), transparent 8%);
  cursor: pointer;
  transition: .18s ease;
}

.cart-mini-item__remove:hover {
  color: #fff;
  background: var(--primary-1);
}

.cart-menu__empty {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 22px 16px;
  text-align: center;
  color: var(--muted);
}

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

.cart-menu__empty [data-hugeicon] {
  color: var(--info);
}

.cart-menu__empty strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.cart-menu__empty p {
  max-width: 260px;
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
}

.cart-menu__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 0 12px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}

.cart-menu__summary.is-total-only {
  grid-template-columns: 1fr;
}

.cart-menu__summary [hidden] {
  display: none !important;
}

.cart-menu__summary div {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 76%);
}

.cart-menu__summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.cart-menu__summary strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.cart-menu__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.cart-menu__view {
  min-height: 44px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 950;
  transition: .18s ease;
}

.cart-menu__view {
  color: var(--button--contained--primary-text);
  background: var(--button--contained--primary-background);
  box-shadow: 0 12px 24px rgba(228, 0, 43, .16);
}


.cart-menu__view:hover {
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .cart-menu { position: static; }
  .cart-menu__dropdown {
    position: fixed;
    top: var(--cart-dropdown-top, 86px);
    left: var(--cart-dropdown-left, 12px);
    right: auto;
    width: var(--cart-dropdown-width, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - var(--cart-dropdown-top, 86px) - 12px);
    transform-origin: top center;
    border-radius: 22px;
    padding: 12px;
    z-index: 10050;
  }
  .cart-menu__items { max-height: min(42vh, 280px); }
  .cart-menu__actions { grid-template-columns: 1fr; }
}

    .login-btn {
      height:48px; min-width:112px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:8px;
      color:var(--button--contained--primary-text); background:var(--button--contained--primary-background); font-weight:900; padding:0 18px;
      box-shadow:0 10px 22px rgba(228,0,43,.18);
    }
    .login-btn:hover { transform:translateY(-2px); background:var(--primary-2); }
/* --------------------------------------------------------------------------
   Header user account dropdown
   -------------------------------------------------------------------------- */
.header-user-menu {
  position: relative;
  flex: 0 0 auto;
  z-index: 225;
}

.header-user-menu__toggle {
  position: relative;
  text-decoration: none;
  padding: 0;
}

.header-user-menu__toggle [data-hugeicon] {
  color: currentColor;
}

.header-user-menu__toggle:hover,
.header-user-menu.is-open .header-user-menu__toggle {
  transform: translateY(-2px);
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-1), transparent 45%);
}

.header-user-menu__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  width: min(405px, calc(100vw - 28px));
  padding: 12px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--card), var(--background-1) 6%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 36%);
  box-shadow: 0 28px 70px rgba(3, 12, 31, .22), inset 0 1px 0 color-mix(in srgb, #fff, transparent 94%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events: none;
  overflow: hidden;
  z-index: 10060;
}

.header-user-menu.is-open .header-user-menu__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.header-user-menu__dropdown[hidden] {
  display: block;
}

.header-user-menu__head,
.header-user-menu__links,
.header-user-menu__actions {
  position: relative;
  z-index: 1;
}

.header-user-menu__head {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--background-1), transparent 4%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
}

.header-user-menu__head-icon,
.header-user-menu__link-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.header-user-menu__head-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  color: var(--info);
  background: linear-gradient(145deg, color-mix(in srgb, var(--info), transparent 82%), color-mix(in srgb, var(--primary-1), transparent 90%));
  border: 1px solid color-mix(in srgb, var(--info), transparent 58%);
}

.header-user-menu__head strong {
  display: block;
  max-width: 295px;
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-user-menu__head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.6;
}

.header-user-menu__links {
  display: grid;
  gap: 10px;
  max-height: 330px;
  overflow: auto;
  padding: 2px 2px 12px;
  scrollbar-width: thin;
}

.header-user-menu__links a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 17px;
  color: var(--text);
  text-decoration: none;
  background: color-mix(in srgb, var(--background-1), transparent 4%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.header-user-menu__links a:hover {
  transform: translateY(-2px);
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--info), transparent 58%);
}

.header-user-menu__link-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  color: var(--info);
  background: linear-gradient(145deg, color-mix(in srgb, var(--info), transparent 86%), color-mix(in srgb, var(--primary-1), transparent 93%));
  border: 1px solid color-mix(in srgb, var(--info), transparent 68%);
}

.header-user-menu__link-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.header-user-menu__link-text strong {
  display: block;
  color: inherit;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-user-menu__link-text small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-user-menu__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}

.header-user-menu__logout {
  min-height: 44px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: var(--primary-1);
  box-shadow: 0 12px 24px rgba(228, 0, 43, .16);
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}

.header-user-menu__logout:hover {
  transform: translateY(-2px);
  background: var(--primary-2);
}

@media (max-width: 760px) {
  .header-user-menu { position: static; }
  .header-user-menu__dropdown {
    position: fixed;
    top: var(--user-menu-top, 86px);
    left: var(--user-menu-left, 12px);
    right: auto;
    width: var(--user-menu-width, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - var(--user-menu-top, 86px) - 12px);
    overflow: auto;
    transform-origin: top center;
    border-radius: 22px;
    z-index: 10070;
  }
  .header-user-menu__links { max-height: min(48vh, 360px); }
}


    .menu-toggle { display:none; }

    .nav-sticky {
      position: sticky;
      top: var(--nav-offset);
      z-index: 60;
      padding-top: 0;
      pointer-events:none;
    }
    .nav-sticky .container { pointer-events:none; }
    .nav {
      pointer-events:auto;
      margin-inline: 36px;
      min-height: 74px;
      display:flex;
      align-items:center;
      background: color-mix(in srgb, var(--header--header-background), transparent 2%);
      border: 1px solid color-mix(in srgb, var(--border-primary), transparent 34%);
      border-top: 0;
      border-radius: 0 0 28px 28px;
      box-shadow: var(--nav-shadow);
      padding: 14px 22px;
      backdrop-filter: blur(16px);
      transition: border-radius .2s, box-shadow .2s, margin .2s, background .2s, transform .2s;
    }
    .nav-sticky.is-stuck .nav {
      border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 42%);
      border-radius: 0 0 24px 24px;
      box-shadow: 0 18px 42px rgba(0,0,0,.18);
    }
    .nav ul { list-style:none; padding:0; margin:0; display:flex; align-items:center; gap:3px; width:100%; }
    .nav li { position:relative; }
    .nav a, .nav button {
      border:0; background:transparent; color:var(--header--menu-link); padding:11px 13px; border-radius:12px;
      display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; font-weight:800; line-height:1.4; transition:.2s; white-space:nowrap;
    }
    .nav a:hover, .nav button:hover { background: color-mix(in srgb, var(--grey-7), transparent 28%); color: var(--text-hover); }
    .nav a.active, .nav button.active { color:var(--text-hover); background:transparent; position:relative; }
    .nav a.active::after, .nav button.active::after { content:""; position:absolute; right:13px; left:13px; bottom:3px; height:3px; border-radius:999px; background:var(--primary-1); }
    .mega {
      position:absolute; top:calc(100% + 14px); right:0; width:min(700px, calc(100vw - 64px)); max-width:calc(var(--container) - 120px); border-radius:22px; padding:18px;
      background:var(--card); border:1px solid color-mix(in srgb, var(--border-primary), transparent 34%); box-shadow:var(--card-shadow);
      opacity:0; visibility:hidden; transform:translateY(12px); transition:.2s; z-index:30; overflow:hidden;
    }
    .nav li:hover .mega { opacity:1; visibility:visible; transform:translateY(0); }
    .mega__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; min-width:0; }
    .mega__item { display:flex; align-items:flex-start; gap:12px; padding:12px; border-radius:16px; transition:.2s; min-width:0; white-space:normal; }
    .mega__item:hover { background: color-mix(in srgb, var(--grey-7), transparent 34%); }
    .mega__icon { width:42px; height:42px; flex:0 0 auto; border-radius:14px; display:grid; place-items:center; color:var(--text-hover); background:color-mix(in srgb, var(--primary-1), transparent 90%); font-weight:900; }
    .mega__item > div { min-width:0; }
    .mega__item strong { display:block; font-size:15px; margin-bottom:2px; white-space:normal; }
    .mega__item span { display:block; color:var(--muted); font-size:12px; line-height:1.8; white-space:normal; overflow-wrap:anywhere; }

    .mega--end { right:auto; left:0; }
    .mega__grid--compact .mega__item { padding:11px; }
    .mega__grid--compact .mega__icon { width:40px; height:40px; font-size:12px; }
    .mega__grid--compact .mega__item strong { font-size:14px; }
    .mega__grid--compact .mega__item span { font-size:12px; line-height:1.75; }

    .hero {
      padding: 34px 0 0px;
      position: relative;
    }
    .hero__grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:64px; align-items:center; }
    .eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; color:var(--info); font-size:14px; font-weight:900; }
    .eyebrow::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--primary-1); box-shadow:0 0 0 7px rgba(228,0,43,.08); }
    .hero h1 {
      margin: 0;
      max-width: 650px;
      /* font-size: clamp(35px, 2vw, 64px); */
      line-height: 1.42;
      font-weight: 900;
      letter-spacing: -.7px;
    }
    .hero h1 span { color:var(--text-hover); position:relative; display:inline-block; }
    .hero h1 span::after { content:""; position:absolute; right:0; left:0; bottom:12px; height:9px; border-radius:999px; background:rgba(228,0,43,.10); z-index:-1; }
    .hero p { margin:20px 0 30px; max-width:590px; color:var(--muted); font-size:19px; line-height:2.05; }
    .hero__actions { display:flex; flex-wrap:wrap; gap:14px; }
    .btn { height:52px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 21px; border-radius:14px; border:0; cursor:pointer; font-size:14px; font-weight:900; transition:.2s; white-space:nowrap; }
    .btn--primary { background:var(--primary-1); color:#fff; box-shadow:0 12px 24px rgba(228,0,43,.18); }
    .btn--primary:hover { background:var(--primary-2); transform:translateY(-2px); }
    .btn--outline { background:transparent; color:var(--text); border:1px solid var(--border-primary); }
    .btn--outline:hover { color:var(--text-hover); border-color:color-mix(in srgb, var(--primary-1), transparent 40%); transform:translateY(-2px); }
    .hero__features { margin-top:32px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px 24px; max-width:620px; }
    .feature { display:flex; align-items:center; gap:12px; color:color-mix(in srgb, var(--text), var(--muted) 12%); font-weight:800; font-size:16px; }
    .feature i { width:40px; height:40px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb, var(--info), transparent 86%); color:var(--info); font-style:normal; flex:0 0 auto; }

    .hero-art { min-height:520px; position:relative; }
    .art-board {
      position:absolute; top:20px; left:18px; right:34px; bottom:28px; border-radius:56px 106px 70px 96px;
      background: linear-gradient(145deg, color-mix(in srgb, var(--card), #fff 5%), color-mix(in srgb, var(--background-2), #000 6%));
      border:1px solid color-mix(in srgb, var(--border-primary), transparent 40%); box-shadow:var(--page-shadow); overflow:hidden;
    }
    .art-board::before { content:""; position:absolute; inset:36px 42px auto auto; width:84px; height:84px; border-radius:28px; background:rgba(228,0,43,.08); transform:rotate(12deg); }
    .art-board::after { content:""; position:absolute; left:30px; bottom:26px; width:172px; height:172px; border-radius:50%; background:color-mix(in srgb, var(--info), transparent 88%); }
    .rocket-card { position:absolute; border-radius:22px; background:var(--card); border:1px solid color-mix(in srgb, var(--border-primary), transparent 38%); box-shadow:var(--card-shadow); padding:18px; }
    .rocket-card--main { right:72px; top:80px; width:330px; }
    .rocket-card--mini { left:52px; bottom:76px; width:230px; }
    .rocket-card__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
    .rocket-card__badge { height:28px; padding:0 10px; border-radius:999px; background:color-mix(in srgb, var(--success1), transparent 88%); color:var(--success1); display:flex; align-items:center; font-size:12px; font-weight:900; }
    .chart { height:168px; display:flex; align-items:flex-end; gap:10px; padding-top:20px; }
    .chart span { flex:1; border-radius:10px 10px 4px 4px; background:linear-gradient(180deg, color-mix(in srgb, var(--info), #fff 8%), color-mix(in srgb, var(--info), #000 8%)); min-height:42px; }
    .chart span:nth-child(2) { height:70%; } .chart span:nth-child(3) { height:45%; } .chart span:nth-child(4) { height:88%; } .chart span:nth-child(5) { height:60%; } .chart span:nth-child(6) { height:78%; }
    .mini-row { display:flex; align-items:center; gap:12px; margin-top:12px; }
    .avatar { width:42px; height:42px; border-radius:15px; display:grid; place-items:center; background:color-mix(in srgb, var(--primary-1), transparent 88%); color:var(--text-hover); font-weight:900; }
    .line { height:9px; border-radius:999px; background:var(--grey-7); margin:6px 0; }
    .line.small { width:55%; }

    .section { padding: 52px 0; }
    .section__head { display:flex; align-items:center !important; justify-content:space-between; gap:18px; margin-bottom:76px; }
    .section__head.is-tight { margin-bottom:34px; }
    .section__title { display:flex; align-items:center; gap:14px; }
    .section__title .bubbles { width:38px; height:36px; position:relative; flex:0 0 auto; }
    .bubbles i { position:absolute; border-radius:50%; background:var(--text); opacity:.95; }
    .bubbles i:nth-child(1){ width:20px; height:20px; right:0; bottom:1px; }
    .bubbles i:nth-child(2){ width:15px; height:15px; left:0; top:5px; opacity:.45; }
    .bubbles i:nth-child(3){ width:9px; height:9px; right:12px; top:0; opacity:.65; }
    .section__title h2 { margin:0; font-size:clamp(24px,2.5vw,30px); line-height:1.55; font-weight:900; }
    .section__title p { margin:3px 0 0; color:var(--muted); font-size:13px; line-height:1.9; }
    .section__more { display:flex; align-items:center; gap:8px; color:var(--text-hover); font-weight:900; font-size:14px; white-space:nowrap; transition:.2s; }
    .section__more:hover { color:var(--primary-1); }

    .courses { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; }
    .course-card {
      background:var(--card); border-radius:18px; min-height:424px; padding-top:126px; position:relative; display:flex; flex-direction:column; justify-content:space-between;
      border:1px solid color-mix(in srgb, var(--border-primary), transparent 45%); box-shadow:var(--card-shadow); transition:.23s; overflow:visible;
    }
    .course-card:hover { transform:translateY(-6px); }
    .course-card__cover { position:absolute; top:-48px; right:16px; left:16px; height:158px; overflow:hidden; border-radius:16px; background:linear-gradient(135deg, var(--primary-1), #571923); box-shadow:0 18px 35px rgba(0,0,0,.18); }
    .cover-art { height:100%; position:relative; overflow:hidden; }
    .cover-art::before { content:""; position:absolute; width:160px; height:160px; border-radius:50%; left:-45px; bottom:-55px; background:rgba(255,255,255,.14); }
    .cover-art::after { content:""; position:absolute; width:110px; height:110px; border-radius:34px; right:-18px; top:-20px; background:rgba(0,0,0,.12); transform:rotate(16deg); }
    .cover-art b { position:absolute; right:18px; bottom:16px; color:#fff; font-size:24px; direction:ltr; z-index:1; }
    .cover-art span { position:absolute; top:18px; right:18px; color:#fff; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:4px 9px; font-size:11px; font-weight:800; z-index:1; }
    .course-card__body { padding:0 18px 14px; display:flex; flex-direction:column; flex:1; }
    .status { display:flex; align-items:center; gap:7px; color:var(--text-hover); font-size:12px; font-weight:900; margin-bottom:7px; }
    .status::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--primary-1); }
    .course-card h3 { margin:0 0 8px; font-size:19px; line-height:1.7; font-weight:900; transition:.2s; }
    .course-card:hover h3 { color:var(--text-hover); }
    .course-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.85; min-height:74px; }
    .card-meta { display:flex; align-items:center; justify-content:space-between; margin-top:18px; gap:8px; }
    .chips { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
    .chip { height:26px; display:inline-flex; align-items:center; gap:5px; background:var(--soft); border-radius:8px; padding:0 8px; color:var(--muted); font-size:11px; font-weight:700; }
    .price { color:var(--text-hover); font-size:17px; font-weight:900; white-space:nowrap; }
    .card-link { height:54px; border-top:1px solid color-mix(in srgb, var(--border-primary), transparent 55%); display:flex; align-items:center; justify-content:center; gap:8px; color:var(--text-hover); font-weight:900; transition:.2s; }
    .card-link:hover { color:var(--primary-1); }

    .dataset-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
    .dataset-card {
      position:relative; background:var(--card); border:1px solid color-mix(in srgb, var(--border-primary), transparent 40%); border-radius:22px; padding:14px; min-height:360px;
      box-shadow:var(--card-shadow); transition:.22s; overflow:hidden;
    }
    .dataset-card:hover { transform:translateY(-6px); }
    .dataset-cover { height:155px; border-radius:18px; overflow:hidden; position:relative; background:linear-gradient(135deg, color-mix(in srgb, var(--info), #000 8%), color-mix(in srgb, var(--grey-7), #fff 2%)); }
    .dataset-cover::before { content:attr(data-label); position:absolute; right:18px; bottom:13px; color:#fff; font-size:32px; font-weight:900; letter-spacing:-1px; opacity:.96; direction:ltr; }
    .dataset-cover::after { content:""; position:absolute; left:-42px; top:-48px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.12); }
    .dataset-body { padding:17px 5px 4px; }
    .dataset-body h3 { margin:0 0 10px; font-size:18px; line-height:1.75; font-weight:900; }
    .dataset-body p { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.9; min-height:50px; }
    .dataset-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:12px; font-weight:800; }
    .dataset-price { margin-top:15px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .dataset-price strong { font-size:16px; color:var(--text); }
    .small-btn { height:38px; padding:0 13px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-primary); color:var(--text); font-size:12px; font-weight:900; transition:.2s; }
    .small-btn:hover { color:var(--text-hover); border-color:color-mix(in srgb, var(--primary-1), transparent 48%); }

    .routes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
    .route { background:var(--card); border:1px solid color-mix(in srgb, var(--border-primary), transparent 40%); border-radius:24px; padding:24px; box-shadow:var(--card-shadow); display:flex; gap:17px; align-items:flex-start; transition:.22s; }
    .route:hover { transform:translateY(-5px); }
    .route__icon { width:58px; height:58px; border-radius:20px; background:color-mix(in srgb, var(--info), transparent 85%); color:var(--info); display:grid; place-items:center; flex:0 0 auto; font-weight:900; }
    .route h3 { margin:0 0 7px; font-size:18px; }
    .route p { margin:0; color:var(--muted); font-size:13px; line-height:1.9; }

    .wide-card { background:var(--card); border:1px solid color-mix(in srgb, var(--border-primary), transparent 40%); border-radius:28px; box-shadow:var(--page-shadow); overflow:hidden; display:grid; grid-template-columns:1.02fr .98fr; }
    .wide-card__content { padding:38px; }
    .wide-card__content h2 { margin:0 0 16px; font-size:32px; line-height:1.55; }
    .wide-card__content p { margin:0 0 24px; color:var(--muted); font-size:15px; line-height:2.1; }
    .wide-list { display:grid; gap:12px; margin-bottom:26px; }
    .wide-list div { display:flex; align-items:center; gap:10px; font-weight:800; }
    .wide-list i { width:28px; height:28px; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb, var(--success1), transparent 88%); color:var(--success1); font-style:normal; }
    .wide-art { min-height:360px; background:linear-gradient(145deg, color-mix(in srgb, var(--info), #000 5%), color-mix(in srgb, var(--background-2), #000 6%)); position:relative; overflow:hidden; }
    .wide-art::before { content:""; position:absolute; width:280px; height:280px; border-radius:70px; background:rgba(255,255,255,.10); right:70px; top:45px; transform:rotate(18deg); }
    .wide-art::after { content:"مدل + دیتاست + آموزش"; position:absolute; inset:auto 38px 38px 38px; height:86px; border-radius:22px; display:grid; place-items:center; color:#fff; font-size:24px; font-weight:900; background:rgba(0,0,0,.18); backdrop-filter:blur(8px); }

    .wide-cta { padding: 18px 0 54px; }
    .wide-cta__box {
      min-height: 156px;
      background: var(--card);
      border: 1px solid color-mix(in srgb, var(--border-primary), transparent 38%);
      border-radius: 28px;
      box-shadow: var(--page-shadow);
      padding: 32px 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      position: relative;
      overflow: hidden;
    }
    .wide-cta__box::before {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      border-radius: 70px;
      left: -95px;
      top: -95px;
      background: color-mix(in srgb, var(--primary-1), transparent 90%);
      transform: rotate(18deg);
    }
    .wide-cta__box::after {
      content: "";
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      right: 32%;
      bottom: -88px;
      background: color-mix(in srgb, var(--info), transparent 87%);
    }
    .wide-cta__box > * { position: relative; z-index: 1; }
    .wide-cta h2 { margin: 0 0 7px; font-size: clamp(24px, 2.4vw, 31px); line-height: 1.55; font-weight: 900; }
    .wide-cta p { margin: 0; color: var(--muted); font-size: 14px; line-height: 2; }
    .wide-cta .btn { background: var(--primary-1); color: #fff; box-shadow: 0 12px 24px rgba(228,0,43,.16); }
    .wide-cta .btn:hover { background: var(--primary-2); transform: translateY(-2px); }

    .article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
    .article {
      background:var(--card);
      border:1px solid color-mix(in srgb, var(--border-primary), transparent 42%);
      border-radius:22px;
      box-shadow:var(--card-shadow);
      padding:14px;
      transition:.22s;
      overflow:hidden;
    }
    .article:hover { transform:translateY(-4px); }
    .article__pic {
      height: 168px;
      border-radius: 18px;
      background: linear-gradient(135deg, color-mix(in srgb, var(--info), #000 8%), color-mix(in srgb, var(--grey-7), #fff 2%));
      position: relative;
      overflow: hidden;
    }
    .article__pic::before {
      content: "";
      position: absolute;
      width: 170px;
      height: 170px;
      border-radius: 44px;
      right: -50px;
      top: -62px;
      background: rgba(255,255,255,.12);
      transform: rotate(18deg);
    }
    .article__pic::after {
      content: "Data2Learn";
      position: absolute;
      left: 20px;
      bottom: 17px;
      direction: ltr;
      color: rgba(255,255,255,.95);
      font-size: 24px;
      font-weight: 900;
      letter-spacing: -.5px;
    }
    .article__body { padding: 17px 5px 4px; }
    .article__body span { display:inline-flex; align-items:center; height:26px; padding:0 9px; border-radius:8px; background:var(--soft); color:var(--muted); font-size:11px; font-weight:900; margin-bottom:10px; }
    .article h3 { margin:0 0 10px; font-size:18px; line-height:1.65; font-weight:900; transition:.2s; }
    .article:hover h3 { color:var(--text-hover); }
    .article p { margin:0; color:var(--muted); font-size:13px; line-height:1.9; }

    .footer { margin-top:64px; background:var(--background-1); border-top:1px solid color-mix(in srgb, var(--border-primary), transparent 42%); position:relative; overflow:hidden; }
    .footer::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary-1), transparent 35%), transparent); opacity:.65; }
    .footer__main { padding:48px 0 34px; display:grid; grid-template-columns:1.35fr repeat(4, minmax(0, .85fr)); gap:34px; align-items:start; }
    .footer__brand { min-width:0; }
    .footer__logo-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
    .footer__logo-img { display:block; height:38px; width:auto; max-width:168px; object-fit:contain; margin:0; }
    .footer__brand p { margin:0; max-width:390px; color:var(--muted); font-size:13px; line-height:2.25; }
    .footer__social { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:18px; }
    .footer__social a { width:34px; height:34px; border-radius:12px; display:grid; place-items:center; color:var(--muted); background:color-mix(in srgb, var(--card), transparent 20%); border:1px solid color-mix(in srgb, var(--border-primary), transparent 50%); font-size:12px; font-weight:900; transition:.2s; }
    .footer__social a:hover { color:var(--text-hover); border-color:color-mix(in srgb, var(--primary-1), transparent 35%); transform:translateY(-2px); }
    .footer__col h4 { margin:0 0 17px; color:var(--text); font-size:15px; font-weight:900; position:relative; padding-bottom:11px; }
    .footer__col h4::after { content:""; position:absolute; right:0; bottom:0; width:28px; height:2px; border-radius:10px; background:color-mix(in srgb, var(--primary-1), transparent 18%); }
    .footer__col ul { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
    .footer__col a { color:var(--muted); font-size:13px; line-height:1.9; transition:.2s; display:inline-flex; align-items:center; gap:7px; }
    .footer__col a::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--border-secondary); opacity:.55; transition:.2s; }
    .footer__col a:hover { color:var(--text-hover); transform:translateX(-3px); }
    .footer__col a:hover::before { background:var(--primary-1); opacity:1; }
    .footer__contact { display:grid; gap:10px; color:var(--muted); font-size:13px; line-height:2; }
    .footer__contact span { display:block; }
    .footer__badges { margin-top:18px; display:flex; align-items:stretch; flex-wrap:wrap; gap:10px; }
    .footer__badge { width:78px; height:88px; border-radius:14px; display:grid; place-items:center; text-align:center; padding:8px; color:var(--muted); background:color-mix(in srgb, var(--card), transparent 54%); border:1px dashed color-mix(in srgb, var(--border-primary), transparent 35%); font-size:11px; font-weight:900; line-height:1.65; transition:.2s; }
    .footer__badge:hover { color:var(--text); border-color:color-mix(in srgb, var(--primary-1), transparent 48%); transform:translateY(-2px); }
    .footer__bottom { border-top:1px solid color-mix(in srgb, var(--border-primary), transparent 48%); padding:18px 0 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; color:var(--muted); font-size:12px; }
    .footer__bottom-links { display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
    .footer__bottom a { color:var(--muted); transition:.2s; }
    .footer__bottom a:hover { color:var(--text-hover); }

    @media (max-width: 1120px) {
      .header__box { padding:22px; }
      .search { max-width:none; }
      .nav { margin-inline: 12px; overflow-x:auto; }
      .nav ul { min-width: 850px; }
      .hero__grid { grid-template-columns:1fr; }
      .hero-art { min-height:440px; }
      .courses, .dataset-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .courses { row-gap:76px; }
      .routes, .article-grid { grid-template-columns:1fr; }
      .wide-card { grid-template-columns:1fr; }
      .footer__main { grid-template-columns:1.25fr repeat(2,1fr); }
    }
    @media (max-width: 760px) {
      .container { padding-left: 12px; padding-right: 12px; }
      .promo__bar { flex-direction:column; align-items:flex-start; padding:16px; }
      .countdown { grid-template-columns:repeat(4,1fr); width:100%; }
      .header__box { border-radius:22px; min-height:auto; flex-wrap:wrap; padding:18px; }
      .logo { min-width:auto; flex:1; }
      .logo__img--desktop { display:none; }
      .logo__img--mobile { display:block; height:42px; max-width:44px; }
      .search { order:5; flex-basis:100%; }
      .login-btn { display:none; }
      .menu-toggle { display:grid; }
      .nav-sticky { position:relative; }
      .nav { display:none; margin-inline:0; border-radius:22px; border-top:1px solid color-mix(in srgb, var(--border-primary), transparent 34%); margin-top:12px; }
      .nav.is-open { display:block; }
      .nav ul { min-width:0; flex-direction:column; align-items:stretch; }
      .nav a, .nav button { width:100%; justify-content:space-between; }
      .nav li.is-mega-open > button { color: var(--text-hover); background: color-mix(in srgb, var(--grey-7), transparent 28%); }
      .mega { position:static; opacity:1; visibility:visible; transform:none; width:100%; display:none; margin-top:8px; box-shadow:none; }
      .nav li:hover .mega { display:none; }
      .nav li.is-mega-open > .mega { display:block; }
      .mega__grid { grid-template-columns:1fr; }
      .hero { padding:52px 0 48px; }
      .hero h1 { font-size:34px; }
      .hero p { font-size:16px; }
      .hero__features { grid-template-columns:1fr; }
      .hero-art { display:none; }
      .courses, .dataset-cards { grid-template-columns:1fr; }
      .courses { row-gap:76px; }
      .section__head { flex-direction:column; align-items:flex-start; }
      .wide-card__content { padding:26px; }
      .wide-cta { padding: 6px 0 38px; }
      .wide-cta__box {
        min-height: auto;
        padding: 22px 18px 18px;
        border-radius: 22px;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 18px;
        text-align: center;
        background:
          radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--primary-1), transparent 91%), transparent 34%),
          radial-gradient(circle at 84% 88%, color-mix(in srgb, var(--info), transparent 90%), transparent 36%),
          var(--card);
      }
      .wide-cta__box::before {
        width: 142px;
        height: 142px;
        left: -58px;
        top: -64px;
        border-radius: 42px;
        opacity: .7;
      }
      .wide-cta__box::after {
        width: 86px;
        height: 86px;
        right: auto;
        left: 18px;
        bottom: -48px;
        opacity: .65;
      }
      .wide-cta h2 {
        max-width: 320px;
        margin: 0 auto 8px;
        font-size: 22px;
        line-height: 1.65;
      }
      .wide-cta p {
        max-width: 330px;
        margin: 0 auto;
        font-size: 13px;
        line-height: 2;
      }
      .wide-cta .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        box-shadow: none;
      }
      .footer__main { grid-template-columns:1fr 1fr; }
      .footer__brand { grid-column:1 / -1; }
      .footer__bottom { flex-direction:column; align-items:flex-start; }
    }


/* Utility and variant classes moved out of inline styles */
.chart__bar--55 { height:55%; }
.flex-fill { flex:1; }
.cover-art--ml { background:linear-gradient(135deg,#E4002B,#3D85B7); }
.cover-art--dataset { background:linear-gradient(135deg,#FF6961,#8A1D2B); }
.cover-art--tools { background:linear-gradient(135deg,#1D1F20,#E4002B); }
.article__pic--train { background:linear-gradient(135deg,#E4002B,#FF9900); }
.article__pic--project { background:linear-gradient(135deg,#292C2D,#3D85B7); }


/* Auth page */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.auth-page {
  margin: 0;
  min-height: 100vh;
  font-family: Vazirmatn, IRANSans, Shabnam, Tahoma, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 16% 16%, rgba(var(--c-primary1), .07), transparent 28%),
    radial-gradient(circle at 86% 76%, rgba(var(--c-info), .10), transparent 30%),
    var(--background-1);
}

/* Auth background override
   Keeps the auth page layout untouched; only the auth-body background matches the standalone auth card pack. */
body.auth-body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 13%, color-mix(in srgb, var(--primary-1), transparent 84%), transparent 34%),
    radial-gradient(circle at 84% 78%, color-mix(in srgb, var(--info), transparent 80%), transparent 36%),
    radial-gradient(circle at 52% 2%, color-mix(in srgb, var(--card), transparent 45%), transparent 30%),
    linear-gradient(145deg, color-mix(in srgb, var(--card), #fff 3%), color-mix(in srgb, var(--background-2), #000 4%));
}
body.auth-body::before,
body.auth-body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
body.auth-body::before {
  width: 245px;
  height: 245px;
  border-radius: 62px;
  left: -72px;
  top: -78px;
  background: color-mix(in srgb, var(--primary-1), transparent 90%);
  transform: rotate(22deg);
}
body.auth-body::after {
  width: 305px;
  height: 305px;
  border-radius: 50%;
  right: -115px;
  bottom: -126px;
  border: 40px solid color-mix(in srgb, var(--info), transparent 87%);
}
body.auth-body .auth-main {
  position: relative;
  z-index: 1;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.auth-main {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 34px 16px;
}
.auth-card {
  position: relative;
  width: min(100%, 475px);
  border-radius: 30px;
  padding: 28px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 38%);
  box-shadow: 0 20px 55px rgba(0,0,0,.22);
  overflow: hidden;
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary-1), transparent 45%), transparent);
}
.auth-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.auth-label {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 91%);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px;
}
.auth-card h2 {
  margin: 0;
  font-size: 25px;
  line-height: 1.45;
  font-weight: 900;
  letter-spacing: -.25px;
}
.auth-home {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--soft, color-mix(in srgb, var(--card), #fff 4%));
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 52%);
  color: var(--muted, var(--grey-3));
  transition: .2s ease;
}
.auth-home:hover { color: var(--text-hover); transform: translateY(-2px); }
.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 7px;
  border-radius: 18px;
  background: var(--soft, color-mix(in srgb, var(--card), #fff 4%));
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 54%);
  margin-bottom: 22px;
}
.auth-tab {
  border: 0;
  height: 44px;
  border-radius: 13px;
  background: transparent;
  color: var(--muted, var(--grey-3));
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  transition: .2s ease;
}
.auth-tab.is-active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.auth-toast {
  display: none;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--success1), transparent 88%);
  color: var(--success1);
  border: 1px solid color-mix(in srgb, var(--success1), transparent 66%);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.9;
}
.auth-toast.is-show { display: block; animation: authFade .18s ease; }
.auth-toast--error {
  background: color-mix(in srgb, var(--danger, #ef4444), transparent 88%);
  color: var(--danger, #ef4444);
  border-color: color-mix(in srgb, var(--danger, #ef4444), transparent 66%);
}
.auth-toast:has(.auth-message--error) {
  background: color-mix(in srgb, var(--danger, #ef4444), transparent 88%);
  color: var(--danger, #ef4444);
  border-color: color-mix(in srgb, var(--danger, #ef4444), transparent 66%);
}
.auth-message + .auth-message { margin-top: 6px; }
.auth-field-error {
  display: block;
  margin-top: 7px;
  color: var(--danger, #ef4444);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.8;
}
.auth-panel { display: none; }
.auth-panel.is-active { display: block; animation: authFade .22s ease; }
@keyframes authFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.auth-form { margin: 0; }
.auth-page .field { display: block; margin-bottom: 15px; }
.auth-page .field > span {
  display: block;
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--text), var(--muted, var(--grey-3)) 16%);
  font-size: 13px;
  font-weight: 900;
}
.auth-page .field__control {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 15px;
  background: var(--input, color-mix(in srgb, var(--background-2), #fff 2%));
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 46%);
  color: var(--muted, var(--grey-3));
  transition: .2s ease;
}
.auth-page .field__control:focus-within {
  border-color: color-mix(in srgb, var(--primary-1), transparent 42%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-1), transparent 91%);
  color: var(--text-hover);
}
.auth-page .field__control input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  direction: rtl;
  height: 50px;
  font-size: 14px;
  font-weight: 800;
}
.auth-page .field__control input::placeholder { color: color-mix(in srgb, var(--muted, var(--grey-3)), transparent 28%); }

.auth-page .field__control input:-webkit-autofill,
.auth-page .field__control input:-webkit-autofill:hover,
.auth-page .field__control input:-webkit-autofill:focus,
.auth-page .field__control input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--input, color-mix(in srgb, var(--background-2), #fff 2%)) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  background-color: var(--input, color-mix(in srgb, var(--background-2), #fff 2%)) !important;
  background-image: none !important;
  border-radius: 12px;
  transition: background-color 9999s ease-out 0s;
}
.auth-page .field__control input:autofill {
  box-shadow: 0 0 0 1000px var(--input, color-mix(in srgb, var(--background-2), #fff 2%)) inset !important;
  color: var(--text) !important;
  caret-color: var(--text) !important;
  background-color: var(--input, color-mix(in srgb, var(--background-2), #fff 2%)) !important;
  background-image: none !important;
}
.auth-page .field__control > [data-hugeicon] { color: inherit; font-size: 21px; }
.auth-page .pass-toggle {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted, var(--grey-3));
  cursor: pointer;
  transition: .2s ease;
}
.auth-page .pass-toggle:hover,
.auth-page .pass-toggle.is-visible { background: color-mix(in srgb, var(--primary-1), transparent 91%); color: var(--text-hover); }
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 18px;
  color: var(--muted, var(--grey-3));
  font-size: 12px;
  font-weight: 800;
}
.auth-row a { color: var(--text-hover); font-weight: 900; }
.auth-page .check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.8;
  color: var(--muted, var(--grey-3));
  cursor: pointer;
}
.auth-page .check input {
  width: 17px;
  height: 17px;
  margin: 4px 0 0;
  accent-color: var(--primary-1);
  flex: 0 0 auto;
}
.auth-terms { margin: 4px 0 18px; font-size: 12px; font-weight: 800; }
.auth-page .btn {
  border: 0;
  cursor: pointer;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 15px;
  font-weight: 900;
  transition: .2s ease;
}
.auth-page .btn--primary {
  color: var(--button--contained--primary-text, #fff);
  background: var(--primary-1);
  border: 1px solid var(--primary-1);
}
.auth-page .btn--primary:hover { transform: translateY(-2px); filter: brightness(1.05); }
.auth-page .auth-submit { width: 100%; }
.auth-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--muted, var(--grey-3));
  font-size: 12px;
  font-weight: 900;
}
.auth-separator::before,
.auth-separator::after {
  content: "";
  height: 1px;
  flex: 1;
  background: color-mix(in srgb, var(--border-primary), transparent 45%);
}
.auth-socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.auth-social-btn {
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 45%);
  background: var(--soft, color-mix(in srgb, var(--card), #fff 4%));
  color: var(--text);
  border-radius: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 900;
  transition: .2s ease;
  white-space: nowrap;
}
.auth-social-btn:hover {
  border-color: color-mix(in srgb, var(--primary-1), transparent 55%);
  color: var(--text-hover);
  transform: translateY(-2px);
}
.auth-social-btn > span {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  /* background: var(--card); */
  /* border: 1px solid color-mix(in srgb, var(--border-primary), transparent 55%); */
  font-size: 15px;
  font-weight: 950;
  direction: ltr;
}
.github-mark .hugeicon, .google-mark .hugeicon { display: block; }
.google-mark { color:#4285F4; }
.github-mark { color:var(--text); }
.auth-switch {
  margin: 18px 0 0;
  text-align: center;
  color: var(--muted, var(--grey-3));
  font-size: 13px;
  font-weight: 800;
}
.auth-switch button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text-hover);
  cursor: pointer;
  font-weight: 950;
}

@media (max-width: 520px) {
  .auth-main { padding: 18px 12px; align-items: start; }
  .auth-card { width: 100%; padding: 22px 16px; border-radius: 24px; }
  .auth-card h2 { font-size: 21px; }
  .auth-home { width: 40px; height: 40px; border-radius: 13px; }
  .auth-socials { grid-template-columns: 1fr; }
  .auth-row { align-items: flex-start; }
}

.auth-row--end { justify-content: flex-end; }




/* --------------------------------------------------------------------------
   General page and form components
   Used by content pages such as contact.html
-------------------------------------------------------------------------- */
.page-hero {
  padding: 48px 0 28px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--info), transparent 86%), transparent 28%),
    radial-gradient(circle at 14% 74%, color-mix(in srgb, var(--primary-1), transparent 91%), transparent 30%);
}
.page-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
  gap: 26px;
  align-items: stretch;
}
.page-hero__content {
  min-height: 330px;
  display: grid;
  align-content: center;
  padding: 36px;
  border-radius: 32px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card), transparent 0%), color-mix(in srgb, var(--card), var(--background-1) 16%));
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 48%);
  box-shadow: var(--card-shadow);
}
.page-hero h1 {
  margin: 10px 0 15px;
  color: var(--text);
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.38;
  font-weight: 950;
  letter-spacing: -.6px;
}
.page-hero p {
  max-width: 720px;
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
  line-height: 2.25;
}
.surface-card {
  min-width: 0;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 42%);
  border-radius: 26px;
  box-shadow: var(--card-shadow);
}
.surface-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 60%);
}
.surface-card__head h3 {
  margin: 5px 0 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.55;
}
.card-kicker {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--info);
  background: color-mix(in srgb, var(--info), transparent 90%);
  font-size: 12px;
  font-weight: 950;
}
.surface-card__icon,
.summary-card__icon,
.support-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--primary-1), transparent 74%);
}
.surface-card__icon { width: 48px; height: 48px; border-radius: 17px; font-size: 25px; }
.form { display: grid; gap: 16px; }
.form-grid { display: grid; gap: 16px; }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-field { display: block; min-width: 0; }
.form-field > span {
  display: block;
  margin-bottom: 9px;
  color: color-mix(in srgb, var(--text), var(--muted) 20%);
  font-size: 13px;
  font-weight: 950;
}
.form-control {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 15px;
  color: var(--muted);
  background: var(--input);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 48%);
  border-radius: 16px;
  transition: var(--speed);
}
.form-control:focus-within {
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-1), transparent 48%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-1), transparent 92%);
}
.form-control input,
.form-control textarea {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 780;
}
.form-control input { height: 52px; }
.form-control textarea {
  min-height: 178px;
  padding: 15px 0;
  resize: vertical;
  line-height: 2;
}
.form-control input::placeholder,
.form-control textarea::placeholder { color: color-mix(in srgb, var(--muted), transparent 28%); }
.form-control > [data-hugeicon] { flex: 0 0 auto; font-size: 21px; align-self: center; }
.form-control--textarea { align-items: flex-start; }
.form-control--textarea > [data-hugeicon] { margin-top: 15px; }
.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.form-note {
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.9;
}
.form-toast {
  /*display: none;*/
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 15px;
  color: var(--success1);
  background: color-mix(in srgb, var(--success1), transparent 89%);
  border: 1px solid color-mix(in srgb, var(--success1), transparent 65%);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.9;
}
.form-toast-error {
  /*display: none;*/
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--error), transparent 88%) !important;
  color: var(--error) !important;
  border: 1px solid color-mix(in srgb, var(--error), transparent 62%) !important;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.9;
}

.errorlist {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.form-toast.is-show { display: block; animation: authFade .18s ease; }

/* --------------------------------------------------------------------------
   Contact page
   Layout-only styles for contact.html
-------------------------------------------------------------------------- */
.contact-page main { overflow: hidden; }
.contact-summary {
  display: grid;
  gap: 14px;
  align-content: center;
  padding: 24px;
  border-radius: 32px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 48%);
  box-shadow: var(--card-shadow);
}
.summary-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border-radius: 21px;
  background: var(--background-1);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  transition: var(--speed);
}
.summary-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary-1), transparent 68%); }
.summary-card.is-highlight { background: linear-gradient(135deg, color-mix(in srgb, var(--info), transparent 91%), var(--background-1)); }
.summary-card__icon { width: 48px; height: 48px; border-radius: 17px; font-size: 25px; }
.summary-card strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.8;
}
.summary-card span:not(.summary-card__icon) {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.8;
  direction: ltr;
  text-align: right;
}
.contact-section { padding-top: 54px; }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr);
  gap: 22px;
  align-items: start;
}
.contact-form-card { padding: 26px; }
.contact-side { display: grid; gap: 16px; min-width: 0; }
.support-card { padding: 24px; overflow: hidden; position: relative; }
.support-card::after {
  content: "";
  position: absolute;
  left: -38px;
  bottom: -44px;
  width: 154px;
  height: 154px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--info), transparent 91%);
}
.support-card__icon { width: 54px; height: 54px; border-radius: 19px; font-size: 28px; margin-bottom: 18px; }
.support-card h3 {
  margin: 0 0 9px;
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.65;
}
.support-card p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 2.05;
}
.support-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; z-index: 1; }
.support-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border-radius: 17px;
  background: var(--background-1);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 64%);
}
.support-list li > [data-hugeicon] {
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--info);
  background: color-mix(in srgb, var(--info), transparent 91%);
  font-size: 22px;
}
.support-list strong { display:block; color:var(--text); font-size:12px; font-weight:950; line-height:1.6; }
.support-list small { display:block; color:var(--muted); font-size:11px; font-weight:800; line-height:1.7; }
.contact-mini-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.mini-contact {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  padding: 16px;
  border-radius: 20px;
  color: var(--text);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 46%);
  box-shadow: var(--card-shadow);
  transition: var(--speed);
}
.mini-contact:hover { transform: translateY(-3px); color: var(--text-hover); }
.mini-contact > [data-hugeicon] {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 92%);
  font-size: 23px;
}
.mini-contact strong { min-width: 0; color: inherit; font-size: 13px; font-weight: 950; direction: ltr; text-align: right; }
.mini-contact small { min-width: 0; color: var(--muted); font-size: 11px; font-weight: 800; }
@media (max-width: 1050px) {
  .page-hero__grid,
  .contact-layout { grid-template-columns: 1fr; }
  .page-hero__content { min-height: auto; }
  .contact-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .page-hero { padding: 28px 0 18px; }
  .page-hero__content,
  .contact-summary,
  .contact-form-card,
  .support-card { padding: 20px; border-radius: 24px; }
  .page-hero h1 { font-size: 29px; }
  .contact-summary { grid-template-columns: 1fr; }
  .form-grid--2 { grid-template-columns: 1fr; }
  .form-actions { align-items: stretch; }
  .form-actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Dashboard page
   Structure: general app shell, sidebar, topbar, dashboard widgets
-------------------------------------------------------------------------- */
.hugeicon { display:block; width:1em; height:1em; }
body.dashboard-page { min-height:100vh; background:var(--background-1); }
.dashboard-shell { min-height:100vh; display:grid; grid-template-columns:292px minmax(0,1fr); background:var(--background-1); }
/* Dashboard sidebar: subtle local scrollbar */
.dashboard-sidebar {
  position:sticky;
  top:0;
  height:100vh;
  padding:22px 18px;
  background:var(--background-1);
  border-left:1px solid color-mix(in srgb, var(--border-primary), transparent 52%);
  overflow:auto;
  overflow-x:hidden;
  z-index:20;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--grey-5), transparent 50%) transparent;
  scrollbar-gutter:stable;
}
.dashboard-sidebar::-webkit-scrollbar {
  width:4px;
  height:4px;
}
.dashboard-sidebar::-webkit-scrollbar-track {
  background:transparent;
  margin:14px 0;
}
.dashboard-sidebar::-webkit-scrollbar-thumb {
  min-height:34px;
  border-radius:999px;
  background:color-mix(in srgb, var(--grey-5), transparent 58%);
}
.dashboard-sidebar::-webkit-scrollbar-thumb:hover {
  background:color-mix(in srgb, var(--grey-3), transparent 48%);
}
.dashboard-sidebar::-webkit-scrollbar-button {
  display:none;
  width:0;
  height:0;
}
.dashboard-sidebar::-webkit-scrollbar-corner {
  background:transparent;
}
.dashboard-main { min-width:0; background:var(--background-1); }
.dashboard-topbar { position:sticky; top:0; z-index:15; padding:14px 24px 0; background:color-mix(in srgb, var(--background-1), transparent 4%); backdrop-filter:blur(18px); }
.dashboard-topbar--slim { min-height:auto; }
.dashboard-header__box { width:100%; max-width:1288px; min-height:72px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:10px 16px; background:var(--header--header-background); border:1px solid color-mix(in srgb, var(--border-primary), transparent 35%); border-radius:22px; box-shadow:0 12px 30px color-mix(in srgb, var(--elevation), transparent 25%); }
.dash-topbar__right, .dash-topbar__left { display:flex; align-items:center; gap:14px; min-width:0; }
.dash-title span { display:block; color:var(--muted); font-size:12px; font-weight:800; line-height:1.4; }
.dash-title h1 { margin:0; color:var(--text); font-size:24px; line-height:1.45; font-weight:900; }
.dash-search { width:min(360px, 34vw); height:46px; display:flex; align-items:center; gap:10px; padding:0 14px; color:var(--muted); background:var(--card); border:1px solid color-mix(in srgb, var(--border-primary), transparent 46%); border-radius:16px; }
.dashboard-header__search { flex:1; height:46px; min-width:220px; max-width:520px; display:flex; align-items:center; gap:10px; padding:0 14px; color:var(--muted); background:var(--input); border:1px solid color-mix(in srgb, var(--border-primary), transparent 50%); border-radius:15px; transition:var(--speed); }
.dashboard-header__search:focus-within { border-color:color-mix(in srgb, var(--primary-1), transparent 56%); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary-1), transparent 92%); color:var(--text-hover); }
.dashboard-header__search .icon { font-size:21px; }
.dashboard-header__search input { width:100%; min-width:0; height:44px; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:13px; font-weight:750; }
.dashboard-header__search input::placeholder { color:var(--muted); opacity:.82; }
.dashboard-header__actions { margin-right:auto; display:flex; align-items:center; gap:10px; min-width:0; }
.dash-wallet { height:44px; display:inline-flex; align-items:center; gap:8px; padding:0 12px; color:var(--text); background:var(--soft); border:1px solid color-mix(in srgb, var(--border-primary), transparent 54%); border-radius:15px; transition:var(--speed); }
.dash-wallet:hover { transform:translateY(-2px); color:var(--text-hover); border-color:color-mix(in srgb, var(--primary-1), transparent 55%); }
.dash-wallet strong { font-size:12px; font-weight:950; white-space:nowrap; }

.dash-notification { position: relative; }
.dash-notification__toggle { position: relative; }
.dash-notification__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--danger, var(--error, #ef4444));
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  border: 2px solid var(--card);
}
.dash-notification__badge[hidden] { display: none !important; }
.dash-notification__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: min(360px, calc(100vw - 28px));
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 42%);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 80;
}
.dash-notification__dropdown[hidden] { display: none !important; }
.dash-notification__dropdown::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 24px;
  width: 14px;
  height: 14px;
  background: var(--card);
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 42%);
  border-right: 1px solid color-mix(in srgb, var(--border-primary), transparent 42%);
  transform: rotate(-45deg);
}
.dash-notification__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 60%);
}
.dash-notification__head strong { display: block; font-size: 14px; font-weight: 950; color: var(--text); }
.dash-notification__head small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.dash-notification__read-all {
  border: 0;
  background: color-mix(in srgb, var(--primary-1), transparent 88%);
  color: var(--primary-1);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.dash-notification__read-all[hidden] { display: none !important; }
.dash-notification__read-all:disabled { opacity: .55; cursor: wait; }
.dash-notification__list {
  display: grid;
  gap: 8px;
  max-height: 330px;
  overflow: auto;
  padding-top: 10px;
}
.dash-notification__item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  color: var(--text);
  border-radius: 16px;
  border: 1px solid transparent;
  transition: var(--speed);
}
.dash-notification__item:hover {
  color: var(--text-hover);
  background: var(--soft);
  border-color: color-mix(in srgb, var(--border-primary), transparent 54%);
}
.dash-notification__item.is-unread {
  background: color-mix(in srgb, var(--primary-1), transparent 91%);
  border-color: color-mix(in srgb, var(--primary-1), transparent 70%);
}
.dash-notification__icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary-1), transparent 86%);
  color: var(--primary-1);
}
.dash-notification__body { min-width: 0; display: grid; gap: 4px; }
.dash-notification__body strong { font-size: 12px; font-weight: 950; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-notification__body small { font-size: 11px; color: var(--muted); line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-notification__empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  padding: 28px 12px;
  color: var(--muted);
}
.dash-notification__empty strong { color: var(--text); font-size: 13px; font-weight: 950; }
@media (max-width: 640px) {
  .dash-notification__dropdown { position: fixed; top: 76px; left: 14px; right: 14px; width: auto; }
  .dash-notification__dropdown::before { display: none; }
}

.dash-search .icon { font-size:21px; flex:0 0 auto; }
.dash-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:13px; font-weight:700; }
.dash-search input::placeholder { color:var(--muted); opacity:.82; }
.dash-menu-btn { display:none; }
.sidebar-close { display:none; }
.dashboard-backdrop { display:none; }
.dash-brand { display:flex; align-items:center; justify-content:center; min-height:68px; margin-bottom:18px; color:var(--text); padding:6px 4px; }
.dash-brand img { width:100%; max-width:210px; height:auto; display:block; object-fit:contain; }
.dash-brand span { display:none; }
.top-user__avatar { width:42px; height:42px; flex:0 0 auto; border-radius:15px; display:grid; place-items:center; color:#fff; font-size:15px; font-weight:900; background:linear-gradient(135deg, var(--info), var(--success1)); }
.sidebar-section { margin:18px 0 8px; padding:0 10px; color:var(--muted-2); font-size:11px; font-weight:900; letter-spacing:-.1px; }
.sidebar-nav { display:grid; gap:5px; }
.sidebar-link { height:46px; display:flex; align-items:center; gap:10px; padding:0 13px; color:var(--muted); border-radius:15px; font-size:14px; font-weight:850; transition:var(--speed); position:relative; }
.sidebar-link .icon { width:23px; height:23px; flex:0 0 auto; display:grid; place-items:center; font-size:21px; color:color-mix(in srgb, var(--text), var(--muted) 32%); transition:var(--speed); }
.sidebar-link:hover { color:var(--text); background:color-mix(in srgb, var(--card), transparent 28%); transform:translateX(-2px); }
.sidebar-link.is-active { color:var(--text); background:var(--card); box-shadow:0 10px 24px color-mix(in srgb, var(--elevation), transparent 20%); }
.sidebar-link.is-active::before { content:""; position:absolute; inset:12px auto 12px 0; width:3px; border-radius:999px; background:var(--primary-1); }
.sidebar-link.is-active .icon { color:var(--text-hover); }
.top-user { min-width:154px; height:44px; display:flex; align-items:center; gap:9px; padding:0 6px 0 11px; border-radius:15px; color:var(--text); background:var(--soft); border:1px solid color-mix(in srgb, var(--border-primary), transparent 54%); transition:var(--speed); }
.top-user:hover { transform:translateY(-2px); box-shadow:var(--card-shadow); }
.top-user__avatar { width:32px; height:32px; border-radius:11px; font-size:12px; }
.top-user span { color:var(--text); font-size:13px; font-weight:900; white-space:nowrap; }
.dashboard-content { width:100%; max-width:1288px; margin:0 auto; padding:28px 28px 60px; }
.dashboard-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px; }
.dashboard-hero .section__title { min-width:0; }
.dashboard-hero__actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.stats-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; margin-bottom:18px; }
.stats-grid--tickets { margin-bottom:22px; }
.metric-card { min-height:144px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:21px; background:var(--card); border:1px solid color-mix(in srgb, var(--border-primary), transparent 40%); border-radius:22px; box-shadow:0 12px 30px color-mix(in srgb, var(--elevation), transparent 25%); transition:var(--speed); overflow:hidden; position:relative; }
.metric-card::after { content:""; position:absolute; left:-26px; top:-28px; width:96px; height:96px; border-radius:50%; background:color-mix(in srgb, var(--info), transparent 92%); }
.metric-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--border-primary), transparent 18%); }
.metric-card__text { min-width:0; position:relative; z-index:1; }
.metric-card__label { display:block; margin-bottom:8px; color:var(--muted); font-size:13px; font-weight:900; }
.metric-card__value { display:block; color:var(--text); font-size:24px; font-weight:950; line-height:1.55; letter-spacing:-.4px; }
.metric-card__hint { display:block; color:var(--muted-2); font-size:12px; font-weight:750; }
.metric-card__icon { width:58px; height:58px; flex:0 0 auto; display:grid; place-items:center; border-radius:20px; color:var(--text); background:color-mix(in srgb, var(--background-1), var(--card) 30%); border:1px solid color-mix(in srgb, var(--border-primary), transparent 48%); font-size:34px; position:relative; z-index:1; }
.metric-card.is-green .metric-card__icon { color:var(--success1); background:color-mix(in srgb, var(--success1), transparent 90%); }
.metric-card.is-blue .metric-card__icon { color:var(--info); background:color-mix(in srgb, var(--info), transparent 90%); }
.metric-card.is-red .metric-card__icon { color:var(--text-hover); background:color-mix(in srgb, var(--primary-1), transparent 91%); }
.dashboard-grid { display:grid; grid-template-columns:1.04fr .96fr; gap:18px; align-items:stretch; }
.dashboard-panel { min-width:0; background:var(--card); border:1px solid color-mix(in srgb, var(--border-primary), transparent 40%); border-radius:24px; box-shadow:0 12px 32px color-mix(in srgb, var(--elevation), transparent 24%); overflow:hidden; }
.dashboard-panel__head { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; border-bottom:1px solid color-mix(in srgb, var(--border-primary), transparent 58%); }
.dashboard-panel__title { display:flex; align-items:center; gap:10px; color:var(--text); font-size:17px; font-weight:950; }
.dashboard-panel__title .icon { width:36px; height:36px; display:grid; place-items:center; border-radius:13px; color:var(--info); background:color-mix(in srgb, var(--info), transparent 90%); font-size:22px; }
.panel-filter { height:34px; display:inline-flex; align-items:center; gap:6px; padding:0 10px; border-radius:11px; color:var(--muted); background:var(--soft); border:1px solid color-mix(in srgb, var(--border-primary), transparent 60%); font-size:12px; font-weight:850; }
.chart-box { height:310px; padding:18px 18px 14px; }
.chart-box canvas { width:100% !important; height:100% !important; }
.dashboard-list { display:grid; gap:10px; padding:16px; }
.list-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px; border-radius:17px; background:var(--background-1); border:1px solid color-mix(in srgb, var(--border-primary), transparent 62%); }
.list-row__main { display:flex; align-items:center; gap:11px; min-width:0; }
.list-row__icon { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px; color:var(--info); background:color-mix(in srgb, var(--info), transparent 90%); font-size:23px; }
.list-row strong { display:block; color:var(--text); font-size:13px; font-weight:950; line-height:1.5; }
.list-row small { display:block; color:var(--muted); font-size:11px; font-weight:800; line-height:1.6; }
.list-row__amount { color:var(--text); font-size:12px; font-weight:950; white-space:nowrap; }
.status-pill { height:27px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:0 10px; color:var(--muted); background:var(--soft); font-size:11px; font-weight:900; white-space:nowrap; }
.status-pill.is-success { color:var(--success1); background:color-mix(in srgb, var(--success1), transparent 88%); }
.status-pill.is-warning { color:var(--warning1); background:color-mix(in srgb, var(--warning1), transparent 88%); }
.progress-stack { display:grid; gap:14px; padding:18px; }
.progress-item__top { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; color:var(--text); font-size:13px; font-weight:900; }
.progress-item__top span:last-child { color:var(--muted); }
.progress-line { height:9px; border-radius:999px; background:var(--background-1); overflow:hidden; border:1px solid color-mix(in srgb, var(--border-primary), transparent 72%); }
.progress-line i { display:block; height:100%; width:var(--value, 50%); border-radius:inherit; background:linear-gradient(90deg, var(--info), var(--success1)); }
.quick-actions { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; padding:16px; }
.quick-action { min-height:94px; display:grid; align-content:center; justify-items:start; gap:9px; padding:14px; color:var(--text); background:var(--background-1); border:1px solid color-mix(in srgb, var(--border-primary), transparent 62%); border-radius:18px; transition:var(--speed); }
.quick-action:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--primary-1), transparent 56%); }
.quick-action .icon { width:36px; height:36px; border-radius:14px; display:grid; place-items:center; color:var(--text-hover); background:color-mix(in srgb, var(--primary-1), transparent 91%); font-size:22px; }
.quick-action strong { font-size:12px; font-weight:950; }

/* --------------------------------------------------------------------------
   FAQ / Accordion components
   Reusable question and answer blocks for panel pages
-------------------------------------------------------------------------- */
.faq-layout {
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
  gap:18px;
  align-items:start;
}
.faq-page-head { margin-bottom:22px; }
.faq-nav { position:sticky; top:106px; }
.faq-nav .dashboard-panel__head { min-height:64px; }
.faq-nav__links { display:grid; gap:8px; padding:14px; }
.faq-nav__links a {
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  color:var(--muted);
  background:var(--background-1);
  border:1px solid color-mix(in srgb, var(--border-primary), transparent 64%);
  border-radius:15px;
  font-size:13px;
  font-weight:900;
  transition:var(--speed);
}
.faq-nav__links a:hover {
  color:var(--text);
  transform:translateX(-2px);
  border-color:color-mix(in srgb, var(--primary-1), transparent 62%);
}
.faq-nav__links a > [data-hugeicon] {
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  color:var(--text-hover);
  flex:0 0 auto;
}
.faq-stack { display:grid; gap:18px; min-width:0; }
.faq-list { display:grid; gap:10px; padding:16px; }
.faq-item {
  background:var(--background-1);
  border:1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  border-radius:18px;
  overflow:hidden;
  transition:var(--speed);
}
.faq-item:hover { border-color:color-mix(in srgb, var(--primary-1), transparent 68%); }
.faq-item[open] {
  background:color-mix(in srgb, var(--card), var(--background-1) 54%);
  border-color:color-mix(in srgb, var(--primary-1), transparent 66%);
}
.faq-item summary {
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 18px;
  color:var(--text);
  cursor:pointer;
  list-style:none;
  font-size:14px;
  font-weight:950;
  line-height:1.8;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary i {
  width:30px;
  height:30px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  color:var(--muted);
  background:var(--soft);
  border-radius:11px;
  transition:var(--speed);
}
.faq-item[open] summary i {
  color:var(--text-hover);
  transform:rotate(180deg);
}
.faq-item p {
  margin:0;
  padding:0 18px 18px 52px;
  color:var(--muted);
  font-size:13px;
  font-weight:760;
  line-height:2.05;
}

@media (max-width: 1180px) {
  .dashboard-shell { grid-template-columns:260px minmax(0,1fr); }
  .stats-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns:1fr; }
  .dash-search { display:none; }
  .dash-wallet strong { display:none; }
  .dash-wallet { width:44px; justify-content:center; padding:0; }
}
@media (max-width: 860px) {
  .dashboard-shell { display:block; }
  .dashboard-sidebar { position:fixed; top:0; right:0; width:min(310px, 86vw); transform:translateX(105%); transition:var(--speed); box-shadow:-24px 0 60px rgba(0,0,0,.24); }
  .dashboard-page.sidebar-open .dashboard-sidebar { transform:translateX(0); }
  .dashboard-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:18; }
  .dashboard-page.sidebar-open .dashboard-backdrop { display:block; }
  .sidebar-close { width:38px; height:38px; display:grid; place-items:center; position:absolute; top:14px; left:14px; border:0; border-radius:13px; background:var(--card); color:var(--muted); cursor:pointer; }
  .dash-menu-btn { display:grid; }
  .dashboard-topbar { padding:12px 12px 0; }
  .dashboard-header__box { min-height:66px; padding:9px 12px; border-radius:18px; }
  .dashboard-header__search { display:none; }
  .dashboard-content { padding:24px 16px 42px; }
  .dashboard-hero { align-items:flex-start; flex-direction:column; }
  .stats-grid { gap:12px; }
  .metric-card { min-height:126px; padding:17px; border-radius:20px; }
  .top-user { min-width:auto; padding-left:7px; }
  .top-user span { display:none; }
}
@media (max-width: 620px) {
  .stats-grid { grid-template-columns:1fr; }
  .quick-actions { grid-template-columns:1fr; }
  .dash-title h1 { font-size:20px; }
  .dashboard-topbar .circle-btn { width:40px; height:40px; }
  .dashboard-header__actions { gap:7px; }
  .dashboard-panel__head { align-items:flex-start; flex-direction:column; }
  .chart-box { height:270px; }
}

@media (max-width: 980px) {
  .faq-layout { grid-template-columns:1fr; }
  .faq-nav { position:static; }
  .faq-nav__links { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .faq-nav__links { grid-template-columns:1fr; }
  .faq-item summary { align-items:flex-start; min-height:auto; font-size:13px; }
  .faq-item p { padding-left:18px; font-size:12.5px; }
}

.mt-18 { margin-top:18px; }

@media (max-width: 460px) {
  .dash-wallet, .dashboard-header__actions .top-user { display:none; }
  .dashboard-header__box { justify-content:space-between; }
}

/* --------------------------------------------------------------------------
   Account security page
   Reusable account layout and password form components
-------------------------------------------------------------------------- */
.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 18px;
  align-items: start;
}
.account-layout--security { max-width: 1120px; }
.account-layout--single {
  max-width: 760px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
}
.account-layout--single .account-form-panel { width: 100%; }
.account-form-panel { overflow: hidden; }
.account-panel__body { padding: 20px; }
.form-control--with-action { padding-left: 8px; }
.field-action {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: var(--speed);
}
.field-action:hover,
.field-action.is-visible {
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 91%);
}
@media (max-width: 980px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-layout--security { max-width: none; }
}


/* --------------------------------------------------------------------------
   Profile edit page
   Reuses account/form/dashboard components for edit-profile.html
-------------------------------------------------------------------------- */
.account-layout--profile {
  max-width: 980px;
}
.profile-form .form-control--readonly {
  background: color-mix(in srgb, var(--input), var(--background-1) 28%);
  border-style: dashed;
}
.profile-form .form-control--readonly input {
  cursor: default;
}
.profile-form .form-control--with-action {
  padding: 6px 7px 6px 12px !important;
  gap: 8px;
  align-items: center;
}
.profile-form .form-control--with-action input {
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: text !important;
}
.profile-form .form-control--with-action .btn {
  min-height: 36px;
  height: 36px;
  padding: 0 13px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  .profile-form .form-control--with-action {
    padding: 6px !important;
  }
  .profile-form .form-control--with-action .btn {
    padding: 0 10px;
    font-size: 12px;
  }
}
.profile-form textarea {
  min-height: 142px;
}

/* --------------------------------------------------------------------------
   Bookmarks page
   Reusable tab switcher and empty-state blocks for panel pages
-------------------------------------------------------------------------- */
.bookmarks-page-head { margin-bottom: 22px; }
.bookmarks-panel { overflow: hidden; }
.bookmark-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: var(--header--header-background);
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 55%);
}
.bookmark-tab {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 950;
  transition: var(--speed);
}
.bookmark-tab:hover { color: var(--text); background: color-mix(in srgb, var(--card), transparent 28%); }
.bookmark-tab.is-active { color: var(--text); border-bottom-color: var(--primary-2); }
.bookmark-tab > [data-hugeicon] {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: currentColor;
}
.bookmark-tab b {
  min-width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  font-size: 12px;
  font-weight: 950;
}
.bookmark-tab.is-active b {
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 91%);
  border-color: color-mix(in srgb, var(--primary-1), transparent 70%);
}
.bookmark-panels { min-height: 410px; padding: 18px; }
.bookmark-panel { animation: authFade .22s ease; }
.empty-state {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--border-primary), transparent 48%);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary-1), transparent 93%), transparent 40%),
    var(--background-1);
}
.empty-state--compact { padding: 38px 22px; }
.empty-state__icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 55%);
  border-radius: 24px;
}
.empty-state h3 {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
}
.empty-state p {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 2;
}
.empty-state .btn { margin-top: 6px; }
/* v50: make hidden dashboard empty/cart states truly invisible */
.empty-state[hidden],
.bookmark-panel[hidden],
.bookmark-grid[hidden],
[data-bookmark-empty][hidden],
[data-bookmark-list][hidden],
.cart-layout[hidden],
[data-cart-area][hidden] {
  display: none !important;
}


@media (max-width: 780px) {
  .bookmark-tabs { grid-template-columns: 1fr; }
  .bookmark-tab { justify-content: flex-start; min-height: 56px; }
  .bookmark-panels { min-height: auto; padding: 14px; }
  .empty-state { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   Finance page
   Reusable financial summary, tabs, lists and transaction table components
-------------------------------------------------------------------------- */
.finance-page-head { margin-bottom: 22px; }
.finance-overview {
  display: grid;
  grid-template-columns: minmax(320px, .95fr) minmax(0, 1.05fr);
  gap: 16px;
  margin-bottom: 18px;
}
.finance-balance-card,
.finance-mini-card,
.finance-card {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 54%);
  box-shadow: 0 18px 45px color-mix(in srgb, var(--elevation), transparent 38%);
}
.finance-balance-card {
  min-height: 238px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
}
.finance-balance-card::before {
  content: '';
  position: absolute;
  inset: auto -30px -45px auto;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--success1), transparent 86%);
  filter: blur(2px);
}
.finance-balance-card__top {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.finance-balance-card__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: var(--success1);
  background: color-mix(in srgb, var(--success1), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--success1), transparent 70%);
  border-radius: 22px;
}
.finance-balance-card span,
.finance-mini-card small,
.finance-card--summary span { color: var(--muted); font-size: 13px; font-weight: 850; }
.finance-balance-card strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.35;
  font-weight: 950;
}
.finance-balance-card p {
  margin: 0;
  color: var(--muted);
  line-height: 2;
  font-size: 13px;
  font-weight: 760;
  position: relative;
  z-index: 1;
}
.finance-balance-card__actions { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }
.finance-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.finance-mini-card {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  transition: var(--speed);
}
.finance-mini-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary-1), transparent 66%); }
.finance-mini-card__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 92%);
  border-radius: 17px;
}
.finance-mini-card__icon.is-green { color: var(--success1); background: color-mix(in srgb, var(--success1), transparent 91%); }
.finance-mini-card__icon.is-blue { color: var(--info); background: color-mix(in srgb, var(--info), transparent 91%); }
.finance-mini-card__icon.is-orange { color: var(--warning1); background: color-mix(in srgb, var(--warning1), transparent 91%); }
.finance-mini-card__icon.is-red { color: var(--error); background: color-mix(in srgb, var(--error), transparent 92%); }
.finance-mini-card strong { display: block; margin-top: 7px; color: var(--text); font-size: 18px; font-weight: 950; }
.finance-panel-shell { overflow: hidden; }
.finance-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--header--header-background);
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 55%);
}
.finance-tab {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  transition: var(--speed);
}
.finance-tab:hover { color: var(--text); background: color-mix(in srgb, var(--card), transparent 32%); }
.finance-tab.is-active { color: var(--text); border-bottom-color: var(--primary-2); }
.finance-tab [data-hugeicon] { width: 24px; height: 24px; display: grid; place-items: center; }
.finance-panels { min-height: 510px; padding: 18px; }
.finance-panel { animation: authFade .22s ease; }
.finance-section-grid { display: grid; grid-template-columns: minmax(320px, .88fr) minmax(0, 1.12fr); gap: 16px; align-items: stretch; }
.finance-section-grid--withdraw { grid-template-columns: minmax(320px, .7fr) minmax(0, 1fr); }
.finance-card { border-radius: 22px; overflow: hidden; }
.finance-card--soft { background: linear-gradient(180deg, color-mix(in srgb, var(--card), var(--success1) 3%), var(--card)); }
.finance-card__head {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 60%);
  background: color-mix(in srgb, var(--card), var(--background-1) 25%);
}
.finance-card__head--inside { margin: -18px -18px 18px; }
.finance-charge-form,
.finance-withdraw-form { padding: 18px; }
.quick-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 18px; }
.quick-amounts button {
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  border-radius: 14px;
  color: var(--muted);
  background: var(--background-1);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: var(--speed);
}
.quick-amounts button:hover,
.quick-amounts button.is-active {
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-1), transparent 65%);
  background: color-mix(in srgb, var(--primary-1), transparent 92%);
}
.finance-activity-list { display: grid; gap: 10px; padding: 16px; }
.finance-activity {
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--background-1);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
  border-radius: 17px;
}
.finance-activity > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--soft);
}
.finance-activity.is-income > span,
.finance-activity.is-income b { color: var(--success1); }
.finance-activity.is-expense > span,
.finance-activity.is-expense b { color: var(--error); }
.finance-activity strong { display: block; color: var(--text); font-size: 13px; font-weight: 950; }
.finance-activity small { color: var(--muted); font-size: 12px; font-weight: 800; }
.finance-activity b { font-size: 13px; font-weight: 950; white-space: nowrap; }
.invoice-list { display: grid; gap: 0; }
.invoice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 60%);
}
.invoice-row:first-child { padding-top: 4px; }
.invoice-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.invoice-row__main,
.invoice-row__meta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.invoice-row__main strong { color: var(--text); font-size: 15px; font-weight: 950; }
.invoice-row__main small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.invoice-row__meta { flex-wrap: wrap; justify-content: flex-end; }
.invoice-row__meta b { color: var(--text); font-size: 14px; font-weight: 950; }
.invoice-row__meta a { color: var(--text-hover); font-size: 13px; font-weight: 950; }
.status-dot { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 5px color-mix(in srgb, var(--muted), transparent 90%); }
.status-dot.is-paid { background: var(--success1); box-shadow: 0 0 0 5px color-mix(in srgb, var(--success1), transparent 90%); }
.finance-table { display: grid; gap: 0; overflow-x: auto; }
.finance-table__row {
  min-width: 760px;
  display: grid;
  grid-template-columns: 1.25fr .9fr .8fr .55fr;
  align-items: center;
  gap: 14px;
  padding: 15px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}
.finance-table__row:last-child { border-bottom: 0; }
.finance-table__row.is-head {
  color: var(--text);
  background: var(--background-1);
  border-radius: 16px;
  font-weight: 950;
}
.tx-title { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 950; }
.tx-title i { width: 22px; height: 22px; display: grid; place-items: center; }
.tx-title.is-income i { color: var(--success1); }
.tx-title.is-expense i { color: var(--error); }
.status-badge {
  width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  background: var(--soft);
  color: var(--muted);
}
.status-badge.is-paid { color: var(--success1); background: color-mix(in srgb, var(--success1), transparent 91%); }
.finance-income-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 16px; }
.chart-box--finance { height: 360px; padding: 16px; }
.finance-card--summary { padding: 22px; }
.finance-card--summary strong { display: block; margin: 10px 0 12px; color: var(--success1); font-size: 28px; font-weight: 950; }
.finance-card--summary p { margin: 0; color: var(--muted); line-height: 2; font-size: 13px; font-weight: 760; }
.finance-card--summary ul { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.finance-card--summary li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
  border-radius: 14px;
  background: var(--background-1);
}
.finance-card--summary li b { color: var(--text); font-size: 13px; }
.finance-card--summary li span { color: var(--muted); white-space: nowrap; }
.finance-empty { min-height: 100%; }
@media (max-width: 1180px) {
  .finance-overview,
  .finance-section-grid,
  .finance-income-grid { grid-template-columns: 1fr; }
  .finance-section-grid--withdraw { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .finance-mini-grid { grid-template-columns: 1fr; }
  .finance-tabs { display: flex; overflow-x: auto; }
  .finance-tab { min-width: 150px; }
  .finance-panels { padding: 14px; }
  .quick-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-row { align-items: flex-start; flex-direction: column; }
  .invoice-row__meta { justify-content: flex-start; }
  .finance-balance-card { padding: 20px; }
  .finance-balance-card strong { font-size: 24px; }
}
.form-control small {
  margin-inline-start: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.btn:disabled { opacity: .68; cursor: not-allowed; transform: none; }


/* ==========================================================================
   Commerce / cart components
   ========================================================================== */
.commerce-card {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 52%);
  border-radius: 22px;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--black-1), transparent 86%);
  overflow: hidden;
}
.commerce-card__head {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: color-mix(in srgb, var(--background-1), var(--card) 46%);
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
}
.cart-page-head { margin-bottom: 22px; }
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
  gap: 18px;
  align-items: start;
}
.cart-main { display: grid; gap: 18px; min-width: 0; }
.cart-items { padding: 0; }
.cart-item {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 22px;
  padding: 22px;
}
.cart-item + .cart-item { border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%); }
.cart-item__image {
  position: relative;
  display: block;
  min-height: 174px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--background-1);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}
.cart-item__image img {
  width: 100%;
  height: 100%;
  min-height: 174px;
  object-fit: cover;
  display: block;
}
.cart-item__content { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.cart-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cart-item__type {
  display: inline-flex;
  width: max-content;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--info), transparent 90%);
  color: var(--info);
  font-size: 12px;
  font-weight: 950;
}
.cart-item h3 { margin: 0; font-size: 19px; line-height: 1.9; font-weight: 950; }
.cart-item h3 a { color: var(--text); }
.cart-item h3 a:hover { color: var(--text-hover); }
.cart-item__meta { display: flex; flex-wrap: wrap; gap: 9px; }
.cart-item__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.cart-item__meta i { display: inline-grid; place-items: center; }
.cart-item__bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cart-item__price { display: flex; align-items: baseline; gap: 7px; color: var(--text); }
.cart-item__price strong { font-size: 23px; font-weight: 950; letter-spacing: -.02em; }
.cart-item__price span { color: var(--muted); font-size: 12px; font-weight: 850; }
.icon-action {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 48%);
  border-radius: 14px;
  background: var(--background-1);
  color: var(--muted);
  cursor: pointer;
  transition: .22s ease;
}
.icon-action:hover { color: var(--error); border-color: color-mix(in srgb, var(--error), transparent 45%); transform: translateY(-2px); }
.payment-card { padding-bottom: 20px; }
.payment-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 22px 0;
}
.payment-method {
  position: relative;
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 128px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 55%);
  border-radius: 18px;
  background: #111619;
  cursor: pointer;
  transition: .22s ease;
}
.payment-method input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.payment-method img {
  width: 100%;
  height: 62px;
  object-fit: contain;
  border-radius: 12px;
  background: transparent;
}
.payment-method span { color: rgba(255,255,255,.82); font-size: 12px; font-weight: 950; text-align: center; }
.payment-method:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--text-hover), transparent 42%); }
.payment-method.is-active {
  border-color: var(--primary-1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-1), transparent 90%);
}
.payment-method.is-active span { color: var(--text); }
.cart-summary { position: sticky; top: 92px; min-width: 0; }
.cart-summary__box { padding-bottom: 22px; }
.summary-lines { display: grid; gap: 14px; padding: 20px 22px 6px; }
.summary-lines div,
.cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.summary-lines span { color: var(--muted); font-size: 13px; font-weight: 850; }
.summary-lines strong { color: var(--text); font-size: 13px; font-weight: 950; }
.coupon-form { padding: 12px 22px 4px; }
.coupon-form .form-control { padding: 0; overflow: hidden; }
.coupon-form input { min-height: 48px; }
.coupon-form button {
  align-self: stretch;
  padding: 0 14px;
  border: 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--border-primary), transparent 60%);
  background: var(--soft);
  color: var(--text-hover);
  font-weight: 950;
  cursor: pointer;
}
.cart-total {
  margin: 16px 22px 0;
  padding: 18px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 60%);
}
.cart-total span { color: var(--muted); font-size: 13px; font-weight: 900; }
.cart-total strong { color: var(--success1); font-size: 25px; font-weight: 950; }
.cart-pay-btn { width: calc(100% - 44px); margin: 18px 22px 0; justify-content: center; }
.cart-note { margin: 16px 22px 0; color: var(--muted); font-size: 12px; line-height: 2; font-weight: 760; }
.commerce-empty {
  min-height: 520px;
  display: grid;
  place-items: center;
}
.commerce-empty[hidden] { display: none !important; }
.commerce-empty__box {
  width: min(760px, 100%);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 18px;
  padding: 40px;
  /* background: var(--card); */
  /* border: 1px solid color-mix(in srgb, var(--border-primary), transparent 55%); */
  border-radius: 28px;
}
.commerce-empty__box img { width: min(360px, 82%); height: auto; opacity: .96; }
.commerce-empty__box h3 { margin: 0; color: var(--text); font-size: 25px; font-weight: 950; }
.commerce-empty__box p { margin: 10px auto 0; max-width: 520px; color: var(--muted); line-height: 2; font-weight: 760; }
.commerce-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
@media (max-width: 1180px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}
@media (max-width: 760px) {
  .cart-item { grid-template-columns: 1fr; padding: 16px; }
  .payment-methods { grid-template-columns: 1fr; padding-inline: 16px; }
  .commerce-card__head { padding: 16px; align-items: flex-start; flex-direction: column; }
  .cart-item__top, .cart-item__bottom { align-items: flex-start; flex-direction: column; }
  .cart-item h3 { font-size: 17px; }
  .cart-total strong { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   Panel support components
   Reusable ticket tabs, status pills, support cards and compact lists
-------------------------------------------------------------------------- */
.tickets-page-head { margin-bottom: 22px; }
.panel-card {
  min-width: 0;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 54%);
  border-radius: 24px;
  box-shadow: 0 18px 45px color-mix(in srgb, var(--elevation), transparent 38%);
  overflow: hidden;
}
.support-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.support-stat-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 56%);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--elevation), transparent 52%);
}
.support-stat-card__icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--soft);
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
}
.support-stat-card__icon.is-blue { color: var(--info); background: color-mix(in srgb, var(--info), transparent 91%); }
.support-stat-card__icon.is-orange { color: var(--warning1); background: color-mix(in srgb, var(--warning1), transparent 91%); }
.support-stat-card__icon.is-green { color: var(--success1); background: color-mix(in srgb, var(--success1), transparent 91%); }
.support-stat-card__icon.is-muted { color: var(--muted); }
.support-stat-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.support-stat-card strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}
.panel-switcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--header--header-background);
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 55%);
}
.panel-switcher__tab {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  transition: var(--speed);
}
.panel-switcher__tab:hover { color: var(--text); background: color-mix(in srgb, var(--card), transparent 30%); }
.panel-switcher__tab.is-active { color: var(--text); border-bottom-color: var(--primary-2); }
.panel-switcher__tab > [data-hugeicon] { width: 24px; height: 24px; display: grid; place-items: center; }
.panel-panels { padding: 18px; min-height: 520px; }
.panel-panel { animation: authFade .22s ease; }
.support-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.support-search {
  min-width: min(100%, 420px);
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: var(--muted);
  background: var(--input);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 48%);
  border-radius: 16px;
  transition: var(--speed);
}
.support-search:focus-within {
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-1), transparent 48%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-1), transparent 92%);
}
.support-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 780;
}
.support-filter-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.support-filter-pill {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  font-size: 12px;
  font-weight: 900;
}
.support-filter-pill.is-active {
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 92%);
  border-color: color-mix(in srgb, var(--primary-1), transparent 72%);
}
.ticket-list { display: grid; gap: 12px; }
.ticket-list--compact { max-width: 980px; margin-inline: auto; }
.ticket-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--background-1), var(--card) 46%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  transition: var(--speed);
}
.ticket-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary-1), transparent 70%);
  box-shadow: 0 15px 35px color-mix(in srgb, var(--elevation), transparent 50%);
}
.ticket-card.is-closed { opacity: .82; }
.ticket-card__main { min-width: 0; }
.ticket-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ticket-id {
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .3px;
}
.status-pill {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 950;
}
.status-pill--warning { color: var(--warning1); background: color-mix(in srgb, var(--warning1), transparent 91%); border-color: color-mix(in srgb, var(--warning1), transparent 75%); }
.status-pill--success { color: var(--success1); background: color-mix(in srgb, var(--success1), transparent 91%); border-color: color-mix(in srgb, var(--success1), transparent 75%); }
.status-pill--info { color: var(--info); background: color-mix(in srgb, var(--info), transparent 91%); border-color: color-mix(in srgb, var(--info), transparent 75%); }
.status-pill--neutral { color: var(--muted); background: var(--soft); border-color: color-mix(in srgb, var(--border-primary), transparent 58%); }
.ticket-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.8;
}
.ticket-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 2;
}
.ticket-meta {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.ticket-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 850;
}
.ticket-meta i,
.ticket-meta [data-hugeicon] { width: 18px; height: 18px; display: inline-grid; place-items: center; color: currentColor; }
.btn--sm { min-height: 40px; padding: 0 14px; border-radius: 13px; font-size: 12px; }
.support-form {
  max-width: 920px;
  margin-inline: auto;
  display: grid;
  gap: 16px;
}
.form-control--select { padding-inline-end: 14px; }
.form-control select {
  width: 100%;
  min-width: 0;
  height: 52px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 780;
  cursor: pointer;
}
.form-control select option { background: var(--background-1); color: var(--text); }
.form-control.is-disabled {
  opacity: .52;
  background: color-mix(in srgb, var(--input), var(--background-1) 34%);
  border-color: color-mix(in srgb, var(--border-primary), transparent 74%);
}
.form-control.is-disabled select {
  cursor: not-allowed;
  color: var(--muted);
}
.inline-select-pair {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 10px;
  align-items: center;
}
.form-field--label-format {
  min-width: 0;
}
@media (max-width: 720px) {
  .inline-select-pair { grid-template-columns: 1fr; }
}
.support-form textarea { min-height: 190px; }
.support-file {
  min-height: 112px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed color-mix(in srgb, var(--border-primary), transparent 42%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--background-1), var(--card) 38%);
  cursor: pointer;
  transition: var(--speed);
}
.support-file input { display: none; }
.support-file:hover { color: var(--text-hover); border-color: color-mix(in srgb, var(--primary-1), transparent 64%); }
.support-file strong { color: var(--text); font-size: 14px; font-weight: 950; }
.support-file small { color: var(--muted-2); font-size: 12px; font-weight: 760; }
.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.inline-toast {
  display: none;
  min-height: 42px;
  align-items: center;
  padding: 9px 13px;
  border-radius: 14px;
  color: var(--success1);
  background: color-mix(in srgb, var(--success1), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--success1), transparent 72%);
  font-size: 12px;
  font-weight: 900;
}
.inline-toast.is-show { display: inline-flex; animation: authFade .18s ease; }
@media (max-width: 1100px) {
  .support-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .support-overview { grid-template-columns: 1fr; }
  .support-toolbar { align-items: stretch; flex-direction: column; }
  .support-search { min-width: 0; width: 100%; }
  .panel-switcher { grid-template-columns: 1fr; }
  .panel-switcher__tab { justify-content: flex-start; min-height: 56px; }
  .panel-panels { min-height: auto; padding: 14px; }
  .ticket-card { grid-template-columns: 1fr; }
  .ticket-card .btn { justify-self: flex-start; }
}


/* --------------------------------------------------------------------------
   Ticket detail page
   Uses reusable panel-card, form-field, form-control, btn and status-pill
-------------------------------------------------------------------------- */
.panel-card__head {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: var(--header--header-background);
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 56%);
}
.panel-card__head h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 950;
}
.panel-card__head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
  font-weight: 780;
}
.panel-card__head [data-hugeicon] {
  color: var(--text-hover);
}
.ticket-detail-page { display: grid; gap: 18px; }
.ticket-detail-head {
  align-items: stretch;
  padding: 22px;
  margin-bottom: 0;
  border-radius: 26px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card), transparent 0%), color-mix(in srgb, var(--card), var(--background-1) 28%));
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 52%);
  box-shadow: 0 18px 45px color-mix(in srgb, var(--elevation), transparent 42%);
}
.ticket-detail-head .section__title { align-items: flex-start; }
.ticket-detail-head .section__title h2 {
  font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1.75;
}
.ticket-detail-head .section__title p { max-width: 760px; }
.ticket-detail-head .panel-kicker {
  display: inline-flex;
  align-items: center;
  height: 29px;
  padding: 0 11px;
  margin-bottom: 7px;
  border-radius: 999px;
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 93%);
  border: 1px solid color-mix(in srgb, var(--primary-1), transparent 78%);
  font-size: 12px;
  font-weight: 950;
}
.ticket-detail-head .dashboard-hero__actions {
  justify-content: flex-end;
  align-content: flex-start;
  min-width: 220px;
}
.ticket-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.ticket-detail-meta span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  font-size: 12px;
  font-weight: 850;
}
.ticket-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 18px;
  align-items: start;
}
.ticket-detail-main {
  min-width: 0;
  display: grid;
  gap: 18px;
}
.ticket-detail-aside {
  position: sticky;
  top: 110px;
  min-width: 0;
  display: grid;
  gap: 18px;
}
.ticket-id {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 11px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}
.conversation-list {
  display: grid;
  gap: 18px;
  padding: 22px;
}
.conversation-message {
  width: min(760px, 88%);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.conversation-message--user,
.conversation-message.is-user {
  justify-self: end;
}
.conversation-message--support,
.conversation-message.is-support {
  justify-self: start;
  direction: ltr;
}
.conversation-message--support .conversation-bubble,
.conversation-message.is-support .conversation-bubble {
  direction: rtl;
  background: color-mix(in srgb, var(--primary-1), transparent 95%);
  border-color: color-mix(in srgb, var(--primary-1), transparent 78%);
}
.conversation-message--support .conversation-avatar,
.conversation-message.is-support .conversation-avatar {
  background: linear-gradient(135deg, var(--primary-1), var(--primary-2));
  font-size: 11px;
}
.conversation-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(135deg, var(--info), var(--success1));
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--elevation), transparent 48%);
}
.conversation-bubble {
  min-width: 0;
  padding: 16px 18px;
  border-radius: 20px;
  color: var(--text);
  background: color-mix(in srgb, var(--background-1), var(--card) 48%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
}
.conversation-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.conversation-meta strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}
.conversation-meta span {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}
.conversation-bubble p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 2.05;
  font-weight: 760;
}
.conversation-attachment {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 7px 10px;
  border-radius: 13px;
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 93%);
  border: 1px solid color-mix(in srgb, var(--primary-1), transparent 78%);
  font-size: 12px;
  font-weight: 900;
}
.ticket-reply-form {
  padding: 22px;
  display: grid;
  gap: 16px;
}
.ticket-reply-form .form-control textarea {
  min-height: 170px;
}
.ticket-reply-tools {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 14px;
  align-items: stretch;
}
.support-file--compact {
  min-height: 86px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  place-items: initial;
  align-content: center;
  text-align: right;
  padding: 14px;
}
.support-file--compact > [data-hugeicon] {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--text-hover);
}
.ticket-reply-submit {
  min-width: 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.ticket-reply-submit small {
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 850;
}
.ticket-info-list {
  display: grid;
  gap: 0;
  padding: 10px 22px 22px;
}
.ticket-info-list div {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 68%);
}
.ticket-info-list div:last-child { border-bottom: 0; }
.ticket-info-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.ticket-info-list strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  text-align: left;
}
.text-warning { color: var(--warning1) !important; }
.clean-list {
  margin: 0;
  padding: 18px 38px 18px 22px;
  color: var(--muted);
  line-height: 2.15;
  font-size: 13px;
  font-weight: 780;
}
.clean-list li::marker { color: var(--text-hover); }
.btn--block {
  width: calc(100% - 44px);
  margin: 0 22px 22px;
  justify-content: center;
}
@media (max-width: 1160px) {
  .ticket-detail-layout { grid-template-columns: 1fr; }
  .ticket-detail-aside {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .ticket-detail-head { padding: 18px; }
  .ticket-detail-head .dashboard-hero__actions { min-width: 0; justify-content: flex-start; }
  .ticket-detail-aside { grid-template-columns: 1fr; }
  .conversation-list,
  .ticket-reply-form { padding: 16px; }
  .conversation-message {
    width: 100%;
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .conversation-avatar {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }
  .conversation-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .ticket-reply-tools { grid-template-columns: 1fr; }
  .ticket-reply-submit {
    min-width: 0;
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
   Data management page
   Clean reusable dataset list, empty covers, add data form and upload fields
-------------------------------------------------------------------------- */
.data-page-head { margin-bottom: 22px; }
.data-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.data-panel-card { overflow: hidden; }
.data-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.data-panels { min-height: 620px; }
.data-toolbar { margin-bottom: 18px; }
.dataset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.dataset-grid--owned { align-items: stretch; }
.dataset-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  border-radius: 22px;
  background: var(--background-1);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 56%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--elevation), transparent 54%);
  transition: var(--speed);
}
.dataset-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary-1), transparent 68%);
}
.dataset-card__cover {
  min-height: 150px;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 60%);
}
.dataset-card__cover--empty {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--background-2), #fff 2%), color-mix(in srgb, var(--card), #000 2%));
}
.dataset-card__cover img { display: none; }
.dataset-card__body {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}
.dataset-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dataset-card__top a {
  color: var(--info);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.8;
}
.dataset-card__top a:hover { color: var(--text-hover); }
.dataset-card__body p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.9;
}
.dataset-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
}
.dataset-card__meta span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  font-size: 11px;
  font-weight: 900;
}
.dataset-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.small-btn--muted {
  color: var(--muted);
  background: transparent;
  border-color: color-mix(in srgb, var(--border-primary), transparent 48%);
}
.small-btn--muted:hover {
  color: var(--text);
  background: var(--soft);
}
.dataset-form-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}
.section__title--small h2 { font-size: 20px; }
.dataset-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: var(--background-1);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 64%);
}
.dataset-stepper span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}
.dataset-stepper span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted), transparent 50%);
}
.dataset-stepper span.is-active {
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 92%);
}
.dataset-stepper span.is-active::before { background: var(--primary-1); }
.dataset-form-section {
  margin-top: 16px;
  padding: 18px;
  border-radius: 22px;
  background: var(--background-1);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
}
.dataset-form-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
}
.dataset-form-section__head > [data-hugeicon] {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--text-hover);
  border-radius: 15px;
  background: color-mix(in srgb, var(--primary-1), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--primary-1), transparent 76%);
}
.dataset-form-section__head strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}
.dataset-form-section__head small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.8;
}
.dataset-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.dataset-type-card {
  min-height: 118px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  cursor: pointer;
  transition: var(--speed);
  position: relative;
  overflow: hidden;
}
.dataset-type-card input { position: absolute; opacity: 0; pointer-events: none; }
.dataset-type-card > [data-hugeicon] {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 60%);
}
.dataset-type-card strong { color: var(--text); font-size: 14px; font-weight: 950; }
.dataset-type-card small { color: var(--muted); font-size: 11px; font-weight: 760; line-height: 1.9; }
.dataset-type-card:hover,
.dataset-type-card.is-active {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary-1), transparent 62%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-1), transparent 95%), var(--card));
}
.dataset-type-card.is-active > [data-hugeicon] {
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 90%);
  border-color: color-mix(in srgb, var(--primary-1), transparent 70%);
}
.dataset-category-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.category-chip {
  min-height: 70px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 10px;
  border-radius: 15px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  cursor: pointer;
  transition: var(--speed);
  position: relative;
}
.category-chip input { position: absolute; opacity: 0; pointer-events: none; }
.category-chip strong { color: var(--text); font-size: 12px; font-weight: 950; }
.category-chip small { color: var(--muted); font-size: 10px; font-weight: 800; }
.category-chip:hover,
.category-chip.is-active {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary-1), transparent 62%);
  background: color-mix(in srgb, var(--primary-1), transparent 94%);
}
.dataset-form-grid,
.dataset-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.form-field--full { grid-column: 1 / -1; }
.file-drop {
  min-height: 138px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--border-primary), transparent 34%);
  border-radius: 18px;
  background: var(--input);
  cursor: pointer;
  transition: var(--speed);
}
.file-drop:hover {
  border-color: color-mix(in srgb, var(--primary-1), transparent 52%);
  background: color-mix(in srgb, var(--primary-1), transparent 96%);
}
.file-drop input { position: absolute; opacity: 0; pointer-events: none; }
.file-drop > [data-hugeicon] {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--text-hover);
  border-radius: 15px;
  background: color-mix(in srgb, var(--primary-1), transparent 92%);
}
.file-drop strong { color: var(--text); font-size: 13px; font-weight: 950; }
.file-drop small { color: var(--muted); font-size: 11px; font-weight: 760; line-height: 1.8; }
.choice-row {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.choice-row label {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border-radius: 15px;
  color: var(--muted);
  background: var(--input);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 55%);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}
.form-actions--end {
  justify-content: flex-end;
  margin-top: 18px;
}
@media (max-width: 1180px) {
  .data-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dataset-grid { grid-template-columns: 1fr; }
  .dataset-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dataset-form-header { grid-template-columns: 1fr; }
  .dataset-stepper { overflow-x: auto; }
}
@media (max-width: 780px) {
  .data-overview,
  .dataset-type-grid,
  .dataset-form-grid,
  .dataset-upload-grid { grid-template-columns: 1fr; }
  .data-tabs { display: flex; overflow-x: auto; }
  .data-tabs .panel-switcher__tab { min-width: 150px; }
  .dataset-card { grid-template-columns: 1fr; }
  .dataset-card__cover { min-height: 170px; }
  .dataset-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dataset-form-section { padding: 14px; }
}

/* --------------------------------------------------------------------------
   Purchased courses page
   Reuses dashboard, panel-card, support toolbar, status-pill and button systems
-------------------------------------------------------------------------- */
.courses-page-head { margin-bottom: 22px; }
.courses-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.courses-panel { overflow: hidden; }
.courses-toolbar {
  padding: 18px;
  margin-bottom: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
}
.course-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}
.course-library-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  border-radius: 22px;
  background: var(--background-1);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 56%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--elevation), transparent 56%);
  transition: var(--speed);
}
.course-library-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary-1), transparent 70%);
}
.course-library-card__cover {
  min-height: 148px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  color: var(--text);
  background:
    radial-gradient(circle at 24% 24%, color-mix(in srgb, var(--primary-2), transparent 74%), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--card), #fff 3%), color-mix(in srgb, var(--background-2), #000 2%));
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
}
.course-library-card__cover::after {
  content: "";
  position: absolute;
  inset: auto -35px -45px auto;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-1), transparent 88%);
}
.course-cover-badge {
  position: relative;
  z-index: 1;
  min-width: 76px;
  min-height: 76px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: var(--text);
  background: color-mix(in srgb, var(--background-1), transparent 6%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 42%);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .3px;
  direction: ltr;
}
.course-library-card__body {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 11px;
}
.course-library-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.course-library-card__top > a {
  min-width: 0;
  color: var(--info);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.75;
}
.course-library-card__top > a:hover { color: var(--text-hover); }
.course-library-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.9;
}
.course-library-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.course-library-meta span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted), transparent 35%);
}
.course-progress {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}
.course-progress__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.course-progress__top strong { color: var(--text); font-size: 12px; }
.course-progress__bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border-primary), transparent 68%);
}
.course-progress__bar i {
  width: var(--progress, 0%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--success1), color-mix(in srgb, var(--success1), var(--info) 30%));
}
.course-library-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.course-library-actions .btn { min-height: 40px; padding-inline: 16px; }
.courses-empty { margin: 18px; }
.support-filter-pill { cursor: pointer; }
button.support-filter-pill { font-family: inherit; }
@media (max-width: 1180px) {
  .course-library-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .courses-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .course-library-card { grid-template-columns: 1fr; }
  .course-library-card__cover { min-height: 160px; }
  .course-library-card__top { flex-direction: column; align-items: flex-start; }
  .courses-overview { grid-template-columns: 1fr; }
  .courses-toolbar { padding: 14px; }
  .course-library-grid { padding: 14px; }
}

/* --------------------------------------------------------------------------
   Home page datasets section fix
   Keeps index.html dataset cards isolated from dashboard data-page cards.
   -------------------------------------------------------------------------- */
#datasets .dataset-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

#datasets .dataset-card {
  position: relative;
  display: block;
  grid-template-columns: none;
  gap: 0;
  min-width: 0;
  min-height: 360px;
  padding: 14px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 40%);
  box-shadow: var(--card-shadow);
  transition: var(--speed);
}

#datasets .dataset-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--primary-1), transparent 72%);
}

#datasets .dataset-cover {
  height: 155px;
  min-height: 155px;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--info), #000 8%), color-mix(in srgb, var(--grey-7), #fff 2%));
  border: 0;
}

#datasets .dataset-cover::before {
  content: attr(data-label);
  position: absolute;
  right: 18px;
  bottom: 13px;
  z-index: 1;
  color: #fff;
  font-size: 32px;
  font-weight: 950;
  letter-spacing: -1px;
  line-height: 1;
  opacity: .96;
  direction: ltr;
}

#datasets .dataset-cover::after {
  content: "";
  position: absolute;
  left: -42px;
  top: -48px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}

#datasets .dataset-body {
  display: block;
  padding: 17px 5px 4px;
}

#datasets .dataset-body h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.75;
  font-weight: 950;
}

#datasets .dataset-body p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
  min-height: 50px;
}

#datasets .dataset-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

#datasets .dataset-price {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#datasets .dataset-price strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
}

@media (max-width: 1100px) {
  #datasets .dataset-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  #datasets .dataset-cards { grid-template-columns: 1fr; }
  #datasets .dataset-card { min-height: auto; }
}

/* ==========================================================================
   Public guest cart page
   ========================================================================== */
.public-cart-page .header { padding-top: 22px; }
.public-cart-page .promo { display: none; }
.public-cart-header__box { min-height: 88px; padding-block: 20px; }
.public-cart-page .circle-btn.is-current {
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--text-hover), transparent 50%);
  background: color-mix(in srgb, var(--text-hover), transparent 92%);
}
.public-cart-section { padding-top: 56px; }
.public-cart-head { margin-bottom: 22px; }
.public-cart-main { min-height: 72vh; }
.guest-cart-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--info), transparent 91%);
  border: 1px solid color-mix(in srgb, var(--info), transparent 78%);
  color: var(--text);
}
.guest-cart-alert > [data-hugeicon] {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  color: var(--info);
  background: color-mix(in srgb, var(--info), transparent 88%);
}
.guest-cart-alert strong { display: block; font-size: 15px; font-weight: 950; }
.guest-cart-alert p { margin: 2px 0 0; color: var(--muted); font-size: 13px; font-weight: 780; line-height: 2; }
.commerce-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
}
.commerce-title .icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--info);
  background: color-mix(in srgb, var(--info), transparent 90%);
  font-size: 22px;
}
.guest-checkout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
}
.public-cart-footer { border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 68%); }
@media (max-width: 760px) {
  .public-cart-section { padding-top: 34px; }
  .public-cart-header__box { min-height: auto; }
  .guest-cart-alert { align-items: flex-start; padding: 14px; }
}


/* --------------------------------------------------------------------------
   Articles listing page
   Public article archive components. Class names are page-scoped to avoid
   conflicts with dashboard cards, course cards and home article previews.
-------------------------------------------------------------------------- */
.articles-page { min-height: 60vh; }
.articles-hero { padding: 54px 0 16px; }
.articles-hero__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .42fr);
  gap: 24px;
  align-items: stretch;
  padding: clamp(24px, 3vw, 38px);
  border-radius: 30px;
  background:
    radial-gradient(620px 260px at 8% 0%, color-mix(in srgb, var(--primary-1), transparent 93%), transparent 65%),
    linear-gradient(135deg, color-mix(in srgb, var(--card), transparent 4%), color-mix(in srgb, var(--background-2), transparent 10%));
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 42%);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  position: relative;
}
.articles-hero__box::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  left: -90px;
  bottom: -110px;
  border-radius: 56px;
  transform: rotate(21deg);
  background: color-mix(in srgb, var(--info), transparent 90%);
  pointer-events: none;
}
.articles-hero__content,
.articles-hero__stats { position: relative; z-index: 1; }
.articles-hero__content h1 {
  max-width: 760px;
  margin: 10px 0 14px;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.45;
  font-weight: 950;
  letter-spacing: -.9px;
}
.articles-hero__content p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 2.25;
  font-weight: 650;
}
.articles-hero__stats {
  display: grid;
  gap: 12px;
  align-content: center;
}
.articles-hero__stats div {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--background-1), transparent 18%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 54%);
}
.articles-hero__stats strong {
  direction: ltr;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
}
.articles-hero__stats span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.articles-list-section { padding-top: 28px; }
.articles-head { gap: 18px; }
.articles-search {
  width: min(380px, 100%);
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--input);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 55%);
  color: var(--muted);
  transition: var(--speed);
}
.articles-search:focus-within {
  border-color: color-mix(in srgb, var(--primary-1), transparent 62%);
  box-shadow: 0 0 0 4px rgba(228,0,43,.055);
}
.articles-search input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}
.article-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: -8px 0 20px;
}
.article-filter {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  border-radius: 999px;
  padding: 0 15px;
  color: var(--muted);
  background: var(--soft);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  text-align: center;
  transition: var(--speed);
}
.article-filter:hover,
.article-filter.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--primary-1), transparent 91%);
  border-color: color-mix(in srgb, var(--primary-1), transparent 68%);
}
.articles-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 318px;
  gap: 22px;
  align-items: start;
}
.articles-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.article-list-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 44%);
  border-radius: 24px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: var(--speed);
}
.article-list-card:hover { transform: translateY(-4px); }
.article-list-card[hidden] { display: none; }
.article-list-card__cover {
  min-height: 174px;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--info), #000 8%), color-mix(in srgb, var(--grey-7), #fff 2%));
  position: relative;
  overflow: hidden;
}
.article-list-card__cover::before,
.article-list-card__cover::after {
  content: "";
  position: absolute;
  border-radius: 34px;
  background: rgba(255,255,255,.12);
  transform: rotate(18deg);
}
.article-list-card__cover::before { width: 170px; height: 170px; right: -62px; top: -66px; }
.article-list-card__cover::after { width: 110px; height: 110px; left: 24px; bottom: -54px; }
.article-list-card__cover span {
  position: relative;
  z-index: 1;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 10px;
  color: #fff;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(7px);
  font-size: 12px;
  font-weight: 950;
}
.article-list-card__cover--orange { background: linear-gradient(135deg, #E4002B, #FF9900); }
.article-list-card__cover--blue { background: linear-gradient(135deg, #292C2D, #3D85B7); }
.article-list-card__cover--green { background: linear-gradient(135deg, #0FA862, #3D85B7); }
.article-list-card__cover--dark { background: linear-gradient(135deg, #1D1F20, #4B4B55); }
.article-list-card__cover--purple { background: linear-gradient(135deg, #5B4B8A, #E4002B); }
.article-list-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 18px 16px;
}
.article-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--muted);
}
.article-card-meta span {
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
  font-size: 11px;
  font-weight: 950;
}
.article-card-meta i {
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}
.article-list-card h3 {
  margin: 0 0 9px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.75;
  font-weight: 950;
}
.article-list-card h3 a { transition: var(--speed); }
.article-list-card:hover h3 a { color: var(--text-hover); }
.article-list-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 2;
  font-weight: 650;
}
.article-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.article-card-footer a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--text);
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 56%);
  transition: var(--speed);
  white-space: nowrap;
}
.article-card-footer a:hover {
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-1), transparent 52%);
}
.articles-sidebar {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 96px;
}
.articles-side-card {
  padding: 18px;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 48%);
  box-shadow: var(--card-shadow);
}
.articles-side-card h3 {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
}
.articles-side-card > a {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  color: var(--muted);
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
  font-size: 13px;
  font-weight: 850;
  transition: var(--speed);
}
.articles-side-card > a:first-of-type { border-top: 0; }
.articles-side-card > a:hover { color: var(--text-hover); }
.articles-side-card b {
  min-width: 28px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
}
.mini-article {
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}
.mini-article:first-of-type { border-top: 0; padding-top: 0; }
.mini-article strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.9;
  font-weight: 900;
}
.mini-article span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.article-empty { margin-top: 18px; }
@media (max-width: 1080px) {
  .articles-hero__box,
  .articles-layout { grid-template-columns: 1fr; }
  .articles-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .articles-hero { padding: 32px 0 8px; }
  .articles-hero__box { padding: 22px; border-radius: 24px; }
  .articles-hero__content h1 { font-size: 30px; }
  .articles-head { align-items: stretch; }
  .articles-search { width: 100%; }
  .articles-list-grid,
  .articles-sidebar { grid-template-columns: 1fr; }
  .article-list-card__cover { min-height: 150px; }
}



/* ------------------------------------------------------------
   Generic catalog/list page header
   Shared between articles and public course listing pages.
------------------------------------------------------------ */
.catalog-head {
  gap: 18px;
  align-items: center;
}
.catalog-head .section__title h1,
.catalog-head .section__title h2 {
  margin: 0;
  color: var(--text);
  font-size: 30px;
  line-height: 1.5;
  font-weight: 950;
}
.catalog-search {
  width: min(420px, 100%);
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 48%);
  background: color-mix(in srgb, var(--card), var(--background-1) 22%);
  color: var(--muted);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.catalog-search:focus-within {
  border-color: color-mix(in srgb, var(--primary-2), transparent 26%);
  box-shadow: 0 0 0 4px rgba(var(--c-primary2), .09);
}
.catalog-search input {
  border: 0;
  outline: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.catalog-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 22px;
}
.catalog-filter {
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 52%);
  background: color-mix(in srgb, var(--card), var(--background-1) 28%);
  color: var(--muted);
  border-radius: 999px;
  min-height: 40px;
  padding: 0 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
}
.catalog-filter:hover,
.catalog-filter.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary-2), transparent 28%);
  background: color-mix(in srgb, var(--primary-1), transparent 88%);
}

/* ------------------------------------------------------------
   Public training courses page
   Namespaced styles to avoid conflicts with dashboard courses.
------------------------------------------------------------ */
.training-courses-page { min-height: 60vh; }
.training-courses-section { padding-top: 46px; }
.training-courses-head { gap: 18px; align-items: flex-start; }
.training-courses-head .section__title h1 { margin: 0; font-size: 30px; line-height: 1.5; font-weight: 950; color: var(--text); }
.training-course-search {
  width: min(420px, 100%);
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 48%);
  background: color-mix(in srgb, var(--card), var(--background-1) 22%);
  color: var(--muted);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.training-course-search:focus-within {
  border-color: color-mix(in srgb, var(--primary-2), transparent 26%);
  box-shadow: 0 0 0 4px rgba(var(--c-primary2), .09);
}
.training-course-search input {
  border: 0;
  outline: 0;
  width: 100%;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.training-course-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 22px;
}
.training-course-filter,
.training-side-card button {
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 52%);
  background: color-mix(in srgb, var(--card), var(--background-1) 28%);
  color: var(--muted);
  border-radius: 999px;
  min-height: 40px;
  padding: 0 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}
.training-course-filter:hover,
.training-side-card button:hover,
.training-course-filter.is-active,
.training-side-card button.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary-2), transparent 28%);
  background: color-mix(in srgb, var(--primary-1), transparent 88%);
}
.training-courses-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}
.training-courses-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.training-course-card {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  min-height: 218px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  background: color-mix(in srgb, var(--card), var(--background-1) 16%);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--elevation), transparent 54%);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.training-course-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary-2), transparent 50%);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--elevation), transparent 42%);
}
.training-course-card__cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 18px;
  min-height: 100%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.20), transparent 32%),
    linear-gradient(135deg, var(--primary-1), #292C2D 78%);
  color: #fff;
  overflow: hidden;
}
.training-course-card__cover::after {
  content: '';
  position: absolute;
  inset: auto -28px -34px auto;
  width: 124px;
  height: 124px;
  border-radius: 42px;
  border: 1px solid rgba(255,255,255,.24);
  transform: rotate(18deg);
}
.training-course-card__cover span {
  position: relative;
  z-index: 1;
  direction: ltr;
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;
}
.training-course-card__cover--blue { background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 32%), linear-gradient(135deg, #3D85B7, #253444 78%); }
.training-course-card__cover--orange { background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 32%), linear-gradient(135deg, #FF9900, #483322 78%); }
.training-course-card__cover--dark { background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 32%), linear-gradient(135deg, #292C2D, #111 78%); }
.training-course-card__cover--green { background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.20), transparent 32%), linear-gradient(135deg, #0FA862, #1f3930 78%); }
.training-course-card__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.training-course-card__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.training-course-card__badges span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--background-2), transparent 8%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.training-course-card h2 { margin: 0; font-size: 21px; line-height: 1.7; font-weight: 950; }
.training-course-card h2 a { color: var(--text); }
.training-course-card h2 a:hover { color: var(--text-hover); }
.training-course-card p { margin: 0; color: var(--muted); line-height: 1.9; font-size: 13px; }
.training-course-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; }
.training-course-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  background: color-mix(in srgb, var(--background-2), transparent 4%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 65%);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 750;
}
.training-course-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}
.training-course-card__footer strong { color: var(--text); font-size: 16px; font-weight: 950; white-space: nowrap; }
.training-course-card__footer > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.training-course-card__footer .btn { min-height: 40px; padding-inline: 14px; }
.training-courses-sidebar { position: sticky; top: 94px; display: grid; gap: 14px; }
.training-side-card {
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  background: color-mix(in srgb, var(--card), var(--background-1) 14%);
  padding: 20px;
  box-shadow: 0 14px 42px color-mix(in srgb, var(--elevation), transparent 60%);
}
.training-side-card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 950; color: var(--text); }
.training-side-card p { margin: 0 0 16px; color: var(--muted); line-height: 1.9; font-size: 13px; }
.training-side-card button { width: 100%; justify-content: center; margin-top: 8px; border-radius: 14px; }
.public-course-empty { margin-top: 18px; }
@media (max-width: 1100px) {
  .training-courses-layout { grid-template-columns: 1fr; }
  .training-courses-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .training-courses-section { padding-top: 30px; }
  .training-courses-head { align-items: stretch; }
  .training-course-search { width: 100%; }
  .training-course-card { grid-template-columns: 1fr; }
  .training-course-card__cover { min-height: 158px; }
  .training-course-card__footer { align-items: stretch; flex-direction: column; }
  .training-course-card__footer > div { justify-content: stretch; }
  .training-course-card__footer .btn { flex: 1; }
  .training-courses-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .catalog-head { align-items: stretch; }
  .catalog-search { width: 100%; }
}




/* ------------------------------------------------------------
   Article detail page
   Reading layout, article content and reusable comment block.
------------------------------------------------------------ */
.article-detail-page { min-height: 70vh; }
.article-detail-section { padding: 46px 0 76px; }
.article-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.article-detail-main { min-width: 0; display: grid; gap: 18px; }
.article-detail-header,
.article-content-card,
.article-featured-card,
.article-side-card {
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 56%);
  background: color-mix(in srgb, var(--card), var(--background-1) 15%);
  box-shadow: 0 18px 58px color-mix(in srgb, var(--elevation), transparent 58%);
}
.article-detail-header { padding: clamp(22px, 3vw, 34px); overflow: hidden; position: relative; }
.article-detail-header::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  left: -118px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--c-primary2), .14), transparent 66%);
  pointer-events: none;
}
.breadcrumb,
.article-detail-meta,
.article-detail-author { position: relative; z-index: 1; }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}
.breadcrumb a { color: var(--muted); transition: var(--speed); }
.breadcrumb a:hover { color: var(--text-hover); }
.breadcrumb b { color: var(--text); font-weight: 900; }
.article-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 18px;
}
.article-detail-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
  font-size: 12px;
  font-weight: 850;
}
.article-detail-header h1 {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 0 16px;
  color: var(--text);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.45;
  font-weight: 950;
  letter-spacing: -.5px;
}
.article-detail-lead {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 2.15;
  font-weight: 680;
}
.article-detail-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}
.article-detail-author__avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--primary-2);
  background: color-mix(in srgb, var(--primary-1), transparent 84%);
  font-weight: 950;
}
.article-detail-author strong { display: block; color: var(--text); font-weight: 950; }
.article-detail-author small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 760; }
.article-featured-card { margin: 0; overflow: hidden; }
.article-featured-card__art {
  min-height: 280px;
  display: grid;
  place-items: center;
  color: rgba(var(--c-white), .88);
  background:
    radial-gradient(circle at 18% 12%, rgba(var(--c-primary2), .22), transparent 32%),
    radial-gradient(circle at 80% 86%, rgba(var(--c-info), .20), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--info), #000 22%), color-mix(in srgb, var(--grey-7), #000 18%));
}
.article-featured-card figcaption {
  margin: 0;
  padding: 12px 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%);
}
.article-content-card { padding: clamp(22px, 3vw, 34px); }
.article-rich-text {
  color: var(--muted);
  font-size: 15px;
  line-height: 2.25;
  font-weight: 650;
}
.article-rich-text h2 {
  margin: 32px 0 12px;
  color: var(--text);
  font-size: 24px;
  line-height: 1.7;
  font-weight: 950;
}
.article-rich-text h2:first-child { margin-top: 0; }
.article-rich-text p { margin: 0 0 16px; }
.article-rich-text ul { margin: 0 0 18px; padding: 0 22px 0 0; }
.article-rich-text li { margin: 8px 0; }
.article-rich-text blockquote {
  margin: 22px 0;
  padding: 18px 20px;
  border-radius: 18px;
  color: var(--text);
  background: color-mix(in srgb, var(--primary-1), transparent 93%);
  border: 1px solid color-mix(in srgb, var(--primary-1), transparent 72%);
  font-weight: 850;
}
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}
.article-tags span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
  font-size: 12px;
  font-weight: 850;
}
.article-detail-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
}
.article-side-card { padding: 18px; }
.article-side-card h3 {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
}
.article-toc-card a,
.related-article {
  min-height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 0;
  color: var(--muted);
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
  font-size: 13px;
  font-weight: 850;
  transition: var(--speed);
}
.article-toc-card a:first-of-type,
.related-article:first-of-type { border-top: 0; }
.article-toc-card a:hover,
.related-article:hover { color: var(--text-hover); }
.related-article strong { color: inherit; line-height: 1.8; font-size: 13px; }
.related-article span { color: var(--muted); font-size: 11px; font-weight: 780; }
.article-share-row { display: grid; gap: 10px; }
.article-share-row button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  color: var(--text);
  background: var(--soft);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 880;
  transition: var(--speed);
}
.article-share-row button:hover {
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-1), transparent 58%);
}
@media (max-width: 1080px) {
  .article-detail-layout { grid-template-columns: 1fr; }
  .article-detail-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-toc-card { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .article-detail-section { padding: 30px 0 58px; }
  .article-detail-header,
  .article-content-card,
  .article-side-card { border-radius: 22px; }
  .article-featured-card__art { min-height: 210px; }
  .article-detail-sidebar { grid-template-columns: 1fr; }
  .article-rich-text { font-size: 14px; }
  .article-rich-text h2 { font-size: 20px; }
}


/* ------------------------------------------------------------
   Public course detail and lesson pages
   Shared layout for course landing, lesson player and comments.
------------------------------------------------------------ */
.course-detail-page,
.lesson-detail-page {
  min-height: 70vh;
}
.course-detail-section,
.lesson-detail-section {
  padding: 46px 0 74px;
}
.course-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 26px;
  align-items: start;
}
.course-detail-main,
.lesson-main {
  display: grid;
  gap: 18px;
}
.course-title-card,
.course-panel,
.course-purchase-card,
.lesson-panel,
.comments-panel {
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 56%);
  background: color-mix(in srgb, var(--card), var(--background-1) 15%);
  box-shadow: 0 18px 58px color-mix(in srgb, var(--elevation), transparent 58%);
}
.course-title-card {
  padding: 30px;
  position: relative;
  overflow: hidden;
}
.course-title-card::before {
  content: '';
  position: absolute;
  inset: -70px auto auto -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--c-primary2), .16), transparent 64%);
  pointer-events: none;
}
.course-title-card__badges,
.course-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.course-title-card__badges span,
.course-detail-badges span,
.lesson-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  background: color-mix(in srgb, var(--background-2), transparent 8%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.course-title-card h1 {
  margin: 0 0 14px;
  color: var(--text);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.45;
  font-weight: 950;
  letter-spacing: -.4px;
}
.course-title-card p {
  margin: 0;
  color: var(--muted);
  max-width: 780px;
  line-height: 2.05;
  font-size: 15px;
}
.course-title-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.course-title-card__meta span,
.lesson-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 65%);
  background: color-mix(in srgb, var(--background-2), transparent 4%);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 760;
}
.course-panel,
.lesson-panel,
.comments-panel {
  padding: 24px;
}
.course-panel__head,
.lesson-panel__head,
.comments-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%);
}
.course-panel__head h2,
.lesson-panel__head h2,
.comments-panel__head h2 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  line-height: 1.6;
  font-weight: 950;
}
.course-panel__head span,
.lesson-panel__head span,
.comments-panel__head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}
.course-rich-text {
  color: var(--muted);
  line-height: 2.1;
  font-size: 14px;
}
.course-rich-text p { margin: 0 0 14px; }
.course-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.course-benefit {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--background-2), transparent 7%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%);
}
.course-benefit [data-hugeicon] {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--primary-2);
  background: color-mix(in srgb, var(--primary-1), transparent 88%);
}
.course-benefit strong {
  display: block;
  color: var(--text);
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 900;
}
.course-benefit span {
  color: var(--muted);
  line-height: 1.9;
  font-size: 12px;
}
.course-curriculum {
  display: grid;
  gap: 10px;
}
.course-curriculum details {
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 64%);
  background: color-mix(in srgb, var(--background-2), transparent 8%);
  overflow: hidden;
}
.course-curriculum summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px;
  color: var(--text);
  font-weight: 900;
}
.course-curriculum summary::-webkit-details-marker { display: none; }
.course-curriculum summary i {
  font-style: normal;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}
.lesson-list {
  display: grid;
  gap: 8px;
  padding: 0 16px 16px;
}
.lesson-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 14px;
  color: var(--muted);
  background: color-mix(in srgb, var(--card), transparent 26%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 76%);
  font-size: 13px;
  transition: .2s ease;
}
.lesson-row:hover,
.lesson-row.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary-2), transparent 45%);
  background: color-mix(in srgb, var(--primary-1), transparent 90%);
}
.lesson-row__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lesson-row__title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 850;
}
.lesson-row__time {
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}
.course-detail-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
}
.course-purchase-card {
  overflow: hidden;
}
.course-purchase-card__cover {
  height: 192px;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.22), transparent 32%),
    linear-gradient(135deg, #0FA862, #1f3930 76%);
  color: #fff;
}
.course-purchase-card__cover strong {
  display: inline-flex;
  direction: ltr;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(10px);
}
.course-purchase-card__body {
  padding: 20px;
}
.course-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.course-price-row del {
  color: var(--muted);
  font-weight: 800;
}
.course-price-row strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
}
.course-purchase-card .btn { width: 100%; justify-content: center; }
.course-side-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  padding-right: 0;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%);
}
.course-side-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}
.course-side-list strong { color: var(--text); font-weight: 850; }
.course-instructor-card {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  background: color-mix(in srgb, var(--card), var(--background-1) 14%);
}
.course-instructor-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.course-instructor-card__avatar,
.comment__avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-1), transparent 82%);
  color: var(--primary-2);
  font-weight: 950;
}
.course-instructor-card strong { color: var(--text); font-weight: 950; }
.course-instructor-card p { margin: 0; color: var(--muted); line-height: 1.9; font-size: 13px; }
.comments-list {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}
.comment {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%);
  background: color-mix(in srgb, var(--background-2), transparent 8%);
}
.comment__body {
  min-width: 0;
  flex: 1;
}
.comment__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}
.comment__top strong { color: var(--text); font-size: 14px; font-weight: 900; }
.comment__top span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.comment p { margin: 0; color: var(--muted); line-height: 1.95; font-size: 13px; }
.comment-form {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}
.comment-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.comment--support .comment__avatar {
  background: color-mix(in srgb, var(--info), transparent 84%);
  color: var(--info);
}
.comment__actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
}
.comment__reply {
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--background-2), transparent 12%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  transition: var(--speed);
}
.comment__reply:hover {
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-1), transparent 52%);
  background: color-mix(in srgb, var(--primary-1), transparent 92%);
}
.comment-replies {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-inline-start: 20px;
  border-inline-start: 2px solid color-mix(in srgb, var(--border-primary), transparent 62%);
}
.comment.comment--reply {
  border-radius: 16px;
  background: color-mix(in srgb, var(--card), transparent 12%);
  padding: 14px;
}
.comment-reply-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--muted);
  background: color-mix(in srgb, var(--primary-1), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--primary-1), transparent 72%);
  font-size: 12px;
  font-weight: 820;
}
.comment-reply-target[hidden] { display: none; }
.comment-reply-target strong { color: var(--text); }
.comment-reply-target button {
  border: 0;
  background: transparent;
  color: var(--text-hover);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}
.comment-form .form-control {
  min-height: 150px;
  align-items: flex-start;
  padding-block: 0;
}
.comment-form .form-control textarea {
  min-height: 132px;
  resize: vertical;
}
.comment-form__actions small {
  color: var(--success1);
  font-size: 12px;
  font-weight: 850;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

.lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  align-items: start;
}

.lesson-watch-card {
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 56%);
  background: color-mix(in srgb, var(--card), var(--background-1) 13%);
  box-shadow: 0 18px 58px color-mix(in srgb, var(--elevation), transparent 58%);
}
.video-shell {
  padding: 18px 18px 0;
}
.video-placeholder {
  min-height: clamp(280px, 42vw, 530px);
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--text), transparent 18%);
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--primary-1), transparent 82%), transparent 31%),
    linear-gradient(135deg, color-mix(in srgb, var(--background-1), #000 14%), color-mix(in srgb, var(--background-2), #000 26%));
  position: relative;
  overflow: hidden;
}
.video-placeholder::before,
.video-placeholder::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.video-placeholder::before {
  width: 260px;
  height: 260px;
  border: 1px solid color-mix(in srgb, var(--primary-2), transparent 68%);
  opacity: .32;
}
.video-placeholder::after {
  width: 82px;
  height: 82px;
  background: color-mix(in srgb, var(--primary-1), transparent 86%);
  filter: blur(18px);
}
.video-placeholder > span {
  position: relative;
  z-index: 1;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  background: color-mix(in srgb, var(--background-2), transparent 8%);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--elevation), transparent 25%);
}
.watch-content {
  padding: 22px 24px 24px;
}
.watch-title {
  margin: 0 0 14px;
  color: var(--text);
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.55;
  font-weight: 950;
}
.watch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 15px;
}
.watch-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 65%);
  background: color-mix(in srgb, var(--background-2), transparent 4%);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 760;
}
.watch-note {
  color: var(--muted);
  line-height: 2.05;
  font-size: 14px;
  padding: 15px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--background-2), transparent 8%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}
.watch-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.lesson-player-card {
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 56%);
  background: color-mix(in srgb, var(--black-1), transparent 20%);
  box-shadow: 0 18px 58px color-mix(in srgb, var(--elevation), transparent 58%);
}
.lesson-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #111;
}
.lesson-body-card {
  padding: 22px 24px;
}
.lesson-body-card h1 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.55;
  font-weight: 950;
}
.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 16px;
}
.lesson-body-card p {
  margin: 0;
  color: var(--muted);
  line-height: 2.05;
  font-size: 14px;
}
.lesson-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
}
.lesson-sidebar .course-curriculum { gap: 8px; }
.lesson-note {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  background: color-mix(in srgb, var(--card), var(--background-1) 16%);
  color: var(--muted);
  line-height: 1.9;
  font-size: 13px;
}
.lesson-note strong { display: block; color: var(--text); margin-bottom: 8px; font-size: 15px; }
@media (max-width: 1080px) {
  .course-detail-grid,
  .lesson-layout { grid-template-columns: 1fr; }
  .course-detail-sidebar,
  .lesson-sidebar { position: static; }
}
@media (max-width: 760px) {
  .course-detail-section,
  .lesson-detail-section { padding-top: 30px; }
  .course-title-card,
  .course-panel,
  .lesson-panel,
  .comments-panel { padding: 20px; border-radius: 22px; }
  .course-benefits-grid { grid-template-columns: 1fr; }
  .course-panel__head,
  .lesson-panel__head,
  .comments-panel__head,
  .comment__top { align-items: flex-start; flex-direction: column; }
  .course-title-card__meta span,
  .lesson-meta span { width: 100%; justify-content: flex-start; }
  .lesson-row { align-items: flex-start; flex-direction: column; padding: 12px; }

  .watch-nav { align-items: stretch; flex-direction: column; }
  .watch-nav .btn { width: 100%; justify-content: center; }
  .video-shell { padding: 12px 12px 0; }
  .watch-content { padding: 18px; }
  .comment-replies { padding-inline-start: 12px; }

  .course-price-row { align-items: flex-start; flex-direction: column; }
}




/* ------------------------------------------------------------
   Public dataset detail page
   Uses shared panel, button, form and comment components.
------------------------------------------------------------ */
.dataset-detail-page { min-height: 70vh; }
.dataset-detail-section { padding: 46px 0 74px; }
.dataset-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: 26px;
  align-items: start;
  margin-bottom: 26px;
}
.dataset-detail-summary,
.dataset-gallery,
.dataset-detail-aside .course-panel {
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 56%);
  background: color-mix(in srgb, var(--card), var(--background-1) 15%);
  box-shadow: 0 18px 58px color-mix(in srgb, var(--elevation), transparent 58%);
}
.dataset-detail-summary {
  padding: 30px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dataset-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.dataset-detail-badges span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  background: color-mix(in srgb, var(--background-2), transparent 8%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 64%);
}
.dataset-detail-summary h1 {
  margin: 0 0 14px;
  color: var(--text);
  font-size: clamp(28px, 4vw, 43px);
  line-height: 1.45;
  font-weight: 950;
  letter-spacing: -.35px;
}
.dataset-detail-summary p {
  margin: 0;
  color: var(--muted);
  line-height: 2.05;
  font-size: 14px;
}
.dataset-detail-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}
.dataset-detail-price-row strong {
  color: var(--text);
  font-size: 24px;
  font-weight: 950;
}
.dataset-detail-price-row span {
  color: var(--success1);
  font-size: 12px;
  font-weight: 900;
}
.dataset-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.dataset-detail-actions .btn { min-height: 44px; }
.dataset-gallery {
  padding: 16px;
  overflow: hidden;
}
.dataset-gallery__main {
  margin: 0;
  min-height: clamp(280px, 36vw, 500px);
  border-radius: 22px;
  overflow: hidden;
  background: color-mix(in srgb, var(--black-1), transparent 8%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
}
.dataset-gallery__main img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
}
.dataset-gallery__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.dataset-gallery__thumbs::-webkit-scrollbar { display: none; }
.dataset-gallery__thumbs button {
  width: 72px;
  height: 58px;
  flex: 0 0 72px;
  padding: 3px;
  cursor: pointer;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  background: color-mix(in srgb, var(--background-2), transparent 8%);
  transition: .2s ease;
}
.dataset-gallery__thumbs button.is-active,
.dataset-gallery__thumbs button:hover {
  border-color: color-mix(in srgb, var(--primary-2), transparent 34%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-1), transparent 84%);
}
.dataset-gallery__thumbs img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 11px;
}
.dataset-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 322px;
  gap: 24px;
  align-items: start;
}
.dataset-detail-main,
.dataset-detail-aside {
  display: grid;
  gap: 18px;
}
.dataset-detail-aside {
  position: sticky;
  top: 96px;
}
.dataset-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.dataset-spec-grid > div {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 14px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--background-2), transparent 8%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%);
}
.dataset-spec-grid span,
.dataset-side-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}
.dataset-spec-grid strong,
.dataset-side-list strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.8;
}
.dataset-file-list {
  display: grid;
  gap: 10px;
}
.dataset-file-list > div {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--background-2), transparent 8%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}
.dataset-file-list > div > span {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  border-radius: 14px;
  color: var(--primary-2);
  background: color-mix(in srgb, var(--primary-1), transparent 90%);
}
.dataset-file-list strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 4px;
}
.dataset-file-list small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}


.dataset-download-stack {
  display: grid;
  gap: 14px;
}
.dataset-report-box {
  background: color-mix(in srgb, var(--card), transparent 14%);
}
.dataset-report-box .dataset-download-box__icon {
  color: var(--info);
  background: color-mix(in srgb, var(--info), transparent 88%);
  border-color: color-mix(in srgb, var(--info), transparent 72%);
}

.dataset-download-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--background-2), transparent 8%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%);
}
.dataset-download-box__icon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: var(--success1);
  background: color-mix(in srgb, var(--success1), transparent 88%);
  border: 1px solid color-mix(in srgb, var(--success1), transparent 70%);
}
.dataset-download-box__content strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  margin-bottom: 6px;
}
.dataset-download-box__content p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.95;
}
.dataset-download-box__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}
.dataset-download-box__meta span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--card), transparent 10%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 76%);
  font-size: 11px;
  font-weight: 800;
}
.dataset-download-box__actions {
  display: grid;
  gap: 8px;
  min-width: 160px;
}
.dataset-download-box__actions .btn {
  width: 100%;
  min-height: 40px;
  justify-content: center;
}
.dataset-side-list {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.dataset-side-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 76%);
}
.dataset-side-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.dataset-side-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.95;
  font-size: 13px;
}
.dataset-side-card .btn { width: 100%; justify-content: center; margin-top: 4px; }
@media (max-width: 1100px) {
  .dataset-detail-hero,
  .dataset-detail-grid { grid-template-columns: 1fr; }
  .dataset-detail-aside { position: static; }
}
@media (max-width: 760px) {
  .dataset-detail-section { padding: 30px 0 58px; }
  .dataset-detail-summary,
  .dataset-gallery { border-radius: 22px; }
  .dataset-detail-summary { padding: 22px; }
  .dataset-detail-price-row { align-items: flex-start; flex-direction: column; }
  .dataset-detail-actions { flex-direction: column; }
  .dataset-detail-actions .btn { width: 100%; justify-content: center; }
  .dataset-gallery { padding: 12px; }
  .dataset-gallery__main { min-height: 250px; border-radius: 18px; }
  .dataset-spec-grid { grid-template-columns: 1fr; }
  .dataset-download-box { grid-template-columns: 1fr; align-items: stretch; }
  .dataset-download-box__icon { width: 48px; height: 48px; }
  .dataset-download-box__actions { min-width: 0; }
}

/* ------------------------------------------------------------
   Public datasets listing page
   Reusable catalog header is shared with articles and courses.
------------------------------------------------------------ */
.public-datasets-page { min-height: 70vh; }
.public-datasets-section { padding-top: 46px; }
.public-datasets-head { align-items: flex-start; }
.public-datasets-layout {
  display: grid;
  grid-template-columns: 282px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.public-datasets-sidebar {
  position: sticky;
  top: 94px;
  display: grid;
  gap: 14px;
}
.dataset-filter-panel,
.dataset-guide-card {
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  background: color-mix(in srgb, var(--card), var(--background-1) 14%);
  box-shadow: 0 14px 42px color-mix(in srgb, var(--elevation), transparent 62%);
}
.dataset-filter-panel { padding: 18px; }
.dataset-filter-panel__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  color: var(--text);
}
.dataset-filter-panel__head strong { font-size: 16px; font-weight: 950; }
.dataset-filter-panel p,
.dataset-guide-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
  font-size: 12px;
}
.dataset-filter-panel__list { display: grid; gap: 9px; margin-top: 16px; }
.dataset-filter-panel__list button {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: flex-start;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  border-radius: 14px;
  padding: 0 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--background-2), transparent 8%);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}
.dataset-filter-panel__list button:hover,
.dataset-filter-panel__list button.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary-2), transparent 35%);
  background: color-mix(in srgb, var(--primary-1), transparent 90%);
}
.dataset-guide-card {
  display: flex;
  gap: 12px;
  padding: 18px;
  align-items: flex-start;
}
.dataset-guide-card > [data-hugeicon] {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 90%);
}
.dataset-guide-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.8;
}
.public-datasets-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.public-dataset-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  background: color-mix(in srgb, var(--card), var(--background-1) 15%);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--elevation), transparent 58%);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.public-dataset-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary-2), transparent 52%);
  box-shadow: 0 20px 58px color-mix(in srgb, var(--elevation), transparent 46%);
}
.public-dataset-card__cover {
  position: relative;
  min-height: 254px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg, #232c36, var(--primary-1) 95%);
}
.public-dataset-card__cover::before {
  content: '';
  position: absolute;
  inset: auto -40px -54px auto;
  width: 150px;
  height: 150px;
  border-radius: 48px;
  border: 1px solid rgba(255,255,255,.18);
  transform: rotate(20deg);
}
.public-dataset-card__cover::after {
  content: '';
  position: absolute;
  inset: -60px auto auto -66px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.public-dataset-card__cover strong {
  position: relative;
  z-index: 1;
  direction: ltr;
  align-self: flex-start;
  margin-top: auto;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -.5px;
  color: rgba(255,255,255,.94);
}
.dataset-type-badge {
  position: relative;
  z-index: 1;
  width: max-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 900;
}
.public-dataset-card__cover--blue { background: radial-gradient(circle at 18% 18%, rgba(255,255,255,.20), transparent 30%), linear-gradient(135deg, #203544, #3D85B7 92%); }
.public-dataset-card__cover--green { background: radial-gradient(circle at 18% 18%, rgba(255,255,255,.20), transparent 30%), linear-gradient(135deg, #133b2a, #0FA862 92%); }
.public-dataset-card__cover--purple { background: radial-gradient(circle at 18% 18%, rgba(255,255,255,.20), transparent 30%), linear-gradient(135deg, #272135, #6b5bd6 92%); }
.public-dataset-card__cover--orange { background: radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 30%), linear-gradient(135deg, #3b2c1b, #FF9900 92%); }
.public-dataset-card__cover--dark { background: radial-gradient(circle at 18% 18%, rgba(255,255,255,.16), transparent 30%), linear-gradient(135deg, #111, #292C2D 92%); }
.public-dataset-card__body {
  display: grid;
  gap: 12px;
  padding: 18px;
}
.public-dataset-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.public-dataset-card__top > span {
  direction: ltr;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.public-dataset-card__top button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  color: var(--muted);
  background: color-mix(in srgb, var(--background-2), transparent 6%);
  cursor: pointer;
}
.public-dataset-card__top button:hover {
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-1), transparent 45%);
  background: color-mix(in srgb, var(--primary-1), transparent 88%);
}
.public-dataset-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.public-dataset-bookmark[aria-pressed="true"] {
  color: var(--primary-1);
  border-color: color-mix(in srgb, var(--primary-1), transparent 48%);
  background: color-mix(in srgb, var(--primary-1), transparent 86%);
}
.public-dataset-bookmark[aria-pressed="true"] svg {
  fill: color-mix(in srgb, var(--primary-1), transparent 84%);
}
.public-dataset-card h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.75;
  font-weight: 950;
}
.public-dataset-card h2 a { color: var(--text); }
.public-dataset-card h2 a:hover { color: var(--text-hover); }
.public-dataset-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}
.dataset-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dataset-specs span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--background-2), transparent 7%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.public-dataset-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}
.public-dataset-card__footer strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
}
.public-dataset-card__footer .btn { min-height: 40px; padding-inline: 14px; }
.public-dataset-empty { grid-column: 1 / -1; margin: 0; }
@media (max-width: 1120px) {
  .public-datasets-layout { grid-template-columns: 1fr; }
  .public-datasets-sidebar { position: static; grid-template-columns: 1fr 1fr; order: -1; }
}
@media (max-width: 760px) {
  .public-datasets-section { padding-top: 30px; }
  .public-datasets-head { align-items: stretch; }
  .public-dataset-search { width: 100%; }
  .public-dataset-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .public-dataset-filter-bar::-webkit-scrollbar { display: none; }
  .public-dataset-filter { flex: 0 0 auto; }
  .public-datasets-sidebar { grid-template-columns: 1fr; }
  .dataset-filter-panel__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .public-datasets-grid { grid-template-columns: 1fr; }
  .public-dataset-card__cover { min-height: 196px; }
  .public-dataset-card__cover strong { font-size: 29px; }
  .public-dataset-card__footer { align-items: stretch; flex-direction: column; }
  .public-dataset-card__footer .btn { width: 100%; }
}
@media (max-width: 430px) {
  .dataset-filter-panel__list { grid-template-columns: 1fr; }
  .public-dataset-card__body { padding: 15px; }
}


/* ------------------------------------------------------------
   Public dataset advanced filters
------------------------------------------------------------ */
.dataset-filter-group {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 74%);
}
.dataset-filter-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}
.dataset-type-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.dataset-type-filter {
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 56%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--background-2), transparent 5%);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: .2s ease;
}
.dataset-type-filter:hover,
.dataset-type-filter.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary-2), transparent 45%);
  background: color-mix(in srgb, var(--primary-1), transparent 92%);
}
.dataset-check-list {
  max-height: 248px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 4px 2px 4px 8px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--grey-3), transparent 35%) transparent;
}
.dataset-check-list::-webkit-scrollbar { width: 4px; height: 4px; }
.dataset-check-list::-webkit-scrollbar-track { background: transparent; }
.dataset-check-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--grey-3), transparent 35%);
}
.dataset-check-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.dataset-check-list label {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.dataset-check-list input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary-2);
}
.dataset-check-list label:hover { color: var(--text); }
.dataset-filter-switches { gap: 14px; }
.dataset-filter-toggle {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  cursor: pointer;
}
.dataset-filter-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.dataset-filter-toggle strong { font-size: 14px; font-weight: 950; }
.dataset-filter-toggle__ui {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 42%);
  background: color-mix(in srgb, var(--background-2), transparent 2%);
  transition: .2s ease;
}
.dataset-filter-toggle__ui::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--grey-3), transparent 18%);
  transform: translateY(-50%);
  transition: .2s ease;
}
.dataset-filter-toggle input:checked + .dataset-filter-toggle__ui {
  border-color: color-mix(in srgb, var(--success1), transparent 45%);
  background: color-mix(in srgb, var(--success1), transparent 72%);
}
.dataset-filter-toggle input:checked + .dataset-filter-toggle__ui::after {
  right: 20px;
  background: var(--white);
}
.dataset-price-grid { display: grid; gap: 10px; }
.compact-field { gap: 7px; }
.compact-field > span { font-size: 12px; color: var(--muted); }
.dataset-filter-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 16px;
}
.dataset-filter-actions .btn {
  width: 100%;
  min-height: 42px;
  justify-content: center;
}
@media (max-width: 1120px) {
  .public-datasets-sidebar { grid-template-columns: 1fr; }
  .dataset-filter-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    align-items: start;
  }
  .dataset-filter-panel__head,
  .dataset-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .dataset-filter-panel { display: block; }
  .dataset-type-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dataset-check-list { max-height: 210px; }
}

/* ------------------------------------------------------------
   Refined public dataset filters
   The rules below keep the filter UI reusable and mobile-collapsible.
------------------------------------------------------------ */
.dataset-filter-mobile-toggle {
  display: none;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card), var(--background-1) 12%);
  color: var(--text);
  padding: 0 16px;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--elevation), transparent 72%);
}
.dataset-filter-mobile-toggle span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.dataset-filter-mobile-toggle > .hugeicon,
.dataset-filter-mobile-toggle > i { transition: transform .22s ease; }
.dataset-filter-mobile-toggle.is-open > .hugeicon,
.dataset-filter-mobile-toggle.is-open > i { transform: rotate(180deg); }
.public-datasets-sidebar {
  align-self: start;
}
.public-datasets-sidebar .dataset-filter-panel {
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card), transparent 0%), color-mix(in srgb, var(--background-1), var(--card) 54%));
  box-shadow: 0 16px 38px color-mix(in srgb, var(--elevation), transparent 70%);
}
.public-datasets-sidebar .dataset-filter-panel__head {
  min-height: 70px;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%);
}
.dataset-filter-panel__head > div {
  display: grid;
  gap: 3px;
}
.panel-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.dataset-filter-panel__head strong {
  font-size: 18px;
  line-height: 1.5;
}
.dataset-filter-panel__close {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--background-2), transparent 15%);
  color: var(--muted);
  cursor: pointer;
}
.dataset-filter-panel__close:hover { color: var(--text); }
.public-datasets-sidebar .dataset-filter-group {
  margin: 0;
  padding: 18px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 78%);
}
.public-datasets-sidebar .dataset-filter-panel__head + .dataset-filter-group { border-top: 0; }
.dataset-filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: -.01em;
}
.dataset-type-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dataset-type-filter {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--background-2), transparent 0%);
  font-size: 13px;
}
.dataset-type-filter.is-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-2), transparent 38%);
}
.dataset-check-list {
  max-height: 230px;
  gap: 6px;
  padding-inline-end: 2px;
}
.dataset-check-list label {
  min-height: 38px;
  justify-content: space-between;
  gap: 12px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: color-mix(in srgb, var(--background-2), transparent 38%);
}
.dataset-check-list label:hover {
  border-color: color-mix(in srgb, var(--border-primary), transparent 58%);
  background: color-mix(in srgb, var(--card), transparent 22%);
}
.dataset-check-list label span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.dataset-check-list small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.dataset-check-list input {
  order: 2;
  width: 15px;
  height: 15px;
}
.dataset-filter-toggle {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 68%);
  border-radius: 15px;
  background: color-mix(in srgb, var(--background-2), transparent 18%);
}
.dataset-filter-toggle strong { font-size: 13px; }
.dataset-price-grid {
  grid-template-columns: 1fr;
}
.public-datasets-sidebar .compact-field .form-control {
  min-height: 42px;
  min-width: 100% !important;
  border-radius: 14px;
  background: color-mix(in srgb, var(--background-2), transparent 4%);
}
.public-datasets-sidebar .dataset-filter-actions {
  margin: 0;
  padding: 18px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 76%);
}
.dataset-filter-actions .btn--outline {
  background: transparent;
}
@media (max-width: 1120px) {
  .public-datasets-sidebar {
    position: static;
    display: block;
    order: -1;
  }
  .public-datasets-sidebar .dataset-filter-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .public-datasets-sidebar .dataset-filter-panel__head,
  .public-datasets-sidebar .dataset-filter-actions {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .dataset-filter-mobile-toggle {
    display: flex;
    margin-bottom: 12px;
  }
  .public-datasets-sidebar .dataset-filter-panel {
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: max-height .28s ease, opacity .22s ease, transform .22s ease;
  }
  .public-datasets-sidebar .dataset-filter-panel.is-open {
    max-height: 78vh;
    opacity: 1;
    overflow: auto;
    pointer-events: auto;
    transform: translateY(0);
  }
  .public-datasets-sidebar .dataset-filter-panel.is-open::-webkit-scrollbar { width: 4px; }
  .public-datasets-sidebar .dataset-filter-panel.is-open::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--grey-3), transparent 52%);
  }
  .dataset-filter-panel__close { display: inline-flex; }
  .public-datasets-sidebar .dataset-filter-panel__head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--card), var(--background-1) 10%);
  }
  .dataset-type-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dataset-check-list { max-height: 205px; }
}


/* ------------------------------------------------------------
   Static text pages: about / privacy
   ------------------------------------------------------------ */
.text-page {
  min-height: 70vh;
}

.text-page__wrap {
  padding-top: 52px;
  padding-bottom: 86px;
}

.text-page__panel {
  max-width: 940px;
  margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--border-primary);
  border-radius: 28px;
  padding: 38px;
  box-shadow: 0 18px 46px var(--elevation);
}

.text-page__head {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-primary);
}

.text-page__head h1 {
  margin: 12px 0 12px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.45;
  color: var(--text);
}

.text-page__head p {
  max-width: 760px;
  margin: 0;
  color: var(--grey-3);
  font-size: 15px;
  line-height: 2.15;
}

.text-page__content {
  display: grid;
  gap: 22px;
}

.text-page__section {
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(var(--c-borderPrimary), .55);
}

.text-page__section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.text-page__section h2 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--text);
}

.text-page__section p {
  margin: 0;
  color: var(--grey-3);
  line-height: 2.15;
  font-size: 14px;
}

@media (max-width: 680px) {
  .text-page__wrap { padding-top: 28px; padding-bottom: 56px; }
  .text-page__panel { padding: 24px 18px; border-radius: 22px; }
  .text-page__head { margin-bottom: 20px; padding-bottom: 20px; }
}

/* --------------------------------------------------------------------------
   Index hero animated robot illustration
   -------------------------------------------------------------------------- */
.hero-art.hero-robot-art {
  min-height: 585px;
  position: relative;
  direction: ltr;
  isolation: isolate;
  pointer-events: auto;
  overflow: visible;
}
.hero-art.hero-robot-art::before {
  content: "";
  position: absolute;
  inset: 36px 18px 22px 34px;
  z-index: 0;
  border-radius: 58px 104px 78px 98px;
  background:
    radial-gradient(circle at 76% 20%, color-mix(in srgb, var(--info), transparent 76%), transparent 32%),
    radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--primary-1), transparent 82%), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--card), #fff 4%), color-mix(in srgb, var(--background-2), #000 7%));
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 44%);
  box-shadow: var(--page-shadow);
  opacity: .82;
}
.hero-robot-glow {
  position: absolute;
  left: 21%;
  right: 17%;
  bottom: 18px;
  height: 160px;
  border-radius: 50%;
  z-index: 1;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--info), transparent 67%), transparent 72%);
  filter: blur(18px);
  opacity: .72;
  animation: heroGlowPulse 5.6s ease-in-out infinite;
}
.hero-layer {
  position: absolute;
  z-index: var(--z, 4);
  width: var(--w, 30%);
  left: var(--l, auto);
  right: var(--r, auto);
  top: var(--t, auto);
  bottom: var(--b, auto);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform .36s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.hero-layer img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 24px 36px rgba(15, 24, 38, .18));
  transform-origin: 50% 50%;
}
.hero-layer--code {
  --l: -2%;
  --t: 48px;
  --w: 33%;
  --z: 3;
}
.hero-layer--code img { animation: heroPanelFloat 7.2s ease-in-out infinite; }
.hero-layer--analytics {
  --r: 0;
  --t: 18px;
  --w: 38%;
  --z: 3;
}
.hero-layer--analytics img { animation: heroPanelFloat 8.5s ease-in-out -.9s infinite; }
.hero-layer--course {
  --r: 2%;
  --b: 96px;
  --w: 29%;
  --z: 7;
}
.hero-layer--course img { animation: heroPanelFloat 7.8s ease-in-out -1.6s infinite; }
.hero-layer--body {
  --l: 28%;
  --b: 20px;
  --w: 43%;
  --z: 4;
}
.hero-layer--body img { animation: heroBodyBreath 5.8s ease-in-out infinite; }
.hero-layer--head {
  --l: 39.5%;
  --t: 158px;
  --w: 22%;
  --z: 8;
}
.hero-layer--head img {
  animation: heroHeadNod 5.2s ease-in-out infinite;
  filter: drop-shadow(0 22px 25px rgba(15, 24, 38, .17));
}
.hero-layer--arm-left {
  --l: 22.2%;
  --b: 104px;
  --w: 22.5%;
  --z: 6;
}
.hero-layer--arm-left img {
  transform-origin: 78% 25%;
  animation: heroArmTypeA .78s ease-in-out infinite alternate;
}
.hero-layer--arm-right {
  --l: 33.8%;
  --b: 88px;
  --w: 21.5%;
  --z: 6;
}
.hero-layer--arm-right img {
  transform-origin: 72% 24%;
  animation: heroArmTypeB .92s ease-in-out .12s infinite alternate;
}

.hero-layer--arm-left img,
.hero-layer--arm-right img {
  filter: none !important;
}

.hero-layer--laptop {
  --l: 38%;
  --b: 68px;
  --w: 37%;
  --z: 9;
}
.hero-layer--laptop img { animation: heroLaptopFloat 6.3s ease-in-out -.4s infinite; }
.hero-orbit {
  position: absolute;
  display: block;
  z-index: 2;
  border-radius: 999px;
  pointer-events: none;
  will-change: transform;
}
.hero-orbit--teal {
  width: 38px;
  height: 38px;
  left: 14%;
  bottom: 160px;
  background: linear-gradient(135deg, #19c7c9, #34d6cf);
  animation: heroShapeFloat 6.7s ease-in-out infinite;
}
.hero-orbit--purple {
  width: 31px;
  height: 31px;
  left: 45%;
  top: 8px;
  background: linear-gradient(135deg, #8a6cf1, #7b63d8);
  animation: heroShapeFloat 7.5s ease-in-out -1.4s infinite;
}
.hero-orbit--orange {
  width: 36px;
  height: 36px;
  left: 14%;
  bottom: 26px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffbd41, #ff9f1c);
  transform: rotate(-18deg);
  animation: heroShapeSpin 8.2s ease-in-out infinite;
}
.hero-orbit--blob {
  width: 52px;
  height: 38px;
  right: 12%;
  bottom: 66px;
  border-radius: 22px 28px 25px 18px;
  background: linear-gradient(135deg, #36d6ce, #29c5b9);
  transform: rotate(34deg);
  animation: heroShapeFloat 6.2s ease-in-out -.8s infinite;
}
.hero-code-cursor {
  position: absolute;
  width: 3px;
  height: 20px;
  left: 56%;
  top: 49%;
  border-radius: 999px;
  background: #35d8d2;
  box-shadow: 0 0 18px rgba(53, 216, 210, .55);
  animation: heroCursorBlink 1s steps(2, start) infinite, heroCursorMove 5.2s ease-in-out infinite;
}
.hero-progress-shine {
  position: absolute;
  left: 20%;
  bottom: 37.6%;
  width: 31%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  opacity: .85;
  transform: translateX(-18px);
  animation: heroProgressShine 3.8s ease-in-out infinite;
}
@keyframes heroPanelFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -15px, 0) rotate(.8deg); }
}
@keyframes heroBodyBreath {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -7px, 0) scale(1.006); }
}
@keyframes heroHeadNod {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  45% { transform: translate3d(0, 1px, 0) rotate(-1.2deg); }
  65% { transform: translate3d(0, 0, 0) rotate(.6deg); }
}
@keyframes heroArmTypeA {
  0% { transform: rotate(-3deg) translate3d(0, 0, 0); }
  100% { transform: rotate(3deg) translate3d(2px, 4px, 0); }
}
@keyframes heroArmTypeB {
  0% { transform: rotate(2deg) translate3d(0, 2px, 0); }
  100% { transform: rotate(-3deg) translate3d(-2px, 0, 0); }
}
@keyframes heroLaptopFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -5px, 0) rotate(.4deg); }
}
@keyframes heroShapeFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -20px, 0) rotate(11deg); }
}
@keyframes heroShapeSpin {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-18deg); }
  50% { transform: translate3d(0, -16px, 0) rotate(18deg); }
}
@keyframes heroGlowPulse {
  0%, 100% { transform: scale(.95); opacity: .52; }
  50% { transform: scale(1.05); opacity: .82; }
}
@keyframes heroCursorBlink { 50% { opacity: .2; } }
@keyframes heroCursorMove {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(34px, 26px, 0); }
}
@keyframes heroProgressShine {
  0%, 100% { opacity: .35; transform: translateX(-22px) scaleX(.7); }
  48% { opacity: .95; transform: translateX(74px) scaleX(1); }
}
@media (max-width: 1120px) {
  .hero-art.hero-robot-art {
    min-height: 540px;
    max-width: 690px;
    margin-inline: auto;
  }
}
@media (max-width: 760px) {
  .hero-art.hero-robot-art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art.hero-robot-art *,
  .hero-art.hero-robot-art::before {
    animation: none !important;
    transition: none !important;
  }
}

/* Final placement tuning for the Roocket-like index hero - fixed alignment */
.hero-layer--code { --l: 2.5%; --t: 92px; --w: 31.5%; }
.hero-layer--analytics { --r: 1.5%; --t: 72px; --w: 36%; }
.hero-layer--course { --r: 3.5%; --b: 72px; --w: 28%; }
.hero-layer--body { --l: 29.5%; --b: 24px; --w: 42%; }
.hero-layer--head { --l: 40.8%; --t: 218px; --w: 20.5%; }
.hero-layer--arm-left { display: none; }
.hero-layer--arm-right { --l: 35%; --b: 108px; --w: 19%; --z: 6; }
.hero-layer--arm-right img { clip-path: inset(30% 0 0 0); }

.hero-layer--arm-left img,
.hero-layer--arm-right img {
  filter: none !important;
}

.hero-layer--laptop { --l: 40.5%; --b: 82px; --w: 35%; }

@keyframes heroHeadNod {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  48% { transform: translate3d(0, 1px, 0) rotate(-.8deg); }
  68% { transform: translate3d(0, 0, 0) rotate(.35deg); }
}

/* --------------------------------------------------------------------------
   Index hero AI workspace illustration
   Uses the supplied separated component PNGs for the robot, desk, laptop and UI panels.
   -------------------------------------------------------------------------- */
.hero-art.hero-workspace-art {
  min-height: 640px;
  position: relative;
  direction: ltr;
  isolation: isolate;
  overflow: visible;
  pointer-events: none;
  --workspace-x: 0px;
  --workspace-y: 0px;
}

.hero-workspace-art .workspace-frame {
  position: absolute;
  /* inset: 20px 8px 20px 8px; */
  z-index: 0;
  border-radius: 72px 92px 72px 94px;
  background:
    radial-gradient(circle at 52% 53%, rgba(28, 215, 255, .28), transparent 35%),
    radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--info), transparent 76%), transparent 29%),
    radial-gradient(circle at 16% 79%, color-mix(in srgb, var(--primary-1), transparent 86%), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--background-2), #061326 30%), color-mix(in srgb, var(--background-1), #071426 42%));
  border: 1px solid color-mix(in srgb, var(--info), transparent 60%);
  box-shadow:
    0 34px 90px rgba(3, 12, 31, .18),
    inset 0 0 0 1px color-mix(in srgb, var(--card), transparent 86%),
    inset 0 -74px 126px rgba(2, 10, 25, .24);
  opacity: .94;
}

.hero-workspace-art .workspace-frame::before,
.hero-workspace-art .workspace-frame::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.hero-workspace-art .workspace-frame::before {
  inset: 1px;
  background:
    linear-gradient(90deg, transparent 0 13%, rgba(30, 213, 229, .12) 13.2%, transparent 13.8% 83%, rgba(122, 98, 255, .10) 83.2%, transparent 83.8%),
    repeating-linear-gradient(0deg, transparent 0 54px, rgba(103, 140, 185, .055) 55px 56px);
  mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 76%, transparent 100%);
}

.hero-workspace-art .workspace-frame::after {
  left: 50%;
  top: 50%;
  width: 42%;
  aspect-ratio: 1;
  border: 1px dashed color-mix(in srgb, var(--info), transparent 72%);
  transform: translate(-50%, -50%);
  opacity: .52;
  animation: workspaceRingRotate 22s linear infinite;
}

.workspace-ambient {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(14px);
  opacity: .55;
}

.workspace-ambient--main {
  left: 29%;
  top: 31%;
  width: 46%;
  height: 43%;
  background: radial-gradient(circle at center, rgba(24, 200, 235, .34), transparent 68%);
  animation: workspaceGlow 6.8s ease-in-out infinite;
}

.workspace-ambient--soft {
  left: 8%;
  right: 8%;
  bottom: 34px;
  height: 150px;
  background: radial-gradient(ellipse at center, rgba(21, 125, 255, .24), transparent 70%);
  filter: blur(18px);
  animation: workspaceGlow 8s ease-in-out -1.4s infinite;
}

.workspace-layer {
  position: absolute;
  z-index: var(--z, 5);
  width: var(--w, 30%);
  left: var(--l, auto);
  right: var(--r, auto);
  top: var(--t, auto);
  bottom: var(--b, auto);
  opacity: 0;
  --workspace-entry-y: 16px;
  --workspace-entry-scale: .975;
  transform: translate3d(0, var(--workspace-entry-y, 0px), 0) scale(var(--workspace-entry-scale, 1));
  transition:
    opacity .72s ease,
    transform .56s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--enter-delay, 0s);
  will-change: transform, opacity;
}

.hero-workspace-art.is-in-view .workspace-layer {
  opacity: 1;
  --workspace-entry-y: 0px;
  --workspace-entry-scale: 1;
}

.workspace-layer img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 24px 42px rgba(2, 10, 28, .22));
}

.workspace-layer--code {
  --l: 6%;
  --t: 106px;
  --w: 30.8%;
  --z: 3;
  --enter-delay: .06s;
}
.workspace-layer--code img { animation: workspacePanelFloat 8.6s ease-in-out -.75s infinite; }

.workspace-layer--analytics {
  --r: 2.8%;
  --t: 45px;
  --w: 34.4%;
  --z: 3;
  --enter-delay: .10s;
}
.workspace-layer--analytics img { animation: workspacePanelFloat 9.2s ease-in-out -1.2s infinite; }

.workspace-layer--cards {
  --r: 6%;
  --t: 333px;
  --w: 23.6%;
  --z: 4;
  --enter-delay: .18s;
}
.workspace-layer--cards img { animation: workspacePanelFloat 8.8s ease-in-out -1.65s infinite; }

.workspace-layer--desk {
  --l: 1.5%;
  --b: 30px;
  --w: 97%;
  --enter-delay: 0s;
}
.workspace-layer--desk img {
  filter: drop-shadow(0 22px 28px rgba(2, 10, 28, .28));
  animation: none;
}

.workspace-layer--body {
  --l: 50%;
  --t: 330px;
  --w: 34%;
  --z: 4;
  --enter-delay: .20s;
}
.workspace-layer--body img { animation: none; }

.workspace-layer--head {
  --l: 49.4%;
  --t: 219px;
  --w: 29%;
  --z: 9;
  --enter-delay: .24s;
}
.workspace-layer--head img {
  filter: drop-shadow(0 24px 32px rgba(2, 10, 28, .20));
  transform-origin: 50% 76%;
  animation: none;
}

.workspace-layer--arm-left {
  --l: 32%;
  --t: 355px;
  --w: 26.6%;
  --z: 3;
  --enter-delay: .28s;
}
.workspace-layer--arm-left img {
  transform-origin: 82% 18%;
  transform-box: fill-box;
  animation: none;
}
.hero-workspace-art.is-typing .workspace-layer--arm-left img {
  animation: workspaceArmTypeLeft .62s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.workspace-layer--arm-right {
  --l: 51.7%;
  --t: 356px;
  --w: 26.1%;
  --z: 8;
  --enter-delay: .30s;
}
.workspace-layer--arm-right img {
  transform-origin: 80% 18%;
  transform-box: fill-box;
  animation: none;
}
.hero-workspace-art.is-typing .workspace-layer--arm-right img {
  animation: workspaceArmTypeRight .68s cubic-bezier(.45, 0, .55, 1) infinite alternate-reverse;
}

.workspace-layer--laptop {
  --l: 15.2%;
  --t: 350px;
  --w: 51%;
  --z: 6;
  --enter-delay: .14s;
}
.workspace-layer--laptop img {
  filter: drop-shadow(0 26px 40px rgba(2, 10, 28, .30));
  animation: none;
}


/* Static robot assembly: no mouse/parallax movement. Only the arms get a tiny shoulder typing motion. */
.workspace-layer--body,
.workspace-layer--head,
.workspace-layer--arm-left,
.workspace-layer--arm-right,
.workspace-layer--laptop,
.workspace-layer--desk {
  --workspace-x: 0px;
  --workspace-y: 0px;
}

.workspace-layer--body img,
.workspace-layer--head img,
.workspace-layer--laptop img,
.workspace-layer--desk img {
  animation: none !important;
}

.workspace-laptop-glow {
  position: absolute;
  left: 45%;
  top: 41%;
  width: 7.5%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(32, 211, 255, .55);
  filter: blur(10px);
  opacity: .55;
  animation: workspacePulse 2.8s ease-in-out infinite;
}

.workspace-code-cursor {
  position: absolute;
  left: 45%;
  top: 49%;
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: #38d9f5;
  box-shadow: 0 0 18px rgba(56, 217, 245, .64);
  animation: workspaceCursor 5.2s ease-in-out infinite, workspaceBlink 1.08s steps(2, start) infinite;
}

.workspace-chart-pulse {
  position: absolute;
  left: 24%;
  bottom: 31%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #20d3ff;
  box-shadow: 0 0 0 0 rgba(32, 211, 255, .45);
  animation: workspaceChartPulse 2.9s ease-out infinite;
}

.workspace-dot,
.workspace-circuit {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.workspace-dot {
  border-radius: 999px;
  background: linear-gradient(135deg, #22d4d1, #207eff);
  box-shadow: 0 0 20px rgba(34, 212, 209, .3);
  animation: workspaceDotFloat 6.6s ease-in-out infinite;
}
.workspace-dot--a { width: 10px; height: 10px; left: 29%; top: 16%; animation-delay: -.6s; }
.workspace-dot--b { width: 7px; height: 7px; right: 19%; top: 35%; animation-delay: -1.7s; }
.workspace-dot--c { width: 9px; height: 9px; left: 17%; bottom: 30%; animation-delay: -2.5s; }

.workspace-circuit {
  width: 128px;
  height: 54px;
  border-bottom: 1px dashed rgba(39, 216, 225, .36);
  border-left: 1px dashed rgba(39, 216, 225, .36);
  opacity: .52;
  animation: workspaceCircuit 5.1s ease-in-out infinite;
}
.workspace-circuit--a { left: 31%; top: 244px; border-radius: 0 0 0 18px; }
.workspace-circuit--b { right: 22%; top: 328px; border-radius: 0 0 0 18px; animation-delay: -1.4s; }

.hero-workspace-art:not(.is-in-view) .workspace-layer img,
.hero-workspace-art:not(.is-in-view) .workspace-dot,
.hero-workspace-art:not(.is-in-view) .workspace-circuit,
.hero-workspace-art:not(.is-in-view) .workspace-ambient,
.hero-workspace-art:not(.is-in-view) .workspace-frame::after {
  animation-play-state: paused;
}

@keyframes workspacePanelFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -8px, 0) rotate(.42deg); }
}
@keyframes workspaceBodyFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -4px, 0) scale(1.004); }
}
@keyframes workspaceHeadLook {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  45% { transform: translate3d(0, -4px, 0) rotate(-.9deg); }
  72% { transform: translate3d(1px, -1px, 0) rotate(.55deg); }
}
@keyframes workspaceArmTypeLeft {
  0% { transform: translate3d(-.6px, -.4px, 0) rotate(-1.15deg); }
  100% { transform: translate3d(1.2px, 1.6px, 0) rotate(.95deg); }
}
@keyframes workspaceArmTypeRight {
  0% { transform: translate3d(.5px, 1.1px, 0) rotate(.95deg); }
  100% { transform: translate3d(-1.2px, -.2px, 0) rotate(-1.15deg); }
}
@keyframes workspaceLaptopFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -3px, 0) rotate(.22deg); }
}
@keyframes workspaceDeskBreath {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(1); }
  50% { transform: translate3d(0, -1px, 0) scaleX(1.002); }
}
@keyframes workspaceGlow {
  0%, 100% { transform: scale(.94); opacity: .36; }
  50% { transform: scale(1.06); opacity: .72; }
}
@keyframes workspaceRingRotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes workspaceCursor {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(30px, 26px, 0); }
}
@keyframes workspaceBlink { 50% { opacity: .18; } }
@keyframes workspacePulse {
  0%, 100% { transform: scale(.86); opacity: .35; }
  50% { transform: scale(1.18); opacity: .78; }
}
@keyframes workspaceChartPulse {
  0% { box-shadow: 0 0 0 0 rgba(32, 211, 255, .48); opacity: .9; }
  80%, 100% { box-shadow: 0 0 0 18px rgba(32, 211, 255, 0); opacity: .3; }
}
@keyframes workspaceDotFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -14px, 0); }
}
@keyframes workspaceCircuit {
  0%, 100% { opacity: .2; filter: drop-shadow(0 0 0 rgba(39, 216, 225, 0)); }
  50% { opacity: .68; filter: drop-shadow(0 0 10px rgba(39, 216, 225, .24)); }
}

@media (max-width: 1120px) {
  .hero-art.hero-workspace-art {
    min-height: 590px;
    max-width: 720px;
    margin-inline: auto;
  }
  .workspace-layer--code { --t: 96px; }
  .workspace-layer--analytics { --t: 80px; }
  .workspace-layer--cards { --t: 306px; }
  .workspace-layer--desk { --b: 28px; }
  .workspace-layer--body { --t: 300px; }
  .workspace-layer--head { --t: 178px; }
  .workspace-layer--arm-left { --t: 351px; }
  .workspace-layer--arm-right { --t: 347px; }
  .workspace-layer--laptop { --l: 17%; --t: 336px; --w: 47%; }
}



@media (prefers-reduced-motion: reduce) {
  .hero-workspace-art *,
  .hero-workspace-art *::before,
  .hero-workspace-art *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero-workspace-art .workspace-layer {
    opacity: 1;
    --workspace-entry-y: 0px;
    --workspace-entry-scale: 1;
  }
}


/* --------------------------------------------------------------------------
   Standalone learning path page - ordered route with state branches
   -------------------------------------------------------------------------- */
.learning-path-page {
  --path-color: var(--info);
  position: relative;
  overflow: hidden;
  min-height: 72vh;
  isolation: isolate;
}

.learning-path-page::before,
.learning-path-page::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 999px;
  filter: blur(8px);
}

.learning-path-page::before {
  width: 520px;
  height: 520px;
  inset-inline-start: -250px;
  top: 86px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary-1), transparent 84%), transparent 68%);
}

.learning-path-page::after {
  width: 620px;
  height: 620px;
  inset-inline-end: -260px;
  top: 300px;
  background: radial-gradient(circle, color-mix(in srgb, var(--path-color), transparent 86%), transparent 70%);
}

.learning-path-page > section {
  position: relative;
  z-index: 1;
}

.lp-hero--page {
  padding: 48px 0 20px;
}

.lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  gap: 34px;
  align-items: center;
}

.lp-hero__content h1 {
  margin: 12px 0 14px;
  max-width: 820px;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.44;
  font-weight: 950;
  letter-spacing: -.8px;
  color: var(--text);
}

.lp-hero__content p {
  max-width: 820px;
  margin: 0;
  color: var(--grey-3);
  font-size: 15px;
  line-height: 2.18;
}

.lp-hero__art {
  width: min(100%, 390px);
  margin-inline-start: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.lp-hero__art::before {
  content: "";
  position: absolute;
  inset: 10% 10% 12% 12%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--info), transparent 88%), transparent 72%);
  filter: blur(22px);
  z-index: 0;
}

.lp-hero__art img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 38px rgba(3, 12, 31, .08));
}

.lp-path-picker {
  margin-top: 30px;
}

.lp-path-picker__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  color: var(--text);
}

.lp-path-picker__head [data-hugeicon] {
  color: var(--path-color);
}

.lp-path-picker__head strong {
  display: block;
  font-size: 14px;
  font-weight: 950;
}

.lp-path-picker__head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

.lp-path-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
}

.lp-path-tab {
  --path-color: var(--info);
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  min-height: 48px;
  padding: 0 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
  font-family: inherit;
  transition: color .22s ease, transform .22s ease;
}

.lp-path-tab::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--path-color), transparent);
  transform: scaleX(.25);
  opacity: 0;
  transition: .22s ease;
}

.lp-path-tab span {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--path-color), #fff 16%), color-mix(in srgb, var(--path-color), #050914 28%));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--path-color), transparent 76%);
  font-size: 11px;
  font-weight: 950;
}

.lp-path-tab strong {
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.lp-path-tab:hover,
.lp-path-tab.is-active {
  color: var(--text);
  transform: translateY(-1px);
}

.lp-path-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.lp-route-section {
  padding: 28px 0 86px;
}

.lp-route-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: end;
  margin-bottom: 34px;
}

.lp-route-head h2 {
  margin: 8px 0 8px;
  color: var(--text);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.45;
  font-weight: 950;
}

.lp-route-head p {
  max-width: 820px;
  margin: 0;
  color: var(--grey-3);
  font-size: 14px;
  line-height: 2.08;
}

.lp-route-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.lp-route-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.lp-route-meta span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--path-color);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--path-color), transparent 88%);
}

.lp-route-map {
  --path-color: var(--info);
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 0 22px;
  overflow: visible;
}

.lp-route-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.lp-route-spine-shadow,
.lp-route-spine,
.lp-route-branch-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-route-spine-shadow {
  stroke: color-mix(in srgb, var(--path-color), transparent 84%);
  stroke-width: 18;
  filter: blur(10px);
}

.lp-route-spine {
  stroke: color-mix(in srgb, var(--path-color), var(--text) 6%);
  stroke-width: 4;
  stroke-dasharray: 11 13;
  animation: lpRoadDash 18s linear infinite;
}

.lp-route-branch-line {
  stroke: color-mix(in srgb, var(--path-color), transparent 62%);
  stroke-width: 1.6;
  stroke-dasharray: 4 8;
  opacity: .78;
  transition: stroke .24s ease, opacity .24s ease, stroke-width .24s ease;
}

.lp-route-branch-line.is-active {
  stroke: var(--path-color);
  stroke-width: 2.6;
  opacity: 1;
  stroke-dasharray: none;
}

.lp-route-branch-line.is-done {
  stroke: color-mix(in srgb, var(--path-color), transparent 30%);
  opacity: .92;
}

.lp-route-states {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 54px;
}

.lp-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 128px;
  opacity: 0;
  animation: lpStateIn .48s ease forwards;
  animation-delay: calc(var(--i) * .055s);
}

.lp-state--right {
  grid-template-areas: "branches node main";
}

.lp-state--left {
  grid-template-areas: "main node branches";
}

.lp-state__main {
  grid-area: main;
  min-width: 0;
}

.lp-state__branches {
  grid-area: branches;
  min-width: 0;
  display: grid;
  gap: 11px;
}

.lp-state__node {
  grid-area: node;
  position: relative;
  width: 66px;
  height: 66px;
  border: 1.5px solid color-mix(in srgb, var(--path-color), transparent 38%);
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--path-color), transparent 91%) 0 30%, transparent 62%),
    color-mix(in srgb, var(--card), transparent 62%);
  color: color-mix(in srgb, var(--path-color), var(--text) 24%);
  box-shadow:
    0 12px 32px color-mix(in srgb, var(--path-color), transparent 84%),
    inset 0 0 0 1px color-mix(in srgb, var(--card), transparent 58%);
  font-family: inherit;
  backdrop-filter: blur(10px);
  transition: transform .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, background .22s ease;
}

.lp-state__node::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--path-color), transparent 78%);
  opacity: .64;
}

.lp-state__node::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  border: 1px dashed color-mix(in srgb, var(--path-color), transparent 72%);
  opacity: .54;
}

.lp-state__node span {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 950;
}

.lp-state.is-active .lp-state__node,
.lp-state__node:hover {
  transform: scale(1.06);
  border-color: color-mix(in srgb, var(--path-color), transparent 8%);
  color: var(--text);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--path-color), transparent 86%) 0 36%, transparent 68%),
    color-mix(in srgb, var(--card), transparent 48%);
  box-shadow:
    0 18px 44px color-mix(in srgb, var(--path-color), transparent 72%),
    0 0 0 8px color-mix(in srgb, var(--path-color), transparent 91%),
    inset 0 0 0 1px color-mix(in srgb, var(--card), transparent 42%);
}

.lp-state.is-done .lp-state__node {
  border-color: color-mix(in srgb, var(--path-color), transparent 28%);
  color: color-mix(in srgb, var(--path-color), var(--text) 38%);
  filter: saturate(.96) brightness(.98);
}

.lp-state__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in srgb, var(--path-color), var(--text) 18%);
  font-size: 12px;
  font-weight: 950;
}

.lp-state__kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--path-color);
}

.lp-state__main h3 {
  margin: 8px 0 4px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 950;
}

.lp-state__main p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 2.02;
}

.lp-state__main small {
  display: inline-flex;
  margin-top: 9px;
  color: var(--grey-3);
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.9;
}

.lp-state-branch {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
  justify-self: start;
  transition: color .22s ease, transform .22s ease;
}

.lp-state--right .lp-state__branches {
  justify-items: end;
}

.lp-state--right .lp-state-branch {
  flex-direction: row-reverse;
  text-align: left;
  justify-self: end;
}

.lp-state-branch__dot {
  position: relative;
  width: 13px;
  height: 13px;
  border: 1.5px solid color-mix(in srgb, var(--path-color), transparent 30%);
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--path-color), transparent 94%);
  flex: 0 0 auto;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.lp-state-branch__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--path-color), transparent 18%);
  opacity: 0;
  transform: scale(.45);
  transition: opacity .22s ease, transform .22s ease;
}

.lp-state-branch__text strong,
.lp-state-branch__text small {
  display: block;
}

.lp-state-branch__text strong {
  color: inherit;
  font-size: 13px;
  line-height: 1.7;
  font-weight: 950;
}

.lp-state-branch__text small {
  margin-top: 1px;
  color: color-mix(in srgb, var(--path-color), var(--text) 16%);
  font-size: 10.5px;
  line-height: 1.6;
  font-weight: 900;
}

.lp-state-branch:hover,
.lp-state-branch.is-active {
  color: var(--text);
  transform: translateY(-1px);
}

.lp-state-branch.is-active .lp-state-branch__dot,
.lp-state-branch:hover .lp-state-branch__dot {
  transform: scale(1.18);
  border-color: var(--path-color);
  background: color-mix(in srgb, var(--card), transparent 70%);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--path-color), transparent 89%);
}

.lp-state-branch.is-active .lp-state-branch__dot::after,
.lp-state-branch:hover .lp-state-branch__dot::after {
  opacity: 1;
  transform: scale(1);
}

.lp-state-branch--empty {
  cursor: default;
  color: var(--muted);
  opacity: .65;
  font-size: 12px;
  justify-self: start;
}

.lp-branch-focus {
  --path-color: var(--info);
  max-width: 840px;
  margin: 28px auto 0;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--path-color), transparent 76%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 15px;
  align-items: baseline;
}

.lp-branch-focus span {
  color: color-mix(in srgb, var(--path-color), var(--text) 22%);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.lp-branch-focus strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 950;
}

.lp-branch-focus p {
  grid-column: 2;
  margin: 0;
  color: var(--grey-3);
  font-size: 13px;
  line-height: 2.05;
}

@keyframes lpRouteMark {
  0%, 100% { opacity: .46; transform: scaleY(.88); }
  50% { opacity: 1; transform: scaleY(1); }
}

@keyframes lpRoadDash {
  to { stroke-dashoffset: -180; }
}

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

@media (prefers-reduced-motion: reduce) {
  .lp-route-mark__line,
  .lp-route-spine,
  .lp-state {
    animation: none !important;
  }
  .lp-state { opacity: 1; }
}

@media (max-width: 960px) {
  .lp-hero__grid { grid-template-columns: 1fr; }
  .lp-hero__art { width: min(100%, 340px); margin: 0 auto; }
  .lp-route-head { grid-template-columns: 1fr; align-items: start; }
  .lp-route-meta { justify-content: flex-start; }
  .lp-state {
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
    gap: 18px;
  }
}

@media (max-width: 720px) {
  .lp-hero--page { padding-top: 32px; }
  .lp-path-tabs { gap: 10px 14px; }
  .lp-path-tab { min-height: 42px; }
  .lp-path-tab span { width: 32px; height: 32px; font-size: 10px; }
  .lp-route-section { padding-bottom: 58px; }
  .lp-route-map { padding: 0; }
  .lp-route-svg { display: none; }
  .lp-route-states { gap: 30px; }
  .lp-state,
  .lp-state--right,
  .lp-state--left {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas:
      "node main"
      "node branches";
    gap: 10px 14px;
    align-items: start;
    min-height: 0;
  }
  .lp-state__node {
    width: 54px;
    height: 54px;
  }
  .lp-state__node span { font-size: 15px; }
  .lp-state__main h3 { font-size: 15px; margin-top: 5px; }
  .lp-state__main p { font-size: 12px; }
  .lp-state__branches {
    justify-items: start !important;
    gap: 8px;
    padding-top: 3px;
  }
  .lp-state--right .lp-state-branch {
    flex-direction: row;
    text-align: start;
    justify-self: start;
  }
  .lp-state-branch { min-height: 36px; }
  .lp-state-branch__text strong { font-size: 12px; }
  .lp-branch-focus {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .lp-branch-focus p { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   Standalone project package page
   -------------------------------------------------------------------------- */
.project-package-page {
  --pp-accent: var(--info);
  --pp-primary: var(--primary-1);
  position: relative;
  min-height: 72vh;
  overflow: hidden;
  isolation: isolate;
}
.project-package-page::before,
.project-package-page::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 999px;
  filter: blur(10px);
}
.project-package-page::before {
  width: 540px;
  height: 540px;
  inset-inline-start: -250px;
  top: 120px;
  background: radial-gradient(circle, color-mix(in srgb, var(--pp-primary), transparent 88%), transparent 70%);
}
.project-package-page::after {
  width: 620px;
  height: 620px;
  inset-inline-end: -280px;
  top: 360px;
  background: radial-gradient(circle, color-mix(in srgb, var(--pp-accent), transparent 86%), transparent 72%);
}
.project-package-page > section { position: relative; z-index: 1; }

.pp-hero { padding: 46px 0 22px; }
.pp-hero__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 34px;
  align-items: center;
  min-height: 430px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 56%);
  border-radius: 34px;
  background:
    radial-gradient(circle at 75% 18%, color-mix(in srgb, var(--pp-accent), transparent 86%), transparent 34%),
    radial-gradient(circle at 20% 86%, color-mix(in srgb, var(--pp-primary), transparent 91%), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--card), transparent 4%), color-mix(in srgb, var(--background-1), var(--card) 44%));
  box-shadow: 0 28px 90px rgba(3, 12, 31, .13), inset 0 1px 0 color-mix(in srgb, #fff, transparent 92%);
  overflow: hidden;
  position: relative;
}
.pp-hero__box::before {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 28px;
  background-image:
    linear-gradient(to left, color-mix(in srgb, var(--pp-accent), transparent 91%) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--pp-accent), transparent 93%) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: .38;
  mask-image: radial-gradient(circle at 68% 40%, #000 0 42%, transparent 70%);
  pointer-events: none;
}
.pp-hero__content { position: relative; z-index: 2; }
.pp-hero__content h1 {
  margin: 12px 0 14px;
  max-width: 760px;
  font-size: clamp(31px, 4.2vw, 54px);
  line-height: 1.43;
  font-weight: 950;
  letter-spacing: -.8px;
  color: var(--text);
}
.pp-hero__content p {
  max-width: 760px;
  margin: 0;
  color: var(--grey-3);
  font-size: 15px;
  line-height: 2.18;
}
.pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.project-package-page .btn--ghost {
  background: color-mix(in srgb, var(--card), transparent 10%);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 46%);
}
.project-package-page .btn--ghost:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--pp-accent), transparent 36%);
  color: var(--text-hover);
}
.pp-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 22px;
}
.pp-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--card), transparent 18%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 68%);
  font-size: 12px;
  font-weight: 880;
}
.pp-trust-row i { color: var(--pp-accent); }

.pp-hero__visual {
  position: relative;
  z-index: 2;
  min-height: 360px;
  display: grid;
  place-items: center;
}
.pp-package-art {
  width: min(100%, 368px);
  aspect-ratio: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
  animation: ppArtFloat 6.5s ease-in-out infinite;
}
.pp-package-art::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pp-accent), transparent 84%), transparent 66%);
  filter: blur(12px);
}
.pp-art-orbit {
  position: absolute;
  inset: 16%;
  border: 1px dashed color-mix(in srgb, var(--pp-accent), transparent 45%);
  border-radius: 46% 54% 47% 53%;
  transform: rotate(-18deg);
  opacity: .68;
}
.pp-art-orbit--two {
  inset: 25%;
  border-style: solid;
  opacity: .42;
  transform: rotate(24deg);
}
.pp-art-core {
  position: relative;
  width: 174px;
  height: 174px;
  border-radius: 46px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, #fff, transparent 74%), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--card), #fff 7%), color-mix(in srgb, var(--background-1), var(--card) 34%));
  border: 1px solid color-mix(in srgb, var(--pp-accent), transparent 48%);
  box-shadow: 0 26px 62px rgba(3, 12, 31, .18), inset 0 0 0 1px color-mix(in srgb, #fff, transparent 90%);
}
.pp-art-core [data-hugeicon] { color: var(--pp-accent); }
.pp-art-core strong { font-size: 18px; font-weight: 950; direction: ltr; }
.pp-art-core small { color: var(--muted); font-size: 11px; font-weight: 850; direction: ltr; }
.pp-art-chip {
  position: absolute;
  min-width: 104px;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 10px 13px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--card), transparent 5%);
  border: 1px solid color-mix(in srgb, var(--pp-accent), transparent 58%);
  box-shadow: 0 16px 38px rgba(3, 12, 31, .12);
  backdrop-filter: blur(10px);
}
.pp-art-chip span {
  color: var(--pp-accent);
  direction: ltr;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .4px;
}
.pp-art-chip b { color: var(--text); font-size: 12px; font-weight: 950; }
.pp-art-chip--data { top: 28px; inset-inline-start: 10px; animation: ppChipFloat 5.2s ease-in-out infinite; }
.pp-art-chip--code { top: 54px; inset-inline-end: 0; animation: ppChipFloat 5.7s ease-in-out infinite -.8s; }
.pp-art-chip--model { bottom: 44px; inset-inline-start: 0; animation: ppChipFloat 6.1s ease-in-out infinite -1.2s; }
.pp-art-chip--docs { bottom: 30px; inset-inline-end: 20px; animation: ppChipFloat 5.6s ease-in-out infinite -.4s; }

.pp-stats-section { padding: 12px 0 22px; }
.pp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.pp-stat {
  min-height: 104px;
  padding: 18px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--card), transparent 7%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 64%);
  box-shadow: 0 16px 42px rgba(3, 12, 31, .07);
}
.pp-stat strong { display: block; color: var(--text); font-size: 18px; font-weight: 950; }
.pp-stat span { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.9; font-weight: 760; }

.pp-section { padding: 54px 0; }
.pp-section--soft {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--background-2), transparent 20%), transparent);
}
.pp-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.pp-section-head--center {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  display: block;
}
.pp-section-head h2 {
  margin: 8px 0 0;
  color: var(--text);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.55;
  font-weight: 950;
}
.pp-section-head p {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 2;
}
.pp-light-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text-hover);
  background: color-mix(in srgb, var(--pp-accent), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--pp-accent), transparent 72%);
  font-size: 12px;
  font-weight: 950;
}
.pp-content-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.pp-content-tabs {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px;
  border-radius: 26px;
  background: color-mix(in srgb, var(--card), transparent 6%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 64%);
}
.pp-content-tab {
  min-height: 58px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 18px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 930;
  text-align: start;
  transition: .22s ease;
}
.pp-content-tab:hover,
.pp-content-tab.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--pp-accent), transparent 91%);
  border-color: color-mix(in srgb, var(--pp-accent), transparent 68%);
}
.pp-content-tab [data-hugeicon] { color: var(--pp-accent); }
.pp-content-panels {
  position: relative;
  min-height: 355px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--pp-accent), transparent 88%), transparent 34%),
    color-mix(in srgb, var(--card), transparent 6%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  box-shadow: 0 20px 58px rgba(3, 12, 31, .08);
  overflow: hidden;
}
.pp-content-panel {
  display: none;
  min-height: 355px;
  padding: clamp(22px, 3vw, 34px);
}
.pp-content-panel.is-active {
  display: block;
  animation: ppPanelIn .28s ease both;
}
.pp-panel-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  direction: ltr;
  color: var(--pp-accent);
  background: color-mix(in srgb, var(--pp-accent), transparent 91%);
  border: 1px solid color-mix(in srgb, var(--pp-accent), transparent 76%);
  font-size: 11px;
  font-weight: 950;
}
.pp-content-panel h3 { margin: 14px 0 10px; color: var(--text); font-size: 24px; line-height: 1.6; font-weight: 950; }
.pp-content-panel p { margin: 0 0 18px; max-width: 760px; color: var(--muted); font-size: 14px; line-height: 2; }
.pp-content-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pp-content-panel li {
  position: relative;
  padding: 12px 38px 12px 14px;
  border-radius: 16px;
  color: var(--text);
  background: color-mix(in srgb, var(--background-1), transparent 30%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.8;
}
.pp-content-panel li::before {
  content: "";
  position: absolute;
  right: 14px;
  top: 19px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--pp-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pp-accent), transparent 92%);
}

.pp-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}
.pp-flow::before {
  content: "";
  position: absolute;
  right: 9%;
  left: 9%;
  top: 34px;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pp-accent), transparent 54%), transparent);
  opacity: .8;
}
.pp-flow-step {
  position: relative;
  z-index: 1;
  min-height: 210px;
  padding: 0 4px;
  text-align: center;
}
.pp-flow-step span {
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: var(--pp-accent);
  background: color-mix(in srgb, var(--card), transparent 4%);
  border: 1px solid color-mix(in srgb, var(--pp-accent), transparent 58%);
  box-shadow: 0 14px 36px rgba(3, 12, 31, .08);
  direction: ltr;
  font-size: 15px;
  font-weight: 950;
}
.pp-flow-step h3 { margin: 0 0 8px; color: var(--text); font-size: 16px; font-weight: 950; }
.pp-flow-step p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.95; }

.pp-buy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}
.pp-buy-copy {
  padding: clamp(24px, 3vw, 34px);
  border-radius: 30px;
  background: color-mix(in srgb, var(--card), transparent 8%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
}
.pp-buy-copy h2 { margin: 8px 0 10px; max-width: 780px; color: var(--text); font-size: clamp(24px, 3vw, 36px); line-height: 1.55; font-weight: 950; }
.pp-buy-copy > p { margin: 0; max-width: 760px; color: var(--muted); font-size: 14px; line-height: 2; }
.pp-audience-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.pp-audience-grid div {
  min-height: 128px;
  padding: 16px;
  border-radius: 20px;
  background: var(--background-1);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%);
}
.pp-audience-grid [data-hugeicon] { color: var(--pp-accent); }
.pp-audience-grid strong { display: block; margin-top: 12px; color: var(--text); font-size: 14px; font-weight: 950; }
.pp-audience-grid small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.8; font-weight: 780; }
.pp-price-card {
  position: sticky;
  top: 94px;
  padding: 22px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--pp-primary), transparent 88%), transparent 45%),
    color-mix(in srgb, var(--card), transparent 3%);
  border: 1px solid color-mix(in srgb, var(--pp-accent), transparent 64%);
  box-shadow: 0 24px 72px rgba(3, 12, 31, .12);
}
.pp-price-card__head span {
  color: var(--pp-accent);
  font-size: 12px;
  font-weight: 950;
}
.pp-price-card__head strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.55;
  font-weight: 950;
}
.pp-price-card__head p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.pp-check-list {
  margin: 18px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.pp-check-list li {
  position: relative;
  padding: 10px 34px 10px 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--background-1), transparent 35%);
  color: var(--text);
  font-size: 12px;
  font-weight: 860;
}
.pp-check-list li::before {
  content: "✓";
  position: absolute;
  right: 10px;
  top: 9px;
  color: var(--pp-accent);
  font-weight: 950;
}
.pp-buy-btn { width: 100%; }
.pp-secondary-link {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.pp-secondary-link:hover { color: var(--text-hover); }

.pp-section--faq { padding-top: 34px; padding-bottom: 72px; }
.pp-faq-list { display: grid; gap: 12px; }
.pp-faq-item {
  width: 100%;
  display: grid;
  gap: 0;
  text-align: start;
  padding: 18px 20px;
  border-radius: 22px;
  color: var(--text);
  background: color-mix(in srgb, var(--card), transparent 6%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  cursor: pointer;
  font: inherit;
  transition: .22s ease;
}
.pp-faq-item span { font-size: 14px; font-weight: 950; }
.pp-faq-item p {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 2;
  transition: max-height .3s ease, margin-top .3s ease;
}
.pp-faq-item.is-open {
  border-color: color-mix(in srgb, var(--pp-accent), transparent 64%);
  background: color-mix(in srgb, var(--pp-accent), transparent 94%);
}
.pp-faq-item.is-open p { max-height: 220px; margin-top: 10px; }

@keyframes ppArtFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes ppChipFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}
@keyframes ppPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pp-package-art,
  .pp-art-chip,
  .pp-content-panel.is-active { animation: none !important; }
}
@media (max-width: 1024px) {
  .pp-hero__box,
  .pp-buy-layout { grid-template-columns: 1fr; }
  .pp-hero__visual { min-height: 330px; }
  .pp-package-art { width: min(100%, 340px); }
  .pp-price-card { position: static; }
  .pp-audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-flow::before { display: none; }
}
@media (max-width: 820px) {
  .pp-stats-grid,
  .pp-content-panel ul { grid-template-columns: 1fr 1fr; }
  .pp-content-layout { grid-template-columns: 1fr; }
  .pp-content-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-section-head { display: block; }
  .pp-light-link { margin-top: 14px; }
}
@media (max-width: 620px) {
  .pp-hero { padding-top: 30px; }
  .pp-hero__box { padding: 22px; border-radius: 26px; }
  .pp-hero__content h1 { font-size: 30px; }
  .pp-hero__actions .btn { width: 100%; }
  .pp-stats-grid,
  .pp-content-tabs,
  .pp-content-panel ul,
  .pp-audience-grid,
  .pp-flow { grid-template-columns: 1fr; }
  .pp-hero__visual { min-height: 292px; }
  .pp-package-art { width: min(100%, 292px); }
  .pp-art-chip { min-width: 88px; min-height: 52px; padding: 8px 10px; }
  .pp-art-chip b { font-size: 11px; }
  .pp-art-core { width: 148px; height: 148px; border-radius: 38px; }
  .pp-section { padding: 40px 0; }
}

/* --------------------------------------------------------------------------
   Project packages listing and detail pages
   -------------------------------------------------------------------------- */
.project-packages-page,
.package-detail-page {
  --pkg-color: var(--info);
  position: relative;
  overflow: hidden;
  min-height: 70vh;
  isolation: isolate;
}
.project-packages-page::before,
.package-detail-page::before {
  content: "";
  position: absolute;
  inset-inline-start: -260px;
  top: 100px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--info), transparent 86%), transparent 70%);
  filter: blur(8px);
}
.project-packages-page > section,
.package-detail-page > section { position: relative; z-index: 1; }

.pkg-list-hero { padding: 48px 0 24px; }
.pkg-list-hero__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 34px;
  align-items: center;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 54%);
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--info), transparent 88%), transparent 30%),
    linear-gradient(145deg, color-mix(in srgb, var(--card), transparent 4%), color-mix(in srgb, var(--background-1), transparent 0%));
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.pkg-list-hero__content h1 {
  margin: 12px 0 14px;
  max-width: 820px;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.44;
  font-weight: 950;
  letter-spacing: -.7px;
}
.pkg-list-hero__content p {
  max-width: 790px;
  margin: 0;
  color: var(--grey-3);
  font-size: 15px;
  line-height: 2.15;
}
.pkg-list-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.pkg-list-hero__panel { display: grid; place-items: center; min-height: 290px; }
.pkg-mini-board {
  width: min(100%, 320px);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
}
.pkg-mini-board__glow {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--info), transparent 68%), transparent 68%);
  filter: blur(18px);
}
.pkg-mini-board::before,
.pkg-mini-board::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--info), transparent 42%);
}
.pkg-mini-board::before { inset: 8%; animation: pkgOrbit 9s linear infinite; }
.pkg-mini-board::after { inset: 22%; animation: pkgOrbit 13s linear reverse infinite; }
.pkg-mini-board__box {
  position: relative;
  z-index: 2;
  width: 180px;
  min-height: 144px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--info), transparent 42%);
  background: color-mix(in srgb, var(--card), transparent 7%);
  box-shadow: 0 24px 70px rgba(3,12,31,.14), inset 0 0 0 1px color-mix(in srgb, #fff, transparent 88%);
}
.pkg-mini-board__box b { font-size: 23px; font-weight: 950; color: color-mix(in srgb, var(--info), var(--text) 38%); direction: ltr; }
.pkg-mini-board__box small { color: var(--muted); font-size: 11px; font-weight: 900; direction: ltr; }
.pkg-mini-board__row,
.pkg-mini-board__stack { position: absolute; z-index: 3; display: flex; gap: 8px; }
.pkg-mini-board__row { top: 54px; inset-inline-start: 20px; }
.pkg-mini-board__row span { width: 34px; height: 34px; border-radius: 12px; background: color-mix(in srgb, var(--info), transparent 78%); border: 1px solid color-mix(in srgb, var(--info), transparent 50%); }
.pkg-mini-board__stack { bottom: 50px; inset-inline-end: 18px; flex-direction: column; }
.pkg-mini-board__stack i { width: 74px; height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--info), transparent 78%); }
@keyframes pkgOrbit { to { transform: rotate(360deg); } }

.pkg-list-section { padding: 26px 0 76px; }
.pkg-list-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.pkg-list-toolbar h2 { margin: 8px 0 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.55; font-weight: 950; }
.pkg-search {
  width: min(100%, 420px);
  height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 52%);
  box-shadow: var(--card-shadow-soft, 0 14px 34px rgba(3,12,31,.08));
}
.pkg-search span { color: var(--muted); }
.pkg-search input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}
.pkg-filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.pkg-filter {
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 50%);
  background: color-mix(in srgb, var(--card), transparent 8%);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: var(--speed);
}
.pkg-filter:hover,
.pkg-filter.is-active {
  color: color-mix(in srgb, var(--info), var(--text) 35%);
  border-color: color-mix(in srgb, var(--info), transparent 45%);
  background: color-mix(in srgb, var(--info), transparent 88%);
}
.pkg-count-line { color: var(--muted); font-size: 12px; font-weight: 850; margin-bottom: 18px; }
.pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pkg-list-card {
  position: relative;
  min-height: 342px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 10% 6%, color-mix(in srgb, var(--pkg-color), transparent 86%), transparent 34%),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 54%);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: .24s ease;
  animation: pkgCardIn .56s ease both;
  animation-delay: var(--pkg-delay, 0ms);
}
.pkg-list-card::after {
  content: "";
  position: absolute;
  inset-inline-end: -40px;
  top: -44px;
  width: 140px;
  height: 140px;
  border-radius: 44px;
  background: color-mix(in srgb, var(--pkg-color), transparent 90%);
  transform: rotate(16deg);
}
.pkg-list-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--pkg-color), transparent 48%); }
@keyframes pkgCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pkg-list-card__top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.pkg-list-card__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: color-mix(in srgb, var(--pkg-color), var(--text) 22%);
  background: color-mix(in srgb, var(--pkg-color), transparent 86%);
  border: 1px solid color-mix(in srgb, var(--pkg-color), transparent 46%);
  font-weight: 950;
  direction: ltr;
}
.pkg-list-card__meta { min-width: 0; flex: 1; }
.pkg-list-card__meta span { display: block; color: var(--text); font-size: 13px; font-weight: 950; }
.pkg-list-card__meta small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 850; }
.pkg-list-card__badge { height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--pkg-color), transparent 86%); color: color-mix(in srgb, var(--pkg-color), var(--text) 28%); font-size: 10px; font-weight: 950; }
.pkg-list-card h3 { position: relative; z-index: 1; margin: 18px 0 10px; color: var(--text); font-size: 18px; line-height: 1.75; font-weight: 950; }
.pkg-list-card p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 13px; line-height: 2; }
.pkg-tool-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pkg-tool-row span { height: 30px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--soft); color: var(--muted); border: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%); font-size: 11px; font-weight: 900; direction: ltr; }
.pkg-list-card__foot { position: relative; z-index: 1; margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%); }
.pkg-price strong { display: block; color: var(--text); font-size: 15px; font-weight: 950; }
.pkg-price del { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.pkg-list-card__foot a { height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 14px; background: color-mix(in srgb, var(--pkg-color), transparent 86%); color: color-mix(in srgb, var(--pkg-color), var(--text) 25%); font-size: 12px; font-weight: 950; white-space: nowrap; }
.pkg-empty { grid-column: 1/-1; min-height: 160px; display: grid; place-items: center; border-radius: 24px; background: var(--card); color: var(--muted); border: 1px dashed color-mix(in srgb, var(--border-primary), transparent 40%); font-weight: 900; }

.pkg-detail-hero { padding: 38px 0 24px; }
.pkg-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--muted); font-size: 12px; font-weight: 850; }
.pkg-breadcrumb a { color: var(--muted); }
.pkg-breadcrumb b { color: var(--text); font-weight: 950; }
.pkg-detail-hero__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  align-items: stretch;
}
.pkg-detail-hero__content,
.pkg-detail-card,
.pkg-detail-block,
.pkg-side-box {
  border-radius: 30px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 54%);
  box-shadow: var(--card-shadow);
}
.pkg-detail-hero__content {
  padding: clamp(24px, 4vw, 42px);
  background:
    radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--pkg-color), transparent 86%), transparent 38%),
    var(--card);
}
.pkg-detail-badge { display: inline-flex; height: 32px; align-items: center; padding: 0 12px; border-radius: 999px; background: color-mix(in srgb, var(--pkg-color), transparent 86%); color: color-mix(in srgb, var(--pkg-color), var(--text) 28%); font-size: 12px; font-weight: 950; }
.pkg-detail-hero__content h1 { margin: 16px 0 12px; font-size: clamp(28px, 4vw, 48px); line-height: 1.5; font-weight: 950; }
.pkg-detail-hero__content p { max-width: 760px; margin: 0; color: var(--grey-3); font-size: 15px; line-height: 2.15; }
.pkg-detail-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pkg-detail-tools span { height: 32px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; background: var(--soft); color: var(--muted); border: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%); font-size: 11px; font-weight: 900; direction: ltr; }
.pkg-detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.pkg-detail-card { padding: 22px; display: flex; flex-direction: column; gap: 12px; background: radial-gradient(circle at 20% 16%, color-mix(in srgb, var(--pkg-color), transparent 84%), transparent 42%), var(--card); }
.pkg-detail-card__icon { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--pkg-color), transparent 46%); background: color-mix(in srgb, var(--pkg-color), transparent 86%); color: color-mix(in srgb, var(--pkg-color), var(--text) 22%); font-size: 20px; font-weight: 950; direction: ltr; }
.pkg-detail-card > span { color: var(--muted); font-size: 12px; font-weight: 900; }
.pkg-detail-card > strong { color: var(--text); font-size: 23px; font-weight: 950; }
.pkg-detail-card > del { color: var(--muted); font-size: 13px; }
.pkg-detail-card ul { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.pkg-detail-card li { padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--background-1), transparent 8%); border: 1px solid color-mix(in srgb, var(--border-primary), transparent 68%); }
.pkg-detail-card li strong { display: block; color: var(--text); font-size: 13px; font-weight: 950; }
.pkg-detail-card li span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 820; }
.pkg-detail-section { padding: 22px 0 76px; }
.pkg-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.pkg-detail-main { display: grid; gap: 18px; }
.pkg-detail-block { padding: clamp(20px, 3vw, 30px); }
.pkg-detail-block__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pkg-detail-block__head span { color: var(--pkg-color); }
.pkg-detail-block__head h2 { margin: 0; font-size: 22px; line-height: 1.7; font-weight: 950; }
.pkg-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pkg-feature-list div { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 18px; background: var(--soft); border: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%); }
.pkg-feature-list span { color: var(--pkg-color); flex: 0 0 auto; margin-top: 3px; }
.pkg-feature-list p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.9; font-weight: 850; }
.pkg-steps { display: grid; gap: 10px; counter-reset: step; }
.pkg-step { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 12px; }
.pkg-step span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 18px; color: color-mix(in srgb, var(--pkg-color), var(--text) 20%); background: color-mix(in srgb, var(--pkg-color), transparent 88%); border: 1px solid color-mix(in srgb, var(--pkg-color), transparent 50%); font-size: 13px; font-weight: 950; direction: ltr; }
.pkg-step p { margin: 0; padding: 14px 16px; border-radius: 18px; color: var(--grey-3); background: var(--soft); border: 1px solid color-mix(in srgb, var(--border-primary), transparent 74%); font-size: 13px; line-height: 1.9; font-weight: 820; }
.pkg-file-tree { display: flex; flex-wrap: wrap; gap: 10px; direction: ltr; justify-content: flex-end; }
.pkg-file { height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 14px; background: color-mix(in srgb, var(--background-1), transparent 6%); border: 1px solid color-mix(in srgb, var(--border-primary), transparent 68%); color: var(--text); font-size: 12px; font-weight: 900; }
.pkg-file i { color: var(--pkg-color); }
.pkg-detail-side { position: sticky; top: 100px; display: grid; gap: 16px; }
.pkg-side-box { padding: 20px; }
.pkg-side-box--accent { background: radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--pkg-color), transparent 86%), transparent 46%), var(--card); }
.pkg-side-box h3 { margin: 0 0 12px; font-size: 16px; font-weight: 950; }
.pkg-side-box ul { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.pkg-side-box li { color: var(--muted); font-size: 13px; line-height: 1.9; font-weight: 850; padding-inline-start: 0; }
.pkg-side-box li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 8px; border-radius: 50%; border: 2px solid var(--pkg-color); vertical-align: middle; }
.pkg-back-link { min-height: 48px; display: grid; place-items: center; border-radius: 18px; color: color-mix(in srgb, var(--pkg-color), var(--text) 24%); background: color-mix(in srgb, var(--pkg-color), transparent 88%); border: 1px solid color-mix(in srgb, var(--pkg-color), transparent 54%); font-size: 13px; font-weight: 950; }
@media (max-width: 1020px) {
  .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkg-detail-hero__box,
  .pkg-detail-layout { grid-template-columns: 1fr; }
  .pkg-detail-side { position: static; }
}
@media (max-width: 760px) {
  .pkg-list-hero { padding-top: 30px; }
  .pkg-list-hero__box { grid-template-columns: 1fr; padding: 22px; border-radius: 26px; }
  .pkg-list-hero__panel { min-height: 220px; }
  .pkg-mini-board { width: min(100%, 250px); }
  .pkg-list-toolbar { flex-direction: column; align-items: stretch; }
  .pkg-search { width: 100%; }
  .pkg-grid { grid-template-columns: 1fr; }
  .pkg-list-card { min-height: auto; }
  .pkg-list-card__foot { align-items: flex-start; flex-direction: column; }
  .pkg-list-card__foot a { width: 100%; }
  .pkg-detail-hero { padding-top: 28px; }
  .pkg-detail-card { order: -1; }
  .pkg-feature-list { grid-template-columns: 1fr; }
  .pkg-step { grid-template-columns: 48px minmax(0, 1fr); }
  .pkg-step span { width: 44px; height: 44px; border-radius: 15px; }
}

/* Data2Learn patch: keep auth autofill visually identical to the designed input wrapper. */
.auth-page .field__control { overflow: hidden; }
.auth-page .field__control input:-webkit-autofill,
.auth-page .field__control input:-webkit-autofill:hover,
.auth-page .field__control input:-webkit-autofill:focus,
.auth-page .field__control input:-webkit-autofill:active,
.auth-page .field__control input:autofill {
  border: 0 !important;
  outline: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 1000px var(--input, color-mix(in srgb, var(--background-2), #fff 2%)) inset !important;
}

/* Data2Learn patch: Django-connected public dataset list. */
.public-dataset-card__cover { isolation: isolate; }
.public-dataset-card__thumb {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*opacity: .26;*/
  filter: saturate(1.08) contrast(1.05);
}
.public-dataset-price {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.7;
}
.public-dataset-price > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.public-dataset-price svg {
  width: 16px;
  height: 18px;
  flex: 0 0 auto;
  margin-inline-start: 4px;
}
.public-dataset-price .line-through {
  color: var(--muted);
  text-decoration: line-through;
  opacity: .76;
  font-size: 12px;
  font-weight: 850;
}
.dataset-discount-badge {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 10px;
  color: var(--danger, #ef4444);
  background: color-mix(in srgb, var(--danger, #ef4444), transparent 88%);
  border: 1px solid color-mix(in srgb, var(--danger, #ef4444), transparent 68%);
  font-size: 12px;
  font-weight: 950;
}
.public-dataset-empty.is-empty { display: grid; }
.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.catalog-page {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  background: color-mix(in srgb, var(--card), var(--background-1) 12%);
  color: var(--muted);
  font-weight: 950;
}
.catalog-page:hover,
.catalog-page.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary-2), transparent 40%);
  background: color-mix(in srgb, var(--primary-1), transparent 88%);
}
.compact-field small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

/* Data2Learn patch v4: remove autofill corner/border artifacts completely. */
.auth-page .field__control {
  overflow: hidden;
  background: var(--input, color-mix(in srgb, var(--background-2), #fff 2%));
  background-clip: padding-box;
}
.auth-page .field__control input,
.auth-page .field__control input:-webkit-autofill,
.auth-page .field__control input:-webkit-autofill:hover,
.auth-page .field__control input:-webkit-autofill:focus,
.auth-page .field__control input:-webkit-autofill:active,
.auth-page .field__control input:autofill {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  border-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-box-shadow: 0 0 0 1000px var(--input, color-mix(in srgb, var(--background-2), #fff 2%)) inset !important;
  box-shadow: 0 0 0 1000px var(--input, color-mix(in srgb, var(--background-2), #fff 2%)) inset !important;
}

/* Data2Learn patch v4: Django-connected dataset detail helpers. */
.dataset-page-toast {
  position: fixed;
  top: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 10000;
  min-width: min(420px, calc(100vw - 32px));
  padding: 13px 16px;
  border-radius: 18px;
  border: 1px solid var(--border-primary);
  background: color-mix(in srgb, var(--card), var(--background-1) 10%);
  color: var(--text);
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  text-align: center;
  font-weight: 800;
}
.dataset-page-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.dataset-page-toast[data-toast-type="success"] { border-color: color-mix(in srgb, var(--success, #16a34a), transparent 55%); }
.dataset-page-toast[data-toast-type="error"] { border-color: color-mix(in srgb, var(--danger, #ef4444), transparent 45%); }
.dataset-detail-price-row strong { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dataset-detail-price-row .line-through,
.public-dataset-price .line-through { opacity: .6; text-decoration: line-through; font-size: .86em; }
.dataset-admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-1), transparent 18%);
  color: var(--button-text, #fff);
  font-size: 11px;
  margin-inline-start: 6px;
}
.comment--pending {
  border-color: color-mix(in srgb, var(--warning, #f59e0b), transparent 50%);
  background: color-mix(in srgb, var(--warning, #f59e0b), transparent 92%);
}
.dataset-login-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.dataset-related-section { margin-top: 36px; }
.public-datasets-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .public-datasets-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .public-datasets-grid--related { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Connected contact/course templates
-------------------------------------------------------------------------- */
.form-toast--error {
  color: var(--danger, #ef4444);
  background: color-mix(in srgb, var(--danger, #ef4444), transparent 88%);
  border-color: color-mix(in srgb, var(--danger, #ef4444), transparent 66%);
}
.form-message + .form-message { margin-top: 6px; }

.training-course-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .86;
  transition: transform .28s ease, opacity .2s ease;
}
.training-course-card__cover:has(.training-course-card__thumb)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.62));
}
.training-course-card:hover .training-course-card__thumb { transform: scale(1.04); opacity: .94; }
.training-course-card__cover:has(.training-course-card__thumb) span,
.training-course-card__cover:has(.training-course-card__thumb)::after { z-index: 2; }
.training-course-price {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.course-filter-form { display: grid; gap: 16px; }
.course-filter-form .dataset-filter-group { margin: 0; }

/* Data2Learn patch v7: Django-connected course detail helpers. */
.course-purchase-card__cover { position: relative; overflow: hidden; }
.course-purchase-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.course-purchase-card__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.58));
  z-index: 1;
}
.course-purchase-card__cover strong { position: relative; z-index: 2; }
.course-price-row .line-through,
.training-course-card__footer .line-through {
  opacity: .6;
  text-decoration: line-through;
  font-size: .86em;
}
.course-price-row strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.course-attach-row {
  align-items: center;
  flex-wrap: wrap;
}
.course-attach-row .comment__reply {
  margin-inline-start: auto;
}
.comment--pending {
  border-color: color-mix(in srgb, var(--warning, #f59e0b), transparent 55%);
}
.course-login-comment {
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}
.course-related-section { margin-top: 40px; }
.training-courses-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .training-courses-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .training-courses-grid--related { grid-template-columns: 1fr; }
}

/* Data2Learn patch v8: article/post Django binding helpers. */
.article-list-card__cover.has-image,
.article-featured-card__art.has-image { background: var(--card); }
.article-list-card__thumb,
.article-featured-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.article-list-card__cover:has(.article-list-card__thumb)::before,
.article-list-card__cover:has(.article-list-card__thumb)::after { display: none; }
.article-list-card__cover:has(.article-list-card__thumb)::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0;
  transform: none;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.54));
  z-index: 0;
}
.article-featured-card__art { position: relative; overflow: hidden; }
.article-featured-card__thumb { position: absolute; }
.article-share-row .btn { width: 100%; min-height: 42px; border-radius: 14px; }
.article-rich-text img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 18px auto;
  border-radius: 18px;
}
.article-rich-text pre {
  display: block !important;
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
  white-space: pre-wrap !important;
  overflow-x: auto !important;
  background: color-mix(in srgb, var(--grey-8), #000 18%) !important;
  color: #f1f1f1 !important;
  padding: 16px !important;
  border-radius: 16px !important;
  margin: 18px 0 !important;
  line-height: 1.7 !important;
  font-family: Consolas, Monaco, "Courier New", monospace !important;
}
.article-rich-text pre code {
  display: block !important;
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
  white-space: pre-wrap !important;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  font-family: Consolas, Monaco, "Courier New", monospace !important;
}
.article-rich-text :not(pre) > code {
  direction: ltr;
  unicode-bidi: isolate;
  background: color-mix(in srgb, var(--grey-7), #000 12%);
  color: var(--text);
  padding: 2px 7px;
  border-radius: 7px;
  font-family: Consolas, Monaco, "Courier New", monospace;
}

/* --------------------------------------------------------------------------
   SweetAlert2 global theme
   Makes every Swal modal/toast visually match the Data2Learn template.
-------------------------------------------------------------------------- */
:root {
  --danger: var(--error);
  --swal-radius: 26px;
  --swal-radius-sm: 16px;
}

.swal2-container {
  direction: rtl;
  font-family: "Vazirmatn", "Yekan Bakh", "IRANSansX", Tahoma, Arial, sans-serif !important;
  z-index: 99999 !important;
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
  background:
    radial-gradient(720px 380px at 14% 12%, color-mix(in srgb, var(--primary-1), transparent 86%), transparent 64%),
    radial-gradient(680px 420px at 88% 6%, color-mix(in srgb, var(--info), transparent 84%), transparent 68%),
    rgba(8, 11, 14, .66) !important;
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
}

.swal2-popup,
.d2l-swal-popup {
  width: min(92vw, 465px) !important;
  padding: 24px 24px 22px !important;
  border-radius: var(--swal-radius) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card), #fff 4%), color-mix(in srgb, var(--background-2), #000 4%)) !important;
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 28%) !important;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .30),
    0 12px 36px color-mix(in srgb, var(--primary-1), transparent 90%) !important;
  overflow: hidden !important;
  isolation: isolate;
}

.swal2-popup::before,
.d2l-swal-popup::before {
  content: "";
  position: absolute;
  inset: -95px auto auto -95px;
  width: 210px;
  height: 210px;
  border-radius: 72px;
  background: color-mix(in srgb, var(--primary-1), transparent 88%);
  transform: rotate(16deg);
  pointer-events: none;
  z-index: -1;
}

.swal2-popup::after,
.d2l-swal-popup::after {
  content: "";
  position: absolute;
  inset: auto -110px -120px auto;
  width: 260px;
  height: 220px;
  border-radius: 88px;
  background: color-mix(in srgb, var(--info), transparent 89%);
  transform: rotate(-22deg);
  pointer-events: none;
  z-index: -1;
}

.swal2-title,
.d2l-swal-title,
.swal2-html-container h1,
.swal2-html-container h2,
.swal2-html-container h3,
.swal2-html-container h4,
.swal2-html-container h5 {
  color: var(--text) !important;
  font-family: inherit !important;
  font-weight: 950 !important;
  letter-spacing: -.25px;
  line-height: 1.75 !important;
}

.swal2-title,
.d2l-swal-title {
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: clamp(20px, 2vw, 25px) !important;
  text-align: center !important;
}

.swal2-html-container,
.d2l-swal-html {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 2 !important;
  text-align: center !important;
  overflow: visible !important;
}

.swal2-html-container p,
.d2l-swal-html p {
  color: var(--muted) !important;
  margin: 8px 0 14px !important;
  line-height: 2 !important;
}

.swal2-html-container hr,
.d2l-swal-html hr {
  height: 1px;
  margin: 13px 0 16px !important;
  border: 0 !important;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border-primary), transparent 20%), transparent) !important;
  opacity: 1 !important;
}

.swal2-close,
.d2l-swal-close {
  width: 42px !important;
  height: 42px !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  border-radius: 15px !important;
  background: var(--soft) !important;
  color: var(--muted) !important;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 45%) !important;
  font-family: inherit !important;
  font-size: 28px !important;
  line-height: 42px !important;
  transition: .2s ease !important;
  box-shadow: none !important;
}

.swal2-close:hover,
.d2l-swal-close:hover {
  color: var(--text-hover) !important;
  border-color: color-mix(in srgb, var(--primary-1), transparent 45%) !important;
  transform: translateY(-2px);
}

.swal2-icon,
.d2l-swal-icon {
  width: 72px !important;
  height: 72px !important;
  margin: 4px auto 14px !important;
  border-width: 3px !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
}

.swal2-icon.swal2-success,
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: color-mix(in srgb, var(--success1), transparent 18%) !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--success1) !important;
}
.swal2-icon.swal2-error {
  border-color: color-mix(in srgb, var(--error), transparent 18%) !important;
  color: var(--error) !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--error) !important;
}
.swal2-icon.swal2-warning {
  border-color: color-mix(in srgb, var(--warning1), transparent 10%) !important;
  color: var(--warning1) !important;
}
.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
  border-color: color-mix(in srgb, var(--info), transparent 12%) !important;
  color: var(--info) !important;
}

.swal2-actions,
.d2l-swal-actions {
  display: none !important;
}

.swal2-styled,
.d2l-swal-btn,
.swal2-html-container .btn,
.swal2-html-container .btn-main,
.swal2-html-container .btn-success,
.swal2-html-container .btn-danger,
.swal2-html-container .btn-outline,
.swal2-html-container .btn-secondary {
  min-width: 118px;
  min-height: 46px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: .2s ease !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.swal2-styled:focus,
.swal2-styled:focus-visible,
.d2l-swal-btn:focus,
.swal2-html-container .btn:focus,
.swal2-html-container .btn-main:focus,
.swal2-html-container .btn-success:focus,
.swal2-html-container .btn-danger:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-1), transparent 84%) !important;
}

.swal2-confirm,
.d2l-swal-btn--confirm,
.swal2-html-container .btn-main,
.swal2-html-container .btn-success {
  background: var(--primary-1) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(228,0,43,.18) !important;
}

.swal2-confirm:hover,
.d2l-swal-btn--confirm:hover,
.swal2-html-container .btn-main:hover,
.swal2-html-container .btn-success:hover {
  background: var(--primary-2) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.swal2-cancel,
.d2l-swal-btn--cancel,
.swal2-deny,
.d2l-swal-btn--deny,
.swal2-html-container .btn-outline,
.swal2-html-container .btn-secondary {
  background: transparent !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--border-primary), transparent 10%) !important;
}

.swal2-cancel:hover,
.d2l-swal-btn--cancel:hover,
.swal2-deny:hover,
.d2l-swal-btn--deny:hover,
.swal2-html-container .btn-outline:hover,
.swal2-html-container .btn-secondary:hover {
  color: var(--text-hover) !important;
  border-color: color-mix(in srgb, var(--primary-1), transparent 38%) !important;
  transform: translateY(-2px);
}

.swal2-html-container .btn-danger {
  background: color-mix(in srgb, var(--error), #000 5%) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--error), transparent 82%) !important;
}
.swal2-html-container .btn-danger:hover {
  background: var(--error) !important;
  transform: translateY(-2px);
}

.swal2-input,
.swal2-textarea,
.swal2-select,
.d2l-swal-input,
.swal2-html-container input,
.swal2-html-container textarea,
.swal2-html-container select {
  width: 100% !important;
  min-height: 50px !important;
  margin: 10px 0 12px !important;
  padding: 0 16px !important;
  border-radius: 15px !important;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 25%) !important;
  background: var(--input) !important;
  color: var(--text) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  outline: 0 !important;
  caret-color: var(--primary-1);
}

.swal2-textarea,
.swal2-html-container textarea {
  min-height: 110px !important;
  padding-top: 12px !important;
  line-height: 2 !important;
  resize: vertical;
}

.swal2-input::placeholder,
.swal2-textarea::placeholder,
.swal2-html-container input::placeholder,
.swal2-html-container textarea::placeholder {
  color: color-mix(in srgb, var(--muted), transparent 25%) !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus,
.swal2-html-container input:focus,
.swal2-html-container textarea:focus,
.swal2-html-container select:focus {
  border-color: color-mix(in srgb, var(--primary-1), transparent 52%) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-1), transparent 90%) !important;
}

.swal2-input:-webkit-autofill,
.swal2-html-container input:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--primary-1) !important;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 25%) !important;
  box-shadow: 0 0 0 1000px var(--input) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--input) inset !important;
  transition: background-color 999999s ease-in-out 0s !important;
}

.swal2-validation-message {
  margin: 12px 0 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--error), transparent 88%) !important;
  color: var(--error) !important;
  border: 1px solid color-mix(in srgb, var(--error), transparent 62%) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.9 !important;
}

.swal2-footer {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 45%) !important;
  color: var(--muted) !important;
  font-family: inherit !important;
  font-weight: 800 !important;
}

.swal2-timer-progress-bar,
.d2l-swal-progress {
  height: 4px !important;
  background: linear-gradient(90deg, var(--primary-1), var(--info)) !important;
}

.swal2-loader {
  border-color: color-mix(in srgb, var(--primary-1), transparent 75%) transparent color-mix(in srgb, var(--primary-1), transparent 75%) transparent !important;
}

.swal2-container.swal2-top-end > .swal2-popup,
.swal2-container.swal2-top-start > .swal2-popup,
.swal2-container.swal2-bottom-end > .swal2-popup,
.swal2-container.swal2-bottom-start > .swal2-popup,
.swal2-popup.swal2-toast {
  width: min(420px, calc(100vw - 24px)) !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  align-items: center !important;
}

.swal2-popup.swal2-toast .swal2-title {
  font-size: 13px !important;
  text-align: right !important;
  margin: 0 !important;
}

.swal2-popup.swal2-toast .swal2-html-container {
  font-size: 12px !important;
  text-align: right !important;
  margin: 2px 0 0 !important;
}

.swal2-popup.swal2-toast .swal2-icon {
  width: 34px !important;
  height: 34px !important;
  margin: 0 0 0 10px !important;
}

.swal2-html-container .text-end { text-align: right !important; }
.swal2-html-container .text-center { text-align: center !important; }
.swal2-html-container .text-success { color: var(--success1) !important; }
.swal2-html-container .w-75 { width: 75% !important; max-width: 100%; }
.swal2-html-container .mt-2 { margin-top: .5rem !important; }
.swal2-html-container .mt-4 { margin-top: 1rem !important; }
.swal2-html-container .mb-3 { margin-bottom: .75rem !important; }
.swal2-html-container .ms-0 { margin-inline-start: 0 !important; }
.swal2-html-container .me-0 { margin-inline-end: 0 !important; }
.swal2-html-container .d-none { display: none !important; }
.mb-3 { margin-bottom: .75rem !important; }

@media (max-width: 560px) {
  .swal2-popup,
  .d2l-swal-popup {
    width: calc(100vw - 24px) !important;
    padding: 22px 16px 18px !important;
    border-radius: 22px !important;
  }
  .swal2-styled,
  .d2l-swal-btn {
    width: 100%;
  }
}

/* Course episode detail patch */
.course-episode-video {
  width: 100%;
  min-height: clamp(280px, 42vw, 530px);
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--primary-1), transparent 86%), transparent 31%),
    linear-gradient(135deg, color-mix(in srgb, var(--background-1), #000 14%), color-mix(in srgb, var(--background-2), #000 26%));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface-glass), transparent 62%);
  object-fit: contain;
}

.lesson-attach-list {
  display: grid;
  gap: 12px;
}

.lesson-attach-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 68%);
  background: color-mix(in srgb, var(--background-2), transparent 8%);
}

.lesson-attach-item__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--primary-2);
  border: 1px solid color-mix(in srgb, var(--primary-2), transparent 72%);
  background: color-mix(in srgb, var(--primary-2), transparent 90%);
}

.lesson-attach-item__body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.lesson-attach-item__body strong {
  color: var(--text);
  font-weight: 900;
}

.lesson-attach-item__body span,
.lesson-attach-item__body small {
  color: var(--muted);
  line-height: 1.8;
  font-size: 12px;
}

.lesson-row--button {
  width: 100%;
  appearance: none;
  font-family: inherit;
  cursor: pointer;
  border: 0;
  text-align: right;
}

.lesson-row--empty {
  cursor: default;
}

@media (max-width: 640px) {
  .lesson-attach-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .lesson-attach-item > .comment__reply {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* Compact bookmark buttons */
.training-course-card,
.article-list-card {
  position: relative;
}
.training-course-card__bookmark,
.article-list-card__bookmark {
  position: absolute;
  inset: 14px auto auto 14px;
  z-index: 6;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  color: var(--muted);
  background: color-mix(in srgb, var(--background-2), transparent 6%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--elevation), transparent 58%);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.training-course-card__bookmark:hover,
.article-list-card__bookmark:hover {
  transform: translateY(-2px);
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-1), transparent 45%);
  background: color-mix(in srgb, var(--primary-1), transparent 88%);
}
.training-course-card__bookmark[aria-pressed="true"],
.article-list-card__bookmark[aria-pressed="true"] {
  color: var(--primary-1);
  border-color: color-mix(in srgb, var(--primary-1), transparent 48%);
  background: color-mix(in srgb, var(--primary-1), transparent 86%);
}
.training-course-card__bookmark svg,
.article-list-card__bookmark svg {
  width: 18px;
  height: 18px;
}
.training-course-card__bookmark[aria-pressed="true"] svg,
.article-list-card__bookmark[aria-pressed="true"] svg {
  fill: color-mix(in srgb, var(--primary-1), transparent 84%);
}


/* Search results page + reusable infinite scroll */
.search-results-page {
  min-height: 70vh;
}

.search-results-section {
  padding: 58px 0 86px;
}

.search-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 26px;
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 34%);
  border-radius: 34px;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--primary-1), transparent 82%), transparent 34%),
    radial-gradient(circle at 88% 5%, color-mix(in srgb, var(--info), transparent 84%), transparent 30%),
    color-mix(in srgb, var(--card), transparent 2%);
  box-shadow: var(--page-shadow);
}

.search-hero::after {
  content: "";
  position: absolute;
  inset: auto -70px -130px auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-2), transparent 90%);
  pointer-events: none;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-bottom: 9px;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--primary-2);
  background: color-mix(in srgb, var(--primary-1), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--primary-2), transparent 72%);
  font-size: 12px;
  font-weight: 800;
}

.search-page-form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.search-page-form__control {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 38%);
  background: color-mix(in srgb, var(--input), transparent 4%);
  color: var(--muted);
  transition: border-color var(--speed), box-shadow var(--speed), background var(--speed);
}

.search-page-form__control:focus-within {
  border-color: color-mix(in srgb, var(--primary-2), transparent 42%);
  background: color-mix(in srgb, var(--input), var(--primary-1) 4%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-1), transparent 88%);
}

.search-page-form__control input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
}

.search-page-form__control a {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--soft), transparent 18%);
}

.search-page-form__control a:hover {
  color: var(--text-hover);
}

.search-page-form .btn {
  min-height: 58px;
  padding-inline: 26px;
}

.search-summary-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 22px 0 18px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 42%);
  background: color-mix(in srgb, var(--card), transparent 8%);
}

.search-summary-strip > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.search-summary-strip strong {
  color: var(--primary-2);
  font-size: 25px;
  font-weight: 900;
}

.search-summary-strip span,
.search-summary-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}

.search-summary-strip b {
  color: var(--text);
}

.search-type-tabs {
  margin-bottom: 24px;
}

.search-type-tabs .catalog-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.search-type-tabs .catalog-filter b {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--soft), transparent 4%);
  font-size: 12px;
}

.search-type-tabs .catalog-filter.is-active b,
.search-type-tabs .catalog-filter:hover b {
  color: var(--text);
  background: color-mix(in srgb, var(--primary-1), transparent 76%);
}

.search-results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}

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

.search-result-card {
  overflow: hidden;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 222px;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 45%);
  background: color-mix(in srgb, var(--card), transparent 3%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--elevation), transparent 42%);
  transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed);
}

.search-result-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary-2), transparent 48%);
  box-shadow: 0 20px 48px color-mix(in srgb, var(--elevation), transparent 28%);
}

.search-result-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  color: var(--text);
  background:
    radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--primary-2), transparent 76%), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--soft), var(--primary-1) 7%), color-mix(in srgb, var(--card), var(--info) 8%));
}

.search-result-card--dataset .search-result-card__media {
  background:
    radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--info), transparent 72%), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--soft), var(--info) 10%), color-mix(in srgb, var(--card), var(--success1) 7%));
}

.search-result-card--article .search-result-card__media {
  background:
    radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--warning1), transparent 76%), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--soft), var(--warning1) 8%), color-mix(in srgb, var(--card), var(--primary-1) 6%));
}

.search-result-card__media img {
  width: 100%;
  height: 100%;
  min-height: 222px;
  object-fit: cover;
  transition: transform .3s ease;
}

.search-result-card:hover .search-result-card__media img {
  transform: scale(1.045);
}

.search-result-card__fallback {
  width: 82px;
  height: 82px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, #fff, transparent 78%);
  background: color-mix(in srgb, var(--card), transparent 42%);
  backdrop-filter: blur(12px);
}

.search-result-card__type {
  position: absolute;
  inset: 14px 14px auto auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--card), transparent 20%);
  border: 1px solid color-mix(in srgb, #fff, transparent 78%);
  backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 800;
}

.search-result-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px;
}

.search-result-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.search-result-card__meta span,
.search-result-card__meta i {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft), transparent 9%);
  font-style: normal;
}

.search-result-card__meta span {
  color: var(--primary-2);
  background: color-mix(in srgb, var(--primary-1), transparent 90%);
}

.search-result-card h2 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.8;
}

.search-result-card h2 a {
  color: inherit;
}

.search-result-card h2 a:hover {
  color: var(--text-hover);
}

.search-result-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 2;
}

.search-result-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 55%);
}

.search-result-card__price {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text);
  font-size: 14px;
}

.search-result-card__price .line-through {
  color: var(--muted);
  font-size: 12px;
  text-decoration: line-through;
}

.search-results-sidebar {
  display: grid;
  gap: 14px;
  position: sticky;
  top: calc(var(--nav-offset, 0px) + 92px);
}

.search-side-card {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 44%);
  background: color-mix(in srgb, var(--card), transparent 4%);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--elevation), transparent 54%);
}

.search-side-card h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 16px;
}

.search-side-card p {
  margin: 0;
  color: var(--muted);
  line-height: 2;
  font-size: 13px;
}

.search-side-card > a:not(.btn) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
}

.search-side-card > a:not(.btn):last-child {
  border-bottom: 0;
}

.search-side-card > a:not(.btn):hover {
  color: var(--text-hover);
}

.search-side-card b {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--primary-2);
  background: color-mix(in srgb, var(--primary-1), transparent 88%);
  font-size: 12px;
}

.search-side-card--accent {
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--primary-2), transparent 84%), transparent 38%),
    color-mix(in srgb, var(--card), transparent 5%);
}

.search-side-card--accent .btn {
  margin-top: 16px;
  width: 100%;
}

.search-empty-state {
  grid-column: 1 / -1;
}

.infinite-scroll-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 82px;
  margin-top: 24px;
}

.infinite-scroll-next,
.infinite-scroll-done,
.infinite-scroll-loader {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 42%);
  background: color-mix(in srgb, var(--card), transparent 5%);
  color: var(--text);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--elevation), transparent 62%);
  font-weight: 800;
  font-size: 13px;
}

.infinite-scroll-next:hover {
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-2), transparent 48%);
}

.infinite-scroll-loader b,
.infinite-scroll-done {
  color: var(--muted);
}

.infinite-scroll-spinner {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--border-primary), transparent 42%);
  border-top-color: var(--primary-2);
  animation: d2l-spin .72s linear infinite;
}

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

@media (max-width: 1180px) {
  .search-results-layout {
    grid-template-columns: 1fr;
  }

  .search-results-sidebar {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .search-results-grid {
    grid-template-columns: 1fr;
  }

  .search-summary-strip,
  .search-page-form {
    grid-template-columns: 1fr;
  }

  .search-summary-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .search-results-sidebar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .search-results-section {
    padding-top: 38px;
  }

  .search-hero {
    padding: 22px;
    border-radius: 26px;
  }

  .search-result-card {
    grid-template-columns: 1fr;
  }

  .search-result-card__media,
  .search-result-card__media img {
    min-height: 198px;
  }

  .search-result-card__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .search-result-card__footer .btn {
    width: 100%;
  }
}

/* Dashboard bookmarks dynamic cards */
.bookmark-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.bookmark-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 56%);
  border-radius: 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card), transparent 6%), color-mix(in srgb, var(--background-1), transparent 4%));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--elevation), transparent 62%);
}
.bookmark-card__media {
  position: relative;
  height: 164px;
  display: block;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 24% 22%, color-mix(in srgb, var(--primary-1), transparent 82%), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--background-2), transparent 4%), color-mix(in srgb, var(--card), transparent 4%));
}
.bookmark-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .94;
  transition: transform .24s ease, opacity .24s ease;
}
.bookmark-card:hover .bookmark-card__media img {
  transform: scale(1.035);
  opacity: 1;
}
.bookmark-card__media span {
  position: absolute;
  right: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--text-hover);
  background: color-mix(in srgb, var(--card), transparent 12%);
  border: 1px solid color-mix(in srgb, #fff, transparent 78%);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--elevation), transparent 50%);
  backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bookmark-card__body {
  display: grid;
  gap: 12px;
  padding: 16px;
}
.bookmark-card__body h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 950;
}
.bookmark-card__body h3 a { color: var(--text); }
.bookmark-card__body h3 a:hover { color: var(--text-hover); }
.bookmark-card__body p {
  min-height: 52px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}
.bookmark-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bookmark-card__meta span {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
  font-size: 12px;
  font-weight: 850;
}
.bookmark-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 64%);
}
.bookmark-card__footer strong {
  color: var(--text-hover);
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}
.bookmark-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bookmark-remove-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--error), transparent 52%);
  color: var(--error);
  background: color-mix(in srgb, var(--error), transparent 92%);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  transition: var(--speed);
}
.bookmark-remove-btn:hover {
  color: #fff;
  background: color-mix(in srgb, var(--error), transparent 12%);
  border-color: color-mix(in srgb, var(--error), transparent 18%);
  transform: translateY(-1px);
}
@media (max-width: 1100px) {
  .bookmark-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .bookmark-grid { grid-template-columns: 1fr; }
  .bookmark-card__footer { align-items: flex-start; flex-direction: column; }
  .bookmark-card__actions { width: 100%; }
  .bookmark-card__actions .btn,
  .bookmark-remove-btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   v22 refinements: header search icon, dashboard-like dropdowns, compact scrollbars
   -------------------------------------------------------------------------- */
.search .icon {
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.search[data-site-search] input {
  padding-inline-start: 20px;
  padding-inline-end: 52px;
}

.dataset-cover img,
#datasets .dataset-cover img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.dataset-cover::before,
#datasets .dataset-cover::before,
.dataset-cover::after,
#datasets .dataset-cover::after {
  pointer-events: none;
}

.dataset-cover::before,
#datasets .dataset-cover::before { z-index: 2; }
.dataset-cover::after,
#datasets .dataset-cover::after { z-index: 1; }

.site-search-dropdown,
.header-user-menu__dropdown {
  background: color-mix(in srgb, var(--background-1), var(--card) 8%);
  border-color: color-mix(in srgb, var(--border-primary), transparent 52%);
  box-shadow: 0 24px 54px color-mix(in srgb, var(--elevation), transparent 18%), inset 0 1px 0 color-mix(in srgb, #fff, transparent 94%);
}

.site-search-dropdown__head,
.header-user-menu__head {
  border-radius: 16px;
  background: color-mix(in srgb, var(--card), transparent 38%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%);
}

.site-search-dropdown__head {
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%);
}

.site-search-dropdown__body {
  gap: 5px;
  padding: 10px 0 2px 2px;
}

.site-search-result {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 50px;
  gap: 10px;
  padding: 0 11px;
  border-radius: 15px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.site-search-result:hover,
.site-search-result:focus,
.site-search-result.is-active {
  transform: translateX(-2px);
  background: color-mix(in srgb, var(--card), transparent 28%);
  border-color: transparent;
  color: var(--text);
}

.site-search-result.is-active::before,
.site-search-result:hover::before {
  content: "";
  position: absolute;
  inset: 13px auto 13px 0;
  width: 3px;
  border-radius: 999px;
  background: var(--primary-1);
}

.site-search-result__media {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  box-shadow: none;
}

.site-search-result__title { font-size: 12.5px; }
.site-search-result__text { font-size: 11px; }

.site-search-result__badge {
  min-height: 24px;
  border-radius: 9px;
  padding-inline: 8px;
}

.site-search-submit {
  min-height: 42px;
  border-radius: 14px;
}

.header-user-menu__dropdown {
  width: min(360px, calc(100vw - 28px));
  padding: 12px;
  border-radius: 22px;
}

.header-user-menu__head {
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 8px 10px;
  margin-bottom: 8px;
}

.header-user-menu__head-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--text-hover);
  background: var(--card);
  border-color: color-mix(in srgb, var(--border-primary), transparent 58%);
}

.header-user-menu__links {
  gap: 5px;
  max-height: 314px;
  padding: 0 0 8px 2px;
}

.header-user-menu__links a {
  grid-template-columns: 25px minmax(0, 1fr);
  min-height: 46px;
  gap: 10px;
  padding: 0 13px;
  border-radius: 15px;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

.header-user-menu__links a:hover {
  transform: translateX(-2px);
  background: color-mix(in srgb, var(--card), transparent 28%);
  border-color: transparent;
  color: var(--text);
}

.header-user-menu__links a:hover::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 999px;
  background: var(--primary-1);
}

.header-user-menu__link-icon {
  width: 25px;
  height: 25px;
  border-radius: 0;
  color: color-mix(in srgb, var(--text), var(--muted) 32%);
  background: transparent;
  border: 0;
}

.header-user-menu__links a:hover .header-user-menu__link-icon {
  color: var(--text-hover);
}

.header-user-menu__link-text strong {
  font-size: 12px;
  color: inherit;
}

.header-user-menu__link-text small {
  margin-top: -1px;
  font-size: 10.5px;
}

.header-user-menu__actions {
  padding-top: 8px;
  border-top-color: color-mix(in srgb, var(--border-primary), transparent 72%);
}

.header-user-menu__logout {
  min-height: 42px;
  border-radius: 14px;
}

:where(
  .site-search-dropdown__body,
  .cart-menu__items,
  .header-user-menu__links,
  .header-user-menu__dropdown,
  .dataset-check-list,
  .public-datasets-sidebar .dataset-filter-panel.is-open,
  .swal2-html-container,
  .swal2-popup,
  .auth-toast,
  .form-toast,
  .dashboard-modal,
  .modal,
  [data-scroll-area]
) {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--grey-4), transparent 58%) transparent;
}

:where(
  .site-search-dropdown__body,
  .cart-menu__items,
  .header-user-menu__links,
  .header-user-menu__dropdown,
  .dataset-check-list,
  .public-datasets-sidebar .dataset-filter-panel.is-open,
  .swal2-html-container,
  .swal2-popup,
  .auth-toast,
  .form-toast,
  .dashboard-modal,
  .modal,
  [data-scroll-area]
)::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

:where(
  .site-search-dropdown__body,
  .cart-menu__items,
  .header-user-menu__links,
  .header-user-menu__dropdown,
  .dataset-check-list,
  .public-datasets-sidebar .dataset-filter-panel.is-open,
  .swal2-html-container,
  .swal2-popup,
  .auth-toast,
  .form-toast,
  .dashboard-modal,
  .modal,
  [data-scroll-area]
)::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 12px;
}

:where(
  .site-search-dropdown__body,
  .cart-menu__items,
  .header-user-menu__links,
  .header-user-menu__dropdown,
  .dataset-check-list,
  .public-datasets-sidebar .dataset-filter-panel.is-open,
  .swal2-html-container,
  .swal2-popup,
  .auth-toast,
  .form-toast,
  .dashboard-modal,
  .modal,
  [data-scroll-area]
)::-webkit-scrollbar-thumb {
  min-height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--grey-4), transparent 58%);
}

:where(
  .site-search-dropdown__body,
  .cart-menu__items,
  .header-user-menu__links,
  .header-user-menu__dropdown,
  .dataset-check-list,
  .public-datasets-sidebar .dataset-filter-panel.is-open,
  .swal2-html-container,
  .swal2-popup,
  .auth-toast,
  .form-toast,
  .dashboard-modal,
  .modal,
  [data-scroll-area]
)::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--grey-3), transparent 48%);
}

:where(
  .site-search-dropdown__body,
  .cart-menu__items,
  .header-user-menu__links,
  .header-user-menu__dropdown,
  .dataset-check-list,
  .public-datasets-sidebar .dataset-filter-panel.is-open,
  .swal2-html-container,
  .swal2-popup,
  .auth-toast,
  .form-toast,
  .dashboard-modal,
  .modal,
  [data-scroll-area]
)::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
.site-search-result { position: relative; }

/* --------------------------------------------------------------------------
   v24 search inputs and ticket dashboard refinements
-------------------------------------------------------------------------- */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

.search { position: relative; }
.search .icon {
  right: auto !important;
  left: 19px !important;
}
.search input[type="search"],
.search[data-site-search] input[type="search"] {
  padding-right: 20px !important;
  padding-left: 88px !important;
}

.search-clear-btn {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--card), transparent 22%);
  cursor: pointer;
  transition: color var(--speed), background var(--speed), transform var(--speed), opacity var(--speed);
}
.search-clear-btn[hidden] { display: none !important; }
.search-clear-btn:hover,
.search-clear-btn:focus-visible {
  outline: 0;
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 88%);
  transform: translateY(-1px);
}
.search > .search-clear-btn {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 52px;
  transform: translateY(-50%);
}
.search > .search-clear-btn:hover,
.search > .search-clear-btn:focus-visible { transform: translateY(-50%) scale(1.03); }

.catalog-search.has-custom-search-clear,
.support-search.has-custom-search-clear,
.dashboard-header__search.has-custom-search-clear,
.search-page-form__control.has-custom-search-clear {
  gap: 8px;
}
.catalog-search .search-clear-btn,
.support-search .search-clear-btn,
.dashboard-header__search .search-clear-btn,
.search-page-form__control .search-clear-btn {
  margin-inline-start: 2px;
}
.search-page-form__control .search-clear-btn {
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
}

.support-filter-pill {
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  cursor: pointer;
  font: inherit;
  transition: color var(--speed), background var(--speed), border-color var(--speed), transform var(--speed);
}
.support-filter-pill:hover {
  transform: translateY(-1px);
  color: var(--text-hover);
  background: color-mix(in srgb, var(--card), transparent 20%);
}
.support-empty-state {
  min-height: 260px;
  display: grid;
  place-items: center;
  justify-items: center;
  gap: 10px;
  padding: 34px 18px;
  text-align: center;
  border-radius: 20px;
  background: color-mix(in srgb, var(--input), transparent 32%);
  border: 1px dashed color-mix(in srgb, var(--border-primary), transparent 58%);
  color: var(--muted);
}
.support-empty-state[hidden] { display: none !important; }
.support-empty-state > span,
.support-empty-state .hugeicon { color: var(--text-hover); }
.support-empty-state strong { color: var(--text); font-size: 16px; font-weight: 950; }
.support-empty-state p { margin: 0; max-width: 460px; line-height: 2; font-size: 13px; font-weight: 760; }
.ticket-char-counter,
.ticket-reply-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.ticket-reply-hint {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--input), transparent 28%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 66%);
}
.ticket-reply-hint p { margin: 0; line-height: 1.9; }
.ticket-detail-layout--single { grid-template-columns: minmax(0, 1fr) 340px; }
.conversation-text { color: inherit; font-size: 13px; line-height: 2.1; font-weight: 760; }
.conversation-text p { margin: 0 0 8px; }
.conversation-text p:last-child { margin-bottom: 0; }
.text-success { color: var(--success1) !important; }
.text-muted { color: var(--muted) !important; }

@media (max-width: 920px) {
  .ticket-detail-layout--single { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .search input[type="search"],
  .search[data-site-search] input[type="search"] {
    padding-left: 82px !important;
  }
  .search > .search-clear-btn { left: 48px; }
  .support-toolbar { align-items: stretch; flex-direction: column; }
  .panel-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.course-library-card__cover img {
  width: 100%;
  height: 100%;
  min-height: 148px;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.course-library-card__cover:has(img)::after {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--background-1), transparent 18%));
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* v26 ticket database fields and detail refinements */
.support-file.has-file {
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-1), transparent 56%);
  background: color-mix(in srgb, var(--primary-1), transparent 94%);
}
.support-file.has-file strong {
  max-width: min(100%, 520px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.support-empty-state--inside {
  margin: 22px;
}
.ticket-detail-head .dashboard-hero__actions form {
  margin: 0;
}
.ticket-detail-head .dashboard-hero__actions .btn {
  white-space: nowrap;
}
.ticket-card[data-ticket-status="in_progress"] {
  border-color: color-mix(in srgb, var(--info), transparent 76%);
}
.ticket-meta span {
  min-width: 0;
}
.conversation-text p:last-child {
  margin-bottom: 0;
}
.conversation-text ul,
.conversation-text ol {
  margin-block: 8px 0;
  color: var(--muted);
  line-height: 2;
}
@media (max-width: 640px) {
  .ticket-detail-head .dashboard-hero__actions {
    width: 100%;
  }
  .ticket-detail-head .dashboard-hero__actions form,
  .ticket-detail-head .dashboard-hero__actions .btn {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   v30 home page price text refinement without changing template card shape
   -------------------------------------------------------------------------- */
.course-card .price,
.dataset-price strong {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px 8px;
}
.index-price-old {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  opacity: .62;
  font-size: 11px;
  font-weight: 800;
  text-decoration: line-through;
}
.index-price-current {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.index-price-old svg,
.index-price-current svg {
  width: 14px;
  height: 16px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   v31 home page: template-safe content, timed discount pills and linked cards
   -------------------------------------------------------------------------- */
.course-card__body h3 a,
.dataset-body h3 a,
.article__body h3 a {
  color: inherit;
  text-decoration: none;
}
.course-card__body h3 a:hover,
.dataset-body h3 a:hover,
.article__body h3 a:hover { color: var(--text-hover); }

.course-card__desc,
.dataset-card__desc,
.article__desc {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 2;
}
.course-card__desc p,
.dataset-card__desc p,
.article__desc p { margin: 0; }
.course-card__desc p + p,
.dataset-card__desc p + p,
.article__desc p + p { margin-top: 6px; }

.dataset-cover,
.article__pic { text-decoration: none; }
a.dataset-cover,
a.article__pic { display: block; color: inherit; }

.index-discount-timer {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 4px 10px 3px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  direction: rtl;
  background: linear-gradient(135deg, #ff4757, #d9162f);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 12px 24px rgba(228,0,43,.26), inset 0 1px 0 rgba(255,255,255,.20);
}
.course-card__cover .index-discount-timer,
.cover-art .index-discount-timer {
  right: auto;
  left: 14px;
  background: linear-gradient(135deg, #ff4757, #d9162f) !important;
  border-color: rgba(255,255,255,.22) !important;
}
.dataset-cover .index-discount-timer { right: 14px; left: auto; }
.index-discount-timer.is-expired { display: none !important; }

.article__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin-top: 14px;
  color: var(--primary-1);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}
.article__read:hover { color: var(--text-hover); }
.article__read svg { flex: 0 0 auto; }

/* v34 finance real wallet forms */
.finance-gateway-group {
  display: grid;
  gap: 10px;
  margin: 14px 0 16px;
}
.finance-gateway-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border-primary);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card), transparent 16%);
  cursor: pointer;
  transition: .22s ease;
}
.finance-gateway-card:hover,
.finance-gateway-card.is-active {
  border-color: color-mix(in srgb, var(--primary-1), transparent 35%);
  background: color-mix(in srgb, var(--primary-1), transparent 90%);
  transform: translateY(-1px);
}
.finance-gateway-card input { display: none; }
.finance-gateway-card__logo {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 20%);
  overflow: hidden;
}
.finance-gateway-card__logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.finance-gateway-card__text { display: grid; gap: 2px; min-width: 0; }
.finance-gateway-card__text strong { color: var(--text); font-size: 13px; font-weight: 950; }
.finance-gateway-card__text small { color: var(--muted); font-size: 11px; font-weight: 760; }
.finance-form-toast {
  margin: 0 0 12px;
  min-height: 0;
}
.finance-withdraw-list {
  display: grid;
  gap: 10px;
}
.finance-withdraw-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--border-primary);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card), transparent 16%);
}
.finance-withdraw-row > span:first-child {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--primary-1);
  background: color-mix(in srgb, var(--primary-1), transparent 90%);
}
.finance-withdraw-row strong { display: block; color: var(--text); font-size: 13px; font-weight: 950; }
.finance-withdraw-row small { color: var(--muted); font-size: 12px; font-weight: 760; }
.status-badge.is-review { color: var(--warning1); background: color-mix(in srgb, var(--warning1), transparent 88%); }
.status-dot.is-pending { background: var(--warning1); box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning1), transparent 88%); }
@media (max-width: 640px) {
  .finance-withdraw-row { grid-template-columns: 40px minmax(0, 1fr); }
  .finance-withdraw-row .status-badge { grid-column: 2; justify-self: start; }
}

/* v35 finance withdraw iban and dataset report modal */
.finance-gateway-group {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.finance-gateway-card {
  min-width: 0;
}
.finance-gateway-card__logo {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 14px;
}
.finance-gateway-card__logo img {
  width: 32px;
  height: 32px;
}
.finance-gateway-card__text small {
  line-height: 1.7;
}
.finance-withdraw-form input[name="iban_number"] {
  direction: ltr;
  text-align: left;
  letter-spacing: .04em;
  font-weight: 900;
}
.dataset-report-modal {
  display: grid;
  gap: 12px;
  text-align: right;
}
.dataset-report-modal h3,
.dataset-report-modal__success h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
}
.dataset-report-modal p,
.dataset-report-modal__success p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 2;
}
.dataset-report-modal .swal2-textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  margin: 4px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--border-primary);
  border-radius: 18px;
  background: color-mix(in srgb, var(--input), transparent 4%);
  color: var(--text);
  box-shadow: none;
  outline: none;
  font: inherit;
}
.dataset-report-modal .swal2-textarea:focus {
  border-color: color-mix(in srgb, var(--primary-1), transparent 30%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-1), transparent 88%);
}
.dataset-report-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
}
.dataset-report-modal__success {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 6px 0;
}
.dataset-report-modal__success > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: var(--success);
  background: color-mix(in srgb, var(--success), transparent 88%);
  border: 1px solid color-mix(in srgb, var(--success), transparent 65%);
}
@media (max-width: 640px) {
  .finance-gateway-group {
    grid-template-columns: 1fr;
  }
  .dataset-report-modal__actions {
    display: grid;
  }
}

/* v36 dataset text detail and real add data refinements */
.dataset-text-preview {
  min-height: clamp(320px, 38vw, 540px);
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 56%);
  background:
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--primary-1), transparent 76%), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--card), var(--background-1) 18%), color-mix(in srgb, var(--background-2), transparent 8%));
  box-shadow: 0 18px 58px color-mix(in srgb, var(--elevation), transparent 58%);
  display: grid;
  align-content: space-between;
  gap: 16px;
}
.dataset-text-preview__glow {
  position: absolute;
  width: 210px;
  height: 210px;
  left: -70px;
  bottom: -80px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--info), transparent 82%);
  filter: blur(10px);
  pointer-events: none;
}
.dataset-text-preview__head,
.dataset-text-preview__meta,
.dataset-text-preview__sample { position: relative; z-index: 1; }
.dataset-text-preview__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dataset-text-preview__head > [data-hugeicon] {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: var(--text-hover);
  border-radius: 18px;
  background: color-mix(in srgb, var(--primary-1), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--primary-1), transparent 70%);
}
.dataset-text-preview__head strong {
  display: block;
  color: var(--text);
  font-size: 19px;
  font-weight: 950;
}
.dataset-text-preview__head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.dataset-text-preview__window {
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--black-1), transparent 8%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff, transparent 94%);
}
.dataset-text-preview__dots {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.dataset-text-preview__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted), transparent 45%);
}
.dataset-text-preview__dots i:nth-child(1) { background: color-mix(in srgb, var(--danger1), transparent 25%); }
.dataset-text-preview__dots i:nth-child(2) { background: color-mix(in srgb, var(--warning1), transparent 25%); }
.dataset-text-preview__dots i:nth-child(3) { background: color-mix(in srgb, var(--success1), transparent 25%); }
.dataset-text-preview__lines {
  display: grid;
  gap: 10px;
}
.dataset-text-preview__lines span {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary-1), transparent 50%), color-mix(in srgb, var(--border-primary), transparent 70%));
}
.dataset-text-preview__lines span:nth-child(2) { width: 76%; }
.dataset-text-preview__lines span:nth-child(3) { width: 88%; }
.dataset-text-preview__lines span:nth-child(4) { width: 62%; }
.dataset-text-preview__lines span:nth-child(5) { width: 70%; }
.dataset-text-preview__window pre {
  margin: 18px 0 0;
  padding: 11px 13px;
  border-radius: 14px;
  color: var(--muted);
  background: color-mix(in srgb, var(--background-2), transparent 10%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
  direction: ltr;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dataset-text-preview__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dataset-text-preview__meta span {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 62%);
}
.dataset-text-preview__sample { width: max-content; }
.dataset-type-card--disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.35);
}
.dataset-type-card--disabled:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--border-primary), transparent 58%);
  background: var(--card);
}
.field-error,
.field-error-text {
  min-height: 18px;
  margin-top: 6px;
  color: var(--danger1);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.8;
}
[data-real-dataset-form] .is-loading { opacity: .7; cursor: wait; }
[data-real-dataset-form][hidden],
[data-add-dataset-panel][hidden] { display: none !important; }

@media (max-width: 720px) {
  .dataset-text-preview { min-height: 300px; padding: 16px; }
  .dataset-text-preview__sample { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   v37 unified data dashboard page refinements
   -------------------------------------------------------------------------- */
.dataset-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
}
.dataset-card__cover--text {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--text-hover);
  background:
    radial-gradient(circle at 22% 20%, color-mix(in srgb, var(--success), transparent 76%), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--background-2), var(--success) 8%), color-mix(in srgb, var(--card), var(--success) 12%));
}
.dataset-card__cover--text strong {
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .08em;
  color: var(--text);
}
.dataset-card__cover--text .hugeicon,
.dataset-card__cover--text [data-hugeicon] {
  opacity: .86;
}
.dataset-card__actions .small-btn {
  text-align: center;
}
.data-panels .empty-state[data-data-empty],
.data-panels .empty-state[data-data-empty-static] {
  grid-column: 1 / -1;
}

/* v38 text dataset sample table preview */
.dataset-text-preview__table {
  position: relative;
  min-height: 214px;
  max-height: 320px;
  overflow: auto;
  border-radius: 16px;
  background: color-mix(in srgb, var(--background-2), transparent 16%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}
.dataset-text-preview__table-scroll {
  min-width: 100%;
  overflow: auto;
}
.dataset-text-preview__table table {
  width: 100%;
  border-collapse: collapse;
  direction: rtl;
  color: var(--text);
  font-size: 12px;
  line-height: 1.9;
}
.dataset-text-preview__table th,
.dataset-text-preview__table td {
  max-width: 210px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary), transparent 74%);
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dataset-text-preview__table th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--text-hover);
  font-weight: 950;
  background: color-mix(in srgb, var(--black-1), transparent 6%);
  backdrop-filter: blur(14px);
}
.dataset-text-preview__table td {
  color: var(--muted);
  font-weight: 750;
}
.dataset-text-preview__table tbody tr:hover td {
  color: var(--text);
  background: color-mix(in srgb, var(--primary-1), transparent 92%);
}
.dataset-text-preview__loading {
  min-height: 214px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.dataset-text-preview__loading span {
  width: 34px;
  height: 34px;
  display: block;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--border-primary), transparent 55%);
  border-top-color: var(--text-hover);
  animation: datasetTextPreviewSpin .85s linear infinite;
}
.dataset-text-preview__empty {
  min-height: 214px;
  margin: 0;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  background: color-mix(in srgb, var(--background-2), transparent 18%);
  border: 1px dashed color-mix(in srgb, var(--border-primary), transparent 55%);
  box-shadow: none;
}
.dataset-text-preview__empty h3 {
  margin: 10px 0 4px;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}
.dataset-text-preview__empty p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
@keyframes datasetTextPreviewSpin {
  to { transform: rotate(360deg); }
}
@media (max-width: 720px) {
  .dataset-text-preview__table { max-height: 260px; }
  .dataset-text-preview__table th,
  .dataset-text-preview__table td { padding: 9px 10px; max-width: 150px; }
}

/* v39 dataset dashboard routes and add-data wizard refinements */
.dataset-add-form [data-add-step][hidden],
.dataset-add-form [data-add-dataset-panel][hidden] {
  display: none !important;
}
.dataset-stepper span.is-done {
  color: var(--text);
  background: color-mix(in srgb, var(--success, #26d07c), transparent 92%);
}
.dataset-stepper span.is-done::before {
  background: var(--success, #26d07c);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.image-thumb-picker-wrap {
  margin-top: 8px;
}
.image-thumb-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.image-thumb-picker__item,
.image-thumb-picker__add {
  position: relative;
  min-height: 118px;
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 54%);
  border-radius: 18px;
  background: var(--card);
  cursor: pointer;
  transition: var(--speed);
}
.image-thumb-picker__item img {
  width: 100%;
  height: 118px;
  display: block;
  object-fit: cover;
}
.image-thumb-picker__add {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 14px 10px;
  color: var(--muted);
  border-style: dashed;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary-1), transparent 86%), transparent 44%),
    color-mix(in srgb, var(--input), var(--card) 35%);
}
.image-thumb-picker__add > span {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 15px;
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 86%);
  border: 1px solid color-mix(in srgb, var(--primary-1), transparent 60%);
}
.image-thumb-picker__add strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
}
.image-thumb-picker__add small {
  max-width: 145px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.8;
}
.image-thumb-picker__add:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary-1), transparent 32%);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--primary-1), transparent 88%);
}
.image-thumb-picker__item span {
  position: absolute;
  inset-inline: 8px;
  bottom: 8px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--background-1), transparent 14%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 60%);
  font-size: 10px;
  font-weight: 950;
  backdrop-filter: blur(10px);
}
.image-thumb-picker__item:hover,
.image-thumb-picker__item.is-main {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary-1), transparent 32%);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--primary-1), transparent 88%);
}
.image-thumb-picker__item.is-main::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--primary-1);
  border-radius: inherit;
  pointer-events: none;
}
.image-thumb-picker__item.is-main > span:not([data-hugeicon]),
.image-thumb-picker__item.is-main > .image-thumb-picker__image > span {
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 15%);
  border-color: color-mix(in srgb, var(--primary-1), transparent 35%);
}
.upload-progress {
  margin-top: 14px;
  padding: 12px;
  border-radius: 16px;
  background: var(--input);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
}
.upload-progress__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.upload-progress__top strong {
  color: var(--text-hover);
}
.upload-progress__bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--background-2), transparent 22%);
}
.upload-progress__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary-1), var(--primary-2));
  transition: width .2s ease;
}
@media (max-width: 780px) {
  .image-thumb-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v41 dashboard data cards and formatted numeric inputs */
.data-panels .dataset-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.data-panels .dataset-card {
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  min-height: 156px;
  align-items: stretch;
}
.data-panels .dataset-card__cover {
  width: 132px;
  min-height: 132px;
  height: 132px;
  border-radius: 17px;
}
.data-panels .dataset-card__cover img {
  min-height: 0;
  height: 100%;
}
.data-panels .dataset-card__cover--text {
  gap: 6px;
}
.data-panels .dataset-card__cover--text strong {
  font-size: 17px;
}
.data-panels .dataset-card__cover--text .hugeicon,
.data-panels .dataset-card__cover--text [data-hugeicon] {
  width: 28px;
  height: 28px;
}
.data-panels .dataset-card__body {
  align-content: stretch;
  gap: 6px;
}
.data-panels .dataset-card__top a {
  font-size: 15px;
  line-height: 1.7;
}
.data-panels .dataset-card__body p {
  font-size: 11px;
  line-height: 1.75;
}
.data-panels .dataset-card__meta {
  gap: 6px;
}
.data-panels .dataset-card__meta span {
  min-height: 26px;
  padding-inline: 9px;
  font-size: 10px;
}
.data-panels .dataset-card__meta svg {
  width: 13px;
  height: 15px;
  flex: 0 0 auto;
}
.data-panels .dataset-card__actions {
  gap: 6px;
  margin-top: 4px;
}
.data-panels .dataset-card__actions .small-btn {
  min-height: 31px;
  padding: 0 10px;
  font-size: 11px;
}
.dataset-add-form input[type='number']::-webkit-outer-spin-button,
.dataset-add-form input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dataset-add-form input[type='number'] {
  -moz-appearance: textfield;
}
.dataset-add-form [data-money-input],
.dataset-add-form [data-count-input] {
  direction: ltr;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dataset-add-form [data-money-input]::placeholder,
.dataset-add-form [data-count-input]::placeholder {
  direction: rtl;
  text-align: right;
}
.image-thumb-picker {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.image-thumb-picker__item,
.image-thumb-picker__add {
  min-height: 104px;
  aspect-ratio: 1 / 1;
}
.image-thumb-picker__item img {
  height: 100%;
}
.image-thumb-picker__add > span {
  width: 38px;
  height: 38px;
  border-radius: 14px;
}
@media (max-width: 940px) {
  .data-panels .dataset-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .data-panels .dataset-card {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 10px;
  }
  .data-panels .dataset-card__cover {
    width: 108px;
    height: 108px;
    min-height: 108px;
  }
  .data-panels .dataset-card__actions { flex-direction: column; }
}

/* v42 bookmarked actions, finance withdraw scroll, and finance/dataset form refinements */
.finance-form-toast {
  display: none;
}
.finance-form-toast.is-show {
  display: block;
}
.finance-withdraw-list {
  max-height: 430px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-left: 4px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary-1), transparent 62%) transparent;
}
.finance-withdraw-list::-webkit-scrollbar { width: 6px; }
.finance-withdraw-list::-webkit-scrollbar-track { background: transparent; }
.finance-withdraw-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-1), transparent 70%);
}
.finance-withdraw-list::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary-1), transparent 54%);
}
.bookmark-card__actions {
  gap: 9px;
}
.bookmark-detail-btn,
.bookmark-remove-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}
.bookmark-detail-btn {
  color: var(--text);
  background: color-mix(in srgb, var(--soft), transparent 18%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 48%);
}
.bookmark-detail-btn:hover {
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 88%);
  border-color: color-mix(in srgb, var(--primary-1), transparent 54%);
  transform: translateY(-1px);
}
.bookmark-remove-btn {
  min-height: 38px;
  padding-inline: 12px;
}
.bookmark-card__footer strong {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swal-template--bookmark {
  display: grid;
  gap: 14px;
  text-align: right;
}
.swal-template__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 48%);
  background: color-mix(in srgb, var(--soft), transparent 14%);
}
.swal-template__icon--danger {
  color: var(--error);
  background: color-mix(in srgb, var(--error), transparent 90%);
  border-color: color-mix(in srgb, var(--error), transparent 58%);
}
.swal-template--bookmark h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
}
.swal-template--bookmark p {
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
  font-size: 14px;
}
.swal-template__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.btn--danger {
  background: color-mix(in srgb, var(--error), transparent 8%) !important;
  border-color: color-mix(in srgb, var(--error), transparent 18%) !important;
  color: #fff !important;
}
.data-add-form input[data-money-input] + small,
.data-add-form input[data-count-input] + small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .bookmark-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .bookmark-detail-btn,
  .bookmark-remove-btn {
    width: 100%;
  }
}

/* v43 - dashboard dataset add file/sample layout refinement */
.dataset-upload-grid--image {
  grid-template-areas: "samples archive";
  align-items: stretch;
}
.dataset-upload-grid__samples { grid-area: samples; }
.dataset-upload-grid__archive { grid-area: archive; }
.dataset-upload-grid--image .form-field {
  min-width: 0;
}
.dataset-upload-grid--image .file-drop,
.dataset-upload-grid--image .image-thumb-picker-wrap {
  height: 100%;
}
.dataset-upload-grid--image .image-thumb-picker {
  min-height: 138px;
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--border-primary), transparent 38%);
  border-radius: 18px;
  background: var(--input);
  align-content: start;
}
.dataset-upload-grid--image .image-thumb-picker__item,
.dataset-upload-grid--image .image-thumb-picker__add {
  min-height: 96px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}
.dataset-upload-grid--image .image-thumb-picker__add {
  padding: 10px;
  gap: 8px;
}
.dataset-upload-grid--image .image-thumb-picker__add strong {
  font-size: 11px;
}
.dataset-upload-grid--image .image-thumb-picker__add small {
  display: none !important;
}
@media (max-width: 780px) {
  .dataset-upload-grid--image {
    grid-template-areas:
      "samples"
      "archive";
  }
}

/* v44 cart page and dataset money input refinements */
.cart-item__image--text,
.cart-item__image:not(:has(img)) {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--primary-2);
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--primary-2), transparent 72%), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--soft), transparent 5%), color-mix(in srgb, var(--card), var(--info) 8%));
}
.cart-item__image--text strong,
.cart-item__image:not(:has(img)) strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .08em;
}
.cart-item__price del {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-decoration: line-through;
  opacity: .82;
}
.cart-item__price del svg {
  width: 13px;
  height: 15px;
}
.cart-pay-btn[disabled] {
  opacity: .58;
  cursor: not-allowed;
}
.dataset-add-form .form-control small,
.data-add-form .form-control small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 54px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft), transparent 10%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.dataset-add-form [data-money-input],
.data-add-form [data-money-input] {
  direction: ltr;
  text-align: right;
}

/* v45 - dataset upload actions and dashboard sidebar active refinements */
.dataset-form-section[data-add-step="3"] {
  overflow: visible;
}
.dataset-upload-grid--image {
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  grid-template-areas: "samples archive";
  align-items: start;
  margin-bottom: 18px;
  overflow: visible;
}
.dataset-upload-grid--image .image-thumb-picker-wrap,
.dataset-upload-grid--image .file-drop {
  height: auto;
  min-height: 188px;
}
.dataset-upload-grid--image .image-thumb-picker {
  min-height: 188px;
  max-height: 390px;
  overflow-y: auto;
  align-content: start;
  padding-bottom: 12px;
}
.dataset-upload-grid--image .image-thumb-picker__item,
.dataset-upload-grid--image .image-thumb-picker__add {
  min-height: 104px;
}
.dataset-form-section[data-add-step="3"] .upload-progress {
  clear: both;
  margin-top: 14px;
}
.dataset-form-section[data-add-step="3"] .form-actions--end {
  position: relative;
  z-index: 3;
  width: 100%;
  clear: both;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--background-1), transparent 10%));
}
@media (max-width: 780px) {
  .dataset-upload-grid--image {
    grid-template-columns: 1fr;
    grid-template-areas:
      "samples"
      "archive";
  }
  .dataset-upload-grid--image .image-thumb-picker {
    max-height: 320px;
  }
}

/* v47 restore original sidebar active appearance and refine withdraw form spacing */
.finance-withdraw-form > .btn[type="submit"] {
  margin-top: 14px;
}
.finance-withdraw-list {
  max-height: 430px;
}

/* v53 dataset data filters and thumbnail controls */
[data-data-card][hidden] {
  display: none !important;
}
.image-thumb-picker__item.is-main > span:not([data-hugeicon]),
.image-thumb-picker__item.is-main > .image-thumb-picker__image > span {
  color: #fff;
}
.image-thumb-picker__remove .hugeicon,
.image-thumb-picker__remove [data-hugeicon] {
  width: 16px;
  height: 16px;
  display: block;
}

/* v51 dataset update wizard */
.dataset-update-card {
  padding: 18px;
}
.dataset-type-grid--readonly {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dataset-type-card--muted {
  cursor: default;
  opacity: .86;
}
.dataset-current-files {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.dataset-current-files > div {
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  background: var(--input);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
}
.dataset-current-files span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.dataset-current-files strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dataset-existing-thumbs {
  margin-bottom: 16px;
}
.image-thumb-picker__image {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
}
.image-thumb-picker__remove {
  position: absolute;
  inset: 8px 8px auto auto;
  z-index: 3;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--danger), transparent 48%);
  border-radius: 11px;
  color: var(--danger);
  background: color-mix(in srgb, var(--background-1), transparent 12%);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.image-thumb-picker__remove:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--danger), transparent 86%);
  border-color: color-mix(in srgb, var(--danger), transparent 26%);
}
.dataset-update-page .image-thumb-picker {
  margin-top: 8px;
}
@media (max-width: 780px) {
  .dataset-type-grid--readonly,
  .dataset-current-files {
    grid-template-columns: 1fr;
  }
}


/* v55: dashboard notifications, detail discount timer and product price refinements */
.dash-notification { z-index: 230; }
.dash-notification__dropdown {
  width: min(360px, calc(100vw - 28px));
  padding: 12px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--background-1), var(--card) 8%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 52%);
  box-shadow: 0 24px 54px color-mix(in srgb, var(--elevation), transparent 18%), inset 0 1px 0 color-mix(in srgb, #fff, transparent 94%);
  overflow: hidden;
  z-index: 10060;
}
.dash-notification__dropdown::before { display: none; }
.dash-notification__head {
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--card), transparent 38%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 70%);
}
.dash-notification__list {
  gap: 5px;
  max-height: 314px;
  padding: 0 0 2px 2px;
}
.dash-notification__item {
  min-height: 56px;
  border-radius: 15px;
  background: transparent;
  border-color: transparent;
}
.dash-notification__item:hover,
.dash-notification__item:focus {
  transform: translateX(-2px);
  background: color-mix(in srgb, var(--card), transparent 28%);
  border-color: transparent;
}
.dash-notification__item.is-unread {
  background: color-mix(in srgb, var(--primary-1), transparent 92%);
  border-color: color-mix(in srgb, var(--primary-1), transparent 75%);
}
.dash-notification__icon {
  color: var(--text-hover);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
}
.dash-notification__read-all {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--primary-1), transparent 72%);
  background: color-mix(in srgb, var(--primary-1), transparent 91%);
}
.dash-notification__empty {
  margin-top: 4px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--card), transparent 38%);
  border: 1px dashed color-mix(in srgb, var(--border-primary), transparent 66%);
}

.detail-discount-timer-wrap {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ff4757, #d9162f);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 12px 24px rgba(228,0,43,.22), inset 0 1px 0 rgba(255,255,255,.18);
}
.detail-discount-timer-wrap small,
.detail-discount-timer-wrap strong {
  color: currentColor;
  line-height: 1.2;
}
.detail-discount-timer-wrap small {
  font-size: 11px;
  font-weight: 850;
  opacity: .9;
}
.detail-discount-timer-wrap strong {
  font-size: 12px;
  font-weight: 950;
  direction: rtl;
  white-space: nowrap;
}
.detail-discount-timer-wrap:has(.is-expired) { display: none; }
.detail-discount-timer-wrap--course { margin: -4px 0 16px; }

.dataset-detail-price-row {
  align-items: flex-end;
}
.dataset-detail-price-row .dataset-detail-price {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--text);
}
.dataset-detail-price-row .dataset-detail-price__old {
  color: var(--muted) !important;
  opacity: .72;
  font-size: 15px !important;
  font-weight: 800;
  text-decoration: line-through;
}
.dataset-detail-price-row .dataset-detail-price__current {
  color: var(--text) !important;
  font-size: clamp(28px, 3.2vw, 38px) !important;
  font-weight: 950;
  line-height: 1.2;
}
.dataset-detail-price-row .dataset-detail-price__old svg {
  width: 13px;
  height: 15px;
}
.dataset-detail-price-row .dataset-detail-price__current svg {
  width: 18px;
  height: 21px;
}
.dataset-detail-price-row .dataset-detail-access-status {
  color: var(--success1);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.course-price-row del {
  color: var(--muted);
  opacity: .72;
  font-size: 14px;
}
.course-price-row strong {
  font-size: clamp(23px, 2.3vw, 30px);
}
.course-price-row strong svg {
  width: 17px;
  height: 20px;
}
.course-price-row del svg {
  width: 13px;
  height: 15px;
}

@media (max-width: 640px) {
  .dash-notification__dropdown {
    top: 76px;
    left: 14px;
    right: 14px;
    width: auto;
  }
  .dataset-detail-price-row {
    align-items: flex-start;
  }
  .dataset-detail-price-row .dataset-detail-price__current {
    font-size: 26px !important;
  }
}

/* v56: notification dropdown effect, detail course timer placement and unified price sizes */
.dash-notification__toggle:hover,
.dash-notification.is-open .dash-notification__toggle {
  transform: translateY(-2px);
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-1), transparent 45%);
}
.dash-notification__dropdown {
  background: color-mix(in srgb, var(--background-1), var(--card) 8%);
  border-color: color-mix(in srgb, var(--border-primary), transparent 52%);
  box-shadow: 0 24px 54px color-mix(in srgb, var(--elevation), transparent 18%), inset 0 1px 0 color-mix(in srgb, #fff, transparent 94%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transform-origin: top left;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events: none;
}
.dash-notification.is-open .dash-notification__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.dash-notification__dropdown[hidden] { display: block !important; }
.dash-notification__item { position: relative; }
.dash-notification__item:hover::before,
.dash-notification__item:focus::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 999px;
  background: var(--primary-1);
}
.dash-notification__item.is-unread::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 999px;
  background: var(--primary-1);
}

.course-purchase-card__cover {
  position: relative;
  overflow: hidden;
}
.course-purchase-card__cover .index-discount-timer {
  top: 14px;
  right: auto;
  left: 14px;
}
.index-discount-timer {
  gap: 6px;
  min-height: 34px;
  padding: 6px 11px;
  text-align: right;
}
.index-discount-timer [data-hugeicon],
.index-discount-timer .hugeicon {
  flex: 0 0 auto;
}
.index-discount-timer small {
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  opacity: .92;
}
.index-discount-timer b,
.index-discount-timer [data-discount-value] {
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  white-space: nowrap;
}
.index-discount-timer--detail {
  min-height: 34px;
  padding-inline: 11px;
}

.dataset-detail-price-row .dataset-detail-price__old {
  font-size: 14px !important;
}
.dataset-detail-price-row .dataset-detail-price__current {
  font-size: clamp(23px, 2.3vw, 30px) !important;
}
.dataset-detail-price-row .dataset-detail-price__current svg,
.dataset-detail-price-row .dataset-detail-price__current .price-tag svg {
  width: 17px !important;
  height: 20px !important;
}
.dataset-detail-price-row .dataset-detail-price__old svg,
.dataset-detail-price-row .dataset-detail-price__old .price-tag svg {
  width: 13px !important;
  height: 15px !important;
}

@media (max-width: 640px) {
  .dash-notification__dropdown {
    transform-origin: top center;
  }
  .dash-notification.is-open .dash-notification__dropdown {
    transform: translateY(0);
  }
  .dataset-detail-price-row .dataset-detail-price__current {
    font-size: 24px !important;
  }
}


/* --------------------------------------------------------------------------
   v57 mobile detail ordering and full-width card alignment
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .course-detail-grid,
  .dataset-detail-hero,
  .dataset-detail-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .course-detail-sidebar {
    order: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
  }

  .course-detail-main {
    order: 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .course-title-card,
  .course-panel,
  .comments-panel,
  .course-purchase-card,
  .course-instructor-card,
  .dataset-detail-summary,
  .dataset-gallery,
  .dataset-text-preview {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
  }

  .course-purchase-card__cover {
    height: clamp(188px, 58vw, 240px);
  }

  .dataset-detail-summary {
    order: 2;
  }

  .dataset-gallery,
  .dataset-text-preview {
    order: 1;
  }
}

/* --------------------------------------------------------------------------
   v58 index discount timer sizing and nested cover-art reset
   -------------------------------------------------------------------------- */
.course-card__cover .index-discount-timer,
.dataset-cover .index-discount-timer,
.course-purchase-card__cover .index-discount-timer {
  width: max-content;
  min-width: 136px;
  max-width: calc(100% - 28px);
  min-height: 34px;
  padding: 6px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  border-radius: 999px;
  line-height: 1.1;
}
.cover-art .index-discount-timer span,
.cover-art .index-discount-timer small,
.cover-art .index-discount-timer b,
.cover-art .index-discount-timer [data-hugeicon] {
  position: static;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  transform: none;
  z-index: auto;
}
.cover-art .index-discount-timer .hugeicon {
  position: static;
  display: block;
  flex: 0 0 auto;
  margin: 0;
  color: inherit;
}
.cover-art .index-discount-timer small {
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  opacity: .92;
  white-space: nowrap;
}
.cover-art .index-discount-timer b,
.cover-art .index-discount-timer [data-discount-value] {
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  direction: ltr;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .course-card__cover .index-discount-timer,
  .dataset-cover .index-discount-timer,
  .course-purchase-card__cover .index-discount-timer {
    min-width: 128px;
    padding-inline: 10px;
  }
}

/* v59: dataset main cover ordering and public course empty/filter fixes */
.training-course-card.is-filter-hidden,
.training-course-card[hidden] {
  display: none !important;
}
.training-courses-grid > .public-course-empty {
  grid-column: 1 / -1;
  margin: 0;
  align-self: start;
}

/* --------------------------------------------------------------------------
   v60 course detail mobile overflow guard
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .course-detail-page,
  .course-detail-section {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
  }

  @supports not (overflow: clip) {
    .course-detail-page,
    .course-detail-section {
      overflow-x: hidden;
    }
  }

  .course-detail-section > .container {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    padding-inline: 0;
    margin-inline: auto;
    overflow-x: clip;
  }

  .course-detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .course-detail-main,
  .course-detail-sidebar,
  .course-detail-main > *,
  .course-detail-sidebar > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .course-title-card,
  .course-panel,
  .comments-panel,
  .course-purchase-card,
  .course-instructor-card {
    box-sizing: border-box;
    overflow-x: clip;
  }

  .course-title-card *,
  .course-panel *,
  .comments-panel *,
  .course-purchase-card *,
  .course-instructor-card * {
    min-width: 0;
  }

  .course-title-card h1,
  .course-title-card p,
  .course-rich-text,
  .course-rich-text *,
  .comment p,
  .lesson-row__title strong {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .course-rich-text img,
  .course-rich-text video,
  .course-rich-text iframe,
  .course-rich-text table,
  .course-rich-text pre {
    max-width: 100%;
  }

  .course-rich-text table,
  .course-rich-text pre {
    overflow-x: auto;
  }

  .course-curriculum summary,
  .lesson-row,
  .comment,
  .course-benefit,
  .course-instructor-card__top,
  .course-side-list li,
  .course-price-row,
  .course-detail-badges,
  .course-title-card__badges,
  .course-title-card__meta {
    max-width: 100%;
    min-width: 0;
  }

  .course-price-row strong,
  .course-price-row del {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .course-purchase-card__cover .index-discount-timer {
    max-width: calc(100% - 28px);
  }
}

@media (max-width: 420px) {
  .course-title-card,
  .course-panel,
  .comments-panel,
  .course-purchase-card__body,
  .course-instructor-card {
    padding: 18px;
  }

  .course-price-row strong {
    font-size: clamp(21px, 6.1vw, 26px);
  }
}


/* v62 mobile hero art ordering, thumbnail delete button, footer social icons */
.footer__social a [data-hugeicon],
.footer__social a .hugeicon {
  width: 18px;
  height: 18px;
  display: block;
}

.image-thumb-picker__remove {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--background-2), transparent 8%);
  box-shadow: none;
  backdrop-filter: none;
  transition: .18s ease;
}
.image-thumb-picker__remove:hover {
  transform: translateY(-1px);
  color: #fff;
  background: var(--primary-1);
}
.image-thumb-picker__remove .hugeicon,
.image-thumb-picker__remove [data-hugeicon] {
  width: 18px;
  height: 18px;
}

@media (max-width: 760px) {
  .hero__grid > :first-child {
    order: 2;
  }
  .hero__grid > .hero-art.hero-workspace-art {
    order: 1;
  }
  .hero-art.hero-workspace-art {
    display: block;
    min-height: 0;
    height: auto;
    aspect-ratio: 1 / 1.05;
    max-width: min(100%, 480px);
    width: 100%;
    margin: 4px auto 20px;
    overflow: visible;
  }
  .hero-workspace-art .workspace-frame {
    inset: 0;
    border-radius: 42px 58px 42px 60px;
  }
  .hero-workspace-art .workspace-frame::after {
    width: 42%;
  }
  .hero-workspace-art .workspace-ambient--main {
    left: 29%;
    top: 31%;
    width: 46%;
    height: 43%;
  }
  .hero-workspace-art .workspace-ambient--soft {
    left: 8%;
    right: 8%;
    bottom: 5%;
    height: 23%;
  }
  .workspace-dot--a { left: 29%; top: 16%; }
  .workspace-dot--b { right: 19%; top: 35%; }
  .workspace-dot--c { left: 17%; bottom: 30%; }
  .workspace-circuit { width: 22%; height: 9%; }
  .workspace-circuit--a { left: 31%; top: 38%; }
  .workspace-circuit--b { right: 22%; top: 51%; }
  .workspace-layer--code { --l: 6%; --t: 16.6%; --w: 30.8%; }
  .workspace-layer--analytics { --r: 2.8%; --t: 7%; --w: 34.4%; }
  .workspace-layer--cards { --r: 6%; --t: 52%; --w: 23.6%; }
  .workspace-layer--desk { --l: 1.5%; --b: 4.7%; --w: 97%; }
  .workspace-layer--body { --l: 50%; --t: 51.5%; --w: 34%; }
  .workspace-layer--head { --l: 49.4%; --t: 34.2%; --w: 29%; }
  .workspace-layer--arm-left { --l: 32%; --t: 55.4%; --w: 26.6%; }
  .workspace-layer--arm-right { --l: 51.7%; --t: 55.6%; --w: 26.1%; }
  .workspace-layer--laptop { --l: 15.2%; --t: 54.7%; --w: 51%; }
  .workspace-laptop-glow { left: 45%; top: 41%; width: 7.5%; }
  .workspace-code-cursor { left: 45%; top: 49%; height: 14px; }
  .workspace-chart-pulse { left: 24%; bottom: 31%; width: 6px; height: 6px; }
}


/* v64 authentication flow pages */
.auth-card--single {
  width: min(100%, 485px);
}
.auth-helper {
  margin: -4px 0 18px;
  color: var(--muted, var(--grey-3));
  font-size: 13px;
  font-weight: 800;
  line-height: 2;
}
.auth-switch a {
  color: var(--text-hover);
  font-weight: 950;
}
.auth-switch a:hover {
  color: var(--primary-1);
}
.auth-resend-form {
  margin-top: 10px;
}
.auth-secondary-button {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 45%);
  background: var(--soft, color-mix(in srgb, var(--card), #fff 4%));
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
  transition: .2s ease;
}
.auth-secondary-button:hover {
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-1), transparent 55%);
  transform: translateY(-2px);
}
.auth-progress {
  margin-top: 14px;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--info), transparent 91%);
  border: 1px solid color-mix(in srgb, var(--info), transparent 72%);
  color: var(--info);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.9;
}
.auth-progress > div {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border-primary), transparent 55%);
}
.auth-progress i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary-1), var(--info));
  transition: width linear;
}
.auth-page .field__control input.input-block,
.auth-page .field__control input.form-control {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* v65 discount, cart empty, course action spacing, and dataset mega refinements */
.course-purchase-card__body > .btn + .btn,
.course-purchase-card__body > .btn + a.btn,
.course-purchase-card__body > a.btn + .btn,
.course-purchase-card__body > a.btn + a.btn {
  margin-top: 12px;
}

.mega__item > .mega__icon {
  align-self: center;
  display: inline-grid;
  place-items: center;
  text-align: center;
  line-height: 1;
}

.index-discount-timer.is-expired,
.detail-discount-timer.is-expired {
  color: #fff;
  background: color-mix(in srgb, var(--primary-1), #111 12%);
  border-color: color-mix(in srgb, var(--primary-1), transparent 28%);
}

.detail-discount-timer-wrap .detail-discount-timer.is-expired {
  color: #fff;
}

/* v66 article filter vertical alignment */
.article-filter-bar .catalog-filter,
.article-filter-bar .article-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
}


/* --------------------------------------------------------------------------
   v69 cart dropdown live media, empty summary and mobile overlay stability
   -------------------------------------------------------------------------- */
.cart-menu__summary[hidden],
.cart-menu__items[hidden] {
  display: none !important;
}

.cart-mini-item__icon {
  overflow: hidden;
  text-decoration: none;
}

.cart-mini-item__icon--image {
  background: color-mix(in srgb, var(--card), var(--background-1) 18%);
  border-color: color-mix(in srgb, var(--border-primary), transparent 52%);
  padding: 0;
}

.cart-mini-item__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 760px) {
  .header {
    z-index: 2147482000;
  }

  .actions,
  .cart-menu,
  .header-user-menu {
    z-index: auto;
  }

  .cart-menu.is-open,
  .header-user-menu.is-open {
    z-index: 2147483000;
  }

  .cart-menu__dropdown,
  .header-user-menu__dropdown {
    position: fixed !important;
    top: var(--cart-dropdown-top, 82px);
    left: var(--cart-dropdown-left, 12px);
    right: auto !important;
    width: var(--cart-dropdown-width, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - var(--cart-dropdown-top, 82px) - 12px);
    z-index: 2147483000 !important;
    transform-origin: top center;
    will-change: opacity, transform;
  }

  .header-user-menu__dropdown {
    top: var(--user-menu-top, 82px);
    left: var(--user-menu-left, 12px);
    width: var(--user-menu-width, calc(100vw - 24px));
    max-height: calc(100dvh - var(--user-menu-top, 82px) - 12px);
  }
}


/* --------------------------------------------------------------------------
   v70 cart mini discount price, guest state and mobile portal overlays
   -------------------------------------------------------------------------- */
.cart-mini-item__price {
  display: flex !important;
  align-items: baseline;
  gap: 7px;
  margin-top: 5px;
  min-width: 0;
  line-height: 1.5;
  white-space: nowrap;
}

.cart-mini-item__price del {
  color: color-mix(in srgb, var(--muted), transparent 8%);
  font-size: 11px;
  font-weight: 850;
  text-decoration-thickness: 1.5px;
}

.cart-mini-item__price b {
  display: inline-block;
  margin: 0;
  color: color-mix(in srgb, var(--info), var(--text) 24%);
  font-size: 12px;
  font-weight: 950;
}

.cart-menu__dropdown.is-mobile-portal-open,
.header-user-menu__dropdown.is-mobile-portal-open {
  position: fixed !important;
  top: var(--cart-dropdown-top, 82px) !important;
  left: var(--cart-dropdown-left, 12px) !important;
  right: auto !important;
  width: var(--cart-dropdown-width, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - var(--cart-dropdown-top, 82px) - 12px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  z-index: 2147483647 !important;
}

.header-user-menu__dropdown.is-mobile-portal-open {
  top: var(--user-menu-top, 82px) !important;
  left: var(--user-menu-left, 12px) !important;
  width: var(--user-menu-width, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - var(--user-menu-top, 82px) - 12px) !important;
}

body > .cart-menu__dropdown.is-mobile-portal-open,
body > .header-user-menu__dropdown.is-mobile-portal-open {
  isolation: isolate;
}

/* v84 public course cards: single details action */
.training-course-card__footer > div:has(> .btn:only-child) {
  min-width: min(100%, 170px);
}

.training-course-card__footer > div > .btn:only-child {
  width: 100%;
}


/* v85 dataset cards: show generated no-image cover only when no real thumbnail exists */
#datasets .dataset-cover--has-image::before,
#datasets .dataset-cover--has-image::after {
  display: none;
}

#datasets .dataset-cover--empty::before {
  display: block;
  content: attr(data-label);
}

.public-dataset-card__cover--empty {
  background: linear-gradient(135deg, color-mix(in srgb, var(--info), #000 8%), color-mix(in srgb, var(--grey-7), #fff 2%));
}

.public-dataset-card__cover--empty::before {
  content: attr(data-label);
  position: absolute;
  inset: auto auto 18px 18px;
  z-index: 2;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  transform: none;
  color: #fff;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 950;
  letter-spacing: -1px;
  line-height: 1;
  direction: ltr;
  opacity: .96;
}

.public-dataset-card__cover--empty::after {
  content: "";
  position: absolute;
  inset: -48px auto auto -42px;
  z-index: 1;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}

.public-dataset-card__cover--empty strong {
  display: none;
}

.public-dataset-card__cover--has-image .public-dataset-card__thumb {
  z-index: 0;
}

.public-dataset-card__cover .dataset-type-badge,
.public-dataset-card__cover--has-image strong {
  position: relative;
  z-index: 2;
}

/* v86 keep dataset thumbnail delete icon independent from main-cover label styles */
.image-thumb-picker__remove > [data-hugeicon] {
  position: static !important;
  inset: auto !important;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: currentColor !important;
  line-height: 0;
}

.image-thumb-picker__remove > [data-hugeicon] > .hugeicon,
.image-thumb-picker__remove > .hugeicon {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0;
}

/* v87 dataset text/no-image presentation refinements */
#datasets .dataset-cover--empty::before,
.public-dataset-card__cover--empty::before {
  direction: rtl;
  text-align: right;
  letter-spacing: 0;
  font-family: inherit;
}

#datasets .dataset-cover--empty::before {
  right: 18px;
  left: auto;
  max-width: calc(100% - 36px);
  font-size: clamp(25px, 4vw, 32px);
  line-height: 1.25;
}

.public-dataset-card__cover--empty::before {
  inset: auto 18px 18px auto;
  max-width: calc(100% - 36px);
  font-size: clamp(30px, 4.5vw, 42px);
  line-height: 1.25;
}

.public-dataset-card__cover--empty .dataset-type-badge {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.dataset-detail-hero--text {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

.dataset-detail-hero--text .dataset-detail-summary,
.dataset-detail-hero--text .dataset-text-preview {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.dataset-detail-hero--text .dataset-detail-summary {
  order: 1;
}

.dataset-detail-hero--text .dataset-text-preview {
  order: 2;
  min-height: 560px;
  padding: 24px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--info), transparent 80%), transparent 30%),
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--primary-1), transparent 86%), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--background-1), #071323 36%), color-mix(in srgb, var(--background-2), #030a16 42%));
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 45%);
  box-shadow: var(--page-shadow), inset 0 1px 0 color-mix(in srgb, #fff, transparent 92%);
}

.dataset-detail-hero--text .dataset-text-preview__head {
  justify-content: space-between;
  gap: 16px;
}

.dataset-detail-hero--text .dataset-text-preview__head > div {
  min-width: 0;
  flex: 1;
}

.dataset-detail-hero--text .dataset-text-preview__window {
  flex: 1;
  min-height: 420px;
  padding: 16px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--black-1), transparent 3%);
  border-color: color-mix(in srgb, #fff, transparent 74%);
}

.dataset-detail-hero--text .dataset-text-preview__table {
  min-height: 360px;
  max-height: 470px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--black-1), transparent 7%);
  border-color: color-mix(in srgb, #fff, transparent 62%);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--info), transparent 48%) color-mix(in srgb, var(--background-2), transparent 50%);
}

.dataset-detail-hero--text .dataset-text-preview__table::-webkit-scrollbar,
.dataset-detail-hero--text .dataset-text-preview__table-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dataset-detail-hero--text .dataset-text-preview__table::-webkit-scrollbar-track,
.dataset-detail-hero--text .dataset-text-preview__table-scroll::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--background-2), transparent 50%);
  border-radius: 999px;
}

.dataset-detail-hero--text .dataset-text-preview__table::-webkit-scrollbar-thumb,
.dataset-detail-hero--text .dataset-text-preview__table-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--info), transparent 48%);
  border-radius: 999px;
}

.dataset-detail-hero--text .dataset-text-preview__table th,
.dataset-detail-hero--text .dataset-text-preview__table td {
  max-width: 260px;
  padding: 13px 14px;
  font-size: 13px;
  border: 1px solid color-mix(in srgb, #fff, transparent 80%);
}

.dataset-detail-hero--text .dataset-text-preview__table th {
  color: #fff;
  background: color-mix(in srgb, #fff, transparent 50%);
}

.dataset-detail-hero--text .dataset-text-preview__table td {
  color: color-mix(in srgb, #fff, transparent 8%);
  background: color-mix(in srgb, var(--background-1), transparent 34%);
}

.dataset-detail-hero--text .dataset-text-preview__window pre {
  margin-top: 14px;
  white-space: normal;
  direction: ltr;
}

@media (max-width: 760px) {
  .dataset-detail-hero--text .dataset-detail-summary { order: 1; }
  .dataset-detail-hero--text .dataset-text-preview { order: 2; min-height: 420px; padding: 16px; }
  .dataset-detail-hero--text .dataset-text-preview__window { min-height: 300px; }
  .dataset-detail-hero--text .dataset-text-preview__table { min-height: 250px; max-height: 330px; }
  .dataset-detail-hero--text .dataset-text-preview__table th,
  .dataset-detail-hero--text .dataset-text-preview__table td { padding: 10px 11px; max-width: 180px; font-size: 12px; }
}

/* v88 text dataset preview redesign, bounded width and fullscreen */
.dataset-detail-hero--text .dataset-text-preview {
  isolation: isolate;
  overflow: hidden;
}

.dataset-text-preview__head {
  min-width: 0;
}

.dataset-text-preview__expand {
  position: relative;
  z-index: 2;
  min-height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 55%);
  border-radius: 14px;
  color: var(--text);
  background: color-mix(in srgb, var(--card), transparent 8%);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
}

.dataset-text-preview__expand:hover {
  transform: translateY(-1px);
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-1), transparent 45%);
  background: color-mix(in srgb, var(--primary-1), transparent 91%);
}

.dataset-text-preview__expand [data-hugeicon],
.dataset-text-preview__expand .hugeicon {
  width: 18px;
  height: 18px;
  display: block;
}

.dataset-text-preview__expand b {
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.dataset-detail-hero--text .dataset-text-preview__window {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card), transparent 4%), color-mix(in srgb, var(--background-2), transparent 10%));
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 48%);
  box-shadow:
    0 16px 42px color-mix(in srgb, var(--elevation), transparent 70%),
    inset 0 1px 0 color-mix(in srgb, #fff, transparent 92%);
}

.dataset-detail-hero--text .dataset-text-preview__dots {
  display: none;
}

.dataset-detail-hero--text .dataset-text-preview__table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: color-mix(in srgb, var(--background-1), transparent 3%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 54%);
}

.dataset-detail-hero--text .dataset-text-preview__table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted), transparent 45%) color-mix(in srgb, var(--background-2), transparent 35%);
}

.dataset-detail-hero--text .dataset-text-preview__table table {
  width: max-content;
  min-width: 100%;
  max-width: none;
  table-layout: auto;
}

.dataset-detail-hero--text .dataset-text-preview__table th,
.dataset-detail-hero--text .dataset-text-preview__table td {
  max-width: 260px;
  min-width: 126px;
}

.dataset-detail-hero--text .dataset-text-preview__window pre {
  max-width: 100%;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dataset-text-preview.is-expanded {
  position: fixed !important;
  inset: 18px !important;
  z-index: 2147483000 !important;
  width: auto !important;
  max-width: none !important;
  max-height: calc(100dvh - 36px) !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-content: stretch !important;
  min-height: 0 !important;
  padding: 22px !important;
  border-radius: 28px !important;
  box-shadow:
    0 32px 90px rgba(0, 0, 0, .48),
    inset 0 1px 0 color-mix(in srgb, #fff, transparent 88%) !important;
}

.dataset-text-preview.is-expanded::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .48);
  backdrop-filter: blur(10px);
}

.dataset-text-preview.is-expanded .dataset-text-preview__window {
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
}

.dataset-text-preview.is-expanded .dataset-text-preview__table {
  min-height: 0;
  max-height: none;
  height: 100%;
}

.dataset-text-preview.is-expanded .dataset-text-preview__table-scroll {
  max-height: none;
}

body.d2-text-preview-expanded {
  overflow: hidden;
}

@media (max-width: 760px) {
  .dataset-detail-hero--text .dataset-text-preview__head {
    align-items: flex-start;
  }

  .dataset-text-preview__expand {
    width: 100%;
  }

  .dataset-text-preview.is-expanded {
    inset: 8px !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  .dataset-text-preview.is-expanded .dataset-text-preview__table th,
  .dataset-text-preview.is-expanded .dataset-text-preview__table td {
    max-width: 220px;
    min-width: 112px;
  }
}


/* v89 text dataset preview theme support, desktop fit and mobile expand fix */
.dataset-detail-hero--text .dataset-text-preview {
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--info), transparent 84%), transparent 32%),
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--primary-1), transparent 88%), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--card), var(--background-1) 26%), color-mix(in srgb, var(--background-2), var(--card) 18%));
}

.dataset-detail-hero--text .dataset-text-preview__head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
}

.dataset-detail-hero--text .dataset-text-preview__head > [data-hugeicon] {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: var(--info);
  background: color-mix(in srgb, var(--info), transparent 88%);
  border: 1px solid color-mix(in srgb, var(--info), transparent 72%);
}

.dataset-detail-hero--text .dataset-text-preview__window {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card), transparent 0%), color-mix(in srgb, var(--background-1), transparent 10%));
  border-color: color-mix(in srgb, var(--border-primary), transparent 42%);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--elevation), transparent 76%);
}

.dataset-detail-hero--text .dataset-text-preview__table {
  background: color-mix(in srgb, var(--card), var(--background-1) 22%);
  border-color: color-mix(in srgb, var(--border-primary), transparent 42%);
}

.dataset-detail-hero--text .dataset-text-preview__table-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
}

.dataset-detail-hero--text .dataset-text-preview__table table {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.dataset-detail-hero--text .dataset-text-preview__table th,
.dataset-detail-hero--text .dataset-text-preview__table td {
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-color: color-mix(in srgb, var(--border-primary), transparent 34%);
}

.dataset-detail-hero--text .dataset-text-preview__table th {
  color: var(--text);
  background: color-mix(in srgb, var(--background-2), var(--card) 24%);
  font-weight: 950;
}

.dataset-detail-hero--text .dataset-text-preview__table td {
  color: color-mix(in srgb, var(--text), var(--muted) 10%);
  background: color-mix(in srgb, var(--card), transparent 0%);
}

.dataset-detail-hero--text .dataset-text-preview__table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--background-1), transparent 22%);
}

.dataset-detail-hero--text .dataset-text-preview__table tbody tr:hover td {
  color: var(--text-hover);
  background: color-mix(in srgb, var(--info), transparent 90%);
}

.dataset-text-preview__expand {
  min-width: 120px;
  white-space: nowrap;
}

.dataset-text-preview.is-expanded .dataset-text-preview__table-scroll {
  overflow-x: hidden;
}

@media (max-width: 760px) {
  .dataset-detail-hero--text .dataset-text-preview__head {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }

  .dataset-detail-hero--text .dataset-text-preview__head > [data-hugeicon] {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }

  .dataset-text-preview__expand {
    grid-column: 1 / -1;
    width: auto;
    min-width: 0;
    justify-self: stretch;
    min-height: 44px;
    margin-top: 2px;
  }

  .dataset-detail-hero--text .dataset-text-preview__table-scroll,
  .dataset-text-preview.is-expanded .dataset-text-preview__table-scroll {
    overflow-x: auto;
    overflow-y: auto;
  }

  .dataset-detail-hero--text .dataset-text-preview__table table {
    width: max-content;
    min-width: 720px;
    max-width: none;
    table-layout: auto;
  }

  .dataset-detail-hero--text .dataset-text-preview__table th,
  .dataset-detail-hero--text .dataset-text-preview__table td {
    min-width: 112px;
    max-width: 220px;
  }
}

/* v90 dataset image gallery stability and full loading */
.dataset-gallery__main {
  position: relative;
  isolation: isolate;
}

.d2-gallery__open {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
  overflow: hidden;
  font-family: inherit;
}

.d2-gallery__open img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
}

.dataset-gallery__main.is-loading .d2-gallery__open::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--card), transparent 58%), transparent),
    color-mix(in srgb, var(--background-2), transparent 14%);
  background-size: 220% 100%, auto;
  animation: d2GalleryImageLoading 1.15s ease-in-out infinite;
}

@keyframes d2GalleryImageLoading {
  0% { background-position: 120% 0, 0 0; }
  100% { background-position: -120% 0, 0 0; }
}

.d2-gallery__zoom-hint {
  position: absolute;
  inset-inline-start: 16px;
  bottom: 16px;
  z-index: 3;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  background: rgba(10, 14, 24, .55);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}

.dataset-gallery__main:hover .d2-gallery__zoom-hint,
.d2-gallery__open:focus-visible .d2-gallery__zoom-hint {
  opacity: 1;
  transform: translateY(0);
}

.d2-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 58%);
  border-radius: 15px;
  color: #fff;
  background: rgba(10, 14, 24, .54);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.d2-gallery__nav:hover {
  background: color-mix(in srgb, var(--primary-1), transparent 22%);
  border-color: color-mix(in srgb, var(--primary-1), transparent 46%);
  transform: translateY(-50%) scale(1.04);
}

.d2-gallery__nav--prev { inset-inline-start: 14px; }
.d2-gallery__nav--next { inset-inline-end: 14px; }

.dataset-gallery__thumbs {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted), transparent 62%) color-mix(in srgb, var(--background-2), transparent 38%);
}

.dataset-gallery__thumbs::-webkit-scrollbar {
  display: block;
  height: 6px;
}

.dataset-gallery__thumbs::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--background-2), transparent 38%);
  border-radius: 999px;
}

.dataset-gallery__thumbs::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted), transparent 62%);
  border-radius: 999px;
}

.d2-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
  background: rgba(2, 6, 18, .86);
  backdrop-filter: blur(12px);
}

.d2-gallery-modal[hidden] { display: none !important; }

.d2-gallery-modal__figure {
  position: relative;
  width: min(1180px, 100%);
  max-height: min(86vh, 760px);
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  background: color-mix(in srgb, var(--background-1), #000 18%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 34px 90px rgba(0,0,0,.34);
}

.d2-gallery-modal__figure img {
  width: 100%;
  max-height: min(86vh, 760px);
  display: block;
  object-fit: contain;
  background: rgba(0,0,0,.22);
}

.d2-gallery-modal__close {
  position: fixed;
  top: 18px;
  inset-inline-end: 18px;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.d2-gallery-modal__caption {
  position: absolute;
  inset-inline: 16px;
  bottom: 16px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: calc(100% - 32px);
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: rgba(10, 14, 24, .58);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}

body.d2-gallery-modal-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .d2-gallery__nav {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }
  .d2-gallery__nav--prev { inset-inline-start: 10px; }
  .d2-gallery__nav--next { inset-inline-end: 10px; }
  .d2-gallery__zoom-hint {
    inset-inline-start: 12px;
    bottom: 12px;
    min-height: 31px;
    padding-inline: 10px;
    font-size: 11px;
    opacity: 1;
    transform: none;
  }
  .d2-gallery-modal {
    padding: 12px;
  }
  .d2-gallery-modal__figure {
    border-radius: 20px;
  }
}

/* v92 index thumbnail images: keep sorl thumbnails fitted inside their cards */
.course-card__cover,
.cover-art,
.article__pic {
  isolation: isolate;
}

.cover-art img,
.article__pic img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  min-width: 100%;
  min-height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.cover-art:has(img)::before,
.cover-art:has(img)::after,
.article__pic:has(img)::before,
.article__pic:has(img)::after {
  z-index: 1;
  pointer-events: none;
}

.cover-art:has(img)::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  left: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.30));
}

.cover-art:has(img)::after {
  opacity: .55;
}

.cover-art > span,
.cover-art > b,
.cover-art .index-discount-timer,
.article__pic > span,
.article__pic > b {
  z-index: 2;
}

.article__pic:has(img)::before {
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.32));
  inset: 0;
  width: auto;
  height: auto;
  right: 0;
  top: 0;
  border-radius: inherit;
  transform: none;
}

.article__pic:has(img)::after {
  opacity: .92;
}

/* v93 useful links use local Hugeicons */
.mega__icon [data-hugeicon],
.mega__icon .hugeicon {
  display: block;
  width: 20px;
  height: 20px;
  color: inherit;
}

/* v96 wallet payment confirmation */
.swal-wallet-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 18px;
}
.swal-wallet-actions .btn {
  min-height: 42px;
}
@media (max-width: 520px) {
  .swal-wallet-actions { flex-direction: column; }
  .swal-wallet-actions .btn { width: 100%; justify-content: center; }
}

/* v98 payment result page */
.payment-result-page {
  min-height: calc(100dvh - 160px);
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vw, 52px) 0;
}

.payment-result-card {
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: center;
  padding: clamp(22px, 4vw, 42px);
  border-radius: 34px;
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 54%);
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--success1), transparent 84%), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--card), var(--success1) 4%), var(--card));
  box-shadow: 0 28px 84px color-mix(in srgb, var(--elevation), transparent 58%);
  overflow: hidden;
  position: relative;
}

.payment-result-card.is-failed {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--danger, #ef4444), transparent 84%), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--card), #ef4444 4%), var(--card));
}

.payment-result-card::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  inset-inline-end: -86px;
  top: -92px;
  background: color-mix(in srgb, var(--primary-1), transparent 88%);
  filter: blur(2px);
  pointer-events: none;
}

.payment-result-card__art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 300px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--background-2), transparent 10%);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 64%);
}

.payment-result-card__art img {
  width: min(82%, 360px);
  max-height: 330px;
  object-fit: contain;
  display: block;
}

.payment-result-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.payment-result-card__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--success1);
  font-size: 12px;
  font-weight: 950;
  background: color-mix(in srgb, var(--success1), transparent 88%);
  border: 1px solid color-mix(in srgb, var(--success1), transparent 66%);
}

.payment-result-card.is-failed .payment-result-card__eyebrow {
  color: var(--danger, #ef4444);
  background: color-mix(in srgb, var(--danger, #ef4444), transparent 88%);
  border-color: color-mix(in srgb, var(--danger, #ef4444), transparent 66%);
}

.payment-result-card h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(27px, 4vw, 43px);
  line-height: 1.45;
  font-weight: 950;
}

.payment-result-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 780;
  line-height: 2;
}

.payment-result-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.payment-result-card__actions .btn {
  min-height: 46px;
}

@media (max-width: 780px) {
  .payment-result-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .payment-result-card__body {
    align-items: center;
  }
  .payment-result-card__art {
    min-height: 220px;
  }
  .payment-result-card__actions {
    width: 100%;
    justify-content: center;
  }
  .payment-result-card__actions .btn {
    flex: 1 1 220px;
  }
}

/* v99 cart media fallback and finance wallet pagination/scroll refinements */
.cart-item__image {
  height: 174px;
  min-height: 174px;
  isolation: isolate;
}

.cart-item__image img[data-cart-media-image] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
  background: var(--background-1);
}

.cart-item__image .cart-item__fallback-icon,
.cart-item__image .cart-item__fallback-label {
  display: none;
}

.cart-item__image.is-image-broken,
.cart-item__image:not(:has(img)) {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
}

.cart-item__image.is-image-broken img[data-cart-media-image] {
  display: none;
}

.cart-item__image.is-image-broken .cart-item__fallback-icon,
.cart-item__image.is-image-broken .cart-item__fallback-label {
  display: inline-grid;
}

.cart-item__image.is-image-broken .cart-item__fallback-label {
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .08em;
}

.finance-activity-list {
  max-height: 430px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 16px 16px 12px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary-1), transparent 62%) transparent;
}

.finance-activity-list::-webkit-scrollbar { width: 6px; }
.finance-activity-list::-webkit-scrollbar-track { background: transparent; }
.finance-activity-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-1), transparent 70%);
}
.finance-activity-list::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary-1), transparent 54%);
}

.finance-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border-primary), transparent 72%);
}

.finance-pagination a,
.finance-pagination span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.finance-pagination a {
  color: var(--text);
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--border-primary), transparent 54%);
}

.finance-pagination a:hover {
  color: var(--text-hover);
  border-color: color-mix(in srgb, var(--primary-1), transparent 54%);
}

.finance-pagination span {
  color: var(--muted);
  background: color-mix(in srgb, var(--card), transparent 18%);
}

/* v100 dashboard paginated sections */
.dashboard-pagination {
  margin-top: 20px;
}

.bookmark-tabs .bookmark-tab {
  text-decoration: none;
}

.bookmark-tabs .bookmark-tab:hover {
  text-decoration: none;
}

/* v102 dataset tag editor */
.form-control--tag-editor {
  min-height: 48px;
  height: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 7px;
  cursor: text;
}

.dataset-tag-editor__chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.dataset-tag-editor__input {
  flex: 1 1 140px;
  min-width: 130px;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dataset-tag-chip {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--primary-1), transparent 58%);
  border-radius: 999px;
  color: var(--text-hover);
  background: color-mix(in srgb, var(--primary-1), transparent 88%);
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.dataset-tag-chip i {
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: color-mix(in srgb, var(--primary-1), #000 8%);
  font-style: normal;
  font-size: 13px;
  line-height: 1;
}

.dataset-tag-chip:hover {
  border-color: color-mix(in srgb, var(--error), transparent 48%);
  background: color-mix(in srgb, var(--error), transparent 88%);
}

.dataset-tag-chip:hover i {
  background: var(--error);
}

/* v104 dataset type code placement and voice detail layout */
#datasets .dataset-cover--empty::before,
.public-dataset-card__cover--empty::before {
  direction: ltr;
  text-align: left;
  letter-spacing: -.5px;
  font-family: inherit;
}

#datasets .dataset-cover--empty::before {
  right: auto;
  left: 18px;
  max-width: calc(100% - 36px);
}

.public-dataset-card__cover--empty::before {
  inset: auto auto 18px 18px;
  max-width: calc(100% - 36px);
}

.public-dataset-card__cover--purple:not(.public-dataset-card__cover--has-image)::before {
  content: '';
}

.public-dataset-card__cover--purple:not(.public-dataset-card__cover--has-image)::after,
.public-dataset-card__cover--blue:not(.public-dataset-card__cover--has-image)::after {
  content: '';
}

.public-dataset-card__cover:not(.public-dataset-card__cover--empty):not(.public-dataset-card__cover--has-image) strong {
  align-self: flex-start;
  margin-top: auto;
  direction: ltr;
  text-align: left;
  display: block;
}

.public-dataset-card__cover .dataset-type-badge {
  direction: ltr;
}

.dataset-detail-hero--voice {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.dataset-detail-hero--voice .dataset-detail-summary {
  grid-column: 1 / -1;
  width: 100%;
  min-height: auto;
}

/* v104b keep dataset type code on the left side of public covers */
.public-dataset-card__cover:not(.public-dataset-card__cover--empty) strong {
  position: absolute;
  left: 18px;
  right: auto;
  bottom: 18px;
  z-index: 2;
  margin: 0;
  direction: ltr;
  text-align: left;
}

.public-dataset-card__cover--empty .dataset-type-badge {
  margin-inline: 0 auto;
}

/* v105 restore empty-cover label for all no-image dataset types */
.public-dataset-card__cover--empty.public-dataset-card__cover--purple::before,
.public-dataset-card__cover--empty.public-dataset-card__cover--blue::before,
.public-dataset-card__cover--empty.public-dataset-card__cover--green::before {
  content: attr(data-label);
}

/* v106 ticket close modal and voice dataset dashboard covers */
.swal-template__hint {
  display: block;
  margin-top: -4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.8;
}

.dataset-card__cover--voice {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #fff;
  background:
    radial-gradient(circle at 22% 20%, color-mix(in srgb, #8b5cf6, transparent 70%), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--background-2), #8b5cf6 18%), color-mix(in srgb, var(--card), #6b5bd6 24%));
}

.dataset-card__cover--voice strong {
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .08em;
  color: #fff;
}

.dataset-card__cover--voice .hugeicon,
.dataset-card__cover--voice [data-hugeicon] {
  opacity: .9;
}

.data-panels .dataset-card__cover--voice {
  gap: 6px;
}

.data-panels .dataset-card__cover--voice strong {
  font-size: 17px;
}

.data-panels .dataset-card__cover--voice .hugeicon,
.data-panels .dataset-card__cover--voice [data-hugeicon] {
  width: 28px;
  height: 28px;
}

/* v108 dataset status SweetAlert confirmation */
.swal-template--dataset-status .swal-template__hint {
  display: block;
  margin-top: -4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.8;
}

/* v111 dashboard search and voice dataset card alignment */
.dashboard-header__search[data-dashboard-search] {
  position: relative;
  z-index: 300;
}

.dashboard-search-dropdown {
  min-width: min(520px, calc(100vw - 28px));
}

.dashboard-search-result .site-search-result__media {
  color: var(--text-hover);
}

.dataset-card__cover--voice {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--text-hover);
  background:
    radial-gradient(circle at 22% 20%, color-mix(in srgb, #8b5cf6, transparent 76%), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--background-2), #8b5cf6 8%), color-mix(in srgb, var(--card), #8b5cf6 12%));
}

.dataset-card__cover--voice strong {
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .08em;
  color: var(--text);
}

.dataset-card__cover--voice .hugeicon,
.dataset-card__cover--voice [data-hugeicon] {
  opacity: .86;
}

.data-panels .dataset-card__cover--voice {
  gap: 6px;
}

.data-panels .dataset-card__cover--voice strong {
  font-size: 17px;
}

.data-panels .dataset-card__cover--voice .hugeicon,
.data-panels .dataset-card__cover--voice [data-hugeicon] {
  width: 28px;
  height: 28px;
}

@media (max-width: 760px) {
  .dashboard-search-dropdown {
    position: fixed;
    top: 76px;
    left: 14px;
    right: 14px;
    width: auto;
    min-width: 0;
  }
}

/* v113 real dashboard dropdown search */
.dashboard-topbar,
.dashboard-header__box,
.dashboard-header__search[data-dashboard-search] {
  overflow: visible;
}

.dashboard-topbar {
  z-index: 1200;
}

.dashboard-header__search[data-dashboard-search] {
  position: relative;
  isolation: isolate;
}

.dashboard-search-dropdown {
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  width: 100%;
  min-width: min(560px, calc(100vw - 28px));
  max-height: min(520px, calc(100vh - 120px));
  overflow: hidden;
  z-index: 1400;
}

.dashboard-search-dropdown .site-search-dropdown__body {
  max-height: 390px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary-1), transparent 62%) transparent;
}

.dashboard-search-dropdown .site-search-dropdown__body::-webkit-scrollbar {
  width: 6px;
}

.dashboard-search-dropdown .site-search-dropdown__body::-webkit-scrollbar-track {
  background: transparent;
}

.dashboard-search-dropdown .site-search-dropdown__body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-1), transparent 70%);
}

.dashboard-search-result {
  grid-template-columns: 42px minmax(0, 1fr) max-content;
}

.dashboard-search-result .site-search-result__media {
  display: inline-grid;
  place-items: center;
}

.dashboard-search-result .site-search-result__price {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--soft), transparent 18%);
  font-size: 11px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .dashboard-search-dropdown {
    position: fixed;
    top: 76px;
    left: 14px;
    right: 14px;
    width: auto;
    min-width: 0;
    max-height: calc(100vh - 100px);
  }

  .dashboard-search-result {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .dashboard-search-result .site-search-result__price {
    grid-column: 2;
    justify-self: flex-start;
    margin-top: -3px;
  }
}

/* v116 bookmark media fallback */
.bookmark-card__media.is-image-broken {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 24% 22%, color-mix(in srgb, var(--primary-1), transparent 82%), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--background-2), transparent 4%), color-mix(in srgb, var(--card), transparent 4%));
}

.bookmark-card__media.is-image-broken img {
  opacity: .76;
  object-fit: contain;
  padding: 26px;
}

/* v117 index course cover fallback */
.cover-art.is-image-broken img[data-index-course-cover] {
  display: none;
}

.cover-art .index-course-cover-fallback[hidden] {
  display: none;
}

.cover-art.is-image-broken .index-course-cover-fallback {
  display: inline-grid;
}