/**
 * AI Grooming Assistant - Interactive Styles
 * Upload zone, loading states, and results display
 */

/* ========== AI UPLOAD & INTERACTION STYLES ========== */

.ai-upload-section {
 margin: 50px 0;
 position: relative;
 z-index: 1;
}

.ai-upload-card {
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 20px;
 padding: 40px;
 max-width: 700px;
 margin: 0 auto;
 text-align: center;
 box-shadow: var(--glow);
}

.ai-upload-title {
 font-size: 1.8rem;
 font-weight: 700;
 color: var(--white);
 margin-bottom: 8px;
}

.ai-upload-subtitle {
 font-size: 1rem;
 color: var(--text);
 margin-bottom: 30px;
}

/* Service Info (static, non-clickable) */
.ai-service-info {
 margin-bottom: 28px;
}

.ai-service-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 justify-content: center;
 margin-bottom: 12px;
}

.ai-service-tag {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 16px;
 background: rgba(193, 18, 31, 0.08);
 border: 1px solid rgba(193, 18, 31, 0.2);
 border-radius: 50px;
 color: var(--text);
 font-size: 0.85rem;
 font-weight: 500;
 pointer-events: none;
 user-select: none;
}

.ai-service-description {
 font-size: 0.9rem;
 color: var(--text-sec);
 font-style: italic;
 text-align: center;
}

/* ========== FULL ANALYSIS INFOGRAPHIC RESULTS ========== */

.ai-full-results {
 display: flex;
 flex-direction: column;
 gap: 28px;
 padding: 10px 0;
}

/* Section Block */
.ai-section-block {
 background: rgba(255,255,255,0.03);
 border: 1px solid rgba(255,255,255,0.08);
 border-radius: 18px;
 overflow: hidden;
}

.ai-section-header {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 18px 24px;
 background: rgba(193, 18, 31, 0.08);
 border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ai-section-num {
 width: 28px;
 height: 28px;
 background: var(--red);
 color: #fff;
 font-size: 0.8rem;
 font-weight: 700;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}

.ai-section-header h3 {
 font-size: 1rem;
 font-weight: 700;
 color: var(--white);
 text-transform: uppercase;
 letter-spacing: 0.06em;
 margin: 0;
}

.ai-section-body {
 padding: 24px;
}

/* --- 1. Personal Color --- */
.ai-color-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
 margin-bottom: 16px;
}

.ai-color-group label {
 display: block;
 font-size: 0.75rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--text-sec);
 margin-bottom: 10px;
}

.ai-swatches {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}

.ai-swatch {
 width: 44px;
 height: 44px;
 border-radius: 10px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.3);
 position: relative;
 cursor: default;
 flex-shrink: 0;
}

.ai-swatch:hover .ai-swatch-tip {
 opacity: 1;
}

.ai-swatch-tip {
 position: absolute;
 bottom: calc(100% + 6px);
 left: 50%;
 transform: translateX(-50%);
 background: rgba(0,0,0,0.85);
 color: #fff;
 font-size: 0.7rem;
 padding: 4px 8px;
 border-radius: 6px;
 white-space: nowrap;
 opacity: 0;
 transition: opacity 0.2s;
 pointer-events: none;
 z-index: 10;
}

.ai-color-season {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: rgba(193, 18, 31, 0.12);
 border: 1px solid rgba(193, 18, 31, 0.25);
 padding: 8px 16px;
 border-radius: 50px;
 font-size: 0.85rem;
 color: var(--white);
 font-weight: 600;
 margin-bottom: 10px;
}

.ai-color-formula {
 font-size: 0.85rem;
 color: var(--text-sec);
 background: rgba(255,255,255,0.04);
 border-radius: 10px;
 padding: 10px 14px;
 margin-top: 8px;
 font-style: italic;
}

/* --- 2. Outfit --- */
.ai-outfit-infographic {
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.ai-outfit-item {
 background: rgba(255,255,255,0.04);
 border-radius: 14px;
 padding: 16px 18px;
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 14px;
 align-items: start;
}

.ai-outfit-rank-badge {
 width: 36px;
 height: 36px;
 background: var(--red);
 color: #fff;
 border-radius: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: 0.95rem;
 flex-shrink: 0;
}

.ai-outfit-info h4 {
 font-size: 0.95rem;
 font-weight: 700;
 color: var(--white);
 margin: 0 0 4px;
}

.ai-outfit-occasion {
 font-size: 0.75rem;
 color: var(--red);
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 margin-bottom: 8px;
}

.ai-outfit-pieces {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin-bottom: 6px;
}

.ai-outfit-piece {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 background: rgba(255,255,255,0.06);
 border-radius: 6px;
 padding: 4px 10px;
 font-size: 0.78rem;
 color: var(--text);
}

.ai-outfit-piece-dot {
 width: 10px;
 height: 10px;
 border-radius: 3px;
 flex-shrink: 0;
}

.ai-outfit-why {
 font-size: 0.8rem;
 color: var(--text-sec);
 font-style: italic;
 margin-top: 4px;
}

.ai-outfit-avoid {
 margin-top: 16px;
}

.ai-outfit-avoid label {
 display: block;
 font-size: 0.75rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--text-sec);
 margin-bottom: 8px;
}

.ai-avoid-list {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.ai-avoid-item {
 display: flex;
 align-items: baseline;
 gap: 8px;
 font-size: 0.82rem;
 color: var(--text);
 background: rgba(193, 18, 31, 0.06);
 border-radius: 8px;
 padding: 8px 12px;
}

.ai-avoid-x {
 color: var(--red);
 font-weight: 700;
 flex-shrink: 0;
}

/* --- 3. Eyewear --- */
.ai-eyewear-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 14px;
 margin-bottom: 16px;
}

.ai-eyewear-card {
 background: rgba(255,255,255,0.04);
 border: 1px solid rgba(255,255,255,0.07);
 border-radius: 14px;
 padding: 16px;
 text-align: center;
}

.ai-eyewear-category {
 font-size: 0.7rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--red);
 margin-bottom: 6px;
}

.ai-eyewear-name {
 font-size: 0.95rem;
 font-weight: 700;
 color: var(--white);
 margin-bottom: 6px;
}

.ai-eyewear-score {
 display: inline-block;
 background: rgba(193, 18, 31, 0.15);
 color: var(--red);
 font-size: 0.8rem;
 font-weight: 700;
 padding: 3px 10px;
 border-radius: 20px;
 margin-bottom: 8px;
}

.ai-eyewear-why {
 font-size: 0.78rem;
 color: var(--text-sec);
 line-height: 1.5;
}

.ai-eyewear-colors {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
 justify-content: center;
 margin-top: 8px;
}

.ai-eyewear-color-tag {
 font-size: 0.7rem;
 background: rgba(255,255,255,0.06);
 border-radius: 4px;
 padding: 2px 7px;
 color: var(--text);
}

.ai-eyewear-protip {
 background: rgba(193, 18, 31, 0.07);
 border-left: 3px solid var(--red);
 border-radius: 0 10px 10px 0;
 padding: 10px 14px;
 font-size: 0.83rem;
 color: var(--text);
 font-style: italic;
}

/* --- 4. Skincare --- */
.ai-skincare-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
}

.ai-skincare-col label {
 display: block;
 font-size: 0.75rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--text-sec);
 margin-bottom: 10px;
}

.ai-routine-steps {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.ai-routine-step {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 background: rgba(255,255,255,0.04);
 border-radius: 10px;
 padding: 10px 12px;
}

.ai-step-num {
 width: 22px;
 height: 22px;
 background: var(--red);
 color: #fff;
 border-radius: 50%;
 font-size: 0.7rem;
 font-weight: 700;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 margin-top: 1px;
}

.ai-step-info strong {
 display: block;
 font-size: 0.85rem;
 color: var(--white);
 font-weight: 600;
 margin-bottom: 2px;
}

.ai-step-info span {
 font-size: 0.75rem;
 color: var(--text-sec);
}

.ai-concerns-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.ai-concern-item {
 background: rgba(255,255,255,0.04);
 border-radius: 10px;
 padding: 10px 12px;
}

.ai-concern-name {
 font-size: 0.85rem;
 font-weight: 600;
 color: var(--white);
 margin-bottom: 3px;
}

.ai-concern-severity {
 display: inline-block;
 font-size: 0.7rem;
 font-weight: 700;
 padding: 2px 8px;
 border-radius: 4px;
 margin-bottom: 5px;
 text-transform: capitalize;
}

.ai-concern-severity.mild { background: rgba(255,200,0,0.15); color: #ffc800; }
.ai-concern-severity.moderate { background: rgba(255,100,0,0.15); color: #ff6400; }
.ai-concern-severity.severe { background: rgba(193,18,31,0.2); color: var(--red); }

.ai-concern-tip {
 font-size: 0.78rem;
 color: var(--text-sec);
}

.ai-skincare-tips {
 margin-top: 16px;
}

.ai-skincare-tips label {
 display: block;
 font-size: 0.75rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--text-sec);
 margin-bottom: 8px;
}

.ai-tips-list {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.ai-tips-list li {
 display: flex;
 align-items: baseline;
 gap: 8px;
 font-size: 0.82rem;
 color: var(--text);
 padding: 6px 0;
 border-bottom: 1px solid rgba(255,255,255,0.04);
 list-style: none;
}

.ai-tips-list li::before {
 content: "→";
 color: var(--red);
 flex-shrink: 0;
 font-weight: 700;
}

/* --- 5. Hairstyle --- */
.ai-hair-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 14px;
 margin-bottom: 20px;
}

.ai-hair-card {
 background: rgba(255,255,255,0.04);
 border: 1px solid rgba(255,255,255,0.07);
 border-radius: 14px;
 padding: 16px;
 position: relative;
}

.ai-hair-rank {
 position: absolute;
 top: 12px;
 right: 12px;
 background: var(--red);
 color: #fff;
 width: 24px;
 height: 24px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 0.7rem;
 font-weight: 700;
}

.ai-hair-category {
 font-size: 0.7rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--red);
 margin-bottom: 4px;
}

.ai-hair-name {
 font-size: 0.95rem;
 font-weight: 700;
 color: var(--white);
 margin-bottom: 6px;
 padding-right: 28px;
}

.ai-hair-desc {
 font-size: 0.8rem;
 color: var(--text-sec);
 line-height: 1.5;
 margin-bottom: 10px;
}

.ai-hair-score-bar {
 height: 6px;
 background: rgba(255,255,255,0.08);
 border-radius: 3px;
 overflow: hidden;
 margin-bottom: 4px;
}

.ai-hair-score-fill {
 height: 100%;
 background: linear-gradient(90deg, var(--red), #ff4444);
 border-radius: 3px;
 transition: width 0.6s ease;
}

.ai-hair-score-label {
 font-size: 0.72rem;
 color: var(--text-sec);
 text-align: right;
}

.ai-hair-maintenance {
 display: flex;
 gap: 6px;
 flex-wrap: wrap;
 margin-top: 8px;
}

.ai-hair-tag {
 font-size: 0.7rem;
 background: rgba(193,18,31,0.12);
 color: var(--red);
 padding: 3px 9px;
 border-radius: 20px;
}

.ai-hair-avoid {
 margin-top: 4px;
}

.ai-hair-avoid label {
 display: block;
 font-size: 0.75rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--text-sec);
 margin-bottom: 8px;
}

.ai-hair-avoid-list {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.ai-hair-avoid-item {
 display: flex;
 align-items: baseline;
 gap: 8px;
 font-size: 0.82rem;
 color: var(--text);
 background: rgba(193,18,31,0.06);
 border-radius: 8px;
 padding: 8px 12px;
}

.ai-barber-tip {
 margin-top: 16px;
 background: rgba(193, 18, 31, 0.07);
 border-left: 3px solid var(--red);
 border-radius: 0 10px 10px 0;
 padding: 10px 14px;
 font-size: 0.83rem;
 color: var(--text);
 font-style: italic;
}

/* ========== COMING SOON BLOCK ========== */
.ai-coming-soon-block {
 text-align: center;
 padding: 60px 32px;
 border: 1px solid rgba(255,255,255,0.10);
 border-radius: 24px;
 margin: 0 auto;
 max-width: 580px;
 position: relative;
 overflow: hidden;
 isolation: isolate;
}
.ai-coming-soon-block::before {
 content: '';
 position: absolute;
 inset: 0;
 background: url('../Brand_assets/hair_analyst.png') center/cover no-repeat;
 filter: blur(6px) brightness(0.35) saturate(0.9);
 transform: scale(1.08);
 z-index: -1;
}
.ai-coming-soon-block::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(
 to bottom,
 rgba(10,10,10,0.45) 0%,
 rgba(10,10,10,0.30) 50%,
 rgba(10,10,10,0.60) 100%
 );
 z-index: -1;
}

.ai-coming-soon-icon {
 font-size: 3rem;
 margin-bottom: 16px;
 display: block;
 opacity: 0.8;
}

.ai-coming-soon-title {
 font-size: 1.8rem;
 font-weight: 700;
 color: var(--white);
 margin-bottom: 12px;
 letter-spacing: -0.01em;
}

.ai-coming-soon-desc {
 font-size: 0.95rem;
 color: var(--text-sec);
 line-height: 1.7;
 margin-bottom: 28px;
}

.ai-coming-soon-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 justify-content: center;
 margin-bottom: 32px;
}

.ai-coming-soon-tags span {
 background: rgba(255,255,255,0.05);
 border: 1px solid rgba(255,255,255,0.1);
 border-radius: 50px;
 padding: 7px 16px;
 font-size: 0.82rem;
 color: var(--text-sec);
 pointer-events: none;
 user-select: none;
}

.ai-coming-soon-btn {
 display: inline-block;
 background: var(--red);
 color: #fff;
 font-size: 0.9rem;
 font-weight: 600;
 padding: 14px 28px;
 border-radius: 50px;
 text-decoration: none;
 transition: background 0.2s ease, transform 0.2s ease;
}

.ai-coming-soon-btn:hover {
 background: #a50016;
 transform: translateY(-2px);
}

/* ========== USER PHOTO HEADER ========== */
.ai-user-photo-header {
 display: flex;
 align-items: center;
 gap: 24px;
 background: rgba(255,255,255,0.03);
 border: 1px solid rgba(255,255,255,0.08);
 border-radius: 18px;
 padding: 20px 24px;
 margin-bottom: 4px;
}

.ai-user-photo-wrap {
 position: relative;
 flex-shrink: 0;
}

.ai-user-photo {
 width: 100px;
 height: 100px;
 border-radius: 16px;
 object-fit: cover;
 display: block;
 border: 2px solid rgba(193,18,31,0.4);
 box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

.ai-user-photo-label {
 display: block;
 text-align: center;
 font-size: 0.7rem;
 color: var(--text-sec);
 margin-top: 6px;
 text-transform: uppercase;
 letter-spacing: 0.08em;
}

.ai-user-summary {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}

.ai-user-summary-tag {
 background: rgba(193,18,31,0.1);
 border: 1px solid rgba(193,18,31,0.25);
 border-radius: 50px;
 padding: 8px 16px;
 font-size: 0.85rem;
 color: var(--white);
 font-weight: 500;
}

/* ========== PHOTO GRID LAYOUT ========== */
.ai-photo-grid {
 display: grid;
 gap: 14px;
 margin-bottom: 16px;
}

.ai-photo-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ai-photo-grid-4 { grid-template-columns: repeat(4, 1fr); }

.ai-photo-card {
 background: rgba(255,255,255,0.04);
 border: 1px solid rgba(255,255,255,0.08);
 border-radius: 14px;
 overflow: hidden;
 transition: transform 0.2s ease, border-color 0.2s ease;
}

.ai-photo-card:hover {
 transform: translateY(-4px);
 border-color: rgba(193,18,31,0.3);
}

.ai-photo-card-avoid {
 border-color: rgba(193,18,31,0.2);
}

.ai-photo-card-avoid:hover {
 border-color: rgba(193,18,31,0.5);
}

.ai-photo-card-img-wrap {
 position: relative;
 width: 100%;
 aspect-ratio: 3/4;
 overflow: hidden;
 background: rgba(255,255,255,0.04);
}

.ai-photo-card-img-wide {
 aspect-ratio: 4/3;
}

.ai-photo-card-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: transform 0.3s ease;
}

.ai-photo-card:hover .ai-photo-card-img {
 transform: scale(1.05);
}

.ai-photo-card-placeholder {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 2.5rem;
 background: rgba(255,255,255,0.03);
}

.ai-photo-card-rank {
 position: absolute;
 top: 8px;
 left: 8px;
 background: var(--red);
 color: #fff;
 font-size: 0.72rem;
 font-weight: 700;
 padding: 3px 8px;
 border-radius: 6px;
}

.ai-photo-card-score {
 position: absolute;
 top: 8px;
 right: 8px;
 background: rgba(0,0,0,0.7);
 color: #fff;
 font-size: 0.7rem;
 font-weight: 700;
 padding: 3px 8px;
 border-radius: 6px;
 backdrop-filter: blur(4px);
}

.ai-photo-avoid-x {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(193,18,31,0.35);
 color: #fff;
 font-size: 2rem;
 font-weight: 900;
}

.ai-photo-card-body {
 padding: 12px 14px;
}

.ai-photo-card-category {
 font-size: 0.68rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--red);
 margin-bottom: 3px;
}

.ai-photo-card-name {
 font-size: 0.9rem;
 font-weight: 700;
 color: var(--white);
 margin-bottom: 5px;
 line-height: 1.3;
}

.ai-photo-card-occasion {
 font-size: 0.72rem;
 color: var(--red);
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 margin-bottom: 6px;
}

.ai-photo-card-pieces {
 display: flex;
 flex-wrap: wrap;
 gap: 4px;
 margin-bottom: 6px;
}

.ai-photo-card-why {
 font-size: 0.75rem;
 color: var(--text-sec);
 line-height: 1.4;
 font-style: italic;
}

.ai-section-sub {
 font-size: 0.85rem;
 color: var(--text-sec);
 margin-bottom: 16px;
}

.ai-section-sub-label {
 font-size: 0.72rem;
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: #4CAF50;
 margin-bottom: 10px;
}

/* Responsive full analysis */
@media (max-width: 768px) {
 .ai-photo-grid-4 { grid-template-columns: repeat(2, 1fr); }
 .ai-photo-grid-3 { grid-template-columns: repeat(2, 1fr); }
 .ai-user-photo-header { flex-direction: column; text-align: center; }
 .ai-user-summary { justify-content: center; }
}

@media (max-width: 600px) {
 .ai-color-grid,
 .ai-skincare-grid,
 .ai-hair-grid { grid-template-columns: 1fr; }
 .ai-eyewear-grid { grid-template-columns: 1fr; }
 .ai-outfit-item { grid-template-columns: 1fr; }
 .ai-outfit-rank-badge { width: 28px; height: 28px; font-size: 0.85rem; }
 .ai-photo-grid-4,
 .ai-photo-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Upload Zone */
.ai-upload-zone {
 border: 2px dashed var(--border);
 border-radius: 16px;
 padding: 40px 30px;
 margin-bottom: 25px;
 transition: all 0.3s ease;
 position: relative;
 overflow: hidden;
}

.ai-upload-zone.drag-over {
 border-color: var(--red);
 background: rgba(193, 18, 31, 0.05);
}

.ai-upload-placeholder {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 12px;
}

.ai-upload-icon {
 width: 48px;
 height: 48px;
 color: var(--red);
 opacity: 0.8;
}

.ai-upload-text {
 font-size: 1.1rem;
 color: var(--white);
 font-weight: 500;
}

.ai-upload-hint {
 font-size: 0.9rem;
 color: var(--text-sec);
}

.ai-upload-actions {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
 justify-content: center;
}

.ai-upload-btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 12px 22px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 50px;
 color: var(--white);
 font-size: 0.9rem;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.3s ease;
}

.ai-upload-btn:hover {
 background: var(--red);
 border-color: var(--red);
 transform: translateY(-2px);
}

.ai-selfie-btn {
 background: rgba(220, 38, 38, 0.12);
 border-color: rgba(220, 38, 38, 0.4);
}

.ai-selfie-btn:hover {
 background: var(--red);
 border-color: var(--red);
}

.ai-upload-formats {
 font-size: 0.8rem;
 color: var(--text-sec);
 margin-top: 8px;
}

.ai-image-preview {
 width: 100%;
 max-width: 300px;
 max-height: 300px;
 object-fit: cover;
 border-radius: 12px;
 margin: 0 auto;
 box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* Analyze Button */
.ai-analyze-btn {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 16px 40px;
 background: linear-gradient(135deg, var(--red) 0%, #8B0000 100%);
 border: none;
 border-radius: 50px;
 color: var(--white);
 font-size: 1.1rem;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s ease;
 box-shadow: 0 8px 30px rgba(193, 18, 31, 0.3);
}

.ai-analyze-btn:hover:not(:disabled) {
 transform: translateY(-3px);
 box-shadow: 0 12px 40px rgba(193, 18, 31, 0.4);
}

.ai-analyze-btn:disabled {
 opacity: 0.5;
 cursor: not-allowed;
 transform: none;
}

/* Error Message */
.ai-error {
 background: rgba(193, 18, 31, 0.1);
 border: 1px solid rgba(193, 18, 31, 0.3);
 border-radius: 12px;
 padding: 15px 20px;
 margin-bottom: 20px;
 color: var(--red);
 font-size: 0.95rem;
}

/* Loading State - Scanner Animation */
.ai-loading {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 52px 40px;
 text-align: center;
}

.ai-loading-inner {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 24px;
}

/* Scanner ring container */
.ail-scanner {
 position: relative;
 width: 140px;
 height: 140px;
 display: flex;
 align-items: center;
 justify-content: center;
}

/* Pulse rings */
.ail-pulse {
 position: absolute;
 inset: 0;
 border-radius: 50%;
 border: 1.5px solid rgba(193, 18, 31, 0.35);
 animation: ail-pulse-out 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.ail-pulse--2 {
 animation-delay: 1s;
}

@keyframes ail-pulse-out {
 0% { transform: scale(1); opacity: .7; }
 100% { transform: scale(1.55); opacity: 0; }
}

/* SVG rings - fill entire container */
.ail-rings {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 transform-origin: center;
}

/* Outer rotating arc */
.ail-arc {
 transform-origin: 70px 70px;
 animation: ail-spin-cw 1.3s linear infinite;
}

/* Inner counter-rotating arc */
.ail-arc-inner {
 transform-origin: 70px 70px;
 animation: ail-spin-ccw 2.1s linear infinite;
}

@keyframes ail-spin-cw { to { transform: rotate(360deg); } }
@keyframes ail-spin-ccw { to { transform: rotate(-360deg); } }

/* Photo slot in the center */
.ail-photo {
 position: relative;
 z-index: 2;
 width: 68px;
 height: 68px;
 border-radius: 50%;
 overflow: hidden;
 background: var(--surface);
 display: flex;
 align-items: center;
 justify-content: center;
 border: 2px solid rgba(193, 18, 31, 0.4);
}

.ail-photo img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.ail-photo-placeholder {
 font-size: 0.7rem;
 font-weight: 700;
 letter-spacing: .1em;
 color: rgba(193, 18, 31, 0.5);
}

/* Scan line sweep */
.ail-photo::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(
 180deg,
 transparent 0%,
 rgba(193, 18, 31, 0.18) 50%,
 transparent 100%
 );
 animation: ail-scan 1.6s ease-in-out infinite;
}

@keyframes ail-scan {
 0% { transform: translateY(-100%); }
 100% { transform: translateY(100%); }
}

/* Progress bar */
.ail-progress {
 width: 180px;
 height: 2px;
 background: rgba(255, 255, 255, 0.08);
 border-radius: 2px;
 overflow: hidden;
}

.ail-progress-fill {
 height: 100%;
 width: 0%;
 background: linear-gradient(90deg, #C1121F 0%, #ff3a48 100%);
 border-radius: 2px;
 transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 position: relative;
}

.ail-progress-fill::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(
 90deg,
 transparent 0%,
 rgba(255, 255, 255, 0.4) 50%,
 transparent 100%
 );
 background-size: 60px 100%;
 animation: ail-shimmer 1.2s linear infinite;
}

@keyframes ail-shimmer {
 from { transform: translateX(-60px); }
 to { transform: translateX(180px); }
}

/* Step indicators */
.ail-steps {
 display: flex;
 align-items: center;
 gap: 0;
}

.ail-step {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 opacity: 0.35;
 transition: opacity 0.3s ease;
}

.ail-step.active,
.ail-step.done {
 opacity: 1;
}

.ail-step-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.25);
 transition: background 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ail-step.active .ail-step-dot {
 background: #C1121F;
 box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.25);
 animation: ail-dot-pulse 1.4s ease-in-out infinite;
}

.ail-step.done .ail-step-dot {
 background: #22c55e;
 box-shadow: none;
}

@keyframes ail-dot-pulse {
 0%, 100% { box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.25); }
 50% { box-shadow: 0 0 0 6px rgba(193, 18, 31, 0.1); }
}

.ail-step-lbl {
 font-size: 0.68rem;
 letter-spacing: .06em;
 text-transform: uppercase;
 color: var(--text-sec);
 white-space: nowrap;
}

.ail-step.active .ail-step-lbl,
.ail-step.done .ail-step-lbl {
 color: var(--white);
}

.ail-step-line {
 width: 32px;
 height: 1px;
 background: rgba(255, 255, 255, 0.1);
 margin: 0 4px;
 margin-bottom: 14px;
}

/* Loading text */
.ai-loading-text {
 font-size: 1.1rem;
 color: var(--white);
 font-weight: 600;
 animation: ail-text-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ail-text-in {
 from { opacity: 0; transform: translateY(6px); }
 to { opacity: 1; transform: translateY(0); }
}

.ai-loading-subtext {
 font-size: 0.88rem;
 color: var(--text-sec);
 margin-top: -16px;
}

/* Results Section */
.ai-results {
 margin: 40px 0;
}

.ai-results-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 30px;
 padding: 0 20px;
}

.ai-results-header h3 {
 font-size: 1.5rem;
 color: var(--white);
}

.ai-reset-btn {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 10px 20px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 50px;
 color: var(--text);
 font-size: 0.9rem;
 cursor: pointer;
 transition: all 0.3s ease;
}

.ai-reset-btn:hover {
 border-color: var(--red);
 color: var(--white);
}

/* Result Cards */
.ai-result-card {
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 20px;
 padding: 35px;
 margin-bottom: 25px;
 box-shadow: var(--glow);
}

.ai-result-card h3 {
 font-size: 1.5rem;
 color: var(--white);
 margin-bottom: 25px;
 text-align: center;
}

.ai-result-section {
 margin-bottom: 25px;
 padding-bottom: 20px;
 border-bottom: 1px solid var(--border);
}

.ai-result-section:last-child {
 border-bottom: none;
 margin-bottom: 0;
 padding-bottom: 0;
}

.ai-result-section h4 {
 font-size: 1.1rem;
 color: var(--red);
 margin-bottom: 12px;
 font-weight: 600;
}

.ai-result-section p {
 color: var(--text);
 line-height: 1.6;
}

.ai-result-highlight {
 font-size: 1.3rem;
 font-weight: 700;
 color: var(--white) !important;
 margin-bottom: 8px;
}

.ai-recommendation-list {
 list-style: none;
 display: grid;
 gap: 15px;
}

.ai-recommendation-list li {
 background: var(--surface);
 padding: 15px 20px;
 border-radius: 12px;
 border-left: 3px solid var(--red);
}

.ai-recommendation-list strong {
 color: var(--white);
 font-size: 1.05rem;
 display: block;
 margin-bottom: 5px;
}

.ai-confidence {
 display: inline-block;
 background: rgba(193, 18, 31, 0.2);
 color: var(--red);
 padding: 4px 12px;
 border-radius: 20px;
 font-size: 0.85rem;
 font-weight: 600;
 margin-top: 8px;
}

.ai-result-meta {
 text-align: center;
 margin-top: 25px;
 padding-top: 20px;
 border-top: 1px solid var(--border);
}

.ai-result-meta small {
 color: var(--text-sec);
 font-size: 0.85rem;
}

/* Hairstyle Grid */
.ai-hairstyle-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 20px;
 margin-bottom: 30px;
}

.ai-hairstyle-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 25px;
 text-align: center;
 position: relative;
 transition: all 0.3s ease;
}

.ai-hairstyle-card:hover {
 border-color: var(--red);
 transform: translateY(-5px);
}

.ai-hairstyle-rank {
 position: absolute;
 top: -12px;
 left: 50%;
 transform: translateX(-50%);
 background: var(--red);
 color: var(--white);
 width: 30px;
 height: 30px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: 0.9rem;
}

.ai-hairstyle-card h4 {
 color: var(--white);
 font-size: 1.1rem;
 margin: 15px 0 10px;
}

.ai-hairstyle-card p {
 color: var(--text);
 font-size: 0.9rem;
 margin-bottom: 15px;
}

.ai-hairstyle-meta {
 display: flex;
 gap: 10px;
 justify-content: center;
 flex-wrap: wrap;
 margin-bottom: 15px;
}

.ai-tag {
 display: inline-block;
 background: rgba(193, 18, 31, 0.15);
 color: var(--red);
 padding: 4px 12px;
 border-radius: 20px;
 font-size: 0.8rem;
 font-weight: 500;
}

.ai-maintenance {
 font-size: 0.8rem;
 color: var(--text-sec);
}

.ai-confidence-bar {
 background: var(--surface);
 height: 8px;
 border-radius: 4px;
 overflow: hidden;
 position: relative;
}

.ai-confidence-fill {
 background: linear-gradient(90deg, var(--red), #ff4444);
 height: 100%;
 border-radius: 4px;
 transition: width 0.5s ease;
}

.ai-confidence-bar span {
 position: absolute;
 right: 0;
 top: -20px;
 font-size: 0.8rem;
 color: var(--text-sec);
}

/* Color Palette */
.ai-color-palette {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
 margin-bottom: 15px;
}

.ai-color-swatch {
 width: 60px;
 height: 60px;
 border-radius: 12px;
 display: flex;
 align-items: flex-end;
 justify-content: center;
 padding-bottom: 5px;
 box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.ai-color-swatch span {
 font-size: 0.7rem;
 color: white;
 text-shadow: 0 1px 3px rgba(0,0,0,0.5);
 font-weight: 600;
}

/* Outfit Cards */
.ai-outfit-list {
 display: grid;
 gap: 15px;
}

.ai-outfit-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 20px;
}

.ai-outfit-card h5 {
 color: var(--red);
 font-size: 1rem;
 margin-bottom: 8px;
 text-transform: capitalize;
}

.ai-outfit-card p {
 color: var(--text);
 font-size: 0.95rem;
 margin-bottom: 12px;
}

.ai-outfit-items {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}

/* Preview Comparison */
.ai-preview-comparison {
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 gap: 20px;
 align-items: center;
 margin-bottom: 30px;
}

.ai-preview-original,
.ai-preview-generated {
 text-align: center;
}

.ai-preview-original h4,
.ai-preview-generated h4 {
 color: var(--text-sec);
 font-size: 0.9rem;
 margin-bottom: 15px;
}

.ai-preview-original img,
.ai-preview-generated img {
 width: 100%;
 max-width: 250px;
 border-radius: 16px;
 box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.ai-preview-arrow {
 font-size: 2rem;
 color: var(--red);
 font-weight: 700;
}

.ai-result-actions {
 display: flex;
 gap: 15px;
 justify-content: center;
 flex-wrap: wrap;
}

/* Mobile Responsive for Upload */
@media (max-width: 768px) {
 .ai-upload-card {
 padding: 25px 20px;
 }
 
 .ai-upload-title {
 font-size: 1.4rem;
 }
 
 .ai-service-buttons {
 gap: 8px;
 }
 
 .ai-service-btn {
 padding: 10px 16px;
 font-size: 0.85rem;
 }
 
 .ai-upload-zone {
 padding: 30px 20px;
 }
 
 .ai-analyze-btn {
 padding: 14px 30px;
 font-size: 1rem;
 }
 
 .ai-results-header {
 flex-direction: column;
 gap: 15px;
 text-align: center;
 }
 
 .ai-preview-comparison {
 grid-template-columns: 1fr;
 gap: 20px;
 }
 
 .ai-preview-arrow {
 transform: rotate(90deg);
 }
 
 .ai-hairstyle-grid {
 grid-template-columns: 1fr;
 }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
 .ail-pulse,
 .ail-arc,
 .ail-arc-inner,
 .ail-photo::after,
 .ail-progress-fill::after,
 .ail-dot-pulse,
 .ai-loading-text {
 animation: none !important;
 }

 .ail-progress-fill {
 transition: width 0.1s linear;
 }

 .ai-confidence-fill {
 transition: none;
 }
}