/* Shared finishing layer for taxonomy search, tree and analysis workspaces. */
#main {
    --taxonomy-ink: #243d55;
    --taxonomy-text: #405a73;
    --taxonomy-muted: #718799;
    --taxonomy-line: #e3edf5;
    --taxonomy-primary: #276d9e;
    background: #fff;
    color: var(--taxonomy-text);
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

#main .page-shell {
    max-width: none;
    margin: 14px auto 0;
    padding-bottom: 28px;
}

#main .page-shell > .crumb-wrap,
#main > .crumb-wrap {
    max-width: 1360px;
    margin: 0 auto 9px;
    padding: 0;
    color: #5c7892;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
}

#main .page-shell > .crumb-wrap .section,
#main > .crumb-wrap .section {
    color: #386b96;
    font-weight: 600;
}

#main .page-shell > .crumb-wrap .active.section,
#main > .crumb-wrap .active.section {
    color: #122130;
    font-weight: 600;
}

#main .page-shell > .crumb-wrap .divider.icon,
#main > .crumb-wrap .divider.icon {
    color: #8aa6bd;
    opacity: 1;
}

#main .page-shell > .crumb-wrap .home.icon,
#main > .crumb-wrap .home.icon {
    color: #386b96;
}

#main .hero-center,
#main .section-block,
#main .content-wrap {
    max-width: 1360px;
}

#main .hero-wrap {
    padding: 16px 22px 14px;
    background: linear-gradient(105deg, #91b9d0 0%, #b5d8e4 52%, #dceef3 100%);
    border-bottom: 1px solid #b7d0de;
    box-shadow: none;
    text-align: left;
}

#main .hero-center {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#main .hero-title {
    display: none;
}

#main .hero-subtitle,
#main .search-tip {
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    line-height: 1.5;
}

#main .hero-search .search-tip,
#main .search-box .search-tip,
#main .search-empty-hint,
#main .struct-search-hint,
#main .search-error {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

#main .related-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px 12px;
    margin-top: 9px;
    min-height: 20px;
}

#main .related-row .search-tip {
    flex: 0 0 auto;
    margin: 3px 0 0;
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    font-weight: 500;
}

#main .struct-search-hint,
#main .search-error {
    color: #fff1e8;
}

#main .related-row .suggestion-wrap,
#main .related-row .suggestion-list { display: contents; }

#main .tag-label.ui.label {
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #dee7ee;
    border-radius: 5px;
    background: #fff;
    box-shadow: none;
    color: #122130;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

#main .tag-label.ui.label:hover {
    transform: none;
    background: #f6f9fb;
    border-color: #bfd3e2;
    color: #1f608c;
}

#main .example-search-link {
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

#main .example-search-link:hover,
#main .example-search-link:focus-visible {
    color: #1f608c;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-decoration-style: solid;
    outline: none;
}

#main .hero-search,
#main .search-box {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

#main .hero-search-row,
#main .search-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

#main .hero-search-row .search-input,
#main .hero-search input,
#main .search-input-wrap input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    border: 1px solid #cedfec !important;
    border-radius: 6px !important;
    background: #fff;
    box-shadow: none !important;
    color: #2c445a;
    font-size: 14px;
}

#main .primary-search-btn,
#main .search-btn,
#main .reset-search-btn,
#main .reset-btn {
    flex: 0 0 auto;
    width: auto !important;
    min-height: 42px !important;
    height: 42px !important;
    box-sizing: border-box;
    padding: 0 14px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-size: 13px;
    white-space: nowrap;
}

#main .primary-search-btn,
#main .search-btn {
    background: var(--taxonomy-primary) !important;
    color: #fff !important;
}

#main .reset-search-btn,
#main .reset-btn {
    border: 1px solid #cedfec !important;
    background: #fff !important;
    color: var(--taxonomy-primary) !important;
}

#main .section-block,
#main .content-wrap { margin-top: 14px; }

#main .soft-panel.ui.segment,
#main .panel.ui.segment {
    padding: 8px !important;
    border-color: var(--taxonomy-line);
    border-radius: 12px;
    background: #fafcfd;
    box-shadow: 0 5px 16px rgba(40, 84, 123, .055);
}

#main .panel-box,
#main .tree-box,
#main .table-panel {
    border-color: var(--taxonomy-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

#main .result-workspace {
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
}

#main .panel-title,
#main .tree-box-title,
#main .table-panel-head {
    padding: 10px 13px;
    border-bottom-color: var(--taxonomy-line);
    background: #f5fafd;
    color: var(--taxonomy-ink);
    font-size: 14px;
    font-weight: 700;
}

#main .panel-body { padding: 12px; }

#main .section-head {
    margin-bottom: 12px;
    padding: 0 4px 10px;
    border-bottom-color: var(--taxonomy-line);
}

#main .section-title { color: var(--taxonomy-ink); font-size: 1rem; }
#main .section-note { color: var(--taxonomy-muted); font-size: 13px; }

#main .toolbar { gap: 7px; }
#main .toolbar .ui.button {
    min-height: 34px;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-size: 13px;
}

#main .tree-box-body {
    padding: 12px 16px 14px 24px;
    background: #fff;
}

#main #searchTree,
#main #taxonomyTree,
#main .tree-box-body { min-height: 520px; }

#main .jstree-default .jstree-anchor {
    color: #2c445a;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.9;
}

#main .jstree-default .jstree-clicked,
#main .jstree-default .jstree-hovered {
    background: #edf6fc !important;
    color: var(--taxonomy-primary) !important;
    box-shadow: none !important;
}

#main .result-bar {
    margin-bottom: 12px;
    padding: 11px 13px;
    border-color: var(--taxonomy-line);
    border-radius: 8px;
    background: #f7fbff;
}

#main .result-title,
#main .result-label { color: var(--taxonomy-ink); font-size: 14px; }

/* Detail result shared by the lowest-common-ancestor workspace. */
#main .detail-header {
    gap: 14px;
    margin-bottom: 12px;
    padding: 14px;
    border-color: var(--taxonomy-line);
    border-radius: 8px;
    background: #fff;
}

#main .detail-title {
    color: var(--taxonomy-ink);
    font-size: 1.45rem;
    line-height: 1.3;
}

#main .rank-badge {
    min-height: 25px;
    padding: 3px 8px;
    border-radius: 5px;
    border-color: #d7e6f1;
    background: #eef6fb;
    color: var(--taxonomy-primary);
    font-size: 12px;
}

#main .detail-meta-row { gap: 7px 12px; margin-top: 8px; }
#main .detail-meta-label,
#main .detail-meta-value { font-size: 13px; }

#main .detail-header-btn,
#main .detail-action-link {
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 7px;
    box-shadow: none;
    font-size: 13px;
}

#main .detail-tab-shell {
    margin-top: 2px;
    border-color: var(--taxonomy-line);
    border-radius: 8px;
    box-shadow: none;
}

#main .detail-tabs {
    padding: 5px 6px 0;
    background: #f5fafd;
    border-bottom-color: var(--taxonomy-line);
}

#main .detail-tab-btn {
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 6px 6px 0 0;
    color: var(--taxonomy-text);
    font-size: 14px;
}

#main .detail-tab-panel { min-height: 0; padding: 14px; }
#main .overview-block + .overview-block { margin-top: 14px; }
#main .overview-lineage-block { margin-top: 16px; }
#main .overview-section-title,
#main .detail-section-title { margin-bottom: 8px; color: var(--taxonomy-ink); font-size: 14px; }

#main .overview-info-card,
#main .overview-code-card,
#main .info-card,
#main .overview-lineage-path,
#main .code-panel {
    border-color: var(--taxonomy-line);
    border-radius: 7px;
    background: #f9fcfe;
}

#main .overview-info-card,
#main .overview-code-card,
#main .info-card { min-height: 0; padding: 10px 12px; }
#main .overview-info-card .info-label,
#main .info-label { margin-bottom: 5px; font-size: 12px; }
#main .overview-info-card .info-value,
#main .info-value { font-size: 14px; line-height: 1.55; }
#main .overview-code-title { margin-bottom: 5px; font-size: 14px; }
#main .overview-lineage-path { gap: 6px; padding: 10px 12px; }
#main .overview-lineage-path a { font-size: 13px; font-weight: 600; }

#main .reference-list { gap: 9px; max-height: 460px; }
#main .reference-card { gap: 10px; padding: 11px 13px; border-color: var(--taxonomy-line); border-radius: 8px; }
#main .reference-index { width: 25px; height: 25px; border-radius: 6px; font-size: 12px; }
#main .reference-key { font-size: 14px; }
#main .reference-text { font-size: 13px; line-height: 1.55; }

#main .example-card {
    padding: 12px;
    border-color: var(--taxonomy-line);
    border-radius: 8px;
    box-shadow: none;
}
#main .example-title { font-size: 14px; }
#main .example-desc,
#main .example-taxids { font-size: 13px; line-height: 1.55; }

#main .loader-wrap,
#main .empty-state {
    min-height: 170px;
    border-radius: 8px;
    background: #f9fcfe;
    color: var(--taxonomy-muted);
}

#main .taxonomy-table.ui.table,
#main .log-table.ui.table {
    color: #2c445a;
}

#main .taxonomy-table.ui.table thead th,
#main .log-table.ui.table thead th {
    padding: .72em .8em !important;
    background: #f5fafd !important;
    color: #243d55 !important;
    font-size: 13px;
    font-weight: 700;
}

#main .taxonomy-table.ui.table tbody td,
#main .log-table.ui.table tbody td {
    padding: .72em .8em !important;
    color: #0c1c2b;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
}

#main .taxonomy-table.ui.table tbody tr:nth-child(even) td,
#main .log-table.ui.table tbody tr:nth-child(even) td { background: #fafcfe; }

#main .lineage-wrap { padding: 8px 10px; }

#main .lineage-preview {
    max-height: 3.2em;
    overflow: hidden;
    color: #0c1c2b;
    line-height: 1.6;
    white-space: pre-wrap;
}

#main .lineage-preview.is-expanded { max-height: none; }

#main .lineage-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    margin-top: 8px;
    padding: 3px 8px;
    border: 1px solid #d6e4ef;
    border-radius: 5px;
    background: #fff;
    color: #2d628b;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

#main .lineage-toggle:hover {
    border-color: #bdd4e5;
    background: #f5fafd;
    color: #205b85;
    text-decoration: none;
}

@media only screen and (max-width: 768px) {
    #main .page-shell { margin-top: 10px; padding: 0 0 24px; }
    #main .page-shell > .crumb-wrap {
        margin-bottom: 8px;
        padding: 0 12px;
        box-sizing: border-box;
    }
    #main .section-block,
    #main .content-wrap {
        box-sizing: border-box;
        padding: 0 12px;
    }
    #main .hero-wrap { padding: 15px 14px; }
    #main .hero-search-row,
    #main .search-row { flex-wrap: wrap; }
    #main .tree-box-body { padding-left: 14px; }
    #main #searchTree,
    #main #taxonomyTree,
    #main .tree-box-body { min-height: 380px; }
}