/* Палитра локального Figma-референса Sharavoz.ru-new (узел 22:2).
   Меняется только цветовая система: структура и бренд AnyPlayer остаются своими. */
:root {
  --paper: #f5f5f5;
  --paper-2: #e6e6e8;
  --ink: #211449;
  --muted: #595775;
  --line: #d9d9dc;
  --orange: #ff9000;
  --orange-strong: #ff9000;
  --mint: #dae8fd;
  --cream: #f3f5ff;
  --peach: #e6e6e8;
  --card: #fff;
  --purple: #606fc9;
  --purple-deep: #3c4d9f;
  --purple-light: #9fb0ff;
  --shadow: 0 18px 50px rgba(33, 20, 73, .12);
}

button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline-color: var(--orange); }
.site-header { background: rgba(245, 245, 245, .96); border-color: #d9d9dc; }
.header-nav a, .text-button { color: var(--ink); }
.header-nav a:hover, .quiet-note a:hover { color: var(--purple-deep); }
.button-dark { background: var(--purple); color: #fff; }
.button-dark:hover { background: var(--purple-deep); box-shadow: 0 9px 22px rgba(60, 77, 159, .27); }
.button-orange { background: var(--orange); color: var(--ink); }
.button-orange:hover { background: #ffa329; box-shadow: 0 9px 22px rgba(255, 144, 0, .27); }
.button-outline { border-color: var(--purple); color: var(--purple-deep); }
.button-outline:hover { background: #f3f5ff; border-color: var(--purple-deep); }
.eyebrow, .section-kicker { color: var(--purple-deep); }
.eyebrow-line, .label-dot { background: var(--orange); }
.install-hero h1 em { color: var(--purple); }
.hero-lead, .install-lead, .section-heading > p, .choose-heading p { color: #555476; }
.quiet-note, .method-hint { color: #62617b; }

/* Большой фиолетовый hero возвращает выразительность исходного макета. */
.hero { background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%); border-radius: 30px; padding-inline: clamp(30px, 4vw, 64px); margin-top: 24px; overflow: hidden; }
.hero h1, .hero-lead, .hero .eyebrow, .hero .quiet-note, .hero .visual-label { color: #fff; }
.hero h1 em { color: #fff; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 5px; text-underline-offset: 9px; }
.hero .quiet-note a { color: #fff; text-decoration-color: var(--orange); }
.hero .button-outline { color: #fff; border-color: #fff; }
.hero .button-outline:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }

/* Главная: насыщенный экран плеера и светлые нейтральные панели. */
.orbit-one { background: #dae8fd; }
.orbit-two { background: #e6e6e8; }
.visual-label { color: var(--purple-deep); }
.tv-shell { background: var(--purple-deep); border-color: var(--ink); color: #fff; box-shadow: 0 24px 50px rgba(33, 20, 73, .22); }
.tv-top { border-color: rgba(255, 255, 255, .25); }
.tv-channels { border-color: rgba(255, 255, 255, .25); }
.tv-mark, .tv-top-note, .tv-small, .tv-row, .tv-row b, .tv-row small, .tv-feature > span { color: #f3f5ff; }
.tv-row.active { background: var(--orange); color: var(--ink); }
.tv-row.active b, .tv-row.active small { color: var(--ink); }
.tv-live { color: #fff; }
.tv-art { background: linear-gradient(145deg, var(--purple-light), var(--purple-deep)); }
.hill-back { background: #606fc9; }
.hill-front { background: #3c4d9f; }
.phone-card { background: #fff; color: var(--ink); border-color: var(--purple-deep); box-shadow: 0 22px 48px rgba(33, 20, 73, .18); }
.phone-camera { background: var(--purple-deep); }
.phone-step { color: var(--purple-deep); }
.phone-action { background: var(--orange); color: var(--ink); }
.trust-strip { background: var(--paper-2); border-color: var(--line); }
.trust-inner, .trust-right { color: var(--purple-deep); }
.trust-inner i { background: var(--purple-light); }
.trust-right span { color: var(--orange); }
.step-card-peach { background: #e6e6e8; }
.step-card-blue { background: #dae8fd; }
.step-card-yellow { background: #f3f5ff; }
.step-icon { background: rgba(255, 255, 255, .65); border-color: rgba(60, 77, 159, .27); color: var(--purple-deep); }
.step-number { color: var(--purple-deep); }
.step-card p, .benefits-intro > p:not(.section-kicker), .benefit-row p, .questions-copy > p:last-child { color: #555476; }
.step-action, .inline-link, .auth-demo-link { color: var(--purple-deep); border-color: var(--purple-deep); }
.inline-link:hover, .auth-demo-link:hover { color: var(--purple); border-color: var(--purple); }
.benefits-section { background: var(--paper-2); border-color: var(--line); }
.benefit-list, .benefit-row, .faq details { border-color: #c6c6d0; }
.benefit-row > span:first-child, .benefit-arrow, .faq summary span { color: var(--purple); }
.closing-band { background: var(--purple); color: #fff; }
.closing-band p { color: #fff; }
.site-footer { background: var(--paper-2); border-color: var(--line); }
.footer-inner p, .footer-inner > span { color: #555476; }

/* Установка APK / Downloader — та же палитра, без отдельной зелёной темы. */
.install-hero-notes span { background: #fff; border-color: var(--line); color: var(--purple-deep); }
.art-halo { background: #dae8fd; }
.art-tv { background: var(--ink); border-color: var(--ink); box-shadow: 0 23px 48px rgba(33, 20, 73, .2); }
.art-tv-inner { background: linear-gradient(140deg, var(--purple), var(--purple-deep)); color: #fff; }
.art-video { background: var(--purple-deep); box-shadow: -60px -45px 0 3px var(--purple-light), 30px -85px 0 -20px var(--orange); }
.art-remote, .scene-remote { border-color: var(--purple-deep); background: #fff; color: var(--ink); }
.art-remote i, .scene-remote b { background: var(--orange); }
.art-spark, .art-spark-two { color: var(--orange); }
.method-tab, .step-rail, .instruction-card, .address-card, .troubles-grid details { background: #fff; border-color: var(--line); }
.method-tab[aria-selected="true"] { background: #f3f5ff; border-color: var(--purple); box-shadow: 0 13px 30px rgba(96, 111, 201, .16); }
.method-emoji, .method-tab[data-method="downloader"] .method-emoji { background: #dae8fd; color: var(--purple-deep); }
.method-tab-arrow, .guide-total, .rail-number, .rail-step-visited .rail-number { color: var(--purple-deep); }
.guide-total, .rail-step-current, .rail-step-current:hover { background: #dae8fd; color: var(--ink); }
.rail-step:hover { background: #f3f5ff; }
.scene { background: #dae8fd; }
.scene-browser, .scene-store, .scene-downloader { background: #e6e6e8; }
.scene-files, .scene-settings, .scene-progress { background: #dae8fd; }
.scene-installer, .scene-app { background: #f3f5ff; }
.scene-orbit, .scene-browser .scene-orbit, .scene-store .scene-orbit, .scene-downloader .scene-orbit, .scene-installer .scene-orbit { background: #cbd5fb; }
.scene-star { color: var(--orange); }
.scene-tv, .scene-stand { background: var(--ink); border-color: var(--ink); box-shadow: 0 20px 37px rgba(33, 20, 73, .2); }
.scene-screen { background: #f3f5ff; color: var(--ink); }
.scene-topbar { background: var(--purple); color: #fff; }
.scene-row { background: #e6e6e8; }
.scene-row-focus { background: var(--orange); color: var(--ink); outline-color: #fff; box-shadow: 0 0 0 5px var(--purple); }
.scene-app .scene-screen { background: var(--purple-deep); color: #fff; }
.scene-app .scene-row { background: var(--purple); color: #fff; }
.scene-app .scene-row-focus { background: var(--orange); color: var(--ink); }
.scene figcaption { background: #fff; color: var(--purple-deep); }
.instruction-counter, .step-url span { color: var(--purple-deep); }
.instruction-lead, .instruction-help p, .guide-bottom-note, .address-layout p, .address-card small, .troubles-head p, .troubles-grid details p { color: #555476; }
.instruction-help, .guide-bottom-note { background: #f3f5ff; }
.step-url { background: #f3f5ff; border-color: #c6cef0; }
.step-url code, .address-card code { color: var(--ink); }
.address-section { background: var(--paper-2); }
.address-card button { background: var(--purple); color: #fff; }
.address-card button:hover { background: var(--purple-deep); }
.install-finish { background: var(--purple); color: #fff; }
.finish-layout .section-kicker, .finish-layout p { color: #fff; }
.install-mobile-menu summary, .install-mobile-menu nav { background: #fff; color: var(--ink); border-color: var(--line); }

@media (max-width: 900px) { .hero { padding-inline: 36px; margin-top: 20px; } }
@media (max-width: 650px) { .hero { padding-inline: 22px; border-radius: 22px; margin-top: 16px; } .hero h1 em { text-decoration-thickness: 3px; text-underline-offset: 5px; } }