:root {
  --page: #fff;
  --soft: #f6f6f6;
  --soft-2: #fafafa;
  --ink: #171717;
  --muted: #777;
  --line: #e6e6e6;
  --line-strong: #d3d3d3;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Google Sans", "Segoe UI", Arial, sans-serif; letter-spacing: 0; }
body { min-height: 100vh; overflow-x: hidden; background: var(--page); color: var(--ink); }
button, input, select { font: inherit; }

.topbar {
  height: 52px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-text { color: #111; font-size: 1rem; font-weight: 600; text-decoration: none; }
.back-link { height: 32px; padding: 0 9px; border-radius: 7px; color: #555; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 480; text-decoration: none; }
.back-link:hover { background: var(--soft); }
.back-link .material-symbols-rounded { font-size: 17px; }

.layout { width: min(1220px, calc(100vw - 32px)); margin: 0 auto; padding: 24px 0 22px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 520px); align-items: end; gap: 32px; margin-bottom: 22px; }
.eyebrow { grid-column: 1; color: #777; font-size: .72rem; font-weight: 560; text-transform: uppercase; }
h1 { grid-column: 1; margin-top: 5px; max-width: 650px; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.08; font-weight: 580; }
.lede { grid-column: 2; grid-row: 1 / span 2; color: #666; max-width: 500px; font-size: .88rem; line-height: 1.55; }

.builder-shell {
  height: clamp(560px, calc(100vh - 220px), 700px);
  min-height: 560px;
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.model-panel, .lanes-panel { min-height: 0; display: flex; flex-direction: column; background: #fff; }
.model-panel { padding: 14px 10px 10px; border-right: 1px solid var(--line); background: var(--soft-2); }
.lanes-panel { padding: 14px; }
.panel-heading { min-height: 28px; padding: 0 4px; display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 560; }
.panel-heading small { margin-left: auto; color: #999; font-size: .7rem; font-weight: 450; }

.model-tools { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 6px; margin: 8px 0; }
.model-search { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; display: flex; align-items: center; gap: 6px; }
.model-search .material-symbols-rounded { color: #888; font-size: 17px; }
.model-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #222; font-size: .77rem; }
.model-tools select { height: 34px; padding: 0 24px 0 8px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: #fff; color: #555; font-size: .72rem; }
.model-search:focus-within, .model-tools select:focus { border-color: #aaa; }
.selected-model-hint { min-height: 24px; padding: 3px 5px 7px; color: #888; font-size: .7rem; line-height: 1.35; }

.model-library { min-height: 0; flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 2px; scrollbar-width: thin; }
.model-card {
  position: relative;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  outline: 0;
}
.model-card:hover { background: #f0f0f0; }
.model-card.selected { border-color: #cfcfcf; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.model-name { color: #222; font-size: .79rem; font-weight: 540; }
.model-provider { margin-bottom: 2px; color: #8a8a8a; font-size: .65rem; font-weight: 500; }
.model-copy { margin-top: 3px; color: #7a7a7a; font-size: .68rem; line-height: 1.35; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }

.routing-profile-heading { margin-bottom: 12px; }
.routing-profile-tabs { margin-left: auto; padding: 2px; border-radius: 7px; background: var(--soft); display: inline-flex; gap: 1px; }
.routing-profile-tab { height: 28px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: #777; font-size: .72rem; font-weight: 500; cursor: pointer; }
.routing-profile-tab.active { background: #fff; color: #222; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.routing-lanes { min-height: 0; flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px; padding-right: 2px; }
.lane { min-height: 168px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; transition: border-color .15s, background .15s; }
.lane.drag-over { border-color: #9b9b9b; background: #fafafa; }
.lane-title { display: flex; align-items: center; gap: 7px; color: #222; font-size: .82rem; font-weight: 550; }
.lane-title .material-symbols-rounded { color: #666; font-size: 17px; font-variation-settings: "FILL" 0, "wght" 380, "GRAD" 0, "opsz" 18; }
.lane-copy { margin: 5px 0 9px; color: #858585; font-size: .68rem; line-height: 1.4; }
.drop-zone { min-height: 64px; display: grid; align-content: start; gap: 5px; }
.assigned-card { min-height: 42px; padding: 6px 7px 6px 9px; border-radius: 6px; background: var(--soft); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.assigned-card .model-provider { display: none; }
.assigned-card .model-name { margin: 0; font-size: .73rem; font-weight: 510; }
.assigned-card button { width: 27px; height: 27px; border: 0; border-radius: 5px; background: transparent; color: #888; display: grid; place-items: center; cursor: pointer; }
.assigned-card button:hover { background: #e7e7e7; color: #222; }
.assigned-card button .material-symbols-rounded { font-size: 16px; }
.empty-drop { min-height: 42px; padding: 0 8px; border: 1px dashed #d5d5d5; border-radius: 6px; color: #999; display: flex; align-items: center; font-size: .68rem; }
.lane-add-btn { width: 100%; min-height: 29px; margin-top: 5px; border: 0; border-radius: 6px; background: transparent; color: #666; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: .68rem; cursor: pointer; }
.lane-add-btn:hover:not(:disabled) { background: #f1f1f1; color: #222; }
.lane-add-btn:disabled { color: #aaa; cursor: default; }
.lane-add-btn .material-symbols-rounded { font-size: 15px; }

.control-strip { min-height: 52px; margin: 8px -14px -14px; padding: 8px 14px; border-top: 1px solid var(--line); background: #fff; display: flex; align-items: center; gap: 8px; }
.primary-action, .secondary-action { height: 36px; padding: 0 12px; border: 0; border-radius: 7px; display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 540; cursor: pointer; }
.primary-action { background: #171717; color: #fff; }
.primary-action {
  background: var(--z-action-gradient);
  box-shadow: var(--z-action-shadow);
}
.primary-action:hover { background: var(--z-action-gradient-hover); }
.secondary-action { background: var(--soft); color: #333; }
.primary-action .material-symbols-rounded, .secondary-action .material-symbols-rounded { font-size: 17px; }
.save-status { color: #666; font-size: .73rem; }

@media (max-width: 860px) {
  .layout { width: min(100% - 20px, 680px); padding-top: 18px; }
  .hero { display: block; }
  .lede { margin-top: 9px; }
  .builder-shell { height: auto; min-height: 0; grid-template-columns: 1fr; overflow: visible; }
  .model-panel { max-height: 430px; border-right: 0; border-bottom: 1px solid var(--line); }
  .lanes-panel { max-height: none; }
  .routing-lanes { grid-template-columns: 1fr; overflow: visible; }
  .control-strip { margin-bottom: -14px; background: #fff; }
}

@media (max-width: 480px) {
  .topbar { padding: 0 14px; }
  .model-tools { grid-template-columns: 1fr; }
  .builder-shell { border-radius: 8px; }
  .control-strip { flex-wrap: wrap; }
  .save-status { width: 100%; }
}