:root {
  /* ONE palette for the whole app: a green family + calm neutrals, with a single warm accent used sparingly.
     Importance, from loudest to quietest:
       1. solid green   (--color-primary)      the main action on a page: Search, Generate new test, Buy
       2. mint + green edge (--color-mint)     something you have SELECTED or the page you are on (filters, themes, navigation, page numbers)
       3. white + green edge                    a quiet second choice: History, Login
       4. light, neutral                        who you are (the account button): no reason to catch the eye once you are logged in
       5. warm accent (--color-accent)          the few things that should stand out: favourites, days left, Logout
       6. the website's soft background        lavender, pink and mint behind every page (no colour per group), with a graphite strip for the menu */
  --color-bg: #f4f7f5;
  --color-surface: #ffffff;
  --color-primary: #1f6b50;
  --color-primary-rgb: 31, 107, 80;
  --color-primary-dark: #17513c;
  --color-primary-deep: #0f3a2b;
  --color-mint: #e3f1ea;
  --color-mint-soft: #f0f7f3;
  --color-mint-border: #9cc9b3;
  --header-h: 65px;          /* the height of the menu strip and of the footer: the home page sizes its screens with them */
  --footer-h: 61px;
  --color-success: #2e8b67;
  --color-accent: #b8470f;
  --color-text: #1b2924;
  --color-text-muted: #5c6b65;
  --color-border: #dce5e0;
  --color-border-strong: #c3d3cb;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background-color: #e7e3ee;
  background-image: radial-gradient(70% 60% at 15% 0%, #d9dcf3 0%, transparent 70%), radial-gradient(60% 70% at 100% 20%, #ecd3df 0%, transparent 70%), radial-gradient(60% 60% at 50% 110%, #d5e6df 0%, transparent 70%);
  background-attachment: fixed;
  color: var(--color-text);
  line-height: 1.5;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header: a quiet graphite strip. The handle at the far left (the same edge as the content below), the menu in the CENTRE, the account at the far right.
   Everything is plain text, no boxes or buttons: light grey, white for the page you are on or point at. On narrower screens (up to 900px) the menu drops to a second row. */
.site-header {
  background: rgba(44, 47, 52, 0.94);
  -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky; top: 0; z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
}
.header-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "brand nav auth";
  align-items: center; column-gap: 16px; padding: 10px 20px;
}
@media (max-width: 900px) {
  .header-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand auth" "nav nav"; column-gap: 16px; row-gap: 4px; padding: 12px 20px 8px; }
}
.brand { grid-area: brand; justify-self: start; font-weight: 400; font-size: 1.5rem; letter-spacing: 0.01em; color: #eceef1; }
.brand:hover { text-decoration: none; color: #fff; }
.main-nav { grid-area: nav; display: flex; justify-content: center; gap: 2px; flex-wrap: wrap; }
.nav-item {
  position: relative; display: flex; align-items: center; padding: 9px 18px;
  background: transparent; color: #b3b9c0; font-weight: 400; font-size: 1.08rem; letter-spacing: 0.01em;
  transition: color .2s ease;
}
.nav-item::after {      /* a fine line under the page you are on */
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 3px; height: 1px; background: #fff;
  transform: scaleX(0); transform-origin: center; transition: transform .25s ease;
}
.nav-item:hover { color: #fff; text-decoration: none; }
.nav-item[aria-current="page"], .nav-item[aria-current="page"]:hover { color: #fff; }
.nav-item[aria-current="page"]::after { transform: scaleX(1); }
.nav-item:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; border-radius: 4px; }

.auth-area { grid-area: auth; justify-self: end; min-width: 0; display: flex; align-items: center; gap: 10px; }
.hi-user { font-size: 0.9rem; color: var(--color-text-muted); margin-right: 4px; }
.inline-form { display: inline; }

/* Account dropdown */
.account-dropdown { position: relative; }
.account-toggle {
  display: flex; align-items: center; gap: 8px; padding: 8px 2px; cursor: pointer;
  background: transparent; color: #d4d8dd; border: 0;
  font-family: inherit; font-weight: 400; font-size: 0.98rem; letter-spacing: 0.01em; transition: color .2s ease;
}
/* Plain text like the rest of the menu: it only reacts when you point at it. */
.account-toggle:hover { color: #fff; }
.account-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 4px; border-radius: 4px; }
.account-toggle .caret { font-size: 0.7rem; }
/* Safety net only: the name is already shortened to a letter in code when it would not fit (accounts/display.py). */
.account-name { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-toggle.has-days .account-name { max-width: 9.5ch; }
.account-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  box-shadow: var(--shadow-md); min-width: 230px; z-index: 30; overflow: hidden;
}
.account-menu.is-open { display: block; }
.account-menu form { margin: 0; }
.account-toggle-days {
  font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--color-accent); color: white; margin-left: 4px;
}
.account-menu-subscription {
  padding: 10px 16px; font-size: 0.82rem; color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border); line-height: 1.4;
}
.account-menu-item {
  display: block; width: 100%; text-align: left; padding: 11px 16px; font-size: 0.9rem;
  color: var(--color-text); background: none; border: none; cursor: pointer; font-family: inherit;
}
.account-menu-item:hover { background: var(--color-bg); text-decoration: none; }
.account-menu-button { border-top: 1px solid var(--color-border); color: var(--color-accent); }
.ext-icon { color: var(--color-text-muted); font-size: 0.85em; }
/* Subscription sub-menu: the three plans, in the same small indented style as the language switches */
.plan-link { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: baseline; padding: 6px 0; font-size: 0.8rem; color: var(--color-text-muted); }
.plan-link + .plan-link { border-top: 1px solid var(--color-border); }
.plan-link:hover { text-decoration: none; color: var(--color-primary-dark); }
.plan-link:hover .plan-name { text-decoration: underline; }
.plan-price { font-weight: 700; color: var(--color-text); }
.plan-note { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 600; color: var(--color-primary); }
/* "Language settings >" opens the four switches underneath; closed by default so the menu stays small */
.account-menu-row { display: flex; align-items: center; justify-content: space-between; }
.row-chevron { font-size: 1.25rem; line-height: 1; color: var(--color-text-muted); transition: transform .15s ease; }
.account-menu-row[aria-expanded="true"] .row-chevron { transform: rotate(90deg); }
.account-menu-setting[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .row-chevron { transition: none; } }

/* Test section sub-tabs (New Test / History) */
.test-subnav { display: flex; gap: 8px; margin-bottom: 22px; }
.test-subnav-tab {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--color-border);
  font-size: 0.88rem; font-weight: 600; color: var(--color-text-muted);
}
.test-subnav-tab:hover { background: var(--color-mint-soft); border-color: var(--color-mint-border); color: var(--color-primary-dark); text-decoration: none; }
.test-subnav-tab.active { background: var(--color-mint); color: var(--color-primary-deep); border-color: var(--color-primary); font-weight: 700; }

/* Buttons */
.btn {
  display: inline-block; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent;
  font-family: inherit; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em; cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 3px solid var(--color-mint-border); outline-offset: 2px; }
/* The main action: solid green. Hover: darker, lifts and casts a green glow; pressed: sinks back. */
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 1px 2px rgba(15, 58, 43, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--color-primary-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.btn-primary:active { background: var(--color-primary-deep); transform: translateY(0); box-shadow: 0 1px 2px rgba(15, 58, 43, 0.3); }
/* A quiet second choice: white with a green edge. Hover: fills with mint. */
.btn-ghost { background: var(--color-surface); color: var(--color-primary-dark); border-color: var(--color-border-strong); }
.btn-ghost:hover { background: var(--color-mint); border-color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(var(--color-primary-rgb), 0.16); }
.btn-ghost:active { transform: translateY(0); box-shadow: none; }
.btn-lg { padding: 13px 28px; font-size: 1rem; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn-primary:hover, .btn-ghost:hover { transform: none; } }
.btn-block { width: 100%; }

/* Messages */
.messages { margin-top: 16px; }
.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 10px; font-size: 0.92rem; }
.alert-error, .alert-danger { background: #fdecea; color: #a4262c; }
.alert-success { background: #e6f4ea; color: #1e7b34; }
.alert-info, .alert-warning { background: #fff6e5; color: #8a5a00; }

.page-main { padding: 14px 20px 56px; }
.page-title { font-size: 1.6rem; margin-top: 10px; margin-bottom: 6px; }
.page-subtitle { color: var(--color-text-muted); margin-top: 0; }

/* Hero */
.hero { text-align: center; padding: 48px 12px 16px; }
.hero h1 { font-size: 2.1rem; margin-bottom: 10px; }
.hero p { max-width: 620px; margin: 0 auto; color: var(--color-text-muted); font-size: 1.02rem; }
.hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.hero-actions .btn { padding: 15px 34px; font-size: 1.05rem; }

/* Theme grid */
.section-title { text-align: center; font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); margin: 40px 0 20px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.theme-card {
  background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 28px 18px; text-align: center; border: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  transition: box-shadow .15s ease, transform .15s ease;
}
.theme-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.theme-icon { font-size: 1.8rem; }
.theme-name { font-weight: 700; font-size: 1.02rem; color: var(--color-text); }
.theme-count { font-size: 0.85rem; color: var(--color-text-muted); }

/* Home page: a calm, full-screen flow. The first screen is "Writing & Speaking themes", the next is "Everyday Basics". Both sit on the same soft
   background as the rest of the app (no colour per group), with quiet white cards that are the same size everywhere. Each part flows in as you
   scroll (static/js/home-reveal.js), the way the website does. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.home-flow { --card-h: clamp(124px, calc((100svh - var(--header-h) - 170px) / 3), 196px); padding: 0; }
.page-main:has(.home-flow) { padding: 0; }
.page-main:has(.home-flow) + .site-footer { margin-top: 0; }
.home-section {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));      /* each part is one screen */
  padding: 22px 0 56px; scroll-margin-top: var(--header-h);
}
.home-section .section-inner { width: 100%; }      /* the content spans the page even when a part has few cards */
.home-section:last-of-type {      /* the last screen includes the footer */
  min-height: calc(100vh - var(--header-h) - var(--footer-h)); min-height: calc(100svh - var(--header-h) - var(--footer-h)); padding-bottom: 28px;
}
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.band-title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-text); }
.band-count { font-size: 0.85rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-section .theme-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }      /* its left edge is the menu's left edge */
.home-section .theme-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0;      /* symbol and percent on top, the name under them, the count and the bar pinned to the bottom */
  height: var(--card-h);            /* every card, in both parts, is exactly this tall */
  padding: 12px 16px 14px; text-align: left; color: var(--color-text);
  background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(30, 33, 50, 0.04), 0 10px 30px rgba(30, 33, 50, 0.06);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.home-section .theme-card:hover { text-decoration: none; transform: translateY(-4px); background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 4px rgba(30, 33, 50, 0.05), 0 18px 40px rgba(30, 33, 50, 0.12); }
.home-section .theme-card:active { transform: translateY(-1px); }
.home-section .theme-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.home-section .theme-top { display: flex; align-items: flex-start; justify-content: space-between; }
.home-section .theme-icon { font-size: 1.55rem; line-height: 1; }
.home-section .theme-progress-text { font-size: 0.85rem; font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.home-section .theme-name {
  margin-top: 4px; font-size: clamp(0.92rem, 0.8rem + 0.25vw, 1.08rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.home-section .theme-count { margin: auto 0 8px; padding-top: 2px; font-size: 0.85rem; color: var(--color-text-muted); }
.home-section .theme-card .theme-progress { flex: 0 0 auto; max-width: none; height: 3px; margin: 0; background: rgba(30, 33, 50, 0.09); }
/* A locked card (the subscription has ended): the card can be seen but not opened. */
.home-section .theme-card.is-locked { filter: grayscale(1); background: rgba(238, 240, 241, 0.9); cursor: not-allowed; }
.home-section .theme-card.is-locked > :not(.lock-chip) { opacity: 0.55; }
.home-section .theme-card.is-locked:hover { transform: none; box-shadow: 0 1px 2px rgba(30, 33, 50, 0.04), 0 10px 30px rgba(30, 33, 50, 0.06); }
.lock-chip { position: absolute; top: 14px; right: 40px; font-size: 0.8rem; line-height: 1; }
/* "Everyday Basics ↓": a quiet cue at the bottom of the first screen, like the website's "Explore" */
.scroll-cue {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); text-decoration: none;
  animation: cue-bob 2.2s ease-in-out infinite;
}
.scroll-cue span:last-child { font-size: 1.1rem; letter-spacing: 0; line-height: 1; }
.scroll-cue:hover { color: var(--color-primary); text-decoration: none; }
@keyframes cue-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } .home-section .theme-card, .reveal { transition: none; } .home-section .theme-card:hover { transform: none; } }
/* Flow in as you scroll: fade and rise into place (only when the script is running) */
.js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js-reveal .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } }
@media (min-height: 800px) { .home-section .theme-name { -webkit-line-clamp: 3; } }      /* tall windows have room for a long name on three lines */
@media (max-width: 900px) {      /* tablets: three across, natural height */
  .home-flow { --card-h: 148px; }
  .home-section, .home-section:last-of-type { min-height: 0; padding: 24px 0 28px; }
  .home-section .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .scroll-cue { display: none; }
}
@media (max-width: 640px) {      /* phones: two across */
  .home-flow { --card-h: 156px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .band-title { font-size: 1.35rem; }
  .home-section .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .home-section .theme-card { padding: 12px 14px 14px; border-radius: 16px; }
  .home-section .theme-icon { font-size: 1.5rem; }
  .home-section .theme-name { font-size: 0.95rem; -webkit-line-clamp: 3; }
  .lock-chip { right: 36px; top: 12px; }
}

/* The notice for an expired subscription (home page and the locked page), and everything greyed out while it applies */
.expired-banner { background: #fff1e3; border-bottom: 1px solid #f3cfa7; color: #5a2d0c; }
.expired-inner { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; }
.expired-icon { font-size: 1.4rem; line-height: 1; }
.expired-text { margin: 0; flex: 1; font-size: 0.92rem; line-height: 1.4; }
.expired-renew { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) { .expired-inner { flex-wrap: wrap; } .expired-renew { width: 100%; text-align: center; } }
.nav-item.is-disabled, .nav-item.is-disabled:hover { color: #6d737a; cursor: not-allowed; }
.nav-item.is-disabled::after { display: none; }
.account-menu-item.is-disabled, .account-menu-item.is-disabled:hover { background: transparent; color: #a9b3ae; cursor: not-allowed; }
.account-menu-subscription.is-expired { color: var(--color-accent); font-weight: 600; }
.account-toggle-days.is-expired { background: var(--color-accent); color: #fff; }

/* Type and gender tags on one line, with a thin bar between the two groups */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.filter-sep { color: #7f8c86; font-size: 1.4rem; line-height: 1; margin: 0 6px; user-select: none; }

.test-cta { display: flex; justify-content: center; margin-top: 44px; }
.test-cta-card {
  background: var(--color-primary); color: white; border-radius: var(--radius);
  padding: 32px 40px; text-align: center; max-width: 480px; box-shadow: var(--shadow-md);
}
.test-cta-card h3 { margin-top: 0; }
.test-cta-card .btn-primary { background: white; color: var(--color-primary-dark); margin-top: 10px; }

/* Filters/tabs */
.filter-bar { display: flex; gap: 10px; margin: 18px 0; }
.filter-bar input[type=text] {
  flex: 1; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--color-border); font-size: 0.95rem;
}
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tab {
  padding: 8px 14px; border-radius: 999px; background: var(--color-surface);
  border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.88rem; font-weight: 600;
}
.tab:hover { background: var(--color-mint-soft); border-color: var(--color-mint-border); color: var(--color-primary-dark); text-decoration: none; }
.tab.active { background: var(--color-mint); color: var(--color-primary-deep); border-color: var(--color-primary); font-weight: 700; text-decoration: none; }
.fav-filter { display: flex; gap: 8px; margin-bottom: 18px; }
.chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 0.82rem; color: var(--color-text-muted); transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.chip:hover { background: var(--color-mint-soft); border-color: var(--color-mint-border); color: var(--color-primary-dark); text-decoration: none; }
.chip.active { background: var(--color-mint); color: var(--color-primary-deep); border-color: var(--color-primary); font-weight: 700; text-decoration: none; }

/* Vocab table */
.vocab-table-wrap { overflow-x: auto; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.vocab-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.vocab-table th, .vocab-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.vocab-table th { color: var(--color-text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; }
.vocab-table tr:last-child td { border-bottom: none; }
.empty-row { text-align: center; color: var(--color-text-muted); padding: 30px !important; }
.french-word { font-weight: 700; }
.gender-tag { font-size: 0.7rem; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--color-bg); color: var(--color-text-muted); }
.gender-tag.gender-pink { background: #fde2e7; color: #9c3b53; }
.gender-tag.gender-blue { background: #dbeafe; color: #2c5b8a; }
.audio-btn { border: none; background: var(--color-bg); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 1rem; }
.audio-btn-disabled { opacity: 0.3; cursor: default; }
.fav-btn { border: none; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--color-text-muted); }
.fav-btn.is-fav { color: var(--color-accent); }
/* Done: an empty circle that fills with a tick; progress bars use the same success green */
.done-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid #c3cadb; background: transparent; cursor: pointer;
  color: #fff; font-size: 0.9rem; font-weight: 800; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.done-btn:hover { border-color: var(--color-success); }
.done-btn.is-done { background: var(--color-success); border-color: var(--color-success); }
.done-btn:focus-visible { outline: 2px solid var(--color-success); outline-offset: 2px; }
.theme-progress, .progress-track { display: block; width: 100%; height: 6px; border-radius: 999px; background: #e6eae8; overflow: hidden; }
.theme-progress { max-width: 150px; margin-top: 2px; }
.theme-progress-fill, .progress-fill { display: block; height: 100%; border-radius: 999px; background: var(--color-success); transition: width .25s ease; }
.theme-progress-text { font-size: 0.8rem; font-weight: 600; color: var(--color-success); }
.progress-line { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; max-width: 420px; }
.progress-line .progress-track { flex: 1; }
.progress-text { font-size: 0.85rem; color: var(--color-text-muted); white-space: nowrap; }
.progress-text b { color: var(--color-text); }
@media (prefers-reduced-motion: reduce) { .theme-progress-fill, .progress-fill, .done-btn { transition: none; } }

.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; align-items: center; padding: 16px; font-size: 0.9rem; }
.pagination-arrow, .pagination-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px;
  color: var(--color-text-muted); font-weight: 600;
}
.pagination-arrow:hover, .pagination-page:hover { background: var(--color-bg); text-decoration: none; }
.pagination-page.current { background: var(--color-mint); color: var(--color-primary-deep); font-weight: 700; }
.pagination-ellipsis { color: var(--color-text-muted); padding: 0 4px; }

/* Mobile card layout for vocab table */
@media (max-width: 900px) {      /* cards up to tablet width; the table needs about 860px with all four language columns on */
  .vocab-table-wrap { overflow-x: visible; }
  .vocab-table { min-width: 0; }
  .vocab-table thead { display: none; }
  .vocab-table, .vocab-table tbody, .vocab-table tr, .vocab-table td { display: block; width: 100%; }
  .vocab-table tr { border-bottom: 1px solid var(--color-border); padding: 10px 0; }
  .vocab-table td {
    border: none; padding: 6px 16px; display: flex; justify-content: space-between;
    align-items: center; gap: 10px; flex-wrap: wrap; text-align: right;
  }
  .vocab-table td::before {
    content: attr(data-label); font-weight: 600; color: var(--color-text-muted);
    margin-right: 10px; text-align: left; flex-shrink: 0;
  }
}

/* Auth */
.auth-card { max-width: 400px; margin: 20px auto; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); padding: 34px; }
.auth-card h1 { font-size: 1.4rem; margin-bottom: 4px; }
.auth-sub { color: var(--color-text-muted); margin-top: 0; margin-bottom: 20px; font-size: 0.9rem; }
.auth-card p, .auth-card ul { margin: 0 0 14px; }
.auth-card input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--color-border); margin-top: 4px; }
.auth-card label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); }
.auth-links { text-align: center; font-size: 0.88rem; margin-top: 14px; }
.auth-card input:disabled { background: var(--color-bg); color: var(--color-text-muted); }
.auth-card .helptext { display: block; font-size: 0.78rem; color: var(--color-text-muted); margin-top: 3px; }
.profile-hint { color: var(--color-text-muted); font-size: 0.9rem; }

/* Test config */
.test-config-form fieldset { border: none; padding: 0; margin: 0 0 26px; }
.test-config-form legend { font-weight: 700; margin-bottom: 10px; }
/* Very small theme cards (the theme's own icon + name): click to select. The real checkbox stays for keyboards and screen readers. */
.mini-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-card { position: relative; cursor: pointer; }
.mini-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mini-card-body {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 6px; border-radius: 12px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted);
  font-size: 0.88rem; font-weight: 600; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mini-card-icon {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--color-primary-rgb), 0.08);
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem; line-height: 1;
}
.mini-card:hover .mini-card-body { background: var(--color-mint-soft); border-color: var(--color-mint-border); color: var(--color-primary-dark); }
.mini-card input:checked + .mini-card-body { background: var(--color-mint); border-color: var(--color-primary); color: var(--color-primary-deep); font-weight: 700; }
.mini-card input:checked + .mini-card-body .mini-card-icon { background: rgba(var(--color-primary-rgb), 0.16); }
.mini-card input:focus-visible + .mini-card-body { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.test-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.field-hint { margin: 8px 0 0; font-size: 0.85rem; color: var(--color-text-muted); }

/* Capsules (the same shape as the filter capsules): number of questions. The real checkbox/radio stays for keyboards and screen readers. */
.capsules { display: flex; flex-wrap: wrap; gap: 8px; }
.capsule { position: relative; cursor: pointer; }
.capsule input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.capsule span {
  display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-muted); font-size: 0.9rem; font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.capsule:hover span { background: var(--color-mint-soft); border-color: var(--color-mint-border); color: var(--color-primary-dark); }
.capsule input:checked + span { background: var(--color-mint); border-color: var(--color-primary); color: var(--color-primary-deep); font-weight: 700; }
.capsule input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Test taking */
.answer-input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--color-border); }
.test-table td { padding: 8px 16px; }

/* Accent keyboard: a translucent green "glass" panel that floats above the page.
   Position, size, dragging and collapsing are unchanged -- only the look is new. */
.accent-keyboard {
  position: fixed; bottom: 20px; right: 20px; width: 310px; padding: 12px; z-index: 50;
  background: rgba(24, 88, 66, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(10, 40, 30, 0.35), 0 2px 6px rgba(10, 40, 30, 0.2);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
}
/* Browsers without background blur get a solid green so the letters stay readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .accent-keyboard { background: rgb(24, 88, 66); }
}
.accent-keyboard-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.95); margin-bottom: 8px; cursor: grab; }
.accent-keyboard-header button { border: none; background: none; cursor: pointer; font-size: 1rem; color: #fff; padding: 0 6px; border-radius: 6px; }
.accent-keyboard-keys { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.accent-keyboard.collapsed .accent-keyboard-keys { display: none; }
.accent-key {
  border: 1px solid rgba(255, 255, 255, 0.30); background: rgba(255, 255, 255, 0.14); color: #fff;
  border-radius: 9px; padding: 7px 0; cursor: pointer; font-family: inherit; font-size: 1.4rem; line-height: 1.25;
  transition: background 0.12s ease, color 0.12s ease, transform 0.06s ease;
}
.accent-key:active { background: rgba(255, 255, 255, 0.92); color: var(--color-primary-dark); transform: scale(0.94); }
.accent-key:focus-visible, .accent-keyboard-header button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
/* Hover highlight only where a real mouse exists, so keys don't stay lit after a tap on phones. */
@media (hover: hover) {
  .accent-key:hover { background: rgba(255, 255, 255, 0.92); color: var(--color-primary-dark); }
  .accent-keyboard-header button:hover { background: rgba(255, 255, 255, 0.18); }
}
@media (prefers-reduced-motion: reduce) { .accent-key { transition: none; } }

/* Results */
.row-correct { background: #f2faf3; }
.row-incorrect { background: #fdf2f1; }
.result-correct { color: #1e7b34; font-weight: 700; }
.result-incorrect { color: #a4262c; font-weight: 700; }
.results-summary { margin-top: 26px; background: var(--color-surface); border-radius: var(--radius); border: 1px solid var(--color-border); padding: 26px; text-align: center; }
.results-score { display: flex; justify-content: center; gap: 50px; margin: 18px 0; }
.score-block { display: flex; flex-direction: column; }
.score-number { font-size: 1.8rem; font-weight: 800; color: var(--color-primary); }
.score-label { font-size: 0.82rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.results-actions { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }

.hint { color: var(--color-text-muted); }

.site-footer { border-top: 1px solid var(--color-border); padding: 20px 0; color: var(--color-text-muted); font-size: 0.82rem; text-align: center; margin-top: 40px; }

@media (max-width: 640px) {
  .header-inner { padding: 10px 16px 6px; }
  .main-nav { justify-content: space-between; gap: 2px; }
  .brand { font-size: 1.3rem; }
  .nav-item { padding: 8px 6px; font-size: 0.98rem; flex: 1 1 auto; justify-content: center; }
  .account-name { max-width: 17.5ch; }

  .results-score { gap: 24px; }

  .hero h1 { font-size: 1.6rem; }
  .hero p { font-size: 0.92rem; }
  .hero-actions .btn { width: 100%; }

  .accent-keyboard {
    left: 12px; right: 12px; bottom: 12px; width: auto;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
  .accent-keyboard-keys { grid-template-columns: repeat(8, 1fr); gap: 3px; }
  .accent-key { padding: 8px 0; font-size: 1.3rem; }

  .test-config-form legend { font-size: 0.95rem; }
  .test-cta-card { padding: 24px 18px; }

  .page-main { padding: 12px 14px 48px; }
}

/* Logged-out landing page video */
.demo-video-section { text-align: center; margin: 30px 0 10px; }
.demo-video-wrap {
  max-width: 720px; margin: 0 auto; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid var(--color-border); background: #000;
}
.demo-video-wrap video { width: 100%; display: block; max-height: 420px; }
.demo-video-hint { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 14px; }
.demo-video-placeholder {
  max-width: 720px; margin: 0 auto; border-radius: var(--radius); border: 1px dashed var(--color-border);
  background: var(--color-surface); color: var(--color-text-muted); padding: 60px 20px; font-size: 0.95rem;
}

/* ---------- Hindi (Language settings) + example sentences ---------- */
/* Everything Hindi is already in the page; it stays hidden until the learner turns "Show Hindi" on
   (language-setting.js sets data-hindi="on" on <html>). English is always shown. */
html:not([data-hindi="on"]) .hi-only { display: none !important; }
/* The two pronunciation switches (both off by default) are separate from the two meaning switches. */
html:not([data-english-pron="on"]) .ep-only { display: none !important; }
html:not([data-hindi-pron="on"]) .hp-only { display: none !important; }
/* A word's tip (e.g. "40 + 3" for numbers): a small grey line under the French word. Only words that have one show it. */
.word-tip { display: block; margin-top: 3px; font-size: 0.82rem; font-weight: 500; color: var(--color-text-muted); }
@media (max-width: 900px) { .vocab-table td .word-tip { flex-basis: 100%; } }
/* The English switch (on by default). Off hides the English meaning in word lists and the sentence box. */
html[data-english="off"] .en-only { display: none !important; }
/* Test pages can't ask a blank question: English is hidden there only when Hindi is on AND the word has a
   Hindi meaning; then the Hindi meaning becomes the prompt. In every other case the English prompt stays. */
.th-alt { display: none; }
html[data-english="off"][data-hindi="on"] .th-alt { display: inline; }
html[data-english="off"][data-hindi="on"] .th-main { display: none; }
html[data-english="off"][data-hindi="on"] .test-prompt.has-hi .en-text { display: none; }
html[data-english="off"][data-hindi="on"] .test-prompt.has-hi .hindi-sub { color: var(--color-text); font-size: 1em; margin-top: 0; }
@media (max-width: 900px) {
  html[data-english="off"][data-hindi="on"] .vocab-table td.test-prompt::before { content: attr(data-label-alt); }
}
[lang="hi"] { line-height: 1.6; }
.vocab-table td[lang="hi"] { font-size: 1rem; }   /* Devanagari reads small at the table's text size */
.vocab-table td[lang="hi"]::before { font-size: 0.92rem; }   /* ...but the phone-card label ("Hindi meaning") stays the same size as the others */
.hindi-sub { color: var(--color-text-muted); font-size: 0.95em; margin-top: 2px; }

/* The example-sentence button next to a word: a speech bubble with quotation marks, i.e. "this word, used in a sentence" */
.sentence-btn {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 6px; padding: 0;
  width: 34px; height: 34px; border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  background: var(--color-mint-soft); color: var(--color-primary);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sentence-btn:hover { background: var(--color-mint); color: var(--color-primary-deep); border-color: var(--color-mint-border); }
.sentence-icon { display: block; }
.sentence-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* The example-sentence box */
.sentence-dialog { border: none; padding: 0; background: transparent; width: calc(100% - 32px); max-width: 520px; color: var(--color-text); }
.sentence-dialog::backdrop { background: rgba(16, 40, 32, 0.45); }
.sentence-dialog.is-fallback {            /* browsers without <dialog>.showModal() */
  position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 100;
  box-shadow: 0 0 0 100vmax rgba(16, 40, 32, 0.45);
}
.sentence-dialog [hidden] { display: none !important; }
.sentence-card { position: relative; background: var(--color-surface); border-radius: 16px; padding: 22px 24px 24px; box-shadow: var(--shadow-md); }
.sentence-word { margin: 0 36px 12px 0; font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sentence-fr { margin: 0 0 8px; font-size: 1rem; line-height: 1.5; }
.sentence-hit { background: rgba(var(--color-primary-rgb), 0.16); color: var(--color-primary-dark); font-weight: 700; border-radius: 4px; padding: 0 3px; }   /* just the studied word */
.sentence-en { margin: 0 0 8px; font-size: 0.92rem; line-height: 1.5; }
.sentence-hi { margin: 0; padding-top: 10px; border-top: 1px dashed var(--color-border); font-size: 1rem; color: var(--color-primary-dark); }
.sentence-close {
  position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: none; background: none;
  border-radius: 8px; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--color-text-muted);
}
.sentence-close:hover { background: var(--color-bg); }
.sentence-close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* "Language settings" switch in the account dropdown */
/* the sub-menu: indented under its row, with a green line down the side, in smaller type */
.account-menu-setting { margin: 0 14px 10px 24px; padding: 6px 0 6px 14px; border-left: 2px solid var(--color-mint-border); }
.account-menu-heading { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 8px; }
.lang-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; font-size: 0.8rem; color: var(--color-text-muted); }
.lang-switch + .lang-switch { margin-top: 8px; }
.lang-switch-label small { display: block; margin-top: 1px; font-size: 0.72rem; font-weight: 400; color: var(--color-text-muted); }
.lang-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }   /* hidden, but still keyboard-focusable */
.lang-switch-track { position: relative; flex: 0 0 auto; width: 32px; height: 18px; border-radius: 999px; background: #8a9692; transition: background 0.15s ease; }
.lang-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease;
}
.lang-switch-input:checked + .lang-switch-track { background: var(--color-primary); }
.lang-switch-input:checked + .lang-switch-track::after { transform: translateX(14px); }
.lang-switch-input:focus-visible + .lang-switch-track { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .lang-switch-track, .lang-switch-track::after { transition: none; } }

/* Text that is there for screen readers only (the home page's heading) */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The maintenance notice at the very top of every page (MAINTENANCE_NOTICE setting) */
.notice-bar { background: #fff4d6; color: #6b4a00; border-bottom: 1px solid #f0d58a; text-align: center; padding: 9px 16px; font-size: 0.92rem; font-weight: 600; }

/* Theme pages: a faint line-drawing background that fits the theme (Body Parts: hearts, eyes, hands ...), in a quiet grey-violet on the same soft
   background as every other page. A fixed layer behind the page. Switch it off with THEME_BACKGROUNDS=0. */
body.themed-bg { --pattern-ink: #6f7596; }
body.themed-bg::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--pattern-ink); opacity: 0.12;
  -webkit-mask-size: 380px 380px; mask-size: 380px 380px; -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
body.bg-body-parts::before { -webkit-mask-image: url("../img/patterns/body-parts.2379da327d89.svg"); mask-image: url("../img/patterns/body-parts.2379da327d89.svg"); }
body.bg-colours::before { -webkit-mask-image: url("../img/patterns/colours.c8b9d8bb4653.svg"); mask-image: url("../img/patterns/colours.c8b9d8bb4653.svg"); }
body.bg-numbers::before { -webkit-mask-image: url("../img/patterns/numbers.bfcef760fd53.svg"); mask-image: url("../img/patterns/numbers.bfcef760fd53.svg"); }
body.bg-days-months::before { -webkit-mask-image: url("../img/patterns/days-months.f33d118bdc60.svg"); mask-image: url("../img/patterns/days-months.f33d118bdc60.svg"); }
body.bg-time::before { -webkit-mask-image: url("../img/patterns/time.fc5834d2ceba.svg"); mask-image: url("../img/patterns/time.fc5834d2ceba.svg"); }
body.bg-celebration::before { -webkit-mask-image: url("../img/patterns/celebration.cd758aa37737.svg"); mask-image: url("../img/patterns/celebration.cd758aa37737.svg"); }
body.bg-connectors::before { -webkit-mask-image: url("../img/patterns/connectors.90fe90e97d9a.svg"); mask-image: url("../img/patterns/connectors.90fe90e97d9a.svg"); }
body.bg-daily-life::before { -webkit-mask-image: url("../img/patterns/daily-life.72442cfa2997.svg"); mask-image: url("../img/patterns/daily-life.72442cfa2997.svg"); }
body.bg-education::before { -webkit-mask-image: url("../img/patterns/education.a7036b896703.svg"); mask-image: url("../img/patterns/education.a7036b896703.svg"); }
body.bg-family::before { -webkit-mask-image: url("../img/patterns/family.41e000637a88.svg"); mask-image: url("../img/patterns/family.41e000637a88.svg"); }
body.bg-health::before { -webkit-mask-image: url("../img/patterns/health.16a318e1f947.svg"); mask-image: url("../img/patterns/health.16a318e1f947.svg"); }
body.bg-hobbies::before { -webkit-mask-image: url("../img/patterns/hobbies.7fc6ec5c87f5.svg"); mask-image: url("../img/patterns/hobbies.7fc6ec5c87f5.svg"); }
body.bg-immigration::before { -webkit-mask-image: url("../img/patterns/immigration.4ebef8d64da0.svg"); mask-image: url("../img/patterns/immigration.4ebef8d64da0.svg"); }
body.bg-shopping::before { -webkit-mask-image: url("../img/patterns/shopping.1daa78d26195.svg"); mask-image: url("../img/patterns/shopping.1daa78d26195.svg"); }
body.bg-travel::before { -webkit-mask-image: url("../img/patterns/travel.8da7ddd49a72.svg"); mask-image: url("../img/patterns/travel.8da7ddd49a72.svg"); }
body.bg-work::before { -webkit-mask-image: url("../img/patterns/work.c0b65ed39d97.svg"); mask-image: url("../img/patterns/work.c0b65ed39d97.svg"); }
body.bg-generic::before { -webkit-mask-image: url("../img/patterns/generic.d1cd12a8bde9.svg"); mask-image: url("../img/patterns/generic.d1cd12a8bde9.svg"); }
@media (max-width: 640px) { body.themed-bg::before { -webkit-mask-size: 300px 300px; mask-size: 300px 300px; } }

/* Very small phones (older 320px models): less room for the name than the 360px measurement behind accounts/display.py, so the name is
   cut sooner with a "..." and the "N days left" badge waits inside the menu (it is shown there too). */
@media (max-width: 359px) {
  .account-name, .account-toggle.has-days .account-name { max-width: 9ch; }
  .account-toggle-days { display: none; }
}

/* Library (guides and PDFs) */
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; }
.library-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; padding: 18px 18px 16px; transition: box-shadow .15s ease, transform .15s ease; }
.library-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.library-name { font-size: 1.15rem; margin: 0; }
.library-desc { margin: 0; color: var(--color-text-muted); }
.library-meta { margin: 0 0 8px; font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); }
.library-empty { margin-top: 18px; padding: 22px; border: 1px dashed var(--color-border); border-radius: 18px; background: var(--color-surface); }
@media (prefers-reduced-motion: reduce) { .library-card { transition: none; } .library-card:hover { transform: none; } }

/* The logo at the top left: shown as it is (its own shape, not cropped, no mask); a square picture stays square */
.brand-has-logo { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo { display: block; height: 40px; width: auto; max-width: 160px; object-fit: contain; }
@media (max-width: 520px) { .brand-logo { height: 34px; } }