/* Цвета только через переменные. Девять имён auth-kit + свои. */
:root {
  --bg:#F4F7F6; --card:#FFFFFF; --card2:#EAF0EE; --line:#D8E2DF;
  --txt:#12201D; --dim:#5F7570;
  --accent:#14B8A6; --accent2:#0D9488; --danger:#D8453B;
  --on-accent:#062925; --flow:#2F6FE4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0F1716; --card:#172321; --card2:#1E2D2A; --line:#2A3C38;
    --txt:#E6F1EE; --dim:#8AA39D;
    --accent:#2DD4BF; --accent2:#14B8A6; --danger:#FF7A70;
    --on-accent:#062925; --flow:#6C9CFF;
  }
}

* { box-sizing:border-box; }
html { touch-action:manipulation; -webkit-text-size-adjust:100%; }
input, select, textarea { font-size:16px; }
body {
  margin:0; background:var(--bg); color:var(--txt);
  font:16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.app { min-height:100dvh; display:flex; flex-direction:column; }
.dim { color:var(--dim); }

/* Хедер: иконка + название слева, шестерёнка справа */
.app-header {
  position:sticky; top:0; z-index:5; background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 16px) 8px calc(env(safe-area-inset-left) + 16px);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
body.has-bar .app-header { top:var(--bar-h, 0px); }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px; }
.brand img { border-radius:8px; display:block; }
.icon-btn {
  width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:12px;
  background:transparent; color:var(--dim); cursor:pointer;
}
.icon-btn:active { background:var(--card2); }

/* Экран */
.view { flex:1; padding:8px calc(env(safe-area-inset-right) + 16px) 96px calc(env(safe-area-inset-left) + 16px); }
.view h1 { font-size:22px; margin:8px 0 16px; }
.list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.task {
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; display:flex; gap:12px; align-items:center;
}
.task .check { width:22px; height:22px; border-radius:50%; border:2px solid var(--accent); flex:none; }
.task.done { color:var(--dim); }
.task.done .check { background:var(--accent); }
.task .title { flex:1; min-width:0; overflow-wrap:anywhere; }
.task.done .title { text-decoration:line-through; }
.empty { text-align:center; padding:56px 16px; }
.empty img { width:72px; height:72px; border-radius:18px; }
.empty h2 { margin:16px 0 4px; font-size:20px; }
.empty p { margin:0; color:var(--dim); }

/* Нижняя навигация */
.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:5; display:flex;
  background:var(--card); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 0 6px; border:0; background:transparent; color:var(--dim);
  font:inherit; font-size:12px; cursor:pointer; min-height:56px;
}
.tab.active { color:var(--accent2); }
@media (prefers-color-scheme: dark) { .tab.active { color:var(--accent); } }

/* Лист настроек */
.sheet-bg { position:fixed; inset:0; z-index:10; background:rgba(0,0,0,.45); }
.sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:11; max-height:92dvh; overflow:auto;
  overscroll-behavior:contain; background:var(--card); border-radius:20px 20px 0 0;
  padding:8px calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 20px) calc(env(safe-area-inset-left) + 16px);
}
.sheet-grip { width:40px; height:4px; border-radius:2px; background:var(--line); margin:4px auto 12px; }
.sheet h2 { margin:0 0 8px; font-size:20px; }
#authKitWho { margin-top:20px; }
[hidden] { display:none !important; }

/* Режим «только чтение»: прячем всё, что пишет */
body.ro .write { display:none !important; }