:root {
  --uxe-canvas: #05080d;
  --uxe-surface: rgba(12, 18, 27, .94);
  --uxe-surface-raised: rgba(17, 25, 37, .96);
  --uxe-line: rgba(148, 163, 184, .16);
  --uxe-line-bright: rgba(52, 211, 153, .34);
  --uxe-text: #f8fafc;
  --uxe-muted: #91a0b5;
  --uxe-cyan: #38bdf8;
  --uxe-emerald: #34d399;
  --uxe-gold: #f6c453;
  --uxe-danger: #fb7185;
  --uxe-radius: 16px;
  --uxe-shadow: 0 24px 70px rgba(0, 0, 0, .38);
  color-scheme: dark;
}

html, body { background: var(--uxe-canvas); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.01em; }
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .32;
  background-image: linear-gradient(rgba(56,189,248,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,.025) 1px, transparent 1px);
  background-size: 40px 40px;
}

#main-dashboard { position: relative; z-index: 1; background: radial-gradient(circle at 58% -20%, rgba(14,165,233,.13), transparent 42%), var(--uxe-canvas); }
#main-dashboard > aside { width: 286px; background: rgba(7, 11, 18, .97); border-color: var(--uxe-line); box-shadow: 14px 0 50px rgba(0,0,0,.24); }
.brand-sidebar { min-height: 82px; padding: 16px 18px; background: linear-gradient(135deg, rgba(56,189,248,.08), transparent 60%); }
.brand-sidebar img { filter: drop-shadow(0 8px 24px rgba(56,189,248,.16)); }
.brand-sidebar span { color: var(--uxe-text); font-size: 11px; letter-spacing: .13em; }
.brand-sidebar small { color: var(--uxe-muted); letter-spacing: .18em; }
.brand-sidebar i { box-shadow: 0 0 16px var(--uxe-emerald); background: var(--uxe-emerald); }

#agent-list { padding: 14px; }
#agent-list .agent-card { border: 1px solid transparent; min-height: 43px; border-radius: 12px; }
#agent-list .agent-card:hover { border-color: rgba(56,189,248,.22); background: rgba(56,189,248,.07); color: #dff5ff; transform: translateX(2px); }
#agent-list .agent-card.bg-white { color: #ecfeff; border-color: rgba(52,211,153,.34); background: linear-gradient(110deg, rgba(52,211,153,.17), rgba(56,189,248,.08)); box-shadow: inset 3px 0 var(--uxe-emerald); }

.app-topbar { min-height: 75px; padding: 11px 17px; background: rgba(5,8,13,.88); border-color: var(--uxe-line); backdrop-filter: blur(18px); box-shadow: 0 10px 32px rgba(0,0,0,.22); }
.active-agent-badge { color: #cbd5e1; border: 1px solid var(--uxe-line); background: rgba(255,255,255,.025); border-radius: 10px; padding: 8px 11px; }
.active-agent-badge span { color: var(--uxe-emerald); }
.workspace-nav { gap: 3px; padding: 4px; border: 1px solid var(--uxe-line); border-radius: 13px; background: rgba(0,0,0,.28); }
.workspace-tab { min-height: 34px; padding: 0 12px; border-radius: 9px; color: #8796aa; font-weight: 700; letter-spacing: .015em; }
.workspace-tab:hover { color: #e5f6ff; background: rgba(56,189,248,.08); }
.workspace-tab.active { color: #fff; background: linear-gradient(110deg, rgba(14,165,233,.24), rgba(52,211,153,.13)); box-shadow: inset 0 0 0 1px rgba(56,189,248,.3), 0 6px 18px rgba(0,0,0,.22); }
.system-controls { gap: 6px; }
.system-chip { min-height: 32px; border-radius: 9px; border: 1px solid var(--uxe-line); color: #9eacbd; background: rgba(15,23,42,.58); }
.system-action:hover { color: #fff; border-color: rgba(56,189,248,.42); background: rgba(56,189,248,.1); }
.readiness-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 10px currentColor; }
#enterprise-readiness-button[data-state="ok"] .readiness-dot { background: var(--uxe-emerald); }
#enterprise-readiness-button[data-state="error"] .readiness-dot { background: var(--uxe-danger); }

.workspace-panel { background: transparent !important; scrollbar-color: #263447 transparent; }
.workspace-panel > div, .project-shell, .core-center { animation: uxe-enter .24s ease-out; }
@keyframes uxe-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.core-hero, .project-heading, .studio-project-bar, .project-list-panel, .project-detail-panel,
.core-panel, .project-live-panel, .controlled-repair-section, .project-analysis-section,
.project-timeline-section, .project-metrics article, .core-metric-grid article {
  border-color: var(--uxe-line) !important; background: var(--uxe-surface) !important; box-shadow: 0 16px 42px rgba(0,0,0,.19);
}
.core-hero, .project-heading { border-radius: 20px; background: linear-gradient(125deg, rgba(17,25,37,.98), rgba(7,15,24,.96)) !important; box-shadow: var(--uxe-shadow); }
.core-hero h2, .project-heading h2, .project-detail-header h3 { color: var(--uxe-text); letter-spacing: -.035em; }
.core-metric-grid article, .project-metrics article { border-radius: 14px; position: relative; overflow: hidden; }
.core-metric-grid article::after, .project-metrics article::after { content:""; position:absolute; inset:auto 16px 0; height:2px; background: linear-gradient(90deg, var(--uxe-cyan), transparent); opacity:.6; }
.core-metric-grid strong, .project-metrics strong { color: #fff; }

button, input, select, textarea { font: inherit; }
button { transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--uxe-cyan); outline-offset: 2px; }
.studio-primary { border: 1px solid rgba(56,189,248,.48); color: #031018; background: linear-gradient(110deg, #67d7ff, #49e2b6); box-shadow: 0 9px 24px rgba(14,165,233,.18); }
.studio-primary:hover { filter: brightness(1.08); box-shadow: 0 12px 30px rgba(14,165,233,.28); }
.studio-secondary { color: #d7e1ec; border: 1px solid var(--uxe-line); background: rgba(30,41,59,.52); }
.studio-secondary:hover { border-color: rgba(56,189,248,.42); background: rgba(56,189,248,.1); }
.studio-input, input:not([type="range"]):not([type="color"]), select, textarea { color: #e5edf7; border-color: rgba(148,163,184,.2); background: rgba(2,6,12,.65); }

.project-grid, .studio-grid, .repair-grid, .design-grid, .media-grid { gap: 1px; background: var(--uxe-line); }
.project-list-panel, .project-detail-panel, .studio-files, .studio-editor, .studio-output,
.repair-grid > *, .design-grid > *, .media-grid > * { background-color: rgba(7,11,18,.94) !important; }
.project-list button, .history-item, .core-module-list > *, .core-provider-list > * { border-color: var(--uxe-line); }
.project-list button:hover, .history-item:hover { border-color: rgba(56,189,248,.33); background: rgba(56,189,248,.06); }
.project-list button.active { border-color: rgba(52,211,153,.44); box-shadow: inset 3px 0 var(--uxe-emerald); }
.editor-shell, .code-editor { background: #070b11; }
.code-editor { color: #d9e5f2; caret-color: var(--uxe-cyan); }
.line-numbers { color: #415064; background: #05080d; border-color: var(--uxe-line); }
.output-tab.active, .repair-filter.active, #design-presets button.active { color: #fff; border-color: rgba(56,189,248,.4); background: rgba(56,189,248,.12); }

#login-screen { background: radial-gradient(circle at 50% 30%, rgba(14,165,233,.18), transparent 34%), #04070b; }
#login-screen::before { content:""; position:absolute; width:460px; height:460px; border:1px solid rgba(56,189,248,.12); border-radius:50%; box-shadow: 0 0 100px rgba(14,165,233,.09), inset 0 0 80px rgba(52,211,153,.04); }
#login-screen > * { position:relative; z-index:1; }
.brand-login-logo { filter: drop-shadow(0 20px 45px rgba(56,189,248,.18)); }
#login-title { letter-spacing: .24em; }
#login-screen input { width: 340px; min-height: 50px; border-radius: 13px; }
#unlock-button { min-height: 46px; color: #031018; background: linear-gradient(110deg, #67d7ff, #49e2b6); box-shadow: 0 14px 38px rgba(14,165,233,.23); }

.uxe-command-overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:start center; padding-top:min(14vh,130px); background:rgba(1,4,8,.74); backdrop-filter:blur(12px); }
.uxe-command-overlay[hidden] { display:none; }
.uxe-command-dialog { width:min(720px, calc(100vw - 32px)); overflow:hidden; border:1px solid rgba(56,189,248,.28); border-radius:20px; background:#0a1019; box-shadow:0 36px 110px rgba(0,0,0,.7); }
.uxe-command-head { display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--uxe-line); }
.uxe-command-head input { flex:1; min-height:46px; border:0; background:transparent; font-size:17px; }
.uxe-command-head kbd { color:#8190a4; border:1px solid var(--uxe-line); border-radius:7px; padding:4px 7px; font:10px ui-monospace,monospace; }
.uxe-command-list { max-height:430px; overflow:auto; padding:10px; }
.uxe-command-item { width:100%; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; padding:12px; text-align:left; color:#dbe7f3; border:1px solid transparent; border-radius:12px; }
.uxe-command-item:hover, .uxe-command-item.active { border-color:rgba(56,189,248,.28); background:rgba(56,189,248,.08); }
.uxe-command-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; color:var(--uxe-cyan); background:rgba(56,189,248,.1); font-weight:900; }
.uxe-command-item small { display:block; margin-top:3px; color:#78879b; }
.uxe-command-item em { color:#66758a; font:9px ui-monospace,monospace; font-style:normal; }
.uxe-command-empty { padding:34px; text-align:center; color:#7c8ca0; }
.uxe-readiness { width:min(620px, calc(100vw - 32px)); }
.uxe-readiness-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:16px; }
.uxe-readiness-card { padding:14px; border:1px solid var(--uxe-line); border-radius:13px; background:rgba(255,255,255,.025); }
.uxe-readiness-card span { display:block; color:#8291a5; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.uxe-readiness-card strong { display:block; margin-top:8px; color:#f8fafc; }
.uxe-readiness-foot { padding:0 16px 16px; color:#7f8ea2; font-size:11px; line-height:1.6; }

@media (max-width: 1180px) {
  #main-dashboard > aside { width:235px; }
  .app-topbar-main { align-items:flex-start; }
  .workspace-nav { overflow-x:auto; max-width:calc(100vw - 300px); }
  #mission-count { display:none; }
}
@media (max-width: 820px) {
  #main-dashboard { display:block; overflow:auto; }
  #main-dashboard > aside { width:100%; height:auto; max-height:150px; border-right:0; border-bottom:1px solid var(--uxe-line); }
  .brand-sidebar { min-height:60px; }
  #agent-list { display:flex; overflow-x:auto; }
  #agent-list .agent-card { min-width:145px; }
  .app-topbar { position:sticky; top:0; z-index:20; }
  .app-topbar-main { display:block; }
  .active-agent-badge { display:none; }
  .workspace-nav { max-width:100%; }
  .system-controls { overflow-x:auto; }
  .workspace-panel { min-height:calc(100vh - 220px); }
  .project-grid, .studio-grid, .repair-grid, .design-grid, .media-grid { display:block !important; overflow:auto; }
  .uxe-readiness-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important; } }