:root {
  /* Eduwelt's look (eduwelt.in): white header, purple #5F089E, blue #2979FF links and active menu,
     dark grey text, Montserrat for headings and the menu, Open Sans for text. */
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --ink: #212121;
  --ink-2: #353535;
  --muted: #6B6B6B;
  --line: #E4E4E4;
  --line-2: #F0F0F0;
  --field: #CCCCCC;
  --brand: #5F089E;
  --brand-ink: #FFFFFF;
  --link: #1F6AE8;           /* Eduwelt's #2979FF, a shade darker so small text stays readable */
  --top: #FFFFFF;
  --top-ink: #303030;
  --new: #17663F; --new-bg: #E3F1E8;
  --rem: #A33A12; --rem-bg: #F8E6DE;
  --chg: #7A5600; --chg-bg: #F6EDD2;
  --warn-bg: #F6EDD2; --warn: #4A3600;
  --font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --head: 'Montserrat', 'Open Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131216; --surface: #1B1A1F; --ink: #EDEDF0; --ink-2: #C8C8CE; --muted: #A0A0A8;
    --line: #2E2D33; --line-2: #242328; --field: #3D3C43; --brand: #C99BF0; --brand-ink: #2B0548;
    --link: #7FAEFF; --top: #1B1A1F; --top-ink: #EDEDF0;
    --new: #7FD1A3; --new-bg: #173226; --rem: #F0A07E; --rem-bg: #3A2016;
    --chg: #E3C26A; --chg-bg: #332914; --warn-bg: #332914; --warn: #E9D49A;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); }
a { color: var(--link); }
h1, h2, h3 { font-family: var(--head); }
h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
h2 { margin: 0; font-size: 17px; font-weight: 700; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.sr { position: absolute; left: -9999px; }
.error { color: var(--rem); margin: 12px 0 0; }

/* White header with a soft shadow, as on eduwelt.in. */
.topbar { background: var(--top); color: var(--top-ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .07); position: relative; z-index: 11; }
.topbar-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; gap: 12px; align-items: center; color: var(--top-ink); text-decoration: none; font-family: var(--head); font-size: 17px; }
.brand b { color: var(--brand); font-weight: 700; }
.brand-logo { display: block; height: 36px; width: auto; }
/* In dark mode the header is dark: a white chip keeps the purple logo readable. */
@media (prefers-color-scheme: dark) {
  .brand-logo { height: 30px; padding: 3px 6px; background: #fff; border-radius: 6px; box-sizing: content-box; }
}
.home-login-link { white-space: nowrap; flex-shrink: 0; }
/* Phones: the logo alone is the brand; the name stays for screen readers. */
@media (max-width: 640px) {
  .brand-logo { height: 30px; }
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Menu like eduwelt.in: Montserrat capitals, the current page in blue. */
nav { display: flex; gap: 28px; align-items: center; }
nav a, .navbtn, .home-login-link { font-family: var(--head); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--top-ink); text-decoration: none; }
nav a { padding: 10px 0; }
nav a.on, nav a:hover, .navbtn:hover, .home-login-link:hover { color: var(--link); }
nav a.signout { padding-left: 24px; border-left: 1px solid var(--line); }
@media (max-width: 640px) {
  nav { gap: 14px; }
  nav a.signout { display: none; }   /* phones: Sign out is in the footer */
  nav a, .navbtn, .home-login-link { font-size: 12px; letter-spacing: .04em; }
}

main.wrap { padding: 32px 16px 64px; display: flex; flex-direction: column; gap: 24px; }
main > section { display: flex; flex-direction: column; gap: 20px; }
.pagehead p { margin: 6px 0 0; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.table-panel { padding: 0; }

.sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.src { border: 1px solid var(--line-2); border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.src-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.src b { font-weight: 600; }
.badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.b-ok { color: var(--new); background: var(--new-bg); }
.b-fail { color: var(--rem); background: var(--rem-bg); }
.b-run, .b-wait { color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.b-skip { color: var(--chg); background: var(--chg-bg); }
.progress { appearance: none; width: 100%; height: 6px; border: 0; border-radius: 3px; overflow: hidden; margin-top: 4px; background: var(--line-2); }
.progress::-webkit-progress-bar { background: var(--line-2); }
.progress::-webkit-progress-value { background: var(--brand); }
.progress::-moz-progress-bar { background: var(--brand); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btn { min-height: 44px; padding: 0 18px; border-radius: 6px; border: 1px solid var(--field); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn:focus-visible, select:focus-visible, input:focus-visible, .seg button:focus-visible, .card:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.link { background: none; border: 0; color: var(--link); font: inherit; cursor: pointer; padding: 8px 4px; }
.link:disabled { color: var(--muted); cursor: default; }

.advanced { margin-top: 16px; }
.advanced summary { cursor: pointer; color: var(--ink-2); font-size: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
select, input[type=search] { min-height: 44px; border: 1px solid var(--field); border-radius: 6px; padding: 0 12px; font: inherit; font-size: 15px; font-weight: 400; background: var(--surface); color: var(--ink); }

.results-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.seg { display: inline-flex; max-width: 100%; border: 1px solid var(--field); border-radius: 6px; overflow: hidden; }
.seg button { min-height: 40px; padding: 0 14px; white-space: nowrap; border: 0; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--field); }
.seg button.on { background: var(--brand); color: var(--brand-ink); font-weight: 600; }

.notes { display: flex; flex-direction: column; gap: 8px; }
.note { background: var(--warn-bg); color: var(--warn); border-radius: 6px; padding: 10px 14px; font-size: 14px; }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { text-align: left; font: inherit; cursor: pointer; border-radius: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.card .lbl { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.card .num { font-family: var(--mono); font-size: 34px; font-weight: 500; line-height: 1.15; }
.card .hint { font-size: 13px; color: var(--muted); }
.card.new { color: var(--new); } .card.removed { color: var(--rem); } .card.changed { color: var(--chg); }
.card.on.new { background: var(--new-bg); border: 2px solid var(--new); }
.card.on.removed { background: var(--rem-bg); border: 2px solid var(--rem); }
.card.on.changed { background: var(--chg-bg); border: 2px solid var(--chg); }
.card.static { cursor: default; }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); align-items: center; }
.toolbar input { flex: 1 1 260px; }
.scroll { overflow-x: auto; }
table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 12px 16px; }
td { padding: 13px 16px; border-top: 1px solid var(--line-2); vertical-align: top; }
td.course { font-weight: 600; }
td.mono, .mono { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
th.num, td.num { text-align: right; font-family: var(--mono); }
.st { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 4px; }
.st.new { color: var(--new); background: var(--new-bg); }
.st.removed { color: var(--rem); background: var(--rem-bg); }
.st.changed { color: var(--chg); background: var(--chg-bg); }
.chg { display: block; }
.chg s { color: var(--muted); }
.tablefoot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); align-items: center; }
.empty { padding: 32px 16px; text-align: center; color: var(--muted); }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--line-2); }


@media (max-width: 560px) {
  .seg { display: flex; width: 100%; }
  .seg button { flex: 1 1 0; padding: 0 6px; font-size: 13px; }
  h1 { font-size: 24px; }
}

.field.inline { flex: 0 1 380px; flex-direction: row; align-items: center; gap: 10px; }
.field.inline select { flex: 1; min-width: 0; }

.warn { margin-top: 14px; background: var(--rem-bg); color: var(--rem); border-radius: 6px; padding: 12px 14px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.warn b { font-weight: 600; }
.panel-head.pad { padding: 16px 16px 0; margin-bottom: 4px; }
.down { color: var(--rem); font-weight: 600; }
.skip { color: var(--muted); }
td.num small { color: var(--muted); font-family: var(--font); }

.helper-box { margin-top: 14px; border: 1px solid var(--line-2); border-radius: 6px; padding: 10px 14px; }
.helper-box summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.helper-box .ok { color: var(--new); }
.helper-box .missing { color: var(--rem); }
.helper-body { font-size: 14px; }
.helper-body ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.helper-body .btn { min-height: 38px; padding: 0 12px; }
code { font-family: var(--mono); font-size: 13px; background: var(--line-2); padding: 1px 5px; border-radius: 4px; }

/* login */
.login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.login-card h2 { font-size: 22px; }
.login-card p { margin: 6px 0 0; }
.login-card .field { flex: none; }
.login-card input { min-height: 44px; border: 1px solid var(--field); border-radius: 6px; padding: 0 12px; font: inherit; font-size: 15px; font-weight: 400; background: var(--surface); color: var(--ink); }
.login-card input:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.login-card .btn { justify-content: center; }
.login-card .error { margin: 0; }
.navbtn { background: none; border: 0; cursor: pointer; padding: 10px 0; }

/* Bar under the header asking to switch to Chrome or install the helper. */
.notice-bar { position: sticky; top: 0; z-index: 10; background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); font-size: 14px; }
.notice-inner { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.notice-inner p { margin: 0; flex: 1 1 320px; }
.notice-inner b { font-weight: 600; }
.notice-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.notice-bar .small-btn { min-height: 34px; padding: 0 12px; font-size: 13px; text-decoration: none; }
.notice-steps { flex: 1 1 100%; max-height: 50vh; overflow-y: auto; padding: 4px 0 2px; color: var(--ink); }
.notice-steps ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.notice-steps .btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
.notice-close { border: 0; background: none; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 4px; }
.notice-close:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); }

/* Privacy page. */
.prose article { max-width: 72ch; }
.prose h2 { margin: 28px 0 8px; font-size: 19px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* Small maker's credit at the foot of every page. */
.credit { padding: 0 16px 20px; text-align: center; font-size: 12px; color: var(--muted); }
.credit a { color: inherit; }
main.wrap + .credit { margin-top: -40px; }
main.home-main + .credit { padding-top: 20px; }

/* Public home page (logged out): what CourseDelta is, plus the login form. */
body.home-page { min-height: 100vh; display: flex; flex-direction: column; }
body.home-page main { flex: 1; width: 100%; }
.home { padding: 48px 16px 32px; display: flex; flex-direction: column; gap: 48px; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; }
.eyebrow { margin: 0 0 12px; font-family: var(--head); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.eyebrow a { color: inherit; }
.home-intro h1 { font-size: 36px; line-height: 1.15; max-width: 20ch; }
.lead { margin: 16px 0 0; font-size: 17px; color: var(--ink-2); max-width: 60ch; }
.home-cta { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.home-cta .btn, .band-btn { text-decoration: none; }
.home-section h2, .band h2 { font-size: 24px; }
.svc-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 8px; padding: 20px; }
.svc h3 { margin: 0; font-size: 16px; }
.svc p { margin: 8px 0 0; color: var(--ink-2); }
/* Full-width purple band, like "Why Eduwelt" on eduwelt.in. */
.band { background: #5F089E; color: #FFFFFF; }
.band-inner { width: 100%; padding-top: 48px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.band-points { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; max-width: 1000px; }
.band-points li { padding-left: 14px; border-left: 3px solid #E456C2; line-height: 1.55; }
.band-btn { background: #FFFFFF; border-color: #FFFFFF; color: #5F089E; }
.home-two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.home-two p { color: var(--ink-2); max-width: 70ch; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.contact-card p { margin: 10px 0 0; }
@media (max-width: 860px) {
  .svc-grid, .band-points, .home-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .home { padding-top: 32px; gap: 36px; }
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-intro h1 { font-size: 28px; }
  .login-card { padding: 24px; }
}