/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.pointer-events-none{
  pointer-events: none;
}
.visible{
  visibility: visible;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.bottom-1{
  bottom: 0.25rem;
}
.left-1{
  left: 0.25rem;
}
.right-1{
  right: 0.25rem;
}
.top-1{
  top: 0.25rem;
}
.col-span-3{
  grid-column: span 3 / span 3;
}
.col-span-4{
  grid-column: span 4 / span 4;
}
.col-span-full{
  grid-column: 1 / -1;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-8{
  margin-top: 2rem;
}
.block{
  display: block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.hidden{
  display: none;
}
.aspect-square{
  aspect-ratio: 1 / 1;
}
.h-10{
  height: 2.5rem;
}
.h-12{
  height: 3rem;
}
.h-14{
  height: 3.5rem;
}
.h-20{
  height: 5rem;
}
.h-28{
  height: 7rem;
}
.h-6{
  height: 1.5rem;
}
.h-full{
  height: 100%;
}
.max-h-40{
  max-height: 10rem;
}
.max-h-44{
  max-height: 11rem;
}
.max-h-48{
  max-height: 12rem;
}
.max-h-full{
  max-height: 100%;
}
.min-h-10{
  min-height: 2.5rem;
}
.min-h-16{
  min-height: 4rem;
}
.min-h-24{
  min-height: 6rem;
}
.min-h-28{
  min-height: 7rem;
}
.min-h-\[120px\]{
  min-height: 120px;
}
.min-h-\[9rem\]{
  min-height: 9rem;
}
.min-h-screen{
  min-height: 100vh;
}
.w-10{
  width: 2.5rem;
}
.w-12{
  width: 3rem;
}
.w-14{
  width: 3.5rem;
}
.w-20{
  width: 5rem;
}
.w-28{
  width: 7rem;
}
.w-6{
  width: 1.5rem;
}
.w-full{
  width: 100%;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-40{
  max-width: 10rem;
}
.max-w-4xl{
  max-width: 56rem;
}
.max-w-full{
  max-width: 100%;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-xs{
  max-width: 20rem;
}
.flex-1{
  flex: 1 1 0%;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse{

  50%{
    opacity: .5;
  }
}
.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.cursor-pointer{
  cursor: pointer;
}
.list-disc{
  list-style-type: disc;
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flex-col{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-4{
  gap: 1rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-y-auto{
  overflow-y: auto;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.whitespace-pre-wrap{
  white-space: pre-wrap;
}
.break-words{
  overflow-wrap: break-word;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.border{
  border-width: 1px;
}
.border-2{
  border-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-dashed{
  border-style: dashed;
}
.border-\[var\(--accent\)\]{
  border-color: var(--accent);
}
.border-\[var\(--border\)\]{
  border-color: var(--border);
}
.border-amber-700{
  --tw-border-opacity: 1;
  border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}
.border-blue-500{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-emerald-500{
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-neutral-700{
  --tw-border-opacity: 1;
  border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
}
.border-neutral-800{
  --tw-border-opacity: 1;
  border-color: rgb(38 38 38 / var(--tw-border-opacity, 1));
}
.border-red-800\/50{
  border-color: rgb(153 27 27 / 0.5);
}
.bg-\[var\(--accent\)\]{
  background-color: var(--accent);
}
.bg-\[var\(--accent-soft\)\]{
  background-color: var(--accent-soft);
}
.bg-\[var\(--bg-elev\)\]{
  background-color: var(--bg-elev);
}
.bg-amber-900\/20{
  background-color: rgb(120 53 15 / 0.2);
}
.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/70{
  background-color: rgb(0 0 0 / 0.7);
}
.bg-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-neutral-700{
  --tw-bg-opacity: 1;
  background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
}
.bg-neutral-800{
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.bg-neutral-900{
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}
.bg-neutral-950{
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
}
.bg-neutral-950\/40{
  background-color: rgb(10 10 10 / 0.4);
}
.bg-neutral-950\/45{
  background-color: rgb(10 10 10 / 0.45);
}
.bg-neutral-950\/50{
  background-color: rgb(10 10 10 / 0.5);
}
.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-950\/30{
  background-color: rgb(69 10 10 / 0.3);
}
.bg-red-950\/40{
  background-color: rgb(69 10 10 / 0.4);
}
.bg-transparent{
  background-color: transparent;
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.p-1{
  padding: 0.25rem;
}
.p-2{
  padding: 0.5rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-6{
  padding: 1.5rem;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.pb-2{
  padding-bottom: 0.5rem;
}
.pl-5{
  padding-left: 1.25rem;
}
.pt-1{
  padding-top: 0.25rem;
}
.pt-4{
  padding-top: 1rem;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.align-top{
  vertical-align: top;
}
.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold{
  font-weight: 700;
}
.font-medium{
  font-weight: 500;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.tracking-wide{
  letter-spacing: 0.025em;
}
.text-\[var\(--accent\)\]{
  color: var(--accent);
}
.text-\[var\(--bg\)\]{
  color: var(--bg);
}
.text-\[var\(--fg\)\]{
  color: var(--fg);
}
.text-\[var\(--fg-dim\)\]{
  color: var(--fg-dim);
}
.text-\[var\(--fg-muted\)\]{
  color: var(--fg-muted);
}
.text-amber-300{
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-400{
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-blue-300{
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-blue-400{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-cyan-300{
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.text-emerald-400{
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-green-300{
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.text-green-400{
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-neutral-300{
  --tw-text-opacity: 1;
  color: rgb(212 212 212 / var(--tw-text-opacity, 1));
}
.text-neutral-400{
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}
.text-neutral-500{
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}
.text-neutral-600{
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
}
.text-red-300{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.opacity-0{
  opacity: 0;
}
.opacity-60{
  opacity: 0.6;
}
.opacity-70{
  opacity: 0.7;
}
.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-blue-500{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

:root {
  color-scheme: dark;
  --accent-h: 174;
  --bg-h: 235;
  --bg-c: 0.006;
  --accent: oklch(0.78 0.13 174);
  --accent-dim: oklch(0.58 0.12 184);
  --accent-glow: color-mix(in oklch, var(--accent) 35%, transparent);
  --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
  --bg: oklch(0.125 0.006 235);
  --bg-elev: oklch(0.155 0.007 235);
  --surface: oklch(0.185 0.008 235);
  --surface-2: oklch(0.225 0.009 235);
  --surface-3: oklch(0.275 0.010 235);
  --border: oklch(0.315 0.012 235);
  --border-strong: oklch(0.425 0.014 235);
  --fg: oklch(0.98 0.003 235);
  --fg-2: oklch(0.89 0.006 235);
  --fg-muted: oklch(0.70 0.010 235);
  --fg-dim: oklch(0.52 0.012 235);
  --success: oklch(0.74 0.16 150);
  --warning: oklch(0.80 0.16 75);
  --danger: oklch(0.68 0.18 25);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --gap: 18px;
  --focus-ring: color-mix(in oklch, var(--accent) 85%, white 15%);
  --focus-halo: color-mix(in oklch, var(--accent) 22%, transparent);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Geist', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button, a, input, select, textarea { touch-action: manipulation; }
button, a { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: 16px; }
input[type="range"] { min-height: 32px; accent-color: var(--accent); }

.ax-mono { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--fg-muted); text-transform: uppercase; }
/* overflow:hidden here made .ax-page the nearest scroll container for its
   descendants, which silently disabled position:sticky on .ax-col--right — the
   preview column with the Generate button never stuck to anything, it just
   scrolled away (measured: top 251px -> -1549px in lockstep with the scroll).
   overflow:clip clips the ambient layer exactly the same way without
   establishing a scroll container, so sticky resolves against the viewport. */
.ax-page { position: relative; min-height: 100vh; overflow: clip; }
.ax-ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ax-ambient__blob { display: none; }
.ax-ambient__grid { position: absolute; inset: 0; background-image: linear-gradient(oklch(1 0 0 / 0.026) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / 0.026) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 78%); mask-image: linear-gradient(180deg, black 0%, transparent 78%); }

.ax-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 12px 28px; background: color-mix(in oklch, var(--bg) 86%, transparent); backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid var(--border); }
.ax-nav__brand { display: flex; align-items: center; gap: 10px; }
.ax-logo { color: var(--accent); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; overflow: visible; background: transparent; border: 0; box-shadow: 0 0 24px -12px var(--accent-glow); }
.ax-logo__img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; transform: scale(1.35); filter: drop-shadow(0 0 10px var(--accent-glow)); }
.ax-nav__name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.ax-nav__sep { color: var(--fg-dim); font-weight: 300; }
.ax-nav__crumb { color: var(--fg-muted); font-size: 14px; }
.ax-nav__links { display: flex; gap: 4px; min-width: 0; }
.ax-nav__link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 12px; border-radius: 8px; color: var(--fg-muted); font-size: 13px; font-weight: 550; transition: color .15s, background .15s, border-color .15s; }
.ax-nav__link:hover, .ax-nav__link.is-active { color: var(--fg); background: var(--surface-2); }
.ax-nav__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.ax-quota { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.ax-quota__bar { width: 70px; height: 4px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.ax-quota__fill { height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent) 60%, var(--success))); }
.ax-quota__text { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--fg-muted); }
.ax-quota__text b { color: var(--fg); font-weight: 500; }
.ax-user { display: flex; align-items: center; gap: 8px; }
.ax-user__avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: oklch(0.16 0.04 55); display: grid; place-items: center; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.ax-user__name { font-size: 13px; color: var(--fg-2); }

.ax-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1px solid transparent; transition: all .15s; }
.ax-btn--ghost { color: var(--fg-2); border-color: var(--border); background: var(--surface); }
.ax-btn--ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.ax-btn--primary { background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 92%, white 8%), var(--accent)); color: oklch(0.18 0.04 var(--accent-h)); font-weight: 700; box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent), 0 10px 30px -10px var(--accent-glow), inset 0 1px 0 oklch(1 0 0 / 0.2); }
.ax-btn--primary:hover { filter: brightness(1.06); }
.ax-btn--primary:disabled { cursor: not-allowed; opacity: .55; filter: none; }
.ax-btn--lg { width: 100%; padding: 18px 22px; font-size: 15px; border-radius: 14px; }
.ax-btn__hint { margin-left: auto; padding-left: 12px; font-family: 'Geist Mono', monospace; font-size: 11px; opacity: 0.65; }
.ax-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 7px 11px; border-radius: 8px; background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--border); font-size: 12px; transition: all .12s; }
.ax-chip:hover { background: var(--surface-3); border-color: var(--border-strong); }
.ax-tag { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 6px; background: var(--surface-2); color: var(--fg-2); font-family: 'Geist Mono', monospace; font-size: 11px; border: 1px solid var(--border); }
.ax-history { border-top: 1px dashed var(--border); padding-top: 10px; }
.ax-history__item { width: 100%; min-height: 42px; text-align: left; padding: 9px 11px; border-radius: 10px; background: var(--bg-elev); border: 1px solid var(--border); color: var(--fg-muted); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s, border-color .15s, background .15s; }
.ax-history__item:hover { color: var(--fg); border-color: var(--border-strong); background: var(--surface-2); }

.ax-main { position: relative; z-index: 1; max-width: 1380px; margin: 0 auto; padding: 28px 28px 80px; }
.ax-hero { margin-bottom: 28px; }
.ax-hero__eyebrow { display: flex; align-items: center; gap: 12px; color: var(--accent); margin-bottom: 14px; }
.ax-hero__eyebrow .ax-mono { color: var(--accent); }
.ax-hero__sep { width: 28px; height: 1px; background: var(--border-strong); }
.ax-hero__title { font-size: 44px; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 8px; line-height: 1.05; }
.ax-hero__sub { font-size: 15px; color: var(--fg-muted); margin: 0; max-width: 600px; }
.ax-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: var(--gap); align-items: start; }
.ax-col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.ax-col--right { position: sticky; top: 76px; height: calc(100dvh - 92px); max-height: calc(100dvh - 92px); }
.ax-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.ax-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 16px 50px -44px oklch(0 0 0 / .9); }
.ax-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ax-label { font-size: 13px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.ax-label--lg { font-size: 15px; }
.ax-label--inner { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; margin-bottom: 8px; }
.ax-label__opt { margin-left: 6px; font-weight: 400; color: var(--fg-dim); font-size: 11px; }
.ax-sub { font-size: 12px; color: var(--fg-muted); margin-top: 3px; }
.ax-prompt__input { width: 100%; resize: vertical; min-height: 160px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 15px; line-height: 1.55; color: var(--fg); outline: none; transition: border-color .15s, box-shadow .15s; }
.ax-prompt__input::-moz-placeholder { color: var(--fg-dim); }
.ax-prompt__input::placeholder { color: var(--fg-dim); }
.ax-prompt__input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ax-prompt__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ax-prompt__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ax-count { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--fg-dim); }
.ax-count b { color: var(--fg-muted); font-weight: 500; }
.ax-chars { display: flex; flex-wrap: wrap; gap: 8px; }
.ax-char { display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-2); font-size: 13px; transition: all .15s; }
.ax-char:hover { border-color: var(--border-strong); }
.ax-char.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--fg); }
.ax-char__avatar { width: 30px; height: 30px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; background: var(--surface-3); flex-shrink: 0; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08); }
.ax-char__avatar--none { display: grid; place-items: center; color: var(--fg-dim); border: 1px dashed var(--border-strong); box-shadow: none; }
.ax-framing { padding-top: 6px; border-top: 1px dashed var(--border); }
/* Five fixed columns needed 567px inside a 520px card, so the last option
   ("Ganzkörper") was clipped by 47px and unreadable. Auto-fit lets the row break
   into two lines instead of overflowing, and the icon keeps its size while the
   label takes the rest. */
.ax-framing__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.ax-framing__btn { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--border); color: var(--fg-muted); text-align: left; transition: all .15s; min-width: 0; }
.ax-framing__btn > svg { flex: 0 0 auto; }
.ax-framing__btn > span, .ax-framing__btn > div { min-width: 0; }
.ax-framing__btn:hover { border-color: var(--border-strong); color: var(--fg-2); }
.ax-framing__btn.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.ax-framing__label { font-size: 12px; font-weight: 500; }
.ax-framing__hint { font-size: 10px; color: var(--fg-dim); margin-top: 1px; }
.ax-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ax-format { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 6px 10px; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--border); color: var(--fg-muted); transition: all .15s; min-width: 0; }
.ax-format:hover { border-color: var(--border-strong); color: var(--fg-2); }
.ax-format.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.ax-format__rect { background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--border-strong); border-radius: 3px; margin-bottom: 4px; flex-shrink: 0; }
.ax-format.is-active .ax-format__rect { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-dim), var(--accent)); }
.ax-format__label { font-size: 11.5px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-format__ratio { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--fg-dim); }

.ax-fast__head { display: flex; justify-content: space-between; align-items: center; }
.ax-toggle { position: relative; width: 44px; height: 24px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-strong); transition: background .2s; }
.ax-toggle.is-on { background: var(--accent); border-color: var(--accent); }
.ax-toggle__knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--fg); transition: transform .2s, background .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.ax-toggle.is-on .ax-toggle__knob { transform: translateX(20px); background: oklch(0.18 0.04 var(--accent-h)); }
.ax-fast__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ax-fast__col { padding: 12px; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--border); opacity: 0.55; transition: opacity .2s, border-color .2s; }
.ax-fast__col.is-active { opacity: 1; border-color: var(--border-strong); }
.ax-fast__title { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 8px; color: var(--fg-2); }
.ax-fast__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; line-height: 1.4; }
.ax-fast__col li { position: relative; padding-left: 14px; color: var(--fg-muted); }
.ax-fast__col li::before { position: absolute; left: 0; top: 0; font-family: 'Geist Mono', monospace; }
.ax-fast__col li.is-pro::before { content: '+'; color: var(--success); }
.ax-fast__col li.is-con::before { content: '−'; color: var(--warning); }

.ax-styles__meta { display: flex; align-items: center; gap: 10px; }
.ax-styles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ax-style { display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; text-align: left; transition: all .15s; padding: 0; }
.ax-style:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.ax-style.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 12px 28px -12px var(--accent-glow); }
.ax-style__thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--surface-2); }
.ax-style__thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, oklch(0.10 0.01 250 / 0.5) 100%); }
.ax-style__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: opacity .3s; }
.ax-style__body { padding: 10px 12px 12px; }
.ax-style__name { font-size: 13px; font-weight: 600; color: var(--fg); }
.ax-style__desc { font-size: 11px; color: var(--fg-muted); margin-top: 2px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ax-style__model { margin-top: 6px; }
.ax-style__model .ax-mono { font-size: 9px; }
.ax-badge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; background: oklch(0.15 0.02 25 / 0.7); color: oklch(0.85 0.15 25); border: 1px solid oklch(0.55 0.15 25 / 0.4); backdrop-filter: blur(4px); }
.ax-style__count { position: absolute; bottom: 8px; right: 8px; z-index: 2; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--fg-2); background: oklch(0.10 0.01 250 / 0.7); padding: 3px 7px; border-radius: 4px; backdrop-filter: blur(4px); }

.ax-preview { padding: 18px; gap: 16px; height: auto; min-height: 0; max-height: none; overflow: visible; }
.ax-preview__head { display: flex; align-items: flex-start; justify-content: space-between; }
.ax-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.05em; }
.ax-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 18%, transparent); }
.ax-status.is-working .ax-status__dot { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in oklch, var(--warning) 18%, transparent); animation: ax-status-pulse 1.4s ease-in-out infinite; }
.ax-status.is-error .ax-status__dot { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 18%, transparent); }
@keyframes ax-status-pulse { 50% { opacity: .45; transform: scale(.82); } }
.ax-preview__stage { width: 100%; position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 40% at 50% 50%, color-mix(in oklch, var(--accent) 6%, transparent) 0%, transparent 70%), var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; min-height: 0; flex: 1 1 auto; aspect-ratio: auto; }
.ax-preview__foot { display: flex; gap: 8px; }
.ax-kv { flex: 1; padding: 8px 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 2px; }
.ax-kv span { font-family: 'Geist Mono', monospace; font-size: 9.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.ax-kv b { font-size: 13px; font-weight: 500; color: var(--fg); }
.ax-empty, .ax-gen, .ax-error, .ax-result { position: absolute; inset: 0; }
.ax-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.ax-empty__glyph { width: 64px; height: 64px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--fg-2); }
.ax-empty__title { font-size: 16px; font-weight: 600; color: var(--fg); }
.ax-empty__hint { font-size: 13px; color: var(--fg-muted); }
.ax-gen__bg { position: absolute; inset: 0; opacity: 0.22; background: linear-gradient(110deg, transparent 0%, var(--accent-soft) 48%, transparent 100%); }
.ax-gen__overlay { position: absolute; inset: 0; background: repeating-linear-gradient(110deg, transparent 0px, transparent 80px, oklch(1 0 0 / 0.06) 80px, oklch(1 0 0 / 0.06) 81px), radial-gradient(60% 40% at 50% 50%, transparent, oklch(0.10 0.01 250 / 0.5) 100%); animation: shimmer 2.4s linear infinite; }
@keyframes shimmer { from { background-position: 0 0, 0 0; } to { background-position: 400px 0, 0 0; } }
.ax-gen__body, .ax-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.ax-gen__title { font-size: 17px; font-weight: 600; }
.ax-gen__sub { font-size: 12px; color: var(--fg-muted); }
.ax-bar { width: 70%; max-width: 320px; height: 6px; background: oklch(0.10 0.01 250 / 0.6); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.ax-bar__fill { height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow: 0 0 12px var(--accent-glow); transition: width .15s linear; }
.ax-bar__fill--indeterminate { width: 38%; animation: ax-progress 1.35s ease-in-out infinite; }
@keyframes ax-progress { from { transform: translateX(-110%); } to { transform: translateX(300%); } }
.ax-error__title { font-size: 15px; font-weight: 600; color: var(--danger); }
.ax-error__msg { font-size: 13px; color: var(--fg-2); max-width: 320px; line-height: 1.5; }
.ax-dots::after { content: '…'; animation: dots 1.4s steps(4, end) infinite; display: inline-block; min-width: 16px; text-align: left; }
@keyframes dots { 0% { content: ''; } 25% { content: '·'; } 50% { content: '··'; } 75% { content: '···'; } }
.ax-gen__steps { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.ax-gen__steps span { padding: 3px 8px; border-radius: 4px; background: oklch(0.10 0.01 250 / 0.5); border: 1px solid var(--border); }
.ax-gen__steps span.is-active { color: var(--accent); border-color: var(--accent); }
.ax-gen__steps span.is-done { color: var(--success); border-color: color-mix(in oklch, var(--success) 30%, var(--border)); }
.ax-result { display: flex; flex-direction: column; align-items: stretch; justify-content: stretch; padding: 0; }
.ax-result__link { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px; min-height: 0; }
.ax-result__link img { max-width: 100%; max-height: 100%; border-radius: var(--radius-sm); box-shadow: 0 24px 60px oklch(0 0 0 / 0.45); -o-object-fit: contain; object-fit: contain; }
.ax-result__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: oklch(0.10 0.01 250 / 0.85); backdrop-filter: blur(8px); border-top: 1px solid var(--border); }
.ax-result__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ax-result__primary-action { border-color: color-mix(in oklch, var(--accent) 42%, var(--border)); }
.ax-result__more { position: relative; }
.ax-result__more > summary { list-style: none; cursor: pointer; }
.ax-result__more > summary::-webkit-details-marker { display: none; }
.ax-result__more-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; width: 180px; padding: 8px; display: grid; gap: 6px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); box-shadow: 0 18px 45px -18px black; }
.ax-result__more-menu .ax-chip { width: 100%; justify-content: flex-start; }
.ax-prompt-tools { position: relative; }
.ax-prompt-tools > summary { list-style: none; cursor: pointer; }
.ax-prompt-tools > summary::-webkit-details-marker { display: none; }
.ax-prompt-tools__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; width: 190px; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); box-shadow: 0 18px 45px -18px black; }
.ax-prompt-tools__menu .ax-chip { justify-content: flex-start; }
.ax-batch-hint { padding: 9px 11px; border-radius: 9px; background: var(--accent-soft); color: var(--fg-muted); font-size: 11px; line-height: 1.45; text-align: center; }
.ax-help { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; margin-left: 4px; vertical-align: -3px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg-dim); cursor: help; transition: color .15s, border-color .15s, background .15s, transform .15s; }
.ax-help:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); transform: scale(1.08); }
.ax-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ax-modal-backdrop { position: fixed; inset: 0; z-index: 200; background: oklch(0.08 0.01 250 / 0.72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: ax-fade .15s ease-out; }
@keyframes ax-fade { from { opacity: 0; } to { opacity: 1; } }
.ax-modal { width: 100%; max-width: 460px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 24px 60px oklch(0 0 0 / 0.5), 0 0 0 1px oklch(1 0 0 / 0.02) inset; display: flex; flex-direction: column; animation: ax-pop .18s cubic-bezier(.2,.9,.3,1.2); }
@keyframes ax-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.ax-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.ax-modal__title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fg); }
.ax-modal__title svg { color: var(--accent); }
.ax-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--fg-dim); transition: color .15s, background .15s, border-color .15s; }
.ax-modal__close:hover { color: var(--fg); background: var(--surface-3); border-color: var(--border); }
.ax-modal__body { padding: 14px 18px; font-size: 13.5px; line-height: 1.6; color: var(--fg-2); }
.ax-modal__body p { margin: 0 0 10px; }
.ax-modal__body p:last-child { margin-bottom: 0; }
.ax-modal__body ul { margin: 6px 0 12px; padding-left: 18px; }
.ax-modal__body li { margin-bottom: 4px; }
.ax-modal__body b { color: var(--fg); font-weight: 600; }
.ax-modal__body .ax-mono { font-size: 12px; background: var(--surface-3); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border); }
.ax-modal__foot { display: flex; justify-content: flex-end; padding: 10px 14px 14px; border-top: 1px solid var(--border); }

@media (max-width: 1100px) { .ax-grid { grid-template-columns: 1fr; } .ax-col--right { position: relative; top: 0; height: auto; max-height: none; } .ax-preview { height: auto; max-height: none; } .ax-preview__stage { min-height: 520px; } .ax-row-2 { grid-template-columns: 1fr; } .ax-styles__grid { grid-template-columns: repeat(3, 1fr); } }

/* Touch devices used to force the hover chrome permanently visible, which put
   six 36px buttons and a darkening overlay on every tile. Hiding them outright
   matters more than dimming them: without hover they would otherwise stay
   invisible but still tappable. The controls live in the lightbox now, and
   selection has its own mode in the toolbar. */
@media (hover: none) {
  .ax-gallery-card__actions, .ax-gallery-card__shade { display: none; }
  .ax-gallery-card__marks { display: flex; }
  .ax-character-ref__remove { opacity: 1; }
}

@media (max-width: 760px) {
  :root { --gap: 14px; }
  body { padding-bottom: 76px; }
  .ax-page { overflow-x: hidden; }
  .ax-nav { position: sticky; top: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 12px; }
  .ax-nav__brand { min-width: 0; }
  .ax-nav__name { font-size: 16px; }
  .ax-nav__sep, .ax-nav__crumb, .ax-user__name { display: none; }
  .ax-nav__links { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 120; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(82px, 1fr); gap: 6px; overflow-x: auto; padding: 7px; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: color-mix(in oklch, var(--bg) 90%, transparent); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: 0 18px 55px -25px oklch(0 0 0 / .9); backdrop-filter: blur(18px) saturate(150%); }
  .ax-nav__links::-webkit-scrollbar { display: none; }
  .ax-nav__link { flex: 0 0 auto; min-height: 46px; padding: 7px 8px; flex-direction: column; gap: 3px; font-size: 11px; line-height: 1.05; background: color-mix(in oklch, var(--surface) 74%, transparent); border: 1px solid var(--border); }
  .ax-nav__link.is-active { border-color: color-mix(in oklch, var(--accent) 50%, var(--border)); }
  .ax-nav__right { margin-left: 0; justify-content: flex-end; gap: 8px; min-width: 0; }
  .ax-quota { display: none; }
  .ax-user { display: none; }
  .ax-nav__right .ax-btn { width: 42px; min-width: 42px; padding: 0; font-size: 0; }
  .ax-nav__right .ax-btn svg { width: 16px; height: 16px; }
  .ax-btn, .ax-chip, .ax-admin-tab, .ax-gallery-action { min-height: 44px; }
  .ax-btn { padding: 11px 14px; }
  .ax-btn--lg { padding: 16px 18px; }
  .ax-main, .ax-admin, .ax-gallery, .ax-characters { padding: 18px 12px 68px; }
  .ax-hero { margin-bottom: 18px; }
  .ax-hero__eyebrow { gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
  .ax-hero__sep { width: 18px; }
  .ax-hero__title { font-size: clamp(30px, 10vw, 42px); line-height: 1.02; }
  .ax-hero__sub { font-size: 14px; }
  .ax-card, .ax-admin-card { padding: 14px; border-radius: 16px; }
  .ax-card__head, .ax-admin-card__head, .ax-preview__head { flex-direction: column; align-items: stretch; }
  .ax-prompt__input { min-height: 132px; padding: 13px; }
  .ax-prompt__foot, .ax-result__bar, .ax-preview__foot, .ax-fast__head { flex-direction: column; align-items: stretch; }
  .ax-prompt__tags { display: none; }
  .ax-row-2, .ax-fast__grid { grid-template-columns: 1fr; }
  .ax-framing__row { grid-template-columns: 1fr; }
  .ax-framing__btn { min-height: 54px; padding: 10px; }
  .ax-formats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ax-format { min-height: 104px; padding: 13px 6px 10px; }
  .ax-styles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ax-styles__meta { width: 100%; justify-content: space-between; }
  .ax-preview__stage { min-height: min(78vw, 420px); }
  .ax-preview { gap: 12px; }
  .ax-kv { min-width: 0; }
  .ax-result__actions { justify-content: stretch; }
  .ax-result__actions .ax-chip { flex: 1; justify-content: center; }
  .ax-admin-tabs { margin-left: -14px; margin-right: -14px; padding: 6px 14px; border-left: 0; border-right: 0; border-radius: 0; }
  .ax-admin-tab { flex: 0 0 auto; }
  .ax-admin-input, .ax-admin-select, .ax-admin-textarea { min-height: 46px; }
  .ax-admin-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .ax-gallery__top, .ax-gallery__bar { align-items: stretch; flex-direction: column; }
  .ax-gallery__bar { position: static; }
  .ax-gallery__stats, .ax-gallery__filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
  .ax-gallery__stats::-webkit-scrollbar, .ax-gallery__filters::-webkit-scrollbar { display: none; }
  .ax-gallery__stats > *, .ax-gallery__filters > * { flex: 0 0 auto; }
  .ax-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .ax-gallery-card { border-radius: 14px; }
  .ax-gallery-card:hover, .ax-character-card:hover { transform: none; }
  .ax-gallery-card__body { min-height: 54px; padding: 8px; }
  .ax-gallery-card__prompt { font-size: 11.5px; -webkit-line-clamp: 2; }
  /* Between 620 and 760px the tiles keep two columns, so the buttons stay --
     but they are hover-revealed again rather than burned in. */
  .ax-gallery-action { width: 42px; height: 42px; }
  /* The lightbox is full-bleed at every width now; no row split here. */
  .ax-character-grid { grid-template-columns: 1fr; gap: 12px; }
  .ax-character-card__actions { grid-template-columns: 1fr; }
  .ax-character-shell { grid-template-columns: 1fr; }
  .ax-character-side { position: relative; top: 0; }
  .ax-character-ref-grid, .ax-character-job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-character-ref__remove { min-height: 34px; padding: 6px 9px; font-size: 11px; }
}

@media (max-width: 420px) {
  body { padding-bottom: 82px; }
  .ax-main, .ax-admin, .ax-gallery, .ax-characters { padding-left: 10px; padding-right: 10px; }
  .ax-nav__link { padding-left: 10px; padding-right: 10px; }
  .ax-styles__grid, .ax-gallery__grid { gap: 8px; }
  .ax-style__body { padding: 8px; }
  .ax-style__desc, .ax-style__model { display: none; }
  .ax-gallery-card__badges .ax-admin-pill { font-size: 10px; padding: 3px 6px; }
}

.ax-admin { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 26px 28px 80px; }
.ax-admin__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.ax-admin__title { font-size: 34px; line-height: 1.05; font-weight: 650; letter-spacing: -0.025em; margin: 0; }
.ax-admin__sub { margin: 6px 0 0; color: var(--fg-muted); font-size: 14px; max-width: 680px; }
.ax-admin-tabs { display: flex; gap: 6px; padding: 6px; margin-bottom: 20px; background: color-mix(in oklch, var(--surface) 75%, transparent); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; }
.ax-admin-tab { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 9px 13px; border-radius: 10px; color: var(--fg-muted); font-size: 13px; font-weight: 550; border: 1px solid transparent; transition: all .15s; }
.ax-admin-tab:hover { color: var(--fg-2); background: var(--surface-2); }
.ax-admin-tab.is-active { color: var(--fg); background: var(--accent-soft); border-color: color-mix(in oklch, var(--accent) 55%, var(--border)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .05); }
.ax-admin-grid { display: grid; gap: var(--gap); }
.ax-admin-grid--stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ax-admin-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ax-admin-card { background: linear-gradient(180deg, color-mix(in oklch, var(--surface) 94%, white 2%), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: 0 20px 60px -45px oklch(0 0 0 / .8); }
.ax-admin-card--flush { padding: 0; overflow: hidden; }
.ax-admin-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.ax-admin-card__title { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.ax-admin-card__sub { margin-top: 3px; font-size: 12px; color: var(--fg-muted); }
.ax-admin-stat { position: relative; overflow: hidden; min-height: 116px; }
.ax-admin-stat::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 14px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .55; }
.ax-admin-stat__label { color: var(--fg-muted); font-size: 12px; font-weight: 550; text-transform: uppercase; letter-spacing: .055em; }
.ax-admin-stat__value { margin-top: 14px; font-family: 'Geist Mono', monospace; font-size: 30px; font-weight: 600; letter-spacing: -0.04em; }
.ax-admin-stat__hint { margin-top: 6px; color: var(--fg-dim); font-size: 12px; }
.ax-admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ax-admin-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ax-admin-input, .ax-admin-select, .ax-admin-textarea { width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; color: var(--fg); padding: 10px 12px; font-size: 13px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.ax-admin-input:focus, .ax-admin-select:focus, .ax-admin-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ax-admin-input--sm { padding: 6px 8px; border-radius: 8px; }
.ax-admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ax-admin-table th { padding: 12px 14px; text-align: left; color: var(--fg-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; background: var(--bg-elev); border-bottom: 1px solid var(--border); }
.ax-admin-table td { padding: 13px 14px; border-top: 1px solid var(--border); vertical-align: middle; }
.ax-admin-table tr:hover td { background: color-mix(in oklch, var(--surface-2) 45%, transparent); }
.ax-admin-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-2); font-size: 11px; font-weight: 600; }
.ax-admin-pill--accent { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.ax-admin-pill--danger { color: oklch(0.82 0.14 25); border-color: oklch(0.52 0.14 25 / .55); background: oklch(0.20 0.05 25 / .6); }
.ax-admin-pill--warn { color: var(--warning); border-color: color-mix(in oklch, var(--warning) 45%, var(--border)); background: color-mix(in oklch, var(--warning) 12%, transparent); }
.ax-admin-empty { padding: 42px 18px; text-align: center; color: var(--fg-dim); font-size: 13px; }
.ax-admin-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.ax-admin-span-2 { grid-column: span 2; } .ax-admin-span-3 { grid-column: span 3; } .ax-admin-span-4 { grid-column: span 4; } .ax-admin-span-5 { grid-column: span 5; } .ax-admin-span-6 { grid-column: span 6; } .ax-admin-span-8 { grid-column: span 8; } .ax-admin-span-12 { grid-column: 1 / -1; }
.ax-admin-resource { display: flex; gap: 14px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: transform .15s, border-color .15s, background .15s; }
.ax-admin-resource:hover { transform: translateY(-1px); border-color: var(--border-strong); background: var(--surface-2); }
.ax-admin-resource__thumb { width: 78px; height: 78px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--bg-elev); display: grid; place-items: center; color: var(--fg-dim); }
.ax-admin-resource__thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.ax-admin-resource__body { min-width: 0; flex: 1; }
.ax-admin-resource__title { font-weight: 650; }
.ax-admin-resource__meta { margin-top: 4px; color: var(--fg-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-admin-download { display: grid; gap: 8px; }
.ax-admin-progress { height: 7px; border-radius: 999px; overflow: hidden; background: var(--bg-elev); border: 1px solid var(--border); }
.ax-admin-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }
@media (max-width: 1100px) { .ax-admin-grid--stats, .ax-admin-grid--two { grid-template-columns: 1fr 1fr; } .ax-admin-form-grid { grid-template-columns: 1fr; } .ax-admin-span-2, .ax-admin-span-3, .ax-admin-span-4, .ax-admin-span-5, .ax-admin-span-6, .ax-admin-span-8, .ax-admin-span-12 { grid-column: 1 / -1; } }
@media (max-width: 720px) { .ax-admin { padding: 20px 16px 60px; } .ax-admin__top { align-items: flex-start; flex-direction: column; } .ax-admin-grid--stats, .ax-admin-grid--two { grid-template-columns: 1fr; } .ax-admin-toolbar { align-items: stretch; flex-direction: column; } .ax-admin-table { min-width: 760px; } .ax-admin-card--flush { overflow-x: auto; } }

.ax-gallery { position: relative; z-index: 1; max-width: 1480px; margin: 0 auto; padding: 28px 28px 80px; }
.ax-gallery__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.ax-gallery__stats { display: flex; gap: 8px; flex-wrap: wrap; }
.ax-gallery__bar { position: sticky; top: 72px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; margin-bottom: 18px; background: color-mix(in oklch, var(--surface) 86%, transparent); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(18px) saturate(140%); }
.ax-gallery__bar--stack { align-items: stretch; flex-direction: column; }
.ax-gallery__filters { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-gallery-search { min-width: min(360px, 100%); flex: 1; }
.ax-gallery-bulk { position: sticky; top: 152px; z-index: 19; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklch, var(--surface) 90%, transparent); backdrop-filter: blur(16px); }
.ax-gallery-console { display: grid; gap: 10px; padding: 12px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklch, var(--surface) 82%, transparent); }
.ax-gallery-console__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ax-gallery-console__status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; color: var(--fg-muted); font-size: 12px; }
.ax-gallery-console__log { max-height: 160px; overflow: auto; padding: 10px; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--border); color: var(--fg-2); font-size: 11px; line-height: 1.45; }
.ax-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.ax-gallery-card { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); cursor: zoom-in; transition: transform .18s, border-color .18s, box-shadow .18s; }
.ax-gallery-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent), transparent 40%); }
.ax-gallery-skeleton { min-height: 260px; background: linear-gradient(110deg, var(--surface), var(--surface-2), var(--surface)); background-size: 220% 100%; animation: ax-shimmer 1.2s linear infinite; }
@keyframes ax-shimmer { to { background-position-x: -220%; } }
.ax-gallery-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 20px 42px -30px oklch(0 0 0 / .9); }
.ax-gallery-card__image { position: relative; aspect-ratio: 1; background: var(--bg-elev); overflow: hidden; }
.ax-gallery-card__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform .25s; }
.ax-gallery-card:hover .ax-gallery-card__image img { transform: scale(1.035); }
.ax-gallery-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0 0 0 / .38), transparent 35%, transparent 55%, oklch(0 0 0 / .62)); opacity: 0; transition: opacity .18s; }
.ax-gallery-card:hover .ax-gallery-card__shade { opacity: 1; }
.ax-gallery-card__actions { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; gap: 8px; opacity: 0; transform: translateY(-4px); transition: opacity .18s, transform .18s; }
.ax-gallery-card:hover .ax-gallery-card__actions, .ax-gallery-card__actions:focus-within { opacity: 1; transform: none; }
.ax-gallery-action { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 999px; background: oklch(0.10 0.01 55 / .72); border: 1px solid oklch(1 0 0 / .12); color: var(--fg); backdrop-filter: blur(8px); transition: background .15s, color .15s, transform .15s; }
.ax-gallery-action:hover { background: var(--surface-3); transform: scale(1.04); }
.ax-gallery-action.is-liked { background: oklch(0.55 0.20 25); color: white; opacity: 1; }
/* The tag list is inline content in the lightbox; it must not borrow the tile
   badge class, which is absolutely positioned and hidden on touch. */
.ax-tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
.ax-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-2); font-size: 11.5px; line-height: 1.5; transition: background .15s, border-color .15s, color .15s; }
.ax-tag:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--fg); }
.ax-tag.is-active { background: var(--accent-soft); border-color: color-mix(in oklch, var(--accent) 55%, var(--border)); color: var(--fg); }
.ax-tag__name { white-space: nowrap; }
.ax-tag__count { min-width: 20px; padding: 0 5px; border-radius: 999px; background: var(--bg-elev); color: var(--fg-dim); font-variant-numeric: tabular-nums; text-align: center; }
.ax-tag.is-active .ax-tag__count { background: oklch(0 0 0 / .25); color: var(--fg-2); }
@media (hover: none) { .ax-tag { min-height: 32px; font-size: 12px; } }
.ax-gallery-card__marks { display: none; position: absolute; top: 8px; right: 8px; gap: 5px; pointer-events: none; }
.ax-gallery-mark { width: 8px; height: 8px; border-radius: 999px; box-shadow: 0 0 0 2px oklch(0 0 0 / .45); }
.ax-gallery-mark--nsfw { background: oklch(0.62 0.21 25); }
.ax-gallery-mark--liked { background: var(--accent); }
.ax-gallery-check { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: oklch(0.10 0.01 55 / .72); border: 1px solid oklch(1 0 0 / .35); color: var(--fg); font-size: 14px; backdrop-filter: blur(8px); }
.ax-gallery-check.is-on { background: var(--accent); border-color: var(--accent); color: oklch(0.12 0.01 55); }
.ax-gallery-card.is-selecting { cursor: pointer; }
.ax-gallery-card__badges { position: absolute; bottom: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.ax-gallery-card__body { min-height: 0; padding: 9px 11px; }
.ax-gallery-card__prompt { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-muted); font-size: 12px; line-height: 1.42; }
.ax-gallery-card__meta { margin-top: 7px; display: flex; justify-content: space-between; gap: 8px; color: var(--fg-dim); }
.ax-gallery-empty { min-height: 360px; display: grid; place-items: center; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--surface) 60%, transparent); }
/* The media fills the viewport on every screen size. Metadata and the rarer
   actions live in a sheet anchored to the bottom that starts collapsed to one
   row -- the previous layout gave a fixed 380px column to text on desktop and
   split the phone screen roughly in half. */
.ax-lightbox { position: fixed; inset: 0; z-index: 120; display: block; background: oklch(0.07 0.01 55 / .96); backdrop-filter: blur(10px); }
.ax-lightbox__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.ax-lightbox__image { max-width: 100%; max-height: 100dvh; width: auto; height: auto; border-radius: 0; -o-object-fit: contain; object-fit: contain; }
.ax-lightbox__sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; max-height: 82dvh; background: color-mix(in oklch, var(--surface) 86%, transparent); backdrop-filter: blur(18px) saturate(140%); border-top: 1px solid var(--border-strong); }
.ax-lightbox__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
.ax-lightbox__sheet.is-open .ax-lightbox__bar { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.ax-lightbox__bar .ax-lightbox__actions--primary { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ax-lightbox__toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-2); font-size: 13px; }
.ax-lightbox__toggle:hover { background: var(--surface-3); color: var(--fg); }
.ax-lightbox__toggle > span { transition: transform .15s; }
.ax-lightbox__sheet.is-open .ax-lightbox__toggle > span { transform: rotate(180deg); }
.ax-lightbox__sheetbody { display: none; flex-direction: column; gap: 14px; padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; }
.ax-lightbox__sheet.is-open .ax-lightbox__sheetbody { display: flex; }
.ax-lightbox__close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; background: oklch(0.10 0.01 55 / .62); border: 1px solid oklch(1 0 0 / .18); color: var(--fg); font-size: 18px; backdrop-filter: blur(10px); }
.ax-lightbox__close:hover { background: var(--surface-3); }
.ax-lightbox__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ax-lightbox__title { font-size: 16px; font-weight: 650; }
.ax-lightbox__prompt { padding: 12px; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--border); color: var(--fg-2); font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.ax-lightbox__actions { display: grid; gap: 8px; }
.ax-lightbox__actions--primary { grid-auto-flow: row; }
.ax-lightbox__group { border-top: 1px solid var(--border); padding-top: 12px; }
.ax-lightbox__group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.ax-lightbox__group > summary::after { content: "▸"; color: var(--fg-dim); transition: transform .15s; }
.ax-lightbox__group[open] > summary::after { transform: rotate(90deg); }
.ax-lightbox__group > .ax-lightbox__actions { margin-top: 10px; }
.ax-gallery-details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; color: var(--fg-muted); }
.ax-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border-radius: 999px; background: oklch(0.10 0.01 55 / .68); border: 1px solid var(--border); color: var(--fg); font-size: 34px; display: grid; place-items: center; backdrop-filter: blur(10px); z-index: 1; }
.ax-lightbox__nav--prev { left: 18px; }
.ax-lightbox__nav--next { right: 18px; }
.ax-compare { position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 110; max-width: 720px; margin: 0 auto; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklch, var(--surface) 88%, transparent); box-shadow: 0 24px 60px -34px black; backdrop-filter: blur(18px); }
.ax-compare__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.ax-compare__grid button { position: relative; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elev); aspect-ratio: 1; }
.ax-compare__grid img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.ax-compare__grid span { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 999px; background: oklch(0.10 0.01 55 / .72); font-size: 10px; }
@media (max-width: 960px) { .ax-gallery__top, .ax-gallery__bar { align-items: stretch; flex-direction: column; } .ax-gallery__filters > .ax-admin-input, .ax-gallery__filters > .ax-admin-select { flex: 1 1 180px; min-width: 0; } }
@media (max-width: 620px) { .ax-gallery { padding: 18px 12px 76px; } .ax-gallery__top { gap: 12px; } .ax-gallery__stats { gap: 6px; } .ax-gallery__bar { position: relative; top: 0; padding: 8px; } .ax-gallery__filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ax-gallery__filters .ax-gallery-search, .ax-gallery__filters .ax-btn, .ax-gallery__filters .ax-admin-input:first-child { grid-column: 1 / -1; } .ax-gallery__filters .ax-chip, .ax-gallery__filters .ax-btn, .ax-gallery__filters .ax-admin-select, .ax-gallery__filters .ax-admin-input { width: 100%; min-height: 42px; justify-content: center; } .ax-gallery-console__actions { display: grid; grid-template-columns: 1fr; } .ax-gallery-console__status { grid-template-columns: 1fr 1fr; } .ax-gallery-bulk { position: fixed; left: 10px; right: 10px; bottom: 10px; top: auto; z-index: 111; max-height: 34vh; overflow-y: auto; box-shadow: 0 20px 50px -30px black; } .ax-gallery__grid { grid-template-columns: 1fr; gap: 12px; } .ax-gallery-card__actions, .ax-gallery-card__shade, .ax-gallery-card__badges, .ax-gallery-card__body { display: none; } .ax-gallery-card__marks { display: flex; } .ax-gallery-check { width: 30px; height: 30px; }  .ax-lightbox__nav { width: 36px; height: 52px; font-size: 28px; } .ax-lightbox__nav--prev { left: 8px; } .ax-lightbox__nav--next { right: 8px; } .ax-gallery-details { grid-template-columns: 1fr; } .ax-lightbox__actions { grid-template-columns: 1fr; } .ax-compare { left: 10px; right: 10px; bottom: 10px; } .ax-compare__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } }

.ax-characters { position: relative; z-index: 1; max-width: 1380px; margin: 0 auto; padding: 28px 28px 80px; }
.ax-character-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ax-character-card { overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: transform .18s, border-color .18s, box-shadow .18s; }
.ax-character-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 20px 42px -32px oklch(0 0 0 / .9); }
.ax-character-card__image { position: relative; aspect-ratio: 4 / 5; background: radial-gradient(circle at 50% 35%, var(--surface-3), var(--bg-elev)); overflow: hidden; display: grid; place-items: center; }
.ax-character-card__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.ax-character-card__placeholder { color: var(--fg-dim); transform: scale(1.4); }
.ax-character-card__badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 8px; }
.ax-character-card__body { padding: 14px; }
.ax-character-card__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ax-character-card__name { font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-character-card__prompt { min-height: 52px; color: var(--fg-muted); font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ax-character-card__actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 14px; }
.ax-character-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.ax-character-status { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in oklch, var(--accent), var(--border) 55%); border-radius: var(--radius-sm); background: color-mix(in oklch, var(--bg-elev), var(--accent) 8%); color: var(--fg); font-size: 12px; }
.ax-character-shell { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gap); align-items: start; }
.ax-character-side { position: sticky; top: 86px; display: flex; flex-direction: column; gap: var(--gap); }
.ax-character-ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ax-character-ref { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--border); }
.ax-character-ref img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.ax-character-ref.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ax-character-ref__btn { position: absolute; inset: 0; }
.ax-character-ref__remove { position: absolute; top: 5px; right: 5px; padding: 3px 6px; border-radius: 999px; background: oklch(0.10 0.01 55 / .76); color: white; font-size: 10px; opacity: 0; transition: opacity .15s; }
.ax-character-ref:hover .ax-character-ref__remove { opacity: 1; }
.ax-character-job-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ax-character-job { aspect-ratio: 3 / 4; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--border); overflow: hidden; display: grid; place-items: center; color: var(--fg-dim); font-size: 12px; }
.ax-character-job img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
@media (max-width: 1100px) { .ax-character-shell { grid-template-columns: 1fr; } .ax-character-side { position: relative; top: 0; } .ax-character-actions { justify-content: stretch; } .ax-character-actions .ax-btn { width: 100%; justify-content: center; } }
@media (max-width: 620px) { .ax-characters { padding: 20px 16px 60px; } .ax-character-grid { grid-template-columns: 1fr; } .ax-character-card__actions { grid-template-columns: 1fr; } }

.ax-pose-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ax-pose-card, .ax-pose-pick { overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.ax-pose-card__image { aspect-ratio: 3 / 4; background: var(--bg-elev); display: grid; place-items: center; color: var(--fg-dim); padding: 6px; }
.ax-pose-card__image img, .ax-pose-pick img, .ax-pose-selected img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }
.ax-pose-card__body { padding: 10px; }
.ax-pose-card__title { font-weight: 650; font-size: 13px; }
.ax-pose-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; max-height: 380px; overflow-y: auto; overflow-x: hidden; padding: 8px 6px 8px 2px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-elev); }
.ax-pose-pick { position: relative; display: grid !important; grid-template-rows: 170px minmax(96px, 1fr) !important; min-height: 270px !important; height: 270px !important; text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s, background .15s; }
.ax-pose-pick:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 18px 34px -28px oklch(0 0 0 / .9); }
.ax-pose-pick.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px oklch(0.72 0.17 235 / .65), 0 22px 45px -30px oklch(0.72 0.17 235 / .55); background: linear-gradient(180deg, color-mix(in oklch, var(--surface), var(--accent) 9%), var(--surface)); }
.ax-pose-pick.is-active::after { content: "Ausgewählt"; position: absolute; top: 10px; right: 10px; padding: 4px 8px; border-radius: 999px; background: oklch(0.72 0.17 235); color: oklch(0.08 0.01 240); font-size: 11px; font-weight: 750; box-shadow: 0 8px 20px -12px black; }
.ax-pose-pick__image { height: 170px !important; min-height: 170px !important; display: grid !important; place-items: center; background: radial-gradient(circle at 50% 32%, var(--surface-3), var(--bg-elev)); padding: 6px; color: var(--fg-dim); overflow: hidden; }
.ax-pose-pick__image img { display: block !important; width: 100% !important; height: 100% !important; -o-object-fit: contain !important; object-fit: contain !important; -o-object-position: center center; object-position: center center; }
.ax-pose-pick__body { display: grid !important; gap: 5px; padding: 12px; min-height: 96px !important; align-content: start; }
.ax-pose-pick__title { color: var(--fg); font-size: 14px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ax-pose-pick__meta { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ax-pose-pick__tags { color: var(--fg-muted); font-size: 11px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ax-pose-selected { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--bg-elev), color-mix(in oklch, var(--surface), var(--accent) 8%)); border: 1px solid var(--border); }
.ax-pose-selected img { aspect-ratio: 3 / 4; border-radius: 10px; background: var(--surface-2); padding: 4px; }
@media (max-width: 620px) { .ax-pose-strip { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); max-height: 360px; } .ax-pose-pick { grid-template-rows: 150px minmax(96px, 1fr) !important; min-height: 250px !important; height: 250px !important; } .ax-pose-pick__image { height: 150px !important; min-height: 150px !important; } .ax-pose-pick__body { padding: 10px; } .ax-pose-selected { grid-template-columns: 72px 1fr; } }

.ax-user-lora { display: grid; grid-template-columns: minmax(0, 1fr) 160px 48px auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev); }
.ax-user-lora.is-active { border-color: var(--accent); background: color-mix(in oklch, var(--bg-elev), var(--accent) 8%); }
.ax-user-lora__main { text-align: left; min-width: 0; }
.ax-user-lora__name { display: block; color: var(--fg); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-user-lora__meta { display: block; color: var(--fg-muted); font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .ax-user-lora { grid-template-columns: 1fr auto; } .ax-user-lora input[type="range"] { grid-column: 1 / -1; width: 100%; } }

.ax-wizard { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 26px 28px 92px; }
.ax-wizard__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.ax-wizard__head h1 { margin: 4px 0 6px; font-size: 34px; line-height: 1.05; font-weight: 650; }
.ax-wizard__head p { margin: 0; color: var(--fg-muted); max-width: 760px; }
.ax-wizard__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ax-wizard__steps { position: sticky; top: 67px; z-index: 30; display: flex; gap: 8px; overflow-x: auto; padding: 6px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklch, var(--surface) 92%, transparent); backdrop-filter: blur(16px) saturate(140%); scrollbar-width: none; }
.ax-wizard__steps::-webkit-scrollbar { display: none; }
.ax-wizard-step { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; min-height: 42px; padding: 9px 12px; border-radius: 10px; color: var(--fg-muted); border: 1px solid transparent; background: transparent; font-size: 13px; font-weight: 600; }
.ax-wizard-step span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--bg-elev); color: var(--fg-2); font-family: 'Geist Mono', monospace; font-size: 11px; }
.ax-wizard-step.is-active { color: var(--fg); background: var(--accent-soft); border-color: color-mix(in oklch, var(--accent) 50%, var(--border)); }
.ax-wizard__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: var(--gap); align-items: start; }
.ax-wizard__panel { min-height: 520px; display: flex; flex-direction: column; }
.ax-wizard__summary { position: sticky; top: 86px; display: grid; gap: 14px; }
.ax-wizard__summary dl { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 7px 10px; margin: 0; font-size: 12px; }
.ax-wizard__summary dt { color: var(--fg-muted); }
.ax-wizard__summary dd { margin: 0; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-wizard-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ax-wizard-options--compact { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
.ax-wizard-option { min-height: 108px; display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); transition: border-color .15s, background .15s, transform .15s; }
.ax-wizard-option:hover { transform: translateY(-1px); border-color: var(--border-strong); background: var(--surface-2); }
.ax-wizard-option.is-active { border-color: color-mix(in oklch, var(--accent) 65%, var(--border)); background: var(--accent-soft); }
.ax-wizard-option img { width: 100%; aspect-ratio: 4 / 3; -o-object-fit: cover; object-fit: cover; border-radius: 8px; background: var(--bg-elev); }
.ax-wizard-option b { font-size: 13px; }
.ax-wizard-option span { color: var(--fg-muted); font-size: 11px; line-height: 1.35; }
.ax-wizard-form { display: grid; gap: 14px; }
.ax-wizard-form label { display: grid; gap: 8px; color: var(--fg-2); font-size: 13px; font-weight: 600; }
.ax-wizard-list { display: grid; gap: 10px; }
.ax-wizard-lora { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.ax-wizard-lora.is-active { border-color: color-mix(in oklch, var(--accent) 65%, var(--border)); background: var(--accent-soft); }
.ax-wizard-lora button { display: grid; gap: 3px; text-align: left; color: var(--fg); background: transparent; border: 0; padding: 0; }
.ax-wizard-lora span { color: var(--fg-muted); font-size: 12px; }
.ax-wizard-lora input { width: 100%; }
.ax-wizard-stack { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); min-width: 0; }
.ax-wizard-stack b { font-size: 12px; color: var(--fg-2); }
.ax-wizard-stack p { margin: 0; color: var(--fg-muted); font-size: 12px; line-height: 1.45; word-break: break-word; }
.ax-wizard-stack span { float: right; color: var(--accent); font-family: 'Geist Mono', monospace; }
.ax-wizard-previewgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.ax-wizard-preview { display: grid; gap: 7px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--fg-muted); font-size: 11px; text-align: left; }
.ax-wizard-preview img { width: 100%; aspect-ratio: 1 / 1; -o-object-fit: cover; object-fit: cover; border-radius: 8px; }
.ax-wizard-current-preview { display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 18vw, 148px); align-items: center; gap: 12px; margin-top: 18px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.ax-wizard-current-preview img { width: 100%; aspect-ratio: 1; -o-object-fit: cover; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.ax-wizard-optimizer { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.ax-wizard-optimizer textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); color: var(--fg); padding: 10px 12px; resize: vertical; }
.ax-wizard .ax-field select { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); color: var(--fg); padding: 0 12px; outline: none; }
.ax-check-row { display: flex; align-items: center; gap: 8px; }
.ax-check-row input { width: auto !important; min-height: auto !important; }
@media (max-width: 980px) { .ax-wizard { padding: 20px 14px 96px; } .ax-wizard__head { align-items: stretch; flex-direction: column; } .ax-wizard__actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .ax-wizard__actions .ax-btn { min-width: 0; } .ax-wizard__grid { grid-template-columns: 1fr; } .ax-wizard__summary { position: relative; top: 0; order: -1; } }

.ax-wizard__panel,
.ax-wizard__summary { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 16px; }
.ax-wizard__panel h2,
.ax-wizard__summary h2 { margin: 0; font-size: 18px; line-height: 1.2; }
.ax-wizard__nav { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.ax-wizard-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.ax-wizard-summary-row span { color: var(--fg-muted); font-size: 12px; }
.ax-wizard-summary-row b { color: var(--fg); font-size: 13px; }
.ax-wizard-stack { border-top: 0; padding-top: 0; gap: 14px; }
.ax-wizard-stack > span { float: none; }
.ax-wizard-option strong { font-size: 13px; line-height: 1.2; }
.ax-wizard-lora button strong { font-size: 13px; }
.ax-wizard .ax-field textarea { resize: vertical; min-height: 116px; }
.ax-wizard .ax-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ax-wizard .ax-tags span { float: none; color: var(--fg-2); }
.ax-wizard .ax-empty { position: static; inset: auto; min-height: 140px; display: grid; place-items: center; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--fg-muted); background: var(--surface-2); }
.ax-wizard-empty { padding: 22px; text-align: center; }
.ax-wizard-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.ax-wizard-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ax-wizard-fields__wide { grid-column: 1 / -1; }
.ax-wizard .ax-field input { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); color: var(--fg); padding: 0 12px; outline: none; }
.ax-wizard .ax-field input:focus { border-color: color-mix(in oklch, var(--accent) 70%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 720px) {
  .ax-wizard { padding: 16px 10px 106px; }
  .ax-wizard__head { gap: 14px; margin-bottom: 12px; }
  .ax-wizard__head h1 { font-size: 28px; }
  .ax-wizard__head p { font-size: 13px; line-height: 1.45; }
  .ax-wizard__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-wizard__steps { top: 63px; margin-left: -10px; margin-right: -10px; padding: 7px 10px; border-left: 0; border-right: 0; border-radius: 0; }
  .ax-wizard-step { flex: 0 0 auto; min-width: 106px; min-height: 46px; }
  .ax-wizard__panel,
  .ax-wizard__summary { padding: 14px; border-radius: 14px; }
  .ax-wizard__summary { gap: 10px; }
  .ax-wizard-fields { grid-template-columns: 1fr; }
  .ax-wizard-options,
  .ax-wizard-options--compact { grid-template-columns: 1fr; }
  .ax-wizard-option { min-height: 74px; }
  .ax-wizard-previewgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-wizard-current-preview { grid-template-columns: 1fr; align-items: stretch; }
  .ax-wizard-current-preview a { display: block; }
  .ax-wizard-current-preview img { max-height: 56vh; -o-object-fit: contain; object-fit: contain; background: var(--bg-elev); }
  .ax-wizard__nav { position: sticky; bottom: 86px; z-index: 25; margin: 14px -6px -6px; padding: 8px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in oklch, var(--surface) 94%, transparent); backdrop-filter: blur(14px); }
  .ax-wizard__nav .ax-btn { flex: 1; }
  .ax-wizard-summary-row { align-items: flex-start; }
  .ax-wizard-summary-row b { text-align: right; overflow-wrap: anywhere; }
  .ax-wizard-optimizer .ax-card__head { display: grid; grid-template-columns: 1fr; }
  .ax-wizard-empty__actions { display: grid; grid-template-columns: 1fr; }
}
.ax-field select { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); color: var(--fg); padding: 0 12px; outline: none; }
.ax-field select:focus { border-color: color-mix(in oklch, var(--accent) 70%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); }
.ax-checkpoint-select { margin-top: 14px; }

/* Collapsible Section Styles */
.ax-collapsible {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 16px 50px -44px oklch(0 0 0 / .9);
}

.ax-collapsible__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--fg);
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s;
}

.ax-collapsible__trigger:hover {
  background: var(--surface-2);
}

.ax-collapsible__header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ax-collapsible__header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--fg);
}

.ax-collapsible__header-title svg {
  color: var(--accent);
}

.ax-collapsible__header-summary {
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 400;
}

.ax-collapsible__arrow {
  color: var(--fg-dim);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform: rotate(90deg);
}

.ax-collapsible.is-collapsed .ax-collapsible__arrow {
  transform: rotate(0deg);
}

.ax-collapsible__content {
  padding: 0 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid transparent;
}

.ax-collapsible.is-collapsed .ax-collapsible__content {
  display: none;
}

.ax-collapsible:not(.is-collapsed) .ax-collapsible__content {
  border-top-color: var(--border);
}

/* Ambient blobs styles (re-enabled and modern glow) */
.ax-ambient__blob {
  display: block;
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.12;
  pointer-events: none;
}

.ax-ambient__blob--a {
  width: 450px;
  height: 450px;
  top: -10%;
  left: -5%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
}

.ax-ambient__blob--b {
  width: 600px;
  height: 600px;
  bottom: 10%;
  right: -10%;
  background: radial-gradient(circle, var(--accent-dim) 0%, transparent 70%);
}



/* Aixir UI/UX 2026: Runway Studio + Pinterest Gallery + Linear Admin */
.ax-studio-shell { display: grid; grid-template-columns: minmax(520px, 0.86fr) minmax(540px, 1.14fr); gap: clamp(14px, 2vw, 26px); align-items: start; }
.ax-studio-preview { position: sticky; top: 78px; height: auto !important; max-height: none !important; align-self: start; }
.ax-studio-preview .ax-preview { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; background: linear-gradient(180deg, oklch(0.16 0.009 235 / .92), oklch(0.10 0.008 235 / .96)); }
.ax-studio-preview .ax-preview__stage { flex: 0 0 auto; min-height: clamp(320px, 40dvh, 460px) !important; height: clamp(320px, 40dvh, 460px); background: radial-gradient(circle at 50% 42%, color-mix(in oklch, var(--accent) 10%, transparent), transparent 62%), #050607; }
.ax-result__actions { align-items: center; }
.ax-mobile-generate-bar { display: none; }
.ax-gallery-inspiration { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklch, var(--surface) 70%, transparent); }
.ax-gallery__grid--masonry { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); grid-auto-flow: dense; align-items: start; }
.ax-system { display: grid; gap: var(--gap); }
.ax-system-hero { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: clamp(18px, 4vw, 34px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: radial-gradient(circle at 12% 0%, color-mix(in oklch, var(--accent) 20%, transparent), transparent 38%), linear-gradient(180deg, color-mix(in oklch, var(--surface) 92%, white 3%), var(--bg-elev)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .04); }
.ax-system-hero h2 { margin: 8px 0 8px; font-size: clamp(30px, 5vw, 58px); line-height: .98; letter-spacing: -0.055em; font-weight: 650; }
.ax-system-hero p { margin: 0; color: var(--fg-muted); max-width: 720px; }
.ax-system-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ax-system-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ax-system-metric { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ax-system-metric span { display: block; color: var(--fg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.ax-system-metric b { display: block; margin-top: 10px; font-family: 'Geist Mono', monospace; font-size: 26px; }
.ax-system-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.ax-system-check { padding: 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elev); }
.ax-system-check.is-ok { border-color: color-mix(in oklch, var(--success) 32%, var(--border)); }
.ax-system-check.is-bad { border-color: color-mix(in oklch, var(--danger) 55%, var(--border)); background: color-mix(in oklch, var(--danger) 8%, var(--bg-elev)); }
.ax-system-check p, .ax-system-check em { display: block; margin: 5px 0 0; color: var(--fg-muted); font-size: 12px; line-height: 1.45; }
.ax-system-stylegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ax-system-style { padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); }
.ax-system-style.error { border-color: color-mix(in oklch, var(--danger) 50%, var(--border)); }
.ax-system-style.ok { border-color: color-mix(in oklch, var(--success) 28%, var(--border)); }
.ax-system-style b { display: block; }
.ax-system-style span { display: block; margin-top: 3px; color: var(--fg-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-system-style p, .ax-system-style li { color: var(--fg-muted); font-size: 12px; line-height: 1.45; }
.ax-system-style ul { margin: 8px 0 0; padding-left: 16px; }
@media (max-width: 1180px) { .ax-studio-shell { grid-template-columns: 1fr; } .ax-studio-preview { position: relative; top: 0; order: -1; } .ax-studio-preview .ax-preview { min-height: auto; } .ax-studio-preview .ax-preview__stage { min-height: 58dvh; } }
@media (max-width: 760px) {
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .ax-main { padding-bottom: calc(156px + env(safe-area-inset-bottom)) !important; }
  .ax-hero__title { font-size: clamp(31px, 11vw, 46px); }
  .ax-studio-shell { gap: 12px; }
  .ax-studio-controls { order: 0; }
  .ax-studio-preview { order: 1; }
  .ax-studio-preview .ax-preview { padding: 12px; border-radius: 18px; }
  .ax-studio-preview .ax-preview__stage { min-height: 54dvh; border-radius: 16px; }
  .ax-studio-preview.is-empty .ax-preview__stage { min-height: 150px !important; height: 150px !important; }
  .ax-preview__foot { display: grid; grid-template-columns: 1fr 1fr; }
  .ax-result__bar { align-items: stretch; flex-direction: column; }
  .ax-result__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .ax-mobile-generate-bar { position: fixed; left: 10px; right: 10px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 130; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid color-mix(in oklch, var(--accent) 38%, var(--border)); border-radius: 18px; background: color-mix(in oklch, var(--surface) 94%, transparent); box-shadow: 0 22px 70px -32px black; backdrop-filter: blur(18px) saturate(160%); }
  .ax-mobile-generate-bar__meta { min-width: 0; display: grid; gap: 2px; }
  .ax-mobile-generate-bar__meta b { font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ax-mobile-generate-bar__meta span { color: var(--fg-muted); font-size: 11px; }
  .ax-mobile-generate-bar .ax-btn { min-width: 118px; }
  .ax-nav__mobile-label { display: block; }
  .ax-gallery-inspiration { flex-wrap: nowrap; overflow-x: auto; margin-left: -2px; margin-right: -2px; scrollbar-width: none; }
  .ax-gallery-inspiration::-webkit-scrollbar { display: none; }
  .ax-gallery-inspiration > * { flex: 0 0 auto; }
  .ax-gallery__grid--masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .ax-system-hero { align-items: stretch; flex-direction: column; padding: 18px; }
  .ax-system-hero__actions { display: grid; grid-template-columns: 1fr; }
  .ax-system-grid { grid-template-columns: 1fr 1fr; }
  .ax-system-checks, .ax-system-stylegrid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .ax-system-grid { grid-template-columns: 1fr; } .ax-result__actions { grid-template-columns: 1fr; } }


.ax-wizard-shell { position: relative; z-index: 1; width: min(1180px, calc(100vw - 32px)); margin: 0 auto; padding: 28px 0 110px; }
.ax-wizard-hero { padding: clamp(22px, 5vw, 46px); border: 1px solid var(--border); border-radius: 28px; background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 15%, transparent), var(--bg-card)); box-shadow: var(--shadow-soft); margin-bottom: 18px; }
.ax-wizard-hero h1 { margin: 8px 0; font-size: clamp(32px, 6vw, 64px); line-height: .95; letter-spacing: -.05em; }
.ax-wizard-progress { display:flex; justify-content:space-between; gap:12px; align-items:center; margin: 14px 0 24px; padding:12px 14px; border:1px solid var(--border); border-radius:16px; background:var(--bg-elev); color:var(--fg-muted); }
.ax-wizard-progress b { color:var(--fg); }
.ax-wizard-card-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:14px; }
.ax-wizard-card { text-align:left; min-height:142px; border:1px solid var(--border); border-radius:22px; padding:18px; background: color-mix(in oklch, var(--bg-card) 88%, transparent); color:var(--fg); transition:.16s ease; display:flex; flex-direction:column; gap:8px; }
.ax-wizard-card:hover, .ax-wizard-card.is-selected { border-color: color-mix(in oklch, var(--accent) 70%, var(--border)); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.ax-wizard-card.is-selected { background: color-mix(in oklch, var(--accent) 14%, var(--bg-card)); }
.ax-wizard-card p { color:var(--fg-muted); font-size:14px; line-height:1.45; margin:0; }
.ax-wizard-card span { margin-top:auto; color:var(--fg-subtle); font-size:12px; }
.ax-wizard-footer { position:sticky; bottom:18px; display:flex; justify-content:flex-end; gap:10px; padding:12px; margin-top:24px; border:1px solid var(--border); border-radius:18px; background: color-mix(in oklch, var(--bg-elev) 92%, transparent); backdrop-filter: blur(16px); z-index:5; }
.ax-wizard-summary { border:1px solid var(--border); border-radius:24px; background:var(--bg-card); padding:22px; }
.ax-wizard-summary pre, .ax-admin-preview { white-space:pre-wrap; overflow:auto; max-height:420px; padding:12px; border-radius:12px; background:#050607; font-size:12px; }
.ax-admin-wizard-grid { display:grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); gap:16px; align-items:start; }
.ax-admin-wizard-editor { grid-column: span 1; }
.ax-wizard-admin-row { width:100%; text-align:left; display:flex; flex-direction:column; gap:4px; padding:12px; margin:8px 0; border:1px solid var(--border); border-radius:14px; background:var(--bg-elev); color:var(--fg); }
.ax-wizard-admin-row span { color:var(--fg-muted); font-size:12px; }
.ax-wizard-admin-row.is-selected { border-color:var(--accent); }
@media (max-width: 860px) { .ax-admin-wizard-grid { grid-template-columns: 1fr; } .ax-wizard-shell { width:min(100% - 20px, 720px); padding-bottom:130px; } .ax-wizard-footer { bottom: calc(82px + env(safe-area-inset-bottom)); justify-content:stretch; } .ax-wizard-footer .ax-btn { flex:1; } }


.ax-field { display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.ax-field__label { font-size:.78rem; font-weight:700; letter-spacing:.02em; color:rgba(226,232,240,.92); }
.ax-field__hint { font-size:.72rem; line-height:1.35; color:rgba(148,163,184,.88); }
.ax-field--inline { flex-direction:row; align-items:center; gap:.6rem; }
.ax-field--inline .ax-field__label { font-size:.82rem; }
.ax-admin-span-2 { grid-column: span 2 / span 2; }
.ax-admin-span-5 { grid-column: span 5 / span 5; }
.ax-admin-span-8 { grid-column: span 8 / span 8; }
@media (max-width: 760px) { .ax-field, .ax-admin-span-2, .ax-admin-span-3, .ax-admin-span-4, .ax-admin-span-5, .ax-admin-span-6, .ax-admin-span-8, .ax-admin-span-12 { grid-column: 1 / -1; } }

/* Edit/Inpaint workspace */
.ax-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.ax-edit-stage { min-height: 520px; }
.ax-edit-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ax-edit-toolbar label { display:flex; align-items:center; gap:8px; color:var(--fg-muted); font-size:12px; }
.ax-mask-wrap { position: relative; width:100%; min-height:420px; display:grid; place-items:center; background: radial-gradient(circle at 50% 35%, var(--surface-2), var(--bg-elev)); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; touch-action:none; }
.ax-mask-wrap img { display:block; max-width:100%; max-height:72vh; -o-object-fit:contain; object-fit:contain; -webkit-user-select:none; -moz-user-select:none; user-select:none; pointer-events:none; }
.ax-mask-wrap canvas { position:absolute; inset:auto; max-width:100%; max-height:72vh; cursor:crosshair; touch-action:none; }
.ax-edit-panel { position: sticky; top: 86px; display:grid; gap:12px; }
.ax-edit-panel label { display:grid; gap:6px; color:var(--fg-muted); font-size:12px; }
.ax-edit-panel .ax-btn { justify-content:center; }
@media (max-width: 960px) { .ax-edit-grid { grid-template-columns:1fr; } .ax-edit-panel { position:static; } .ax-mask-wrap { min-height:320px; } }

.ax-batch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; width: 100%; }
.ax-batch-card { border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.035); overflow: hidden; min-height: 220px; display: flex; flex-direction: column; }
.ax-batch-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); }
.ax-batch-card .ax-result__link { border-radius: 0; flex: 1; min-height: 180px; }
.ax-batch-card .ax-result__link img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.ax-gen--mini { min-height: 180px; border-radius: 0; }

.ax-generate-row { display: grid; grid-template-columns: minmax(104px, 130px) 1fr; gap: 10px; align-items: stretch; }
.ax-variation-inline { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 11px; }
.ax-variation-inline .ax-admin-select { min-height: 34px; padding: 5px 8px; }
.ax-variation-options { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in oklch, var(--bg-elev) 78%, transparent); }
.ax-variation-options__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ax-variation-options__head .ax-chip.is-active { color: var(--fg); border-color: var(--accent); background: var(--accent-soft); }
.ax-variation-options__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ax-variation-option { min-height: 54px; padding: 9px 10px; display: grid; gap: 3px; text-align: left; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--fg-muted); transition: background .15s, border-color .15s, color .15s; }
.ax-variation-option b { color: var(--fg-2); font-size: 12px; font-weight: 600; }
.ax-variation-option span { font-size: 10px; line-height: 1.3; }
.ax-variation-option:hover { border-color: var(--border-strong); }
.ax-variation-option.is-active { color: var(--fg-2); border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 20%, transparent); }
.ax-variation-option.is-active b { color: var(--fg); }
.ax-carousel { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.ax-carousel__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ax-carousel__frame { border: 1px solid var(--border); border-radius: 20px; background: rgba(255,255,255,.035); overflow: hidden; }
.ax-carousel__frame .ax-result__link { min-height: 420px; border-radius: 0; }
.ax-carousel__frame .ax-result__link img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block; background: rgba(0,0,0,.22); }
.ax-carousel__thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.ax-carousel__thumb { width: 58px; height: 58px; flex: 0 0 auto; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--muted); display: grid; place-items: center; overflow: hidden; }
.ax-carousel__thumb.is-active { outline: 2px solid var(--accent); border-color: transparent; }
.ax-carousel__thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.ax-chip--danger { color: #fecaca !important; border-color: rgba(248,113,113,.45) !important; background: rgba(127,29,29,.24) !important; }
@media (max-width: 640px) { .ax-generate-row { grid-template-columns: 1fr; } .ax-carousel__frame .ax-result__link { min-height: 300px; } .ax-variation-options__head { align-items: stretch; flex-direction: column; } .ax-variation-options__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Generate batch carousel layout fix: stage uses absolute children, so carousel must fill it. */
.ax-preview__stage > .ax-carousel { position: absolute; inset: 0; }
.ax-carousel { display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; padding: 12px; min-height: 0; }
.ax-carousel__top { flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.ax-carousel__top .ax-mono { text-align: center; min-width: 0; white-space: nowrap; }
.ax-carousel__top-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.ax-carousel__frame { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.035); overflow: hidden; }
.ax-carousel__frame .ax-batch-card__head { flex: 0 0 auto; padding: 8px 10px; }
.ax-carousel__frame .ax-result__link { flex: 1 1 auto; min-height: 0 !important; height: auto; padding: 8px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.22); }
.ax-carousel__frame .ax-result__link img { width: auto; height: auto; max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; border-radius: 12px; display: block; }
.ax-carousel__frame > .ax-gen { position: relative; flex: 1 1 auto; min-height: 0; }
.ax-carousel__frame .ax-result__bar { flex: 0 0 auto; padding: 8px 10px; gap: 8px; }
.ax-carousel__thumbs { flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; padding: 0 0 2px; }
.ax-carousel__thumb { width: 50px; height: 50px; flex: 0 0 auto; }
.ax-chip--danger { color: #fecaca !important; border-color: rgba(248,113,113,.55) !important; background: rgba(127,29,29,.35) !important; }
.ax-chip--danger:hover { background: rgba(185,28,28,.45) !important; }
@media (max-width: 760px) { .ax-carousel { padding: 8px; gap: 8px; } .ax-carousel__top { grid-template-columns: 1fr; } .ax-carousel__top-actions { justify-content: stretch; } .ax-carousel__top-actions .ax-chip, .ax-carousel__top > .ax-chip { justify-content: center; } }

/* Preview main image bigger after carousel compacting. Keep controls visible, maximize image area. */
.ax-studio-preview .ax-preview { gap: 10px !important; padding: 14px !important; }
.ax-studio-preview .ax-preview__stage { min-height: clamp(520px, 66dvh, 760px) !important; height: clamp(520px, 66dvh, 760px) !important; }
.ax-preview__head { align-items: center !important; }
.ax-preview__foot { gap: 6px !important; }
.ax-preview__foot .ax-kv { padding: 6px 8px !important; }
.ax-carousel { gap: 7px !important; padding: 8px !important; }
.ax-carousel__top { min-height: 32px; }
.ax-carousel__top .ax-chip { min-height: 30px; padding: 5px 9px; }
.ax-carousel__frame { border-radius: 16px; }
.ax-carousel__frame .ax-batch-card__head { padding: 6px 9px; min-height: 30px; }
.ax-carousel__frame .ax-result__link { padding: 4px !important; }
.ax-carousel__frame .ax-result__link img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 18px 44px oklch(0 0 0 / .42); }
.ax-carousel__frame .ax-result__bar { padding: 6px 9px; min-height: 36px; }
.ax-carousel__thumbs { gap: 6px; }
.ax-carousel__thumb { width: 42px !important; height: 42px !important; border-radius: 10px; }
@media (max-width: 1180px) { .ax-studio-preview .ax-preview__stage { min-height: 64dvh !important; height: 64dvh !important; } }
@media (max-width: 760px) { .ax-studio-preview .ax-preview { padding: 10px !important; } .ax-studio-preview .ax-preview__stage { min-height: 60dvh !important; height: 60dvh !important; } .ax-carousel__thumb { width: 38px !important; height: 38px !important; } }

.ax-style-note { margin-bottom: 10px; padding: 8px 10px; border: 1px solid color-mix(in oklch, var(--accent) 26%, var(--border)); border-radius: 12px; background: color-mix(in oklch, var(--accent) 7%, transparent); color: var(--fg-muted); font-size: 12px; line-height: 1.35; }
.ax-style-note b { color: var(--fg); }

/* ============================================================
   Interaction states
   ============================================================
   Focus, active and disabled treatment for every control. Before this the
   stylesheet had six :focus rules, all of them on inputs and selects — the
   buttons, chips, style cards and wizard cards that make up the actual
   interaction had none, so keyboard users had no idea where they were.
   :where() keeps specificity at zero so component rules still win on colour;
   only the ring is added on top. */

:where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
:where(input, select, textarea):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  /* Lifts the ring above neighbouring cards in dense grids. */
  position: relative;
  z-index: 3;
}

/* Inputs already carry a soft inner glow on :focus; pair it with the ring
   rather than replacing it, and drop the glow for pointer focus. */
.ax-prompt__input:focus-visible,
.ax-admin-input:focus-visible,
.ax-admin-select:focus-visible,
.ax-admin-textarea:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--focus-halo);
}

/* Controls that sit on top of imagery need the ring to survive the backdrop. */
.ax-gallery-action:focus-visible,
.ax-lightbox__nav:focus-visible,
.ax-style:focus-visible,
.ax-wizard-card:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 5px oklch(0.10 0.01 250 / 0.55);
}

/* Pressed feedback: every control had a hover state and nothing for the click
   itself, which reads as lag on touch where hover never fires at all. */
.ax-btn:active:not(:disabled),
.ax-chip:active:not(:disabled),
.ax-nav__link:active,
.ax-history__item:active,
.ax-gallery-action:active,
.ax-modal__close:active { transform: translateY(1px) scale(0.985); }

.ax-style:active:not(.is-active),
.ax-format:active:not(.is-active),
.ax-framing__btn:active:not(.is-active),
.ax-wizard-card:active:not(.is-selected) { transform: scale(0.99); }

/* Disabled styling existed only for the primary button. */
.ax-btn:disabled,
.ax-chip:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: saturate(0.6);
}
.ax-btn:disabled:active,
.ax-chip:disabled:active { transform: none; }

/* Dark-app details the browser gets wrong by default. */
::-moz-selection { background: color-mix(in oklch, var(--accent) 32%, transparent); color: var(--fg); }
::selection { background: color-mix(in oklch, var(--accent) 32%, transparent); color: var(--fg); }
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; }

/* Respect the OS "reduce motion" setting. The stylesheet ships 37 transitions
   and 5 keyframe animations, including infinite shimmer loops on the generate
   stage and the gallery skeletons, none of which were opting out. Transitions
   are collapsed rather than removed so state changes stay legible. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ax-btn:active, .ax-chip:active, .ax-style:active,
  .ax-gallery-card:hover, .ax-help:hover, .ax-gallery-action:hover { transform: none !important; }
  .ax-gen__overlay { animation: none !important; opacity: 0.12; }
  .ax-gallery-skeleton { animation: none !important; }
}

/* ============================================================
   Auth
   ============================================================
   The login screen used to be raw Tailwind utilities (bg-neutral-900,
   bg-blue-600) with English placeholders standing in for labels — the one
   screen every user sees first, and the only one not on the design system. */

.ax-auth { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: 24px; overflow: hidden; }
.ax-auth__glow { position: absolute; top: -20%; left: 50%; width: min(760px, 130vw); aspect-ratio: 1; transform: translateX(-50%); pointer-events: none; background: radial-gradient(circle, color-mix(in oklch, var(--accent) 13%, transparent) 0%, transparent 62%); }
.ax-auth__card { position: relative; z-index: 1; width: 100%; max-width: 392px; display: flex; flex-direction: column; gap: 22px; padding: 34px 30px 30px; border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border-strong); box-shadow: 0 34px 90px -40px oklch(0 0 0 / .95), inset 0 1px 0 oklch(1 0 0 / .04); }
.ax-auth__brand { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ax-auth__logo { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; box-shadow: 0 0 40px -14px var(--accent-glow); }
.ax-auth__logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; transform: scale(1.3); filter: drop-shadow(0 0 12px var(--accent-glow)); }
.ax-auth__name { font-size: 25px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.ax-auth__tagline { font-size: 13px; color: var(--fg-muted); }
.ax-auth__form { display: flex; flex-direction: column; gap: 14px; }
.ax-auth__field { display: flex; flex-direction: column; gap: 6px; }
.ax-auth__label { font-size: 12px; font-weight: 600; color: var(--fg-2); letter-spacing: -0.01em; }
.ax-auth__input { width: 100%; min-height: 46px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--border); color: var(--fg); font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s; }
.ax-auth__input::-moz-placeholder { color: var(--fg-dim); }
.ax-auth__input::placeholder { color: var(--fg-dim); }
.ax-auth__input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ax-auth__error { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in oklch, var(--danger) 12%, transparent); border: 1px solid color-mix(in oklch, var(--danger) 38%, transparent); color: oklch(0.88 0.09 25); font-size: 12.5px; line-height: 1.45; }
.ax-auth__foot { text-align: center; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); }

@media (max-width: 420px) {
  .ax-auth { padding: 16px; }
  .ax-auth__card { padding: 28px 20px 24px; border-radius: var(--radius); }
}

/* ============================================================
   Gallery filter bar
   ============================================================
   .ax-admin-input/.ax-admin-select carry width:100% because they were built for
   the admin form grids. Dropped into this flex-wrap toolbar each control then
   claimed a full row of its own, so on desktop the nine filters stacked into a
   ~950px wall that pushed the actual images below the fold. The <=960px media
   query already corrected this with a flex basis; the desktop case never did. */

.ax-gallery__filters > .ax-admin-input,
.ax-gallery__filters > .ax-admin-select {
  width: auto;
  flex: 0 1 auto;
  min-width: 132px;
  max-width: 210px;
  min-height: 38px;
  padding-top: 7px;
  padding-bottom: 7px;
}

/* The search field is the primary control and gets the leftover room. */
.ax-gallery__filters > .ax-gallery-search {
  flex: 1 1 280px;
  min-width: 220px;
  max-width: none;
}

/* Match the toggle chips to the field height so the bar reads as one row. */
.ax-gallery__filters > .ax-chip,
.ax-gallery__filters > .ax-btn { min-height: 38px; }

.ax-gallery__bar--stack { gap: 8px; }

/* The inspiration shortcuts sat in the middle of the header as a bordered box
   whose primary button wrapped onto a second line. Kept as one quiet row so it
   reads as a toolbar next to the stats instead of a stray card. */
.ax-gallery-inspiration {
  flex-wrap: nowrap;
  margin-bottom: 0;
  padding: 7px 9px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface) 55%, transparent);
}
.ax-gallery-inspiration > .ax-mono { padding-left: 4px; white-space: nowrap; }
.ax-gallery-inspiration > .ax-chip { min-height: 32px; }
.ax-gallery-inspiration > .ax-btn { min-height: 32px; padding: 6px 14px; white-space: nowrap; }

/* .ax-gallery__top holds three siblings (title block, shortcuts, counters) and
   spreads them with space-between, which left the shortcuts stranded mid-header.
   Pushing the shortcuts right groups them with the counters against the title. */
@media (min-width: 961px) {
  .ax-gallery__top { align-items: center; flex-wrap: wrap; row-gap: 12px; }
  .ax-gallery__top > .ax-gallery-inspiration { margin-left: auto; }
}

/* Below 961px the header stacks (align-items: stretch). Scoping the rule above
   to desktop matters: applied unconditionally it re-centred the stacked column,
   which stopped the title block from shrinking and clipped the subtitle. */
@media (max-width: 960px) {
  .ax-gallery__top > * { min-width: 0; max-width: 100%; }
  .ax-gallery-inspiration { border-radius: var(--radius); }
}

/* Collapsible analysis console: a batch tool that does not need to occupy the
   top of the gallery on every visit. */
.ax-gallery-console { padding: 0; }
.ax-gallery-console__summary { display: flex; align-items: center; gap: 12px; padding: 12px; cursor: pointer; list-style: none; border-radius: var(--radius); }
.ax-gallery-console__summary::-webkit-details-marker { display: none; }
.ax-gallery-console__summary:hover { background: color-mix(in oklch, var(--surface-2) 60%, transparent); }
.ax-gallery-console__caret { color: var(--fg-dim); font-size: 11px; transition: transform .15s; }
.ax-gallery-console[open] .ax-gallery-console__caret { transform: rotate(90deg); }
.ax-gallery-console__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ax-gallery-console__summary > .ax-admin-pill { margin-left: auto; flex-shrink: 0; }
.ax-gallery-console > *:not(summary) { margin: 0 12px; }
.ax-gallery-console > *:last-child { margin-bottom: 12px; }
.ax-active-filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: -2px 0 14px; }
.ax-active-filters .ax-chip { min-height: 30px; padding: 5px 9px; }

/* Footer for long lists that render only their first slice. */
.ax-showmore { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-top: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: color-mix(in oklch, var(--surface) 45%, transparent); }
.ax-showmore__count { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); }
.ax-showmore__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* App dialogs (see components/DialogProvider.tsx). Builds on .ax-modal. */
.ax-dialog { max-width: 440px; }
.ax-dialog__foot { justify-content: flex-end; gap: 8px; }
.ax-dialog__error { font-size: 12px; color: oklch(0.80 0.13 25); }

/* Destructive primary action — the app had no visual language for one, so every
   delete confirmation looked exactly like a harmless one. */
.ax-btn--danger { background: linear-gradient(180deg, color-mix(in oklch, var(--danger) 92%, white 8%), var(--danger)); color: oklch(0.16 0.02 25); font-weight: 700; box-shadow: 0 0 0 1px color-mix(in oklch, var(--danger) 34%, transparent), 0 10px 30px -10px color-mix(in oklch, var(--danger) 45%, transparent); }
.ax-btn--danger:hover { filter: brightness(1.06); }

/* Table density: rows were 61px tall for what is usually one filename plus one
   button, which is what turned these lists into thousand-pixel walls. Tightened
   to ~44px — still above the 44px touch-target floor the mobile rules set. */
.ax-admin-table td { padding: 9px 14px; }
.ax-admin-table th { padding: 9px 14px; }
.ax-admin-table td .ax-chip,
.ax-admin-table td .ax-btn { min-height: 30px; padding: 5px 10px; }
/* Long paths should wrap inside the cell instead of stretching the table. */
.ax-admin-table td.font-mono { overflow-wrap: anywhere; }
/* A sticky header keeps the column meaning while scrolling a long list. */
.ax-admin-table thead th { position: sticky; top: 0; z-index: 2; }

@media (max-width: 760px) {
  .ax-admin-table td .ax-chip,
  .ax-admin-table td .ax-btn { min-height: 38px; }
}

/* Long filenames in a dialog body must not stretch the panel. */
.ax-dialog .ax-modal__body p { overflow-wrap: anywhere; }

/* Card metadata is three spans (id · style · date) spread with space-between.
   A long style name wrapped the row onto three lines, which made single cards
   taller than their neighbours and left the grid looking ragged. The ends keep
   their width, the style name in the middle takes what is left and truncates. */
.ax-gallery-card__meta { flex-wrap: nowrap; align-items: baseline; }
.ax-gallery-card__meta > span { white-space: nowrap; }
.ax-gallery-card__meta > span:first-child,
.ax-gallery-card__meta > span:last-child { flex: 0 0 auto; }
.ax-gallery-card__meta > span:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* ============================================================
   Navigation breakpoint
   ============================================================
   The desktop nav needs 933px (brand + 7 links + user + logout), but the mobile
   bottom-bar treatment only started at 760px. Everything between 761px and
   932px therefore overflowed horizontally — worst at 768px, iPad portrait, with
   165px of the page pushed off-screen on every single route. The bottom-bar
   rules move up to 940px; the existing <=760px block still refines them below. */

@media (max-width: 940px) {
  body { padding-bottom: 76px; }
  .ax-nav { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 14px; }
  .ax-nav__brand { min-width: 0; }
  .ax-nav__sep, .ax-nav__crumb { display: none; }
  .ax-nav__links {
    position: fixed; left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 120; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(82px, 1fr);
    gap: 6px; overflow-x: auto; padding: 7px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    background: color-mix(in oklch, var(--bg) 90%, transparent);
    border: 1px solid var(--border-strong); border-radius: 18px;
    box-shadow: 0 18px 55px -25px oklch(0 0 0 / .9);
    backdrop-filter: blur(18px) saturate(150%);
  }
  .ax-nav__links::-webkit-scrollbar { display: none; }
  .ax-nav__link {
    flex: 0 0 auto; min-height: 46px; padding: 7px 8px; flex-direction: column; gap: 3px;
    font-size: 11px; line-height: 1.05;
    background: color-mix(in oklch, var(--surface) 74%, transparent);
    border: 1px solid var(--border);
  }
  .ax-nav__link.is-active { border-color: color-mix(in oklch, var(--accent) 50%, var(--border)); }
  .ax-nav__right { margin-left: 0; justify-content: flex-end; gap: 8px; min-width: 0; }
  .ax-quota { display: none; }
}

/* backdrop-filter on .ax-nav establishes a containing block for its
   position:fixed descendants. .ax-nav__links is such a descendant, so the
   mobile bottom tab bar resolved `bottom` against the 61px-tall header instead
   of the viewport and rendered as a strip across the top, covering the logo —
   while body's 76px bottom padding reserved space nothing ever used.
   Dropping the header's own blur below the nav breakpoint restores the viewport
   as the containing block; the tab bar keeps its own blur. The header is nearly
   opaque here to make up for the lost effect. */
@media (max-width: 940px) {
  .ax-nav {
    backdrop-filter: none;
    background: color-mix(in oklch, var(--bg) 97%, transparent);
  }
}

/* Floating primary action, shown only while the real button is off screen. */
.ax-actionbar {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 115;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--bg-elev) 88%, transparent);
  border: 1px solid var(--border-strong);
  box-shadow: 0 20px 50px -20px oklch(0 0 0 / .85);
  backdrop-filter: blur(18px) saturate(150%);
  animation: ax-actionbar-in .18s var(--ease-out, cubic-bezier(.2,.9,.3,1));
  max-width: calc(100vw - 24px);
}
@keyframes ax-actionbar-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ax-actionbar__label { font-size: 12px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-actionbar__label b { color: var(--fg-2); font-weight: 600; }
.ax-actionbar .ax-btn { min-height: 40px; white-space: nowrap; }

/* Sits above the mobile tab bar rather than under it. */
@media (max-width: 940px) {
  .ax-actionbar { bottom: calc(76px + max(10px, env(safe-area-inset-bottom))); }
}
@media (max-width: 520px) {
  .ax-actionbar { left: 12px; right: 12px; transform: none; max-width: none; justify-content: space-between; }
  @keyframes ax-actionbar-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .ax-actionbar { animation: none !important; } }

/* Persistent generation queue. */
.ax-nav__jobs { position: relative; }
.ax-nav__count {
  display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: oklch(0.16 0.03 var(--accent-h));
  font: 700 10px/1 'Geist Mono', monospace; box-shadow: 0 0 0 2px var(--bg);
}
.ax-jobs { max-width: 1180px; }
.ax-jobs__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ax-jobs__summary {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 22px 0 12px;
}
.ax-jobs__summary > * {
  min-width: 0; padding: 15px 16px; text-align: left; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: inherit;
}
.ax-jobs__summary button { cursor: pointer; transition: border-color .15s, background .15s; }
.ax-jobs__summary button:hover, .ax-jobs__summary button.is-active { border-color: var(--accent); background: var(--accent-soft); }
.ax-jobs__summary b { display: block; font: 600 24px/1 'Geist Mono', monospace; color: var(--fg); }
.ax-jobs__summary span { display: block; margin-top: 7px; font-size: 11px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .05em; }
.ax-jobs__toolbar { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.ax-jobs__toolbar .ax-chip.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.ax-jobs__live { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font: 10px/1 'Geist Mono', monospace; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .05em; }
.ax-jobs__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 16%, transparent); }
.ax-jobs__notice { display: flex; align-items: center; gap: 9px; margin: 10px 0; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--fg-muted); font-size: 12px; }
.ax-jobs__notice.is-error { border-color: color-mix(in oklch, var(--danger) 45%, var(--border)); color: var(--danger); }
.ax-jobs__list { display: flex; flex-direction: column; gap: 9px; }
.ax-job {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  box-shadow: 0 14px 44px -42px oklch(0 0 0 / .9);
}
.ax-job--rendering { border-color: color-mix(in oklch, var(--accent) 44%, var(--border)); }
.ax-job__thumb { width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-dim); }
.ax-job__thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.ax-job__body { min-width: 0; }
.ax-job__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ax-job__top > .ax-mono { color: var(--fg-dim); font-size: 10px; white-space: nowrap; }
.ax-job__status { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--fg-muted); }
.ax-job__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-dim); }
.ax-job__status.is-rendering { color: var(--accent); }
.ax-job__status.is-rendering i { background: var(--accent); animation: ax-status-pulse 1.4s ease-in-out infinite; }
.ax-job__status.is-waiting i, .ax-job__status.is-starting i { background: var(--warning); }
.ax-job__status.is-done i { background: var(--success); }
.ax-job__status.is-failed { color: var(--danger); }
.ax-job__status.is-failed i { background: var(--danger); }
.ax-job__prompt { margin: 7px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-size: 13px; }
.ax-job__meta { display: flex; gap: 6px 12px; flex-wrap: wrap; color: var(--fg-dim); font: 10px/1.3 'Geist Mono', monospace; }
.ax-job__progress { position: relative; height: 18px; margin-top: 9px; overflow: hidden; border-radius: 5px; background: var(--bg-elev); border: 1px solid var(--border); }
.ax-job__progress-fill { position: absolute; inset: 0 auto 0 0; width: 34%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); animation: ax-job-progress 1.7s ease-in-out infinite; opacity: .55; }
.ax-job__progress-fill[style] { animation: none; opacity: .7; }
.ax-job__progress span { position: absolute; inset: 0; display: grid; place-items: center; font: 9px/1 'Geist Mono', monospace; color: var(--fg-2); }
.ax-job__comfy { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--fg-dim); font: 10px/1.3 'Geist Mono', monospace; }
.ax-job__comfy b { color: var(--fg-muted); font-weight: 500; }
.ax-job__comfy span { margin-left: auto; }
.ax-comfy-progress { width: min(100%, 360px); display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ax-comfy-progress .ax-bar { width: 100%; }
.ax-comfy-progress .ax-job__comfy { width: 100%; justify-content: center; }
.ax-comfy-progress .ax-job__comfy span { margin-left: 0; }

/* Multi-LoRA picker in image generation. */
.ax-loras__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ax-lora { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev); transition: border-color .15s, background .15s; }
.ax-lora.is-active { border-color: var(--accent); background: var(--accent-soft); }
.ax-lora.is-disabled { opacity: .58; }
.ax-lora__pick { width: 100%; min-height: 64px; display: grid; grid-template-columns: 42px 24px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; color: inherit; text-align: left; }
.ax-lora__pick:not(:disabled):hover { background: color-mix(in oklch, var(--surface-2) 56%, transparent); }
.ax-lora__thumb { width: 42px; height: 42px; display: grid; place-items: center; -o-object-fit: cover; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-dim); }
.ax-lora__thumb.is-empty { opacity: .58; }
.ax-lora__check { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 7px; color: var(--fg-muted); font: 600 13px/1 'Geist Mono', monospace; }
.ax-lora.is-active .ax-lora__check { background: var(--accent); border-color: var(--accent); color: oklch(0.16 0.03 var(--accent-h)); }
.ax-lora__identity { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ax-lora__identity b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--fg); }
.ax-lora__identity > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 9.5px/1.2 'Geist Mono', monospace; color: var(--fg-dim); }
.ax-lora__state { padding: 3px 6px; border-radius: 5px; border: 1px solid var(--border); color: var(--fg-dim); font: 9px/1 'Geist Mono', monospace; text-transform: uppercase; }
.ax-lora__state.is-ready { color: var(--success); }
.ax-lora__strength { display: grid; grid-template-columns: auto minmax(80px, 1fr); gap: 7px 10px; align-items: center; padding: 8px 10px 10px; border-top: 1px dashed var(--border); }
.ax-lora__strength label { font-size: 10px; color: var(--fg-muted); }
.ax-lora__strength label b { color: var(--accent); font-family: 'Geist Mono', monospace; }
.ax-lora__strength input { width: 100%; accent-color: var(--accent); }
.ax-lora__strength > span { grid-column: 1 / -1; font-size: 9px; color: var(--fg-dim); }
.ax-lora__triggers { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 10px 9px; }
.ax-lora__triggers span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 3px 6px; border-radius: 5px; background: var(--surface-2); color: var(--fg-dim); font: 9px/1 'Geist Mono', monospace; }
.ax-loras__empty { padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--fg-muted); font-size: 12px; text-align: center; }
.ax-loras__foot { display: flex; justify-content: space-between; gap: 10px; color: var(--fg-dim); font: 9.5px/1.2 'Geist Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 680px) { .ax-loras__grid { grid-template-columns: 1fr; } }
@keyframes ax-job-progress { from { transform: translateX(-110%); } to { transform: translateX(300%); } }
.ax-job__error { margin: 8px 0 0; font-size: 11px; color: var(--danger); line-height: 1.4; }
.ax-job__actions { display: flex; align-items: center; gap: 7px; }
.ax-jobs__empty { min-height: 310px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); color: var(--fg-muted); }

@media (max-width: 760px) {
  .ax-jobs__summary { grid-template-columns: repeat(2, 1fr); }
  .ax-jobs__summary > *:first-child { grid-column: span 2; }
  .ax-job { grid-template-columns: 52px minmax(0, 1fr); align-items: start; }
  .ax-job__thumb { width: 52px; height: 52px; }
  .ax-job__actions { grid-column: 1 / -1; justify-content: flex-end; }
  .ax-job__prompt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ax-jobs__live { width: 100%; margin: 5px 0 0; }
  .ax-nav__count { position: absolute; top: 2px; right: 5px; box-shadow: 0 0 0 2px var(--surface); }
}

/* Style cards: names over two lines instead of a clipped stub, and a search
   field in the section header. */
.ax-style__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; overflow-wrap: anywhere; }
.ax-styles__meta { gap: 10px; }
.ax-styles__search { width: auto; min-width: 150px; max-width: 220px; min-height: 32px; padding: 5px 10px; font-size: 12px; }
@media (max-width: 760px) {
  .ax-styles__meta { flex-wrap: wrap; }
  .ax-styles__search { min-width: 0; flex: 1 1 140px; max-width: none; min-height: 38px; }
}

/* Prompt optimizer preview — sits under the prompt box on generate/img2img/
   img2video/wizard. Reads as a suggestion, not as committed input. */
.ax-optimizer {
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--bg-elev);
  display: flex; flex-direction: column; gap: 7px;
}
.ax-optimizer__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ax-optimizer__mode {
  background: transparent; border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 8px; font-size: 11px; color: inherit;
}
.ax-optimizer__text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ax-optimizer__neg { font-size: 11px; line-height: 1.45; color: var(--text-dim, #9a9a9a); word-break: break-word; }
.ax-optimizer__warn { margin: 0; padding-left: 16px; font-size: 11px; color: #d9a441; display: flex; flex-direction: column; gap: 2px; }
.ax-optimizer__warn li { list-style: disc; }
.ax-optimizer__loras { display: flex; flex-direction: column; gap: 7px; padding-top: 9px; border-top: 1px dashed var(--border); }
.ax-optimizer__lora-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ax-optimizer__lora-head > span { font-size: 11px; font-weight: 650; color: var(--fg); text-transform: uppercase; letter-spacing: .05em; }
.ax-optimizer__lora-head small { color: var(--fg-dim); font-size: 9.5px; }
.ax-optimizer__lora-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ax-optimizer__lora { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); color: inherit; text-align: left; }
.ax-optimizer__lora:not(:disabled):hover { border-color: var(--accent); background: var(--accent-soft); }
.ax-optimizer__lora.is-selected { border-color: color-mix(in oklch, var(--success) 45%, var(--border)); opacity: .72; }
.ax-optimizer__lora > img, .ax-optimizer__lora-placeholder { width: 34px; height: 34px; display: grid; place-items: center; -o-object-fit: cover; object-fit: cover; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--fg-dim); }
.ax-optimizer__lora-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ax-optimizer__lora-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--fg-2); }
.ax-optimizer__lora-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-dim); font: 9px/1.2 'Geist Mono', monospace; }
.ax-optimizer__loras > p { margin: 0; color: var(--fg-dim); font-size: 9.5px; line-height: 1.4; }
.ax-optimizer__lora-empty { margin: 0; padding-top: 8px; border-top: 1px dashed var(--border); color: var(--fg-dim); font-size: 10px; }
@media (max-width: 560px) { .ax-optimizer__lora-list { grid-template-columns: 1fr; } }
.file\:mr-3::file-selector-button{
  margin-right: 0.75rem;
}
.file\:min-h-11::file-selector-button{
  min-height: 2.75rem;
}
.file\:rounded::file-selector-button{
  border-radius: 0.25rem;
}
.file\:border-0::file-selector-button{
  border-width: 0px;
}
.file\:bg-neutral-700::file-selector-button{
  --tw-bg-opacity: 1;
  background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
}
.file\:px-3::file-selector-button{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.file\:py-2::file-selector-button{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.file\:text-white::file-selector-button{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:border-\[var\(--accent\)\]:hover{
  border-color: var(--accent);
}
.hover\:border-\[var\(--border-strong\)\]:hover{
  border-color: var(--border-strong);
}
.hover\:bg-\[var\(--bg-elev-dark\)\]:hover{
  background-color: var(--bg-elev-dark);
}
.hover\:bg-neutral-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1));
}
.hover\:bg-neutral-800:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:text-neutral-100:hover{
  --tw-text-opacity: 1;
  color: rgb(245 245 245 / var(--tw-text-opacity, 1));
}
.hover\:text-red-400:hover{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:opacity-90:hover{
  opacity: 0.9;
}
.hover\:ring-2:hover{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.hover\:file\:bg-neutral-600::file-selector-button:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1));
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.group:hover .group-hover\:opacity-100{
  opacity: 1;
}
@media (min-width: 640px){

  .sm\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[120px_1fr\]{
    grid-template-columns: 120px 1fr;
  }

  .sm\:grid-cols-\[160px_1fr\]{
    grid-template-columns: 160px 1fr;
  }

  .sm\:grid-cols-\[1fr_auto\]{
    grid-template-columns: 1fr auto;
  }

  .sm\:grid-cols-\[96px_1fr\]{
    grid-template-columns: 96px 1fr;
  }

  .sm\:flex-row{
    flex-direction: row;
  }
}
@media (min-width: 768px){

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (min-width: 1280px){

  .xl\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}