:root {
    --ink: #152238;
    --ink-soft: #33415c;
    --muted: #6c7485;
    --line: #dce4ee;
    --paper: #ffffff;
    --wash: #f6f8fb;
    --teal: #0f9f9a;
    --teal-dark: #0a6f6b;
    --coral: #f46f54;
    --yellow: #f2b84b;
    --shadow: 0 16px 42px rgba(21, 34, 56, 0.10);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--wash); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.55; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
.button { align-items: center; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; display: inline-flex; font-weight: 800; gap: 8px; justify-content: center; min-height: 42px; padding: 10px 16px; }
.button-primary { background: var(--teal); border-color: var(--teal); color: white; box-shadow: 0 10px 24px rgba(15,159,154,.22); }
.button-soft { background: white; color: var(--ink); }
.button-small { min-height: 34px; padding: 7px 11px; font-size: 14px; }
.text-link { color: var(--teal-dark); font-weight: 800; }
.muted { color: var(--muted); }
.eyebrow { color: var(--coral); font-size: 13px; font-weight: 900; margin: 0 0 10px; text-transform: uppercase; }
.flash { border-radius: 8px; margin: 16px auto; max-width: 1180px; padding: 12px 14px; }
.flash-success { background: #e6f6ee; color: #17643a; }
.flash-error { background: #fff0eb; color: #a33a17; }
.site-header { align-items: center; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(220,228,238,.9); display: flex; gap: 22px; justify-content: space-between; min-height: 76px; padding: 14px 6%; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); }
.brand { align-items: center; display: inline-flex; font-size: 18px; font-weight: 900; gap: 10px; min-width: max-content; }
.brand img { border-radius: 8px; max-height: 42px; width: auto; }
.brand-mark { align-items: center; background: var(--ink); border-radius: 8px; color: white; display: inline-flex; height: 36px; justify-content: center; width: 36px; }
.site-nav { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.site-nav a { border-radius: 8px; color: var(--ink-soft); font-weight: 800; padding: 9px 11px; }
.site-nav a:hover { background: #eaf8f7; color: var(--teal-dark); }
.site-actions { display: flex; gap: 8px; min-width: max-content; }
.hero { align-items: center; display: grid; min-height: calc(100vh - 150px); overflow: hidden; padding: 70px 6%; position: relative; }
.hero::after { background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.88) 38%, rgba(255,255,255,.1)); content: ""; inset: 0; position: absolute; z-index: 1; }
.hero-copy { max-width: 660px; position: relative; z-index: 2; }
.hero h1, .page-hero h1 { font-size: 58px; line-height: 1.05; margin: 0; }
.hero p, .page-hero p { color: var(--ink-soft); font-size: 20px; max-width: 720px; }
.hero-actions, .hero-points { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-points span { background: rgba(255,255,255,.86); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.hero-points strong { color: var(--ink); }
.hero-media { inset: 0; position: absolute; }
.hero-media img, .hero-media iframe { border: 0; height: 100%; object-fit: cover; object-position: center right; width: 100%; }
.section, .page-hero { margin: 0 auto; max-width: 1180px; padding: 70px 6%; }
.page-hero { align-items: center; display: grid; gap: 28px; grid-template-columns: 1fr .78fr; }
.page-hero.compact { display: block; padding-bottom: 36px; }
.page-hero img, .page-hero iframe, .block-media, .block-video { border: 0; border-radius: 8px; box-shadow: var(--shadow); width: 100%; }
.intro-band { align-items: end; display: grid; gap: 28px; grid-template-columns: 1fr .9fr; }
.section-heading h2, .section h2, .content-block h2 { font-size: 36px; line-height: 1.18; margin: 0 0 14px; }
.section-heading p, .content-block p { color: var(--ink-soft); font-size: 18px; }
.metric-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-grid div, .feature-grid article, .course-card, .panel, .auth-card, .quick-card, .stat, .list-card, .contact-card, .message-card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 30px rgba(21,34,56,.06); }
.metric-grid div { padding: 20px; }
.metric-grid strong { display: block; font-size: 30px; }
.metric-grid span { color: var(--muted); }
.feature-grid, .course-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-grid article, .course-card, .quick-card, .stat, .list-card, .contact-card, .message-card { padding: 22px; }
.feature-grid span, .badge { background: #fff4df; border-radius: 8px; color: #8a5600; display: inline-flex; font-size: 13px; font-weight: 900; margin-bottom: 14px; padding: 5px 9px; }
.feature-grid h3, .course-card h2 { font-size: 22px; line-height: 1.25; margin: 0 0 8px; }
.feature-grid p, .course-card p, .quick-card span { color: var(--muted); margin: 0; }
.split-showcase { align-items: center; background: #101827; color: white; display: grid; gap: 32px; grid-template-columns: 1fr .9fr; max-width: none; padding-left: max(6%, calc((100% - 1180px)/2)); padding-right: max(6%, calc((100% - 1180px)/2)); }
.split-showcase p { color: #d7deea; }
.timeline { display: grid; gap: 12px; }
.timeline div { align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; display: flex; gap: 12px; padding: 14px; }
.timeline strong { align-items: center; background: var(--yellow); border-radius: 8px; color: #101827; display: inline-flex; height: 34px; justify-content: center; width: 34px; }
.cta-band { text-align: center; }
.cta-band p { color: var(--muted); font-size: 18px; margin: 0 auto 22px; max-width: 760px; }
.contact-layout { align-items: start; display: grid; gap: 28px; grid-template-columns: 1fr .75fr; }
.contact-card { background: var(--ink); color: white; }
.contact-card p, .contact-card span { color: #d7deea; display: block; }
.site-footer { align-items: center; background: #101827; color: white; display: flex; justify-content: space-between; padding: 28px 6%; }
.site-footer span { color: #cbd5e1; display: block; }
.auth-page { align-items: center; display: grid; min-height: 72vh; padding: 46px 6%; place-items: center; }
.auth-card { max-width: 520px; padding: 30px; width: 100%; }
.auth-card.wide { max-width: 920px; }
.auth-card h1 { font-size: 34px; line-height: 1.15; margin: 0 0 22px; }
.auth-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 14px; }
.auth-links a { color: var(--teal-dark); font-weight: 800; }
.app-shell { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: #101827; color: white; display: flex; flex-direction: column; min-height: 100vh; padding: 22px; position: sticky; top: 0; }
.brand-panel { margin-bottom: 24px; }
.panel-nav { display: grid; gap: 6px; }
.panel-nav a { border-radius: 8px; color: #d7deea; font-weight: 800; padding: 10px 12px; }
.panel-nav a:hover { background: rgba(255,255,255,.08); color: white; }
.sidebar-user { border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 4px; margin-top: auto; padding-top: 18px; }
.sidebar-user span, .sidebar-user a { color: #cbd5e1; font-size: 14px; }
.panel-main { min-width: 0; padding: 28px; }
.topbar { align-items: center; display: flex; justify-content: space-between; margin-bottom: 20px; }
.topbar h1 { font-size: 32px; line-height: 1.2; margin: 0; }
.panel { margin-bottom: 20px; padding: 22px; }
.panel h2 { font-size: 22px; line-height: 1.25; margin: 0 0 16px; }
.panel-title { align-items: center; display: flex; gap: 14px; justify-content: space-between; margin-bottom: 14px; }
.stats-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; }
.stat span { color: var(--muted); font-weight: 800; }
.stat strong { display: block; font-size: 34px; }
.quick-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quick-card strong { display: block; font-size: 20px; margin-bottom: 8px; }
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid label, .auth-card label { color: var(--ink-soft); display: grid; font-weight: 800; gap: 7px; }
.form-grid .full, .full { grid-column: 1 / -1; }
.form-actions { align-items: center; display: flex; gap: 10px; }
.form-divider { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 18px; }
.form-divider h2 { margin-bottom: 4px; }
input, select, textarea { background: white; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); min-height: 42px; padding: 10px 12px; width: 100%; }
textarea { resize: vertical; }
.check { align-items: center; display: flex !important; flex-direction: row; gap: 10px !important; }
.check input { min-height: 0; width: auto; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; min-width: 760px; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 13px; text-transform: uppercase; }
.table-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-form { align-items: center; display: inline-flex; gap: 8px; }
.enroll-form { margin-top: 14px; }
.grade-form, .progress-form { align-items: center; display: flex; gap: 8px; min-width: 360px; }
.course-admin-grid, .module-dashboard { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.meta-row { color: var(--muted); display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; }
.mini-list, .card-list, .message-list { display: grid; gap: 10px; }
.mini-row { align-items: center; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 12px; justify-content: space-between; padding: 11px 12px; }
.mini-row small { color: var(--muted); display: block; }
.list-card h3 { font-size: 18px; margin: 0 0 6px; }
.list-card p { color: var(--muted); margin: 0; }
.empty { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; color: var(--muted); display: grid; gap: 4px; padding: 20px; }
.empty strong { color: var(--ink); }
.large-name { font-size: 24px; font-weight: 900; margin-bottom: 4px; }
.course-hero-panel { align-items: center; display: flex; gap: 22px; justify-content: space-between; }
.course-students { margin-top: 18px; }
.course-students h3 { font-size: 16px; margin: 0 0 10px; }
.submission-summary { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 6px; margin-top: 18px; padding: 14px; }
.quiz-form { display: grid; gap: 16px; }
.question { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; margin: 0; padding: 16px; }
.question legend { font-weight: 900; padding: 0 8px; }
.question label { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; display: flex; gap: 9px; padding: 10px; }
.question input { min-height: 0; width: auto; }
.result-panel strong { color: var(--teal-dark); display: block; font-size: 44px; }
.message-card.unread { border-color: var(--teal); box-shadow: inset 4px 0 0 var(--teal); }
.button-danger { background: #fff0eb; border-color: #f7b39e; color: #a33a17; }
.editor-blocks { display: grid; gap: 16px; }
.editor-block { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.delete-form { margin-top: 10px; }
.current-file { background: white; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); padding: 10px 12px; }
.danger-zone { border-color: #f7b39e; }
.status-ok, .status-bad { border-radius: 8px; display: inline-flex; font-weight: 900; padding: 5px 9px; }
.status-ok { background: #e6f6ee; color: #17643a; }
.status-bad { background: #fff0eb; color: #a33a17; }
@media (max-width: 1050px) { .feature-grid, .course-grid, .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .quick-grid, .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .app-shell { grid-template-columns: 230px minmax(0,1fr); } }
@media (max-width: 820px) { .site-header { align-items: flex-start; flex-direction: column; } .site-nav, .site-actions { justify-content: flex-start; width: 100%; } .hero { min-height: auto; padding-bottom: 54px; padding-top: 54px; } .hero::after { background: rgba(255,255,255,.88); } .hero h1, .page-hero h1 { font-size: 38px; } .intro-band, .split-showcase, .page-hero, .contact-layout, .module-dashboard, .course-admin-grid, .form-grid { grid-template-columns: 1fr; } .app-shell { display: block; } .sidebar { min-height: auto; position: static; } .panel-nav { grid-template-columns: repeat(2, minmax(0,1fr)); } .panel-main { padding: 18px; } }
@media (max-width: 520px) { body { font-size: 15px; } .site-header, .section, .page-hero, .hero, .site-footer { padding-left: 18px; padding-right: 18px; } .site-actions .button, .hero-actions .button { width: 100%; } .site-footer, .mini-row, .panel-title, .grade-form, .progress-form, .course-hero-panel { align-items: stretch; flex-direction: column; } .feature-grid, .course-grid, .metric-grid, .quick-grid, .stats-grid { grid-template-columns: 1fr; } }