/* AuraOne · Robotics Studio Open · redesign tokens */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Paper & ink — warm neutral foundation */
  --ro-paper: oklch(0.985 0.005 75);
  --ro-paper-2: oklch(0.965 0.006 75);
  --ro-paper-3: oklch(0.94 0.008 75);
  --ro-paper-4: oklch(0.91 0.009 75);
  --ro-ink: oklch(0.18 0.012 60);
  --ro-ink-2: oklch(0.32 0.01 60);
  --ro-ink-3: oklch(0.5 0.008 60);
  --ro-ink-4: oklch(0.65 0.006 60);
  --ro-line: oklch(0.9 0.005 75);
  --ro-line-2: oklch(0.93 0.005 75);
  --ro-line-3: oklch(0.96 0.005 75);
  --ro-line-strong: oklch(0.84 0.007 75);

  /* Accent — AuraOne mint/teal */
  --ro-accent: oklch(0.55 0.13 195);
  --ro-accent-2: oklch(0.62 0.13 185);
  --ro-accent-soft: oklch(0.95 0.04 195);
  --ro-accent-line: oklch(0.84 0.07 195);
  --ro-accent-ink: oklch(0.32 0.1 195);

  /* Secondary accent — AuraOne violet for "intelligence" surfaces */
  --ro-violet: oklch(0.5 0.18 285);
  --ro-violet-soft: oklch(0.95 0.04 285);

  /* Semantic */
  --ro-ok: oklch(0.55 0.12 155);
  --ro-ok-soft: oklch(0.95 0.05 155);
  --ro-ok-line: oklch(0.82 0.09 155);
  --ro-ok-ink: oklch(0.36 0.1 155);

  --ro-warn: oklch(0.6 0.14 65);
  --ro-warn-soft: oklch(0.95 0.05 70);
  --ro-warn-line: oklch(0.84 0.1 70);
  --ro-warn-ink: oklch(0.42 0.12 60);

  --ro-fail: oklch(0.55 0.2 25);
  --ro-fail-soft: oklch(0.95 0.05 25);
  --ro-fail-line: oklch(0.84 0.09 25);
  --ro-fail-ink: oklch(0.4 0.16 25);

  /* Type */
  --ro-display: 'Instrument Serif', 'Times New Roman', serif;
  --ro-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --ro-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Geometry */
  --ro-r-xs: 4px;
  --ro-r-sm: 6px;
  --ro-r: 10px;
  --ro-r-lg: 14px;
  --ro-r-xl: 20px;

  /* Shadow */
  --ro-shadow-1: 0 1px 0 oklch(0.92 0.005 75);
  --ro-shadow-2: 0 2px 6px -2px rgba(20, 16, 12, 0.06), 0 0 0 0.5px rgba(20, 16, 12, 0.04);
  --ro-shadow-3: 0 12px 32px -10px rgba(20, 16, 12, 0.14), 0 1px 2px rgba(20, 16, 12, 0.06);
  --ro-shadow-inset: inset 0 1px 0 oklch(0.99 0.004 75);
}

/* Dark theme */
[data-ro-theme="dark"] {
  --ro-paper: oklch(0.18 0.01 200);
  --ro-paper-2: oklch(0.215 0.012 200);
  --ro-paper-3: oklch(0.25 0.013 200);
  --ro-paper-4: oklch(0.29 0.014 200);
  --ro-ink: oklch(0.96 0.006 75);
  --ro-ink-2: oklch(0.82 0.006 75);
  --ro-ink-3: oklch(0.62 0.006 75);
  --ro-ink-4: oklch(0.48 0.006 75);
  --ro-line: oklch(0.3 0.012 200);
  --ro-line-2: oklch(0.255 0.012 200);
  --ro-line-3: oklch(0.225 0.011 200);
  --ro-line-strong: oklch(0.36 0.013 200);

  --ro-accent: oklch(0.74 0.14 185);
  --ro-accent-2: oklch(0.8 0.13 185);
  --ro-accent-soft: oklch(0.28 0.07 195);
  --ro-accent-line: oklch(0.4 0.1 195);
  --ro-accent-ink: oklch(0.86 0.13 185);

  --ro-ok: oklch(0.75 0.14 155);
  --ro-ok-soft: oklch(0.27 0.06 155);
  --ro-ok-line: oklch(0.38 0.1 155);
  --ro-ok-ink: oklch(0.84 0.13 155);

  --ro-warn: oklch(0.78 0.13 75);
  --ro-warn-soft: oklch(0.3 0.07 70);
  --ro-warn-line: oklch(0.42 0.11 70);
  --ro-warn-ink: oklch(0.84 0.13 75);

  --ro-fail: oklch(0.72 0.18 25);
  --ro-fail-soft: oklch(0.3 0.09 25);
  --ro-fail-line: oklch(0.42 0.13 25);
  --ro-fail-ink: oklch(0.82 0.16 25);

  --ro-shadow-1: 0 1px 0 rgba(0,0,0,0.4);
  --ro-shadow-2: 0 2px 6px -2px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(0,0,0,0.5);
  --ro-shadow-3: 0 12px 32px -10px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --ro-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* App shell */
.ro {
  font-family: var(--ro-sans);
  color: var(--ro-ink);
  background: var(--ro-paper);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ro *, .ro *::before, .ro *::after { box-sizing: border-box; }
.ro a { color: inherit; text-decoration: none; }
.ro button { font-family: inherit; }
.ro ::-webkit-scrollbar { width: 10px; height: 10px; }
.ro ::-webkit-scrollbar-track { background: transparent; }
.ro ::-webkit-scrollbar-thumb { background: var(--ro-line); border: 2px solid var(--ro-paper); border-radius: 999px; }
.ro ::-webkit-scrollbar-thumb:hover { background: var(--ro-ink-4); }

/* Atoms */
.ro-mono { font-family: var(--ro-mono); font-feature-settings: 'ss01'; letter-spacing: 0; }
.ro-display { font-family: var(--ro-display); letter-spacing: -0.015em; line-height: 1.02; }
.ro-display-it { font-family: var(--ro-display); font-style: italic; letter-spacing: -0.015em; line-height: 1.02; }
.ro-eyebrow { font-family: var(--ro-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ro-ink-3); }
.ro-eyebrow-mono { font-family: var(--ro-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ro-ink-3); }
.ro-dim { color: var(--ro-ink-3); }
.ro-dim2 { color: var(--ro-ink-4); }
.ro-divider { height: 1px; background: var(--ro-line); border: 0; margin: 0; }
.ro-vdiv { width: 1px; background: var(--ro-line); align-self: stretch; }

.ro-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 7px;
  border-radius: 999px;
  font-family: var(--ro-mono); font-size: 10.5px; font-weight: 500;
  background: var(--ro-paper-3); color: var(--ro-ink-2);
  border: 1px solid transparent;
}
.ro-pill.is-ok { background: var(--ro-ok-soft); color: var(--ro-ok-ink); }
.ro-pill.is-warn { background: var(--ro-warn-soft); color: var(--ro-warn-ink); }
.ro-pill.is-fail { background: var(--ro-fail-soft); color: var(--ro-fail-ink); }
.ro-pill.is-accent { background: var(--ro-accent-soft); color: var(--ro-accent-ink); }
.ro-pill.is-preview { background: var(--ro-accent-soft); color: var(--ro-accent-ink); border-color: var(--ro-accent-line); }
.ro-pill.is-outline { background: transparent; border-color: var(--ro-line); }

.ro-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--ro-ink-4); flex: 0 0 auto; }
.ro-dot.is-ok { background: var(--ro-ok); }
.ro-dot.is-warn { background: var(--ro-warn); }
.ro-dot.is-fail { background: var(--ro-fail); }
.ro-dot.is-accent { background: var(--ro-accent); }
.ro-dot.is-pulse { box-shadow: 0 0 0 0 var(--ro-accent); animation: ro-pulse 1.8s infinite; }
@keyframes ro-pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.55 0.13 195 / 0.6); }
  100% { box-shadow: 0 0 0 10px oklch(0.55 0.13 195 / 0); }
}

.ro-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border-radius: var(--ro-r-sm);
  background: var(--ro-paper); color: var(--ro-ink);
  border: 1px solid var(--ro-line-strong);
  font: 500 12px/1 var(--ro-sans);
  letter-spacing: -0.005em;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background .14s, border-color .14s, transform .14s;
}
.ro-btn:hover { background: var(--ro-paper-2); border-color: var(--ro-ink-4); }
.ro-btn:active { transform: translateY(0.5px); }
.ro-btn.is-preview-download {
  background: var(--ro-accent-soft);
  border-color: var(--ro-accent-line);
  color: var(--ro-accent-ink);
  text-decoration: none;
}
.ro-btn.is-preview-download:hover {
  background: var(--ro-paper-2);
  border-color: var(--ro-accent);
}
.ro-btn.is-primary {
  background: var(--ro-ink); color: var(--ro-paper); border-color: var(--ro-ink);
}
.ro-btn.is-primary:hover { background: oklch(from var(--ro-ink) calc(l + 0.08) c h); }
.ro-btn.is-accent {
  background: linear-gradient(180deg, var(--ro-accent-2), var(--ro-accent));
  color: oklch(0.18 0.01 200);
  border-color: oklch(from var(--ro-accent) calc(l - 0.1) c h);
  box-shadow: var(--ro-shadow-2), inset 0 1px 0 oklch(0.96 0.04 195 / 0.4);
}
.ro-btn.is-accent:hover { filter: brightness(1.05); }
.ro-btn.is-ghost { background: transparent; border-color: transparent; color: var(--ro-ink-2); }
.ro-btn.is-ghost:hover { background: var(--ro-paper-3); color: var(--ro-ink); }
.ro-btn.is-sm { height: 24px; padding: 0 9px; font-size: 11.5px; border-radius: 5px; }
.ro-btn.is-lg { height: 36px; padding: 0 16px; font-size: 13px; border-radius: 8px; }

.ro-input {
  width: 100%; height: 30px;
  padding: 0 11px;
  background: var(--ro-paper);
  border: 1px solid var(--ro-line-strong);
  border-radius: var(--ro-r-sm);
  font: 500 12px var(--ro-mono);
  color: var(--ro-ink);
  outline: none;
}
.ro-input:focus { border-color: var(--ro-accent); box-shadow: 0 0 0 3px var(--ro-accent-soft); }

.ro-card {
  background: var(--ro-paper);
  border: 1px solid var(--ro-line);
  border-radius: var(--ro-r);
}
.ro-card.is-flush { background: var(--ro-paper-2); }
.ro-card.is-raised { box-shadow: var(--ro-shadow-2); }

.ro-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border: 1px solid var(--ro-line-strong);
  border-bottom-width: 1.5px;
  border-radius: 4px;
  background: var(--ro-paper);
  font: 500 10.5px/1 var(--ro-mono);
  color: var(--ro-ink-2);
}

.ro-command-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 90px;
  background: oklch(0.12 0.015 200 / 0.2);
  backdrop-filter: blur(8px);
}

.ro-command-panel {
  width: min(640px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 132px));
  overflow: hidden;
  border: 1px solid var(--ro-line-strong);
  border-radius: 14px;
  background: var(--ro-paper);
  color: var(--ro-ink);
  box-shadow: var(--ro-shadow-3);
}

.ro-command-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 14px;
  border-bottom: 1px solid var(--ro-line);
  background: var(--ro-paper-2);
}

.ro-command-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ro-ink);
  font: 500 14px var(--ro-sans);
}

.ro-command-search input::placeholder { color: var(--ro-ink-4); }

.ro-command-results {
  max-height: min(560px, calc(100vh - 188px));
  overflow: auto;
  padding: 8px;
}

.ro-command-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ro-ink);
  cursor: pointer;
  text-align: left;
}

.ro-command-item.is-active,
.ro-command-item:hover {
  background: var(--ro-accent-soft);
  border-color: var(--ro-accent-line);
}

.ro-command-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ro-command-item-main strong {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.ro-command-item-main small {
  font: 500 10.5px var(--ro-mono);
  color: var(--ro-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.ro-command-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ro-ink-3);
}

.ro-command-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 34px 20px 38px;
  align-items: center;
  color: var(--ro-ink-3);
  font-size: 12px;
}

.ro-command-empty .ro-display-it {
  color: var(--ro-ink);
  font-size: 26px;
}

.ro-link { color: var(--ro-accent-ink); text-decoration: none; border-bottom: 1px solid var(--ro-accent-line); transition: border-color .14s; }
.ro-link:hover { border-color: var(--ro-accent); }

/* Tab nav */
.ro-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 2px 10px;
  font: 500 13px var(--ro-sans);
  color: var(--ro-ink-3);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: color .12s, border-color .12s;
}
.ro-tab:hover { color: var(--ro-ink); }
.ro-tab.is-active { color: var(--ro-ink); border-bottom-color: var(--ro-accent); }
.ro-tab .ro-tab-icon { width: 14px; height: 14px; opacity: 0.85; }

/* Sensor row */
.ro-sensor {
  display: flex; align-items: center; justify-content: space-between;
  height: 30px; padding: 0 10px;
  border-radius: 7px;
  border: 1px solid var(--ro-line);
  background: var(--ro-paper);
  font-size: 12px;
}
.ro-sensor + .ro-sensor { margin-top: 5px; }
.ro-sensor.is-active { border-color: var(--ro-accent-line); background: var(--ro-accent-soft); }

/* Episode card */
.ro-ep {
  background: var(--ro-paper);
  border: 1px solid var(--ro-line);
  border-radius: var(--ro-r);
  overflow: hidden;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.ro-ep:hover {
  border-color: var(--ro-ink-4);
  box-shadow: var(--ro-shadow-2);
  transform: translateY(-1px);
}
.ro-ep.is-selected { border-color: var(--ro-accent); box-shadow: 0 0 0 3px var(--ro-accent-soft); }

/* Phase ribbon block (used in scrub) */
.ro-phase-pill {
  position: relative;
  height: 28px;
  display: flex; align-items: center; justify-content: center;
  font: 500 11px var(--ro-mono);
  color: var(--ro-ink-2);
  background: var(--ro-paper-3);
  border-right: 1px solid var(--ro-paper);
}
.ro-phase-pill:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.ro-phase-pill:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-right: none; }
.ro-phase-pill.is-current { background: var(--ro-ink); color: var(--ro-paper); }
.ro-phase-pill.is-past { background: var(--ro-paper-4); color: var(--ro-ink-2); }