*{box-sizing:border-box}:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}body{margin:0;padding:16px;font-family:Arial,sans-serif;background:#f4f6f8;color:#222}body.dark{background:#111827;color:#fff}.dark #app{background:#203151}.dark .stats-item{background:#293f69;border:1px solid #44567a}.dark #theme-toggle{background:#111827;border:1px solid #44567a}.dark .habit-item{background:#294069;border:1px solid #44567a}.dark .habit-item:hover{background:#25395d}.dark #habit-list button{border:1px solid #516787;background:#44577a;color:#fff}.dark #habit-list button:hover{background:#445d88;border-color:#6a7398}.dark #habit-list strong{color:#fff}.dark .stat{background:#516787}.dark .streak,.dark .best{background:transparent}.dark .streak{color:#e5621d}.dark .best{color:#e18f17}.dark .empty{color:#fff}.dark #search-input,.dark .modal-content input#habit-input{border:1px solid #294169;background:#101827;color:#fff}.dark #search-input::placeholder,.dark .modal-content input#habit-input::placeholder{color:#d1d1d1}.dark .modal-content{background:#203151}#theme-toggle{padding:10px 14px;border-radius:12px;background:#f9fafb;border:1px solid #e5e7eb;cursor:pointer}#app{max-width:720px;margin:40px auto;padding:24px;background:#fff;border-radius:16px;box-shadow:0 10px 30px #00000014}.toolbar{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}h1{margin:0 0 24px;font-size:36px;line-height:1.1}#add-btn,#search-input{height:42px}#add-btn,#export-btn,#import-btn{border:none;background:#111827;color:#fff;padding:0 12px;border-radius:10px;cursor:pointer;font-size:15px;font-weight:600;transition:.2s ease}#add-btn:hover,#export-btn:hover,#import-btn:hover{background:#1f2937}#search-input{width:260px;padding:0 14px;border:1px solid #d1d5db;border-radius:10px;outline:none;font-size:14px;transition:.2s ease}#search-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}#habit-list{list-style:none;margin:28px 0 24px;padding:0;display:flex;flex-direction:column;gap:12px}.habit-item{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;transition:.2s ease;flex-wrap:wrap}.habit-item:hover{background:#f3f4f6;transform:translateY(-1px)}#habit-list strong{min-width:140px;font-size:17px;font-weight:700;color:#111827;margin-right:auto;word-break:break-word}#habit-list button{border:1px solid #d1d5db;background:#fff;color:#111827;border-radius:10px;padding:8px 10px;cursor:pointer;font-size:14px;line-height:1;transition:.2s ease}#habit-list button:hover{background:#eef2ff;border-color:#c7d2fe}#habit-list button[data-action=toggle]{min-width:42px}.habit-btn-delete:hover{background:#fee2e2;border-color:#fca5a5}.habit-btn-archive:hover{background:#fef3c7;border-color:#fcd34d}.habit-btn-edit:hover{background:#dbeafe;border-color:#93c5fd}.habit-item.selected{border-color:#6366f1;box-shadow:0 0 0 2px #6366f126}.streak,.best{font-size:18px;font-weight:600;white-space:nowrap}.streak{color:#ea580c;background:#fff7ed}.best{color:#a16207;background:#fefce8}.stat{padding:4px 8px;border-radius:999px;background:#fff7ed;font-weight:600;font-size:13px}#filters{display:flex;gap:10px;margin-top:8px}.filter-btn{min-width:110px;padding:11px 16px;border-radius:10px;border:1px solid #d1d5db;background:#fff;color:#111827;cursor:pointer;font-size:14px;font-weight:600;transition:.2s ease}.filter-btn:hover{background:#f3f4f6}.filter-btn.is-active{background:#111827;color:#fff;border-color:#111827}.empty{display:flex;justify-content:center;color:#6b7280;font-style:italic}.modal{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center}.modal-content{background:#fff;padding:24px;border-radius:12px;width:320px}.modal-content h2{text-align:center;margin-top:0}.modal-content input#habit-input{width:100%;padding:8px 14px;border:1px solid #d1d5db;border-radius:10px;outline:none;font-size:14px;transition:.2s ease}.modal-actions{display:flex;align-items:center;gap:10px;margin-top:10px;justify-content:center}.modal-actions button{background:#111827;color:#fff;min-width:110px;padding:11px 16px;border-radius:10px;border:none;cursor:pointer;font-size:14px;font-weight:600;transition:.2s ease}.modal-actions button#modal-cancel{background:#fff;color:#111827}.hidden{display:none}#stats{display:flex;gap:20px;margin:20px 0;flex-wrap:wrap}.stats-item{padding:10px 14px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;font-weight:600}.dark #calendar{background:#294069;border:1px solid #44567a}.dark .calendar-weekdays span{color:#fff}.dark .calendar-days span{border:1px solid #516787;background:#44577a;color:#fff}.dark .calendar-day.done{border:1px solid #b0c8ec;background:#111827}.dark .calendar-nav button{border:1px solid #44577a;background:#111827;color:#fff}.dark .calendar-nav button:hover{background:#172033}.calendar-day.done{border:1px solid #111827;background:#f9fafb}#calendar{margin-top:24px;padding:16px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;text-align:center}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-header{font-size:18px;font-weight:700;margin-bottom:8px;text-align:center}.calendar-month{font-size:14px;font-weight:400;margin-bottom:12px;text-align:center}.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.calendar-weekdays span,.calendar-days span{text-align:center;padding:8px 0;border-radius:8px}.calendar-weekdays span{font-weight:700;color:#6b7280}.calendar-days span{background:#fff;border:1px solid #e5e7eb;min-height:36px}.calendar-days span:empty{background:transparent;border:none}.calendar-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.calendar-nav button{border:1px solid #d1d5db;background:#fff;border-radius:10px;padding:6px 12px;cursor:pointer;font-size:16px;transition:.2s ease}.calendar-nav button:hover{background:#eef2ff;border-color:#c7d2fe}.calendar-month{font-weight:700;font-size:16px}@media(max-width:640px){#app{margin:6px;padding:18px}#add-btn,#export-btn,#import-btn{padding:12px}h1{font-size:28px}#add-btn,#search-input{width:100%}.habit-item{align-items:flex-start}#habit-list strong{width:100%;min-width:auto;margin-bottom:4px}#filters{flex-direction:column}.filter-btn{width:100%}#stats{gap:10px;margin:16px 0}}