/* ============================================================Generator page — only generator-specific styles.Header / footer / body / button / panel / hero typography /container all come from shared rYsHNxx.css (style.css).Class names that start with `.generator-*` are JS-bound andMUST stay so the generator.js selector hooks still resolve.============================================================ *//* ----------------------------------------------------------Layout — spacing & section rhythm---------------------------------------------------------- */.tOrGEgj {padding-bottom: 80px;}.bVMGXgk {padding: 64px 0 0;}.whxnXgl {display: grid;gap: 28px;max-width: 880px;margin: 0 auto;}.RHBQvgm {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 6px;padding: 0 0 6px;}.RHBQvgm .pnFkSzj {margin: 0 0 12px;}.RHBQvgm h1 {margin: 0;font-family: var(--font-display);font-size: clamp(2rem, 3.6vw, 2.8rem);letter-spacing: -0.04em;line-height: 1.02;}.lbEEGgn {max-width: 60ch;margin: 14px auto 0;color: var(--muted);line-height: 1.65;font-size: 0.98rem;}/* ----------------------------------------------------------Form shell — visuals come from shared `.hAhiO0a`,this only contributes inner layout direction/gap.---------------------------------------------------------- */.qFormAb1 {display: flex;flex-direction: column;gap: 18px;padding: 22px;border-radius: var(--radius-xl);min-width: 0;}.vFrmPn2 {display: flex;flex-direction: column;gap: 18px;}.vFrmPn2.FpXpPs6 {display: none;}.vFrmPn2[data-pane="form"] {gap: 18px;}.vFrmPn2[data-pane="gallery"] {gap: 0;}/* ----------------------------------------------------------Mode tab bar (Generate / Edit image / My Images)---------------------------------------------------------- */.rModeBc2 {display: flex;align-items: center;gap: 6px;padding: 4px;border: 1px solid var(--line);border-radius: 999px;background: rgba(10, 14, 25, 0.6);width: 100%;overflow-x: auto;scrollbar-width: none;}.rModeBc2::-webkit-scrollbar {display: none;}.sModeCd3 {display: inline-flex;align-items: center;justify-content: center;gap: 8px;min-height: 40px;padding: 0 16px;border: 1px solid transparent;border-radius: 999px;background: transparent;color: var(--muted);font-size: 0.88rem;font-weight: 700;cursor: pointer;transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;white-space: nowrap;flex: 0 0 auto;line-height: 1;}.sModeCd3[data-mode="gallery"] {margin-left: auto;}.sModeCd3 svg {width: 16px;height: 16px;flex: 0 0 16px;}.sModeCd3 .tMdlEf0 {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 1;}.sModeCd3 .uMdlCn1 {display: inline-flex;align-items: center;justify-content: center;min-width: 22px;height: 22px;padding: 0 7px;border-radius: 999px;background: rgba(255, 255, 255, 0.08);color: var(--text);font-size: 0.72rem;font-weight: 700;line-height: 1;letter-spacing: 0;flex: 0 0 auto;}.sModeCd3.JkVoLs0 {background: linear-gradient(135deg, #213f8f 0%, #2a56b2 48%, #2d7ca6 100%);color: #fff;box-shadow: 0 8px 22px rgba(33, 63, 143, 0.34);border-color: rgba(95, 134, 255, 0.6);}.sModeCd3.JkVoLs0 .uMdlCn1 {background: rgba(8, 12, 20, 0.32);color: #fff;}.sModeCd3:hover:not(.JkVoLs0) {color: var(--text);background: rgba(255, 255, 255, 0.04);}/* ----------------------------------------------------------Busy / disabled states during generation---------------------------------------------------------- */.yEogPns .rModeBc2,.yEogPns .vFrmPn2 > *:not(.gFrmAc7),.yEogPns .hPilBa8 {opacity: 0.55;pointer-events: none;user-select: none;}.yEogPns .TbLhahw {pointer-events: none;}/* ----------------------------------------------------------Upload widget (Edit image mode)---------------------------------------------------------- */.tUplDe4 {position: relative;display: flex;flex-direction: column;gap: 10px;}.tUplDe4.FpXpPs6 {display: none;}.kuiiKgz {position: absolute;inset: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer;z-index: 2;}.uUplEm5 {position: relative;display: flex;flex-direction: column;align-items: center;gap: 6px;padding: 22px 16px;border: 1px dashed var(--line-strong);border-radius: var(--radius-md);background: rgba(8, 12, 22, 0.52);color: var(--muted);transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;pointer-events: none;}.tUplDe4:hover .uUplEm5 {border-color: var(--blue);transform: translateY(-1px);}.tUplDe4.OvYrOv3 .uUplEm5 {border-color: var(--cyan);background: rgba(51, 214, 255, 0.08);}.uUplEm5.FpXpPs6 {display: none;}.uUplEm5 svg {width: 28px;height: 28px;color: var(--cyan);}.uUplEm5 strong {color: var(--text);font-size: 0.98rem;font-family: var(--font-display);letter-spacing: -0.02em;}.uUplEm5 span {font-size: 0.82rem;}.vUplPr6 {position: relative;display: flex;gap: 12px;align-items: center;padding: 10px 44px 10px 10px;border: 1px solid var(--line);border-radius: 14px;background: linear-gradient(180deg, rgba(17, 23, 40, 0.78), rgba(11, 16, 32, 0.78));transition: border-color 180ms ease;}.vUplPr6:hover {border-color: var(--line-strong);}.vUplPr6.FpXpPs6 {display: none;}.wUplTh7 {flex: 0 0 64px;aspect-ratio: 1 / 1;border-radius: 10px;overflow: hidden;border: 1px solid var(--line);background: rgba(8, 12, 22, 0.6);}.wUplTh7 img {width: 100%;height: 100%;object-fit: cover;display: block;}.xUplMe8 {flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 2px;}.yUplNa9 {font-size: 0.9rem;color: var(--text);font-weight: 700;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 100%;}.zUplSi0 {font-size: 0.76rem;color: var(--muted);}.aUplRm1 {position: absolute;top: 8px;right: 8px;width: 26px;height: 26px;border-radius: 50%;border: 0;background: rgba(8, 12, 22, 0.78);color: #fff;cursor: pointer;font-size: 16px;line-height: 1;display: inline-flex;align-items: center;justify-content: center;transition: background-color 180ms ease;}.aUplRm1:hover {background: rgba(220, 50, 90, 0.92);}/* ----------------------------------------------------------Prompt textarea + Enhance button---------------------------------------------------------- */.bFrmPr2 {position: relative;display: flex;flex-direction: column;}.rebvygw {width: 100%;min-height: 92px;padding: 14px 52px 14px 16px;border: 1px solid var(--line);border-radius: var(--radius-md);background: rgba(8, 12, 22, 0.72);color: var(--text);font-size: 0.96rem;line-height: 1.45;resize: vertical;transition: border-color 180ms ease, box-shadow 180ms ease;}.rebvygw::placeholder {color: rgba(152, 166, 201, 0.7);}.rebvygw:focus {outline: none;border-color: rgba(95, 134, 255, 0.6);box-shadow: 0 0 0 3px rgba(95, 134, 255, 0.18);}.vhbVOgx {position: absolute;top: 12px;right: 12px;width: 32px;height: 32px;display: inline-flex;align-items: center;justify-content: center;padding: 0;border: 1px solid var(--line);border-radius: 10px;background: rgba(17, 23, 40, 0.72);color: var(--muted);cursor: pointer;transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;}.vhbVOgx svg {width: 16px;height: 16px;}.vhbVOgx:hover:not(:disabled) {color: var(--text);border-color: var(--line-strong);transform: translateY(-1px);}.vhbVOgx:disabled {opacity: 0.45;cursor: not-allowed;}/* ----------------------------------------------------------Form rows (Model / Quality)---------------------------------------------------------- */.cFrmRw3 {display: flex;flex-wrap: wrap;gap: 16px;align-items: flex-end;}.dFrmGp4 {display: flex;flex-direction: column;gap: 8px;min-width: 0;}.eFrmLb5 {font-size: 0.78rem;font-weight: 800;color: var(--muted);letter-spacing: 0.06em;text-transform: uppercase;}.fFrmSc6 {display: flex;flex-direction: column;gap: 10px;}/* ----------------------------------------------------------Segmented control (Model / Quality)---------------------------------------------------------- */.WNzvJh5 {display: inline-flex;align-items: stretch;padding: 4px;border: 1px solid var(--line);border-radius: 14px;background: rgba(8, 12, 22, 0.6);gap: 4px;flex-wrap: wrap;}.CGnfrh6 {display: inline-flex;align-items: center;justify-content: center;gap: 6px;min-height: 40px;padding: 0 16px;border: 1px solid transparent;border-radius: 10px;background: transparent;color: var(--muted);font-size: 0.86rem;font-weight: 700;cursor: pointer;transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;white-space: nowrap;line-height: 1;}.CGnfrh6.PwZsPw4 {opacity: 0.55;cursor: not-allowed;color: var(--muted);}.CGnfrh6 .cibRmh8 {width: 14px;height: 14px;flex: 0 0 14px;}.CGnfrh6.JkVoLs0 {background: linear-gradient(135deg, #213f8f 0%, #2a56b2 48%, #2d7ca6 100%);color: #fff;box-shadow: 0 6px 18px rgba(33, 63, 143, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);border-color: rgba(95, 134, 255, 0.55);}.CGnfrh6:hover:not(.PwZsPw4):not(.JkVoLs0) {color: var(--text);background: rgba(255, 255, 255, 0.04);}/* ----------------------------------------------------------Checkbox (compact toggle)---------------------------------------------------------- *//* ----------------------------------------------------------Style picker (uniform Select pills)---------------------------------------------------------- */.UNgxKhe {display: grid;grid-template-columns: repeat(9, minmax(0, 1fr));gap: 8px;}.qitpbhf {display: flex;flex-direction: column;align-items: center;gap: 6px;padding: 4px 0 0;border: 0;background: transparent;cursor: pointer;color: var(--muted);font-size: 0.7rem;font-weight: 700;min-width: 0;transition: transform 180ms ease;border-radius: 12px;}.QbqnUhg {width: 100%;min-height: 30px;padding: 6px 8px;border-radius: 8px;border: 1px dashed var(--line-strong);background: transparent;color: var(--muted);font-size: 0.72rem;font-weight: 700;letter-spacing: 0.02em;display: inline-flex;align-items: center;justify-content: center;box-sizing: border-box;transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;}.qitpbhf:hover .QbqnUhg {border-style: solid;border-color: var(--line-strong);color: var(--text);background: rgba(51, 214, 255, 0.04);}.qitpbhf.JkVoLs0 .QbqnUhg {border-style: solid;border-color: var(--cyan);color: #fff;background: linear-gradient(135deg, rgba(51, 214, 255, 0.22), rgba(95, 134, 255, 0.22));box-shadow: 0 0 0 2px rgba(51, 214, 255, 0.18), 0 4px 14px rgba(51, 214, 255, 0.18);}.aEGWdhi {color: var(--muted);max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.qitpbhf.JkVoLs0 .aEGWdhi {color: var(--text);}/* ----------------------------------------------------------Shape picker (aspect ratio)---------------------------------------------------------- */.SQuBnho {display: grid;grid-template-columns: repeat(auto-fit, minmax(0, 1fr));gap: 8px;align-items: stretch;}.MFyxchp {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 8px;padding: 14px 6px 10px;min-height: 70px;border: 1px solid var(--line);border-radius: 12px;background: rgba(8, 12, 22, 0.5);cursor: pointer;transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease;line-height: 1;}.MFyxchp:hover {border-color: var(--line-strong);transform: translateY(-1px);}.MFyxchp.JkVoLs0 {border-color: var(--cyan);background: rgba(51, 214, 255, 0.08);box-shadow: 0 0 0 1px rgba(51, 214, 255, 0.25);}.PkhvShq {display: block;background: rgba(95, 134, 255, 0.32);border-radius: 5px;}.MFyxchp.JkVoLs0 .PkhvShq {background: var(--cyan);}.xDnfOmr {font-size: 0.7rem;font-weight: 700;color: var(--muted);line-height: 1;}.MFyxchp.JkVoLs0 .xDnfOmr {color: var(--text);}.MFyxchp.JkVoLs0 .EZnZQ71tq {border-color: var(--cyan);}.fwYlNhr {width: 40px;height: 23px;}.cMeSZhs {width: 32px;height: 24px;}.wWVHKht {width: 26px;height: 26px;}.oNblKhu {width: 21px;height: 28px;}.NrEsOhv {width: 16px;height: 28px;}.EZnZQ71tq {width: 28px;height: 22px;border: 1px dashed currentColor;background: transparent;opacity: 0.85;}/* ----------------------------------------------------------Generate CTA — size override on top of shared `.button`/`.OqDOJzf`---------------------------------------------------------- */.gFrmAc7 {display: flex;flex-direction: column;margin-top: 4px;}.TbLhahw {width: 100%;min-height: 56px;padding: 0 26px;font-size: 1rem;font-weight: 800;letter-spacing: 0.01em;}.TbLhahw:disabled {opacity: 0.55;cursor: not-allowed;filter: grayscale(0.4);box-shadow: none;transform: none;}.TbLhahw:not(:disabled):hover {transform: translateY(-1px);}.aWRlqhy {width: 18px;height: 18px;border-radius: 50%;border: 2px solid rgba(255, 255, 255, 0.4);border-top-color: #fff;display: none;animation: generator-spin 0.8s linear infinite;}.TbLhahw.NuXqNu2 .aWRlqhy {display: inline-block;}.TbLhahw.NuXqNu2 .uZQFphx {opacity: 0.8;}/* ----------------------------------------------------------"My Images" pill (gallery container inside form)---------------------------------------------------------- */.hPilBa8 {display: flex;flex-direction: column;gap: 14px;padding: 18px;border: 1px solid var(--line-strong);border-radius: 22px;background:radial-gradient(circle at 0% 0%, rgba(95, 134, 255, 0.12), transparent 32%),radial-gradient(circle at 100% 0%, rgba(51, 214, 255, 0.1), transparent 28%),linear-gradient(180deg, rgba(17, 23, 40, 0.92), rgba(11, 16, 32, 0.94));box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);position: relative;animation: generator-pill-in 320ms ease;}.hPilBa8.FpXpPs6 {display: none;}.iPilHd9 {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding-bottom: 12px;border-bottom: 1px solid var(--line);}.jPilTl0 {display: inline-flex;align-items: center;gap: 10px;font-family: var(--font-display);font-size: 1.02rem;font-weight: 800;color: var(--text);letter-spacing: -0.02em;}.jPilTl0 svg {width: 18px;height: 18px;color: var(--cyan);flex: 0 0 18px;}.mPilBd3 {display: flex;flex-direction: column;gap: 12px;}.nPilEm4 {display: flex;flex-direction: column;align-items: center;gap: 8px;padding: 28px 16px;text-align: center;color: var(--muted);}.nPilEm4.FpXpPs6 {display: none;}.oPilEm5 {margin: 0;font-size: 1rem;font-family: var(--font-display);color: var(--text);letter-spacing: -0.02em;}.pPilEm6 {margin: 0;max-width: 48ch;font-size: 0.9rem;line-height: 1.5;}.pPilEm6 strong {color: var(--text);}/* ----------------------------------------------------------PurgeCSS anchor — every `.generator-*` class must appear hereso PurgeCSS doesn't strip them from the bundled CSS.---------------------------------------------------------- */.EoWoOr5 {position: absolute;width: 0;height: 0;overflow: hidden;visibility: hidden;pointer-events: none;}/* ----------------------------------------------------------Gallery cards---------------------------------------------------------- */.GnPlQy1 {width: 100%;display: flex;flex-direction: column;gap: 10px;}.GnPlQy1:empty {display: none;}.HrZqRu2 {position: relative;display: flex;gap: 12px;padding: 10px 36px 10px 10px;border-radius: 14px;background: linear-gradient(180deg, rgba(17, 23, 40, 0.85), rgba(11, 16, 32, 0.85));border: 1px solid var(--line);transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;animation: generator-card-in 240ms ease;}.HrZqRu2:hover {border-color: var(--line-strong);transform: translateY(-1px);box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);}.IsArSv3 {flex: 0 0 72px;aspect-ratio: 1 / 1;border-radius: 10px;overflow: hidden;background: rgba(8, 12, 22, 0.85);border: 1px solid var(--line);position: relative;}.IsArSv3 img {width: 100%;height: 100%;object-fit: cover;display: block;animation: generator-fade-in 320ms ease;}.JtBsTw4 {flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 4px;padding-top: 0;}.KuCtUx5 {font-size: 0.85rem;font-weight: 800;color: var(--text);letter-spacing: -0.01em;line-height: 1.2;}.LvDuVy6 {display: flex;flex-wrap: wrap;gap: 4px;align-items: center;font-size: 0.74rem;color: var(--muted);}.LvDuVy6 span {background: rgba(8, 12, 22, 0.7);border: 1px solid var(--line);padding: 2px 8px;border-radius: 999px;color: rgba(180, 195, 230, 0.85);white-space: nowrap;letter-spacing: 0;}.MwEvWz7 {font-size: 0.78rem;color: var(--muted);line-height: 1.4;max-height: 2.8em;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}.NxFwXa8 {display: flex;gap: 6px;margin-top: auto;flex-wrap: wrap;align-items: center;justify-content: flex-start;}/* Compact size override for shared `.button` inside gallery actions.JS creates these as `<button class="button button-secondary generator-button-secondary">`so visuals come from shared, only size is tightened here. */.NxFwXa8 .ALjUwi8,.NxFwXa8 .ZTfcpi9 {min-height: 34px;padding: 0 18px;font-size: 0.82rem;font-weight: 700;flex: 0 0 auto;letter-spacing: 0;border-radius: 10px;gap: 8px;}/* Forcefully suppress shared `.button::before` icon inside the gallerycard action buttons since they carry their own inline <svg>. */.NxFwXa8 .ALjUwi8::before,.NxFwXa8 .ZTfcpi9::before {display: none !important;}.NxFwXa8 .ALjUwi8 svg,.NxFwXa8 .ZTfcpi9 svg {width: 14px;height: 14px;flex-shrink: 0;}.NxFwXa8 .ALjUwi8 span,.NxFwXa8 .ZTfcpi9 span {flex-shrink: 1;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.NxFwXa8 .ALjUwi8.vbwdEsp5l,.NxFwXa8 .ZTfcpi9.vbwdEsp5l,.NxFwXa8 .ALjUwi8:disabled,.NxFwXa8 .ZTfcpi9:disabled {opacity: 0.45;cursor: not-allowed;filter: grayscale(0.6);pointer-events: none;}.PzHyZc0 {position: absolute;top: 8px;right: 8px;width: 36px;height: 36px;border-radius: 50%;border: 1px solid var(--line);background: rgba(8, 12, 22, 0.78);color: #fff;cursor: pointer;font-size: 22px;line-height: 1;display: inline-flex;align-items: center;justify-content: center;transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;}.PzHyZc0:hover {background: rgba(220, 50, 90, 0.92);}/* ----------------------------------------------------------Skeleton placeholders while a card loads---------------------------------------------------------- *//* ----------------------------------------------------------Buttons — slim shared-button composition.JS-bound: dynamically created gallery buttons rely on theseclass names. Visual base comes from shared `.button` /`.OqDOJzf` / `.rpoLb08` in style.css.Anything markup-static ALSO carries the shared classes, sothis rule only covers base behaviors that don't conflict.---------------------------------------------------------- */.ALjUwi8,.ZTfcpi9 {transition: transform 180ms ease, filter 180ms ease, background-position 320ms ease;}.ALjUwi8:disabled,.ZTfcpi9:disabled {cursor: not-allowed;}/* ----------------------------------------------------------Info / fineprint section under the form---------------------------------------------------------- */.elfdRic {padding: 56px 0 0;}.DyPAfid {margin: 0 auto;max-width: 820px;color: var(--text);line-height: 1.72;text-align: center;font-size: 0.98rem;}.DyPAfid a {color: var(--blue);text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 1px;text-decoration-color: rgba(95, 134, 255, 0.55);transition: color 0.15s ease, text-decoration-color 0.15s ease;}.DyPAfid a:hover,.DyPAfid a:focus {color: var(--cyan);text-decoration-color: var(--cyan);}.urPrYie {margin: 16px auto 0;max-width: 820px;color: rgba(152, 166, 201, 0.85);line-height: 1.6;text-align: center;font-size: 0.84rem;}.urPrYie a {color: var(--muted-soft);text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 1px;text-decoration-color: rgba(220, 229, 255, 0.4);transition: color 0.15s ease, text-decoration-color 0.15s ease;}.urPrYie a:hover,.urPrYie a:focus {color: var(--text);text-decoration-color: var(--text);}/* ----------------------------------------------------------Animations---------------------------------------------------------- */@keyframes generator-spin {to { transform: rotate(360deg); }}@keyframes generator-pill-in {from { opacity: 0; transform: translateY(-12px); }to { opacity: 1; transform: none; }}@keyframes generator-shimmer {to { transform: translateX(100%); }}@keyframes generator-card-in {from { opacity: 0; transform: translateY(-4px); }to { opacity: 1; transform: none; }}@keyframes generator-fade-in {from { opacity: 0; }to { opacity: 1; }}/* ----------------------------------------------------------Responsive---------------------------------------------------------- */@media (max-width: 720px) {.bVMGXgk {padding: 40px 0 0;}.qFormAb1 {padding: 16px;border-radius: var(--radius-lg);gap: 14px;}.rModeBc2 {align-self: stretch;}.sModeCd3 {min-height: 36px;padding: 0 12px;font-size: 0.82rem;gap: 6px;}.cFrmRw3 {flex-direction: column;align-items: stretch;gap: 14px;}.UNgxKhe {grid-template-columns: repeat(5, minmax(0, 1fr));gap: 8px;}.SQuBnho {gap: 6px;}.ALjUwi8,.ZTfcpi9 {width: 100%;}.HrZqRu2 {flex-direction: row;}.IsArSv3 {flex: 0 0 60px;}.NxFwXa8 .ALjUwi8,.NxFwXa8 .ZTfcpi9 {flex: 1 1 100%;}.hPilBa8 {padding: 14px;}}@media (max-width: 420px) {.sModeCd3 {padding: 0 10px;font-size: 0.78rem;gap: 5px;}}