diff --git a/frontend/dashboard.html b/frontend/dashboard.html
index c90ac63..a3079ec 100644
--- a/frontend/dashboard.html
+++ b/frontend/dashboard.html
@@ -23,7 +23,7 @@
}
.dh-avatar {
width: 44px; height: 44px; border-radius: 50%;
- background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+ background: var(--grad-1);
display: flex; align-items: center; justify-content: center;
font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800; color: #fff;
flex-shrink: 0;
@@ -31,7 +31,7 @@
.dh-text { flex: 1; min-width: 0; }
.dh-greeting {
font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800;
- color: #0F172A; letter-spacing: -0.02em;
+ color: var(--text); letter-spacing: -0.02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-sub { font-size: 0.78rem; color: var(--text-3); font-weight: 500; margin-top: 2px; }
@@ -78,7 +78,7 @@
.ac-card:hover { border-color: rgba(155,93,229,0.25); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,23,42,0.08); }
.ac-emoji { font-size: 1.4rem; flex-shrink: 0; }
.ac-body { flex: 1; min-width: 0; }
- .ac-title { font-size: 0.84rem; font-weight: 700; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+ .ac-title { font-size: 0.84rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-badge { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--violet); flex-shrink: 0; }
@@ -95,7 +95,7 @@
display: flex; align-items: center; gap: 8px;
padding: 12px 20px; border-radius: 14px;
border: 1.5px solid rgba(15,23,42,0.08);
- background: #fff; color: #0F172A;
+ background: #fff; color: var(--text);
font-family: 'Manrope', sans-serif; font-size: 0.84rem; font-weight: 700;
cursor: pointer; transition: all 0.18s; text-decoration: none;
box-shadow: 0 2px 8px rgba(15,23,42,0.04);
@@ -141,7 +141,7 @@
.grade-row:last-child { border-bottom: none; }
.grade-pct { font-family: 'Unbounded', sans-serif; font-size: 0.88rem; font-weight: 900; min-width: 42px; text-align: center; }
.grade-body { flex: 1; min-width: 0; }
- .grade-subj { font-size: 0.82rem; font-weight: 700; color: #0F172A; }
+ .grade-subj { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.grade-date { font-size: 0.7rem; color: var(--text-3); }
/* ── activity widget tabs ── */
@@ -152,7 +152,7 @@
color: var(--text-3); background: transparent; cursor: pointer; transition: all 0.15s;
}
.act-tab:hover { color: var(--violet); }
- .act-tab.active { background: #0F172A; color: #fff; }
+ .act-tab.active { background: var(--text); color: #fff; }
.act-scale-btns { display: flex; gap: 3px; }
.act-scale-btn {
padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(15,23,42,0.08);
@@ -193,7 +193,7 @@
border-top: 1px solid rgba(15,23,42,0.05);
font-size: 0.68rem; color: var(--text-3); font-weight: 600; flex-wrap: wrap;
}
- .hm-footer strong { color: #0F172A; font-weight: 800; }
+ .hm-footer strong { color: var(--text); font-weight: 800; }
.hm-legend { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hm-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.hm-legend-label { font-size: 0.58rem; }
@@ -207,7 +207,7 @@
font-family: 'Manrope', sans-serif;
animation: fadeIn 0.2s ease;
}
- .hm-day-popup .hdp-date { font-size: 0.72rem; font-weight: 800; color: #0F172A; margin-bottom: 8px; }
+ .hm-day-popup .hdp-date { font-size: 0.72rem; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.hm-day-popup .hdp-row {
display: flex; align-items: center; gap: 8px;
padding: 5px 0; border-bottom: 1px solid rgba(15,23,42,0.04);
@@ -215,13 +215,13 @@
}
.hm-day-popup .hdp-row:last-child { border-bottom: none; }
.hm-day-popup .hdp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
- .hm-day-popup .hdp-subj { flex: 1; font-weight: 600; color: #0F172A; }
+ .hm-day-popup .hdp-subj { flex: 1; font-weight: 600; color: var(--text); }
.hm-day-popup .hdp-score { font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 900; }
.hm-day-popup .hdp-mode { font-size: 0.66rem; color: var(--text-3); }
.hm-day-popup .hdp-empty { font-size: 0.75rem; color: var(--text-3); padding: 4px 0; }
/* Dark mode */
- .app-layout.dark .act-tab.active { background: #E8ECF2; color: #0F172A; }
+ .app-layout.dark .act-tab.active { background: #E8ECF2; color: var(--text); }
.app-layout.dark .act-scale-btn { border-color: rgba(255,255,255,0.08); color: #6B7A8E; }
.app-layout.dark .act-scale-btn.active { background: rgba(155,93,229,0.12); border-color: rgba(155,93,229,0.3); color: var(--violet); }
.app-layout.dark .mhm-cell { background: rgba(255,255,255,0.04); }
@@ -241,7 +241,7 @@
.continue-card:hover { border-color: rgba(155,93,229,0.3); transform: translateX(3px); }
.cont-emoji { font-size: 1.5rem; flex-shrink: 0; }
.cont-info { flex: 1; min-width: 0; }
- .cont-title { font-size: 0.85rem; font-weight: 700; color: #0F172A; }
+ .cont-title { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.cont-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
.cont-pct { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--violet); }
@@ -251,7 +251,7 @@
padding: 10px 0; border-bottom: 1px solid rgba(15,23,42,0.05);
}
.subj-prog-row:last-child { border-bottom: none; }
- .sp-name { font-size: 0.82rem; font-weight: 700; min-width: 90px; color: #0F172A; }
+ .sp-name { font-size: 0.82rem; font-weight: 700; min-width: 90px; color: var(--text); }
.sp-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(15,23,42,0.06); overflow: hidden; }
.sp-fill { height: 100%; border-radius: 99px; transition: width 0.8s cubic-bezier(.34,1.2,.64,1); }
.sp-pct { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; min-width: 40px; text-align: right; }
@@ -273,7 +273,7 @@
}
.smc-icon svg, .smc-icon i { width: 20px; height: 20px; stroke: #fff; stroke-width: 1.8; }
.smc-body { flex: 1; min-width: 0; }
- .smc-name { font-size: 0.86rem; font-weight: 700; color: #0F172A; }
+ .smc-name { font-size: 0.86rem; font-weight: 700; color: var(--text); }
.smc-meta { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
.smc-arrow { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
@@ -311,7 +311,7 @@
/* B3: Heatmap tooltip */
.hm-tip {
position: fixed; z-index: 200; pointer-events: none;
- background: #0F172A; color: #fff; padding: 6px 12px; border-radius: 8px;
+ background: var(--text); color: #fff; padding: 6px 12px; border-radius: 8px;
font-size: 0.72rem; font-weight: 600; font-family: 'Manrope', sans-serif;
box-shadow: 0 8px 24px rgba(0,0,0,0.25); white-space: nowrap;
opacity: 0; transition: opacity 0.15s;
@@ -322,7 +322,7 @@
.assign-search {
width: 100%; padding: 8px 14px 8px 34px; border: 1.5px solid rgba(15,23,42,0.08);
border-radius: 10px; font-family: 'Manrope', sans-serif; font-size: 0.82rem;
- color: #0F172A; background: #f8f9fc; transition: border-color 0.2s;
+ color: var(--text); background: #f8f9fc; transition: border-color 0.2s;
box-sizing: border-box; margin-bottom: 10px;
}
.assign-search:focus { outline: none; border-color: var(--violet); background: #fff; }
@@ -369,7 +369,7 @@
50% { box-shadow: 0 0 0 5px rgba(155,93,229,0); }
}
.sc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
- .sc-month { font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800; color: #0F172A; }
+ .sc-month { font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800; color: var(--text); }
.sc-streak-badge { font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800; color: #F59E0B; display: flex; align-items: center; gap: 4px; }
.sc-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.sc-wd { font-size: 0.56rem; color: var(--text-3); font-weight: 700; text-align: center; text-transform: uppercase; }
@@ -392,7 +392,7 @@
padding: 10px 16px; border-radius: 12px;
border: 1.5px solid rgba(15,23,42,0.1); background: #fff;
cursor: pointer; transition: all 0.15s; flex: 1; min-width: 100px;
- font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700; color: #0F172A;
+ font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--text);
}
.qs-subj-btn:hover { border-color: rgba(155,93,229,0.3); }
.qs-subj-btn.active { border-color: var(--violet); background: rgba(155,93,229,0.06); color: var(--violet); }
@@ -404,7 +404,7 @@
.qs-select, .qs-input {
flex: 1; padding: 8px 12px; border: 1.5px solid rgba(15,23,42,0.1);
border-radius: 8px; font-family: 'Manrope', sans-serif; font-size: 0.82rem;
- color: #0F172A; background: #f8f9fc;
+ color: var(--text); background: #f8f9fc;
}
.qs-select:focus, .qs-input:focus { outline: none; border-color: var(--violet); }
@@ -428,7 +428,7 @@
padding: 12px 14px; border-radius: 12px;
border: 1.5px solid rgba(15,23,42,0.07); background: #fff;
font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700;
- color: #0F172A; cursor: pointer; transition: all 0.18s;
+ color: var(--text); cursor: pointer; transition: all 0.18s;
text-decoration: none; position: relative;
}
.adm-act:hover { border-color: rgba(155,93,229,0.25); transform: translateY(-2px) scale(1.01); box-shadow: 0 6px 20px rgba(15,23,42,0.10); }
@@ -474,7 +474,7 @@
font-size: 0.76rem;
}
.adm-sess-row:last-child { border-bottom: none; }
- .adm-sess-name { flex: 1; font-weight: 600; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+ .adm-sess-name { flex: 1; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-sess-subj { color: var(--text-3); font-weight: 600; min-width: 60px; }
.adm-sess-pct { font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 0.74rem; min-width: 36px; text-align: right; }
/* Colored chip for session % */
@@ -548,7 +548,7 @@
}
.cs-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.cs-body { flex: 1; min-width: 0; }
- .cs-name { font-size: 0.84rem; font-weight: 700; color: #0F172A; }
+ .cs-name { font-size: 0.84rem; font-weight: 700; color: var(--text); }
.cs-stats { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; display: flex; gap: 10px; }
.cs-stats span { display: flex; align-items: center; gap: 3px; }
.cs-bar { width: 60px; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.07); overflow: hidden; flex-shrink: 0; }
@@ -582,7 +582,7 @@
cursor: pointer; transition: all 0.16s;
}
.assign-chip:hover { border-color: rgba(155,93,229,0.3); color: var(--violet); }
- .assign-chip.active { background: #0F172A; color: #fff; border-color: #0F172A; }
+ .assign-chip.active { background: var(--text); color: #fff; border-color: var(--text); }
.assign-stats { font-size: 0.75rem; color: var(--text-3); font-weight: 600; display: flex; gap: 14px; flex-wrap: wrap; }
.assign-stats .s-active { color: var(--violet); }
.assign-stats .s-overdue { color: var(--pink); }
@@ -639,7 +639,7 @@
.ae-dl-fill { height: 100%; border-radius: 99px; transition: width 0.4s; }
.ae-btn {
padding: 8px 24px; border: none; border-radius: 99px;
- background: #0F172A; color: #fff;
+ background: var(--text); color: #fff;
font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
cursor: pointer; transition: background 0.15s; white-space: nowrap; flex-shrink: 0;
}
@@ -680,7 +680,7 @@
.ar-body { flex: 1; min-width: 0; }
.ar-title {
- font-size: 0.88rem; font-weight: 700; color: #0F172A;
+ font-size: 0.88rem; font-weight: 700; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
.ar-meta {
@@ -704,7 +704,7 @@
.ar-btn {
padding: 6px 16px; border: none; border-radius: 99px;
- background: #0F172A; color: #fff;
+ background: var(--text); color: #fff;
font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 700;
cursor: pointer; transition: background 0.15s; white-space: nowrap;
}
@@ -748,9 +748,9 @@
.hist-pct.mid { color: var(--amber); }
.hist-pct.lo { color: var(--pink); }
.hist-info { flex: 1; }
- .hist-subj { font-size: 0.88rem; font-weight: 700; margin-bottom: 2px; color: #0F172A; }
+ .hist-subj { font-size: 0.88rem; font-weight: 700; margin-bottom: 2px; color: var(--text); }
.hist-meta { font-size: 0.75rem; color: var(--text-3); }
- .hist-score { font-size: 0.8rem; color: #3D4F6B; font-weight: 600; white-space: nowrap; }
+ .hist-score { font-size: 0.8rem; color: var(--text-2); font-weight: 600; white-space: nowrap; }
/* ── progress tab ── */
.chart-section-title {
@@ -780,7 +780,7 @@
transition: all 0.2s;
}
.subj-chart-card:hover { border-color: rgba(15,23,42,0.14); transform: translateY(-3px); box-shadow: 0 10px 32px rgba(15,23,42,0.1); }
- .subj-chart-name { font-family: 'Unbounded', sans-serif; font-size: 0.76rem; font-weight: 800; color: #0F172A; }
+ .subj-chart-name { font-family: 'Unbounded', sans-serif; font-size: 0.76rem; font-weight: 800; color: var(--text); }
.subj-chart-sessions { font-size: 0.72rem; color: var(--text-3); }
.canvas-wrap { position: relative; width: 130px; height: 130px; margin: 4px 0; }
@@ -795,10 +795,10 @@
}
.weak-item:hover { border-color: rgba(15,23,42,0.12); transform: translateX(4px); box-shadow: 0 6px 24px rgba(15,23,42,0.08); }
.weak-bar-wrap { flex: 1; }
- .weak-name { font-size: 0.88rem; font-weight: 700; margin-bottom: 2px; color: #0F172A; }
+ .weak-name { font-size: 0.88rem; font-weight: 700; margin-bottom: 2px; color: var(--text); }
.weak-meta { font-size: 0.75rem; color: var(--text-3); }
.weak-bar { height: 7px; background: rgba(15,23,42,0.07); border-radius: 99px; overflow: hidden; margin-top: 8px; }
- .weak-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FF9F1C, #F15BB5); transition: width 0.8s cubic-bezier(0.34,1.2,0.64,1); }
+ .weak-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FF9F1C, var(--pink)); transition: width 0.8s cubic-bezier(0.34,1.2,0.64,1); }
.weak-pct { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 900; color: #E0335E; min-width: 48px; text-align: right; }
/* ── submission strip in expand ── */
@@ -827,7 +827,7 @@
.ar-sub-chip.s-reviewed { background: rgba(5,150,82,0.1); color: #059652; }
.ar-sub-chip.s-accepted { background: rgba(5,150,82,0.12); color: #059652; }
.ar-sub-chip.s-revision { background: rgba(241,91,181,0.1); color: #c0306a; }
- .ar-sub-chip.s-none { background: rgba(155,93,229,0.08); color: #9B5DE5; }
+ .ar-sub-chip.s-none { background: rgba(155,93,229,0.08); color: var(--violet); }
/* ── My submissions widget ── */
.my-subs-list { display: flex; flex-direction: column; gap: 6px; }
@@ -838,14 +838,14 @@
transition: transform 0.15s, box-shadow 0.15s;
}
.ms-row:hover { transform: translateX(3px); box-shadow: 0 4px 16px rgba(15,23,42,0.07); }
- .ms-title { flex: 1; font-size: 0.82rem; font-weight: 600; color: #0F172A;
+ .ms-title { flex: 1; font-size: 0.82rem; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-file { font-size: 0.7rem; color: var(--text-3); flex-shrink: 0; max-width: 120px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-grade { font-weight: 800; font-size: 0.78rem; flex-shrink: 0; }
.ms-more { display: inline-block; margin-top: 8px; font-size: 0.78rem; font-weight: 700; color: var(--violet); text-decoration: none; }
.ms-more:hover { text-decoration: underline; }
- .ae-submit-note { font-size: 0.75rem; color: #3D4F6B; flex: 1; font-style: italic; }
+ .ae-submit-note { font-size: 0.75rem; color: var(--text-2); flex: 1; font-style: italic; }
.ae-grade-badge {
display: inline-flex; align-items: center; gap: 3px;
padding: 3px 9px; border-radius: 99px; font-size: 0.72rem; font-weight: 800;
@@ -884,7 +884,7 @@
box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}
.empty-cta-icon { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.12)); }
- .empty-cta-title { font-family: 'Unbounded', sans-serif; font-size: 1.05rem; font-weight: 800; color: #0F172A; }
+ .empty-cta-title { font-family: 'Unbounded', sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--text); }
.empty-cta-desc { font-size: 0.88rem; color: #6B7A8E; max-width: 300px; line-height: 1.7; }
/* ── nav active ── */
@@ -917,7 +917,7 @@
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.btn-cancel { padding: 10px 22px; border: 1.5px solid rgba(15,23,42,0.15); border-radius: 999px; background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all 0.18s; }
.btn-cancel:hover { border-color: rgba(15,23,42,0.3); color: var(--text); }
- .btn-join { padding: 10px 28px; border: none; border-radius: 999px; background: #0F172A; color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px rgba(15,23,42,0.2); transition: all 0.18s; }
+ .btn-join { padding: 10px 28px; border: none; border-radius: 999px; background: var(--text); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px rgba(15,23,42,0.2); transition: all 0.18s; }
.btn-join:hover { background: #1E2D4A; box-shadow: 0 6px 20px rgba(15,23,42,0.25); }
.btn-join:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
@@ -952,7 +952,7 @@
.stats-bar:hover::after {
content: attr(data-tip); position: absolute; bottom: 100%; left: 50%;
transform: translateX(-50%); padding: 3px 8px; border-radius: 6px;
- background: #0F172A; color: #fff; font-size: 0.65rem; font-weight: 600;
+ background: var(--text); color: #fff; font-size: 0.65rem; font-weight: 600;
white-space: nowrap; pointer-events: none;
}
.stats-bar-labels { display: flex; gap: 4px; margin-top: 4px; }
@@ -972,7 +972,7 @@
}
.stats-chip-val {
font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 800;
- color: #0F172A; line-height: 1;
+ color: var(--text); line-height: 1;
}
.stats-chip-lbl { font-size: 0.65rem; color: var(--text-3); margin-top: 3px; font-weight: 600; }
@@ -1009,7 +1009,7 @@
.tc-header { display: flex; align-items: center; gap: 10px; }
.tc-emoji { font-size: 1.6rem; line-height: 1; }
.tc-info { flex: 1; }
- .tc-title { font-size: 0.88rem; font-weight: 700; color: #0F172A; line-height: 1.35; }
+ .tc-title { font-size: 0.88rem; font-weight: 700; color: var(--text); line-height: 1.35; }
.tc-subj { font-size: 0.7rem; font-weight: 700; color: var(--text-3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.tc-progress { display: flex; align-items: center; gap: 8px; }
.tc-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.07); }
@@ -1024,14 +1024,14 @@
box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}
.lb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
- .lb-title { font-family: 'Unbounded', sans-serif; font-size: 0.84rem; font-weight: 800; color: #0F172A; }
+ .lb-title { font-family: 'Unbounded', sans-serif; font-size: 0.84rem; font-weight: 800; color: var(--text); }
.lb-tabs { display: flex; gap: 4px; }
.lb-tab {
padding: 5px 12px; border-radius: 99px; border: none;
font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 700;
background: transparent; color: var(--text-3); cursor: pointer; transition: all 0.15s;
}
- .lb-tab.active { background: linear-gradient(135deg, rgba(155,93,229,0.1), rgba(6,214,224,0.08)); color: #9B5DE5; }
+ .lb-tab.active { background: linear-gradient(135deg, rgba(155,93,229,0.1), rgba(6,214,224,0.08)); color: var(--violet); }
.lb-list { display: flex; flex-direction: column; gap: 4px; }
.lb-row {
display: flex; align-items: center; gap: 10px;
@@ -1050,19 +1050,19 @@
.lb-pos.bronze { background: linear-gradient(135deg, #CD7F32, #B87333); color: #fff; }
.lb-avatar {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
- background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+ background: var(--grad-1);
display: flex; align-items: center; justify-content: center;
font-family: 'Unbounded', sans-serif; font-size: 0.6rem; font-weight: 800; color: #fff;
}
.lb-info { flex: 1; min-width: 0; }
- .lb-name { font-size: 0.82rem; font-weight: 700; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+ .lb-name { font-size: 0.82rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-rank { font-size: 0.64rem; color: var(--text-3); font-weight: 600; }
- .lb-xp { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; color: #9B5DE5; flex-shrink: 0; }
+ .lb-xp { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; color: var(--violet); flex-shrink: 0; }
.lb-empty { text-align: center; padding: 20px; color: var(--text-3); font-size: 0.82rem; }
.lb-class-sel {
padding: 5px 10px; border-radius: 10px; border: 1.5px solid rgba(15,23,42,0.1);
background: #fff; font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 600;
- color: #0F172A; cursor: pointer; outline: none;
+ color: var(--text); cursor: pointer; outline: none;
}
/* ── Challenges widget ── */
@@ -1078,14 +1078,14 @@
.ch-item.claimed { opacity: 0.55; }
.ch-icon { font-size: 1.3rem; flex-shrink: 0; }
.ch-body { flex: 1; min-width: 0; }
- .ch-title { font-size: 0.84rem; font-weight: 700; color: #0F172A; }
+ .ch-title { font-size: 0.84rem; font-weight: 700; color: var(--text); }
.ch-desc { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
.ch-prog { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ch-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.07); overflow: hidden; }
.ch-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #9B5DE5, #06D6E0); transition: width 0.4s; }
- .ch-pct { font-size: 0.68rem; font-weight: 700; color: #9B5DE5; flex-shrink: 0; }
+ .ch-pct { font-size: 0.68rem; font-weight: 700; color: var(--violet); flex-shrink: 0; }
.ch-reward { flex-shrink: 0; text-align: right; }
- .ch-xp { font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800; color: #9B5DE5; }
+ .ch-xp { font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800; color: var(--violet); }
.ch-claim {
margin-top: 4px; padding: 4px 12px; border: none; border-radius: 99px;
background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif;
@@ -1103,7 +1103,7 @@
}
.gam-level {
width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
- background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+ background: var(--grad-1);
display: flex; flex-direction: column; align-items: center; justify-content: center;
color: #fff; line-height: 1;
}
@@ -1111,7 +1111,7 @@
.gam-level-lbl { font-size: 0.52rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.gam-main { flex: 1; min-width: 0; }
.gam-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
- .gam-rank { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: #0F172A; }
+ .gam-rank { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--text); }
.gam-xp-text { font-size: 0.72rem; color: var(--text-3); font-weight: 600; }
.gam-progress { height: 8px; border-radius: 99px; background: rgba(15,23,42,0.07); overflow: hidden; }
.gam-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #9B5DE5, #06D6E0); transition: width 0.6s ease; }
@@ -1123,7 +1123,7 @@
min-width: 62px;
}
.gam-chip-icon { font-size: 1.1rem; line-height: 1; }
- .gam-chip-val { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; color: #0F172A; }
+ .gam-chip-val { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; color: var(--text); }
.gam-chip-lbl { font-size: 0.58rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; }
.gam-goal-ring { position: relative; width: 40px; height: 40px; }
.gam-goal-ring svg { width: 40px; height: 40px; }
@@ -1246,7 +1246,7 @@
display: none; /* shown for students via JS */
position: fixed; bottom: 88px; right: 20px; z-index: 80;
width: 44px; height: 44px; border-radius: 50%;
- background: #9B5DE5; border: none; cursor: pointer;
+ background: var(--violet); border: none; cursor: pointer;
box-shadow: 0 4px 16px rgba(155,93,229,0.45);
align-items: center; justify-content: center;
transition: transform .15s, box-shadow .15s;
@@ -1261,7 +1261,7 @@
}
.dash-cfg-panel.open { display: block; }
.dash-cfg-title {
- font-size: 0.72rem; font-weight: 700; color: #9B5DE5;
+ font-size: 0.72rem; font-weight: 700; color: var(--violet);
text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px;
}
.dash-cfg-row {
@@ -1270,7 +1270,7 @@
}
.dash-cfg-row:hover { background: rgba(255,255,255,.05); }
.dash-cfg-row label { font-size: 0.83rem; color: #e2e8f0; cursor: pointer; flex: 1; }
- .dash-cfg-row input[type=checkbox] { accent-color: #9B5DE5; width: 15px; height: 15px; cursor: pointer; }
+ .dash-cfg-row input[type=checkbox] { accent-color: var(--violet); width: 15px; height: 15px; cursor: pointer; }
.dash-cfg-wrap { display: contents; }
@@ -1716,7 +1716,7 @@
const xpPct = dg.xp_target > 0 ? Math.min(100, Math.round(dg.xp_earned / dg.xp_target * 100)) : 0;
const avgPct = Math.round((testsPct + xpPct) / 2);
const r = 15, circ = 2 * Math.PI * r, dash = (avgPct / 100 * circ).toFixed(1);
- const color = avgPct >= 100 ? '#059652' : '#9B5DE5';
+ const color = avgPct >= 100 ? '#059652' : 'var(--violet)';
document.getElementById('gam-goal-ring').innerHTML = `