/* Magnitoland Mini App — единая тема для app.html и подключённых пользовательских экранов.
   Характер: тёмный гранатовый бренд, светлая рабочая поверхность, бирюзовый камень. */

html.ml-app-skin {
  /* Scroll restoration is immediate; explicit smooth navigation remains opt-in. */
  scroll-behavior: auto;
  color-scheme: light;
  --ml-background: #f4f0eb;
  --ml-on-background: #292329;
  --ml-surface: #fffdfa;
  --ml-on-surface: #292329;
  --ml-surface-variant: #f0eae7;
  --ml-on-surface-variant: #777078;
  --ml-outline: #8c8387;
  --ml-outline-variant: #e7dfe1;
  --ml-primary: #7c2c45;
  --ml-on-primary: #ffffff;
  --ml-primary-container: #f3e2e7;
  --ml-on-primary-container: #502033;
  --glass-bg: #fffdfa;
  --glass-bg-soft: #f8f5f2;
  --glass-border: #e8dfe0;
  --glass-dot: transparent;
  --glass-shadow: 0 3px 12px rgba(55, 31, 43, .055);
  --glass-shadow-hov: 0 9px 24px rgba(55, 31, 43, .12);
  --accent-red: #a93d52;
  --accent-teal: #347b7d;
  --accent-gold: #a56e25;
  --accent-purp: #71558d;
  --accent-blue: #3d7293;
  --accent-red-lt: #f6e8eb;
  --accent-teal-lt: #e7f1ef;
  --logo-magnito: #782b43;
  --logo-land: #74c6c1;
  --logo-magnito-grad: linear-gradient(135deg, #8e344c, #5c263e);
  --logo-land-grad: linear-gradient(135deg, #a5e2dc, #56a9ad);
  --gem-btn-grad: linear-gradient(135deg, #85304a, #b54858);
  --gem-btn-shadow: 0 5px 14px rgba(124, 44, 69, .22);
}

@media (prefers-color-scheme: dark) {
  html.ml-app-skin:not(.theme-light):not(.theme-dark) {
    color-scheme: dark;
    --ml-background: #19161a;
    --ml-on-background: #f4eef1;
    --ml-surface: #252126;
    --ml-on-surface: #f4eef1;
    --ml-surface-variant: #302a31;
    --ml-on-surface-variant: #b9aeb5;
    --ml-outline: #a89ba3;
    --ml-outline-variant: #443941;
    --ml-primary: #dc879a;
    --ml-on-primary: #35111d;
    --ml-primary-container: #512532;
    --ml-on-primary-container: #ffdae2;
    --glass-bg: #252126;
    --glass-bg-soft: #302a31;
    --glass-border: #443941;
    --glass-shadow: 0 4px 16px rgba(0, 0, 0, .24);
    --glass-shadow-hov: 0 10px 25px rgba(0, 0, 0, .34);
    --accent-red: #e795a5;
    --accent-teal: #83c9c2;
    --accent-gold: #e4bd7a;
    --accent-purp: #c1a4dc;
    --accent-blue: #91c0df;
    --accent-red-lt: #48252f;
    --accent-teal-lt: #203938;
    --logo-magnito: #f7edf0;
    --logo-land: #8ed8d0;
    --logo-magnito-grad: linear-gradient(135deg, #fff1f4, #e5a1b0);
    --logo-land-grad: linear-gradient(135deg, #c5f4ee, #71c3bf);
    --gem-btn-grad: linear-gradient(135deg, #a84c64, #82374f);
    --gem-btn-shadow: 0 5px 15px rgba(0, 0, 0, .28);
  }
}

html.ml-app-skin.theme-dark {
  color-scheme: dark;
  --ml-background: #19161a;
  --ml-on-background: #f4eef1;
  --ml-surface: #252126;
  --ml-on-surface: #f4eef1;
  --ml-surface-variant: #302a31;
  --ml-on-surface-variant: #b9aeb5;
  --ml-outline: #a89ba3;
  --ml-outline-variant: #443941;
  --ml-primary: #dc879a;
  --ml-on-primary: #35111d;
  --ml-primary-container: #512532;
  --ml-on-primary-container: #ffdae2;
  --glass-bg: #252126;
  --glass-bg-soft: #302a31;
  --glass-border: #443941;
  --glass-shadow: 0 4px 16px rgba(0, 0, 0, .24);
  --glass-shadow-hov: 0 10px 25px rgba(0, 0, 0, .34);
  --accent-red: #e795a5;
  --accent-teal: #83c9c2;
  --accent-gold: #e4bd7a;
  --accent-purp: #c1a4dc;
  --accent-blue: #91c0df;
  --accent-red-lt: #48252f;
  --accent-teal-lt: #203938;
  --logo-magnito: #f7edf0;
  --logo-land: #8ed8d0;
  --logo-magnito-grad: linear-gradient(135deg, #fff1f4, #e5a1b0);
  --logo-land-grad: linear-gradient(135deg, #c5f4ee, #71c3bf);
  --gem-btn-grad: linear-gradient(135deg, #a84c64, #82374f);
  --gem-btn-shadow: 0 5px 15px rgba(0, 0, 0, .28);
}

html.ml-app-skin.theme-light {
  color-scheme: light;
  --ml-background: #f4f0eb;
  --ml-on-background: #292329;
  --ml-surface: #fffdfa;
  --ml-on-surface: #292329;
  --ml-surface-variant: #f0eae7;
  --ml-on-surface-variant: #777078;
  --ml-outline: #8c8387;
  --ml-outline-variant: #e7dfe1;
  --ml-primary: #7c2c45;
  --ml-on-primary: #ffffff;
  --ml-primary-container: #f3e2e7;
  --ml-on-primary-container: #502033;
  --glass-bg: #fffdfa;
  --glass-bg-soft: #f8f5f2;
  --glass-border: #e8dfe0;
  --glass-shadow: 0 3px 12px rgba(55, 31, 43, .055);
  --glass-shadow-hov: 0 9px 24px rgba(55, 31, 43, .12);
  --accent-red: #a93d52;
  --accent-teal: #347b7d;
  --accent-gold: #a56e25;
  --accent-purp: #71558d;
  --accent-blue: #3d7293;
  --accent-red-lt: #f6e8eb;
  --accent-teal-lt: #e7f1ef;
  --logo-magnito: #782b43;
  --logo-land: #74c6c1;
  --logo-magnito-grad: linear-gradient(135deg, #8e344c, #5c263e);
  --logo-land-grad: linear-gradient(135deg, #a5e2dc, #56a9ad);
  --gem-btn-grad: linear-gradient(135deg, #85304a, #b54858);
  --gem-btn-shadow: 0 5px 14px rgba(124, 44, 69, .22);
}

html.ml-app-skin body {
  color: var(--ml-on-background);
  background: var(--ml-background) !important;
  background-image: none !important;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
html.ml-app-skin body#ml-app-root {
  width: 100%;
  max-width: 560px;
  min-height: 100vh;
  padding: max(14px, env(safe-area-inset-top)) 16px calc(104px + env(safe-area-inset-bottom));
}
html.ml-app-skin.ml-embed body#ml-app-root { padding: 12px 16px 24px; }
html.ml-app-skin body::before { display: none !important; }
html.ml-app-skin a { -webkit-tap-highlight-color: transparent; }
html.ml-app-skin :focus-visible { outline: 3px solid var(--accent-red-lt); outline-offset: 2px; }

/* Главная: фирменная шапка и быстрые действия */
html.ml-app-skin #home-screen > header {
  position: relative;
  overflow: hidden;
  padding: 23px 20px 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 93% 4%, rgba(116, 198, 193, .24), transparent 34%),
    linear-gradient(128deg, #30212f 0%, #642940 59%, #873747 100%);
  box-shadow: 0 14px 34px rgba(77, 35, 52, .2);
  text-align: left;
}
html.ml-app-skin #home-screen > header::after {
  content: '';
  position: absolute;
  width: 188px;
  height: 188px;
  right: -105px;
  bottom: -142px;
  border: 1px solid rgba(214, 246, 239, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(214, 246, 239, .035), 0 0 0 38px rgba(214, 246, 239, .025);
  pointer-events: none;
}
html.ml-app-skin #home-screen .home-top-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
html.ml-app-skin #home-screen .logo-wrap {
  display: flex;
  margin: 0;
  animation: none;
}
html.ml-app-skin #home-screen .logo-text {
  color: #fff9f8;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(28px, 7vw, 36px);
  font-weight: 800;
  letter-spacing: -1.8px;
  line-height: 1;
}
html.ml-app-skin #home-screen .logo-text::before {
  content: '';
  display: inline-block;
  width: .7em;
  height: .7em;
  margin-right: 7px;
  vertical-align: -.015em;
  background: #8bd6ce;
  -webkit-mask: var(--gem-mask) center / contain no-repeat;
          mask: var(--gem-mask) center / contain no-repeat;
}
html.ml-app-skin #home-screen .logo-text em {
  color: #8bd6ce;
  background: none;
  -webkit-text-fill-color: currentColor;
}
html.ml-app-skin #home-screen .tagline {
  position: relative;
  z-index: 1;
  max-width: 340px;
  margin: 9px 0 0;
  color: rgba(255, 247, 247, .78);
  font-size: 13px;
  line-height: 1.45;
  animation: none;
}
html.ml-app-skin #ml-login-area { position: relative; z-index: 1; }
html.ml-app-skin .home-actions-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 13px;
}
html.ml-app-skin .home-profile-link,
html.ml-app-skin .home-notif-btn {
  min-height: 42px;
  padding: 6px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: var(--ml-surface);
  color: var(--ml-on-surface);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--glass-shadow);
}
html.ml-app-skin .home-prof-av {
  width: 27px;
  height: 27px;
  border: 2px solid var(--ml-surface);
  background: var(--accent-red-lt);
  color: var(--accent-red);
}
html.ml-app-skin .home-actions-row .theme-switch {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: var(--ml-surface);
  box-shadow: var(--glass-shadow);
}
html.ml-app-skin .theme-switch .ic { opacity: .62; }
html.ml-app-skin .theme-switch .knob { width: 24px; height: 24px; top: 8px; left: 8px; }
html.ml-app-skin.theme-dark .theme-switch .knob { left: 10px; }
html.ml-app-skin .home-notif-btn { margin-left: auto; }
html.ml-app-skin #ml-greeting {
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--ml-surface);
  box-shadow: var(--glass-shadow);
}
html.ml-app-skin .gr-balance {
  min-height: 62px;
  padding: 11px 13px;
  border-radius: 13px;
  background: var(--ml-surface-variant);
  border: 1px solid transparent;
}
html.ml-app-skin .gr-balance-value { font-family: 'Manrope', sans-serif; font-weight: 800; }

html.ml-app-skin .menu-section {
  max-width: none;
  margin: 14px auto;
  padding: 0;
  animation: none;
}
html.ml-app-skin .tabs-bar {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background: var(--ml-surface-variant);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.ml-app-skin .tab-btn {
  border-radius: 11px;
  color: var(--ml-on-surface-variant);
  font-weight: 700;
}
html.ml-app-skin .tab-btn.active {
  background: var(--ml-surface);
  color: var(--accent-red);
  box-shadow: var(--glass-shadow);
}
html.ml-app-skin .ml-menu-switch {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--ml-surface-variant);
}
html.ml-app-skin .ml-menu-seg {
  min-height: 38px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  color: var(--ml-on-surface-variant);
}
html.ml-app-skin .ml-menu-seg.active {
  background: var(--ml-surface);
  color: var(--accent-red);
  box-shadow: var(--glass-shadow);
}
html.ml-app-skin #home-screen .js-menu-user .menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
html.ml-app-skin #home-screen .js-menu-user .menu-tile {
  position: relative;
  display: flex;
  min-height: 132px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--ml-surface);
  box-shadow: var(--glass-shadow);
  color: var(--ml-on-surface);
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
html.ml-app-skin #home-screen .js-menu-user .menu-tile:active { transform: scale(.98); }
html.ml-app-skin #home-screen .js-menu-user .menu-tile:hover {
  border-color: var(--accent-red);
  box-shadow: var(--glass-shadow-hov);
}
html.ml-app-skin #home-screen .js-menu-user .menu-tile-icon {
  display: flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background: var(--ml-surface-variant);
  font-size: 21px;
}
html.ml-app-skin #home-screen .js-menu-user .menu-tile-body { width: 100%; padding-right: 12px; }
html.ml-app-skin #home-screen .js-menu-user .menu-tile-title {
  color: var(--ml-on-surface);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}
html.ml-app-skin #home-screen .js-menu-user .menu-tile-sub {
  margin-top: 4px;
  color: var(--ml-on-surface-variant);
  font-size: 11px;
  line-height: 1.35;
}
html.ml-app-skin #home-screen .js-menu-user .menu-tile-arrow {
  position: absolute;
  top: 12px;
  right: 13px;
  color: var(--ml-outline);
  font-size: 16px;
}
html.ml-app-skin #home-screen .js-menu-user .menu-tile:nth-child(3) {
  order: -1;
  grid-column: 1 / -1;
  min-height: 94px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 16px;
  border-color: #7c2c45;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 214, 206, .21), transparent 40%),
    linear-gradient(112deg, #6b2942, #963e50);
  box-shadow: 0 8px 20px rgba(112, 39, 63, .17);
}
html.ml-app-skin #home-screen .js-menu-user .menu-tile:nth-child(3) .menu-tile-icon {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
html.ml-app-skin #home-screen .js-menu-user .menu-tile:nth-child(3) .menu-tile-title { color: #fff; font-size: 16px; }
html.ml-app-skin #home-screen .js-menu-user .menu-tile:nth-child(3) .menu-tile-sub { color: rgba(255, 255, 255, .76); }
html.ml-app-skin #home-screen .js-menu-user .menu-tile:nth-child(3) .menu-tile-arrow { color: rgba(255, 255, 255, .82); }
html.ml-app-skin #home-screen .js-menu-user .menu-tile:nth-child(4) { grid-column: 1 / -1; min-height: 84px; flex-direction: row; align-items: center; }
html.ml-app-skin #home-screen .js-menu-user .menu-tile:nth-child(4) .menu-tile-body { width: auto; }
html.ml-app-skin #home-screen .js-menu-user .menu-tile:nth-child(4) .menu-tile-arrow { top: 50%; transform: translateY(-50%); }

/* Нижняя навигация: плотная фирменная панель вместо полупрозрачного стекла. */
html.ml-app-skin .ml-nav-bar { padding: 8px 14px calc(14px + env(safe-area-inset-bottom)); }
html.ml-app-skin .ml-nav-bar-inner {
  max-width: 560px;
  gap: 2px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: #30232e;
  box-shadow: 0 10px 30px rgba(34, 20, 30, .24);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.ml-app-skin .ml-nav-btn {
  min-height: 48px;
  gap: 4px;
  padding: 6px 13px;
  border-radius: 15px;
  color: rgba(255, 247, 249, .72);
  font-size: 10px;
  font-weight: 700;
}
html.ml-app-skin .ml-nav-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html.ml-app-skin .ml-nav-btn.active { background: #87394f; color: #fff; }
html.ml-app-skin .ml-nav-btn-icon svg { width: 20px; height: 20px; }
html.ml-app-skin.theme-dark .ml-nav-bar-inner { background: #211b22; border-color: #443941; }
html.ml-app-skin.theme-dark .ml-nav-btn.active { background: #703447; }

/* Создание и просмотр лота */
html.ml-app-skin .page-header {
  max-width: none;
  gap: 12px;
  padding: 13px 0 18px;
}
html.ml-app-skin .site-logo-text {
  color: var(--logo-magnito);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 800;
}
html.ml-app-skin .site-logo-text em { color: var(--logo-land); background: none; -webkit-text-fill-color: currentColor; }
html.ml-app-skin .site-logo-text::before { background: var(--logo-land); }
html.ml-app-skin .page-title { color: var(--ml-on-surface); font-size: 18px; font-weight: 800; }
html.ml-app-skin #view-title {
  margin: 2px 0 14px;
  color: var(--ml-on-surface);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.035em;
  text-align: left;
}
html.ml-app-skin .section,
html.ml-app-skin .settings-card {
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--ml-surface);
  box-shadow: var(--glass-shadow);
}
html.ml-app-skin .section { margin-bottom: 12px; padding: 15px; }
html.ml-app-skin .section-label {
  gap: 9px;
  margin-bottom: 10px;
  color: var(--ml-on-surface);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .045em;
}
html.ml-app-skin .section-label::before {
  border: 0;
  background: var(--accent-red-lt);
  color: var(--accent-red);
  font-weight: 800;
  opacity: 1;
}
html.ml-app-skin .settings-row { padding: 14px 15px; }
html.ml-app-skin .settings-divider { border-color: var(--glass-border); }
html.ml-app-skin .setting-label { color: var(--ml-on-surface); font-weight: 700; }
html.ml-app-skin .setting-hint,
html.ml-app-skin .counter,
html.ml-app-skin .promo-hint,
html.ml-app-skin .view-lot-info,
html.ml-app-skin .view-lot-terms { color: var(--ml-on-surface-variant); }
html.ml-app-skin input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.ml-app-skin textarea,
html.ml-app-skin select {
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--ml-surface);
  color: var(--ml-on-surface);
  box-shadow: none;
}
html.ml-app-skin input:focus,
html.ml-app-skin textarea:focus,
html.ml-app-skin select:focus { border-color: var(--accent-teal); outline: 3px solid var(--accent-teal-lt); }
html.ml-app-skin .upload-split { border-color: var(--glass-border); border-radius: 15px; background: var(--ml-surface-variant); }
html.ml-app-skin .upload-area,
html.ml-app-skin .paste-zone { color: var(--ml-on-surface-variant); }
html.ml-app-skin .lot-status { border-color: var(--glass-border); background: var(--ml-surface); }
html.ml-app-skin .view-price-row { align-items: center; gap: 8px; }
html.ml-app-skin .view-price-row .price-value { color: var(--accent-red); font-family: 'Manrope', sans-serif; font-weight: 800; }
html.ml-app-skin .view-price-row .price-sep,
html.ml-app-skin .view-price-row .price-count { color: var(--ml-on-surface-variant); }
html.ml-app-skin .comments-pill { border-radius: 12px; background: var(--ml-surface); box-shadow: none; }
html.ml-app-skin .view-lot-terms .rules-link { color: var(--accent-red); }
html.ml-app-skin .media-tab { color: var(--ml-on-surface-variant); }
html.ml-app-skin .media-tab.active { color: var(--accent-red); border-color: var(--accent-red); }
html.ml-app-skin .btn,
html.ml-app-skin .cb-btn,
html.ml-app-skin .la-btn {
  min-height: 46px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: var(--ml-surface);
  color: var(--ml-on-surface);
  box-shadow: none;
  font-weight: 750;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
html.ml-app-skin .btn:active,
html.ml-app-skin .cb-btn:active,
html.ml-app-skin .la-btn:active { transform: scale(.985); }
html.ml-app-skin .btn-save,
html.ml-app-skin .btn-buy,
html.ml-app-skin .cb-btn-primary {
  border-color: transparent;
  background: var(--gem-btn-grad);
  color: #fff;
  box-shadow: var(--gem-btn-shadow);
}
html.ml-app-skin .btn-publish { border-color: transparent; background: var(--accent-teal); color: #fff; }
html.ml-app-skin .btn:disabled { opacity: .48; }
html.ml-app-skin .error { color: #b63545; }
html.ml-app-skin .success { color: var(--accent-teal); }
html.ml-app-skin .lightbox,
html.ml-app-skin .modal-content,
html.ml-app-skin .modal-card {
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--ml-surface);
  color: var(--ml-on-surface);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .2);
}
html.ml-app-skin footer.ml-footer {
  margin-top: 26px;
  padding: 20px 10px 18px;
  border-color: var(--glass-border);
  color: var(--ml-on-surface-variant);
  font-size: 12px;
}
html.ml-app-skin footer.ml-footer a { color: var(--ml-on-surface-variant); }
html.ml-app-skin .ml-footer-logo {
  color: var(--logo-magnito);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
}
html.ml-app-skin .ml-footer-logo em { color: var(--logo-land); background: none; -webkit-text-fill-color: currentColor; }
html.ml-app-skin .ml-footer-logo::before { background: var(--logo-land); }

@media (max-width: 360px) {
  html.ml-app-skin body { padding-right: 12px; padding-left: 12px; }
  html.ml-app-skin #home-screen .js-menu-user .menu-tile { min-height: 120px; padding: 12px; }
  html.ml-app-skin .ml-nav-bar { padding-right: 8px; padding-left: 8px; }
  html.ml-app-skin .ml-nav-btn { padding-right: 9px; padding-left: 9px; }
}