/** * @project SysCanvas Core V1.2.0 * @ref requirements/V1.2.0_Requirements.md * @guardrail Purpose: Concept Design Global Styles (V2) * @status Managed by Antigravity R&D System. */:root {  /* Premium Dark Palette */  --bg-deep: #0A0C12;  --bg-panel: rgba(22, 26, 38, 0.7);  --bg-hover: rgba(45, 50, 70, 0.5);    --accent: #D4864A; /* Neon Copper */  --accent-glow: rgba(212, 134, 74, 0.25);    --text-primary: #E2E4E9;  --text-secondary: #9499A8;  --text-dim: #5E6475;    --border: rgba(255, 255, 255, 0.08);  --border-active: rgba(212, 134, 74, 0.4);    --shadow-lg: 0 12px 40px -12px rgba(0, 0, 0, 0.5);  --glass: blur(12px) saturate(180%);}* {  margin: 0; padding: 0; box-sizing: border-box;  -webkit-font-smoothing: antialiased;}body {  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;  background-color: var(--bg-deep);  color: var(--text-primary);  height: 100vh;  overflow: hidden;}.app-container {  display: grid;  grid-template-columns: 280px 1fr 340px;  grid-template-rows: 64px 1fr 32px;  height: 100vh;}/* Header Area */header {  grid-column: 1 / -1;  display: flex;  align-items: center;  justify-content: space-between;  padding: 0 24px;  background: var(--bg-panel);  border-bottom: 1px solid var(--border);  backdrop-filter: var(--glass);  z-index: 100;}.logo {  display: flex;  align-items: center;  gap: 12px;}.logo-icon {  width: 32px;  height: 32px;  background: linear-gradient(135deg, var(--accent), #FFB074);  border-radius: 8px;  box-shadow: 0 0 20px var(--accent-glow);}.logo-text {  font-size: 18px;  font-weight: 700;  letter-spacing: -0.5px;}.logo-version {  font-size: 10px;  font-family: 'Space Mono', monospace;  color: var(--accent);  background: var(--accent-glow);  padding: 2px 6px;  border-radius: 4px;  margin-left: 8px;}/* Left Sidebar: Package Explorer */.sidebar-left {  background: var(--bg-panel);  border-right: 1px solid var(--border);  backdrop-filter: var(--glass);  overflow-y: auto;  padding: 20px 0;}.section-label {  font-size: 10px;  font-weight: 800;  color: var(--text-dim);  text-transform: uppercase;  letter-spacing: 1.5px;  padding: 0 24px 12px;}/* Canvas Area */main {  position: relative;  overflow: hidden;  background-color: var(--bg-deep);  background-image:     radial-gradient(circle, var(--accent-glow) 1.5px, transparent 1.5px);  background-size: 32px 32px;}#canvas-container {  width: 100%;  height: 100%;  position: absolute;  top: 0; left: 0;}/* Machine (ECU) Visualization Layer */.machine-boundary {  fill: rgba(212, 134, 74, 0.05);  stroke: var(--accent);  stroke-width: 2;  stroke-dasharray: 10 5;  rx: 32;  pointer-events: none;}.machine-label {  font-family: 'Space Mono', monospace;  font-size: 11px;  font-weight: 800;  fill: var(--accent);  text-transform: uppercase;  letter-spacing: 2px;  opacity: 0.9;}/* Right Sidebar: Deep Editor */.sidebar-right {  background: var(--bg-panel);  border-left: 1px solid var(--border);  backdrop-filter: var(--glass);  display: flex;  flex-direction: column;}/* Shared UI Components */.panel-header {  padding: 0 12px;  border-bottom: 1px solid var(--border);  display: flex;  align-items: center;  gap: 4px;  background: rgba(255, 255, 255, 0.02);}.tab-btn {  padding: 16px 12px;  font-size: 10px;  font-weight: 700;  text-transform: uppercase;  letter-spacing: 1px;  color: var(--text-dim);  cursor: pointer;  border-bottom: 2px solid transparent;  transition: all 0.2s;}.tab-btn:hover { color: var(--text-primary); }.tab-btn.active {   color: var(--accent);   border-bottom-color: var(--accent);  background: var(--accent-glow);}.panel-body {  flex: 1;  overflow-y: auto;}.panel-title {  font-size: 13px;  font-weight: 600;}/* Scrollbar Styling */::-webkit-scrollbar { width: 6px; height: 6px; }::-webkit-scrollbar-track { background: transparent; }::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }/* Package Explorer Tree Styles */.tree-package { margin-bottom: 2px; }.tree-label {  display: flex;  align-items: center;  gap: 8px;  padding: 6px 16px;  cursor: pointer;  border-radius: 6px;  transition: background 0.2s;  font-size: 13px;  color: var(--text-secondary);}.tree-label:hover { background: var(--bg-hover); color: var(--text-primary); }.tree-content { display: none; margin-left: 20px; border-left: 1px solid var(--border); }.tree-package.expanded > .tree-content { display: block; }.tree-package.expanded > .tree-label { color: var(--accent); }.tree-element {  display: flex;  align-items: center;  gap: 8px;  padding: 4px 16px;  cursor: pointer;  font-size: 12px;  color: var(--text-dim);  transition: all 0.2s;}.tree-element:hover { color: var(--text-primary); background: var(--bg-hover); }.icon-pkg { font-size: 14px; opacity: 0.8; }.icon-el { font-size: 12px; opacity: 0.6; }.element-count {  font-size: 9px;  background: var(--border);  padding: 1px 5px;  border-radius: 4px;  margin-left: auto;  opacity: 0.6;}/* Button & UI Components */.toolbar {  display: flex;  align-items: center;  flex: 1;  justify-content: center;}.toolbar-group {  display: flex;  align-items: center;  gap: 8px;  padding: 0 16px;  border-right: 1px solid var(--border);  height: 32px;}.toolbar-group:last-child { border-right: none; }.btn-primary {  background: var(--accent);  color: var(--bg-deep);  border: none;  padding: 0 16px;  height: 32px;  border-radius: 6px;  font-size: 11px;  font-weight: 800;  cursor: pointer;  transition: transform 0.2s;  display: flex;  align-items: center;  justify-content: center;}.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.1); }.btn-secondary {  background: rgba(255, 255, 255, 0.05);  color: var(--text-primary);  border: 1px solid var(--border);  padding: 0 16px;  height: 32px;  border-radius: 6px;  font-size: 11px;  font-weight: 600;  cursor: pointer;  transition: all 0.2s;}.btn-secondary:hover { background: var(--bg-hover); border-color: var(--text-secondary); }.btn-icon {  background: transparent;  color: var(--text-dim);  border: 1px solid var(--border);  width: 32px;  height: 32px;  border-radius: 6px;  font-size: 16px;  cursor: pointer;  transition: all 0.2s;  display: flex;  align-items: center;  justify-content: center;  line-height: 1;}.btn-icon:hover {   color: var(--accent);   border-color: var(--accent);   background: var(--accent-glow); }/* Data Pulse Animation */.data-pulse {  pointer-events: none;  filter: blur(1px) drop-shadow(0 0 5px var(--accent));}/* Bottom Signal Drawer */.signal-drawer {  position: absolute;  bottom: 32px;  left: 280px;  right: 340px;  height: 48px;  background: var(--bg-panel);  backdrop-filter: var(--glass);  border-top: 1px solid var(--border);  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);  overflow: hidden;  z-index: 50;}.signal-drawer.expanded { height: 300px; }.drawer-handle {  height: 48px;  display: flex;  align-items: center;  justify-content: space-between;  padding: 0 24px;  cursor: pointer;  background: rgba(255, 255, 255, 0.03);}.drawer-handle span { font-size: 11px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; }.drawer-status { font-size: 10px; color: var(--text-dim); }.drawer-content {  padding: 20px;  display: grid;  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  gap: 12px;  height: 250px;  overflow-y: auto;}.sig-item {  padding: 10px 16px;  background: rgba(0, 0, 0, 0.2);  border: 1px solid var(--border);  border-radius: 6px;  font-size: 12px;  cursor: grab;  transition: all 0.2s;  display: flex;  justify-content: space-between;}.sig-item:hover { border-color: var(--accent); background: var(--bg-hover); }.sig-id { font-family: 'Space Mono', monospace; font-size: 9px; color: var(--accent); }/* Live Manifest Terminal */.manifest-terminal {  position: absolute;  bottom: 80px;  right: 360px;  width: 320px;  background: #050608;  border: 1px solid var(--border);  border-radius: 12px;  box-shadow: var(--shadow-lg);  overflow: hidden;  z-index: 100;  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);}.manifest-terminal.collapsed { transform: translateY(calc(100% - 32px)); }.terminal-header {  height: 32px;  background: #0A0C12;  display: flex;  align-items: center;  justify-content: space-between;  padding: 0 12px;  cursor: pointer;  border-bottom: 1px solid var(--border);}.terminal-content { padding: 12px; }/* Canvas Rendering Styles */#architecture-canvas { background: transparent; cursor: grab; }#architecture-canvas:active { cursor: grabbing; }.node { cursor: pointer; transition: filter 0.2s; }.node:hover { filter: drop-shadow(0 0 10px var(--accent-glow)); }.link {  fill: none;  stroke: var(--text-dim);  stroke-width: 1.5;  opacity: 0.65;  transition: all 0.3s;}.link.highlight { opacity: 1; stroke: var(--accent); stroke-width: 2.5; }/* Platform Library */.library-items {  display: flex;  flex-direction: column;  gap: 8px;}.lib-item {  padding: 12px;  background: var(--bg-hover);  border: 1px solid var(--border);  border-radius: 8px;  cursor: pointer;  transition: all 0.2s;}.lib-item:hover {   border-color: var(--accent);  background: var(--bg-panel);  transform: translateX(4px);}.lib-name { font-size: 12px; font-weight: 700; margin-bottom: 2px; }.lib-type { font-size: 9px; font-family: 'Space Mono'; color: var(--accent); }/* Code Snippet Styles */.code-preview {  background: #050608;  border-radius: 0;  margin: 0;  line-height: 1.6;}/* Property Editor Styles */.prop-header { border-bottom: 1px solid var(--border); }.prop-section { border-bottom: 1px solid var(--border); }.prop-section:last-child { border-bottom: none; }.method-card {  border: 1px solid var(--border);  transition: border-color 0.2s;}.method-card:hover { border-color: var(--accent); }.port-row {  background: rgba(255, 255, 255, 0.01);  padding: 8px 12px;  border-radius: 6px;}/* Phase 5: Architecture Legend */.architecture-legend {  position: absolute;  bottom: 24px;  left: 24px;  background: rgba(22, 26, 38, 0.85);  backdrop-filter: blur(12px);  border: 1px solid rgba(255, 255, 255, 0.08);  border-radius: 12px;  padding: 16px;  width: 200px;  box-shadow: 0 10px 30px rgba(0,0,0,0.5);  pointer-events: none;  z-index: 100;  display: none; /* Hidden by default, shown when model loaded */}.architecture-legend.visible {  display: block;}.legend-header {  font-size: 10px;  font-weight: 800;  color: var(--text-secondary);  margin-bottom: 12px;  border-bottom: 1px solid var(--border);  padding-bottom: 8px;}.legend-header span { color: var(--accent); }.legend-grid {  display: flex;  flex-direction: column;  gap: 8px;}.legend-item {  display: flex;  align-items: center;  gap: 12px;}.legend-box {  width: 20px;  height: 12px;  border-radius: 3px;}.legend-dot {  width: 8px;  height: 8px;  border-radius: 50%;  margin: 0 6px;}.legend-line {  width: 20px;  height: 2px;}.legend-pulse {  width: 10px;  height: 10px;  background: var(--accent);  border-radius: 50%;  box-shadow: 0 0 10px var(--accent);  margin: 0 5px;  animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;}@keyframes pulse-ring {  0% { transform: scale(0.33); }  80%, 100% { opacity: 0; }}.legend-label {  font-size: 10px;  font-weight: 500;  color: var(--text-secondary);}/* Phase 7: Domain Overview Hybrid Mode */.domain-overview-panel {  position: absolute;  top: 24px;  left: 24px;  right: 24px;  background: rgba(22, 26, 38, 0.9);  backdrop-filter: blur(20px);  border: 1px solid var(--border);  border-radius: 16px;  box-shadow: 0 20px 50px rgba(0,0,0,0.6);  z-index: 150;  display: none; /* Shown when model loaded and at root level */  padding-bottom: 24px;  animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);}.domain-overview-panel.visible { display: block; }.domain-cards-grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));  gap: 16px;  padding: 0 24px;}.domain-card {  background: var(--bg-hover);  border: 1px solid var(--border);  border-radius: 12px;  padding: 24px;  text-align: center;  cursor: pointer;  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);}.domain-card:hover {  transform: translateY(-4px);  border-color: var(--accent);  background: var(--accent-glow);  box-shadow: 0 10px 20px rgba(212, 134, 74, 0.1);}.domain-icon { font-size: 32px; margin-bottom: 12px; display: block; }.domain-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }.domain-meta { font-size: 10px; color: var(--text-dim); margin-top: 4px; font-family: 'Space Mono'; }/* Sidebar Tree Explorer */.tree-explorer {  padding: 24px;}.tree-node { margin-bottom: 4px; }.tree-node-label {  display: flex;  align-items: center;  gap: 8px;  padding: 6px 12px;  border-radius: 6px;  font-size: 12px;  cursor: pointer;  transition: all 0.15s;  color: var(--text-secondary);}.tree-node-label:hover { background: var(--bg-hover); color: var(--text-primary); }.tree-node-label.active { color: var(--accent); font-weight: 600; background: var(--accent-glow); }.tree-node-icon { font-size: 12px; opacity: 0.6; width: 16px; text-align: center; }.tree-children { margin-left: 20px; border-left: 1px solid var(--border); }@keyframes slideDown {  from { transform: translateY(-20px); opacity: 0; }  to { transform: translateY(0); opacity: 1; }}@keyframes slideInRight {  from { transform: translateX(20px); opacity: 0; }  to { transform: translateX(0); opacity: 1; }}
/* Phase 12: Architecture Link & Boundary Refinement */
.link.inter-ecu {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px rgba(212, 134, 74, 0.4));
}

.link.service-link {
  stroke-width: 2;
  stroke-dasharray: 4, 2;
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.5));
}

.machine-boundary {
  fill: rgba(255, 255, 255, 0.02);
  stroke: rgba(255, 255, 255, 0.2);
  stroke-dasharray: 8, 4;
  rx: 24;
  filter: drop-shadow(0 0 15px rgba(212, 134, 74, 0.05));
  transition: all 0.3s ease;
}

.system-mega-boundary {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-dasharray: 20, 10;
  stroke-width: 2;
  pointer-events: none;
}

.service-interface-node text {
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.5px;
}

.node.active rect {
  stroke: var(--accent);
  stroke-width: 3;
  filter: drop-shadow(0 0 10px var(--accent-glow));
}

/* Phase 11: Zonal Hardware Architecture Styles */
.protocol-shield {
  fill: #0F172A;
  stroke: rgba(212, 134, 74, 0.3);
  stroke-width: 1px;
}

.link-label {
  fill: #FFF !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  font-family: 'Space Mono', monospace;
  pointer-events: none;
  text-transform: uppercase;
}

.link-label textPath {
  dominant-baseline: central;
}

.stack-label {
  font-family: 'Space Mono', monospace;
  letter-spacing: 2px;
  pointer-events: none;
  opacity: 0.6;
}

.domain-card:hover .domain-icon {
  transform: scale(1.2) rotate(-5deg);
}

/* End of SysCanvas V1.2.0 Styles */