/* ==============================
           PROFILE VIEW
        ============================== */
        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(145deg, var(--primary) 0%, #1e40af 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto var(--space-md);
            box-shadow: 
                0 4px 14px var(--primary-glow),
                0 0 0 3px var(--bg),
                0 0 0 5px var(--primary-light);
            transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-standard);
            position: relative;
        }

        .profile-avatar:hover {
            transform: scale(1.05);
            box-shadow: 
                0 8px 24px var(--primary-glow),
                0 0 0 3px var(--bg),
                0 0 0 5px var(--primary);
        }

        [data-theme="sepia"] .profile-avatar {
            background: linear-gradient(145deg, #92400e 0%, #78350f 100%);
        }

        .profile-avatar .material-icons-round {
            font-size: 36px;
            color: white;
        }

        .profile-name {
            text-align: center;
            font-size: var(--text-xl);
            font-weight: 800;
            margin-bottom: var(--space-xs);
            letter-spacing: -0.01em;
        }

        .profile-subtitle {
            text-align: center;
            font-size: var(--text-sm);
            color: var(--text-secondary);
            margin-bottom: var(--space-2xl);
            line-height: 1.5;
        }

        /* Stats grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-sm);
            margin-bottom: var(--space-2xl);
        }

        .stat-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: var(--space-lg) var(--space-sm);
            text-align: center;
            transition: all 0.25s var(--ease-standard);
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .stat-value {
            font-size: var(--text-2xl);
            font-weight: 800;
            color: var(--primary);
            line-height: 1;
            margin-bottom: var(--space-xs);
        }

        .stat-label {
            font-size: var(--text-xs);
            color: var(--text-secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            line-height: 1.3;
        }

        /* Settings sections */
        .settings-section {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            margin-bottom: var(--space-lg);
        }

        .settings-section-title {
            font-size: var(--text-xs);
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.6px;
            padding: var(--space-lg) var(--space-lg) var(--space-sm);
        }

        .settings-row {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            padding: var(--space-md) var(--space-lg);
            border-top: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.2s var(--ease-standard);
        }

        .settings-row:first-of-type { border-top: none; }

        .settings-row:hover {
            background: var(--primary-light);
        }

        .settings-row-icon {
            width: 38px;
            height: 38px;
            border-radius: var(--radius-sm);
            background: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: transform 0.2s var(--ease-spring);
        }

        .settings-row:hover .settings-row-icon {
            transform: scale(1.05);
        }

        .settings-row-icon .material-icons-round {
            font-size: 18px;
            color: var(--primary);
        }

        .settings-row-content { flex: 1; min-width: 0; }

        .settings-row-label {
            font-size: var(--text-base);
            font-weight: 600;
        }

        .settings-row-sub {
            font-size: var(--text-xs);
            color: var(--text-secondary);
            margin-top: 2px;
        }

        .settings-row-action {
            color: var(--text-secondary);
            flex-shrink: 0;
        }

        /* Voice gender toggle */
        .voice-toggle {
            display: flex;
            background: var(--surface2);
            border-radius: var(--radius-full);
            padding: 3px;
            gap: 2px;
        }

        .voice-toggle-btn {
            background: none;
            border: none;
            padding: var(--space-xs) var(--space-md);
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s var(--ease-standard);
            color: var(--text-secondary);
            font-family: var(--font-main);
        }

        .voice-toggle-btn.active {
            background: var(--primary);
            color: white;
            box-shadow: var(--shadow-sm);
        }

        /* Notification time input */
        .notif-time-input {
            background: var(--surface);
            border: 1.5px solid var(--border);
            border-radius: var(--radius-md);
            padding: 6px 12px;
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--text);
            cursor: pointer;
            transition: all 0.2s ease;
            width: 100%;
            max-width: 140px;
            margin-top: 4px;
        }
        .notif-time-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
        }
        .notif-time-input::-webkit-calendar-picker-indicator {
            cursor: pointer;
            opacity: 0.7;
        }

        /* Theme selector row */
        .theme-pills {
            display: flex;
            gap: var(--space-sm);
        }

        .theme-pill {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2.5px solid transparent;
            cursor: pointer;
            transition: all 0.2s var(--ease-standard);
            flex-shrink: 0;
        }

        .theme-pill:hover {
            transform: scale(1.1);
        }

        .theme-pill.light-pill {
            background: #ffffff;
            border-color: var(--border);
            box-shadow: 0 0 0 1px var(--border);
        }

        .theme-pill.dark-pill {
            background: #0a0a0f;
            border-color: #333;
        }

        .theme-pill.sepia-pill {
            background: #f8f0e3;
            border-color: #c8a87a;
        }

        .theme-pill.selected {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px var(--primary-glow);
        }

        /* App version footer */
        .profile-footer {
            text-align: center;
            color: var(--text-secondary);
            font-size: var(--text-xs);
            padding: var(--space-sm) 0 var(--space-xl);
            opacity: 0.6;
        }

        /* ==============================
           PROFILE ENHANCEMENTS
        ============================== */
        @keyframes profileFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }

        .profile-avatar {
            animation: profileFloat 3s ease-in-out infinite;
        }

        .profile-name {
            animation: fadeInUp 0.5s var(--ease-spring) 0.1s both;
        }

        .profile-subtitle {
            animation: fadeInUp 0.5s var(--ease-spring) 0.2s both;
        }

        .stat-card {
            animation: fadeInUp 0.4s var(--ease-spring) both;
        }

        .stat-card:nth-child(1) { animation-delay: 0.05s; }
        .stat-card:nth-child(2) { animation-delay: 0.1s; }
        .stat-card:nth-child(3) { animation-delay: 0.15s; }

        .stat-card:hover .stat-value {
            transform: scale(1.08);
        }

        .stat-value {
            transition: transform 0.3s var(--ease-spring);
        }

        .settings-section {
            animation: fadeInUp 0.4s var(--ease-spring) both;
        }

        .settings-section:nth-child(2) { animation-delay: 0.05s; }
        .settings-section:nth-child(3) { animation-delay: 0.1s; }
        .settings-section:nth-child(4) { animation-delay: 0.15s; }
        .settings-section:nth-child(5) { animation-delay: 0.2s; }

        /* ==============================
           TTS ENHANCEMENTS
        ============================== */
        .tts-btn {
            position: relative;
            overflow: hidden;
        }

        .tts-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .tts-btn.playing::before {
            opacity: 1;
            animation: ttsPulse 1.5s ease-in-out infinite;
        }

        @keyframes ttsPulse {
            0%, 100% { transform: scale(1); opacity: 0.2; }
            50% { transform: scale(1.5); opacity: 0; }
        }

        .tts-btn.playing {
            animation: ttsGlow 2s ease-in-out infinite;
        }

        @keyframes ttsGlow {
            0%, 100% { box-shadow: 0 0 0 0 var(--primary-glow); }
            50% { box-shadow: 0 0 0 6px transparent; }
        }

        .voice-slider {
            width: 100%;
            -webkit-appearance: none;
            appearance: none;
            height: 6px;
            border-radius: var(--radius-full);
            background: var(--surface2);
            outline: none;
            margin-top: var(--space-sm);
        }

        .voice-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            box-shadow: 0 2px 8px var(--primary-glow);
            transition: transform 0.2s var(--ease-spring);
        }

        .voice-slider::-webkit-slider-thumb:hover {
            transform: scale(1.15);
        }

        /* ==============================
           DAILY READING PLAN
        ============================== */
        .daily-goal-card {
            background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
            border: 1px solid #fde68a;
            border-radius: var(--radius-lg);
            padding: var(--space-lg);
            margin-bottom: var(--space-xl);
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
        }

        .daily-goal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-md);
            position: relative;
            z-index: 1;
        }

        .daily-goal-title {
            font-size: var(--text-base);
            font-weight: 700;
            color: #92400e;
        }

        .daily-goal-count {
            font-size: var(--text-xs);
            color: #a16207;
            font-weight: 600;
        }

        .daily-progress-bar {
            height: 8px;
            background: rgba(146, 64, 14, 0.12);
            border-radius: var(--radius-full);
            overflow: hidden;
            margin-bottom: var(--space-sm);
            position: relative;
            z-index: 1;
        }

        .daily-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #f97316, #fbbf24);
            border-radius: var(--radius-full);
            transition: width 0.6s var(--ease-spring);
            box-shadow: 0 0 8px rgba(249, 115, 22, 0.3);
        }

        .daily-goal-sub {
            font-size: var(--text-xs);
            color: #a16207;
            position: relative;
            z-index: 1;
        }

        .streak-card {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            border: 1px solid #f59e0b;
            border-radius: var(--radius-lg);
            padding: var(--space-lg);
            margin-bottom: var(--space-md);
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
        }

        .streak-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f97316, #fbbf24);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            flex-shrink: 0;
            box-shadow: 0 4px 16px rgba(249, 115, 22, 0.35);
            animation: streakPulse 2s ease-in-out infinite;
        }

        @keyframes streakPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .streak-info {
            flex: 1;
        }

        .streak-count {
            font-size: var(--text-2xl);
            font-weight: 800;
            color: #92400e;
            line-height: 1;
        }

        .streak-label {
            font-size: var(--text-xs);
            color: #a16207;
            font-weight: 600;
            margin-top: 2px;
        }

        .week-dots {
            display: flex;
            gap: 6px;
            margin-top: var(--space-md);
            justify-content: space-between;
            padding: 0 var(--space-sm);
        }

        .week-dot {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(146, 64, 14, 0.08);
            border: 2px solid rgba(146, 64, 14, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            color: #a16207;
            transition: all 0.3s var(--ease-spring);
        }

        .week-dot.active {
            background: linear-gradient(135deg, #f97316, #fbbf24);
            color: white;
            border-color: #f97316;
            box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
            transform: scale(1.1);
        }

        .week-dot.today {
            border: 2.5px solid #92400e;
            color: #92400e;
            font-weight: 800;
        }

        .week-dot.today.active {
            background: linear-gradient(135deg, #f97316, #fbbf24);
            color: white;
            border-color: #f97316;
        }

        /* ==============================
           READING HISTORY / CALENDAR
        ============================== */
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-lg);
        }

        .calendar-title {
            font-size: var(--text-md);
            font-weight: 700;
        }

        .calendar-nav {
            display: flex;
            gap: var(--space-sm);
        }

        .calendar-nav-btn {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 50%;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s var(--ease-standard);
        }

        .calendar-nav-btn:hover {
            background: var(--primary-light);
            border-color: var(--primary);
            transform: scale(1.05);
        }

        .calendar-nav-btn:active {
            transform: scale(0.95);
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 3px;
            text-align: center;
        }

        .calendar-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--space-xl) 0;
        }

        .calendar-day-label {
            font-size: var(--text-xs);
            font-weight: 700;
            color: #a16207;
            text-transform: uppercase;
            padding: var(--space-sm) 0;
        }

        .calendar-day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: var(--text-sm);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s var(--ease-standard);
            position: relative;
            color: var(--text);
        }

        .calendar-day:hover {
            background: rgba(249, 115, 22, 0.1);
        }

        .calendar-day.empty {
            cursor: default;
        }

        .calendar-day.has-reading {
            background: linear-gradient(135deg, #f97316, #fbbf24);
            color: white;
            box-shadow: 0 2px 6px rgba(249, 115, 22, 0.3);
        }

        .calendar-day.has-reading::after {
            content: '';
            position: absolute;
            bottom: 3px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: white;
        }

        .calendar-day.today {
            border: 2.5px solid #92400e;
            font-weight: 800;
            color: #92400e;
        }

        .history-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-sm);
            margin-top: var(--space-lg);
        }

        .history-stat-card {
            background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
            border: 1px solid #fde68a;
            border-radius: var(--radius-md);
            padding: var(--space-md);
            text-align: center;
        }

        .history-stat-value {
            font-size: var(--text-xl);
            font-weight: 800;
            color: #92400e;
        }

        .history-stat-label {
            font-size: var(--text-xs);
            color: #a16207;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        /* ==============================
           NOTIFICATION BANNER
        ============================== */
        .notification-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: var(--primary);
            color: white;
            padding: var(--space-md) var(--space-lg);
            z-index: 1100;
            display: flex;
            align-items: center;
            gap: var(--space-md);
            transform: translateY(-100%);
            transition: transform 0.35s var(--ease-spring);
            box-shadow: var(--shadow-lg);
        }

        .notification-banner.show {
            transform: translateY(0);
        }

        .notification-banner-text {
            flex: 1;
            font-size: var(--text-sm);
            font-weight: 600;
        }

        .notification-banner-btn {
            background: rgba(255,255,255,0.15);
            border: none;
            color: white;
            padding: var(--space-xs) var(--space-md);
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s var(--ease-standard);
        }

        .notification-banner-btn:hover {
            background: rgba(255,255,255,0.25);
        }

        /* ==============================
           MORE FEATURES MENU (PROFILE)
        ============================== */
        .more-features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-sm);
            padding: var(--space-md);
        }
        .more-feature-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: var(--space-md) 4px;
            background: transparent;
            border: none;
            cursor: pointer;
            font-family: var(--font-main);
            color: var(--text);
        }
        .more-feature-icon {
            width: 46px;
            height: 46px;
            border-radius: var(--radius-md);
            background: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .more-feature-btn span:last-child {
            font-size: 10px;
            font-weight: 600;
            text-align: center;
        }