:root{--bg-primary: #0a0a0f;--bg-card: #1a1a2e;--bg-card-hover: #222240;--text-primary: #e0e0e0;--text-secondary: #888;--border: #2a2a3e;--accent: #4a9eff;--focus: #4a9eff;--exploration: #4aff9e;--restorative: #b44aff;--cooldown: #8a8a8a;--transition: #ffaa4a}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.5}#app{max-width:800px;margin:0 auto;padding:0 16px}#nav-bar{position:sticky;top:0;background:var(--bg-primary);border-bottom:1px solid var(--border);z-index:100;padding:8px 0}.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}.nav-brand{font-size:1.1rem;font-weight:700;color:var(--accent);white-space:nowrap}.nav-links{display:flex;gap:4px}.nav-link{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--text-secondary);padding:6px 12px;border-radius:8px;font-size:.75rem;transition:background .2s,color .2s}.nav-link:hover{background:var(--bg-card);color:var(--text-primary)}.nav-link.active{color:var(--accent);background:var(--bg-card)}.nav-icon{font-size:1.2rem}.nav-label{margin-top:2px}#page-content{padding:20px 0 40px}.loading{text-align:center;color:var(--text-secondary);padding:60px 0}.error-msg{text-align:center;color:#ff6b6b;padding:20px}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px}.card h3{font-size:.85rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat-value{font-size:1.8rem;font-weight:700}.stat-unit{font-size:.85rem;color:var(--text-secondary)}.chart-container{position:relative;height:220px;margin-top:8px}.phase-wheel-svg{width:100%;max-width:300px;display:block;margin:0 auto}.phase-wheel-svg .hour-label{fill:var(--text-secondary);font-size:10px;text-anchor:middle;dominant-baseline:middle}.phase-wheel-svg .phase-label{font-size:18px;font-weight:700;text-anchor:middle}.phase-wheel-svg .omega-label{fill:var(--text-secondary);font-size:12px;text-anchor:middle}.phase-wheel-svg .theta-label{fill:var(--text-secondary);font-size:11px;text-anchor:middle}.phase-wheel-empty{text-align:center;color:var(--text-secondary);padding:40px}.page-title{font-size:1.3rem;font-weight:700;margin-bottom:16px}.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:200}.modal.hidden{display:none}.modal-content{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:24px;width:90%;max-width:400px}.modal-content h2{margin-bottom:16px}.modal-content label{display:block;margin-bottom:12px;font-size:.85rem;color:var(--text-secondary)}.modal-content input{display:block;width:100%;margin-top:4px;padding:8px 12px;background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:.9rem}.modal-content button{display:block;width:100%;padding:10px;margin-top:16px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer}.modal-content button:hover{opacity:.9}@media(max-width:768px){.card-grid{grid-template-columns:1fr}.nav-label{display:none}.nav-link{padding:8px}.nav-icon{font-size:1.4rem}}