:root{--theme-primary:#0cb954;--theme-primary-active:#0f9b55;--theme-primary-rgb:13, 148, 136;--bg-toggle-container:#f1f5f9;--bg-surface:#fff;--bg-input:#f8fafc;--text-primary:#0f172a;--text-secondary:#334155;--text-muted:#64748b;--text-on-primary:#fff;--border-color:#cbd5e1;--shadow-light:#0000000d;--shadow-medium:#0003}body{color:var(--text-primary);background-color:var(--bg-surface);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.general-btn{background-color:var(--theme-primary);color:var(--text-on-primary);cursor:pointer;border:none;border-radius:999px;margin-top:12px;padding:16px;font-size:16px;font-weight:700;transition:background-color .2s}.general-btn:active{background-color:var(--theme-primary-active)}.main-content{width:100%;margin:0 auto;padding-bottom:100px}.login-container{max-width:450px;margin:0 auto;padding:24px}.toggle-container{background-color:var(--bg-toggle-container);border-radius:999px;margin-bottom:32px;padding:4px;display:flex}.toggle-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:999px;outline:none;flex:1;padding:14px 24px;font-size:16px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1)}.toggle-btn.active{background-color:var(--bg-surface);color:var(--theme-primary);box-shadow:0 2px 4px var(--shadow-light), 0 1px 2px var(--shadow-medium)}form{flex-direction:column;gap:20px;display:flex}.input-group{flex-direction:column;gap:8px;display:flex}label{color:var(--text-secondary);margin-left:4px;font-size:14px;font-weight:600}input{border:1px solid var(--border-color);background-color:var(--bg-input);color:var(--text-primary);border-radius:16px;outline:none;padding:14px 16px;font-size:16px;transition:all .2s}input[type=text]:focus,input[type=password]:focus{border-color:var(--theme-primary);background-color:var(--bg-surface);box-shadow:0 0 0 4px rgba(var(--theme-primary-rgb), .15)}.navbar-container{background-color:var(--bg-surface);width:calc(100% - 32px);max-width:450px;height:72px;box-shadow:0 10px 30px var(--shadow-medium);z-index:1000;border-radius:24px;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:5px;left:50%;transform:translate(-50%)}.navbar-item{height:100%;color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;transition:all .2s;display:flex}.navbar-item span{font-size:22px;line-height:1}.navbar-item small{font-size:12px;font-weight:600}.navbar-item.active{color:var(--theme-primary)}.navbar-item.active span{transform:translateY(-2px)}.navbar-item svg{width:24px;height:24px}.profile-container{max-width:450px;margin:0 auto;padding:24px}.logout-btn{background-color:#ef4444;margin:20px auto 0;display:block}.household-page{padding:40px 20px}.household-header{text-align:center;flex-direction:column;align-items:center;margin-bottom:50px;display:flex}.household-header h1{letter-spacing:-.03em;max-width:500px;color:var(--text-primary);margin:0;font-size:clamp(28px,5vw,42px);font-weight:700;line-height:1.15}.household-inactive-btn{background-color:#0cb9546e}.household-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:32px;display:grid}.household-card{--local-theme:var(--theme-primary);font:inherit;color:inherit;background-color:var(--bg-surface);border:1px solid var(--border-color);border-left:6px solid var(--local-theme);box-shadow:0 4px 6px -1px var(--shadow-light);border-radius:16px;flex-direction:column;gap:20px;padding:24px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.household-card:hover{box-shadow:0 10px 15px -3px var(--shadow-medium);border-color:var(--local-theme);transform:translateY(-4px)}.household-card-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.household-name{color:var(--text-primary);margin:0;font-size:18px;font-weight:700;line-height:1.2}.member-badge{background-color:var(--bg-toggle-container);color:var(--text-secondary);white-space:nowrap;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.invite-section{background-color:var(--bg-input);border:1px dashed var(--border-color);border-radius:12px;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.invite-label{color:var(--text-muted);font-size:13px;font-weight:600}.invite-code{color:var(--local-theme);letter-spacing:1px;font-family:monospace;font-size:16px;font-weight:700}.member-view-container{max-width:600px;margin:0 auto;padding:24px}.page-title{color:var(--text-primary);margin-top:0;margin-bottom:24px;font-size:24px;font-weight:700}.member-list{flex-direction:column;gap:16px;display:flex}.member-card{background-color:var(--bg-surface);border:1px solid var(--border-color);box-shadow:0 2px 4px var(--shadow-light);border-radius:16px;justify-content:space-between;align-items:center;padding:16px 20px;transition:all .2s;display:flex}.member-card:hover{border-color:var(--theme-primary);box-shadow:0 4px 6px -1px var(--shadow-medium);transform:translateY(-2px)}.member-username{color:var(--text-primary);margin:0;font-size:16px;font-weight:600}.member-score-badge{background-color:var(--bg-toggle-container);border-radius:999px;align-items:center;gap:8px;padding:6px 12px;display:flex}.score-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.score-value{color:var(--theme-primary);font-size:16px;font-weight:700}.history-view-container{max-width:600px;margin:0 auto;padding:10px}.history-header{align-items:center;gap:16px;margin-bottom:24px;display:flex}.history-header .page-title{margin:0}.back-btn{background-color:var(--bg-surface);border:1px solid var(--border-color);cursor:pointer;color:var(--text-primary);border-radius:12px;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.back-btn:hover{background-color:var(--bg-input);border-color:var(--theme-primary);transform:translate(-2px)}.history-task-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;display:grid}.task-card{background-color:var(--bg-surface);border:1px solid var(--border-color);box-shadow:0 4px 6px -1px var(--shadow-light);border-radius:16px;flex-direction:column;gap:2px;padding:15px;transition:all .2s;display:flex}.task-card:hover{border-color:var(--theme-primary);box-shadow:0 10px 15px -3px var(--shadow-medium);transform:translateY(-2px)}.task-card-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.task-title{color:var(--text-primary);margin:0;font-size:20px;font-weight:900;line-height:1.2}.task-category{background-color:var(--bg-toggle-container);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600}.task-description{color:var(--text-muted);margin:0;font-size:14px;line-height:1.5}.task-meta-container{flex-wrap:wrap;gap:12px;display:flex}.task-meta-badge{background-color:var(--bg-input);color:var(--primary-text);border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:600;display:flex}.meta-icon-check{color:var(--theme-primary);margin-top:5px;font-size:16px}.completed-date-text{color:var(--theme-primary);font-weight:900}.task-card-footer{border-top:1px solid var(--border-color);justify-content:space-between;place-items:center;margin-top:4px;padding-top:5px;display:flex}.task-assignee{flex-direction:column;gap:2px;display:flex}.assignee-label{text-transform:uppercase;color:var(--text-muted);font-size:11px;font-weight:600}.assignee-name{color:var(--text-primary);font-size:14px;font-weight:600}.complete-btn{width:auto;padding:8px 16px;font-size:14px}.reject-btn{background-color:#ef4444;width:auto;padding:8px 16px;font-size:14px}.confirm-warning{color:#ef4444;font-size:14px}.task-actions{align-items:center;gap:4px;display:flex}.complete-btn,.delete-btn,.reject-btn{margin:0!important}.delete-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;padding:0;transition:all .2s;display:flex}.delete-btn:hover{color:#ef4444;background-color:#ef44441a}.delete-btn:focus{outline:none;box-shadow:0 0 0 2px #ef444466}.task-page{max-width:900px;margin:0 auto;padding:10px 10px 120px}.task-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:32px;display:flex}.task-header h1{color:var(--text-primary);margin:0;font-size:24px;font-weight:700}.task-inactive-btn{color:var(--text-secondary);border:1px solid var(--border-color);background-color:#0000}.task-inactive-btn:hover{background-color:var(--bg-toggle-container);color:var(--text-primary);box-shadow:none;transform:translateY(-1px)}.input-group select,.input-group textarea{border:1px solid var(--border-color);background-color:var(--bg-input);width:100%;color:var(--text-primary);border-radius:12px;padding:12px 16px;font-family:inherit;font-size:15px;transition:all .2s}.input-group textarea{resize:vertical;box-sizing:border-box;min-height:60px;line-height:1.5}.input-group select:focus,.input-group textarea:focus{border-color:var(--theme-primary);outline:none;box-shadow:0 0 0 3px #0d948826}form{background-color:var(--bg-surface);border:1px solid var(--border-color);box-shadow:0 4px 6px -1px var(--shadow-light);border-radius:16px;margin-bottom:16px;padding:10px;animation:.3s ease-out slideDown}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.task-cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;display:grid}.task-suggestions-container{align-items:center;gap:12px;margin-bottom:24px;animation:.3s ease-out slideDown;display:flex}.suggestions-label{color:var(--text-muted);font-size:14px;font-weight:600}.task-suggestions-list{flex-wrap:wrap;gap:8px;display:flex}.suggestion-chip{background-color:var(--bg-surface);border:1px solid var(--theme-primary);color:var(--text-primary);cursor:pointer;white-space:nowrap;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:500;transition:all .2s}.suggestion-chip:hover{background-color:var(--theme-primary);color:#fff;border-color:var(--theme-primary);transform:translateY(-2px);box-shadow:0 2px 6px #0000001a}.shopping-view-container{max-width:600px;margin:0 auto;padding:24px}.shopping-header{margin-bottom:24px}.shopping-form{background-color:var(--bg-surface);box-shadow:0 2px 8px var(--shadow-light);border:1px solid var(--border-color);border-radius:16px;gap:12px;margin-bottom:32px;padding:16px;display:flex}.shopping-input{border:1px solid var(--border-color);background-color:var(--bg-input);color:var(--text-primary);border-radius:12px;flex:1;padding:12px 16px;font-size:16px;transition:all .2s}.shopping-input:focus{border-color:var(--theme-primary);outline:none;box-shadow:0 0 0 3px #0d948826}.shopping-add-btn{background-color:var(--theme-primary);color:#fff;cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;padding:0 20px;transition:all .2s;display:flex}.shopping-add-btn:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}.shopping-add-btn:disabled{opacity:.6;cursor:not-allowed}.shopping-list{flex-direction:column;gap:12px;display:flex}.shopping-item{background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:12px;align-items:center;gap:16px;padding:5px;transition:all .3s;display:flex}.shopping-item.done{background-color:var(--bg-input);opacity:.7}.shopping-toggle-btn{cursor:pointer;color:var(--text-muted);background:0 0;border:none;justify-content:center;align-items:center;padding:0;transition:color .2s;display:flex}.shopping-toggle-btn:hover .icon-open,.shopping-item.done .icon-done{color:var(--theme-primary)}.shopping-item-content{flex-direction:column;flex:1;gap:4px;display:flex}.shopping-text{color:var(--text-primary);flex:1;margin:0;font-size:16px;font-weight:500;transition:all .3s}.shopping-item.done .shopping-text{color:var(--text-muted);text-decoration:line-through}.shopping-item>div{flex-direction:column;justify-content:center;align-items:flex-end;display:flex}.shopping-meta{color:var(--text-muted);font-size:11px}.shopping-delete-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.shopping-delete-btn:hover{color:#ef4444;background-color:#ef44441a}.empty-state{text-align:center;color:var(--text-muted);padding:32px 0;font-style:italic}.settings-container{max-width:600px;margin:0 auto;padding:24px}.settings-card{background-color:var(--bg-surface);border:1px solid var(--border-color);box-shadow:0 2px 8px var(--shadow-light);border-radius:16px;flex-direction:column;gap:24px;padding:24px;display:flex}.settings-group{flex-direction:column;gap:8px;display:flex}.settings-group label{color:var(--text-primary);font-size:16px;font-weight:600}.settings-hint{color:var(--text-muted);margin:0;font-size:14px}.color-picker-wrapper{align-items:center;gap:16px;margin-top:8px;display:flex}.color-picker{appearance:none;cursor:pointer;background-color:#0000;border:none;width:48px;height:48px;padding:0}.color-picker::-webkit-color-swatch{border:2px solid var(--border-color);border-radius:12px}.color-picker::-moz-color-swatch{border:2px solid var(--border-color);border-radius:12px}.color-hex{color:var(--text-primary);background-color:var(--bg-input);border:1px solid var(--border-color);letter-spacing:1px;border-radius:8px;padding:10px 16px;font-family:monospace;font-size:16px}.save-btn{align-self:flex-start;margin-top:8px}.settings-text-input{border:1px solid var(--border-color);background-color:var(--bg-input);color:var(--text-primary);border-radius:12px;padding:12px 16px;font-size:16px;transition:all .2s}.settings-text-input:focus{border-color:var(--theme-primary);outline:none;box-shadow:0 0 0 3px #0d948826}.settings-divider{border:none;border-top:1px solid var(--border-color);margin:8px 0}.color-hex-input{color:var(--text-primary);background-color:var(--bg-input);border:1px solid var(--border-color);letter-spacing:1px;text-transform:uppercase;border-radius:8px;width:100px;padding:10px 16px;font-family:monospace;font-size:16px;transition:all .2s}.color-hex-input:focus{border-color:var(--theme-primary);outline:none}.header-container{background-color:var(--theme-primary);border-radius:10px;justify-content:center;align-items:center;gap:12px;height:50px;display:flex}.header-logo{flex-shrink:0;width:40px;height:auto}.header-title{color:var(--text-on-primary);margin:0}