/* Таролог — мистический редизайн, теперь на 4 темах (макет из Claude Design).
   Все классы и id из index.html/app.js сохранены. Тема переключается атрибутом
   data-theme на <body>: dark (по умолчанию) · light · aurora (PRO) · ember (PRO).
   Цвета вынесены в переменные — сами правила ниже почти не меняются между темами. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root,
body[data-theme="dark"] {
  --void: #0b0910;
  --panel: #171327;
  --lilac: #9a8cb8;      --lilac-rgb: 154, 140, 184;
  --gold: #c9922e;
  --gold-bright: #e8be6a; --gold-rgb: 233, 190, 106;
  --parchment: #efe3c6;
  --sage: #6e9188;        --sage-rgb: 110, 145, 136;
  --vermilion: #b33a22;   --vermilion-rgb: 179, 58, 34;
  --ink: #efe3c6;
  --ink-soft: #cfc3a6;
  --rule: rgba(var(--gold-rgb), 0.18);
  --rule-strong: rgba(var(--gold-rgb), 0.45);
  --glow: rgba(var(--gold-rgb), 0.28);
  --danger: #b33a22;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --panel-a: rgba(27, 23, 48, 0.92);
  --panel-b: rgba(11, 9, 16, 0.92);
  --btn-grad: linear-gradient(180deg, #f0ce87, #c9922e);
  --btn-ink: #0b0910;
  --card-back-grad: radial-gradient(circle at 50% 46%, #372c60 0%, #171327 62%, #0e0c18 100%);
  --shadow-rgb: 0, 0, 0;
  --stars-display: block;
  --body-bg-image: radial-gradient(ellipse 60% 50% at 50% 0%, #1a1430 0%, #08070c 70%);
  --input-bg: rgba(27, 23, 48, 0.75);
  --overlay-scrim: rgba(6, 5, 10, 0.82);
  --overlay-card-bg: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(var(--gold-rgb), 0.15), #0f0c1a 70%);
  --summary-bg: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(var(--gold-rgb), 0.13), var(--panel-b));
}

body[data-theme="light"] {
  --void: #f7f1e3;
  --panel: #f1e8d6;
  --lilac: #6b5f80;      --lilac-rgb: 107, 95, 128;
  --gold: #6e4a10;
  --gold-bright: #8a5e14; --gold-rgb: 138, 94, 20;
  --parchment: #241b33;
  --sage: #3f6258;        --sage-rgb: 63, 98, 88;
  --vermilion: #9e2e18;   --vermilion-rgb: 158, 46, 24;
  --ink: #241b33;
  --ink-soft: #433856;
  --rule: rgba(var(--gold-rgb), 0.22);
  --rule-strong: rgba(var(--gold-rgb), 0.48);
  --glow: rgba(var(--gold-rgb), 0.22);
  --danger: #9e2e18;

  --panel-a: #fffcf4;
  --panel-b: #f2e9d7;
  --btn-grad: linear-gradient(180deg, #3b2f55, #241b33);
  --btn-ink: #f7f1e3;
  --card-back-grad: radial-gradient(circle at 50% 46%, #f3eada 0%, #e4d8c0 62%, #d5c7a9 100%);
  --shadow-rgb: 58, 44, 24;
  --stars-display: none;
  --body-bg-image: radial-gradient(ellipse 60% 50% at 50% 0%, #fffbf0 0%, #e4dac4 70%);
  --input-bg: #fffcf4;
  --overlay-scrim: rgba(48, 38, 26, 0.5);
  --overlay-card-bg: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(var(--gold-rgb), 0.2), #fffcf4 70%);
  --summary-bg: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(var(--gold-rgb), 0.18), #fffcf4);
}

/* PRO — доступна только с активной подпиской, см. openThemeSheet() в app.js */
body[data-theme="aurora"] {
  --void: #05070f;
  --panel: #1c2644;
  --lilac: #9eb1c6;      --lilac-rgb: 158, 177, 198;
  --gold: #d4b080;
  --gold-bright: #f3d2a7; --gold-rgb: 243, 210, 167;
  --parchment: #f5e8d2;
  --sage: #6fd8bc;        --sage-rgb: 111, 216, 188;
  --vermilion: #ee7d95;   --vermilion-rgb: 238, 125, 149;
  --ink: #f5e8d2;
  --ink-soft: #d9cdb7;
  --rule: rgba(var(--gold-rgb), 0.22);
  --rule-strong: rgba(var(--gold-rgb), 0.55);
  --glow: rgba(150, 98, 255, 0.3);
  --danger: #ee7d95;

  --panel-a: rgba(46, 64, 106, 0.44);
  --panel-b: rgba(10, 14, 28, 0.62);
  --btn-grad: linear-gradient(104deg, #8fe8d2, #f3d2a7 38%, #f0a8bc 68%, #a98cf5);
  --btn-ink: #070b16;
  --card-back-grad:
    linear-gradient(145deg, rgba(64, 224, 200, 0.28), rgba(150, 98, 255, 0.34) 45%, rgba(255, 132, 168, 0.26) 75%, rgba(6, 9, 20, 0.9)),
    radial-gradient(circle at 50% 42%, #2b4e6e, #0a0e1c 78%);
  --shadow-rgb: 0, 0, 0;
  --stars-display: block;
  --body-bg-image: radial-gradient(ellipse 70% 60% at 50% -5%, #1b2a4c 0%, #0a1024 38%, #03050c 78%);
  --input-bg: rgba(46, 64, 106, 0.42);
  --overlay-scrim: rgba(3, 5, 12, 0.84);
  --overlay-card-bg:
    radial-gradient(ellipse 100% 65% at 20% 0%, rgba(64, 224, 200, 0.24), transparent 62%),
    radial-gradient(ellipse 90% 60% at 90% 10%, rgba(150, 98, 255, 0.26), transparent 60%),
    linear-gradient(180deg, #0d1428, #060a16);
  --summary-bg:
    radial-gradient(ellipse 90% 70% at 30% 0%, rgba(var(--gold-rgb), 0.2), transparent 60%),
    radial-gradient(ellipse 80% 60% at 85% 20%, rgba(150, 98, 255, 0.24), transparent 62%),
    linear-gradient(180deg, rgba(16, 22, 44, 0.9), rgba(6, 9, 20, 0.94));
}

/* PRO — доступна только с активной подпиской, см. openThemeSheet() в app.js */
body[data-theme="ember"] {
  --void: #0e0407;
  --panel: #28090f;
  --lilac: #b4907f;      --lilac-rgb: 180, 144, 127;
  --gold: #c97a2c;
  --gold-bright: #e9b257; --gold-rgb: 233, 178, 87;
  --parchment: #f6e6c9;
  --sage: #96a473;        --sage-rgb: 150, 164, 115;
  --vermilion: #d6452a;   --vermilion-rgb: 214, 69, 42;
  --ink: #f6e6c9;
  --ink-soft: #dcc49e;
  --rule: rgba(var(--gold-rgb), 0.24);
  --rule-strong: rgba(var(--gold-rgb), 0.58);
  --glow: rgba(214, 69, 42, 0.35);
  --danger: #d6452a;

  --panel-a: rgba(74, 18, 26, 0.6);
  --panel-b: rgba(14, 4, 7, 0.74);
  --btn-grad: linear-gradient(104deg, #f5d48c, #e9b257 42%, #c97a2c);
  --btn-ink: #170508;
  --card-back-grad:
    linear-gradient(150deg, rgba(214, 69, 42, 0.34), rgba(122, 20, 34, 0.42) 52%, rgba(12, 3, 6, 0.92)),
    radial-gradient(circle at 50% 42%, #5e1622, #12050a 78%);
  --shadow-rgb: 0, 0, 0;
  --stars-display: none;
  --body-bg-image: radial-gradient(ellipse 70% 60% at 50% -5%, #3a0d14 0%, #1a0509 40%, #070203 80%);
  --input-bg: rgba(74, 18, 26, 0.5);
  --overlay-scrim: rgba(8, 2, 4, 0.86);
  --overlay-card-bg:
    radial-gradient(ellipse 100% 65% at 22% 0%, rgba(214, 69, 42, 0.3), transparent 62%),
    radial-gradient(ellipse 90% 60% at 88% 12%, rgba(233, 178, 87, 0.2), transparent 60%),
    linear-gradient(180deg, #1b060b, #0a0305);
  --summary-bg:
    radial-gradient(ellipse 90% 70% at 30% 0%, rgba(var(--gold-rgb), 0.22), transparent 60%),
    radial-gradient(ellipse 80% 60% at 86% 22%, rgba(214, 69, 42, 0.26), transparent 62%),
    linear-gradient(180deg, rgba(30, 9, 14, 0.92), rgba(9, 3, 5, 0.95));
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--ink);
  min-height: 100vh;
  background-color: var(--void);
  background-image: var(--body-bg-image);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: top center;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.3s ease;
}

a { color: var(--gold-bright); }
a:hover { color: #f3d89b; }

/* ---------- Starfield ---------- */

.stars-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: var(--stars-display);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(239, 227, 198, 0.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 28% 62%, rgba(239, 227, 198, 0.6), transparent 100%),
    radial-gradient(1.8px 1.8px at 44% 9%, rgba(var(--gold-rgb), 0.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 58% 78%, rgba(239, 227, 198, 0.55), transparent 100%),
    radial-gradient(1.5px 1.5px at 73% 35%, rgba(203, 170, 255, 0.8), transparent 100%),
    radial-gradient(1.1px 1.1px at 85% 68%, rgba(239, 227, 198, 0.5), transparent 100%),
    radial-gradient(1.6px 1.6px at 93% 22%, rgba(var(--gold-rgb), 0.7), transparent 100%),
    radial-gradient(1.2px 1.2px at 6% 84%, rgba(203, 170, 255, 0.6), transparent 100%),
    radial-gradient(1.3px 1.3px at 38% 92%, rgba(239, 227, 198, 0.5), transparent 100%),
    radial-gradient(1.4px 1.4px at 66% 52%, rgba(239, 227, 198, 0.45), transparent 100%);
  background-repeat: repeat;
  background-size: 100% 100%;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle {
  0%   { opacity: 0.45; }
  100% { opacity: 1; }
}
@keyframes rise {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes sigil-spin { to { transform: rotate(360deg); } }

.screen { display: none; padding: 22px 20px 60px; max-width: 480px; margin: 0 auto; position: relative; z-index: 1; }
.screen.active { display: block; animation: rise 0.45s ease both; }

/* ---------- Header / sigil ---------- */

.header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

.header-text h1,
.header-text h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  color: var(--parchment);
  line-height: 1.08;
  letter-spacing: 0.01em;
}
.header-text h1 { font-size: 32px; }
.header-text h2 { font-size: 23px; }

.subtitle {
  color: var(--lilac);
  font-style: italic;
  font-size: 16px;
  margin: 6px 0 0;
}

.sigil {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
  font-size: 19px;
  position: relative;
  box-shadow: 0 0 26px var(--glow), inset 0 0 14px rgba(var(--gold-rgb), 0.10);
}
.sigil::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(var(--gold-rgb), 0.35);
  animation: sigil-spin 34s linear infinite;
}

.back-btn {
  background: transparent;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  color: var(--gold-bright);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  font-family: 'Cormorant Garamond', serif;
}
.back-btn:active { background: rgba(var(--gold-rgb), 0.15); }

.header-row { display: flex; align-items: center; gap: 12px; }

/* ---------- Status banner ---------- */

.status-banner {
  border: none;
  border-left: 2px solid var(--sage);
  background: linear-gradient(90deg, rgba(var(--sage-rgb), 0.18), rgba(var(--sage-rgb), 0.02));
  border-radius: 2px;
  padding: 13px 16px;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-bottom: 20px;
  display: none;
}
.status-banner.visible { display: block; }
.status-banner strong { color: var(--gold-bright); font-weight: 600; }

.invite-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px dashed rgba(var(--gold-rgb), 0.4);
  border-radius: 2px;
  background: rgba(var(--gold-rgb), 0.05);
  padding: 12px 14px;
  margin-bottom: 20px;
}
.invite-strip span {
  font-size: 14.5px;
  font-style: italic;
  color: var(--lilac);
  line-height: 1.3;
}
.invite-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.invite-btn:active { background: rgba(var(--gold-rgb), 0.14); }

/* ---------- Spread list ---------- */

.spread-list { display: flex; flex-direction: column; gap: 12px; }

.spread-card {
  background: linear-gradient(135deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 16px 18px 16px 16px;
  cursor: pointer;
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.spread-card:hover { border-color: var(--rule-strong); box-shadow: 0 14px 34px -18px rgba(var(--gold-rgb), 0.5); }
.spread-card:active { transform: scale(0.99); }

.spread-card h3 {
  margin: 0;
  color: var(--parchment);
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.spread-card p {
  margin: 0;
  padding-left: 0;
  color: var(--lilac);
  font-size: 15.5px;
  line-height: 1.35;
  font-style: italic;
}

/* ---------- Buttons ---------- */

.ghost-btn, .primary-btn, .stars-btn {
  width: 100%;
  padding: 14px;
  border-radius: 2px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  cursor: pointer;
  margin-top: 12px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-wrap: balance;
}
.ghost-btn {
  background: transparent;
  border: 1px solid rgba(var(--lilac-rgb), 0.3);
  color: var(--ink-soft);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ghost-btn:hover { border-color: var(--rule-strong); color: var(--parchment); }
.ghost-btn:active { background: rgba(var(--gold-rgb), 0.1); }
.ghost-btn.small { padding: 11px; font-size: 15px; margin-top: 10px; }

.primary-btn, .stars-btn {
  background: var(--btn-grad);
  border: none;
  color: var(--btn-ink);
  font-weight: 600;
  box-shadow: 0 16px 34px -18px rgba(var(--gold-rgb), 0.9);
}
.primary-btn:active, .stars-btn:active { filter: brightness(0.94); }

/* ---------- Question screen ---------- */

#question-input {
  width: 100%;
  min-height: 150px;
  padding: 18px;
  border-radius: 2px;
  background: var(--input-bg);
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  color: var(--parchment);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.45;
  resize: vertical;
}
#question-input::placeholder { color: var(--lilac); opacity: 0.8; }
#question-input:focus { outline: none; border-color: var(--rule-strong); }

/* ---------- Tarot cards ---------- */

.table {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  perspective: 1200px;
  margin-bottom: 26px;
  position: relative;
  min-height: 170px;
}

.tarot-card {
  width: 96px;
  height: 166px;
  cursor: pointer;
  position: relative;
  perspective: 1200px;
}
.tarot-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.tarot-card.flipped .tarot-card-inner {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.tarot-card-front, .tarot-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tarot-card-front {
  z-index: 2;
  border: 1px solid var(--rule-strong);
  background: var(--card-back-grad);
  color: var(--gold-bright);
  font-size: 17px;
  box-shadow: 0 12px 26px -14px rgba(var(--shadow-rgb), 0.9);
}
.tarot-card-front::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  border-radius: 2px;
}
.tarot-card-front::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  transform: rotate(45deg);
}

.tarot-card-back {
  z-index: 1;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  text-align: center;
  box-shadow: 0 12px 30px -12px rgba(var(--gold-rgb), 0.45);
}
.tarot-card-back .card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tarot-card-back .card-caption {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  width: 100%;
  padding: 16px 5px 5px;
  /* Полная непрозрачность наступает рано (45%), а не только у самого низа — некоторые
     карты Уэйта-Смит несут собственную подпись внизу картинки, и при плавном фейде до
     самого конца она читалась сквозь "Шут"/"ПРОШЛОЕ". */
  background: linear-gradient(180deg, transparent, rgba(8, 7, 10, 0.95) 45%, rgba(6, 5, 8, 0.98) 100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tarot-card-back .card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--parchment);
  line-height: 1.15;
  word-break: break-word;
}
.tarot-card-back .card-position {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  line-height: 1.2;
  word-break: break-word;
}
/* Переворачиваем только изображение: подпись с названием остаётся читаемой */
.tarot-card.reversed .card-img {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* ---------- Interpretations ---------- */

.interpretations { display: flex; flex-direction: column; gap: 12px; }

.interp-item {
  background: linear-gradient(135deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 16px 18px;
  position: relative;
  animation: rise 0.5s ease both;
}
.interp-item .pos {
  color: var(--sage);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.interp-item .name { font-size: 20px; font-weight: 500; margin-bottom: 6px; color: var(--gold-bright); }
.interp-item .text { font-size: 17px; color: var(--ink-soft); line-height: 1.5; }

/* ---------- Summary block ---------- */

.summary-block {
  margin-top: 22px;
  padding: 24px 20px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(var(--gold-rgb), 0.13), var(--panel-b));
  text-align: center;
  animation: rise 0.6s ease both;
}
.summary-block.hidden { display: none; }
.summary-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  color: var(--gold-bright);
  font-size: 16px;
}
.summary-block h3 {
  margin: 0 0 10px;
  font-family: 'Cormorant Garamond', serif;
  color: var(--parchment);
  font-size: 21px;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.summary-block p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- History ---------- */

#history-list { display: flex; flex-direction: column; gap: 2px; }
.history-item {
  padding: 15px 4px;
  border-bottom: 1px solid rgba(var(--lilac-rgb), 0.14);
  font-size: 18px;
  color: var(--parchment);
}
.history-item:first-child { border-top: 1px solid rgba(var(--lilac-rgb), 0.14); }
.history-item .date {
  color: var(--lilac);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.history-empty { color: var(--lilac); font-style: italic; font-size: 16px; }

/* ---------- Overlays (paywall / subscription) ---------- */

.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  z-index: 10;
}
.overlay.hidden { display: none; }
.overlay-card {
  background: var(--overlay-card-bg);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 30px 24px 26px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 30px 70px -20px rgba(var(--shadow-rgb), 0.9);
  animation: rise 0.35s ease both;
}
.overlay-card .overlay-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--gold-bright);
  font-size: 19px;
  position: relative;
}
.overlay-card .overlay-seal::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px dashed rgba(var(--gold-rgb), 0.3);
  animation: sigil-spin 26s linear infinite;
}
.overlay-card h3 {
  margin: 0 0 9px;
  font-family: 'Cormorant Garamond', serif;
  color: var(--parchment);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.15;
}
.overlay-card p { color: var(--lilac); font-size: 17px; line-height: 1.5; margin: 0 0 6px; }

.overlay-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.overlay-buttons button { margin-top: 0; }

/* ---------- Баннер планового перезапуска ---------- */

.restart-banner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 11px 16px;
  text-align: center;
  font-size: 15px;
  line-height: 1.35;
  color: var(--btn-ink);
  background: var(--btn-grad);
  box-shadow: 0 8px 24px -10px rgba(var(--shadow-rgb), 0.8);
  animation: restart-slide-in 0.35s ease both;
}

.restart-banner.visible { display: block; }

.restart-banner strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
}

.restart-banner.critical {
  color: #fff2f0;
  background: linear-gradient(180deg, #d2543a, var(--danger));
}

@keyframes restart-slide-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}


/* ---------- Онбординг и профиль ---------- */

.hidden-el { display: none !important; }

.profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: rgba(var(--gold-rgb), 0.06);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-soft);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.profile-chip .pc-name { color: var(--gold-bright); font-weight: 600; }
.profile-chip .pc-edit { margin-left: auto; color: var(--lilac); font-size: 14px; }

.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.field-label em { font-style: normal; color: var(--lilac); text-transform: none; letter-spacing: 0; margin-left: 6px; }

.field input[type="text"],
.field input[type="date"] {
  width: 100%;
  padding: 14px 16px;
  border-radius: 2px;
  background: var(--input-bg);
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  color: var(--parchment);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
  min-height: 50px;
}
.field input::placeholder { color: var(--lilac); opacity: 0.8; }
.field input:focus { outline: none; border-color: var(--rule-strong); }
.field.invalid input { border-color: var(--vermilion); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 14px;
  border-radius: 2px;
  background: transparent;
  border: 1px solid rgba(var(--lilac-rgb), 0.3);
  color: var(--ink-soft);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.chip.selected {
  border-color: var(--gold-bright);
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--parchment);
}
.chip.custom-chip { border-style: dashed; }
.occupation-custom-input { margin-top: 2px; }

.field-hint { color: var(--gold-bright); font-size: 16px; min-height: 0; }
.field-hint:empty, .field-error:empty { display: none; }
.field-error { color: #e0775f; font-size: 15px; }

.form-note { color: var(--lilac); font-size: 15px; text-align: center; margin: 0; line-height: 1.4; }

/* =========================================================
   Вёрстка по макету Claude Design (v8)
   ========================================================= */

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lilac);
  margin-bottom: 8px;
}
.eyebrow.center { text-align: center; margin: 4px 0 6px; }

.header-text h1 { font-size: 36px; font-weight: 500; }

.section-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lilac);
  margin: 4px 0 12px;
}

/* ---------- Карточка расклада: плитка-символ · текст · метка ---------- */

.spread-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
}
.spread-icon {
  flex-shrink: 0;
  width: 46px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--gold-rgb), 0.16), transparent 70%),
    linear-gradient(180deg, var(--panel-a), var(--panel-b));
  color: var(--gold-bright);
  font-size: 20px;
  line-height: 1;
  box-shadow: inset 0 0 0 3px var(--panel-b), inset 0 0 0 4px rgba(var(--gold-rgb), 0.18);
}
.spread-body { flex: 1; min-width: 0; }
.spread-body h3 { margin: 0 0 4px; }
.spread-body p { margin: 0; }

.spread-tag {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
}
.spread-tag.price { color: var(--gold-bright); letter-spacing: 0.06em; font-size: 11px; }
.spread-tag.done { color: var(--lilac); opacity: 0.8; }
.spread-tag.pro { color: var(--gold-bright); }

/* ---------- Нижние кнопки меню ---------- */

.menu-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}
.menu-actions button { margin-top: 0; }

.pro-btn {
  width: 100%;
  padding: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.10), rgba(var(--gold-rgb), 0.02));
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  cursor: pointer;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-wrap: balance;
  box-shadow: 0 12px 30px -20px rgba(var(--gold-rgb), 0.9);
}
.pro-btn:active { background: rgba(var(--gold-rgb), 0.16); }

.legal-link {
  display: block;
  margin: 22px auto 0;
  background: none;
  border: none;
  color: var(--lilac);
  opacity: 0.75;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.form-note.left { text-align: left; margin: 12px 0 4px; }

/* ---------- Экран соглашения ---------- */

.doc-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.doc-tab {
  padding: 10px 8px;
  background: transparent;
  border: 1px solid rgba(var(--lilac-rgb), 0.3);
  border-radius: 2px;
  color: var(--ink-soft);
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
}
.doc-tab.active {
  border-color: var(--gold-bright);
  background: rgba(var(--gold-rgb), 0.10);
  color: var(--parchment);
}

.doc-box {
  height: 46vh;
  min-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 18px 8px;
  margin-bottom: 18px;
  background: var(--input-bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.doc-loading { color: var(--lilac); font-style: italic; }

.doc-box h1, .legal-doc h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--parchment);
  margin: 0 0 4px;
  line-height: 1.15;
}
.doc-box h2, .legal-doc h2 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 22px 0 8px;
}
.doc-box p, .doc-box li, .legal-doc p, .legal-doc li {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
}
.doc-box p, .legal-doc p { margin: 0 0 10px; }
.doc-box ul, .legal-doc ul { margin: 0 0 10px; padding-left: 20px; }
.doc-box li, .legal-doc li { margin-bottom: 4px; }
.doc-box b, .legal-doc b { color: var(--parchment); font-weight: 600; }
.doc-meta { color: var(--lilac) !important; font-style: italic; }
.doc-missing { color: #e0775f; font-weight: 600; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check-mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-ink);
  font-size: 14px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.check input:checked + .check-mark {
  background: var(--btn-grad);
  border-color: var(--gold-bright);
}
.check input:checked + .check-mark::after { content: "✓"; font-weight: 700; }
.check a { color: var(--gold-bright); }

.primary-btn:disabled {
  filter: grayscale(0.7) brightness(0.6);
  box-shadow: none;
  cursor: default;
}

/* ---------- Подписка PRO ---------- */

.pro-features {
  list-style: none;
  margin: 14px 0 4px;
  padding: 0;
  text-align: left;
}
.pro-features li {
  position: relative;
  padding: 8px 0 8px 26px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.35;
}
.pro-features li:last-child { border-bottom: none; }
.pro-features li::before {
  content: "✦";
  position: absolute;
  left: 4px;
  top: 8px;
  color: var(--gold-bright);
  font-size: 13px;
}


/* ---------- Трактовка нейросетью (v9) ---------- */

.interp-item .text { white-space: pre-line; }
.interp-item .text.placeholder {
  color: transparent;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--lilac-rgb), 0.10) 0%, rgba(var(--gold-rgb), 0.18) 50%, rgba(var(--lilac-rgb), 0.10) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  min-height: 3.2em;
}
.interp-item .text.revealed { animation: rise 0.5s ease both; }
@keyframes shimmer { to { background-position: -200% 0; } }

.ai-wait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 4px;
  color: var(--lilac);
  font-style: italic;
  font-size: 17px;
}
.ai-wait-sigil { color: var(--gold-bright); animation: sigil-spin 3s linear infinite; display: inline-block; }

.reading-block {
  margin-top: 22px;
  padding: 18px 18px 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: linear-gradient(135deg, var(--panel-a), var(--panel-b));
  animation: rise 0.6s ease both;
}
.reading-block p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.reading-block .pro-features { margin: 0; }

.affirmation {
  margin: 26px 0 8px;
  text-align: center;
  animation: rise 0.7s ease both;
}
.affirmation p {
  margin: 0;
  font-size: 21px;
  line-height: 1.4;
  font-style: italic;
  color: var(--gold-bright);
}

/* =========================================================
   Шапка: переключатель темы и языка (макет Claude Design)
   ========================================================= */

.header-tools {
  max-width: 480px;
  margin: 0 auto;
  padding: 14px 20px 0;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  position: relative;
  z-index: 5;
}
.tool-btn {
  height: 26px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(var(--gold-rgb), 0.06);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tool-btn:active { background: rgba(var(--gold-rgb), 0.18); }
.tool-btn .tool-icon { font-size: 11px; }

/* ---------- Шторка выбора темы ---------- */

.theme-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: var(--overlay-scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.theme-sheet-overlay.hidden { display: none; }
.theme-sheet {
  width: 100%;
  max-width: 480px;
  padding: 26px 22px 30px;
  border-top: 1px solid var(--rule-strong);
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, var(--panel-a), var(--void));
  box-shadow: 0 -20px 60px -10px rgba(var(--shadow-rgb), 0.5);
  animation: rise 0.35s ease both;
}
.theme-sheet-grip {
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--rule-strong);
  margin: 0 auto 20px;
}
.theme-sheet h3 { margin: 0; font-size: 25px; font-weight: 500; color: var(--parchment); line-height: 1.1; }
.theme-sheet .sub { margin-top: 6px; font-size: 15px; color: var(--lilac); font-style: italic; }

.theme-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  margin-top: 10px;
  cursor: pointer;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: rgba(var(--gold-rgb), 0.04);
  transition: border-color 0.2s ease;
}
.theme-row:first-of-type { margin-top: 20px; }
.theme-row.active { border-color: var(--rule-strong); }
.theme-row .swatch {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 2px;
  border: 1px solid var(--rule);
}
.theme-row .body { flex: 1; min-width: 0; }
.theme-row .name-line { display: flex; align-items: baseline; gap: 8px; }
.theme-row .name-line .name { font-size: 19px; font-weight: 500; color: var(--parchment); }
.theme-row .name-line .badge {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-bright);
}
.theme-row .desc { margin-top: 2px; font-size: 14.5px; color: var(--lilac); line-height: 1.3; }
.theme-row .mark { flex-shrink: 0; width: 20px; text-align: center; color: var(--gold-bright); font-size: 14px; }
.theme-sheet-close {
  margin-top: 20px; text-align: center; padding: 13px; cursor: pointer;
  border: 1px solid rgba(var(--lilac-rgb), 0.3); border-radius: 2px;
  color: var(--ink-soft); font-size: 16px;
}

/* =========================================================
   Экран тасовки — по видео-референсу (карты покачиваются 3с,
   затем показывается сам расклад). Длительность задаётся и в JS
   (SHUFFLE_SCREEN_MS), и здесь — держите их в паре, если меняете.
   ========================================================= */

#screen-shuffle.active {
  min-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  padding: 40px 20px;
}
.shuffle-stage { position: relative; width: 150px; height: 230px; }
.shuffle-stage .sc {
  position: absolute;
  left: 50%; top: 50%;
  width: 130px; height: 200px;
  margin: -100px 0 0 -65px;
  border-radius: 3px;
  border: 1px solid var(--rule-strong);
  background: var(--card-back-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
  font-size: 28px;
  box-shadow: 0 14px 34px -16px rgba(var(--shadow-rgb), 0.6);
}
.shuffle-stage .sc.sc-a { animation: shuffleA 1.1s ease-in-out infinite; z-index: 1; }
.shuffle-stage .sc.sc-b { animation: shuffleB 1.1s ease-in-out infinite; z-index: 2; }
.shuffle-stage .sc.sc-c { animation: shuffleC 1.1s ease-in-out infinite; z-index: 3; }
@keyframes shuffleA {
  0%, 100% { transform: rotate(-9deg) translateX(-16px); }
  50%      { transform: rotate(11deg) translateX(18px); }
}
@keyframes shuffleB {
  0%, 100% { transform: rotate(7deg) translateX(14px); }
  50%      { transform: rotate(-12deg) translateX(-15px); }
}
@keyframes shuffleC {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(3deg) translateY(-10px); }
}
.shuffle-caption { text-align: center; }
.shuffle-caption .title { font-size: 24px; color: var(--parchment); font-style: italic; }
.shuffle-caption .sub {
  margin-top: 10px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--lilac);
}

/* =========================================================
   История — карточки со значком масти/расклада (по скриншоту)
   ========================================================= */

#history-list { display: flex; flex-direction: column; gap: 2px; }
.history-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 4px;
  border-bottom: 1px solid rgba(var(--lilac-rgb), 0.14);
  cursor: default;
}
.history-row:first-child { border-top: 1px solid rgba(var(--lilac-rgb), 0.14); }
.history-row .h-icon {
  flex: none;
  width: 30px;
  height: 44px;
  border-radius: 2px;
  border: 1px solid var(--rule-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
  font-size: 13px;
  background: var(--panel-b);
}
.history-row .h-body { flex: 1; min-width: 0; }
.history-row .h-name { font-size: 18px; color: var(--parchment); line-height: 1.2; }
.history-row .h-question {
  margin-top: 2px;
  font-size: 15px;
  color: var(--lilac);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-row .h-date {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  opacity: 0.7;
}

/* ---- Промокод в оверлее подписки ---- */
.promo-toggle {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 6px 0;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.2s ease;
}
.promo-toggle span {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: border-color 0.2s ease;
}
.promo-toggle:hover { color: var(--parchment); }
.promo-toggle:hover span { border-bottom-color: var(--rule-strong); }
.promo-toggle.open { color: var(--gold-bright); }
.promo-toggle.open span { border-bottom-color: transparent; }

.promo-box {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: rgba(var(--gold-rgb), 0.04);
}
.promo-box.hidden { display: none; }

.promo-box input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 2px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--parchment);
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  outline: none;
  transition: border-color 0.2s ease;
}
.promo-box input:focus { border-color: var(--rule-strong); }
.promo-box input::placeholder {
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  opacity: 0.6;
}

.promo-apply {
  width: 100%;
  margin-top: 10px;
  padding: 11px;
  border-radius: 2px;
  border: none;
  background: var(--btn-grad);
  color: var(--btn-ink);
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 16px 34px -18px rgba(var(--gold-rgb), 0.9);
}
.promo-apply:active { filter: brightness(0.94); }
.promo-apply:disabled { opacity: 0.5; cursor: default; box-shadow: none; }

.promo-message {
  margin: 10px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}
.promo-message.hidden { display: none; }
.promo-message.ok { color: var(--gold-bright); }
.promo-message.err { color: var(--ink-soft); }

/* строки истории открывают сохранённый расклад */
.history-row.is-clickable { cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.history-row.is-clickable:active { transform: scale(.985); opacity: .75; }