body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(180deg,#fff,#f3f7ff);color:#1f2937}.app-shell{min-height:100vh;display:flex;flex-direction:column}.main-padded{flex:1;padding-bottom:calc(104px + env(safe-area-inset-bottom,0px));overflow-y:auto}.placeholder-screen{max-width:700px;margin:0 auto;padding:48px 16px;text-align:center;color:#6b7280;font-size:16px}.container{max-width:700px;margin:20px auto 40px;padding:0 16px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.header .logo{width:32px;vertical-align:bottom;margin-right:10px}.header h1{margin:0;font-size:28px}.splash-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;min-height:100vh;background:#fff;opacity:1;transition:opacity .4s ease}.splash-screen--exiting{opacity:0}.splash-screen__icon{display:block;width:clamp(104px,24vw,152px);aspect-ratio:685/724;object-fit:contain}.splash-screen__spinner{width:28px;height:28px;border:3px solid rgba(59,130,246,.2);border-top-color:#3b82f6;border-radius:50%;animation:splash-spin .8s linear infinite}@keyframes splash-spin{to{transform:rotate(360deg)}}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:1px solid #e5e7eb;box-shadow:0 -4px 12px #0000000f;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px);min-height:70px;z-index:10}.tab-button{flex:1;border:none;background:transparent;padding:0 8px 8px;font-size:12px;font-weight:500;font-family:inherit;color:#6b7280;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.tab-button-icon{font-size:18px}.tab-button-label{line-height:1}.tab-button--active{color:#3b82f6;font-weight:600}.settings-screen{max-width:700px;margin:0 auto;padding:20px 16px 40px}.settings-screen h2{margin:0 0 20px;font-size:22px}.settings-actions{display:flex;flex-direction:column;gap:16px}.settings-panel{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-panel h3{margin:0 0 6px;font-size:16px}.settings-panel p{margin:0;color:#6b7280;font-size:14px}.settings-error{color:#ef4444!important;margin-top:8px!important}.settings-secondary-btn{background:#3b82f6;color:#fff;border:none;padding:10px 14px;border-radius:8px;font-weight:600;font-size:14px;font-family:inherit;cursor:pointer;white-space:nowrap}.settings-secondary-btn:disabled{opacity:.55;cursor:not-allowed}.settings-select-label{display:flex;align-items:center;gap:10px;color:#374151;font-size:14px;font-weight:600;white-space:nowrap}.settings-select{min-width:76px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#1f2937;font-family:inherit;font-size:15px;font-weight:600;padding:9px 10px}.settings-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633}.settings-select:disabled{opacity:.55;cursor:not-allowed}.clear-data-btn{background:#ef4444;color:#fff;border:none;padding:12px 20px;border-radius:8px;font-weight:600;font-size:15px;font-family:inherit;cursor:pointer}@media (max-width: 520px){.settings-panel{align-items:stretch;flex-direction:column}.settings-secondary-btn{width:100%}.settings-select-label{justify-content:space-between;width:100%}}.add-btn{background:#3b82f6;color:#fff;border:none;padding:10px 16px;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;font-size:14px}.habit-card{position:relative;display:flex;align-items:stretch;justify-content:space-between;background:#fafaff;border:1px solid #d8d8d8;border-radius:14px;padding:0;margin-bottom:16px;box-shadow:0 2px 8px #0f172a0f;overflow:visible}.habit-card .habit-rail-icon svg{width:1em;height:1em}.habit-card-menu{position:relative;flex:0 0 auto;z-index:3}.habit-card-menu-trigger{height:32px;border:none;background:transparent;color:#374151;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.habit-card-menu-trigger:hover,.habit-card-menu-trigger:focus-visible{background:transparent;outline:none}.habit-rail{width:32px;display:flex;align-items:center;justify-content:center;border-radius:14px 0 0 14px}.habit-rail-icon{width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px}.habit-left{display:flex;align-items:center;gap:10px;padding:14px 12px;min-width:0;flex:1}.habit-info h3{margin:0;font-size:1.65rem;color:#111827;font-weight:600;line-height:1.1}.habit-info .frequency{font-size:1.25rem;font-weight:500;margin:10px 0 0}.habit-right{text-align:right;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:10px 10px 10px 0}.habit-action{width:42px;display:flex;align-items:center;justify-content:center;border-radius:0 14px 14px 0;background:#eef0f3;color:#6b7280;overflow:hidden}.habit-action button{height:100%;width:100%;background:unset;border:unset;font-size:16px;color:inherit;opacity:.5}.habit-action.done{background:#22c55e;color:#fff}.habit-action.done button{opacity:1}.days{font-size:1rem;line-height:1}.days strong{font-weight:700;margin-right:4px}.status{font-size:1.15rem;margin:10px 0 0;border-radius:10px;padding:4px 10px;text-align:center;font-weight:600}.buttons{display:flex;gap:8px;justify-content:flex-end}.btn{border:none;padding:7px 14px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1.1}.done-btn{color:#fff;border:1px solid transparent}.done-btn:disabled{opacity:.55;cursor:not-allowed}.blue{color:#3b82f6}.blue .habit-rail{background:#dbeafe}.blue .habit-rail-icon{color:#3b82f6}.blue .status{background:#dbeafe;color:#3b82f6}.blue .done-btn{background:#3b82f6}.green{color:#10b981}.green .habit-rail{background:#d1fae5}.green .habit-rail-icon{color:#10b981}.green .status{background:#d1fae5;color:#10b981}.green .done-btn{background:#10b981}.teal{color:#10abb9}.teal .habit-rail{background:#c9f8fa}.teal .habit-rail-icon{color:#10abb9}.teal .status{background:#c9f8fa;color:#10abb9}.teal .done-btn{background:#10abb9}.orange{color:#f97316}.orange .habit-rail{background:#ffedd5}.orange .habit-rail-icon{color:#f97316}.orange .status{background:#ffedd5;color:#f97316}.orange .done-btn{background:#f97316}.purple{color:#8b5cf6}.purple .habit-rail{background:#ede9fe}.purple .habit-rail-icon{color:#8b5cf6}.purple .status{background:#ede9fe;color:#8b5cf6}.purple .done-btn{background:#8b5cf6}.red{color:#ef4444}.red .habit-rail{background:#fee2e2}.red .habit-rail-icon{color:#ef4444}.red .status{background:#fee2e2;color:#ef4444}.red .done-btn{background:#ef4444}@media (max-width: 560px){.habit-card{align-items:stretch}.habit-left{padding-right:8px}.habit-info h3{font-size:1.35rem}.habit-info .frequency{font-size:1.05rem}.habit-right{padding:10px 10px 10px 0;gap:6px}.days{font-size:.95rem}.days strong{font-size:1.3rem}.status{font-size:.95rem;padding:4px 8px}.btn{padding:6px 10px;font-size:13px}}.habits-empty{text-align:center;color:#6b7280;font-size:15px;margin:32px 0}.habit-form-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(15,23,42,.45);z-index:100;display:flex;align-items:flex-end;justify-content:center;padding:0}@media (min-width: 480px){.habit-form-backdrop{align-items:center;padding:16px}}.habit-form-modal{background:#fff;width:100%;max-width:520px;max-height:min(92vh,720px);overflow-y:auto;border-radius:16px 16px 0 0;padding:20px 18px 24px;box-shadow:0 -8px 32px #0000001f}@media (max-width: 479.98px){.habit-form-modal{animation:habit-form-slide-in .2s ease-out}.habit-form-modal--closing{animation:habit-form-slide-out .2s ease-in forwards}}@media (min-width: 480px){.habit-form-modal{border-radius:16px}}@media (prefers-reduced-motion: reduce){.habit-form-modal{animation:none}}@keyframes habit-form-slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes habit-form-slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}.habit-form-heading{margin:0 0 18px;font-size:22px}.habit-form{display:flex;flex-direction:column;gap:16px}.habit-form-field{display:flex;flex-direction:column;gap:6px}.habit-form-label{font-size:13px;font-weight:600;color:#374151}.habit-form-input{border:1px solid #d1d5db;border-radius:8px;padding:10px 12px;font-size:16px;font-family:inherit;color:#1f2937}.habit-form-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633}.habit-swatch-row{display:flex;flex-wrap:wrap;gap:10px}.habit-swatch{width:40px;height:40px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#f3f4f6}.habit-swatch--active{border-color:#1f2937;box-shadow:0 0 0 2px #fff,0 0 0 4px #3b82f6}.habit-swatch-dot{width:22px;height:22px;border-radius:50%;display:block}.habit-icon-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px;max-height:200px;overflow-y:auto;padding:4px;border:1px solid #e5e7eb;border-radius:10px;background:#f9fafb}.habit-icon-option{width:44px;height:44px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#374151;padding:0}.habit-icon-option--active{border-color:#3b82f6;background:#eff6ff;color:#3b82f6}.habit-form-hint{margin:0;font-size:13px;color:#b45309}.habit-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}.habit-form-actions-end{display:flex;gap:10px;margin-left:auto}.habit-form-btn{border:none;border-radius:8px;padding:10px 18px;font-weight:600;font-size:14px;font-family:inherit;cursor:pointer}.habit-form-btn--secondary{background:#f3f4f6;color:#374151}.habit-form-btn--primary{background:#3b82f6;color:#fff}.habit-form-btn--primary:disabled{opacity:.5;cursor:not-allowed}.habit-form-btn--danger{background:#ef4444;color:#fff}.habit-form-btn--danger:hover{filter:brightness(.95)}.history-screen{max-width:700px;margin:0 auto;padding:20px 16px 32px}.history-screen h2{margin:0 0 20px;font-size:24px}.history-group-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 18px;padding:4px;border:1px solid #d1d5db;border-radius:8px;background:#e5e7eb}.history-group-switch-btn{min-height:28px;border:none;border-radius:6px;background:transparent;color:#4b5563;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700}.history-group-switch-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.history-group-switch-btn--active{background:#fff;color:#1f2937;box-shadow:0 1px 3px #0f172a1f}.history-empty{color:#6b7280}.history-habit{background:#fff;border:1px solid #d8d8d8;border-radius:12px;padding:14px 16px;margin-bottom:12px;box-shadow:0 4px 12px #0000000d}.history-habit h3{margin:0 0 8px;font-size:16px;font-weight:700}.history-habit-title{display:flex;align-items:center;gap:8px}.history-habit-icon{font-size:14px}.history-list{margin:0;padding:0;list-style:none;color:#374151;display:flex;flex-direction:column;gap:8px}.history-row{margin:0;border-radius:10px;background:#f5f5fa;border:1px solid #e5e7eb;line-height:1.2;overflow:hidden}.history-row-button{display:flex;align-items:center;width:100%;padding:10px 12px;margin:0;border:none;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.history-row-button:hover,.history-row-button:focus-visible{outline:none;background:rgba(31,41,55,.04)}.history-date-group{background:#fafaff;border:1px solid #d8d8d8;border-radius:12px;padding:14px 16px;margin-bottom:12px;box-shadow:0 4px 12px #0000000d}.history-date-group h3{margin:0 0 8px;font-size:16px;font-weight:700}.history-date-group .history-row{display:flex;align-items:center;gap:8px;font-weight:600}.history-habit--blue h3,.history-row--blue{color:#3b82f6}.history-habit--green h3,.history-row--green{color:#10b981}.history-habit--teal h3,.history-row--teal{color:#10abb9}.history-habit--orange h3,.history-row--orange{color:#f97316}.history-habit--purple h3,.history-row--purple{color:#8b5cf6}.history-habit--red h3,.history-row--red{color:#ef4444}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:#f5f6f8}.login-form{background:#fff;padding:40px;border-radius:12px;box-shadow:0 4px 12px #0000001a;width:100%;max-width:400px}.login-form h1{text-align:center;margin:0 0 24px;font-size:24px;color:#1f2937}.login-form h1 .logo{width:32px;vertical-align:bottom;margin-right:10px}.login-form button[type=submit]{width:100%;background:#3b82f6;color:#fff;border:none;padding:12px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-bottom:16px}.login-form button[type=submit]:disabled{opacity:.6;cursor:not-allowed}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:4px;font-weight:500;color:#374151}.form-group input{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit}.form-group input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.toggle-mode{width:100%;background:transparent;border:none;color:#3b82f6;cursor:pointer;font-size:14px;text-decoration:underline}.error-message{color:#ef4444;font-size:14px;margin-bottom:16px;text-align:center}