.ig-form{max-width:768px;margin:16px 0}
.ig-label{display:flex;justify-content:space-between;font-weight:600;margin-bottom:6px}
.ig-form textarea{width:100%;box-sizing:border-box;font:inherit;padding:10px;border:1px solid #d0d5dd;border-radius:10px;resize:vertical}
.ig-ex{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.ig-ex button{font:inherit;font-size:13px;border:1px solid #d0d5dd;background:#f8f9fb;border-radius:999px;padding:5px 10px;cursor:pointer}
.ig-status{margin-left:10px;color:#555}
#ig-go[disabled]{opacity:.55;cursor:not-allowed}
.ig-out{max-width:768px;margin:16px 0}
.ig-out img{width:100%;height:auto;border-radius:12px;background:#f2f4f7;display:block}
.ig-note{font-size:13px;color:#667085;max-width:768px}
.ig-cta{max-width:768px;margin:20px 0;padding:14px;border-radius:12px;background:#f2f4ff}

html[data-theme=dark] .ig-form textarea{background:var(--card);color:var(--text);border-color:var(--line)}
html[data-theme=dark] .ig-ex button{background:var(--soft);color:var(--text);border-color:var(--line)}
html[data-theme=dark] .ig-status,html[data-theme=dark] .ig-note{color:var(--muted)}
html[data-theme=dark] .ig-out img{background:var(--soft)}
html[data-theme=dark] .ig-cta{background:var(--accent-soft)}

/* Full-page generator hero (generate.html only; scoped to .gen-hero) */
:root{--gen-art:url(assets/gen-art.webp?v=20261016b)}
.gen-hero{position:relative;margin:8px 0 24px;padding:14px;border-radius:20px;background:#1c1f5a}
.gen-inner{position:relative;padding:42px 24px;border-radius:14px;overflow:hidden;isolation:isolate;background:#EFEFFE var(--gen-art) center/cover no-repeat}
.gen-inner::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(239,239,254,.3)}
html[data-theme=dark] .gen-inner::before{background:rgba(37,38,77,.35)}
.gen-card{max-width:760px;margin:0 auto;padding:28px;border-radius:16px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.6);box-shadow:0 12px 40px rgba(30,27,90,.25)}
html[data-theme=dark] .gen-card{background:rgba(23,26,34,.62);border-color:rgba(147,147,255,.22);box-shadow:0 12px 40px rgba(0,0,0,.5)}
.gen-card h1{margin-top:0}
.gen-card .ig-form,.gen-card .ig-out{max-width:none;margin:14px 0 0}
.gen-card .ig-form textarea{background:rgba(255,255,255,.9);transition:border-color .2s,box-shadow .2s}
.gen-card .ig-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(91,91,247,.18),0 0 24px rgba(91,91,247,.25)}
html[data-theme=dark] .gen-card .ig-form textarea{background:rgba(14,16,21,.7)}
html[data-theme=dark] .gen-card .ig-form textarea:focus{box-shadow:0 0 0 4px rgba(147,147,255,.2),0 0 24px rgba(147,147,255,.3)}
.gen-card .ig-ex button{background:rgba(255,255,255,.8)}
html[data-theme=dark] .gen-card .ig-ex button{background:rgba(21,24,33,.75)}
.gen-card #ig-go{transition:transform .18s,box-shadow .18s}
.gen-card #ig-go:not([disabled]):hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(91,91,247,.35)}
@media(max-width:640px){.gen-hero{margin:8px 0 20px;padding:16px 10px;border-radius:16px}.gen-card{padding:18px;border-radius:14px}.gen-card h1{font-size:26px}}
.gen-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px;margin:0 auto 14px}
.gen-pills span{font-size:12.5px;font-weight:600;color:#86efac;border:1px solid #4ade80;background:rgba(6,40,22,.55);padding:3px 11px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ig-surprise{font-weight:500;font-size:13px;color:var(--accent)}
/* Light lavender result/preview panel (homepage compact + generate.html); hero frame #1c1f5a unchanged */
.ig-out{background:var(--accent-soft);border:1px solid rgba(91,91,247,.15);border-radius:14px;padding:10px}
.ig-out img{background:var(--accent-soft)}
html[data-theme=dark] .ig-out{border-color:rgba(147,147,255,.18)}
html[data-theme=dark] .ig-out img{background:var(--accent-soft)}
html[data-theme=dark] .gen-inner{background-color:#25264D}
@media(max-width:640px){.gen-hero{padding:8px}.gen-inner{padding:14px 8px;border-radius:12px}}
/* Homepage compact card: daily art inside the card, lavender overlay; border unchanged */
.homegen{background:linear-gradient(rgba(239,239,254,.5),rgba(239,239,254,.5)),#EFEFFE var(--gen-art) center/cover no-repeat}
html[data-theme=dark] .homegen{background:linear-gradient(rgba(37,38,77,.55),rgba(37,38,77,.55)),#25264D var(--gen-art) center/cover no-repeat}
html:not([data-theme=dark]) .homegen .hg-head a,html:not([data-theme=dark]) .homegen .ig-note{color:#2e2a6b;background:rgba(255,255,255,.72);padding:1px 8px;border-radius:999px;text-shadow:0 0 2px rgba(255,255,255,.6)}
html:not([data-theme=dark]) .homegen .ig-note{display:inline-block;max-width:100%;box-sizing:border-box}
/* Match homepage card: 1px accent frame, 12px radius, art panel with flat 50%/55% overlay, no fades */
.gen-hero{padding:0;background:none;border:1px solid var(--accent);border-radius:12px;overflow:hidden}
.gen-inner{border-radius:0;background:#EFEFFE var(--gen-art) center/cover no-repeat}
.gen-inner::before{background:rgba(239,239,254,.5)}
html[data-theme=dark] .gen-inner{background:#25264D var(--gen-art) center/cover no-repeat}
html[data-theme=dark] .gen-inner::before{background:rgba(37,38,77,.55)}
.gen-card h1{color:var(--accent)}
.gen-card .ig-ex button{background:#f8f9fb;border:1px solid #d0d5dd}
html[data-theme=dark] .gen-card .ig-ex button{background:var(--soft);border-color:var(--line)}
@media(max-width:640px){.gen-hero{padding:0;border-radius:12px}.gen-inner{padding:12px 10px;border-radius:0}}
/* generate.html uses the homepage .homegen card markup, centred and wider */
.homegen.gen-page{max-width:760px;margin:0 auto 20px;box-sizing:border-box}
.homegen.gen-page .ig-out img{max-width:420px}
/* generate.html: everything in one centred 760px column */
.gen-pg .crumb,.gen-pg .ig>*{max-width:760px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.gen-pg .crumb,.gen-pg .ig>h1,.gen-pg .ig>.lede,.gen-pg .ig>.ig-note,.gen-pg .ig-cta{text-align:center}
.gen-pg .homegen{text-align:left}
@media(max-width:640px){.gen-pg .ig>h1{font-size:26px;line-height:1.2}}