/* Existing Computer colors. Internal --vell-* aliases remain for compatibility. */
.vell-system {
  --vell-blue: #110aff;
  --vell-white: #ffffff;
  --vell-bg: var(--vell-blue);
  --vell-bg-secondary: #e8e7ff;
  --vell-panel: var(--vell-white);
  --vell-panel-elevated: #e5e4ff;
  --vell-text: var(--vell-white);
  --vell-text-secondary: rgba(255,255,255,.9);
  --vell-text-muted: rgba(255,255,255,.8);
  --vell-muted: rgba(255,255,255,.8);
  --vell-text-on-light: var(--vell-blue);
  --vell-text-secondary-on-light: #475467;
  --vell-text-muted-on-light: #667085;
  --vell-border: #ffffff38;
  --vell-border-strong: var(--vell-white);
  --vell-border-on-light: rgba(17,10,255,.25);
  --vell-divider: #ffffff35;
  --vell-accent: #00ffff;
  --vell-accent-hover: #e5e4ff;
  --vell-accent-active: #c8c6ff;
  --vell-accent-soft: rgba(255,255,255,.1);
  --vell-accent-on-blue: var(--vell-white);
  --vell-focus: #00ffff;
  --vell-success: #abe06d;
  --vell-warning: #fde047;
  --vell-danger: #ef4444;
  --vell-code-bg: var(--vell-blue);
  --vell-code-text: var(--vell-white);
  --vell-code-comment: var(--vell-text-muted);
  --vell-code-string: var(--vell-success);
  --vell-code-keyword: var(--vell-focus);
  --vell-code-number: var(--vell-warning);
  --vell-code-type: var(--vell-accent-active);
  --vell-button-bg: var(--vell-white);
  --vell-button-text: var(--vell-blue);
  --vell-selected-bg: var(--vell-blue);
  --vell-selected-text: var(--vell-white);
  --vell-overlay: #06044478;
  --vell-scrollbar: rgba(255,255,255,.65);
  --vell-scrollbar-track: var(--vell-blue);
  --vell-clear: transparent;
  --vell-shadow: none;
  --system-shell-height: 100px;
  --system-shell-offset: 100px;
  position: relative;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--vell-bg);
  color: var(--vell-text);
  font: 13px/1.5 'Roboto Mono', monospace;
}
html[data-vell-system] #cyber-nav { display: none; }
.vell-system *, .vell-system *::before, .vell-system *::after { box-sizing: border-box; }
.vell-system a { color: inherit; text-decoration: none; }
.vell-system button, .vell-system input, .vell-system select { font: inherit; border-radius: 0; }
.vell-system button, .vell-system a { -webkit-tap-highlight-color: transparent; }
.vell-system :focus-visible { outline: 2px dashed var(--vell-focus); outline-offset: -3px; }
.vell-system-header {
  height: 56px;
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 2px solid var(--vell-white);
}
.vell-system-brand, .vell-system-home { display: flex; align-items: center; gap: 10px; }
.vell-system-brand { min-width: 0; }
.vell-system-home, .vell-system-context { flex-shrink: 0; white-space: nowrap; }
.vell-system-home strong { font-size: 18px; letter-spacing: -.04em; }
.vell-system-brand-divider { opacity: .6; }
.vell-system-context { font-size: 11px; line-height: 1.3; letter-spacing: .06em; }
.vell-system-context small { display: block; margin-top: 3px; font-size: 9px; opacity: .8; }
.vell-system-computer { flex-shrink: 0; padding: 5px 9px; border: 1px solid var(--vell-white); font-size: 11px; }
.vell-system-computer:hover { background: var(--vell-white); color: var(--vell-blue); }
.vell-system-navigation {
  display: flex;
  flex: 0 0 44px;
  height: 44px;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--vell-white);
  scrollbar-width: thin;
}
.vell-system-navigation a { display: flex; flex-shrink: 0; align-items: center; padding: 0 17px; font-size: 11px; border-right: 1px solid var(--vell-border); white-space: nowrap; }
.vell-system-navigation a:hover { background: var(--vell-accent-soft); }
.vell-system-navigation a.is-active { background: var(--vell-focus); color: var(--vell-blue); }
.vell-system-main { flex: 1; min-height: 0; min-width: 0; overflow: auto; }
.vell-system-reading { padding: 32px; font-size: 12px; }
.vell-system-reading button { background: white; color: var(--vell-blue); padding: 8px 14px; margin-top: 16px; }
.vell-system ::-webkit-scrollbar { width: 7px; height: 7px; }
.vell-system ::-webkit-scrollbar-track { background: var(--vell-scrollbar-track); }
.vell-system ::-webkit-scrollbar-thumb { background: var(--vell-scrollbar); }
@media (max-width: 600px) {
  .vell-system-header { padding-inline: 10px; gap: 6px; }
  .vell-system-brand, .vell-system-home { gap: 6px; }
  .vell-system-home strong { font-size: 15px; }
  .vell-system-context { font-size: 10px; }
  .vell-system-context small { font-size: 8px; }
  .vell-system-computer { font-size: 10px; padding: 5px 6px; }
  .vell-system-navigation a { padding-inline: 12px; }
}