:root {
  --bg: #e7e7e7;
  --surface: #ffffff;
  --surface-2: #d4d7d9;
  --sidebar: #afb0b4;
  --accent: #761b0d;
  --accent-2: #8f2111;
  --accent-soft: #caaaA5;
  --text: #151515;
  --muted: #626262;
  --border: #b9b9b9;
  --danger: #9e1b1b;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
  --radius: 14px;
}
body[data-theme="monochrome"] {
  --bg: #f2f2f2;
  --surface: #ffffff;
  --surface-2: #e1e1e1;
  --sidebar: #c8c8c8;
  --accent: #111111;
  --accent-2: #2a2a2a;
  --accent-soft: #dedede;
  --text: #101010;
  --muted: #666;
  --border: #bdbdbd;
  --danger: #4a4a4a;
}
* { box-sizing: border-box; }
html,body { margin:0; min-height:100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--text); background:var(--bg); }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
a { color:inherit; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.small { font-size:.82rem; }
.grow { flex:1; min-width:0; }
.eyebrow { color:var(--accent); font-weight:800; font-size:.72rem; letter-spacing:.12em; margin:0 0 6px; }

/* Authentication */
.auth-page { display:grid; place-items:center; min-height:100vh; padding:30px; }
.auth-shell { width:min(1000px,100%); display:grid; grid-template-columns:1.1fr .9fr; background:var(--surface); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); min-height:620px; }
.auth-brand { background:var(--accent); color:white; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:64px; }
.auth-brand h1 { font-size:3.2rem; margin:18px 0 8px; }
.auth-brand p { font-size:1.1rem; line-height:1.6; max-width:420px; opacity:.9; }
.auth-logo { width:124px; height:124px; object-fit:cover; object-position:center; background:transparent; border-radius:22px; padding:0; box-shadow:0 8px 22px rgba(0,0,0,.20); }
.auth-card { padding:64px 52px; display:flex; flex-direction:column; justify-content:center; }
.auth-tabs { display:flex; gap:8px; margin-bottom:28px; border-bottom:1px solid var(--border); }
.auth-tab { border:0; background:transparent; padding:12px 4px; margin-right:18px; font-weight:700; cursor:pointer; border-bottom:3px solid transparent; }
.auth-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.auth-form { display:grid; gap:18px; }
.auth-form label,.form-grid label,.modal-card>label { display:grid; gap:7px; font-weight:700; font-size:.9rem; }
input,select,textarea { width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); }
input:focus,select:focus,textarea:focus { outline:2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-color:var(--accent); }
.form-message { min-height:20px; color:var(--danger); font-size:.9rem; }

/* Buttons */
.primary-btn,.secondary-btn,.danger-btn,.text-btn,.icon-btn { border:0; border-radius:8px; cursor:pointer; transition:.15s ease; }
.primary-btn { background:var(--accent); color:white; padding:10px 15px; font-weight:750; }
.primary-btn:hover { background:var(--accent-2); transform:translateY(-1px); }
.secondary-btn { background:var(--surface); color:var(--text); border:1px solid var(--border); padding:9px 13px; font-weight:700; }
.secondary-btn:hover { border-color:var(--accent); color:var(--accent); }
.danger-btn { background:var(--danger); color:white; padding:9px 13px; font-weight:700; }
.text-btn { background:transparent; color:var(--accent); padding:5px 7px; font-weight:700; }
.text-btn.danger { color:var(--danger); }
.icon-btn { background:transparent; color:var(--text); font-size:1.35rem; padding:4px 8px; }

/* Global shell */
.app-header { height:92px; position:fixed; inset:0 0 auto 0; background:var(--surface); border-bottom:1px solid var(--border); display:grid; grid-template-columns:220px 1fr 260px; align-items:center; padding:0 22px; z-index:20; }
.logo-link { display:inline-flex; width:70px; height:70px; align-items:center; justify-content:center; }
.logo-link img { width:66px; height:66px; object-fit:cover; object-position:center; border:2px solid var(--accent); border-radius:14px; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.app-header h1 { text-align:center; margin:0; color:var(--accent); font-size:1.7rem; }
.header-actions { display:flex; justify-content:flex-end; gap:9px; }
.app-layout { min-height:100vh; padding-top:92px; display:grid; grid-template-columns:190px minmax(0,1fr) 280px; }
.left-nav,.right-reminders { background:var(--sidebar); min-height:calc(100vh - 92px); position:sticky; top:92px; align-self:start; height:calc(100vh - 92px); overflow:auto; }
.left-nav { padding:28px 16px; display:flex; flex-direction:column; justify-content:space-between; }
.left-nav nav { display:grid; gap:8px; }
.left-nav a { text-decoration:none; padding:12px 14px; border-radius:9px; font-weight:750; color:#232323; }
.left-nav a:hover,.left-nav a.active { background:var(--surface); color:var(--accent); }
.role-chip { margin-top:30px; background:rgba(255,255,255,.58); padding:10px; border-radius:10px; font-size:.78rem; text-align:center; font-weight:800; }
.page-content { padding:34px; min-width:0; }
.right-reminders { padding:24px 16px; }
.reminder-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.reminder-header h2 { color:var(--accent); margin:0; }
.reminder-list { display:grid; gap:10px; }
.rail-reminder { display:grid; gap:3px; text-decoration:none; background:rgba(255,255,255,.68); border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:11px; }
.rail-reminder:hover { background:var(--surface); }
.rail-reminder strong { font-size:.9rem; }
.rail-reminder span { font-size:.76rem; color:#444; }
.rail-date { color:var(--accent)!important; font-weight:800; }

/* Page content */
.section-block,.welcome-card,.class-hero { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:0 6px 16px rgba(0,0,0,.035); margin-bottom:22px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.section-heading h2,.welcome-card h2,.class-hero h2 { margin:0; color:var(--accent); }
.section-heading a { color:var(--accent); font-weight:700; font-size:.9rem; }
.welcome-card { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px; }
.welcome-card p { margin:5px 0 0; }
.welcome-stat { min-width:100px; text-align:center; padding:13px; background:var(--bg); border-radius:12px; }
.welcome-stat strong { display:block; color:var(--accent); font-size:1.8rem; }
.welcome-stat span { font-size:.75rem; color:var(--muted); }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.class-card { position:relative; text-decoration:none; overflow:hidden; padding:19px; min-height:130px; border:1px solid var(--border); border-radius:12px; background:var(--surface); display:block; }
.class-card:hover { border-color:var(--accent); transform:translateY(-1px); }
.class-accent { position:absolute; inset:0 auto 0 0; width:5px; background:var(--accent); }
.class-card h3 { margin:0 0 8px; color:var(--accent); }
.class-card p { margin:0 0 6px; }
.class-card small { color:var(--muted); }
.class-manage-card { display:grid; gap:3px; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.compact-list { display:grid; }
.compact-list a { display:grid; grid-template-columns:75px 1fr auto; gap:10px; align-items:center; text-decoration:none; padding:11px 0; border-bottom:1px solid var(--border); }
.compact-list a:last-child { border-bottom:0; }
.compact-list span { color:var(--accent); font-size:.8rem; font-weight:750; }
.compact-list small { color:var(--muted); }
.list-stack { display:grid; gap:11px; }
.list-card { display:flex; align-items:center; justify-content:space-between; gap:15px; border:1px solid var(--border); border-radius:11px; padding:14px 16px; background:var(--surface); }
.list-card h3,.list-card p { margin:0; }
.list-card p { color:var(--muted); margin-top:4px; }
.list-card.archived { opacity:.62; }
.row-actions { display:flex; gap:4px; flex-wrap:wrap; }
.empty-state,.chart-empty { padding:24px; text-align:center; color:var(--muted); background:var(--bg); border-radius:10px; }
.error-box { color:var(--danger); background:#fff0f0; border:1px solid #e2b5b5; padding:16px; border-radius:10px; }

/* Class */
.class-hero { display:flex; align-items:center; justify-content:space-between; }
.tabs { display:flex; gap:6px; background:var(--surface); border:1px solid var(--border); padding:5px; border-radius:11px; margin-bottom:18px; width:max-content; max-width:100%; overflow:auto; }
.tabs button { border:0; background:transparent; padding:9px 13px; border-radius:8px; cursor:pointer; font-weight:750; white-space:nowrap; }
.tabs button.active { background:var(--accent); color:white; }
.assignment-card { display:flex; align-items:flex-start; gap:13px; border:1px solid var(--border); border-radius:11px; padding:15px; }
.assignment-card h3,.assignment-card p { margin:0 0 5px; }
.assignment-card p,.assignment-card small { color:var(--muted); }
.type-pill { display:inline-block; background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:5px 8px; font-size:.7rem; font-weight:800; text-transform:uppercase; white-space:nowrap; }
.check-list { display:grid; gap:8px; }
.check-item { display:flex; gap:12px; align-items:center; padding:13px; border:1px solid var(--border); border-radius:10px; cursor:pointer; }
.check-item input { width:18px; height:18px; }
.check-item span { display:grid; gap:4px; }
.check-item small { color:var(--muted); }
.check-item.done { opacity:.55; }
.check-item.done strong { text-decoration:line-through; }
.grade-chart { background:var(--bg); border-radius:12px; padding:14px; margin-bottom:18px; }
.grade-chart svg { width:100%; height:250px; }
.axis { stroke:var(--border); stroke-width:2; }
.grade-line { fill:none; stroke:var(--accent); stroke-width:4; stroke-linejoin:round; stroke-linecap:round; }
.grade-dot { fill:var(--accent); }

/* Calendar */
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.cal-dow { background:var(--accent); color:white; text-align:center; padding:9px 4px; font-size:.78rem; font-weight:800; }
.cal-cell { min-height:120px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:8px; background:var(--surface); overflow:hidden; }
.cal-cell.empty { background:var(--bg); }
.cal-cell>strong { font-size:.8rem; }
.cal-event { display:block; width:100%; margin-top:6px; border:0; border-radius:5px; padding:5px; text-align:left; font-size:.7rem; cursor:pointer; background:var(--accent-soft); color:var(--accent); font-weight:700; }
.cal-event.fundraiser { border-left:4px solid var(--accent); }
.event-list-card { display:flex; align-items:center; gap:13px; width:100%; border:1px solid var(--border); border-radius:11px; padding:12px; background:var(--surface); text-align:left; cursor:pointer; }
.date-block { width:52px; height:52px; border-radius:10px; display:grid; place-items:center; align-content:center; background:var(--accent); color:white; }
.date-block strong { font-size:1.2rem; line-height:1; }
.date-block small { font-size:.65rem; text-transform:uppercase; }
.event-list-card .grow { display:grid; gap:4px; }
.event-list-card small { color:var(--muted); }

/* Polls */
.poll-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:15px; }
.poll-card { border:1px solid var(--border); border-radius:12px; padding:17px; }
.poll-top { display:flex; justify-content:space-between; gap:10px; }
.poll-top h3 { margin:0 0 5px; }
.poll-top small { color:var(--muted); }
.poll-options { display:grid; gap:8px; margin-top:16px; }
.poll-options label { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; border:1px solid var(--border); border-radius:9px; padding:10px; cursor:pointer; }
.poll-options input { width:16px; height:16px; }
.poll-options strong { color:var(--accent); }

/* Admin table */
.admin-table-wrap { overflow:auto; }
.admin-table { width:100%; border-collapse:collapse; min-width:680px; }
.admin-table th,.admin-table td { text-align:left; padding:11px; border-bottom:1px solid var(--border); vertical-align:middle; }
.admin-table th { color:var(--accent); font-size:.78rem; text-transform:uppercase; }
.admin-table td small { display:block; color:var(--muted); margin-top:3px; }

/* Dialogs */
dialog.modal { border:0; padding:0; background:transparent; max-width:none; }
dialog.modal::backdrop { background:rgba(0,0,0,.42); backdrop-filter:blur(2px); }
.modal-card { width:min(620px,calc(100vw - 28px)); max-height:88vh; overflow:auto; background:var(--surface); color:var(--text); border-radius:16px; padding:22px; box-shadow:var(--shadow); }
.modal-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.modal-title-row h2 { margin:0; color:var(--accent); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.form-grid .full { grid-column:1/-1; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
.switch-line { display:flex!important; grid-template-columns:auto 1fr!important; align-items:center; gap:10px!important; margin:18px 0; }
.switch-line input { width:18px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.detail-grid div { background:var(--bg); padding:10px; border-radius:8px; }
.detail-grid dt { color:var(--muted); font-size:.73rem; font-weight:800; text-transform:uppercase; }
.detail-grid dd { margin:4px 0 0; }
.rsvp-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:18px 0; }
.rsvp-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.rsvp-columns section { background:var(--bg); padding:12px; border-radius:10px; }
.rsvp-columns h3 { color:var(--accent); margin-top:0; }
.rsvp-columns p { background:var(--surface); padding:8px; border-radius:7px; }
.rsvp-columns small { display:block; color:var(--muted); margin-top:3px; }

/* Toasts */
.toast-region { position:fixed; right:18px; bottom:18px; z-index:100; display:grid; gap:8px; }
.toast { background:#222; color:white; padding:11px 14px; border-radius:9px; box-shadow:var(--shadow); }
.toast.success { background:#1d6b3a; }
.toast.error { background:var(--danger); }

@media (max-width: 1080px) {
  .app-header { grid-template-columns:120px 1fr 220px; }
  .app-layout { grid-template-columns:160px minmax(0,1fr); }
  .right-reminders { position:static; grid-column:1/-1; height:auto; min-height:0; display:block; }
  .reminder-list { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
  .page-content { padding:24px; }
}
@media (max-width: 720px) {
  .auth-shell { grid-template-columns:1fr; }
  .auth-brand { padding:32px; min-height:250px; }
  .auth-card { padding:32px 24px; }
  .app-header { height:auto; min-height:86px; grid-template-columns:65px 1fr auto; padding:10px; }
  .logo-link { width:54px; height:54px; }
  .logo-link img { width:50px; height:50px; border-radius:11px; }
  .app-header h1 { font-size:1.12rem; }
  .header-actions { gap:4px; }
  .header-actions button { padding:7px; font-size:.72rem; }
  .app-layout { padding-top:86px; display:block; }
  .left-nav { position:sticky; top:86px; height:auto; min-height:0; z-index:10; padding:8px; }
  .left-nav nav { display:flex; gap:4px; overflow:auto; }
  .left-nav a { padding:9px 11px; white-space:nowrap; font-size:.8rem; }
  .role-chip { display:none; }
  .page-content { padding:14px; }
  .right-reminders { height:auto; min-height:0; padding:16px; }
  .two-column,.welcome-card,.form-grid,.detail-grid,.rsvp-columns { grid-template-columns:1fr; }
  .welcome-stat { display:none; }
  .compact-list a { grid-template-columns:65px 1fr; }
  .compact-list small { grid-column:2; }
  .calendar-grid { font-size:.75rem; }
  .cal-cell { min-height:85px; padding:5px; }
  .cal-event { font-size:.6rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .section-block,.welcome-card,.class-hero { padding:16px; }
  .section-heading,.class-hero { align-items:flex-start; }
  .assignment-card { flex-wrap:wrap; }
}

/* Class picker */
.class-picker { display:grid; grid-template-columns:minmax(190px,1fr) minmax(300px,1.45fr) auto; gap:22px; align-items:stretch; padding:18px; border:1px solid var(--border); border-radius:12px; background:var(--bg); }
.class-picker label { display:grid; gap:7px; font-weight:750; font-size:.85rem; }
.picker-course { align-content:center; }
.picker-details { display:grid; gap:12px; }
.picker-subrow { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.picker-add { align-self:center; min-width:100px; min-height:52px; }
.picker-add:disabled,.primary-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.picker-hint { margin:9px 3px 0; }

/* Sidebar bug reporting */
.nav-footer { display:grid; gap:9px; }
.bug-report-btn { width:48px; height:48px; display:grid; place-items:center; padding:8px; border:2px solid rgba(255,255,255,.65); border-radius:11px; background:rgba(255,255,255,.30); color:#555; cursor:pointer; transition:.15s ease; }
.bug-report-btn:hover { background:var(--surface); color:var(--accent); border-color:var(--accent); }
.bug-report-btn svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav-badge { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:6px; padding:0 6px; border-radius:999px; background:var(--accent); color:white; font-size:.68rem; font-weight:850; }

/* Bug reports */
.bug-report-list { display:grid; gap:14px; }
.bug-report-card { border:1px solid var(--border); border-radius:12px; padding:17px; background:var(--surface); }
.bug-report-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.bug-report-head>div { display:grid; gap:3px; }
.bug-report-head small,.bug-page { color:var(--muted); }
.bug-page { margin:12px 0 7px; font-size:.82rem; overflow-wrap:anywhere; }
.bug-description { margin:0 0 15px; white-space:pre-wrap; }
.bug-status { padding:5px 9px; border-radius:999px; font-size:.72rem; font-weight:800; white-space:nowrap; background:var(--bg); }
.bug-status.open { color:var(--danger); }
.bug-status.in_progress { color:var(--accent); background:var(--accent-soft); }
.bug-status.fixed { color:#1d6b3a; background:#e6f4ea; }
.bug-report-controls { display:grid; grid-template-columns:180px 1fr; gap:12px; align-items:start; }
.bug-report-controls label { display:grid; gap:6px; font-weight:700; font-size:.85rem; }
.bug-notes textarea { resize:vertical; }
.welcome-date strong { font-size:1.15rem; white-space:nowrap; }

@media (max-width: 900px) {
  .class-picker { grid-template-columns:1fr 1.25fr; }
  .picker-add { grid-column:1/-1; justify-self:end; min-width:120px; }
}

@media (max-width: 720px) {
  .class-picker,.picker-subrow,.bug-report-controls { grid-template-columns:1fr; }
  .picker-add { width:100%; justify-self:stretch; }
  .nav-footer { display:flex; justify-content:flex-end; margin-top:8px; }
  .bug-report-btn { width:40px; height:40px; }
  .bug-report-head { align-items:flex-start; }
}