body{margin:0}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d0d0f;--bg2:#13131a;--bg3:#1a1a24;--border:#2a2a3a;--text:#e0e0f0;--text2:#7070a0;--neon-green:#39ff14;--neon-cyan:#0ff;--neon-pink:#f0f;--font-pixel:"Courier New", Courier, monospace}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-pixel);letter-spacing:.03em;-webkit-font-smoothing:antialiased;font-size:13px}.app{flex-direction:column;max-width:1200px;min-height:100dvh;margin:0 auto;padding-bottom:2rem;display:flex}.desktop-layout{flex:1;align-items:flex-start;gap:1.5rem;padding:1.5rem;display:flex}.panel{flex-direction:column;gap:.75rem;display:flex}.panel-today{flex-shrink:0;width:380px}.panel-week{flex:1;min-width:0}.panel-divider{background:var(--border);flex-shrink:0;align-self:stretch;width:1px}.panel-header{border-bottom:1px solid var(--border);margin-bottom:.25rem;padding-bottom:.75rem}.panel-title{letter-spacing:.12em;color:var(--text2);font-size:.65rem}.mobile-layout{flex:1;padding:1rem 1rem 0}.mobile-layout .panel{flex:1}.app-header{border-bottom:1px solid var(--border);background:var(--bg2);padding:1.5rem 1.25rem 1rem}.header-top{justify-content:space-between;align-items:center;margin-bottom:.25rem;display:flex}.app-title{text-transform:uppercase;letter-spacing:.1em;color:var(--text);font-size:1.4rem;font-weight:700}.app-title .accent{color:var(--neon-green);animation:1s step-end infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.header-right{align-items:center;gap:.75rem;display:flex}.locale-toggle{border:1px solid var(--border);color:var(--text2);font-family:var(--font-pixel);letter-spacing:.1em;cursor:pointer;background:0 0;padding:.25rem .5rem;font-size:.6rem;transition:border-color .15s,color .15s}.locale-toggle:hover{border-color:var(--neon-cyan);color:var(--neon-cyan)}.progress-label{color:var(--neon-green);font-size:1rem;font-weight:700}.date-label{color:var(--text2);margin-bottom:.75rem;font-size:.7rem}.progress-bar{background:var(--border);border-radius:2px;height:3px;overflow:hidden}.progress-fill{background:var(--neon-green);height:100%;box-shadow:0 0 8px var(--neon-green);transition:width .4s}.tab-nav{border-bottom:1px solid var(--border);background:var(--bg2);display:flex}.tab-nav button{color:var(--text2);font-family:var(--font-pixel);letter-spacing:.08em;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:.75rem;font-size:.7rem;transition:color .15s,border-color .15s}.tab-nav button:hover{color:var(--text)}.tab-nav button.active{color:var(--neon-green);border-bottom-color:var(--neon-green);text-shadow:0 0 8px var(--neon-green)}.habits-list{flex-direction:column;gap:.5rem;display:flex}.habit-card{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--accent,var(--neon-green));align-items:center;gap:.75rem;padding:.75rem;transition:background .15s,box-shadow .2s;display:flex}.habit-card.done{background:color-mix(in srgb, var(--accent) 8%, var(--bg2));box-shadow:inset 0 0 20px color-mix(in srgb, var(--accent) 5%, transparent)}.habit-card.editing{flex-direction:column;align-items:stretch;padding:1rem}.check-btn{border:2px solid var(--accent,var(--neon-green));cursor:pointer;background:0 0;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;transition:background .15s,box-shadow .15s;display:flex}.check-btn:hover{box-shadow:0 0 8px var(--accent,var(--neon-green))}.check-icon{color:var(--accent,var(--neon-green));font-size:1rem;font-weight:700;line-height:1}.habit-info{flex:1;align-items:center;gap:.5rem;min-width:0;display:flex}.habit-icon{flex-shrink:0;font-size:1.2rem}.habit-meta{flex-direction:column;min-width:0;display:flex}.habit-name{white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;font-weight:700;overflow:hidden}.habit-card.done .habit-name{color:var(--accent,var(--neon-green));text-shadow:0 0 6px var(--accent,var(--neon-green))}.habit-freq{color:var(--text2);text-transform:uppercase;font-size:.6rem}.streak-badge{color:#ff6b00;white-space:nowrap;font-size:.75rem}.habit-actions{gap:.25rem;display:flex}.action-btn{cursor:pointer;opacity:.4;background:0 0;border:none;padding:.2rem;font-size:.9rem;transition:opacity .15s}.action-btn:hover{opacity:1}.action-btn.danger{color:#ff2d55;opacity:.8}.empty-state{text-align:center;color:var(--text2);padding:2.5rem 1rem;line-height:2}.empty-hint{color:var(--neon-green);opacity:.7;font-size:.75rem}.btn-add{border:1px dashed var(--border);width:100%;color:var(--text2);font-family:var(--font-pixel);letter-spacing:.1em;cursor:pointer;background:0 0;margin-top:.25rem;padding:.8rem;font-size:.75rem;transition:border-color .15s,color .15s,box-shadow .15s}.btn-add:hover{border-color:var(--neon-green);color:var(--neon-green);box-shadow:0 0 12px color-mix(in srgb, var(--neon-green) 20%, transparent)}.form-container{background:var(--bg2);border:1px solid var(--border);padding:1.25rem}.form-title{letter-spacing:.12em;color:var(--neon-cyan);margin-bottom:1.25rem;font-size:.8rem}.habit-form{flex-direction:column;gap:1rem;display:flex}.form-group{flex-direction:column;gap:.4rem;display:flex}.form-group label{letter-spacing:.12em;color:var(--text2);font-size:.6rem}.form-group input{background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--font-pixel);outline:none;padding:.6rem .75rem;font-size:.85rem;transition:border-color .15s}.form-group input:focus{border-color:var(--neon-cyan);box-shadow:0 0 8px color-mix(in srgb, var(--neon-cyan) 20%, transparent)}.toggle-group{gap:.5rem;display:flex}.toggle-group button{background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-family:var(--font-pixel);letter-spacing:.08em;cursor:pointer;flex:1;padding:.5rem;font-size:.65rem;transition:all .15s}.toggle-group button.active{border-color:var(--neon-cyan);color:var(--neon-cyan);background:color-mix(in srgb, var(--neon-cyan) 10%, var(--bg3))}.icon-grid{flex-wrap:wrap;gap:.4rem;display:flex}.icon-btn{background:var(--bg3);border:1px solid var(--border);cursor:pointer;width:36px;height:36px;font-size:1rem;transition:all .15s}.icon-btn.active{border-color:var(--neon-cyan);box-shadow:0 0 8px color-mix(in srgb, var(--neon-cyan) 30%, transparent);transform:scale(1.1)}.color-grid{flex-wrap:wrap;gap:.5rem;display:flex}.color-btn{background:var(--c);cursor:pointer;width:28px;height:28px;box-shadow:0 0 6px var(--c);border:2px solid #0000;transition:transform .15s,border-color .15s}.color-btn.active{border-color:#fff;transform:scale(1.2)}.form-actions{gap:.5rem;padding-top:.25rem;display:flex}.btn-primary,.btn-secondary{font-family:var(--font-pixel);letter-spacing:.1em;cursor:pointer;border:1px solid;flex:1;padding:.7rem;font-size:.7rem;transition:all .15s}.btn-primary{background:color-mix(in srgb, var(--neon-green) 15%, transparent);border-color:var(--neon-green);color:var(--neon-green)}.btn-primary:hover{background:color-mix(in srgb, var(--neon-green) 25%, transparent);box-shadow:0 0 12px color-mix(in srgb, var(--neon-green) 40%, transparent)}.btn-secondary{border-color:var(--border);color:var(--text2);background:0 0}.btn-secondary:hover{border-color:var(--text2);color:var(--text)}.week-view{flex-direction:column;gap:.25rem;display:flex}.week-header{border-bottom:1px solid var(--border);grid-template-columns:1fr repeat(7,36px);gap:.25rem;margin-bottom:.25rem;padding:.25rem 0 .5rem;display:grid}.week-habit-col{align-items:center;gap:.4rem;min-width:0;display:flex;overflow:hidden}.week-day-label{color:var(--text2);flex-direction:column;align-items:center;gap:2px;font-size:.6rem;display:flex}.week-day-label.today{color:var(--neon-cyan)}.week-day-num{font-size:.65rem;font-weight:700}.week-row{border-bottom:1px solid var(--border);grid-template-columns:1fr repeat(7,36px);align-items:center;gap:.25rem;padding:.4rem 0;display:grid}.week-habit-name{white-space:nowrap;text-overflow:ellipsis;font-size:.7rem;overflow:hidden}.week-cell{border:1px solid var(--border);width:36px;height:36px;color:var(--text2);cursor:pointer;background:0 0;justify-content:center;align-items:center;font-size:.9rem;transition:all .15s;display:flex}.week-cell:disabled{opacity:.3;cursor:default}.week-cell.done{color:var(--accent,var(--neon-green));border-color:var(--accent,var(--neon-green));background:color-mix(in srgb, var(--accent,var(--neon-green)) 10%, transparent);box-shadow:0 0 6px color-mix(in srgb, var(--accent,var(--neon-green)) 30%, transparent)}.week-cell.today:not(:disabled){border-color:var(--neon-cyan)}