/* Annotation: Root CSS variables — modern minimalist theme */
:root {
    --bg: #f8f9fa;
    --bg-dark: #e9ecef;
    --surface: #ffffff;
    --primary: #4361ee;
    --primary-dark: #3651d4;
    --primary-light: #6b83f2;
    --accent: #f72585;
    --accent-light: #ff5ca1;
    --dark: #1a1a2e;
    --dark-light: #2d2d44;
    --text: #2b2d42;
    --text-light: #555770;
    --text-muted: #8d99ae;
    --white: #ffffff;
    --success: #06d6a0;
    --danger: #ef476f;
    --warning: #ffd166;
    --gift-color: #7209b7;
    --disc-color: #4361ee;
    --serve-color: #06d6a0;
    --shadow: rgba(0, 0, 0, 0.06);
    --shadow-md: rgba(0, 0, 0, 0.1);
    --shadow-lg: rgba(0, 0, 0, 0.15);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --transition: 0.25s ease;
}

/* Annotation: Reset and base styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--text);
    background-color: var(--bg);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* =============================================
   LANDING / HUB PAGE
   ============================================= */

/* Annotation: Full-screen hero with gradient */
.landing {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem 2rem;
    background: linear-gradient(135deg, var(--dark) 0%, #16213e 50%, var(--primary-dark) 100%);
    color: var(--white);
}

.landing h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    letter-spacing: -0.5px;
}

.landing h1 .highlight {
    background: linear-gradient(135deg, var(--accent), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing .subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
    max-width: 550px;
    line-height: 1.7;
    font-weight: 300;
}

.landing .meta {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 1.5rem;
}

/* Annotation: Reset buttons section on hub */
.hub-resets {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem 1.5rem;
    text-align: center;
}

.hub-resets-title {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.hub-resets-row {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-reset-item {
    background: var(--surface);
    border: 1.5px solid var(--bg-dark);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-reset-item:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(239, 71, 111, 0.05);
}

.btn-reset-all {
    background: none;
    border: 1.5px solid var(--danger);
    color: var(--danger);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-reset-all:hover {
    background: var(--danger);
    color: var(--white);
}

/* Annotation: Context/about section on hub */
.hub-context {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem 1rem;
}

.context-block {
    margin-bottom: 2rem;
}

.context-block h2 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 0.75rem;
}

.context-block p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

.context-highlight {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 10px var(--shadow);
}

/* Annotation: Steps with numbered circles */
.context-steps {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1rem;
}

.context-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.step-number {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.context-step > div {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-light);
}

.context-step > div strong {
    color: var(--dark);
}

/* Annotation: Gifts grid — 16 gifts in pills */
.gifts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.gifts-grid span {
    background: rgba(114, 9, 183, 0.07);
    color: var(--gift-color);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    border: 1px solid rgba(114, 9, 183, 0.15);
}

/* Annotation: DISC types grid — 4 type cards */
.disc-types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.disc-type-card {
    border: 1px solid var(--bg-dark);
    border-radius: var(--radius-sm);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.disc-type-card strong {
    font-size: 1rem;
}

.disc-type-card span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.disc-type-card em {
    font-size: 0.85rem;
    color: var(--text-light);
    font-style: normal;
}

.disc-type-card small {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

@media (max-width: 479px) {
    .disc-types-grid {
        grid-template-columns: 1fr;
    }
    /* Annotation: Stack two-column grids on mobile for DISC results */
    .result-section div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Annotation: Hub cards container */
.hub-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 900px;
    width: 100%;
    padding: 0 1.5rem;
    margin: -2rem auto 2rem;
    position: relative;
    z-index: 10;
}

/* Annotation: Individual instrument card */
.hub-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: 0 4px 20px var(--shadow-md);
    transition: all var(--transition);
    text-decoration: none;
    color: var(--text);
    display: block;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px var(--shadow-lg);
}




.hub-card.card-daruri:hover { border-color: var(--gift-color); }


.hub-card.card-disc:hover { border-color: var(--disc-color); }


.hub-card.card-slujire:hover { border-color: var(--serve-color); }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.card-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.card-daruri .card-icon { background: rgba(114, 9, 183, 0.1); color: var(--gift-color); }
.card-disc .card-icon { background: rgba(67, 97, 238, 0.1); color: var(--disc-color); }
.card-slujire .card-icon { background: rgba(6, 214, 160, 0.1); color: var(--serve-color); }

.card-status {
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
}

.card-status.incomplete {
    background: var(--bg);
    color: var(--text-muted);
}

.card-status.complete {
    background: rgba(6, 214, 160, 0.1);
    color: var(--success);
}

.hub-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.hub-card p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.card-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Annotation: Combined result CTA button */
.hub-cta {
    text-align: center;
    padding: 0 1.5rem 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.btn-cta {
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
}

.btn-cta:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
}

.btn-cta:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* =============================================
   QUIZ PAGE — SHARED STYLES
   ============================================= */

/* Annotation: Fixed progress bar at top */
.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--dark);
    padding: 0;
}

.progress-bar-wrapper {
    height: 6px;
    background: var(--dark-light);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.4s ease;
    width: 0%;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Annotation: Reset button inside progress bar */
.progress-reset-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.6);
    font-family: inherit;
    font-size: 0.75rem;
    padding: 0.2rem 0.7rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition);
}

.progress-reset-btn:hover {
    background: rgba(239, 71, 111, 0.3);
    border-color: var(--danger);
    color: var(--white);
}

/* Annotation: Quiz body container */
.quiz-body {
    max-width: 700px;
    margin: 0 auto;
    padding: 4rem 1.5rem 3rem;
}

.quiz-header {
    text-align: center;
    margin-bottom: 2rem;
}

.quiz-header h1 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.quiz-header p {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Annotation: Instructions toggle button */
.btn-instructions-toggle {
    background: none;
    border: 1.5px solid var(--primary-light);
    color: var(--primary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--transition);
    margin-top: 0.75rem;
}

.btn-instructions-toggle:hover {
    background: var(--primary);
    color: var(--white);
}

/* Annotation: Collapsible instructions panel */
.instructions-panel {
    background: var(--surface);
    border: 1px solid var(--bg-dark);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    display: none;
}

.instructions-panel.show {
    display: block;
}

.instructions-panel h3 {
    font-size: 1rem;
    color: var(--primary-dark);
    margin-bottom: 0.75rem;
}

.instructions-panel ul {
    padding-left: 1.25rem;
}

.instructions-panel li {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 0.4rem;
}

/* Annotation: Instructions shown by default (for DISC intro) */
.instructions-centered {
    max-width: 500px;
    margin: 5rem auto 2rem;
    padding: 2rem;
    display: block;
    position: relative;
    z-index: 10;
}

.instructions-centered.hidden {
    display: none !important;
}

/* Annotation: Likert scale legend */
.scale-legend {
    display: flex;
    justify-content: space-between;
    max-width: 480px;
    margin: 0 auto 2rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 1rem 1.5rem;
    gap: 1rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px var(--shadow);
    position: sticky;
    top: 52px;
    z-index: 50;
}

.scale-legend span {
    text-align: center;
    line-height: 1.4;
}

/* Annotation: Single question item (for scroll layout) */
.question-item {
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 4px var(--shadow);
    transition: all var(--transition);
    border: 2px solid transparent;
}

.question-item:hover {
    box-shadow: 0 2px 8px var(--shadow-md);
}

.question-item.answered {
    border-color: rgba(6, 214, 160, 0.3);
    background: rgba(6, 214, 160, 0.02);
}

.question-item.highlighted {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

.question-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.question-number {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 32px;
}

.question-text-inline {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Annotation: Likert radio buttons — 5 options inline */
.likert-group {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.likert-btn {
    width: 40px;
    height: 40px;
    border: 2px solid var(--bg-dark);
    border-radius: 50%;
    background: var(--surface);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.likert-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(67, 97, 238, 0.05);
}

.likert-btn.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* Annotation: Tooltip on likert buttons — shows on hover/long press */
.has-tooltip {
    position: relative;
}

.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: var(--dark);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 60;
}

.has-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--dark);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 60;
}

.has-tooltip:hover::after,
.has-tooltip:hover::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Annotation: Rightmost button — tooltip anchored to its right edge so it never sticks out of a phone screen */
.likert-group .has-tooltip:last-child::after {
    left: auto;
    right: 0;
    transform: scale(0.9);
    transform-origin: bottom right;
}

.likert-group .has-tooltip:last-child:hover::after { transform: scale(1); }

/* Annotation: Slujire E/I/P buttons — tooltip appears instantly; P anchored right so it stays on screen */
.check-btn.has-tooltip::after,
.check-btn.has-tooltip::before { transition: none; }

.checklist-checks .has-tooltip:last-child::after {
    left: auto;
    right: 0;
    transform: none;
}

.checklist-checks .has-tooltip:last-child:hover::after { transform: none; }

/* Annotation: Submit button for quiz */
.quiz-submit {
    text-align: center;
    padding: 2rem 0;
}

.quiz-submit .btn-cta {
    width: 100%;
    max-width: 400px;
}

.quiz-submit .btn-cta:disabled {
    background: var(--bg-dark);
    color: var(--text-muted);
}

/* =============================================
   DISC QUIZ — FORCED CHOICE
   ============================================= */

/* Annotation: DISC question card — centered, one group at a time */
.disc-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem 2rem;
    background: var(--bg);
}

.disc-card {
    max-width: 500px;
    width: 100%;
    text-align: center;
    position: relative;
}

.disc-group-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.disc-words {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.disc-word-btn {
    padding: 1rem 1.5rem;
    background: var(--surface);
    border: 2px solid var(--bg-dark);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1.05rem;
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.disc-word-btn:hover {
    border-color: var(--primary-light);
    background: rgba(67, 97, 238, 0.03);
}

.disc-word-btn.selected-m {
    border-color: var(--success);
    background: rgba(6, 214, 160, 0.08);
}

.disc-word-btn.selected-m::after {
    content: 'M';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--success);
    background: rgba(6, 214, 160, 0.15);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.disc-word-btn.selected-p {
    border-color: var(--danger);
    background: rgba(239, 71, 111, 0.05);
}

.disc-word-btn.selected-p::after {
    content: 'P';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--danger);
    background: rgba(239, 71, 111, 0.12);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.disc-legend {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.disc-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.disc-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.disc-legend-dot.m { background: var(--success); }
.disc-legend-dot.p { background: var(--danger); }

/* Annotation: Navigation buttons for DISC */
.disc-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    gap: 1rem;
}

.btn-nav {
    padding: 0.7rem 1.5rem;
    border: 2px solid var(--bg-dark);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition);
}

.btn-nav:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-nav.btn-next {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.btn-nav.btn-next:hover {
    background: var(--primary-dark);
}

/* Annotation: DISC intro — full screen start page */
.disc-intro {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
    background: var(--bg);
}

.disc-intro-content {
    max-width: 440px;
    text-align: center;
}

.disc-intro-content h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 1rem;
}

.disc-intro-content > p {
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 1.25rem;
}

.disc-intro-legend {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.disc-intro-badge {
    border: 2px solid;
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
}

.disc-intro-tips {
    text-align: left;
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.disc-intro-tips li {
    font-size: 0.9rem;
    color: var(--text-light);
    padding: 0.3rem 0 0.3rem 1.25rem;
    position: relative;
}

.disc-intro-tips li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
}

/* Annotation: Info button in DISC quiz */
.disc-info-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--primary-light);
    background: none;
    color: var(--primary);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.disc-info-btn:hover {
    background: var(--primary);
    color: var(--white);
}

/* Annotation: CSS slide transitions */
.disc-card.slide-out-left {
    animation: slideOutLeft 0.3s ease forwards;
}

.disc-card.slide-in-right {
    animation: slideInRight 0.3s ease forwards;
}

.disc-card.slide-out-right {
    animation: slideOutRight 0.3s ease forwards;
}

.disc-card.slide-in-left {
    animation: slideInLeft 0.3s ease forwards;
}

@keyframes slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-60px); opacity: 0; }
}

@keyframes slideInRight {
    from { transform: translateX(60px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(60px); opacity: 0; }
}

@keyframes slideInLeft {
    from { transform: translateX(-60px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* =============================================
   SLUJIRE CHECKLIST
   ============================================= */

/* Annotation: Search/filter bar */
.search-bar {
    position: sticky;
    top: 52px;
    z-index: 50;
    padding: 0.75rem 0;
    background: var(--bg);
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 2px solid var(--bg-dark);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--surface);
    transition: border-color var(--transition);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Annotation: Checklist item */
.checklist-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-radius: var(--radius-xs);
    margin-bottom: 0.5rem;
    transition: all var(--transition);
}

.checklist-item:hover {
    background: rgba(67, 97, 238, 0.02);
}

.checklist-label {
    flex: 1;
    font-size: 0.9rem;
}

.checklist-checks {
    display: flex;
    gap: 0.5rem;
}

.check-btn {
    width: 36px;
    height: 36px;
    border: 2px solid var(--bg-dark);
    border-radius: var(--radius-xs);
    background: var(--surface);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

.check-btn:hover {
    border-color: var(--primary-light);
}

.check-btn.active-e {
    background: rgba(67, 97, 238, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.check-btn.active-i {
    background: rgba(255, 209, 102, 0.2);
    border-color: var(--warning);
    color: #b8860b;
}

.check-btn.active-p {
    background: rgba(247, 37, 133, 0.1);
    border-color: var(--accent);
    color: var(--accent);
}

/* Annotation: Slujire — categories as one grouped list with icon tiles */
.cat-list {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 1px 4px var(--shadow);
    overflow: hidden;
}

.cat-block {
    --cat: var(--serve-color);
    --cat-tint: color-mix(in srgb, var(--cat) 10%, transparent);
}

.cat-block + .cat-block {
    border-top: 1px solid var(--bg-dark);
}

.cat-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background var(--transition);
}

.cat-header:hover {
    background: color-mix(in srgb, var(--cat) 4%, transparent);
}

.cat-block.is-open .cat-header {
    background: color-mix(in srgb, var(--cat) 6%, transparent);
}

.cat-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cat-tint);
    color: var(--cat);
}

.cat-icon svg,
.cat-chevron svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cat-header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.cat-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
}

.cat-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cat-badge {
    flex: none;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(6, 214, 160, 0.12);
    color: #059669;
    white-space: nowrap;
}

.cat-chevron {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: var(--bg);
    transition: transform var(--transition), background var(--transition), color var(--transition);
}

.cat-chevron svg {
    width: 16px;
    height: 16px;
}

.cat-block.is-open .cat-chevron {
    background: var(--cat-tint);
    color: var(--cat);
}

.cat-chevron.open {
    transform: rotate(180deg);
}

.cat-items {
    padding: 0.5rem 0.75rem 0.75rem 1rem;
}

.cat-items .checklist-item {
    margin-bottom: 0.25rem;
    padding: 0.5rem 0.75rem;
}

@media (max-width: 480px) {
    .cat-header { gap: 0.65rem; padding: 0.75rem 0.8rem; }
    .cat-icon { width: 36px; height: 36px; }
    .cat-items { padding: 0.4rem 0.5rem 0.6rem; }
}

.checklist-label-top {
    color: var(--serve-color);
    font-weight: 600;
}

/* =============================================
   RESULT PAGE
   ============================================= */

/* Annotation: Result page container */
.result-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* Annotation: Result header card */
.result-header {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: linear-gradient(135deg, var(--dark) 0%, var(--primary-dark) 100%);
    color: var(--white);
    border-radius: var(--radius);
    margin-bottom: 2rem;
    box-shadow: 0 8px 30px var(--shadow-lg);
}

.result-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.result-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.result-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Annotation: Result section card */
.result-section {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px var(--shadow);
}

.result-section h3 {
    font-size: 1.1rem;
    color: var(--dark);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bg-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.result-section h3 .section-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.section-dot.dot-daruri { background: var(--gift-color); }
.section-dot.dot-disc { background: var(--disc-color); }
.section-dot.dot-slujire { background: var(--serve-color); }
.section-dot.dot-combined { background: var(--accent); }

/* Annotation: Gift bar chart */
.gift-bar {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.gift-bar-label {
    width: 200px;
    min-width: 200px;
    text-align: right;
    padding-right: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-light);
    white-space: normal;
    line-height: 1.3;
}

.gift-bar-track {
    flex: 1;
    height: 24px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.gift-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
    background: var(--gift-color);
    opacity: 0.7;
}

.gift-bar-fill.top3 {
    opacity: 1;
    background: linear-gradient(90deg, var(--gift-color), var(--accent));
}

.gift-bar-value {
    width: 40px;
    text-align: center;
    padding-left: 0.5rem;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Annotation: Gift detail card */
.gift-detail {
    background: var(--bg);
    border-radius: 0;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.gift-detail h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--gift-color);
}

.gift-detail p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.gift-detail .gift-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.gift-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    background: rgba(114, 9, 183, 0.08);
    color: var(--gift-color);
    font-weight: 600;
}

/* Annotation: DISC result bars */
.disc-result-group {
    margin-bottom: 1.5rem;
}

.disc-result-group h4 {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

.disc-bar {
    display: flex;
    align-items: center;
    margin-bottom: 0.4rem;
}

.disc-bar-letter {
    width: 30px;
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
}

.disc-bar-track {
    flex: 1;
    height: 20px;
    background: var(--bg);
    border-radius: 4px;
    overflow: visible;
    margin: 0 0.5rem;
    position: relative;
}

.disc-bar-value {
    width: 30px;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Annotation: Combination description card */
.combo-card {
    background: linear-gradient(135deg, rgba(114, 9, 183, 0.03), rgba(67, 97, 238, 0.03));
    border: 1px solid var(--bg-dark);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.combo-card h4 {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    color: var(--primary-dark);
}

.combo-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-light);
}

/* =============================================
   BUTTONS — ACTION ROW
   ============================================= */

.actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.btn {
    flex: 1;
    min-width: 140px;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    font-weight: 700;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.4);
}

.btn-outline {
    background: var(--surface);
    color: var(--text);
    border: 2px solid var(--bg-dark);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

/* =============================================
   MODAL
   ============================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    padding: 1rem;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-dialog {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 2rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 10px 40px var(--shadow-lg);
}

.modal-dialog h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
}

.modal-actions .btn {
    flex: 1;
}

/* =============================================
   APP MODAL (alert/confirm/error/success)
   ============================================= */

.app-modal-dialog {
    transform: translateY(8px) scale(0.97);
    opacity: 0;
    transition: transform var(--transition), opacity var(--transition);
    text-align: center;
    outline: none;
}

.app-modal.active .app-modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.app-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.app-modal-icon-warn    { background: linear-gradient(135deg, #f59e0b, #d97706); }
.app-modal-icon-error   { background: linear-gradient(135deg, #ef4444, #dc2626); }
.app-modal-icon-success { background: linear-gradient(135deg, #10b981, #059669); }
.app-modal-icon-info    { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.app-modal-icon-question{ background: linear-gradient(135deg, #8b5cf6, #6d28d9); }

.app-modal-title {
    text-align: center;
    margin-bottom: 0.5rem;
}

.app-modal-message {
    text-align: center;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 1.25rem;
    white-space: pre-line;
}

/* =============================================
   LOADING OVERLAY
   ============================================= */

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 200;
    color: var(--white);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.loading-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1.5rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

/* =============================================
   UTILITIES
   ============================================= */

.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }

/* =============================================
   RESPONSIVE
   ============================================= */

@media (min-width: 480px) {
    .landing h1 { font-size: 2.5rem; }
    .hub-cards { padding: 0 2rem; }
    .result-title { font-size: 2.2rem; }
}

@media (min-width: 768px) {
    .landing h1 { font-size: 3rem; }
    .hub-cards {
        grid-template-columns: repeat(3, 1fr);
        padding: 0 2rem;
    }
    .result-section { padding: 2rem; }
    .actions-row { flex-wrap: nowrap; }
    .question-row { gap: 1.5rem; }
}

/* =============================================
   PRINT STYLES
   ============================================= */

@media print {
    .progress-container,
    .actions-row,
    .modal-overlay,
    .loading-overlay,
    .quiz-submit {
        display: none !important;
    }
    .result-page { padding: 0; }
    .result-header {
        color: #000;
        background: #f0f0f0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* =============================================
   UX FIXES — progress bar, mobile questions, DISC hint, slujire
   ============================================= */

/* Annotation: Progress bar — status text on the left, all controls grouped on the right */
.progress-info {
    gap: 0.5rem;
}

.progress-info > :first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.progress-reset-btn {
    text-decoration: none;
}

a.progress-reset-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Annotation: DISC word buttons — keep text clear of the M/P badge */
.disc-word-btn {
    padding-left: 2.75rem;
    padding-right: 2.75rem;
}

/* Annotation: DISC step hint — tells the user which choice comes next */
.disc-step-hint {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin: -0.75rem 0 1.25rem;
    min-height: 1.4em;
}

.disc-step-hint .hint-m { color: var(--success); }
.disc-step-hint .hint-p { color: var(--danger); }

/* Annotation: Slujire — search icon, larger category chevron, top-selection hint */
.search-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.85rem center;
}

.top-hint {
    font-size: 0.85rem;
    color: var(--text-light);
    background: rgba(6, 214, 160, 0.08);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.75rem;
    display: grid;
    gap: 0.65rem;
}

/* Annotation: One numbered step inside the slujire how-to hint */
.top-hint-step {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}

.top-hint-step p { margin: 0; line-height: 1.55; }
.top-hint-step strong { color: var(--text); }

.top-hint-num {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--serve-color);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.top-hint-opt {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.hint-key {
    display: inline-block;
    min-width: 1.4rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.05rem 0.3rem;
    border: 1.5px solid var(--bg-dark);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text-light);
}

.hint-star { color: var(--serve-color); }

/* Annotation: Gift ties note on the results page */
.tie-note {
    font-size: 0.85rem;
    color: var(--text-light);
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    margin-top: 0.75rem;
}

/* Annotation: Phones — question text above a full-width 1-5 row; narrower gift labels */
@media (max-width: 599px) {
    .question-item {
        padding: 1rem;
    }
    .question-row {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }
    .question-number {
        min-width: 0;
    }
    .question-text-inline {
        flex: 1 1 calc(100% - 3rem);
    }
    .likert-group {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }
    .likert-btn {
        width: 44px;
        height: 44px;
    }
    .scale-legend {
        font-size: 0.7rem;
        padding: 0.6rem 0.75rem;
        gap: 0.25rem;
    }
    .gift-bar-label {
        width: 120px;
        min-width: 120px;
        font-size: 0.75rem;
    }
    .disc-body {
        justify-content: flex-start;
        padding-top: 5rem;
    }
    .progress-info {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* Annotation: Hub — readable disabled CTA */
.btn-cta:disabled,
.btn-cta[disabled] {
    opacity: 0.6;
}

/* Annotation: Intro legend wraps on narrow screens instead of overflowing */
.disc-intro-legend {
    flex-wrap: wrap;
}

.disc-intro-content {
    min-width: 0;
    width: 100%;
}

@media (max-width: 599px) {
    .disc-intro-legend {
        gap: 0.5rem;
    }
    .disc-intro-badge {
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
        flex: 1 1 28%;
    }
}

/* Annotation: Hub cards — flex column so the action footer sits at the bottom of every card */
.hub-card {
    display: flex;
    flex-direction: column;
}

.card-daruri { --card-color: var(--gift-color); --card-tint: rgba(114, 9, 183, 0.08); }
.card-disc { --card-color: var(--disc-color); --card-tint: rgba(67, 97, 238, 0.08); }
.card-slujire { --card-color: var(--serve-color); --card-tint: rgba(6, 214, 160, 0.1); }

/* Annotation: Card footer with the primary action and an optional secondary one */
.card-actions {
    margin-top: auto;
    padding-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.card-btn {
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.card-btn-primary {
    flex: 1 1 100%;
    text-align: center;
    padding: 0.7rem 1rem;
    color: var(--card-color);
    background: var(--card-tint);
    border: 1.5px solid transparent;
}

.card-btn-primary:hover {
    background: var(--card-color);
    color: var(--white);
}

.card-btn-secondary {
    flex: 1 1 100%;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 0.15rem 0;
}

.card-btn-secondary:hover {
    color: var(--card-color);
    text-decoration: underline;
}

.card-status.in-progress {
    background: rgba(255, 183, 3, 0.15);
    color: #b7791f;
}

.card-meta {
    display: block;
}

/* Annotation: Cards are no longer links themselves — no lift on hover, only the buttons react */
.hub-card:hover {
    transform: none;
    box-shadow: 0 4px 20px var(--shadow-md);
}

/* Annotation: Side-by-side cards keep the secondary link's space so the primary buttons line up */
@media (min-width: 768px) {
    .card-actions .card-btn-secondary.hidden {
        display: block !important;
        visibility: hidden;
    }
}

/* Annotation: Disclaimer box (text from PDF page 7) */
.notice-box {
    max-width: 900px;
    margin: 1.5rem auto;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(255, 183, 3, 0.35);
    background: rgba(255, 183, 3, 0.08);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-light);
}

.disc-intro-tips .intro-note {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Annotation: "Pe scurt" summary on the combined results page */
.result-summary {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px var(--shadow);
}

.summary-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--dark);
}

.summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.summary-card {
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    border: 1px solid var(--bg-dark);
    background: var(--bg);
    display: flex;
    flex-direction: column;
}


.summary-card-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.summary-list {
    padding-left: 1.2rem;
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    line-height: 1.7;
}

.summary-score {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.summary-note {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.summary-disc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    margin-bottom: 0.6rem;
}

.summary-disc-label {
    flex: 1 1 100%;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.summary-disc-code {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--disc-color);
    text-decoration: none;
}

.summary-disc-name {
    font-size: 0.85rem;
    color: var(--text-light);
}

.summary-link {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.summary-link:hover { text-decoration: underline; }

.summary-intro {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-light);
}

.summary-intro a { color: var(--primary); font-weight: 600; }

@media (min-width: 768px) {
    .summary-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* Annotation: Collapsible result sections (combined view) — the h3 is the toggle */
.result-section.collapsible > h3 {
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.result-section.collapsible.open > h3 {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bg-dark);
}

.section-chevron {
    margin-left: auto;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--text-muted);
    transition: transform var(--transition);
}

.result-section.collapsible.open .section-chevron {
    transform: rotate(180deg);
}

.result-section.collapsible > .section-body {
    display: none;
}

.result-section.collapsible.open > .section-body {
    display: block;
}

.result-section { scroll-margin-top: 1rem; }

@media print {
    .result-section.collapsible > .section-body { display: block !important; }
    .section-chevron, .summary-link { display: none !important; }
}

/* Annotation: Hint under the PDF button */
.pdf-hint {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: -0.5rem 0 1rem;
}

/* Annotation: Print / "Salvează ca PDF" layout — clean white pages, colors kept, no screen-only controls */
@media print {
    @page { margin: 14mm 12mm; }
    body { background: #fff !important; }
    .result-page { max-width: none; padding: 0 !important; }
    .pdf-hint, .summary-intro, .actions-row, #emptyState { display: none !important; }
    .result-section, .result-summary, .notice-box {
        box-shadow: none !important;
        border: 1px solid #e5e7eb;
    }
    .result-section { break-inside: auto; }
    .result-section > h3, .summary-card, .gift-bar, .notice-box { break-inside: avoid; }
    .result-section.collapsible > h3 { border-bottom: 2px solid #e5e7eb; padding-bottom: 0.5rem; margin-bottom: 1rem; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .summary-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Annotation: Print — readable header text on the light print background; secondary combos shown, toggle hidden */
@media print {
    .result-header, .result-header * { color: #111 !important; }
    #secondaryCombos [onclick] { display: none !important; }
    #secondaryComboCards { display: block !important; }
}

/* =============================================
   HOME PAGE — clean, light redesign (body.home)
   ============================================= */

/* Annotation: White page, calmer type — overrides the old dark hero hub */
body.home {
    background: var(--surface);
    color: var(--text);
}

.home-header,
.home-main {
    max-width: 760px;
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.home-header {
    padding-top: 4rem;
    padding-bottom: 2rem;
}

.home-eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.home-header h1 {
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--dark);
    margin-bottom: 1rem;
}

.home-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-light);
    max-width: 62ch;
    margin-bottom: 0.75rem;
}

.home-facts {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Annotation: Three-step progress indicator under the intro */
.home-progress {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bg-dark);
}

.home-steps {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 0;
}

.home-steps li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
}

.home-steps li + li::before {
    content: '';
    width: 2rem;
    height: 2px;
    margin: 0 0.6rem;
    background: var(--bg-dark);
    border-radius: 1px;
}

.step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-dark);
    background: var(--surface);
    flex-shrink: 0;
}

.home-steps li.active { color: var(--text); }
.home-steps li.active .step-dot { border-color: #d69e2e; background: #fdf3dc; }
.home-steps li.done { color: var(--text); }
.home-steps li.done .step-dot { border-color: var(--success); background: var(--success); }

.home-progress-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-left: auto;
}

/* Annotation: Tests shown as rows inside one bordered list */
.test-list {
    border: 1px solid var(--bg-dark);
    border-radius: var(--radius);
    overflow: hidden;
}

.test-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--surface);
    transition: background var(--transition);
}

.test-row + .test-row {
    border-top: 1px solid var(--bg-dark);
}

.test-row:hover {
    background: #fbfbfc;
}

.test-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: var(--c);
    background: var(--c-tint);
    align-self: start;
}

.test-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    margin-bottom: 0.3rem;
}

.test-title-row h3 {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--dark);
}

.test-body p {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-light);
    margin-bottom: 0.35rem;
}

.test-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

body.home .card-status {
    font-size: 0.7rem;
    padding: 0.15rem 0.6rem;
}

body.home .card-status.complete {
    color: #047857;
}

.test-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

body.home .card-btn-primary {
    flex: none;
    white-space: nowrap;
    padding: 0.6rem 1.1rem;
    color: var(--white);
    background: var(--c);
    border: none;
}

body.home .card-btn-primary:hover {
    filter: brightness(0.92);
    background: var(--c);
    color: var(--white);
}

body.home .card-btn-secondary {
    flex: none;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
}

body.home .card-btn-secondary:hover {
    color: var(--c);
    text-decoration: underline;
}

/* Annotation: Combined result button — dark, flat, full width of the content column */
body.home .hub-cta {
    max-width: none;
    padding: 1.5rem 0 0;
    text-align: center;
}

body.home .btn-cta {
    display: block;
    width: 100%;
    background: var(--dark);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    padding: 0.95rem 1.5rem;
    box-shadow: none;
}

body.home .btn-cta:hover {
    background: var(--dark-light);
    transform: none;
    box-shadow: none;
}

.hub-cta-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.6rem;
}

/* Annotation: Reset controls as a quiet inline row of text buttons */
body.home .hub-resets {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 1rem 0 0;
    font-size: 0.8rem;
}

body.home .hub-resets-title {
    margin: 0;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
}

body.home .btn-reset-item,
body.home .btn-reset-all {
    background: none;
    border: none;
    padding: 0.25rem 0.1rem;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.home .btn-reset-item:hover,
body.home .btn-reset-all:hover {
    background: none;
    color: var(--danger);
}

/* Annotation: About texts as an accordion of <details> items */
body.home .hub-context {
    max-width: none;
    padding: 4rem 0 4rem;
}

.about-title {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.about-item {
    border-bottom: 1px solid var(--bg-dark);
}

.about-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark);
}

.about-item summary::-webkit-details-marker { display: none; }

.about-item summary::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1;
}

.about-item[open] summary::after { content: '−'; }

.about-item summary:hover { color: var(--primary); }

.about-body {
    padding-bottom: 1.5rem;
}

.about-body p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

body.home .notice-box {
    margin: 2rem 0 0;
}

/* Annotation: Mobile — stack the row: icon+text, then full-width button */
@media (max-width: 599px) {
    .home-header { padding-top: 2.5rem; }
    .home-progress-text { margin-left: 0; }
    .test-row {
        grid-template-columns: auto 1fr;
        gap: 1rem;
        padding: 1.25rem;
    }
    .test-actions {
        grid-column: 1 / -1;
        align-items: stretch;
        text-align: center;
    }
    body.home .card-btn-primary { text-align: center; padding: 0.75rem 1rem; }
}

/* Annotation: Combined result button while fewer than 2 tests are done — quiet, not clickable */
body.home .btn-cta.is-disabled {
    pointer-events: none;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px dashed var(--bg-dark);
}

/* Annotation: Lighter DISC type cards inside the home accordion */
body.home .disc-type-card {
    border-width: 1px;
    box-shadow: none;
}

/* =============================================
   RESULTS PAGE — clean, light redesign (body.results)
   ============================================= */

/* Annotation: White page and a narrower reading column, matching the home page */
body.results {
    background: var(--surface);
}

body.results .result-page {
    max-width: 760px;
    padding: 1.5rem 1.25rem 4rem;
}

.result-back {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 1.5rem;
}

.result-back:hover { color: var(--primary); }

/* Annotation: Plain text header instead of the dark gradient banner */
body.results .result-header {
    text-align: left;
    background: none;
    color: var(--text);
    padding: 0 0 1.75rem;
    margin-bottom: 2rem;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--bg-dark);
}

body.results .result-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

body.results .result-title {
    font-size: clamp(1.9rem, 5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--dark);
}

body.results .result-subtitle {
    color: var(--text-light);
}

/* Annotation: Sections are bordered blocks; in a single-test view the section is borderless and its title hidden */
body.results .result-section {
    border: 1px solid var(--bg-dark);
    box-shadow: none;
}

body.results .result-section.single {
    border: none;
    padding: 0;
}

body.results .result-section.single > h3 { display: none; }

.result-subhead {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 2.5rem 0 1rem;
}

.result-subhead span { font-weight: 500; }

/* Annotation: Top 3 gifts as three cards */
.gift-podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.podium-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.25rem;
    border: 1px solid var(--bg-dark);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    transition: border-color var(--transition), background var(--transition);
}

.podium-card:first-child {
    background: rgba(114, 9, 183, 0.05);
    border-color: rgba(114, 9, 183, 0.25);
}

.podium-card:hover { border-color: var(--gift-color); }

.podium-rank {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--white);
    background: var(--gift-color);
    margin-bottom: 0.6rem;
}

.podium-name {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--dark);
    line-height: 1.3;
}

.podium-keyword {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.podium-score {
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gift-color);
}

.podium-score small {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
}

body.results .tie-note {
    margin-top: 1rem;
}

/* Annotation: Ranking chart — thin bars, color shows the level, name left-aligned */
body.results .gift-bar {
    display: grid;
    grid-template-columns: 210px 1fr 2.5rem;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

body.results .gift-bar-label {
    width: auto;
    min-width: 0;
    text-align: left;
    padding: 0;
    font-size: 0.85rem;
    color: var(--text-light);
}

body.results .gift-bar.top3 .gift-bar-label {
    color: var(--dark);
    font-weight: 600;
}

body.results .gift-bar-track {
    height: 10px;
    border-radius: 5px;
    background: var(--bg);
}

body.results .gift-bar-fill {
    border-radius: 5px;
    opacity: 1;
    background: #ddd6e8;
}

body.results .gift-bar.strong .gift-bar-fill { background: #b58bd6; }
body.results .gift-bar.top3 .gift-bar-fill { background: var(--gift-color); }

body.results .gift-bar-value {
    width: auto;
    padding: 0;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

.gift-chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.9rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.gift-chart-legend {
    gap: 0.35rem 1rem;
}

.gift-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.gift-chart-legend .lg {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.lg-top { background: var(--gift-color); }
.lg-strong { background: #b58bd6; }
.lg-rest { background: #ddd6e8; }

/* Annotation: Gift descriptions as an accordion; the first one starts open */
.gift-item {
    border: 1px solid var(--bg-dark);
    border-radius: var(--radius-sm);
    margin-bottom: 0.6rem;
    scroll-margin-top: 1rem;
}

.gift-item[open] { border-color: rgba(114, 9, 183, 0.3); }

.gift-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.gift-item summary::-webkit-details-marker { display: none; }

.gift-item-title {
    display: flex;
    flex-direction: column;
}

.gift-item-title strong {
    font-size: 1.05rem;
    color: var(--dark);
}

.gift-item-title span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.gift-item-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.gift-item-meta::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    color: var(--text-muted);
    width: 1rem;
    text-align: center;
}

.gift-item[open] .gift-item-meta::after { content: '−'; }

.gift-item-rank {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    background: var(--bg);
    color: var(--text-muted);
}

.gift-item-rank.is-top {
    background: rgba(114, 9, 183, 0.08);
    color: var(--gift-color);
}

.gift-item-score {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gift-color);
}

.gift-item-score small {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.gift-item-body {
    padding: 0 1.25rem 1.25rem;
}

.gift-item-desc {
    line-height: 1.75;
    color: var(--text);
    margin-bottom: 1.25rem;
}

.gift-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--bg-dark);
    border-bottom: 1px solid var(--bg-dark);
    margin-bottom: 1.1rem;
}

.gift-facts dt {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.gift-facts dd {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-light);
}

.gift-prayer {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-xs);
    background: rgba(114, 9, 183, 0.05);
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-light);
}

.gift-prayer span {
    display: block;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

/* Annotation: Actions — dark primary button, quiet outline */
body.results .actions-row { margin-top: 2.5rem; }

body.results .btn-primary { background: var(--dark); }
body.results .btn-primary:hover { background: var(--dark-light); transform: none; box-shadow: none; }
body.results .btn-outline { border-width: 1px; }
body.results .btn-outline:hover { transform: none; }

body.results .pdf-hint { margin: 0.6rem 0 0; }

/* Annotation: Mobile — podium stacks, chart label column narrows, facts in one column */
@media (max-width: 599px) {
    .gift-podium { grid-template-columns: 1fr; }
    .podium-card {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 0.75rem;
        align-items: center;
        padding: 0.9rem 1rem;
    }
    .podium-rank { grid-row: 1 / 3; margin: 0; }
    .podium-name { grid-column: 2; }
    .podium-keyword { grid-column: 2; }
    .podium-score { grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 0; font-size: 1.25rem; }
    body.results .gift-bar { grid-template-columns: 8.5rem 1fr 2rem; gap: 0.5rem; }
    body.results .gift-bar-label { font-size: 0.8rem; overflow-wrap: break-word; line-height: 1.3; }
    body.results .actions-row { flex-direction: column; }
    body.results .actions-row .btn { width: 100%; }
    .gift-facts { grid-template-columns: 1fr; }
    .gift-item summary { padding: 0.9rem 1rem; }
    .gift-item-body { padding: 0 1rem 1rem; }
    .gift-item-rank { display: none; }
}

/* Annotation: Print — gift descriptions fully shown, podium kept on one row */
@media print {
    .result-back { display: none !important; }
    .gift-podium { grid-template-columns: repeat(3, 1fr); }
    .gift-item { break-inside: auto; }
    .gift-item summary, .gift-facts > div, .gift-prayer { break-inside: avoid; }
    .gift-item summary { break-after: avoid; }
    .gift-item-meta::after { display: none; }
    body.results .result-section.single { border: none !important; }
}

/* Annotation: Gift facts — clearer labels (dark, bold, with a marker) and cautions in their own tinted block */
body.results .gift-facts {
    border: none;
    padding: 0;
    gap: 1.1rem 1.75rem;
    margin-bottom: 1rem;
}

body.results .gift-facts dt {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dark);
    margin-bottom: 0.25rem;
}

body.results .gift-facts dt::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--gift-color);
    flex-shrink: 0;
}

body.results .gift-facts dd {
    font-size: 0.95rem;
    color: var(--text);
    padding-left: calc(8px + 0.45rem);
}

body.results .gift-cautions {
    background: rgba(255, 183, 3, 0.09);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
}

body.results .gift-cautions dt { color: #8a5a00; }
body.results .gift-cautions dt::before { background: #d69e2e; border-radius: 50%; }

body.results .gift-prayer span {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dark);
}

body.results .gift-prayer {
    color: var(--text);
}

/* =============================================
   DISC RESULT — clean layout (body.results)
   ============================================= */

/* Annotation: Two answer cards at the top of the single DISC view */
.disc-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.disc-ov-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
    border: 1px solid var(--bg-dark);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    transition: border-color var(--transition);
}

.disc-ov-card:hover { border-color: var(--disc-color); }

.disc-ov-caption {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.disc-ov-code {
    font-size: 2rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    color: var(--disc-color);
    line-height: 1.2;
}

.disc-ov-title {
    font-size: 0.95rem;
    color: var(--dark);
    font-weight: 600;
}

.disc-ov-link {
    margin-top: auto;
    padding-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--disc-color);
}

.disc-compare {
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--bg);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-light);
}

/* Annotation: Graphs side by side on wide screens */
.disc-graphs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.disc-graph-card {
    border: 1px solid var(--bg-dark);
    border-radius: var(--radius);
    padding: 1.1rem 1rem 1rem;
}

.disc-graph-card h4 {
    font-size: 0.95rem;
    color: var(--dark);
    margin-bottom: 0.25rem;
}

.disc-graph-desc {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
}

.disc-graph-svg {
    display: flex;
    justify-content: center;
}

.disc-total {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.disc-total-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.disc-total-grid {
    display: inline-flex;
    border: 1px solid var(--bg-dark);
    border-radius: 8px;
    overflow: hidden;
}

.disc-total-grid div {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 2.6rem;
    padding: 0.25rem 0.5rem;
}

.disc-total-grid div + div { border-left: 1px solid var(--bg-dark); }

.disc-total-grid span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.disc-total-grid strong {
    font-size: 1.05rem;
    color: var(--disc-color);
}

.disc-split {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bg-dark);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-light);
}

.disc-split p + p { margin-top: 0.3rem; }
.disc-split strong { color: var(--dark); margin-right: 0.25rem; }

.lg-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-muted);
    margin-right: 0.4rem;
    vertical-align: 0.05em;
}

.lg-dot.strong { background: var(--primary); }

.disc-graph-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Annotation: Flat DISC sections in the single view — a heading with a rule instead of a card */
body.results .result-section.flat {
    border: none;
    padding: 0;
    margin-top: 3rem;
}

body.results .result-section.flat > h3 {
    font-size: 1.35rem;
    font-weight: 700;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bg-dark);
    margin-bottom: 1.25rem;
}

body.results .result-section.flat > h3 .section-dot { display: none; }

/* Annotation: Blend description block */
.disc-blend { margin-bottom: 1.25rem; }

.disc-blend-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.disc-blend-code {
    padding: 0.25rem 0.65rem;
    border-radius: 8px;
    background: rgba(67, 97, 238, 0.08);
    color: var(--disc-color);
    font-weight: 750;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.disc-blend-head h4 {
    font-size: 1.1rem;
    color: var(--dark);
}

.disc-blend-order {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.blend-dots {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.blend-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.blend-dot i {
    font-style: normal;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--bg-dark);
}

.blend-dot small {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.blend-dot.lvl-sus i { background: var(--disc-color); border-color: var(--disc-color); color: var(--white); }
.blend-dot.lvl-mijloc-sus i { background: rgba(67, 97, 238, 0.55); border-color: transparent; color: var(--white); }
.blend-dot.lvl-mijloc i { background: rgba(67, 97, 238, 0.18); border-color: transparent; color: var(--disc-color); }

.disc-blend-desc {
    line-height: 1.75;
    color: var(--text);
    margin-bottom: 1rem;
}

.disc-verses {
    padding: 1rem 1.1rem;
    background: var(--bg);
    border-radius: var(--radius-sm);
}

.disc-verses-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.disc-verses ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.disc-verses li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-light);
}

.disc-verses li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--disc-color);
}

.verse-ref { color: var(--disc-color); font-weight: 600; }

/* Annotation: Detailed letter profile — reuses the gift accordion look, DISC-colored markers */
.disc-profile { margin-top: 1.25rem; }
.disc-profile[open] { border-color: rgba(67, 97, 238, 0.3); }

.disc-profile-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.disc-profile-title > span:last-child {
    display: flex;
    flex-direction: column;
}

.disc-profile-title strong { font-size: 1.02rem; color: var(--dark); }
.disc-profile-title > span:last-child > span { font-size: 0.82rem; color: var(--text-muted); }

.disc-letter {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: var(--white);
    background: var(--disc-color);
    flex-shrink: 0;
}

.disc-d .disc-letter { background: #e63946; }
.disc-i .disc-letter { background: #e08a3c; }
.disc-s .disc-letter { background: #2a9d8f; }
.disc-c .disc-letter { background: #264653; }

.disc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.disc-tags span {
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    background: var(--bg);
    color: var(--text-light);
}

body.results .disc-facts dt::before { background: var(--disc-color); }

.disc-group-title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0.5rem 0 0.6rem;
}

body.results .disc-growth {
    background: rgba(6, 214, 160, 0.08);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
}

body.results .disc-growth dt { color: #047857; }
body.results .disc-growth dt::before { background: var(--success); border-radius: 50%; }

.disc-same-note {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Annotation: Mobile — answer cards and graphs stack */
@media (max-width: 719px) {
    .disc-overview, .disc-graphs { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
    .blend-dots { gap: 0.75rem; }
    .disc-blend-head { align-items: flex-start; flex-direction: column; gap: 0.4rem; }
}

/* Annotation: Print — profiles fully shown, graphs side by side */
@media print {
    .disc-graphs { grid-template-columns: 1fr 1fr; }
    .disc-graph-card, .disc-ov-card, .disc-verses { break-inside: avoid; }
    .disc-ov-link { display: none; }
}

/* Annotation: Graph 3 (overall profile) — main card spans the full width above graphs 1 and 2 */
.disc-ov-card.main,
.disc-graph-card.main { grid-column: 1 / -1; }

.disc-ov-card.main {
    border-color: var(--disc-color);
    background: color-mix(in srgb, var(--disc-color) 6%, transparent);
}

.disc-ov-card.main .disc-ov-code { font-size: 2.6rem; }

.disc-graph-card.main {
    border-color: color-mix(in srgb, var(--disc-color) 45%, var(--bg-dark));
    background: color-mix(in srgb, var(--disc-color) 4%, transparent);
}

.disc-graph-card.main .disc-graph-desc { max-width: 34rem; }

.disc-method-note {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-muted);
}

@media print {
    .disc-ov-card.main, .disc-graph-card.main { background: none; }
}

/* Annotation: Start page — source/adaptation note above the disclaimer */
body.home .home-source {
    margin: 1.5rem 0 0.75rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-light);
}

/* =============================================
   COMBINED VIEW — summary, nested DISC parts, combinations, service
   ============================================= */

/* Annotation: "Pe scurt" DISC card — overall profile first, graphs 1 and 2 as small lines */
.summary-disc-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
}

.summary-disc-main .summary-disc-label { flex: none; }

.summary-disc-code {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 6px;
    background: rgba(67, 97, 238, 0.1);
    letter-spacing: 0.04em;
}

.summary-disc-code.main {
    align-self: flex-start;
    font-size: 1.5rem;
    padding: 0.1rem 0.65rem;
}

.summary-disc-minor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--bg-dark);
}

.summary-disc-minor .summary-disc-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; margin: 0; min-width: 0; }
.summary-disc-minor .summary-disc-label { flex: none; }
.summary-disc-minor .summary-disc-code { font-size: 0.95rem; max-width: 100%; overflow-wrap: break-word; }

/* Annotation: DISC parts nested inside the DISC section of the combined view */
.disc-part.nested {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bg-dark);
}

.disc-part.nested > h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    color: var(--dark);
    margin-bottom: 1rem;
}

/* Annotation: Personality + gifts combinations */
.combo-intro {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.combo-item .disc-profile-title strong { font-size: 1rem; }

.combo-status { color: var(--text-muted); font-size: 0.9rem; }
.combo-status.error { color: var(--danger); }

.combo-more {
    margin-top: 1.25rem;
    border: 1px dashed var(--bg-dark);
    border-radius: var(--radius);
    padding: 0 1rem;
}

.combo-more > summary {
    cursor: pointer;
    padding: 0.9rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
}

.combo-more[open] { padding-bottom: 1rem; }

.combo-more-intro {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.combo-more-title {
    font-size: 0.95rem;
    color: var(--dark);
    margin: 1.25rem 0 0.5rem;
}

/* Annotation: Service opportunities — numbered list with category color and E/I/P marks */
.serve-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: 0.5rem;
}

.serve-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--bg-dark);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.serve-rank {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--white);
    background: var(--serve-color);
}

.serve-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--cat, var(--serve-color)) 10%, transparent);
    color: var(--cat, var(--serve-color));
}

.serve-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.serve-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.serve-body strong { color: var(--dark); }
.serve-cat { font-size: 0.8rem; color: var(--text-muted); }

.serve-marks:empty { display: none; }
.serve-marks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; }

.serve-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem 0.2rem 0.25rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.serve-pill b {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    font-size: 0.68rem;
    color: var(--white);
}

.serve-pill.mark-e { background: rgba(67, 97, 238, 0.1); color: var(--primary); }
.serve-pill.mark-e b { background: var(--primary); }
.serve-pill.mark-i { background: rgba(255, 209, 102, 0.22); color: #9a6b00; }
.serve-pill.mark-i b { background: #e0a800; }
.serve-pill.mark-p { background: rgba(247, 37, 133, 0.1); color: var(--accent); }
.serve-pill.mark-p b { background: var(--accent); }

.serve-totals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--bg-dark);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.serve-total {
    padding: 0.9rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.serve-total + .serve-total { border-left: 1px solid var(--bg-dark); }
.serve-total strong { font-size: 1.6rem; line-height: 1.1; }
.serve-total span { font-size: 0.8rem; color: var(--text-muted); }
.serve-total.mark-e strong, .serve-total.mark-e b { color: var(--primary); }
.serve-total.mark-i strong, .serve-total.mark-i b { color: #c89400; }
.serve-total.mark-p strong, .serve-total.mark-p b { color: var(--accent); }

@media (max-width: 599px) {
    .serve-item { flex-wrap: wrap; gap: 0.65rem; padding: 0.75rem 0.85rem; }
    .serve-icon { width: 36px; height: 36px; }
    .serve-marks { flex-basis: 100%; justify-content: flex-start; padding-left: calc(26px + 36px + 1.3rem); }
}


@media print {
    .summary-disc-minor { grid-template-columns: 1fr; }
    .summary-disc-minor .summary-disc-code { overflow-wrap: normal; }
    .result-subhead, .disc-part.nested > h3, .combo-more-title { break-after: avoid; }
    .combo-more { border: none; padding: 0; }
    .serve-item, .serve-totals { break-inside: avoid; }
}

/* Annotation: Overview card codes sit in a tinted chip, so a lone "I" reads as a letter; word labels get a smaller size */
.disc-ov-code {
    align-self: flex-start;
    padding: 0 0.55rem;
    border-radius: 8px;
    background: rgba(67, 97, 238, 0.1);
}

.disc-ov-code.is-words,
.disc-ov-card.main .disc-ov-code.is-words { font-size: 1.35rem; padding: 0.15rem 0.6rem; }

/* Annotation: Print — the three DISC graphs on one row, unopened extra combinations left out */
@media print {
    .disc-graphs { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .disc-graph-card.main { grid-column: auto; }
    .disc-graph-card { padding: 0.6rem 0.5rem; }
    .disc-graph-desc { font-size: 0.7rem; }
    .combo-more:not([open]) { display: none; }
}

/* =============================================
   Annotation: PDF SHEET (fișă) — a dedicated A4 layout built by downloadPDF; hidden on screen
   ============================================= */
#printSheet { display: none; }

/* Annotation: Sheet rendered for the PDF file — A4 content width (210mm − 2 × 13mm) */
.sheet-render {
    width: 184mm;
    background: #fff;
}

@media print {
    @page { size: A4; margin: 13mm 13mm 14mm; }

    body.print-sheet { background: #fff !important; }
    body.print-sheet > *:not(#printSheet) { display: none !important; }
    body.print-sheet #printSheet { display: block; }
}

/* Annotation: Sheet styles — used both for the downloaded PDF file and for printing */
.sheet {
    --ink: #1a1a2e;
    --soft: #555770;
    --mute: #8d99ae;
    --line: #e3e6ec;
    font-size: 9.5pt;
    line-height: 1.45;
    color: var(--ink);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.sheet .sh-daruri { --c: var(--gift-color); --t: rgba(114, 9, 183, 0.08); }
.sheet .sh-disc { --c: var(--disc-color); --t: rgba(67, 97, 238, 0.08); }
.sheet .sh-combo { --c: #b5179e; --t: rgba(181, 23, 158, 0.07); }
.sheet .sh-slujire { --c: #04a57c; --t: rgba(6, 214, 160, 0.1); }

/* Header */
.sh-head {
    border-bottom: 2px solid var(--ink);
    padding-bottom: 3mm;
    margin-bottom: 5mm;
}
.sh-brand {
    display: flex; align-items: center; gap: 2mm;
    font-size: 7.5pt; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute);
}
.sh-logo { width: 3mm; height: 3mm; border-radius: 50%; background: linear-gradient(135deg, var(--gift-color), var(--disc-color) 55%, var(--serve-color)); }
.sh-head.sh-daruri h1, .sh-head.sh-disc h1, .sh-head.sh-slujire h1 { color: var(--c); }
.sh-lead { margin: -2mm 0 4mm; font-size: 10pt; color: var(--soft); }
.sh-head h1 { font-size: 22pt; line-height: 1.15; margin: 1.5mm 0 2.5mm; letter-spacing: -0.02em; }
.sh-meta { display: flex; justify-content: space-between; gap: 8mm; font-size: 9pt; color: var(--soft); }
.sh-meta > span:first-child { flex: 1; display: flex; gap: 2mm; }
.sh-line { flex: 1; max-width: 85mm; border-bottom: 1px solid var(--mute); }

/* Overview strip (complete sheet) */
.sh-overview { display: grid; gap: 3mm; margin-bottom: 6mm; break-inside: avoid; }
.sh-overview.cols-2 { grid-template-columns: 1fr 1fr; }
.sh-overview.cols-3 { grid-template-columns: 1.15fr 0.9fr 1.15fr; }
.sh-ov, .sh-tile {
    border: 1px solid var(--line);
    border-radius: 2.5mm;
    padding: 3mm 3.5mm;
    display: flex; flex-direction: column; gap: 1mm;
}
.sh-ov ol { margin: 0; padding-left: 4.5mm; }
.sh-ov li { margin: 0.4mm 0; }
.sh-ov li small { color: var(--mute); }
.sh-ov-label { font-size: 7pt; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.sh-ov-code { font-size: 16pt; line-height: 1.1; color: var(--c, var(--disc-color)); }

/* Sections */
.sh-sec { margin-bottom: 6mm; }
.sh-sec + .sh-sec { break-before: page; }
.sh-sec-head {
    display: flex; align-items: center; gap: 3mm;
    background: var(--t); border-radius: 2.5mm; padding: 2.5mm 3.5mm; margin-bottom: 4mm;
    break-after: avoid;
}
.sh-sec-head h2 { font-size: 13pt; margin: 0; color: var(--c); }
.sh-sec-head p { margin: 0.5mm 0 0; font-size: 8.5pt; color: var(--soft); }
.sh-num {
    flex: none; width: 7mm; height: 7mm; border-radius: 50%;
    display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 800; font-size: 10pt;
}
.sh-sub {
    font-size: 7.5pt; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute);
    margin: 4.5mm 0 2mm; break-after: avoid;
}
.sh-note { font-size: 8pt; color: var(--soft); margin: 2mm 0; }
.sh-note.center { text-align: center; }

/* Gifts — podium and bars */
.sh-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.sh-podium-card {
    position: relative; border: 1px solid var(--line); border-radius: 2.5mm; padding: 3mm 3.5mm;
    display: flex; flex-direction: column; gap: 0.5mm; background: rgba(114, 9, 183, 0.04);
}
.sh-podium-card b { font-size: 10.5pt; padding-right: 14mm; }
.sh-podium-card small { color: var(--soft); }
.sh-podium-card .sh-score { position: absolute; top: 3mm; right: 3.5mm; font-size: 13pt; font-weight: 800; color: var(--gift-color); }
.sh-podium-card .sh-score small { font-size: 7pt; color: var(--mute); }
.sh-rank {
    width: 5mm; height: 5mm; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
    background: var(--c, var(--gift-color)); color: #fff; font-size: 7.5pt; font-weight: 800;
}

.sh-bars { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(8, auto); column-gap: 8mm; row-gap: 1.2mm; }
.sh-bar { display: grid; grid-template-columns: 38mm 1fr 6mm; align-items: center; gap: 2mm; font-size: 8.5pt; color: var(--soft); }
.sh-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-bar i { height: 2.2mm; border-radius: 2mm; background: #eef0f5; overflow: hidden; }
.sh-bar em { display: block; height: 100%; background: #c9cfdb; border-radius: 2mm; }
.sh-bar b { text-align: right; font-weight: 600; }
.sh-bar.strong em { background: #c39be0; }
.sh-bar.top { color: var(--ink); font-weight: 700; }
.sh-bar.top em { background: var(--gift-color); }

/* Cards (descriptions) */
.sh-card {
    border: 1px solid var(--line); border-radius: 2.5mm; padding: 3mm 4mm; margin-bottom: 3mm;
    break-inside: avoid;
}
.sh-card-head { display: flex; align-items: baseline; gap: 2.5mm; margin-bottom: 1.5mm; }
.sh-card-head b { font-size: 11pt; color: var(--c); }
.sh-card-head small { color: var(--mute); flex: 1; }
.sh-card-head .sh-score { font-weight: 800; color: var(--c); }
.sh-card-head .sh-rank { align-self: center; }
.sh-card > p { margin: 0 0 2mm; }
.sh-code {
    align-self: center; flex: none; padding: 0.4mm 2mm; border-radius: 1.5mm;
    background: var(--c); color: #fff; font-weight: 800; font-size: 8.5pt;
}
.sh-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5mm 5mm; margin: 0 0 2mm; }
.sh-facts > div.warn dt { color: #c76b1e; }
.sh-facts > div.grow dt { color: #04a57c; }
.sh-facts dt { font-size: 7pt; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.sh-facts dd { margin: 0; }
.sh-prayer { margin: 0; padding: 2mm 3mm; border-radius: 2mm; background: var(--t); font-style: italic; color: var(--soft); }
.sh-prayer span { display: block; font-style: normal; font-size: 7pt; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); margin-bottom: 0.5mm; }
.sh-tags { display: flex; flex-wrap: wrap; gap: 1.5mm; }
.sh-tags span { font-size: 8pt; padding: 0.5mm 2mm; border-radius: 4mm; background: var(--t); color: var(--soft); }

/* DISC — tiles and graphs */
.sh-tiles { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 3mm; break-inside: avoid; }
.sh-tile { --c: var(--disc-color); }
.sh-tile.main { background: rgba(67, 97, 238, 0.06); }
.sh-tile.main .sh-ov-code { font-size: 20pt; }
.sh-tile > span:last-of-type { color: var(--soft); font-size: 8.5pt; flex: 1; }
.sh-tile-src { font-size: 7pt; color: var(--mute); }
.sh-compare { margin: 3mm 0; font-size: 9pt; color: var(--soft); }
.sh-graphs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; break-inside: avoid; }
.sh-graph { border: 1px solid var(--line); border-radius: 2.5mm; padding: 2mm 2.5mm 1mm; text-align: center; }
.sh-graph.main { border-color: rgba(67, 97, 238, 0.45); background: rgba(67, 97, 238, 0.04); }
.sh-graph > b { display: block; font-size: 8pt; margin-bottom: 1mm; color: var(--soft); }
.sh-graph svg { max-width: 100% !important; max-height: 62mm; }

/* Service opportunities */
.sh-serve { list-style: none; margin: 0; padding: 0; display: grid; gap: 2mm; }
.sh-serve li {
    display: flex; align-items: center; gap: 3mm;
    border: 1px solid var(--line); border-radius: 2.5mm; padding: 2.5mm 3.5mm; break-inside: avoid;
}
.sh-serve .sh-rank { --c: #04a57c; }
.sh-serve-icon {
    flex: none; width: 8mm; height: 8mm; border-radius: 2mm; display: grid; place-items: center;
    background: var(--cat-tint, rgba(4, 165, 124, 0.12)); color: var(--cat, #04a57c);
}
.sh-serve-icon svg { width: 4.5mm; height: 4.5mm; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-serve-body { flex: 1; display: flex; flex-direction: column; }
.sh-serve-body b { font-size: 10.5pt; }
.sh-serve-body small { color: var(--mute); }
.sh-marks { display: flex; gap: 1.5mm; }
.sh-mark { font-size: 7.5pt; font-weight: 700; padding: 0.4mm 2mm; border-radius: 3mm; white-space: nowrap; }
.sh-mark.mark-e { background: rgba(67, 97, 238, 0.1); color: var(--primary); }
.sh-mark.mark-i { background: rgba(255, 209, 102, 0.3); color: #8a6100; }
.sh-mark.mark-p { background: rgba(247, 37, 133, 0.1); color: var(--accent); }
.sh-totals { display: flex; align-items: center; gap: 2mm; margin: 3mm 0 0; color: var(--soft); }
.sh-notes { break-inside: avoid; }
.sh-notes i { display: block; height: 9mm; border-bottom: 1px solid var(--line); }

/* Footer */
.sh-foot {
    margin-top: 6mm; padding-top: 2.5mm; border-top: 1px solid var(--line);
    font-size: 7.5pt; color: var(--mute); text-align: center; break-inside: avoid;
}