/* CXE Pre-WorkSpace architecture UI v1 — loaded last */
#architecture-panel {
    padding: 18px 18px 30px !important;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(236,244,255,.78), rgba(220,233,255,.58));
}
#architecture-panel .architecture-layout { display:block !important; }
#architecture-panel .graph-card {
    overflow:hidden;
    border:1px solid rgba(67,106,205,.16) !important;
    border-radius:22px !important;
    background:#fff !important;
    box-shadow:0 18px 45px rgba(48,81,155,.10) !important;
}
#architecture-panel .graph-toolbar {
    min-height:64px;
    padding:13px 16px !important;
    border-bottom:1px solid #dce6f6 !important;
    background:linear-gradient(180deg,#fff,#f8fbff) !important;
    color:#17345f !important;
}
#architecture-panel .graph-toolbar-title strong {
    display:block;
    color:#17345f !important;
    font-size:18px !important;
    line-height:1.2;
}
#architecture-panel .graph-toolbar-title span {
    color:#6a7d9e !important;
    font-size:14px !important;
    line-height:1.45;
}
#architecture-panel .tool-button {
    min-width:40px;
    min-height:40px;
    border:1px solid #d8e4f6 !important;
    border-radius:11px !important;
    background:#f5f8ff !important;
    color:#315a9d !important;
    font-size:14px !important;
    font-weight:750 !important;
}
#architecture-panel .tool-button:hover { background:#eaf1ff !important; border-color:#a8c2f3 !important; }

/* Light canvas, matching the main workspace language. */
#architecture-panel .design-viewport {
    min-height:620px !important;
    height:min(68vh,820px) !important;
    margin:0 !important;
    border:0 !important;
    background:
        linear-gradient(rgba(87,126,203,.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(87,126,203,.075) 1px, transparent 1px),
        radial-gradient(circle at 50% 15%, rgba(88,139,255,.09), transparent 38%),
        #f7faff !important;
    background-size:24px 24px,24px 24px,auto,auto !important;
}
#architecture-panel .design-scene { background:transparent !important; }
#architecture-panel .design-node {
    border:1px solid #cbdaf0 !important;
    border-radius:14px !important;
    background:linear-gradient(170deg,#fff,#f4f8ff) !important;
    color:#1c365e !important;
    box-shadow:0 10px 24px rgba(47,78,143,.11) !important;
}
#architecture-panel .design-node:hover { border-color:#6b94ed !important; box-shadow:0 13px 29px rgba(53,94,180,.16) !important; }
#architecture-panel .design-node.selected,
#architecture-panel .design-node.active { border-color:#f0a532 !important; box-shadow:0 0 0 3px rgba(240,165,50,.17),0 13px 30px rgba(53,94,180,.14) !important; }
#architecture-panel .node-type { color:#3868d8 !important; font-size:11px !important; font-weight:850 !important; letter-spacing:.06em; }
#architecture-panel .node-id { color:#8798b5 !important; font-size:11px !important; }
#architecture-panel .node-name { color:#17335f !important; font-size:15px !important; line-height:1.3 !important; }
#architecture-panel .node-purpose { color:#667b9e !important; font-size:13px !important; line-height:1.45 !important; }
#architecture-panel .node-component-state { color:#667b9e !important; font-size:12px !important; border-top-color:#e0e8f5 !important; }
#architecture-panel .edge-path { stroke:#4778e7 !important; stroke-width:2.2 !important; opacity:.92 !important; }
#architecture-panel .edge-path.power { stroke:#e45b67 !important; }
#architecture-panel .edge-path.bus,
#architecture-panel .edge-path.data { stroke:#3f78ea !important; }
#architecture-panel .edge-path.control { stroke:#7790b9 !important; }
#architecture-panel .edge-hit { stroke:transparent !important; stroke-width:14 !important; }
#architecture-panel .edge-label { fill:#47618c !important; font-size:12px !important; font-weight:700 !important; paint-order:stroke; stroke:#f7faff; stroke-width:4px; }
#architecture-panel #design-arrow path { fill:context-stroke; }

/* Bottom workspace: left = engineering notes, right = component/block inspector. */
#architecture-panel .architecture-lower-grid {
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);
    gap:18px;
    margin-top:18px;
    align-items:start;
}
#architecture-panel .architecture-notes,
#architecture-panel .inspector {
    margin:0 !important;
    padding:22px !important;
    border:1px solid rgba(67,106,205,.15) !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 13px 34px rgba(48,81,155,.08) !important;
    color:#1b365e !important;
}
#architecture-panel .notes-columns {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
}
#architecture-panel .architecture-notes h4,
#architecture-panel .inspector h3 {
    margin:0 0 12px !important;
    color:#17335f !important;
    font-size:19px !important;
    line-height:1.3 !important;
}
#architecture-panel .architecture-notes ul {
    margin:0 !important;
    padding-left:20px !important;
    color:#506889 !important;
    font-size:15px !important;
    line-height:1.65 !important;
}
#architecture-panel .architecture-notes li + li { margin-top:7px; }
#architecture-panel .inspector-eyebrow {
    color:#3b6cdd !important;
    font-size:12px !important;
    font-weight:850 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase;
}
#architecture-panel .inspector-text,
#architecture-panel .inspector-value,
#architecture-panel .block-slot-empty,
#architecture-panel .block-slot-selected {
    color:#5b7194 !important;
    font-size:15px !important;
    line-height:1.55 !important;
}
#architecture-panel .inspector-section { padding:16px 0 !important; border-top:1px solid #e2e9f4 !important; }
#architecture-panel .inspector-label {
    margin-bottom:9px !important;
    color:#315a9d !important;
    font-size:13px !important;
    font-weight:800 !important;
    text-transform:none !important;
}
#architecture-panel .block-slot-list { display:grid; gap:12px !important; }
#architecture-panel .block-slot {
    padding:15px !important;
    border:1px solid #dce6f5 !important;
    border-radius:14px !important;
    background:#f8fbff !important;
}
#architecture-panel .block-slot-role { color:#203d69 !important; font-size:15px !important; font-weight:800 !important; }
#architecture-panel .block-slot-qty { color:#7084a5 !important; font-size:13px !important; }
#architecture-panel .block-slot-select,
#architecture-panel .secondary {
    min-height:42px;
    margin-top:10px;
    border:1px solid #cdddf4 !important;
    border-radius:11px !important;
    background:#fff !important;
    color:#2f5fb8 !important;
    font-size:14px !important;
    font-weight:750 !important;
}
#architecture-panel .block-slot-select:hover,
#architecture-panel .secondary:hover { background:#edf4ff !important; border-color:#9cbaf0 !important; }
#architecture-panel .danger-button {
    min-height:44px;
    width:100%;
    border:1px solid #f0c8d0 !important;
    border-radius:11px !important;
    background:#fff7f8 !important;
    color:#c3445d !important;
    font-size:14px !important;
    font-weight:750 !important;
}
#architecture-panel .architecture-footer {
    margin-top:18px !important;
    padding:0 2px 8px !important;
    align-items:center !important;
}
#architecture-panel .architecture-status { color:#5e7395 !important; font-size:14px !important; }
#architecture-panel .architecture-actions button { font-size:15px !important; min-height:46px; }

@media (max-width: 1000px) {
    #architecture-panel { padding:12px 10px 24px !important; }
    #architecture-panel .architecture-lower-grid { grid-template-columns:1fr; }
    #architecture-panel .design-viewport { min-height:520px !important; height:64vh !important; }
}