:root {
    --edf-bg: #f5f7fa;
    --edf-panel: #ffffff;
    --edf-panel-soft: #f8fafc;
    --edf-panel-muted: #eef3f8;
    --edf-border: #e5e7eb;
    --edf-text: #102235;
    --edf-text-soft: #6b7280;
    --edf-primary: #04467b;
    --edf-primary-strong: #04467b;
    --edf-secondary: #033960;
    --edf-accent: #a41e22;
    --edf-accent-strong: #86191c;
    --edf-success: #16a34a;
    --edf-warning: #f59e0b;
    --edf-danger: #dc2626;
    --edf-shadow: 0 18px 40px rgba(4, 70, 123, 0.10);
    --edf-shadow-soft: 0 8px 24px rgba(4, 70, 123, 0.08);
    --edf-primary-rgb: 4, 70, 123;
    --edf-secondary-rgb: 3, 57, 96;
    --edf-accent-rgb: 164, 30, 34;
    --edf-accent-soft-rgb: 235, 244, 252;
}

body[data-theme="agri"] {
    --edf-bg: #ffffff;
    --edf-panel: #ffffff;
    --edf-panel-soft: #f7faf4;
    --edf-panel-muted: #eef5e6;
    --edf-border: #d9e4d1;
    --edf-text: #000000;
    --edf-text-soft: #4f5d64;
    --edf-primary: #000000;
    --edf-primary-strong: #000000;
    --edf-secondary: #0c2e3d;
    --edf-accent: #359244;
    --edf-accent-strong: #2c7b39;
    --edf-success: #359244;
    --edf-warning: #8aa84f;
    --edf-danger: #b91c1c;
    --edf-shadow: 0 18px 40px rgba(12, 46, 61, 0.12);
    --edf-shadow-soft: 0 8px 24px rgba(12, 46, 61, 0.08);
    --edf-primary-rgb: 0, 0, 0;
    --edf-secondary-rgb: 12, 46, 61;
    --edf-accent-rgb: 53, 146, 68;
    --edf-accent-soft-rgb: 240, 247, 233;
}

html {
    font-size: 14px;
}

* {
    box-sizing: border-box;
}

body.edf-body {
    margin: 0;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
    background:
        radial-gradient(circle at top right, rgba(164, 30, 34, 0.05), transparent 22%),
        linear-gradient(180deg, #f5f7fa 0%, #eef3f8 100%);
    color: var(--edf-text);
}

body.edf-body[data-theme="agri"] {
    background:
        radial-gradient(circle at top right, rgba(205, 228, 181, 0.28), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f7faf4 100%);
}

.edf-app-shell {
    min-height: 100vh;
}

@media (min-width: 1024px) {
    .edf-app-shell {
        display: grid;
        grid-template-columns: var(--edf-sidebar-width, 280px) minmax(0, 1fr);
        transition: grid-template-columns 180ms ease;
    }

    .edf-app-shell.is-sidebar-collapsed {
        --edf-sidebar-width: 92px;
    }
}

.edf-sidebar {
    background: linear-gradient(180deg, #04467b 0%, #033960 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    transition: padding 180ms ease;
}

body[data-theme="agri"] .edf-sidebar {
    background: linear-gradient(180deg, #0c2e3d 0%, #000000 100%);
}

.edf-logo-lockup {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.edf-sidebar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.edf-logo-mark {
    font-size: 1.32rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.edf-logo-subtitle {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 600;
}

.edf-logo-image {
    display: inline-block;
    height: 42px;
    width: auto;
    border-radius: 12px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.94);
    padding: 4px;
    box-shadow: 0 10px 24px rgba(4, 70, 123, 0.16);
}

.edf-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.84);
    font-weight: 600;
    font-size: 0.92rem;
    transition: all 180ms ease;
}

.edf-nav-link:hover,
.edf-nav-link.is-active {
    background: rgba(var(--edf-accent-rgb), 0.95);
    color: #ffffff;
}

.edf-nav-link .material-symbols-outlined {
    font-size: 20px;
}

.edf-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: none;
    transition: all 180ms ease;
}

.edf-sidebar-toggle:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.16);
}

.edf-topbar {
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(229, 231, 235, 0.92);
    backdrop-filter: blur(18px);
}

.edf-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f5f7fa;
    border: 1px solid transparent;
    border-radius: 18px;
    padding: 0 16px;
    min-height: 44px;
}

.edf-search:focus-within {
    border-color: rgba(164, 30, 34, 0.28);
    box-shadow: 0 0 0 4px rgba(164, 30, 34, 0.08);
}

.edf-search input {
    border: 0;
    outline: none;
    background: transparent;
    width: 100%;
    color: var(--edf-text);
}

.edf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(4, 70, 123, 0.08);
    color: var(--edf-primary-strong);
    font-size: 0.72rem;
    font-weight: 700;
}

.edf-btn-primary,
.edf-btn-secondary,
.edf-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border-radius: 16px;
    padding: 0 16px;
    font-weight: 700;
    font-size: 0.92rem;
    transition: all 180ms ease;
}

.edf-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--edf-accent), var(--edf-accent-strong));
    box-shadow: 0 14px 26px rgba(164, 30, 34, 0.18);
}

.edf-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 30px rgba(164, 30, 34, 0.24);
}

.edf-btn-secondary {
    color: var(--edf-primary-strong);
    background: #fff;
    border: 1px solid rgba(4, 70, 123, 0.22);
}

.edf-btn-ghost {
    color: var(--edf-text-soft);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(229, 231, 235, 0.92);
}

.edf-card,
.edf-panel {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(229, 231, 235, 0.9);
    border-radius: 22px;
    box-shadow: var(--edf-shadow-soft);
}

.edf-card {
    overflow: hidden;
}

.edf-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--edf-shadow);
}

.edf-section-title {
    font-size: 1.56rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.edf-muted {
    color: var(--edf-text-soft);
}

.edf-kpi {
    padding: 20px;
    min-height: 138px;
}

.edf-kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #7a879d;
}

.edf-kpi-value {
    font-size: 1.76rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.edf-progress-track {
    height: 10px;
    width: 100%;
    border-radius: 999px;
    background: rgba(164, 30, 34, 0.12);
    overflow: hidden;
}

.edf-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--edf-accent), var(--edf-accent-strong));
}

.edf-course-thumb {
    width: 100%;
    height: 204px;
    object-fit: cover;
    background: linear-gradient(135deg, #dce9f2, #f5f7fa);
}

.edf-metric-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.edf-hero {
    background: linear-gradient(135deg, #04467b 0%, #033960 65%, #022d4b 100%);
    color: white;
    border-radius: 30px;
    box-shadow: 0 28px 60px rgba(4, 70, 123, 0.24);
    overflow: hidden;
}

body[data-theme="agri"] .edf-hero {
    background: linear-gradient(135deg, #0c2e3d 0%, #000000 65%, #359244 100%);
}

.edf-hero-soft {
    background:
        radial-gradient(circle at top right, rgba(164, 30, 34, 0.10), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.96));
}

.edf-auth-hero {
    background: linear-gradient(145deg, #033960 0%, #04467b 58%, #a41e22 100%);
    color: #ffffff;
}

.edf-auth-hero-copy {
    color: rgba(235, 244, 252, 0.92);
}

.edf-auth-hero-pill {
    display: inline-flex;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.96);
}

.edf-auth-hero-stat {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.10);
}

.edf-auth-soft-panel {
    background:
        radial-gradient(circle at top right, rgba(4, 70, 123, 0.10), transparent 22%),
        linear-gradient(145deg, #eef3ff, #ffffff);
}

body[data-theme="agri"] .edf-auth-hero {
    background: linear-gradient(145deg, #0c2e3d 0%, #000000 58%, #359244 100%);
}

body[data-theme="agri"] .edf-auth-hero-copy {
    color: rgba(240, 247, 233, 0.94);
}

body[data-theme="agri"] .edf-auth-hero-pill {
    background: rgba(205, 228, 181, 0.16);
    color: #ffffff;
}

body[data-theme="agri"] .edf-auth-hero-stat {
    border-color: rgba(205, 228, 181, 0.16);
    background: rgba(205, 228, 181, 0.10);
}

body[data-theme="agri"] .edf-auth-soft-panel {
    background:
        radial-gradient(circle at top right, rgba(205, 228, 181, 0.26), transparent 24%),
        linear-gradient(145deg, #f7faf4, #ffffff);
}

.edf-pill-nav {
    display: inline-flex;
    gap: 18px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.9);
}

.edf-pill-nav a {
    padding: 14px 0;
    font-weight: 700;
    color: #7a879d;
    border-bottom: 3px solid transparent;
    font-size: 0.94rem;
}

.edf-pill-nav a.is-active {
    color: var(--edf-accent);
    border-bottom-color: var(--edf-accent);
}

.edf-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(4, 70, 123, 0.08);
    color: var(--edf-primary-strong);
    font-size: 0.74rem;
    font-weight: 700;
}

.edf-input,
.edf-select,
.edf-textarea {
    width: 100%;
    border: 1px solid rgba(217, 227, 247, 0.95);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    min-height: 44px;
    padding: 10px 13px;
    color: var(--edf-text);
    font-size: 0.94rem;
}

.edf-textarea {
    min-height: 110px;
}

.edf-input:focus,
.edf-select:focus,
.edf-textarea:focus {
    outline: none;
    border-color: rgba(164, 30, 34, 0.32);
    box-shadow: 0 0 0 4px rgba(164, 30, 34, 0.08);
}

.edf-lesson-item {
    border: 1px solid rgba(229, 231, 235, 0.92);
    border-radius: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.96);
}

.edf-lesson-item.is-complete {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(255, 255, 255, 0.98));
    border-color: rgba(34, 197, 94, 0.22);
}

.edf-empty {
    border: 1px dashed rgba(4, 70, 123, 0.24);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
}

.edf-brand-card {
    background: linear-gradient(135deg, #04467b 0%, #033960 100%);
    color: #ffffff;
    box-shadow: 0 24px 50px rgba(4, 70, 123, 0.22);
}

body[data-theme="agri"] .edf-brand-card {
    background: linear-gradient(135deg, #0c2e3d 0%, #359244 100%);
    box-shadow: 0 24px 50px rgba(12, 46, 61, 0.22);
}

.edf-brand-card-muted {
    color: rgba(255, 255, 255, 0.8);
}

.edf-brand-soft {
    background: rgba(4, 70, 123, 0.08);
    color: #04467b;
}

.edf-accent-soft {
    background: rgba(164, 30, 34, 0.10);
    color: #a41e22;
}

.edf-unread-dot {
    background: var(--edf-accent);
    color: #ffffff;
}

.edf-footer {
    color: #93a1b6;
    font-size: 0.78rem;
}

.edf-public-logo,
.edf-public-heading {
    color: var(--edf-text);
}

.edf-public-copy {
    color: var(--edf-text-soft);
}

.edf-public-meta {
    color: color-mix(in srgb, var(--edf-text-soft) 82%, #9aa3af 18%);
}

.edf-public-link {
    color: var(--edf-accent);
}

.edf-public-pill {
    background: rgba(var(--edf-primary-rgb), 0.08);
    color: var(--edf-primary-strong);
    border: 1px solid rgba(var(--edf-primary-rgb), 0.08);
}

.edf-public-surface {
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.84), rgba(240, 244, 248, 0.72));
}

.edf-public-card,
.edf-public-panel,
.edf-public-testimonial,
.edf-public-cta {
    background: color-mix(in srgb, var(--edf-panel) 92%, var(--edf-panel-soft) 8%);
    border: 1px solid color-mix(in srgb, var(--edf-border) 88%, transparent 12%);
}

.edf-public-icon-chip {
    background: rgba(var(--edf-primary-rgb), 0.08);
    color: var(--edf-accent);
}

.edf-public-avatar {
    background: rgba(var(--edf-primary-rgb), 0.10);
    color: var(--edf-accent);
}

.edf-public-highlight {
    background: linear-gradient(135deg, #04467b 0%, #033960 60%, #a41e22 100%);
}

.edf-public-highlight-copy {
    color: #ffffff;
}

.edf-public-highlight-kicker,
.edf-public-highlight-body {
    color: rgba(235, 244, 252, 0.92);
}

body[data-theme="agri"] .edf-public-highlight {
    background: linear-gradient(135deg, #0c2e3d 0%, #1d5a2a 55%, #8aa84f 100%);
}

body[data-theme="agri"] .edf-public-highlight-copy {
    color: #ffffff;
}

body[data-theme="agri"] .edf-public-highlight-kicker,
body[data-theme="agri"] .edf-public-highlight-body {
    color: rgba(240, 247, 233, 0.95);
}

body[data-theme="agri"] .edf-public-surface {
    background:
        linear-gradient(180deg, rgba(247, 250, 244, 0.92), rgba(238, 245, 230, 0.78));
}

body[data-theme="agri"] .edf-public-card,
body[data-theme="agri"] .edf-public-panel,
body[data-theme="agri"] .edf-public-testimonial,
body[data-theme="agri"] .edf-public-cta {
    background: color-mix(in srgb, var(--edf-panel) 78%, var(--edf-panel-soft) 22%);
    border-color: color-mix(in srgb, var(--edf-border) 82%, transparent 18%);
}

body[data-theme="agri"] .edf-public-icon-chip,
body[data-theme="agri"] .edf-public-avatar {
    background: rgba(var(--edf-accent-rgb), 0.12);
    color: var(--edf-secondary);
}

body[data-theme="agri"] .edf-public-pill {
    background: rgba(var(--edf-accent-rgb), 0.10);
    border-color: rgba(var(--edf-accent-rgb), 0.12);
    color: var(--edf-secondary);
}

body[data-theme="agri"] .edf-public-link {
    color: var(--edf-accent-strong);
}

body[data-theme="agri"] .edf-footer {
    color: #516067;
}

@media (min-width: 1024px) {
    .edf-app-shell.is-sidebar-collapsed .edf-sidebar {
        padding-left: 14px;
        padding-right: 14px;
    }

    .edf-app-shell.is-sidebar-collapsed .edf-logo-lockup {
        align-items: center;
    }

    .edf-app-shell.is-sidebar-collapsed .edf-sidebar-header {
        justify-content: center;
    }

    .edf-app-shell.is-sidebar-collapsed .edf-logo-mark {
        justify-content: center;
    }

    .edf-app-shell.is-sidebar-collapsed .edf-logo-mark span,
    .edf-app-shell.is-sidebar-collapsed .edf-logo-subtitle,
    .edf-app-shell.is-sidebar-collapsed .edf-brand-card,
    .edf-app-shell.is-sidebar-collapsed .edf-nav-link > span:last-child {
        display: none;
    }

    .edf-app-shell.is-sidebar-collapsed .edf-nav-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .edf-app-shell.is-sidebar-collapsed .edf-nav-link .material-symbols-outlined {
        margin: 0;
    }

    .edf-app-shell.is-sidebar-collapsed .edf-sidebar-toggle {
        position: absolute;
        top: 18px;
        right: 18px;
    }
}

/* Compatibility pass for existing Tailwind utility accents. */
.text-indigo-100 {
    color: rgba(var(--edf-accent-soft-rgb), 0.92) !important;
}

.text-indigo-200 {
    color: rgba(var(--edf-primary-rgb), 0.18) !important;
}

.text-indigo-500 {
    color: var(--edf-accent) !important;
}

.text-indigo-600,
.hover\:text-indigo-600:hover {
    color: var(--edf-primary-strong) !important;
}

.text-indigo-700,
.hover\:text-indigo-700:hover {
    color: var(--edf-secondary) !important;
}

.bg-indigo-50 {
    background-color: rgba(var(--edf-primary-rgb), 0.08) !important;
}

.bg-indigo-100 {
    background-color: rgba(var(--edf-primary-rgb), 0.12) !important;
}

.bg-indigo-200\/30 {
    background-color: rgba(var(--edf-primary-rgb), 0.18) !important;
}

.bg-violet-200\/30 {
    background-color: rgba(var(--edf-accent-rgb), 0.12) !important;
}

.border-indigo-100 {
    border-color: rgba(var(--edf-primary-rgb), 0.12) !important;
}

.border-indigo-200,
.hover\:border-indigo-200:hover {
    border-color: rgba(var(--edf-primary-rgb), 0.24) !important;
}

.ring-indigo-100 {
    --tw-ring-color: rgba(var(--edf-accent-rgb), 0.14) !important;
}

.shadow-\[0_8px_24px_rgba\(79\,70\,229\,0\.06\)\] {
    box-shadow: 0 8px 24px rgba(var(--edf-primary-rgb), 0.06) !important;
}

.shadow-\[0_8px_24px_rgba\(79\,70\,229\,0\.08\)\] {
    box-shadow: 0 8px 24px rgba(var(--edf-primary-rgb), 0.08) !important;
}

.from-indigo-600 {
    --tw-gradient-from: var(--edf-primary-strong) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(var(--edf-primary-rgb) / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-indigo-700 {
    --tw-gradient-from: var(--edf-secondary) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(var(--edf-secondary-rgb) / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-indigo-600 {
    --tw-gradient-via-position: var(--tw-gradient-via-position) !important;
    --tw-gradient-to: rgb(var(--edf-primary-rgb) / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--edf-primary-strong) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

.to-violet-600 {
    --tw-gradient-to: var(--edf-accent) var(--tw-gradient-to-position) !important;
}

[class*="bg-[linear-gradient(135deg,#d7e3ff,#f8f9ff)]"] {
    background: linear-gradient(135deg, rgba(var(--edf-primary-rgb), 0.16), rgba(245, 247, 250, 0.96)) !important;
}

.text-\[\#04467B\],
.text-\[\#04467b\] {
    color: var(--edf-primary-strong) !important;
}

.border-\[rgba\(4\,70\,123\,0\.14\)\] {
    border-color: rgba(var(--edf-primary-rgb), 0.14) !important;
}

.border-\[rgba\(4\,70\,123\,0\.12\)\] {
    border-color: rgba(var(--edf-primary-rgb), 0.12) !important;
}

.border-\[rgba\(4\,70\,123\,0\.10\)\] {
    border-color: rgba(var(--edf-primary-rgb), 0.10) !important;
}

.bg-\[rgba\(255\,255\,255\,0\.92\)\] {
    background-color: rgba(255, 255, 255, 0.92) !important;
}

.bg-\[rgba\(245\,247\,250\,0\.92\)\] {
    background-color: rgba(var(--edf-primary-rgb), 0.05) !important;
}

.shadow-\[0_28px_80px_rgba\(4\,70\,123\,0\.14\)\] {
    box-shadow: 0 28px 80px rgba(var(--edf-primary-rgb), 0.14) !important;
}

.shadow-\[0_28px_80px_rgba\(79\,70\,229\,0\.14\)\] {
    box-shadow: 0 28px 80px rgba(var(--edf-primary-rgb), 0.14) !important;
}

.shadow-\[0_18px_40px_rgba\(4\,70\,123\,0\.08\)\] {
    box-shadow: 0 18px 40px rgba(var(--edf-primary-rgb), 0.08) !important;
}

.shadow-\[0_18px_40px_rgba\(79\,70\,229\,0\.08\)\] {
    box-shadow: 0 18px 40px rgba(var(--edf-primary-rgb), 0.08) !important;
}

.shadow-\[0_18px_40px_rgba\(79\,70\,229\,0\.12\)\] {
    box-shadow: 0 18px 40px rgba(var(--edf-primary-rgb), 0.12) !important;
}

@media (max-width: 1023px) {
    .edf-topbar {
        position: static;
    }

    .edf-sidebar {
        position: static;
        height: auto;
    }
}

@media (max-width: 640px) {
    html {
        font-size: 13px;
    }
}