/* Стиль Transcriber — журнальный: молочный / графит / синий.
   Палитра и шрифты согласованы с лендингом (Knowledge/transcriber/landing/tokens.css). */
:root {
  --cream-50:#F8F4EC; --cream-100:#F1EBDD; --cream-200:#E6DECC; --cream-300:#D8CFB9;
  --graphite:#1B1D22; --graphite-soft:#2B2E36;
  --brand-500:#2536DE; --brand-600:#1A26AE; --brand-tint:#E6E8FC;
  --text:#1B1D22; --text-muted:#6E6A5E;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-head:"Space Grotesk","Inter",sans-serif;
  --font-mono:"Space Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
  --radius:12px; --radius-lg:20px;
  --shadow:0 4px 12px rgba(16,21,26,.08),0 2px 4px rgba(16,21,26,.06);
  --shadow-lg:0 18px 48px rgba(16,21,26,.14),0 6px 16px rgba(16,21,26,.08);
}
* { box-sizing:border-box; }
body {
  margin:0; min-height:100vh; background:var(--cream-100); color:var(--text);
  font:16px/1.6 var(--font-sans); -webkit-font-smoothing:antialiased;
}
.eyebrow {
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em;
  font-size:13px; color:var(--brand-500);
}
h1,h2,h3 { font-family:var(--font-head); line-height:1.15; letter-spacing:-0.02em; color:var(--graphite); }
.center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.card { max-width:480px; text-align:center; }
.btn {
  display:inline-block; padding:15px 30px; border-radius:var(--radius); font-weight:600;
  font-family:var(--font-sans); color:var(--cream-50); text-decoration:none; background:var(--brand-500);
  transition:background .2s, transform .2s;
}
a.btn, .share-actions a.btn { color:var(--cream-50); }   /* перебить a{color:inherit} — текст молочный на синем */
.btn:hover { background:var(--brand-600); transform:translateY(-1px); }
.muted { color:var(--text-muted); }
.note { margin-top:16px; font-size:13px; color:var(--text-muted); }

/* спиннер — синий акцент на молочном (не фиолетовый ikigai) */
.ring {
  width:104px; height:104px; margin:0 auto 28px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--brand-500), var(--brand-tint), var(--brand-500));
  -webkit-mask:radial-gradient(transparent 55%,#000 57%); mask:radial-gradient(transparent 55%,#000 57%);
  animation:spin 1.3s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* страница результата — карточка на молочном, журнальная типографика */
.result { max-width:720px; margin:0 auto; padding:48px 22px; }
.result-card {
  background:var(--cream-50); border:1px solid var(--cream-200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:clamp(24px,4vw,44px);
}
.result h1 { font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 .4em; }
.result h2 { font-size:1.3rem; margin:1.6em 0 .4em; }
.result h3 { font-size:1.08rem; }
.result blockquote {
  border-left:3px solid var(--brand-500); margin:1.1em 0; padding:8px 18px;
  color:var(--graphite-soft); background:var(--brand-tint); border-radius:0 8px 8px 0;
}
.result hr { border:0; border-top:1px solid var(--cream-200); margin:1.8em 0; }
.result table { border-collapse:collapse; width:100%; font-size:.95rem; }
.result td,.result th { border:1px solid var(--cream-200); padding:8px 11px; text-align:left; }
.result th { background:var(--cream-100); }
.err { color:#b91c1c; }

/* ссылки: по умолчанию наследуют цвет, акцентные — в палитре (не браузерно-синие на молочном) */
a { color:inherit; }
.note a { color:var(--brand-500); text-decoration:underline; text-underline-offset:2px; font-weight:500; transition:color .2s; }
.note a:hover { color:var(--brand-600); }
.result a { color:var(--brand-500); text-decoration:underline; text-underline-offset:2px; }
.result a:hover { color:var(--brand-600); }

/* оффер «что внутри» + блок доверия на лендинге */
.checklist { list-style:none; padding:0; margin:0 0 24px; text-align:left; }
.checklist li { position:relative; padding:5px 0 5px 28px; color:var(--graphite-soft); }
.checklist li::before { content:"✓"; position:absolute; left:4px; color:var(--brand-500); font-weight:700; }
.trust { list-style:none; padding:0; margin:18px 0 0; text-align:left; line-height:1.7; font-size:13px; color:var(--text-muted); }

/* прогресс-бар на loading */
.progress { width:220px; max-width:80%; height:6px; margin:22px auto 0; border-radius:999px; background:var(--cream-200); overflow:hidden; }
.progress-bar { height:100%; width:0; background:var(--brand-500); border-radius:999px; transition:width .6s var(--ease); }

/* share-блок под результатом */
.share { margin-top:32px; padding-top:24px; border-top:1px solid var(--cream-200); text-align:center; }
.share p { color:var(--text-muted); margin:0 0 16px; }
.share-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.btn-ghost { font:inherit; font-weight:600; padding:13px 22px; border-radius:var(--radius); cursor:pointer;
  color:var(--brand-500); background:transparent; border:1px solid var(--brand-500); transition:background .2s,color .2s; }
.btn-ghost:hover { background:var(--brand-500); color:#fff; }

/* мобильный фолбэк для широких таблиц разбора */
.result table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
@media (max-width:480px) { .result td, .result th { padding:6px 8px; font-size:.88rem; } }