:root{--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-tertiary: #e0e0e0;--text-primary: #1a1a1a;--text-secondary: #4a4a4a;--text-tertiary: #999;--border-color: #e0e0e0;--border-hover: #1a1a1a;--button-bg: #1a1a1a;--button-text: #ffffff;--button-secondary-bg: #f5f5f5;--error-bg: #ffebee;--error-text: #c62828;--success-bg: #e8f5e9;--success-text: #2e7d32;--focus-bg: #f0f7ff;--focus-border: #1a73e8;--delete-color: #d32f2f;--modal-overlay: rgba(0, 0, 0, .5);--graph-bg: #f5f5f5}.dark-mode{--bg-primary: #1a1a1a;--bg-secondary: #2a2a2a;--bg-tertiary: #3a3a3a;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-tertiary: #808080;--border-color: #3a3a3a;--border-hover: #e0e0e0;--button-bg: #e0e0e0;--button-text: #1a1a1a;--button-secondary-bg: #2a2a2a;--error-bg: #4a1a1a;--error-text: #ff6b6b;--success-bg: #1a3a1a;--success-text: #6bff6b;--focus-bg: #1a2a3a;--focus-border: #4a9aff;--delete-color: #ff4a4a;--modal-overlay: rgba(0, 0, 0, .8);--graph-bg: #2a2a2a}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.6;color:var(--text-primary);background:var(--bg-primary);min-height:100vh;padding:2rem;transition:background .3s ease,color .3s ease}.header{max-width:1200px;margin:0 auto 2rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}h1{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--text-primary);white-space:nowrap}.header-nav{display:flex;gap:.25rem;background:var(--bg-secondary);border-radius:8px;padding:.25rem}.nav-link{padding:.4rem .85rem;font-size:.8125rem;font-weight:500;color:var(--text-secondary);text-decoration:none;border-radius:6px;transition:all .15s ease}.nav-link:hover{color:var(--text-primary);background:var(--bg-tertiary)}.nav-link.active{color:var(--text-primary);background:var(--bg-primary);box-shadow:0 1px 3px #00000014}.dark-mode .nav-link.active{box-shadow:0 1px 3px #0000004d}.header-actions{display:flex;gap:.5rem;align-items:center;justify-content:flex-end}.dark-mode-toggle{padding:.4rem;background:none;color:var(--text-secondary);border:1px solid var(--border-color);border-radius:6px;font-size:1rem;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center;width:34px;height:34px}.dark-mode-toggle:hover{color:var(--text-primary);border-color:var(--border-hover)}#graphInterval{padding:.4rem .6rem;background:none;color:var(--text-secondary);border:1px solid var(--border-color);border-radius:6px;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s ease;width:auto}#graphInterval:hover{color:var(--text-primary);border-color:var(--border-hover)}.reconfigure-btn{padding:.4rem .6rem;background:none;color:var(--text-secondary);border:1px solid var(--border-color);border-radius:6px;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s ease}.reconfigure-btn:hover{color:var(--text-primary);border-color:var(--border-hover)}.logout-btn{padding:.4rem .75rem;background:none;color:var(--text-secondary);border:1px solid var(--border-color);border-radius:6px;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s ease}.logout-btn:hover{color:var(--error-text);border-color:var(--error-text)}.container{max-width:1200px;margin:0 auto}.loading{text-align:center;padding:2rem;color:var(--text-secondary)}.xp-display{text-align:center;margin-bottom:3rem}.xp-circle{width:200px;height:200px;border-radius:50%;border:4px solid var(--text-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 1rem}.xp-value{font-size:3rem;font-weight:600;line-height:1;color:var(--text-primary)}.xp-label{font-size:.875rem;color:var(--text-secondary);margin-top:.5rem}.rank-display{text-align:center;font-size:1.25rem;font-weight:600;color:var(--text-secondary);margin-top:.5rem}.section{margin-bottom:2rem;padding:1.5rem;border:2px solid var(--border-color);border-radius:8px;background:var(--bg-primary)}.section h2{font-size:1.5rem;margin-bottom:1rem;color:var(--text-primary)}.metrics-grid{margin-top:1rem}.metric-card{padding:1rem;border:1px solid var(--border-color);border-radius:4px;position:relative;padding-right:140px;background:var(--bg-primary);transition:border-color .2s}.metric-card:hover{border-color:var(--border-hover)}.metric-info{width:100%}.metric-name{font-weight:600;margin-bottom:.25rem;color:var(--text-primary)}.metric-stats{font-size:.875rem;color:var(--text-secondary)}.metric-actions{position:absolute;top:1rem;right:1rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;width:120px}.btn-small{padding:.35rem .5rem;font-size:.7rem;background:none;border:1px solid var(--text-primary);border-radius:2px;cursor:pointer;transition:all .2s;text-align:center;white-space:nowrap;color:var(--text-primary)}.btn-small:hover{background:var(--button-bg);color:var(--button-text)}.btn-delete{border-color:var(--delete-color);color:var(--delete-color)}.btn-delete:hover{background:var(--delete-color);color:#fff}.btn-focus.active{background:var(--button-bg);color:var(--button-text)}.form-group{margin-bottom:1rem}label{display:block;margin-bottom:.5rem;font-weight:500;font-size:.875rem;color:var(--text-secondary)}input,select,textarea{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:4px;font-size:.875rem;font-family:inherit;background:var(--bg-primary);color:var(--text-primary);transition:border-color .2s}textarea{min-height:80px;resize:vertical}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--border-hover)}input::placeholder,textarea::placeholder{color:var(--text-tertiary)}.btn{padding:.5rem 1rem;background:var(--button-bg);color:var(--button-text);border:none;border-radius:4px;font-size:.875rem;font-weight:500;cursor:pointer;transition:opacity .2s}.btn:hover{opacity:.8}.btn:disabled{opacity:.5;cursor:not-allowed}.timeline{margin-top:1rem}.timeline-item{padding:1rem;border-left:3px solid var(--border-color);margin-bottom:1rem;transition:border-color .2s}.timeline-item:hover{border-left-color:var(--border-hover)}.timeline-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}.timeline-metric{font-weight:600;color:var(--text-primary)}.timeline-change{color:var(--text-secondary);font-size:.875rem}.timeline-date{font-size:.75rem;color:var(--text-tertiary)}.timeline-description{color:var(--text-secondary);font-size:.875rem}.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--modal-overlay);align-items:center;justify-content:center;z-index:1000}.modal.show{display:flex}.modal-content{background:var(--bg-primary);padding:2rem;border-radius:8px;max-width:500px;width:90%;border:1px solid var(--border-color)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.modal-header h3{font-size:1.25rem;color:var(--text-primary)}.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary);transition:color .2s}.modal-close:hover{color:var(--text-primary)}.tp-row{border:1px solid var(--border-color);border-radius:6px;padding:.75rem 1rem;background:var(--bg-secondary)}.tp-toggle{display:flex;align-items:center;justify-content:space-between}.tp-label{font-weight:500;font-size:.875rem;color:var(--text-secondary);display:flex;align-items:center;gap:.5rem}.tp-note{font-weight:400;font-size:.75rem;color:var(--text-muted, var(--text-secondary));opacity:.7}.tp-switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}.tp-switch input{opacity:0;width:0;height:0;position:absolute}.tp-slider{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--border-color);border-radius:20px;cursor:pointer;transition:background .2s}.tp-slider:before{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s}.tp-switch input:checked+.tp-slider{background:var(--accent-color, #3b82f6)}.tp-switch input:checked+.tp-slider:before{transform:translate(16px)}.tp-switch--disabled .tp-slider{cursor:not-allowed;opacity:.4}.tp-halflife{display:flex;align-items:center;justify-content:space-between;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border-color)}.tp-halflife label{margin:0;font-size:.8125rem}.tp-halflife-input{width:80px!important;text-align:right}.tp-preview{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border-color);display:flex;flex-direction:column;gap:.25rem}.tp-preview-label{font-size:.75rem;color:var(--text-secondary);font-weight:500}.tp-preview-dates{font-size:.75rem;color:var(--text-secondary);opacity:.8;line-height:1.5;word-break:break-word}.tp-halflife-input::-webkit-inner-spin-button,.tp-halflife-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tp-halflife-input[type=number]{-moz-appearance:textfield}.focus-banner{display:flex;justify-content:space-between;align-items:center;padding:1rem;margin-bottom:1.5rem;background:var(--focus-bg);border:2px solid var(--focus-border);border-radius:8px}.focus-banner-text{font-size:1rem;color:var(--text-primary)}.focus-exit-btn{padding:.5rem 1rem;background:var(--button-bg);color:var(--button-text);border:none;border-radius:4px;font-size:.875rem;font-weight:500;cursor:pointer;transition:opacity .2s}.focus-exit-btn:hover{opacity:.8}details summary{cursor:pointer;font-size:.75rem;color:var(--text-secondary);transition:color .2s}details summary:hover{color:var(--text-primary)}details>div{margin-top:.25rem;padding:.5rem;background:var(--bg-secondary);border-radius:4px;font-family:monospace;font-size:.75rem;color:var(--text-primary)}.modal-large{max-width:900px;width:95%}.graph-modal-container{position:relative;padding:1rem;background:var(--graph-bg);border-radius:4px;min-height:400px;width:100%}.graph-modal-container canvas{display:block;width:100%!important}.graph-loading,.graph-no-data{text-align:center;padding:3rem;color:var(--text-tertiary);font-size:.875rem}.message{padding:.75rem;border-radius:4px;margin-top:1rem;font-size:.875rem;display:none}.message.show{display:block}.message.success{background:var(--success-bg);color:var(--success-text)}.message.error{background:var(--error-bg);color:var(--error-text)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}.login-page h1{margin-bottom:2rem}.login-page button[type=submit]{width:100%;padding:.75rem;background:var(--button-bg);color:var(--button-text);border:none;border-radius:4px;font-size:1rem;font-weight:500;cursor:pointer;transition:opacity .2s}.login-page button[type=submit]:hover{opacity:.8}.login-page button[type=submit]:disabled{opacity:.5;cursor:not-allowed}.login-page input{padding:.75rem;border:2px solid var(--border-color);font-size:1rem}.login-page input:focus{border-color:var(--text-primary)}.error{color:var(--error-text);font-size:.875rem;margin-top:1rem;display:none}.error.show{display:block}.toggle-mode{margin-top:1.5rem;text-align:center}.toggle-mode button{background:none;color:var(--text-secondary);text-decoration:underline;font-size:.875rem;padding:0;border:none;cursor:pointer}.toggle-mode button:hover{color:var(--text-primary);opacity:1}.reconfigure-link{margin-top:1.5rem;text-align:center}.reconfigure-link a{color:var(--text-tertiary);text-decoration:none;font-size:.75rem}.reconfigure-link a:hover{color:var(--text-primary)}.setup-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}.setup-page h1{margin-bottom:1rem}.subtitle{color:var(--text-secondary);margin-bottom:2rem;font-size:.875rem}.setup-page button[type=submit]{width:100%;padding:.75rem;background:var(--button-bg);color:var(--button-text);border:none;border-radius:4px;font-size:1rem;font-weight:500;cursor:pointer;transition:opacity .2s}.setup-page button[type=submit]:hover{opacity:.8}.setup-page button[type=submit]:disabled{opacity:.5;cursor:not-allowed}.steps{margin-bottom:2rem;padding:1rem;background:var(--bg-secondary);border-radius:4px;border-left:3px solid var(--text-primary)}.steps h3{font-size:.875rem;font-weight:600;margin-bottom:.75rem;color:var(--text-primary)}.steps ol{margin-left:1.25rem;font-size:.875rem;color:var(--text-secondary)}.steps ol li{margin-bottom:.5rem}.steps a{color:var(--text-primary);text-decoration:underline}.example{margin-top:2rem;padding:1rem;background:var(--bg-secondary);border-radius:4px;border:1px solid var(--border-color)}.example h3{font-size:.875rem;font-weight:600;margin-bottom:.5rem;color:var(--text-secondary)}.example pre{background:var(--bg-primary);padding:.75rem;border-radius:4px;overflow-x:auto;font-size:.75rem;border:1px solid var(--border-color);color:var(--text-primary)}.example p{margin-top:.5rem;font-size:.75rem;color:var(--text-tertiary);line-height:1.4}@media(max-width:768px){.metrics-grid{grid-template-columns:1fr}.xp-circle{width:150px;height:150px}.xp-value{font-size:2rem}.header{grid-template-columns:1fr;justify-items:center;gap:.75rem}.header-actions{justify-content:center;flex-wrap:wrap}body{padding:1rem}.modal-large{max-width:100%;width:100%;margin:0;border-radius:0;height:100%;max-height:100%}.modal-large .modal-content{height:100%;max-height:100%;border-radius:0;display:flex;flex-direction:column}.graph-modal-container{flex:1;min-height:250px;padding:.5rem;display:flex;align-items:center;justify-content:center}.graph-modal-container canvas{max-width:100%;max-height:100%}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}