:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --blue: #79bfff;
  --blue-dark: #a8d5ff;
  --button: #216a9f;
  --button-hover: #2d83bd;
  --text: #e6edf3;
  --muted: #a4b0bc;
  --border: #3b4652;
  --soft-border: #2b3641;
  --surface: #18222c;
  --surface-hover: #202d38;
  --canvas: #0e151c;
  --header: #131e27;
  --code: #101922;
  --input-border: #647384;
  --nav-bg: #075a89;
  --success: #56c785;
  --danger: #ff7b72;
  --danger-bg: #351c20;
  --folder: #245c83;
}
:root[data-theme="light"] {
  color-scheme: light;
  --blue: #106ebe;
  --blue-dark: #005a9e;
  --button: #106ebe;
  --button-hover: #005a9e;
  --text: #242424;
  --muted: #616161;
  --border: #d2d0ce;
  --soft-border: #edebe9;
  --surface: #ffffff;
  --surface-hover: #f8fafc;
  --canvas: #f5f5f5;
  --header: #faf9f8;
  --code: #f3f2f1;
  --input-border: #8a8886;
  --nav-bg: #106ebe;
  --success: #107c10;
  --danger: #d13438;
  --danger-bg: #fdf3f4;
  --folder: #c7e0f4;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.global-header :focus-visible { outline-color: #fff; }
html { background: var(--canvas); }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 14px/1.45 "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 12px; font-weight: 600; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; margin-top: 20px; }
p { margin: 8px 0; }
code, pre, .clone-input { font-family: "Cascadia Code", Consolas, monospace; }
code { background: var(--code); border-radius: 2px; padding: 1px 4px; font-size: 12px; }
pre { background: var(--code); border-radius: 3px; padding: 12px; }
.global-header {
  align-items: center;
  background: var(--nav-bg);
  color: #fff;
  display: flex;
  min-height: 48px;
  padding: 0 22px;
  gap: 16px;
  position: relative;
}
.global-header a { color: #fff; }
.global-header a:hover { text-decoration: none; }
.brand { align-items: center; display: flex; font-size: 17px; font-weight: 600; gap: 9px; white-space: nowrap; }
.brand-mark {
  align-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 2px;
  display: inline-flex; font-size: 13px; height: 24px; justify-content: center; width: 24px;
}
.product-name { border-left: 1px solid rgba(255,255,255,.45); padding-left: 16px; }
.global-nav { align-items: center; display: flex; flex: 1; gap: 16px; min-width: 0; }
.header-spacer { flex: 1; }
.header-user { font-weight: 600; }
.header-link { font-size: 13px; white-space: nowrap; }
.repo-switcher { align-items: center; display: flex; gap: 7px; min-width: 0; }
.repo-switcher label { font-size: 12px; font-weight: 600; }
.repo-switcher select { max-width: 230px; min-height: 30px; }
.repo-switcher input { max-width: 150px; min-height: 30px; }
.nav-toggle, .theme-toggle {
  background: transparent; border: 1px solid rgba(255,255,255,.55); border-radius: 3px;
  color: #fff; cursor: pointer; font-size: 18px; min-height: 32px; min-width: 34px; padding: 3px 7px;
}
.nav-toggle { display: none; }
.theme-toggle { margin-left: auto; }
.global-nav + .theme-toggle { margin-left: 0; }
main { margin: 0 auto; max-width: 1440px; padding: 22px 28px 40px; }
.page-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; gap: 16px; }
.repo-title { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.repo-title h1 { margin: 0; overflow-wrap: anywhere; }
.repo-icon {
  align-items: center; background: var(--header); border: 1px solid var(--border); border-radius: 3px;
  color: var(--blue); display: inline-flex; flex: 0 0 auto; font-weight: 700; height: 32px; justify-content: center; width: 32px;
}
.repo-description { color: var(--muted); margin: -4px 0 14px; overflow-wrap: anywhere; }
.repo-list-description { font-weight: 400; margin-top: 2px; max-width: 420px; overflow-wrap: anywhere; }
.pill { background: var(--code); border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: 11px; padding: 1px 7px; }
.repo-tabs { border-bottom: 1px solid var(--border); display: flex; gap: 24px; margin-bottom: 14px; }
.repo-tabs a { color: var(--text); padding: 8px 2px; }
.repo-tabs a.active { border-bottom: 2px solid var(--blue); color: var(--blue); font-weight: 600; }
.repo-tabs a:hover { text-decoration: none; }
.toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.search-form { align-items: end; }
.search-form .field { margin: 0; }
#activity-filters { align-items: end; }
#activity-filters .field { margin: 0; }
.activity-files { min-width: 220px; overflow-wrap: anywhere; }
.activity-message { min-width: 180px; overflow-wrap: anywhere; }
.branch-form { align-items: center; display: flex; gap: 7px; }
.branch-form label { color: var(--muted); font-size: 12px; font-weight: 600; }
.crumbs { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; min-height: 32px; overflow-wrap: anywhere; }
.crumbs .separator { color: var(--muted); }
.crumbs .current { color: var(--text); font-weight: 600; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12); margin: 12px 0; padding: 16px; min-width: 0;
}
.card.compact { padding: 10px 14px; }
.card h3:first-child { margin-top: 0; }
.row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.grid-2 { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-2 .card { margin: 0; }
.compare-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare-panel { min-width: 0; margin: 0; }
.compare-viewer { background: #111820; border: 1px solid var(--border); height: 480px; overflow: hidden; width: 100%; }
.compare-viewer canvas { display: block; }
.compare-pdf { height: 600px; }
.text-diff { max-height: 720px; overflow: auto; }
.diff-line { border-radius: 0; margin: 0; padding: 1px 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-positive { color: var(--success); }
.diff-negative { color: var(--danger); }
.btn {
  background: var(--button); border: 1px solid var(--button); border-radius: 2px; color: #fff;
  cursor: pointer; display: inline-block; font: 600 13px "Segoe UI", sans-serif;
  padding: 6px 14px; text-decoration: none; text-align: center;
}
.btn:hover { background: var(--button-hover); color: #fff; text-decoration: none; }
.btn.secondary { background: var(--surface); border-color: var(--input-border); color: var(--text); }
.btn.secondary:hover { background: var(--code); color: var(--text); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); }
.btn.small { font-size: 12px; padding: 4px 10px; }
.btn:disabled { cursor: not-allowed; opacity: .45; }
input[type=text], input[type=password], input[type=search], input[type=email], input[type=number], input[type=url], select {
  background: var(--surface); border: 1px solid var(--input-border); border-radius: 2px; color: var(--text);
  font: 13px "Segoe UI", sans-serif; min-height: 30px; padding: 5px 8px; max-width: 100%;
}
input[type=file] { color: var(--text); font-size: 12px; max-width: 100%; }
input[type=checkbox] { accent-color: var(--button); height: 16px; width: 16px; }
input:focus, select:focus { border-color: var(--blue); outline: 1px solid var(--blue); }
.grow { flex: 1; min-width: 180px; }
.field { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; gap: 5px; margin: 10px 0; min-width: 0; }
.field input { width: 100%; }
.check-label { align-items: center; display: flex; gap: 7px; margin: 12px 0; }
.muted { color: var(--muted); font-size: 12px; }
.small { font-size: 12px; }
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; max-width: 100%; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--soft-border); padding: 8px 12px; text-align: left; vertical-align: middle; }
th { background: var(--header); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
tbody tr:last-child td, tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-hover); }
td.size, th.size { text-align: right; white-space: nowrap; }
td.date, th.date { white-space: nowrap; }
.file-name { align-items: center; display: flex; gap: 8px; font-weight: 600; }
.file-name > div { min-width: 0; }
.file-icon { border: 1px solid var(--input-border); border-radius: 1px; display: inline-block; flex: 0 0 auto; height: 14px; width: 11px; }
.folder-icon {
  background: var(--folder); border: 1px solid var(--blue); border-radius: 1px;
  display: inline-block; flex: 0 0 auto; height: 11px; position: relative; width: 15px;
}
.folder-icon::before { background: var(--folder); border: 1px solid var(--blue); content: ""; height: 3px; left: -1px; position: absolute; top: -4px; width: 7px; }
.last-commit { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.last-commit .message { font-weight: 600; overflow-wrap: anywhere; }
.last-commit .spacer { flex: 1; }
.commit-cell { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.author-cell { min-width: 110px; }
.clone-row { align-items: center; display: flex; gap: 8px; }
.clone-panel summary { cursor: pointer; font-weight: 600; }
.clone-panel .clone-row { margin-top: 12px; }
.clone-input { flex: 1; min-width: 200px; }
.clone-feedback { color: var(--success); font-size: 12px; min-width: 48px; }
.form-note { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.repo-create-form { align-items: end; display: grid; gap: 10px; grid-template-columns: 1fr 2fr 1fr auto; }
.repo-create-form .field { margin: 0; }
.repo-settings summary { cursor: pointer; font-weight: 600; }
.description-form { align-items: end; display: flex; gap: 10px; margin-top: 14px; }
.description-form .field { flex: 1; margin: 0; }
.danger-zone { align-items: center; border-top: 1px solid var(--soft-border); display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; }
.confirm-dialog { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; color: var(--text); max-width: calc(100% - 24px); padding: 22px; width: 440px; }
.confirm-dialog::backdrop { background: rgba(0,0,0,.65); }
.confirm-dialog input { width: 100%; }
.metadata-table th { width: 170px; }
.metadata-scroll { max-width: 100%; overflow-x: auto; }
.metadata-scroll table { min-width: 560px; }
.text-preview { max-height: 650px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.markdown-body { line-height: 1.6; max-width: 100%; overflow-wrap: anywhere; }
.markdown-body pre { overflow: auto; padding: 12px; background: var(--code); }
.markdown-body table { margin: 12px 0; }
.markdown-body img { max-width: 100%; }
.pdf-preview { background: #fff; border: 1px solid var(--border); height: 720px; width: 100%; }
.drawing-preview { background: #fff; border: 1px solid var(--border); height: 720px; width: 100%; }
#viewer { background: #111820; border: 1px solid var(--border); border-radius: 2px; height: 520px; overflow: hidden; width: 100%; }
#viewer canvas { display: block; }
#viewer-status { margin: 10px 0 0; }
#viewer-status[data-state="converting"], #viewer-status[data-state="loading"] { color: var(--blue); }
.error { color: var(--danger); font-weight: 600; }
.unread-dot { background: #ff9f43; border: 2px solid var(--nav-bg); border-radius: 50%; display: inline-block; height: 9px; margin-left: 5px; vertical-align: top; width: 9px; }
.error-page { margin: 50px auto; max-width: 640px; text-align: center; }
.error-code { color: var(--blue); font-size: 72px; font-weight: 700; line-height: 1; }
.notification-record { border-left: 4px solid var(--blue); }
.notification-record[data-status="failed"] { border-left-color: var(--danger); }
.notification-record[data-status="sent"] { border-left-color: var(--success); }
.error-detail {
  background: var(--danger-bg); border-left: 3px solid var(--danger); color: var(--danger);
  font-size: 12px; max-height: 180px; overflow: auto; padding: 10px; white-space: pre-wrap; word-break: break-word;
}
.flash { border: 1px solid var(--border); border-radius: 3px; padding: 10px 14px; }
.flash.success { background: var(--surface); border-left: 4px solid var(--success); color: var(--text); }
.actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.version-form, .inline-form { align-items: center; display: inline-flex; gap: 7px; margin: 0; }
.version-form select { max-width: min(520px, 60vw); }
.link-button { background: none; border: 0; color: var(--blue); cursor: pointer; font: inherit; padding: 0; }
.link-button:hover { color: var(--blue-dark); text-decoration: underline; }
.empty-state { color: var(--muted); padding: 28px; text-align: center; }
.diff-add { background: rgba(46,160,67,.18); }
.diff-del { background: rgba(248,81,73,.18); }
th button[data-sort] { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 0; }
th button[data-sort]::after { content: ' ↕'; opacity: .6; }
th button[data-direction='asc']::after { content: ' ↑'; }
th button[data-direction='desc']::after { content: ' ↓'; }
.bom-missing { color: var(--muted); opacity: .78; }
.view-toggle { align-items: center; display: flex; gap: 7px; justify-content: flex-end; margin: 10px 0; }
.pagination { align-items: center; display: flex; gap: 14px; justify-content: center; margin: 16px 0; }
.view-toggle .active { border-color: var(--blue); color: var(--blue); }
.file-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.part-card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--text); display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding-bottom: 12px; }
.part-card:hover { background: var(--surface-hover); border-color: var(--blue); color: var(--text); text-decoration: none; }
.part-thumbnail { align-items: center; aspect-ratio: 8 / 5; background: #e8eef4; display: flex; justify-content: center; margin-bottom: 10px; overflow: hidden; width: 100%; }
.part-thumbnail img { display: block; height: 100%; object-fit: cover; width: 100%; }
.type-thumbnail { background: var(--code); }
.document-type-icon { align-items: center; border: 2px solid var(--blue); border-radius: 5px; color: var(--blue); display: flex; font-size: 20px; font-weight: 700; height: 72px; justify-content: center; letter-spacing: .5px; width: 62px; }
.folder-card-icon { background: var(--folder); border: 2px solid var(--blue); border-radius: 3px; height: 56px; position: relative; width: 80px; }
.folder-card-icon::before { background: var(--folder); border: 2px solid var(--blue); border-bottom: 0; content: ''; height: 14px; left: -2px; position: absolute; top: -15px; width: 36px; }
.part-card-name, .part-card-commit, .part-card > .muted { margin-left: 12px; margin-right: 12px; overflow: hidden; text-overflow: ellipsis; }
.part-card-name { font-weight: 650; overflow-wrap: anywhere; }
.part-card-commit { color: var(--muted); font-size: 12px; margin-top: 5px; white-space: nowrap; }
.part-card > .muted { font-size: 11px; white-space: nowrap; }
@media (min-width: 700px) { .file-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .file-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Upload enhancement: the plain file input remains a no-JS/mobile fallback. */
.drop-zone { align-items: center; border: 2px dashed var(--input-border); border-radius: 4px; display: flex; flex-direction: column; justify-content: center; min-height: 120px; padding: 16px; text-align: center; transition: border-color .15s, background .15s; }
.drop-zone.dragover { background: var(--surface-hover); border-color: var(--blue); }
.repo-files.dragover { border-radius: 4px; outline: 3px dashed var(--blue); outline-offset: 5px; }
.drop-zone input { margin-top: 10px; }
.upload-list { display: grid; gap: 8px; margin: 12px 0; }
.upload-item { min-width: 0; }
.upload-item-header { display: flex; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; }
.upload-progress { accent-color: var(--button); height: 12px; width: 100%; }
.upload-status { color: var(--muted); font-size: 12px; }
.upload-status.error { color: var(--danger); }

@media (max-width: 768px) {
  .global-header { flex-wrap: wrap; gap: 10px; min-height: 58px; padding: 7px 12px; }
  .nav-toggle, .theme-toggle { min-height: 44px; min-width: 44px; }
  .product-name { display: none; }
  .nav-toggle { order: 2; }
  .js .nav-toggle { display: inline-block; }
  .global-header .theme-toggle { margin-left: auto; order: 1; }
  .global-nav {
    background: var(--nav-bg); box-shadow: 0 5px 12px rgba(0,0,0,.25); display: flex;
    flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 12px; left: 0; order: 3;
    padding: 14px 12px; position: static; right: 0; top: 58px; z-index: 20;
  }
  .js .global-nav { display: none; flex-basis: auto; position: absolute; }
  .js .global-nav.open { display: flex; }
  .header-spacer { display: none; }
  .repo-switcher { align-items: stretch; display: grid; grid-template-columns: 1fr; }
  .repo-switcher select, .repo-switcher input { max-width: none; width: 100%; }
  .header-link { align-items: center; display: flex; min-height: 44px; padding: 7px 0; }
  main { padding: 16px 12px 30px; }
  .grid-2, .compare-grid, .repo-create-form { grid-template-columns: 1fr; }
  .repo-create-form { align-items: stretch; }
  .hide-small { display: none; }
  #viewer { height: 420px; }
  .pdf-preview, .drawing-preview { height: 600px; }
  .clone-row { flex-wrap: wrap; }
  .clone-input { flex-basis: 100%; min-width: 0; }
  .table-wrap { background: transparent; border: 0; overflow: visible; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tr { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; margin: 0 0 10px; padding: 6px 0; }
  .table-wrap td { align-items: baseline; border: 0; display: flex; gap: 12px; justify-content: space-between; min-width: 0; padding: 5px 12px; text-align: right; }
  .table-wrap td::before { color: var(--muted); content: attr(data-label); flex: 0 0 74px; font-size: 11px; font-weight: 600; text-align: left; }
  .table-wrap td.file-name { font-size: 15px; justify-content: flex-start; text-align: left; }
  .table-wrap td.file-name::before, .table-wrap td.empty-state::before, .table-wrap td[colspan]::before { display: none; }
  .table-wrap td.commit-cell { max-width: none; overflow-wrap: anywhere; text-overflow: initial; white-space: normal; }
  .table-wrap td.author-cell { min-width: 0; }
  .table-wrap td.date { white-space: normal; }
  .table-wrap td.size { text-align: right; }
  .description-form { align-items: stretch; flex-direction: column; }
  .danger-zone { align-items: flex-start; flex-direction: column; }
  input[type=text], input[type=password], input[type=search], input[type=email], input[type=number], input[type=url], select { min-height: 44px; }
  .btn { min-height: 44px; padding: 10px 14px; }
}

@media (max-width: 480px) {
  .brand { font-size: 15px; }
  .brand-mark { height: 22px; width: 22px; }
  main { padding: 12px 9px 26px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .card { padding: 13px; }
  .card.compact { padding: 10px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grow { min-width: 0; width: 100%; }
  .row { align-items: stretch; }
  .row .btn, form > .btn, .actions .btn, .repo-create-form .btn,
  .description-form .btn, .danger-zone .btn { width: 100%; }
  .actions { align-items: stretch; flex-direction: column; }
  .version-form { align-items: stretch; flex-direction: column; width: 100%; }
  .version-form select { flex: 1; max-width: none; min-width: 0; width: 100%; }
  .last-commit .spacer { display: none; }
  #viewer { height: 360px; }
  .pdf-preview, .drawing-preview { height: 480px; }
  .drop-zone { min-height: 145px; }
  .drop-zone input { width: 100%; }
}

/* ---- merge, version upload and history graph (round 9) ---- */
.upload-version { display: inline-block; position: relative; }
.upload-version > summary { list-style: none; }
.upload-version > summary::-webkit-details-marker { display: none; }
.upload-version-panel { left: 0; margin-top: 6px; min-width: 340px; position: absolute; z-index: 20; }
.upload-version-panel form { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.conflict-actions form { display: inline-block; margin-right: 8px; }
#merge-abort-form { margin-top: 14px; }
#commit-graph { overflow-x: auto; }
.graph-svg { display: block; min-width: 640px; }
.graph-edge { fill: none; stroke: var(--soft-border); stroke-width: 1.6; }
.graph-dot { fill: var(--blue); stroke: var(--canvas); stroke-width: 2; }
.graph-svg a:hover .graph-dot { fill: var(--blue-dark); }
.graph-text { fill: var(--text); font-family: ui-monospace, monospace; font-size: 12px; }
.graph-sha { fill: var(--muted); }
.graph-tag rect { fill: var(--nav-bg); stroke: var(--border); }
.graph-tag text { fill: var(--text); font-size: 11px; text-anchor: middle; }
@media (max-width: 720px) {
  .upload-version-panel { min-width: 260px; position: static; }
}