/* ============================================
   LinguaConnect UI System v3 (2026)
   Light Pastel Harmony
   ============================================ */

:root {
    /* Background & Surface - Soft warm cream tones */
    --lc-bg: #fafbff;
    --lc-bg-alt: #f5f6fb;
    --lc-surface: #ffffff;
    --lc-surface-soft: #f7f8fd;
    --lc-surface-hover: #f2f4fb;
    --lc-border: #eaecf5;
    --lc-border-strong: #dde0ec;

    /* Text */
    --lc-text: #2d3748;
    --lc-text-muted: #6b7390;
    --lc-text-light: #9ba0b6;

    /* Brand - Soft Lavender/Periwinkle */
    --lc-primary: #8a7ef0;
    --lc-primary-dark: #7166e8;
    --lc-primary-light: #c7c0f7;
    --lc-primary-bg: rgba(138, 126, 240, 0.1);
    --lc-primary-soft: #eae7fc;

    /* Accent - Soft coral/peach */
    --lc-accent: #ff9f8e;
    --lc-accent-bg: rgba(255, 159, 142, 0.12);

    /* Secondary - Soft teal */
    --lc-secondary: #6bc9c2;
    --lc-secondary-bg: rgba(107, 201, 194, 0.12);

    /* States */
    --lc-success: #7dd3a2;
    --lc-warning: #ffcd85;
    --lc-error: #ff8b8b;
    --lc-info: #8ab4f0;

    /* Radii */
    --lc-radius-sm: 10px;
    --lc-radius-md: 14px;
    --lc-radius-lg: 18px;
    --lc-radius-xl: 24px;
    --lc-radius-pill: 999px;

    /* Shadows - very subtle */
    --lc-shadow-xs: 0 1px 2px rgba(74, 85, 124, 0.04);
    --lc-shadow-sm: 0 2px 6px rgba(74, 85, 124, 0.06);
    --lc-shadow-md: 0 6px 16px rgba(74, 85, 124, 0.08);
    --lc-shadow-lg: 0 12px 32px rgba(74, 85, 124, 0.10);
    --lc-shadow-xl: 0 20px 48px rgba(74, 85, 124, 0.12);

    --lc-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    /* Gradients - Light and airy */
    --lc-gradient-brand: linear-gradient(135deg, #a89df5 0%, #f4a0b4 100%);
    --lc-gradient-soft: linear-gradient(135deg, #f7f8fd 0%, #eae7fc 100%);
    --lc-gradient-hero: linear-gradient(135deg, #e9e4fc 0%, #fbe6ed 50%, #e3f3f1 100%);
    --lc-gradient-mint: linear-gradient(135deg, #d4f1ec 0%, #e9e4fc 100%);
    --lc-gradient-peach: linear-gradient(135deg, #ffe5dc 0%, #fde5ea 100%);

    --bs-primary: var(--lc-primary);
    --bs-body-bg: var(--lc-bg);
    --bs-body-color: var(--lc-text);
    --bs-body-font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body.app-body {
    margin: 0;
    display: flex;
    flex-direction: column;
    color: var(--lc-text);
    background: var(--lc-bg);
    background-image:
        radial-gradient(circle at 10% 0%, rgba(168, 157, 245, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 90% 100%, rgba(107, 201, 194, 0.06) 0%, transparent 50%);
    background-attachment: fixed;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: "Space Grotesk", "Inter", sans-serif;
    letter-spacing: -0.02em;
    color: var(--lc-text);
    font-weight: 700;
}

h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; }

p { color: var(--lc-text-muted); line-height: 1.65; }

a {
    color: var(--lc-primary);
    transition: color var(--lc-transition);
    text-decoration: none;
}
a:hover { color: var(--lc-primary-dark); }

::selection { background: rgba(138, 126, 240, 0.18); }

/* ---- Layout ---- */
.app-main { flex: 1; padding: 1.5rem 0 3rem; }
.app-page { width: 100%; }

.app-container,
.page-shell,
.app-main .container,
.app-main .container-fluid {
    width: min(1140px, calc(100% - 2rem));
    margin-left: auto;
    margin-right: auto;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.35rem;
    background: var(--lc-surface);
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-xs);
}

.page-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 700;
}

.page-title i {
    color: var(--lc-primary);
    background: var(--lc-primary-bg);
    padding: 0.5rem;
    border-radius: var(--lc-radius-sm);
    font-size: 1rem;
}

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.filter-pills .nav-link {
    border-radius: var(--lc-radius-pill);
    border: 1px solid var(--lc-border);
    color: var(--lc-text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
    background: var(--lc-surface);
    transition: all var(--lc-transition);
}

.filter-pills .nav-link:hover {
    border-color: var(--lc-primary-light);
    color: var(--lc-primary);
    background: var(--lc-primary-bg);
}

.filter-pills .nav-link.active {
    background: var(--lc-primary);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(138, 126, 240, 0.3);
}

.soft-panel {
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    background: var(--lc-surface);
    overflow: hidden;
}

/* ---- Navbar ---- */
.app-navbar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--lc-border);
    box-shadow: 0 1px 3px rgba(74, 85, 124, 0.04);
    padding: 0.6rem 0;
    z-index: 1030;
}

.app-navbar .navbar-brand {
    color: var(--lc-text);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.12rem;
    font-weight: 800;
}

.app-navbar .navbar-brand i {
    color: var(--lc-primary);
    background: var(--lc-primary-bg);
    padding: 0.35rem;
    border-radius: var(--lc-radius-sm);
    font-size: 1rem;
}

.brand-seed {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lc-accent);
    box-shadow: 0 0 0 3px var(--lc-accent-bg);
}

.app-navbar .nav-link {
    color: var(--lc-text-muted);
    font-weight: 600;
    font-size: 0.88rem;
    border-radius: var(--lc-radius-sm);
    padding: 0.45rem 0.85rem;
    transition: all var(--lc-transition);
    display: inline-flex;
    align-items: center;
}

.app-navbar .nav-link:hover {
    color: var(--lc-primary);
    background: var(--lc-primary-bg);
}

.app-navbar .nav-link.active {
    color: var(--lc-primary);
    background: var(--lc-primary-bg);
}

.app-navbar .navbar-toggler {
    border: 1px solid var(--lc-border);
    padding: 0.35rem 0.6rem;
}

.app-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(138, 126, 240, 0.15);
}

.nav-user-tools { gap: 0.25rem; }

.nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    background: var(--lc-gradient-brand);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(138, 126, 240, 0.3);
}

.nav-notif-badge {
    top: 2px;
    right: 2px;
    font-size: 0.62rem;
    padding: 0.2em 0.45em;
    background: var(--lc-accent) !important;
}

.navbar .dropdown-menu {
    margin-top: 0.5rem;
    border-radius: var(--lc-radius-md);
    border: 1px solid var(--lc-border);
    box-shadow: var(--lc-shadow-lg);
    padding: 0.4rem;
    min-width: 210px;
    background: var(--lc-surface);
}

.navbar .dropdown-item {
    border-radius: var(--lc-radius-sm);
    font-weight: 600;
    font-size: 0.87rem;
    color: var(--lc-text);
    padding: 0.55rem 0.8rem;
    transition: background var(--lc-transition);
}

.navbar .dropdown-item i {
    width: 18px;
    margin-right: 0.45rem;
    color: var(--lc-text-muted);
}

.navbar .dropdown-item:hover {
    color: var(--lc-primary);
    background: var(--lc-primary-bg);
}

.navbar .dropdown-item:hover i { color: var(--lc-primary); }

/* ---- Buttons ---- */
.btn {
    border-radius: var(--lc-radius-sm);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    transition: all var(--lc-transition);
    border: none;
    padding: 0.55rem 1.1rem;
}

.btn:active { transform: scale(0.98); }

.btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    border-radius: 8px;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
}

.btn-primary {
    background: var(--lc-primary);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--lc-primary-dark);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(138, 126, 240, 0.35);
    transform: translateY(-1px);
}

.btn-outline-primary {
    border: 1.5px solid var(--lc-primary-light);
    color: var(--lc-primary);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--lc-primary);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(138, 126, 240, 0.3);
}

.btn-gradient,
.btn-auth,
.btn-step,
.btn-complete,
.btn-save {
    border: none;
    color: #ffffff;
    background: var(--lc-gradient-brand);
}

.btn-gradient:hover,
.btn-auth:hover,
.btn-step:hover,
.btn-complete:hover,
.btn-save:hover {
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(168, 157, 245, 0.4);
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.btn-step-outline,
.btn-outline-light {
    border: 1.5px solid var(--lc-border);
    color: var(--lc-text-muted);
    background: var(--lc-surface);
}

.btn-step-outline:hover,
.btn-outline-light:hover {
    border-color: var(--lc-primary-light);
    color: var(--lc-primary);
    background: var(--lc-surface);
}

.btn-light {
    background: var(--lc-surface);
    color: var(--lc-primary);
    border: 1px solid var(--lc-border);
}

.btn-light:hover {
    background: var(--lc-primary-bg);
    color: var(--lc-primary-dark);
    border-color: var(--lc-primary-light);
}

.btn-danger {
    background: var(--lc-error);
    color: #ffffff;
}

.btn-danger:hover {
    background: #ff6c6c;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(255, 139, 139, 0.3);
}

.btn-success {
    background: var(--lc-success);
    color: #ffffff;
}

.btn-warning {
    background: var(--lc-warning);
    color: var(--lc-text);
}

.btn-outline-danger {
    border: 1.5px solid var(--lc-error);
    color: var(--lc-error);
    background: transparent;
}

.btn-outline-danger:hover {
    background: var(--lc-error);
    color: #ffffff;
}

.btn-secondary {
    background: var(--lc-surface-soft);
    color: var(--lc-text-muted);
    border: 1px solid var(--lc-border);
}

/* ---- Cards & Panels ---- */
.card,
.stat-card,
.card-room,
.card-user,
.card-event,
.card-badge,
.card-challenge,
.card-culture,
.quiz-card,
.word-card,
.topic-card,
.roadmap-card,
.badge-card,
.profile-section,
.edit-section,
.info-item,
.auth-card,
.onboarding-card {
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    background: var(--lc-surface);
    box-shadow: var(--lc-shadow-xs);
    transition: box-shadow var(--lc-transition), transform var(--lc-transition), border-color var(--lc-transition);
}

.card:hover,
.stat-card:hover,
.card-room:hover,
.card-user:hover,
.card-event:hover,
.card-badge:hover,
.card-challenge:hover,
.card-culture:hover,
.quiz-card:hover,
.word-card:hover,
.topic-card:hover,
.roadmap-card:hover,
.badge-card:hover {
    box-shadow: var(--lc-shadow-md);
    transform: translateY(-2px);
    border-color: var(--lc-primary-light);
}

.profile-section:hover,
.edit-section:hover,
.info-item:hover {
    box-shadow: var(--lc-shadow-sm);
}

.card-room {
    border-left: 3px solid var(--lc-primary);
}

.card-room .room-title,
.room-title {
    font-weight: 700;
    color: var(--lc-text);
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

.card-room .room-language,
.room-language {
    color: var(--lc-primary);
    font-weight: 700;
    font-size: 0.85rem;
}

.room-participants { color: var(--lc-text-muted); font-size: 0.85rem; }

.card-user { text-align: center; padding: 1.35rem 1rem; }
.card-user-avatar { margin: 0 auto 0.8rem; }
.card-user-name { font-weight: 700; margin-bottom: 0.15rem; font-size: 0.95rem; }
.card-user-bio { color: var(--lc-text-muted); font-size: 0.82rem; }

.card-user-languages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
}

.card-header {
    border-bottom: 1px solid var(--lc-border);
    background: var(--lc-surface-soft);
    font-weight: 700;
    padding: 0.85rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lc-text);
}

.card-header i { color: var(--lc-primary); }

/* Card Event */
.card-event { overflow: hidden; }

.card-event-header {
    position: relative;
    height: 140px;
    background: var(--lc-gradient-mint);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-event-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-event-header > i {
    font-size: 2.5rem;
    color: rgba(138, 126, 240, 0.4);
}

.card-event-date {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--lc-text);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.65rem;
    border-radius: var(--lc-radius-sm);
    backdrop-filter: blur(4px);
    border: 1px solid var(--lc-border);
}

.card-event-title { font-weight: 700; font-size: 1rem; color: var(--lc-text); }

/* Card Culture */
.card-culture { overflow: hidden; }

.card-culture-header {
    height: 110px;
    background: var(--lc-gradient-peach);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border-bottom: 1px solid var(--lc-border);
}

.card-culture-title { font-weight: 700; font-size: 1rem; color: var(--lc-text); }

/* ---- Hero / Summary ---- */
.hero-section,
.profile-hero,
.podium-section {
    background: var(--lc-gradient-hero);
    border-radius: var(--lc-radius-xl);
    color: var(--lc-text);
    box-shadow: var(--lc-shadow-sm);
    overflow: hidden;
    position: relative;
}

.hero-section::before,
.profile-hero::before,
.podium-section::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(255, 205, 178, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-section::after,
.profile-hero::after,
.podium-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(168, 157, 245, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-section { padding: 3.5rem 1.5rem; }

.hero-section > *,
.profile-hero > *,
.podium-section > * {
    position: relative;
    z-index: 1;
}

.hero-section h1,
.hero-section h2,
.hero-section h3,
.profile-hero h1,
.profile-hero h2,
.profile-hero h3 {
    color: var(--lc-text);
}

.hero-section p,
.profile-hero p,
.podium-section p {
    color: var(--lc-text-muted);
}

.hero-section .lead { color: var(--lc-text); opacity: 0.8; }

.gradient-text {
    background: var(--lc-gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pulse-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lc-success);
    box-shadow: 0 0 0 0 rgba(125, 211, 162, 0.5);
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(125, 211, 162, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(125, 211, 162, 0); }
    100% { box-shadow: 0 0 0 0 rgba(125, 211, 162, 0); }
}

/* ---- Forms ---- */
.form-control,
.form-select {
    border: 1.5px solid var(--lc-border);
    border-radius: var(--lc-radius-sm);
    padding: 0.65rem 0.9rem;
    background: var(--lc-surface);
    color: var(--lc-text);
    font-size: 0.9rem;
    transition: border-color var(--lc-transition), box-shadow var(--lc-transition);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--lc-primary);
    box-shadow: 0 0 0 3px rgba(138, 126, 240, 0.1);
    background: var(--lc-surface);
}

.form-control::placeholder { color: var(--lc-text-light); }

.form-label {
    color: var(--lc-text);
    font-weight: 600;
    margin-bottom: 0.35rem;
    font-size: 0.88rem;
}

.form-floating > .form-control,
.form-floating > .form-select {
    height: calc(3.35rem + 3px);
}

.form-floating > label {
    color: var(--lc-text-muted);
}

.form-check-input {
    border: 1.5px solid var(--lc-border-strong);
}

.form-check-input:checked {
    background-color: var(--lc-primary);
    border-color: var(--lc-primary);
}

.form-range::-webkit-slider-thumb { background: var(--lc-primary); }
.form-range::-moz-range-thumb { background: var(--lc-primary); }

.input-group-text {
    background: var(--lc-surface-soft);
    border: 1.5px solid var(--lc-border);
    color: var(--lc-text-muted);
}

/* ---- Tables / Badges / Pagination ---- */
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * {
    border-bottom-color: var(--lc-border);
    color: var(--lc-text);
    vertical-align: middle;
    padding: 0.85rem 1rem;
}
.table-light { --bs-table-bg: var(--lc-surface-soft); color: var(--lc-text); }

.table-hover > tbody > tr:hover > * {
    background: var(--lc-surface-hover);
    --bs-table-accent-bg: var(--lc-surface-hover);
}

.badge {
    border-radius: 6px;
    font-weight: 600;
    padding: 0.3em 0.6em;
    font-size: 0.72rem;
}

.badge.bg-primary, .bg-primary { background: var(--lc-primary) !important; }
.badge.bg-danger, .bg-danger { background: var(--lc-error) !important; }
.badge.bg-success, .bg-success { background: var(--lc-success) !important; color: #0d6f3f !important; }
.badge.bg-warning, .bg-warning { background: var(--lc-warning) !important; color: var(--lc-text) !important; }

.badge.bg-primary.bg-opacity-10 {
    background: var(--lc-primary-bg) !important;
    color: var(--lc-primary) !important;
}
.badge.bg-success.bg-opacity-10 {
    background: rgba(125, 211, 162, 0.15) !important;
    color: #2e7d4a !important;
}
.badge.bg-warning.bg-opacity-10 {
    background: rgba(255, 205, 178, 0.2) !important;
    color: #9a6d1f !important;
}

.bg-opacity-10.text-primary { color: var(--lc-primary) !important; }

.page-link {
    border-radius: var(--lc-radius-sm);
    border: 1px solid var(--lc-border);
    color: var(--lc-text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    transition: all var(--lc-transition);
    background: var(--lc-surface);
}

.page-link:hover {
    color: var(--lc-primary);
    background: var(--lc-primary-bg);
    border-color: var(--lc-primary-light);
}

.page-item.active .page-link {
    color: #ffffff;
    background: var(--lc-primary);
    border-color: var(--lc-primary);
}

.pagination { gap: 0.3rem; }

/* ---- Alerts / Toasts ---- */
.alert {
    border: 1px solid transparent;
    border-radius: var(--lc-radius-sm);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
}

.alert-success {
    background: rgba(125, 211, 162, 0.12);
    border-color: rgba(125, 211, 162, 0.25);
    color: #2e7d4a;
}

.alert-warning {
    background: rgba(255, 205, 178, 0.18);
    border-color: rgba(255, 205, 178, 0.3);
    color: #9a6d1f;
}

.alert-danger, .alert-error {
    background: rgba(255, 139, 139, 0.12);
    border-color: rgba(255, 139, 139, 0.25);
    color: #c94545;
}

.alert-info {
    background: var(--lc-primary-bg);
    border-color: var(--lc-primary-light);
    color: var(--lc-primary-dark);
}

.toast {
    border-radius: var(--lc-radius-md);
    border: 1px solid var(--lc-border);
    box-shadow: var(--lc-shadow-lg);
    background: var(--lc-surface);
}

/* ---- Empty State ---- */
.empty-state {
    text-align: center;
    background: var(--lc-surface);
    border: 2px dashed var(--lc-border-strong);
    border-radius: var(--lc-radius-lg);
    padding: 3rem 1.5rem;
}

.empty-state-icon,
.empty-state > i {
    font-size: 2.8rem;
    color: var(--lc-primary-light);
    display: block;
    margin-bottom: 0.75rem;
}

.empty-state-title { font-weight: 700; color: var(--lc-text); margin-top: 0.5rem; }
.empty-state-text { color: var(--lc-text-muted); font-size: 0.92rem; }

/* ---- Avatars ---- */
.avatar-sm, .avatar-md, .avatar-lg, .avatar-xl, .user-avatar-sm, .attendee-avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.avatar-sm { width: 32px; height: 32px; }
.avatar-md, .user-avatar-sm { width: 42px; height: 42px; }
.avatar-lg { width: 76px; height: 76px; }
.avatar-xl { width: 110px; height: 110px; }

.user-avatar-sm, .attendee-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #ffffff;
    background: var(--lc-gradient-brand);
    font-size: 0.82rem;
}

.attendee-avatar {
    width: 38px;
    height: 38px;
    margin-left: -8px;
    border: 2px solid var(--lc-surface);
}
.attendee-avatar:first-child { margin-left: 0; }

.online-indicator, .online-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: var(--lc-success);
    border: 2px solid var(--lc-surface);
    box-shadow: 0 0 0 1px rgba(125, 211, 162, 0.3);
}

.online-dot.offline { background: var(--lc-text-light); }
.online-indicator-sm { width: 8px; height: 8px; }

/* ---- Notifications ---- */
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--lc-border);
    cursor: pointer;
    transition: background var(--lc-transition);
}

.notification-item:last-child { border-bottom: none; }

.notification-item:hover { background: var(--lc-surface-hover); }

.notification-item.unread {
    background: var(--lc-primary-bg);
    border-left: 3px solid var(--lc-primary);
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--lc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.notification-icon.badge_earned { background: rgba(255, 205, 178, 0.25); color: #c17d2e; }
.notification-icon.room_invite { background: var(--lc-primary-bg); color: var(--lc-primary); }
.notification-icon.message { background: var(--lc-secondary-bg); color: #389b94; }
.notification-icon.event_reminder { background: var(--lc-accent-bg); color: #d66450; }
.notification-icon.system { background: var(--lc-surface-hover); color: var(--lc-text-muted); }
.notification-icon.challenge { background: rgba(125, 211, 162, 0.2); color: #2e7d4a; }

.notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lc-primary);
    flex-shrink: 0;
    margin-top: 0.4rem;
}

.notification-time { font-size: 0.73rem; color: var(--lc-text-light); white-space: nowrap; }
.notification-title { font-size: 0.9rem; font-weight: 600; color: var(--lc-text); }

/* ---- Event / Challenge ---- */
.event-cover, .event-cover-fallback {
    width: 100%;
    height: 150px;
    border-radius: var(--lc-radius-md);
}
.event-cover { object-fit: cover; }

.event-cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lc-gradient-mint);
    border: 1px solid var(--lc-border);
}

.event-hero-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lc-gradient-hero);
    border: 1px solid var(--lc-border);
}

.event-cover-fallback i { color: rgba(138, 126, 240, 0.35); }
.event-hero-fallback i { color: rgba(138, 126, 240, 0.3); }
.event-cover-fallback i { font-size: 2.5rem; }

.event-hero, .event-hero-img, .event-hero-fallback {
    width: 100%;
    border-radius: var(--lc-radius-lg);
    overflow: hidden;
}

.event-hero-img, .event-hero-fallback {
    height: 280px;
    object-fit: cover;
}

.event-hero-fallback i { font-size: 4rem; }

.event-type-badge, .challenge-type-badge, .badge-tier,
.topic-category, .difficulty-badge, .lang-badge, .rank-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--lc-radius-pill);
    padding: 0.22rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.event-type-webinar, .challenge-type-language,
.difficulty-A1, .difficulty-A2, .level-a1, .level-a2 {
    background: var(--lc-primary-bg);
    color: var(--lc-primary);
}

.event-type-panel, .challenge-type-social,
.level-b1, .level-b2, .difficulty-B1, .difficulty-B2 {
    background: var(--lc-secondary-bg);
    color: #389b94;
}

.event-type-workshop, .challenge-type-career,
.level-c1, .level-c2, .difficulty-C1, .difficulty-C2 {
    background: var(--lc-accent-bg);
    color: #d66450;
}

.event-type-meetup {
    background: rgba(125, 211, 162, 0.15);
    color: #2e7d4a;
}

.days-remaining, .xp-reward, .event-tag,
.roadmap-language, .level-indicator { font-weight: 600; font-size: 0.85rem; }

.event-description { white-space: pre-wrap; }

.event-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: var(--lc-primary-bg);
    color: var(--lc-primary);
    border-radius: var(--lc-radius-pill);
    font-size: 0.78rem;
}

/* ---- Stats ---- */
.stat-card {
    text-align: center;
    padding: 1.4rem 1rem;
}

.stat-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 0.7rem;
    border-radius: var(--lc-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--lc-primary);
    background: var(--lc-primary-bg);
}

.stat-value {
    display: block;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--lc-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.stat-label {
    color: var(--lc-text-muted);
    font-weight: 500;
    font-size: 0.82rem;
    margin-top: 0.25rem;
}

/* ---- Leaderboard / Podium ---- */
.podium-section {
    padding: 2rem 1rem 1rem;
    margin-bottom: 1.5rem;
}

.podium-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1rem;
    padding: 1rem 0;
    position: relative;
    z-index: 1;
}

.podium-item { text-align: center; color: var(--lc-text); width: 170px; }
.podium-item.first { order: 2; }
.podium-item.second { order: 1; }
.podium-item.third { order: 3; }

.podium-avatar {
    width: 72px;
    height: 72px;
    margin: 0 auto 0.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-weight: 900;
    color: var(--lc-text);
    background: var(--lc-surface);
    border: 3px solid var(--lc-surface);
    font-size: 1.3rem;
    overflow: hidden;
    box-shadow: var(--lc-shadow-md);
}

.podium-avatar img { width: 100%; height: 100%; object-fit: cover; }
.podium-item.first .podium-avatar { width: 92px; height: 92px; }

.podium-rank {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lc-accent);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    border: 2px solid var(--lc-surface);
    box-shadow: var(--lc-shadow-sm);
}

.podium-name { font-weight: 700; font-size: 0.92rem; color: var(--lc-text); }
.podium-level { font-size: 0.76rem; color: var(--lc-text-muted); }
.podium-xp { font-weight: 800; font-size: 1.1rem; margin-top: 0.25rem; color: var(--lc-primary); }

.podium-pedestal {
    margin-top: 0.75rem;
    border-radius: 10px 10px 0 0;
    border: 1px solid var(--lc-border);
    border-bottom: none;
}
.podium-item.first .podium-pedestal { height: 72px; background: rgba(255, 205, 178, 0.3); }
.podium-item.second .podium-pedestal { height: 52px; background: rgba(199, 192, 247, 0.3); }
.podium-item.third .podium-pedestal { height: 36px; background: rgba(107, 201, 194, 0.25); }

.leaderboard-table .current-user {
    background: var(--lc-primary-bg) !important;
    border-left: 3px solid var(--lc-primary);
}

.rank-number {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--lc-primary);
    background: var(--lc-primary-bg);
}

/* ---- Auth / Onboarding ---- */
.auth-wrapper, .onboarding-wrapper {
    max-width: 780px;
    margin: 0 auto;
    padding: 1.5rem 0.5rem;
}

.auth-wrapper {
    min-height: calc(100vh - 220px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    box-shadow: var(--lc-shadow-lg);
}

.auth-card-header, .onboarding-header {
    background: var(--lc-gradient-hero);
    color: var(--lc-text);
    text-align: center;
    padding: 2.2rem 1.5rem;
    position: relative;
}

.auth-card-header::before,
.onboarding-header::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -20%;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255, 205, 178, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.auth-card-header > *, .onboarding-header > * { position: relative; z-index: 1; }

.auth-card-header h3, .auth-card-header p,
.onboarding-header h3, .onboarding-header p {
    color: var(--lc-text);
    margin: 0;
}

.auth-card-header h3, .onboarding-header h3 { font-size: 1.4rem; margin-top: 0.3rem; font-weight: 800; }
.auth-card-header p, .onboarding-header p { color: var(--lc-text-muted); font-size: 0.92rem; margin-top: 0.25rem; }

.auth-card-header i, .onboarding-header i {
    display: inline-block;
    font-size: 1.75rem;
    margin-bottom: 0.2rem;
    color: var(--lc-primary);
    background: var(--lc-surface);
    padding: 0.65rem;
    border-radius: 50%;
    box-shadow: var(--lc-shadow-sm);
}

.auth-card-body, .onboarding-body { padding: 1.75rem 1.5rem; }
.auth-footer { text-align: center; padding: 0.9rem 1rem 1.3rem; font-size: 0.88rem; }

.progress-wrapper { padding: 1rem 1rem 0; }

.step-indicators {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.step-indicator { color: var(--lc-text-light); font-size: 0.78rem; font-weight: 600; }
.step-indicator.active { color: var(--lc-primary); }
.step-indicator.completed { color: var(--lc-success); }

.step-title {
    font-weight: 700;
    color: var(--lc-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.step-title i { color: var(--lc-primary); }

.step-section { display: none; }
.step-section.active { display: block; }

.lang-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.lang-row select { flex: 1; }

.btn-add-lang {
    border: 2px dashed var(--lc-border-strong);
    color: var(--lc-primary);
    background: var(--lc-surface-soft);
    font-weight: 600;
    font-size: 0.85rem;
}

.btn-add-lang:hover {
    color: var(--lc-primary-dark);
    background: var(--lc-primary-bg);
    border-color: var(--lc-primary-light);
}

.btn-remove-lang {
    border: none;
    background: transparent;
    color: var(--lc-error);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem;
}

.interest-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.interest-pill input[type="checkbox"] { display: none; }

.interest-pill label {
    border: 1.5px solid var(--lc-border);
    border-radius: var(--lc-radius-pill);
    padding: 0.35rem 0.85rem;
    color: var(--lc-text-muted);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    background: var(--lc-surface);
    transition: all var(--lc-transition);
}

.interest-pill label:hover { border-color: var(--lc-primary-light); color: var(--lc-primary); }

.interest-pill input[type="checkbox"]:checked + label {
    color: #ffffff;
    border-color: transparent;
    background: var(--lc-primary);
}

.avatar-preview-wrapper {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    position: relative;
}

.avatar-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--lc-border);
    background: var(--lc-surface-soft);
}

.avatar-upload-btn {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--lc-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lc-primary);
    color: #ffffff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--lc-transition);
}

.avatar-upload-btn:hover { background: var(--lc-primary-dark); }

.onboarding-nav {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

.progress { background: var(--lc-surface-soft); height: 6px; border-radius: var(--lc-radius-pill); }
.progress-bar { background: var(--lc-gradient-brand); border-radius: var(--lc-radius-pill); }

/* ---- Profile ---- */
.profile-hero {
    padding: 2.5rem 1rem;
    margin-bottom: 0;
}

.profile-section, .edit-section {
    padding: 1.35rem;
    margin-bottom: 1rem;
}

.profile-section h5, .edit-section h5 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--lc-text);
}

.profile-section h5 i, .edit-section h5 i { color: var(--lc-primary); }

.info-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.4rem;
    border-radius: var(--lc-radius-sm);
    font-size: 0.88rem;
}

.info-item i { color: var(--lc-primary); width: 18px; text-align: center; }

.rank-badge {
    background: var(--lc-surface);
    color: var(--lc-primary);
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--lc-border);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 700;
    font-size: 0.82rem;
}

/* Badge card */
.card-badge, .badge-card {
    padding: 1.35rem 1rem;
    text-align: center;
    position: relative;
}

.card-badge.not-earned { opacity: 0.5; filter: grayscale(0.6); }

.earned-overlay {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--lc-success);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    box-shadow: var(--lc-shadow-sm);
}

.badge-icon-wrapper {
    width: 60px;
    height: 60px;
    margin: 0 auto 0.7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--lc-primary-bg);
    color: var(--lc-primary);
}

.badge-icon-wrapper.tier-gold { background: rgba(255, 205, 178, 0.25); color: #c17d2e; }
.badge-icon-wrapper.tier-silver { background: rgba(199, 192, 247, 0.3); color: #7166e8; }
.badge-icon-wrapper.tier-bronze { background: rgba(255, 159, 142, 0.18); color: #c17d2e; }

.badge-icon { font-size: 1.5rem; color: var(--lc-primary); margin-bottom: 0.4rem; }
.badge-name { font-weight: 700; font-size: 0.88rem; color: var(--lc-text); }

.badge-tier-gold { color: #c17d2e; }
.badge-tier-silver { color: #7166e8; }
.badge-tier-bronze { color: #d66450; }

/* Word card */
.word-card, .topic-card, .quiz-card, .roadmap-card { padding: 1.35rem; position: relative; }
.word-main { font-size: 1.4rem; font-weight: 800; color: var(--lc-text); line-height: 1.2; }
.word-translation { font-size: 1rem; color: var(--lc-primary); font-weight: 600; }
.word-example { font-size: 0.88rem; color: var(--lc-text-muted); font-style: italic; line-height: 1.5; }

.score-overlay {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--lc-success) !important;
    color: #0d6f3f !important;
}

/* Roadmap */
.roadmap-steps { display: flex; flex-direction: column; gap: 0.85rem; }
.roadmap-step-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--lc-primary-bg);
    color: var(--lc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.82rem;
    flex-shrink: 0;
}

/* Challenge */
.challenge-title { font-weight: 700; color: var(--lc-text); }

/* ---- Footer - LIGHT THEME ---- */
.footer-section {
    margin-top: auto;
    background: var(--lc-surface);
    color: var(--lc-text-muted);
    padding: 2.75rem 0 0;
    border-top: 1px solid var(--lc-border);
}

.footer-section h5 {
    color: var(--lc-text);
    font-size: 0.95rem;
    margin-bottom: 0.85rem;
    font-weight: 700;
}

.footer-brand {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--lc-text);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-brand i {
    color: var(--lc-primary);
    background: var(--lc-primary-bg);
    padding: 0.4rem;
    border-radius: var(--lc-radius-sm);
    font-size: 1rem;
}

.footer-tagline {
    margin-top: 0.3rem;
    margin-bottom: 0.7rem;
    color: var(--lc-text-muted);
    font-size: 0.88rem;
    font-weight: 500;
}

.footer-copy {
    max-width: 340px;
    font-size: 0.87rem;
    color: var(--lc-text-muted);
    line-height: 1.55;
}

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 0.45rem; }
.footer-links a {
    color: var(--lc-text-muted);
    font-size: 0.88rem;
    transition: color var(--lc-transition);
}
.footer-links a:hover { color: var(--lc-primary); }

.footer-socials { display: flex; gap: 0.5rem; margin-top: 1rem; }

.footer-socials a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lc-surface-soft);
    color: var(--lc-text-muted);
    border: 1px solid var(--lc-border);
    transition: all var(--lc-transition);
}

.footer-socials a:hover {
    background: var(--lc-primary);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px);
}

.footer-bottom {
    margin-top: 2.5rem;
    padding: 1.1rem 0;
    text-align: center;
    border-top: 1px solid var(--lc-border);
    color: var(--lc-text-light);
    font-size: 0.8rem;
}

/* ---- Utility ---- */
.text-primary { color: var(--lc-primary) !important; }
.text-muted { color: var(--lc-text-muted) !important; }
.text-success { color: #2e7d4a !important; }
.text-danger { color: #c94545 !important; }
.text-warning { color: #c17d2e !important; }
.text-white { color: #ffffff !important; }

.text-secondary-lc { color: var(--lc-primary) !important; }
.text-accent { color: var(--lc-accent) !important; }
.bg-light-custom { background: var(--lc-surface-soft) !important; }
.bg-primary-soft { background: var(--lc-primary-bg) !important; }
.bg-success-soft { background: rgba(125, 211, 162, 0.1) !important; }
.bg-warning-soft { background: rgba(255, 205, 178, 0.15) !important; }

/* Room themes */
.room-theme-dark { background: var(--lc-surface-soft) !important; color: var(--lc-text); }
.room-theme-dark .card { background: var(--lc-surface); color: var(--lc-text); border-color: var(--lc-border); }
.room-theme-ocean { background: var(--lc-gradient-mint) !important; color: var(--lc-text); }
.room-theme-ocean .card { background: var(--lc-surface); color: var(--lc-text); border-color: var(--lc-border); }
.room-theme-forest { background: rgba(125, 211, 162, 0.1) !important; color: var(--lc-text); }
.room-theme-forest .card { background: var(--lc-surface); color: var(--lc-text); border-color: var(--lc-border); }
.room-theme-sunset { background: var(--lc-gradient-peach) !important; color: var(--lc-text); }

/* Chat */
.chat-msg-mine {
    background: var(--lc-primary);
    color: #ffffff;
}

.chat-msg-other {
    background: var(--lc-surface-soft);
    color: var(--lc-text);
}

/* ---- Animations ---- */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up { animation: fade-in-up 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .page-head { flex-direction: column; align-items: flex-start; }
    .page-head .btn { width: 100%; }
    .app-navbar .nav-link { margin-bottom: 0.15rem; }
    .footer-socials { justify-content: flex-start; }
}

@media (max-width: 767.98px) {
    .app-main { padding-top: 1rem; }

    .app-container, .page-shell,
    .app-main .container, .app-main .container-fluid {
        width: calc(100% - 1rem);
    }

    .hero-section, .profile-hero, .podium-section {
        border-radius: var(--lc-radius-lg);
    }

    .hero-section { padding: 2.5rem 1rem; }

    .podium-wrapper { flex-direction: column; align-items: center; }

    .podium-item, .podium-item.first,
    .podium-item.second, .podium-item.third {
        order: unset;
        width: min(100%, 260px);
    }

    .event-hero-img, .event-hero-fallback { height: 200px; }

    .onboarding-nav { flex-direction: column; }
    .onboarding-nav .btn { width: 100%; }

    .footer-section { text-align: center; }
    .footer-copy { margin-left: auto; margin-right: auto; }
    .footer-socials { justify-content: center; }

    .stat-card { padding: 0.85rem 0.5rem; }
    .stat-value { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}