:root{
  --bg:#0f0f10; --card:#1c1c1e; --card2:#242426; --line:#2a2a2d;
  --text:#f2f2f7; --muted:#8e8e93; --accent:#3d8cff; --ok:#30d158; --warn:#ffd60a; --bad:#ff453a;
  --radius:16px; --gap:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;}
.app{max-width:760px;margin:0 auto;padding:16px 16px 96px;}
.ico{display:inline-block;vertical-align:middle;color:currentColor}
.muted{color:var(--muted);font-size:13px}
h2{font-size:16px;margin:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:var(--gap)}
.card__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.badge{font-size:12px;padding:4px 10px;border-radius:999px;font-weight:600}
.badge--ok{background:rgba(48,209,88,.15);color:var(--ok)}
.badge--mid{background:rgba(255,214,10,.15);color:var(--warn)}
.badge--low{background:rgba(255,69,58,.15);color:var(--bad)}

/* цель */
.goal-card{background:linear-gradient(160deg,#1d2a44,#141821);border:1px solid #24365a;
  border-radius:var(--radius);padding:18px;margin-bottom:var(--gap)}
.goal-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.goal-card__label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.goal-card__title{font-size:18px;font-weight:700;margin-top:4px}
.goal-card__streak{display:flex;align-items:center;gap:6px;color:#ff9f0a;font-weight:700}
.progress{height:10px;background:#0b1220;border-radius:999px;overflow:hidden;margin:14px 0 8px}
.progress__bar{height:100%;background:linear-gradient(90deg,#3d8cff,#30d158);border-radius:999px;transition:width .5s ease}
.goal-card__nums{display:flex;gap:8px;font-weight:600}
.goal-card__nums .muted{font-weight:400}

/* форма добавления */
.add-form{display:flex;gap:8px;margin-bottom:12px}
.input{flex:1;background:var(--card2);border:1px solid var(--line);border-radius:12px;
  color:var(--text);padding:12px 14px;font-size:15px;outline:none;font-family:inherit}
.input:focus{border-color:var(--accent)}
textarea.input{width:100%;resize:vertical;margin:10px 0}
.btn{border:0;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:600;
  cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;transition:transform .1s,background .2s}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--accent);color:#fff}
.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn--danger{background:var(--bad);color:#fff}

/* задачи */
.tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.task{display:flex;align-items:center;gap:12px;background:var(--card2);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.task--done{opacity:.65}
.task--done .task__title{text-decoration:line-through}
.task--failed{border-color:rgba(255,69,58,.5)}
.task__toggle{display:contents}
.task__body{flex:1;min-width:0}
.task__title{font-size:15px;word-break:break-word}
.task__reason{font-size:12px;color:var(--bad);margin-top:2px}
.btn-check{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);
  background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.btn-check:hover{border-color:var(--ok);color:var(--ok)}
.btn-check--reset:hover{border-color:var(--accent);color:var(--accent)}
.task--done .btn-check{border-color:var(--ok);color:var(--ok);background:rgba(48,209,88,.1)}
.btn-fail{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);
  background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.btn-fail:hover{border-color:var(--bad);color:var(--bad)}
.empty{color:var(--muted);text-align:center;padding:24px 0;font-size:14px}

/* рефлексия */
.reflect .mood{display:flex;gap:8px;margin:8px 0 12px}
.mood__dot{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--card2);color:var(--muted);cursor:pointer;font-weight:600}
.mood__dot.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* модалка */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;
  justify-content:center;z-index:100;padding:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal[hidden]{display:none !important}
.modal__box{background:var(--card);width:100%;max-width:480px;border-radius:20px 20px 0 0;
  padding:20px;display:flex;flex-direction:column;gap:10px}
.modal__actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.chip{background:var(--card2);border:1px solid var(--line);color:var(--text);
  padding:8px 12px;border-radius:999px;font-size:13px;cursor:pointer;font-family:inherit}
.chip.is-active{border-color:var(--accent);color:var(--accent)}

/* навигация: низ на мобиле, сайдбар на десктопе */
.nav{position:fixed;bottom:0;left:0;right:0;background:#141416ee;backdrop-filter:blur(12px);
  border-top:1px solid var(--line);display:flex;justify-content:space-around;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:50}
.nav__item{color:var(--muted);text-decoration:none;display:flex;flex-direction:column;
  align-items:center;gap:2px;font-size:11px;padding:6px 10px;border-radius:10px}
.nav__item.is-active{color:var(--accent)}

@media (min-width:900px){
  .app{max-width:1040px;padding-bottom:16px;display:grid;grid-template-columns:220px 1fr;gap:24px}
  .nav{position:sticky;top:16px;bottom:auto;left:auto;right:auto;
    flex-direction:column;justify-content:flex-start;gap:4px;border:1px solid var(--line);
    border-radius:var(--radius);padding:12px;background:var(--card);height:max-content}
  .nav__item{flex-direction:row;gap:10px;font-size:14px;padding:10px 12px;justify-content:flex-start}
}