.architecture-controls { display:flex; align-items:center; gap:14px; padding:11px 14px; border-bottom:1px solid var(--line); font-size:14px; }
.architecture-controls>label { flex:none; color:var(--navy); font-weight:500; }
.architecture-controls>select { width:100%; min-width:0; min-height:38px; padding:7px 12px; border:1px solid #bacddd; border-radius:6px; background:#fff; color:var(--navy); font:inherit; }
.architecture-controls>select:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.architecture-inputs { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; padding:10px 14px; font-size:14px; line-height:1.4; }
.architecture-inputs>span { color:var(--muted); }
.architecture-inputs>strong { color:var(--navy); font-weight:500; }
.architecture-option { padding:0 14px 12px; }
.architecture-option[hidden] { display:none; }
.architecture-model { border:1px solid #becfe0; border-radius:7px; background:#f4f8fc; }
.architecture-model-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 11px; border-bottom:1px solid #d9e4ef; font-size:14px; }
.architecture-model-heading>strong { color:var(--navy); font-weight:550; }
.architecture-model-heading>span { color:var(--muted); font-size:12px; }
.architecture-blocks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; padding:15px 12px; }
.architecture-block { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:92px; padding:8px 6px; border:1px solid #84a5c5; background:#fff; text-align:center; }
.architecture-block>.architecture-stereotype { color:#5a7692; font-size:12px; }
.architecture-block>strong { color:var(--navy); font-size:14px; line-height:1.35; font-weight:550; }
.architecture-block>span { color:var(--muted); font-size:14px; line-height:1.35; }
.architecture-block:not(:last-child)::after { content:'→'; position:absolute; right:-28px; top:calc(50% - 13px); width:26px; color:#648aaf; font-size:24px; line-height:26px; }
.distributed .architecture-block:not(:last-child)::after { content:'↔'; }
.architecture-tradeoffs { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:12px 0 0; }
.architecture-tradeoffs>div+div { border-left:1px solid var(--line); padding-left:18px; }
.architecture-tradeoffs strong { color:var(--blue); font-size:14px; font-weight:500; }
.architecture-tradeoffs p { margin:5px 0 0; color:var(--ink); font-size:14px; line-height:1.45; }