diff --git a/index.html b/index.html
index d77a4ef..94f1de4 100644
--- a/index.html
+++ b/index.html
@@ -4,24 +4,13 @@
Семейные задачи
-
diff --git a/style.css b/style.css
index 37d10a4..331f518 100644
--- a/style.css
+++ b/style.css
@@ -1,25 +1,37 @@
-:root{--ink:#0F1218;--accent:#00E5FF;--accent-50:#E8FCFF;--muted:#5B6573;--line:#F2F4F7}
+/* ===== Семейный таск-менеджер — стили (без Tailwind CDN) ===== */
+:root{
+ --ink:#0F1218; --accent:#00E5FF; --accent-50:#E8FCFF;
+ --muted:#5B6573; --line:#F2F4F7; --white:#fff;
+ --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-600:#d97706; --amber-700:#b45309;
+ --emerald-100:#d1fae5; --emerald-600:#059669; --emerald-700:#047857;
+ --sky-100:#e0f2fe; --sky-700:#0369a1;
+ --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-600:#4b5563;
+ --red-50:#fef2f2; --red-100:#fee2e2; --red-600:#dc2626; --red-700:#b91c1c;
+}
-*{box-sizing:border-box}
+*{box-sizing:border-box;margin:0;padding:0}
+body{font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--line)}
+
+/* ---------- компоненты ---------- */
.field{width:100%;border:2px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink);outline:none;transition:border .15s}
.field:focus{border-color:var(--accent)}
textarea.field{resize:vertical}
-.btn-primary{background:var(--accent);color:var(--ink);padding:11px 20px;border-radius:8px;font-weight:700;transition:filter .15s}
-.btn-primary:hover{filter:brightness(1.05)}
-.btn-primary:active{filter:brightness(.95)}
-.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line);padding:9px 18px;border-radius:8px;font-weight:600}
+.btn-primary{background:var(--accent);color:var(--ink);padding:11px 20px;border-radius:8px;font-weight:700;border:none;cursor:pointer;transition:filter .15s;display:inline-block;text-align:center}
+.btn-primary:hover{filter:brightness(1.06)}
+.btn-primary:active{filter:brightness(.94)}
+.btn-primary:disabled{opacity:.5;cursor:not-allowed}
+.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line);padding:9px 18px;border-radius:8px;font-weight:600;cursor:pointer}
.btn-ghost:hover{background:var(--line)}
-.btn-danger{background:#fee2e2;color:#b91c1c;padding:11px 18px;border-radius:8px;font-weight:700}
+.btn-danger{background:#fee2e2;color:#b91c1c;padding:11px 18px;border-radius:8px;font-weight:700;border:none;cursor:pointer}
.btn-danger:hover{background:#fecaca}
-.navtab{white-space:nowrap;padding:10px 14px;font-size:14px;font-weight:600;color:#ffffff80;border-bottom:3px solid transparent;transition:.15s}
+.navtab{white-space:nowrap;padding:10px 14px;font-size:14px;font-weight:600;color:rgba(255,255,255,.5);border:none;background:none;border-bottom:3px solid transparent;cursor:pointer;transition:.15s;font-family:inherit}
.navtab:hover{color:#fff}
.navtab.active{color:var(--accent);border-bottom-color:var(--accent)}
-.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:800;color:#fff;user-select:none;flex-shrink:0}
+.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:800;color:#fff;user-select:none;flex-shrink:0;line-height:1}
-/* карточка задачи */
.task{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:box-shadow .15s,border-color .15s}
.task:hover{box-shadow:0 6px 20px rgba(15,18,24,.07)}
.task.done{opacity:.6}
@@ -29,13 +41,13 @@ textarea.field{resize:vertical}
.task.overdue:not(.done):not(.cancelled){border-color:#fca5a5;box-shadow:0 0 0 1px #fca5a5 inset}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
-.badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.02em}
+.badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.02em;display:inline-block}
-.iconbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:16px;transition:.15s}
+.iconbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:15px;cursor:pointer;transition:.15s;font-family:inherit;color:var(--ink)}
.iconbtn:hover{background:var(--line)}
.iconbtn.primary{background:var(--accent);border-color:var(--accent)}
+.iconbtn:disabled{opacity:.5;cursor:not-allowed}
-/* календарь */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{text-align:center;font-size:12px;font-weight:700;color:var(--muted);padding:6px 0}
.cal-day{min-height:96px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;overflow:hidden}
@@ -55,3 +67,106 @@ textarea.field{resize:vertical}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d6dbe2;border-radius:10px}
+
+/* ---------- утилиты (вместо Tailwind) ---------- */
+.hidden{display:none!important}
+.block{display:block}
+.flex{display:flex}
+.inline-flex{display:inline-flex}
+.grid{display:grid}
+.flex-1{flex:1 1 0%}
+.flex-col{flex-direction:column}
+.flex-wrap{flex-wrap:wrap}
+.items-center{align-items:center}
+.items-start{align-items:flex-start}
+.items-end{align-items:flex-end}
+.justify-center{justify-content:center}
+.justify-between{justify-content:space-between}
+.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
+.grid-cols-2{grid-template-columns:repeat(2,1fr)}
+.grid-cols-3{grid-template-columns:repeat(3,1fr)}
+.space-y-1>*+*{margin-top:.25rem}
+.space-y-2>*+*{margin-top:.5rem}
+.space-y-3>*+*{margin-top:.75rem}
+.space-y-4>*+*{margin-top:1rem}
+.min-h-screen{min-height:100vh}
+.min-w-0{min-width:0}
+.w-full{width:100%}.w-60{width:15rem}.w-8{width:2rem}.w-9{width:2.25rem}
+.h-8{height:2rem}.h-9{height:2.25rem}
+.max-w-6xl{max-width:72rem}.max-w-lg{max-width:32rem}.max-w-xs{max-width:20rem}
+.max-w-\[90px\]{max-width:90px}
+.max-h-72{max-height:18rem}.max-h-\[92vh\]{max-height:92vh}
+.mx-auto{margin-left:auto;margin-right:auto}
+.ml-auto{margin-left:auto}
+.mb-1{margin-bottom:.25rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}
+.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}
+.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-7{padding:1.75rem}
+.px-2{padding-left:.5rem;padding-right:.5rem}
+.px-3{padding-left:.75rem;padding-right:.75rem}
+.px-4{padding-left:1rem;padding-right:1rem}
+.px-5{padding-left:1.25rem;padding-right:1.25rem}
+.py-1{padding-top:.25rem;padding-bottom:.25rem}
+.py-2{padding-top:.5rem;padding-bottom:.5rem}
+.py-3{padding-top:.75rem;padding-bottom:.75rem}
+.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
+.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
+.pt-1{padding-top:.25rem}.pt-3{padding-top:.75rem}
+.pl-1{padding-left:.25rem}.pr-3{padding-right:.75rem}
+.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
+.top-0{top:0}.bottom-0{bottom:0}.bottom-5{bottom:1.25rem}.right-0{right:0}.left-1\/2{left:50%}
+.inset-0{top:0;right:0;bottom:0;left:0}
+.-translate-x-1\/2{transform:translateX(-50%)}
+.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}
+.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}
+.rounded-lg{border-radius:8px}.rounded-xl{border-radius:12px}.rounded-2xl{border-radius:16px}
+.rounded-t-2xl{border-radius:16px 16px 0 0}.rounded-full{border-radius:9999px}
+.shadow-xl{box-shadow:0 10px 30px rgba(15,18,24,.12)}
+.shadow-2xl{box-shadow:0 20px 50px rgba(15,18,24,.25)}
+.border{border:1px solid var(--line)}.border-t{border-top:1px solid var(--line)}.border-b{border-bottom:1px solid var(--line)}.border-line{border-color:var(--line)}
+.text-2xl{font-size:24px}.text-5xl{font-size:48px}.text-xl{font-size:20px}.text-lg{font-size:18px}
+.text-base{font-size:16px}.text-sm{font-size:14px}.text-xs{font-size:12px}.text-\[11px\]{font-size:11px}
+.font-sans{font-family:inherit}
+.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
+.leading-tight{line-height:1.1}.leading-none{line-height:1}
+.text-center{text-align:center}.text-left{text-align:left}
+.capitalize{text-transform:capitalize}
+.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.underline{text-decoration:underline}
+.opacity-60{opacity:.6}
+.transition{transition:.15s}
+
+/* цвета текста */
+.text-ink{color:var(--ink)}.text-muted{color:var(--muted)}.text-white{color:#fff}
+.text-amber-600{color:var(--amber-600)}.text-emerald-600{color:var(--emerald-600)}
+.text-red-600{color:var(--red-600)}.text-gray-300{color:var(--gray-300)}.text-gray-600{color:var(--gray-600)}
+.text-amber-700{color:var(--amber-700)}.text-emerald-700{color:var(--emerald-700)}.text-sky-700{color:var(--sky-700)}.text-red-700{color:var(--red-700)}
+.text-white\/50{color:rgba(255,255,255,.5)}.text-white\/60{color:rgba(255,255,255,.6)}.text-white\/80{color:rgba(255,255,255,.8)}
+
+/* цвета фона */
+.bg-ink{background:var(--ink)}.bg-white{background:#fff}.bg-line{background:var(--line)}.bg-accent-50{background:var(--accent-50)}
+.bg-black\/50{background:rgba(0,0,0,.5)}.bg-white\/10{background:rgba(255,255,255,.1)}.bg-white\/20{background:rgba(255,255,255,.2)}
+.bg-amber-50{background:var(--amber-50)}.bg-amber-100{background:var(--amber-100)}
+.bg-emerald-100{background:var(--emerald-100)}.bg-sky-100{background:var(--sky-100)}
+.bg-gray-100{background:var(--gray-100)}.bg-gray-200{background:var(--gray-200)}
+.bg-red-50{background:var(--red-50)}.bg-red-100{background:var(--red-100)}
+
+/* hover */
+.hover\:bg-line:hover{background:var(--line)}
+.hover\:bg-white\/20:hover{background:rgba(255,255,255,.2)}
+.hover\:text-ink:hover{color:var(--ink)}
+
+/* important-override */
+.\!w-auto{width:auto!important}
+.\!py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
+.\!px-3{padding-left:.75rem!important;padding-right:.75rem!important}
+
+/* адаптив (sm: 640px+) */
+@media(min-width:640px){
+ .sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
+ .sm\:hidden{display:none!important}
+ .sm\:inline-flex{display:inline-flex}
+ .sm\:items-center{align-items:center}
+ .sm\:max-w-lg{max-width:32rem}
+ .sm\:p-4{padding:1rem}
+ .sm\:rounded-2xl{border-radius:16px}
+}