/* Platform dashboard styles. */

* { box-sizing: border-box; }

/* Design-options panel (Manage → Overview) */
.variation-options { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.variation-options li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.7rem; background: #0e0e10; border: 1px solid #2a2a30; border-radius: 8px; }
.variation-options .vo-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.variation-options .vo-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.variation-options .vo-actions button { cursor: pointer; padding: 0.35rem 0.8rem; border-radius: 6px; font-size: 0.85rem; }
.variation-options .vo-discard { color: #ff9a92; }
.variation-options .vo-building { color: #8a9097; font-style: italic; font-weight: 400; }
.variation-options .vo-step { font-size: 0.8rem; }
#vo-create { cursor: pointer; }

/* The `hidden` attribute must win over class display rules (.popmenu, panes, …). */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1a1a1a;
    background: #f7f7f8;
    line-height: 1.5;
}

a { color: #0066cc; }

.topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.85rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid #e5e5e7;
}
.topbar .brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.05rem; text-decoration: none; color: #111; }
.topbar .brand-logo { height: 26px; width: auto; display: block; }
.topbar nav { display: flex; align-items: center; gap: 1rem; flex: 1; }
.topbar nav a { text-decoration: none; color: #555; font-size: 0.85rem; }
.topbar nav a.active { color: #111; font-weight: 600; }

main { max-width: 1040px; margin: 0 auto; padding: 1.5rem; }

section { margin-bottom: 1.75rem; }

h1 { font-size: 1.3rem; margin: 0 0 1rem; }

/* Flash + banners */
.flash { padding: 0.7rem 0.9rem; border-radius: 8px; margin: 0 0 1rem; font-size: 0.95rem; }
.flash.success { background: #e7f6ec; color: #1c6b3a; }
.flash.error   { background: #fdeaea; color: #a12121; }
.flash.warn    { background: #fff6e0; color: #875a00; }

.muted { color: #888; }
.muted.center { text-align: center; padding: 1.25rem 0; }
.opt { color: #aaa; font-weight: 400; }

code { background: #ececef; padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; }

/* Create form */
.create-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: flex-end;
    background: #fff;
    border: 1px solid #e5e5e7;
    border-radius: 10px;
    padding: 1rem;
}
.create-form label { display: flex; flex-direction: column; font-size: 0.8rem; color: #555; gap: 0.3rem; }
.create-form input { min-width: 190px; }

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=url],
input[type=tel],
input[type=date],
input[type=search],
select {
    padding: 0.5rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 7px;
    font-size: 0.95rem;
}

button {
    padding: 0.55rem 1rem;
    background: #111;
    color: #fff;
    border: 0;
    border-radius: 7px;
    font-size: 0.9rem;
    cursor: pointer;
}
button:hover { background: #333; }
button.danger { background: #fff; color: #a12121; border: 1px solid #e3b4b4; }
button.danger:hover { background: #fdeaea; }

/* Docs */
.docs { max-width: 820px; }
.docs h1 { margin-bottom: 0.5rem; }
.docs h2 { margin: 1.8rem 0 0.6rem; font-size: 1.1rem; border-bottom: 1px solid #e5e5e7; padding-bottom: 0.3rem; }
.docs h3 { margin: 1.1rem 0 0.3rem; font-size: 0.98rem; }
.docs p, .docs li { font-size: 0.94rem; }
.docs table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; background: #fff; }
.docs th, .docs td { text-align: left; padding: 0.5rem 0.65rem; border: 1px solid #ececef; vertical-align: top; font-size: 0.88rem; }
.docs th { background: #fafafb; }
.docs pre { background: #1e1e22; color: #e6e6e6; padding: 0.9rem 1rem; border-radius: 8px; overflow: auto; font-size: 0.82rem; line-height: 1.5; }
.docs .endpoint { background: #fff; border: 1px solid #e5e5e7; border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.docs .endpoint h3 { margin-top: 0; }
.method { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.12rem 0.45rem; border-radius: 5px; background: #111; color: #fff; margin-right: 0.4rem; }

/* Template-update file lists */
ul.filelist { margin: 0.3rem 0 1rem; padding-left: 1.1rem; }
ul.filelist li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.84rem; color: #444; }
.modal-line { font-size: 0.9rem; margin: 0 0 0.4rem; }
.path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.tag { display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: #eef; color: #336; margin-left: 0.4rem; }
.tag.form { background: #eef6ee; color: #2a6b39; }

/* Sites table */
table.sites { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e5e5e7; border-radius: 10px; overflow: hidden; table-layout: fixed; }
table.sites th, table.sites td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid #f0f0f2; vertical-align: top; font-size: 0.92rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
table.sites th { background: #fafafb; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: #888; }
.th-sub { text-transform: none; letter-spacing: 0; color: #bbb; font-weight: 400; }
table.sites tr:last-child td { border-bottom: 0; }
.template-row { background: #fbfbfd; }
.site-link { color: #111; text-decoration: none; }
.site-link:hover { text-decoration: underline; }

/* Row ⋯ menu */
.col-menu { width: 120px; text-align: right; }
.menu-btn {
    background: transparent;
    color: #666;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem 0.55rem;
}
.menu-btn:hover { background: #f0f0f2; color: #111; }

/* Site option modal (native <dialog>) */
dialog.site-modal {
    width: min(440px, 92vw);
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}
dialog.site-modal::backdrop { background: rgba(0, 0, 0, 0.4); }
.site-modal > * { padding-inline: 1.25rem; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; border-bottom: 1px solid #eee; }
.modal-head h2 { margin: 0; font-size: 1.1rem; }
.modal-head .x { background: transparent; color: #999; border: 0; font-size: 1.4rem; padding: 0 0.3rem; cursor: pointer; }
.modal-head .x:hover { color: #111; }

.modal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; margin: 1rem 0; }
.modal-meta div { display: flex; flex-direction: column; gap: 0.15rem; }
.modal-meta dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #999; }
.modal-meta dd { margin: 0; font-size: 0.9rem; word-break: break-word; }

.site-modal h3 { margin: 1.1rem 0 0.5rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: #888; }
.site-modal h3.danger-head { color: #a12121; }
.modal-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin-bottom: 0.6rem; }
.modal-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; color: #555; flex: 1 1 100%; }
.modal-form input { width: 100%; }
.modal-form:last-child { padding-bottom: 1.25rem; }

/* Pills */
.pill { display: inline-block; padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.75rem; background: #eee; color: #555; text-transform: capitalize; }
.status-active { background: #e7f6ec; color: #1c6b3a; }
.status-disabled { background: #f0f0f2; color: #777; }
.status-archived { background: #ececef; color: #999; }
.ssl-active { background: #e7f6ec; color: #1c6b3a; }
.ssl-pending { background: #fff6e0; color: #875a00; }
.ssl-none { background: #f0f0f2; color: #000; }

/* Log viewer */
form.inline { display: inline-flex; gap: 0.6rem; align-items: flex-end; }
pre.log {
    background: #1e1e22;
    color: #e6e6e6;
    padding: 1rem;
    border-radius: 10px;
    overflow: auto;
    max-height: 60vh;
    font-size: 0.82rem;
    line-height: 1.45;
}

/* CMS */
.cms-pick { margin-bottom: 1rem; }
.cms-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.25rem; border-bottom: 1px solid #e5e5e7; }
.cms-tabs a { padding: 0.5rem 0.85rem; text-decoration: none; color: #666; border-bottom: 2px solid transparent; }
.cms-tabs a.active { color: #111; font-weight: 600; border-bottom-color: #111; }
.cms-guide { margin: 0 0 1.25rem; padding: 0.7rem 0.9rem; background: #f6f8fa; border: 1px solid #e5e5e7; border-radius: 7px; font-size: 0.88rem; color: #444; line-height: 1.5; }
.cms-guide code { background: #eaecef; padding: 0.05em 0.35em; border-radius: 4px; font-size: 0.92em; }
.button-link { display: inline-block; background: #111; color: #fff; padding: 0.45rem 0.85rem; border-radius: 7px; text-decoration: none; font-size: 0.8rem; }
.button-link:hover { background: #333; color: #fff; }
button.button-link { border: 0; cursor: pointer; font: inherit; font-size: .8em; }
button.button-link.ghost { background: #fff; color: #333; border: 1px solid #ccc; font-weight: 500; }
button.button-link.ghost:hover { background: #f4f4f5; }
.cms-form { background: #fff; border: 1px solid #e5e5e7; border-radius: 10px; padding: 1.25rem; max-width: 720px; }
.cms-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.cms-field > label { font-size: 0.82rem; color: #555; font-weight: 600; }
.cms-field input[type=text], .cms-field input[type=email], .cms-field input[type=url],
.cms-field input[type=number], .cms-field input[type=date], .cms-field textarea, .cms-field select { width: 100%; font: inherit; }
.cms-field textarea { resize: vertical; padding: 0.5rem 0.6rem; border: 1px solid #ccc; border-radius: 7px; }
.cms-field .check { flex-direction: row; align-items: center; gap: 0.4rem; font-weight: 400; }
.cms-field input[type=color] { width: 64px; height: 38px; padding: 2px; border: 1px solid #ccc; border-radius: 7px; cursor: pointer; background: #fff; }
.cms-actions { display: flex; align-items: center; gap: 1rem; }
.cms-actions .cancel { color: #888; text-decoration: none; }
.cms-row-actions { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; white-space: nowrap; }
.cms-row-actions form { display: inline; }
.cms-row-actions .danger { padding: 0.25rem 0.5rem; font-size: 0.78rem; }

/* CMS: "+ Content type" tab + custom-type marker */
.cms-tabs a.cms-tab-add { color: #2563eb; font-weight: 600; }
.cms-tabs a.cms-tab-add.active { border-bottom-color: #2563eb; }
.cms-tab-custom { color: #2563eb; font-weight: 700; }

/* CMS list header: New / Generate / type controls on one row */
.cms-list-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cms-list-actions .cms-list-spacer { flex: 1 1 auto; }
.cms-list-actions .cms-type-link { font-size: 0.85rem; color: #666; text-decoration: none; }
.cms-list-actions .cms-type-link:hover { color: #111; }
.cms-list-actions form.inline { display: inline; }
.cms-list-actions .cms-type-delete { background: transparent; border: 0; color: #a12121; cursor: pointer; font: inherit; font-size: 0.85rem; padding: 0; }
.cms-list-actions .cms-type-delete:hover { text-decoration: underline; }

/* --- Navigation menu builder (the 'nav' CMS type) ---------------------- */
/* Menu picker: Header / Footer cards */
.nav-menus { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; max-width: 32rem; }
.nav-menus a { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; background: #fff; border: 1px solid #e5e5e7; border-radius: 10px; text-decoration: none; color: #111; }
.nav-menus a:hover { border-color: #111; }
.nav-menus .nav-menu-name { font-weight: 600; }
.nav-menus .nav-menu-count { color: #888; font-size: 0.85rem; }
.nav-menus .nav-menu-go { margin-left: auto; color: #bbb; }
.nav-menus a:hover .nav-menu-go { color: #111; }

/* One menu: header row + drag-and-drop tree */
.nav-builder-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.nav-back { text-decoration: none; color: #666; font-size: 0.9rem; }
.nav-back:hover { color: #111; }
.nav-builder-head .button-link { margin-left: auto; }
.nav-builder-hint { font-size: 0.85rem; margin: 0 0 0.9rem; }
.nav-empty { padding: 1.5rem; background: #fff; border: 1px dashed #d5d5d7; border-radius: 10px; }

.nav-tree { display: flex; flex-direction: column; gap: 0.4rem; max-width: 40rem; }
.nav-tree--dragging { user-select: none; }
.nav-node { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; background: #fff; border: 1px solid #e5e5e7; border-radius: 9px; }
.nav-node.depth-1 { margin-left: 2.25rem; background: #fafafb; }
.nav-node.nav-grabbing { border-color: #111; box-shadow: 0 4px 14px rgba(0,0,0,0.12); opacity: 0.97; }
.nav-drag { cursor: grab; color: #bbb; font-size: 1.1rem; line-height: 1; touch-action: none; user-select: none; padding: 0 0.15rem; }
.nav-drag:active { cursor: grabbing; }
.nav-tree--dragging .nav-drag { cursor: grabbing; }
.nav-node-main { display: flex; flex-direction: column; min-width: 0; }
.nav-node-label { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-node-url { color: #999; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-node-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; white-space: nowrap; }
.nav-node-actions form { display: inline; }
.nav-node-actions .danger { padding: 0.25rem 0.5rem; font-size: 0.78rem; }

/* Custom content-type builder */
.type-fields-head { margin: 1.25rem 0 0.5rem; font-size: 0.9rem; }
.type-fields { display: flex; flex-direction: column; gap: 0.5rem; }
.type-field-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.5rem 0.6rem; background: #f6f8fa; border: 1px solid #e5e5e7; border-radius: 8px; }
.type-field-row .tf-label { flex: 2 1 180px; }
.type-field-row .tf-type { flex: 1 1 150px; }
.type-field-row .tf-options { flex: 2 1 180px; }
.type-field-row .tf-options[hidden] { display: none; }
.type-field-row .check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: #555; }
.type-field-row .tf-remove { margin-left: auto; padding: 0.15rem 0.5rem; line-height: 1; font-size: 1.1rem; }

/* CMS AI-generation modal */
.cms-gen-modal { width: min(520px, 92vw); }
.cms-gen-form { padding-block: 1rem 1.25rem; }
.cms-gen-form .cms-field { margin-bottom: 0.75rem; }

/* Manage page */
.crumb { margin: 0 0 0.5rem; font-size: 0.9rem; }
.crumb a { text-decoration: none; }
.tabs { display: flex; flex-wrap: wrap; margin: 0.75rem 0 1.5rem; border-bottom: 1px solid #e5e5e7; }
.tabs a { padding: 0.55rem 1rem; text-decoration: none; color: #666; border-bottom: 2px solid transparent; font-size: .9em; }
.tabs a.active { color: #111; font-weight: 600; border-bottom-color: #111; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.card { background: #fff; border: 1px solid #e5e5e7; border-radius: 10px; padding: 1.1rem 1.2rem; }
.card h2 { font-size: 1rem; margin: 0 0 0.8rem; }
.card.danger-card { border-color: #a12121; border-width: 2px; }
.card.danger-card h2 { color: #a12121; }
/* Theme tab: one card per section, branding on top */
.theme-look { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1.25rem; padding: 0.8rem 0.9rem; background: #f6f8fa; border: 1px solid #e5e5e7; border-radius: 10px; max-width: 760px; }
.theme-look > label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; color: #555; font-weight: 600; }
.theme-look select { font: inherit; }
.theme-look small { flex: 1 1 220px; margin-bottom: 0.35rem; }
.theme-form { display: flex; flex-direction: column; gap: 1rem; max-width: 760px; }
.theme-form .theme-actions { padding-top: 0; margin: -1rem 0 1.5rem; }
.theme-block { background: #fff; border: 1px solid #e5e5e7; border-radius: 10px; padding: 1.1rem 1.2rem; }
.theme-block-head { margin-bottom: 1rem; }
.theme-block-head h3 { font-size: 1rem; margin: 0 0 0.15rem; }
.theme-block-hint { margin: 0; font-size: 0.82rem; color: #888; line-height: 1.4; }
.theme-fields { display: grid; gap: 1rem 1.25rem; }
.theme-fields .cms-field { margin-bottom: 0; min-width: 0; }
.theme-fields--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-fields--stack { grid-template-columns: 1fr; }
.theme-fields--swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-field textarea.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; line-height: 1.5; }
@media (max-width: 600px) { .theme-fields--grid { grid-template-columns: 1fr; } .theme-fields--swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.theme-actions { position: sticky; bottom: 0; display: flex; padding: 0.9rem 0; margin-top: -0.2rem; background: linear-gradient(to bottom, rgba(247,247,248,0), #f7f7f8 45%); }
.theme-actions button { padding: 0.55rem 1.4rem; }

.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; margin: 0; }
.meta-grid div { display: flex; flex-direction: column; gap: 0.15rem; }
.meta-grid dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #999; }
.meta-grid dd { margin: 0; font-size: 0.9rem; word-break: break-word; }
.stack { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.stack label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: #555; width: 100%; }
.stack input[type=text], .stack input[type=email] { width: 100%; }

/* Two fields side by side (e.g. Email + Name); stacks on narrow screens. */
.stack .field-row { display: flex; gap: 0.6rem; width: 100%; }
.stack .field-row label { width: auto; flex: 1 1 0; }
@media (max-width: 540px) { .stack .field-row { flex-direction: column; } }

/* Checkbox rows (e.g. invite toggle, client-site list) must sit inline next to
   their text, overriding the column layout .stack gives ordinary labels. */
.stack label.check { flex-direction: row; align-items: center; gap: 0.5rem; width: auto; max-width: 100%; font-weight: 400; cursor: pointer; }
.stack label.check input[type=checkbox] { width: auto; flex: 0 0 auto; margin: 0; }
.stack fieldset { width: 100%; margin: 0; border: 1px solid #e5e5e7; border-radius: 8px; padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; }
.stack fieldset legend { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #999; padding: 0 0.3rem; }

/* Users table: same look as the sites table, but its columns differ, so it must
   NOT inherit the sites table's fixed column widths (col 2 = 20rem is for the
   sites "URL" column, not "Role"). Size to content and keep actions tight. */
table.users { table-layout: auto; }
table.users th:nth-child(1), table.users td:nth-child(1) { width: auto; }   /* User */
table.users th:nth-child(2), table.users td:nth-child(2) { width: auto; }   /* Role */
table.users td.row-actions, table.users th:last-child { width: 1%; }

/* Inline, right-aligned action buttons in a table row (Users list). Keep the
   <td> a real table cell — white-space:nowrap lets the column widen so all the
   buttons sit on one line; inline-block children stay in a row. (Putting
   display:flex on the <td> itself collapses the column and wraps each button.) */
.row-actions { white-space: nowrap; text-align: right; }
.row-actions > * { display: inline-block; vertical-align: middle; margin-left: 0.35rem; }
.row-actions form { margin: 0; }
.row-actions .button-link, .row-actions button { padding: 0.3rem 0.6rem; font-size: 0.8rem; line-height: 1.2; white-space: nowrap; }

/* Markdown editor + preview */
.md-editor { display: flex; flex-direction: column; gap: 0.4rem; }
.md-toolbar { display: flex; align-items: center; gap: 0.6rem; }
.md-toolbar .md-img { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.md-hint { font-size: 0.75rem; color: #aaa; }
.md-preview { border: 1px solid #eee; border-radius: 8px; padding: 0.4rem 0.85rem; background: #fcfcfd; min-height: 2.5rem; font-size: 0.92rem; }
.md-preview :first-child { margin-top: 0.3rem; }
.md-preview :last-child { margin-bottom: 0.3rem; }
.md-preview img { max-width: 100%; height: auto; border-radius: 6px; }
.md-preview pre { background: #1e1e22; color: #e6e6e6; padding: 0.7rem 0.9rem; border-radius: 8px; overflow: auto; font-size: 0.82rem; }
.md-preview blockquote { margin: 0.5rem 0; padding-left: 0.8rem; border-left: 3px solid #ddd; color: #666; }

/* Image field */
.img-field { display: flex; flex-direction: column; gap: 0.5rem; }
.img-preview img { max-width: 220px; max-height: 160px; border-radius: 8px; border: 1px solid #eee; display: block; }

/* Mini ⋯ modal */
.site-modal.mini { width: min(360px, 92vw); }
.modal-actions { display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem 1.25rem; }
.modal-actions .cancel { color: #888; text-decoration: none; }

/* AI editor — full-frame page with a dark v0-style toolbar */
.editor-page { display: flex; flex-direction: column; height: 100vh; }
.editor-top { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; background: #0b0b0d; color: #e6e6e6; }
.editor-page .editor-wrap { flex: 1; min-height: 0; padding: 1rem; background: #0e0e10; }
.editor-page code { background-color: rgba(255,255,255,.1); }

.top-left { display: flex; align-items: center; gap: 0.4rem; }
.top-center { flex: 1; display: flex; justify-content: center; min-width: 0; }
.top-right { display: flex; align-items: center; gap: 0.4rem; }

/* icon buttons (dark) */
.iconbtn { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #9aa0a6; border: 0; border-radius: 7px; padding: 0.34rem 0.45rem; cursor: pointer; text-decoration: none; }
.iconbtn:hover { background: #26262b; color: #fff; }
.iconbtn.active { background: #34343a; color: #fff; }
.viewtabs { display: inline-flex; gap: 0.1rem; background: #161619; border: 1px solid #2a2a30; border-radius: 9px; padding: 0.1rem; }

/* browser nav bar */
.navbar { display: flex; align-items: center; gap: 0.15rem; width: min(560px, 100%); background: #161619; border: 1px solid #2a2a30; border-radius: 9px; padding: 0.12rem 0.25rem; }
.navbtn { display: inline-flex; align-items: center; background: transparent; border: 0; color: #8a9097; padding: 0.25rem 0.3rem; border-radius: 5px; cursor: pointer; }
.navbtn:hover { background: #26262b; color: #fff; }
.urlbox { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.25rem; background: #0b0b0d; border-radius: 6px; padding: 0.18rem 0.45rem; }
.ed-env { color: #6f767d; font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; white-space: nowrap; }
.ed-path-label { color: #e6e6e6; font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urlspacer { flex: 1; }

/* page dropdown (icon trigger by the nav buttons) */
.pagemenu { min-width: 190px; }
.pagemenu-list { display: flex; flex-direction: column; max-height: 280px; overflow-y: auto; }
.pagemenu .pagemenu-item { position: relative; padding-left: 1.7rem; }
.pagemenu .pagemenu-item::before { content: ""; position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.pagemenu .pagemenu-item.is-active::before { background: #4a9eff; }
.pagemenu .pagemenu-new { color: #9ecbff; border-top: 1px solid #2a2a30; margin-top: 0.15rem; border-radius: 0 0 6px 6px; }
.pagemenu-row { display: flex; align-items: stretch; }
.pagemenu-row .pagemenu-item { flex: 1 1 auto; }
.pagemenu-edit { flex: none; background: transparent; border: 0; color: #7d838a; padding: 0 0.6rem; font-size: 0.9rem; cursor: pointer; border-radius: 6px; opacity: 0; transition: opacity 0.12s, color 0.12s; }
.pagemenu-row:hover .pagemenu-edit, .pagemenu-edit:focus-visible { opacity: 1; }
.pagemenu-edit:hover { color: #cfe0ff; background: #22262c; }
.rp-redirect { flex-direction: row !important; align-items: center; gap: 0.5rem !important; font-size: 0.8rem; color: #b9bdc2; cursor: pointer; }
.rp-redirect input[type=checkbox] { flex: none; accent-color: #0066cc; }

/* New-page modal */
.np-modal { width: min(420px, 92vw); background: #161619; border: 1px solid #2a2a30; border-radius: 12px; padding: 1.3rem 1.4rem; box-shadow: 0 18px 50px rgba(0,0,0,0.6); color: #e6e6e6; }
.np-modal::backdrop { background: rgba(0,0,0,0.55); }
.np-modal h3 { margin: 0 0 0.9rem; font-size: 1.1rem; }
.np-modal form { display: flex; flex-direction: column; gap: 0.85rem; }
.np-modal label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; color: #b9bdc2; }
.np-modal input[type=text] { width: 100%; background: #0e0e10; border: 1px solid #2a2a30; color: #e6e6e6; }
.np-modal .muted { color: #8a9097; }
.np-modal code { background: #0e0e10; color: #cfe0ff; padding: 0.05rem 0.3rem; border-radius: 4px; }
.np-modal small { font-size: 0.74rem; }
.np-preview { font-size: 0.85rem; color: #b9bdc2; margin: 0; }
.np-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.2rem; }

/* --- Generate Images modal (scope/mode option groups + instructions) ---- */
#ed-genimg-modal > * { margin-bottom: 0.85rem; }
#ed-genimg-modal > *:last-child { margin-bottom: 0; }
.genimg-group { border: 1px solid #2a2a30; border-radius: 8px; padding: 0.55rem 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; margin: 0 0 0.85rem; }
.genimg-group legend { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #8a9097; padding: 0 0.3rem; }
.genimg-opt { flex-direction: row !important; align-items: flex-start; gap: 0.5rem !important; cursor: pointer; }
.genimg-opt input[type=radio] { margin-top: 0.15rem; accent-color: #0066cc; flex: none; }
.genimg-opt > span { display: flex; flex-direction: column; gap: 0.1rem; }
.genimg-opt strong { color: #e6e6e6; font-weight: 600; font-size: 0.85rem; }
.genimg-opt small { color: #8a9097; line-height: 1.35; }
#ed-genimg-instr { width: 100%; background: #0e0e10; border: 1px solid #2a2a30; color: #e6e6e6; border-radius: 6px; padding: 0.5rem 0.55rem; font-family: inherit; font-size: 0.82rem; resize: vertical; }
#ed-genimg-count, #ed-genimg-aspect { align-self: flex-start; background: #0e0e10; border: 1px solid #2a2a30; color: #e6e6e6; border-radius: 6px; padding: 0.4rem 0.55rem; font-family: inherit; font-size: 0.82rem; }

/* --- Template-helper reference (code view) ----------------------------- */
.helpers-btn { position: absolute; right: 0.9rem; bottom: 0.9rem; z-index: 5; font-size: 0.74rem; color: #cfe0ff; background: #1d2330; border: 1px solid #2f3a4d; border-radius: 999px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: inherit; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.helpers-btn:hover { background: #253047; }
.helpers-modal { width: min(560px, 94vw); max-height: 86vh; overflow-y: auto; background: #161619; border: 1px solid #2a2a30; border-radius: 12px; padding: 1.2rem 1.35rem; box-shadow: 0 18px 50px rgba(0,0,0,0.6); color: #e6e6e6; }
.helpers-modal::backdrop { background: rgba(0,0,0,0.55); }
.helpers-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.helpers-head h3 { margin: 0; font-size: 1.1rem; }
.helpers-intro { font-size: 0.82rem; color: #b9bdc2; line-height: 1.45; margin: 0 0 0.9rem; }
.helpers-modal code { background: #0e0e10; color: #cfe0ff; padding: 0.05rem 0.32rem; border-radius: 4px; font-size: 0.82em; }
.helpers-callout { background: #1a1510; border: 1px solid #3a2f10; border-radius: 8px; padding: 0.7rem 0.85rem; margin-bottom: 1rem; }
.helpers-callout strong { display: block; color: #f0c674; font-size: 0.85rem; margin-bottom: 0.45rem; }
.helpers-callout ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.helpers-callout li { font-size: 0.8rem; color: #d7d9dd; line-height: 1.5; }
.helpers-callout .helpers-bad { color: #f0a3a3; list-style: none; margin-left: -1.1rem; }
.helpers-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.helpers-table th { text-align: left; color: #8a9097; font-weight: 600; padding: 0.3rem 0.5rem; border-bottom: 1px solid #2a2a30; }
.helpers-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid #202024; color: #cdd0d4; vertical-align: top; }
.helpers-table tr:last-child td { border-bottom: 0; }

.ed-saved { font-size: 0.74rem; color: #8a9097; white-space: nowrap; }
.ed-dirty { font-size: 0.72rem; color: #f0c674; background: #3a2f10; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; border: 0; cursor: pointer; font-family: inherit; }
.ed-dirty:hover { background: #4a3c14; }

/* --- Unpublished-changes panel ----------------------------------------- */
.changes-menu { min-width: 320px; max-width: 380px; padding: 0.6rem; gap: 0.1rem; }
.changes-menu h4 { margin: 0.1rem 0.15rem 0.25rem; font-size: 0.82rem; color: #e6e6e6; }
.changes-hint { margin: 0 0.15rem 0.5rem; font-size: 0.72rem; line-height: 1.35; }
.changes-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.change-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.35rem; border-radius: 6px; }
.change-item:hover { background: #26262b; }
.change-loading { padding: 0.4rem 0.35rem; font-size: 0.78rem; }
.change-badge { flex: none; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: 999px; font-weight: 600; }
.change-badge.added { color: #7ee2a8; background: #123122; }
.change-badge.modified { color: #f0c674; background: #3a2f10; }
.change-badge.deleted { color: #ff7b72; background: #3a1614; }
.change-path { flex: 1 1 auto; min-width: 0; font-size: 0.76rem; color: #cfd3d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; background: transparent; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.change-path:hover { color: #86b7ff; text-decoration: underline; }
.change-revert { flex: none; font-size: 0.74rem; color: #86b7ff; background: transparent; border: 0; cursor: pointer; padding: 0.15rem 0.3rem; }
.change-revert:hover { text-decoration: underline; }
.change-revert:disabled { color: #6a6f76; cursor: default; text-decoration: none; }
.changes-foot { display: flex; justify-content: flex-end; margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid #2a2a30; }
.changes-foot .danger-item { color: #ff7b72; font-size: 0.78rem; background: transparent; border: 0; border-radius: 6px; padding: 0.35rem 0.6rem; cursor: pointer; }
.changes-foot .danger-item:hover { background: #2a1a19; }
.changes-foot .danger-item:disabled { color: #6a6f76; cursor: default; background: transparent; }

/* pop menus (dark) */
.menu-wrap { position: relative; display: inline-flex; }
.popmenu { position: absolute; top: calc(100% + 6px); right: 0; background: #161619; color: #e6e6e6; border: 1px solid #2a2a30; border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,0.5); display: flex; flex-direction: column; min-width: 180px; z-index: 30; overflow: hidden; padding: 0.25rem; }
.pagedrop .popmenu { min-width: 250px; }
.popmenu button { background: transparent; color: #e6e6e6; border: 0; border-radius: 6px; text-align: left; padding: 0.5rem 0.7rem; font-size: 0.85rem; cursor: pointer; }
.popmenu button:hover { background: #26262b; }
.popmenu .danger-item { color: #ff7b72; margin-top: 0.15rem; border-top: 1px solid #2a2a30; border-radius: 0 0 6px 6px; }

/* --- ⋯ menu: icon rows + the design-variations group -------------------- */
.popmenu-lg { min-width: 250px; }
.popmenu .popitem { display: flex; align-items: center; gap: 0.6rem; width: 100%; }
.popmenu .popitem svg { flex: none; opacity: 0.82; }
.popsep { height: 1px; background: #2a2a30; margin: 0.3rem 0.15rem; }
.popgroup { padding: 0.1rem 0; }
.popgroup-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.7rem 0.3rem; font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; color: #8a9097; }
.popgroup-head svg { flex: none; opacity: 0.7; width: 14px; height: 14px; }
/* Indented so the variations + "Create a variation" clearly nest under the header
   (aligned roughly under the "DESIGN VARIATIONS" label, past its icon). Hover
   backgrounds stay full-width; only the content indents. */
.popmenu .popitem-sub { padding-left: 2rem; color: #b9bdc2; font-size: 0.82rem; }

.variation-list { display: flex; flex-direction: column; gap: 1px; margin-bottom: 0.15rem; }
.variation-row { display: flex; align-items: center; gap: 0.15rem; border-radius: 6px; padding-right: 0.25rem; }
.variation-row:hover { background: #26262b; }
/* .popmenu-scoped so these win over the generic `.popmenu button` (0,1,1) — else
   the row padding/indent is clobbered back to the default button padding. */
.popmenu .variation-pick { flex: 1 1 auto; display: flex; align-items: center; gap: 0.5rem; background: transparent; border: 0; color: #e6e6e6; text-align: left; padding: 0.42rem 0.6rem 0.42rem 2rem; font-size: 0.85rem; cursor: pointer; border-radius: 6px; min-width: 0; }
.variation-pick .vname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The name matches the other menu links (weight + color); ONLY the bullet changes
   color to mark the variation you're viewing. */
/* Bullet: reserved on every row (transparent) so labels align; blue = now viewing. */
.variation-pick::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: transparent; flex: none; }
.variation-row.is-active .variation-pick::before { background: #4a9eff; }
.variation-badge { font-size: 0.6rem; letter-spacing: 0.03em; text-transform: uppercase; color: #7ee2b8; border: 1px solid #2f5b48; border-radius: 999px; padding: 0.03rem 0.4rem; flex: none; }
/* Unpublished-work dot: same amber as the "Unpublished" badge in the toolbar, so
   the two read as one signal. Trails the name (the leading bullet already means
   "the design you're viewing") and is only rendered when there IS staged work. */
.variation-pick .vdot { width: 6px; height: 6px; border-radius: 50%; background: #ffd479; flex: none; margin-left: 0.1rem; }
.variation-row.generating .variation-pick { color: #8a9097; font-style: italic; cursor: default; }
.popmenu .variation-act { background: transparent; border: 0; color: #8a9097; cursor: pointer; padding: 0.3rem; border-radius: 5px; display: inline-flex; flex: none; }
.variation-act svg { width: 14px; height: 14px; }
.popmenu .variation-act:hover { color: #e6e6e6; background: #33333a; }
.variation-act.is-default { color: #ffd479; }
.variation-act.del:hover { color: #ff7b72; }
.variation-empty { padding: 0.3rem 0.7rem 0.4rem; font-size: 0.78rem; color: #8a9097; }

.np-sub { margin: -0.3rem 0 0.2rem; font-size: 0.8rem; color: #8a9097; line-height: 1.5; }
.np-lbl { display: inline-flex; align-items: baseline; gap: 0.35em; }
.np-opt { color: #6b7178; font-weight: 400; font-size: 0.72rem; }
.np-modal textarea { width: 100%; background: #0e0e10; border: 1px solid #2a2a30; color: #e6e6e6; border-radius: 6px; padding: 0.5rem 0.6rem; font: inherit; font-size: 0.85rem; resize: vertical; }

/* AI rewrite modal */
.rewrite-modal { width: min(480px, 92vw); }
/* Scope the flex layout to [open] so the browser's dialog:not([open]){display:none}
   still hides it on .close() — an unconditional display would keep it on screen. */
.rewrite-modal[open] { display: flex; flex-direction: column; gap: 0.85rem; }
.rewrite-modal .np-actions { justify-content: flex-start; }
.rewrite-modal .np-actions #ed-rw-cancel { margin-left: auto; }
/* Loading lock: dim + block the whole modal while a rewrite is in flight. */
.rewrite-modal.busy { cursor: progress; }
.rewrite-modal.busy label,
.rewrite-modal.busy .rw-result { opacity: 0.5; }
/* Dark spinner — it sits on the white (.ghost) Rewrite button. */
.rewrite-modal .rw-spin { display: inline-block; width: 0.85em; height: 0.85em; margin-right: 0.5em; vertical-align: -0.1em; border: 2px solid rgba(0,0,0,0.25); border-top-color: #333; border-radius: 50%; animation: qa-spin 0.7s linear infinite; }
#ed-rw-run:disabled { opacity: 0.85; cursor: progress; }
.rewrite-modal > label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; color: #b9bdc2; }
.rewrite-modal small { font-size: 0.72rem; color: #8a9097; }
.rw-result-label { font-size: 0.75rem; margin: 0 0 0.35rem; text-transform: uppercase; letter-spacing: 0.04em; }
.rw-result { background: #0e0e10; border: 1px solid #2f3a2f; border-left: 3px solid #4fae5a; border-radius: 6px; padding: 0.6rem 0.7rem; color: #e6e6e6; font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; max-height: 40vh; overflow-y: auto; }
#ed-insp-rewrite { font-size: 0.74rem; color: #c6a6ff; }

/* share panel */
.share-menu { width: 300px; padding: 0.85rem; gap: 0.55rem; }
.share-menu h4 { margin: 0 0 0.2rem; font-size: 0.9rem; }
.share-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: #b9bdc2; }
/* create row: [☑ snapshot] [hint] [☑ comments] [☑ switch designs] [Create link] */
.share-create { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; }
.share-create .share-check { align-items: flex-start; }
.share-check.is-forced { opacity: 0.55; }
/* Sits under the snapshot checkbox it explains — indented past the box to read as its caption. */
.share-hint { margin: -0.2rem 0 0.15rem 1.25rem; font-size: 0.72rem; line-height: 1.35; color: #8a9097; }
#ed-share-create { align-self: flex-start; font-size: 0.82rem; padding: 0.42rem 0.7rem; background: #2f6fed; color: #fff; border: 0; border-radius: 7px; cursor: pointer; }
#ed-share-create:hover { background: #2b63d4; }
#ed-share-create:disabled { opacity: 0.55; cursor: default; }
/* existing links */
.share-links { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; max-height: 220px; overflow-y: auto; }
.share-link { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.4rem; border-radius: 7px; }
.share-link:hover { background: #1c1c21; }
.share-link.is-off { opacity: 0.55; }
.share-link .sl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.share-link .sl-name { font-size: 0.83rem; color: #e6e6e6; }
.share-link .sl-meta { font-size: 0.72rem; }
.share-link .sl-unresolved { font-size: 0.72rem; color: #4b8bff; margin-top: 0.1rem; }
.share-link .sl-acts { display: flex; align-items: center; gap: 0.1rem; flex: none; }
.share-link .sl-act { background: transparent; border: 0; color: #8a9097; cursor: pointer; padding: 0.28rem; border-radius: 5px; display: inline-flex; font-size: 0.82rem; line-height: 1; }
.share-link .sl-act:hover { color: #e6e6e6; background: #33333a; }
.share-link .sl-act.del:hover { color: #ff7b72; }
.share-link .sl-toggle { opacity: 0.5; }
.share-link .sl-toggle.on { opacity: 1; color: #4b8bff; }

/* Save split-button (dark) */
.split { display: inline-flex; }
.split-main { background: #33333a; color: #fff; border: 0; border-radius: 7px 0 0 7px; padding: 0.4rem 0.95rem; font-weight: 600; }
.split-main:hover { background: #41414a; }
.split-toggle { background: #33333a; color: #fff; border: 0; border-left: 1px solid #4a4a53; border-radius: 0 7px 7px 0; padding: 0.4rem 0.5rem; }
.split-toggle:hover { background: #41414a; }

.editor-wrap { display: flex; gap: 1rem; }
.editor-chat { width: 360px; flex: none; min-height: 0; display: flex; flex-direction: column; gap: 0.6rem; background: #161619; border: 1px solid #2a2a30; border-radius: 10px; padding: 0.85rem; color: #e6e6e6; }

/* Drag handles for resizing the chat + file-tree sidebars. A thin strip whose
   grab area is widened with a transparent ::before so it's easy to catch. */
.ed-resizer { flex: none; width: 5px; align-self: stretch; cursor: col-resize; position: relative; border-radius: 3px; background: transparent; transition: background 0.12s; }
.ed-resizer::before { content: ''; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px; }
.ed-resizer:hover, .ed-resizer.is-dragging { background: #2f6feb; }
/* The file-tree handle sits flush against panes with no wrap gap — pull it onto
   the tree's border so it doesn't steal layout width. */
.ed-resizer-flush { width: 6px; margin: 0 -3px; z-index: 2; }
body.ed-resizing { cursor: col-resize; user-select: none; }
/* Full-window transparent shield mounted only while a resize drag is live. It keeps
   the drag's pointer events out of the preview iframe. Deliberately NOT done via
   `iframe { pointer-events: none }`: toggling pointer-events on an iframe corrupts
   Chromium's compositor-side wheel hit-testing, leaving the preview unscrollable
   after the drag until a reload. */
.ed-drag-shield { position: fixed; inset: 0; z-index: 200; cursor: col-resize; background: transparent; }
.editor-chat .muted { color: #8a9097; }

/* While a turn is in flight, lock the rest of the sidebar (the log stays readable
   and scrollable; only the interactive bits are blocked). */
.editor-chat.busy .ed-chat-head,
.editor-chat.busy .ed-selected,
.editor-chat.busy .ed-form,
.editor-chat.busy .ed-inspector { pointer-events: none; opacity: 0.5; }
.editor-chat.busy { cursor: progress; }

/* Chat header: New chat + History */
/* Wraps onto a second row rather than squeezing the chips: their labels stay on
   one line each, whatever the sidebar width. */
.ed-chat-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.4rem; }
.chip-btn { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; padding: 0.28rem 0.6rem !important; border-radius: 999px !important; white-space: nowrap; }
.chip-btn span { white-space: nowrap; }
.chip-btn svg { width: 14px; height: 14px; opacity: 0.85; }

/* History (conversations) menu */
.convo-menu { min-width: 300px; max-width: 340px; padding: 0.6rem; }
.convo-menu h4 { margin: 0.1rem 0.15rem 0.35rem; font-size: 0.82rem; color: #e6e6e6; }
.convo-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.convo-item { display: flex; align-items: center; gap: 0.25rem; border-radius: 6px; }
.convo-item:hover { background: #26262b; }
.convo-item.active { background: #1d2740; }
.convo-open { flex: 1 1 auto; min-width: 0; display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 0.1rem; background: transparent !important; padding: 0.4rem 0.5rem !important; }
.convo-title { font-size: 0.8rem; color: #e6e6e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.convo-time { font-size: 0.68rem; color: #8a9097; }
.convo-del { flex: none; color: #8a9097 !important; background: transparent !important; font-size: 1rem; line-height: 1; padding: 0.2rem 0.45rem !important; }
.convo-del:hover { color: #ff7b72 !important; }
.editor-tools { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; flex-wrap: wrap; }
.editor-tools button { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
.editor-tools button.active { background: #2f6feb; color: #fff; border-color: #2f6feb; }
.ed-hint { color: #8a9097; }
.editor-chat button {
    background-color: rgba(255,255,255,.05);
    color: rgba(255, 255, 255, .9);
    border: 1px solid #2a2a30;
}
.editor-chat button:hover { background-color: rgba(255,255,255,.075); }
.editor-chat button.linkish { background: unset; border: unset; }

/* main block: preview | code */
.editor-main { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid #2a2a30; border-radius: 10px; overflow: hidden; background: #161619; margin-bottom: 0; }
.main-body { flex: 1; min-height: 0; display: flex; }
.main-body > div { flex: 1; min-height: 0; }
.preview-pane { display: flex; }
.preview-pane iframe { flex: 1; width: 100%; border: 0; background: #fff; }
/* Mobile viewport: constrain the iframe to a phone width, centered on a dark stage. */
.preview-pane.is-mobile { justify-content: center; align-items: flex-start; overflow-y: auto; background: #0b0b0d; padding: 1.25rem 0; }
.preview-pane.is-mobile iframe { flex: none; width: 390px; max-width: 100%; height: 844px; max-height: 100%; border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); border: 1px solid #2a2a30; }
.code-pane { display: flex; background: #17171a; position: relative; }
.file-tree { width: 230px; flex: none; overflow-y: auto; border-right: 1px solid #2a2a30; padding: 0.4rem; background: #141416; }
.file-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 0.28rem 0.5rem; font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; color: #c2c6cc; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-item:hover { background: #26262b; color: #fff; }
.file-item.active { background: #1f3a5f; color: #fff; }
/* nested folders */
.ft-dir > summary { list-style: none; cursor: pointer; padding: 0.28rem 0.45rem; font-family: ui-monospace, Menlo, monospace; font-size: 0.76rem; color: #8a9097; border-radius: 6px; white-space: nowrap; }
.ft-dir > summary::-webkit-details-marker { display: none; }
.ft-dir > summary::before { content: '▸ '; color: #6f767d; }
.ft-dir[open] > summary::before { content: '▾ '; }
.ft-dir > summary:hover { background: #26262b; color: #e6e6e6; }
.ft-dir > summary.is-active { background: #1f3a5f; color: #fff; }
.ft-dir > summary.is-active::before { color: #cfe0f5; }
.ft-children { padding-left: 0.55rem; margin-left: 0.5rem; border-left: 1px solid #2a2a30; }
.ft-hint { margin: 0 0 0.4rem; padding: 0 0.35rem; font-size: 0.68rem; line-height: 1.4; color: #6f767d; }

/* right-click file-manager context menu (shares the popmenu look) */
.ctx-menu { position: fixed; background: #161619; color: #e6e6e6; border: 1px solid #2a2a30; border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,0.5); display: flex; flex-direction: column; min-width: 160px; z-index: 60; overflow: hidden; padding: 0.25rem; }
.ctx-menu button { background: transparent; color: #e6e6e6; border: 0; border-radius: 6px; text-align: left; padding: 0.5rem 0.7rem; font-size: 0.85rem; cursor: pointer; }
.ctx-menu button:hover { background: #26262b; }
.ctx-menu .danger-item { color: #ff7b72; }

/* image preview (shown in place of the code editor for image files) */
.diff-view { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; background: #17171a; }
.diff-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid #2a2a30; }
.diff-file { flex: 1 1 auto; min-width: 0; font-size: 0.8rem; color: #e6e6e6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diff-head .linkish { flex: none; font-size: 0.78rem; color: #86b7ff; background: transparent; border: 0; cursor: pointer; padding: 0.15rem 0.3rem; }
.diff-head .linkish:hover { text-decoration: underline; }
.diff-scroll { flex: 1; min-width: 0; overflow: auto; padding: 0.4rem; }
.diff-scroll .muted { padding: 0.8rem; }
.media-view { flex: 1; min-width: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: #17171a; }
.media-inner { text-align: center; max-width: 100%; }
.media-inner img { max-width: 100%; max-height: 60vh; border-radius: 8px; background: repeating-conic-gradient(#1e1e22 0% 25%, #17171a 0% 50%) 50% / 20px 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.media-name { margin: 0.8rem 0 0.3rem; font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; color: #c2c6cc; word-break: break-all; }
.media-name a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.media-name a:hover { color: #fff; }
.media-name .media-size { color: #8a8f98; white-space: nowrap; }
.media-ai-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 1rem 0; }
.media-ai-tools .btn-sm { background: #232327; color: #e6e6e6; border: 1px solid #2a2a30; border-radius: 7px; padding: 0.35rem 0.7rem; font-size: 0.82rem; cursor: pointer; }
.media-ai-tools .btn-sm:hover { background: #2c2c31; border-color: #3a3a42; }
.media-ai-tools .btn-sm:disabled { opacity: 0.5; cursor: default; }

/* Folder browser — shown in the main panel when a folder is selected in the sidebar. */
.folder-view { align-self: stretch; width: 100%; }
.folder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.folder-path { font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; color: #e6e6e6; word-break: break-all; }
.folder-meta { font-size: 0.76rem; }
.folder-empty, .folder-nomatch { text-align: center; margin: 3rem 0; }
.folder-search { display: block; width: 100%; max-width: 320px; box-sizing: border-box; margin: 0 0 1rem; background: #17171a; border: 1px solid #2a2a30; color: #e6e6e6; border-radius: 7px; padding: 0.45rem 0.6rem; font-family: inherit; font-size: 0.82rem; }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.7rem; }
.folder-entry { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; background: #1c1c20; border: 1px solid #2a2a30; border-radius: 9px; padding: 0.7rem 0.5rem; cursor: pointer; color: #c2c6cc; min-width: 0; }
.folder-entry:hover { background: #232329; border-color: #3a3a42; color: #fff; }
.folder-entry .fe-icon { color: #8a9097; display: flex; align-items: center; justify-content: center; height: 64px; }
.folder-entry:hover .fe-icon { color: #b9bdc2; }
.folder-entry .fe-thumb { width: 100%; height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px; background: repeating-conic-gradient(#1e1e22 0% 25%, #17171a 0% 50%) 50% / 16px 16px; }
.folder-entry .fe-thumb img { max-width: 100%; max-height: 100%; object-fit: cover; }
.folder-entry .fe-name { width: 100%; text-align: center; font-family: ui-monospace, Menlo, monospace; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* code editor: highlighted <pre> layer behind a transparent textarea */
.code-editor { position: relative; flex: 1; min-width: 0; overflow: hidden; background: #17171a; --gutter: 3.25rem; }
/* font-size, line-height AND padding MUST be whole pixels here, and every layer
   (line-number gutter, highlight <pre>, transparent textarea) MUST share the exact
   same font metrics. The transparent #ed-code textarea sits over the .code-highlight
   <pre>; a fractional line box (e.g. 0.82rem*1.5 = 19.68px) or fractional padding
   rounds to device pixels differently in a form control vs a block, so the two drift
   a hair per line and — deep in a file — the caret/selection land a line off. Integer
   metrics round identically everywhere, keeping all three layers locked line-for-line. */
.code-highlight, .code-find-hl, #ed-code, .code-gutter { margin: 0; border: 0; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 20px; tab-size: 2; }
/* The extra bottom padding keeps the last line clear of the horizontal scrollbar
   that appears for long (wrap="off") lines — text sitting under that scrollbar can't
   be clicked or selected. Same value on all layers so their scroll heights match. */
.code-highlight, .code-find-hl, #ed-code { padding: 12px 16px 28px; white-space: pre; word-wrap: normal; overflow-wrap: normal; }
.code-highlight { position: absolute; top: 0; right: 0; bottom: 0; left: var(--gutter); overflow: auto; pointer-events: none; color: #d4d4d4; background: #17171a; }
.code-highlight code { font: inherit; color: inherit; background: none; padding: 0; }
/* Search-match layer: sits above the syntax colors, below the transparent textarea.
   Its own text is transparent — only the <mark> backgrounds show, so found text is
   highlighted in place. Scroll is kept in lock-step in syncHighlightScroll. */
.code-find-hl { position: absolute; top: 0; right: 0; bottom: 0; left: var(--gutter); overflow: hidden; pointer-events: none; background: transparent; color: transparent; }
.code-find-hl code { font: inherit; color: transparent; background: none; padding: 0; }
.code-find-hl mark { color: transparent; background: rgba(255, 213, 74, 0.30); border-radius: 2px; }
.code-find-hl mark.current { background: rgba(255, 141, 38, 0.55); box-shadow: 0 0 0 1px rgba(255, 190, 90, 0.95); }
#ed-code { position: absolute; top: 0; right: 0; bottom: 0; left: var(--gutter); resize: none; overflow: auto; background: transparent; color: transparent; caret-color: #fff; }
/* Line-number gutter: a non-scrolling column; its inner block is translateY-ed to
   follow the textarea's vertical scroll. Shares the metrics above so number N sits on
   text line N. padding-top matches the code layers (12px) so line 1 aligns. */
.code-gutter { position: absolute; top: 0; left: 0; bottom: 0; width: var(--gutter); overflow: hidden; padding: 12px 8px 12px 0; text-align: right; color: #565b63; background: #141417; border-right: 1px solid #26262b; pointer-events: none; user-select: none; }
.code-gutter-inner { white-space: pre; }
/* Find-in-file bar: floats over the top-right of the code area (Cmd/Ctrl+F). */
.code-find { position: absolute; top: 8px; right: 18px; z-index: 6; display: flex; align-items: center; gap: 2px; background: #202024; border: 1px solid #34343c; border-radius: 7px; padding: 3px 4px 3px 9px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.code-find[hidden] { display: none; }
.code-find input { background: transparent; border: 0; outline: none; color: #e6e6e6; font-size: 0.8rem; width: 168px; font-family: inherit; }
.code-find input::placeholder { color: #6f767d; }
.code-find.no-match input { color: #ff9090; }
.code-find-count { color: #8a9099; font-size: 0.72rem; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; margin-right: 2px; }
.code-find-btn { background: transparent; border: 0; color: #b8bcc4; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 3px 6px; border-radius: 5px; }
.code-find-btn:hover { background: #34343c; color: #fff; }
#ed-code:focus { outline: none; }
#ed-code::selection { background: rgba(90, 140, 255, 0.32); }
#ed-code::placeholder { color: #6f767d; }
/* syntax tokens */
.tok-comment { color: #7d8590; font-style: italic; }
.tok-string { color: #a5d6a7; }
.tok-number { color: #f0a868; }
.tok-keyword { color: #79b8ff; }
.tok-literal { color: #d19a66; }
.tok-tag { color: #f97583; }
.tok-attr { color: #b392f0; }
.tok-var { color: #ffd580; }
.tok-php-tag { color: #56b6c2; }

.ed-selected { font-size: 0.82rem; background: #12233d; color: #cfe0ff; border-radius: 7px; padding: 0.35rem 0.55rem; }
.ed-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.55rem; padding-right: 0.2rem; }
.ed-msg { padding: 0.5rem 0.7rem; border-radius: 9px; font-size: 0.9rem; max-width: 92%; white-space: pre-wrap; word-wrap: break-word; }
.ed-user { background: #2f6feb; color: #fff; align-self: flex-end; }
.ed-assistant { background: #232327; color: #e6e6e6; align-self: flex-start; }
.ed-assistant.thinking { color: #8a9097; }
.ed-assistant.error { background: #3a1d1d; color: #ff9b93; }
.ed-assistant.muted { background: transparent; color: #8a9097; font-size: 0.82rem; padding: 0.1rem 0.2rem; }
.ed-form { display: flex; flex-direction: column; gap: 0.4rem; }
.ed-form textarea { width: 100%; resize: vertical; padding: 0.5rem 0.6rem; border: 1px solid #2a2a30; border-radius: 7px; font: inherit; background: #0e0e10; color: #e6e6e6; }
.ed-form textarea::placeholder { color: #6f767d; }

/* Chat attachments — chip tray under the composer + thumbnails/pills in a bubble. */
.ed-attachments { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ed-att-chip { display: flex; align-items: center; gap: 0.35rem; max-width: 100%; background: #1b1b1f; border: 1px solid #2a2a30; border-radius: 7px; padding: 0.2rem 0.3rem 0.2rem 0.2rem; }
.ed-att-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; flex: none; }
.ed-att-ic { color: #9aa0a6; flex: none; margin: 0 0.1rem; }
.ed-att-name { font-size: 0.75rem; color: #c2c6cc; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-att-x { background: none; border: none; color: #8a9097; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.15rem; }
.ed-att-x:hover { color: #ff9b93; }
.ed-msg-atts { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; align-items: center; }
.ed-msg-atts img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; }
.ed-msg-file { display: inline-flex; align-items: center; gap: 0.3rem; background: rgba(255, 255, 255, 0.16); padding: 0.25rem 0.5rem; border-radius: 6px; font-size: 0.78rem; }
.media-download { display: inline-block; background: #2f6feb; color: #fff; text-decoration: none; padding: 0.5rem 0.9rem; border-radius: 7px; font-size: 0.9rem; }
.media-download:hover { background: #245bd0; }

.ed-proposals { border: 1px solid #2a2a30; border-radius: 9px; padding: 0.6rem; max-height: 45%; overflow-y: auto; background: #141416; }
.prop-head { font-size: 0.85rem; margin-bottom: 0.5rem; color: #e6e6e6; }
.prop { background: #1b1b1f; border: 1px solid #2a2a30; border-radius: 7px; margin-bottom: 0.45rem; }
.prop > summary { cursor: pointer; padding: 0.4rem 0.55rem; font-size: 0.85rem; font-family: ui-monospace, Menlo, monospace; color: #e6e6e6; }
.prop-badge { display: inline-block; font-size: 0.68rem; padding: 0.05rem 0.4rem; border-radius: 5px; margin-right: 0.4rem; background: #2a2a30; color: #c2c6cc; text-transform: uppercase; }
.prop-badge.create { background: #e7f6ec; color: #1c6b3a; }
.prop-badge.update { background: #fff6e0; color: #875a00; }
.prop-badge.delete, .prop-badge.error { background: #fdeaea; color: #a12121; }
.prop-actions { display: flex; gap: 0.6rem; margin-top: 0.5rem; }

.editor-preview { flex: 1; display: flex; flex-direction: column; border: 1px solid #e5e5e7; border-radius: 10px; overflow: hidden; background: #fff; }
.preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.7rem; border-bottom: 1px solid #eee; font-size: 0.8rem; }
.preview-bar button { padding: 0.25rem 0.6rem; font-size: 0.78rem; }
.editor-preview iframe { flex: 1; width: 100%; border: 0; }

pre.diff { background: #1c1c20; border-radius: 0 0 7px 7px; margin: 0; padding: 0.6rem 0.7rem; overflow-x: auto; font-size: 0.78rem; line-height: .8; }
pre.diff span { display: block; white-space: pre-wrap; }
pre.diff .add { color: #7ee787; }
pre.diff .del { color: #ff7b72; }
pre.diff .ctx { color: #9aa0a6; }
pre.diff .gap { color: #6b7076; }
pre.diff .diff-note { color: #c9a227; }

/* Template-update tab: each changed/added file is a collapsible diff. */
.tpl-diff { margin: 0.4rem 0; border: 1px solid #e2e2e6; border-radius: 8px; overflow: hidden; }
.tpl-diff > summary { cursor: pointer; padding: 0.5rem 0.7rem; background: #f6f6f8; font-size: 0.84rem; user-select: none; }
.tpl-diff > summary code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #333; }
.tpl-diff[open] > summary { border-bottom: 1px solid #e2e2e6; }
.tpl-diff pre.diff { border-radius: 0; max-height: 60vh; overflow: auto; }
.tpl-diff .diff-binary { padding: 0.6rem 0.7rem; margin: 0; }

/* Backups tab: one row per saved full-site copy, newest first. */
.backup-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.backup-head h2 { margin: 0; }
.backup-head form { margin: 0; }
.backup-now { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.backup-now input[type="text"] { flex: 1; min-width: 220px; max-width: 380px; }
.backup-day { margin: 0.6rem 0; border: 1px solid #e2e2e6; border-radius: 8px; padding: 0 0.85rem; background: #fafafb; }
.backup-day > summary { cursor: pointer; padding: 0.6rem 0; display: flex; align-items: baseline; gap: 0.6rem; }
.backup-day .backup-list { margin-top: 0; }
.backup-day .backup-row { background: #fff; }
.backup-label { font-size: 0.85rem; color: #555; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.backup-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.6rem 0; }
.backup-row { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0.85rem; border: 1px solid #e2e2e6; border-radius: 8px; }
.backup-main { flex: 1; min-width: 0; }
.backup-title { display: flex; align-items: center; gap: 0.5rem; }
.backup-meta { margin-top: 0.2rem; font-size: 0.82rem; }
.backup-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.backup-row form { margin: 0; flex: none; }

.linkish { background: none; border: 0; color: #9ecbff; cursor: pointer; padding: 0; font-size: 0.8rem; }

/* Before/after review modal (complex AI edits: Approve / Edit) */
.ed-modal-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(10, 10, 14, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}
.ed-modal {
    width: min(760px, 100%); max-height: 85vh; display: flex; flex-direction: column;
    background: #141418; color: #e6e6e6; border: 1px solid #2a2a30;
    border-radius: 12px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.ed-modal-head { padding: 0.85rem 1rem; border-bottom: 1px solid #2a2a30; font-size: 0.95rem; }
.ed-modal-head .muted { color: #9aa0a6; }
.ed-modal-body { padding: 0.85rem 1rem; overflow-y: auto; }
.ed-modal-foot { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0.75rem 1rem; border-top: 1px solid #2a2a30; }

/* Toast: auto-applied simple edits + Undo */
.ed-toast {
    position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px);
    z-index: 70; display: flex; align-items: center; gap: 0.9rem;
    background: #1b1b1f; color: #f2f2f4; border: 1px solid #33333a;
    border-radius: 10px; padding: 0.6rem 0.9rem; font-size: 0.85rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease;
}
.ed-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ed-toast-action { background: none; border: 0; color: #9ecbff; cursor: pointer; font: inherit; font-weight: 600; padding: 0; }
@media (prefers-reduced-motion: reduce) { .ed-toast { transition: none; } }

/* Guided custom-domain publish (manage → Custom domain & SSL) */
.domain-steps { margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; font-size: 0.88rem; line-height: 1.6; color: #444; }
.domain-steps li { margin-bottom: 0.35rem; }
.domain-steps code { background: #f2f2f5; padding: 0.05rem 0.35rem; border-radius: 5px; font-size: 0.85em; }
#dom-status { margin: 0 0.35rem; }

/* Launch guide: full launch checklist shown on the overview when no domain is set */
.launch-guide { margin-top: 1.5rem; background: #fff; border: 1px solid #e5e5e7; border-radius: 10px; padding: 1.2rem 1.4rem; }
.launch-guide-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.3rem; }
.launch-guide-head h2 { font-size: 1.05rem; margin: 0; }
/* Collapsible launch/transfer guides: the head is a clickable summary. */
details.launch-guide > summary.launch-guide-head { cursor: pointer; list-style: none; margin-bottom: 0; }
details.launch-guide[open] > summary.launch-guide-head { margin-bottom: 0.6rem; }
details.launch-guide > summary::-webkit-details-marker { display: none; }
.launch-guide-toggle { margin-left: auto; font-size: 0.8rem; color: #6b7280; white-space: nowrap; }
.launch-guide-toggle::before { content: 'Show steps'; }
details.launch-guide[open] .launch-guide-toggle::before { content: 'Hide steps'; }
.launch-guide-toggle::after { content: '\25BE'; display: inline-block; margin-left: 0.3rem; transition: transform 0.15s ease; }
details.launch-guide[open] .launch-guide-toggle::after { transform: rotate(180deg); }
.launch-guide > p.muted { margin: 0 0 1rem; font-size: 0.9rem; }
.launch-steps { list-style: none; counter-reset: launch-step; margin: 0; padding: 0; }
.launch-steps > li { counter-increment: launch-step; position: relative; padding: 0 0 1.1rem 2.6rem; }
.launch-steps > li:not(:last-child) { border-left: 2px solid #ececef; margin-left: 0.85rem; padding-left: 1.75rem; }
.launch-steps > li:last-child { margin-left: 0.85rem; padding-left: 1.75rem; padding-bottom: 0.2rem; }
.launch-steps > li::before {
    content: counter(launch-step);
    position: absolute; left: -0.85rem; top: -0.15rem;
    width: 1.7rem; height: 1.7rem; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: #111; color: #fff; border-radius: 999px;
    font-size: 0.82rem; font-weight: 600;
}
.launch-steps h3 { font-size: 0.92rem; margin: 0 0 0.2rem; }
.launch-steps p { margin: 0 0 0.4rem; font-size: 0.88rem; line-height: 1.55; color: #444; }
.launch-steps code { background: #f2f2f5; padding: 0.05rem 0.35rem; border-radius: 5px; font-size: 0.85em; }
.transfer-config { margin: 0.2rem 0 0.4rem; padding-left: 1.1rem; }
.transfer-config li { font-size: 0.88rem; line-height: 1.55; color: #444; margin-bottom: 0.35rem; }
.transfer-config code { background: #f2f2f5; padding: 0.05rem 0.35rem; border-radius: 5px; font-size: 0.85em; }
.launch-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.launch-links a { font-size: 0.85rem; }
.launch-cta { margin: 0.4rem 0 0; }
.dns-records { border-collapse: collapse; margin: 0.2rem 0 0.5rem; font-size: 0.85rem; }
.dns-records th, .dns-records td { text-align: left; padding: 0.3rem 0.9rem 0.3rem 0; border-bottom: 1px solid #ececef; }
.dns-records th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: #999; font-weight: 600; }
.dns-records td:last-child, .dns-records th:last-child { color: #888; padding-right: 0; }
.path-callout { margin: 0.2rem 0 0.5rem; }
.path-callout code { display: inline-block; background: #f2f2f5; color: #333; padding: 0.35rem 0.6rem; border-radius: 6px; font-size: 0.85rem; word-break: break-all; }

/* Handoff package: the download IS the migration, so it gets its own block
   above the steps rather than reading as one more thing in the list. */
.handoff-cta { margin: 0.6rem 0 1rem; padding: 0.9rem 1rem; background: #f7f7fa; border: 1px solid #ececef; border-radius: 8px; }
.handoff-cta > p { margin: 0 0 0.5rem; }
.handoff-cta > p:last-child { margin-bottom: 0; }
.handoff-cta .muted { font-size: 0.85rem; line-height: 1.5; }
.handoff-cta code { background: #ececf1; padding: 0.05rem 0.35rem; border-radius: 5px; font-size: 0.85em; }

/* Direct-edit inspector: replaces the chat view while editing an element/theme */
.ed-form-actions { display: flex; gap: 0.4rem; }
.ed-form-actions button[type=submit] { flex: 1; }
#ed-attach-btn { font-size: 0.82rem; gap: 0.25rem; white-space: nowrap; }
#ed-edit-btn { flex: none; }

.ed-inspector { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.insp-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.insp-tabs { display: flex; gap: 0.2rem; background: #0e0e10; border: 1px solid #2a2a30; border-radius: 8px; padding: 0.15rem; }
.insp-tab { background: transparent !important; border: 0; color: #8a9097; font-size: 0.75rem; padding: 0.25rem 0.55rem; border-radius: 6px; cursor: pointer; }
.insp-tab.active { background: #2f6feb !important; color: #fff; }
.insp-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.2rem; }
.insp-target { font-size: 0.82rem; color: #cfe0ff; background: #12233d; border-radius: 7px; padding: 0.35rem 0.55rem; margin: 0 0 0.6rem; word-break: break-all; }
.insp-target code { font-size: 0.78rem; }
.insp-section { border: 1px solid #2a2a30; border-radius: 9px; padding: 0.6rem 0.65rem; margin-bottom: 0.55rem; background: #141416; }
.insp-section h4 { margin: 0 0 0.5rem; font-size: 0.82rem; color: #e6e6e6; display: flex; align-items: center; justify-content: space-between; }
.insp-label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; color: #8a9097; margin-bottom: 0.45rem; }
.insp-label:last-child { margin-bottom: 0; }
.insp-label input, .insp-label select, .insp-label textarea,
#ed-insp-text-val { width: 100%; box-sizing: border-box; min-width: 0; padding: 0.35rem 0.45rem; border: 1px solid #2a2a30; border-radius: 6px; background: #0e0e10; color: #e6e6e6; font: inherit; font-size: 0.82rem; }
.insp-label input[type=color] { padding: 0.1rem; height: 30px; cursor: pointer; }
#ed-insp-text-val { resize: none; overflow: hidden; }
.insp-h4-actions { display: inline-flex; gap: 0.7rem; }
.insp-css { width: 100%; box-sizing: border-box; min-height: 120px; resize: vertical; padding: 0.5rem 0.6rem; border: 1px solid #2a2a30; border-radius: 6px; background: #0e0e10; color: #e6e6e6; font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; line-height: 1.5; }
.insp-css::placeholder { color: #6f767d; }
.insp-hint { font-size: 0.72rem; color: #6f767d; margin: 0.45rem 0 0; line-height: 1.5; }
.insp-hint code { font-size: 0.72rem; color: #9aa0a6; }
.insp-hint .linkish { font-size: 0.72rem; }
/* Link field: site-page suggestions shown while the URL field is focused. */
.insp-href-pages { margin-top: 0.4rem; max-height: 168px; overflow-y: auto; border: 1px solid #2a2a30; border-radius: 6px; background: #0e0e10; }
.insp-href-page { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; width: 100%; box-sizing: border-box; text-align: left; padding: 0.32rem 0.5rem; border: 0; border-bottom: 1px solid #212127; background: none; color: #e6e6e6; font: inherit; font-size: 0.78rem; cursor: pointer; }
.insp-href-page:last-child { border-bottom: 0; }
.insp-href-page:hover, .insp-href-page:focus { background: #1b1b20; }
.insp-href-page .ihp-route { color: #6f767d; font-size: 0.72rem; font-family: ui-monospace, Menlo, monospace; white-space: nowrap; }

.insp-scope-label { margin-bottom: 0.55rem; }
.insp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.5rem; }
.insp-grid > .insp-label { min-width: 0; }
.insp-color-row { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.insp-color-row input[type=color] { flex: 1 1 auto; min-width: 0; }
.insp-clear { flex: none; width: 24px; height: 30px; padding: 0; line-height: 1; font-size: 0.95rem; border: 1px solid #2a2a30; border-radius: 6px; color: #8a9097; cursor: pointer; }
.insp-clear:hover { color: #ff9b93; }
.insp-label.cleared input[type=color] { opacity: 0.35; }
.insp-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.45rem 0; }
.insp-row button { font-size: 0.75rem; padding: 0.3rem 0.5rem; }
.insp-img-current img { max-width: 100%; max-height: 120px; border-radius: 6px; background: repeating-conic-gradient(#1e1e22 0% 25%, #17171a 0% 50%) 50% / 16px 16px; }
.insp-media { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem; margin: 0.4rem 0; max-height: 320px; overflow-y: auto; padding: 0.35rem; background: #0e0e10; border: 1px solid #2a2a30; border-radius: 7px; }
.insp-media-search { grid-column: 1 / -1; width: 100%; box-sizing: border-box; background: #17171a; border: 1px solid #2a2a30; color: #e6e6e6; border-radius: 6px; padding: 0.35rem 0.5rem; font-family: inherit; font-size: 0.78rem; }
.insp-media-empty { grid-column: 1 / -1; font-size: 0.8rem; margin: 0; }
.insp-thumb { padding: 0; border: 1px solid #2a2a30; border-radius: 6px; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: #17171a !important; }
.insp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.insp-thumb:hover { border-color: #2f6feb; }
.insp-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.insp-actions button { flex: 1; padding: 5px 10px; font-size: .74em; white-space: nowrap; }
#ed-insp-apply, #ed-insp-theme-form button[type=submit] { background-color: #2f6feb !important; color: #fff; border-color: #2f6feb; }
#ed-insp-apply:hover, #ed-insp-theme-form button[type=submit]:hover { background-color: #2560d6 !important; }
.insp-msg { font-size: 0.78rem; color: #8a9097; margin: 0.5rem 0 0; }
.insp-msg.error { color: #ff9b93; }
#ed-insp-theme h4 { margin: 0.7rem 0 0.4rem; font-size: 0.82rem; color: #e6e6e6; }
#ed-insp-theme h4:first-child { margin-top: 0; }

/* Login */
body.login { display: grid; place-items: center; min-height: 100vh; }
.login-card {
    background: #fff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 2rem;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.login-card h1 { text-align: center; margin: 0; }
.login-card label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: #555; }

/* --- "New site" nav button + modal --------------------------------------- */
.nav-new {
    margin-left: auto;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 7px;
}

.create-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 1rem;
    overflow-y: auto;
    z-index: 50;
}
.create-overlay[hidden] { display: none; }

.create-dialog {
    background: #fff;
    width: 100%;
    max-width: 560px;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}
.create-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eee;
}
.create-head h2 { margin: 0; font-size: 1.1rem; }
.create-close {
    background: transparent;
    color: #888;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
}
.create-close:hover { background: transparent; color: #111; }

.create-body {
    padding: 1.1rem 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.create-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: #555; }
.create-field ~ .create-field { margin-top: 10px; }
.create-field > span { font-weight: 500; }
.create-field input,
.create-field textarea,
.create-field select {
    font: inherit;
    padding: 0.55rem 0.65rem;
    border: 1px solid #ccc;
    border-radius: 7px;
    width: 100%;
    box-sizing: border-box;
}
.create-field textarea { resize: vertical; }
.create-field small.muted { font-weight: 400; color: #999; font-size: 0.78em; }

/* Structured AI-intake extras: a 2-col grid of optional fields + collapsible copy. */
.create-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.create-grid .create-field ~ .create-field { margin-top: 0; }
@media (max-width: 480px) { .create-grid { grid-template-columns: 1fr; } }
.create-more { margin-top: 10px; }
.create-more > summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: #555;
    font-weight: 500;
    padding: 2px 0;
    user-select: none;
}
.create-more[open] > summary { margin-bottom: 8px; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.create-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.create-mode {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border: 1px solid #ddd;
    border-radius: 9px;
    padding: 0.6rem 0.7rem;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.create-mode:hover { border-color: #bbb; }
.create-mode.selected { border-color: #111; background: #fafafa; }
.create-mode input { position: absolute; opacity: 0; pointer-events: none; }
.create-mode strong { font-size: 0.88rem; color: #111; }
.create-mode small { color: #888; font-size: 0.75rem; line-height: 1.25; }

.create-scan-row { display: flex; gap: 0.5rem; }
.create-scan-row input { flex: 1; }
.create-scan-row button { white-space: nowrap; }

.create-pages { border: 1px solid #eee; border-radius: 9px; padding: 0.6rem 0.75rem; }
.create-pages:has(label.create-page) { margin-top: 10px; }
.create-pages-head { margin: 0 0 0.5rem; font-size: 0.8rem; }
.create-pages-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 220px; overflow-y: auto; }
.create-page { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.85rem; }
.create-page input { margin-top: 0.2rem; }
.create-page small { color: #999; margin-left: 0.35rem; word-break: break-all; }

.create-progress { display: flex; flex-direction: column; gap: 0.5rem; }
.create-bar { height: 8px; background: #eee; border-radius: 999px; overflow: hidden; }
.create-bar-fill { height: 100%; width: 0; background: #111; border-radius: 999px; transition: width 0.3s ease; }
.create-step { margin: 0; font-size: 0.85rem; color: #555; }

.create-error { margin: 0; }

.pill.generating {
    background: #1a354d;
    color: #fff;
    animation: create-pulse 1.4s ease-in-out infinite;
}
@keyframes create-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 0.4; } }

/* Fixed URL column so the row doesn't reflow as the live status label changes. */
table.sites th:nth-child(1),
table.sites td:nth-child(1) { width: 15rem; }

table.sites th:nth-child(2),
table.sites td:nth-child(2) { width: 15rem; }

/* Generating row: a "generating" pill + the pulsing status label (single line
   + ellipsis) on the left, and a Stop button pushed to the right of the row,
   with a loading bar tracking step completion underneath. */
.job-progress {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 100%;
}
.job-progress-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}
.job-progress-pct {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: #1a354d;
    font-variant-numeric: tabular-nums;
}
.job-bar { height: 6px; background: #dbe3ec; border-radius: 999px; overflow: hidden; }
.job-bar-fill {
    height: 100%;
    width: 0;
    background: #1a354d;
    border-radius: 999px;
    transition: width 0.4s ease;
}
.job-progress-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.78rem;
    font-style: italic;
    animation: create-pulse 1.4s ease-in-out infinite;
}
.job-cancel {
    flex: 0 0 auto;
    padding: 0.1rem 0.5rem;
    border: 1px solid #e3b3ad;
    border-radius: 999px;
    background: #fdece9;
    color: #b42318;
    font-size: 0.72rem;
    cursor: pointer;
}
.job-cancel:hover:not(:disabled) { background: #b42318; border-color: #b42318; color: #fff; }
.job-cancel:disabled { opacity: 0.6; cursor: default; }

.create-notify {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.9rem;
    font-size: 0.9rem;
}
.create-notify label { display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; cursor: pointer; }
.create-notify input[type=checkbox] { margin: 0; }
.create-notify input[type=email] { flex: 1; min-width: 0; }

.create-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid #eee;
}

@media (max-width: 520px) {
    .create-modes { grid-template-columns: 1fr; }
}

/* AI QA review — full-page busy overlay. */
.qa-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(17, 17, 19, 0.72);
    backdrop-filter: blur(3px);
}
.qa-overlay-inner {
    max-width: 420px;
    text-align: center;
    color: #e6e6e6;
}
.qa-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 1.1rem;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: #fff;
    border-radius: 50%;
    animation: qa-spin 0.8s linear infinite;
}
.qa-overlay-title { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 600; }
.qa-overlay-sub { margin: 0; font-size: 0.85rem; line-height: 1.5; color: #b6b6bd; }
.qa-overlay-status { margin: 0.9rem 0 0; font-size: 0.8rem; font-weight: 600; color: #fff; min-height: 1em; }
.qa-overlay-status:empty { display: none; }
.qa-progress { width: min(320px, 72vw); height: 6px; margin: 1.1rem auto 0; background: rgba(255,255,255,0.16); border-radius: 999px; overflow: hidden; }
.qa-progress[hidden] { display: none; }
.qa-progress-bar { height: 100%; width: 3%; background: #fff; border-radius: 999px; transition: width 0.25s ease; }
.qa-pct { margin: 0.5rem 0 0; font-size: 0.76rem; font-weight: 600; color: #cfcfd6; }
.qa-pct[hidden] { display: none; }
.qa-stop { margin-top: 1.2rem; background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #e6e6e6; padding: 0.4rem 1.3rem; border-radius: 7px; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.qa-stop:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.55); color: #fff; }
.qa-stop[hidden] { display: none; }

@keyframes qa-spin { to { transform: rotate(360deg); } }

/* Reusable loading overlay for CMS AI actions (generate / SEO optimize). Mirrors
   the editor's QA overlay; toggled by cms.js while a form POST is in flight.
   Reuses .qa-spinner / .qa-overlay-title / .qa-overlay-sub for its inner content. */
.cms-loading { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(17, 17, 19, 0.72); backdrop-filter: blur(3px); }
.cms-loading[hidden] { display: none; }
.cms-loading-inner { max-width: 420px; text-align: center; color: #e6e6e6; }

/* Reusable dark, syntax-highlighted code field (Settings embeds/head/footer code,
   the SEO Schema field). cms.js upgrades a `.code[data-code-lang]` textarea into a
   highlighted <pre> layer behind a transparent textarea — same technique and token
   colors (.tok-*) as the main editor. The two layers MUST share exact metrics. */
.code-field { position: relative; border: 1px solid #2a2a30; border-radius: 7px; background: #17171a; overflow: hidden; resize: vertical; min-height: 4rem; }
.code-field.is-focus { border-color: #3a3a42; }
/* Whole-pixel font-size/line-height for the same reason as .code-highlight above:
   the textarea overlays the .code-hl <pre> and a fractional line box drifts the
   caret off the visible line. Keep these integers. */
.code-field .code-hl, .code-field > textarea { margin: 0; border: 0; box-sizing: border-box; padding: 0.6rem 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 20px; tab-size: 2; white-space: pre-wrap; word-break: normal; overflow-wrap: break-word; }
.code-field .code-hl { position: absolute; inset: 0; overflow: hidden auto; pointer-events: none; color: #d4d4d4; background: #17171a; }
.code-field .code-hl code { font: inherit; color: inherit; background: none; padding: 0; }
.code-field > textarea { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; overflow: hidden auto; background: transparent; color: transparent; caret-color: #fff; }
.code-field > textarea:focus { outline: none; }
.code-field > textarea::selection { background: rgba(90, 140, 255, 0.32); }
.code-field > textarea::placeholder { color: #6f767d; }

/* --- Preview links + comments (Manage → Comments tab) ---
   Links are minted in the editor's Share menu; this tab lists + manages them. */
.link-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.6rem; }
.link-row {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 0.8rem 1rem; padding: 0.9rem 1rem; background: #fff; border: 1px solid #e5e5e7; border-radius: 10px;
}
.link-row.is-disabled { opacity: 0.6; }
.link-row-main { min-width: 0; flex: 1 1 320px; }
.link-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.link-row-meta { font-size: 0.78rem; margin: 0.25rem 0 0.5rem; }
.link-url { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.copyfield {
    flex: 1 1 240px; min-width: 0; font-size: 0.8rem; padding: 0.3rem 0.45rem;
    border: 1px solid #d1d5db; border-radius: 6px; background: #fafafa; color: #444;
}
.link-open { font-size: 0.82rem; }
/* Daily-recap recipients — sits under the URL row and echoes its proportions. */
.link-notify { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.link-notify label { font-size: 0.78rem; color: #666; flex: none; }
.link-notify input {
    flex: 1 1 220px; min-width: 0; font-size: 0.8rem; padding: 0.3rem 0.45rem;
    border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #444;
}
.link-row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.comment-card { margin-bottom: 0.85rem; }
.comment-card.resolved { opacity: 0.7; }
.comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.comment-body { font-size: 0.9rem; line-height: 1.5; white-space: normal; word-break: break-word; }
.comment-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; align-items: center; }
.comment-card textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 0.5rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; }
.comment-attach { font-size: 0.82rem; margin: 0.5rem 0 0; }
/* Edit toggle: body + main actions hide while editing; the edit form takes over. */
.comment-card.editing .comment-body,
.comment-card.editing .comment-attach,
.comment-card.editing .comment-main-actions { display: none; }
.comment-card.editing .comment-edit { display: flex !important; }

/* Replies, nested under a comment. */
.comment-replies { margin: 0.7rem 0 0; padding-left: 0.9rem; border-left: 2px solid #e5e5e7; display: flex; flex-direction: column; gap: 0.7rem; }
.comment-reply .comment-head { margin-bottom: 0.25rem; font-size: 0.82rem; }
.comment-reply .comment-body { font-size: 0.85rem; }
/* Reply form: hidden until the card is in "replying" mode. */
.reply-form { display: none; margin-top: 0.7rem; }
.comment-card.replying .reply-form { display: flex; }

.pill.status-open { background: #fde8e6; color: #b42318; }
.pill.status-resolved { background: #e3f5e7; color: #157347; }

.comment-badge {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
    margin-left: 0.4rem; border-radius: 999px; background: #d92d20; color: #fff;
    font-size: 0.7rem; font-weight: 600; line-height: 1; text-decoration: none; vertical-align: middle;
}
.comment-badge:hover { background: #b91c1c; color: #fff; }

/* AI cost-by-month chart (per-site overview) */
.cost-chart { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.cost-bar { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cost-bar-track { width: 100%; height: 140px; display: flex; align-items: flex-end; justify-content: center; }
.cost-bar-fill { width: 60%; max-width: 34px; min-height: 2px; background: #2563eb; border-radius: 4px 4px 0 0; }
.cost-bar:hover .cost-bar-fill { background: #1d4ed8; }
.cost-bar-label { margin-top: 6px; font-size: 0.72rem; color: #6b7280; }

/* Interactive views chart (per-site overview) */
.views-card { grid-column: 1 / -1; }         /* full-width row of its own, below the summary cards */
.views-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.views-head h2 { margin: 0; }
.views-toggle { display: inline-flex; border: 1px solid #e5e5e7; border-radius: 8px; overflow: hidden; }
.views-range-btn { border: 0; background: #fff; color: #555; padding: 0.35rem 0.7rem; font-size: 0.8rem; cursor: pointer; }
.views-range-btn + .views-range-btn { border-left: 1px solid #e5e5e7; }
.views-range-btn.active { background: #111; color: #fff; }
.views-range-btn:hover { color: #fff; }
.views-summary { margin: 0.5rem 0 0.2rem; font-size: 0.82rem; }
.views-chart-wrap { position: relative; margin-top: 6px; }
.views-chart { display: block; width: 100%; height: 176px; overflow: visible; }
.views-bar { fill: #2563eb; transition: fill 0.1s ease; }
.views-bar.is-hover { fill: #1d4ed8; }
.views-bar.is-drill { fill: #60a5fa; }
.views-bar.is-drill.is-hover { fill: #2563eb; }
.views-axis { stroke: #e5e5e7; stroke-width: 1; }
.views-tick { fill: #9ca3af; font-size: 10px; }
.views-tooltip {
    position: absolute; transform: translate(-50%, -100%);
    background: #111; color: #fff; padding: 0.3rem 0.5rem; border-radius: 6px;
    font-size: 0.75rem; white-space: nowrap; pointer-events: none; z-index: 5;
}
.views-back { margin: 0.5rem 0 0; }

/* --- Hosted forms: submissions list + field-builder rows ------------------ */
.subs-recent { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.subs-recent li a { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.35rem 0.4rem; border-radius: 6px; text-decoration: none; color: inherit; }
.subs-recent li a:hover { background: #f4f4f5; }
.subs-recent .subs-form { font-weight: 600; flex: 0 0 auto; }
.subs-recent .subs-sum { color: #555; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subs-recent .subs-when { flex: 0 0 auto; font-size: 0.8rem; }
.subs-recent li.is-unread .subs-form::before { content: "●"; color: #b42318; font-size: 0.7em; margin-right: 0.3rem; vertical-align: middle; }
tr.is-unread td { font-weight: 600; }
/* The form field-builder row carries an extra placeholder input over the type builder. */
/* --- Forms builder: full width, tabs, field cards ------------------------- */
.forms-builder { max-width: none; }
/* Tabs — scoped selector so the underline style beats the global dark button rule. */
.builder-tabs { display: flex; gap: 0.15rem; border-bottom: 1px solid #e5e5e7; margin-bottom: 1.25rem; }
.builder-tabs .builder-tab {
    border: 0; background: transparent; box-shadow: none; border-radius: 0;
    padding: 0.55rem 0.95rem; font: inherit; font-weight: 600; color: #6b7280;
    cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.builder-tabs .builder-tab:hover { background: transparent; color: #111; }
.builder-tabs .builder-tab.is-active { background: transparent; color: #111; border-bottom-color: #111; }
.builder-panel[hidden] { display: none; }

/* Field list: a 2-column grid so half-width fields pair up (mirrors the live form). */
.ff-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; align-items: start; margin-bottom: 1rem; }
.ff-card { grid-column: 1 / -1; }
.ff-card.is-half { grid-column: span 1; }
@media (max-width: 720px) { .ff-card.is-half { grid-column: 1 / -1; } }

/* Each card previews the real field with a drag handle + edit/remove buttons. */
.ff-card { position: relative; display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.85rem 0.9rem; background: #fff; border: 1px solid #e5e5e7; border-radius: 10px; }
.ff-card .ff-drag { cursor: grab; color: #b0b4ba; font-size: 1.15rem; line-height: 1.6; user-select: none; }
.ff-card .ff-drag:active { cursor: grabbing; }
.ff-card.is-dragging { opacity: 0.4; }
.ff-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ff-preview { display: flex; flex-direction: column; gap: 0.3rem; }
.ff-prev-label { font-size: 0.85rem; font-weight: 600; color: #333; }
.ff-prev-label .req, .ff-prev-check .req { color: #b42318; }
.ff-prev-control { width: 100%; font: inherit; padding: 0.5rem 0.6rem; border: 1px solid #d7d9dd; border-radius: 7px; background: #fafafa; color: #555; pointer-events: none; }
textarea.ff-prev-control { resize: none; }
.ff-prev-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: #333; }
.ff-meta { font-size: 0.72rem; color: #9aa0a6; }
.ff-card-actions { display: flex; gap: 0.15rem; flex: 0 0 auto; }
.ff-card-actions button { border: 0; background: transparent; box-shadow: none; color: #6b7280; cursor: pointer; border-radius: 6px; padding: 0.2rem 0.45rem; font-size: 1rem; line-height: 1; }
.ff-card-actions button:hover { background: #f1f2f4; color: #111; }
.ff-card-actions .ff-remove:hover { color: #b42318; }

/* Drop indicators while dragging a card over another. */
.ff-card.drop-left  { box-shadow: inset 3px 0 0 #2f6feb; }
.ff-card.drop-right { box-shadow: inset -3px 0 0 #2f6feb; }
.ff-card.drop-above { box-shadow: inset 0 3px 0 #2f6feb; }
.ff-card.drop-below { box-shadow: inset 0 -3px 0 #2f6feb; }

/* Actions row: Add field on the left, Save/Cancel on the right. */
.forms-actions { display: flex; align-items: center; gap: 0.6rem; }
.forms-actions .forms-actions-gap { flex: 1 1 auto; }

/* Field-edit modal. */
.ff-modal { max-width: 460px; width: calc(100% - 2rem); }
.ff-modal-body { padding: 0.25rem 0; }

/* --- Overview analytics cards (D1) ---------------------------------------- */
.analytics-big { font-size: 0.95rem; color: #555; margin: 0.3rem 0 0.6rem; }
.analytics-big strong { font-size: 1.6rem; color: #111; margin-right: 0.25rem; }
.analytics-devices { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.85rem; color: #555; }
.analytics-devices .adev b { color: #111; }
.analytics-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.analytics-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0.1rem; border-bottom: 1px solid #f0f0f1; font-size: 0.88rem; }
.analytics-list li:last-child { border-bottom: 0; }
.analytics-list .al-label { color: #444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-list .al-val { color: #111; font-weight: 600; flex: 0 0 auto; }

/* --- Analytics panel (?tab=analytics) ------------------------------------ */
.an-panel { display: flex; flex-direction: column; gap: 1rem; }
.an-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.an-head h2 { margin: 0; font-size: 1.25rem; }
.an-range { display: flex; gap: 0.3rem; }
.an-range a { padding: 0.3rem 0.75rem; border: 1px solid #e5e5e7; border-radius: 999px; text-decoration: none; color: #666; font-size: 0.82rem; background: #fff; }
.an-range a.active { background: #111; color: #fff; border-color: #111; }
.an-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.an-stat { background: #fff; border: 1px solid #e5e5e7; border-radius: 10px; padding: 0.9rem 1.1rem; }
.an-stat-n { display: block; font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; color: #111; font-variant-numeric: tabular-nums; }
.an-stat-l { display: block; font-size: 0.8rem; color: #666; margin-top: 0.15rem; }
.an-card { background: #fff; border: 1px solid #e5e5e7; border-radius: 10px; padding: 1.1rem 1.2rem; }
.an-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.8rem; }
.an-card-head h3 { margin: 0; font-size: 0.95rem; }
.an-trend .an-chart { width: 100%; height: 150px; display: block; }
.an-area { fill: rgba(37, 99, 235, 0.10); }
.an-line { stroke: #2563eb; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.an-chart-empty { padding: 2.5rem 0; text-align: center; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.an-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.an-bars li { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.55rem; border-radius: 6px; overflow: hidden; }
.an-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(37, 99, 235, 0.10); border-radius: 6px; z-index: 0; }
.an-bar-label { position: relative; z-index: 1; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.86rem; }
.an-bar-val { position: relative; z-index: 1; font-variant-numeric: tabular-nums; font-size: 0.84rem; color: #444; font-weight: 600; }
.an-empty { padding: 0.6rem 0; }
.an-vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.7rem; }
.an-vital { border: 1px solid #e5e5e7; border-radius: 9px; padding: 0.7rem 0.8rem; }
.an-vital-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.an-vital-abbr { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; color: #555; }
.an-vital-badge { font-size: 0.66rem; font-weight: 700; padding: 0.08rem 0.4rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em; }
.an-vital-val { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.3rem 0 0.4rem; color: #111; font-variant-numeric: tabular-nums; }
.an-vital-meter { height: 5px; background: #eee; border-radius: 999px; overflow: hidden; }
.an-vital-meter span { display: block; height: 100%; border-radius: 999px; }
.an-vital-sub { font-size: 0.72rem; margin-top: 0.35rem; }
.an-good .an-vital-badge { background: #e6f4ea; color: #137333; }
.an-good .an-vital-meter span { background: #34a853; }
.an-ni .an-vital-badge { background: #fef7e0; color: #b06000; }
.an-ni .an-vital-meter span { background: #f9ab00; }
.an-poor .an-vital-badge { background: #fce8e6; color: #c5221f; }
.an-poor .an-vital-meter span { background: #ea4335; }
.an-note { font-size: 0.75rem; margin: 0.9rem 0 0; }
.an-blank { text-align: center; padding: 2.5rem 1.2rem; }
.an-blank h3 { margin: 0 0 0.4rem; }

/* --- Interactive analytics charts (analytics.js) ------------------------- */
.an-chart-mount { position: relative; min-height: 210px; }
.an-trend-svg { width: 100%; height: 210px; display: block; overflow: visible; }
.an-grid-line { stroke: #eef0f3; stroke-width: 1; }
.an-area { fill: url(#an-grad); }
.an-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.an-line-views { stroke: #2563eb; }
.an-line-uniques { stroke: #93c5fd; stroke-width: 2; stroke-dasharray: 1 4; stroke-linecap: round; }
.an-guide { stroke: #c7ccd3; stroke-width: 1; stroke-dasharray: 3 3; }
.an-dot { stroke: #fff; stroke-width: 2; }
.an-dot-views { fill: #2563eb; }
.an-dot-uniques { fill: #93c5fd; }
.an-xaxis { display: flex; justify-content: space-between; margin-top: 0.35rem; font-size: 0.7rem; color: #8a8f98; }
.an-legend-inline { display: flex; gap: 0.85rem; font-size: 0.75rem; color: #666; }
.an-lg { display: inline-flex; align-items: center; gap: 0.35rem; }
.an-lg::before { content: ""; width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.an-lg-views::before { background: #2563eb; }
.an-lg-uniques::before { background: #93c5fd; }

.an-tip { position: fixed; z-index: 9999; pointer-events: none; background: #14161a; color: #fff; padding: 0.5rem 0.65rem; border-radius: 8px; font-size: 0.78rem; line-height: 1.35; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); transition: opacity 0.12s ease; max-width: 240px; }
.an-tip-t { font-weight: 600; margin-bottom: 0.2rem; white-space: nowrap; }
.an-tip-r { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; color: #cfd3da; }
.an-tip-r b { color: #fff; margin-left: auto; font-variant-numeric: tabular-nums; padding-left: 0.6rem; }
.an-tip-sw { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.an-donut-wrap { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.an-donut-box { position: relative; width: 128px; height: 128px; flex: 0 0 auto; }
.an-donut { width: 128px; height: 128px; display: block; }
.an-donut-track { stroke: #eef0f3; }
.an-arc { transition: stroke-width 0.15s ease, opacity 0.15s ease; cursor: default; }
.an-arc.is-hi { stroke-width: 20; }
.an-donut:hover .an-arc:not(.is-hi) { opacity: 0.4; }
.an-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.an-donut-center b { font-size: 1.3rem; font-weight: 700; color: #111; line-height: 1; font-variant-numeric: tabular-nums; }
.an-donut-center span { font-size: 0.64rem; color: #8a8f98; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.15rem; }
.an-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 0.35rem; }
.an-legend li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; cursor: default; }
.an-legend-sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.an-legend-l { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-legend-v { color: #666; font-variant-numeric: tabular-nums; font-size: 0.78rem; }

.an-bar-fill { transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.an-bars li { cursor: default; transition: background 0.12s ease; }
.an-bars li:hover { background: #f6f8fa; }
.an-bars li:hover .an-bar-fill { background: rgba(37, 99, 235, 0.16); }

/* --- Analytics info explainers ------------------------------------------- */
.an-intro { font-size: 0.8rem; margin: -0.35rem 0 0.15rem; }
.an-info-inline { color: #b4b8bf; }
.an-info { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.18rem; color: #b4b8bf; cursor: help; }
.an-info:hover, .an-info:focus, .an-info:focus-visible { color: #6b7280; outline: none; }
.an-info-i { width: 13px; height: 13px; display: block; }
.an-info-pop { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px); width: max-content; max-width: 228px; background: #14161a; color: #fff; font-size: 0.74rem; font-weight: 400; line-height: 1.45; text-transform: none; letter-spacing: normal; text-align: left; white-space: normal; padding: 0.5rem 0.62rem; border-radius: 7px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.24); opacity: 0; visibility: hidden; transition: opacity 0.13s ease, transform 0.13s ease; z-index: 60; pointer-events: none; }
.an-info-pop::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #14161a; }
.an-info:hover .an-info-pop, .an-info:focus .an-info-pop, .an-info:focus-visible .an-info-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* --- Add-a-section picker (editor) --------------------------------------- *
 * A visual catalog of the pattern library. Each card holds a real 1280px-wide
 * render of the composition inside the SITE's own head, scaled down with a
 * transform — so the thumbnail is the section, themed, not an illustration. */
.addsection-btn { background: #161619 !important; border: 1px solid #2a2a30 !important; color: #cfd3d7 !important; }
.addsection-btn:hover { background: #26262b !important; color: #fff !important; }

/* The DIALOG scrolls, not the grid inside it. A scrolling inner flex child holding
   the scaled previews renders them unclipped in Chrome (they painted over their own
   labels and the cards below); scrolling at the dialog level renders correctly, and
   a sticky head keeps the search + filters in view. */
/* Fixed size, whatever the filter shows: a picker that resizes as you type reads
   as the page jumping around under you. */
.sec-modal { width: min(1180px, 94vw); height: min(88vh, 860px); padding: 0; border: 1px solid #2a2a30; border-radius: 14px; background: #161619; color: #e6e6e6; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); overflow-y: auto; overscroll-behavior: contain; }
.sec-modal::backdrop { background: rgba(0, 0, 0, 0.6); }
/* Exactly three rows — head · grid · footer (the error line lives inside the head,
   so the row count never shifts). The grid row takes the slack, which keeps the
   footer on the bottom edge even when a filter leaves two results. */
.sec-modal[open] { display: grid; grid-template-rows: auto 1fr auto; }

.sec-head { position: sticky; top: 0; z-index: 3; padding: 1rem 1.2rem 0.6rem; border-bottom: 1px solid #2a2a30; background: #161619; }
.sec-head-top { display: flex; align-items: center; justify-content: space-between; }
.sec-head-top h3 { margin: 0; font-size: 1.05rem; }
.sec-head-top .x { background: transparent; border: 0; color: #8a9097; font-size: 1.5rem; line-height: 1; padding: 0 0.2rem; cursor: pointer; }
.sec-head-top .x:hover { color: #fff; }
.sec-controls { display: flex; align-items: flex-end; gap: 0.6rem; margin: 0.7rem 0 0.55rem; flex-wrap: wrap; }
.sec-controls label { display: flex; flex-direction: column; gap: 0.22rem; font-size: 0.72rem; color: #8a9097; }
.sec-where select { min-width: 230px; }
.sec-search { flex: 1 1 260px; }
.sec-search input { width: 100%; }
.sec-modal select, .sec-modal input[type="search"] { background: #0e0e10; color: #e6e6e6; border: 1px solid #2a2a30; border-radius: 8px; padding: 0.4rem 0.55rem; font-size: 0.86rem; }
.sec-modal input[type="search"]::placeholder { color: #6f767d; }

.sec-kinds { display: flex; flex-wrap: wrap; gap: 0.3rem; padding-bottom: 0.6rem; }
.sec-kind { background: #0e0e10; border: 1px solid #2a2a30; color: #9aa0a6; font-size: 0.74rem; padding: 0.22rem 0.6rem; border-radius: 999px; cursor: pointer; }
.sec-kind:hover { color: #fff; border-color: #3a3a42; }
.sec-kind.active { background: #2563eb; border-color: #2563eb; color: #fff; }

.sec-modal .flash.error { margin: 0.5rem 0 0.2rem; }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0.9rem; padding: 1rem 1.2rem; align-content: start; align-items: start; }
.sec-loading { grid-column: 1 / -1; text-align: center; padding: 2rem 0; color: #8a9097; }

.sec-card { display: flex; flex-direction: column; gap: 0; padding: 0; background: #0e0e10; border: 1px solid #2a2a30; border-radius: 10px; overflow: hidden; cursor: pointer; text-align: left; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.sec-card:hover { border-color: #3d6ae0; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); }
.sec-card.is-adding { opacity: 0.55; pointer-events: none; }
/* Every thumb is the SAME height: the grid then never re-flows after a preview
   loads (rows sized before the frames settled left cards overlapping their
   neighbours). A section taller than the box is fitted by zooming its document
   out, not by growing the card. */
.sec-thumb { display: block; position: relative; width: 100%; height: 190px; overflow: hidden; background: #fff; }
/* The preview itself: a shadow root holding the site's own CSS, scaled with a
   transform. (An <iframe> per card was the obvious approach and does not work —
   composited iframes inside the scrolling grid paint outside it, straight over the
   card label and the neighbouring cards.) */
.sec-stage { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Soft bottom edge on a preview that had to be cropped — signals "there's more". */
.sec-thumb.is-cropped::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.9)); pointer-events: none; }
.sec-meta { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; padding: 0.55rem 0.7rem 0.65rem; border-top: 1px solid #2a2a30; }
.sec-card-title { font-size: 0.84rem; color: #e6e6e6; flex: 1 1 auto; }
.sec-card-kind { font-size: 0.68rem; color: #8a9097; text-transform: uppercase; letter-spacing: 0.04em; }
.sec-card-badge { font-size: 0.62rem; color: #9fc0ff; background: rgba(37, 99, 235, 0.18); border: 1px solid rgba(61, 106, 224, 0.5); padding: 0.1rem 0.38rem; border-radius: 999px; }

.sec-foot { position: sticky; bottom: 0; margin: 0; padding: 0.65rem 1.2rem 0.9rem; border-top: 1px solid #2a2a30; background: #161619; font-size: 0.76rem; color: #8a9097; }

/* --- Sections outline (reorder this page) -------------------------------- */
.sections-pane { gap: 0.4rem; }
.secpane-title { font-size: 0.8rem; color: #8a9097; }
.secpane-list { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; flex: 1; min-height: 0; }
.secpane-list.is-busy { opacity: 0.55; pointer-events: none; }
.secpane-item { display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.45rem; background: #0e0e10; border: 1px solid #2a2a30; border-radius: 8px; cursor: grab; }
.secpane-item:hover { border-color: #3a3a42; }
.secpane-item.is-dragging { opacity: 0.45; }
.secpane-item.is-over { border-color: #2a2a30; box-shadow: inset 0 3px 0 -1px #3d6ae0; }
.secpane-grip { color: #5a6068; font-size: 0.9rem; line-height: 1; cursor: grab; }
.secpane-num { min-width: 1.1rem; text-align: center; font-size: 0.68rem; color: #8a9097; font-variant-numeric: tabular-nums; }
.secpane-name { flex: 1 1 auto; min-width: 0; text-align: left; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; color: #e6e6e6 !important; font-size: 0.82rem; font-weight: 400; padding: 0.1rem 0.2rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.secpane-name:hover { color: #fff !important; text-decoration: underline; }
.secpane-move, .secpane-del { flex: none; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #8a9097 !important; font-size: 0.85rem; line-height: 1; padding: 0.15rem 0.3rem !important; cursor: pointer; border-radius: 5px !important; }
.secpane-move:hover, .secpane-del:hover { background: #26262b !important; color: #fff !important; }
.secpane-move:disabled { opacity: 0.3; cursor: default; }
.secpane-del:hover { color: #ff8080 !important; }
.secpane-foot { padding-top: 0.4rem; border-top: 1px solid #2a2a30; }
.secpane-foot .ghost { width: 100%; }