/*
 * The 2026-09 design (Claude Design canvas "AI on Artur.Work Design"): tokens, the app
 * shell (header + footer) and the landing / API docs pages.
 *
 * Loaded on every page. Pages still built on Bootstrap 3 + styles.css get the shell
 * only: everything here is under .aw-* classes, and the few bare-element rules in
 * styles.css that would leak into the shell (body padding, footer colours) are undone
 * under body.aw. Pages rendered with `modernPage` load this file alone.
 */

:root {
  --aw-bg: #faf9fc;
  --aw-surface: #ffffff;
  --aw-ink: #17131f;
  --aw-ink-2: #2b2438;
  --aw-prose: #4a4259;
  --aw-muted: #6f6683;
  --aw-line: #ebe7f2;
  --aw-line-2: #e6e1ef;
  --aw-line-soft: #f1eef6;
  --aw-accent: #6d2ed6;
  --aw-accent-hover: #5b21b6;
  --aw-accent-soft: #f3effb;
  --aw-accent-line: #c9b8f0;
  --aw-pink: #e0338f;
  --aw-link-hover: #c2258a;
  --aw-dark: #17131f;
  --aw-dark-2: #221c2e;
  --aw-dark-3: #2b2438;
  --aw-dark-ink: #e6e1ef;
  --aw-dark-muted: #c9c2d6;
  --aw-code-cm: #8a80a0;
  --aw-code-str: #f5a3cf;
  --aw-code-kw: #c9b8f0;
  --aw-ok: #7fd6a8;
  --aw-font: Manrope, "Segoe UI", Helvetica, Arial, sans-serif;
  --aw-display: "Bricolage Grotesque", "Arial Black", Arial, sans-serif;
  --aw-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --aw-gutter: 80px;
}

body.aw {
  margin: 0;
  padding: 0;
  max-width: none;
  background: var(--aw-bg);
  color: var(--aw-ink);
  font-family: var(--aw-font);
  -webkit-font-smoothing: antialiased;
}

.aw-modern a { color: var(--aw-accent); text-decoration: none; }
.aw-modern a:hover { color: var(--aw-link-hover); }
/* styles.css's `a { color: seagreen }` / `a:hover { color: lightseagreen }` (an old
   placeholder, never the brand colour) leaks onto any plain link inside the shared
   `.box` content wrapper of still-Bootstrap pages (privacy/retention/sla/terms,
   /service-status, 404, admin, auth, registered/complete). Scoped to `.box` rather
   than `body.aw a` generally: several one-class components here (.aw-chip, .aw-btn-*
   variants used as `<a>`) would lose to a bare `body.aw a` on specificity alone, and
   the same `.box` wrapper also holds real Bootstrap `.btn`s in admin/auth - excluded
   so this only ever touches genuine prose links. */
body.aw .box a:not(.btn):not([class*="aw-"]) { color: var(--aw-accent); text-decoration: none; }
body.aw .box a:not(.btn):not([class*="aw-"]):hover { color: var(--aw-link-hover); }
.aw-modern h1, .aw-modern h2, .aw-modern h3 {
  font-family: var(--aw-display); margin: 0; letter-spacing: -0.02em; color: var(--aw-ink);
}
.aw-modern p { margin: 0; }
.aw-modern *, .aw-modern *::before, .aw-modern *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ shared pieces */

.aw-mono { font-family: var(--aw-mono); font-size: 13.5px; }
.aw-eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--aw-accent);
}
.aw-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px;
  border-radius: 999px; background: var(--aw-surface); border: 1px solid var(--aw-line-2);
  font-family: var(--aw-mono); font-size: 12.5px; color: var(--aw-ink-2); white-space: nowrap;
}
.aw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  height: 56px; padding: 0 28px; border-radius: 14px; font-weight: 700; font-size: 17px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
body.aw .aw-btn-primary { background: var(--aw-accent); color: #fff; box-shadow: 0 10px 30px rgba(109, 46, 214, 0.28); }
body.aw .aw-btn-primary:hover { background: var(--aw-accent-hover); color: #fff; }
body.aw .aw-btn-ghost { background: var(--aw-surface); color: var(--aw-ink); border-color: var(--aw-line-2); font-weight: 600; font-size: 16px; padding: 0 24px; }
body.aw .aw-btn-ghost:hover { color: var(--aw-accent); border-color: var(--aw-accent-line); }
body.aw .aw-btn-dark { gap: 0; height: 44px; padding: 0 20px; border-radius: 10px; background: var(--aw-dark); color: #fff; font-size: 15px; }
body.aw .aw-btn-dark:hover { background: var(--aw-dark-3); color: #fff; }

.aw-card {
  background: var(--aw-surface); border: 1px solid var(--aw-line); border-radius: 20px;
  padding: 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.aw-card h3 { font-size: 22px; font-weight: 700; line-height: 1.2; }
.aw-card p { color: var(--aw-prose); line-height: 1.55; font-size: 15.5px; text-wrap: pretty; }
.aw-icon {
  display: inline-flex; flex-shrink: 0; width: 44px; height: 44px; align-items: center;
  justify-content: center; border-radius: 12px; background: var(--aw-accent-soft);
}
.aw-icon svg { width: 22px; height: 22px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aw-icon.pink { background: #fcecf4; } .aw-icon.pink svg { stroke: var(--aw-pink); }
.aw-icon.green { background: #e8f7ef; } .aw-icon.green svg { stroke: #1f9d61; }
.aw-icon.blue { background: #e9f1fb; } .aw-icon.blue svg { stroke: #2e8bd6; }
.aw-icon.orange { background: #fdf1e6; } .aw-icon.orange svg { stroke: #d97a1c; }
.aw-icon.dark { background: var(--aw-dark); } .aw-icon.dark svg { stroke: #fff; }
.aw-icon svg { stroke: var(--aw-accent); }

.aw-code {
  font-family: var(--aw-mono); font-size: 13.5px; line-height: 1.6; color: var(--aw-dark-ink);
  white-space: pre; overflow-x: auto; margin: 0; background: none; border: 0; padding: 0;
}
.aw-code .cm { color: var(--aw-code-cm); }
.aw-code .str { color: var(--aw-code-str); }
.aw-code .kw { color: var(--aw-code-kw); }

.aw-table { border-collapse: collapse; width: 100%; font-size: 15px; }
.aw-table th {
  text-align: left; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--aw-muted); font-weight: 700; padding: 0 16px 12px; border-bottom: 1px solid var(--aw-line);
}
.aw-table td { padding: 13px 16px; border-bottom: 1px solid var(--aw-line-soft); vertical-align: top; }
.aw-table tr:last-child td { border-bottom: 0; }
.aw-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------------ app shell */

.aw-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 80px; padding: 0 var(--aw-gutter); border-bottom: 1px solid var(--aw-line);
  background: var(--aw-bg); font-family: var(--aw-font); position: relative;
}
body.aw .aw-brand { display: flex; align-items: center; gap: 12px; color: var(--aw-ink); text-decoration: none; flex-shrink: 0; white-space: nowrap; }
.aw-brand img { width: 44px; height: 44px; border-radius: 10px; }
.aw-brand span { font-family: var(--aw-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.aw-links { display: flex; align-items: center; gap: 32px; font-weight: 600; font-size: 15px; }
body.aw .aw-links a { color: var(--aw-ink); text-decoration: none; white-space: nowrap; }
body.aw .aw-links a:hover { color: var(--aw-accent); }
body.aw .aw-links a.on { color: var(--aw-accent); border-bottom: 2px solid var(--aw-accent); padding-bottom: 4px; margin-bottom: -6px; }
.aw-tools { display: flex; align-items: center; gap: 12px; }
.aw-lang {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  border: 1px solid var(--aw-line-2); border-radius: 10px; background: var(--aw-surface);
}
.aw-lang svg { flex-shrink: 0; }
.aw-lang select {
  border: 0; background: transparent; font: 500 14px var(--aw-font); color: var(--aw-ink-2);
  padding: 0 4px 0 0; height: 38px; cursor: pointer; outline-offset: 2px;
}
body.aw .aw-balance {
  height: 40px; padding: 0 14px; font-family: var(--aw-font); font-weight: 700; font-size: 14px;
  color: var(--aw-ink-2); text-decoration: none;
}
.aw-balance svg { stroke: var(--aw-accent); }
.aw-balance .aw-quiet { color: var(--aw-muted); font-weight: 500; }
.aw-balance.low { border-color: #f1b6cf; }
.aw-account { position: relative; }
.aw-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 999px; background: linear-gradient(135deg, var(--aw-accent), var(--aw-pink));
  color: #fff; font-weight: 800; font-size: 14px; border: 0; cursor: pointer; padding: 0;
}
.aw-menu {
  position: absolute; right: 0; top: 50px; z-index: 50; min-width: 220px; padding: 8px;
  background: var(--aw-surface); border: 1px solid var(--aw-line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(23, 19, 31, 0.12); display: flex; flex-direction: column;
}
.aw-menu[hidden] { display: none; }
.aw-menu .aw-who { padding: 8px 12px 10px; border-bottom: 1px solid var(--aw-line-soft); margin-bottom: 6px; font-size: 13px; color: var(--aw-muted); overflow-wrap: anywhere; }
.aw-menu .aw-who b { display: block; color: var(--aw-ink); font-size: 14px; }
body.aw .aw-menu a, body.aw .aw-menu button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px;
  font: 600 14px var(--aw-font); color: var(--aw-ink); background: none; border: 0; cursor: pointer; text-decoration: none;
}
body.aw .aw-menu a:hover, body.aw .aw-menu button:hover { background: var(--aw-accent-soft); color: var(--aw-accent); }
.aw-menu form { margin: 0; }
.aw-lang-panel { display: none; }
.aw-burger {
  display: none; width: 44px; height: 44px; border: 0; background: none; align-items: center;
  justify-content: center; cursor: pointer; padding: 0; border-radius: 8px;
  /* Without this, mobile browsers flash their own default tap-highlight colour on tap -
     on Android that's the OS/Material-You accent (can render green), not ours. */
  -webkit-tap-highlight-color: transparent;
}
.aw-burger:active { background: var(--aw-accent-soft); }

body.aw footer.aw-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  padding: 32px var(--aw-gutter); border-top: 1px solid var(--aw-line); font-size: 14px;
  color: var(--aw-muted); background: var(--aw-bg); text-align: left; margin-top: 48px;
  /* styles.css pins a bare `footer` to the viewport bottom for the old pages */
  position: static; z-index: auto; line-height: 1.5;
}
body.aw .aw-footer a { color: var(--aw-accent); text-decoration: none; }
body.aw .aw-footer a:hover { color: var(--aw-link-hover); text-decoration: none; }
.aw-footer .aw-foot-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.aw-modern footer.aw-footer { margin-top: 0; }

/* ------------------------------------------------------------------ landing */

.aw-section { padding: 0 var(--aw-gutter) 96px; display: flex; flex-direction: column; gap: 40px; }
.aw-head { display: flex; flex-direction: column; gap: 12px; max-width: 800px; }
.aw-head h2 { font-size: 44px; line-height: 1.1; font-weight: 800; }

.aw-hero {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center;
  padding: 88px var(--aw-gutter) 72px;
}
.aw-hero-copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.aw-hero h1 { font-size: 66px; line-height: 1.02; font-weight: 800; }
.aw-grad {
  background: linear-gradient(90deg, var(--aw-accent), var(--aw-pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.aw-lead { font-size: 20px; line-height: 1.5; color: var(--aw-prose); max-width: 580px; text-wrap: pretty; }
.aw-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.aw-note { font-size: 14px; color: var(--aw-muted); }

.aw-terminal {
  display: flex; flex-direction: column; background: var(--aw-dark); border-radius: 28px;
  box-shadow: 0 30px 80px rgba(23, 19, 31, 0.25); overflow: hidden; min-width: 0;
}
.aw-tabs { display: flex; align-items: center; gap: 8px; padding: 18px 24px; border-bottom: 1px solid var(--aw-dark-3); flex-wrap: wrap; }
.aw-tabs button {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px;
  background: none; border: 0; color: var(--aw-code-cm); font: 600 13px var(--aw-font); cursor: pointer;
}
.aw-tabs button[aria-selected="true"] { background: var(--aw-dark-3); color: #fff; }
.aw-terminal .aw-code { padding: 24px 28px; }
.aw-terminal .aw-code[hidden] { display: none; }
.aw-terminal-foot {
  display: flex; align-items: center; gap: 14px; padding: 18px 28px; background: var(--aw-dark-2);
  border-top: 1px solid var(--aw-dark-3); color: var(--aw-dark-ink); font-size: 14px; line-height: 1.5;
}
.aw-terminal-foot svg { flex-shrink: 0; }
.aw-terminal-foot .aw-mono { color: #fff; }

.aw-dark-band {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center;
  padding: 40px 44px; border-radius: 24px; background: var(--aw-dark); color: #fff;
}
.aw-dark-band h3 { font-size: 30px; line-height: 1.15; font-weight: 800; color: #fff; }
.aw-dark-band p { font-size: 16px; line-height: 1.55; color: var(--aw-dark-muted); text-wrap: pretty; }
.aw-dark-band .aw-eyebrow { color: var(--aw-accent-line); }
.aw-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.aw-tile { padding: 16px 18px; border-radius: 14px; background: var(--aw-dark-3); font-size: 14px; line-height: 1.45; color: var(--aw-dark-ink); }
.aw-tile b { color: #fff; display: block; }
.aw-tile .aw-mono { font-size: 12.5px; }

.aw-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.aw-integrations { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; }
.aw-stack { display: flex; flex-direction: column; gap: 24px; }
.aw-card-row { display: flex; align-items: center; gap: 12px; }
.aw-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.aw-example { padding: 14px 16px; border-radius: 12px; background: #f6f3fb; font-size: 14px; color: var(--aw-ink-2); line-height: 1.45; }
.aw-codebox { padding: 16px 20px; border-radius: 14px; background: var(--aw-dark); }

.aw-providers { display: flex; flex-wrap: wrap; gap: 12px 40px; font-family: var(--aw-display); font-weight: 700; font-size: 22px; color: var(--aw-ink-2); }
.aw-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.aw-pricing { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 64px; align-items: start; }
.aw-pricing .aw-head { gap: 20px; }
.aw-pricing .aw-card { padding: 24px 8px 8px; gap: 0; overflow-x: auto; }
.aw-small { color: var(--aw-muted); line-height: 1.55; font-size: 14px; text-wrap: pretty; }
.aw-body { color: var(--aw-prose); line-height: 1.55; font-size: 16px; text-wrap: pretty; }
body.aw .aw-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }

.aw-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 56px 64px;
  border-radius: 28px; background: linear-gradient(120deg, var(--aw-accent), var(--aw-pink)); color: #fff;
}
.aw-cta h2 { font-size: 40px; line-height: 1.1; font-weight: 800; color: #fff; }
.aw-cta p { font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
body.aw .aw-cta .aw-btn { background: #fff; color: var(--aw-accent); height: 60px; padding: 0 32px; font-weight: 800; font-size: 18px; white-space: nowrap; }
body.aw .aw-cta .aw-btn:hover { color: var(--aw-accent-hover); }

/* ------------------------------------------------------------------ API docs */

.aw-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 56px var(--aw-gutter) 36px; flex-wrap: wrap; }
.aw-page-head h1 { font-size: 52px; line-height: 1.05; font-weight: 800; }
.aw-page-head .aw-lead { max-width: 720px; font-size: 18px; }
.aw-docs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; padding: 0 var(--aw-gutter) 96px; align-items: start; }
.aw-toc { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.aw-toc .aw-eyebrow { color: var(--aw-muted); font-size: 12px; margin-bottom: 8px; }
body.aw .aw-toc a { color: var(--aw-ink-2); padding: 6px 10px; border-radius: 8px; font-weight: 600; }
body.aw .aw-toc a:hover { background: var(--aw-accent-soft); color: var(--aw-accent); }
.aw-toc .aw-toc-note { margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--aw-accent-soft); color: var(--aw-ink-2); font-size: 13px; line-height: 1.5; }
.aw-docs-main { display: flex; flex-direction: column; gap: 56px; min-width: 0; }
.aw-docs-main section { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 24px; }
.aw-docs-main h2 { font-size: 32px; line-height: 1.15; font-weight: 800; }
.aw-docs-main h3 { font-size: 19px; font-weight: 700; }
.aw-docs-main p, .aw-docs-main li { color: var(--aw-prose); line-height: 1.6; font-size: 16px; }
.aw-docs-main code { font-family: var(--aw-mono); font-size: 0.88em; background: var(--aw-accent-soft); color: var(--aw-ink-2); padding: 1px 6px; border-radius: 6px; }
.aw-docs-main .aw-code code { background: none; padding: 0; color: inherit; font-size: inherit; }
.aw-docblock { position: relative; background: var(--aw-dark); border-radius: 18px; overflow: hidden; }
.aw-docblock .aw-code { padding: 22px 24px; }
.aw-docblock .aw-tabs { padding: 12px 16px; }
.aw-copy {
  position: absolute; right: 12px; top: 10px; height: 30px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--aw-dark-3); background: var(--aw-dark-2); color: var(--aw-dark-ink);
  font: 600 12.5px var(--aw-font); cursor: pointer;
}
.aw-copy:hover { color: #fff; border-color: var(--aw-code-cm); }
.aw-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.aw-verb { display: inline-block; min-width: 46px; font-family: var(--aw-mono); font-size: 12px; font-weight: 700; color: var(--aw-accent); }
.aw-verb.get { color: #1f9d61; }
/* a long path breaks inside itself instead of dropping below the verb */
td.aw-mono:has(> .aw-verb) { overflow-wrap: anywhere; }
.aw-status { font-family: var(--aw-mono); font-weight: 700; color: var(--aw-accent); }
.aw-scroll { overflow-x: auto; }
.aw-dialects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* ------------------------------------------------------------------ narrower screens */

@media (max-width: 1360px) {
  .aw-balance .aw-quiet { display: none; }
  .aw-links { gap: 22px; }
  .aw-nav { gap: 16px; }
}

@media (max-width: 1200px) {
  :root { --aw-gutter: 40px; }
  .aw-links { gap: 20px; }
  .aw-hero { gap: 40px; }
  .aw-hero h1 { font-size: 52px; }
  .aw-pricing { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* Burger mode. The header holds five links, the language and, signed in, a balance
   chip and an avatar; how wide that is depends on the language (Ukrainian labels are
   half as long again as English). So no breakpoint fits all nine: a script in
   mainmenu.twig adds .aw-compact whenever the one-line header would overflow, and the
   1024px query below is the same rule for a browser without JavaScript. */
.aw-nav.aw-compact .aw-burger { display: inline-flex; }
.aw-nav.aw-compact .aw-links {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; flex-direction: column;
  align-items: stretch; gap: 0; padding: 8px var(--aw-gutter) 16px; background: var(--aw-bg);
  border-bottom: 1px solid var(--aw-line); box-shadow: 0 18px 30px rgba(23, 19, 31, 0.08);
}
.aw-nav.aw-compact .aw-links.open { display: flex; }
body.aw .aw-nav.aw-compact .aw-links a { padding: 12px 0; border-bottom: 1px solid var(--aw-line-soft); }
body.aw .aw-nav.aw-compact .aw-links a.on { margin-bottom: 0; padding-bottom: 12px; border-bottom: 1px solid var(--aw-line-soft); }

@media (max-width: 1024px) {
  .aw-burger { display: inline-flex; }
  .aw-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; flex-direction: column;
    align-items: stretch; gap: 0; padding: 8px var(--aw-gutter) 16px; background: var(--aw-bg);
    border-bottom: 1px solid var(--aw-line); box-shadow: 0 18px 30px rgba(23, 19, 31, 0.08);
  }
  .aw-links.open { display: flex; }
  body.aw .aw-links a { padding: 12px 0; border-bottom: 1px solid var(--aw-line-soft); }
  body.aw .aw-links a.on { margin-bottom: 0; padding-bottom: 12px; border-bottom: 1px solid var(--aw-line-soft); }
}

@media (max-width: 1024px) {
  .aw-hero, .aw-dark-band, .aw-integrations, .aw-docs { grid-template-columns: minmax(0, 1fr); }
  .aw-grid3, .aw-dialects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aw-toc { position: static; flex-direction: row; flex-wrap: wrap; }
  .aw-toc .aw-eyebrow, .aw-toc .aw-toc-note { width: 100%; }
  .aw-cta { flex-direction: column; align-items: flex-start; gap: 28px; padding: 44px; }
}

@media (max-width: 640px) {
  :root { --aw-gutter: 16px; }
  .aw-nav { min-height: 64px; gap: 8px; }
  .aw-brand img { width: 36px; height: 36px; border-radius: 8px; }
  .aw-brand span { font-size: 17px; }
  .aw-tools { gap: 8px; }
  .aw-tools .aw-lang { display: none; }
  .aw-links .aw-lang-panel { display: flex; margin-top: 12px; align-self: flex-start; }
  .aw-brand span { white-space: nowrap; }
  /* Signed in (ProfilePhone artboard): logo only, a smaller chip and avatar. */
  .aw-signed-in .aw-brand span, .aw-balance svg { display: none; }
  body.aw .aw-balance { height: 36px; padding: 0 10px; font-size: 13px; }
  .aw-avatar { width: 32px; height: 32px; font-size: 12px; }
  .aw-menu { top: 42px; }
  .aw-balance .aw-quiet { display: none; }
  body.aw .aw-btn-dark { height: 40px; padding: 0 14px; font-size: 14px; }
  .aw-hero { padding: 44px var(--aw-gutter) 56px; gap: 36px; }
  .aw-hero h1 { font-size: 38px; line-height: 1.06; }
  .aw-lead { font-size: 17px; }
  .aw-btn { height: 52px; padding: 0 20px; font-size: 16px; width: 100%; }
  .aw-terminal { border-radius: 22px; }
  .aw-terminal .aw-code { padding: 18px 20px; font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .aw-section { padding-bottom: 64px; gap: 28px; }
  .aw-head h2 { font-size: 32px; }
  .aw-dark-band { padding: 28px 22px; }
  .aw-dark-band h3 { font-size: 24px; }
  .aw-tiles, .aw-grid3, .aw-examples, .aw-grid2, .aw-dialects { grid-template-columns: minmax(0, 1fr); }
  .aw-card { padding: 22px; }
  .aw-providers { font-size: 18px; gap: 8px 22px; }
  .aw-table { font-size: 14px; }
  .aw-table th, .aw-table td { padding-left: 10px; padding-right: 10px; }
  .aw-hide-phone { display: none; }
  .aw-cta { padding: 32px 22px; border-radius: 22px; }
  .aw-cta h2 { font-size: 30px; }
  body.aw .aw-cta .aw-btn { width: 100%; }
  body.aw footer.aw-footer { flex-direction: column; align-items: flex-start; }
  .aw-page-head { padding-top: 36px; }
  .aw-page-head h1 { font-size: 36px; }
  .aw-docs-main h2 { font-size: 26px; }
  .aw-docblock .aw-code { font-size: 12px; }
}

/* ------------------------------------------------------------------ app pages (2026-09 step 5)
   Auth, profile, price list, your data, and the image / chat / voice tools, built from the
   shared vocabulary of the canvas: fields, segmented controls, checks, toggles, status
   chips, chat bubbles. Real form controls carry the classes, so every id, name and script
   the pages had before keeps working. */

/* `hidden` must win over any display a component sets (tab panels, inactive states). */
body.aw [hidden] { display: none !important; }

.aw-app { padding: 0 var(--aw-gutter) 80px; display: flex; flex-direction: column; gap: 24px; }
.aw-app-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.aw-app-side { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.aw-app-split { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 64px; align-items: start; }
.aw-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.aw-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aw-row.between { justify-content: space-between; }
.aw-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.aw-muted { color: var(--aw-muted); }
.aw-small { font-size: 13px; line-height: 1.5; }
.aw-divider { display: flex; align-items: center; gap: 14px; color: var(--aw-muted); font-size: 13px; }
.aw-divider::before, .aw-divider::after { content: ""; flex: 1; height: 1px; background: var(--aw-line); }
.aw-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.aw-card-head > div { display: flex; align-items: flex-start; gap: 14px; }
.aw-card-head .aw-muted { font-size: 14px; }
.aw-sub { border-top: 1px solid var(--aw-line-soft); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }

.aw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aw-label, .aw-field > label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aw-muted); margin: 0;
}
.aw-hint { font-size: 13px; color: var(--aw-muted); line-height: 1.45; }
/* Fields sharing a row line up by their controls, not by their labels: a label that wraps to
   two lines (a longer translation, a narrow column) must not push its input below its
   neighbour's. The fields stretch to the row's height, the label stays on top and the control
   (whatever follows the label) sits at the bottom. */
.aw-fields, .aw-row:has(> .aw-field) { align-items: stretch; }
.aw-fields > .aw-field, .aw-two-col > .aw-field, .aw-row > .aw-field { align-self: stretch; }
.aw-field > label + *, .aw-field > .aw-label + * { margin-top: auto; }
body.aw .aw-input, body.aw .aw-field input:not([type=checkbox]):not([type=radio]):not([type=file]),
body.aw .aw-field select, body.aw .aw-field textarea {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 10px; background: var(--aw-surface);
  border: 1px solid var(--aw-line-2); font: inherit; font-size: 14.5px; color: var(--aw-ink); box-shadow: none;
}
body.aw .aw-field textarea, body.aw textarea.aw-input { height: auto; min-height: 88px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
body.aw .aw-input:focus, body.aw .aw-field input:focus, body.aw .aw-field select:focus, body.aw .aw-field textarea:focus {
  outline: none; border-color: var(--aw-accent-line); box-shadow: 0 0 0 3px var(--aw-accent-soft);
}
body.aw .aw-input.mono, body.aw .aw-field .mono { font-family: var(--aw-mono); font-size: 13px; }
body.aw .aw-field input[type=file] {
  width: auto; max-width: 100%; align-self: flex-start; box-sizing: border-box; padding: 6px; font-size: 13.5px; color: var(--aw-ink-2);
  background: var(--aw-surface); border: 1px dashed var(--aw-line-2); border-radius: 10px; cursor: pointer;
}
body.aw .aw-field input[type=file]:hover { border-color: var(--aw-accent-line); }
body.aw .aw-field input[type=file]:focus-visible { outline: none; border-color: var(--aw-accent-line); box-shadow: 0 0 0 3px var(--aw-accent-soft); }
body.aw .aw-field input[type=file]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 1px solid var(--aw-line-2); border-radius: 8px; background: var(--aw-surface);
  color: var(--aw-ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
body.aw .aw-field input[type=file]::file-selector-button:hover { background: var(--aw-accent-soft); border-color: var(--aw-accent-line); }
body.aw .aw-input-like { display: block; min-height: 44px; padding: 12px 14px; border-radius: 10px; background: var(--aw-surface); border: 1px solid var(--aw-line-2); }

.aw-check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--aw-ink-2); cursor: pointer; font-weight: 500; margin: 0; }
.aw-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--aw-accent); flex-shrink: 0; }

/* A checkbox drawn as a switch. The real input stays for the form and the keyboard. */
.aw-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; margin: 0; }
.aw-toggle input { position: absolute; opacity: 0; width: 42px; height: 24px; margin: 0; cursor: pointer; z-index: 1; }
.aw-toggle i { display: inline-block; width: 42px; height: 24px; border-radius: 999px; background: #d7d1e2; position: relative; transition: background .15s; flex-shrink: 0; }
.aw-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.aw-toggle input:checked + i { background: var(--aw-accent); }
.aw-toggle input:checked + i::after { left: 21px; }
.aw-toggle input:focus-visible + i { box-shadow: 0 0 0 3px var(--aw-accent-soft); }

.aw-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: #f1edf7; gap: 2px; flex-wrap: wrap; }
.aw-seg > a, .aw-seg > button, .aw-seg > label {
  position: relative; display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--aw-prose); white-space: nowrap; border: 0; background: transparent; cursor: pointer; margin: 0;
}
body.aw .aw-seg > a { color: var(--aw-prose); }
body.aw .aw-seg > .on, .aw-seg > [aria-selected="true"], .aw-seg > label:has(input:checked) {
  background: var(--aw-surface); color: var(--aw-ink); box-shadow: 0 1px 3px rgba(23, 19, 31, 0.1);
}
.aw-seg > label input { position: absolute; opacity: 0; pointer-events: none; }
.aw-seg.wide { display: flex; } .aw-seg.wide > * { flex: 1; }

body.aw .aw-btn-sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 9px; }
body.aw .aw-btn-md { height: 44px; padding: 0 18px; font-size: 14px; border-radius: 10px; }
body.aw .aw-btn-danger { background: var(--aw-surface); color: var(--aw-link-hover); border-color: #f3c6de; }
body.aw .aw-btn-danger:hover { background: #fcecf4; color: var(--aw-link-hover); }
body.aw .aw-btn-link { display: inline; background: none; border: 0; padding: 0; height: auto; color: var(--aw-accent); font-weight: 600; font-size: 14px; cursor: pointer; }
body.aw .aw-btn-link:hover { color: var(--aw-link-hover); }
body.aw .aw-btn[disabled] { opacity: .55; cursor: default; }
body.aw .aw-btn-block { width: 100%; }

.aw-chip.soft { background: var(--aw-accent-soft); border-color: var(--aw-accent-soft); color: var(--aw-accent); font-family: var(--aw-font); font-weight: 700; }
.aw-chip.ok { background: #e8f7ef; border-color: #e8f7ef; color: #1f9d61; font-family: var(--aw-font); font-weight: 700; }
.aw-chip.warn { background: #fdf1e6; border-color: #fdf1e6; color: #d97a1c; font-family: var(--aw-font); font-weight: 700; }
.aw-chip.err { background: #fcecf4; border-color: #fcecf4; color: var(--aw-link-hover); font-family: var(--aw-font); font-weight: 700; }
.aw-chip.on { background: var(--aw-dark); color: #fff; border-color: var(--aw-dark); }
button.aw-chip { cursor: pointer; }
.aw-dot { width: 8px; height: 8px; border-radius: 50%; background: #1f9d61; display: inline-block; flex-shrink: 0; }
.aw-dot.off { background: #c9c2d6; }

.aw-list { display: flex; flex-direction: column; }
.aw-list > * { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--aw-line-soft); flex-wrap: wrap; }
.aw-list > *:last-child { border-bottom: 0; }

.aw-steps { display: flex; flex-direction: column; gap: 14px; }
.aw-steps > div { display: flex; gap: 14px; align-items: flex-start; }
.aw-steps .n { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: var(--aw-accent-soft); color: var(--aw-accent); font-weight: 800; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.aw-steps b { display: block; margin-bottom: 4px; }
.aw-steps span { color: var(--aw-prose); font-size: 14.5px; line-height: 1.55; }

.aw-note-box { padding: 14px 16px; border-radius: 12px; background: var(--aw-accent-soft); color: var(--aw-ink-2); font-size: 14px; line-height: 1.5; }
.aw-note-box.warn { background: #fdf1e6; }
.aw-note-box.err { background: #fcecf4; }
.aw-big { font-family: var(--aw-display); font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.aw-stat { display: flex; flex-direction: column; gap: 6px; }
.aw-stat .aw-big { font-size: 34px; }

.aw-card h4 { font-family: var(--aw-font); font-size: 16px; font-weight: 700; margin: 6px 0 0; letter-spacing: 0; }
.aw-card ul { margin: 0; padding-left: 20px; color: var(--aw-prose); line-height: 1.6; font-size: 15px; }
.aw-card hr { border: 0; border-top: 1px solid var(--aw-line-soft); margin: 8px 0; }

.aw-app .aw-grid2, .aw-app .aw-grid3, .aw-app .aw-app-2 { align-items: start; }

/* Auth card and the social sign-in buttons (also on /data-removal). */
.aw-auth-card { padding: 36px; gap: 22px; box-shadow: 0 30px 80px rgba(23, 19, 31, 0.08); }
.aw-socials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.aw .aw-socials .aw-btn { justify-content: flex-start; gap: 12px; min-width: 0; overflow: hidden; }
.aw-social-mark { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; color: #fff; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
@media (max-width: 640px) {
  .aw-auth-card { padding: 22px; }
  .aw-socials { grid-template-columns: minmax(0, 1fr); }
  body.aw .aw-socials .aw-btn { width: 100%; }
}

/* Flash messages (Phalcon's default classes) on the new pages. */
body.aw .flash-messages-container { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
body.aw .flash-messages-container:empty { display: none; }
body.aw .errorMessage, body.aw .successMessage, body.aw .noticeMessage, body.aw .warningMessage,
body.aw .alert { position: relative; padding: 12px 40px 12px 16px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; border: 1px solid transparent; margin: 0; }
body.aw .errorMessage, body.aw .alert-danger { background: #fcecf4; color: #9c1c6b; border-color: #f3c6de; }
body.aw .successMessage, body.aw .alert-success { background: #e8f7ef; color: #16774a; border-color: #c4ead6; }
body.aw .noticeMessage, body.aw .alert-info { background: var(--aw-accent-soft); color: var(--aw-accent-hover); border-color: var(--aw-accent-line); }
body.aw .warningMessage, body.aw .alert-warning { background: #fdf1e6; color: #9a560f; border-color: #f5d6b5; }
/* The dismiss "x" (Phalcon's own Bootstrap-shaped markup, Flash(Session)::DEFAULT_TEMPLATE)
   has no Bootstrap here to style it, so left unstyled it renders as a plain, left-aligned
   button before the text. Reposition it into the message's own corner instead - the actual
   wrapper is Phalcon's default per-type class (errorMessage/...), not "alert". Its height
   matches the message's own first line box (font-size 14.5px * line-height 1.5) and sits at
   the same offset as the text's top padding, so a flex-centered "x" lands exactly on the
   middle of a one-line message, and on the middle of just the FIRST line of a wrapped one. */
body.aw .flash-messages-container .close { position: absolute; top: 12px; right: 10px; width: 24px; height: 21.75px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: transparent; color: inherit; opacity: 0.55; font-size: 20px; line-height: 1;
  cursor: pointer; border-radius: 6px; }
body.aw .flash-messages-container .close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
.aw-flash { padding: 0 var(--aw-gutter); }

/* Chat */
.aw-chat { display: flex; flex-direction: column; gap: 14px; min-height: 320px; }
.aw-bubble-user { align-self: flex-end; max-width: 78%; padding: 14px 18px; border-radius: 18px 18px 4px 18px; background: var(--aw-dark); color: #fff; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.aw-bubble-ai { align-self: flex-start; max-width: 88%; padding: 16px 20px; border-radius: 18px 18px 18px 4px; background: var(--aw-surface); border: 1px solid var(--aw-line); color: var(--aw-ink-2); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.aw-bubble-ai pre { background: var(--aw-dark); color: var(--aw-dark-ink); padding: 14px; border-radius: 12px; overflow-x: auto; font-family: var(--aw-mono); font-size: 13px; }
.aw-composer { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--aw-surface); border: 1px solid var(--aw-line); box-shadow: 0 18px 44px rgba(23, 19, 31, 0.06); }
body.aw .aw-composer textarea { border: 0; box-shadow: none; min-height: 72px; padding: 6px; resize: vertical; width: 100%; font: inherit; font-size: 15px; background: transparent; }
body.aw .aw-composer textarea:focus { outline: none; box-shadow: none; }

/* Image results */
.aw-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.aw-gallery img { width: 100%; border-radius: 14px; display: block; background: linear-gradient(135deg, #e9dcff 0%, #f8d5ea 50%, #ffe6cf 100%); }
.aw-progress { height: 8px; border-radius: 999px; background: #f1edf7; overflow: hidden; }
.aw-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--aw-accent), var(--aw-pink)); border-radius: 999px; transition: width .3s; }

/* Files browser (/profile/files): the gallery grid, a checkbox overlay per cell, and a
   minimal lightbox - no dependency, plain JS in files.js. */
.aw-file-cell { position: relative; display: flex; flex-direction: column; gap: 6px; }
.aw-file-thumb { display: block; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #e9dcff 0%, #f8d5ea 50%, #ffe6cf 100%); }
.aw-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-file-generic { display: flex; align-items: center; justify-content: center; }
.aw-file-ext { font: 700 13px var(--aw-mono, monospace); text-transform: uppercase; color: var(--aw-ink-2); background: rgba(255,255,255,.7); padding: 4px 10px; border-radius: 999px; }
.aw-file-check { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(255,255,255,.9); border-radius: 6px; padding: 2px; line-height: 0; }
.aw-file-meta { display: block; }
.aw-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 16, 26, .92); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 24px; }
.aw-lightbox[hidden] { display: none; }
.aw-lightbox img { max-width: min(90vw, 1100px); max-height: 78vh; border-radius: 10px; object-fit: contain; }
.aw-lightbox-caption { color: #fff; opacity: .85; font-size: 14px; }
.aw-lightbox-close { position: absolute; top: 18px; right: 22px; }
.aw-lightbox-close, .aw-lightbox-nav { background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 999px; width: 44px; height: 44px; font-size: 22px; cursor: pointer; line-height: 1; }
.aw-lightbox-close:hover, .aw-lightbox-nav:hover { background: rgba(255,255,255,.24); }
.aw-lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); }
.aw-lightbox-prev { left: 24px; }
.aw-lightbox-next { right: 24px; }
@media (max-width: 640px) {
  .aw-lightbox-nav { width: 38px; height: 38px; font-size: 18px; }
  .aw-lightbox-prev { left: 8px; }
  .aw-lightbox-next { right: 8px; }
}

/* Column splits for particular pages - classes, not inline styles, so the breakpoints
   below can still fold them into one column. */
.aw-app-2.aw-cols-wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.aw-app-2.aw-cols-talk { grid-template-columns: minmax(0, 1fr) 380px; }
.aw-app-2.aw-cols-money { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.aw-grid3.aw-cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aw-fields.aw-fields2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the mic icon breathes while recording (voice.js sets .active on the button) */
@keyframes aw-mic-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
#micButton.active svg { animation: aw-mic-pulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #micButton.active svg { animation: none; } }
/* chat/voice settings: one column, two only on tablets (where the side card spans the page) */
.aw-talk-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 641px) and (max-width: 1024px) {
  .aw-talk-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
}

@media (max-width: 1200px) {
  .aw-app-split { grid-template-columns: minmax(0, 1fr) 480px; gap: 40px; }
}
@media (max-width: 1024px) {
  .aw-app-2, .aw-app-side, .aw-app-split, .aw-app-2[class*="aw-cols-"] { grid-template-columns: minmax(0, 1fr); }
  .aw-grid3.aw-cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .aw-app { padding-bottom: 56px; gap: 18px; }
  .aw-big { font-size: 36px; }
  .aw-bubble-user, .aw-bubble-ai { max-width: 100%; }
  body.aw .aw-btn-sm, body.aw .aw-btn-md { width: auto; }
  .aw-fields, .aw-fields.aw-fields2, .aw-grid3.aw-cols4 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ image, chat and voice tools
   image.js and voice.js render `.chat-message.user-message` / `.ai-message`; they get the
   bubbles of the design. The reference-image grid, full screen and the Mesh panel came
   from the old image.phtml's own <style> block. */
.aw-chat .chat-message { overflow-wrap: anywhere; white-space: pre-wrap; }
.aw-chat .user-message { align-self: flex-end; max-width: 78%; padding: 14px 18px; border-radius: 18px 18px 4px 18px; background: var(--aw-dark); color: #fff; font-size: 15px; line-height: 1.5; }
.aw-chat .ai-message { align-self: flex-start; max-width: 100%; padding: 16px 20px; border-radius: 18px 18px 18px 4px; background: var(--aw-surface); border: 1px solid var(--aw-line); color: var(--aw-ink-2); font-size: 15px; line-height: 1.6; }
.aw-chat .chat-message img { border-radius: 12px; max-width: 100%; }
.aw-chat .chat-message button { margin: 4px 4px 0 0; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--aw-line-2); background: var(--aw-surface); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.aw-chat .chat-message button:hover { color: var(--aw-accent); border-color: var(--aw-accent-line); }
.aw-chat:empty::before { content: ""; }

.image-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.image-preview, .add-image {
  width: 112px; height: 136px; position: relative; border: 1.5px dashed var(--aw-line-2); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: var(--aw-bg); cursor: move; padding: 4px;
}
.image-preview img { max-width: 100px; max-height: 90px; object-fit: cover; border-radius: 8px; }
.remove-image { position: absolute; top: 2px; right: 4px; background: rgba(23, 19, 31, 0.6); color: #fff; font-weight: bold; border-radius: 50%; padding: 2px 6px; cursor: pointer; z-index: 1; font-size: 12px; }
.add-image { font-size: 30px; font-weight: 700; color: var(--aw-muted); cursor: pointer; width: 96px; height: 96px; justify-content: center; }
.add-image.drag-over { background: var(--aw-accent-soft); border-color: var(--aw-accent); }
.image-reference-controls { display: none; font-size: 10px; text-align: center; width: 100%; margin-top: 4px; }
.image-reference-controls label { font-size: 9px; color: var(--aw-muted); }
.image-reference-controls select, .image-reference-controls input { font-size: 9px; padding: 1px; margin: 1px; border: 1px solid var(--aw-line-2); border-radius: 4px; }

/* Full screen: the working area over everything else. */
body.fullscreen #main { position: fixed; inset: 0; z-index: 100; background: var(--aw-bg); overflow: auto; padding: 24px; }

/* Peer compute marketplace (mesh.js). */
.mesh-panel { gap: 12px; }
body.aw .mesh-toggle { align-self: flex-start; }
.mesh-tabs { display: inline-flex; padding: 4px; border-radius: 12px; background: #f1edf7; gap: 2px; }
.mesh-tabs button { height: 34px; padding: 0 14px; border-radius: 9px; border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--aw-prose); cursor: pointer; }
.mesh-tabs button.active { background: var(--aw-surface); color: var(--aw-ink); box-shadow: 0 1px 3px rgba(23, 19, 31, 0.1); }
.mesh-tab-body { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.mesh-tab-body label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aw-muted); }
.mesh-tab-body select, .mesh-tab-body textarea, .mesh-tab-body input { padding: 10px 12px; border: 1px solid var(--aw-line-2); border-radius: 10px; font: inherit; font-size: 14px; background: var(--aw-surface); }
.mesh-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mesh-row label { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--aw-ink-2); }
.mesh-row button, .mesh-tab-body > button { height: 40px; padding: 0 16px; cursor: pointer; border: 0; border-radius: 10px; background: var(--aw-dark); color: #fff; font: inherit; font-weight: 700; font-size: 14px; }
.mesh-samples { display: flex; gap: 8px; flex-wrap: wrap; }
.mesh-sample { width: 96px; margin: 0; font-size: 11px; }
.mesh-sample img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; }
.mesh-out { max-width: 260px; border-radius: 12px; margin: 4px; }
.mesh-fs { border: 1px solid var(--aw-line); border-radius: 14px; padding: 12px; }
.mesh-token code, .mesh-cmd { display: inline-block; background: var(--aw-dark); color: var(--aw-ok); padding: 8px 10px; border-radius: 8px; word-break: break-all; font-family: var(--aw-mono); font-size: 12.5px; }
.mesh-cmd { display: block; white-space: pre-wrap; }
.mesh-muted { color: var(--aw-muted); font-size: 12.5px; }
.mesh-error { color: var(--aw-link-hover); }
.mesh-loading { color: var(--aw-accent); }
.mesh-empty { color: var(--aw-muted); padding: 8px 0; }
@media (max-width: 640px) {
  .aw-chat .user-message { max-width: 100%; }
}

/* Phone: long labels ("Buy 100 more requests for 1.00 EUR now") wrap instead of pushing
   the page sideways. */
@media (max-width: 640px) {
  body.aw .aw-app .aw-btn { white-space: normal; height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; text-align: center; }
  .aw-card-head > div { min-width: 0; }
  .aw-card-head h3 { overflow-wrap: anywhere; }
}

/* Mesh pages (/mesh/gallery, /mesh/l/{id}, /mesh/sell, /mesh/tasks) */
.aw-mesh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.aw-mesh-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; min-width: 0; }
.aw-mesh-out { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.aw-mesh-out img { width: 100%; height: auto; border-radius: 10px; display: block; }
.aw-mesh-out audio { width: 100%; display: block; }
/* The product-photo workflow: the photo and the result side by side (docs/features/18). */
.aw-mesh-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.aw-mesh-pair figure { margin: 0; min-width: 0; }
.aw-mesh-pair figcaption { margin-top: 4px; }
.aw-mesh-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; margin: 0;
  padding: 12px 14px; border-radius: 10px; background: var(--aw-accent-soft); font-family: var(--aw-mono); font-size: 13px; }
.aw-mesh-meta { margin: 0; }
ol.aw-steps { flex-direction: column; gap: 6px; padding-left: 20px; margin: 0; }
#mesh-flash.aw-flash-ok { color: #1f9d61; font-weight: 600; padding-top: 8px; }
#mesh-flash.aw-flash-error { color: var(--aw-link-hover); font-weight: 600; padding-top: 8px; }
.aw-mesh-pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Admin pages with wide tables: the Bootstrap container width is the minimum, the screen the maximum. */
body.aw .container.aw-wide { max-width: none; }
@media (min-width: 1200px) { body.aw .container.aw-wide { width: auto; padding-left: 30px; padding-right: 30px; } }

/* Radio choices laid out like a table, aligned left: radio | name | description. */
.aw-choices { display: grid; width: fit-content; max-width: 100%; grid-template-columns: max-content max-content max-content; justify-content: start; align-items: center; column-gap: 12px; }
.aw-choices > label.aw-check { display: contents; }
.aw-choices > label.aw-check > * { padding: 8px 0; border-bottom: 1px solid var(--aw-line-soft); }
.aw-choices > label.aw-check:last-child > * { border-bottom: 0; }
.aw-choices > label.aw-check > b:last-child { grid-column: span 2; }

/* Code sitting directly on a light card (not in a dark terminal/docblock): regular text colour. */
.aw-card > pre.aw-code { color: var(--aw-ink); }

/* A form whose parts sit in two columns when there is room, one when narrow. */
.aw-two-col { display: grid; grid-template-columns: 1fr; gap: 12px 32px; align-items: stretch; }
body.aw .aw-two-col > button { width: auto; align-self: end; }
@media (min-width: 720px) { .aw-two-col { grid-template-columns: 1fr 1fr; } }

/* Profile cards: action buttons sit at the right edge of their block (beats the inline flex-start). */
body.aw .aw-card form > button.aw-btn, body.aw .aw-card .aw-stack > button.aw-btn { align-self: flex-end !important; justify-self: end; width: auto; }

/* Balance card, right column: the saved-card panel sits right under the "save this card" box. The top-up form dissolves into the column so its parts can be ordered around the panel. */
.aw-money-col > form { display: contents; }
.aw-money-col > #auto-refill-panel { order: 2; }
.aw-money-col > form > #save-card-row ~ * { order: 3; }