/* Landing Page - Hero-first, platform gradients, single-screen panels */

/* Full-viewport gradient behind header/sidebar when at top; removed on scroll or Get started */
.landing-hero-gradient-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(165deg, #2d1b4e 0%, #1a0a2e 35%, #3d2463 70%, #5b3a8a 100%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

body.landing-hero-active .landing-hero-gradient-overlay {
    opacity: 1;
    visibility: visible;
}

/* Dark mode: one consistent gradient for overlay (navbar, sidebar, hero all show this) */
[data-theme="dark"] .landing-hero-gradient-overlay {
    background: linear-gradient(165deg, #0a0612 0%, #0d0518 20%, #1a0a2e 45%, #2d1b4e 70%, #1a0a2e 100%);
}

[data-theme="dark"] body.landing-hero-active .landing-hero-gradient-overlay {
    opacity: 1;
    visibility: visible;
}

/* First-paint: avoid white flash on left panel before JS adds landing-hero-active */
body.landing-initial .app-container,
body.landing-initial #conversationPanel,
body.landing-initial .conversation-panel,
body.landing-initial #sharedNavbar,
body.landing-initial .nav-instance,
body.landing-initial .right-content-area {
    background: transparent !important;
    box-shadow: none !important;
}
body.landing-initial #conversationPanel,
body.landing-initial .conversation-panel { border: none !important; border-right: none !important; }
body.landing-initial #conversationPanel::after,
body.landing-initial .conversation-panel::after { display: none !important; }
body.landing-initial .app-container.collapsed #conversationPanel,
body.landing-initial #conversationPanel .conversation-action-strip,
body.landing-initial #conversationPanel .new-conversation-card {
    background: transparent !important;
    border: none !important;
}
/* Color rules only when gradient is also active (both classes required to avoid white-on-white) */
body.landing-initial.landing-hero-active #conversationPanel i,
body.landing-initial.landing-hero-active #conversationPanel .icon,
body.landing-initial.landing-hero-active #conversationPanel .strip-icon,
body.landing-initial.landing-hero-active #conversationPanel .home-btn,
body.landing-initial.landing-hero-active #conversationPanel .progress-btn,
body.landing-initial.landing-hero-active #conversationPanel .left-nav span,
body.landing-initial.landing-hero-active #conversationPanel #leftSidebarProfileName,
body.landing-initial.landing-hero-active #conversationPanel .categories-section span { color: #fff !important; }
body.landing-initial.landing-hero-active #conversationPanel .icon,
body.landing-initial.landing-hero-active #conversationPanel .home-btn .icon { background: transparent !important; color: #fff !important; }
body.landing-initial.landing-hero-active #conversationPanel .left-panel-edge-btn,
body.landing-initial.landing-hero-active #conversationPanel button.left-panel-edge-btn,
body.landing-initial.landing-hero-active button#leftPanelEdgeCloseBtn.left-panel-edge-btn {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #374151 !important;
}
body.landing-initial.landing-hero-active #conversationPanel .left-panel-edge-btn i,
body.landing-initial.landing-hero-active #conversationPanel .left-panel-edge-btn .fa,
body.landing-initial.landing-hero-active button#leftPanelEdgeCloseBtn i,
body.landing-initial.landing-hero-active button#leftPanelEdgeCloseBtn .fa { color: #374151 !important; opacity: 1 !important; }
body.landing-initial.landing-hero-active #conversationPanel .home-btn,
body.landing-initial.landing-hero-active #conversationPanel .progress-btn {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

/* Force gradient through header and sidebar - use IDs and classes for maximum coverage */
body.landing-hero-active .app-container,
body.landing-hero-active #conversationPanel,
body.landing-hero-active .conversation-panel,
body.landing-hero-active #sharedNavbar,
body.landing-hero-active .nav-instance,
body.landing-hero-active .right-content-area {
    background: transparent !important;
    box-shadow: none !important;
}

body.landing-hero-active #conversationPanel,
body.landing-hero-active .conversation-panel {
    border: none !important;
    border-right: none !important;
}

body.landing-hero-active #sharedNavbar,
body.landing-hero-active .nav-instance {
    backdrop-filter: none !important;
}

body.landing-hero-active #conversationPanel::after,
body.landing-hero-active .conversation-panel::after {
    display: none !important;
}

/* Sidebar: remove any remaining white (collapsed or expanded) */
body.landing-hero-active .app-container.collapsed #conversationPanel,
body.landing-hero-active .main-layout.collapsed #conversationPanel,
body.landing-hero-active #conversationPanel .conversation-action-strip,
body.landing-hero-active #conversationPanel .new-conversation-card {
    background: transparent !important;
    border: none !important;
}

/* Sidebar: white icons and text when in gradient */
body.landing-hero-active #conversationPanel i,
body.landing-hero-active #conversationPanel .icon,
body.landing-hero-active #conversationPanel .strip-icon,
body.landing-hero-active #conversationPanel .home-btn,
body.landing-hero-active #conversationPanel .progress-btn,
body.landing-hero-active #conversationPanel .left-nav span,
body.landing-hero-active #conversationPanel #leftSidebarProfileName,
body.landing-hero-active #conversationPanel .categories-section span {
    color: #fff !important;
}

body.landing-hero-active #conversationPanel .icon,
body.landing-hero-active #conversationPanel .home-btn .icon {
    background: transparent !important;
    color: #fff !important;
}

/* Close left panel button: transparent when possible; icon always visible (dark on white button) */
body.landing-hero-active #conversationPanel .left-panel-edge-btn,
body.landing-hero-active #conversationPanel button.left-panel-edge-btn,
body.landing-hero-active button#leftPanelEdgeCloseBtn.left-panel-edge-btn {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #374151 !important;
}

/* Icon dark so it's visible if button stays white (e.g. due to load order) */
body.landing-hero-active #conversationPanel .left-panel-edge-btn i,
body.landing-hero-active #conversationPanel .left-panel-edge-btn .fa,
body.landing-hero-active button#leftPanelEdgeCloseBtn i,
body.landing-hero-active button#leftPanelEdgeCloseBtn .fa {
    color: #374151 !important;
    opacity: 1 !important;
}

body.landing-hero-active #conversationPanel .left-panel-edge-btn:hover,
body.landing-hero-active button#leftPanelEdgeCloseBtn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

body.landing-hero-active #conversationPanel .left-panel-edge-btn:hover i,
body.landing-hero-active #conversationPanel .left-panel-edge-btn:hover .fa,
body.landing-hero-active button#leftPanelEdgeCloseBtn:hover i {
    color: #374151 !important;
}

/* Home and My Progress buttons: no white rectangles on gradient */
body.landing-hero-active #conversationPanel .home-btn,
body.landing-hero-active #conversationPanel .progress-btn {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

body.landing-hero-active #conversationPanel .home-btn:hover,
body.landing-hero-active #conversationPanel .progress-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
}

body.landing-hero-active #conversationPanel .home-btn span,
body.landing-hero-active #conversationPanel .progress-btn span {
    color: #fff !important;
}

body.landing-hero-active #conversationPanel .progress-btn .icon {
    background: transparent !important;
    color: #fff !important;
}

body.landing-hero-active #conversationPanel .collapsed-logo-img {
    filter: brightness(0) invert(1);
}

body.landing-hero-active #conversationPanel .collapsed-expand-arrow {
    color: #fff !important;
}

/* Modes/Agents/Resources collapsibles: consistent look when in gradient (avoid buggy colors) */
body.landing-hero-active #conversationPanel .collapsible-section,
body.landing-hero-active #conversationPanel .collapsible-header,
body.landing-hero-active #conversationPanel .collapsible-content,
body.landing-hero-active #conversationPanel .option-item {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

body.landing-hero-active #conversationPanel .collapsible-header:hover,
body.landing-hero-active #conversationPanel .option-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Expanded section: subtle background so open Modes/Agents are distinguishable */
body.landing-hero-active #conversationPanel .collapsible-section:has(.collapsible-content.expanded) .collapsible-header {
    background: rgba(255, 255, 255, 0.08) !important;
}
body.landing-hero-active #conversationPanel .collapsible-content.expanded {
    background: rgba(255, 255, 255, 0.04) !important;
}

body.landing-hero-active #conversationPanel .collapsible-header .icon,
body.landing-hero-active #conversationPanel .option-item .icon {
    background: transparent !important;
    color: #fff !important;
}

body.landing-hero-active #conversationPanel .collapsible-arrow,
body.landing-hero-active #conversationPanel .collapsible-arrow i {
    color: #fff !important;
}

body.landing-hero-active #conversationPanel .nav-collapsible-container {
    background: transparent !important;
}

/* Header: buttons invisible (no bg/border), text and icons white when in gradient */
body.landing-hero-active .nav-instance .mode-toggle-btn,
body.landing-hero-active .nav-instance .teams-btn,
body.landing-hero-active .nav-instance .user-welcome,
body.landing-hero-active .nav-instance .nav-right > *,
body.landing-hero-active .nav-instance [id="darkModeToggle"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.landing-hero-active .nav-instance .nav-right,
body.landing-hero-active .nav-instance .nav-right *,
body.landing-hero-active .nav-instance .mode-label,
body.landing-hero-active .nav-instance .teams-btn-text,
body.landing-hero-active .nav-instance #darkModeLabel,
body.landing-hero-active .nav-instance .welcome-text,
body.landing-hero-active .nav-instance #welcomeText {
    color: #fff !important;
}

body.landing-hero-active .nav-instance .nav-right i,
body.landing-hero-active .nav-instance .nav-right .fa,
body.landing-hero-active .nav-instance #darkModeIcon {
    color: #fff !important;
}

body.landing-hero-active .nav-instance .toggle-switch,
body.landing-hero-active .nav-instance .toggle-slider {
    background: rgba(255, 255, 255, 0.3) !important;
}

body.landing-hero-active .nav-instance .user-avatar {
    background: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
}

/* User dropdown when open on gradient: solid background and dark text so menu items are visible */
body.landing-hero-active #userDropdown,
body.landing-hero-active .user-dropdown {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

body.landing-hero-active #userDropdown .user-dropdown-item,
body.landing-hero-active .user-dropdown .user-dropdown-item,
body.landing-hero-active #userDropdown .user-dropdown-item span,
body.landing-hero-active #userDropdown .user-dropdown-item i,
body.landing-hero-active .user-dropdown .user-dropdown-item span,
body.landing-hero-active .user-dropdown .user-dropdown-item i {
    color: #1f2937 !important;
}

body.landing-hero-active #userDropdown .user-dropdown-item:hover,
body.landing-hero-active .user-dropdown .user-dropdown-item:hover {
    background: var(--primary-color, #667eea) !important;
    color: #fff !important;
}

body.landing-hero-active #userDropdown .user-dropdown-item:hover span,
body.landing-hero-active #userDropdown .user-dropdown-item:hover i,
body.landing-hero-active .user-dropdown .user-dropdown-item:hover span,
body.landing-hero-active .user-dropdown .user-dropdown-item:hover i {
    color: #fff !important;
}

/* Nav and sidebar inner wrappers so no white strips remain */
body.landing-hero-active #sharedNavbar .nav-left,
body.landing-hero-active #sharedNavbar .nav-right,
body.landing-hero-active #sharedNavbar .page-title-box,
body.landing-hero-active #sharedNavbar .user-welcome,
body.landing-hero-active .nav-instance .page-title-box,
body.landing-hero-active .nav-instance .user-welcome,
body.landing-hero-active .nav-instance .nav-left,
body.landing-hero-active .nav-instance .nav-right,
body.landing-hero-active #conversationPanel .conversation-content,
body.landing-hero-active #conversationPanel .left-nav,
body.landing-hero-active #conversationPanel .collapsed-logo-container,
body.landing-hero-active #conversationPanel .left-panel-edge-btn,
body.landing-hero-active #conversationPanel [id^="leftPanel"],
body.landing-hero-active .conversation-panel .conversation-content,
body.landing-hero-active .conversation-panel .left-nav,
body.landing-hero-active .conversation-panel .collapsed-logo-container {
    background: transparent !important;
}

body.landing-hero-active .main-layout,
body.landing-hero-active .chat-section,
body.landing-hero-active #log {
    background: transparent !important;
}

/* Dark mode: force hero area transparent so overlay can show (dark-mode.css sets #000 on these) */
[data-theme="dark"] body.landing-hero-active .main-layout,
[data-theme="dark"] body.landing-hero-active #mainLayout,
[data-theme="dark"] body.landing-hero-active .chat-section,
[data-theme="dark"] body.landing-hero-active .chat-messages,
[data-theme="dark"] body.landing-hero-active #log,
[data-theme="dark"] body.landing-hero-active .landing-page-container,
[data-theme="dark"] body.landing-hero-active .right-content-area {
    background: transparent !important;
}

/* Right content and nav wrappers */
body.landing-hero-active #rightContentArea,
body.landing-hero-active .right-content-area .nav-instance {
    background: transparent !important;
}

/* Sidebar sections that may have their own background */
body.landing-hero-active #conversationPanel .categories-section,
body.landing-hero-active #conversationPanel #leftPanelHeaderRow,
body.landing-hero-active #conversationPanel #leftProfileContainer {
    background: transparent !important;
}

/* Remove white bar below sidebar icons: hide scrollbar and transparent list/stats */
body.landing-hero-active #conversationPanel .conversation-list,
body.landing-hero-active #conversationPanel .conversation-stats {
    background: transparent !important;
}

/* Conversation history: all text and icons white on gradient */
body.landing-hero-active #conversationPanel .conversation-list,
body.landing-hero-active #conversationPanel #sessionList {
    color: #fff !important;
}

body.landing-hero-active #conversationPanel .conversation-list *,
body.landing-hero-active #conversationPanel #sessionList * {
    color: #fff !important;
}

body.landing-hero-active #conversationPanel .conversation-list i,
body.landing-hero-active #conversationPanel .conversation-list .session-message-icon,
body.landing-hero-active #conversationPanel .conversation-list .session-message-icon i,
body.landing-hero-active #conversationPanel .conversation-list .session-count,
body.landing-hero-active #conversationPanel .conversation-list .session-count i {
    color: #fff !important;
}

body.landing-hero-active #conversationPanel .conversation-content {
    scrollbar-width: none !important;
}

body.landing-hero-active #conversationPanel .conversation-content::-webkit-scrollbar {
    display: none !important;
}

/* Session cards: borders for each conversation + white text/icons when in gradient */
body.landing-hero-active #conversationPanel .session-card {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 8px !important;
    color: #fff !important;
    margin-bottom: 0.5rem !important;
}

body.landing-hero-active #conversationPanel .session-card:last-child {
    margin-bottom: 0 !important;
}

body.landing-hero-active #conversationPanel .session-card .session-preview,
body.landing-hero-active #conversationPanel .session-card .session-time,
body.landing-hero-active #conversationPanel .session-card .session-content,
body.landing-hero-active #conversationPanel .session-card .session-message-icon,
body.landing-hero-active #conversationPanel .session-card .session-message-icon i,
body.landing-hero-active #conversationPanel .session-card .session-count,
body.landing-hero-active #conversationPanel .session-card .session-count i {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.25) !important;
}

/* New Chat card: white text and icon when in gradient */
body.landing-hero-active #conversationPanel .new-conversation-card .session-preview,
body.landing-hero-active #conversationPanel .new-conversation-card .session-content,
body.landing-hero-active #conversationPanel .new-conversation-card i,
body.landing-hero-active #conversationPanel .new-conversation-card * {
    color: #fff !important;
}

/* Conversation stats (e.g. "294 conversations", "Today") white on gradient */
body.landing-hero-active #conversationPanel .conversation-stats,
body.landing-hero-active #conversationPanel .conversation-stats .stats-item,
body.landing-hero-active #conversationPanel .conversation-stats span {
    color: #fff !important;
}

/* Match platform gradient vars (from ui-main.css) */
.landing-page-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Hero: full viewport, gradient, centered logo + caption + Get started */
.landing-hero-section {
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(165deg, #2d1b4e 0%, #1a0a2e 35%, #3d2463 70%, #5b3a8a 100%);
    padding: 3rem 1.5rem;
    text-align: center;
}

body.landing-hero-active .landing-hero-section {
    background: transparent;
}

.landing-hero-inner {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.landing-hero-logo {
    width: 120px;
    height: auto;
    margin-bottom: 0.5rem;
    filter: brightness(0) invert(1);
}

.landing-hero-caption {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.landing-hero-sub {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.5;
}

.landing-get-started-btn {
    margin-top: 0.5rem;
    padding: 0.85rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
}

.landing-get-started-btn:hover {
    opacity: 0.95;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

/* Loading bar below Get started (dotted, fills over 4s, then auto-scroll and hide) */
.landing-hero-loading-bar {
    margin-top: 1.25rem;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    height: 10px;
    padding: 2px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
}

.landing-hero-loading-bar-fill {
    height: 100%;
    width: 0;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.95) 4px, transparent 4px, transparent 10px);
    border-radius: 3px;
    transition: width 4s linear;
}

.landing-hero-loading-bar.is-loaded {
    display: none !important;
}

/* Scroll hint arrow below loading bar */
.landing-hero-scroll-hint {
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.25rem;
    animation: landingScrollHintBounce 2s ease-in-out infinite;
}

.landing-hero-scroll-hint i {
    display: block;
}

@keyframes landingScrollHintBounce {
    0%, 100% { transform: translateY(0); opacity: 0.9; }
    50% { transform: translateY(6px); opacity: 1; }
}

/* Panels: full width, one-screen fit; compact so all panels visible without scroll */
.landing-panels-section {
    width: 100%;
    min-height: 0;
    padding: 0;
    position: relative;
}

.landing-panels-layout {
    position: relative;
    z-index: 1;
    min-height: 0;
    width: 100%;
}

.landing-panels-inner {
    position: relative;
    z-index: 1;
    padding: 0.75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 100%;
    width: 100%;
    overflow-y: auto;
}

/* Animated gradient on the right (low opacity, fills white space) */
.landing-bg-gradient {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 42%;
    max-width: 480px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(105deg, transparent 0%, transparent 38%, rgba(102, 126, 234, 0.07) 58%, rgba(118, 75, 162, 0.09) 78%, rgba(99, 102, 241, 0.06) 100%);
    animation: landingGradientShift 6s ease-in-out infinite;
}

@keyframes landingGradientShift {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

/* First row: Practice card + My Progress on same level */
.landing-first-row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.landing-first-row .landing-practice-card {
    flex: 1;
    min-width: 0;
}

/* My Progress: small panel matching height of adjacent Practice card */
.landing-my-progress-btn {
    flex-shrink: 0;
    width: 180px;
    max-width: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4f46e5;
    background: var(--surface-elevated, #fff);
    border: 1px solid var(--border-light, #f1f5f9);
    border-radius: 0.65rem;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
    position: sticky;
    top: 0.75rem;
    z-index: 20;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.landing-my-progress-btn:hover {
    opacity: 0.95;
    background: rgba(99, 102, 241, 0.06);
    border-color: #6366f1;
    color: #4338ca;
}

/* Cards: increased height to fill space */
.landing-card {
    background: var(--surface-elevated, #fff);
    border: 1px solid var(--border-light, #f1f5f9);
    border-radius: 0.65rem;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.landing-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #1a202c);
    margin: 0 0 0.35rem 0;
    line-height: 1.25;
}

.landing-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary, #4a5568);
    margin: 0 0 0.65rem 0;
    line-height: 1.45;
}

.landing-card-desc:last-of-type {
    margin-bottom: 0;
}

.landing-practice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.65rem;
    align-items: stretch;
}

/* Practice flip panels: same height as module cards so landing fits one screen */
.landing-practice-panel {
    flex: 0 0 auto;
    width: 180px;
    max-width: 100%;
    background: transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    height: 130px;
    min-height: 130px;
    position: relative;
    perspective: 900px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.landing-practice-panel:hover {
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25);
}

.landing-practice-panel-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.65s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.landing-practice-panel:hover .landing-practice-panel-flip-inner {
    transform: rotateY(180deg);
}

.landing-practice-panel-front,
.landing-practice-panel-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 0.5rem;
    padding: 0.65rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
}

.landing-practice-panel-front-primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
}

.landing-practice-panel-front-secondary {
    background: #fff;
    color: #4f46e5;
    border: 2px solid #6366f1;
}

.landing-practice-panel-back {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #ede9fe 100%);
    color: #4f46e5;
    transform: rotateY(180deg);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0.75rem 0.9rem;
    padding-bottom: 0.85rem;
}

.landing-practice-panel-back-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.25;
}

.landing-practice-panel-features {
    list-style: disc;
    padding-left: 1.1rem;
    margin: 0 0 0.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.landing-practice-panel-bullet {
    font-size: 0.8rem;
    font-weight: 500;
    color: #4f46e5;
    line-height: 1.3;
}

.landing-btn {
    padding: 0.5rem 0.95rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.45rem;
    cursor: pointer;
    border: none;
    transition: background 0.25s ease, color 0.25s ease, opacity 0.2s, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.landing-btn:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

.landing-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.landing-btn-secondary {
    color: #4f46e5;
    background: #fff;
    border: 2px solid #6366f1;
}

.landing-btn-purple {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    margin-top: 0.35rem;
}

.landing-recommended-card .landing-btn-purple {
    margin-top: 0.65rem;
}

/* Module cards: taller to fill space */
.landing-module-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
    margin-top: 0.65rem;
}

.landing-resources-modules {
    grid-template-columns: repeat(5, 1fr);
}

/* Flip card: same height as practice panels so landing fits one screen */
.landing-module-card {
    background: transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    height: 130px;
    min-height: 130px;
    position: relative;
    perspective: 900px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.landing-module-card:hover {
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25);
}

.landing-module-card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.65s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.landing-module-card:hover .landing-module-card-flip-inner {
    transform: rotateY(180deg);
}

.landing-module-card-front,
.landing-module-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.landing-module-card-front {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
}

.landing-module-card-back {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #ede9fe 100%);
    color: #4f46e5;
    transform: rotateY(180deg);
    justify-content: flex-start;
    padding-top: 0.75rem;
    padding-bottom: 0.85rem;
}

.landing-module-card-back-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 0.6rem 0;
    line-height: 1.25;
}

.landing-module-card-features {
    list-style: disc;
    padding-left: 1.1rem;
    margin: 0 0 0.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.landing-module-card-bullet {
    font-size: 0.8rem;
    font-weight: 500;
    color: #4f46e5;
    line-height: 1.3;
}

.landing-module-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 0.2rem 0;
    line-height: 1.25;
}

.landing-module-card-desc {
    font-size: 0.75rem;
    opacity: 0.95;
    margin: 0;
    line-height: 1.3;
}

/* Dark mode: hero section transparent so overlay gradient shows (one gradient for navbar, sidebar, hero) (don’t make it transparent so it’s not covered by black parents) */
[data-theme="dark"] .landing-hero-section,
[data-theme="dark"] body.landing-hero-active .landing-hero-section {
    background: transparent !important;
}

[data-theme="dark"] .landing-card,
body.dark-mode .landing-card {
    background: var(--surface-elevated);
    border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.2)) !important;
    box-shadow: none;
}

/* My Progress: black tile on grey practice panel */
[data-theme="dark"] .landing-my-progress-btn,
body.dark-mode .landing-my-progress-btn {
    background: var(--background-color, #000000) !important;
    border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.2)) !important;
    color: #a5b4fc;
}

[data-theme="dark"] .landing-my-progress-btn:hover,
body.dark-mode .landing-my-progress-btn:hover {
    background: var(--surface-hover, #454545) !important;
    border-color: #6366f1;
    color: #c7d2fe;
}

[data-theme="dark"] .landing-btn-secondary,
body.dark-mode .landing-btn-secondary {
    background: var(--background-color, #000000) !important;
    border: 2px solid #818cf8 !important;
    color: #a5b4fc !important;
}

/* Headings/descriptions are plain text — never boxed (see dark-mode attribute selectors removed) */
[data-theme="dark"] .landing-card-title,
[data-theme="dark"] .landing-card-desc,
body.dark-mode .landing-card-title,
body.dark-mode .landing-card-desc {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

[data-theme="dark"] .landing-module-card-title,
[data-theme="dark"] .landing-module-card-desc,
[data-theme="dark"] .landing-module-card-bullet,
[data-theme="dark"] .landing-module-card-back-title,
[data-theme="dark"] .landing-practice-panel-back-title,
[data-theme="dark"] .landing-practice-panel-bullet,
body.dark-mode .landing-module-card-title,
body.dark-mode .landing-module-card-desc,
body.dark-mode .landing-module-card-bullet,
body.dark-mode .landing-module-card-back-title,
body.dark-mode .landing-practice-panel-back-title,
body.dark-mode .landing-practice-panel-bullet {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Flippable tiles: black on grey panel */
[data-theme="dark"] .landing-module-card-front,
body.dark-mode .landing-module-card-front {
    background: var(--background-color, #000000) !important;
    color: #f3f4f6 !important;
    border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.2)) !important;
}

[data-theme="dark"] .landing-module-card-back,
body.dark-mode .landing-module-card-back {
    background: var(--background-color, #000000) !important;
    color: #e5e7eb !important;
    border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.2)) !important;
}

[data-theme="dark"] .landing-module-card-front .landing-module-card-title,
[data-theme="dark"] .landing-module-card-front .landing-module-card-desc,
body.dark-mode .landing-module-card-front .landing-module-card-title,
body.dark-mode .landing-module-card-front .landing-module-card-desc {
    color: #f3f4f6 !important;
}

[data-theme="dark"] .landing-module-card-back .landing-module-card-bullet,
[data-theme="dark"] .landing-module-card-back .landing-module-card-back-title,
body.dark-mode .landing-module-card-back .landing-module-card-bullet,
body.dark-mode .landing-module-card-back .landing-module-card-back-title {
    color: #c7d2fe !important;
}

[data-theme="dark"] .landing-practice-panel-front-primary,
body.dark-mode .landing-practice-panel-front-primary {
    background: var(--background-color, #000000) !important;
    color: #ffffff !important;
    border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.2)) !important;
}

[data-theme="dark"] .landing-practice-panel-front-secondary,
body.dark-mode .landing-practice-panel-front-secondary {
    background: var(--background-color, #000000) !important;
    color: #a5b4fc !important;
    border: 2px solid #6366f1 !important;
}

[data-theme="dark"] .landing-practice-panel-back,
body.dark-mode .landing-practice-panel-back {
    background: var(--background-color, #000000) !important;
    color: #e5e7eb !important;
    border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.2)) !important;
}

[data-theme="dark"] .landing-practice-panel-back .landing-practice-panel-bullet,
body.dark-mode .landing-practice-panel-back .landing-practice-panel-bullet {
    color: #a5b4fc !important;
}

/* Landing buttons: strip global dark-mode button outline except secondary ring */
[data-theme="dark"] .landing-page-container .landing-btn,
body.dark-mode .landing-page-container .landing-btn {
    border: none !important;
}

[data-theme="dark"] .landing-page-container .landing-btn-secondary,
body.dark-mode .landing-page-container .landing-btn-secondary {
    border: 2px solid #818cf8 !important;
}

[data-theme="dark"] .landing-page-container .landing-btn-primary,
[data-theme="dark"] .landing-page-container .landing-btn-purple,
body.dark-mode .landing-page-container .landing-btn-primary,
body.dark-mode .landing-page-container .landing-btn-purple {
    border: none !important;
}

[data-theme="dark"] .landing-bg-gradient,
body.dark-mode .landing-bg-gradient {
    background: linear-gradient(105deg, transparent 0%, transparent 35%, rgba(102, 126, 234, 0.08) 55%, rgba(118, 75, 162, 0.1) 75%, rgba(99, 102, 241, 0.06) 100%);
}

/* Responsive */
@media (max-width: 900px) {
    .landing-bg-gradient {
        width: 50%;
    }
}

@media (max-width: 640px) {
    .landing-hero-section {
        min-height: 80vh;
        padding: 2rem 1rem;
    }

    .landing-hero-logo {
        width: 90px;
    }

    .landing-first-row {
        flex-direction: column;
        align-items: stretch;
    }

    .landing-my-progress-btn {
        width: 100%;
        align-self: stretch;
        position: sticky;
        top: 0.75rem;
        z-index: 20;
    }

    .landing-practice-actions {
        flex-direction: column;
    }

    .landing-practice-actions .landing-btn {
        width: 100%;
    }

    .landing-panels-inner {
        padding: 0.75rem 1rem;
    }

    .landing-module-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-resources-modules {
        grid-template-columns: repeat(2, 1fr);
    }
}