dialog{width:min(780px,calc(100% - 24px))}
#order-form{position:relative;isolation:isolate;padding:28px 30px 30px;gap:20px}
#order-form{font-family:"Segoe UI Variable Text","Segoe UI",Arial,sans-serif}
.dialog-head{align-items:flex-start;margin-bottom:2px}
.build-diagram{margin:2px 0 6px;padding:14px 16px}
#order-form>label{gap:8px}
#order-form input,#order-form textarea{padding:13px 14px}
#order-form .consent{margin:0 4px;gap:10px}
#order-form>.primary-button{margin-top:4px}
.diagram-icon{stroke-width:1.8;vector-effect:non-scaling-stroke}
.build-diagram text{font-family:"Segoe UI Variable Text","Segoe UI",Arial,sans-serif;text-rendering:geometricPrecision}
.build-diagram .diagram-label{font-size:7.6px;font-weight:650;letter-spacing:.085em}
.build-diagram .diagram-value{font-size:10.4px;font-weight:720;letter-spacing:-.018em}
.diagram-core .diagram-value{font-weight:760}
.diagram-links path{stroke-dasharray:5 6;stroke-dashoffset:120}
.diagram-links{pointer-events:none}
.diagram-item{cursor:grab;touch-action:none;user-select:none;transform-box:view-box;will-change:transform}
.diagram-item.dragging{cursor:grabbing}
.diagram-item:focus{outline:none}
.diagram-item:focus>rect{stroke:#75caff;stroke-width:2}
.diagram-item{opacity:0}
.diagram-active .diagram-links path{animation:diagram-flow .8s ease-out forwards,diagram-wave 2.4s .8s linear infinite}
.diagram-active .diagram-item{animation:diagram-node-in .32s cubic-bezier(.2,.75,.3,1) forwards}
.diagram-active .diagram-cpu-node{animation-delay:.05s}
.diagram-active .diagram-ram-node{animation-delay:.1s}
.diagram-active .diagram-board-node{animation-delay:.15s}
.diagram-active .diagram-psu-node{animation-delay:.2s}
.diagram-active .diagram-gpu-node{animation-delay:.25s}
.diagram-active .diagram-storage-node{animation-delay:.3s}
.diagram-active .diagram-icon{animation:diagram-icon-glow .7s ease-out both}
@keyframes diagram-flow{to{stroke-dashoffset:0}}
@keyframes diagram-wave{0%{stroke-dashoffset:0;stroke-opacity:.68}50%{stroke-opacity:1}100%{stroke-dashoffset:-44;stroke-opacity:.68}}
@keyframes diagram-node-in{from{opacity:0;filter:brightness(.65)}to{opacity:1;filter:brightness(1)}}
@keyframes diagram-icon-glow{0%{opacity:.35}100%{opacity:1}}
@media(min-width:700px){#order-form{grid-template-columns:1fr 1fr}.dialog-head,.build-diagram,#order-form>label:nth-of-type(3),#order-form>label:nth-of-type(4),#order-form>.consent,.order-status,#order-form>.primary-button{grid-column:1/-1}}
@media(max-width:699px){#order-form{padding:20px 18px;gap:15px}.build-diagram{padding:8px}}
@media(prefers-reduced-motion:reduce){.diagram-active .diagram-links path,.diagram-active .diagram-item,.diagram-active .diagram-icon{animation:none}.diagram-item{opacity:1}.diagram-links path{stroke-dashoffset:0}}
.order-success[hidden]{display:none}
#order-form.order-success-active>:not(.order-success){filter:blur(9px);opacity:.2;pointer-events:none;user-select:none}
.order-success{position:absolute;z-index:20;inset:0;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px 34px;overflow:auto;border-radius:18px;background:rgba(5,11,21,.62);backdrop-filter:blur(12px);text-align:center}
.order-success:focus{outline:none}
.order-success-animation{display:block;width:min(460px,100%);height:auto;aspect-ratio:2/1;object-fit:contain}
.order-success-copy{max-width:560px}
.order-success-copy h2{margin:6px 0 8px;font-size:clamp(26px,4vw,38px);line-height:1.05}
.order-success-copy p{margin:0;color:#a9b9ce;font-size:14px;line-height:1.55}
.order-success-contacts{width:min(590px,100%);display:grid;grid-template-columns:1fr 1fr;gap:10px}
.order-success-contact{--contact-color:#e7f3ff;--contact-rgb:231,243,255;min-height:58px;display:flex;align-items:center;gap:11px;padding:10px 13px;border:1px solid rgba(var(--contact-rgb),.2);border-radius:12px;background:rgba(var(--contact-rgb),.065);color:var(--contact-color);text-align:left;text-decoration:none;transition:border-color .2s ease,background .2s ease,transform .2s ease}
.order-success-contact:hover{border-color:rgba(var(--contact-rgb),.42);background:rgba(var(--contact-rgb),.12);transform:translateY(-1px)}
.order-success-contact:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.order-success-contact>svg,.order-success-contact>img{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;object-fit:contain}
.order-success-contact span{display:grid;font-size:12px;font-weight:800}
.order-success-contact strong{font:inherit}
.order-success-contact small{color:inherit;opacity:.62;font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.order-success-contact--phone{--contact-color:#34d399;--contact-rgb:52,211,153}
.order-success-contact--email{--contact-color:#f1f5f9;--contact-rgb:241,245,249}
.order-success-contact--max{--contact-color:#a855f7;--contact-rgb:168,85,247}
.order-success-contact--telegram{--contact-color:#38bdf8;--contact-rgb:56,189,248}
.order-success-actions{width:min(590px,100%);display:grid;grid-template-columns:1fr 1fr;gap:10px}
.order-success-actions .primary-button,.order-success-actions .secondary-button{min-height:48px;display:flex;align-items:center;justify-content:center;margin:0;padding:10px 16px;text-decoration:none}
@media(max-width:560px){.order-success{justify-content:flex-start;padding:22px 16px}.order-success-animation{width:100%}.order-success-contacts,.order-success-actions{grid-template-columns:1fr}.order-success-copy h2{font-size:26px}}