/* ================================================================
   Celebrity Look-Alike  —  celeb.css  v3.0
   Matches the glassmorphism/white-card design from reference HTML
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Variables ── */
:root {
    --cp: #7C3AED;
    --cs: #DB2777;
    --grad: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%);
    --grad-pink: linear-gradient(90deg, #ec4899 0%, #8b5cf6 100%);
    --white-glass: rgba(255, 255, 255, 0.25);
    --white-glass2: rgba(255, 255, 255, 0.35);
    --glass-border: rgba(255, 255, 255, 0.5);
    --text-dark: #1e293b;
    --text-mid: #475569;
    --text-light: rgba(30, 41, 59, 0.65);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.10);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.16);
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --font: 'Inter', 'Segoe UI', sans-serif;
}

/* ── Base ── */
.celeb-upload-section,
.celeb-result-section,
.celeb-error-box {
    font-family: var(--font);
    color: var(--text-dark);
    width: 100%;
    box-sizing: border-box;
    padding: 26px;
}

/* ════════════════════════════════════════════════════════
   FULLSCREEN OVERLAY
════════════════════════════════════════════════════════ */
.celeb-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(10, 6, 25, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: celeb-fadein 0.25s ease;
}
@keyframes celeb-fadein { from { opacity: 0; } to { opacity: 1; } }

.celeb-overlay-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 48px 32px;
    max-width: 380px;
    width: 100%;
    text-align: center;
}

/* Spinning face with scan */
.celeb-ol-face {
    position: relative;
    width: 156px;
    height: 156px;
    flex-shrink: 0;
}
.celeb-ol-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
/* Conic spinning ring */
.celeb-scan-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #7C3AED, #DB2777, transparent 60%);
    animation: celeb-spin 1.6s linear infinite;
    z-index: 1;
}
.celeb-ol-face::after {
    /* white gap between ring and photo */
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 4px solid rgba(10, 6, 25, 0.92);
    pointer-events: none;
    z-index: 2;
}
@keyframes celeb-spin { to { transform: rotate(360deg); } }

/* Scan line on top of photo */
.celeb-scan-ring::after {
    display: none; /* handled by z-index layering — ring itself is the indicator */
}

/* Steps */
.celeb-ol-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    text-align: left;
}
.celeb-step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(255,255,255,.35);
    font-family: var(--font);
    transition: color .35s, opacity .35s;
}
.celeb-step.active { color: rgba(255,255,255,.95); }
.celeb-step.done   { color: #a78bfa; }

.celeb-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(124,58,237,.3);
    flex-shrink: 0;
    transition: background .35s;
}
.celeb-step.active .celeb-dot {
    background: var(--grad);
    box-shadow: 0 0 8px #7C3AED;
    animation: celeb-pulse .85s ease-in-out infinite;
}
.celeb-step.done .celeb-dot { background: #a78bfa; animation: none; }
@keyframes celeb-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.5)} }

.celeb-ol-hint { font-size: 12px; color: rgba(255,255,255,.35); margin: 0; font-family: var(--font); }

/* ════════════════════════════════════════════════════════
   UPLOAD SECTION
════════════════════════════════════════════════════════ */
.celeb-upload-section {
    padding: 24px;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* Drop zone — glassmorphism card */
.celeb-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 32px;
    border: 1px dashed rgba(30,41,59,.25);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color .22s, background .22s, transform .2s;
    text-align: center;
}
.celeb-drop-zone:hover {
    border-color: #DB2777;
    background: var(--white-glass2);
}
.celeb-drop-zone.celeb-drag-over {
    border-color: var(--cp);
    background: rgba(124,58,237,.08);
    transform: scale(1.015);
}

.celeb-upload-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.7) 0%, rgba(219, 39, 119, 0.7) 100%);
    color: #ffffff;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;
}

.celeb-drop-title {
    font-size: 20px;
    font-weight: 500;
    color: rgba(51,65,85,1);
    margin: 0;
}
.celeb-drop-or    { font-size: 13px; color: var(--text-light); margin: 0; }
.celeb-drop-cta   {
    font-size: 16px;
    line-height: 1.2 !important;
    font-weight: 500;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0em;
    border-radius: 0.3em;
    padding: 1.0em 2.0em;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.8) 0%, rgba(219, 39, 119, 0.8) 100%);
    border-color: transparent;
    color: #fff !important;
}
.celeb-drop-hint  { font-size: 12px; color: var(--text-light); margin: 0; }

/* Selected state */
.celeb-selected-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 20px;
}
.celeb-thumb-img {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 3px solid rgba(255,255,255,.6);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.celeb-file-name {
    font-size: 13px;
    color: var(--text-light);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}
.celeb-selected-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Buttons */
.celeb-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--grad-pink);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    box-shadow: 0 4px 18px rgba(219,39,119,.38);
    transition: transform .18s, box-shadow .18s, filter .18s;
}
.celeb-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(219,39,119,.5);
    filter: brightness(1.06);
}
.celeb-btn-primary:active { transform: translateY(0); }

.celeb-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(30,41,59,.2);
    color: var(--text-dark);
    border-radius: 100px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font);
    transition: background .18s;
}
.celeb-btn-outline:hover { background: rgba(255,255,255,.8); }

/* ════════════════════════════════════════════════════════
   RESULT SECTION
   Layout (2-column) is handled by your page builder.
   [celeb_image_input] = left col, [celeb_result] = right col.
════════════════════════════════════════════════════════ */
@keyframes celeb-slideup {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── LEFT column ── */
.celeb-left-card {
    background: var(--white-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 28px 22px;
    box-shadow: var(--shadow-card);
    position: sticky;
    top: 24px;
    max-width: 400px;
    margin: auto;
}
.celeb-left-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 18px;
}

.celeb-user-photo-wrap {
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 18px;
}
.celeb-user-photo {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    display: block;
}

/* Attributes */
.celeb-attrs { margin-bottom: 20px; }
.celeb-attrs-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-light);
    margin: 0 0 12px;
}
.celeb-attr-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid rgba(30,41,59,.07);
    font-size: 13px;
}
.celeb-attr-row:last-child { border-bottom: none; }
.celeb-attr-row span { color: var(--text-light); }
.celeb-attr-row strong { color: var(--text-dark); font-weight: 600; text-transform: capitalize; }

/* Reset button */
.celeb-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: var(--grad);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    box-shadow: 0 4px 16px rgba(124,58,237,.3);
    transition: transform .18s, box-shadow .18s;
}
.celeb-reset-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124,58,237,.4);
}




/* ── RIGHT column ── */
.celeb-matches-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 20px;
}

.celeb-matches-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ════════════════════════════════════════════════════════
   CELEBRITY MATCH CARD  (white, elevated, beautiful)
════════════════════════════════════════════════════════ */
.celeb-match-card {
    border-radius: var(--radius-lg);
    padding: 22px 22px;
    box-shadow: var(--shadow-card);
    border: 1px solid transparent;
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    transition: transform .25s, box-shadow .25s;
    animation: celeb-cardin .4s ease both;
    overflow: hidden;
}
.celeb-match-card::before {
    /* subtle gradient shimmer on left edge */
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--grad-pink);
    border-radius: 2px 0 0 2px;
}
.celeb-match-card:hover {
    transform: translateY(-3px) scale(1.005);
    box-shadow: var(--shadow-hover);
}
@keyframes celeb-cardin {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Rank 1 — gold border */
.celeb-match-card.rank-1 { border-color: rgba(234, 179, 8, .5); }
/* Rank 2 — silver */
.celeb-match-card.rank-2 { border-color: rgba(148, 163, 184, .4); }
/* Rank 3 — bronze */
.celeb-match-card.rank-3 { border-color: rgba(234, 138, 45, .4); }

/* Badge */
.celeb-rank-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font);
}
.celeb-rank-badge.badge-1 { background: linear-gradient(90deg, #f59e0b, #eab308); color: #fff; }
.celeb-rank-badge.badge-2 { background: linear-gradient(90deg, #94a3b8, #cbd5e1); color: #334155; }
.celeb-rank-badge.badge-3 { background: linear-gradient(90deg, #f97316, #fb923c); color: #fff; }
.celeb-rank-badge.badge-n { background: rgba(124,58,237,.1); color: var(--cp); }

/* Celebrity photo */
.celeb-card-img-wrap {
    flex-shrink: 0;
    position: relative;
}
.celeb-card-img {
    width: 184px;
    height: 220px;
    object-position: top;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    border: 3px solid rgba(255, 255, 255, .8);
    transition: opacity .4s ease;
}
.celeb-card-rank-num {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--grad-pink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    font-family: var(--font);
}

/* Card content */
.celeb-card-body {
    flex: 1;
    min-width: 0;
}
.celeb-card-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 80px; /* space for badge */
}
.celeb-card-score-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 14px;
}
.celeb-card-pct {
    font-size: 30px;
    font-weight: 800;
    background: var(--grad-pink);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.celeb-card-pct-label {
    font-size: 14px;
    color: var(--text-light);
    font-weight: 500;
}

/* Progress bar */
.celeb-card-bar-wrap {
    margin-bottom: 12px;
}
.celeb-card-bar-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 5px;
}
.celeb-bar-track {
    width: 100%;
    height: 10px;
    background: rgba(30,41,59,.08);
    border-radius: 100px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
}
.celeb-bar-fill {
    height: 100%;
    border-radius: 100px;
    background: var(--grad-pink);
    width: 0;
    transition: width 1.1s cubic-bezier(.22,1,.36,1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 5px;
}
.celeb-bar-fill-label {
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

/* Quality pill */
.celeb-quality-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
}
.celeb-quality-pill.q-excellent { background: rgba(34,197,94,.12); color: #15803d; }
.celeb-quality-pill.q-good      { background: rgba(59,130,246,.12); color: #1d4ed8; }
.celeb-quality-pill.q-possible  { background: rgba(124,58,237,.1);  color: #6d28d9; }

/* ════════════════════════════════════════════════════════
   ERROR BOX
════════════════════════════════════════════════════════ */
.celeb-error-box { padding: 40px 0; text-align: center; }
.celeb-error-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(239,68,68,.2);
    border-radius: var(--radius-lg);
    padding: 36px 44px;
    box-shadow: var(--shadow-card);
}
.celeb-error-icon { font-size: 36px; }
#celeb-error-msg { font-size: 15px; color: var(--text-mid); margin: 0; font-family: var(--font); }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    .celeb-result-layout {
        grid-template-columns: 1fr;
    }
    .celeb-left-card { position: static; }
}

@media (max-width: 560px) {
    .celeb-match-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 18px 16px;
    }
    .celeb-card-img { width: 100%; height: 200px; min-height: 280px; border-radius: var(--radius-sm); }
    .celeb-card-img-wrap { 
        width: 100%;
        height: 100%;
        max-width: 220px;
        margin: auto;
     }
     .celeb-card-body{ width: 100%; padding: 4px 20px; }
    .celeb-card-name { padding-right: 0; font-size: 18px; }
    .celeb-card-pct  { font-size: 26px; }
    .celeb-rank-badge { position: static; margin-bottom: 4px; align-self: flex-start; }
    .celeb-drop-zone { padding: 36px 18px; }
}



/* ================================================================
   FACE SHAPE DETECTOR  —  fs-* classes
   Appended to celeb.css — shares all existing variables & buttons
   ================================================================ */

/* ── Hero card ─────────────────────────────────────────────────── */
.fs-hero-card {
    display: flex;
    align-items: center;
    gap: 24px;
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 28px 28px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(255,255,255,.8);
    margin-bottom: 28px;
    animation: celeb-slideup .4s ease both;
}
.fs-hero-left { flex-shrink: 0; }
.fs-shape-icon-wrap {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(219,39,119,.08));
    border-radius: 50%;
    border: 2px solid rgba(124,58,237,.15);
}
.fs-shape-icon-wrap svg { width: 58px; height: 58px; }

.fs-hero-right { flex: 1; min-width: 0; }
.fs-hero-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--text-light);
    margin: 0 0 6px;
}
.fs-hero-shape {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 10px;
    line-height: 1.1;
}
.fs-hero-desc {
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.65;
    margin: 0;
}

/* ── Section wrapper ───────────────────────────────────────────── */
.fs-section {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 24px 24px;
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
    animation: celeb-slideup .4s ease both;
}
.fs-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fs-section-icon { font-size: 18px; line-height: 1; }

/* ── Celebrity chips ───────────────────────────────────────────── */
.fs-celeb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.fs-celeb-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(124,58,237,.07), rgba(219,39,119,.07));
    border: 1px solid rgba(124,58,237,.18);
    border-radius: 100px;
    padding: 8px 16px 8px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    transition: transform .18s, box-shadow .18s;
}
.fs-celeb-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(124,58,237,.15);
}
.fs-celeb-chip-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(219,39,119,.2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

/* ── Makeup tips card ──────────────────────────────────────────── */
.fs-makeup-card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.fs-makeup-tip {
    background: linear-gradient(135deg, rgba(219,39,119,.05), rgba(124,58,237,.05));
    border: 1px solid rgba(219,39,119,.15);
    border-radius: var(--radius-sm);
    padding: 16px 14px;
    transition: transform .18s;
}
.fs-makeup-tip:hover { transform: translateY(-2px); }
.fs-makeup-tip-icon  { font-size: 22px; margin-bottom: 8px; }
.fs-makeup-tip-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cs);
    margin-bottom: 5px;
}
.fs-makeup-tip-text  { font-size: 13px; color: var(--text-mid); line-height: 1.5; }

/* ── Hairstyle tabs ────────────────────────────────────────────── */
.fs-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}
.fs-tab {
    padding: 8px 22px;
    border-radius: 100px;
    border: 1px solid rgba(30,41,59,.15);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mid);
    cursor: pointer;
    font-family: var(--font);
    transition: all .18s;
}
.fs-tab.active, .fs-tab:hover {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(124,58,237,.3);
}

/* ── Rec grid (hairstyle + glasses) ───────────────────────────── */
.fs-rec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}
.fs-rec-card {
    background: #f8fafc;
    border: 1px solid rgba(30,41,59,.08);
    border-radius: var(--radius-sm);
    padding: 16px 12px;
    text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    animation: celeb-cardin .35s ease both;
}
.fs-rec-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(124,58,237,.12);
    border-color: rgba(124,58,237,.25);
}
.fs-rec-img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(219,39,119,.08));
}
.fs-rec-img-placeholder {
    width: 100%;
    height: 110px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(219,39,119,.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}
.fs-rec-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}
.fs-rec-tip {
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.4;
}

/* ── Glasses grid ──────────────────────────────────────────────── */
.fs-glasses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}
.fs-glasses-card {
    background: #f8fafc;
    border: 1px solid rgba(30,41,59,.08);
    border-radius: var(--radius-sm);
    padding: 18px 14px;
    text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    animation: celeb-cardin .35s ease both;
}
.fs-glasses-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(124,58,237,.12);
    border-color: rgba(124,58,237,.25);
}
.fs-glasses-icon  { font-size: 32px; margin-bottom: 8px; }
.fs-glasses-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}
.fs-glasses-tip   { font-size: 11px; color: var(--text-light); line-height: 1.4; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .fs-hero-card { flex-direction: column; text-align: center; gap: 16px; }
    .fs-makeup-card { grid-template-columns: 1fr 1fr; }
    .fs-rec-grid  { grid-template-columns: 1fr 1fr; }
    .fs-glasses-grid { grid-template-columns: 1fr 1fr; }
}


/* ================================================================
   EYE SHAPE DETECTOR  —  eye-* classes
   Appended to celeb.css
   ================================================================ */

/* Eye shape icon wrap */
.eye-shape-icon-wrap {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(219,39,119,.08));
    border-radius: 50%;
    border: 2px solid rgba(124,58,237,.15);
}
.eye-shape-icon-wrap svg { width: 62px; height: 62px; }

/* Eye color row */
.eye-color-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 16px 22px;
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
    animation: celeb-slideup .4s ease both;
}
.eye-color-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-light);
}
.eye-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.8);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    flex-shrink: 0;
    transition: background .5s ease;
}
.eye-color-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: capitalize;
}

/* Eyeliner avoid list */
.eye-avoid-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.eye-avoid-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(239,68,68,.04);
    border: 1px solid rgba(239,68,68,.12);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    animation: celeb-cardin .35s ease both;
}
.eye-avoid-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
.eye-avoid-body {}
.eye-avoid-title {
    font-size: 13px;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 3px;
}
.eye-avoid-text {
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.5;
}

/* Eyeshadow color grid */
.eye-shadow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}
.eye-shadow-card {
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(30,41,59,.07);
    transition: transform .2s, box-shadow .2s;
    animation: celeb-cardin .35s ease both;
    background: #fff;
}
.eye-shadow-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.eye-shadow-swatch {
    height: 64px;
    width: 100%;
}
.eye-shadow-info {
    padding: 10px 12px;
}
.eye-shadow-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 3px;
}
.eye-shadow-why {
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.4;
}

/* Glasses sub-label */
.eye-glasses-sub {
    font-size: 13px;
    color: var(--text-light);
    margin: -10px 0 16px;
}

/* Responsive */
@media (max-width: 560px) {
    .eye-shadow-grid { grid-template-columns: repeat(2, 1fr); }
    .eye-color-row   { flex-wrap: wrap; }
}


/* ================================================================
   FACE SYMMETRY DETECTOR  —  sym-* classes
   ================================================================ */

/* ── Hero card ── */
.sym-hero-card {
    display: flex;
    align-items: center;
    gap: 28px;
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
    animation: celeb-slideup .4s ease both;
    flex-wrap: wrap;
}

/* ── Animated ring ── */
.sym-ring-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}
.sym-ring-svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* Smooth stroke animation driven by JS */
#sym-ring-fill {
    transition: stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1);
}
.sym-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
}
.sym-ring-score {
    font-size: 38px;
    font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.sym-ring-unit {
    font-size: 12px;
    color: var(--text-light);
    font-weight: 500;
}

/* ── Hero info ── */
.sym-hero-info { flex: 1; min-width: 200px; }

.sym-grade-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 12px;
}
/* Grade colours */
.sym-grade-perfect  { background: linear-gradient(90deg,#7C3AED,#DB2777); color:#fff; }
.sym-grade-high     { background: rgba(34,197,94,.12);  color:#15803d; border:1px solid rgba(34,197,94,.25); }
.sym-grade-good     { background: rgba(59,130,246,.12); color:#1d4ed8; border:1px solid rgba(59,130,246,.25); }
.sym-grade-moderate { background: rgba(245,158,11,.12); color:#b45309; border:1px solid rgba(245,158,11,.25); }
.sym-grade-low      { background: rgba(239,68,68,.10);  color:#dc2626; border:1px solid rgba(239,68,68,.20); }

.sym-hero-title {
    font-size: clamp(20px,3vw,28px);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 8px;
    line-height: 1.2;
}
.sym-hero-desc {
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.65;
    margin: 0;
}

/* ── Breakdown bars ── */
.sym-bars-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sym-bar-row {
    display: grid;
    grid-template-columns: 110px 1fr 52px;
    align-items: center;
    gap: 14px;
    animation: celeb-cardin .35s ease both;
}
.sym-bar-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
}
.sym-bar-track {
    height: 10px;
    background: rgba(30,41,59,.07);
    border-radius: 100px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.05);
}
.sym-bar-fill {
    height: 100%;
    border-radius: 100px;
    width: 0;
    transition: width 1.2s cubic-bezier(.22,1,.36,1);
}
/* Colour the bar fill based on score */
.sym-bar-fill.score-great    { background: linear-gradient(90deg,#7C3AED,#DB2777); }
.sym-bar-fill.score-good     { background: linear-gradient(90deg,#3b82f6,#6366f1); }
.sym-bar-fill.score-moderate { background: linear-gradient(90deg,#f59e0b,#f97316); }
.sym-bar-fill.score-low      { background: linear-gradient(90deg,#ef4444,#f97316); }

.sym-bar-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    text-align: right;
}

/* ── Tips grid ── */
.sym-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.sym-tip-card {
    background: linear-gradient(135deg,rgba(124,58,237,.04),rgba(219,39,119,.04));
    border: 1px solid rgba(124,58,237,.12);
    border-radius: var(--radius-sm);
    padding: 18px 16px;
    transition: transform .2s, box-shadow .2s;
    animation: celeb-cardin .35s ease both;
}
.sym-tip-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124,58,237,.1);
}
.sym-tip-icon  { font-size: 24px; margin-bottom: 10px; }
.sym-tip-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
}
.sym-tip-text  {
    font-size: 12px;
    color: var(--text-mid);
    line-height: 1.55;
}

/* ── Responsive ── */
@media (max-width: 560px) {
    .sym-hero-card  { flex-direction: column; align-items: center; text-align: center; }
    .sym-bar-row    { grid-template-columns: 80px 1fr 44px; gap: 10px; }
    .sym-bar-label  { font-size: 12px; }
    .sym-tips-grid  { grid-template-columns: 1fr; }
}


/* ================================================================
   GOLDEN RATIO DETECTOR  —  gr-* classes
   ================================================================ */

/* ── Hero card ── */
.gr-hero-card {
    display: flex;
    align-items: center;
    gap: 28px;
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
    animation: celeb-slideup .4s ease both;
    flex-wrap: wrap;
}

/* ── Animated ring ── */
.gr-ring-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}
.gr-ring-svg { width: 100%; height: 100%; display: block; }
#gr-ring-fill {
    transition: stroke-dashoffset 1.8s cubic-bezier(.22,1,.36,1);
}
.gr-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
}
.gr-ring-score {
    font-size: 38px;
    font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.gr-ring-unit { font-size: 12px; color: var(--text-light); font-weight: 500; }

/* ── Hero info ── */
.gr-hero-info { flex: 1; min-width: 200px; }
.gr-grade-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    margin-bottom: 12px;
}
.gr-grade-divine    { background: var(--grad); color: #fff; }
.gr-grade-excellent { background: rgba(34,197,94,.12);  color: #15803d; border: 1px solid rgba(34,197,94,.25); }
.gr-grade-great     { background: rgba(59,130,246,.12); color: #1d4ed8; border: 1px solid rgba(59,130,246,.25); }
.gr-grade-good      { background: rgba(245,158,11,.12); color: #b45309; border: 1px solid rgba(245,158,11,.25); }
.gr-grade-average   { background: rgba(124,58,237,.10); color: #6d28d9; border: 1px solid rgba(124,58,237,.20); }

.gr-hero-title {
    font-size: clamp(18px,3vw,26px);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 8px;
    line-height: 1.2;
}
.gr-hero-msg {
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

/* ── Explainer section ── */
.gr-explainer {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 24px;
    align-items: start;
}
.gr-explainer-text p {
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.7;
    margin: 0 0 12px;
}
.gr-explainer-text p:last-child { margin-bottom: 0; }
.gr-explainer-text strong { color: var(--text-dark); font-weight: 700; }

.gr-diagram-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(124,58,237,.04), rgba(219,39,119,.04));
    border: 1px solid rgba(124,58,237,.12);
    border-radius: var(--radius-md);
    padding: 12px;
}
.gr-diagram-svg { width: 100%; max-width: 180px; height: auto; display: block; }

/* ── Score meaning ── */
.gr-score-meaning {
    background: linear-gradient(135deg, rgba(124,58,237,.05), rgba(219,39,119,.05));
    border: 1px solid rgba(124,58,237,.14);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    animation: celeb-cardin .35s ease both;
}
.gr-score-meaning-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gr-score-meaning-text {
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.7;
    margin: 0;
}

/* ── Measurements grid ── */
.gr-measurements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    gap: 16px;
}
.gr-meas-card {
    background: #ffffff;
    border: 1px solid rgba(30,41,59,.08);
    border-radius: var(--radius-md);
    padding: 22px 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    transition: transform .2s, box-shadow .2s;
    animation: celeb-cardin .4s ease both;
    position: relative;
    overflow: hidden;
}
.gr-meas-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad);
}
.gr-meas-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124,58,237,.13);
}
.gr-meas-icon  { font-size: 26px; margin-bottom: 10px; }
.gr-meas-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-light);
    margin-bottom: 6px;
}
.gr-meas-ratio {
    font-size: 28px;
    font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 4px;
}
.gr-meas-ideal {
    font-size: 11px;
    color: var(--text-light);
    margin-bottom: 14px;
}
/* Mini bar inside card */
.gr-meas-bar-wrap { margin-bottom: 10px; }
.gr-meas-bar-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-light);
    margin-bottom: 5px;
}
.gr-meas-bar-track {
    height: 7px;
    background: rgba(30,41,59,.07);
    border-radius: 100px;
    overflow: hidden;
}
.gr-meas-bar-fill {
    height: 100%;
    border-radius: 100px;
    background: var(--grad);
    width: 0;
    transition: width 1.3s cubic-bezier(.22,1,.36,1);
}
.gr-meas-score-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
}
.gr-pill-great  { background: rgba(34,197,94,.12);  color: #15803d; }
.gr-pill-good   { background: rgba(59,130,246,.12); color: #1d4ed8; }
.gr-pill-avg    { background: rgba(245,158,11,.12); color: #b45309; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .gr-hero-card        { flex-direction: column; align-items: center; text-align: center; }
    .gr-explainer        { grid-template-columns: 1fr; }
    .gr-diagram-wrap     { max-width: 160px; margin: 0 auto; }
    .gr-measurements-grid{ grid-template-columns: 1fr; }
}


/* ================================================================
   LIP SHAPE DETECTOR  —  lip-* classes
   ================================================================ */

/* Lip shape icon wrap */
.lip-icon-wrap {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(219,39,119,.08), rgba(124,58,237,.08));
    border-radius: 50%;
    border: 2px solid rgba(219,39,119,.18);
}
.lip-icon-wrap svg { width: 64px; height: 64px; }

/* ── Attribute breakdown grid ── */
.lip-attrs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.lip-attr-card {
    background: #ffffff;
    border: 1px solid rgba(30,41,59,.08);
    border-radius: var(--radius-md);
    padding: 18px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: transform .2s, box-shadow .2s;
    animation: celeb-cardin .35s ease both;
    position: relative;
    overflow: hidden;
}
.lip-attr-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad);
}
.lip-attr-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(219,39,119,.12);
}
.lip-attr-icon  { font-size: 22px; margin-bottom: 8px; }
.lip-attr-name  {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--text-light);
    margin-bottom: 5px;
}
.lip-attr-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    text-transform: capitalize;
}
.lip-attr-bar-track {
    height: 6px;
    background: rgba(30,41,59,.07);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 6px;
}
.lip-attr-bar-fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    width: 0;
    transition: width 1.2s cubic-bezier(.22,1,.36,1);
}
.lip-attr-score {
    font-size: 11px;
    font-weight: 700;
    color: var(--cs);
    text-align: right;
}

/* ── Makeup tips grid ── */
.lip-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.lip-tip-card {
    background: linear-gradient(135deg, rgba(219,39,119,.04), rgba(124,58,237,.04));
    border: 1px solid rgba(219,39,119,.14);
    border-radius: var(--radius-sm);
    padding: 18px 16px;
    transition: transform .2s, box-shadow .2s;
    animation: celeb-cardin .35s ease both;
}
.lip-tip-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(219,39,119,.1);
}
.lip-tip-icon  { font-size: 22px; margin-bottom: 8px; }
.lip-tip-title { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 5px; }
.lip-tip-text  { font-size: 12px; color: var(--text-mid); line-height: 1.55; }

/* ── Lip liner list ── */
.lip-liner-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lip-liner-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #ffffff;
    border: 1px solid rgba(30,41,59,.08);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    animation: celeb-cardin .35s ease both;
    transition: transform .18s;
}
.lip-liner-item:hover { transform: translateX(4px); }
.lip-liner-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: linear-gradient(135deg, rgba(219,39,119,.1), rgba(124,58,237,.1));
}
.lip-liner-body {}
.lip-liner-title { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 3px; }
.lip-liner-text  { font-size: 12px; color: var(--text-mid); line-height: 1.5; }

/* ── Lip care grid ── */
.lip-care-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.lip-care-card {
    background: linear-gradient(135deg, rgba(124,58,237,.04), rgba(219,39,119,.04));
    border: 1px solid rgba(124,58,237,.12);
    border-radius: var(--radius-sm);
    padding: 18px 16px;
    transition: transform .2s;
    animation: celeb-cardin .35s ease both;
}
.lip-care-card:hover { transform: translateY(-2px); }
.lip-care-icon  { font-size: 24px; margin-bottom: 8px; }
.lip-care-title { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 5px; }
.lip-care-text  { font-size: 12px; color: var(--text-mid); line-height: 1.55; }

/* ── Responsive ── */
@media (max-width: 560px) {
    .lip-attrs-grid { grid-template-columns: repeat(2, 1fr); }
    .lip-tips-grid  { grid-template-columns: 1fr; }
    .lip-care-grid  { grid-template-columns: repeat(2, 1fr); }
}


/* ================================================================
   AGE DETECTOR  —  age-* classes
   ================================================================ */

/* ── Hero card ── */
.age-hero-card {
    display: flex;
    align-items: center;
    gap: 28px;
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
    animation: celeb-slideup .4s ease both;
    flex-wrap: wrap;
}

/* ── Big age number ── */
.age-hero-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.age-number-wrap {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 4px solid transparent;
    background: var(--grad) border-box, #fff padding-box;
    background-clip: padding-box, border-box;
    background-origin: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(124,58,237,.2);
    animation: age-popin .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes age-popin {
    from { transform: scale(.5); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.age-number {
    font-size: 52px;
    font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.age-number-label {
    font-size: 11px;
    color: var(--text-light);
    font-weight: 500;
    text-align: center;
}
.age-fun-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    background: var(--grad);
    color: #fff;
    text-align: center;
    max-width: 160px;
    text-align: center;
    line-height: 1.3;
}

/* ── Hero right ── */
.age-hero-right { flex: 1; min-width: 180px; }
.age-hero-era {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--cs);
    margin: 0 0 6px;
}
.age-hero-title {
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 8px;
    line-height: 1.2;
}
.age-hero-desc {
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.65;
    margin: 0;
}

/* ── Decade card ── */
.age-decade-card {
    background: linear-gradient(135deg, rgba(124,58,237,.05), rgba(219,39,119,.05));
    border: 1px solid rgba(124,58,237,.14);
    border-radius: var(--radius-md);
    padding: 22px 22px;
    animation: celeb-cardin .35s ease both;
}
.age-decade-title {
    font-size: 18px;
    font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 8px;
}
.age-decade-text {
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.7;
    margin: 0 0 16px;
}
.age-decade-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.age-decade-trait {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: rgba(124,58,237,.08);
    border: 1px solid rgba(124,58,237,.15);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cp);
}

/* ── Skin insights grid ── */
.age-skin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.age-skin-card {
    background: #ffffff;
    border: 1px solid rgba(30,41,59,.08);
    border-radius: var(--radius-sm);
    padding: 18px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: transform .2s;
    animation: celeb-cardin .35s ease both;
    position: relative;
    overflow: hidden;
}
.age-skin-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad);
}
.age-skin-card:hover { transform: translateY(-3px); }
.age-skin-icon  { font-size: 22px; margin-bottom: 8px; }
.age-skin-title { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 5px; }
.age-skin-text  { font-size: 12px; color: var(--text-mid); line-height: 1.55; }

/* ── Skincare routine list ── */
.age-routine-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.age-routine-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid rgba(30,41,59,.06);
    transition: background .18s;
    animation: celeb-cardin .35s ease both;
}
.age-routine-item:last-child { border-bottom: none; }
.age-routine-item:hover { background: rgba(124,58,237,.02); }
.age-routine-step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font);
}
.age-routine-body {}
.age-routine-title { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 3px; }
.age-routine-text  { font-size: 12px; color: var(--text-mid); line-height: 1.5; }
.age-routine-time  {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    padding: 2px 8px;
    background: rgba(124,58,237,.07);
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    color: var(--cp);
}

/* ── Lifestyle grid ── */
.age-lifestyle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.age-lifestyle-card {
    background: linear-gradient(135deg, rgba(124,58,237,.04), rgba(219,39,119,.04));
    border: 1px solid rgba(124,58,237,.12);
    border-radius: var(--radius-sm);
    padding: 18px 16px;
    transition: transform .2s, box-shadow .2s;
    animation: celeb-cardin .35s ease both;
}
.age-lifestyle-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124,58,237,.1);
}
.age-lifestyle-icon  { font-size: 26px; margin-bottom: 8px; }
.age-lifestyle-title { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 5px; }
.age-lifestyle-text  { font-size: 12px; color: var(--text-mid); line-height: 1.55; }

/* ── Responsive ── */
@media (max-width: 560px) {
    .age-hero-card       { flex-direction: column; align-items: center; text-align: center; }
    .age-skin-grid       { grid-template-columns: repeat(2, 1fr); }
    .age-lifestyle-grid  { grid-template-columns: repeat(2, 1fr); }
    .age-number          { font-size: 42px; }
    .age-number-wrap     { width: 120px; height: 120px; }
}


/* ================================================================
   NOSE SHAPE DETECTOR  —  nose-* classes
   ================================================================ */

/* Icon wrap */
.nose-icon-wrap {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(219,39,119,.08));
    border-radius: 50%;
    border: 2px solid rgba(124,58,237,.15);
}
.nose-icon-wrap svg { width: 54px; height: 54px; }

/* ── Contour list ── */
.nose-contour-list,
.nose-highlight-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nose-tip-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #ffffff;
    border: 1px solid rgba(30,41,59,.08);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    transition: transform .18s, box-shadow .18s;
    animation: celeb-cardin .35s ease both;
    position: relative;
    overflow: hidden;
}
.nose-tip-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--grad);
}
.nose-tip-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(124,58,237,.1);
}
.nose-tip-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font);
}
.nose-tip-body {}
.nose-tip-title { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.nose-tip-text  { font-size: 12px; color: var(--text-mid); line-height: 1.55; }

/* Highlight items get a gold accent */
.nose-highlight-list .nose-tip-item::before {
    background: linear-gradient(180deg, #f59e0b, #DB2777);
}
.nose-highlight-list .nose-tip-num {
    background: linear-gradient(135deg, #f59e0b, #DB2777);
}

/* ── Makeup grid ── */
.nose-makeup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}
.nose-makeup-card {
    background: linear-gradient(135deg, rgba(219,39,119,.04), rgba(124,58,237,.04));
    border: 1px solid rgba(219,39,119,.14);
    border-radius: var(--radius-sm);
    padding: 18px 16px;
    transition: transform .2s, box-shadow .2s;
    animation: celeb-cardin .35s ease both;
}
.nose-makeup-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(219,39,119,.1);
}
.nose-makeup-icon  { font-size: 24px; margin-bottom: 8px; }
.nose-makeup-title { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 5px; }
.nose-makeup-text  { font-size: 12px; color: var(--text-mid); line-height: 1.55; }

/* ── Responsive ── */
@media (max-width: 560px) {
    .nose-makeup-grid { grid-template-columns: 1fr; }
}