/* Shared look for the student, teacher, parent and admin pages.
   Uses the SAME variable names as the student app, so themes carry over. */
:root{
  --accent:#be123c;--accent2:#e11d48;--muted:#6b7280;--bg:#fdf2f4;
  --card:#fff;--text:#1a0a0e;--shadow:rgba(190,18,60,0.13);
  --highlight:#fecdd3;--hl-text:#7f1d1d;
  --correct-bg:#dcfce7;--correct-border:#16a34a;--correct-text:#065f46;
  --wrong-bg:#fee2e2;--wrong-border:#dc2626;--wrong-text:#7f1d1d;
  --opt-bg:#f8fafc;--opt-border:#e2e8f0;--opt-hover:#fce7ea;
}
body.dark{
  --accent:#fb7185;--accent2:#f43f5e;--muted:#94a3b8;--bg:#0f172a;
  --card:#1e293b;--text:#f1f5f9;--shadow:rgba(0,0,0,0.4);
  --highlight:#7f1d1d;--hl-text:#fecdd3;
  --correct-bg:#064e3b;--correct-border:#10b981;--correct-text:#d1fae5;
  --wrong-bg:#7f1d1d;--wrong-border:#f87171;--wrong-text:#fee2e2;
  --opt-bg:#334155;--opt-border:#475569;--opt-hover:#3f4f6a;
}
body.sepia{
  --accent:#92400e;--accent2:#b45309;--muted:#78716c;--bg:#fdf6e3;
  --card:#fffbef;--text:#292524;--shadow:rgba(146,64,14,0.12);
  --highlight:#fde68a;--hl-text:#78350f;
  --opt-bg:#fdf6e3;--opt-border:#d6d3d1;--opt-hover:#fef3c7;
}

/* ── page shell (teacher / parent / admin) ── */
body.cm-page{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;min-height:100vh}
.cm-page *{box-sizing:border-box}
.cm-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:var(--accent);color:#fff;box-shadow:0 2px 10px var(--shadow);position:sticky;top:0;z-index:100}
.cm-header h1{font-size:1.05rem;margin:0;font-weight:700;display:flex;align-items:center;gap:8px}
.cm-role-badge{font-size:.62rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;background:rgba(255,255,255,.22);padding:2px 8px;border-radius:20px}
.cm-main{max-width:1100px;margin:0 auto;padding:18px 16px 60px}
.cm-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:2px solid var(--opt-border)}
.cm-tab{background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;padding:9px 14px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer}
.cm-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.cm-tab:hover{color:var(--accent)}
.cm-card{background:var(--card);border:1px solid var(--opt-border);border-radius:12px;padding:16px;margin-bottom:14px;box-shadow:0 1px 4px var(--shadow)}
.cm-card h2,.cm-card h3{margin:0 0 10px;font-size:1rem;color:var(--accent)}
.cm-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cm-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.cm-muted{color:var(--muted);font-size:.82rem}
.cm-empty{color:var(--muted);text-align:center;padding:26px 10px}
.cm-h{font-size:1.1rem;font-weight:700;margin:0 0 12px}

/* buttons & inputs */
.cm-btn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 14px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.cm-btn:hover{filter:brightness(1.08)}.cm-btn:disabled{opacity:.5;cursor:not-allowed}
.cm-btn.sec{background:var(--opt-bg);color:var(--text);border:1.5px solid var(--opt-border)}
.cm-btn.danger{background:#dc2626}.cm-btn.ok{background:#16a34a}.cm-btn.warn{background:#f59e0b}.cm-btn.blue{background:#0369a1}.cm-btn.purple{background:#7c3aed}
.cm-btn.sm{padding:4px 9px;font-size:.74rem;border-radius:6px}
.cm-in,.cm-sel,.cm-ta{font:inherit;font-size:.88rem;border:1.5px solid var(--opt-border);border-radius:8px;background:var(--opt-bg);color:var(--text);padding:7px 10px;min-width:0}
.cm-in:focus,.cm-sel:focus,.cm-ta:focus{outline:2px solid var(--accent);outline-offset:-1px}
.cm-ta{width:100%;resize:vertical}
.cm-label{display:block;font-size:.76rem;font-weight:600;color:var(--muted);margin:8px 0 3px}
.cm-err{color:#dc2626;font-size:.8rem;min-height:18px}
.cm-ok{color:#16a34a;font-size:.8rem}

/* tables */
.cm-tablewrap{overflow-x:auto}
table.cm-table{width:100%;border-collapse:collapse;font-size:.86rem}
.cm-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:6px 8px;border-bottom:2px solid var(--opt-border);white-space:nowrap}
.cm-table td{padding:8px;border-bottom:1px solid var(--opt-border);vertical-align:middle}
.cm-table tr.click{cursor:pointer}.cm-table tr.click:hover td{background:var(--opt-hover)}

/* chips, bars, stat tiles, avatar */
.cm-chip{display:inline-block;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.cm-chip.green{background:var(--correct-bg);color:var(--correct-text)}
.cm-chip.red{background:var(--wrong-bg);color:var(--wrong-text)}
.cm-chip.amber{background:#fef3c7;color:#92400e}
.cm-chip.gray{background:var(--opt-bg);color:var(--muted);border:1px solid var(--opt-border)}
.cm-chip.blue{background:#dbeafe;color:#1e40af}
.cm-bar{height:8px;border-radius:6px;background:var(--opt-border);overflow:hidden;min-width:70px}
.cm-bar>i{display:block;height:100%;background:var(--accent);border-radius:6px}
.cm-tile{background:var(--opt-bg);border:1px solid var(--opt-border);border-radius:10px;padding:10px 12px}
.cm-tile b{display:block;font-size:1.35rem;line-height:1.2}
.cm-tile span{font-size:.72rem;color:var(--muted)}
.cm-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--highlight);color:var(--hl-text);font-weight:700;flex-shrink:0;line-height:1;user-select:none}

/* user menu in headers */
.cm-menu{position:relative}
.cm-menu-btn{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:4px 12px 4px 5px;font:inherit;font-size:.82rem;cursor:pointer}
.cm-menu-btn.hbtn{padding:3px 10px 3px 4px}
.cm-menu-btn:hover{background:rgba(255,255,255,.3)}
.cm-dd{display:none;position:absolute;top:112%;right:0;background:var(--card);color:var(--text);border:1px solid var(--opt-border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.22);min-width:210px;z-index:300;overflow:hidden;font-family:system-ui,sans-serif}
.cm-dd.open{display:block}
.cm-dd .cm-dd-info{padding:9px 14px;font-size:.72rem;color:var(--muted);border-bottom:1px solid var(--opt-border)}
.cm-dd button{display:block;width:100%;text-align:left;background:none;border:none;padding:10px 14px;font:inherit;font-size:.84rem;color:var(--text);cursor:pointer}
.cm-dd button:hover{background:var(--opt-hover)}
.cm-dd button.danger{color:#dc2626;border-top:1px solid var(--opt-border)}

/* modal / toast / reminder / login */
.cm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:14px}
.cm-modal{background:var(--card);color:var(--text);border-radius:16px;width:min(560px,100%);max-height:90vh;overflow:auto;box-shadow:0 12px 48px rgba(0,0,0,.35);font-family:system-ui,sans-serif}
.cm-modal.wide{width:min(900px,100%)}
.cm-modal-h{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;background:var(--accent);color:#fff;border-radius:16px 16px 0 0;font-weight:700;position:sticky;top:0;z-index:2}
.cm-modal-h button{background:rgba(255,255,255,.2);border:none;color:#fff;border-radius:8px;padding:4px 10px;cursor:pointer;font:inherit;font-size:.8rem}
.cm-modal-b{padding:16px 18px}
.cm-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 18px;border-radius:10px;font-size:.85rem;z-index:2000;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:90vw}
#cmExpiry{display:none;position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:1500;align-items:center;gap:10px;max-width:92vw;background:#fef3c7;color:#78350f;border:1px solid #fde68a;border-radius:14px;padding:10px 16px;font-size:.82rem;font-family:system-ui,sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.15)}
#cmExpiry button{background:none;border:none;color:#78350f;font-size:1rem;cursor:pointer;line-height:1;padding:0 2px}
#cmLogin{position:fixed;inset:0;background:var(--bg);z-index:1800;display:flex;align-items:center;justify-content:center;padding:20px;font-family:system-ui,sans-serif}
#cmLogin .cm-lbox{background:var(--card);color:var(--text);border-radius:18px;padding:28px 26px;width:min(380px,94vw);box-shadow:0 10px 40px rgba(0,0,0,.25)}
#cmLogin h2{color:var(--accent);font-size:1.15rem;margin:0 0 4px}
.cm-notice{background:#fef3c7;color:#78350f;border:1px solid #fde68a;border-radius:10px;padding:9px 12px;font-size:.8rem;margin-bottom:12px;line-height:1.45}
.cm-warnbox{background:var(--wrong-bg);color:var(--wrong-text);border:1.5px solid var(--wrong-border);border-radius:12px;padding:12px 14px;font-size:.84rem;line-height:1.5;margin-bottom:10px}

/* avatar picker */
.cm-avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}
.cm-avopt{font-size:1.7rem;line-height:1;padding:8px 0;border:2px solid var(--opt-border);background:var(--opt-bg);border-radius:12px;cursor:pointer}
.cm-avopt:hover{background:var(--opt-hover)}
.cm-avopt.sel{border-color:var(--accent);background:var(--highlight)}

/* charts */
.cm-chart{width:100%;height:auto;display:block}
.cm-chart text{fill:var(--muted);font-size:10px}
.cm-chart .gl{stroke:var(--opt-border);stroke-width:1}
.cm-chart .ln{fill:none;stroke:var(--accent);stroke-width:2.2}
.cm-chart .dot{fill:var(--accent)}
.cm-chart .ar{fill:var(--accent);opacity:.12}
@media(max-width:640px){.cm-header{padding:8px 12px}.cm-main{padding:12px 10px 60px}.cm-tab{padding:8px 10px;font-size:.85rem}}