/* CSS Variables */:root { --primary: #007AFF; --primary-dark: #0056CC; --secondary: #5856D6; --success: #34C759; --warning: #FF9500; --danger: #FF3B30; --gold: #FFD700; --silver: #C0C0C0; --bronze: #CD7F32;  --bg-primary: #FFFFFF; --bg-secondary: #F2F2F7; --bg-tertiary: #FFFFFF; --text-primary: #000000; --text-secondary: #8E8E93; --text-tertiary: #C7C7CC; --border: #D1D1D6; --shadow: rgba(0, 0, 0, 0.1); --shadow-strong: rgba(0, 0, 0, 0.2);  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px;  --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px;}[data-theme="dark"] { --bg-primary: #000000; --bg-secondary: #1C1C1E; --bg-tertiary: #2C2C2E; --text-primary: #FFFFFF; --text-secondary: #8E8E93; --text-tertiary: #48484A; --border: #38383A; --shadow: rgba(0, 0, 0, 0.3); --shadow-strong: rgba(0, 0, 0, 0.5);}/* Reset & Base */* { margin: 0; padding: 0; box-sizing: border-box;}body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; transition: all 0.3s ease; overflow-x: hidden;}/* Navigation */.nav { position: fixed; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); z-index: 1000; transition: all 0.3s ease;}[data-theme="dark"] .nav { background: rgba(0, 0, 0, 0.95);}.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg); display: flex; align-items: center; justify-content: space-between; height: 64px;}.nav-brand { display: flex; align-items: center; gap: var(--spacing-sm);}.nav-brand .logo { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover;}.nav-brand h1 { font-size: 24px; font-weight: 700; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}.nav-menu { display: flex; gap: var(--spacing-sm);}.nav-item { background: none; border: none; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); color: var(--text-secondary); font-weight: 500; cursor: pointer; transition: all 0.2s ease; position: relative;}.nav-item:hover { background: var(--bg-secondary); color: var(--text-primary);}.nav-item.active { background: var(--primary); color: white;}.nav-item.locked { opacity: 0.5; cursor: not-allowed;}.nav-item.locked::after { content: '🔒'; margin-left: var(--spacing-xs); font-size: 12px;}.nav-actions { display: flex; align-items: center; gap: var(--spacing-md);}.theme-toggle { background: var(--bg-secondary); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center;}.theme-toggle:hover { transform: scale(1.1);}.auth-btn { background: var(--primary); color: white; border: none; padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); font-weight: 500; cursor: pointer; transition: all 0.2s ease;}.auth-btn:hover { background: var(--primary-dark); transform: translateY(-1px);}/* Mobile menu toggle */.mobile-menu-toggle { display: none; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-primary); padding: var(--spacing-sm);}/* Main Content */.main { margin-top: 64px; min-height: calc(100vh - 64px);}.section { display: none; padding: var(--spacing-2xl) 0; min-height: calc(100vh - 64px);}.section.active { display: block;}.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg);}/* Clock Styles */.clock-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-2xl); min-height: 70vh; padding: var(--spacing-xl);}.analog-clock { width: min(300px, 80vw); height: min(300px, 80vw); max-width: 300px; max-height: 300px; background: var(--bg-tertiary); border-radius: 50%; box-shadow: 0 20px 40px var(--shadow); position: relative; border: 8px solid var(--bg-secondary); flex-shrink: 0;}.clock-face { width: 100%; height: 100%; position: relative;}.clock-face::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 4px; height: 20px; background: var(--text-primary); border-radius: 2px;}.clock-face::after { content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 4px; background: var(--text-primary); border-radius: 2px;}.hour-hand, .minute-hand, .second-hand { position: absolute; left: 50%; bottom: 50%; transform-origin: bottom center; border-radius: 4px;}.hour-hand { width: 6px; height: 80px; background: var(--text-primary); margin-left: -3px;}.minute-hand { width: 4px; height: 110px; background: var(--text-primary); margin-left: -2px;}.second-hand { width: 2px; height: 120px; background: var(--danger); margin-left: -1px;}.center-dot { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; background: var(--text-primary); border-radius: 50%; transform: translate(-50%, -50%);}.digital-clock { text-align: center; background: var(--bg-tertiary); padding: var(--spacing-xl); border-radius: var(--radius-xl); box-shadow: 0 10px 30px var(--shadow);}.time { font-size: 48px; font-weight: 300; color: var(--text-primary); margin-bottom: var(--spacing-sm); font-variant-numeric: tabular-nums;}.date { font-size: 18px; color: var(--text-secondary); font-weight: 500;}.clock-controls { display: flex; gap: var(--spacing-xl);}.toggle { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; font-weight: 500;}.toggle input { width: 20px; height: 20px; accent-color: var(--primary);}/* Timer Styles */.timer-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-xl); min-height: 70vh; padding: var(--spacing-xl);}.timer-circle { position: relative; width: min(300px, 80vw); height: min(300px, 80vw); max-width: 300px; max-height: 300px; flex-shrink: 0;}.progress-ring { transform: rotate(-90deg);}.progress-ring-bg { fill: none; stroke: var(--bg-secondary); stroke-width: 8;}.progress-ring-fill { fill: none; stroke: var(--primary); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 879.6; stroke-dashoffset: 879.6; transition: stroke-dashoffset 1s linear;}.timer-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}.timer-time { font-size: 48px; font-weight: 300; color: var(--text-primary); margin-bottom: var(--spacing-sm); font-variant-numeric: tabular-nums;}.timer-label { font-size: 18px; color: var(--text-secondary); font-weight: 500;}.timer-controls { display: flex; gap: var(--spacing-md);}.btn-primary, .btn-secondary, .btn-danger { padding: var(--spacing-md) var(--spacing-xl); border-radius: var(--radius-md); font-weight: 600; cursor: pointer; transition: all 0.2s ease; border: none; font-size: 16px;}.btn-primary { background: var(--primary); color: white;}.btn-primary:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3);}.btn-secondary { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border);}.btn-secondary:hover:not(:disabled) { background: var(--bg-tertiary); transform: translateY(-1px);}.btn-danger { background: var(--danger); color: white;}.btn-danger:hover:not(:disabled) { background: #E6342A; transform: translateY(-1px);}.btn-small { padding: var(--spacing-sm) var(--spacing-md); font-size: 14px; border-radius: var(--radius-sm);}.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; transform: none;}.timer-info { text-align: center; color: var(--text-secondary); font-size: 16px;}/* Auth Gate */.auth-gate { display: flex; align-items: center; justify-content: center; min-height: 60vh;}.gate-content { text-align: center; background: var(--bg-tertiary); padding: var(--spacing-2xl); border-radius: var(--radius-xl); box-shadow: 0 20px 40px var(--shadow); max-width: 400px;}.gate-icon { font-size: 64px; margin-bottom: var(--spacing-lg);}.gate-content h2 { font-size: 28px; font-weight: 600; margin-bottom: var(--spacing-md); color: var(--text-primary);}.gate-content p { color: var(--text-secondary); margin-bottom: var(--spacing-xl); line-height: 1.6;}/* Advanced Timer */.advanced-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xl); flex-wrap: wrap; gap: var(--spacing-lg);}.advanced-header h2 { font-size: 32px; font-weight: 600;}.stats-summary { display: flex; gap: var(--spacing-xl); flex-wrap: wrap;}.stat { text-align: center;}.stat-value { display: block; font-size: 24px; font-weight: 700; color: var(--primary);}.stat-label { font-size: 14px; color: var(--text-secondary);}/* Gamification */.level-system { background: var(--bg-secondary); padding: var(--spacing-lg); border-radius: var(--radius-lg); margin-bottom: var(--spacing-xl);}.level-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md);}.level-badge { background: linear-gradient(135deg, var(--gold), var(--warning)); color: white; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); font-weight: 600; font-size: 14px;}.xp-bar { width: 100%; height: 12px; background: var(--bg-primary); border-radius: 6px; overflow: hidden; margin-bottom: var(--spacing-sm);}.xp-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 0.5s ease;}.achievements { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-top: var(--spacing-md);}.achievement { background: var(--bg-tertiary); border: 2px solid var(--border); border-radius: var(--radius-md); padding: var(--spacing-sm); text-align: center; min-width: 80px; transition: all 0.2s ease;}.achievement.unlocked { border-color: var(--gold); background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 148, 0, 0.1));}.achievement-icon { font-size: 24px; margin-bottom: var(--spacing-xs);}.achievement-name { font-size: 12px; font-weight: 500;}.streak-counter { background: var(--bg-tertiary); padding: var(--spacing-lg); border-radius: var(--radius-lg); text-align: center; margin-bottom: var(--spacing-lg);}.streak-number { font-size: 48px; font-weight: 700; color: var(--warning); margin-bottom: var(--spacing-sm);}.streak-label { color: var(--text-secondary); font-size: 16px;}.custom-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-xl); padding: var(--spacing-xl); background: var(--bg-secondary); border-radius: var(--radius-lg);}.setting-group label { display: block; font-weight: 500; margin-bottom: var(--spacing-sm); color: var(--text-primary);}.setting-group input[type="number"], .setting-group select { width: 100%; padding: var(--spacing-md); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-tertiary); color: var(--text-primary); font-size: 16px;}/* Reading Tracker */.reading-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xl); flex-wrap: wrap; gap: var(--spacing-lg);}.reading-header h2 { font-size: 32px; font-weight: 600;}.reading-stats { display: flex; gap: var(--spacing-lg); flex-wrap: wrap;}.stat-mini { text-align: center; background: var(--bg-secondary); padding: var(--spacing-md); border-radius: var(--radius-md); min-width: 80px;}.stat-mini span { display: block; font-size: 24px; font-weight: 700; color: var(--primary);}.stat-mini label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; font-weight: 500;}.reading-controls { margin-bottom: var(--spacing-xl); display: flex; flex-direction: column; gap: var(--spacing-lg);}.search-box { width: 100%;}.search-input { width: 100%; max-width: 400px; padding: var(--spacing-md); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-tertiary); color: var(--text-primary); font-size: 16px;}.filter-controls { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); align-items: center;}.filter-group, .sort-group { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap;}.filter-group label, .sort-group label { font-weight: 500; color: var(--text-secondary); font-size: 14px;}.filter-btn, .sort-btn { background: var(--bg-secondary); border: 1px solid var(--border); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; font-size: 14px; color: var(--text-primary);}.filter-btn:hover, .sort-btn:hover { background: var(--bg-tertiary);}.filter-btn.active, .sort-btn.active { background: var(--primary); color: white; border-color: var(--primary);}.books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--spacing-xl);}.book-card { background: var(--bg-tertiary); border-radius: var(--radius-lg); padding: var(--spacing-lg); box-shadow: 0 10px 30px var(--shadow); transition: all 0.3s ease; position: relative;}.book-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px var(--shadow-strong);}.book-card.completed { border-left: 4px solid var(--success);}.book-header { display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); position: relative;}.book-cover { width: 60px; height: 80px; background: var(--bg-secondary); border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0;}.book-info { flex: 1; min-width: 0;}.book-info h3 { font-size: 18px; font-weight: 600; margin-bottom: var(--spacing-xs); line-height: 1.3;}.book-author { color: var(--text-secondary); font-size: 14px; margin-bottom: var(--spacing-xs);}.book-genre { color: var(--text-tertiary); font-size: 12px; margin-bottom: var(--spacing-xs);}.book-rating { font-size: 14px;}.favorite-btn { position: absolute; top: 0; right: 0; background: none; border: none; font-size: 20px; cursor: pointer; padding: var(--spacing-xs); border-radius: 50%; transition: all 0.2s ease;}.favorite-btn:hover { background: var(--bg-secondary); transform: scale(1.1);}.book-progress { margin-bottom: var(--spacing-md);}.progress-bar { width: 100%; height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; margin-bottom: var(--spacing-sm);}.progress-fill { height: 100%; background: var(--primary); transition: width 0.3s ease;}.progress-text { font-size: 14px; color: var(--text-secondary);}.book-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; align-items: center;}.page-input { width: 80px; padding: var(--spacing-xs) var(--spacing-sm); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-primary); color: var(--text-primary); font-size: 14px;}.book-notes { margin-top: var(--spacing-md); padding: var(--spacing-md); background: var(--bg-secondary); border-radius: var(--radius-sm); font-style: italic; color: var(--text-secondary); border-left: 3px solid var(--primary); font-size: 14px;}.book-quotes { margin-top: var(--spacing-md);}.quote { padding: var(--spacing-sm); background: var(--bg-secondary); border-radius: var(--radius-sm); font-style: italic; color: var(--text-secondary); margin-bottom: var(--spacing-xs); font-size: 14px; border-left: 2px solid var(--secondary);}.quote-more { font-size: 12px; color: var(--text-tertiary); text-align: center; padding: var(--spacing-xs);}.empty-state { grid-column: 1 / -1; text-align: center; padding: var(--spacing-2xl); color: var(--text-secondary);}.empty-icon { font-size: 64px; margin-bottom: var(--spacing-lg);}.empty-state h3 { font-size: 24px; margin-bottom: var(--spacing-md); color: var(--text-primary);}/* Modal */.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2000; backdrop-filter: blur(4px);}.modal.active { display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg);}.modal-content { background: var(--bg-tertiary); border-radius: var(--radius-xl); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 40px var(--shadow-strong);}.modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-xl); border-bottom: 1px solid var(--border);}.modal-header h3 { font-size: 24px; font-weight: 600;}.modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-secondary); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}.modal-close:hover { background: var(--bg-secondary);}.modal-form { padding: var(--spacing-xl);}.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg);}.form-group { margin-bottom: var(--spacing-lg);}.form-group label { display: block; font-weight: 500; margin-bottom: var(--spacing-sm); color: var(--text-primary);}.form-group input, .form-group select { width: 100%; padding: var(--spacing-md); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-primary); color: var(--text-primary); font-size: 16px; transition: border-color 0.2s ease;}.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary);}.modal-actions { display: flex; gap: var(--spacing-md); justify-content: flex-end; margin-top: var(--spacing-xl);}/* Responsive Design */@media (max-width: 768px) { .mobile-menu-toggle { display: block; }  .nav-menu { position: fixed; top: 64px; left: 0; right: 0; background: var(--bg-tertiary); flex-direction: column; padding: var(--spacing-lg); box-shadow: 0 4px 6px var(--shadow); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999; border-bottom: 1px solid var(--border); }  .nav-menu.active { transform: translateY(0); opacity: 1; visibility: visible; }  .nav-container { padding: 0 var(--spacing-md); }  .container { padding: 0 var(--spacing-md); }  .clock-wrapper { min-height: 60vh; padding: var(--spacing-lg); }  .timer-wrapper { min-height: 60vh; padding: var(--spacing-lg); }  .analog-clock { width: min(250px, 70vw); height: min(250px, 70vw); }  .timer-circle { width: min(250px, 70vw); height: min(250px, 70vw); }  .time, .timer-time { font-size: clamp(24px, 8vw, 36px); }  .timer-controls { flex-direction: column; width: 100%; }  .timer-controls button { width: 100%; }  .custom-settings { grid-template-columns: 1fr; }  .advanced-header { flex-direction: column; gap: var(--spacing-lg); text-align: center; }  .reading-header { flex-direction: column; align-items: stretch; text-align: center; }  .reading-stats { justify-content: center; }  .filter-controls { flex-direction: column; align-items: stretch; }  .filter-group, .sort-group { justify-content: center; }  .books-grid { grid-template-columns: 1fr; }  .book-actions { justify-content: center; }  .form-row { grid-template-columns: 1fr; gap: 0; }  .modal-actions { flex-direction: column; }  .modal-actions button { width: 100%; }  .achievements { justify-content: center; }  .level-system { padding: var(--spacing-md); }}@media (max-width: 480px) { .nav-brand h1 { font-size: 20px; }  .nav-actions { gap: var(--spacing-sm); }  .auth-btn { padding: var(--spacing-sm); font-size: 14px; }  .reading-stats { gap: var(--spacing-sm); }  .stat-mini { min-width: 60px; padding: var(--spacing-sm); }  .stat-mini span { font-size: 18px; }  .book-actions { flex-direction: column; align-items: stretch; }  .book-actions button { width: 100%; }}/* Animations */@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }}@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); }}@keyframes levelUp { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); }}.section.active { animation: fadeIn 0.5s ease-out;}.level-up { animation: levelUp 0.6s ease-in-out;}/* Smooth scrolling */html { scroll-behavior: smooth;}