/* ===== iOS-inspired design system =====
Theme switching uses [data-theme="light"|"dark"] override on .
Default ("auto") follows OS via prefers-color-scheme. */
:root, [data-theme="light"] {
--bg: #F2F2F7;
--bg-2: #FFFFFF;
--card: #FFFFFF;
--card-2: #F2F2F7;
--tertiary: #E5E5EA;
--text: #000000;
--text-2: rgba(60,60,67,.6);
--text-3: rgba(60,60,67,.3);
--separator: rgba(60,60,67,.18);
--blue: #007AFF;
--red: #FF3B30;
--green: #34C759;
--orange: #FF9500;
--yellow: #FFCC00;
--purple: #AF52DE;
--pink: #FF2D55;
--nav-bg: rgba(248,248,248,.86);
--tab-bg: rgba(248,248,248,.94);
--shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
}
[data-theme="dark"] {
--bg: #000000;
--bg-2: #1C1C1E;
--card: #1C1C1E;
--card-2: #2C2C2E;
--tertiary: #2C2C2E;
--text: #FFFFFF;
--text-2: rgba(235,235,245,.6);
--text-3: rgba(235,235,245,.3);
--separator: rgba(84,84,88,.65);
--blue: #0A84FF;
--red: #FF453A;
--green: #30D158;
--orange: #FF9F0A;
--yellow: #FFD60A;
--purple: #BF5AF2;
--pink: #FF375F;
--nav-bg: rgba(28,28,30,.85);
--tab-bg: rgba(22,22,24,.94);
--shadow: 0 1px 2px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #000000; --bg-2: #1C1C1E; --card: #1C1C1E; --card-2: #2C2C2E;
--tertiary: #2C2C2E; --text: #FFFFFF; --text-2: rgba(235,235,245,.6);
--text-3: rgba(235,235,245,.3); --separator: rgba(84,84,88,.65);
--blue: #0A84FF; --red: #FF453A; --green: #30D158; --orange: #FF9F0A;
--yellow: #FFD60A; --purple: #BF5AF2; --pink: #FF375F;
--nav-bg: rgba(28,28,30,.85); --tab-bg: rgba(22,22,24,.94);
--shadow: 0 1px 2px rgba(0,0,0,.4);
}
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Smooth transition when accent color or theme changes */
:root {
transition: --blue 0.4s ease;
}
body,
.btn-primary, .action-btn.action-primary, .sidebar-item.active,
.tab.active, .progress-line > div, .topic-bar, .ring-fg,
.source-pill, .filter-pill.active {
transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
html, body {
margin: 0; padding: 0;
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
font-size: 17px; line-height: 1.35;
-webkit-font-smoothing: antialiased;
overscroll-behavior-y: none;
}
body {
min-height: 100vh; min-height: 100dvh;
padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
.no-tabs { padding-bottom: env(safe-area-inset-bottom, 0px); }
button { font-family: inherit; font-size: inherit; color: inherit; }
input, select { font-family: inherit; }
a { color: var(--blue); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
}
}
/* Keyboard-only focus rings — invisible on tap/click, visible on Tab */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
border-radius: 6px;
}
.choice:focus-visible { outline-offset: 3px; }
/* View enter animation */
.view {
animation: viewIn .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes viewIn {
from { opacity: .4; transform: translateY(2px); }
to { opacity: 1; transform: none; }
}
/* ===== Loader ===== */
.loader {
position: fixed; inset: 0; background: var(--bg);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 14px; z-index: 1000;
transition: opacity .35s ease;
animation: loaderEnter .25s ease;
}
@keyframes loaderEnter {
from { opacity: 0; }
to { opacity: 1; }
}
.loader.hide { opacity: 0; pointer-events: none; }
.loader-mark {
color: var(--blue);
filter: drop-shadow(0 4px 12px rgba(0,122,255,.18));
}
.loader-text {
color: var(--text-2); font-size: 14px; font-weight: 500;
letter-spacing: .04em;
animation: loaderTextPulse 1.6s ease-in-out infinite;
}
@keyframes loaderTextPulse {
0%, 100% { opacity: .65; }
50% { opacity: 1; }
}
/* ===== Views ===== */
.view { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.view[hidden] { display: none; }
/* ===== Nav header ===== */
.nav {
position: sticky; top: 0; z-index: 5;
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
padding: max(env(safe-area-inset-top, 0px), 8px) 12px 8px;
background: var(--nav-bg);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: .5px solid var(--separator);
min-height: 44px;
}
.nav-title-wrap { flex: 1; text-align: center; min-width: 0; }
.nav-title {
font-size: 17px; font-weight: 600; line-height: 1.1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-subtitle {
font-size: 12px; color: var(--text-2);
margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-btn {
background: none; border: none; color: var(--blue);
font-size: 15px; padding: 8px;
cursor: pointer;
min-width: 36px; min-height: 36px;
display: flex; align-items: center; justify-content: center;
border-radius: 8px;
transition: background .15s, opacity .15s;
}
.nav-btn:hover { background: var(--tertiary); }
.nav-btn:active { opacity: .55; }
.nav-btn:disabled { color: var(--text-3); cursor: default; }
.nav-btn:disabled:hover { background: transparent; }
/* ===== Progress line ===== */
.progress-line {
height: 3px; background: var(--separator); position: relative;
overflow: hidden;
}
.progress-line > div {
height: 100%; background: var(--blue);
transition: width .4s cubic-bezier(.2,.8,.2,1);
width: 0%;
position: relative;
}
.progress-line > div::after {
content: ""; position: absolute; right: 0; top: 0; bottom: 0;
width: 24px;
background: linear-gradient(to right, transparent, rgba(255,255,255,.5));
filter: blur(2px);
}
/* ===== Content ===== */
.content {
flex: 1;
padding: 12px;
max-width: 720px;
width: 100%;
margin: 0 auto;
}
/* ===== Cards ===== */
.card {
background: var(--card);
border-radius: 14px;
padding: 16px;
box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.card p.muted { margin: 0 0 16px; color: var(--text-2); line-height: 1.4; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }
/* ===== Question card ===== */
.qcard {
background: var(--card);
border-radius: 14px;
padding: 14px;
box-shadow: var(--shadow);
will-change: transform, opacity;
}
@keyframes slideOutLeft { to { opacity: 0; transform: translate3d(-40px, 0, 0); } }
@keyframes slideOutRight { to { opacity: 0; transform: translate3d(40px, 0, 0); } }
@keyframes slideInRight {
from { opacity: 0; transform: translate3d(40px, 0, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes slideInLeft {
from { opacity: 0; transform: translate3d(-40px, 0, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.qcard.anim-out-left { animation: slideOutLeft .18s cubic-bezier(.4,0,.2,1) forwards; }
.qcard.anim-out-right { animation: slideOutRight .18s cubic-bezier(.4,0,.2,1) forwards; }
.qcard.anim-in-right { animation: slideInRight .22s cubic-bezier(.2,.8,.2,1) forwards; }
.qcard.anim-in-left { animation: slideInLeft .22s cubic-bezier(.2,.8,.2,1) forwards; }
.qcard-meta {
display: flex; align-items: center;
gap: 6px; row-gap: 6px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.qcard-meta > :last-child { margin-left: auto; }
.source-pill {
display: inline-block;
font-size: 12px; font-weight: 600;
padding: 4px 10px; border-radius: 999px;
background: rgba(0,122,255,.12); color: var(--blue);
letter-spacing: .01em;
}
.streak-pill {
font-size: 12px; font-weight: 600;
padding: 4px 10px; border-radius: 999px;
background: rgba(255,149,0,.15); color: var(--orange);
transition: transform .2s;
}
.streak-pill.bump { animation: streakBump .5s cubic-bezier(.2,.8,.2,1.4); }
@keyframes streakBump {
0% { transform: scale(1); }
40% { transform: scale(1.25); }
100% { transform: scale(1); }
}
.difficulty-pill {
font-size: 11px; font-weight: 600;
padding: 3px 8px; border-radius: 999px;
background: var(--tertiary);
color: var(--text-2);
font-feature-settings: "tnum";
}
.difficulty-pill.hard { background: rgba(255,59,48,.15); color: var(--red); }
.difficulty-pill.mid { background: rgba(255,149,0,.15); color: var(--orange); }
.difficulty-pill.easy { background: rgba(52,199,89,.15); color: var(--green); }
.sr-pill {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 600;
padding: 3px 8px; border-radius: 999px;
background: rgba(88,86,214,.15); color: #5856D6;
}
.sr-pill.due { background: rgba(255,149,0,.18); color: var(--orange); }
.sr-pill.overdue { background: rgba(255,59,48,.18); color: var(--red); }
.sr-pill svg { width: 11px; height: 11px; }
/* Note disclosure */
.qnote {
margin-top: 12px;
border-radius: 10px;
background: var(--card-2);
}
.qnote-summary {
list-style: none;
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
cursor: pointer;
font-size: 13px; color: var(--text-2); font-weight: 500;
user-select: none; -webkit-user-select: none;
transition: background .15s;
border-radius: 10px;
}
.qnote-summary::-webkit-details-marker { display: none; }
.qnote-summary:hover { background: var(--tertiary); }
.qnote-saved {
margin-left: auto;
font-size: 11px; color: var(--green); font-weight: 500;
opacity: 0; transition: opacity .25s;
}
.qnote-saved.show { opacity: 1; }
.qnote-saved[hidden] { display: none; }
.qnote-indicator {
margin-left: 4px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--orange);
opacity: 0;
}
.qnote.has-note .qnote-indicator { opacity: 1; }
.qnote[open] .qnote-summary { border-radius: 10px 10px 0 0; }
.qnote-textarea {
width: 100%;
background: var(--card);
border: none; border-top: .5px solid var(--separator);
padding: 12px 14px;
font-family: inherit; font-size: 14px;
color: var(--text);
border-radius: 0 0 10px 10px;
resize: vertical;
min-height: 60px;
outline: none;
}
.qnote-textarea:focus { box-shadow: inset 0 0 0 1px var(--blue); }
/* Choice checkmark for picked option */
.choice {
/* override existing — keep prior rules, just add ::after support */
}
.choice .choice-mark {
display: none;
}
.choice.correct .choice-mark,
.choice.wrong .choice-mark {
display: inline-block;
margin-left: 6px;
font-size: 16px;
}
/* Topic detail filter pills */
.topic-filter-pills {
display: flex; gap: 6px; flex-wrap: wrap;
margin: 0 0 10px;
}
.filter-pill {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 500;
padding: 6px 12px;
border-radius: 999px;
background: var(--card);
color: var(--text-2);
border: 1px solid var(--separator);
cursor: pointer;
transition: all .15s;
}
.filter-pill:hover { background: var(--card-2); color: var(--text); }
.filter-pill.active {
background: var(--blue);
color: #fff;
border-color: var(--blue);
}
.filter-pill.active .dot-i { box-shadow: 0 0 0 1.5px rgba(255,255,255,.3); }
/* Next button: more prominent after answer */
.action-btn.action-primary.invite {
/* stronger glow + slight scale */
transform: scale(1.03);
box-shadow: 0 4px 14px rgba(0,122,255,.35), 0 0 0 6px rgba(0,122,255,.18);
}
.qimg-wrap {
position: relative;
background: #fff;
border-radius: 10px;
overflow: hidden;
border: .5px solid var(--separator);
min-height: 80px;
user-select: none; -webkit-user-select: none;
}
[data-theme="dark"] .qimg-wrap,
.qimg-wrap {
/* Subtle ring around the always-white question image */
}
[data-theme="dark"] .qimg-wrap {
box-shadow: 0 0 0 1px rgba(255,255,255,.04), inset 0 0 0 1px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .qimg-wrap {
box-shadow: 0 0 0 1px rgba(255,255,255,.04), inset 0 0 0 1px rgba(0,0,0,.5);
}
}
.qimg-wrap.loading::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(110deg, #fff 30%, #f0f0f0 50%, #fff 70%);
background-size: 200% 100%;
animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.qimg {
display: block; width: 100%; height: auto;
cursor: zoom-in;
opacity: 0;
transition: opacity .2s ease;
position: relative; z-index: 1;
}
.qimg.loaded { opacity: 1; }
.qimg-error {
position: absolute; inset: 0;
background: var(--card-2);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px;
padding: 20px; text-align: center;
color: var(--text-2);
font-size: 14px;
}
.qimg-error svg { width: 32px; height: 32px; opacity: .5; }
.qimg-error button {
background: var(--blue); color: #fff; border: none;
padding: 6px 14px; border-radius: 6px;
font-family: inherit; font-size: 13px; font-weight: 500;
cursor: pointer;
}
/* zoom icon removed — the image itself is tap-to-zoom now */
/* ===== Choices ===== */
.choices {
display: grid; gap: 8px; margin-top: 14px;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
/* Text-choice mode: stack vertically, each row is one full-width text option.
Visually sits right under the image, no extra gap, gives a clean list feel. */
.choices.text-choices {
grid-template-columns: 1fr;
gap: 8px;
margin-top: 14px;
}
.choice.text {
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
align-items: start;
padding: 15px 18px;
min-height: 58px;
font-size: 17px;
font-weight: 500;
text-align: left;
line-height: 1.5;
letter-spacing: 0;
font-feature-settings: normal;
border: 1.5px solid var(--separator);
background: var(--card);
}
.choice.text .choice-num {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--tertiary);
color: var(--text-2);
font-size: 15px; font-weight: 700;
flex-shrink: 0;
font-feature-settings: "tnum";
transition: background .15s, color .15s;
align-self: start;
/* Visually center on the first line of text */
margin-top: -1px;
}
.choice.text .choice-text {
min-width: 0;
word-wrap: break-word; overflow-wrap: break-word;
color: var(--text);
font-weight: 500;
padding-top: 2px; /* nudge text down a hair to align with badge center */
}
.choice.text:hover:not(:disabled) {
border-color: var(--blue);
background: var(--card-2);
}
.choice.text:hover:not(:disabled) .choice-num {
background: rgba(0,122,255,.15);
color: var(--blue);
}
.choice.text.correct {
background: var(--green); color: #fff; border-color: var(--green);
}
.choice.text.wrong {
background: var(--red); color: #fff; border-color: var(--red);
}
.choice.text.correct .choice-text,
.choice.text.wrong .choice-text { color: #fff; }
.choice.text.correct .choice-num,
.choice.text.wrong .choice-num {
background: rgba(255,255,255,.25);
color: #fff;
}
/* Disable the subtle gradient overlay for text choices — it reduces text contrast */
.choice.text::before { display: none; }
.choice {
font-size: 20px; font-weight: 600;
padding: 16px;
border-radius: 12px;
border: 1.5px solid var(--separator);
background: var(--card-2);
color: var(--text);
cursor: pointer;
transition: transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
text-align: center;
min-height: 56px;
position: relative;
font-feature-settings: "tnum";
}
.choice::before {
content: ""; position: absolute; inset: 0;
border-radius: 11px;
background: linear-gradient(to bottom, rgba(255,255,255,.08), transparent 40%);
pointer-events: none;
}
.choice:hover:not(:disabled) {
border-color: var(--blue);
background: var(--card);
}
.choice:active { transform: scale(.95); }
.choice.correct {
background: var(--green); color: #fff; border-color: var(--green);
animation: pop .25s ease;
}
.choice.wrong {
background: var(--red); color: #fff; border-color: var(--red);
animation: shake .35s ease;
}
.choice:disabled { cursor: default; }
/* Fade unselected/uninvolved choices after answer so the eye lands on the right one */
.choices.answered .choice:not(.correct):not(.wrong) {
opacity: .35;
transition: opacity .25s ease .1s;
}
@keyframes pop {
0% { transform: scale(1); }
45% { transform: scale(1.08); }
100% { transform: scale(1); }
}
@keyframes shake {
0%,100% { transform: translateX(0); }
25% { transform: translateX(-6px); }
50% { transform: translateX(6px); }
75% { transform: translateX(-3px); }
}
/* ===== Answer mark overlay ===== */
.answer-mark {
position: fixed;
left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(.4);
width: 140px; height: 140px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
z-index: 400;
opacity: 0;
color: #fff;
font-size: 90px; font-weight: 700;
}
.answer-mark.ok { background: rgba(52,199,89,.92); box-shadow: 0 0 40px rgba(52,199,89,.5); }
.answer-mark.no { background: rgba(255,59,48,.92); box-shadow: 0 0 40px rgba(255,59,48,.5); }
.answer-mark.show { animation: markPop .7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes markPop {
0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
35% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
}
/* ===== Next-button pulse ===== */
.action-btn.invite {
animation: invitePulse 1.6s ease-in-out infinite;
}
@keyframes invitePulse {
0%, 100% { box-shadow: 0 2px 8px rgba(0,122,255,.25); }
50% { box-shadow: 0 2px 8px rgba(0,122,255,.25), 0 0 0 6px rgba(0,122,255,.18); }
}
/* ===== Feedback ===== */
.feedback {
margin-top: 12px;
padding: 12px 14px;
border-radius: 10px;
font-size: 15px; font-weight: 500;
text-align: center;
display: none;
}
.feedback.show {
display: block;
animation: fbSlideIn .25s cubic-bezier(.2,.8,.2,1) both;
}
.feedback.ok { background: rgba(52,199,89,.15); color: var(--green); }
.feedback.no { background: rgba(255,59,48,.15); color: var(--red); }
@keyframes fbSlideIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
/* ===== Practice actions ===== */
.practice-actions {
display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr;
gap: 6px; margin-top: 12px;
}
.action-btn {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px;
padding: 10px 8px;
border-radius: 12px;
border: 1px solid var(--separator);
background: var(--card);
color: var(--text);
cursor: pointer;
transition: transform .08s, background .15s;
font-size: 12px;
min-height: 56px;
}
.action-btn:active { transform: scale(.96); }
.action-btn:hover { background: var(--card-2); }
.action-btn svg { color: var(--text-2); transition: color .15s; }
.action-btn.action-primary {
background: var(--blue); color: #fff; border-color: var(--blue);
box-shadow: 0 2px 8px rgba(0,122,255,.25);
}
.action-btn.action-primary:hover { background: var(--blue); filter: brightness(1.08); }
.action-btn.action-primary svg { color: #fff; }
.action-btn.starred {
color: var(--orange); border-color: rgba(255,149,0,.4); background: rgba(255,149,0,.08);
animation: starPop .35s ease;
}
.action-btn.starred svg { color: var(--orange); fill: var(--orange); }
@keyframes starPop {
0% { transform: scale(1); }
50% { transform: scale(1.12); }
100% { transform: scale(1); }
}
/* ===== Buttons ===== */
.btn {
font-size: 16px; font-weight: 600;
padding: 13px 16px;
border-radius: 12px; border: none;
cursor: pointer;
transition: opacity .15s, transform .08s;
}
.btn:active { transform: scale(.97); opacity: .85; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-secondary {
background: var(--card-2); color: var(--blue);
border: 1px solid var(--separator);
}
.btn-block { width: 100%; }
.btn-text {
background: none; border: none; color: var(--text-2);
padding: 12px; font-size: 15px; cursor: pointer; width: 100%;
}
.btn-text:active { opacity: .55; }
/* ===== Keyboard hint (desktop only, first session) ===== */
.kbd-hint {
display: none;
background: var(--card);
border-radius: 12px;
padding: 10px 14px;
margin-bottom: 10px;
box-shadow: var(--shadow);
position: relative;
animation: viewIn .3s cubic-bezier(.2,.8,.2,1);
}
.kbd-hint[hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) {
.kbd-hint:not([hidden]) { display: block; }
}
.kbd-hint-row {
display: flex; gap: 16px; flex-wrap: wrap;
font-size: 12px; color: var(--text-2);
padding-right: 28px;
}
.kbd-hint-row span { display: inline-flex; align-items: center; gap: 4px; }
.kbd-hint kbd {
display: inline-block;
padding: 1px 5px;
font-family: -apple-system, monospace;
font-size: 11px; font-weight: 600;
background: var(--bg);
border: 1px solid var(--separator);
border-bottom-width: 2px;
border-radius: 4px;
color: var(--text);
}
.kbd-hint-close {
position: absolute; top: 6px; right: 6px;
background: none; border: none;
width: 22px; height: 22px;
font-size: 12px;
color: var(--text-3);
cursor: pointer;
border-radius: 50%;
}
.kbd-hint-close:hover { background: var(--tertiary); color: var(--text); }
/* ===== Resume CTA on Topics ===== */
.resume-card {
background: linear-gradient(135deg, var(--blue) 0%, #5856D6 100%);
color: #fff;
border-radius: 14px;
padding: 14px 16px;
display: flex; align-items: center; gap: 12px;
cursor: pointer;
margin-bottom: 10px;
box-shadow: 0 4px 14px rgba(0,122,255,.3);
border: none; width: 100%; text-align: left;
font-family: inherit;
animation: viewIn .35s cubic-bezier(.2,.8,.2,1);
}
.resume-card:active { transform: scale(.98); }
.resume-info { flex: 1; min-width: 0; }
.resume-title {
font-size: 12px; font-weight: 500;
opacity: .8; text-transform: uppercase; letter-spacing: .06em;
}
.resume-sub {
font-size: 16px; font-weight: 600; margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resume-icon {
width: 38px; height: 38px;
background: rgba(255,255,255,.2);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
/* ===== Empty state ===== */
.empty { text-align: center; padding: 60px 20px; }
.empty-emoji { font-size: 56px; margin-bottom: 8px; }
.empty h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.empty p { color: var(--text-2); margin: 0 0 20px; }
/* ===== Tab bar ===== */
.tabbar {
position: fixed; left: 0; right: 0; bottom: 0;
display: flex; justify-content: space-around;
background: var(--tab-bg);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-top: .5px solid var(--separator);
padding-bottom: env(safe-area-inset-bottom, 0px);
z-index: 100;
}
.tab {
flex: 1; background: none; border: none;
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 7px 4px 6px;
color: var(--text-2);
font-size: 10.5px;
font-weight: 500;
cursor: pointer;
min-height: 52px;
position: relative;
transition: color .15s;
}
.tab svg { width: 22px; height: 22px; transition: transform .15s; }
.tab.active { color: var(--blue); }
.tab.active svg { transform: scale(1.05); }
.tab::after {
content: ""; position: absolute; top: 3px;
width: 5px; height: 5px; border-radius: 50%;
background: var(--blue);
opacity: 0; transform: scale(.5);
transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1.4);
}
.tab.active::after { opacity: 1; transform: scale(1); }
.tab:active { opacity: .55; }
/* ===== Sheet / modal ===== */
.sheet-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,.45);
z-index: 200; opacity: 0; transition: opacity .25s;
}
.sheet-backdrop.show { opacity: 1; }
.sheet {
position: fixed; left: 0; right: 0; bottom: 0;
background: var(--card);
border-radius: 16px 16px 0 0;
padding: 6px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
z-index: 201;
transform: translateY(100%); transition: transform .32s cubic-bezier(.32,.72,0,1);
max-width: 600px; margin: 0 auto;
max-height: 92vh; overflow-y: auto;
}
.sheet.show { transform: translateY(0); }
.sheet-handle {
width: 36px; height: 5px; border-radius: 3px;
background: var(--text-3); margin: 8px auto 14px;
}
.sheet-title {
font-size: 17px; font-weight: 600; text-align: center; margin-bottom: 16px;
}
.about-icon {
font-size: 56px; text-align: center; margin: 10px 0;
}
.about-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
background: var(--card-2);
border-radius: 12px;
padding: 14px 10px;
}
.about-stat { text-align: center; }
.about-stat-num {
font-size: 22px; font-weight: 700;
font-feature-settings: "tnum";
letter-spacing: -.02em;
}
.about-stat-label {
font-size: 11px; color: var(--text-2); margin-top: 2px;
text-transform: uppercase; letter-spacing: .04em;
}
.lightbox[hidden],
.sheet[hidden],
.sheet-backdrop[hidden],
.loader[hidden],
.sidebar[hidden] { display: none !important; }
/* ===== Settings rows ===== */
.setting-row {
display: flex; flex-direction: column; gap: 6px;
margin-bottom: 14px;
}
.setting-label {
font-size: 13px; color: var(--text-2); font-weight: 500;
text-transform: uppercase; letter-spacing: .04em;
}
.setting-row select, .sheet select, .list select {
font-size: 17px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--separator);
background: var(--card-2); color: var(--text);
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
/* ===== Segmented control (with sliding indicator) ===== */
.seg {
position: relative;
display: inline-flex;
background: var(--tertiary);
padding: 2px;
border-radius: 9px;
width: 100%;
}
.seg.vertical { flex-direction: column; align-items: stretch; }
.seg::before {
/* The sliding pill */
content: ""; position: absolute;
top: var(--ind-top, 2px);
left: var(--ind-left, 2px);
width: var(--ind-width, 0);
height: var(--ind-height, calc(100% - 4px));
background: var(--card);
border-radius: 7px;
box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.04);
transition: left .25s cubic-bezier(.2,.8,.2,1.2), width .25s cubic-bezier(.2,.8,.2,1.2), top .25s cubic-bezier(.2,.8,.2,1.2), height .25s cubic-bezier(.2,.8,.2,1.2);
z-index: 0;
pointer-events: none;
opacity: 1;
}
.seg:not(.has-active)::before { opacity: 0; }
.seg-opt {
flex: 1;
background: transparent;
border: none;
color: var(--text);
font-size: 14px; font-weight: 500;
padding: 8px 8px;
border-radius: 7px;
cursor: pointer;
transition: color .15s;
white-space: nowrap;
position: relative; z-index: 1;
}
.seg-opt.active { font-weight: 600; }
[data-theme="dark"] .seg::before,
:root:not([data-theme="light"]) .seg::before {
background: var(--card-2);
box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 0 0 .5px rgba(255,255,255,.05);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .seg::before {
background: var(--card-2);
box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 0 0 .5px rgba(255,255,255,.05);
}
}
/* ===== List (settings/grouped iOS-style) ===== */
.list {
background: var(--card);
border-radius: 12px;
overflow: hidden;
margin-bottom: 18px;
box-shadow: var(--shadow);
}
.list-item {
display: flex; align-items: center; gap: 12px;
padding: 13px 16px;
background: var(--card);
border: none;
width: 100%;
font-family: inherit; font-size: 17px;
color: var(--text);
text-align: left;
cursor: default;
position: relative;
}
/* Inset separator like native iOS — starts after icon */
.list-item:not(:last-child)::after {
content: ""; position: absolute;
left: 16px; right: 0; bottom: 0;
height: .5px; background: var(--separator);
}
.list-item:has(.list-icon-wrap):not(:last-child)::after { left: 60px; }
.list-item:last-child { border-bottom: none; }
.list-action { cursor: pointer; transition: background .15s; }
.list-action:active { background: var(--tertiary); }
.list-action.danger { color: var(--red); justify-content: center; }
.list-icon-wrap {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
border-radius: 8px;
font-size: 18px; font-weight: 600;
flex-shrink: 0;
}
.list-text { flex: 1; min-width: 0; }
.list-label { font-size: 16px; }
.list-sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.list-value { color: var(--text-2); font-size: 15px; flex-shrink: 0; }
.chev { color: var(--text-3); font-size: 22px; line-height: 1; flex-shrink: 0; }
.list-input { flex-direction: column; align-items: stretch; gap: 8px; }
.list-input .list-label { font-size: 14px; color: var(--text-2); }
.footer-info {
text-align: center; color: var(--text-2);
margin-top: 24px; padding: 0 16px;
}
.footer-info p { margin: 4px 0; }
/* ===== Section title ===== */
.section-title {
font-size: 13px; font-weight: 600; text-transform: uppercase;
letter-spacing: .06em; color: var(--text-2);
margin: 22px 12px 8px;
}
.section-title:first-child { margin-top: 4px; }
#view-settings .section-title { margin-top: 26px; }
#view-settings .section-title:first-child { margin-top: 8px; }
/* ===== Hero stats ===== */
.hero {
position: relative;
background: linear-gradient(135deg, var(--card) 0%, var(--card-2) 100%);
border-radius: 16px;
padding: 20px 14px;
box-shadow: var(--shadow);
margin-bottom: 6px;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute; top: -40px; right: -40px;
width: 140px; height: 140px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,122,255,.08), transparent 70%);
pointer-events: none;
}
.hero-row {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 4px;
position: relative;
}
.hero-cell {
text-align: center;
position: relative;
}
.hero-cell + .hero-cell::before {
content: "";
position: absolute; left: 0; top: 25%; bottom: 25%;
width: .5px; background: var(--separator);
}
.hero-num {
font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
font-feature-settings: "tnum";
}
.hero-ring-wrap {
display: inline-flex; align-items: center; justify-content: center;
position: relative;
}
.hero-ring {
width: 64px; height: 64px;
display: block;
}
.hero-ring circle {
fill: none; stroke-width: 6;
transform: rotate(-90deg); transform-origin: center;
transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1);
}
.hero-ring .ring-bg { stroke: var(--tertiary); }
.hero-ring .ring-fg {
stroke: var(--ring-color, var(--blue));
stroke-linecap: round;
transition: stroke .35s ease;
}
.hero-ring-label {
position: absolute;
font-size: 13px; font-weight: 700;
font-feature-settings: "tnum";
color: var(--text);
}
.hero-label {
font-size: 11px; color: var(--text-2); margin-top: 4px;
text-transform: uppercase; letter-spacing: .04em; font-weight: 500;
}
.hero-today {
position: absolute;
top: 12px; right: 12px;
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
background: rgba(52,199,89,.14);
color: var(--green);
z-index: 1;
}
.hero-today::before {
content: ""; width: 6px; height: 6px;
border-radius: 50%; background: var(--green);
box-shadow: 0 0 0 2px rgba(52,199,89,.25);
animation: dotPulse 1.6s ease-in-out infinite;
}
.hero-today[hidden] { display: none !important; }
/* ===== Topic list rows ===== */
.topic-row {
display: flex; align-items: center; gap: 12px;
padding: 13px 16px;
border-bottom: .5px solid var(--separator);
background: var(--card);
cursor: pointer;
border: none; width: 100%; text-align: left;
color: var(--text); font-family: inherit; font-size: 17px;
transition: background .15s;
animation: rowFadeIn .35s cubic-bezier(.2,.8,.2,1) backwards;
}
.topic-row:last-child { border-bottom: none; }
.topic-row:hover { background: var(--card-2); }
.topic-row:active { background: var(--tertiary); transform: scale(.995); }
@keyframes rowFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.topic-name { font-weight: 500; min-width: 80px; }
.topic-bar-wrap {
flex: 1; height: 6px; background: var(--tertiary);
border-radius: 3px; overflow: hidden;
}
.topic-bar {
height: 100%; background: var(--blue); border-radius: 3px;
transition: width .3s ease;
}
.topic-pct { font-size: 13px; color: var(--text-2); min-width: 42px; text-align: right; }
/* ===== Performance card (sparkline + topic bars) ===== */
.perf-card {
display: flex; flex-direction: column;
gap: 18px;
}
.perf-block .perf-label {
font-size: 13px; font-weight: 600;
color: var(--text-2);
text-transform: uppercase; letter-spacing: .04em;
margin-bottom: 8px;
}
.perf-block .perf-sub {
font-size: 12px; color: var(--text-2); margin-top: 4px;
}
.sparkline {
display: block; width: 100%; height: 48px;
color: var(--blue);
}
.sparkline-wrap {
position: relative;
background: linear-gradient(180deg, rgba(0,122,255,.06), transparent);
border-radius: 8px;
padding: 6px 8px;
}
.sparkline-stats {
display: flex; justify-content: space-between; gap: 12px;
font-size: 12px; color: var(--text-2);
margin-top: 4px;
}
.sparkline-stats b { color: var(--text); font-weight: 600; }
.topic-bar-chart { display: flex; flex-direction: column; gap: 6px; }
.tbc-row {
display: grid; grid-template-columns: 70px 1fr 38px;
gap: 8px; align-items: center;
font-size: 13px;
}
.tbc-name { color: var(--text-2); }
.tbc-track {
height: 8px; background: var(--tertiary); border-radius: 4px;
overflow: hidden;
}
.tbc-fill {
height: 100%; border-radius: 4px;
background: var(--blue);
transition: width .4s cubic-bezier(.2,.8,.2,1);
}
.tbc-fill.good { background: var(--green); }
.tbc-fill.mid { background: var(--orange); }
.tbc-fill.bad { background: var(--red); }
.tbc-pct {
text-align: right; font-weight: 600; font-feature-settings: "tnum";
color: var(--text-2);
}
/* ===== Activity heatmap ===== */
.heatmap-card {
background: var(--card);
border-radius: 14px;
padding: 14px 12px;
box-shadow: var(--shadow);
display: flex; flex-direction: column; gap: 8px;
}
.heatmap-header {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 12px; color: var(--text-2);
}
.heatmap-range { font-weight: 500; }
.heatmap-today-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 600;
color: var(--green);
padding: 2px 8px; border-radius: 999px;
background: rgba(52,199,89,.14);
}
.heatmap-today-badge::before {
content: ""; width: 6px; height: 6px;
border-radius: 50%; background: var(--green);
box-shadow: 0 0 0 2px rgba(52,199,89,.25);
animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(52,199,89,.25); }
50% { box-shadow: 0 0 0 5px rgba(52,199,89,.12); }
}
.heatmap-grid {
display: grid;
grid-template-columns: repeat(30, 1fr);
gap: 3px;
}
.heat-cell {
aspect-ratio: 1;
border-radius: 3px;
background: var(--tertiary);
position: relative;
transition: transform .12s, box-shadow .12s;
animation: heatFadeIn .35s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes heatFadeIn {
from { opacity: 0; transform: scale(.5); }
to { opacity: 1; transform: scale(1); }
}
.heat-cell.l1 { background: rgba(0,122,255,.18); }
.heat-cell.l2 { background: rgba(0,122,255,.36); }
.heat-cell.l3 { background: rgba(0,122,255,.58); }
.heat-cell.l4 { background: rgba(0,122,255,.85); }
[data-theme="dark"] .heat-cell.l1 { background: rgba(10,132,255,.22); }
[data-theme="dark"] .heat-cell.l2 { background: rgba(10,132,255,.45); }
[data-theme="dark"] .heat-cell.l3 { background: rgba(10,132,255,.70); }
[data-theme="dark"] .heat-cell.l4 { background: rgba(10,132,255,1); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .heat-cell.l1 { background: rgba(10,132,255,.22); }
:root:not([data-theme="light"]) .heat-cell.l2 { background: rgba(10,132,255,.45); }
:root:not([data-theme="light"]) .heat-cell.l3 { background: rgba(10,132,255,.70); }
:root:not([data-theme="light"]) .heat-cell.l4 { background: rgba(10,132,255,1); }
}
.heat-cell.today { box-shadow: 0 0 0 1.5px var(--text); }
.heat-cell:hover { transform: scale(1.4); z-index: 1; }
.heatmap-meta {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: var(--text-2);
}
.heat-legend { display: inline-flex; align-items: center; gap: 3px; }
.heat-legend .heat-cell {
width: 10px; height: 10px; border-radius: 2px;
aspect-ratio: unset;
}
/* Topic row: accuracy color badge */
.topic-acc {
font-size: 11px; font-weight: 600;
padding: 2px 7px; border-radius: 999px;
background: var(--tertiary);
color: var(--text-2);
margin-right: 6px;
min-width: 36px; text-align: center;
font-feature-settings: "tnum";
}
.topic-acc.good { background: rgba(52,199,89,.18); color: var(--green); }
.topic-acc.mid { background: rgba(255,149,0,.18); color: var(--orange); }
.topic-acc.bad { background: rgba(255,59,48,.18); color: var(--red); }
/* ===== Topic detail / Q-grid ===== */
.topic-summary {
background: var(--card);
border-radius: 14px;
padding: 16px;
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 8px;
box-shadow: var(--shadow);
}
.summary-cell { text-align: center; }
.summary-num { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.summary-label { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.topic-legend {
display: flex; gap: 14px; padding: 4px 4px 10px;
font-size: 12px; color: var(--text-2);
flex-wrap: wrap;
}
.topic-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dot-i {
display: inline-block;
width: 10px; height: 10px; border-radius: 3px;
background: var(--tertiary);
}
.dot-i.correct { background: var(--green); }
.dot-i.wrong { background: var(--red); }
.dot-i.unseen { background: var(--tertiary); border: 1px solid var(--separator); }
.q-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
gap: 5px;
background: var(--card);
padding: 10px;
border-radius: 12px;
box-shadow: var(--shadow);
}
.q-cell {
aspect-ratio: 1;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 500;
border-radius: 7px;
background: var(--tertiary);
color: var(--text-2);
border: 1px solid transparent;
cursor: pointer;
position: relative;
transition: transform .08s;
font-feature-settings: "tnum";
}
.q-cell:active { transform: scale(.92); }
.q-cell.correct { background: var(--green); color: #fff; }
.q-cell.wrong { background: var(--red); color: #fff; }
.q-cell.unseen { background: var(--tertiary); color: var(--text-2); }
/* Difficulty tiers (varies opacity of base color by wrong-rate) */
.q-cell.correct[data-diff="hard"] { background: linear-gradient(135deg, var(--green), var(--orange)); }
.q-cell.wrong[data-diff="repeat"] { box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.q-cell.starred::after {
content: ""; position: absolute; top: 2px; right: 2px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--orange);
box-shadow: 0 0 0 1.5px var(--card);
}
/* ===== Exam ===== */
/* Pre-exam stats for official mode */
.exam-official-stats {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 8px; margin-bottom: 16px;
}
.eos-cell {
background: var(--card-2);
border-radius: 10px;
padding: 10px 8px;
text-align: center;
}
.eos-num {
font-size: 18px; font-weight: 700;
letter-spacing: -.02em;
font-feature-settings: "tnum";
}
.eos-label {
font-size: 11px; color: var(--text-2); margin-top: 2px;
text-transform: uppercase; letter-spacing: .04em;
}
.eos-num.good { color: var(--green); }
.eos-num.mid { color: var(--orange); }
.eos-num.bad { color: var(--red); }
/* Official exam info card */
.exam-official-info {
background: linear-gradient(135deg, rgba(0,122,255,.10), rgba(88,86,214,.10));
border: .5px solid rgba(0,122,255,.2);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 16px;
display: flex; gap: 18px; justify-content: center;
flex-wrap: wrap;
}
.eoi-row {
font-size: 13px; color: var(--text-2);
text-align: center;
}
.eoi-row b {
display: block;
font-size: 22px; font-weight: 700;
color: var(--blue);
letter-spacing: -.02em;
}
.exam-chip.danger { background: rgba(255,59,48,.18); color: var(--red); }
.exam-chip.warn { background: rgba(255,149,0,.18); color: var(--orange); }
.result-summary.passed {
background: linear-gradient(135deg, rgba(52,199,89,.15), rgba(52,199,89,.05));
border: 1px solid rgba(52,199,89,.3);
}
.result-summary.failed {
background: linear-gradient(135deg, rgba(255,59,48,.15), rgba(255,59,48,.05));
border: 1px solid rgba(255,59,48,.3);
}
.result-verdict {
font-size: 32px; font-weight: 800; letter-spacing: -.02em;
margin-top: 6px;
text-transform: uppercase;
}
.result-verdict.ok { color: var(--green); }
.result-verdict.no { color: var(--red); }
.exam-pills {
display: flex; gap: 4px; flex-wrap: wrap;
margin-bottom: 10px;
background: var(--card);
padding: 8px;
border-radius: 10px;
box-shadow: var(--shadow);
}
.exam-pills.compact { gap: 3px; padding: 6px; }
.exam-pills.compact .exam-pill {
min-width: 22px; height: 22px;
font-size: 11px;
border-width: 1.5px;
}
.exam-pill {
min-width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
border-radius: 6px;
background: var(--tertiary);
color: var(--text-2);
font-size: 12px; font-weight: 600;
cursor: pointer;
border: 2px solid transparent;
transition: background .15s, transform .08s, color .15s;
font-feature-settings: "tnum";
}
.exam-pill:active { transform: scale(.92); }
.exam-pill.answered { background: var(--blue); color: #fff; }
.exam-pill.correct { background: var(--green); color: #fff; }
.exam-pill.wrong { background: var(--red); color: #fff; }
.exam-pill.skipped { background: var(--tertiary); color: var(--text-2); border-color: var(--text-3); }
.exam-pill.current { border-color: var(--text); }
.exam-bar {
display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap;
}
.exam-chip {
font-size: 13px; font-weight: 600;
padding: 6px 12px; border-radius: 999px;
background: var(--tertiary); color: var(--text-2);
white-space: nowrap;
font-feature-settings: "tnum";
}
.exam-chip.urgent {
background: rgba(255,59,48,.18); color: var(--red);
animation: timerPulse 1s ease-in-out infinite;
}
@keyframes timerPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
.result-summary {
text-align: center; padding: 28px 20px;
background: var(--card); border-radius: 14px;
margin-bottom: 16px; box-shadow: var(--shadow);
}
.result-emoji { font-size: 64px; margin-bottom: 8px; }
.result-score { font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.result-pct { font-size: 17px; color: var(--text-2); margin-top: 4px; }
.result-actions { display: flex; gap: 8px; margin-top: 18px; }
.result-actions .btn { flex: 1; }
.review-item {
background: var(--card); padding: 12px 16px;
border-bottom: .5px solid var(--separator);
display: flex; align-items: center; gap: 12px;
cursor: pointer;
transition: background .15s;
width: 100%;
border-left: none; border-right: none; border-top: none;
text-align: left;
color: var(--text); font-family: inherit; font-size: 15px;
}
.review-item:active { background: var(--tertiary); }
.review-item:last-child { border-bottom: none; }
.review-mark {
font-size: 22px; flex-shrink: 0;
width: 28px; text-align: center;
}
.review-mark.ok { color: var(--green); }
.review-mark.no { color: var(--red); }
.review-mark.skip { color: var(--text-3); }
.review-info { flex: 1; min-width: 0; }
.review-meta { font-size: 13px; color: var(--text-2); margin-top: 2px; }
/* ===== Lightbox ===== */
.lightbox {
position: fixed; inset: 0; background: rgba(0,0,0,.96);
z-index: 300; display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .2s;
}
.lightbox.show { opacity: 1; }
.lightbox img {
max-width: 100%; max-height: 100%;
touch-action: pinch-zoom;
transition: transform .25s cubic-bezier(.2,.8,.2,1);
user-select: none; -webkit-user-select: none;
cursor: zoom-in;
}
.lightbox img.zoomed {
transform: scale(2);
cursor: zoom-out;
}
.lightbox-close {
position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,.16);
border: .5px solid rgba(255,255,255,.18);
color: #fff;
cursor: pointer;
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
display: flex; align-items: center; justify-content: center;
transition: background .15s, transform .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,.28); }
.lightbox-close:active { transform: scale(.92); }
/* ===== Switch ===== */
.switch {
position: relative; display: inline-block;
width: 51px; height: 31px; flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
position: absolute; cursor: pointer;
inset: 0; background: var(--tertiary);
border-radius: 31px;
transition: background .2s;
}
.switch span:before {
content: ""; position: absolute;
height: 27px; width: 27px; left: 2px; top: 2px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
transition: transform .2s;
}
.switch input:checked + span { background: var(--green); }
.switch input:checked + span:before { transform: translateX(20px); }
/* ===== Command palette (Cmd-K) ===== */
.cmdk-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 220;
opacity: 0; transition: opacity .2s;
}
.cmdk-backdrop.show { opacity: 1; }
.cmdk {
position: fixed; left: 50%; top: 25%;
transform: translate(-50%, -10px) scale(.98);
width: min(90vw, 580px);
background: var(--card);
border-radius: 14px;
box-shadow: 0 24px 56px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.15);
z-index: 221;
opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1);
overflow: hidden;
display: flex; flex-direction: column;
max-height: 60vh;
}
.cmdk.show {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
.cmdk[hidden], .cmdk-backdrop[hidden] { display: none !important; }
.cmdk-input-wrap {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px;
border-bottom: .5px solid var(--separator);
}
.cmdk-search-icon { color: var(--text-2); flex-shrink: 0; }
.cmdk input {
flex: 1;
background: none; border: none; outline: none;
font-size: 16px; color: var(--text);
font-family: inherit;
}
.cmdk-hint {
font-family: inherit;
font-size: 11px;
padding: 2px 6px; border-radius: 4px;
background: var(--tertiary); color: var(--text-2);
border: .5px solid var(--separator);
}
.cmdk-results {
flex: 1;
overflow-y: auto;
padding: 6px 6px 10px;
}
.cmdk-section {
font-size: 10.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: .07em;
color: var(--text-3);
padding: 10px 12px 3px;
}
.cmdk-section:first-child { padding-top: 4px; }
.cmdk-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: 7px;
cursor: pointer;
background: transparent;
border: none; width: 100%; text-align: left;
color: var(--text); font-family: inherit; font-size: 14px;
transition: background .1s;
}
.cmdk-item:hover, .cmdk-item.selected {
background: var(--sidebar-active, rgba(0,122,255,.12));
color: var(--sidebar-active-text, var(--blue));
}
.cmdk-item-icon {
width: 24px; height: 24px;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
background: var(--tertiary);
flex-shrink: 0;
font-size: 12px;
}
.cmdk-item-text { flex: 1; min-width: 0; }
.cmdk-item-label { font-weight: 500; }
.cmdk-item-sub { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.cmdk-empty {
padding: 28px 20px; text-align: center;
color: var(--text-2); font-size: 14px;
}
.cmdk-empty::before {
content: "🔍";
display: block; font-size: 32px; margin-bottom: 8px; opacity: .5;
}
.cmdk-footer {
display: flex; align-items: center; gap: 14px;
padding: 8px 14px; border-top: .5px solid var(--separator);
font-size: 11px; color: var(--text-2);
background: var(--card-2);
}
.cmdk-footer span { display: inline-flex; align-items: center; gap: 4px; }
.cmdk-footer kbd {
font-family: inherit; font-size: 10px;
padding: 1px 5px; border-radius: 3px;
background: var(--card); color: var(--text);
border: .5px solid var(--separator);
font-weight: 600;
}
/* ===== Pomodoro floating bar ===== */
.pomo-bar {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 60px);
left: 50%;
transform: translateX(-50%);
z-index: 150;
background: var(--card);
border: .5px solid var(--separator);
border-radius: 999px;
box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
display: flex; align-items: center; gap: 10px;
padding: 6px 10px 6px 12px;
font-size: 13px; font-weight: 500;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
max-width: 92vw;
}
.pomo-bar[hidden] { display: none; }
.pomo-bar.break { background: rgba(52,199,89,.15); border-color: rgba(52,199,89,.3); color: var(--green); }
.pomo-emoji { font-size: 16px; }
.pomo-time { font-feature-settings: "tnum"; font-weight: 600; }
.pomo-close {
background: none; border: none; color: var(--text-2);
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 13px;
}
.pomo-close:hover { background: var(--tertiary); color: var(--text); }
@media (min-width: 900px) {
.pomo-bar { top: 16px; left: auto; right: 24px; transform: none; }
}
/* ===== Toast ===== */
.toast {
position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%) translateY(20px);
background: rgba(28,28,30,.92); color: #fff;
padding: 11px 18px; border-radius: 999px;
font-size: 14px; font-weight: 500;
z-index: 250;
max-width: 88vw;
opacity: 0; transition: opacity .2s, transform .3s cubic-bezier(.2,.8,.2,1);
backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
display: flex; align-items: center; gap: 8px;
pointer-events: none;
box-shadow: 0 10px 30px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.15);
}
@media (min-width: 900px) {
.toast { bottom: 24px; }
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.toast[hidden] { display: none; }
.toast .toast-emoji { font-size: 18px; }
/* ===== Onboarding ===== */
.onboarding {
padding: max(env(safe-area-inset-top, 0px), 12px) 24px env(safe-area-inset-bottom, 24px);
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh; min-height: 100dvh;
max-width: none !important;
margin: 0;
position: relative;
background:
radial-gradient(60% 50% at 50% 18%, rgba(0,122,255,.10), transparent 70%),
radial-gradient(60% 50% at 50% 100%, rgba(175,82,222,.06), transparent 70%);
}
[data-theme="dark"] .onboarding,
:root:not([data-theme="light"]) .onboarding {
background:
radial-gradient(60% 50% at 50% 18%, rgba(10,132,255,.14), transparent 70%),
radial-gradient(60% 50% at 50% 100%, rgba(191,90,242,.10), transparent 70%);
}
.onboard-slides {
flex: 0 1 auto;
display: flex; align-items: center;
width: 100%; max-width: 420px;
overflow: hidden; position: relative;
touch-action: pan-y;
}
@media (min-width: 900px) {
.onboard-slides { max-width: 480px; }
.onboard-slide h1 { font-size: 34px !important; }
.onboard-slide p { font-size: 18px !important; }
.onboard-icon { font-size: 96px !important; margin-bottom: 22px !important; }
.onboarding .btn { max-width: 480px !important; padding: 14px 18px !important; }
}
.onboard-track {
display: flex; width: 100%;
transition: transform .35s cubic-bezier(.2,.8,.2,1);
will-change: transform;
}
.onboard-track.dragging { transition: none; }
.onboard-slide {
flex: 0 0 100%;
padding: 24px 8px;
width: 100%;
user-select: none; -webkit-user-select: none;
}
.onboard-icon { font-size: 80px; margin-bottom: 18px; }
.onboard-slide h1 {
font-size: 28px; font-weight: 700; letter-spacing: -.02em;
margin: 0 0 10px;
}
.onboard-slide p {
font-size: 17px; color: var(--text-2); line-height: 1.45;
margin: 0;
}
.onboard-dots {
display: flex; gap: 8px; margin: 24px 0 20px;
justify-content: center;
}
.onboard-dots .dot {
width: 8px; height: 8px; border-radius: 4px;
background: var(--text-3);
transition: width .25s cubic-bezier(.2,.8,.2,1.3), background .2s;
}
.onboard-dots .dot.active {
background: var(--blue);
width: 26px;
}
.onboarding .btn {
max-width: 380px; width: 100%;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.onboarding .btn-text {
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 12px);
right: 16px;
width: auto;
font-size: 14px;
padding: 8px 14px;
border-radius: 6px;
}
.onboarding .btn-text:hover { background: var(--card-2); }
@keyframes slideIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===== Confetti ===== */
.confetti-host {
position: fixed; inset: 0;
pointer-events: none; z-index: 500;
overflow: hidden;
}
.confetti {
position: absolute;
width: 8px; height: 14px;
top: -20px;
will-change: transform, opacity;
animation: confettiFall 2.6s cubic-bezier(.25,.65,.4,1) forwards;
}
@keyframes confettiFall {
0% { opacity: 1; transform: translate3d(0, -10vh, 0) rotate(0deg); }
100% { opacity: 0; transform: translate3d(var(--dx, 0), 110vh, 0) rotate(720deg); }
}
/* ============================================================
macOS-style desktop layout (>=900px)
On phone, the bottom tab bar stays; on desktop, sidebar takes over.
============================================================ */
.sidebar { display: none; }
@media (min-width: 900px) {
body {
display: grid;
grid-template-columns: 244px 1fr;
padding-bottom: env(safe-area-inset-bottom, 0px);
background:
radial-gradient(1200px 600px at -200px -100px, rgba(0,122,255,.06), transparent 60%),
radial-gradient(1200px 600px at calc(100% + 200px) 100%, rgba(175,82,222,.06), transparent 60%),
var(--bg);
background-attachment: fixed;
}
/* During onboarding the sidebar is hidden — collapse body to single column so the
welcome screen is centered on the actual viewport, not offset by an empty grid track. */
body.no-tabs {
display: block;
}
[data-theme="dark"] body,
:root:not([data-theme="light"]) body {
background:
radial-gradient(1200px 600px at -200px -100px, rgba(10,132,255,.08), transparent 60%),
radial-gradient(1200px 600px at calc(100% + 200px) 100%, rgba(191,90,242,.08), transparent 60%),
var(--bg);
background-attachment: fixed;
}
.tabbar { display: none !important; }
.sidebar {
display: flex !important;
flex-direction: column;
position: sticky; top: 0;
height: 100vh;
background: var(--sidebar-bg);
backdrop-filter: saturate(180%) blur(40px);
-webkit-backdrop-filter: saturate(180%) blur(40px);
border-right: .5px solid var(--separator);
padding: 8px 10px 12px;
overflow-y: auto;
scrollbar-width: thin;
}
.view {
max-width: 980px;
width: 100%;
margin: 0 auto;
min-height: 100vh;
}
.content { max-width: 880px; padding: 20px 24px; }
.nav {
padding-left: 24px; padding-right: 24px;
}
.nav-title { font-size: 19px; letter-spacing: -.01em; }
.qcard { padding: 20px; border-radius: 16px; }
.hero { padding: 24px 20px; border-radius: 18px; }
.card { padding: 24px; border-radius: 16px; }
.list { border-radius: 14px; }
.qimg { max-width: 640px; margin: 0 auto; }
.qimg-wrap { max-width: 700px; margin: 0 auto; }
.choices { max-width: 540px; margin-left: auto; margin-right: auto; margin-top: 18px; }
.practice-actions { max-width: 540px; margin-left: auto; margin-right: auto; }
/* Card hover lift — macOS-like */
.qcard, .card, .list, .hero {
transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
/* macOS-style scrollbars */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
background: rgba(128,128,128,.4);
border-radius: 6px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(128,128,128,.6); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
/* Sheets become centered modals on desktop, not bottom drawers */
.sheet {
bottom: auto; left: 50%; top: 50%;
transform: translate(-50%, -45%) scale(.98);
max-width: 440px; width: 440px;
border-radius: 16px;
box-shadow: 0 24px 56px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.12);
padding: 20px 24px 24px;
}
.sheet.show { transform: translate(-50%, -50%) scale(1); }
.sheet-handle { display: none; }
/* Filter sheet items more compact */
.setting-row { margin-bottom: 16px; }
/* macOS unified title-area: big title appears below toolbar */
.nav { padding-top: 14px; padding-bottom: 12px; }
.nav-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.nav-subtitle { font-size: 12px; }
/* Topic detail: 2-col layout on desktop (summary left, grid right) */
#view-topic-detail .content {
display: grid;
grid-template-columns: 280px 1fr;
gap: 18px;
align-items: start;
}
#view-topic-detail .topic-summary {
grid-column: 1; grid-row: 1 / span 4;
grid-template-columns: 1fr;
gap: 14px;
text-align: left;
position: sticky; top: 80px;
}
#view-topic-detail .summary-cell { text-align: left; }
#view-topic-detail .topic-summary .summary-num { font-size: 28px; }
#view-topic-detail .section-title { grid-column: 2; margin: 0 0 4px; }
#view-topic-detail .topic-legend { grid-column: 2; padding-top: 0; }
#view-topic-detail .q-grid { grid-column: 2; }
/* Topics tab: hero + topic list nice 1-col on desktop, but limit width */
#view-topics .content { max-width: 760px; }
/* Settings: 2-col flat layout on wider screens */
#view-settings .content { max-width: 760px; }
/* Practice screen: keep card centered, prominent */
.qcard { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); }
[data-theme="dark"] .qcard,
:root:not([data-theme="light"]) .qcard {
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
}
}
/* On wide desktops we keep the image and choices stacked vertically so the answer
text has the full card width to breathe. Side-by-side was too narrow for prose. */
/* sidebar tokens */
:root, [data-theme="light"] {
--sidebar-bg: rgba(246,246,247,.78);
--sidebar-hover: rgba(0,0,0,.05);
--sidebar-active: rgba(0,122,255,.12);
--sidebar-active-text: #007AFF;
}
[data-theme="dark"] {
--sidebar-bg: rgba(30,30,32,.72);
--sidebar-hover: rgba(255,255,255,.06);
--sidebar-active: rgba(10,132,255,.2);
--sidebar-active-text: #0A84FF;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--sidebar-bg: rgba(30,30,32,.72);
--sidebar-hover: rgba(255,255,255,.06);
--sidebar-active: rgba(10,132,255,.2);
--sidebar-active-text: #0A84FF;
}
}
.sidebar-titlebar {
display: flex; gap: 7px; padding: 6px 4px 14px;
}
.window-dot {
width: 12px; height: 12px; border-radius: 50%;
display: inline-block;
}
.window-dot.red { background: #FF5F57; }
.window-dot.yellow { background: #FEBC2E; }
.window-dot.green { background: #28C840; }
.sidebar-brand {
display: flex; align-items: center; gap: 10px;
padding: 0 8px 10px;
margin-bottom: 4px;
}
.sidebar-icon {
width: 32px; height: 32px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
background: var(--card-2);
flex-shrink: 0;
}
.sidebar-title {
font-size: 15px; font-weight: 700; letter-spacing: -.01em;
line-height: 1.1;
}
.sidebar-subtitle {
font-size: 11px; color: var(--text-2);
margin-top: 2px;
}
.sidebar-section {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em;
color: var(--text-2);
padding: 12px 10px 4px;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar-item {
display: flex; align-items: center; gap: 9px;
padding: 5px 8px 5px 6px;
background: transparent;
border: none;
color: var(--text);
font-size: 13px; font-weight: 500;
border-radius: 7px;
cursor: pointer;
width: 100%; text-align: left;
transition: background .12s ease, color .12s ease;
}
.sidebar-item:hover { background: var(--sidebar-hover); }
.sidebar-item.active {
background: var(--sidebar-active);
color: var(--sidebar-active-text);
font-weight: 600;
}
.sidebar-item > svg {
/* Color the icon inside the square */
color: #fff;
flex-shrink: 0;
}
.sidebar-item span:not(.sidebar-badge) { flex: 1; }
/* macOS Sonoma colored icon squares */
.sidebar-item {
--sb-color: #007AFF;
}
.sidebar-item[data-target="practice"] { --sb-color: #007AFF; }
.sidebar-item[data-target="topics"] { --sb-color: #AF52DE; }
.sidebar-item[data-target="exam"] { --sb-color: #FF9500; }
.sidebar-item[data-target="settings"] { --sb-color: #8E8E93; }
.sidebar-item#sbSmart { --sb-color: #5856D6; }
.sidebar-item#sbWrong { --sb-color: #FF3B30; }
.sidebar-item#sbStarred { --sb-color: #FFCC00; }
.sidebar-item#sbUnseen { --sb-color: #34C759; }
.sidebar-item > svg {
width: 14px; height: 14px;
padding: 4px;
background: var(--sb-color);
border-radius: 5px;
box-sizing: content-box;
box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.sidebar-badge {
font-size: 11px; font-weight: 600;
padding: 1px 7px;
border-radius: 999px;
background: var(--card-2); color: var(--text-2);
min-width: 18px; text-align: center;
}
.sidebar-item.active .sidebar-badge {
background: var(--sidebar-active-text); color: #fff;
}
.sidebar-spacer { flex: 1; }
.sidebar-footer {
border-top: .5px solid var(--separator);
padding-top: 10px; margin-top: 10px;
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.sb-stat {
background: var(--card);
border-radius: 8px;
padding: 8px 10px;
text-align: center;
}
.sb-stat-num { font-size: 15px; font-weight: 700; font-feature-settings: "tnum"; }
.sb-stat-label { font-size: 10px; color: var(--text-2); margin-top: 1px; }
.sidebar-cmdk-cta {
margin-top: 8px;
width: 100%;
display: flex; align-items: center; gap: 8px;
padding: 6px 10px;
background: var(--card);
border: .5px solid var(--separator);
color: var(--text-2);
border-radius: 7px;
cursor: pointer; font-family: inherit; font-size: 13px;
transition: background .15s;
}
.sidebar-cmdk-cta:hover { background: var(--sidebar-hover); }
.sidebar-cmdk-cta span { flex: 1; text-align: left; }
.sidebar-cmdk-cta kbd {
font-family: inherit; font-size: 11px;
padding: 1px 5px; border-radius: 3px;
background: var(--tertiary); color: var(--text-2);
border: .5px solid var(--separator);
}
/* macOS-style card hover lift (desktop pointer only) */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
.topic-row:hover { background: var(--sidebar-hover); }
.list-action:hover { background: var(--sidebar-hover); }
.qcard, .card, .hero, .heatmap-card, .perf-card, .cat-tile {
transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.qcard:hover, .card:hover, .hero:hover, .heatmap-card:hover, .perf-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
}
.cat-tile:hover {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
}
[data-theme="dark"] .qcard:hover,
[data-theme="dark"] .card:hover,
[data-theme="dark"] .hero:hover,
[data-theme="dark"] .heatmap-card:hover,
[data-theme="dark"] .perf-card:hover,
[data-theme="dark"] .cat-tile:hover,
:root:not([data-theme="light"]) .qcard:hover,
:root:not([data-theme="light"]) .card:hover,
:root:not([data-theme="light"]) .hero:hover,
:root:not([data-theme="light"]) .heatmap-card:hover,
:root:not([data-theme="light"]) .perf-card:hover,
:root:not([data-theme="light"]) .cat-tile:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
}
/* macOS-style focus ring */
@media (min-width: 900px) {
:focus-visible {
outline: 3px solid rgba(0,122,255,.4);
outline-offset: 1px;
border-radius: 6px;
}
}
/* Section title — macOS list-section header style */
.section-title {
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-2);
}
/* ===== Category pill on question card ===== */
.category-pill {
font-size: 11px; font-weight: 600;
padding: 3px 9px; border-radius: 999px;
background: rgba(175,82,222,.14);
color: var(--purple);
cursor: pointer;
transition: background .15s;
}
.category-pill:hover { background: rgba(175,82,222,.22); }
/* ===== Category grid on Topics tab ===== */
.category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 8px;
margin-bottom: 16px;
}
.cat-tile {
background: var(--card);
border-radius: 12px;
padding: 14px;
border: none; text-align: left; cursor: pointer;
font-family: inherit;
display: flex; flex-direction: column; gap: 4px;
box-shadow: var(--shadow);
transition: transform .15s, background .15s;
position: relative;
overflow: hidden;
animation: rowFadeIn .35s cubic-bezier(.2,.8,.2,1) backwards;
}
.cat-tile:hover { background: var(--card-2); }
.cat-tile:active { transform: scale(.985); }
.cat-tile::before {
/* accent stripe at top in the category's color */
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--cat-color, var(--blue));
}
.cat-tile-label {
font-size: 14px; font-weight: 600;
color: var(--text);
line-height: 1.3;
margin-top: 4px;
}
.cat-tile-stats {
display: flex; justify-content: space-between; align-items: baseline;
margin-top: 6px;
font-size: 12px; color: var(--text-2);
font-feature-settings: "tnum";
}
.cat-tile-pct {
font-weight: 600;
color: var(--text-2);
}
.cat-tile-pct.good { color: var(--green); }
.cat-tile-pct.mid { color: var(--orange); }
.cat-tile-pct.bad { color: var(--red); }
.cat-tile-bar {
height: 4px; background: var(--tertiary); border-radius: 2px;
overflow: hidden; margin-top: 6px;
}
.cat-tile-bar > div {
height: 100%; background: var(--cat-color, var(--blue));
transition: width .35s cubic-bezier(.2,.8,.2,1);
}
/* ===== Accent color picker (settings) ===== */
.accent-picker {
display: flex; gap: 10px; flex-wrap: wrap;
}
.accent-swatch {
width: 32px; height: 32px;
border-radius: 50%;
border: none;
cursor: pointer;
position: relative;
transition: transform .15s ease;
box-shadow: 0 0 0 0 transparent;
}
.accent-swatch:hover { transform: scale(1.08); }
.accent-swatch.active {
box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--text-2);
}
.accent-swatch.active::after {
content: ""; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background-image: url("data:image/svg+xml;utf8,");
background-position: center;
background-repeat: no-repeat;
}
/* ===== Phone landscape (short + wide screens) ===== */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1023px) {
.qcard { padding: 10px 14px; }
.qcard-meta { margin-bottom: 4px; }
.qimg-wrap { max-height: 220px; overflow: hidden; }
.qimg { max-height: 220px; object-fit: contain; }
.choices { margin-top: 8px; }
.choice.text { padding: 10px 14px; min-height: 44px; font-size: 15px; }
.practice-actions { margin-top: 6px; }
.action-btn { padding: 6px 4px; min-height: 42px; font-size: 11px; }
.nav { padding-top: 4px; padding-bottom: 4px; min-height: 36px; }
.nav-subtitle { display: none; }
.progress-line { height: 2px; }
.filter-bar { padding: 4px 16px; }
body { padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); }
.tabbar .tab { min-height: 42px; padding: 4px 4px 3px; }
.tabbar .tab span { font-size: 9.5px; }
.tab svg { width: 18px; height: 18px; }
}
/* ===== Print stylesheet ===== */
@media print {
body { background: #fff !important; color: #000 !important; }
.tabbar, .sidebar, .nav, .practice-actions, .filter-bar,
.progress-line, #kbdHint, .qnote, .toast, .lightbox,
.cmdk, .cmdk-backdrop, .sheet, .sheet-backdrop { display: none !important; }
.qcard { box-shadow: none !important; border: 1px solid #ccc; }
.qimg-wrap { border: 1px solid #ddd; }
.feedback { border: 1px solid #ccc; background: #f8f8f8 !important; color: #000 !important; }
}
/* =============================================================
Responsive breakpoints — phones / tablets / desktops
=============================================================
< 480px : compact phones (iPhone SE, Android small)
< 768px : phones / phone landscape
768-1024 : tablets (iPad portrait, Surface, small laptops)
1024+ : desktops
1440+ : large desktops
============================================================= */
/* ----- Compact phones (<= 380px) ----- */
@media (max-width: 380px) {
body { font-size: 16px; }
.choice { padding: 14px; font-size: 18px; min-height: 52px; }
.choice.text { font-size: 16px; padding: 13px 14px; }
.btn { padding: 12px 14px; font-size: 15px; }
.nav-title { font-size: 16px; }
.hero-num { font-size: 24px; }
.qcard { padding: 12px; }
.q-grid { grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); }
.practice-actions { gap: 6px; }
.action-btn { padding: 8px 6px; font-size: 11px; }
.filter-pill { padding: 5px 10px; font-size: 12px; }
}
/* ----- Tablets (768px to 1023px) ----- */
@media (min-width: 768px) and (max-width: 1023px) {
.content { padding: 18px 22px; max-width: 720px; }
.nav { padding-left: 22px; padding-right: 22px; }
.qcard { padding: 18px; border-radius: 16px; }
.hero { padding: 22px 18px; border-radius: 18px; }
.card { padding: 22px; border-radius: 16px; }
.qimg { max-width: 560px; margin: 0 auto; }
.choices { max-width: 560px; margin-left: auto; margin-right: auto; }
.choices.text-choices { max-width: 600px; }
.practice-actions { max-width: 560px; margin-left: auto; margin-right: auto; }
.choice.text { font-size: 17px; padding: 16px 18px; }
.q-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.hero-num { font-size: 30px; }
.topic-summary { padding: 20px; }
.summary-num { font-size: 26px; }
}
/* ----- Tablets in landscape & small laptops (1024px+ but <1280) -----
We already activate the sidebar at 900px. This breakpoint refines spacing. */
@media (min-width: 1024px) and (max-width: 1279px) {
.content { padding: 20px 24px; }
.qcard { padding: 20px; }
}
/* ----- Large desktops (1440px+) ----- */
@media (min-width: 1440px) {
.view { max-width: 1080px; }
.content { max-width: 960px; padding: 24px 28px; }
.qimg { max-width: 720px; }
.choices.text-choices { max-width: 720px; }
}
/* =============================================================
Cross-browser compatibility
=============================================================
Vendor prefixes + fallbacks for Safari, Firefox, older Edge.
============================================================= */
/* Smooth scrolling */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* iOS Safari momentum scrolling */
.content, .sheet, .cmdk-results, .sidebar {
-webkit-overflow-scrolling: touch;
}
/* Disable iOS tap highlight (already applied globally) and double-tap zoom on UI */
button, a, .choice, .tab, .sidebar-item, .filter-pill, .seg-opt {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* But re-enable pinch-zoom on images */
img { touch-action: pinch-zoom; }
.qimg { touch-action: pan-y pinch-zoom; }
/* Prevent text selection on buttons (Firefox + Safari) */
button {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Firefox: hide spinner buttons on number inputs */
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Safari/iOS: prevent rubber-band overscroll bounce on body */
html, body {
overscroll-behavior: none;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* Firefox: scrollbar styling */
* {
scrollbar-width: thin;
scrollbar-color: rgba(128,128,128,.4) transparent;
}
/* Safari: backdrop-filter explicit fallbacks already inline next to each use */
/* Edge legacy: fallback for `gap` in grid is already supported in all modern Edge */
/* Firefox: details/summary marker hidden */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::marker { display: none; }
/* iOS Safari: prevent zoom on input focus by ensuring min font-size 16px */
input, select, textarea {
font-size: 16px;
}
.cmdk input { font-size: 16px; } /* the cmdk had 16px already, just explicit */