:root { color-scheme: dark; --bg: #0c0d10; --panel: #14161b; --line: #2b2d35; --muted: #a4a7b2; --ink: #f5f5f7; --accent: #ffa168; font: 15px/1.5 Inter, system-ui, sans-serif; background: var(--bg); color: var(--ink); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
[hidden] { display: none !important; }
button, textarea, input { font: inherit; color: inherit; }
button, .attach { border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; background: var(--panel); cursor: pointer; }
button:hover:not(:disabled), .attach:hover { border-color: #858894; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible, .attach:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.primary { color: #211007; background: var(--accent); border-color: var(--accent); font-weight: 650; }
.top { min-height: 65px; padding: 8px 20px; display: flex; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); }
.brand { width: 75px; height: 42px; display: grid; place-items: center; overflow: hidden; }
.brand img { width: 88px; margin-block: -24px; }
.workspace-name { color: var(--muted); border-left: 1px solid var(--line); padding-left: 16px; }
.top-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 370px); height: calc(100dvh - 65px); }
.preview, .chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.preview-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.view-buttons { display: flex; gap: 5px; }
.view-buttons button { font-size: 13px; padding: 4px 8px; }
.view-buttons [aria-pressed=true] { background: #30333d; }
.canvas { min-height: 0; flex: 1; display: grid; place-items: stretch center; padding: clamp(12px, 2.5vw, 34px); background: #101116; }
#preview, .empty { width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 11px; }
#preview { background: white; }
#preview.mobile { max-width: 390px; }
.empty { display: grid; align-content: center; justify-items: center; padding: 18px; text-align: center; background: #17191f; }
.empty h1 { margin: 16px 0 5px; font-size: clamp(20px, 3vw, 34px); letter-spacing: -.04em; }
p { margin: 0; }
.empty p, .chat-heading p, #attachments, [role=status] { color: var(--muted); }
.window-icon { width: 62px; height: 47px; border: 1px solid #4d505e; border-radius: 8px; background: #272a34; }
.window-icon span { display: block; width: 100%; height: 13px; border-bottom: 1px solid #4d505e; }
.chat { border-left: 1px solid var(--line); }
.chat-heading { padding: 20px; border-bottom: 1px solid var(--line); }
h2 { font-size: 19px; margin: 0 0 4px; }
.messages { flex: 1; overflow: auto; padding: 16px; }
.message { margin-bottom: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.suggestion { font-size: 13px; text-align: left; }
#composer { padding: 14px; border-top: 1px solid var(--line); }
textarea, input:not([type=file]) { display: block; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
textarea { resize: vertical; max-height: 26vh; }
.composer-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; }
.attach { position: relative; }
.attach input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
[role=status]:not(:empty) { margin-top: 8px; font-size: 13px; }
dialog { width: min(440px, calc(100% - 24px)); border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); padding: 22px; }
dialog::backdrop { background: #000a; }
.dialog-close { float: right; }
dialog form:not(.dialog-close) { display: grid; gap: 8px; margin-top: 14px; }
.price { color: var(--accent); font-size: 25px; margin-bottom: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 730px) {
  .workspace { display: flex; flex-direction: column; height: auto; }
  .preview { height: 47vh; min-height: 265px; }
  .chat { border-left: 0; border-top: 1px solid var(--line); min-height: 430px; }
  .messages { max-height: 290px; }
  .workspace-name { display: none; }
  .top { padding-inline: 10px; }
}

/* Glass workspace over the night-sky wallpaper. */
:root {
  --bg: #0c1426;
  --panel: #28364e80;
  --line: #c4d6ff38;
  --muted: #bec9df;
  --accent: #b9ddff;
}
body {
  background: linear-gradient(#09122436, #0b142758), url('/builder-night-sky.jpg') center / cover fixed, var(--bg);
}
.top { border: 0; padding-inline: clamp(14px, 2vw, 30px); }
.workspace {
  gap: 14px;
  padding: 0 16px 16px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 365px);
}
.preview, .chat {
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 #e1eaff25, 0 12px 38px #04091655;
}
.preview { background: #19243d46; backdrop-filter: blur(4px); }
.chat, dialog { background: #141f36bd; backdrop-filter: blur(22px); }
.preview-bar, .chat-heading { background: #a8c5ff10; }
.canvas { background: transparent; }
.empty { border: 0; background: transparent; }
.empty h1 { text-shadow: 0 2px 15px #020610; }
.empty p { color: #d0d9eb; }
.window-icon, .chat-icon {
  background: linear-gradient(145deg, #d3e9ff77, #5e76b966);
  border: 1px solid #deebff68;
  box-shadow: inset 0 1px 1px #fff6, 0 7px 18px #030b2370;
}
.window-icon { border-radius: 14px; backdrop-filter: blur(10px); }
.window-icon span { border-color: #deebff59; }
.chat-icon { display: inline-grid; width: 29px; height: 29px; place-items: center; border-radius: 10px; margin-right: 4px; color: #edf7ff; }
button, .attach {
  border-radius: 999px;
  background: linear-gradient(180deg, #bcd6ff29, #829ac10e);
  box-shadow: inset 0 1px 0 #e7efff29;
}
#account, .primary {
  background: linear-gradient(#f5faff, #bfdcff);
  color: #132640;
  border-color: #e4f3ff;
  font-weight: 650;
}
.view-buttons { padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: #0c14275c; }
.view-buttons button { border-color: transparent; }
.view-buttons [aria-pressed=true] { background: #abbce748; }
.message.assistant { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 9px; padding-block: 5px; }
.reply-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #a8c5ff22; color: var(--accent); font-size: 14px; }
.message.user { width: fit-content; max-width: 90%; margin-left: auto; padding: 10px 13px; background: #41649c55; border: 1px solid var(--line); border-radius: 16px 16px 5px 16px; }
textarea, input:not([type=file]) { border-radius: 14px; background: #0b142659; }
button:hover:not(:disabled), .attach:hover { filter: brightness(1.13); }
@media (prefers-reduced-motion: no-preference) {
  button, .attach { transition: transform 160ms ease, filter 160ms ease; }
  button:active:not(:disabled), .attach:active { transform: scale(.96); }
}
@media (max-width: 730px) {
  .workspace { padding-inline: 10px; gap: 10px; }
  .preview, .chat { border-radius: 18px; }
}

.build-activity { margin-top: 10px; padding: 6px 0; }
#build-label { display: inline-block; }
.build-activity ol { list-style: none; padding: 0; margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.build-activity li + li { margin-top: 8px; }
.build-activity li { padding-left: 14px; position: relative; }
.build-activity li::before { content: "•"; position: absolute; left: 0; opacity: .65; }
.build-activity .writing-row { font-variant-numeric: tabular-nums; }
.build-activity:not(.thinking) #build-label { color: var(--muted); font-weight: 500; }
.build-activity.thinking li:last-child { color: var(--ink); font-weight: 600; }
.build-activity details { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.build-activity summary { cursor: pointer; font-weight: 600; }
#diff-lines {
  overflow: auto;
  max-height: 230px;
  background: #0b1323;
  border-radius: 8px;
  padding: 8px 0;
  margin-bottom: 0;
  font: 12px/1.6 "IBM Plex Mono", monospace;
}
#diff-lines span { display: block; width: max-content; min-width: 100%; padding-inline: 8px; }
.diff-added { color: #91e9b2; }
#diff-lines .diff-added { background: #1e5c3338; }
.diff-removed { color: #ffa0a8; }
#diff-lines .diff-removed { background: #712c383d; }
@media (prefers-reduced-motion: no-preference) {
  .build-activity.thinking #build-label {
    background-image: linear-gradient(100deg, #a6b3ca 35%, #fff 50%, #a6b3ca 65%);
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: build-glow 1.65s linear infinite;
  }
}
@keyframes build-glow {
  from { background-position: 100% center; }
  to { background-position: 0% center; }
}

#auth-description { color: var(--muted); }
.auth-name-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#auth-form label input, .auth-password-control { margin-top: 5px; }
.auth-password-control { display: flex; align-items: center; gap: 8px; }
.auth-password-control input { min-width: 0; }
#password-feedback { color: var(--muted); font-size: 13px; margin-top: 5px; }
#password-strength { width: 100%; }
.auth-links { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-links button { box-shadow: none; background: transparent; border-color: transparent; color: var(--accent); padding: 5px 2px; }
.auth-code-control { position: relative; margin-top: 8px; }
.auth-code-control #code { position: absolute; inset: 0; height: 100%; opacity: 0; cursor: text; }
.auth-code-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; pointer-events: none; }
.auth-code-boxes span { display: grid; place-items: center; min-height: 45px; border: 1px solid var(--line); border-radius: 9px; background: #0b142659; font-size: 20px; }
.auth-code-control:focus-within .active { outline: 2px solid var(--accent); }

:root {
  font-family: "Figtree", system-ui, sans-serif;
  --panel-glass: #121f36a8;
  --preview-glass: #19243d46;
  --edge-light: #edf5ff47;
  --glint: #dcecff24;
  --field-glass: #09122565;
  --surface-tint: #a8c5ff10;
  --pill-top: #daebff38;
  --pill-bottom: #91abd11a;
  --primary-top: #f5faff;
  --primary-bottom: #bfdcff;
  --primary-ink: #132640;
  --icon-ink: #edf7ff;
  --shimmer-base: #a6b3ca;
  --shimmer-glint: #fff;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e9f1fc;
  --panel: #f7fbffe0;
  --line: #4c729333;
  --ink: #172c45;
  --muted: #496481;
  --accent: #245b91;
  --panel-glass: #f1f7ffb5;
  --preview-glass: #eff7ff73;
  --edge-light: #fff;
  --glint: #ffffff8c;
  --field-glass: #ffffffac;
  --surface-tint: #ffffffe0;
  --pill-top: #fff;
  --pill-bottom: #daeafd94;
  --primary-top: #d4eaff;
  --primary-bottom: #a6cdf6;
  --primary-ink: #102e53;
  --icon-ink: #1d5182;
  --shimmer-base: #537091;
  --shimmer-glint: #163859;
}
[data-theme="light"] body {
  background: linear-gradient(135deg, #eef8ff32, #d9edff0a 65%, #f5fbff35), url('/builder-day-sky.jpg') center / cover fixed, var(--bg);
}
[data-theme="light"] .brand img { filter: brightness(0) saturate(100%) opacity(.87); }
.top { background: linear-gradient(var(--glint), transparent); }
.preview, .chat, dialog {
  border-color: var(--edge-light);
  box-shadow: inset 0 1px 0 var(--edge-light), inset 0 -1px 0 var(--line), 0 14px 38px #081b3530;
}
.preview { background: var(--preview-glass); }
.chat, dialog { background: linear-gradient(145deg, var(--glint), transparent 60%), var(--panel-glass); backdrop-filter: blur(24px) saturate(145%); }
.preview-bar, .chat-heading { background: var(--surface-tint); }
.empty h1, h2 { font-weight: 600; letter-spacing: -.035em; }
.empty h1 { font-size: clamp(25px, 3.25vw, 42px); text-shadow: none; line-height: 1.05; }
h2 { font-size: 23px; line-height: 1.2; }
dialog h2 { font-size: clamp(29px, 4vw, 39px); overflow-wrap: anywhere; padding-right: 36px; }
.empty p, [data-theme="light"] .empty p { color: var(--muted); }
.window-icon, .chat-icon { color: var(--icon-ink); }
button, .attach { background: linear-gradient(var(--pill-top), var(--pill-bottom)); }
#account, .primary { background: linear-gradient(var(--primary-top), var(--primary-bottom)); color: var(--primary-ink); border-color: var(--edge-light); }
#theme-toggle { display: grid; place-items: center; min-width: 39px; padding: 5px; font-size: 19px; line-height: 1; }
.view-buttons, textarea, input:not([type=file]), .auth-code-boxes span { background: var(--field-glass); }
[data-theme="light"] .view-buttons [aria-pressed=true], [data-theme="light"] .message.user { background: #8bb8e549; }
[data-theme="light"] .reply-icon { background: #7eb4ec43; }
[data-theme="light"] #diff-title .diff-added { color: #216643; }
[data-theme="light"] #diff-title .diff-removed { color: #a4284c; }
#password-strength { height: 8px; border-radius: 999px; background: var(--field-glass); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
#password-strength span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transform-origin: left;
  transform: scaleX(var(--strength-fill, 0));
  background-color: var(--strength-color, #76849b);
  box-shadow: inset 0 1px 2px #fff8;
}
@media (prefers-reduced-motion: no-preference) {
  #password-strength span { transition: transform 500ms cubic-bezier(.2,.85,.27,1), background-color 360ms ease; }
  .build-activity.thinking #build-label { background-image: linear-gradient(100deg, var(--shimmer-base) 35%, var(--shimmer-glint) 50%, var(--shimmer-base) 65%); }
}

/* Keep the divider between the panes in either order. */
.workspace {
  --divider-size: 16px;
  --chat-track: clamp(290px, var(--chat-width, 365px), calc(100% - 320px - var(--divider-size)));
  grid-template-columns: minmax(0, 1fr) var(--divider-size) var(--chat-track);
  gap: 0;
}
.workspace[data-swapped] { grid-template-columns: var(--chat-track) var(--divider-size) minmax(0, 1fr); }
#pane-divider {
  display: grid;
  place-items: center;
  cursor: col-resize;
  touch-action: none;
  border-radius: 999px;
}
#pane-divider::before {
  content: "";
  width: 4px;
  height: 42px;
  border-radius: 999px;
  background: var(--muted);
  opacity: .55;
}
#pane-divider:hover::before, #pane-divider:focus-visible::before, .workspace.resizing #pane-divider::before { opacity: 1; }
.workspace.resizing { user-select: none; cursor: col-resize; }
.workspace.resizing iframe { pointer-events: none; }
@media (max-width: 730px) {
  .workspace, .workspace[data-swapped] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: max(760px, calc(100dvh - 65px));
  }
  .workspace {
    --chat-track: clamp(400px, var(--chat-height, 54%), calc(100% - 260px - var(--divider-size)));
    grid-template-rows: minmax(0, 1fr) var(--divider-size) var(--chat-track);
  }
  .workspace[data-swapped] { grid-template-rows: var(--chat-track) var(--divider-size) minmax(0, 1fr); }
  .workspace .preview, .workspace .chat { height: auto; min-height: 0; }
  .workspace .messages { max-height: none; }
  #pane-divider, .workspace.resizing { cursor: row-resize; }
  #pane-divider::before { width: 42px; height: 4px; }
  #swap-panes span { display: none; }
}

.app-body:has(.app-dock:not([hidden])) { padding-bottom: 100px; }
.top-home {
  display: inline-flex; align-items: center; flex: none; gap: 8px;
  padding: 6px 12px 6px 7px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel-glass); color: var(--ink); text-decoration: none; font-weight: 650;
}
.top-home:hover, .top-home[aria-current] {
  border-color: var(--accent); background: var(--panel);
}
.top-home .dock-icon { width: 26px; height: 26px; border-radius: 8px; }
.top-home .dock-icon i { width: 17px; height: 17px; }
.top-home .dock-icon i::after { inset: 5px 3px 1px; }
#app-content { min-width: 0; }
.app-dock {
  position: fixed; z-index: 4; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%;
  translate: -50% 0; display: grid; grid-template-columns: repeat(6, minmax(0, 64px)); gap: 5px;
  width: max-content; max-width: calc(100% - 20px);
  padding: 8px 5px; border: 1px solid var(--edge-light); border-radius: 23px;
  background: linear-gradient(150deg, var(--glint), transparent 70%), var(--panel-glass);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--glint), 0 12px 30px #081b352b;
}
.app-dock a { display: grid; justify-items: center; gap: 4px; padding: 5px 1px; border-radius: 15px; text-decoration: none; color: var(--ink); font-size: 11px; font-weight: 650; }
.app-dock a:hover, .app-dock a[aria-current] { background: var(--surface-tint); }
.dock-icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid #ffffff8c; color: white; font-size: 25px; line-height: 1;
  background: linear-gradient(145deg, #ffffff72, transparent 49%), linear-gradient(170deg, var(--tile-top), var(--tile-bottom));
  box-shadow: inset 0 1px 2px #fff8, inset 0 -2px 4px #11245150, 0 4px 9px #08122666;
  text-shadow: 0 1px 3px #10284f88;
}
[data-nav=home] { --tile-top: #63b8ff; --tile-bottom: #1764e9; }
[data-nav=build] { --tile-top: #46e5e0; --tile-bottom: #12809c; }
[data-nav=hosting] { --tile-top: #7ca3ff; --tile-bottom: #414dd4; }
[data-nav=domains] { --tile-top: #a98fff; --tile-bottom: #704ac9; }
[data-nav=customers] { --tile-top: #ff91bd; --tile-bottom: #d63c79; }
[data-nav=ads] { --tile-top: #ffbb67; --tile-bottom: #d96b15; }
.dashboard { margin: 0 16px 16px; min-height: 410px; padding: clamp(18px, 4vw, 52px); border: 1px solid var(--edge-light); border-radius: 24px; background: var(--panel-glass); backdrop-filter: blur(20px); }
.dashboard h1 { margin: 0; font-size: clamp(28px, 5vw, 48px); letter-spacing: -.05em; line-height: 1.1; }
.dashboard p { color: var(--muted); margin-top: 8px; max-width: 56ch; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; max-width: 750px; }
.dashboard-build, .dashboard-grid a, .dashboard-card { border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(155deg, var(--glint), transparent 80%), var(--panel); padding: clamp(12px, 2.4vw, 22px); }
.dashboard-build, .dashboard-grid a { display: grid; gap: 3px; color: var(--ink); text-decoration: none; }
.dashboard-build { max-width: 750px; margin-block: 22px 11px; }
.dashboard-grid a:hover, .dashboard-build:hover { border-color: var(--accent); }
.dashboard span { color: var(--muted); overflow-wrap: anywhere; }
.dashboard-card { margin-top: 18px; max-width: 620px; }
.dashboard-card a { display: inline-block; margin-top: 14px; color: var(--accent); }
.dashboard-card button { margin: 14px 9px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .dock-icon { transition: transform 200ms cubic-bezier(.2,.8,.25,1.3); }
  .app-dock a:hover .dock-icon, .app-dock a:focus-visible .dock-icon { transform: scale(1.12); }
  .app-dock a:active .dock-icon { transform: scale(.94); }
}
@media (max-width: 810px) {
  .workspace, .workspace[data-swapped] { display: grid; grid-template-columns: minmax(0, 1fr); height: max(760px, calc(100dvh - 65px)); }
  .workspace { --chat-track: clamp(400px, var(--chat-height, 54%), calc(100% - 260px - var(--divider-size))); grid-template-rows: minmax(0, 1fr) var(--divider-size) var(--chat-track); }
  .workspace[data-swapped] { grid-template-rows: var(--chat-track) var(--divider-size) minmax(0, 1fr); }
  .workspace .preview, .workspace .chat { height: auto; min-height: 0; }
  #pane-divider, .workspace.resizing { cursor: row-resize; }
  #pane-divider::before { width: 42px; height: 4px; }
}
@media (max-width: 480px) {
  .app-dock { padding: 6px 2px; }
  .dock-icon { width: 34px; height: 34px; font-size: 20px; }
  .app-dock a { font-size: 9px; }
  .dashboard { margin-inline: 6px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}

.dock-icon i {
  --icon-stroke: #edfaff;
  --icon-fill: linear-gradient(150deg, #ffffffce, #d6edff76);
  position: relative;
  display: block;
  width: 25px;
  height: 25px;
  filter: drop-shadow(0 2px 2px #11245170);
}
.dock-icon i::before, .dock-icon i::after { position: absolute; content: ""; box-sizing: border-box; }
[data-nav=home] .dock-icon i::before {
  inset: 0;
  background: var(--icon-fill);
  clip-path: polygon(50% 3%, 100% 43%, 91% 55%, 50% 21%, 9% 55%, 0 43%);
}
[data-nav=home] .dock-icon i::after {
  inset: 7px 4px 2px;
  background: var(--icon-fill);
  clip-path: polygon(50% 0, 100% 44%, 100% 100%, 62% 100%, 62% 65%, 38% 65%, 38% 100%, 0 100%, 0 44%);
}
[data-nav=build] .dock-icon i::before {
  inset: 2px 0;
  border: 2px solid var(--icon-stroke);
  border-radius: 5px;
  background: linear-gradient(#ffffff91 0 29%, transparent 29%);
}
[data-nav=build] .dock-icon i::after {
  inset: 12px 5px 6px;
  border-radius: 1px;
  background: linear-gradient(90deg, #fff 60%, transparent 60% 74%, #ffffffa9 74%);
}
[data-nav=hosting] .dock-icon i::before, [data-nav=hosting] .dock-icon i::after {
  inset: 2px 0 auto;
  height: 9px;
  border: 1px solid var(--icon-stroke);
  border-radius: 3px;
  background: radial-gradient(circle at 18% 50%, #fff 0 1px, transparent 1.5px), #ffffff47;
}
[data-nav=hosting] .dock-icon i::after { top: 14px; }
[data-nav=domains] .dock-icon i {
  border: 2px solid var(--icon-stroke);
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff48, transparent);
}
[data-nav=domains] .dock-icon i::before { inset: -2px 4px; border: 1.5px solid var(--icon-stroke); border-radius: 50%; }
[data-nav=domains] .dock-icon i::after { inset: 6px 0; border-block: 1.5px solid var(--icon-stroke); }
[data-nav=customers] .dock-icon i::before {
  top: 2px; left: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--icon-stroke); box-shadow: 9px 2px 0 -1px #edcce0;
}
[data-nav=customers] .dock-icon i::after {
  bottom: 3px; left: 1px; width: 14px; height: 10px; border-radius: 8px 8px 3px 3px;
  background: var(--icon-fill); box-shadow: 10px 0 0 -1px #edcce0;
}
[data-nav=ads] .dock-icon i::before {
  inset: 3px 1px 7px 0;
  background: var(--icon-fill);
  clip-path: polygon(0 27%, 35% 27%, 100% 0, 100% 100%, 35% 74%, 0 74%);
}
[data-nav=ads] .dock-icon i::after {
  bottom: 1px; left: 7px; width: 4px; height: 9px; border-radius: 2px;
  transform: rotate(-17deg); background: var(--icon-stroke);
}
@media (max-width: 480px) { .dock-icon i { transform: scale(.82); } }

#clear-images { margin-top: 6px; font-size: 12px; }

[data-nav=pricing] { --tile-top: #6ddbb2; --tile-bottom: #20916b; }
.dashboard > p a { color: var(--accent); }
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; max-width: 920px; }
.pricing-grid .dashboard-card { margin: 0; max-width: none; }
.pricing-grid h2 { font-size: 18px; }
.pricing-grid .offer-price { color: var(--ink); }
.offer-price strong { font-size: 29px; letter-spacing: -.04em; }
.pricing-full { grid-column: 1 / -1; }
@media (max-width: 610px) { .pricing-grid { grid-template-columns: minmax(0, 1fr); } }

#build-offer .offer-note { color: var(--muted); margin-top: 12px; }

.app-body:has(.app-dock:not([hidden])) #app-content {
  display: grid;
  align-items: center;
  min-height: calc(100dvh - 165px);
}
.service-dashboard {
  width: min(680px, calc(100% - 24px));
  margin: clamp(12px, 3vh, 32px) auto;
  min-height: 0;
  text-align: center;
}
.service-dashboard > p { margin-inline: auto; }
.service-dashboard h2 { margin: 0; }
.service-dashboard .service-card {
  display: grid;
  gap: 16px;
  width: min(100%, 460px);
  margin: 24px auto 0;
  text-align: left;
}
.service-card > p, .service-card > button { margin: 0; }
.service-card .primary { width: 100%; }
.home-dashboard :is(.dashboard-build, .dashboard-grid) { text-align: left; }
.service-dashboard.pricing-dashboard { width: min(900px, calc(100% - 24px)); }
.maintenance-note {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-tint);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.service-dashboard > .maintenance-note { margin-top: 18px; }
.pricing-grid { text-align: left; }
.pricing-grid .dashboard-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pricing-grid .dashboard-card .primary { margin: auto 0 0; margin-top: auto; width: 100%; }
.pricing-grid .dashboard-card p:last-of-type { margin-bottom: 14px; }
#stripe-checkout {
  width: min(980px, calc(100% - 24px));
  max-height: 90dvh;
  padding: clamp(18px, 3vw, 32px);
  background: var(--bg);
}
#stripe-checkout #checkout-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: start;
  gap: clamp(20px, 4vw, 44px);
  margin-top: 24px;
}
#stripe-checkout #checkout-form[hidden],
#checkout-renewal[hidden] { display: none; }
.checkout-fields h3 { margin: 0 0 12px; font-size: 16px; }
.checkout-fields h3:not(:first-child) { margin-top: 24px; }
.checkout-summary {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-glass);
  padding: clamp(16px, 3vw, 28px);
}
.checkout-summary h3 { margin: 0; font-size: 24px; }
.checkout-summary dl { margin-block: 20px; }
.checkout-summary dl div { display: flex; justify-content: space-between; gap: 12px; margin-block: 10px; }
.checkout-summary dd { margin: 0; }
.checkout-total { border-top: 1px solid var(--line); padding-top: 14px; font-weight: 650; }
#checkout-renewal {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-block: 18px;
  color: var(--muted);
  line-height: 1.45;
}
#checkout-consent { width: auto; margin: 3px 0 0; }
#checkout-submit { width: 100%; }
.checkout-summary img { display: block; margin: 14px auto 0; }
@media (max-width: 680px) {
  #stripe-checkout #checkout-form { grid-template-columns: minmax(0, 1fr); }
}
.subscription-alternative {
  color: var(--accent);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.service-card .subscription-alternative,
.checkout-summary .subscription-alternative {
  display: block;
  margin: 8px 0 0;
  text-align: center;
}
#build-offer-monthly { display: inline-block; margin-top: 10px; }
.service-card .service-pricing-link {
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}
.service-card .service-pricing-link:hover { filter: brightness(1.1); }
.pricing-grid .growth-plan { border-color: var(--accent); }
.pricing-grid .plan-badge {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-tint);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
#buy-build-offer { margin-top: 15px; width: 100%; }

.checkout-billing, .checkout-billing label { display: grid; gap: 6px; }
.checkout-billing { gap: 12px; }
.checkout-billing label { font-size: 14px; font-weight: 500; }
.checkout-billing input, .checkout-billing select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--bg);
  font: inherit;
}
.checkout-address-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#checkout-address-details:not([hidden]) { display: grid; gap: 12px; }
#stripe-card-fields { color-scheme: inherit; border-radius: 10px; }
#stripe-card-fields iframe { background: transparent !important; }
#stripe-checkout { border-radius: 20px; box-shadow: 0 22px 72px #0005; }
.checkout-billing :is(input, select) { transition: border-color .18s, background-color .18s; }
.checkout-billing :is(input, select):focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg), var(--accent) 6%);
}
@media (prefers-reduced-motion: no-preference) {
  #stripe-checkout[open] { animation: checkout-enter .24s ease-out both; }
  #checkout-address-details:not([hidden]) { animation: checkout-enter .22s ease-out both; }
  @keyframes checkout-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

.app-dock { grid-template-columns: repeat(7, minmax(0, 64px)); }
[data-nav=support] { --tile-top: #8bafff; --tile-bottom: #4b64cb; }
.landing { width: min(1160px, calc(100% - 36px)); margin: clamp(28px, 6vh, 72px) auto 24px; }
.landing-hero { text-align: center; margin: 0 auto clamp(30px, 5vw, 58px); }
.landing-hero h1 { margin: 0 0 18px; font-size: clamp(35px, 6vw, 72px); font-weight: 750; line-height: 1.02; letter-spacing: -.072em; }
.landing-hero h1 em {
  --headline-glow: #b4dbffb0;
  display: inline-block; color: var(--accent); font-style: normal;
  text-shadow: 0 0 10px var(--headline-glow);
}
:root[data-theme="light"] .landing-hero h1 em { --headline-glow: #f0faffc0; }
.landing-hero > p { max-width: 54ch; margin: 0 auto; color: var(--ink); font-size: clamp(15px, 2vw, 19px); }
.landing-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 22px; }
.landing-actions a { border: 1px solid var(--line); border-radius: 999px; padding: 10px 17px; text-decoration: none; }
.landing-actions .landing-cta {
  min-width: 136px;
  padding: 12px 24px;
  border-color: #1044a7;
  background: #1755c7;
  color: #fff;
  box-shadow: 0 5px 16px #08275e45;
  font-size: 16px;
  text-align: center;
}
.landing-cta span { margin-left: 8px; }
.landing-secondary { color: var(--ink); background: var(--panel-glass); }
.landing-actions .landing-support { border-color: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.landing-actions a:hover { filter: brightness(1.1); }

.agent-scene { width: min(840px, 100%); margin: 0 auto; text-align: center; }
.agent-demo {
  overflow: hidden; border: 1px solid #d1e2f5; border-radius: 18px;
  background: #f9fbff; color: #172c45; text-align: left;
  box-shadow: 0 24px 70px #09265138;
}
.agent-browser-bar {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 10px 14px; background: #eaf1fa; color: #415974; font-size: 12px;
}
.browser-dots { color: #758ca6; letter-spacing: 2px; white-space: nowrap; font-size: 9px; }
#agent-address { padding: 5px 10px; border-radius: 7px; background: #fff; text-align: center; }
.agent-views { position: relative; min-height: 285px; }
.agent-view { display: none; padding: 22px clamp(14px, 5vw, 48px); }
[data-step="0"] .agent-search, [data-step="1"] .agent-profile,
[data-step="2"] .agent-email, [data-step="3"] .agent-email,
[data-step="4"] .agent-build, [data-step="5"] .agent-ads { display: block; }
.agent-site { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding: 18px; border-radius: 13px; background: #f3e5cc; color: #503b2d; }
.agent-site h2, .agent-ads h2 { margin: 4px 0; font-size: clamp(22px, 4vw, 38px); letter-spacing: -.04em; }
.agent-site p { margin: 4px 0 12px; }
.agent-site > span { font-size: clamp(28px, 7vw, 58px); }
.agent-site div span { display: inline-block; padding: 5px 9px; border-radius: 20px; background: #6f4835; color: #fff; font-size: 12px; }
.agent-google { display: block; color: #245dcc; font-size: 26px; letter-spacing: -.05em; }
.agent-query { margin: 8px 0 12px; padding: 8px 12px; border: 1px solid #d2e0f2; border-radius: 999px; background: white; font-size: 14px; }
.agent-result { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid #e0eaf5; }
.agent-result strong { color: #1748ad; }
.agent-result small, .agent-profile small, .agent-email small { color: #50647d; }
.agent-result span, .agent-profile p, .agent-email p { font-size: 14px; }
.agent-profile h2 { margin: 4px 0; color: #214d41; font: 700 clamp(32px, 5vw, 56px)/1.08 Georgia, serif; }
.agent-contact { display: grid; gap: 4px; margin-top: 16px; padding: 12px; border-radius: 9px; background: #e3f1ed; }
.agent-email-field { display: flex; gap: 9px; margin-top: 8px; padding-bottom: 7px; border-bottom: 1px solid #e0eaf5; font-size: 13px; overflow-wrap: anywhere; }
.agent-email-field small { flex: 0 0 44px; }
#agent-email-action { display: inline-block; border-radius: 8px; padding: 6px 10px; background: #dceaff; color: #164498; font-size: 12px; font-weight: 700; }
.agent-cursor { position: absolute; left: 52%; top: 42%; z-index: 1; pointer-events: none; }
.agent-cursor i { display: block; width: 24px; height: 27px; background: #2675f0; clip-path: polygon(0 0, 92% 59%, 60% 63%, 75% 92%, 53% 100%, 38% 70%, 13% 92%); }
.agent-cursor b { display: block; margin: -3px 0 0 13px; padding: 4px 9px; border-radius: 999px; color: white; background: #175dcd; box-shadow: 0 5px 14px #09368159; font-size: 12px; white-space: nowrap; }
[data-step="1"] .agent-cursor { left: 70%; top: 54%; }
[data-step="2"] .agent-cursor { left: 58%; top: 48%; }
[data-step="3"] .agent-cursor { left: 45%; top: 70%; }
[data-step="4"] .agent-cursor { left: 68%; top: 36%; }
[data-step="5"] .agent-cursor { left: 53%; top: 59%; }
#landing-motion { margin-top: 12px; font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .agent-cursor { transition: left .55s cubic-bezier(.18,.88,.34,1.12), top .65s cubic-bezier(.22,.72,.3,1); }
  .agent-scene[data-playing] .agent-cursor { animation: agent-hover 1.6s ease-in-out infinite alternate; }
  .agent-view { animation: agent-view-enter .28s ease-out; }
  @keyframes agent-hover { to { transform: translateY(-5px) rotate(-3deg); } }
  @keyframes agent-view-enter { from { opacity: .2; transform: translateY(5px); } }
}
@media (max-width: 460px) {
  [data-step="1"] .agent-cursor { left: 62%; }
}
.support-card { margin-top: 20px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); padding: 15px; text-align: left; }
.support-agent { display: flex; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.support-agent > span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 12px; background: var(--surface-tint); color: var(--accent); font-weight: 750; }
.support-agent small { display: block; color: var(--muted); }
#support-threads { display: grid; gap: 5px; margin-top: 10px; }
#support-thread { padding: 8px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.support-messages { display: grid; align-content: start; gap: 10px; min-height: 76px; max-height: 300px; overflow-y: auto; padding-block: 12px; }
.support-message { width: fit-content; max-width: 90%; padding: 8px 11px; border-radius: 12px; background: var(--surface-tint); }
.support-message[data-author=customer] { justify-self: end; }
.support-message p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#support-form { display: grid; gap: 8px; }
#support-form textarea { width: 100%; }
#support-form .primary { justify-self: end; }