:root {
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: var(--font-sans);
    --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;

    color-scheme: light;

    /* Neutral colors - Light Mode */
    --bg-app: #e7e9eb;
    --bg-sidebar: #f1f2f3;
    --bg-card: #ffffff;
    --bg-viewport: #fafafa;
    --bg-input: #ffffff;
    --bg-muted: #eceeef;
    --bg-tooltip: rgba(18, 20, 23, 0.97);

    --border-color: #d6d8db;
    --border-strong: #b3b7bb;
    --border-glow: rgba(47, 102, 144, 0.18);

    --text-primary: #14161a;
    --text-secondary: #4b4f55;
    --text-muted: #7a7e85;
    --text-input: #14161a;
    --text-tooltip: #f2f2f2;

    /* Functional signal colors (not brand decoration): blue = active/selected/primary, red = highlighted/destructive, amber = caution */
    --accent-indigo: #2f6690;
    --accent-indigo-light: #dce6ec;
    --accent-rose: #b23b30;
    --accent-rose-light: #f2ddd9;
    --accent-amber: #8a6a1f;
    --accent-amber-light: #f0e8d0;

    --focus-ring: rgba(47, 102, 144, 0.28);
    --accent-rose-ring: rgba(178, 59, 48, 0.25);

    --shadow-sm: none;
    --shadow-md: 0 1px 2px rgba(15, 17, 20, 0.06);
    --shadow-lg: 0 2px 8px rgba(15, 17, 20, 0.12);
    --shadow-xl: 0 6px 20px rgba(15, 17, 20, 0.16);

    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-full: 9999px;

    --transition-fast: 120ms ease;
    --transition-normal: 180ms ease;

    /* D3 Layout Specifics */
    --tree-node-fill: #ffffff;
    --tree-node-stroke: #b3b7bb;
    --tree-node-text: #14161a;
    --tree-node-annot: #14161a;
    --tree-link: #8b8f94;
    --tree-link-bg: #ffffff;
    --tree-link-text: #14161a;

    --sidebar-width: 300px;
    --drawer-width: 300px;
}

body.dark-mode {
    color-scheme: dark;

    /* Neutral colors - Dark Mode */
    --bg-app: #17181a;
    --bg-sidebar: #1c1d1f;
    --bg-card: #232426;
    --bg-viewport: #151617;
    --bg-input: #232426;
    --bg-muted: #26272a;
    --bg-tooltip: rgba(8, 9, 10, 0.98);

    --border-color: #34363a;
    --border-strong: #47494e;
    --border-glow: rgba(91, 147, 196, 0.22);

    --text-primary: #eceeef;
    --text-secondary: #b3b7bc;
    --text-muted: #82868c;
    --text-input: #eceeef;

    --accent-indigo: #5b93c4;
    --accent-indigo-light: rgba(91, 147, 196, 0.16);
    --accent-rose: #cf6a5c;
    --accent-rose-light: rgba(207, 106, 92, 0.2);
    --accent-amber: #c9a24a;
    --accent-amber-light: rgba(201, 162, 74, 0.16);

    --focus-ring: rgba(91, 147, 196, 0.32);
    --accent-rose-ring: rgba(207, 106, 92, 0.35);

    --shadow-sm: none;
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.5);

    --tree-node-fill: #ffffff;
    --tree-node-stroke: #47494e;
    --tree-node-text: #14161a;
    --tree-node-annot: #14161a;
    --tree-link: #5c5f64;
    --tree-link-bg: #ffffff;
    --tree-link-text: #14161a;
}

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

html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--accent-indigo);
    color: #ffffff;
}

:focus-visible {
    outline: 2px solid var(--accent-indigo);
    outline-offset: 1px;
}

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

/* App Container Layout */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
}

/* Sidebar Styling */
.app-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 50;
    transition: transform var(--transition-normal), width var(--transition-normal);
}

.app-sidebar.is-collapsed {
    width: 0;
    transform: translateX(-100%);
    border-right: none;
}

.sidebar-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 52px;
}

.brand-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.brand-title {
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.brand-title .accent-text {
    color: var(--text-muted);
    font-weight: 500;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Scrollbar styles */
.sidebar-content::-webkit-scrollbar,
.loaded-files-container::-webkit-scrollbar,
.drawer-content::-webkit-scrollbar {
    width: 6px;
}
.sidebar-content::-webkit-scrollbar-thumb,
.loaded-files-container::-webkit-scrollbar-thumb,
.drawer-content::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
}
.sidebar-content::-webkit-scrollbar-track,
.loaded-files-container::-webkit-scrollbar-track,
.drawer-content::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 0 0 1rem 0;
}

.sidebar-content > .sidebar-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.card-header-simple {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    color: var(--text-muted);
}

.card-header-simple svg {
    width: 13px;
    height: 13px;
    color: var(--text-muted);
}

.card-header-simple h4 {
    font-size: 0.7rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-family: var(--font-sans);
    color: var(--text-muted);
}

/* Dropzone Area */
.dropzone-card {
    padding: 0 0 1rem 0;
}

.dropzone-area {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 1rem 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}

.dropzone-area:hover,
#treeContainer.drag-over .empty-panel {
    border-color: var(--accent-indigo);
    background: var(--accent-indigo-light);
}

.dropzone-info h3 {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.dropzone-info p {
    font-size: 0.73rem;
    color: var(--text-muted);
}

.dropzone-icon {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    margin-bottom: 0.1rem;
}

#fileInput {
    display: none;
}

/* Loaded Files List */
.files-list-card {
    display: flex;
    flex-direction: column;
    max-height: 220px;
}

.loaded-files-container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-right: -0.25rem;
    padding-right: 0.25rem;
}

.empty-files-list {
    font-size: 0.76rem;
    color: var(--text-muted);
    text-align: center;
    padding: 0.85rem 0;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 500;
    transition: background var(--transition-fast);
    cursor: pointer;
    border: 1px solid transparent;
}

.file-item:hover {
    background: var(--border-color);
}

.file-item.is-selected {
    background: var(--accent-indigo-light);
    border-color: var(--accent-indigo);
}

.file-item-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    font-weight: 550;
}

.file-item-badge {
    font-size: 0.66rem;
    font-family: var(--font-mono);
    padding: 1px 5px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.file-item-delete {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    width: 20px;
    height: 20px;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.file-item-delete:hover {
    color: var(--accent-rose);
    background: var(--accent-rose-light);
}

.file-item-delete svg {
    width: 13px;
    height: 13px;
}

/* Forms */
.form-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.form-group label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

select,
input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-input);
    border-radius: var(--radius-sm);
    height: 32px;
    padding: 0 0.55rem;
    font-family: inherit;
    font-size: 0.8rem;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

select:hover,
input[type="text"]:hover {
    border-color: var(--border-strong);
}

select:focus,
input[type="text"]:focus {
    border-color: var(--accent-indigo);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Formula input specifics */
.formula-group {
    margin-top: 0.6rem;
}

.formula-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.formula-search-box input {
    width: 100%;
    padding-right: 2rem;
    font-family: var(--font-mono);
}

.search-input-icon {
    position: absolute;
    right: 0.6rem;
    width: 13px;
    height: 13px;
    color: var(--text-muted);
    pointer-events: none;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent-indigo);
    cursor: pointer;
    flex-shrink: 0;
}

/* Highlight Legends */
.highlight-legend {
    margin-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    padding-top: 0.65rem;
}

.legend-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.legend-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.legend-bar-wrapper {
    height: 7px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.legend-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #10b981, #ef4444);
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.contact-links a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-family: var(--font-mono);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-links a:hover {
    color: var(--accent-indigo);
}

.contact-links a svg {
    width: 12px;
    height: 12px;
}

/* Main Workspace Panel */
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.app-header-bar {
    height: 52px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    z-index: 40;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.sidebar-info-text {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 450;
    margin-top: -0.3rem;
    margin-bottom: 0.55rem;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quick-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.divider-v {
    width: 1px;
    height: 18px;
    background: var(--border-color);
    margin: 0 0.2rem;
}

/* Interactive elements */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 30px;
    padding: 0 0.75rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 550;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    border: 1px solid transparent;
    white-space: nowrap;
}

.btn svg {
    width: 13px;
    height: 13px;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: var(--accent-indigo);
    color: #ffffff;
    border-color: var(--accent-indigo);
}
.btn-primary:hover {
    background: color-mix(in srgb, var(--accent-indigo) 85%, black);
}

.btn-secondary {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.btn-secondary:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
    background: var(--bg-muted);
}

.btn-danger-outline {
    background: transparent;
    border-color: var(--border-color);
    color: var(--accent-rose);
}
.btn-danger-outline:hover {
    background: var(--accent-rose-light);
    border-color: var(--accent-rose);
}

.btn-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn-icon:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
    background: var(--bg-muted);
}

.btn-icon svg {
    width: 15px;
    height: 15px;
}

.btn-icon:active {
    transform: scale(0.95);
}

/* Tree Grid Layout */
#treeContainer {
    flex: 1;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    overflow-y: auto;
    align-content: start;
    transition: grid-template-columns var(--transition-normal);
}

#treeContainer.cols-1 { grid-template-columns: minmax(0, 1fr); }
#treeContainer.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#treeContainer.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#treeContainer.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Tree Card styling */
.tree-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    height: min(65vh, 600px);
    min-height: 480px;
    overflow: hidden;
    position: relative;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.tree-card:hover {
    border-color: var(--border-strong);
}

.tree-card.is-expanded {
    grid-column: 1 / -1;
    height: calc(100vh - 100px);
    min-height: 600px;
}

.tree-card-header {
    padding: 0.6rem 0.85rem;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.tree-card-header:active {
    cursor: grabbing;
}

.title-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.tree-card-header h2 {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.card-title-formula {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 0.5rem;
    background: var(--bg-card);
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    display: inline-block;
    vertical-align: middle;
    line-height: 1.4;
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.badge {
    font-size: 0.62rem;
    font-weight: 650;
    padding: 1px 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: var(--font-mono);
}

.badge-warning {
    background: var(--accent-amber-light);
    color: var(--accent-amber);
    border-color: color-mix(in srgb, var(--accent-amber) 35%, transparent);
}

.header-btns {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

.header-btns .icon-btn {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.header-btns .icon-btn:hover {
    color: var(--text-primary);
    background: var(--bg-muted);
}

.header-btns .close-btn:hover {
    color: var(--accent-rose);
    background: var(--accent-rose-light);
}

.header-btns .icon-btn svg {
    width: 13px;
    height: 13px;
}

.tree-svg-container {
    flex: 1;
    min-height: 0;
    background-color: var(--bg-viewport);
    position: relative;
}

/* MS/MS Spectrum Peak View (Card Bottom) */
.tree-spectrum-container {
    height: 84px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 0.25rem 0.5rem 0.4rem 0.5rem;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.spectrum-title {
    font-size: 0.65rem;
    font-weight: 650;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.045em;
    margin-bottom: 0.15rem;
}

.spectrum-svg-wrapper {
    flex: 1;
    min-height: 0;
    width: 100%;
}

.spectrum-peak {
    stroke: var(--accent-indigo);
    stroke-width: 1.5px;
    transition: stroke var(--transition-fast), stroke-width var(--transition-fast);
    cursor: pointer;
}

.spectrum-peak:hover,
.spectrum-peak.is-highlighted {
    stroke: var(--accent-rose);
    stroke-width: 3px;
}

.spectrum-peak-label {
    fill: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 8px;
    text-anchor: middle;
}

body:not(.dark-mode) .spectrum-peak-label {
    fill: #000000;
}

.spectrum-axis {
    stroke: var(--border-color);
    stroke-width: 1px;
}

/* Ghost Sortable Element */
.sortable-ghost {
    opacity: 0.2;
    border: 1px dashed var(--accent-indigo);
}

/* D3 SVG Visualization Classes */
.node {
    cursor: pointer;
}

.node rect {
    fill: var(--tree-node-fill);
    stroke: var(--tree-node-stroke);
    stroke-width: 1.25px;
    transition: stroke var(--transition-fast), fill var(--transition-fast), stroke-width var(--transition-fast);
}

.node:hover rect,
.node.is-selected rect {
    stroke: var(--accent-indigo);
    stroke-width: 2px;
}

.node-label {
    fill: var(--tree-node-text);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
}

.annot-text {
    fill: var(--tree-node-annot);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
}

.link {
    fill: none;
    stroke: var(--tree-link);
    stroke-width: 1.25px;
    transition: stroke var(--transition-fast), stroke-width var(--transition-fast);
}

.link-group {
    cursor: pointer;
}

.link-group:hover .link {
    stroke: var(--accent-indigo);
    stroke-width: 2px;
}

.link-text-bg {
    fill: var(--tree-link-bg);
    stroke: var(--border-color);
    stroke-width: 1px;
    transition: fill var(--transition-fast), stroke var(--transition-fast);
}

.link-text {
    fill: var(--tree-link-text);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
}

/* Sychronized hover highlighting across graphs */
.node.hover-match rect {
    stroke: var(--accent-rose) !important;
    stroke-width: 2.5px !important;
}

.node.hover-match text.node-label {
    font-weight: 700 !important;
}

.link-group.hover-match .link {
    stroke: var(--accent-rose) !important;
    stroke-width: 3px !important;
}

.link-group.hover-match .link-text-bg {
    fill: var(--accent-rose) !important;
    stroke: var(--accent-rose) !important;
}

.link-group.hover-match .link-text {
    fill: #ffffff !important;
    font-weight: 700 !important;
}

/* Lineage highlight path glow */
.node.is-lineage-path rect {
    stroke: var(--accent-indigo);
    stroke-width: 2px;
}

.link-group.is-lineage-path .link {
    stroke: var(--accent-indigo);
    stroke-width: 2px;
    stroke-dasharray: 4 2;
    animation: dash 15s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -100;
    }
}

/* Tooltip and Toasts */
.tooltip {
    /* Fixed so the JS clamp can work in plain viewport coordinates */
    position: fixed;
    z-index: 1000;
    max-width: 300px;
    padding: 0.6rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    background: var(--bg-tooltip);
    color: var(--text-tooltip);
    font-size: 0.76rem;
    line-height: 1.5;
    pointer-events: none;
    box-shadow: var(--shadow-lg);
}

.tooltip strong {
    font-size: 0.8rem;
    color: #ffffff;
    font-family: var(--font-mono);
}

.tooltip code {
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
}

#toastContainer {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    pointer-events: none;
}

.toast {
    max-width: 360px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    font-size: 0.8rem;
    line-height: 1.4;
    font-weight: 450;
    pointer-events: auto;
    animation: toastFadeIn 160ms ease-out, toastFadeOut 200ms ease-in 3.7s forwards;
}

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

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

/* Empty Workspace State */
.empty-placeholder {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    width: 100%;
}

.empty-panel {
    max-width: 480px;
    width: 100%;
    background: var(--bg-card);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 2.25rem 2rem;
    text-align: center;
}

.empty-panel h2 {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 650;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.empty-panel p {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.example-actions {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.example-btn {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0.6rem 0.9rem;
    height: auto;
    gap: 0.15rem;
    max-width: 260px;
    width: 100%;
}

.example-btn svg {
    width: 15px;
    height: 15px;
    margin-bottom: 0.2rem;
    flex-shrink: 0;
}

.example-btn strong {
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font-sans);
}

.example-btn span {
    font-size: 0.7rem;
    font-weight: 450;
}

.example-btn.btn-secondary span {
    color: var(--text-muted);
}

.example-btn.btn-primary span {
    color: rgba(255, 255, 255, 0.75);
}

/* Slide-out Details Inspector Drawer */
.app-drawer {
    width: var(--drawer-width);
    flex-shrink: 0;
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 50;
    transition: transform var(--transition-normal), width var(--transition-normal);
}

.app-drawer.is-collapsed {
    width: 0;
    transform: translateX(100%);
    border-left: none;
}

.drawer-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
}

.drawer-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-primary);
}

.info-icon-container {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.info-icon-container svg {
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.info-icon-container:hover svg {
    color: var(--text-primary);
}

.drawer-title h3 {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Empty Inspector State */
.drawer-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    height: 100%;
}

.empty-state-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--text-muted);
}

.empty-state-icon-wrapper svg {
    width: 20px;
    height: 20px;
}

.drawer-empty-state h4 {
    font-size: 0.85rem;
    font-weight: 650;
    margin-bottom: 0.4rem;
    color: var(--text-secondary);
}

.drawer-empty-state p {
    font-size: 0.76rem;
    line-height: 1.5;
}

/* Active Inspector View Elements */
.inspector-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.drawer-content > .inspector-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.inspector-section-title {
    font-size: 0.68rem;
    font-weight: 650;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.045em;
    margin-bottom: 0.2rem;
}

.inspector-formula-title {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 650;
    color: var(--accent-indigo);
    letter-spacing: -0.01em;
}

.inspector-subtitle-info {
    font-size: 0.76rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.inspector-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.inspector-meta-item {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0.55rem;
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
}

.inspector-meta-label {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.1rem;
}

.inspector-meta-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--text-primary);
}

/* Elemental Breakdown Grid */
.element-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
}

.element-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0.25rem;
    border-radius: var(--radius-sm);
    font-weight: 650;
    font-size: 0.76rem;
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
}

.element-symbol {
    font-size: 0.85rem;
    margin-bottom: 0.05rem;
}

.element-count {
    font-size: 0.72rem;
    color: inherit;
    opacity: 0.85;
}

/* Specific elements colors */
.element-badge.el-c { background: #1e293b; color: #f8fafc; border-color: #334155; }
.element-badge.el-h { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
.element-badge.el-o { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }
.element-badge.el-n { background: #dbeafe; color: #2563eb; border-color: #bfdbfe; }
.element-badge.el-s { background: #fef9c3; color: #ca8a04; border-color: #fef08a; }
.element-badge.el-p { background: #ffedd5; color: #ea580c; border-color: #fed7aa; }
.element-badge.el-other { background: #f3e8ff; color: #9333ea; border-color: #e9d5ff; }

/* Progress Gauge / Score visualization */
.inspector-gauge-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.radial-progress-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.radial-progress-svg {
    transform: rotate(-90deg);
}

.radial-circle-bg {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 3.5;
}

.radial-circle-val {
    fill: none;
    stroke: var(--accent-indigo);
    stroke-width: 3.5;
    stroke-linecap: butt;
    transition: stroke-dasharray var(--transition-normal);
}

.radial-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.68rem;
    font-weight: 650;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.progress-bar-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.progress-bar-container {
    height: 5px;
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--accent-indigo);
    border-radius: var(--radius-sm);
    transition: width var(--transition-normal);
}

/* Ancestral Pathway Lineage list */
.lineage-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    position: relative;
    padding-left: 0.9rem;
}

.lineage-list::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--border-color);
}

.lineage-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    padding: 0.22rem 0;
    position: relative;
}

.lineage-item::before {
    content: '';
    position: absolute;
    left: -13px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.lineage-item.is-active::before {
    background: var(--accent-indigo);
    border-color: var(--accent-indigo);
}

.lineage-item-formula {
    font-weight: 650;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.lineage-item-loss {
    font-size: 0.68rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--bg-muted);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* Sidebar toggles helper script classes */
.sidebar-toggle-btn.inner-toggle {
    background: transparent;
    border: none;
}

/* Responsive overrides live in one block at the end of this file */

/* Persistent active selections styling */
.node.is-active-selection rect {
    stroke: var(--accent-rose) !important;
    stroke-width: 2.5px !important;
}

.spectrum-peak.is-selected-peak {
    stroke: var(--accent-rose) !important;
    stroke-width: 4px !important;
}

.link-group.is-active-selection .link {
    stroke: var(--accent-rose) !important;
    stroke-width: 3px !important;
}

.link-group.is-active-selection .link-text-bg {
    fill: var(--accent-rose) !important;
    stroke: var(--accent-rose) !important;
    stroke-width: 1.5px !important;
}

.link-group.is-active-selection .link-text {
    fill: #ffffff !important;
    font-weight: 700 !important;
}

/* Visibility Utilities */
.is-hidden {
    display: none !important;
}

/* Header Search Styles */
.header-search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.header-search-container .search-box {
    position: relative;
    width: 240px;
}

.header-search-container .search-box input {
    width: 100%;
    padding-right: 2.1rem;
    font-family: var(--font-mono);
}

.header-search-container .search-input-icon {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 0.3rem;
}

.search-result-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--bg-muted);
}

.search-result-item .result-title {
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--text-primary);
}

.search-result-item .result-subtitle {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* Resizing utilities to disable transitions on drag */
.app-sidebar.is-resizing,
.app-drawer.is-resizing {
    transition: none !important;
}

/* Panel Resizer Handles */
.panel-resizer {
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    transition: background var(--transition-fast);
    flex-shrink: 0;
    z-index: 60;
    position: relative;
}

.panel-resizer:hover,
.panel-resizer.is-dragging {
    background: var(--accent-indigo);
}

.resizer-left {
    border-right: 1px solid var(--border-color);
    margin-right: -3px;
    margin-left: -2px;
}

.resizer-right {
    border-left: 1px solid var(--border-color);
    margin-left: -3px;
    margin-right: -2px;
}

/* ==========================================================================
   Responsive layout
   --------------------------------------------------------------------------
   Wide viewports keep the docked three-column shell
   (sidebar | workspace | inspector).

   From 1024px down the two side panels turn into overlay drawers that sit on
   top of the workspace. They used to be stacked into the flex column instead,
   but since each panel also keeps `height: 100%` of the 100vh shell, the
   workspace -- and with it the whole header bar (Load Examples, Fit Views,
   Clear All, theme toggle) -- was pushed roughly 1200px down and clipped away
   by the container's `overflow: hidden`, i.e. invisible on any phone.
   ========================================================================== */

/* Dims the workspace behind an open overlay panel; inert on wide viewports */
.panel-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(10, 12, 15, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

@media (max-width: 1024px) {
    .app-container {
        /* dvh keeps the shell clear of mobile browser chrome */
        height: 100dvh;
    }

    /* Column resizing is a mouse affordance and the panels no longer sit in flow */
    .panel-resizer {
        display: none;
    }

    .app-main {
        width: 100%;
    }

    .app-sidebar,
    .app-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        height: 100%;
        width: min(330px, 86vw) !important;
        z-index: 120;
        box-shadow: var(--shadow-xl);
    }

    .app-sidebar {
        left: 0;
    }

    .app-drawer {
        right: 0;
    }

    /* Collapsed means "slid off screen" here, not "zero width" */
    .app-sidebar.is-collapsed {
        transform: translateX(-100%);
    }

    .app-drawer.is-collapsed {
        transform: translateX(100%);
    }

    .panel-scrim {
        display: block;
    }

    .panel-scrim.is-visible {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 768px) {
    /* Two or more tree columns are unreadable at phone widths */
    #treeContainer.cols-2,
    #treeContainer.cols-3,
    #treeContainer.cols-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    #treeContainer {
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .tree-card {
        height: min(72vh, 560px);
        min-height: 340px;
    }

    .tree-card.is-expanded {
        height: calc(100dvh - 130px);
        min-height: 0;
    }

    /* Icon-only quick actions so every one of them fits on a phone header */
    .quick-actions span {
        display: none;
    }

    .quick-actions button svg {
        margin: 0;
    }

    .empty-panel {
        padding: 1.5rem 1.1rem;
    }

    .example-actions {
        flex-direction: column;
    }

    .example-btn {
        width: 100%;
        max-width: none;
        /* Extra room under the description line, which sits tight against the
           border at the default padding */
        padding: 0.7rem 0.9rem 0.8rem;
        gap: 0.2rem;
    }

    #toastContainer {
        left: 0.75rem;
        right: 0.75rem;
    }

    .toast {
        max-width: none;
    }

    .tooltip {
        max-width: min(300px, calc(100vw - 24px));
    }
}

/* Short viewports (a phone held in landscape): shrink the card so a whole tree
   still fits between the header and the bottom of the screen */
@media (max-height: 500px) {
    .tree-card {
        height: min(78vh, 560px);
        min-height: 240px;
    }

    .tree-spectrum-container {
        height: 68px;
    }
}

@media (max-width: 640px) {
    /* Search moves to its own row so the action buttons never get clipped */
    .app-header-bar {
        height: auto;
        min-height: 52px;
        padding: 0.5rem 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .header-left {
        order: 1;
    }

    .header-right {
        order: 2;
        margin-left: auto;
    }

    .header-search-container {
        order: 3;
        flex: 1 0 100%;
    }

    .header-search-container .search-box {
        width: 100%;
    }

    .drawer-header,
    .sidebar-header {
        padding: 0.75rem;
    }
}

/* Touch input: bigger hit areas, and inputs large enough that iOS Safari
   does not zoom the page when they receive focus. */
@media (pointer: coarse) {
    /* min-height rather than height: buttons that stack their own label over a
       description (.example-btn) must still be free to grow past the minimum */
    .btn {
        min-height: 36px;
    }

    .btn-icon {
        width: 36px;
        height: 36px;
    }

    .header-btns .icon-btn {
        width: 32px;
        height: 32px;
    }

    .header-btns .icon-btn svg {
        width: 15px;
        height: 15px;
    }

    select,
    input[type="text"] {
        height: 38px;
        font-size: 16px;
    }

    .file-item-delete {
        width: 28px;
        height: 28px;
    }

    .checkbox-row input[type="checkbox"] {
        width: 17px;
        height: 17px;
    }

    /* d3-zoom sets `touch-action: none` inline on the SVG, which would swallow
       every vertical swipe over a near-full-height card. Allow the page to
       scroll with one finger; two fingers still pan and zoom the tree (see the
       zoom filter in treeRenderer.js). */
    .tree-svg-container svg {
        touch-action: pan-y !important;
    }
}