/* ==========================================================================
   ГРАВИУМ Space — выравнивание по языку memories.gravium.ru (v3)

   Что было не так в v2: холодное золото #d7ae68 на синеватом фоне и антиква
   во ВСЁМ заголовке. У memories иначе — тёплый графит, янтарное золото #e09640,
   заголовок жирным гротеском, а антиква курсивом только в акцентном слове.
   Здесь берём их палитру и типографику, тему космоса оставляем.
   ========================================================================== */

:root {
  /* палитра memories */
  --bg: #050505;
  --bg-deep: #030303;
  --graphite: #10100f;
  --graphite-2: #171614;

  --surface: rgba(16, 16, 15, .82);
  --surface-2: rgba(23, 22, 20, .86);
  --surface-3: rgba(32, 30, 27, .9);

  --line: rgba(255, 255, 255, .095);
  --line-strong: rgba(224, 150, 64, .34);

  --text: #f7f2e8;
  --muted: rgba(247, 242, 232, .68);
  --faint: rgba(247, 242, 232, .42);

  --gold: #e09640;
  --gold-soft: #edaa6a;
  --gold-deep: #b3722a;

  /* старые имена — чтобы перекрасить весь space.css разом */
  --violet: #e09640;
  --violet-strong: #edaa6a;

  --shadow-card: 0 24px 80px rgba(0, 0, 0, .42), 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-lift: 0 34px 90px rgba(0, 0, 0, .55), 0 0 40px rgba(224, 150, 64, .10);
}

/* Фон: тёплый графит с космическим свечением, без синевы */
body {
  background:
    radial-gradient(1200px 760px at 82% -6%, rgba(224, 150, 64, .10), transparent 60%),
    radial-gradient(900px 620px at 8% 6%, rgba(120, 96, 170, .07), transparent 58%),
    radial-gradient(760px 520px at 50% 106%, rgba(224, 150, 64, .05), transparent 62%),
    linear-gradient(180deg, #050505 0%, #080806 46%, #040404 100%);
}

/* ==========================================================================
   Типографика как в memories: жирный гротеск + золотой курсив в акценте
   ========================================================================== */

.hero-title,
.home-shapes-head h2,
.editor-intro h1,
h1, h2 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .98;
  color: var(--text);
}

.hero-title { font-size: clamp(40px, 6vw, 76px); font-weight: 800; }
.editor-intro h1 { font-size: clamp(34px, 4.4vw, 58px); }
.home-shapes-head h2 { font-size: clamp(28px, 3.4vw, 44px); }

/* Акцентное слово — единственное место для антиквы */
.hero-title-glow {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.01em;
  background: linear-gradient(96deg, #edaa6a 6%, #e09640 48%, #b3722a 96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(224, 150, 64, .28));
}

/* Надзаголовок с чёрточкой, как у memories */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  opacity: .7;
}

.hero-lead,
.home-shapes-head p,
.editor-intro p { color: var(--muted); }

/* ==========================================================================
   Кнопки: у memories вторая кнопка светлая, а не призрачная
   ========================================================================== */

.btn-primary,
.header-order,
.primary-action,
button[type="submit"] {
  background: linear-gradient(135deg, #f0b877 2%, #e09640 52%, #b3722a 100%);
  color: #1a1005;
  box-shadow: 0 12px 32px rgba(224, 150, 64, .24), 0 0 0 1px rgba(255,255,255,.08) inset;
}

.btn-ghost {
  background: linear-gradient(180deg, #fbf7ef, #e8e2d6);
  border: 0;
  color: #17150f;
  font-weight: 650;
}

.btn-ghost:hover {
  background: linear-gradient(180deg, #ffffff, #f0ebe0);
  transform: translateY(-2px);
}

/* Плашки-теги под кнопками */
.hero-badges span,
.home-hero-badge {
  border-color: var(--line);
  background: rgba(255, 255, 255, .045);
  color: var(--muted);
}

/* Шапка */
.site-header {
  background: linear-gradient(180deg, rgba(5,5,5,.92), rgba(5,5,5,.68));
  border-bottom-color: var(--line);
}

.header-order { border-radius: 999px; }
.brand small { color: var(--muted); }

/* ==========================================================================
   Поверхности — тёплый графит вместо синего стекла
   ========================================================================== */

.home-hero-card,
.home-shape-card,
.home-note-inner,
.editor-inspector,
.sky-stage,
.control-section,
.product-option,
.style-option,
.service-band {
  background:
    radial-gradient(130% 100% at 6% 0%, rgba(255, 255, 255, .045), transparent 54%),
    var(--surface);
  border-color: var(--line);
}

.home-shape-card:hover { border-color: rgba(224, 150, 64, .34); }

/* Фокус и активные состояния */
input:focus, select:focus, textarea:focus {
  border-color: rgba(224, 150, 64, .58) !important;
  box-shadow: 0 0 0 4px rgba(224, 150, 64, .12) !important;
}

.style-option.is-active,
.product-option.is-active,
.view-button.is-active,
.style-option:has(input:checked),
.product-option:has(input:checked) {
  border-color: rgba(224, 150, 64, .55) !important;
  background: rgba(224, 150, 64, .10) !important;
}

select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23e09640' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8'/%3E%3C/svg%3E");
}

.search-field button {
  border-color: rgba(224, 150, 64, .40) !important;
  background: linear-gradient(135deg, rgba(237,170,106,.18), rgba(224,150,64,.10)) !important;
  color: var(--gold-soft) !important;
}

.project-state {
  border-color: rgba(224, 150, 64, .34) !important;
  background: rgba(224, 150, 64, .12) !important;
  color: var(--gold-soft);
}

.home-note-dot { background: var(--gold); box-shadow: 0 0 14px rgba(224, 150, 64, .6); }

/* ==========================================================================
   Редактор: живой предпросмотр как главный герой страницы
   ========================================================================== */

.sky-stage { position: relative; }

/* Подпись над сценой предпросмотра */
.stage-live-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.stage-live-label i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(224, 150, 64, .55);
  animation: livePulse 2.4s ease-out infinite;
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 150, 64, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(224, 150, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 150, 64, 0); }
}

/* Факты под предпросмотром — как в memories */
.stage-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--line);
}

.stage-facts div {
  padding: 12px 14px;
  background: var(--graphite);
}

.stage-facts span {
  display: block;
  margin-bottom: 3px;
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.stage-facts b {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
}

@media (max-width: 560px) {
  .stage-facts { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Карточки выбора режима (как «Только карта» / «Карта + воспоминание»)
   ========================================================================== */

.mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 22px;
}

@media (max-width: 720px) { .mode-cards { grid-template-columns: 1fr; } }

.mode-card {
  display: block;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px 18px;
  background: var(--graphite);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.mode-card:hover { transform: translateY(-2px); border-color: rgba(224, 150, 64, .3); }

.mode-card input { position: absolute; opacity: 0; pointer-events: none; }

.mode-card.is-active {
  border-color: rgba(224, 150, 64, .5);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(224, 150, 64, .14), transparent 58%),
    var(--graphite-2);
}

.mode-card em {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.mode-card b {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.mode-card p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.mode-card ul { margin: 0; padding: 0; list-style: none; }

.mode-card li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.85;
}

.mode-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 11px;
}

/* Блок истории прячется в режиме «только карта» */
.space-editor.mode-quick .story-section { display: none; }

/* ==========================================================================
   Ориентация заготовки и режим подписи
   ========================================================================== */

.layout-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}

.layout-option {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--graphite);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.layout-option:hover { border-color: rgba(224, 150, 64, .34); color: var(--text); }

.layout-option input { position: absolute; opacity: 0; pointer-events: none; }

.layout-option:has(input:checked) {
  border-color: rgba(224, 150, 64, .55);
  background: rgba(224, 150, 64, .12);
  color: var(--text);
}

/* Схематичная заготовка: лежит или стоит */
.layout-icon {
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  opacity: .85;
}

.layout-horizontal { width: 22px; height: 13px; }
.layout-vertical { width: 13px; height: 22px; }

.caption-options .layout-option { flex: 1 1 100%; justify-content: flex-start; }

@media (min-width: 560px) {
  .caption-options .layout-option { flex: 1 1 calc(50% - 4px); }
}