.ai-photo-header { position: relative; }
.ai-credit-badge { align-items: center; background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: .8rem; display: inline-flex; gap: .65rem; margin-top: .6rem; padding: .5rem .75rem; }
.ai-credit-badge span { color: var(--text-secondary); font-size: .82rem; }
.ai-credit-badge strong { color: var(--primary); font-size: 1.2rem; }
.ai-photo-workspace, .ai-photo-result, .ai-photo-examples, .ai-credit-page, .ai-history { display: grid; gap: 1rem; }
.ai-photo-form { display: grid; gap: 1rem; }
.ai-photo-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1rem; }
.ai-photo-panel h2 { font-size: 1rem; margin: 0 0 .85rem; }
.ai-photo-upload { align-items: center; border: 2px dashed color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: .9rem; cursor: pointer; display: grid; min-height: 190px; overflow: hidden; place-items: center; position: relative; text-align: center; }
.ai-photo-upload input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.ai-photo-upload__copy { display: grid; gap: .3rem; padding: 1rem; }
.ai-photo-upload__copy span { color: var(--text-secondary); font-size: .8rem; }
.ai-photo-upload img { max-height: 360px; object-fit: contain; width: 100%; }
.ai-photo-selectors { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.ai-photo-options { border: 0; display: grid; gap: .55rem; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 1rem 0 0; padding: 0; }
.ai-photo-options legend { font-size: .85rem; font-weight: 800; margin-bottom: .5rem; }
.ai-photo-option { align-items: center; background: var(--surface-soft); border-radius: .65rem; cursor: pointer; display: flex; gap: .55rem; min-height: 46px; padding: .55rem .7rem; }
.ai-photo-option input { height: 20px; width: 20px; }
.ai-cost-summary { display: grid; gap: .35rem; }
.ai-cost-summary p { display: flex; justify-content: space-between; margin: 0; }
.ai-ethics-note { background: #fff8e7; border-left: 4px solid #e0a21a; border-radius: .5rem; color: #5f4610; font-size: .82rem; line-height: 1.5; padding: .75rem; }
.ai-service-warning { background: #fff2f2; border-radius: .55rem; color: #8b1d1d; padding: .7rem; }
.ai-photo-progress { align-items: center; background: linear-gradient(135deg,color-mix(in srgb,var(--primary) 7%,var(--surface-soft)),var(--surface-soft)); border: 1px solid color-mix(in srgb,var(--primary) 12%,var(--border)); border-radius: .8rem; display: grid; gap: .9rem; grid-template-columns: 190px minmax(0,1fr); margin-block: .8rem; overflow: hidden; padding: .8rem; }
.ai-photo-progress[hidden] { display: none; }
.ai-processing-copy { display: grid; gap: .25rem; }
.ai-processing-copy span { color: var(--text-secondary); line-height: 1.45; }
.ai-processing-visual { display: grid; gap: .38rem; width: 190px; }
.ai-processing-stage { aspect-ratio: 16/9; background: #d8e2ef; border: 2px solid #fff; border-radius: .65rem; box-shadow: 0 8px 22px rgb(8 40 83 / 16%); overflow: hidden; position: relative; }
.ai-processing-scene { background: linear-gradient(180deg,#c8d6e8 0 68%,#9a765d 68% 100%); inset: 0; position: absolute; }
.ai-processing-scene::before { background: linear-gradient(90deg,transparent 49%,rgb(255 255 255 / 55%) 50% 52%,transparent 53%); content: ""; inset: 0; opacity: .45; position: absolute; }
.ai-processing-scene--before { filter: saturate(.65) brightness(.82); }
.ai-processing-scene--after { background: linear-gradient(180deg,#dceaff 0 68%,#a87f61 68% 100%); clip-path: inset(0 100% 0 0); filter: saturate(1.08) contrast(1.03); animation: ec-ai-reveal 2.6s ease-in-out infinite; }
.ai-processing-window { background: linear-gradient(135deg,#b7dcf8,#f4fbff); border: 4px solid #f9fbff; box-shadow: 0 0 0 1px rgb(8 40 83 / 18%); height: 43%; left: 11%; position: absolute; top: 13%; width: 31%; }
.ai-processing-window::after { background: rgb(255 255 255 / 75%); content: ""; height: 100%; left: 48%; position: absolute; width: 3px; }
.ai-processing-sofa { background: #284d78; border-radius: .4rem .4rem .2rem .2rem; bottom: 12%; box-shadow: inset 0 5px rgb(255 255 255 / 10%); height: 30%; position: absolute; right: 14%; width: 41%; }
.ai-processing-sofa::before { background: #315c8d; border-radius: .35rem; content: ""; height: 55%; left: 8%; position: absolute; top: -28%; width: 84%; }
.ai-processing-lamp { background: #173a64; bottom: 14%; height: 36%; left: 50%; position: absolute; width: 3px; }
.ai-processing-lamp::before { background: #e5b94f; border-radius: 50% 50% 22% 22%; content: ""; height: 22%; left: -10px; position: absolute; top: -2px; width: 23px; }
.ai-processing-scan { animation: ec-ai-scan 2.6s ease-in-out infinite; background: linear-gradient(90deg,transparent,#55bfff 45%,#fff 50%,#55bfff 55%,transparent); filter: drop-shadow(0 0 6px #42aef6); height: 3px; left: -20%; position: absolute; top: 0; transform: rotate(90deg); transform-origin: left center; width: 140%; }
.ai-processing-spark { animation: ec-ai-spark 1.4s ease-in-out infinite; background: #fff; border-radius: 50%; box-shadow: 0 0 10px #61c7ff; height: 6px; position: absolute; width: 6px; }
.ai-processing-spark--one { right: 15%; top: 20%; }
.ai-processing-spark--two { animation-delay: .55s; right: 31%; top: 42%; }
.ai-processing-bar { background: color-mix(in srgb,var(--primary) 12%,var(--surface)); border-radius: 999px; height: 5px; overflow: hidden; position: relative; }
.ai-processing-bar::after { animation: ec-ai-bar 1.5s ease-in-out infinite; background: linear-gradient(90deg,var(--primary),#5fc9ff); border-radius: inherit; content: ""; inset-block: 0; left: 0; position: absolute; width: 45%; }
@keyframes ec-ai-reveal { 0%,12% { clip-path: inset(0 100% 0 0); } 58%,88% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes ec-ai-scan { 0%,12% { left: -18%; } 58%,88% { left: 105%; } 100% { left: -18%; } }
@keyframes ec-ai-spark { 0%,100% { opacity: .2; transform: scale(.65); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes ec-ai-bar { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }
.ai-photo-submit { min-height: 48px; width: 100%; }
.ai-before-after { display: grid; gap: .8rem; grid-template-columns: repeat(2,minmax(0,1fr)); }
.ai-compare-card { background: var(--surface); border: 1px solid var(--border); border-radius: .8rem; margin: 0; overflow: hidden; }
.ai-compare-card figcaption { background: var(--navy-dark); color: white; font-weight: 800; padding: .45rem; text-align: center; }
.ai-compare-card img { display: block; height: auto; width: 100%; }
.ai-example-grid, .ai-package-grid { display: grid; gap: .8rem; grid-template-columns: repeat(4,minmax(0,1fr)); }
.ai-example-card, .ai-package-card, .ai-history-card, .ai-photo-coming { background: var(--surface); border: 1px solid var(--border); border-radius: .8rem; padding: 1rem; }
.ai-example-card__visual { align-items: center; aspect-ratio: 16/9; background: linear-gradient(135deg,#dce9f8,#f4ead7); border-radius: .6rem; color: var(--navy-dark); display: flex; font-weight: 900; justify-content: center; }
.ai-package-card { display: grid; gap: .65rem; }
.ai-package-card h3, .ai-package-card p { margin: 0; }
.ai-package-card strong { color: var(--primary); font-size: 1.35rem; }
.ai-history-card { align-items: center; display: flex; flex-wrap: wrap; gap: .7rem; justify-content: space-between; }
@media (max-width: 820px) { .ai-example-grid,.ai-package-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .ai-photo-selectors,.ai-photo-options,.ai-before-after,.ai-example-grid,.ai-package-grid { grid-template-columns: 1fr; } .ai-photo-option { min-height: 48px; } .ai-photo-progress { grid-template-columns: 112px minmax(0,1fr); padding: .7rem; } .ai-processing-visual { width: 112px; } .ai-processing-copy span { font-size: .82rem; } }
@media (prefers-reduced-motion: reduce) { .ai-processing-scene--after { animation: none; clip-path: inset(0); } .ai-processing-scan,.ai-processing-spark,.ai-processing-bar::after { animation: none; } .ai-processing-scan { display: none; } .ai-processing-bar::after { transform: none; width: 100%; } }