/* Build Hub — frontend design system (extracted from partner prototype).
   Light theme · indigo #3D4FDE accent · Manrope. */
:root{
  --bg:#F4F5F9; --card:#FFFFFF; --ink:#14161F; --muted:#6B7080; --muted2:#9AA0AE;
  --line:#E2E4EE; --line2:#EEF0F6;
  --accent:#3D4FDE; --accent-press:#2A3AB8; --accent-tint:#EEF0FF;
  --green:#1E9E5A; --green-ink:#166B3F; --green-tint:#E3F5EB;
  --amber:#B7791F; --amber-ink:#8A5410; --amber-tint:#FDEEDD;
  --red:#B3261E; --red-tint:#FBEAE9;
  --r-card:16px; --r-btn:14px; --r-pill:999px;
  --shadow:0 1px 2px rgba(20,22,31,.05), 0 8px 24px -16px rgba(20,22,31,.35);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.4; -webkit-font-smoothing:antialiased;
}
#app{max-width:460px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column;
  background:var(--bg); position:relative}
.screen{flex:1; padding:18px 16px 96px; animation:rise .18s ease}
@keyframes rise{from{transform:translateY(6px)}to{transform:none}}

/* typography */
h1{font-size:26px; font-weight:800; letter-spacing:-.4px; margin:0}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.6px; color:var(--muted2); text-transform:uppercase; margin:0 0 10px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow); padding:16px}
.card+.card{margin-top:12px}

/* buttons */
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  border:0; border-radius:var(--r-btn); padding:16px; font:inherit; font-weight:800;
  font-size:16px; cursor:pointer; transition:transform .06s, background .15s}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 10px 24px -10px rgba(61,79,222,.6)}
.btn-primary:active{background:var(--accent-press)}
.btn-primary:disabled{background:#C9CCDA; box-shadow:none; cursor:not-allowed}
.btn-ghost{background:var(--accent-tint); color:var(--accent)}
.btn-green{background:var(--green); color:#fff}
.btn-danger{background:var(--red); color:#fff}
.btn-soft{background:var(--line2); color:var(--ink)}
.link{color:var(--accent); font-weight:700; background:0; border:0; cursor:pointer; font:inherit}

/* header */
.hd{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.hd .back{width:40px; height:40px; border-radius:12px; background:var(--card); border:1px solid var(--line);
  display:grid; place-items:center; font-size:20px; cursor:pointer; flex:0 0 auto}
.hd .ttl{flex:1; min-width:0}
.hd .ttl b{display:block; font-size:20px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hd .ttl span{color:var(--muted); font-size:13px}
.avatar{width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:800; flex:0 0 auto}

/* chips */
.chip{display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:700}
.chip-green{background:var(--green-tint); color:var(--green-ink)}
.chip-amber{background:var(--amber-tint); color:var(--amber-ink)}
.chip-gray{background:var(--line2); color:var(--muted)}
.chip-indigo{background:var(--accent-tint); color:var(--accent)}

/* progress */
.bar{height:8px; border-radius:var(--r-pill); background:var(--line2); overflow:hidden}
.bar>i{display:block; height:100%; border-radius:var(--r-pill); background:var(--accent)}
.bar.g>i{background:var(--green)} .bar.a>i{background:var(--amber)}

/* work row (Сегодня) */
.work{display:block; width:100%; text-align:left; cursor:pointer}
.work .top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px}
.work .nm{font-weight:800; font-size:17px}
.work .sub{color:var(--muted); font-size:13px; margin-bottom:10px}
.work .row{display:flex; align-items:center; gap:12px}
.work .row .bar{flex:1}
.work .pct{font-weight:800; font-variant-numeric:tabular-nums}

/* ring */
.ring-card{display:flex; align-items:center; gap:16px}
.ring{width:56px; height:56px; flex:0 0 auto}
.ring text{font:800 20px 'Manrope'; fill:var(--ink)}

/* big number input (B4) */
.bignum{border:2px solid var(--accent); border-radius:var(--r-card); padding:16px; background:var(--card)}
.bignum .lbl{font-size:12px; font-weight:700; letter-spacing:.5px; color:var(--muted2); text-transform:uppercase}
.bignum .in{display:flex; align-items:baseline; gap:8px; margin-top:6px}
.bignum input{border:0; outline:0; font:800 40px 'Manrope'; width:100%; color:var(--ink); background:0}
.bignum .unit{font-size:20px; font-weight:800; color:var(--muted)}

/* stepper */
.stepper{display:flex; align-items:center; justify-content:space-between; gap:14px}
.stepper .b{width:52px; height:52px; border-radius:14px; background:var(--accent); color:#fff; border:0;
  font-size:26px; font-weight:700; cursor:pointer; display:grid; place-items:center}
.stepper .v{font-size:28px; font-weight:800; font-variant-numeric:tabular-nums}

/* photo picker */
.photos{display:flex; gap:10px}
.photo{width:64px; height:64px; border-radius:14px; border:1px dashed var(--line);
  background:var(--line2); display:grid; place-items:center; cursor:pointer; overflow:hidden}
.photo.cam{background:var(--accent); border:0}
.photo img{width:100%; height:100%; object-fit:cover}

/* field */
.field{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:14px 16px; box-shadow:var(--shadow)}
.field .lbl{font-size:12px; font-weight:700; letter-spacing:.5px; color:var(--muted2); text-transform:uppercase; margin-bottom:6px}
.field input,.field textarea{border:0; outline:0; width:100%; font:inherit; font-weight:700; font-size:18px; color:var(--ink); background:0}
.field textarea{font-weight:500; font-size:15px; resize:none; min-height:44px}

/* bottom nav */
.nav{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:460px;
  background:var(--card); border-top:1px solid var(--line); display:flex; padding:8px 6px calc(8px + env(safe-area-inset-bottom));}
.nav a{flex:1; text-align:center; color:var(--muted2); font-size:11px; font-weight:700; text-decoration:none; padding:4px 0}
.nav a .ic{display:block; font-size:20px; margin-bottom:2px}
.nav a.on{color:var(--accent)}

/* misc */
.center{text-align:center}
.stack>*+*{margin-top:12px}
.toast{position:fixed; left:50%; bottom:96px; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:12px; font-weight:700; font-size:14px; z-index:50; box-shadow:var(--shadow); animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.spin{width:22px; height:22px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.stat b{display:block; font-size:26px; font-weight:800}
.stat span{color:var(--muted); font-size:13px}