:root{
  --bg:#f6f8fb; --card:#ffffff; --border:#e5eaf2; --text:#0f172a; --dim:#64748b;
  --primary:#1e40af; --primary-soft:#eef2ff; --green:#059669; --green-soft:#ecfdf5;
  --red:#dc2626; --red-soft:#fef2f2; --amber:#d97706; --amber-soft:#fffbeb;
  --violet:#7c3aed; --violet-soft:#f5f3ff;
  --radius:16px; --shadow:0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.05);
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text);
     font:15px/1.55 "Fira Sans", system-ui, -apple-system, sans-serif;}
a{color:var(--primary); text-decoration:none}
.num{font-family:"Fira Code", monospace; font-variant-numeric:tabular-nums}

header{position:sticky; top:0; z-index:20; background:rgba(246,248,251,.88);
       backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
.hwrap{max-width:1240px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
h1{font-size:19px; margin:0; font-weight:650; letter-spacing:-.02em}
.h1sub{font-size:12.5px; color:var(--dim); font-weight:400; display:block; letter-spacing:0}
.chip{display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px;
      font-size:13px; font-weight:550; border:1px solid var(--border); background:var(--card)}
.chip .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(5,150,105,.15)}
.chip.on{background:var(--green-soft); border-color:#bbe9d4; color:#065f46}
.hactions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:12px;
     border:1px solid var(--border); background:var(--card); color:var(--text); font:inherit; font-size:13.5px;
     font-weight:600; cursor:pointer; min-height:42px; box-shadow:var(--shadow); transition:border-color .15s, background .15s}
.btn:hover{border-color:var(--primary)}
.btn svg{color:var(--primary)}
.btn.prim{background:var(--primary); border-color:var(--primary); color:#fff}
.btn.prim svg{color:#fff}
.btn.prim:hover{background:#1a3a9e}

main{max-width:1240px; margin:0 auto; padding:24px; display:grid; gap:18px}

/* hero */
.hero{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:960px){ .hero{grid-template-columns:1.25fr 1fr 1fr 1fr} }
.stat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
      padding:20px 22px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.stat .lbl{font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.07em; font-weight:600}
.stat .val{font-size:30px; font-weight:650; margin-top:8px; letter-spacing:-.02em; font-family:"Fira Code",monospace; font-variant-numeric:tabular-nums}
.stat .sub{font-size:13px; color:var(--dim); margin-top:4px}
.stat.accent{background:linear-gradient(135deg,#1e40af,#3b82f6); border:none; color:#fff}
.stat.accent .lbl,.stat.accent .sub{color:rgba(255,255,255,.78)}
.good{color:var(--green)} .bad{color:var(--red)} .warn{color:var(--amber)}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
      padding:22px 24px; box-shadow:var(--shadow)}
.card h2{font-size:15px; margin:0 0 4px; font-weight:650; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.card h2 .n{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
     border-radius:8px; background:var(--primary-soft); color:var(--primary); font-size:12.5px; font-weight:700; flex:none}
.card h2 .sub{font-weight:400; color:var(--dim); font-size:13px}
.card .lead{color:var(--dim); font-size:13px; margin:0 0 16px; line-height:1.6}
.grid2{display:grid; gap:18px}
@media(min-width:1000px){ .grid2{grid-template-columns:1.05fr .95fr; align-items:start} }
main > *, .hero > *, .grid2 > *{min-width:0}

/* задачи */
.grp-title{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim);
     font-weight:700; margin:16px 0 8px}
.grp-title:first-of-type{margin-top:2px}
.tasks{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tasks label{display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border-radius:12px;
     background:#f8fafc; border:1.5px solid var(--border); cursor:pointer; font-size:13.5px;
     transition:border-color .15s, background .15s}
.tasks label:hover{border-color:#c7d2e5}
.tasks label.on{border-color:var(--primary); background:var(--primary-soft)}
.tasks input{accent-color:var(--primary); width:17px; height:17px; flex:none; margin-top:2px}
.tasks .tn{font-weight:600; display:block; line-height:1.35}
.tasks .td{color:var(--dim); font-size:12px; line-height:1.5; display:block; margin-top:3px}
.tasks .ti{font-size:15px; margin-right:2px}

/* отраслевые заготовки */
.inds{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.ind{display:block; width:100%; text-align:left; font:inherit; cursor:pointer;
     padding:15px 16px; border-radius:14px; background:#f8fafc; border:1.5px solid var(--border);
     transition:border-color .15s, background .15s, box-shadow .15s}
.ind:hover{border-color:#c7d2e5; box-shadow:var(--shadow)}
.ind.on{border-color:var(--primary); background:var(--primary-soft)}
.ind-h{display:flex; align-items:center; gap:10px}
.ind-ico{width:34px; height:34px; border-radius:10px; background:#fff; border:1px solid var(--border);
     display:flex; align-items:center; justify-content:center; font-size:17px; flex:none}
.ind-nm{font-weight:650; font-size:14.5px; line-height:1.25}
.ind-sub{display:block; font-weight:400; font-size:11.5px; color:var(--dim); margin-top:2px}
.ind-pain{font-size:12.5px; color:var(--dim); line-height:1.5; margin:10px 0 0}
.ind-m{display:flex; gap:6px; flex-wrap:wrap; margin-top:11px}
.ind-m span{font-size:11.5px; padding:2px 8px; border-radius:7px; background:#fff;
     border:1px solid var(--border); color:#475569; white-space:nowrap;
     font-family:"Fira Code",monospace; font-variant-numeric:tabular-nums}
.ind-m span.pri{background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600}
.ind.on .ind-m span{background:#fff}
.ind.on .ind-m span.pri{background:var(--primary); color:#fff}

/* контролы */
.controls{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.ctl{display:inline-flex; align-items:center; gap:10px; padding:9px 14px; border-radius:12px;
     background:#f8fafc; border:1px solid var(--border); font-size:13.5px; min-height:44px}
.ctl b{font-weight:600; white-space:nowrap}
.ctl input[type=number], .ctl select{border:1px solid var(--border); border-radius:8px; padding:7px 8px;
     font:inherit; background:#fff; color:var(--text); width:92px; font-family:"Fira Code",monospace;
     font-variant-numeric:tabular-nums}
.ctl select{width:auto; font-family:inherit}
.ctl input[type=range]{accent-color:var(--primary); width:130px}
.ctl .unit{color:var(--dim); font-size:12.5px}
.segs{display:inline-flex; background:#f1f5f9; border-radius:11px; padding:3px; gap:3px; flex-wrap:wrap}
.segs button{border:none; background:transparent; font:inherit; font-size:13px; font-weight:600;
     padding:8px 14px; border-radius:9px; cursor:pointer; color:var(--dim); white-space:nowrap}
.segs button.on{background:#fff; color:var(--primary); box-shadow:0 1px 3px rgba(15,23,42,.10)}
.fieldrow{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:4px}
.field{display:flex; flex-direction:column; gap:7px}
.field > .cap{font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:5px}
.field .hintline{font-size:12px; color:var(--dim); line-height:1.5}

.info-icon{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;background:var(--primary-soft);
  color:var(--primary);font-size:11px;font-style:normal;font-weight:700;
  cursor:pointer;border:1px solid #c7d5f8;flex:none;user-select:none;line-height:1;
  transition:background .15s,color .15s}
.info-icon:hover,.info-icon:focus-visible{background:var(--primary);color:#fff;outline:none}

/* таблицы */
.twrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; color:var(--dim); font-weight:600; font-size:11px; text-transform:uppercase;
   letter-spacing:.04em; padding:7px; border-bottom:1px solid var(--border); white-space:nowrap}
td{padding:7px; border-bottom:1px solid #eef2f7; vertical-align:top}
td.r, th.r{text-align:right; white-space:nowrap; font-family:"Fira Code",monospace; font-variant-numeric:tabular-nums}
th.r{font-family:inherit}
tbody tr:hover td{background:#f8fafc}
tfoot td{border-top:2px solid var(--border); border-bottom:none; font-weight:650; background:#f8fafc}
.twrap table{min-width:520px}
.tag{display:inline-block; padding:1.5px 8px; border-radius:999px; font-size:11.5px; font-weight:550;
     background:#eef2f7; color:#334155; white-space:nowrap}
.tag.b{background:var(--primary-soft); color:var(--primary)}
.tag.g{background:var(--green-soft); color:#065f46}
.tag.a{background:var(--amber-soft); color:#92400e}
.tag.v{background:var(--violet-soft); color:#5b21b6}
.note{color:var(--dim); font-size:12px; line-height:1.5}

/* модели */
.mlist{display:grid; gap:10px}
.mrow{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start;
      padding:13px 15px; border:1px solid var(--border); border-radius:13px; background:#f8fafc}
.mrow.main{border-color:#c7d5f8; background:var(--primary-soft)}
.mrow .role{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); font-weight:700}
.mrow .nm{font-weight:650; font-size:14.5px; margin-top:2px}
.mrow .dsc{font-size:12.5px; color:var(--dim); line-height:1.55; margin-top:5px}
.mrow .meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.mrow .badge{font-size:11px; padding:2px 8px; border-radius:7px; background:#fff; border:1px solid var(--border); color:#475569; white-space:nowrap}
.mico{width:38px; height:38px; border-radius:11px; background:#fff; border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center; font-size:18px; flex:none}

/* полоса видеопамяти */
.vbar{display:flex; height:30px; border-radius:9px; overflow:hidden; border:1px solid var(--border); background:#f1f5f9; margin:6px 0 10px}
.vbar span{display:block; height:100%; font-size:11px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; overflow:hidden; white-space:nowrap}
.vlegend{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--dim)}
.vlegend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}

.kv{display:grid; grid-template-columns:auto 1fr; gap:7px 14px; font-size:13.5px; align-items:baseline}
.kv .k{color:var(--dim)}
.kv .v{font-family:"Fira Code",monospace; font-variant-numeric:tabular-nums; font-weight:600; text-align:right}

.hint{color:var(--dim); font-size:12.5px; line-height:1.65; margin:14px 0 0;
      padding:12px 14px; border-radius:12px; background:#f8fafc; border:1px dashed var(--border)}
.hint b{color:var(--text); font-weight:600}
.warnbox{background:var(--amber-soft); border:1px solid #fde68a; color:#78350f; border-style:solid}

/* этапы */
.steps{display:grid; gap:0}
.step{display:grid; grid-template-columns:34px 1fr auto; gap:13px; padding:13px 0; border-bottom:1px solid #eef2f7; align-items:start}
.step:last-child{border-bottom:none}
.step .sn{width:28px; height:28px; border-radius:9px; background:var(--primary-soft); color:var(--primary);
     display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex:none}
.step .snm{font-weight:600; font-size:14px}
.step .sd{font-size:12.5px; color:var(--dim); line-height:1.55; margin-top:4px}
.step .sv{text-align:right; white-space:nowrap; font-family:"Fira Code",monospace; font-variant-numeric:tabular-nums; font-size:13px}
.step .sv b{display:block; font-weight:650}
.step .sv span{color:var(--dim); font-size:12px}

/* сравнение TCO */
.bars{display:grid; gap:12px; margin-top:6px}
.barrow{display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:center; font-size:13px}
.bartrack{background:#f1f5f9; border-radius:8px; height:34px; position:relative; overflow:hidden}
.barfill{height:100%; border-radius:8px; display:flex; align-items:center; padding:0 11px; color:#fff;
     font-family:"Fira Code",monospace; font-weight:600; font-size:12.5px; white-space:nowrap; transition:width .4s}

/* форма */
.form{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.form input, .form textarea{border:1px solid var(--border); border-radius:11px; padding:11px 13px; font:inherit;
     background:#fff; color:var(--text); width:100%; min-height:44px}
.form textarea{grid-column:1/-1; min-height:84px; resize:vertical}
.form input:focus, .form textarea:focus{outline:2px solid var(--primary); outline-offset:-1px; border-color:var(--primary)}
.formmsg{font-size:13px; margin-top:10px}

/* модалка */
.modal{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center}
.modal[hidden]{display:none}
.modal-back{position:absolute; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(3px)}
.modal-sheet{position:relative; background:var(--card); border-radius:20px; width:min(720px, calc(100% - 28px));
     max-height:88vh; overflow-y:auto; padding:24px; box-shadow:0 24px 64px rgba(15,23,42,.25)}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px}
.modal-head h3{font-size:17px; font-weight:650; margin:0}
.btn-close{border:none; background:#f1f5f9; border-radius:10px; width:38px; height:38px; cursor:pointer;
     display:inline-flex; align-items:center; justify-content:center; color:var(--dim); font-size:18px; flex:none}
.btn-close:hover{background:#e2e8f0; color:var(--text)}
.modal-body{font-size:13.5px; line-height:1.65}
.modal-body p{margin:0 0 10px}
.prices{display:grid; gap:10px}
.prow{display:grid; grid-template-columns:1fr 130px; gap:12px; align-items:center; font-size:13px}
.prow input{border:1px solid var(--border); border-radius:9px; padding:8px 10px; font:inherit;
     font-family:"Fira Code",monospace; font-variant-numeric:tabular-nums; text-align:right; width:100%}
.psec{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); font-weight:700; margin-top:10px}

footer{max-width:1240px; margin:0 auto; padding:10px 24px 40px; color:var(--dim); font-size:12.5px; line-height:1.7}

@media(max-width:640px){
  .hwrap{padding:10px 14px; gap:8px}
  h1{font-size:17px}
  main{padding:14px 12px; gap:14px}
  .card{padding:16px 14px; border-radius:14px}
  .stat{padding:16px}
  .stat .val{font-size:25px}
  .tasks{grid-template-columns:1fr}
  .ctl{width:100%; justify-content:space-between}
  .mrow{grid-template-columns:auto 1fr}
  .barrow{grid-template-columns:1fr; gap:4px}
  .modal{align-items:flex-end}
  .modal-sheet{width:100%; border-radius:20px 20px 0 0; max-height:92vh; padding:18px 16px}
}
@media(prefers-reduced-motion:reduce){ *{transition:none !important} }

@media print{
  header .hactions, .no-print, .tasks input, .segs, footer .no-print{display:none !important}
  body{background:#fff}
  .card, .stat{box-shadow:none; break-inside:avoid; page-break-inside:avoid}
  header{position:static}
  main{max-width:none; padding:0}
  .twrap table{min-width:0}
}