/* Calm, editorial documentation surface layered over legacy page templates. */
:root { --ds-ink:#102a43; --ds-muted:#627d98; --ds-line:#d9e2ec; --ds-canvas:#f7fafc; --ds-paper:#fff; --ds-brand:#0f766e; --ds-brand-dark:#0b4f4a; --ds-sky:#0e7490; --ds-radius:18px; }
body { background:var(--ds-canvas); color:var(--ds-ink); }

/* Public catalog: less color noise, stronger information hierarchy. */
.topbar { max-width:1180px; margin:0 auto; padding:14px 28px; background:transparent; border:0; }
.topbar::before { content:'MUGUILE · LEARNING'; color:var(--ds-brand-dark); font-size:11px; font-weight:800; letter-spacing:1.2px; }
.topbar-user { margin-right:auto; font-size:13px; color:var(--ds-muted); }
.topbar-actions a,.topbar-actions button { border-color:var(--ds-line); border-radius:10px; color:var(--ds-ink); background:rgba(255,255,255,.8); font-weight:650; }
.topbar-actions .admin-link { background:#e6fffb; border-color:#b8eee7; color:#0f766e; }
.hero--catalog { margin:0 auto 34px; max-width:1180px; min-height:285px; padding:64px 52px 48px; border-radius:0 0 28px 28px; text-align:left; background:radial-gradient(circle at 87% 22%,rgba(94,234,212,.28),transparent 23%),radial-gradient(circle at 79% 83%,rgba(14,165,233,.22),transparent 27%),linear-gradient(135deg,#102a43 0%,#0b4f4a 100%); }
.hero--catalog h1 { max-width:700px; font-size:clamp(32px,5vw,52px); letter-spacing:-1.5px; line-height:1.12; }
.hero--catalog p { max-width:600px; margin-top:16px; color:#d9f7f2; font-size:16px; }
.hero-tools { justify-content:flex-start; max-width:720px; margin:30px 0 0; }
.course-search { height:52px; border-radius:13px; box-shadow:0 12px 30px rgba(6,28,48,.2); }
.hero-continue { height:52px; border-color:rgba(255,255,255,.26); background:#fff; color:#0b4f4a; }
.container { max-width:1120px; padding:0 28px 76px; }
.section-title { display:flex; align-items:baseline; gap:8px; margin:42px 0 18px; padding:0; border:0; color:var(--ds-ink); font-size:22px; letter-spacing:-.3px; }
.section-title::before { content:''; width:5px; height:24px; border-radius:9px; background:linear-gradient(#14b8a6,#0e7490); }
.section-hint { color:#9fb3c8; font-size:12px; }
.course-grid { gap:16px; }
.course-card { min-height:250px; padding:26px; border-color:var(--ds-line); border-radius:var(--ds-radius); box-shadow:0 8px 22px rgba(15,46,73,.045); }
.course-card::before { height:3px; opacity:.85; }
.course-card:hover { transform:translateY(-3px); border-color:#9fddd7; box-shadow:0 18px 34px rgba(15,46,73,.11); }
.course-card h2,.course-card.teal h2,.course-card.amber h2,.course-card.indigo h2,.course-card.emerald h2 { color:var(--ds-ink); font-size:19px; letter-spacing:-.2px; }
.course-desc { color:var(--ds-muted); line-height:1.75; }
.course-meta { color:#829ab1; }
.course-action,.course-card.teal .course-action,.course-card.amber .course-action,.course-card.indigo .course-action,.course-card.emerald .course-action { color:var(--ds-brand-dark); background:#e6fffb; border-radius:9px; padding:9px 13px; }
.footer { color:#829ab1; }

/* Login: intentional welcome screen, not an admin-form default. */
body.auth-body { background:radial-gradient(circle at 12% 13%,rgba(45,212,191,.18),transparent 26%),radial-gradient(circle at 87% 88%,rgba(56,189,248,.15),transparent 28%),#102a43; }
body.auth-body::before { content:''; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom,black,transparent); }
.auth-card { position:relative; max-width:440px; padding:42px 38px 36px; border:1px solid rgba(255,255,255,.65); border-radius:22px; box-shadow:0 26px 70px rgba(4,20,32,.32); }
.auth-logo::before { content:'M'; display:grid; place-items:center; width:42px; height:42px; margin:0 auto 14px; border-radius:13px; background:linear-gradient(145deg,#0f766e,#0e7490); color:#fff; font-size:20px; font-weight:800; box-shadow:0 8px 18px rgba(15,118,110,.24); }
.auth-logo h1 { color:var(--ds-ink); font-size:25px; letter-spacing:-.5px; }
.auth-logo p { color:var(--ds-muted); }
.auth-field input,.auth-field select { padding:13px 14px; border-radius:11px; background:#fbfdff; }
.auth-field input:focus,.auth-field select:focus { border-color:#14b8a6; box-shadow:0 0 0 4px rgba(20,184,166,.14); }
.auth-btn { padding:13px 16px; border-radius:11px; background:linear-gradient(135deg,#0b4f4a,#0e7490) !important; box-shadow:0 10px 20px rgba(14,116,144,.18); }
.auth-card:not(.auth-card-wide) .auth-tip { display:none; }

/* Reading surfaces: visual quiet around the content, not around decoration. */
.chapter-container,.doc-article,.doc-prose { box-shadow:none; }
.chapter-container { border-radius:20px; box-shadow:0 12px 32px rgba(15,46,73,.06); }
.chapter-header,.catalog-hero,.hub-hero { border-radius:20px; background:linear-gradient(135deg,#102a43,#0e7490); }
.doc-prose { color:#243b53; line-height:1.9; }
.doc-prose h2 { color:#102a43; border-bottom-color:#d9e2ec; }
.doc-prose blockquote { border-left-color:#14b8a6; background:#effcf9; }
pre { border:1px solid rgba(255,255,255,.08); box-shadow:0 12px 24px rgba(15,23,42,.12); }
@media (max-width:640px) { .topbar { padding:12px 16px; } .topbar::before { display:none; } .hero--catalog { min-height:auto; padding:46px 22px 34px; border-radius:0 0 22px 22px; } .container { padding:0 16px 56px; } .course-card { padding:22px; } .auth-card { margin:14px; padding:34px 24px 28px; } }