/* Shared site chrome — header, footer, and the small pieces both use.
 *
 * Every rule here is namespaced `tv-` and every one of them is scoped under a
 * chrome class, so this file can be dropped onto a page with its own CSS
 * without the two fighting. That matters: the pages in web/ each carry a large
 * hand-written stylesheet, several of which set bare `a`, `ul` and `li` rules.
 * Scoped selectors here out-specify those without needing !important.
 *
 * THE CHROME IS ALWAYS DARK, in both colour schemes, and so is the app's.
 *
 * This has been decided in both directions and the middle answer was the wrong
 * one. Pinned navy here while the app's header followed the theme gave a dark
 * bar on a light static page beside a light bar on a light app page: two
 * websites. Making both follow the theme fixed the disagreement and lost the
 * frame — on a pale page the chrome stopped being chrome and became more pale
 * page with a hairline in it.
 *
 * So both halves are pinned, together: `chromeTheme` in marketing_kit.dart
 * swaps the palette for the app's header and footer, and the tokens below do
 * the same for these pages. The PAGE between the bands still follows the
 * reader's choice, and the toggle that makes that choice lives in the band.
 *
 * The markup is generated: see tool/web_chrome_lib.dart. Editing the HTML in a
 * page by hand will be overwritten and will fail test/web_site_test.dart.
 */

/* ------------------------------------------------------------- typeface --
 *
 * The brand faces, served to the STATIC pages from the same files the Flutter
 * app already ships.
 *
 * Why this exists: /about and /support are hand-written HTML while / and the
 * audience pages are the Flutter app, and the two halves were set in
 * different typefaces. The app renders Inter and Space Grotesk; these pages
 * fell through to `-apple-system`, so they came out in San Francisco on a Mac
 * and Segoe on Windows. Everything else had been carefully matched — the type
 * scale, the palette, the footer, the header — and it did not matter, because
 * a different typeface is the one difference a reader notices instantly. It
 * read as a different website, and was reported as one.
 *
 * The files are the app's own bundled assets, already deployed and already
 * `self` for CSP purposes, so this costs no new origin and no new licence:
 * Inter and Space Grotesk are both OFL (see the OFL_*.txt beside them).
 *
 * Space Grotesk is the display face and Inter is the reading face, which is
 * the same split ToorovaType makes: geometric and slightly technical for
 * things you look AT, humanist and quiet for things you look THROUGH.
 */

/* Fraunces italic — the app's own editorial accent face (see
   lib/core/theme/display_type.dart), shipped in the bundle for months and
   never declared here, so the marketing site could not use it. One real
   italic beats a browser-slanted one: Space Grotesk has no italic, and a
   synthesised slant on a geometric sans looks like a mistake. */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/assets/google_fonts/Fraunces-Italic.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/assets/google_fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/assets/google_fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/assets/google_fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/assets/google_fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/assets/google_fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/assets/google_fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/assets/google_fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/assets/google_fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --tv-font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;
  --tv-font-display: 'Space Grotesk', 'Inter', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* The chrome palette, straight off ToorovaColors — the same source pages.css
   takes its own tokens from. Light is the default block; dark is restated
   twice, once for the OS preference and once for an explicit choice, so the
   toggle can win in both directions.

   `--tv-ground` is the band's own background. It is the page ground rather
   than a card, which is what the app's marketing header does: the bar is a
   band you read past, not a surface sitting on the page. */
/* ToorovaColors.dark, and only ToorovaColors.dark — the same values the app's
   header and footer get from `chromeTheme`. No light variant on purpose: see
   the note at the top of this file. */
:root {
  --tv-ground: #0B1120;
  --tv-ink: #F1F5FF;
  --tv-dim: #B7C0D6;
  --tv-faint: #A5B1CC;
  --tv-line: #45578A;
  --tv-accent: #7FB0FF;
  --tv-chip: #1D2848;
}

.tv-header,
.tv-footer {
  font-family: var(--tv-font-text);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- brand -- */

.tv-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--tv-ink);
  flex: 0 0 auto;
}
.tv-brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(8, 14, 30, 0.22);
}
/* THE HEADER USES THE REAL LOCKUP, the same PNG the app draws. It used to be
   the rounded-square app icon beside `TOOROVA` set in Inter at 0.28em
   tracking, which is a different logo from the one on every other screen of
   the product — and a different logo is the difference a reader notices before
   anything else. Always the dark-ground variant, because the band is always
   dark. The footer keeps the icon-plus-wordmark block, because that is what
   the app's footer draws there too. */
.tv-brand img.tv-brand__logo {
  height: 30px;
  width: auto;
  border-radius: 0;
  box-shadow: none;
  display: block;
}
.tv-brand__wm {
  font-family: var(--tv-font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------- header -- */

.tv-header {
  background: var(--tv-ground);
  border-bottom: 1px solid color-mix(in srgb, var(--tv-line) 55%, transparent);
}
/* Same box as MarketingHeader: capped at MarketingBreakpoints.headerMax with
   the desktop gutter, and 72px tall. The two bars used to be 1080/22/auto and
   1520/40/72 — one site, two headers, and the seam showed the moment you
   clicked from a Flutter page to a static one. */
.tv-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* The nav sits BESIDE the wordmark, not pinned to the buttons — same rule as
   MarketingHeader, and for the same reason: against the controls it reads as
   two more controls in a row of controls. `margin-right: auto` is what pushes
   the account pills to the far edge instead. */
.tv-header .tv-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  /* 18px off the wordmark, which is what MarketingHeader puts there. Without
     it the first link sits against the logo and reads as part of it — the
     lockup ends in a word, so "Toorova Courses" runs together. */
  margin-left: 18px;
  margin-right: auto;
}
/* MarketingType._desktop.nav is 16 — but the app also multiplies its type by
   PlatformPolicy.typeBoost, which on a desktop browser tops out at 1.12
   (Breakpoints.textScaleFor: flat below 700, lerping to the ceiling by 1100).
   So the app's header links actually render at ~17.9px and these were flat 16,
   which is exactly the "how small it looks" difference between the two halves.
   The boost is mirrored below rather than folded in here, so the phone end of
   the scale stays where the app puts it. */
.tv-header .tv-nav a {
  color: var(--tv-dim);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  padding: 7px 11px;
}
@media (max-width: 1150px) {
  /* MarketingType steps nav down to 15 below the desktop tier. */
  .tv-header .tv-nav a { font-size: 15px; }
}

/* The big-screen boost, at the width the app's own curve reaches its ceiling.
   1.12 x the sizes above, and nothing else on the bar moves: the lockup is a
   fixed 30px in both halves and the bar is a fixed 72. */
@media (min-width: 1100px) {
  .tv-header .tv-nav a { font-size: 17.9px; }
  .tv-header .tv-ghost { font-size: 16.8px; }
  .tv-header .tv-login { font-size: 16.8px; }
  .tv-header .tv-cta { font-size: 17.9px; }
  /* The footer is the app's footer and takes the same boost. It was flat
     14.5px against a boosted 16.8, which is why the bottom of a static page
     read as a smaller website than the bottom of an app page. */
  .tv-footer a { font-size: 16.8px; }
  .tv-footer__about p { font-size: 17.9px; }
  .tv-footer h3 { font-size: 14.5px; }
  .tv-footer__legal,
  .tv-footer__legal a,
  .tv-footer__linkbtn { font-size: 14.5px; }
}
.tv-header .tv-nav a:hover {
  color: var(--tv-ink);
  background: color-mix(in srgb, var(--tv-line) 32%, transparent);
}
.tv-header .tv-nav a[aria-current='page'] {
  color: var(--tv-accent);
  background: color-mix(in srgb, var(--tv-accent) 12%, transparent);
}

/* Professionals is NOT emphasized, and that is a decision rather than an
   omission — the same one `marketing_routes.dart` already reached on the
   Flutter half of the site, recorded in a comment there.

   The accent pill was meant to say "a different kind of destination: a licence
   conversation, not another audience page". What it actually said was "this is
   the page you are on", because a tinted pill in a nav row means exactly that
   everywhere else, including one rule up in this file where `aria-current` is
   an accent label on a 12% accent wash. Two states a shade apart are one
   state. On the landing page, where nothing is current, Professionals was the
   only lit item in the bar and read as the current page.

   A nav item that lies about where you are is worse than one that reads as
   ordinary. It is told apart by its label, which was always the honest signal,
   and the bar keeps exactly one solid call to action: `.tv-cta`. */

/* ---- the controls, in the app's order: language, theme, log in, start ---- */

.tv-header__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.tv-header .tv-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tv-dim);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}
.tv-header .tv-ghost:hover {
  color: var(--tv-ink);
  background: color-mix(in srgb, var(--tv-line) 32%, transparent);
}
.tv-header .tv-ghost svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* One button, two glyphs: whichever one the current theme is NOT. */
.tv-theme__sun { display: none; }
:root[data-theme='dark'] .tv-theme__sun { display: block; }
:root[data-theme='dark'] .tv-theme__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .tv-theme__sun { display: block; }
  :root:not([data-theme='light']) .tv-theme__moon { display: none; }
}
:root[data-theme='light'] .tv-theme__sun { display: none; }
:root[data-theme='light'] .tv-theme__moon { display: block; }

.tv-header .tv-login {
  flex: 0 0 auto;
  color: var(--tv-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--tv-line);
  background: var(--tv-chip);
  line-height: 1;
}
.tv-header .tv-login:hover {
  border-color: var(--tv-accent);
  color: var(--tv-accent);
}
.tv-header .tv-cta {
  flex: 0 0 auto;
  color: #fff;
  text-decoration: none;
  /* MarketingType._desktop.cta is 18; 16 here because the HTML pill has more
     padding around it than the Flutter one and the two measure the same. */
  font-size: 16px;
  font-weight: 700;
  padding: 10px 20px;
  /* A pill, like every primary action in the app. It was a 10px rounded
     rectangle here and a 999px pill three pages later. */
  border-radius: 999px;
  background: linear-gradient(180deg, #2563EB, #1D4ED8);
  box-shadow: 0 12px 26px -14px rgba(37, 99, 235, 0.7);
  line-height: 1;
}
.tv-header .tv-cta:hover {
  filter: brightness(1.08);
}

/* On a narrow screen the links stay on ONE line and scroll sideways, rather
   than wrapping into a ragged block under the logo.
   
   Six links wrapping at 390px produced two uneven rows of text with no
   alignment to anything — the "awkward buttons at the top". A single scrolling
   row reads as a deliberate control: it is the pattern every app store, news
   site and streaming service uses for a long list of sections, so nobody has
   to learn it. Still no hamburger: a menu nobody opens is navigation nobody
   has. */
@media (max-width: 900px) {
  .tv-header__inner {
    padding: 10px 16px 0;
    min-height: 0;
  }
  /* Brand first, controls hard right, nav on its own line underneath — the
     same three-part collapse the app's header makes, just with the row break
     that HTML gives for free. */
  .tv-header__controls {
    margin-left: auto;
  }
  .tv-header .tv-nav {
    order: 3;
    width: 100%;
    /* On its own line under the brand there is nothing to sit against. */
    margin: 8px 0 0;
    padding: 0 0 8px;
    gap: 2px;
    font-size: 14px;
    /* One line, scrolled — never wrapped. Six links wrapping at 390px produced
       two uneven rows of text with no alignment to anything. A single
       scrolling row reads as a deliberate control: it is the pattern every app
       store, news site and streaming service uses for a long list of sections,
       so nobody has to learn it. Still no hamburger: a menu nobody opens is
       navigation nobody has. */
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* The fade is the affordance: it says there is more without spending a
       row on a chevron. */
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .tv-header .tv-nav::-webkit-scrollbar {
    display: none;
  }
  .tv-header .tv-nav a {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* Below this the language label and the outline "Log in" both go: a 390px bar
   cannot hold brand + language + theme + two pills, and the app's header drops
   exactly the same two, in the same order, for the same reason. Log in is one
   tap inside the screen "Start learning" opens. */
@media (max-width: 560px) {
  .tv-header .tv-ghost {
    padding: 8px;
  }
  .tv-header .tv-ghost[hreflang] {
    font-size: 0;
    gap: 0;
  }
  .tv-header .tv-login {
    display: none;
  }
  .tv-header .tv-cta {
    padding: 9px 16px;
  }
  .tv-brand img.tv-brand__logo {
    height: 26px;
  }
}

/* --------------------------------------------------------------- footer -- */

.tv-footer {
  background: var(--tv-ground);
  border-top: 1px solid color-mix(in srgb, var(--tv-line) 55%, transparent);
  color: var(--tv-dim);
  margin-top: 64px;
}
/* Same column as the header, so the two wordmarks line up on one vertical. */
.tv-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 40px 32px;
}
.tv-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 34px 28px;
}
.tv-footer__about p {
  margin: 14px 0 0;
  color: var(--tv-dim);
  font-size: 16px;
  line-height: 1.6;
  max-width: 30ch;
}
.tv-footer h3 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tv-faint);
}
.tv-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tv-footer li {
  margin: 0 0 10px;
}
.tv-footer a {
  color: var(--tv-dim);
  text-decoration: none;
  font-size: 15px;
}
.tv-footer a:hover {
  color: var(--tv-accent);
  text-decoration: underline;
}

.tv-footer__legal {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 40px 40px;
  border-top: 1px solid color-mix(in srgb, var(--tv-line) 55%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 13px;
  color: var(--tv-faint);
}
.tv-footer__legal a {
  font-size: 13px;
  color: var(--tv-faint);
  font-weight: 600;
}

/* "Cookies & analytics" re-opens the consent chooser rather than navigating,
   so it is a real <button> — but it has to read as one of the legal links
   beside it, not as a form control. */
.tv-footer__linkbtn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--tv-faint);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.tv-footer__linkbtn:hover {
  color: var(--tv-accent);
  text-decoration: underline;
}
.tv-footer a:focus-visible,
.tv-footer__linkbtn:focus-visible,
.tv-header a:focus-visible {
  outline: 2px solid var(--tv-accent);
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .tv-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .tv-footer__about {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px) {
  .tv-footer__inner {
    padding: 36px 16px 24px;
  }
  /* TWO COLUMNS, NOT ONE. Collapsing to a single column turned the footer
     into sixteen stacked links plus a brand block — a wall of text that reads
     as an afterthought and pushes the legal row far below the fold. The link
     labels are short enough to hold half a 320px screen, and the section
     headings give the eye something to anchor on, which is the thing a single
     list loses. */
  .tv-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 20px;
  }
  .tv-footer__about {
    grid-column: 1 / -1;
  }
  .tv-footer li {
    line-height: 1.35;
  }
  .tv-footer__legal {
    padding: 18px 16px 32px;
    /* The legal row is a wrapped flex list; at phone width its 8px row gap
       made two lines read as one block. */
    gap: 10px 16px;
  }
}

/* The app's footer draws its lockup at 26 where the header draws 30. */
.tv-footer .tv-brand img.tv-brand__logo {
  height: 26px;
}

/* ---------------------------------------------------------------------------
   ASK TOOKI — the robot in the corner.

   Anchored, not floating. The one rule that matters on a phone: this is
   positioned with `bottom` plus the safe-area inset and never with `vh`.
   A `vh` unit does not change when a mobile browser's address bar slides
   away but the visual viewport does, so anything anchored that way drifts
   up and down as you scroll. The idle float below is also fine-pointer
   only, so on a touch screen the robot holds perfectly still.
--------------------------------------------------------------------------- */
.tv-ask{
  position:fixed;
  right:calc(14px + env(safe-area-inset-right,0px));
  bottom:calc(14px + env(safe-area-inset-bottom,0px) + var(--tv-ask-lift,0px));
  /* Under the consent notice, which owns the very top of the stack, and
     above everything else on the page. */
  z-index:2147482000;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:bottom .18s ease}
.tv-ask__bot{
  appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;
  width:76px;height:82px;cursor:grab;touch-action:none;
  filter:drop-shadow(0 10px 18px rgba(10,16,40,.34));
  transition:transform .16s ease}
.tv-ask.is-ready .tv-ask__bot:hover{transform:translateY(-2px) scale(1.04)}
.tv-ask.is-held .tv-ask__bot{cursor:grabbing;transform:scale(.97)}
.tv-ask__bot svg{width:100%;height:100%;display:block;overflow:visible}
.tv-ask__bot:focus-visible{outline:none}
.tv-ask__bot:focus-visible svg{
  outline:3px solid #FFC24D;outline-offset:4px;border-radius:50%}
.tv-ask__shadow{fill:#0B1226;opacity:.18}
.tv-ask__name{
  font:600 12.5px/1 var(--tv-font,ui-sans-serif,system-ui,-apple-system,sans-serif);
  letter-spacing:.01em;color:#20160A;background:#FFC24D;
  padding:5px 10px;border-radius:999px;white-space:nowrap;
  box-shadow:0 4px 12px rgba(10,16,40,.26);pointer-events:none}

/* The float is a flourish for a mouse, and nothing at all for a thumb or for
   anybody who has asked for less motion. */
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  .tv-ask.is-ready:not(.is-held):not(.is-dragging) .tv-ask__body{
    animation:tv-ask-float 3.6s ease-in-out infinite}
  @keyframes tv-ask-float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-3px)}}
}

.tv-ask-panel{
  position:absolute;right:0;bottom:calc(100% + 10px);width:min(320px,calc(100vw - 28px));
  background:var(--tv-card,#0F172A);color:var(--tv-ink,#F2F5FF);
  border:1px solid rgba(159,194,255,.22);border-radius:18px;padding:16px;
  box-shadow:0 24px 60px -20px rgba(6,10,24,.7);text-align:left}
.tv-ask-panel.is-below{bottom:auto;top:calc(100% + 10px)}
.tv-ask-panel[hidden]{display:none}
.tv-ask-panel__head{display:flex;align-items:flex-start;gap:10px}
.tv-ask-panel__title{
  margin:0;flex:1;font:700 16px/1.35 var(--tv-font,ui-sans-serif,system-ui,sans-serif)}
.tv-ask-panel__close{
  appearance:none;background:none;border:0;color:inherit;opacity:.7;
  font-size:22px;line-height:1;cursor:pointer;padding:0 2px}
.tv-ask-panel__close:hover{opacity:1}
.tv-ask-panel__blurb{margin:6px 0 12px;font-size:13.5px;line-height:1.5;opacity:.78}
.tv-ask-panel__label{
  display:block;margin:0 0 4px;font-size:12.5px;font-weight:600;opacity:.8}
.tv-ask-panel__input{
  width:100%;box-sizing:border-box;margin:0 0 10px;padding:9px 11px;
  font:inherit;font-size:14px;color:inherit;background:rgba(255,255,255,.06);
  border:1px solid rgba(159,194,255,.26);border-radius:11px;resize:vertical}
.tv-ask-panel__input:focus{outline:2px solid #FFC24D;outline-offset:1px}
.tv-ask-panel__trap{position:absolute;left:-9999px;width:1px;height:1px}
.tv-ask-panel__send{
  appearance:none;width:100%;padding:10px 14px;border:0;border-radius:999px;
  font:600 14.5px/1 var(--tv-font,ui-sans-serif,system-ui,sans-serif);
  color:#20160A;background:linear-gradient(180deg,#FFC857,#F59E0B);cursor:pointer}
.tv-ask-panel__send[disabled]{opacity:.6;cursor:default}
.tv-ask-panel__status{margin:9px 0 0;font-size:13px;line-height:1.45;display:none}
.tv-ask-panel__status.is-ok{display:block;color:#7BE0A8}
.tv-ask-panel__status.is-err{display:block;color:#FFAFA0}

@media (max-width:420px){
  .tv-ask__bot{width:62px;height:68px}
  .tv-ask__name{font-size:11.5px;padding:4px 9px}
}