:root{--color-background: #f5f5f5;--color-surface: #ffffff;--color-surface-hover: #fafafa;--color-text-primary: #1a1a1a;--color-text-secondary: #666666;--color-text-tertiary: #999999;--color-border: #e0e0e0;--color-border-hover: #d0d0d0;--color-primary: #1976d2;--color-primary-hover: #1565c0;--color-primary-light: #e3f2fd;--color-success: #2e7d32;--color-success-bg: #e8f5e9;--color-success-border: #c8e6c9;--color-error: #d32f2f;--color-error-bg: #ffebee;--color-error-border: #ffcdd2;--color-warning: #e65100;--color-warning-bg: #fff3e0;--color-button-primary-text: #ffffff;--color-button-secondary-bg: #f5f5f5;--color-button-secondary-hover: #e0e0e0;--color-button-secondary-text: #333333;--color-button-secondary-border: #cccccc;--color-disabled-bg: #f5f5f5;--color-disabled-text: #999999;--color-focus: #0066cc;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .15);--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-size-xs: .8125rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.1rem;--font-size-xl: 1.2rem;--font-size-2xl: 1.25rem;--font-size-3xl: 1.5rem;--font-size-4xl: 2.5rem;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: .75rem;--spacing-lg: 1rem;--spacing-xl: 1.25rem;--spacing-2xl: 1.5rem;--spacing-3xl: 2rem;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-full: 16px;--transition-fast: .1s ease;--transition-base: .2s ease;--z-index-base: 1;--z-index-indicator: 999;--z-index-modal: 1000}@media(prefers-color-scheme:dark){:root{--color-background: #121212;--color-surface: #1e1e1e;--color-surface-hover: #2a2a2a;--color-text-primary: #e0e0e0;--color-text-secondary: #b0b0b0;--color-text-tertiary: #808080;--color-border: #333333;--color-border-hover: #404040;--color-primary: #42a5f5;--color-primary-hover: #64b5f6;--color-primary-light: #1e3a5f;--color-success: #66bb6a;--color-success-bg: #1b5e20;--color-success-border: #2e7d32;--color-error: #ef5350;--color-error-bg: #b71c1c;--color-error-border: #c62828;--color-warning: #ff9800;--color-warning-bg: #e65100;--color-button-primary-text: #ffffff;--color-button-secondary-bg: #2a2a2a;--color-button-secondary-hover: #333333;--color-button-secondary-text: #e0e0e0;--color-button-secondary-border: #404040;--color-disabled-bg: #2a2a2a;--color-disabled-text: #666666;--color-focus: #42a5f5;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 8px rgba(0, 0, 0, .4)}}*{margin:0;padding:0;box-sizing:border-box}*:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}body{font-family:var(--font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-background);color:var(--color-text-primary)}#root{width:100%;min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.app-header{width:100%;padding:var(--spacing-lg);padding-top:calc(var(--spacing-lg) + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;text-align:center}.app-header__content{max-width:1200px;width:100%;text-align:center}.app-header h1{margin:0 0 var(--spacing-lg) 0;font-size:var(--font-size-4xl);color:var(--color-text-primary);font-weight:600}.app-header p{margin:0;font-size:var(--font-size-xl);color:var(--color-text-secondary)}.app-main{width:100%;display:flex;flex-direction:column;align-items:center;padding:0 var(--spacing-lg);max-width:1200px}.app-header .error{color:var(--color-error);padding:var(--spacing-lg);background-color:var(--color-error-bg);border:1px solid var(--color-error-border);border-radius:var(--radius-sm);margin-top:var(--spacing-lg)}@media(min-width:768px){.app-main{padding:0 var(--spacing-3xl)}}.habit-form{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-2xl);margin:var(--spacing-3xl) 0;width:100%;max-width:800px;box-shadow:var(--shadow-sm);position:relative;z-index:var(--z-index-base)}.habit-form-title{margin:0 0 var(--spacing-lg) 0;font-size:var(--font-size-2xl);font-weight:600;color:var(--color-text-primary)}.habit-form-field{margin-bottom:var(--spacing-lg)}.habit-form-label{display:block;margin-bottom:var(--spacing-sm);font-size:var(--font-size-base);font-weight:500;color:var(--color-text-primary)}.habit-form-label .required{color:var(--color-error)}.habit-form-input,.habit-form-textarea{width:100%;padding:var(--spacing-md);font-size:var(--font-size-base);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:inherit;background-color:var(--color-surface);color:var(--color-text-primary);caret-color:var(--color-text-primary);cursor:text;transition:border-color var(--transition-base)}.habit-form-input:focus,.habit-form-textarea:focus{outline:2px solid var(--color-focus);outline-offset:2px;border-color:var(--color-focus)}.habit-form-input.error{border-color:var(--color-error)}.habit-form-input:disabled,.habit-form-textarea:disabled{background-color:var(--color-disabled-bg);color:var(--color-disabled-text);cursor:not-allowed}.habit-form-textarea{resize:none;min-height:2.5rem;max-height:200px;overflow-y:hidden;line-height:1.5;overflow-x:hidden}.habit-form-error{display:block;margin-top:var(--spacing-sm);color:var(--color-error);font-size:var(--font-size-sm)}.habit-form-message{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-sm);margin-bottom:var(--spacing-lg);font-size:var(--font-size-base)}.habit-form-error-message{background-color:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error-border)}.habit-form-success-message{background-color:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success-border)}.habit-form-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-xl);align-items:center}.habit-form-button{padding:var(--spacing-sm) var(--spacing-xl);font-size:var(--font-size-base);font-weight:500;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-base),transform var(--transition-fast);white-space:nowrap}.habit-form-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.habit-form-button:not(:disabled):hover{transform:translateY(-1px)}.habit-form-button:not(:disabled):active{transform:translateY(0)}.habit-form-button-primary{background-color:var(--color-primary);color:var(--color-button-primary-text)}.habit-form-button-primary:not(:disabled):hover{background-color:var(--color-primary-hover)}.habit-form-button-secondary{background-color:var(--color-button-secondary-bg);color:var(--color-button-secondary-text);border:1px solid var(--color-button-secondary-border)}.habit-form-button-secondary:not(:disabled):hover{background-color:var(--color-button-secondary-hover)}@media(max-width:600px){.habit-form{padding:var(--spacing-lg);margin:var(--spacing-lg) 0}.habit-form-title{font-size:var(--font-size-xl)}.habit-form-actions{flex-direction:column;align-items:stretch}.habit-form-button{width:100%}}.annual-calendar{width:100%;margin:var(--spacing-lg) 0;padding:0;overflow:hidden}@media(min-width:1200px){.annual-calendar{max-width:800px;margin-left:auto;margin-right:auto}}.annual-calendar-grid{display:flex;flex-direction:column;gap:3px;width:100%;max-width:100%;align-items:flex-start}.annual-calendar-day-row{display:flex;gap:3px;width:100%;flex-wrap:nowrap;align-items:flex-start}.annual-calendar-day{flex:0 0 calc((100% - (52 * 3px)) / 53);max-width:11px;height:11px;border-radius:2px;background-color:#ebedf0;border:1px solid rgba(27,31,35,.06);cursor:pointer;transition:all .15s ease;aspect-ratio:1;flex-shrink:0}.annual-calendar-day:hover{border-color:#1b1f2333;transform:scale(1.1)}.annual-calendar-day.completed{background-color:#40c463;border-color:transparent}.annual-calendar-day.today{border:2px solid #0969da;box-sizing:border-box;position:relative}.annual-calendar-day.today.completed{background-color:#40c463;border-color:#0969da}.annual-calendar-day.other-year{opacity:.2}@media(prefers-color-scheme:dark){.annual-calendar-day{background-color:#21262d;border-color:#f0f6fc1a}.annual-calendar-day.completed{background-color:#26a641;border-color:transparent}.annual-calendar-day.completed:hover{background-color:#39d353}.annual-calendar-day.today{border-color:#58a6ff}.annual-calendar-day.today.completed{background-color:#26a641;border-color:#58a6ff}}@media(max-width:1200px){.annual-calendar-day{max-width:10px;height:10px;flex:0 0 calc((100% - (52 * 3px)) / 53)}}@media(max-width:900px){.annual-calendar{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;overflow-y:hidden}.annual-calendar-day-row{min-width:max-content}.annual-calendar-day{max-width:9px;height:9px;flex:0 0 9px;min-width:9px}.annual-calendar-grid,.annual-calendar-day-row{gap:2px}}@media(max-width:600px){.annual-calendar-day{max-width:8px;height:8px;flex:0 0 8px;min-width:8px}.annual-calendar-grid,.annual-calendar-day-row{gap:2px}}@media(max-width:400px){.annual-calendar-day{max-width:7px;height:7px;flex:0 0 7px;min-width:7px}.annual-calendar-grid,.annual-calendar-day-row{gap:1px}}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:var(--z-index-modal);padding:var(--spacing-lg)}.modal{background-color:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-2xl);max-width:500px;width:100%;box-shadow:var(--shadow-md);position:relative;animation:modalFadeIn var(--transition-base)}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-title{margin:0 0 var(--spacing-lg) 0;font-size:var(--font-size-2xl);font-weight:600;color:var(--color-text-primary)}.modal-content{color:var(--color-text-primary)}@media(max-width:600px){.modal{padding:var(--spacing-xl);margin:var(--spacing-lg)}}.confirmation-modal-message{margin:0 0 var(--spacing-2xl) 0;font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:1.5}.confirmation-modal-actions{display:flex;gap:var(--spacing-md);justify-content:flex-end}.confirmation-modal-button{padding:var(--spacing-sm) var(--spacing-xl);font-size:var(--font-size-base);font-weight:500;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base);white-space:nowrap}.confirmation-modal-button:disabled{opacity:.6;cursor:not-allowed}.confirmation-modal-button-primary{background-color:var(--color-primary);color:var(--color-button-primary-text);border-color:var(--color-primary)}.confirmation-modal-button-primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.confirmation-modal-button-alert{background-color:var(--color-error);color:var(--color-button-primary-text);border-color:var(--color-error)}.confirmation-modal-button-alert:hover:not(:disabled){background-color:var(--color-error-bg)}.confirmation-modal-button-warning{background-color:var(--color-warning);color:var(--color-button-primary-text);border-color:var(--color-warning)}.confirmation-modal-button-warning:hover:not(:disabled){background-color:var(--color-warning-bg)}.confirmation-modal-button-success{background-color:var(--color-success);color:var(--color-button-primary-text);border-color:var(--color-success)}.confirmation-modal-button-success:hover:not(:disabled){background-color:var(--color-success-bg)}.confirmation-modal-button-secondary{background-color:var(--color-button-secondary-bg);color:var(--color-button-secondary-text);border-color:var(--color-button-secondary-border)}.confirmation-modal-button-secondary:hover:not(:disabled){background-color:var(--color-button-secondary-hover)}@media(max-width:600px){.confirmation-modal-actions{flex-direction:column-reverse}.confirmation-modal-button{width:100%}}.habit-list{list-style:none;padding:0;margin:var(--spacing-3xl) 0;width:100%;max-width:800px}.habit-list>.empty-state{text-align:center;padding:var(--spacing-3xl);color:var(--color-text-secondary);font-size:var(--font-size-lg)}.habit-list>.error{color:var(--color-error);padding:var(--spacing-lg);background-color:var(--color-error-bg);border-radius:var(--radius-sm);margin:var(--spacing-lg) 0}.habit-item{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-2xl);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-base),border-color var(--transition-base)}.habit-item:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-hover)}.habit-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-md);flex-wrap:wrap;gap:var(--spacing-sm)}.habit-name{margin:0;font-size:var(--font-size-3xl);font-weight:600;color:var(--color-text-primary);flex:1;min-width:200px}.habit-status{display:flex;align-items:center;gap:var(--spacing-md)}.completion-badge{padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:500;white-space:nowrap}.completion-badge.completed{background-color:var(--color-success-bg);color:var(--color-success)}.completion-badge.not-completed{background-color:var(--color-warning-bg);color:var(--color-warning)}.completion-toggle{padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;border:none;transition:background-color var(--transition-base),color var(--transition-base);white-space:nowrap}.completion-toggle.completed{background-color:var(--color-primary);color:var(--color-button-primary-text)}.completion-toggle.completed:hover{background-color:var(--color-primary-hover)}.completion-toggle.not-completed{background-color:var(--color-text-primary);color:var(--color-surface)}.completion-toggle.not-completed:hover{background-color:var(--color-text-secondary)}.completion-toggle:disabled{opacity:.6;cursor:not-allowed}.habit-description{margin:var(--spacing-sm) 0;color:var(--color-text-secondary);font-size:var(--font-size-base);line-height:1.5}.habit-stats{margin-top:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border)}.streak{font-size:var(--font-size-base);font-weight:500;color:var(--color-primary)}.habit-edit-button{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-sm);font-weight:500;color:var(--color-primary);background-color:transparent;border:1px solid var(--color-primary);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-base),color var(--transition-base);white-space:nowrap}.habit-edit-button:hover{background-color:var(--color-primary);color:var(--color-button-primary-text)}.habit-delete-button{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-sm);font-weight:500;color:var(--color-error);background-color:transparent;border:1px solid var(--color-error);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-base),color var(--transition-base);white-space:nowrap}.habit-delete-button:hover:not(:disabled){background-color:var(--color-error);color:var(--color-button-primary-text)}.habit-delete-button:disabled{opacity:.6;cursor:not-allowed}@media(max-width:600px){.habit-list{margin:var(--spacing-lg) 0}.habit-item{padding:var(--spacing-lg)}.habit-header{flex-direction:column;align-items:flex-start}.habit-name{font-size:var(--font-size-2xl);min-width:unset}.completion-badge{font-size:var(--font-size-xs);padding:var(--spacing-xs) var(--spacing-sm)}.completion-toggle{font-size:var(--font-size-sm);padding:var(--spacing-xs) var(--spacing-md)}}.offline-indicator{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-error);color:var(--color-button-primary-text);border:1px solid var(--color-error-border);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:600;position:fixed;top:calc(var(--spacing-md) + env(safe-area-inset-top));right:calc(var(--spacing-md) + env(safe-area-inset-right));z-index:var(--z-index-indicator);box-shadow:var(--shadow-md);transition:opacity var(--transition-base),transform var(--transition-base);animation:slideDown var(--transition-base) ease-out}.offline-indicator__icon{width:1.125rem;height:1.125rem;flex-shrink:0;color:var(--color-button-primary-text);stroke-width:2.5}.offline-indicator__badge{white-space:nowrap}@keyframes slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.offline-indicator{font-size:var(--font-size-xs);padding:var(--spacing-xs) var(--spacing-sm);top:calc(var(--spacing-sm) + env(safe-area-inset-top));right:calc(var(--spacing-sm) + env(safe-area-inset-right))}.offline-indicator__icon{width:1rem;height:1rem}}.install-prompt{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background-color:var(--color-primary);color:var(--color-button-primary-text);border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);font-weight:500;font-family:var(--font-family);transition:background-color var(--transition-base),box-shadow var(--transition-base);box-shadow:var(--shadow-sm);margin-top:var(--spacing-lg)}.install-prompt:hover{background-color:var(--color-primary-hover);box-shadow:var(--shadow-md)}.install-prompt:active{transform:scale(.98)}.install-prompt:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.install-prompt__icon{width:1rem;height:1rem;flex-shrink:0}.install-prompt__text{white-space:nowrap}@media(max-width:768px){.install-prompt{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-xs)}.install-prompt__icon{width:.875rem;height:.875rem}}