/* ==========================================================================
   artCart.AI design system
   Single stylesheet for the marketing site, the user app and the admin panel.
   Mobile-first. No framework dependency.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --ac-bg:            #ffffff;
  --ac-bg-sunk:       #f6f7f9;
  --ac-bg-raised:     #ffffff;
  --ac-bg-inset:      #f0f2f5;

  --ac-text:          #14161a;
  --ac-text-soft:     #4c5566;
  --ac-text-faint:    #78839a;
  --ac-text-invert:   #ffffff;

  --ac-line:          #e2e6ed;
  --ac-line-strong:   #cbd2de;

  --ac-brand:         #5b3fd6;
  --ac-brand-ink:     #4a30bd;
  --ac-brand-soft:    #efeaff;
  --ac-brand-line:    #d6cbff;

  --ac-accent:        #12a06a;
  --ac-accent-ink:    #0d7d52;
  --ac-accent-soft:   #e4f7ee;

  --ac-danger:        #d33a4b;
  --ac-danger-ink:    #b02a3a;
  --ac-danger-soft:   #fdeaec;

  --ac-warn:          #b8760a;
  --ac-warn-soft:     #fdf3e0;

  --ac-radius-sm:     6px;
  --ac-radius:        10px;
  --ac-radius-lg:     16px;
  --ac-radius-pill:   999px;

  --ac-shadow-sm:     0 1px 2px rgba(16, 20, 30, .06);
  --ac-shadow:        0 2px 8px rgba(16, 20, 30, .07), 0 1px 2px rgba(16, 20, 30, .05);
  --ac-shadow-lg:     0 12px 32px rgba(16, 20, 30, .12), 0 2px 8px rgba(16, 20, 30, .06);

  --ac-sidebar-w:     252px;
  --ac-topbar-h:      56px;
  --ac-maxw:          1180px;

  --ac-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --ac-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ac-bg:          #0f1115;
    --ac-bg-sunk:     #0b0d11;
    --ac-bg-raised:   #171a21;
    --ac-bg-inset:    #1e222b;

    --ac-text:        #eef1f6;
    --ac-text-soft:   #aab3c2;
    --ac-text-faint:  #7c8697;
    --ac-text-invert: #0f1115;

    --ac-line:        #262b35;
    --ac-line-strong: #39404d;

    --ac-brand:       #8f7cf5;
    --ac-brand-ink:   #a596f8;
    --ac-brand-soft:  #211d3d;
    --ac-brand-line:  #3a3268;

    --ac-accent:      #34c98b;
    --ac-accent-ink:  #4bd79b;
    --ac-accent-soft: #10281f;

    --ac-danger:      #f2707f;
    --ac-danger-ink:  #f78e9a;
    --ac-danger-soft: #2c161a;

    --ac-warn:        #e0a63c;
    --ac-warn-soft:   #2a2113;

    --ac-shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
    --ac-shadow:      0 2px 8px rgba(0, 0, 0, .45);
    --ac-shadow-lg:   0 14px 36px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --ac-bg:          #0f1115;
  --ac-bg-sunk:     #0b0d11;
  --ac-bg-raised:   #171a21;
  --ac-bg-inset:    #1e222b;
  --ac-text:        #eef1f6;
  --ac-text-soft:   #aab3c2;
  --ac-text-faint:  #7c8697;
  --ac-text-invert: #0f1115;
  --ac-line:        #262b35;
  --ac-line-strong: #39404d;
  --ac-brand:       #8f7cf5;
  --ac-brand-ink:   #a596f8;
  --ac-brand-soft:  #211d3d;
  --ac-brand-line:  #3a3268;
  --ac-accent:      #34c98b;
  --ac-accent-ink:  #4bd79b;
  --ac-accent-soft: #10281f;
  --ac-danger:      #f2707f;
  --ac-danger-ink:  #f78e9a;
  --ac-danger-soft: #2c161a;
  --ac-warn:        #e0a63c;
  --ac-warn-soft:   #2a2113;
  --ac-shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
  --ac-shadow:      0 2px 8px rgba(0, 0, 0, .45);
  --ac-shadow-lg:   0 14px 36px rgba(0, 0, 0, .55);
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ac-bg);
  color: var(--ac-text);
  font-family: var(--ac-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--ac-text);
}
h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }

p  { margin: 0 0 1em; color: var(--ac-text-soft); }

a { color: var(--ac-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--ac-line); margin: 2rem 0; }

code, pre, kbd { font-family: var(--ac-mono); font-size: .875em; }
code {
  background: var(--ac-bg-inset);
  padding: .15em .4em;
  border-radius: var(--ac-radius-sm);
  color: var(--ac-text);
}
pre {
  background: var(--ac-bg-inset);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  padding: 1rem;
  overflow-x: auto;
}
pre code { background: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--ac-brand);
  outline-offset: 2px;
  border-radius: var(--ac-radius-sm);
}

/* -------------------------------------------------------------- layout --- */
.ac-wrap {
  width: 100%;
  max-width: var(--ac-maxw);
  margin-inline: auto;
  padding-inline: 20px;
}
.ac-wrap--narrow { max-width: 780px; }
.ac-wrap--wide   { max-width: 1400px; }

.ac-section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.ac-section--sunk { background: var(--ac-bg-sunk); }

.ac-stack > * + * { margin-top: 1rem; }
.ac-stack-lg > * + * { margin-top: 2rem; }

.ac-grid { display: grid; gap: 20px; }
.ac-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ac-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.ac-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

.ac-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.ac-row--between { justify-content: space-between; }
.ac-row--end     { justify-content: flex-end; }
.ac-spacer       { flex: 1 1 auto; }

/* -------------------------------------------------------------- buttons -- */
.ac-btn {
  --btn-bg: var(--ac-brand);
  --btn-fg: #fff;
  --btn-line: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .65em 1.15em;
  min-height: 44px;
  font: inherit;
  font-weight: 570;
  line-height: 1.2;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-line);
  border-radius: var(--ac-radius);
  cursor: pointer;
  text-decoration: none;
  transition: filter .15s ease, background-color .15s ease, border-color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ac-btn:hover { filter: brightness(1.08); text-decoration: none; }
.ac-btn:active { filter: brightness(.94); }
.ac-btn[disabled], .ac-btn.is-disabled { opacity: .5; pointer-events: none; }

.ac-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ac-text);
  --btn-line: var(--ac-line-strong);
}
.ac-btn--ghost:hover { background: var(--ac-bg-inset); filter: none; }

.ac-btn--soft {
  --btn-bg: var(--ac-brand-soft);
  --btn-fg: var(--ac-brand-ink);
  --btn-line: var(--ac-brand-line);
}
.ac-btn--accent { --btn-bg: var(--ac-accent); }
.ac-btn--danger { --btn-bg: var(--ac-danger); }
.ac-btn--sm { padding: .4em .8em; min-height: 34px; font-size: .875rem; }
.ac-btn--lg { padding: .8em 1.6em; min-height: 52px; font-size: 1.05rem; }
.ac-btn--block { width: 100%; }

.ac-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.ac-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ac-spin .7s linear infinite;
}
@keyframes ac-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- forms --- */
.ac-field { display: block; margin-bottom: 1rem; }
.ac-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ac-text);
  letter-spacing: .01em;
}
.ac-hint { margin: .35rem 0 0; font-size: .8rem; color: var(--ac-text-faint); }

.ac-input, .ac-select, .ac-textarea {
  display: block;
  width: 100%;
  padding: .6rem .75rem;
  min-height: 44px;
  font: inherit;
  color: var(--ac-text);
  background: var(--ac-bg-raised);
  border: 1px solid var(--ac-line-strong);
  border-radius: var(--ac-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ac-textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.ac-input:focus, .ac-select:focus, .ac-textarea:focus {
  outline: none;
  border-color: var(--ac-brand);
  box-shadow: 0 0 0 3px var(--ac-brand-soft);
}
.ac-input::placeholder, .ac-textarea::placeholder { color: var(--ac-text-faint); }
.ac-input[readonly], .ac-input:disabled { background: var(--ac-bg-inset); color: var(--ac-text-soft); }

.ac-select {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2378839a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
}

.ac-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .35rem 0;
  cursor: pointer;
  font-size: .92rem;
  color: var(--ac-text);
}
.ac-check input[type="checkbox"], .ac-check input[type="radio"] {
  width: 18px; height: 18px;
  margin: 3px 0 0;
  accent-color: var(--ac-brand);
  flex: none;
}

.ac-inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ac-inline-form .ac-field { margin-bottom: 0; flex: 1 1 200px; }

/* --------------------------------------------------------------- cards --- */
.ac-card {
  background: var(--ac-bg-raised);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow-sm);
  padding: 20px;
}
.ac-card--flush { padding: 0; overflow: hidden; }
.ac-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ac-line);
}
.ac-card__head h2, .ac-card__head h3 { margin: 0; font-size: 1.05rem; }
.ac-card__body { padding: 20px; }
.ac-card__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--ac-line);
  background: var(--ac-bg-sunk);
}

.ac-stat {
  background: var(--ac-bg-raised);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-lg);
  padding: 18px 20px;
  box-shadow: var(--ac-shadow-sm);
}
.ac-stat__label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ac-text-faint);
  margin: 0 0 .35rem;
}
.ac-stat__value {
  font-size: 1.9rem;
  font-weight: 680;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ac-text);
}
.ac-stat__meta { margin: .3rem 0 0; font-size: .82rem; color: var(--ac-text-faint); }

/* --------------------------------------------------------------- badges -- */
.ac-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .2em .6em;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--ac-radius-pill);
  background: var(--ac-bg-inset);
  color: var(--ac-text-soft);
  border: 1px solid var(--ac-line);
  white-space: nowrap;
}
.ac-badge--on   { background: var(--ac-accent-soft); color: var(--ac-accent-ink); border-color: transparent; }
.ac-badge--off  { background: var(--ac-bg-inset);    color: var(--ac-text-faint); }
.ac-badge--warn { background: var(--ac-warn-soft);   color: var(--ac-warn); border-color: transparent; }
.ac-badge--bad  { background: var(--ac-danger-soft); color: var(--ac-danger-ink); border-color: transparent; }

.ac-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac-text-faint); flex: none; }
.ac-dot--on  { background: var(--ac-accent); }
.ac-dot--off { background: var(--ac-line-strong); }

/* --------------------------------------------------------------- alerts -- */
.ac-alert {
  padding: .85rem 1rem;
  border-radius: var(--ac-radius);
  border: 1px solid var(--ac-line);
  background: var(--ac-bg-inset);
  color: var(--ac-text);
  margin-bottom: 1rem;
  font-size: .92rem;
}
.ac-alert p:last-child { margin-bottom: 0; }
.ac-alert--ok   { background: var(--ac-accent-soft); border-color: transparent; color: var(--ac-accent-ink); }
.ac-alert--bad  { background: var(--ac-danger-soft); border-color: transparent; color: var(--ac-danger-ink); }
.ac-alert--warn { background: var(--ac-warn-soft);   border-color: transparent; color: var(--ac-warn); }

/* --------------------------------------------------------------- tables -- */
.ac-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.ac-table th, .ac-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ac-line);
  vertical-align: middle;
}
.ac-table th {
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ac-text-faint);
  background: var(--ac-bg-sunk);
  white-space: nowrap;
}
.ac-table tbody tr:hover { background: var(--ac-bg-sunk); }
.ac-table td.ac-num { text-align: right; font-variant-numeric: tabular-nums; }
.ac-table .ac-thumb {
  width: 44px;
  height: 44px;
  /* In the stacked layout each cell becomes a flex container, and a flex item
     shrinks by default - which squashed these into a thin sliver next to a
     long prompt. Pin the size so they stay square. */
  flex: none;
  min-width: 44px;
  min-height: 44px;
  object-fit: cover;
  border-radius: var(--ac-radius-sm);
  background: var(--ac-bg-inset);
  display: block;
}

/* Larger variant where the image is the point rather than a hint - the saved
   prompts list, where you are scanning for a piece you recognise. */
.ac-table .ac-thumb--lg {
  width: 76px;
  height: 76px;
  min-width: 76px;
  min-height: 76px;
  border-radius: var(--ac-radius);
}

/* Card-style table rows once there is no room for columns. */
@media (max-width: 640px) {
  .ac-table--stack thead { display: none; }
  .ac-table--stack tr {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    margin-bottom: 10px;
    background: var(--ac-bg-raised);
  }
  .ac-table--stack td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border: 0;
    text-align: right;
  }
  .ac-table--stack td::before {
    content: attr(data-label);
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ac-text-faint);
    text-align: left;
  }
  .ac-table--stack td.ac-num { text-align: right; }
  /* A cell holding only a thumbnail has no label to sit opposite, so keep it
     left aligned rather than pushed to the right edge. */
  .ac-table--stack td:has(> .ac-thumb),
  .ac-table--stack td:has(> a > .ac-thumb) { justify-content: flex-start; }
}

/* ------------------------------------------------------------ app shell -- */
.ac-app { min-height: 100vh; background: var(--ac-bg-sunk); }

.ac-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--ac-topbar-h);
  padding: 0 16px;
  background: var(--ac-bg-raised);
  border-bottom: 1px solid var(--ac-line);
}
.ac-topbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 680;
  letter-spacing: -.02em;
  color: var(--ac-text);
  font-size: 1.05rem;
}
.ac-topbar__brand:hover { text-decoration: none; }

.ac-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  background: var(--ac-bg-raised);
  color: var(--ac-text);
  cursor: pointer;
  flex: none;
}
.ac-burger svg { width: 20px; height: 20px; }

.ac-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: var(--ac-sidebar-w);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ac-bg-raised);
  border-right: 1px solid var(--ac-line);
  transform: translateX(-100%);
  transition: transform .22s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ac-sidebar.is-open { transform: none; }

.ac-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 18px;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  color: var(--ac-text);
  border-bottom: 1px solid var(--ac-line);
}
.ac-sidebar__brand:hover { text-decoration: none; }

.ac-logo {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ac-brand), var(--ac-accent));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  flex: none;
}

.ac-user {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ac-line);
  background: var(--ac-bg-sunk);
}
.ac-user__name { font-weight: 620; font-size: .95rem; }
.ac-user__meta { font-size: .82rem; color: var(--ac-text-faint); }

.ac-nav { padding: 10px 10px 24px; flex: 1 1 auto; }
.ac-nav__label {
  padding: 14px 10px 6px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ac-text-faint);
}
.ac-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--ac-radius);
  color: var(--ac-text-soft);
  font-size: .92rem;
  font-weight: 520;
  line-height: 1.3;
  min-height: 40px;
}
.ac-nav a:hover { background: var(--ac-bg-inset); color: var(--ac-text); text-decoration: none; }
.ac-nav a.is-active { background: var(--ac-brand-soft); color: var(--ac-brand-ink); font-weight: 620; }
.ac-nav a svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.ac-nav a.is-active svg { opacity: 1; }

.ac-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(10, 12, 18, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.ac-scrim.is-open { opacity: 1; pointer-events: auto; }

.ac-main { padding: 20px 16px 64px; }
.ac-main__inner { max-width: 1160px; margin-inline: auto; }

.ac-page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.ac-page-head h1 { margin: 0; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); }
.ac-page-head p  { margin: .2rem 0 0; color: var(--ac-text-faint); font-size: .92rem; }

@media (min-width: 1024px) {
  .ac-sidebar { transform: none; }
  .ac-app { padding-left: var(--ac-sidebar-w); }
  .ac-topbar { display: none; }
  .ac-scrim { display: none; }
  .ac-main { padding: 32px 32px 80px; }
}

/* ------------------------------------------------------------- app foot -- */
.ac-appfoot {
  padding: 24px 0 0;
  margin-top: 32px;
  border-top: 1px solid var(--ac-line);
  color: var(--ac-text-faint);
  font-size: .85rem;
  text-align: center;
}

/* ------------------------------------------------ public site header/foot */
.ac-sitehead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ac-bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--ac-line);
}
.ac-sitehead__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}
.ac-sitehead__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 720;
  font-size: 1.12rem;
  letter-spacing: -.025em;
  color: var(--ac-text);
}
.ac-sitehead__brand:hover { text-decoration: none; }

.ac-sitenav { display: none; gap: 4px; align-items: center; }
.ac-sitenav a {
  padding: .5rem .7rem;
  border-radius: var(--ac-radius);
  color: var(--ac-text-soft);
  font-size: .93rem;
  font-weight: 540;
}
.ac-sitenav a:hover { background: var(--ac-bg-inset); color: var(--ac-text); text-decoration: none; }
.ac-sitenav a.is-active { color: var(--ac-text); font-weight: 640; }

.ac-sitehead__actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.ac-sitehead__actions .ac-btn { min-height: 40px; padding: .45em .95em; font-size: .92rem; }

#ac-mobile-nav {
  display: block;
  border-top: 1px solid var(--ac-line);
  padding: 10px 0 16px;
}
#ac-mobile-nav[hidden] { display: none; }
#ac-mobile-nav a {
  display: block;
  padding: 11px 4px;
  color: var(--ac-text);
  font-weight: 540;
  border-bottom: 1px solid var(--ac-line);
}
#ac-mobile-nav a:last-of-type { border-bottom: 0; }

@media (min-width: 900px) {
  .ac-sitenav { display: flex; }
  .ac-sitehead__burger { display: none; }
  #ac-mobile-nav { display: none !important; }
}

.ac-sitefoot {
  background: var(--ac-bg-sunk);
  border-top: 1px solid var(--ac-line);
  padding: 48px 0 32px;
  margin-top: 64px;
}
.ac-sitefoot__cols {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.ac-sitefoot h4 {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ac-text-faint);
  margin-bottom: .9rem;
}
.ac-sitefoot ul { list-style: none; margin: 0; padding: 0; }
.ac-sitefoot li { margin-bottom: .5rem; }
.ac-sitefoot li a { color: var(--ac-text-soft); font-size: .92rem; }
.ac-sitefoot li a:hover { color: var(--ac-text); }
.ac-sitefoot__base {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--ac-line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  color: var(--ac-text-faint);
  font-size: .85rem;
}

/* --------------------------------------------------------------- marketing */
.ac-hero {
  padding-block: clamp(3rem, 2rem + 6vw, 6.5rem);
  background:
    radial-gradient(1000px 480px at 15% -10%, var(--ac-brand-soft), transparent 65%),
    radial-gradient(760px 400px at 100% 0%, var(--ac-accent-soft), transparent 60%);
}
.ac-hero h1 { max-width: 18ch; }
.ac-hero__lede {
  font-size: clamp(1.02rem, .95rem + .45vw, 1.22rem);
  color: var(--ac-text-soft);
  max-width: 56ch;
}
.ac-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .3em .8em;
  margin-bottom: 1.1rem;
  border-radius: var(--ac-radius-pill);
  background: var(--ac-bg-raised);
  border: 1px solid var(--ac-brand-line);
  color: var(--ac-brand-ink);
  font-size: .8rem;
  font-weight: 620;
}

.ac-feature {
  background: var(--ac-bg-raised);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-lg);
  padding: 22px;
  height: 100%;
}
.ac-feature h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.ac-feature p  { margin: 0; font-size: .93rem; }
.ac-feature__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--ac-brand-soft);
  color: var(--ac-brand-ink);
  margin-bottom: 14px;
  font-size: 1.05rem;
}

.ac-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.ac-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
}
.ac-steps li::before {
  content: counter(step);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ac-brand);
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
}
.ac-steps h3 { margin: .2rem 0 .25rem; font-size: 1.02rem; }
.ac-steps p  { margin: 0; font-size: .93rem; }

.ac-price {
  background: var(--ac-bg-raised);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.ac-price--featured { border-color: var(--ac-brand); box-shadow: var(--ac-shadow-lg); }
.ac-price__amount { font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.ac-price__per { font-size: .9rem; color: var(--ac-text-faint); font-weight: 500; }
.ac-price ul { list-style: none; padding: 0; margin: 1.2rem 0; flex: 1 1 auto; }
.ac-price li {
  padding-left: 1.6rem;
  position: relative;
  margin-bottom: .6rem;
  font-size: .93rem;
  color: var(--ac-text-soft);
}
.ac-price li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ac-accent);
  font-weight: 700;
}

.ac-faq { border-top: 1px solid var(--ac-line); }
.ac-faq details { border-bottom: 1px solid var(--ac-line); }
.ac-faq summary {
  padding: 1.05rem 2rem 1.05rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  color: var(--ac-text);
}
.ac-faq summary::-webkit-details-marker { display: none; }
.ac-faq summary::after {
  content: "+";
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ac-text-faint);
  line-height: 1;
}
.ac-faq details[open] summary::after { content: "–"; }
.ac-faq details > div { padding-bottom: 1.1rem; }
.ac-faq details p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- generator -- */
.ac-gen { display: grid; gap: 22px; }
@media (min-width: 980px) {
  .ac-gen { grid-template-columns: minmax(320px, 380px) 1fr; align-items: start; }
  .ac-gen__panel { position: sticky; top: 24px; }
}

.ac-imggrid {
  display: grid;
  gap: 16px;
  /* auto-fill, not auto-fit. auto-fit collapses the tracks nothing lands in
     and hands their width to whatever is left, so a single result grew to the
     full width of the feed - a 1:1 card the size of the whole column, while
     four of them sat at a quarter of that each. Keeping the empty tracks means
     one image is the same size as one of four. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.ac-imgcard {
  background: var(--ac-bg-raised);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ac-imgcard__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--ac-bg-inset);
  display: block;
}
.ac-imgcard__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ac-imgcard__body .ac-input { min-height: 40px; padding: .45rem .65rem; font-size: .9rem; }

/* ------------------------------------------------------- prompt bar page -- */
/* A single-column feed with a chat-style pill pinned to the bottom of the
   content area, replacing the old sidebar-form generator layout. */
.ac-promptpage {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--ac-topbar-h) - 120px);
}
@media (min-width: 1024px) {
  .ac-promptpage { min-height: calc(100vh - 160px); }
}

.ac-feed {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
}

.ac-turn { display: flex; flex-direction: column; gap: 12px; }
.ac-turn__prompt {
  align-self: flex-start;
  max-width: min(100%, 640px);
  background: var(--ac-bg-inset);
  color: var(--ac-text-soft);
  border-radius: var(--ac-radius-lg);
  padding: .7rem 1rem;
  font-size: .92rem;
}
.ac-turn--pending .ac-turn__prompt { color: var(--ac-text); }
.ac-turn__pending-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .3rem .2rem;
  color: var(--ac-text-soft);
  font-size: .92rem;
}
.ac-turn__pending-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ac-brand);
  animation: ac-bounce-dot .7s ease-in-out infinite;
  flex: none;
}
@keyframes ac-bounce-dot {
  0%, 100% { transform: translateY(0) scale(1); opacity: .6; }
  50%      { transform: translateY(-3px) scale(1.2); opacity: 1; }
}
.ac-turn__foot { display: flex; justify-content: flex-end; }

/* The pill: row 1 is the borderless textarea, row 2 is the icon toolbar - the
   wrapper owns the border/focus ring, same technique as .ac-storefield. */
.ac-pill {
  position: sticky;
  bottom: 12px;
  background: var(--ac-bg-raised);
  border: 1px solid var(--ac-line-strong);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow);
  padding: 6px 8px 6px;
  margin-top: 10px;
}
.ac-pill:focus-within { border-color: var(--ac-brand); box-shadow: 0 0 0 3px var(--ac-brand-soft); }

.ac-pill__textarea {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ac-text);
  font: inherit;
  resize: none;
  max-height: 220px;
  overflow-y: auto;
  padding: .25rem .2rem .3rem;
  line-height: 1.45;
  /* A deliberate floor, not the 110px one the bare-control fallback at the
     foot of this file used to impose on every textarea inside .ac-main: that
     one also carried a .9rem bottom margin and outranked the rows="1" the
     markup asks for. This is just enough room to see a prompt taking shape
     before autoGrow() in art-ai.php starts extending the box. */
  min-height: 72px;
  margin: 0;
}
.ac-pill__textarea:focus { outline: none; }
.ac-pill__textarea::placeholder { color: var(--ac-text-faint); }

.ac-pill__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--ac-line);
  padding-top: 6px;
  margin-top: 4px;
}
.ac-pill__toolbar .ac-spacer { flex: 1 1 auto; }

/* Get inspired lives in the toolbar next to the image count. Sized down to sit
   level with the selects and icon buttons around it rather than at .ac-btn--sm's
   own 34px. */
.ac-pill__inspire {
  min-height: 32px;
  padding: .35em .7em;
  font-size: .8rem;
  white-space: nowrap;
  flex: none;
}
.ac-pill__inspire svg { width: 15px; height: 15px; }

.ac-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border-radius: var(--ac-radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ac-text-soft);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ac-icon-btn svg { width: 16px; height: 16px; }
.ac-icon-btn:hover { background: var(--ac-bg-inset); color: var(--ac-text); }
.ac-icon-btn[disabled] { opacity: .4; pointer-events: none; }
.ac-icon-btn--send { background: var(--ac-brand); color: #fff; }
.ac-icon-btn--send:hover { background: var(--ac-brand); filter: brightness(1.08); color: #fff; }
.ac-icon-btn--send[disabled] { background: var(--ac-bg-inset); color: var(--ac-text-faint); }
.ac-icon-btn.is-listening { background: var(--ac-danger-soft); color: var(--ac-danger-ink); animation: ac-mic-pulse 1s ease-in-out infinite; }
@keyframes ac-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--ac-danger-soft); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
.ac-icon-btn.is-loading { position: relative; color: transparent !important; }
.ac-icon-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ac-spin .7s linear infinite;
}

/* Flat by default - same background as the pill itself, so the toolbar reads
   as one surface rather than a row of separate grey boxes. Colour only shows
   up on hover/focus, as an affordance rather than a permanent outline. */
.ac-pill__select {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  border: 1px solid transparent;
  background-color: var(--ac-bg-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2378839a' stroke-width='1.6'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 16px;
  color: var(--ac-text);
  font: inherit;
  font-size: .8rem;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 1.6rem 0 .65rem;
  border-radius: var(--ac-radius-pill);
  max-width: 190px;
  /* Centred by line-height against the content box rather than by a top
     padding, which had forced the control to 42px - ten more than the icon
     buttons beside it, and the single biggest reason the pill sat so tall. */
  height: 32px;
  line-height: 30px;
  /* Same fallback as above, whose 44px floor silently outranked this height. */
  min-height: 0;
  margin: 0;
  cursor: pointer;
  transition: background-color .15s ease;
}
/* Stays plain white/raised at all times, including hover and focus - no
   colour change, no ring, just the same surface as the rest of the pill. */
.ac-pill__select:hover { background-color: var(--ac-bg-raised); }
.ac-pill__select:focus, .ac-pill__select:focus-visible {
  /* Some browsers draw their own native focus ring (a colour ring matching
     the control's own border-radius) that outline:none alone doesn't always
     suppress - box-shadow/border are zeroed explicitly here too. */
  outline: none;
  box-shadow: none;
  border-color: transparent;
  background-color: var(--ac-bg-raised);
}
.ac-pill__select::-moz-focus-inner { border: 0; }
.ac-pill__select--narrow { max-width: 165px; }

.ac-pill__count {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: var(--ac-radius-pill);
  height: 30px;
}
.ac-pill__count button {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ac-text-soft);
  cursor: pointer; font-size: 1rem; line-height: 1;
  transition: background-color .15s ease;
}
.ac-pill__count button:hover { background: var(--ac-bg-inset); color: var(--ac-text); }
.ac-pill__count span { width: 22px; text-align: center; font-size: .85rem; color: var(--ac-text); }

.ac-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ac-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  background: var(--ac-bg-inset);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-pill);
  font-size: .82rem;
  color: var(--ac-text-soft);
}
.ac-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.ac-chip button {
  border: 0; background: transparent; color: var(--ac-text-faint);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px;
}
.ac-chip button:hover { color: var(--ac-danger-ink); }

.ac-modes { display: grid; gap: 8px; }
.ac-mode {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--ac-line-strong);
  border-radius: var(--ac-radius);
  cursor: pointer;
  background: var(--ac-bg-raised);
  transition: border-color .15s ease, background-color .15s ease;
}
.ac-mode:hover { border-color: var(--ac-brand-line); }
.ac-mode input { margin: 3px 0 0; accent-color: var(--ac-brand); flex: none; width: 18px; height: 18px; }
.ac-mode__title { font-weight: 620; font-size: .93rem; }
.ac-mode__meta  { font-size: .82rem; color: var(--ac-text-faint); }
.ac-mode:has(input:checked) { border-color: var(--ac-brand); background: var(--ac-brand-soft); }

.ac-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(10, 12, 18, .72);
  backdrop-filter: blur(3px);
  padding: 20px;
  text-align: center;
  color: #fff;
}
.ac-overlay[hidden] { display: none; }
.ac-overlay__spinner {
  width: 46px; height: 46px;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ac-spin .8s linear infinite;
  margin: 0 auto 18px;
}
.ac-overlay p { color: rgba(255, 255, 255, .82); margin: .4rem 0 0; font-size: .92rem; }
.ac-overlay strong { font-size: 1.15rem; font-weight: 650; }

/* ---------------------------------------------------------------- modal --- */
.ac-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(10, 12, 18, .6);
}
.ac-modal[hidden] { display: none; }
.ac-modal__box {
  background: var(--ac-bg-raised);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 22px;
}
.ac-modal__box h3 { margin-top: 0; }
/* Wider than the default 520px, for a dialog holding a grid of cards rather
   than a short form - at 520px the prompt ideas would sit two to a row. */
.ac-modal__box--wide { max-width: 880px; }

/* ----------------------------------------------------------------- misc --- */
.ac-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--ac-text-faint);
  border: 1px dashed var(--ac-line-strong);
  border-radius: var(--ac-radius-lg);
}
.ac-empty h3 { color: var(--ac-text-soft); }

.ac-muted   { color: var(--ac-text-faint); }
.ac-small   { font-size: .85rem; }
.ac-center  { text-align: center; }
.ac-nowrap  { white-space: nowrap; }
.ac-mt-0 { margin-top: 0; }
.ac-mb-0 { margin-bottom: 0; }
.ac-mt-2 { margin-top: 1rem; }
.ac-mt-3 { margin-top: 1.5rem; }
.ac-mb-2 { margin-bottom: 1rem; }
.ac-mb-3 { margin-bottom: 1.5rem; }

.ac-key {
  font-family: var(--ac-mono);
  font-size: .85rem;
  color: var(--ac-text-soft);
  background: var(--ac-bg-inset);
  padding: .3em .6em;
  border-radius: var(--ac-radius-sm);
  border: 1px solid var(--ac-line);
}

.ac-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ac-brand);
  color: #fff;
  padding: .7rem 1rem;
  z-index: 200;
  border-radius: 0 0 var(--ac-radius) 0;
}
.ac-skip:focus { left: 0; }

.ac-prose h2 { margin-top: 2.2rem; }
.ac-prose h3 { margin-top: 1.7rem; }
.ac-prose ul, .ac-prose ol { color: var(--ac-text-soft); padding-left: 1.3rem; }
.ac-prose li { margin-bottom: .45rem; }
.ac-prose img { border-radius: var(--ac-radius); border: 1px solid var(--ac-line); margin: 1rem 0; }
.ac-prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .92rem; }
.ac-prose th, .ac-prose td { padding: 10px 12px; border-bottom: 1px solid var(--ac-line); text-align: left; }

@media print {
  .ac-sidebar, .ac-topbar, .ac-sitehead, .ac-sitefoot, .ac-scrim { display: none !important; }
  .ac-app { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Legacy compatibility
   Several dashboard pages still carry markup from before the redesign - bare
   inputs, .center_content wrappers, .tabs panels and unclassed tables. These
   rules give that markup the new look without touching each page, so nothing
   renders unstyled inside the new shell. New work should use the .ac-*
   components above instead of relying on any of this.
   ========================================================================== */

.ac-main .center_content,
.ac-main .center {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding: 0;
}

/* Bare form controls, styled to match .ac-input / .ac-select / .ac-textarea. */
/* :where() carries zero specificity, so this acts as a genuine fallback: any
   page stylesheet wins without having to out-specify it. Written as
   .ac-main input[type="text"] it scored (0,2,1) and quietly beat page rules
   like .form-input, leaving controls and buttons at mismatched heights. */
:where(.ac-main) :where(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea
) {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: .6rem .75rem;
  margin: 0 0 .9rem;
  font: inherit;
  color: var(--ac-text);
  background: var(--ac-bg-raised);
  border: 1px solid var(--ac-line-strong);
  border-radius: var(--ac-radius);
  -webkit-appearance: none;
  appearance: none;
}
:where(.ac-main) :where(textarea) { min-height: 110px; resize: vertical; }
:where(.ac-main) :where(input, select, textarea):focus {
  outline: none;
  border-color: var(--ac-brand);
  box-shadow: 0 0 0 3px var(--ac-brand-soft);
}
:where(.ac-main) :where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0 .4rem 0 0;
  accent-color: var(--ac-brand);
}
:where(.ac-main) :where(input[type="color"]) {
  width: 56px;
  height: 44px;
  padding: 4px;
  border: 1px solid var(--ac-line-strong);
  border-radius: var(--ac-radius);
  background: var(--ac-bg-raised);
  cursor: pointer;
}
:where(.ac-main) :where(input[type="file"]) { margin-bottom: .9rem; }

:where(.ac-main) :where(button:not([class]), input[type="submit"], input[type="button"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 44px;
  padding: .65em 1.15em;
  font: inherit;
  font-weight: 570;
  color: #fff;
  background: var(--ac-brand);
  border: 1px solid transparent;
  border-radius: var(--ac-radius);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
:where(.ac-main) :where(button:not([class]), input[type="submit"], input[type="button"]):hover { filter: brightness(1.08); }

/* Unclassed tables. */
:where(.ac-main) :where(table:not([class])) {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin-bottom: 1.2rem;
}
:where(.ac-main) :where(table:not([class])) :where(th, td) {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--ac-line);
}
:where(.ac-main) :where(table:not([class])) :where(th) {
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ac-text-faint);
  background: var(--ac-bg-sunk);
}
/* Older pages set zebra striping with hard-coded greys that clash in dark mode. */
:where(.ac-main) :where(tr[style*="background"]) { background: transparent !important; }
:where(.ac-main) :where(tr:nth-child(even)) { background: var(--ac-bg-sunk); }

/* .tabs / .tab-links panels (settings, size sets). */
.ac-main .tabs { margin-bottom: 1.5rem; }
.ac-main .tab-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--ac-line);
  overflow-x: auto;
}
.ac-main .tab-links li a {
  display: block;
  padding: .6rem .9rem;
  border-radius: var(--ac-radius) var(--ac-radius) 0 0;
  color: var(--ac-text-soft);
  font-size: .92rem;
  font-weight: 560;
  white-space: nowrap;
}
.ac-main .tab-links li a:hover { background: var(--ac-bg-inset); text-decoration: none; }
.ac-main .tab-links li.active a { color: var(--ac-brand-ink); background: var(--ac-brand-soft); }
.ac-main .tab-content .tab { display: none; }
.ac-main .tab-content .tab.active { display: block; }

/* Generic .container blocks used as cards on older pages. */
.ac-main .container {
  background: var(--ac-bg-raised);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-lg);
  padding: 18px;
  margin-bottom: 1.2rem;
}

.ac-main .error-message,
.ac-main .alert-box.error {
  color: var(--ac-danger-ink);
  background: var(--ac-danger-soft);
  padding: .7rem .9rem;
  border-radius: var(--ac-radius);
}
.ac-main .success-message,
.ac-main .alert-box.success:not(:empty) {
  color: var(--ac-accent-ink);
  background: var(--ac-accent-soft);
  padding: .7rem .9rem;
  border-radius: var(--ac-radius);
}
.ac-main .alert-box:empty { display: none; }

/* Nothing in the dashboard should be able to scroll the page sideways. */
:where(.ac-main) :where(img) { max-width: 100%; height: auto; }
.ac-main pre { overflow-x: auto; }

/* ------------------------------------------------------ credit readouts --- */
/* acSetCredits() flashes these when the balance changes, so a deduction in the
   corner of the eye is noticed rather than silently different. */
.ac-credits-bump { animation: ac-credits-bump .6s ease; }

@keyframes ac-credits-bump {
  0%   { color: var(--ac-accent-ink); transform: scale(1); }
  30%  { color: var(--ac-accent-ink); transform: scale(1.22); }
  100% { color: inherit; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ac-credits-bump { animation: none; }
}

/* ---------------------------------------------- store address field ------ */
.ac-storefield {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ac-line-strong);
  border-radius: var(--ac-radius);
  background: var(--ac-bg-raised);
  overflow: hidden;
}
.ac-storefield:focus-within {
  border-color: var(--ac-brand);
  box-shadow: 0 0 0 3px var(--ac-brand-soft);
}
.ac-storefield .ac-input {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  flex: 1 1 auto;
  text-align: right;
}
.ac-storefield .ac-input:focus { box-shadow: none; }
.ac-storefield__suffix {
  display: flex;
  align-items: center;
  padding: 0 .8rem;
  background: var(--ac-bg-inset);
  border-left: 1px solid var(--ac-line);
  color: var(--ac-text-soft);
  font-size: .92rem;
  white-space: nowrap;
}

/* ------------------------------------------------- Etsy finish previews - */
/* The generated mockup images on etsy_listings.php (lib/ac_mockup.php) -
   whole-product shots of a canvas, acrylic or matted print. Contained
   rather than cropped, because their proportions are the whole point of the
   preview and a portrait piece has to sit in the same narrow column as a
   landscape one without either being cut about. */
.mockup-thumb {
  display: block;
  /* A fixed box, with the picture contained inside it rather than sizing it.
     Sitting side by side, a portrait canvas and a landscape acrylic would
     otherwise be different heights and push the controls beneath them out of
     line with each other, which makes the three hard to compare. */
  width: 100%;
  height: 200px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--ac-bg-raised);
  border: 1px solid var(--ac-line-strong);
}
/* An artwork's previews sit side by side rather than stacked: there are at
   most three, each is a whole-product shot, and comparing them is the point -
   which one leads the listing is a choice between them, not a value read off
   each in turn. They wrap when the column runs out of room. */
.mockup-set {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
}
.mockup-row { flex: 0 1 220px; min-width: 180px; }

/* The preview chosen to lead the Etsy listing. Worth marking on the picture
   itself and not only in the checkbox: an artwork offers up to three previews
   stacked in one narrow cell, and which one Etsy will show first is the thing
   a seller is actually scanning the column for. */
.mockup-row:has(.mockup-feature:checked) .mockup-thumb {
  border-color: var(--ac-brand);
  box-shadow: 0 0 0 2px var(--ac-brand-line);
}
.mockup-feature-wrap { font-weight: 600; }

/* ------------------------------------------------------- artwork groups -- */
/* The dashboard's own organiser (lib/ac_groups.php). Private to the artist:
   a group never changes what a shopper sees, which is decided by the
   artwork's own active flag. */
.ac-groupbar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ac-line);
}
/* Its own row rule rather than borrowing .ac-chiprow, so the groups UI does
   not depend on a class the prompt bar owns. */
.ac-gchiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
}

.ac-gchip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .35em .8em;
  min-height: 32px;
  border: 1px solid var(--ac-line-strong);
  border-radius: var(--ac-radius-pill);
  background: var(--ac-bg-raised);
  color: var(--ac-text);
  font: inherit;
  font-size: .85rem;
  font-weight: 550;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.ac-gchip:hover { background: var(--ac-bg-inset); }
.ac-gchip.is-on {
  border-color: var(--ac-brand);
  background: var(--ac-brand-soft);
  color: var(--ac-brand-ink);
}
/* Named .ac-gchip, not .ac-chip: that one is already the reference-image chip
   in the prompt bar, and a second definition later in this file would silently
   restyle it. */
/* A group kept out of the main list still gets a chip - out of the way is not
   the same as out of reach - but it should not compete with the rest. */
.ac-gchip.is-quiet { color: var(--ac-text-soft); border-style: dashed; }
.ac-gchip__n { color: var(--ac-text-faint); font-weight: 500; }
.ac-gchip.is-on .ac-gchip__n { color: inherit; opacity: .75; }

.ac-groups-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ac-line);
}
.ac-grouprow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ac-line);
}
.ac-grouprow:last-child { border-bottom: 0; }
.ac-grouprow .ac-input { max-width: 240px; margin: 0; }
.ac-grouprow .ac-check { margin: 0; white-space: nowrap; }

/* Sticks to the foot of the viewport while pieces are ticked, so the move
   controls stay reachable however far down a long catalogue you have scrolled
   to make the selection. */
.ac-selectbar {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--ac-bg-raised);
  border: 1px solid var(--ac-brand-line);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow);
}
.ac-selectbar .ac-select, .ac-selectbar .ac-input { margin: 0; min-height: 34px; }

/* ----------------------------------------------------- prompt suggester -- */
/* Admin curation (admin/prompt-suggester.php) and the seller-facing shelf on
   the generator page share these cards, so a suggestion looks the same to the
   person choosing it as to the person who approved it. */
.ps-cat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ac-line);
}
.ps-cat:last-child { border-bottom: 0; }
.ps-cat .ac-input { max-width: 240px; margin: 0; }
.ps-cat .ac-check { margin: 0; white-space: nowrap; }

.ps-idea {
  padding: 10px 0;
  border-bottom: 1px solid var(--ac-line);
}
.ps-idea:last-child { border-bottom: 0; }
.ps-idea p { margin: .25rem 0 .5rem; }

.ps-grid {
  display: grid;
  gap: 16px;
  /* auto-fill, not auto-fit: one suggestion should be card-sized, not stretched
     across the whole panel. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.ps-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-bg-raised);
  min-width: 0;
}
.ps-card.is-off { opacity: .55; }
.ps-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--ac-radius);
  background: var(--ac-bg-inset);
  overflow: hidden;
}
.ps-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-card__title { font-size: .95rem; }
/* Clamped rather than truncated with an ellipsis on one line: two lines is
   enough to tell two seascapes apart, which one line often is not. */
.ps-card__prompt {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The seller's shelf: a button, because picking one fills the prompt box. */
button.ps-card {
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
button.ps-card:hover {
  border-color: var(--ac-brand);
  box-shadow: 0 0 0 3px var(--ac-brand-soft);
}
.ac-suggest {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ac-line);
  text-align: left;
}
.ac-suggest__head {
  margin: 0 0 12px;
  font-size: .95rem;
  font-weight: 650;
}

/* --------------------------------------------------------------- frames -- */
/* A moulding drawn round an element. The nine-patch is generated on upload
   (lib/ac_frames.php) so one image serves every size and proportion - the
   border-width is the only thing that changes between a thumbnail and a
   full-size preview. */
.fr-preview {
  border-style: solid;
  /* A starting point only: js/frames.js replaces this with the moulding's
     real face width measured against the print it surrounds, so a wide
     moulding draws wide and every frame scales with the picture. This value
     is what shows if that script has not run yet. */
  border-width: 26px;
  border-image-slice: 33.333% fill;
  border-image-repeat: round;
  background: var(--ac-bg-inset);
  line-height: 0;
}
.fr-preview img { width: 100%; height: auto; display: block; }
.fr-preview__blank {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--ac-text-faint);
}

.fr-admin {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.fr-admin__item {
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-lg);
  padding: 14px;
  background: var(--ac-bg-raised);
  min-width: 0;
}
.fr-admin__item.is-off { opacity: .55; }
.fr-admin__item .ac-label { font-size: .78rem; }

/* The swatches a shopper picks a moulding from: square, because a corner
   sample is square and a row of them reads as a set of choices rather than a
   gallery. */
.sf-frames { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.sf-frame {
  width: 66px;
  height: 66px;
  padding: 0;
  border: 2px solid var(--ac-line-strong, #ccd2dd);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}
.sf-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-frame:hover { border-color: #888; }
.sf-frame.is-selected { border-color: #222; box-shadow: 0 0 0 2px rgba(0,0,0,.12); }
/* border-width takes no percentages - the 7% that used to be here was
   invalid, silently dropped, and left every frame at the 26px fallback above
   however large the photo was. The width is set in script instead. */
.sf-framed { max-width: 100%; }