:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --ink: #1b1f24;
  --dim: #626b73;
  --line: #e0e4e9;
  --line-soft: #eef1f4;
  --accent: #2f6fb5;
  --accent-soft: #e8f0f9;
  --ok-bg: #e7f5ec; --ok-ink: #1d6b3a;
  --warn-bg: #fdf3e0; --warn-ink: #8a5a10;
  --err-bg: #fdeaea; --err-ink: #97231f;
  --danger: #b3352f;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --card: #1c2024;
    --ink: #e6e9ec;
    --dim: #98a1a9;
    --line: #2c3238;
    --line-soft: #23282d;
    --accent: #6aa9e9;
    --accent-soft: #1d2937;
    --ok-bg: #16301f; --ok-ink: #7ed3a0;
    --warn-bg: #33280f; --warn-ink: #e6bd6a;
    --err-bg: #341a1a; --err-ink: #f0908b;
    --danger: #e0655e;
  }
}

* { box-sizing: border-box; }
/* тло на html теж: інакше при відскоку прокрутки визирає світла смуга */
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--accent); }
a.quiet { color: var(--dim); text-decoration: none; font-size: 13px; }
a.quiet:hover { color: var(--ink); }

/* --- шапка ---
   Тема студії (theme.py) задає --top-*, --accent-fill і --on-accent; без неї —
   запасні значення після коми, тобто як було. */
.top {
  display: flex; align-items: center; gap: 20px;
  padding: 0 22px; background: var(--top-bg, var(--card));
  border-bottom: 1px solid var(--top-line, var(--line));
  position: sticky; top: 0; z-index: 5; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 12px 0;
         text-decoration: none; color: var(--top-ink, var(--ink)); }
.mark {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background: var(--accent-fill, var(--accent)); color: var(--on-accent, #fff); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; letter-spacing: .02em;
}
.brand-logo { height: 30px; width: auto; max-width: 160px; object-fit: contain; flex: 0 0 auto; display: block; }
.brand-text { font-weight: 400; color: var(--top-dim, var(--dim)); }
.brand-text b { color: var(--top-ink, var(--ink)); font-weight: 600; }
.top nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.top nav a {
  padding: 15px 12px; text-decoration: none; color: var(--top-dim, var(--dim));
  border-bottom: 2px solid transparent; font-size: 14px;
}
.top nav a:hover { color: var(--top-ink, var(--ink)); }
.top nav a.on { color: var(--top-ink, var(--ink)); border-bottom-color: var(--top-accent, var(--accent)); font-weight: 500; }
.top a.quiet { color: var(--top-dim, var(--dim)); }
.top a.quiet:hover { color: var(--top-ink, var(--ink)); }
.userbox { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.who {
  color: var(--top-ink, var(--ink)); font-size: 13px; font-weight: 500;
  background: var(--top-chip, var(--bg)); border: 1px solid var(--top-line, var(--line));
  padding: 3px 10px; border-radius: 20px;
}
select.jump {
  font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 7px;
  border: 1px solid var(--top-line, var(--line)); background: var(--top-chip, var(--bg)); color: var(--top-ink, var(--ink));
}

main { max-width: 1100px; margin: 0 auto; padding: 24px 22px 64px; }
main.wide { max-width: 1520px; }

/* --- заголовок сторінки --- */
.pagehead {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; margin-bottom: 18px; flex-wrap: wrap;
}
.pagehead h1 { margin: 0 0 2px; }
.pagehead .lead { margin: 0; }
.pagehead-actions { display: flex; gap: 8px; flex-wrap: wrap; }

h1 { font-size: 23px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 16px; margin: 0 0 14px; }
h3 { font-size: 13px; margin: 22px 0 10px; color: var(--dim);
     text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
p.lead { color: var(--dim); margin: 0 0 18px; }
.quiet { color: var(--dim); font-size: 13px; }

/* --- вкладки --- */
.tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line);
  margin-bottom: 20px; overflow-x: auto;
}
.tabs a {
  padding: 9px 14px; text-decoration: none; color: var(--dim);
  border-bottom: 2px solid transparent; white-space: nowrap; font-size: 14px;
}
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }

/* --- картки --- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
}
.card.tight { padding: 14px 20px; }
.subcard {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft);
}
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.grid-2 > .card { margin-bottom: 0; }

.kv > div { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.kv > div:last-child { border-bottom: none; }
.kv span { display: block; font-size: 12px; color: var(--dim);
           text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.kv code { font-size: 13px; }
.kv small { display: block; margin-top: 2px; }

/* --- таблиці --- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
     color: var(--dim); font-weight: 600; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }
table.quiet-table td { color: var(--dim); font-size: 13px; padding: 5px 10px 5px 0;
                       border-bottom: none; }
tbody tr:hover, table tr:hover { background: var(--line-soft); }
table tr:first-child:hover { background: transparent; }

code, .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; }
.url { display: block; padding: 2px 0; color: var(--dim); }

/* --- форми --- */
label { display: block; margin-bottom: 14px; }
label > span { display: block; font-size: 13px; color: var(--dim); margin-bottom: 5px; }
input[type=text], input[type=password], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit;
}
textarea { font-family: ui-monospace, Consolas, monospace; font-size: 13px; min-height: 190px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 180px; }
.formrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.chips form { display: inline; }
.check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.check input { margin-top: 4px; }
.check span { display: block; }
.check small { color: var(--dim); display: block; }

button, .btn {
  font: inherit; font-size: 14px; padding: 9px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--accent-fill, var(--accent)); background: var(--accent-fill, var(--accent));
  color: var(--on-accent, #fff); text-decoration: none; display: inline-block; line-height: 1.3;
}
button:hover, .btn:hover { filter: brightness(1.07); }
button.ghost, .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
button.ghost:hover, .btn.ghost:hover { background: var(--line-soft); filter: none; }
button.danger, .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.small, .btn.small { padding: 6px 11px; font-size: 13px; }
button.wide { width: 100%; padding: 11px; font-size: 15px; }

/* --- повідомлення --- */
.flashes { margin-bottom: 18px; display: grid; gap: 8px; }
.flash { padding: 11px 15px; border-radius: 9px; font-size: 14px; }
.flash.ok { background: var(--ok-bg); color: var(--ok-ink); }
.flash.warn { background: var(--warn-bg); color: var(--warn-ink); }
.flash.err { background: var(--err-bg); color: var(--err-ink); }
.flash.big { margin-bottom: 18px; line-height: 1.6; }
.flash a { color: inherit; }

.badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px; margin: 2px 2px 2px 0;
  font-size: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--dim);
  text-decoration: none;
}
a.badge:hover { border-color: var(--accent); color: var(--accent); }
.badge.on { background: var(--ok-bg); color: var(--ok-ink); border-color: transparent; }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
.badge.off { background: var(--err-bg); color: var(--err-ink); border-color: transparent; }

.danger-zone { border-color: var(--danger); }
.danger-zone h2 { color: var(--danger); }

.matrix td { padding: 7px 8px; }
.matrix .p { white-space: nowrap; color: var(--dim); }
.matrix fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.matrix label { margin: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.matrix label span { display: inline; margin: 0; color: var(--ink); }

details summary { cursor: pointer; color: var(--dim); padding: 6px 0; }
details[open] summary { margin-bottom: 8px; }
footer {
  max-width: 1100px; margin: 0 auto; padding: 0 22px 40px;
  color: var(--dim); font-size: 13px; display: flex; gap: 20px;
  justify-content: space-between; flex-wrap: wrap;
}
.empty { color: var(--dim); padding: 26px 0; text-align: center; }

/* --- сторінка входу --- */
body.centered {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--login-bg, var(--bg));
}
.login-brand .brand-logo { height: 38px; max-width: 200px; }
.login {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 30px; width: 100%; max-width: 380px;
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.login-brand .mark { width: 38px; height: 38px; font-size: 15px; border-radius: 10px; }
.login-brand b { display: block; font-size: 17px; }
.login-brand span { display: block; color: var(--dim); font-size: 13px; }
.login .flash { margin-bottom: 14px; }
.login-note { color: var(--dim); font-size: 12.5px; line-height: 1.6;
              margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft); }

/* --- переглядач --- */
.crumbs { margin-bottom: 16px; font-size: 15px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { color: var(--dim); margin: 0 4px; }
.crumbs .badge, .crumbs .quiet { margin-left: 8px; }

pre.code, pre.diff {
  margin: 0; padding: 12px; overflow-x: auto; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--line);
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.45;
  white-space: pre; tab-size: 4;
}
pre.diff span { display: block; }
.d-add { background: var(--ok-bg); color: var(--ok-ink); }
.d-del { background: var(--err-bg); color: var(--err-ink); }
.d-hunk { color: var(--accent); font-weight: 600; }
.d-meta { color: var(--dim); }

table.blame td { padding: 0 8px; vertical-align: top; border-bottom: none; }
table.blame pre.code { border: 0; background: transparent; padding: 1px 0; }
table.blame tr:hover { background: var(--line-soft); }

.hl { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.hl, .hl pre { background: transparent; }
.hl table { width: auto; }
.hl td { border-bottom: none; padding: 0 8px; }
.hl tr:hover { background: transparent; }
.hl pre { margin: 0; font-family: ui-monospace, Consolas, monospace;
          font-size: 13px; line-height: 1.45; }
.hl .linenos { color: var(--dim); user-select: none; }

.entry {
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.entry:last-child { border-bottom: none; }
.entry-top { display: flex; justify-content: space-between; gap: 14px;
             align-items: baseline; flex-wrap: wrap; }
.entry-msg { margin: 6px 0 0; white-space: pre-wrap; }

/* --- прев'ю: сітка, стрічка версій, мініатюри в історії --- */
.toolbar { display: flex; justify-content: space-between; align-items: center;
           gap: 12px; margin-bottom: 12px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px;
       overflow: hidden; background: var(--card); }
.seg a { padding: 5px 14px; font-size: 13px; color: var(--dim); text-decoration: none; }
.seg a + a { border-left: 1px solid var(--line); }
.seg a:hover { color: var(--ink); }
.seg a.on { background: var(--accent-soft); color: var(--ink); font-weight: 500; }

.thumb {
  position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--bg);
}
/* під картинкою — шахівниця: прозорі текстури й PNG видно як прозорі */
.thumb.has-img {
  background-image: linear-gradient(45deg, var(--line-soft) 25%, transparent 25%),
                    linear-gradient(-45deg, var(--line-soft) 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, var(--line-soft) 75%),
                    linear-gradient(-45deg, transparent 75%, var(--line-soft) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb .glyph { font-size: 44px; }
.thumb .ext {
  font: 600 13px/1 ui-monospace, Consolas, monospace; letter-spacing: .06em;
  color: var(--dim); background: var(--card); border: 1px solid var(--line);
  padding: 6px 9px; border-radius: 6px;
}
.thumb .soon { position: absolute; bottom: 8px; font-size: 11px; color: var(--dim); }
.thumb .lockmark {
  position: absolute; left: 6px; top: 6px; font-size: 11px; padding: 2px 7px;
  border-radius: 20px; background: var(--err-bg); color: var(--err-ink);
  max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
         gap: 14px; margin-bottom: 18px; }
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px; color: var(--ink); text-decoration: none; min-width: 0;
}
.tile:hover { border-color: var(--accent); }
.tile-name { margin: 8px 2px 0; font-size: 14px; font-weight: 500;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-sub { margin: 1px 2px 2px; font-size: 12px; color: var(--dim);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.namecell { white-space: nowrap; }
.mini { width: 28px; height: 28px; object-fit: contain; vertical-align: middle;
        margin-right: 6px; border-radius: 4px; background: var(--bg); }
span.mini.glyph { display: inline-block; text-align: center; line-height: 28px; background: none; }

.showcase { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.showcase img {
  max-width: 100%; width: auto; height: auto; min-width: min(256px, 100%);
  max-height: 512px; object-fit: contain; border-radius: 8px;
  border: 1px solid var(--line);
}

.strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.ver {
  /* min-width: 0 — інакше довгий опис коміту розпирає картку на всю ширину */
  flex: 0 0 158px; width: 158px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px; color: var(--ink); text-decoration: none; font-size: 13px;
}
.ver:hover { border-color: var(--accent); }
.ver.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ver-top { margin-top: 7px; }
.ver-msg { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ver-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }

.shots { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.shot {
  position: relative; width: 96px; height: 96px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.shots.big .shot { width: 144px; height: 144px; }
.shot:hover { border-color: var(--accent); }
.shot img { width: 100%; height: 100%; object-fit: contain; }
.shot .ext { font: 600 12px/1 ui-monospace, Consolas, monospace; color: var(--dim); }
.shot-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px;
  font-size: 11px; color: #fff; background: rgba(0, 0, 0, .55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shots-more { margin-left: 4px; }
.shot-flag { position: absolute; top: 4px; left: 4px; }

/* --- залежності --- */
.cardhead { display: flex; justify-content: space-between; align-items: baseline;
            gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.cardhead h2 { margin: 0; }
.chips .quiet { align-self: center; }
.state {
  display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 12px;
  white-space: nowrap; background: var(--bg); color: var(--dim); border: 1px solid var(--line);
}
.state.ok { background: var(--ok-bg); color: var(--ok-ink); border-color: transparent; }
.state.missing, .state.outside { background: var(--err-bg); color: var(--err-ink); border-color: transparent; }
.state.case, .state.absolute { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
.state.packed { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.count {
  display: inline-block; min-width: 20px; padding: 0 7px; border-radius: 20px;
  font-size: 12px; font-weight: 500; line-height: 20px; text-align: center;
  background: var(--bg); color: var(--dim); border: 1px solid var(--line);
  vertical-align: middle;
}
h2 .count { margin-left: 4px; }

/* групи всередині картки: заголовок-перемикач і вміст */
.grouphead { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; }
.grouphead h3 { margin: 0; }
details.depgroup > summary { list-style: none; cursor: pointer; padding: 0; color: inherit; }
details.depgroup > summary::-webkit-details-marker { display: none; }
details.depgroup > summary::before {
  content: "▸"; color: var(--dim); font-size: 12px; width: 10px; transition: transform .15s;
}
details.depgroup[open] > summary::before { transform: rotate(90deg); }
details.depgroup[open] > summary { margin-bottom: 10px; }

/* що зламано — окремим блоком угорі, не губиться серед сотні текстур */
.attention {
  margin: 14px 0 6px; padding: 2px 14px 12px; border-radius: 9px;
  background: var(--err-bg); border: 1px solid transparent;
}
.attention .grouphead { margin-top: 10px; }
.attention .grouphead h3 { color: var(--err-ink); }
.attention .deprow { background: var(--card); }

/* зображення — плитками */
.depgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.deptile {
  display: block; min-width: 0; padding: 6px; border-radius: 9px;
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; background: var(--card);
}
a.deptile:hover { border-color: var(--accent); }
.deptile .thumb { border-radius: 6px; }
.deptile .thumb .ext { font-size: 11px; padding: 4px 7px; }
.deptile .tile-name { margin: 5px 1px 0; font-size: 12px; }
.deptile .tile-sub { margin: 0 1px; font-size: 11px; }
.tilecount, .tilestate { position: absolute; font-size: 10.5px; }
.tilecount {
  right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 20px;
  background: rgba(0, 0, 0, .6); color: #fff;
}
.tilestate { left: 4px; top: 4px; }

/* теки всередині групи зображень: рядок-перемикач із лічильником і підглядом */
details.depfolder { border-top: 1px solid var(--line-soft); }
details.depfolder:first-of-type { border-top: 0; }
details.depfolder > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 8px 0; color: inherit; margin: 0;
}
details.depfolder > summary::-webkit-details-marker { display: none; }
details.depfolder > summary::before {
  content: "▸"; color: var(--dim); font-size: 11px; width: 10px; transition: transform .15s;
}
details.depfolder[open] > summary::before { transform: rotate(90deg); }
details.depfolder[open] > summary { margin-bottom: 4px; }
details.depfolder > .depgrid { margin-bottom: 12px; }
.depfolder-name { font: 12.5px/1.4 ui-monospace, Consolas, monospace; color: var(--ink); }
.depfolder-name.plain { font-family: inherit; font-size: 13px; font-weight: 500; }
.peek { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; }
.peek img { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
details.depfolder[open] .peek { display: none; }

/* набори без картинок — назвами в кілька колонок */
.namelist { columns: 210px; column-gap: 20px; margin: 2px 0 12px; }
.nameitem {
  display: block; break-inside: avoid; padding: 2px 0; font-size: 12.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
}
a.nameitem:hover { color: var(--accent); }
.nameitem .ext {
  display: inline-block; min-width: 38px; margin-right: 6px; color: var(--dim);
  font: 600 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .03em;
}
.exts { margin-left: 4px; font-size: 12px; }
details.moreitems { margin-top: 6px; }
details.moreitems > summary { font-size: 13px; color: var(--accent); padding: 4px 0; }
details.moreitems[open] > summary { margin-bottom: 6px; }

/* решта — компактними рядками, у дві колонки, коли є місце */
.deplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px; }
.deprow {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px;
  border-radius: 8px; border: 1px solid var(--line-soft); color: var(--ink); text-decoration: none;
}
a.deprow:hover { border-color: var(--accent); }
.depicon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 6px; overflow: hidden;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
}
.depicon img { width: 100%; height: 100%; object-fit: contain; }
.depicon .ext { font: 600 9.5px/1 ui-monospace, Consolas, monospace; color: var(--dim); letter-spacing: .03em; }
.depicon.big { flex-basis: 44px; width: 44px; height: 44px; }
.depmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.depname { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depname .badge { font-weight: 400; font-size: 11px; padding: 0 6px; margin: 0 0 0 4px; }
.depdetail {
  font: 11.5px/1.4 ui-monospace, Consolas, monospace; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr;
}
.deprow > .state { flex: 0 0 auto; }

/* сторінка Links: сцени згорнутими картками, згруповані за текою */
.folderhead { margin-top: 22px; }
.folderhead h3 { text-transform: none; letter-spacing: 0; font-family: ui-monospace, Consolas, monospace; }
details.linkcard { padding: 12px 16px; margin-bottom: 10px; }
details.linkcard > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 0; color: inherit;
}
details.linkcard > summary::-webkit-details-marker { display: none; }
details.linkcard > summary .chips { margin: 3px 0 0; gap: 5px; }
details.linkcard[open] > summary { margin-bottom: 12px; }

.thumb .brokenmark {
  position: absolute; right: 6px; top: 6px; font-size: 11px; padding: 2px 7px;
  border-radius: 20px; background: var(--err-bg); color: var(--err-ink);
}
.namecell .state { margin-left: 6px; }

/* --- задачі Kitsu (лише показ: самі задачі живуть у Kitsu) --- */
.kpill, .ktag { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 7px;
                border-radius: 20px; font-size: 12px; white-space: nowrap; vertical-align: middle;
                background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.kpill i, .ktag i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: 0 0 8px; }
.kpill.done { color: var(--dim); }
.namecell .ktag { margin-left: 6px; font-size: 11px; }
.thumb .ktag.ontile { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px);
                      font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
.klist { display: grid; gap: 4px; }
.krow { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 8px;
        text-decoration: none; color: var(--ink); border: 1px solid var(--line-soft); flex-wrap: wrap; }
.krow:hover { border-color: var(--accent); }
.ktype { font-weight: 600; min-width: 110px; }
.kwho { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.kwho .who { font-size: 12.5px; }
.klink { margin-bottom: 14px; }
.klink input { width: 100%; margin-top: 8px; font-family: var(--mono, monospace); }
.knew { display: inline-flex; gap: 6px; align-items: center; }
.knew input { width: 110px; }
.offscreen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ksmall { font-size: 12.5px; margin: -2px 0 12px; }
.klast { flex-basis: 100%; font-size: 12.5px; color: var(--dim); white-space: pre-line; margin-left: 122px; }

/* --- сторінка Kitsu: шапка, вкладки --- */
.khead { margin-bottom: 10px; }
.khead h1 .badge { vertical-align: 3px; margin-left: 4px; }
.kerr { margin-bottom: 10px; }
.ktabs { margin: 8px 0 18px; }
.ktabs .count { margin-left: 4px; }
.ktabs .badge { margin: 0 0 0 4px; vertical-align: 1px; }
.kpane > h3.kgroup { margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; }

/* пояснення про імена — одне на сторінку, згорнуте */
details.khelp { margin: 0 0 6px; }
details.khelp > summary { font-size: 13px; color: var(--accent); padding: 2px 0; }
.khelp-body { font-size: 13px; color: var(--dim); background: var(--card); border: 1px solid var(--line);
              border-radius: var(--radius); padding: 12px 16px; }
.khelp-body p { margin: 0 0 8px; }
.khelp-body p:last-child { margin: 0; }

/* пов'язані проєкти: рядок — зведення, клік — налаштування */
.klist-projects { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
details.kproj + details.kproj { border-top: 1px solid var(--line); }
/* посилання на проєкт чи вкладку не ховає верх під закріпленою шапкою */
details.kproj, .kpane, details.khelp, .kfree-row { scroll-margin-top: 70px; }
details.kproj > summary {
  list-style: none; cursor: pointer; color: var(--ink); padding: 11px 16px; margin: 0;
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 12px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr) 196px 150px;
}
details.kproj > summary::-webkit-details-marker { display: none; }
details.kproj > summary::before { content: "▸"; color: var(--dim); font-size: 14px; line-height: 1; transition: transform .15s; }
details.kproj[open] > summary::before { transform: rotate(90deg); }
details.kproj > summary:hover, details.kproj[open] > summary { background: var(--line-soft); }
.kp-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kp-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* з якої заготовки налаштування проєкту; пунктир — живе за типовою */
.kp-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
           font-size: 11px; line-height: 18px; font-weight: 500; color: var(--dim);
           border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; }
.kp-chip.follow { border-style: dashed; }
.kp-prod, .kp-stats { color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-flags { display: flex; gap: 4px; }
.kflag { font-size: 11.5px; padding: 1px 8px; border-radius: 20px; border: 1px solid var(--line); white-space: nowrap; }
.kflag.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 500; }
.kflag.off { color: var(--dim); text-decoration: line-through; opacity: .65; }
.kp-alert { text-align: right; }
.kp-alert .badge { margin: 0; }

.kp-body { padding: 2px 16px 16px 40px; border-top: 1px solid var(--line); }
.kp-body > .flash { margin: 12px 0 0; }
.kp-make { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px;
           font-size: 13px; color: var(--dim); }
.kp-cols { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 22px; margin-top: 14px; }
.kp-cols fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.kp-cols legend { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim);
                  font-weight: 600; margin-bottom: 8px; padding: 0; }
.kp-cols legend a { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; font-size: 12px; }
.kp-cols label { margin-bottom: 10px; }
.kp-cols label > span { font-size: 12px; margin-bottom: 3px; }
.kp-cols input[type=text], .kp-cols select { padding: 6px 9px; font-size: 13.5px; }
.kp-cols textarea { min-height: 0; padding: 6px 9px; font-size: 12.5px; }
.kp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kp-cols .check { margin-bottom: 12px; }
.kp-cols .check small { font-size: 12px; margin-top: 1px; }
.kp-types { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: var(--dim);
            padding-top: 10px; border-top: 1px dashed var(--line); }
.kp-type b { color: var(--ink); font-weight: 600; }
.kp-note { font-size: 12.5px; color: var(--dim); margin: 8px 0 0; max-width: 820px; }
.kp-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.kp-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* рядок заготовки в налаштуваннях проєкту */
.kp-presetbar { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap;
                margin-top: 14px; padding: 6px 6px 6px 12px; border-radius: 8px; background: var(--line-soft);
                font-size: 13px; color: var(--dim); }
.kp-presetbar b { color: var(--ink); font-weight: 600; }
.kp-presetbar .kfilled { color: var(--accent); font-weight: 500; }
.kp-presetact { display: flex; align-items: center; gap: 14px; }
.kp-presetact a { font-size: 13px; text-decoration: none; }
.kp-presetact select { width: auto; padding: 4px 8px; font-size: 13px; background: var(--card); }
/* заповнене з заготовки — видно, що зміниться, поки не збережено */
label.kchanged input[type=text], label.kchanged textarea { border-color: var(--accent); background: var(--accent-soft); }
label.check.kchanged > span { color: var(--accent); }

/* заготовки: рядок — зведення, клік — налаштування */
.kpresets-lead { margin: 0 0 12px; max-width: 780px; line-height: 1.55; }
details.kpreset > summary { grid-template-columns: 12px minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr) 196px 90px; }
details.kpreset > summary .kp-prod { font-size: 12.5px; }
details.kpreset.builtin > summary .kp-title { font-weight: 500; color: var(--dim); }
.kp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; margin-top: 14px; }
.kp-head label { margin: 0; }
.kp-head label > span { font-size: 12px; margin-bottom: 3px; }
.kp-head input { padding: 6px 9px; font-size: 13.5px; }
fieldset.kp-ro { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.kp-ro input[type=text], fieldset.kp-ro textarea { color: var(--dim); background: var(--bg); }
.knewpreset { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; }
.knewpreset input[type=text] { width: 220px; padding: 6px 9px; font-size: 13.5px; }
.knewpreset label.knew-from { display: flex; align-items: center; gap: 8px; margin: 0; }
.knewpreset label.knew-from > span { margin: 0; color: var(--dim); font-size: 13px; }
.knewpreset select { width: auto; max-width: 260px; padding: 6px 9px; font-size: 13.5px; }

/* непов'язані проєкти — по рядку */
.kfree { padding: 6px 16px; }
.kfree > p { margin: 8px 0; }
.kfree-row { display: grid; grid-template-columns: minmax(140px, 240px) minmax(200px, 320px) auto auto; gap: 12px;
             align-items: center; justify-content: start; padding: 8px 0; }
.kfree-row select[name=preset] { width: auto; max-width: 240px; }
label.kcreate-preset { margin: 10px 0 0; max-width: 420px; }
label.kcreate-from { margin: 0 0 14px; max-width: 520px; }
.kfree-row + .kfree-row { border-top: 1px solid var(--line-soft); }
.kgone-row { display: grid; grid-template-columns: minmax(140px, 240px) minmax(200px, 320px) 1fr auto; gap: 12px;
             align-items: center; padding: 9px 0; font-size: 13.5px; }
.kgone-row + .kgone-row { border-top: 1px solid var(--line-soft); }
.kgone-row .badge { margin-left: 4px; }
@media (max-width: 900px) { .kgone-row { grid-template-columns: 1fr; } }
.kfree-row select { padding: 6px 9px; font-size: 13.5px; }

/* люди */
.kpeople-lead { margin: 0; max-width: 700px; }
.kseg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.kseg button { background: transparent; border: 0; border-radius: 0; color: var(--dim); padding: 5px 12px; font-size: 13px; }
.kseg button + button { border-left: 1px solid var(--line); }
.kseg button.on { background: var(--accent-soft); color: var(--ink); font-weight: 500; }
.kseg button:hover { filter: none; color: var(--ink); }
table.kpeople td { padding: 6px 10px; }
table.kpeople select { padding: 5px 8px; font-size: 13.5px; width: auto; min-width: 150px; }
table.kpeople.only-todo tr[data-todo="0"] { display: none; }
.kstate { font-size: 13px; }
.kdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line); margin-right: 7px; vertical-align: 1px; }
.kdot.on { background: var(--ok-ink); }
.kdot.warn { background: var(--warn-ink); }
.kdot.off { background: var(--err-ink); }
.knew input { padding: 5px 8px; font-size: 13.5px; }

.kpane .grid-2 + .card { margin-top: 18px; }
.ksteps { margin: 0; padding-left: 20px; color: var(--dim); font-size: 13.5px; line-height: 1.65; }
.ksteps li + li { margin-top: 6px; }

@media (max-width: 900px) {
  details.kproj > summary, details.kpreset > summary { grid-template-columns: 12px 1fr auto; }
  .kp-prod, .kp-stats, .kp-flags { display: none; }
  .kp-cols, .kp-pair, .kp-head { grid-template-columns: 1fr; }
  .kp-body { padding-left: 16px; }
  .kfree-row { grid-template-columns: 1fr; }
  .kp-foot { flex-wrap: wrap; }
}

/* --- шаблони файлів --- */
.templist { display: grid; gap: 6px; margin: 4px 0 14px; }
.temprow { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border: 1px solid var(--line-soft);
           border-radius: 9px; }
.temprow-thumb { flex: 0 0 44px; height: 44px; border-radius: 7px; overflow: hidden; background: var(--bg);
                 display: flex; align-items: center; justify-content: center; text-decoration: none; }
.temprow-thumb img { width: 100%; height: 100%; object-fit: cover; }
.temprow-thumb .ext, .tempchoice-thumb .ext { font: 600 9.5px/1 ui-monospace, Consolas, monospace; color: var(--dim); }
.temprow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.temprow-body .quiet { font-size: 12px; }
.tempform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: end;
            padding-top: 12px; border-top: 1px solid var(--line-soft); margin-top: 8px; }
.tempform label { margin: 0; }
.tempform .formrow { grid-column: 1 / -1; margin: 0; }
.tempick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tempchoice { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px;
              cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.tempchoice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.tempchoice input { position: absolute; top: 8px; left: 8px; }
.tempchoice-thumb { aspect-ratio: 4 / 3; border-radius: 7px; overflow: hidden; background: var(--bg);
                    display: flex; align-items: center; justify-content: center; }
.tempchoice-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tempchoice-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- тема (сторінка Theme) --- */
.theme-hint { margin: 6px 0 16px; line-height: 1.5; }
.grid-2 + .card { margin-top: 18px; }
.theme-logo { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.theme-logo-pic { flex: 0 0 auto; min-width: 64px; height: 64px; padding: 8px; border-radius: 12px;
                  background: var(--top-bg, var(--bg)); border: 1px solid var(--line);
                  display: flex; align-items: center; justify-content: center; }
.theme-logo-pic img { max-height: 46px; max-width: 180px; display: block; }
.theme-logo-pic .mark { width: 40px; height: 40px; font-size: 15px; border-radius: 10px; }
label.theme-logo-file { flex: 1 1 220px; margin: 0; }
.theme-color { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* кнопка-колір, як у Nextcloud: сам колір, клік — палітра */
label.theme-swatch { position: relative; flex: 1 1 220px; margin: 0; min-height: 44px; border-radius: 10px;
                     display: flex; align-items: center; justify-content: center; cursor: pointer;
                     background: var(--swatch); color: var(--swatch-ink); border: 1px solid var(--line);
                     font-weight: 600; font-size: 14px; }
label.theme-swatch.unset { background: var(--bg); color: var(--dim); border-style: dashed; font-weight: 500; }
label.theme-swatch span { margin: 0; color: inherit; font-size: inherit; }
label.theme-swatch input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
                                       cursor: pointer; border: 0; padding: 0; }
input.theme-hex { flex: 0 0 180px; width: 180px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
                  padding: 9px 11px; }
.theme-reset { font-size: 16px; line-height: 1; padding: 8px 11px; }
.theme-sample { position: static; border: 1px solid var(--top-line, var(--line)); border-radius: 10px; margin-bottom: 14px; }
.theme-sample nav a, .theme-sample a.quiet { cursor: default; }
.theme-parts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* --- версія Blender: студії (Templates) і проєкту (Settings) --- */
.blender-form { display: flex; align-items: flex-end; gap: 10px 16px; flex-wrap: wrap; }
.blender-text { flex: 1 1 380px; min-width: 0; }
.blender-text h2 { margin-bottom: 4px; }
.blender-text p { margin: 0; max-width: 720px; }
label.blender-field { margin: 0; flex: 0 0 200px; }
label.blender-field input { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.blender-card > .flash { margin: 14px 0 0; }

/* --- вузькі екрани (телефон, вертикальна панель) --- */
@media (max-width: 720px) {
  .top { flex-direction: column; align-items: stretch; gap: 0; padding: 0 14px; }
  .brand { padding: 12px 0 8px; }
  .top nav { width: 100%; overflow-x: auto; border-top: 1px solid var(--top-line, var(--line-soft)); }
  .top nav a { padding: 11px 10px; }
  .userbox { padding: 8px 0; border-top: 1px solid var(--top-line, var(--line-soft));
             justify-content: flex-end; gap: 10px; }
  main, footer { padding-left: 14px; padding-right: 14px; }
  .pagehead { flex-direction: column; gap: 10px; }
  .card { padding: 16px 14px; }
  .matrix fieldset { flex-direction: column; gap: 4px; }
  .grid-2 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .deplist { grid-template-columns: 1fr; }
  .depgrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .tempform { grid-template-columns: 1fr; }
  .kgrid { grid-template-columns: 1fr; }
  h1 { font-size: 20px; }
}