:root { color-scheme: light; font-family: Inter, "Segoe UI", Arial, sans-serif; color: #17424c; background: #eaf1f4; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #eaf1f4; font-size: 14px; }
.page-shell { width: min(1120px, calc(100% - 48px)); margin: 24px auto 60px; }
.topic-banner { min-height: 110px; display: flex; align-items: center; gap: 20px; padding: 22px 26px; border-radius: 14px; color: white; background: linear-gradient(110deg, #207c91, #126477); box-shadow: 0 7px 18px #194f5b25; }
.back-button { border: 0; color: white; background: transparent; font: inherit; cursor: pointer; }
.back-button { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.back-button:first-letter { font-size: 26px; }
.book-icon { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 13px; color: #54d0cd; background: #ffffff1c; font-size: 30px; }
.book-icon { padding: 0; border: 0; cursor: pointer; transition: background-color .16s ease, transform .16s ease; }
.book-icon:hover { background: #ffffff30; transform: translateY(-1px); }
.book-icon:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.book-icon svg { width: 32px; height: 32px; }
.topic-heading { min-width: 0; flex: 1; }
.topic-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topic-title-row h1 { min-width: 0; }
.topic-title-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.duplicate-check-button { padding: 9px 13px; border: 1px solid #a9e2dc; border-radius: 8px; color: #126d70; background: #e9faf7; font: inherit; font-weight: 700; cursor: pointer; }
.duplicate-check-button:hover { background: #d6f3ee; }
.duplicate-check-button:disabled { opacity: .6; cursor: wait; }
.question-page-reset { flex: 0 0 auto; padding: 9px 13px; border: 1px solid #ffd1cb; border-radius: 8px; color: #a62920; background: #fff8f6; font: inherit; font-weight: 700; cursor: pointer; }
.question-page-reset:hover { background: #ffebe7; }
.question-page-reset:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.eyebrow { color: #59d0cb; font-size: 13px; letter-spacing: .06em; }
h1 { margin: 4px 0 0; overflow-wrap: anywhere; font-size: clamp(20px, 3vw, 30px); line-height: 1.2; }
.control-panel { display: grid; grid-template-columns: 145px minmax(260px, 1fr) minmax(220px, .82fr); gap: 18px; align-items: center; margin-top: 18px; padding: 18px 20px; border: 1px solid #e0edf0; border-radius: 15px; background: white; box-shadow: 0 3px 12px #17424c12; }
.progress-block { display: flex; align-items: center; gap: 11px; }
.progress-ring { --progress: 0%; display: grid; width: 68px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(#1e8b9c var(--progress), #e4f0f3 0); position: relative; }
.progress-ring::before { position: absolute; inset: 8px; border-radius: 50%; background: white; content: ""; }
.progress-ring span { position: relative; color: #14788b; font-weight: 800; }
.progress-copy strong, .progress-copy span { display: block; }
.progress-copy strong { font-size: 18px; }
.progress-copy span, .control-label { color: #59727a; font-size: 12px; }
.filter-block, .display-block { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 7px; }
.pill, .toggle-pill { min-height: 34px; padding: 7px 12px; border: 1px solid #ccebf1; border-radius: 22px; color: #14748a; background: #f2fafb; font-size: 13px; cursor: pointer; }
.pill.active { border-color: #1b8094; color: white; background: #1b8094; }
.topic-filter-select { width: min(100%, 290px); min-height: 38px; padding: 7px 36px 7px 13px; border: 1px solid #ccebf1; border-radius: 22px; appearance: none; color: #14748a; background-color: #f2fafb; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2314748a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; font-size: 14px; cursor: pointer; }
.topic-filter-select:hover, .topic-filter-select:focus-visible { border-color: #21879a; outline: none; box-shadow: 0 0 0 3px #1b809420; }
.toggle-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; font-size: 12px; }
.toggle-pill input { accent-color: #16859a; }
.summary-strip { display: flex; justify-content: center; gap: 12px; margin: 19px 0; padding: 16px; border-radius: 10px; color: #35707a; background: #f1f8fa; font-size: 16px; }
.correct-summary { color: #12a9a0; font-weight: 700; }
.summary-divider { color: #a5bdc3; }
.status { margin: 14px 2px; color: #59757a; font-size: 13px; }
.sheet-loading { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 24px; background: #eaf1f4eF; backdrop-filter: blur(3px); }
.sheet-loading[hidden] { display: none !important; }
.sheet-loading-card { display: flex; width: min(100%, 820px); min-height: 210px; align-items: center; justify-content: center; gap: 20px; padding: 32px; border: 1px solid #dcebef; border-radius: 18px; background: #fff; box-shadow: 0 8px 28px #17424c18; }
.loading-spinner { width: 28px; height: 28px; flex: 0 0 28px; border: 3px solid #d8edf1; border-top-color: #1b8094; border-radius: 50%; animation: sheet-spin .8s linear infinite; }
.loading-progress-ring { --load-progress: 0%; position: relative; display: grid; width: 82px; height: 82px; flex: 0 0 82px; place-items: center; border-radius: 50%; background: conic-gradient(#1b8094 var(--load-progress), #e8f1f3 0); }
.loading-progress-ring::before { position: absolute; width: 66px; height: 66px; border-radius: 50%; background: #fff; content: ""; }
.loading-progress-ring span { z-index: 1; color: #176f83; font-size: 17px; font-weight: 800; }
.loading-copy { min-width: 0; width: min(360px, 100%); }
.loading-copy strong, .loading-copy span { display: block; }
.loading-copy strong { margin-bottom: 5px; color: #174954; font-size: 17px; }
.loading-copy span { min-height: 19px; color: #59757a; font-size: 13px; }
.loading-progress-track { height: 9px; overflow: hidden; margin-top: 13px; border-radius: 99px; background: #e8f1f3; }
.loading-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #238ca0, #45c5bd); transition: width .55s ease; }
@keyframes sheet-spin { to { transform: rotate(360deg); } }
.topic-directory { margin-top: 20px; }
.directory-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 3px 14px; }
.directory-heading h2 { margin: 0; color: #174954; font-size: 19px; }
.directory-heading span { color: #648087; font-size: 13px; }
.topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.subject-index-grid { display: block; }
.subject-index-card { width: min(100%, 540px); margin: 0 auto; overflow: hidden; padding: 0 0 10px; border: 1px solid #d8e8ec; border-radius: 5px; background: #fff; box-shadow: 0 2px 7px #17424c12; }
.subject-index-heading { margin: 0; padding: 9px 16px; color: #fff; background: #25849a; font-size: 16px; font-weight: 600; line-height: 1.4; }
.subject-index-list { padding: 10px 20px; }
.subject-index-row { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 18px; border: 0; border-radius: 4px; color: #173d49; background: #fff; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.subject-index-row:hover, .subject-index-row:focus-visible { background: #f3f8f9; outline: none; }
.subject-index-label { display: inline-flex; min-width: 0; align-items: center; gap: 7px; overflow-wrap: anywhere; }
.subject-index-icon { flex: 0 0 auto; color: #183f48; font-size: 16px; font-weight: 700; }
.subject-index-count { flex: 0 0 auto; padding: 4px 9px; border-radius: 16px; color: #fff; background: #48c7bf; font-size: 12px; font-weight: 700; }
.topic-card { min-width: 0; padding: 20px; border: 1px solid #e0edf0; border-radius: 14px; background: white; box-shadow: 0 3px 12px #17424c12; }
.topic-card-head { min-height: 96px; display: flex; justify-content: space-between; gap: 12px; padding: 15px; border-radius: 10px; background: #f0f7f9; }
.topic-card-head h3 { margin: 0; color: #153e49; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.topic-counts { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: 0 0 auto; }
.topic-counts span { padding: 8px 10px; border: 1px solid #dfedf0; border-radius: 7px; color: #246276; background: white; font-size: 12px; white-space: nowrap; }
.topic-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px auto 17px; max-width: 620px; }
.topic-stat.remaining-stat, .topic-stat.remaining-stat strong { color: #d93025; }
.topic-stat { min-height: 105px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-radius: 9px; background: #f0f7f9; color: #315b64; }
.topic-stat span { font-size: 12px; font-variant: small-caps; }
.topic-stat strong { color: #167b91; font-size: 20px; }
.topic-progress-label { margin-bottom: 6px; color: #758a90; font-size: 12px; font-weight: 700; }
.topic-progress-track { height: 18px; overflow: hidden; border-radius: 4px; background: #e8eff1; }
.topic-progress-track span { display: block; height: 100%; border-radius: inherit; background: #408dc3; }
.topic-progress-value { position: relative; margin-top: -17px; color: white; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; text-shadow: 0 1px 2px #255b6a; }
.topic-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.topic-card-actions button { min-height: 40px; flex: 1; padding: 9px 13px; border: 1px solid #1d7c91; border-radius: 6px; color: #fff; background: #1d7c91; font: inherit; font-weight: 700; cursor: pointer; }
.topic-card-actions button:hover { background: #17677a; }
.topic-card-actions button.secondary { color: #176f83; background: white; }
.topic-card-actions button.secondary:hover { background: #eff8fa; }
.topic-card-actions button.reset-topic-button { border-color: #e5a19d; color: #b42318; background: #fff; }
.topic-card-actions button.reset-topic-button:hover { border-color: #c93830; color: #fff; background: #c93830; }
.question-list { display: grid; gap: 20px; }
.archive-time-summary { position: fixed; right: 18px; bottom: 18px; z-index: 30; margin: 0; padding: 0; border: 0; color: #176f83; background: transparent; }
.archive-metrics { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.archive-metrics div { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #8ddbd3; border-radius: 999px; background: #e6faf6; box-shadow: 0 4px 14px #173b4217; }
.archive-metrics span { color: #176f83; font-size: 12px; }
.archive-metrics strong { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: #1ca99c; color: #fff; font-size: 12px; text-align: center; }
.hourly-archive-report { position: fixed; top: 14vh; left: 17px; z-index: 29; width: 150px; max-height: 78vh; overflow: auto; margin: 0; padding: 9px; border: 1px solid #d9e8ed; border-radius: 10px; color: #174c5a; background: #fff; box-shadow: 0 4px 18px #0002; }
.hourly-archive-heading { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin-bottom: 4px; font-size: 13px; }
.hourly-archive-heading span { min-width: 24px; padding: 3px 6px; border-radius: 999px; color: #176f83; background: #e6f6f4; text-align: center; font-weight: 700; }
.hourly-archive-subtitle { margin-bottom: 6px; color: #647985; font-size: 10px; }
.hourly-archive-row { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 4px 5px; align-items: center; padding: 6px 0; border-bottom: 1px solid #edf2f4; }
.hourly-archive-label { grid-column: 1 / -1; color: #365864; font-size: 10px; white-space: nowrap; }
.hourly-archive-track { height: 9px; overflow: hidden; border-radius: 99px; background: #edf3f5; }
.hourly-archive-bar { height: 100%; border-radius: 99px; background: #1a8298; }
.hourly-archive-value { color: #176f83; font-size: 12px; text-align: right; }
.hourly-archive-empty { padding: 8px; border-radius: 8px; color: #647985; background: #f1f7f9; font-size: 11px; }
@media (max-width: 700px) { .hourly-archive-report { position: static; width: auto; max-height: 260px; margin: 12px 0; } }

.next-question-controls { position: fixed; right: 18px; top: 50%; z-index: 40; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); }
.next-question-controls[hidden], .next-question-panel[hidden] { display: none; }
.next-question-button { border: 0; border-radius: 999px; padding: 12px 18px; color: #fff; background: #176f83; box-shadow: 0 3px 12px #0003; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.next-question-settings { width: 42px; height: 42px; border: 1px solid #c6e1e6; border-radius: 50%; color: #176f83; background: #fff; box-shadow: 0 3px 12px #0002; font: 20px sans-serif; cursor: pointer; }
.next-question-panel { position: fixed; right: 18px; bottom: calc(50% + 30px); z-index: 41; width: 250px; padding: 14px; border: 1px solid #d2e9e9; border-radius: 12px; color: #174c5a; background: #fff; box-shadow: 0 4px 18px #0003; font: 14px/1.4 Inter, "Segoe UI", Arial, sans-serif; }
.next-question-shortcut-label { margin: 8px 0; color: #607b82; }
.auto-scroll-toggle { display: flex; align-items: center; gap: 8px; margin: 10px 0; cursor: pointer; user-select: none; }
.voice-setting { display: grid; gap: 5px; margin: 10px 0; color: #365864; font-size: 12px; font-weight: 650; }
.voice-setting select { width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid #c6e1e6; border-radius: 7px; color: #174c5a; background: #f7fbfc; font: inherit; }
.voice-reader-status { margin: 8px 0; color: #607b82; font-size: 11px; line-height: 1.4; }
.voice-reader-button.active { border-color: #168093; color: #fff; background: #168093; box-shadow: 0 0 0 3px #16809322; }
.shortcut-actions { display: flex; gap: 7px; }
.shortcut-actions button { border: 0; border-radius: 7px; padding: 8px 10px; color: #fff; background: #176f83; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.shortcut-actions #clear-next-shortcut { border: 1px solid #c6e1e6; color: #176f83; background: #fff; }
.overview-page-links { position: relative; top: auto; right: auto; z-index: 1; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 12px; }
.overview-page-links a { padding: 9px 14px; border: 1px solid #c6e1e6; border-radius: 999px; color: #176f83; background: #fff; box-shadow: 0 3px 12px #0002; font-weight: 700; text-decoration: none; }
.overview-page-links a:hover { background: #e9f7f5; }
.question-context-menu { position: fixed; z-index: 60; min-width: 150px; padding: 5px; border: 1px solid #d2e9e9; border-radius: 9px; background: #fff; box-shadow: 0 5px 18px #173b4230; }
.question-context-menu[hidden], .note-editor[hidden] { display: none; }
.question-context-menu button { width: 100%; border: 0; border-radius: 6px; padding: 9px 11px; color: #174c5a; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.question-context-menu button:hover { background: #eaf6f7; }
.note-toast { position: fixed; bottom: 10px; left: 10px; z-index: 75; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: #176f83a6; box-shadow: 0 1px 4px #0002; font: 700 13px/1 Arial, sans-serif; cursor: pointer; opacity: .58; transition: width .18s ease, height .18s ease, border-radius .18s ease, background .18s ease, opacity .18s ease; }
.note-toast:hover, .note-toast:focus-visible { opacity: 1; }
.note-toast:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.note-toast.expanded { width: auto; height: auto; min-height: 32px; max-width: min(520px, calc(100vw - 36px)); padding: 7px 12px; border-radius: 999px; opacity: .9; font: 700 12px/1.4 Arial, sans-serif; }
.note-toast.error { background: #b42318; }
.note-toast[hidden] { display: none; }
.note-editor { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 18px; background: #102c3180; }
.note-dialog { width: min(540px, 100%); padding: 22px; border: 1px solid #d8e7e8; border-radius: 16px; background: #fff; box-shadow: 0 16px 48px #102c3150; }
.note-dialog h2 { margin: 0 0 10px; }
.note-question-preview { margin: 0 0 15px; color: #59757a; line-height: 1.55; white-space: pre-wrap; }
.note-dialog label { display: block; margin-bottom: 6px; color: #174954; font-weight: 700; }
.note-dialog textarea { display: block; width: 100%; min-height: 150px; resize: vertical; padding: 11px 12px; border: 1px solid #bfdadd; border-radius: 9px; color: #173b42; background: #fbfefe; font: inherit; line-height: 1.5; }
.note-editor-status { min-height: 20px; margin-top: 5px; color: #b63f37; font-size: 12px; }
.note-editor-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.note-editor-actions button { border: 1px solid #b9dada; border-radius: 8px; padding: 9px 13px; color: #176f83; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.note-editor-actions #save-note { border-color: #176f83; color: #fff; background: #176f83; }
.archived-question-card { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 2px dashed #79b9c5; border-radius: 12px; color: #176f83; background: #eff9fb; }
.archived-question-details { display: grid; gap: 4px; }
.archived-question-details strong { font-size: 15px; }
.archived-question-details span { color: #607d85; font-size: 12px; }
.restore-archive-button { min-height: 36px; padding: 8px 12px; border: 0; border-radius: 8px; color: #fff; background: #176f83; font: inherit; font-weight: 650; cursor: pointer; }
.restore-archive-button:hover { background: #125e70; }
.archive-question-button { color: #176f83; }
.question-pagination { position: relative; display: flex; width: 100%; min-width: 0; min-height: 110px; align-items: center; justify-content: center; gap: 10px; margin: 24px 0 0; padding: 18px 20px; background: #f0f8fb; }
.question-pagination[hidden] { display: none !important; }
.question-pagination-top { position: sticky; top: 0; z-index: 20; height: 110px; margin: 0 0 18px; transition: height .22s ease, min-height .22s ease, padding .22s ease, gap .22s ease; }
.page-button { display: flex; width: 70px; height: 70px; flex: 0 0 70px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid #e0edf0; border-radius: 9px; color: #166f86; background: #fff; box-shadow: 0 2px 6px #17424c12; font: inherit; cursor: pointer; }
.page-caption { color: #6c858b; font-size: 12px; }
.page-button strong { font-size: 18px; line-height: 1; }
.page-button:hover:not(.active) { border-color: #7ecbd4; background: #f8fcfd; }
.page-button.active { border-color: #1b8094; color: #fff; background: #1b8094; }
.page-button.active .page-caption { color: #e3f6f8; }
.page-arrow { display: grid; width: 50px; height: 50px; flex: 0 0 50px; place-items: center; margin-left: 4px; border: 0; border-radius: 50%; color: #fff; background: #1b8094; font: 700 30px/1 Arial, sans-serif; cursor: pointer; }
.page-arrow:hover { background: #14697b; }
@media (max-width: 720px) { .question-pagination { min-height: 92px; gap: 6px; overflow-x: auto; justify-content: flex-start; padding: 12px; } .page-button { width: 58px; height: 62px; flex-basis: 58px; } .page-arrow { width: 44px; height: 44px; flex-basis: 44px; } }
.question-card { padding: 24px 26px; border: 1px solid #e0edf0; border-radius: 15px; background: white; box-shadow: 0 3px 12px #17424c12; }
.question-card.favorite { border-color: #e0edf0; background: #fff; }
.question-card.favorite .question-text { color: #c0392b; font-weight: 700; }
.question-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid #e4eff1; }
.question-number { color: #16738b; font-size: 18px; font-weight: 750; }
.question-actions { display: flex; align-items: center; gap: 8px; }
.matching-count-button { min-width: 27px; height: 27px; padding: 0 7px; border: 1px solid #9cddd7; border-radius: 999px; color: #fff; background: #179b91; box-shadow: 0 2px 5px #176f831f; font: 700 12px/1 Arial, sans-serif; cursor: pointer; }
.matching-count-button:hover, .matching-count-button:focus-visible { outline: none; background: #117a78; box-shadow: 0 0 0 3px #179b9133; }
.icon-button { width: 40px; height: 40px; border: 1px solid #cce8ed; border-radius: 10px; color: #168093; background: #f2f9fa; font-size: 18px; cursor: pointer; }
.icon-button.selected { color: #e6a700; background: #fff8df; }
.question-text { margin: 17px 0 20px; color: #133f4a; font-size: 18px; line-height: 1.65; white-space: pre-wrap; }
.note-highlight { padding: 0 .08em; border-radius: 3px; color: #b42318; background: #ffe1dc; font-weight: 700; }
.options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.option-wrap { position: relative; min-width: 0; }
.option { display: flex; align-items: center; gap: 13px; min-height: 58px; padding: 11px 15px; border: 1px solid #d0edf2; border-radius: 9px; color: #254d57; background: #f0f7f9; line-height: 1.5; overflow-wrap: anywhere; }
button.option { width: 100%; font: inherit; text-align: left; cursor: pointer; }
button.option:hover:not([aria-disabled="true"]) { border-color: #77cbd1; background: #e6f6f7; }
button.option[aria-disabled="true"] { opacity: 1; cursor: default; }
.option-label { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: white; background: #217f91; font-weight: 700; }
.option.correct { padding-right: 44px; border-left: 5px solid #1eb1a4; color: #174e53; background: #cef5ee; font-weight: 700; }
.option-wrap.has-option-match .option { padding-right: 64px; }
.option-search-button { position: absolute; top: 50%; right: 7px; display: grid; width: 22px; height: 22px; place-items: center; padding: 0; transform: translateY(-50%); border: 1px solid #9cddd7; border-radius: 50%; color: #117f78; background: #e7f8f5; box-shadow: 0 1px 3px #176f831f; font: 700 10px/1 Arial, sans-serif; cursor: pointer; }
.option-search-button:hover, .option-search-button:focus-visible { outline: none; background: #b4eee5; color: #087d74; box-shadow: 0 0 0 2px #179b9133; }
.option.incorrect { border-left: 5px solid #e46962; color: #793c3c; background: #fff0ef; font-weight: 700; }
.option.incorrect::after { position: absolute; top: 50%; right: 36px; margin: 0; transform: translateY(-50%); color: #d94e48; content: "✕"; font-size: 18px; }
.option.correct::after { position: absolute; top: 50%; right: 36px; transform: translateY(-50%); color: #149c8f; content: "✓"; font-size: 18px; }
.option-match-toggle { display: flex; align-items: center; gap: 9px; width: fit-content; color: #34575f; font-size: 13px; cursor: pointer; }
.option-match-toggle input { accent-color: #17899b; }
.answer-line { margin-top: 13px; color: #127e77; font-weight: 700; }
.answer-line.incorrect { color: #c34d45; }
.explanation { margin-top: 18px; padding: 14px 18px; border: 3px solid #20a66a; border-radius: 11px; color: #34575f; background: #f1f8fa; line-height: 1.65; white-space: pre-wrap; }
.explanation strong { display: block; margin-bottom: 4px; color: #16788a; }
.empty-state { padding: 35px; border: 1px dashed #b6cfd5; border-radius: 14px; color: #69838a; text-align: center; background: #ffffff9c; }
button:disabled { opacity: .55; cursor: wait; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.detail-layout.sidebar-open { grid-template-columns: 220px minmax(0, 1fr); }
.topic-sidebar-toggle { min-height: 34px; margin: 0 0 10px; padding: 7px 12px; border: 1px solid #ccebf1; border-radius: 20px; color: #14748a; background: #f2fafb; font: inherit; cursor: pointer; }
.topic-sidebar-toggle:hover { border-color: #1b8094; background: #e7f5f7; }
.topic-sidebar { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding: 16px 12px; border: 1px solid #e0edf0; border-radius: 13px; background: #fff; box-shadow: 0 3px 12px #17424c12; }
.topic-sidebar h2 { margin: 0 8px 12px; color: #176f83; font-size: 16px; }
.topic-navigation { display: grid; gap: 5px; }
.topic-nav-button { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; color: #345b65; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.topic-nav-button:hover { background: #f0f8fa; }
.topic-nav-button.active { border-color: #ccebf1; color: #126f83; background: #eaf7f9; font-weight: 700; }
.topic-nav-label { min-width: 0; overflow-wrap: anywhere; }
.topic-nav-count { flex: 0 0 auto; color: #6c8990; font-size: 11px; }
.topic-content { min-width: 0; }
.topic-content .control-panel { margin-top: 0; }
@media (max-width: 1000px) { .detail-layout.sidebar-open { grid-template-columns: 190px minmax(0, 1fr); gap: 14px; } .topic-content .control-panel { grid-template-columns: 1fr; gap: 18px; } }
@media (max-width: 780px) { html, body { max-width: 100%; overflow-x: hidden; } .page-shell, .detail-layout, .topic-content { min-width: 0; max-width: 100%; } .detail-layout.sidebar-open { grid-template-columns: minmax(0, 1fr); } .topic-sidebar { position: fixed; inset: 12px auto 12px 12px; width: min(290px, calc(100vw - 24px)); max-height: none; z-index: 80; padding: 12px; } .topic-sidebar h2 { margin-bottom: 8px; } .topic-navigation { display: grid; overflow: auto; padding-bottom: 3px; } .topic-nav-button { width: 100%; min-width: 0; } }
@media (max-width: 780px) { .page-shell { width: min(calc(100% - 24px), 620px); margin-top: 12px; } .topic-banner { gap: 12px; padding: 18px 15px; } .book-icon { width: 46px; height: 46px; } .control-panel { grid-template-columns: 1fr; gap: 20px; padding: 19px; } .progress-block { justify-content: flex-start; } .topic-grid { grid-template-columns: 1fr; } .subject-index-list { padding: 8px 10px; } .subject-index-row { min-height: 54px; padding: 9px 11px; } }
@media (max-width: 520px) { .options-grid { grid-template-columns: 1fr; } .topic-banner { flex-wrap: wrap; } .topic-heading { flex: 1 1 calc(100% - 80px); order: 3; } .topic-title-row { align-items: flex-start; flex-direction: column; gap: 8px; } .question-card { padding: 18px 15px; } .summary-strip { font-size: 13px; } .topic-card { padding: 14px; } .topic-card-head { padding: 12px; } .topic-counts span { font-size: 11px; } .topic-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .archive-time-summary { right: 10px; bottom: 10px; } .archive-metrics { align-items: flex-end; flex-direction: column; } .archive-metrics div { padding: 6px 9px; } .next-question-controls { right: 10px; } .next-question-panel { right: 10px; width: min(250px, calc(100vw - 20px)); } .overview-page-links { top: auto; right: auto; gap: 5px; margin-bottom: 8px; } .overview-page-links a { padding: 7px 9px; font-size: 11px; } .archived-question-card { align-items: flex-start; flex-direction: column; } }
@media (max-width: 520px) { .sheet-loading { padding: 14px; } .sheet-loading-card { min-height: 150px; gap: 12px; padding: 18px 14px; border-radius: 14px; } .loading-spinner { width: 20px; height: 20px; flex-basis: 20px; } .loading-progress-ring { width: 68px; height: 68px; flex-basis: 68px; } .loading-progress-ring::before { width: 54px; height: 54px; } .loading-progress-ring span { font-size: 14px; } .loading-copy strong { font-size: 15px; } }

.overview-account-chip{display:inline-flex;align-items:center;gap:8px;max-width:210px;min-height:38px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 11px 4px 5px;border:1px solid #d6e8e9;border-radius:999px;background:#fff;color:#285866;font:600 12px 'DM Sans',sans-serif}.overview-account-chip img{display:block;width:28px;height:28px;flex:0 0 28px;border-radius:50%;object-fit:cover}.overview-account-chip i{display:grid;width:28px;height:28px;flex:0 0 28px;place-items:center;border-radius:50%;background:#e4f3f3;color:#146f7e;font-style:normal}.overview-signout{min-height:38px;padding:0 11px;border:1px solid #d6e8e9;border-radius:8px;background:#fff;color:#55727b;font:600 11px 'DM Sans',sans-serif;cursor:pointer}.overview-signout:hover{background:#f2f8f8;color:#146f7e}

/* App-like compact controls for phones: progress stays visible; filters and display options open from Settings. */
.mobile-settings-toggle, .mobile-settings-heading { display: none; }
@media (max-width: 780px) {
  #topic-sidebar-toggle, .topic-sidebar { display: none !important; }
  .mobile-settings-toggle { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; margin: 0 0 8px; padding: 7px 13px; border: 1px solid #ccebf1; border-radius: 20px; color: #14748a; background: #f2fafb; font: inherit; font-weight: 650; cursor: pointer; }
  .control-panel { grid-template-columns: 1fr; gap: 0; margin-top: 0; padding: 12px 14px; }
  .topic-content:not(.settings-open) .filter-block, .topic-content:not(.settings-open) .display-block { display: none; }
  .topic-content.settings-open::before { position: fixed; inset: 0; z-index: 99; background: #102c3180; content: ""; }
  .topic-content.settings-open .control-panel { position: fixed; inset: 12px; z-index: 100; display: grid; grid-template-columns: 1fr; align-content: start; gap: 16px; max-height: calc(100dvh - 24px); overflow: auto; margin: 0; padding: 18px; border-radius: 16px; box-shadow: 0 16px 48px #102c3150; }
  .topic-content.settings-open .filter-block, .topic-content.settings-open .display-block { display: flex; }
  .mobile-settings-heading { display: flex; align-items: center; justify-content: space-between; color: #17424c; font-size: 16px; }
  .mobile-settings-heading button { width: 34px; height: 34px; border: 1px solid #cce8ed; border-radius: 9px; color: #176f83; background: #f2f9fa; font: 22px/1 Arial, sans-serif; cursor: pointer; }
}

/* Phone styling tuned to the Examenee Android question screen. */
@media (max-width: 780px) {
  :root { font-family: Roboto, "Noto Sans Bengali", "Segoe UI", Arial, sans-serif; color: #17424c; background: #eaf1f3; }
  body { background: #eaf1f3; font-size: 14px; }
  .page-shell { width: min(calc(100% - 24px), 620px); margin: 8px auto 36px; }
  .overview-page-links { gap: 6px; margin-bottom: 8px; }
  .overview-page-links a { min-height: 34px; display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 10px; font-size: 11px; }
  .overview-account-chip { min-height: 34px; max-width: 150px; padding-right: 8px; font-size: 10px; }
  .overview-account-chip img, .overview-account-chip i { width: 24px; height: 24px; flex-basis: 24px; }
  .overview-signout { min-height: 34px; padding: 0 9px; font-size: 10px; }
  .topic-banner { min-height: 82px; flex-wrap: nowrap; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 16px; background: #176a79; box-shadow: 0 4px 12px #194f5b25; }
  .back-button { gap: 3px; font-size: 12px; }
  .book-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px; }
  .book-icon svg { width: 25px; height: 25px; }
  .topic-heading { min-width: 0; flex: 1 1 auto; order: 0; }
  .eyebrow { font-size: 9px; }
  h1 { margin-top: 3px; font-size: clamp(17px, 5vw, 21px); line-height: 1.25; }
  .topic-title-row { align-items: flex-start; flex-direction: column; gap: 6px; }
  .topic-title-actions { flex-wrap: wrap; gap: 5px; }
  .duplicate-check-button, .question-page-reset { padding: 6px 8px; border-radius: 8px; font-size: 10px; }
  .mobile-settings-toggle { min-height: 34px; margin: 9px 0 7px; padding: 6px 12px; border-radius: 10px; font-size: 12px; }
  .control-panel { grid-template-columns: 1fr; gap: 0; margin: 0 0 8px; padding: 12px 14px; border-radius: 16px; box-shadow: 0 3px 10px #17424c12; }
  .progress-block { gap: 10px; }
  .progress-ring { width: 54px; }
  .progress-ring::before { inset: 6px; }
  .progress-copy strong { font-size: 16px; }
  .progress-copy span { font-size: 11px; }
  .question-pagination-top { margin: 0 0 10px; }
  .question-pagination { min-height: 76px; gap: 7px; padding: 8px 10px; border-radius: 14px; }
  .page-button { width: 54px; height: 58px; flex-basis: 54px; gap: 3px; border-radius: 12px; }
  .page-caption { font-size: 10px; }
  .page-button strong { font-size: 16px; }
  .page-arrow { width: 42px; height: 42px; flex-basis: 42px; font-size: 25px; }
  .question-list { gap: 12px; }
  .question-card { padding: 16px 14px; border-color: #dfeaec; border-radius: 17px; box-shadow: 0 3px 10px #17424c12; }
  .question-top { gap: 8px; padding-bottom: 10px; }
  .question-number { font-size: 15px; }
  .question-actions { gap: 5px; }
  .matching-count-button { min-width: 24px; height: 24px; padding: 0 6px; font-size: 11px; }
  .icon-button { width: 34px; height: 34px; border-radius: 9px; font-size: 16px; }
  .question-text { margin: 13px 0 15px; color: #173f49; font-family: Roboto, "Noto Sans Bengali", "Segoe UI", Arial, sans-serif; font-size: 18px; line-height: 1.55; }
  .options-grid { grid-template-columns: 1fr; gap: 8px; }
  .option { min-height: 54px; gap: 11px; padding: 10px 12px; border-radius: 13px; font-family: Roboto, "Noto Sans Bengali", "Segoe UI", Arial, sans-serif; font-size: 15px; }
  .option-label { width: 30px; height: 30px; flex-basis: 30px; }
  .answer-line { margin-top: 10px; font-size: 13px; }
  .explanation { margin-top: 12px; padding: 12px; border-width: 2px; border-radius: 13px; font-size: 14px; line-height: 1.55; }
  .archived-question-card { min-height: 60px; padding: 11px 12px; border-radius: 13px; }
  .archived-question-details strong { font-size: 13px; }
  .archived-question-details span { font-size: 10px; }
  .next-question-controls { top: auto; right: 14px; bottom: 16px; transform: none; gap: 8px; }
  .next-question-button { display: grid; width: 54px; height: 54px; place-items: center; padding: 0; border: 3px solid #65d0c8; border-radius: 50%; font-size: 0; }
  .next-question-button::before { content: "↓"; font: 700 25px/1 Arial, sans-serif; }
  .next-question-settings { width: 42px; height: 42px; font-size: 18px; }
  .archive-time-summary { right: 12px; bottom: 82px; }
  .archive-metrics { gap: 5px; }
  .archive-metrics div { gap: 6px; padding: 6px 9px; }
  .archive-metrics span, .archive-metrics strong { font-size: 10px; }
}
@media (max-width: 420px) {
  .topic-banner { gap: 7px; padding: 10px; }
  .back-button { font-size: 11px; }
  .book-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .topic-title-actions { gap: 4px; }
  .duplicate-check-button, .question-page-reset { padding: 5px 7px; font-size: 9px; }
  .question-card { padding: 14px 12px; }
  .overview-account-chip { max-width: 112px; }
}
@media (max-width: 780px) {
  .topic-content:not(.settings-open) .mobile-settings-heading { display: none; }
  .topic-content.settings-open .mobile-settings-heading { display: flex; }
}

.question-pagination-top.compact { height: 56px; min-height: 56px; margin-bottom: 8px; padding-top: 6px; padding-bottom: 6px; gap: 6px; }
.question-pagination-top.compact .page-button { width: 44px; height: 44px; flex-basis: 44px; gap: 0; transition: width .22s ease, height .22s ease, flex-basis .22s ease, gap .22s ease; }
.question-pagination-top.compact .page-caption { height: 0; overflow: hidden; font-size: 0; opacity: 0; transition: opacity .16s ease; }
.question-pagination-top.compact .page-button strong { font-size: 16px; }
.question-pagination-top.compact .page-arrow { width: 40px; height: 40px; flex-basis: 40px; font-size: 24px; transition: width .22s ease, height .22s ease, flex-basis .22s ease; }
@media (max-width: 720px) { .question-pagination-top { height: 92px; } .question-pagination-top.compact { height: 52px; min-height: 52px; } .question-pagination-top.compact .page-button { width: 40px; height: 40px; flex-basis: 40px; } .question-pagination-top.compact .page-arrow { width: 36px; height: 36px; flex-basis: 36px; } }
@media (max-width: 520px) { .question-pagination-top { height: 76px; } .question-pagination-top.compact { height: 48px; min-height: 48px; padding: 4px 8px; } .question-pagination-top.compact .page-button { width: 36px; height: 36px; flex-basis: 36px; } .question-pagination-top.compact .page-button strong { font-size: 14px; } .question-pagination-top.compact .page-arrow { width: 34px; height: 34px; flex-basis: 34px; font-size: 21px; } }