<style>
  :root{
    --cream:#FAF6EF;
    --card:#FFFFFF;
    --line:#E9E1D4;
    --ink:#3B342C;
    --ink-soft:#8A8072;
    --sage:#93A481;
    --sage-bg:#EEF1E7;
    --rose:#C08A8D;
    --rose-bg:#F6EAEA;
    --cocoa:#7A5C46;
    --cocoa-bg:#F0E7DC;
    --slate:#8C93A0;
    --slate-bg:#EAECF0;
    --plum:#9C7FA0;
    --plum-bg:#EFE7F1;
    --amber:#B08A3E;
    --amber-bg:#F3EBD9;
    --teal:#5E8B93;
    --teal-bg:#E7EFF0;
    --danger:#B5624F;
    --danger-bg:#FBEFEA;
    --radius:14px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--cream); color:var(--ink);
    font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;
    padding-bottom:90px;
  }
  header{
    padding:28px 20px 16px; text-align:center; position:relative;
  }
  header h1{
    font-family:'Cormorant Garamond',serif; font-weight:600; font-size:30px; margin:0 0 2px;
    letter-spacing:0.3px;
  }
  header .date{
    color:var(--ink-soft); font-size:13px; text-transform:capitalize;
  }
  .tabs{
    display:flex; gap:6px; padding:0 16px 14px; position:sticky; top:0; background:var(--cream);
    z-index:5; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{
    flex:0 0 auto; text-align:center; padding:10px 14px; border-radius:999px; font-size:13px;
    font-weight:600; color:var(--ink-soft); background:transparent; border:1px solid var(--line);
    cursor:pointer; transition:all .15s; white-space:nowrap;
  }
  .tab.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
  main{ padding:0 16px; max-width:560px; margin:0 auto; }
  .section-title{
    font-size:12px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase;
    color:var(--ink-soft); margin:22px 4px 10px; display:flex; align-items:center; gap:8px;
  }
  .section-title .count{ font-weight:600; color:var(--ink); }
  .card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    margin-bottom:8px; overflow:hidden;
  }
  .task{
    display:flex; align-items:flex-start; gap:12px; padding:13px 14px; border-bottom:1px solid var(--line);
  }
  .task:last-child{ border-bottom:none; }
  .task.done .task-name{ text-decoration:line-through; color:var(--ink-soft); }
  .checkbox{
    width:22px; height:22px; border-radius:7px; border:1.5px solid var(--ink-soft);
    flex-shrink:0; margin-top:1px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all .15s; background:#fff;
  }
  .checkbox.checked{ background:var(--sage); border-color:var(--sage); }
  .checkbox.checked:after{ content:"✓"; color:#fff; font-size:13px; font-weight:700; }
  .task-body{ flex:1; min-width:0; }
  .task-name{ font-size:15px; font-weight:500; line-height:1.35; }
  .task-meta{ display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
  .badge{
    font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:999px;
  }
  .badge.cat-дом{ background:var(--cocoa-bg); color:var(--cocoa); }
  .badge.cat-работа{ background:var(--slate-bg); color:var(--slate); }
  .badge.cat-здоровье{ background:var(--sage-bg); color:var(--sage); }
  .badge.cat-досуг{ background:var(--plum-bg); color:var(--plum); }
  .badge.cat-развитие{ background:var(--amber-bg); color:var(--amber); }
  .badge.important{ background:var(--rose-bg); color:var(--rose); }
  .badge.urgent{ background:var(--danger-bg); color:var(--danger); }
  .badge.meeting{ background:var(--teal-bg); color:var(--teal); }
  .badge.carry{ background:#FBEFEA; color:var(--danger); }
  .badge.due{ background:var(--slate-bg); color:var(--slate); }
  .badge.routine{ background:#F1EEE7; color:var(--ink-soft); }
  .edit-btn{
    width:26px; height:26px; border:none; background:none; color:var(--ink-soft);
    cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center;
    border-radius:6px; flex-shrink:0;
  }
  .edit-btn:active{ background:var(--line); }
  .task-actions{ display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; max-width:110px; }
  .icon-btn{
    width:26px; height:26px; border:none; background:none; color:var(--ink-soft);
    cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center;
    border-radius:6px;
  }
  .icon-btn:active{ background:var(--line); }
  .empty{
    text-align:center; padding:30px 16px; color:var(--ink-soft); font-size:14px;
    background:var(--card); border:1px dashed var(--line); border-radius:var(--radius);
  }
  .add-bar{
    position:fixed; bottom:0; left:0; right:0; background:var(--card); border-top:1px solid var(--line);
    padding:10px 14px 14px; display:flex; gap:8px; align-items:center;
  }
  .add-bar input[type=text]{
    flex:1; border:1px solid var(--line); border-radius:10px; padding:11px 12px; font-size:15px;
    font-family:'Inter',sans-serif; background:var(--cream); color:var(--ink);
  }
  .add-bar button.plus{
    width:42px; height:42px; border-radius:10px; border:none; background:var(--ink); color:#fff;
    font-size:20px; cursor:pointer; flex-shrink:0;
  }
  .add-opts{
    display:none; padding:0 16px 8px; max-width:560px; margin:0 auto; gap:6px; flex-wrap:wrap;
  }
  .add-opts.open{ display:flex; }
  .chip{
    font-size:12.5px; padding:6px 12px; border-radius:999px; border:1px solid var(--line);
    background:#fff; color:var(--ink-soft); cursor:pointer; font-weight:600;
  }
  .chip.sel{ background:var(--ink); color:#fff; border-color:var(--ink); }
  .backlog-item{ display:flex; align-items:center; gap:10px; padding:13px 14px; border-bottom:1px solid var(--line); }
  .backlog-item:last-child{ border-bottom:none; }
  .backlog-item .days{ font-size:11px; color:var(--danger); font-weight:700; margin-top:3px; }
  .stage-item{ padding:13px 14px; border-bottom:1px solid var(--line); }
  .stage-item:last-child{ border-bottom:none; }
  .stage-actions{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; align-items:center; }
  .move-btn{
    font-size:12px; font-weight:700; color:var(--ink); background:var(--sage-bg); border:none;
    padding:7px 11px; border-radius:8px; cursor:pointer; flex-shrink:0;
  }
  .stat-block{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:12px; }
  .stat-row{ margin-bottom:12px; }
  .stat-row:last-child{ margin-bottom:0; }
  .stat-label{ display:flex; justify-content:space-between; font-size:13.5px; font-weight:600; margin-bottom:5px; }
  .stat-label small{ color:var(--ink-soft); font-weight:500; }
  .bar-bg{ height:8px; background:var(--line); border-radius:999px; overflow:hidden; }
  .bar-fill{ height:100%; border-radius:999px; background:var(--sage); }
  .bar-fill.warn{ background:var(--danger); }
  .stat-title{ font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600; margin:0 0 10px; }
  .loading{ text-align:center; padding:60px 0; color:var(--ink-soft); font-size:14px; }
  .routine-manage{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); }
  .routine-manage:last-child{ border-bottom:none; }
  .del-btn{ background:none; border:none; color:var(--danger); font-size:13px; font-weight:600; cursor:pointer; }
  .toast{
    position:fixed; bottom:100px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff;
    padding:9px 16px; border-radius:10px; font-size:13px; font-weight:500; opacity:0; pointer-events:none;
    transition:opacity .25s; z-index:20;
  }
  .toast.show{ opacity:1; }
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(59,52,44,0.45); z-index:30;
    align-items:flex-end; justify-content:center;
  }
  .modal-overlay.open{ display:flex; }
  .modal-card{
    background:var(--card); border-radius:20px 20px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom));
    width:100%; max-width:560px; max-height:85vh; overflow-y:auto;
  }
  .modal-title{ font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; margin:0 0 14px; }
  .field-label{ font-size:12px; color:var(--ink-soft); font-weight:600; margin-bottom:6px; }
  .chip-row{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
  .modal-input{
    width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; font-family:inherit;
    font-size:14px; margin-bottom:14px; background:var(--cream); color:var(--ink);
  }
  .modal-actions{ display:flex; gap:8px; }
  .modal-actions button{
    flex:1; padding:11px; border-radius:10px; font-weight:600; font-size:14px; cursor:pointer; border:none;
  }
  #editCancelBtn{ background:var(--line); color:var(--ink); }
  #editSaveBtn{ background:var(--ink); color:#fff; }
  .mgrid{
    display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
  }
  .mgrid-head{
    font-size:11px; font-weight:700; color:var(--ink-soft); text-align:center; margin-bottom:4px;
  }
  .mcell{
    aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:var(--card); border:1px solid var(--line); border-radius:10px; cursor:pointer;
    gap:3px;
  }
  .mcell.empty-cell{ background:transparent; border:none; cursor:default; }
  .mcell-num{ font-size:13px; font-weight:600; }
  .mcell.mcell-today{ border-color:var(--ink); border-width:1.5px; }
  .mcell.mcell-sel{ background:var(--sage-bg); }
  .mcell-dot, .legend-dot{
    width:7px; height:7px; border-radius:50%; display:inline-block;
  }
  .mcell-dot.mcell-full, .legend-dot.mcell-full{ background:var(--sage); }
  .mcell-dot.mcell-partial, .legend-dot.mcell-partial{ background:var(--amber); }
  .mcell-dot.mcell-empty, .legend-dot.mcell-empty{ background:var(--danger); opacity:.6; }
  .mcell-dot.mcell-none{ background:transparent; }
  .mcell-dot.mcell-nodata{ background:var(--line); }
  .mcell-dot.mcell-future{ background:transparent; }

/* ---------- Комментарий к задаче ---------- */
.task-comment{
  font-size:12.5px; color:var(--ink-soft); margin-top:4px; font-style:italic; line-height:1.35;
}
.badge.time{ background:var(--slate-bg); color:var(--slate); }
.badge.calendar{ background:#E4EEF6; color:#4C7DA8; }

/* ---------- Настройки ---------- */
.settings-block{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:12px; }
.settings-label{ font-size:12px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:6px; }
.settings-help{ font-size:12px; color:var(--ink-soft); margin-top:6px; line-height:1.4; }
.settings-input{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px;
  font-family:inherit; background:var(--cream); color:var(--ink); margin-bottom:8px;
}
.settings-btn{
  padding:10px 14px; border:none; border-radius:10px; background:var(--ink); color:#fff;
  font-weight:600; font-size:13.5px; cursor:pointer;
}
.settings-btn.secondary{ background:var(--sage-bg); color:var(--sage); }
.settings-btn.danger{ background:#FBEFEA; color:var(--danger); }
.settings-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.settings-row:last-child{ border-bottom:none; }
.switch{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; cursor:pointer; }
.switch input{ width:18px; height:18px; }

/* ---------- Логин ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{
  width:100%; max-width:340px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px 24px; text-align:center;
}
.login-card h1{ font-family:'Cormorant Garamond',serif; font-size:26px; margin:0 0 18px; }
.login-card input{
  width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; font-size:15px;
  font-family:inherit; background:var(--cream); color:var(--ink); margin-bottom:10px;
}
.login-card button{
  width:100%; padding:12px; border:none; border-radius:10px; background:var(--ink); color:#fff;
  font-weight:600; font-size:15px; cursor:pointer;
}
.login-error{ color:var(--danger); font-size:13px; margin-bottom:10px; min-height:16px; }
