/* Hexwork: near-black with a warm undertone, blood red for actions, brimstone only where it costs or ships. */
:root {
  color-scheme: dark;
  --blueprint: #FF4D6A;
  --blueprint-deep: #FF8197;
  --blood: #C8102E;
  --blood-deep: #9F1239;
  --ink: #F4EEF0;
  --graphite: #A99CA3;
  --paper: #09070A;
  --white: #131013;
  --raised: #1B161A;
  --rule: #2C2328;
  --rule-strong: #43363D;
  --tint: rgba(255, 77, 106, 0.12);
  --pencil: #FFB224;
  --pencil-deep: #E89A0C;
  --on-pencil: #1A0B00;
  --fault: #FF6B6B;
  --ok: #4ADE80;
  --display: "Syne", "Arial Black", sans-serif;
  --body: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--blueprint);
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1rem/1.55 var(--body); color: var(--ink); background: var(--paper); }
img, svg { max-width: 100%; }
a { color: var(--blueprint); text-underline-offset: 2px; }
a:hover { color: var(--blueprint-deep); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.05; letter-spacing: 0.005em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--white); padding: 8px 12px; z-index: 10; }
.skip:focus { top: 8px; }
.muted { color: var(--graphite); }
.small { font-size: 0.85rem; }
.fine { font-size: 0.9rem; color: var(--graphite); }
.lede { font-size: 1.15rem; max-width: 60ch; }
.inline { display: inline; }

/* Buttons */
[hidden] { display: none !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--blueprint); border-radius: 3px; background: var(--white); color: var(--blueprint); font: 600 1rem/1.2 var(--body); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--tint); color: var(--blueprint-deep); }
.btn-primary { background: var(--blood); border-color: var(--blood); color: #fff; }
.btn-primary:hover { background: var(--blood-deep); color: #fff; }
.btn-quiet { border-color: var(--rule); color: var(--ink); }
.btn-small { min-height: 36px; padding: 6px 12px; font-size: 0.92rem; }
.btn-publish { background: var(--pencil); border-color: var(--pencil-deep); color: var(--on-pencil); }
.btn-publish:hover { background: var(--pencil-deep); color: var(--on-pencil); }
.btn-danger { border-color: var(--fault); color: var(--fault); }
.btn-stop { border-color: var(--fault); color: var(--fault); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--blueprint); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link.danger { color: var(--fault); }

/* Forms */
label { display: block; font-weight: 600; margin: 14px 0 6px; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
input, select, textarea { width: 100%; font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--rule-strong); border-radius: 3px; padding: 10px 12px; min-height: 44px; }
input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; }
textarea { resize: vertical; }
input[aria-invalid="true"] { border-color: var(--fault); }
.hint { font-size: 0.88rem; color: var(--graphite); margin: 4px 0 0; }
.field-err { color: var(--fault); font-size: 0.92rem; margin: 6px 0 0; }
form .btn { margin-top: 16px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 16px; }
.inline-form > div { flex: 1 1 200px; }
.inline-form label { margin-top: 0; }
.inline-form .btn { margin-top: 0; }
.addon-input { display: flex; align-items: stretch; }
.addon-input input { border-radius: 3px 0 0 3px; }
.addon-input span { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--rule-strong); border-left: 0; border-radius: 0 3px 3px 0; background: var(--paper); font-size: 0.9rem; white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }

/* Messages */
.flash { padding: 12px 14px; border-left: 4px solid var(--blueprint); background: var(--white); margin: 16px 0; }
.flash-error { border-color: var(--fault); }
.flash-ok { border-color: var(--ok); }
.notice { padding: 12px 14px; border: 1px solid var(--pencil-deep); background: rgba(255, 178, 36, 0.08); margin: 0 0 16px; }

/* Top bar */
.topbar { background: var(--white); border-bottom: 1px solid var(--rule); }
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.topbar nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topbar nav a { color: var(--ink); text-decoration: none; font-weight: 600; }
.topbar nav a[aria-current="page"] { color: var(--blueprint); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.topbar nav .btn { background: var(--blood); border-color: var(--blood); color: #fff; }
.topbar nav .btn:hover { background: var(--blood-deep); color: #fff; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 1.9rem; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; line-height: 1; }
.wordmark.small { font-size: 1.5rem; }
.wordmark-sub { font-family: var(--body); font-size: 0.85rem; font-weight: 600; color: var(--graphite); }
.credit-pill { display: inline-block; padding: 4px 10px; border: 1px solid var(--pencil-deep); background: rgba(255, 178, 36, 0.1); border-radius: 3px; font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.viewing { display: flex; gap: 12px; justify-content: center; align-items: center; padding: 6px 16px; background: var(--pencil); color: var(--on-pencil); font-weight: 600; }

/* Public pages */
.hero { background: var(--white); border-bottom: 1px solid var(--rule); padding: 48px 0 56px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.hero-copy h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 12px; }
.blueprint { margin: 0; background: var(--white); color: var(--ink); border-radius: 4px; padding: 18px; }
.blueprint figcaption { font-size: 0.88rem; color: var(--graphite); margin-top: 10px; }
.bp-prompt { display: flex; gap: 10px; align-items: baseline; font-size: 0.95rem; padding: 10px 12px; border: 1px dashed var(--rule-strong); margin-bottom: 14px; min-height: 3.4em; }
.bp-label { font-weight: 700; color: var(--pencil); }
.bp-drawing { display: block; width: 100%; height: auto; }
.bp-grid line { stroke: #21181C; stroke-width: 0.5; }
.bp-lines rect, .bp-lines line { fill: none; stroke: var(--blueprint); stroke-width: 1.5; }
.bp-fill rect { fill: var(--blueprint); }
.bp-fill .field { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.bp-fill .go { fill: var(--pencil); }
/* The one orchestrated moment: the prompt types, the page is drawn, then filled. */
@media (prefers-reduced-motion: no-preference) {
  .bp-typed { display: inline-block; clip-path: inset(0 100% 0 0); animation: type 1.8s steps(40, end) 0.2s forwards; }
  .bp-lines > * { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 0.9s ease-out forwards; }
  .bp-lines .d1 { animation-delay: 2.0s; } .bp-lines .d2 { animation-delay: 2.3s; } .bp-lines .d3 { animation-delay: 2.6s; } .bp-lines .d4 { animation-delay: 2.8s; }
  .bp-fill > * { opacity: 0; animation: fill 0.5s ease-out forwards; }
  .bp-fill .f1 { animation-delay: 3.3s; } .bp-fill .f2 { animation-delay: 3.5s; } .bp-fill .f3 { animation-delay: 3.7s; } .bp-fill .f4 { animation-delay: 3.9s; }
}
@keyframes type { to { clip-path: inset(0 0 0 0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fill { to { opacity: 1; } }

.band { padding: 56px 16px 8px; }
.narrowish { max-width: 880px; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.steps li { counter-increment: step; padding: 18px 24px 8px 0; border-right: 1px solid var(--rule); margin-right: 24px; }
.steps li:last-child { border-right: 0; }
.steps li::before { content: counter(step); display: block; font-family: var(--display); font-weight: 800; font-size: 2.6rem; color: var(--blueprint); line-height: 1; margin-bottom: 8px; }
.steps p { max-width: 36ch; }

table { border-collapse: collapse; width: 100%; }
.table-scroll { width: 100%; overflow-x: auto; }
.plans { background: var(--white); border-top: 2px solid var(--ink); }
.plans caption { text-align: left; caption-side: bottom; padding-top: 10px; color: var(--graphite); font-size: 0.92rem; }
.plans th, .plans td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.plans thead th { font-size: 0.85rem; color: var(--graphite); font-weight: 600; }
.plans tbody th { font-family: var(--display); font-size: 1.4rem; font-weight: 800; }
.plans .per { color: var(--graphite); font-size: 0.85rem; }
.plan-top { background: rgba(255, 77, 106, 0.06); }

.foot { border-top: 1px solid var(--rule); margin-top: 64px; padding: 24px 0; background: var(--white); font-size: 0.92rem; color: var(--graphite); }
.foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-row p { margin: 0; }
.foot-row a { margin-left: 16px; }

.sheet { background: var(--white); border: 1px solid var(--rule); border-radius: 3px; padding: 24px; margin: 0 0 20px; }
.sheet.narrow { max-width: 460px; margin: 40px auto; }
.sheet.narrowish { max-width: 720px; }
.public .sheet.narrowish { margin: 40px auto; }
.prose li { margin-bottom: 6px; }

/* App pages */
.app-main { padding-top: 28px; padding-bottom: 48px; }
.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 6px; }
.meta-line { color: var(--graphite); }
.crumb { margin: 0 0 4px; font-size: 0.92rem; }
.new-site-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 16px; }
.new-site-grid label { margin-top: 0; }
.list { background: var(--white); border: 1px solid var(--rule); }
.list th, .list td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.list thead th { font-size: 0.85rem; color: var(--graphite); font-weight: 600; background: var(--paper); }
.list tbody th { font-weight: 600; }
.list .num { text-align: right; white-space: nowrap; }
.list .clip { max-width: 260px; }
.row-actions { white-space: nowrap; }
.row-actions > * + * { margin-left: 12px; }
.status { font-weight: 600; font-size: 0.9rem; }
.status-live { color: var(--ok); }
.status-draft { color: var(--graphite); }
.status-suspended { color: var(--fault); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0; }
.facts dt { color: var(--graphite); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.two-col.tight { gap: 0 16px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: 0 0 20px; border-top: 2px solid var(--ink); background: var(--white); }
.stat-row div { padding: 14px 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat-row dt { font-size: 0.85rem; color: var(--graphite); }
.stat-row dd { margin: 4px 0 0; font-family: var(--display); font-weight: 800; font-size: 1.8rem; }
.stat-row dd .muted { font-family: var(--body); font-weight: 400; font-size: 0.8rem; }
.secret-key { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em; word-break: break-all; padding: 10px; background: var(--paper); }
details summary { cursor: pointer; color: var(--blueprint); }
.inline-details { display: inline-block; }
.inline-details form { margin-top: 8px; max-width: 280px; white-space: normal; }
.danger-zone { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 14px; }
.danger-zone summary { color: var(--fault); }

/* Builder */
.builder-body { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.builder { flex: 1; min-height: 0; display: grid; grid-template-columns: 380px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--white); border-bottom: 1px solid var(--rule); min-height: 52px; }
.bar-site { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bar-spacer { flex: 1; }
.bar-link { font-weight: 600; }
.tabs { display: none; }
.pane { min-height: 0; display: flex; flex-direction: column; }
.pane-chat { background: var(--white); border-right: 1px solid var(--rule); }
.chat { list-style: none; margin: 0; padding: 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 100%; }
.msg-who { display: block; font-size: 0.8rem; font-weight: 700; color: var(--graphite); margin-bottom: 2px; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-user .msg-body { background: var(--paper); border: 1px solid var(--rule); padding: 10px 12px; border-radius: 3px; }
.msg-system { color: var(--graphite); font-size: 0.88rem; border-top: 1px dashed var(--rule); padding-top: 8px; }
.msg-cost { display: block; font-size: 0.8rem; color: var(--graphite); margin-top: 4px; }
.msg-error .msg-body { color: var(--fault); }
.work { font-size: 0.9rem; color: var(--graphite); border-left: 2px solid var(--blueprint); padding-left: 10px; }
.work ul { list-style: none; margin: 4px 0 0; padding: 0; }
.work li { padding: 1px 0; }
.work-live::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--blueprint); }
@media (prefers-reduced-motion: no-preference) { .work-live::after { animation: blink 1s infinite; } }
@keyframes blink { 50% { opacity: 0.2; } }
.chat-empty { color: var(--graphite); }
.composer { border-top: 1px solid var(--rule); padding: 12px 16px 14px; }
.composer textarea { min-height: 76px; max-height: 40vh; }
.composer-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.composer-row .btn { margin-top: 0; }
.composer-row .file-btn { margin-right: auto; }
.file-btn { margin: 0; font-weight: 600; cursor: pointer; }
.file-btn:focus-within { box-shadow: var(--focus); }
.attach-list { display: flex; flex-wrap: wrap; gap: 6px; }
.attach-list:not(:empty) { margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px; border: 1px solid var(--rule); border-radius: 3px; font-size: 0.85rem; background: var(--paper); }
.chip button { border: 0; background: none; cursor: pointer; font: inherit; color: var(--graphite); min-width: 28px; min-height: 28px; }
.pane-preview { background: var(--paper); }
.preview-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--white); border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.preview-bar select { width: auto; min-height: 36px; padding: 4px 8px; max-width: 220px; }
.preview-bar .btn { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.seg button { border: 0; background: var(--white); font: 600 0.88rem var(--body); padding: 0 12px; min-height: 36px; cursor: pointer; color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--blood); color: #fff; }
.publish-note { margin: 0; padding: 0 16px; font-size: 0.88rem; color: var(--graphite); }
.publish-note:not(:empty) { padding: 6px 16px; background: var(--white); border-bottom: 1px solid var(--rule); }
/* The drafting sheet the preview sits on. */
.sheet-frame { position: relative; flex: 1; min-height: 0; margin: 16px; background-color: #0D0A0C; background-image: linear-gradient(#1A1418 1px, transparent 1px), linear-gradient(90deg, #1A1418 1px, transparent 1px); background-size: 24px 24px; border: 1px solid var(--rule); display: flex; justify-content: center; padding: 14px; }
.sheet-frame iframe { width: 100%; height: 100%; border: 1px solid var(--rule-strong); background: var(--white); transition: width 0.2s; }
.sheet-frame.mobile iframe { width: 390px; max-width: 100%; }
.empty-preview { position: absolute; inset: 14px; display: grid; place-items: center; text-align: center; color: var(--graphite); padding: 24px; overflow: auto; background: var(--paper); }
.empty-preview[hidden] { display: none; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--rule); }
  .two-col, .new-site-grid { grid-template-columns: minmax(0, 1fr); }
  .builder { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .tabs { display: flex; grid-column: 1; background: var(--white); border-bottom: 1px solid var(--rule); }
  .tabs button { flex: 1; min-height: 44px; border: 0; background: none; font: 600 0.95rem var(--body); color: var(--graphite); border-bottom: 3px solid transparent; cursor: pointer; }
  .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blueprint); }
  .pane[hidden] { display: none; }
  .pane-chat { border-right: 0; }
  .sheet-frame { margin: 8px; padding: 8px; }
  .bar .bar-site { display: none; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dd { margin-bottom: 8px; }
}
@media (max-width: 480px) {
  .sheet { padding: 18px 16px; }
  .topbar nav { gap: 12px; font-size: 0.95rem; }
  .composer-hint { display: none; }
  .row-actions { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Site list stacks into cards on phones. */
@media (max-width: 640px) {
  .list-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .list-stack, .list-stack tbody, .list-stack tr, .list-stack th, .list-stack td { display: block; width: 100%; }
  .list-stack tr { padding: 12px 14px; border-bottom: 1px solid var(--rule); }
  .list-stack th, .list-stack td { padding: 3px 0; border: 0; }
  .list-stack td[data-label]::before { content: attr(data-label) ": "; color: var(--graphite); font-size: 0.85rem; }
  .list-stack .row-actions { display: flex; gap: 18px; padding-top: 8px; }
}
@media (max-width: 640px) {
  .list-stack caption { display: block; text-align: left; }
  .list-stack td:empty { display: none; }
  .plans.list-stack th[scope="row"] { font-size: 1.4rem; }
  .plans.list-stack .plan-note { padding-top: 6px; }
}

/* Build / Plan / Chat modes */
.modes { display: flex; align-items: center; gap: 0; flex-wrap: wrap; border: 0; padding: 0; margin: 0 0 8px; }
.modes label { position: relative; margin: 0; }
.modes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.modes label span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--rule); margin-left: -1px; font: 600 0.88rem var(--body); color: var(--ink); background: var(--white); cursor: pointer; }
.modes label:first-of-type span { margin-left: 0; border-radius: 3px 0 0 3px; }
.modes label:nth-of-type(3) span { border-radius: 0 3px 3px 0; }
.modes input:checked + span { background: var(--blood); border-color: var(--blood); color: #fff; }
.modes input:focus-visible + span { box-shadow: var(--focus); position: relative; z-index: 1; }
.mode-note { flex: 1 1 160px; margin-left: 10px; font-size: 0.8rem; color: var(--graphite); }
.mode-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--rule); border-radius: 3px; font-size: 0.72rem; font-weight: 700; color: var(--blueprint); text-transform: uppercase; letter-spacing: 0.04em; }

/* Formatted replies */
.msg-rich { white-space: normal; }
.msg-rich p { margin: 0 0 8px; }
.msg-rich p:last-child { margin-bottom: 0; }
.msg-rich .msg-h { font-weight: 700; color: var(--ink); margin: 12px 0 4px; }
.msg-rich .msg-h:first-child { margin-top: 0; }
.msg-rich ul { margin: 0 0 8px; padding-left: 20px; }
.msg-rich li { margin: 2px 0; }
.build-plan { margin-top: 10px; }

/* Questions with tap-to-answer options */
.qcard { margin-top: 10px; border: 1px solid var(--rule); border-left: 3px solid var(--blueprint); border-radius: 3px; padding: 12px; background: var(--white); }
.qcard .q { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.qcard legend { font-weight: 700; color: var(--ink); padding: 0; margin-bottom: 8px; }
.q-options { display: flex; flex-direction: column; gap: 6px; }
.q-opt { position: relative; display: block; margin: 0; }
.q-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.q-opt span { display: block; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); cursor: pointer; }
.q-opt input:hover + span { border-color: var(--blueprint); }
.q-opt input:checked + span { border-color: var(--blueprint); background: var(--tint); color: var(--blueprint-deep); font-weight: 600; }
.q-opt input:focus-visible + span { box-shadow: var(--focus); }
.q-other { margin-top: 6px; min-height: 40px; }
.qcard .btn { margin: 0; }
.qcard-done { opacity: 0.7; }
.qcard-done .q-opt span, .qcard-done .q-opt input { cursor: default; }
.qcard-done .q-other { display: none; }

/* Empty preview: a page being sketched, and the stacking game */
.empty-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 340px; }
.sketch { width: 220px; height: auto; fill: none; stroke: var(--blueprint); stroke-width: 2; stroke-linecap: round; margin-bottom: 6px; }
.sketch .s4 { fill: rgba(255,178,36,0.0); }
.empty-title { margin: 0; font: 700 1.5rem/1.1 var(--display); color: var(--ink); }
.empty-sub { margin: 0; font-size: 0.92rem; min-height: 1.4em; }
.game { margin-top: 6px; }
.game canvas { display: block; width: 300px; max-width: 100%; height: auto; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 3px; touch-action: manipulation; cursor: pointer; }
.game canvas:focus-visible { box-shadow: var(--focus); outline: none; }
.game-score { margin: 6px 0 0; font-size: 0.85rem; }
#game-toggle { margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .sketch path, .sketch rect { stroke-dasharray: 400; stroke-dashoffset: 400; animation: sketch 7s ease-in-out infinite; }
  .sketch .s2 { animation-delay: 0.4s; }
  .sketch .s3 { animation-delay: 0.9s; }
  .sketch .s4 { animation-name: sketch, sketchfill; animation-delay: 1.4s; }
  .sketch .s5 { animation-delay: 1.8s; }
  .sketch .s6 { animation-delay: 2.3s; }
}
@keyframes sketch { 0% { stroke-dashoffset: 400; opacity: 1; } 40%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sketchfill { 0%, 35% { fill: rgba(255,178,36,0); } 50%, 85% { fill: rgba(255,178,36,1); } 100% { fill: rgba(255,178,36,0); } }
@media (max-height: 760px) { .sketch { width: 150px; } }
.work-bar { height: 6px; margin: 6px 0 4px; background: var(--rule); border-radius: 3px; overflow: hidden; max-width: 320px; }
.work-bar span { display: block; height: 100%; width: 0; background: var(--blueprint); border-radius: 3px; transition: width 0.25s linear; }
.work-meta { font-size: 0.78rem; color: var(--graphite); }
@media (prefers-reduced-motion: reduce) { .work-bar span { transition: none; } }
.composer.dropping { outline: 2px dashed var(--blueprint); outline-offset: -6px; background: var(--tint); }

/* More panel */
.more { position: relative; flex: 1; min-height: 0; display: flex; background: var(--paper); }
.more[hidden], .sheet-frame[hidden] { display: none !important; }
.more-nav { width: 168px; flex-shrink: 0; padding: 14px 10px; border-right: 1px solid var(--rule); background: var(--white); display: flex; flex-direction: column; gap: 2px; }
.more-nav button { text-align: left; border: 0; background: none; font: 600 0.92rem var(--body); color: var(--ink); padding: 9px 12px; border-radius: 3px; cursor: pointer; min-height: 38px; }
.more-nav button:hover { background: var(--paper); }
.more-nav button[aria-current="page"] { background: var(--tint); color: var(--blueprint-deep); box-shadow: inset 3px 0 0 var(--blueprint); }
.more-main { flex: 1; min-width: 0; overflow: auto; padding: 18px 24px 40px; }
.more-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.more-head h2 { margin: 0; font-size: 1.9rem; }
.more-head h2:focus { outline: none; }
.more-content { max-width: 1000px; display: flex; flex-direction: column; gap: 14px; }
.more-content > p { margin: 0; }
.more-card { background: var(--white); border: 1px solid var(--rule); border-radius: 3px; padding: 14px 16px; }
.more-card h3 { margin: 0 0 10px; font-size: 1.25rem; }
.more-card p { margin: 0 0 8px; }
.more-card p:last-child { margin-bottom: 0; }
.more-note { border-left: 3px solid var(--blueprint); }
.more-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.more-row p { margin: 0; }
.more-row.tight { justify-content: flex-start; flex-wrap: nowrap; }
.more-row .btn, .more-card .btn { margin: 0; }
.more-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); background: var(--white); border: 1px solid var(--rule); border-radius: 3px; }
.more-stat { padding: 12px 14px; border-right: 1px solid var(--rule); }
.more-stat:last-child { border-right: 0; }
.more-stat .k { display: block; font-size: 0.82rem; color: var(--graphite); font-weight: 600; }
.more-stat .v { font: 800 1.8rem/1.1 var(--display); color: var(--ink); }
.more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.more-chart { width: 100%; height: auto; display: block; }
.more-chart rect { fill: var(--blueprint); }
.more-chart .grid { stroke: var(--rule); stroke-width: 1; }
.more-chart text { fill: var(--graphite); font: 11px var(--body); }
.more-bars { list-style: none; margin: 0; padding: 0; }
.more-bars li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; font-size: 0.9rem; z-index: 0; }
.more-bars .bar { position: absolute; left: 0; top: 2px; bottom: 2px; background: var(--tint); border-radius: 2px; z-index: -1; }
.more-bars .lbl { overflow-wrap: anywhere; }
.more-bars .val { font-weight: 700; }
.more-scroll { overflow-x: auto; background: var(--white); border: 1px solid var(--rule); border-radius: 3px; }
.more-card .more-scroll { border: 0; }
.more-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.more-table th, .more-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; max-width: 320px; overflow-wrap: anywhere; }
.more-table thead th { font-size: 0.78rem; color: var(--graphite); background: var(--paper); white-space: nowrap; }
.more-table tbody tr:last-child > * { border-bottom: 0; }
.more-table td.null { color: var(--graphite); font-style: italic; }
.more-table .acts { white-space: nowrap; }
.more-table .acts > * + * { margin-left: 12px; }
.more-form { display: flex; flex-direction: column; gap: 10px; }
.more-field { display: flex; flex-direction: column; gap: 4px; }
.more-field label { font-weight: 600; font-size: 0.9rem; margin: 0; }
.more-field .check { font-weight: 400; display: flex; gap: 6px; align-items: center; }
.more-field input, .more-field textarea { margin: 0; }
.more-flash:empty { display: none; }
.more-flash { margin: 0; padding: 8px 12px; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.35); border-radius: 3px; font-size: 0.9rem; }
.more-error { background: rgba(255, 107, 107, 0.1); border-color: rgba(255, 107, 107, 0.4); color: var(--fault); padding: 8px 12px; border: 1px solid rgba(255, 107, 107, 0.4); border-radius: 3px; margin: 0; }
.more-warn { background: rgba(255, 178, 36, 0.1); border-color: rgba(255, 178, 36, 0.4); }
.meter { height: 8px; background: var(--rule); border-radius: 4px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--blueprint); }
.mono { font-family: var(--mono); font-size: 0.85rem; }
.small { font-size: 0.82rem; }
.ok { color: var(--ok); font-weight: 600; }
.seo-title { font-weight: 700; color: var(--blueprint-deep); }
.seo-desc { color: var(--graphite); font-size: 0.9rem; }
.seo-issues { margin: 6px 0 0; padding-left: 18px; color: var(--pencil); font-size: 0.9rem; }
.danger-zone { border-color: rgba(255, 107, 107, 0.4); }
@media (max-width: 900px) {
  .more { flex-direction: column; }
  .more-nav { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rule); padding: 6px 8px; }
  .more-nav button { white-space: nowrap; }
  .more-nav button[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--blueprint); }
  .more-main { padding: 14px 14px 30px; }
  .more-head h2 { font-size: 1.5rem; }
}

/* ---- Dark finish: atmosphere, depth and the sharper type ---- */
body { background: var(--paper); -webkit-font-smoothing: antialiased; }
body.public, body.app { background:
  radial-gradient(900px 520px at 85% -10%, rgba(200, 16, 46, 0.22), transparent 70%),
  radial-gradient(700px 480px at -10% 30%, rgba(159, 18, 57, 0.12), transparent 70%),
  var(--paper); background-attachment: fixed; }
::selection { background: var(--blood); color: #fff; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; }
h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
.hero-copy h1 { font-size: clamp(2.1rem, 5vw, 3.7rem); }
.hero-copy h1 em { font-style: normal; background: linear-gradient(100deg, #FF4D6A, #FFB224); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wordmark { font-size: 1.5rem; letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 10px; }
.wordmark::before { content: ""; width: 26px; height: 26px; flex-shrink: 0; background: url("icon.png") center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(255, 77, 106, 0.55)); }
.wordmark.small { font-size: 1.25rem; }
.wordmark.small::before { width: 22px; height: 22px; }

/* Controls */
.btn { border-radius: 999px; border-color: var(--rule-strong); background: var(--raised); color: var(--ink); padding: 10px 20px; transition: background 0.15s, border-color 0.15s, box-shadow 0.2s, transform 0.15s; }
.btn:hover { background: #251D22; border-color: #5A4750; color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-primary, .topbar nav .btn { background: linear-gradient(180deg, #E0173A, var(--blood)); border-color: #E0173A; box-shadow: 0 0 0 1px rgba(255, 77, 106, 0.25), 0 8px 28px -8px rgba(225, 23, 58, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn-primary:hover, .topbar nav .btn:hover { background: linear-gradient(180deg, var(--blood), var(--blood-deep)); box-shadow: 0 0 0 1px rgba(255, 77, 106, 0.4), 0 10px 34px -6px rgba(225, 23, 58, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn-publish { box-shadow: 0 8px 26px -10px rgba(255, 178, 36, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn-quiet { background: transparent; }
.btn-danger, .btn-stop { background: transparent; border-color: rgba(255, 107, 107, 0.55); color: var(--fault); }
.btn-danger:hover, .btn-stop:hover { background: rgba(255, 107, 107, 0.1); border-color: var(--fault); color: var(--fault); }
input, select, textarea { background: #0E0B0D; border-color: var(--rule-strong); border-radius: 8px; transition: border-color 0.15s, box-shadow 0.15s; }
input:hover, select:hover, textarea:hover { border-color: #5A4750; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blueprint); box-shadow: 0 0 0 3px rgba(255, 77, 106, 0.2); }
input::placeholder, textarea::placeholder { color: #75676E; }
select option { background: var(--white); }
.addon-input span { background: var(--raised); border-color: var(--rule-strong); border-radius: 0 8px 8px 0; }
.addon-input input { border-radius: 8px 0 0 8px; }
.credit-pill { border-radius: 999px; border-color: rgba(255, 178, 36, 0.45); color: var(--pencil); padding: 4px 12px; }
.mode-tag { border-radius: 999px; border-color: rgba(255, 77, 106, 0.35); }

/* Surfaces */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(9, 7, 10, 0.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: rgba(255, 255, 255, 0.06); }
.topbar nav a { color: var(--graphite); transition: color 0.15s; }
.topbar nav a:hover { color: var(--ink); }
.topbar nav a[aria-current="page"] { color: var(--ink); text-decoration-color: var(--blueprint); }
.sheet, .list, .more-card, .more-stats, .more-scroll, .qcard, .plans, .stat-row { border-radius: var(--radius); border: 1px solid var(--rule); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%), var(--white); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -32px rgba(0, 0, 0, 0.9); }
.list, .plans, .more-scroll { overflow: hidden; }
.more-card .more-scroll { box-shadow: none; }
.plans, .stat-row { border-top: 1px solid var(--rule); }
.stat-row { overflow: hidden; }
.stat-row div, .more-stat { border-color: var(--rule); }
.stat-row dd, .more-stat .v { letter-spacing: -0.03em; }
.list thead th, .more-table thead th { background: rgba(255, 255, 255, 0.03); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; }
.list tbody tr, .more-table tbody tr { transition: background 0.12s; }
.list tbody tr:hover, .more-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.flash { background: var(--white); border-radius: var(--radius); border: 1px solid var(--rule); border-left: 3px solid var(--blueprint); }
.flash-error { border-left-color: var(--fault); }
.flash-ok { border-left-color: var(--ok); }
.notice { border-radius: var(--radius); border-color: rgba(255, 178, 36, 0.4); }
.foot { background: transparent; border-top-color: rgba(255, 255, 255, 0.06); }
.secret-key { background: var(--raised); border-radius: 8px; font-family: var(--mono); }
.status-live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); vertical-align: 1px; }

/* Public pages */
.hero { background: transparent; border-bottom: 0; padding: 72px 0 72px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 77, 106, 0.5), transparent); }
.lede { color: #CFC3C8; }
.blueprint { position: relative; border-radius: 16px; border: 1px solid var(--rule); padding: 20px; background: linear-gradient(180deg, #17121500, #0E0B0D), var(--white); box-shadow: 0 0 0 1px rgba(255, 77, 106, 0.08), 0 40px 120px -40px rgba(200, 16, 46, 0.55); }
.blueprint::before { content: ""; position: absolute; inset: -1px; border-radius: 16px; padding: 1px; background: linear-gradient(140deg, rgba(255, 77, 106, 0.6), transparent 35%, transparent 65%, rgba(255, 178, 36, 0.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.bp-prompt { border: 1px solid var(--rule-strong); border-radius: 10px; background: #0E0B0D; }
.bp-label { color: var(--blueprint); }
.bp-lines rect, .bp-lines line { stroke: rgba(255, 77, 106, 0.85); filter: drop-shadow(0 0 3px rgba(255, 77, 106, 0.6)); }
.bp-fill rect { fill: #3A2C33; }
.bp-fill .go { fill: var(--pencil); }
.steps { border-top: 0; gap: 14px; }
.steps li { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 22px 10px; margin: 0; }
.steps li:last-child { border-right: 1px solid var(--rule); }
.steps li::before { font-size: 2.2rem; background: linear-gradient(180deg, #FF4D6A, #9F1239); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-top { background: linear-gradient(90deg, rgba(255, 77, 106, 0.1), transparent); }

/* Builder */
.builder-body { background: var(--paper); }
.bar { background: rgba(9, 7, 10, 0.85); border-bottom-color: rgba(255, 255, 255, 0.06); }
.pane-chat { background: var(--white); border-right-color: rgba(255, 255, 255, 0.06); }
.msg-who { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; }
.msg-assistant .msg-who, .msg-ai .msg-who { color: var(--blueprint); }
.msg-user .msg-body { background: var(--raised); border-color: var(--rule); border-radius: 14px 14px 4px 14px; }
.work { border-left-color: var(--blueprint); }
.work-live::after { box-shadow: 0 0 8px var(--blueprint); }
.composer { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.25)); border-top-color: rgba(255, 255, 255, 0.06); }
.composer textarea { border-radius: 14px; background: #0E0B0D; }
.chip { border-radius: 999px; background: var(--raised); }
.pane-preview { background: var(--paper); }
.preview-bar { background: var(--white); border-bottom-color: rgba(255, 255, 255, 0.06); }
.seg { border-radius: 999px; border-color: var(--rule-strong); }
.seg button { background: transparent; }
.modes label span { background: transparent; border-color: var(--rule-strong); }
.modes label:first-of-type span { border-radius: 999px 0 0 999px; }
.modes label:nth-of-type(3) span { border-radius: 0 999px 999px 0; }
.publish-note:not(:empty) { background: var(--white); border-bottom-color: var(--rule); }
.sheet-frame { border-radius: 14px; border-color: var(--rule); background-image: radial-gradient(circle at 50% 0%, rgba(200, 16, 46, 0.12), transparent 60%), linear-gradient(#1A1418 1px, transparent 1px), linear-gradient(90deg, #1A1418 1px, transparent 1px); background-size: auto, 24px 24px, 24px 24px; }
.sheet-frame iframe { border-radius: 8px; border-color: var(--rule-strong); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9); }
.empty-preview { background: transparent; border-radius: 10px; }
.sketch { stroke: var(--blueprint); filter: drop-shadow(0 0 6px rgba(255, 77, 106, 0.5)); }
.game canvas { border-color: var(--rule-strong); border-radius: 12px; }
.work-bar { background: var(--raised); border-radius: 999px; }
.work-bar span { background: linear-gradient(90deg, var(--blood), #FF4D6A, var(--pencil)); box-shadow: 0 0 10px rgba(255, 77, 106, 0.6); border-radius: 999px; }
.composer.dropping { background: var(--tint); }
.q-opt span { background: var(--raised); border-radius: 10px; }
.q-opt input:checked + span { color: var(--ink); }
.qcard { border-left: 1px solid var(--rule); box-shadow: inset 3px 0 0 var(--blueprint), 0 24px 48px -32px rgba(0, 0, 0, 0.9); }
.more { background: var(--paper); }
.more-nav { background: var(--white); border-right-color: rgba(255, 255, 255, 0.06); }
.more-nav button { border-radius: 8px; color: var(--graphite); }
.more-nav button:hover { background: var(--raised); color: var(--ink); }
.more-nav button[aria-current="page"] { color: var(--ink); }
.more-note { box-shadow: inset 3px 0 0 var(--blueprint), 0 24px 48px -32px rgba(0, 0, 0, 0.9); }
.more-bars .bar { background: var(--tint); }
.meter { background: var(--raised); }
.meter span { background: linear-gradient(90deg, var(--blood), var(--blueprint)); }
.more-flash, .more-error { border-radius: 8px; }
@media (max-width: 900px) {
  .tabs { background: var(--white); border-bottom-color: rgba(255, 255, 255, 0.06); }
  .steps { gap: 10px; }
  .steps li { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 640px) {
  .list-stack tr { border-bottom-color: var(--rule); }
  .hero { padding: 40px 0 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .btn-primary { animation: ember 4s ease-in-out infinite; }
}
@keyframes ember { 50% { box-shadow: 0 0 0 1px rgba(255, 77, 106, 0.35), 0 10px 36px -6px rgba(225, 23, 58, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.18); } }
/* Later .btn rules above would otherwise flatten Publish. */
.btn-publish { background: linear-gradient(180deg, #FFC34D, var(--pencil)); border-color: var(--pencil); color: var(--on-pencil); }
.btn-publish:hover { background: linear-gradient(180deg, var(--pencil), var(--pencil-deep)); border-color: var(--pencil-deep); color: var(--on-pencil); }
.hero-copy h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.stat-row dd, .more-stat .v { font-family: var(--body); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
@media (max-width: 640px) {
  .topbar { position: static; }
  .bar { gap: 10px; padding: 8px 12px; }
  .bar .wordmark.small { font-size: 0; gap: 0; }
}

/* Domain panel */
.dom-ok, .dom-wait { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
.dom-ok { color: var(--ok); }
.dom-wait { color: var(--pencil); }
.dom-ok::before, .dom-wait::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dom-ok::before { box-shadow: 0 0 8px var(--ok); }
.more-stat .dom-ok, .more-stat .dom-wait { font-size: 1.1rem; margin-top: 4px; }
.dom-val { overflow-wrap: anywhere; max-width: 46ch; }
@media (max-width: 640px) {
  .dom-records thead { display: none; }
  .dom-records table, .dom-records tbody, .dom-records tr, .dom-records td { display: block; width: 100%; }
  .dom-records tr { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
  .dom-records td { border: 0; padding: 2px 0; max-width: none; }
  .dom-records td:first-child, .dom-records td:nth-child(2) { display: inline-block; width: auto; margin-right: 10px; }
  .dom-records .acts { padding-top: 8px; }
}
#edit-text[aria-pressed="true"] { background: var(--blood); border-color: var(--blood); color: #fff; }
.notice-sheet { border-color: rgba(200, 16, 46, 0.55); box-shadow: 0 0 0 1px rgba(200, 16, 46, 0.25), 0 0 40px rgba(200, 16, 46, 0.12); }
/* Inbox, brand, extras, payments, team (2026-10-17) */
.nav-count { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 6px; border-radius: 999px; background: var(--blood); color: #fff; font: 700 0.72rem/1.5 var(--body); text-align: center; vertical-align: 1px; }
.more-row.tight.wrap { flex-wrap: wrap; }
.inbox-item { padding: 0; }
.inbox-item > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.inbox-item > summary::-webkit-details-marker { display: none; }
.inbox-item > summary:focus-visible { outline: 2px solid var(--blueprint); outline-offset: -2px; }
.inbox-item[open] > summary { border-bottom: 1px solid var(--rule); }
.inbox-item > :not(summary) { margin: 12px 16px; }
.inbox-item.unread { border-color: rgba(255, 77, 106, 0.55); }
.inbox-item.unread > summary strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blueprint); margin-right: 8px; vertical-align: 1px; }
.inbox-when { margin-left: auto; }
.inbox-fields dd { white-space: pre-wrap; }
.brand-form .more-card { margin-bottom: 12px; }
.check-row { margin-bottom: 10px; }
.steps { margin: 0; padding-left: 20px; }
.steps li { margin-bottom: 6px; }
.pay-head, .pay-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.5fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; }
.pay-head { font-size: 0.85rem; color: var(--graphite); margin-bottom: 6px; }
.pay-row { margin-bottom: 8px; }
.pay-row input { min-width: 0; }
@media (max-width: 700px) {
  .pay-head { display: none; }
  .pay-row { grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr); padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
  .pay-row input[type=url] { grid-column: 1 / -1; }
  .inbox-when { margin-left: 0; width: 100%; }
}
.more-nav { overflow-y: auto; }
/* Templates and remix */
.tpl-head { margin: 28px 0 4px; font-size: 1.3rem; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 12px; }
.tpl-card { background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius, 12px); overflow: hidden; display: flex; flex-direction: column; }
.tpl-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; border-bottom: 1px solid var(--rule); }
.tpl-thumb iframe { position: absolute; top: 0; left: 0; width: 400%; height: 400%; border: 0; transform: scale(0.25); transform-origin: 0 0; pointer-events: none; }
.tpl-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tpl-body h4 { margin: 0; font-size: 1.05rem; }
.tpl-body p { margin: 0; }
.tpl-cat { font-size: 0.78rem; color: var(--blueprint); font-weight: 600; }
.tpl-use { margin-top: auto; padding-top: 8px; display: flex; gap: 12px; align-items: center; }
.section-h { margin: 32px 0 12px; }
.remix-frame { margin-top: 20px; border: 1px solid var(--rule); border-radius: var(--radius, 12px); overflow: hidden; height: min(70vh, 720px); background: #fff; }
.remix-frame iframe { width: 100%; height: 100%; border: 0; }
.inline-details { display: inline-block; }
.inline-details summary { cursor: pointer; list-style: none; display: inline; }
.inline-details form { display: grid; gap: 6px; margin-top: 6px; min-width: 220px; }
.buy-list, .buy-orders { list-style: none; margin: 12px 0 0; padding: 0; }
.buy-list li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.buy-list li strong { flex: 1 1 180px; overflow-wrap: anywhere; }
.buy-list li.taken { opacity: 0.55; }
.buy-orders li { padding: 6px 0; }
#buy-q { flex: 1; min-width: 0; }

/* More menu groups */
.more-nav { gap: 0; }
.more-group { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; }
.more-group + .more-group { border-top: 1px solid var(--rule); padding-top: 10px; }
.more-group-h { margin: 0 0 2px; padding: 0 12px; font: 700 0.7rem var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite); }
.more-group-note { margin: 0; padding: 4px 12px; font-size: 0.8rem; color: var(--graphite); }
@media (max-width: 900px) {
  .more-group { flex-direction: row; align-items: center; padding: 0 6px 0 0; flex-shrink: 0; }
  .more-group + .more-group { border-top: 0; border-left: 1px solid var(--rule); padding: 0 6px 0 8px; }
  .more-group-h, .more-group-note { display: none; }
}
@media (min-width: 901px) { .more-group .more-nav button, .more-group button { min-height: 34px; padding: 7px 12px; } .more-group { padding-bottom: 8px; } .more-group + .more-group { padding-top: 8px; } }

/* Hexwork wordmark: white "Hex", red "work", matching the logo */
.wordmark { font-family: "Montserrat", var(--display); font-weight: 800; letter-spacing: -0.02em; }
.wordmark .wm-red { color: #FF2E5B; }
.wordmark .wordmark-sub { font-family: var(--body); letter-spacing: 0; }
.wordmark::before { width: 30px; height: 30px; }
.wordmark.small::before { width: 26px; height: 26px; }

/* Security check */
.sec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sec-item { background: var(--white); border: 1px solid var(--rule); border-left: 4px solid var(--rule); border-radius: 8px; padding: 12px 14px; }
.sec-item p { margin: 0 0 6px; }
.sec-high { border-left-color: #FF2E5B; }
.sec-medium { border-left-color: #FFB224; }
.sec-low { border-left-color: #7C7480; }
.sec-ignored { opacity: .7; }
.sec-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.sec-pill { font: 700 0.72rem var(--body); text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; background: var(--raised, #221C22); color: var(--ink); }
.sec-high .sec-pill { background: rgba(255,46,91,.16); color: #FF6F8E; }
.sec-medium .sec-pill { background: rgba(255,178,36,.14); color: #FFC75A; }
.more-stat .v.sec-bad { color: #FF6F8E; }
.more-stat .v.sec-good { color: #4ADE80; }

/* Builder power picker (Charm, Jinx, Hex) */
.tier-select { width: auto; min-height: 34px; padding: 4px 30px 4px 12px; font: 600 0.85rem var(--body); border-radius: 999px; }

.sec-review { border-color: rgba(255,46,91,.35); }
.sec-running::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: #FF2E5B; vertical-align: middle; animation: blink 1s infinite; }
.sec-ok { color: #4ADE80; font-weight: 600; }
.sec-review .sec-list { margin-top: 10px; }

/* Website or app picker on the dashboard */
.kind-pick { border: 0; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kind-pick legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.kind-pick label { position: relative; margin: 0; }
.kind-pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.kind-pick label > span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); cursor: pointer; }
.kind-pick small { color: var(--graphite); font-size: 0.82rem; }
.kind-pick input:checked + span { border-color: #FF2E5B; box-shadow: 0 0 0 1px #FF2E5B inset; }
.kind-pick input:focus-visible + span { outline: 2px solid #FF4D6A; outline-offset: 2px; }
@media (max-width: 700px) { .kind-pick { grid-template-columns: minmax(0, 1fr); } }
.plan-actions { margin-top: 10px; }
.plan-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-buttons .build-plan { margin-top: 0; }
.plan-estimate { margin: 8px 0 0; font-size: .85rem; color: var(--graphite); }
.ok-line { color: var(--ok); }
/* Visual editor panel */
.vis-panel { position: absolute; top: 14px; right: 14px; width: 280px; max-height: calc(100% - 28px); overflow: auto; background: var(--raised); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.45); z-index: 5; display: grid; gap: 10px; }
.vis-panel[hidden] { display: none; }
.vis-head { display: flex; justify-content: space-between; align-items: center; }
.vis-snippet { margin: 0; font-size: .82rem; color: var(--graphite); overflow-wrap: anywhere; }
.vis-row { display: grid; gap: 4px; }
.vis-row > label { font-size: .78rem; color: var(--graphite); font-weight: 600; }
.vis-color { display: flex; gap: 8px; align-items: center; }
.vis-color input[type=color] { width: 44px; height: 30px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 6px; background: none; }
.vis-range { display: flex; gap: 8px; align-items: center; }
.vis-range input { flex: 1; }
.vis-range output { min-width: 44px; font-size: .8rem; text-align: right; }
.vis-seg button { font-size: .8rem; }
.vis-actions { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--rule); padding-top: 10px; }
.vis-danger { color: var(--fault); }
.vis-link { display: grid; gap: 6px; border-top: 1px solid var(--rule); padding-top: 10px; }
.vis-check { font-size: .82rem; }
.btn-tiny { padding: 4px 8px; font-size: .75rem; }
@media (max-width: 700px) { .vis-panel { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 55%; } }
.vis-none { font-size: .78rem; color: var(--graphite); }
@media (min-width: 701px) { .sheet-frame.vis-open { padding-right: 308px; } }
/* Tool rail: always-visible site tools beside the preview */
.preview-body { flex: 1; min-height: 0; display: flex; }
.preview-body > .more, .preview-body > .sheet-frame { flex: 1; min-width: 0; }
.tool-rail { width: 76px; flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 6px; border-right: 1px solid var(--rule); background: var(--white); overflow-y: auto; scrollbar-width: thin; }
.tool-rail hr { border: 0; border-top: 1px solid var(--rule); margin: 6px 8px; flex-shrink: 0; }
.tool-rail button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 7px; border: 0; border-radius: 8px; background: none; color: var(--graphite); font: 600 0.68rem/1.1 var(--body); cursor: pointer; flex-shrink: 0; }
.tool-rail button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool-rail button:hover { background: var(--raised); color: var(--ink); }
.tool-rail button[aria-current="page"] { background: var(--tint); color: var(--ink); box-shadow: inset 3px 0 0 var(--blueprint); }
.tool-rail button:focus-visible { outline: 2px solid var(--pencil); outline-offset: -2px; }
.tool-rail .nav-count { position: absolute; top: 3px; right: 8px; margin: 0; min-width: 17px; padding: 0 4px; font-size: 0.64rem; }
.more-main { flex: 1; min-width: 0; }
@media (max-width: 700px) {
  .preview-body { flex-direction: column; }
  .tool-rail { width: auto; flex-direction: row; padding: 6px; border-right: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; overflow-y: hidden; }
  .tool-rail hr { border-top: 0; border-left: 1px solid var(--rule); margin: 6px 4px; }
  .tool-rail button { min-width: 64px; }
  .tool-rail button[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--blueprint); }
}
/* Launch checklist chip */
.preview-bar { position: relative; }
.launch-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px 4px 6px; border: 1px solid var(--pencil); border-radius: 999px; background: rgba(255, 178, 36, 0.1); color: var(--ink); font: 700 0.85rem var(--body); cursor: pointer; }
.launch-chip:hover, .launch-chip[aria-expanded="true"] { background: rgba(255, 178, 36, 0.2); }
.launch-chip[hidden] { display: none; }
.launch-ring { --p: 0; width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(var(--pencil) calc(var(--p) * 1%), var(--rule-strong) 0); display: inline-grid; place-items: center; }
.launch-ring::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--white); }
.launch-pop { position: absolute; top: calc(100% + 6px); left: 16px; width: min(380px, calc(100vw - 32px)); z-index: 30; background: var(--raised); border: 1px solid var(--rule-strong); border-radius: 12px; padding: 14px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); }
.launch-title { margin: 0 0 10px; font: 800 1rem var(--body); }
.launch-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.launch-step { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.launch-step.next { background: var(--tint); }
.launch-mark { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--rule-strong); display: grid; place-items: center; font: 800 0.75rem var(--body); }
.launch-step.done .launch-mark { background: var(--ok); border-color: var(--ok); color: #06210f; }
.launch-step.done strong { color: var(--graphite); font-weight: 600; }
.launch-text { flex: 1; display: grid; gap: 2px; }
.launch-text strong { font-size: 0.9rem; }
.launch-text small { color: var(--graphite); font-size: 0.78rem; }
/* Builder power picker */
.power { position: relative; }
.power-btn { display: grid; text-align: left; gap: 1px; min-height: 40px; padding: 4px 12px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--white); color: var(--ink); cursor: pointer; font-family: var(--body); }
.power-btn:hover, .power-btn[aria-expanded="true"] { border-color: var(--blueprint); }
.power-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--graphite); }
.power-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.9rem; }
.power-dots { color: var(--pencil); letter-spacing: 1px; font-size: 0.6rem; }
.power-pop { position: absolute; bottom: calc(100% + 8px); left: 0; width: min(340px, calc(100vw - 24px)); z-index: 40; background: var(--raised); border: 1px solid var(--rule-strong); border-radius: 12px; padding: 14px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); display: grid; gap: 8px; }
.power-pop[hidden] { display: none; }
.power-title { margin: 0; font: 800 1rem var(--body); }
.power-sub { margin: 0 0 4px; font-size: 0.82rem; color: var(--graphite); }
.power-card { border: 1px solid var(--rule-strong); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.power-card.on { border-color: var(--blueprint); background: var(--tint); }
.power-card.locked { opacity: 0.75; }
.power-card p { margin: 0; font-size: 0.82rem; color: var(--graphite); }
.power-top { display: flex; align-items: center; gap: 8px; }
.power-cost { margin-left: auto; font-size: 0.75rem; font-weight: 700; color: var(--pencil); }
.power-current { font-size: 0.78rem; font-weight: 700; color: var(--ok); }
.power-upgrade { font-size: 0.8rem; font-weight: 700; }
.power-card .btn { justify-self: start; }
/* Tour */
.bar-help { border: 1px solid var(--rule-strong); background: none; color: var(--ink); border-radius: 999px; padding: 6px 12px; font: 600 0.82rem var(--body); cursor: pointer; margin-right: 8px; }
.bar-help:hover { border-color: var(--blueprint); }
.tour { position: fixed; inset: 0; z-index: 1000; }
.tour-hole { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(5, 3, 6, 0.72); outline: 2px solid var(--pencil); transition: all 0.25s ease; pointer-events: none; }
.tour-tip { position: fixed; background: var(--raised); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 12px; padding: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); transition: top 0.25s ease, left 0.25s ease; }
.tour-tip h2 { margin: 2px 0 6px; font: 800 1.05rem var(--body); }
.tour-tip p { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.45; }
.tour-tip .tour-count { margin: 0; font-size: 0.72rem; font-weight: 700; color: var(--pencil); text-transform: uppercase; letter-spacing: 0.06em; }
.tour-row { display: flex; gap: 8px; justify-content: flex-end; }
.tour-row .btn:first-child { margin-right: auto; }
/* Connections */
.conn-form { display: grid; gap: 6px; max-width: 520px; }
.conn-card.conn-on { border-color: rgba(74, 222, 128, 0.45); }
.conn-saved { border-top: 1px solid var(--rule); padding-top: 8px; margin-top: 4px; }
.conn-code { max-height: 220px; overflow: auto; font: 0.75rem/1.45 var(--mono); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 10px; white-space: pre; }
.conn-help summary, .conn-card details summary { cursor: pointer; font-weight: 600; margin: 4px 0; }

/* ---- Home: sidebar of projects + one big prompt box ---- */
.home-body { min-height: 100vh; }
.home-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side { background: #0C090B; border-right: 1px solid var(--rule); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; }
.side-top .wordmark { font-size: 1.25rem; text-decoration: none; }
.side-toggle { display: none; background: none; border: 0; color: var(--ink); padding: 6px; border-radius: 8px; cursor: pointer; }
.side-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 12px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.side-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--graphite); flex: none; }
.side-link:hover, .side-link[aria-current="page"] { background: var(--raised); color: var(--ink); }
.side-h { font-family: var(--body); font-size: 0.75rem; font-weight: 600; color: var(--graphite); letter-spacing: 0.02em; margin: 10px 10px 4px; }
.side-list { list-style: none; margin: 0 0 8px; padding: 0; }
.side-list a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 0.88rem; }
.side-list a:hover { background: var(--raised); }
.side-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--rule-strong); }
.dot-live { background: var(--ok); }
.dot-suspended { background: var(--fault); }
.side-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.side-credits { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: linear-gradient(135deg, rgba(200, 16, 46, 0.22), rgba(255, 178, 36, 0.08)); color: var(--ink); text-decoration: none; font-size: 0.88rem; }
.side-credits span { color: var(--graphite); font-size: 0.78rem; }
.side-credits:hover { border-color: var(--rule-strong); color: var(--ink); }
.side-out { font-size: 0.82rem; color: var(--graphite); padding: 4px 12px; }
.home-main { position: relative; min-width: 0; padding: 16px 24px 48px; background:
  radial-gradient(60% 45% at 50% 100%, rgba(255, 106, 0, 0.55), transparent 70%),
  radial-gradient(70% 55% at 20% 85%, rgba(200, 16, 46, 0.75), transparent 70%),
  radial-gradient(70% 55% at 85% 80%, rgba(255, 46, 91, 0.7), transparent 70%),
  radial-gradient(55% 45% at 50% 40%, rgba(120, 20, 60, 0.55), transparent 75%),
  #0B080A;
  background-attachment: fixed; }
.home-main .flash, .home-notice { max-width: 760px; margin: 0 auto 12px; }
.hero-build { min-height: calc(100vh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 0; }
.hero-build h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 22px; }
.hb-box { width: 100%; max-width: 720px; background: rgba(19, 16, 19, 0.92); border: 1px solid var(--rule-strong); border-radius: 22px; padding: 16px 16px 12px 20px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); text-align: left; backdrop-filter: blur(6px); }
.hb-box:focus-within { border-color: #FF4D6A; }
.hb-box textarea { width: 100%; border: 0; background: transparent; color: var(--ink); font: 400 1.05rem/1.5 var(--body); resize: none; padding: 0; min-height: 3.2em; box-shadow: none; }
.hb-box textarea:focus { outline: none; box-shadow: none; }
.hb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.hb-hint { color: var(--graphite); font-size: 0.8rem; }
.hb-go { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #FF2E5B; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.hb-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hb-go:hover { background: #FF4D6A; }
.hb-ideas { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 720px; }
.hb-ideas button { background: rgba(19, 16, 19, 0.7); border: 1px solid var(--rule-strong); color: var(--ink); border-radius: 999px; padding: 7px 14px; font: 500 0.85rem var(--body); cursor: pointer; }
.hb-ideas button:hover { border-color: #FF4D6A; }
.home-tpl { max-width: 1100px; margin: 0 auto; background: rgba(9, 7, 10, 0.88); border: 1px solid var(--rule); border-radius: 20px; padding: 22px 22px 26px; }
.home-tpl .tpl-head { margin-top: 0; }
.home-tpl .tpl-body h3 { margin: 0; font-size: 1.05rem; }
@media (max-width: 800px) {
  .home-shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: sticky; top: 0; height: auto; z-index: 20; border-right: 0; border-bottom: 1px solid var(--rule); }
  .side-top { padding: 10px 16px; }
  .side-toggle { display: block; }
  .side-body { display: none; max-height: calc(100vh - 56px); }
  .side.open .side-body { display: flex; }
  .home-main { padding: 12px 16px 40px; }
  .hero-build { min-height: calc(100vh - 120px); padding: 24px 0; }
  .hb-hint { display: none; }
  .home-tpl { padding: 16px; }
}
.ai-left { font-size: 1.4rem; margin-bottom: 4px; }
.ai-left.low strong { color: var(--fault); }
.row-tight { display: flex; gap: 8px; align-items: center; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: 12px 0; }
.free-row{display:flex;align-items:center;gap:.4rem}.free-row input{flex:1;min-width:0}

/* In-app confirm / prompt dialogs (dialog.js) */
.hx-dialog { border: 1px solid var(--rule-strong); border-radius: 14px; background: var(--raised); color: var(--ink); padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); animation: hx-dlg-in .14s ease-out; }
.hx-dialog::backdrop { background: rgba(5, 3, 5, 0.72); backdrop-filter: blur(3px); }
.hx-dialog.out { opacity: 0; transform: scale(.98); transition: opacity .12s, transform .12s; }
.hx-dlg-body { padding: 22px 22px 18px; margin: 0; }
.hx-dlg-title { font: 700 1.15rem/1.3 var(--display); margin: 0 0 8px; }
.hx-dlg-text { margin: 0 0 10px; color: var(--graphite); overflow-wrap: anywhere; }
.hx-dlg-input { width: 100%; margin-top: 4px; }
.hx-dlg-err { color: var(--fault); font-size: .875rem; margin: 6px 0 0; min-height: 1em; }
.hx-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.btn-danger-solid { background: var(--blood); border-color: var(--blood); color: #fff; }
.btn-danger-solid:hover { background: var(--blood-deep); border-color: var(--blood-deep); }
@keyframes hx-dlg-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hx-dialog { animation: none; } .hx-dialog.out { transition: none; } }

/* Little "?" help icons with a hover/focus bubble */
.power { display: flex; align-items: center; gap: 6px; }
.hint-tip { position: relative; display: inline-flex; }
.hint-q { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--rule-strong); background: none; color: var(--graphite); font: 700 0.75rem/1 var(--body); cursor: help; display: grid; place-items: center; }
.hint-q:hover, .hint-q:focus-visible, .hint-tip.open .hint-q { color: var(--ink); border-color: var(--pencil); }
.hint-bubble { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px); width: 260px; padding: 10px 12px; border-radius: 10px; background: var(--raised); border: 1px solid var(--rule-strong); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); color: var(--graphite); font-size: 0.82rem; line-height: 1.45; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 45; pointer-events: none; }
.hint-bubble strong { color: var(--ink); }
.hint-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--rule-strong); }
.hint-tip:hover .hint-bubble, .hint-q:focus-visible + .hint-bubble, .hint-tip.open .hint-bubble { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (max-width: 700px) { .hint-bubble { left: auto; right: -8px; transform: translateY(4px); } .hint-tip:hover .hint-bubble, .hint-q:focus-visible + .hint-bubble, .hint-tip.open .hint-bubble { transform: none; } .hint-bubble::after { left: auto; right: 13px; } }

/* Email panel */
.mail-steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.mail-steps li { padding-left: 2px; }
.mini-select { font: inherit; font-size: 0.85rem; padding: 2px 4px; min-height: 0; width: auto; display: inline-block; }
.check-line { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.check-line input { width: auto; margin: 0; }
#mail-setup .seg { flex-wrap: wrap; align-self: flex-start; }
.more-table td.mail-acts { white-space: normal; }
.mail-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.more-table .mail-acts > * + * { margin-left: 0; }
.more-card .more-scroll + .more-form { margin-top: 12px; }
.billing-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 32px; }
.billing-actions h2 { margin-top: 0; }
.plan-choose { text-align: right; white-space: nowrap; }
.plan-current { font-weight: 700; color: var(--graphite); }