b1b6887a26
Logo: hand-crafted SVG whale silhouette in blue gradient (#3b82f6 to #1d4ed8), DeepSeek-inspired minimalist style with water spout, eye, and wave arc. Renders at 28px in the nav header. Embeds: Open Graph and Twitter Card meta tags on every page. og:image is a 1200x630 embed card with the whale logo, WhalePrep title, tagline, and stats. Favicon.png (32x32) and apple-touch-icon.png (180x180) generated from the same SVG. theme-color #0a0f1c for mobile browsers.
2225 lines
40 KiB
CSS
2225 lines
40 KiB
CSS
/* ============================================================
|
|
WhalePrep — Modern Student-Friendly Educational Theme
|
|
Built for clarity, readability, and comfortable study sessions.
|
|
============================================================ */
|
|
|
|
:root {
|
|
--bg: #090d16;
|
|
--panel: #101728;
|
|
--card: #151f35;
|
|
--card-hover: #1b2845;
|
|
--input: #0e1524;
|
|
--border: #233352;
|
|
--border-focus: #3b82f6;
|
|
--border-subtle: #1c2942;
|
|
|
|
--text-main: #f8fafc;
|
|
--text-body: #cbd5e1;
|
|
--text-muted: #94a3b8;
|
|
--text-dim: #64748b;
|
|
|
|
--primary: #2563eb;
|
|
--primary-hover: #1d4ed8;
|
|
--primary-active: #1e40af;
|
|
--primary-glow: rgba(37, 99, 235, 0.25);
|
|
|
|
--cyan: #06b6d4;
|
|
--cyan-glow: rgba(6, 182, 212, 0.2);
|
|
|
|
--ok: #10b981;
|
|
--ok-bg: rgba(16, 185, 129, 0.15);
|
|
|
|
--amber: #f59e0b;
|
|
--amber-bg: rgba(245, 158, 11, 0.15);
|
|
|
|
--bad: #ef4444;
|
|
--bad-bg: rgba(239, 68, 68, 0.15);
|
|
|
|
--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
|
|
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
|
|
--radius-sm: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
--radius-pill: 9999px;
|
|
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
|
|
--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.35);
|
|
--shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
background: var(--bg);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text-body);
|
|
font-family: var(--font-sans);
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
max-width: 1240px;
|
|
margin: 0 auto;
|
|
padding: 0 20px 80px;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a {
|
|
color: #38bdf8;
|
|
text-decoration: none;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
a:hover {
|
|
color: #7dd3fc;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Headings */
|
|
h1 {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.025em;
|
|
color: var(--text-main);
|
|
line-height: 1.25;
|
|
margin: 20px 0 12px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.15rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.015em;
|
|
color: var(--text-main);
|
|
margin: 28px 0 14px;
|
|
}
|
|
|
|
h3 {
|
|
color: var(--text-main);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.meta {
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.dim {
|
|
color: var(--text-dim);
|
|
font-size: 0.825rem;
|
|
}
|
|
|
|
/* Topbar Header */
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 16px 0;
|
|
position: sticky;
|
|
top: 0;
|
|
background: rgba(9, 13, 22, 0.92);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
z-index: 20;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--text-main);
|
|
font-weight: 700;
|
|
font-size: 1.15rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.brand span {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
border-radius: var(--radius-pill);
|
|
background: rgba(37, 99, 235, 0.15);
|
|
border: 1px solid rgba(37, 99, 235, 0.35);
|
|
color: #60a5fa;
|
|
font-weight: 500;
|
|
font-size: 0.725rem;
|
|
}
|
|
|
|
.nav {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.nav a.hidem {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-md);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.nav a.hidem:hover {
|
|
color: var(--text-main);
|
|
background: var(--panel);
|
|
}
|
|
|
|
/* Modern Buttons */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 10px 18px;
|
|
background: var(--panel);
|
|
color: var(--text-body);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
text-decoration: none;
|
|
min-height: 42px;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.btn:hover:not(:disabled) {
|
|
background: var(--card-hover);
|
|
border-color: var(--border-focus);
|
|
color: var(--text-main);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn:active:not(:disabled) {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.btn.primary {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
|
|
}
|
|
|
|
.btn.primary:hover:not(:disabled) {
|
|
background: var(--primary-hover);
|
|
border-color: var(--primary-hover);
|
|
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
|
|
}
|
|
|
|
.btn.ok {
|
|
background: rgba(16, 185, 129, 0.15);
|
|
border-color: rgba(16, 185, 129, 0.4);
|
|
color: #34d399;
|
|
}
|
|
.btn.ok:hover:not(:disabled) {
|
|
background: var(--ok);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn.danger {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
border-color: rgba(239, 68, 68, 0.4);
|
|
color: #f87171;
|
|
}
|
|
.btn.danger:hover:not(:disabled) {
|
|
background: var(--bad);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn.sm {
|
|
padding: 6px 12px;
|
|
font-size: 0.775rem;
|
|
min-height: 32px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.btn.block {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Cards & Surfaces */
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 20px;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: border-color 0.15s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
border-color: #334769;
|
|
}
|
|
|
|
.grid2 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.grid3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.kv {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 14px;
|
|
margin: 18px 0;
|
|
}
|
|
|
|
.kv .card {
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.kv .card b {
|
|
display: block;
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
color: var(--text-main);
|
|
font-variant-numeric: tabular-nums;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Status text tokens */
|
|
.ok-t { color: var(--ok); font-weight: 600; }
|
|
.bad-t { color: var(--bad); font-weight: 600; }
|
|
.warn-t { color: var(--amber); font-weight: 600; }
|
|
.cyan-t { color: var(--cyan); font-weight: 600; }
|
|
|
|
/* Progress segments */
|
|
.seg {
|
|
display: flex;
|
|
height: 8px;
|
|
border-radius: var(--radius-pill);
|
|
background: #1e293b;
|
|
overflow: hidden;
|
|
}
|
|
.seg i {
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Focus indicator */
|
|
:focus-visible {
|
|
outline: 2px solid #38bdf8;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Tables */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
th {
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
font-size: 0.725rem;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--panel);
|
|
}
|
|
|
|
td {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Form Inputs */
|
|
input[type=text],
|
|
input[type=email],
|
|
input[type=number],
|
|
select,
|
|
textarea {
|
|
background: var(--input);
|
|
color: var(--text-main);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 11px 14px;
|
|
font-family: inherit;
|
|
font-size: 0.9rem;
|
|
outline: none;
|
|
width: 100%;
|
|
transition: all 0.15s ease;
|
|
min-height: 44px;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--border-focus);
|
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
|
|
}
|
|
|
|
input::placeholder {
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
label:not(.chapter-select-wrap):not(.subtopic-chip):not(.opt):not(.toggle-card) {
|
|
display: block;
|
|
font-size: 0.775rem;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
margin: 12px 0 5px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.chapter-select-wrap,
|
|
.subtopic-chip,
|
|
.opt,
|
|
.toggle-card {
|
|
text-transform: none !important;
|
|
letter-spacing: normal !important;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
margin-top: 56px;
|
|
border-top: 1px solid var(--border);
|
|
padding-top: 20px;
|
|
color: var(--text-dim);
|
|
font-size: 0.8rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* ============================================================
|
|
TOPIC SELECTION PAGE (/build) — Modern Student Friendly Revamp
|
|
============================================================ */
|
|
|
|
.build-header {
|
|
margin: 10px 0 24px;
|
|
}
|
|
|
|
.preset-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-top: 14px;
|
|
padding: 12px 16px;
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.preset-label {
|
|
font-size: 0.775rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-dim);
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.preset-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 6px 12px;
|
|
border-radius: var(--radius-pill);
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
background: var(--card);
|
|
color: var(--text-body);
|
|
border: 1px solid var(--border);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.preset-btn:hover {
|
|
background: var(--card-hover);
|
|
border-color: #38bdf8;
|
|
color: #ffffff;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.preset-btn.secondary {
|
|
color: var(--text-dim);
|
|
background: transparent;
|
|
}
|
|
.preset-btn.secondary:hover {
|
|
color: #ef4444;
|
|
border-color: #ef4444;
|
|
}
|
|
|
|
/* Subject Filter Tabs */
|
|
.subject-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 20px;
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: 8px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.sub-tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
border-radius: var(--radius-md);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sub-tab:hover {
|
|
color: var(--text-main);
|
|
background: var(--panel);
|
|
}
|
|
|
|
.sub-tab.active {
|
|
color: #ffffff;
|
|
background: var(--primary);
|
|
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
|
|
}
|
|
|
|
.tab-badge {
|
|
font-size: 0.725rem;
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-pill);
|
|
background: rgba(255, 255, 255, 0.15);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Build Layout Grid */
|
|
.build-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 340px;
|
|
gap: 24px;
|
|
align-items: start;
|
|
}
|
|
|
|
.picker-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.subject-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.subject-header-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 4px;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.subject-title-badge {
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: #38bdf8;
|
|
}
|
|
|
|
.btn-select-all-subject {
|
|
font-size: 0.775rem;
|
|
color: var(--text-dim);
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-weight: 500;
|
|
padding: 4px 8px;
|
|
border-radius: var(--radius-sm);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-select-all-subject:hover {
|
|
color: #ffffff;
|
|
background: var(--panel);
|
|
}
|
|
|
|
/* Chapter Card */
|
|
.chapter-card {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.chapter-card:hover {
|
|
border-color: #3b82f6;
|
|
}
|
|
|
|
.chapter-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 18px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.chapter-select-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chapter-select-wrap input[type=checkbox] {
|
|
width: 18px;
|
|
height: 18px;
|
|
accent-color: var(--primary);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.chapter-name {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: var(--text-main);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.chapter-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.chapter-q-badge {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
padding: 3px 8px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.btn-expand-subtopics {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-md);
|
|
font-size: 0.775rem;
|
|
font-weight: 500;
|
|
background: var(--panel);
|
|
color: var(--text-muted);
|
|
border: 1px solid var(--border);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-expand-subtopics:hover {
|
|
background: var(--card-hover);
|
|
color: var(--text-main);
|
|
border-color: var(--border-focus);
|
|
}
|
|
|
|
.chevron-icon {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.chapter-card.expanded .chevron-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Subtopics Drawer/Tray */
|
|
.subtopics-tray {
|
|
display: none;
|
|
background: var(--panel);
|
|
border-top: 1px solid var(--border);
|
|
padding: 14px 18px 18px;
|
|
}
|
|
|
|
.chapter-card.expanded .subtopics-tray {
|
|
display: block;
|
|
}
|
|
|
|
.subtopics-tray-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.btn-sub-link {
|
|
color: #38bdf8;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
font-family: inherit;
|
|
padding: 0;
|
|
}
|
|
.btn-sub-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.subtopics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.subtopic-chip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--card);
|
|
border: 1px solid var(--border-subtle);
|
|
font-size: 0.825rem;
|
|
color: var(--text-body);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.subtopic-chip:hover {
|
|
border-color: #3b82f6;
|
|
background: var(--card-hover);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.subtopic-chip input[type=checkbox] {
|
|
width: 15px;
|
|
height: 15px;
|
|
accent-color: var(--primary);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.subtopic-chip span {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Settings Column */
|
|
.settings-sticky {
|
|
position: sticky;
|
|
top: 80px;
|
|
}
|
|
|
|
.settings-card {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-xl);
|
|
padding: 22px;
|
|
box-shadow: var(--shadow-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
.settings-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: var(--text-main);
|
|
margin: 0;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.setting-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.setting-lbl {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Count Pills Selector */
|
|
.count-pills {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 6px;
|
|
}
|
|
|
|
.count-pill {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 9px 4px;
|
|
border-radius: var(--radius-md);
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
background: var(--panel);
|
|
color: var(--text-body);
|
|
border: 1px solid var(--border);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.count-pill:hover {
|
|
background: var(--card-hover);
|
|
border-color: #38bdf8;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.count-pill.active {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
color: #ffffff;
|
|
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
|
|
}
|
|
|
|
/* Toggle Switch Cards */
|
|
.toggle-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 12px 14px;
|
|
border-radius: var(--radius-lg);
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
cursor: pointer;
|
|
margin: 0;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.toggle-card:hover {
|
|
border-color: #334769;
|
|
}
|
|
|
|
.toggle-card input[type=checkbox] {
|
|
width: 18px;
|
|
height: 18px;
|
|
accent-color: var(--primary);
|
|
margin-top: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.toggle-card-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.toggle-card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.toggle-card-title b {
|
|
font-size: 0.875rem;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.badge-mode {
|
|
font-size: 0.675rem;
|
|
font-weight: 600;
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-pill);
|
|
background: rgba(16, 185, 129, 0.2);
|
|
color: #34d399;
|
|
}
|
|
|
|
.selection-summary {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
border-radius: var(--radius-md);
|
|
background: rgba(14, 21, 36, 0.6);
|
|
border: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.summary-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.summary-stat b {
|
|
font-size: 0.875rem;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
/* Large Create Paper Button */
|
|
.btn-create-paper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
width: 100%;
|
|
padding: 14px 18px;
|
|
border-radius: var(--radius-lg);
|
|
background: #2563eb;
|
|
color: #ffffff;
|
|
border: none;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-create-paper:hover:not(:disabled) {
|
|
background: #1d4ed8;
|
|
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-create-paper:disabled {
|
|
opacity: 0.45;
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-dim);
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
.btn-subtext {
|
|
font-size: 0.75rem;
|
|
font-weight: 400;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* ============================================================
|
|
EXAM CBT SCREEN & QUESTION TYPOGRAPHY
|
|
Strict font-size, weight and line-height normalization.
|
|
============================================================ */
|
|
|
|
.cbt {
|
|
display: grid;
|
|
grid-template-columns: 1fr 260px;
|
|
gap: 20px;
|
|
}
|
|
|
|
.exam-bar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 25;
|
|
background: rgba(9, 13, 22, 0.95);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 10px 0 0;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
.exam-bar-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.exam-title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.exam-title b {
|
|
color: var(--text-main);
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.exam-clock {
|
|
text-align: right;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.exam-progress {
|
|
height: 4px;
|
|
background: #1e293b;
|
|
border-radius: var(--radius-pill);
|
|
margin-top: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.exam-progress i {
|
|
display: block;
|
|
height: 100%;
|
|
background: #38bdf8;
|
|
width: 0;
|
|
transition: width 0.25s ease;
|
|
}
|
|
|
|
.exam-bar.complete .exam-progress i {
|
|
background: var(--ok);
|
|
}
|
|
|
|
.timer {
|
|
font-family: var(--font-mono);
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
color: var(--amber);
|
|
letter-spacing: 0.04em;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.timer.urgent {
|
|
color: #f97316;
|
|
}
|
|
|
|
.timer.critical {
|
|
color: var(--bad);
|
|
animation: timer-pulse 1s infinite alternate;
|
|
}
|
|
|
|
@keyframes timer-pulse {
|
|
from { opacity: 1; }
|
|
to { opacity: 0.55; }
|
|
}
|
|
|
|
.pane-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
font-size: 0.825rem;
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
/* Question Stem: Pure, Consistent Typography */
|
|
.stem {
|
|
font-size: 1.0625rem; /* 17px */
|
|
line-height: 1.7;
|
|
color: #f8fafc;
|
|
font-weight: 400;
|
|
margin: 14px 0 16px;
|
|
}
|
|
|
|
.stem,
|
|
.stem p,
|
|
.stem div,
|
|
.stem span {
|
|
font-size: 1.0625rem;
|
|
line-height: 1.7;
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.stem p {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.stem p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.stem b,
|
|
.stem strong {
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.stem h1,
|
|
.stem h2,
|
|
.stem h3,
|
|
.stem h4 {
|
|
font-size: 1.0625rem;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
margin: 10px 0 6px;
|
|
}
|
|
|
|
.meta-line {
|
|
margin-bottom: 16px;
|
|
font-size: 0.825rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* KaTeX equations scaling */
|
|
.katex {
|
|
font-size: 1.08em;
|
|
text-rendering: auto;
|
|
}
|
|
|
|
/* Multiple Choice Option Cards */
|
|
.opt {
|
|
display: flex;
|
|
gap: 14px;
|
|
align-items: center;
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 12px 18px;
|
|
margin: 10px 0;
|
|
font-size: 1rem;
|
|
color: #e2e8f0;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
min-height: 52px;
|
|
}
|
|
|
|
.opt:hover {
|
|
background: var(--card-hover);
|
|
border-color: #3b82f6;
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.opt.sel {
|
|
background: rgba(37, 99, 235, 0.18);
|
|
border-color: #3b82f6;
|
|
color: #ffffff;
|
|
box-shadow: 0 0 0 1px #3b82f6;
|
|
}
|
|
|
|
.opt input[type=radio] {
|
|
width: 18px;
|
|
height: 18px;
|
|
accent-color: #2563eb;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.opt-letter {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--border);
|
|
color: #f8fafc;
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
flex-shrink: 0;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.opt.sel .opt-letter {
|
|
background: #2563eb;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.opt-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.opt p {
|
|
display: inline;
|
|
margin: 0;
|
|
}
|
|
|
|
.opt-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-top: 20px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.opt-actions .btn {
|
|
flex: 1 1 auto;
|
|
min-width: 130px;
|
|
}
|
|
|
|
/* Palette Side Column */
|
|
.cbt-side {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-xl);
|
|
padding: 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cbt-side h2 {
|
|
font-size: 0.875rem;
|
|
margin-top: 0;
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.palette {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 6px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.pal {
|
|
aspect-ratio: 1;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--panel);
|
|
color: var(--text-muted);
|
|
font-size: 0.825rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
min-height: 40px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.pal:hover {
|
|
border-color: #38bdf8;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.pal.cur {
|
|
border-color: #38bdf8;
|
|
color: #ffffff;
|
|
box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35);
|
|
}
|
|
|
|
.pal.ans {
|
|
background: #064e3b;
|
|
border-color: #10b981;
|
|
color: #6ee7b7;
|
|
}
|
|
|
|
.pal.rev {
|
|
background: #78350f;
|
|
border-color: #f59e0b;
|
|
color: #fde68a;
|
|
}
|
|
|
|
.pal.skip {
|
|
background: var(--panel);
|
|
}
|
|
|
|
.legend {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin: 8px 0 14px;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.legend li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.legend .sw {
|
|
width: 10px;
|
|
height: 10px;
|
|
display: inline-block;
|
|
border-radius: 2px;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.legend .sw.ans {
|
|
background: #064e3b;
|
|
border-color: #10b981;
|
|
}
|
|
|
|
.legend .sw.rev {
|
|
background: #78350f;
|
|
border-color: #f59e0b;
|
|
}
|
|
|
|
.legend .sw.skip {
|
|
background: var(--panel);
|
|
}
|
|
|
|
/* Floating Palette Button (Mobile) */
|
|
button.pal-fab {
|
|
display: none;
|
|
}
|
|
|
|
.cbt-side [data-close-palette] {
|
|
display: none;
|
|
}
|
|
|
|
/* Per-Subject Timer Strips */
|
|
.subj-timer-bar {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin: 10px 0 6px;
|
|
}
|
|
|
|
.subj-timer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 14px;
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-pill);
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.subj-timer b {
|
|
color: var(--text-main);
|
|
min-width: 5ch;
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.subj-timer.active {
|
|
border-color: #38bdf8;
|
|
background: rgba(56, 189, 248, 0.1);
|
|
color: #38bdf8;
|
|
}
|
|
|
|
.subj-timer.warn {
|
|
border-color: var(--amber);
|
|
color: var(--amber);
|
|
}
|
|
|
|
.subj-timer.done {
|
|
opacity: 0.4;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/* Mistake Tagging */
|
|
.mistake-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
/* Sign-in */
|
|
.signin-primary {
|
|
max-width: 420px;
|
|
}
|
|
|
|
.signin-or {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
max-width: 420px;
|
|
margin: 18px 0 6px;
|
|
color: var(--text-dim);
|
|
font-size: 0.775rem;
|
|
}
|
|
|
|
.signin-or::before,
|
|
.signin-or::after {
|
|
content: "";
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--border);
|
|
}
|
|
|
|
.signin-or span {
|
|
padding: 0 4px;
|
|
}
|
|
|
|
/* Bottom Navigation Bar for Mobile */
|
|
.tabbar {
|
|
display: none;
|
|
}
|
|
|
|
/* ============================================================
|
|
RESPONSIVE DESIGN (Tablets, Phones)
|
|
============================================================ */
|
|
|
|
@media (max-width: 1024px) {
|
|
.build-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.settings-sticky {
|
|
position: static;
|
|
}
|
|
.cbt {
|
|
grid-template-columns: 1fr;
|
|
padding-bottom: 76px;
|
|
}
|
|
.cbt-side {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--card);
|
|
border-top: 1px solid var(--border);
|
|
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
|
padding: 16px 20px calc(76px + env(safe-area-inset-bottom));
|
|
max-height: 75vh;
|
|
overflow-y: auto;
|
|
transform: translateY(100%);
|
|
visibility: hidden;
|
|
transition: transform 0.25s ease, visibility 0.25s;
|
|
z-index: 35;
|
|
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.cbt-side.open {
|
|
transform: translateY(0);
|
|
visibility: visible;
|
|
}
|
|
.cbt-side [data-close-palette] {
|
|
display: block;
|
|
}
|
|
button.pal-fab {
|
|
display: flex;
|
|
align-items: center;
|
|
position: fixed;
|
|
right: 16px;
|
|
bottom: calc(64px + env(safe-area-inset-bottom));
|
|
z-index: 25;
|
|
min-height: 46px;
|
|
padding: 10px 18px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--card);
|
|
border: 1px solid #38bdf8;
|
|
color: #38bdf8;
|
|
font-weight: 600;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
|
|
}
|
|
button.pal-fab[aria-expanded=true] {
|
|
display: none;
|
|
}
|
|
.palette {
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
body {
|
|
padding: 0 14px 72px;
|
|
font-size: 14.5px;
|
|
}
|
|
h1 { font-size: 1.6rem; }
|
|
h2 { font-size: 1.05rem; }
|
|
.grid2, .grid3 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.kv {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.nav a.hidem {
|
|
display: none;
|
|
}
|
|
.brand span {
|
|
display: none;
|
|
}
|
|
.tabbar {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 1fr;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 30;
|
|
background: rgba(16, 23, 40, 0.95);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-top: 1px solid var(--border);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
.tabbar a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 52px;
|
|
padding: 6px 4px;
|
|
font-size: 0.775rem;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
border-right: 1px solid var(--border-subtle);
|
|
}
|
|
.tabbar a:last-child {
|
|
border-right: none;
|
|
}
|
|
.tabbar a:active, .tabbar a.active {
|
|
color: #ffffff;
|
|
background: rgba(37, 99, 235, 0.2);
|
|
}
|
|
body.exam {
|
|
padding-bottom: calc(120px + env(safe-area-inset-bottom));
|
|
}
|
|
.palette {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 8px;
|
|
}
|
|
.pal {
|
|
min-height: 46px;
|
|
}
|
|
.table-wrap {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
margin: 0 -14px;
|
|
padding: 0 14px;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
PRINT / PDF STYLESHEET
|
|
Clean black-on-white layout, no interactive chrome.
|
|
============================================================ */
|
|
|
|
@media print {
|
|
.topbar, .tabbar, footer, .exam-bar, .cbt-side, .opt-actions,
|
|
.mistake-row, .pal-fab, #pal-toggle, form button, .btn, .subj-timer-bar,
|
|
.exam-progress, .cbt-count, .legend, script, .preset-bar, .subject-tabs,
|
|
.settings-col, .chapter-actions, .subtopics-tray-head {
|
|
display: none !important;
|
|
}
|
|
body {
|
|
background: #ffffff !important;
|
|
color: #000000 !important;
|
|
padding: 0 !important;
|
|
font-size: 11pt !important;
|
|
}
|
|
.card, .qpane, details.card, .chapter-card {
|
|
background: #ffffff !important;
|
|
color: #000000 !important;
|
|
border: 1px solid #cccccc !important;
|
|
box-shadow: none !important;
|
|
border-radius: 0 !important;
|
|
break-inside: avoid;
|
|
margin-bottom: 18px !important;
|
|
}
|
|
.opt, .opt.sel, .chk, input[type=text], select, textarea {
|
|
background: #ffffff !important;
|
|
color: #000000 !important;
|
|
border: 1px solid #cccccc !important;
|
|
box-shadow: none !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
.qpane, .qpane[hidden] {
|
|
display: block !important;
|
|
}
|
|
.stem, .stem p, .stem span, p, span, div, h1, h2, h3 {
|
|
color: #000000 !important;
|
|
}
|
|
.dim, .meta {
|
|
color: #555555 !important;
|
|
}
|
|
.opt-letter {
|
|
background: #eeeeee !important;
|
|
color: #000000 !important;
|
|
border: 1px solid #999999 !important;
|
|
}
|
|
@page {
|
|
margin: 15mm;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
ZENITHPREP UI REPLICA STYLES
|
|
============================================================ */
|
|
|
|
.zp-builder-page {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 10px 0 60px;
|
|
}
|
|
|
|
.zp-page-title {
|
|
font-size: 2.1rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
color: #ffffff;
|
|
margin: 14px 0 8px;
|
|
}
|
|
|
|
.zp-page-subtitle {
|
|
color: #94a3b8;
|
|
font-size: 0.95rem;
|
|
line-height: 1.55;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* Top Mode Cards */
|
|
.zp-mode-cards {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.zp-mode-card {
|
|
background: #131b32;
|
|
border: 1px solid #24355a;
|
|
border-radius: 12px;
|
|
padding: 16px 18px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.zp-mode-card:hover {
|
|
background: #182342;
|
|
border-color: #38bdf8;
|
|
}
|
|
|
|
.zp-mode-card.active {
|
|
background: #16254a;
|
|
border: 2px solid #3b82f6;
|
|
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
|
|
}
|
|
|
|
.zp-mode-title {
|
|
display: block;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.zp-mode-card.active .zp-mode-title {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
.zp-mode-desc {
|
|
font-size: 0.825rem;
|
|
color: #94a3b8;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Complete Syllabus Section */
|
|
.zp-syllabus-section {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.zp-btn-syllabus {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: #172344;
|
|
border: 1px solid #2e4478;
|
|
border-radius: 10px;
|
|
padding: 10px 18px;
|
|
color: #93c5fd;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.zp-btn-syllabus:hover {
|
|
background: #1d2c54;
|
|
border-color: #60a5fa;
|
|
color: #ffffff;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.zp-book-icon {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.zp-syllabus-desc {
|
|
color: #94a3b8;
|
|
font-size: 0.85rem;
|
|
margin-top: 8px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
/* Subject Filter Pills Bar */
|
|
.zp-subject-pills-bar {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-bottom: 18px;
|
|
overflow-x: auto;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.zp-subj-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: #131b32;
|
|
border: 1px solid #233357;
|
|
border-radius: 10px;
|
|
padding: 9px 16px;
|
|
color: #cbd5e1;
|
|
font-size: 0.925rem;
|
|
font-weight: 600;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.zp-subj-pill:hover {
|
|
background: #182342;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.zp-subj-pill.active {
|
|
background: #1d2b52;
|
|
border-color: #3b82f6;
|
|
color: #ffffff;
|
|
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
|
|
}
|
|
|
|
.zp-dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.dot-math { background: #c084fc; box-shadow: 0 0 8px rgba(192, 132, 252, 0.6); }
|
|
.dot-phy { background: #22d3ee; box-shadow: 0 0 8px rgba(34, 211, 238, 0.6); }
|
|
.dot-chem { background: #fb923c; box-shadow: 0 0 8px rgba(251, 146, 60, 0.6); }
|
|
|
|
.zp-subj-badge {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
padding: 2px 7px;
|
|
border-radius: var(--radius-pill);
|
|
background: rgba(255, 255, 255, 0.12);
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
/* Search and Action Bar */
|
|
.zp-search-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.zp-search-input-wrap {
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
|
|
.zp-search-icon {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #64748b;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#zp-search-input {
|
|
background: #10172c;
|
|
border: 1px solid #202d4b;
|
|
border-radius: 8px;
|
|
padding: 10px 14px 10px 38px;
|
|
font-size: 0.875rem;
|
|
color: #ffffff;
|
|
min-height: 40px;
|
|
width: 100%;
|
|
}
|
|
#zp-search-input:focus {
|
|
border-color: #38bdf8;
|
|
box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
|
|
}
|
|
|
|
.zp-search-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.zp-btn-action {
|
|
background: #141c33;
|
|
border: 1px solid #24355a;
|
|
border-radius: 8px;
|
|
padding: 8px 14px;
|
|
color: #cbd5e1;
|
|
font-size: 0.825rem;
|
|
font-weight: 600;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.zp-btn-action:hover {
|
|
background: #1a2544;
|
|
color: #ffffff;
|
|
border-color: #38bdf8;
|
|
}
|
|
|
|
/* Chapter List Container (ZenithPrep Table Style) */
|
|
.zp-chapters-container {
|
|
background: #11182d;
|
|
border: 1px solid #1f2c4a;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.zp-chapter-item {
|
|
border-bottom: 1px solid #1a243f;
|
|
}
|
|
.zp-chapter-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.zp-chapter-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 18px;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.zp-chapter-row:hover {
|
|
background: #151f38;
|
|
}
|
|
|
|
.zp-chk-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
flex: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.zp-chk-wrap input[type=checkbox] {
|
|
width: 19px;
|
|
height: 19px;
|
|
accent-color: #2563eb;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.zp-chapter-title {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: #f8fafc;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.zp-expand-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
border: none;
|
|
color: #64748b;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.zp-expand-btn:hover {
|
|
color: #38bdf8;
|
|
background: #17223e;
|
|
}
|
|
|
|
.zp-caret-icon {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.zp-chapter-item.expanded .zp-caret-icon {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* Subtopics Drawer */
|
|
.zp-subtopics-tray {
|
|
display: none;
|
|
background: #0d1324;
|
|
border-top: 1px solid #19243e;
|
|
padding: 12px 18px 16px 48px;
|
|
}
|
|
|
|
.zp-chapter-item.expanded .zp-subtopics-tray {
|
|
display: block;
|
|
}
|
|
|
|
.zp-subtopics-tray-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
font-size: 0.775rem;
|
|
}
|
|
|
|
.zp-link-btn {
|
|
color: #38bdf8;
|
|
background: none;
|
|
border: none;
|
|
font-size: 0.75rem;
|
|
font-family: inherit;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
.zp-link-btn:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.zp-subtopics-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.zp-subtopic-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 6px 0;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.zp-subtopic-row:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.zp-subtopic-row input[type=checkbox] {
|
|
width: 15px;
|
|
height: 15px;
|
|
accent-color: #2563eb;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ============================================================
|
|
BOTTOM FILTER CARD (DIFFICULTY & YEARS) — Exact Zenith Replica
|
|
============================================================ */
|
|
|
|
.zp-filter-box {
|
|
background: #11182d;
|
|
border: 1px solid #202e4d;
|
|
border-radius: 14px;
|
|
padding: 20px 22px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.zp-filter-sec {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.zp-filter-heading {
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.zp-pill-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.zp-filter-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 7px 16px;
|
|
border-radius: 20px;
|
|
background: #141c33;
|
|
border: 1px solid #25365c;
|
|
color: #94a3b8;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
user-select: none;
|
|
}
|
|
|
|
.zp-filter-pill:hover {
|
|
border-color: #38bdf8;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.zp-filter-pill input {
|
|
display: none;
|
|
}
|
|
|
|
.zp-filter-pill.active {
|
|
background: #1c2c54;
|
|
border-color: #3b82f6;
|
|
color: #ffffff;
|
|
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
|
|
}
|
|
|
|
.zp-pill-tick {
|
|
font-size: 0.75rem;
|
|
color: #60a5fa;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Settings Bar */
|
|
.zp-settings-bar {
|
|
background: #11182d;
|
|
border: 1px solid #202e4d;
|
|
border-radius: 14px;
|
|
padding: 20px 22px;
|
|
}
|
|
|
|
.zp-settings-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 18px;
|
|
border-bottom: 1px solid #1a2542;
|
|
}
|
|
|
|
.zp-setting-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.zp-setting-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: #64748b;
|
|
margin: 0;
|
|
}
|
|
|
|
.zp-count-pills {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.zp-cnt-btn {
|
|
padding: 8px 14px;
|
|
border-radius: 8px;
|
|
background: #141c33;
|
|
border: 1px solid #24355a;
|
|
color: #cbd5e1;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.zp-cnt-btn:hover {
|
|
border-color: #38bdf8;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.zp-cnt-btn.active {
|
|
background: #2563eb;
|
|
border-color: #2563eb;
|
|
color: #ffffff;
|
|
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
|
|
}
|
|
|
|
.zp-toggle-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 0.85rem;
|
|
color: #cbd5e1;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
.zp-toggle-label input[type=checkbox] {
|
|
width: 17px;
|
|
height: 17px;
|
|
accent-color: #2563eb;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.zp-submit-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.zp-summary-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.zp-summary-text b {
|
|
font-size: 1rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.zp-btn-start {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px 28px;
|
|
border-radius: 10px;
|
|
background: #2563eb;
|
|
border: none;
|
|
color: #ffffff;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
|
|
transition: all 0.15s ease;
|
|
min-width: 220px;
|
|
}
|
|
|
|
.zp-btn-start:hover:not(:disabled) {
|
|
background: #1d4ed8;
|
|
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.zp-btn-start:disabled {
|
|
opacity: 0.4;
|
|
background: #182342;
|
|
border: 1px solid #24355a;
|
|
color: #64748b;
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
.zp-btn-desc {
|
|
font-size: 0.725rem;
|
|
font-weight: 400;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* Brand Group in Header */
|
|
.brand-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.badge-syll {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
padding: 3px 8px;
|
|
border-radius: 999px;
|
|
background: rgba(37, 99, 235, 0.2);
|
|
border: 1px solid rgba(37, 99, 235, 0.4);
|
|
color: #93c5fd;
|
|
}
|
|
|
|
.user-greeting {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.btn-logout {
|
|
color: #94a3b8;
|
|
font-size: 0.825rem;
|
|
font-weight: 500;
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
transition: color 0.15s;
|
|
}
|
|
.btn-logout:hover {
|
|
color: #ef4444;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.zp-mode-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.zp-settings-row {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.zp-submit-row {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.zp-btn-start {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Selection clarity: a checked chapter row highlights so deselect is obvious. */
|
|
.zp-chapter-item:has(.chap:checked) .zp-chapter-row {
|
|
background: rgba(37, 99, 235, 0.12);
|
|
border-left: 3px solid #3b82f6;
|
|
}
|
|
.zp-chapter-item:has(.chap:checked) .zp-chapter-title {
|
|
color: #60a5fa;
|
|
}
|
|
.zp-subtopic-row:has(input:checked) .zp-subtopic-title {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
/* ===== brand logo ===== */
|
|
img.brand-logo {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.3));
|
|
}
|