/* ===========================================================
PIRLS Reading Portal — Redesign
Theme tokens, base layout, components.
Themes are switched by setting [data-theme] on .
=========================================================== */
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font: inherit; }
a { color: inherit; text-decoration: none; }
/* ---------- Type ---------- */
:root {
--font-serif: "Noto Serif TC", "Source Han Serif TC", "PingFang TC", serif;
--font-sans: "Noto Sans TC", "PingFang TC", -apple-system, "Helvetica Neue", sans-serif;
--font-mono: "JetBrains Mono", "Menlo", monospace;
}
/* ---------- THEME: 書卷 (Scholar Paper) — default ---------- */
:root,
[data-theme="scholar"] {
--bg: #f5efe2;
--bg-soft: #ede5d2;
--surface: #fbf7ec;
--surface-2: #f3ecd9;
--ink: #2a2620;
--ink-soft: #5b5347;
--ink-mute: #8a8170;
--rule: #d9cfb8;
--rule-soft: #e8e0cb;
--accent: #5b6b4f; /* ink-green */
--accent-soft: #e3e8d8;
--accent-strong: #3f4d36;
--warn: #b8794a; /* terracotta */
--warn-soft: #f1dfcd;
--good: #6b8a5e;
--good-soft: #dfe8d3;
--shadow-sm: 0 1px 2px rgba(60,45,20,.06), 0 2px 6px rgba(60,45,20,.05);
--shadow-md: 0 4px 16px rgba(60,45,20,.08), 0 1px 3px rgba(60,45,20,.06);
--shadow-lg: 0 16px 40px rgba(60,45,20,.14), 0 2px 6px rgba(60,45,20,.08);
--radius: 8px;
--radius-lg: 12px;
--header-font: var(--font-serif);
}
/* ---------- THEME: 童趣 (Playful) ---------- */
[data-theme="playful"] {
--bg: #f4f7fb;
--bg-soft: #e8eef7;
--surface: #ffffff;
--surface-2: #f4f7fb;
--ink: #1f2a44;
--ink-soft: #4b5872;
--ink-mute: #8492a8;
--rule: #dde4ef;
--rule-soft: #ecf0f7;
--accent: #2f6fd8;
--accent-soft: #dfeaf9;
--accent-strong: #1f4fa5;
--warn: #e08a3c;
--warn-soft: #fae6cf;
--good: #2fa37a;
--good-soft: #d6efe2;
--shadow-sm: 0 1px 2px rgba(31,42,68,.06), 0 2px 6px rgba(31,42,68,.05);
--shadow-md: 0 4px 16px rgba(31,42,68,.08), 0 1px 3px rgba(31,42,68,.06);
--shadow-lg: 0 16px 40px rgba(31,42,68,.16), 0 2px 6px rgba(31,42,68,.08);
--radius: 14px;
--radius-lg: 20px;
--header-font: var(--font-sans);
}
/* ---------- THEME: 現代 (Modern Minimal) ---------- */
[data-theme="modern"] {
--bg: #fafaf9;
--bg-soft: #f1f1ef;
--surface: #ffffff;
--surface-2: #f7f7f5;
--ink: #18181b;
--ink-soft: #52525b;
--ink-mute: #a1a1aa;
--rule: #e4e4e7;
--rule-soft: #efefef;
--accent: #18181b;
--accent-soft: #e4e4e7;
--accent-strong: #000000;
--warn: #a16207;
--warn-soft: #fef3c7;
--good: #15803d;
--good-soft: #dcfce7;
--shadow-sm: 0 1px 2px rgba(0,0,0,.04);
--shadow-md: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
--shadow-lg: 0 12px 32px rgba(0,0,0,.10);
--radius: 4px;
--radius-lg: 6px;
--header-font: var(--font-sans);
}
/* ---------- THEME: 探索 (Library Explorer) ---------- */
[data-theme="explorer"] {
--bg: #0e1f24;
--bg-soft: #142a31;
--surface: #1a323a;
--surface-2: #234049;
--ink: #f0e6d2;
--ink-soft: #c5b89c;
--ink-mute: #8d8267;
--rule: #2e4f59;
--rule-soft: #243d45;
--accent: #d6a85f; /* brass */
--accent-soft: #3a4538;
--accent-strong: #f0c074;
--warn: #d68a5b;
--warn-soft: #3c2d24;
--good: #98b97a;
--good-soft: #2a3a26;
--shadow-sm: 0 1px 2px rgba(0,0,0,.3);
--shadow-md: 0 4px 16px rgba(0,0,0,.35);
--shadow-lg: 0 16px 40px rgba(0,0,0,.5);
--radius: 6px;
--radius-lg: 10px;
--header-font: var(--font-serif);
}
/* ---------- Base ---------- */
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
min-height: 100vh;
font-size: 15px;
line-height: 1.55;
}
/* Subtle paper texture for scholar / explorer */
[data-theme="scholar"] body {
background-image:
radial-gradient(rgba(120,100,60,.04) 1px, transparent 1px),
radial-gradient(rgba(120,100,60,.03) 1px, transparent 1px);
background-size: 20px 20px, 32px 32px;
background-position: 0 0, 10px 16px;
}
[data-theme="explorer"] body {
background-image: radial-gradient(rgba(214,168,95,.04) 1px, transparent 1px);
background-size: 28px 28px;
}
.shell {
max-width: 1280px;
margin: 0 auto;
padding: 24px 32px 96px;
}
@media (max-width: 680px) {
.shell { padding: 16px 16px 80px; }
}
/* ===========================================================
TOP BAR
=========================================================== */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 8px 0 20px;
border-bottom: 1px solid var(--rule);
margin-bottom: 32px;
}
.topbar .brand {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.brand-mark {
position: relative;
width: 44px; height: 44px;
border-radius: 12px;
background: linear-gradient(140deg, var(--accent) 0%, var(--accent-strong) 100%);
color: var(--surface);
display: grid; place-items: center;
font-family: var(--font-serif);
font-weight: 700;
font-size: 18px;
flex-shrink: 0;
box-shadow:
0 1px 0 rgba(255,255,255,.4) inset,
0 6px 14px -6px var(--accent),
0 0 0 1px rgba(0,0,0,.04);
overflow: hidden;
isolation: isolate;
}
.brand-mark svg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
color: rgba(255,255,255,.18);
z-index: 0;
}
.brand-mark-glyph {
position: relative;
z-index: 1;
text-shadow: 0 1px 0 rgba(0,0,0,.08);
}
[data-theme="explorer"] .brand-mark { color: var(--bg); }
[data-theme="explorer"] .brand-mark svg { color: rgba(0,0,0,.18); }
.brand:hover .brand-mark {
transform: rotate(-3deg) scale(1.04);
transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.brand-mark { transition: transform .25s ease; }
.brand-text {
display: flex; flex-direction: column; line-height: 1.15; min-width: 0;
gap: 2px;
}
.brand-text .school {
font-size: 10.5px;
letter-spacing: .14em;
color: var(--accent-strong);
text-transform: uppercase;
font-weight: 600;
opacity: .9;
}
.brand-text .school .dot {
display: inline-block;
margin: 0 4px;
opacity: .5;
}
.brand-text .name {
font-family: var(--header-font);
font-weight: 700;
font-size: 17px;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: .01em;
}
.brand-text .name .sep {
display: inline-block;
margin: 0 6px;
color: var(--accent);
font-weight: 400;
}
.topbar .nav {
display: flex; gap: 4px; align-items: center;
}
.topbar .nav .nav-item {
position: relative;
padding: 10px 18px;
border-radius: 10px;
font-size: 14px;
color: var(--ink-soft);
font-weight: 500;
cursor: pointer;
transition: all .2s ease;
}
.topbar .nav .nav-item.active {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
color: var(--surface);
font-weight: 700;
box-shadow:
0 1px 0 rgba(255,255,255,.35) inset,
0 6px 14px -6px var(--accent);
}
.topbar .nav .nav-item.active::after {
content: "";
position: absolute;
left: 50%; bottom: -8px;
width: 5px; height: 5px;
background: var(--accent);
border-radius: 50%;
transform: translateX(-50%);
}
[data-theme="explorer"] .topbar .nav .nav-item.active { color: var(--bg); }
.topbar .nav .nav-item:hover:not(.active) {
background: var(--accent-soft);
color: var(--accent-strong);
transform: translateY(-1px);
}
.topbar .user {
display: flex; align-items: center; gap: 10px;
}
.user-chip {
display: flex; align-items: center; gap: 10px;
padding: 5px 14px 5px 5px;
background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 70%);
border: 1px solid var(--accent-soft);
border-radius: 999px;
font-size: 13px;
color: var(--ink-soft);
transition: transform .2s ease, box-shadow .2s ease;
cursor: pointer;
}
.user-chip:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px -6px var(--accent);
border-color: var(--accent);
}
.user-chip .avatar {
position: relative;
width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
color: var(--surface);
display: grid; place-items: center;
font-size: 14px; font-weight: 700;
font-family: var(--font-serif);
box-shadow:
0 0 0 2px var(--surface),
0 0 0 3px var(--accent),
0 4px 8px -2px var(--accent);
flex-shrink: 0;
}
.user-chip .avatar-text { line-height: 1; }
[data-theme="explorer"] .user-chip .avatar { color: var(--bg); }
.user-meta {
display: flex;
flex-direction: column;
line-height: 1.2;
gap: 2px;
min-width: 0;
}
.user-greet {
font-size: 12.5px;
font-weight: 600;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.user-greet .wave {
display: inline-block;
font-size: 13px;
animation: wave 2.4s ease-in-out infinite;
transform-origin: 70% 70%;
}
@keyframes wave {
0%, 60%, 100% { transform: rotate(0deg); }
10% { transform: rotate(14deg); }
20% { transform: rotate(-8deg); }
30% { transform: rotate(14deg); }
40% { transform: rotate(-4deg); }
50% { transform: rotate(10deg); }
}
.user-class {
font-size: 11px;
color: var(--ink-mute);
letter-spacing: .04em;
white-space: nowrap;
}
.icon-btn {
position: relative;
width: 40px; height: 40px;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--rule);
color: var(--ink-soft);
display: grid; place-items: center;
transition: all .2s ease;
}
.icon-btn:hover {
background: var(--accent-soft);
color: var(--accent-strong);
border-color: var(--accent);
transform: translateY(-1px);
}
.icon-btn.has-dot .icon-dot {
position: absolute;
top: 8px; right: 8px;
width: 8px; height: 8px;
background: #e85d4e;
border: 2px solid var(--surface);
border-radius: 50%;
animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(232, 93, 78, .5); }
50% { box-shadow: 0 0 0 5px rgba(232, 93, 78, 0); }
}
@media (max-width: 720px) {
.topbar .nav { display: none; }
}
@media (max-width: 480px) {
.brand-text .school { display: none; }
.brand-text .name { font-size: 15px; }
.brand-mark { width: 38px; height: 38px; font-size: 16px; }
}
/* ===========================================================
HERO HEADER (3 variants)
=========================================================== */
.hero {
margin-bottom: 28px;
}
/* --- HERO V1: Editorial (default) --- */
.hero.v-editorial {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 32px;
align-items: end;
border-bottom: 1px solid var(--rule);
padding-bottom: 28px;
}
.hero.v-editorial .label {
font-size: 11px;
letter-spacing: .25em;
color: var(--ink-mute);
text-transform: uppercase;
margin-bottom: 14px;
}
.hero.v-editorial .title {
font-family: var(--header-font);
font-weight: 700;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 0 14px;
color: var(--ink);
}
.hero.v-editorial .title em {
font-style: normal;
color: var(--accent);
font-family: var(--font-serif);
}
.hero.v-editorial .lede {
color: var(--ink-soft);
font-size: 15px;
max-width: 44ch;
margin: 0;
}
.hero.v-editorial .stats-rail {
display: flex;
flex-direction: column;
gap: 18px;
border-left: 1px solid var(--rule);
padding-left: 28px;
align-self: stretch;
justify-content: flex-end;
}
.hero.v-editorial .stats-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.hero.v-editorial .stats-top .stat {
padding: 0 20px 0 0;
}
.hero.v-editorial .stats-top .stat + .stat {
padding: 0 0 0 20px;
border-left: 1px solid var(--rule);
}
.hero.v-editorial .stat .num {
font-family: var(--font-serif);
font-weight: 700;
font-size: 30px;
color: var(--ink);
line-height: 1;
display: block;
margin-bottom: 8px;
}
.hero.v-editorial .stat .lbl {
font-size: 12px;
letter-spacing: .04em;
color: var(--ink-mute);
}
.hero.v-editorial .stat-progress {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
padding: 18px 0 0;
border-top: 1px solid var(--rule);
}
.hero-ring {
position: relative;
width: 72px; height: 72px;
flex-shrink: 0;
}
@media (min-width: 880px) {
.hero-ring { width: 84px; height: 84px; }
}
.hero-ring svg { display: block; width: 100%; height: 100%; }
.hero-ring .track {
stroke: var(--rule);
opacity: .8;
}
.hero-ring .fill {
stroke: var(--accent-strong);
transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1);
}
[data-theme="explorer"] .hero-ring .fill { stroke: var(--accent); }
.hero-ring-center {
position: absolute; inset: 0;
display: grid; place-items: center;
line-height: 1;
}
.hero-ring-pct {
font-family: var(--font-serif);
font-weight: 700;
font-size: 20px;
color: var(--ink);
letter-spacing: -.02em;
display: inline-flex; align-items: baseline;
}
@media (min-width: 880px) {
.hero-ring-pct { font-size: 22px; }
}
.hero-ring-pct i {
font-style: normal;
font-size: 11px;
color: var(--ink-soft);
margin-left: 1px;
font-weight: 500;
letter-spacing: 0;
}
.hero-ring-text {
display: flex; flex-direction: column;
gap: 4px;
min-width: 0;
}
.hero-ring-text .num-text {
font-family: var(--header-font);
font-weight: 700;
font-size: 16px;
color: var(--ink);
line-height: 1.2;
}
.hero-ring-text .lbl {
font-size: 12px;
color: var(--ink-mute);
letter-spacing: .02em;
text-transform: none;
}
@media (max-width: 880px) {
.hero.v-editorial .stat-progress {
padding-left: 0;
grid-column: span 3;
border-top: 1px solid var(--rule);
padding-top: 16px;
margin-top: 4px;
}
}
@media (max-width: 480px) {
.hero-ring { width: 64px; height: 64px; }
.hero-ring-pct { font-size: 18px; }
.hero-ring-text .num-text { font-size: 14px; }
.hero-ring-text .lbl { font-size: 11px; }
}
@media (max-width: 880px) {
.hero.v-editorial { grid-template-columns: 1fr; }
.hero.v-editorial .stats-rail { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 20px; }
}
/* --- HERO V2: Welcome dashboard --- */
.hero.v-welcome {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 28px 32px;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.hero.v-welcome .greet {
font-family: var(--header-font);
font-weight: 700;
font-size: clamp(22px, 3vw, 30px);
line-height: 1.2;
margin: 0 0 6px;
color: var(--ink);
}
.hero.v-welcome .greet-sub {
margin: 0;
color: var(--ink-soft);
font-size: 14px;
}
.progress-ring-wrap {
display: flex; align-items: center; gap: 18px;
}
.progress-ring {
width: 88px; height: 88px; position: relative;
}
.progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring .track { fill: none; stroke: var(--rule); stroke-width: 8; }
.progress-ring .fill {
fill: none; stroke: var(--accent); stroke-width: 8;
stroke-linecap: round;
transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1);
}
.progress-ring .label {
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--font-serif);
font-weight: 700; font-size: 22px; color: var(--ink);
}
.ring-meta { line-height: 1.3; }
.ring-meta .big { font-weight: 700; color: var(--ink); font-size: 15px; }
.ring-meta .sm { font-size: 12px; color: var(--ink-mute); }
@media (max-width: 720px) {
.hero.v-welcome { grid-template-columns: 1fr; padding: 22px; }
}
/* --- HERO V3: Minimal Banner --- */
.hero.v-banner {
text-align: center;
padding: 32px 16px 16px;
}
.hero.v-banner .crest {
width: 44px; height: 44px;
border: 1.5px solid var(--accent);
border-radius: 50%;
display: inline-grid; place-items: center;
font-family: var(--font-serif);
color: var(--accent);
margin-bottom: 14px;
font-weight: 700;
}
.hero.v-banner .title {
font-family: var(--header-font);
font-weight: 700;
font-size: clamp(28px, 4vw, 44px);
margin: 0 0 8px;
color: var(--ink);
}
.hero.v-banner .sub {
color: var(--ink-soft);
margin: 0 auto 18px;
font-size: 14px;
max-width: 56ch;
}
.hero.v-banner .stats-row {
display: flex; justify-content: center; gap: 36px; flex-wrap: wrap;
padding: 18px 0 0;
border-top: 1px solid var(--rule);
margin-top: 8px;
}
.hero.v-banner .stats-row .stat .num {
font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--ink);
}
.hero.v-banner .stats-row .stat .lbl {
font-size: 12px; color: var(--ink-mute); letter-spacing: .1em;
}
/* ===========================================================
FILTER / SEARCH / SORT BAR
=========================================================== */
.toolbar {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
margin-bottom: 16px;
}
.search-field {
position: relative;
background: var(--surface);
border: 1.5px solid var(--rule);
border-radius: 14px;
display: flex; align-items: center;
padding: 0 16px;
transition: all .2s ease;
box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.search-field:hover {
border-color: var(--accent);
}
.search-field:focus-within {
border-color: var(--accent);
box-shadow:
0 0 0 4px var(--accent-soft),
0 4px 14px -4px var(--accent);
transform: translateY(-1px);
}
.search-field svg {
color: var(--accent);
flex-shrink: 0;
transition: transform .2s ease;
}
.search-field:focus-within svg { transform: scale(1.1); }
.search-field input {
border: 0; background: transparent; outline: none;
width: 100%; padding: 14px 12px;
color: var(--ink); font-size: 15px;
font-weight: 500;
}
.search-field input::placeholder { color: var(--ink-mute); font-weight: 400; }
.select-field {
background: var(--surface);
border: 1.5px solid var(--rule);
border-radius: 14px;
padding: 0 40px 0 16px;
height: 48px;
color: var(--ink);
font-size: 14px;
font-weight: 600;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
cursor: pointer;
transition: all .2s ease;
}
.select-field:hover {
border-color: var(--accent);
background-color: var(--accent-soft);
}
.select-field:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
[data-theme="explorer"] .select-field {
background-image: url("data:image/svg+xml;utf8,");
}
.view-switch {
display: flex; gap: 0;
background: var(--surface);
border: 1.5px solid var(--rule);
border-radius: 14px;
overflow: hidden;
height: 48px;
transition: border-color .2s ease;
}
.view-switch:hover { border-color: var(--accent); }
.view-switch button {
padding: 0 16px;
color: var(--ink-mute);
display: grid; place-items: center;
cursor: pointer;
transition: all .2s ease;
}
.view-switch button:hover:not(.active) { color: var(--accent); }
.view-switch button.active {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
color: var(--surface);
}
[data-theme="explorer"] .view-switch button.active { color: var(--accent); }
@media (max-width: 720px) {
.toolbar { grid-template-columns: 1fr; }
}
/* Filter chips row */
.chips {
display: flex; flex-wrap: wrap; gap: 8px;
align-items: center;
margin-bottom: 24px;
}
.chips .chips-label {
font-size: 12px;
color: var(--ink);
font-weight: 700;
letter-spacing: .15em;
margin-right: 8px;
position: relative;
padding-left: 14px;
}
.chips .chips-label::before {
content: "";
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 4px; height: 14px;
background: var(--accent);
border-radius: 2px;
}
.chip {
border: 1.5px solid var(--rule);
background: var(--surface);
color: var(--ink-soft);
border-radius: 999px;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
display: inline-flex; align-items: center; gap: 7px;
transition: all .18s cubic-bezier(.34, 1.56, .64, 1);
cursor: pointer;
}
.chip:hover {
border-color: var(--accent);
color: var(--accent-strong);
transform: translateY(-2px);
box-shadow: 0 4px 10px -3px var(--accent-soft);
}
.chip.active {
background: linear-gradient(135deg, var(--ink) 0%, #2a3530 100%);
color: var(--bg);
border-color: var(--ink);
box-shadow:
0 1px 0 rgba(255,255,255,.15) inset,
0 6px 14px -4px rgba(0,0,0,.25);
transform: translateY(-1px);
}
[data-theme="explorer"] .chip.active {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
color: var(--bg);
border-color: var(--accent);
}
.chip .count {
font-size: 11px;
font-weight: 700;
background: var(--surface-2);
color: var(--ink-mute);
padding: 2px 7px;
border-radius: 999px;
margin-left: 2px;
min-width: 18px;
text-align: center;
}
.chip.active .count {
background: rgba(255,255,255,.18);
color: var(--bg);
}
.chip .swatch {
width: 9px; height: 9px;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px currentColor;
opacity: .85;
}
.chip.active .swatch {
box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}
/* Status filter inline */
.status-tabs {
display: flex; gap: 4px;
background: var(--surface-2);
padding: 5px;
border-radius: 14px;
margin-left: auto;
border: 1px solid var(--rule);
}
.status-tabs button {
padding: 8px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: var(--ink-soft);
display: inline-flex; align-items: center; gap: 7px;
cursor: pointer;
transition: all .18s ease;
}
.status-tabs button:hover:not(.active) {
color: var(--ink);
background: var(--surface);
}
.status-tabs button.active {
background: var(--surface);
color: var(--accent-strong);
box-shadow:
0 1px 0 rgba(255,255,255,.5) inset,
0 2px 6px -1px rgba(0,0,0,.08),
0 0 0 1px var(--accent-soft);
}
[data-theme="explorer"] .status-tabs button.active { color: var(--accent); }
.status-tabs .num {
font-size: 11px;
font-weight: 700;
background: var(--rule);
padding: 2px 7px;
border-radius: 999px;
color: var(--ink-mute);
min-width: 20px;
text-align: center;
}
.status-tabs button.active .num {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
color: var(--surface);
}
[data-theme="explorer"] .status-tabs button.active .num { color: var(--bg); }
/* ===========================================================
CUSTOM SORT DROPDOWN
=========================================================== */
.sort-dd {
position: relative;
height: 48px;
}
.sort-dd-btn {
display: inline-flex;
align-items: center;
gap: 10px;
height: 48px;
padding: 0 16px;
background: var(--surface);
border: 1.5px solid var(--rule);
border-radius: 14px;
color: var(--ink);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all .2s ease;
font-family: inherit;
}
.sort-dd-btn:hover {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent-strong);
}
.sort-dd.open .sort-dd-btn {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
background: var(--surface);
}
.sort-dd-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent);
flex-shrink: 0;
}
.sort-dd-label {
white-space: nowrap;
}
.sort-dd-caret {
color: var(--ink-mute);
transition: transform .2s ease;
margin-left: 2px;
}
.sort-dd.open .sort-dd-caret {
transform: rotate(180deg);
color: var(--accent);
}
.sort-dd-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 14px;
padding: 6px;
margin: 0;
list-style: none;
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 12px 32px -8px rgba(0,0,0,.18),
0 4px 12px -4px rgba(0,0,0,.08);
z-index: 50;
animation: sort-dd-in .18s cubic-bezier(.34, 1.56, .64, 1);
transform-origin: top right;
}
@keyframes sort-dd-in {
0% { opacity: 0; transform: translateY(-6px) scale(.96); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.sort-dd-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
font-size: 13.5px;
font-weight: 500;
color: var(--ink-soft);
cursor: pointer;
transition: all .15s ease;
}
.sort-dd-item .sort-dd-icon {
color: var(--ink-mute);
transition: color .15s ease, transform .15s ease;
}
.sort-dd-item:hover {
background: var(--accent-soft);
color: var(--accent-strong);
}
.sort-dd-item:hover .sort-dd-icon {
color: var(--accent);
transform: scale(1.15);
}
.sort-dd-item.selected {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
color: var(--surface);
font-weight: 700;
box-shadow:
0 1px 0 rgba(255,255,255,.25) inset,
0 4px 10px -4px var(--accent);
}
[data-theme="explorer"] .sort-dd-item.selected { color: var(--bg); }
.sort-dd-item.selected .sort-dd-icon {
color: currentColor;
}
.sort-dd-check {
margin-left: auto;
flex-shrink: 0;
}
/* Stagger fade-in for items */
.sort-dd-item { animation: sort-item-in .25s ease both; }
.sort-dd-item:nth-child(1) { animation-delay: .02s; }
.sort-dd-item:nth-child(2) { animation-delay: .05s; }
.sort-dd-item:nth-child(3) { animation-delay: .08s; }
.sort-dd-item:nth-child(4) { animation-delay: .11s; }
.sort-dd-item:nth-child(5) { animation-delay: .14s; }
.sort-dd-item:nth-child(6) { animation-delay: .17s; }
/* Visual divider before the difficulty group (5th item onward) */
.sort-dd-item:nth-child(5) {
margin-top: 4px;
padding-top: 12px;
border-top: 1px solid var(--rule-soft);
border-radius: 4px 4px 10px 10px;
}
@keyframes sort-item-in {
from { opacity: 0; transform: translateX(-4px); }
to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 480px) {
.sort-dd-menu { left: 0; right: auto; min-width: 100%; }
}
/* ===========================================================
ARTICLE CARDS GRID
=========================================================== */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.grid.list-view {
grid-template-columns: 1fr;
}
/* --- Card base --- */
.card {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex; flex-direction: column;
position: relative;
transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
cursor: pointer;
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--ink-mute);
}
/* Card header strip with category color */
.card-strip {
height: 76px;
position: relative;
display: flex;
align-items: flex-end;
padding: 14px 16px;
color: #fff;
overflow: hidden;
}
.card-strip::before {
content: "";
position: absolute; inset: 0;
background: var(--card-strip-bg, var(--accent));
}
.card-strip::after {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
background-size: 14px 14px;
opacity: .5;
}
.card-strip > * { position: relative; z-index: 1; }
.card-strip .chap-num {
font-family: var(--font-serif);
font-weight: 700;
font-size: 38px;
line-height: 1;
letter-spacing: -.02em;
}
.card-strip .chap-label {
font-size: 10px;
letter-spacing: .25em;
text-transform: uppercase;
opacity: .85;
margin-bottom: 2px;
display: block;
}
.card-strip .cat-tag {
position: absolute; top: 12px; right: 12px;
background: rgba(255,255,255,.18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-size: 11px;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: .05em;
border: 1px solid rgba(255,255,255,.25);
}
.card-body {
padding: 16px 18px 0;
flex: 1;
display: flex; flex-direction: column;
}
.card-title {
font-family: var(--header-font);
font-weight: 700;
font-size: 17px;
line-height: 1.4;
color: var(--ink);
margin: 0 0 12px;
text-wrap: pretty;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.8em;
}
.card-meta {
display: flex; flex-wrap: wrap; gap: 8px 14px;
font-size: 12px;
color: var(--ink-mute);
margin-bottom: 14px;
}
.card-meta .m {
display: inline-flex; align-items: center; gap: 5px;
}
.card-meta .m svg { flex-shrink: 0; }
.diff-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px;
padding: 2px 8px;
border-radius: 4px;
font-weight: 500;
letter-spacing: .03em;
}
.diff-easy { background: var(--good-soft); color: var(--good); }
.diff-medium { background: var(--accent-soft); color: var(--accent-strong); }
[data-theme="explorer"] .diff-medium { color: var(--accent); }
.diff-hard { background: var(--warn-soft); color: var(--warn); }
.diff-dots {
display: inline-flex; gap: 2px; margin-right: 4px;
}
.diff-dots i {
width: 5px; height: 5px; border-radius: 50%;
background: currentColor; opacity: .25;
}
.diff-dots i.on { opacity: 1; }
/* Card footer: progress + score */
.card-footer {
border-top: 1px solid var(--rule-soft);
padding: 10px 18px 14px;
background: var(--surface-2);
font-size: 12px;
}
.card-footer-row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.card-footer-row:last-child { margin-bottom: 0; }
.score-pill {
display: inline-flex; align-items: center; gap: 5px;
font-weight: 600; color: var(--good);
font-family: var(--font-serif);
}
.score-pill.empty { color: var(--ink-mute); font-weight: 400; font-family: var(--font-sans); font-style: italic; }
.progress-bar {
position: relative;
width: 100%; height: 4px;
background: var(--rule);
border-radius: 999px;
overflow: hidden;
}
.progress-bar > i {
position: absolute; left: 0; top: 0; bottom: 0;
background: var(--accent);
border-radius: 999px;
transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.card.completed .progress-bar > i { background: var(--good); }
/* Mini progress ring (card footer) */
.card-footer-ring-row {
display: flex; align-items: center; gap: 12px;
}
.card-footer-meta {
display: flex; flex-direction: column; gap: 2px;
min-width: 0; flex: 1;
}
.footer-status {
font-size: 11px;
color: var(--ink-mute);
letter-spacing: .02em;
}
.footer-status.done { color: var(--good); font-weight: 500; }
.score-pill.in-progress { color: var(--warn); }
.mini-ring {
position: relative;
flex-shrink: 0;
display: grid; place-items: center;
}
.mini-ring svg { display: block; }
.mini-ring .track { stroke: var(--rule); }
.mini-ring .fill { stroke: var(--accent); transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); }
.mini-ring.done .fill { stroke: var(--good); }
.mini-ring-label {
position: absolute;
inset: 0;
display: grid; place-items: center;
font-family: var(--font-serif);
font-weight: 700;
font-size: 11px;
color: var(--ink);
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
.mini-ring.done .mini-ring-label {
color: var(--good);
font-size: 14px;
}
/* completed state */
.card.completed .card-strip { filter: saturate(.85); }
.completed-mark {
position: absolute; top: 12px; left: 12px;
background: var(--good);
color: white;
width: 26px; height: 26px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 14px;
z-index: 2;
box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
/* ===========================================================
CARD STYLE VARIANTS — toggle via [data-card]
=========================================================== */
/* --- Card style 1: BOOK (paper card with spine) --- */
[data-card="book"] .card {
background: var(--surface);
border-radius: 4px 12px 12px 4px;
border-left: 0;
position: relative;
overflow: visible;
}
[data-card="book"] .card::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 8px;
background: var(--card-strip-bg, var(--accent));
border-radius: 4px 0 0 4px;
}
[data-card="book"] .card::after {
content: "";
position: absolute;
left: 8px; top: 0; bottom: 0;
width: 1px;
background: rgba(0,0,0,.06);
}
[data-card="book"] .card-strip {
display: none;
}
[data-card="book"] .card-body {
padding: 18px 20px 4px 26px;
position: relative;
}
[data-card="book"] .chap-marker {
display: flex; align-items: center; justify-content: space-between;
font-family: var(--font-serif);
font-size: 11px;
letter-spacing: .2em;
color: var(--ink-mute);
text-transform: uppercase;
margin-bottom: 10px;
}
[data-card="book"] .chap-marker .num {
font-size: 13px;
color: var(--card-strip-bg, var(--accent));
font-weight: 700;
letter-spacing: 0;
}
[data-card="book"] .card-title {
font-size: 18px;
margin-bottom: 14px;
}
[data-card="book"] .card-footer {
background: transparent;
padding-left: 26px;
border-top: 1px dashed var(--rule);
}
[data-card="book"] .card-strip .cat-tag,
[data-card="book"] .completed-mark { display: grid; place-items: center; }
[data-card="book"] .completed-mark { left: auto; right: 14px; top: 14px; }
/* --- Card style 2: HEADER (default modern card with colored top) --- */
/* default styles above */
/* --- Card style 3: MINIMAL (clean text card) --- */
[data-card="minimal"] .card {
border-radius: var(--radius);
background: var(--surface);
}
[data-card="minimal"] .card-strip {
height: 0;
padding: 0;
background: transparent;
}
[data-card="minimal"] .card-strip::before,
[data-card="minimal"] .card-strip::after { display: none; }
[data-card="minimal"] .card-body {
padding: 22px 22px 4px;
}
[data-card="minimal"] .chap-marker {
display: flex; align-items: center; gap: 8px;
margin-bottom: 14px;
}
[data-card="minimal"] .chap-marker .swatch {
width: 24px; height: 4px; border-radius: 2px;
background: var(--card-strip-bg, var(--accent));
}
[data-card="minimal"] .chap-marker .num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
letter-spacing: .05em;
}
[data-card="minimal"] .chap-marker .cat-pill {
margin-left: auto;
font-size: 11px;
color: var(--ink-soft);
border: 1px solid var(--rule);
padding: 2px 8px;
border-radius: 999px;
}
[data-card="minimal"] .card-title {
font-size: 18px;
}
[data-card="minimal"] .card-footer {
background: transparent;
padding: 14px 22px 16px;
border-top: 1px solid var(--rule-soft);
}
[data-card="minimal"] .completed-mark {
width: 22px; height: 22px; font-size: 12px; top: 16px; right: 16px; left: auto;
}
/* --- Card style 4: CHIP (compact list-friendly) --- */
[data-card="chip"] .grid:not(.list-view) .card {
flex-direction: row;
align-items: stretch;
border-radius: var(--radius);
}
[data-card="chip"] .card-strip {
width: 80px; height: auto;
flex-shrink: 0;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 12px 6px;
}
[data-card="chip"] .card-strip .cat-tag {
position: static;
margin-top: 6px;
font-size: 9px;
padding: 2px 7px;
}
[data-card="chip"] .card-strip .chap-num { font-size: 28px; }
[data-card="chip"] .card-strip .chap-label { display: none; }
[data-card="chip"] .card-body { padding: 14px 16px 0; }
[data-card="chip"] .card-title { font-size: 15px; min-height: 0; -webkit-line-clamp: 2; margin-bottom: 8px; }
[data-card="chip"] .card-footer { padding: 8px 16px 12px; background: transparent; border-top: 1px dashed var(--rule); }
[data-card="chip"] .completed-mark {
width: 22px; height: 22px; font-size: 11px;
left: auto; right: 12px; top: 12px;
}
/* ===========================================================
LIST VIEW (works with any card variant)
=========================================================== */
.grid.list-view .card {
flex-direction: row;
align-items: stretch;
}
.grid.list-view .card-strip {
width: 120px; height: auto;
flex-shrink: 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 18px 12px;
}
.grid.list-view .card-strip > div {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.grid.list-view .card-strip .cat-tag {
position: static;
top: auto; right: auto;
align-self: center;
font-size: 10px;
padding: 3px 10px;
white-space: nowrap;
letter-spacing: .04em;
background: rgba(255,255,255,.22);
order: -1;
}
.grid.list-view .card-strip .chap-label {
font-size: 9px;
letter-spacing: .25em;
margin-bottom: 0;
}
.grid.list-view .card-strip .chap-num {
font-size: 36px;
margin: 0;
}
.grid.list-view .card-body {
flex: 1;
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
padding: 18px 22px;
align-items: center;
}
.grid.list-view .card-title { margin-bottom: 6px; min-height: 0; -webkit-line-clamp: 1;}
.grid.list-view .card-meta { margin-bottom: 0; }
.grid.list-view .card-footer {
background: transparent;
border-top: 0;
border-left: 1px solid var(--rule-soft);
padding: 18px 22px;
display: flex; flex-direction: column;
justify-content: center;
min-width: 180px;
}
@media (max-width: 720px) {
.grid.list-view .card { flex-direction: column; }
.grid.list-view .card-strip {
width: auto; height: auto; min-height: 64px;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 12px 18px;
gap: 12px;
}
.grid.list-view .card-strip > div {
flex-direction: row;
align-items: baseline;
gap: 8px;
order: 1;
}
.grid.list-view .card-strip .chap-num { font-size: 28px; }
.grid.list-view .card-strip .chap-label { letter-spacing: .2em; }
.grid.list-view .card-strip .cat-tag {
order: 2;
align-self: center;
margin: 0;
}
.grid.list-view .card-body { grid-template-columns: 1fr; padding: 14px 18px; }
.grid.list-view .card-footer { border-left: 0; border-top: 1px solid var(--rule-soft); }
}
/* ===========================================================
PREVIEW MODAL
=========================================================== */
.modal-bg {
position: fixed; inset: 0;
background: rgba(20,15,5,.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 100;
display: grid; place-items: center;
padding: 24px;
animation: fadeIn .2s;
}
[data-theme="explorer"] .modal-bg { background: rgba(0,0,0,.7); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
background: var(--surface);
border-radius: var(--radius-lg);
max-width: 560px; width: 100%;
max-height: 90vh;
overflow: auto;
box-shadow: var(--shadow-lg);
border: 1px solid var(--rule);
animation: slideUp .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.modal-strip {
height: 120px;
position: relative;
background: var(--card-strip-bg, var(--accent));
color: white;
display: flex; align-items: flex-end;
padding: 22px 28px;
}
.modal-strip::after {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
background-size: 16px 16px;
opacity: .6;
}
.modal-strip > * { position: relative; }
.modal-strip .chap-num {
font-family: var(--font-serif);
font-size: 64px; font-weight: 700;
line-height: 1;
letter-spacing: -.02em;
}
.modal-strip .chap-label {
font-size: 11px;
letter-spacing: .25em;
text-transform: uppercase;
opacity: .85;
}
.modal-strip .cat-tag {
position: absolute; top: 18px; right: 60px;
background: rgba(255,255,255,.18);
backdrop-filter: blur(6px);
font-size: 12px;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.25);
}
.modal-close {
position: absolute; top: 14px; right: 14px;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.22);
color: white;
display: grid; place-items: center;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.3);
cursor: pointer;
transition: all .2s ease;
z-index: 2;
}
.modal-close:hover {
background: rgba(255,255,255,.35);
transform: rotate(90deg) scale(1.05);
}
.modal-body { padding: 24px 28px 28px; }
.modal-body h2 {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 1.3;
margin: 0 0 12px;
color: var(--ink);
text-wrap: pretty;
}
.modal-meta {
display: flex; flex-wrap: wrap; gap: 8px 18px;
font-size: 13px; color: var(--ink-mute);
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--rule);
}
.modal-meta .m { display: inline-flex; align-items: center; gap: 6px; }
.modal-summary {
color: var(--ink-soft);
margin: 0 0 18px;
font-size: 14px;
line-height: 1.7;
}
.modal-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 24px;
}
.modal-stat {
position: relative;
background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface-2) 100%);
border: 1px solid var(--accent-soft);
border-radius: 14px;
padding: 16px 12px;
text-align: center;
transition: all .2s ease;
overflow: hidden;
}
.modal-stat::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
opacity: .55;
}
.modal-stat:hover {
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: 0 6px 14px -6px var(--accent);
}
.modal-stat:hover::before { opacity: 1; }
.modal-stat .num {
font-family: var(--font-serif);
font-weight: 700;
font-size: 26px;
color: var(--accent-strong);
display: block;
line-height: 1.1;
margin-bottom: 6px;
}
[data-theme="explorer"] .modal-stat .num { color: var(--accent); }
.modal-stat .lbl {
font-size: 11.5px;
color: var(--ink-mute);
letter-spacing: .04em;
font-weight: 500;
}
.modal-actions { display: flex; gap: 10px; }
.btn {
flex: 1;
padding: 14px 18px;
border-radius: 12px;
font-weight: 700;
font-size: 14px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
transition: all .2s ease;
cursor: pointer;
border: 1.5px solid transparent;
}
.btn-primary {
background: linear-gradient(135deg, var(--ink) 0%, #2a3530 100%);
color: var(--bg);
box-shadow:
0 1px 0 rgba(255,255,255,.15) inset,
0 4px 12px -3px rgba(0,0,0,.25);
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255,255,255,.25) inset,
0 8px 18px -4px var(--accent);
}
[data-theme="explorer"] .btn-primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
color: var(--bg);
}
[data-theme="explorer"] .btn-primary:hover {
background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
}
.btn-secondary {
background: var(--surface);
color: var(--ink);
border-color: var(--rule);
}
.btn-secondary:hover {
background: var(--accent-soft);
color: var(--accent-strong);
border-color: var(--accent);
transform: translateY(-2px);
}
/* ===========================================================
CATEGORY COLORS
Each category gets its own swatch.
=========================================================== */
[data-cat="科學"] { --card-strip-bg: #2f6f74; }
[data-cat="社會"] { --card-strip-bg: #b3683f; }
[data-cat="科技"] { --card-strip-bg: #4a5d8f; }
[data-cat="藝術"] { --card-strip-bg: #8a4a6b; }
[data-cat="生活"] { --card-strip-bg: #6f8a4f; }
[data-cat="歷史"] { --card-strip-bg: #7c5b3a; }
/* category swatches in chips (computed inline) */
/* ===========================================================
FOOTER / NOTE
=========================================================== */
.empty-state {
text-align: center;
padding: 80px 20px;
color: var(--ink-mute);
}
.empty-state .ico {
font-size: 36px;
font-family: var(--font-serif);
opacity: .4;
margin-bottom: 12px;
}
.results-line {
font-size: 12px;
color: var(--ink-mute);
margin-bottom: 12px;
padding-left: 4px;
}
.results-line strong { color: var(--ink); font-weight: 600; }
/* Card book-flip hover effect for [data-hover="flip"] */
[data-hover="flip"] .card {
transform-style: preserve-3d;
perspective: 1000px;
}
[data-hover="flip"] .card:hover {
transform: translateY(-4px) rotateY(-2deg) rotateX(2deg);
}
/* Card lift only */
[data-hover="lift"] .card:hover {
transform: translateY(-6px);
}
/* No hover */
[data-hover="none"] .card:hover {
transform: none;
box-shadow: var(--shadow-sm);
border-color: var(--rule);
}
/* Reading time mini bar visualization */
.read-time-pips {
display: inline-flex; gap: 2px;
}
.read-time-pips i {
width: 3px; height: 9px;
background: currentColor;
opacity: .25;
border-radius: 1px;
}
.read-time-pips i.on { opacity: 1; }
/* ===========================================================
Tweak panel knob: highlight active demo region briefly
=========================================================== */
@keyframes pulse-once {
0% { box-shadow: 0 0 0 0 var(--accent-soft); }
100% { box-shadow: 0 0 0 12px transparent; }
}
/* ===========================================================
RWD CONSOLIDATION (final pass)
Mobile-first touch sizing, grid breakpoints,
modal & hero stats stacking
=========================================================== */
/* Touch targets: ensure ≥44px on touch devices */
@media (hover: none) and (pointer: coarse) {
.icon-btn,
.status-tabs button,
.chip,
.view-switch button,
.select-field {
min-height: 44px;
}
.icon-btn { width: 44px; height: 44px; }
.view-switch button { padding: 0 16px; height: 44px; }
.chip { padding: 10px 16px; }
.status-tabs button { padding: 10px 16px; }
}
/* Tablet portrait (≤900px): condensed nav instead of hidden */
@media (max-width: 900px) and (min-width: 721px) {
.topbar .nav { gap: 2px; }
.topbar .nav .nav-item { padding: 8px 10px; font-size: 13px; }
}
/* Toolbar stacking: keep search wide, put sort + view side-by-side */
@media (max-width: 720px) {
.toolbar {
grid-template-columns: 1fr auto;
grid-template-areas:
"search search"
"sort view";
gap: 10px;
}
.search-field { grid-area: search; }
.select-field, .sort-dd { grid-area: sort; min-width: 0; }
.view-switch { grid-area: view; }
}
/* Hero stats: stack to single column on phone */
@media (max-width: 480px) {
.hero.v-editorial .stats-top {
grid-template-columns: 1fr;
gap: 14px;
}
.hero.v-editorial .stats-top .stat,
.hero.v-editorial .stats-top .stat + .stat {
padding: 0 0 14px;
border-left: 0;
border-bottom: 1px solid var(--rule);
}
.hero.v-editorial .stats-top .stat:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.hero.v-editorial .stat .num { font-size: 26px; margin-bottom: 4px; }
.hero.v-editorial .stat-progress { gap: 14px; }
.hero-ring-text .num-text { font-size: 14px; }
.hero-ring-text .lbl { font-size: 11px; }
}
/* Cards grid: drop minmax floor for narrow phones (single column) */
@media (max-width: 480px) {
.grid {
grid-template-columns: 1fr;
gap: 14px;
}
.card-strip { height: 64px; padding: 12px 14px; }
.card-strip .chap-num { font-size: 32px; }
.card-body { padding: 14px 16px 0; }
.card-title { font-size: 16px; }
.card-footer { padding: 10px 16px 12px; }
}
/* Tablet portrait: ensure card grid keeps 2 columns nicely */
@media (max-width: 720px) and (min-width: 481px) {
.grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
}
/* Modal: stack stats on phone */
@media (max-width: 480px) {
.modal-bg { padding: 12px; }
.modal-strip { height: 100px; padding: 18px 22px; }
.modal-strip .chap-num { font-size: 50px; }
.modal-body { padding: 20px 22px 22px; }
.modal-body h2 { font-size: 20px; }
.modal-stats {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.modal-stat { padding: 10px; }
.modal-stat .num { font-size: 18px; }
.modal-actions { flex-direction: column; }
.btn { width: 100%; }
}
/* Section spacing on phone */
@media (max-width: 480px) {
.shell { padding: 12px 14px 80px; }
.topbar { margin-bottom: 22px; padding-bottom: 14px; }
.hero { margin-bottom: 22px; }
.chips { margin-bottom: 18px; gap: 6px; }
.chips .chips-label { width: 100%; margin-bottom: 4px; }
}
/* User chip on phone: show greeting compactly, hide class on tiny screens */
@media (max-width: 480px) {
.user-chip { padding: 4px 12px 4px 4px; gap: 8px; }
.user-chip .avatar { width: 36px; height: 36px; font-size: 13px; }
.user-greet { font-size: 12px; }
.user-class { display: none; }
}
@media (max-width: 380px) {
.user-meta { display: none; }
.user-chip { padding: 4px; }
}
/* ===========================================================
PAGE-LEVEL VIEWS (history / dashboard / about)
Shared "page hero" used as a slimmer top banner for sub-pages.
=========================================================== */
.page-hero {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 28px;
align-items: end;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid var(--rule);
}
.page-hero .label {
font-size: 11px;
letter-spacing: .25em;
color: var(--ink-mute);
text-transform: uppercase;
margin-bottom: 12px;
font-weight: 600;
}
.page-hero .title {
font-family: var(--header-font);
font-weight: 700;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.15;
letter-spacing: -.01em;
margin: 0 0 12px;
color: var(--ink);
}
.page-hero .title em {
font-style: normal;
color: var(--accent);
font-family: var(--font-serif);
}
.page-hero .lede {
color: var(--ink-soft);
font-size: 15px;
line-height: 1.7;
margin: 0;
max-width: 56ch;
}
.page-hero-aside {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
}
@media (max-width: 880px) {
.page-hero { grid-template-columns: 1fr; gap: 18px; }
.page-hero-aside { align-items: stretch; }
}
.page-stat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
width: 100%;
max-width: 360px;
}
.page-stat {
position: relative;
background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface-2) 100%);
border: 1px solid var(--accent-soft);
border-radius: 12px;
padding: 14px 16px;
overflow: hidden;
}
.page-stat::before {
content: "";
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
opacity: .65;
}
.page-stat .num {
font-family: var(--font-serif);
font-weight: 800;
font-size: 26px;
color: var(--accent-strong);
line-height: 1;
display: block;
letter-spacing: -.01em;
}
.page-stat .num i {
font-style: normal;
font-size: 13px;
color: var(--ink-soft);
margin-left: 2px;
font-weight: 600;
letter-spacing: 0;
}
.page-stat .lbl {
display: block;
margin-top: 6px;
font-size: 12px;
font-weight: 600;
color: var(--ink-soft);
letter-spacing: .04em;
}
[data-theme="explorer"] .page-stat .num { color: var(--accent); }
.login-required {
text-align: center;
background: var(--surface);
border: 1.5px dashed var(--rule);
border-radius: var(--radius-lg);
padding: 56px 28px;
margin-bottom: 32px;
}
.login-required .ico {
font-size: 44px;
margin-bottom: 16px;
opacity: .85;
}
.login-required h2 {
font-family: var(--header-font);
font-weight: 700;
font-size: clamp(20px, 2.4vw, 26px);
color: var(--ink);
margin: 0 0 10px;
}
.login-required p {
color: var(--ink-soft);
margin: 0 auto 22px;
max-width: 56ch;
line-height: 1.7;
}
.login-required .btn { max-width: 280px; margin: 0 auto; }
/* ===========================================================
HISTORY VIEW — list of attempted articles
=========================================================== */
.history-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.history-row {
display: grid;
grid-template-columns: 130px 1fr auto;
align-items: stretch;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.history-row:hover {
transform: translateY(-2px);
border-color: var(--ink-mute);
box-shadow: var(--shadow-md);
}
.history-row .hr-strip {
position: relative;
background: var(--card-strip-bg, var(--accent));
color: #fff;
padding: 16px 14px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
text-align: center;
overflow: hidden;
}
.history-row .hr-strip::after {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
background-size: 14px 14px;
opacity: .5;
pointer-events: none;
}
.history-row .hr-strip > * { position: relative; z-index: 1; }
.history-row .hr-strip .cat-tag {
background: rgba(255,255,255,.22);
border: 1px solid rgba(255,255,255,.3);
font-size: 10.5px;
padding: 3px 9px;
border-radius: 999px;
letter-spacing: .05em;
margin-bottom: 4px;
white-space: nowrap;
}
.history-row .hr-strip .chap-label {
font-size: 9.5px;
letter-spacing: .25em;
text-transform: uppercase;
opacity: .9;
}
.history-row .hr-strip .chap-num {
font-family: var(--font-serif);
font-weight: 700;
font-size: 32px;
line-height: 1;
letter-spacing: -.02em;
}
.history-row .hr-body {
padding: 16px 20px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.history-row .hr-title {
font-family: var(--header-font);
font-weight: 700;
font-size: 17px;
line-height: 1.4;
color: var(--ink);
margin: 0 0 8px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.history-row .hr-meta {
display: flex; flex-wrap: wrap; gap: 8px 16px;
font-size: 12px;
color: var(--ink-mute);
}
.history-row .hr-meta .m {
display: inline-flex; align-items: center; gap: 5px;
}
.history-row .hr-meta .m svg { flex-shrink: 0; }
.history-row .hr-score {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 22px;
border-left: 1px solid var(--rule-soft);
background: var(--surface-2);
min-width: 200px;
}
.history-row .hr-score-meta { display: flex; flex-direction: column; gap: 2px; }
.history-row .hr-score-num {
font-family: var(--font-serif);
font-weight: 800;
font-size: 24px;
color: var(--ink);
line-height: 1;
letter-spacing: -.01em;
}
.history-row .hr-score-num i {
font-style: normal;
font-size: 12px;
color: var(--ink-mute);
margin-left: 2px;
font-weight: 600;
}
.history-row .hr-score-num.done { color: var(--good); }
.history-row .hr-score-status {
font-size: 12px;
color: var(--ink-soft);
font-weight: 600;
}
.history-row.is-done .hr-score-status { color: var(--good); }
@media (max-width: 720px) {
.history-row { grid-template-columns: 1fr; }
.history-row .hr-strip {
flex-direction: row;
justify-content: space-between;
padding: 12px 18px;
gap: 12px;
}
.history-row .hr-strip .cat-tag { margin-bottom: 0; }
.history-row .hr-strip .chap-label { letter-spacing: .2em; }
.history-row .hr-strip .chap-num { font-size: 26px; }
.history-row .hr-score {
border-left: 0;
border-top: 1px solid var(--rule-soft);
min-width: 0;
justify-content: space-between;
}
}
/* ===========================================================
DASHBOARD VIEW
=========================================================== */
.dash-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 24px;
}
.dash-stat {
position: relative;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 14px;
padding: 18px 20px;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dash-stat::before {
content: "";
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
opacity: .55;
}
.dash-stat:hover {
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: 0 6px 14px -6px var(--accent);
}
.dash-stat:hover::before { opacity: 1; }
.dash-stat .num {
font-family: var(--font-serif);
font-weight: 800;
font-size: 28px;
color: var(--accent-strong);
line-height: 1.1;
letter-spacing: -.01em;
}
.dash-stat .num i {
font-style: normal;
font-size: 13px;
color: var(--ink-soft);
margin-left: 2px;
font-weight: 600;
}
.dash-stat .lbl {
margin-top: 8px;
font-size: 12px;
font-weight: 600;
color: var(--ink-soft);
letter-spacing: .04em;
}
[data-theme="explorer"] .dash-stat .num { color: var(--accent); }
@media (max-width: 720px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .dash-stats { grid-template-columns: 1fr; } }
.dash-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.dash-grid .dash-insights { grid-column: 1 / -1; }
@media (max-width: 880px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-panel {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 22px 24px;
}
.dash-panel > header {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--rule);
}
.dash-panel > header h3 {
font-family: var(--header-font);
font-weight: 700;
font-size: 17px;
color: var(--ink);
margin: 0;
position: relative;
padding-left: 14px;
}
.dash-panel > header h3::before {
content: "";
position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
width: 4px; height: 16px;
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
border-radius: 2px;
}
.dash-panel > header span {
font-size: 12px;
color: var(--ink-mute);
letter-spacing: .02em;
}
.cat-bars { display: flex; flex-direction: column; gap: 14px; }
.cat-bar { display: flex; flex-direction: column; gap: 6px; }
.cat-bar-head {
display: flex; justify-content: space-between; align-items: center;
font-size: 13px;
}
.cat-bar-name {
display: inline-flex; align-items: center; gap: 8px;
color: var(--ink); font-weight: 600;
}
.cat-bar-name .swatch {
width: 10px; height: 10px;
border-radius: 3px;
display: inline-block;
}
.cat-bar-num { color: var(--ink-mute); font-size: 12.5px; }
.cat-bar-num strong { color: var(--ink); font-weight: 700; }
.cat-bar-track {
height: 10px;
background: var(--rule-soft);
border-radius: 999px;
overflow: hidden;
}
.cat-bar-fill {
height: 100%;
border-radius: 999px;
transition: width .8s cubic-bezier(.2,.8,.2,1);
box-shadow: 0 1px 0 rgba(255,255,255,.25) inset;
}
.donut-row {
display: flex; align-items: center; gap: 28px;
flex-wrap: wrap;
}
.donut svg circle { transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); }
.donut-legend {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
flex: 1; min-width: 180px;
}
.donut-legend li {
display: flex; align-items: center; gap: 10px;
font-size: 13px;
color: var(--ink);
}
.donut-legend li .swatch {
width: 14px; height: 14px; border-radius: 4px;
flex-shrink: 0;
}
.donut-legend li .lbl { font-weight: 600; flex: 1; }
.donut-legend li .num { color: var(--ink-mute); font-size: 12.5px; }
.donut-legend li .num strong { color: var(--ink); font-weight: 700; }
.insight-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 720px) { .insight-grid { grid-template-columns: 1fr; } }
.insight {
background: var(--surface-2);
border: 1px solid var(--rule);
border-radius: 12px;
padding: 16px 18px;
position: relative;
}
.insight-tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
color: var(--surface);
background: var(--accent);
padding: 3px 10px;
border-radius: 999px;
margin-bottom: 10px;
}
.insight-tag.warn { background: var(--warn); }
.insight-tag.muted { background: var(--ink-mute); }
[data-theme="explorer"] .insight-tag { color: var(--bg); }
.insight-title {
font-family: var(--header-font);
font-weight: 700;
font-size: 16px;
color: var(--ink);
margin-bottom: 4px;
}
.insight-desc {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.6;
}
.link-btn {
background: none; border: 0;
color: var(--accent-strong);
font-weight: 700;
font-size: 13px;
cursor: pointer;
padding: 4px 0;
letter-spacing: .02em;
}
[data-theme="explorer"] .link-btn { color: var(--accent); }
.link-btn:hover { text-decoration: underline; }
/* ===========================================================
ABOUT VIEW
=========================================================== */
.about-section {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 28px 32px;
margin-bottom: 18px;
}
.about-section h2 {
font-family: var(--header-font);
font-weight: 700;
font-size: clamp(20px, 2.4vw, 26px);
color: var(--ink);
margin: 0 0 14px;
position: relative;
padding-left: 16px;
letter-spacing: -.01em;
}
.about-section h2::before {
content: "";
position: absolute; left: 0; top: 6px; bottom: 6px;
width: 5px;
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
border-radius: 3px;
}
.about-section p {
color: var(--ink-soft);
font-size: 15px;
line-height: 1.85;
margin: 0 0 12px;
}
.about-section p strong { color: var(--ink); font-weight: 700; }
.about-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-top: 4px;
}
@media (max-width: 720px) { .about-cards { grid-template-columns: 1fr; } }
.about-card {
background: var(--surface-2);
border: 1px solid var(--rule);
border-radius: 14px;
padding: 18px 20px;
position: relative;
overflow: hidden;
}
.about-card::before {
content: "";
position: absolute; top: 0; left: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
}
.about-card[data-step="2"]::before { background: linear-gradient(180deg, #4a5d8f, #344073); }
.about-card[data-step="3"]::before { background: linear-gradient(180deg, #b3683f, #8d4f29); }
.about-card[data-step="4"]::before { background: linear-gradient(180deg, #8a4a6b, #663450); }
.about-card-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px;
}
.about-card-head .step {
display: grid; place-items: center;
width: 28px; height: 28px;
background: var(--ink);
color: var(--bg);
border-radius: 50%;
font-family: var(--font-serif);
font-weight: 700;
font-size: 14px;
}
.about-card-head .tag {
font-size: 11px;
font-weight: 700;
color: var(--accent-strong);
letter-spacing: .15em;
text-transform: uppercase;
}
[data-theme="explorer"] .about-card-head .tag { color: var(--accent); }
.about-card h4 {
font-family: var(--header-font);
font-weight: 700;
font-size: 16px;
color: var(--ink);
margin: 0 0 6px;
}
.about-card p {
font-size: 13.5px;
color: var(--ink-soft);
margin: 0;
line-height: 1.6;
}
.about-steps {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.about-steps li {
display: grid;
grid-template-columns: 64px 1fr;
gap: 18px;
align-items: start;
background: var(--surface-2);
border: 1px solid var(--rule);
border-radius: 12px;
padding: 16px 20px;
}
.about-steps .n {
font-family: var(--font-serif);
font-weight: 800;
font-size: 32px;
color: var(--accent);
line-height: 1;
letter-spacing: -.02em;
}
.about-steps h4 {
font-family: var(--header-font);
font-weight: 700;
font-size: 16px;
color: var(--ink);
margin: 0 0 4px;
}
.about-steps p {
font-size: 13.5px;
color: var(--ink-soft);
margin: 0;
line-height: 1.7;
}
.about-credits .about-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 18px;
}
.about-credits .btn {
flex: 0 1 auto;
padding: 12px 22px;
min-width: 180px;
}
@media (max-width: 480px) {
.about-section { padding: 22px 20px; }
.about-steps li { grid-template-columns: 48px 1fr; gap: 14px; padding: 14px 16px; }
.about-steps .n { font-size: 26px; }
.about-credits .btn { width: 100%; }
}
/* ===========================================================
MOBILE RWD POLISH (final pass)
- Prevent iOS input zoom (font-size >= 16px on inputs)
- Avoid topbar pill wrapping
- iPhone safe-area insets
- Tighten dashboard / history layouts on narrow phones
=========================================================== */
/* Login pill: don't wrap, swap long → short text on small phones */
.login-pill {
white-space: nowrap;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.login-pill:hover {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent-strong);
}
.login-pill .lp-short { display: none; }
@media (max-width: 720px) {
.login-pill { font-size: 12.5px; padding: 8px 12px; gap: 4px; }
}
@media (max-width: 480px) {
.login-pill { font-size: 12px; padding: 7px 11px; }
.login-pill .lp-long { display: none; }
.login-pill .lp-short { display: inline; }
}
@media (max-width: 360px) {
/* Phone-only: hide the surrounding text, keep just the icon as a button */
.login-pill { padding: 8px 10px; font-size: 14px; }
.login-pill .lp-long,
.login-pill .lp-short { display: none; }
}
/* Topbar — at very narrow widths, keep brand from squeezing the right side */
@media (max-width: 480px) {
.topbar { gap: 10px; padding-bottom: 16px; margin-bottom: 22px; }
.topbar .brand { gap: 10px; flex-shrink: 1; min-width: 0; }
.brand-text .name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.topbar .user { gap: 6px; flex-shrink: 0; }
.icon-btn { width: 38px; height: 38px; }
}
@media (max-width: 380px) {
/* Drop the brand-text entirely — keep just the brand mark + tabs hidden by nav rule.
The mark alone is enough identity; saves precious horizontal space. */
.brand-text { display: none; }
.topbar { padding-bottom: 14px; margin-bottom: 18px; }
}
/* Prevent iOS Safari from auto-zooming when focusing inputs.
iOS only zooms when input font-size < 16px on focus. */
@media (max-width: 720px) {
.search-field input,
.sort-dd-btn,
.sort-dd-item,
input.form-control,
select.form-control {
font-size: 16px;
}
}
/* Hero label / section labels: allow graceful wrap on phones */
@media (max-width: 480px) {
.hero.v-editorial .label,
.page-hero .label {
letter-spacing: .18em;
word-break: keep-all;
line-height: 1.5;
}
.hero.v-editorial { padding-bottom: 22px; margin-bottom: 22px; }
.hero.v-editorial .lede { font-size: 14px; line-height: 1.7; }
}
/* Page-hero (history/dashboard/about) on small phones */
@media (max-width: 720px) {
.page-hero { padding-bottom: 20px; margin-bottom: 20px; gap: 16px; }
.page-stat-grid { max-width: 100%; }
}
@media (max-width: 380px) {
.page-stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.page-stat { padding: 12px 14px; }
.page-stat .num { font-size: 22px; }
}
/* Dashboard panels: tighten padding, ensure donut-row stacks cleanly */
@media (max-width: 720px) {
.dash-panel { padding: 18px 18px; }
.dash-panel > header { margin-bottom: 14px; padding-bottom: 10px; }
.donut-row { gap: 18px; justify-content: center; }
.donut { margin: 0 auto; }
.donut-legend { min-width: 0; width: 100%; }
}
@media (max-width: 380px) {
.donut-row .donut { width: 140px !important; height: 140px !important; }
}
/* History row scoring column: keep readable on tablet portrait */
@media (max-width: 900px) and (min-width: 721px) {
.history-row { grid-template-columns: 110px 1fr 180px; }
.history-row .hr-score { padding: 14px 16px; min-width: 0; gap: 10px; }
.history-row .hr-score-num { font-size: 22px; }
}
/* Login-required panel on small phones */
@media (max-width: 480px) {
.login-required { padding: 40px 18px; }
.login-required .ico { font-size: 38px; margin-bottom: 12px; }
.login-required p { font-size: 14px; }
}
/* Empty state on phones */
@media (max-width: 480px) {
.empty-state { padding: 56px 16px; }
.empty-state .ico { font-size: 30px; }
}
/* iPhone safe-area-inset for notched devices.
The shell already has bottom padding; we extend it past the home indicator. */
.shell {
padding-bottom: max(96px, calc(96px + env(safe-area-inset-bottom)));
padding-left: max(32px, env(safe-area-inset-left));
padding-right: max(32px, env(safe-area-inset-right));
}
@media (max-width: 680px) {
.shell {
padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
}
@media (max-width: 480px) {
.shell {
padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
padding-left: max(14px, env(safe-area-inset-left));
padding-right: max(14px, env(safe-area-inset-right));
}
}
/* Bottom corner emoji buttons — slightly larger tap targets on phones,
and lift above the home-indicator safe area */
@media (max-width: 720px) {
.corner-btn {
bottom: max(15px, calc(env(safe-area-inset-bottom) + 8px));
font-size: 1.8rem;
padding: 4px;
}
}
/* Modal: reduce breathing room on the smallest phones */
@media (max-width: 380px) {
.modal-bg { padding: 8px; }
.modal { max-height: 94vh; }
.modal-strip { height: 88px; padding: 14px 18px; }
.modal-strip .chap-num { font-size: 42px; }
.modal-body { padding: 16px 18px 20px; }
.modal-stats .num { font-size: 16px; }
.btn { padding: 12px 14px; font-size: 13px; }
}
/* Card grid 2-up at narrow tablets — already 480-720 → keep 2 cols.
Below 380, cards become full-width single column for tappability. */
@media (max-width: 380px) {
.grid { grid-template-columns: 1fr; }
.card-strip { height: 60px; padding: 10px 14px; }
.card-strip .chap-num { font-size: 28px; }
.card-body { padding: 12px 14px 0; }
.card-title { font-size: 15px; min-height: 0; -webkit-line-clamp: 2; }
.card-meta { gap: 6px 12px; font-size: 11.5px; }
.card-footer { padding: 10px 14px 12px; }
}
/* Toolbar on phones — make sure search input has comfortable tap height */
@media (max-width: 720px) {
.search-field input { padding: 13px 12px; }
.search-field svg { width: 18px; height: 18px; }
}
/* Status tabs: avoid overflow on tiny phones — let them wrap and shrink */
@media (max-width: 380px) {
.status-tabs { flex-wrap: nowrap; gap: 2px; padding: 4px; width: 100%; }
.status-tabs button { padding: 8px 10px; font-size: 12px; flex: 1; }
.status-tabs .num { padding: 1px 5px; font-size: 10.5px; }
.chips .chips-label { width: 100%; padding-left: 12px; margin-bottom: 6px; }
}
/* Reduce motion preference — respect system setting */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}