@charset "utf-8";
/* =========================================================================
   grammatika.org — layer on top of the AdminLTE "skin-blue" bundle.
   Same flavour as before (blue header, white cards), but with readable
   Cyrillic typography, tables that survive a phone, real focus states
   and a dark theme.
   ========================================================================= */

:root {
  --gm-blue:        #367fa9;
  --gm-blue-light:  #3c8dbc;
  --gm-blue-dark:   #2a6485;
  --gm-accent:      #00a65a;
  --gm-accent-dark: #008d4c;
  --gm-warn:        #f39c12;
  --gm-danger:      #dd4b39;

  --gm-ink:         #22303c;
  --gm-ink-soft:    #5b6b7a;
  --gm-ink-faint:   #8a99a8;
  --gm-bg:          #eef2f5;
  --gm-surface:     #ffffff;
  --gm-surface-2:   #f7f9fb;
  --gm-line:        #dfe6ec;
  --gm-line-soft:   #edf1f5;

  --gm-radius:      10px;
  --gm-radius-sm:   6px;
  --gm-shadow:      0 1px 2px rgba(29,45,61,.06), 0 4px 14px rgba(29,45,61,.05);
  --gm-shadow-lift: 0 4px 10px rgba(29,45,61,.10), 0 12px 28px rgba(29,45,61,.10);

  --gm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PT Sans", Roboto,
             "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --gm-font-read: "PT Serif", Georgia, "Times New Roman", serif;
  --gm-measure: 74ch;
}

/* ---------------------------------------------------------------- base -- */
html { -webkit-text-size-adjust: 100%; }

body,
body.skin-blue {
  font-family: var(--gm-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--gm-ink);
  background: var(--gm-bg);
  text-rendering: optimizeLegibility;
}

.wrapper { background: #1f2d3a; }          /* matches the sidebar column */
.content-wrapper {
  background: var(--gm-bg);
  min-height: calc(100vh - 56px);          /* JS refines this; CSS covers the rest */
}

p { margin: 0 0 1em; padding: 0; }
.content-wrapper p { padding: 0; }

a { color: var(--gm-blue); text-decoration: none; }
a:hover, a:focus { color: var(--gm-blue-dark); text-decoration: underline; }

strong, b { font-weight: 600; }

h1, h2, h3, h4, h5 {
  font-family: var(--gm-font);
  color: var(--gm-ink);
  font-weight: 600;
  line-height: 1.25;
  margin: 1.6em 0 .6em;
}
h1 { font-size: 1.85rem; margin-top: 0; letter-spacing: -.01em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
h1 small, h2 small { color: var(--gm-ink-faint); font-size: .62em; font-weight: 400; }

/* accessibility ---------------------------------------------------------- */
.gm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 3000;
  background: var(--gm-blue-dark); color: #fff; padding: .7em 1.2em;
  border-radius: 0 0 var(--gm-radius-sm) 0; font-weight: 600;
}
.gm-skip:focus { left: 0; color: #fff; text-decoration: none; }

:focus-visible { outline: 3px solid var(--gm-warn); outline-offset: 2px; border-radius: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- header --- */
.main-header .logo,
.main-header .navbar { background: var(--gm-blue); }
.main-header .logo:hover { background: var(--gm-blue-dark); }
.main-header .logo img { max-height: 30px; width: auto; }
.main-header .navbar .nav > li > a { color: #e8f2f8; font-weight: 500; }
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus { background: var(--gm-blue-dark); color: #fff; }
.sidebar-toggle { color: #e8f2f8 !important; }

/* ------------------------------------------------------------ sidebar --- */
.main-sidebar, .left-side { background: #1f2d3a; }
.sidebar { margin-top: 0; padding-top: 0 !important; padding-bottom: 2rem; }

.user-panel { padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.user-panel > .info p { color: #fff; font-weight: 600; margin-bottom: 2px; }
.user-panel > .info > a { color: #b9c6d2; font-size: .82rem; }
.user-panel > .image > img { width: 44px; height: 44px; object-fit: cover; }

.sidebar-menu > li.header {
  color: #7f96ab; background: transparent; text-transform: uppercase;
  font-size: .7rem; letter-spacing: .09em; font-weight: 700; padding: 16px 14px 6px;
}
.sidebar-menu > li > a {
  padding: 9px 14px; border-left: 3px solid transparent; color: #c3cfda;
  font-size: .93rem; display: flex; align-items: center; gap: .55em; line-height: 1.35;
}
.sidebar-menu > li > a > i { width: 18px; text-align: center; flex: none; }
.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li > a:focus {
  color: #fff; background: #253544; border-left-color: var(--gm-blue-light);
}
.sidebar-menu .gm-mtopic {
  display: block; font-size: .72rem; color: #8397a9; font-weight: 400; margin-top: -2px;
}
.sidebar-menu > li > a > span { flex: 1 1 auto; min-width: 0; }
.gm-flag-sm { width: 22px; height: 22px; border-radius: 3px; flex: none; }

/* lessons already opened get a quiet check mark */
.sidebar-menu > li.gm-done > a::after {
  content: "\f00c"; font-family: FontAwesome; color: var(--gm-accent);
  font-size: .72rem; margin-left: auto; flex: none;
}

.gm-search { display: flex; padding: 10px 12px; }
.gm-search input {
  flex: 1 1 auto; min-width: 0; background: #17222c; border: 1px solid #2d3f4f;
  border-right: 0; color: #e6edf3; padding: .5em .7em; font-size: .88rem;
  border-radius: var(--gm-radius-sm) 0 0 var(--gm-radius-sm);
}
.gm-search input::placeholder { color: #6f8496; }
.gm-search input:focus { outline: none; border-color: var(--gm-blue-light); background: #101a22; }
.gm-search button {
  background: var(--gm-blue); border: 1px solid var(--gm-blue); color: #fff;
  padding: 0 .8em; border-radius: 0 var(--gm-radius-sm) var(--gm-radius-sm) 0; cursor: pointer;
}
.gm-search button:hover { background: var(--gm-blue-dark); }

/* ------------------------------------------------------------ content --- */
.content, .content.body { padding: 18px 22px 40px; }
.content-header { padding: 18px 22px 4px; position: relative; }
.content-header > h1,
.content-header > h2 { margin: .15em 0 .1em; }
.content-header .direct-chat-img {
  width: 44px; height: 44px; border-radius: var(--gm-radius-sm);
  float: left; margin: 0 14px 6px 0;
}
.content-header > h4 {
  clear: both; color: var(--gm-ink-soft); font-weight: 400; font-size: .9rem; margin: .4em 0 0;
}

.lead, p.lead {
  font-size: 1.06rem; line-height: 1.7; font-weight: 400;
  color: var(--gm-ink); max-width: var(--gm-measure);
}

/* breadcrumbs ------------------------------------------------------------ */
.gm-crumbs { clear: both; margin: 0 0 10px; font-size: .84rem; }
.gm-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3em; }
.gm-crumbs li { color: var(--gm-ink-faint); display: flex; align-items: center; gap: .3em; }
.gm-crumbs li + li::before { content: "/"; color: var(--gm-line); margin-right: .2em; }
.gm-crumbs a { color: var(--gm-ink-soft); }
.gm-crumbs a:hover { color: var(--gm-blue); }
.gm-crumbs [aria-current] { color: var(--gm-ink); font-weight: 500; }

/* boxes ------------------------------------------------------------------ */
.box {
  border: 1px solid var(--gm-line); border-top: 0; border-radius: var(--gm-radius);
  box-shadow: var(--gm-shadow); background: var(--gm-surface);
  margin-bottom: 22px; overflow: hidden;
}
.box-header {
  background: var(--gm-surface-2); border-bottom: 1px solid var(--gm-line); padding: 12px 16px;
}
.box-header .box-title {
  font-size: 1.02rem; font-weight: 600; margin: 0; color: var(--gm-ink); line-height: 1.3;
}
.box-body { padding: 0; }

/* tables ----------------------------------------------------------------- */
.table-responsive, .box-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { margin-bottom: 0; width: 100%; border-collapse: collapse; }
.table > thead > tr > th {
  background: var(--gm-surface-2); border-bottom: 2px solid var(--gm-line);
  color: var(--gm-ink-soft); font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 10px 14px; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.table > tbody > tr > td {
  padding: 11px 14px; border-top: 1px solid var(--gm-line-soft); vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: #fbfcfd; }
.table > tbody > tr:hover { background: #eff6fb; }
.table > tbody > tr > td:first-child { color: var(--gm-ink-soft); }
.table > tbody > tr > td strong { font-size: 1.06rem; font-weight: 600; color: var(--gm-ink); }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th {
  border: 0; border-top: 1px solid var(--gm-line-soft);
}
.table h4 { margin: 0; font-size: 1rem; font-weight: 500; }
.table code {
  background: var(--gm-surface-2); color: var(--gm-ink-soft);
  border-radius: 4px; font-size: .82rem; padding: .15em .5em;
}
.gm-wr > tbody > tr > td:first-child { color: var(--gm-danger); }
.gm-wr > tbody > tr > td:last-child  { color: var(--gm-accent-dark); font-weight: 600; }

/* --------------------------------------------------------- audio button -- */
.gm-play {
  -webkit-appearance: none; appearance: none; background: none; border: 0;
  padding: 4px; margin: 0; cursor: pointer; line-height: 1; border-radius: 50%;
  transition: transform .12s ease;
}
.gm-play .badge, .gm-play .label {
  background: var(--gm-accent); width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: .85rem; padding: 0;
  transition: background .15s ease, box-shadow .15s ease;
}
.gm-play:hover .badge { background: var(--gm-accent-dark); box-shadow: 0 0 0 4px rgba(0,166,90,.14); }
.gm-play:active { transform: scale(.92); }
.gm-play.is-playing .badge {
  background: var(--gm-blue-light); box-shadow: 0 0 0 4px rgba(60,141,188,.2);
  animation: gm-pulse 1.1s ease-in-out infinite;
}
.gm-play.is-error .badge { background: var(--gm-danger); }
@keyframes gm-pulse { 50% { box-shadow: 0 0 0 9px rgba(60,141,188,0); } }
.gm-play img { width: 40px; height: auto; }

/* ------------------------------------------------------------- callouts -- */
.callout {
  border-radius: var(--gm-radius); border: 1px solid var(--gm-line);
  border-left: 4px solid var(--gm-blue-light); background: var(--gm-surface);
  box-shadow: var(--gm-shadow); padding: 16px 18px; margin: 22px 0; color: var(--gm-ink);
}
.callout h3, .callout h4 { margin: 0 0 .5em; font-size: 1.05rem; color: var(--gm-ink); }
.callout p:last-child, .callout ul:last-child, .callout ol:last-child { margin-bottom: 0; }
.callout a { font-weight: 600; }
.callout.callout-info    { border-left-color: var(--gm-blue-light); background: #f4fafd; }
.callout.callout-success { border-left-color: var(--gm-accent);     background: #f3fbf7; }
.callout.callout-warning { border-left-color: var(--gm-warn);       background: #fffaf1; }
.callout.callout-danger  { border-left-color: var(--gm-danger);     background: #fdf5f4; }
.callout.lead { font-size: 1rem; }
.callout ul, .callout ol { padding-left: 1.3em; }
.callout li { margin-bottom: .5em; }

/* ------------------------------------------------------- lesson nav bar -- */
.gm-lessonnav {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 26px 0 8px; padding-top: 18px; border-top: 1px solid var(--gm-line);
}
.gm-lessonnav a {
  border: 1px solid var(--gm-line); background: var(--gm-surface);
  border-radius: var(--gm-radius-sm); padding: .55em 1em;
  font-weight: 600; font-size: .92rem; box-shadow: var(--gm-shadow);
}
.gm-lessonnav a:hover { border-color: var(--gm-blue-light); text-decoration: none; }
.gm-nav-up { margin: 0 auto; color: var(--gm-ink-soft) !important; font-weight: 500 !important; }

/* ---------------------------------------------------------- promo cards -- */
.gm-promo { margin: 30px 0 10px; }
.gm-promo h2 { font-size: 1.2rem; margin-bottom: .7em; }
.gm-promo-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gm-promo-card {
  display: block; padding: 16px; background: var(--gm-surface);
  border: 1px solid var(--gm-line); border-radius: var(--gm-radius);
  box-shadow: var(--gm-shadow); color: var(--gm-ink);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.gm-promo-card:hover {
  transform: translateY(-2px); box-shadow: var(--gm-shadow-lift);
  border-color: var(--gm-blue-light); text-decoration: none; color: var(--gm-ink);
}
.gm-promo-card i { font-size: 1.4rem; color: var(--gm-blue-light); display: block; margin-bottom: .4em; }
.gm-promo-card strong { display: block; font-size: 1.02rem; margin-bottom: .25em; }
.gm-promo-card span { display: block; font-size: .87rem; color: var(--gm-ink-soft); line-height: 1.5; }

/* ---------------------------------------------------------------- FAQ ---- */
.gm-faq { margin: 30px 0; max-width: var(--gm-measure); }
.gm-faq-item {
  background: var(--gm-surface); border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius); margin-bottom: 8px; box-shadow: var(--gm-shadow);
}
.gm-faq-item summary {
  cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none;
  display: flex; align-items: flex-start; gap: .6em;
}
.gm-faq-item summary::-webkit-details-marker { display: none; }
.gm-faq-item summary::before {
  content: "\f105"; font-family: FontAwesome; color: var(--gm-blue-light);
  font-weight: 400; transition: transform .16s ease; flex: none; line-height: 1.5;
}
.gm-faq-item[open] summary::before { transform: rotate(90deg); }
.gm-faq-item[open] summary { border-bottom: 1px solid var(--gm-line-soft); }
.gm-faq-item p { padding: 14px 18px 16px; margin: 0; color: var(--gm-ink-soft); }

/* ------------------------------------------------------------- articles -- */
.gm-articles { margin: 30px 0; }
.gm-articles h2 { display: flex; align-items: center; gap: .5em; font-size: 1.2rem; }
.gm-articles h2 .gm-flag { width: 26px; height: 26px; border-radius: 4px; }
.gm-artlist {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.gm-artlist li {
  background: var(--gm-surface); border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius); padding: 14px 16px; box-shadow: var(--gm-shadow);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.gm-artlist li:hover { border-color: var(--gm-blue-light); box-shadow: var(--gm-shadow-lift); }
.gm-artlist a { font-weight: 600; display: block; margin-bottom: .2em; }
.gm-artlist span { font-size: .86rem; color: var(--gm-ink-soft); line-height: 1.5; }

.gm-article { max-width: 1100px; }
.gm-article h2 { border-top: 1px solid var(--gm-line); padding-top: 1.1em; }
.gm-article h2:first-of-type { border-top: 0; padding-top: 0; }
.gm-article p, .gm-article li { max-width: var(--gm-measure); }
.gm-article .gm-ol, .gm-article .gm-ul { padding-left: 1.4em; margin: 0 0 1.4em; }
.gm-article .gm-ol li, .gm-article .gm-ul li { margin-bottom: .75em; line-height: 1.65; }
.gm-article .box { margin-bottom: 18px; }
.gm-article .box-body { padding: 16px; }
.gm-article .box-body > .table-responsive { margin: 0 -16px 14px; }
.gm-article .box-body p:last-child { margin-bottom: 0; }
.gm-lead {
  font-size: 1.12rem; color: var(--gm-ink-soft);
  border-left: 3px solid var(--gm-blue-light); padding-left: 1em; margin-bottom: 1.6em;
}
.gm-byline { clear: both; color: var(--gm-ink-faint); font-size: .86rem; margin: .3em 0 0; }
.gm-ex { font-family: var(--gm-font-read); font-size: 1.05rem; color: var(--gm-ink); }

/* ---------------------------------------------------------- index cards -- */
.gm-langgrid {
  list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.gm-langcard {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--gm-surface); border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius); box-shadow: var(--gm-shadow); color: var(--gm-ink);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.gm-langcard:hover {
  transform: translateY(-2px); box-shadow: var(--gm-shadow-lift);
  border-color: var(--gm-blue-light); color: var(--gm-ink); text-decoration: none;
}
.gm-langcard img { width: 40px; height: 40px; border-radius: 6px; flex: none; }
.gm-langcard b { display: block; font-size: 1.02rem; font-weight: 600; }
.gm-langcard small { color: var(--gm-ink-faint); font-size: .82rem; }

.gm-stats {
  list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.gm-stats li {
  background: var(--gm-surface); border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius); padding: 16px; text-align: center; box-shadow: var(--gm-shadow);
}
.gm-stats b { display: block; font-size: 1.7rem; color: var(--gm-blue); line-height: 1.1; }
.gm-stats span { font-size: .84rem; color: var(--gm-ink-soft); }

/* ----------------------------------------------------------- info boxes -- */
.gm-infoboxes { margin: 26px 0 6px; }
.info-box {
  display: flex; align-items: stretch; min-height: 72px; background: var(--gm-surface);
  border: 1px solid var(--gm-line); border-radius: var(--gm-radius);
  box-shadow: var(--gm-shadow); margin-bottom: 12px; color: var(--gm-ink); overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease;
}
a.info-box:hover {
  transform: translateY(-2px); box-shadow: var(--gm-shadow-lift);
  color: var(--gm-ink); text-decoration: none;
}
.info-box-icon {
  width: 68px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff; border-radius: 0;
}
.info-box-content { padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; }
.info-box-text {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--gm-ink-faint); font-weight: 700;
}
.info-box-number { font-size: 1.05rem; font-weight: 600; color: var(--gm-ink); }

/* ---------------------------------------------------------------- form -- */
.gm-form label { display: block; font-weight: 600; margin-bottom: .35em; font-size: .93rem; }
.gm-form input[type=text], .gm-form input[type=email], .gm-form textarea {
  width: 100%; max-width: 560px; padding: .65em .8em; font: inherit; font-size: .97rem;
  color: var(--gm-ink); background: var(--gm-surface-2);
  border: 1px solid var(--gm-line); border-radius: var(--gm-radius-sm);
}
.gm-form input:focus, .gm-form textarea:focus {
  outline: none; border-color: var(--gm-blue-light); background: var(--gm-surface);
  box-shadow: 0 0 0 3px rgba(60,141,188,.15);
}
.gm-form small { display: block; color: var(--gm-ink-faint); font-size: .83rem; margin-top: .3em; }
.gm-form .gm-req { color: var(--gm-danger); }
.gm-form p { margin-bottom: 1.2em; }
.gm-trap { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.gm-btn {
  display: inline-block; background: var(--gm-accent); color: #fff; border: 0;
  border-radius: var(--gm-radius-sm); padding: .7em 1.6em; font: inherit;
  font-weight: 600; cursor: pointer; transition: background .15s ease;
}
.gm-btn:hover { background: var(--gm-accent-dark); color: #fff; text-decoration: none; }
.gm-btn[disabled] { opacity: .5; cursor: default; }
.gm-btn-ghost { background: var(--gm-surface); color: var(--gm-ink); border: 1px solid var(--gm-line); }
.gm-btn-ghost:hover {
  background: var(--gm-surface-2); color: var(--gm-ink); border-color: var(--gm-blue-light);
}

/* --------------------------------------------------------------- misc ---- */
.gm-cert { margin: 22px 0; }
.gm-cert img { max-width: 100%; height: auto; border-radius: var(--gm-radius); box-shadow: var(--gm-shadow-lift); }
.gm-cert figcaption { font-size: .85rem; color: var(--gm-ink-faint); margin-top: .6em; }

.gm-ad { margin: 26px 0; display: block; min-height: 1px; }

img { max-width: 100%; height: auto; }
.direct-chat-img { border-radius: var(--gm-radius-sm); }

/* -------------------------------------------------------------- footer --- */
.gm-footer { background: #1f2d3a; color: #aebdc9; border-top: 0; padding: 34px 22px 18px; }
.gm-footer-grid {
  display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 1200px; margin: 0 auto 22px;
}
.gm-footer h2 {
  color: #fff; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .1em; margin: 0 0 .9em;
}
.gm-footer p { font-size: .88rem; line-height: 1.6; color: #93a4b3; }
.gm-footer ul { list-style: none; margin: 0; padding: 0; }
.gm-footer li { margin-bottom: .45em; }
.gm-footer a { color: #aebdc9; font-size: .89rem; }
.gm-footer a:hover { color: #fff; }
.gm-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.09); padding-top: 16px;
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
}
.gm-footer-bottom p { margin: 0; font-size: .85rem; }

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 767px) {
  body { font-size: 15.5px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.22rem; }
  .content, .content.body { padding: 14px 14px 32px; }
  .content-header { padding: 14px 14px 4px; }
  .lead, p.lead { font-size: 1rem; }
  .table > thead > tr > th { font-size: .7rem; padding: 8px 10px; }
  .table > tbody > tr > td { padding: 9px 10px; }
  .table > tbody > tr > td strong { font-size: 1rem; }
  .gm-lessonnav { flex-direction: column; align-items: stretch; text-align: center; }
  .gm-lessonnav a { margin: 0 !important; }
}

@media (min-width: 768px) {
  .content, .content.body, .content-header { padding-left: 26px; padding-right: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------- dark ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --gm-ink:       #dbe4ec;
    --gm-ink-soft:  #9fb0be;
    --gm-ink-faint: #7b8d9c;
    --gm-bg:        #131b22;
    --gm-surface:   #1b252e;
    --gm-surface-2: #212d38;
    --gm-line:      #2d3b48;
    --gm-line-soft: #26323d;
    --gm-shadow:      0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.28);
    --gm-shadow-lift: 0 4px 10px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
  }
  body, body.skin-blue, .content-wrapper { background: var(--gm-bg); color: var(--gm-ink); }
  a { color: #6fb6dd; }
  a:hover, a:focus { color: #9ad0ee; }
  .table-striped > tbody > tr:nth-of-type(odd) { background: #1f2a34; }
  .table > tbody > tr:hover { background: #253340; }
  .callout.callout-info    { background: #15262f; }
  .callout.callout-success { background: #142519; }
  .callout.callout-warning { background: #2a2314; }
  .callout.callout-danger  { background: #2b1a17; }
  .table code { background: #26323d; color: var(--gm-ink-soft); }
  .gm-footer { background: #0f161c; }
}

/* --------------------------------------------------------------- print --- */
@media print {
  .main-header, .main-sidebar, .gm-footer, .gm-ad, .gm-promo, .gm-lessonnav,
  .gm-search, .a2a_kit, .gm-skip, .gm-infoboxes, .gm-articles { display: none !important; }
  .content-wrapper { margin-left: 0 !important; background: #fff; }
  body { font-size: 11.5pt; color: #000; background: #fff; }
  .box, .callout { box-shadow: none; border: 1px solid #bbb; break-inside: avoid; }
  .table > thead > tr > th { position: static; }
  a { color: #000; text-decoration: underline; }
  .gm-play { display: none; }
}

/* ======================================================= study tools ==== */
.gm-tool { max-width: 860px; }
.gm-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin-bottom: 20px; padding: 14px 16px; background: var(--gm-surface);
  border: 1px solid var(--gm-line); border-radius: var(--gm-radius); box-shadow: var(--gm-shadow);
}
.gm-toolbar label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gm-ink-faint); margin-bottom: .35em; }
.gm-toolbar select, .gm-toolbar input[type=search] {
  font: inherit; font-size: .95rem; padding: .5em .7em; color: var(--gm-ink);
  background: var(--gm-surface-2); border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-sm); min-width: 150px;
}
.gm-toolbar select:focus, .gm-toolbar input:focus {
  outline: none; border-color: var(--gm-blue-light); box-shadow: 0 0 0 3px rgba(60,141,188,.15);
}
.gm-toolbar .gm-grow { flex: 1 1 220px; }
.gm-toolbar .gm-grow input { width: 100%; }

.gm-card {
  background: var(--gm-surface); border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius); box-shadow: var(--gm-shadow-lift);
  padding: 34px 24px; text-align: center; min-height: 230px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.gm-card-side { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gm-ink-faint); font-weight: 700; }
.gm-card-term { font-size: 2rem; font-weight: 600; line-height: 1.25; word-break: break-word; }
.gm-card-answer { font-size: 1.45rem; color: var(--gm-blue); font-weight: 600; }
.gm-card-hint { font-size: .87rem; color: var(--gm-ink-faint); }
.gm-card-meta { font-size: .8rem; color: var(--gm-ink-faint); }

.gm-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 18px 0; }
.gm-actions .gm-btn { min-width: 120px; }
.gm-grade-0 { background: var(--gm-danger); }
.gm-grade-0:hover { background: #c0392b; }
.gm-grade-1 { background: var(--gm-warn); }
.gm-grade-1:hover { background: #d68910; }

.gm-progress {
  height: 8px; border-radius: 99px; background: var(--gm-line-soft); overflow: hidden;
  margin-bottom: 18px;
}
.gm-progress span { display: block; height: 100%; background: var(--gm-accent); width: 0;
  transition: width .3s ease; }

.gm-quiz-opt {
  display: block; width: 100%; text-align: left; margin-bottom: 8px; padding: .8em 1em;
  background: var(--gm-surface); border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-sm); font: inherit; font-size: 1rem;
  color: var(--gm-ink); cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.gm-quiz-opt:hover { border-color: var(--gm-blue-light); background: var(--gm-surface-2); }
.gm-quiz-opt.is-right { border-color: var(--gm-accent); background: rgba(0,166,90,.12); font-weight: 600; }
.gm-quiz-opt.is-wrong { border-color: var(--gm-danger); background: rgba(221,75,57,.1); }
.gm-quiz-opt[disabled] { cursor: default; }

.gm-results { list-style: none; margin: 0; padding: 0; }
.gm-results li {
  padding: 10px 0; border-bottom: 1px solid var(--gm-line-soft);
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.gm-results .gm-bad { color: var(--gm-danger); }
.gm-results .gm-good { color: var(--gm-accent-dark); }

.gm-hits { list-style: none; margin: 0; padding: 0; }
.gm-hits li {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--gm-line-soft);
}
.gm-hits li:nth-child(odd) { background: var(--gm-surface-2); }
.gm-hits .gm-hit-fw { font-weight: 600; font-size: 1.05rem; flex: 1 1 180px; }
.gm-hits .gm-hit-ru { color: var(--gm-ink-soft); flex: 1 1 180px; }
.gm-hits .gm-hit-src { font-size: .8rem; color: var(--gm-ink-faint); }
.gm-hits mark { background: rgba(243,156,18,.3); color: inherit; border-radius: 3px; padding: 0 .1em; }
.gm-empty { padding: 28px 16px; text-align: center; color: var(--gm-ink-faint); }