/* =========================================================
   ADOPT SKILL — FUTURISTIC EDUCATION PLATFORM
   STYLESHEET — PART 1 / 10
   Foundation, variables, reset and global design system
   ========================================================= */

/* =========================================================
   01. ROOT DESIGN TOKENS
   ========================================================= */

:root {
    /* ---------- Core backgrounds ---------- */
    --color-bg: #070b14;
    --color-bg-deep: #04070d;
    --color-bg-soft: #0b1120;
    --color-surface: #0e1628;
    --color-surface-2: #121c31;
    --color-surface-3: #17233b;
    --color-surface-glass: rgba(14, 22, 40, 0.72);

    /* ---------- Brand colors ---------- */
    --color-primary: #3b82f6;
    --color-primary-light: #60a5fa;
    --color-primary-dark: #1d4ed8;

    --color-purple: #8b5cf6;
    --color-purple-light: #a78bfa;
    --color-purple-dark: #6d28d9;

    --color-cyan: #06b6d4;
    --color-cyan-light: #22d3ee;

    --color-green: #22c55e;
    --color-green-light: #4ade80;
    --color-green-dark: #15803d;

    --color-yellow: #eab308;
    --color-orange: #f97316;
    --color-red: #ef4444;
    --color-pink: #ec4899;

    /* ---------- Text ---------- */
    --color-text: #f8fafc;
    --color-text-soft: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-faint: #64748b;
    --color-text-dark: #334155;

    /* ---------- Borders ---------- */
    --color-border: rgba(148, 163, 184, 0.12);
    --color-border-light: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(96, 165, 250, 0.3);

    /* ---------- Glow colors ---------- */
    --glow-blue: rgba(59, 130, 246, 0.35);
    --glow-purple: rgba(139, 92, 246, 0.35);
    --glow-cyan: rgba(6, 182, 212, 0.3);
    --glow-green: rgba(34, 197, 94, 0.3);
    --glow-red: rgba(239, 68, 68, 0.3);

    /* ---------- Typography ---------- */
    --font-primary: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;

    --font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;

    --font-size-xs: 0.72rem;
    --font-size-sm: 0.82rem;
    --font-size-md: 0.95rem;
    --font-size-lg: 1.05rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* ---------- Spacing ---------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* ---------- Radius ---------- */
    --radius-xs: 0.25rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --radius-full: 9999px;

    /* ---------- Shadows ---------- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.45);

    --shadow-blue:
        0 0 25px rgba(59, 130, 246, 0.18),
        0 10px 30px rgba(0, 0, 0, 0.25);

    --shadow-purple:
        0 0 25px rgba(139, 92, 246, 0.18),
        0 10px 30px rgba(0, 0, 0, 0.25);

    /* ---------- Layout ---------- */
    --sidebar-width: 270px;
    --sidebar-collapsed-width: 84px;
    --header-height: 72px;
    --content-max-width: 1600px;

    /* ---------- Transitions ---------- */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* ---------- Blur ---------- */
    --blur-sm: blur(6px);
    --blur-md: blur(12px);
    --blur-lg: blur(20px);

    /* ---------- Z-index ---------- */
    --z-base: 1;
    --z-content: 10;
    --z-header: 100;
    --z-sidebar: 200;
    --z-overlay: 300;
    --z-modal: 500;
    --z-toast: 700;
    --z-ai: 800;
}


/* =========================================================
   02. GLOBAL RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
    background: var(--color-bg-deep);
}

body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(59, 130, 246, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(139, 92, 246, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(6, 182, 212, 0.05),
            transparent 35%
        ),
        var(--color-bg);

    color: var(--color-text);

    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   03. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

h1 {
    font-size: clamp(
        2rem,
        5vw,
        var(--font-size-5xl)
    );
}

h2 {
    font-size: clamp(
        1.5rem,
        3vw,
        var(--font-size-4xl)
    );
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-md);
}

p {
    color: var(--color-text-soft);
}

small {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

strong {
    font-weight: var(--font-weight-bold);
}

em {
    color: var(--color-primary-light);
}

code,
pre {
    font-family: var(--font-mono);
}

code {
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-xs);

    background: rgba(255, 255, 255, 0.06);
    color: var(--color-cyan-light);

    font-size: 0.88em;
}


/* =========================================================
   04. LINKS
   ========================================================= */

a {
    color: var(--color-primary-light);
    text-decoration: none;
    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}

a:hover {
    color: var(--color-cyan-light);
}

a:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 3px;
}


/* =========================================================
   05. BUTTON RESET
   ========================================================= */

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}


/* =========================================================
   06. MEDIA
   ========================================================= */

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

iframe {
    max-width: 100%;
    border: 0;
}


/* =========================================================
   07. LIST RESET
   ========================================================= */

ul,
ol {
    list-style: none;
}


/* =========================================================
   08. TEXT SELECTION
   ========================================================= */

::selection {
    background: rgba(59, 130, 246, 0.35);
    color: #ffffff;
}


/* =========================================================
   09. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-deep);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--color-primary),
        var(--color-purple)
    );

    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        var(--color-primary-light),
        var(--color-purple-light)
    );
}


/* =========================================================
   10. GLOBAL GLASS COMPONENT
   ========================================================= */

.glass {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.025)
        );

    border: 1px solid var(--color-border-light);

    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        var(--shadow-md);
}


/* =========================================================
   11. PAGE SHELL
   ========================================================= */

#app,
.app,
.app-shell,
.dashboard-shell {
    width: 100%;
    min-height: 100vh;
    position: relative;
}


/* =========================================================
   12. MAIN CONTENT
   ========================================================= */

.main-content,
main {
    position: relative;
    z-index: var(--z-content);

    width: 100%;
    min-width: 0;

    padding: var(--space-6);
}


/* =========================================================
   13. CONTENT CONTAINER
   ========================================================= */

.container {
    width: min(
        100%,
        var(--content-max-width)
    );

    margin-inline: auto;
}

.content-container {
    width: min(
        100%,
        var(--content-max-width)
    );

    margin-inline: auto;
}


/* =========================================================
   14. SECTION SPACING
   ========================================================= */

.section {
    margin-bottom: var(--space-10);
}

.section-sm {
    margin-bottom: var(--space-6);
}

.section-lg {
    margin-bottom: var(--space-16);
}


/* =========================================================
   15. SECTION HEADER
   ========================================================= */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);

    margin-bottom: var(--space-6);
}

.section-title {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.section-title h2,
.section-title h3 {
    margin: 0;
}

.section-title p {
    margin: 0;
    color: var(--color-text-muted);
}


/* =========================================================
   16. SURFACE
   ========================================================= */

.surface {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.surface-soft {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}


/* =========================================================
   17. CARD FOUNDATION
   ========================================================= */

.card {
    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        background var(--transition-normal);
}

.card:hover {
    transform: translateY(-4px);

    border-color: var(--color-border-strong);

    box-shadow:
        0 0 30px rgba(59, 130, 246, 0.1),
        var(--shadow-lg);
}


/* =========================================================
   18. CARD PADDING
   ========================================================= */

.card-padding {
    padding: var(--space-6);
}

.card-padding-sm {
    padding: var(--space-4);
}

.card-padding-lg {
    padding: var(--space-8);
}


/* =========================================================
   19. FLEX UTILITIES
   ========================================================= */

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-none {
    flex: none;
}


/* =========================================================
   20. GAP UTILITIES
   ========================================================= */

.gap-1 {
    gap: var(--space-1);
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-5 {
    gap: var(--space-5);
}

.gap-6 {
    gap: var(--space-6);
}

.gap-8 {
    gap: var(--space-8);
}

.gap-10 {
    gap: var(--space-10);
}


/* =========================================================
   21. GRID UTILITIES
   ========================================================= */

.grid {
    display: grid;
}

.grid-1 {
    grid-template-columns: 1fr;
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.auto-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 260px),
                1fr
            )
        );

    gap: var(--space-6);
}


/* =========================================================
   22. VISIBILITY
   ========================================================= */

.hidden {
    display: none !important;
}

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

.opacity-0 {
    opacity: 0;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-100 {
    opacity: 1;
}


/* =========================================================
   23. WIDTH
   ========================================================= */

.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.max-w-full {
    max-width: 100%;
}


/* =========================================================
   24. HEIGHT
   ========================================================= */

.h-full {
    height: 100%;
}

.min-h-screen {
    min-height: 100vh;
}


/* =========================================================
   25. POSITION
   ========================================================= */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}


/* =========================================================
   26. TEXT UTILITIES
   ========================================================= */

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

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

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

.text-primary {
    color: var(--color-primary-light);
}

.text-purple {
    color: var(--color-purple-light);
}

.text-cyan {
    color: var(--color-cyan-light);
}

.text-green {
    color: var(--color-green-light);
}

.text-red {
    color: #f87171;
}


/* =========================================================
   27. WEIGHT UTILITIES
   ========================================================= */

.font-normal {
    font-weight: var(--font-weight-normal);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

.font-extrabold {
    font-weight: var(--font-weight-extrabold);
}


/* =========================================================
   28. BORDER UTILITIES
   ========================================================= */

.border {
    border: 1px solid var(--color-border);
}

.border-light {
    border: 1px solid var(--color-border-light);
}

.border-primary {
    border-color: var(--color-border-strong);
}


/* =========================================================
   29. RADIUS UTILITIES
   ========================================================= */

.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded-md {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-2xl {
    border-radius: var(--radius-2xl);
}

.rounded-full {
    border-radius: var(--radius-full);
}


/* =========================================================
   30. INTERACTION
   ========================================================= */

.no-select {
    user-select: none;
    -webkit-user-select: none;
}

.pointer {
    cursor: pointer;
}

.not-allowed {
    cursor: not-allowed;
}


/* =========================================================
   31. FOCUS ACCESSIBILITY
   ========================================================= */

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 3px;
}


/* =========================================================
   32. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   END OF PART 1
   ========================================================= */
/* =========================================================
   ADOPT SKILL — PART 2 / 10
   Sidebar, Header, Navigation & Mobile Navigation
   ========================================================= */


/* =========================================================
   33. DASHBOARD LAYOUT
   ========================================================= */

.dashboard-layout {
    position: relative;

    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);

    min-height: 100vh;
    width: 100%;
}


/* =========================================================
   34. SIDEBAR
   ========================================================= */

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;

    width: var(--sidebar-width);
    height: 100vh;

    z-index: var(--z-sidebar);

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            rgba(12, 20, 37, 0.96),
            rgba(5, 10, 19, 0.98)
        );

    border-right: 1px solid var(--color-border);

    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);

    box-shadow:
        10px 0 40px rgba(0, 0, 0, 0.25);

    overflow: hidden;

    transition:
        transform var(--transition-normal),
        width var(--transition-normal);
}


/* =========================================================
   35. SIDEBAR BRAND
   ========================================================= */

.sidebar-brand {
    display: flex;
    align-items: center;

    min-height: var(--header-height);

    padding:
        var(--space-4)
        var(--space-5);

    border-bottom: 1px solid var(--color-border);

    gap: var(--space-3);
}

.brand-logo {
    position: relative;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-purple)
        );

    color: #ffffff;

    font-weight: var(--font-weight-extrabold);

    box-shadow:
        0 0 25px rgba(59, 130, 246, 0.25),
        0 0 40px rgba(139, 92, 246, 0.12);

    overflow: hidden;
}

.brand-logo::before {
    content: "";

    position: absolute;

    inset: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.25),
            transparent 45%
        );

    pointer-events: none;
}

.brand-logo span {
    position: relative;
    z-index: 1;
}

.brand-name {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.brand-title {
    color: var(--color-text);

    font-size: 1.05rem;
    font-weight: var(--font-weight-extrabold);

    letter-spacing: 0.03em;

    white-space: nowrap;
}

.brand-subtitle {
    color: var(--color-text-faint);

    font-size: 0.68rem;
    font-weight: var(--font-weight-medium);

    letter-spacing: 0.08em;
    text-transform: uppercase;

    white-space: nowrap;
}


/* =========================================================
   36. SIDEBAR NAVIGATION
   ========================================================= */

.sidebar-nav {
    flex: 1;

    padding:
        var(--space-5)
        var(--space-3);

    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.nav-section {
    margin-bottom: var(--space-6);
}

.nav-section-title {
    padding:
        0
        var(--space-3)
        var(--space-2);

    color: var(--color-text-faint);

    font-size: 0.68rem;
    font-weight: var(--font-weight-bold);

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* =========================================================
   37. NAVIGATION LIST
   ========================================================= */

.nav-list {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.nav-item {
    position: relative;
}

.nav-link {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 46px;

    padding:
        0
        var(--space-3);

    gap: var(--space-3);

    border-radius: var(--radius-md);

    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.045);

    transform: translateX(2px);
}

.nav-link.active {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(59, 130, 246, 0.18),
            rgba(139, 92, 246, 0.08)
        );

    border: 1px solid rgba(59, 130, 246, 0.12);
}

.nav-link.active::before {
    content: "";

    position: absolute;

    left: -1px;
    top: 8px;
    bottom: 8px;

    width: 3px;

    border-radius: var(--radius-full);

    background:
        linear-gradient(
            180deg,
            var(--color-primary-light),
            var(--color-purple-light)
        );

    box-shadow:
        0 0 12px var(--glow-blue);
}


/* =========================================================
   38. NAV ICON
   ========================================================= */

.nav-icon {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    color: currentColor;

    font-size: 1.05rem;

    transition:
        transform var(--transition-fast),
        color var(--transition-fast);
}

.nav-link:hover .nav-icon {
    transform: scale(1.08);
}

.nav-link.active .nav-icon {
    color: var(--color-primary-light);
}


/* =========================================================
   39. NAV LABEL
   ========================================================= */

.nav-label {
    flex: 1;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   40. NAV BADGE
   ========================================================= */

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 21px;
    height: 21px;

    padding: 0 6px;

    border-radius: var(--radius-full);

    background: rgba(59, 130, 246, 0.16);

    color: var(--color-primary-light);

    font-size: 0.68rem;
    font-weight: var(--font-weight-bold);
}

.nav-badge.new {
    background: rgba(34, 197, 94, 0.14);
    color: var(--color-green-light);
}

.nav-badge.alert {
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
}


/* =========================================================
   41. SIDEBAR FOOTER
   ========================================================= */

.sidebar-footer {
    padding: var(--space-4);

    border-top: 1px solid var(--color-border);
}

.sidebar-user {
    display: flex;
    align-items: center;

    gap: var(--space-3);

    padding: var(--space-3);

    border-radius: var(--radius-lg);

    background: rgba(255, 255, 255, 0.035);

    transition:
        background var(--transition-fast);
}

.sidebar-user:hover {
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-user-avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-purple)
        );

    color: #ffffff;

    font-size: 0.8rem;
    font-weight: var(--font-weight-bold);
}

.sidebar-user-info {
    min-width: 0;

    flex: 1;
}

.sidebar-user-name {
    color: var(--color-text);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-role {
    color: var(--color-text-faint);

    font-size: 0.7rem;
}


/* =========================================================
   42. SIDEBAR TOGGLE
   ========================================================= */

.sidebar-toggle {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.045);

    color: var(--color-text-soft);

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.sidebar-toggle:hover {
    background: rgba(59, 130, 246, 0.12);
    color: var(--color-primary-light);

    transform: scale(1.04);
}


/* =========================================================
   43. TOP HEADER
   ========================================================= */

.top-header,
.dashboard-header {
    position: sticky;
    top: 0;

    z-index: var(--z-header);

    display: flex;
    align-items: center;

    min-height: var(--header-height);

    padding:
        0
        var(--space-6);

    background:
        rgba(7, 11, 20, 0.78);

    border-bottom: 1px solid var(--color-border);

    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}


/* =========================================================
   44. HEADER INNER
   ========================================================= */

.header-inner {
    display: flex;
    align-items: center;

    width: 100%;
    max-width: var(--content-max-width);

    margin-inline: auto;

    gap: var(--space-4);
}


/* =========================================================
   45. MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu-button {
    display: none;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.045);

    color: var(--color-text-soft);

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.mobile-menu-button:hover {
    background: rgba(59, 130, 246, 0.12);
    color: var(--color-primary-light);
}


/* =========================================================
   46. HEADER TITLE
   ========================================================= */

.header-title {
    min-width: 0;

    flex: 1;
}

.header-title h1 {
    margin: 0;

    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-title p {
    margin-top: 2px;

    color: var(--color-text-faint);

    font-size: 0.72rem;
}


/* =========================================================
   47. HEADER SEARCH
   ========================================================= */

.header-search {
    position: relative;

    width: min(340px, 30vw);
}

.search-input {
    width: 100%;
    height: 42px;

    padding:
        0
        var(--space-4)
        0
        42px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    outline: none;

    background:
        rgba(255, 255, 255, 0.035);

    color: var(--color-text);

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.search-input::placeholder {
    color: var(--color-text-faint);
}

.search-input:hover {
    background: rgba(255, 255, 255, 0.05);
}

.search-input:focus {
    border-color: rgba(59, 130, 246, 0.5);

    background: rgba(255, 255, 255, 0.055);

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.08);
}

.search-icon {
    position: absolute;

    left: 14px;
    top: 50%;

    width: 18px;
    height: 18px;

    transform: translateY(-50%);

    color: var(--color-text-faint);

    pointer-events: none;
}


/* =========================================================
   48. HEADER ACTIONS
   ========================================================= */

.header-actions {
    display: flex;
    align-items: center;

    gap: var(--space-2);
}


/* =========================================================
   49. HEADER ACTION BUTTON
   ========================================================= */

.header-action {
    position: relative;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.035);

    color: var(--color-text-muted);

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.header-action:hover {
    background: rgba(59, 130, 246, 0.1);

    color: var(--color-primary-light);

    transform: translateY(-1px);
}


/* =========================================================
   50. NOTIFICATION DOT
   ========================================================= */

.notification-dot {
    position: absolute;

    top: 8px;
    right: 8px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--color-red);

    border: 2px solid var(--color-bg);

    box-shadow:
        0 0 8px rgba(239, 68, 68, 0.5);
}


/* =========================================================
   51. HEADER PROFILE
   ========================================================= */

.header-profile {
    display: flex;
    align-items: center;

    gap: var(--space-3);

    padding:
        4px 6px 4px 4px;

    border: 1px solid transparent;

    border-radius: var(--radius-full);

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.header-profile:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--color-border);
}

.profile-avatar {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--color-cyan),
            var(--color-primary)
        );

    color: #ffffff;

    font-size: 0.78rem;
    font-weight: var(--font-weight-bold);

    box-shadow:
        0 0 18px rgba(6, 182, 212, 0.15);
}

.profile-info {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.profile-name {
    color: var(--color-text);

    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);

    white-space: nowrap;
}

.profile-status {
    color: var(--color-text-faint);

    font-size: 0.65rem;
}


/* =========================================================
   52. MAIN AREA WITH SIDEBAR
   ========================================================= */

.dashboard-layout .main-area,
.dashboard-layout .content-area {
    grid-column: 2;

    min-width: 0;
}


/* =========================================================
   53. SIDEBAR COLLAPSED STATE
   ========================================================= */

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar.collapsed .brand-name,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .sidebar-user-info {
    display: none;
}

.sidebar.collapsed .sidebar-brand {
    justify-content: center;
    padding-inline: var(--space-3);
}

.sidebar.collapsed .nav-link {
    justify-content: center;
    padding-inline: 0;
}

.sidebar.collapsed .sidebar-user {
    justify-content: center;
}

.sidebar.collapsed + .main-area {
    margin-left: var(--sidebar-collapsed-width);
}


/* =========================================================
   54. SIDEBAR OVERLAY
   ========================================================= */

.sidebar-overlay {
    position: fixed;

    inset: 0;

    z-index: var(--z-overlay);

    background:
        rgba(0, 0, 0, 0.58);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal);
}

.sidebar-overlay.active,
.sidebar-overlay.is-active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   55. MOBILE SIDEBAR
   ========================================================= */

@media (max-width: 900px) {

    .dashboard-layout {
        display: block;
    }

    .sidebar {
        transform: translateX(-105%);
        box-shadow:
            20px 0 60px rgba(0, 0, 0, 0.4);
    }

    .sidebar.active,
    .sidebar.is-open,
    .sidebar.open {
        transform: translateX(0);
    }

    .dashboard-layout .main-area,
    .dashboard-layout .content-area {
        width: 100%;
        margin-left: 0;
    }

    .mobile-menu-button {
        display: inline-flex;
    }

    .top-header,
    .dashboard-header {
        padding-inline: var(--space-4);
    }

    .main-content,
    main {
        padding: var(--space-4);
    }
}


/* =========================================================
   56. TABLET HEADER
   ========================================================= */

@media (max-width: 700px) {

    .header-search {
        width: 42px;
    }

    .header-search .search-input {
        padding-left: 0;

        color: transparent;

        cursor: pointer;
    }

    .header-search .search-input::placeholder {
        color: transparent;
    }

    .header-search .search-icon {
        left: 50%;

        transform:
            translate(
                -50%,
                -50%
            );
    }

    .profile-info {
        display: none;
    }

    .header-profile {
        padding-right: 4px;
    }
}


/* =========================================================
   57. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    :root {
        --header-height: 64px;
    }

    .sidebar {
        width: min(
            var(--sidebar-width),
            86vw
        );
    }

    .top-header,
    .dashboard-header {
        padding-inline: var(--space-3);
    }

    .main-content,
    main {
        padding: var(--space-3);
    }

    .header-title p {
        display: none;
    }

    .header-actions {
        gap: 2px;
    }

    .header-action {
        width: 38px;
        height: 38px;
    }

    .mobile-menu-button {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
}


/* =========================================================
   58. NAVIGATION ANIMATION
   ========================================================= */

@keyframes navItemEnter {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar.active .nav-item {
    animation:
        navItemEnter 280ms ease both;
}

.sidebar.active .nav-item:nth-child(1) {
    animation-delay: 20ms;
}

.sidebar.active .nav-item:nth-child(2) {
    animation-delay: 40ms;
}

.sidebar.active .nav-item:nth-child(3) {
    animation-delay: 60ms;
}

.sidebar.active .nav-item:nth-child(4) {
    animation-delay: 80ms;
}

.sidebar.active .nav-item:nth-child(5) {
    animation-delay: 100ms;
}


/* =========================================================
   59. SIDEBAR GLOW
   ========================================================= */

.sidebar::after {
    content: "";

    position: absolute;

    left: -100px;
    bottom: -100px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(59, 130, 246, 0.08),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   60. HEADER GLOW
   ========================================================= */

.top-header::after,
.dashboard-header::after {
    content: "";

    position: absolute;

    left: 15%;
    right: 15%;
    bottom: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(59, 130, 246, 0.35),
            rgba(139, 92, 246, 0.35),
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   END OF PART 2
   ========================================================= */
/* =========================================================
   ADOPT SKILL — PART 3 / 10
   Dashboard Hero, Statistics, Courses & Progress
   ========================================================= */


/* =========================================================
   61. DASHBOARD CONTENT WRAPPER
   ========================================================= */

.dashboard-content {
    width: 100%;
    max-width: var(--content-max-width);
    margin-inline: auto;
}


/* =========================================================
   62. WELCOME HERO
   ========================================================= */

.welcome-hero {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 220px;

    margin-bottom: var(--space-8);
    padding: var(--space-8);

    overflow: hidden;

    border: 1px solid rgba(96, 165, 250, 0.16);
    border-radius: var(--radius-2xl);

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(139, 92, 246, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 65% 90%,
            rgba(6, 182, 212, 0.1),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.13),
            rgba(14, 22, 40, 0.82)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 25px 70px rgba(0, 0, 0, 0.2);
}

.welcome-hero::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -100px;
    top: -120px;

    border-radius: 50%;

    border: 1px solid rgba(96, 165, 250, 0.12);

    box-shadow:
        0 0 0 30px rgba(96, 165, 250, 0.025),
        0 0 0 60px rgba(96, 165, 250, 0.018);

    pointer-events: none;
}

.welcome-hero::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: 45%;
    bottom: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(59, 130, 246, 0.12),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   63. HERO CONTENT
   ========================================================= */

.welcome-content {
    position: relative;
    z-index: 2;

    max-width: 720px;
}

.welcome-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2);

    margin-bottom: var(--space-3);

    color: var(--color-cyan-light);

    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.welcome-eyebrow::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--color-green);

    box-shadow:
        0 0 10px rgba(34, 197, 94, 0.65);
}

.welcome-content h1 {
    margin-bottom: var(--space-3);

    font-size: clamp(
        1.8rem,
        4vw,
        3rem
    );

    letter-spacing: -0.035em;
}

.welcome-content h1 .accent {
    background:
        linear-gradient(
            90deg,
            var(--color-primary-light),
            var(--color-purple-light),
            var(--color-cyan-light)
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.welcome-content p {
    max-width: 650px;

    color: var(--color-text-muted);

    font-size: var(--font-size-md);
}


/* =========================================================
   64. HERO ACTIONS
   ========================================================= */

.hero-actions {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;

    gap: var(--space-3);

    margin-top: var(--space-6);
}

.hero-action-primary,
.hero-action-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
        0
        var(--space-5);

    border-radius: var(--radius-md);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}

.hero-action-primary {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-purple)
        );

    box-shadow:
        0 8px 25px rgba(59, 130, 246, 0.2);
}

.hero-action-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(59, 130, 246, 0.3);
}

.hero-action-secondary {
    color: var(--color-text-soft);

    background: rgba(255, 255, 255, 0.045);

    border: 1px solid var(--color-border);
}

.hero-action-secondary:hover {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.075);

    transform: translateY(-2px);
}


/* =========================================================
   65. HERO VISUAL
   ========================================================= */

.hero-visual {
    position: relative;
    z-index: 2;

    width: 220px;
    height: 180px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;
}

.hero-orb {
    position: relative;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255, 255, 255, 0.55),
            transparent 8%
        ),
        radial-gradient(
            circle,
            rgba(59, 130, 246, 0.9),
            rgba(139, 92, 246, 0.65) 45%,
            rgba(6, 182, 212, 0.2) 70%,
            transparent 72%
        );

    box-shadow:
        0 0 40px rgba(59, 130, 246, 0.25),
        0 0 80px rgba(139, 92, 246, 0.15);

    animation:
        heroOrbFloat 5s ease-in-out infinite;
}

.hero-orb::before,
.hero-orb::after {
    content: "";

    position: absolute;

    inset: -15px;

    border: 1px solid rgba(96, 165, 250, 0.18);

    border-radius: 50%;

    transform: rotateX(65deg) rotateZ(15deg);
}

.hero-orb::after {
    inset: -28px;

    border-color: rgba(139, 92, 246, 0.12);

    transform:
        rotateX(65deg)
        rotateZ(-25deg);
}

@keyframes heroOrbFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


/* =========================================================
   66. STATISTICS GRID
   ========================================================= */

.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: var(--space-4);

    margin-bottom: var(--space-8);
}


/* =========================================================
   67. STAT CARD
   ========================================================= */

.stat-card {
    position: relative;

    min-width: 0;

    padding: var(--space-5);

    overflow: hidden;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.018)
        );

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

.stat-card:hover {
    transform: translateY(-4px);

    border-color: rgba(96, 165, 250, 0.24);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.25),
        0 0 25px rgba(59, 130, 246, 0.06);
}

.stat-card::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    right: -30px;
    bottom: -40px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            var(--stat-glow, rgba(59, 130, 246, 0.12)),
            transparent 70%
        );

    pointer-events: none;
}

.stat-card.blue {
    --stat-glow: rgba(59, 130, 246, 0.2);
}

.stat-card.purple {
    --stat-glow: rgba(139, 92, 246, 0.2);
}

.stat-card.green {
    --stat-glow: rgba(34, 197, 94, 0.18);
}

.stat-card.cyan {
    --stat-glow: rgba(6, 182, 212, 0.18);
}


/* =========================================================
   68. STAT HEADER
   ========================================================= */

.stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: var(--space-4);
}

.stat-label {
    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.stat-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: var(--radius-md);

    background: rgba(59, 130, 246, 0.1);

    color: var(--color-primary-light);
}

.stat-card.purple .stat-icon {
    background: rgba(139, 92, 246, 0.1);
    color: var(--color-purple-light);
}

.stat-card.green .stat-icon {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-green-light);
}

.stat-card.cyan .stat-icon {
    background: rgba(6, 182, 212, 0.1);
    color: var(--color-cyan-light);
}


/* =========================================================
   69. STAT VALUE
   ========================================================= */

.stat-value {
    color: var(--color-text);

    font-size: clamp(
        1.55rem,
        3vw,
        2.1rem
    );

    font-weight: var(--font-weight-extrabold);

    line-height: 1.1;

    letter-spacing: -0.04em;
}

.stat-description {
    margin-top: var(--space-2);

    color: var(--color-text-faint);

    font-size: 0.72rem;
}


/* =========================================================
   70. STAT TREND
   ========================================================= */

.stat-trend {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    margin-top: var(--space-3);

    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
}

.stat-trend.positive {
    color: var(--color-green-light);
}

.stat-trend.negative {
    color: #f87171;
}

.stat-trend.neutral {
    color: var(--color-text-muted);
}


/* =========================================================
   71. DASHBOARD TWO COLUMN
   ========================================================= */

.dashboard-columns {
    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(280px, 0.75fr);

    gap: var(--space-6);

    margin-bottom: var(--space-8);
}


/* =========================================================
   72. CONTENT PANEL
   ========================================================= */

.content-panel {
    position: relative;

    min-width: 0;

    padding: var(--space-6);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


/* =========================================================
   73. PANEL HEADER
   ========================================================= */

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    margin-bottom: var(--space-6);
}

.panel-heading {
    min-width: 0;
}

.panel-heading h2,
.panel-heading h3 {
    margin-bottom: 3px;

    font-size: 1.05rem;
}

.panel-heading p {
    color: var(--color-text-faint);

    font-size: 0.75rem;
}


/* =========================================================
   74. VIEW ALL LINK
   ========================================================= */

.view-all {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: var(--color-primary-light);

    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);

    white-space: nowrap;
}

.view-all:hover {
    color: var(--color-cyan-light);
}


/* =========================================================
   75. COURSE GRID
   ========================================================= */

.course-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 250px),
                1fr
            )
        );

    gap: var(--space-5);
}


/* =========================================================
   76. COURSE CARD
   ========================================================= */

.course-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.015)
        );

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

.course-card:hover {
    transform: translateY(-7px);

    border-color: rgba(96, 165, 250, 0.25);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(59, 130, 246, 0.08);
}


/* =========================================================
   77. COURSE CARD TOP
   ========================================================= */

.course-card-top {
    position: relative;

    min-height: 135px;

    padding: var(--space-5);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            var(--course-color, rgba(59, 130, 246, 0.2)),
            transparent 45%
        ),
        rgba(255, 255, 255, 0.015);
}

.course-card-top::before {
    content: "";

    position: absolute;

    right: -35px;
    top: -35px;

    width: 110px;
    height: 110px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}

.course-card-top::after {
    content: "";

    position: absolute;

    right: 20px;
    top: 20px;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 50%;
}


/* =========================================================
   78. COURSE COLORS
   ========================================================= */

.course-python {
    --course-color: rgba(59, 130, 246, 0.22);
}

.course-java {
    --course-color: rgba(239, 68, 68, 0.18);
}

.course-c {
    --course-color: rgba(6, 182, 212, 0.2);
}

.course-cpp {
    --course-color: rgba(139, 92, 246, 0.2);
}

.course-ai {
    --course-color: rgba(34, 197, 94, 0.2);
}

.course-web {
    --course-color: rgba(236, 72, 153, 0.18);
}


/* =========================================================
   79. COURSE ICON
   ========================================================= */

.course-icon {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: var(--space-4);

    border-radius: var(--radius-lg);

    background:
        rgba(255, 255, 255, 0.075);

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: var(--color-text);

    font-size: 1.2rem;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   80. COURSE LEVEL
   ========================================================= */

.course-level {
    position: absolute;

    top: var(--space-4);
    right: var(--space-4);

    z-index: 3;

    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding:
        0
        var(--space-2);

    border-radius: var(--radius-full);

    background:
        rgba(0, 0, 0, 0.25);

    color: var(--color-text-soft);

    font-size: 0.62rem;
    font-weight: var(--font-weight-bold);

    text-transform: uppercase;
    letter-spacing: 0.06em;

    backdrop-filter: blur(8px);
}


/* =========================================================
   81. COURSE BODY
   ========================================================= */

.course-card-body {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: var(--space-5);
}

.course-card-title {
    margin-bottom: var(--space-2);

    color: var(--color-text);

    font-size: 1rem;
    font-weight: var(--font-weight-bold);

    line-height: 1.3;
}

.course-card-description {
    margin-bottom: var(--space-5);

    color: var(--color-text-muted);

    font-size: 0.76rem;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
}


/* =========================================================
   82. COURSE META
   ========================================================= */

.course-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--space-3);

    margin-top: auto;
    margin-bottom: var(--space-4);
}

.course-meta-item {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: var(--color-text-faint);

    font-size: 0.68rem;
}

.course-meta-item svg,
.course-meta-item i {
    color: var(--color-primary-light);
}


/* =========================================================
   83. COURSE FOOTER
   ========================================================= */

.course-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-3);

    padding-top: var(--space-4);

    border-top: 1px solid var(--color-border);
}


/* =========================================================
   84. START COURSE BUTTON
   ========================================================= */

.start-course-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding:
        0
        var(--space-4);

    border-radius: var(--radius-md);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--color-primary-dark),
            var(--color-primary)
        );

    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);

    box-shadow:
        0 6px 18px rgba(59, 130, 246, 0.15);

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}

.start-course-btn:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 9px 24px rgba(59, 130, 246, 0.25);
}


/* =========================================================
   85. COURSE PROGRESS
   ========================================================= */

.course-progress {
    margin-bottom: var(--space-4);
}

.course-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: var(--space-2);
}

.course-progress-label {
    color: var(--color-text-faint);

    font-size: 0.67rem;
}

.course-progress-value {
    color: var(--color-text-soft);

    font-size: 0.67rem;
    font-weight: var(--font-weight-semibold);
}


/* =========================================================
   86. PROGRESS BAR
   ========================================================= */

.progress-bar {
    position: relative;

    width: 100%;
    height: 6px;

    overflow: hidden;

    border-radius: var(--radius-full);

    background:
        rgba(255, 255, 255, 0.06);
}

.progress-fill {
    position: relative;

    width: var(--progress, 0%);

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-purple)
        );

    box-shadow:
        0 0 12px rgba(59, 130, 246, 0.3);

    transition:
        width 700ms cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.progress-fill.green {
    background:
        linear-gradient(
            90deg,
            var(--color-green-dark),
            var(--color-green-light)
        );

    box-shadow:
        0 0 12px rgba(34, 197, 94, 0.25);
}

.progress-fill.cyan {
    background:
        linear-gradient(
            90deg,
            var(--color-cyan),
            var(--color-cyan-light)
        );
}

.progress-fill::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent
        );

    transform: translateX(-100%);

    animation:
        progressShimmer 2.5s infinite;
}

@keyframes progressShimmer {
    to {
        transform: translateX(100%);
    }
}


/* =========================================================
   87. OVERALL PROGRESS CARD
   ========================================================= */

.overall-progress-card {
    padding: var(--space-6);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(59, 130, 246, 0.07),
            rgba(255, 255, 255, 0.018)
        );
}

.overall-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    margin-bottom: var(--space-5);
}

.overall-progress-title {
    color: var(--color-text);

    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
}

.overall-progress-percent {
    color: var(--color-primary-light);

    font-size: 1.3rem;
    font-weight: var(--font-weight-extrabold);
}


/* =========================================================
   88. LARGE PROGRESS BAR
   ========================================================= */

.progress-bar-lg {
    height: 10px;

    border-radius: var(--radius-full);

    background:
        rgba(255, 255, 255, 0.055);
}

.progress-bar-lg .progress-fill {
    box-shadow:
        0 0 18px rgba(59, 130, 246, 0.35);
}


/* =========================================================
   89. COURSE EMPTY STATE
   ========================================================= */

.course-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 240px;

    padding: var(--space-8);

    text-align: center;

    border: 1px dashed var(--color-border);

    border-radius: var(--radius-xl);

    background:
        rgba(255, 255, 255, 0.018);
}

.course-empty-icon {
    display: grid;
    place-items: center;

    width: 56px;
    height: 56px;

    margin-bottom: var(--space-4);

    border-radius: 50%;

    background:
        rgba(59, 130, 246, 0.1);

    color: var(--color-primary-light);

    font-size: 1.4rem;
}

.course-empty h3 {
    margin-bottom: var(--space-2);

    font-size: 1rem;
}

.course-empty p {
    max-width: 400px;

    color: var(--color-text-faint);

    font-size: 0.75rem;
}


/* =========================================================
   90. FILTER BAR
   ========================================================= */

.course-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--space-2);

    margin-bottom: var(--space-5);
}

.filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding:
        0
        var(--space-3);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-full);

    background:
        rgba(255, 255, 255, 0.025);

    color: var(--color-text-muted);

    font-size: 0.68rem;
    font-weight: var(--font-weight-medium);

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.filter-button:hover {
    color: var(--color-text);

    background:
        rgba(255, 255, 255, 0.055);
}

.filter-button.active {
    color: #ffffff;

    background:
        rgba(59, 130, 246, 0.14);

    border-color:
        rgba(59, 130, 246, 0.3);
}


/* =========================================================
   91. COURSE STATUS
   ========================================================= */

.course-status {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: var(--color-text-faint);

    font-size: 0.65rem;
}

.course-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--color-text-faint);
}

.course-status.active {
    color: var(--color-green-light);
}

.course-status.active .course-status-dot {
    background: var(--color-green);

    box-shadow:
        0 0 8px rgba(34, 197, 94, 0.45);
}

.course-status.completed {
    color: var(--color-cyan-light);
}

.course-status.completed .course-status-dot {
    background: var(--color-cyan);
}


/* =========================================================
   92. RESPONSIVE DASHBOARD
   ========================================================= */

@media (max-width: 1100px) {

    .stats-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .dashboard-columns {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .hero-visual {
        width: 170px;
    }
}


/* =========================================================
   93. TABLET DASHBOARD
   ========================================================= */

@media (max-width: 760px) {

    .welcome-hero {
        min-height: auto;

        padding: var(--space-6);
    }

    .hero-visual {
        display: none;
    }

    .hero-actions {
        flex-wrap: wrap;
    }

    .hero-action-primary,
    .hero-action-secondary {
        flex: 1 1 auto;
    }

    .content-panel {
        padding: var(--space-5);
    }
}


/* =========================================================
   94. MOBILE DASHBOARD
   ========================================================= */

@media (max-width: 520px) {

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .welcome-hero {
        border-radius: var(--radius-xl);

        padding: var(--space-5);
    }

    .welcome-content h1 {
        font-size: 1.7rem;
    }

    .hero-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .hero-action-primary,
    .hero-action-secondary {
        width: 100%;
    }

    .panel-header {
        align-items: flex-start;
    }

    .content-panel {
        padding: var(--space-4);
    }

    .course-grid {
        grid-template-columns: 1fr;
    }

    .course-card-top {
        min-height: 125px;
    }
}


/* =========================================================
   95. DASHBOARD ENTRY ANIMATION
   ========================================================= */

@keyframes dashboardFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-content > * {
    animation:
        dashboardFadeIn
        450ms
        ease
        both;
}

.dashboard-content > *:nth-child(1) {
    animation-delay: 40ms;
}

.dashboard-content > *:nth-child(2) {
    animation-delay: 80ms;
}

.dashboard-content > *:nth-child(3) {
    animation-delay: 120ms;
}

.dashboard-content > *:nth-child(4) {
    animation-delay: 160ms;
}


/* =========================================================
   96. COURSE CARD ENTRY
   ========================================================= */

@keyframes courseCardEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.course-card {
    animation:
        courseCardEnter
        400ms
        ease
        both;
}


/* =========================================================
   97. COURSE CARD STAGGER
   ========================================================= */

.course-card:nth-child(1) {
    animation-delay: 50ms;
}

.course-card:nth-child(2) {
    animation-delay: 100ms;
}

.course-card:nth-child(3) {
    animation-delay: 150ms;
}

.course-card:nth-child(4) {
    animation-delay: 200ms;
}

.course-card:nth-child(5) {
    animation-delay: 250ms;
}

.course-card:nth-child(6) {
    animation-delay: 300ms;
}

.course-card:nth-child(7) {
    animation-delay: 350ms;
}

.course-card:nth-child(8) {
    animation-delay: 400ms;
}


/* =========================================================
   98. DASHBOARD DIVIDER
   ========================================================= */

.dashboard-divider {
    width: 100%;
    height: 1px;

    margin:
        var(--space-8)
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-border),
            transparent
        );
}


/* =========================================================
   99. DASHBOARD STATUS BAR
   ========================================================= */

.dashboard-status {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    padding:
        var(--space-3)
        var(--space-4);

    border:
        1px solid
        rgba(34, 197, 94, 0.12);

    border-radius: var(--radius-md);

    background:
        rgba(34, 197, 94, 0.035);
}

.dashboard-status-left {
    display: flex;
    align-items: center;

    gap: var(--space-2);

    color: var(--color-text-muted);

    font-size: 0.7rem;
}

.dashboard-status-indicator {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--color-green);

    box-shadow:
        0 0 10px rgba(34, 197, 94, 0.6);

    animation:
        statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.8);
    }
}


/* =========================================================
   100. RESPONSIVE COURSE META
   ========================================================= */

@media (max-width: 420px) {

    .course-meta {
        gap: var(--space-2);
    }

    .course-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .start-course-btn {
        width: 100%;
    }
}


/* =========================================================
   END OF PART 3
   ========================================================= */
/* =========================================================
   ADOPT SKILL — PART 4 / 10
   Learning Roadmap, Lessons, Streaks & Achievements
   ========================================================= */


/* =========================================================
   101. LEARNING ROADMAP
   ========================================================= */

.learning-roadmap {
    position: relative;

    width: 100%;

    padding: var(--space-6);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.015)
        );

    overflow: hidden;
}

.learning-roadmap::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -120px;
    top: -140px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(139, 92, 246, 0.12),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   102. ROADMAP HEADER
   ========================================================= */

.roadmap-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    margin-bottom: var(--space-7);
}

.roadmap-title {
    display: flex;
    align-items: center;

    gap: var(--space-3);
}

.roadmap-title-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: var(--radius-md);

    color: var(--color-purple-light);

    background:
        rgba(139, 92, 246, 0.1);

    border:
        1px solid
        rgba(139, 92, 246, 0.16);
}

.roadmap-title h2 {
    margin-bottom: 3px;

    font-size: 1rem;
}

.roadmap-title p {
    color: var(--color-text-faint);

    font-size: 0.72rem;
}


/* =========================================================
   103. ROADMAP CONTROLS
   ========================================================= */

.roadmap-controls {
    display: flex;
    align-items: center;

    gap: var(--space-2);
}

.roadmap-control {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    background:
        rgba(255, 255, 255, 0.025);

    color: var(--color-text-muted);

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.roadmap-control:hover {
    color: var(--color-text);

    background:
        rgba(255, 255, 255, 0.06);

    border-color:
        rgba(96, 165, 250, 0.25);
}


/* =========================================================
   104. ROADMAP TRACK
   ========================================================= */

.roadmap-track {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: var(--space-5);

    padding-left: 25px;
}

.roadmap-track::before {
    content: "";

    position: absolute;

    left: 7px;
    top: 20px;
    bottom: 20px;

    width: 2px;

    background:
        linear-gradient(
            180deg,
            var(--color-primary),
            rgba(139, 92, 246, 0.55),
            var(--color-border)
        );
}


/* =========================================================
   105. ROADMAP ITEM
   ========================================================= */

.roadmap-item {
    position: relative;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: var(--space-4);

    min-height: 86px;

    padding:
        var(--space-4)
        var(--space-5);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.roadmap-item:hover {
    transform: translateX(4px);

    border-color:
        rgba(96, 165, 250, 0.24);

    background:
        rgba(255, 255, 255, 0.045);
}


/* =========================================================
   106. ROADMAP NODE
   ========================================================= */

.roadmap-node {
    position: relative;
    z-index: 3;

    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    margin-left: -42px;

    border: 2px solid var(--color-border);

    border-radius: 50%;

    background:
        var(--color-bg-card);

    color: var(--color-text-faint);

    font-size: 0.68rem;
    font-weight: var(--font-weight-bold);

    box-shadow:
        0 0 0 5px var(--color-bg);
}

.roadmap-item.completed .roadmap-node {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--color-green-dark),
            var(--color-green)
        );

    border-color:
        rgba(74, 222, 128, 0.45);

    box-shadow:
        0 0 0 5px var(--color-bg),
        0 0 18px rgba(34, 197, 94, 0.25);
}

.roadmap-item.active .roadmap-node {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-purple)
        );

    border-color:
        rgba(96, 165, 250, 0.5);

    box-shadow:
        0 0 0 5px var(--color-bg),
        0 0 22px rgba(59, 130, 246, 0.35);
}

.roadmap-item.locked .roadmap-node {
    opacity: 0.55;
}


/* =========================================================
   107. ROADMAP INFORMATION
   ========================================================= */

.roadmap-info {
    min-width: 0;
}

.roadmap-info h3 {
    margin-bottom: 5px;

    color: var(--color-text);

    font-size: 0.84rem;
    font-weight: var(--font-weight-semibold);
}

.roadmap-info p {
    color: var(--color-text-faint);

    font-size: 0.7rem;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roadmap-item.locked .roadmap-info h3,
.roadmap-item.locked .roadmap-info p {
    opacity: 0.5;
}


/* =========================================================
   108. ROADMAP META
   ========================================================= */

.roadmap-meta {
    display: flex;
    align-items: center;

    gap: var(--space-3);

    margin-top: var(--space-2);
}

.roadmap-meta-item {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    color: var(--color-text-faint);

    font-size: 0.62rem;
}


/* =========================================================
   109. ROADMAP ACTION
   ========================================================= */

.roadmap-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding:
        0
        var(--space-3);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    background:
        rgba(255, 255, 255, 0.025);

    color: var(--color-text-muted);

    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);

    white-space: nowrap;
}

.roadmap-item.active .roadmap-action {
    color: #ffffff;

    border-color:
        rgba(59, 130, 246, 0.35);

    background:
        rgba(59, 130, 246, 0.12);
}

.roadmap-item.completed .roadmap-action {
    color: var(--color-green-light);

    border-color:
        rgba(34, 197, 94, 0.18);

    background:
        rgba(34, 197, 94, 0.06);
}


/* =========================================================
   110. LESSON LIST
   ========================================================= */

.lesson-list {
    display: flex;
    flex-direction: column;

    gap: var(--space-2);
}

.lesson-item {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: var(--space-3);

    padding: var(--space-3);

    border:
        1px solid
        transparent;

    border-radius: var(--radius-md);

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.lesson-item:hover {
    background:
        rgba(255, 255, 255, 0.035);

    border-color:
        var(--color-border);
}


/* =========================================================
   111. LESSON ICON
   ========================================================= */

.lesson-icon {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border-radius: var(--radius-md);

    background:
        rgba(255, 255, 255, 0.045);

    color: var(--color-text-muted);

    font-size: 0.75rem;
}

.lesson-item.completed .lesson-icon {
    color: var(--color-green-light);

    background:
        rgba(34, 197, 94, 0.1);
}

.lesson-item.current .lesson-icon {
    color: var(--color-primary-light);

    background:
        rgba(59, 130, 246, 0.1);
}


/* =========================================================
   112. LESSON INFORMATION
   ========================================================= */

.lesson-info {
    min-width: 0;
}

.lesson-title {
    margin-bottom: 3px;

    color: var(--color-text-soft);

    font-size: 0.74rem;
    font-weight: var(--font-weight-semibold);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-description {
    color: var(--color-text-faint);

    font-size: 0.63rem;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   113. LESSON DURATION
   ========================================================= */

.lesson-duration {
    color: var(--color-text-faint);

    font-size: 0.62rem;

    white-space: nowrap;
}


/* =========================================================
   114. LESSON CHECK
   ========================================================= */

.lesson-check {
    display: grid;
    place-items: center;

    width: 22px;
    height: 22px;

    border: 1px solid var(--color-border);

    border-radius: 50%;

    color: transparent;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.lesson-item.completed .lesson-check {
    color: #ffffff;

    border-color:
        var(--color-green);

    background:
        var(--color-green-dark);
}


/* =========================================================
   115. STUDY STREAK
   ========================================================= */

.streak-card {
    position: relative;

    padding: var(--space-6);

    overflow: hidden;

    border:
        1px solid
        rgba(249, 115, 22, 0.15);

    border-radius: var(--radius-xl);

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(249, 115, 22, 0.14),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(249, 115, 22, 0.055),
            rgba(255, 255, 255, 0.015)
        );
}

.streak-card::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -75px;
    bottom: -75px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(249, 115, 22, 0.13),
            transparent 70%
        );
}


/* =========================================================
   116. STREAK HEADER
   ========================================================= */

.streak-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: var(--space-5);
}

.streak-title {
    display: flex;
    align-items: center;

    gap: var(--space-3);
}

.streak-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: var(--radius-lg);

    background:
        rgba(249, 115, 22, 0.12);

    color: #fb923c;

    font-size: 1.1rem;
}

.streak-title h3 {
    font-size: 0.9rem;
}

.streak-title p {
    margin-top: 3px;

    color: var(--color-text-faint);

    font-size: 0.65rem;
}


/* =========================================================
   117. STREAK NUMBER
   ========================================================= */

.streak-number {
    display: flex;
    align-items: baseline;

    gap: 6px;

    margin-bottom: var(--space-5);
}

.streak-number strong {
    color: #fb923c;

    font-size: 2.5rem;
    font-weight: var(--font-weight-extrabold);

    line-height: 1;

    text-shadow:
        0 0 20px rgba(249, 115, 22, 0.18);
}

.streak-number span {
    color: var(--color-text-muted);

    font-size: 0.7rem;
}


/* =========================================================
   118. STREAK DAYS
   ========================================================= */

.streak-days {
    display: grid;

    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );

    gap: var(--space-2);
}

.streak-day {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 6px;
}

.streak-day-name {
    color: var(--color-text-faint);

    font-size: 0.58rem;

    text-transform: uppercase;
}

.streak-day-box {
    width: 100%;
    aspect-ratio: 1;

    max-width: 30px;

    border:
        1px solid
        var(--color-border);

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.025);
}

.streak-day.active .streak-day-box {
    border-color:
        rgba(249, 115, 22, 0.4);

    background:
        linear-gradient(
            145deg,
            rgba(249, 115, 22, 0.8),
            rgba(234, 88, 12, 0.55)
        );

    box-shadow:
        0 0 12px rgba(249, 115, 22, 0.15);
}

.streak-day.today .streak-day-box {
    border-color:
        #fb923c;

    box-shadow:
        0 0 0 3px rgba(249, 115, 22, 0.08);
}


/* =========================================================
   119. STREAK MESSAGE
   ========================================================= */

.streak-message {
    margin-top: var(--space-5);

    color: var(--color-text-muted);

    font-size: 0.68rem;
    line-height: 1.5;
}


/* =========================================================
   120. ACHIEVEMENTS GRID
   ========================================================= */

.achievements-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: var(--space-3);
}

.achievement {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: var(--space-4);

    min-width: 0;

    text-align: center;

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-lg);

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast);
}

.achievement:hover {
    transform: translateY(-3px);

    border-color:
        rgba(139, 92, 246, 0.25);
}


/* =========================================================
   121. ACHIEVEMENT BADGE
   ========================================================= */

.achievement-badge {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: var(--space-3);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, 0.18),
            rgba(59, 130, 246, 0.08)
        );

    border:
        1px solid
        rgba(139, 92, 246, 0.2);

    color: var(--color-purple-light);

    font-size: 1.1rem;
}

.achievement.locked .achievement-badge {
    filter: grayscale(1);

    opacity: 0.35;

    background:
        rgba(255, 255, 255, 0.035);

    border-color:
        var(--color-border);
}


/* =========================================================
   122. ACHIEVEMENT TEXT
   ========================================================= */

.achievement-name {
    width: 100%;

    margin-bottom: 4px;

    color: var(--color-text-soft);

    font-size: 0.67rem;
    font-weight: var(--font-weight-semibold);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.achievement-description {
    color: var(--color-text-faint);

    font-size: 0.58rem;

    line-height: 1.4;
}


/* =========================================================
   123. ACHIEVEMENT COMPLETION
   ========================================================= */

.achievement-progress {
    width: 100%;

    margin-top: var(--space-3);
}

.achievement-progress .progress-bar {
    height: 4px;
}

.achievement-progress-text {
    display: flex;
    justify-content: space-between;

    margin-bottom: 4px;

    color: var(--color-text-faint);

    font-size: 0.55rem;
}


/* =========================================================
   124. XP PANEL
   ========================================================= */

.xp-panel {
    padding: var(--space-6);

    border:
        1px solid
        rgba(6, 182, 212, 0.15);

    border-radius: var(--radius-xl);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(6, 182, 212, 0.12),
            transparent 40%
        ),
        rgba(255, 255, 255, 0.02);
}

.xp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    margin-bottom: var(--space-5);
}

.xp-title {
    display: flex;
    align-items: center;

    gap: var(--space-3);
}

.xp-icon {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: var(--radius-md);

    color: var(--color-cyan-light);

    background:
        rgba(6, 182, 212, 0.1);
}

.xp-title h3 {
    font-size: 0.88rem;
}

.xp-title p {
    margin-top: 3px;

    color: var(--color-text-faint);

    font-size: 0.62rem;
}

.xp-value {
    color: var(--color-cyan-light);

    font-size: 1.25rem;
    font-weight: var(--font-weight-extrabold);
}


/* =========================================================
   125. XP LEVEL BAR
   ========================================================= */

.xp-level-info {
    display: flex;
    justify-content: space-between;

    margin-bottom: var(--space-2);

    color: var(--color-text-faint);

    font-size: 0.62rem;
}

.xp-progress {
    height: 8px;

    overflow: hidden;

    border-radius: var(--radius-full);

    background:
        rgba(255, 255, 255, 0.055);
}

.xp-progress-fill {
    width: var(--xp-progress, 0%);

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--color-cyan),
            var(--color-primary),
            var(--color-purple)
        );

    box-shadow:
        0 0 15px rgba(6, 182, 212, 0.2);

    transition:
        width 800ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/* =========================================================
   126. SKILL LEVELS
   ========================================================= */

.skill-level-list {
    display: flex;
    flex-direction: column;

    gap: var(--space-4);
}

.skill-level-item {
    display: grid;

    grid-template-columns:
        110px
        minmax(0, 1fr)
        45px;

    align-items: center;

    gap: var(--space-3);
}

.skill-level-name {
    color: var(--color-text-muted);

    font-size: 0.68rem;
    font-weight: var(--font-weight-medium);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-level-value {
    color: var(--color-text-soft);

    font-size: 0.65rem;

    text-align: right;
}


/* =========================================================
   127. SKILL PROGRESS
   ========================================================= */

.skill-progress {
    width: 100%;
    height: 6px;

    overflow: hidden;

    border-radius: var(--radius-full);

    background:
        rgba(255, 255, 255, 0.05);
}

.skill-progress-fill {
    width: var(--skill-progress, 0%);

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-purple)
        );

    transition:
        width 700ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/* =========================================================
   128. DAILY GOAL
   ========================================================= */

.daily-goal {
    padding: var(--space-5);

    border:
        1px solid
        rgba(34, 197, 94, 0.13);

    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(34, 197, 94, 0.055),
            rgba(255, 255, 255, 0.015)
        );
}

.daily-goal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: var(--space-4);
}

.daily-goal-title {
    color: var(--color-text-soft);

    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
}

.daily-goal-target {
    color: var(--color-green-light);

    font-size: 0.68rem;
    font-weight: var(--font-weight-semibold);
}

.daily-goal-progress {
    height: 8px;

    margin-bottom: var(--space-3);

    overflow: hidden;

    border-radius: var(--radius-full);

    background:
        rgba(255, 255, 255, 0.05);
}

.daily-goal-fill {
    width: var(--goal-progress, 0%);

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--color-green-dark),
            var(--color-green-light)
        );
}

.daily-goal-footer {
    display: flex;
    justify-content: space-between;

    color: var(--color-text-faint);

    font-size: 0.6rem;
}


/* =========================================================
   129. CERTIFICATE PREVIEW
   ========================================================= */

.certificate-preview {
    position: relative;

    min-height: 180px;

    padding: var(--space-6);

    overflow: hidden;

    border:
        1px solid
        rgba(250, 204, 21, 0.14);

    border-radius: var(--radius-xl);

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(250, 204, 21, 0.12),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(250, 204, 21, 0.045),
            rgba(255, 255, 255, 0.015)
        );
}

.certificate-preview::before {
    content: "";

    position: absolute;

    inset: 10px;

    border:
        1px solid
        rgba(250, 204, 21, 0.08);

    border-radius: calc(
        var(--radius-xl) - 6px
    );

    pointer-events: none;
}

.certificate-icon {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    margin-bottom: var(--space-4);

    border-radius: 50%;

    color: #fde047;

    background:
        rgba(250, 204, 21, 0.1);

    border:
        1px solid
        rgba(250, 204, 21, 0.16);
}

.certificate-preview h3 {
    position: relative;
    z-index: 2;

    margin-bottom: 5px;

    font-size: 0.88rem;
}

.certificate-preview p {
    position: relative;
    z-index: 2;

    max-width: 430px;

    color: var(--color-text-faint);

    font-size: 0.65rem;
    line-height: 1.5;
}


/* =========================================================
   130. CERTIFICATE BUTTON
   ========================================================= */

.certificate-button {
    position: relative;
    z-index: 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    margin-top: var(--space-4);

    padding:
        0
        var(--space-4);

    border:
        1px solid
        rgba(250, 204, 21, 0.2);

    border-radius: var(--radius-md);

    background:
        rgba(250, 204, 21, 0.07);

    color: #fde047;

    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.certificate-button:hover {
    transform: translateY(-2px);

    background:
        rgba(250, 204, 21, 0.12);
}


/* =========================================================
   131. RECENT ACTIVITY
   ========================================================= */

.activity-list {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.activity-item {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: var(--space-3);

    padding:
        var(--space-3)
        var(--space-2);

    border-radius: var(--radius-md);

    transition:
        background var(--transition-fast);
}

.activity-item:hover {
    background:
        rgba(255, 255, 255, 0.03);
}

.activity-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background:
        rgba(59, 130, 246, 0.09);

    color: var(--color-primary-light);

    font-size: 0.7rem;
}

.activity-content {
    min-width: 0;
}

.activity-content strong {
    display: block;

    margin-bottom: 3px;

    color: var(--color-text-soft);

    font-size: 0.68rem;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-content span {
    display: block;

    color: var(--color-text-faint);

    font-size: 0.58rem;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-time {
    color: var(--color-text-faint);

    font-size: 0.55rem;

    white-space: nowrap;
}


/* =========================================================
   132. ROADMAP RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {

    .learning-roadmap {
        padding: var(--space-5);
    }

    .roadmap-header {
        align-items: flex-start;
    }

    .roadmap-item {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .roadmap-action {
        grid-column: 2;

        justify-self: start;
    }

    .achievements-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* =========================================================
   133. ROADMAP MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .roadmap-track {
        padding-left: 20px;
    }

    .roadmap-track::before {
        left: 4px;
    }

    .roadmap-node {
        width: 28px;
        height: 28px;

        margin-left: -36px;
    }

    .roadmap-item {
        padding: var(--space-3);
    }

    .roadmap-meta {
        flex-wrap: wrap;
    }

    .roadmap-action {
        width: 100%;
    }

    .achievements-grid {
        grid-template-columns: 1fr;
    }

    .skill-level-item {
        grid-template-columns:
            85px
            minmax(0, 1fr)
            40px;
    }
}


/* =========================================================
   134. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-orb,
    .dashboard-status-indicator,
    .course-card,
    .dashboard-content > * {
        animation: none !important;
    }

    .progress-fill,
    .xp-progress-fill,
    .skill-progress-fill {
        transition: none;
    }
}


/* =========================================================
   135. FOCUS ACCESSIBILITY
   ========================================================= */

.roadmap-action:focus-visible,
.roadmap-control:focus-visible,
.filter-button:focus-visible,
.start-course-btn:focus-visible,
.certificate-button:focus-visible {
    outline:
        2px solid
        var(--color-primary-light);

    outline-offset: 3px;
}


/* =========================================================
   136. PRINT-FRIENDLY LEARNING SUMMARY
   ========================================================= */

@media print {

    .learning-roadmap,
    .streak-card,
    .xp-panel,
    .achievement,
    .certificate-preview {
        color: #000000;

        background: #ffffff;

        border-color: #cccccc;

        box-shadow: none;
    }

    .roadmap-track::before {
        background: #cccccc;
    }
}


/* =========================================================
   END OF PART 4
   ========================================================= */
/* =========================================================
   ADOPT SKILL — PART 5
   AI Tutor • Search • Notifications • Interactive UI
   ========================================================= */


/* =========================================================
   137. AI TUTOR CONTAINER
   ========================================================= */

#aiTutorWidget {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 900;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 10px;
}


/* =========================================================
   138. AI TUTOR BUTTON
   ========================================================= */

.ai-tutor-button {
    position: relative;

    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    border:
        1px solid
        rgba(96, 165, 250, 0.35);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #2563eb,
            #7c3aed
        );

    color: #ffffff;

    cursor: pointer;

    box-shadow:
        0 10px 35px
        rgba(37, 99, 235, 0.3),
        0 0 25px
        rgba(124, 58, 237, 0.2);

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.ai-tutor-button:hover {
    transform: translateY(-4px) scale(1.04);

    box-shadow:
        0 14px 40px
        rgba(37, 99, 235, 0.38),
        0 0 35px
        rgba(124, 58, 237, 0.25);
}

.ai-tutor-button:active {
    transform: scale(0.96);
}


/* =========================================================
   139. AI PULSE
   ========================================================= */

.ai-pulse {
    position: absolute;

    inset: -6px;

    border:
        1px solid
        rgba(96, 165, 250, 0.4);

    border-radius: 50%;

    animation:
        aiPulse 2.4s ease-out infinite;

    pointer-events: none;
}

@keyframes aiPulse {

    0% {
        transform: scale(0.85);

        opacity: 0.8;
    }

    70% {
        transform: scale(1.18);

        opacity: 0;
    }

    100% {
        transform: scale(1.18);

        opacity: 0;
    }
}


/* =========================================================
   140. AI TUTOR PANEL
   ========================================================= */

.ai-tutor-panel {
    width: min(
        370px,
        calc(100vw - 30px)
    );

    overflow: hidden;

    border:
        1px solid
        rgba(96, 165, 250, 0.2);

    border-radius: var(--radius-xl);

    background:
        rgba(8, 12, 24, 0.94);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, 0.5),
        0 0 40px
        rgba(59, 130, 246, 0.08);

    transform-origin:
        bottom right;

    animation:
        tutorPanelIn
        240ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

@keyframes tutorPanelIn {

    from {
        opacity: 0;

        transform:
            translateY(15px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   141. AI HEADER
   ========================================================= */

.ai-tutor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        var(--space-4)
        var(--space-5);

    border-bottom:
        1px solid
        var(--color-border);

    background:
        rgba(255, 255, 255, 0.025);
}

.ai-tutor-brand {
    display: flex;
    align-items: center;

    gap: var(--space-3);
}

.ai-tutor-avatar {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #2563eb,
            #7c3aed
        );

    box-shadow:
        0 0 20px
        rgba(59, 130, 246, 0.2);
}

.ai-tutor-name {
    font-size: 0.76rem;
    font-weight: var(--font-weight-bold);
}

.ai-tutor-status {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 3px;

    color: var(--color-green-light);

    font-size: 0.58rem;
}

.ai-tutor-status::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--color-green);

    box-shadow:
        0 0 8px
        rgba(34, 197, 94, 0.55);
}

.ai-tutor-close {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: var(--radius-md);

    color: var(--color-text-faint);

    background:
        transparent;

    transition:
        color var(--transition-fast),
        background var(--transition-fast);
}

.ai-tutor-close:hover {
    color: var(--color-text);

    background:
        rgba(255, 255, 255, 0.06);
}


/* =========================================================
   142. AI CHAT AREA
   ========================================================= */

.ai-chat {
    display: flex;
    flex-direction: column;

    gap: var(--space-3);

    max-height: 310px;

    padding: var(--space-4);

    overflow-y: auto;

    scrollbar-width: thin;
}

.ai-message {
    max-width: 86%;

    padding:
        10px
        12px;

    border-radius:
        12px
        12px
        12px
        4px;

    color: var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.05);

    font-size: 0.68rem;
    line-height: 1.55;
}

.ai-message.user {
    align-self: flex-end;

    border-radius:
        12px
        12px
        4px
        12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.8),
            rgba(124, 58, 237, 0.75)
        );
}


/* =========================================================
   143. AI TYPING INDICATOR
   ========================================================= */

.ai-typing {
    display: flex;
    align-items: center;

    gap: 4px;

    width: fit-content;

    padding:
        10px
        13px;

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.04);
}

.ai-typing span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--color-text-muted);

    animation:
        typingDot
        1.2s
        ease-in-out
        infinite;
}

.ai-typing span:nth-child(2) {
    animation-delay: 150ms;
}

.ai-typing span:nth-child(3) {
    animation-delay: 300ms;
}

@keyframes typingDot {

    0%,
    60%,
    100% {
        opacity: 0.35;

        transform:
            translateY(0);
    }

    30% {
        opacity: 1;

        transform:
            translateY(-3px);
    }
}


/* =========================================================
   144. AI QUICK PROMPTS
   ========================================================= */

.ai-quick-prompts {
    display: flex;

    gap: 6px;

    padding:
        0
        var(--space-4)
        var(--space-3);

    overflow-x: auto;

    scrollbar-width: none;
}

.ai-quick-prompts::-webkit-scrollbar {
    display: none;
}

.ai-quick-prompt {
    flex: 0 0 auto;

    padding:
        7px
        10px;

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-full);

    background:
        rgba(255, 255, 255, 0.025);

    color: var(--color-text-muted);

    font-size: 0.58rem;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.ai-quick-prompt:hover {
    color: var(--color-primary-light);

    border-color:
        rgba(96, 165, 250, 0.25);

    background:
        rgba(59, 130, 246, 0.08);
}


/* =========================================================
   145. AI INPUT
   ========================================================= */

.ai-input-area {
    display: flex;
    align-items: center;

    gap: 7px;

    padding: var(--space-3);

    border-top:
        1px solid
        var(--color-border);
}

.ai-input {
    flex: 1;

    min-width: 0;

    height: 38px;

    padding:
        0
        12px;

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-md);

    outline: none;

    color: var(--color-text);

    background:
        rgba(255, 255, 255, 0.035);

    font-family: inherit;

    font-size: 0.66rem;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.ai-input::placeholder {
    color:
        var(--color-text-faint);
}

.ai-input:focus {
    border-color:
        rgba(96, 165, 250, 0.35);

    background:
        rgba(255, 255, 255, 0.05);
}

.ai-send {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius: var(--radius-md);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast);
}

.ai-send:hover {
    transform: translateY(-2px);
}

.ai-send:active {
    transform: scale(0.94);
}


/* =========================================================
   146. GLOBAL SEARCH
   ========================================================= */

.global-search {
    position: relative;

    width: min(
        420px,
        100%
    );
}

.global-search-icon {
    position: absolute;

    left: 13px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(--color-text-faint);

    pointer-events: none;
}

.global-search-input {
    width: 100%;

    height: 40px;

    padding:
        0
        60px
        0
        38px;

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-lg);

    outline: none;

    color: var(--color-text);

    background:
        rgba(255, 255, 255, 0.025);

    font-family: inherit;

    font-size: 0.68rem;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.global-search-input::placeholder {
    color:
        var(--color-text-faint);
}

.global-search-input:focus {
    border-color:
        rgba(96, 165, 250, 0.35);

    background:
        rgba(255, 255, 255, 0.045);

    box-shadow:
        0 0 0 3px
        rgba(59, 130, 246, 0.07);
}

.search-shortcut {
    position: absolute;

    right: 9px;
    top: 50%;

    transform:
        translateY(-50%);

    padding:
        3px
        6px;

    border:
        1px solid
        var(--color-border);

    border-radius: 5px;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.025);

    font-size: 0.53rem;
}


/* =========================================================
   147. SEARCH RESULTS
   ========================================================= */

.search-results {
    position: absolute;

    top: calc(100% + 8px);

    left: 0;
    right: 0;

    z-index: 800;

    max-height: 350px;

    overflow-y: auto;

    padding: 6px;

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-lg);

    background:
        rgba(8, 12, 24, 0.97);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.4);
}

.search-result {
    display: flex;
    align-items: center;

    gap: var(--space-3);

    padding: 10px;

    border-radius: var(--radius-md);

    cursor: pointer;

    transition:
        background var(--transition-fast);
}

.search-result:hover {
    background:
        rgba(255, 255, 255, 0.05);
}

.search-result-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border-radius: 9px;

    background:
        rgba(59, 130, 246, 0.08);

    color:
        var(--color-primary-light);
}

.search-result-content {
    min-width: 0;
}

.search-result-title {
    margin-bottom: 3px;

    color:
        var(--color-text-soft);

    font-size: 0.66rem;
    font-weight: var(--font-weight-semibold);
}

.search-result-meta {
    color:
        var(--color-text-faint);

    font-size: 0.56rem;
}


/* =========================================================
   148. SEARCH EMPTY STATE
   ========================================================= */

.search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        var(--space-8)
        var(--space-4);

    text-align: center;
}

.search-empty-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    margin-bottom: var(--space-3);

    border-radius: 50%;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.04);
}

.search-empty-title {
    margin-bottom: 4px;

    color:
        var(--color-text-soft);

    font-size: 0.7rem;
}

.search-empty-description {
    color:
        var(--color-text-faint);

    font-size: 0.59rem;
}


/* =========================================================
   149. NOTIFICATION CENTER
   ========================================================= */

.notification-wrapper {
    position: relative;
}

.notification-button {
    position: relative;

    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-md);

    color:
        var(--color-text-muted);

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.notification-button:hover {
    color:
        var(--color-text);

    background:
        rgba(255, 255, 255, 0.05);
}

.notification-badge {
    position: absolute;

    top: -3px;
    right: -3px;

    display: grid;
    place-items: center;

    min-width: 15px;
    height: 15px;

    padding: 0 4px;

    border:
        2px solid
        var(--color-bg);

    border-radius: var(--radius-full);

    color: #ffffff;

    background:
        #ef4444;

    font-size: 0.46rem;
    font-weight: var(--font-weight-bold);
}


/* =========================================================
   150. NOTIFICATION PANEL
   ========================================================= */

.notification-panel {
    position: absolute;

    top: calc(100% + 10px);

    right: 0;

    width: min(
        350px,
        calc(100vw - 24px)
    );

    max-height: 430px;

    overflow-y: auto;

    padding: 6px;

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-lg);

    background:
        rgba(8, 12, 24, 0.97);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.45);

    transform-origin:
        top right;

    animation:
        notificationIn
        180ms
        ease-out;
}

@keyframes notificationIn {

    from {
        opacity: 0;

        transform:
            translateY(-6px)
            scale(0.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   151. NOTIFICATION HEADER
   ========================================================= */

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        10px
        10px;

    border-bottom:
        1px solid
        var(--color-border);
}

.notification-header h3 {
    font-size: 0.72rem;
}

.notification-mark-read {
    color:
        var(--color-primary-light);

    font-size: 0.57rem;

    cursor: pointer;
}

.notification-mark-read:hover {
    text-decoration: underline;
}


/* =========================================================
   152. NOTIFICATION ITEM
   ========================================================= */

.notification-item {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    gap: 10px;

    padding: 10px;

    border-radius: var(--radius-md);

    transition:
        background var(--transition-fast);
}

.notification-item:hover {
    background:
        rgba(255, 255, 255, 0.035);
}

.notification-item.unread {
    background:
        rgba(59, 130, 246, 0.035);
}

.notification-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 10px;

    color:
        var(--color-primary-light);

    background:
        rgba(59, 130, 246, 0.09);
}

.notification-content {
    min-width: 0;
}

.notification-content strong {
    display: block;

    margin-bottom: 3px;

    color:
        var(--color-text-soft);

    font-size: 0.64rem;
}

.notification-content p {
    margin-bottom: 4px;

    color:
        var(--color-text-faint);

    font-size: 0.57rem;

    line-height: 1.4;
}

.notification-time {
    color:
        var(--color-text-faint);

    font-size: 0.51rem;
}


/* =========================================================
   153. TOAST SYSTEM
   ========================================================= */

.toast-container {
    position: fixed;

    top: 20px;
    right: 20px;

    z-index: 2000;

    display: flex;
    flex-direction: column;

    gap: 8px;

    width: min(
        360px,
        calc(100vw - 30px)
    );
}

.toast {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: start;

    gap: 10px;

    padding: 12px;

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-lg);

    background:
        rgba(8, 12, 24, 0.94);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.35);

    animation:
        toastIn
        250ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

@keyframes toastIn {

    from {
        opacity: 0;

        transform:
            translateX(30px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}

.toast.success {
    border-color:
        rgba(34, 197, 94, 0.22);
}

.toast.warning {
    border-color:
        rgba(245, 158, 11, 0.22);
}

.toast.error {
    border-color:
        rgba(239, 68, 68, 0.22);
}

.toast-icon {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    border-radius: 9px;

    color:
        var(--color-primary-light);

    background:
        rgba(59, 130, 246, 0.09);
}

.toast.success .toast-icon {
    color:
        var(--color-green-light);

    background:
        rgba(34, 197, 94, 0.09);
}

.toast.warning .toast-icon {
    color:
        #fbbf24;

    background:
        rgba(245, 158, 11, 0.09);
}

.toast.error .toast-icon {
    color:
        #f87171;

    background:
        rgba(239, 68, 68, 0.09);
}

.toast-title {
    margin-bottom: 3px;

    color:
        var(--color-text-soft);

    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
}

.toast-message {
    color:
        var(--color-text-faint);

    font-size: 0.57rem;

    line-height: 1.4;
}

.toast-close {
    color:
        var(--color-text-faint);

    font-size: 0.7rem;

    cursor: pointer;
}


/* =========================================================
   154. MODAL BACKDROP
   ========================================================= */

.modal-backdrop {
    position: fixed;

    inset: 0;

    z-index: 1500;

    display: grid;
    place-items: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, 0.7);

    backdrop-filter:
        blur(7px);

    animation:
        backdropIn
        180ms
        ease-out;
}

@keyframes backdropIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================
   155. MODAL
   ========================================================= */

.modal {
    width: min(
        600px,
        100%
    );

    max-height:
        calc(100vh - 40px);

    overflow-y: auto;

    border:
        1px solid
        rgba(96, 165, 250, 0.18);

    border-radius: var(--radius-xl);

    background:
        rgba(9, 13, 25, 0.97);

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, 0.6);

    animation:
        modalIn
        220ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

@keyframes modalIn {

    from {
        opacity: 0;

        transform:
            translateY(15px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   156. MODAL HEADER
   ========================================================= */

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        var(--space-5)
        var(--space-6);

    border-bottom:
        1px solid
        var(--color-border);
}

.modal-header h2 {
    font-size: 0.95rem;
}

.modal-close {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: var(--radius-md);

    color:
        var(--color-text-faint);

    background:
        transparent;

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.modal-close:hover {
    color:
        var(--color-text);

    background:
        rgba(255, 255, 255, 0.06);
}


/* =========================================================
   157. MODAL BODY
   ========================================================= */

.modal-body {
    padding:
        var(--space-6);
}

.modal-body p {
    color:
        var(--color-text-muted);

    font-size: 0.7rem;

    line-height: 1.65;
}


/* =========================================================
   158. MODAL FOOTER
   ========================================================= */

.modal-footer {
    display: flex;
    justify-content: flex-end;

    gap: var(--space-2);

    padding:
        var(--space-4)
        var(--space-6);

    border-top:
        1px solid
        var(--color-border);
}


/* =========================================================
   159. BUTTON SYSTEM
   ========================================================= */

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    gap: 7px;

    padding:
        0
        var(--space-4);

    border-radius: var(--radius-md);

    font-family: inherit;

    font-size: 0.64rem;
    font-weight: var(--font-weight-semibold);

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn-primary {
    border:
        1px solid
        rgba(96, 165, 250, 0.3);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );
}

.btn-secondary {
    border:
        1px solid
        var(--color-border);

    color:
        var(--color-text-muted);

    background:
        rgba(255, 255, 255, 0.03);
}

.btn-danger {
    border:
        1px solid
        rgba(239, 68, 68, 0.2);

    color:
        #f87171;

    background:
        rgba(239, 68, 68, 0.06);
}

.btn-success {
    border:
        1px solid
        rgba(34, 197, 94, 0.2);

    color:
        var(--color-green-light);

    background:
        rgba(34, 197, 94, 0.06);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.btn-success:hover {
    transform:
        translateY(-2px);
}

.btn-primary:hover {
    box-shadow:
        0 8px 25px
        rgba(59, 130, 246, 0.2);
}

.btn-secondary:hover {
    background:
        rgba(255, 255, 255, 0.06);
}


/* =========================================================
   160. MOBILE AI SYSTEM
   ========================================================= */

@media (max-width: 600px) {

    #aiTutorWidget {
        right: 15px;
        bottom: 15px;
    }

    .ai-tutor-button {
        width: 52px;
        height: 52px;
    }

    .ai-tutor-panel {
        width:
            calc(100vw - 30px);
    }

    .ai-chat {
        max-height: 260px;
    }

    .global-search {
        width: 100%;
    }

    .search-shortcut {
        display: none;
    }

    .global-search-input {
        padding-right: 12px;
    }

    .toast-container {
        top: 12px;
        right: 15px;
        left: 15px;

        width: auto;
    }
}


/* =========================================================
   161. TOUCH DEVICES
   ========================================================= */

@media (hover: none) {

    .ai-tutor-button:hover,
    .search-result:hover,
    .notification-item:hover,
    .btn-primary:hover,
    .btn-secondary:hover {
        transform: none;
    }
}


/* =========================================================
   162. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ai-pulse,
    .ai-tutor-panel,
    .notification-panel,
    .toast,
    .modal,
    .ai-typing span {
        animation: none !important;
    }
}


/* =========================================================
   163. AI FOCUS STATES
   ========================================================= */

.ai-tutor-button:focus-visible,
.ai-tutor-close:focus-visible,
.ai-send:focus-visible,
.ai-quick-prompt:focus-visible {
    outline:
        2px solid
        var(--color-primary-light);

    outline-offset: 3px;
}


/* =========================================================
   164. HIDDEN STATE HELPERS
   ========================================================= */

.is-hidden,
[hidden] {
    display: none !important;
}

.is-visible {
    display: block;
}


/* =========================================================
   165. LOADING STATE
   ========================================================= */

.is-loading {
    position: relative;

    pointer-events: none;

    color: transparent !important;
}

.is-loading::after {
    content: "";

    position: absolute;

    width: 16px;
    height: 16px;

    border:
        2px solid
        rgba(255, 255, 255, 0.25);

    border-top-color:
        #ffffff;

    border-radius: 50%;

    animation:
        buttonSpin
        700ms
        linear
        infinite;
}

@keyframes buttonSpin {

    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   166. SKELETON LOADING
   ========================================================= */

.skeleton {
    position: relative;

    overflow: hidden;

    border-radius: 6px;

    background:
        rgba(255, 255, 255, 0.055);
}

.skeleton::after {
    content: "";

    position: absolute;

    inset: 0;

    transform:
        translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.06),
            transparent
        );

    animation:
        skeletonShimmer
        1.5s
        infinite;
}

@keyframes skeletonShimmer {

    100% {
        transform:
            translateX(100%);
    }
}


/* =========================================================
   167. PAGE SCROLL PROGRESS
   ========================================================= */

.page-scroll-progress {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 3000;

    width: var(--scroll-progress, 0%);

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-purple),
            var(--color-cyan)
        );

    box-shadow:
        0 0 10px
        rgba(59, 130, 246, 0.45);

    pointer-events: none;
}


/* =========================================================
   168. BACK TO TOP
   ========================================================= */

.back-to-top {
    position: fixed;

    right: 22px;
    bottom: 95px;

    z-index: 700;

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border:
        1px solid
        var(--color-border);

    border-radius: 50%;

    color:
        var(--color-text-muted);

    background:
        rgba(8, 12, 24, 0.88);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.25);

    transition:
        transform var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.back-to-top:hover {
    transform:
        translateY(-3px);

    color:
        var(--color-primary-light);

    border-color:
        rgba(96, 165, 250, 0.25);
}


/* =========================================================
   169. CONNECTION STATUS
   ========================================================= */

.connection-status {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding:
        5px
        8px;

    border:
        1px solid
        rgba(34, 197, 94, 0.14);

    border-radius: var(--radius-full);

    color:
        var(--color-green-light);

    background:
        rgba(34, 197, 94, 0.05);

    font-size: 0.55rem;
}

.connection-status::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--color-green);

    box-shadow:
        0 0 8px
        rgba(34, 197, 94, 0.55);
}

.connection-status.offline {
    color:
        #f87171;

    border-color:
        rgba(239, 68, 68, 0.15);

    background:
        rgba(239, 68, 68, 0.05);
}

.connection-status.offline::before {
    background:
        #ef4444;

    box-shadow:
        0 0 8px
        rgba(239, 68, 68, 0.45);
}


/* =========================================================
   170. END OF PART 5
   ========================================================= */
/* =========================================================
   ADOPT SKILL — PART 6
   Courses • Progress • Statistics • Certificates
   ========================================================= */


/* =========================================================
   171. COURSE GRID
   ========================================================= */

.course-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                250px,
                1fr
            )
        );

    gap: var(--space-5);

    width: 100%;
}


/* =========================================================
   172. COURSE CARD
   ========================================================= */

.course-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 320px;

    overflow: hidden;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        var(--shadow-card);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        background var(--transition-normal);
}

.course-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(96, 165, 250, 0.25);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 18px 55px
        rgba(0, 0, 0, 0.28),
        0 0 30px
        rgba(59, 130, 246, 0.08);
}


/* =========================================================
   173. COURSE CARD GLOW
   ========================================================= */

.course-card::before {
    content: "";

    position: absolute;

    top: -90px;
    right: -90px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        rgba(59, 130, 246, 0.09);

    filter:
        blur(35px);

    pointer-events: none;

    transition:
        opacity var(--transition-normal);
}

.course-card:hover::before {
    opacity: 1.4;
}


/* =========================================================
   174. COURSE COVER
   ========================================================= */

.course-cover {
    position: relative;

    display: flex;
    align-items: flex-end;

    min-height: 145px;

    padding: var(--space-5);

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.28),
            rgba(124, 58, 237, 0.22)
        );
}

.course-cover::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(255, 255, 255, 0.12),
            transparent 32%
        );

    pointer-events: none;
}


/* =========================================================
   175. COURSE CATEGORY COLORS
   ========================================================= */

.course-card.python .course-cover {
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.35),
            rgba(234, 179, 8, 0.16)
        );
}

.course-card.java .course-cover {
    background:
        linear-gradient(
            135deg,
            rgba(220, 38, 38, 0.3),
            rgba(124, 58, 237, 0.18)
        );
}

.course-card.cpp .course-cover {
    background:
        linear-gradient(
            135deg,
            rgba(30, 64, 175, 0.35),
            rgba(6, 182, 212, 0.15)
        );
}

.course-card.ai .course-cover {
    background:
        linear-gradient(
            135deg,
            rgba(124, 58, 237, 0.35),
            rgba(16, 185, 129, 0.15)
        );
}

.course-card.web .course-cover {
    background:
        linear-gradient(
            135deg,
            rgba(249, 115, 22, 0.3),
            rgba(37, 99, 235, 0.2)
        );
}


/* =========================================================
   176. COURSE ICON
   ========================================================= */

.course-icon {
    position: relative;

    z-index: 2;

    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius: 15px;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.09);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.15);
}

.course-icon svg {
    width: 25px;
    height: 25px;
}


/* =========================================================
   177. COURSE LEVEL BADGE
   ========================================================= */

.course-level {
    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 3;

    padding:
        5px
        8px;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: var(--radius-full);

    color:
        rgba(255, 255, 255, 0.82);

    background:
        rgba(0, 0, 0, 0.22);

    backdrop-filter:
        blur(8px);

    font-size: 0.52rem;
    font-weight: var(--font-weight-semibold);

    text-transform: uppercase;

    letter-spacing:
        0.05em;
}


/* =========================================================
   178. COURSE BODY
   ========================================================= */

.course-body {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: var(--space-5);
}

.course-title {
    margin-bottom: 8px;

    color:
        var(--color-text);

    font-size: 0.88rem;
    font-weight: var(--font-weight-bold);

    line-height: 1.3;
}

.course-description {
    display: -webkit-box;

    margin-bottom: var(--space-4);

    overflow: hidden;

    color:
        var(--color-text-faint);

    font-size: 0.61rem;

    line-height: 1.55;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


/* =========================================================
   179. COURSE META
   ========================================================= */

.course-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: var(--space-4);
}

.course-meta-item {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color:
        var(--color-text-faint);

    font-size: 0.55rem;
}

.course-meta-item svg {
    color:
        var(--color-text-muted);
}


/* =========================================================
   180. COURSE FOOTER
   ========================================================= */

.course-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-3);

    margin-top: auto;

    padding-top: var(--space-4);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.05);
}


/* =========================================================
   181. START COURSE BUTTON
   ========================================================= */

.start-course-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 35px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(96, 165, 250, 0.22);

    border-radius: var(--radius-md);

    color:
        #ffffff;

    background:
        rgba(59, 130, 246, 0.12);

    font-family: inherit;

    font-size: 0.58rem;
    font-weight: var(--font-weight-semibold);

    cursor: pointer;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.start-course-btn:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(96, 165, 250, 0.38);

    background:
        rgba(59, 130, 246, 0.2);
}


/* =========================================================
   182. COURSE PROGRESS
   ========================================================= */

.course-progress {
    display: flex;
    flex-direction: column;

    gap: 6px;

    margin-top: auto;
}

.course-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color:
        var(--color-text-faint);

    font-size: 0.52rem;
}

.course-progress-value {
    color:
        var(--color-primary-light);

    font-weight: var(--font-weight-semibold);
}

.progress-track {
    position: relative;

    width: 100%;
    height: 5px;

    overflow: hidden;

    border-radius:
        var(--radius-full);

    background:
        rgba(255, 255, 255, 0.07);
}

.progress-fill {
    height: 100%;

    width: var(--progress, 0%);

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-purple)
        );

    box-shadow:
        0 0 12px
        rgba(59, 130, 246, 0.3);

    transition:
        width 700ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/* =========================================================
   183. COURSE COMPLETED
   ========================================================= */

.course-card.completed {
    border-color:
        rgba(34, 197, 94, 0.18);
}

.course-card.completed .progress-fill {
    background:
        linear-gradient(
            90deg,
            #16a34a,
            #22c55e
        );

    box-shadow:
        0 0 12px
        rgba(34, 197, 94, 0.25);
}

.course-completed-badge {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color:
        var(--color-green-light);

    font-size: 0.54rem;
    font-weight: var(--font-weight-semibold);
}


/* =========================================================
   184. STATS GRID
   ========================================================= */

.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                180px,
                1fr
            )
        );

    gap: var(--space-4);
}


/* =========================================================
   185. STAT CARD
   ========================================================= */

.stat-card {
    position: relative;

    min-width: 0;

    padding: var(--space-5);

    overflow: hidden;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        background var(--transition-normal);
}

.stat-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(96, 165, 250, 0.2);

    background:
        rgba(255, 255, 255, 0.04);
}

.stat-card::after {
    content: "";

    position: absolute;

    right: -35px;
    bottom: -35px;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background:
        rgba(59, 130, 246, 0.08);

    filter:
        blur(25px);

    pointer-events: none;
}


/* =========================================================
   186. STAT HEADER
   ========================================================= */

.stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: var(--space-4);
}

.stat-label {
    color:
        var(--color-text-faint);

    font-size: 0.59rem;
}

.stat-icon {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    border-radius: 9px;

    color:
        var(--color-primary-light);

    background:
        rgba(59, 130, 246, 0.08);
}


/* =========================================================
   187. STAT VALUE
   ========================================================= */

.stat-value {
    margin-bottom: 7px;

    color:
        var(--color-text);

    font-size: 1.45rem;
    font-weight: var(--font-weight-bold);

    line-height: 1;
}

.stat-change {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    color:
        var(--color-green-light);

    font-size: 0.54rem;
}

.stat-change.negative {
    color:
        #f87171;
}


/* =========================================================
   188. DASHBOARD WELCOME
   ========================================================= */

.welcome-panel {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-6);

    min-height: 190px;

    padding:
        var(--space-8);

    overflow: hidden;

    border:
        1px solid
        rgba(96, 165, 250, 0.16);

    border-radius:
        var(--radius-xl);

    background:
        linear-gradient(
            120deg,
            rgba(37, 99, 235, 0.12),
            rgba(124, 58, 237, 0.07),
            rgba(8, 12, 24, 0.5)
        );
}

.welcome-panel::before {
    content: "";

    position: absolute;

    top: -120px;
    right: 12%;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        rgba(59, 130, 246, 0.09);

    filter:
        blur(50px);

    pointer-events: none;
}

.welcome-content {
    position: relative;

    z-index: 2;

    max-width: 620px;
}

.welcome-eyebrow {
    margin-bottom: 8px;

    color:
        var(--color-primary-light);

    font-size: 0.56rem;
    font-weight: var(--font-weight-bold);

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}

.welcome-title {
    margin-bottom: 10px;

    color:
        var(--color-text);

    font-size:
        clamp(
            1.25rem,
            3vw,
            2rem
        );

    font-weight:
        var(--font-weight-bold);

    line-height: 1.15;
}

.welcome-description {
    max-width: 550px;

    color:
        var(--color-text-muted);

    font-size: 0.66rem;

    line-height: 1.65;
}


/* =========================================================
   189. WELCOME ACTIONS
   ========================================================= */

.welcome-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: var(--space-5);
}

.welcome-action {
    display: inline-flex;
    align-items: center;

    min-height: 36px;

    gap: 7px;

    padding:
        0
        13px;

    border-radius: var(--radius-md);

    font-size: 0.58rem;
    font-weight: var(--font-weight-semibold);

    transition:
        transform var(--transition-fast),
        background var(--transition-fast);
}

.welcome-action.primary {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );
}

.welcome-action.secondary {
    border:
        1px solid
        var(--color-border);

    color:
        var(--color-text-muted);

    background:
        rgba(255, 255, 255, 0.025);
}

.welcome-action:hover {
    transform:
        translateY(-2px);
}


/* =========================================================
   190. LEARNING STREAK
   ========================================================= */

.streak-card {
    display: flex;
    align-items: center;

    gap: var(--space-4);

    padding:
        var(--space-5);

    border:
        1px solid
        rgba(245, 158, 11, 0.15);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            135deg,
            rgba(245, 158, 11, 0.07),
            rgba(255, 255, 255, 0.02)
        );
}

.streak-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    border-radius: 14px;

    color:
        #fbbf24;

    background:
        rgba(245, 158, 11, 0.1);

    box-shadow:
        0 0 25px
        rgba(245, 158, 11, 0.08);
}

.streak-value {
    margin-bottom: 4px;

    color:
        var(--color-text);

    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
}

.streak-label {
    color:
        var(--color-text-faint);

    font-size: 0.56rem;
}


/* =========================================================
   191. WEEKLY ACTIVITY
   ========================================================= */

.activity-card {
    padding: var(--space-6);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        rgba(255, 255, 255, 0.025);
}

.activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: var(--space-6);
}

.activity-title {
    color:
        var(--color-text-soft);

    font-size: 0.76rem;
    font-weight: var(--font-weight-semibold);
}

.activity-period {
    color:
        var(--color-text-faint);

    font-size: 0.55rem;
}


/* =========================================================
   192. ACTIVITY CHART
   ========================================================= */

.activity-chart {
    display: grid;

    grid-template-columns:
        repeat(
            7,
            minmax(
                0,
                1fr
            )
        );

    align-items: end;

    gap: 10px;

    height: 170px;
}

.activity-day {
    display: flex;
    flex-direction: column;
    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    height: 100%;
}

.activity-bar-area {
    display: flex;
    align-items: flex-end;

    width: 100%;
    height: 130px;
}

.activity-bar {
    width: 100%;

    height:
        var(--activity, 30%);

    min-height: 5px;

    border-radius:
        7px
        7px
        3px
        3px;

    background:
        linear-gradient(
            180deg,
            var(--color-primary-light),
            var(--color-primary)
        );

    box-shadow:
        0 0 15px
        rgba(59, 130, 246, 0.14);

    transition:
        height 600ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.activity-day:hover .activity-bar {
    background:
        linear-gradient(
            180deg,
            #93c5fd,
            #2563eb
        );
}

.activity-label {
    color:
        var(--color-text-faint);

    font-size: 0.52rem;
}

.activity-hours {
    color:
        var(--color-text-muted);

    font-size: 0.52rem;
}


/* =========================================================
   193. CERTIFICATE GRID
   ========================================================= */

.certificate-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                280px,
                1fr
            )
        );

    gap: var(--space-5);
}


/* =========================================================
   194. CERTIFICATE CARD
   ========================================================= */

.certificate-card {
    position: relative;

    min-height: 190px;

    padding: var(--space-6);

    overflow: hidden;

    border:
        1px solid
        rgba(96, 165, 250, 0.14);

    border-radius:
        var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(59, 130, 246, 0.08),
            rgba(255, 255, 255, 0.025)
        );

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal);
}

.certificate-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(96, 165, 250, 0.28);
}

.certificate-card::after {
    content: "";

    position: absolute;

    right: -45px;
    bottom: -45px;

    width: 140px;
    height: 140px;

    border-radius: 50%;

    background:
        rgba(124, 58, 237, 0.1);

    filter:
        blur(35px);
}


/* =========================================================
   195. CERTIFICATE ICON
   ========================================================= */

.certificate-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: var(--space-4);

    border-radius: 14px;

    color:
        #c4b5fd;

    background:
        rgba(124, 58, 237, 0.1);

    box-shadow:
        0 0 25px
        rgba(124, 58, 237, 0.08);
}

.certificate-title {
    margin-bottom: 6px;

    color:
        var(--color-text);

    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
}

.certificate-description {
    margin-bottom: var(--space-4);

    color:
        var(--color-text-faint);

    font-size: 0.59rem;

    line-height: 1.5;
}

.certificate-date {
    color:
        var(--color-text-faint);

    font-size: 0.52rem;
}


/* =========================================================
   196. CERTIFICATE ACTIONS
   ========================================================= */

.certificate-actions {
    position: relative;

    z-index: 2;

    display: flex;

    gap: 7px;

    margin-top: var(--space-4);
}

.certificate-action {
    display: inline-flex;
    align-items: center;

    min-height: 32px;

    gap: 6px;

    padding:
        0
        10px;

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-md);

    color:
        var(--color-text-muted);

    background:
        rgba(255, 255, 255, 0.025);

    font-size: 0.54rem;

    cursor: pointer;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.certificate-action:hover {
    transform:
        translateY(-2px);

    color:
        var(--color-text);

    background:
        rgba(255, 255, 255, 0.06);
}


/* =========================================================
   197. COURSE FILTER BAR
   ========================================================= */

.course-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    margin-bottom: var(--space-5);
}

.course-filters {
    display: flex;

    gap: 6px;

    overflow-x: auto;

    scrollbar-width: none;
}

.course-filters::-webkit-scrollbar {
    display: none;
}

.course-filter {
    flex: 0 0 auto;

    min-height: 32px;

    padding:
        0
        11px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-full);

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.02);

    font-size: 0.56rem;

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.course-filter:hover {
    color:
        var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.05);
}

.course-filter.active {
    color:
        #ffffff;

    border-color:
        rgba(96, 165, 250, 0.25);

    background:
        rgba(59, 130, 246, 0.13);
}


/* =========================================================
   198. EMPTY COURSE STATE
   ========================================================= */

.course-empty {
    display: flex;
    flex-direction: column;
    align-items: center;

    justify-content: center;

    min-height: 280px;

    padding: var(--space-8);

    border:
        1px dashed
        rgba(255, 255, 255, 0.1);

    border-radius:
        var(--radius-lg);

    text-align: center;
}

.course-empty-icon {
    display: grid;
    place-items: center;

    width: 55px;
    height: 55px;

    margin-bottom: var(--space-4);

    border-radius: 16px;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.04);
}

.course-empty-title {
    margin-bottom: 5px;

    color:
        var(--color-text-soft);

    font-size: 0.75rem;
}

.course-empty-description {
    max-width: 350px;

    color:
        var(--color-text-faint);

    font-size: 0.58rem;

    line-height: 1.55;
}


/* =========================================================
   199. RESPONSIVE DASHBOARD
   ========================================================= */

@media (max-width: 900px) {

    .welcome-panel {
        align-items: flex-start;

        flex-direction: column;

        min-height: auto;

        padding:
            var(--space-6);
    }

    .welcome-actions {
        margin-top: var(--space-4);
    }

    .activity-chart {
        height: 150px;
    }

    .activity-bar-area {
        height: 115px;
    }
}


/* =========================================================
   200. MOBILE COURSE LAYOUT
   ========================================================= */

@media (max-width: 600px) {

    .course-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .stat-card {
        padding: var(--space-4);
    }

    .stat-value {
        font-size: 1.2rem;
    }

    .course-filter-bar {
        align-items: flex-start;

        flex-direction: column;
    }

    .course-filters {
        width: 100%;
    }

    .certificate-grid {
        grid-template-columns: 1fr;
    }

    .activity-card {
        padding: var(--space-4);
    }

    .activity-chart {
        gap: 5px;
    }

    .welcome-panel {
        padding: var(--space-5);
    }

    .welcome-title {
        font-size: 1.35rem;
    }
}


/* =========================================================
   201. VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 380px) {

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .course-card {
        min-height: 300px;
    }

    .course-cover {
        min-height: 125px;
    }

    .welcome-actions {
        flex-direction: column;
    }

    .welcome-action {
        width: 100%;
    }
}


/* =========================================================
   202. PRINT CERTIFICATE
   ========================================================= */

@media print {

    body {
        background: #ffffff !important;

        color: #111111 !important;
    }

    .certificate-card {
        border:
            1px solid
            #cccccc;

        background:
            #ffffff;

        color: #111111;

        box-shadow: none;
    }

    .certificate-card * {
        color:
            #111111 !important;
    }

    .certificate-actions,
    .sidebar,
    .topbar,
    #aiTutorWidget,
    .toast-container,
    .back-to-top {
        display: none !important;
    }
}


/* =========================================================
   203. END OF PART 6
   ========================================================= */
/* =========================================================
   ADOPT SKILL — PART 7
   Navigation • Sidebar • Search • Notifications • Profile
   ========================================================= */


/* =========================================================
   204. SIDEBAR BASE
   ========================================================= */

.sidebar {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 1000;

    display: flex;
    flex-direction: column;

    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;

    padding:
        var(--space-5)
        var(--space-4);

    overflow-y: auto;
    overflow-x: hidden;

    border-right:
        1px solid
        var(--color-border);

    background:
        rgba(7, 11, 20, 0.88);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    scrollbar-width: thin;

    scrollbar-color:
        rgba(255, 255, 255, 0.1)
        transparent;

    transition:
        transform var(--transition-normal),
        width var(--transition-normal);
}


/* =========================================================
   205. SIDEBAR SCROLLBAR
   ========================================================= */

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.1);
}


/* =========================================================
   206. BRAND
   ========================================================= */

.sidebar-brand {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 45px;

    margin-bottom: var(--space-7);

    padding:
        0
        4px;

    text-decoration: none;
}

.brand-mark {
    position: relative;

    display: grid;
    place-items: center;

    width: 35px;
    height: 35px;

    flex-shrink: 0;

    border-radius: 11px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    box-shadow:
        0 0 25px
        rgba(59, 130, 246, 0.22);
}

.brand-mark::after {
    content: "";

    position: absolute;

    inset: 2px;

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    border-radius: 9px;
}

.brand-name {
    color:
        var(--color-text);

    font-size: 0.86rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        -0.02em;
}

.brand-name span {
    color:
        var(--color-primary-light);
}


/* =========================================================
   207. SIDEBAR SECTION
   ========================================================= */

.sidebar-section {
    margin-bottom: var(--space-6);
}

.sidebar-section-title {
    margin:
        0
        0
        8px
        10px;

    color:
        rgba(148, 163, 184, 0.55);

    font-size: 0.48rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


/* =========================================================
   208. NAVIGATION LIST
   ========================================================= */

.sidebar-nav {
    display: flex;

    flex-direction: column;

    gap: 3px;

    margin: 0;

    padding: 0;

    list-style: none;
}

.sidebar-nav-item {
    position: relative;
}

.sidebar-nav-link {
    position: relative;

    display: flex;
    align-items: center;

    gap: 11px;

    width: 100%;

    min-height: 40px;

    padding:
        0
        11px;

    border:
        1px solid
        transparent;

    border-radius:
        var(--radius-md);

    color:
        var(--color-text-faint);

    background:
        transparent;

    text-decoration: none;

    font-size: 0.6rem;

    font-weight:
        var(--font-weight-medium);

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.sidebar-nav-link svg {
    width: 17px;
    height: 17px;

    flex-shrink: 0;

    opacity: 0.75;

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

.sidebar-nav-link:hover {
    color:
        var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.035);
}

.sidebar-nav-link:hover svg {
    opacity: 1;

    transform:
        scale(1.05);
}


/* =========================================================
   209. ACTIVE NAVIGATION
   ========================================================= */

.sidebar-nav-link.active {
    color:
        #ffffff;

    border-color:
        rgba(96, 165, 250, 0.12);

    background:
        linear-gradient(
            90deg,
            rgba(59, 130, 246, 0.13),
            rgba(124, 58, 237, 0.055)
        );
}

.sidebar-nav-link.active::before {
    content: "";

    position: absolute;

    left: -1px;

    top: 8px;
    bottom: 8px;

    width: 3px;

    border-radius:
        0
        4px
        4px
        0;

    background:
        linear-gradient(
            180deg,
            #60a5fa,
            #8b5cf6
        );

    box-shadow:
        0 0 12px
        rgba(96, 165, 250, 0.35);
}

.sidebar-nav-link.active svg {
    color:
        var(--color-primary-light);

    opacity: 1;
}


/* =========================================================
   210. NAVIGATION BADGE
   ========================================================= */

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 18px;
    height: 17px;

    margin-left: auto;

    padding:
        0
        5px;

    border-radius:
        var(--radius-full);

    color:
        #ffffff;

    background:
        rgba(59, 130, 246, 0.18);

    font-size: 0.45rem;

    font-weight:
        var(--font-weight-bold);
}

.nav-badge.new {
    color:
        #bbf7d0;

    background:
        rgba(34, 197, 94, 0.12);
}


/* =========================================================
   211. COURSE SUB-NAVIGATION
   ========================================================= */

.course-subnav {
    display: flex;

    flex-direction: column;

    gap: 2px;

    margin:
        4px
        0
        5px
        27px;

    padding-left: 10px;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.06);
}

.course-subnav-link {
    display: flex;
    align-items: center;

    min-height: 31px;

    padding:
        0
        8px;

    border-radius:
        7px;

    color:
        rgba(148, 163, 184, 0.65);

    text-decoration: none;

    font-size: 0.53rem;

    transition:
        color var(--transition-fast),
        background var(--transition-fast);
}

.course-subnav-link:hover {
    color:
        var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.03);
}

.course-subnav-link.active {
    color:
        var(--color-primary-light);

    background:
        rgba(59, 130, 246, 0.07);
}


/* =========================================================
   212. SIDEBAR DIVIDER
   ========================================================= */

.sidebar-divider {
    height: 1px;

    margin:
        var(--space-3)
        0
        var(--space-5);

    background:
        rgba(255, 255, 255, 0.05);
}


/* =========================================================
   213. SIDEBAR USER
   ========================================================= */

.sidebar-user {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: auto;

    padding:
        10px;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius:
        var(--radius-lg);

    background:
        rgba(255, 255, 255, 0.025);
}

.user-avatar {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    flex-shrink: 0;

    overflow: hidden;

    border-radius:
        10px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    font-size: 0.58rem;

    font-weight:
        var(--font-weight-bold);
}

.user-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.user-info {
    min-width: 0;
}

.user-name {
    overflow: hidden;

    margin-bottom: 2px;

    color:
        var(--color-text-soft);

    font-size: 0.56rem;

    font-weight:
        var(--font-weight-semibold);

    text-overflow: ellipsis;

    white-space: nowrap;
}

.user-role {
    color:
        var(--color-text-faint);

    font-size: 0.47rem;
}


/* =========================================================
   214. MAIN APP OFFSET
   ========================================================= */

.main-content,
.app-main,
.dashboard-main {
    min-width: 0;

    margin-left:
        var(--sidebar-width);
}


/* =========================================================
   215. TOP BAR
   ========================================================= */

.topbar {
    position: sticky;

    top: 0;

    z-index: 900;

    display: flex;
    align-items: center;

    min-height:
        var(--topbar-height);

    padding:
        0
        var(--space-7);

    border-bottom:
        1px solid
        var(--color-border);

    background:
        rgba(7, 11, 20, 0.72);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}


/* =========================================================
   216. TOPBAR LEFT
   ========================================================= */

.topbar-left {
    display: flex;
    align-items: center;

    gap: var(--space-4);

    min-width: 0;
}

.mobile-menu-btn {
    display: none;

    place-items: center;

    width: 35px;
    height: 35px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    color:
        var(--color-text-muted);

    background:
        rgba(255, 255, 255, 0.025);

    cursor: pointer;
}


/* =========================================================
   217. SEARCH BOX
   ========================================================= */

.search-container {
    position: relative;

    width:
        min(
            360px,
            35vw
        );
}

.search-box {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    min-height: 37px;
}

.search-icon {
    position: absolute;

    left: 12px;

    width: 15px;
    height: 15px;

    color:
        var(--color-text-faint);

    pointer-events: none;
}

.search-input {
    width: 100%;

    height: 37px;

    padding:
        0
        55px
        0
        36px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    outline: none;

    color:
        var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.025);

    font-family: inherit;

    font-size: 0.57rem;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.search-input::placeholder {
    color:
        rgba(148, 163, 184, 0.48);
}

.search-input:focus {
    border-color:
        rgba(96, 165, 250, 0.3);

    background:
        rgba(255, 255, 255, 0.04);

    box-shadow:
        0 0 0 3px
        rgba(59, 130, 246, 0.05);
}

.search-shortcut {
    position: absolute;

    right: 9px;

    display: inline-flex;
    align-items: center;

    height: 21px;

    padding:
        0
        6px;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        5px;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.025);

    font-size: 0.45rem;
}


/* =========================================================
   218. SEARCH RESULTS
   ========================================================= */

.search-results {
    position: absolute;

    top: calc(100% + 8px);

    left: 0;
    right: 0;

    z-index: 1200;

    display: none;

    max-height: 390px;

    overflow-y: auto;

    padding: 6px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        rgba(10, 15, 27, 0.97);

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.35);
}

.search-container.open .search-results {
    display: block;
}

.search-result {
    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        10px;

    border-radius:
        var(--radius-md);

    cursor: pointer;

    transition:
        background var(--transition-fast);
}

.search-result:hover {
    background:
        rgba(255, 255, 255, 0.05);
}

.search-result-icon {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    flex-shrink: 0;

    border-radius: 9px;

    color:
        var(--color-primary-light);

    background:
        rgba(59, 130, 246, 0.08);
}

.search-result-content {
    min-width: 0;
}

.search-result-title {
    overflow: hidden;

    margin-bottom: 3px;

    color:
        var(--color-text-soft);

    font-size: 0.58rem;

    font-weight:
        var(--font-weight-semibold);

    text-overflow: ellipsis;

    white-space: nowrap;
}

.search-result-meta {
    color:
        var(--color-text-faint);

    font-size: 0.48rem;
}


/* =========================================================
   219. TOPBAR RIGHT
   ========================================================= */

.topbar-right {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-left: auto;
}


/* =========================================================
   220. TOPBAR ACTION
   ========================================================= */

.topbar-action {
    position: relative;

    display: grid;
    place-items: center;

    width: 35px;
    height: 35px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.02);

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.topbar-action:hover {
    color:
        var(--color-text-soft);

    border-color:
        rgba(255, 255, 255, 0.11);

    background:
        rgba(255, 255, 255, 0.05);
}


/* =========================================================
   221. NOTIFICATION DOT
   ========================================================= */

.notification-dot {
    position: absolute;

    top: 7px;
    right: 7px;

    width: 6px;
    height: 6px;

    border:
        1px solid
        var(--color-bg);

    border-radius: 50%;

    background:
        #ef4444;

    box-shadow:
        0 0 8px
        rgba(239, 68, 68, 0.45);
}


/* =========================================================
   222. NOTIFICATION PANEL
   ========================================================= */

.notification-panel {
    position: absolute;

    top: calc(100% + 10px);
    right: var(--space-5);

    z-index: 1300;

    display: none;

    width:
        min(
            350px,
            calc(100vw - 24px)
        );

    max-height: 450px;

    overflow-y: auto;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        rgba(10, 15, 27, 0.97);

    backdrop-filter:
        blur(22px);

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.4);
}

.notification-panel.open {
    display: block;

    animation:
        panel-enter
        180ms
        ease-out
        both;
}

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        14px
        15px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}

.notification-title {
    color:
        var(--color-text-soft);

    font-size: 0.65rem;

    font-weight:
        var(--font-weight-semibold);
}

.notification-mark {
    color:
        var(--color-primary-light);

    background: transparent;

    border: 0;

    font-family: inherit;

    font-size: 0.5rem;

    cursor: pointer;
}


/* =========================================================
   223. NOTIFICATION ITEM
   ========================================================= */

.notification-item {
    display: flex;

    gap: 10px;

    padding:
        12px
        14px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.035);

    transition:
        background var(--transition-fast);
}

.notification-item:hover {
    background:
        rgba(255, 255, 255, 0.025);
}

.notification-item.unread {
    background:
        rgba(59, 130, 246, 0.035);
}

.notification-icon {
    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    flex-shrink: 0;

    border-radius: 9px;

    color:
        var(--color-primary-light);

    background:
        rgba(59, 130, 246, 0.08);
}

.notification-content {
    min-width: 0;
}

.notification-message {
    margin-bottom: 4px;

    color:
        var(--color-text-muted);

    font-size: 0.54rem;

    line-height: 1.45;
}

.notification-time {
    color:
        var(--color-text-faint);

    font-size: 0.46rem;
}


/* =========================================================
   224. PROFILE DROPDOWN
   ========================================================= */

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: flex;
    align-items: center;

    gap: 8px;

    min-height: 37px;

    padding:
        3px
        8px
        3px
        4px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-full);

    color:
        var(--color-text-muted);

    background:
        rgba(255, 255, 255, 0.02);

    cursor: pointer;
}

.profile-trigger:hover {
    background:
        rgba(255, 255, 255, 0.045);
}

.profile-trigger .user-avatar {
    width: 29px;
    height: 29px;

    border-radius: 50%;
}

.profile-trigger-info {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    min-width: 0;
}

.profile-trigger-name {
    max-width: 90px;

    overflow: hidden;

    color:
        var(--color-text-soft);

    font-size: 0.51rem;

    font-weight:
        var(--font-weight-semibold);

    text-overflow: ellipsis;

    white-space: nowrap;
}

.profile-trigger-role {
    color:
        var(--color-text-faint);

    font-size: 0.43rem;
}


/* =========================================================
   225. PROFILE DROPDOWN PANEL
   ========================================================= */

.profile-dropdown {
    position: absolute;

    top: calc(100% + 9px);
    right: 0;

    z-index: 1300;

    display: none;

    width: 205px;

    padding: 6px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        rgba(10, 15, 27, 0.97);

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 22px 65px
        rgba(0, 0, 0, 0.4);
}

.profile-menu.open .profile-dropdown {
    display: block;

    animation:
        panel-enter
        180ms
        ease-out
        both;
}

.profile-dropdown-user {
    padding:
        11px;

    margin-bottom: 5px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}

.profile-dropdown-name {
    margin-bottom: 3px;

    color:
        var(--color-text-soft);

    font-size: 0.59rem;

    font-weight:
        var(--font-weight-semibold);
}

.profile-dropdown-email {
    overflow: hidden;

    color:
        var(--color-text-faint);

    font-size: 0.47rem;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.profile-menu-item {
    display: flex;
    align-items: center;

    gap: 9px;

    width: 100%;

    min-height: 34px;

    padding:
        0
        10px;

    border: 0;

    border-radius:
        8px;

    color:
        var(--color-text-faint);

    background:
        transparent;

    text-decoration: none;

    font-family: inherit;

    font-size: 0.53rem;

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background var(--transition-fast);
}

.profile-menu-item:hover {
    color:
        var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.045);
}

.profile-menu-item.danger {
    color:
        #fca5a5;
}

.profile-menu-item svg {
    width: 14px;
    height: 14px;
}


/* =========================================================
   226. SIDEBAR OVERLAY
   ========================================================= */

.sidebar-overlay {
    position: fixed;

    inset: 0;

    z-index: 950;

    display: none;

    background:
        rgba(0, 0, 0, 0.55);

    backdrop-filter:
        blur(3px);
}

.sidebar-overlay.active {
    display: block;
}


/* =========================================================
   227. SIDEBAR COLLAPSED
   ========================================================= */

.sidebar.collapsed {
    width:
        var(--sidebar-collapsed-width);
}

.sidebar.collapsed .brand-name,
.sidebar.collapsed .sidebar-section-title,
.sidebar.collapsed .sidebar-nav-link span,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .course-subnav,
.sidebar.collapsed .user-info {
    display: none;
}

.sidebar.collapsed .sidebar-nav-link {
    justify-content: center;

    padding:
        0;
}

.sidebar.collapsed .sidebar-user {
    justify-content: center;

    padding: 6px;
}

.sidebar.collapsed + .main-content,
.sidebar.collapsed ~ .main-content {
    margin-left:
        var(--sidebar-collapsed-width);
}


/* =========================================================
   228. SIDEBAR TOGGLE
   ========================================================= */

.sidebar-toggle {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    margin:
        0
        auto
        var(--space-4);

    border:
        1px solid
        var(--color-border);

    border-radius:
        8px;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.025);

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast);
}

.sidebar-toggle:hover {
    background:
        rgba(255, 255, 255, 0.05);
}


/* =========================================================
   229. PAGE HEADER
   ========================================================= */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-5);

    margin-bottom: var(--space-6);
}

.page-header-content {
    min-width: 0;
}

.page-eyebrow {
    margin-bottom: 6px;

    color:
        var(--color-primary-light);

    font-size: 0.51rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}

.page-title {
    margin-bottom: 6px;

    color:
        var(--color-text);

    font-size:
        clamp(
            1.15rem,
            2.5vw,
            1.7rem
        );

    font-weight:
        var(--font-weight-bold);
}

.page-description {
    max-width: 650px;

    color:
        var(--color-text-faint);

    font-size: 0.6rem;

    line-height: 1.6;
}


/* =========================================================
   230. PAGE HEADER ACTIONS
   ========================================================= */

.page-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    flex-shrink: 0;
}

.page-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 34px;

    padding:
        0
        11px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    color:
        var(--color-text-muted);

    background:
        rgba(255, 255, 255, 0.025);

    font-family: inherit;

    font-size: 0.54rem;

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.page-action:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 255, 255, 0.05);
}

.page-action.primary {
    color:
        #ffffff;

    border-color:
        rgba(59, 130, 246, 0.2);

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );
}


/* =========================================================
   231. ANIMATION
   ========================================================= */

@keyframes panel-enter {

    from {
        opacity: 0;

        transform:
            translateY(-6px)
            scale(0.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   232. MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 900px) {

    .sidebar {
        transform:
            translateX(-105%);

        box-shadow:
            20px 0 60px
            rgba(0, 0, 0, 0.35);
    }

    .sidebar.mobile-open {
        transform:
            translateX(0);
    }

    .main-content,
    .app-main,
    .dashboard-main {
        margin-left: 0;
    }

    .mobile-menu-btn {
        display: grid;
    }

    .topbar {
        padding:
            0
            var(--space-5);
    }

    .search-container {
        width:
            min(
                300px,
                42vw
            );
    }
}


/* =========================================================
   233. TABLET NAVIGATION
   ========================================================= */

@media (max-width: 700px) {

    .topbar {
        gap: 8px;
    }

    .search-container {
        flex: 1;

        width: auto;
    }

    .profile-trigger-info,
    .profile-trigger > svg {
        display: none;
    }

    .page-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .page-actions {
        width: 100%;
    }
}


/* =========================================================
   234. MOBILE TOPBAR
   ========================================================= */

@media (max-width: 520px) {

    .topbar {
        min-height:
            58px;

        padding:
            0
            12px;
    }

    .topbar-right {
        gap: 4px;
    }

    .topbar-action {
        width: 32px;
        height: 32px;
    }

    .profile-trigger {
        padding: 2px;
        border: 0;
        background: transparent;
    }

    .profile-trigger .user-avatar {
        width: 31px;
        height: 31px;
    }

    .search-shortcut {
        display: none;
    }

    .search-input {
        padding-right: 12px;
    }

    .notification-panel {
        right: 8px;
    }
}


/* =========================================================
   235. SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .search-container {
        min-width: 0;
    }

    .topbar-action:nth-child(2) {
        display: none;
    }

    .page-actions {
        flex-direction: column;
    }

    .page-action {
        width: 100%;
    }
}


/* =========================================================
   236. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sidebar,
    .sidebar-nav-link,
    .topbar-action,
    .profile-dropdown,
    .notification-panel {
        transition: none;
        animation: none;
    }
}


/* =========================================================
   237. ACCESSIBILITY FOCUS
   ========================================================= */

.sidebar-nav-link:focus-visible,
.topbar-action:focus-visible,
.profile-trigger:focus-visible,
.page-action:focus-visible,
.mobile-menu-btn:focus-visible,
.sidebar-toggle:focus-visible,
.search-input:focus-visible {
    outline:
        2px solid
        rgba(96, 165, 250, 0.65);

    outline-offset:
        2px;
}


/* =========================================================
   238. END OF PART 7
   ========================================================= */
/* =========================================================
   ADOPT SKILL — PART 8
   AI Tutor • Chat • Modals • Toasts • Loading States
   ========================================================= */


/* =========================================================
   239. AI TUTOR FLOATING BUTTON
   ========================================================= */

#aiTutorWidget {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 1400;
}

.ai-tutor-button {
    position: relative;

    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    border:
        1px solid
        rgba(96, 165, 250, 0.3);

    border-radius: 18px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.95),
            rgba(124, 58, 237, 0.95)
        );

    box-shadow:
        0 12px 35px
        rgba(37, 99, 235, 0.25),
        0 0 30px
        rgba(124, 58, 237, 0.13);

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.ai-tutor-button:hover {
    transform:
        translateY(-4px)
        scale(1.03);

    box-shadow:
        0 18px 45px
        rgba(37, 99, 235, 0.35),
        0 0 40px
        rgba(124, 58, 237, 0.2);
}

.ai-tutor-button:active {
    transform:
        translateY(0)
        scale(0.98);
}

.ai-tutor-button svg {
    width: 23px;
    height: 23px;
}


/* =========================================================
   240. AI PULSE
   ========================================================= */

.ai-pulse {
    position: absolute;

    inset: -5px;

    border:
        1px solid
        rgba(96, 165, 250, 0.3);

    border-radius: 22px;

    pointer-events: none;

    animation:
        ai-pulse-animation
        2.5s
        ease-out
        infinite;
}

@keyframes ai-pulse-animation {

    0% {
        opacity: 0.7;

        transform:
            scale(0.95);
    }

    70% {
        opacity: 0;

        transform:
            scale(1.18);
    }

    100% {
        opacity: 0;

        transform:
            scale(1.18);
    }
}


/* =========================================================
   241. AI STATUS DOT
   ========================================================= */

.ai-status-dot {
    position: absolute;

    top: 3px;
    right: 3px;

    width: 9px;
    height: 9px;

    border:
        2px solid
        #070b14;

    border-radius: 50%;

    background:
        #22c55e;

    box-shadow:
        0 0 10px
        rgba(34, 197, 94, 0.6);
}


/* =========================================================
   242. AI CHAT WINDOW
   ========================================================= */

.ai-chat-window {
    position: fixed;

    right: 22px;
    bottom: 88px;

    z-index: 1399;

    display: none;

    flex-direction: column;

    width:
        min(
            390px,
            calc(100vw - 28px)
        );

    height:
        min(
            570px,
            calc(100vh - 120px)
        );

    overflow: hidden;

    border:
        1px solid
        rgba(96, 165, 250, 0.14);

    border-radius:
        20px;

    background:
        rgba(8, 13, 24, 0.97);

    backdrop-filter:
        blur(25px);

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, 0.5),
        0 0 50px
        rgba(59, 130, 246, 0.08);
}

.ai-chat-window.open {
    display: flex;

    animation:
        ai-window-enter
        220ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )
        both;
}

@keyframes ai-window-enter {

    from {
        opacity: 0;

        transform:
            translateY(18px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   243. AI CHAT HEADER
   ========================================================= */

.ai-chat-header {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 64px;

    padding:
        10px
        13px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);

    background:
        rgba(255, 255, 255, 0.015);
}

.ai-chat-avatar {
    position: relative;

    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border:
        1px solid
        rgba(96, 165, 250, 0.18);

    border-radius: 12px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );
}

.ai-chat-avatar::after {
    content: "";

    position: absolute;

    inset: 3px;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 9px;
}

.ai-chat-info {
    flex: 1;

    min-width: 0;
}

.ai-chat-title {
    margin-bottom: 3px;

    color:
        var(--color-text-soft);

    font-size: 0.63rem;

    font-weight:
        var(--font-weight-semibold);
}

.ai-chat-status {
    display: flex;
    align-items: center;

    gap: 5px;

    color:
        var(--color-text-faint);

    font-size: 0.46rem;
}

.ai-online-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #22c55e;

    box-shadow:
        0 0 7px
        rgba(34, 197, 94, 0.55);
}

.ai-chat-header-actions {
    display: flex;

    gap: 3px;
}

.ai-chat-header-btn {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    border: 0;

    border-radius: 8px;

    color:
        var(--color-text-faint);

    background:
        transparent;

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background var(--transition-fast);
}

.ai-chat-header-btn:hover {
    color:
        var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.05);
}


/* =========================================================
   244. AI CHAT BODY
   ========================================================= */

.ai-chat-body {
    display: flex;

    flex: 1;

    flex-direction: column;

    gap: 12px;

    min-height: 0;

    overflow-y: auto;

    padding:
        15px;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(255, 255, 255, 0.08)
        transparent;
}

.ai-chat-body::-webkit-scrollbar {
    width: 4px;
}

.ai-chat-body::-webkit-scrollbar-track {
    background: transparent;
}

.ai-chat-body::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.08);
}


/* =========================================================
   245. CHAT MESSAGE
   ========================================================= */

.chat-message {
    display: flex;

    gap: 8px;

    max-width: 88%;
}

.chat-message.user {
    align-self: flex-end;

    flex-direction: row-reverse;
}

.chat-message-avatar {
    display: grid;
    place-items: center;

    width: 25px;
    height: 25px;

    flex-shrink: 0;

    border-radius: 8px;

    color:
        var(--color-text-muted);

    background:
        rgba(255, 255, 255, 0.05);

    font-size: 0.45rem;
}

.chat-message.user .chat-message-avatar {
    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );
}

.chat-bubble {
    padding:
        9px
        11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius:
        12px;

    color:
        var(--color-text-muted);

    background:
        rgba(255, 255, 255, 0.035);

    font-size: 0.54rem;

    line-height: 1.55;
}

.chat-message.user .chat-bubble {
    border-color:
        rgba(59, 130, 246, 0.14);

    color:
        #dbeafe;

    background:
        rgba(37, 99, 235, 0.12);
}


/* =========================================================
   246. AI TYPING INDICATOR
   ========================================================= */

.ai-typing {
    display: flex;
    align-items: center;

    gap: 4px;

    width: fit-content;

    padding:
        9px
        12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.05);

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, 0.025);
}

.ai-typing span {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        var(--color-text-faint);

    animation:
        typing-dot
        1.2s
        infinite
        ease-in-out;
}

.ai-typing span:nth-child(2) {
    animation-delay:
        0.15s;
}

.ai-typing span:nth-child(3) {
    animation-delay:
        0.3s;
}

@keyframes typing-dot {

    0%,
    60%,
    100% {
        opacity: 0.3;

        transform:
            translateY(0);
    }

    30% {
        opacity: 1;

        transform:
            translateY(-3px);
    }
}


/* =========================================================
   247. AI SUGGESTIONS
   ========================================================= */

.ai-suggestions {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: auto;
}

.ai-suggestion {
    min-height: 27px;

    padding:
        0
        9px;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        var(--radius-full);

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.025);

    font-family: inherit;

    font-size: 0.45rem;

    cursor: pointer;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.ai-suggestion:hover {
    color:
        var(--color-primary-light);

    border-color:
        rgba(96, 165, 250, 0.2);

    background:
        rgba(59, 130, 246, 0.06);
}


/* =========================================================
   248. AI INPUT AREA
   ========================================================= */

.ai-chat-input-area {
    padding:
        10px
        12px
        12px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    background:
        rgba(255, 255, 255, 0.012);
}

.ai-chat-input-wrapper {
    display: flex;
    align-items: flex-end;

    gap: 6px;

    padding:
        6px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius:
        13px;

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.ai-chat-input-wrapper:focus-within {
    border-color:
        rgba(96, 165, 250, 0.25);

    box-shadow:
        0 0 0 3px
        rgba(59, 130, 246, 0.04);
}

.ai-chat-input {
    flex: 1;

    min-height: 28px;
    max-height: 90px;

    resize: none;

    padding:
        5px
        6px;

    border: 0;

    outline: none;

    color:
        var(--color-text-soft);

    background:
        transparent;

    font-family: inherit;

    font-size: 0.54rem;

    line-height: 1.5;
}

.ai-chat-input::placeholder {
    color:
        var(--color-text-faint);
}

.ai-send-button {
    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    flex-shrink: 0;

    border: 0;

    border-radius: 9px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast);
}

.ai-send-button:hover {
    transform:
        translateY(-2px);
}

.ai-send-button:disabled {
    opacity: 0.4;

    cursor: not-allowed;
}


/* =========================================================
   249. MODAL BACKDROP
   ========================================================= */

.modal-backdrop {
    position: fixed;

    inset: 0;

    z-index: 2000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, 0.68);

    backdrop-filter:
        blur(7px);
}

.modal-backdrop.active {
    display: flex;

    animation:
        backdrop-enter
        160ms
        ease-out
        both;
}

@keyframes backdrop-enter {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================
   250. MODAL
   ========================================================= */

.modal {
    position: relative;

    width:
        min(
            560px,
            100%
        );

    max-height:
        min(
            700px,
            calc(100vh - 40px)
        );

    overflow-y: auto;

    padding:
        20px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius:
        18px;

    background:
        rgba(10, 15, 27, 0.98);

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, 0.55);

    animation:
        modal-enter
        220ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )
        both;
}

@keyframes modal-enter {

    from {
        opacity: 0;

        transform:
            translateY(20px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

.modal.small {
    width:
        min(
            390px,
            100%
        );
}

.modal.large {
    width:
        min(
            850px,
            100%
        );
}


/* =========================================================
   251. MODAL HEADER
   ========================================================= */

.modal-header {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 18px;
}

.modal-title-wrapper {
    flex: 1;
}

.modal-title {
    margin-bottom: 5px;

    color:
        var(--color-text);

    font-size: 0.82rem;

    font-weight:
        var(--font-weight-bold);
}

.modal-description {
    color:
        var(--color-text-faint);

    font-size: 0.52rem;

    line-height: 1.55;
}

.modal-close {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border: 0;

    border-radius: 8px;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.035);

    cursor: pointer;
}

.modal-close:hover {
    color:
        var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.07);
}


/* =========================================================
   252. MODAL BODY
   ========================================================= */

.modal-body {
    color:
        var(--color-text-muted);

    font-size: 0.56rem;

    line-height: 1.65;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    margin-top: 20px;

    padding-top: 14px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);
}


/* =========================================================
   253. FORM GROUP
   ========================================================= */

.form-group {
    margin-bottom: 14px;
}

.form-label {
    display: block;

    margin-bottom: 6px;

    color:
        var(--color-text-muted);

    font-size: 0.52rem;

    font-weight:
        var(--font-weight-semibold);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;

    min-height: 38px;

    padding:
        0
        11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius:
        9px;

    outline: none;

    color:
        var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.025);

    font-family: inherit;

    font-size: 0.55rem;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.form-textarea {
    min-height: 100px;

    padding:
        10px 11px;

    resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color:
        rgba(96, 165, 250, 0.3);

    background:
        rgba(255, 255, 255, 0.04);

    box-shadow:
        0 0 0 3px
        rgba(59, 130, 246, 0.05);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color:
        var(--color-text-faint);
}


/* =========================================================
   254. FORM ERROR
   ========================================================= */

.form-error {
    display: none;

    margin-top: 5px;

    color:
        #fca5a5;

    font-size: 0.47rem;
}

.form-group.has-error .form-input,
.form-group.has-error .form-select,
.form-group.has-error .form-textarea {
    border-color:
        rgba(239, 68, 68, 0.4);
}

.form-group.has-error .form-error {
    display: block;
}


/* =========================================================
   255. TOAST CONTAINER
   ========================================================= */

.toast-container {
    position: fixed;

    right: 18px;
    bottom: 18px;

    z-index: 3000;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 8px;

    width:
        min(
            350px,
            calc(100vw - 28px)
        );

    pointer-events: none;
}


/* =========================================================
   256. TOAST
   ========================================================= */

.toast {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    width: 100%;

    padding:
        11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius:
        12px;

    background:
        rgba(10, 15, 27, 0.96);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.35);

    pointer-events: auto;

    animation:
        toast-enter
        240ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )
        both;
}

.toast.removing {
    animation:
        toast-exit
        180ms
        ease-in
        both;
}

@keyframes toast-enter {

    from {
        opacity: 0;

        transform:
            translateX(20px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}

@keyframes toast-exit {

    from {
        opacity: 1;

        transform:
            translateX(0);
    }

    to {
        opacity: 0;

        transform:
            translateX(20px);
    }
}


/* =========================================================
   257. TOAST ICON
   ========================================================= */

.toast-icon {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    flex-shrink: 0;

    border-radius: 8px;

    font-size: 0.6rem;
}

.toast.success .toast-icon {
    color:
        #86efac;

    background:
        rgba(34, 197, 94, 0.1);
}

.toast.error .toast-icon {
    color:
        #fca5a5;

    background:
        rgba(239, 68, 68, 0.1);
}

.toast.warning .toast-icon {
    color:
        #fde68a;

    background:
        rgba(245, 158, 11, 0.1);
}

.toast.info .toast-icon {
    color:
        #93c5fd;

    background:
        rgba(59, 130, 246, 0.1);
}


/* =========================================================
   258. TOAST CONTENT
   ========================================================= */

.toast-content {
    flex: 1;

    min-width: 0;
}

.toast-title {
    margin-bottom: 3px;

    color:
        var(--color-text-soft);

    font-size: 0.55rem;

    font-weight:
        var(--font-weight-semibold);
}

.toast-message {
    color:
        var(--color-text-faint);

    font-size: 0.48rem;

    line-height: 1.45;
}

.toast-close {
    display: grid;
    place-items: center;

    width: 22px;
    height: 22px;

    border: 0;

    color:
        var(--color-text-faint);

    background:
        transparent;

    cursor: pointer;
}


/* =========================================================
   259. LOADING OVERLAY
   ========================================================= */

.loading-overlay {
    position: fixed;

    inset: 0;

    z-index: 5000;

    display: none;

    align-items: center;
    justify-content: center;

    background:
        rgba(4, 7, 13, 0.82);

    backdrop-filter:
        blur(6px);
}

.loading-overlay.active {
    display: flex;
}

.loading-content {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;
}

.loading-spinner {
    width: 35px;
    height: 35px;

    border:
        2px solid
        rgba(255, 255, 255, 0.08);

    border-top-color:
        #60a5fa;

    border-radius: 50%;

    animation:
        spinner-rotate
        700ms
        linear
        infinite;
}

@keyframes spinner-rotate {

    to {
        transform:
            rotate(360deg);
    }
}

.loading-text {
    color:
        var(--color-text-faint);

    font-size: 0.52rem;
}


/* =========================================================
   260. SKELETON LOADING
   ========================================================= */

.skeleton {
    position: relative;

    overflow: hidden;

    border-radius:
        7px;

    background:
        rgba(255, 255, 255, 0.045);
}

.skeleton::after {
    content: "";

    position: absolute;

    inset: 0;

    transform:
        translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.055),
            transparent
        );

    animation:
        skeleton-shimmer
        1.5s
        infinite;
}

@keyframes skeleton-shimmer {

    100% {
        transform:
            translateX(100%);
    }
}

.skeleton-text {
    width: 100%;

    height: 9px;

    margin-bottom: 7px;
}

.skeleton-text.short {
    width: 55%;
}

.skeleton-title {
    width: 70%;

    height: 15px;

    margin-bottom: 12px;
}

.skeleton-avatar {
    width: 35px;
    height: 35px;

    border-radius: 10px;
}


/* =========================================================
   261. EMPTY STATE
   ========================================================= */

.empty-state {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 230px;

    padding: 30px;

    text-align: center;
}

.empty-state-icon {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    margin-bottom: 13px;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 15px;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.025);
}

.empty-state-title {
    margin-bottom: 6px;

    color:
        var(--color-text-soft);

    font-size: 0.68rem;

    font-weight:
        var(--font-weight-semibold);
}

.empty-state-description {
    max-width: 380px;

    margin-bottom: 15px;

    color:
        var(--color-text-faint);

    font-size: 0.52rem;

    line-height: 1.55;
}


/* =========================================================
   262. RESPONSIVE AI
   ========================================================= */

@media (max-width: 520px) {

    #aiTutorWidget {
        right: 14px;
        bottom: 14px;
    }

    .ai-tutor-button {
        width: 50px;
        height: 50px;

        border-radius: 16px;
    }

    .ai-chat-window {
        right: 10px;
        bottom: 76px;

        width:
            calc(100vw - 20px);

        height:
            min(
                560px,
                calc(100vh - 95px)
            );

        border-radius: 17px;
    }

    .modal-backdrop {
        padding: 10px;
    }

    .modal {
        max-height:
            calc(100vh - 20px);

        padding: 15px;

        border-radius: 15px;
    }

    .toast-container {
        right: 10px;
        bottom: 10px;

        width:
            calc(100vw - 20px);
    }
}


/* =========================================================
   263. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ai-pulse,
    .ai-chat-window,
    .ai-typing span,
    .modal,
    .toast,
    .loading-spinner,
    .skeleton::after {
        animation: none;
    }
}


/* =========================================================
   264. END OF PART 8
   ========================================================= */
/* =========================================================
   ADOPT SKILL — PART 9
   Courses • Filters • Progress • Roadmap • Certificates
   • Achievements • Dashboard Widgets
   ========================================================= */


/* =========================================================
   265. COURSE SECTION HEADER
   ========================================================= */

.course-section {
    position: relative;

    margin-bottom: var(--space-7);
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 15px;
}

.section-heading {
    min-width: 0;
}

.section-eyebrow {
    margin-bottom: 5px;

    color:
        var(--color-primary-light);

    font-size: 0.46rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}

.section-title {
    margin: 0;

    color:
        var(--color-text);

    font-size:
        clamp(
            0.82rem,
            1.8vw,
            1.05rem
        );

    font-weight:
        var(--font-weight-bold);
}

.section-description {
    margin-top: 5px;

    color:
        var(--color-text-faint);

    font-size: 0.52rem;

    line-height: 1.5;
}

.section-link {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    flex-shrink: 0;

    color:
        var(--color-primary-light);

    font-size: 0.5rem;

    font-weight:
        var(--font-weight-semibold);

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.section-link:hover {
    color:
        #bfdbfe;

    transform:
        translateX(2px);
}


/* =========================================================
   266. COURSE FILTER BAR
   ========================================================= */

.course-filter-bar {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-bottom: 15px;

    padding-bottom: 2px;

    overflow-x: auto;

    scrollbar-width: none;
}

.course-filter-bar::-webkit-scrollbar {
    display: none;
}

.course-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 31px;

    flex-shrink: 0;

    padding:
        0
        11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        var(--radius-full);

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.02);

    font-family: inherit;

    font-size: 0.49rem;

    font-weight:
        var(--font-weight-medium);

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.course-filter:hover {
    color:
        var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.045);
}

.course-filter.active {
    color:
        #dbeafe;

    border-color:
        rgba(96, 165, 250, 0.2);

    background:
        rgba(59, 130, 246, 0.1);
}


/* =========================================================
   267. COURSE GRID
   ========================================================= */

.course-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                220px,
                1fr
            )
        );

    gap:
        13px;
}


/* =========================================================
   268. COURSE CARD
   ========================================================= */

.course-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        var(--radius-lg);

    background:
        rgba(255, 255, 255, 0.025);

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.08);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

.course-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(96, 165, 250, 0.16);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.2),
        0 0 25px
        rgba(59, 130, 246, 0.055);
}

.course-card.hidden {
    display: none;
}


/* =========================================================
   269. COURSE COVER
   ========================================================= */

.course-cover {
    position: relative;

    display: flex;
    align-items: flex-end;

    min-height: 125px;

    padding: 13px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.2),
            rgba(124, 58, 237, 0.12)
        );
}

.course-cover::before {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    top: -65px;
    right: -40px;

    border-radius: 50%;

    background:
        rgba(96, 165, 250, 0.12);

    filter:
        blur(5px);
}

.course-cover::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(7, 11, 20, 0.72),
            transparent 65%
        );

    pointer-events: none;
}


/* =========================================================
   270. COURSE ICON
   ========================================================= */

.course-icon {
    position: relative;

    z-index: 2;

    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 13px;

    color:
        #ffffff;

    background:
        rgba(255, 255, 255, 0.07);

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, 0.18);

    font-size: 0.75rem;

    font-weight:
        var(--font-weight-bold);
}


/* =========================================================
   271. COURSE BADGES
   ========================================================= */

.course-badge {
    position: absolute;

    top: 11px;
    right: 11px;

    z-index: 3;

    display: inline-flex;
    align-items: center;

    min-height: 22px;

    padding:
        0
        7px;

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius:
        var(--radius-full);

    color:
        var(--color-text-soft);

    background:
        rgba(7, 11, 20, 0.55);

    backdrop-filter:
        blur(8px);

    font-size: 0.42rem;

    font-weight:
        var(--font-weight-semibold);
}

.course-badge.new {
    color:
        #bbf7d0;

    border-color:
        rgba(34, 197, 94, 0.18);

    background:
        rgba(34, 197, 94, 0.08);
}

.course-badge.popular {
    color:
        #fde68a;

    border-color:
        rgba(245, 158, 11, 0.18);

    background:
        rgba(245, 158, 11, 0.08);
}


/* =========================================================
   272. COURSE BODY
   ========================================================= */

.course-body {
    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 14px;
}

.course-category {
    margin-bottom: 5px;

    color:
        var(--color-primary-light);

    font-size: 0.43rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}

.course-title {
    margin-bottom: 6px;

    color:
        var(--color-text-soft);

    font-size: 0.66rem;

    font-weight:
        var(--font-weight-semibold);

    line-height: 1.35;
}

.course-description {
    display: -webkit-box;

    overflow: hidden;

    margin-bottom: 12px;

    color:
        var(--color-text-faint);

    font-size: 0.49rem;

    line-height: 1.55;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;
}


/* =========================================================
   273. COURSE META
   ========================================================= */

.course-meta {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: auto;

    margin-bottom: 12px;
}

.course-meta-item {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    color:
        var(--color-text-faint);

    font-size: 0.44rem;
}

.course-meta-item svg {
    width: 12px;
    height: 12px;

    opacity: 0.75;
}


/* =========================================================
   274. COURSE PROGRESS
   ========================================================= */

.course-progress {
    margin-bottom: 12px;
}

.course-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 5px;
}

.course-progress-label {
    color:
        var(--color-text-faint);

    font-size: 0.43rem;
}

.course-progress-value {
    color:
        var(--color-primary-light);

    font-size: 0.43rem;

    font-weight:
        var(--font-weight-semibold);
}

.progress-track {
    width: 100%;

    height: 4px;

    overflow: hidden;

    border-radius:
        var(--radius-full);

    background:
        rgba(255, 255, 255, 0.06);
}

.progress-fill {
    height: 100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #8b5cf6
        );

    box-shadow:
        0 0 9px
        rgba(59, 130, 246, 0.3);

    transition:
        width
        700ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );
}


/* =========================================================
   275. COURSE ACTION
   ========================================================= */

.course-action {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 7px;
}

.course-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    flex: 1;

    min-height: 33px;

    padding:
        0
        10px;

    border:
        1px solid
        rgba(59, 130, 246, 0.16);

    border-radius:
        9px;

    color:
        #dbeafe;

    background:
        rgba(59, 130, 246, 0.08);

    font-family: inherit;

    font-size: 0.48rem;

    font-weight:
        var(--font-weight-semibold);

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.course-start-btn:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(96, 165, 250, 0.3);

    background:
        rgba(59, 130, 246, 0.14);
}

.course-save-btn {
    display: grid;
    place-items: center;

    width: 33px;
    height: 33px;

    flex-shrink: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 9px;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.025);

    cursor: pointer;
}

.course-save-btn:hover,
.course-save-btn.saved {
    color:
        #fcd34d;

    border-color:
        rgba(245, 158, 11, 0.2);

    background:
        rgba(245, 158, 11, 0.06);
}


/* =========================================================
   276. FEATURED COURSE
   ========================================================= */

.course-card.featured {
    grid-column:
        span 2;
}

.course-card.featured .course-cover {
    min-height: 170px;
}

.course-card.featured .course-title {
    font-size: 0.78rem;
}


/* =========================================================
   277. STATS GRID
   ========================================================= */

.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 11px;

    margin-bottom: var(--space-7);
}

.stat-card {
    position: relative;

    min-width: 0;

    padding: 14px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.065);

    border-radius:
        var(--radius-lg);

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal);
}

.stat-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(96, 165, 250, 0.13);
}

.stat-card::after {
    content: "";

    position: absolute;

    right: -30px;
    bottom: -45px;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background:
        rgba(59, 130, 246, 0.06);

    filter:
        blur(10px);
}

.stat-icon {
    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    margin-bottom: 11px;

    border-radius: 9px;

    color:
        var(--color-primary-light);

    background:
        rgba(59, 130, 246, 0.08);
}

.stat-label {
    margin-bottom: 4px;

    color:
        var(--color-text-faint);

    font-size: 0.46rem;
}

.stat-value {
    margin-bottom: 5px;

    color:
        var(--color-text);

    font-size: 1rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        -0.03em;
}

.stat-change {
    display: inline-flex;
    align-items: center;

    gap: 3px;

    color:
        #86efac;

    font-size: 0.44rem;
}

.stat-change.negative {
    color:
        #fca5a5;
}


/* =========================================================
   278. LEARNING ROADMAP
   ========================================================= */

.learning-roadmap {
    position: relative;

    padding-left: 25px;
}

.learning-roadmap::before {
    content: "";

    position: absolute;

    left: 7px;
    top: 8px;
    bottom: 8px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(96, 165, 250, 0.4),
            rgba(124, 58, 237, 0.15),
            transparent
        );
}

.roadmap-item {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr
        auto;

    gap: 15px;

    padding-bottom: 18px;
}

.roadmap-item:last-child {
    padding-bottom: 0;
}

.roadmap-node {
    position: absolute;

    left: -25px;
    top: 4px;

    display: grid;
    place-items: center;

    width: 15px;
    height: 15px;

    border:
        3px solid
        var(--color-bg);

    border-radius: 50%;

    background:
        rgba(148, 163, 184, 0.4);
}

.roadmap-item.completed .roadmap-node {
    background:
        #22c55e;

    box-shadow:
        0 0 10px
        rgba(34, 197, 94, 0.3);
}

.roadmap-item.current .roadmap-node {
    background:
        #3b82f6;

    box-shadow:
        0 0 13px
        rgba(59, 130, 246, 0.45);

    animation:
        roadmap-pulse
        2s
        infinite;
}

@keyframes roadmap-pulse {

    0%,
    100% {
        box-shadow:
            0 0 8px
            rgba(59, 130, 246, 0.35);
    }

    50% {
        box-shadow:
            0 0 18px
            rgba(59, 130, 246, 0.65);
    }
}

.roadmap-card {
    padding:
        11px
        12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius:
        11px;

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.roadmap-card:hover {
    border-color:
        rgba(255, 255, 255, 0.1);

    background:
        rgba(255, 255, 255, 0.04);
}

.roadmap-stage {
    margin-bottom: 4px;

    color:
        var(--color-primary-light);

    font-size: 0.42rem;

    font-weight:
        var(--font-weight-bold);

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;
}

.roadmap-title {
    margin-bottom: 4px;

    color:
        var(--color-text-soft);

    font-size: 0.58rem;

    font-weight:
        var(--font-weight-semibold);
}

.roadmap-description {
    color:
        var(--color-text-faint);

    font-size: 0.47rem;

    line-height: 1.5;
}

.roadmap-status {
    align-self: start;

    padding:
        5px
        7px;

    border-radius:
        6px;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.035);

    font-size: 0.4rem;
}

.roadmap-item.completed .roadmap-status {
    color:
        #86efac;

    background:
        rgba(34, 197, 94, 0.07);
}

.roadmap-item.current .roadmap-status {
    color:
        #93c5fd;

    background:
        rgba(59, 130, 246, 0.08);
}


/* =========================================================
   279. CERTIFICATE GRID
   ========================================================= */

.certificate-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                230px,
                1fr
            )
        );

    gap: 13px;
}

.certificate-card {
    position: relative;

    overflow: hidden;

    min-height: 170px;

    padding: 17px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.08),
            rgba(124, 58, 237, 0.055)
        );
}

.certificate-card::before {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    top: -65px;
    right: -40px;

    border-radius: 50%;

    background:
        rgba(139, 92, 246, 0.1);

    filter:
        blur(5px);
}

.certificate-ribbon {
    position: absolute;

    top: 14px;
    right: -29px;

    width: 105px;

    padding: 4px 0;

    transform:
        rotate(45deg);

    text-align: center;

    color:
        #dbeafe;

    background:
        rgba(59, 130, 246, 0.25);

    font-size: 0.4rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.04em;
}

.certificate-seal {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    margin-bottom: 12px;

    border:
        1px solid
        rgba(96, 165, 250, 0.2);

    border-radius: 50%;

    color:
        #bfdbfe;

    background:
        rgba(59, 130, 246, 0.1);
}

.certificate-title {
    margin-bottom: 5px;

    color:
        var(--color-text-soft);

    font-size: 0.65rem;

    font-weight:
        var(--font-weight-semibold);
}

.certificate-meta {
    color:
        var(--color-text-faint);

    font-size: 0.46rem;

    line-height: 1.5;
}

.certificate-actions {
    display: flex;

    gap: 6px;

    margin-top: 14px;
}


/* =========================================================
   280. ACHIEVEMENT GRID
   ========================================================= */

.achievement-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                115px,
                1fr
            )
        );

    gap: 9px;
}

.achievement-card {
    display: flex;

    flex-direction: column;

    align-items: center;

    padding:
        13px
        8px;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius:
        12px;

    text-align: center;

    background:
        rgba(255, 255, 255, 0.02);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast);
}

.achievement-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(255, 255, 255, 0.11);
}

.achievement-icon {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    margin-bottom: 8px;

    border-radius: 12px;

    color:
        #fde68a;

    background:
        rgba(245, 158, 11, 0.08);
}

.achievement-card.locked {
    opacity: 0.48;
}

.achievement-card.locked .achievement-icon {
    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.04);
}

.achievement-title {
    margin-bottom: 3px;

    color:
        var(--color-text-soft);

    font-size: 0.48rem;

    font-weight:
        var(--font-weight-semibold);
}

.achievement-description {
    color:
        var(--color-text-faint);

    font-size: 0.41rem;

    line-height: 1.4;
}


/* =========================================================
   281. SCORE / LEVEL WIDGET
   ========================================================= */

.level-card {
    position: relative;

    overflow: hidden;

    padding: 17px;

    border:
        1px solid
        rgba(96, 165, 250, 0.12);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.09),
            rgba(124, 58, 237, 0.06)
        );
}

.level-card::after {
    content: "";

    position: absolute;

    right: -55px;
    top: -55px;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background:
        rgba(96, 165, 250, 0.08);

    filter:
        blur(12px);
}

.level-header {
    position: relative;

    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;
}

.level-label {
    margin-bottom: 4px;

    color:
        var(--color-text-faint);

    font-size: 0.46rem;
}

.level-number {
    color:
        var(--color-text);

    font-size: 1rem;

    font-weight:
        var(--font-weight-bold);
}

.level-xp {
    color:
        var(--color-primary-light);

    font-size: 0.5rem;

    font-weight:
        var(--font-weight-semibold);
}

.level-progress {
    position: relative;

    z-index: 1;

    margin-bottom: 6px;
}

.level-progress .progress-track {
    height: 6px;
}

.level-footer {
    position: relative;

    z-index: 1;

    display: flex;
    justify-content: space-between;

    color:
        var(--color-text-faint);

    font-size: 0.43rem;
}


/* =========================================================
   282. STREAK WIDGET
   ========================================================= */

.streak-card {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px;

    border:
        1px solid
        rgba(245, 158, 11, 0.11);

    border-radius:
        var(--radius-lg);

    background:
        rgba(245, 158, 11, 0.025);
}

.streak-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 13px;

    color:
        #fbbf24;

    background:
        rgba(245, 158, 11, 0.08);

    box-shadow:
        0 0 20px
        rgba(245, 158, 11, 0.07);
}

.streak-value {
    margin-bottom: 3px;

    color:
        var(--color-text);

    font-size: 0.82rem;

    font-weight:
        var(--font-weight-bold);
}

.streak-label {
    color:
        var(--color-text-faint);

    font-size: 0.45rem;
}


/* =========================================================
   283. STUDY HEATMAP
   ========================================================= */

.study-heatmap {
    display: flex;

    flex-direction: column;

    gap: 5px;

    overflow-x: auto;
}

.heatmap-row {
    display: flex;

    gap: 4px;

    min-width: max-content;
}

.heatmap-cell {
    width: 10px;
    height: 10px;

    border-radius: 2px;

    background:
        rgba(255, 255, 255, 0.045);

    transition:
        transform var(--transition-fast);
}

.heatmap-cell:hover {
    transform:
        scale(1.35);
}

.heatmap-cell.level-1 {
    background:
        rgba(59, 130, 246, 0.18);
}

.heatmap-cell.level-2 {
    background:
        rgba(59, 130, 246, 0.32);
}

.heatmap-cell.level-3 {
    background:
        rgba(59, 130, 246, 0.5);
}

.heatmap-cell.level-4 {
    background:
        rgba(96, 165, 250, 0.78);

    box-shadow:
        0 0 7px
        rgba(96, 165, 250, 0.16);
}


/* =========================================================
   284. COURSE DETAIL HERO
   ========================================================= */

.course-detail-hero {
    position: relative;

    overflow: hidden;

    padding: 22px;

    margin-bottom: 18px;

    border:
        1px solid
        rgba(96, 165, 250, 0.1);

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.12),
            rgba(124, 58, 237, 0.07)
        );
}

.course-detail-hero::before {
    content: "";

    position: absolute;

    right: -80px;
    top: -100px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        rgba(96, 165, 250, 0.08);

    filter:
        blur(20px);
}

.course-detail-content {
    position: relative;

    z-index: 1;

    max-width: 700px;
}

.course-detail-category {
    margin-bottom: 7px;

    color:
        var(--color-primary-light);

    font-size: 0.46rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.course-detail-title {
    margin-bottom: 7px;

    color:
        var(--color-text);

    font-size:
        clamp(
            1.1rem,
            3vw,
            1.7rem
        );

    font-weight:
        var(--font-weight-bold);
}

.course-detail-description {
    margin-bottom: 15px;

    color:
        var(--color-text-faint);

    font-size: 0.54rem;

    line-height: 1.6;
}

.course-detail-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;
}


/* =========================================================
   285. COURSE DETAIL LAYOUT
   ========================================================= */

.course-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        250px;

    gap: 16px;
}

.course-lessons {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


/* =========================================================
   286. LESSON ITEM
   ========================================================= */

.lesson-item {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 54px;

    padding:
        8px
        10px;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, 0.02);

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.lesson-item:hover {
    border-color:
        rgba(96, 165, 250, 0.12);

    background:
        rgba(255, 255, 255, 0.035);
}

.lesson-number {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    flex-shrink: 0;

    border-radius: 8px;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.04);

    font-size: 0.46rem;
}

.lesson-item.completed .lesson-number {
    color:
        #86efac;

    background:
        rgba(34, 197, 94, 0.08);
}

.lesson-info {
    flex: 1;

    min-width: 0;
}

.lesson-title {
    overflow: hidden;

    margin-bottom: 3px;

    color:
        var(--color-text-muted);

    font-size: 0.54rem;

    font-weight:
        var(--font-weight-semibold);

    text-overflow: ellipsis;

    white-space: nowrap;
}

.lesson-duration {
    color:
        var(--color-text-faint);

    font-size: 0.43rem;
}

.lesson-action {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 8px;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.025);

    cursor: pointer;
}

.lesson-action:hover {
    color:
        var(--color-primary-light);

    border-color:
        rgba(96, 165, 250, 0.15);
}


/* =========================================================
   287. RESPONSIVE COURSES
   ========================================================= */

@media (max-width: 1000px) {

    .stats-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .course-card.featured {
        grid-column:
            span 1;
    }

    .course-detail-layout {
        grid-template-columns:
            1fr;
    }
}


@media (max-width: 600px) {

    .stats-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap: 8px;
    }

    .stat-card {
        padding: 11px;
    }

    .stat-value {
        font-size: 0.88rem;
    }

    .course-grid,
    .certificate-grid {
        grid-template-columns:
            1fr;
    }

    .course-cover {
        min-height: 135px;
    }

    .section-header {
        align-items: flex-start;
    }

    .learning-roadmap {
        padding-left: 22px;
    }

    .roadmap-node {
        left: -22px;
    }
}


@media (max-width: 380px) {

    .stats-grid {
        grid-template-columns:
            1fr;
    }

    .roadmap-item {
        grid-template-columns:
            1fr;
    }

    .roadmap-status {
        width: fit-content;
    }
}


/* =========================================================
   288. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .course-card,
    .stat-card,
    .course-start-btn,
    .course-save-btn,
    .roadmap-current .roadmap-node {
        transition: none;
        animation: none;
    }
}


/* =========================================================
   289. END OF PART 9
   ========================================================= */
/* =========================================================
   ADOPT SKILL — PART 10
   Dashboard Panels • Search • Notifications • Modals
   Forms • Dropdowns • Tooltips • Empty States
   ========================================================= */


/* =========================================================
   290. DASHBOARD PANEL
   ========================================================= */

.dashboard-panel {
    position: relative;

    overflow: hidden;

    padding: 15px;

    border:
        1px solid
        rgba(255, 255, 255, 0.065);

    border-radius:
        var(--radius-lg);

    background:
        rgba(255, 255, 255, 0.025);

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, 0.08);
}

.dashboard-panel + .dashboard-panel {
    margin-top: 13px;
}

.dashboard-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 13px;
}

.dashboard-panel-title {
    display: flex;
    align-items: center;

    gap: 7px;

    color:
        var(--color-text-soft);

    font-size: 0.61rem;

    font-weight:
        var(--font-weight-semibold);
}

.dashboard-panel-title-icon {
    display: grid;
    place-items: center;

    width: 25px;
    height: 25px;

    border-radius: 7px;

    color:
        var(--color-primary-light);

    background:
        rgba(59, 130, 246, 0.08);
}

.dashboard-panel-action {
    color:
        var(--color-text-faint);

    background:
        transparent;

    border: 0;

    font-family: inherit;

    font-size: 0.44rem;

    cursor: pointer;

    transition:
        color var(--transition-fast);
}

.dashboard-panel-action:hover {
    color:
        var(--color-primary-light);
}


/* =========================================================
   291. DASHBOARD TWO-COLUMN GRID
   ========================================================= */

.dashboard-two-column {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(220px, 0.85fr);

    gap: 13px;
}

.dashboard-three-column {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 13px;
}


/* =========================================================
   292. SEARCH CONTAINER
   ========================================================= */

.search-container {
    position: relative;

    width: min(
        100%,
        340px
    );
}

.search-input {
    width: 100%;

    min-height: 36px;

    padding:
        0
        34px;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        10px;

    outline: none;

    color:
        var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.025);

    font-family: inherit;

    font-size: 0.49rem;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.search-input::placeholder {
    color:
        var(--color-text-faint);
}

.search-input:hover {
    background:
        rgba(255, 255, 255, 0.035);
}

.search-input:focus {
    border-color:
        rgba(96, 165, 250, 0.3);

    background:
        rgba(255, 255, 255, 0.04);

    box-shadow:
        0 0 0 3px
        rgba(59, 130, 246, 0.06);
}

.search-icon {
    position: absolute;

    left: 11px;
    top: 50%;

    width: 14px;
    height: 14px;

    color:
        var(--color-text-faint);

    transform:
        translateY(-50%);

    pointer-events: none;
}

.search-shortcut {
    position: absolute;

    right: 8px;
    top: 50%;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 23px;
    height: 20px;

    padding: 0 5px;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 5px;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.03);

    font-size: 0.39rem;

    transform:
        translateY(-50%);
}


/* =========================================================
   293. SEARCH RESULTS
   ========================================================= */

.search-results {
    position: absolute;

    z-index: 100;

    top: calc(100% + 7px);
    left: 0;
    right: 0;

    max-height: 330px;

    overflow-y: auto;

    padding: 5px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius:
        12px;

    background:
        rgba(11, 17, 29, 0.96);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.3);

    backdrop-filter:
        blur(18px);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-5px);

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast),
        visibility var(--transition-fast);
}

.search-container.active .search-results {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}

.search-result-item {
    display: flex;
    align-items: center;

    gap: 9px;

    width: 100%;

    padding: 8px;

    border: 0;

    border-radius: 8px;

    color:
        var(--color-text-soft);

    background:
        transparent;

    text-align: left;

    font-family: inherit;

    cursor: pointer;

    transition:
        background var(--transition-fast);
}

.search-result-item:hover {
    background:
        rgba(255, 255, 255, 0.05);
}

.search-result-icon {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border-radius: 8px;

    color:
        var(--color-primary-light);

    background:
        rgba(59, 130, 246, 0.08);
}

.search-result-content {
    min-width: 0;
}

.search-result-title {
    overflow: hidden;

    margin-bottom: 2px;

    color:
        var(--color-text-soft);

    font-size: 0.48rem;

    font-weight:
        var(--font-weight-semibold);

    text-overflow: ellipsis;

    white-space: nowrap;
}

.search-result-meta {
    color:
        var(--color-text-faint);

    font-size: 0.4rem;
}


/* =========================================================
   294. NOTIFICATION BUTTON
   ========================================================= */

.notification-button {
    position: relative;

    display: grid;
    place-items: center;

    width: 35px;
    height: 35px;

    flex-shrink: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 10px;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.025);

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.notification-button:hover {
    color:
        var(--color-text-soft);

    border-color:
        rgba(96, 165, 250, 0.15);

    background:
        rgba(255, 255, 255, 0.045);
}

.notification-dot {
    position: absolute;

    top: 7px;
    right: 7px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #ef4444;

    box-shadow:
        0 0 7px
        rgba(239, 68, 68, 0.5);
}


/* =========================================================
   295. NOTIFICATION PANEL
   ========================================================= */

.notification-panel {
    position: fixed;

    z-index: 1000;

    top: 65px;
    right: 20px;

    width: min(
        340px,
        calc(100vw - 30px)
    );

    max-height: 450px;

    overflow-y: auto;

    padding: 7px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius:
        14px;

    background:
        rgba(10, 15, 26, 0.96);

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.4);

    backdrop-filter:
        blur(20px);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-8px);

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast),
        visibility var(--transition-fast);
}

.notification-panel.open {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        8px
        9px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}

.notification-title {
    color:
        var(--color-text-soft);

    font-size: 0.54rem;

    font-weight:
        var(--font-weight-semibold);
}

.notification-clear {
    border: 0;

    color:
        var(--color-primary-light);

    background:
        transparent;

    font-family: inherit;

    font-size: 0.4rem;

    cursor: pointer;
}

.notification-item {
    display: flex;

    gap: 9px;

    padding: 10px 8px;

    border-radius: 8px;

    transition:
        background var(--transition-fast);
}

.notification-item:hover {
    background:
        rgba(255, 255, 255, 0.035);
}

.notification-item.unread {
    background:
        rgba(59, 130, 246, 0.04);
}

.notification-icon {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    flex-shrink: 0;

    border-radius: 8px;

    color:
        var(--color-primary-light);

    background:
        rgba(59, 130, 246, 0.08);
}

.notification-content {
    min-width: 0;
}

.notification-message {
    margin-bottom: 3px;

    color:
        var(--color-text-muted);

    font-size: 0.46rem;

    line-height: 1.45;
}

.notification-time {
    color:
        var(--color-text-faint);

    font-size: 0.39rem;
}


/* =========================================================
   296. PROFILE DROPDOWN
   ========================================================= */

.profile-dropdown {
    position: relative;
}

.profile-trigger {
    display: flex;
    align-items: center;

    gap: 7px;

    padding: 3px;

    border: 0;

    color:
        var(--color-text-soft);

    background:
        transparent;

    font-family: inherit;

    cursor: pointer;
}

.profile-avatar {
    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    border:
        1px solid
        rgba(96, 165, 250, 0.18);

    border-radius: 10px;

    color:
        #dbeafe;

    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.18),
            rgba(124, 58, 237, 0.16)
        );

    font-size: 0.47rem;

    font-weight:
        var(--font-weight-bold);
}

.profile-name {
    max-width: 100px;

    overflow: hidden;

    color:
        var(--color-text-muted);

    font-size: 0.46rem;

    font-weight:
        var(--font-weight-semibold);

    text-overflow: ellipsis;

    white-space: nowrap;
}

.profile-dropdown-menu {
    position: absolute;

    z-index: 500;

    top: calc(100% + 8px);
    right: 0;

    width: 190px;

    padding: 5px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    background:
        rgba(10, 15, 26, 0.97);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.35);

    backdrop-filter:
        blur(18px);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-5px);

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast),
        visibility var(--transition-fast);
}

.profile-dropdown.open .profile-dropdown-menu {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}

.profile-menu-item {
    display: flex;
    align-items: center;

    gap: 8px;

    width: 100%;

    min-height: 33px;

    padding:
        0
        8px;

    border: 0;

    border-radius: 7px;

    color:
        var(--color-text-faint);

    background:
        transparent;

    font-family: inherit;

    font-size: 0.45rem;

    text-align: left;

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background var(--transition-fast);
}

.profile-menu-item:hover {
    color:
        var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.045);
}

.profile-menu-item.danger:hover {
    color:
        #fca5a5;

    background:
        rgba(239, 68, 68, 0.05);
}

.profile-menu-divider {
    height: 1px;

    margin:
        4px
        3px;

    background:
        rgba(255, 255, 255, 0.06);
}


/* =========================================================
   297. MODAL SYSTEM
   ========================================================= */

.modal {
    position: fixed;

    z-index: 2000;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 18px;

    background:
        rgba(2, 5, 10, 0.72);

    backdrop-filter:
        blur(7px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal);
}

.modal.open {
    opacity: 1;

    visibility: visible;
}

.modal-dialog {
    width: min(
        520px,
        100%
    );

    max-height:
        min(
            700px,
            calc(100vh - 35px)
        );

    overflow-y: auto;

    padding: 18px;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius:
        16px;

    background:
        rgba(12, 18, 30, 0.97);

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, 0.5);

    transform:
        translateY(12px)
        scale(0.98);

    transition:
        transform var(--transition-normal);
}

.modal.open .modal-dialog {
    transform:
        translateY(0)
        scale(1);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 15px;
}

.modal-title {
    color:
        var(--color-text);

    font-size: 0.72rem;

    font-weight:
        var(--font-weight-bold);
}

.modal-description {
    margin-top: 4px;

    color:
        var(--color-text-faint);

    font-size: 0.46rem;

    line-height: 1.5;
}

.modal-close {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 8px;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.025);

    cursor: pointer;
}

.modal-close:hover {
    color:
        var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.05);
}

.modal-body {
    color:
        var(--color-text-muted);

    font-size: 0.5rem;

    line-height: 1.6;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    margin-top: 17px;

    padding-top: 13px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);
}


/* =========================================================
   298. FORM SYSTEM
   ========================================================= */

.form-group {
    margin-bottom: 13px;
}

.form-label {
    display: block;

    margin-bottom: 5px;

    color:
        var(--color-text-muted);

    font-size: 0.46rem;

    font-weight:
        var(--font-weight-semibold);
}

.form-label.required::after {
    content: " *";

    color:
        #f87171;
}

.form-control {
    width: 100%;

    min-height: 36px;

    padding:
        0
        10px;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        9px;

    outline: none;

    color:
        var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.025);

    font-family: inherit;

    font-size: 0.48rem;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

textarea.form-control {
    min-height: 100px;

    padding:
        9px
        10px;

    resize: vertical;
}

select.form-control {
    cursor: pointer;
}

.form-control::placeholder {
    color:
        var(--color-text-faint);
}

.form-control:focus {
    border-color:
        rgba(96, 165, 250, 0.3);

    box-shadow:
        0 0 0 3px
        rgba(59, 130, 246, 0.05);
}

.form-help {
    margin-top: 4px;

    color:
        var(--color-text-faint);

    font-size: 0.4rem;
}

.form-error {
    display: none;

    margin-top: 4px;

    color:
        #fca5a5;

    font-size: 0.4rem;
}

.form-group.has-error .form-control {
    border-color:
        rgba(239, 68, 68, 0.35);
}

.form-group.has-error .form-error {
    display: block;
}


/* =========================================================
   299. CHECKBOX & RADIO
   ========================================================= */

.form-check {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 8px;

    cursor: pointer;
}

.form-check input {
    width: 14px;
    height: 14px;

    accent-color:
        #3b82f6;

    cursor: pointer;
}

.form-check-label {
    color:
        var(--color-text-faint);

    font-size: 0.45rem;
}


/* =========================================================
   300. PRIMARY BUTTON SYSTEM
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 34px;

    padding:
        0
        12px;

    border:
        1px solid
        transparent;

    border-radius:
        9px;

    font-family: inherit;

    font-size: 0.47rem;

    font-weight:
        var(--font-weight-semibold);

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn:hover {
    transform:
        translateY(-1px);
}

.btn:active {
    transform:
        translateY(0);
}

.btn-primary {
    color:
        #eff6ff;

    border-color:
        rgba(96, 165, 250, 0.2);

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    box-shadow:
        0 7px 20px
        rgba(37, 99, 235, 0.14);
}

.btn-primary:hover {
    box-shadow:
        0 10px 25px
        rgba(37, 99, 235, 0.23);
}

.btn-secondary {
    color:
        var(--color-text-soft);

    border-color:
        rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.035);
}

.btn-secondary:hover {
    background:
        rgba(255, 255, 255, 0.06);
}

.btn-danger {
    color:
        #fecaca;

    border-color:
        rgba(239, 68, 68, 0.14);

    background:
        rgba(239, 68, 68, 0.07);
}

.btn-success {
    color:
        #bbf7d0;

    border-color:
        rgba(34, 197, 94, 0.14);

    background:
        rgba(34, 197, 94, 0.07);
}

.btn-sm {
    min-height: 29px;

    padding:
        0
        9px;

    font-size: 0.42rem;
}

.btn-lg {
    min-height: 41px;

    padding:
        0
        16px;

    font-size: 0.51rem;
}

.btn-block {
    width: 100%;
}


/* =========================================================
   301. TOOLTIP
   ========================================================= */

.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);

    position: absolute;

    z-index: 5000;

    left: 50%;
    bottom: calc(100% + 7px);

    width: max-content;

    max-width: 180px;

    padding:
        5px
        7px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 6px;

    color:
        var(--color-text-soft);

    background:
        rgba(8, 12, 21, 0.96);

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.3);

    font-size: 0.4rem;

    line-height: 1.3;

    pointer-events: none;

    opacity: 0;

    visibility: hidden;

    transform:
        translateX(-50%)
        translateY(3px);

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast),
        visibility var(--transition-fast);
}

.tooltip:hover::after {
    opacity: 1;

    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   302. EMPTY STATE
   ========================================================= */

.empty-state {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 210px;

    padding: 25px;

    border:
        1px dashed
        rgba(255, 255, 255, 0.08);

    border-radius:
        var(--radius-lg);

    text-align: center;
}

.empty-state-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 11px;

    border-radius: 14px;

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.04);
}

.empty-state-title {
    margin-bottom: 4px;

    color:
        var(--color-text-soft);

    font-size: 0.62rem;

    font-weight:
        var(--font-weight-semibold);
}

.empty-state-description {
    max-width: 330px;

    margin-bottom: 13px;

    color:
        var(--color-text-faint);

    font-size: 0.45rem;

    line-height: 1.5;
}


/* =========================================================
   303. LOADING SKELETON
   ========================================================= */

.skeleton {
    position: relative;

    overflow: hidden;

    border-radius: 6px;

    background:
        rgba(255, 255, 255, 0.045);
}

.skeleton::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.055),
            transparent
        );

    transform:
        translateX(-100%);

    animation:
        skeleton-loading
        1.5s
        infinite;
}

@keyframes skeleton-loading {

    100% {
        transform:
            translateX(100%);
    }
}

.skeleton-title {
    width: 55%;

    height: 11px;

    margin-bottom: 8px;
}

.skeleton-text {
    width: 90%;

    height: 8px;

    margin-bottom: 6px;
}

.skeleton-text.short {
    width: 65%;
}

.skeleton-button {
    width: 90px;

    height: 30px;

    margin-top: 10px;
}


/* =========================================================
   304. TABLE SYSTEM
   ========================================================= */

.data-table-wrapper {
    width: 100%;

    overflow-x: auto;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius:
        11px;
}

.data-table {
    width: 100%;

    min-width: 560px;

    border-collapse: collapse;
}

.data-table th {
    padding:
        10px
        11px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);

    color:
        var(--color-text-faint);

    background:
        rgba(255, 255, 255, 0.025);

    font-size: 0.42rem;

    font-weight:
        var(--font-weight-semibold);

    text-align: left;
}

.data-table td {
    padding:
        10px
        11px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.04);

    color:
        var(--color-text-muted);

    font-size: 0.45rem;
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr {
    transition:
        background var(--transition-fast);
}

.data-table tbody tr:hover {
    background:
        rgba(255, 255, 255, 0.025);
}


/* =========================================================
   305. STATUS BADGES
   ========================================================= */

.status-badge {
    display: inline-flex;
    align-items: center;

    min-height: 20px;

    padding:
        0
        7px;

    border-radius:
        var(--radius-full);

    font-size: 0.39rem;

    font-weight:
        var(--font-weight-semibold);
}

.status-badge.active {
    color:
        #86efac;

    background:
        rgba(34, 197, 94, 0.08);
}

.status-badge.pending {
    color:
        #fde68a;

    background:
        rgba(245, 158, 11, 0.08);
}

.status-badge.completed {
    color:
        #93c5fd;

    background:
        rgba(59, 130, 246, 0.08);
}

.status-badge.failed {
    color:
        #fca5a5;

    background:
        rgba(239, 68, 68, 0.08);
}


/* =========================================================
   306. RESPONSIVE DASHBOARD PANELS
   ========================================================= */

@media (max-width: 850px) {

    .dashboard-two-column {
        grid-template-columns:
            1fr;
    }

    .dashboard-three-column {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .search-container {
        width: 240px;
    }
}


@media (max-width: 600px) {

    .dashboard-three-column {
        grid-template-columns:
            1fr;
    }

    .search-container {
        width: 100%;
    }

    .profile-name {
        display: none;
    }

    .notification-panel {
        top: 58px;
        right: 12px;
    }

    .modal {
        padding: 10px;
    }

    .modal-dialog {
        max-height:
            calc(100vh - 20px);

        padding: 14px;
    }
}


@media (max-width: 420px) {

    .dashboard-panel {
        padding: 12px;
    }

    .dashboard-panel-header {
        align-items: flex-start;
    }

    .search-shortcut {
        display: none;
    }

    .search-input {
        padding-right: 12px;
    }
}


/* =========================================================
   307. PRINT SUPPORT
   ========================================================= */

@media print {

    .sidebar,
    .top-header,
    .notification-button,
    .profile-dropdown,
    .ai-tutor-widget,
    .modal,
    .course-filter-bar,
    .btn {
        display: none !important;
    }

    .main-content {
        margin: 0 !important;

        width: 100% !important;
    }

    .dashboard-panel,
    .course-card,
    .certificate-card {
        break-inside: avoid;

        border:
            1px solid
            #cccccc;

        color:
            #111111;

        background:
            #ffffff;
    }
}


/* =========================================================
   308. END OF PART 10
   ========================================================= */