/* KU MOOC 3D design system — shared by authenticated and public screens. */
:root {
    --ku-surface: #ffffff;
    --ku-surface-soft: #f3faf6;
    --ku-ink: #102a22;
    --ku-muted: #64756e;
    --ku-line: rgba(8, 78, 51, .12);
    --ku-primary: #087447;
    --ku-primary-deep: #053b2a;
    --ku-hero-bg: #B5F1CC;
    --ku-course-hero-bg: linear-gradient(135deg, #5FB3B3 0%, #126B6D 100%);
    --ku-accent: #d9aa45;
    --ku-shadow: 0 18px 55px rgba(5, 59, 42, .11);
    --ku-radius: 22px;
}

html { scroll-behavior: smooth; }

body {
    min-width: 320px;
    background:
        radial-gradient(circle at 4% 4%, rgba(217,170,69,.16), transparent 20rem),
        radial-gradient(circle at 96% 18%, rgba(16,185,129,.12), transparent 25rem),
        linear-gradient(180deg, #f8fcf9 0%, #eef7f1 100%);
    color: var(--ku-ink);
    font-family: "Noto Sans Thai", "IBM Plex Sans Thai", system-ui, sans-serif;
}

.container { max-width: 1240px; }

.nb-nav {
    background: #fff !important;
    border-bottom: 1px solid #e6eee9;
    box-shadow: none;
    backdrop-filter: blur(18px);
}
.nb-logo {
    border: 2px solid rgba(217,170,69,.72);
    box-shadow: 0 7px 18px rgba(0,0,0,.2);
    transform: translateZ(10px) rotateY(-8deg);
}
.nb-icon-btn, .nb-outline-btn, .nb-light-btn { border-radius: 13px !important; }
.nb-offcanvas { box-shadow: -18px 0 60px rgba(5,59,42,.18); }
.sidebar-container { perspective: 900px; }
.sb-profile-card, .sb-section, .sb-prog-card, .sb-support {
    border-radius: 18px !important;
    box-shadow: var(--ku-shadow) !important;
    border-color: var(--ku-line) !important;
}

.card, .fc-card, .course-card, .stat-card, .info-card,
.quick-action-card, .content-panel, .analytics-board {
    border: 1px solid var(--ku-line) !important;
    border-radius: var(--ku-radius) !important;
    box-shadow: var(--ku-shadow) !important;
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(16px);
    transform-style: preserve-3d;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.card:hover, .fc-card:hover, .course-card:hover, .stat-card:hover,
.quick-action-card:hover, .content-panel:hover {
    border-color: rgba(217,170,69,.55) !important;
    box-shadow: 0 24px 65px rgba(5,59,42,.16) !important;
    transform: translateY(-4px) rotateX(.5deg) rotateY(-.5deg);
}

.card-header {
    border-bottom-color: var(--ku-line) !important;
    background: linear-gradient(135deg, rgba(8,116,71,.08), rgba(217,170,69,.08)) !important;
    color: var(--ku-ink);
}

.btn { border-radius: 13px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active { color: #fff !important; }
.btn-primary, .bg-primary { background-color: var(--ku-primary) !important; border-color: var(--ku-primary) !important; color: #fff !important; }
.btn-success, .bg-success { background-color: #0b8f5b !important; border-color: #0b8f5b !important; color: #fff !important; }
.btn-warning { background-color: var(--ku-accent) !important; border-color: var(--ku-accent) !important; color: #183326 !important; }
.btn-outline-primary { color: var(--ku-primary) !important; border-color: var(--ku-primary) !important; }
.btn-outline-primary:hover { background: var(--ku-primary) !important; color: #fff !important; }

.form-control, .form-select, .input-group-text {
    border-color: var(--ku-line);
    border-radius: 13px;
    min-height: 44px;
    background: rgba(255,255,255,.88);
}
.form-control:focus, .form-select:focus { border-color: var(--ku-primary); box-shadow: 0 0 0 .22rem rgba(8,116,71,.14); }

.table { --bs-table-bg: transparent; vertical-align: middle; }
.table thead th { border-bottom: 2px solid var(--ku-line); color: var(--ku-primary-deep); font-weight: 800; }
.table tbody tr { border-color: var(--ku-line); }

.progress { height: 10px; border-radius: 999px; background: #e3f0e9; }
.progress-bar { border-radius: inherit; background: linear-gradient(90deg, var(--ku-primary), #35c88b, var(--ku-accent)); }

@media (max-width: 768px) {
    .container { padding-inline: 14px; }
    .card, .fc-card, .course-card, .stat-card, .info-card, .quick-action-card { border-radius: 18px !important; }
    .table-responsive { border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .card, .fc-card, .course-card, .stat-card, .quick-action-card { transition: none; }
}