@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400&display=swap");

:root {
    --color-bg-primary: #101318;
    --color-bg-card: rgba(20, 24, 35, 0.6);
    --color-bg-content: rgba(16, 19, 24, 0.8);
    --color-accent: #F2BF5A;
    --color-accent-20: rgba(242, 191, 90, 0.2);
    --color-accent-30: rgba(242, 191, 90, 0.3);
    --color-text-grey: #F4F3F1;
    --color-text-grey-80: rgba(244, 243, 241, 0.90);
}

.serif {
    font-family: "Playfair Display", serif;
}

.sans {
    font-family: "Inter", sans-serif;
}

.summary-container {
    background-color: var(--color-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 150px 20px;
    position: relative;
}

/* Starry background */
.summary-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(4px 4px at 5% 10%, white, transparent),
        radial-gradient(3px 3px at 12% 25%, white, transparent),
        radial-gradient(4px 4px at 20% 30%, white, transparent),
        radial-gradient(3px 3px at 28% 15%, white, transparent),
        radial-gradient(4px 4px at 35% 45%, white, transparent),
        radial-gradient(3px 3px at 42% 60%, white, transparent),
        radial-gradient(4px 4px at 50% 50%, white, transparent),
        radial-gradient(3px 3px at 58% 35%, white, transparent),
        radial-gradient(4px 4px at 65% 70%, white, transparent),
        radial-gradient(3px 3px at 72% 20%, white, transparent),
        radial-gradient(4px 4px at 80% 10%, white, transparent),
        radial-gradient(3px 3px at 85% 55%, white, transparent),
        radial-gradient(4px 4px at 90% 40%, white, transparent),
        radial-gradient(3px 3px at 95% 75%, white, transparent),
        radial-gradient(4px 4px at 15% 50%, white, transparent),
        radial-gradient(3px 3px at 22% 65%, white, transparent),
        radial-gradient(4px 4px at 30% 80%, white, transparent),
        radial-gradient(3px 3px at 38% 25%, white, transparent),
        radial-gradient(4px 4px at 45% 90%, white, transparent),
        radial-gradient(3px 3px at 52% 5%, white, transparent),
        radial-gradient(4px 4px at 60% 70%, white, transparent),
        radial-gradient(3px 3px at 68% 85%, white, transparent),
        radial-gradient(4px 4px at 75% 60%, white, transparent),
        radial-gradient(3px 3px at 82% 30%, white, transparent),
        radial-gradient(4px 4px at 88% 95%, white, transparent),
        radial-gradient(3px 3px at 10% 80%, white, transparent),
        radial-gradient(4px 4px at 18% 5%, white, transparent),
        radial-gradient(3px 3px at 25% 15%, white, transparent),
        radial-gradient(4px 4px at 33% 60%, white, transparent),
        radial-gradient(3px 3px at 40% 40%, white, transparent),
        radial-gradient(4px 4px at 48% 75%, white, transparent),
        radial-gradient(3px 3px at 55% 80%, white, transparent),
        radial-gradient(4px 4px at 62% 15%, white, transparent),
        radial-gradient(3px 3px at 70% 50%, white, transparent),
        radial-gradient(4px 4px at 78% 90%, white, transparent),
        radial-gradient(3px 3px at 85% 65%, white, transparent),
        radial-gradient(4px 4px at 92% 25%, white, transparent),
        radial-gradient(3px 3px at 8% 45%, white, transparent),
        radial-gradient(4px 4px at 16% 70%, white, transparent),
        radial-gradient(3px 3px at 24% 35%, white, transparent);
    background-size: 200% 200%;
    background-position: 0% 0%;
    opacity: 0.7;
    animation: twinkle 20s ease-in-out infinite;
    pointer-events: none;
}

.page-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

.loader {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top: 5px solid var(--color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.border {
    border: 1px solid var(--color-accent-20) !important;
}

.bg-card {
    background-color: var(--color-bg-card);
}

.bg-content {
    background-color: var(--color-bg-content);
}

.text-accent {
    color: var(--color-accent);
}

.text-grey {
    color: var(--color-text-grey);
}

.text-grey-80 {
    color: var(--color-text-grey-80);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-accent-30 {
    background-color: var(--color-accent-30);
}

@media (max-width: 768px) and (orientation: portrait) {
.page-content {
  padding: 0 !important;
  margin: 0 !important;
}
}

/* Recommendations: inline bullet aligned via vertical-align, with a hanging
   indent so wrapped lines align under the text (not under the bullet). */
.rec-list { list-style: none; }

/* ---------- Summary action row (Download PDF + Back to Home) ---------- */
.summary-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 56px;
}

.pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 210px;
    height: 52px;
    padding: 0 28px;
    border: none;
    border-radius: 75px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    background-color: #C5A34F;
    color: #101318;
    transition: background-color 0.15s ease;
}
.pdf-btn svg { width: 18px; height: 18px; display: block; }
.pdf-btn:hover:not(:disabled) { background-color: #D8B968; }
.pdf-btn.is-generating {
    background-color: #1A1F26;
    color: #AAA7A1;
    cursor: default;
}
.pdf-btn.is-success {
    background-color: #C5A34F;
    color: #101318;
    cursor: default;
}
.pdf-btn .pdf-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(170,167,161,0.35);
    border-top-color: #AAA7A1;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.back-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    height: 52px;
    padding: 0 28px;
    border: 1px solid var(--color-accent);
    border-radius: 75px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--color-accent);
    text-decoration: none;
}

/* ---------- Off-screen PDF report layout ---------- */
#pdf-root {
    position: fixed;
    left: -12000px;
    top: 0;
    z-index: -1;
}
.pdf-page {
    width: 794px;
    height: 1123px;
    background-color: #101318;
    color: #F4F3F1;
    box-sizing: border-box;
    padding: 56px 64px;
    position: relative;
    font-family: "Inter", sans-serif;
    overflow: hidden;
}
.pdf-page .serif { font-family: "Playfair Display", serif; }
.pdf-accent { color: #C5A34F; }
.pdf-muted { color: rgba(244,243,241,0.55); }
.pdf-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; letter-spacing: 3px; color: rgba(244,243,241,0.5);
    text-transform: uppercase; padding-bottom: 14px;
    border-bottom: 1px solid rgba(197,163,79,0.35);
}
.pdf-foot {
    position: absolute; left: 64px; right: 64px; bottom: 40px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; color: rgba(244,243,241,0.4); letter-spacing: 1px;
}
.pdf-card {
    background-color: rgba(20,24,35,0.6);
    border: 1px solid rgba(197,163,79,0.22);
    border-radius: 16px;
}
/* Equal-height box; the inner table-cell handles vertical centring
   (table-cell + vertical-align:middle is the centring html2canvas renders
   most reliably — flex main-axis centring is not). */
.pdf-stat {
    flex: 1;
    background-color: rgba(20,24,35,0.6);
    border: 1px solid rgba(197,163,79,0.22);
    border-radius: 14px;
}
.pdf-stat-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 18px 10px;
}
.pdf-trait-bar-track {
    height: 6px; border-radius: 3px; background-color: rgba(244,243,241,0.12);
    overflow: hidden; margin: 12px 0 10px;
}
.pdf-trait-bar-fill { height: 100%; background-color: #C5A34F; border-radius: 3px; }
.pdf-quadrant {
    position: relative; width: 100%; height: 300px;
    border: 1px solid rgba(197,163,79,0.22); border-radius: 16px;
    background-color: rgba(20,24,35,0.4);
}
.pdf-quadrant .axis-v { position: absolute; left: 50%; top: 8%; bottom: 8%; width: 1px; background: rgba(197,163,79,0.35); }
.pdf-quadrant .axis-h { position: absolute; top: 50%; left: 8%; right: 8%; height: 1px; background: rgba(197,163,79,0.35); }
.pdf-quadrant .corner { position: absolute; font-size: 12px; color: rgba(244,243,241,0.6); }
.pdf-quadrant .you-dot {
    position: absolute; width: 16px; height: 16px; border-radius: 50%;
    background: #C5A34F; transform: translate(-50%, 50%);
    box-shadow: 0 0 0 4px rgba(197,163,79,0.25);
}
.pdf-quadrant .you-label { position: absolute; font-size: 12px; color: #C5A34F; transform: translate(10px, 40%); }