: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. sand and sky                          the two parts of the home page and their theme pages: sand = Writing & Speaking themes, sky = Everyday Basics */
  --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;
  --color-sand: #fbf3e4;
  --color-sand-ink: #b98a3e;
  --color-sky: #e8f0f8;
  --color-sky-ink: #5b86b0;
  --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: var(--color-bg);
  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 */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 10;
  padding-top: env(safe-area-inset-top, 0px);
}
/* One row: the handle at the far left (the same edge as the cards below), the navigation in the CENTRE of the page, the account button at the far right.
   On narrower screens (up to 900px) the navigation drops to a second row. */
.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: var(--color-text); }
.brand:hover { text-decoration: none; }
.main-nav { grid-area: nav; display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
/* Plain names, no boxes. Hover = a very light tint; the page you are on = a light green pill with bold green text. */
.nav-item {
  display: flex; align-items: center; padding: 9px 20px; border-radius: 999px;
  background: transparent; color: var(--color-text-muted); font-weight: 600; font-size: 1.12rem;
  transition: background .15s ease, color .15s ease;
}
.nav-item:hover { background: var(--color-mint-soft); color: var(--color-primary-dark); text-decoration: none; }
.nav-item[aria-current="page"], .nav-item[aria-current="page"]:hover { background: var(--color-mint); color: var(--color-primary-deep); font-weight: 700; }
.nav-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.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 14px; border-radius: 999px; cursor: pointer;
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong);
  font-family: inherit; font-weight: 600; font-size: 0.9rem; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Light and quiet: once you are logged in there is no reason for this to catch the eye. It only reacts when you point at it. */
.account-toggle:hover { background: var(--color-mint); border-color: var(--color-mint-border); color: var(--color-primary-deep); }
.account-toggle:focus-visible { outline: 3px solid var(--color-mint-border); outline-offset: 2px; }
.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: two parts, "Themes" and "Everyday Basics", each on its own full-width background band, with compact white cards in rows of four.
   The cards are small enough that both parts fit on one screen without scrolling. */
.home-themes { padding: 0; }
/* On the home page the coloured bands run right up to the header and down to the footer, so the page's own padding is dropped there. */
.page-main:has(.home-themes) { padding-top: 0; padding-bottom: 0; }
.page-main:has(.home-themes) + .site-footer { margin-top: 0; }
.home-band { padding: 10px 0 12px; background: var(--band-bg); box-shadow: 0 0 0 100vmax var(--band-bg); clip-path: inset(0 -100vmax); }   /* the colour runs edge to edge of the window */
.home-band-themes { --band-bg: var(--color-sand); }
.home-band-basics { --band-bg: var(--color-sky); }
.band-title { margin: 0 0 8px; font-size: 1.35rem; font-weight: 500; letter-spacing: 0.005em; color: var(--color-primary-deep); }
.home-themes .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }      /* spans the page: its left edge is the header's left edge */
@media (max-width: 900px) { .home-themes .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-themes .theme-card {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "icon info" "bar bar"; align-items: center; gap: 5px 10px;
  height: 74px;            /* every card, in both parts, is exactly this tall */
  padding: 8px 12px 9px; text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.home-themes .theme-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(var(--color-primary-rgb), 0.16); border-color: var(--color-mint-border); }
.home-themes .theme-card:active { transform: translateY(-1px); }
.home-themes .theme-icon {
  grid-area: icon; width: 38px; height: 38px; border-radius: 50%; background: var(--color-mint);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem; line-height: 1; transition: background-color .15s ease;
}
.home-themes .theme-card:hover .theme-icon { background: var(--color-mint); }
.home-themes .theme-info { grid-area: info; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.home-themes .theme-name { font-size: 0.88rem; line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-themes .theme-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 0.74rem; }
.home-themes .theme-card .theme-progress { grid-area: bar; max-width: none; height: 4px; margin: 0; }
.theme-card:focus-visible { outline: 3px solid var(--color-mint-border); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .home-themes .theme-card, .home-themes .theme-icon { transition: none; } .home-themes .theme-card:hover { transform: none; } }
/* The home page is exactly one window tall: the footer sits at the bottom edge and the last part stretches to meet it. */
body:has(.home-themes) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body:has(.home-themes) .page-main { flex: 1 0 auto; width: 100%; display: flex; flex-direction: column; }
.home-themes { flex: 1 0 auto; display: flex; flex-direction: column; }
.home-band:last-child { flex: 1 0 auto; }
/* On wide screens the cards grow with the window height (all of them the same, 74px at the smallest, 176px at the largest), and their icon,
   type and bar grow with them, so the cards cover the page down to the footer. 284px is everything on the page that is not a card row. */
@media (min-width: 901px) {
  .home-themes { --card-h: clamp(74px, calc((100vh - 284px) / 5), 176px); --icon: clamp(38px, calc(var(--card-h) * 0.45), 64px); }
  .home-themes .theme-card { height: var(--card-h); grid-template-columns: var(--icon) minmax(0, 1fr); }
  .home-themes .theme-icon { width: var(--icon); height: var(--icon); font-size: calc(var(--icon) * 0.5); }
}
@media (min-width: 901px) and (min-height: 800px) {      /* tall windows: the cards have room, so a long name may use a third line instead of being cut off */
  .home-themes .theme-name { -webkit-line-clamp: 3; }
}
@media (min-width: 901px) {
  .home-themes .theme-name { font-size: calc(14px + (var(--card-h) - 74px) * 0.045); }
  .home-themes .theme-meta { font-size: calc(11.8px + (var(--card-h) - 74px) * 0.035); }
  .home-themes .theme-card .theme-progress { height: calc(4px + (var(--card-h) - 74px) * 0.04); }
}
@media (max-width: 640px) {      /* phones: two cards per row */
  .home-band { padding: 12px 0 14px; }
  .home-themes .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-themes .theme-card { grid-template-columns: 34px minmax(0, 1fr); height: 116px; padding: 10px; gap: 6px 8px; }
  .home-themes .theme-icon { width: 34px; height: 34px; font-size: 1.05rem; }
  .home-themes .theme-name { font-size: 0.85rem; -webkit-line-clamp: 3; }
  .home-themes .theme-meta { flex-direction: column; gap: 0; font-size: 0.72rem; }
}

.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; }

/* 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 💬 button next to a word */
.sentence-btn {
  border: none; background: rgba(var(--color-primary-rgb), 0.12); border-radius: 8px; width: 28px; height: 28px;
  cursor: pointer; font-size: 0.9rem; margin-left: 6px; vertical-align: middle; line-height: 1; padding: 0;
}
.sentence-btn:hover { background: rgba(var(--color-primary-rgb), 0.22); }
.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 ...). It is a fixed layer behind the
   page, coloured with the page's own tint: sand for "Writing & Speaking themes", sky for "Everyday Basics". Switch it off with THEME_BACKGROUNDS=0. */
body.themed-bg.band-themes { background: var(--color-sand); --pattern-ink: var(--color-sand-ink); }
body.themed-bg.band-basics { background: var(--color-sky); --pattern-ink: var(--color-sky-ink); }
body.themed-bg::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--pattern-ink); opacity: 0.17;
  -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; }
}