.vvx-workspace { max-width:1280px; margin:auto; padding:24px 32px 40px; }
.vvx-settings { display:grid; grid-template-columns:minmax(240px,1fr) 1fr; gap:24px; align-items:center; margin-bottom:20px; }
.vvx-settings label { margin:0; }
.vvx-settings p,.vvx-method p { color:var(--muted); font-size:13px; line-height:1.6; }
.vvx-result-sides { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.vvx-sides { border:1px solid var(--border,#cddedb); border-radius:18px; background:#fff; padding:24px; margin-bottom:20px; }
.vvx-fluid-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,10vw,140px); padding-bottom:20px; border-bottom:1px solid #e4eeeb; }
.vvx-a { --circuit:#168579; --circuit-bg:#f1faf7; }
.vvx-b { --circuit:#4386b4; --circuit-bg:#f2f7fb; }
.vvx-fluid h2 { font-size:18px; margin:0 0 18px; color:var(--circuit); }
.vvx-fluid h2 span { font-size:11px; border:1px solid currentColor; border-radius:6px; padding:4px 6px; margin-right:5px; vertical-align:middle; }
.vvx-fluid .field-grid:has(> [hidden]) { grid-template-columns:minmax(0,1fr); }
.vvx-sides small { display:block; font-size:11px; font-weight:400; line-height:1.5; margin-top:5px; color:var(--muted); }
.vvx-sides label { margin:0; min-width:0; }
.vvx-sides input,.vvx-sides select { min-width:0; width:100%; }
.vvx-diagram { display:grid; grid-template-columns:minmax(0,1fr) minmax(80px,200px) minmax(0,1fr); grid-template-rows:200px 200px; margin:20px 0; align-items:center; }
.vvx-port { background:var(--circuit-bg); border:1px solid #d7e4e2; border-left:3px solid var(--circuit); border-radius:12px; padding:14px 18px; min-width:0; }
.vvx-port-direction { color:var(--circuit); font-weight:700; font-size:12px; margin:0 0 10px; display:flex; justify-content:space-between; gap:4px; }
.vvx-port-direction span { font-size:20px; line-height:16px; }
.vvx-port input { font-size:18px; font-weight:650; padding:10px 12px; height:44px; }
.vvx-unit { float:right; color:var(--muted); font-weight:400; }
.vvx-flow-row { display:grid; grid-template-columns:minmax(0,1fr) 90px; gap:10px; margin-top:10px; }
.vvx-flow-row select { height:44px; }
.vvx-a-in { grid-area:1/1; }.vvx-a-out { grid-area:2/1; }
.vvx-b-out { grid-area:1/3; }.vvx-b-in { grid-area:2/3; }
.vvx-core { grid-area:1/2/3/3; height:400px; position:relative; }
.vvx-core svg { width:100%; height:100%; display:block; }
.vvx-core-label { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:white; border:1px solid #a9c1bc; border-radius:8px; padding:12px 8px; font-weight:800; letter-spacing:2px; font-size:13px; }
.vvx-diagram-summary { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid #e4eeeb; padding-top:16px; font-size:12px; color:var(--muted); }
.vvx-diagram-summary strong { color:var(--green); }
.vvx-sides input:disabled { background:var(--mint); border:1px dashed var(--green); opacity:1; color:var(--green); -webkit-text-fill-color:var(--green); }
.vvx-sides label:has(input:disabled) { color:var(--green); }
.vvx-result:empty { display:none; }
.vvx-result { margin:22px 0; }
.vvx-result-hero { padding:20px; background:var(--mint); border:1px solid var(--green); border-radius:12px; margin-bottom:16px; }
.vvx-result-hero strong { display:block; font-size:28px; margin:6px 0; }
.vvx-result-hero p { margin:4px 0; }
.vvx-result-sides h3 { margin-top:0; }
.vvx-result-sides dl { display:grid; grid-template-columns:1fr auto; gap:10px; font-size:13px; }
.vvx-result-sides dd { margin:0; font-weight:700; text-align:right; }
.vvx-properties { font-size:12px; line-height:1.65; color:var(--muted); }
.vvx-method { margin-top:22px; }
.vvx-method summary { cursor:pointer; font-weight:700; }
@media(max-width:760px) {
  .nav-list { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .vvx-workspace { padding:16px 14px 30px; }
  .vvx-settings,.vvx-result-sides { grid-template-columns:minmax(0,1fr); gap:16px; }
  .vvx-sides { padding:16px 12px; }
  .vvx-fluid-settings { gap:16px; }
  .vvx-fluid-settings .field-grid { grid-template-columns:minmax(0,1fr); }
  .vvx-fluid h2 { font-size:14px; }
  .vvx-fluid h2 span { display:none; }
  .vvx-diagram { grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr); grid-template-rows:240px 240px; }
  .vvx-core { height:480px; }
  .vvx-port { padding:12px 8px; }
  .vvx-flow-row { grid-template-columns:minmax(0,1fr); gap:6px; }
  .vvx-flow-row label:last-child { display:flex; align-items:center; gap:6px; }
  .vvx-flow-row select { padding:5px; height:34px; }
  .vvx-port input { padding:8px; font-size:16px; }
  .vvx-core-label { padding:8px 3px; letter-spacing:0; font-size:11px; }
  .vvx-port-direction { font-size:10px; }
}