/* ================================================================
   SUPERVISORMATCH — Production Design System
   Inspired by Linear, Stripe, Notion
   ================================================================ */

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

/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */

:root {
    /* Brand — Purple-Orange vibrant */
    --brand-50:  #faf5ff;
    --brand-100: #f3e8ff;
    --brand-200: #e9d5ff;
    --brand-400: #c084fc;
    --brand-500: #a855f7;
    --brand-600: #9333ea;
    --brand-700: #7e22ce;

    /* Orange (Bioinforange identity) */
    --orange-50:  #fff7ed;
    --orange-100: #ffedd5;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;

    /* Slate (neutrals) */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* Score semantic */
    --score-high:  #10b981;
    --score-high-bg: #ecfdf5;
    --score-mid:   #f59e0b;
    --score-mid-bg: #fffbeb;
    --score-low:   #94a3b8;
    --score-low-bg: #f8fafc;

    /* Semantic aliases */
    --bg-page:   var(--slate-100);
    --bg-card:   #ffffff;
    --bg-subtle: var(--slate-50);
    --border:    var(--slate-200);
    --border-md: var(--slate-300);

    --text-1: var(--slate-900);
    --text-2: var(--slate-600);
    --text-3: var(--slate-400);
    --text-white: #ffffff;

    /* Shadows — subtle, like Linear */
    --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-md: 0 4px 8px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
    --shadow-lg: 0 10px 20px rgba(15,23,42,0.08), 0 4px 8px rgba(15,23,42,0.04);
    --shadow-xl: 0 20px 40px rgba(15,23,42,0.12), 0 8px 16px rgba(15,23,42,0.06);
    --shadow-brand: 0 4px 14px rgba(147,51,234,0.28);
    --shadow-card-hover: 0 8px 24px rgba(147,51,234,0.14), 0 2px 6px rgba(15,23,42,0.06);

    /* Radius */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --r-2xl: 24px;
    --r-full: 9999px;

    /* Spacing (8px grid) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* Typography */
    --font: 'Inter', system-ui, -apple-system, sans-serif;

    /* Transitions */
    --ease:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast: 120ms;
    --t-base: 200ms;
    --t-slow: 350ms;

    /* Z-layers */
    --z-above:  10;
    --z-sticky: 100;
    --z-modal:  1000;
    --z-toast:  2000;
}

/* ================================================================
   2. RESET & BASE
   ================================================================ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[hidden] { display: none !important; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    background: var(--bg-page);
    color: var(--text-1);
}

body {
    font-family: var(--font);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-1);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: var(--font); }
img { display: block; max-width: 100%; }

abbr { text-decoration: none; cursor: help; }

*:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ================================================================
   3. LAYOUT
   ================================================================ */

.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-page);
    color: var(--text-1);
}

.main-content {
    flex: 1;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--sp-4) var(--sp-16);
    width: 100%;
    background: var(--bg-page);
}

/* ================================================================
   4. SITE HEADER
   ================================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(248, 250, 252, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-logo {
    display: inline-flex;
    align-items: center;
}

.header-logo-img {
    height: 48px;
    width: auto;
    transition: opacity var(--t-base) var(--ease);
}
.header-logo:hover .header-logo-img { opacity: 0.8; }

/* ================================================================
   5. HERO SECTION
   ================================================================ */

.hero {
    text-align: center;
    padding: var(--sp-12) var(--sp-4) var(--sp-10);
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: var(--sp-1) var(--sp-3);
    margin-bottom: var(--sp-5);
}

.hero-dot {
    width: 7px;
    height: 7px;
    background: var(--score-high);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.8); }
}

.hero-title {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--text-1);
    margin-bottom: var(--sp-4);
}

.hero-subtitle {
    font-size: 1.0625rem;
    color: var(--text-2);
    max-width: 480px;
    margin: 0 auto var(--sp-8);
    line-height: 1.7;
}

.hero-stats {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--sp-3) var(--sp-6);
    box-shadow: var(--shadow-sm);
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.hero-stat strong {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1;
}

.hero-stat span {
    font-size: 0.75rem;
    color: var(--text-3);
    font-weight: 500;
}

.hero-stat-divider {
    width: 1px;
    height: 32px;
    background: var(--border);
}

/* ================================================================
   6. INFO STRIP
   ================================================================ */

.info-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
}

.info-strip-item {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    box-shadow: var(--shadow-xs);
}

.info-strip-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--brand-600);
    stroke: currentColor;
}

.info-strip-item strong {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 2px;
}

.info-strip-item p {
    font-size: 0.8125rem;
    color: var(--text-2);
    line-height: 1.5;
    margin: 0;
}

/* ================================================================
   7. UTILITY
   ================================================================ */

.is-hidden { display: none !important; }

/* ================================================================
   8. BUTTONS
   ================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px var(--sp-5);
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all var(--t-base) var(--ease);
    white-space: nowrap;
    line-height: 1;
    position: relative;
    text-decoration: none !important;
}

/* Primary: Blue */
.btn-primary {
    background: var(--brand-600);
    color: var(--text-white);
    border-color: var(--brand-600);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    background: var(--brand-700);
    border-color: var(--brand-700);
    box-shadow: var(--shadow-brand);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* CTA: Orange — used for "show results" */
.btn-cta {
    background: var(--orange-500);
    color: var(--text-white);
    border-color: var(--orange-500);
    box-shadow: var(--shadow-sm);
}
.btn-cta:hover {
    background: var(--orange-600);
    border-color: var(--orange-600);
    box-shadow: 0 4px 14px rgba(249,115,22,0.28);
    transform: translateY(-1px);
}
.btn-cta:active { transform: translateY(0); }

/* Ghost: Bordered */
.btn-ghost {
    background: var(--bg-card);
    color: var(--text-2);
    border-color: var(--border-md);
}
.btn-ghost:hover {
    background: var(--slate-50);
    color: var(--text-1);
    border-color: var(--slate-400);
}

/* Outline: for share/secondary */
.btn-outline {
    background: transparent;
    color: var(--brand-600);
    border-color: var(--brand-200);
}
.btn-outline:hover {
    background: var(--brand-50);
    border-color: var(--brand-400);
}

.btn-lg {
    padding: 13px var(--sp-6);
    font-size: 1rem;
    border-radius: var(--r-lg);
}

.btn-sm {
    padding: 7px var(--sp-3);
    font-size: 0.8125rem;
    border-radius: var(--r-sm);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ================================================================
   9. QUIZ SECTION
   ================================================================ */

.quiz-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: var(--sp-8);
}

/* Progress bar */
.quiz-progress {
    padding: var(--sp-5) var(--sp-8);
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.progress-track {
    flex: 1;
    height: 4px;
    background: var(--slate-200);
    border-radius: var(--r-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-600), var(--orange-500), var(--brand-400));
    border-radius: var(--r-full);
    width: 25%;
    transition: width 0.5s var(--ease);
}

.progress-steps {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.step-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--slate-300);
    transition: all var(--t-slow) var(--ease-spring);
    flex-shrink: 0;
}

.step-dot--active {
    width: 20px;
    background: var(--brand-600);
}

.step-dot--done {
    background: var(--brand-300, #d8b4fe);
}

.progress-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-2);
    flex-shrink: 0;
    min-width: 64px;
    text-align: right;
}

/* Quiz card (question area) */
.quiz-card {
    padding: var(--sp-8);
    min-height: 380px;
}

/* ================================================================
   10. SKELETON LOADING
   ================================================================ */

@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--slate-100) 25%,
        var(--slate-200) 50%,
        var(--slate-100) 75%
    );
    background-size: 600px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: var(--r-md);
}

.skeleton--title {
    height: 28px;
    width: 80%;
    margin-bottom: var(--sp-4);
}

.skeleton--hint {
    height: 14px;
    width: 55%;
    margin-bottom: var(--sp-6);
}

.skeleton--option {
    height: 52px;
    margin-bottom: var(--sp-3);
    border-radius: var(--r-md);
}

.skeleton--option-sm { width: 75%; }

.skeleton-wrap { pointer-events: none; }

/* ================================================================
   11. QUESTION STYLES
   ================================================================ */

.question {
    animation: question-enter 200ms var(--ease-out) both;
}

@keyframes question-enter {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

.question-meta {
    margin-bottom: var(--sp-4);
}

.question-type-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-600);
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: var(--r-full);
    padding: 3px 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.question-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.4;
    margin-bottom: var(--sp-3);
    letter-spacing: -0.02em;
}

.question-hint {
    font-size: 0.875rem;
    color: var(--text-2);
    line-height: 1.6;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-subtle);
    border-left: 3px solid var(--brand-200);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    margin-bottom: var(--sp-5);
}

/* ================================================================
   12. OPTION LABELS (radio & checkbox)
   ================================================================ */

.options-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.option-label {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 13px var(--sp-4);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition:
        border-color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease-spring);
    background: var(--bg-card);
    position: relative;
    user-select: none;
}

.option-label:hover {
    border-color: var(--brand-300);
    background: var(--brand-50);
    transform: translateX(4px);
}

/* Hide native input visually */
.option-label input[type="radio"],
.option-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom indicator */
.option-indicator {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-md);
    border-radius: 50%;
    flex-shrink: 0;
    transition: all var(--t-fast) var(--ease);
    position: relative;
    background: var(--bg-card);
}

.option-label--check .option-indicator {
    border-radius: var(--r-xs);
}

.option-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-white);
    transition: transform var(--t-fast) var(--ease-spring);
}

.option-label--check .option-indicator::after {
    border-radius: 1px;
    width: 7px;
    height: 5px;
    background: transparent;
    border-bottom: 2px solid var(--text-white);
    border-left: 2px solid var(--text-white);
    transform: translate(-50%, -60%) scale(0) rotate(-45deg);
}

/* Selected state */
.option-label--selected {
    border-color: var(--brand-600);
    background: var(--brand-50);
    transform: translateX(4px);
}

.option-label--selected .option-indicator {
    background: var(--brand-600);
    border-color: var(--brand-600);
}

.option-label--selected .option-indicator::after {
    transform: translate(-50%, -50%) scale(1);
}

.option-label--check.option-label--selected .option-indicator::after {
    transform: translate(-50%, -60%) scale(1) rotate(-45deg);
}

.option-text {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-1);
    line-height: 1.4;
}

.option-label--selected .option-text {
    color: var(--brand-700);
    font-weight: 600;
}

/* ================================================================
   13. QUIZ FOOTER NAV
   ================================================================ */

.quiz-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-4) var(--sp-8) var(--sp-6);
    border-top: 1px solid var(--border);
    background: var(--bg-subtle);
}

.quiz-footer-right {
    display: flex;
    gap: var(--sp-2);
}

/* ================================================================
   14. RESULTS SECTION
   ================================================================ */

.results-section {
    margin-bottom: var(--sp-8);
}

.results-header {
    margin-bottom: var(--sp-6);
    padding: 0 var(--sp-1);
}

.results-title {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.03em;
    margin-bottom: var(--sp-2);
}

.results-subtitle {
    font-size: 0.9375rem;
    color: var(--text-2);
    line-height: 1.6;
}

.results-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.results-cta {
    margin-top: var(--sp-6);
    display: flex;
    justify-content: center;
}

/* ================================================================
   15. RESULTS TOOLBAR (filter + share)
   ================================================================ */

.results-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    flex: 1;
}

.filter-select {
    padding: 8px var(--sp-4);
    padding-right: 32px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    font-family: var(--font);
    font-weight: 500;
    color: var(--text-2);
    background: var(--bg-subtle);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 140px;
}

.filter-select:hover { border-color: var(--slate-400); }
.filter-select:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(147,51,234,0.15);
}

.btn-share {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 8px var(--sp-4);
    background: var(--bg-card);
    color: var(--brand-600);
    border: 1.5px solid var(--brand-200);
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all var(--t-base) var(--ease);
    white-space: nowrap;
}
.btn-share:hover {
    background: var(--brand-50);
    border-color: var(--brand-400);
}

/* ================================================================
   16. SUPERVISOR CARDS
   ================================================================ */

.supervisor-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--sp-5);
    cursor: pointer;
    transition:
        border-color var(--t-base) var(--ease),
        box-shadow var(--t-base) var(--ease),
        transform var(--t-base) var(--ease);
    box-shadow: var(--shadow-sm);
    /* Entrance animation */
    opacity: 0;
    transform: translateY(8px);
}

.supervisor-card.card--visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 300ms var(--ease-out),
        transform 300ms var(--ease-out),
        border-color var(--t-base) var(--ease),
        box-shadow var(--t-base) var(--ease);
}

.supervisor-card:hover {
    border-color: var(--brand-300);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.supervisor-card:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    box-shadow: var(--shadow-card-hover);
}

/* Card Header */
.card-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
}

/* Avatar */
.card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0;
}

.card-identity {
    flex: 1;
    min-width: 0;
}

.card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.card-institution {
    font-size: 0.8125rem;
    color: var(--text-2);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Score Badge */
.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 4px 10px;
    border-radius: var(--r-full);
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}

.score--high { background: var(--score-high-bg); color: #059669; }
.score--mid  { background: var(--score-mid-bg); color: #d97706; }
.score--low  { background: var(--slate-100); color: var(--slate-500); }
.score--min  { background: var(--slate-100); color: var(--slate-400); }

.score-badge--lg {
    font-size: 1.125rem;
    padding: 6px 14px;
}

/* Card Meta */
.card-meta {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}

.card-meta-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-2);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: 2px 10px;
}

/* Match reasons */
.match-reasons {
    list-style: none;
    padding: 0;
    margin-bottom: var(--sp-3);
}

.match-reasons li {
    position: relative;
    padding-left: var(--sp-4);
    font-size: 0.8125rem;
    color: var(--text-2);
    line-height: 1.6;
    margin-bottom: 2px;
}

.match-reasons li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--brand-400);
    font-size: 0.75rem;
    top: 2px;
}

/* Card Links */
.card-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}

/* ================================================================
   17. PROFILE LINK BUTTONS
   ================================================================ */

.profile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font);
    color: var(--text-white);
    text-decoration: none !important;
    transition: all var(--t-base) var(--ease);
    line-height: 1;
}

.link-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

.profile-link--scholar {
    background: #1a5276;
}
.profile-link--scholar:hover { background: #154360; }

.profile-link--lab {
    background: #1e8449;
}
.profile-link--lab:hover { background: #196f3d; }

.profile-link--youtube {
    background: #c0392b;
}
.profile-link--youtube:hover { background: #a93226; }

.profile-link--bioinforange {
    background: var(--orange-500);
}
.profile-link--bioinforange:hover { background: var(--orange-600); }

/* ================================================================
   18. EMPTY STATE + LOAD ERROR
   ================================================================ */

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--sp-16) var(--sp-8);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: var(--sp-4);
}

.empty-state h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: var(--sp-2);
}

.empty-state p {
    color: var(--text-2);
    font-size: 0.9375rem;
}

.empty-state--sm {
    padding: var(--sp-8) var(--sp-4);
}

.load-error {
    text-align: center;
    padding: var(--sp-12) var(--sp-8);
}

.load-error-icon {
    font-size: 2.5rem;
    margin-bottom: var(--sp-4);
}

.load-error h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: var(--sp-2);
}

.load-error p {
    font-size: 0.9375rem;
    color: var(--text-2);
    margin-bottom: var(--sp-5);
    line-height: 1.6;
}

/* ================================================================
   19. TOAST NOTIFICATION
   ================================================================ */

.toast-message {
    position: fixed;
    bottom: var(--sp-6);
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: var(--slate-900);
    color: var(--text-white);
    padding: 10px var(--sp-6);
    border-radius: var(--r-full);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-toast);
    opacity: 0;
    transition: all 250ms var(--ease-out);
    pointer-events: none;
    white-space: nowrap;
}

.toast-message--success { background: #065f46; }
.toast-message--error   { background: #991b1b; }

.toast-message.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ================================================================
   20. MODAL
   ================================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    animation: overlay-in 200ms var(--ease-out);
}

@keyframes overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-content {
    background: var(--bg-card);
    border-radius: var(--r-2xl);
    max-width: 680px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    position: relative;
    animation: modal-in 250ms var(--ease-spring);
}

@keyframes modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* Sticky top accent line */
.modal-content::before {
    content: '';
    position: sticky;
    top: 0;
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-500), var(--orange-500), var(--brand-400));
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    z-index: 1;
    flex-shrink: 0;
}

.modal-close {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--slate-100);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-3);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
    z-index: 2;
    font-family: var(--font);
}
.modal-close:hover {
    background: var(--slate-200);
    color: var(--text-1);
    transform: rotate(90deg);
}

.modal-header {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-6) var(--sp-6) var(--sp-5);
    border-bottom: 1px solid var(--border);
    padding-right: calc(var(--sp-6) + 40px);
}

.modal-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    flex-shrink: 0;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.02em;
    margin-bottom: 2px;
}

.modal-subtitle {
    font-size: 0.875rem;
    color: var(--text-2);
    font-weight: 500;
}

.modal-header > div:first-child + div {
    flex: 1;
    min-width: 0;
}

.modal-body {
    padding: var(--sp-5) var(--sp-6);
}

.modal-info-row {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.modal-info-chip {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
}

.modal-info-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
}

.modal-info-item strong {
    font-weight: 600;
}

.modal-info-item strong::after {
    content: ': ';
}

.modal-info-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-1);
}

.modal-section {
    margin-bottom: var(--sp-5);
}

.modal-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
}

/* Tags */
.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--brand-50);
    color: var(--brand-700);
    border: 1px solid var(--brand-200);
    border-radius: var(--r-full);
    font-size: 0.8125rem;
    font-weight: 500;
}

.tag--accent {
    background: var(--orange-50);
    color: var(--orange-600);
    border-color: var(--orange-100);
}

/* Match list in modal */
.match-list {
    list-style: none;
    padding: 0;
}

.match-list li {
    position: relative;
    padding: 5px 0 5px var(--sp-5);
    font-size: 0.875rem;
    color: var(--text-2);
    line-height: 1.6;
}

.match-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--brand-400);
    font-size: 0.75rem;
}

/* Modal links */
.modal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* Similar section */
.modal-similar { margin-top: var(--sp-4); }

.similar-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.similar-card {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
    font-family: var(--font);
    text-align: left;
    width: 100%;
}

.similar-card:hover {
    background: var(--bg-card);
    border-color: var(--brand-300);
    box-shadow: var(--shadow-sm);
}

.similar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.similar-info {
    flex: 1;
    min-width: 0;
}

.similar-info strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.similar-info span {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.similar-score {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--slate-500);
    flex-shrink: 0;
}

/* ================================================================
   21. SUGGEST FORM SECTION
   ================================================================ */

.suggest-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    padding: var(--sp-10) var(--sp-8);
    box-shadow: var(--shadow-sm);
}

.suggest-header {
    margin-bottom: var(--sp-8);
    text-align: center;
}

.suggest-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-2);
}

.suggest-header p {
    color: var(--text-2);
    font-size: 0.9375rem;
}

.suggest-form {
    max-width: 760px;
    margin: 0 auto;
}

.form-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    margin-bottom: var(--sp-5);
}

.form-group { margin-bottom: 0; }

.form-group + .form-group {
    margin-top: 0;
}

/* Standalone form-group (not inside form-cols) */
.suggest-form > .form-group {
    margin-bottom: var(--sp-5);
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: var(--sp-2);
}

.form-label abbr {
    color: var(--orange-500);
    margin-left: 2px;
}

.form-input {
    width: 100%;
    padding: 10px var(--sp-3);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    font-family: var(--font);
    color: var(--text-1);
    background: var(--bg-card);
    transition: all var(--t-fast) var(--ease);
    -webkit-appearance: none;
}

.form-input:hover { border-color: var(--slate-400); }

.form-input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(147,51,234,0.15);
}

.form-input::placeholder { color: var(--slate-400); }

.form-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.form-submit {
    width: 100%;
    margin-top: var(--sp-3);
    padding: 14px;
    font-size: 1rem;
    border-radius: var(--r-lg);
    justify-content: center;
}

.form-feedback {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: center;
}

.form-feedback--ok {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.form-feedback--err {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ================================================================
   22. SITE FOOTER
   ================================================================ */

.site-footer {
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    color: var(--text-3);
}

.site-footer a {
    color: var(--text-2);
    font-weight: 500;
}

.site-footer a:hover { color: var(--text-1); }

/* ================================================================
   23. BACKWARD COMPAT (old class names used in JS)
   ================================================================ */

/* quiz-container used by JS show/hide */
#quizContainer.is-hidden    { display: none !important; }
#resultsContainer.is-hidden { display: none !important; }

/* question-container is inside .quiz-card */
#questionContainer {
    min-height: 300px;
}

/* old progress-bar / progress-fill still work */
.progress-bar  { /* handled by .progress-track */ }
.progress-fill { /* already defined */ }

/* area-tags from old JS */
.area-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.area-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--brand-50);
    color: var(--brand-700);
    border: 1px solid var(--brand-200);
    border-radius: var(--r-full);
    font-size: 0.8125rem;
    font-weight: 500;
}

.area-tag--specific {
    background: var(--orange-50);
    color: var(--orange-600);
    border-color: var(--orange-100);
}

/* modal-overlay class still used in old closeModal */
.modal-overlay { /* defined above */ }

/* ================================================================
   24. RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {
    .main-content { padding: 0 var(--sp-3) var(--sp-10); }

    .hero { padding: var(--sp-8) var(--sp-2) var(--sp-6); }
    .hero-title { font-size: 2rem; }
    .hero-stats { flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-3); }

    .info-strip { grid-template-columns: 1fr; }

    .quiz-card { padding: var(--sp-5); }
    .quiz-progress { padding: var(--sp-4); }
    .quiz-footer { padding: var(--sp-4); }

    .results-toolbar { flex-direction: column; align-items: stretch; }
    .filter-group { flex-direction: column; }
    .filter-select { min-width: unset; width: 100%; }

    .suggest-section { padding: var(--sp-6); }
    .form-cols { grid-template-columns: 1fr; }

    .modal-overlay { padding: var(--sp-2); }
    .modal-content { max-height: 95vh; border-radius: var(--r-xl); }
    .modal-header { padding: var(--sp-5); padding-right: calc(var(--sp-5) + 40px); }
    .modal-body { padding: var(--sp-4) var(--sp-5); }
    .modal-info-row { flex-direction: column; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.75rem; letter-spacing: -0.03em; }
    .hero-stats { flex-direction: column; gap: var(--sp-3); }
    .hero-stat-divider { width: 48px; height: 1px; }

    .quiz-section { border-radius: var(--r-xl); }
    .results-title { font-size: 1.375rem; }

    .btn { padding: 9px var(--sp-4); font-size: 0.875rem; }
    .btn-lg { padding: 12px var(--sp-5); font-size: 0.9375rem; }
}

/* ================================================================
   25. ANIMATIONS & TRANSITIONS
   ================================================================ */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.results-section:not(.is-hidden) {
    animation: fadeIn 250ms var(--ease-out);
}

/* Staggered card entrance via JS + IntersectionObserver */
.supervisor-card { transition-delay: 0ms; }

/* ================================================================
   26. ACCESSIBILITY
   ================================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}

/* ================================================================
   27. DARK MODE
   ================================================================ */

[data-theme="dark"] {
    --bg-page:   #0c0a1a;
    --bg-card:   #16132a;
    --bg-subtle: #1e1a35;
    --border:    rgba(168,85,247,0.12);
    --border-md: rgba(168,85,247,0.2);

    --text-1: #f1f0f9;
    --text-2: #a5a0c0;
    --text-3: #6b6590;

    --brand-50:  rgba(168,85,247,0.1);
    --brand-100: rgba(168,85,247,0.18);
    --brand-200: rgba(168,85,247,0.25);

    --score-high-bg: rgba(16,185,129,0.15);
    --score-mid-bg:  rgba(245,158,11,0.15);
    --score-low:     #6b6590;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 24px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 48px rgba(0,0,0,0.6);
    --shadow-brand: 0 4px 14px rgba(168,85,247,0.35);
    --shadow-card-hover: 0 8px 24px rgba(168,85,247,0.2), 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] .site-header {
    background: rgba(12,10,26,0.92);
    border-bottom-color: rgba(168,85,247,0.1);
}

[data-theme="dark"] .hero-stats,
[data-theme="dark"] .hero-eyebrow {
    background: var(--bg-card);
}

[data-theme="dark"] .info-strip-item {
    background: var(--bg-card);
    border-color: var(--border);
}

[data-theme="dark"] .quiz-section {
    background: var(--bg-card);
    border-color: var(--border);
}

[data-theme="dark"] .quiz-footer {
    background: var(--bg-subtle);
    border-color: var(--border);
}

[data-theme="dark"] .option-label {
    background: var(--bg-subtle);
    border-color: var(--border);
}

[data-theme="dark"] .option-label:hover {
    background: var(--bg-card);
    border-color: rgba(168,85,247,0.4);
}

[data-theme="dark"] .option-label--selected .option-text {
    color: var(--orange-500);
}

[data-theme="dark"] .filter-select,
[data-theme="dark"] .results-search {
    background: var(--bg-card);
    color: var(--text-1);
    border-color: var(--border);
}

[data-theme="dark"] .supervisor-card {
    background: var(--bg-card);
    border-color: var(--border);
}

[data-theme="dark"] .suggest-section {
    background: var(--bg-card);
    border-color: var(--border);
}

[data-theme="dark"] .form-input {
    background: var(--bg-subtle);
    color: var(--text-1);
    border-color: var(--border);
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-card) 50%, var(--bg-subtle) 75%);
}

[data-theme="dark"] .results-toolbar {
    background: var(--bg-card);
    border-color: var(--border);
}

/* Dark mode: Modal info items */
[data-theme="dark"] .modal-info-item strong {
    color: var(--text-1);
}

[data-theme="dark"] .modal-info-item span {
    color: var(--text-2);
}

/* Dark mode: Similar cards */
[data-theme="dark"] .similar-card strong {
    color: #f1f0f9 !important;
}

[data-theme="dark"] .similar-card span:not(.similar-score) {
    color: #a5a0c0 !important;
}

[data-theme="dark"] .similar-card .similar-score {
    color: #c084fc !important;
}

/* ================================================================
   28. THEME TOGGLE BUTTON
   ================================================================ */

.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--t-base) var(--ease);
    padding: 0;
}

.theme-toggle:hover {
    border-color: var(--brand-400);
    color: var(--brand-600);
    background: var(--brand-50);
}

.theme-icon { display: none; }

[data-theme="light"] .theme-icon--moon { display: block; }
[data-theme="dark"]  .theme-icon--sun  { display: block; }

/* ================================================================
   29. HERO GRADIENT MESH
   ================================================================ */

.hero {
    position: relative;
    overflow: visible;
}


/* ================================================================
   30. SCORE RING
   ================================================================ */

.score-ring {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.score-ring-bg {
    stroke: var(--slate-100);
}
[data-theme="dark"] .score-ring-bg { stroke: rgba(255,255,255,0.06); }

.score-ring--high .score-ring-fill { stroke: var(--score-high); }
.score-ring--mid  .score-ring-fill { stroke: var(--score-mid); }
.score-ring--low  .score-ring-fill { stroke: var(--score-low); }

.score-ring-fill {
    transition: stroke-dasharray 0.6s var(--ease-out);
    transform-origin: center;
}

.score-ring-pct {
    font-family: var(--font);
    font-size: 9px;
    font-weight: 800;
    fill: var(--text-1);
    text-anchor: middle;
    dominant-baseline: middle;
}

.score-ring-label {
    font-family: var(--font);
    font-size: 5.5px;
    font-weight: 600;
    fill: var(--text-3);
    text-anchor: middle;
    dominant-baseline: middle;
}

/* ================================================================
   31. RESULTS HEADER REDESIGN
   ================================================================ */

.results-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}

.results-header-actions {
    display: flex;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.btn-print {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 8px var(--sp-3);
    background: var(--bg-card);
    color: var(--text-2);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all var(--t-base) var(--ease);
    white-space: nowrap;
}
.btn-print:hover { border-color: var(--slate-400); color: var(--text-1); }

/* ================================================================
   32. LIVE SEARCH
   ================================================================ */

.results-search-wrap {
    position: relative;
    margin-top: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.results-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    pointer-events: none;
}

.results-search {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    font-size: 0.9375rem;
    font-family: var(--font);
    color: var(--text-1);
    background: var(--bg-card);
    transition: all var(--t-base) var(--ease);
    outline: none;
}
.results-search::placeholder { color: var(--text-3); }
.results-search:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(147,51,234,0.15);
}

/* ================================================================
   33. CHIP FILTERS
   ================================================================ */

.results-toolbar {
    padding: var(--sp-3) 0;
    border: none;
    background: transparent;
    box-shadow: none;
    margin-bottom: var(--sp-3);
}

.filter-chips-row {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    align-items: center;
}

.filter-chips {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    align-items: center;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--r-full);
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-2);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
    white-space: nowrap;
}

.chip:hover {
    border-color: var(--brand-300);
    color: var(--brand-600);
    background: var(--brand-50);
}

.chip--active {
    background: var(--brand-600);
    color: #fff;
    border-color: var(--brand-600);
}
.chip--active:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

/* ================================================================
   34. RESULTS CARDS GRID
   ================================================================ */

.results-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--sp-4);
}

@media (max-width: 720px) {
    .results-cards-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   35. CARD REDESIGN — Rank Badge & Favorite Btn
   ================================================================ */

.supervisor-card {
    position: relative;
}

.rank-badge {
    position: absolute;
    top: -8px;
    left: 16px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 800;
    color: #fff;
    z-index: 1;
    box-shadow: var(--shadow-sm);
}

.rank-badge--1 { background: var(--brand-700); }
.rank-badge--2 { background: var(--slate-500); }
.rank-badge--3 { background: var(--slate-400); }

.favorite-btn {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-3);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
    padding: 0;
    z-index: 2;
}

.favorite-btn:hover {
    color: #ef4444;
    border-color: #fecaca;
    background: #fef2f2;
}

.favorite-btn.is-saved {
    color: #ef4444;
    border-color: #fecaca;
    background: #fef2f2;
}

[data-theme="dark"] .favorite-btn { background: var(--bg-subtle); }
[data-theme="dark"] .favorite-btn:hover,
[data-theme="dark"] .favorite-btn.is-saved {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.3);
}

/* Card header with ring score */
.card-header {
    padding-right: 40px; /* room for fav btn */
}

/* Area tags on cards */
.pill--domestic {
    background: rgba(16,185,129,0.1);
    color: #059669;
    border-color: rgba(16,185,129,0.2);
}
.pill--abroad {
    background: rgba(99,102,241,0.1);
    color: #4f46e5;
    border-color: rgba(99,102,241,0.2);
}

/* ================================================================
   36. FAVORITES SECTION
   ================================================================ */

.favorites-section {
    margin-bottom: var(--sp-5);
    padding: var(--sp-4);
    background: var(--bg-card);
    border: 1.5px solid rgba(239,68,68,0.2);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xs);
}

.favorites-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.875rem;
    font-weight: 700;
    color: #ef4444;
    margin-bottom: var(--sp-3);
}

.favorites-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.fav-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 12px;
    background: var(--bg-subtle);
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-1);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}

.fav-chip:hover {
    border-color: var(--brand-300);
    background: var(--brand-50);
    color: var(--brand-700);
}

.fav-chip-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.fav-chip-name { font-weight: 600; }

.fav-chip-score {
    font-size: 0.75rem;
    color: var(--score-high);
    font-weight: 700;
}

/* ================================================================
   37. MODAL IMPROVEMENTS
   ================================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    opacity: 0;
    transition: opacity var(--t-base) var(--ease);
}

.modal-overlay--open { opacity: 1; }

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    transform: translateY(8px);
    transition: transform var(--t-base) var(--ease-out);
}

.modal-overlay--open .modal-content { transform: translateY(0); }

.modal-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 1;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
}

.modal-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    flex-shrink: 0;
}

.modal-identity { flex: 1; min-width: 0; }
.modal-name {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--text-1);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}
.modal-institution { font-size: 0.8125rem; color: var(--text-2); font-weight: 500; margin: 0; }

.modal-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
    flex-shrink: 0;
    padding: 0;
}
.modal-fav-btn:hover, .modal-fav-btn.is-saved { color: #ef4444; border-color: #fecaca; background: #fef2f2; }

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    transition: all var(--t-fast) var(--ease);
    padding: 0;
}
.modal-close:hover { background: var(--slate-100); color: var(--text-1); }
[data-theme="dark"] .modal-close:hover { background: var(--bg-subtle); }

.modal-body { padding: var(--sp-5) var(--sp-6); }
.modal-score { flex-shrink: 0; }

/* ================================================================
   38. KEYBOARD HINT
   ================================================================ */


.footer-shortcuts {
    font-size: 0.75rem;
    color: var(--text-3);
    margin-top: var(--sp-1);
}

/* ================================================================
   39. LOAD ERROR STATE
   ================================================================ */

.load-error {
    text-align: center;
    padding: var(--sp-16) var(--sp-8);
}

.load-error-icon {
    font-size: 2.5rem;
    margin-bottom: var(--sp-4);
}

/* ================================================================
   40. PRINT STYLES
   ================================================================ */

/* Hidden outside print */
#printHeader { display: none; }

@media print {
    /* Force light colors regardless of theme */
    html, [data-theme="dark"] {
        --bg-page: #ffffff;
        --bg-card: #ffffff;
        --bg-subtle: #f8fafc;
        --border: #e2e8f0;
        --text-1: #0f172a;
        --text-2: #475569;
        --text-3: #94a3b8;
        --brand-50: #eff6ff;
        --brand-100: #dbeafe;
        --brand-600: #2563eb;
        --brand-700: #1d4ed8;
        color-scheme: light;
    }

    body { background: #fff !important; color: #0f172a !important; }

    /* Standard page margins */
    @page { margin: 15mm; }

    /* table-header-group → tüm tarayıcılar (Chrome, Safari, Firefox) her sayfada tekrarlar */
    .page-wrapper {
        display: table !important;
        width: 100%;
        padding: 0 !important;
    }
    #printHeader {
        display: table-header-group !important;
        text-align: center;
    }
    #printHeader img {
        display: inline-block;
        height: 32px;
        width: auto;
        padding: 10px 0 8px;
        border-bottom: 1px solid #e2e8f0;
    }
    #printBodyContent {
        display: table-row-group;
    }

    /* Hide the regular site header in print */
    .site-header { display: none !important; }

    /* Hide non-print elements */
    .quiz-section,
    .suggest-section,
    .site-footer,
    .results-toolbar,
    .results-header-actions,
    .results-search-wrap,
    .results-cta,
    .favorite-btn,
    .rank-badge,
    .card-links,
    .favorites-section,
    .hero,
    .info-strip {
        display: none !important;
    }

    .page-wrapper { max-width: 100%; }
    .main-content { max-width: 100%; padding: 0; }
    .results-section { display: block !important; }

    /* Block layout: grid item'larda break-inside tüm tarayıcılarda güvenilmez */
    .results-cards-grid {
        display: block !important;
    }

    .supervisor-card {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        break-inside: avoid;          /* Chrome / Firefox */
        page-break-inside: avoid;     /* Safari fallback */
        border: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        background: #fff !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Her 4. karttan sonra sayfa sonu — öngörülür, temiz geçiş */
    .results-cards-grid .supervisor-card:nth-child(4n) {
        break-after: page;
        page-break-after: always;
    }
    /* Son karttan sonra gereksiz boş sayfa açılmasın */
    .results-cards-grid .supervisor-card:last-child {
        break-after: avoid;
        page-break-after: avoid;
    }

    .supervisor-card * { color: #0f172a !important; }
    .card-institution, .card-match-reasons li { color: #475569 !important; }
    .pill, .area-tag { background: #f1f5f9 !important; color: #334155 !important; border-color: #e2e8f0 !important; }
    .score-ring-fill { stroke: #2563eb !important; }

    /* Print footer with Bioinforange branding */
    .results-section::after {
        content: 'bioinforange.com · Akademik Danışman Eşleştirici';
        display: block;
        text-align: center;
        font-size: 0.75rem;
        color: #94a3b8;
        margin-top: 24px;
        padding-top: 12px;
        border-top: 1px solid #e2e8f0;
    }
}

/* ================================================================
   41. AREA TAGS (ensure both variants work)
   ================================================================ */

.area-tag--general {
    background: var(--brand-50);
    color: var(--brand-700);
    border: 1px solid var(--brand-100);
    border-radius: var(--r-full);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    display: inline-block;
}

[data-theme="dark"] .area-tag--general {
    background: rgba(168,85,247,0.12);
    color: var(--brand-400);
    border-color: rgba(168,85,247,0.2);
}

/* ================================================================
   42. QUESTION HINT TEXT
   ================================================================ */

.question-hint {
    font-size: 0.8125rem;
    color: var(--text-3);
    font-style: italic;
    margin-top: calc(-1 * var(--sp-2));
    margin-bottom: var(--sp-4);
}

/* ================================================================
   43. CUSTOM "DIĞER" INPUT
   ================================================================ */

.diğer-input {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-color);
    font-family: inherit;
    font-size: 14px;
    display: none;
    transition: all 0.2s ease;
}

.diğer-input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.diğer-input.visible {
    display: block;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-theme="dark"] .diğer-input {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: #f1f0f9;
}