/* ── Custom properties ───────────────────────────────────── */
:root {
--navy: #1B3A5C;
--teal: #0D7E8A;
--teal-light: #E6F4F5;
--amber: #D97706;
--slate: #475569;
--gray-100: #F1F5F9;
--gray-200: #E2E8F0;
--gray-400: #94A3B8;
--white: #FFFFFF;
--text: #0F172A;
--green: #065F46;
--green-light:#D1FAE5;
--red: #7F1D1D;
--red-light: #FEE2E2;
--radius: 8px;
--shadow: 0 2px 8px rgba(0,0,0,0.08);
--font: "Georgia", serif;
--font-mono: "Courier New", monospace;
}
/* ── Reset & base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
body {
font-family: var(--font);
font-size: 16px;
color: var(--text);
background: var(--gray-100);
line-height: 1.6;
}
/* ── Header ──────────────────────────────────────────────── */
.app-header {
background: var(--navy);
color: var(--white);
padding: 1.5rem 2rem 0;
}
.header-inner h1 { font-size: 1.8rem; font-weight: 700; }
.tagline { color: #93C5FD; font-size: 0.9rem; margin-top: 0.2rem; }
/* ── Step navigation ─────────────────────────────────────── */
.step-nav {
display: flex;
gap: 0;
margin-top: 1.5rem;
}
.step-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
color: #93C5FD;
border-bottom: 3px solid transparent;
cursor: default;
font-size: 0.9rem;
transition: border-color 0.2s;
}
.step-item.active {
color: var(--white);
border-bottom-color: var(--teal);
}
.step-item.done { color: #6EE7B7; }
.step-num {
width: 1.6rem; height: 1.6rem;
border-radius: 50%;
background: rgba(255,255,255,0.15);
display: grid; place-items: center;
font-size: 0.8rem; font-weight: 700;
}
.step-item.active .step-num { background: var(--teal); }
.step-item.done .step-num { background: #059669; }
/* ── Main content ────────────────────────────────────────── */
.app-main {
max-width: 820px;
margin: 2rem auto;
padding: 0 1rem;
position: relative;
}
.step-panel { display: none; }
.step-panel.active { display: block; }
.step-panel h2 {
font-size: 1.4rem;
color: var(--navy);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--teal);
}
.step-panel h3 {
font-size: 1.1rem;
color: var(--navy);
margin: 1.5rem 0 0.5rem;
}
/* ── Form ────────────────────────────────────────────────── */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.5rem;
}
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
label {
display: flex; flex-direction: column; gap: 0.3rem;
font-size: 0.9rem; font-weight: 600; color: var(--slate);
}
input[type="text"], input[type="number"], input[type="url"] {
padding: 0.55rem 0.8rem;
border: 1.5px solid var(--gray-200);
border-radius: var(--radius);
font-family: var(--font); font-size: 0.95rem;
transition: border-color 0.15s;
}
input:focus {
outline: none;
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(13,126,138,0.12);
}
.toggle-row {
display: flex; align-items: flex-start;
gap: 0.6rem; flex-direction: row;
font-weight: normal; margin-top: 1rem;
font-size: 0.9rem;
}
.help-text { font-size: 0.85rem; color: var(--slate); margin-bottom: 0.8rem; }
/* ── Bloom selector ──────────────────────────────────────── */
.bloom-bar {
display: flex; height: 12px; border-radius: 6px;
overflow: hidden; margin-bottom: 1rem;
background: var(--gray-200);
}
.bloom-segment { height: 100%; transition: width 0.2s; }
.bloom-row {
display: grid;
grid-template-columns: 14px 1fr auto 48px;
align-items: center; gap: 0.8rem;
margin-bottom: 0.6rem;
}
.bloom-dot {
width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
}
.bloom-info { display: flex; flex-direction: column; gap: 0.05rem; }
.bloom-label { font-weight: 700; font-size: 0.9rem; color: var(--navy); }
.bloom-desc { font-size: 0.75rem; color: var(--slate); }
input[type="range"] { width: 140px; cursor: pointer; accent-color: var(--teal); }
.bloom-pct { font-size: 0.85rem; color: var(--slate);
text-align: right; min-width: 40px; }
/* ── Dropzone ────────────────────────────────────────────── */
.dropzone {
border: 2px dashed var(--gray-400);
border-radius: var(--radius);
padding: 2.5rem 1.5rem;
text-align: center;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
margin-bottom: 1rem;
}
.dropzone:hover, .dropzone.drag-over {
border-color: var(--teal);
background: var(--teal-light);
}
.upload-icon { width: 40px; height: 40px; color: var(--gray-400);
margin: 0 auto 0.5rem; display: block; }
.upload-types { font-size: 0.8rem; color: var(--slate); margin-top: 0.3rem; }
/* ── URL row ─────────────────────────────────────────────── */
.url-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.url-row input { flex: 1; }
/* ── Resource list ───────────────────────────────────────── */
.resource-list { list-style: none; padding: 0; margin-bottom: 1rem; }
.resource-item {
display: flex; align-items: center; gap: 0.6rem;
padding: 0.5rem 0.75rem;
background: var(--green-light);
border-radius: var(--radius);
margin-bottom: 0.4rem;
font-size: 0.9rem;
}
.resource-check { color: var(--green); font-weight: 700; }
.resource-name { flex: 1; color: var(--text); }
.resource-chars { font-size: 0.8rem; color: var(--slate); }
/* ── Buttons ─────────────────────────────────────────────── */
.btn-row {
display: flex; gap: 0.75rem; justify-content: flex-end;
margin-top: 2rem; padding-top: 1.5rem;
border-top: 1px solid var(--gray-200);
}
button {
font-family: var(--font);
font-size: 0.95rem;
border: none;
border-radius: var(--radius);
cursor: pointer;
padding: 0.6rem 1.4rem;
transition: opacity 0.15s, transform 0.1s;
}
button:active { transform: scale(0.98); }
.btn-primary { background: var(--teal); color: var(--white); font-weight: 700; }
.btn-secondary{ background: var(--white); color: var(--teal);
border: 1.5px solid var(--teal); }
.btn-ghost { background: transparent; color: var(--slate);
border: 1.5px solid var(--gray-200); }
.btn-large { padding: 0.9rem 2rem; font-size: 1.1rem; }
.btn-icon { background: transparent; color: var(--slate);
padding: 0.3rem 0.6rem; font-size: 1.1rem; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
/* ── Question cards ──────────────────────────────────────── */
.question-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
margin-bottom: 1rem;
box-shadow: var(--shadow);
overflow: hidden;
}
.card-header {
display: flex; align-items: center; gap: 0.6rem;
padding: 0.75rem 1rem;
background: var(--gray-100);
border-bottom: 1px solid var(--gray-200);
}
.q-num { font-weight: 700; color: var(--navy); font-size: 0.9rem; }
.bloom-badge {
padding: 0.2rem 0.6rem;
border-radius: 20px;
color: var(--white);
font-size: 0.78rem; font-weight: 700;
}
.hot-badge {
font-size: 0.78rem; padding: 0.2rem 0.5rem;
border-radius: 20px;
}
.hot-badge.ok { background: var(--green-light); color: var(--green); }
.hot-badge.warn { background: var(--red-light); color: var(--red); }
.card-actions { margin-left: auto; }
.stem-row { padding: 1rem; position: relative; }
.q-stem {
font-size: 1rem; line-height: 1.55;
border-radius: 4px; padding: 0.3rem;
border: 1.5px solid transparent;
transition: border-color 0.15s;
}
.q-stem:focus {
outline: none;
border-color: var(--teal);
background: var(--teal-light);
}
.edit-hint { font-size:0.75rem; color:var(--gray-400); display:block; margin-top:0.3rem; }
.options-list { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.option {
display: flex; align-items: center; gap: 0.6rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
border: 1.5px solid var(--gray-200);
font-size: 0.92rem;
}
.option.correct {
border-color: #059669;
background: var(--green-light);
}
.opt-key { font-weight: 700; color: var(--navy); min-width: 20px; }
.opt-text { flex: 1; }
.correct-mark { color: var(--green); font-weight: 700; }
.rationale-panel {
padding: 1rem;
background: var(--gray-100);
border-top: 1px solid var(--gray-200);
font-size: 0.9rem;
}
.rationale-panel h4 { color: var(--navy); margin-bottom: 0.25rem; margin-top: 0.75rem; }
.rationale-panel h4:first-child { margin-top: 0; }
.distractor-note {
margin-top: 0.5rem; padding: 0.4rem 0.6rem;
background: var(--red-light); border-radius: 4px;
font-size: 0.85rem; color: var(--red);
}
/* ── Warning banner ──────────────────────────────────────── */
.warning-banner {
background: var(--red-light); color: var(--red);
padding: 0.6rem 1rem; border-radius: var(--radius);
margin-bottom: 0.5rem; font-size: 0.9rem;
}
.warning { color: var(--red); font-size: 0.85rem; margin-top: 0.3rem; }
/* ── Export panel ────────────────────────────────────────── */
.export-summary {
background: var(--white); padding: 1.5rem;
border-radius: var(--radius); margin-bottom: 1.5rem;
border: 1px solid var(--gray-200);
}
.export-summary ul { margin-top: 0.5rem; padding-left: 1.2rem; }
/* ── Loading overlay ─────────────────────────────────────── */
.loading-overlay {
position: fixed; inset: 0;
background: rgba(27,58,92,0.6);
display: grid; place-items: center;
z-index: 999;
backdrop-filter: blur(2px);
}
.loading-overlay p { color: var(--white); font-size: 1rem; margin-top: 1rem; }
.spinner {
width: 48px; height: 48px;
border: 4px solid rgba(255,255,255,0.3);
border-top-color: var(--teal);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }