:root {
  color-scheme: dark;
  --bg: #111111;
  --surface: #19191c;
  --surface-2: #202024;
  --text: #f4f4f7;
  --muted: #777782;
  --muted-2: #5f5f69;
  --line: #34343a;
  --line-strong: #464650;
  --accent: #5547ed;
  --accent-blue: #4f74ff;
  --accent-purple: #7958f5;
  --error: #ff646f;
  --ok: #34d27b;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.hidden { display: none !important; }

/* Original Flovo meteor field: intentionally simple. */
#meteorLayer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.meteor {
  position: absolute;
  bottom: 100%;
  width: 2px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255,255,255,.96), rgba(255,255,255,0));
  opacity: .55;
  animation: meteor-fall linear forwards;
}
@keyframes meteor-fall {
  from { transform: translateY(0); opacity: .9; }
  to { transform: translateY(105vh); opacity: 0; }
}

.app-shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 48px 26px 82px;
}
.hero {
  width: min(100%, 660px);
  margin: 0 auto;
  padding-top: 4vh;
  text-align: center;
}
.hero h1 {
  margin: 0;
  font-size: 52px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: -2.3px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tagline {
  margin: 11px 0 29px;
  color: var(--muted);
  font-size: 17px;
  letter-spacing: -.1px;
}

.search-form {
  display: flex;
  width: min(100%, 480px);
  height: 46px;
  margin: 0 auto;
  filter: drop-shadow(0 7px 22px rgba(0,0,0,.12));
}
.search-form input {
  min-width: 0;
  flex: 1;
  padding: 0 15px;
  border: 1px solid #414148;
  border-right: 0;
  border-radius: 9px 0 0 9px;
  outline: none;
  color: #fff;
  background: #202023;
  transition: border-color .16s ease, background .16s ease;
}
.search-form input::placeholder { color: #62626b; }
.search-form input:focus {
  border-color: #6259d0;
  background: #222226;
}
.search-form button {
  position: relative;
  width: 92px;
  overflow: hidden;
  border: 0;
  border-radius: 0 9px 9px 0;
  background: linear-gradient(135deg, #4f69f4, #674be9);
  font-weight: 700;
  cursor: pointer;
  transition: filter .16s ease, transform .16s ease, opacity .16s ease;
}
.search-form button:hover:not(:disabled) { filter: brightness(1.08); }
.search-form button:active:not(:disabled) { transform: translateY(1px); }
.search-form button:disabled { opacity: .72; cursor: wait; }
.search-form[data-busy="true"] button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38%;
  height: 1px;
  background: rgba(255,255,255,.82);
  animation: search-progress 1s ease-in-out infinite;
}
@keyframes search-progress {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(370%); }
}

.view-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 17px;
  color: #e6e6e9;
  font-size: 12px;
}
.switch { display: inline-flex; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
  position: relative;
  width: 38px;
  height: 20px;
  border-radius: 20px;
  background: #626269;
  transition: background .2s ease;
}
.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s ease;
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid #8b82f3; outline-offset: 2px; }

.status-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 18px;
  margin-top: 15px;
  color: var(--muted);
  font-size: 11px;
}
.status-dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #707079;
}
.status-line[data-state="ready"] .status-dot,
#aiButton[data-state="ready"] .status-dot {
  background: var(--ok);
  box-shadow: 0 0 7px rgba(52,210,123,.28);
}
.status-line[data-state="busy"] .status-dot,
#aiButton[data-state="busy"] .status-dot { background: #f4bf4f; }
.status-line[data-state="error"] .status-dot,
#aiButton[data-state="error"] .status-dot { background: var(--error); }
.progress-wrap {
  width: min(100%, 360px);
  height: 2px;
  margin: 8px auto 0;
  overflow: hidden;
  background: #26262b;
}
.progress-bar {
  width: 0;
  height: 100%;
  background: #6255ef;
  transition: width .15s linear;
}
.cancel-generation {
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #888892;
  font-size: 10px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cancel-generation:hover { color: #c3c3ca; }

.corner-button {
  position: fixed;
  z-index: 8;
  top: 17px;
  padding: 8px 13px;
  border: 1px solid #33333a;
  border-radius: 999px;
  color: #a9a9b1;
  background: rgba(24,24,26,.64);
  backdrop-filter: blur(7px);
  font-size: 11px;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.corner-button:hover {
  color: #e2e2e7;
  border-color: #494951;
  background: rgba(29,29,32,.78);
}
.corner-left { left: 18px; }
.corner-right { right: 18px; display: flex; align-items: center; gap: 7px; }

.result {
  position: relative;
  width: min(1500px, 100%);
  margin: 32px auto 0;
}
.result-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 7px 6px;
  color: #666672;
  font-size: 11px;
}
.result-copy { text-align: center; }
.result-heading strong {
  margin-right: 12px;
  color: #dddde2;
  font-size: 14px;
  font-weight: 650;
}
.result[aria-busy="true"] .result-heading .result-copy span::after {
  content: " · building live";
  color: #716bd1;
}
.tree-tools {
  position: absolute;
  right: 5px;
  display: flex;
  gap: 4px;
}
.tree-tools button {
  min-width: 30px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #666671;
  font-size: 9px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.tree-tools button:hover:not(:disabled) {
  color: #b2b2bc;
  border-color: #303037;
  background: rgba(31,31,35,.72);
}
.tree-tools button:disabled { opacity: .35; cursor: default; }

.tree-stage {
  position: relative;
  width: 100%;
  height: min(62vh, 680px);
  min-height: 430px;
  overflow: hidden;
  outline: none;
  background: radial-gradient(circle at 50% 48%, rgba(85,71,237,.028), transparent 42%);
  border-top: 1px solid rgba(255,255,255,.018);
  touch-action: none;
}
.tree-stage::before,
.tree-stage::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 28px;
  pointer-events: none;
}
.tree-stage::before { top: 0; background: linear-gradient(var(--bg), transparent); }
.tree-stage::after { bottom: 0; background: linear-gradient(transparent, var(--bg)); }
.tree-stage svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.tree-stage svg:active { cursor: grabbing; }
.tree-node { outline: none; opacity: 1; transition: opacity .22s ease; }
.tree-node text {
  fill: #ededf1;
  user-select: none;
  pointer-events: none;
  transition: fill .15s ease, opacity .15s ease;
}
/* Invisible hit target: preserves the dot-and-label look while giving pointers
   and touch a real, full-node-sized target instead of a 5px circle. */
.tree-node .node-hit {
  fill: transparent;
  stroke: none;
  cursor: pointer;
}
.tree-node.pending .node-hit { cursor: default; }
.tree-link { transition: opacity .22s ease; }
.tree-node .node-dot {
  fill: #85858d;
  stroke: var(--bg);
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill .15s ease, r .15s ease, stroke .15s ease;
}
.tree-node.root .node-dot,
.tree-node.branch .node-dot { fill: var(--accent); }
.tree-node.root text { fill: #fff; font-weight: 700; }
.tree-node.branch text { fill: #e6e5f7; }
.tree-node.leaf:hover .node-dot,
.tree-node.leaf:focus-visible .node-dot { fill: #a4a4ad; }
.tree-node.branch:hover .node-dot,
.tree-node.branch:focus-visible .node-dot { fill: #6b5cf6; }
.tree-node:hover text,
.tree-node:focus-visible text { fill: #fff; }
.tree-node:focus-visible .node-dot { stroke: #a7a0ff; stroke-width: 2; }
.selection-ring {
  fill: none;
  stroke: #8b82f3;
  stroke-width: 1.4;
  opacity: .82;
  pointer-events: none;
  transition: opacity .15s ease;
}
.tree-node.selected text { fill: #fff; }
.tree-link {
  fill: none;
  stroke: #4c4c55;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.tree-link.circuit { stroke: #5750d8; stroke-opacity: .68; }
.tree-node.pending text { fill: #686872; }
.tree-node.pending .node-dot {
  fill: #222229;
  stroke: #5e55d2;
  stroke-width: 1.3;
  stroke-dasharray: 2 2;
  cursor: default;
  animation: pending-node 1.4s ease-in-out infinite;
}
.tree-link.pending-link {
  stroke-dasharray: 3 3;
  opacity: .5 !important;
  animation: pending-link 1.6s linear infinite;
}
@keyframes pending-node {
  0%, 100% { opacity: .42; }
  50% { opacity: .95; }
}
@keyframes pending-link { to { stroke-dashoffset: -12; } }

.node-actions {
  position: fixed;
  z-index: 10;
  bottom: 48px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  transform: translateX(-50%);
  padding: 6px 8px 6px 12px;
  border: 1px solid #393941;
  border-radius: 999px;
  background: rgba(22,22,25,.92);
  backdrop-filter: blur(9px);
  box-shadow: 0 9px 30px rgba(0,0,0,.32);
  font-size: 12px;
}
.node-actions span {
  max-width: 230px;
  overflow: hidden;
  color: #bcbcc4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.node-actions #expandNodeButton {
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.node-actions #expandNodeButton:hover:not(:disabled) { filter: brightness(1.08); }
.icon-button {
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: #7e7e87;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.icon-button:hover { color: #c0c0c8; }
.download-button {
  position: fixed;
  right: 24px;
  bottom: 25px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f69f4, #674be9);
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  font-size: 20px;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.download-button:hover { transform: translateY(-1px); filter: brightness(1.08); }

.footer-links {
  position: fixed;
  z-index: 6;
  bottom: 10px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted-2);
  font-size: 10px;
}
.footer-links a { color: #696a78; text-decoration: none; }
.footer-links a:hover { color: #8c88dd; }

.flovo-dialog { padding: 0; border: 0; background: transparent; color: #eee; }
.flovo-dialog::backdrop { background: rgba(0,0,0,.66); backdrop-filter: blur(2px); }
.dialog-card {
  width: min(420px, calc(100vw - 34px));
  padding: 22px;
  border: 1px solid #36363d;
  border-radius: 11px;
  background: #18181b;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.dialog-card h2 { margin: 0 0 11px; font-size: 17px; }
.dialog-card p { color: #96969f; font-size: 12px; line-height: 1.55; }
.install-facts {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 20px;
  margin: 18px 0;
  padding: 13px 0;
  border-top: 1px solid #2b2b31;
  border-bottom: 1px solid #2b2b31;
  color: #aaaab3;
  font-size: 11px;
}
.install-facts span:nth-child(even) { color: #ddd; text-align: right; }
.dialog-note { color: #70707a !important; font-size: 10px !important; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.primary-button, .secondary-button {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  cursor: pointer;
}
.primary-button { border: 0; background: var(--accent); font-weight: 700; }
.secondary-button { border: 1px solid #3a3a42; background: #222228; color: #aaa; }
.dialog-title-row { display: flex; align-items: center; justify-content: space-between; }
.history-card { max-height: 70vh; overflow: auto; }
.history-list { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.history-entry {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid #303036;
  border-radius: 8px;
  background: #202024;
  text-align: left;
  cursor: pointer;
}
.history-entry:hover { border-color: #4d4886; }
.history-entry strong { font-size: 12px; }
.history-entry small { color: #6f6f78; font-size: 9px; }
.history-empty { padding: 25px 0; color: #666; font-size: 11px; text-align: center; }
.text-button { padding: 3px 0; border: 0; background: transparent; color: #777; font-size: 10px; cursor: pointer; }
.text-button:hover { color: #aaa; }

button:focus-visible, input:focus-visible { outline: 2px solid rgba(139,130,243,.82); outline-offset: 2px; }

@media (max-width: 700px) {
  .app-shell { padding: 68px 10px 70px; }
  .hero { padding-top: 3vh; }
  .hero h1 { font-size: 40px; letter-spacing: -1.7px; }
  .tagline { margin-bottom: 24px; font-size: 15px; }
  .search-form { width: min(94%, 480px); }
  .view-switch { font-size: 11px; }
  .result { margin-top: 24px; }
  .result-heading { justify-content: flex-start; min-height: 35px; padding-left: 10px; padding-right: 10px; }
  .result-copy { max-width: calc(100% - 92px); text-align: left; }
  .result-heading strong { display: block; margin: 0 0 2px; }
  .result-heading span { font-size: 9px; }
  .tree-tools { right: 8px; }
  .tree-stage { height: 62vh; min-height: 390px; }
  .footer-links { right: 10px; justify-content: center; }
  .download-button { right: 14px; bottom: 52px; }
  .corner-button { top: 13px; }
  .corner-left { left: 12px; }
  .corner-right { right: 12px; }
  .node-actions { bottom: 58px; max-width: calc(100vw - 28px); }
  .node-actions span { max-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .meteor { display: none; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.status-action {
  padding: 1px 4px;
  border: 0;
  background: transparent;
  color: #8c88dd;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.status-action:hover { color: #b1adff; }
.danger-text { margin-top: -6px; color: #9a6f78; }
.danger-text:hover { color: #d897a5; }

/* Local model picker: kept deliberately quiet so the home screen stays Flovo. */
.model-dialog-card { width: min(620px, calc(100vw - 30px)); max-height: min(86vh, 760px); overflow: auto; }
.model-choices { display: grid; gap: 8px; margin: 18px 0 16px; }
.model-choice {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 11px; align-items: center;
  padding: 12px 13px; border: 1px solid #33333a; border-radius: 9px;
  background: #18181b; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.model-choice:hover { border-color: #474751; background: #1b1b1f; }
.model-choice:has(input:checked) { border-color: #6258e7; background: #1b1a25; }
.model-choice input { accent-color: #6657ef; }
.model-choice-main { min-width: 0; display: grid; gap: 3px; }
.model-choice-title { font-size: 13px; color: #efeff4; font-weight: 650; }
.model-choice-title em {
  margin-left: 6px; padding: 2px 5px; border: 1px solid #3b3a4d; border-radius: 999px;
  color: #9c95ef; font-size: 9px; font-style: normal; font-weight: 600;
}
.model-choice-desc { color: #85858f; font-size: 10px; line-height: 1.4; }
.model-choice-meta { display: grid; justify-items: end; gap: 3px; color: #a4a4ad; font-size: 10px; white-space: nowrap; }
.model-choice-meta b { color: #43ca83; font-size: 9px; font-weight: 600; }
.compact-facts { margin-top: 8px; }
@media (max-width: 560px) {
  .model-choice { grid-template-columns: 18px 1fr; }
  .model-choice-meta { grid-column: 2; justify-items: start; grid-auto-flow: column; gap: 8px; }
}
.model-choice-meta b { text-transform: none; }
.model-choice[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* Development-only debug overlay (?debug=1). Never shown in normal use. */
.tree-debug .debug-node-box {
  fill: none;
  stroke: rgba(255, 92, 120, .55);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.tree-debug .debug-subtree-box {
  fill: rgba(85, 71, 237, .05);
  stroke: rgba(120, 110, 255, .35);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.flovo-debug-panel {
  position: fixed;
  z-index: 40;
  top: 58px;
  left: 12px;
  max-width: 260px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid #34343a;
  border-radius: 8px;
  background: rgba(12, 12, 14, .9);
  color: #9fe6c0;
  font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
  pointer-events: none;
}