*{box-sizing:border-box}
:root{
  --bg:#12161d; --bg2:#171c26; --card:#1d2431; --card2:#232b3c;
  --ink:#e8ecf2; --muted:#8b97aa; --accent:#4f8ef7; --accent2:#6aa3ff;
  --ok:#3ddc84; --warn:#f5a623; --danger:#ef5350;
  --line:#2a3446; --radius:12px;
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,"Segoe UI","Noto Sans","DejaVu Sans",Arial,sans-serif;
  font-size:16px; line-height:1.55;
}
.wrap{max-width:1000px; margin:0 auto; padding:20px}
.dim{color:var(--muted)}
.err{color:var(--danger); margin-top:12px; font-size:14px}

.topbar{background:var(--bg2); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 20px}
.brand{font-weight:700; letter-spacing:.01em; color:var(--ink); display:flex; align-items:center; gap:10px; line-height:1}
.brand .logo{height:26px; width:auto; display:block; margin:0}
.brand-link{text-decoration:none; color:var(--ink)}
.brand-link:hover .brand{color:var(--accent2)}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin:20px 0}
.card h2{margin:0 0 16px; font-size:19px; border-bottom:1px solid var(--line); padding-bottom:10px}
h1{font-size:26px; margin:8px 0 4px}
h3{font-size:16px; margin:20px 0 8px; color:var(--accent2)}

/* формы */
input[type=password]{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg2); color:var(--ink); font-size:16px; margin-bottom:12px;
}
input[type=password]:focus{outline:none; border-color:var(--accent)}
.btn-primary{
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:12px 22px; font-size:15px; font-weight:600; cursor:pointer;
}
.btn-primary:hover{background:var(--accent2)}
.btn-ghost{
  background:transparent; color:var(--muted); border:1px solid var(--line);
  border-radius:8px; padding:8px 14px; cursor:pointer; font-size:14px;
}
.btn-ghost:hover{color:var(--ink); border-color:var(--muted)}

.auth-card{max-width:420px; margin:60px auto}
.project-list{display:grid; gap:14px; grid-template-columns:1fr}
.project-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 22px; text-decoration:none; color:var(--ink); display:block;
}
.project-card:hover{border-color:var(--accent)}
.project-card .t{font-size:18px; font-weight:600}
.project-card .s{color:var(--muted); font-size:14px; margin-top:4px}

/* КПИ */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.kpi{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:14px 16px}
.kpi .v{font-size:26px; font-weight:700; color:var(--accent2)}
.kpi .l{font-size:12.5px; color:var(--muted); margin-top:4px}

/* этапы */
.stage{border:1px solid var(--line); border-radius:10px; margin:14px 0; background:var(--card2); overflow:hidden}
.stage-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; cursor:pointer; font-weight:600;
}
.stage-head .tag{color:var(--muted); font-size:12.5px; font-weight:500}
.stage-head .pct{color:var(--accent2); font-weight:700}
.stage-body{padding:6px 8px 12px}
.stage.collapsed .stage-body{display:none}
.stage-items{list-style:none; margin:8px; padding:0}
.stage-item{
  display:flex; align-items:flex-start; gap:12px; padding:9px 10px;
  border-radius:8px; cursor:pointer;
}
.stage-item:hover{background:var(--bg2)}
.stage-item input[type=checkbox]{width:19px; height:19px; accent-color:var(--accent); margin-top:2px; cursor:pointer; flex:none}
.stage-item .txt{flex:1}
.stage-item .note{font-size:12.5px; color:var(--muted); margin-top:3px}
.stage-item.done .txt{color:var(--muted); text-decoration:line-through}
.progress{height:6px; background:var(--bg); border-radius:3px; overflow:hidden; margin:6px 16px 2px}
.progress div{height:100%; background:var(--accent); width:0; transition:width .3s}

.save-bar{display:flex; align-items:center; gap:14px; margin-top:18px}
#tzBody p{margin:8px 0}
#tzBody ul{padding-left:20px}

@media(max-width:640px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}