.hero h1{font-size:clamp(18px,4vw,30px);font-weight:700;letter-spacing:-0.5px;margin-bottom:12px;color:var(--text)}
.hero p{font-size:16px;color:var(--text-2);max-width:520px;margin:0 auto;line-height:1.5}
.page-wrap.no-sidebar{grid-template-columns:1fr;max-width:900px}
.main-col{min-width:0}
.step-block{position:relative;border-radius:var(--r-xl);margin-bottom:14px;background:#fff;border:1px solid #1e283c17;box-shadow:var(--sh-sm);transition:box-shadow 0.3s ease,border-color 0.3s ease,opacity 0.3s ease;padding:28px 28px 24px;overflow:visible}
.step-block.active{border-color:#7f77dd59;box-shadow:0 10px 40px rgba(15,20,40,0.14),0 2px 8px #0f142814,0 0 0 3px rgba(127,119,221,0.08)}
.step-block.active::after{content:"";position:absolute;left:0;top:18px;bottom:18px;width:5px;border-radius:0 var(--r-pill) var(--r-pill) 0;background:var(--grad-accent);box-shadow:0 0 14px #7f77dd59;pointer-events:none;z-index:0}
.step-block.done-block::after{content:"";position:absolute;left:0;top:18px;bottom:18px;width:5px;border-radius:0 var(--r-pill) var(--r-pill) 0;background:var(--grad-success);pointer-events:none}
[data-theme="dark"] .step-block.active::after{box-shadow:0 0 0 1px #ffffff14,0 0 18px #7f77dd4d}
.step-block.done{opacity:0.38;pointer-events:none;box-shadow:var(--sh-xs);border-color:var(--border)}
.step-header{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.step-label{display:inline-flex;align-items:center;gap:6px;background:var(--grad-accent);color:#fff;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:5px 13px;border-radius:var(--r-pill);flex-shrink:0;box-shadow:0 8px 24px #7f77dd59,inset 0 1px 0 #ffffff24;border:1px solid #ffffff1a;transition:background 0.2s}
.step-label.done{background:var(--grad-success);box-shadow:var(--sh-suc)}
.step-title{margin:0;font-size:clamp(17px,1.6vw,19px);font-weight:700;letter-spacing:-0.35px;color:#111318}
.ok-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center}
.ok-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:var(--r-md);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:background var(--transition),border var(--transition),box-shadow var(--transition),color var(--transition),transform var(--transition)}
.ok-btn.ready:hover{background:var(--accent);color:#fff;transform:translateY(-1px);box-shadow:var(--sh-acc),0 6px 20px rgba(127,119,221,0.2)}
.ok-btn.ghost{background:none;color:var(--text-2);border:1px solid var(--border-mid);box-shadow:none}
.copy-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:var(--r-md);font-size:13px;cursor:pointer;background:none;border:1px solid var(--border-mid);color:var(--text-2);transition:background var(--transition),border-color var(--transition),color var(--transition)}
:is(.ok-btn.ghost,.copy-btn):hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-mid)}
.img-btn{border:1px solid #1e283c17;background:#fff;border-radius:var(--r-lg);padding:14px 8px 12px;cursor:pointer;text-align:center;transition:background var(--transition),border-color var(--transition),box-shadow var(--transition),color var(--transition),transform var(--transition);box-shadow:var(--sh-xs)}
.ai-desc-box{font-size:13px;line-height:1.5;padding:12px 14px;border-radius:var(--r-md);border:1px solid #1e283c17;margin-bottom:14px;color:var(--text-2);background:#fff;min-height:52px;box-shadow:var(--sh-surface)}
.img-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
[data-theme="dark"] .img-btn{background:#ffffff14;border-color:#ffffff14}
.img-btn:hover{transform:translateY(-2px);border-color:var(--accent-mid);box-shadow:var(--sh-md);background:var(--accent-light)}
[data-theme="dark"] .img-btn:hover{background:var(--accent-soft);border-color:#7f77dd59}
.img-btn.active{background:var(--success-light);border-color:var(--success-mid);box-shadow:none}
.img-ico{font-size:20px;margin-bottom:7px;display:block}
.img-sub{font-size:11px;color:var(--text-3);margin-top:3px}
.img-prompt-box{width:100%;min-height:66px;padding:13px 15px;background:#fff;border:1px solid #1e283c17;border-radius:var(--r-md);font-size:14px;line-height:1.5;color:var(--text-2);box-shadow:var(--sh-surface)}
.img-extra{width:100%;border:1px solid var(--input-border);border-radius:var(--r-md);padding:11px 14px;font-size:13px;font-family:inherit;color:var(--text);background:var(--input-bg);outline:none;margin-top:9px;transition:border-color var(--transition),box-shadow var(--transition);box-shadow:var(--sh-xs)}
[data-theme="dark"] .img-prompt-box,[data-theme="dark"] .img-extra{background:var(--grad-dark-input)}
.img-extra:focus{border-color:var(--success-mid);box-shadow:var(--sh-xs),0 0 0 4px rgba(29,158,117,0.10)}
.img-extra:focus-visible{border-color:var(--success-mid);box-shadow:var(--sh-xs),0 0 0 4px rgba(29,158,117,0.10)}
.img-ai-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.imai-btn{border:1px solid #1e283c17;background:#fff;border-radius:var(--r-pill);padding:7px 14px;font-size:13px;cursor:pointer;color:var(--text-2);transition:background var(--transition),border-color var(--transition),box-shadow var(--transition),color var(--transition);font-weight:500;box-shadow:var(--sh-xs)}
.imai-btn:hover{background:var(--surface-2);border-color:var(--border-mid)}
.imai-btn.sel{background:var(--success-light);border-color:var(--success-mid);color:var(--success-dark);box-shadow:none}
.imai-btn.sel .imai-desc{color:var(--success-dark);opacity:0.78}
[data-theme="dark"] .imai-btn{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.14);color:var(--text-2)}
[data-theme="dark"] .imai-btn:hover{background:rgba(127,119,221,0.18);border-color:rgba(127,119,221,0.45)}
[data-theme="dark"] .imai-btn.sel{background:rgba(159,225,203,0.16);border-color:rgba(159,225,203,0.45);color:var(--success-dark)}
[data-theme="dark"] .imai-btn.sel .imai-desc{color:var(--success-dark);opacity:0.86}
.img-send-btn{display:inline-flex;align-items:center;gap:7px;padding:11px 24px;border-radius:var(--r-md);font-size:13px;font-weight:700;cursor:pointer;border:1px solid #ffffff1a;background:var(--grad-success);color:#fff;box-shadow:var(--sh-suc);transition:background var(--transition),transform var(--transition)}
.img-send-btn:hover{background:var(--grad-success-hover);transform:translateY(-1px)}
.faq-item[open] .faq-arrow,.lang-picker[aria-expanded="true"] .lang-picker-caret{transform:rotate(180deg)}
.lang-option:first-child{border-radius:var(--r-lg) var(--r-lg) 0 0}
.lang-option:last-child{border-radius:0 0 var(--r-lg) var(--r-lg)}
.img-btn.active .img-lbl{color:var(--success-dark)}
.img-btn.active .img-sub{color:var(--success)}
.nav-link.active,.faq-q:hover,.footer-links a:hover{color:var(--accent)}
.img-lbl{font-size:12px;font-weight:600;color:var(--text)}
.img-extra::placeholder{color:var(--text-4)}
[data-theme="dark"] .step-block{background:var(--grad-dark-panel);border-color:#ffffff14;box-shadow:0 4px 20px #00000059,0 1px 4px rgba(0,0,0,0.25)}
[data-theme="dark"] .step-block.active{border-color:#7f77dd59;box-shadow:0 10px 40px rgba(0,0,0,0.45),0 0 0 1px #7f77dd33}
[data-theme="dark"] .step-block.done-block{opacity:0.45}
[data-theme="dark"] .ok-btn.disabled{background:#ffffff14;border-color:#ffffff14;color:var(--text-3);border:1px solid #ffffff1a}
[data-theme="dark"] .ok-btn.ready:hover{background:var(--grad-accent-hover);box-shadow:0 10px 28px rgba(127,119,221,0.40);color:#fff;transform:translateY(-1px)}
[data-theme="dark"] .ok-btn.ghost{background:#ffffff14;color:var(--text-2);border:1px solid #ffffff24;box-shadow:0 6px 18px rgba(0,0,0,0.25)}
[data-theme="dark"] .copy-btn{background:#ffffff14;border-color:#ffffff24;box-shadow:var(--sh-sm);color:var(--text-2)}
[data-theme="dark"] :is(.ok-btn.ghost,.copy-btn):hover{background:#7f77dd1f;color:#b8b4f0;border-color:#7f77dd66}
[data-theme="dark"] .nav-link,[data-theme="dark"] .footer-links a{color:var(--text-3)}
[data-theme="dark"] .ai-desc-box{background:#0d1320cc;border-color:#ffffff14;color:var(--text-2)}
[data-theme="dark"] .nav-link.active,[data-theme="dark"] .footer-links a:hover{color:var(--accent-hover)}
.theme-toggle-btn:hover,[data-theme="dark"] .theme-toggle-btn:hover{background:var(--accent-soft);border-color:var(--accent-mid)}
.lang-picker-panel.open{display:block}
[data-theme="dark"] .img-preview-box{background:#0d1320b2;border-color:#ffffff1a}
.hero-glow,[data-theme="dark"] .step-block.locked::before,.faq-q::-webkit-details-marker{display:none}
[data-theme="dark"] .hero h1{color:var(--text)}
.img-preview-box{margin-top:12px;padding:12px 14px;border:1px solid var(--border-mid);border-radius:var(--r-md);background:var(--surface-2);font-size:13px;line-height:1.7;color:var(--text-2);white-space:pre-wrap;min-height:220px}
.step-block.locked [id$="b"]{opacity:0.72}

.step-block.locked{opacity:0.82;pointer-events:none;box-shadow:none;border-color:#1e283c17;background:#f8fafcf5}
.step-label.locked{background:#e2e8f0;color:#475569;box-shadow:none;border-color:transparent}
.footer-links a{color:var(--text-3);text-decoration:none;transition:color var(--transition)}
.ph{color:var(--text-3);font-style:italic;font-size:13px}
.ok-btn.disabled{background:#f1f5f9;color:#64748b;cursor:not-allowed;border:1px solid var(--border);box-shadow:none;border-color:#1e283c26}
.img-send-btn.dis{background:#f1f5f9;color:#64748b;cursor:not-allowed;box-shadow:none;border-color:#1e283c26}
[data-theme="dark"] .step-block.locked{background:#141928d1;border-color:#ffffff1a;box-shadow:none;opacity:0.86}
[data-theme="dark"] .step-label.locked{background:#ffffff24;color:#e2e8f0}
.hero{text-align:center;padding:34px 20px 24px;background:transparent;position:relative;z-index:1}
.ok-btn.ready{background:var(--accent-light);color:#fff !important;border:1px solid var(--accent-mid);box-shadow:var(--sh-acc)}
[data-theme="dark"] .ok-btn.ready{background:var(--grad-accent);color:#fff;border:1px solid #ffffff1a;box-shadow:0 6px 20px #7f77dd4d}
[data-theme="dark"] .faq-q:hover{color:var(--accent-hover)}
[data-theme="dark"] :is(.faq-section,.faq-list){background:var(--surface);border-color:#ffffff1a;color:var(--text-2)}
.step-block.locked .ok-btn:is(.ready,.disabled){background:#f1f5f9;color:#7c8797;border:1px solid #1e283c17;box-shadow:none;transform:none}
[data-theme="dark"] .step-block.locked .ok-btn:is(.ready,.disabled){background:#ffffff14;color:var(--text-4);border-color:#ffffff14;box-shadow:none}
.step-block:not(.locked) .ok-btn.ready{background:var(--grad-accent);color:#fff;border:1px solid #7f77dd99;box-shadow:0 8px 24px rgba(127,119,221,0.25),inset 0 1px 0 #ffffff24}
.step-block:not(.locked) .ok-btn.ready:hover{background:var(--grad-accent-hover);color:#fff}
.hero>*,footer,main{position:relative;z-index:1}
.imai-desc{font-size:11px;opacity:0.7;margin-left:3px}
[hidden]{display:none!important}
.img-prompt-editor{min-height:140px}
.u-mt-14{margin-top:14px}

/* Header nav: semantic details dropdown, no hover JS/state machine */
@media (min-width:769px){.nav-logo a{gap:6px}
.nav{padding:0 20px}
}
@media (max-width:1120px){.nav{grid-template-columns:minmax(0,1fr) auto;column-gap:10px}
.nav-menu{display:none}
.nav-right{grid-column:2;justify-self:end}
.theme-toggle-btn{order:1}
.lang-picker{order:2}
.hamburger{display:flex;order:3}
body.pe-mobile-menu-open .mobile-menu{position:fixed;top:var(--pe-nav-height,62px);left:0;right:0;max-height:calc(100vh - var(--pe-nav-height,62px));overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:var(--pe-z-mobile-menu)}
}
@media (max-width:1024px){.nav-menu .nav-link.sub-nav-link{display:none}
}
@media (max-width:960px){.page-wrap{grid-template-columns:1fr}
}
@media (max-width:768px){.theme-toggle-btn{min-width:38px;padding:0 8px}
.lang-picker-btn{padding:6px 8px}
.nav-logo svg{width:28px;height:28px}
.logo-name{font-size:14px}
.nav{padding:0 14px;gap:10px;padding-left:10px}
.nav-logo a{gap:3px}
}
@media (max-width:640px){.nav-menu{display:none}
.hamburger{display:flex}
.hero{padding-top:24px}
.hero h1{white-space:normal;padding:0 16px}
.step-block{padding:20px 18px 18px}
.page-wrap{padding:16px 16px 40px}
.img-grid{grid-template-columns:repeat(2,1fr)}
.theme-toggle-btn{min-width:38px;padding:0 8px;font-size:11px}
}
@media (max-width:480px){.lang-picker-btn .lang-current-name{display:none}
.lang-picker-btn{min-width:42px;justify-content:center}
}
.pe-step-body-disabled{pointer-events:none;opacity:.5}
.pe-step-body-active{pointer-events:auto;opacity:1}
.pe-step-body-done{pointer-events:none;opacity:.4}

/* Content additions for AI image page: static, no-runtime educational sections. */
.image-content-card{background:#fff;border:1px solid #1e283c17;border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-surface);margin-bottom:22px}.section-kicker{margin:0 0 8px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}.image-content-card h2{margin-top:0}.image-content-card h3{margin:22px 0 8px;font-size:18px;color:var(--text)}.image-content-card p{color:var(--text-2);line-height:1.75;margin:0 0 14px}.how-steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.how-step-card{border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;background:var(--surface-2)}.how-step-card strong{display:block;color:var(--text);margin-bottom:8px}.how-step-card p{font-size:14px;line-height:1.65;margin:0}.content-list{margin:10px 0 0;padding-left:20px;color:var(--text-2);line-height:1.7}.content-list li+li{margin-top:8px}.prompt-layers-grid{margin:14px 0 22px}.prompt-layer-card strong{font-size:16px}.faq-country-list a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}[data-theme="dark"] .image-content-card{background:var(--surface);border-color:#ffffff1a}[data-theme="dark"] .how-step-card{background:var(--surface-2);border-color:#ffffff14}@media(max-width:820px){.how-steps-grid{grid-template-columns:1fr}.image-content-card{padding:20px}}

/* Hero/share alignment with the main generator page. Keep static; no extra runtime cost. */
.accent{color:var(--accent)}
.hero h1{font-size:clamp(28px,5vw,44px);letter-spacing:-.8px;margin-bottom:10px}
.hero-subtitle{max-width:720px;margin:0 auto 10px;color:var(--text);font-size:clamp(18px,3vw,26px);line-height:1.18;font-weight:700;letter-spacing:-.45px}
.hero-intro{max-width:720px;margin:12px auto 0;color:var(--text-2);font-size:16px;line-height:1.65}.how-title,.hero .how-title{max-width:340px;margin:24px auto 8px;font-size:19px;font-weight:700;color:var(--text);text-align:left}.hero-steps{list-style:none;margin:16px auto 0;max-width:340px;display:flex;flex-direction:column;gap:6px;padding:0;counter-reset:step}.hero-steps li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.5}.hero-steps li::before{content:counter(step);counter-increment:step;min-width:22px;height:22px;border-radius:999px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--accent-light);color:var(--accent)}.hero-divider{width:min(720px,calc(100% - 48px));height:1px;margin:16px auto 24px;background:var(--grad-divider);border:0}.hero-share{min-height:56px;max-width:980px;margin:13px auto 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.hero-share-label{display:block;min-height:18px;line-height:18px;font-size:12px;font-weight:600;color:var(--text-3)}.share-btns{min-height:40px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;width:100%}.share-btn{box-sizing:border-box;min-width:90px;height:30px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 13px;border-radius:999px;line-height:1;font-size:12px;font-weight:500;white-space:nowrap;border:0;color:#fff;cursor:pointer}.share-btn svg{width:14px;height:14px;flex:0 0 14px}.share-x{background:#111;color:#fff;border:1px solid #ffffff14}.share-em,.share-bm{background:#fff;color:#111318;border:1px solid #1e283c26;box-shadow:var(--sh-xs)}.share-em:hover,.share-bm:hover{background:#fff;color:#111318;border-color:#1e283c26}@media(min-width:769px){.share-btns{min-height:30px;flex-wrap:nowrap;gap:10px}.share-btn{width:118px;min-width:118px;max-width:118px;flex:0 0 118px;height:30px}}@media(max-width:1024px){.share-btns{min-height:40px;flex-wrap:nowrap;gap:12px}.share-btn{width:40px;min-width:40px;max-width:40px;height:40px;padding:0;flex:0 0 40px}.share-btn .share-label{display:none}.share-btn svg{width:16px;height:16px}}@media(max-width:640px){.hero h1{font-size:clamp(22px,6vw,32px);line-height:1.08;letter-spacing:-.6px;margin-bottom:14px}.hero-intro{margin-top:14px}}[data-theme="dark"] .hero-divider{background:var(--grad-divider-dark)}[data-theme="dark"] .share-em{background:#ffffff14;color:var(--text-2);border-color:#ffffff1a}[data-theme="dark"] .share-bm{background:#fff;color:#111318;border-color:#1e283c26}[data-theme="dark"] [data-theme="dark"] .share-x{background:var(--grad-dark-panel);color:var(--text-2);border-color:#000;border:1px solid var(--border-strong);box-shadow:var(--sh-sm)}[data-theme="dark"] .share-x:hover{background:var(--grad-dark-panel);color:var(--text)}

.section-kicker{font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}

/* Branding of CookieBot */