:root {
  --pico-font-size: 100%;
  --gap: 0.75rem;
}

.topbar nav { padding: 0.25rem 0; }
.brand { font-weight: 700; letter-spacing: -0.01em; text-decoration: none; }
main.container { padding-top: 0.5rem; }
footer.container { padding-top: 2rem; padding-bottom: 2rem; }

.muted { color: var(--pico-muted-color); }
.small { font-size: 0.875rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.mono { font-family: var(--pico-font-family-monospace); font-size: 0.85em; overflow-wrap: anywhere; }
.hidden { display: none !important; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: 1rem;
}
.page-head h2, .page-head h1 { margin: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.actions > a[role="button"], .actions button, .actions form { margin: 0; width: auto; }
form.inline { display: inline; margin: 0; }
form.inline button { margin: 0; width: auto; }

button.link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: auto;
  color: var(--pico-primary);
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
button.link.danger, .danger { color: var(--pico-del-color); }
button.small, a.small[role="button"] { padding: 0.3rem 0.7rem; font-size: 0.85rem; }

.flash { padding: 0.6rem 0.9rem; border-radius: var(--pico-border-radius); margin-bottom: 1rem; overflow-wrap: anywhere; }
.flash.ok { background: color-mix(in srgb, var(--pico-ins-color) 15%, transparent); }
.flash.err { background: color-mix(in srgb, var(--pico-del-color) 15%, transparent); }
.flash.warn { background: color-mix(in srgb, #f5a524 18%, transparent); }

.badge {
  display: inline-block;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.5;
  border: 1px solid var(--pico-muted-border-color);
  color: var(--pico-muted-color);
  white-space: nowrap;
}
.badge.write { border-color: color-mix(in srgb, var(--pico-primary) 50%, transparent); color: var(--pico-primary); }
.badge.bad { border-color: color-mix(in srgb, var(--pico-del-color) 60%, transparent); color: var(--pico-del-color); }
.badge.good { border-color: color-mix(in srgb, var(--pico-ins-color) 60%, transparent); color: var(--pico-ins-color); }

/* Хлебные крошки */
.crumbs { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.15rem 0.4rem; font-size: 0.9rem; margin-bottom: 0.5rem; }
.crumbs a { text-decoration: none; }
.crumbs .sep { color: var(--pico-muted-color); }

/* Списки файлов */
.files { width: 100%; }
.files td { vertical-align: top; }
.files .name a { text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.files .icon { width: 1.8rem; }
.files .desc { color: var(--pico-muted-color); font-size: 0.85rem; }
.empty { color: var(--pico-muted-color); padding: 1rem 0; }
.description { white-space: pre-wrap; color: var(--pico-muted-color); margin-bottom: 1rem; }

/* Загрузка */
.dropzone {
  border: 2px dashed var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: 1rem;
  text-align: center;
  margin: 1rem 0;
  color: var(--pico-muted-color);
}
.dropzone.over { border-color: var(--pico-primary); color: var(--pico-primary); }
.dropzone input[type="file"] { display: none; }
.dropzone .actions { justify-content: center; margin-top: 0.5rem; }
.uploads { list-style: none; padding: 0; margin: 0.5rem 0 0; font-size: 0.85rem; text-align: left; }
.uploads li { list-style: none; display: flex; gap: 0.5rem; justify-content: space-between; }
.uploads .err { color: var(--pico-del-color); }
.uploads .ok { color: var(--pico-ins-color); }

/* Предпросмотр */
.preview { margin: 1rem 0; }
.preview img, .preview video { max-width: 100%; max-height: 80vh; display: block; margin: 0 auto; }
.preview audio { width: 100%; }
.preview iframe.pdf { width: 100%; height: 85vh; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
.preview .markdown { max-width: 50rem; }
.preview .markdown img { max-width: 100%; }
.preview pre, .hl pre { margin: 0; max-height: 80vh; overflow: auto; font-size: 0.85rem; }
.hl { border-radius: var(--pico-border-radius); overflow: hidden; }
.table-wrap { overflow: auto; max-height: 80vh; }
.table-wrap table { font-size: 0.85rem; }
.table-wrap td, .table-wrap th { white-space: nowrap; }
.card-file { text-align: center; padding: 2rem 1rem; }
.card-file .big { font-size: 3rem; }

.meta-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; font-size: 0.9rem; }
.meta-list dt { color: var(--pico-muted-color); }
.meta-list dd { margin: 0; overflow-wrap: anywhere; }

details.section { margin-top: 1rem; }
details.section > summary { font-weight: 600; }
.link-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.link-row input { margin: 0; flex: 1; min-width: 12rem; font-size: 0.85rem; }

/* Страница HTML-отчёта: панель сверху и отчёт на всю высоту */
body.report-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.report-page > main { flex: 1; display: flex; flex-direction: column; padding: 0; margin: 0; max-width: none; min-height: 0; }
.report-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  font-size: 0.85rem;
}
.report-bar .back { text-decoration: none; font-size: 1.1rem; line-height: 1; padding: 0 0.15rem; }
.report-bar .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; }
.report-bar .crumbs { margin: 0; font-size: 0.85rem; }
.report-bar .grow { flex: 1; }
.report-bar button, .report-bar a[role="button"] { padding: 0.2rem 0.6rem; font-size: 0.8rem; margin: 0; width: auto; }
.report-frame { flex: 1; width: 100%; border: 0; min-height: 0; background: #fff; }
body.bare .report-bar { display: none; }
.show-bar { position: fixed; right: 0.5rem; bottom: 0.5rem; z-index: 10; padding: 0.2rem 0.6rem; font-size: 0.8rem; opacity: 0.7; }
body:not(.bare) .show-bar { display: none; }
body.public-page .report-bar .title { max-width: 70vw; }

dialog article { max-width: 40rem; }
dialog .close { float: right; }
dialog article > .actions { margin-bottom: 1rem; }

/* Админка */
.admin-nav ul { flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.stat { font-size: 1.6rem; font-weight: 700; }
table.compact td, table.compact th { padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.rights select { margin: 0; padding: 0.2rem 0.5rem; width: auto; font-size: 0.85rem; }
.secret { font-family: var(--pico-font-family-monospace); font-size: 1rem; padding: 0.75rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); overflow-wrap: anywhere; user-select: all; }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin-bottom: 1rem; }
.filters label { margin: 0; font-size: 0.8rem; }
.filters input, .filters select { margin: 0; padding: 0.3rem 0.5rem; font-size: 0.85rem; width: auto; }
.filters button { margin: 0; width: auto; padding: 0.35rem 0.8rem; }
.pager { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0; }

@media (max-width: 640px) {
  .files .hide-sm { display: none; }
  .report-bar { flex-wrap: nowrap; }
  .report-bar .crumbs, .report-bar .wide-only, .report-bar .grow { display: none; }
  .report-bar .title { max-width: none; flex: 1; min-width: 0; }
}