/* Neu angelegter Eintrag — kurzes Highlight nach Redirect */
.item-row.item-new-highlight {
  animation: item-new-pulse 2.2s ease-out;
}
@keyframes item-new-pulse {
  0%, 100% {
    box-shadow: none;
    background: transparent;
  }
  12%, 28% {
    box-shadow: inset -4px 0 0 var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
  }
}

:root {
  --font: "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --radius: 12px;
  --radius-sm: 10px;
  --radius-btn: 4px;
  --radius-pill: 999px;
  --pad: 1.1rem;
  --panel-w: min(28rem, 100%);
  --stack-gap: .95rem;
  --section-gap: .85rem;
  --nav-link-pad: .85rem .55rem;
  --chip-gap: .5rem;
  --content-pad-bottom: calc(var(--bottom-nav-h) + .65rem);
  --line-height: 1.35;
  --nav-w: min(20rem, 92vw);
  --ease: cubic-bezier(.22,1,.36,1);
  --hair: 1px;
  --line-strong: 2px;
  --icon: 1.35rem;
  --fab-size: 3.4rem;
  /* bottom-nav tokens */
  --bnav-icon: 1.68rem;
  --bnav-label: .7rem;
  --bnav-weight: 600;
  --bnav-gap: .2rem;
  --bnav-pad-y: .32rem;
  --bnav-pad-x: .38rem;
  --bnav-link-pad-y: .28rem;
  --bnav-label-lh: 1.15;
  --bottom-nav-h: calc(var(--bnav-pad-y) + var(--bnav-link-pad-y) + var(--bnav-icon) + var(--bnav-gap) + calc(var(--bnav-label) * var(--bnav-label-lh)) + var(--bnav-link-pad-y) + var(--bnav-pad-y) + env(safe-area-inset-bottom, 0px));
  --fab-gap: .75rem;
  --fab-bottom: calc(var(--bottom-nav-h) + var(--fab-gap));

  --bg: #ffffff;
  --bg-elev: #f2f2f2;
  --ink: #0a0a0a;
  --muted: #6e6e6e;
  --line: rgba(0,0,0,.1);
  --accent: #171717;
  --accent-ink: #ffffff;
  --danger: #e11d48;
  --logout: #9b111e;
  --warn: #ef4444;
  --chip: #e8e8e8;
  --input: #efefef;
  --shadow: 0 8px 28px rgba(0,0,0,.18);

  --row-pad: 1rem;
  --field-pad: 1rem;
  --topbar-pad-y: .85rem;
  --fs-body: 1rem;
  --fs-title: 1.05rem;
  --fs-hero: 1.85rem;
  --fs-meta: .86rem;
  --fs-ui: .78rem;
  --fs-btn: 1.02rem;
  --fs-topbar: 1.44rem;
  --control-pad-y: .45rem;
  --control-pad-x: .7rem;
  --control-min-h: 2.35rem;
  --badge-min-h: 1.7rem;
  --pref-btn-min-h: 2.2rem;
  --switch-w: 3.1rem;
  --switch-h: 1.85rem;
  --swatch-size: 2.35rem;
  --item-title: color-mix(in srgb, var(--ink) 68%, var(--muted));
  --label-fs: var(--fs-meta);
  --label-color: color-mix(in srgb, var(--ink) 45%, var(--muted));
  --label-color-strong: color-mix(in srgb, var(--ink) 52%, var(--muted));
  --label-weight: 650;
  --label-weight-strong: 750;
  --label-spacing: .04em;
  --label-mt: 0.2cm;
}

html[data-theme="dark"] {
  --bg: #000000;
  --bg-elev: #141414;
  --ink: #ffffff;
  --muted: #9a9a9a;
  --line: rgba(255,255,255,.1);
  --accent: #171717;
  --accent-ink: #ffffff;
  --danger: #fb7185;
  --logout: #9b111e;
  --warn: #f87171;
  --chip: #1c1c1c;
  --input: #1a1a1a;
  --shadow: 0 10px 32px rgba(0,0,0,.55);
  --item-title: color-mix(in srgb, var(--ink) 82%, var(--muted));
}

/* Dichte = Abstände zwischen Elementen, NICHT Panel-Breite */
html[data-density="compact"] {
  --swatch-size: 1.85rem;
  --pad: .7rem;
  --row-pad: .35rem;
  --field-pad: .4rem;
  --topbar-pad-y: .4rem;
  --stack-gap: .45rem;
  --section-gap: .4rem;
  --nav-link-pad: .45rem .4rem;
  --chip-gap: .25rem;
  --content-pad-bottom: calc(var(--bottom-nav-h) + .45rem);
  --fab-gap: .65rem;
  --line-height: 1.2;
  --control-pad-y: .28rem;
  --control-pad-x: .45rem;
  --control-min-h: 1.85rem;
  --badge-min-h: 1.4rem;
  --pref-btn-min-h: 1.85rem;
  --switch-w: 2.6rem;
  --switch-h: 1.55rem;
}
html[data-density="normal"] {
  --swatch-size: 2.35rem;
  --pad: 1.1rem;
  --row-pad: 1rem;
  --field-pad: 1rem;
  --topbar-pad-y: .85rem;
  --stack-gap: .95rem;
  --section-gap: .85rem;
  --nav-link-pad: .85rem .55rem;
  --chip-gap: .5rem;
  --content-pad-bottom: calc(var(--bottom-nav-h) + .65rem);
  --fab-gap: .75rem;
  --line-height: 1.35;
  --control-pad-y: .45rem;
  --control-pad-x: .7rem;
  --control-min-h: 2.35rem;
  --badge-min-h: 1.7rem;
  --pref-btn-min-h: 2.2rem;
  --switch-w: 3.1rem;
  --switch-h: 1.85rem;
}
html[data-density="wide"] {
  --swatch-size: 2.75rem;
  --pad: 1.55rem;
  --row-pad: 1.55rem;
  --field-pad: 1.45rem;
  --topbar-pad-y: 1.1rem;
  --stack-gap: 1.45rem;
  --section-gap: 1.35rem;
  --nav-link-pad: 1.1rem .7rem;
  --chip-gap: .85rem;
  --content-pad-bottom: calc(var(--bottom-nav-h) + .75rem);
  --fab-gap: .85rem;
  --line-height: 1.5;
  --control-pad-y: .65rem;
  --control-pad-x: .9rem;
  --control-min-h: 2.75rem;
  --badge-min-h: 2rem;
  --pref-btn-min-h: 2.55rem;
  --switch-w: 3.4rem;
  --switch-h: 2rem;
}

html[data-type="sm"] {
  --fs-body: .88rem;
  --fs-title: .95rem;
  --fs-hero: 1.35rem;
  --fs-meta: .72rem;
  --fs-ui: .68rem;
  --fs-btn: .9rem;
  --fs-topbar: 1.26rem;
}
html[data-type="md"] {
  --fs-body: 1rem;
  --fs-title: 1.08rem;
  --fs-hero: 1.7rem;
  --fs-meta: .86rem;
  --fs-ui: .78rem;
  --fs-btn: 1.02rem;
  --fs-topbar: 1.44rem;
}
html[data-type="lg"] {
  --fs-body: 1.28rem;
  --fs-title: 1.42rem;
  --fs-hero: 2.35rem;
  --fs-meta: 1.05rem;
  --fs-ui: .95rem;
  --fs-btn: 1.22rem;
  --fs-topbar: 1.86rem;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  overflow: hidden;
}
html {
  background: var(--bg);
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

/* Shell: nur .content scrollt, Visual/Header/Footer stehen */
.shell {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr var(--panel-w);
  background: var(--bg);
}
.visual {
  position: relative;
  z-index: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-elev);
}
.visual-placeholder, .visual-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.visual-img {
  object-fit: cover;
  object-position: left center;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg-elev);
}
.visual-img[hidden] { display: none !important; }
.visual-placeholder {
  container-type: size;
}
.visual-attribution {
  position: absolute;
  left: max(1.5625cqw, 2.3460410557cqh);
  bottom: max(1.5625cqw, 2.3460410557cqh);
  z-index: 2;
  display: none;
  width: 15.81em;
  min-height: 3.05em;
  padding: .38em .43em;
  border-radius: .55em;
  background: rgba(3, 7, 14, .58);
  color: rgba(255, 255, 255, .96);
  font-family: "DejaVu Sans", Arial, sans-serif;
  font-size: max(.5126953125cqw, .7697947214cqh);
  font-weight: 500;
  line-height: 1.05;
  text-shadow: 0 .12em .24em rgba(0, 0, 0, .9);
  pointer-events: none;
  user-select: none;
  flex-direction: column;
  justify-content: center;
  gap: .1em;
  overflow: hidden;
}
.visual-placeholder:has(.visual-img:not([hidden]):is([src$="/bg-dark-city.jpg"], [src$="/bg-dark-haus.jpg"], [src$="/bg-dark-turm.jpg"], [src$="/bg-light-city.jpg"], [src$="/bg-light-haus.jpg"], [src$="/bg-light-turm.jpg"])) .visual-attribution {
  display: flex;
}
.visual-attribution-brand,
.visual-attribution-ai {
  display: flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}
.visual-attribution-brand {
  font-weight: 700;
}
.visual-attribution-ai {
  gap: .24em;
}
.visual-attribution-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
}
.visual-attribution-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.visual-ph {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: .35rem;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--bg-elev);
}
.visual-ph-label, .visual-ph-sub {
  text-align: center; text-transform: uppercase; letter-spacing: .2em;
  color: var(--muted); font-size: .72rem;
}
.panel {
  position: relative;
  z-index: 2;
  isolation: isolate;
  height: 100%;
  min-height: 0;
  border-left: var(--hair) solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel > .app > .content,
.panel > .app > .topbar,
.panel > .app > .bottom-nav,
.panel > .app > .fab,
.panel > .app > .fab-dial {
  transition: none !important;
  animation: none !important;
}

h1,h2,h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; color: var(--muted); }
.muted { color: var(--muted); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icon { width: var(--icon); height: var(--icon); display: inline-grid; place-items: center; flex: 0 0 auto; }
.icon svg { width: 100%; height: 100%; display: block; }

.btn, .icon-btn {
  font: inherit; cursor: pointer; border: 0; border-radius: var(--radius-btn);
  background: none; color: inherit; text-decoration: none;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: calc(var(--control-min-h) + .35rem);
  padding: calc(var(--control-pad-y) + .15rem) calc(var(--control-pad-x) + .35rem);
  font-weight: 700;
  font-size: var(--fs-btn);
  letter-spacing: .01em;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-btn); }
.btn.outline {
  background: transparent !important;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent) !important;
}
.btn.accent-outline {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  color: var(--ink);
  border: var(--hair) solid var(--accent) !important;
  border-radius: var(--radius-btn);
}
.btn.accent-outline:hover,
.btn.accent-outline:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  border-color: var(--accent) !important;
}

.btn.ghost { background: var(--bg-elev); color: var(--ink); }
.btn.danger { background: color-mix(in srgb, var(--danger) 18%, var(--bg)); color: var(--danger); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn {
  width: var(--control-min-h); height: var(--control-min-h); display: grid; place-items: center;
  color: var(--ink); border-radius: var(--radius-sm);
}
.icon-btn:active { opacity: .6; }

.stack { display: grid; gap: .95rem; }
label { display: grid; gap: .4rem; margin-top: var(--label-mt); font-size: var(--label-fs); color: var(--label-color); font-weight: var(--label-weight); text-transform: uppercase; letter-spacing: var(--label-spacing); }
input, textarea, select {
  width: 100%; border: 0; border-radius: var(--radius-btn);
  background: var(--input); color: var(--ink);
  padding: var(--control-pad-y) var(--control-pad-x);
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: var(--fs-body);
  min-height: var(--control-min-h);
  line-height: 1.25;
}
textarea {
  min-height: calc(var(--control-min-h) * 2.2);
  resize: vertical;
  padding: var(--control-pad-y) var(--control-pad-x);
  line-height: 1.35;
}
textarea.notes-field {
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
input:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
.input-row { display: flex; gap: .4rem; align-items: center; }
.input-row > input,
.input-row > textarea,
.input-row > .input-password-wrap { flex: 1; min-width: 0; }
.input-row > .gen-out-row { flex: 1; min-width: 0; }
.input-password-wrap { position: relative; }
.input-password-wrap input { padding-right: calc(var(--control-min-h) + .15rem); }
.input-password-toggle {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: var(--control-min-h); height: var(--control-min-h);
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--muted); cursor: pointer;
}
.input-password-toggle:active { opacity: .6; }

.alert {
  border-radius: var(--radius-sm);
  padding: .75rem .9rem; margin-bottom: 1rem;
  background: color-mix(in srgb, var(--danger) 14%, var(--bg));
  color: var(--danger); font-size: var(--fs-meta);
}
.alert.ok {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
  color: var(--accent);
}
body.page-auth .auth-card .alert {
  font-size: var(--fs-body);
  line-height: 1.45;
  padding: .85rem 1rem;
}

/* Auth */
.auth {
  position: relative;
  flex: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: max(1.25rem, env(safe-area-inset-top)) var(--pad) max(1.5rem, env(safe-area-inset-bottom));
}
.auth-card {
  width: min(100%, 22rem);
  align-self: center;
}
.auth-theme {
  position: absolute;
  top: .85rem;
  right: .85rem;
  z-index: 5;
  color: var(--ink);
}
.auth-theme .icon-sun { display: inline-grid; }
.auth-theme .icon-moon { display: none; }
html[data-theme="dark"] .auth-theme .icon-sun { display: none; }
html[data-theme="dark"] .auth-theme .icon-moon { display: inline-grid; }

/* Login/Setup: Panel scrollt (24-Wörter-Liste + Formular) */
body.page-auth .panel {
  overflow: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
}
body.page-auth .panel::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
body.page-auth .panel::-webkit-scrollbar-track,
body.page-auth .panel::-webkit-scrollbar-corner {
  background: transparent;
}
body.page-auth .panel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 999px;
}
body.page-auth .auth {
  min-height: 100%;
  padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px));
}

[data-auth-panel][hidden] {
  display: none !important;
}

.auth-step { width: 100%; }
.auth-head { display: grid; gap: .35rem; margin-bottom: .15rem; }
.auth-actions { gap: .65rem; }
.auth-step--sub {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: flex-start;
}
.auth-topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .35rem;
  margin: 0 0 .35rem;
  min-height: var(--control-min-h);
}
.auth-topbar .auth-back {
  margin: 0;
  color: var(--ink);
}
.auth-topbar .topbar-main {
  min-width: 0;
}
.auth-topbar .topbar-title {
  font-size: var(--fs-topbar);
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0;
}

.auth-create-flow {
  display: grid;
  gap: 0;
}
.auth-create-step {
  display: grid;
  gap: var(--stack-gap);
}
.auth-create-step[hidden] {
  display: none !important;
}
.auth-create-step-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.auth-step-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-size: calc(2 * var(--fs-meta));
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}
.auth-create-step-intro {
  display: grid;
  gap: .2rem;
  min-width: 0;
  padding-top: .08rem;
}
.auth-create-step-title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.auth-create-step-lead {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.4;
}
.auth-create-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.auth-create-step > .btn.primary.wide:only-of-type {
  margin-top: .15rem;
}
.auth-recovery-print {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .65rem 1rem;
  align-items: center;
}
.auth-recovery-hint {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.35;
}
.auth-recovery-print .btn {
  white-space: nowrap;
}
@media (max-width: 480px) {
  .auth-recovery-print {
    grid-template-columns: 1fr;
    gap: .55rem;
  }
  .auth-recovery-print .btn {
    width: 100%;
    white-space: normal;
  }
}

.word-grid-block {
  display: grid;
  gap: .35rem;
}
.word-grid-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}
.word-grid-hint {
  font-size: var(--fs-meta);
  line-height: 1.35;
}
.word-grid-wrap {
  max-height: min(46vh, 15rem);
  overflow: auto;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-sm);
  padding: .45rem .55rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
}

/* App */
.app {
  position: relative;
  isolation: isolate;
  flex: 1;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  overflow: hidden;
}

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem;
  align-items: center;
  padding: var(--topbar-pad-y) var(--pad);
  min-height: calc(var(--control-min-h) + (var(--topbar-pad-y) * 2));
  background: var(--bg);
  border-bottom: var(--hair) solid var(--line);
}
.topbar-main { min-width: 0; }
.topbar-title {
  font-size: var(--fs-topbar);
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0;
}
.topbar-actions { display: flex; gap: .15rem; align-items: center; padding-top: .2rem; }
.topbar-actions .auth-theme {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
}

.content {
  padding: 0 var(--pad) var(--content-pad-bottom);
  overflow: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
}
.app > .content {
  height: 100%;
  position: relative;
}
/* pull-to-refresh (home) */
.app > .content.is-pulling {
  padding-top: var(--pull-pad, 0);
}
.app > .content.is-pull-releasing {
  transition: padding-top .25s var(--ease);
}
.pull-refresh-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 2.1rem;
  height: 2.1rem;
  margin-top: .35rem;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}
.pull-refresh-indicator.is-visible {
  opacity: calc(var(--pull-progress, 0) * 0.95);
}
.pull-refresh-indicator.is-refreshing {
  opacity: 1;
}
.pull-refresh-indicator::after {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid color-mix(in srgb, var(--muted) 30%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  transform: rotate(calc(var(--pull-progress, 0) * 300deg));
}
.pull-refresh-indicator.is-refreshing::after {
  animation: pull-refresh-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pull-refresh-indicator.is-refreshing::after {
    animation: none;
  }
  .app > .content.is-pull-releasing {
    transition: none;
  }
}
@keyframes pull-refresh-spin {
  to { transform: rotate(360deg); }
}



/* Scrollbar: theme-aware, compact, almost invisible */
.content::-webkit-scrollbar,
.profile-body::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.content::-webkit-scrollbar-track,
.profile-body::-webkit-scrollbar-track,
.content::-webkit-scrollbar-corner,
.profile-body::-webkit-scrollbar-corner {
  background: transparent;
}
.content::-webkit-scrollbar-thumb,
.profile-body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 999px;
}
.content::-webkit-scrollbar-thumb:hover,
.profile-body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink) 32%, transparent);
}
.profile-body {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
}


.search-row {
  width: 100%;
  margin: .2rem 0 .35rem;
}
.search-row > .search {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
  position: relative;
  background: var(--input);
  border-radius: var(--radius-btn);
}
.search-row .search input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  background: transparent;
  border-radius: var(--radius-btn) 0 0 var(--radius-btn);
  padding-right: 2.4rem;
}
.search-row .search-tag-btn,
.search-row .filter-fav-btn {
  flex: 0 0 auto;
  width: var(--control-min-h);
  height: auto;
  min-height: var(--control-min-h);
  margin: 0;
  align-self: stretch;
  color: var(--muted);
}
.search-row .search-tag-btn {
  border-radius: 0;
}
.search-row .filter-fav-btn {
  border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
}
.search-row .search-tag-btn:active,
.search-row .filter-fav-btn:active {
  color: var(--ink);
}
.search-row .filter-fav-btn.is-active {
  color: var(--accent);
}
.search-row .search-clear {
  right: calc((2 * var(--control-min-h)) + .15rem);
}

.search {
  position: relative;
  margin: .35rem 0 .85rem;
}
.search input {
  padding-right: 2.4rem;
  background: var(--input);
  border-radius: var(--radius-btn);
}
.search input::placeholder { color: var(--muted); }
.search-clear {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  width: 1.8rem; height: 1.8rem; display: grid; place-items: center;
  color: var(--muted); text-decoration: none;
}

.toolbar {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .75rem;
}
.chip {
  display: inline-flex; align-items: center;
  min-height: var(--badge-min-h);
  padding: calc(var(--control-pad-y) * .7) var(--control-pad-x);
  border-radius: var(--radius-btn);
  background: var(--chip); color: var(--ink);
  font-size: var(--fs-ui); text-decoration: none; border: 0; cursor: pointer;
}
.chip.is-active {
  background: color-mix(in srgb, var(--accent) 22%, var(--chip));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}

.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(.65rem + 10px);
}
.item-row + .item-row {
  border-top: 0;
}
.item-row {
  position: relative;
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: calc(var(--radius-btn) + 3px);
  box-shadow: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.item-row::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--item-color, color-mix(in srgb, var(--accent) 55%, var(--line)));
}
.item-row.item-card {
  cursor: pointer;
}
.item-row:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 7%, transparent);
}
html[data-theme="dark"] .item-row {
  background: color-mix(in srgb, var(--bg-elev) 92%, var(--ink));
}
.item-title {
  display: inline-block;
  max-width: 100%;
  font-weight: 780;
  font-size: calc(var(--fs-title) * 1.06);
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--item-title);
  text-decoration: none;
}
.item-head {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  margin: 0;
  padding: .55rem .7rem .45rem;
  padding-right: calc(var(--control-min-h) * .85);
  border-bottom: var(--hair) solid var(--line);
  background: color-mix(in srgb, var(--ink) 2.5%, transparent);
}
.item-fav-btn {
  position: absolute;
  top: .45rem;
  right: .35rem;
  z-index: 2;
  width: calc(var(--control-min-h) * .92);
  height: calc(var(--control-min-h) * .92);
  color: var(--muted);
}
.item-fav-btn.is-active {
  color: var(--accent);
}
.item-fav-btn .icon {
  width: 1.05rem;
  height: 1.05rem;
}
.item-row.is-favorite:not(.has-item-color)::before {
  background: color-mix(in srgb, var(--accent) 70%, var(--line));
}
.item-title:active { opacity: .72; }
.item-creds,
.item-tags,
.item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}
.item-creds {
  gap: .5rem;
  padding: .45rem .7rem .35rem;
  border-bottom: var(--hair) solid var(--line);
  background: color-mix(in srgb, var(--ink) 1.5%, transparent);
}
.item-tags {
  gap: .4rem;
  padding: .4rem .7rem .5rem;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  min-height: calc(var(--badge-min-h) + .15rem);
  padding: calc(var(--control-pad-y) * .55) calc(var(--control-pad-x) * 1);
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  background: var(--chip);
  color: var(--muted);
  font: inherit;
  font-size: calc(var(--fs-meta) - 1px);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease);
}
.badge:active { transform: scale(.97); }
.badge-ico {
  display: inline-grid;
  flex: 0 0 auto;
  opacity: .9;
  color: inherit;
}
.badge-ico .icon { width: 1.12rem; height: 1.12rem; }
.badge-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge-user {
  background: var(--bg-elev);
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
}
.badge-secret {
  letter-spacing: .12em;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: transparent;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
}
.badge-secret .badge-ico {
  color: color-mix(in srgb, var(--ink) 55%, var(--muted));
  opacity: 1;
}
.badge-url {
  background: var(--bg-elev);
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
  color: color-mix(in srgb, var(--ink) 70%, var(--muted));
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--accent);
}
.badge-url .badge-ico { color: var(--muted); opacity: 1; }
.badge-url:hover,
.badge-url:focus-visible {
  color: var(--ink);
  text-decoration-color: var(--accent);
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 100%;
  min-height: calc(var(--badge-min-h) * .92);
  padding: .2rem .55rem .2rem .45rem;
  border-radius: var(--radius-btn);
  border: 1px solid color-mix(in srgb, var(--tag, #64748b) 70%, transparent);
  background: color-mix(in srgb, var(--tag, #64748b) 22%, transparent);
  color: color-mix(in srgb, var(--tag, #64748b) 85%, var(--ink));
  font-size: calc(var(--fs-meta) * .95);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}
.tag-chip .tag-ico { color: var(--tag, #64748b); display: inline-grid; }
.tag-chip .tag-ico .icon { width: .9rem; height: .9rem; }
.tag-chip:active { opacity: .8; }
.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .45rem; border-radius: var(--radius-btn);
  background: var(--chip); color: var(--muted); font-size: .78em;
}
.item-actions .icon-btn {
  width: 2.2rem;
  height: 2.2rem;
  color: var(--muted);
}
.item-actions .icon-btn:active { color: var(--accent); }
.empty h3 { font-size: 1.2rem; }
.empty .btn { margin-top: .5rem; width: fit-content; }

.detail-card h2 {
  font-size: calc(var(--fs-hero) * .85);
  margin: .2rem 0 1.1rem;
}
.field {
  padding: var(--field-pad) 0;
  border-bottom: var(--hair) solid var(--line);
}
.field .label {
  display: block; color: var(--label-color); margin-top: var(--label-mt); margin-bottom: .4rem;
  font-size: var(--label-fs); font-weight: var(--label-weight);
  text-transform: uppercase; letter-spacing: var(--label-spacing);
}
.value-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.value {
  flex: 1 1 10rem; word-break: break-all; font-size: var(--fs-body);
}
.value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.value.link { color: var(--accent); text-decoration: none; }
.notes { margin: 0; white-space: pre-wrap; font: inherit; }
.actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: 1.4rem;
}
.actions form { margin: 0; }
.actions .btn { width: 100%; }

/* FAB */
.fab {
  position: absolute;
  right: 1rem; bottom: var(--fab-bottom);
  z-index: 30;
  width: var(--fab-size); height: var(--fab-size);
  border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  text-decoration: none; border: 0; cursor: pointer;
}
.fab .icon { width: 1.4rem; height: 1.4rem; }
.fab:active { transform: scale(.96); }
.app[data-tresor-switcher="open"] > .fab,
.app[data-tresor-switcher="open"] > .fab-dial {
  visibility: hidden;
  pointer-events: none;
}

/* FAB speed-dial (Neuer Eintrag / Neuer Ordner) */
.fab-dial {
  position: absolute;
  right: 1rem;
  bottom: var(--fab-bottom);
  z-index: 40;
  width: var(--fab-size);
  height: var(--fab-size);
}
.fab-dial > .fab {
  position: absolute;
  inset: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.fab-dial.is-open > .fab {
  transform: rotate(45deg);
}
.fab-dial-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, #000 42%, transparent);
  cursor: pointer;
}
.fab-dial-backdrop[hidden] {
  display: none !important;
}
.fab-dial-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + .55rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  margin: 0;
  padding: 0;
}
.fab-dial-menu[hidden] {
  display: none !important;
}
.fab-dial-menu--pills {
  align-items: flex-end;
}
.fab-dial-action {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: calc(var(--control-min-h) + .15rem);
  padding: .55rem .95rem .55rem .75rem;
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
  color: var(--ink);
  text-decoration: none !important;
  font-weight: 650;
  font-size: var(--fs-body);
  line-height: 1.2;
  white-space: nowrap;
  border: var(--hair) solid var(--line);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.fab-dial-action:visited,
.fab-dial-action:hover,
.fab-dial-action:active,
.fab-dial-action:focus {
  color: var(--ink);
  text-decoration: none !important;
}
.fab-dial-action:active {
  transform: scale(.97);
}
.fab-dial-action .icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--accent);
}
.fab-dial-action span {
  color: inherit;
}

/* Tresore-Seite: FAB mit auth-choice-Karten */
.fab-dial--tresore {
  z-index: 45;
}
.fab-dial-menu--cards {
  right: 0;
  left: auto;
  width: min(22rem, calc(100vw - 2rem));
  align-items: stretch;
  gap: .65rem;
}
.fab-dial-menu--cards .auth-choice {
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  border: 2px solid var(--accent);
}
@media (hover: hover) {
  .fab-dial-menu--cards .auth-choice:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev));
    border-color: var(--accent);
    box-shadow: var(--shadow);
  }
}


/* Bottom nav */
.bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .12rem;
  padding: var(--bnav-pad-y) var(--bnav-pad-x) calc(var(--bnav-pad-y) + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: var(--hair) solid var(--line);
}
.bottom-nav a,
.bottom-nav .bnav-btn {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--bnav-gap);
  min-width: 0;
  min-height: 2.75rem;
  padding: var(--bnav-link-pad-y) .2rem;
  border: 0;
  background: none;
  text-decoration: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--bnav-label);
  font-weight: var(--bnav-weight);
  line-height: var(--bnav-label-lh);
  letter-spacing: .01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav .icon,
.bottom-nav a .icon,
.bottom-nav .bnav-btn .icon {
  width: var(--bnav-icon);
  height: var(--bnav-icon);
  flex: 0 0 var(--bnav-icon);
}
.bottom-nav a.is-active,
.bottom-nav .bnav-btn.is-active {
  color: var(--accent);
  font-weight: var(--bnav-weight);
}
.bottom-nav .icon svg [stroke],
.bottom-nav .icon svg circle,
.bottom-nav .icon svg path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5;
}

/* Drawer */
.nav {
  position: absolute; top: 0; right: 0; bottom: 0;
  z-index: 120;
  width: var(--nav-w); max-width: 100%;
  background: var(--bg);
  border-left: var(--hair) solid var(--line);
  transform: translateX(105%);
  transition: transform .28s var(--ease);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 1rem .9rem 1.2rem;
  pointer-events: none; visibility: hidden;
}
.app[data-nav="open"] .nav {
  transform: translateX(0);
  pointer-events: auto; visibility: visible;
}
.nav-backdrop {
  position: absolute; inset: 0; z-index: 110;
  background: rgba(0,0,0,.5); display: none; cursor: pointer;
}
.app[data-nav="open"] .nav-backdrop { display: block; }
.nav-head {
  display: grid; grid-template-columns: 1fr auto; gap: .55rem; align-items: center;
  margin-bottom: 1.25rem; padding: .2rem .2rem .8rem;
  border-bottom: var(--hair) solid var(--line);
}
.nav-head strong { font-size: 1.15rem; font-weight: 750; }
.nav-links { display: grid; gap: .15rem; align-content: start; }
.nav-links a {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--ink);
  padding: .85rem .55rem; border-radius: var(--radius-sm);
  font-weight: 600;
}
.nav-links a.active, .nav-links a:hover { background: var(--bg-elev); }
.nav-links a.soon { opacity: .45; pointer-events: none; }
.nav-links small { margin-left: auto; color: var(--muted); font-size: .7rem; text-transform: uppercase; }

.nav-foot { display: grid; gap: .75rem; margin-top: 1rem; }
.nav-theme {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  min-height: 2.7rem; padding: .65rem .55rem;
  border: 0; border-radius: var(--radius-sm);
  background: var(--bg-elev); color: var(--ink);
  font: inherit; cursor: pointer; text-align: left;
}
.nav-theme-label { margin-top: var(--label-mt); font-size: var(--label-fs); font-weight: var(--label-weight); color: var(--label-color); }
.nav-theme .icon-sun { display: inline-grid; }
.nav-theme .icon-moon { display: none; }
html[data-theme="dark"] .nav-theme .icon-sun { display: none; }
html[data-theme="dark"] .nav-theme .icon-moon { display: inline-grid; }

.pref-block { display: grid; gap: .4rem; }
.pref-label {
  margin-top: var(--label-mt);
  font-size: var(--label-fs); color: var(--label-color); font-weight: var(--label-weight);
  padding: 0 .2rem; text-transform: uppercase; letter-spacing: var(--label-spacing);
}
.pref-seg {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--bg-elev); border-radius: var(--radius-btn);
  padding: calc(var(--control-pad-y) * .35);
  gap: calc(var(--chip-gap) * .4);
}
.pref-btn {
  min-height: var(--pref-btn-min-h);
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-btn);
  font-weight: 700;
  cursor: pointer;
  padding: var(--control-pad-y) .35rem;
  box-sizing: border-box;
}
.pref-btn.is-active,
.gen-sep-btn.is-active {
  background: transparent !important;
  color: var(--ink) !important;
  border: 2px solid var(--accent) !important;
  box-shadow: none;
}

.toast {
  position: absolute;
  top: .65rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  min-width: min(16rem, calc(100% - 1.5rem));
  max-width: min(24rem, calc(100% - 1.5rem));
  padding: .45rem 1.1rem;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fb923c;
  border-radius: var(--radius-btn);
  font-size: .86rem;
  font-weight: 650;
  text-align: center;
  line-height: 1.25;
  box-shadow: none;
  animation: toast-in .2s var(--ease) both;
}
html[data-theme="dark"] .toast {
  background: #431407;
  color: #fdba74;
  border-color: #ea580c;
}
.toast[hidden] { display: none; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.form-card { padding-top: .25rem; }

@media (max-width: 900px) {
  /* Hintergrund nur als Füller bei breiten Displays */
  .shell { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .visual { display: none !important; }
  .panel {
    height: 100%;
    min-height: 0;
    border-left: 0;
    border-top: 0;
  }
  .nav, .nav-backdrop { position: fixed; }
  .nav-backdrop { z-index: 200; }
  .nav { z-index: 210; }
}
@media (min-width: 1400px) {
  :root { --panel-w: 30rem; }
}
/* density-spacing-apply */
body { line-height: var(--line-height); }
.stack { gap: var(--stack-gap); }
.content { padding: .75rem var(--pad) var(--content-pad-bottom); }
.search-row { margin: .15rem 0 calc(var(--section-gap) * .45); }
.search { margin: .2rem 0 var(--section-gap); }
.toolbar { gap: var(--chip-gap); margin-bottom: var(--section-gap); }
.field { padding-block: var(--field-pad); }
.nav-links a { padding: var(--nav-link-pad); }
.empty { padding: calc(var(--section-gap) * 3.2) .25rem; gap: var(--stack-gap); }
.actions { gap: var(--chip-gap); margin-top: calc(var(--section-gap) * 1.4); }
.auth-brand { margin-bottom: calc(var(--section-gap) * 2); }
.pref-block { gap: calc(var(--chip-gap) * .85); }
.nav-foot { gap: var(--section-gap); }
.detail-card h2 { margin: .15rem 0 var(--section-gap); }


.topbar-with-back {
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.topbar-with-back .topbar-back {
  margin-top: 0;
}
.topbar-with-back .topbar-main {
  min-width: 0;
}
.topbar-with-back .topbar-actions {
  padding-top: 0;
}

/* Profile drawer */
.profile-head { display: grid; gap: .25rem; min-width: 0; }
.profile-mail { color: var(--muted); font-size: var(--fs-meta); font-weight: 500; }
.profile-body { overflow: auto; }
.profile-drawer .nav-foot { margin-top: 0; }
.topbar-spacer { width: var(--control-min-h); height: var(--control-min-h); }

/* Generator */
.app:has(> .content.generator-page) {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.app > .content.generator-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding-top: .75rem;
  padding-bottom: .5rem;
}
.generator-page .generator-card {
  border: 2px solid var(--accent);
  border-radius: var(--radius-btn);
  padding: calc(var(--stack-gap) * 1);
  background: var(--bg);
  box-sizing: border-box;
}
.generator-page .gen-result.generator-card {
  padding-bottom: calc(var(--stack-gap) * 1);
}
.generator-page .gen-settings.generator-card {
  margin-top: auto;
}

.generator-page .gen-card {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 100%;
  gap: var(--stack-gap);
  padding-top: .25rem;
  box-sizing: border-box;
}
.generator-page .gen-main {
  padding-bottom: 0;
  border-bottom: 0;
  flex-shrink: 0;
}
.generator-page .gen-save-card {
  margin-top: 1cm;
  margin-bottom: 0;
  padding: calc(var(--stack-gap) * .9) calc(var(--stack-gap) * 1);
  background: var(--bg-elev);
  border-radius: var(--radius-btn);
  border: var(--hair) solid var(--line);
  gap: .55rem;
  flex-shrink: 0;
  box-sizing: border-box;
}
.generator-page .gen-settings {
  margin-top: auto;
  flex-shrink: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.gen-card {
  display: grid;
  gap: var(--stack-gap);
  padding-top: .25rem;
}
.gen-out-label, .gen-range-label {
  font-size: var(--label-fs);
  color: var(--label-color);
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
  font-weight: var(--label-weight);
}
.gen-range-label {
  display: flex; justify-content: space-between; align-items: baseline;
}
.gen-range-label strong { color: var(--ink); font-size: 1rem; }
.gen-out-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .4rem;
  align-items: start;
}
.gen-out-row .icon-btn { margin-top: .15rem; }
.gen-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.35rem;
  margin-top: -.15rem;
}
.gen-stat {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  color: var(--muted);
}
.gen-stat-label {
  font-size: var(--label-fs);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
}
.gen-stat strong {
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.gen-stat-unit {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--muted);
}
.gen-stat-strength { flex-wrap: wrap; }
.gen-stat-detail {
  font-size: var(--label-fs);
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 28%, var(--muted));
}
.gen-strength.is-very-weak { color: var(--danger); }
.gen-strength.is-weak { color: var(--warn); }
.gen-strength.is-fair { color: var(--muted); }
.gen-strength.is-strong { color: var(--ink); }
.gen-strength.is-very-strong { color: var(--accent); }


.gen-out {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  resize: none;
  min-height: var(--control-min-h);
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-all;
  overflow-x: hidden;
  overflow-y: hidden;
  field-sizing: content;
}
.gen-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-top: .35rem;
}
.gen-check {
  display: flex; align-items: center; gap: .55rem;
  padding: .75rem .8rem;
  background: var(--bg-elev);
  border-radius: var(--radius-btn);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
}
.gen-check input { width: auto; min-height: auto; accent-color: var(--accent); }
.gen-main,
.gen-result {
  display: grid;
  gap: var(--stack-gap);
  padding-bottom: calc(var(--stack-gap) * 1.1);
  border-bottom: var(--hair) solid var(--line);
}
.gen-actions {
  display: grid;
  gap: .55rem;
}
.gen-save-card,
.gen-save-block {
  display: grid;
  gap: .45rem;
}
.gen-tresor-picker {
  width: 100%;
  justify-content: space-between;
  gap: .65rem;
  min-height: calc(var(--control-min-h) + .35rem);
  padding: calc(var(--control-pad-y) + .15rem) calc(var(--control-pad-x) + .35rem);
  background: var(--bg-elev);
  border-radius: var(--radius-btn);
  text-align: left;
  font-size: var(--fs-btn);
  font-weight: 700;
  box-sizing: border-box;
}
/* #44 generator light-mode field contrast */
.generator-page .gen-out,
.generator-page .gen-tresor-picker {
  background: color-mix(in srgb, var(--ink) 12%, var(--bg));
}
.gen-tresor-picker-main {
  display: grid;
  gap: .18rem;
  min-width: 0;
}
.gen-tresor-picker-hint {
  font-size: var(--label-fs);
  color: var(--label-color);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
  line-height: 1.1;
}
.gen-tresor-picker .tresor-switcher-name {
  font-size: var(--fs-btn);
  font-weight: 700;
  color: var(--ink);
  text-transform: none;
  letter-spacing: .01em;
  line-height: 1.15;
}
.gen-tresor-picker .tresor-switcher-chev .icon {
  width: 1.25rem;
  height: 1.25rem;
}
.gen-settings {
  display: grid;
  gap: var(--stack-gap);
  margin-top: .15rem;
}
.gen-settings-title {
  margin: var(--label-mt) 0 0;
  font-size: var(--label-fs);
  color: var(--label-color-strong);
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
  font-weight: var(--label-weight-strong);
}
.gen-mode { margin: 0; }
.gen-panel {
  display: grid;
  gap: 1.1rem;
  margin-top: .25rem;
}
.gen-stepper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .55rem;
  align-items: center;
}
.gen-step-btn {
  width: var(--control-min-h);
  height: var(--control-min-h);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  background: var(--bg-elev);
  color: var(--ink);
}
.gen-stepper input[type="range"] {
  width: 100%;
}
.gen-block {
  display: grid;
  gap: .55rem;
}
.gen-sep-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(var(--chip-gap) * .55);
  background: var(--bg-elev);
  border-radius: var(--radius-btn);
  padding: calc(var(--control-pad-y) * .45);
}
.gen-sep-btn {
  min-height: var(--pref-btn-min-h);
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
}
[data-gen-panel][hidden] { display: none !important; }
input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.delete-form{margin-top:var(--section-gap);}
.actions .delete-form{margin-top:0;}

.actions .icon-btn.action-delete {
  color: var(--danger);
}


/* accent-picker */
.accent-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--chip-gap);
  align-items: center;
}
.accent-swatch {
  width: var(--swatch-size);
  height: var(--swatch-size);
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--sw);
  cursor: pointer;
  padding: 0;
}
.accent-swatch.is-active:not(.tag-color-swatch) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.accent-picker-btn {
  position: relative;
  width: var(--swatch-size);
  height: var(--swatch-size);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius-btn);
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    conic-gradient(from 210deg, #ef4444, #eab308, #22c55e, #3b82f6, #a855f7, #ef4444) border-box;
  border: 2px solid transparent;
  color: var(--ink);
  cursor: pointer;
}
.accent-picker-btn .icon {
  width: calc(var(--swatch-size) * .58);
  height: calc(var(--swatch-size) * .58);
  opacity: 1;
}
.accent-picker-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 0;
  border: 0;
  min-height: 0;
}


/* Profile as full page */
.app:has(> .content.profile-page) {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.app > .content.profile-page {
  display: block;
  min-height: 0;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding-top: .75rem;
  padding-bottom: .5rem;
}
.profile-page {
  /* kept for legacy selectors */
}
.profile-top {
  display: grid;
  gap: var(--section-gap);
  align-content: start;
}
.profile-page .nav-foot {
  margin-top: 0;
  gap: 1.1rem;
}
.profile-page .nav-theme {
  justify-content: flex-start;
}
/* profile-prefs-v2 */
.prefs {
  display: grid;
  gap: var(--section-gap);
}
.prefs-main {
  display: grid;
  gap: var(--section-gap);
  align-content: start;
}
.profile-actions {
  display: grid;
  gap: .65rem;
  padding: 0 var(--pad) .65rem;
  background: var(--bg);
  border-top: 0;
  box-shadow: none;
}
.profile-actions .btn {
  min-height: var(--control-min-h);
  padding: var(--control-pad-y) var(--control-pad-x);
  font-size: var(--fs-btn);
  border-radius: var(--radius-btn);
  box-sizing: border-box;
}
.pref-seg-2 {
  grid-template-columns: repeat(2, 1fr);
}
.pref-seg-3 {
  grid-template-columns: repeat(3, 1fr);
}
.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
}
.pref-row-text {
  display: grid;
  gap: .15rem;
}
.pref-hint {
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 500;
}
.pref-block [data-device-label-save] {
  margin-top: .35rem;
  margin-bottom: 1cm;
}
.pref-device-input {
  margin-top: .15rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-body);
  font-weight: 600;
}
.switch {
  position: relative;
  width: var(--switch-w);
  height: var(--switch-h);
  flex: 0 0 auto;
  cursor: pointer;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  min-height: 0;
  padding: 0;
}
.switch-ui {
  position: absolute;
  inset: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.switch-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--switch-h) - 6px);
  height: calc(var(--switch-h) - 6px);
  border-radius: 50%;
  background: var(--ink);
  transition: transform .2s var(--ease);
}
.switch input:checked + .switch-ui {
  background: color-mix(in srgb, var(--accent) 35%, var(--bg-elev));
  border-color: var(--accent);
}
.switch input:checked + .switch-ui::after {
  transform: translateX(calc(var(--switch-w) - var(--switch-h)));
  background: var(--accent);
}
.logout-form { margin: 0; }
.logout-btn {
  background: var(--logout) !important;
  color: #ffffff !important;
  border: 1px solid var(--logout) !important;
  font-weight: 700;
}
.danger-btn {
  background: transparent !important;
  color: var(--danger) !important;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent) !important;
  font-weight: 700;
}
.danger-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}



/* list / search separation */
.list-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--chip-gap);
  margin-bottom: .25rem;
  padding-bottom: .5rem;
}
.toolbar.list-filters:not(:has(.tag-chip, .filter-badge)) {
  margin-bottom: 0;
  padding-bottom: 0;
}
.list-filters + .item-list {
  margin-top: .4rem;
}
.list-filters + .empty {
  margin-top: 1rem;
}

.tag-add-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--accent);
  font-weight: 700;
  font-size: calc(var(--fs-meta) * .95);
  text-decoration: none;
  min-height: calc(var(--badge-min-h) + .1rem);
  padding: .25rem .45rem;
}
button.tag-add-link {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.tag-add-link .icon { width: 1.05rem; height: 1.05rem; }
.tag-add-hint { font-size: var(--fs-meta); }

.field.item-tags {
  display: grid;
  gap: .45rem;
  padding-top: calc(var(--field-pad) + .5rem);
}
.field-label {
  margin-top: var(--label-mt);
  font-size: var(--label-fs);
  color: var(--label-color);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
}
.item-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--chip-gap);
  align-items: center;
}
.tag-badge {
  gap: .35rem;
  color: color-mix(in srgb, var(--tag, #64748b) 85%, var(--ink));
  background: color-mix(in srgb, var(--tag, #64748b) 28%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--tag, #64748b) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag, #64748b) 15%, transparent);
}
.tag-badge .tag-ico {
  color: var(--tag, #64748b);
  display: inline-grid;
}
.tag-badge .tag-ico .icon { width: .95rem; height: .95rem; }
.tag-badge-x {
  display: inline-grid;
  place-items: center;
  margin: 0 -.15rem 0 .1rem;
  padding: 0 .2rem;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--tag, var(--accent));
  font-weight: 600;
  font-size: 1.05em;
  line-height: 1;
  opacity: .7;
}
.tag-badge-x:hover { opacity: 1; }
.tag-badge-x[disabled] { opacity: .35; cursor: default; }

/* Schlagwort wählen — Snapper-ähnlich */
.tags-page {
  display: flex;
  flex-direction: column;
  padding-top: .35rem;
  gap: 0;
}
.tag-toolbar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .15rem 0 .75rem;
  margin: 0 0 .15rem;
  flex-shrink: 0;
}
.tag-search-wrap {
  flex: 1 1 auto;
  min-width: 0;
}
.tag-search {
  width: 100%;
  min-height: 2.35rem;
  padding: .55rem .75rem;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--input);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
}
.tag-search::placeholder { color: var(--muted); }
.tag-toolbar-btn {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}
.tag-toolbar-btn .icon { width: 1.25rem; height: 1.25rem; }
.tag-toolbar-search {
  background: var(--accent);
  color: var(--accent-ink);
}
.tag-toolbar-add {
  color: var(--ink);
}
.tag-toolbar-add:active { opacity: .65; }

.tag-list {
  margin: 0 calc(-1 * var(--pad));
  padding: 0;
  border-top: var(--hair) solid var(--line);
}
.tag-item {
  display: flex;
  align-items: stretch;
  border-bottom: var(--hair) solid var(--line);
}
.tag-pick-form { margin: 0; flex: 1; min-width: 0; display: flex; }
.tag-row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 2.85rem;
  padding: .7rem var(--pad);
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tag-item > .tag-row { flex: 1; }
.tag-main {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  flex: 1;
  color: var(--ink);
}
.tag-ico { display: inline-grid; flex: 0 0 auto; color: inherit; }
.tag-ico .icon { width: 1.25rem; height: 1.25rem; }
.tag-title {
  color: var(--ink) !important;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-item.is-selected {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.tag-item.is-selected .tag-row {
  color: var(--ink);
  background: transparent;
}
.tag-item.is-selected .tag-title {
  color: var(--ink) !important;
  font-weight: 750;
}
.tag-indicator {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  color: var(--accent);
  box-sizing: border-box;
}
.tag-indicator.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.tag-indicator svg {
  width: .85rem;
  height: .85rem;
}
.tag-edit {
  flex: 0 0 auto;
  width: calc(2.75rem + var(--pad));
  padding-right: var(--pad);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 0;
  border-left: var(--hair) solid var(--line);
  background: transparent;
  color: var(--muted);
  text-decoration: none;
}
.tag-edit .icon { width: 1.15rem; height: 1.15rem; }
.tag-edit:active { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.tag-empty {
  padding: 1.5rem .25rem;
  color: var(--muted);
  font-size: var(--fs-body);
}
.tag-detail { padding-top: .35rem; }
/* label-Reset: globale label-Styles zerstören sonst den Swatch-Rahmen */
label.accent-swatch.tag-color-swatch,
.tag-color-swatch {
  position: relative;
  display: inline-block;
  width: var(--swatch-size);
  height: var(--swatch-size);
  flex: 0 0 auto;
  margin: 0;
  padding: 0 !important;
  gap: 0 !important;
  font-size: 0 !important;
  line-height: 0;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: transparent !important;
  border: 1px solid rgba(128,128,128,.45);
  border-radius: var(--radius-btn);
  background-color: var(--sw) !important;
  background-image: none !important;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.tag-color-swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--sw);
  border-radius: inherit;
  z-index: 0;
}
.tag-color-swatch.is-active,
.tag-color-swatch:has(input:checked) {
  outline: none;
  border-color: rgba(128, 128, 128, .45);
  box-shadow: 0 0 0 2px var(--ink);
}
.tag-color-swatch input {
  position: absolute;
  opacity: 0;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.accent-row.tag-color-row,
.accent-row.item-color-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--swatch-size));
  justify-content: start;
  gap: .35rem;
}
.tag-color-row {
  gap: .35rem;
}
.topbar-confirm { color: var(--accent); }

.tag-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-top: .35rem;
}
.tag-detail-actions .btn { width: 100%; }
.tag-detail-actions:has(.wide) {
  grid-template-columns: 1fr;
}
.tag-delete-form { display: none; }

.filter-badge {
  text-decoration: none;
}
.icon-btn.is-active,
.topbar-actions .icon-btn[data-favorite-toggle].is-active {
  color: var(--accent);
}
.filter-badge .filter-x {
  display: inline-grid;
  place-items: center;
  color: var(--tag, var(--accent));
  font-weight: 600;
  font-size: 1.05em;
  line-height: 1;
  opacity: .7;
}
.filter-apply-bar {
  margin: 0 0 .75rem;
}
.item-tags .tag-chip { text-decoration: none; }

.auth-wide { width: min(100%, 30rem); }
.auth-title { font-size: var(--fs-title, 1.15rem); margin: 0 0 .25rem; }
.auth-lead { margin: 0 0 .5rem; }

.auth-hero {
  margin-bottom: .15rem;
}
.auth-slogan {
  font-size: calc(var(--fs-hero) * 1.716);
  line-height: 1.12;
  font-weight: 700;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}
.auth-slogan span {
  display: block;
}
.auth-subline {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
}
.auth-subline-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  color: var(--accent);
}
.auth-subline-icon .icon {
  width: 4rem;
  height: 4rem;
}

.auth-subline-copy {
  display: flex;
  flex-direction: column;
  gap: calc(0.35rem + 0.2cm);
  flex: 1;
  min-width: 0;
}
.auth-subline-zk {
  display: block;
}
.auth-subline-points {
  margin: 0;
  padding: 0 0 0 1.1rem;
  list-style: disc outside;
}
.auth-subline-points li {
  color: var(--muted);
}
.auth-subline-points li::marker {
  color: var(--muted);
}
.auth-subline-points strong {
  color: inherit;
  font-weight: 650;
}

/* Startseite: Hero oben, Aktions-Buttons unten */
body.page-auth .auth-card.auth-wide {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  align-self: center;
  min-height: 0;
  width: min(100%, 30rem);
}
[data-auth-panel="home"].auth-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 0;
  gap: var(--stack-gap);
}
[data-auth-panel="home"] .auth-hero {
  flex: 0 0 auto;
}
[data-auth-panel="home"] .auth-actions {
  margin-top: auto;
  padding-top: 1.25rem;
}

.auth-actions {
  margin-top: .5rem;
  gap: .55rem;
}
.auth-choice[hidden] {
  display: none !important;
}
.auth-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: center;
  width: 100%;
  padding: .85rem .95rem;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--bg-elev);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: opacity .12s ease, transform .12s ease;
}
.auth-choice:active {
  opacity: .88;
  transform: scale(0.985);
}
a.auth-choice {
  text-decoration: none;
  box-sizing: border-box;
}

.auth-choice.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}
.auth-choice-icon {
  width: 2.55rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, currentColor 14%, transparent);
  flex-shrink: 0;
}
.auth-choice-icon .icon {
  width: 1.35rem;
  height: 1.35rem;
}
.auth-choice-body {
  display: grid;
  gap: .22rem;
  min-width: 0;
}
.auth-choice-title {
  font-weight: 650;
  font-size: var(--fs-body);
  line-height: 1.25;
}
.auth-choice-hint {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.35;
  font-weight: 450;
}
.auth-choice.primary .auth-choice-hint {
  color: color-mix(in srgb, var(--accent-ink) 72%, transparent);
}

/* Haupt-CTA: Tresor erstellen — größer als weitere Auth-Choices */
.auth-choice--lead {
  padding: 1.1rem 1.15rem;
  gap: 1rem;
}
.auth-choice--lead .auth-choice-icon {
  width: 3rem;
  height: 3rem;
  box-sizing: border-box;
  padding: .35rem;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 2px solid var(--accent);
}
.auth-choice--lead .auth-choice-icon .icon {
  width: 1.55rem;
  height: 1.55rem;
}
.auth-choice--lead .auth-choice-title {
  font-size: calc(var(--fs-title) * 1.08);
  font-weight: 750;
  line-height: 1.2;
}
.auth-choice--lead .auth-choice-hint {
  font-size: calc(var(--fs-meta) * 1.04);
  line-height: 1.38;
}
.btn.btn--lead {
  min-height: calc(var(--control-min-h) + .55rem);
  padding: calc(var(--control-pad-y) + .22rem) calc(var(--control-pad-x) + .5rem);
  font-size: calc(var(--fs-btn) * 1.06);
}
.word-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem .6rem;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-meta, .85rem);
}
.word-grid li {
  display: flex;
  gap: .4rem;
  padding: .2rem .35rem;
  border-radius: .4rem;
  background: color-mix(in srgb, var(--ink) 6%, var(--bg));
}
.word-i { opacity: .45; min-width: 1.4em; }
label.check-row {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  font-size: var(--fs-meta);
}

.auth-warn-card {
  display: grid;
  gap: .5rem;
  padding: .8rem .9rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 12%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
}
.auth-warn-card .auth-warn-check {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 650;
  color: var(--danger);
}
.auth-warn-card .auth-warn-label {
  color: var(--danger);
}
.auth-warn-card .auth-warn-input {
  accent-color: var(--danger);
}
.auth-warn-card .auth-warn-input:not(:checked) {
  outline: 1.5px solid color-mix(in srgb, var(--danger) 55%, transparent);
  outline-offset: 1px;
}
.auth-warn-card .check-input {
  accent-color: var(--danger);
}

.auth-terms-card {
  display: grid;
  gap: .5rem;
  padding: .8rem .9rem;
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
.auth-terms-card .auth-terms-check {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
}
.auth-warn-text {
  margin: 0;
  padding-left: calc(1.1rem + .55rem);
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: color-mix(in srgb, var(--danger) 70%, var(--muted));
}
.check-input,
input[type="checkbox"],
input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  min-width: 1.1rem;
  min-height: 1.1rem;
  padding: 0;
  margin-top: .15rem;
  flex: 0 0 auto;
  accent-color: var(--accent);
}


/* item icon */
.item-icon-field {
  margin: 0;
  padding-top: calc(var(--field-pad) + .5rem);
}
.item-icon-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, 2.1rem);
  justify-content: start;
  gap: .35rem;
}
.item-icon-swatch {
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--chip);
  color: var(--muted);
  cursor: pointer;
  padding: .35rem;
}
.item-icon-swatch.is-active {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--chip));
}
.item-icon-swatch .icon {
  width: 1.15rem;
  height: 1.15rem;
}
.item-icon-swatch img {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 3px;
  object-fit: contain;
}
.item-icon-none-mark {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 2px;
  background: linear-gradient(
    135deg,
    transparent 46%,
    color-mix(in srgb, var(--muted) 50%, transparent) 46%,
    color-mix(in srgb, var(--muted) 50%, transparent) 54%,
    transparent 54%
  );
}
.item-icon-favicon-btn {
  margin-top: .45rem;
}
.item-head .item-icon {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: none;
  border: 0;
}
.item-head .item-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}
.item-head .item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 3px;
}

.item-icon-filter {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
}
.item-icon-filter:hover {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.item-icon-filter.is-active {
  outline: 2px solid var(--accent, var(--primary));
  outline-offset: 1px;
}
.item-icon-filter .item-icon {
  pointer-events: none;
}
.icon-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.icon-filter-badge-ico {
  display: grid;
  place-items: center;
}
.icon-filter-badge-ico .item-icon {
  width: 1rem;
  height: 1rem;
}
.item-row.has-item-color .item-head .item-icon {
  color: var(--item-color);
}

/* item color */
.item-color-field {
  margin: 0;
  padding-top: calc(var(--field-pad) + .5rem);
}
.item-color-row {
  --swatch-size: 1.55rem;
  gap: .3rem;
}
.item-color-none {
  --sw: var(--chip);
  background: var(--chip) !important;
}
.item-color-none::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    transparent 46%,
    color-mix(in srgb, var(--muted) 50%, transparent) 46%,
    color-mix(in srgb, var(--muted) 50%, transparent) 54%,
    transparent 54%
  );
}
.item-row.has-item-color::before {
  background: var(--item-color);
}
.item-row.has-item-color:hover {
  border-color: color-mix(in srgb, var(--item-color) 35%, var(--line));
}
.item-row.has-item-color .item-head {
  border-bottom-color: color-mix(in srgb, var(--item-color) 20%, var(--line));
}
.item-row.has-item-color:hover .item-head {
  border-bottom-color: color-mix(in srgb, var(--item-color) 28%, var(--line));
}

/* Tresor löschen / Modals — nur Panel-Bereich */
body.delete-open,
body.pair-open,
body.move-open {
  overflow: hidden;
}
/* Modals — nur Panel-Bereich (.app), nicht über Visual */
.delete-overlay,
.detach-overlay,
.pair-overlay,
.move-overlay,
.agent-key-overlay {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  backdrop-filter: blur(6px);
}
.delete-overlay[hidden],
.detach-overlay[hidden],
.pair-overlay[hidden],
.move-overlay[hidden],
.agent-key-overlay[hidden] {
  display: none !important;
}
[data-delete-panel][hidden] {
  display: none !important;
}
.delete-dialog,
.pair-dialog,
.agent-key-dialog {
  width: min(100%, 26rem);
  max-height: min(92vh, 36rem);
  overflow: auto;
  padding: 1.1rem 1.15rem 1.15rem;
  border-radius: var(--radius);
  border: var(--hair) solid var(--line);
  background: var(--bg-elev);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 18%, transparent);
  display: grid;
  gap: .85rem;
}

.delete-head {
  display: grid;
  gap: .35rem;
}
.delete-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 750;
}
.delete-lead {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.45;
}
.delete-actions {
  gap: .55rem;
}
.delete-panel textarea {
  min-height: 6.5rem;
  resize: vertical;
}
.pair-head {
  display: grid;
  gap: .35rem;
}
.pair-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 750;
}
.pair-lead {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.45;
}
.pair-qr-wrap {
  display: grid;
  place-items: center;
  padding: .5rem;
  border-radius: var(--radius-sm);
  background: #fff;
}
.pair-qr-canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
.pair-status {
  margin: 0;
  text-align: center;
  font-size: var(--fs-meta);
}
.pair-hint {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.45;
}

/* Tresor switcher */
a.tresor-switcher {
  text-decoration: none;
  color: inherit;
}
.tresor-switcher {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: 100%;
  min-height: var(--control-min-h);
  padding: .15rem .1rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 750;
  font-size: var(--fs-topbar);
  letter-spacing: -.02em;
  line-height: 1.15;
  text-align: left;
}
.tresor-switcher--title {
  width: 100%;
  justify-content: space-between;
  padding: 0;
  cursor: pointer;
}
.tresor-switcher--title .tresor-switcher-name {
  font-size: var(--fs-topbar);
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.tresor-switcher--compact {
  max-width: min(11rem, 42vw);
  justify-content: flex-end;
  font-size: .82rem;
  font-weight: 650;
  padding: .2rem .35rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tresor-switcher--compact:hover { background: var(--bg-elev); }
.tresor-switcher-name { min-width: 0; }
/* Generator: Tresor-Picker — nach .tresor-switcher, sonst werden Padding/Größe überschrieben */

.gen-tresor-field {
  display: grid;
  gap: .35rem;
}
.gen-tresor-select {
  width: 100%;
  min-height: calc(var(--control-min-h) + .35rem);
  padding: calc(var(--control-pad-y) + .15rem) calc(var(--control-pad-x) + .35rem);
  padding-right: calc(var(--control-pad-x) + 1.85rem);
  border: 0;
  border-radius: var(--radius-btn);
  background-color: var(--bg-elev);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 1.1rem;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.15;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.gen-tresor-select:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.gen-tresor-pickera.tresor-switcher {
  text-decoration: none;
  color: inherit;
}
.tresor-switcher {
  width: 100%;
  justify-content: space-between;
  gap: .65rem;
  min-height: calc(var(--control-min-h) + .35rem);
  padding: calc(var(--control-pad-y) + .15rem) calc(var(--control-pad-x) + .35rem);
  background: var(--bg-elev);
  border-radius: var(--radius-btn);
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.15;
  box-sizing: border-box;
  cursor: pointer;
}
.gen-tresor-picker.tresor-switcher .tresor-switcher-name {
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.15;
}
.gen-tresor-picker.tresor-switcher .tresor-switcher-chev .icon {
  width: 1.25rem;
  height: 1.25rem;
  opacity: .9;
}

.tresor-switcher-chev-btn { flex: 0 0 auto; }
.tresor-switcher-chev { display: inline-grid; flex: 0 0 auto; }
.tresor-switcher-chev .icon { width: 1.4rem; height: 1.4rem; opacity: .9; }
.tresor-switcher--title .tresor-switcher-chev,
.tresor-switcher--title:hover .tresor-switcher-chev,
.tresor-switcher--title:focus-visible .tresor-switcher-chev,
.tresor-switcher--title:active .tresor-switcher-chev {
  color: var(--accent);
}
.tresor-switcher--title .tresor-switcher-chev .icon {
  opacity: 1;
  color: inherit;
}
.topbar-with-back .topbar-actions { padding-top: 0; }
.tresor-switcher-page .topbar-actions .icon-btn.tresor-switcher-new-btn { color: var(--ink); }
.tresor-switcher-page .topbar-actions .icon-btn .icon { width: 1.35rem; height: 1.35rem; }
.tresor-switcher-page .icon-btn .icon svg,
.tresor-switcher-page .fab .icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tresor-switcher-backdrop {
  position: absolute;
  inset: 0;
  z-index: 125;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.42);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s var(--ease), visibility 0s .28s;
}
.app[data-tresor-switcher="open"] > .tresor-switcher-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .28s var(--ease), visibility 0s 0s;
}
body.tresor-switcher-open {
  overflow: hidden;
}
.tresor-switcher-page {
  position: absolute;
  inset: 0;
  z-index: 130;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
  transform: translateY(100%);
  opacity: 0;
  transition: transform .32s var(--ease), opacity .28s var(--ease), visibility 0s .32s;
  pointer-events: none;
  visibility: hidden;
}
.app[data-tresor-switcher="open"] .tresor-switcher-page {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: transform .32s var(--ease), opacity .28s var(--ease), visibility 0s 0s;
}

/* Meine Tresore */
.app:has(> .content.tresore-page) {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.app > .content.tresore-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding-top: .75rem;
  padding-bottom: .5rem;
}
.tresore-page {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 100%;
  gap: var(--stack-gap);
  box-sizing: border-box;
}
.tresore-list-wrap {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  margin: 0 calc(-1 * var(--pad));
}
.tresore-style-demos {
  display: grid;
  gap: 1.15rem;
  padding-bottom: .5rem;
}
.tresore-style-demos-lead {
  margin: 0 0 .15rem;
  font-size: var(--fs-meta);
  line-height: 1.45;
}
.tresore-style-demo,
.tresore-live-section {
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-btn);
  overflow: hidden;
  background: var(--bg);
}
.tresore-style-demo-head {
  padding: .7rem var(--pad) .55rem;
  border-bottom: var(--hair) solid var(--line);
  background: var(--bg-elev);
}
.tresore-style-demo-label {
  margin: 0;
  font-size: .92rem;
  font-weight: 750;
  letter-spacing: -.01em;
}
.tresore-style-demo-hint {
  margin: .2rem 0 0;
  font-size: var(--fs-meta);
  line-height: 1.4;
}
.tresore-style-preview .tresor-switcher-list { border-top: 0; }
.tresore-preview-row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 2.85rem;
  padding: .7rem var(--pad);
  box-sizing: border-box;
}
.tresore-live-section { margin-top: .25rem; }
.tresore-live-section .tresor-switcher-list { border-top: 0; }

.tresor-switcher-body {
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
  overflow: hidden;
  padding: 0 var(--pad) calc(.85rem + env(safe-area-inset-bottom));
  position: relative;
}
.tresor-switcher-list-wrap {
  min-height: 0;
  overflow: auto;
  margin: 0 calc(-1 * var(--pad));
}
.tresor-switcher-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--hair) solid var(--line);
}
.tresor-switcher-item-wrap { list-style: none; }
.tresor-switcher-item {
  display: flex;
  align-items: stretch;
  border-bottom: var(--hair) solid var(--line);
}
.tresor-switcher-select {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0 .15rem 0 var(--pad);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.tresor-switcher-select:active { opacity: .65; }
.tresor-switcher-row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 2.85rem;
  padding: .7rem .35rem .7rem var(--pad);
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.tresor-switcher-row:active { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.tresor-switcher-item > .tresor-switcher-row { flex: 1; }
.tresor-switcher-main {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  flex: 1;
}
.tresor-switcher-ico { display: inline-grid; flex: 0 0 auto; color: inherit; }
.tresor-switcher-ico svg { width: 1.25rem; height: 1.25rem; }
.tresor-switcher-title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tresor-switcher-item.is-selected {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.tresor-switcher-item.is-selected .tresor-switcher-row {
  background: transparent;
}
.tresor-switcher-item.is-selected .tresor-switcher-title { font-weight: 750; }
.tresor-switcher-indicator {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  color: var(--accent);
  box-sizing: border-box;
}
.tresor-switcher-indicator.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.tresor-switcher-indicator svg { width: .85rem; height: .85rem; }
.tresor-switcher-lock { flex: 0 0 auto; font-size: .9rem; opacity: .75; }
.tresor-switcher-edit {
  flex: 0 0 auto;
  align-self: stretch;
  width: calc(2.75rem + var(--pad));
  height: auto;
  min-height: 0;
  padding-right: var(--pad);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
}
.tresor-switcher-edit svg,
.tresor-switcher-edit .icon svg { width: 1.15rem; height: 1.15rem; }
.tresor-switcher-edit:active { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.tresor-switcher-empty { padding: 1.5rem var(--pad); }
.tresor-switcher-pair-link {
  margin: -.1rem var(--pad) .55rem;
}
.tresor-switcher-item-wrap:has(.tresor-switcher-pair-link) {
  border-bottom: var(--hair) solid var(--line);
}
.tresor-switcher-item-wrap:has(.tresor-switcher-pair-link) > .tresor-switcher-item {
  border-bottom: 0;
}
.tresor-switcher-foot { margin-top: .85rem; padding-top: .85rem; border-top: var(--hair) solid var(--line); display: grid; gap: .55rem; }
.tresor-switcher-page > .fab.fab--tresor-new,
.tresor-switcher-body > .fab.fab--tresor-new {
  position: absolute;
  right: 1rem;
  bottom: calc(.85rem + env(safe-area-inset-bottom));
  z-index: 5;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  text-decoration: none;
}
.tresor-switcher-body > .fab.fab--tresor-new .icon {
  width: 1.4rem;
  height: 1.4rem;
}

/* QR-Scanner */
body.qr-scan-open {
  overflow: hidden;
}
.qr-scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  backdrop-filter: blur(6px);
}
.qr-scan-overlay[hidden] {
  display: none !important;
}
.qr-scan-dialog {
  width: min(100%, 26rem);
  max-height: min(92vh, 40rem);
  overflow: auto;
  padding: 1.1rem 1.15rem 1.15rem;
  border-radius: var(--radius);
  border: var(--hair) solid var(--line);
  background: var(--bg-elev);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 18%, transparent);
  display: grid;
  gap: .85rem;
}
.qr-scan-head {
  display: grid;
  gap: .35rem;
}
.qr-scan-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 750;
}
.qr-scan-lead {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.45;
}
.qr-scan-viewport {
  position: relative;
  min-height: 16rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
}
.qr-scan-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 18rem;
  object-fit: cover;
}
.qr-scan-reader {
  width: 100%;
}
.qr-scan-reader video {
  border-radius: var(--radius-sm);
}
.qr-scan-status {
  margin: 0;
  text-align: center;
  font-size: var(--fs-meta);
  line-height: 1.45;
}
.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
  margin: .15rem 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: var(--hair);
  background: var(--line);
}
.auth-qr-hint {
  margin: -.15rem 0 .1rem;
  font-size: var(--fs-meta);
  line-height: 1.45;
}
.auth-recover-body {
  gap: .85rem;
}
.auth-method-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
  padding: .3rem;
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--ink) 4%, var(--chip));
  border: var(--hair) solid var(--line);
}
.auth-method-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .55rem;
  padding: .72rem .75rem;
  border: 0;
  border-radius: calc(var(--radius-btn) - .15rem);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.auth-method-tab:hover,
.auth-method-tab:focus-visible {
  color: var(--ink);
}
.auth-method-tab.is-active {
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 10%, transparent);
}
.auth-method-tab-icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, currentColor 10%, transparent);
  flex-shrink: 0;
}
.auth-method-tab.is-active .auth-method-tab-icon {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.auth-method-tab-icon .icon {
  width: 1.1rem;
  height: 1.1rem;
}
.auth-method-tab-label {
  min-width: 0;
}
.auth-method-panels {
  display: grid;
}
.auth-method-panel[hidden] {
  display: none !important;
}
.auth-method-panel {
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  animation: auth-method-in .2s ease;
}
@keyframes auth-method-in {
  from { opacity: 0; transform: translateY(.25rem); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-method-panel { animation: none; }
}
.auth-method-panel-inner {
  padding: 1rem .95rem 1.05rem;
  gap: .75rem;
}
.auth-method-lead {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--ink);
}
.auth-footnote {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.45;
  text-align: center;
}
/* Rechtliche Footer-Links (Login, Legal-Seiten, Profil) */
.auth-legal,
.legal-links,
.profile-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .5rem;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--muted);
}
.auth-legal a,
.legal-links a,
.profile-legal a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}
.auth-legal a:hover,
.auth-legal a:active,
.auth-legal a:focus-visible,
.auth-legal a:visited,
.auth-legal a.active,
.auth-legal a.is-active,
.auth-legal a[aria-current],
.legal-links a:hover,
.legal-links a:active,
.legal-links a:focus-visible,
.legal-links a:visited,
.legal-links a.active,
.legal-links a.is-active,
.legal-links a[aria-current],
.profile-legal a:hover,
.profile-legal a:active,
.profile-legal a:focus-visible,
.profile-legal a:visited,
.profile-legal a.active,
.profile-legal a.is-active,
.profile-legal a[aria-current] {
  color: var(--muted);
  text-decoration: none;
  background: none;
  opacity: 1;
}
.legal-sep {
  color: var(--muted);
  user-select: none;
}
body.page-auth .auth-legal {
  margin-top: auto;
  padding-top: 1.25rem;
  width: 100%;
  max-width: min(100%, 30rem);
  align-self: center;
}
.legal-content-foot {
  margin-top: 2rem;
  padding-top: .35rem;
}

.auth-footnote a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.btn .icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: .35em;
  vertical-align: -.15em;
}

/* Vault list skeleton loading */
.vault-list-skeleton .item-list {
  pointer-events: none;
}
.vault-list-skeleton-card {
  cursor: pointer;
}
.vault-list-skeleton-card:hover {
  background: transparent;
  border-left-color: var(--line);
}
.skeleton-line,
.skeleton-badge,
.skeleton-chip {
  display: block;
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--ink) 6%, var(--chip));
  position: relative;
  overflow: hidden;
}
.skeleton-line::after,
.skeleton-badge::after,
.skeleton-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--ink) 10%, transparent) 45%,
    color-mix(in srgb, var(--ink) 14%, transparent) 55%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.35s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line::after,
  .skeleton-badge::after,
  .skeleton-chip::after {
    animation: none;
    opacity: .35;
  }
}
.skeleton-title {
  height: 1.15rem;
  width: 62%;
  max-width: 14rem;
}
.skeleton-title-short {
  width: 42%;
}
.skeleton-badge {
  height: calc(var(--badge-min-h) + .15rem);
  flex: 0 0 auto;
}
.skeleton-badge-sm { width: 4.5rem; }
.skeleton-badge-md { width: 6.5rem; }
.skeleton-badge-lg { width: 2.75rem; }
.skeleton-chip {
  height: 1.55rem;
  width: 4.2rem;
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
}
.skeleton-chip-short { width: 2.8rem; }

[data-pair-panel][hidden] {
  display: none !important;
}
.pair-actions {
  display: grid;
  gap: .5rem;
}



/* Tresor-Detail — Tabs (Unterstrich, Primärfarbe) */
.tresor-detail-tabs {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--section-gap);
  align-items: start;
}
.tresor-tab-bar {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: flex-end;
  margin: 0 calc(-1 * var(--pad));
  padding: 0 var(--pad);
  border-bottom: var(--hair) solid var(--line);
}
.tresor-tab-panel {
  grid-row: 2;
  grid-column: 1;
  min-width: 0;
}
.tresor-api-keys-section {
  display: grid;
  gap: var(--section-gap);
}
.tresor-api-keys-header {
  display: grid;
  gap: calc(var(--section-gap) * .65);
}
.tresor-api-keys-header .section-title {
  margin: 0;
}
.tresor-api-keys-lead {
  margin: 0;
  line-height: 1.45;
}
.tresor-tab {
  position: relative;
  margin: 0;
  padding: .5rem 0 .62rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.tresor-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
  border-radius: 2px 2px 0 0;
}
.tresor-tab:hover,
.tresor-tab:focus-visible {
  color: var(--ink);
}
.tresor-tab.is-active {
  color: var(--ink);
  font-weight: 750;
}
.tresor-tab.is-active::after {
  background: var(--accent);
}
.tresor-tab-panel[hidden] {
  display: none !important;
}
.tresor-name-block [data-tresor-save] {
  margin-top: .35rem;
  margin-bottom: 0;
}

.tresor-color-block {
  margin-top: 1cm;
  margin-bottom: 1cm;
}
.tresor-color-block .item-color-field {
  margin: 0;
  padding-top: 0;
}
.tresor-role-line {
  margin: 0;
  font-size: var(--fs-meta);
}
.tresor-owner-wrap {
  margin-top: calc(var(--section-gap) * 1.1);
  display: grid;
  gap: calc(var(--section-gap) * 1.1);
}
.tresor-owner-section {
  display: grid;
  gap: .45rem;
}
.tresor-owner-section + .tresor-transfer-wrap {
  margin-top: 0;
}
.tresor-transfer-wrap {
  margin-top: calc(var(--section-gap) * 1.1);
  padding-top: calc(var(--section-gap) * .85);
  border-top: var(--hair) solid var(--line);
  display: grid;
  gap: .45rem;
}
.tresor-transfer-title {
  margin: 0;
}

.tresor-desc-input {
  display: block;
  width: 100%;
  margin-top: .15rem;
  min-height: 4.5rem;
  resize: vertical;
  line-height: 1.45;
  font-weight: 500;
}
.tresor-desc-hint {
  margin: .35rem 0 0;
  font-size: var(--fs-meta);
  line-height: 1.4;
}
.tresor-name-block [data-tresor-save]:not(:disabled) {

  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
[data-auth-panel="recover"] [data-auth-recover-submit]:not(:disabled) {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.tresor-detail-actions {
  display: grid;
  gap: .65rem;
  margin-top: calc(var(--section-gap) * 1.35);
  padding-top: calc(var(--section-gap) * .85);
  border-top: var(--hair) solid var(--line);
}
.tresor-detail-actions .tresor-ref-hint {
  margin: 0 0 .15rem;
  text-align: left;
  justify-self: start;
}
.tresor-detail-actions .btn {
  min-height: var(--control-min-h);
  padding: var(--control-pad-y) var(--control-pad-x);
  font-size: var(--fs-btn);
  border-radius: var(--radius-btn);
  box-sizing: border-box;
}

/* Tresor — Aktivitäten (Audit-Log) */
.audit-activity-wrap {
  margin: .35rem calc(-1 * var(--pad)) 0;
}
.audit-activity-list,
.audit-activity-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.audit-activity-list {
  border-top: var(--hair) solid var(--line);
}
.audit-activity-day {
  list-style: none;
}
.audit-activity-day-label {
  margin: 0;
  padding: .5rem var(--pad) .35rem;
  font-size: var(--fs-meta);
  font-weight: 650;
  color: var(--muted);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border-bottom: var(--hair) solid var(--line);
}
.audit-activity-item {
  list-style: none;
  border-bottom: var(--hair) solid var(--line);
}
.audit-activity-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .45rem;
  padding: .62rem var(--pad);
  min-height: 2.75rem;
  box-sizing: border-box;
}
.audit-activity-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .24rem;
}
.audit-activity-action {
  font-size: var(--fs-body);
  font-weight: 650;
  line-height: 1.28;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.audit-activity-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .28rem;
}
.audit-activity-time {
  flex: 0 0 auto;
  font-size: var(--fs-meta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 2.6rem;
}
.audit-activity-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: calc(var(--badge-min-h) * .82);
  padding: .12rem .42rem;
  border-radius: var(--radius-btn);
  font-size: calc(var(--fs-meta) * .9);
  font-weight: 600;
  line-height: 1.2;
  background: var(--chip);
  color: color-mix(in srgb, var(--ink) 68%, var(--muted));
  border: var(--hair) solid color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-activity-chip--source {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  color: color-mix(in srgb, var(--accent) 78%, var(--ink));
}
.audit-activity-chip--ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(var(--fs-meta) * .86);
  letter-spacing: .02em;
}
.audit-activity-entry {
  flex: 0 0 auto;
  align-self: center;
  max-width: 42%;
}
.audit-activity-empty {
  margin: 0;
  padding: 1.35rem var(--pad);
  text-align: center;
}
.audit-filter-bar {
  margin: 0 0 .45rem;
}
.audit-filter-field {
  display: grid;
  gap: .35rem;
}
.audit-filter-label {
  font-size: var(--fs-meta);
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.audit-filter-select.gen-tresor-select {
  width: 100%;
  font-size: var(--fs-body);
  font-weight: 650;
  min-height: var(--control-min-h);
  padding-top: var(--control-pad-y);
  padding-bottom: var(--control-pad-y);
  background-color: var(--input);
  border: var(--hair) solid color-mix(in srgb, var(--ink) 12%, transparent);
}
html[data-theme="dark"] .audit-filter-select.gen-tresor-select {
  background-color: var(--bg-elev);
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
}
html[data-theme="dark"] .audit-filter-select.gen-tresor-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b8b8' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Tresor detail — Sektionen / Zonen */
.tresor-detail-page {
  display: grid;
  gap: calc(var(--section-gap) * 1.35);
  padding-top: calc(var(--section-gap) * 0.45);
}
.tresor-detail-section {
  padding: calc(var(--pad) * .85);
  border-radius: var(--radius-sm);
  border: var(--hair) solid var(--line);
  background: var(--bg-elev);
}
.tresor-detail-section .section-title {
  margin: var(--label-mt) 0 calc(var(--section-gap) * .35);
  padding-bottom: calc(var(--section-gap) * .55);
  border-bottom: var(--hair) solid var(--line);
  font-size: var(--label-fs);
  font-weight: var(--label-weight-strong);
  color: var(--label-color-strong);
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
  line-height: 1.3;
}
.tresor-detail-section .field {
  padding: 0;
  border-bottom: 0;
}
.tresor-detail-section label {
  gap: .45rem;
}
.tresor-save-hint {
  margin: 0;
  font-size: var(--fs-meta);
}
.tresor-save-hint.ok { color: var(--accent); }
.tresor-save-hint.is-error { color: var(--danger); }
.tresor-ref-hint {
  margin: 0;
  font-size: var(--fs-meta);
}
.tresor-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  letter-spacing: .04em;
  font-weight: 600;
}

.tresor-owner-card {
  padding: .75rem .85rem;
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--ink) 3%, var(--bg));
  border: var(--hair) solid var(--line);
  display: grid;
  gap: .2rem;
}
.tresor-owner-label { margin: 0; }
.tresor-owner-name {
  margin: 0;
  font-size: calc(var(--fs-title) * 1.02);
  font-weight: 750;
  letter-spacing: -.02em;
}
.tresor-role-hint { margin: .15rem 0 0; font-size: var(--fs-meta); }
.tresor-transfer-lead { margin: 0 0 .35rem; font-size: var(--fs-meta); line-height: 1.45; }
.tresor-transfer-list {
  display: grid;
  gap: .45rem;
}
[data-tresor-grant-list] .tresor-transfer-item {
  grid-template-columns: auto 1fr auto;
}
.tresor-transfer-action {
  font-size: var(--fs-meta);
  font-weight: 600;
  white-space: nowrap;
}
.tresor-device-role {
  font-size: var(--fs-meta);
  line-height: 1.35;
}
.tresor-transfer-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--ink) 3%, var(--bg));
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.tresor-transfer-item:hover,
.tresor-transfer-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.tresor-transfer-device {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
}
.tresor-transfer-device .icon { width: 1.15rem; height: 1.15rem; }
.tresor-device-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}
.tresor-device-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--ink) 3%, var(--bg));
}
.tresor-device-item.is-current {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
}
.tresor-device-icon {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
}
.tresor-device-icon .icon { width: 1.15rem; height: 1.15rem; }
.tresor-device-main {
  display: grid;
  gap: .15rem;
  min-width: 0;
}
.tresor-device-label {
  font-weight: 650;
  font-size: var(--fs-body);
}
.tresor-device-action {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
.tresor-device-current {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--accent);
}
.tresor-device-current .icon {
  width: 1.1rem;
  height: 1.1rem;
}
.tresor-device-revoke {
  flex-shrink: 0;
}

.tresor-device-add {
  margin-top: 0.3cm;
  margin-bottom: 1cm;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  border: var(--hair) solid var(--accent);
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  color: var(--ink);
  font-weight: 650;
  text-align: left;
}
.tresor-device-add .tresor-device-icon {
  color: var(--accent);
}
.tresor-device-add:hover,
.tresor-device-add:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
}
.tresor-device-add-label {
  font-size: var(--fs-body);
}
.tresor-device-badge {
  display: inline-flex;
  align-self: start;
  padding: .1rem .4rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: var(--fs-meta);
  font-weight: 700;
}

/* Recovery-Blatt drucken */
.recovery-print-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--pad);
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  backdrop-filter: blur(6px);
}
.recovery-print-overlay[hidden] {
  display: none !important;
}
.recovery-print-dialog {
  width: min(100%, 24rem);
  display: grid;
  gap: .85rem;
  padding: 1rem 1.05rem;
  border-radius: var(--radius-sm);
  border: var(--hair) solid var(--line);
  background: var(--bg-elev);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--bg) 55%, transparent);
}
.recovery-print-dialog-title {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
}
.recovery-print-dialog-lead {
  margin: .35rem 0 0;
  font-size: var(--fs-meta);
  line-height: 1.4;
}
.recovery-print-warn-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .45rem;
  font-size: var(--fs-meta);
  line-height: 1.45;
}
.recovery-print-confirm {
  margin: 0;
  font-size: var(--fs-meta);
}
.recovery-print-sheet {
  display: none;
}
.recovery-print-frame {
  box-sizing: border-box;
  width: 100%;
  max-width: 18cm;
  margin: 0 auto;
  padding: 1rem 1.1rem;
  border: 2px solid #000;
}
.recovery-print-inner {
  display: block;
}
body.is-printing-recovery .recovery-print-sheet {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
  margin: 0;
  padding: 1.5rem;
  box-sizing: border-box;
  overflow: auto;
  color: #000;
  background: #fff;
}
body.is-printing-recovery .recovery-print-sheet,
body.is-printing-recovery .recovery-print-sheet * {
  color: #000;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
body.is-printing-recovery .recovery-print-sheet[hidden] {
  display: block;
}
.recovery-print-title {
  margin: 0 0 .5rem;
  font-size: 1.35rem;
  font-weight: 700;
}
.recovery-print-meta {
  margin: .2rem 0;
  font-size: 10.5pt;
}
.recovery-print-footer {
  margin-top: 1.25rem;
  font-size: 9pt;
  line-height: 1.4;
  opacity: .75;
}
.recovery-print-words {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem 1rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11pt;
  line-height: 1.35;
}
.recovery-print-words li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.recovery-print-i {
  flex: 0 0 1.75em;
  opacity: .55;
  font-size: .9em;
  text-align: right;
}
.recovery-print-w {
  font-weight: 600;
  letter-spacing: .02em;
  word-break: break-word;
}
.recovery-print-warn-box {
  margin-top: 1rem;
  padding: .65rem .75rem;
  border: 1px solid #ccc;
  font-size: 10pt;
  line-height: 1.4;
  background: #fff;
}
@media print {
  @page {
    margin: 1.2cm;
  }
  html,
  body {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
    overflow: visible !important;
  }
  body.is-printing-recovery > *:not(.recovery-print-sheet) {
    display: none !important;
    visibility: hidden !important;
  }
  body.is-printing-recovery .recovery-print-sheet,
  body.is-printing-recovery .recovery-print-sheet[hidden] {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000 !important;
    background: #fff !important;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.is-printing-recovery .recovery-print-sheet * {
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.is-printing-recovery .recovery-print-warn-box,
  body.is-printing-recovery .recovery-print-frame {
    background: #fff !important;
  }
  body.is-printing-recovery .recovery-print-frame {
    border-color: #000 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tresor-switcher-page,
  .tresor-switcher-backdrop {
    transition: none !important;
  }
}

/* empty-state — welcome / filter */
:root {
  --accent-green: #16a34a;
}
html[data-theme="dark"] {
  --accent-green: #4ade80;
}

.content.content--empty {
  display: flex;
  flex-direction: column;
}
.content.content--empty .list-filters {
  flex: 0 0 auto;
}
.content.content--empty .search {
  flex: 0 0 auto;
}

.empty-state {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 0 2.5rem;
  min-height: min(34rem, calc(100dvh - var(--bottom-nav-h) - 10.5rem));
}
.empty-state--welcome {
  justify-content: flex-start;
  padding-top: clamp(1.25rem, 16dvh, 5.5rem);
  padding-bottom: 1.5rem;
}
.empty-state-card {
  width: min(100%, 22rem);
  padding: 2rem 1.35rem 1.75rem;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: var(--hair) solid var(--line);
}
.empty-state-icon {
  width: 4.25rem;
  height: 4.25rem;
  margin: 0 auto 1.15rem;
  display: grid;
  place-items: center;
  border-radius: calc(var(--radius) + 2px);
  color: var(--accent-green);
  background: color-mix(in srgb, var(--accent-green) 14%, var(--bg));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent-green) 32%, transparent),
    0 10px 28px color-mix(in srgb, var(--accent-green) 10%, transparent);
}
.empty-state-icon .icon {
  width: 2rem;
  height: 2rem;
}
.empty-state--filter .empty-state-icon {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, var(--bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent);
}
.empty-state-title {
  font-size: calc(var(--fs-title) * 1.12);
  line-height: 1.2;
  margin: 0 0 .55rem;
  letter-spacing: -0.02em;
}
.empty-state-lead {
  margin: 0 auto;
  max-width: 18rem;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--muted);
}
.empty-state-cta {
  margin-top: 1.35rem;
  width: 100%;
  min-height: calc(var(--control-min-h) + .55rem);
  font-size: calc(var(--fs-btn) * 1.02);
}
.empty-state-cta .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.empty-state-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  margin-top: .85rem;
  color: var(--accent);
  font-weight: 700;
  font-size: calc(var(--fs-meta) * 1.05);
  text-decoration: none;
  min-height: calc(var(--badge-min-h) + .25rem);
}
.empty-state-cta-secondary .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.app[data-home-empty="welcome"] > .fab,
.app[data-home-empty="welcome"] > .fab-dial {
  visibility: hidden;
  pointer-events: none;
}


.content.content--has-list {
  display: flex;
  flex-direction: column;
}
.content.content--has-list .list-filters,
.content.content--has-list .search-row {
  flex: 0 0 auto;
}
#vault-list-mount {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: min(28rem, calc(100dvh - var(--bottom-nav-h) - 12rem));
}
.vault-list-skeleton {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: min(20rem, calc(100dvh - var(--bottom-nav-h) - 12rem));
  color: var(--muted);
  text-align: center;
}
.vault-list-skeleton[hidden] {
  display: none !important;
}
.vault-list-error {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: min(20rem, calc(100dvh - var(--bottom-nav-h) - 12rem));
  color: var(--muted);
  text-align: center;
}
.vault-list-error[hidden] {
  display: none !important;
}

#vault-list-mount[data-list-state="error"] .vault-list-error {
  display: flex !important;
}

.vault-list-empty[hidden],
#vault-list-mount > .item-list[hidden] {
  display: none !important;
}
#vault-list-mount[data-list-state="list"] > .vault-list-empty,
#vault-list-mount[data-list-state="loading"] > .vault-list-empty,
#vault-list-mount[data-list-state="error"] > .vault-list-empty {
  display: none !important;
}
#vault-list-mount[data-list-state="filter"] > .item-list,
#vault-list-mount[data-list-state="welcome"] > .item-list,
#vault-list-mount[data-list-state="loading"] > .item-list,
#vault-list-mount[data-list-state="error"] > .item-list {
  display: none !important;
}
#vault-list-mount[data-list-state="loading"] .vault-list-skeleton {
  display: flex !important;
}
#vault-list-mount .empty-state {
  min-height: min(28rem, calc(100dvh - var(--bottom-nav-h) - 12rem));
}
.vault-list-welcome[hidden] {
  display: none !important;
}
#vault-list-mount[data-list-state="welcome"] > .vault-list-welcome:not([hidden]) {
  display: flex !important;
}
#vault-list-mount[data-list-state="welcome"] > .vault-list-empty {
  display: none !important;
}



.actions.item-form-actions,
.actions.folder-form-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--chip-gap);
}
.actions.item-form-actions .delete-form,
.actions.folder-form-actions .delete-form {
  flex: 0 0 auto;
}
.actions.item-form-actions .icon-btn,
.actions.folder-form-actions .icon-btn {
  flex: 0 0 auto;
}
.actions.item-form-actions .btn.primary,
.actions.folder-form-actions .btn.primary {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}


.move-tresor-list {
  max-height: min(50vh, 18rem);
  overflow: auto;
  margin: 0;
  padding: 0;
}
.move-dialog .move-busy,
.move-dialog .move-empty {
  margin: 0;
  text-align: center;
}

/* Team-Einladung (#8) */
.tresor-members-lead { margin: 0 0 .5rem; font-size: var(--fs-meta); line-height: 1.45; }
.tresor-member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}
.tresor-member-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--ink) 3%, var(--bg));
}
.tresor-member-main { display: grid; gap: .15rem; min-width: 0; }
.tresor-member-name {
  font-weight: 650;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tresor-member-meta { font-size: var(--fs-meta); line-height: 1.35; }
.tresor-member-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.tresor-member-role-toggle {
  display: inline-flex;
  align-items: stretch;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-btn);
  overflow: hidden;
  background: var(--bg-elev);
  flex-shrink: 0;
}
.tresor-role-chip {
  border: 0;
  margin: 0;
  padding: .4rem .55rem;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.tresor-role-chip + .tresor-role-chip {
  border-left: var(--hair) solid var(--line);
}
.tresor-role-chip.is-active {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev));
  color: var(--ink);
}
.tresor-role-chip:hover,
.tresor-role-chip:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
}
.tresor-invite-wrap .gen-tresor-select {
  width: 100%;
  margin-top: .15rem;
}
@media (max-width: 480px) {
  .tresor-member-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .tresor-member-actions {
    justify-content: space-between;
    width: 100%;
  }
}
.tresor-invite-wrap {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: var(--hair) solid var(--line);
}
.tresor-backup-status.is-warn { color: var(--danger); }

/* entry extras (stage 2) */
.item-extras-field { margin-top: .15rem; }
.item-extras-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  margin-bottom: .35rem;
}
.item-extras-list { gap: .5rem; }
.item-extras-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.9fr) minmax(6rem, 1.4fr) auto;
  gap: .4rem;
  align-items: center;
}
.item-extras-row input {
  width: 100%;
  min-width: 0;
}
.item-extras-remove {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  padding: .35rem .45rem;
}
.item-extras-other {
  margin-top: .45rem;
  padding-top: .35rem;
  border-top: 1px solid var(--hairline, rgba(255,255,255,.08));
}
.item-extras-other-line {
  font-size: .88rem;
  color: var(--text-muted, #9ca3af);
  padding: .2rem 0;
}
/* Symbol-Gruppe Icons vergrößern */ .input-row .icon-btn .icon { width: 1.8rem !important; height: 1.8rem !important; }


/* folder browser list (file-manager style) */
.item-list--browser {
  gap: 0;
  border: var(--hair) solid var(--line);
  border-radius: calc(var(--radius-btn) + 2px);
  overflow: hidden;
  background: var(--bg);
}
.browser-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  background: var(--bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  list-style: none;
}
.browser-row + .browser-row {
  border-top: var(--hair) solid var(--line);
}
.browser-row::before {
  display: none;
}
.browser-row-main,
.browser-row-link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .75rem;
  min-width: 0;
  padding: .72rem .85rem;
  color: inherit;
  text-decoration: none;
}
.browser-row--entry .browser-row-main,
.browser-row--entry .browser-row-link {
  align-items: start;
}
.browser-row-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
}
.browser-row-icon .item-icon,
.browser-row-icon .item-icon-filter,
.browser-row-icon .item-icon-filter .item-icon {
  width: 1.65rem;
  height: 1.65rem;
}
.browser-folder-ico {
  color: #e8b923;
}
.browser-row-text {
  display: grid;
  gap: .18rem;
  min-width: 0;
}
.browser-row-title {
  font-weight: 700;
  font-size: calc(var(--fs-title) * 1.02);
  line-height: 1.2;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-row-meta {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.25;
}
.browser-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .28rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.browser-row-badges .badge {
  min-height: calc(var(--badge-min-h) * .88);
  font-size: calc(var(--fs-meta) * .92);
  padding: .18rem .5rem;
}
.browser-row-menu,
.browser-row-fav {
  align-self: center;
  margin-right: .35rem;
  color: var(--muted);
}
.browser-row-fav {
  grid-column: auto;
  grid-row: auto;
  margin-right: 0;
  position: static;
}
.browser-row--entry {
  position: relative;
}
.browser-row--folder .browser-row-main:active,
.browser-row--entry .browser-row-main:active,
.browser-row--folder .browser-row-link:active,
.browser-row--entry .browser-row-link:active {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
html[data-theme="dark"] .item-list--browser {
  background: color-mix(in srgb, var(--bg-elev) 88%, var(--ink));
}
html[data-theme="dark"] .browser-row {
  background: transparent;
}
.vault-list--browse + .empty-state,
#vault-list-mount.vault-list--browse .vault-list-empty,
#vault-list-mount.vault-list--browse .vault-list-welcome {
  margin-top: .5rem;
}
@media (max-width: 420px) {
  .browser-row-main,
  .browser-row-link {
    gap: .6rem;
    padding: .65rem .7rem;
  }
  .browser-row-badges .badge-text {
    max-width: 8.5rem;
  }
}

/* Issue #26: meta line 2, no fav/menu overlap */
.browser-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.browser-row--folder {
  grid-template-columns: minmax(0, 1fr) auto;
}
.browser-row--entry .browser-row-text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .14rem;
  min-width: 0;
}
.browser-row--entry .browser-row-title {
  order: 1;
}
.browser-row--entry .browser-row-badges {
  order: 2;
  flex-wrap: wrap;
  margin-top: 0;
  min-width: 0;
  overflow: visible;
}
.browser-row--entry .browser-row-meta {
  order: 3;
}
.browser-row--folder .browser-row-title {
  font-weight: 650;
}

/* Secrets list — Tresore flat row style */
#vault-list-mount > .item-list {
  gap: 0;
  margin: 0 calc(-1 * var(--pad));
  padding: 0;
  list-style: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
#vault-list-mount > .item-list .browser-row {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  list-style: none;
  border-bottom: var(--hair) solid var(--line);
  position: static;
  transition: background .12s var(--ease);
}
#vault-list-mount > .item-list .browser-row::before {
  display: none;
}
#vault-list-mount > .item-list .browser-row-link {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: center;
  gap: calc(.55rem + 5px);
  min-height: 2.85rem;
  padding: .7rem .35rem .7rem var(--pad);
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-link,
#vault-list-mount > .item-list .browser-row--folder .browser-row-link {
  align-items: start;
  padding-top: .65rem;
  padding-bottom: .65rem;
}
#vault-list-mount > .item-list .browser-row-link:active {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  opacity: 1;
}
#vault-list-mount > .item-list .browser-row-icon {
  grid-column: 1;
  display: grid;
  place-items: center;
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-icon,
#vault-list-mount > .item-list .browser-row--folder .browser-row-icon {
  margin-top: .08rem;
  align-self: start;
}
#vault-list-mount > .item-list .browser-row-icon .item-icon {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
}
#vault-list-mount > .item-list .browser-row.has-item-color .browser-row-icon .item-icon {
  color: var(--item-color, var(--ink));
}
#vault-list-mount > .item-list .browser-row-icon .item-icon-filter,
#vault-list-mount > .item-list .browser-row-icon .item-icon-filter .item-icon,
#vault-list-mount > .item-list .browser-row-icon .icon,
#vault-list-mount > .item-list .browser-row-icon .icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
#vault-list-mount > .item-list .browser-row-icon img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  border-radius: 3px;
}
#vault-list-mount > .item-list .browser-row-text {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}
#vault-list-mount > .item-list .browser-row-meta {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.25;
}
#vault-list-mount > .item-list .browser-row-meta--desc,
#vault-list-mount > .item-list .browser-row-meta--multiline {
  white-space: pre-line;
  overflow: visible;
  text-overflow: unset;
}
#vault-list-mount > .item-list .browser-row-title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#vault-list-mount > .item-list .browser-row-badges {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .28rem;
  margin-top: .08rem;
  padding: 0;
  border: 0;
  background: transparent;
}
#vault-list-mount > .item-list .browser-row-badges .badge {
  min-height: calc(var(--badge-min-h) * .82);
  font-size: calc(var(--fs-meta) * .9);
  font-weight: 600;
  padding: .14rem .42rem;
  flex: 0 0 auto;
  max-width: none;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-title {
  order: 1;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-badges {
  order: 2;
  min-width: 0;
  overflow: hidden;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-meta {
  order: 3;
}
#vault-list-mount > .item-list .browser-row--folder {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border-bottom-color: color-mix(in srgb, var(--ink) 22%, transparent);
}
#vault-list-mount > .item-list .browser-row--folder .browser-row-link {
  align-items: center;
  min-height: 2.85rem;
  padding-top: .7rem;
  padding-bottom: .7rem;
}
#vault-list-mount > .item-list > .browser-row--folder:first-child {
  margin-top: 10px;
}
#vault-list-mount > .item-list > .browser-row--folder:has(+ .browser-row--entry) {
  margin-bottom: 30px;
}
#vault-list-mount > .item-list > .browser-row--folder:last-child {
  margin-bottom: 10px;
}
#vault-list-mount > .item-list > .browser-row:first-child {
  border-top: var(--hair) solid color-mix(in srgb, var(--ink) 22%, transparent);
}
#vault-list-mount > .item-list > .browser-row--folder + .browser-row--entry {
  border-top: var(--hair) solid var(--line);
}
#vault-list-mount > .item-list .browser-row--folder .browser-row-menu {
  width: 2.5rem;
  padding-right: 0;
}
#vault-list-mount > .item-list .browser-row--folder .browser-row-menu--delete {
  width: calc(2.5rem + var(--pad));
  padding-right: var(--pad);
  color: var(--danger);
}
#vault-list-mount > .item-list .browser-row-badges .badge-url {
  min-width: 0;
  overflow: hidden;
}
#vault-list-mount > .item-list .browser-row-badges .badge-url .badge-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(12rem, 42vw);
}
#vault-list-mount > .item-list .browser-row-badges .badge-user { order: 1; }
#vault-list-mount > .item-list .browser-row-badges .badge-secret { order: 2; }
#vault-list-mount > .item-list .browser-row-badges .badge-url { order: 3; }
#vault-list-mount > .item-list .browser-row-menu,
#vault-list-mount > .item-list .browser-row-fav {
  flex: 0 0 auto;
  align-self: stretch;
  height: auto;
  min-height: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  margin: 0;
  position: static;
  color: var(--muted);
}
#vault-list-mount > .item-list .browser-row-fav {
  width: calc(2.1rem + var(--pad));
  padding-left: .45rem;
  padding-right: calc(var(--pad) + .25rem);
  justify-items: end;
}
#vault-list-mount > .item-list .browser-row-menu {
  width: calc(2.75rem + var(--pad));
  padding-right: var(--pad);
}
#vault-list-mount > .item-list .browser-row-fav.is-active {
  color: var(--accent);
}
#vault-list-mount > .item-list .browser-row-menu .icon svg,
#vault-list-mount > .item-list .browser-row-fav .icon svg {
  width: 1.15rem;
  height: 1.15rem;
}
#vault-list-mount > .item-list .browser-row-menu:active,
#vault-list-mount > .item-list .browser-row-fav:active {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
#vault-list-mount > .item-list .browser-folder-ico {
  color: #e8b923;
}
html[data-theme="dark"] #vault-list-mount > .item-list .browser-row {
  background: transparent;
}
@media (max-width: 420px) {
  #vault-list-mount > .item-list .browser-row-link {
    padding-left: calc(var(--pad) * .85);
  }
  #vault-list-mount > .item-list .browser-row-badges .badge-text {
    max-width: 8.5rem;
  }
}


/* Entry-Row Layout: replaced by compact flex block below */


.tags-page [data-vault-folder-list] .browser-row {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  list-style: none;
  border-bottom: var(--hair) solid var(--line);
}
.tags-page [data-vault-folder-list] .browser-row-link {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
  min-height: 2.85rem;
  padding: .7rem .35rem .7rem var(--pad);
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.tags-page [data-vault-folder-list] .browser-row--folder .browser-row-link {
  align-items: start;
}
.tags-page [data-vault-folder-list] .browser-row-link:active {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  opacity: 1;
}
.tags-page [data-vault-folder-list] .browser-row-icon {
  display: grid;
  place-items: center;
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
}
.tags-page [data-vault-folder-list] .browser-row-icon .icon,
.tags-page [data-vault-folder-list] .browser-row-icon .icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.tags-page [data-vault-folder-list] .browser-row-text {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}
.tags-page [data-vault-folder-list] .browser-row-title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tags-page [data-vault-folder-list] .browser-row-action {
  flex: 0 0 auto;
  align-self: stretch;
  height: auto;
  min-height: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  margin: 0;
  width: calc(2.75rem + var(--pad));
  padding-right: var(--pad);
  color: var(--muted);
}
.tags-page [data-vault-folder-list] .browser-row-action--last {
  width: calc(2.1rem + var(--pad));
  padding-right: calc(var(--pad) + .25rem);
  justify-items: end;
}
.tags-page [data-vault-folder-list] .browser-row-action .icon svg {
  width: 1.15rem;
  height: 1.15rem;
}
.tags-page [data-vault-folder-list] .browser-row-action:active {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
html[data-theme="dark"] .tags-page [data-vault-folder-list] .browser-row {
  background: transparent;
}

/* agent-key-create-page */
.agent-key-create-flow {
  display: grid;
  gap: 0;
}
.agent-key-create-step[hidden] {
  display: none !important;
}
.agent-key-success-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.35rem;
  counter-reset: agent-key-step;
}
.agent-key-success-step {
  display: grid;
  gap: .5rem;
  padding-left: 2.85rem;
  position: relative;
}
.agent-key-success-step::before {
  counter-increment: agent-key-step;
  content: counter(agent-key-step);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-meta);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}
.agent-key-success-step-title {
  font-size: var(--fs-body);
  font-weight: 650;
  line-height: 1.3;
}
.agent-key-create-step .auth-warn-card {
  margin-top: .35rem;
  margin-left: 2.85rem;
  padding: .75rem .85rem;
  background: color-mix(in srgb, var(--danger) 24%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--danger) 58%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 12%, transparent);
}
.agent-key-create-step .auth-warn-text {
  padding-left: 0;
  color: var(--danger);
  font-weight: 650;
  opacity: 1;
}

.agent-key-credential-details {
  margin-top: 0.75rem;
}
.agent-key-credential-details summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted, #666);
}
.agent-key-cmdkey {
  margin: 0.5rem 0 0;
  padding: 0.75rem;
  border-radius: 8px;
  background: var(--surface-2, #f4f4f5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
html[data-theme="dark"] .agent-key-cmdkey {
  background: var(--surface-2, #1e1e22);
}

.agent-key-credential-keyring-hint {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
}

.agent-key-enroll {
  display: grid;
  gap: 0.85rem;
}
.agent-key-enroll-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}
.agent-key-enroll-tab {
  appearance: none;
  border: var(--hair) solid var(--line);
  background: var(--surface, #fff);
  color: var(--ink);
  border-radius: 10px;
  padding: 0.7rem 0.5rem;
  font-weight: 650;
  cursor: pointer;
}
.agent-key-enroll-tab[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}
.agent-key-enroll-card {
  display: grid;
  gap: 0.65rem;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 14px;
  border: var(--hair) solid var(--line);
  background: color-mix(in srgb, var(--surface, #fff) 88%, var(--accent) 12%);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 8%, transparent);
}
.agent-key-enroll-card[hidden] {
  display: none !important;
}
.agent-key-enroll-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
}
.agent-key-enroll-cmd {
  font-size: 0.92rem;
  min-height: 5.5rem;
  padding: 1rem;
}
html[data-theme="dark"] .agent-key-enroll-tab {
  background: var(--surface-2, #1e1e22);
}
html[data-theme="dark"] .agent-key-enroll-card {
  background: color-mix(in srgb, var(--surface, #1a1a1a) 82%, var(--accent) 18%);
}
.agent-key-card-meta-pair--full {
  grid-column: 1 / -1;
}
.agent-key-card-meta-item.agent-key-card-meta-wide,
.agent-key-card-meta-pair--full dd {
  white-space: normal;
}

.agent-key-plain {
  margin: 0;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  border: var(--hair) solid var(--line);
  background: var(--surface, #fff);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 12rem;
  overflow: auto;
  min-height: 3rem;
}
html[data-theme="dark"] .agent-key-plain {
  background: color-mix(in srgb, var(--surface, #1a1a1a) 72%, #fff 28%);
  border-color: color-mix(in srgb, var(--line) 70%, #fff 30%);
}

/* agent-key list cards */
.agent-key-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.agent-key-card-list[hidden] { display: none !important; }
.agent-key-card {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--radius, 12px);
  padding: 0.72rem 0.85rem;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface, #fff));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}
html[data-theme="dark"] .agent-key-card {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface, #161618));
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
.agent-key-card.is-inactive { opacity: 0.78; }
.agent-key-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.agent-key-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
  word-break: break-word;
}
.agent-key-status-badge {
  flex: 0 0 auto;
  cursor: default;
  pointer-events: none;
  min-height: calc(var(--badge-min-h) * .88);
  padding: calc(var(--control-pad-y) * .45) calc(var(--control-pad-x) * .85);
  font-size: calc(var(--fs-meta) - 2px);
}
.agent-key-status-badge.is-active {
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  color: color-mix(in srgb, var(--accent) 82%, var(--ink));
}
.agent-key-status-badge.is-paused {
  background: color-mix(in srgb, var(--warn, #b8860b) 16%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--warn, #b8860b) 44%, transparent);
  color: color-mix(in srgb, var(--warn, #b8860b) 88%, var(--ink));
}
.agent-key-status-badge.is-expired,
.agent-key-status-badge.is-revoked {
  background: color-mix(in srgb, var(--danger, #c62828) 14%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--danger, #c62828) 42%, transparent);
  color: var(--danger, #c62828);
}
.agent-key-card-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem 0.65rem;
}
.agent-key-card-meta-row {
  display: contents;
}
.agent-key-card-meta-item {
  min-width: 0;
  margin: 0;
}
.agent-key-card-meta-pair {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
  margin: 0;
}
.agent-key-card-meta-pair dt {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted, #666);
}
.agent-key-card-meta-pair dt::after {
  content: ':';
  margin-left: 0.05rem;
}
.agent-key-card-meta-pair dd {
  margin: 0;
  min-width: 0;
  font-size: 0.84rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-key-token-prefix {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
}
.agent-key-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.btn.sm {
  min-height: 1.85rem;
  padding: 0.28rem 0.65rem;
  font-size: 0.82rem;
}
@media (max-width: 520px) {
  .agent-key-card-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.22rem 0.4rem;
  }
  .agent-key-card-meta-pair dt {
    font-size: 0.62rem;
  }
  .agent-key-card-meta-pair dd {
    font-size: 0.78rem;
  }
}
.agent-key-table-wrap {
  overflow-x: auto;
}
.agent-key-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-meta);
}
.agent-key-table th,
.agent-key-table td {
  padding: .55rem .45rem;
  border-bottom: var(--hair) solid var(--line);
  text-align: left;
  vertical-align: top;
}
.agent-key-status.is-active { color: var(--ok, #1a7f37); }
.agent-key-status.is-paused { color: var(--warn, #b8860b); }
.agent-key-status.is-expired,
.agent-key-status.is-revoked { color: var(--danger, #c62828); }
.agent-tag-choices-hint {
  margin: 0 0 .45rem;
  font-size: var(--fs-meta);
}
.agent-tag-choices {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.agent-tag-choice {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0;
  gap: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}
.agent-tag-choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.agent-tag-choice .tag-chip {
  opacity: .72;
}
.agent-tag-choice input:checked + .tag-chip {
  opacity: 1;
  font-weight: 700;
  background: color-mix(in srgb, var(--tag, #64748b) 38%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--tag, #64748b) 85%, transparent);
  box-shadow: 0 0 0 2px var(--ink);
}
.agent-tag-choice input:focus-visible + .tag-chip {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

.agent-key-expiry-choices {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.agent-key-expiry-choice {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.agent-key-expiry-choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.agent-key-expiry-choice span {
  display: inline-block;
  padding: .42rem .72rem;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--chip);
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 650;
  line-height: 1.2;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.agent-key-expiry-choice input:checked + span {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  color: var(--ink);
}
.agent-key-expiry-choice input:focus-visible + span {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}
.agent-key-expiry-choice:hover span {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 8%, var(--chip));
}

/* end agent-key-create-page */
/* entry 2FA — #33 UX: +2FA neben +Feld, Overlay-Setup, Countdown-Spinner */
.item-2fa-active {
  margin-bottom: .55rem;
  padding: .55rem .65rem;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: .65rem;
  background: color-mix(in srgb, var(--chip) 55%, transparent);
}
.item-2fa-code-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.item-2fa-digits {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  min-width: 7.5ch;
}
.item-2fa-countdown-ring {
  --2fa-progress: 1;
  position: relative;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.item-2fa-spinner {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.item-2fa-spinner-track {
  stroke: color-mix(in srgb, var(--accent, #3b82f6) 18%, transparent);
}
.item-2fa-spinner-arc {
  stroke: var(--accent, #3b82f6);
  stroke-linecap: round;
  stroke-dasharray: 97.4;
  stroke-dashoffset: calc(97.4 * (1 - var(--2fa-progress, 1)));
  transition: stroke-dashoffset .35s linear;
}
.item-2fa-countdown {
  position: relative;
  z-index: 1;
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-muted, #9ca3af);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.item-2fa-countdown.is-low { color: var(--danger, #ef4444); }
.item-2fa-countdown-ring:has(.item-2fa-countdown.is-low) .item-2fa-spinner-arc {
  stroke: var(--danger, #ef4444);
}
.item-2fa-remove { margin-top: .35rem; }
.item-2fa-setup-overlay[hidden] { display: none !important; }
body.item-2fa-setup-open { overflow: hidden; }
.item-2fa-setup-dialog { width: min(100%, 24rem); }
.item-2fa-setup-tabs {
  display: flex;
  gap: .35rem;
  margin-bottom: .5rem;
}
.item-2fa-tab {
  flex: 1;
  padding: .4rem .55rem;
  border-radius: .45rem;
  border: 1px solid var(--border, rgba(255,255,255,.1));
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.item-2fa-tab.is-active {
  background: color-mix(in srgb, var(--accent) 14%, var(--chip));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.item-2fa-panel { gap: .45rem; }
.item-2fa-panel[hidden],
.item-2fa-verify[hidden] { display: none !important; }
.item-2fa-otpauth,
.item-2fa-secret-input,
.item-2fa-verify-input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88rem;
}
.item-2fa-verify-input {
  text-align: center;
  letter-spacing: .18em;
  font-size: 1.1rem;
  padding: .55rem .65rem;
}
.item-2fa-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .75rem;
  border-radius: .45rem;
  border: 1px dashed var(--border, rgba(255,255,255,.15));
  cursor: pointer;
  font-size: .92rem;
}
.item-2fa-setup-actions {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}
.item-2fa-hint { font-size: .85rem; margin: 0; }
.item-extras-head .tag-add-link + .tag-add-link { margin-left: .25rem; }

/* PWA install hint — nur im Browser-Tab, nicht in standalone (#31: innerhalb .app) */
.app:has(> .pwa-install-hint) {
  grid-template-rows: auto auto 1fr auto;
}
.pwa-install-hint {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .65rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: .55rem var(--pad);
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev));
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow: none;
  animation: pwa-hint-in .25s var(--ease) both;
}
@keyframes pwa-hint-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.pwa-install-hint-body {
  display: grid;
  gap: .2rem;
  min-width: 0;
  flex: 1 1 auto;
}
.pwa-install-hint-title {
  font-size: var(--fs-ui);
  font-weight: 650;
  line-height: 1.25;
}
.pwa-install-hint-desc {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.35;
  font-weight: 450;
}
.pwa-install-hint-actions {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
  flex: 0 0 auto;
}
.pwa-install-hint-btn {
  white-space: nowrap;
  min-height: calc(var(--control-min-h) - .15rem);
  padding: calc(var(--control-pad-y) * .75) calc(var(--control-pad-x) * .85);
  font-size: var(--fs-meta);
}
.pwa-install-hint-dismiss {
  width: 1.85rem;
  height: 1.85rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--muted);
}
@media (max-width: 520px) {
  .pwa-install-hint {
    flex-direction: column;
    align-items: stretch;
  }
  .pwa-install-hint-actions {
    justify-content: space-between;
  }
}
.folder-move-dialog {
  position: relative;
  width: min(100%, 28rem);
  max-height: min(92vh, 40rem);
}
.folder-move-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  color: var(--muted);
}
.folder-move-close .icon svg {
  width: 1.05rem;
  height: 1.05rem;
}
.folder-move-close:active {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.folder-move-dialog .delete-head {
  padding-right: 2.3rem;
}
.folder-move-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: -.2rem;
}
.folder-move-row-wrap.is-selected {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: var(--radius-sm);
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: -2px;
}
.folder-move-row-wrap.is-selected .folder-move-row-title {
  font-weight: 700;
}
.folder-move-search {
  width: 100%;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  border: var(--hair) solid var(--line);
  background: var(--bg);
}
.folder-move-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem;
  font-size: var(--fs-meta);
}
.folder-move-crumb-btn {
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: .15rem .25rem;
  cursor: pointer;
}
.folder-move-crumb-item.is-current {
  font-weight: 650;
}
.folder-move-crumb-sep {
  opacity: .55;
}
.folder-move-list {
  display: grid;
  gap: .35rem;
  max-height: min(46vh, 18rem);
  overflow: auto;
}
.folder-move-row-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem;
  align-items: stretch;
}
.folder-move-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: .55rem .65rem;
  border-radius: var(--radius-sm);
  border: var(--hair) solid var(--line);
  background: var(--bg);
  cursor: pointer;
}
.folder-move-row:active,
.folder-move-open:active {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}
.folder-move-row-title {
  font-weight: 650;
}
.folder-move-row-meta {
  display: block;
  font-size: var(--fs-meta);
}
.item-folder-label {
  font-weight: 600;
}
.actions.item-form-actions .action-folder-move {
  color: var(--ink);
}

/* ---------------------------------------------------------------
   Modal-Ebene deutlich vom Seiteninhalt abheben
   Vorher: Scrim = Seitenfarbe bei 35% -> kaum Kontrast, Dialog
   wirkte wie Teil der Seite. Jetzt: neutraler Abdunkler + Elevation.
   --------------------------------------------------------------- */
.delete-overlay,
.detach-overlay,
.pair-overlay,
.move-overlay,
.agent-key-overlay,
.qr-scan-overlay {
  background: rgba(0, 0, 0, .52);
  backdrop-filter: blur(3px);
}
html[data-theme="dark"] .delete-overlay,
html[data-theme="dark"] .detach-overlay,
html[data-theme="dark"] .pair-overlay,
html[data-theme="dark"] .move-overlay,
html[data-theme="dark"] .agent-key-overlay,
html[data-theme="dark"] .qr-scan-overlay {
  background: rgba(0, 0, 0, .66);
}
.delete-dialog,
.pair-dialog,
.agent-key-dialog {
  border: 1px solid color-mix(in srgb, var(--ink) 16%, var(--line));
  box-shadow:
    0 28px 70px rgba(0, 0, 0, .45),
    0 6px 18px rgba(0, 0, 0, .28);
  animation: dialog-rise .16s var(--ease) both;
}
@keyframes dialog-rise {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .delete-dialog,
  .pair-dialog,
  .agent-key-dialog {
    animation: none;
  }
}
/* Picker: Kopf und Bestaetigen-Leiste optisch verankern */
.folder-move-dialog .delete-head {
  border-bottom: var(--hair) solid var(--line);
  padding-bottom: .6rem;
}
.folder-move-dialog .folder-move-actions {
  border-top: var(--hair) solid var(--line);
  padding-top: .7rem;
}

/* ============================================================
   Eintragsliste — kompakt wie Ordnerzeile.
   [Kachel] Titel                    [Stern] [Menue]
            User / Passwort / URL
            Notiz (max. 2 Zeilen)
   Kein display:contents, kein grid-template-areas.
   ============================================================ */
#vault-list-mount > .item-list .browser-row--entry {
  --tile-tint: var(--muted);
  display: flex;
  align-items: flex-start;
  transition: background .12s var(--ease);
}
#vault-list-mount > .item-list .browser-row--entry.has-item-color {
  --tile-tint: var(--item-color);
}
@media (hover: hover) {
  #vault-list-mount > .item-list .browser-row:hover,
  .tags-page [data-vault-folder-list] .browser-row:hover,
  .tresor-switcher-row:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
  }
  html[data-theme="dark"] #vault-list-mount > .item-list .browser-row:hover,
  html[data-theme="dark"] .tags-page [data-vault-folder-list] .browser-row:hover,
  html[data-theme="dark"] .tresor-switcher-row:hover {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-link {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  grid-template-columns: 1.65rem minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: none;
  align-items: start;
  align-content: start;
  gap: .5rem;
  min-height: 0;
  padding-top: .55rem;
  padding-bottom: .55rem;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-icon {
  grid-area: auto;
  align-self: start;
  flex-shrink: 0;
  width: 1.65rem;
  min-width: 1.65rem;
  height: 1.65rem;
  margin-top: 0;
  border-radius: 0;
  color: var(--ink);
  background: none;
  border: 0;
  overflow: visible;
  opacity: 1;
}
#vault-list-mount > .item-list .browser-row--entry.has-item-color .browser-row-icon,
#vault-list-mount > .item-list .browser-row--entry.has-item-color .browser-row-icon .item-icon,
#vault-list-mount > .item-list .browser-row--entry.has-item-color .browser-row-icon .icon {
  color: var(--item-color, var(--ink));
}
#vault-list-mount > .item-list .browser-row.has-item-color .browser-row-icon .item-icon {
  color: var(--item-color, var(--ink));
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-icon .item-icon,
#vault-list-mount > .item-list .browser-row--entry .browser-row-icon .item-icon-filter,
#vault-list-mount > .item-list .browser-row--entry .browser-row-icon .item-icon-filter .item-icon,
#vault-list-mount > .item-list .browser-row--entry .browser-row-icon .icon,
#vault-list-mount > .item-list .browser-row--entry .browser-row-icon .icon svg,
#vault-list-mount > .item-list .browser-row--entry .browser-row-icon img {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
  min-width: 1.55rem;
  min-height: 1.55rem;
  color: inherit;
  overflow: visible;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: .22rem;
  min-width: 0;
  width: 100%;
  grid-column: 2;
  grid-area: auto;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  order: 1;
  grid-area: auto;
  width: 100%;
  max-width: 100%;
  font-weight: 650;
  line-height: 1.3;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: unset;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  order: 2;
  grid-area: auto;
  gap: .28rem;
  margin-top: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-badges .badge {
  flex: 0 1 auto;
  max-width: 100%;
  padding: .18rem .45rem;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-badges .badge-text {
  max-width: 100%;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-badges .badge-url .badge-text {
  max-width: 100%;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-meta {
  order: 3;
  grid-area: auto;
  width: 100%;
  max-width: 100%;
  text-align: left;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-meta--multiline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-badges:empty,
#vault-list-mount > .item-list .browser-row--entry .browser-row-meta:empty {
  display: none;
}
#vault-list-mount > .item-list .browser-row--entry .browser-row-fav,
#vault-list-mount > .item-list .browser-row--entry .browser-row-menu {
  align-self: flex-start;
  min-height: 2.85rem;
}
@media (max-width: 420px) {
  #vault-list-mount > .item-list .browser-row--entry .browser-row-badges .badge-text {
    max-width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  #vault-list-mount > .item-list .browser-row--entry { transition: none; }
}


/* CSP-safe: Palette als CSS-Variablen, kein inline style / attr() */
.accent-swatch[data-sw="#dc2626"], .accent-swatch[data-accent-set="#dc2626"], .tag-color-swatch[data-sw="#dc2626"], .tag-chip[data-sw="#dc2626"], .tag-badge[data-sw="#dc2626"] { --sw: #dc2626; --tag: #dc2626; }
.browser-row[data-sw="#dc2626"], .item-row[data-sw="#dc2626"] { --item-color: #dc2626; }
.accent-swatch[data-sw="#e11d48"], .accent-swatch[data-accent-set="#e11d48"], .tag-color-swatch[data-sw="#e11d48"], .tag-chip[data-sw="#e11d48"], .tag-badge[data-sw="#e11d48"] { --sw: #e11d48; --tag: #e11d48; }
.browser-row[data-sw="#e11d48"], .item-row[data-sw="#e11d48"] { --item-color: #e11d48; }
.accent-swatch[data-sw="#f43f5e"], .accent-swatch[data-accent-set="#f43f5e"], .tag-color-swatch[data-sw="#f43f5e"], .tag-chip[data-sw="#f43f5e"], .tag-badge[data-sw="#f43f5e"] { --sw: #f43f5e; --tag: #f43f5e; }
.browser-row[data-sw="#f43f5e"], .item-row[data-sw="#f43f5e"] { --item-color: #f43f5e; }
.accent-swatch[data-sw="#db2777"], .accent-swatch[data-accent-set="#db2777"], .tag-color-swatch[data-sw="#db2777"], .tag-chip[data-sw="#db2777"], .tag-badge[data-sw="#db2777"] { --sw: #db2777; --tag: #db2777; }
.browser-row[data-sw="#db2777"], .item-row[data-sw="#db2777"] { --item-color: #db2777; }
.accent-swatch[data-sw="#ea580c"], .accent-swatch[data-accent-set="#ea580c"], .tag-color-swatch[data-sw="#ea580c"], .tag-chip[data-sw="#ea580c"], .tag-badge[data-sw="#ea580c"] { --sw: #ea580c; --tag: #ea580c; }
.browser-row[data-sw="#ea580c"], .item-row[data-sw="#ea580c"] { --item-color: #ea580c; }
.accent-swatch[data-sw="#f97316"], .accent-swatch[data-accent-set="#f97316"], .tag-color-swatch[data-sw="#f97316"], .tag-chip[data-sw="#f97316"], .tag-badge[data-sw="#f97316"] { --sw: #f97316; --tag: #f97316; }
.browser-row[data-sw="#f97316"], .item-row[data-sw="#f97316"] { --item-color: #f97316; }
.accent-swatch[data-sw="#d97706"], .accent-swatch[data-accent-set="#d97706"], .tag-color-swatch[data-sw="#d97706"], .tag-chip[data-sw="#d97706"], .tag-badge[data-sw="#d97706"] { --sw: #d97706; --tag: #d97706; }
.browser-row[data-sw="#d97706"], .item-row[data-sw="#d97706"] { --item-color: #d97706; }
.accent-swatch[data-sw="#eab308"], .accent-swatch[data-accent-set="#eab308"], .tag-color-swatch[data-sw="#eab308"], .tag-chip[data-sw="#eab308"], .tag-badge[data-sw="#eab308"] { --sw: #eab308; --tag: #eab308; }
.browser-row[data-sw="#eab308"], .item-row[data-sw="#eab308"] { --item-color: #eab308; }
.accent-swatch[data-sw="#65a30d"], .accent-swatch[data-accent-set="#65a30d"], .tag-color-swatch[data-sw="#65a30d"], .tag-chip[data-sw="#65a30d"], .tag-badge[data-sw="#65a30d"] { --sw: #65a30d; --tag: #65a30d; }
.browser-row[data-sw="#65a30d"], .item-row[data-sw="#65a30d"] { --item-color: #65a30d; }
.accent-swatch[data-sw="#16a34a"], .accent-swatch[data-accent-set="#16a34a"], .tag-color-swatch[data-sw="#16a34a"], .tag-chip[data-sw="#16a34a"], .tag-badge[data-sw="#16a34a"] { --sw: #16a34a; --tag: #16a34a; }
.browser-row[data-sw="#16a34a"], .item-row[data-sw="#16a34a"] { --item-color: #16a34a; }
.accent-swatch[data-sw="#059669"], .accent-swatch[data-accent-set="#059669"], .tag-color-swatch[data-sw="#059669"], .tag-chip[data-sw="#059669"], .tag-badge[data-sw="#059669"] { --sw: #059669; --tag: #059669; }
.browser-row[data-sw="#059669"], .item-row[data-sw="#059669"] { --item-color: #059669; }
.accent-swatch[data-sw="#15803d"], .accent-swatch[data-accent-set="#15803d"], .tag-color-swatch[data-sw="#15803d"], .tag-chip[data-sw="#15803d"], .tag-badge[data-sw="#15803d"] { --sw: #15803d; --tag: #15803d; }
.browser-row[data-sw="#15803d"], .item-row[data-sw="#15803d"] { --item-color: #15803d; }
.accent-swatch[data-sw="#0d9488"], .accent-swatch[data-accent-set="#0d9488"], .tag-color-swatch[data-sw="#0d9488"], .tag-chip[data-sw="#0d9488"], .tag-badge[data-sw="#0d9488"] { --sw: #0d9488; --tag: #0d9488; }
.browser-row[data-sw="#0d9488"], .item-row[data-sw="#0d9488"] { --item-color: #0d9488; }
.accent-swatch[data-sw="#0891b2"], .accent-swatch[data-accent-set="#0891b2"], .tag-color-swatch[data-sw="#0891b2"], .tag-chip[data-sw="#0891b2"], .tag-badge[data-sw="#0891b2"] { --sw: #0891b2; --tag: #0891b2; }
.browser-row[data-sw="#0891b2"], .item-row[data-sw="#0891b2"] { --item-color: #0891b2; }
.accent-swatch[data-sw="#06b6d4"], .accent-swatch[data-accent-set="#06b6d4"], .tag-color-swatch[data-sw="#06b6d4"], .tag-chip[data-sw="#06b6d4"], .tag-badge[data-sw="#06b6d4"] { --sw: #06b6d4; --tag: #06b6d4; }
.browser-row[data-sw="#06b6d4"], .item-row[data-sw="#06b6d4"] { --item-color: #06b6d4; }
.accent-swatch[data-sw="#0284c7"], .accent-swatch[data-accent-set="#0284c7"], .tag-color-swatch[data-sw="#0284c7"], .tag-chip[data-sw="#0284c7"], .tag-badge[data-sw="#0284c7"] { --sw: #0284c7; --tag: #0284c7; }
.browser-row[data-sw="#0284c7"], .item-row[data-sw="#0284c7"] { --item-color: #0284c7; }
.accent-swatch[data-sw="#2563eb"], .accent-swatch[data-accent-set="#2563eb"], .tag-color-swatch[data-sw="#2563eb"], .tag-chip[data-sw="#2563eb"], .tag-badge[data-sw="#2563eb"] { --sw: #2563eb; --tag: #2563eb; }
.browser-row[data-sw="#2563eb"], .item-row[data-sw="#2563eb"] { --item-color: #2563eb; }
.accent-swatch[data-sw="#1d4ed8"], .accent-swatch[data-accent-set="#1d4ed8"], .tag-color-swatch[data-sw="#1d4ed8"], .tag-chip[data-sw="#1d4ed8"], .tag-badge[data-sw="#1d4ed8"] { --sw: #1d4ed8; --tag: #1d4ed8; }
.browser-row[data-sw="#1d4ed8"], .item-row[data-sw="#1d4ed8"] { --item-color: #1d4ed8; }
.accent-swatch[data-sw="#1e3a8a"], .accent-swatch[data-accent-set="#1e3a8a"], .tag-color-swatch[data-sw="#1e3a8a"], .tag-chip[data-sw="#1e3a8a"], .tag-badge[data-sw="#1e3a8a"] { --sw: #1e3a8a; --tag: #1e3a8a; }
.browser-row[data-sw="#1e3a8a"], .item-row[data-sw="#1e3a8a"] { --item-color: #1e3a8a; }
.accent-swatch[data-sw="#7c3aed"], .accent-swatch[data-accent-set="#7c3aed"], .tag-color-swatch[data-sw="#7c3aed"], .tag-chip[data-sw="#7c3aed"], .tag-badge[data-sw="#7c3aed"] { --sw: #7c3aed; --tag: #7c3aed; }
.browser-row[data-sw="#7c3aed"], .item-row[data-sw="#7c3aed"] { --item-color: #7c3aed; }
.accent-swatch[data-sw="#9333ea"], .accent-swatch[data-accent-set="#9333ea"], .tag-color-swatch[data-sw="#9333ea"], .tag-chip[data-sw="#9333ea"], .tag-badge[data-sw="#9333ea"] { --sw: #9333ea; --tag: #9333ea; }
.browser-row[data-sw="#9333ea"], .item-row[data-sw="#9333ea"] { --item-color: #9333ea; }
.accent-swatch[data-sw="#6d28d9"], .accent-swatch[data-accent-set="#6d28d9"], .tag-color-swatch[data-sw="#6d28d9"], .tag-chip[data-sw="#6d28d9"], .tag-badge[data-sw="#6d28d9"] { --sw: #6d28d9; --tag: #6d28d9; }
.browser-row[data-sw="#6d28d9"], .item-row[data-sw="#6d28d9"] { --item-color: #6d28d9; }
.accent-swatch[data-sw="#c026d3"], .accent-swatch[data-accent-set="#c026d3"], .tag-color-swatch[data-sw="#c026d3"], .tag-chip[data-sw="#c026d3"], .tag-badge[data-sw="#c026d3"] { --sw: #c026d3; --tag: #c026d3; }
.browser-row[data-sw="#c026d3"], .item-row[data-sw="#c026d3"] { --item-color: #c026d3; }
.accent-swatch[data-sw="#525252"], .accent-swatch[data-accent-set="#525252"], .tag-color-swatch[data-sw="#525252"], .tag-chip[data-sw="#525252"], .tag-badge[data-sw="#525252"] { --sw: #525252; --tag: #525252; }
.browser-row[data-sw="#525252"], .item-row[data-sw="#525252"] { --item-color: #525252; }
.accent-swatch[data-sw="#78716c"], .accent-swatch[data-accent-set="#78716c"], .tag-color-swatch[data-sw="#78716c"], .tag-chip[data-sw="#78716c"], .tag-badge[data-sw="#78716c"] { --sw: #78716c; --tag: #78716c; }
.browser-row[data-sw="#78716c"], .item-row[data-sw="#78716c"] { --item-color: #78716c; }
.accent-swatch[data-sw="#64748b"], .accent-swatch[data-accent-set="#64748b"], .tag-color-swatch[data-sw="#64748b"], .tag-chip[data-sw="#64748b"], .tag-badge[data-sw="#64748b"] { --sw: #64748b; --tag: #64748b; }
.browser-row[data-sw="#64748b"], .item-row[data-sw="#64748b"] { --item-color: #64748b; }
.accent-swatch[data-sw="#94a3b8"], .accent-swatch[data-accent-set="#94a3b8"], .tag-color-swatch[data-sw="#94a3b8"], .tag-chip[data-sw="#94a3b8"], .tag-badge[data-sw="#94a3b8"] { --sw: #94a3b8; --tag: #94a3b8; }
.browser-row[data-sw="#94a3b8"], .item-row[data-sw="#94a3b8"] { --item-color: #94a3b8; }

.accent-swatch[data-sw="#171717"], .accent-swatch[data-accent-set="#171717"], .tag-color-swatch[data-sw="#171717"], .tag-chip[data-sw="#171717"], .tag-badge[data-sw="#171717"] { --sw: #171717; --tag: #171717; }
.browser-row[data-sw="#171717"], .item-row[data-sw="#171717"] { --item-color: #171717; }
.accent-swatch[data-sw="#5b7c99"], .accent-swatch[data-accent-set="#5b7c99"], .tag-color-swatch[data-sw="#5b7c99"], .tag-chip[data-sw="#5b7c99"], .tag-badge[data-sw="#5b7c99"] { --sw: #5b7c99; --tag: #5b7c99; }
.browser-row[data-sw="#5b7c99"], .item-row[data-sw="#5b7c99"] { --item-color: #5b7c99; }
.accent-swatch[data-sw="#0f766e"], .accent-swatch[data-accent-set="#0f766e"], .tag-color-swatch[data-sw="#0f766e"], .tag-chip[data-sw="#0f766e"], .tag-badge[data-sw="#0f766e"] { --sw: #0f766e; --tag: #0f766e; }
.browser-row[data-sw="#0f766e"], .item-row[data-sw="#0f766e"] { --item-color: #0f766e; }
.accent-swatch[data-sw="#4d7c0f"], .accent-swatch[data-accent-set="#4d7c0f"], .tag-color-swatch[data-sw="#4d7c0f"], .tag-chip[data-sw="#4d7c0f"], .tag-badge[data-sw="#4d7c0f"] { --sw: #4d7c0f; --tag: #4d7c0f; }
.browser-row[data-sw="#4d7c0f"], .item-row[data-sw="#4d7c0f"] { --item-color: #4d7c0f; }
.accent-swatch[data-sw="#b45309"], .accent-swatch[data-accent-set="#b45309"], .tag-color-swatch[data-sw="#b45309"], .tag-chip[data-sw="#b45309"], .tag-badge[data-sw="#b45309"] { --sw: #b45309; --tag: #b45309; }
.browser-row[data-sw="#b45309"], .item-row[data-sw="#b45309"] { --item-color: #b45309; }
.accent-swatch[data-sw="#b91c1c"], .accent-swatch[data-accent-set="#b91c1c"], .tag-color-swatch[data-sw="#b91c1c"], .tag-chip[data-sw="#b91c1c"], .tag-badge[data-sw="#b91c1c"] { --sw: #b91c1c; --tag: #b91c1c; }
.browser-row[data-sw="#b91c1c"], .item-row[data-sw="#b91c1c"] { --item-color: #b91c1c; }
.accent-swatch[data-sw="#c45c7a"], .accent-swatch[data-accent-set="#c45c7a"], .tag-color-swatch[data-sw="#c45c7a"], .tag-chip[data-sw="#c45c7a"], .tag-badge[data-sw="#c45c7a"] { --sw: #c45c7a; --tag: #c45c7a; }
.browser-row[data-sw="#c45c7a"], .item-row[data-sw="#c45c7a"] { --item-color: #c45c7a; }

/* #38-40 detail-meta / list tags */
.detail-meta {
  margin: var(--section-gap) 0 0;
  display: grid;
  gap: .28rem .75rem;
}
.detail-meta-pair {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  min-width: 0;
  margin: 0;
}
.detail-meta-pair dt {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail-meta-pair dt::after {
  content: ':';
  margin-left: .05rem;
}
.detail-meta-pair dd {
  margin: 0;
  min-width: 0;
  font-size: var(--fs-meta);
  color: var(--ink);
}
.detail-meta-pair code {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: .92em;
}
.tresor-api-tresor-tags {
  display: grid;
  gap: .35rem;
}
.tresor-api-tresor-tags .item-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.agent-key-card-title-row {
  display: flex;
  align-items: center;
  gap: .25rem;
  min-width: 0;
  flex: 1 1 auto;
}
.agent-key-card-title-input {
  width: 100%;
  min-width: 0;
  margin: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
  padding: .15rem .4rem;
}
.agent-key-card-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: .3rem;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}
.browser-row--entry .browser-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  min-width: 0;
}

/* #19-20 import / backup */
.tresor-import-block { margin-top: .35rem; }
.import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-meta);
}
.import-preview-table th,
.import-preview-table td {
  text-align: left;
  padding: .28rem .35rem;
  border-bottom: var(--hair) solid var(--line);
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.import-progress {
  width: 100%;
  height: .55rem;
}


/* Hilfe / FAQ */
.hilfe-page .hilfe-lead {
  margin: 0 0 .75rem;
  font-size: .95rem;
}
.hilfe-page .faq-section {
  margin: 0 0 .65rem;
  border: 1px solid var(--border, #d4d4d8);
  border-radius: 10px;
  background: var(--card, transparent);
}
.hilfe-page .faq-section > summary,
.hilfe-page .faq-article > summary {
  cursor: pointer;
  padding: .85rem 1rem;
  font-weight: 600;
  list-style: none;
}
.hilfe-page .faq-section > summary {
  background: color-mix(in srgb, #000 12%, var(--bg-elev));
  border-radius: 9px 9px 0 0;
}
html[data-theme="dark"] .hilfe-page .faq-section > summary {
  background: color-mix(in srgb, #000 42%, var(--bg-elev));
}
.hilfe-page .faq-section:not([open]) > summary {
  border-radius: 9px;
}
.hilfe-page .faq-section > summary::-webkit-details-marker,
.hilfe-page .faq-article > summary::-webkit-details-marker {
  display: none;
}
.hilfe-page .faq-article {
  border-top: 1px solid var(--border, #d4d4d8);
}
.hilfe-page .faq-article > summary {
  font-weight: 500;
  background: color-mix(in srgb, var(--ink) 5%, var(--bg));
}
.hilfe-page .faq-body {
  padding: 0 1rem 1rem;
  font-size: .92rem;
  line-height: 1.45;
}
.hilfe-page .faq-body p,
.hilfe-page .faq-body ul {
  margin: 0 0 .65rem;
}
.hilfe-page .faq-body p:last-child,
.hilfe-page .faq-body ul:last-child {
  margin-bottom: 0;
}
.hilfe-page .faq-body ul {
  padding-left: 1.2rem;
}
.hilfe-page .faq-body code {
  font-size: .88em;
}
.hilfe-page .faq-empty {
  margin: .75rem 0;
}
.hilfe-page .hilfe-support {
  margin: 1.15rem 0 .35rem;
}

.hilfe-page .search-clear {
  background: none;
  border: 0;
  padding: 0;
}

.import-dialog,
.pair-dialog,
.qr-scan-dialog,
.item-2fa-setup-dialog,
.move-dialog {
  position: relative;
}
.import-dialog .delete-head,
.move-dialog .delete-head,
.item-2fa-setup-dialog .delete-head,
.pair-dialog .pair-head,
.qr-scan-dialog .qr-scan-head {
  padding-right: 2.3rem;
}
/* search-cards-api-style 20260831 */
.item-row.item-card.agent-key-card { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.1rem 1.15rem 1.05rem; overflow: visible; border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); border-left: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); border-radius: var(--radius, 12px); background: color-mix(in srgb, var(--accent) 4%, var(--surface, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent); }
.item-row.item-card.agent-key-card::before { display: none; }
.item-row.item-card.agent-key-card .item-fav-btn { position: absolute; top: .55rem; right: .45rem; width: calc(var(--control-min-h) * .85); height: calc(var(--control-min-h) * .85); }
.item-row.item-card.agent-key-card .agent-key-card-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 0; border: 0; background: none; }
.item-row.item-card.agent-key-card .item-creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; padding: 0; border: 0; background: none; }
.item-row.item-card.agent-key-card .badge-user::before { content: "Benutzer: "; font-size: .68rem; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-right: .3rem; }
.item-row.item-card.agent-key-card .badge-secret::before { content: "Passwort: "; font-size: .68rem; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-right: .3rem; }
.item-row.item-card.agent-key-card .badge-url::before { content: "URL: "; font-size: .68rem; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-right: .3rem; }
.item-row.item-card.agent-key-card .item-tags { padding: 0; }
.item-row.item-card.agent-key-card .agent-key-card-title-row { padding-right: 2.2rem; min-width: 0; }
html[data-theme=\x22dark\x22] .item-row.item-card.agent-key-card { background: color-mix(in srgb, var(--accent) 6%, var(--surface, #161618)); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }

#vault-list-mount > .item-list:not(.item-list--browser) { gap: .85rem; margin: 0; }
html[data-theme="dark"] .item-row.item-card.agent-key-card { background: color-mix(in srgb, var(--accent) 6%, var(--surface, #161618)); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }

#vault-list-mount > .item-list.item-list--browser { margin: 0; gap: 0; }
#vault-list-mount > .item-list.item-list--browser .browser-row--folder { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); padding-left: var(--pad); padding-right: var(--pad); }
#vault-list-mount > .item-list--browser .item-row.item-card.agent-key-card { margin: 0 0 .85rem; }
#vault-list-mount > .item-list--browser .browser-row--folder + .item-row.item-card.agent-key-card { margin-top: .85rem; }