@import url('./home-tokens.css?v=20260720-theme-parity-1');
@import url('./home/base.css?v=20260719-content-frame-1');
@import url('./home/hero.css?v=20260720-theme-parity-1');
@import url('./home/courses.css?v=20260720-theme-parity-1');
@import url('./home/responsive.css?v=20260720-mobile-fixes-1');
@import url('./home/density.css?v=20260720-readable-frame-2');

body.home-page {
  min-height: 100vh;
  font-family: var(--site-font-body);
  background:
    radial-gradient(circle at top, rgba(76, 141, 255, .12), transparent 28%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%);
  color: var(--text);
}

.home-page main {
  padding-bottom: 80px;
}

.home-page .hero {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.home-page .home-create-course-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--subcat-pill-border);
  border-radius: 12px;
  background: var(--subcat-pill-bg);
  color: var(--subcat-pill-text);
  box-shadow: var(--courses-control-shadow);
  font: inherit;
  font-size: var(--font-size-100);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}

.home-page .home-create-course-btn:hover,
.home-page .home-create-course-btn:focus-visible {
  color: var(--subcat-pill-active-text);
  border-color: var(--subcat-pill-active-border);
  background: var(--subcat-pill-hover-bg);
  box-shadow: var(--courses-control-hover-shadow);
  outline: 0;
  transform: translateY(-1px);
}

.home-page .home-create-course-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--site-accent);
  box-shadow: none;
  font-size: var(--font-size-200);
  line-height: 1;
}

.home-direction-color-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 7px 14px 7px 7px;
  border: 1px solid var(--admin-modal-border, #d8e0ec);
  border-radius: var(--admin-modal-radius-sm, 12px);
  background: var(--admin-modal-surface, #f8fafc);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.home-direction-color-picker:focus-within {
  border-color: var(--site-accent-border);
  background: var(--admin-modal-bg, #ffffff);
  box-shadow: 0 0 0 4px var(--site-accent-focus);
}

.admin-editor-modal__field .home-direction-color-picker input[type="color"] {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.home-direction-color-picker input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.home-direction-color-picker input[type="color"]::-webkit-color-swatch {
  border: 1px solid var(--admin-modal-border, rgba(120, 138, 168, .28));
  border-radius: 10px;
}

.home-direction-color-picker input[type="color"]::-moz-color-swatch {
  border: 1px solid var(--admin-modal-border, rgba(120, 138, 168, .28));
  border-radius: 10px;
}

.home-direction-color-picker__hint {
  color: var(--admin-modal-text, #182235);
  font-size: var(--font-size-100);
  font-weight: 600;
}

.home-course-editor-modal__panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1000px, calc(100vw - 32px));
}

.home-course-editor-modal .admin-editor-modal__body {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 24px;
  padding: 22px 32px 24px;
}

.home-course-editor-modal .admin-editor-modal__main {
  gap: 14px;
}

.home-course-editor-modal .admin-editor-modal__field input,
.home-course-editor-modal .admin-editor-modal__field select {
  min-height: 46px;
}

.home-course-editor-modal .admin-editor-modal__field textarea {
  min-height: 138px;
  max-height: 240px;
}

.home-course-editor-modal__description {
  grid-column: 1 / -1;
}

.home-course-editor-modal__description textarea {
  min-height: 220px;
  max-height: min(42vh, 380px);
}

.home-course-editor-modal__asset {
  gap: 14px;
  padding: 16px;
}

.home-course-editor-modal .admin-editor-modal__asset-head strong {
  font-size: var(--font-size-300);
}

.home-course-editor-modal .admin-editor-modal__preview {
  min-height: 180px;
}

.home-course-editor-modal .admin-editor-modal__preview img {
  max-height: 152px;
}

.home-course-editor-modal .admin-editor-modal__source-tabs {
  margin-top: 2px;
}

.home-course-editor-modal .admin-editor-modal__inline-field {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

@media (max-width: 900px) {
  .home-course-editor-modal .admin-editor-modal__body {
    grid-template-columns: 1fr;
    padding: 20px 22px 22px;
  }
}

@media (max-width: 640px) {
  .home-course-editor-modal .admin-editor-modal__body {
    padding: 18px 16px;
  }

  .home-course-editor-modal .admin-editor-modal__inline-field {
    grid-template-columns: 1fr;
  }
}

.home-direction-modal__panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(860px, calc(100vw - 32px));
}

.home-direction-modal .admin-editor-modal__body {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: 22px;
  padding: 22px 32px 24px;
}

.home-direction-modal .admin-editor-modal__main {
  gap: 14px;
}

.home-direction-modal .admin-editor-modal__field input,
.home-direction-modal .admin-editor-modal__field select {
  min-height: 44px;
}

.home-direction-modal .admin-editor-modal__field textarea {
  min-height: 128px;
}

.home-direction-icon-field {
  position: relative;
  gap: 8px;
}

.home-direction-attachment {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 7px 8px 7px 9px;
  border: 1px solid var(--admin-modal-border, #d8e0ec);
  border-radius: var(--admin-modal-radius-sm, 12px);
  background: var(--admin-modal-surface, #f8fafc);
  color: var(--admin-modal-text, #182235);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.home-direction-attachment:focus-within {
  border-color: var(--site-accent-border);
  background: var(--admin-modal-bg, #ffffff);
  box-shadow: 0 0 0 4px var(--site-accent-focus);
}

.home-direction-attachment__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--admin-modal-border, rgba(120, 138, 168, .22));
  border-radius: 10px;
  background: var(--admin-modal-control-strong, #ffffff);
  color: var(--admin-modal-muted, #64748b);
  overflow: hidden;
}

.home-direction-attachment.has-file .home-direction-attachment__thumb {
  color: var(--site-accent);
}

.home-direction-attachment__thumb img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.home-direction-attachment__thumb i {
  font-size: var(--font-size-400);
  line-height: 1;
}

.home-direction-attachment__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.home-direction-attachment__meta strong,
.home-direction-attachment__meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-direction-attachment__meta strong {
  color: var(--admin-modal-text, #182235);
  font-size: var(--font-size-100);
  font-weight: 600;
  line-height: 1.2;
}

.home-direction-attachment__meta small {
  color: var(--admin-modal-muted, #64748b);
  font-size: var(--font-size-100);
  font-weight: 500;
  line-height: 1.25;
}

.home-direction-attachment__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--site-accent) 28%, var(--admin-modal-border, #d8e0ec));
  border-radius: 10px;
  background: color-mix(in srgb, var(--site-accent) 10%, var(--admin-modal-bg, #ffffff));
  color: var(--site-accent);
  font: inherit;
  font-size: var(--font-size-100);
  font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.home-direction-attachment__button:hover,
.home-direction-attachment__button:focus-visible {
  border-color: color-mix(in srgb, var(--site-accent) 42%, var(--admin-modal-border, #d8e0ec));
  background: color-mix(in srgb, var(--site-accent) 15%, var(--admin-modal-bg, #ffffff));
}

.home-direction-attachment__button--ghost {
  width: 36px;
  padding: 0;
  border-color: var(--admin-modal-border, rgba(120, 138, 168, .24));
  background: var(--admin-modal-control-strong, #ffffff);
  color: var(--admin-modal-muted, #64748b);
}

.home-direction-attachment__button--ghost:hover,
.home-direction-attachment__button--ghost:focus-visible {
  border-color: var(--admin-modal-border-strong, rgba(120, 138, 168, .36));
  background: var(--admin-modal-control-strong, #ffffff);
  color: var(--admin-modal-text, #182235);
}

.home-direction-attachment__input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.home-direction-modal__preview-card {
  min-height: 0;
}

.home-direction-modal__preview {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  min-height: 190px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--direction-preview-color, var(--site-accent)) 26%, #ffffff);
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--direction-preview-color, var(--site-accent)) 92%, #111827) 0%, color-mix(in srgb, var(--direction-preview-color, var(--site-accent)) 76%, #ffffff) 100%);
  color: #fff;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.home-direction-modal__preview-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), 0 12px 24px rgba(15, 23, 42, .14);
  overflow: hidden;
}

.home-direction-modal__preview-icon img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.home-direction-modal__preview-icon i {
  font-size: var(--font-size-700);
  line-height: 1;
}

.home-direction-modal__preview strong {
  max-width: 260px;
  font-family: var(--site-font-display);
  font-size: var(--font-size-300);
  font-weight: 700;
  line-height: 1.2;
}

.home-direction-modal__preview p {
  max-width: 270px;
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: var(--font-size-100);
  font-weight: 600;
  line-height: 1.45;
}

.home-direction-modal__preview--subcategory {
  grid-template-columns: 40px minmax(0, 1fr);
  justify-items: start;
  align-content: center;
  gap: 10px;
  min-height: 66px;
  padding: 12px 16px;
  border-color: color-mix(in srgb, var(--direction-preview-color, var(--site-accent)) 30%, var(--admin-modal-border));
  border-radius: 999px;
  background: linear-gradient(180deg, var(--admin-modal-bg), var(--admin-modal-surface));
  color: var(--admin-modal-text);
  text-align: left;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--direction-preview-color, var(--site-accent)) 82%, var(--admin-modal-bg)),
    0 10px 24px color-mix(in srgb, var(--admin-modal-text) 8%, transparent);
}

.home-direction-modal__preview--subcategory .home-direction-modal__preview-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--direction-preview-color, var(--site-accent)) 12%, var(--admin-modal-bg));
  color: color-mix(in srgb, var(--direction-preview-color, var(--site-accent)) 82%, var(--admin-modal-text));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--direction-preview-color, var(--site-accent)) 20%, var(--admin-modal-bg));
}

.home-direction-modal__preview--subcategory .home-direction-modal__preview-icon img {
  width: 34px;
  height: 34px;
}

.home-direction-modal__preview--subcategory .home-direction-modal__preview-icon i {
  font-size: var(--font-size-500);
}

.home-direction-modal__preview--subcategory strong {
  max-width: 100%;
  color: var(--admin-modal-text);
  font-size: var(--font-size-100);
  font-weight: 700;
}

.home-direction-modal__preview--subcategory p {
  display: none;
}

@media (max-width: 900px) {
  .home-direction-modal .admin-editor-modal__body {
    grid-template-columns: 1fr;
    padding: 20px 22px 22px;
  }
}

@media (max-width: 640px) {
  .home-direction-modal .admin-editor-modal__body {
    padding: 18px 16px;
  }
}

.home-direction-delete-modal__panel {
  width: min(560px, calc(100vw - 32px));
  grid-template-rows: minmax(0, 1fr) auto;
}

.home-direction-delete-modal__body {
  display: grid;
  gap: 16px;
  padding: 34px 88px 24px 34px;
}

.home-direction-delete-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--admin-modal-danger-soft, #fff0f3);
  color: var(--admin-modal-danger, #d83d58);
  box-shadow: inset 0 0 0 1px var(--admin-modal-danger-icon-border, rgba(225, 63, 90, .14));
}

.home-direction-delete-modal__icon i {
  font-size: var(--font-size-700);
}

.home-direction-delete-modal__body h3 {
  margin: 0 0 8px;
  color: var(--admin-modal-text, #1d293d);
  font-family: var(--site-font-display);
  font-size: var(--font-size-600);
  font-weight: 700;
  line-height: 1.1;
}

.home-direction-delete-modal__body p {
  margin: 0;
  color: var(--admin-modal-muted, #5f6f8f);
  font-size: var(--font-size-100);
  font-weight: 500;
  line-height: 1.55;
}

.home-direction-delete-modal__body strong {
  color: var(--admin-modal-text, #1d293d);
  font-weight: 700;
}

@media (max-width: 768px) {
  .home-page .hero-categories {
    justify-content: flex-start;
    scroll-padding-inline: 10px;
  }

  .home-page .course-card-v2:hover {
    transform: translateY(-3px);
  }
}

@media (max-width: 640px) {
  .home-page .home-create-course-btn {
    flex: 0 0 auto;
  }
}