/* ── Global ── */
body {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    color: #333;
    background: #fff;
    margin: 0;
}

a { color: darkorange; }
a:hover { color: #c77700; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
}

/* ── Header ── */
#header {
    background: #6b1f1f;            /* Shanghai red, vs London charcoal */
    color: #fff;
    padding: 50px 0 30px;
}
#header h1 { font-size: 48px; margin-bottom: 5px; }
#header h2 {
    font-size: 22px; font-weight: 300;
    font-family: 'Raleway', sans-serif; color: #f0d7d7; margin-top: 0;
}

/* ── Source toggle ── */
.source-toggle { margin-top: 18px; }
.source-toggle .btn {
    margin: 0 4px; font-size: 13px; padding: 4px 16px;
    background: transparent; color: #fff; border: 1px solid #e0b4b4;
}
.source-toggle .btn.active { background: #fff; color: #6b1f1f; border-color: #fff; }
.source-toggle .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Navigation ── */
#nav {
    background: #f8f8f8; border-bottom: 1px solid #ddd; padding: 12px 0;
    position: sticky; top: 0; z-index: 100;
}
#nav .nav-link {
    display: inline-block; padding: 6px 20px; color: #666; text-decoration: none;
    font-size: 15px; font-weight: 400; border-bottom: 2px solid transparent; transition: all 0.2s;
    cursor: pointer;
}
#nav .nav-link:hover { color: #333; border-bottom-color: #ccc; }
#nav .nav-link.active { color: darkorange; border-bottom-color: darkorange; }

/* ── Content Sections ── */
.content-section { display: none; padding: 40px 0 60px; }
.content-section.active { display: block; }
.content-section h2 {
    font-size: 32px; margin-bottom: 10px; border-bottom: 2px solid #333;
    padding-bottom: 8px; display: inline-block;
}
.section-desc { color: #666; font-size: 15px; margin-bottom: 25px; max-width: 820px; }

/* ── About ── */
.abstract { font-size: 16px; line-height: 1.7; max-width: 820px; margin-bottom: 30px; }
.authors h3, .method-note h3 {
    font-size: 20px; border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-top: 30px;
}
.authors p { margin: 5px 0; }
.method-note { background: #f9f9f9; padding: 20px; border-radius: 5px; margin-top: 20px; }
.method-note p { font-size: 14px; margin: 5px 0; }

/* ── Topic Selector ── */
#topic-selector {
    max-height: 520px; overflow-y: auto; border: 1px solid #ddd;
    border-radius: 5px; padding: 10px; background: #fafafa;
}
.selector-header { margin-bottom: 10px; }
.topic-checkbox { display: flex; align-items: center; padding: 3px 0; font-size: 13px; cursor: pointer; }
.topic-checkbox input { margin-right: 8px; }
.topic-checkbox:hover { background: #f0f0f0; }
.topic-color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; flex: 0 0 auto; }
.fin-badge {
    margin-left: auto; font-size: 10px; color: #6b1f1f; background: #f3e2e2;
    border-radius: 8px; padding: 0 6px; white-space: nowrap;
}

/* ── Topic Words ── */
#topic-words { padding: 15px; background: #f9f9f9; border-radius: 5px; min-height: 60px; }
.word-chip { display: inline-block; padding: 3px 10px; margin: 2px; background: #e8e8e8; border-radius: 12px; font-size: 12px; }

/* ── Finance section ── */
.fin-rank { max-width: 760px; }
.fin-row { display: flex; align-items: center; margin: 4px 0; font-size: 13px; }
.fin-row .fin-label { width: 280px; flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-row .fin-bar-wrap { flex: 1; background: #eee; border-radius: 4px; height: 14px; }
.fin-row .fin-bar { background: #6b1f1f; height: 14px; border-radius: 4px; }
.fin-row .fin-val { width: 48px; text-align: right; flex: 0 0 auto; color: #666; }

/* ── Data Table ── */
.table th { background: #f0f0f0; font-weight: 600; font-size: 14px; }
.table td { font-size: 14px; }

/* ── Footer ── */
footer { background: #2C2C2C; color: #999; padding: 20px 0; font-size: 13px; }

/* ── Dendrogram ── */
#dendrogram-container { overflow: auto; max-height: 1100px; border: 1px solid #eee; border-radius: 5px; background: #fafafa; }
#dendrogram .link { transition: stroke-width 0.2s; }
#dendrogram .link:hover { stroke-width: 3px !important; stroke: darkorange !important; opacity: 1 !important; }
#dendrogram .node text { cursor: pointer; transition: fill 0.2s; }
#dendrogram .node text:hover { fill: darkorange; }

/* ── Responsive ── */
@media (max-width: 768px) {
    #header h1 { font-size: 28px; }
    #header h2 { font-size: 16px; }
    #nav .nav-link { padding: 6px 10px; font-size: 13px; }
    .fin-row .fin-label { width: 150px; }
}