@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg: #0b0d14;
    --fg: #e9edf6;
    --muted: #9aa3b8;
    --accent: #3b82f6;
    --accent-2: #60a5fa;
    --border: #262d40;
    --radius: 14px;
    /* elevation + motion scale (Material-inspired) used to give generated sites depth & feel */
    --elev-1: 0 1px 2px rgba(20, 18, 40, 0.06), 0 1px 3px rgba(20, 18, 40, 0.09);
    --elev-2: 0 2px 6px rgba(20, 18, 40, 0.08), 0 6px 16px rgba(20, 18, 40, 0.07);
    --elev-3: 0 10px 24px rgba(20, 18, 40, 0.12), 0 20px 48px rgba(20, 18, 40, 0.10);
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 200ms;
}

* { box-sizing: border-box; }

/* Links default to the themed accent (never the browser's purple). Components with their own
   colour (.toplink, .brand, .back, .tile, .navlink, buttons…) override via higher specificity. */
a { color: var(--accent); text-decoration: none; }
a:visited { color: var(--accent); }
a:hover { text-decoration: underline; }

html { font-size: 15px; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    background: radial-gradient(1100px 600px at 75% -15%, #161b2e, var(--bg)) fixed;
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

/* sticky-footer app frame */
.app-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.app-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 1.25rem; border-top: 1px solid var(--border);
    color: var(--muted); font-size: 0.78rem; background: #0c0f18;
}
.app-footer .ver { font-family: ui-monospace, monospace; opacity: 0.8; display: inline-flex; align-items: center; gap: 0.5rem; }
.app-footer .env-chip {
    font-family: inherit; background: #f0b352; color: #1b1430; padding: 0.08rem 0.55rem;
    border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
}

/* smooth, restrained motion */
button, .tile, .navlink, .big-button, a.toplink, .hero-card { transition: all 160ms ease; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* FocusOnNavigate focuses the <h1> (tabindex=-1) after load — keep the a11y behaviour
   but hide the focus rectangle it draws. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.conjure-shell {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}

/* ---- top bar ---- */
.topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 1rem;
    padding: 0.6rem 1.25rem; background: #13161d; border-bottom: 1px solid #242a36;
}
.topbar .brand { color: var(--fg); font-weight: 700; text-decoration: none; }
.topbar .spacer { flex: 1; }
.topbar .topuser { opacity: 0.7; font-size: 0.85rem; color: var(--fg); text-decoration: none; }
.topbar .topuser:hover { opacity: 1; text-decoration: underline; }
.topbar .toplink {
    color: var(--fg); opacity: 0.8; text-decoration: none; font-size: 0.85rem;
    background: none; border: 0; cursor: pointer; font-family: inherit;
}
.topbar .toplink:hover { opacity: 1; }
.logout-form { margin: 0; display: inline; }

/* ---- landing ---- */
.landing { width: min(820px, 100%); margin: 0 auto; padding: 2rem 1.5rem; text-align: center; }
.landing-hero h1 { font-size: 3.5rem; margin: 0; }
.landing .tagline { font-size: 1.4rem; opacity: 0.9; margin: 0.25rem 0 1rem; }
.landing .blurb { opacity: 0.8; max-width: 600px; margin: 0 auto 1.75rem; line-height: 1.6; }
.cta { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.big-button.ghost, .big-button.google {
    background: transparent; border: 1px solid var(--accent); color: var(--fg); text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.landing-steps { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }
.step { background: #181b23; border: 1px solid #2b313d; border-radius: 14px; padding: 1.25rem; width: 200px; }
.step h3 { margin: 0.5rem 0 0.25rem; }
.step p { opacity: 0.7; margin: 0; font-size: 0.9rem; }

/* ---- auth pages ---- */
.auth { width: min(380px, 100%); margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 0.5rem; }
.auth .brand { color: var(--fg); text-decoration: none; font-weight: 800; font-size: 2.4rem; letter-spacing: -0.5px; margin-bottom: 1rem; display: block; }

/* modern split sign-in / register: marketing pitch beside a form card */
.auth-split { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; max-width: 940px; margin: 2.5rem auto; min-height: 56vh; }
.auth-split::before { content: ""; position: absolute; inset: -25% -10% auto -10%; height: 70%; z-index: -1; pointer-events: none; filter: blur(50px);
    background: radial-gradient(45% 60% at 28% 30%, rgba(232, 93, 61, 0.18), transparent 70%), radial-gradient(40% 60% at 75% 40%, rgba(127, 216, 212, 0.12), transparent 70%); }
.auth-pitch { text-align: left; }
.auth-pitch .brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--fg); text-decoration: none; font-weight: 800; font-size: 1.4rem; margin-bottom: 1.6rem; }
.auth-sigil { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255, 138, 76, 0.5); border-radius: 50%; color: #ff8a4c; font-size: 0.9rem; box-shadow: 0 0 18px rgba(255, 138, 76, 0.22), inset 0 0 10px rgba(255, 138, 76, 0.12); }
.auth-pitch h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1rem; font-weight: 700; }
.auth-pitch h2 em { font-style: normal; background: linear-gradient(100deg, #ff8a4c, #f2b88a 60%, #7fd8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-pitch > p { color: var(--muted); font-size: 1.05rem; max-width: 42ch; margin: 0 0 1.7rem; line-height: 1.6; }
.auth-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.auth-points li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--fg); font-size: 0.95rem; }
.auth-points li span { color: #f2b88a; }
.auth-split .auth { width: 100%; max-width: 400px; margin: 0; text-align: left; background: #12141c; border: 1px solid var(--border); border-radius: 18px; padding: 2rem; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85); gap: 0.6rem; }
.auth-split .auth h1 { margin: 0; font-size: 1.6rem; }
.auth-sub { color: var(--muted); margin: 0 0 0.6rem; font-size: 0.92rem; }
@media (max-width: 820px) {
    .auth-split { grid-template-columns: 1fr; gap: 2rem; max-width: 440px; min-height: 0; }
    .auth-pitch { text-align: center; }
    .auth-pitch .brand { font-size: 1.6rem; }
    .auth-pitch > p { margin-inline: auto; }
    .auth-points { max-width: 340px; margin: 0 auto; }
    .auth-split .auth { margin: 0 auto; }
}
.auth h1 { margin: 0 0 0.5rem; }
.auth label { text-align: left; font-size: 0.85rem; opacity: 0.8; margin-top: 0.5rem; }
/* label on the left, field on the right */
.auth-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 0.7rem; margin-top: 0.5rem; }
.auth-row label { margin: 0; }
.auth-input {
    width: 100%; padding: 0.6rem 0.7rem; border-radius: 10px; border: 1px solid #2b313d;
    background: #181b23; color: var(--fg); font: inherit; box-sizing: border-box;
}
.auth .big-button { width: 100%; margin-top: 0.75rem; justify-content: center; }
.auth .google { margin-top: 0.5rem; }

/* ---- admin ---- */
.admin-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
@media (max-width: 760px) { .admin-cards { grid-template-columns: 1fr; } }
.admin .panel { text-align: left; }
/* admin dashboard tiles */
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.admin-tile {
    display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; text-align: left;
    background: #181b23; border: 1px solid #2b313d; border-radius: 16px; padding: 1.3rem; color: var(--fg);
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.admin-tile:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32); }
.at-ico { display: inline-flex; align-items: center; width: 30px; height: 30px; color: var(--accent); }
.at-ico svg { width: 28px; height: 28px; }
.at-title { font-weight: 700; font-size: 1.05rem; }
.at-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.version-line { margin-top: 1.5rem; font-size: 0.8rem; }

/* usage & cost report */
.cost-filters {
    display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: end; margin-bottom: 1.2rem;
    padding: 0.9rem 1rem; background: #12151d; border: 1px solid var(--border); border-radius: 12px;
}
.cost-filters .fld { gap: 0.3rem; }
.cost-filters input[type=date] {
    background: #fff; color: #14121d; border: 1px solid #d8d3e8; border-radius: 7px;
    padding: 0.35rem 0.5rem; font: inherit; font-size: 0.85rem;
}
.cost-filter-actions { display: flex; gap: 0.4rem; }
.cost-display { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.cost-display .fld.inline { flex-direction: row; align-items: center; gap: 0.55rem; }
.cost-display .fld.inline > span { margin: 0; }
.cost-totals { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.cost-tot { background: #12151d; border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1.2rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 150px; }
.cost-tot span { font-size: 0.78rem; color: var(--muted); }
.cost-tot strong { font-size: 1.35rem; }
.cost-tot.profit strong { color: #4ade80; }
.cost-tot.rating strong { color: #f5b301; }
.cost-rating-line { margin: -0.6rem 0 1.3rem; font-size: 0.9rem; }
.cost-sub td { background: rgba(255, 255, 255, 0.02); color: var(--muted); font-size: 0.9rem; }

/* wide admin pages (SQL console, domain model) use the full content width */
.page.wide { width: 100%; max-width: 100%; text-align: left; box-sizing: border-box; }

/* SQL console results — a database-style grid that scrolls inside its own panel
   (never widening the page itself) */
.sql-results { overflow: auto; max-width: 100%; max-height: 62vh; padding: 0; margin-top: 0.7rem; }
.datagrid { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', 'Consolas', 'Courier New', monospace; font-size: 0.78rem; }
.datagrid th, .datagrid td {
    border: 1px solid var(--border); padding: 0.34rem 0.7rem; white-space: nowrap;
    max-width: 460px; overflow: hidden; text-overflow: ellipsis;
}
.datagrid th { background: #1a1e27; color: var(--fg); position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 600; }
.datagrid tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.022); }
.datagrid tbody tr:hover td { background: rgba(120, 150, 255, 0.07); }
.datagrid td.cell-null { color: #5a5470; font-style: italic; }
.datagrid .rownum { color: var(--muted); text-align: right; width: 1%; white-space: nowrap; user-select: none; position: sticky; left: 0; background: #12151d; }
.datagrid th.rownum { z-index: 2; background: #1a1e27; }
.admin .code-area { width: 100%; box-sizing: border-box; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; padding: 0.65rem 0.8rem; line-height: 1.5; }

/* SQL layout: editor + history side by side. minmax(0,…) keeps the table from
   stretching the column and giving the whole page a horizontal scrollbar. */
.sql-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1.4rem; align-items: start; margin-top: 0.6rem; }
.sql-layout > div { min-width: 0; }
.sql-actions { display: flex; align-items: center; gap: 0.6rem; margin: 0.6rem 0; }
.sql-actions .msg { margin-right: auto; display: inline-flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.sql-actions .auto-limit { font-size: 0.78rem; color: #f0b352; }
.sql-tools { margin: 0.4rem 0 0.8rem; }

/* schema reference panel (slides in from the right; click to copy names) */
.schema-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 88vw; z-index: 50;
    background: #12151d; border-left: 1px solid var(--border); box-shadow: -12px 0 30px rgba(0, 0, 0, 0.4);
    padding: 1rem; overflow-y: auto; animation: schemaIn 0.18s ease both;
}
@keyframes schemaIn { from { transform: translateX(100%); } to { transform: none; } }
.schema-head { display: flex; justify-content: space-between; align-items: center; }
.schema-hint { font-size: 0.75rem; margin: 0.2rem 0 0.8rem; }
.schema-list { display: flex; flex-direction: column; gap: 0.1rem; }
.schema-trow { display: flex; align-items: center; gap: 0.35rem; }
.schema-exp { border: 0; background: none; color: var(--muted); cursor: pointer; width: 1.1rem; padding: 0; }
.schema-tname {
    border: 0; background: none; color: var(--fg); cursor: pointer; font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem; padding: 0.25rem 0.3rem; border-radius: 6px; text-align: left; flex: 1;
}
.schema-tname:hover { background: rgba(255, 255, 255, 0.06); color: var(--accent-2); }
.copied-tag { font-size: 0.68rem; color: #4ade80; }
.schema-cols { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.2rem 0 0.5rem 1.4rem; }
.schema-col {
    border: 1px solid var(--border); background: #181b23; color: var(--muted); cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; padding: 0.12rem 0.45rem; border-radius: 6px;
}
.schema-col:hover { color: var(--fg); border-color: var(--accent); }
.sql-history { background: #12151d; border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem; max-height: 520px; overflow-y: auto; }
.sql-history h3 { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--muted); }
.sql-history-item {
    display: block; width: 100%; text-align: left; border: 0; background: #181b23; color: var(--fg);
    border-radius: 8px; padding: 0.45rem 0.55rem; margin-bottom: 0.4rem; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sql-history-item:hover { background: #20242f; }
.sql-history .empty { font-size: 0.78rem; color: var(--muted); }
@media (max-width: 900px) { .sql-layout { grid-template-columns: 1fr; } }

/* domain-model tabs + ER diagram */
.dm-tabs { display: inline-flex; gap: 0.4rem; margin-bottom: 1rem; }
.dm-tabs button { padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: #181b23; color: var(--muted); cursor: pointer; }
.dm-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.er-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.dm-allcols { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.dm-allcols input { cursor: pointer; }
.er-zoom { display: inline-flex; gap: 0.35rem; }
.er-zoom .lp-btn { min-width: 2.4rem; }
.dm-tools { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; }
.dm-table { padding: 0; overflow: hidden; }
.dm-head {
    width: 100%; text-align: left; border: 0; background: transparent; color: var(--fg);
    cursor: pointer; font: inherit; padding: 0.85rem 1.1rem; display: flex; align-items: center; gap: 0.6rem;
}
.dm-head:hover { background: rgba(255, 255, 255, 0.03); }
.dm-head strong { font-size: 1rem; }
.dm-caret { color: var(--muted); width: 1rem; }
.dm-table .records { margin: 0; border-top: 1px solid var(--border); }
.er-diagram {
    background: #0e1118; border: 1px solid var(--border); border-radius: 12px;
    height: 92vh; min-height: 900px; overflow: hidden; position: relative; touch-action: none; user-select: none;
}
.er-pan { position: absolute; top: 1rem; left: 1rem; transform-origin: 0 0; }
.er-pan svg { max-width: none !important; height: auto; display: block; }

/* editor Theme panel */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 0.8rem; }
.theme-drawer .fld.inline { flex-direction: row; align-items: center; gap: 0.6rem; }
.theme-drawer input[type=color] { width: 48px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: none; cursor: pointer; }
.theme-drawer input[type=range] { accent-color: var(--accent); }
.theme-bg-img { margin-bottom: 0.8rem; }
.theme-bg-img .ip-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); max-height: 220px; }
.theme-bg-img .ip-item.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme-headerlinks { margin-bottom: 0.9rem; }
.theme-headerlinks .fld-label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.5rem; }
.hl-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hl-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; background: #181b23; border: 1px solid var(--border); border-radius: 8px; padding: 0.35rem 0.65rem; cursor: pointer; }

/* direct block / section editor */
.blocks-drawer .block-edit { border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem; margin-bottom: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; background: #12151d; }
.block-edit-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.block-edit-top select { flex: 1; min-width: 0; max-width: 230px; }
/* block-editor controls: full-width, no overflow, accent focus (not the default blue outline) */
.block-edit .auth-input, .block-edit select, .block-edit textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.block-edit .auth-input:focus, .block-edit select:focus, .block-edit textarea:focus,
.panel-body .auth-input:focus, .panel-body .code-area:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
.block-actions { margin-left: auto; display: inline-flex; gap: 0.3rem; }
.block-actions .lp-btn { min-width: 2rem; }
.block-img { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.block-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.blocks-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.blocks-drawer textarea.code-area { min-height: auto; height: auto; }
@media (max-width: 760px) { .admin-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .admin-tiles { grid-template-columns: 1fr; } }
/* selected-model info panel (admin → AI models) */
.model-info { margin-top: 0.8rem; padding: 0.7rem 0.9rem; background: #12151d; border: 1px solid var(--border); border-radius: 10px; }
.mi-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mi-price, .mi-ctx { font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-weight: 600; }
.mi-price { background: rgba(59, 130, 246, 0.16); color: var(--accent-2); }
.mi-ctx { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.mi-desc { margin: 0.55rem 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.kv { list-style: none; padding: 0; margin: 0; }
.kv li { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #242a36; }
.kv span { opacity: 0.7; }
.admin .records th, .admin .records td,
.usage .records th, .usage .records td,
.profile .records th, .profile .records td { color: var(--fg); border-bottom: 1px solid #242a36; }
.admin .records th, .usage .records th, .profile .records th { color: #b7aee0; }

/* profile page */
.profile-head { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0 1.4rem; }
.profile-avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), #7c3aed); flex-shrink: 0; }
.profile-head h2 { margin: 0; }
.prof-tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border); margin-bottom: 1.2rem; flex-wrap: wrap; }
.prof-tabs button { background: none; border: 0; color: var(--muted); padding: 0.55rem 0.9rem; cursor: pointer; font: inherit; font-size: 0.9rem; border-bottom: 2px solid transparent; }
.prof-tabs button:hover { color: var(--fg); }
.prof-tabs button.active { color: var(--fg); border-bottom-color: var(--accent); }
.prof-props th { text-align: left; width: 180px; color: var(--muted) !important; font-weight: 500; }
/* profile → API keys tab */
.apikey-create { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin: 0.4rem 0 1rem; }
.apikey-create input { min-width: 22rem; }
.apikey-fresh { background: #1a2030; border: 1px solid var(--accent); border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 1rem; }
.apikey-fresh p { margin: 0 0 0.4rem; }
.apikey-value { display: block; padding: 0.6rem 0.8rem; background: #0f1218; border: 1px solid var(--border); border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; word-break: break-all; margin-bottom: 0.5rem; }
.panel.narrow { max-width: 420px; }
.panel.narrow .fld.stack { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.8rem; }
.panel.narrow .fld.stack > span { font-size: 0.82rem; color: var(--muted); }

/* admin configuration page */
.cfg-note { background: rgba(255, 196, 84, 0.08); border: 1px solid rgba(255, 196, 84, 0.3); border-radius: 12px; padding: 0.9rem 1.1rem; margin: 0.4rem 0 1.2rem; line-height: 1.55; font-size: 0.9rem; }
.cfg-table td.cfg-src { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.cfg-table td.cfg-unset { color: var(--muted); font-style: italic; }
.cfg-table td:nth-child(2) { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; }

/* admin chat & error log */
.chk { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; white-space: nowrap; }
.admin .chatlog td { vertical-align: top; font-size: 0.85rem; }
.admin .chatlog .nowrap { white-space: nowrap; opacity: 0.75; }
.admin .chatlog .chat-text { max-width: 640px; white-space: normal; overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.admin .chatlog .chat-err td { background: rgba(220, 38, 38, 0.08); }
.admin .chatlog details { margin-top: 0.3rem; }
.admin .chatlog summary { cursor: pointer; color: #ff9aa6; font-size: 0.78rem; }
.admin .chatlog pre {
    white-space: pre-wrap; word-break: break-word; font-size: 0.76rem; margin: 0.3rem 0 0;
    background: #0f131c; border: 1px solid #242a36; border-radius: 6px; padding: 0.5rem;
    max-height: 240px; overflow: auto; color: #cdd3e0;
}
.role-badge {
    font-size: 0.7rem; padding: 0.12rem 0.45rem; border-radius: 6px; text-transform: capitalize;
    background: #2a2f3c; color: #b7aee0;
}
.role-badge.error { background: #3a1d22; color: #ff9aa6; }
.role-badge.user { background: #1d2a3a; color: #9ac5ff; }
.role-badge.assistant { background: #1f2e26; color: #8fe0b6; }
.fb-tag { margin-top: 0.3rem; font-size: 0.76rem; color: #ff9aa6; }

.hero { width: min(640px, 100%); text-align: center; }

.hero h1 {
    font-size: 3rem;
    margin: 0;
    color: var(--fg);
}

.tagline { opacity: 0.8; margin-top: 0.25rem; }

.prompt-box {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

textarea {
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid #2b313d;
    background: #181b23;
    color: var(--fg);
    resize: vertical;
    font: inherit;
}

button {
    align-self: center;
    padding: 0.75rem 1.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: white;
    font-size: 1rem;
    cursor: pointer;
}

button:disabled { opacity: 0.4; cursor: not-allowed; }

/* close/✕ link-buttons: reset the default pill/accent background (they only set colour) */
.toplink {
    align-self: auto; background: none; border: 0; padding: 0.15rem 0.4rem; border-radius: 6px;
    color: inherit; font: inherit; font-size: 0.95rem; cursor: pointer;
}
.toplink:hover { background: rgba(127, 127, 127, 0.14); }

.echo { margin-top: 1.5rem; opacity: 0.75; }

/* ---- management UI (workspaces + websites) ---- */
.page {
    width: min(900px, 100%);
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.lead { opacity: 0.8; margin-top: -0.25rem; font-size: 1.1rem; }

.back {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--fg);
    opacity: 0.7;
    text-decoration: none;
}
.back:hover { opacity: 1; }

.card-grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
}

/* /app landing: section headers + "what's new" release tiles */
.land-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 2.4rem; }
.land-head + .card-grid { margin-top: 1rem; }
.land-head h2 { margin: 0; font-size: 1.1rem; color: var(--fg); }
/* the "What's new" footnote: deliberately low-key so workspaces stay the focus */
.land-head.quiet { margin-top: 3.2rem; }
.land-head.quiet h2 { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.land-head.quiet .toplink { font-size: 0.8rem; }
.rel-tiles { margin-top: 0.7rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.7rem; opacity: 0.75; }
.rel-tile {
    background: transparent; border: 1px solid var(--border); border-radius: 10px;
    padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.3rem;
}
.rel-tile-head { display: flex; align-items: center; gap: 0.6rem; }
.rel-tile-head .rel-date { margin-left: auto; font-size: 0.72rem; }
.rel-tile-head .rel-ver { font-size: 0.68rem; }
.rel-tile-title { font-size: 0.84rem; line-height: 1.35; color: var(--fg); }
.rel-tile-sum { margin: 0; color: var(--muted); font-size: 0.76rem; line-height: 1.45; }

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    border-radius: 18px;
    border: 1px solid #2b313d;
    background: #181b23;
    color: var(--fg);
    cursor: pointer;
    font: inherit;
    min-height: 140px;
    justify-content: center;
    transition: transform 0.08s ease, border-color 0.08s ease;
}
.tile:hover { transform: translateY(-3px); border-color: var(--accent); }
.site-tile { position: relative; }
.tile-del {
    position: absolute; top: 0.5rem; right: 0.5rem; border: 0; background: transparent;
    color: var(--fg); cursor: pointer; opacity: 0; font-size: 0.95rem; line-height: 1;
    padding: 0.25rem; border-radius: 6px; transition: opacity 0.1s ease, background 0.1s ease;
}
.site-tile:hover .tile-del { opacity: 0.65; }
.tile-del:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.del-list { margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; color: var(--muted); font-size: 0.9rem; }
.del-list li { margin: 0.15rem 0; }

.tile-emoji { font-size: 2.5rem; }
.tile-name { font-size: 1.2rem; font-weight: 600; }
.tile-sub { opacity: 0.6; font-size: 0.9rem; }

.tile-new { cursor: default; background: #13161d; border-style: dashed; }
.tile-new:hover { transform: none; }
.tile-new input {
    width: 100%;
    padding: 0.6rem;
    border-radius: 10px;
    border: 1px solid #2b313d;
    background: #0f1218;
    color: var(--fg);
    font: inherit;
    text-align: center;
}

.big-button {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
}
.big-button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- website page: contents + AI chat ---- */
.site { width: min(1100px, 100%); margin: 0 auto; padding: 2rem 1.5rem; }
.site h1 { margin: 0.25rem 0 1.25rem; }
.site-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 760px) { .site-grid { grid-template-columns: 1fr; } }

.panel {
    background: #181b23;
    border: 1px solid #2b313d;
    border-radius: 16px;
    padding: 1.25rem;
    text-align: left;
}
.panel h2 { margin-top: 0; font-size: 1.15rem; }
.muted { opacity: 0.6; }

.entity { margin-bottom: 1rem; }
.entity-name { font-weight: 600; margin-bottom: 0.35rem; }
.fields { list-style: none; margin: 0; padding: 0 0 0 1.25rem; }
.fields li { display: flex; justify-content: space-between; padding: 0.15rem 0; opacity: 0.9; }
.f-type { opacity: 0.55; font-size: 0.85rem; }

.chat { display: flex; flex-direction: column; font-size: 0.85rem; }
.chat h2 { font-size: 1rem; margin-bottom: 0.5rem; }
.messages {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    padding-right: 0.25rem;
}
.msg { padding: 0.45rem 0.65rem; border-radius: 10px; max-width: 88%; white-space: pre-wrap; line-height: 1.35; }
.msg.user { align-self: flex-end; background: var(--accent); color: white; }
.msg.assistant { align-self: flex-start; background: #1c2130; }
.msg-usage { align-self: flex-start; font-size: 0.68rem; color: var(--muted); margin: 0.1rem 0 0.3rem 0.2rem; opacity: 0.85; }
/* per-reply star rating */
.rate-row { display: flex; align-items: center; gap: 0.5rem; align-self: flex-start; margin: 0 0 0.5rem 0.2rem; flex-wrap: wrap; }
.rate-stars { display: inline-flex; }
.rate-star { background: none; border: 0; cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0 1px; color: #454a59; transition: color 0.1s; }
.rate-star:hover, .rate-star.on { color: #f5b301; }
.rate-val { font-size: 0.72rem; color: var(--muted); }
.rate-hint { font-size: 0.66rem; color: var(--muted); opacity: 0.5; }
.rate-row:hover .rate-hint { opacity: 1; }
.rate-comment { flex-basis: 100%; display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.25rem; }
.rate-comment textarea { width: 100%; box-sizing: border-box; background: #181b23; color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.5rem; font: inherit; font-size: 0.82rem; resize: vertical; }
.rate-comment-actions { display: flex; gap: 0.4rem; }
.rate-avg { color: #f5b301; font-weight: 600; }
.cj-css-holder { display: none; }   /* holds the keyed custom-CSS <style>; no layout */

/* admin releases / changelog */
.rel-form { display: flex; flex-direction: column; gap: 0.7rem; max-width: 640px; }
.rel-form .code-area { min-height: 90px; }
.rel-item { border-bottom: 1px solid var(--border); padding: 0.9rem 0; }
.rel-item:last-child { border-bottom: 0; }
.rel-item-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.rel-ver { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--accent); background: rgba(124, 92, 255, 0.12); padding: 0.1rem 0.5rem; border-radius: 6px; }
.rel-date { font-size: 0.8rem; color: var(--muted); }
.rel-item-head .lp-btn { margin-left: auto; }
.rel-notes { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--fg); }
.rel-notes li { margin: 0.2rem 0; }
.rel-model { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: #7fd8d4; background: rgba(127, 216, 212, 0.1); padding: 0.1rem 0.45rem; border-radius: 6px; }
.rel-request { margin: 0.5rem 0 0; color: var(--muted); font-style: italic; font-size: 0.88rem; }
.rel-summary { margin: 0.5rem 0; color: var(--fg); font-size: 0.95rem; line-height: 1.55; }
.reg-disabled { background: rgba(255, 196, 84, 0.08); border: 1px solid rgba(255, 196, 84, 0.3); border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 0.88rem; line-height: 1.5; margin: 0.3rem 0 0.6rem; }

/* feedback triage */
.fb-item { margin-bottom: 0.9rem; }
.fb-item.done { opacity: 0.6; }
.fb-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.fb-stars { color: #f5b301; letter-spacing: 1px; }
.fb-done-tag { color: #4ade80; font-size: 0.8rem; margin-left: auto; }
.fb-reply { margin: 0.2rem 0; color: var(--fg); }
.fb-comment { margin: 0.3rem 0; color: #ffb4a8; font-style: italic; }
.fb-action { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.6rem; }
.fb-action .auth-input.slim { flex: 1; min-width: 160px; max-width: 380px; }
.fb-action .fb-ver { flex: 0 0 160px; min-width: 120px; }
.fb-models { margin-top: 0.9rem; }
.fb-models .fld-label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.45rem; }
.fb-recs { margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.fb-rec { border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; background: #12151d; }
.fb-rec-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.fb-rec-text { white-space: pre-wrap; color: var(--fg); font-size: 0.9rem; line-height: 1.5; }
.fb-rec-usage { font-size: 0.72rem; color: var(--muted); margin-left: auto; }
.fb-rec-tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin: 0.5rem 0 0; }
.fb-rectab { background: #181b23; border: 1px solid var(--border); border-bottom: none; color: var(--muted); padding: 0.35rem 0.7rem; border-radius: 8px 8px 0 0; cursor: pointer; font: inherit; font-size: 0.78rem; }
.fb-rectab.active { color: var(--fg); background: #12151d; border-color: var(--accent); }
.fb-recs .fb-rec, .fb-rec { margin-top: 0; }
.fb-prompt { margin-top: 0.6rem; }
.fb-prompt summary { cursor: pointer; color: var(--muted); font-size: 0.8rem; }
.fb-prompt pre { white-space: pre-wrap; word-break: break-word; background: #0f1218; border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem; font-size: 0.74rem; max-height: 320px; overflow: auto; color: #cdd6e6; }
.fb-howitworks { margin-top: 0.8rem; }
.fb-howitworks summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
/* action row: button + wide "what you did" + small version + aligned mark button */
.fb-action { align-items: center; }
.fb-action .fb-res { flex: 1 1 240px; min-width: 200px; max-width: none; }
.fb-action .fb-ver { flex: 0 0 96px; min-width: 80px; max-width: 96px; }
.fb-action .fb-mark { margin-left: auto; }

/* "Advise Me" */
.adv-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.adv-head h2 { margin: 0; }
.adv-sep { border: none; border-top: 1px solid var(--border); margin: 1.1rem 0 0.9rem; }
/* rich-text editor (Bio/CV) */
.rte { border: 1px solid var(--border); border-radius: 10px; background: #0f1218; margin-bottom: 0.6rem; }
.rte-bar { display: flex; gap: 0.2rem; padding: 0.35rem 0.45rem; border-bottom: 1px solid var(--border); }
.rte-bar button {
    background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit;
    font-size: 0.82rem; padding: 0.2rem 0.55rem; border-radius: 6px;
}
.rte-bar button:hover { background: rgba(255, 255, 255, 0.07); color: var(--fg); }
.rte-area { padding: 0.7rem 0.85rem; min-height: 6rem; outline: none; color: var(--fg); font-size: 0.92rem; line-height: 1.55; overflow-y: auto; max-height: 30rem; }
.rte-area:empty::before { content: attr(data-placeholder); color: #5a6373; pointer-events: none; }
.rte-area p { margin: 0 0 0.6rem; }
.rte-area ul, .rte-area ol { margin: 0 0 0.6rem; padding-left: 1.4rem; }
/* anonymization indicator (advisory only) */
.priv-box {
    border: 1px solid rgba(245, 179, 1, 0.4); background: rgba(245, 179, 1, 0.07);
    border-radius: 10px; padding: 0.75rem 1rem; margin: 0.4rem 0 0.9rem; font-size: 0.88rem;
}
.priv-box strong { color: #f5b301; }
.priv-box ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.priv-box li { margin: 0.25rem 0; }
.priv-box p { margin: 0.4rem 0 0; font-size: 0.8rem; }
.priv-auto { color: #4ade80; font-size: 0.78rem; margin-left: 0.3rem; }
.priv-manual { color: #f87171; font-size: 0.78rem; margin-left: 0.3rem; }
.priv-ok { color: #4ade80; font-size: 0.85rem; margin: 0.3rem 0 0.9rem; }
.adv-text { width: 100%; box-sizing: border-box; margin-bottom: 0.6rem; }
textarea.adv-text { resize: vertical; min-height: 4.5rem; }
.adv-row { display: flex; gap: 0.6rem; align-items: center; }
/* Advise Me page: extra breathing room between tiles (profile / leaderboard / new-entry / models / each journal entry) */
.adv-page > .panel + .panel { margin-top: 1.6rem; }
/* Improve-with-AI action row that sits below each profile textarea */
.adv-improve { flex-wrap: wrap; margin-top: -0.3rem; margin-bottom: 1.1rem; }
.adv-improve .adv-model { width: auto; min-width: 14rem; max-width: 22rem; padding: 0.35rem 0.6rem; }
.adv-improve .adv-improve-note { font-size: 0.78rem; flex-basis: 100%; margin-top: 0.1rem; }
.adv-err { color: #f0b352; font-size: 0.82rem; }
.adv-content { white-space: pre-wrap; color: var(--fg); line-height: 1.5; margin: 0.2rem 0 0.4rem; }
.adv-of { font-size: 0.75rem; color: var(--muted); font-weight: 400; }
.adv-best-btn { margin-left: auto; }
.adv-del { margin-left: auto; }

/* admin users */
.user-add { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.user-add .auth-input.slim { flex: 1; min-width: 150px; }
.user-off td { opacity: 0.5; }
.user-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.danger-btn { color: #f87171; }
.danger-btn:hover { background: rgba(248, 113, 113, 0.12); }
.usage-cell { font-size: 0.72rem; color: var(--muted); line-height: 1.45; white-space: nowrap; }
.msg.error {
    align-self: stretch; max-width: 100%;
    background: #2a1418; border: 1px solid #6b2330; color: #ffb4b4;
}
.msg-err-head { font-weight: 700; margin-bottom: 0.2rem; color: #ff9aa6; }
.msg.error details { margin-top: 0.4rem; }
.msg.error summary { cursor: pointer; font-size: 0.85rem; }
.msg.error pre {
    margin: 0.5rem 0 0; white-space: pre-wrap; word-break: break-word;
    font-size: 0.78rem; max-height: 220px; overflow: auto;
}
.composer {
    display: flex; gap: 0.4rem; align-items: flex-end;
    background: #0f1218; border: 1px solid var(--border); border-radius: 14px;
    padding: 0.35rem 0.4rem 0.35rem 0.75rem;
}
.composer:focus-within { border-color: var(--accent); }
.composer textarea {
    flex: 1; border: 0; background: transparent; color: var(--fg); resize: none;
    font: inherit; font-size: 0.9rem; line-height: 1.45; padding: 0.45rem 0;
    min-height: 3.2rem; max-height: 200px; outline: none;
}
.send-btn {
    flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.send-btn:hover:not(:disabled) { filter: brightness(1.1); }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.send-btn svg { width: 17px; height: 17px; }
.composer-hint { font-size: 0.72rem; margin: 0.35rem 0 0; text-align: center; }

.row-del {
    border: 0; background: transparent; color: #b06; cursor: pointer;
    font-size: 0.85rem; opacity: 0.6;
}
.row-del:hover { opacity: 1; color: #e0426a; }
.row-edit {
    border: 0; background: transparent; color: #6b6385; cursor: pointer;
    font-size: 0.9rem; opacity: 0.6; margin-right: 0.4rem;
}
.row-edit:hover { opacity: 1; color: var(--site-accent, var(--accent)); }
.form-actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 1.2rem; }
.form-actions .add-parent { margin-top: 0; }

/* ---- editor: AI (left) + website (right, fills the side) ---- */
/* The editor wants the whole window — drop the shell's centring padding for it. */
.conjure-shell:has(.editor-page) { padding: 0.5rem 0.6rem; }
.editor-page { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; text-align: left; }
.editor-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
/* Zoomable canvas: the preview is wrapped so it can scale and scroll without moving the
   prompt bar / popovers (which stay absolutely placed in the stage). */
.stage-canvas { flex: 1; min-height: 0; display: flex; overflow: auto; justify-content: center; }
.zoom-wrap { flex: 1; min-height: 0; min-width: 0; display: flex; }
.zoom-ctl {
    position: absolute; left: 12px; bottom: 16px; z-index: 33; display: inline-flex; align-items: center; gap: 2px;
    background: rgba(17, 20, 27, 0.99); border: 1px solid var(--border); border-radius: 10px; padding: 3px;
    backdrop-filter: blur(8px); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.7);
    opacity: 0.9; transition: opacity 0.12s ease;
}
.zoom-ctl:hover { opacity: 1; }
/* All three controls share centring so the −, %, and + sit on the optical middle. */
.zc-btn, .zc-lvl, .zc-ico {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: #cfd3dc; cursor: pointer; font: inherit; border-radius: 7px;
}
.zc-btn { width: 26px; height: 26px; font-size: 1.15rem; line-height: 1; }
.zc-lvl { min-width: 46px; height: 26px; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.zc-ico { width: 26px; height: 26px; color: #cfd3dc; pointer-events: none; }
.zc-btn:hover:not(:disabled), .zc-lvl:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.zc-btn:disabled { opacity: 0.4; cursor: default; }
/* Collapsed: just the magnifier icon; expand to the full −/level/+ on hover. */
.zoom-ctl .zc-btn, .zoom-ctl .zc-lvl { display: none; }
.zoom-ctl:hover .zc-ico { display: none; }
.zoom-ctl:hover .zc-btn, .zoom-ctl:hover .zc-lvl { display: inline-flex; }
.editor-top h1 { margin: 0; font-size: 1.4rem; flex: 1; }
.editor-top .back { margin: 0; }
.preview-btn { width: auto; padding: 0.5rem 1.1rem; text-decoration: none; }

.editor { flex: 1; min-height: 0; display: flex; gap: 1rem; }
.editor .chat { width: 380px; flex: 0 0 380px; height: 100%; margin: 0; }
.editor .site-side { flex: 1; min-width: 0; height: 100%; display: flex; }

/* browser-frame preview */
.browser {
    flex: 1; display: flex; flex-direction: column; min-height: 0;
    border: 1px solid #2b313d; border-radius: 14px; overflow: hidden;
    background: #ffffff; color: #1b1430;
}
/* simple browser frame: traffic-light dots + an address pill */
.browser-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.85rem; background: #ece9f5; border-bottom: 1px solid #d9d4ea; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #c9c4dd; }
.dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
.bz-dots { display: inline-flex; gap: 8px; }
.browser-bar .url {
    font-size: 0.78rem; color: #4a4d52; background: #fff; border-radius: 999px;
    padding: 0.3rem 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0;
}
.bz-urltext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-ic { display: inline-flex; align-items: center; color: #5f6368; }
.bz-lock svg { width: 12px; height: 12px; }

/* smooth page transition on navigation. Opacity ONLY — a transform here would create a
   containing block that traps fixed popups rendered inside (e.g. related-list dialogs in an
   expanded row) and let the site header paint over them. */
.site-view { animation: viewFade 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes viewFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .site-view { animation: none; } }

/* nested pages (one level) in the sidebar */
.navlink-row.nested { margin-left: 0.5rem; }
.navlink-row.nested .navlink { font-size: 0.92em; opacity: 0.9; border-left: 2px solid #e2dcf0; border-radius: 0 8px 8px 0; }
.navlink-row.nested .navlink.active { opacity: 1; }
/* "nest under" control on a page (editor) */
.page-editbar { margin: 0.1rem 0 0.4rem; font-size: 0.8rem; color: #6b6385; }
.page-editbar label { display: inline-flex; align-items: center; gap: 0.4rem; }
.page-editbar select {
    font: inherit; font-size: 0.82rem; padding: 0.25rem 0.45rem; border: 1px solid #d8d3e8;
    border-radius: 7px; background: #fff; color: #1b1430;
}

/* rename a page (editor) */
.page-rename-btn { border: 0; background: none; cursor: pointer; color: #8b80b0; font-size: 0.85rem; margin-left: 0.4rem; }
.page-rename-btn:hover { color: var(--site-accent, var(--accent)); }
.page-rename { display: flex; align-items: center; gap: 0.4rem; flex: 1; }
.page-rename input {
    font-size: 1.1rem; font-weight: 600; padding: 0.3rem 0.5rem; border: 1px solid #d8d3e8;
    border-radius: 8px; color: #1b1430; background: #fff; min-width: 0; flex: 1; max-width: 340px;
}
.site-nav {
    display: flex; gap: 0.25rem; flex-wrap: wrap;
    padding: 0.5rem 0.85rem; background: #f6f4fc; border-bottom: 1px solid #e6e2f2;
}
.navlink {
    border: 0; background: transparent; color: #4a4360; cursor: pointer;
    padding: 0.4rem 0.8rem; border-radius: 8px; font: inherit; font-weight: 500;
}
.navlink:hover { background: #ece8f7; }
.navlink.active { background: var(--site-accent, var(--accent)); color: var(--site-ink, #fff); }
.site-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.75rem; }
/* generated-site home: landing-style hero + image + feature cards */
.gen-home {
    --gen-accent: var(--site-accent, var(--accent));
    /* the accent darkened enough to read as text/icons on the light card surfaces */
    --gen-accent-ink: var(--site-accent-ink, var(--site-accent, var(--accent)));
    max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 3rem; padding: 0.5rem 0 1.5rem;
}

/* ---- hero: text + theme-aware app mock on a soft accent backdrop ---- */
.gen-hero {
    position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.4rem;
    align-items: center; padding: 2.4rem; border-radius: 24px; overflow: hidden;
    background: color-mix(in srgb, var(--gen-accent) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--gen-accent) 16%, #eee);
}
.gen-hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(38% 60% at 88% 8%, color-mix(in srgb, var(--gen-accent) 26%, transparent), transparent 70%),
        radial-gradient(40% 60% at 8% 100%, color-mix(in srgb, var(--gen-accent) 16%, transparent), transparent 70%);
}
.gen-hero-text, .gen-hero-media { position: relative; z-index: 1; }
.gen-hero-text { text-align: left; }
.gen-eyebrow {
    display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.02em; text-transform: uppercase; color: var(--gen-accent);
    background: #fff; border: 1px solid color-mix(in srgb, var(--gen-accent) 22%, #fff);
    padding: 0.32rem 0.7rem; border-radius: 999px; margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.gen-eyebrow .nav-ico { display: inline-flex; width: 14px; height: 14px; }
.gen-hero-text h1 { font-size: 2.6rem; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.8rem; color: #14121d; }
.gen-lead { font-size: 1.06rem; line-height: 1.65; color: #4a4360; margin: 0 0 1.6rem; max-width: 42ch; }
.gen-hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.gen-cta {
    display: inline-flex; align-items: center; gap: 0.5rem; border: 0; cursor: pointer; font: inherit;
    font-weight: 600; font-size: 0.95rem; padding: 0.72rem 1.25rem; border-radius: 11px;
    background: var(--gen-accent); color: #fff;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--gen-accent) 35%, transparent);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.gen-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.gen-cta-arr { transition: transform 0.12s ease; }
.gen-cta:hover .gen-cta-arr { transform: translateX(3px); }
.gen-cta.ghost {
    background: #fff; color: #14121d; box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--gen-accent) 28%, #ddd);
}
.gen-cta.ghost:hover { border-color: var(--gen-accent); }

/* the app mock (shows the site's real pages) */
.gen-window {
    background: #fff; border-radius: 14px; overflow: hidden;
    border: 1px solid #ece8f5; box-shadow: 0 24px 60px rgba(20, 18, 40, 0.16);
    transform: rotate(0.6deg);
}
.gen-window-bar { display: flex; gap: 6px; padding: 0.6rem 0.8rem; background: #f6f4fc; border-bottom: 1px solid #eee; }
.gen-window-bar span { width: 9px; height: 9px; border-radius: 50%; background: #d9d4e6; }
.gen-window-bar span:first-child { background: #f9b8bf; }
.gen-window-bar span:nth-child(2) { background: #ffe0a3; }
.gen-window-body { display: grid; grid-template-columns: auto 1fr; }
.gen-window-head {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.85rem;
    color: #fff; background: var(--gen-accent); padding: 0.6rem 0.8rem;
}
.gen-window-head .gw-logo { display: inline-flex; width: 15px; height: 15px; }
.gen-window-nav { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.5rem; background: #faf9ff; min-width: 116px; }
.gen-window-item {
    display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; color: #6b6385;
    padding: 0.34rem 0.5rem; border-radius: 7px; white-space: nowrap;
}
.gen-window-item i { display: inline-flex; width: 13px; height: 13px; }
.gen-window-item.on { background: color-mix(in srgb, var(--gen-accent) 14%, #fff); color: var(--gen-accent); font-weight: 600; }
.gen-window-main { padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.gen-window-main .gw-line { height: 9px; border-radius: 5px; background: #eceaf4; }
.gw-line.w60 { width: 60%; } .gw-line.w75 { width: 75%; } .gw-line.w90 { width: 90%; }
.gen-window-main .gw-pill { margin-top: 0.4rem; width: 84px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--gen-accent) 22%, #fff); }

/* ---- feature cards ---- */
.gen-sec-title { font-size: 1.15rem; margin: 0 0 1rem; color: #14121d; }
.gen-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.gen-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; text-align: left;
    background: #fff; border: 1px solid #ece8f5; border-radius: 16px; padding: 1.3rem; cursor: pointer;
    font: inherit; transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.gen-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gen-accent) 40%, #eee); box-shadow: 0 16px 36px rgba(20, 18, 40, 0.1); }
.gen-card-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    border-radius: 13px; color: var(--gen-accent);
    background: color-mix(in srgb, var(--gen-accent) 13%, #fff);
}
.gen-card-ico svg { width: 23px; height: 23px; }
.gen-card h3 { margin: 0; font-size: 1.02rem; color: #14121d; }
.gen-card p { margin: 0; font-size: 0.86rem; color: #6b6385; line-height: 1.5; flex: 1; }
.gen-card-link { font-size: 0.82rem; font-weight: 600; color: var(--gen-accent); margin-top: 0.2rem; }

@media (max-width: 680px) {
    .gen-hero { grid-template-columns: 1fr; padding: 1.6rem; }
    .gen-hero-media { display: none; }
    .gen-hero-text h1 { font-size: 2.1rem; }
}

/* ---- AI-designed home (real hero photo + tailored content sections) ---- */
.gen-home.designed { gap: 1.5rem; }

/* layout-grid renderer (docs/editor-redesign.md): blocks place themselves on a 12-track grid
   via inline grid-column. The grid's own row-gap sets the vertical rhythm, so the legacy
   per-section margin-top is zeroed here (it would otherwise double the spacing). */
.gen-home.designed.dh-grid {
    display: grid;
    grid-template-columns: repeat(var(--dh-cols, 12), 1fr);
    column-gap: 1.2rem; row-gap: 1.5rem;
    align-items: stretch;
    position: relative;   /* anchor the drag column-overlay */
}
.gen-home.designed.dh-grid > section { min-width: 0; margin-top: 0; }

/* Click-to-select: outline the selected block + its floating direct-manipulation toolbar.
   Only the selected block is outlined — the hover affordance is the "✥ Drag" handle, not a
   dashed box around every element (that read as noise). */
.cj-preview [data-block-id] { transition: outline-color 0.12s ease; }
.cj-preview [data-block-id].cj-sel { outline: 2px solid var(--site-accent, #7c5cff); outline-offset: 3px; border-radius: 6px; }
.cj-block-tools {
    position: fixed; z-index: 60; display: none; align-items: center; gap: 2px;
    padding: 4px; border-radius: 10px;
    background: rgba(18, 21, 30, 0.97); border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.cjbt {
    background: transparent; border: 0; color: #e8eaf0; cursor: pointer;
    font-size: 0.9rem; line-height: 1; padding: 5px 8px; border-radius: 7px; min-width: 28px;
}
.cjbt:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.cjbt:disabled { opacity: 0.35; cursor: default; }
.cjbt.on { background: var(--site-accent, #7c5cff); color: #fff; }
.cjbt.danger:hover:not(:disabled) { background: #e5484d; color: #fff; }
.cjbt-sep { width: 1px; align-self: stretch; margin: 2px 3px; background: rgba(255, 255, 255, 0.14); }
body.cj-dragging, body.cj-dragging * { cursor: grabbing !important; user-select: none; }
/* Snap drop-indicator: an accent bar on the edge of the block the drop will land beside. */
.cj-preview [data-block-id].cj-drop-top { box-shadow: inset 0 4px 0 var(--site-accent, #7c5cff); }
.cj-preview [data-block-id].cj-drop-bottom { box-shadow: inset 0 -4px 0 var(--site-accent, #7c5cff); }
.cj-preview [data-block-id].cj-drop-left { box-shadow: inset 4px 0 0 var(--site-accent, #7c5cff); }
.cj-preview [data-block-id].cj-drop-right { box-shadow: inset -4px 0 0 var(--site-accent, #7c5cff); }
/* 12-column snap overlay shown while dragging a block: faint column guides + a ghost that marks
   where the block will land (start column × its width, at the insertion row). */
.cj-grid-overlay {
    position: absolute; inset: 0; z-index: 6; pointer-events: none;
    display: grid; grid-template-columns: repeat(var(--dh-cols, 12), 1fr); column-gap: 1.2rem;
}
.cj-grid-col { border-radius: 4px; background: rgba(124, 92, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.18); }
.cj-grid-ghost {
    position: absolute; height: 6px; border-radius: 4px; display: none;
    background: var(--site-accent, #7c5cff); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.25);
    transition: left 60ms ease, width 60ms ease, top 60ms ease;
}
/* Visible "✥ Drag" handle that follows the hovered block — the discoverable grab point. */
.cj-drag-handle {
    position: fixed; z-index: 58; display: none; align-items: center; gap: 4px;
    padding: 4px 9px; border-radius: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2px;
    color: #fff; background: var(--site-accent, #7c5cff); opacity: 0.92; cursor: grab; user-select: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.cj-drag-handle:hover { opacity: 1; }
.cj-drag-handle:active { cursor: grabbing; }
.cj-drag-handle .cj-dh-ico { font-size: 0.85rem; line-height: 1; }
/* The block being dragged dims so the snap ghost reads as the destination. */
.cj-preview [data-block-id].cj-drag-src { opacity: 0.4; }
/* Edge-resize grips on the selected block's left/right middle. */
.cj-resize-handle {
    position: fixed; z-index: 59; display: none; align-items: center; justify-content: center;
    width: 10px; height: 34px; cursor: ew-resize; touch-action: none;
}
.cj-resize-handle span {
    width: 4px; height: 26px; border-radius: 3px;
    background: var(--site-accent, #7c5cff); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}
/* While a drag/resize is in progress, hide the idle grips so only the ghost shows. */
body.cj-dragging .cj-drag-handle,
body.cj-dragging .cj-resize-handle { display: none !important; }
/* Resize ghost is a full-height box (vs the thin move line). */
.cj-grid-ghost.cj-grid-ghost-box { height: auto; border-radius: 8px; background: rgba(124, 92, 255, 0.18); box-shadow: inset 0 0 0 2px var(--site-accent, #7c5cff); }
.dh-hero {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; align-items: center;
    padding: 1.6rem; border-radius: 24px; overflow: hidden;
    background: color-mix(in srgb, var(--gen-accent) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--gen-accent) 16%, #eee);
}
.dh-hero.no-img { grid-template-columns: 1fr; }
.dh-hero-text { text-align: left; }
.dh-hero-text h1 { font-size: 2.6rem; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.8rem; color: #14121d; }
.dh-hero-img img {
    width: 100%; height: 100%; max-height: 380px; object-fit: cover; border-radius: 16px;
    box-shadow: 0 22px 50px rgba(20, 18, 40, 0.2); display: block;
}
.dh-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
.dh-card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid #ece8f5;
    border-radius: 16px; overflow: hidden; box-shadow: 0 6px 22px rgba(20, 18, 40, 0.05);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dh-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(20, 18, 40, 0.1); }
.dh-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: #f4f2fa; }
.dh-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-card-ico.dh-card-ico { width: 46px; height: 46px; margin: 1.2rem 1.2rem 0; }
.dh-card-body { padding: 1rem 1.2rem 1.3rem; }
.dh-card-body h3 { margin: 0 0 0.35rem; font-size: 1.05rem; color: #14121d; }
.dh-card-body p { margin: 0; font-size: 0.88rem; color: #6b6385; line-height: 1.5; }
@media (max-width: 680px) { .dh-hero { grid-template-columns: 1fr; padding: 1.2rem; } .dh-hero-img { display: none; } }

/* ---- richer landing section kinds (steps / features / quotes / cta) ---- */
/* Legacy (non-grid) flow spacing; the grid renderer zeroes this and uses row-gap instead. */
.gen-home.designed > section { margin-top: 1.5rem; }

/* numbered "how it works" steps band */
.dh-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: #ece8f5; border: 1px solid #ece8f5; border-radius: 18px; overflow: hidden; }
.dh-step { background: #fff; padding: 1.4rem 1.3rem; transition: background 0.2s; }
.dh-step:hover { background: #faf9ff; }
.dh-step-num { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.2em; color: var(--gen-accent-ink, var(--site-accent, var(--accent))); display: block; margin-bottom: 1rem; }
.dh-step h3 { margin: 0 0 0.5rem; font-size: 1.1rem; color: #14121d; }
.dh-step p { margin: 0; color: #5a5470; font-size: 0.95rem; line-height: 1.55; }

/* feature cards (icon + benefit) */
.dh-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.dh-feature { border: 1px solid #ece8f5; border-radius: 18px; padding: 1.3rem; background: linear-gradient(160deg, #faf9ff, #ffffff); transition: transform 0.2s, border-color 0.2s; }
.dh-feature:hover { transform: translateY(-3px); border-color: var(--site-accent, var(--accent)); }
.dh-feature-ico { display: inline-flex; align-items: center; width: 30px; height: 30px; color: var(--gen-accent-ink, var(--site-accent, var(--accent))); margin-bottom: 1rem; }
.dh-feature-ico svg { width: 28px; height: 28px; }
.dh-feature h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: #14121d; }
.dh-feature p { margin: 0; color: #5a5470; font-size: 0.93rem; line-height: 1.55; }

/* example / testimonial cards */
.dh-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.dh-quote { border: 1px solid #ece8f5; border-radius: 14px; padding: 1.2rem; background: #faf9ff; transition: border-color 0.2s; }
.dh-quote:hover { border-color: var(--site-accent, var(--accent)); }
.dh-quote-text { margin: 0; color: #2b2540; line-height: 1.6; }
.dh-quote-text::before { content: "❝ "; color: var(--site-accent, var(--accent)); font-weight: 700; }
.dh-quote-by { display: block; margin-top: 0.9rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--site-accent, var(--accent)); }

/* centred call-to-action band */
.dh-cta { text-align: center; padding: 2.2rem 1.4rem; border-radius: 22px; border: 1px solid #ece8f5;
    background: linear-gradient(135deg, color-mix(in srgb, var(--site-accent, var(--accent)) 14%, #fff), #faf9ff); }
.dh-video { display: flex; flex-direction: column; gap: 0.55rem; }
.dh-video-el { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 16px; background: #000; display: block; }
.dh-video-cap { margin: 0; color: #5a5470; font-size: 0.88rem; }
.dh-video-empty { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem;
    border-radius: 16px; border: 1px dashed #cdc7e0; color: #8a84a0; background: #faf9ff; font-size: 0.9rem; }
/* The record table rendered as a canvas block (entity pages). min-width:0 lets it sit in a grid
   track; overflow-x keeps a narrowed block usable. */
.dh-records-block { min-width: 0; overflow-x: auto; }
.dh-cta h2 { font-size: 1.9rem; margin: 0 auto 0.7rem; max-width: 20ch; color: #14121d; }
.dh-cta p { color: #5a5470; margin: 0 auto 1.4rem; max-width: 46ch; }

.site-hero { text-align: center; padding: 1.5rem 0; }
.site-hero h1 { font-size: 2.4rem; margin: 0 0 0.25rem; color: #1b1430; -webkit-text-fill-color: initial; background: none; }
.site-hero .muted { color: #6b6385; }
.hero-cards { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.hero-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    background: #f4f1fb; border: 1px solid #e0dbf0; border-radius: 14px;
    padding: 1.25rem 1.75rem; cursor: pointer; font: inherit; font-weight: 600; color: #1b1430;
}
.hero-card:hover { border-color: var(--accent); }
.site-page { max-width: 820px; margin: 0 auto; }
.site-page h2 { color: #1b1430; }
.new-related { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.2rem; max-width: 680px; }
.big-button.add-parent { margin-top: 1.2rem; }
.preview-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 460px; }
.preview-form label { font-weight: 600; font-size: 0.9rem; color: #4a4360; }
.preview-form input {
    padding: 0.55rem 0.7rem; border: 1px solid #d4cee6; border-radius: 8px;
    background: #fff; color: #1b1430; font: inherit;
}
.preview-form select {
    padding: 0.55rem 0.7rem; border: 1px solid #d4cee6; border-radius: 8px;
    background: #fff; color: #1b1430; font: inherit;
}
.preview-form .big-button { align-self: flex-start; margin-top: 0.75rem; }
.form-error { color: #c0392b; font-size: 0.9rem; margin: 0.25rem 0 0; }

.records { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: 0.9rem; }
.records th, .records td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid #ece8f5; color: #1b1430; }
.records th { color: #6b6385; font-weight: 600; }
.records td .cell-img, td > .cell-img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid #ece8f5; display: block; }

.rel-hint { font-size: 0.82rem; margin: 1.2rem 0 0; }

/* expandable parent rows -> inline child records (master-detail) */
.records tr.expandable { cursor: pointer; }
.records tr.expandable:hover td { background: #faf8ff; }
.rec-actions { white-space: nowrap; text-align: right; }
.rec-chevron {
    display: inline-block; margin-right: 0.4rem; color: #8b80b0; font-size: 1.05rem;
    transition: transform 140ms ease;
}
.rec-chevron.open { transform: rotate(90deg); }
.rec-detail-row > td { padding: 0; background: #f8f6ff; border-bottom: 1px solid #ece8f5; }
.rec-detail { display: flex; flex-direction: column; gap: 1rem; padding: 0.9rem 1rem 1.1rem; }

.related-list {
    background: #fff; border: 1px solid #e9e4f5; border-radius: 12px; padding: 0.9rem 1rem;
}
.related-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.related-head h4 {
    margin: 0; display: flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; color: #1b1430;
}
.related-head h4 .page-ico { display: inline-flex; width: 18px; height: 18px; color: #6b6385; }
.rel-add {
    border: 1px solid var(--site-accent, var(--accent)); background: transparent;
    color: var(--site-accent, var(--accent)); cursor: pointer; font: inherit; font-size: 0.82rem;
    font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 8px; white-space: nowrap;
}
.rel-add:hover { background: var(--site-accent, var(--accent)); color: #fff; }

/* neat added-items table */
.related-records { margin: 0; width: 100%; border-collapse: collapse; border: 1px solid #ece8f5; border-radius: 10px; overflow: hidden; }
.related-records th {
    background: #f6f4fc; color: #6b6385; font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.related-records th, .related-records td { padding: 0.5rem 0.7rem; border-bottom: 1px solid #f0ecf8; text-align: left; }
.related-records tbody tr:last-child td { border-bottom: 0; }
.related-records tbody tr:hover td { background: #faf8ff; }
.rel-rowact { text-align: right; width: 1%; white-space: nowrap; }
.related-scroll { overflow-x: auto; }
.related-records td { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* sortable column headers (both the main records table and related lists) */
.records th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.records th.sortable:hover { color: var(--site-accent, var(--accent)); }
.sort-ind { font-size: 0.7em; opacity: 0.8; }

/* entity page: title + add button on top, records first, form in a popup */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.big-button.page-add { width: auto; }
.page-empty { margin-top: 1.5rem; }
.modal.entry-modal { width: min(620px, calc(100vw - 2rem)); }

/* admin: the approve-models picker */
.modal.model-picker { width: min(880px, calc(100vw - 2rem)); }
.mp-tools { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.mp-tools .auth-input.slim { flex: 1; min-width: 220px; }
.mp-scroll { overflow-y: auto; max-height: min(56vh, 560px); border: 1px solid var(--border); border-radius: 10px; }
.mp-table { width: 100%; margin: 0; }
/* the modal lives outside .admin, so restate the dark-theme table colours */
.mp-table th, .mp-table td { color: var(--fg); border-bottom: 1px solid #242a36; }
.mp-table thead th { position: sticky; top: 0; background: #141823; z-index: 1; color: #b7aee0; }
.mp-table tbody tr { cursor: pointer; }
.mp-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.mp-table tbody tr.mp-on td { background: rgba(124, 92, 255, 0.1); }
.mp-table td, .mp-table th { white-space: nowrap; }
.mp-table td:nth-child(2), .mp-table th:nth-child(2) { white-space: normal; width: 100%; }
.mp-free { font-size: 0.68rem; color: #4ade80; background: rgba(74, 222, 128, 0.12); border-radius: 6px; padding: 0.08rem 0.4rem; margin-left: 0.35rem; }
.mp-new { font-size: 0.68rem; color: #7fb8ff; background: rgba(127, 184, 255, 0.12); border-radius: 6px; padding: 0.08rem 0.4rem; margin-left: 0.35rem; }
.mp-sel { max-width: 190px; }
.mp-drift { font-size: 0.72rem; color: #f5b301; }
.gw-chip { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: #c9a8ff; background: rgba(124, 92, 255, 0.12); padding: 0.1rem 0.45rem; border-radius: 6px; white-space: nowrap; }
/* rating indicator on approved models */
.mr-cell { display: flex; flex-direction: column; gap: 0.15rem; white-space: nowrap; }
.mr-count { font-size: 0.72rem; color: var(--muted); }
.mr-score { font-size: 0.74rem; font-weight: 600; border-radius: 6px; padding: 0.06rem 0.4rem; width: fit-content; }
.mr-score.good { color: #4ade80; background: rgba(74, 222, 128, 0.12); }
.mr-score.mid { color: #f5b301; background: rgba(245, 179, 1, 0.12); }
.mr-score.low { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.gw-add { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.9rem; }
.gw-add .gw-url { flex: 1; min-width: 220px; }

/* editor version history */
.ver-list { display: flex; flex-direction: column; gap: 0.45rem; }
.ver-item { background: #141823; border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.65rem; display: flex; flex-direction: column; gap: 0.25rem; }
.ver-label { font-size: 0.84rem; color: var(--fg); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ver-act { display: flex; gap: 0.35rem; }

/* delete-page ✕ on nav items (editor only) */
.navlink-row { display: flex; align-items: center; }
.navlink-row .navlink { flex: 1; min-width: 0; }
/* drag-to-reorder pages */
.navlink-row.draggable { cursor: grab; }
.navlink-row.draggable:active { cursor: grabbing; }
.nav-grip { color: #b8b0d0; font-size: 0.7rem; letter-spacing: -2px; padding: 0 0.15rem 0 0.1rem; opacity: 0; transition: opacity 0.12s; user-select: none; }
.navlink-row.draggable:hover .nav-grip { opacity: 0.7; }
.navlink-row.drag-over { box-shadow: inset 0 2px 0 0 var(--site-accent, var(--accent)); border-radius: 6px; }
.topnav-item { display: inline-flex; align-items: center; }
.nav-del {
    border: 0; background: none; cursor: pointer; color: #c0392b; opacity: 0;
    font-size: 0.78rem; padding: 0.2rem 0.4rem; border-radius: 6px; transition: opacity 0.1s ease;
}
.navlink-row:hover .nav-del, .topnav-item:hover .nav-del { opacity: 0.7; }
.nav-del:hover { opacity: 1; background: rgba(220, 38, 38, 0.14); }
.topnav-del { color: rgba(255, 255, 255, 0.8); }
.topnav-del:hover { background: rgba(255, 255, 255, 0.2); }
.related-empty {
    font-size: 0.85rem; margin: 0; padding: 0.7rem; text-align: center;
    background: #faf9ff; border: 1px dashed #e6e2f2; border-radius: 10px;
}
/* the add-child popup shows a (light) website form, so the card itself is light.
   Use .modal.related-modal so it beats the dark base .modal regardless of source order. */
.modal.related-modal { background: #fff; color: #1b1430; }
.related-modal .modal-head h2 { color: #1b1430; }
.related-modal .toplink { color: var(--site-accent, var(--accent)); }
.related-modal label { color: #1b1430; }
.related-modal .related-form { margin: 0; }
.related-modal .pf-field input, .related-modal .pf-field select, .related-modal .pf-field textarea {
    background: #fff; color: #1b1430; border: 1px solid #d8d3e8;
}
.related-modal .big-button.ghost {
    background: transparent; color: var(--site-accent, var(--accent)); border-color: var(--site-accent, var(--accent));
}

/* full-screen preview route */
.preview-page { width: min(1000px, 100%); margin: 0 auto; padding: 1.5rem; height: calc(100vh - 3rem); display: flex; flex-direction: column; gap: 0.75rem; }
.preview-page .browser { flex: 1; }

/* full-page preview: the real browser tab IS the window, so drop the mock frame */
.browser.no-chrome { border: 0; border-radius: 0; }
.preview-page.fullpage { position: fixed; inset: 0; z-index: 60; width: 100%; max-width: none; height: 100vh; margin: 0; padding: 0; gap: 0; }
.preview-page.fullpage .browser { flex: 1; height: 100vh; border-radius: 0; }
.preview-back {
    position: fixed; top: 0.7rem; left: 0.7rem; z-index: 100; background: rgba(15, 15, 25, 0.55);
    color: #fff; padding: 0.35rem 0.75rem; border-radius: 999px; text-decoration: none; font-size: 0.8rem;
    backdrop-filter: blur(5px); opacity: 0.45; transition: opacity 0.15s;
}
.preview-back:hover { opacity: 1; }

/* ---- generated website preview: header + collapsible left nav + sticky footer ---- */
.browser .site {
    display: flex; flex-direction: column; flex: 1; min-height: 0; width: auto; margin: 0; padding: 0;
    font-family: var(--site-font, system-ui, sans-serif);
}
/* Header text uses --site-ink (white or near-black, chosen by contrast against the accent in
   SitePreview) so a light accent doesn't leave white text unreadable; nav tints derive from it. */
.site-header {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 1rem; color: var(--site-ink, #fff); border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, var(--site-accent, var(--accent)),
        color-mix(in srgb, var(--site-accent, var(--accent)) 78%, #1a1a2e));
}
.hamburger {
    border: 0; background: transparent; color: var(--site-ink, #fff); cursor: pointer;
    display: inline-flex; align-items: center; padding: 0.3rem; border-radius: 8px;
}
.hamburger:hover { background: color-mix(in srgb, var(--site-ink, #fff) 18%, transparent); }
.site-title {
    color: var(--site-ink, #fff); border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 700; padding: 0;
}
.site-title:hover { opacity: 0.8; }
.site-topnav { display: flex; flex-wrap: wrap; gap: 0.15rem; margin-left: 0.7rem; }
.site-header-links { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-left: auto; }
@media (max-width: 640px) { .site-header-links { display: none; } }
.topnavlink {
    border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.85rem;
    color: color-mix(in srgb, var(--site-ink, #fff) 82%, transparent); padding: 0.3rem 0.6rem; border-radius: 7px;
}
.topnavlink:hover { background: color-mix(in srgb, var(--site-ink, #fff) 18%, transparent); color: var(--site-ink, #fff); }
.topnavlink.active { background: color-mix(in srgb, var(--site-ink, #fff) 25%, transparent); color: var(--site-ink, #fff); }
.site-main { flex: 1; min-height: 0; display: flex; position: relative; }
/* on small screens the expanded sidebar overlays the content instead of squashing it */
@media (max-width: 820px) {
    .site .site-sidenav { position: absolute; top: 0; bottom: 0; left: 0; z-index: 6; box-shadow: 2px 0 14px rgba(0, 0, 0, 0.14); }
}
.site-sidenav {
    width: 0; overflow: hidden; background: #f6f4fc; border-right: 1px solid #e6e2f2;
    display: flex; flex-direction: column; gap: 0.2rem; transition: width 160ms ease;
}
.site.nav-open .site-sidenav { width: 200px; padding: 0.6rem; }
.site-sidenav .navlink { display: block; width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.site-content { flex: 1; min-height: 0; overflow-y: auto; padding: 0.9rem 1.75rem 1.75rem; background: var(--site-bg, #fff); background-attachment: local; }
.site-page > .page-head:first-child { margin-top: 0; }
.site-page .page-head h2 { margin: 0; }

/* when a background image/gradient is set, float the page content on a frosted translucent
   panel so tables and text stay readable over it */
.cj-preview.has-bg .site-page,
.cj-preview.has-bg .gen-home {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(20, 18, 40, 0.12);
}
.cj-preview.has-bg .site-crumbs { backdrop-filter: blur(4px); }

/* AI-designed page intro (above an entity page's records) */
.page-intro { margin-bottom: 1.6rem; }
.page-intro-hero img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 16px; display: block; }
.page-intro-text { margin: 0.9rem 0; }
.page-intro-text h2 { margin: 0 0 0.3rem; font-size: 1.5rem; }
.page-intro-text p { margin: 0; color: #5a5470; }
.page-intro-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.85rem; }
.pi-card { background: #fff; border: 1px solid #ece8f5; border-radius: 12px; overflow: hidden; box-shadow: var(--elev-1); }
.pi-card img { width: 100%; height: 110px; object-fit: cover; display: block; }
.pi-card-text { padding: 0.7rem 0.85rem; display: flex; flex-direction: column; gap: 0.25rem; }
.pi-card-text strong { font-size: 0.95rem; }
.pi-card-text span { font-size: 0.82rem; color: #6b6385; }
.site-footer {
    padding: 0.5rem 0.9rem; background: #f0eef8; border-top: 1px solid #e6e2f2;
    color: #6b6385; font-size: 0.8rem; text-align: center;
}

/* ===== landing page (.lp) ===== */
.lp { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 1.25rem 3rem; text-align: center; }

.lp-nav { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0; }
.lp-logo { font-weight: 700; font-size: 1.15rem; }
.lp-navlinks { display: flex; align-items: center; gap: 1rem; }
.lp-navlinks a { color: var(--fg); opacity: 0.85; text-decoration: none; font-size: 0.9rem; }
.lp-navlinks a:hover { opacity: 1; }

.lp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.7rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.lp-btn.sm { padding: 0.45rem 0.95rem; font-size: 0.85rem; }
.lp-btn.primary { background: var(--accent); color: #fff; box-shadow: 0 8px 24px -10px var(--accent); }
.lp-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lp-btn.ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.lp-btn.ghost:hover { border-color: var(--accent); }

.lp-hero { position: relative; padding: 3.5rem 0 1rem; }
.lp-hero::before {
    content: ""; position: absolute; inset: -10% 20% auto; height: 320px; z-index: -1;
    background: radial-gradient(closest-side, rgba(59,130,246,0.18), transparent);
    filter: blur(10px);
}
.lp-badge {
    display: inline-block; padding: 0.35rem 0.9rem; border-radius: 999px;
    border: 1px solid var(--border); background: #141823; color: var(--muted);
    font-size: 0.78rem; letter-spacing: 0.02em;
}
.lp-hero h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 1.05; margin: 1.1rem 0 0.75rem; letter-spacing: -0.02em; }
.lp-hero h1 .grad {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-sub { color: var(--muted); font-size: 1.1rem; max-width: 600px; margin: 0 auto; line-height: 1.6; }
.lp-cta { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; flex-wrap: wrap; }

/* hero product mockup */
.lp-mock { margin-top: 3rem; perspective: 1400px; }
.mock-window {
    max-width: 860px; margin: 0 auto; border-radius: 16px; overflow: hidden;
    background: #11141b; border: 1px solid var(--border);
    box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.02);
}
.mock-bar { display: flex; gap: 0.4rem; padding: 0.7rem 0.9rem; background: #0d1017; border-bottom: 1px solid var(--border); }
.mock-bar span { width: 11px; height: 11px; border-radius: 50%; background: #2b313d; }
.mock-bar span:nth-child(1) { background: #ef5f56; } .mock-bar span:nth-child(2) { background: #f5bd4f; } .mock-bar span:nth-child(3) { background: #5fc454; }
.mock-body { display: flex; gap: 0; min-height: 260px; text-align: left; }
.mock-chat { flex: 1; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; border-right: 1px solid var(--border); }
.mock-msg { padding: 0.55rem 0.8rem; border-radius: 12px; font-size: 0.85rem; max-width: 92%; }
.mock-msg.user { align-self: flex-end; background: var(--accent); color: #fff; }
.mock-msg.bot { align-self: flex-start; background: #1c2130; color: var(--fg); }
.mock-input { margin-top: auto; padding: 0.6rem 0.8rem; border-radius: 10px; background: #0f1218; border: 1px solid var(--border); color: var(--muted); font-size: 0.82rem; }
.mock-site { flex: 1; background: #fff; color: #1b2430; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.mock-site-head { font-weight: 700; font-size: 1.05rem; }
.mock-field { height: 12px; border-radius: 6px; background: #e7eaf1; }
.mock-field.short { width: 55%; }
.mock-cta { margin-top: auto; align-self: flex-start; background: var(--accent); color: #fff; padding: 0.45rem 1rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; }
@media (max-width: 680px) { .mock-body { flex-direction: column; } .mock-chat { border-right: 0; border-bottom: 1px solid var(--border); } }

/* feature cards */
.lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 4rem; }
.lp-card { background: #141823; border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem 1.25rem; text-align: left; }
.lp-card:hover { border-color: #38415a; transform: translateY(-3px); }
.lp-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(59,130,246,0.12); color: var(--accent-2); margin-bottom: 0.8rem; }
.lp-ico svg { width: 22px; height: 22px; }
.lp-card h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.lp-card p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

/* steps */
.lp-steps { margin-top: 4.5rem; }
.lp-steps h2 { font-size: 1.8rem; margin-bottom: 1.75rem; letter-spacing: -0.01em; }
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.lp-step { background: #11141b; border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; }
.lp-step .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; }
.lp-step h4 { margin: 0.75rem 0 0.35rem; font-size: 1.1rem; }
.lp-step p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* bottom CTA */
.lp-bottom { margin-top: 4.5rem; padding: 3rem 1.5rem; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(180deg, #141823, #0f1218); }
.lp-bottom h2 { font-size: 2rem; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.lp-bottom .lp-btn { margin-top: 1.25rem; }

/* visual aids in the generated site */
.site-sidenav .navlink { display: flex; align-items: flex-start; gap: 0.55rem; }
.site-sidenav .navlink .nav-ico { margin-top: 1px; flex-shrink: 0; }
.nav-ico { font-size: 1.05rem; line-height: 1; }
.site-page h2 { display: flex; align-items: center; gap: 0.5rem; }
.page-ico { font-size: 1.4rem; }
.hero-badge {
    width: 64px; height: 64px; margin: 0 auto 0.75rem; display: grid; place-items: center;
    font-size: 2rem; border-radius: 18px; background: #eef2fb; border: 1px solid #e0e6f3;
}

/* svg sizing for the generated-site visual aids */
.nav-ico { display: inline-flex; align-items: center; }
.nav-ico svg { width: 16px; height: 16px; }
.page-ico { display: inline-flex; align-items: center; }
.page-ico svg { width: 22px; height: 22px; }
.hero-card .tile-emoji svg { width: 30px; height: 30px; }
.hero-badge svg { width: 30px; height: 30px; color: var(--site-accent, var(--accent)); }

/* generated-site accent: primary buttons + page icons follow the site's chosen colour.
   Ghost/danger keep their own look (outline / red) — only fill true primaries. */
.cj-preview .big-button:not(.ghost):not(.danger) { background: var(--site-accent, var(--accent)); }
.cj-preview .big-button.ghost { background: transparent; border-color: var(--site-accent, var(--accent)); }
.cj-preview .lp-btn.primary { background: var(--site-accent, var(--accent)); box-shadow: 0 8px 24px -10px var(--site-accent, var(--accent)); }
.cj-preview .page-ico svg { color: var(--site-accent, var(--accent)); }

/* code/styles drawer */
.code-drawer {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 92vw); z-index: 30;
    background: #11141b; border-left: 1px solid var(--border); box-shadow: -20px 0 60px -30px rgba(0,0,0,0.8);
    padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; overflow: hidden;
}
.code-head { display: flex; align-items: center; justify-content: space-between; }
.code-tabs { display: flex; gap: 0.4rem; }
.code-tabs button { background: #181b23; border: 1px solid var(--border); color: var(--fg); padding: 0.35rem 0.8rem; border-radius: 8px; cursor: pointer; font-size: 0.85rem; }
.code-tabs button.active { background: var(--accent); border-color: var(--accent); }
.code-area {
    flex: 1; min-height: 0; width: 100%; box-sizing: border-box; resize: none; font-family: ui-monospace, monospace; font-size: 0.8rem;
    background: #0f1218; color: #cdd6e6; border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem; overflow: auto;
}
.code-area.readonly { white-space: pre-wrap; word-break: break-word; }
.code-area { text-align: left; }   /* JSON should read left-aligned even inside centered modals */
.editor-page { position: relative; } /* anchor the drawer */
.saved { color: #5fc454; font-size: 0.8rem; margin-left: 0.5rem; }

/* admin inline edit */
.inline-edit { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.inline-edit .auth-input { max-width: 320px; }
.auth-input.slim { padding: 0.35rem 0.5rem; max-width: 240px; }
/* AI-models page: model dropdowns carry long labels (name + pricing + context) — give them room */
.admin .inline-edit select.auth-input { max-width: 720px; width: 100%; }
.admin .records select.auth-input.slim { max-width: none; width: 100%; min-width: 280px; }

/* ---- rich form controls in the preview ---- */
.preview-form textarea {
    padding: 0.55rem 0.7rem; border: 1px solid #d4cee6; border-radius: 8px;
    background: #fff; color: #1b1430; font: inherit; resize: vertical;
}
.pf-slider { display: flex; align-items: center; gap: 0.75rem; }
.pf-slider input[type=range] { flex: 1; accent-color: var(--accent); }
.pf-num { min-width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; color: #4a4360; }
.pf-toggle { position: relative; display: inline-flex; width: 44px; height: 24px; }
.pf-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pf-track { width: 44px; height: 24px; border-radius: 999px; background: #d4cee6; transition: background 160ms; position: relative; }
.pf-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 160ms; }
.pf-toggle input:checked + .pf-track { background: var(--accent); }
.pf-toggle input:checked + .pf-track::after { transform: translateX(20px); }
.pf-radios { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pf-radio { display: inline-flex; align-items: center; gap: 0.35rem; color: #1b1430; }
.pf-radio input { accent-color: var(--accent); }
.pf-color { width: 48px; height: 34px; padding: 2px; border: 1px solid #d4cee6; border-radius: 8px; background: #fff; cursor: pointer; }
.pf-image { display: flex; flex-direction: column; gap: 0.5rem; }
.pf-image-row { display: flex; gap: 0.4rem; align-items: stretch; }
.pf-image-row input { flex: 1; min-width: 0; }
.pf-imgsearch {
    white-space: nowrap; border: 1px solid var(--site-accent, var(--accent)); background: transparent;
    color: var(--site-accent, var(--accent)); cursor: pointer; font: inherit; font-size: 0.82rem;
    padding: 0.3rem 0.6rem; border-radius: 8px;
}
.pf-imgsearch:hover { background: var(--site-accent, var(--accent)); color: #fff; }
.pf-image-prev { max-width: 100%; max-height: 160px; border-radius: 8px; border: 1px solid #e6e2f2; object-fit: cover; }

/* image-search picker (a built-in field helper) */
.modal.img-picker { width: min(640px, calc(100vw - 2rem)); background: #fff; color: #14121d; z-index: 60; }
.img-picker .modal-head h2 { color: #14121d; }
.img-picker .toplink { color: #6b6385; }
.ip-search { display: flex; gap: 0.5rem; }
.ip-search input {
    flex: 1; padding: 0.5rem 0.65rem; border: 1px solid #d8d3e8; border-radius: 9px; font: inherit; color: #14121d; background: #fff;
}
.ip-search input:focus { outline: none; border-color: var(--site-accent, var(--accent)); }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; max-height: 46vh; overflow-y: auto; }
.ip-item { border: 1px solid #ece8f5; border-radius: 10px; overflow: hidden; cursor: pointer; padding: 0; background: #f4f2fa; aspect-ratio: 1; }
.ip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-item:hover { border-color: var(--site-accent, var(--accent)); box-shadow: var(--elev-2); }
.ip-note { font-size: 0.74rem; margin: 0; }

/* inline (non-popup) forms — avoid stacking modals during nested data entry */
.img-picker-inline {
    border: 1px solid #ece8f5; border-radius: 10px; padding: 0.6rem; background: #faf9ff;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.img-picker-inline .ip-grid { max-height: 240px; }
.pf-imgsearch.on { background: var(--site-accent, var(--accent)); color: #fff; }
.related-addform {
    border-top: 1px dashed #e0dbf0; margin-top: 0.7rem; padding-top: 0.8rem;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.related-addform-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.88rem; color: #14121d; font-weight: 600; }
.related-addform .form-actions { margin-top: 0.2rem; }
.pf-rating { display: flex; gap: 0.2rem; }
.pf-star { border: 0; background: none; cursor: pointer; font-size: 1.5rem; line-height: 1; color: #d4cee6; padding: 0; }
.pf-star.on { color: #f5b301; }

/* ---- guidance chips ---- */
.chips { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0 0 0.5rem; }
.chip {
    flex: 0 0 auto; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--border);
    background: #141823; color: var(--muted); font-size: 0.78rem; cursor: pointer; white-space: nowrap;
}
.chip:hover:not(:disabled) { border-color: var(--accent); color: var(--fg); }
.chip:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== editor: website stage + slide-in AI panel ===== */
.editor-body { position: relative; flex: 1; min-height: 0; display: flex; }
.stage { flex: 1; min-height: 0; display: flex; transition: margin-right 220ms ease; position: relative; }
.stage .browser { flex: 1; }

/* Slim status bar (the tab panel's successor home for occasional tools) + its popovers. */
/* Page-agnostic tools relocated into the editor header (Theme / History / Code + model chip). */
.top-tools { display: flex; align-items: center; gap: 4px; }
.sb-btn { background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.85rem; padding: 5px 10px; border-radius: 8px; }
.sb-btn:hover { background: rgba(127, 127, 127, 0.12); color: var(--fg); }

/* Persistent prompt bar — canvas-native "ask/build anything", floats above the status bar. */
.prompt-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 32; width: min(680px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 8px; }
.prompt-bar-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px;
    background: rgba(17, 20, 27, 0.97); border: 1px solid var(--accent); border-radius: 14px;
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); }
.prompt-spark { font-size: 0.95rem; opacity: 0.85; }
.prompt-input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--fg); font: inherit; outline: none; }
.prompt-input::placeholder { color: var(--muted); }
.prompt-send { background: var(--accent); color: #fff; border: 0; border-radius: 9px; padding: 6px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.prompt-send:disabled { opacity: 0.5; cursor: default; }
.prompt-chat { background: transparent; border: 0; color: #cfd3dc; cursor: pointer; font-size: 1rem; padding: 4px 6px; border-radius: 8px; }
.prompt-chat:hover { background: rgba(255, 255, 255, 0.08); }
.prompt-pop { background: rgba(18, 21, 30, 0.98); border: 1px solid var(--border); border-radius: 12px;
    padding: 0.7rem 0.85rem; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.7); max-height: 50vh; overflow: auto; font-size: 0.88rem; }
.sb-btn.on { background: var(--site-accent, #7c5cff); color: #fff; border-color: transparent; }
.sb-model { opacity: 0.7; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.status-pop {
    position: absolute; right: 12px; top: 12px; z-index: 31;
    width: min(420px, calc(100% - 24px)); max-height: 70vh; overflow: auto;
    background: #11141b; border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.7); padding: 0.9rem; font-size: 0.85rem;
}
.ai-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.25); z-index: 24; }
.editor-page { --panel-w: 500px; }   /* wider default; drag the left edge to resize */
.ai-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--panel-w), 96vw); z-index: 25;
    background: #11141b; border-left: 1px solid var(--border);
    box-shadow: -24px 0 60px -30px rgba(0,0,0,0.85);
    display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem;
    transform: translateX(106%); transition: transform 220ms ease; font-size: 0.85rem;
}
.ai-panel.open { transform: translateX(0); }
/* drag handle on the panel's left edge */
.panel-resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 26; }
.panel-resize::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: transparent; transition: background 0.12s; }
.panel-resize:hover::after, .panel-resize.dragging::after { background: var(--accent); }
/* pinned: the panel docks to the side and the preview shrinks to fit on the left */
.editor-page.pinned .stage { margin-right: min(var(--panel-w), 96vw); }
.editor-page.pinned .ai-panel { transform: none; box-shadow: -8px 0 26px -20px rgba(0, 0, 0, 0.6); }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
/* tabbed editor panel (AI / Pages / Blocks / Theme / Code) */
.panel-tabs { display: flex; justify-content: space-between; gap: 0.25rem; margin: 0 -0.9rem; padding: 0 0.9rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ptab { background: none; border: 0; color: var(--muted); padding: 0.55rem 0.75rem; cursor: pointer; font: inherit; font-size: 0.82rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.ptab:hover { color: var(--fg); }
.ptab.active { color: var(--fg); border-bottom-color: var(--accent); }
.preview-btn.ghost.on { border-color: var(--accent); color: var(--fg); }
/* Code / config modal */
.code-modal { width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.code-modal .code-area { min-height: 320px; }
.code-modal .code-area.readonly { max-height: 52vh; }
.panel-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.panel-body:not(.ai) { overflow-y: auto; overflow-x: hidden; padding: 0.7rem 0.4rem 0 0; scrollbar-gutter: stable; }
.panel-section { display: flex; flex-direction: column; gap: 0.55rem; padding-bottom: 1rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.panel-section:last-child { border-bottom: 0; }
.panel-section h3 { margin: 0; font-size: 0.95rem; color: var(--fg); }
.panel-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* right-click context menu on the preview */
/* the spot AI panel — point-of-click questions/ideas. NON-MODAL (no backdrop): the page behind
   stays scrollable/clickable so you can examine the change and still give feedback. Resizable. */
.spot-panel {
    position: fixed; z-index: 71; width: 380px; max-height: min(70vh, 560px); overflow: auto;
    overflow-wrap: anywhere; resize: both;
    background: rgba(18, 21, 30, 0.97); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    border: 1px solid var(--accent); border-radius: 14px; padding: 0.8rem 0.95rem;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.75);
    display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.88rem;
}
/* parked while working / showing the result: out of the way + see-through, solid on hover */
.spot-panel.docked {
    left: auto !important; top: auto !important; right: 16px; bottom: 16px;
    width: 340px; background: rgba(18, 21, 30, 0.78);
    transition: background 150ms ease;
}
.spot-panel.docked:hover { background: rgba(18, 21, 30, 0.97); }
/* Collapsed to just the title bar — fully clears the page while staying available for feedback. */
.spot-panel.collapsed { width: 260px; max-height: none; resize: none; overflow: visible; }
.spot-panel.collapsed > :not(.spot-head) { display: none; }
.spot-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.spot-head-actions { display: flex; align-items: center; gap: 0.1rem; flex-shrink: 0; }
.spot-target { font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-sec { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 0.4rem; }
.spot-refresh { font-size: 0.85rem; }
.spot-chips { flex-wrap: wrap; overflow: visible; }
.spot-chips .chip { white-space: normal; text-align: left; line-height: 1.3; }
/* Quick tools: deterministic one-click edits — a touch more solid than the AI idea chips. */
.spot-chips .chip.quick { background: rgba(124, 92, 255, 0.16); border-color: rgba(124, 92, 255, 0.45); white-space: nowrap; }
.spot-chips .chip.quick:hover:not(:disabled) { background: rgba(124, 92, 255, 0.28); }
.spot-compose { display: flex; gap: 0.45rem; }
.spot-compose .auth-input.slim { flex: 1; min-width: 0; }
.spot-busy { display: flex; align-items: center; gap: 0.55rem; color: var(--muted); padding: 0.4rem 0; }
.spot-reply { background: rgba(124, 92, 255, 0.1); border: 1px solid rgba(124, 92, 255, 0.35); border-radius: 10px; padding: 0.55rem 0.7rem; line-height: 1.45; }
.spot-reply.err { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.4); }
.spot-hint { margin: 0; font-size: 0.8rem; }
.spot-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 0.55rem; }
.spot-act { background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.78rem; padding: 0.25rem 0.5rem; border-radius: 7px; }
.spot-act:hover { background: rgba(255, 255, 255, 0.07); color: var(--fg); }
.spot-act.on { background: rgba(124, 92, 255, 0.22); color: var(--fg); }
/* "+ Add page" affordance in the preview nav (editor) */
.navlink.nav-add, .topnavlink.nav-add { opacity: 0.7; }
.navlink.nav-add:hover, .topnavlink.nav-add:hover { opacity: 1; }
/* Remix: schematic thumbnails of alternative block arrangements (pick a picture). */
.remix-list { display: flex; flex-direction: column; gap: 0.5rem; }
.remix-variant { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; text-align: left; cursor: pointer;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.6rem; color: var(--fg); font: inherit; }
.remix-variant:hover:not(:disabled) { border-color: var(--accent); background: rgba(124, 92, 255, 0.1); }
.remix-variant:disabled { opacity: 0.5; cursor: default; }
.remix-label { font-size: 0.8rem; font-weight: 600; }
.remix-grid { display: grid; grid-template-columns: repeat(var(--rc, 12), 1fr); gap: 3px; }
.remix-box { height: 13px; border-radius: 3px; background: rgba(124, 92, 255, 0.35); min-width: 0; }
.remix-box.k-hero { background: rgba(124, 92, 255, 0.65); height: 22px; }
.remix-box.k-cta { background: rgba(255, 170, 80, 0.5); }
.remix-box.k-quote { background: rgba(80, 200, 170, 0.45); }
.remix-box.k-step { background: rgba(120, 170, 255, 0.45); }
.spot-panel .grill-q { background: rgba(20, 24, 35, 0.85); }
/* in-panel states: Processing… and the ✓ Done / ⚠ error result */
.spot-proc { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 1.1rem 0 0.9rem; animation: spot-state-in 180ms ease; }
.spot-proc strong { color: var(--fg); font-size: 0.95rem; }
.spot-proc .muted { font-size: 0.8rem; text-align: center; }
.spot-proc-spinner { position: relative; width: 44px; height: 44px; }
.spot-proc-spinner .dp-spinner { width: 44px; height: 44px; }
.spot-proc-spark { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1rem; animation: spot-spark 1.1s ease-in-out infinite; }
@keyframes spot-spark { 0%, 100% { transform: scale(0.85); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 1; } }
.spot-result { display: flex; flex-direction: column; gap: 0.4rem; animation: spot-state-in 180ms ease; }
.spot-result strong { color: #4ade80; font-size: 0.95rem; }
.spot-result.err strong { color: #f87171; }
.spot-done-what { color: var(--muted); font-size: 0.78rem; }
.spot-done-reply { margin: 0; color: var(--fg); font-size: 0.86rem; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
@keyframes spot-state-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.dp-spinner.sm { width: 18px; height: 18px; border-width: 2px; flex: 0 0 auto; }
.panel-section .fld.stack { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; }
.panel-section .fld.stack > span { font-size: 0.8rem; color: var(--muted); }
.panel-section .auth-input { width: 100%; box-sizing: border-box; }
.muted.xs { font-size: 0.74rem; line-height: 1.45; }
.ai-head-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.ai-head-actions .toplink { white-space: nowrap; }
.ai-pin { display: inline-flex; align-items: center; padding: 0.15rem; border-radius: 6px; }
.ai-pin svg { width: 15px; height: 15px; display: block; }
.ai-pin.on { color: var(--accent); }
.ai-pin:hover { background: rgba(255, 255, 255, 0.08); }

/* two-column form */
.preview-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1.25rem; max-width: 680px; }
.pf-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.pf-field input, .pf-field select, .pf-field textarea { width: 100%; }
.pf-field input[type=checkbox], .pf-color { width: auto; }
.preview-form > .form-error { grid-column: 1 / -1; }
.preview-form > .big-button { grid-column: 1 / -1; width: auto; justify-self: start; }
@media (max-width: 600px) { .preview-form { grid-template-columns: 1fr; } }

/* chips: wrap instead of a broken horizontal scroll */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; overflow: visible; padding: 0 0 0.25rem; }

/* ---- grill-me clarifying questions ---- */
.grill { display: flex; flex-direction: column; gap: 0.6rem; padding: 0 0 0.4rem; }
.grill-q { background: #141823; border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem 0.7rem; }
.grill-text { font-size: 0.82rem; margin-bottom: 0.45rem; color: var(--fg); }
.grill-why { font-size: 0.72rem; color: var(--muted); margin: -0.2rem 0 0.45rem; }
.grill-opts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.grill-opts .chip { background: #1b2233; border-color: #33405e; color: var(--fg); }
.grill-opts .chip:hover { border-color: var(--accent); background: #20283c; }
.grill-opts .chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.grill-opts .chip.selected:hover { background: var(--accent); }
.grill-other {
    width: 100%; margin-top: 0.45rem; padding: 0.4rem 0.55rem; font: inherit; font-size: 0.8rem;
    background: #0f131c; border: 1px solid #2a3346; border-radius: 8px; color: var(--fg);
}
.grill-other:focus { outline: none; border-color: var(--accent); }
.grill-send { align-self: flex-start; }

/* admin response feedback (judge / retry-with-note / save fix) */
.admin-fb { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.5rem 0 0.2rem; border-top: 1px dashed var(--border); }
.fb-flag {
    align-self: flex-start; background: none; border: 1px solid var(--border); color: var(--muted);
    cursor: pointer; font: inherit; font-size: 0.78rem; padding: 0.25rem 0.65rem; border-radius: 7px;
}
.fb-flag:hover { color: #ff9aa6; border-color: #6b2330; }
.fb-comment {
    background: #0f131c; border: 1px solid var(--border); border-radius: 8px; color: var(--fg);
    font: inherit; font-size: 0.85rem; padding: 0.45rem 0.55rem; resize: vertical;
}
.fb-comment:focus { outline: none; border-color: var(--accent); }
.fb-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fb-hint { font-size: 0.72rem; margin: 0; }
.fb-saved { font-size: 0.8rem; color: #8fe0b6; }
.chip-x { opacity: 0.6; }

/* ---- breadcrumbs in the generated site ---- */
.site-crumbs {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.9rem; background: #fbfaff; border-bottom: 1px solid #eee8f6;
    font-size: 0.82rem; color: #6b6385;
}
.site-crumbs .crumb { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.site-crumbs .crumb.current { color: #4a4360; cursor: default; }
.site-crumbs .crumb-sep { color: #b7b0c9; }

/* ---- new-website creation wizard (modal) ---- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(4, 6, 12, 0.6); z-index: 40; }
.modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 41;
    width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto;
    background: #141823; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.2rem 1.3rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    display: flex; flex-direction: column; gap: 1rem; color: var(--fg);
}
.modal-head h2 { color: var(--fg); }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { margin: 0; font-size: 1.15rem; }
.fld { display: flex; flex-direction: column; gap: 0.4rem; }
.fld > span { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.panel .fld { margin-bottom: 0.9rem; }
.panel .fld textarea.code-area { width: 100%; box-sizing: border-box; }
.modal input[type=text], .modal .fld input:not([type]), .modal textarea {
    background: #0f131c; border: 1px solid var(--border); border-radius: 9px;
    color: var(--fg); font: inherit; padding: 0.5rem 0.65rem; width: 100%;
}
.modal textarea { resize: vertical; }
.modal input:focus, .modal textarea:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.2rem; }
.modal .fld code { background: #0f131c; border: 1px solid var(--border); border-radius: 5px; padding: 0.05rem 0.35rem; }
.modal pre.code-area { max-height: 45vh; margin: 0; }
.big-button.danger { background: #dc2626; }
.big-button.danger:hover { background: #b91c1c; }
.big-button.ghost.danger { background: transparent; color: #f87171; border-color: #5a2a2a; }
.big-button.ghost.danger:hover { border-color: #dc2626; color: #fca5a5; }

/* layout wireframe picker */
.wf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.wf-card {
    display: flex; flex-direction: column; gap: 0.3rem; cursor: pointer; text-align: left;
    background: #0f131c; border: 1px solid var(--border); border-radius: 11px; padding: 0.6rem;
}
.wf-card:hover { border-color: #3a4a6e; }
.wf-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wf { display: flex; flex-direction: column; gap: 3px; height: 64px; }
.wf-header { height: 12px; background: var(--accent); border-radius: 3px; opacity: 0.85; }
.wf-body { flex: 1; display: flex; gap: 3px; }
.wf-side { width: 22px; background: #2a3346; border-radius: 3px; }
.wf-content { flex: 1; background: #222a3a; border-radius: 3px; }
.wf-footer { height: 7px; background: #2a3346; border-radius: 3px; }
.wf-name { font-size: 0.82rem; font-weight: 600; color: var(--fg); }
.wf-desc { font-size: 0.72rem; color: var(--muted); }

/* accent swatches + colour picker */
.swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.swatch.selected { border-color: var(--fg); box-shadow: 0 0 0 2px #141823, 0 0 0 3px var(--fg); }
.swatch-pick { width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }

/* font chips */
.font-opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.font-chip {
    background: #0f131c; border: 1px solid var(--border); border-radius: 8px;
    color: var(--fg); padding: 0.35rem 0.7rem; cursor: pointer; font-size: 0.9rem;
}
.font-chip:hover { border-color: var(--accent); }
.font-chip.selected { border-color: var(--accent); background: #1b2233; }

/* design wizard (step 2): proposal preview */
.modal.create-site.designing { width: min(680px, calc(100vw - 2rem)); }
.dp-busy { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.2rem 1rem; text-align: center; }
.dp-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: dp-spin 0.8s linear infinite; }
@keyframes dp-spin { to { transform: rotate(360deg); } }
.dp-reply { margin: 0 0 0.2rem; }
.dp { background: #fff; color: #14121d; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.dp-hero { width: 100%; height: 175px; object-fit: cover; display: block; }
.dp-headline { margin: 0.9rem 1rem 0.3rem; font-size: 1.3rem; color: #14121d; }
.dp-sub { margin: 0 1rem 0.7rem; font-size: 0.9rem; color: #4a4360; line-height: 1.5; }
.dp-meta { display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem 0.8rem; font-size: 0.76rem; color: #6b6385; flex-wrap: wrap; }
.dp-swatch { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.12); }
.dp-cta-pill { color: #fff; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.74rem; margin-left: auto; }
.dp-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 0 1rem 1rem; }
.dp-sec { display: flex; gap: 0.55rem; align-items: flex-start; background: #f8f6ff; border: 1px solid #ece8f5; border-radius: 10px; padding: 0.5rem; }
.dp-sec img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.dp-sec-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dp-sec-text strong { font-size: 0.82rem; color: #14121d; }
.dp-sec-text span { font-size: 0.74rem; color: #6b6385; line-height: 1.35; }
@media (max-width: 560px) { .dp-sections { grid-template-columns: 1fr; } }

/* ===== generated-site polish: elevation, motion & interaction state layers =====
   (Material-inspired principles applied to the built sites, without a uniform MD skin —
   each site keeps its own accent, font and personality.) */
.cj-preview .gen-card, .cj-preview .related-list,
.cj-preview .dh-card, .cj-preview .hero-card {
    transition: box-shadow var(--dur) var(--ease-standard), transform var(--dur) var(--ease-standard);
}
.cj-preview .gen-card, .cj-preview .related-list { box-shadow: var(--elev-1); }
.cj-preview .gen-card:hover, .cj-preview .dh-card:hover, .cj-preview .hero-card:hover { box-shadow: var(--elev-3); }
.cj-preview .gen-card:active, .cj-preview .hero-card:active { transform: translateY(-1px) scale(0.995); }

/* primary actions: depth + smooth press feedback */
.cj-preview .big-button, .cj-preview .gen-cta, .cj-preview .rel-add, .cj-preview .page-add {
    transition: transform var(--dur) var(--ease-standard), box-shadow var(--dur) var(--ease-standard), filter var(--dur) var(--ease-standard);
}
.cj-preview .big-button { box-shadow: var(--elev-1); }
.cj-preview .big-button:hover:not(:disabled), .cj-preview .gen-cta:hover { box-shadow: var(--elev-2); }
.cj-preview .big-button:active:not(:disabled), .cj-preview .gen-cta:active,
.cj-preview .page-add:active, .cj-preview .rel-add:active { transform: translateY(1px) scale(0.99); }

/* inputs/selects: a focus state layer in the site accent */
.cj-preview input:focus, .cj-preview select:focus, .cj-preview textarea:focus {
    outline: none; border-color: var(--site-accent, var(--accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-accent, var(--accent)) 20%, transparent);
}

/* table rows: hover state layer + smooth */
.cj-preview .records tbody tr td { transition: background var(--dur) var(--ease-standard); }
.cj-preview .records tbody tr:not(.rec-detail-row):hover td {
    background: color-mix(in srgb, var(--site-accent, var(--accent)) 6%, #fff);
}

/* nav + crumbs: smooth state transitions */
.cj-preview .navlink, .cj-preview .topnavlink, .cj-preview .crumb, .cj-preview .gen-card-link {
    transition: background var(--dur) var(--ease-standard), color var(--dur) var(--ease-standard), opacity var(--dur) var(--ease-standard);
}

/* popups in the site get the top elevation */
.cj-preview .modal { box-shadow: var(--elev-3); }

/* New-site wizard: style (accent/font) + background options. */
.wf-style { display: flex; align-items: center; gap: 12px; }
.wf-accent { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.wf-accent input[type="color"] { width: 34px; height: 34px; border: 1px solid var(--line, #d8dbe6); border-radius: 8px; background: none; padding: 2px; cursor: pointer; }
.wf-font { padding: 9px 12px; border: 1px solid var(--line, #d8dbe6); border-radius: 8px; font: inherit; background: #fff; }
.wf-bgs { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-bg { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border: 1.5px solid var(--line, #d8dbe6); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.wf-bg .wf-bg-sw { width: 20px; height: 20px; border-radius: 50%; background: var(--bgswatch); border: 1px solid rgba(0,0,0,.1); }
.wf-bg.selected { border-color: var(--brand, #6d5efc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #6d5efc) 18%, transparent); }
.wf-bg-preview { width: 100%; height: 110px; border: 1px solid var(--line, #d8dbe6); border-radius: 10px; margin-top: 10px; display: block; background: #fff; }

/* React shell editor host (Build.razor): an iframe inside Conjure chrome with a back path. */
.rehost { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: #fff; }
.rehost-bar { flex: 0 0 48px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: #0e1117; color: #e7ebf3; border-bottom: 1px solid #20262f; font: 600 14px/1 system-ui, sans-serif; }
.rehost-back { color: #cdd5e1; text-decoration: none; }
.rehost-back:hover { color: #fff; }
.rehost-title { font-weight: 700; }
.rehost-badge { font-size: 11px; background: #2b3445; color: #8aa0ff; padding: 2px 7px; border-radius: 6px; margin-left: 6px; font-weight: 600; }
.rehost-full { margin-left: auto; color: #8aa0ff; text-decoration: none; font-size: 13px; }
.rehost-frame { flex: 1 1 auto; width: 100%; border: 0; }