.vault-page { display: flex; flex-direction: column; height: 100vh; min-height: 0; }
.vault-head { flex: none; display: flex; align-items: center; gap: var(--s3); min-height: var(--ctl); padding: var(--pad-top) var(--pad) 0; }
.vault-head h1 { flex: 1; min-width: 0; }
.vault-head .actions { display: flex; align-items: center; gap: var(--s2); flex: none; }
.vault-new .ico { width: 18px; height: 18px; }
.vault-chips { flex: none; display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--pad); border-bottom: 1px solid var(--border); min-width: 0; }
.vault-chip { height: 32px; padding: 0 var(--s3); gap: 6px; font-size: .86rem; font-weight: 560; cursor: pointer; }
.vault-chip:hover { color: var(--text); background: var(--surface-3); }
.vault-chip.on:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.vault-chip .count { font-size: .75rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.vault-chip.on .count { color: var(--muted); }
.vault-page > .split { flex: 1 1 0; min-height: 0; height: auto; }
.vault-page .pane-list { padding-top: var(--s3); }
.vault-page .pane-list > .toolbar.sticky { position: sticky; top: calc(var(--s3) * -1); z-index: 5; background: var(--bg); padding: var(--s1) 0 var(--s2); margin-bottom: var(--s2); }


.tiles-page { max-width: 760px; }
.tiles-page > h2, .home-main > h2 { margin: 0 0 var(--s3); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s2); }
.tile { position: relative; display: flex; align-items: flex-start; gap: var(--s3); min-height: 76px; padding: var(--s3); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; min-width: 0; }
.tile:hover, .tile:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.tile-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-3); color: var(--accent); }
.tile-ico .ico { width: 18px; height: 18px; }
.tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 18px; }
.tile-text small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.tile kbd { position: absolute; top: var(--s2); right: var(--s2); }
.tiles-foot { margin: var(--s3) 0 0; }
.tiles-tip { margin: var(--s2) 0 var(--s4); }
.tiles-panel > h3 { margin: 0 0 var(--s3); }
.tiles-panel .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles-modal .modal-body { padding-top: var(--s4); }
.tiles-flash { animation: tiles-flash .5s ease-out; }
@keyframes tiles-flash { 40% { transform: scale(1.015); } }
@media (prefers-reduced-motion: reduce) { .tiles-flash { animation: none; } }


.nav-tools .nav-title { display: block; padding-bottom: var(--s1); }
.nav .nav-plus { opacity: .55; background: none; color: var(--muted); }
.nav-row:hover .nav-plus, .nav-row:focus-within .nav-plus, .nav .nav-plus:focus-visible { background: var(--surface-2); color: var(--text); }


@media (min-width: 761px) and (max-width: 1100px) {
  :root { --sidebar: 60px; --pad: var(--s5); }
  .sidebar { padding: var(--s3) var(--s2); align-items: stretch; }
  .sidebar .brand { padding: var(--s1) 0 var(--s3); justify-content: center; font-size: 0; }
  .nav-search { justify-content: center; padding: 0; }
  .nav-search > span, .nav-search > kbd { display: none; }
  .sidebar .nav a, .sidebar .nav > button { justify-content: center; padding: var(--s1) 0; gap: 0; }
  .sidebar .nav a > span:not(.count):not(.fail-dot), .sidebar .nav > button > span { display: none; }
  .sidebar .nav .count { display: none; }
  .sidebar .nav .count.unread { display: block; position: absolute; top: 1px; right: 1px; min-width: 16px; padding: 0 4px; font-size: .62rem; line-height: 16px; }
  .sidebar .nav-row > a { padding-right: 0; }
  .sidebar .nav .nav-plus { display: none; }
  .sidebar .nav-head { justify-content: center; padding: 0; border-top: 1px solid var(--border); margin-top: var(--s2); padding-top: var(--s1); }
  .sidebar .nav-head .nav-title, .sidebar .nav .nav-toggle { display: none; }
  .sidebar .nav .nav-add { margin-top: 0; }
  .sidebar .nav-empty { display: none; }
  .sidebar .vb-switcher, .sidebar .vault-switcher { display: none; }
  .split { grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (min-width: 761px) and (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split.viewing > .pane-list { display: none; }
  .split:not(.viewing):not(.vault-always) > .pane-view { display: none; }
  .split > .pane-list { border-right: 0; }
  .pane-view .phone-only.back-row { display: inline-flex !important; }
  .vb-split.viewing > .pane-list { display: none; }
}


.item-head h1, .page-head h1 { word-break: normal; overflow-wrap: anywhere; min-width: min(160px, 100%); }
.item-head > .grow { min-width: 160px; flex-basis: 160px; }
.kv .v .txt { min-width: min(120px, 100%); }


@media (max-width: 760px) {
  .vault-page { display: block; height: auto; }
  .vault-page > .split { height: auto; }
  .vault-head { padding: var(--s2) var(--pad) 0; justify-content: flex-end; min-height: 0; }
  .vault-head h1 { display: none; }
  .vault-head:not(:has(.actions > :not(.hide-phone))) { display: none; }
  .vault-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: var(--s2) var(--pad); border-bottom: 0; }
  .vault-chips::-webkit-scrollbar { display: none; }
  .vault-chip { flex: none; height: 34px; }
  .vault-page:has(> .split.viewing) > .vault-head, .vault-page:has(> .split.viewing) > .vault-chips { display: none; }
  .vault-page .pane-list { padding-top: 0; }
  .vault-page .pane-list > .toolbar.sticky { top: calc(54px + env(safe-area-inset-top)); }
  .tiles, .tiles-panel .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { flex-direction: column; gap: var(--s2); min-height: 112px; }
  .tile-text { padding-right: 0; }
  .tiles-modal .modal-body { padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom)); }
}


#toast, #toast.show { pointer-events: none; }
#toast .btn { pointer-events: auto; }
@media (min-width: 761px) {
  #toast { left: calc(var(--sidebar) + var(--s4)); transform: translate(0, 30px); max-width: min(560px, calc(100vw - var(--sidebar) - 32px)); }
  #toast.show { transform: translate(0, 0); }
}
@media (max-width: 760px) {
  #toast { top: calc(60px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -20px); }
}


.set-adv-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4); padding: 0 var(--s4) var(--s4); }
.set-adv-group > h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin: 0 0 var(--s1); }
.set-adv-group .set-adv { padding: 6px var(--s2); }

.send-domains { display: grid; gap: var(--s1); margin-top: var(--s2); }
.send-domain { display: flex; align-items: center; gap: var(--s2); font-size: .88rem; }
.send-row { align-items: flex-start; }

.vb-status { display: grid; gap: 2px; margin: 0 0 var(--s3); }
.vb-status-line { display: flex; align-items: center; gap: var(--s2); min-height: 30px; font-size: .86rem; color: var(--muted); }
.vb-recv-only { margin-left: var(--s1); }
.vb-upgrade { margin: 0 0 var(--s3); }
.vb-upgrade p { margin: 2px 0 var(--s2); }
.vb-upgrade-acts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.vb-up-sec { margin: var(--s3) 0; }
.vb-up-head { display: flex; align-items: center; gap: var(--s2); }
.vb-up-list { margin: var(--s1) 0 0; padding: 0 0 0 26px; max-height: 180px; overflow: auto; font-size: .88rem; color: var(--muted); list-style: none; display: grid; gap: 4px; }
.vb-up-list .input { margin-top: 2px; }
.vb-up-addr { color: var(--text); overflow-wrap: anywhere; }
.vb-up-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); }
.ai-found { margin-bottom: var(--s4); }
.ai-found:empty { display: none; }
.ai-link-note { align-items: center; }
.leak-unwatched { margin-bottom: var(--s3); }