@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap");:root{--bg:#0d1117;--bg-card:#161b22;--bg-card-hover:#1c2129;--border:#30363d;--border-muted:#21262d;--text:#e6edf3;--text-muted:#7d8590;--text-dim:#484f58;--accent:#238636;--accent-hover:#2ea043;--accent-muted:rgba(35,134,54,0.15);--danger:#da3633;--grid-empty:#161b22;--grid-border:#21262d;--radius:8px;--radius-lg:12px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:14px}body{background:var(--bg);color:var(--text);font-family:Inter,-apple-system,sans-serif;min-height:100vh;line-height:1.5}.page{max-width:960px;margin:0 auto;padding:0 24px 80px}.page-header{display:flex;align-items:center;justify-content:space-between;padding:28px 0 32px;border-bottom:1px solid var(--border-muted);margin-bottom:32px}.header-left{display:flex;flex-direction:column;gap:4px}.logo{display:flex;align-items:center;gap:10px}.logo-text{font-family:JetBrains Mono,monospace;font-size:18px;font-weight:600;color:var(--text);letter-spacing:-.5px}.header-date{font-size:12px;color:var(--text-muted);margin-left:38px}.section{margin-bottom:40px}.section-header{justify-content:space-between;flex-wrap:wrap;gap:12px}.section-header,.section-title{display:flex;align-items:center;margin-bottom:16px}.section-title{font-size:14px;font-weight:600;color:var(--text);gap:10px}.section-subtitle{font-size:12px;font-weight:400;color:var(--text-muted)}.overview-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px}.grid-wrapper{display:flex;flex-direction:column;gap:8px}.grid-stats{display:flex;gap:8px;margin-bottom:4px}.stat-pill{background:var(--bg);border:1px solid var(--border-muted);border-radius:20px;padding:2px 10px;font-size:11px;color:var(--text-muted);font-family:JetBrains Mono,monospace}.grid-scroll{overflow-x:auto;padding-bottom:4px}.grid-legend{display:flex;align-items:center;gap:4px;margin-top:2px}.habits-list{display:flex;flex-direction:column;gap:16px}.habit-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;transition:border-color .15s,background .15s}.habit-card:hover{border-color:#444c56;background:var(--bg-card-hover)}.habit-header{justify-content:space-between;margin-bottom:16px;flex-wrap:wrap}.habit-header,.habit-title-row{display:flex;align-items:center;gap:10px}.habit-title-row{flex:1 1;min-width:0}.habit-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.habit-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.habit-actions{display:flex;align-items:center;gap:8px}.btn-today{font-size:12px;font-weight:500;padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s}.btn-today:hover{border-color:var(--accent-hover)}.btn-today.logged,.btn-today:hover{color:var(--accent-hover);background:var(--accent-muted)}.btn-today.logged{border-color:var(--accent)}.btn-icon{font-size:13px;width:28px;height:28px;border-radius:6px;border:1px solid var(--border-muted);background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.btn-icon:hover{background:var(--bg);color:var(--text);border-color:var(--border)}.btn-icon.btn-danger{color:var(--danger);border-color:var(--danger)}.btn-primary{font-size:13px;font-weight:500;padding:7px 16px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;transition:background .15s}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{font-size:13px;font-weight:500;padding:7px 16px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s}.btn-ghost:hover{background:var(--bg);color:var(--text)}.btn-sm{padding:4px 10px;font-size:12px}.btn-add-habit{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:6px 14px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;transition:background .15s}.btn-add-habit:hover{background:var(--accent-hover)}.btn-add-habit span{font-size:16px;line-height:1}.add-habit-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:16px}.add-habit-title{font-size:13px;font-weight:600;color:var(--text)}.add-habit-title,.form-row{margin-bottom:14px}.form-input{width:100%;padding:8px 12px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;font-family:inherit;outline:none;transition:border-color .15s}.form-input:focus{border-color:var(--accent)}.form-input::placeholder{color:var(--text-dim)}.color-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}.color-label{font-size:12px;color:var(--text-muted);flex-shrink:0}.color-presets{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.color-swatch{width:20px;height:20px;border-radius:4px;border:2px solid transparent;cursor:pointer;transition:transform .1s}.color-swatch:hover{transform:scale(1.15)}.color-swatch.selected{border-color:var(--text)}.color-picker{width:28px;height:24px;border:1px solid var(--border);border-radius:4px;background:var(--bg);padding:1px;cursor:pointer}.form-error{font-size:12px;color:var(--danger);margin-bottom:10px}.edit-row,.form-actions{display:flex;gap:8px}.edit-row{align-items:center;flex:1 1}.edit-input{flex:1 1;padding:4px 8px;background:var(--bg);border:1px solid var(--accent);border-radius:5px;color:var(--text);font-size:13px;font-family:inherit;outline:none}.loading-state{display:flex;flex-direction:column;align-items:center;gap:16px;padding:80px 0;color:var(--text-muted)}.spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.error-banner{display:flex;align-items:flex-start;gap:10px;background:rgba(218,54,51,.1);border:1px solid rgba(218,54,51,.3);border-radius:var(--radius);padding:16px;color:#f85149;font-size:13px}.empty-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 24px;background:var(--bg-card);border:1px dashed var(--border);border-radius:var(--radius-lg);text-align:center;position:relative;overflow:hidden}.empty-grid-preview{position:absolute;inset:0;display:grid;grid-template-columns:repeat(52,1fr);grid-template-rows:repeat(7,1fr);grid-gap:2px;gap:2px;padding:8px;pointer-events:none}.empty-cell{background:#39d353;border-radius:2px}.empty-state h3{font-size:15px;font-weight:600;color:var(--text);position:relative;z-index:1;margin-top:80px}.empty-state p{font-size:13px;color:var(--text-muted);max-width:340px;position:relative;z-index:1}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#444c56}@media (max-width:600px){.page{padding:0 16px 60px}.habit-header,.section-header{flex-direction:column;align-items:flex-start}}