/* Purpose-built controls styling for Flows catalogue */
.eng-flow-heading { max-width:820px; margin-inline:auto; text-align:center; margin-bottom: 40px; }
.eng-flow-heading .lead { margin-inline:auto; }
.eng-kicker { display:block; color:var(--eng-accent, #aabaff); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing: normal; margin-bottom:20px; }
.eng-benefits .card { padding:28px; overflow:hidden; background:linear-gradient(150deg,#131827,#0b101c); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); }
.eng-ui { height:188px; position:relative; display:flex; align-items:center; justify-content:center; margin:-4px -4px 28px; pointer-events:none; user-select:none; background:radial-gradient(ellipse at center,rgba(124,151,240,.1),transparent 72%); }
.eng-ui-window,.eng-ui-sheet { width:220px; max-width:90%; border:1px solid #333e58; border-radius:12px; background:linear-gradient(145deg,#1c2435,#101622); box-shadow:0 16px 36px #0005; overflow:hidden; }
.eng-ui-bar { display:flex; gap:4px; align-items:center; height:26px; padding-inline:12px; border-bottom:1px solid #ffffff09; }
.eng-ui-bar i { width:4px; height:4px; border-radius:50%; background:#63708a; }
.eng-ui-bar i:first-child { background:#aabaff; }
.eng-ui-canvas { height:85px; margin:12px 16px 8px; border-radius:5px; background:linear-gradient(135deg,#24334b,#3b4b65 55%,#1a263a); display:grid; place-items:center; }
.eng-ui-crop { width:62%; height:65px; border:1px solid #bbcaff; box-shadow:0 0 0 12px #0b112b40; position:relative; background:linear-gradient(150deg,transparent 55%,#98acce22 56%); }
.eng-ui-crop::before,.eng-ui-crop::after { content:''; position:absolute; inset:0 33%; border-inline:1px solid #aabaff30; }
.eng-ui-crop::after { inset:33% 0; border-inline:0; border-block:1px solid #aabaff30; }
.eng-ui-ratios { display:flex; justify-content:center; align-items:center; gap:17px; height:29px; margin-bottom:6px; }
.eng-ui-ratios i { width:13px; height:16px; border:1px solid #606e87; border-radius:2px; }
.eng-ui-ratios i:nth-child(2) { width:16px; }
.eng-ui-ratios i:nth-child(3) { width:22px; height:14px; border-color:#aabaff; background:#aabaff18; }
.eng-ui-ratios i:nth-child(4) { width:26px; height:12px; }
.eng-ui-sheet { position:absolute; width:190px; height:142px; }
.eng-ui-sheet-back { transform:translate(-20px,-15px) rotate(-7deg); opacity:.65; }
.eng-ui-sheet-front { transform:translate(18px,14px); }
.eng-ui-skeleton { margin:16px; width:70%; height:5px; background:#64748b; border-radius:4px; box-shadow:0 17px #64748b55,0 34px #64748b33; }
.eng-ui-row { display:flex; gap:16px; align-items:center; margin:13px 15px; }
.eng-ui-row b { width:43%; height:4px; border-radius:4px; background:#8997b34d; }
.eng-ui-row span { flex:1; height:17px; border:1px solid #46516a; border-radius:4px; background:#253048; }
.eng-ui-row:nth-child(3) span { border-color:#aabaff99; background:#aabaff18; }
.eng-ui-adjust .eng-ui-window { padding-bottom:13px; }
.eng-ui-slider { margin:23px 20px; height:3px; background:#354058; border-radius:4px; position:relative; }
.eng-ui-slider::before { content:''; display:block; height:100%; width:var(--value); background:#8fa6df; }
.eng-ui-slider i { position:absolute; left:var(--value); top:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%; background:#c0cefa; box-shadow:0 0 0 4px #aabaff0a; }
.eng-ui-options { display:flex; gap:8px; margin:0 20px; }
.eng-ui-options i { height:12px; flex:1; border:1px solid #46516a; border-radius:3px; }
.eng-ui-options i:nth-child(2) { background:#aabaff22; border-color:#8fa6df; }
.eng-benefits h3 { margin-bottom:16px; }
.eng-benefits p { color:var(--txt-2); line-height:1.65; margin:0; }