/* ══ MINI APPS (2026-10-07) — app.hermoso.ai/tools and /tools/<slug> ═════════════════════════════════════════════
   Standalone one-page tools: no sidebar, usable logged out up to Generate. These pages do
   NOT load style.css (760KB); like public/auth-card.css they re-declare the handful of app tokens they read, with the
   SAME values the app computes in each theme. The theme is the app's own toggle (heist.theme, light by default),
   applied before paint by /auth-theme.js. Buttons that share a row share ONE height (equal-height-buttons). ══ */
body.mini-page {
  --bg: #0a0a0a; --surface: #171717; --surface-2: #242424; --text: #fafafa;
  --muted: #a1a1a1; --faint: #8f8f8f; --border: #2a2a2a; --border-2: #3a3a3a;
  --accent-text: #ef6f5e; --cta: #C24436; --cta-ink: #ffffff; --good: #3ecf8e; --warn: #f5a524; --danger: #ef6f5e;
  --radius: 12px; --radius-sm: 8px; --btn-h: 40px;
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); color-scheme: dark;
  font-family: var(--font); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body.mini-page.light {
  --bg: #fafafa; --surface: #ffffff; --surface-2: #f0f0f0; --text: #171717;
  --muted: #4d4d4d; --faint: #6b6b6b; --border: #ebebeb; --border-2: #e0e0e0;
  --accent-text: #B23A2C; --cta: #B23A2C; --good: #0f7b4b; --warn: #8a5a00; --danger: #B23A2C;
  color-scheme: light;
}
body.mini-page *, body.mini-page *::before, body.mini-page *::after { box-sizing: border-box; }
body.mini-page [hidden] { display: none !important; }
:where(body.mini-page a) { color: var(--accent-text); text-decoration: none; }
:where(body.mini-page button) { font: inherit; cursor: pointer; color: inherit; }
:where(body.mini-page input, body.mini-page textarea, body.mini-page select) { font: inherit; color: inherit; }

/* ── top bar ── */
.mini-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 56px;
  padding: 0 max(16px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mini-brand { display: inline-flex; align-items: baseline; font-weight: 600; font-size: 17px; color: var(--text) !important; letter-spacing: .01em; }
.mini-brand i { opacity: .55; font-style: italic; }
.mini-crumb { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-crumb a { color: var(--muted); }
.mini-crumb a:hover { color: var(--text); }
.mini-top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mini-credits { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── buttons: one height per row ── */
.mini-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--btn-h);
  padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface);
  color: var(--text) !important; font-weight: 500; white-space: nowrap; line-height: 1; }
.mini-btn:hover { border-color: var(--faint); }
.mini-btn.primary { background: var(--cta); border-color: var(--cta); color: var(--cta-ink) !important; font-weight: 600; }
.mini-btn.primary:hover { filter: brightness(1.06); }
.mini-btn:disabled { opacity: .55; cursor: default; filter: none; }
.mini-btn.sm { --btn-h: 32px; padding: 0 12px; font-size: 13px; }
.mini-btn.block { width: 100%; }

/* ── tool page layout ── */
.mini-wrap { max-width: 1120px; margin: 0 auto; padding: 28px 16px 64px; }
.mini-head h1 { font-size: 28px; line-height: 1.15; margin: 0 0 6px; letter-spacing: -.02em; font-weight: 600; }
.mini-head p { margin: 0; color: var(--muted); font-size: 15px; max-width: 640px; }
.mini-grid2 { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
@media (max-width: 860px) { .mini-grid2 { grid-template-columns: minmax(0, 1fr); } .mini-head h1 { font-size: 24px; } }
.mini-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.mini-form { display: flex; flex-direction: column; gap: 16px; }
.mini-field { display: flex; flex-direction: column; gap: 6px; }
.mini-label { font-size: 12.5px; font-weight: 600; color: var(--text); display: flex; align-items: baseline; gap: 6px; }
.mini-label small { font-weight: 400; color: var(--faint); }
.mini-input, .mini-textarea, .mini-select { width: 100%; border: 1px solid var(--border-2); background: var(--bg);
  border-radius: var(--radius-sm); padding: 9px 11px; outline: none; font-size: 14px; }
.mini-input:focus, .mini-textarea:focus, .mini-select:focus { border-color: var(--faint); }
.mini-textarea { min-height: 84px; resize: vertical; }
.mini-hint { font-size: 12px; color: var(--faint); }
.mini-or { font-size: 12px; color: var(--faint); text-align: center; }
.mini-drop { border: 1px dashed var(--border-2); border-radius: var(--radius-sm); padding: 14px; text-align: center;
  color: var(--muted); font-size: 13px; cursor: pointer; background: var(--bg); }
.mini-drop:hover, .mini-drop.over { border-color: var(--faint); color: var(--text); }
.mini-drop b { color: var(--text); font-weight: 500; }
.mini-file { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); background: var(--bg); }
.mini-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-file button { border: 0; background: none; color: var(--muted); padding: 0 4px; font-size: 16px; line-height: 1; }
.mini-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--bg);
  color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.mini-chip[aria-pressed="true"] { border-color: var(--text); color: var(--text); background: var(--surface-2); }
.mini-chip img { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
.mini-price { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.mini-price-txt { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mini-price-txt b { color: var(--text); font-weight: 600; }
.mini-msg { font-size: 13px; color: var(--muted); }
.mini-msg.err { color: var(--danger); }
.mini-msg.ok { color: var(--good); }

/* ── result pane ── */
.mini-stage { min-height: 360px; display: flex; flex-direction: column; gap: 14px; }
.mini-empty { flex: 1; display: grid; place-items: center; text-align: center; color: var(--faint); padding: 32px 12px;
  border: 1px dashed var(--border); border-radius: var(--radius); min-height: 320px; }
.mini-empty .ic { font-size: 28px; margin-bottom: 8px; color: var(--muted); }
.mini-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; grid-auto-rows: min-content; }
.mini-result { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.mini-result img, .mini-result video { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: #000; }
.mini-result-meta { padding: 8px 10px; font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.mini-result-meta a { font-weight: 500; }
.mini-ad { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.mini-ad img, .mini-ad video { width: 100%; height: auto; display: block; background: #000; max-height: 420px; object-fit: contain; }
.mini-ad-b { padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.mini-ad-b b { font-size: 13px; }
.mini-ad-b p { margin: 0; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mini-ad-b small { color: var(--faint); }
.mini-progress { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--radius); }
.mini-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-2); border-top-color: var(--text);
  animation: mini-spin 0.9s linear infinite; flex: none; }
@keyframes mini-spin { to { transform: rotate(360deg); } }
.mini-next { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-note { font-size: 13px; color: var(--muted); white-space: pre-wrap; }
.mini-note b { color: var(--text); }
.mini-results > .mini-card, .mini-tiles > .mini-card { grid-column: 1 / -1; }

/* ── tools grid (/tools) ── */
.mini-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 24px; grid-auto-rows: min-content; }
.mini-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--text) !important; min-height: 118px; }
.mini-tile:hover { border-color: var(--border-2); background: var(--surface-2); }
.mini-tile-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2);
  color: var(--text); margin-bottom: 4px; }
.mini-tile-ic svg { width: 18px; height: 18px; }
.mini-tile b { font-size: 14.5px; font-weight: 600; }
.mini-tile span { font-size: 13px; color: var(--muted); }
.mini-sect { margin-top: 36px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.mini-foot { margin-top: 40px; font-size: 12px; color: var(--faint); display: flex; gap: 14px; flex-wrap: wrap; }
.mini-foot a { color: var(--faint); }

/* ── inline sign-in / credit wall modal (the app's sign-in card, over the tool) ── */
.mini-modal.authgate { background: color-mix(in srgb, #000 55%, transparent); z-index: 4000; }
.mini-modal-card { max-width: 400px; max-height: calc(100vh - 32px); overflow: auto; }
.mini-modal-x { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; border-radius: 8px; }
.mini-modal-x:hover { background: var(--surface-2); color: var(--text); }
body.mini-modal-open { overflow: hidden; }
.mini-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; text-align: left; }
@media (max-width: 420px) { .mini-plans { grid-template-columns: 1fr; } }
.mini-plan { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-2);
  background: var(--bg); color: var(--text); text-align: left; min-height: 74px; }
.mini-plan:hover { border-color: var(--faint); }
.mini-plan b { font-size: 13.5px; }
.mini-plan span { font-size: 15px; font-weight: 600; }
.mini-plan span small { font-weight: 400; color: var(--muted); font-size: 12px; }
.mini-plan em { font-style: normal; font-size: 12px; color: var(--muted); }
.mini-plan:disabled { opacity: .6; }
.mini-modal-card .mini-btn.block { margin-top: 6px; }
.mini-modal-card .mini-msg { margin-top: 8px; text-align: center; }
.mini-brandline { font-size: 12.5px; color: var(--muted); }
.mini-brandline b { color: var(--text); font-weight: 500; }
.mini-toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 5000;
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 13.5px; max-width: calc(100vw - 32px);
  box-shadow: 0 6px 24px rgba(0,0,0,.25); transition: opacity .35s; pointer-events: none; }
.mini-toast.err { background: var(--danger); color: #fff; }
.mini-toast.out { opacity: 0; }
@media (max-width: 520px) { .mini-top .mini-crumb { display: none; } .mini-top-r .mini-btn.sm:first-of-type { display: none; } }
.mini-empty .ic svg { width: 28px; height: 28px; display: inline-block; }
@media (max-width: 860px) { .mini-stage { min-height: 0; } .mini-empty { min-height: 140px; padding: 20px 12px; } }
/* real-face confirm card (thumbnail maker), the app's own wording: a box to tick, then Confirm or Cancel */
.mini-likeness { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); }
.mini-likeness p { margin: 0; color: var(--muted); font-size: 13.5px; }
.mini-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.mini-check input { margin-top: 3px; width: 16px; height: 16px; flex: none; }
.mini-likeness .mini-next { justify-content: flex-end; }
/* signed-in top bar: balance + Buy credits, Library, Open Hermoso, account menu (Library/Open move into the menu on phones) */
.mini-acct { position: relative; }
.mini-acct-btn { padding: 0 9px; }
.mini-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 10px; padding: 6px; box-shadow: 0 8px 28px rgba(0,0,0,.18); z-index: 30; display: flex; flex-direction: column; }
.mini-menu a, .mini-menu button { display: block; text-align: left; padding: 8px 10px; border-radius: 6px; color: var(--text) !important; background: none; border: 0; font-size: 13.5px; }
.mini-menu a:hover, .mini-menu button:hover { background: var(--surface-2); }
.mini-menu-who { padding: 6px 10px 8px; font-size: 12px; color: var(--faint); border-bottom: 1px solid var(--border); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-show-sm { display: none !important; }
@media (max-width: 640px) { .mini-hide-sm { display: none !important; } .mini-show-sm { display: block !important; } .mini-credits { font-size: 12px; } }
/* a choice that has pictures (restyle looks) is a tile grid: the picture is the point. grid-auto-rows: min-content is
   the WebKit rule for a capped scrolling grid (webkit-mobile-layout: auto rows collapse under aspect-ratio tiles). */
.mini-chips:has(img) { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); grid-auto-rows: min-content; gap: 8px; max-height: 340px; overflow: auto; padding: 2px; }
.mini-chips:has(img) .mini-chip { height: auto; flex-direction: column; align-items: stretch; gap: 4px; border-radius: 10px; padding: 5px 5px 6px; font-size: 12px; line-height: 1.25; text-align: center; }
.mini-chips:has(img) .mini-chip img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; object-fit: cover; }
.mini-chips:has(img) .mini-chip:not(:has(img)) { justify-content: center; min-height: 92px; }
.mini-results:has(> .mini-result:only-child) { grid-template-columns: minmax(0, 1fr); }
.mini-results > .mini-result:only-child img, .mini-results > .mini-result:only-child video { max-height: 62vh; }

/* ══ DESIGN PASS (2026-10-07, owner: "very basic. Maybe we can add a little more color or design flair") ══════════════
   Typeset stays the system: hairlines, 6–12px radii, Geist. The colour comes from ONE accent (--cta, #B23A2C light /
   #C24436 dark) used as a soft tint behind headers and marks, never as body text on a tint. Real outputs carry the rest. */
body.mini-page { --tint: color-mix(in srgb, var(--cta) 9%, var(--surface)); --tint-2: color-mix(in srgb, var(--cta) 16%, var(--surface)); --ring: color-mix(in srgb, var(--cta) 38%, var(--border-2)); }

/* hero strip: mark + name + promise + facts on the left, up to three real outputs on the right */
.mini-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: center;
  padding: 24px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: radial-gradient(90% 120% at 0% 0%, var(--tint-2), transparent 55%), radial-gradient(70% 90% at 100% 100%, var(--tint), transparent 60%), var(--surface); }
.mini-hero.no-ex { grid-template-columns: minmax(0, 1fr); }
.mini-hero-t { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.mini-hero-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--cta);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cta) 30%, transparent); margin-bottom: 4px; }
.mini-hero-ic svg { width: 24px; height: 24px; }
.mini-hero-ic.logo { background: #fff; box-shadow: 0 0 0 1px var(--border-2); padding: 9px; }
.mini-hero-ic.logo img { width: 100%; height: 100%; object-fit: contain; }
.mini-kicker { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.mini-hero h1 { font-size: 30px; line-height: 1.12; margin: 0; letter-spacing: -.025em; font-weight: 600; }
.mini-hero p { margin: 0; color: var(--muted); font-size: 15px; max-width: 560px; }
.mini-facts { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mini-facts li { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-2); color: var(--text); }
.mini-hero-ex { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; align-self: stretch; padding-bottom: 20px; }
.mini-hero-ex.n1 { --n: 1; max-width: 260px; justify-self: end; } .mini-hero-ex.n2 { --n: 2; } .mini-hero-ex.n3 { --n: 3; }
.mini-ex { display: block; border-radius: 12px; overflow: hidden; background: var(--surface-2); aspect-ratio: 9 / 13; box-shadow: 0 0 0 1px var(--border); }
.mini-ex:nth-child(2) { transform: translateY(10px); }
.mini-ex img, .mini-ex video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-ex-cap { position: absolute; left: 0; bottom: 0; font-size: 11.5px; color: var(--faint); }
@media (max-width: 860px) {
  .mini-hero { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 16px; }
  .mini-hero h1 { font-size: 24px; }
  .mini-hero-ex { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
  .mini-hero-ex.n1 { max-width: 180px; justify-self: start; }
  .mini-ex { aspect-ratio: 4 / 5; } .mini-ex:nth-child(2) { transform: none; }
}

/* "See more settings": a quiet full-width row inside the form; the block it opens is the same form, set off by a hairline */
.mini-more-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px dashed var(--border-2); background: transparent; color: var(--text); font-weight: 500; font-size: 13.5px; }
.mini-more-btn small { font-size: 11.5px; font-weight: 600; color: var(--accent-text); background: var(--tint); border-radius: 999px; padding: 1px 8px; }
.mini-more-btn svg { margin-left: auto; transition: transform .2s; color: var(--muted); }
.mini-more-btn.open svg { transform: rotate(180deg); }
.mini-more-btn:hover { border-color: var(--faint); }
.mini-more { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; border-top: 1px solid var(--border); }
.mini-more:not([hidden]) { padding-top: 16px; }

/* several images: thumbnails with a remove, then the drop zone and a link row (input and button one height) */
.mini-imgs { display: flex; flex-direction: column; gap: 8px; }
.mini-img-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mini-img-list:empty { display: none; }
.mini-img { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 1px var(--border-2); }
.mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-img button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.62); color: #fff; font-size: 14px; line-height: 1; display: grid; place-items: center; }
.mini-img-n { font-size: 12px; color: var(--faint); }
.mini-linkrow { display: flex; gap: 8px; }
.mini-linkrow .mini-input { flex: 1; min-width: 0; height: var(--btn-h); }

/* empty state + result cards */
.mini-empty { background: radial-gradient(70% 70% at 50% 30%, var(--tint), transparent 70%), var(--surface); border-style: dashed; }
.mini-empty-in { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 300px; }
.mini-empty-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); color: var(--accent-text); box-shadow: 0 0 0 1px var(--border-2); margin-bottom: 6px; }
.mini-empty-ic svg { width: 24px; height: 24px; }
.mini-empty-in b { color: var(--text); font-weight: 600; font-size: 14px; }
.mini-empty-in span:last-child { font-size: 12.5px; }
.mini-result { background: var(--surface); box-shadow: 0 1px 0 var(--border), 0 12px 32px -18px rgba(0,0,0,.35); border-radius: 14px; }
.mini-result-meta { padding: 10px 12px; }
.mini-result-meta span { color: var(--text); font-weight: 500; }

/* the grid: tool cards with real outputs, then the models */
.mini-tile { padding: 0; overflow: hidden; gap: 0; min-height: 0; transition: border-color .15s, transform .15s; }
.mini-tile:hover { transform: translateY(-1px); border-color: var(--ring); background: var(--surface); }
.mini-tile-pics { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.mini-tile-pics img { width: 100%; height: 100%; object-fit: cover; display: block; min-width: 0; }
.mini-tile-pics.art { display: grid; place-items: center; background: radial-gradient(110% 90% at 15% 0%, var(--tint-2), transparent 60%), var(--tint); }
.mini-tile-pics.art .mini-tile-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--surface); color: var(--accent-text); box-shadow: 0 0 0 1px var(--border-2); margin: 0; }
.mini-tile-pics.art .mini-tile-ic svg { width: 22px; height: 22px; }
.mini-tile-b { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.mini-tile-b.row { flex-direction: row; align-items: center; gap: 12px; }
.mini-tile-b.row > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.mini-tile-ic.sm { margin: 0; flex: none; }
.mini-tiles.slim { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mini-models { margin-top: 44px; }
.mini-sect-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.mini-sect-h h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; font-weight: 600; }
.mini-sect-h p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.mini-mfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mini-mfilter .mini-input { width: 240px; max-width: 100%; height: 32px; padding: 0 11px; }
.mini-mtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); grid-auto-rows: min-content; gap: 10px; margin-top: 16px; }
.mini-mt { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); color: var(--text) !important; transition: border-color .15s, transform .15s; }
.mini-mt:hover { border-color: var(--ring); transform: translateY(-1px); }
.mini-mt-pic { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.mini-mt-pic > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-mt-pic.art { background: radial-gradient(100% 100% at 20% 0%, var(--tint-2), transparent 65%), var(--tint); }
.mini-mt-logo { width: 52px; height: 52px; border-radius: 12px; background: #fff; display: grid; place-items: center; padding: 10px; box-shadow: 0 0 0 1px var(--border-2); color: #171717; }
.mini-mt-logo img { width: 100%; height: 100%; object-fit: contain; }
.mini-mt-logo svg { width: 24px; height: 24px; }
.mini-mt-kind, .mini-mt-new { position: absolute; top: 8px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.mini-mt-kind { left: 8px; background: rgba(0,0,0,.6); color: #fff; }
.mini-mt-new { right: 8px; background: var(--cta); color: #fff; }
.mini-mt-b { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.mini-mt-b b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-mt-b span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-mt-b em { font-style: normal; font-size: 12px; color: var(--text); margin-top: 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .mini-mtiles { grid-template-columns: 1fr 1fr; } .mini-mfilter, .mini-mfilter .mini-input { width: 100%; } }

/* ══ THE CREDIT WALL (2026-10-07, owner: "more separation between plans and credits") ══ */
.mini-modal-card.wide { max-width: 600px; text-align: left; }
.mini-modal-card.wide .authgate-h, .mini-modal-card.wide .authgate-sub { text-align: center; }
.mw-claim { margin: 4px 0 2px; }
.mw-sec { margin-top: 18px; text-align: left; }
.mw-sec-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.mw-sec-h h2 { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.mw-sec-h span { font-size: 12.5px; color: var(--muted); }
.mw-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: stretch; }
.mw-plan { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 12px 12px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--surface); }
.mw-plan.pop { border-color: var(--cta); box-shadow: 0 0 0 1px var(--cta), 0 10px 26px -16px color-mix(in srgb, var(--cta) 70%, transparent); background: radial-gradient(120% 80% at 50% 0%, var(--tint), transparent 70%), var(--surface); }
.mw-badge { position: absolute; top: -10px; left: 12px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--cta); color: #fff; }
.mw-plan-n { font-size: 14px; }
.mw-plan-p { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.mw-plan-p small { font-size: 12.5px; font-weight: 400; color: var(--muted); margin-left: 2px; }
.mw-plan-c { font-size: 12.5px; color: var(--muted); }
.mw-plan .mini-btn { margin-top: auto; }
.mw-plan .mw-plan-c + .mini-btn, .mw-plan .mw-plan-c:last-of-type { margin-bottom: 0; }
.mw-plan > .mini-btn { margin-top: 12px; }
.mw-sec-packs { padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.mw-packs { display: flex; flex-direction: column; gap: 6px; }
.mw-pack { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.mw-pack-c { display: flex; flex-direction: column; min-width: 0; }
.mw-pack-c b { font-size: 13.5px; font-weight: 600; }
.mw-pack-c small { font-size: 11.5px; color: var(--muted); }
.mw-pack .mini-btn { min-width: 96px; }
.mw-card { margin: 8px 2px 0; font-size: 12px; color: var(--muted); }
.mw-ar { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-2); display: flex; flex-direction: column; gap: 6px; }
.mw-ar { text-align: left; }
.mw-ar-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.mw-ar-t { flex: 1; min-width: 0; line-height: 2; }
.mw-ar-t .mw-ar-pack { margin: 0 4px; vertical-align: middle; }
.mw-ar-pack { height: 28px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--bg); padding: 0 6px; font-size: 13px; }
.mw-ar-sub { margin: 0; font-size: 12px; color: var(--muted); }
.mw-ar-thr { display: block; font-size: 13px; line-height: 2.4; padding-left: 46px; }
.mw-ar-thr .mini-input { display: inline-block; vertical-align: middle; margin: 0 4px; }
.mw-ar-sub { padding-left: 46px; }
.mw-ar-thr .mini-input { width: 96px; height: 32px; padding: 0 8px; }
.mw-switch { position: relative; width: 36px; height: 20px; flex: none; }
.mw-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.mw-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--border-2); transition: background .15s; }
.mw-switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.mw-switch input:checked + span { background: var(--cta); }
.mw-switch input:checked + span::after { transform: translateX(16px); }
.mw-switch input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.mw-foot { margin: 14px 0 0; font-size: 12.5px; text-align: center; }
@media (max-width: 520px) { .mw-plans { grid-template-columns: 1fr; gap: 14px; } .mw-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; row-gap: 2px; padding: 14px 14px 12px; } .mw-plan-n { grid-column: 1; } .mw-plan-p { grid-column: 2; grid-row: 1; font-size: 20px; } .mw-plan-c, .mw-plan > .mini-btn { grid-column: 1 / -1; } .mw-plan > .mini-btn { margin-top: 10px; } }

/* Ad Multiplier: the plan card (versions listed, exact total, one button), the Library picker, and versions still rendering */
.mini-mplan h3 { margin: 0 0 8px; font-size: 15px; }
.mini-mplan ol { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.mini-mplan li b { display: block; font-size: 13.5px; }
.mini-mplan li span { font-size: 12.5px; color: var(--muted); }
.mini-mplan .mini-hint { margin: 0 0 10px; }
.mini-result-wait { min-height: 200px; display: grid; place-items: center; background: var(--surface-2); }
.mini-result-wait .mini-progress { border: 0; }
.mini-libbtn { align-self: flex-start; }
.mini-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: min-content; gap: 8px; max-height: 60vh; overflow: auto; margin-top: 12px; }
.mini-lib-it { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.mini-lib-it:hover { border-color: var(--ring); }
.mini-lib-it img, .mini-lib-it video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-lib-k { position: absolute; left: 6px; top: 6px; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; }

/* a picture result sits on the card's own surface, never a black letterbox (black stays behind video) */
.mini-result img { background: var(--surface-2); }