/* =====================================================================
   QuizFlow Theme Layer
   Dynamic accent palette, light/dark/midnight modes, aesthetic styles,
   avatars, mobile navbars, rich text editor and exam engine visuals.
   Variables --qf-accent* and fonts are injected per-user by DisplaySettings.
   ===================================================================== */

:root {
    --qf-accent: #6366F1;
    --qf-accent-2: #8B5CF6;
    --qf-accent-rgb: 99, 102, 241;
    --qf-accent-glow: rgba(99, 102, 241, 0.35);
    --qf-btn-text: #ffffff;

    --qf-primary: var(--qf-accent);
    --qf-primary-hover: var(--qf-accent-2);
    --qf-primary-light: rgba(var(--qf-accent-rgb), 0.08);
    --qf-primary-gradient: linear-gradient(135deg, var(--qf-accent) 0%, var(--qf-accent-2) 100%);

    --bs-primary: var(--qf-accent);
    --bs-primary-rgb: var(--qf-accent-rgb);
    --bs-link-color: var(--qf-accent);
    --bs-link-color-rgb: var(--qf-accent-rgb);
    --bs-link-hover-color: var(--qf-accent-2);

    --qf-text: #334155;
    --qf-heading: #0f172a;
    --qf-muted: #64748b;
    --qf-input-bg: #ffffff;
    --qf-thead-bg: #f8fafc;
    --qf-hover-bg: #f8fafc;
    --qf-navbar-bg: rgba(255, 255, 255, 0.88);
}

body { font-family: var(--qf-font); color: var(--qf-text); }
body.student-portal { font-family: var(--qf-student-dashboard-font); }
.exam-body { font-family: var(--qf-font); }
.exam-question-text, .exam-question-text *, .exam-option-text, .exam-option-text *, #shortAnswerInput,
#questionPaperBody .rich-text-content, #questionPaperBody .rich-text-content *, #questionPaperBody li {
    font-family: var(--qf-student-font) !important;
}

h1, h2, h3, h4, h5, h6 { color: var(--qf-heading); }
.text-primary { color: var(--qf-accent) !important; }
.bg-primary { background-color: var(--qf-accent) !important; }
.border-primary { border-color: var(--qf-accent) !important; }
.bg-primary-subtle { background-color: rgba(var(--qf-accent-rgb), 0.1) !important; }
.text-primary-emphasis { color: var(--qf-accent) !important; }
.border-primary-subtle { border-color: rgba(var(--qf-accent-rgb), 0.3) !important; }
.link-primary { color: var(--qf-accent) !important; }

.btn-primary, .btn-primary:disabled {
    background: var(--qf-primary-gradient) !important;
    color: var(--qf-btn-text) !important;
    box-shadow: 0 2px 8px var(--qf-accent-glow);
}
.btn-primary:hover, .btn-primary:focus {
    filter: brightness(0.95);
    box-shadow: 0 4px 14px var(--qf-accent-glow);
    color: var(--qf-btn-text) !important;
}
.btn-outline-primary {
    border-color: rgba(var(--qf-accent-rgb), 0.45) !important;
    color: var(--qf-accent) !important;
}
.btn-outline-primary:hover, .btn-check:checked + .btn-outline-primary {
    background: rgba(var(--qf-accent-rgb), 0.1) !important;
    border-color: var(--qf-accent) !important;
    color: var(--qf-accent) !important;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--qf-accent) !important;
    box-shadow: 0 0 0 4px rgba(var(--qf-accent-rgb), 0.15) !important;
}
.form-check-input:checked { background-color: var(--qf-accent); border-color: var(--qf-accent); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--qf-primary-gradient); color: var(--qf-btn-text); }
.nav-tabs .nav-link.active { color: var(--qf-accent); border-bottom-color: var(--qf-accent); }
.page-link { color: var(--qf-accent); }
.active > .page-link, .page-link.active { background-color: var(--qf-accent); border-color: var(--qf-accent); color: var(--qf-btn-text); }
.progress-bar { background: var(--qf-primary-gradient); }
.brand-icon-box { box-shadow: 0 4px 12px var(--qf-accent-glow); }
.sidebar .nav-link.active { box-shadow: 0 4px 16px var(--qf-accent-glow); color: var(--qf-btn-text); }
.sidebar .nav-link:hover .nav-icon-wrap { background: rgba(var(--qf-accent-rgb), 0.2); color: var(--qf-accent-2); }
.palette-btn.active { border-color: var(--qf-accent) !important; color: var(--qf-accent) !important; box-shadow: 0 0 0 3px rgba(var(--qf-accent-rgb), 0.3) !important; }
.option-label.selected { border-color: var(--qf-accent); background-color: rgba(var(--qf-accent-rgb), 0.08); }
.option-label.selected .key-badge { background: var(--qf-accent); border-color: var(--qf-accent); color: var(--qf-btn-text); }
.bg-tinted { background: var(--qf-bg-tinted); }
.accent-text { color: var(--qf-accent); }
.accent-bg-soft { background: rgba(var(--qf-accent-rgb), 0.1); }

/* ---------------------------------------------------------------------
   Dark & Midnight modes
   --------------------------------------------------------------------- */
html[data-theme="dark"] {
    --qf-body-bg: #0b1120;
    --qf-card-bg: #111827;
    --qf-border: #1f2937;
    --qf-border-subtle: #1a2332;
    --qf-text: #cbd5e1;
    --qf-heading: #f1f5f9;
    --qf-muted: #94a3b8;
    --qf-input-bg: #0f172a;
    --qf-thead-bg: #0f172a;
    --qf-hover-bg: rgba(255, 255, 255, 0.03);
    --qf-navbar-bg: rgba(15, 23, 42, 0.88);
    --qf-sidebar-bg: #070b14;
    --bs-body-bg: #0b1120;
    --bs-body-color: #cbd5e1;
    --bs-secondary-color: #94a3b8;
    --bs-tertiary-bg: #111827;
    --bs-border-color: #1f2937;
}
html.theme-midnight {
    --qf-body-bg: #000000;
    --qf-card-bg: #0a0a0a;
    --qf-border: #1c1c1c;
    --qf-border-subtle: #141414;
    --qf-input-bg: #050505;
    --qf-thead-bg: #050505;
    --qf-navbar-bg: rgba(0, 0, 0, 0.9);
    --qf-sidebar-bg: #000000;
    --bs-body-bg: #000000;
    --bs-tertiary-bg: #0a0a0a;
    --bs-border-color: #1c1c1c;
}
html[data-theme="dark"] body { background-color: var(--qf-body-bg); color: var(--qf-text); }
html[data-theme="dark"] .navbar-custom { background: var(--qf-navbar-bg); border-color: var(--qf-border); }
html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .card-header { color: var(--qf-heading) !important; }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary { color: var(--qf-muted) !important; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .option-label,
html[data-theme="dark"] .demo-chip,
html[data-theme="dark"] .score-circle-wrap { background-color: var(--qf-card-bg) !important; border-color: var(--qf-border) !important; color: var(--qf-text); }
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-body-tertiary { background-color: var(--qf-card-bg) !important; }
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end { border-color: var(--qf-border) !important; }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text { background-color: var(--qf-input-bg); color: var(--qf-text); border-color: var(--qf-border); }
html[data-theme="dark"] .form-control::placeholder { color: #64748b; }
html[data-theme="dark"] .table { --bs-table-color: var(--qf-text); color: var(--qf-text); }
html[data-theme="dark"] .table thead th { background: var(--qf-thead-bg); color: var(--qf-muted); border-color: var(--qf-border); }
html[data-theme="dark"] .table tbody td { color: var(--qf-text); border-color: var(--qf-border-subtle); }
html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] .table-light { background-color: var(--qf-hover-bg) !important; --bs-table-bg: transparent; }
html[data-theme="dark"] .palette-btn { background: #0f172a; border-color: #334155; color: #cbd5e1; }
html[data-theme="dark"] .key-badge { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html[data-theme="dark"] .option-label:hover { background-color: rgba(var(--qf-accent-rgb), 0.08) !important; }
html[data-theme="dark"] .dropdown-item { color: var(--qf-text); }
html[data-theme="dark"] .dropdown-item:hover { background: var(--qf-hover-bg); }
html[data-theme="dark"] .btn-light { background: #1e293b; border-color: #334155; color: #e2e8f0; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-theme="dark"] .alert-light { background: #111827; color: var(--qf-text); border-color: var(--qf-border); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; }

/* ---------------------------------------------------------------------
   Aesthetic styles
   --------------------------------------------------------------------- */
/* Glassmorphism */
html.style-glass body {
    background: radial-gradient(circle at 10% 10%, rgba(var(--qf-accent-rgb), 0.12), transparent 45%),
                radial-gradient(circle at 90% 20%, rgba(139, 92, 246, 0.10), transparent 40%),
                var(--qf-body-bg);
    background-attachment: fixed;
}
html.style-glass .card, html.style-glass .stat-card, html.style-glass .modal-content {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
}
html.style-glass[data-theme="dark"] .card, html.style-glass[data-theme="dark"] .stat-card, html.style-glass[data-theme="dark"] .modal-content {
    background: rgba(17, 24, 39, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Cyberpunk */
html.style-cyberpunk .card, html.style-cyberpunk .stat-card {
    border: 1px solid rgba(var(--qf-accent-rgb), 0.45) !important;
    box-shadow: 0 0 0 1px rgba(var(--qf-accent-rgb), 0.15), 0 0 18px var(--qf-accent-glow) !important;
    border-radius: 4px !important;
}
html.style-cyberpunk h1, html.style-cyberpunk h2, html.style-cyberpunk h3,
html.style-cyberpunk h4, html.style-cyberpunk h5 { text-transform: uppercase; letter-spacing: 0.04em; }
html.style-cyberpunk .btn { border-radius: 3px; text-transform: uppercase; letter-spacing: 0.06em; }
html.style-cyberpunk .badge { border-radius: 2px; }

/* Minimalist */
html.style-minimalist .card, html.style-minimalist .stat-card {
    box-shadow: none !important;
    border-radius: 8px !important;
}
html.style-minimalist .stat-card::before { display: none; }
html.style-minimalist .btn-primary { box-shadow: none !important; background: var(--qf-accent) !important; }
html.style-minimalist .card.hover-lift:hover, html.style-minimalist .stat-card:hover { transform: none; }

/* Neumorphism */
html.style-neumorphism body { background: #e8ecf3; }
html.style-neumorphism .card, html.style-neumorphism .stat-card {
    background: #e8ecf3 !important;
    border: none !important;
    box-shadow: 8px 8px 16px #c5cad3, -8px -8px 16px #ffffff !important;
    border-radius: 18px !important;
}
html.style-neumorphism .btn { box-shadow: 4px 4px 8px #c5cad3, -4px -4px 8px #ffffff; }
html.style-neumorphism[data-theme="dark"] body { background: #1b2130; }
html.style-neumorphism[data-theme="dark"] .card, html.style-neumorphism[data-theme="dark"] .stat-card {
    background: #1b2130 !important;
    box-shadow: 8px 8px 16px #121620, -8px -8px 16px #242c40 !important;
}
html.style-neumorphism[data-theme="dark"] .btn { box-shadow: 4px 4px 8px #121620, -4px -4px 8px #242c40; }

/* ---------------------------------------------------------------------
   Avatars
   --------------------------------------------------------------------- */
.qf-avatar {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    object-fit: cover;
}
.qf-avatar-initials { background: var(--qf-primary-gradient); color: var(--qf-btn-text); font-weight: 700; }
.qf-avatar-emoji { background: rgba(var(--qf-accent-rgb), 0.12); line-height: 1; }
.avatar-choice {
    width: 46px; height: 46px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem; cursor: pointer; border: 2px solid transparent;
    background: rgba(var(--qf-accent-rgb), 0.06); transition: all .15s ease;
}
.avatar-choice:hover { transform: scale(1.08); }
.avatar-choice.selected { border-color: var(--qf-accent); background: rgba(var(--qf-accent-rgb), 0.15); }

/* ---------------------------------------------------------------------
   Announcement banner, rich text
   --------------------------------------------------------------------- */
.qf-announcement {
    background: rgba(var(--qf-accent-rgb), 0.08);
    border: 1px solid rgba(var(--qf-accent-rgb), 0.25);
    color: var(--qf-accent);
    border-radius: 16px;
    padding: 14px 18px;
}
.rich-text-content > *:last-child { margin-bottom: 0; }
.rich-text-content img { max-width: 100%; height: auto; border-radius: 8px; }
.rich-text-content table { border-collapse: collapse; }
.rich-text-content td, .rich-text-content th { border: 1px solid var(--qf-border); padding: 4px 8px; }

.qf-rich-editor { border: 1.5px solid var(--qf-border); border-radius: 10px; background: var(--qf-input-bg); overflow: hidden; }
.qf-rich-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--qf-border); background: var(--qf-thead-bg); }
.qf-rich-toolbar button, .qf-rich-toolbar select, .qf-rich-toolbar label {
    border: none; background: transparent; color: var(--qf-text); border-radius: 6px;
    padding: 4px 8px; font-size: 0.85rem; line-height: 1.2; cursor: pointer; display: inline-flex; align-items: center;
}
.qf-rich-toolbar button:hover, .qf-rich-toolbar label:hover { background: rgba(var(--qf-accent-rgb), 0.1); color: var(--qf-accent); }
.qf-rich-toolbar input[type=color] { width: 0; height: 0; opacity: 0; position: absolute; }
.qf-rich-area { min-height: 120px; max-height: 420px; overflow-y: auto; padding: 10px 14px; outline: none; color: var(--qf-text); }
.qf-rich-area:empty::before { content: attr(data-placeholder); color: #94a3b8; }

/* ---------------------------------------------------------------------
   Mobile navbars (classic / floating dock / glass) & student bottom nav
   --------------------------------------------------------------------- */
.qf-mobile-dock {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1030;
    background: var(--qf-navbar-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--qf-border); border-radius: 18px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    display: flex; justify-content: space-around; padding: 6px;
}
.qf-mobile-dock a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 0.65rem; font-weight: 600; color: var(--qf-muted); text-decoration: none;
    padding: 6px 8px; border-radius: 12px; min-width: 56px; text-align: center;
}
.qf-mobile-dock a i { font-size: 1.15rem; }
.qf-mobile-dock a.active { color: var(--qf-accent); background: rgba(var(--qf-accent-rgb), 0.1); }
html[data-navbar="glass"] .navbar-custom { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(22px) saturate(180%); }
html[data-navbar="glass"][data-theme="dark"] .navbar-custom { background: rgba(0, 0, 0, 0.55); }
.qf-dock-spacer { height: 86px; }
@media (min-width: 768px) { body.staff-portal .qf-mobile-dock, body.staff-portal .qf-dock-spacer { display: none !important; } }
@media (min-width: 992px) { body.student-portal .qf-mobile-dock, body.student-portal .qf-dock-spacer { display: none !important; } }
@media (min-width: 992px) { .student-sidebar-column .sidebar { position: sticky; top: 61px; height: calc(100vh - 61px); min-height: 0; overflow-y: auto; } }
@media (max-width: 480px) { .student-portal .student-tier-pill { display: none !important; } }

/* Offcanvas sidebar on mobile */
.offcanvas.qf-offcanvas { background: var(--qf-sidebar-bg); width: 280px; }
.offcanvas.qf-offcanvas .sidebar { min-height: 100%; border: none; }

/* ---------------------------------------------------------------------
   Exam engine (TCS style)
   --------------------------------------------------------------------- */
.exam-security-watermark {
    position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden;
    display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; opacity: 0.06;
}
.exam-security-watermark .watermark-item {
    transform: rotate(-30deg); font-size: 0.85rem; font-weight: 800; white-space: nowrap;
    color: var(--qf-heading); display: flex; align-items: center; justify-content: center; user-select: none;
}
.no-select { user-select: none; -webkit-user-select: none; }
.tcs-btn {
    width: 40px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8rem; cursor: pointer; border: 1px solid #cbd5e1; position: relative;
    background: #f1f5f9; color: #334155; transition: transform .1s ease;
}
.tcs-btn:hover { transform: scale(1.05); }
.tcs-not-visited { background: #e2e8f0; color: #334155; border-radius: 6px; }
.tcs-not-answered { background: #ef4444; color: #fff; border-color: #dc2626; border-radius: 8px 8px 2px 2px; clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%); }
.tcs-answered { background: #22c55e; color: #fff; border-color: #16a34a; border-radius: 2px 2px 8px 8px; clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%); }
.tcs-marked { background: #7c3aed; color: #fff; border-color: #6d28d9; border-radius: 50%; width: 36px; }
.tcs-answered-marked { background: #7c3aed; color: #fff; border-color: #6d28d9; border-radius: 50%; width: 36px; }
.tcs-answered-marked::after {
    content: '✓'; position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px;
    background: #22c55e; color: #fff; border-radius: 50%; font-size: 0.6rem; display: flex; align-items: center; justify-content: center;
    border: 1px solid #fff;
}
.tcs-btn.current { outline: 3px solid rgba(var(--qf-accent-rgb), 0.55); outline-offset: 2px; }
.tcs-palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; justify-items: center; max-height: 340px; overflow-y: auto; padding: 6px; }
.tcs-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; }
.tcs-legend-item .tcs-btn { width: 26px; height: 24px; font-size: 0.65rem; cursor: default; }
.tcs-legend-item .tcs-marked, .tcs-legend-item .tcs-answered-marked { width: 24px; }
.exam-overlay {
    position: fixed; inset: 0; z-index: 1060; background: rgba(2, 6, 23, 0.92); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 18px;
}
.exam-overlay .overlay-icon { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.mob-palette-strip { display: flex; gap: 8px; overflow-x: auto; padding: 8px 4px; scrollbar-width: none; }
.mob-palette-strip::-webkit-scrollbar { display: none; }
.exam-question-text img { max-width: 100%; }

/* Leaderboard rows */
.lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--qf-border); background: var(--qf-card-bg); }
.lb-row.me { border-color: var(--qf-accent); background: rgba(var(--qf-accent-rgb), 0.06); }
.lb-rank { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; background: rgba(var(--qf-accent-rgb), 0.08); color: var(--qf-accent); }
.lb-rank.r1 { background: linear-gradient(135deg, #facc15, #eab308); color: #fff; }
.lb-rank.r2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #fff; }
.lb-rank.r3 { background: linear-gradient(135deg, #fdba74, #f97316); color: #fff; }

/* Misc */
.cursor-pointer { cursor: pointer; }
.min-w-0 { min-width: 0; }
.fs-9 { font-size: 0.68rem !important; }
.drop-zone { border: 2px dashed var(--qf-border); border-radius: 14px; padding: 22px; text-align: center; cursor: pointer; transition: all .15s ease; }
.drop-zone.dragover, .drop-zone:hover { border-color: var(--qf-accent); background: rgba(var(--qf-accent-rgb), 0.05); }
.swatch { width: 100%; aspect-ratio: 1; border-radius: 12px; border: 3px solid transparent; cursor: pointer; }
.swatch.selected { border-color: var(--qf-heading); box-shadow: 0 0 0 3px rgba(var(--qf-accent-rgb), 0.3); }
.choice-card { border: 2px solid var(--qf-border); border-radius: 14px; padding: 14px; cursor: pointer; text-align: center; transition: all .15s ease; background: var(--qf-card-bg); }
.choice-card:hover { border-color: rgba(var(--qf-accent-rgb), 0.5); }
.choice-card.selected { border-color: var(--qf-accent); background: rgba(var(--qf-accent-rgb), 0.06); }
.font-preview { height: 100%; padding: 16px; border: 1px solid var(--qf-border); border-radius: 12px; background: var(--qf-card-bg); }
.font-preview-sample { font-size: 1.1rem; line-height: 1.7; overflow-wrap: anywhere; }
.badge-achievement { border-radius: 16px; padding: 14px 10px; text-align: center; border: 1px solid var(--qf-border); background: var(--qf-card-bg); transition: all .2s ease; }
.badge-achievement.locked { filter: grayscale(1); opacity: 0.45; }
.badge-achievement.earned { border-color: rgba(var(--qf-accent-rgb), 0.45); box-shadow: 0 6px 18px var(--qf-accent-glow); }
.tree-indent-1 { padding-left: 1.75rem !important; }
.tree-indent-2 { padding-left: 3.5rem !important; }

@media print {
    .qf-mobile-dock, .qf-dock-spacer, .exam-security-watermark, .no-print { display: none !important; }
    .print-only { display: block !important; }
}
.print-only { display: none; }

/* Student reference PDF: one fitted page within the notes modal. */
.qf-notes-dialog { max-height: calc(100vh - 2rem); }
.qf-notes-dialog .modal-content { max-height: calc(100vh - 2rem); }
.qf-note-pdf-viewport {
    height: min(62vh, 620px);
    min-height: 240px;
    display: block;
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--qf-border);
    border-radius: 12px;
    background: #e9edf1;
}
.qf-note-pdf-viewport canvas { display: block; margin: auto; max-width: none; box-shadow: 0 4px 18px #0002; }
.qf-pdf-placeholder { display: grid; place-items: center; min-height: 210px; color: #657381; text-align: center; padding: 1rem; }
.qf-pdf-page-input { width: 4.5rem; text-align: center; }
@media (max-width: 575px) {
    .qf-note-pdf-viewport { height: 54vh; min-height: 180px; }
}