/* QuoteWise UI contract. Load after page styles; see docs/frontend-design.md. */
@import url('./design-tokens.css?v=20261021-ui8');
@import url('../fonts/wenkai/wenkai.css');
@font-face {
    font-family: 'QuoteWise Icons';
    src: url('../fonts/material-symbols-rounded.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: block;
}

html.qw-ui {
    color-scheme: light;
    /* Existing components consume these aliases during incremental maintenance. */
    --font-chinese: var(--qw-font-ui); --font-english: var(--qw-font-ui); --font-english-italic: var(--qw-font-ui);
    --zh: var(--qw-font-ui); --en: var(--qw-font-ui);
    --bg-paper: var(--qw-paper); --bg-color: var(--qw-paper); --bg-gradient-end: var(--qw-paper);
    --paper: var(--qw-paper); --paper2: var(--qw-surface-soft); --card-bg: var(--qw-surface); --card: var(--qw-surface);
    --primary-color: var(--qw-accent); --secondary-color: var(--qw-bronze); --accent-red: var(--qw-danger);
    --text-color: var(--qw-ink); --text-secondary: var(--qw-muted); --border-color: var(--qw-line); --glass-bg: var(--qw-glass);
    --ink: var(--qw-ink); --ink2: var(--qw-muted); --ink-soft: var(--qw-muted); --line: var(--qw-line);
    --moss: var(--qw-accent); --moss-d: var(--qw-accent); --moss-l: var(--qw-accent-soft);
    --bronze: var(--qw-bronze); --bronze-d: var(--qw-warning); --red: var(--qw-danger);
    --green: var(--qw-accent); --soft: var(--qw-accent-soft); --muted: var(--qw-muted); --gold: var(--qw-warning);
    --admin-bg: var(--qw-paper); --admin-surface: var(--qw-surface); --admin-ink: var(--qw-ink);
    --admin-muted: var(--qw-muted); --admin-line: var(--qw-line); --admin-accent: var(--qw-accent);
    --admin-accent-soft: var(--qw-accent-soft); --admin-danger: var(--qw-danger);
    --help-ink: var(--qw-ink); --help-muted: var(--qw-muted); --help-line: var(--qw-line);
    --help-surface: var(--qw-surface); --help-soft: var(--qw-surface-soft); --help-primary: var(--qw-accent);
    --help-primary-dark: var(--qw-accent-hover); --help-accent: var(--qw-bronze);
    --success-color: var(--qw-success); --error-color: var(--qw-danger); --warning-color: var(--qw-warning);
    --gradient-green: var(--qw-accent);
    --gradient-orange-pink: var(--gradient-green); --gradient-blue-purple: var(--gradient-green);
    --text-main: var(--qw-ink); --text-muted: var(--qw-muted); --text-primary: var(--qw-ink);
    --primary-green: var(--qw-accent); --primary-green-light: var(--qw-accent-soft);
    --secondary-brown: var(--qw-bronze); --border: var(--qw-line);
    --accent-green: var(--qw-success); --accent-blue: var(--qw-info); --accent-purple: var(--qw-accent);
    --ru-primary: var(--qw-accent); --ru-dark: var(--qw-accent-hover); --ru-gold: var(--qw-bronze);
    --ru-gold-light: var(--qw-warning-soft); --ru-accent: var(--qw-danger);
    scroll-padding-top: var(--qw-content-top);
    accent-color: var(--qw-accent);
}

.qw-ui *, .qw-ui *::before, .qw-ui *::after { box-sizing: border-box; }
.qw-ui body { font-family: var(--qw-font-ui); font-size: 16px; color: var(--qw-ink); background: var(--qw-paper); line-height: 1.65; }
.qw-ui :is(button, input, select, textarea, label, summary) { font-family: var(--qw-font-ui); }
.qw-ui :is(pre, code, kbd, samp) { font-family: var(--qw-font-mono); }
.qw-ui :is(.diff pre, .ai-suggestion pre, .qw-help-card) { font-family: var(--qw-font-ui); }
.qw-ui :is(h1, h2, h3, h4) { text-wrap: balance; }
.qw-ui :is(button, a, input, select, textarea, summary) { -webkit-tap-highlight-color: transparent; }
.qw-ui :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--qw-accent); outline-offset: 4px;
}
.qw-ui ::selection { background: var(--qw-accent-soft); color: var(--qw-ink); }
.qw-ui :is(button, .btn, .hero-btn, [class^='btn-'], [class*=' btn-'], .help-button, [role='button']):not(:where(.quote-main-card .action-btn)) {
    border-radius: var(--qw-radius-control);
    transition: background-color var(--qw-motion) var(--qw-ease), color var(--qw-motion) var(--qw-ease),
        border-color var(--qw-motion) var(--qw-ease), box-shadow var(--qw-motion) var(--qw-ease), transform var(--qw-motion) var(--qw-ease);
}
.qw-ui :is(button, .btn, .help-button):not(.pell-button):not(.qw-color-swatch):not(:where(.quote-main-card .action-btn)) { min-height: var(--qw-control-size); }
.qw-ui :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']), select, textarea) {
    border-radius: var(--qw-radius-control); border-color: var(--qw-line); color: var(--qw-ink);
    background-color: var(--qw-surface); font: inherit; min-width: 0; max-width: 100%;
}
.qw-ui :is(input, select, textarea):focus { border-color: var(--qw-accent); }
.qw-ui :is(input, select):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']) { min-height: var(--qw-control-size); }
.qw-ui :is(button, .btn, [role='button']):disabled { cursor: not-allowed; opacity: .5; transform: none; }
.qw-ui :is(button, .btn, [role='button']):active:not(:disabled):not(:where(.quote-main-card .action-btn)) { transform: translateY(1px); }
.qw-ui a { text-underline-offset: 4px; }
@media (hover: hover) {
    .qw-ui :is(button, .btn, .help-button):hover:not(:disabled):not(:where(.quote-main-card .action-btn)) { box-shadow: var(--qw-shadow-card); }
}

/* One local rounded icon family, including widgets created after initial load. */
html.qw-ui :is(.material-icons, .material-symbols-outlined, .material-symbols-rounded, .mi, .qw-icon) {
    font-family: 'QuoteWise Icons' !important; font-weight: 400 !important; font-style: normal !important;
    font-size: 22px; line-height: 1; letter-spacing: normal; text-transform: none;
    font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
    display: inline-block; vertical-align: middle; white-space: nowrap; word-wrap: normal;
    direction: ltr; flex-shrink: 0;
}
.qw-ui .auth-buttons .material-icons::before, .qw-ui .auth-modal-close .material-icons::before { content: none; }
.qw-ui .material-icons::before { font-family: inherit; }

/* Cards and panels share a surface; message layout rows are not surfaces. */
.qw-ui :is(.daily-card, .category-card, .quote-card, .module-card, .quiz-card, .sidebar-card,
    .detail-content-card, .related-card, .comments-section, .profile-section, .profile-card,
    .manual-item, .doc-block, .doc-toc, .help-ai-copy, .help-ai-panel, .feedback-panel, .feedback-entry,
    .panel, .metric, .group, .section, .hist-item, .card-face, .critique-card, .rp-section,
    .qcard, .task, .lcard, .daily, .learning-card, .stat-card, .settings-card, .reminder-card,
    .achievement-card, .forum-card, .post-card, .review-table-wrap, .sidebar, .results-panel,
    [class$='-card'], [class*='-card '], .card):not(:where(.quote-main-card, .chat-msg)) {
    border-radius: var(--qw-radius-panel); border: 1px solid var(--qw-line);
    background-color: var(--qw-surface); box-shadow: var(--qw-shadow-card);
}
.qw-ui :is(.card-face, .classic-card, .featured-quote, .quote-main-card) { border-radius: var(--qw-radius-hero); }
.qw-ui :is(.category-card, .module-card, a.quote-card, a.related-card) {
    transition: transform var(--qw-motion) var(--qw-ease), box-shadow var(--qw-motion) var(--qw-ease), border-color var(--qw-motion) var(--qw-ease);
}
@media (hover: hover) {
    .qw-ui :is(.category-card, .module-card, a.quote-card, a.related-card):hover {
        transform: translateY(-3px); border-color: var(--qw-accent); box-shadow: var(--qw-shadow-hover);
    }
}
/* Remove ornaments, not meaningful table/section separators, progress or validation. */
.qw-ui :is(.daily-card, .module-card, .quiz-card, .sidebar-card, .results-panel, .quote-card, .related-card,
    .category-card, .comments-section, .help-ai-copy, .group h3, .sec-h)::before { content: none; display: none; }
.qw-ui :is(.quote-block, .explanation, .hist-note, .feedback-current-value, .example-sentence,
    .workspace-entry, .comment-content blockquote, .assistant-message-ai blockquote) {
    border: 1px solid var(--qw-line); border-radius: var(--qw-radius-control);
}
.qw-ui :is(.flashcard-front, .flashcard-back, .help-ai-copy) { border-top: 1px solid var(--qw-line); }
.qw-ui :is(.quote-block, .hist-note, .feedback-current-value) { background: var(--qw-surface-soft); }
.qw-ui :is(.section-title, .field-label)::before, .qw-ui :is(.section-title, .field-label)::after,
.qw-ui .page-title h1::after, .qw-ui .comments-empty::before { content: none; display: none; }

/* Practice menu is the reference for every dropdown, dialog and floating surface. */
.qw-ui :is(.practice-dropdown, .user-dropdown, .zoom-dropdown, .pinyin-tooltip, .qw-select-popover, .qw-glass-menu,
    .auth-modal, .admin-modal, .feedback-modal, .modal-content, .qw-help-card, .ai-chat-window,
    dialog, .settings-panel, .reading-panel) {
    border-radius: var(--qw-radius-panel); border: 1px solid var(--qw-line);
    background: var(--qw-menu-glass); color: var(--qw-ink); box-shadow: var(--qw-shadow-float);
    backdrop-filter: blur(var(--qw-menu-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--qw-menu-blur)) saturate(140%);
}
.qw-ui :is(.practice-dropdown-item, .user-dropdown-item, .zoom-option, .qw-select-option, .doc-toc a) {
    border-radius: var(--qw-radius-control); min-height: var(--qw-control-size);
    transition: background var(--qw-motion) var(--qw-ease), color var(--qw-motion) var(--qw-ease);
}
.qw-ui :is(.practice-dropdown-item, .user-dropdown-item, .zoom-option, .qw-select-option, .doc-toc a):is(:hover, :focus-visible) {
    background: var(--qw-accent-soft); color: var(--qw-accent-hover);
}
.qw-ui .practice-dropdown {
    position: fixed; left: var(--qw-practice-left, 16px); top: var(--qw-practice-top, 108px); right: auto;
    padding: 8px; width: min(264px, calc(100vw - 32px));
    max-height: calc(100dvh - var(--qw-bottom-inset) - 32px); overflow-y: auto;
    animation: qw-dropdown-in var(--qw-motion) var(--qw-ease);
}
@keyframes qw-dropdown-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.qw-ui .practice-dropdown-item { gap: 12px; padding: 12px; }
.qw-ui .practice-dropdown-title { padding: 8px 12px; font-size: 13px; letter-spacing: .04em; }
.qw-ui .practice-dropdown-item strong { font-size: 16px; }
.qw-ui .practice-dropdown-item .material-icons { font-size: 22px; color: var(--qw-accent); }
.qw-ui :is(.zoom-option.active, .qw-select-option[aria-selected='true']) { color: var(--qw-accent-hover); background: var(--qw-accent-soft); }
.qw-ui .qw-select { display: inline-grid; grid-template-areas: 'control'; min-width: 0; max-width: 100%; vertical-align: middle; }
.qw-ui .qw-select > * { grid-area: control; min-width: 0; max-width: 100%; }
.qw-ui .qw-select .qw-native-select { opacity: 0; pointer-events: none; width: 100%; }
.qw-ui .qw-select-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    padding: 9px 12px; border: 1px solid var(--qw-line); border-radius: var(--qw-radius-control);
    background: var(--qw-surface); color: var(--qw-ink); font: inherit; text-align: left; cursor: pointer;
}
.qw-ui .qw-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qw-ui .qw-select-trigger { box-sizing: border-box; overflow: hidden; }
.qw-ui .qw-select-trigger .qw-select-value { flex: 1 1 auto; min-width: 0; }
.qw-ui .qw-select-trigger .qw-icon {
    position: static !important; inset: auto !important; transform: none !important;
    flex: 0 0 22px; width: 22px; margin: 0; text-align: center; line-height: 1;
}
.qw-ui select:not(.qw-native-select) { padding-right: 2.5rem; background-position: right 12px center; }
.qw-ui .footer { background: #fff; color: var(--qw-ink); }
.qw-ui .qw-select-trigger[aria-expanded='true'] { border-color: var(--qw-accent); }
.qw-ui .qw-select-trigger .qw-icon { color: var(--qw-muted); }
.qw-ui .qw-select-popover { position: fixed; z-index: 15000; padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
.qw-ui :is(.qw-select[hidden], .qw-select-popover[hidden]) { display: none !important; }
.qw-ui .qw-select-option { display: flex; align-items: center; padding: 9px 12px; cursor: pointer; overflow-wrap: anywhere; }
.qw-ui .qw-select-option.is-active { background: var(--qw-accent-soft); color: var(--qw-accent-hover); }
.qw-ui .qw-select-option[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }
.qw-ui .qw-select-group { padding: 9px 12px 5px; font-size: .8rem; color: var(--qw-muted); }
.qw-ui .qw-portaled-menu {
    position: fixed; left: var(--qw-menu-left); top: var(--qw-menu-top); right: auto;
    width: max-content; max-width: calc(100vw - 32px); max-height: calc(100dvh - var(--qw-bottom-inset) - 32px);
    overflow-y: auto; transform: none; z-index: 15000;
}
.qw-ui .view-history-item:hover { background: var(--qw-accent-soft); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .qw-ui :is(.practice-dropdown, .user-dropdown, .zoom-dropdown, .pinyin-tooltip, .qw-select-popover, .qw-glass-menu,
        .auth-modal, .admin-modal, .feedback-modal, .modal-content, .qw-help-card, .ai-chat-window,
        dialog, .settings-panel, .reading-panel) { background: var(--qw-surface); }
}
.qw-ui .lang-badge { background: var(--qw-accent-soft); color: var(--qw-accent); }
.qw-ui .auth-error { background: var(--qw-danger-soft); color: var(--qw-danger); border-color: var(--qw-danger); }
.qw-ui :is(.auth-modal-header, .ai-chat-header) { background: var(--qw-accent-soft); color: var(--qw-ink); }
.qw-ui :is(.auth-submit-btn, .btn-primary, .help-button:not(.secondary), button.primary,
    .btn-approve, .btn-edit, .act-primary, .r-restart, .hero-btn-primary) {
    background: var(--qw-accent); color: white; border-color: var(--qw-accent);
}
.qw-ui :is(.auth-submit-btn, .btn-primary, .help-button:not(.secondary), button.primary,
    .btn-approve, .btn-edit, .act-primary, .r-restart, .hero-btn-primary):hover:not(:disabled) { background: var(--qw-accent-hover); }
.qw-ui :is(.btn-outline, .hero-btn-outline, .act-outline, .r-back) { color: var(--qw-accent); background: var(--qw-surface); border-color: var(--qw-line); }
.qw-ui :is(.btn-outline, .hero-btn-outline, .act-outline, .r-back):hover { background: var(--qw-accent-soft); }
.qw-ui :is(.module-icon, .category-icon, .stat-card) :is(.material-icons, .qw-icon) { color: var(--qw-accent); }
.qw-ui :is(.badge, .status-badge, .risk-tag, .cat-pill, .chip, .rp-tag, .learning-tag) { border-radius: var(--qw-radius-pill); }
.qw-ui :is(.success, .correct, .diff-new, .status-resolved, .b-approved) { color: var(--qw-success); background-color: var(--qw-success-soft); }
.qw-ui :is(.error, .wrong, .incorrect, .diff-old, .status-rejected, .b-flagged) { color: var(--qw-danger); background-color: var(--qw-danger-soft); }
.qw-ui :is(.warning, .status-pending, .b-pending) { color: var(--qw-warning); }
.qw-ui :is(.status-in_review, .b-edited) { color: var(--qw-info); background-color: var(--qw-info-soft); }

/* Floating frames are pills; their nested tabs and buttons share a control radius. */
.qw-ui :is(.learning-float-nav, .help-local-nav, .cat-nav) {
    position: fixed; left: 50%; transform: translateX(-50%); display: flex; align-items: center; width: max-content;
    top: calc(var(--qw-header-height) + var(--qw-float-gap)) !important;
    max-width: calc(100% - 32px); padding: 6px; gap: 4px;
    border: 1px solid var(--qw-line); border-radius: var(--qw-radius-pill);
    background: var(--qw-glass); box-shadow: var(--qw-shadow-float);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; z-index: 70;
}
.qw-ui :is(.learning-float-nav, .help-local-nav) a, .qw-ui :is(.mode-tab, .cat-nav button) {
    border-radius: var(--qw-radius-pill); min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--qw-muted); background: transparent; box-shadow: none; flex-shrink: 0;
}
.qw-ui :is(.learning-float-nav, .help-local-nav) a.active, .qw-ui :is(.mode-tab, .cat-nav button).active {
    background: var(--qw-accent); color: white; box-shadow: var(--qw-shadow-card);
}
.qw-ui .mode-bar {
    top: var(--qw-mode-top) !important; left: 50%; right: auto; transform: translateX(-50%);
    width: max-content; max-width: calc(100% - 32px); padding: 6px; gap: 4px; z-index: 70;
    background: var(--qw-glass); border: 1px solid var(--qw-line); border-radius: var(--qw-radius-pill);
    box-shadow: var(--qw-shadow-float); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.qw-ui :is(.learning-container, .category-container, .help-shell, .page-layout, .tq-layout) { padding-top: var(--qw-content-padding) !important; }
html.qw-ui body :is(.detail-container, .browse-container, .search-page-container, .favorites-container, .terms-container) { margin-top: var(--qw-content-padding); }
.qw-ui[data-qw-page='pages/ai-assistant'] body { padding-top: 0; }
.qw-ui .ai-container { margin-top: var(--qw-content-padding); }
.qw-ui .profile-container { padding-top: var(--qw-content-padding); }
.qw-ui[data-qw-page='pages/russian'] main { padding-top: var(--qw-header-height); }
.qw-ui .russian-hero { background: var(--qw-accent-soft); color: var(--qw-ink); box-shadow: none; }
.qw-ui .russian-hero :is(h1, h2, p, .hero-flag-icon, .hero-subtitle) { color: var(--qw-ink); }
.qw-ui .russian-hero::before { content: none; }
.qw-ui .stage { padding-top: var(--qw-content-top); padding-bottom: max(150px, calc(var(--qw-bottom-controls) + 24px)); }
.qw-ui :is(.tq-left, .tq-right) { padding-top: 0; }
.qw-ui :is(main, .learning-container) :is(h1, h2, h3, [id]) { scroll-margin-top: var(--qw-content-top); }
.qw-ui :is(.page-layout, .tq-layout, .stage) { mask-image: none; -webkit-mask-image: none; }
.qw-ui :is(.tq-left, .tq-right) { mask-image: none; -webkit-mask-image: none; }
.qw-ui :is(.header, .admin-header, .console-header, .help-header) {
    color: var(--qw-ink); background: var(--qw-glass); border-bottom: 1px solid var(--qw-line); z-index: 80;
}
.qw-ui :is(.admin-nav a, .console-header nav a) { border-radius: var(--qw-radius-control); }
.qw-ui .admin-nav { align-items: center; padding: 8px 0; }
.qw-ui .admin-nav a { min-height: 44px; border-bottom: 0; padding: 8px 12px; }
.qw-ui .admin-nav a.active { background: var(--qw-accent-soft); color: var(--qw-accent); }
.qw-ui :is(.admin-brand-mark, .seal) { border-radius: var(--qw-radius-control); background: var(--qw-accent); }
.qw-ui :is(.action-btn, .tool-btn, .nav-tool-btn, .ai-float-btn, .ai-chat-close, .rate-icon, .user-avatar) {
    border-radius: var(--qw-radius-circle) !important;
}
.qw-ui .practice-action-wrapper { border-radius: var(--qw-radius-circle) !important; }
.qw-ui :is(.auth-modal-close, .ai-chat-close, .nav-tool-btn) {
    min-width: 44px; width: 44px !important; height: 44px !important; padding: 0;
}
.qw-ui :is(.tool-btn, .ai-float-btn) { border-color: var(--qw-line); box-shadow: var(--qw-shadow-card); }
.qw-ui .ai-float-glyph { border: 0; box-shadow: none; }
.qw-ui :is(.actbar, .rating-bar) {
    left: 16px; right: 16px; bottom: calc(var(--qw-bottom-inset) + 12px); margin: 0 auto;
    width: auto; max-width: 1120px; border: 1px solid var(--qw-line); border-radius: var(--qw-radius-panel);
    background: var(--qw-glass); box-shadow: var(--qw-shadow-float); z-index: 65;
}
.qw-ui .rating-bar { max-width: 760px; }
.qw-ui[data-qw-page='pages/review'] :is(.wrap, .table-panel) { padding-bottom: calc(var(--qw-bottom-controls) + 32px); }
.qw-ui .top-fade { display: none; }
.qw-ui :is(.ai-chat-window, .help-ai-panel) { max-width: calc(100vw - 32px); }
.qw-ui :is(.settings-panel, .user-dropdown, dialog) { max-width: calc(100vw - 32px); }
html.qw-ui :is(.logo-seal, .help-brand img) {
    width: var(--qw-logo-size); height: var(--qw-logo-size); object-fit: contain; flex: 0 0 auto;
}
/* The seal has transparent side margins: frame its visible mark without stretching it. */
html.qw-ui .logo-seal { object-fit: cover; object-position: 32% center; }
html.qw-ui .header .company-logo { width: auto; height: var(--qw-company-logo-height); object-fit: contain; flex-shrink: 0; }
html.qw-ui .header .logo { font-size: 1.5rem; gap: 8px; white-space: nowrap; }
.qw-ui .footer-logo { height: 40px; width: auto; max-width: 240px; object-fit: contain; }
@media (min-width: 1024px) {
    /* One row, with equal side columns to keep navigation centered on the page. */
    html.qw-ui .header {
        display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas: 'brand navigation account';
        padding: 12px clamp(16px, 2vw, 32px); gap: 0 clamp(12px, 1.4vw, 24px);
        transition: background-color var(--qw-motion), border-color var(--qw-motion);
    }
    html.qw-ui .header .logo { grid-area: brand; width: 100%; max-width: 100%; min-width: 0; justify-self: start; }
    html.qw-ui .header .company-logo { width: clamp(96px, 16vw, 240px); max-width: 52%; min-width: 0; flex: 0 1 auto; }
    html.qw-ui .header .logo-divider { margin-inline: 2px; }
    html.qw-ui .header .logo > span:last-child:not(.logo-divider):not(.logo-seal) {
        min-width: 0; overflow: hidden; text-overflow: ellipsis;
    }
    html.qw-ui .header .auth-buttons { grid-area: account; max-width: 100%; min-width: 0; justify-self: end; }
    html.qw-ui .header .auth-buttons > *, html.qw-ui .header .user-menu-trigger { max-width: 100%; min-width: 0; }
    html.qw-ui .header .auth-buttons .user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html.qw-ui .header .nav-links {
        grid-area: navigation; min-width: 0; width: max-content; max-width: 60vw; padding: 6px 8px; margin: 0;
        flex-wrap: nowrap; justify-content: flex-start; justify-self: center; gap: clamp(12px, 1.4vw, 24px);
        overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    }
    html.qw-ui .header .nav-links::-webkit-scrollbar { display: none; }
    html.qw-ui .header .nav-links > li { flex: 0 0 auto; }
    html.qw-ui .header .nav-links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
}
@media (max-width: 1023px) {
    html.qw-ui { --qw-logo-size: 44px; --qw-company-logo-height: 36px; }
    html.qw-ui .header .logo { font-size: 1.3rem; gap: 8px; }
}
@media (max-width: 520px) {
    html.qw-ui .header .company-logo { width: 96px; height: 32px; }
    html.qw-ui .header .logo { gap: 4px; }
}
@media (max-width: 380px) {
    html.qw-ui { --qw-logo-size: 40px; }
    html.qw-ui .header .company-logo { width: 60px; height: 30px; }
}
.qw-ui :is(th, td) { overflow-wrap: anywhere; }
.qw-ui :is(.table-scroll, .review-table-wrap) { overscroll-behavior-inline: contain; }
.qw-ui .qw-skip-link { position: fixed; top: 8px; left: 16px; z-index: 20000; padding: 8px 16px; background: var(--qw-surface); border-radius: 12px; transform: translateY(-160%); }
.qw-ui .qw-skip-link:focus { transform: none; }

@media (min-width: 1024px) {
    .qw-ui.qw-has-side-tools :is(.detail-container, .browse-container, .category-container, .learning-container, .help-shell, .ai-container, .search-page-container) {
        width: min(1200px, calc(100% - 176px));
    }
}
@media (max-width: 760px) {
    html.qw-ui { --qw-content-gap: 24px; --qw-float-gap: 12px; }
    .qw-ui :is(.admin-header-inner, .console-header) { padding: 12px 16px; gap: 12px; }
    .qw-ui .admin-nav { min-width: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; border: 0; scrollbar-width: none; }
    .qw-ui .admin-nav a { flex: 0 0 auto; padding: 8px 12px; }
    .qw-ui :is(.actbar, .rating-bar) { left: 8px; right: 8px; padding: 12px; }
    .qw-ui .acts { gap: 8px; flex-wrap: wrap; }
    .qw-ui .acts .note { flex-basis: 100%; }
    .qw-ui .acts .btn { flex: 1 1 auto; padding: 10px; }
    .qw-ui :is(.learning-container, .category-container, .help-shell) { padding-inline: 16px; }
    .qw-ui :is(.admin-modal, .auth-modal, .feedback-modal, dialog) { max-height: calc(100dvh - 32px); overflow: auto; }
    .qw-ui .search-bar { min-width: 0; }
    .qw-ui .search-bar input { flex: 1 1 0; width: 0; }
    .qw-ui .email-input-group { flex-wrap: wrap; }
    .qw-ui .email-input-group input { width: 100%; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .qw-ui *, .qw-ui *::before, .qw-ui *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
html.qw-ui.qw-reduce-motion *, html.qw-ui.qw-reduce-motion *::before, html.qw-ui.qw-reduce-motion *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
}

/* Language names are text labels, with one shared accent across source languages. */
.qw-ui .quote-main-card .source-badge,
.qw-ui .related-card .related-lang-badge,
.qw-ui .quote-card .quote-lang-badge {
    color: var(--qw-accent); background: var(--qw-accent-soft);
    border-color: var(--qw-line); border-radius: var(--qw-radius-control);
    font-family: var(--qw-font-ui); font-size: 12px;
}
.qw-ui .related-card .related-text,.qw-ui .quote-card .quote-content { overflow-wrap: anywhere; }
.qw-ui .related-card,.qw-ui[data-qw-page='pages/search'] .quote-card { padding-top: 44px; }

/* Search shells own their outline; fields and icons cannot create a second frame. */
html.qw-ui [data-qw-search] {
    display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
    padding: 6px; border: 1px solid var(--qw-line); border-radius: var(--qw-radius-pill);
    background: var(--qw-menu-glass); box-shadow: var(--qw-shadow-card); overflow: visible;
    transition: border-color var(--qw-motion), box-shadow var(--qw-motion);
}
html.qw-ui [data-qw-search]:focus-within { border-color: var(--qw-accent); box-shadow: 0 0 0 3px var(--qw-accent-soft); transform: none; }
html.qw-ui [data-qw-search] > input {
    flex: 1 1 0; width: 0; min-width: 0; max-width: 100%; min-height: 44px; margin: 0;
    padding: 8px 14px; border: 0; border-radius: var(--qw-radius-pill); background: transparent;
    outline: none; box-shadow: none; line-height: 1.5;
}
html.qw-ui [data-qw-search] > button {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    min-height: 44px; min-width: 44px; max-width: 45%; margin: 0; padding: 8px 18px;
    border: 0; border-radius: var(--qw-radius-pill); background: var(--qw-accent); color: white; white-space: nowrap;
}
html.qw-ui [data-qw-search] > button:hover { background: var(--qw-accent-hover); transform: none; }
html.qw-ui [data-qw-search] > .material-icons { position: static; transform: none; flex: 0 0 auto; margin-left: 12px; color: var(--qw-muted); }
html.qw-ui input[type='search'] { border-radius: var(--qw-radius-pill); }
html.qw-ui[data-qw-page='pages/russian'] .toolbar-left { min-width: 0; max-width: 100%; }
html.qw-ui[data-qw-page='pages/russian'] [data-qw-search] { width: 400px; }
html.qw-ui .cat-nav-filter[data-qw-search] { flex: 0 0 auto; width: clamp(120px, 22vw, 180px); }
@media (max-width: 600px) {
    html.qw-ui [data-qw-search] { width: 100%; }
    html.qw-ui[data-qw-page='pages/russian'] [data-qw-search] { width: 100%; }
    html.qw-ui .cat-nav-filter[data-qw-search] { width: 120px; }
    html.qw-ui [data-qw-search] > input { padding-inline: 10px; }
    html.qw-ui [data-qw-search] > button { padding-inline: 12px; }
}