.pi-header {
    margin-bottom: 1.25rem;
}

.pi-header h1 {
    margin-bottom: 0.25rem;
}

.pi-header p,
.branch-panel p,
.project-progress-main p {
    color: #5f6b7a;
}

.pi-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.pi-stat,
.project-progress,
.branch-panel {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 6px;
    padding: 1rem;
}

.pi-stat h3 {
    margin: 0 0 0.35rem;
    color: #5f6b7a;
    font-size: 0.95rem;
}

.pi-stat p {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
}

.project-progress {
    margin-bottom: 1.25rem;
}

.project-progress-list {
    display: grid;
    gap: 0.85rem;
}

.project-progress-card {
    border: 1px solid #e6e9ef;
    border-radius: 6px;
    padding: 1rem;
    cursor: pointer;
}

.project-progress-card:hover {
    border-color: #0070f3;
}

.project-progress-main h3 {
    margin: 0 0 0.25rem;
}

.project-progress-main p {
    margin: 0 0 0.75rem;
}

.project-progress-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.project-progress-meta span {
    border: 1px solid #d8dee9;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    color: #475569;
    font-size: 0.85rem;
}

.progress-track {
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: #edf2f7;
}

.progress-fill {
    height: 100%;
    background: #0f766e;
}

.branch-panel {
    display: grid;
    gap: 1rem;
}

.branch-actions {
    display: flex;
    gap: 0.75rem;
}

.branch-list {
    display: grid;
    gap: 0.5rem;
}

.merge-actions {
    display: flex;
}

.branch-list-item,
.merge-request-item {
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: 0.25rem 0.75rem;
    border: 1px solid #e6e9ef;
    border-radius: 6px;
    padding: 0.75rem;
}

.branch-list-item small,
.merge-request-item small {
    grid-column: 1 / -1;
    color: #5f6b7a;
}

.merge-request-list {
    display: grid;
    gap: 0.5rem;
}

.merge-status {
    align-self: start;
    border: 1px solid #94a3b8;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.85rem;
}

.merge-status.approved {
    border-color: #0f766e;
    color: #0f766e;
}

.merge-status.rejected {
    border-color: #b00020;
    color: #b00020;
}

.merge-review-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.5rem;
}

.branch-map {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.branch-node {
    border: 1px solid #94a3b8;
    border-radius: 6px;
    padding: 0.45rem 0.7rem;
    background: #fff;
    font-weight: 700;
}

.branch-node.main {
    border-color: #0070f3;
    color: #0070f3;
}

.branch-node.merge {
    border-color: #0f766e;
    color: #0f766e;
}

.branch-line {
    width: 2.5rem;
    height: 2px;
    background: #94a3b8;
}

.branch-note {
    margin: 0;
}

.research-tree {
    display: grid;
    gap: 1rem;
}

.tree-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.tree-toolbar label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: #475569;
    font-weight: 700;
}

.tree-toolbar input {
    width: 10rem;
}

.tree-canvas-list {
    display: grid;
    gap: 1rem;
}

.tree-timeline-project {
    border: 1px solid #e6e9ef;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.tree-project-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #eef2f7;
}

.tree-project-title h3 {
    margin: 0;
    font-size: 1rem;
}

.tree-project-title span {
    color: #5f6b7a;
    font-size: 0.9rem;
    white-space: nowrap;
}

.tree-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 0.75rem 0.75rem;
}

.timeline-tree-svg {
    display: block;
    min-width: 100%;
}

.tree-time-grid {
    stroke: #eef2f7;
    stroke-width: 1;
}

.tree-time-label {
    fill: #64748b;
    font-size: 11px;
    text-anchor: middle;
}

.tree-branch-name {
    fill: #1f2937;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.tree-branch-code {
    fill: #64748b;
    font-size: 11px;
    cursor: pointer;
}

.tree-branch-line {
    stroke: #94a3b8;
    stroke-width: 4;
    stroke-linecap: round;
}

.tree-branch-line.main {
    stroke: #0070f3;
}

.tree-split {
    fill: none;
    stroke: #94a3b8;
    stroke-width: 2;
    stroke-dasharray: 4 4;
}

.tree-merge-line {
    fill: none;
    stroke: #64748b;
    stroke-width: 2.5;
    stroke-dasharray: 5 5;
}

.tree-merge-line.approved {
    stroke: #0f766e;
    stroke-dasharray: none;
}

.tree-merge-line.rejected {
    stroke: #b00020;
}

.tree-merge-line.merged {
    stroke: #0f766e;
    stroke-width: 3;
    stroke-dasharray: none;
}

.tree-merge-label {
    fill: #64748b;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.tree-merge-label.approved,
.tree-merge-label.merged {
    fill: #0f766e;
}

.tree-merge-label.rejected {
    fill: #b00020;
}

.tree-node {
    cursor: pointer;
    stroke: #fff;
    stroke-width: 2;
}

.tree-node.log {
    fill: #334155;
}

.tree-node.linked-log {
    fill: #0f766e;
}

.tree-protocol-marker {
    cursor: pointer;
    fill: #f59e0b;
    stroke: #fff;
    stroke-width: 2;
}

.tree-node-label {
    fill: #475569;
    font-size: 11px;
    pointer-events: none;
}

.tree-protocol-label {
    fill: #92400e;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}

.tree-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    vertical-align: -0.1rem;
}

.tree-dot.log {
    background: #334155;
}

.tree-dot.protocol {
    border-radius: 3px;
    background: #f59e0b;
}

.tree-dot.linked-log {
    background: #0f766e;
    box-shadow: 0 0 0 3px #d7f5ee;
}

.tree-line-sample {
    display: inline-block;
    width: 2.25rem;
    height: 0.2rem;
    border-radius: 999px;
    vertical-align: 0.15rem;
}

.tree-line-sample.main {
    background: #0070f3;
}

.tree-line-sample.branch {
    background: #94a3b8;
}

.tree-line-sample.merge {
    background: repeating-linear-gradient(
        90deg,
        #64748b 0,
        #64748b 6px,
        transparent 6px,
        transparent 10px
    );
}

.tree-key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: #5f6b7a;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .pi-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .pi-stats {
        grid-template-columns: 1fr;
    }
}