/* Reliquary web — one stylesheet, no external resources. UI.md §2.0.
   Sidebar shell, Dracula-purple accent, light + dark (OS or explicit via the
   theme cookie). No inline styles, no JS required for any core flow. */

:root {
  /* --- dark palette values (always defined; activated below) --- */
  --_d-bg: #1b1d26;
  --_d-sidebar: #16171e;
  --_d-surface: #22242f;
  --_d-surface-2: #2a2d3a;
  --_d-surface-3: #343747;
  --_d-border: #353948;
  --_d-border-strong: #464a5e;
  --_d-text: #f2f2f7;
  --_d-text-muted: #9698b3;
  --_d-text-faint: #6b6d85;
  --_d-accent: #bd93f9;
  --_d-accent-hover: #caa5fb;
  --_d-accent-text: #1a1122;
  --_d-accent-soft: #2c2440;
  --_d-accent-ring: rgba(189, 147, 249, 0.32);
  --_d-ok-bg: #123021; --_d-ok-text: #86e0a3; --_d-ok-border: #245538;
  --_d-danger-bg: #3a1a1a; --_d-danger-text: #ff9d9d; --_d-danger-border: #6e2f2c;
  --_d-warn-bg: #392b14; --_d-warn-text: #f0c98d; --_d-warn-border: #5f4a20;
  --_d-add-bg: #16331f; --_d-del-bg: #3a1a1a;
  --_d-hl: #3a3116;
  --_d-shadow-card: 0 1px 2px rgba(0,0,0,.32), 0 4px 14px rgba(0,0,0,.30);

  /* --- light palette (the default) --- */
  --bg: #faf9fc;
  --sidebar: #f5f3fb;
  --surface: #ffffff;
  --surface-2: #f2eff8;
  --surface-3: #e9e5f3;
  --border: #e5e2ef;
  --border-strong: #d1cce1;
  --text: #1e1b2e;
  --text-muted: #67637a;
  --text-faint: #9a95ad;
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-text: #ffffff;
  --accent-soft: #f2ecfe;
  --accent-ring: rgba(124, 58, 237, 0.22);
  --ok-bg: #e9f6ee; --ok-text: #15803d; --ok-border: #bfe3ca;
  --danger-bg: #fdecec; --danger-text: #b91c1c; --danger-border: #f1c4c1;
  --warn-bg: #fbf3e2; --warn-text: #a16207; --warn-border: #ecd8ad;
  --add-bg: #e7f6ec; --del-bg: #fdecec;
  --hl: #fff6d6;
  --shadow-card: 0 1px 2px rgba(20,18,30,.05), 0 3px 10px rgba(20,18,30,.05);

  /* type */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.9375rem; --fs-lg: 1.0625rem;
  --fs-xl: 1.3125rem; --fs-2xl: 1.625rem; --lh: 1.55;
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;
  --radius-sm: 5px; --radius: 8px; --radius-lg: 12px;
  --sidebar-w: 232px;
  --topbar-h: 3rem;
  --content: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: var(--_d-bg); --sidebar: var(--_d-sidebar); --surface: var(--_d-surface);
    --surface-2: var(--_d-surface-2); --surface-3: var(--_d-surface-3);
    --border: var(--_d-border); --border-strong: var(--_d-border-strong);
    --text: var(--_d-text); --text-muted: var(--_d-text-muted); --text-faint: var(--_d-text-faint);
    --accent: var(--_d-accent); --accent-hover: var(--_d-accent-hover);
    --accent-text: var(--_d-accent-text); --accent-soft: var(--_d-accent-soft);
    --accent-ring: var(--_d-accent-ring);
    --ok-bg: var(--_d-ok-bg); --ok-text: var(--_d-ok-text); --ok-border: var(--_d-ok-border);
    --danger-bg: var(--_d-danger-bg); --danger-text: var(--_d-danger-text); --danger-border: var(--_d-danger-border);
    --warn-bg: var(--_d-warn-bg); --warn-text: var(--_d-warn-text); --warn-border: var(--_d-warn-border);
    --add-bg: var(--_d-add-bg); --del-bg: var(--_d-del-bg); --hl: var(--_d-hl);
    --shadow-card: var(--_d-shadow-card);
  }
}
:root[data-theme="dark"] {
  --bg: var(--_d-bg); --sidebar: var(--_d-sidebar); --surface: var(--_d-surface);
  --surface-2: var(--_d-surface-2); --surface-3: var(--_d-surface-3);
  --border: var(--_d-border); --border-strong: var(--_d-border-strong);
  --text: var(--_d-text); --text-muted: var(--_d-text-muted); --text-faint: var(--_d-text-faint);
  --accent: var(--_d-accent); --accent-hover: var(--_d-accent-hover);
  --accent-text: var(--_d-accent-text); --accent-soft: var(--_d-accent-soft);
  --accent-ring: var(--_d-accent-ring);
  --ok-bg: var(--_d-ok-bg); --ok-text: var(--_d-ok-text); --ok-border: var(--_d-ok-border);
  --danger-bg: var(--_d-danger-bg); --danger-text: var(--_d-danger-text); --danger-border: var(--_d-danger-border);
  --warn-bg: var(--_d-warn-bg); --warn-text: var(--_d-warn-text); --warn-border: var(--_d-warn-border);
  --add-bg: var(--_d-add-bg); --del-bg: var(--_d-del-bg); --hl: var(--_d-hl);
  --shadow-card: var(--_d-shadow-card);
}

/* base ----------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; font-weight: 650; letter-spacing: -0.012em; }
h1 { font-size: var(--fs-xl); margin: 0 0 var(--sp-4); }
h2 { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-3); }
h3 { font-size: var(--fs-md); margin: var(--sp-5) 0 var(--sp-2); }
p { margin: 0 0 var(--sp-3); }
code, pre, .mono, .c-sha, .crumbs, kbd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "calt" 0;
}
code, pre, .mono { font-size: 0.9em; }
pre.code { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); overflow-x: auto; }
.muted { color: var(--text-muted); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
::selection { background: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* thin scrollbars --------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ============ SHELL ============ */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  flex: none;
  width: var(--sidebar-w);
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  z-index: 30;
}
.sidebar-head { padding: 0 var(--sp-4); height: var(--topbar-h); display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; font-size: 1.02rem; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 1.15rem; height: 1.15rem; flex: none; background: var(--accent); -webkit-mask: var(--ico-mark) center/contain no-repeat; mask: var(--ico-mark) center/contain no-repeat; }

.side-nav { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: 1px; }
.side-nav a {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.6rem; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500;
  position: relative;
  transition: background-color .12s ease, color .12s ease;
}
.side-nav a .ico { background: var(--text-faint); }
.side-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.side-nav a:hover .ico { background: var(--text-muted); }
.side-nav a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-nav a[aria-current] .ico { background: var(--accent); }
.side-nav a[aria-current]::before { content: ""; position: absolute; left: calc(-1 * var(--sp-2)); top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.side-sep { height: 1px; background: var(--border); margin: var(--sp-2) 0.6rem; }

.sidebar-foot { flex: none; border-top: 1px solid var(--border); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); }
.theme-toggle { display: flex; gap: 2px; background: var(--surface-2); border-radius: var(--radius); padding: 3px; }
.theme-toggle a { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.3rem; border-radius: var(--radius-sm); }
.theme-toggle a .ico { background: var(--text-faint); }
.theme-toggle a:hover .ico { background: var(--text-muted); }
.theme-toggle a[aria-current] { background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.theme-toggle a[aria-current] .ico { background: var(--accent); }
.dl-btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; }
.dl-btn .ico { background: var(--accent-text); }
.side-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; }
.side-meta a { color: var(--text-muted); }
.side-meta a:hover { color: var(--text); }
.side-logout .linkbtn { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); text-decoration: none; font-size: var(--fs-xs); }
.side-logout .linkbtn .ico { width: 0.9rem; height: 0.9rem; background: var(--text-faint); }
.side-logout .linkbtn:hover { color: var(--danger-text); }
.side-logout .linkbtn:hover .ico { background: var(--danger-text); }
.lang { display: flex; gap: 0.3rem; }
.lang a { padding: 0.15rem 0.45rem; border-radius: var(--radius-sm); color: var(--text-muted); }
.lang a[aria-current] { background: var(--surface-2); color: var(--text); font-weight: 700; }

.main-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-5);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar-title { font-weight: 600; font-size: var(--fs-sm); color: var(--text-muted); letter-spacing: 0.01em; }
.nav-burger { display: none; cursor: pointer; padding: 0.35rem; border-radius: var(--radius-sm); }
.nav-burger .ico { background: var(--text-muted); }
.nav-burger:hover { background: var(--surface-2); }
.nav-scrim { display: none; }

.app-content { flex: 1 1 auto; padding: var(--sp-5) var(--sp-6) var(--sp-7); max-width: var(--content); width: 100%; margin: 0 auto; }
.app-content > .wrap { max-width: none; padding: 0; margin: 0; }
/* Vault is a folder browser (tree + listing, both flex:1), not reading
   content — let it use the full viewport width instead of the ~1120px
   column everything else is centered in. */
.app-content:has(.vault-shell) { max-width: none; }

/* narrow: off-canvas sidebar via the checkbox toggle, no JS */
@media (max-width: 880px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100%;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.35);
  }
  #nav-toggle:checked ~ .shell .sidebar,
  body:has(#nav-toggle:checked) .sidebar { transform: translateX(0); }
  #nav-toggle:checked ~ .nav-scrim,
  body:has(#nav-toggle:checked) .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 25; }
  .nav-burger { display: inline-flex; }
  .app-content { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
}

/* ============ generic UI ============ */
.pad { padding: 0; }
.narrow { max-width: 30rem; margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.row { display: flex; gap: var(--sp-3); align-items: center; }

/* forms */
form.stack, .stack { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.stack label { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; font-weight: 600; font-size: var(--fs-sm); }
.stack label small { font-weight: 400; color: var(--text-muted); }
input[type=text], input[type=password], input[type=email], input[type=search], input:not([type]), select, textarea {
  font: inherit; padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
textarea { font-family: var(--mono); font-size: 0.9em; padding: var(--sp-3); line-height: 1.5; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); width: 100%; padding: var(--sp-3) var(--sp-4); }
legend { padding: 0 0.4rem; font-weight: 600; font-size: var(--fs-sm); }
label.radio { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 400; }
label.radio input { width: auto; }

button, .btn, .btn-primary, .btn-danger {
  font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.44rem 0.9rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}
button:hover, .btn:hover, .btn-primary:hover, .btn-danger:hover { text-decoration: none; }
button:hover, .btn:hover { background: var(--surface-2); border-color: var(--text-faint); }
button:active, .btn:active, .btn-primary:active, .btn-danger:active { transform: translateY(0.5px); }
.btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { background: var(--surface); color: var(--danger-text); border-color: var(--danger-border); }
.btn-danger:hover { background: var(--danger-bg); }
button:disabled, .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.linkbtn { background: none; border: none; padding: 0; color: var(--text); text-decoration: underline; font-weight: inherit; cursor: pointer; }
.linkbtn:hover { background: none; }
.linkbtn.danger { color: var(--danger-text); }
.inline-fields { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.inline-fields input { max-width: 12rem; }
.autosave-status { font-size: var(--fs-sm); }

/* Version title/description: a <textarea> instead of a single-line <input>
   so long text wraps and stays fully readable instead of scrolling
   sideways inside a fixed-width box — at any viewport width, not just
   wide ones. data-autosize (static/app.js) grows it to fit its content;
   the plain `resize: vertical` below is the zero-JS fallback (drag for
   more room instead of it growing on its own). */
.version-meta-form { align-items: flex-start; }
.version-meta-field {
  flex: 1 1 12rem; min-width: 8rem; max-width: 28rem;
  font: inherit; padding: 0.35rem 0.5rem; line-height: 1.35;
  resize: vertical; overflow-wrap: anywhere; white-space: pre-wrap;
}
.editor-area { width: 100%; min-height: 60vh; font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; resize: vertical; white-space: pre; }
form.inline { display: inline; }

/* banners + flash */
.banner, .flash { border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius); padding: 0.6rem 0.85rem; margin-bottom: var(--sp-4); width: 100%; font-size: var(--fs-sm); }
.banner-ok, .flash-ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.banner-danger, .flash-danger { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
.banner-warn, .flash-warn { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }

/* "удалить версию" — a mandatory two-step confirm (no accidental single
   click can delete a version): the <details> reveals this banner with the
   version's own data, and only the button inside it actually posts. */
.version-delete { display: inline-block; }
.version-delete > summary { list-style: none; }
.version-delete > summary::-webkit-details-marker { display: none; }
.version-delete-confirm { max-width: 24rem; margin: 0.4rem 0 0; }
.version-delete-confirm p:last-of-type { margin-bottom: 0.5rem; }

/* tables / lists */
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.list thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; border-bottom-color: var(--border-strong); }
table.list tbody tr { transition: background-color .1s ease; }
table.list tbody tr:hover { background: var(--surface-2); }
table.list td:first-child, table.list th:first-child { padding-left: 0.25rem; }

/* table.rows (any base table style — .list or vault's .tree) — the whole
   row is a link (a.rowlink in the first cell stretches over the tr). No JS:
   works with keyboard focus and middle-click. */
table.rows tbody tr { position: relative; }
table.rows tbody tr:hover { cursor: pointer; }
table.rows a.rowlink::after { content: ""; position: absolute; inset: 0; }
table.rows a.rowlink:focus-visible { outline: none; }
table.rows a.rowlink:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
/* keep real controls in later cells (incl. a row's own "..." menu trigger)
   clickable above the overlay — the menu's own popup panel is already
   z-index:30, well above this. */
table.rows tbody td a:not(.rowlink),
table.rows tbody td button,
table.rows tbody td summary { position: relative; z-index: 1; }

.badge { display: inline-block; font-size: var(--fs-xs); font-weight: 500; line-height: 1.5; padding: 0.05rem 0.5rem; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-muted); background: var(--surface-2); vertical-align: 0.05em; }
.badge-public { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.badge-private { background: var(--surface-2); color: var(--text-muted); }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.page-head h1 { margin: 0; }
.empty { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--text-muted); background: var(--surface); }
.empty p { margin: 0.25rem 0; }
.err-code { font-size: 3.5rem; font-weight: 700; margin: 0; color: var(--accent); opacity: 0.55; letter-spacing: -0.03em; }
.pager { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-5); font-size: var(--fs-sm); }
.pager a { padding: 0.35rem 0.7rem; border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); }
.pager a:hover { background: var(--surface-2); text-decoration: none; }
.downloads { list-style: none; padding: 0; }
.downloads li { padding: 0.35rem 0; }

/* repo subheader + browse */
.repobar {
  position: sticky; top: var(--topbar-h); z-index: 15;
  border-bottom: 1px solid var(--border); background: var(--bg);
  margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-6)) var(--sp-5);
  padding: 0 var(--sp-6);
}
.repobar-row { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; padding: 0.65rem 0 0; }
.repobar-row > strong { font-weight: 650; letter-spacing: -0.01em; }
.repotabs { display: flex; gap: 0.1rem; margin-left: auto; align-self: flex-end; flex-wrap: wrap; }
.repotabs a { padding: 0.5rem 0.7rem; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: var(--fs-sm); transition: color .12s ease, border-color .12s ease; }
.repotabs a:hover { color: var(--text); text-decoration: none; }
.repotabs a[aria-current] { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.clonebox { padding: 0.35rem 0 0.55rem; }
.clonebox summary { cursor: pointer; color: var(--text-muted); font-size: var(--fs-sm); width: max-content; }
.clonebox summary:hover { color: var(--text); }
.clonebox[open] summary { margin-bottom: var(--sp-2); }
.clonebox p { margin: 0 0 var(--sp-2); }
.cloneurl-input { max-width: 34rem; font-family: var(--mono); font-size: 0.85em; }

@media (max-width: 880px) {
  .repobar { margin-left: calc(-1 * var(--sp-4)); margin-right: calc(-1 * var(--sp-4)); padding: 0 var(--sp-4); }
}

.wide { width: 100%; overflow-x: auto; }
table.tree { width: 100%; border-collapse: collapse; }
table.tree td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
table.tree tr:hover td { background: var(--surface-2); }
table.tree tr:last-child td { border-bottom: none; }
.crumbs { font-size: var(--fs-sm); margin: var(--sp-4) 0; color: var(--text-muted); }
.crumbs a { color: var(--accent); }

.browse-head { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center; margin-bottom: var(--sp-4); }
.refselect { display: flex; align-items: flex-end; gap: 0.4rem; }
.refselect label { font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.refselect select { width: auto; min-width: 12rem; }

/* icons: mask + a color */
.ico { display: inline-block; width: 1rem; height: 1rem; flex: none; vertical-align: -0.16rem; background: var(--text-muted); }
.ico-repo { -webkit-mask: var(--ico-repo) center/contain no-repeat; mask: var(--ico-repo) center/contain no-repeat; }
.ico-plus { -webkit-mask: var(--ico-plus) center/contain no-repeat; mask: var(--ico-plus) center/contain no-repeat; }
.ico-shield { -webkit-mask: var(--ico-shield) center/contain no-repeat; mask: var(--ico-shield) center/contain no-repeat; }
.ico-user { -webkit-mask: var(--ico-user) center/contain no-repeat; mask: var(--ico-user) center/contain no-repeat; }
.ico-key { -webkit-mask: var(--ico-key) center/contain no-repeat; mask: var(--ico-key) center/contain no-repeat; }
.ico-sun { -webkit-mask: var(--ico-sun) center/contain no-repeat; mask: var(--ico-sun) center/contain no-repeat; }
.ico-moon { -webkit-mask: var(--ico-moon) center/contain no-repeat; mask: var(--ico-moon) center/contain no-repeat; }
.ico-auto { -webkit-mask: var(--ico-auto) center/contain no-repeat; mask: var(--ico-auto) center/contain no-repeat; }
.ico-logout { -webkit-mask: var(--ico-logout) center/contain no-repeat; mask: var(--ico-logout) center/contain no-repeat; }
.ico-menu { -webkit-mask: var(--ico-menu) center/contain no-repeat; mask: var(--ico-menu) center/contain no-repeat; }
.ico-dir { background: var(--accent); -webkit-mask: var(--ico-dir) center/contain no-repeat; mask: var(--ico-dir) center/contain no-repeat; margin-right: 0.4rem; }
.ico-file { -webkit-mask: var(--ico-file) center/contain no-repeat; mask: var(--ico-file) center/contain no-repeat; margin-right: 0.4rem; }
.ico-mod { -webkit-mask: var(--ico-file) center/contain no-repeat; mask: var(--ico-file) center/contain no-repeat; margin-right: 0.4rem; }
.ico-win { -webkit-mask: var(--ico-win) center/contain no-repeat; mask: var(--ico-win) center/contain no-repeat; }
.ico-apple { -webkit-mask: var(--ico-apple) center/contain no-repeat; mask: var(--ico-apple) center/contain no-repeat; }
.ico-linux { -webkit-mask: var(--ico-linux) center/contain no-repeat; mask: var(--ico-linux) center/contain no-repeat; }
.ico-download { -webkit-mask: var(--ico-download) center/contain no-repeat; mask: var(--ico-download) center/contain no-repeat; }
.ico-vault { -webkit-mask: var(--ico-vault) center/contain no-repeat; mask: var(--ico-vault) center/contain no-repeat; }

/* download: one big installer card per OS */
.dlgrid { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: var(--sp-4) 0 var(--sp-3); }
.dlcard {
  flex: 1 1 170px; min-width: 150px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
  padding: 0.95rem 1rem; border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--surface); color: var(--text); text-decoration: none;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.dlcard:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.13); }
.dlcard-you { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.dlcard-ico { width: 26px; height: 26px; background: var(--accent); vertical-align: 0; }
.dlcard-title { font-weight: 600; font-size: 0.95rem; }
.dlcard-sub { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.dlcard-sub strong { color: var(--accent); }
:root {
  --ico-mark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 6.4 25.8 13.5 22.1 25 9.9 25 6.2 13.5Z"/></svg>');
  --ico-repo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 1.5h8.5a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4A1.5 1.5 0 0 1 2.5 13V3.5A2 2 0 0 1 4.5 1.5Zm-.5 11a.5.5 0 0 0 .5.5h8v-2H4a.5.5 0 0 0-.5.5Z"/></svg>');
  --ico-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 3v10M3 8h10" stroke="black" stroke-width="1.8" stroke-linecap="round"/></svg>');
  --ico-shield: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 1 2.5 3.2V8c0 3.4 2.3 5.7 5.5 7 3.2-1.3 5.5-3.6 5.5-7V3.2L8 1Z"/></svg>');
  --ico-user: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="5" r="3"/><path d="M2.5 14c0-3 2.5-4.5 5.5-4.5s5.5 1.5 5.5 4.5Z"/></svg>');
  --ico-key: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="5" cy="6" r="3.2"/><path d="M7.3 8.2 13 14M11 12l1.5-1.5M12.5 13.5 14 12" stroke="black" stroke-width="1.6" stroke-linecap="round" fill="none"/></svg>');
  --ico-sun: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3 3l1.4 1.4M11.6 11.6 13 13M13 3l-1.4 1.4M4.4 11.6 3 13" stroke="black" stroke-width="1.4" stroke-linecap="round"/></svg>');
  --ico-moon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13 9.5A5.5 5.5 0 0 1 6.5 3c0-.6.1-1.2.3-1.7A5.8 5.8 0 1 0 14.7 9.2c-.5.2-1.1.3-1.7.3Z"/></svg>');
  --ico-auto: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="1.5" y="2.5" width="13" height="9" rx="1"/><path d="M6 14h4M8 11.5V14" stroke="black" stroke-width="1.3" stroke-linecap="round"/></svg>');
  --ico-logout: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 2.5H3.5A1.5 1.5 0 0 0 2 4v8a1.5 1.5 0 0 0 1.5 1.5H6M10 4.5 13.5 8 10 11.5M6.5 8h7" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>');
  --ico-download: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 1.5v8M4.5 6.5 8 10l3.5-3.5M2.5 12.5h11v2h-11z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>');
  --ico-vault: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 2.5h12v11H2z M8 6a2 2 0 1 0 0.01 0Z"/></svg>');
  --ico-menu: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.5 4h11M2.5 8h11M2.5 12h11" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>');
  --ico-dir: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M1.5 3h4l1.5 2h6.5a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-12a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/></svg>');
  --ico-file: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 1.5h6l4 4V14a.5.5 0 0 1-.5.5h-9A.5.5 0 0 1 3 14V1.5zM9 1.5V5h4"/></svg>');
  --ico-win: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M0 2.4 7 1.4v6.1H0zM0 8.5h7v6.1L0 13.6zM7.9 1.3 16 .1v7.4H7.9zM16 8.5V16l-8.1-1.2V8.5z"/></svg>');
  --ico-apple: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11 8.4c0-1.8 1.5-2.7 1.5-2.7-.8-1.2-2.1-1.3-2.5-1.4-1-.1-2 .6-2.6.6-.5 0-1.4-.6-2.3-.6C3.4 4.4 2 5.9 2 8.7c0 1.5.5 3.1 1.2 4.1.6.9 1.3 1.9 2.2 1.9.8 0 1.2-.5 2.2-.5s1.3.5 2.2.5c.9 0 1.5-.9 2.1-1.8.4-.6.6-1.2.8-1.9 0 0-1.7-.7-1.7-2.6zM9.5 3.4c.5-.6.8-1.4.7-2.3-.7 0-1.6.5-2.1 1.1-.5.5-.8 1.4-.7 2.2.8.1 1.6-.4 2.1-1z"/></svg>');
  --ico-linux: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 1C6.3 1 5.3 2.4 5.3 4.2c0 .6.1 1.1.1 1.5-.6.7-1.7 2-2.3 3.5-.3.7 0 1.2.5 1.4-.1.3-.2.7-.2 1 0 1.1 1.1 1.7 2.3 2 .6.6 1.4.9 2.3.9s1.7-.3 2.3-.9c1.2-.3 2.3-.9 2.3-2 0-.3-.1-.7-.2-1 .5-.2.8-.7.5-1.4-.6-1.5-1.7-2.8-2.3-3.5 0-.4.1-.9.1-1.5C10.7 2.4 9.7 1 8 1Zm-1.2 2.6c.5 0 .8.5.8 1.1s-.4 1.1-.8 1.1-.8-.5-.8-1.1.4-1.1.8-1.1Zm2.4 0c.5 0 .8.5.8 1.1s-.4 1.1-.8 1.1-.8-.5-.8-1.1.4-1.1.8-1.1ZM8 7.1c1.2 0 2.2 1.6 2.2 3.6S9.2 14 8 14s-2.2-1.3-2.2-3.3S6.8 7.1 8 7.1Z"/></svg>');
}

/* blob (plain) */
.blob { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; background: var(--surface); }
.blob pre { margin: 0; padding: var(--sp-3); }
table.codetable { border-collapse: collapse; width: 100%; }
table.codetable td { padding: 0; vertical-align: top; }
table.codetable .ln { text-align: right; padding: 0 0.7rem; color: var(--text-faint); user-select: none; width: 1%; white-space: nowrap; border-right: 1px solid var(--border); }
table.codetable .ln a { color: inherit; }
table.codetable .lc pre { margin: 0; padding: 0 0.9rem; white-space: pre; }
table.codetable tr:hover .lc { background: var(--surface-2); }
table.codetable tr:target .lc, table.codetable tr:target .ln { background: var(--hl); }

/* blob (chroma highlighted) */
.blob.highlight { padding: 0; }
.blob .chroma { font-family: var(--mono); font-size: 0.85rem; }
.blob .chroma pre { padding: var(--sp-3) 0; margin: 0; background: none; }
.blob .chroma .lntable { width: 100%; }
.blob .chroma .lntd { padding: 0; }
.blob .chroma .lntd:first-child { width: 1%; border-right: 1px solid var(--border); }
.blob .chroma .lnt, .blob .chroma .ln { padding: 0 0.75rem; color: var(--text-faint); }
.blob .chroma .lntd:last-child pre { padding-left: 0.9rem; }
.blob .chroma .lnt:target, .blob .chroma .ln:target { background: var(--hl); }

/* blame */
table.blametable .bl-commit { padding: 0 0.6rem; white-space: nowrap; width: 1%; border-right: 1px solid var(--border); }
table.blametable .bl-meta { padding: 0 0.6rem; white-space: nowrap; width: 1%; font-size: var(--fs-xs); color: var(--text-muted); border-right: 1px solid var(--border); }
table.blametable tr.hunk-start td { border-top: 1px solid var(--border); }
table.blametable tr:first-child td { border-top: none; }
table.blametable tr:hover .lc { background: var(--surface-2); }

/* code search */
.searchform { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end; margin: var(--sp-4) 0 0.4rem; }
.searchform input[type=search] { flex: 1 1 20rem; }
.searchform label { display: flex; flex-direction: column; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--text-muted); gap: 0.25rem; }
.ref-input { width: 12rem; font-weight: 400; }
.searchfile { border: 1px solid var(--border); border-radius: var(--radius); margin: var(--sp-4) 0; overflow-x: auto; }
.searchfile-head { padding: 0.45rem 0.75rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }

/* diff */
.diff { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; margin: var(--sp-4) 0; }
.diff pre { margin: 0; padding: 0.6rem 0.85rem; }
.diff .dl { display: block; white-space: pre; }
.diff .l-add { background: var(--add-bg); }
.diff .l-del { background: var(--del-bg); }
.diff .l-meta { color: var(--text-muted); }

/* README / markdown */
.readme { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-6); margin-top: var(--sp-4); background: var(--surface); }
.readme > :first-child { margin-top: 0; }
.readme h1, .readme h2 { border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
.readme pre { background: var(--surface-2); padding: var(--sp-3); border-radius: var(--radius); overflow-x: auto; }
.readme code { background: var(--surface-2); padding: 0.1rem 0.35rem; border-radius: var(--radius-sm); }
.readme pre code { background: none; padding: 0; }
.readme table { border-collapse: collapse; }
.readme th, .readme td { border: 1px solid var(--border); padding: 0.35rem 0.6rem; }
.readme blockquote { margin: 0 0 var(--sp-3); padding-left: var(--sp-3); border-left: 3px solid var(--border-strong); color: var(--text-muted); }

/* commit graph + history */
.graph, .graph-wrap { width: 100%; overflow-x: auto; }
.commit-graph { display: block; margin-bottom: var(--sp-4); max-width: 100%; }
#graph.has-svg { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem; overflow-x: auto; background: var(--surface); }
ol.commits { list-style: none; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.commit-row { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; transition: background-color .1s ease; }
.commit-row:last-child { border-bottom: none; }
.commit-row:hover { background: var(--surface-2); }
.c-sha { flex: 0 0 auto; color: var(--accent); font-size: 0.85em; }
.c-subject { flex: 1 1 20rem; }
.c-meta { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--text-muted); }

/* commit card */
.commit-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); background: var(--surface); box-shadow: var(--shadow-card); }
.commit-card h1 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
.c-body { background: var(--surface-2); padding: var(--sp-3); border-radius: var(--radius); white-space: pre-wrap; font-family: var(--mono); font-size: 0.85em; }
ul.filelist { list-style: none; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
ul.filelist li { padding: 0.35rem 0.65rem; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: var(--fs-sm); }
ul.filelist li:last-child { border-bottom: none; }
.st { display: inline-block; width: 1.3em; text-align: center; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.85em; }
.st-A { background: var(--add-bg); color: var(--ok-text); }
.st-D { background: var(--del-bg); color: var(--danger-text); }
.st-M { background: var(--warn-bg); color: var(--warn-text); }
.st-R, .st-C { background: var(--surface-3); color: var(--text-muted); }
.filediff { margin-top: var(--sp-4); }
.filediff-head { background: var(--surface-2); border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; padding: 0.45rem 0.65rem; font-family: var(--mono); font-size: var(--fs-sm); }
.filediff .diff { margin: 0; border-radius: 0 0 var(--radius) var(--radius); }

/* dashboard cards */
.cards { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-4) 0; }
.card { display: flex; flex-direction: column; gap: 0.15rem; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); min-width: 8rem; box-shadow: var(--shadow-card); transition: border-color .12s ease, transform .1s ease; }
a.card:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); }
.card-n { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--accent); }

/* filters, issues, PRs */
.filterbar { display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.filterbar label { display: flex; flex-direction: column; gap: 0.2rem; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--text-muted); }
.filterbar input, .filterbar select { width: auto; min-width: 10rem; }
.tabcount { display: inline-block; min-width: 1.3em; text-align: center; font-size: var(--fs-xs); background: var(--surface-3); color: var(--text-muted); border-radius: 999px; padding: 0 0.35em; font-variant-numeric: tabular-nums; }
.statefilter { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.statefilter a { color: var(--text-muted); }
.statefilter a[aria-current] { font-weight: 700; color: var(--text); }
ul.issuelist { list-style: none; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
ul.issuelist li { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--border); transition: background-color .1s ease; }
ul.issuelist li:last-child { border-bottom: none; }
ul.issuelist li:hover { background: var(--surface-2); }
.il-title { flex: 1 1 20rem; font-weight: 600; }
.issue-head { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.issue-head h1 { margin: 0; }
.comment { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--sp-4); overflow: hidden; }
.comment-head { padding: 0.45rem 0.85rem; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-sm); color: var(--text-muted); }
.comment .readme { border: none; padding: var(--sp-3) var(--sp-4); margin: 0; border-radius: 0; }
.comment-form { margin-top: var(--sp-5); }

.pad-sm { padding: var(--sp-3); }
.danger-h { color: var(--danger-text); }

/* Vault: Explorer-style sidebar tree (C26, LOGIC.md §3.20) */
.vault-shell { display: flex; align-items: flex-start; gap: var(--sp-5); }
.vault-main { flex: 1 1 auto; min-width: 0; }
.vault-actions { margin-bottom: var(--sp-4); }
.vault-main.drop-active { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: var(--radius-lg); }

/* Drag-to-move a row onto a folder (another row, sidebar tree, breadcrumb,
   or "Хранилище" root) — see static/app.js vaultDragMove. Zero-JS fallback
   stays the row menu's plain-text folder-ID field. */
tr[data-node-id] { cursor: grab; }
tr[data-node-id].dragging { opacity: 0.5; }
[data-drop-folder-id].drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); border-radius: var(--radius); }

.vault-tree { flex: none; width: 15rem; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); font-size: var(--fs-sm); }
.vtree-root { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.4rem; border-radius: var(--radius); font-weight: 600; color: var(--text); }
.vtree-root:hover { background: var(--surface-2); text-decoration: none; }
.vtree-root.current, .vtree-link.current { background: var(--accent-soft); color: var(--accent); }
.vtree-root .ico { background: var(--accent); }

.vtree-children { list-style: none; margin: 0; padding: 0; }
.vtree-children .vtree-children { padding-left: 1.1rem; }
.vtree-top { margin-top: 0.3rem; }
.vtree-link { display: flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.4rem; border-radius: var(--radius); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtree-link:hover { background: var(--surface-2); text-decoration: none; }
.vtree-link .ico { flex: none; }
.vtree-owner { margin-left: auto; padding-left: 0.5rem; font-size: var(--fs-xs); color: var(--text-faint); }

.vault-tree details > summary { cursor: pointer; list-style: none; }
.vault-tree details > summary::-webkit-details-marker { display: none; }
.vault-tree details > summary::before { content: "▸"; display: inline-block; width: 0.9rem; color: var(--text-faint); font-size: 0.7rem; }
.vault-tree details[open] > summary::before { content: "▾"; }
.vault-tree details > summary { display: flex; align-items: center; }
.vault-tree details > summary .vtree-link { flex: 1 1 auto; }

.vtree-heading { margin: var(--sp-4) 0 0.3rem; padding-top: var(--sp-3); border-top: 1px solid var(--border); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

@media (max-width: 860px) {
  .vault-shell { flex-direction: column; }
  .vault-tree { width: 100%; }
}
.stack + h2 { margin-top: var(--sp-6); }

/* Vault: Explorer-style per-row "⋮" menu + "+ Добавить" (right-click /
   context-menu redesign, LOGIC.md §3.20). Both are plain <details>/<summary>
   — fully usable with zero JS; static/app.js only adds a right-click
   shortcut that opens the very same element, never a replacement path. */
.vault-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.vault-toolbar .crumbs { margin: 0; }
.vault-toolbar h1 { margin: 0; }
.vault-file-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.dropdown { position: relative; }
.dropdown > summary { cursor: pointer; list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-panel {
  position: absolute; z-index: 30; top: calc(100% + 4px); right: 0;
  min-width: 15rem; max-width: 20rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 0.5rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.dropdown-panel a, .dropdown-panel button { font-size: var(--fs-sm); }
.dropdown-panel hr { border: none; border-top: 1px solid var(--border); margin: 0.15rem 0; }
.dropdown-form { display: flex; gap: 0.3rem; align-items: center; }
.dropdown-form input { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); padding: 0.25rem 0.4rem; }
.dropdown-form button { flex: none; font-size: var(--fs-xs); padding: 0.25rem 0.5rem; }
.dropdown-form-stack { display: flex; flex-direction: column; gap: 0.3rem; min-width: 14rem; }
.dropdown-form-stack label { display: flex; flex-direction: column; gap: 0.15rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }

.vault-create-menu > summary { display: inline-flex; }

table.vault-listing .row-name { width: 45%; }
table.vault-listing .row-actions { width: 2.4rem; text-align: right; }
table.vault-listing tr:hover .row-actions .dropdown > summary { opacity: 1; }
table.vault-listing .row-actions .dropdown > summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.8rem; height: 1.8rem; border-radius: var(--radius); color: var(--text-muted);
  font-size: 1.1rem; line-height: 1;
}
table.vault-listing .row-actions .dropdown > summary:hover,
table.vault-listing .row-actions .dropdown[open] > summary { background: var(--surface-2); color: var(--text); }