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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    background: var(--bg-gradient);
    background-attachment: fixed;
    background-size: cover;
    color: var(--text-color);
    transition: background 0.3s ease, color 0.3s ease;
    min-height: 100vh;
}

/* ========================================
   FONT SIZE SYSTEM
   ======================================== */

/* Small font size (previously called default) */
body.font-small {
    font-size: 16px;
}

/* Default font size (previously called large) - increases all text by 15% */
body.font-default {
    font-size: 18.4px;
}

body.font-default h1 {
    font-size: 2.3rem;
}

body.font-default h2 {
    font-size: 1.73rem;
}

body.font-default h3 {
    font-size: 1.38rem;
}

body.font-default .task-compact-name {
    font-size: 1.09rem;
}

body.font-default .task-compact-meta {
    font-size: 0.92rem;
}

body.font-default .btn-primary,
body.font-default .btn-secondary,
body.font-default button {
    font-size: 1.15rem;
}

/* Default font size - adjust grids to prevent overflow */
body.font-default .achievements-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

body.font-default .avatar-grid {
    grid-template-columns: repeat(2, 1fr);
}

body.font-default .progress-stats {
    grid-template-columns: repeat(2, 1fr);
}

/* Large font size (previously called extra-large) - increases all text by 30% */
body.font-large {
    font-size: 20.8px;
}

body.font-large h1 {
    font-size: 2.6rem;
}

body.font-large h2 {
    font-size: 1.95rem;
}

body.font-large h3 {
    font-size: 1.56rem;
}

body.font-large .task-compact-name {
    font-size: 1.23rem;
}

body.font-large .task-compact-meta {
    font-size: 1.04rem;
}

body.font-large .btn-primary,
body.font-large .btn-secondary,
body.font-large button {
    font-size: 1.3rem;
}

/* Extra large font size - adjust achievements grid to single column */
body.font-large .achievements-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Extra large font size - adjust avatar grid to 2 columns instead of 4 */
body.font-large .avatar-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Extra large font size - adjust progress stats to 2 columns instead of 4 */
body.font-large .progress-stats {
    grid-template-columns: repeat(2, 1fr);
}

/* ========================================
   THEME SYSTEM - 15 Themes
   Each theme has AM/Midday/PM variations
   70-degree gradient backgrounds
   ======================================== */

/* 1. LIGHT THEME (Default - White to Lavender) */
:root, .theme-light {
    --bg-gradient: linear-gradient(70deg, #ffffff 0%, #e8e0f5 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #1d1d1f;
    --text-secondary: #6e6e73;
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --secondary-color: #8b5cf6;
    --success-color: #10b981;
    --border-color: #d2d2d7;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.theme-light.time-morning {
    --bg-gradient: linear-gradient(70deg, #ffffff 0%, #f5f0ff 100%);
}

.theme-light.time-night {
    --bg-gradient: linear-gradient(70deg, #f0f0f5 0%, #d0c4e8 100%);
}

/* 2. DARK THEME (Charcoal to Deep Purple) */
.theme-dark {
    --bg-gradient: linear-gradient(70deg, #2a2a2e 0%, #1a1625 100%);
    --card-bg: rgba(45, 45, 50, 0.85);
    --text-color: #e5e5e5;
    --text-secondary: #a0a0a0;
    --primary-color: #818cf8;
    --primary-hover: #6366f1;
    --secondary-color: #a78bfa;
    --success-color: #34d399;
    --border-color: #404040;
    --shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.theme-dark.time-morning {
    --bg-gradient: linear-gradient(70deg, #353540 0%, #2a2538 100%);
}

.theme-dark.time-night {
    --bg-gradient: linear-gradient(70deg, #1a1a1e 0%, #0f0a18 100%);
}

/* 3. OCEAN THEME (Cyan to Deep Blue) */
.theme-ocean {
    --bg-gradient: linear-gradient(70deg, #5fcde4 0%, #004d61 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #003642;
    --text-secondary: #006b7d;
    --primary-color: #0077be;
    --primary-hover: #005f96;
    --secondary-color: #00a8cc;
    --success-color: #14b8a6;
    --border-color: #b3e0f2;
    --shadow: 0 2px 8px rgba(0,119,190,0.15);
}

.theme-ocean.time-morning {
    --bg-gradient: linear-gradient(70deg, #87ceeb 0%, #1e90ff 100%);
}

.theme-ocean.time-night {
    --bg-gradient: linear-gradient(70deg, #2b5876 0%, #001a26 100%);
}

/* 4. SUNSET THEME (Coral to Golden Yellow) */
.theme-sunset {
    --bg-gradient: linear-gradient(70deg, #ff7b54 0%, #ffd93d 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #5c3d2e;
    --text-secondary: #8b6f47;
    --primary-color: #ff6b6b;
    --primary-hover: #ff5252;
    --secondary-color: #ffa500;
    --success-color: #f59e0b;
    --border-color: #ffe0b3;
    --shadow: 0 2px 8px rgba(255,107,107,0.15);
}

.theme-sunset.time-morning {
    --bg-gradient: linear-gradient(70deg, #ffb088 0%, #ffe680 100%);
}

.theme-sunset.time-night {
    --bg-gradient: linear-gradient(70deg, #d64545 0%, #c98c00 100%);
}

/* 5. FOREST THEME (Sage Green to Deep Forest) */
.theme-forest {
    --bg-gradient: linear-gradient(70deg, #8fbc8f 0%, #1b4332 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #0f2817;
    --text-secondary: #2d6a4f;
    --primary-color: #2d5016;
    --primary-hover: #1e3a0f;
    --secondary-color: #4a7c28;
    --success-color: #52b788;
    --border-color: #b7e4c7;
    --shadow: 0 2px 8px rgba(45,80,22,0.15);
}

.theme-forest.time-morning {
    --bg-gradient: linear-gradient(70deg, #b8d8ba 0%, #3a6b3f 100%);
}

.theme-forest.time-night {
    --bg-gradient: linear-gradient(70deg, #556b2f 0%, #0d1f11 100%);
}

/* 6. ROSE THEME (Blush Pink to Deep Rose) */
.theme-rose {
    --bg-gradient: linear-gradient(70deg, #ffc1cc 0%, #c44569 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #5a1e36;
    --text-secondary: #8b475d;
    --primary-color: #e63946;
    --primary-hover: #c81e2a;
    --secondary-color: #f72585;
    --success-color: #f77f00;
    --border-color: #ffd4e0;
    --shadow: 0 2px 8px rgba(230,57,70,0.15);
}

.theme-rose.time-morning {
    --bg-gradient: linear-gradient(70deg, #ffd9e0 0%, #e88ba8 100%);
}

.theme-rose.time-night {
    --bg-gradient: linear-gradient(70deg, #d98ba0 0%, #8b2846 100%);
}

/* 7. SKY THEME (Light Blue to Azure) */
.theme-sky {
    --bg-gradient: linear-gradient(70deg, #b3e0ff 0%, #3b7ca7 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #1a3a52;
    --text-secondary: #4a5f7a;
    --primary-color: #2196f3;
    --primary-hover: #1976d2;
    --secondary-color: #03a9f4;
    --success-color: #00bcd4;
    --border-color: #cceeff;
    --shadow: 0 2px 8px rgba(33,150,243,0.15);
}

.theme-sky.time-morning {
    --bg-gradient: linear-gradient(70deg, #d6f0ff 0%, #6ba8d4 100%);
}

.theme-sky.time-night {
    --bg-gradient: linear-gradient(70deg, #6a99c2 0%, #1f4e6b 100%);
}

/* 8. LAVENDER THEME (Soft Purple to Rich Lavender) */
.theme-lavender {
    --bg-gradient: linear-gradient(70deg, #d4bbff 0%, #7851a9 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #3d2959;
    --text-secondary: #5d4471;
    --primary-color: #9c27b0;
    --primary-hover: #7b1fa2;
    --secondary-color: #ba68c8;
    --success-color: #ab47bc;
    --border-color: #e6d9f0;
    --shadow: 0 2px 8px rgba(156,39,176,0.15);
}

.theme-lavender.time-morning {
    --bg-gradient: linear-gradient(70deg, #e8d9ff 0%, #a279cc 100%);
}

.theme-lavender.time-night {
    --bg-gradient: linear-gradient(70deg, #9370db 0%, #4b2a6b 100%);
}

/* 9. MINT THEME (Pale Mint to Emerald) */
.theme-mint {
    --bg-gradient: linear-gradient(70deg, #c1ffd7 0%, #1e7a46 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #0d3d25;
    --text-secondary: #2d5f43;
    --primary-color: #00a878;
    --primary-hover: #008765;
    --secondary-color: #00d9a3;
    --success-color: #10b981;
    --border-color: #d0f5e4;
    --shadow: 0 2px 8px rgba(0,168,120,0.15);
}

.theme-mint.time-morning {
    --bg-gradient: linear-gradient(70deg, #d9ffe6 0%, #4db880 100%);
}

.theme-mint.time-night {
    --bg-gradient: linear-gradient(70deg, #5cb88a 0%, #0f4d2b 100%);
}

/* 10. PEACH THEME (Light Peach to Orange) */
.theme-peach {
    --bg-gradient: linear-gradient(70deg, #ffd4a3 0%, #ff8c42 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #5c3a1f;
    --text-secondary: #8b6446;
    --primary-color: #ff9e5e;
    --primary-hover: #ff8542;
    --secondary-color: #ffb380;
    --success-color: #f59e0b;
    --border-color: #ffe8d0;
    --shadow: 0 2px 8px rgba(255,158,94,0.15);
}

.theme-peach.time-morning {
    --bg-gradient: linear-gradient(70deg, #ffe4c4 0%, #ffb380 100%);
}

.theme-peach.time-night {
    --bg-gradient: linear-gradient(70deg, #d9884d 0%, #c95d00 100%);
}

/* 11. BERRY THEME (Pink to Deep Berry) */
.theme-berry {
    --bg-gradient: linear-gradient(70deg, #ff9dd9 0%, #7b2869 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #4a1236;
    --text-secondary: #6e3654;
    --primary-color: #c2185b;
    --primary-hover: #a01048;
    --secondary-color: #e91e63;
    --success-color: #f06292;
    --border-color: #ffd4e8;
    --shadow: 0 2px 8px rgba(194,24,91,0.15);
}

.theme-berry.time-morning {
    --bg-gradient: linear-gradient(70deg, #ffb3e6 0%, #a55087 100%);
}

.theme-berry.time-night {
    --bg-gradient: linear-gradient(70deg, #8b3770 0%, #4a0d2f 100%);
}

/* 12. AQUA THEME (Turquoise to Teal) */
.theme-aqua {
    --bg-gradient: linear-gradient(70deg, #7fdbda 0%, #116466 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #083a3d;
    --text-secondary: #2a5a5c;
    --primary-color: #008b8b;
    --primary-hover: #006d6d;
    --secondary-color: #20b2aa;
    --success-color: #2dd4bf;
    --border-color: #c7f0ee;
    --shadow: 0 2px 8px rgba(0,139,139,0.15);
}

.theme-aqua.time-morning {
    --bg-gradient: linear-gradient(70deg, #a7eae8 0%, #3fa6a5 100%);
}

.theme-aqua.time-night {
    --bg-gradient: linear-gradient(70deg, #4d9b9b 0%, #084244 100%);
}

/* 13. AMBER THEME (Light Amber to Burnt Orange) */
.theme-amber {
    --bg-gradient: linear-gradient(70deg, #ffc857 0%, #db6400 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #5c3000;
    --text-secondary: #8b5e2b;
    --primary-color: #f57c00;
    --primary-hover: #e65100;
    --secondary-color: #ff9800;
    --success-color: #ffa726;
    --border-color: #ffe5b4;
    --shadow: 0 2px 8px rgba(245,124,0,0.15);
}

.theme-amber.time-morning {
    --bg-gradient: linear-gradient(70deg, #ffd87a 0%, #f08a3d 100%);
}

.theme-amber.time-night {
    --bg-gradient: linear-gradient(70deg, #cc7a00 0%, #993d00 100%);
}

/* 14. PLUM THEME (Soft Plum to Deep Plum) */
.theme-plum {
    --bg-gradient: linear-gradient(70deg, #dda0dd 0%, #5e2b5c 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #3a1838;
    --text-secondary: #5c3359;
    --primary-color: #8e44ad;
    --primary-hover: #6c2e7a;
    --secondary-color: #9b59b6;
    --success-color: #ab47bc;
    --border-color: #efd9ee;
    --shadow: 0 2px 8px rgba(142,68,173,0.15);
}

.theme-plum.time-morning {
    --bg-gradient: linear-gradient(70deg, #f0c7f0 0%, #8b5f8b 100%);
}

.theme-plum.time-night {
    --bg-gradient: linear-gradient(70deg, #7a3e7a 0%, #391837 100%);
}

/* 15. JADE THEME (Light Jade to Rich Green) */
.theme-jade {
    --bg-gradient: linear-gradient(70deg, #a8e6cf 0%, #1e5128 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #0d2818;
    --text-secondary: #2a4f37;
    --primary-color: #2e7d32;
    --primary-hover: #1b5e20;
    --secondary-color: #43a047;
    --success-color: #66bb6a;
    --border-color: #c8f0dd;
    --shadow: 0 2px 8px rgba(46,125,50,0.15);
}

.theme-jade.time-morning {
    --bg-gradient: linear-gradient(70deg, #c7f5e3 0%, #4a9969 100%);
}

.theme-jade.time-night {
    --bg-gradient: linear-gradient(70deg, #3d7050 0%, #0f3318 100%);
}

.top-nav {
    position: sticky;
    top: 0;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 1rem;
    z-index: 1000;
    box-shadow: var(--shadow);
}

.top-nav a {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    transition: all 0.2s;
}

.top-nav a.active {
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
}

.top-nav a:hover {
    color: var(--primary-color);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.login-container {
    max-width: 400px;
    margin: 4rem auto;
    text-align: center;
}

.login-container h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.login-form {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-form input {
    padding: 1rem;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-color);
}

.login-form input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--card-bg);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
}

.dashboard {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.user-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.user-info h2 {
    margin: 0;
}

.avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-card {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: var(--shadow);
    text-align: center;
}

.stat-card h3 {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

.stat-details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    text-align: left;
    font-size: 0.85rem;
}

.stat-item {
    padding: 0.4rem 0;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-points {
    color: var(--success-color);
    font-weight: 600;
}

.streak-days {
    color: var(--secondary-color);
    font-weight: 600;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* New Profile Card Styles for Dashboard */
.profile-card {
    background: var(--card-bg);
    padding: 3rem 2rem;
    border-radius: 16px;
    box-shadow: var(--shadow);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
}

.profile-username {
    font-size: 1.75rem;
    margin: 0 0 1rem 0;
    color: var(--text-color);
}

.profile-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem 0;
    font-size: 1rem;
    color: var(--text-secondary);
}

.profile-stat-item {
    font-weight: 600;
}

.profile-stat-separator {
    color: var(--border-color);
    font-weight: 400;
}

.profile-progress-container {
    width: 80%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin: 0 auto 0.75rem;
}

.profile-progress-container .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.profile-next-level {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.75rem;
}

.dashboard-settings-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.dashboard-settings-container .btn-secondary,
.dashboard-settings-container button {
    min-width: 180px;
    text-align: center;
    padding: 0.75rem 1.5rem;
    box-sizing: border-box;
    line-height: 1.5;
    height: auto;
}

.welcome-modal, .completion-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    z-index: 10002;
}

.modal-content {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.modal-content h2 {
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 2em; /* Use em to scale with parent font size */
}

/* Force dark text in completion modal on white background */
#completionModal .modal-content {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid var(--primary-color);
}

#completionModal .modal-content h2,
#completionModal .modal-content p,
#completionModal .modal-content div {
    color: #111827 !important;
}

#completionMessage h2 {
    color: #111827 !important;
}

#completionMessage p,
#completionMessage div {
    color: #1f2937 !important;
}

/* Force edit task modal to have white background with black text in all themes */
#editTaskModal .modal-content,
.edit-modal .modal-content,
.task-edit-modal .modal-content,
#addTaskModal .modal-content {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid var(--primary-color);
}

#editTaskModal .modal-content h2,
#editTaskModal .modal-content p,
#editTaskModal .modal-content label,
#editTaskModal .modal-content small,
#editTaskModal .modal-content span,
#addTaskModal .modal-content h2,
#addTaskModal .modal-content p,
#addTaskModal .modal-content label,
#addTaskModal .modal-content small,
#addTaskModal .modal-content span {
    color: #111827 !important;
}

#editTaskModal .form-group input,
#editTaskModal .form-group select,
#addTaskModal .form-group input,
#addTaskModal .form-group select {
    background: white !important;
    color: #111827 !important;
    border: 2px solid #d1d5db !important;
}

#editTaskModal .form-group input::placeholder,
#addTaskModal .form-group input::placeholder {
    color: #6b7280 !important;
}

.tasks-page {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.header-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-add-task {
    background: var(--success-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}

.btn-add-task:hover {
    background: #059669;
    transform: translateY(-2px);
}

/* Search Container */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: 1rem;
    color: #1f2937;
    width: 250px;
    transition: all 0.2s ease;
}

.search-input::placeholder {
    color: #9ca3af;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-clear {
    position: absolute;
    right: 0.5rem;
    top: 0.75rem;
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    transition: color 0.2s ease;
    z-index: 10;
}

.search-clear:hover {
    color: #1f2937;
}

/* Search Results Dropdown */
.search-results {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: white;
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
}

.search-result-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.search-result-item:hover {
    background: linear-gradient(90deg, 
        rgba(99, 102, 241, 0.1), 
        rgba(139, 92, 246, 0.1));
    transform: translateX(4px);
}

.search-result-name {
    font-weight: 600;
    color: #1f2937;
    flex: 1;
}

.search-result-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.search-result-category {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.search-result-points {
    color: #059669;
    font-weight: 600;
}

.search-no-results {
    padding: 1rem;
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

/* Task Highlight Effect - Universal across all themes */
.task-item-compact.highlighted {
    background: rgb(191, 219, 254) !important;
    border: 2px solid rgb(96, 165, 250) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3), 
                0 4px 12px rgba(96, 165, 250, 0.5) !important;
    animation: highlightPulse 0.6s ease-in-out;
}

@keyframes highlightPulse {
    0%, 100% {
        transform: translateX(0) scale(1);
    }
    50% {
        transform: translateX(4px) scale(1.02);
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.4), 
                    0 6px 16px rgba(96, 165, 250, 0.6);
    }
}

.task-category {
    background: var(--card-bg);
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.task-category h2 {
    margin: 0;
    padding: 0.3rem 0;
    color: var(--primary-color);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
    font-weight: 600;
    line-height: 1.3;
}

.task-category h2:hover {
    color: var(--primary-hover);
}

.task-category.pinned-section h2 {
    font-weight: 700;
}

.category-arrow {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 0.65em;
    margin-right: 0.35rem;
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.7rem;
    background: var(--bg-color);
    border-radius: 8px;
    transition: all 0.2s;
}

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

.task-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.task-info h3 {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

.task-points {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.streak-badge {
    font-size: 0.8rem;
    color: var(--secondary-color);
    font-weight: 600;
}

.task-actions {
    display: flex;
    gap: 0.4rem;
}

.btn-complete, .btn-pin, .btn-edit, .btn-timer {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s;
}

.btn-complete {
    background: var(--success-color);
    color: white;
}

.btn-complete:hover {
    transform: scale(1.1);
}

.btn-pin {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
}

.btn-pin.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-edit {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
}

.btn-timer {
    background: var(--card-bg);
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-timer:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.settings-page {
    max-width: 600px;
    margin: 0 auto;
}

.settings-section {
    background: var(--card-bg);
    padding: 1.25rem;
    border-radius: 16px;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}

.settings-section h2 {
    margin-bottom: 0.75rem;
    color: var(--primary-color);
}

.settings-section label {
    display: block;
    margin: 0.75rem 0 0.35rem;
    font-weight: 500;
}

.settings-section input[type="text"],
.settings-section input[type="range"],
.settings-section select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    color: var(--text-color);
}

.settings-section input[type="checkbox"] {
    margin-right: 0.5rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    justify-content: flex-end;
}

.form-actions .btn-primary,
.form-actions .btn-secondary {
    margin: 0;
}

/* Generic fallback: any modal containing forms should be readable */
.modal-content:has(.form-group) {
    background: rgba(255, 255, 255, 0.9) !important;
}

.modal-content:has(.form-group) h2,
.modal-content:has(.form-group) h3,
.modal-content:has(.form-group) p,
.modal-content:has(.form-group) label,
.modal-content:has(.form-group) small,
.modal-content:has(.form-group) span:not(.btn-primary):not(.btn-secondary) {
    color: #111827 !important;
}

.modal-content:has(.form-group) input,
.modal-content:has(.form-group) select,
.modal-content:has(.form-group) textarea {
    background: white !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

.modal-content:has(.form-group) input::placeholder,
.modal-content:has(.form-group) textarea::placeholder {
    color: #6b7280 !important;
}

@media (max-width: 768px) {
    .container {
        padding: 1rem 0.5rem;
    }
    
    .user-header {
        flex-direction: column;
        text-align: center;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

.placeholder {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 2rem;
}

.settings-card {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-color);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-card:hover {
    transform: translateX(4px);
    background: var(--border-color);
}

.settings-card-icon {
    font-size: 2rem;
    margin-right: 0.75rem;
}

.settings-card-content {
    flex: 1;
}

.settings-card-content h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.settings-card-content p {
    margin: 0.15rem 0 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.settings-card-arrow {
    font-size: 1.5rem;
    color: var(--text-secondary);
}

.unlock-info {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.avatar-option {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.avatar-option.unlocked:hover {
    transform: scale(1.1);
    background: var(--primary-color);
    color: white;
}

.avatar-option.locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.avatar-emoji {
    font-size: 2.5rem;
}

.avatar-lock-info {
    font-size: 0.7rem;
    margin-top: 0.25rem;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}

.theme-option {
    cursor: pointer;
    text-align: center;
}

.theme-preview {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    border: 3px solid var(--border-color);
    margin-bottom: 0.5rem;
    transition: all 0.2s;
}

.theme-option:hover .theme-preview {
    transform: scale(1.05);
    border-color: var(--primary-color);
}

.theme-name {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Theme previews - Match theme gradients */
.theme-preview.theme-light { background: linear-gradient(70deg, #ffffff, #e8e0f5); }
.theme-preview.theme-dark { background: linear-gradient(70deg, #2a2a2e, #1a1625); }
.theme-preview.theme-ocean { background: linear-gradient(70deg, #5fcde4, #004d61); }
.theme-preview.theme-sunset { background: linear-gradient(70deg, #ff7b54, #ffd93d); }
.theme-preview.theme-forest { background: linear-gradient(70deg, #8fbc8f, #1b4332); }
.theme-preview.theme-rose { background: linear-gradient(70deg, #ffc1cc, #c44569); }
.theme-preview.theme-sky { background: linear-gradient(70deg, #b3e0ff, #3b7ca7); }
.theme-preview.theme-lavender { background: linear-gradient(70deg, #d4bbff, #7851a9); }
.theme-preview.theme-mint { background: linear-gradient(70deg, #c1ffd7, #1e7a46); }
.theme-preview.theme-peach { background: linear-gradient(70deg, #ffd4a3, #ff8c42); }
.theme-preview.theme-berry { background: linear-gradient(70deg, #ff9dd9, #7b2869); }
.theme-preview.theme-aqua { background: linear-gradient(70deg, #7fdbda, #116466); }
.theme-preview.theme-amber { background: linear-gradient(70deg, #ffc857, #db6400); }
.theme-preview.theme-plum { background: linear-gradient(70deg, #dda0dd, #5e2b5c); }
.theme-preview.theme-jade { background: linear-gradient(70deg, #a8e6cf, #1e5128); }

/* Tutorial Styling */
.tutorial-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    display: none;
    pointer-events: all;
}

.tutorial-instruction {
    position: relative;
    z-index: 10001;
    max-width: 400px;
    text-align: center;
    cursor: pointer;
    pointer-events: all;
    background: rgba(255, 255, 255, 0.90) !important;
    border: 2px solid var(--primary-color);
}

.tutorial-instruction #tutorialMessage {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: #111827 !important;
}

.tutorial-continue {
    margin-bottom: 0.5rem;
    width: 100%;
}

.tutorial-skip {
    margin-top: 0.5rem;
    width: 100%;
}

.tutorial-highlight {
    animation: tutorialPulse 1.5s ease-in-out infinite;
    background: var(--success-color) !important;
    color: white !important;
    box-shadow: 0 0 0 4px var(--success-color), 0 0 20px rgba(16, 185, 129, 0.6) !important;
    border-radius: 8px;
}

@keyframes tutorialPulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 4px var(--success-color), 0 0 20px rgba(16, 185, 129, 0.6);
    }
    50% { 
        transform: scale(1.15); 
        box-shadow: 0 0 0 8px var(--success-color), 0 0 30px rgba(16, 185, 129, 0.9);
    }
}

.pulse-animation {
    animation: tutorialPulse 1.5s ease-in-out infinite;
}

.tutorial-clickable {
    cursor: pointer;
    position: relative;
    z-index: 10001;
    pointer-events: auto !important;
}

.points-earned {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success-color);
    margin-top: 1rem;
}

/* ============================================
   TIMER STYLES
   ============================================ */
.timer-nav-btn {
    font-size: 1.3rem;
    padding: 0.6rem 0.8rem !important;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer-modal-content {
    max-width: 450px;
    text-align: center;
}

.timer-display {
    position: relative;
    margin: 1rem auto;
    width: 300px;
    height: 300px;
}

#timerClock {
    display: block;
    margin: 0 auto;
}

.timer-digital {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-color);
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    pointer-events: none;
}

.timer-zone-indicator {
    margin: 0.5rem 0;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    background: var(--card-bg);
    display: inline-block;
}

.zone-label {
    font-weight: 600;
    font-size: 1rem;
}

.timer-zone-indicator.blue {
    background: linear-gradient(135deg, #4299e1 0%, #667eea 100%);
    color: white;
}

.timer-zone-indicator.red {
    background: linear-gradient(135deg, #f56565 0%, #ed8936 100%);
    color: white;
}

.timer-controls {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 1rem 0;
}

.timer-controls button {
    min-width: 70px;
    padding: 0.5rem 0.75rem;
}

.timer-controls #timerComplete {
    background: var(--success-color);
    color: white;
    font-size: 1.5rem;
    min-width: 70px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    line-height: 1;
    vertical-align: middle;
}

.timer-controls #timerComplete:hover {
    background: #059669;
    transform: translateY(-2px);
}

.btn-pulse {
    animation: btnPulse 1.5s ease-in-out infinite;
}

@keyframes btnPulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 var(--primary-color);
    }
    50% { 
        box-shadow: 0 0 0 8px transparent;
    }
}

/* ============================================
   ACHIEVEMENTS STYLES
   ============================================ */
.achievements-page {
    max-width: 1200px;
    margin: 0 auto;
}

.achievements-page h1 {
    margin-bottom: 0.5rem;
}

.achievements-filter {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.achievements-separator {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--border-color);
    margin: 1rem 0;
}

.achievement-card {
    background: var(--card-bg);
    padding: 1.25rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.achievement-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.achievement-card.locked {
    opacity: 0.5;
    filter: grayscale(50%);
}

.achievement-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.achievement-card.locked .achievement-icon {
    filter: grayscale(100%);
}

.achievement-name {
    font-weight: 700;
    font-size: 1rem;
    margin: 0.5rem 0;
    color: var(--text-color);
}

.achievement-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0.5rem 0;
}

.achievement-progress {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-color);
}

.achievement-unlocked-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.achievement-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--success-color);
    color: white;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.new-badge {
    background: #ff6b6b;
}

/* ============================================
   PROGRESS PAGE STYLES
   ============================================ */
.progress-page {
    max-width: 1200px;
    margin: 0 auto;
}

.progress-stats {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.progress-stat-card {
    text-align: center;
    padding: 0;
}

.progress-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0.25rem 0;
}

.progress-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.progress-chart-section {
    background: var(--card-bg);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    margin: 1rem 0;
}

/* Collapsed sections - smaller height, centered title */
.progress-chart-section:not(.expanded) {
    padding: 0.75rem 1rem;
}

.progress-chart-section h2 {
    margin: 0;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Expanded sections */
.progress-chart-section.expanded h2 {
    margin-bottom: 1rem;
}

/* Section content wrapper */
.section-content {
    margin-top: 0;
}

.section-arrow {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 0.9rem;
}

.progress-chart-section canvas {
    max-height: 300px;
}

.calendar-heatmap {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin: 1rem auto 0.5rem;
    max-width: 350px;
}

.calendar-day {
    aspect-ratio: 1;
    background: #e5e7eb;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--text-color);
    min-height: 40px;
}

.calendar-day:hover {
    transform: scale(1.15);
}

.calendar-day.level-1 { background: #d4edda; }
.calendar-day.level-2 { background: #9ed19e; }
.calendar-day.level-3 { background: #5cb85c; }
.calendar-day.level-4 { background: #60a5fa; }
.calendar-day.level-5 { background: #2563eb; }
.calendar-day.level-6 { background: #fde68a; }
.calendar-day.level-7 { background: #ffc107; }
.calendar-day.level-8 { background: #f59e0b; }

.calendar-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.legend-pair {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

@media (max-width: 768px) {
    .calendar-legend {
        flex-wrap: wrap;
        max-width: 100%;
        gap: 0.5rem 0.75rem;
        row-gap: 0.75rem;
    }
}

.calendar-legend-item {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #e5e7eb;
}

.calendar-legend-item.level-1 { background: #d4edda; }
.calendar-legend-item.level-2 { background: #9ed19e; }
.calendar-legend-item.level-3 { background: #5cb85c; }
.calendar-legend-item.level-4 { background: #60a5fa; }
.calendar-legend-item.level-5 { background: #2563eb; }
.calendar-legend-item.level-6 { background: #fde68a; }
.calendar-legend-item.level-7 { background: #ffc107; }
.calendar-legend-item.level-8 { background: #f59e0b; }

.task-history-list {
    /* Removed max-height and overflow to show all tasks */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.task-history-item {
    padding: 0.4rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
}

/* Alternating 3-color gradients - white to light theme to dark theme at 270 degrees */
.task-history-item:nth-child(odd) {
    /* Fallback for older browsers */
    background: linear-gradient(270deg, 
        #ffffff 0%,
        rgba(99, 102, 241, 0.25) 50%, 
        rgba(139, 92, 246, 0.45) 100%);
    /* Modern browsers with color-mix support */
    background: linear-gradient(270deg, 
        #ffffff 0%,
        color-mix(in srgb, var(--primary-color) 25%, white) 50%,
        color-mix(in srgb, var(--secondary-color) 45%, white) 100%);
}

.task-history-item:nth-child(even) {
    /* Fallback for older browsers */
    background: linear-gradient(270deg, 
        #ffffff 0%,
        rgba(139, 92, 246, 0.25) 50%, 
        rgba(236, 72, 153, 0.45) 100%);
    /* Modern browsers with color-mix support */
    background: linear-gradient(270deg, 
        #ffffff 0%,
        color-mix(in srgb, var(--secondary-color) 25%, white) 50%,
        color-mix(in srgb, var(--primary-color) 45%, white) 100%);
}

.task-history-name {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.05rem;
    line-height: 1.3;
}

.task-history-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0;
    line-height: 1.2;
}

.task-history-points {
    font-weight: 700;
    color: var(--success-color);
}

.btn-delete {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.2s;
    opacity: 0.5;
}

.btn-delete:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.1);
    transform: scale(1.1);
}

.progress-empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.progress-empty-state-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    opacity: 0.3;
}

/* Mobile Responsive Styles for Search */
@media (max-width: 768px) {
    .header-buttons {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }
    
    .search-input {
        width: 100%;
    }
    
    .search-container {
        width: 100%;
    }
}

/* Tutorial Button Lockout Styles */
.tutorial-disabled {
    cursor: not-allowed !important;
    filter: grayscale(100%) !important;
}

.tutorial-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}