.app{min-height:100vh;background-color:var(--color-background)}:root{--color-teal-7: #0c4045;--color-teal-6: #2a6469;--color-teal-5: #3f878e;--color-teal-4: #5c9fa6;--color-teal-3: #a3c9d1;--color-teal-2: #d1e4e8;--color-teal-1: #f8fafb;--color-white: #ffffff;--color-black: #0b0602;--color-orange: #ff6011;--color-background: var(--color-teal-1);--color-text-primary: var(--color-teal-7);--color-text-secondary: var(--color-teal-6);--color-text-muted: var(--color-teal-5);--color-border: var(--color-teal-3);--color-border-active: var(--color-teal-4);--font-display: "Sharp Sans Display No1", -apple-system, BlinkMacSystemFont, sans-serif;--font-body: "Graphik", "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;--spacing-xs: 8px;--spacing-sm: 12px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 80px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-card: 4px 8px 30px 0px rgba(12, 64, 69, .1);--shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, .25)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);color:var(--color-text-primary);background-color:var(--color-background);line-height:1.5}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;line-height:1.2;color:var(--color-text-primary)}h1{font-size:64px;letter-spacing:-.02em}h2{font-size:48px}h3{font-size:32px}h4{font-size:21px;line-height:1.3}p{line-height:1.5}a{color:var(--color-teal-5);text-decoration:none}a:hover{text-decoration:underline}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-lg);font-family:var(--font-body);font-size:16px;font-weight:500;line-height:1.5;border:none;cursor:pointer;transition:all .2s ease}.btn--primary{background-color:var(--color-teal-5);color:var(--color-white)}.btn--primary:hover{background-color:var(--color-teal-6)}.btn--secondary{background-color:var(--color-white);color:var(--color-teal-6);border:1px solid var(--color-border)}.btn--secondary:hover{border-color:var(--color-border-active)}.btn--full-width{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed}.form-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-body);font-size:16px;color:var(--color-text-primary);background-color:var(--color-white);border:1px solid var(--color-border);transition:border-color .2s ease}.form-input::placeholder{color:var(--color-text-muted)}.form-input:focus{outline:none;border-color:var(--color-teal-4)}.card{background-color:var(--color-white);box-shadow:var(--shadow-card)}.card--clickable{cursor:pointer;transition:all .2s ease}.card--clickable:hover{transform:translateY(-2px);box-shadow:0 12px 40px #0c404526}.card--active{border:4px solid var(--color-teal-4)}.card--completed{border:1px solid var(--color-teal-3)}.card--completed .card__icon{color:var(--color-teal-5)}.modal-overlay{position:fixed;inset:0;background-color:#0b0602b3;display:flex;align-items:center;justify-content:center;z-index:2000}.modal{background-color:var(--color-white);padding:var(--spacing-2xl);max-width:500px;width:90%;position:relative;box-shadow:var(--shadow-modal)}.modal__close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:24px}.modal__close:hover{color:var(--color-text-primary)}.modal__title{font-size:32px;margin-bottom:var(--spacing-lg);text-align:center}.modal__form{display:flex;flex-direction:column;gap:var(--spacing-md)}.text-center{text-align:center}.text-muted{color:var(--color-text-muted)}.text-secondary{color:var(--color-text-secondary)}.mt-xs{margin-top:var(--spacing-xs)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.mb-xs{margin-bottom:var(--spacing-xs)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:var(--spacing-xl)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-xs{gap:var(--spacing-xs)}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.gap-xl{gap:var(--spacing-xl)}