:root{--bg-page: #0F172A;--bg-card: #1E293B;--bg-form: #273449;--border: #334155;--text-primary: #F1F5F9;--text-secondary: #94A3B8;--accent: #06B6D4;--accent-dark: #0891B2;--positive: #84CC16;--positive-dark: #65A30D;--edit: #F97316;--edit-dark: #EA580C;--negative: #F43F5E;--negative-dark: #E11D48;--info-bg: #1E293B;--info-text: #06B6D4;--info-border: #0891B2;--success-bg: #1E293B;--success-text: #A3E635;--success-border: #365314;--error-bg: #1E293B;--error-text: #FB7185;--error-border: #9F1239}body{background-color:var(--bg-page);color:var(--text-primary);font-family:Arial,sans-serif;margin:0;padding:0;min-height:100vh}.container{max-width:800px;margin:0 auto;padding:20px}.habit-form,.habit-edit-form,.notification,.habit-list,.user-info-card{margin-bottom:20px}.auth-form{max-width:400px;margin:40px auto;padding:0 10px}.login-header{display:flex;justify-content:center;margin-bottom:20px}.auth-form h2{margin-bottom:16px;text-align:center;color:var(--text-primary)}.form-group{display:flex;flex-direction:column;margin-bottom:14px}.form-group label{font-size:.9em;color:var(--text-secondary);margin-bottom:6px}.form-group input{padding:10px;border:1px solid var(--border);border-radius:8px;background-color:var(--bg-form);color:var(--text-primary)}.form-group input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #06b6d44d}.auth-form button[type=submit]{background-color:var(--accent);color:#fff;border:none;padding:10px 15px;border-radius:8px;cursor:pointer;font-size:1em;font-weight:600;transition:background .2s,transform .1s;width:100%;margin-top:8px}.auth-form button[type=submit]:hover{background-color:var(--accent-dark);transform:scale(1.03)}.link-button{background:none;border:none;color:var(--accent);font-weight:600;cursor:pointer;padding:0;font-size:.9em}.link-button:hover{color:var(--accent-dark);text-decoration:underline}.notification{padding:12px;border-radius:10px;margin-bottom:20px;font-weight:500}.notification.info{background-color:var(--info-bg);color:var(--info-text);border:1px solid var(--info-border)}.notification.success{background-color:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border)}.notification.error{background-color:var(--error-bg);color:var(--error-text);border:1px solid var(--error-border)}.habit-card{background-color:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:18px;margin:14px 0;box-shadow:0 3px 8px #0000004d;transition:transform .15s ease,box-shadow .15s ease}.habit-card:hover{transform:translateY(-3px);box-shadow:0 6px 14px #00000080}.habit-header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:nowrap}.habit-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.habit-info h2{margin:0;font-size:1.25em;color:var(--text-primary);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.habit-tag{font-size:.8em;padding:4px 10px;border-radius:9999px;text-transform:capitalize;font-weight:600;flex-shrink:0}.habit-tag.positive{background-color:#84cc1633;color:var(--positive)}.habit-tag.neutral{background-color:#94a3b833;color:var(--text-secondary)}.habit-tag.negative{background-color:#f43f5e33;color:var(--negative)}.habit-buttons{display:flex;gap:8px;flex-shrink:0}.habit-buttons button{padding:6px 14px;border:none;border-radius:8px;cursor:pointer;font-size:.9em;transition:background .2s,transform .1s}.habit-buttons button:hover{transform:scale(1.05)}.habit-buttons .edit-btn{background-color:var(--edit);color:#fff}.habit-buttons .edit-btn:hover{background-color:var(--edit-dark)}.habit-buttons .delete-btn{background-color:var(--negative);color:#fff}.habit-buttons .delete-btn:hover{background-color:var(--negative-dark)}.habit-buttons.editing .delete-btn{display:none}.habit-form{margin-top:20px;padding:14px;border:1px solid var(--border);border-radius:10px;background-color:var(--bg-form);box-shadow:0 2px 6px #0006}.habit-form input,.habit-form select{margin:5px 0;padding:10px;width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:8px;background-color:var(--bg-card);font-size:14px;color:var(--text-primary)}.habit-form button{background-color:var(--positive);color:#fff;border:none;padding:10px 15px;border-radius:8px;cursor:pointer;margin-top:10px;transition:background .2s,transform .1s}.habit-form button:hover{background-color:var(--positive-dark);transform:scale(1.03)}.form-buttons{display:flex;gap:10px;margin-top:10px}.habit-edit-form{border:1px solid var(--border);padding:14px;border-radius:10px;background-color:var(--bg-form);margin-top:10px;box-shadow:0 2px 6px #0006}.habit-edit-form input,.habit-edit-form select{margin:5px 0;padding:10px;width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:8px;background-color:var(--bg-card);font-size:14px;color:var(--text-primary)}.habit-edit-form button{background-color:var(--edit);color:#fff;border:none;padding:10px 15px;border-radius:8px;cursor:pointer;margin-right:10px;transition:background .2s,transform .1s}.habit-edit-form button:hover{background-color:var(--edit-dark);transform:scale(1.03)}.togglable button,.user-info-card button{background-color:var(--accent);color:#fff;border:none;padding:10px 15px;border-radius:8px;cursor:pointer;transition:background .2s,transform .1s}.togglable button:hover,.user-info-card button:hover{background-color:var(--accent-dark);transform:scale(1.03)}.user-info-card{background-color:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 3px 8px #0000004d;min-width:0}.user-greeting h2{margin:0;font-size:1.3em;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.user-greeting .username{color:var(--accent);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.user-greeting p{margin:4px 0 0;font-size:.9em;color:var(--text-secondary)}.logout-btn{background-color:var(--negative);color:#fff;border:none;padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:6px;transition:background .2s,transform .1s}.logout-btn:hover{background-color:var(--negative-dark);transform:scale(1.05)}.logo{display:flex;align-items:center;gap:10px}.logo-text{font-size:1.4em;font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}@media (max-width: 600px){.container{padding:12px;max-width:100%}.auth-form{margin:20px auto;padding:0 8px;max-width:100%}.form-group input{font-size:16px;padding:12px}.auth-form button[type=submit],.habit-form button,.habit-edit-form button,.togglable button,.user-info-card button{font-size:1em;padding:12px;width:100%}.habit-card{padding:14px;margin:10px 0;box-shadow:none}.habit-header{flex-wrap:wrap}.habit-info h2{font-size:1.2em;font-weight:700}.habit-tag{font-size:.9em;padding:5px 12px}.habit-buttons button{font-size:.8em;padding:6px 10px;border-radius:6px}.user-info-card{flex-direction:column;align-items:flex-start;gap:12px}.logout-btn{align-self:stretch;justify-content:center}.habit-form{padding:12px;border-radius:8px;box-shadow:none;margin-top:16px}.habit-form input,.habit-form select{font-size:16px;padding:12px;margin:8px 0}.habit-form button{width:100%;padding:14px;font-size:1em;margin-top:12px}.form-buttons{flex-direction:column;gap:8px}.form-buttons button{width:100%}}