.architecture-shell{--arch-muted:#647183;--arch-line:#dce2e8;color:#243144;background:#fafbfc;flex-direction:column;height:100dvh;display:flex;overflow:hidden}.architecture-header{border-bottom:1px solid var(--arch-line);background:#fff;flex-shrink:0;justify-content:space-between;align-items:center;gap:20px;padding:18px 28px;display:flex}.architecture-brand,.architecture-back{align-items:center;gap:10px;font-size:14px;text-decoration:none;display:flex}.architecture-brand{font-weight:600}.architecture-brand-detail{color:var(--arch-muted);font-weight:400}.architecture-workspace{flex:1;grid-template-columns:180px minmax(0,1fr);min-height:0;display:grid}.architecture-sidebar{border-right:1px solid var(--arch-line);padding:24px 12px}.architecture-nav a{color:#495566;border-radius:6px;align-items:center;gap:10px;margin:4px 0;padding:11px 12px;font-size:14px;text-decoration:none;display:flex}.architecture-nav a:hover{background:#eef1f5}.architecture-nav a[aria-current=page]{color:#174c90;background:#e7eef9;font-weight:600}.architecture-main{min-width:0;min-height:0;padding:24px 28px 12px}.diagram-page{flex-direction:column;gap:16px;height:100%;display:flex}.diagram-toolbar{flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;display:flex}.diagram-toolbar h1{font-size:23px}.diagram-toolbar p{color:var(--arch-muted);margin:5px 0 0;font-size:13px}.zoom-controls{border:1px solid var(--arch-line);background:#fff;border-radius:8px;flex-shrink:0;align-items:center;gap:3px;padding:4px;display:flex}.zoom-controls button{color:#344256;cursor:pointer;background:#fff;border:none;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;display:inline-flex}.zoom-controls button:hover{background:#eef2f6}.zoom-controls button:disabled{opacity:.35;cursor:default}.zoom-controls output{text-align:center;font-variant-numeric:tabular-nums;min-width:42px;font-size:12px}.zoom-controls .fit-button{border-left:1px solid var(--arch-line);border-radius:0;gap:6px;width:auto;margin-left:4px;padding:0 9px;font-size:12px}.diagram-viewport{border:1px solid var(--arch-line);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background-color:#f5f7fa;background-image:radial-gradient(#d6dee7 .8px,#0000 .8px);background-size:18px 18px;border-radius:10px;flex:1;min-height:0;position:relative;overflow:hidden}.diagram-viewport.is-dragging{cursor:grabbing}.diagram-world{transform-origin:0 0;will-change:transform;position:absolute;top:0;left:0}.diagram-edges{pointer-events:none;position:absolute;inset:0;overflow:visible}.diagram-edge-label{fill:#526c60;paint-order:stroke;stroke:#f0f7f3;stroke-width:8px;stroke-linejoin:round;font:12px Arial,sans-serif}.diagram-node{text-align:left;color:#243144;font:inherit;cursor:zoom-in;background:#fff;border:1px solid #ccd6e1;border-radius:9px;flex-direction:column;justify-content:center;padding:18px 20px;display:flex;position:absolute;box-shadow:0 3px 8px #24314406}.diagram-node:hover{border-color:#6486b2;box-shadow:0 4px 14px #24314414}.diagram-node h2{margin:0 0 7px;font-size:17px;line-height:1.3}.diagram-node p{color:#566477;margin:0;font-size:13px;line-height:1.55}.diagram-node-source{border-top:3px solid #5482bd}.diagram-node-storage{border-top:3px solid #398974}.diagram-node-optional{background:#fdfbff;border:1px dashed #a197b6}.diagram-keys{color:#537364;border-top:1px solid #e4ece7;margin-top:12px;padding-top:9px;font:10px/1.6 monospace}.diagram-host{background:#f0f7f3;border:1px solid #b7d0c2;border-radius:14px;align-items:baseline;gap:12px;padding:22px 28px;display:flex;position:absolute;inset:10px}.diagram-host strong{color:#2c6651;font-size:21px}.diagram-host span{color:#60796e;font-size:13px}.canvas-help{color:var(--arch-muted);text-align:center;flex-shrink:0;margin:0;font-size:11px}@media (max-width:850px){.architecture-workspace{grid-template-columns:150px minmax(0,1fr)}.architecture-main{padding:20px 16px 12px}.diagram-toolbar{flex-wrap:wrap;align-items:flex-start}.zoom-controls{margin-left:auto}}@media (max-width:600px){.architecture-header{gap:10px;padding:14px 16px}.architecture-brand-detail{display:none}.architecture-workspace{flex-direction:column;display:flex}.architecture-sidebar{border-right:none;border-bottom:1px solid var(--arch-line);padding:8px 12px}.architecture-nav{gap:8px;display:flex}.architecture-nav a{margin:0;padding:8px 10px}.architecture-main{flex:1;padding:16px 12px 10px}.diagram-page{gap:12px}.diagram-toolbar h1{font-size:21px}.diagram-toolbar p{font-size:12px}.canvas-help{font-size:10px}}.architecture-shell{height:calc(100dvh - 42px)}.architecture-workspace{flex-direction:column;display:flex}.architecture-sidebar{border-right:0;border-bottom:1px solid var(--arch-line);padding:10px 20px}.architecture-nav{gap:8px;display:flex}.architecture-nav a{margin:0;padding:8px 12px;transition:background .16s,color .16s}.architecture-nav a[aria-current=page]{color:#344d5e;background:#eaf0f3}.architecture-main{flex:1}.diagram-node{box-shadow:none;border:1px solid #ccd6e1;transition:border-color .16s,background .16s}.diagram-node-source,.diagram-node-storage{border-top:1px solid #ccd6e1}.diagram-node-source{background:#f9fbfc}.diagram-node-storage{background:#f7faf8}.diagram-node:hover{box-shadow:none;border-color:#8d9eaa}@media (max-width:760px){.architecture-shell{height:calc(100dvh - 145px);min-height:520px}}.architecture-shell{height:auto;min-height:calc(100dvh - 42px);overflow:visible}.architecture-main{flex:none;height:760px}.diagram-mobile{display:none}@media (max-width:760px){.architecture-shell{min-height:0}.architecture-main,.diagram-page{height:auto}.diagram-viewport,.zoom-controls,.canvas-help{display:none}.diagram-mobile{gap:12px;margin:0 0 24px;padding:0;list-style:none;display:grid}.diagram-mobile li{background:#fff;border:1px solid #d6dfe5;border-radius:9px;padding:22px}.diagram-mobile h2{margin-bottom:10px;font-size:16px}.diagram-mobile p{color:#647183;font-size:13px;line-height:1.75}.diagram-mobile .diagram-keys{display:block}}