@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#0A0D0F; --panel:#12171B; --panel-2:#161C21; --line:#1E262B;
  --accent:#3ECF6E; --accent-dim:#235436; --warn:#FF9B4D; --danger:#FF6A5C;
  --text:#E7ECEE; --muted:#8A97A0; --faint:#5A6670;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:
    repeating-linear-gradient(0deg, var(--line) 0px, transparent 1px, transparent 32px, var(--line) 33px),
    repeating-linear-gradient(90deg, var(--line) 0px, transparent 1px, transparent 32px, var(--line) 33px),
    var(--bg);
  background-size:33px 33px, 33px 33px, cover;
  color:var(--text); font-family:'Manrope',sans-serif; min-height:100vh; padding:24px 16px 70px;
}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{max-width:1200px; margin:0 auto;}
.top{display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:22px; flex-wrap:wrap; gap:10px;}
.brand{display:flex; align-items:baseline; gap:10px;}
.brand .mark{width:10px; height:10px; border-radius:2px; background:var(--accent); box-shadow:0 0 8px 1px var(--accent); display:inline-block; transform:translateY(-2px);}
.brand h1{font-size:19px; font-weight:800; letter-spacing:0.02em;}
.brand .sub{color:var(--muted); font-size:12.5px;}
.top .meta{color:var(--faint); font-size:11.5px; text-align:right; font-family:'JetBrains Mono',monospace;}

.grid{display:grid; grid-template-columns:420px 1fr; gap:18px; align-items:start;}
@media (max-width:920px){ .grid{grid-template-columns:1fr;} }

.panel{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px;}
.sticky{position:sticky; top:16px;}

.step{margin-bottom:22px;}
.step:last-child{margin-bottom:0;}
.step-head{display:flex; align-items:center; gap:9px; margin-bottom:10px;}
.step-head .n{width:19px; height:19px; border:1px solid var(--accent-dim); border-radius:4px; display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:10.5px; font-family:'JetBrains Mono',monospace; flex-shrink:0;}
.step-head .t{font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.07em; color:var(--accent); text-transform:uppercase;}
.step-head .req{color:var(--danger);}

.field{margin-bottom:12px;}
.field:last-child{margin-bottom:0;}
.field label{display:block; font-size:11.5px; color:var(--muted); margin-bottom:5px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:8px;}

input[type=number], select{width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:9px 11px; font-size:13.5px; font-family:'JetBrains Mono',monospace;}
input[type=number]:focus, select:focus, .pill:focus-visible, .opt:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
select{appearance:none;}
input.inline-num{width:64px; padding:5px 7px; font-size:12px;}

.pillrow{display:flex; flex-wrap:wrap; gap:6px;}
.pill{background:var(--bg); border:1px solid var(--line); color:var(--muted); padding:7px 11px; border-radius:6px; font-size:12.5px; cursor:pointer; font-family:'JetBrains Mono',monospace; transition:border-color .12s,color .12s;}
.pill:hover{border-color:var(--accent-dim); color:var(--text);}
.pill.active{border-color:var(--accent); color:var(--accent); background:rgba(62,207,110,0.08);}
.pill.disabled{opacity:0.35; pointer-events:none;}
.toggle2{display:grid; grid-template-columns:1fr 1fr; gap:7px;}
.toggle3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px;}
.toggle2 .pill, .toggle3 .pill{text-align:center;}

.hint{font-size:11px; color:var(--faint); margin-top:5px; line-height:1.45;}
.warnbox{font-size:11px; color:var(--warn); background:rgba(255,155,77,0.08); border:1px solid rgba(255,155,77,0.25); padding:7px 9px; border-radius:6px; margin-top:7px; line-height:1.45;}
.infobox{font-size:11px; color:var(--accent); background:rgba(62,207,110,0.06); border:1px solid var(--accent-dim); padding:7px 9px; border-radius:6px; margin-top:7px; line-height:1.45;}

/* компактный список выбора — модуль / видеопроцессор / карта */
.opt-list{display:flex; flex-direction:column; gap:5px; max-height:230px; overflow-y:auto; padding-right:2px;}
.opt{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; cursor:pointer; background:var(--bg); transition:border-color .12s;}
.opt:hover{border-color:var(--accent-dim);}
.opt.selected{border-color:var(--accent); background:rgba(62,207,110,0.07);}
.opt .oleft{min-width:0;}
.opt .oname{font-size:12.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.opt .ometa{font-size:10.5px; color:var(--faint); margin-top:1px;}
.opt .oprice{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--accent); white-space:nowrap; flex-shrink:0;}

/* правая колонка — результат */
.drawbox{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start;}
.drawbox svg{flex-shrink:0;}
.badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
.badge{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--muted); border:1px solid var(--line); padding:3px 8px; border-radius:20px;}

.total-box{margin-top:16px; background:radial-gradient(circle at 20% 20%, rgba(62,207,110,0.05), transparent 60%), var(--bg); border:1px solid var(--accent-dim); border-radius:10px; padding:20px; position:relative; overflow:hidden;}
.total-box::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 2px, transparent 4px); pointer-events:none;}
.total-label{font-size:10.5px; letter-spacing:0.13em; color:var(--faint); text-transform:uppercase; margin-bottom:7px;}
.total-value{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:38px; color:var(--accent); text-shadow:0 0 6px rgba(62,207,110,0.5), 0 0 18px rgba(62,207,110,0.22);}
@media (prefers-reduced-motion:no-preference){
  .flicker{animation:flicker .8s ease-out;}
  @keyframes flicker{0%{opacity:.2;}15%{opacity:1;}30%{opacity:.4;}45%{opacity:1;}100%{opacity:1;}}
}
.total-note{font-size:11.5px; color:var(--faint); margin-top:9px; line-height:1.5;}
.total-note b{color:var(--warn); font-weight:600;}

.bom{margin-top:14px;}
.bom-row{display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; gap:10px;}
.bom-row:last-child{border-bottom:none;}
.bom-row .left{flex:1; min-width:0;}
.bom-row .rname{color:var(--text);}
.bom-row .rdesc{color:var(--faint); font-size:11px; display:block; margin-top:2px;}
.bom-row .ramount{font-family:'JetBrains Mono',monospace; color:var(--text); white-space:nowrap; text-align:right; min-width:105px;}
.bom-row .ramount.tbd{color:var(--warn); font-size:11.5px;}

.section-title{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.07em; color:var(--muted); text-transform:uppercase; margin:16px 0 8px;}
.footer-note{margin-top:26px; padding-top:14px; border-top:1px solid var(--line); color:var(--faint); font-size:11px; line-height:1.6;}

.modal-overlay{position:fixed; inset:0; background:rgba(5,7,8,0.72); display:flex; align-items:center; justify-content:center; z-index:100; padding:16px;}
.modal-box{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px; width:100%; max-width:360px;}
.modal-title{font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:0.05em; color:var(--text); text-transform:uppercase; margin-bottom:14px;}
.modal-check{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text); margin-bottom:11px; cursor:pointer;}
.modal-check input{width:15px; height:15px; accent-color:var(--accent); cursor:pointer;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}