.ai-generator-page { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.ai-generator-page > footer { margin-top:auto; flex-shrink:0; }
.ai-page { flex:1 0 auto; width:min(1240px,100%); margin:0 auto; padding:48px 24px 64px; color:var(--ap-text); }
.ai-page * { box-sizing:border-box; }
.ai-intro { text-align:center; max-width:760px; margin:0 auto 32px; }
.ai-eyebrow { color:var(--ap-accent); font-size:11px; letter-spacing:.16em; font-weight:700; margin:0 0 12px; }
.ai-intro h1 { font-size:clamp(30px,4vw,48px); line-height:1.15; font-weight:750; letter-spacing:-.035em; margin:0 0 16px; }
.ai-intro h1 span { color:var(--ap-accent); }
.ai-intro > p:not(.ai-eyebrow) { color:var(--ap-muted); font-size:16px; line-height:1.7; }
.ai-allowance { display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:7px; margin-top:18px; font-size:12px; color:var(--ap-muted); }
.ai-allowance strong { color:var(--ap-text); font-weight:600; }
.ai-status-dot { width:6px; height:6px; background:var(--ap-accent); border-radius:50%; }
.ai-workspace { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr); border:1px solid var(--ap-border); border-radius:20px; background:var(--ap-panel); overflow:hidden; }
.ai-prompt-panel,.ai-preview-panel { padding:28px; min-width:0; }
.ai-prompt-panel { border-right:1px solid var(--ap-border); }
.ai-panel-heading { display:flex; align-items:center; gap:9px; margin-bottom:20px; }
.ai-panel-heading h2 { font-size:15px; font-weight:650; margin:0; }
.ai-step { font-size:10px; color:var(--ap-muted); border:1px solid var(--ap-border); border-radius:6px; padding:3px 5px; }
#ai-canvas-label { margin-left:auto; font-size:11px; color:var(--ap-muted); }
.ai-page textarea,.ai-page select { width:100%; border:1px solid var(--ap-border); background:var(--ap-bg); color:var(--ap-text); border-radius:10px; padding:12px; font:inherit; font-size:13px; }
.ai-page textarea { min-height:150px; resize:vertical; line-height:1.7; }
.ai-page textarea::placeholder { color:var(--ap-muted); opacity:.8; }
.ai-page :is(button,a,summary,textarea,select):focus-visible { outline:2px solid var(--ap-accent); outline-offset:4px; }
.ai-prompt-meta { display:flex; justify-content:space-between; gap:8px; margin-top:8px; font-size:10px; color:var(--ap-muted); }
.ai-prompt-examples { display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 24px; }
.ai-prompt-examples button { padding:6px 10px; background:transparent; color:var(--ap-muted); border:1px solid var(--ap-border); border-radius:20px; font-size:11px; cursor:pointer; }
.ai-prompt-examples button:hover { color:var(--ap-text); border-color:var(--ap-accent); }
.ai-settings { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ai-settings label { display:block; font-size:12px; font-weight:600; margin-bottom:8px; }
.ai-settings select { height:43px; padding:8px; font-size:12px; }
.ai-page select:disabled { opacity:.6; }
.ai-small { font-size:11px; color:var(--ap-muted); line-height:1.7; margin:12px 0; }
.ai-primary { width:100%; display:flex; justify-content:center; align-items:center; gap:9px; margin-top:22px; padding:14px 18px; border:0; border-radius:10px; background:var(--ap-accent); color:var(--ap-on-accent); font-weight:700; font-size:14px; cursor:pointer; transition:filter .2s,transform .2s; }
.ai-primary:hover:not(:disabled) { filter:brightness(1.06); transform:translateY(-1px); }
.ai-page button:disabled { cursor:not-allowed; opacity:.48; }
.ai-quota-note { font-size:10px; margin-bottom:0; }
.ai-feedback { margin:16px 0 0; padding:10px 12px; border:1px solid #ef444466; border-radius:8px; background:#ef444410; color:var(--ap-text); font-size:12px; line-height:1.6; }
.ai-canvas { position:relative; display:grid; place-items:center; aspect-ratio:1.2; width:100%; min-height:260px; max-height:460px; border:1px dashed var(--ap-border); border-radius:12px; overflow:hidden; background:var(--ap-bg); }
.ai-empty { text-align:center; padding:24px; max-width:280px; }
.ai-empty-icon { width:58px; height:58px; border:1px solid var(--ap-border); display:grid; place-items:center; border-radius:16px; margin:0 auto 20px; font-size:24px; color:var(--ap-muted); }
.ai-empty h3 { font-size:14px; font-weight:600; line-height:1.5; margin:0 0 8px; }
.ai-empty p { font-size:12px; color:var(--ap-muted); line-height:1.6; }
#ai-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; animation:ai-reveal .5s ease-out; }
.ai-loading { position:absolute; inset:0; display:grid; place-items:center; background:var(--ap-bg); z-index:1; }
.ai-loading-copy { position:relative; display:flex; align-items:center; flex-direction:column; gap:12px; padding:24px; text-align:center; }
.ai-loading-copy strong { font-size:16px; }
.ai-loading-copy p { font-size:12px; line-height:1.6; color:var(--ap-muted); max-width:270px; margin:0; }
#ai-elapsed { font-size:11px; color:var(--ap-muted); font-variant-numeric:tabular-nums; }
.ai-loader-ring { width:32px; height:32px; border:2px solid var(--ap-border); border-top-color:var(--ap-accent); border-radius:50%; animation:ai-orbit 1.1s linear infinite; }
.ai-dream { position:absolute; inset:0; overflow:hidden; opacity:.25; }
.ai-dream span { position:absolute; width:45%; aspect-ratio:1; border-radius:50%; filter:blur(45px); background:var(--ap-accent); left:0; top:5%; animation:ai-drift 8s ease-in-out infinite alternate; }
.ai-dream span:nth-child(2) { left:50%; top:45%; background:#4c9edb; animation-delay:-3s; }
.ai-dream span:nth-child(3) { left:30%; top:65%; background:#8b5cf6; animation-delay:-6s; }
.ai-result-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:16px; }
.ai-result-bar p { font-size:11px; color:var(--ap-muted); margin:0; }
.ai-result-bar > div { display:flex; gap:8px; }
.ai-secondary,.ai-icon-button { background:transparent; border:1px solid var(--ap-border); border-radius:8px; color:var(--ap-text); font-size:11px; cursor:pointer; padding:9px 12px; display:inline-flex; gap:7px; align-items:center; }
.ai-text-button { background:transparent; border:0; color:var(--ap-text); text-decoration:underline; text-underline-offset:4px; font-size:11px; cursor:pointer; padding:8px 0; }
.ai-how { display:grid; grid-template-columns:1fr 1.7fr; gap:48px; padding:48px 0; border-bottom:1px solid var(--ap-border); }
.ai-how h2,.ai-faq h2 { font-size:clamp(21px,2.5vw,27px); font-weight:650; letter-spacing:-.02em; line-height:1.3; margin:0 0 12px; }
.ai-how p:not(.ai-eyebrow) { font-size:13px; color:var(--ap-muted); line-height:1.8; margin:0; }
.ai-how ol { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; list-style:none; padding:0; margin:0; }
.ai-how strong { display:block; font-size:13px; margin-bottom:10px; }
.ai-how li span { font-size:12px; color:var(--ap-muted); line-height:1.8; }
.ai-faq { max-width:860px; margin:48px auto 0; }
.ai-faq > h2 { margin-bottom:24px; }
.ai-faq details { border-bottom:1px solid var(--ap-border); }
.ai-faq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; font-size:14px; font-weight:600; cursor:pointer; list-style:none; }
.ai-faq summary::-webkit-details-marker { display:none; }
.ai-faq summary span { display:grid; place-items:center; flex:0 0 20px; width:20px; height:20px; line-height:1; color:var(--ap-muted); font-size:20px; font-weight:400; transition:transform .2s; }
.ai-faq details[open] summary span { transform:rotate(45deg); }
.ai-faq details p { margin:0; padding-bottom:20px; font-size:13px; line-height:1.8; color:var(--ap-muted); }
.ai-related { font-size:12px; line-height:1.8; color:var(--ap-muted); margin:24px 0 0; }
.ai-related a { color:var(--ap-text); text-decoration:underline; text-underline-offset:3px; }
.ai-page [hidden] { display:none!important; }
.ai-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes ai-orbit { to { transform:rotate(360deg); } }
@keyframes ai-drift { to { transform:translate(40%,-20%) scale(1.35); } }
@keyframes ai-reveal { from { opacity:0; transform:scale(.98); } to { opacity:1; transform:scale(1); } }
@media(max-width:800px) { .ai-page { padding:32px 16px 48px; } .ai-workspace { grid-template-columns:1fr; } .ai-prompt-panel { border-right:0; border-bottom:1px solid var(--ap-border); } .ai-prompt-panel,.ai-preview-panel { padding:22px; } .ai-how { grid-template-columns:1fr; gap:24px; padding:36px 0; } .ai-canvas { max-height:none; } }
@media(max-width:480px) { .ai-settings { grid-template-columns:1fr; } .ai-how ol { grid-template-columns:1fr; gap:20px; } .ai-canvas { aspect-ratio:1; min-height:240px; } .ai-panel-heading { flex-wrap:wrap; } #ai-canvas-label { font-size:10px; } .ai-result-bar { align-items:flex-start; } .ai-intro > p:not(.ai-eyebrow) { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { .ai-page * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }