/* ============================================================Generator page — only generator-specific styles.Header / footer / body / button / panel / hero typography /container all come from shared XwMUx8kv.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---------------------------------------------------------- */.UQimH8nr {padding-bottom: 80px;}.ppfZT8ns {padding: 64px 0 0;}.uuxzK8nt {display: grid;gap: 28px;max-width: 880px;margin: 0 auto;}.ZzpPM8nu {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 6px;padding: 0 0 6px;}.ZzpPM8nu .cYZqq8m6 {margin: 0 0 12px;}.ZzpPM8nu h1 {margin: 0;font-family: var(--font-display);font-size: clamp(2rem, 3.6vw, 2.8rem);letter-spacing: -0.04em;line-height: 1.02;}.GDELg8nv {max-width: 60ch;margin: 14px auto 0;color: var(--muted);line-height: 1.65;font-size: 0.98rem;}/* ----------------------------------------------------------Form shell — visuals come from shared `.zYEhS8n0`,this only contributes inner layout direction/gap.---------------------------------------------------------- */.jExwl8nw {display: flex;flex-direction: column;gap: 18px;padding: 22px;border-radius: var(--radius-xl);min-width: 0;}.SrZzG8o2 {display: flex;flex-direction: column;gap: 18px;}.SrZzG8o2.VGvnN8q6 {display: none;}.SrZzG8o2[data-pane="form"] {gap: 18px;}.SrZzG8o2[data-pane="gallery"] {gap: 0;}/* ----------------------------------------------------------Mode tab bar (Generate / Edit image / My Images)---------------------------------------------------------- */.xzyZw8nx {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;}.xzyZw8nx::-webkit-scrollbar {display: none;}.lgyQZ8ny {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;}.lgyQZ8ny[data-mode="gallery"] {margin-left: auto;}.lgyQZ8ny svg {width: 16px;height: 16px;flex: 0 0 16px;}.lgyQZ8ny .ihxPM8nz {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 1;}.lgyQZ8ny .kFGYi8o0 {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;}.lgyQZ8ny.HDyMn8q7 {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);}.lgyQZ8ny.HDyMn8q7 .kFGYi8o0 {background: rgba(8, 12, 20, 0.32);color: #fff;}.lgyQZ8ny:hover:not(.HDyMn8q7) {color: var(--text);background: rgba(255, 255, 255, 0.04);}/* ----------------------------------------------------------Busy / disabled states during generation---------------------------------------------------------- */.JohEu8q9 .xzyZw8nx,.JohEu8q9 .SrZzG8o2 > *:not(.XzSmP8pc),.JohEu8q9 .KKOPu8ph {opacity: 0.55;pointer-events: none;user-select: none;}.JohEu8q9 .rxzLl8pd {pointer-events: none;}/* ----------------------------------------------------------Upload widget (Edit image mode)---------------------------------------------------------- */.kXEsb8o3 {position: relative;display: flex;flex-direction: column;gap: 10px;}.kXEsb8o3.VGvnN8q6 {display: none;}.ILSyj8o4 {position: absolute;inset: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer;z-index: 2;}.JqveK8o6 {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;}.kXEsb8o3:hover .JqveK8o6 {border-color: var(--blue);transform: translateY(-1px);}.kXEsb8o3.eYiVc8qb .JqveK8o6 {border-color: var(--cyan);background: rgba(51, 214, 255, 0.08);}.JqveK8o6.VGvnN8q6 {display: none;}.JqveK8o6 svg {width: 28px;height: 28px;color: var(--cyan);}.JqveK8o6 strong {color: var(--text);font-size: 0.98rem;font-family: var(--font-display);letter-spacing: -0.02em;}.JqveK8o6 span {font-size: 0.82rem;}.NrsiS8o7 {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;}.NrsiS8o7:hover {border-color: var(--line-strong);}.NrsiS8o7.VGvnN8q6 {display: none;}.ggKcw8o8 {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);}.ggKcw8o8 img {width: 100%;height: 100%;object-fit: cover;display: block;}.VGPeC8oa {flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 2px;}.jMeqD8ob {font-size: 0.9rem;color: var(--text);font-weight: 700;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 100%;}.fhrVS8od {font-size: 0.76rem;color: var(--muted);}.jQLfc8of {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;}.jQLfc8of:hover {background: rgba(220, 50, 90, 0.92);}/* ----------------------------------------------------------Prompt textarea + Enhance button---------------------------------------------------------- */.vnvUK8oh {position: relative;display: flex;flex-direction: column;}.tKEDm8oi {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;}.tKEDm8oi::placeholder {color: rgba(152, 166, 201, 0.7);}.tKEDm8oi:focus {outline: none;border-color: rgba(95, 134, 255, 0.6);box-shadow: 0 0 0 3px rgba(95, 134, 255, 0.18);}.uYlpy8ok {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;}.uYlpy8ok svg {width: 16px;height: 16px;}.uYlpy8ok:hover:not(:disabled) {color: var(--text);border-color: var(--line-strong);transform: translateY(-1px);}.uYlpy8ok:disabled {opacity: 0.45;cursor: not-allowed;}/* ----------------------------------------------------------Form rows (Model / Quality)---------------------------------------------------------- */.wNAqF8om {display: flex;flex-wrap: wrap;gap: 16px;align-items: flex-end;}.vbNZF8on {display: flex;flex-direction: column;gap: 8px;min-width: 0;}.AlZcn8oo {font-size: 0.78rem;font-weight: 800;color: var(--muted);letter-spacing: 0.06em;text-transform: uppercase;}.UeUDF8ov {display: flex;flex-direction: column;gap: 10px;}/* ----------------------------------------------------------Segmented control (Model / Quality)---------------------------------------------------------- */.nNbpJ8op {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;}.bmPNr8or {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;}.bmPNr8or.MOrwg8os {opacity: 0.55;cursor: not-allowed;color: var(--muted);}.bmPNr8or .rxZRE8ot {width: 14px;height: 14px;flex: 0 0 14px;}.bmPNr8or.HDyMn8q7 {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);}.bmPNr8or:hover:not(.MOrwg8os):not(.HDyMn8q7) {color: var(--text);background: rgba(255, 255, 255, 0.04);}/* ----------------------------------------------------------Checkbox (compact toggle)---------------------------------------------------------- *//* ----------------------------------------------------------Style picker (uniform Select pills)---------------------------------------------------------- */.NqYXv8ow {display: grid;grid-template-columns: repeat(9, minmax(0, 1fr));gap: 8px;}.GFvxp8ox {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;}.HFsOp8oy {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;}.GFvxp8ox:hover .HFsOp8oy {border-style: solid;border-color: var(--line-strong);color: var(--text);background: rgba(51, 214, 255, 0.04);}.GFvxp8ox.HDyMn8q7 .HFsOp8oy {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);}.PNiRz8oz {color: var(--muted);max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.GFvxp8ox.HDyMn8q7 .PNiRz8oz {color: var(--text);}/* ----------------------------------------------------------Shape picker (aspect ratio)---------------------------------------------------------- */.mBnxz8p0 {display: grid;grid-template-columns: repeat(auto-fit, minmax(0, 1fr));gap: 8px;align-items: stretch;}.XFECZ8p1 {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;}.XFECZ8p1:hover {border-color: var(--line-strong);transform: translateY(-1px);}.XFECZ8p1.HDyMn8q7 {border-color: var(--cyan);background: rgba(51, 214, 255, 0.08);box-shadow: 0 0 0 1px rgba(51, 214, 255, 0.25);}.iwyVo8p4 {display: block;background: rgba(95, 134, 255, 0.32);border-radius: 5px;}.XFECZ8p1.HDyMn8q7 .iwyVo8p4 {background: var(--cyan);}.CBdYn8p6 {font-size: 0.7rem;font-weight: 700;color: var(--muted);line-height: 1;}.XFECZ8p1.HDyMn8q7 .CBdYn8p6 {color: var(--text);}.XFECZ8p1.HDyMn8q7 .OTfvI8p5 {border-color: var(--cyan);}.UkjFh8p7 {width: 40px;height: 23px;}.sgbyy8p8 {width: 32px;height: 24px;}.iHheM8p9 {width: 26px;height: 26px;}.zheqL8pa {width: 21px;height: 28px;}.JAisY8pb {width: 16px;height: 28px;}.OTfvI8p5 {width: 28px;height: 22px;border: 1px dashed currentColor;background: transparent;opacity: 0.85;}/* ----------------------------------------------------------Generate CTA — size override on top of shared `.button`/`.HkeZB8m9`---------------------------------------------------------- */.XzSmP8pc {display: flex;flex-direction: column;margin-top: 4px;}.rxzLl8pd {width: 100%;min-height: 56px;padding: 0 26px;font-size: 1rem;font-weight: 800;letter-spacing: 0.01em;}.rxzLl8pd:disabled {opacity: 0.55;cursor: not-allowed;filter: grayscale(0.4);box-shadow: none;transform: none;}.rxzLl8pd:not(:disabled):hover {transform: translateY(-1px);}.malEz8pg {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;}.rxzLl8pd.GJStA8qa .malEz8pg {display: inline-block;}.rxzLl8pd.GJStA8qa .SuHpL8pf {opacity: 0.8;}/* ----------------------------------------------------------"My Images" pill (gallery container inside form)---------------------------------------------------------- */.KKOPu8ph {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;}.KKOPu8ph.VGvnN8q6 {display: none;}.ijwdV8pi {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding-bottom: 12px;border-bottom: 1px solid var(--line);}.LUJDP8pj {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;}.LUJDP8pj svg {width: 18px;height: 18px;color: var(--cyan);flex: 0 0 18px;}.qZrob8pk {display: flex;flex-direction: column;gap: 12px;}.puuvl8py {display: flex;flex-direction: column;align-items: center;gap: 8px;padding: 28px 16px;text-align: center;color: var(--muted);}.puuvl8py.VGvnN8q6 {display: none;}.UHJQP8pz {margin: 0;font-size: 1rem;font-family: var(--font-display);color: var(--text);letter-spacing: -0.02em;}.xPVVx8q0 {margin: 0;max-width: 48ch;font-size: 0.9rem;line-height: 1.5;}.xPVVx8q0 strong {color: var(--text);}/* ----------------------------------------------------------PurgeCSS anchor — every `.generator-*` class must appear hereso PurgeCSS doesn't strip them from the bundled CSS.---------------------------------------------------------- */.mLhie8q4 {position: absolute;width: 0;height: 0;overflow: hidden;visibility: hidden;pointer-events: none;}/* ----------------------------------------------------------Gallery cards---------------------------------------------------------- */.XXjYH8pl {width: 100%;display: flex;flex-direction: column;gap: 10px;}.XXjYH8pl:empty {display: none;}.fMgJf8pn {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;}.fMgJf8pn:hover {border-color: var(--line-strong);transform: translateY(-1px);box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);}.OdetU8pp {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;}.OdetU8pp img {width: 100%;height: 100%;object-fit: cover;display: block;animation: generator-fade-in 320ms ease;}.uuLjq8pq {flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 4px;padding-top: 0;}.gvRTS8pr {font-size: 0.85rem;font-weight: 800;color: var(--text);letter-spacing: -0.01em;line-height: 1.2;}.kuuHg8q5 {display: flex;flex-wrap: wrap;gap: 4px;align-items: center;font-size: 0.74rem;color: var(--muted);}.kuuHg8q5 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;}.OClSe8ps {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;}.kzLVb8pt {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. */.kzLVb8pt .YpIup8pw,.kzLVb8pt .ColXU8pu {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>. */.kzLVb8pt .YpIup8pw::before,.kzLVb8pt .ColXU8pu::before {display: none !important;}.kzLVb8pt .YpIup8pw svg,.kzLVb8pt .ColXU8pu svg {width: 14px;height: 14px;flex-shrink: 0;}.kzLVb8pt .YpIup8pw span,.kzLVb8pt .ColXU8pu span {flex-shrink: 1;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.kzLVb8pt .YpIup8pw.tawrN8q8,.kzLVb8pt .ColXU8pu.tawrN8q8,.kzLVb8pt .YpIup8pw:disabled,.kzLVb8pt .ColXU8pu:disabled {opacity: 0.45;cursor: not-allowed;filter: grayscale(0.6);pointer-events: none;}.CSotQ8po {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;}.CSotQ8po: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` /`.HkeZB8m9` / `.EMhhr8my` in style.css.Anything markup-static ALSO carries the shared classes, sothis rule only covers base behaviors that don't conflict.---------------------------------------------------------- */.YpIup8pw,.ColXU8pu {transition: transform 180ms ease, filter 180ms ease, background-position 320ms ease;}.YpIup8pw:disabled,.ColXU8pu:disabled {cursor: not-allowed;}/* ----------------------------------------------------------Info / fineprint section under the form---------------------------------------------------------- */.ZvgJy8q1 {padding: 56px 0 0;}.RkwIy8q2 {margin: 0 auto;max-width: 820px;color: var(--text);line-height: 1.72;text-align: center;font-size: 0.98rem;}.RkwIy8q2 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;}.RkwIy8q2 a:hover,.RkwIy8q2 a:focus {color: var(--cyan);text-decoration-color: var(--cyan);}.ZLoRS8q3 {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;}.ZLoRS8q3 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;}.ZLoRS8q3 a:hover,.ZLoRS8q3 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) {.ppfZT8ns {padding: 40px 0 0;}.jExwl8nw {padding: 16px;border-radius: var(--radius-lg);gap: 14px;}.xzyZw8nx {align-self: stretch;}.lgyQZ8ny {min-height: 36px;padding: 0 12px;font-size: 0.82rem;gap: 6px;}.wNAqF8om {flex-direction: column;align-items: stretch;gap: 14px;}.NqYXv8ow {grid-template-columns: repeat(5, minmax(0, 1fr));gap: 8px;}.mBnxz8p0 {gap: 6px;}.YpIup8pw,.ColXU8pu {width: 100%;}.fMgJf8pn {flex-direction: row;}.OdetU8pp {flex: 0 0 60px;}.kzLVb8pt .YpIup8pw,.kzLVb8pt .ColXU8pu {flex: 1 1 100%;}.KKOPu8ph {padding: 14px;}}@media (max-width: 420px) {.lgyQZ8ny {padding: 0 10px;font-size: 0.78rem;gap: 5px;}}