/* app-shell.css — area autenticada: sidebar fixa + conteudo */

.app-shell { min-height: 100vh; background: var(--surface-soft); }

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--brand-teal-deep); border-right: 1px solid var(--hairline-dark);
  display: flex; flex-direction: column; z-index: 40;
}
.sidebar .brand { color: var(--on-dark); }
.sidebar .brand .logo { background: var(--brand-green); color: var(--on-primary); }
.sidebar .sb-brand { padding: 20px 22px; border-bottom: 1px solid var(--hairline-dark); }
.sidebar nav { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.sb-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md);
  color: var(--on-dark-muted); font-weight: 500; font-size: 0.93rem; transition: all .13s;
}
.sb-link:hover { background: rgba(255,255,255,.08); color: var(--brand-green); }
.sb-link.active { background: var(--brand-green); color: var(--on-primary); }
.sb-link.active:hover { color: var(--on-primary); }
.sb-link svg { flex: none; }

.sb-footer { padding: 14px; border-top: 1px solid var(--hairline-dark); display: flex; align-items: center; gap: 11px; }
.sb-footer .who { flex: 1; min-width: 0; }
.sb-footer .who b { display: block; color: var(--on-dark); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-footer .who span { font-size: 0.78rem; color: var(--on-dark-muted); }
.sb-footer .sb-actions { display: flex; gap: 4px; }
.sb-footer .sb-actions a,
.sb-footer .sb-actions button { display: grid; place-items: center; padding: 7px; border-radius: 8px; color: var(--on-dark-muted); }
.sb-footer .sb-actions a:hover,
.sb-footer .sb-actions button:hover { background: rgba(255,255,255,.08); color: var(--brand-green); }

.app-main { padding-left: var(--sidebar-w); }
.app-content { padding: 32px clamp(20px, 4vw, 44px) 64px; max-width: 1440px; }
.page-head { margin-bottom: 28px; }
.page-head h1 { font-size: 36px; font-weight: 500; }
.page-head p { margin-top: 6px; }
.page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }

/* Stat cards */
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 28px; }
.stat-card { padding: 22px; display: flex; align-items: center; gap: 16px; }
.stat-card .si { width: 48px; height: 48px; border-radius: var(--rounded-lg); background: var(--brand-green-soft); color: var(--brand-green-dark); display: grid; place-items: center; flex: none; }
.stat-card .sv { font-size: 30px; font-weight: 500; line-height: 1; color: var(--ink); }
.stat-card .sl { color: var(--text-muted); font-size: 0.88rem; }

/* Quick actions */
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quick-card { padding: 20px; display: flex; align-items: center; gap: 14px; }
.quick-card .qi { width: 44px; height: 44px; border-radius: var(--rounded-lg); background: var(--brand-green); color: var(--on-primary); display: grid; place-items: center; flex: none; }
.quick-card h4 { font-size: 0.98rem; }
.quick-card span { font-size: 0.84rem; color: var(--text-soft); }

/* Two col dashboard */
.dash-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-top: 32px; }

/* Trail cards */
.trail-list { display: flex; flex-direction: column; gap: 14px; }
.trail-row { display: flex; gap: 16px; padding: 14px; cursor: pointer; align-items: center; }
.trail-row .thumb { width: 88px; height: 64px; border-radius: var(--r-md); overflow: hidden; flex: none; }
.trail-row .thumb img { width: 100%; height: 100%; }
.trail-row .info { flex: 1; min-width: 0; }
.trail-row .info h4 { font-size: 0.98rem; margin-bottom: 4px; }
.trail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trail-card { overflow: hidden; cursor: pointer; }
.trail-card .cover { height: 150px; position: relative; }
.trail-card .cover img { width: 100%; height: 100%; }
.trail-card .biome-tag { position: absolute; top: 12px; left: 12px; color: var(--on-dark); padding: 4px 11px; border-radius: var(--rounded-sm); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; }
.trail-card .body { padding: 18px; }
.trail-card .meta { display: flex; gap: 14px; color: var(--text-soft); font-size: 0.82rem; margin-top: 10px; }
.trail-card .meta span { display: inline-flex; align-items: center; gap: 5px; }

/* Side list */
.side-list { display: flex; flex-direction: column; }
.side-list a { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--border); }
.side-list a:last-child { border-bottom: none; }
.side-list .lbl { font-size: 0.82rem; color: var(--text-soft); }

/* Library cards */
.lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lib-card { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.lib-card .type-row { display: flex; align-items: center; justify-content: space-between; }
.type-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.type-article { background: #dbeafe; color: #1e40af; }
.type-video { background: #fce7f3; color: #be185d; }
.type-pdf { background: #fee2e2; color: #b91c1c; }
.type-docx { background: var(--brand-green-soft); color: var(--brand-green-dark); }
.lib-card h4 { font-size: 1rem; }
.lib-card .meta { font-size: 0.82rem; color: var(--text-soft); display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }

/* Catalog master-detail */
.catalog { display: grid; grid-template-columns: 340px 1fr; gap: 24px; }
.catalog .list { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.cat-item { padding: 14px; cursor: pointer; border: 1px solid var(--hairline); border-radius: var(--rounded-md); background: var(--canvas); transition: all .13s; }
.cat-item:hover { border-color: var(--brand-green-dark); }
.cat-item.active { border-color: var(--brand-green); background: var(--brand-green-soft); }
.cat-item .sci { font-style: italic; font-size: 0.82rem; color: var(--text-soft); }
.cat-detail { padding: 28px; }
.cat-detail .big-img { height: 240px; border-radius: var(--rounded-lg); overflow: hidden; margin-bottom: 20px; background: var(--brand-green-soft); }
.cat-detail .big-img img { width: 100%; height: 100%; }

/* Biomimetic curated bank */
.bio-page { display: flex; flex-direction: column; gap: 24px; }
.bio-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--rounded-xxl);
  background:
    radial-gradient(circle at 82% 18%, rgba(0,237,100,.18), transparent 28%),
    linear-gradient(135deg, var(--brand-teal-deep), #0b3b49);
  color: var(--on-dark);
  box-shadow: var(--shadow-3);
}
.bio-hero-panel h1 {
  max-width: 13ch;
  color: var(--on-dark);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.05;
  margin-top: 8px;
}
.bio-hero-panel p {
  max-width: 64ch;
  color: var(--on-dark-muted);
  margin-top: 14px;
}
.bio-eyebrow {
  display: inline-flex;
  color: var(--brand-green);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.bio-stat-row { display: flex; flex-wrap: wrap; gap: 10px; }
.bio-stat-row span {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 13px;
  border-radius: var(--rounded-full); background: var(--canvas); border: 1px solid var(--hairline);
  color: var(--text-muted); font-size: .86rem;
}
.bio-stat-row b { color: var(--brand-green-dark); }
.bio-hero-panel .bio-stat-row {
  justify-content: flex-end;
  max-width: 360px;
}
.bio-hero-panel .bio-stat-row span {
  background: rgba(255,255,255,.08);
  border-color: var(--hairline-dark);
  color: var(--on-dark-muted);
}
.bio-hero-panel .bio-stat-row b { color: var(--brand-green); }
.bio-toolbar {
  display: grid; grid-template-columns: minmax(260px, 1fr) 150px minmax(220px, 320px) auto;
  gap: 12px; align-items: center; margin-bottom: 24px;
}
.bio-toolbar .searchbox { max-width: none; }
.bio-toolbar-wide {
  margin-bottom: 0;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-lg);
  background: var(--canvas);
  box-shadow: var(--shadow-1);
}
.bio-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  align-self: flex-start;
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-full);
  background: var(--canvas);
  box-shadow: var(--shadow-1);
}
.bio-view-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: var(--rounded-full);
  color: var(--steel);
  font-size: 14px;
  font-weight: 700;
}
.bio-view-tabs a:hover { color: var(--brand-green-dark); }
.bio-view-tabs a.active {
  background: var(--ink);
  color: var(--on-dark);
}
.bio-graph-card {
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-sm); padding: 22px;
}
.bio-graph-card-large { padding: clamp(20px, 3vw, 32px); }
.bio-graph-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  margin-bottom: 16px;
}
.bio-graph-head h2, .bio-browser-head h2 { font-size: 1.15rem; }
.bio-graph-head p { margin-top: 4px; color: var(--text-muted); }
.bio-legend { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bio-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: .86rem; }
.bio-legend i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.bio-graph-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
.bio-graph-stage {
  min-height: 620px; border-radius: var(--rounded-md);
  background:
    radial-gradient(circle at 1px 1px, rgba(0, 30, 43, .09) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(180deg, #ffffff 0%, #f3f7f5 100%);
  border: 1px solid var(--hairline); overflow: hidden; position: relative;
}
.bio-graph-stage svg { width: 100%; height: 620px; display: block; cursor: grab; }
.bio-graph-stage svg:active { cursor: grabbing; }
.bio-graph-toolbar {
  position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 7px;
}
.bio-graph-toolbar span {
  background: rgba(255,255,255,.9); border: 1px solid var(--hairline);
  border-radius: var(--rounded-full); padding: 5px 10px; color: var(--text-muted);
  font-size: .76rem; font-weight: 700; box-shadow: var(--shadow-sm);
}
.graph-link {
  fill: none; stroke: #94a79d; stroke-opacity: .42; stroke-linecap: round;
  transition: stroke .18s ease, stroke-opacity .18s ease, stroke-width .18s ease, filter .18s ease;
  cursor: pointer; pointer-events: stroke;
}
.graph-link.active { stroke: #2563eb; stroke-opacity: .88; stroke-width: 4.5px; }
.graph-link.focused {
  stroke: var(--brand-green-dark);
  stroke-opacity: .98;
  stroke-width: 6.5px;
  filter: drop-shadow(0 0 6px rgba(0, 237, 100, .35));
}
.graph-link.dimmed { stroke-opacity: .12; }
.graph-node { cursor: grab; transition: opacity .18s ease; }
.graph-node:active { cursor: grabbing; }
.graph-node-core {
  stroke-width: 2.5; filter: url(#graphShadow);
  transition: stroke-width .18s ease, r .18s ease;
}
.graph-node-halo { opacity: .88; transition: opacity .18s ease; }
.graph-label rect {
  fill: rgba(255,255,255,.94); stroke: rgba(217,226,223,.95); stroke-width: 1;
  filter: drop-shadow(0 2px 5px rgba(0,30,43,.08));
}
.graph-label text {
  font-size: 12px; font-weight: 700; fill: var(--text); pointer-events: none;
  stroke: none;
}
.graph-label { transition: opacity .16s ease; }
.graph-label.label-hidden { opacity: 0; }
.graph-node:hover .graph-label.label-hidden { opacity: 1; }
.graph-node.dimmed .graph-label { opacity: 0; }
.graph-node:hover .graph-node-core,
.graph-node.active .graph-node-core { stroke: #1f3f8b; stroke-width: 4; }
.graph-node.active .graph-node-halo { opacity: 1; }
.graph-node.related .graph-node-core { stroke: #2563eb; stroke-width: 3.2; }
.graph-node.graph-node-match .graph-node-halo { opacity: 1; }
.graph-node.graph-node-match .graph-node-core { stroke-width: 3.4; }
.graph-node.dimmed { opacity: .28; }
.bio-graph-inspector {
  border: 1px solid var(--hairline); background: var(--surface); border-radius: var(--rounded-md);
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.bio-graph-inspector h3 { font-size: 1.4rem; line-height: 1.15; }
.bio-graph-inspector p { color: var(--text-muted); }
.bio-graph-inspector .btn { align-self: flex-start; margin-top: auto; }
.bio-graph-focus {
  padding: 12px;
  border: 1px solid rgba(0, 104, 74, .24);
  border-radius: var(--rounded-md);
  background: var(--brand-green-soft);
}
.bio-graph-focus span {
  display: block;
  color: var(--brand-green-dark);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.bio-graph-focus strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: .98rem;
  line-height: 1.25;
}
.bio-graph-focus p {
  margin-top: 7px;
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.4;
}
.bio-graph-focus .filters { margin-top: 9px; }
.bio-workspace { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
.bio-main-panel { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.bio-browser {
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-sm); padding: 16px; position: sticky; top: 24px;
}
.bio-browser-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bio-browser-head span { color: var(--text-soft); font-size: .84rem; }
.bio-bank { display: grid; grid-template-columns: 320px minmax(0, 1fr) 260px; gap: 22px; align-items: start; }
.bio-list {
  display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 220px);
  overflow-y: auto; padding-right: 4px;
}
.bio-item {
  padding: 14px; border: 1px solid var(--hairline); border-radius: var(--rounded-md);
  background: var(--canvas); color: inherit; transition: all .14s;
}
.bio-item:hover { border-color: var(--brand-green-dark); color: inherit; }
.bio-item.active { border-color: var(--brand-green); background: var(--brand-green-soft); }
.bio-item .sci, .bio-detail .sci { font-style: italic; color: var(--text-soft); font-size: .86rem; }
.bio-item p { margin-top: 8px; font-size: .86rem; line-height: 1.4; }
.bio-detail, .bio-editor-shell {
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-sm);
}
.bio-detail { padding: 28px; }
.bio-workspace .bio-detail { padding: clamp(28px, 4vw, 44px); }
.bio-detail-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.bio-detail-head h2 { margin-top: 12px; font-size: clamp(1.9rem, 4vw, 3.15rem); line-height: 1.05; max-width: 16ch; }
.bio-detail-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bio-article {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bio-entity-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}
.bio-entity-hero h2 {
  margin-top: 14px;
  max-width: 22ch;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
}
.bio-subtitle {
  margin: 0; padding: 22px 26px; border-left: 5px solid var(--brand-green);
  background: var(--brand-green-soft); border-radius: var(--rounded-lg);
  color: var(--brand-green-dark); font-size: 1.08rem; line-height: 1.6;
}
.bio-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.bio-metric-grid section,
.bio-section-card {
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-lg);
  background: var(--canvas);
}
.bio-metric-grid section { background: var(--surface); }
.bio-metric-grid h3,
.bio-section-card h3 {
  margin-bottom: 14px;
  font-size: 1rem;
  font-weight: 700;
}
.bio-section-card h4 {
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: .9rem;
}
.bio-section-card ul,
.bio-metric-grid ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  line-height: 1.55;
}
.bio-section-card li + li,
.bio-metric-grid li + li { margin-top: 7px; }
.bio-section {
  padding: 26px 0; border-top: 1px solid var(--border);
}
.bio-section h3 { font-size: 1.08rem; margin-bottom: 14px; }
.bio-section h4 { font-size: .9rem; margin-bottom: 10px; color: var(--text-muted); }
.bio-section ul { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 1rem; line-height: 1.55; }
.bio-section li + li { margin-top: 7px; }
.bio-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bio-feature-grid { margin-bottom: 6px; }
.bio-panel {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding-inline: 0;
}
.bio-two-col { columns: 2; column-gap: 28px; }
.bio-citation {
  margin-top: 10px; padding: 12px 14px; border-radius: var(--rounded-md);
  background: var(--surface); border: 1px solid var(--hairline); color: var(--text-muted);
  font-size: .9rem;
}
.bio-editor-shell { padding: clamp(24px, 4vw, 40px); }
.bio-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}
.bio-editor-head h2 {
  margin-top: 8px;
  font-size: clamp(2rem, 4vw, 3rem);
}
.bio-editor-head p { margin-top: 8px; max-width: 58ch; }
.curator-panel {
  margin-top: 18px; padding: 20px; border: 1px solid var(--hairline);
  border-radius: var(--rounded-lg); background: var(--surface);
}
.curator-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.curator-form .field-wide { grid-column: 1 / -1; }
.curator-form textarea { min-height: 124px; }

/* User management */
.user-admin-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; align-items: start; }
.user-create-form { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; }
.user-search { max-width: none; margin-bottom: 16px; }
.user-list { display: flex; flex-direction: column; gap: 12px; }
.user-row { padding: 16px; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(220px, 300px); gap: 14px; align-items: center; }
.user-row-main { min-width: 0; }
.user-row-main b, .user-row-main span, .user-row-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-row-main span { color: var(--text-muted); font-size: .9rem; }
.user-row-main small { color: var(--text-soft); font-size: .8rem; margin-top: 3px; }
.user-role-form { display: flex; gap: 8px; align-items: center; }

/* Biome page */
.biome-hero { border-radius: var(--rounded-xxl); overflow: hidden; position: relative; min-height: 320px; display: flex; align-items: flex-end; color: var(--on-dark); background: var(--brand-teal-deep); }
.biome-hero .hero-bg::after { background: linear-gradient(0deg, rgba(0,30,43,.94), rgba(0,30,43,.22)); }
.biome-hero .container { position: relative; z-index: 2; padding: 32px; width: 100%; max-width: none; }
.biome-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.biome-stats .bs { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--rounded-lg); padding: 20px; text-align: center; }
.biome-stats .bs strong { display: block; font-size: 1.7rem; font-weight: 500; }
.biome-stats .bs span { color: var(--text-soft); font-size: 0.84rem; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feature-card { padding: 20px; display: flex; gap: 14px; }
.feature-card .fi { width: 42px; height: 42px; border-radius: var(--rounded-md); background: var(--brand-green-soft); color: var(--brand-green-dark); display: grid; place-items: center; flex: none; }

/* Projects */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.project-card { overflow: hidden; position: relative; }
.project-card .cover { height: 160px; position: relative; }
.project-card .cover img { width: 100%; height: 100%; }
.project-card .body { padding: 18px; }
.project-card .pmeta { display: flex; gap: 14px; color: var(--text-soft); font-size: 0.82rem; margin: 12px 0; }
.project-card .pmeta span { display: inline-flex; align-items: center; gap: 5px; }
.project-new { border: 2px dashed var(--hairline-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 320px; color: var(--text-soft); cursor: pointer; border-radius: var(--rounded-lg); transition: all .15s; }
.project-new:hover { border-color: var(--brand-green-dark); color: var(--brand-green-dark); background: var(--brand-green-soft); }
.menu-wrap { position: relative; }
.menu-pop { position: absolute; right: 0; top: 34px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--rounded-md); box-shadow: var(--shadow-4); padding: 6px; min-width: 150px; z-index: 20; }
.menu-pop button { display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px; font-size: 0.88rem; color: var(--text-muted); }
.menu-pop button:hover { background: var(--bg-muted); }
.menu-pop button.danger:hover { background: #fef2f2; color: #b91c1c; }

/* Wizard */
.wizard { max-width: 720px; }
.wiz-steps { display: flex; gap: 12px; margin-bottom: 28px; }
.wiz-steps .ws { flex: 1; text-align: center; }
.wiz-steps .ws .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 8px; background: var(--canvas); border: 2px solid var(--hairline); font-weight: 700; color: var(--text-soft); }
.wiz-steps .ws.active .dot { background: var(--brand-green); border-color: var(--brand-green); color: var(--on-primary); }
.wiz-steps .ws.done .dot { background: var(--brand-green-soft); border-color: var(--brand-green-soft); color: var(--brand-green-dark); }
.wiz-steps .ws span { font-size: 0.82rem; color: var(--text-soft); }
.type-cards, .biome-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.biome-cards { grid-template-columns: repeat(3, 1fr); }
.select-card { padding: 18px; border: 1px solid var(--hairline); border-radius: var(--rounded-md); cursor: pointer; transition: all .14s; background: var(--canvas); }
.select-card:hover { border-color: var(--brand-green-dark); }
.select-card.selected { border-color: var(--brand-green); background: var(--brand-green-soft); }
.select-card .dot-color { width: 14px; height: 14px; border-radius: 4px; display: inline-block; margin-right: 8px; vertical-align: middle; }

/* Mockups */
.mockup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mockup-card { overflow: hidden; position: relative; cursor: pointer; }
.mockup-card .cover { height: 180px; position: relative; }
.mockup-card .cover img { width: 100%; height: 100%; }
.mockup-card.selected { outline: 3px solid var(--brand-green); outline-offset: -3px; }
.mockup-card .check { position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--canvas); border: 2px solid var(--hairline-strong); display: grid; place-items: center; }
.mockup-card.selected .check { background: var(--brand-green); border-color: var(--brand-green); color: var(--on-primary); }
.mockup-card .body { padding: 14px; }
.batch-bar { display: flex; align-items: center; gap: 12px; background: var(--brand-teal-deep); color: var(--on-dark); padding: 12px 18px; border-radius: var(--rounded-md); margin-bottom: 18px; }
.batch-bar span { flex: 1; font-weight: 600; }

/* Assistant chat */
.chat-shell { display: flex; flex-direction: column; height: calc(100vh - 140px); max-width: 820px; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 8px 4px 20px; }
.msg { display: flex; gap: 12px; max-width: 80%; }
.msg .bubble { padding: 13px 16px; border-radius: var(--rounded-lg); font-size: 0.94rem; line-height: 1.5; }
.msg.assistant .bubble { background: var(--canvas); border: 1px solid var(--hairline); border-top-left-radius: 4px; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg.user .bubble { background: var(--brand-green); color: var(--on-primary); border-top-right-radius: 4px; }
.msg .mini-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.msg.assistant .mini-avatar { background: var(--brand-green-soft); color: var(--brand-green-dark); }
.msg.user .mini-avatar { background: var(--brand-teal-deep); color: var(--on-dark); }
.msg .time { font-size: 0.72rem; color: var(--text-soft); margin-top: 5px; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.chat-suggestions button { padding: 9px 14px; border: 1px solid var(--hairline); border-radius: var(--rounded-full); font-size: 0.85rem; color: var(--text-muted); background: var(--canvas); text-align: left; }
.chat-suggestions button:hover { border-color: var(--brand-green-dark); color: var(--brand-green-dark); }
.chat-input { display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.chat-input input { flex: 1; border-radius: var(--rounded-full); }
.typing { display: inline-flex; gap: 4px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-green); animation: bounce 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

@media (max-width: 1024px) {
  .stat-cards, .quick-grid, .lib-grid, .trail-grid, .project-grid, .mockup-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-cols, .catalog, .bio-bank, .bio-graph-layout, .bio-workspace { grid-template-columns: 1fr; }
  .bio-hero-panel { grid-template-columns: 1fr; }
  .bio-hero-panel .bio-stat-row { justify-content: flex-start; max-width: none; }
  .bio-toolbar { grid-template-columns: 1fr 1fr; }
  .bio-list { max-height: 420px; }
  .bio-browser { position: static; }
  .user-admin-grid { grid-template-columns: 1fr; }
  .user-create-form { position: static; }
  .biome-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: translateX(0); }
  .app-main { padding-left: 0; }
  .stat-cards, .quick-grid, .lib-grid, .trail-grid, .project-grid, .mockup-grid, .feature-grid, .type-cards, .biome-cards { grid-template-columns: 1fr; }
  .bio-toolbar, .bio-section-grid, .bio-metric-grid { grid-template-columns: 1fr; }
  .bio-hero-panel { padding: 24px; }
  .bio-hero-panel h1 { font-size: 2.4rem; }
  .bio-view-tabs {
    align-self: stretch;
    border-radius: var(--rounded-lg);
  }
  .bio-view-tabs a { flex: 1; justify-content: center; }
  .bio-entity-hero, .bio-editor-head { flex-direction: column; }
  .bio-graph-head { flex-direction: column; }
  .bio-graph-card { padding: 16px; }
  .bio-graph-stage, .bio-graph-stage svg { min-height: 420px; height: 420px; }
  .bio-detail-head h2 { font-size: 2rem; max-width: none; }
  .bio-subtitle { padding: 18px; font-size: 1rem; }
  .curator-form, .user-row { grid-template-columns: 1fr; }
  .user-role-form { align-items: stretch; flex-direction: column; }
  .bio-two-col { columns: 1; }
  .mobile-sb-toggle { display: inline-flex !important; }
}
.mobile-sb-toggle { display: none; }