/* alchimik unified visual theme
   Цель: привести страницы сервиса к палитре demo/лендинга.
   Только визуальный слой: фон, цвета, карточки, обводки, кнопки, таблицы, drawer/modal.
*/

:root {
  --alch-bg: #030504;
  --alch-bg-2: #070808;
  --alch-panel: rgba(255,255,255,0.045);
  --alch-panel-2: rgba(255,255,255,0.065);
  --alch-line: rgba(255,255,255,0.085);
  --alch-line-gold: rgba(212,175,55,0.22);
  --alch-text: #f4f1e8;
  --alch-muted: rgba(244,241,232,0.64);
  --alch-muted-2: rgba(244,241,232,0.50);
  --alch-gold: #d4af37;
  --alch-gold-2: #c98520;
  --alch-aqua: #00d1b2;
  --alch-aqua-soft: rgba(0,209,178,0.10);
  --alch-gold-soft: rgba(212,175,55,0.10);
  --alch-danger: #ff8d7f;
}

html,
body {
  background:
    radial-gradient(circle at 16% 0%, rgba(212,175,55,0.105), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(0,209,178,0.075), transparent 30%),
    radial-gradient(circle at 52% 46%, rgba(212,175,55,0.035), transparent 34%),
    var(--alch-bg) !important;
  color: var(--alch-text) !important;
  font-family: Inter, Manrope, Arial, sans-serif !important;
}

body::before,
.page::before,
.app-shell::before,
.landing::before {
  opacity: 0.26 !important;
}

a {
  color: var(--alch-aqua);
}

.brand-title,
.logo-title,
h1,
h2,
h3 {
  color: var(--alch-text) !important;
}

.brand-sub,
.logo-sub,
.lead,
.subtitle,
.panel-text,
.read-text,
.metric-note,
.value-text,
.mini-card p,
p {
  color: var(--alch-muted) !important;
}

.kicker,
.section-label,
.accent,
.metric:first-child .metric-value {
  color: var(--alch-aqua) !important;
}

/* Унифицированные панели и карточки */
.card,
.panel,
.metric,
.mini-card,
.value-card,
.read-item,
.table-panel,
.next-panel,
.value-panel,
.read-panel,
.auth-card,
.login-card,
.account-card,
.billing-card,
.upload-card,
.result-card,
.dashboard-card,
.modal,
.reason-drawer,
.drawer-inner,
.upload-modal,
.form-card,
.subscribe-card,
.payment-card {
  border-color: var(--alch-line) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.024)),
    rgba(7,8,8,0.74) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.045) !important;
  color: var(--alch-text) !important;
}

/* Блоки результата не должны быть болотисто-зелёными */
.health-diagnosis,
.result-summary,
.summary,
.metrics {
  border-color: rgba(212,175,55,0.16) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(212,175,55,0.075), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(0,209,178,0.055), transparent 32%),
    rgba(255,255,255,0.025) !important;
}

.health-diagnosis .read-item,
.metrics .metric {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.048), rgba(255,255,255,0.022)),
    rgba(8,9,9,0.80) !important;
}

.metric,
.stat-card,
.kpi-card {
  position: relative;
  overflow: hidden;
}

.metric::after,
.stat-card::after,
.kpi-card::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 22px;
  height: 28px;
  opacity: 0.20;
  background:
    linear-gradient(135deg, transparent 0 34%, rgba(0,209,178,0.52) 35% 39%, transparent 40% 64%, rgba(212,175,55,0.34) 65% 69%, transparent 70%);
  pointer-events: none;
}

.metric-label,
.read-label,
.label,
.form-label,
.drawer-label,
.summary-label {
  color: rgba(244,241,232,0.58) !important;
}

.metric-value,
.read-value,
.kpi-value,
.summary-value,
.drawer-meta-value {
  color: var(--alch-text) !important;
  text-shadow: none !important;
}

/* Кнопки */
.btn,
button,
.button {
  font-family: Inter, Manrope, Arial, sans-serif !important;
}

.btn-gold,
.btn--primary,
.button-primary,
button[type="submit"],
.primary-btn {
  background: linear-gradient(135deg, #e0b64b, #c98520) !important;
  color: #0b0d0f !important;
  border-color: rgba(212,175,55,0.35) !important;
  box-shadow: 0 18px 42px rgba(201,133,32,0.20) !important;
}

.btn-dark,
.btn--secondary,
.button-secondary,
.secondary-btn {
  border-color: rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.045) !important;
  color: var(--alch-text) !important;
}

.why-btn {
  border-color: rgba(212,175,55,0.28) !important;
  background: rgba(212,175,55,0.08) !important;
  color: var(--alch-gold) !important;
}

.why-btn:hover {
  background: rgba(212,175,55,0.15) !important;
  border-color: rgba(212,175,55,0.42) !important;
}

/* Чипы, бейджи, теги */
.badge,
.chip,
.pill,
.tag {
  border-color: rgba(212,175,55,0.22) !important;
  background: rgba(212,175,55,0.055) !important;
  color: rgba(244,241,232,0.76) !important;
}

.tag.aqua,
.tag.success {
  background: rgba(0,209,178,0.095) !important;
  color: var(--alch-aqua) !important;
  border-color: rgba(0,209,178,0.24) !important;
}

.tag.gold,
.tag.warning {
  background: rgba(212,175,55,0.09) !important;
  color: var(--alch-gold) !important;
  border-color: rgba(212,175,55,0.24) !important;
}

.tag.danger {
  background: rgba(226,85,69,0.10) !important;
  color: var(--alch-danger) !important;
  border-color: rgba(226,85,69,0.24) !important;
}

/* Иконки */
.mini-icon,
.icon,
.mark {
  color: var(--alch-gold) !important;
  background: rgba(212,175,55,0.09) !important;
  border-color: rgba(212,175,55,0.30) !important;
}

/* Таблицы */
table {
  background: rgba(6,7,7,0.62) !important;
  color: var(--alch-text) !important;
}

th {
  color: rgba(244,241,232,0.52) !important;
  background: rgba(255,255,255,0.025) !important;
  border-color: rgba(255,255,255,0.065) !important;
}

td {
  color: rgba(244,241,232,0.76) !important;
  border-color: rgba(255,255,255,0.065) !important;
}

/* Формы */
input,
textarea,
select {
  background: rgba(255,255,255,0.055) !important;
  color: var(--alch-text) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(244,241,232,0.38) !important;
}

/* Drawer / modal */
.drawer-overlay,
.modal-overlay {
  background: rgba(0,0,0,0.70) !important;
  backdrop-filter: blur(10px);
}

.drawer-close,
.modal-close {
  color: var(--alch-text) !important;
  border-color: rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.06) !important;
}

.drawer-confidence {
  color: var(--alch-aqua) !important;
  background: rgba(0,209,178,0.08) !important;
  border-color: rgba(0,209,178,0.22) !important;
}

/* Убираем чрезмерную зелёную заливку у секций, если она задана inline-классами */
.full-result,
.result-page,
.account-page,
.login-page,
.subscribe-page,
.processing-page {
  background: transparent !important;
}

/* Мобильная адаптация */
@media (max-width: 980px) {
  .health-diagnosis .read-item,
  .metric,
  .mini-card,
  .value-card,
  .read-item {
    min-height: auto !important;
  }
}

/* full-black-palette-fix-v1
   Жёстко убираем зелёную заливку full-страницы и приводим её к demo/landing:
   почти чёрный фон, стеклянные панели, золото/бирюза только как акценты.
*/

html,
body {
  background:
    radial-gradient(circle at 17% 0%, rgba(212,175,55,0.085), transparent 26%),
    radial-gradient(circle at 82% 10%, rgba(0,209,178,0.055), transparent 28%),
    #020303 !important;
}

body .page,
body main.page,
body .result-page,
body .full-result,
body .app-shell {
  background:
    radial-gradient(circle at 18% 0%, rgba(212,175,55,0.075), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(0,209,178,0.045), transparent 30%),
    #020303 !important;
}

body .page::before,
body .page::after,
body main.page::before,
body main.page::after {
  opacity: 0.16 !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(212,175,55,0.075), transparent 32%),
    radial-gradient(circle at 80% 10%, rgba(0,209,178,0.045), transparent 30%) !important;
}

/* Секции не должны создавать отдельное зелёное полотно */
body .intro,
body .metrics,
body .value-panel,
body .read-panel,
body .health-diagnosis,
body .table-panel,
body .next-panel {
  background: transparent !important;
}

/* Панели как в demo: чёрное стекло, не зелёная карточка */
body .metric,
body .mini-card,
body .value-card,
body .read-item,
body .table-panel,
body .next-panel,
body .value-panel,
body .read-panel,
body .health-diagnosis {
  border-color: rgba(255,255,255,0.085) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.050), rgba(255,255,255,0.020)),
    rgba(5,6,6,0.84) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.040) !important;
}

/* Диагноз ассортимента: убрать зелёную заливку, оставить тонкий premium glow */
body .health-diagnosis {
  border-color: rgba(212,175,55,0.17) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(212,175,55,0.060), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(0,209,178,0.035), transparent 32%),
    rgba(5,6,6,0.82) !important;
}

body .health-diagnosis .read-item {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.047), rgba(255,255,255,0.018)),
    rgba(5,6,6,0.88) !important;
}

/* Верхние карточки не должны светить зелёным фоном */
body .metric {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.050), rgba(255,255,255,0.018)),
    rgba(5,6,6,0.88) !important;
}

body .metric::after {
  opacity: 0.16 !important;
}

/* Убираем зелёную доминанту текста, оставляем бирюзу только на статусе/акцентах */
body .metric-value {
  color: #f4f1e8 !important;
}

body .metric:first-child .metric-value {
  color: #00d1b2 !important;
}

body .section-label,
body .kicker {
  color: #00d1b2 !important;
}

body .read-text,
body .lead,
body .metric-note,
body .value-text,
body .mini-card p,
body p {
  color: rgba(244,241,232,0.66) !important;
}

/* Чипы и бейджи как на demo/landing */
body .chip,
body .badge,
body .pill {
  background: rgba(212,175,55,0.055) !important;
  border-color: rgba(212,175,55,0.24) !important;
  color: rgba(244,241,232,0.74) !important;
}

/* Таблица тоже в чёрном стекле */
body table {
  background: rgba(4,5,5,0.72) !important;
}

body th {
  background: rgba(255,255,255,0.025) !important;
}

body td {
  border-color: rgba(255,255,255,0.065) !important;
}

/* Для full-страницы после старого inline style: максимально высокий приоритет */
body:has(.health-diagnosis) {
  background:
    radial-gradient(circle at 17% 0%, rgba(212,175,55,0.085), transparent 26%),
    radial-gradient(circle at 82% 10%, rgba(0,209,178,0.055), transparent 28%),
    #020303 !important;
}