/*
 * Installed Android app palette: pearl, graphite, neutral gray and blue.
 * Presentation rules are gated by the native WebView marker. The shared login
 * and live Quiz explicitly consume the palette tokens on the public site too.
 * Structural layout and semantic status colors
 * remain owned by their route stylesheets.
 */

/* Canonical colors are also consumed by shared web/Android login and live Quiz.
   Only custom properties cross that boundary, never native route styling. */
html.android-webview, #login, body.quiz-focus {
  --app-palette-primary: #076AE0;
  --app-palette-primary-strong: #0755B3;
  --app-palette-secondary: #1D1D1F;
  --app-palette-accent: #007AFF;
  --app-palette-background: #F5F5F7;
  --app-palette-surface: #F5F5F7;
  --app-palette-neutral: #AAAAAA;
  --app-palette-divider: #D8D8DC;
  --app-palette-surface-soft: color-mix(in srgb, var(--app-palette-surface) 34%, white);
  --app-palette-paper: #FFFFFF;
  --app-palette-on-primary: #FFFFFF;
  --app-palette-on-secondary: #FFFFFF;
  --app-palette-on-surface: var(--app-palette-text);
  --app-palette-text: #1D1D1F;
  --app-palette-muted: #69696E;
  --app-palette-border: #76767A;
  --app-palette-primary-soft: color-mix(in srgb, var(--app-palette-primary) 12%, transparent);
  --app-palette-primary-line: color-mix(in srgb, var(--app-palette-primary) 35%, var(--app-palette-border));
  --app-palette-accent-soft: color-mix(in srgb, var(--app-palette-accent) 16%, transparent);
  --app-palette-shadow: color-mix(in srgb, var(--app-palette-text) 8%, transparent);
}

/* The public browser welcome must not inherit the installed app's blue palette. */
html.android-webview #landing {
  --welcome-paper: var(--app-palette-paper);
  --welcome-ink: var(--app-palette-text);
  --welcome-accent: var(--app-palette-primary);
  --welcome-accent-strong: var(--app-palette-primary-strong);
  --welcome-on-accent: var(--app-palette-on-primary);
  --welcome-muted: var(--app-palette-muted);
  --welcome-line: var(--app-palette-divider);
  --welcome-surface: var(--app-palette-surface);
  --welcome-shadow: var(--app-palette-shadow);
}

html.android-webview {
  /* Shared legacy tokens used by Home, Capitoli and Quiz. */
  --color-primary: var(--app-palette-primary);
  --color-secondary: var(--app-palette-secondary);
  --color-accent: var(--app-palette-accent);
  --color-dark: var(--app-palette-text);
  --color-light: var(--app-palette-background);
  --color-text: var(--app-palette-text);
  --color-surface: var(--app-palette-surface-soft);
  --color-surface-strong: var(--app-palette-surface);
  --color-shadow: var(--app-palette-shadow);
  --color-card-glow: var(--app-palette-primary-soft);
  --color-soft-shadow: 0 18px 42px var(--app-palette-shadow);
  --gradient-main: linear-gradient(var(--app-palette-primary), var(--app-palette-primary));
  --gradient-dark: linear-gradient(var(--app-palette-primary), var(--app-palette-primary));

  /* Studia quiz tokens. Correct/incorrect states intentionally stay semantic. */
  --ink: var(--app-palette-text);
  --muted: var(--app-palette-muted);
  --line: var(--app-palette-border);
  --purple: var(--app-palette-primary);
  --purple-dark: var(--app-palette-primary-strong);
  --mint: var(--app-palette-surface);
  --lime: var(--app-palette-surface);
  --forest: var(--app-palette-primary-strong);
  --orange: var(--app-palette-accent);
  --surface: var(--app-palette-paper);
  --shadow: 0 17px 42px var(--app-palette-shadow);

  /* Secondary routes. */
  --privacy-canvas: var(--app-palette-background);
  --privacy-paper: var(--app-palette-paper);
  --privacy-ink: var(--app-palette-text);
  --privacy-muted: var(--app-palette-muted);
  --privacy-line: var(--app-palette-border);
  --privacy-soft: var(--app-palette-surface-soft);
  --privacy-teal: var(--app-palette-primary);
  --privacy-teal-dark: var(--app-palette-primary-strong);
  --privacy-focus: var(--app-palette-primary-strong);
  --library-ink: var(--app-palette-text);
  --library-muted: var(--app-palette-muted);
  --library-line: var(--app-palette-border);
  --library-accent: var(--app-palette-primary);
  --library-accent-dark: var(--app-palette-primary-strong);
  --library-surface: var(--app-palette-paper);
  --library-canvas: var(--app-palette-background);

  color-scheme: light;
  background-color: var(--app-palette-background);
  scrollbar-color: var(--app-palette-border) var(--app-palette-background);
}

html.android-webview body {
  color: var(--app-palette-text);
  background-color: var(--app-palette-background);
}

html.android-webview :where(a, button, input, select, textarea):focus-visible {
  outline-color: var(--app-palette-primary-strong);
}

/* Thin neutral chrome; blue belongs to selection and actions. */
html.android-webview .app-header,
html.android-webview .menu-header {
  border-bottom: 1px solid var(--app-palette-divider);
  background: var(--app-palette-background);
  box-shadow: none;
}

html.android-webview .header-btn:hover,
html.android-webview .header-btn:focus-visible,
html.android-webview .menu-close-btn:hover,
html.android-webview .menu-close-btn:focus-visible {
  background: var(--app-palette-primary-soft);
}

html.android-webview .chapter-status,
html.android-webview .menu-brand,
html.android-webview .menu-close-btn {
  color: var(--app-palette-text);
}

html.android-webview .header-btn img,
html.android-webview .status-icon {
  filter: brightness(0);
}

html.android-webview .profile-btn,
html.android-webview .admin-entry {
  border-color: var(--app-palette-primary-line);
  background: var(--app-palette-paper);
  box-shadow: 0 7px 20px var(--app-palette-shadow);
}

html.android-webview .profile-panel,
html.android-webview .menu-panel {
  border-color: var(--app-palette-border);
  background: var(--app-palette-paper);
  color: var(--app-palette-text);
}

html.android-webview .menu-overlay {
  background: rgba(17, 24, 39, 0.62);
}

html.android-webview .menu-item:hover,
html.android-webview .menu-item:focus-visible,
html.android-webview .menu-chapter-item:hover,
html.android-webview .menu-chapter-item:focus-visible,
html.android-webview .menu-chapter-item.active {
  background: var(--app-palette-primary-soft);
}

html.android-webview .menu-chapter-item.active,
html.android-webview .menu-chapter-item.active .menu-chapter-num {
  color: var(--app-palette-primary-strong);
}

/* Home and chapter journey. */
html.android-webview body.app-mode #home,
html.android-webview body.app-mode .lesson-card {
  background-color: var(--app-palette-background);
}

html.android-webview body.app-mode #home .home-start-btn {
  border-color: var(--app-palette-primary-line);
  background:
    radial-gradient(circle at 82% 112%, color-mix(in srgb, var(--app-palette-secondary) 22%, transparent), transparent 44%),
    var(--app-palette-surface);
  box-shadow: 0 15px 34px var(--app-palette-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

html.android-webview body.app-mode #home .home-start-btn::before {
  background: radial-gradient(ellipse at 50% 76%, var(--app-palette-primary-soft), transparent 72%);
}

html.android-webview body.app-mode #home .home-start-btn::after {
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.13), transparent 32%, transparent 72%, var(--app-palette-primary-soft));
}

html.android-webview body.app-mode #home .home-start-open-label {
  border-color: rgba(255, 255, 255, 0.54);
  background: var(--app-palette-secondary);
  color: var(--app-palette-on-secondary);
  text-shadow: none;
  box-shadow: 0 9px 22px rgba(17, 24, 39, 0.18);
}

html.android-webview body.app-mode #home .home-dictionary-entry {
  border-color: var(--app-palette-primary-line);
  background: var(--gradient-dark);
  color: var(--app-palette-on-primary);
  box-shadow: 0 10px 24px var(--app-palette-shadow);
}

html.android-webview body.app-mode #home .home-dictionary-copy small {
  color: var(--app-palette-muted);
}

html.android-webview body.app-mode #home .home-learning-entry:not(.is-errors) {
  --home-learning-accent: var(--app-palette-primary);
}

html.android-webview body.app-mode #home .home-learning-entry {
  border-color: color-mix(in srgb, var(--app-palette-border) 48%, white);
  background: var(--app-palette-paper);
  color: var(--app-palette-text);
}

html.android-webview body.app-mode #home .home-learning-copy small,
html.android-webview body.app-mode #home .watermark-link {
  color: var(--app-palette-muted);
}

html.android-webview body.app-mode .lesson-head {
  border-bottom-color: color-mix(in srgb, var(--app-palette-border) 55%, transparent);
}

html.android-webview body.app-mode .lesson-kicker {
  background: var(--app-palette-secondary);
  color: var(--app-palette-on-secondary);
}

html.android-webview body.app-mode .chapter-card {
  appearance: none;
  padding: 0;
  border-color: color-mix(in srgb, var(--app-palette-border) 72%, white);
  border-radius: 28px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--app-palette-surface) 66%, white), var(--app-palette-surface));
  color: var(--app-palette-text);
  font: inherit;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--app-palette-primary) 14%, transparent);
  transition:
    transform 360ms cubic-bezier(0.2, 0.86, 0.28, 1.08),
    opacity 260ms ease,
    border-color 220ms ease,
    box-shadow 300ms ease;
}

html.android-webview body.app-mode .chapter-card-track {
  overscroll-behavior-x: contain;
  touch-action: pan-y;
  transition: transform 360ms cubic-bezier(0.2, 0.86, 0.28, 1.08);
}

html.android-webview body.app-mode .chapter-card-track.is-dragging {
  transition: none;
}

html.android-webview body.app-mode .chapter-card-track.is-dragging .chapter-card {
  will-change: transform, opacity;
}

html.android-webview body.app-mode .chapter-card:focus-visible {
  outline: 3px solid var(--app-palette-primary-strong);
  outline-offset: 3px;
}

html.android-webview body.app-mode .chapter-card.is-drag-preview:not(.is-active) {
  border-color: var(--app-palette-primary-line);
  box-shadow: 0 17px 36px color-mix(in srgb, var(--app-palette-primary) 22%, transparent);
}

html.android-webview body.app-mode .chapter-card:not(.is-active) .chapter-card-number {
  color: var(--app-palette-on-surface);
  text-shadow: none;
}

html.android-webview body.app-mode .chapter-card:not(.is-active) .chapter-card-title {
  color: var(--app-palette-muted);
  text-shadow: none;
}

html.android-webview body.app-mode .chapter-card-dot {
  cursor: default;
}

html.android-webview body.app-mode .chapter-card.is-active,
html.android-webview body.guest-trial-mode .chapter-card.guest-open,
html.android-webview body.guest-trial-mode .chapter-card.guest-open.is-active {
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--gradient-main);
  color: var(--app-palette-on-primary);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--app-palette-primary) 32%, transparent);
}

html.android-webview body.app-mode .chapter-card.is-active .chapter-card-title,
html.android-webview body.guest-trial-mode .chapter-card.guest-open .chapter-card-title,
html.android-webview body.guest-trial-mode .chapter-card.guest-open .chapter-card-number {
  color: var(--app-palette-on-primary);
  text-shadow: none;
}

html.android-webview body.app-mode .chapter-card.is-active .chapter-card-number,
html.android-webview body.app-mode .chapter-card.is-active .chapter-card-title {
  color: var(--app-palette-on-primary);
}

html.android-webview body.app-mode .chapter-card-dot.is-active,
html.android-webview body.app-mode .card-selector-hint-dot {
  background: var(--app-palette-primary);
  box-shadow: 0 0 0 6px var(--app-palette-primary-soft);
}

html.android-webview body.app-mode .dash-engine::before,
html.android-webview body.app-mode .engine-flash {
  background: radial-gradient(circle, var(--app-palette-primary-soft) 0%, transparent 66%);
}

html.android-webview body.app-mode .lesson-tool-exam {
  background: var(--app-palette-primary);
  color: var(--app-palette-on-primary);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--app-palette-primary) 24%, transparent);
}

html.android-webview body.app-mode .lesson-tool-quiz {
  border-color: var(--app-palette-border);
  background: var(--app-palette-secondary);
  color: var(--app-palette-on-secondary);
  text-shadow: none;
  box-shadow: 0 12px 26px var(--app-palette-shadow);
}

/* Timed Quiz. Green and red answer semantics are preserved. */
html.android-webview body.quiz-page {
  background: var(--app-palette-background);
}

html.android-webview .icon-btn,
html.android-webview .text-size-control,
html.android-webview .question-area,
html.android-webview #prev-btn,
html.android-webview #next-btn,
html.android-webview .explanation-card,
html.android-webview .modal-card {
  border-color: color-mix(in srgb, var(--app-palette-border) 55%, white);
  background-color: var(--app-palette-paper);
  color: var(--app-palette-text);
}

html.android-webview body:not(.quiz-focus) #timer {
  background: var(--app-palette-primary) !important; /* Override the legacy live timer's inline emphasis. */
  color: var(--app-palette-on-primary);
}

html.android-webview body:not(.quiz-focus) .progress-dot--current,
html.android-webview .selected,
html.android-webview .nav-primary.is-finish {
  background: var(--app-palette-primary) !important;
  color: var(--app-palette-on-primary);
}

html.android-webview .progress-dot--current {
  border-color: var(--app-palette-paper);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--app-palette-primary) 36%, transparent);
}

html.android-webview .question-area {
  box-shadow: 0 9px 25px var(--app-palette-shadow);
}

html.android-webview .explanation-btn {
  background: var(--app-palette-primary);
  color: var(--app-palette-on-primary);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--app-palette-primary) 24%, transparent);
}

html.android-webview .quiz-click-hint {
  border-color: var(--app-palette-primary-line);
  color: var(--app-palette-primary-strong);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--app-palette-primary) 16%, transparent);
}

html.android-webview .quiz-click-hint-hand {
  background: var(--app-palette-primary-soft);
}

html.android-webview .quiz-audio-explanation,
html.android-webview .study-explanation-player {
  --audio-player-start: var(--app-palette-primary);
  --audio-player-mid: var(--app-palette-primary);
  --audio-player-end: var(--app-palette-primary);
  --audio-player-line: var(--app-palette-primary-line);
  --audio-player-glow: color-mix(in srgb, var(--app-palette-primary) 26%, transparent);
  --audio-player-track: var(--app-palette-surface-soft);
  color: var(--app-palette-text);
}

html.android-webview .quiz-audio-explanation.is-interrupted,
html.android-webview .study-explanation-player.is-interrupted {
  --audio-player-start: var(--app-palette-surface);
  --audio-player-mid: color-mix(in srgb, var(--app-palette-surface) 72%, white);
  --audio-player-end: var(--app-palette-primary);
  --audio-player-line: var(--app-palette-primary-line);
  --audio-player-glow: var(--app-palette-shadow);
  --audio-player-track: var(--app-palette-surface-soft);
}

html.android-webview .quiz-audio-play,
html.android-webview .study-explanation-play {
  color: var(--app-palette-on-primary);
}

html.android-webview .audio-player-icon {
  filter: brightness(0) invert(1);
}

html.android-webview .quiz-audio-progress,
html.android-webview .study-explanation-progress {
  --audio-player-mid: var(--app-palette-primary-strong);
}

html.android-webview .quiz-audio-speed,
html.android-webview .study-explanation-speed {
  border-color: var(--app-palette-primary-line);
  background: var(--app-palette-surface-soft);
  color: var(--app-palette-primary-strong);
}

html.android-webview .quiz-help-shell {
  --magic-help: var(--app-palette-primary);
  --magic-help-soft: var(--app-palette-primary-line);
  --magic-help-card: var(--app-palette-primary-strong);
  --magic-help-header: var(--app-palette-text);
  border-color: var(--app-palette-primary-line);
}

/* Studia quiz. */
html.android-webview body.study-page {
  background-color: var(--app-palette-background);
  background-image:
    linear-gradient(color-mix(in srgb, var(--app-palette-primary) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--app-palette-primary) 3.5%, transparent) 1px, transparent 1px);
  background-size: 68px 68px;
}

html.android-webview .study-header,
html.android-webview .font-library-header {
  border-bottom-color: var(--app-palette-divider);
  background: var(--app-palette-background);
  color: var(--app-palette-text);
  box-shadow: none;
}

html.android-webview .study-heading small,
html.android-webview .font-library-heading small {
  color: var(--app-palette-muted);
}

html.android-webview .study-heading p,
html.android-webview .font-library-heading p {
  color: var(--app-palette-muted);
}

html.android-webview .study-icon-button,
html.android-webview .font-library-back {
  border-color: var(--app-palette-primary-line);
  background: var(--app-palette-paper);
}

html.android-webview .study-practice-link,
html.android-webview .study-action-help,
html.android-webview .study-error button {
  border-color: var(--app-palette-primary-line);
  background: var(--app-palette-primary);
  color: var(--app-palette-on-primary);
}

html.android-webview .study-intro {
  border-color: var(--app-palette-primary-line);
  box-shadow: 0 24px 56px var(--app-palette-shadow);
}

html.android-webview .study-chapter {
  border-color: color-mix(in srgb, var(--app-palette-border) 58%, white);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--app-palette-surface) 44%, transparent), transparent 43%),
    var(--app-palette-paper);
  color: var(--app-palette-text);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
}

html.android-webview .study-chapter::before {
  background: linear-gradient(90deg, transparent, var(--app-palette-primary), transparent);
}

html.android-webview .study-chapter-number {
  border-color: var(--app-palette-primary-line);
  background: var(--app-palette-surface-soft);
  color: var(--app-palette-primary-strong);
}

html.android-webview .study-chapter-arrow,
html.android-webview .study-reader-toolbar > div > span,
html.android-webview .study-help-label {
  color: var(--app-palette-primary-strong);
}

html.android-webview .study-search:focus-within,
html.android-webview .study-action:hover:not(:disabled),
html.android-webview .study-action:focus-visible,
html.android-webview .study-word:hover,
html.android-webview .study-word:focus-visible {
  border-color: var(--app-palette-primary-line);
  background: var(--app-palette-surface-soft);
  box-shadow: 0 0 0 3px var(--app-palette-primary-soft);
}

html.android-webview .study-question-card,
html.android-webview .study-search,
html.android-webview .study-action,
html.android-webview .study-word,
html.android-webview .study-word-detail {
  border-color: color-mix(in srgb, var(--app-palette-border) 54%, white);
  background-color: var(--app-palette-paper);
}

html.android-webview .study-question-number,
html.android-webview .study-context span,
html.android-webview .study-word-listen {
  background: var(--app-palette-surface-soft);
  color: var(--app-palette-primary-strong);
}

html.android-webview .study-help {
  background: var(--app-palette-surface-soft);
}

/* A help action is a labelled primary button, not a generic white study pill. */
html.android-webview .study-action.study-action-help {
  background: var(--app-palette-primary);
  color: var(--app-palette-on-primary);
  border-color: var(--app-palette-primary);
}
html.android-webview .study-action.study-action-help:hover:not(:disabled),
html.android-webview .study-action.study-action-help:focus-visible,
html.android-webview .study-action.study-action-help[aria-expanded="true"] {
  background: var(--app-palette-primary-strong);
  color: var(--app-palette-on-primary);
}

/* Dictionary dashboard. */
html.android-webview .magic-dictionary-screen {
  --dictionary-violet: var(--app-palette-primary);
  --dictionary-violet-dark: var(--app-palette-primary-strong);
  --dictionary-surface: var(--app-palette-paper);
  --dictionary-border: var(--app-palette-border);
  background: var(--app-palette-background);
}

html.android-webview .magic-dictionary-header {
  border-bottom-color: var(--app-palette-divider);
  background: var(--app-palette-background);
}

html.android-webview .magic-dictionary-header h1 {
  color: var(--app-palette-text);
}

html.android-webview .magic-dictionary-language-badge {
  border-color: color-mix(in srgb, var(--app-palette-surface) 72%, white);
  background: rgba(255, 255, 255, 0.14);
  color: var(--app-palette-text);
}

html.android-webview .magic-dictionary-language-badge i,
html.android-webview .magic-dictionary-eyebrow i {
  background: var(--app-palette-primary);
}

html.android-webview .magic-dictionary-overview {
  color: var(--app-palette-text);
  border-color: var(--app-palette-primary-line);
  background: var(--app-palette-paper);
  box-shadow: 0 20px 42px var(--app-palette-shadow);
}

html.android-webview .magic-dictionary-eyebrow,
html.android-webview .magic-dictionary-overview > p,
html.android-webview .magic-dictionary-metrics span {
  color: var(--app-palette-muted);
}

html.android-webview .magic-dictionary-metrics strong {
  color: var(--app-palette-text);
}

html.android-webview .magic-dictionary-plan,
html.android-webview .magic-dictionary-featured,
html.android-webview .magic-dictionary-word {
  border-color: color-mix(in srgb, var(--app-palette-border) 58%, white);
  background: var(--app-palette-paper);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.09);
}

html.android-webview .magic-dictionary-practice,
html.android-webview .magic-dictionary-filters button.is-active {
  background: var(--app-palette-primary);
  color: var(--app-palette-on-primary);
}

/* Statistics and Errori workspace: brand changes, semantic statuses do not. */
html.android-webview #learningInsightsScreen {
  --li-action: var(--app-palette-primary);
  --li-action-dark: var(--app-palette-primary-strong);
  --li-ink: var(--app-palette-text);
  --li-navy: var(--app-palette-primary-strong);
  --li-blue-soft: var(--app-palette-surface-soft);
  --li-muted: var(--app-palette-muted);
  --li-page: var(--app-palette-background);
  --li-surface: var(--app-palette-paper);
  --li-line: color-mix(in srgb, var(--app-palette-border) 58%, white);
  --li-line-strong: var(--app-palette-border);
  --li-shadow: 0 16px 38px rgba(17, 24, 39, 0.11);
  --li-shadow-soft: 0 8px 22px rgba(17, 24, 39, 0.08);
}

html.android-webview #learningInsightsScreen .li-topbar {
  border-bottom-color: var(--app-palette-divider);
  background: var(--app-palette-background);
}

html.android-webview #learningInsightsScreen .li-brand strong {
  color: var(--app-palette-text);
}

html.android-webview #learningInsightsScreen .li-brand small {
  color: var(--app-palette-muted);
}

html.android-webview #learningInsightsScreen .li-route-nav .d-btn[aria-current="page"],
html.android-webview #learningInsightsScreen .li-lenses .d-btn[aria-selected="true"],
html.android-webview #learningInsightsScreen .li-plan-number {
  background: var(--app-palette-surface);
  color: var(--app-palette-text);
}

html.android-webview #learningInsightsScreen .li-primary-action.d-btn,
html.android-webview #learningInsightsScreen .li-review-now .li-primary-action.d-btn {
  border-color: var(--app-palette-primary-strong);
  background: var(--app-palette-primary);
  color: var(--app-palette-on-primary);
}

html.android-webview #learningInsightsScreen .li-review-now .li-kicker,
html.android-webview #learningInsightsScreen .li-review-now > p,
html.android-webview #learningInsightsScreen .li-review-now .li-bangla-title {
  color: var(--app-palette-muted);
}

html.android-webview #learningInsightsScreen .li-primary-action.d-btn img {
  filter: brightness(0) invert(1);
}

html.android-webview #learningInsightsScreen .li-review-now {
  border-color: var(--app-palette-primary-strong);
  background: var(--app-palette-paper);
  color: var(--app-palette-text);
}

html.android-webview #learningInsightsScreen .li-chapter-cell.is-selected {
  border-color: var(--app-palette-primary) !important;
  background: var(--app-palette-primary-soft) !important;
  box-shadow: 0 0 0 2px var(--app-palette-primary-soft);
}

/* Privacy, font library and the Admin audio utility share the installed shell. */
html.android-webview body.privacy-page,
html.android-webview body.font-library-page,
html.android-webview body.audio-admin-page {
  background-color: var(--app-palette-background);
}

html.android-webview .privacy-header {
  border-bottom-color: var(--app-palette-divider);
  background: var(--app-palette-background);
  color: var(--app-palette-text);
}

html.android-webview .privacy-brand-copy small,
html.android-webview .privacy-header-nav a {
  color: var(--app-palette-muted);
}

html.android-webview .privacy-brand-mark,
html.android-webview .privacy-section--rights,
html.android-webview .privacy-contact-card,
html.android-webview .font-library-sheet,
html.android-webview .audio-admin-chapter,
html.android-webview .audio-admin-question,
html.android-webview .audio-admin-toolbar input,
html.android-webview .audio-admin-filter-trigger,
html.android-webview .audio-admin-filter-menu {
  border-color: color-mix(in srgb, var(--app-palette-border) 60%, white);
  background-color: var(--app-palette-paper);
}

html.android-webview .privacy-number,
html.android-webview .privacy-eyebrow,
html.android-webview .privacy-text-link,
html.android-webview .privacy-hero h1 em,
html.android-webview .privacy-index a span,
html.android-webview .privacy-prose li::marker,
html.android-webview .font-library-kicker,
html.android-webview .font-specimen-role,
html.android-webview .audio-admin-head > p {
  color: var(--app-palette-primary-strong);
}

html.android-webview .font-library-count,
html.android-webview .audio-admin-filter-option.is-selected {
  background: var(--app-palette-surface-soft);
  color: var(--app-palette-primary-strong);
}

html.android-webview .audio-admin-back:hover,
html.android-webview .audio-admin-back:focus-visible,
html.android-webview .audio-admin-chapter:hover,
html.android-webview .audio-admin-chapter:focus-visible,
html.android-webview .audio-admin-filter-trigger:hover,
html.android-webview .audio-admin-filter.is-open .audio-admin-filter-trigger {
  border-color: var(--app-palette-primary-strong);
  box-shadow: 0 0 0 3px var(--app-palette-primary-soft);
}

/* Section-only top bars: shared native variant, never regular browser geometry. */
html.android-webview .app-header { height: 48px; }
html.android-webview body.app-mode { padding-top: 48px; }
html.android-webview body.app-mode #home { height: calc(100dvh - 48px); }
html.android-webview :is(.profile-btn, .admin-entry) { top: calc(env(safe-area-inset-top, 0px) + 2px); }
html.android-webview :is(.study-header, .font-library-header, .magic-dictionary-header) {
  min-height: 52px; padding: 4px 12px; gap: 10px;
  border-bottom: 1px solid var(--app-palette-divider); backdrop-filter: none;
}
html.android-webview :is(.study-heading, .font-library-heading) :is(small, p),
html.android-webview .magic-dictionary-header-title > small,
html.android-webview #learningInsightsScreen .li-brand small { display: none; }
html.android-webview :is(.study-heading, .font-library-heading) h1,
html.android-webview .magic-dictionary-header h1 { margin: 0; font-size: 18px; line-height: 1.2; color: var(--app-palette-text); }
html.android-webview :is(.study-icon-button, .font-library-back) { width: 44px; height: 44px; border-radius: 12px; box-shadow: none; }
html.android-webview #learningInsightsScreen { --li-topbar-height: 52px; }
html.android-webview #learningInsightsScreen .li-topbar { height: calc(var(--li-topbar-height) + var(--li-safe-top)); }
html.android-webview #learningInsightsScreen .li-topbar .d-btn { min-height: 44px; }
html.android-webview #learningInsightsScreen .li-brand img { width: 28px; height: 28px; }
html.android-webview #learningInsightsScreen .li-brand strong { font-size: 18px; }
html.android-webview .admin-topbar { min-height: 52px; margin-bottom: 12px; }
html.android-webview .admin-title small { display: none; }
html.android-webview .admin-title span { font-size: 18px; line-height: 1.2; }
html.android-webview .admin-title .admin-profile-logo { width: 28px; height: 28px; box-shadow: none; }
html.android-webview .admin-icon-btn { box-shadow: none; border-radius: 12px; }

/* Reuse the chapter-action symbols in section chrome. Empty mask content is
   decorative; the existing title remains the only accessible heading. */
html.android-webview .study-heading { --section-icon: url("/icons/study_quiz.svg"); }
html.android-webview .magic-dictionary-header-title { --section-icon: url("/icons/dictionary.svg"); }
html.android-webview .top-bar h2,
html.android-webview #quizModeOverlay .qms-title { --section-icon: url("/icons/do_quiz.svg"); }
html.android-webview[data-native-quiz-section="exam"] .top-bar h2,
html.android-webview #examModeOverlay .qms-title { --section-icon: url("/icons/exam.svg"); }

html.android-webview :is(.study-heading, .magic-dictionary-header-title, .top-bar h2, .qms-title) {
  position: relative;
  min-width: 0;
  padding-inline-start: 28px;
}
html.android-webview :is(.study-heading, .magic-dictionary-header-title, .top-bar h2, .qms-title)::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: var(--section-icon) center / contain no-repeat;
  mask: var(--section-icon) center / contain no-repeat;
  pointer-events: none;
}
html.android-webview :is(.study-heading, .magic-dictionary-header-title, .qms-title) {
  color: var(--app-palette-text);
}
html.android-webview .magic-dictionary-header h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Reserve separate columns: the new symbol must never cover timer or A-/A+. */
html.android-webview .top-bar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 6px;
}
html.android-webview .top-bar h2 {
  left: auto;
  transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
  font-size: 18px;
  color: var(--app-palette-text);
}
html.android-webview .top-bar .exit-btn { margin-right: 0; }
html.android-webview .qms-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
}
html.android-webview .qms-back { width: 44px; height: 44px; }
html.android-webview .qms-title {
  left: auto;
  transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.android-webview #learningInsightsScreen :is(.li-brand, .li-route-nav) img {
  flex-shrink: 0;
  object-fit: contain;
}

@media (forced-colors: active) {
  html.android-webview :where(a, button, input, select, textarea):focus-visible {
    outline-color: Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.android-webview body.app-mode .chapter-card-track,
  html.android-webview body.app-mode .chapter-card {
    transition-duration: 1ms !important; /* Motion-safe app theme override. */
  }
}