/* Modern Islamic Dashboard Styles for Quran App */

/* Remove tap highlight globally */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

button, a, input, select, .nav-item, .action-card, .level-card {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Prevent white gap when overscrolling */
html {
    background: #0f172a;
    overscroll-behavior: none;
}

/* Page-specific html backgrounds to prevent white gap */
html:has(body[data-page="index"]) { background: #0369a1; }
html:has(body[data-page="leaderboard"]) { background: #78350f; }
html:has(body[data-page="game"]) { background: #075985; }
html:has(body[data-page="profile"]) { background: #065f46; }

body {
    font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    background-attachment: fixed;
    min-height: 100vh;
    /* Safe area padding for bottom nav - header handles top safe area */
    padding-top: 0;
    padding-bottom: calc(80px + var(--android-safe-bottom, env(safe-area-inset-bottom, 0px)));
    position: relative;
    overscroll-behavior: none;
    /* Disable text selection for app-like experience */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow text selection in input fields */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Body Background Per Page */
body[data-page="index"] {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 50%, #38bdf8 100%);
    background-attachment: fixed;
}

/* Islamic Geometric Pattern for index page - Star Cross Grid (Arabic style) */
body[data-page="index"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 50%, #38bdf8 100%);
    /* Islamic star cross pattern - similar to Arabic geometric tiles */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5' opacity='0.25'%3E%3C!-- Center star cross --%3E%3Cpath d='M40 10 L50 20 L50 30 L60 30 L70 40 L60 50 L50 50 L50 60 L40 70 L30 60 L30 50 L20 50 L10 40 L20 30 L30 30 L30 20 Z'/%3E%3C!-- Corner connections --%3E%3Cpath d='M0 0 L10 10 M80 0 L70 10 M0 80 L10 70 M80 80 L70 70'/%3E%3C!-- Edge connections --%3E%3Cpath d='M40 0 L40 10 M0 40 L10 40 M80 40 L70 40 M40 80 L40 70'/%3E%3C!-- Small diamonds at corners --%3E%3Cpath d='M0 20 L10 10 L20 20 L10 30 Z M60 0 L70 10 L80 0 M60 80 L70 70 L80 80 M0 60 L10 70 L0 80'/%3E%3Cpath d='M60 20 L70 10 L80 20 L70 30 Z M0 60 L10 50 L20 60 L10 70 Z M60 60 L70 50 L80 60 L70 70 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
}

body[data-page="leaderboard"] {
    background: linear-gradient(135deg, #78350f 0%, #a16207 100%);
    background-attachment: fixed;
}

/* Islamic Geometric Pattern for leaderboard page */
body[data-page="leaderboard"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(135deg, #78350f 0%, #a16207 100%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5' opacity='0.2'%3E%3Cpath d='M40 10 L50 20 L50 30 L60 30 L70 40 L60 50 L50 50 L50 60 L40 70 L30 60 L30 50 L20 50 L10 40 L20 30 L30 30 L30 20 Z'/%3E%3Cpath d='M0 0 L10 10 M80 0 L70 10 M0 80 L10 70 M80 80 L70 70'/%3E%3Cpath d='M40 0 L40 10 M0 40 L10 40 M80 40 L70 40 M40 80 L40 70'/%3E%3Cpath d='M0 20 L10 10 L20 20 L10 30 Z M60 0 L70 10 L80 0 M60 80 L70 70 L80 80 M0 60 L10 70 L0 80'/%3E%3Cpath d='M60 20 L70 10 L80 20 L70 30 Z M0 60 L10 50 L20 60 L10 70 Z M60 60 L70 50 L80 60 L70 70 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
}

body[data-page="game"] {
    background: linear-gradient(135deg, #075985 0%, #0369a1 50%, #0284c7 100%);
    background-attachment: fixed;
}

/* Islamic Geometric Pattern for game page */
body[data-page="game"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(135deg, #075985 0%, #0369a1 50%, #0284c7 100%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5' opacity='0.2'%3E%3Cpath d='M40 10 L50 20 L50 30 L60 30 L70 40 L60 50 L50 50 L50 60 L40 70 L30 60 L30 50 L20 50 L10 40 L20 30 L30 30 L30 20 Z'/%3E%3Cpath d='M0 0 L10 10 M80 0 L70 10 M0 80 L10 70 M80 80 L70 70'/%3E%3Cpath d='M40 0 L40 10 M0 40 L10 40 M80 40 L70 40 M40 80 L40 70'/%3E%3Cpath d='M0 20 L10 10 L20 20 L10 30 Z M60 0 L70 10 L80 0 M60 80 L70 70 L80 80 M0 60 L10 70 L0 80'/%3E%3Cpath d='M60 20 L70 10 L80 20 L70 30 Z M0 60 L10 50 L20 60 L10 70 Z M60 60 L70 50 L80 60 L70 70 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
}

body[data-page="profile"] {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    background-attachment: fixed;
}

/* Islamic Geometric Pattern for profile page */
body[data-page="profile"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5' opacity='0.2'%3E%3Cpath d='M40 10 L50 20 L50 30 L60 30 L70 40 L60 50 L50 50 L50 60 L40 70 L30 60 L30 50 L20 50 L10 40 L20 30 L30 30 L30 20 Z'/%3E%3Cpath d='M0 0 L10 10 M80 0 L70 10 M0 80 L10 70 M80 80 L70 70'/%3E%3Cpath d='M40 0 L40 10 M0 40 L10 40 M80 40 L70 40 M40 80 L40 70'/%3E%3Cpath d='M0 20 L10 10 L20 20 L10 30 Z M60 0 L70 10 L80 0 M60 80 L70 70 L80 80 M0 60 L10 70 L0 80'/%3E%3Cpath d='M60 20 L70 10 L80 20 L70 30 Z M0 60 L10 50 L20 60 L10 70 Z M60 60 L70 50 L80 60 L70 70 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
}


.dashboard-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Header - Game Style UI */
.dashboard-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
    /* Add safe area padding for Android status bar */
    padding: calc(20px + var(--android-safe-top, env(safe-area-inset-top, 0px))) 15px 25px 15px;
    border-radius: 0 0 0 0;
    box-shadow: 0 8px 35px rgba(30, 58, 138, 0.5), 0 4px 20px rgba(37, 99, 235, 0.4);
    position: relative;
    overflow: visible;
    border-bottom: 5px solid #3b82f6;
}

/* Header Color - Per Page */
body[data-page="index"] .dashboard-header {
    background: linear-gradient(135deg, #0077b6 0%, #0096c7 50%, #00b4d8 100%);
    box-shadow: 0 8px 35px rgba(0, 119, 182, 0.5), 0 4px 20px rgba(0, 180, 216, 0.4);
    border-bottom: 5px solid #48cae4;
}

body[data-page="index"] .dashboard-header::after {
    background: linear-gradient(135deg, #0096c7 0%, #00b4d8 100%);
    box-shadow: 0 6px 20px rgba(0, 150, 199, 0.6);
    border-left: 3px solid #48cae4;
    border-right: 3px solid #48cae4;
    border-bottom: 3px solid #48cae4;
}

body[data-page="leaderboard"] .dashboard-header {
    background: linear-gradient(135deg, #9a3412 0%, #c2410c 50%, #ea580c 100%);
    box-shadow: 0 8px 35px rgba(154, 52, 18, 0.5), 0 4px 20px rgba(194, 65, 12, 0.4);
    border-bottom: 5px solid #f59e0b;
}

body[data-page="leaderboard"] .dashboard-header::after {
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
    box-shadow: 0 6px 20px rgba(194, 65, 12, 0.6);
    border-left: 3px solid #f59e0b;
    border-right: 3px solid #f59e0b;
    border-bottom: 3px solid #f59e0b;
}

body[data-page="game"] .dashboard-header {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 50%, #0ea5e9 100%);
    box-shadow: 0 8px 35px rgba(3, 105, 161, 0.5), 0 4px 20px rgba(2, 132, 199, 0.4);
    border-bottom: 5px solid #38bdf8;
}

body[data-page="game"] .dashboard-header::after {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5);
    border-left: 3px solid #38bdf8;
    border-right: 3px solid #38bdf8;
    border-bottom: 3px solid #38bdf8;
}

/* Game page back button - Lighter blue with white border */
body[data-page="game"] .back-btn {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5), 0 4px 12px rgba(37, 99, 235, 0.4), inset 0 -2px 6px rgba(0, 0, 0, 0.1);
}

body[data-page="game"] .back-btn:hover {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5), 0 6px 16px rgba(30, 58, 138, 0.6), inset 0 -2px 6px rgba(0, 0, 0, 0.1);
}

body[data-page="game"] .back-btn:active {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5), 0 2px 8px rgba(30, 58, 138, 0.4), inset 0 -1px 4px rgba(0, 0, 0, 0.1);
}

/* Play Level page - Orange/Yellow theme */
body[data-page="play-level"] .dashboard-header {
    background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
    box-shadow: 0 8px 35px rgba(180, 83, 9, 0.5), 0 4px 20px rgba(217, 119, 6, 0.4);
    border-bottom: 5px solid #fbbf24;
}

body[data-page="play-level"] .dashboard-header::after {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.6);
    border-left: 3px solid #fbbf24;
    border-right: 3px solid #fbbf24;
    border-bottom: 3px solid #fbbf24;
}

body[data-page="play-level"] .back-btn {
    background: linear-gradient(135deg, #92400e 0%, #b45309 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 2px rgba(146, 64, 14, 0.5), 0 4px 12px rgba(146, 64, 14, 0.4), inset 0 -2px 6px rgba(0, 0, 0, 0.1);
}

body[data-page="play-level"] .back-btn:hover {
    box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.5), 0 6px 16px rgba(146, 64, 14, 0.6), inset 0 -2px 6px rgba(0, 0, 0, 0.1);
}

body[data-page="play-level"] .back-btn:active {
    box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.5), 0 2px 8px rgba(146, 64, 14, 0.4), inset 0 -1px 4px rgba(0, 0, 0, 0.1);
}

body[data-page="profile"] .dashboard-header {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%);
    box-shadow: 0 8px 35px rgba(6, 78, 59, 0.5), 0 4px 20px rgba(6, 95, 70, 0.4);
    border-bottom: 5px solid #10b981;
}

body[data-page="profile"] .dashboard-header::after {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    box-shadow: 0 6px 20px rgba(6, 95, 70, 0.6);
    border-left: 3px solid #10b981;
    border-right: 3px solid #10b981;
    border-bottom: 3px solid #10b981;
}

/* Game-style notches at bottom corners */
.dashboard-header::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 10px;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
    border-left: 3px solid #3b82f6;
    border-right: 3px solid #3b82f6;
    border-bottom: 3px solid #3b82f6;
}

/* Header Notch - Same for all pages */

/* Removed decorative top stripe pattern */

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Remove top border - not needed */

/* Back Button Styling - Game Style */
.back-btn {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5), 0 4px 12px rgba(239, 68, 68, 0.4), inset 0 -2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.back-btn:hover {
    transform: translateX(-3px) translateY(-2px);
    box-shadow: 0 0 0 2px rgba(212, 197, 169, 0.5), 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 -2px 6px rgba(0, 0, 0, 0.1);
}

.back-btn:active {
    transform: translateX(-2px) translateY(0);
    box-shadow: 0 0 0 2px rgba(212, 197, 169, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 -1px 4px rgba(0, 0, 0, 0.1);
}

.back-btn svg {
    width: 24px;
    height: 24px;
}

.user-greeting h1 {
    color: white;
    font-size: 1.6em;
    margin-bottom: 5px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.user-name {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1em;
    font-weight: 600;
}

.user-avatar-placeholder,
.user-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: 700;
    border: 4px solid white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.user-avatar {
    object-fit: cover;
}

/* Main Content */
.dashboard-main {
    padding: 20px;
}

/* Stats Section */
.stats-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 25px;
}

.stat-card {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    padding: 20px 15px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    border-top: 4px solid #0891b2;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.stat-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
}

.stat-label {
    color: #94a3b8;
    font-size: 0.85em;
    margin-bottom: 5px;
    font-weight: 600;
}

.stat-value {
    color: #e2e8f0;
    font-size: 2em;
    font-weight: 700;
}

/* Features Section */
.features-section {
    margin-bottom: 20px;
}

.section-title {
    color: white;
    font-size: 1.5em;
    margin-bottom: 15px;
    font-weight: 700;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.feature-card {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    border-left: 5px solid #0891b2;
}

.feature-card:hover {
    transform: translateX(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.feature-icon.book {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
}

.feature-icon.game {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.feature-icon.progress {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
}

.feature-icon.bookmark {
    background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
}

.feature-icon svg {
    width: 30px;
    height: 30px;
}

.feature-content {
    flex: 1;
}

.feature-content h3 {
    color: #e2e8f0;
    font-size: 1.15em;
    margin-bottom: 5px;
    font-weight: 700;
}

.feature-content p {
    color: #94a3b8;
    font-size: 0.9em;
    line-height: 1.4;
}

.arrow-icon {
    width: 24px;
    height: 24px;
    color: #ccc;
    transition: all 0.3s;
    flex-shrink: 0;
}

.feature-card:hover .arrow-icon {
    color: #0891b2;
    transform: translateX(5px);
}

/* Bottom Navigation - Game Style UI - Compact */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 100%);
    display: flex;
    justify-content: space-around;
    padding: 6px 8px 8px 8px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-top: none;
    width: 100%;
    max-width: 800px;
    /* Prevent stretching - important */
    flex-shrink: 0;
    flex-grow: 0;
    min-height: 60px;
    overflow: hidden;
}

/* Bottom Nav - Dark orange with black icons */

/* Removed decorative notch on top for cleaner look */

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333333;
    transition: all 0.3s ease;
    padding: 6px 8px;
    border-radius: 10px;
    flex: 1;
    max-width: 70px;
    min-height: 50px;
    position: relative;
    background: transparent;
    flex-shrink: 0;
}

/* Game button style */
.nav-item:active {
    opacity: 0.7;
}

.nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    filter: none;
}

.nav-item span {
    font-size: 0.55em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    transition: all 0.3s;
    text-shadow: none;
    white-space: nowrap;
    margin-top: 2px;
    line-height: 1.2;
    color: #333333;
}

/* Hover effect */
.nav-item:hover {
    color: #000000;
    background: rgba(0, 0, 0, 0.08);
}

/* Active state - different colors per page */
.nav-item.active {
    color: #ffffff;
    background: #0891b2;
}

/* Home page active - Green Teal */
body[data-page="index"] .nav-item.active[href*="index"] {
    background: linear-gradient(135deg, #00b4d8, #48cae4);
    box-shadow: 0 0 15px rgba(0, 180, 216, 0.6);
}

/* Read page active - Teal */
body[data-page="read"] .nav-item.active[href*="read"] {
    background: linear-gradient(135deg, #14b8a6, #2dd4bf);
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.5);
}

/* Game page active - Cyan */
body[data-page="game"] .nav-item.active[href*="game"] {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    box-shadow: 0 0 15px rgba(8, 145, 178, 0.5);
}

/* Leaderboard page active - Orange */
body[data-page="leaderboard"] .nav-item.active[href*="leaderboard"] {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
}

/* Profile page active - Emerald Green */
body[data-page="profile"] .nav-item.active[href*="profile"] {
    background: linear-gradient(135deg, #10b981, #34d399);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}

.nav-item.active svg {
    filter: none;
}

.nav-item.active span {
    font-weight: 700;
    color: #ffffff;
}

/* Profile Page Styles */
.profile-card {
    background: white;
    padding: 30px 20px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.profile-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #1a5c3e, #2d8659);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    font-weight: 700;
}

.profile-name {
    color: #1a5c3e;
    font-size: 1.8em;
    margin-bottom: 5px;
    font-weight: 700;
}

.profile-email {
    color: #666;
    font-size: 1em;
    font-weight: 600;
}

.profile-info-section {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(26, 92, 62, 0.05), rgba(45, 134, 89, 0.05));
    transition: all 0.3s;
}

.info-item:hover {
    transform: translateX(5px);
    background: linear-gradient(135deg, rgba(26, 92, 62, 0.1), rgba(45, 134, 89, 0.1));
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
}

.info-content {
    flex: 1;
}

.info-label {
    color: #999;
    font-size: 0.85em;
    margin-bottom: 3px;
    font-weight: 600;
}

.info-value {
    color: #1a5c3e;
    font-weight: 700;
    font-size: 1.1em;
}

.profile-actions {
    margin-bottom: 80px;
}

.logout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #c9302c 0%, #d9534f 100%);
    color: white;
    padding: 18px 30px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1em;
    transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(201, 48, 44, 0.3);
}

.logout-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(201, 48, 44, 0.4);
}

.logout-button svg {
    width: 22px;
    height: 22px;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .dashboard-header {
        padding: 20px 15px;
        border-radius: 0 0 25px 25px;
    }

    .user-greeting h1 {
        font-size: 1.4em;
    }

    .user-avatar-placeholder,
    .user-avatar {
        width: 50px;
        height: 50px;
        font-size: 1.3em;
    }

    .stats-section {
        gap: 8px;
    }

    .stat-card {
        padding: 12px 8px;
    }

    .stat-icon {
        width: 28px;
        height: 28px;
    }

    .stat-label {
        font-size: 0.7em;
    }

    .stat-value {
        font-size: 1.3em;
    }

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

    .feature-card {
        padding: 15px;
    }

    .feature-icon {
        width: 50px;
        height: 50px;
    }

    .feature-content h3 {
        font-size: 1em;
    }

    .feature-content p {
        font-size: 0.85em;
    }
}

/* Tablet and Desktop */
@media (min-width: 769px) {
    body {
        padding-bottom: 0;
    }

    .bottom-nav {
        position: relative;
        max-width: 768px;
        margin: 20px auto 0;
        border-radius: 20px;
        border-top: none;
    }

    .dashboard-main {
        padding: 30px;
    }
}

/* Small screens - compact bottom nav */
@media (max-width: 360px) {
    .bottom-nav {
        padding: 4px 4px 6px 4px;
    }

    .nav-item {
        padding: 4px 4px;
        max-width: 60px;
        min-height: 44px;
    }

    .nav-item svg {
        width: 18px;
        height: 18px;
    }

    .nav-item span {
        font-size: 0.5em;
        letter-spacing: 0;
    }
}

/* Very small screens (320px) */
@media (max-width: 320px) {
    .bottom-nav {
        padding: 3px 2px 5px 2px;
    }

    .nav-item {
        padding: 3px 2px;
        max-width: 55px;
        min-height: 40px;
    }

    .nav-item svg {
        width: 16px;
        height: 16px;
    }

    .nav-item span {
        font-size: 0.45em;
    }
}