:root{--bg: #14171a;--bg-elevated: #1b1f23;--cell-empty: #2a2e35;--mint: #14c38e;--mint-dim: rgba(20, 195, 142, .35);--text: #e8e8ea;--text-dim: #8b8f96;--border: #262a30;--danger: #e8555a;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}.app{min-height:100vh;padding:env(safe-area-inset-top,44px) 16px 32px;max-width:640px;margin:0 auto}.header{padding:8px 0 20px}.header h1{font-family:var(--font-sans);font-weight:700;font-size:20px;margin:0 0 4px;letter-spacing:-.01em}.header .subtitle{color:var(--text-dim);font-size:13px;font-family:var(--font-mono)}.heatmap-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:20px}.heatmap-summary{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}.heatmap-summary .big-number{font-family:var(--font-mono);font-weight:700;font-size:28px;color:var(--mint)}.heatmap-summary .label{color:var(--text-dim);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.heatmap-scroll{overflow-x:auto;padding-bottom:4px}.heatmap-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,12px);gap:3px;width:max-content}.heatmap-cell{width:12px;height:12px;border-radius:3px;background:var(--cell-empty);cursor:pointer;transition:transform .1s ease}.heatmap-cell:active{transform:scale(1.35)}.heatmap-legend{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}.heatmap-legend .swatch{width:10px;height:10px;border-radius:2px}.habit-list{display:flex;flex-direction:column;gap:10px}.habit-row{display:flex;align-items:center;gap:12px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;padding:12px 14px}.habit-toggle{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:2px solid var(--mint);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,transform .1s ease}.habit-toggle:active{transform:scale(.92)}.habit-toggle.done{background:var(--mint)}.habit-toggle svg{width:18px;height:18px}.habit-main{flex:1;min-width:0}.habit-name{font-family:var(--font-sans);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.habit-badges{display:flex;gap:6px;margin-top:4px}.habit-streak{font-family:var(--font-mono);font-weight:700;font-size:22px;color:var(--mint);min-width:48px;text-align:right}.habit-streak .unit{font-size:10px;color:var(--text-dim);font-weight:500;display:block;text-align:right}.archive-btn{background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;padding:4px}.add-form{display:flex;gap:8px;margin:18px 0}.add-form input{flex:1;background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);font-family:var(--font-sans);font-size:14px}.add-form input::placeholder{color:var(--text-dim)}.add-form button{background:var(--mint);color:#0b1210;border:none;border-radius:10px;padding:0 18px;font-weight:700;font-family:var(--font-sans);cursor:pointer}.add-form button:disabled{opacity:.4}.badge{width:16px;height:16px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:flex-end;z-index:20}.modal-sheet{background:var(--bg-elevated);border:1px solid var(--border);border-top-left-radius:20px;border-top-right-radius:20px;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));width:100%;max-height:70vh;overflow-y:auto}.modal-sheet h3{font-family:var(--font-mono);font-size:16px;margin:0 0 14px;color:var(--text)}.modal-entry{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}.modal-entry:last-child{border-bottom:none}.modal-dot{width:9px;height:9px;border-radius:50%;background:var(--cell-empty);flex-shrink:0}.modal-dot.done{background:var(--mint)}.modal-close{margin-top:16px;width:100%;background:transparent;border:1px solid var(--border);color:var(--text-dim);border-radius:10px;padding:10px;font-family:var(--font-sans);cursor:pointer}.empty-state{color:var(--text-dim);font-size:13px;text-align:center;padding:24px 0}