Uses table, fixes plural

Author	Dave Jarvis <email>
Date	2026-02-20 17:26:51 GMT-0800
Commit	cf3662b35cd93a962775c62744710e37eff5c039
Parent	a668618

Delta	642 lines added, 631 lines removed, 11-line increase

pages/DiffPage.php

		echo '<h1 class="commit-title">' .
		htmlspecialchars( trim( $msg ) ) . '</h1>';
		- echo '<div class="commit-info">';

		- echo '<div class="commit-info-row">' .
		- '<span class="commit-info-label">Author</span>' .
		- '<span class="commit-author">' .
		- htmlspecialchars( $author ) . '</span></div>';
		+ echo '<table class="commit-info-table"><tbody>';

		- echo '<div class="commit-info-row">' .
		- '<span class="commit-info-label">Commit</span>' .
		- '<span class="commit-info-value">' .
		- $this->hash . '</span></div>';
		+ echo '<tr>' .
		+ '<th class="commit-info-label">Author</th>' .
		+ '<td class="commit-info-value">' .
		+ htmlspecialchars( $author ) . '</td></tr>';
		+
		+ echo '<tr>' .
		+ '<th class="commit-info-label">Commit</th>' .
		+ '<td class="commit-info-value">' .
		+ $this->hash . '</td></tr>';

		if( isset( $headers['parent'] ) ) {
		$url = (new UrlBuilder())
		->withRepo( $this->currentRepo['safe_name'] )
		->withAction( 'commit' )
		->withHash( $headers['parent'] )
		->build();

		- echo '<div class="commit-info-row">' .
		- '<span class="commit-info-label">Parent</span>' .
		- '<span class="commit-info-value">';
		+ echo '<tr>' .
		+ '<th class="commit-info-label">Parent</th>' .
		+ '<td class="commit-info-value">';
		echo '<a href="' . $url . '" class="parent-link">' .
		substr( $headers['parent'], 0, 7 ) . '</a>';
		- echo '</span></div>';
		+ echo '</td></tr>';
		}

		- $diffNet = $added - $deleted;
		- $diffMsg = '0 lines changed';
		+ $diffNet = $added - $deleted;
		+ $diffMsg = '0 lines changed';
		+ $pluralize = function( int $count ): string {
		+ $suffix = $count === 1 ? '' : 's';
		+
		+ return $count . ' line' . $suffix;
		+ };

		if( $diffNet > 0 ) {
		- $diffMsg = $diffNet . ' lines added';
		+ $diffMsg = $pluralize( $diffNet ) . ' added';
		} elseif( $diffNet < 0 ) {
		- $diffMsg = abs( $diffNet ) . ' lines removed';
		+ $diffMsg = $pluralize( abs( $diffNet ) ) . ' removed';
		}

		- echo '<div class="commit-info-row">' .
		- '<span class="commit-info-label">Added</span>' .
		- '<span class="commit-info-value">' .
		- $added . ' lines</span></div>';
		+ echo '<tr>' .
		+ '<th class="commit-info-label">Added</th>' .
		+ '<td class="commit-info-value">' .
		+ $pluralize( $added ) . '</td></tr>';

		- echo '<div class="commit-info-row">' .
		- '<span class="commit-info-label">Deleted</span>' .
		- '<span class="commit-info-value">' .
		- $deleted . ' lines</span></div>';
		+ echo '<tr>' .
		+ '<th class="commit-info-label">Deleted</th>' .
		+ '<td class="commit-info-value">' .
		+ $pluralize( $deleted ) . '</td></tr>';

		- echo '<div class="commit-info-row">' .
		- '<span class="commit-info-label">Total</span>' .
		- '<span class="commit-info-value">' .
		- $diffMsg . '</span></div>';
		+ echo '<tr>' .
		+ '<th class="commit-info-label">Total</th>' .
		+ '<td class="commit-info-value">' .
		+ $diffMsg . '</td></tr>';

		- echo '</div></div></div>';
		+ echo '</tbody></table></div></div>';

		echo '<div class="diff-container">';

styles/repo.css

		}

		-.commit-info {
		- display: grid;
		- gap: 8px;
		- font-size: 0.875rem;
		-}
		-
		-.commit-info-row {
		- display: flex;
		- gap: 10px;
		-}
		-
		-.commit-info-label {
		- color: #8b949e;
		- width: 80px;
		- flex-shrink: 0;
		-}
		-
		-.commit-info-value {
		- color: #c9d1d9;
		- font-family: monospace;
		-}
		-
		-.parent-link {
		- color: #58a6ff;
		- text-decoration: none;
		-}
		-
		-.parent-link:hover {
		- text-decoration: underline;
		-}
		-
		-.repo-grid {
		- display: grid;
		- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		- gap: 16px;
		- margin-top: 20px;
		-}
		-
		-.repo-card {
		- background: #161b22;
		- border: 1px solid #30363d;
		- border-radius: 8px;
		- padding: 20px;
		- text-decoration: none;
		- color: inherit;
		- transition: border-color 0.2s, transform 0.1s;
		-}
		-
		-.repo-card:hover {
		- border-color: #58a6ff;
		- transform: translateY(-2px);
		-}
		-
		-.repo-card h3 {
		- color: #58a6ff;
		- margin-bottom: 8px;
		- font-size: 1.1rem;
		-}
		-
		-.repo-card p {
		- color: #8b949e;
		- font-size: 0.875rem;
		- margin: 0;
		-}
		-
		-.current-repo {
		- background: #21262d;
		- border: 1px solid #58a6ff;
		- padding: 8px 16px;
		- border-radius: 6px;
		- font-size: 0.875rem;
		- color: #f0f6fc;
		-}
		-
		-.current-repo strong {
		- color: #58a6ff;
		-}
		-
		-.branch-badge {
		- background: #238636;
		- color: white;
		- padding: 2px 8px;
		- border-radius: 12px;
		- font-size: 0.75rem;
		- font-weight: 600;
		- margin-left: 10px;
		-}
		-
		-.commit-row {
		- display: flex;
		- padding: 10px 0;
		- border-bottom: 1px solid #30363d;
		- gap: 15px;
		- align-items: baseline;
		-}
		-
		-.commit-row:last-child {
		- border-bottom: none;
		-}
		-
		-.commit-row .sha {
		- font-family: monospace;
		- color: #58a6ff;
		- text-decoration: none;
		-}
		-
		-.commit-row .message {
		- flex: 1;
		- font-weight: 500;
		-}
		-
		-.commit-row .meta {
		- font-size: 0.85em;
		- color: #8b949e;
		- white-space: nowrap;
		-}
		-
		-.blob-content-image {
		- text-align: center;
		- padding: 20px;
		- background: #0d1117;
		-}
		-
		-.blob-content-image img {
		- max-width: 100%;
		- border: 1px solid #30363d;
		-}
		-
		-.blob-content-video {
		- text-align: center;
		- padding: 20px;
		- background: #000;
		-}
		-
		-.blob-content-video video {
		- max-width: 100%;
		- max-height: 80vh;
		-}
		-
		-.blob-content-audio {
		- text-align: center;
		- padding: 40px;
		- background: #161b22;
		-}
		-
		-.blob-content-audio audio {
		- width: 100%;
		- max-width: 600px;
		-}
		-
		-.download-state {
		- text-align: center;
		- padding: 40px;
		- border: 1px solid #30363d;
		- border-radius: 6px;
		- margin-top: 10px;
		-}
		-
		-.download-state p {
		- margin-bottom: 20px;
		- color: #8b949e;
		-}
		-
		-.btn-download {
		- display: inline-block;
		- padding: 6px 16px;
		- background: #238636;
		- color: white;
		- text-decoration: none;
		- border-radius: 6px;
		- font-weight: 600;
		-}
		-
		-.repo-info-banner {
		- margin-top: 15px;
		-}
		-
		-.file-icon-container {
		- width: 20px;
		- text-align: center;
		- margin-right: 5px;
		- color: #8b949e;
		-}
		-
		-.file-size {
		- color: #8b949e;
		- font-size: 0.8em;
		- margin-left: 10px;
		-}
		-
		-.file-date {
		- color: #8b949e;
		- font-size: 0.8em;
		- margin-left: auto;
		-}
		-
		-.repo-card-time {
		- margin-top: 8px;
		- color: #58a6ff;
		-}
		-
		-.diff-container {
		- display: flex;
		- flex-direction: column;
		- gap: 20px;
		-}
		-
		-.diff-file {
		- background: #161b22;
		- border: 1px solid #30363d;
		- border-radius: 6px;
		- overflow: hidden;
		-}
		-
		-.diff-header {
		- background: #21262d;
		- padding: 10px 16px;
		- border-bottom: 1px solid #30363d;
		- display: flex;
		- align-items: center;
		- gap: 10px;
		-}
		-
		-.diff-path {
		- font-family: monospace;
		- font-size: 0.9rem;
		- color: #f0f6fc;
		-}
		-
		-.diff-binary {
		- padding: 20px;
		- text-align: center;
		- color: #8b949e;
		- font-style: italic;
		-}
		-
		-.diff-content {
		- overflow-x: auto;
		-}
		-
		-.diff-content table {
		- width: 100%;
		- border-collapse: collapse;
		- font-family: 'SFMono-Regular', Consolas, monospace;
		- font-size: 12px;
		-}
		-
		-.diff-content td {
		- padding: 2px 0;
		- line-height: 20px;
		-}
		-
		-.diff-num {
		- width: 1%;
		- min-width: 40px;
		- text-align: right;
		- padding-right: 10px;
		- color: #6e7681;
		- user-select: none;
		- background: #0d1117;
		- border-right: 1px solid #30363d;
		-}
		-
		-.diff-num::before {
		- content: attr(data-num);
		-}
		-
		-.diff-code {
		- padding-left: 10px;
		- white-space: pre-wrap;
		- word-break: break-all;
		- color: #c9d1d9;
		-}
		-
		-.diff-marker {
		- display: inline-block;
		- width: 15px;
		- user-select: none;
		- color: #8b949e;
		-}
		-
		-.diff-add {
		- background-color: rgba(2, 59, 149, 0.25);
		-}
		-.diff-add .diff-code {
		- color: #79c0ff;
		-}
		-.diff-add .diff-marker {
		- color: #79c0ff;
		-}
		-
		-.diff-del {
		- background-color: rgba(148, 99, 0, 0.25);
		-}
		-.diff-del .diff-code {
		- color: #d29922;
		-}
		-.diff-del .diff-marker {
		- color: #d29922;
		-}
		-
		-.diff-gap {
		- background: #0d1117;
		- color: #484f58;
		- text-align: center;
		- font-size: 0.8em;
		- height: 20px;
		-}
		-.diff-gap td {
		- padding: 8px 0;
		- background: #161b22;
		- border-top: 1px solid #30363d;
		- border-bottom: 1px solid #30363d;
		- text-align: center;
		-}
		-
		-.diff-gap-icon {
		- vertical-align: middle;
		-}
		-
		-.status-add { color: #58a6ff; }
		-.status-del { color: #d29922; }
		-.status-mod { color: #a371f7; }
		-
		-.tag-table, .file-list-table {
		- width: 100%;
		- border-collapse: collapse;
		- margin-top: 10px;
		- background: #161b22;
		- border: 1px solid #30363d;
		- border-radius: 6px;
		- overflow: hidden;
		-}
		-
		-.tag-table th, .file-list-table th {
		- text-align: left;
		- padding: 10px 16px;
		- border-bottom: 2px solid #30363d;
		- color: #8b949e;
		- font-size: 0.875rem;
		- font-weight: 600;
		- white-space: nowrap;
		-}
		-
		-.tag-table td, .file-list-table td {
		- padding: 12px 16px;
		- border-bottom: 1px solid #21262d;
		- vertical-align: middle;
		- color: #c9d1d9;
		- font-size: 0.9rem;
		-}
		-
		-.tag-table tr:hover td, .file-list-table tr:hover td {
		- background: #161b22;
		-}
		-
		-.tag-table .tag-name {
		- min-width: 140px;
		- width: 20%;
		-}
		-
		-.tag-table .tag-message {
		- width: auto;
		- white-space: normal;
		- word-break: break-word;
		- color: #c9d1d9;
		- font-weight: 500;
		-}
		-
		-.tag-table .tag-author,
		-.tag-table .tag-time,
		-.tag-table .tag-hash {
		- width: 1%;
		- white-space: nowrap;
		-}
		-
		-.tag-table .tag-time {
		- text-align: right;
		- color: #8b949e;
		-}
		-
		-.tag-table .tag-hash {
		- text-align: right;
		-}
		-
		-.tag-table .tag-name a {
		- color: #58a6ff;
		- text-decoration: none;
		- font-family: 'SFMono-Regular', Consolas, monospace;
		-}
		-
		-.tag-table .tag-author {
		- color: #c9d1d9;
		-}
		-
		-.tag-table .tag-age-header {
		- text-align: right;
		-}
		-
		-.tag-table .tag-commit-header {
		- text-align: right;
		-}
		-
		-.tag-table .commit-hash {
		- font-family: 'SFMono-Regular', Consolas, monospace;
		- color: #58a6ff;
		- text-decoration: none;
		-}
		-
		-.tag-table .commit-hash:hover {
		- text-decoration: underline;
		-}
		-
		-.file-list-table .file-icon-cell {
		- width: 20px;
		- text-align: center;
		- color: #8b949e;
		- padding-right: 0;
		-}
		-
		-.file-list-table .file-name-cell a {
		- color: #58a6ff;
		- text-decoration: none;
		- font-weight: 500;
		-}
		-
		-.file-list-table .file-name-cell a:hover {
		- text-decoration: underline;
		-}
		-
		-.file-list-table .file-mode-cell {
		- font-family: 'SFMono-Regular', Consolas, monospace;
		- color: #8b949e;
		- font-size: 0.8rem;
		- width: 1%;
		- white-space: nowrap;
		- text-align: center;
		-}
		-
		-.file-list-table .file-size-cell {
		- color: #8b949e;
		- text-align: right;
		- width: 1%;
		- white-space: nowrap;
		- font-size: 0.85rem;
		-}
		-
		-.file-list-table .file-date-cell {
		- color: #8b949e;
		- text-align: right;
		- width: 150px;
		- font-size: 0.85rem;
		- white-space: nowrap;
		-}
		-
		-.blob-code {
		- font-family: 'SFMono-Regular', Consolas, monospace;
		- background-color: #161b22;
		- color: #fcfcfa;
		- font-size: 0.875rem;
		- line-height: 1.6;
		- tab-size: 2;
		-}
		-
		-.hl-comment,
		-.hl-doc-comment {
		- color: #727072;
		- font-style: italic;
		-}
		-
		-.hl-function,
		-.hl-method {
		- color: #78dce8;
		-}
		-
		-.hl-tag {
		- color: #3e8bff;
		-}
		-
		-.hl-class,
		-.hl-interface,
		-.hl-struct {
		- color: #a9dc76;
		-}
		-
		-.hl-type {
		- color: #a9dc76;
		-}
		-
		-.hl-keyword,
		-.hl-storage,
		-.hl-modifier,
		-.hl-statement {
		- color: #ff6188;
		- font-weight: 600;
		-}
		-
		-.hl-string,
		-.hl-string_interp {
		- color: #ffd866;
		-}
		-
		-.hl-number,
		-.hl-boolean,
		-.hl-constant,
		-.hl-preprocessor {
		- color: #ab9df2;
		-}
		-
		-.hl-variable {
		- color: #fcfcfa;
		-}
		-
		-.hl-attribute,
		-.hl-property {
		- color: #fc9867;
		-}
		-
		-.hl-operator,
		-.hl-punctuation,
		-.hl-escape {
		- color: #939293;
		-}
		-
		-.hl-interp-punct {
		- color: #ff6188;
		-}
		-
		-.hl-math {
		- color: #ab9df2;
		- font-style: italic;
		-}
		-
		-.hl-code {
		- display: inline-block;
		- width: 100%;
		- background-color: #0d1117;
		- color: #c9d1d9;
		- padding: 2px 4px;
		- border-radius: 3px;
		-}
		-
		-@media (max-width: 768px) {
		- .container {
		- padding: 10px;
		- }
		-
		- h1 { font-size: 1.5rem; }
		- h2 { font-size: 1.2rem; }
		-
		- .nav {
		- flex-direction: column;
		- align-items: flex-start;
		- gap: 10px;
		- }
		-
		- .repo-selector {
		- margin-left: 0;
		- width: 100%;
		- }
		-
		- .repo-selector select {
		- flex: 1;
		- }
		-
		- .file-list-table th,
		- .file-list-table td {
		- padding: 8px 10px;
		- }
		-
		- .file-list-table .file-mode-cell,
		- .file-list-table .file-date-cell {
		- display: none;
		- }
		-
		- .commit-details {
		- padding: 15px;
		- }
		-
		- .commit-title {
		- font-size: 1.1rem;
		- word-break: break-word;
		- }
		-
		- .commit-info-row {
		- flex-direction: column;
		- gap: 2px;
		- margin-bottom: 10px;
		- }
		-
		- .commit-info-label {
		- width: 100%;
		- font-size: 0.8rem;
		- color: #8b949e;
		- }
		-
		- .commit-info-value {
		- word-break: break-all;
		- font-family: 'SFMono-Regular', Consolas, monospace;
		- font-size: 0.9rem;
		- padding-left: 0;
		+.commit-info-table {
		+ width: 100%;
		+ border-collapse: collapse;
		+ font-size: 0.875rem;
		+}
		+
		+.commit-info-label {
		+ text-align: left;
		+ font-weight: normal;
		+ color: #8b949e;
		+ width: 80px;
		+ padding: 4px 10px 4px 0;
		+}
		+
		+.commit-info-value {
		+ color: #c9d1d9;
		+ font-family: monospace;
		+ padding: 4px 0;
		+}
		+
		+.parent-link {
		+ color: #58a6ff;
		+ text-decoration: none;
		+}
		+
		+.parent-link:hover {
		+ text-decoration: underline;
		+}
		+
		+.repo-grid {
		+ display: grid;
		+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		+ gap: 16px;
		+ margin-top: 20px;
		+}
		+
		+.repo-card {
		+ background: #161b22;
		+ border: 1px solid #30363d;
		+ border-radius: 8px;
		+ padding: 20px;
		+ text-decoration: none;
		+ color: inherit;
		+ transition: border-color 0.2s, transform 0.1s;
		+}
		+
		+.repo-card:hover {
		+ border-color: #58a6ff;
		+ transform: translateY(-2px);
		+}
		+
		+.repo-card h3 {
		+ color: #58a6ff;
		+ margin-bottom: 8px;
		+ font-size: 1.1rem;
		+}
		+
		+.repo-card p {
		+ color: #8b949e;
		+ font-size: 0.875rem;
		+ margin: 0;
		+}
		+
		+.current-repo {
		+ background: #21262d;
		+ border: 1px solid #58a6ff;
		+ padding: 8px 16px;
		+ border-radius: 6px;
		+ font-size: 0.875rem;
		+ color: #f0f6fc;
		+}
		+
		+.current-repo strong {
		+ color: #58a6ff;
		+}
		+
		+.branch-badge {
		+ background: #238636;
		+ color: white;
		+ padding: 2px 8px;
		+ border-radius: 12px;
		+ font-size: 0.75rem;
		+ font-weight: 600;
		+ margin-left: 10px;
		+}
		+
		+.commit-row {
		+ display: flex;
		+ padding: 10px 0;
		+ border-bottom: 1px solid #30363d;
		+ gap: 15px;
		+ align-items: baseline;
		+}
		+
		+.commit-row:last-child {
		+ border-bottom: none;
		+}
		+
		+.commit-row .sha {
		+ font-family: monospace;
		+ color: #58a6ff;
		+ text-decoration: none;
		+}
		+
		+.commit-row .message {
		+ flex: 1;
		+ font-weight: 500;
		+}
		+
		+.commit-row .meta {
		+ font-size: 0.85em;
		+ color: #8b949e;
		+ white-space: nowrap;
		+}
		+
		+.blob-content-image {
		+ text-align: center;
		+ padding: 20px;
		+ background: #0d1117;
		+}
		+
		+.blob-content-image img {
		+ max-width: 100%;
		+ border: 1px solid #30363d;
		+}
		+
		+.blob-content-video {
		+ text-align: center;
		+ padding: 20px;
		+ background: #000;
		+}
		+
		+.blob-content-video video {
		+ max-width: 100%;
		+ max-height: 80vh;
		+}
		+
		+.blob-content-audio {
		+ text-align: center;
		+ padding: 40px;
		+ background: #161b22;
		+}
		+
		+.blob-content-audio audio {
		+ width: 100%;
		+ max-width: 600px;
		+}
		+
		+.download-state {
		+ text-align: center;
		+ padding: 40px;
		+ border: 1px solid #30363d;
		+ border-radius: 6px;
		+ margin-top: 10px;
		+}
		+
		+.download-state p {
		+ margin-bottom: 20px;
		+ color: #8b949e;
		+}
		+
		+.btn-download {
		+ display: inline-block;
		+ padding: 6px 16px;
		+ background: #238636;
		+ color: white;
		+ text-decoration: none;
		+ border-radius: 6px;
		+ font-weight: 600;
		+}
		+
		+.repo-info-banner {
		+ margin-top: 15px;
		+}
		+
		+.file-icon-container {
		+ width: 20px;
		+ text-align: center;
		+ margin-right: 5px;
		+ color: #8b949e;
		+}
		+
		+.file-size {
		+ color: #8b949e;
		+ font-size: 0.8em;
		+ margin-left: 10px;
		+}
		+
		+.file-date {
		+ color: #8b949e;
		+ font-size: 0.8em;
		+ margin-left: auto;
		+}
		+
		+.repo-card-time {
		+ margin-top: 8px;
		+ color: #58a6ff;
		+}
		+
		+.diff-container {
		+ display: flex;
		+ flex-direction: column;
		+ gap: 20px;
		+}
		+
		+.diff-file {
		+ background: #161b22;
		+ border: 1px solid #30363d;
		+ border-radius: 6px;
		+ overflow: hidden;
		+}
		+
		+.diff-header {
		+ background: #21262d;
		+ padding: 10px 16px;
		+ border-bottom: 1px solid #30363d;
		+ display: flex;
		+ align-items: center;
		+ gap: 10px;
		+}
		+
		+.diff-path {
		+ font-family: monospace;
		+ font-size: 0.9rem;
		+ color: #f0f6fc;
		+}
		+
		+.diff-binary {
		+ padding: 20px;
		+ text-align: center;
		+ color: #8b949e;
		+ font-style: italic;
		+}
		+
		+.diff-content {
		+ overflow-x: auto;
		+}
		+
		+.diff-content table {
		+ width: 100%;
		+ border-collapse: collapse;
		+ font-family: 'SFMono-Regular', Consolas, monospace;
		+ font-size: 12px;
		+}
		+
		+.diff-content td {
		+ padding: 2px 0;
		+ line-height: 20px;
		+}
		+
		+.diff-num {
		+ width: 1%;
		+ min-width: 40px;
		+ text-align: right;
		+ padding-right: 10px;
		+ color: #6e7681;
		+ user-select: none;
		+ background: #0d1117;
		+ border-right: 1px solid #30363d;
		+}
		+
		+.diff-num::before {
		+ content: attr(data-num);
		+}
		+
		+.diff-code {
		+ padding-left: 10px;
		+ white-space: pre-wrap;
		+ word-break: break-all;
		+ color: #c9d1d9;
		+}
		+
		+.diff-marker {
		+ display: inline-block;
		+ width: 15px;
		+ user-select: none;
		+ color: #8b949e;
		+}
		+
		+.diff-add {
		+ background-color: rgba(2, 59, 149, 0.25);
		+}
		+.diff-add .diff-code {
		+ color: #79c0ff;
		+}
		+.diff-add .diff-marker {
		+ color: #79c0ff;
		+}
		+
		+.diff-del {
		+ background-color: rgba(148, 99, 0, 0.25);
		+}
		+.diff-del .diff-code {
		+ color: #d29922;
		+}
		+.diff-del .diff-marker {
		+ color: #d29922;
		+}
		+
		+.diff-gap {
		+ background: #0d1117;
		+ color: #484f58;
		+ text-align: center;
		+ font-size: 0.8em;
		+ height: 20px;
		+}
		+.diff-gap td {
		+ padding: 8px 0;
		+ background: #161b22;
		+ border-top: 1px solid #30363d;
		+ border-bottom: 1px solid #30363d;
		+ text-align: center;
		+}
		+
		+.diff-gap-icon {
		+ vertical-align: middle;
		+}
		+
		+.status-add { color: #58a6ff; }
		+.status-del { color: #d29922; }
		+.status-mod { color: #a371f7; }
		+
		+.tag-table, .file-list-table {
		+ width: 100%;
		+ border-collapse: collapse;
		+ margin-top: 10px;
		+ background: #161b22;
		+ border: 1px solid #30363d;
		+ border-radius: 6px;
		+ overflow: hidden;
		+}
		+
		+.tag-table th, .file-list-table th {
		+ text-align: left;
		+ padding: 10px 16px;
		+ border-bottom: 2px solid #30363d;
		+ color: #8b949e;
		+ font-size: 0.875rem;
		+ font-weight: 600;
		+ white-space: nowrap;
		+}
		+
		+.tag-table td, .file-list-table td {
		+ padding: 12px 16px;
		+ border-bottom: 1px solid #21262d;
		+ vertical-align: middle;
		+ color: #c9d1d9;
		+ font-size: 0.9rem;
		+}
		+
		+.tag-table tr:hover td, .file-list-table tr:hover td {
		+ background: #161b22;
		+}
		+
		+.tag-table .tag-name {
		+ min-width: 140px;
		+ width: 20%;
		+}
		+
		+.tag-table .tag-message {
		+ width: auto;
		+ white-space: normal;
		+ word-break: break-word;
		+ color: #c9d1d9;
		+ font-weight: 500;
		+}
		+
		+.tag-table .tag-author,
		+.tag-table .tag-time,
		+.tag-table .tag-hash {
		+ width: 1%;
		+ white-space: nowrap;
		+}
		+
		+.tag-table .tag-time {
		+ text-align: right;
		+ color: #8b949e;
		+}
		+
		+.tag-table .tag-hash {
		+ text-align: right;
		+}
		+
		+.tag-table .tag-name a {
		+ color: #58a6ff;
		+ text-decoration: none;
		+ font-family: 'SFMono-Regular', Consolas, monospace;
		+}
		+
		+.tag-table .tag-author {
		+ color: #c9d1d9;
		+}
		+
		+.tag-table .tag-age-header {
		+ text-align: right;
		+}
		+
		+.tag-table .tag-commit-header {
		+ text-align: right;
		+}
		+
		+.tag-table .commit-hash {
		+ font-family: 'SFMono-Regular', Consolas, monospace;
		+ color: #58a6ff;
		+ text-decoration: none;
		+}
		+
		+.tag-table .commit-hash:hover {
		+ text-decoration: underline;
		+}
		+
		+.file-list-table .file-icon-cell {
		+ width: 20px;
		+ text-align: center;
		+ color: #8b949e;
		+ padding-right: 0;
		+}
		+
		+.file-list-table .file-name-cell a {
		+ color: #58a6ff;
		+ text-decoration: none;
		+ font-weight: 500;
		+}
		+
		+.file-list-table .file-name-cell a:hover {
		+ text-decoration: underline;
		+}
		+
		+.file-list-table .file-mode-cell {
		+ font-family: 'SFMono-Regular', Consolas, monospace;
		+ color: #8b949e;
		+ font-size: 0.8rem;
		+ width: 1%;
		+ white-space: nowrap;
		+ text-align: center;
		+}
		+
		+.file-list-table .file-size-cell {
		+ color: #8b949e;
		+ text-align: right;
		+ width: 1%;
		+ white-space: nowrap;
		+ font-size: 0.85rem;
		+}
		+
		+.file-list-table .file-date-cell {
		+ color: #8b949e;
		+ text-align: right;
		+ width: 150px;
		+ font-size: 0.85rem;
		+ white-space: nowrap;
		+}
		+
		+.blob-code {
		+ font-family: 'SFMono-Regular', Consolas, monospace;
		+ background-color: #161b22;
		+ color: #fcfcfa;
		+ font-size: 0.875rem;
		+ line-height: 1.6;
		+ tab-size: 2;
		+}
		+
		+.hl-comment,
		+.hl-doc-comment {
		+ color: #727072;
		+ font-style: italic;
		+}
		+
		+.hl-function,
		+.hl-method {
		+ color: #78dce8;
		+}
		+
		+.hl-tag {
		+ color: #3e8bff;
		+}
		+
		+.hl-class,
		+.hl-interface,
		+.hl-struct {
		+ color: #a9dc76;
		+}
		+
		+.hl-type {
		+ color: #a9dc76;
		+}
		+
		+.hl-keyword,
		+.hl-storage,
		+.hl-modifier,
		+.hl-statement {
		+ color: #ff6188;
		+ font-weight: 600;
		+}
		+
		+.hl-string,
		+.hl-string_interp {
		+ color: #ffd866;
		+}
		+
		+.hl-number,
		+.hl-boolean,
		+.hl-constant,
		+.hl-preprocessor {
		+ color: #ab9df2;
		+}
		+
		+.hl-variable {
		+ color: #fcfcfa;
		+}
		+
		+.hl-attribute,
		+.hl-property {
		+ color: #fc9867;
		+}
		+
		+.hl-operator,
		+.hl-punctuation,
		+.hl-escape {
		+ color: #939293;
		+}
		+
		+.hl-interp-punct {
		+ color: #ff6188;
		+}
		+
		+.hl-math {
		+ color: #ab9df2;
		+ font-style: italic;
		+}
		+
		+.hl-code {
		+ display: inline-block;
		+ width: 100%;
		+ background-color: #0d1117;
		+ color: #c9d1d9;
		+ padding: 2px 4px;
		+ border-radius: 3px;
		+}
		+
		+@media (max-width: 768px) {
		+ .container {
		+ padding: 10px;
		+ }
		+
		+ h1 { font-size: 1.5rem; }
		+ h2 { font-size: 1.2rem; }
		+
		+ .nav {
		+ flex-direction: column;
		+ align-items: flex-start;
		+ gap: 10px;
		+ }
		+
		+ .repo-selector {
		+ margin-left: 0;
		+ width: 100%;
		+ }
		+
		+ .repo-selector select {
		+ flex: 1;
		+ }
		+
		+ .file-list-table th,
		+ .file-list-table td {
		+ padding: 8px 10px;
		+ }
		+
		+ .file-list-table .file-mode-cell,
		+ .file-list-table .file-date-cell {
		+ display: none;
		+ }
		+
		+ .commit-details {
		+ padding: 15px;
		+ }
		+
		+ .commit-title {
		+ font-size: 1.1rem;
		+ word-break: break-word;
		+ }
		+
		+ .commit-info-table,
		+ .commit-info-table tbody,
		+ .commit-info-table tr,
		+ .commit-info-table th,
		+ .commit-info-table td {
		+ display: block;
		+ }
		+
		+ .commit-info-table tr {
		+ margin-bottom: 10px;
		+ }
		+
		+ .commit-info-label {
		+ width: 100%;
		+ font-size: 0.8rem;
		+ color: #8b949e;
		+ padding: 0 0 2px 0;
		+ }
		+
		+ .commit-info-value {
		+ word-break: break-all;
		+ font-family: 'SFMono-Regular', Consolas, monospace;
		+ font-size: 0.9rem;
		+ padding: 0;
		}