:root { --teal: #1aafaf; --teal-dark: #0d8a8a; --teal-light: #e6f8f8; }

body { background-color: #f8f9fa; }

.hero { background: linear-gradient(135deg, #0d8a8a, #1aafaf); color: white; padding: 3rem 0; }
.hero h1 { font-size: 2rem; font-weight: 700; }
.hero p { font-size: 1.1rem; opacity: 0.9; }
.hero-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.6);
    object-fit: cover;
    margin-bottom: 1rem;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: var(--teal-dark);
    margin-bottom: 1rem;
}

.milestone-item { border-left: 3px solid var(--teal); padding-left: 1rem; margin-bottom: 1rem; }
.milestone-date { font-size: 0.8rem; color: #6c757d; }

.badge-high { background-color: #28a745; }
.badge-medium { background-color: #ffc107; color: #212529; }
.badge-uncertain { background-color: #dc3545; }

.card { border: none; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-bottom: 1rem; }

.download-btn { font-size: 0.85rem; color: var(--teal-dark); border-color: var(--teal-dark); }
.download-btn:hover { background-color: var(--teal-dark); color: white; }

.sofia-footer {
    background-color: #0d8a8a;
    color: rgba(255,255,255,0.75);
    padding: 1.5rem 0;
    font-size: 0.85rem;
    margin-top: 3rem;
}

.contact-row { cursor: pointer; }
.contact-row:hover td { background-color: var(--teal-light); }

.chat-detail { background-color: #fafafa; border-top: 1px solid #dee2e6; }
.chat-entry { border-left: 3px solid var(--teal); padding: 0.6rem 1rem; margin-bottom: 0.75rem; }
.chat-date { font-size: 0.8rem; color: #6c757d; font-weight: 600; }
.chat-notes { font-size: 0.9rem; color: #495057; margin-top: 0.25rem; }
.chat-signals { font-size: 0.8rem; color: #6c757d; margin-top: 0.25rem; }
.chat-history-title { font-size: 0.8rem; text-transform: uppercase; color: var(--teal-dark); font-weight: 600; margin-bottom: 0.5rem; }
.toggle-icon { float: right; color: var(--teal); font-size: 0.85rem; }

.navbar-sofia { background-color: var(--teal-dark); }

/* Impact dashboard */
.stat-card { text-align: center; padding: 2rem 1rem; }
.stat-number { font-size: 3rem; font-weight: 700; color: var(--teal); line-height: 1; }
.stat-label { font-size: 0.9rem; color: #6c757d; margin-top: 0.5rem; text-transform: uppercase;
              letter-spacing: 0.05rem; }

.journey-bar { background-color: var(--teal-light); border-radius: 4px; height: 10px; margin-bottom: 0.25rem; }
.journey-fill { background-color: var(--teal); height: 10px; border-radius: 4px; }

.country-badge { display: inline-block; background-color: var(--teal-light); color: var(--teal-dark);
                 border-radius: 20px; padding: 0.3rem 0.8rem; margin: 0.2rem; font-size: 0.85rem; }

.mission-box { border-left: 4px solid var(--teal); padding: 1rem 1.5rem;
               background-color: var(--teal-light); border-radius: 0 8px 8px 0; }
.mission-text { font-size: 1.05rem; }
.stat-date-range { font-size: 0.7rem; color: #adb5bd; margin-top: 0.2rem; }
.journey-state { font-size: 0.9rem; }
.journey-count { font-size: 0.9rem; color: #6c757d; }
.badge-auto { font-size: 0.7rem; }
.cost-total-row { font-weight: 600; background-color: #f8f9fa; }
.btn-teal { background-color: var(--teal); color: white; border: none; }
.btn-teal:hover { background-color: var(--teal-dark); color: white; }
.btn-outline-teal { background-color: transparent; color: var(--teal-dark); border: 1px solid var(--teal); }
.btn-outline-teal:hover { background-color: var(--teal-light); color: var(--teal-dark); }
.footer-link { color: rgba(255,255,255,0.75); }
.footer-link:hover { color: white; }

/* Mentor directory */
.mentor-avatar { width: 56px; height: 56px; border-radius: 50%; background-color: var(--teal);
                 color: white; font-size: 1.4rem; font-weight: 700;
                 display: flex; align-items: center; justify-content: center;
                 margin: 0 auto 0.75rem; }
.mentor-name { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.1rem; }
.mentor-role { font-size: 0.85rem; color: #6c757d; margin-bottom: 0.1rem; }
.mentor-city { font-size: 0.85rem; color: #6c757d; margin-bottom: 0.5rem; }
.mentor-bio { font-size: 0.88rem; color: #495057; margin: 0.6rem 0 0.75rem; min-height: 2.5rem; }
.lang-badge { display: inline-block; background-color: var(--teal-light); color: var(--teal-dark);
              border-radius: 20px; padding: 0.15rem 0.6rem; font-size: 0.75rem; margin: 0.1rem; }

/* Guide page — chat bubbles */
.chat-example { margin-bottom: 1.5rem; }
.bubble-wrap { display: flex; margin-bottom: 0.4rem; }
.bubble-wrap.user { justify-content: flex-end; }
.bubble-wrap.sofia { justify-content: flex-start; }
.bubble { max-width: 80%; padding: 0.6rem 0.9rem; border-radius: 16px; font-size: 0.9rem; line-height: 1.4; }
.bubble.user { background-color: #dcf8c6; color: #212529; border-radius: 16px 16px 4px 16px; }
.bubble.sofia { background-color: var(--teal-light); color: #212529; border-radius: 16px 16px 16px 4px; }
.bubble-label { font-size: 0.75rem; color: #adb5bd; margin-bottom: 0.2rem; }
.feature-icon { font-size: 1.4rem; margin-bottom: 0.4rem; }

/* Landing page */
.step-card { text-align: center; padding: 1.5rem 1rem; }
.step-number { font-size: 2.5rem; font-weight: 700; color: var(--teal); line-height: 1; }
.step-title { font-size: 1rem; font-weight: 600; margin: 0.5rem 0 0.25rem; }
.step-desc { font-size: 0.9rem; color: #6c757d; margin-bottom: 0; }
.section-note { font-size: 0.9rem; color: #6c757d; }