.ai-section { max-width: 1188px; margin: 0 auto 110px; border-radius: 28px; background: #dfe9ff; border: 1px solid #c4d1ed; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; }
.ai-copy { padding: 48px; }
.ai-copy h2 { font-size: 44px; margin: 16px 0 18px; }
.ai-copy > p { color: #58666b; font-size: 14px; line-height: 1.7; max-width: 540px; }
.ai-form { margin-top: 27px; }
.ai-form label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 9px; }
.ai-form textarea { width: 100%; min-height: 142px; resize: vertical; border: 1px solid #b6c5df; border-radius: 13px; background: rgba(255,255,255,.8); color: var(--ink); padding: 15px; font: 12px/1.65 "DM Sans", sans-serif; }
.ai-form textarea:focus { outline: 3px solid rgba(115,92,228,.3); border-color: #735ce4; }
.vibe-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
.vibe-picker button { border: 1px solid #b6c5df; background: rgba(255,255,255,.55); border-radius: 99px; padding: 8px 12px; font-size: 11px; cursor: pointer; }
.vibe-picker button.selected { background: var(--ink); color: white; border-color: var(--ink); }
.ai-submit { width: 100%; }
.privacy-note { display: flex; align-items: flex-start; gap: 7px; color: #4d5a63; font-size: 11px; line-height: 1.5; margin-top: 12px; }.privacy-note strong { color: inherit; }
.ai-preview { background: #1b2528; color: white; margin: 16px; border-radius: 20px; padding: 25px; position: relative; overflow: hidden; min-height: 540px; display: flex; flex-direction: column; }
.ai-preview::before { content: ""; position: absolute; width: 330px; height: 330px; border-radius: 50%; background: #7563da; filter: blur(100px); opacity: .26; top: 20px; left: 40px; }
.preview-header { position: relative; display: flex; justify-content: space-between; align-items: center; color: #b3c0c3; font-size: 9px; letter-spacing: 1.4px; }
.preview-header span:last-child { color: var(--lime); letter-spacing: 0; }
.director-orb { width: 170px; height: 170px; margin: 45px auto 33px; position: relative; display: grid; place-items: center; }
.director-orb::before, .director-orb::after { content: ""; position: absolute; inset: 0; border-radius: 45% 55% 60% 40%; background: linear-gradient(135deg, var(--lime), #8b75ef 55%, #f2a58e); animation: orbMorph 8s infinite alternate; }
.director-orb::after { inset: 13px; background: #202c2f; animation-direction: alternate-reverse; }
.director-orb span { position: relative; z-index: 2; font-size: 52px; }
.director-steps { position: relative; display: grid; gap: 12px; }
.director-steps div { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; color: #c1cdcf; font-size: 12px; }
.director-steps span { width: 25px; height: 25px; border: 1px solid #566569; border-radius: 50%; display: grid; place-items: center; color: var(--lime); font-size: 10px; }
.ai-dialog { width: min(850px, calc(100vw - 30px)); max-height: calc(100dvh - 30px); padding: 0; border: 0; border-radius: 25px; background: #15201e; color: white; box-shadow: 0 30px 100px rgba(0,0,0,.4); }
.ai-dialog::backdrop { background: rgba(10,17,15,.82); backdrop-filter: blur(8px); }
.ai-dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 22px 27px; border-bottom: 1px solid #35433f; }
.ai-dialog-header .brand { color: white; font-size: 19px; }.ai-dialog-header .brand-mark { background: none; }
.ai-dialog-header .icon-button { color: white; border-color: #43524e; }
.ai-dialog-body { padding: 32px; }
.ai-loading { text-align: center; padding: 65px 20px; }
.ai-loading .director-orb { margin-top: 10px; width: 130px; height: 130px; }
.ai-loading h3, .mindmovie h3 { font-size: 28px; margin: 0 0 10px; }.ai-loading p { color: #a8b7b0; font-size: 13px; }
.demo-notice { border: 1px solid #69754a; background: #293426; color: #dcebbd; border-radius: 12px; padding: 12px 15px; font-size: 11px; line-height: 1.5; margin-bottom: 20px; }
.scene-counter { display: flex; align-items: center; justify-content: space-between; color: var(--lime); font-size: 9px; letter-spacing: 1.4px; font-weight: 700; }
.mindmovie-screen { margin-top: 18px; border-radius: 19px; background: linear-gradient(145deg, #2b3540, #222c29); border: 1px solid #46564f; min-height: 350px; padding: 30px; position: relative; overflow: hidden; }
.mindmovie-screen::after { content: ""; position: absolute; width: 230px; height: 230px; background: #8b75ef; filter: blur(95px); opacity: .2; right: -40px; top: -50px; }
.scene-emoji { font-size: 74px; display: block; margin-bottom: 18px; animation: sceneFloat 4s ease-in-out infinite; }
.mindmovie-screen h3 { position: relative; font-size: 34px; margin: 0 0 14px; }
.scene-text { position: relative; color: #d2dad5; font-family: "Space Grotesk"; font-size: 18px; line-height: 1.55; max-width: 670px; }
.scene-twist { position: relative; border-left: 3px solid var(--coral); padding: 3px 0 3px 15px; color: #ffb6a4; font-size: 13px; line-height: 1.6; margin-top: 23px; }
.ai-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 23px; }
.ai-actions .button-quiet { color: white; border-color: #46564f; }.ai-actions .button-dark { background: var(--lime); color: var(--ink); }
.ai-actions small { color: #8e9e96; }
.confidence-box { background: #25322e; border-radius: 13px; padding: 16px; margin: 18px 0; }
.confidence-box label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 12px; }.confidence-box output { color: var(--lime); font-weight: 700; }
.confidence-box input { width: 100%; accent-color: var(--lime); }
.ai-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.ai-option { background: #24312d; color: white; border: 1px solid #43544d; border-radius: 12px; padding: 15px; text-align: left; cursor: pointer; line-height: 1.45; font-size: 12px; }
.ai-option:hover:not(:disabled) { border-color: var(--lime); }.ai-option.correct { background: #334d27; border-color: var(--lime); }.ai-option.wrong { background: #55352e; border-color: var(--coral); }
.ai-feedback { color: #b9c5bf; font-size: 13px; line-height: 1.65; margin-top: 18px; }.ai-feedback strong { color: white; display: block; margin-bottom: 4px; }
.ai-result { text-align: center; padding: 20px 0; }.ai-result .scene-emoji { margin-bottom: 8px; }.ai-result h3 { font-size: 35px; margin: 10px 0; }.ai-result > p { color: #a9b7b0; line-height: 1.65; max-width: 550px; margin: 0 auto 22px; }
.review-ticket { background: var(--lime); color: var(--ink); border-radius: 17px; padding: 22px; display: inline-flex; gap: 30px; align-items: center; text-align: left; transform: rotate(-2deg); margin: 12px 0 25px; }.review-ticket span { font-size: 10px; font-weight: 700; letter-spacing: 1px; }.review-ticket strong { display: block; font-family: "Space Grotesk"; font-size: 24px; margin-top: 3px; }
@keyframes orbMorph { to { border-radius: 60% 40% 35% 65%; transform: rotate(160deg) scale(1.05); } }
@keyframes sceneFloat { 50% { transform: translateY(-8px) rotate(4deg); } }
@media (max-width: 1100px) { .ai-section { margin-left: 48px; margin-right: 48px; }.ai-copy { padding: 35px; } }
@media (max-width: 800px) { .ai-section { grid-template-columns: 1fr; margin: 0 24px 75px; }.ai-preview { min-height: 440px; }.director-orb { margin: 30px auto; } }
@media (max-width: 560px) { .ai-copy { padding: 25px; }.ai-copy h2 { font-size: 35px; }.ai-preview { min-height: 410px; padding: 20px; }.ai-dialog-body { padding: 22px 19px; }.mindmovie-screen { padding: 22px; }.scene-text { font-size: 16px; }.ai-options { grid-template-columns: 1fr; }.ai-actions { flex-direction: column; align-items: stretch; }.ai-actions small { text-align: center; }.review-ticket { gap: 18px; }.review-ticket strong { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .director-orb::before, .director-orb::after, .scene-emoji { animation: none; } }
.help-lang-field { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.help-lang-field select { border: 1px solid #b6c5df; background: rgba(255,255,255,.75); border-radius: 10px; padding: 7px 10px; font: inherit; font-weight: 600; letter-spacing: 0; max-width: 100%; min-width: 0; }
.help-lang { margin-top: 12px; border: 1px dashed #b6c5df; border-radius: 12px; padding: 8px 12px; background: rgba(255,255,255,.6); text-align: start; }
.help-lang summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.help-lang [dir="rtl"] { text-align: right; }
.help-lang p { margin: 6px 0 0; line-height: 1.6; }
.requeue-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(199,189,240,.18); border: 1.5px dashed #c7bdf0; font-size: 14px; line-height: 1.5; }
.concept-plan { margin: 18px 0 4px; text-align: start; }
.concept-plan > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.3px; opacity: .7; margin-bottom: 8px; }
.concept-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.concept-plan li { display: flex; justify-content: space-between; gap: 12px; color: inherit; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.concept-plan li strong { white-space: nowrap; color: var(--lime); }
.link-row { display: flex; gap: 8px; margin: 10px 0 0; }
.link-row input { flex: 1 1 auto; min-width: 0; border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; font: inherit; background: var(--white); }
.link-row .button { min-height: 44px; }
.video-help { margin: 12px 0 0; padding: 12px 14px; border: 2px dashed var(--ink); border-radius: 12px; background: rgba(255,255,255,.7); font-size: 14px; line-height: 1.5; }
.video-help ol { margin: 6px 0; padding-inline-start: 20px; }
.video-help p { margin: 4px 0 0; color: var(--muted); }