/* Розовая тема «Бонусы» — портирована из утверждённого макета Луны (mockup-app-step1.html).
   Акцент #d81f6a. Это приложение, не таблица. */
:root{
  --ink:#2b1a26; --ink-soft:#6f5b67; --muted:#9a8791;
  --rose:#d81f6a; --rose-deep:#ab1352; --rose-050:#fdeef5; --rose-100:#fbdbe8; --rose-200:#f6c2d8;
  --paper:#fffdfe; --bg:#f6edf2; --line:#f0dbe6; --line2:#f6e7ef;
  --money:#0f7a4d; --money-050:#e4f4ec;
  --amber:#a86a12; --amber-050:#fbf0da;
  --indigo:#454dae; --indigo-050:#e9eafb;
  --slate:#6b7280; --slate-050:#eef0f2;
  --shadow:0 6px 22px rgba(120,20,70,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Segoe UI","Liberation Sans","DejaVu Sans",sans-serif;
  color:var(--ink);background:#efe3ea;font-size:14px;line-height:1.5}
a{color:var(--rose-deep)}
.num{font-variant-numeric:tabular-nums}

/* app frame */
.app{max-width:1080px;margin:26px auto;background:var(--bg);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.bar{display:flex;align-items:center;gap:14px;padding:12px 18px;background:var(--paper);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 4px var(--rose-100)}
.brand small{font-weight:600;color:var(--muted);font-size:11px;letter-spacing:.02em;margin-left:2px}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{font-size:13px;color:var(--ink-soft);text-decoration:none;padding:6px 11px;border-radius:8px}
.nav a.on{background:var(--rose-050);color:var(--rose-deep);font-weight:700}
.nav a.soon{color:var(--muted)}
.nav a.soon::after{content:"скоро";font-size:9px;background:var(--slate-050);color:var(--slate);
  border-radius:6px;padding:1px 5px;margin-left:5px;vertical-align:1px}
.who{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft)}
.who a{color:var(--ink-soft);text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:4px 9px}
.who .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--rose),#f48fb6);
  color:#fff;font-weight:700;display:grid;place-items:center;font-size:12px;text-transform:uppercase}

.body{padding:20px 22px 24px}

/* flashes */
.flashes{margin-bottom:14px}
.flash{padding:9px 13px;border-radius:10px;margin-bottom:8px;font-size:12.5px;border:1px solid transparent}
.flash-error{background:#fdecec;color:#b3261e;border-color:#f6c9c9}
.flash-success{background:var(--money-050);color:var(--money);border-color:#bfe6d2}
.flash-info{background:var(--indigo-050);color:var(--indigo);border-color:#cdd0f4}

/* --- Screen A: list --- */
.head-row{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.head-row h3{font-size:22px;margin:0;letter-spacing:-.02em}
.head-row .sub{color:var(--muted);font-size:13px;margin-bottom:2px}
.btn{border:none;border-radius:10px;padding:9px 15px;font-size:13px;font-weight:700;cursor:pointer;
  text-decoration:none;display:inline-block;line-height:1.2}
.btn.primary{background:var(--rose);color:#fff;box-shadow:0 3px 10px rgba(216,31,106,.28)}
.btn.ghost{background:#fff;color:var(--rose-deep);border:1px solid var(--rose-200)}
.btn.danger{background:#fff;color:#b3261e;border:1px solid #f0c4c4}
.btn.add{margin-left:auto}

.periodbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.periodbar .pl{font-size:12.5px;color:var(--muted);font-weight:700;letter-spacing:.02em}
.qtabs{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.qtabs a{border:none;background:var(--paper);padding:7px 15px;font-size:13px;font-weight:700;color:var(--ink-soft);
  cursor:pointer;border-right:1px solid var(--line);text-decoration:none}
.qtabs a:last-child{border-right:none}
.qtabs a.on{background:var(--rose);color:#fff}
.ydrop{border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:13px;font-weight:700;
  background:var(--paper);color:var(--ink)}
.periodbar .note{color:var(--muted);font-size:11.5px;margin-left:auto}

.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:13px 15px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line)}
.stat.c-all::before{background:var(--slate)} .stat.c-work::before{background:var(--rose)}
.stat.c-unprot::before{background:var(--amber)} .stat.c-done::before{background:var(--indigo)} .stat.c-paid::before{background:var(--money)}
.stat .l{font-size:11px;color:var(--muted);letter-spacing:.02em;text-transform:uppercase}
.stat .v{font-size:26px;font-weight:800;margin-top:3px;letter-spacing:-.02em;line-height:1}
.stat .v.money{color:var(--money)} .stat .v.rose{color:var(--rose-deep)}
.stat .v.amber{color:var(--amber)} .stat .v.indigo{color:var(--indigo)}

.filters{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.search{flex:0 0 250px;border:1px solid var(--line);border-radius:10px;padding:8px 11px 8px 30px;background:
  var(--paper) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="%239a8791" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') 9px center no-repeat;font-size:13px}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:20px;padding:6px 13px;font-size:12.5px;
  color:var(--ink-soft);cursor:pointer;text-decoration:none}
.chip.on{background:var(--rose);border-color:var(--rose);color:#fff;font-weight:700}

.empty{background:var(--paper);border:1px dashed var(--line);border-radius:14px;padding:34px;text-align:center;color:var(--muted)}

/* project card */
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:15px 17px 15px 20px;
  margin-bottom:12px;display:grid;grid-template-columns:1.4fr 2.2fr 1.5fr;gap:18px;align-items:center;position:relative;overflow:hidden;
  color:inherit;text-decoration:none}
.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.pc-plan::before{background:var(--slate)} .pc-part::before{background:var(--amber)}
.pc-prot::before{background:var(--rose)} .pc-done::before{background:var(--indigo)} .pc-paid::before{background:var(--money)}
.pcard:hover{box-shadow:var(--shadow)}
.pc-name{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.pc-lead{margin-top:5px;font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:5px}
.pc-lead .li{width:17px;height:17px;border-radius:50%;background:var(--rose-100);color:var(--rose-deep);
  display:grid;place-items:center;font-size:10px;font-weight:700;text-transform:uppercase}
.money-grid{display:flex;gap:20px}
.mg{min-width:70px}
.mg .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.mg .v{font-size:14.5px;font-weight:700;margin-top:2px}
.mg.bonus .v{color:var(--rose-deep);font-size:16px}
.mg .v .cur{font-size:11px;color:var(--muted);font-weight:600}
.mg.bonus .sub-prot{font-size:10.5px;color:var(--amber);font-weight:700;margin-top:3px;white-space:nowrap}
.pc-right{display:flex;flex-direction:column;align-items:flex-end;gap:9px}

.badge{border-radius:20px;padding:4px 11px;font-size:11.5px;font-weight:700;white-space:nowrap}
.b-plan{background:var(--slate-050);color:var(--slate)}
.b-part{background:var(--amber-050);color:var(--amber)}
.b-prot{background:var(--rose-050);color:var(--rose-deep)}
.b-done{background:var(--indigo-050);color:var(--indigo)}
.b-paid{background:var(--money-050);color:var(--money)}

/* lifecycle track (signature) */
.track{display:flex;align-items:center;gap:0;width:100%;max-width:290px}
.track .step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;width:34px}
.track .node{width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid var(--line);position:relative;z-index:1}
.track .lbl{font-size:9px;color:var(--muted);white-space:nowrap;letter-spacing:.01em}
.track .link{height:2px;background:var(--line);flex:1;margin:0 -2px 15px}
.track .step.done .node{background:var(--rose);border-color:var(--rose)}
.track .step.done .lbl{color:var(--rose-deep);font-weight:700}
.track .step.part .node{background:var(--amber);border-color:var(--amber)}
.track .step.part .lbl{color:var(--amber);font-weight:700}
.track .step.paid .node{background:var(--money);border-color:var(--money)}
.track .step.paid .lbl{color:var(--money);font-weight:700}
.track .link.fill{background:var(--rose)} .track .link.fillg{background:var(--money)}
.track .step.now .node{box-shadow:0 0 0 4px var(--rose-100)}

/* --- Screen B: form --- */
.crumb{color:var(--muted);font-size:12.5px;margin-bottom:3px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb b{color:var(--ink)}
.form-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start}
.fcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px}
.fcard h4{margin:0 0 14px;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--rose-deep)}
.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:5px;font-weight:600}
.input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;background:#fff;color:var(--ink)}
.input:focus{outline:2px solid var(--rose);border-color:transparent}
.input.money-in{font-variant-numeric:tabular-nums;font-weight:700}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:11.5px;color:var(--muted);margin-top:5px}
.hint b{color:var(--rose-deep)}

/* segmented control via radios */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.seg label{margin:0;font-weight:600;color:var(--ink-soft)}
.seg label span{display:block;padding:8px 15px;font-size:13px;cursor:pointer;border-right:1px solid var(--line)}
.seg label:last-child span{border-right:none}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg input:checked + span{background:var(--rose);color:#fff}
.seg.sm label span{padding:6px 12px;font-size:12.5px}
.seg.on-amber input:checked + span{background:var(--amber)}
.seg.on-money input:checked + span{background:var(--money)}

.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line2)}
.toggle-row:first-of-type{border-top:none}
.toggle-row .tl{font-size:13.5px;font-weight:600}
.toggle-row .td{font-size:11.5px;color:var(--muted);margin-top:2px}

.soon-card{background:repeating-linear-gradient(135deg,#fbf3f8,#fbf3f8 10px,#f9edf4 10px,#f9edf4 20px);
  border:1px dashed var(--rose-200);border-radius:14px;padding:16px;color:var(--ink-soft)}
.soon-card .st{font-weight:800;color:var(--rose-deep);font-size:13px;display:flex;align-items:center;gap:7px}
.soon-card .pill{background:var(--rose);color:#fff;font-size:10px;font-weight:700;border-radius:8px;padding:1px 7px}
.soon-card p{margin:8px 0 0;font-size:12.5px}

.form-actions{display:flex;gap:10px;margin-top:16px;justify-content:flex-end;align-items:center}
.form-actions .del{margin-right:auto}

.track-lg{margin:6px 0 14px}
.track-lg .step{width:76px}
.track-lg .lbl{font-size:11px}
.track-lg .node{width:18px;height:18px}

/* --- Screen C: login --- */
.login-wrap{max-width:1080px;margin:26px auto;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  background:radial-gradient(1200px 500px at 20% -10%,var(--rose-100),transparent),
  radial-gradient(900px 500px at 100% 120%,#ffe3ef,transparent),var(--bg);
  border:1px solid var(--line);display:grid;place-items:center;padding:52px 20px}
.login{width:340px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px 24px;box-shadow:var(--shadow)}
.login .brand{justify-content:center;font-size:19px;margin-bottom:4px}
.login .lg-t{text-align:center;color:var(--muted);font-size:12.5px;margin-bottom:20px}
.login .btn.primary{width:100%;margin-top:6px;padding:11px}
.login .help{text-align:center;font-size:11.5px;color:var(--muted);margin-top:14px}

.foot{max-width:1080px;margin:14px auto 30px;color:var(--muted);font-size:11.5px;text-align:center}

@media(max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .pcard{grid-template-columns:1fr;gap:12px}
  .pc-right{align-items:flex-start}
  .form-grid{grid-template-columns:1fr}
  .track{max-width:none}
}

/* ============ Этап 2 — разбивка бонуса (из макета Луны) ============ */
.note-inf{background:var(--rose-050);color:var(--rose-deep);border:1px solid var(--rose-100);border-radius:12px;padding:9px 13px;font-size:12px;margin-bottom:16px}
.note-inf.blue{background:var(--indigo-050);color:var(--indigo);border-color:#d6d9f6}
.linkpill{font-size:12px;color:var(--rose-deep);font-weight:700;background:var(--rose-050);border:1px solid var(--rose-100);border-radius:20px;padding:4px 10px}
.av.fin{background:linear-gradient(135deg,var(--indigo),#8b8fdb)!important}

/* status flow */
.flow{display:inline-flex;align-items:center;font-size:11px;margin-bottom:16px}
.flow .s{padding:4px 11px;border-radius:20px;background:var(--slate-050);color:var(--slate);font-weight:700}
.flow .arr{color:#cbb9c4;margin:0 7px;font-size:12px}
.flow .s.draft.on{box-shadow:0 0 0 2px var(--slate) inset}
.flow .s.def.on{background:var(--amber-050);color:var(--amber);box-shadow:0 0 0 2px var(--amber) inset}
.flow .s.appr.on{background:var(--money-050);color:var(--money);box-shadow:0 0 0 2px var(--money) inset}

/* project pick + bonus box */
.proj-pick{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.proj-pick .f{flex:1;min-width:240px}
.proj-pick select.input{font-weight:700}
.bonus-box{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:170px}
.bonus-box .l{font-size:10.5px;color:var(--muted);text-transform:uppercase}
.bonus-box .v{font-size:19px;font-weight:800;color:var(--rose-deep);margin-top:2px}
.bonus-box .v .cur{font-size:12px;color:var(--muted)}
.bonus-box .q{font-size:10.5px;color:var(--muted);margin-top:2px}

/* split table */
.sptable{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px 14px 14px;margin-bottom:14px}
.sh,.srow{display:grid;grid-template-columns:1.4fr 0.7fr 0.95fr 1.25fr 32px;gap:10px;align-items:center}
.sh{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;padding:8px 2px 8px}
.sh .r{text-align:right}
.srow{margin-bottom:8px}
.srow .input{padding:9px 11px;font-size:13.5px}
.srow .pct-in{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.auto{background:var(--rose-050);border:1px solid var(--rose-100);border-radius:9px;padding:9px 11px;font-size:13.5px;font-weight:800;color:var(--rose-deep);text-align:right;font-variant-numeric:tabular-nums}
.del-x{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--rose);cursor:pointer;display:grid;place-items:center;font-size:14px;justify-self:center}
.add-row{margin-top:2px;border:1px dashed var(--rose-200);background:var(--rose-050);color:var(--rose-deep);border-radius:9px;padding:9px 12px;font-size:13px;font-weight:700;cursor:pointer;width:100%}

.distrib{display:flex;align-items:center;gap:14px;margin:14px 0 6px;flex-wrap:wrap}
.distrib .lbl{font-size:12.5px;font-weight:700}
.bar-t{height:9px;border-radius:6px;background:var(--line);overflow:hidden;flex:1;min-width:180px}
.bar-t .fill{height:100%;border-radius:6px}
.fill.money{background:var(--money)} .fill.amber{background:var(--amber)}
.pct-big{font-size:15px;font-weight:800}
.ok{color:var(--money)} .warn{color:var(--amber)}

.actions{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.actions .grow{flex:1}
.b-draft{background:var(--slate-050);color:var(--slate)} .b-def{background:var(--amber-050);color:var(--amber)} .b-appr{background:var(--money-050);color:var(--money)}

/* защита (nee) defcard */
.defcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.dc-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-left:5px solid var(--amber)}
.dc-head .nm{font-size:15px;font-weight:700}
.dc-head .from{font-size:12px;color:var(--ink-soft);margin-top:3px}
.dc-head .rt{margin-left:auto;display:flex;align-items:center;gap:10px}
.dc-body{border-top:1px solid var(--line2);background:#fffafc;padding:14px 16px 16px}

/* финдир fincard */
.fincard{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:12px;box-shadow:var(--shadow)}
.fc-top{background:linear-gradient(135deg,#fff,var(--rose-050));padding:16px 18px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line)}
.fc-top .nm{font-size:17px;font-weight:800;letter-spacing:-.01em}
.fc-top .ld{font-size:12px;color:var(--ink-soft);margin-top:3px}
.fc-top .bx{margin-left:auto;text-align:right}
.fc-top .bx .l{font-size:10.5px;color:var(--muted);text-transform:uppercase}
.fc-top .bx .v{font-size:20px;font-weight:800;color:var(--rose-deep)}
.fc-top .bx .v .cur{font-size:12px;color:var(--muted)}
.fc-people{padding:6px 18px 8px}
.prow{display:grid;grid-template-columns:1.5fr 1.3fr 0.6fr 1fr;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line2)}
.prow:last-child{border-bottom:none}
.prow .pn{font-weight:700}
.prow .pr{color:var(--ink-soft);font-size:12.5px}
.prow .pp{text-align:right;font-weight:700;color:var(--indigo)}
.prow .pm{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.prow .pm .cur{color:var(--muted);font-size:11px;font-weight:600}
.fc-foot{display:flex;align-items:center;gap:10px;padding:12px 18px;background:#fdfafc;border-top:1px solid var(--line)}
.fc-foot .tot{font-weight:800;font-variant-numeric:tabular-nums}
.fc-foot .tot .cur{color:var(--muted);font-size:12px;font-weight:600}

/* stats (финдир) — 4 колонки */
.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.stats4 .stat::before{width:4px}
.stat.s-plan::before{background:var(--rose)} .stat.s-prot::before{background:var(--amber)} .stat.s-paid::before{background:var(--money)} .stat.s-split::before{background:var(--indigo)}
@media(max-width:760px){.stats4{grid-template-columns:repeat(2,1fr)} .sh,.srow{grid-template-columns:1fr 0.6fr 0.9fr 32px} .sh span:nth-child(4),.srow .comment-in{display:none}}